/* ==========================================================================
   MEKTI STUDIO — homepage, cinematic edition
   Same brand: Cream #EDE9E1 · Blue #3858E9 · Midnight #0B0F1A · Impact + Inter.
   Built like a game reveal site: pinned stages, scroll-driven fades through
   black, footage first. Native scroll only — every stage reads one var, --p
   (0 → 1 progress through its section), set by vi.js.
   ========================================================================== */

:root{
  --cream:#EDE9E1;
  --cream-dim:rgba(237,233,225,.72);
  --blue:#3858E9;
  --blue-soft:#9DB0FF;       /* the lit end of the type gradient */
  --midnight:#0B0F1A;
  --black:#05070C;           /* stage black, a shade under midnight so fades read as film */
  --ink:#131722;
  --ink-soft:#4A5060;

  --display:Impact,'Anton','Haettenschweiler','Arial Narrow Bold',sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --maxw:1440px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--cream);
  font-family:var(--sans);font-size:clamp(1.0625rem,.4vw + 1rem,1.25rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video{display:block;max-width:100%}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px}

h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.skip{position:fixed;left:1rem;top:-4rem;z-index:300;background:var(--cream);color:var(--midnight);padding:.75rem 1rem;font-weight:700}
.skip:focus{top:1rem}

/* ---------- Type ---------- */
.kicker{
  font-size:.8125rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);
}
.kicker span{color:var(--cream);margin-right:.9em}
.mega{font-size:clamp(3.25rem,9vw,9.5rem)}
.big{font-size:clamp(1.25rem,1.3vw + .9rem,1.875rem);line-height:1.35;font-weight:500;color:var(--cream)}
.caps{font-size:.8125rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}

/* Lit-from-above display type: cream into soft brand blue. One gradient, used on display type only. */
.grad{
  background:linear-gradient(180deg,var(--cream) 30%,var(--blue-soft) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Header ---------- */
.hd{
  position:fixed;inset:0 0 auto;z-index:200;height:84px;
  display:flex;align-items:center;justify-content:space-between;padding-inline:var(--pad);
  transition:background-color .5s var(--ease),transform .5s var(--ease),height .5s var(--ease);
}
.hd::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(5,7,12,.55),transparent);opacity:0;transition:opacity .5s var(--ease)}
.hd.is-solid{background:var(--black);height:68px}
.hd.is-shaded::before{opacity:1}
.hd.is-hidden{transform:translateY(-100%)}
.logo{display:flex;align-items:center;gap:.7rem}
.logo__mark{width:30px;height:30px;flex:none;color:var(--cream);transition:transform .5s var(--ease)}
.logo:hover .logo__mark{transform:translateY(-3px)}
.logo__type{display:flex;flex-direction:column;line-height:1}
.logo__name{font-family:var(--display);font-size:1.4rem;letter-spacing:.02em;text-transform:uppercase}
.logo__sub{font-size:.5rem;font-weight:700;letter-spacing:.42em;color:var(--cream-dim);margin-top:.22rem}

.hd__right{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem)}
.hd__cta{
  padding:.8rem 1.35rem;background:var(--cream);color:var(--midnight);
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.hd__cta:hover{background:var(--blue);color:var(--cream)}
.hd__menu{display:flex;align-items:center;gap:.8rem;font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.6rem 0}
.hd__menu-lines{display:grid;gap:6px;width:26px}
.hd__menu-lines i{display:block;height:2px;background:currentColor;transition:transform .45s var(--ease)}
.hd__menu[aria-expanded="true"] .hd__menu-lines i:first-child{transform:translateY(4px) rotate(45deg)}
.hd__menu[aria-expanded="true"] .hd__menu-lines i:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(max-width:640px){.hd__cta{display:none}.hd__menu-txt{display:none}}

/* ---------- Menu: full-screen, fades through black like the rest ---------- */
.menu{
  position:fixed;inset:0;z-index:190;background:var(--black);
  display:flex;flex-direction:column;justify-content:flex-end;gap:3rem;
  padding:110px var(--pad) clamp(2rem,5vw,3.5rem);
  opacity:0;transition:opacity .5s var(--ease);
}
.menu.is-open{opacity:1}
.menu__bg{position:absolute;inset:0;opacity:.28}
.menu__bg img{width:100%;height:100%;object-fit:cover}
.menu__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--black) 25%,transparent)}
.menu__nav,.menu__foot{position:relative}
.menu__nav ul{list-style:none;margin:0;padding:0}
.menu__nav a{
  display:flex;align-items:baseline;gap:1.25rem;
  font-family:var(--display);font-size:clamp(2.75rem,8vw,6.5rem);line-height:1;text-transform:uppercase;
  color:var(--cream-dim);transition:color .3s var(--ease),transform .45s var(--ease);
}
.menu__nav a span{font-family:var(--sans);font-size:.8125rem;font-weight:700;letter-spacing:.18em}
.menu__nav a:hover{color:var(--cream);transform:translateX(.5rem)}
.menu.is-open .menu__nav li{animation:menuIn .7s var(--ease) both}
.menu.is-open .menu__nav li:nth-child(2){animation-delay:.05s}
.menu.is-open .menu__nav li:nth-child(3){animation-delay:.1s}
.menu.is-open .menu__nav li:nth-child(4){animation-delay:.15s}
.menu.is-open .menu__nav li:nth-child(5){animation-delay:.2s}
@keyframes menuIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.menu__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}

