/* ============ tokens ============ */
:root{
  --ink:#131211; --ink-soft:#1c1a18; --bone:#F4F0E8; --bone-dim:#e9e3d7;
  --gray:#8A857C; --gray-dark:#5d594f; --bronze:#A9803F; --bronze-soft:rgba(169,128,63,.28);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.9,.28,1); --pad:clamp(20px,5vw,88px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto is load-bearing — the width/height ATTRIBUTES on <img> land as
   presentational hints, so without this the height stays definite, both axes are
   fixed, and the intrinsic aspect ratio is silently discarded (images stretch).
   Rules below that deliberately set height (.hero-bg, .portrait, .ba .after) are
   more specific and still win. */
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--bronze);color:var(--ink)}

/* grain */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ preloader ============ */
.curtain{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;pointer-events:none}
.curtain span{flex:1;background:var(--ink);transition:transform 1s var(--ease)}
.loaded .curtain span:first-child{transform:translateY(-101%)}
.loaded .curtain span:last-child{transform:translateY(101%)}
@media(prefers-reduced-motion:reduce){.curtain{display:none}}

/* ============ cursor ============ */
.cursor{display:none}
@media(hover:hover) and (pointer:fine){
  .cursor{display:block;position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
    background:var(--bronze);z-index:80;pointer-events:none;mix-blend-mode:difference;
    transition:width .25s,height .25s;transform:translate(-50%,-50%)}
  .cursor.big{width:52px;height:52px}
}

/* ============ nav ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);transition:transform .45s var(--ease),background .45s,backdrop-filter .45s}
nav.hidden{transform:translateY(-110%)}
nav.solid{background:rgba(19,18,17,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--bronze-soft)}
.wordmark{font-family:var(--sans);font-weight:700;letter-spacing:.42em;font-size:.82rem;text-decoration:none}
.navlinks{display:flex;gap:clamp(14px,3vw,36px);align-items:center;list-style:none}
.navlinks a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--bone);opacity:.75;transition:opacity .25s}
.navlinks a:hover,.navlinks a:focus-visible{opacity:1}
.pill{display:inline-block;padding:13px 26px;border-radius:999px;background:var(--bronze);color:var(--ink)!important;text-decoration:none;
  font-weight:600;letter-spacing:.08em;opacity:1!important;transition:transform .3s var(--ease);min-height:44px}
.pill:hover{transform:scale(1.05)}
@media(max-width:640px){.navlinks li:not(:last-child){display:none}}

/* ============ shared ============ */
section{position:relative}
.light{background:var(--bone);color:var(--ink)}
.label{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);margin-bottom:22px;font-weight:600}
h1,h2,.display{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em}
.rule{height:1px;background:var(--bronze-soft)}
.link{color:var(--bronze);text-decoration:none;font-weight:600;letter-spacing:.04em;border-bottom:1px solid var(--bronze-soft);padding-bottom:3px;transition:border-color .3s}
.link:hover{border-color:var(--bronze)}
.price{font-family:var(--serif);font-size:1.15rem;color:var(--gray-dark);margin:26px 0}
.dark .price{color:var(--gray)}

/* reveal system */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}
h1 .w{display:inline-block;overflow:hidden;vertical-align:top}
h1 .w i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform 1s var(--ease)}
.loaded h1 .w i{transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  h1 .w i{transform:none}
}

/* ============ hero ============ */
.hero{min-height:100dvh;display:flex;align-items:flex-end;padding:96px var(--pad) clamp(56px,9vh,110px)}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:-1}
.hero-bg img{width:100%;height:100%;object-fit:cover}
/* The ambient loop sits exactly on top of the still and fades in once it can
   play. It is decoration: aria-hidden, not focusable, and the page is complete
   without it. */
