/* ============================================================
   Glide — website v2
   Same brand, inverted weighting: Bone is the ground and Ink is reserved
   for the film. v1 is Ink-dominant, so the two are genuinely comparable
   rather than one being a reskin of the other.

   Brand rule kept: brass is a LINE on Bone, never type. It is only allowed
   as type on Ink, where it reads. See marketing/Brand and Look.md.
   ============================================================ */

:root{
  --ink:       #101215;
  --ink-2:     #1A1E23;
  --bone:      #F2EEE6;
  --bone-2:    #EAE5DB;      /* a half-tone for panels on Bone */
  --brass:     #C2A87B;

  --on-bone:   #101215;
  --on-bone-2: rgba(16,18,21,.60);
  --on-bone-3: rgba(16,18,21,.42);
  --rule:      rgba(16,18,21,.13);

  --on-ink:    #F2EEE6;
  --on-ink-2:  rgba(242,238,230,.60);
  --rule-ink:  rgba(242,238,230,.13);

  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad:    clamp(96px, 12vw, 190px);
  --gutter: clamp(22px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bone); color:var(--on-bone);
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.02rem,.98rem + .22vw,1.11rem); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; }

.wrap{ max-width:1200px; margin-inline:auto; padding-inline:var(--gutter); }
.wrap.narrow{ max-width:740px; }
.wrap.center{ text-align:center; }

.skip{ position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--bone); padding:12px 18px; font-size:.9rem; }
.skip:focus{ left:12px; top:12px; }

/* ── type ─────────────────────────────────────────────────
   Bodoni Moda is a Didone: its optical-size axis thins the strokes to
   hairlines at display sizes, so opsz is held low deliberately. */

h1,h2,h3{ font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-.01em; }

h1{
  font-size:clamp(2.2rem,1.15rem + 3.7vw,4rem); line-height:1.07;
  font-variation-settings:"opsz" 13; max-width:19ch; text-wrap:balance;
}
.big{
  font-size:clamp(1.75rem,1.1rem + 2.3vw,2.8rem); line-height:1.18;
  font-variation-settings:"opsz" 14; max-width:24ch; text-wrap:balance;
}
.wrap.center .big{ margin-inline:auto; }

.lede{
  margin:1.7rem 0 0; color:var(--on-bone-2); max-width:50ch;
  font-size:clamp(1.02rem,.98rem + .3vw,1.18rem); line-height:1.65;
}

.rule-label{
  margin:0 0 1.2rem; font-size:.71rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-bone-3);
  padding-left:38px; position:relative;
}
.rule-label::before{                  /* brass allowed here: a line, not type */
  content:""; position:absolute; left:0; top:.58em; width:26px; height:1px; background:var(--brass);
}
.rule-label.light{ color:var(--on-ink-2); }

/* ── buttons ──────────────────────────────────────────── */

