/* GH Productions — ad landing pages (/start/*).
   Cutting Room tokens and type stacks from assets/site.css, without the site's
   countdown leader, grain, or HUD frame: paid traffic arrives on a phone and
   should see the offer in the first second. */
:root{
  --void:#0A0908; --void-2:#111009; --bone:#EDE6D6; --bone-dim:#8F8875;
  --gold:#E4A63E; --gold-soft:rgba(228,166,62,.15); --pine:#102A22; --pine-line:#23473B;
  --line:#2C2718; --hud:#6E6753; --sage:#8FA79A; --sage-2:#AFC4B6;
  --font-display:"Futura","Century Gothic","Twentieth Century","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Palatino","Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --font-mono:"SF Mono","IBM Plex Mono",ui-monospace,"Menlo",monospace;
  --pad:clamp(1.25rem,5vw,4rem);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--void); color:var(--bone); font-family:var(--font-serif);
     font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased}
body.noscroll{overflow:hidden}
img,video{max-width:100%; display:block}
p{margin:0}
::selection{background:var(--gold-soft); color:var(--bone)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.wrap{max-width:1160px; margin:0 auto; padding-inline:var(--pad)}
.mono{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:100; background:var(--gold); color:#140F05; padding:.6em 1em}

/* ---------- top bar ---------- */
.top{position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:1rem;
     padding:.75rem var(--pad); background:rgba(10,9,8,.9); border-bottom:1px solid var(--line);
     backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.brand{font-family:var(--font-display); font-weight:700; letter-spacing:.04em; font-size:1rem}
.brand b{color:var(--gold)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-family:var(--font-mono);
     font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding:1.05em 1.5em;
     border:1px solid var(--line); background:none; color:var(--bone); text-decoration:none; cursor:pointer;
     transition:background .2s, border-color .2s}
.btn:hover{border-color:var(--gold)}
.btn.gold{background:var(--gold); color:#140F05; border-color:var(--gold); font-weight:600}
.btn.gold:hover{background:#F0B95A}
.btn.small{padding:.75em 1em; font-size:.62rem}
.btn[disabled]{opacity:.65; cursor:progress}

/* ---------- type ---------- */
.eyebrow{margin:0 0 1.1rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em;
         text-transform:uppercase; color:var(--gold)}
h1,h2{margin:0; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
      letter-spacing:-.005em; text-wrap:balance}
h1{font-size:clamp(2.3rem,8.5vw,4.6rem); line-height:.98}
h2{font-size:clamp(1.7rem,5.2vw,3rem); line-height:1.02; max-width:20ch}
h1 .it, h2 .it{font-family:inherit; font-style:normal; font-weight:inherit; text-transform:inherit;
               color:inherit; letter-spacing:inherit}
h3{margin:0 0 .45rem; font-family:var(--font-display); font-weight:700; font-size:1.08rem; letter-spacing:.01em}
.lede{margin-top:1.4rem; max-width:48ch; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--bone)}

/* ---------- hero ---------- */
.hero{padding:clamp(2.5rem,8vh,5.5rem) 0 clamp(3rem,8vh,5rem); border-bottom:1px solid var(--line);
      overflow-x:clip} /* the stage glow and tilted frames bleed sideways; clip, don't scroll */
.hero-grid{display:grid; gap:2.5rem; align-items:center}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.1fr 1fr; gap:3.5rem} }
.ctas{margin-top:2rem; display:flex; flex-direction:column; align-items:flex-start; gap:.9rem}
.aside{color:var(--bone-dim); font-size:.95rem; max-width:40ch}

/* hero over film — video page */
.hero.film{position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end;
           min-height:min(86svh,760px); padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.hero.film .bgv{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover}
.hero.film::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(10,9,8,.3) 0%,rgba(10,9,8,.55) 45%,rgba(10,9,8,.96) 100%)}
.hero.film > .wrap{width:100%}

/* ---------- example enquiry card — websites page ---------- */
.leadcard{margin:0; padding:1.1rem 1.2rem 1.2rem; border:1px solid var(--pine-line);
          background:linear-gradient(180deg,rgba(16,42,34,.6),rgba(10,9,8,.65))}
.leadcard figcaption{color:var(--sage); margin-bottom:.9rem}
.lc-head{display:flex; align-items:center; gap:.6rem; padding-bottom:.8rem; border-bottom:1px solid var(--pine-line)}
.lc-head .t{margin-left:auto; color:var(--sage)}
.dot{flex:none; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(228,166,62,.18)}
.leadcard dl{margin:.4rem 0 0}
.leadcard dl div{display:grid; grid-template-columns:6.5rem 1fr; gap:.8rem; padding:.55rem 0; border-bottom:1px solid rgba(35,71,59,.55)}
.leadcard dl div:last-child{border-bottom:0}
.leadcard dt{padding-top:.25em; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage)}
.leadcard dd{margin:0; font-size:.97rem}
.tag{display:inline-block; margin-left:.4em; padding:.1em .5em; font-family:var(--font-mono); font-size:.56rem;
     letter-spacing:.12em; text-transform:uppercase; background:var(--gold-soft); color:var(--gold); vertical-align:.12em}