.hero-bg .hero-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s var(--ease);pointer-events:none}
.hero-bg .hero-loop.on{opacity:1}
@media(prefers-reduced-motion:no-preference){
  /* Both layers carry the SAME animation and both exist from first paint, so
     they stay in lockstep however late the video's bytes arrive — otherwise the
     crossfade would show the still mid-zoom against an unzoomed video. */
  .hero-bg img,.hero-bg .hero-loop{animation:kb 22s var(--ease) forwards}
  @keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
}
/* Four stops, not three: the top one is a scrim for the FIXED NAV, which paints
   bone links straight onto whatever the hero image happens to be bright at.
   It relaxes again by 22% so the photograph is not flattened, then ramps for the
   headline. Tuned against the skyline hero, which is bright exactly where the nav sits. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,18,17,.72) 0%,rgba(19,18,17,.36) 22%,
    rgba(19,18,17,.52) 58%,rgba(19,18,17,.9) 100%)}
.hero h1{font-size:clamp(2.6rem,7.4vw,6.4rem);max-width:16ch;margin:10px 0 26px}
.hero p{max-width:52ch;color:var(--bone-dim);font-size:clamp(1rem,1.4vw,1.2rem)}
.hero .cta{margin-top:38px;display:inline-block}
.scrollhint{position:absolute;right:var(--pad);bottom:clamp(56px,9vh,110px);font-size:.72rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--bone-dim);writing-mode:vertical-rl;text-decoration:none;opacity:.7}
@media(max-width:760px){.scrollhint{display:none}}

/* ============ manifesto ============ */
.manifesto{padding:clamp(120px,24vh,240px) var(--pad);text-align:center}
.manifesto .display{font-size:clamp(2rem,5vw,3.9rem);max-width:22ch;margin:0 auto 34px}
.manifesto p{max-width:56ch;margin:0 auto;color:var(--gray);font-size:clamp(1rem,1.35vw,1.18rem)}

/* ============ work panels ============ */
.work{padding:clamp(90px,14vh,160px) var(--pad)}
.work-grid{display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:clamp(36px,6vw,90px);align-items:center}
@media(max-width:900px){.work-grid{grid-template-columns:1fr}}
.work h2{font-size:clamp(2.4rem,5.4vw,4.6rem);margin-bottom:22px}
.work .body{color:var(--gray-dark);max-width:46ch}
.dark .body{color:var(--gray)}
.work h2 .svc{display:block;font-family:var(--sans);font-size:clamp(.92rem,1.25vw,1.05rem);
  font-weight:600;letter-spacing:.02em;line-height:1.35;color:var(--gray-dark);margin-top:12px}
.dark .work h2 .svc,.work.dark h2 .svc{color:var(--gray)}
.work .ico{width:38px;height:38px;color:var(--bronze);margin-bottom:22px}
.work .ico svg{width:100%;height:100%;display:block}

/* before/after */
.ba{position:relative;overflow:hidden;border-radius:14px;touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.ba img{width:100%;pointer-events:none}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.ba .after img{height:100%;object-fit:cover}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--bone);transform:translateX(-50%)}
.ba .handle::after{content:"◂ ▸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--bone);color:var(--ink);border-radius:999px;padding:10px 12px;font-size:.7rem;letter-spacing:.1em;white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,.3)}
.ba-tag{position:absolute;bottom:12px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(19,18,17,.65);color:var(--bone);padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.ba-tag.l{left:12px}.ba-tag.r{right:12px}
.ba-hint{margin-top:14px;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gray)}
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.pair-grid img{border-radius:10px}
.pair-grid figcaption{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-top:8px}

/* video panel */
.phone{width:min(320px,78vw);margin:0 auto;border:1px solid var(--bronze-soft);border-radius:26px;padding:10px;background:var(--ink-soft)}
.phone video{border-radius:18px;width:100%}
.filmframe{border:1px solid var(--bronze-soft);border-radius:16px;padding:8px;background:var(--ink-soft)}
.filmframe video{border-radius:10px;width:100%;display:block}
.filmframe figcaption{padding:12px 6px 4px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.reelgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,16px)}
.reelgrid .phone{width:100%;margin:0;padding:7px;border-radius:20px}
.reelgrid .phone video{border-radius:14px;aspect-ratio:9/16;object-fit:cover;width:100%;display:block}
@media(prefers-reduced-motion:no-preference){.drift{will-change:transform}}