/* ---------- Pinned stages (shared) ---------- */
[data-scene]{position:relative}
/* A pinned stage spends its last screen sliding away after it has faded to black.
   Pulling the next pinned scene up by one screen starts it right as the last one ends. */
.hero + .intro,.intro + .chapter,.chapter + .chapter{margin-top:-100vh;margin-top:-100svh}
.hero__stage,.intro__stage,.chapter__stage,.studio__stage,.outro__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
}

/* ---------- 01 Hero: footage → Mekti mark ---------- */
.hero{height:420vh}
.hero__media{
  position:absolute;inset:0;
  /* Two mask layers, added together: a solid sheet (alpha driven by JS) plus the mark.
     As the sheet fades, only the mark-shaped window onto the footage is left. */
  -webkit-mask-image:linear-gradient(rgba(0,0,0,var(--sheet,1)),rgba(0,0,0,var(--sheet,1))),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 8 80 77'%3E%3Cpath d='M50 8c2 0 4 1 5.5 3L88 58c2 3 2 5 0 8s-5 4-8 4h-8c-3 0-5.5-1.5-7-4L50 40 35 66c-1.5 2.5-4 4-7 4h-8c-3 0-6-1-8-4s-2-5 0-8L44.5 11C46 9 48 8 50 8Zm0 50c2 0 4 1 5.5 3.5L62 73c2 3.5 1.5 6-1 8.5s-5 3-8 1.5l-3-3-3 3c-3 1.5-5.5 1-8-1.5s-3-5-1-8.5l6.5-11.5C46 59 48 58 50 58Z'/%3E%3C/svg%3E");
          mask-image:linear-gradient(rgba(0,0,0,var(--sheet,1)),rgba(0,0,0,var(--sheet,1))),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 8 80 77'%3E%3Cpath d='M50 8c2 0 4 1 5.5 3L88 58c2 3 2 5 0 8s-5 4-8 4h-8c-3 0-5.5-1.5-7-4L50 40 35 66c-1.5 2.5-4 4-7 4h-8c-3 0-6-1-8-4s-2-5 0-8L44.5 11C46 9 48 8 50 8Zm0 50c2 0 4 1 5.5 3.5L62 73c2 3.5 1.5 6-1 8.5s-5 3-8 1.5l-3-3-3 3c-3 1.5-5.5 1-8-1.5s-3-5-1-8.5l6.5-11.5C46 59 48 58 50 58Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0,var(--mx,50%) var(--my,46%);mask-position:0 0,var(--mx,50%) var(--my,46%);
  -webkit-mask-size:100% 100%,var(--ms,400vmax) auto;mask-size:100% 100%,var(--ms,400vmax) auto;
  will-change:mask-size;
}
/* while the mark closes in, the camera pushes into the left monitor so the mark fills with lit footage */
.hero__media video,.hero__media img{transform:scale(var(--zoom,1.08));transform-origin:var(--ox,50%) var(--oy,45%)}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,12,.45) 0%,transparent 28%,transparent 42%,rgba(5,7,12,.92) 100%),linear-gradient(90deg,rgba(5,7,12,.5),transparent 60%);opacity:var(--shade,1)}

/* Inside the mask, so it only ever fills the mark: footage turns into the solid brand-blue logo */
.hero__tint{position:absolute;inset:0;background:var(--blue);opacity:var(--tint,0)}
.hero__copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(2.5rem,8vh,5.5rem);opacity:var(--copy,1);transform:translateY(calc((1 - var(--copy,1)) * -40px))}
.hero__copy h1{margin-top:1.25rem;font-size:clamp(3.25rem,9.5vw,10rem);line-height:.88}
.hero__lock{
  position:absolute;left:0;right:0;top:calc(46% + min(19vw,26vh));
  display:flex;flex-direction:column;align-items:center;gap:.4rem;opacity:var(--lock,0);
  transform:translateY(calc((1 - var(--lock,0)) * 20px));
}
.hero__word{font-family:var(--display);font-size:clamp(2.5rem,6vw,4.75rem);line-height:1;text-transform:uppercase;letter-spacing:.04em}
.hero__sub{font-size:.75rem;font-weight:700;letter-spacing:.62em;margin-right:-.62em;color:var(--cream-dim);text-transform:uppercase}
.hero__scroll{position:absolute;right:var(--pad);bottom:clamp(2.5rem,8vh,5.5rem);display:flex;flex-direction:column;align-items:center;gap:.8rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;opacity:var(--copy,1)}
.hero__scroll i{display:block;width:2px;height:48px;background:linear-gradient(var(--cream),transparent);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:700px){.hero__scroll{display:none}}