.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,2.4vw,30px); margin-top:2.6rem; }
.center-actions{ justify-content:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.94rem; font-weight:500; text-decoration:none;
  padding:15px 32px; border:1px solid transparent; border-radius:2px;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn-solid{ background:var(--ink); color:var(--bone); }
.btn-solid:hover{ background:#000; }
.btn-quiet{ padding:9px 19px; font-size:.86rem; border-color:rgba(16,18,21,.2); }
.btn-quiet:hover{ border-color:var(--ink); }

.quiet-link{
  font-size:.94rem; text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:3px;
  transition:border-color .25s ease;
}
.quiet-link:hover{ border-bottom-color:var(--ink); }

:where(a,button):focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ── the bar ──────────────────────────────────────────── */

.bar{
  position:fixed; inset:0 0 auto 0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px var(--gutter);
  background:rgba(242,238,230,.72);
  -webkit-backdrop-filter:blur(26px) saturate(170%);
  backdrop-filter:blur(26px) saturate(170%);
  border-bottom:1px solid rgba(16,18,21,.09);
  transition:background-color .35s ease, padding .35s ease;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bar{ background:rgba(242,238,230,.97); }
}
.bar.stuck{ background:rgba(242,238,230,.9); padding-block:11px; }

.mark{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.arches{ width:23px; height:auto; }
.mark-name{
  font-family:var(--serif); font-weight:600; font-size:1.36rem;
  letter-spacing:.035em; font-variation-settings:"opsz" 11;   /* so the G is not a C */
}
.bar-nav{ display:flex; align-items:center; gap:clamp(18px,2.2vw,32px); }
.bar-nav a{ font-size:.89rem; text-decoration:none; color:var(--on-bone-2); transition:color .2s ease; }
.bar-nav a:hover{ color:var(--on-bone); }
@media (max-width:900px){ .bar-nav a:not(.btn){ display:none; } }

/* ── the reel ─────────────────────────────────────────── */

.reel{
  position:relative; aspect-ratio:9/16; overflow:hidden; isolation:isolate;
  border-radius:clamp(12px,1.4vw,20px); background:var(--ink-2);
  box-shadow:0 2px 6px rgba(16,18,21,.14), 0 34px 70px -34px rgba(16,18,21,.45);
}
.reel video{
  width:100%; height:100%; object-fit:cover;
  transform:translateZ(0); backface-visibility:hidden; will-change:transform;
}

/* ══════════ HERO — the whole offer in one look ══════════ */

.hero{ padding:clamp(104px,12vw,136px) 0 var(--pad); }

/* both sides of the flow are built to one height, so the photographs and the
   film sit level and the whole offer lands inside the first screen */
.flow{ --flowH:min(42vh,380px); }

.flow{
  margin-top:clamp(38px,4vw,58px);
  display:grid; gap:clamp(26px,3vw,44px); grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){
  .flow{ grid-template-columns:auto auto auto; justify-content:start; align-items:end;
         gap:clamp(30px,3.4vw,56px); }
}

.flow figcaption{
  font-size:.7rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--on-bone-3); margin-bottom:16px;
}
.shots{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(7px,.9vw,10px); }
.shots img{
  /* height:auto is load-bearing. The width/height attributes on the <img> exist
     so the browser reserves the right space before the photo arrives; without
     this the attribute height wins and the photographs stretch into columns. */
  width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:5px;
  box-shadow:0 1px 3px rgba(16,18,21,.16);
}
@media (min-width:900px){
  /* two-up, so four photographs stand exactly as tall as the film beside them */
  .shots{ grid-template-columns:repeat(2,auto); }
  .shots img{ height:calc((var(--flowH) - 10px) / 2); width:auto; }
}
.shots-note{ margin:14px 0 0; font-size:.83rem; color:var(--on-bone-3); }

/* a hairline into the time and out the other side — brass as a line, which is
   the only way the brand allows it on Bone */
.flow-arrow{ display:flex; flex-direction:row; align-items:center; gap:14px; padding-block:6px; }
.flow-rule{ flex:1 1 auto; height:1px; min-width:30px; background:var(--brass); opacity:.55; }
@media (min-width:900px){
  .flow-arrow{ flex-direction:column; height:100%; justify-content:center; padding-bottom:58px; }
  .flow-rule{ width:1px; height:auto; min-height:42px; min-width:0; }
}
.flow-time{
  font-family:var(--serif); font-weight:500; font-variation-settings:"opsz" 20;
  font-size:1.05rem; white-space:nowrap;
}
.flow-out .reel{ max-width:264px; margin-inline:auto; }
@media (min-width:900px){
  .flow-out .reel{ max-width:none; height:var(--flowH); width:auto; }
}

/* ══════════ HOW IT WORKS ══════════ */

.how{ padding-block:var(--pad); background:var(--bone-2); }
.steps{
  list-style:none; margin:clamp(48px,5.5vw,84px) 0 0; padding:0;
  display:grid; gap:clamp(36px,4vw,54px); grid-template-columns:1fr;
}
@media (min-width:880px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.steps li{ padding-top:26px; border-top:1px solid var(--rule); }
.step-n{
  display:block; margin-bottom:16px; font-family:var(--serif);
  font-size:.92rem; font-variation-settings:"opsz" 20; color:var(--on-bone-3);
}
.steps h3{ font-size:1.32rem; line-height:1.28; margin-bottom:.75rem; font-variation-settings:"opsz" 20; }
.steps p{ margin:0; color:var(--on-bone-2); font-size:.96rem; max-width:38ch; }
.step-who{
  margin-top:1.3rem !important; padding-top:1rem; border-top:1px solid var(--rule);
  font-size:.78rem !important; letter-spacing:.06em; color:var(--on-bone-3) !important;
  text-transform:uppercase;
}
.step-who strong{ font-weight:500; color:var(--on-bone); }

/* ══════════ THE FILM — the one Ink section ══════════ */

.film{ padding-block:var(--pad); background:var(--ink); color:var(--on-ink); }
.film .big{ color:var(--on-ink); }
.film-note{ margin:1.6rem 0 0; color:var(--on-ink-2); max-width:48ch; }
.film-intro{ margin-bottom:clamp(44px,5vw,72px); }

.film-stage{ display:flex; flex-direction:column; align-items:center; gap:clamp(22px,2.6vw,34px); padding-inline:var(--gutter); }
.film-figure{ margin:0; width:100%; max-width:410px; }
@media (min-width:900px){
  .film-figure{ max-width:none; }
  .film-figure .reel{ height:min(70vh,700px); width:auto; margin-inline:auto; }
}
.film .reel{ box-shadow:0 2px 6px rgba(0,0,0,.4), 0 50px 100px -45px rgba(0,0,0,.9); }

.film-sound{
  background:none; border:0; cursor:pointer; padding:0 0 4px;
  font-family:var(--sans); font-size:.93rem; color:var(--on-ink);
  border-bottom:1px solid var(--rule-ink); transition:border-color .25s ease;
}
.film-sound:hover{ border-bottom-color:var(--brass); }

/* glass banner and trim — the interaction that earned its place in v1 */
.glass-banner{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  padding:11px 13px 12px; border-radius:clamp(10px,1.1vw,15px);
  background:rgba(16,18,21,.40);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(242,238,230,.16);
  box-shadow:inset 0 1px 0 rgba(242,238,230,.22), 0 14px 34px -16px rgba(0,0,0,.75);
  color:var(--on-ink);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-banner{ background:rgba(16,18,21,.88); }
}
.glass-top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.glass-room{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.02rem,.92rem + .42vw,1.26rem); line-height:1.22;
  font-variation-settings:"opsz" 18;
}
.glass-sub{ margin:.22rem 0 0; font-size:.72rem; color:rgba(242,238,230,.6); line-height:1.45; }

.trim{ position:relative; height:clamp(30px,3.4vw,38px); margin-top:11px; cursor:grab; touch-action:none; }
.trim:active{ cursor:grabbing; }
.trim-film{
  position:absolute; inset:0; border-radius:6px; overflow:hidden;
  background:url("media/trim-strip.jpg") center/cover;
  border:1px solid rgba(242,238,230,.16); filter:saturate(.85) brightness(.72);
}
.trim-prog{
  position:absolute; left:0; bottom:-1px; height:1.5px; width:100%;
  transform:scaleX(0); transform-origin:left center; will-change:transform;
  background:var(--brass); border-radius:2px; pointer-events:none;
  transition:transform .08s linear;
}
.trim-head{
  position:absolute; top:-3px; bottom:-3px; left:0; width:20px; margin-left:-10px;
  transform:translate3d(0,0,0); pointer-events:none; will-change:transform;
  border-radius:5px; border:1.5px solid rgba(242,238,230,.95);
  background:rgba(242,238,230,.1);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 3px 14px rgba(0,0,0,.65);
  transition:transform .08s linear;
}
/* layout properties would reflow on every pointermove; transforms do not */
.trim.dragging .trim-head,
.trim.dragging .trim-prog{ transition:none; }
.trim-head span{
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  width:2px; height:11px; border-radius:2px; background:rgba(242,238,230,.85);
}
.trim:focus-visible{ outline:none; }
.trim:focus-visible .trim-head{ border-color:var(--brass); box-shadow:0 0 0 3px rgba(194,168,123,.35); }
.trim-hint{
  margin:0; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,238,230,.42); transition:opacity .4s ease; white-space:nowrap;
}
.trim-hint.gone{ opacity:0; }

/* ══════════ NOTHING ELSE CHANGES ══════════ */

.nothing{ padding-block:var(--pad); }
.nothing-lede{ margin:1.7rem 0 0; color:var(--on-bone-2); max-width:52ch; }
.nots{
  list-style:none; margin:clamp(44px,5vw,72px) 0 0; padding:0;
  display:grid; gap:0 clamp(44px,5vw,88px); grid-template-columns:1fr;
}
@media (min-width:820px){ .nots{ grid-template-columns:1fr 1fr; } }
.nots li{
  padding:20px 0; border-top:1px solid var(--rule);
  color:var(--on-bone-2); font-size:.96rem;
}
.nots span{
  display:block; font-family:var(--serif); font-weight:500;
  font-variation-settings:"opsz" 20; font-size:1.16rem;
  color:var(--on-bone); margin-bottom:.35rem;
}

/* ══════════ WHY — the cinematic half, carried over from v1 ══════════
   v2 argues briefly and in the light. v3 gives the argument its own dark
   room, which is what v1 did well, then returns to Bone for the price. */

.why{ padding-block:var(--pad); background:var(--ink); color:var(--on-ink); }
.why h2,.why h3,.why h4{ color:var(--on-ink); }

.why-head{
  font-family:var(--serif); font-weight:500; margin:0;
  font-size:clamp(1.85rem,1.1rem + 2.6vw,3.1rem); line-height:1.16;
  letter-spacing:-.01em; font-variation-settings:"opsz" 13;
  max-width:24ch; text-wrap:balance;
}
.why-lede{
  margin:1.8rem 0 0; color:var(--on-ink-2); max-width:52ch;
  font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);
}