/* card sweep */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,28px);margin-top:clamp(36px,6vh,64px)}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border-radius:14px;overflow:hidden}
.card figcaption{padding:14px 18px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-dark)}
.demo-note{margin-top:20px;font-size:.8rem;color:var(--gray-dark)}

/* ============ process ============ */
.process{padding:clamp(100px,16vh,180px) var(--pad)}
.process .label{margin-bottom:16px}
.process h2{font-size:clamp(2rem,4.6vw,3.6rem);margin-bottom:clamp(44px,8vh,80px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);max-width:1180px;margin-inline:auto}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{position:relative;overflow:hidden;background:var(--ink-soft);border:1px solid var(--bronze-soft);
  border-radius:16px;padding:clamp(28px,3vw,40px) clamp(24px,2.4vw,34px) clamp(26px,2.6vw,34px);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.step:hover{transform:translateY(-8px);border-color:var(--bronze);box-shadow:0 26px 54px -30px rgba(0,0,0,.75)}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.step:hover::before{transform:scaleX(1)}
.step .num{position:absolute;top:-4px;right:18px;font-family:var(--serif);font-size:clamp(5rem,8vw,7.4rem);
  line-height:1;color:var(--bronze);opacity:.16;pointer-events:none;user-select:none}
.step .ico{width:42px;height:42px;color:var(--bronze);margin-bottom:24px}
.step .ico svg{width:100%;height:100%;display:block}
.step h3{font-family:var(--sans);font-size:1.08rem;letter-spacing:.02em;margin:0 0 10px;color:var(--bone);position:relative}
.step p{color:var(--gray);font-size:.95rem;max-width:32ch;position:relative}
@media(prefers-reduced-motion:reduce){.step:hover{transform:none}}

/* ============ shared card shell — the .step language on media + placeholders ============ */
.card,.filmframe,.phone,.portrait,.ba{position:relative;overflow:hidden;border:1px solid var(--bronze-soft);
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover,.filmframe:hover,.phone:hover,.portrait:hover,.ba:hover{
  transform:translateY(-8px);border-color:var(--bronze);box-shadow:0 26px 54px -30px rgba(19,18,17,.5)}
.card::before,.filmframe::before,.phone::before,.portrait::before,.ba::before{content:"";position:absolute;
  top:0;left:0;right:0;height:2px;z-index:3;background:var(--bronze);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);pointer-events:none}
.card:hover::before,.filmframe:hover::before,.phone:hover::before,.portrait:hover::before,.ba:hover::before{transform:scaleX(1)}
/* .drift writes --drift from scroll JS; compose it with the lift so neither clobbers the other */
.drift{transform:translateY(var(--drift,0px))}
.drift:hover{transform:translateY(calc(var(--drift,0px) - 8px))}
@media(prefers-reduced-motion:reduce){
  .card:hover,.filmframe:hover,.phone:hover,.portrait:hover,.ba:hover,.drift:hover{transform:none}
}

/* ============ about ============ */
.about{padding:clamp(100px,16vh,180px) var(--pad)}
.about-grid{display:grid;grid-template-columns:4fr 6fr;gap:clamp(36px,6vw,90px)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}
.portrait{aspect-ratio:4/5;border-radius:14px;background:linear-gradient(160deg,#dcd5c6,#c9c0ac)}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 18px 12px;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(180deg,rgba(19,18,17,0),rgba(19,18,17,.72))}
.about h2{font-size:clamp(2.2rem,4.8vw,3.8rem);margin-bottom:26px}
.about .body p{color:var(--gray-dark);margin-bottom:18px;max-width:56ch}
.about .body p:first-of-type::first-letter{font-family:var(--serif);font-size:3.4em;float:left;line-height:.82;padding-right:12px;color:var(--ink)}

/* ============ cta ============ */
.close{min-height:92dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(90px,14vh,160px) var(--pad)}
.close h2{font-size:clamp(3rem,9vw,7rem);margin-bottom:26px}
.close .sub{max-width:46ch;color:var(--gray);margin-bottom:44px;font-size:clamp(1rem,1.4vw,1.2rem)}
.close .pill{font-size:1rem;padding:18px 42px}
.news{margin-top:clamp(56px,9vh,90px);width:min(460px,100%)}
.news .label{margin-bottom:14px}
.news form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.news form button{grid-column:1/-1}
.news input,.news select{flex:1;min-height:48px;padding:0 18px;border-radius:999px;
  border:1px solid var(--bronze-soft);background:var(--ink-soft);color:var(--bone);font-size:.95rem;
  outline:none;transition:border-color .3s;font-family:inherit}
.news input:focus,.news select:focus{border-color:var(--bronze)}
/* full width — an odd number of fields otherwise strands the select in a half column */
.news select{grid-column:1/-1;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--bronze) 50%),
    linear-gradient(135deg,var(--bronze) 50%,transparent 50%);
  background-position:calc(100% - 22px) 21px,calc(100% - 16px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:46px}
.news select option{background:var(--ink-soft);color:var(--bone)}
.news button{min-height:48px;padding:0 26px;border-radius:999px;border:0;background:var(--bone);color:var(--ink);
  font-weight:600;cursor:pointer;transition:transform .3s var(--ease)}
.news button:hover{transform:scale(1.05)}
.micro{margin-top:14px;font-size:.75rem;color:var(--gray)}
@media(max-width:480px){.news form{grid-template-columns:1fr}}

/* ============ footer ============ */
/* Ten services no longer fit in the nav, so the footer carries the full crawlable
   set — four columns of real links rather than one wrapping row. */
footer{padding:clamp(52px,8vh,80px) var(--pad) 56px;font-size:.82rem;color:var(--gray);
  border-top:1px solid var(--bronze-soft)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(28px,4vw,56px);max-width:1180px;margin-inline:auto}
.fcol h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);font-weight:600;margin-bottom:16px}
.fcol ul{list-style:none;display:grid;gap:10px}
.fcol a{color:var(--gray);text-decoration:none;transition:color .25s}
.fcol a:hover{color:var(--bronze)}
.fcol.nap{line-height:1.75}
.fcol.nap p{margin-bottom:12px}
.fbase{max-width:1180px;margin:clamp(38px,6vh,56px) auto 0;padding-top:26px;
  border-top:1px solid var(--bronze-soft);font-size:.76rem}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* ============ service pages ============ */
