/* ============================================================
   P SQUARE · 2026
   Structure after porsche.com — full-bleed media, short copy,
   one obvious action per section. Bodoni display, Inter Tight UI.
   Shared by index.html · services.html · contact.html
   ============================================================ */

:root{
  --bg:#FFFFFF;
  --surface:#F1F1F3;
  --surface-2:#E7E7EA;
  --ink:#010205;
  --ink-soft:rgba(1,2,5,.74);
  --ink-faint:rgba(1,2,5,.6);
  --rule:rgba(1,2,5,.15);

  --dark:#010205;
  --on-dark:#FFFFFF;
  --on-dark-soft:rgba(255,255,255,.8);
  --on-dark-faint:rgba(255,255,255,.66);
  --rule-dark:rgba(255,255,255,.22);

  --mark:linear-gradient(90deg,#7733FF,#5668FF 34%,#3DADE2 66%,#3DFB98);

  --pad:clamp(20px,5vw,68px);
  --max:1480px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;font-weight:400;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:#fff}

/* ---------------- type ----------------
   Bodoni is a high-contrast face: at 400 the hairlines disappear
   on screen, so display type runs at 500 and the optical size is
   stepped down as the type gets smaller.                       */
h1,h2,h3{margin:0;font-weight:400}
.serif{
  font-family:'Bodoni Moda',Didot,'Bodoni MT','Times New Roman',serif;
  font-weight:500;font-variation-settings:'opsz' 40;
  letter-spacing:-.01em;line-height:.98;
}
.serif em{font-style:italic}
.d1{font-size:clamp(2.8rem,8.4vw,8rem);line-height:.92;font-variation-settings:'opsz' 96}
.d2{font-size:clamp(2.1rem,5.4vw,4.6rem);line-height:.98;font-variation-settings:'opsz' 84}
.d3{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.06;font-variation-settings:'opsz' 32}

.label{font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--ink-faint);line-height:1.5}
.dark .label,.ph .label{color:var(--on-dark-faint)}
.lead{font-size:clamp(1.04rem,1.15vw,1.18rem);line-height:1.6;color:var(--ink-soft);max-width:46ch}
.dark .lead,.ph .lead{color:var(--on-dark-soft)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative}
section{position:relative}
/* the fixed bar must not sit on top of an anchored section */
section[id]{scroll-margin-top:84px}
.pad{padding:clamp(70px,9vw,130px) 0}
.dark{background:var(--dark);color:var(--on-dark)}
.surface{background:var(--surface)}

/* ---------------- actions ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 32px;border-radius:100px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;font-size:15px;font-weight:500;
  transition:background .35s var(--ease),color .35s,border-color .35s,transform .35s var(--ease);
}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-1px)}
.btn svg{width:15px;height:9px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
/* the hero sits on film, not on a .dark section — it needs the
   inverted button too, or it renders black on black */
.dark .btn,.ph .btn,.hero .btn{background:#fff;color:var(--ink);border-color:#fff}
.dark .btn:hover,.ph .btn:hover,.hero .btn:hover{background:transparent;color:#fff}

.go{display:inline-flex;align-items:center;gap:11px;font-size:15px;font-weight:500;position:relative;padding-bottom:4px}
.go::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.go:hover::after{transform:scaleX(1)}
.go i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid currentColor;
  transition:transform .4s var(--ease)}
.go:hover i{transform:translateX(4px)}
.go svg{width:9px;height:9px}

/* ---------------- reveal ---------------- */
[data-r]{opacity:0;transform:translateY(20px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
[data-r].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.09s}[data-d="2"]{transition-delay:.18s}
[data-d="3"]{transition-delay:.27s}[data-d="4"]{transition-delay:.36s}
.mask{display:block;overflow:hidden;padding-bottom:.08em}
.mask>span{display:block;transform:translateY(104%);transition:transform 1.15s var(--ease)}
.mask.in>span{transform:none}
.mask.m1>span{transition-delay:.1s}

/* ---------------- shine ----------------
   A light travelling across the letterforms in the mark's colours.
   Painted on the inner spans rather than the heading: those spans are
   the ones that get transformed, and a transformed descendant breaks
   background-clip:text set on an ancestor. */
.shiny .mask>span{
  background:linear-gradient(100deg,
    #FFFFFF 0%,#FFFFFF 30%,
    #9E77FF 40%,#7C90FF 47%,#5FC4E8 54%,#6BEFB0 61%,
    #FFFFFF 72%,#FFFFFF 100%);
  background-size:300% 100%;background-position:130% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:shine-sweep 9s ease-in-out infinite;
}
.shiny .mask.m1>span{animation-delay:.7s}
@keyframes shine-sweep{
  0%,100%{background-position:130% 0}
  50%{background-position:-30% 0}
}

/* ---------------- the mark, forever turning ---------------- */
@keyframes turn{to{transform:rotate(360deg)}}
.mk{border-radius:50%;overflow:hidden;flex:none;display:block;animation:turn 26s linear infinite;will-change:transform}
.mk.slow{animation-duration:46s}

/* ---------------- header ---------------- */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--pad);color:#fff;border-bottom:1px solid transparent;
  transition:transform .55s var(--ease),background .45s,color .45s,border-color .45s;
}
.hd.solid{background:#fff;color:var(--ink);border-bottom-color:var(--rule)}
.hd.solid .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.hd.solid .btn:hover{background:transparent;color:var(--ink)}
.hd.hide{transform:translateY(-102%)}
.hd-brand{display:flex;align-items:center;gap:12px;min-width:0}
.hd-brand .mk{width:36px;height:36px}
.hd-brand b{font-size:15px;font-weight:600;letter-spacing:.02em}
.hd-nav{display:flex;align-items:center;gap:34px;margin-left:auto;margin-right:6px}
.hd-nav a{font-size:15px;position:relative;padding:6px 0}
.hd-nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.hd-nav a:hover::after,.hd-nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.hd .btn{padding:12px 24px;font-size:14px;background:#fff;color:var(--ink);border-color:#fff}
.hd .btn:hover{background:transparent;color:#fff}
/* pinned right with an auto margin and never allowed to shrink, so it
   survives whatever else is in the bar rather than being pushed out */
.burger{display:none;width:34px;height:14px;position:relative;flex:0 0 auto;margin-left:auto}
.burger i,.burger i::after{position:absolute;left:0;width:34px;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.burger i{top:3px}
.burger i::after{content:'';top:7px}
.burger.on i{transform:rotate(45deg) translateY(3.5px)}
.burger.on i::after{transform:rotate(-90deg) translateY(7px)}
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--mark);z-index:130}

.sheet{position:fixed;inset:0;z-index:110;background:#fff;color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.sheet.open{opacity:1;pointer-events:auto}
.sheet a{font-family:'Bodoni Moda',serif;font-weight:500;font-size:clamp(2.2rem,12vw,3.6rem);line-height:1;
  padding:20px 0;border-bottom:1px solid var(--rule)}
.sheet .btn{margin-top:34px;align-self:flex-start;background:var(--ink);color:#fff;border-color:var(--ink);
  font-family:'Inter Tight',sans-serif;font-size:15px;border-bottom:1px solid var(--ink)}

/* ============================================================
   HERO — the film turns on its own
   ============================================================ */
/* 100vh, never svh — see the note in the mobile block. On a browser
   with retracting toolbars this is taller than the visible area, which
   is what keeps the next section out of sight. */
.hero{position:relative;height:100vh;min-height:580px;background:var(--dark);
  display:flex;align-items:flex-end;overflow:hidden}
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(1,2,5,.6) 0%,rgba(1,2,5,0) 24%,rgba(1,2,5,0) 46%,rgba(1,2,5,.88) 100%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
  padding:0 var(--pad) calc(var(--chrome,0px) + clamp(72px,10vh,118px));
  color:#fff;will-change:transform}
.hero-in .label{margin-bottom:20px;color:rgba(255,255,255,.8)}
.hero-in h1{margin:0;max-width:14ch}
.hero-acts{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,44px)}
.hero-hint{position:absolute;right:var(--pad);bottom:calc(var(--chrome,0px) + clamp(72px,10vh,118px));z-index:2;
  color:rgba(255,255,255,.7);font-size:12.5px;letter-spacing:.06em;display:flex;align-items:center;gap:12px}
.hero-hint .ln{width:40px;height:1px;background:currentColor;position:relative;overflow:hidden}
.hero-hint .ln::after{content:'';position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:sweep 2.6s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------------- page hero (inner pages) ---------------- */
.ph{position:relative;min-height:min(64vh,600px);display:flex;align-items:flex-end;
  background:var(--dark);color:#fff;overflow:hidden;padding:calc(90px + clamp(40px,7vw,90px)) 0 clamp(46px,6vw,80px)}
.ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;will-change:transform;z-index:0}
.ph::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(1,2,5,.62),rgba(1,2,5,.18) 45%,rgba(1,2,5,.82))}
/* no photograph behind it, so no scrim is needed to sit on */
.ph.plain::after{display:none}
.ph .wrap{z-index:2}
.ph h1{max-width:15ch}
.ph .lead{margin-top:22px}

/* ---------------- section head ---------------- */
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;
  margin-bottom:clamp(34px,4.4vw,58px)}
.sh h2{max-width:16ch}
/* the bar from under the P² in the mark, drawn at section scale */
.rule-mark{display:block;height:5px;border-radius:100px;background:var(--mark);
  width:clamp(160px,26vw,330px);margin-top:clamp(20px,2.4vw,30px);
  opacity:1;transform:scaleX(0);transform-origin:left center;
  transition:transform 1.25s var(--ease)}
.rule-mark.in{transform:scaleX(1)}

/* ============================================================
   STATEMENT + FILM  (the portrait logo film beside the line)
   ============================================================ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.duo-film{position:relative;background:var(--dark);overflow:hidden;border-radius:2px}
.duo-film video{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.duo-film.tall video{aspect-ratio:3/4}
.duo-film figcaption{position:absolute;left:16px;bottom:13px;z-index:2;color:rgba(255,255,255,.72);
  font-size:11.5px;letter-spacing:.06em}
.duo-film::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(1,2,5,.55))}

/* full-bleed film band — the line-art drawing runs behind the line,
   with a scrim that clears the left side so the type stays readable */
.filmband{position:relative;background:#fff;overflow:hidden;
  min-height:clamp(400px,56vh,620px);display:flex;align-items:center;
  padding:clamp(44px,6vw,80px) 0}
.filmband-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% center;z-index:0}
.filmband-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.97) 40%,
             rgba(255,255,255,.62) 62%,rgba(255,255,255,0) 84%)}
