/* ============================================================
   TRENDWAY — NEXT STATION — PRODUCTION RELEASE
   Five moments: Video Hero (Candidate A, frame-locked) → In Motion
   → Orange Event → Selected Work → The Next Move → premium navy
   footer. Every motion element is LOCAL to its own scene, so nothing
   can leak between frames. Motion language: APPROACH · CUT · LOCK —
   elements move with intention and always reach a resting state.
   ============================================================ */

@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Alexandria';src:url('../fonts/Alexandria-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Alexandria';src:url('../fonts/Alexandria-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Alexandria';src:url('../fonts/Alexandria-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --orange:#F15A38;
  --orange-600:#D94A2B;
  --navy:#0A1B3B;
  --deep:#14294D;
  --deeper:#081630;
  --white:#FFFFFF;
  --on-dark-soft:rgba(255,255,255,.78);
  --on-dark-faint:rgba(255,255,255,.46);
  --line-dark:rgba(255,255,255,.18);
  --line-light:rgba(10,27,59,.16);
  --focus:var(--orange);
  --maxw:1280px;
  --gutter:clamp(20px,5vw,72px);
  --ease-swift:cubic-bezier(.22,1,.36,1);
  --ease-chevron:cubic-bezier(.62,0,.2,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:'Montserrat',Arial,sans-serif;background:var(--navy);color:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
figure{margin:0}
.ltr-num{unicode-bidi:isolate;direction:ltr;display:inline-block}

html[dir="rtl"] body{font-family:'Alexandria','Montserrat',Tahoma,sans-serif}

/* ---------- accessibility scaffold ---------- */
.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}
.skip-link{position:fixed;top:0;inset-inline-start:12px;transform:translateY(-140%);background:var(--white);color:var(--navy);padding:10px 16px;border-radius:0 0 6px 6px;font-weight:700;font-size:14px;z-index:999;transition:transform .25s var(--ease-swift)}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
a:focus-visible,button:focus-visible{border-radius:2px}

/* ---------- header ----------
   R4 simplification: exactly two states. Light logo on navy scenes
   (Hero / Moving / Work / Footer), dark logo on the two orange scenes
   (Orange Event / CTA). body.on-light-head = "header sits on orange". */
.site-head{position:fixed;top:0;inset-inline:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);pointer-events:none}
.site-head *{pointer-events:auto}
.brand-mark{display:flex;align-items:center}
.brand-mark img{height:26px;width:auto;display:block}
.brand-mark .lg-dark{display:none}
body.on-light-head .brand-mark .lg-light{display:none}
body.on-light-head .brand-mark .lg-dark{display:block}
@media(min-width:640px){.brand-mark img{height:30px}}
.head-right{display:flex;align-items:center;gap:14px}
.head-status{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft);transition:color .3s var(--ease-swift)}
body.on-light-head .head-status{color:rgba(10,27,59,.66)}
/* Motion principle: everything reaches a resting state. The status dot
   signals life during the hero entrance, then settles solid — an infinite
   pulse would keep the compositor awake forever and breaks the rule that
   the finished hero is completely still. */
.head-status .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:pulse-dot 1.6s ease-in-out 2 forwards}
body.on-light-head .head-status .dot{background:var(--navy)}
@media(prefers-reduced-motion:reduce){.head-status .dot{animation:none}}
.lang-switch{font:inherit;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--white);border:1px solid var(--line-dark);border-radius:999px;padding:7px 16px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
body.on-light-head .lang-switch{color:var(--navy);border-color:var(--line-light)}
.lang-switch:hover{background:var(--orange);border-color:var(--orange);color:var(--white)}
body.on-light-head .lang-switch:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}
@keyframes pulse-dot{0%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.45)}100%{opacity:1;transform:scale(1)}}

/* ---------- scene scaffolding ---------- */
.scene{position:relative;display:flex;flex-direction:column;justify-content:center}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);width:100%;position:relative;z-index:10}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
html[dir="rtl"] .eyebrow{letter-spacing:0;font-size:13.5px}
.chev{width:10px;height:10px;flex:none;background:currentColor;clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%)}
html[dir="rtl"] .chev{transform:scaleX(-1)}