/* Hero uses the same full-bleed image + gradient as the home hero. That is not just
   decoration: the fixed nav paints bone-coloured links, so a light hero made them
   invisible. Keeping every hero dark guarantees nav + lede contrast on all pages. */
.svc-hero{position:relative;min-height:78dvh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(150px,20vh,210px) var(--pad) clamp(56px,8vh,90px);color:var(--bone)}
.svc-hero .hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.svc-hero .hero-bg img{width:100%;height:100%;object-fit:cover}
/* Heroes sit over photos of wildly different brightness (a dim room vs. a lit pizza),
   so the scrim has to be heavy enough for the WORST case, not the average one.
   Bronze on a bright image measured ~1.1:1 before this. */
.svc-hero .hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,18,17,.45) 0%,rgba(19,18,17,.72) 35%,
    rgba(19,18,17,.90) 65%,rgba(19,18,17,.96) 100%)}
.svc-hero > *{position:relative;z-index:1}
.svc-hero h1{font-size:clamp(2.4rem,6vw,5rem);max-width:18ch;margin:12px 0 24px}
.svc-hero .lede{max-width:54ch;color:var(--bone-dim);font-size:clamp(1.05rem,1.5vw,1.28rem)}
.svc-hero .actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:38px}
/* lighter bronze for on-image use only; --bronze is too dark to read over a photo */
.svc-hero .label{color:#D9AE6E}

.crumbs{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.crumbs a{color:var(--bone-dim);text-decoration:none;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.crumbs a:hover{color:var(--bronze);border-color:var(--bronze-soft)}
.crumbs span{margin:0 8px;opacity:.5}

.sec{padding:clamp(80px,12vh,140px) var(--pad)}
.sec h2{font-size:clamp(1.9rem,4.2vw,3.2rem);margin-bottom:26px;max-width:20ch}
.sec .body{max-width:58ch}
.sec .body p{margin-bottom:18px}
.light .sec .body p,.sec.light .body p{color:var(--gray-dark)}
.dark .sec .body p,.sec.dark .body p{color:var(--gray)}

/* two-column: copy one side, media the other. Alternates via .flip so the page
   does not read as one long left-hand column. */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(36px,5.5vw,80px);align-items:center}
.split.flip > *:first-child{order:2}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .split.flip > *:first-child{order:0}
}
.sec-head{max-width:70ch}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head.center h2{margin-left:auto;margin-right:auto}

/* media frames on service pages */
.shot{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--bronze-soft);
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.shot img{width:100%;height:auto;display:block}
.shot:hover{transform:translateY(-8px);border-color:var(--bronze);box-shadow:0 26px 54px -30px rgba(19,18,17,.5)}
.shot::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:3;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);pointer-events:none}
.shot:hover::before{transform:scaleX(1)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 16px 12px;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(180deg,rgba(19,18,17,0),rgba(19,18,17,.78))}
@media(prefers-reduced-motion:reduce){.shot:hover{transform:none}}
.stack{display:grid;gap:clamp(12px,1.6vw,18px)}
.stack-2{grid-template-columns:1fr 1fr}