/* ---------- 02 Intro: lines come up out of black ---------- */
.intro{height:240vh}
.intro__stage{display:grid;place-items:center;text-align:center;padding-inline:var(--pad)}
.intro__lines{display:flex;flex-direction:column;align-items:center;font-size:clamp(3.5rem,11vw,11rem);line-height:.9}
.ln{display:block;opacity:clamp(0,(var(--p,0) - var(--a)) * 7,1);transform:translateY(calc(clamp(0,(var(--a) + .14 - var(--p,0)) * 7,1) * 40px))}
/* Each line carries its own slice of one tall gradient. background-clip:text on the
   parent would paint every line at once and ignore the per-line fade. */
.ln{background:linear-gradient(180deg,var(--cream) 30%,var(--blue-soft) 100%) 0 var(--bp,0%)/100% 340%;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ln:nth-child(1){--a:.02;--bp:0%}.ln:nth-child(2){--a:.14;--bp:50%}.ln:nth-child(3){--a:.26;--bp:100%}.ln:nth-child(4){--a:.38;--bp:100%}
.ln--small{margin-top:2.5rem;font-family:var(--sans);font-size:clamp(1.125rem,1.3vw + .8rem,1.625rem);font-weight:500;line-height:1.3;text-transform:none;letter-spacing:0}
.intro__lines{opacity:clamp(0,(1 - var(--p,0)) * 6,1)}

/* ---------- 03 Chapters ---------- */
/* Each chapter: fade up from black → title over full-bleed footage →
   footage dims, detail + inset come in → fade back to black. */
.chapter{height:480vh}
.chapter__stage{
  /* fade in 0–.08 · title holds .14–.40 · detail holds .56–.86 · fade out .92–1 */
  --in:clamp(0,var(--p,0) * 12.5,1);
  --out:clamp(0,(1 - var(--p,0)) * 12.5,1);
  --t:min(clamp(0,(var(--p,0) - .06) * 12.5,1),clamp(0,(.46 - var(--p,0)) * 16,1));
  --d2:min(clamp(0,(var(--p,0) - .48) * 12.5,1),clamp(0,(.92 - var(--p,0)) * 16,1));
}
.chapter__media{position:absolute;inset:0;opacity:min(var(--in),var(--out));
  transform:scale(calc(1.14 - var(--p,0) * .14));transform-origin:50% 40%}
.chapter__dim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(5,7,12,.9) 0%,rgba(5,7,12,.2) 45%,transparent 70%),
    linear-gradient(90deg,rgba(5,7,12,calc(var(--d2) * .85)) 0%,rgba(5,7,12,calc(var(--d2) * .55)) 60%,rgba(5,7,12,calc(var(--d2) * .3)) 100%);
  opacity:min(var(--in),var(--out))}
.chapter__title{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(2.5rem,9vh,6rem);
  opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 36px))}
.chapter__title .mega{margin-top:1.25rem}
.chapter__detail{
  position:absolute;inset:0;padding:110px var(--pad) clamp(2.5rem,8vh,5rem);
  display:grid;align-items:center;gap:clamp(2rem,5vw,6rem);
  opacity:var(--d2);pointer-events:none;
}
@media(min-width:900px){.chapter__detail{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}}
.chapter__text{max-width:34rem;transform:translateY(calc((1 - var(--d2)) * 40px))}
.chapter__text > * + *{margin-top:1.4rem}
.chapter__text .big{margin-top:1.5rem}
.chapter__text p:not(.big):not(.kicker):not(.caps){color:var(--cream-dim)}
.chapter__inset{margin:0;justify-self:end;width:min(100%,640px);aspect-ratio:4/3;position:relative;overflow:hidden;
  outline:1px solid rgba(237,233,225,.22);transform:translateY(calc((1 - var(--d2)) * 80px))}
/* the last chapter hands over to the stills grid, so it holds instead of fading out */
.chapter--last .chapter__stage{--out:1;--d2:clamp(0,(var(--p,0) - .48) * 12.5,1)}
.chapter__inset--tall{aspect-ratio:9/16;width:min(100%,330px);max-height:72vh}
.chapter__inset img,.chapter__inset video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.1 - var(--d2) * .1))}
@media(max-width:899px){.chapter__inset{display:none}.chapter__detail{align-items:end}}
/* portrait screens crop the 16:9 footage hard — keep the person in frame */
@media(max-aspect-ratio:1/1){.chapter__media .cover{object-position:var(--pos,50%) 50%}}

/* ---------- 04 Stills grid ---------- */
.stills{padding-block:clamp(5rem,12vw,10rem);background:var(--black)}
.rowhead{display:flex;justify-content:space-between;gap:1rem;padding-bottom:1.1rem;margin-bottom:clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid rgba(237,233,225,.22)}
.stills__grid{display:grid;gap:clamp(.5rem,1vw,1rem);grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(110px,14vw,220px)}
.still{position:relative;overflow:hidden;background:var(--midnight)}
.still img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .5s var(--ease);opacity:.88}
.still:hover img{transform:scale(1.05);opacity:1}
.s1{grid-column:span 4;grid-row:span 2}.s2{grid-column:span 2}.s3{grid-column:span 2}
.s4{grid-column:span 2;grid-row:span 2}.s5{grid-column:span 2}.s6{grid-column:span 2}
@media(max-width:700px){
  .stills__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:34vw}
  .s1{grid-column:span 2}.s2,.s3,.s5,.s6{grid-column:span 1}.s4{grid-column:span 1;grid-row:span 2}
}

