/* HOME — cinematic scroll-driven hero ("Pause → Spark → Shift → Ooh!") */
/* v9: the hero fills the WHOLE viewport (header starts hidden and slides in over it after the shrink) */
.page-home main{padding-top:0}
.cine{position:relative;height:340vh;background:var(--white)}
.cine__stage{position:sticky;top:0;height:100vh;height:100svh;background:var(--white)}
/* v3: overflow:hidden REMOVED from .cine__stage (brief §7) so the film can bleed past the stage; the page itself
   is protected by body{overflow-x:clip} (site.css) — no horizontal scrollbar. */
.cine__copy{position:absolute;z-index:1;inset-inline-start:auto;left:var(--gutter);right:var(--gutter);bottom:clamp(24px,6vh,64px);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);direction:ltr}
.cine__title{font-size:min(12vw,10vh);color:var(--midnight);margin-left:-.04em}
.cine__title .l{display:block}
.cine__title .mask{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;vertical-align:top}
.cine__title .ch{display:inline-block}
.js .cine__title .ch{transform:translateY(108%);transition:transform .7s var(--e-shift);transition-delay:calc(var(--i)*.035s)}
.js .cine__title .l + .l .ch{transition-delay:calc(.12s + var(--i)*.035s)}
.js .cine.t-in .cine__title .ch{transform:none}
.cine__title .spark{transform:scale(0);transition:transform .45s var(--e-spark)}
.cine.ooh .cine__title .spark{transform:scale(1)}
.js .cine__eyebrow{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s var(--e-out)}
.js .cine.t-in .cine__eyebrow{opacity:1;transform:none}

/* media card: final rect = slot; JS scales it up to cover the stage at p=0 */
/* card rect = same as before, measured in the area below the header (--vh-c = viewport minus header) */
.cine{--vh-c:calc(100vh - var(--hdr));--vh-c:calc(100svh - var(--hdr))}
.cine__slot,.cine__media{position:absolute;top:calc(var(--hdr) + var(--vh-c) * .05);right:var(--gutter);height:calc(var(--vh-c) * .52);aspect-ratio:9/16}
.cine__slot{visibility:hidden}
.cine__media{z-index:2;border-radius:calc(var(--r,24px));overflow:hidden;background:var(--mist);outline:1px solid var(--mist);transform-origin:center}
/* v24: NO will-change:transform here — it made Chrome keep ONE bitmap of the (vector) film at the card's layout size and
   stretch it 2.7× to full screen (pixel-blurred). Without it the svg is re-rasterised at its on-screen size = always sharp. */