/* ============================================================
   SCENE 01 — VIDEO HERO (Candidate A, frame-locked)

   Motion language: APPROACH · CUT · LOCK. Every element travels with
   intention and reaches a resting state. Nothing floats, nothing loops.

   Entrance beats are placed against real events in the footage:
     0.00s  distant speck
     0.55s  car becoming perceptible      -> eyebrow, horizontal mask
     1.15s  car clearly reads             -> NEXT, directional clip
     1.32s  growth begins in earnest      -> STATION., orange sweep
     2.00s  car closing hard               -> support line settles
     2.40s  quietest element              -> scroll cue
     2.82s  ALL TYPE SETTLED
     3.167s car reaches the locked frame  -> video hands to poster
   ============================================================ */
.hero{background:var(--navy);min-height:100svh;overflow:hidden;padding-block:0;justify-content:center}

.hero-media{position:absolute;inset:0;z-index:0;background:var(--navy)}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:38% 50%;display:block}

/* ---- ending ladder: SHARP -> SOFT -> NAVY ----
   Three pre-rendered stills of the same master frame. Nothing here filters
   the live video: a full-screen animated blur() is expensive and drops
   frames, so the defocus is baked into the WebP instead. All three share
   the frame, the crop and the object-position, so there is no image jump
   between any pair. */
.hero-end{position:absolute;inset:0;opacity:0;pointer-events:none;
  background-size:cover;background-position:38% 50%;background-repeat:no-repeat;
  transition:opacity .30s linear}
.hero-end.sharp{background-image:url('../images/trendway-hero-poster.webp')}
.hero-end.soft {background-image:url('../images/hero-end-soft.webp');transition-duration:.34s}
.hero-end.navy {background-image:url('../images/hero-end-navy.webp');transition-duration:.42s}
.hero.end-sharp .hero-end.sharp{opacity:1}
.hero.end-soft  .hero-end.soft {opacity:1}
.hero.end-navy  .hero-end.navy {opacity:1}
/* once navy owns the frame the layers beneath it are removed outright */
.hero.end-locked .hero-video,
.hero.end-locked .hero-end.sharp,
.hero.end-locked .hero-end.soft{display:none}

/* ---- navy ownership: layered, not one flat overlay ----
   LEFT strong (type safe zone) · CENTRE medium (depth preserved) ·
   RIGHT light (driver and car stay visible) · BOTTOM cinematic vignette ·
   TOP subtle falloff under the header, never a black band. */
.hero-grade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(94deg,
    rgba(10,27,59,.97) 0%,
    rgba(10,27,59,.93) 18%,
    rgba(10,27,59,.74) 36%,
    rgba(10,27,59,.44) 54%,
    rgba(10,27,59,.20) 72%,
    rgba(10,27,59,.08) 100%)}
/* a second, softer pass that deepens only once the brand lock happens —
   this is what moves the frame from "car shot" to "Trendway campaign" */
.hero-grade-deep{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .45s var(--ease-swift);
  background:linear-gradient(94deg,
    rgba(10,27,59,.55) 0%,
    rgba(10,27,59,.40) 30%,
    rgba(10,27,59,.22) 58%,
    rgba(10,27,59,.10) 100%)}
.hero.end-navy .hero-grade-deep{opacity:1}
html[dir="rtl"] .hero-grade,html[dir="rtl"] .hero-grade-deep{transform:scaleX(-1)}
.hero-vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,27,59,0) 55%,rgba(8,22,48,.52) 84%,rgba(6,18,40,.76) 100%)}
.hero-top{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,27,59,.52) 0%,rgba(10,27,59,.14) 9%,rgba(10,27,59,0) 18%)}
/* one residual warmth on the helmet/suit side, tying the frame to STATION. */
.hero-warm{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(26% 32% at 72% 50%,rgba(241,90,56,.15),transparent 70%)}
html[dir="rtl"] .hero-warm{transform:scaleX(-1)}