/* ---------- bands ---------- */
.band{padding:clamp(3.5rem,10vh,6rem) 0; border-bottom:1px solid var(--line)}
.band.alt{background:var(--void-2)}
.trio,.steps,.cases{display:grid; gap:1px; margin:2.4rem 0 0; padding:0; list-style:none;
                    background:var(--line); border:1px solid var(--line)}
.trio > *, .steps > li, .cases > *{background:var(--void); padding:1.5rem 1.4rem 1.6rem}
.band.alt .trio > *, .band.alt .steps > li, .band.alt .cases > *{background:var(--void-2)}
@media (min-width:760px){ .trio{grid-template-columns:repeat(3,1fr)} .cases{grid-template-columns:1fr 1fr} }
@media (min-width:600px) and (max-width:999px){ .steps{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .steps{grid-template-columns:repeat(4,1fr)} }
.trio p, .steps p, .case > p{color:var(--bone-dim); font-size:.98rem; line-height:1.55}
.steps .mono{display:block; margin-bottom:.8rem; color:var(--gold)}
.also{margin-top:1.6rem; max-width:60ch; color:var(--bone-dim)}
.also b{color:var(--bone); font-weight:400; font-style:normal}

/* ---------- case studies ---------- */
.case .mono{margin-bottom:.7rem; color:var(--hud)}
.case h3{font-size:1.4rem}
.nums{display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:1.3rem 0; background:var(--line); border:1px solid var(--line)}
.nums div{background:var(--void-2); padding:.9rem .9rem 1rem}
.band.alt .nums div{background:var(--void)}
.nums b{display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,4.5vw,1.9rem);
        line-height:1; color:var(--gold); font-variant-numeric:tabular-nums}
.nums span{display:block; margin-top:.5rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em;
           text-transform:uppercase; color:var(--bone-dim); line-height:1.5}
.more{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
      text-decoration:none; border-bottom:1px solid rgba(228,166,62,.4); padding-bottom:.2em}
.fine{margin-top:1.2rem; font-size:.85rem; color:var(--hud)}

/* ---------- ownership ---------- */
.own{display:grid; gap:2rem}
@media (min-width:900px){ .own{grid-template-columns:1fr 1fr; gap:4rem; align-items:center} }
.own .lede{color:var(--bone-dim)}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.checks li{position:relative; padding-left:1.8rem; font-size:1.02rem}
.checks li::before{content:""; position:absolute; left:.1rem; top:.42em; width:.8rem; height:.45rem;
                   border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg)}

/* ---------- stats + reel wall — video page ---------- */
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:2.4rem;
       background:var(--line); border:1px solid var(--line)}
@media (min-width:900px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.stats div{background:var(--void); padding:1.2rem 1.1rem 1.3rem}
.stats b{display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,6vw,2.8rem);
         line-height:1; color:var(--gold); font-variant-numeric:tabular-nums}
.stats span{display:block; margin-top:.6rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em;
            text-transform:uppercase; color:var(--bone-dim); line-height:1.55}