/* what you get — checklist */
.gets{list-style:none;display:grid;gap:14px;margin:30px 0 0;max-width:52ch}
.gets li{position:relative;padding-left:34px;line-height:1.55}
.gets li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--bronze)}
.gets li::after{content:"";position:absolute;left:5.5px;top:.72em;width:7px;height:3.5px;
  border-left:1.6px solid var(--bronze);border-bottom:1.6px solid var(--bronze);transform:rotate(-45deg)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2.4vw,26px);
  margin-top:40px;max-width:1180px;margin-inline:auto}
.tier{position:relative;overflow:hidden;background:var(--ink-soft);border:1px solid var(--bronze-soft);border-radius:16px;
  padding:clamp(26px,3vw,36px);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.tier:hover{transform:translateY(-8px);border-color:var(--bronze);box-shadow:0 26px 54px -30px rgba(0,0,0,.75)}
.tier::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.tier:hover::before{transform:scaleX(1)}
.tier .name{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);font-weight:600}
.tier .amt{font-family:var(--serif);font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1;margin:16px 0 6px;color:var(--bone)}
.tier .unit{font-size:.86rem;color:var(--gray);margin-bottom:18px}
.tier p{font-size:.94rem;color:var(--gray)}
@media(prefers-reduced-motion:reduce){.tier:hover{transform:none}}

/* FAQ */
.faq{max-width:72ch;margin:0 auto}
.faq details{border-top:1px solid var(--bronze-soft);padding:22px 0}
.faq details:last-of-type{border-bottom:1px solid var(--bronze-soft)}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:1.02rem;display:flex;
  justify-content:space-between;gap:20px;align-items:flex-start;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{color:var(--bronze)}
.faq summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--bronze);
  flex:0 0 auto;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:14px;max-width:64ch}
.light .faq details p,.faq.light details p{color:var(--gray-dark)}
.dark .faq details p{color:var(--gray)}