.hero-wrap{z-index:10}
/* typography is never blurred and never dims — it sharpens against a
   softening background, which is the whole point of the ending */
.hero-type{position:relative;z-index:11}
.hero-type{max-width:min(940px,76%)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px}
.hero-mast{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.88;
  text-shadow:0 2px 40px rgba(6,16,34,.5)}
.hero-mast .mline{overflow:hidden;display:block;position:relative}
.hero-mast .mline b{display:block;font-weight:800;font-style:normal}
.mnext b{font-size:clamp(28px,4.2vw,66px);letter-spacing:.05em;color:var(--white);margin-inline-start:.35em}
.mstation b{font-size:clamp(58px,10.6vw,168px);color:var(--orange);white-space:nowrap}
html[dir="rtl"] .hero-mast{line-height:1.06;letter-spacing:0;text-transform:none}
html[dir="rtl"] .mnext b{font-size:clamp(26px,4vw,60px);letter-spacing:0}
html[dir="rtl"] .mstation b{font-size:clamp(54px,10.4vw,160px)}
.hero .support{margin:30px 0 0;font-size:clamp(13px,1.25vw,17px);font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:var(--on-dark-soft);
  text-shadow:0 2px 22px rgba(6,16,34,.6)}
html[dir="rtl"] .hero .support{letter-spacing:.06em}
.hero .scroll-cue{margin-top:50px;display:inline-flex;align-items:center;gap:10px;font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint);text-decoration:none}
.hero .scroll-cue:hover{color:var(--orange)}

/* ---- resting state is the default; the entrance only plays when JS
        adds .is-live, so no-js and reduced-motion land here directly ---- */
.hero .hero-eyebrow,.hero .support,.hero .scroll-cue{opacity:0}
.hero-mast .mline b{clip-path:inset(0 100% 0 0)}
html[dir="rtl"] .hero-mast .mline b{clip-path:inset(0 0 0 100%)}

/* BEAT 01 — eyebrow uncovered by a horizontal mask travelling across it */
.hero.is-live .hero-eyebrow{animation:mask-x .40s var(--ease-chevron) .55s forwards}
/* BEAT 02 — NEXT: directional clip from the direction of travel + small slide */
.hero.is-live .mnext b{animation:next-in .52s var(--ease-chevron) 1.15s forwards}
/* BEAT 03 — STATION.: an orange plane sweeps through and leaves the word behind.
   The plane is a transition device only — it is gone by the end of the beat. */