/* ---------- 05 Process (cream) ---------- */
.process{background:var(--cream);color:var(--ink);padding-block:clamp(5rem,11vw,9rem)}
.process .kicker{color:var(--ink-soft)}
.process .rowhead{border-color:rgba(19,23,34,.2)}
.process__title{font-size:clamp(2.5rem,6.5vw,6rem);max-width:16ch}
.steps{list-style:none;margin:clamp(2.5rem,5vw,4.5rem) 0 0;padding:0;display:grid;gap:0;border-top:2px solid var(--midnight)}
@media(min-width:900px){.steps{grid-template-columns:repeat(5,1fr)}}
.steps li{padding:1.5rem 1.25rem 1.75rem 0;border-bottom:2px solid var(--midnight)}
@media(min-width:900px){.steps li{border-bottom:0;border-right:2px solid var(--midnight);padding:1.75rem 1.5rem 0}.steps li:first-child{padding-left:0}.steps li:last-child{border-right:0}}
.steps span{font-family:var(--display);font-size:clamp(2.5rem,4vw,3.5rem);line-height:1;color:var(--blue)}
.steps h3{margin-top:.75rem;font-size:clamp(1.75rem,2.4vw,2.25rem)}
.steps p{margin-top:.6rem;color:var(--ink-soft);font-size:1.0625rem;line-height:1.5}

/* ---------- 06 Studio ---------- */
.studio{height:300vh;background:var(--black)}
.studio__stage{--in:clamp(0,var(--p,0) * 5,1);--c:clamp(0,(var(--p,0) - .25) * 5,1)}
.studio__media{position:absolute;inset:0;transform:scale(calc(1.08 - var(--p,0) * .08))}
.studio__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,12,.85),rgba(5,7,12,.1) 60%)}
.studio__copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(2.5rem,9vh,6rem);
  opacity:var(--c);transform:translateY(calc((1 - var(--c)) * 40px))}
.studio__copy .mega{margin-top:1.25rem}
.studio__copy .big{margin-top:1.75rem;max-width:36ch}

.team{background:var(--black);padding-block:clamp(4rem,8vw,7rem)}
.team__grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media(min-width:900px){.team__grid{grid-template-columns:1fr 1fr}}
.team__foot{margin-top:clamp(2.5rem,5vw,4rem)}
.member{display:grid;gap:0}
.member .kicker{margin-top:1.5rem}
.member h3{margin-top:.9rem;font-size:clamp(2rem,3.2vw,3rem)}
.member p:last-child{margin-top:1rem;color:var(--cream-dim);max-width:42ch}

/* Portrait slot. Drop an <img> inside and it covers the placeholder. */
.portrait{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#0E1220;
  outline:1px solid rgba(237,233,225,.16)}
.portrait::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 55% at 50% 38%,rgba(56,88,233,.28),transparent 70%)}
.portrait__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  color:rgba(237,233,225,.45);font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.portrait__ph svg{width:56px;height:56px;color:rgba(237,233,225,.22)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.on-cream .portrait{background:#E3DED4;outline-color:rgba(19,23,34,.14)}
.on-cream .portrait::before{background:radial-gradient(70% 55% at 50% 38%,rgba(56,88,233,.12),transparent 70%)}
.on-cream .portrait__ph{color:rgba(19,23,34,.45)}
.on-cream .portrait__ph svg{color:rgba(19,23,34,.18)}

/* ---------- 07 Partnership (blue) ---------- */
.deal{background:var(--blue);color:var(--cream);padding-block:clamp(5rem,11vw,9rem)}
.deal .kicker{color:rgba(237,233,225,.85)}
.deal__grid{display:grid;gap:clamp(2rem,5vw,5rem);align-items:end}
@media(min-width:960px){.deal__grid{grid-template-columns:1fr 1fr}}
.deal__price{margin-top:1.25rem;font-size:clamp(3.5rem,9vw,8.5rem)}
.deal__price span{display:block;margin-top:.75rem;font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.16em}
.deal__test{margin-top:1.5rem;color:rgba(237,233,225,.9)}
.deal__row{margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2.25rem}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:1.1rem 2.1rem;
  font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.btn--cream{background:var(--cream);color:var(--midnight)}
.btn--cream:hover{background:var(--midnight);color:var(--cream)}
.txt-link{display:inline-flex;align-items:center;gap:.55rem;font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:.35rem;border-bottom:2px solid currentColor;transition:opacity .3s}
/* the arrow slides instead of the gap growing, so a hover never reflows what sits next to it */
.txt-link::after{content:"\2192";display:inline-block;transition:transform .35s var(--ease)}
.txt-link:hover::after{transform:translateX(.4rem)}
.btn--blue{background:var(--blue);color:var(--cream)}
.btn--blue:hover{background:var(--midnight);color:var(--cream)}

/* ---------- 08 Outro: the mark returns ---------- */
.outro{height:240vh;background:var(--black)}
.outro__stage{--in:clamp(0,var(--p,0) * 4,1);--c:clamp(0,(var(--p,0) - .2) * 4,1);display:grid;place-items:center;text-align:center}
.outro__media{position:absolute;inset:0;opacity:.38;filter:saturate(.8)}
.outro__media::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,rgba(5,7,12,.3),var(--black))}
.outro__copy{position:relative;display:flex;flex-direction:column;align-items:center;padding-inline:var(--pad);
  opacity:var(--c);transform:translateY(calc((1 - var(--c)) * 40px))}
