@font-face{font-family:'Sansation';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/sansation-400.woff') format('woff');}
@font-face{font-family:'Sansation';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/sansation-700.woff') format('woff');}

/* =============================================================
   TWIST EXPRESS — interactive case study
   Brand tokens extracted from the Figma source of truth.
   Fonts: Barlow (display) · Inter (body) · Sansation (accent)
   ============================================================= */


.te{
  /* palette */
  --orange:#FF7250;
  --blue:#0066FF;
  --charcoal:#4A4A4A;
  --navy:#001025;
  --navy-2:#1E2C3C;
  --bg:#EBF0FA;
  --bg-2:#F5FCFF;
  --bg-3:#D7DCE6;
  --text-light:#E3E3E3;
  --ink:#0a1626;

  /* type */
  --font-display:'Barlow',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-accent:'Sansation','Inter',system-ui,sans-serif;

  /* motion */
  --ease:cubic-bezier(.2,.6,.2,1);
  --maxw:1180px;
}

/* ---------- reset / base ---------- */
.te,.te *,.te *::before,.te *::after{box-sizing:border-box;margin:0;padding:0}
.te{scroll-behavior:smooth;overflow-x:hidden}
.te{
  font-family:var(--font-body);
  background:var(--navy);
  color:var(--text-light);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.te img{display:block;max-width:100%}
.te a{color:inherit;text-decoration:none}
.te em{font-style:normal;color:var(--orange)}
.te ::selection{background:var(--orange);color:#fff}

/* Width system: exactly two content scales, both sharing the same side padding.
   .wrap = default (1180px), used for grids/cards. .wrap--narrow = prose (860px),
   used for reading-heavy blocks (e.g. Brief). */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px);width:100%}
.wrap--narrow{max-width:860px}

/* ---------- button-reset for lightbox triggers ---------- */
.frame,.post-frame,.tracking__art,.log-card,.app-shot,.app__hero,.reach__art,.laptop{
  display:block;width:100%;border:0;margin:0;padding:0;background:none;
  font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none;
}

/* ---------- shared type ---------- */
.eyebrow{font:700 12.5px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
.eyebrow--light{color:var(--orange)}
.sub-label{font:700 12px/1 var(--font-accent);letter-spacing:.22em;text-transform:uppercase;color:#8aa0bf;margin:clamp(48px,7vw,90px) 0 22px}
.scene--light .sub-label{color:#90a0b5}

.h-lg{font:900 clamp(34px,5.4vw,68px)/.98 var(--font-display);letter-spacing:-.02em}
.h-md{font:900 clamp(28px,4.4vw,54px)/1.04 var(--font-display);letter-spacing:-.018em}
.h-lg.dark,.h-md.dark{color:var(--ink)}

.body{font:400 clamp(15.5px,1.25vw,19px)/1.62 var(--font-body);color:#c4d2e6;max-width:62ch;text-align:justify;text-justify:inter-word}
.body.dark{color:#56657a}
.body--wide{max-width:72ch}
.body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.caption-line{font:400 12px/1 var(--font-accent);letter-spacing:.16em;text-transform:uppercase;color:#7d93b2;margin-top:26px}

.scene-head{max-width:880px;margin-bottom:clamp(36px,5vw,64px)}
.scene-head .body{margin-top:22px}

/* ---------- scene frame ---------- */
.scene{position:relative;overflow:hidden;padding:clamp(68px,9vh,112px) 0}
.scene--dark{background:var(--navy);color:var(--text-light)}
.scene--dark .h-lg,.scene--dark .h-md{color:#fff7f0}
.scene--light{background:var(--bg);color:var(--charcoal)}
.scene__bg{position:absolute;inset:-8% 0;z-index:0;pointer-events:none}
.scene__bg img{width:100%;height:116%;object-fit:cover;transform:translate3d(0,var(--py,0),0) scale(1.16)}
.scene__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,16,37,.62),rgba(0,16,37,.78))}
.scene > .wrap{position:relative;z-index:2}

/* =============================================================
   Animation primitives
   ============================================================= */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-reveal].is-in{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .te{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .scene__bg img{transform:none!important}
}

/* =============================================================
   Brand element — three-bar speed mark (real vector)
   ============================================================= */
.speedmark{width:30px;height:auto;display:block}

/* =============================================================
   Cursor + progress + nav
   ============================================================= */
.te-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:rgba(255,255,255,.08)}
.te-progress__bar{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--orange));transform:scaleX(0);transform-origin:left center;transition:transform .1s linear}

.te-nav{position:fixed;top:18px;left:50%;translate:-50% 0;z-index:110;display:flex;align-items:center;gap:clamp(14px,3vw,34px);
  padding:10px 14px 10px 18px;border-radius:100px;width:min(94vw,940px);
  background:rgba(8,20,38,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);transition:transform .4s var(--ease),background .4s,box-shadow .4s}
.te-nav.is-hidden{transform:translate(-50%,-160%)}
.te-nav.is-solid{background:rgba(6,16,32,.82);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.te-nav__brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.te-nav__logo{width:28px;height:auto}
.te-nav__wordmark-text{font:800 16px/1 var(--font-display);letter-spacing:-.01em;color:#fff}
.te-nav__wordmark-text b{color:var(--orange);font-weight:900}
.te-nav__links{display:flex;gap:clamp(10px,1.8vw,24px);list-style:none;margin-left:auto}
.te-nav__link{font:600 13px/1 var(--font-body);color:#aebdd2;letter-spacing:.01em;position:relative;padding:6px 0;transition:color .25s}
.te-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease)}
.te-nav__link:hover,.te-nav__link.is-active{color:#fff}
.te-nav__link.is-active::after,.te-nav__link:hover::after{transform:scaleX(1)}
.te-nav__back{font:700 13px/1 var(--font-body);color:#fff;background:rgba(255,255,255,.08);padding:9px 14px;border-radius:100px;white-space:nowrap;transition:background .25s}
.te-nav__back:hover{background:var(--orange)}
@media (max-width:780px){.te-nav__links{display:none}}

.te-chapters{position:fixed;z-index:118;top:50%;right:16px;display:grid;gap:5px;padding:7px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(8,20,38,.68);box-shadow:0 18px 50px rgba(0,0,0,.18);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);transform:translateY(-50%)}
.te-chapters a{display:grid;width:40px;min-height:38px;place-items:center;border-radius:13px;color:#8da0ba;transition:color .2s,background-color .2s,transform .3s var(--ease)}
.te-chapters a b{font:700 10px/1 var(--font-accent);letter-spacing:.08em}
.te-chapters a span{position:absolute;right:48px;padding:7px 10px;border-radius:10px;background:rgba(8,20,38,.88);color:#fff;font:600 12px/1 var(--font-body);opacity:0;pointer-events:none;transform:translateX(7px);transition:opacity .2s,transform .3s var(--ease);white-space:nowrap}
.te-chapters a:hover,.te-chapters a.is-active{background:var(--orange);color:#fff}
.te-chapters a:hover span,.te-chapters a:focus-visible span{opacity:1;transform:none}
@media(max-width:720px){.te-chapters{top:auto;right:50%;bottom:76px;grid-template-columns:repeat(5,1fr);transform:translateX(50%)}.te-chapters a{width:36px;min-height:34px}.te-chapters a span{display:none}}

/* =============================================================
   Lightbox (for raster content images; SVGs are excluded)
   ============================================================= */
.te-lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(0,10,24,.92);backdrop-filter:blur(6px)}
.te-lightbox.is-open{display:flex}
.lightbox__figure{max-width:min(88vw,1100px);max-height:82vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox__figure img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:12px;box-shadow:0 40px 100px rgba(0,0,0,.5);
  opacity:0;transform:scale(.97);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.lightbox__figure img.is-loaded{opacity:1;transform:scale(1)}
.lightbox__figure figcaption{font:400 13.5px/1.5 var(--font-body);color:#cdd9ec;text-align:center;max-width:60ch}
.lightbox__close,.lightbox__nav{position:fixed;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:background .2s}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--orange)}
.lightbox__close svg,.lightbox__nav svg{width:20px;height:20px;fill:#fff}
.lightbox__close{top:22px;right:22px}
.lightbox__nav--prev{left:22px;top:50%;translate:0 -50%}
.lightbox__nav--next{right:22px;top:50%;translate:0 -50%}
.lightbox__count{position:fixed;bottom:22px;left:50%;translate:-50% 0;font:600 12px/1 var(--font-body);letter-spacing:.08em;color:#8aa0bf}
@media (max-width:640px){.lightbox__nav{width:38px;height:38px}.lightbox__nav--prev{left:8px}.lightbox__nav--next{right:8px}.lightbox__close{top:10px;right:10px}}

/* =============================================================
   01 · COVER
   ============================================================= */
.cover{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(60px,9vh,110px)}
.cover__bg .scene__scrim{background:linear-gradient(180deg,rgba(0,16,37,.32) 0%,rgba(0,16,37,.5) 50%,rgba(0,16,37,.96) 100%),linear-gradient(90deg,rgba(0,16,37,.62) 0%,rgba(0,16,37,0) 62%)}
.cover__motif{position:absolute;top:14%;right:-2%;width:clamp(90px,16vw,220px);height:auto;z-index:1;opacity:.55;filter:drop-shadow(0 10px 40px rgba(0,102,255,.4))}
.cover__inner{position:relative;z-index:2}
.cover__wordmark{display:flex;flex-direction:column;line-height:.86;letter-spacing:-.03em;margin:6px 0 24px;font-family:var(--font-display)}
.cover__twist{font-weight:900;font-size:clamp(54px,12vw,150px);color:#fff}
.cover__express{font-weight:900;font-size:clamp(54px,12vw,150px);color:var(--orange);text-transform:uppercase}
.cover__lede{font:800 clamp(22px,3vw,40px)/1.12 var(--font-display);max-width:34ch;letter-spacing:-.01em;color:#fff;margin-bottom:22px}
.cover__intro{font:400 clamp(15px,1.2vw,18px)/1.6 var(--font-body);max-width:54ch;color:#c9d6ea;text-align:justify;text-justify:inter-word}
.cover__scroll{position:absolute;left:clamp(20px,5vw,64px);bottom:26px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;
  font:700 11px/1 var(--font-accent);letter-spacing:.24em;text-transform:uppercase;color:#cdd9ec}
.cover__scrollline{width:1px;height:40px;background:linear-gradient(var(--orange),transparent);animation:scrolldrop 1.8s var(--ease) infinite}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =============================================================
   02 · BRIEF
   ============================================================= */
.brief{background:var(--navy)}
.brief__watermark{position:absolute;top:-2%;right:-2%;z-index:0;font:900 clamp(120px,30vw,400px)/.8 var(--font-display);color:rgba(255,255,255,.035);letter-spacing:-.04em;pointer-events:none}
.dot{position:absolute;border-radius:50%;z-index:0;filter:blur(2px)}
.dot--a{width:340px;height:340px;background:radial-gradient(circle,rgba(0,102,255,.22),transparent 70%);top:30%;left:-6%}
.dot--b{width:260px;height:260px;background:radial-gradient(circle,rgba(255,114,80,.14),transparent 70%);bottom:6%;right:8%}
.brief__body{display:flex;flex-direction:column;gap:22px;margin-top:30px}

/* =============================================================
   03 · IDENTITY
   ============================================================= */
.identity>.wrap{display:flex;flex-direction:column}
.identity .scene-head{order:0}
.identity .sub-label:nth-of-type(3){order:1}
.identity .logos{order:2}
.identity .sub-label:nth-of-type(2){order:3}
.identity .type-grid{order:4}
.identity .sub-label:nth-of-type(1){order:5}
.identity .swatches{order:6}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.swatch{background:var(--bg-2);border-radius:18px;overflow:hidden;border:1px solid rgba(0,16,37,.06)}
.swatch__chip{height:150px;background:var(--c)}
.swatch__meta{padding:20px 20px 24px}
.swatch__hex{font:700 13px/1 var(--font-accent);letter-spacing:.08em;color:var(--c)}
.te .swatch__name{font:800 17px/1.2 var(--font-display);color:#001025;margin:8px 0 10px;letter-spacing:-.01em}
.swatch__desc{font:400 14px/1.55 var(--font-body);color:#6a7686}
@media (max-width:760px){.swatches{grid-template-columns:1fr}}

.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.type-card{background:var(--bg-2);border:1px solid rgba(0,16,37,.06);border-radius:18px;padding:26px 24px}
.type-card__role{font:700 11px/1 var(--font-accent);letter-spacing:.2em;text-transform:uppercase;color:#9aa7b8}
.type-spec{color:var(--ink);margin:16px 0 18px}
.te .type-spec--display{font:900 38px/.94 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;color:#001025;text-align:left}
.type-spec--body{font:500 24px/1.25 var(--font-body)}
.te .type-spec--caption{font:700 24px/1.1 var(--font-accent);letter-spacing:.02em;color:#001025;text-align:left;text-justify:auto}
.type-card__note{font:400 13.5px/1.5 var(--font-body);color:#6a7686}
.type-card__note b{color:var(--ink);font-weight:700}
.type-card__glyphs{font:400 13px/1 var(--font-body);color:#9aa7b8;margin-top:14px;letter-spacing:.02em}
@media (max-width:760px){.type-grid{grid-template-columns:1fr}}

.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.logo-cell{background:var(--bg-2);border:1px solid rgba(0,16,37,.06);border-radius:18px;overflow:hidden;text-align:center}
.logo-cell__art{height:150px;display:grid;place-items:center;padding:24px;background:#fff}
.logo-cell__mark{max-height:96px;width:auto;object-fit:contain}
.logo-cell__mark--sm{max-height:46px}
.logo-cell figcaption{font:700 11px/1 var(--font-accent);letter-spacing:.18em;text-transform:uppercase;color:#8693a4;padding:14px}
@media (max-width:760px){.logos{grid-template-columns:repeat(2,1fr)}}

/* =============================================================
   04 · CAMPAIGN — one-height horizontal vehicle rail
   ============================================================= */
.campaign .scene-head{margin-bottom:clamp(30px,4vw,52px)}
.filmstrip{display:flex;gap:12px;overflow-x:auto;padding:0 clamp(20px,4vw,64px) 18px;scroll-padding-inline:clamp(20px,4vw,64px);scroll-snap-type:x proximity;scrollbar-color:rgba(255,114,80,.5) transparent;scrollbar-width:thin}
.frame{position:relative;flex:0 0 auto;width:calc(clamp(250px,27vw,390px) * var(--frame-ratio));height:clamp(250px,27vw,390px);aspect-ratio:var(--frame-ratio);overflow:hidden;padding:0;border:0;border-radius:20px;background:var(--navy);scroll-snap-align:start;cursor:zoom-in}
.frame img{width:100%;height:100%;object-fit:cover;background:var(--navy)}
@media (max-width:760px){.filmstrip{gap:10px;padding-inline:20px}.frame{width:calc(clamp(220px,66vw,300px) * var(--frame-ratio));height:clamp(220px,66vw,300px);border-radius:16px}}

/* =============================================================
   05 · CONTENT STRATEGY
   ============================================================= */
.strategy__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(24px,4vw,48px);align-items:start}
.strategy__lead{grid-column:1/-1;max-width:70ch}
.strategy__lead .body{margin-top:18px}
.post-frame{grid-column:1;max-width:380px;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(0,16,37,.12);border:1px solid rgba(0,16,37,.05);transform-style:preserve-3d;transition:box-shadow .3s}
.post-frame img{width:100%;height:auto;display:block}
.strategy__note{grid-column:2;background:var(--navy);color:var(--text-light);border-radius:22px;padding:clamp(26px,3vw,38px);align-self:stretch}
.strategy__note .eyebrow{margin-bottom:16px}
.note__quote{font:900 clamp(24px,2.6vw,34px)/1.05 var(--font-display);color:#fff;letter-spacing:-.01em;margin-bottom:18px}
.strategy__note .body{color:#aebdd2}
@media (max-width:860px){.strategy__grid{grid-template-columns:1fr}.post-frame{grid-column:1;max-width:340px}.strategy__note{grid-column:1}}

/* =============================================================
   06 · TRACKING
   ============================================================= */
.tracking__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center}
.tracking__copy .body{margin-top:18px}
.tracking__art{border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(0,16,37,.18)}
.tracking__art img{width:100%;height:auto;display:block}
@media (max-width:860px){.tracking__grid{grid-template-columns:1fr}}

/* =============================================================
   07 · DELIVERY LOG
   ============================================================= */
.log-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.log-card{border-radius:16px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 16px 36px rgba(0,16,37,.12);transition:transform .4s var(--ease),box-shadow .4s}
.log-card img{width:100%;height:100%;object-fit:contain;background:#fff}
.log-card:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(0,16,37,.22)}
@media (max-width:980px){.log-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.log-grid{grid-template-columns:repeat(2,1fr)}}
.driver-notes{margin-top:36px;background:var(--navy);color:var(--text-light);border-radius:22px;padding:clamp(26px,3.5vw,40px)}
.driver-notes .eyebrow{margin-bottom:16px}
.notes-line{font:700 italic clamp(14px,1.3vw,17px)/1.7 var(--font-display);color:#fff;margin-bottom:18px;letter-spacing:-.005em}
.notes-line span{color:var(--orange)}
.notes-line span:nth-child(even){color:#fff}
.driver-notes .body{color:#aebdd2;max-width:86ch}

/* =============================================================
   08 · REACH — two-column card + text
   ============================================================= */
.reach__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.reach__art{border:0;border-radius:18px;overflow:hidden;background:transparent;box-shadow:none}
.reach__art img{width:100%;height:auto;display:block}
.reach__copy .body{margin-top:18px}
@media (max-width:860px){.reach__grid{grid-template-columns:1fr}}

/* =============================================================
   09 · BRAND VOICE
   ============================================================= */
.tagline{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tagline li{font:700 12px/1 var(--font-accent);letter-spacing:.16em;text-transform:uppercase;color:#cdd9ec;border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:9px 16px}
.tagline li::before{content:none!important}
.voice-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.voice-card{border-radius:20px;padding:clamp(26px,3vw,40px);transition:transform .35s var(--ease),border-color .35s var(--ease)}
.voice-card:hover{transform:translateY(-6px)}
.voice-card__head{font:800 16px/1 var(--font-display);letter-spacing:.01em;margin-bottom:22px;text-transform:uppercase}
.voice-card ul{list-style:none;display:flex;flex-direction:column;gap:16px;margin:0;padding:0}
.voice-card li{font:600 clamp(16px,1.5vw,20px)/1.35 var(--font-body)}
.voice-card li::before{content:none!important}
.voice-card--is{background:linear-gradient(180deg,rgba(255,114,80,.14),rgba(255,114,80,.04));border:1px solid rgba(255,114,80,.3)}
.voice-card--is:hover{border-color:rgba(255,114,80,.6)}
.voice-card--is .voice-card__head{color:var(--orange)}
.voice-card--is li{color:#fff}
.voice-card--isnot{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.voice-card--isnot .voice-card__head{color:#7d8aa0}
.voice-card--isnot li{color:#69788c;text-decoration:line-through;text-decoration-color:rgba(255,114,80,.5)}
@media (max-width:760px){.voice-grid{grid-template-columns:1fr}}

/* =============================================================
   10 · APP — bento: hero beside copy, 3 equal below
   ============================================================= */
.app__grid{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:auto auto;gap:28px clamp(24px,4vw,48px);align-items:center}
.app__copy{grid-column:1;grid-row:1}
.app__copy .body{margin-top:18px}
.app__hero{grid-column:2;grid-row:1;border:0;border-radius:18px;overflow:hidden;background:transparent;box-shadow:none}
.app__hero img{width:100%;height:auto;display:block}
.app-shots{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.app-shot{aspect-ratio:3/4;border:0;border-radius:18px;overflow:hidden;background:transparent;box-shadow:none}
.app-shot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media (max-width:860px){.app__grid{grid-template-columns:1fr}.app__hero{grid-column:1;grid-row:2}.app__copy{grid-row:1}.app-shots{grid-row:3}}
@media (max-width:560px){.app-shots{grid-template-columns:1fr}}

/* =============================================================
   11 · LIVE PRODUCT (real laptop mockup)
   ============================================================= */
.product__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,72px);align-items:center}
.laptop{border:0;border-radius:18px;overflow:hidden;background:transparent;box-shadow:none;isolation:isolate}
.laptop img{width:100%;height:auto;display:block;transform:scale(1.035);transform-origin:center}
.product__copy .body{margin:18px 0 0}
@media (max-width:860px){.product__grid{grid-template-columns:1fr}}

/* =============================================================
   FOOTER
   ============================================================= */
.te-footer{padding:clamp(72px,10vh,130px) 0 40px;background:linear-gradient(180deg,var(--navy-2),var(--navy))}
.te-footer__grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.lockup{display:flex;align-items:center;gap:14px}
.lockup--author{justify-content:flex-end;text-align:right}
.lockup--author .lockup__text{align-items:flex-end}
.lockup__symbol{width:36px;height:auto;flex:none;border-radius:8px}
.lockup__mark{width:52px;height:52px;border-radius:50%;flex:none}
.lockup__text{display:flex;flex-direction:column;gap:6px}
.lockup__name{font:900 20px/1 var(--font-display);color:#fff;letter-spacing:-.01em}
.lockup__badge{display:inline-block;border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:5px 13px;font:700 10.5px/1 var(--font-accent);letter-spacing:.06em;text-transform:uppercase;color:#cdd9ec;width:fit-content}
@media (max-width:640px){.te-footer__grid{grid-template-columns:1fr;gap:36px}.lockup--author{justify-content:flex-start;text-align:left}.lockup--author .lockup__text{align-items:flex-start}}
.te-footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:28px;font:400 13px/1.5 var(--font-body);color:#7d93b2}
.te-footer__bottom a{color:#aebdd2;transition:color .2s}
.te-footer__bottom a:hover{color:var(--orange)}

/* TWIST SURFACE MAP
   Identity: logo-cell, swatch, type-card
   Campaign: frame, post-frame, strategy-note
   Product proof: tracking-art, log-card, driver-notes, reach-art
   Voice/app/product: voice-card, app-hero, app-shot, laptop
   The selector is the structure map; each surface keeps its local colour and shape. */
.te-surface,
.logo-cell,.swatch,.type-card,.frame,.post-frame,.strategy__note,
.tracking__art,.log-card,.driver-notes,.reach__art,.voice-card,
.app__hero,.app-shot,.laptop{
  --surface-proximity:0;
  --surface-rx:0deg;
  --surface-ry:0deg;
}
.te-surface{
  position:relative;isolation:isolate;transform:perspective(1100px) rotateX(var(--surface-rx)) rotateY(var(--surface-ry)) !important;
  transform-style:preserve-3d;box-shadow:0 22px 58px rgba(0,16,37,calc(var(--surface-proximity) * .18));
  transition:transform .5s var(--ease),box-shadow .34s ease,border-color .3s ease !important
}
.scene--dark .te-surface{box-shadow:0 22px 62px rgba(0,102,255,calc(var(--surface-proximity) * .18))}
.te-surface::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:radial-gradient(280px circle at var(--surface-x,-400px) var(--surface-y,-400px),rgba(255,114,80,.16),transparent 68%);opacity:var(--surface-proximity);pointer-events:none}
.reach__art.te-surface,.app__hero.te-surface,.app-shot.te-surface,.laptop.te-surface{box-shadow:none!important}
.reach__art.te-surface::after,.app__hero.te-surface::after,.app-shot.te-surface::after,.laptop.te-surface::after{content:none}
.te-surface>*{position:relative;z-index:1}
.is-embedded .te-nav,.is-embedded .te-footer{display:none}
.te.is-embedded{min-height:100vh}
.is-embedded .cover{display:none}
.is-embedded .scene{padding:clamp(56px,8vh,96px) 0}
.is-embedded .brief__inner{display:grid;max-width:1180px;grid-template-columns:1fr;gap:clamp(24px,4vw,44px);align-items:start}
.is-embedded .brief__inner>.eyebrow{grid-column:auto;margin-bottom:-10px}
.is-embedded #briefTitle{max-width:24ch}
.is-embedded .brief__body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,38px);margin-top:0}
.is-embedded .brief__body .body{max-width:none;text-align:left}
.is-embedded .sub-label{margin:clamp(34px,5vw,58px) 0 18px}
.is-embedded .scene-head{margin-bottom:clamp(28px,4vw,46px)}
.is-embedded .driver-notes{margin-top:24px}
@media(max-width:900px){.is-embedded .brief__body{grid-template-columns:1fr}.is-embedded .brief__body{margin-top:4px}}
@media(max-width:760px){.is-embedded .brief__inner{grid-template-columns:1fr}.is-embedded .brief__inner>.eyebrow{grid-column:auto}.is-embedded .scene{padding:58px 0}}
.twist-presentation{position:relative;isolation:isolate}
.twist-presentation .te-chapters{transition:opacity .28s ease,transform .38s var(--ease)}
.twist-presentation:not(.is-in-view) .te-chapters{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(14px)}
@media(max-width:720px){.twist-presentation:not(.is-in-view) .te-chapters{transform:translateX(50%) translateY(14px)}}