.hero.is-live .mstation b{animation:station-in .62s var(--ease-chevron) 1.32s forwards}
.hero-mast .sweep{position:absolute;inset:0;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
html[dir="rtl"] .hero-mast .sweep{transform-origin:100% 50%}
.hero.is-live .sweep{animation:sweep-through .62s var(--ease-chevron) 1.32s forwards}
/* BEAT 04 — support: tracking settles, minimal movement */
.hero.is-live .support{animation:track-in .45s var(--ease-swift) 2.00s forwards}
/* BEAT 05 — cue, quietest, last */
.hero.is-live .scroll-cue{animation:mask-x .42s var(--ease-swift) 2.40s forwards}

@keyframes mask-x{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes next-in{from{clip-path:inset(0 100% 0 0);transform:translateX(28px)}
                   to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes station-in{0%{clip-path:inset(0 100% 0 0)}
                      42%{clip-path:inset(0 100% 0 0)}
                      100%{clip-path:inset(0 0 0 0)}}
@keyframes sweep-through{0%{transform:scaleX(0)}
                         42%{transform:scaleX(1)}
                         100%{transform:scaleX(0);transform-origin:100% 50%}}
html[dir="rtl"] .hero.is-live .sweep{animation-name:sweep-through-rtl}
@keyframes sweep-through-rtl{0%{transform:scaleX(0)}
                             42%{transform:scaleX(1)}
                             100%{transform:scaleX(0);transform-origin:0 50%}}
@keyframes track-in{from{opacity:0;letter-spacing:.52em}to{opacity:1;letter-spacing:.34em}}
html[dir="rtl"] .hero.is-live .support{animation-name:track-in-rtl}
@keyframes track-in-rtl{from{opacity:0;letter-spacing:.18em}to{opacity:1;letter-spacing:.06em}}

/* everything visible at rest when motion is off */
.hero.settled .hero-eyebrow,.hero.settled .support,.hero.settled .scroll-cue{opacity:1;animation:none}
.hero.settled .hero-mast .mline b{clip-path:inset(0);animation:none}
.hero.settled .sweep{display:none}

/* ---- mobile: strong type area above, cinematic band below.
        Same approved moment, dedicated crop, driver stays visible. ---- */
@media(max-width:820px){
  .hero{padding-block:104px 56px;justify-content:flex-start}
  .hero-media{top:auto;bottom:0;height:54svh}
  /* type is above the band here, so framing is the same in both directions */
  .hero-video,html[dir="rtl"] .hero-video{object-position:82% 50%}
  /* same geometry AND same framing as the mobile video, so the handoff
     cannot shift: all four are 1100x468 shown at object-position 82% */
  .hero-end,html[dir="rtl"] .hero-end{background-position:82% 50%}
  .hero-end.sharp{background-image:url('../images/trendway-hero-poster-mobile.webp')}
  .hero-end.soft {background-image:url('../images/hero-end-soft-mobile.webp')}
  .hero-end.navy {background-image:url('../images/hero-end-navy-mobile.webp')}
  .hero-grade-deep{top:auto;bottom:0;height:54svh;
    background:linear-gradient(180deg,rgba(10,27,59,.55) 0%,rgba(10,27,59,.30) 40%,rgba(10,27,59,.12) 100%)}
  html[dir="rtl"] .hero-grade-deep{transform:none}
  .hero-top{background:linear-gradient(180deg,rgba(10,27,59,.4) 0%,rgba(10,27,59,0) 12%)}
  .hero-grade{top:auto;bottom:0;height:54svh;
    background:linear-gradient(180deg,rgba(10,27,59,.99) 0%,rgba(10,27,59,.80) 18%,
      rgba(10,27,59,.42) 44%,rgba(10,27,59,.14) 72%,rgba(10,27,59,.06) 100%)}
  html[dir="rtl"] .hero-grade{transform:none}
  .hero-vig{background:linear-gradient(180deg,rgba(10,27,59,.5) 0%,rgba(10,27,59,0) 32%,
      rgba(8,22,48,.34) 84%,rgba(8,22,48,.58) 100%)}
  .hero-warm{top:auto;bottom:0;height:60svh;
    background:radial-gradient(52% 34% at 62% 58%,rgba(241,90,56,.12),transparent 74%)}
  html[dir="rtl"] .hero-warm{transform:none}
  .hero-type{max-width:none}
  .mnext b{font-size:clamp(26px,7.4vw,40px);margin-inline-start:.25em}
  .mstation b{font-size:clamp(46px,15.2vw,74px)}
  .hero .support{margin-top:22px;letter-spacing:.2em}
  .hero .scroll-cue{margin-top:26px}
}
@media(max-width:380px){
  .mstation b{font-size:clamp(40px,14vw,58px)}
  .hero .support{letter-spacing:.14em;font-size:11.5px}
}

/* ============================================================
   SCENE 02 — IN MOTION
   ============================================================ */
.moving{background:var(--deep);color:var(--white);min-height:88svh}
.moving .wrap{width:100%}
.cut-stage{position:relative;height:clamp(160px,24vw,320px);overflow:hidden}
.cut-phrase{position:absolute;inset-inline:0;top:50%;white-space:nowrap;font-weight:800;text-transform:uppercase;font-size:clamp(46px,11vw,142px);line-height:1;letter-spacing:-.02em}
html[dir="rtl"] .cut-phrase{letter-spacing:0;text-transform:none;font-size:clamp(40px,9.5vw,120px)}
.cut-phrase.was{color:var(--on-dark-faint);transform:translateY(-50%);opacity:1}
.cut-phrase.now{color:var(--orange);transform:translateY(calc(-50% + 90px));opacity:0}
/* the LOCAL slice — exists only inside this overflow-hidden stage */
.cut-slice{position:absolute;top:50%;inset-inline-start:0;width:100%;height:4px;background:var(--orange);opacity:0;transform:translate3d(-120%,-50%,0);will-change:transform,opacity;pointer-events:none}

/* ============================================================
   SCENE 03 — ORANGE EVENT (short, powerful)
   ============================================================ */
.capability{color:var(--navy);min-height:78svh;padding-block:clamp(70px,9vw,110px);position:relative;background:var(--deep);overflow:hidden}
.cap-flood{position:absolute;inset:0;background:var(--orange);transform:scaleY(0);transform-origin:50% 0;transition:transform .85s var(--ease-chevron)}
.capability.is-flooded .cap-flood{transform:scaleY(1)}
.cap-grid{display:flex;flex-direction:column;gap:.04em;position:relative;z-index:5}
.cap-word{overflow:hidden;position:relative}
.cap-word span{display:inline-block;font-weight:800;text-transform:uppercase;font-size:clamp(52px,11.5vw,158px);line-height:1;letter-spacing:-.02em;color:var(--navy)}
html[dir="rtl"] .cap-word span{letter-spacing:0;text-transform:none;font-size:clamp(42px,9.5vw,120px)}
.cap-word[data-m="wipe-lr"] span{transform:translateX(-104%);opacity:0;transition:transform .85s var(--ease-chevron) .3s,opacity .3s .3s}
html[dir="rtl"] .cap-word[data-m="wipe-lr"] span{transform:translateX(104%)}
.cap-word[data-m="outline"] span{color:transparent;-webkit-text-stroke:1.5px var(--navy);transition:color .6s var(--ease-swift) .65s,-webkit-text-stroke-color .6s .65s}
.cap-grid.is-in .cap-word[data-m="wipe-lr"] span{transform:translateX(0);opacity:1}
.cap-grid.is-in .cap-word[data-m="outline"] span{color:var(--navy)}

/* ============================================================
   SCENE 04 — SELECTED WORK (editorial, big, real covers only)
   ============================================================ */
.work{background:var(--navy);min-height:auto;padding-block:clamp(80px,11vw,120px) clamp(50px,7vw,80px);display:block}
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.work-range{margin-inline-start:10px;color:var(--on-dark-faint);font-weight:700;letter-spacing:.14em}
.work h2{margin:14px 0 0;font-weight:800;font-size:clamp(34px,5.4vw,58px);letter-spacing:-.02em;text-transform:uppercase;line-height:1}
html[dir="rtl"] .work h2{letter-spacing:0;text-transform:none}
.work-sub{margin-top:10px;font-size:clamp(15px,1.4vw,18px);color:var(--on-dark-soft);font-weight:500}
.work-head-controls{display:flex;align-items:center;gap:16px;flex:none}
.work-progress{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--on-dark-faint)}
.work-progress #workProgNow{color:var(--orange)}
.work-controls{display:flex;gap:10px}
.work-nav{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-dark);background:transparent;color:var(--white);cursor:pointer;font-size:16px;transition:background .2s,border-color .2s}
.work-nav:hover{background:var(--orange);border-color:var(--orange)}

.work-carousel-wrap{position:relative;z-index:10;margin-top:clamp(34px,5vw,54px)}
.work-carousel{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x proximity;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.work-carousel::-webkit-scrollbar{display:none}
.work-carousel.dragging{cursor:grabbing;scroll-snap-type:none}
/* ~1.7–2 cards visible on desktop — the work dominates the screen */
.work-card{flex:0 0 auto;width:min(620px,86vw);scroll-snap-align:start;position:relative}
@media(min-width:900px){.work-card{width:min(780px,52vw)}}
.work-card .frame{position:relative;border-radius:2px;overflow:hidden;background:var(--deep)}
.work-card img{width:100%;height:auto;object-fit:cover;display:block;transition:transform .35s var(--ease-swift)}
.work-card:hover img,.work-card:focus-within img{transform:scale(1.015)}
/* caption below the artwork: INDEX / NAME / CATEGORY / VIEW ON BEHANCE */
.work-card .cap{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:16px}
.work-card .cidx{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--on-dark-faint)}
.work-card .ttl{display:block;font-size:clamp(18px,2vw,24px);font-weight:800;color:var(--white);margin-top:6px}
.work-card .cat{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-top:6px}
.work-card .ln{display:block;width:0;height:2px;background:var(--orange);margin-top:12px;transition:width .3s var(--ease-swift)}
.work-card:hover .ln,.work-card:focus-within .ln{width:38px}
.work-card .view{flex:none;display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:var(--on-dark-soft);white-space:nowrap;transition:transform .25s var(--ease-swift),color .25s}
.work-card:hover .view,.work-card:focus-within .view{color:var(--orange);transform:translateX(4px)}
html[dir="rtl"] .work-card:hover .view,html[dir="rtl"] .work-card:focus-within .view{transform:translateX(-4px)}
.work-card a.card-link{position:absolute;inset:0;z-index:4}

.work-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:30px}
.work-swipe-hint{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-faint)}
@media(min-width:900px){.work-swipe-hint{display:none}}
@media(max-width:899px){.work-head-controls .work-controls{display:none}}
.work-viewall{font-size:13px;font-weight:700;color:var(--on-dark-soft);text-decoration:underline;text-underline-offset:4px}
.work-viewall:hover{color:var(--orange)}