.filmband .wrap{position:relative;z-index:2}
/* over moving artwork the Didone hairlines vanish, so this line runs
   heavy with a small optical size — the sturdiest cut of the face */
.filmband .stmt{max-width:none;font-weight:700;font-variation-settings:'opsz' 16;
  font-size:clamp(1.95rem,4vw,3.15rem);line-height:1.14}
.filmband .stmt.split .w{color:rgba(1,2,5,.44)}

.stmt{font-family:'Bodoni Moda',serif;font-weight:500;font-variation-settings:'opsz' 60;
  font-size:clamp(1.6rem,3.3vw,2.65rem);line-height:1.16;letter-spacing:-.012em;max-width:18ch;margin:0}
.stmt em{font-style:italic}
/* words only dim once the script has split them, so the line is
   never invisible if the script hasn't run */
.stmt .w{transition:color .5s var(--ease)}
.stmt.split .w{color:rgba(1,2,5,.3)}
.stmt.split .w.lit{color:var(--ink)}
.dark .stmt.split .w{color:rgba(255,255,255,.34)}
.dark .stmt.split .w.lit{color:#fff}

/* ---------------- card grid ---------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.card{display:flex;flex-direction:column;background:var(--surface);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(1,2,5,.13)}
.card .media{aspect-ratio:16/11;background:var(--tone);color:var(--tone-ink);
  display:grid;place-items:center;position:relative;overflow:hidden}
.card .media .num{font-family:'Bodoni Moda',serif;font-weight:500;font-variation-settings:'opsz' 96;
  font-size:clamp(3.4rem,7vw,5.6rem);line-height:1;transition:transform .7s var(--ease)}
.card:hover .media .num{transform:scale(1.08)}
.card .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .badge{align-self:flex-start;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;background:rgba(1,2,5,.08);color:var(--ink-soft)}
.card h3{font-size:1.34rem;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.card p{margin:0;font-size:.97rem;color:var(--ink-soft);line-height:1.5}
.card .go{margin-top:auto;padding-top:14px;font-size:14.5px}

/* ============================================================
   ROTATING DECK — frosted glass over the brand film
   ============================================================ */
/* dark, with a slow sheen drifting across it — enough light for the
   glass panels to catch, without an image behind them.
   Reused by the contact header. */
.shine{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(120% 74% at 50% -6%,rgba(255,255,255,.11),transparent 58%),
    radial-gradient(90% 70% at 88% 86%,rgba(255,255,255,.05),transparent 62%),
    linear-gradient(180deg,#0A0B0E 0%,#050609 52%,#010205 100%);
}
.shine::after{content:'';position:absolute;top:-20%;left:-5%;width:62%;height:140%;
  background:radial-gradient(closest-side,rgba(255,255,255,.1),transparent 72%);
  animation:sheen 22s ease-in-out infinite alternate}
@keyframes sheen{from{transform:translateX(-6%)}to{transform:translateX(78%)}}
.svc{overflow:hidden;background:var(--dark)}
.svc>.wrap{z-index:2}

.stage{position:relative;height:clamp(430px,52vw,580px);perspective:2000px;perspective-origin:50% 48%;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.stage:active{cursor:grabbing}
.deck{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--ease)}

.slab{
  --w:clamp(236px,24vw,330px);
  --h:clamp(338px,34vw,458px);
  position:absolute;top:50%;left:50%;width:var(--w);height:var(--h);
  margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  background:linear-gradient(158deg,rgba(var(--hue),.15),rgba(var(--hue),.05) 56%,rgba(255,255,255,.03));
  color:#fff;
  -webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35);
  border:1px solid rgba(var(--hue),.34);border-radius:4px;
  transform-style:preserve-3d;will-change:transform,opacity;
  box-shadow:0 30px 70px rgba(1,2,5,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:52px 24px 26px;cursor:pointer;
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.slab .n{position:absolute;top:24px;left:0;right:0;text-align:center;
  font-size:11px;font-weight:600;letter-spacing:.24em;color:rgba(255,255,255,.66)}
.slab h3{
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;font-variation-settings:'opsz' 44;
  font-size:clamp(1.85rem,3vw,2.6rem);line-height:1.02;letter-spacing:-.02em;
  text-wrap:balance;text-shadow:0 2px 24px rgba(1,2,5,.45);
}
/* the sub-services sit centred directly under the title, not pinned
   to the base of the panel — over a hairline in the card's own hue */
.slab p{margin:20px auto 0;padding-top:18px;max-width:23ch;text-align:center;
  background-image:linear-gradient(90deg,transparent,rgba(var(--hue),.6) 25%,rgba(var(--hue),.6) 75%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top center;
  font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.82)}
/* the mark's line again, catching the top edge of every panel */
.slab::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--hue),.9),transparent)}
/* depth dimming for the cards behind — an overlay rather than a CSS
   filter, because filter on the panel would kill its backdrop-filter */