.reels{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin-top:2.4rem}
@media (min-width:760px){ .reels{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){ .reels{grid-template-columns:repeat(6,minmax(0,1fr))} }
.reel{position:relative; aspect-ratio:9/16; overflow:hidden; padding:0; cursor:pointer; text-align:left;
      background:var(--void-2); border:1px solid var(--line); color:var(--bone); font:inherit}
.reel:hover{border-color:var(--gold)}
.reel video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.reel .cap{position:absolute; left:0; right:0; bottom:0; padding:1.8rem .7rem .7rem;
           background:linear-gradient(transparent,rgba(10,9,8,.92))}
.reel .cap b{display:block; font-family:var(--font-display); font-weight:700; font-size:.85rem; letter-spacing:.02em; line-height:1.2}
.reel .cap span{font-family:var(--font-mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim)}
.reel .play{position:absolute; top:.6rem; right:.6rem; width:1.9rem; height:1.9rem; border-radius:50%;
            display:grid; place-items:center; background:rgba(10,9,8,.7); border:1px solid var(--line)}
.reel .play::before{content:""; margin-left:2px; border-left:8px solid var(--gold); border-top:5px solid transparent; border-bottom:5px solid transparent}

/* ---------- lead form — mirrors the homepage call sheet ---------- */
.callsheet{padding:clamp(3.5rem,10vh,6.5rem) 0; background:var(--pine); scroll-margin-top:3.5rem}
.cs-grid{display:grid; gap:2rem}
@media (min-width:960px){ .cs-grid{grid-template-columns:.85fr 1.15fr; gap:4rem; align-items:start} }
.callsheet .note{margin-top:1.2rem; max-width:38ch; font-size:1.05rem; color:var(--sage-2)}
.wire{margin-top:1.6rem; display:flex; align-items:center; gap:.7em; font-family:var(--font-mono); font-size:.64rem;
      letter-spacing:.16em; text-transform:uppercase; color:var(--sage)}
.sheet{border:1px solid var(--pine-line); background:rgba(6,14,11,.55)}
.shead{display:flex; justify-content:space-between; gap:1rem; padding:.9em 1.2em; border-bottom:1px solid var(--pine-line);
       font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage)}