.figures{
  margin:clamp(48px,5.5vw,84px) 0 0; padding:0;
  display:grid; gap:clamp(26px,3vw,40px) clamp(30px,3.5vw,56px);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:880px){ .figures{ grid-template-columns:repeat(4,1fr); } }
.figures > div{ padding-top:20px; border-top:1px solid var(--rule-ink); }
.figures dt{
  font-family:var(--serif); font-weight:500; font-variation-settings:"opsz" 16;
  font-size:clamp(1.5rem,1.15rem + 1.4vw,2.2rem); line-height:1.1;
  letter-spacing:-.01em; margin-bottom:.55rem; color:var(--on-ink);
}
.figures dd{ margin:0; color:var(--on-ink-2); font-size:.9rem; line-height:1.55; max-width:26ch; }

.why-body{
  margin-top:clamp(56px,6.5vw,104px);
  display:grid; gap:clamp(40px,5vw,86px); grid-template-columns:1fr; align-items:start;
}
@media (min-width:960px){ .why-body{ grid-template-columns:.78fr 1fr; } }

.why-still{ margin:0; }
.why-still img{
  width:100%; height:auto; border-radius:clamp(12px,1.3vw,20px);
  box-shadow:0 2px 5px rgba(0,0,0,.35), 0 50px 100px -45px rgba(0,0,0,.9);
}
@media (min-width:960px){
  .why-still{ position:sticky; top:104px; }     /* stays with you as the reasons pass */
  .why-still img{ max-height:calc(100vh - 160px); width:auto; }
}