.outro__mark{width:clamp(56px,7vw,92px);height:auto;aspect-ratio:1;color:var(--cream);margin-bottom:2rem;
  transform:scale(calc(.6 + var(--c) * .4))}
.outro__copy .big{margin-top:1.5rem;max-width:30ch}
.outro .deal__row{justify-content:center}

/* ---------- Footer ---------- */
.ft{background:var(--black);border-top:1px solid rgba(237,233,225,.14);padding-block:clamp(3rem,5vw,4rem)}
.ft__top{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between}
.ft__nav{display:flex;flex-wrap:wrap;gap:1rem 2rem;list-style:none;margin:0;padding:0}
.ft__nav a{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);transition:color .3s}
.ft__nav a:hover{color:var(--cream)}
.ft__social{display:flex;gap:1.25rem}
.ft__social a{color:var(--cream-dim);transition:color .3s}
.ft__social a:hover{color:var(--cream)}
.ft__social svg{width:20px;height:20px;fill:currentColor}
.ft__bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(237,233,225,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;
  font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(237,233,225,.55)}

/* ---------- Fades for the unpinned blocks ---------- */
.fade{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.fade.is-in{opacity:1;transform:none}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:250;background:rgba(5,7,12,.96);display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;transition:opacity .45s var(--ease)}
.lightbox.is-open{opacity:1}
.lightbox img{max-width:100%;max-height:86vh;object-fit:contain;transform:scale(.96);transition:transform .6s var(--ease)}
.lightbox.is-open img{transform:none}
.lightbox__close{position:absolute;top:1.5rem;right:var(--pad);font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}


/* ==========================================================================
   Sub-pages — same language as the home page, used with a lighter hand.
   ========================================================================== */

/* ---------- Page hero: footage → black, title holds, then hands over ---------- */
.phero{height:210vh}
.phero--short{height:175vh}
.phero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  --m:calc(1 - var(--p,0) * .7);                      /* footage dims, never to black: it leaves dim */
  --c:clamp(0,(.82 - var(--p,0)) * 5,1)}              /* copy holds, then lifts away */
.phero__media{position:absolute;inset:0;opacity:var(--m);
  transform:scale(calc(1.02 + var(--p,0) * .14));transform-origin:50% 45%}
.phero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,7,12,.5) 0%,transparent 30%,transparent 40%,rgba(5,7,12,.92) 100%),
             linear-gradient(90deg,rgba(5,7,12,.55),transparent 65%)}
.phero__copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(2.5rem,9vh,6rem);
  opacity:var(--c);transform:translateY(calc(var(--p,0) * -90px))}
.phero__copy h1{margin-top:1.25rem;font-size:clamp(3rem,8.5vw,8.75rem);line-height:.9;max-width:14ch}
.phero--short .phero__copy h1{font-size:clamp(2.75rem,6.5vw,6.75rem);max-width:18ch}
.phero__copy .big{margin-top:1.75rem;max-width:40ch}
.phero__copy .meta{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem}
.phero__copy .meta .kicker span{margin-right:0}
.phero__scroll{position:absolute;right:var(--pad);bottom:clamp(2.5rem,9vh,6rem);opacity:calc(1 - var(--p,0) * 8)}
.phero__scroll i{display:block;width:2px;height:48px;background:linear-gradient(var(--cream),transparent);animation:drip 1.8s var(--ease) infinite}
@media(max-width:700px){.phero__scroll{display:none}}
@media(max-aspect-ratio:1/1){.phero__media .cover{object-position:var(--pos,50%) 50%}}

/* ---------- Plain blocks ---------- */
.block{padding-block:clamp(5rem,10vw,9rem);background:var(--black)}
.block--tight{padding-block:clamp(3.5rem,7vw,6rem)}
.on-cream{background:var(--cream);color:var(--ink)}
.on-blue{background:var(--blue);color:var(--cream)}
.on-cream .kicker{color:var(--ink-soft)}
.on-cream .kicker span{color:var(--ink)}
.on-cream .big{color:var(--ink)}
.on-cream .rowhead{border-color:rgba(19,23,34,.2)}
.on-cream .caps{color:var(--ink-soft)}
.on-blue .kicker,.on-blue .kicker span{color:rgba(237,233,225,.88)}
.dim{color:var(--cream-dim)}
.on-cream .dim{color:var(--ink-soft)}
.h-xl{font-size:clamp(2.75rem,7vw,7rem)}
.h-lg{font-size:clamp(2.25rem,5vw,4.75rem)}

.split{display:grid;gap:clamp(2rem,5vw,6rem);align-items:start}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr}}
.split--wide{align-items:end}
.stack > * + *{margin-top:1.4rem}

/* full-bleed still that eases in as it scrolls past */
.bleed{position:relative;height:clamp(320px,62vh,720px);overflow:hidden}
.bleed img,.bleed video{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;
  transform:translateY(calc((var(--p,.5) - .5) * -10%))}