.shead b{color:var(--gold); font-weight:400}
.sheet form{display:flex; flex-direction:column; gap:.9rem; padding:1.2rem}
.frow{display:grid; grid-template-columns:1fr; gap:.9rem}
@media (min-width:560px){ .frow{grid-template-columns:1fr 1fr} }
.f{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.f label{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage)}
.f .lab{display:flex; align-items:baseline; gap:.6em}
.f .lab i{font-style:normal; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:#6E8B7C}
.f input, .f select, .f textarea{width:100%; padding:.7em .85em; border:1px solid var(--pine-line); border-radius:0;
  background:rgba(10,9,8,.6); color:var(--bone); font:inherit; font-size:1rem; -webkit-appearance:none; appearance:none}
.f select{padding-right:2.2em; background-repeat:no-repeat; background-size:5px 5px;
  background-image:linear-gradient(45deg,transparent 50%,var(--sage) 50%),linear-gradient(135deg,var(--sage) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%}
.f select option{background:var(--void-2); color:var(--bone)}
.f textarea{min-height:5.5em; resize:vertical}
.f input:focus, .f select:focus, .f textarea:focus{outline:2px solid rgba(228,166,62,.5); outline-offset:1px}
.sheet .btn{align-self:stretch; margin-top:.3rem}
@media (min-width:560px){ .sheet .btn{align-self:flex-start} }
.formerror{color:#F2B8A8; font-size:.95rem}
.formerror a, .privacy a{color:var(--gold)}
.privacy{font-size:.82rem; color:var(--sage)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
form.sent{display:none}
.thanks{padding:1.6rem 1.2rem; font-size:1.05rem; color:var(--bone)}
.thanks:focus{outline:none}
.thanks .k{display:block; margin-bottom:.5rem; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em;
           text-transform:uppercase; color:var(--gold)}

/* ---------- footer ---------- */
.foot{padding:2rem 0 calc(6rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line)}
@media (min-width:760px){ .foot{padding-bottom:2.5rem} }
.foot .wrap{display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-family:var(--font-mono); font-size:.64rem;
            letter-spacing:.14em; text-transform:uppercase; color:var(--hud)}
.foot a{color:var(--bone-dim); text-decoration:none}
.foot a:hover{color:var(--gold)}

/* ---------- sticky mobile CTA — steps aside once the form is on screen ---------- */
.stickycta{position:fixed; left:0; right:0; bottom:0; z-index:50; padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
           background:rgba(10,9,8,.95); border-top:1px solid var(--line); transition:transform .25s}
.stickycta .btn{width:100%}
.stickycta.away{transform:translateY(110%)}
@media (min-width:760px){ .stickycta{display:none} }
@media (prefers-reduced-motion:reduce){ .stickycta{transition:none} }

/* ---------- film player ---------- */
.player{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:1rem; background:rgba(5,4,3,.94)}
.pbox{width:min(960px,100%); display:flex; flex-direction:column; gap:.7rem}
.pbox video{width:auto; max-width:100%; max-height:80svh; margin:0 auto; background:#000}
.prow{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.prow [data-ptitle]{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim)}

/* ---------- work showcase — real captures, desktop + phone side by side ---------- */
.work{display:grid;gap:1.8rem;margin-top:2.6rem}
.work + .work{margin-top:3.2rem;padding-top:3.2rem;border-top:1px solid var(--line)}
@media (min-width:900px){ .work{grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center} .work.flip > .pair{order:2} }
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.3fr);gap:.8rem;align-items:end;margin:0}
.pair.solo{grid-template-columns:1fr}
.frame{border:1px solid var(--line);background:var(--void-2);overflow:hidden;min-width:0}
.frame img{display:block;width:100%;height:auto}
.frame.desktop{border-radius:6px}
.frame.desktop .bar{display:flex;gap:5px;padding:7px 10px;border-bottom:1px solid var(--line);background:#141310}
.frame.desktop .bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.frame.phone{border-radius:14px;border-color:var(--hud);box-shadow:0 24px 40px -22px rgba(0,0,0,.9)}
.pair figcaption{grid-column:1 / -1;margin-top:.2rem;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hud)}
.wk .mono{display:block;margin-bottom:.7rem;color:var(--hud)}
.wk h3{font-size:1.5rem;margin-bottom:.6rem}
.wk > p{color:var(--bone-dim);font-size:1rem;line-height:1.6}
.wk .links{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;margin-top:1.2rem}
.build{margin-top:2.6rem;padding:1.2rem 1.3rem;border-left:2px solid var(--gold);background:var(--void-2);color:var(--bone-dim);max-width:62ch;font-size:.97rem;line-height:1.55}
.build b{color:var(--bone);font-weight:400}

/* ---------- two-up: devices + AI ops / CRM ---------- */
.duo{display:grid;gap:1px;margin-top:2.4rem;background:var(--line);border:1px solid var(--line)}
@media (min-width:860px){ .duo{grid-template-columns:1fr 1fr} }
.duo > div{background:var(--void-2);padding:1.8rem 1.6rem 1.9rem}
.band.alt .duo > div{background:var(--void)}
.duo .eyebrow{margin-bottom:.8rem}
.duo h3{font-size:1.35rem;margin-bottom:.7rem;letter-spacing:-.005em}
.duo > div > p{color:var(--bone-dim);line-height:1.6;margin-bottom:1.2rem}
.duo .checks li{font-size:.97rem}

/* House rule (Oct 2026): no italic type anywhere; it reads as AI-made.
   The accent is upright serif in gold. Neutralise the elements browsers italicise by default. */
em,i,cite,dfn,var,address{font-style:normal}

/* ---------- hero stage — the featured work inside a desktop frame and a phone frame, in 3D ----------
   Websites page: each .screen carries a stitched screen-by-screen capture of helpishere.law as its
   background (--reel) and animates background-position 0% -> 100%, which scrolls the strip and stops
   exactly at its end. Painting a cropped window each frame keeps it sharp; a transformed 5,000px-tall
   image got downsampled by the GPU and read as a blur. Video page: the same frames hold <video>.
   The stage leans toward the pointer (lp.js, fine pointers only). */
.stage{position:relative; perspective:1600px; margin:0}
.stage::before{content:""; position:absolute; inset:-12% -8% -16%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 55% at 60% 45%, rgba(228,166,62,.16), transparent 70%)}
.tilt{--ry:-11deg; --rx:5deg; position:relative; transform-style:preserve-3d; transform:rotateY(var(--ry)) rotateX(var(--rx));
  transition:transform .35s ease-out; animation:spinin 1.4s cubic-bezier(.2,.8,.2,1) .15s backwards}
/* entrance: the stage swings in from edge-on, overshoots a touch, and lands on its resting tilt.
   fill-mode "backwards" only, so once it lands the inline transform from lp.js (pointer tilt) takes over. */
@keyframes spinin{
  0%{opacity:0; transform:translateX(14%) rotateY(-100deg) rotateX(var(--rx)) scale(.9)}
  60%{opacity:1}
  75%{transform:translateX(-1.5%) rotateY(calc(var(--ry) + 9deg)) rotateX(var(--rx)) scale(1.012)}
  100%{transform:rotateY(var(--ry)) rotateX(var(--rx))}
}
.dev{margin:0; overflow:hidden; background:var(--void-2); border:1px solid var(--line)}
.dev .screen{position:relative; overflow:hidden; background:#0E1A2E var(--reel) no-repeat 0 0 / 100% auto;
  animation:reel var(--dur,26s) ease-in-out infinite alternate; animation-delay:var(--delay,1.5s)}
@keyframes reel{0%,6%{background-position-y:0%} 94%,100%{background-position-y:100%}}
.dev .screen video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.dev.desk{border-radius:8px; box-shadow:0 50px 90px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03) inset}
.dev.desk .bar{display:flex; align-items:center; gap:5px; padding:8px 12px; border-bottom:1px solid var(--line); background:#141310}
.dev.desk .bar i{width:7px; height:7px; border-radius:50%; background:var(--line)}
.dev.desk .bar i:first-child{background:var(--gold)}
.dev.desk .bar b{margin-left:.8em; font-family:var(--font-mono); font-weight:400; font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-dim)}
.dev.desk .screen{aspect-ratio:16/10}
.dev.phone{position:absolute; right:-7%; bottom:-9%; width:31%; border-radius:22px; border-color:var(--hud);
  box-shadow:0 34px 60px -24px rgba(0,0,0,.95); transform:translateZ(70px); --dur:32s; --delay:3s}
.dev.phone .screen{aspect-ratio:390/780}
.stage.filmstage .dev .screen{animation:none; background:#000}
.stage.filmstage .dev.desk .screen{aspect-ratio:16/9}
.stage figcaption{margin-top:1.4rem; padding-right:34%; color:var(--hud); font-size:.58rem; letter-spacing:.14em;
  display:flex; gap:.6em; align-items:flex-start; line-height:1.5}
.stage figcaption i{flex:0 0 6px; width:6px; height:6px; margin-top:.35em; border-radius:50%; background:var(--gold); animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
@media (max-width:899px){
  .stage{margin-top:1rem; padding-right:9%}
  /* on a phone the work leads and the headline follows it, on both landing pages */
  .hero-grid > .stage{order:-1; margin:0 0 1.6rem}
  .stage.phoneonly{margin-top:.4rem}
  .tilt{--ry:-7deg; --rx:3deg}
  .dev.phone{right:-12%; width:34%}
  .stage figcaption{padding-right:30%}
}
@media (prefers-reduced-motion:reduce){
  .dev .screen{animation:none}
  .tilt{transform:none; transition:none; animation:none}
  .stage figcaption i{animation:none}
}

/* ---------- iPhone frame (video page): a phone-only stage ----------
   Sized with container units off .tilt so the bezel, corners, island, and buttons scale together. */
.stage.phoneonly{display:flex; flex-direction:column; align-items:center}
.stage.phoneonly .tilt{container-type:inline-size; width:clamp(230px,64%,300px); --ry:-14deg; --rx:4deg}
.stage.phoneonly figcaption{padding:0; justify-content:center; text-align:center; margin-top:2rem}
.stage.phoneonly::before{inset:-10% -30% -14%}
.iphone{position:relative; padding:3.4cqw; border-radius:18cqw;
  background:linear-gradient(155deg,#4a4a4e 0%,#2a2a2d 30%,#18181a 65%,#0e0e10 100%);
  box-shadow:0 60px 100px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06),
             inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 0 0 4cqw #0a0a0b}
.iphone .scr{position:relative; aspect-ratio:390/844; border-radius:14.6cqw; overflow:hidden; background:#000;
  transform:translateZ(0)} /* keeps the rounded clip crisp inside the 3D stage */
.iphone video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.iphone .isl{position:absolute; top:2.8cqw; left:50%; transform:translateX(-50%); width:27cqw; height:7.4cqw;
  border-radius:999px; background:#000; z-index:3}
.iphone .st{position:absolute; top:4cqw; left:0; right:0; z-index:3; display:flex; justify-content:space-between; align-items:center;
  padding:0 8cqw 0 9cqw; color:#fff; font:600 3.9cqw/1 -apple-system,"SF Pro Text",system-ui,sans-serif; letter-spacing:-.01em}
.iphone .st > span{display:flex; align-items:center; gap:1.4cqw}
.iphone .sig{display:flex; align-items:flex-end; gap:.5cqw; height:3cqw}
.iphone .sig i{display:block; width:1cqw; background:#fff; border-radius:.3cqw}
.iphone .sig i:nth-child(1){height:35%} .iphone .sig i:nth-child(2){height:55%} .iphone .sig i:nth-child(3){height:78%} .iphone .sig i:nth-child(4){height:100%}
.iphone .bat{position:relative; width:6.6cqw; height:3.2cqw; border:.4cqw solid rgba(255,255,255,.55); border-radius:1cqw; box-sizing:border-box}
.iphone .bat::before{content:""; position:absolute; inset:.4cqw; right:1.2cqw; background:#fff; border-radius:.4cqw}
.iphone .bat::after{content:""; position:absolute; right:-1.1cqw; top:50%; width:.6cqw; height:1.3cqw; transform:translateY(-50%); background:rgba(255,255,255,.55); border-radius:0 .3cqw .3cqw 0}
.iphone .home{position:absolute; bottom:2.2cqw; left:50%; transform:translateX(-50%); width:34cqw; height:1.3cqw; border-radius:999px; background:rgba(255,255,255,.9); z-index:3}
.iphone .k{position:absolute; width:1.2cqw; border-radius:.4cqw; background:linear-gradient(90deg,#3b3b3f,#242427); box-shadow:0 0 0 .3cqw #0b0b0c}
.iphone .kl1{left:-1.2cqw; top:17%; height:3.4%}
.iphone .kl2{left:-1.2cqw; top:24.5%; height:7%}
.iphone .kl3{left:-1.2cqw; top:33.5%; height:7%}
.iphone .kr{right:-1.2cqw; top:27%; height:11%}
@media (max-width:899px){
  .stage.phoneonly{padding-right:0; margin-bottom:2rem}
  .stage.phoneonly .tilt{width:min(62%,260px); --ry:-12deg; --rx:3deg}
}

/* ---------- packed hero (video page): one screen on a phone ----------
   Headline across the top, then the iPhone on the left with the lede and the button beside it,
   so the first screen shows the work and the offer together. Desktop keeps copy left, stage right. */
.hero-copy > * + *{margin-top:0}
.hero-head .eyebrow{margin-bottom:1.1rem}
.hero-copy .lede{margin-top:1.4rem}
.hero-copy .ctas{margin-top:2rem}
.hero-copy > *{animation:riseup .7s cubic-bezier(.2,.8,.2,1) both}
.hero-copy > :nth-child(2){animation-delay:.12s} .hero-copy > :nth-child(3){animation-delay:.22s}
@keyframes riseup{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (max-width:899px){
  .hero.packed{padding-top:clamp(1.4rem,3.5vh,3rem); padding-bottom:1.2rem}
  .hero-pack{grid-template-columns:1fr; grid-template-areas:"head" "lede" "stage"; row-gap:1.1rem}
  .hero-pack .hero-copy{display:contents}
  .hero-pack .hero-head{grid-area:head}
  .hero-pack .hero-head .eyebrow{margin-bottom:.8rem}
  .hero-pack h1{font-size:clamp(2.1rem,9.4vw,2.6rem)}
  .hero-pack .lede{grid-area:lede; margin:0; max-width:none; font-size:1.0625rem; line-height:1.55}
  .hero-pack .ctas{display:none} /* the sticky bar at the bottom is the one button on phones */
  .hero-pack > .stage{grid-area:stage; order:0; margin:.4rem 0 0; padding:0; width:100%}
  .hero-pack .stage.phoneonly .tilt{width:min(48%,200px)}
  .hero-pack .stage.phoneonly figcaption{display:none}
}
@media (prefers-reduced-motion:reduce){ .hero-copy > *{animation:none} }