/* ============================================================
   SCENE 05 — THE NEXT MOVE — final campaign frame
   Copy left; one enormous navy action panel ("the open door")
   right. Micro proof line along the bottom edge.
   ============================================================ */
.cta-scene{background:var(--orange);color:var(--navy);min-height:100svh;position:relative;overflow:hidden;padding-block:clamp(90px,11vw,130px) clamp(64px,8vw,90px)}
.cta-wrap{display:flex;align-items:stretch;justify-content:space-between;gap:clamp(32px,6vw,72px);flex-wrap:wrap;position:relative;z-index:5}
.cta-copy{flex:1 1 460px;max-width:640px;display:flex;flex-direction:column;justify-content:center}
.cta-scene .eyebrow{color:var(--navy);margin-bottom:18px}
.cta-scene h2{font-weight:800;font-size:clamp(52px,8.4vw,128px);letter-spacing:-.02em;line-height:.94;text-transform:uppercase;margin:0}
html[dir="rtl"] .cta-scene h2{letter-spacing:0;text-transform:none;line-height:1.14}
.cta-support{margin-top:26px;max-width:36ch;font-size:clamp(16px,1.6vw,20px);color:rgba(10,27,59,.8);font-weight:600}

/* the door */
.cta-door{flex:0 1 auto;display:flex;flex-direction:column;justify-content:space-between;width:min(460px,36vw);min-height:min(62svh,540px);background:var(--navy);color:var(--white);border-radius:6px;padding:clamp(24px,2.6vw,40px);text-decoration:none;transition:transform .35s var(--ease-swift),box-shadow .35s var(--ease-swift)}
.cta-door:hover{transform:scale(1.025);box-shadow:0 34px 90px rgba(10,27,59,.35)}
.cta-door-num{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--on-dark-faint)}
.cta-door-text{white-space:pre-line;font-weight:800;text-transform:uppercase;font-size:clamp(34px,3.6vw,56px);line-height:1.02;letter-spacing:-.01em;margin-block:auto}
html[dir="rtl"] .cta-door-text{text-transform:none;letter-spacing:0;line-height:1.22}
.cta-door-arrow{align-self:flex-end;font-size:clamp(40px,3.6vw,58px);line-height:1;color:var(--orange);transition:transform .35s var(--ease-swift)}
html[dir="rtl"] .cta-door-arrow{align-self:flex-start;transform:scaleX(-1)}
.cta-door:hover .cta-door-arrow{transform:translate(10px,-10px)}
html[dir="rtl"] .cta-door:hover .cta-door-arrow{transform:scaleX(-1) translate(10px,-10px)}