/* ---------- Content system chain ---------- */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem clamp(.75rem,1.5vw,1.25rem);margin-top:clamp(2rem,4vw,3rem)}
.chain span{border:2px solid currentColor;padding:.85rem 1.2rem;font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.chain i{font-style:normal;font-family:var(--display);font-size:1.5rem;line-height:1;opacity:.7}

/* ---------- Work cards ---------- */
.card{display:block;position:relative}
.card__media{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--midnight)}
.card__media img,.card__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease),opacity .6s var(--ease)}
.card:hover .card__media img,.card:hover .card__media video{transform:scale(1.04)}
.card__media--soon img{opacity:.35;filter:grayscale(.4)}
.card__tag{position:absolute;left:1rem;top:1rem;z-index:2;padding:.45rem .8rem;background:var(--cream);color:var(--midnight);
  font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.card__tag--ghost{background:transparent;color:var(--cream);outline:1px solid rgba(237,233,225,.5)}
.card__foot{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;margin-top:1.1rem}
.card__name{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1;transition:color .3s}
.card:hover .card__name{color:var(--blue-soft)}
.card__cat{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);flex:none}
.cards{display:grid;gap:clamp(2rem,3vw,3rem) clamp(1rem,2vw,2rem)}
@media(min-width:800px){.cards{grid-template-columns:1fr 1fr}}
.card--feature .card__media{aspect-ratio:21/9}
.card--feature .card__name{font-size:clamp(2.25rem,5vw,4.5rem)}

/* ---------- Contact form ---------- */
.form{display:grid;gap:1.4rem}
.field{display:grid;gap:.55rem}
.field label{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.field input,.field textarea{width:100%;padding:1rem 1.1rem;background:#F6F3EC;color:var(--ink);border:2px solid var(--midnight);
  border-radius:0;font:inherit;font-size:1.0625rem;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:6px 6px 0 var(--blue)}
.form__msg{font-weight:600;min-height:1.5em;opacity:0;transition:opacity .35s var(--ease)}
.form__msg.is-shown{opacity:1}
.form .btn{justify-self:start;border:0;cursor:pointer}
.nsteps{list-style:none;margin:0;padding:0;border-top:2px solid var(--midnight)}
.nsteps li{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:baseline;padding-block:1.5rem;border-bottom:2px solid var(--midnight)}
.nsteps span{font-family:var(--display);font-size:clamp(2rem,3vw,2.75rem);line-height:1;color:var(--blue)}
.nsteps h3{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid rgba(237,233,225,.22)}
.faq__item{display:grid;gap:.75rem;padding-block:clamp(1.5rem,2.5vw,2rem);border-bottom:1px solid rgba(237,233,225,.22)}
@media(min-width:900px){.faq__item{grid-template-columns:minmax(260px,.85fr) 1fr;gap:3rem}}
.faq__item h3{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1}
.faq__item p{color:var(--cream-dim)}
.faq__item strong{color:var(--cream)}

/* ---------- Blog ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem)}
.filters button{padding:.65rem 1rem;border:1px solid rgba(237,233,225,.35);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-dim);transition:background-color .3s,color .3s,border-color .3s}
.filters button:hover{color:var(--cream);border-color:var(--cream)}
.filters button[aria-pressed="true"]{background:var(--cream);color:var(--midnight);border-color:var(--cream)}
.post-index{border-top:1px solid rgba(237,233,225,.22)}
.post-row{display:grid;gap:.75rem 2rem;padding-block:clamp(1.5rem,2.5vw,2.25rem);border-bottom:1px solid rgba(237,233,225,.22);transition:padding-left .45s var(--ease)}
@media(min-width:900px){.post-row{grid-template-columns:64px 1fr 200px;align-items:baseline}}
.post-row:hover{padding-left:1rem}
.post-row__num{font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--blue-soft)}
.post-row__title{display:block;font-family:var(--display);text-transform:uppercase;font-size:clamp(1.75rem,3vw,2.75rem);line-height:.98;transition:color .3s}
.post-row:hover .post-row__title{color:var(--blue-soft)}
.post-row__excerpt{display:block;margin-top:.75rem;color:var(--cream-dim);max-width:60ch}
.post-row__meta{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim)}
@media(min-width:900px){.post-row__meta{text-align:right}}

/* ---------- Article ---------- */
.prose{max-width:68ch;font-size:clamp(1.125rem,.4vw + 1.05rem,1.3125rem);line-height:1.7;color:var(--ink)}
.prose > * + *{margin-top:1.5rem}
.prose h2{margin-top:clamp(2.5rem,5vw,3.5rem);font-size:clamp(2rem,3.4vw,3rem)}
.prose h2 + p{margin-top:1.25rem}
.prose ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.prose li{display:flex;gap:.9rem;align-items:flex-start}
.prose li::before{content:"";flex:none;width:11px;height:11px;margin-top:.6em;background:var(--blue)}
.prose .pullquote{margin-block:clamp(2.5rem,5vw,3.5rem);padding-left:1.5rem;border-left:4px solid var(--blue);
  font-family:var(--display);text-transform:uppercase;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.02}
.postnav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.25rem 2rem;margin-top:clamp(3rem,6vw,5rem);
  padding-top:1.5rem;border-top:2px solid currentColor}