/* cross-links to the other services.
   The label/title/description are <span>s — they MUST be display:block or they run
   together on one line and the vertical margins are silently dropped. */
.also{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,2.2vw,24px);margin-top:36px;max-width:1180px;margin-inline:auto}
.also a{position:relative;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
  background:var(--ink-soft);border:1px solid var(--bronze-soft);border-radius:16px;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.also a:hover{transform:translateY(-8px);border-color:var(--bronze);box-shadow:0 26px 54px -30px rgba(0,0,0,.75)}
.also a::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:3;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.also a:hover::before{transform:scaleX(1)}
.also .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.also .thumb img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);filter:saturate(.92)}
.also a:hover .thumb img{transform:scale(1.05)}
.also .meta{padding:22px clamp(20px,2vw,26px) clamp(22px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.also .k{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bronze);font-weight:600}
.also .t{display:block;font-family:var(--serif);font-size:1.45rem;line-height:1.15;
  margin:10px 0 8px;color:var(--bone)}
.also .d{display:block;font-size:.9rem;line-height:1.5;color:var(--gray)}
/* margin-top:auto pins the CTA to the card bottom so all three line up even when the
   descriptions wrap to different line counts */
.also .go{display:block;margin-top:auto;padding-top:18px;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--bronze);transition:transform .35s var(--ease)}
.also a:hover .go{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){
  .also a:hover{transform:none}
  .also a:hover .thumb img{transform:none}
  .also a:hover .go{transform:none}
}

/* phone link + footer NAP */
.telbig{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);color:var(--bone);text-decoration:none;
  border-bottom:1px solid var(--bronze-soft);transition:border-color .3s}
.telbig:hover{border-color:var(--bronze)}
.light .telbig{color:var(--ink)}
footer .brands a{color:var(--gray);text-decoration:none;transition:color .25s}
footer .brands a:hover{color:var(--bronze)}

/* ============ capability pages ============ */
/* The six agency disciplines have no portfolio imagery yet, so their heroes are
   typographic rather than propped up with a stock photo standing in for real work.
   Same ink ground and scrim weight as the image heroes so the fixed nav stays legible. */
/* padding matched to the image hero so the two kinds of service page open at the
   same rhythm; min-height drops to auto because there is no photo to fill */
.svc-hero.plain{min-height:auto;background:var(--ink);
  padding-top:clamp(150px,20vh,210px);padding-bottom:clamp(56px,8vh,90px)}
.svc-hero.plain::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 12% 0%,rgba(169,128,63,.14),transparent 62%)}
.svc-hero.plain .crumbs{padding-top:0}
.svc-hero.plain .label{color:var(--bronze)}
.svc-hero.plain h1{max-width:15ch}

/* spec panel — the media column on capability pages */
.panel{position:relative;overflow:hidden;background:var(--ink-soft);border:1px solid var(--bronze-soft);
  border-radius:16px;padding:clamp(26px,3vw,38px);
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.panel:hover{transform:translateY(-8px);border-color:var(--bronze);box-shadow:0 26px 54px -30px rgba(19,18,17,.5)}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);pointer-events:none}
.panel:hover::before{transform:scaleX(1)}
.panel .label{margin-bottom:20px}
.panel dl{display:grid;gap:0}
.panel dl > div{display:grid;grid-template-columns:minmax(92px,auto) 1fr;gap:8px 22px;
  padding:16px 0;border-top:1px solid var(--bronze-soft);align-items:baseline}
.panel dl > div:first-child{border-top:0;padding-top:0}
.panel dt{font-family:var(--serif);font-size:1.12rem;color:var(--bone);line-height:1.2}
.panel dd{font-size:.92rem;color:var(--gray);line-height:1.5}
@media(max-width:520px){.panel dl > div{grid-template-columns:1fr;gap:4px}}
.panel-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--bronze-soft);
  font-size:.78rem;line-height:1.55;color:var(--gray)}
