/* Lamb Creative — shared service-page styles.
   Same Clay & Espresso system as index.html / weddings.html, factored out
   so the four service pages stay identical. No build step — plain CSS. */

html{scroll-behavior:smooth;scroll-padding-top:88px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fdf7ef;color:#3a2a1d;font-family:'Geist',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
  --fserif:'Newsreader',Georgia,serif;--hair:rgba(176,150,120,.42);--grain:.05;--gridop:.4}

/* backdrop layers */
.gridbg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--gridop);background-image:linear-gradient(to right,rgba(176,150,120,.2) 1px,transparent 1px),linear-gradient(to bottom,rgba(176,150,120,.2) 1px,transparent 1px);background-size:36px 36px}
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:var(--grain);mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px}
.page{position:relative;z-index:1}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,48px)}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px clamp(22px,5vw,48px);transition:background .25s ease,box-shadow .25s ease}
.hdr.solid{background:rgba(253,247,239,.93);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--hair)}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--fserif);font-size:22px;font-weight:600;letter-spacing:-.01em;color:#3a2a1d;text-decoration:none;flex:0 0 auto}
.logo img{height:34px;width:auto;display:block}
.nav{display:flex;gap:26px;align-items:center}
.nl{font-size:13.5px;letter-spacing:.02em;color:#3a2a1d;text-decoration:none;transition:color .2s;white-space:nowrap;padding:8px 0}
.nl:hover{color:#b06a43;text-decoration:underline;text-decoration-color:#b06a43;text-underline-offset:5px}
.nl[aria-current="page"]{color:#b06a43}
.rose{color:#b06a43}

/* rhythm */
.sec{padding:60px 0}
.hero{padding-top:132px;padding-bottom:20px}
.slab{font-size:15px;letter-spacing:.1em;color:#8a7862;font-weight:500;margin:0}
.h1{font-family:var(--fserif);font-size:clamp(40px,6vw,78px);line-height:1.02;letter-spacing:-.03em;font-weight:500;margin:22px 0 0;max-width:15ch}
.lead{font-size:18px;line-height:1.66;margin:26px 0 0;max-width:56ch;color:#785539}
.hcta-row{margin-top:34px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:#3a2a1d;color:#fdf7ef;border:0;border-radius:8px;padding:14px 26px;font-family:inherit;font-size:14px;font-weight:500;letter-spacing:.02em;cursor:pointer;text-decoration:none;transition:background .2s}
.btn:hover{background:#785539}
.ghost{display:inline-flex;align-items:center;gap:10px;background:transparent;color:#3a2a1d;border:1px solid var(--hair);border-radius:8px;padding:13px 24px;font-size:14px;font-weight:500;letter-spacing:.02em;text-decoration:none;transition:background .2s,border-color .2s}
.ghost:hover{border-color:#b06a43;color:#b06a43}
.pricenote{font-size:13.5px;color:#8a7862}

/* section heading */
.shead{font-family:var(--fserif);font-size:clamp(27px,3.3vw,44px);line-height:1.08;letter-spacing:-.02em;font-weight:500;color:#3a2a1d;margin:20px 0 0;max-width:20ch}
.sintro{font-size:16.5px;line-height:1.64;color:#785539;margin:18px 0 0;max-width:60ch}

/* included — feature list */
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,72px);margin-top:40px;border-top:1px solid var(--hair)}
.fitem{padding:24px 0;border-bottom:1px solid var(--hair)}
.fitem h3{font-family:var(--fserif);font-size:21px;font-weight:500;letter-spacing:-.01em;margin:0;color:#3a2a1d}
.fitem p{font-size:15.5px;line-height:1.58;color:#785539;margin:8px 0 0;max-width:46ch}
.fitem .fno{font-size:12px;letter-spacing:.1em;color:#8a7862;display:block;margin:0 0 10px}

/* process steps */
.steps{margin-top:40px;border-bottom:1px solid var(--hair)}
.step{display:grid;grid-template-columns:78px 260px 1fr;gap:36px;align-items:baseline;padding:26px 0;border-top:1px solid var(--hair)}
.stepno{font-size:12px;letter-spacing:.1em;color:#8a7862}
.stept{font-family:var(--fserif);font-size:26px;font-weight:500;letter-spacing:-.01em;margin:0}
.stepd{font-size:16px;line-height:1.6;color:#785539;margin:0;max-width:60ch}
.stepbody{min-width:0}
.stepsvc{font-size:13px;letter-spacing:.01em;line-height:1.75;color:#b09680;margin:9px 0 0}

/* proof: browser mockup (web design) */
.cstudy{margin-top:38px}
.browser{border-radius:13px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 10px 34px rgba(58,42,29,.18);background:#14100f}
.bbar{display:flex;align-items:center;gap:14px;padding:11px 16px;background:#f2e8da;border-bottom:1px solid rgba(176,150,120,.28)}
.bdots{display:flex;gap:7px}
.bdots i{width:11px;height:11px;border-radius:50%;display:block}
.bdots i:nth-child(1){background:#e0645a}.bdots i:nth-child(2){background:#e3b24a}.bdots i:nth-child(3){background:#5fae5a}
.burl{flex:1;text-align:center;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;letter-spacing:.04em;color:#8a7862;background:#fdf7ef;border-radius:6px;padding:5px 12px;max-width:340px;margin:0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bview{padding:30px clamp(20px,3vw,40px) 34px}
.mhero{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/7;background:#14100f}
.mhevid{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.mhero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,16,15,.4) 0%,rgba(20,16,15,0) 30%,rgba(20,16,15,0) 52%,rgba(20,16,15,.92) 100%)}
.mhero-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(15px,2vw,24px);pointer-events:none}
.mhero-wm{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(15px,2vw,25px);color:#f5efe8;line-height:1}
.mhero-tag{position:absolute;left:clamp(16px,2.4vw,26px);bottom:clamp(15px,2.4vw,24px);z-index:2;pointer-events:none}
.mhero-eyebrow{display:flex;align-items:center;gap:9px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,239,232,.82);margin:0 0 10px}
.mhero-eyebrow i{width:7px;height:7px;border-radius:50%;background:#e63946;display:block;flex:0 0 auto}
.mheh{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;font-size:clamp(30px,4.8vw,64px);line-height:.9;letter-spacing:-.01em;color:#f5efe8;margin:0}
.mheh .ac{color:#e63946}
.cscap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin:16px 2px 0}
.cscapl{font-size:14px;line-height:1.55;color:#785539;margin:0;max-width:62ch}
.cscapl b{font-size:12px;letter-spacing:.08em;color:#8a7862;font-weight:500;display:block;margin-bottom:4px}
.cslink{font-size:13px;letter-spacing:.02em;color:#3a2a1d;text-decoration:underline;text-decoration-color:#b06a43;text-underline-offset:4px;white-space:nowrap;flex:0 0 auto}
.cslink:hover{color:#b06a43}

/* proof: film reels (video) */
.filmreel{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start;margin-top:38px}
.frvid{width:100%;object-fit:cover;display:block;background:#3a2a1d;cursor:pointer}
.frvid.h{aspect-ratio:16/9;border-radius:10px;box-shadow:0 1px 3px rgba(58,42,29,.14)}
.frvid.v{aspect-ratio:9/16;border-radius:12px;box-shadow:0 2px 16px rgba(58,42,29,.2)}
.reelcap{font-size:12px;letter-spacing:.08em;color:#8a7862;margin:14px 0 0}
.soundhint{color:#b09680}
video.showcase{cursor:pointer}
video.showcase.sound-on{outline:2px solid #b06a43;outline-offset:2px}

/* proof: photo gallery (photography) — masonry columns for mixed orientation */
.gallery{margin-top:38px;column-count:3;column-gap:14px}
.gallery figure{margin:0 0 14px;break-inside:avoid}
.gallery img{width:100%;height:auto;display:block;border-radius:10px;box-shadow:0 1px 4px rgba(58,42,29,.16)}
.gallery figcaption{font-size:12px;letter-spacing:.06em;color:#8a7862;margin:8px 2px 0}

/* stat row (seo) */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:40px;border-top:1px solid var(--hair);padding-top:8px}
.stat{padding:26px 0}
.statn{font-family:var(--fserif);font-size:clamp(36px,4.6vw,58px);line-height:1;letter-spacing:-.02em;color:#3a2a1d;margin:0}
.statn .rose{color:#b06a43}
.statl{font-size:14.5px;line-height:1.5;color:#785539;margin:12px 0 0;max-width:34ch}
.stattk{font-size:11px;letter-spacing:.08em;color:#b09680;margin:10px 0 0}

/* dark contact band */
.band{background:#3a2a1d;color:#fdf7ef}
.band .slab{color:rgba(230,204,172,.9)}
.close{font-family:var(--fserif);font-size:clamp(38px,4.6vw,62px);line-height:1.08;letter-spacing:-.02em;font-weight:500;margin:22px 0 0;max-width:17ch;color:#fdf7ef}
.bandlead{font-size:17px;line-height:1.66;color:rgba(230,204,172,.92);margin:22px 0 0;max-width:52ch}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:38px}
.band .btn{background:#fdf7ef;color:#3a2a1d}
.band .btn:hover{background:#e6ccac}
.band .ghost{color:#fdf7ef;border-color:rgba(253,247,239,.55)}
.band .ghost:hover{border-color:#fdf7ef;color:#fdf7ef;background:rgba(253,247,239,.08)}
.band .pricenote{color:rgba(230,204,172,.85)}

/* footer */
.ftr{display:flex;align-items:center;justify-content:flex-start;gap:20px 34px;flex-wrap:wrap;border-top:1px solid var(--hair);margin-top:54px;padding:26px 0 40px}
.ftr .copy{margin-left:auto}
.band+.ftr,.ftr.onband{border-color:rgba(230,204,172,.28)}
.fwm{font-family:var(--fserif);font-size:18px;font-weight:600;color:#3a2a1d;text-decoration:none}
.fnav{display:flex;gap:22px;flex-wrap:wrap}
.flink{font-size:13px;color:#8a7862;text-decoration:none;transition:color .2s;padding:6px 0;display:inline-block}
.flink:hover{color:#b06a43;text-decoration:underline;text-underline-offset:4px}
.copy{font-size:12px;color:#8a7862}

/* pricing card (dark) */
.pcard{background:#3a2a1d;color:#fdf7ef;border-radius:16px;padding:clamp(30px,5vw,58px);margin-top:36px}
.pcard .slab{color:rgba(230,204,172,.9)}
.pricehead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 30px;border-bottom:1px solid rgba(230,204,172,.28);padding-bottom:26px}
.priceh{font-family:var(--fserif);font-size:clamp(25px,3.3vw,42px);line-height:1.06;letter-spacing:-.02em;font-weight:500;margin:10px 0 0;max-width:22ch;color:#fdf7ef}
.pricebig{font-family:var(--fserif);font-size:clamp(30px,4vw,50px);font-weight:500;white-space:nowrap;color:#fdf7ef;text-align:right}
.pricebig small{font-size:.4em;letter-spacing:.14em;text-transform:uppercase;color:rgba(230,204,172,.85);display:block;text-align:right;margin-bottom:4px;font-family:'Geist',sans-serif;font-weight:500}
.pricebig .per{font-size:.42em;color:rgba(230,204,172,.85)}
.pcols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);margin-top:32px}
.pcol h3{font-family:var(--fserif);font-size:21px;font-weight:500;margin:0 0 4px;color:#fdf7ef}
.pcol .ptag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#e6ccac;margin:0 0 14px}
.plist{list-style:none;margin:0;padding:0}
.plist li{position:relative;padding:10px 0 10px 22px;border-top:1px solid rgba(230,204,172,.2);font-size:15px;line-height:1.5;color:rgba(253,247,239,.92)}
.plist li:first-child{border-top:0}
.plist li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;border-radius:50%;background:#b06a43}
.pfoot{margin-top:26px;font-size:14.5px;line-height:1.6;color:rgba(230,204,172,.92);max-width:68ch}
.addons{margin-top:32px;border-top:1px solid rgba(230,204,172,.28);padding-top:26px}
.addons .ptag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#e6ccac;margin:0}
.atags{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.atag{border:1px solid rgba(230,204,172,.4);border-radius:999px;padding:9px 16px;font-size:14px;color:#fdf7ef}
.atag b{color:#e6ccac;font-weight:500}
.addnote{margin-top:18px;font-size:14px;line-height:1.6;color:rgba(230,204,172,.9);max-width:62ch}
/* bundle callout (light, on cream) */
.bundle{margin-top:22px;border:1px solid var(--hair);border-radius:14px;padding:clamp(22px,3vw,34px);background:rgba(176,150,120,.08);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 34px}
.bundle-l{flex:1;min-width:min(100%,320px)}
.bundle-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b06a43;margin:0 0 8px;font-weight:500;display:flex;align-items:center;gap:8px}
.bundle-tag i{width:7px;height:7px;border-radius:50%;background:#b06a43;display:block}
.bundle h3{font-family:var(--fserif);font-size:clamp(21px,2.4vw,29px);font-weight:500;letter-spacing:-.015em;margin:0;color:#3a2a1d;max-width:26ch}
.bundle p{font-size:14.5px;line-height:1.55;color:#785539;margin:10px 0 0;max-width:54ch}
.bundle-price{font-family:var(--fserif);font-size:clamp(28px,3.2vw,40px);font-weight:500;color:#3a2a1d;white-space:nowrap;text-align:right}
.bundle-price small{display:block;font-family:'Geist',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a7862;text-align:right;margin-top:4px}
:focus-visible{outline:2px solid #b06a43;outline-offset:3px;border-radius:3px}

@media(max-width:820px){
  .feat{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .filmreel{grid-template-columns:1fr;gap:22px}
  .frvid.v{max-width:300px}
  .gallery{column-count:2}
  .step{grid-template-columns:1fr;gap:10px}
  .pcols{grid-template-columns:1fr;gap:30px}
  .pricehead{flex-direction:column;align-items:flex-start}
  .pricebig,.pricebig small{text-align:left}
  .bundle{flex-direction:column;align-items:flex-start}
  .bundle-price,.bundle-price small{text-align:left}
}
@media(max-width:560px){
  .nav{gap:15px}
  .nl{font-size:12.5px}
  .gallery{column-count:1}
  .hero{padding-top:112px}
  .sec{padding:44px 0}
  .ftr{flex-direction:column;align-items:flex-start;gap:14px}
  .fnav{width:100%;column-gap:18px;row-gap:4px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hdr,.nl,.btn,.ghost,.flink{transition:none}}

/* video quote-push line (replaces the itemized package list) */
.pquote-line{max-width:52ch;line-height:1.65;margin:0 0 1.2rem;color:#5c4a39}