.slab::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:4px;
  background:rgba(1,2,5,var(--dim,0));transition:background .3s linear}
.slab.sel{
  background:linear-gradient(158deg,rgba(var(--hue),.24),rgba(var(--hue),.08) 56%,rgba(255,255,255,.05));
  border-color:rgba(var(--hue),.6);
  box-shadow:0 40px 90px rgba(1,2,5,.6),0 0 70px rgba(var(--hue),.16);
}

/* the five stops of the mark's gradient, one per discipline —
   held at low alpha so they tint the glass rather than colour it */
.tone-1{--hue:119,51,255}   /* violet  */
.tone-2{--hue:86,104,255}   /* indigo  */
.tone-3{--hue:61,173,226}   /* azure   */
.tone-4{--hue:61,224,180}   /* teal    */
.tone-5{--hue:61,251,152}   /* mint    */

.deck-ui{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(28px,3.6vw,46px);flex-wrap:wrap}
.arrows{display:flex;gap:10px}
.arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;
  transition:background .4s,color .4s,border-color .4s}
.arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.arrow svg{width:17px;height:9px}
.dark .arrow{border-color:var(--rule-dark)}
.dark .arrow:hover{background:#fff;color:var(--ink);border-color:#fff}
.ticks{display:flex;flex:1;max-width:400px;margin:0 clamp(10px,3vw,36px)}
.ticks button{flex:1;height:30px;position:relative}
.ticks button::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule)}
.ticks button::after{content:'';position:absolute;left:0;top:50%;height:1px;width:0;background:var(--ink);transition:width .55s var(--ease)}
.ticks button.on::after{width:100%}
.dark .ticks button::before{background:var(--rule-dark)}
.dark .ticks button::after{background:#fff}
.deck-now{text-align:right;font-size:16px;font-weight:600}
.deck-now span{display:block;font-weight:400}

/* ============================================================
   REQUEST BOX
   ============================================================ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--rule);border-radius:10px;padding:15px 16px;outline:none;width:100%;
  transition:border-color .3s,box-shadow .3s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(1,2,5,.38)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(1,2,5,.08)}
.field textarea{min-height:148px;resize:vertical;line-height:1.5}
.form-foot{grid-column:1 / -1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.form-foot .note{font-size:13.5px;color:var(--ink-faint);max-width:36ch}
.form-foot .note.err{color:#B3261E}
.form-foot .btn[disabled]{opacity:.6;pointer-events:none}
/* honeypot — off-screen for people, irresistible to bots */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0}
.form-done{border-top:2px solid var(--ink);padding-top:26px}