@media(prefers-reduced-motion:reduce){.panel:hover{transform:none}}

/* client credits — names only, never logos */
.creds{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.creds li{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--bone-dim);line-height:1.25}
@media(max-width:420px){.creds{grid-template-columns:1fr}}

/* scope-based pricing note under the factor cards */
.sec-head.center .body{margin-inline:auto;color:var(--gray)}
.quote-note{max-width:60ch;margin:clamp(34px,5vh,48px) auto 0;text-align:center;
  font-size:.95rem;line-height:1.65;color:var(--gray)}

/* portfolio grid — reuses the .also card. 320px floor gives three columns at the
   1180 max-width, so nine builds land 3 x 3 with no orphan row, and the screenshots
   are big enough to actually read. The three-item app grid fills one row exactly. */
.folio{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.folio .thumb{background:var(--ink)}
/* screenshots are documents, not photographs: contain the top of the page rather
   than cropping into the middle of someone's hero */
.folio .thumb img{object-fit:cover;object-position:top center;filter:none}
.folio .k{font-size:.64rem;letter-spacing:.18em}
.folio .t{font-size:1.28rem;margin:9px 0 7px}
.folio .d{font-size:.86rem}
.folio .go{font-size:.72rem}

/* typographic cross-link thumb, for services with no imagery to show yet */
.also .thumb.type{display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 0%,#211e1a,#131211)}
.also .thumb.type span{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.3rem);
  color:var(--bronze);opacity:.9;letter-spacing:.01em;transition:transform .7s var(--ease)}
.also a:hover .thumb.type span{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.also a:hover .thumb.type span{transform:none}}

/* ============ home — capability grid ============ */
/* 265px floor gives four columns at the 1180 max-width, so seven capability cards
   land 4 + 3. A 300px floor drops it to three columns and strands the seventh alone. */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
  gap:clamp(16px,2.2vw,24px);margin-top:clamp(38px,6vh,60px);max-width:1180px;margin-inline:auto}
.caps a{position:relative;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
  background:var(--ink-soft);border:1px solid var(--bronze-soft);border-radius:16px;
  padding:clamp(26px,3vw,36px);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.caps a:hover{transform:translateY(-8px);border-color:var(--bronze);box-shadow:0 26px 54px -30px rgba(0,0,0,.75)}
.caps a::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.caps a:hover::before{transform:scaleX(1)}
.caps .n{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);font-weight:600}
.caps h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,1.9rem);
  line-height:1.15;margin:14px 0 10px;color:var(--bone)}
.caps p{font-size:.94rem;color:var(--gray);line-height:1.55;flex:1}
.caps .go{margin-top:20px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--bronze);transition:transform .35s var(--ease)}
.caps a:hover .go{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){.caps a:hover{transform:none}.caps a:hover .go{transform:none}}

/* ============ home — client credit strip ============ */
.creditline{padding:clamp(44px,7vh,72px) var(--pad);border-block:1px solid var(--bronze-soft);
  background:var(--ink-soft)}
.creditline .label{text-align:center;margin-bottom:26px}
/* No separator glyphs: the list wraps, and a trailing dot then dangles at the end
   of the broken line. Spacing alone carries the separation and survives any width. */
.creditline ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(18px,3.4vw,46px);max-width:1080px;margin-inline:auto}
.creditline li{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.55rem);color:var(--bone-dim);
  opacity:.86;white-space:nowrap}
.creditline .micro{text-align:center;margin-top:24px;max-width:62ch;margin-inline:auto}

/* ============ home — section headers on the rebuilt index ============ */
.band{padding:clamp(90px,14vh,150px) var(--pad)}
.band > .sec-head{max-width:64ch}
.band h2{font-size:clamp(2.1rem,4.8vw,3.6rem);margin-bottom:20px}
.band .intro{color:var(--gray);max-width:56ch;font-size:clamp(1rem,1.3vw,1.13rem)}
.band.light .intro{color:var(--gray-dark)}