/* micro proof — one quiet typographic line at the bottom edge */
.cta-proof{position:absolute;bottom:clamp(20px,3vw,34px);inset-inline:var(--gutter);margin:0;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--navy);z-index:5}
html[dir="rtl"] .cta-proof{letter-spacing:.04em}

@media(max-width:820px){
  .cta-scene{padding-block:96px 84px}
  .cta-wrap{flex-direction:column;align-items:stretch}
  .cta-copy{max-width:none}
  .cta-door{width:100%;min-height:clamp(220px,38svh,320px);margin-top:10px}
  .cta-door-text{font-size:clamp(30px,8.4vw,44px)}
  .cta-proof{position:static;margin-top:34px;letter-spacing:.14em}
}

/* ============================================================
   FOOTER — premium navy ending
   ============================================================ */
.site-foot{background:var(--navy);color:var(--white);position:relative;overflow:hidden;padding-block:clamp(80px,10vw,130px) 34px;min-height:52svh;display:flex;flex-direction:column;justify-content:center}
/* one large, fully-visible, low-opacity mark inside a safe frame —
   never cropped, never repeated */
.ft-mark{position:absolute;inset-inline-end:clamp(24px,4vw,64px);bottom:clamp(24px,4vw,64px);width:min(26vw,320px);height:min(26vw,320px);background-image:url('../images/tw-icon.svg');background-repeat:no-repeat;background-size:contain;background-position:center;opacity:.05;filter:brightness(0) invert(1);pointer-events:none;z-index:0}
/* RTL: inset-inline-end auto-mirrors the mark to the other side */
.ft-wrap{position:relative;z-index:5}
.ft-head{margin:0;font-weight:800;font-size:clamp(44px,7.4vw,112px);line-height:.96;letter-spacing:-.02em;text-transform:uppercase}
html[dir="rtl"] .ft-head{letter-spacing:0;text-transform:none;line-height:1.16}
.ft-head .accent{color:var(--orange)}
.ft-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:clamp(40px,5vw,64px)}
.fd{display:flex;flex-direction:column;gap:7px}
.fd .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint)}
html[dir="rtl"] .fd .lbl{letter-spacing:0}
.fd a{font-weight:700;font-size:15px;text-decoration:none;color:var(--white)}
.fd a:hover{color:var(--orange)}
.ft-social{display:flex;gap:clamp(18px,2.6vw,38px);flex-wrap:wrap;margin-top:clamp(38px,5vw,58px)}
.ft-social a{font-size:clamp(13px,1.15vw,16px);font-weight:800;letter-spacing:.1em;text-decoration:none;color:var(--on-dark-soft);transition:color .2s}
.ft-social a:hover{color:var(--orange)}
.ft-bottom{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(44px,6vw,70px);border-top:1px solid var(--line-dark);padding-top:20px}
.ft-bottom img{height:16px;width:auto}
.ft-loc,.ft-copy{font-size:11.5px;font-weight:500;color:var(--on-dark-faint)}
.ft-copy{margin-inline-start:auto}
@media(max-width:900px){
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .site-foot{min-height:auto;padding-block:72px 28px}
  .ft-grid{grid-template-columns:1fr;gap:20px}
  .ft-mark{width:min(40vw,220px);height:min(40vw,220px)}
  .ft-copy{margin-inline-start:0}
}