.reasons{ list-style:none; counter-reset:reason; margin:0; padding:0; }
.reasons li{
  counter-increment:reason; padding:clamp(24px,2.7vw,34px) 0;
  border-top:1px solid var(--rule-ink);
  display:grid; grid-template-columns:auto 1fr; gap:0 clamp(18px,2vw,30px); align-items:start;
}
.reasons li:last-child{ border-bottom:1px solid var(--rule-ink); }
.reasons li::before{
  content:counter(reason);
  font-family:var(--serif); font-variation-settings:"opsz" 20;
  font-size:.9rem; color:var(--brass); line-height:2.1;      /* brass type: allowed on Ink */
}
.reasons h3{
  grid-column:2; margin:0 0 .5rem;
  font-size:clamp(1.2rem,1rem + .75vw,1.55rem); line-height:1.26;
  font-variation-settings:"opsz" 18;
}
.reasons p{ grid-column:2; margin:0; color:var(--on-ink-2); font-size:.99rem; max-width:44ch; }

.compare{
  margin-top:clamp(64px,7vw,116px);
  display:grid; gap:clamp(36px,4vw,0) clamp(40px,5vw,80px); grid-template-columns:1fr;
}
@media (min-width:820px){
  .compare{ grid-template-columns:1fr 1fr; }
  .compare-ours{ padding-left:clamp(40px,5vw,80px); border-left:1px solid var(--rule-ink); }
}
.compare h4{
  margin:0 0 1.4rem; font-family:var(--sans); font-weight:500;
  font-size:.71rem; letter-spacing:.19em; text-transform:uppercase;
  color:rgba(242,238,230,.42);
}
.compare-ours h4{ color:var(--brass); }
.compare ul{ list-style:none; margin:0; padding:0; }
.compare li{
  padding:14px 0; border-top:1px solid var(--rule-ink);
  font-size:.98rem; color:rgba(242,238,230,.5);
}
.compare-ours li{ color:var(--on-ink); }