.cine__media > *{position:absolute;inset:0;width:100%;height:100%}
.intro-motion{display:block;
  /* BRAND BOOK OVERRIDE (v21): the component ships the video's #ff1d48 / #081ea2 — mapped to Signal Red & Deep Signal */
  --motion-red:var(--red,#FE1D47);--motion-blue:#001D8D;--motion-ink:#fff}
.intro-still{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--red)}   /* v23 fallback = first frame (fit, like the component) */
/* v24: the tap-hint pulse is drawn INSIDE the svg by home.js (vector, sharp) — no CSS transform on the element */
.cine__tap{position:absolute;inset:0;z-index:4;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cine__tap[hidden]{display:none}
.cine__tap:focus-visible{outline:2px solid var(--white);outline-offset:-12px}
.cine__hint{position:absolute;z-index:3;left:50%;bottom:24px;width:2px;height:56px;background:var(--white);overflow:hidden;transition:opacity .3s}
.cine__hint span{position:absolute;inset:0;background:var(--red);animation:hint 1.8s var(--e-shift) infinite}
@keyframes hint{0%{transform:translateY(-100%)}70%,100%{transform:translateY(100%)}}
.cine.t-in .cine__hint{opacity:0}

/* static fallback (reduced motion / no JS) */
.cine.is-static,.no-js .cine{height:auto}
.cine.is-static .cine__stage{position:relative;top:0;height:auto;min-height:100svh;display:grid;padding-block:calc(var(--hdr) + var(--s5)) var(--s5)}
.cine.is-static .cine__media{transform:none!important}
.cine.is-static .cine__hint{display:none}

/* Manifesto: one thought per line; the strong line is the Ooh! block */
.manifesto{overflow:hidden}
.manifesto .crop-sym{--sym:var(--mist);width:clamp(90px,10vw,210px);left:calc(-1 * clamp(6px,.8vw,14px));top:clamp(24px,5vw,72px)}   /* v11 peek */
.manifesto__grid{position:relative;z-index:1;display:grid;gap:var(--s8)}
.manifesto__text{font-size:clamp(1.0938rem,1.45vw,1.3125rem);line-height:1.75;font-weight:400;color:var(--midnight);max-width:45ch}   /* v25 (user): 400 / 45ch (was 500 / 30ch) */
.manifesto__text .ln{display:inline}
.manifesto__text .ln:first-child{font-weight:600;font-size:1.25em;line-height:1.5}
.ln--ooh{font-weight:600}
.ln--ooh span{display:inline;background:var(--blue);color:var(--white);padding:.06em .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-size:0% 100%;background-repeat:no-repeat;background-position:right;background-image:linear-gradient(var(--blue),var(--blue));background-color:transparent;color:var(--midnight);transition:background-size .7s var(--e-shift) .25s,color .3s .5s}
.ln--ooh.in span,.no-js .ln--ooh span{background-size:100% 100%;color:var(--white)}
.manifesto__form{border-radius:var(--radius-lg);padding:clamp(var(--s3),3vw,var(--s5));align-self:end;max-width:560px}

/* Home services (Electric Blue, 25%) */
.home-services .index-list{border-top-color:var(--white)}

/* Paths v11: 4 destinations — Services · Portfolio · Team · Resume. A relevant line icon, huge + cropped at the
   card corner, replaces the big symbol fragment (same language as the Services bento). */
.paths__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,var(--s2))}   /* v11: 2×2 on phones (checkerboard), 4-up ≥1100 */
.path{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius-lg);min-height:clamp(184px,22vw,300px);padding:clamp(18px,2.4vw,var(--s4));display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3)}
.path__bg{position:absolute;z-index:-1;left:-7%;top:-12%;width:min(62%,230px);height:auto;aspect-ratio:1;color:var(--white);opacity:.17;pointer-events:none;transition:transform var(--d-slow) var(--e-shift),opacity var(--d-mid)}
.path__bg *{vector-effect:non-scaling-stroke;stroke-width:1.6px}
.path__t{font-size:clamp(1.125rem,1.9vw,1.75rem);font-weight:600;line-height:1.15}
.path__go{align-self:flex-end;width:clamp(46px,4.4vw,64px);height:clamp(46px,4.4vw,64px);border-radius:50%;background:var(--white);color:var(--midnight);display:grid;place-items:center;transition:transform var(--d-mid) var(--e-shift),background var(--d-fast)}
.path__go svg{width:40%;height:40%}
@media (hover:hover){.path:hover .path__go{transform:rotate(-45deg) scale(1.08)}.path:hover .path__bg{opacity:.22;transform:rotate(-8deg) scale(1.06)}}
/* touch: same motion, triggered when the card crosses the viewport centre (site.js "live" module) */
@media (hover:none){.path.is-live .path__go{transform:rotate(-45deg) scale(1.08)}.path.is-live .path__bg{opacity:.22;transform:rotate(-8deg) scale(1.06)}}

@media (min-width:1100px){
  .paths__grid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){
  /* v22 (user): desktop = a 16:9 logo motion (full-screen at first, then the 16:9 card); phones keep 9:16. The component
     fits its 464×848 composition by HEIGHT into the wide frame (red field / blue wipe fill the width), so the logo is sized
     to the screen instead of being blown up from a portrait card. Width capped so the card clears the headline. */
  .cine__slot,.cine__media{top:calc(var(--hdr) + var(--vh-c) * .07);height:auto;width:min(42vw,var(--vh-c) * .44 * 16 / 9);aspect-ratio:16/9}
  .cine__copy{bottom:clamp(32px,8vh,96px)}
  .cine__title{font-size:min(9.5vw,19vh)}   /* v11: was min(12vw,24vh) */
  .manifesto__grid{grid-template-columns:1.5fr 1fr;align-items:end}
  .cine.is-static .cine__stage{grid-template-columns:1fr auto}
}

/* v9 — header waits for the film: hidden from the first paint (class set inline in <head>), slides down when the
   shrink has finished (home.js removes .hdr-intro). Keyboard focus always reveals it. */
.hdr-intro .hdr{transform:translateY(-100%)}
.hdr-intro .hdr:focus-within{transform:none}
.page-home .hdr{transition:transform .7s var(--e-out)}
/* v16 touch engine: while the film owns the gesture, the page is parked (no native scroll / momentum / pull-to-refresh).
   html only — NOT body: an overflow on body would make it the sticky container and break the pinned stage. */
html.cine-hold{overflow:hidden;overscroll-behavior:none;touch-action:none}
html.cine-hold .cine{touch-action:none}