/* ---------- Project detail ---------- */
.pair{display:grid;gap:clamp(.75rem,1.5vw,1.25rem);margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:800px){.pair{grid-template-columns:1fr 1fr}}
.pair figure{margin:0;aspect-ratio:4/3;overflow:hidden;position:relative}
.pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Simple CTA band for sub-pages ---------- */
.cta{text-align:center;padding-block:clamp(6rem,14vw,12rem);position:relative;overflow:hidden}
.cta__mark{width:clamp(48px,6vw,80px);height:auto;aspect-ratio:1;margin:0 auto 2rem;color:var(--cream)}
.cta .big{margin:1.5rem auto 0;max-width:32ch}
.cta .deal__row{justify-content:center}

/* ---------- Reduced motion: no pinning, no scrubbing — just the content ---------- */
@media(prefers-reduced-motion:reduce){
  .hero,.intro,.chapter,.studio,.outro,.phero{height:auto;margin-top:0!important}
  .phero__stage{position:relative;height:100svh}
  .phero__media,.phero__copy{opacity:1!important;transform:none!important}
  .hero__stage,.intro__stage,.chapter__stage,.studio__stage,.outro__stage{position:relative;height:100svh}
  .hero__media{-webkit-mask-image:none;mask-image:none}
  .hero__lock{display:none}
  .ln,.intro__lines,.chapter__media,.chapter__title,.studio__media,.studio__copy,.outro__copy,.outro__media{opacity:1!important;transform:none!important}
  .chapter__detail{display:none}
  .fade{opacity:1;transform:none}
  .hero__scroll i{animation:none}
}

/* ---------- Service rows (services page) ---------- */
.svcs{display:grid;gap:clamp(4rem,9vw,8rem)}
.svc{display:grid;gap:clamp(1.75rem,4vw,5rem);align-items:center}
@media(min-width:960px){.svc{grid-template-columns:1.15fr .85fr}.svc--flip .svc__media{order:2}.svc--flip{grid-template-columns:.85fr 1.15fr}}
.svc__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--midnight)}
.svc__media--tall{aspect-ratio:4/5;max-height:80vh;width:min(100%,520px);justify-self:center}
.svc__media img,.svc__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc__text > * + *{margin-top:1.4rem}
.svc__text .h-lg{margin-top:1.1rem}

/* ==========================================================================
   Real work — the Alpine Hotels case and the pieces it is shown with
   ========================================================================== */
.work{background:var(--black);padding-block:clamp(5rem,10vw,8.5rem)}
.work__head{display:grid;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
@media(min-width:960px){.work__head{grid-template-columns:1.1fr .9fr}}
.work__title{font-size:clamp(3.5rem,10vw,10rem);line-height:.86}
.work__title small{display:block;margin-bottom:1rem;font-family:var(--sans);font-size:.8125rem;font-weight:700;letter-spacing:.2em;color:var(--cream-dim)}
.work__meta > * + *{margin-top:1.25rem}
.tagrow{display:flex;flex-wrap:wrap;gap:.5rem}
.tagrow span{padding:.5rem .85rem;outline:1px solid rgba(237,233,225,.4);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.on-cream .tagrow span{outline-color:rgba(19,23,34,.35)}
.piece{margin-top:clamp(2.5rem,5vw,4.5rem)}
.piece__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;
  padding-bottom:1rem;margin-bottom:clamp(1rem,2vw,1.5rem);border-bottom:1px solid rgba(237,233,225,.22)}
.on-cream .piece__head{border-color:rgba(19,23,34,.2)}
.piece__label{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.75rem,3vw,2.75rem);line-height:1}
.piece__note{max-width:52ch;color:var(--cream-dim)}
.on-cream .piece__note{color:var(--ink-soft)}

/* YouTube: the real thumbnail stands in until someone presses play, then the player loads */
.yt{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.yt__poster{position:absolute;inset:0;width:100%;height:100%;padding:0;cursor:pointer;display:block}
.yt__poster img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .5s var(--ease)}
.yt__poster:hover img{transform:scale(1.02);filter:brightness(.85)}
.yt__play{position:absolute;left:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);display:flex;align-items:center;gap:1rem;
  padding:.85rem 1.4rem .85rem .85rem;background:var(--cream);color:var(--midnight);
  font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:background-color .35s var(--ease),color .35s var(--ease)}