.why-close{
  margin:clamp(56px,6.5vw,96px) 0 0; padding-top:clamp(34px,3.8vw,52px);
  border-top:1px solid var(--rule-ink);
  font-family:var(--serif); font-weight:500; font-variation-settings:"opsz" 18;
  font-size:clamp(1.22rem,1.02rem + .75vw,1.6rem); line-height:1.4; max-width:36ch;
  color:var(--on-ink);
}
.why-close a{ text-decoration:none; border-bottom:1px solid var(--brass); padding-bottom:3px; }
.why-close a:hover{ color:var(--brass); }

/* ══════════ COST ══════════ */

.cost{ padding-block:var(--pad); }
.cost-anchor{ margin:clamp(28px,3vw,40px) 0 0; color:var(--on-bone-2); max-width:62ch; }
.prices{ margin-top:clamp(50px,5.5vw,84px); display:grid; gap:clamp(44px,5vw,80px); grid-template-columns:1fr; }
@media (min-width:880px){ .prices{ grid-template-columns:1fr 1fr; } }
.price-block h3{ font-size:1.18rem; font-variation-settings:"opsz" 22; margin-bottom:1.3rem; }
.from-line{ margin:0 0 1.1rem; color:var(--on-bone-2); font-size:.94rem; }
.from-line strong{
  font-family:var(--serif); font-weight:500; font-variation-settings:"opsz" 24;
  font-size:1.45rem; color:var(--on-bone);
}
.tiers{ margin:0; padding:0; }
.tiers div{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:18px 0; border-top:1px solid var(--rule);
}
.tiers div:last-child{ border-bottom:1px solid var(--rule); }
.tiers dt{ color:var(--on-bone-2); font-size:.97rem; }
.tiers dd{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:1.55rem; font-variation-settings:"opsz" 24; letter-spacing:-.01em;
}
.tiers .quoted{ font-family:var(--sans); font-weight:400; font-size:1.02rem; color:var(--on-bone-3); }
.fineprint{ margin-top:1.6rem; font-size:.85rem; color:var(--on-bone-3); max-width:46ch; }
.fineprint a{ color:var(--on-bone); text-decoration:none; border-bottom:1px solid var(--brass); }

/* ══════════ CONTACT ══════════ */

.contact{ padding-block:var(--pad); background:var(--ink); color:var(--on-ink); }
.contact .big{ color:var(--on-ink); }
.contact .btn-solid{ background:var(--bone); color:var(--ink); }
.contact .btn-solid:hover{ background:#fff; }
.contact .quiet-link{ border-bottom-color:var(--rule-ink); }
.contact .quiet-link:hover{ border-bottom-color:var(--brass); }
.big-arches{ width:46px; margin:0 auto clamp(30px,3.6vw,46px); color:var(--brass); }
.contact-sub{ margin:1.6rem auto 0; color:var(--on-ink-2); max-width:44ch; }
.reach{ margin-top:2.8rem; font-size:.91rem; color:var(--on-ink-2); }
.reach a{ text-decoration:none; border-bottom:1px solid var(--rule-ink); padding-bottom:2px; }
.reach a:hover{ border-bottom-color:var(--brass); }
.sep{ display:inline-block; width:30px; height:1px; background:var(--rule-ink); vertical-align:middle; margin:0 14px; }

/* ══════════ FOOT ══════════ */

.foot{ background:var(--ink); color:var(--on-ink-2); border-top:1px solid var(--rule-ink); padding-block:30px; }
.foot-row{ display:flex; justify-content:space-between; gap:20px; font-size:.83rem; }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--on-ink); }
.ig{ display:inline-flex; align-items:center; gap:7px; }
.ig svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ig .ig-dot{ fill:currentColor; stroke:none; }

/* ══════════ PHONES ══════════ */