/* ---------- reveal helper ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-swift),transform .8s var(--ease-swift)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive misc ---------- */
@media(max-width:640px){
  .site-head{padding:14px var(--gutter)}
  .cut-stage{height:clamp(190px,52vw,300px)}
}

/* ---------- reduced motion: everything settles instantly as a static
   campaign frame ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .hero-mast .mline b{clip-path:inset(0 0 0 0) !important}
  .hero-eyebrow,.hero .support,.hero .scroll-cue,.rv{opacity:1 !important;transform:none !important}
  .hero-mast .sweep{display:none}
  /* reduced motion: no video at all — the finished navy lock only */
  .hero-video,.hero-end.sharp,.hero-end.soft{display:none !important}
  .hero-end.navy{opacity:1 !important}
  .hero-grade-deep{opacity:1 !important}
  .cut-slice{display:none}
  .cut-stage .cut-phrase.was{opacity:0 !important}
  .cut-stage .cut-phrase.now{opacity:1 !important;transform:translateY(-50%) !important}
  .cap-flood{transform:scaleY(1) !important}
  .cap-word span{opacity:1 !important;transform:none !important;color:var(--navy) !important;-webkit-text-stroke:0 !important}
}

/* ---------- no-js fallback ---------- */
.no-js .hero-mast .mline b,.no-js .rv,.no-js .hero-eyebrow,.no-js .hero .support,.no-js .hero .scroll-cue{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
.no-js .hero-mast .sweep{display:none}
.no-js .hero-video,.no-js .hero-end.sharp,.no-js .hero-end.soft{display:none}
.no-js .hero-end.navy{opacity:1}
.no-js .hero-grade-deep{opacity:1}
.no-js .cut-slice{display:none}
.no-js .cut-stage .cut-phrase.was{display:none}
.no-js .cut-stage .cut-phrase.now{opacity:1!important;transform:translateY(-50%)!important}
.no-js .cap-flood{transform:scaleY(1)!important}
.no-js .cap-word span{opacity:1!important;transform:none!important;color:var(--navy)!important}

/* ============================================================
   START YOUR BRIEF — THE NEXT MOVE (page transition)
   The navy panel becomes the next screen. Scale only, so the whole
   thing stays on the compositor: no width/height/top/left animation.
   ============================================================ */
/* Press IN, never out. The veil is placed on the door's measured rect, so a
   scale-up (or an added shadow) makes the door larger than the veil that is
   supposed to be covering it and a lit fringe crawls out from behind. */
.cta-door.is-going{transform:scale(.986);box-shadow:none}
.cta-door.is-going .cta-door-arrow{transform:translate(10px,-10px)}
.cta-door.is-going .cta-door-text{letter-spacing:-.02em}

/* Square corners deliberately. A non-uniform scale turns any border-radius
   into an ellipse (6px becomes ~45px across and ~13px down), which reads as a
   stepped, broken edge mid-wipe. At the door's size a 6px radius is not worth
   that, so the veil is a hard rectangle from the first frame. */
.brief-veil{position:fixed;z-index:9000;background:var(--navy);border-radius:0;
  transform:scale(1);transform-origin:center center;will-change:transform;
  transition:transform .42s cubic-bezier(.62,0,.2,1);
  pointer-events:none}
.brief-veil.go{transform:scale(var(--sx),var(--sy))}
/* The copy is a SIBLING of the veil, never a child: a transformed ancestor
   both scales its descendants and re-bases position:fixed against itself,
   so nesting it magnified the type by the veil's scale factor and pushed it
   off screen. Kept separate, it stays at its designed size. */
.brief-veil-copy{position:fixed;inset:0;z-index:9001;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:0 24px;
  opacity:0;transition:opacity .16s linear;pointer-events:none}
.brief-veil-copy.show{opacity:1}
.bv-mark{width:46px;height:46px;background-image:url('../images/tw-icon.svg');
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:brightness(0) invert(1);opacity:.9;flex:none}
.bv-line{font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.06;
  font-size:clamp(24px,3.4vw,44px);color:var(--white);text-align:center;
  max-width:min(90vw,720px)}
html[dir="rtl"] .bv-line{text-transform:none;letter-spacing:0;line-height:1.22}
@media(prefers-reduced-motion:reduce){.brief-veil,.brief-veil-copy{display:none}}

/* Arabic-preference visitors only: the markup ships English, so the body is
   held for the single frame applyLang() needs rather than painting the wrong
   language and flipping direction under the visitor. Set by the inline head
   script, cleared by main.js (and by its own 1.5s failsafe). The navy on
   <html> keeps this from ever being a white flash. */
html.lang-pending{background:var(--navy)}
html.lang-pending body{visibility:hidden}