.yt__play i{display:grid;place-items:center;width:42px;height:42px;background:var(--blue);color:var(--cream)}
.yt__play svg{width:13px;height:13px;margin-left:3px;fill:currentColor}
.yt__poster:hover .yt__play{background:var(--blue);color:var(--cream)}
.yt__poster:hover .yt__play i{background:var(--midnight)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Five shorts, kept at 9:16. A row on wide screens, a swipe strip on phones. */
.shorts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.5rem,1vw,1rem)}
.short{position:relative;margin:0;aspect-ratio:9/16;background:#000;overflow:hidden}
.short video,.short img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.short__btn{position:absolute;inset:0;width:100%;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;
  padding:.85rem;background:linear-gradient(180deg,rgba(5,7,12,.55),transparent 28%,transparent 70%,rgba(5,7,12,.7));text-align:left}
.short__num{font-family:var(--display);font-size:1.25rem;line-height:1;color:var(--cream)}
.short__go{display:flex;align-items:center;gap:.6rem;font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.short__go i{display:grid;place-items:center;width:34px;height:34px;background:var(--cream);color:var(--midnight);transition:background-color .3s,color .3s}
.short__go svg{width:11px;height:11px;margin-left:2px;fill:currentColor}
.short__btn:hover .short__go i{background:var(--blue);color:var(--cream)}
.short.is-playing .short__btn{display:none}
@media(max-width:899px){
  .shorts{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad);scrollbar-width:none}
  .shorts::-webkit-scrollbar{display:none}
  .short{flex:0 0 min(62vw,280px);scroll-snap-align:start}
}

/* The thumbnail is shown as delivered: its own 16:9, nothing laid over it */
.thumbshow{margin:0}
.thumbshow img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.thumbshow figcaption{margin-top:1rem;color:var(--cream-dim);font-size:1rem}
.on-cream .thumbshow figcaption{color:var(--ink-soft)}

.case-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem;margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.5rem;border-top:1px solid rgba(237,233,225,.22)}
.case-foot p{color:var(--cream-dim)}

/* A chapter inset that holds a 16:9 piece of real work at its true ratio */
.chapter__inset--wide{aspect-ratio:16/9}
.chapter__inset--wide img{transform:none}

/* first chapter after the work block cuts in on footage instead of fading up from black */
.chapter--first .chapter__stage{--in:1}

/* ---------- Contact form extras ---------- */
.field select{width:100%;padding:1rem 1.1rem;background:#F6F3EC;color:var(--ink);border:2px solid var(--midnight);border-radius:0;
  font:inherit;font-size:1.0625rem;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--midnight) 50%),linear-gradient(135deg,var(--midnight) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field select:focus{outline:none;border-color:var(--blue);box-shadow:6px 6px 0 var(--blue)}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
fieldset.field legend{padding:0;margin-bottom:.55rem;font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.checks{display:flex;flex-wrap:wrap;gap:.6rem}
.check{position:relative}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check span{display:inline-block;padding:.75rem 1rem;border:2px solid var(--midnight);font-size:.875rem;font-weight:700;letter-spacing:.06em;cursor:pointer;
  transition:background-color .25s,color .25s}
.check input:checked + span{background:var(--midnight);color:var(--cream)}
.check input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px}
.field .hint{font-size:.9375rem;color:var(--ink-soft)}

/* behind-the-edit as one supporting row */
.stills__grid--row{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto}
.stills__grid--row .still{aspect-ratio:4/3}
@media(max-width:700px){.stills__grid--row{grid-template-columns:repeat(2,1fr)}}
.stills{padding-block:clamp(4rem,8vw,6.5rem)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the intro now hands over to the work block, so its lines scroll away instead of fading to black */
.intro .intro__lines{opacity:1}

/* case page opens straight on the work, no footage hero in front of it */
.work--page{padding-top:clamp(7.5rem,14vw,11rem)}
.facts{display:grid;gap:0;margin:0;border-top:1px solid rgba(237,233,225,.22)}
@media(min-width:800px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts > div{padding:1.4rem 1.5rem 1.4rem 0;border-bottom:1px solid rgba(237,233,225,.22)}
@media(min-width:800px){.facts > div{border-bottom:0}}
.facts dt{font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}
.facts dd{margin:.6rem 0 0;font-size:1.125rem;line-height:1.45}
.facts a{border-bottom:1px solid currentColor}
/* real thumbnails keep their 16:9 wherever they appear */
.svc__media--wide{aspect-ratio:16/9}
.card--16x9 .card__media{aspect-ratio:16/9}
a.svc__media{display:block}
a.svc__media img{transition:transform 1.2s var(--ease)}
a.svc__media:hover img{transform:scale(1.03)}
a.svc__media--wide:hover img{transform:none;opacity:.9}
.deal__test + .deal__test{margin-top:.75rem}

/* scope note under the services, and a compact two-column row for the form's scoping questions */
.svcs__note{max-width:52ch;padding-top:1.5rem;border-top:1px solid rgba(237,233,225,.22);color:var(--cream-dim)}
.field-row{display:grid;gap:1.4rem}
@media(min-width:600px){.field-row{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}}
.field-row .field{min-width:0}

/* Thumbnail design grid: each image keeps its own proportions (no forced crop), click opens the lightbox */
.thumbgrid{display:grid;gap:clamp(.75rem,1.5vw,1.25rem);align-items:start}
.thumbgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.thumbgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.thumbgrid--2,.thumbgrid--3{grid-template-columns:1fr}}
.thumbgrid__item{display:block;width:100%;padding:0;cursor:zoom-in}
.thumbgrid__item img{width:100%;height:auto;object-fit:contain;opacity:1}
.thumbgrid__item:hover img{transform:scale(1.02)}
/* the 16:9 frames that hold thumbnail work show the whole image, even when a file is a hair off 16:9 */
.chapter__inset--wide img,.svc__media--wide img{object-fit:contain;background:#000}
.thumbshow img{aspect-ratio:auto}