@media (max-width:899px){
  /* Readability on a phone is the priority, not density. Agency owners are
     often reading this at arm's length without glasses, so every size that
     would be "small print" on a desktop goes up here. */
  body{ font-size:1.07rem; line-height:1.76; }
  .lede,.why-lede,.nothing-lede,.cost-anchor,.film-note{ font-size:1.08rem; line-height:1.68; }
  .steps p,.nots li,.figures dd,.shots-note,.tiers dt,.contact-sub,.reach{ font-size:1rem; }
  .fineprint{ font-size:.94rem; }
  .qa dd{ font-size:1.02rem; }
  .qa dt{ font-size:1.24rem; }
  .rule-label{ font-size:.78rem; letter-spacing:.17em; }
  .step-who{ font-size:.86rem !important; }
  .nots span{ font-size:1.3rem; }
  .steps h3{ font-size:1.42rem; }
  .figures dt{ font-size:1.7rem; }
  .reasons p,.compare li{ font-size:1.02rem; }
  .reasons h3{ font-size:1.32rem; }
  .why-close{ font-size:1.3rem; }
  .from-line{ font-size:1rem; }
  .tiers dd{ font-size:1.7rem; }
  .tiers .quoted{ font-size:1.08rem; }
  .flow figcaption{ font-size:.76rem; }
  .foot-row{ font-size:.92rem; }
  .bar-nav .btn{ font-size:.94rem; }

  .btn{ padding:17px 30px; font-size:1.02rem; }

  /* The bar was 91px tall on a phone, because the roomy mobile button padding
     was landing on the small WhatsApp button too. 30% shorter, with the button
     still 44px — the smallest a thumb should have to hit. */
  .bar{ padding-block:10px; }
  .bar.stuck{ padding-block:8px; }
  .bar-nav .btn{ padding:12px 18px; font-size:.9rem; line-height:1.25; }
  .mark{ gap:10px; }
  .mark-name{ font-size:1.18rem; }
  .arches{ width:20px; }
  .quiet-link{ padding-bottom:6px; }
  .hero{ padding-top:clamp(108px,26vw,146px); }
  .flow-out .reel{ margin-inline:auto; }
  .film-figure .reel{ width:100%; }
  .foot-row{ flex-direction:column; gap:8px; }
  .shots{ gap:6px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}


/* ── contact details ──────────────────────────────────────
   Labelled and stacked. The brand note says these are always written
   "For inquiries", never as a bare number. A sales email joins them once
   the domain and mailboxes exist. */
.reach{ margin-top:clamp(40px,4.5vw,60px); }
.reach-title{
  margin:0 0 1.1rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:.55;
}
.reach-list{ margin:0; padding:0; display:inline-grid; gap:12px; text-align:left; }
.reach-list > div{ display:grid; grid-template-columns:5.6rem 1fr; gap:14px; align-items:baseline; }
.reach-list dt{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.5; }
.reach-list dd{ margin:0; font-size:1rem; }
.reach-list a{ text-decoration:none; padding-bottom:2px; }
.reach-list a{ border-bottom:1px solid var(--rule-ink); }
.reach-list a:hover{ border-bottom-color:var(--brass); }


/* ── FAQ ──────────────────────────────────────────────────
   Questions as headings, answers opening with the answer. Written to be
   lifted whole by a search engine or an assistant. */
.faq{ padding-block:var(--pad); }
.qa{ margin:clamp(44px,5vw,72px) 0 0; padding:0; display:grid; gap:0 clamp(44px,5vw,88px); grid-template-columns:1fr; }
@media (min-width:860px){ .qa{ grid-template-columns:1fr 1fr; } }
.qa > div{ padding:clamp(22px,2.4vw,30px) 0; border-top:1px solid var(--rule); }
.qa dt{
  font-family:var(--serif); font-weight:500; font-variation-settings:"opsz" 20;
  font-size:clamp(1.12rem,1rem + .5vw,1.34rem); line-height:1.3; margin-bottom:.6rem;
}
.qa dd{ margin:0; color:var(--on-bone-2); font-size:.98rem; max-width:46ch; }


/* ── while the film is still arriving ─────────────────────
   Cloudflare's static hosting will not serve part of a file, so a browser
   cannot jump into the middle of a video it has not finished downloading.
   The whole thing has to land first. Until it does, the strip says so
   instead of silently doing nothing when you drag it. */
.trim.waiting{ cursor:progress; }
.trim.waiting .trim-film{ filter:saturate(.3) brightness(.42); }
.trim.waiting .trim-head{ opacity:.3; }
.trim-load{
  position:absolute; left:0; bottom:-1px; height:1.5px; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:rgba(242,238,230,.45); border-radius:2px; pointer-events:none;
  transition:transform .3s ease, opacity .3s ease;
}
.trim:not(.waiting) .trim-load{ opacity:0; }