/* contact: request box beside the direct details */
.contact-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,72px);align-items:start}
#request{scroll-margin-top:96px}

/* ---------------- contact rows ---------------- */
.crows{border-top:1px solid var(--rule)}
.crow{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:24px 0;
  border-bottom:1px solid var(--rule);transition:padding-left .5s var(--ease)}
.crow:hover{padding-left:12px}
/* addresses and handles stay in the grotesk — a Didone at this size
   turns an email into a puzzle */
.crow .v{font-family:'Inter Tight',system-ui,sans-serif;font-weight:500;letter-spacing:-.01em;
  font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.3;word-break:break-word;display:block;margin-top:5px}
.crow .ar{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;flex:none;
  transition:transform .45s var(--ease),background .45s,color .45s,border-color .45s}
.crow:hover .ar{transform:translateX(5px);background:var(--ink);color:#fff;border-color:var(--ink)}
.crow .ar svg{width:10px;height:10px}

/* ---------------- next-page pointer ---------------- */
.next-up{display:block;background:var(--surface);padding:clamp(46px,6vw,86px) 0;transition:background .5s}
.next-up:hover{background:var(--surface-2)}
.next-in{display:flex;justify-content:space-between;align-items:center;gap:28px}
.next-in .big{font-family:'Bodoni Moda',serif;font-weight:500;font-variation-settings:'opsz' 84;
  font-size:clamp(1.9rem,5vw,4rem);line-height:1;margin-top:6px}
.next-in .ar{width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none;
  transition:transform .5s var(--ease)}
.next-up:hover .ar{transform:translateX(12px)}
.next-in .ar svg{width:17px;height:10px}

/* ---------------- footer ---------------- */
footer{background:var(--dark);color:var(--on-dark-soft);padding:clamp(36px,4.2vw,54px) 0 22px}
.f-top{display:flex;justify-content:space-between;gap:26px 40px;flex-wrap:wrap;align-items:flex-start}
.f-cats{display:flex;flex-direction:column;gap:11px}
.f-cats ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.f-cats li{font-size:14.5px;color:#fff}
.f-links{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.f-links a{font-size:14.5px;transition:color .35s}
.f-links a:hover{color:#fff}
.f-in{display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;align-items:center;
  margin-top:clamp(26px,3vw,40px);padding-top:18px;border-top:1px solid var(--rule-dark);font-size:13px}
.f-sign{display:flex;align-items:center;gap:11px}
.f-sign .mk{width:28px;height:28px}
.f-legal{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--on-dark-faint);max-width:72ch}
.f-bar{height:2px;background:var(--mark);width:100%;margin-top:20px}

/* ---------------- responsive ---------------- */
@media(max-width:1040px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr;gap:38px}
  .duo-film{max-width:420px}
}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:48px}
}
@media(max-width:860px){
  .hd-nav{display:none}
  .hd .btn{display:none}
  .burger{display:block}
  .hero-hint{display:none}
  .form{grid-template-columns:1fr}
  /* text sits vertically centred, as it does on a laptop — so the scrim
     clears the middle band and lets the drawing read top and bottom */
  .filmband-bg{object-position:center 34%}
  .filmband-scrim{background:linear-gradient(180deg,
    rgba(255,255,255,.2) 0%,rgba(255,255,255,.88) 26%,
    rgba(255,255,255,.96) 50%,rgba(255,255,255,.88) 74%,
    rgba(255,255,255,.24) 100%)}
  .filmband{align-items:center;min-height:clamp(400px,58vh,520px)}
  .filmband .stmt{max-width:none}
}
@media(max-width:640px){
  body{font-size:16px}
  .cards{grid-template-columns:1fr}
  .deck-ui{flex-direction:column;align-items:stretch;gap:20px}
  .deck-now{text-align:left}
  .ticks{margin:0;max-width:none}
  .next-in .big{font-size:clamp(1.7rem,8vw,2.4rem)}

  /* The film owns the whole first screen — nothing below it peeks in.
     dvh, not svh: svh is the viewport at its SMALLEST (all browser
     chrome shown), so on iOS Safari the hero came up shorter than the
     actual visible area and the next section showed under it. dvh
     tracks the live height, so it always fills exactly. */
  /* Plain 100vh, deliberately. On iOS, 100vh resolves to the viewport
     with the browser toolbars HIDDEN — always taller than what you can
     actually see. That is normally a nuisance; here it is exactly the
     behaviour we want, because it guarantees the hero is never shorter
     than the screen and the white section below can never show through.
     The copy is then lifted by --chrome so the toolbar cannot cover it. */
  .hero{height:100vh;min-height:480px}
  /* object-fit:cover on a landscape film in a portrait frame blows the
     mark up ~4x. Drive the size from the film's HEIGHT instead, so the
     mark lands at the same share of the screen as it does on a laptop
     whatever the phone's aspect. max-width:none is required — the base
     img,video{max-width:100%} would otherwise clamp it straight back. */
  .hero-film{
    inset:auto;top:44%;left:50%;
    width:275%;height:auto;max-width:none;
    transform:translate(-50%,-50%);object-fit:contain;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  }
  /* viewport-fit=cover puts the page under the home indicator, so the
     bottom of the hero has to step around it */
  /* --chrome lifts the copy clear of whatever toolbar is currently
     overlapping the bottom of the hero */
  .hero-in{padding-bottom:calc(var(--chrome,0px) + clamp(58px,7vh,86px) + env(safe-area-inset-bottom,0px))}
  /* with nothing showing beneath the fold, the cue has to earn its keep */
  .hero-hint{display:flex;left:0;right:0;justify-content:center;gap:10px;
    bottom:calc(var(--chrome,0px) + 16px + env(safe-area-inset-bottom,0px))}
  .d1{font-size:clamp(2rem,8.4vw,2.9rem)}
  .d2{font-size:clamp(1.8rem,7.6vw,2.5rem)}
  .d3{font-size:clamp(1.45rem,6.2vw,1.9rem)}

  .filmband{min-height:clamp(330px,50vh,430px);padding:clamp(34px,6vw,54px) 0}
  /* the break after "be" is kept — the type is sized so the first
     line still fits rather than dropping the break */
  .filmband .stmt{font-size:clamp(1.42rem,5.9vw,2rem);line-height:1.2}

  /* stack and stretch rather than width:100% — a percentage width on a
     flex item can resolve wider than the bar it sits in */
  .hero-acts,.form-foot{flex-direction:column;align-items:stretch;gap:16px}
  .hero-acts .btn,.form-foot .btn{align-self:stretch;justify-content:center;width:auto}
  .hero-acts .go{align-self:flex-start}
  .form-foot .note{text-align:left}
  .ph{min-height:auto;padding-top:calc(78px + clamp(34px,9vw,64px))}
  .stage{height:clamp(400px,112vw,470px)}
  .slab{--w:clamp(214px,62vw,250px);--h:clamp(312px,88vw,352px);padding:44px 18px 22px}
  .f-top{gap:24px}
  .f-in{font-size:12.5px}
}
@media(max-width:400px){
  .hero{min-height:420px}
  .filmband .stmt{font-size:1.28rem}
  .slab{--w:200px;--h:296px}
  .slab h3{font-size:1.6rem}
  .crow .v{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-r]{opacity:1;transform:none}
  .mask>span{transform:none}
  .mk{animation:turn 46s linear infinite!important}
  /* hold the shine still, colour band centred on the words */
  .shiny .mask>span{animation:none!important;background-position:44% 0}
}