/* ==========================================================================
   UNSTILL — Swiss minimal design system
   Paper white · ink black · one signal red · Archivo + Inter · square edges
   ========================================================================== */

:root {
  --paper:      #FFFFFF;
  --paper-2:    #F6F6F4;
  --ink:        #0A0A0A;
  --ink-2:      #5E5E5E;
  --ink-3:      #9B9B9B;
  --line:       #E4E4E4;
  --signal:     #FF3B21;
  --maxw:       1240px;
  --gut:        40px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img, video { display:block; max-width:100%; }
::selection { background:var(--signal); color:#fff; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
.rule { border-top:1px solid var(--line); }

/* ---------- type ---------- */
.label {
  font-family:"Archivo",sans-serif; font-weight:600;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.label--ink { color:var(--ink); }
.label--sig { color:var(--signal); }

h1, h2, h3, .h {
  font-family:"Archivo",sans-serif; font-weight:700;
  letter-spacing:-0.035em; line-height:1.0;
}
h1 { font-size:clamp(40px, 6.6vw, 88px); }
h2 { font-size:clamp(28px, 3.8vw, 54px); letter-spacing:-0.03em; line-height:1.05; }
h3 { font-size:clamp(19px, 1.7vw, 24px); letter-spacing:-0.02em; line-height:1.18; }

p { color:var(--ink-2); }
.lede { font-size:clamp(16px, 1.35vw, 19px); line-height:1.55; color:var(--ink-2); max-width:62ch; }
.lede strong, p strong { color:var(--ink); font-weight:600; }
a { color:inherit; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Archivo",sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:16px 26px; border-radius:2px; border:1px solid var(--ink);
  transition:background .16s ease, color .16s ease, border-color .16s ease;
  cursor:pointer; white-space:nowrap;
}
.btn-fill { background:var(--ink); color:var(--paper); }
.btn-fill:hover { background:var(--signal); border-color:var(--signal); }
.btn-line { background:transparent; color:var(--ink); }
.btn-line:hover { background:var(--ink); color:var(--paper); }
.btn .ar { font-size:14px; line-height:1; }

/* ---------- nav ---------- */
nav {
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* NB: .nav-in sits on the same element as .wrap — only set vertical padding
   here, or the shorthand wipes .wrap's horizontal gutter. */
.nav-in { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:20px; padding-bottom:20px; }
.brand {
  font-family:"Archivo",sans-serif; font-weight:800; font-size:19px;
  letter-spacing:.04em; text-decoration:none; color:var(--ink); line-height:1;
  display:inline-flex; align-items:center; gap:7px;
}
.brand .m { font-weight:500; color:var(--ink-3); letter-spacing:.02em; }
.brand .dot { width:6px; height:6px; background:var(--signal); border-radius:50%; margin-left:1px; }
.nav-mid { display:flex; gap:30px; align-items:center; }
.nav-mid a {
  font-family:"Archivo",sans-serif; font-weight:600; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--ink-3); padding:6px 0; position:relative; transition:color .16s ease;
}
.nav-mid a:hover { color:var(--ink); }
.nav-mid a.on { color:var(--ink); }
.nav-mid a.on::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--signal);
}
.nav-in .btn { padding:12px 20px; font-size:11px; }
.nav-in .btn[aria-current="page"] { background:var(--signal); border-color:var(--signal); }
.mobile-menu { display:none; }

/* ---------- page head ---------- */
.phead { padding:70px 0 52px; }
.phead .label { display:block; margin-bottom:20px; }
.phead h1 { max-width:16ch; }
.phead .lede { margin-top:24px; }

/* ---------- section scaffolding ---------- */
section { padding:88px 0; }
.sec-label { display:flex; align-items:baseline; gap:16px; margin-bottom:40px; flex-wrap:wrap; }
.sec-label h2 { flex:0 0 auto; }
.sec-label .note { font-size:13.5px; color:var(--ink-3); }

/* ==========================================================================
   WORK — compact top bar (keeps the film above the fold)
   ========================================================================== */
.topbar { padding:22px 0 18px; }
.topbar-in { display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.tagline {
  font-family:"Archivo",sans-serif; font-weight:700; letter-spacing:-0.025em;
  font-size:clamp(19px, 2.1vw, 27px); line-height:1.1; color:var(--ink);
}
.topbar .label { flex:0 0 auto; }

/* ==========================================================================
   WORK — project selector (single row, compact)
   ========================================================================== */
/* column count is set from JS (--n) so adding a case doesn't need a CSS edit;
   minmax(0,1fr) stops long names from blowing the grid out */
.works { display:grid; grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); gap:0; border-top:1px solid var(--line); }
.work-tab {
  position:relative; text-align:left; background:none; border:0; cursor:pointer;
  padding:15px 24px 17px 0; border-top:2px solid transparent; margin-top:-1px;
  font-family:inherit; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.work-tab + .work-tab { padding-left:24px; }
.work-tab::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line);
}
.work-tab:first-child::before { display:none; }
.work-tab .num {
  font-family:"Archivo",sans-serif; font-weight:700; font-size:11.5px;
  letter-spacing:.16em; color:var(--ink-3); flex:0 0 auto;
}
.work-tab .nm {
  font-family:"Archivo",sans-serif; font-weight:700; letter-spacing:-0.022em;
  font-size:clamp(15px, 1.5vw, 19px); line-height:1.15; color:var(--ink-3);
  transition:color .16s ease;
}
.work-tab .cat { font-size:11.5px; letter-spacing:.03em; color:var(--ink-3); }
.work-tab:hover .nm { color:var(--ink-2); }
.work-tab.on { border-top-color:var(--ink); }
.work-tab.on .num { color:var(--signal); }
.work-tab.on .nm { color:var(--ink); }
.work-tab.soon { cursor:default; }
.work-tab.soon:hover .nm { color:var(--ink-3); }

/* ==========================================================================
   PROJECT PANEL — film leads, copy follows
   ========================================================================== */
.panel { padding:22px 0 0; }

.hero-film { position:relative; border:1px solid var(--line); background:#0A0A0A; aspect-ratio:16/9; overflow:hidden; }
.hero-film video { width:100%; height:100%; object-fit:cover; }
.film-snd {
  position:absolute; top:12px; right:12px; z-index:5;
  width:42px; height:42px; padding:0; border:1px solid var(--ink); border-radius:2px;
  display:grid; place-items:center; cursor:pointer;
  color:var(--ink); background:rgba(255,255,255,.94);
  box-shadow:0 6px 18px rgba(10,10,10,.14);
  transition:background .16s ease, color .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.film-snd:hover, .film-snd:focus-visible { color:var(--paper); background:var(--ink); outline:none; }
.film-snd.is-on { color:var(--paper); background:var(--signal); border-color:var(--signal); }
.film-snd svg { width:19px; height:19px; display:block; pointer-events:none; }
.film-snd .snd-on { display:none; }
.film-snd.is-on .snd-off { display:none; }
.film-snd.is-on .snd-on { display:block; }

.soon-film {
  aspect-ratio:16/9; border:1px dashed var(--line); display:flex;
  align-items:center; justify-content:center; text-align:center; padding:40px;
}
.soon-film .in { max-width:56ch; display:flex; flex-direction:column; align-items:center; gap:15px; }
.soon-film h3 { max-width:22ch; }
.soon-film p { font-size:14.5px; }

.panel-top {
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px;
  margin-top:52px; margin-bottom:26px; flex-wrap:wrap;
}
.panel-top h2 { max-width:14ch; }
.panel-meta { font-size:12.5px; color:var(--ink-3); letter-spacing:.04em; text-align:right; }

.compare-grid {
  position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; border:1px solid var(--line); background:var(--line);
}
.compare-card { min-width:0; margin:0; background:var(--paper); }
/* 1:1 — the campaign key visuals are composed square; a 4:3 frame either
   crops the product (cover) or letterboxes it (contain). Both panels share
   one ratio so the before/after reads as a fair comparison. */
/* 4:3 — before 實拍照(1200x900) 與 after 主視覺(2000x1500) 皆為原生 4:3，
   框與圖同比例，不裁切也不留白。新增 case 的 key visual 一律 4:3。 */
.compare-media { position:relative; aspect-ratio:4/3; overflow:hidden; background:#E8E8E5; }
.compare-media img { width:100%; height:100%; object-fit:cover; }
.compare-tag {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:8px 10px; color:var(--ink); background:rgba(255,255,255,.94);
  border:1px solid var(--ink);
  font-family:"Archivo",sans-serif; font-size:9.5px; font-weight:700;
  letter-spacing:.14em; line-height:1; text-transform:uppercase;
}
.compare-tag--result { color:var(--paper); background:var(--signal); border-color:var(--signal); }
.compare-card figcaption {
  min-height:54px; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:"Archivo",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.compare-card figcaption small {
  color:var(--ink-3); font-family:"Inter",sans-serif;
  font-size:9.5px; font-weight:500; letter-spacing:.08em;
}
.compare-arrow {
  position:absolute; left:50%; top:50%; z-index:3;
  width:44px; height:44px; transform:translate(-50%,-50%);
  display:grid; place-items:center; color:var(--paper); background:var(--ink);
  border:1px solid var(--paper); font-size:20px; line-height:1;
}

/* ==========================================================================
   CAROUSEL
   ========================================================================== */
.car-block { --PH: min(470px, 45vw); padding-top:64px; }
.car { outline:none; }
.car-stage { position:relative; }
.car-viewport { overflow:hidden; padding:26px 0; margin:-26px 0; touch-action:pan-y; }
.car-track {
  position:relative; display:flex; align-items:center; gap:24px; height:var(--PH);
  transition:transform .62s cubic-bezier(.22,.68,.24,1); will-change:transform;
}
.car-track.no-anim, .car-track.no-anim .car-item { transition:none !important; }
.car-item {
  flex:0 0 auto; height:100%; padding:0; background:none; cursor:pointer;
  border:1px solid var(--line); overflow:hidden; border-radius:0;
  -webkit-tap-highlight-color:transparent;
  transform:scale(.84); opacity:.3; filter:grayscale(.35);
  transition:transform .62s cubic-bezier(.22,.68,.24,1), opacity .45s ease,
             filter .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.car-item img, .car-item video { width:100%; height:100%; object-fit:cover; background:#fff; }
.car-item.is-video, .car-item.is-video video { background:#0A0A0A; }
.car-item:hover { opacity:.55; }
.car-item.is-active {
  transform:scale(1); opacity:1; filter:none; cursor:default;
  border-color:var(--ink); box-shadow:0 30px 60px -34px rgba(10,10,10,.45);
}

.car-arrow {
  position:absolute; top:50%; margin-top:-24px; z-index:3;
  width:48px; height:48px; border-radius:2px; padding:0;
  background:var(--paper); border:1px solid var(--ink); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.car-arrow:hover { background:var(--ink); color:var(--paper); }
.car-arrow.prev { left:0; }
.car-arrow.next { right:0; }
.car-arrow svg { width:17px; height:17px; }

.car-foot {
  position:relative; z-index:4;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:26px; padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap;
}
.car-cap { font-size:13px; color:var(--ink-3); letter-spacing:.02em; }
.car-cap b {
  font-family:"Archivo",sans-serif; font-weight:700; color:var(--ink);
  letter-spacing:.01em;
}
.car-nav-right { display:flex; align-items:center; gap:20px; }
.car-count { font-family:"Archivo",sans-serif; font-weight:600; font-size:12px; letter-spacing:.1em; color:var(--ink-3); }
.car-count b { color:var(--ink); }
.car-dots { display:flex; gap:5px; }
.car-dot {
  width:16px; height:2px; padding:0; border:0; cursor:pointer; border-radius:0;
  background:var(--line); transition:background .3s ease;
}
.car-dot:hover { background:var(--ink-3); }
.car-dot.on { background:var(--signal); }

/* ==========================================================================
   STATS (why page)
   ========================================================================== */
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); }
.stat { padding:34px 26px 38px 0; border-left:1px solid var(--line); padding-left:26px; }
.stat:first-child { border-left:0; padding-left:0; }
.stat .big {
  font-family:"Archivo",sans-serif; font-weight:700; font-size:clamp(38px,4.2vw,58px);
  letter-spacing:-0.04em; line-height:1; color:var(--ink);
}
.stat .lab { font-size:14px; color:var(--ink-2); margin-top:16px; line-height:1.5; max-width:26ch; }
.stat .src { font-size:11px; color:var(--ink-3); margin-top:12px; letter-spacing:.03em; }

.gap-band { background:var(--ink); color:var(--paper); padding:clamp(38px,5vw,58px) clamp(28px,4vw,54px); margin-top:0; }
.gap-band .in { display:flex; gap:34px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.gap-band h3 { color:var(--paper); max-width:22ch; }
.gap-band p { color:#B9B9B9; max-width:52ch; font-size:15px; margin-top:14px; }
.gap-band .hl { color:var(--signal); font-weight:600; }
.gap-band .btn { border-color:var(--paper); background:var(--paper); color:var(--ink); }
.gap-band .btn:hover { background:var(--signal); border-color:var(--signal); color:var(--paper); }

.sources { font-size:11.5px; color:var(--ink-3); line-height:1.9; margin-top:26px; }
.sources a { color:var(--ink-3); }
.sources a:hover { color:var(--ink); }

/* ==========================================================================
   VISUAL STORY (why page)
   ========================================================================== */
.why-visual-section,
.process-section { padding-top:0; }
.real-transform {
  display:grid; grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);
  align-items:center;
}
.transform-frame { min-width:0; margin:0; }
.transform-image {
  aspect-ratio:4 / 3; overflow:hidden; position:relative; background:#ECECE9;
}
.transform-image img { width:100%; height:100%; object-fit:cover; display:block; }
.transform-image--contain { background:#F2DFCA; }
.transform-image--contain img { object-fit:contain; }
.transform-frame--before .transform-image {
  width:88%; margin-left:0; box-shadow:18px 18px 0 #EFEFEC;
}
.transform-frame--after .transform-image { box-shadow:0 24px 54px -34px rgba(10,10,10,.7); }
.transform-label {
  position:absolute; left:14px; top:14px; padding:9px 11px;
  background:var(--paper); color:var(--ink); font-family:"Archivo",sans-serif;
  font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.transform-frame--after .transform-label { background:var(--signal); color:#fff; }
.transform-frame figcaption {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-top:18px;
}
.transform-frame figcaption span {
  font-family:"Archivo",sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.transform-frame figcaption strong {
  font-family:"Archivo",sans-serif; font-size:14px; text-align:right;
}
.transform-arrow { text-align:center; color:var(--signal); }
.transform-arrow span { display:block; font-size:42px; font-weight:300; line-height:1; }
.transform-arrow small {
  display:block; margin-top:10px; font-family:"Archivo",sans-serif; font-size:8px;
  font-weight:700; letter-spacing:.18em; color:var(--ink-3);
}
.campaign-expansion {
  display:grid; grid-template-columns:minmax(190px,.62fr) minmax(0,1.7fr);
  gap:14px; margin-top:68px; padding:14px; background:var(--ink);
}
.expansion-film,
.expansion-posters { min-width:0; position:relative; overflow:hidden; }
.expansion-film { aspect-ratio:9 / 16; max-height:540px; justify-self:center; }
.expansion-film video { width:100%; height:100%; display:block; object-fit:cover; }
.campaign-expansion > div > span {
  position:absolute; left:14px; bottom:14px; z-index:2; padding:9px 11px;
  background:var(--paper); color:var(--ink); font-family:"Archivo",sans-serif;
  font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.expansion-posters {
  min-height:100%; display:flex; align-items:center; justify-content:center;
  padding:30px 12px 46px;
}
.expansion-posters figure {
  width:20%; height:80%; margin:0 -5px; overflow:hidden; box-shadow:0 18px 28px rgba(0,0,0,.3);
}
.expansion-posters figure:nth-child(1) { transform:rotate(-7deg); }
.expansion-posters figure:nth-child(2) { transform:translateY(-7px) rotate(-3deg); }
.expansion-posters figure:nth-child(3) { position:relative; z-index:2; height:88%; }
.expansion-posters figure:nth-child(4) { transform:translateY(-7px) rotate(3deg); }
.expansion-posters figure:nth-child(5) { transform:rotate(7deg); }
.expansion-posters img { width:100%; height:100%; display:block; object-fit:cover; }
.expansion-note {
  margin:12px 0 0 auto; max-width:max-content; font-size:11px;
  color:var(--ink-3);
}
.why-film-showcase {
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  align-items:stretch; margin-top:0; background:var(--ink); color:var(--paper);
}
.why-film-showcase video {
  width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:16 / 9;
}
.why-film-copy {
  padding:clamp(34px,4vw,58px); display:flex; flex-direction:column;
  justify-content:flex-end; border-left:1px solid #333;
}
.why-film-copy h2 { color:var(--paper); margin-top:18px; }
.why-film-copy p { color:#AFAFAF; margin-top:16px; max-width:26ch; }
.why-car-block { --PH:min(520px,48vw); }
.why-outcomes { display:grid; grid-template-columns:repeat(4,1fr); margin-top:28px; }
.why-outcomes--three { grid-template-columns:repeat(3,1fr); margin-top:14px; }
.why-outcomes article {
  padding:28px 0 30px; border-top:1px solid var(--line); margin-right:34px;
}
.why-outcomes .outcome-no {
  font-family:"Archivo",sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.15em; color:var(--signal);
}
.why-outcomes strong {
  display:block; font-family:"Archivo",sans-serif; font-size:clamp(25px,2.6vw,34px);
  line-height:1; margin-top:28px;
}
.why-outcomes p { font-size:13.5px; margin-top:10px; }
.why-outcome--signal {
  background:var(--signal); border:0 !important; color:#fff;
  margin-right:0 !important; padding:28px 26px 30px !important;
}
.why-outcome--signal .outcome-no,
.why-outcome--signal p { color:#fff; }
.proof-strip {
  display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line);
}
.proof-strip > div { padding:34px 28px 38px; border-left:1px solid var(--line); }
.proof-strip > div:first-child { border-left:0; padding-left:0; }
.proof-strip strong {
  display:block; font-family:"Archivo",sans-serif; font-weight:700;
  font-size:clamp(38px,4.7vw,64px); letter-spacing:-.05em; line-height:1;
}
.proof-strip span { display:block; font-size:13.5px; color:var(--ink-3); margin-top:14px; max-width:24ch; }
.source-drawer { border-bottom:0; }
.source-drawer summary { font-size:12px; color:var(--ink-3); padding:18px 0; }
.source-drawer .sources { margin-top:0; padding-bottom:12px; }
.why-summary {
  display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(34px,6vw,90px);
  align-items:end;
}
.why-summary h2 { margin-top:14px; max-width:18ch; }
.why-summary-tags { display:grid; grid-template-columns:1fr 1fr; }
.why-summary-tags span {
  padding:18px 16px; border:1px solid var(--line); font-family:"Archivo",sans-serif;
  font-weight:600; font-size:12px; letter-spacing:.01em;
}
.why-summary-tags span:nth-child(even) { border-left:0; }
.why-summary-tags span:nth-child(n+3) { border-top:0; }

/* ==========================================================================
   STEPS / DELIVERABLES / FAQ (start page)
   ========================================================================== */
.story-intro { display:flex; align-items:center; gap:24px; margin-bottom:22px; }
.story-intro-line { height:1px; background:var(--signal); flex:1; }
.process-slider {
  border:1px solid var(--ink); background:var(--paper); outline:none;
}
.process-slider:focus-visible { box-shadow:0 0 0 3px rgba(255,59,33,.2); }
.process-tabs {
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  border-bottom:1px solid var(--ink);
}
.process-tabs button {
  min-width:0; min-height:72px; padding:14px 16px; border:0;
  border-left:1px solid var(--line); background:var(--paper); color:var(--ink-3);
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  cursor:pointer; text-align:left;
}
.process-tabs button:first-child { border-left:0; }
.process-tabs button b {
  font-family:"Archivo",sans-serif; font-size:12px; letter-spacing:.12em;
  color:var(--signal);
}
.process-tabs button span {
  font-family:"Archivo",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
}
.process-tabs button.is-active { background:var(--ink); color:var(--paper); }
.process-tabs button:focus-visible { position:relative; z-index:2; outline:2px solid var(--signal); outline-offset:-3px; }
.process-slides { min-height:0; }
.process-slide {
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);
  align-items:stretch; min-height:460px;
}
.process-slide[hidden] { display:none; }
.process-slide .story-media {
  min-height:0; aspect-ratio:auto; border-right:1px solid var(--ink);
}
.process-slide .story-media--split { display:grid; }
.process-slide .story-media--review,
.process-slide .story-media--refine,
.process-slide .story-media--delivery { aspect-ratio:16 / 9; }
.process-copy {
  padding:clamp(34px,5vw,70px) clamp(28px,4vw,56px);
  display:flex; flex-direction:column; justify-content:center;
}
.process-copy h2 { margin-top:14px; font-size:clamp(34px,4vw,58px); }
#processStep2 .process-copy h2 { font-size:clamp(34px,3vw,42px); }
.process-copy p { margin-top:18px; max-width:28ch; font-size:15px; }
.process-controls {
  min-height:62px; border-top:1px solid var(--ink); display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center;
}
.process-controls button {
  min-height:61px; border:0; background:transparent; padding:0 22px;
  font-family:"Archivo",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; cursor:pointer;
}
.process-controls button:hover,
.process-controls button:focus-visible { color:var(--signal); outline:none; }
.process-prev { text-align:left; }
.process-next { text-align:right; }
.process-count {
  font-family:"Archivo",sans-serif; font-size:11px; letter-spacing:.13em;
  color:var(--ink-3);
}
.process-count b { color:var(--signal); }
.story-media { position:relative; overflow:hidden; background:#ECECE9; }
.story-media img,
.story-media video { width:100%; height:100%; display:block; object-fit:cover; }
.story-media--split { aspect-ratio:5 / 3; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.story-media--split figure { min-width:0; margin:0; position:relative; overflow:hidden; }
#processStep1 { min-height:0; }
#processStep1 .story-media--split {
  align-self:start;
  aspect-ratio:8 / 3;
}
#processStep1 .story-media--split figure:last-child img {
  object-fit:contain;
  background:#101112;
}
.story-media--split figcaption {
  position:absolute; left:10px; bottom:10px; padding:7px 9px;
  background:rgba(255,255,255,.94); font-family:"Archivo",sans-serif;
  font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.story-media--type {
  min-height:260px; padding:clamp(24px,4vw,54px);
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.approval-flow {
  width:min(100%,760px);
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:clamp(8px,1.6vw,20px);
}
.approval-step {
  min-width:0; min-height:clamp(132px,16vw,188px); padding:clamp(14px,2vw,22px);
  border:1px solid #3A3A3A;
  display:flex; flex-direction:column; justify-content:space-between;
}
.approval-step span {
  font-family:"Archivo",sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.14em; color:var(--signal);
}
.approval-step strong {
  font-family:"Archivo",sans-serif; font-size:clamp(16px,2vw,25px);
  line-height:1.05; letter-spacing:-.025em; text-transform:uppercase;
}
.approval-step--deposit { border-color:var(--signal); }
.approval-step--deposit strong { color:var(--signal); }
.approval-arrow {
  font-size:clamp(18px,2.2vw,28px); line-height:1; color:#777;
}
.story-media--review {
  aspect-ratio:16 / 9; background:var(--ink);
}
.story-media--review > video { object-fit:cover; }
.story-media--refine { aspect-ratio:16 / 9; background:var(--ink); }
.story-media--refine img { object-position:center; }
.refine-line {
  position:absolute; display:block; border-color:var(--signal);
  border-style:solid;
}
.refine-line--a {
  width:42%; height:34%; right:10%; top:18%;
  border-width:2px 2px 0 0;
}
.refine-line--b {
  width:28%; height:28%; right:12%; bottom:15%;
  border-width:0 2px 2px 0;
}
.refine-stamp {
  position:absolute; left:22px; bottom:20px; width:88px; height:88px;
  border-radius:50%; background:var(--signal); color:#fff; display:flex;
  flex-direction:column; align-items:center; justify-content:center;
  font-family:"Archivo",sans-serif; font-size:29px; font-weight:700;
}
.refine-stamp small {
  font-size:7px; letter-spacing:.12em; text-transform:uppercase; margin-top:3px;
}
.story-media--delivery {
  aspect-ratio:16 / 9; background:var(--ink); touch-action:pan-y; outline:none;
}
.story-media--delivery:focus-visible { box-shadow:inset 0 0 0 2px var(--signal); }
.delivery-stage {
  position:absolute; inset:28px 74px 42px; display:block;
}
.delivery-poster {
  position:absolute; inset:0; width:100%; height:100%; min-width:0; margin:0;
  display:grid; place-items:center;
}
.delivery-poster[hidden] { display:none; }
.story-media--delivery .delivery-poster img {
  position:absolute; inset:0; margin:auto;
  width:auto; height:auto; max-width:100%; max-height:100%;
  object-fit:contain; object-position:center;
}
.delivery-arrow {
  position:absolute; top:50%; z-index:3; width:46px; height:46px;
  transform:translateY(-50%); border:1px solid var(--paper);
  background:var(--paper); color:var(--ink); cursor:pointer;
  font-family:"Archivo",sans-serif; font-size:18px;
}
.delivery-arrow:hover,
.delivery-arrow:focus-visible {
  color:var(--paper); background:var(--signal); border-color:var(--signal); outline:none;
}
.delivery-prev { left:16px; }
.delivery-next { right:16px; }
.delivery-count {
  position:absolute; left:50%; bottom:14px; z-index:3;
  transform:translateX(-50%); padding:6px 9px;
  color:#AFAFAF; background:rgba(10,10,10,.82);
  font-family:"Archivo",sans-serif; font-size:9px; letter-spacing:.12em;
}
.delivery-count b { color:var(--signal); }
.delivery-badge {
  position:absolute; right:18px; top:18px; padding:9px 11px;
  background:var(--signal); color:#fff; font-family:"Archivo",sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.story-no {
  font-family:"Archivo",sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
}
.story-addons {
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  margin-top:46px; padding:20px 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.story-addons p { font-size:13px; color:var(--ink-3); text-align:right; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }
.step { padding:34px 26px 40px 26px; border-left:1px solid var(--line); }
.step:first-child { border-left:0; padding-left:0; }
.step .n {
  font-family:"Archivo",sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.16em; color:var(--signal);
}
.step h3 { margin-top:14px; }
.step p { font-size:14.5px; margin-top:12px; }
.step-ico { margin-bottom:20px; color:var(--ink); }
.btn-sub { font-size:12.5px; color:var(--ink-3); margin-top:10px; }
.topbar .pitch { font-size:15px; color:var(--ink-2); margin-top:2px; max-width:640px; }
.topbar .pitch-spec { font-family:"Archivo",sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:10px; }
/* mobile sticky CTA */
.msticky { display:none; }
@media (max-width:760px) {
  .msticky { display:flex; align-items:center; justify-content:center; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--ink); color:#fff; text-decoration:none;
    font-family:"Archivo",sans-serif; font-weight:700; font-size:14px; letter-spacing:.02em;
    padding:16px 20px; border-top:2px solid var(--signal); }
  body { padding-bottom:54px; }
}
.step-ico svg { height:56px; width:auto; display:block; }

.dgrid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.dcard { padding:30px 28px 34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.dcard h3 { font-size:19px; }
.dcard p { font-size:14px; margin-top:10px; }

/* delivery strip (start page) */
.delivery-strip {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
}
.delivery-strip > div { padding:30px 24px 34px; border-left:1px solid var(--line); }
.delivery-strip > div:first-child { border-left:0; padding-left:0; }
.delivery-strip strong {
  display:block; font-family:"Archivo",sans-serif; font-weight:700;
  font-size:clamp(34px,4vw,54px); letter-spacing:-.04em; line-height:1;
}
.delivery-strip span { display:block; font-size:13px; color:var(--ink-3); margin-top:12px; }

.faq { border-top:1px solid var(--ink); }
details { border-bottom:1px solid var(--line); }
summary {
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:22px; padding:24px 0;
  font-family:"Archivo",sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.01em;
}
summary::-webkit-details-marker { display:none; }
summary .m { color:var(--signal); font-size:20px; font-weight:400; line-height:1; flex:0 0 auto; transition:transform .2s ease; }
details[open] summary .m { transform:rotate(45deg); }
details .a { padding:0 0 26px; color:var(--ink-2); font-size:14.5px; max-width:64ch; }

.cta-band { border:1px solid var(--ink); padding:clamp(36px,5vw,60px); }
.cta-band h2 { max-width:16ch; }
.cta-band .lede { margin-top:20px; }
.send-list { list-style:none; margin-top:34px; border-top:1px solid var(--line); }
.send-list li { display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); }
.send-list .n { font-family:"Archivo",sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em; color:var(--signal); flex:0 0 34px; padding-top:3px; }
.send-list .ico { flex:0 0 24px; padding-top:1px; color:var(--ink-2); }
.send-list .ico svg { width:20px; height:20px; display:block; }
.send-list .txt strong { display:block; font-family:"Archivo",sans-serif; font-weight:700; font-size:15.5px; letter-spacing:-0.01em; }
.send-list .txt small { display:block; color:var(--ink-3); font-size:13px; margin-top:5px; line-height:1.55; }
.cta-foot { margin-top:30px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.cta-foot .free { font-family:"Archivo",sans-serif; font-weight:700; font-size:16px; letter-spacing:-0.01em; }
.cta-foot .free span { color:var(--ink-3); font-weight:500; display:block; font-size:13.5px; letter-spacing:0; margin-top:5px; font-family:"Inter",sans-serif; }

/* ---------- footer ---------- */
footer { border-top:1px solid var(--line); padding:44px 0 60px; margin-top:20px; }
.foot-in { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.foot-brand { font-family:"Archivo",sans-serif; font-weight:800; font-size:16px; letter-spacing:.04em; }
.foot-brand .m { font-weight:500; color:var(--ink-3); margin-left:6px; }
.foot-in .col { font-size:13px; color:var(--ink-3); }
.foot-in .col a { display:block; text-decoration:none; color:var(--ink-3); padding:3px 0; }
.foot-in .col a:hover { color:var(--ink); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px) {
  .stats { grid-template-columns:repeat(2,1fr); }
  .stat { padding-right:20px; }
  .stat:nth-child(3) { border-left:0; padding-left:0; }
  .real-transform { grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr); }
  .campaign-expansion { grid-template-columns:minmax(160px,.55fr) minmax(0,1.45fr); }
  .why-film-showcase { grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr); }
  .why-outcomes--three { grid-template-columns:repeat(3,1fr); }
  .process-slide { grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr); min-height:400px; }
  .process-copy { padding:34px 28px; }
  .process-tabs button { padding-left:11px; padding-right:11px; }
  .steps { grid-template-columns:1fr; }
  .step { border-left:0; padding-left:0; padding-right:0; border-top:1px solid var(--line); }
  .step:first-child { border-top:0; }
}
@media (max-width:760px) {
  :root { --gut:22px; }
  .nav-mid { display:none; }
  .nav-in > .btn { display:none; }
  .mobile-menu { display:block; margin-left:auto; }
  .mobile-menu summary {
    width:50px; height:50px; padding:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    cursor:pointer; list-style:none; background:var(--ink); border:1px solid var(--ink);
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-menu summary::-webkit-details-marker { display:none; }
  .mobile-menu summary::marker { content:""; }
  .mobile-menu summary span {
    width:20px; height:2px; display:block; background:var(--paper);
    transition:transform .18s ease, opacity .18s ease;
  }
  .mobile-menu[open] summary span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .mobile-menu[open] summary span:nth-child(2) { opacity:0; }
  .mobile-menu[open] summary span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .mobile-menu-panel {
    position:absolute; top:calc(100% - 10px); right:var(--gut); z-index:50;
    width:min(270px,calc(100vw - (var(--gut) * 2)));
    padding:10px; background:var(--paper); border:1px solid var(--ink);
    box-shadow:0 18px 40px rgba(10,10,10,.18);
  }
  .mobile-menu-panel a {
    min-height:50px; padding:0 15px;
    display:flex; align-items:center; justify-content:space-between;
    font-family:"Archivo",sans-serif; font-weight:700; font-size:12px;
    letter-spacing:.11em; text-transform:uppercase; text-decoration:none;
    color:var(--ink); border-bottom:1px solid var(--line);
  }
  .mobile-menu-panel a::after { content:"→"; font-size:15px; font-weight:500; }
  .mobile-menu-panel a.on { color:var(--signal); }
  .mobile-menu-panel a.preview {
    margin-top:10px; color:var(--paper); background:var(--ink); border-bottom:0;
  }
  .mobile-menu-panel a.preview.on { color:var(--paper); background:var(--signal); }
  .car-block { --PH: min(470px, 66vw); }
  .car-arrow { width:42px; height:42px; margin-top:-21px; }
  .car-foot { justify-content:center; }
  /* Keep all three projects visible at once on mobile. Each tab gets an equal
     column and stacks its number above the name so no item is clipped. */
  .works { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
  .work-tab {
    min-width:0; padding:12px 10px 14px !important;
    flex-direction:column; align-items:flex-start; align-self:stretch;
    justify-content:flex-start; gap:7px; flex-wrap:nowrap;
  }
  .work-tab:first-child { padding-left:0 !important; }
  .work-tab:last-child { padding-right:0 !important; }
  .work-tab + .work-tab { padding-left:10px !important; }
  .work-tab .nm {
    max-width:100%; font-size:clamp(12px,3.5vw,14px);
    line-height:1.15; white-space:normal; overflow-wrap:normal;
  }
  .work-tab .cat { display:none; }
  .topbar { padding:16px 0 12px; }
  .panel-top { margin-top:36px; }
  .compare-grid { grid-template-columns:1fr; }
  .compare-arrow { transform:translate(-50%,-50%) rotate(90deg); }
  .compare-card figcaption { min-height:50px; padding:12px 14px; }
  .dgrid { grid-template-columns:1fr; }
  .delivery-strip { grid-template-columns:repeat(2,1fr); }
  .delivery-strip > div:nth-child(odd) { border-left:0; padding-left:0; }
  .delivery-strip > div:nth-child(n+3) { border-top:1px solid var(--line); }
  .real-transform { grid-template-columns:1fr; gap:22px; }
  .transform-frame--before .transform-image { width:100%; box-shadow:none; }
  .transform-arrow { min-height:44px; }
  .transform-arrow span { transform:rotate(90deg); }
  .transform-arrow small { margin-top:5px; }
  .campaign-expansion { grid-template-columns:1fr; margin-top:46px; }
  .why-film-showcase { grid-template-columns:1fr; margin-top:0; }
  .why-film-copy { min-height:190px; border-left:0; border-top:1px solid #333; }
  .why-car-block { --PH:min(430px,74vw); }
  .expansion-film { width:min(68%,280px); max-height:none; }
  .expansion-posters { min-height:300px; }
  .expansion-note { max-width:34ch; text-align:right; }
  .why-outcomes--three { grid-template-columns:1fr; margin-top:20px; }
  .why-outcomes article { margin-right:0; padding:22px 0 24px; }
  .proof-strip { grid-template-columns:1fr; }
  .proof-strip > div { border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .proof-strip > div:first-child { border-top:0; }
  .why-summary { grid-template-columns:1fr; }
  .process-slider { touch-action:pan-y; }
  .process-tabs button { min-height:58px; justify-content:center; padding:10px 6px; }
  .process-tabs button span { display:none; }
  .process-slide { grid-template-columns:1fr; min-height:0; }
  .process-slide .story-media {
    aspect-ratio:16 / 10; min-height:0; border-right:0; border-bottom:1px solid var(--ink);
  }
  /* Keep the finished direction intact on phones. The smaller 4:3 source
     photo sits behind it and gives up only the overlapping portion. */
  .process-slide .story-media--split {
    display:grid; grid-template-columns:1fr; isolation:auto; aspect-ratio:auto;
    height:auto; min-height:0;
  }
  #processStep1 .story-media--split {
    aspect-ratio:auto; height:auto; overflow:visible;
  }
  .process-slide .story-media--split figure {
    position:relative; top:auto; margin:0; aspect-ratio:4 / 3;
    transform:none; background:#ECECE9;
  }
  .process-slide .story-media--split figure:first-child {
    left:auto; z-index:1; width:100%;
  }
  .process-slide .story-media--split figure:last-child {
    right:auto; z-index:2; width:100%;
    border-left:0; border-top:2px solid var(--paper);
    box-shadow:none;
  }
  .process-slide .story-media--split img { object-fit:cover; }
  #processStep1 .story-media--split figure:last-child img { object-fit:contain; }
  .process-slide .story-media--type {
    aspect-ratio:auto; height:176px; min-height:176px; padding:18px 14px;
  }
  .story-media--type .approval-flow { gap:5px; }
  .story-media--type .approval-step {
    min-height:124px; padding:10px 7px;
  }
  .story-media--type .approval-step span { font-size:7px; }
  .story-media--type .approval-step strong {
    font-size:12px; overflow-wrap:anywhere;
  }
  .story-media--type .approval-arrow { font-size:14px; }
  .process-slide .story-media--review,
  .process-slide .story-media--refine { aspect-ratio:16 / 9; }
  .process-slide .story-media--delivery { aspect-ratio:4 / 3; }
  .process-copy { min-height:205px; padding:30px 24px 34px; }
  #processStep2 .process-copy { min-height:178px; padding-top:24px; padding-bottom:26px; }
  .process-copy h2 { font-size:34px; margin-top:10px; }
  .process-copy p { margin-top:12px; font-size:14px; }
  .process-controls button { padding:0 16px; }
  .process-controls button span { display:none; }
  .delivery-stage { inset:20px 50px 34px; }
  .delivery-arrow { width:40px; height:40px; }
  .delivery-prev { left:8px; }
  .delivery-next { right:8px; }
  .delivery-badge { top:10px; right:10px; }
  .delivery-count { bottom:9px; }
  .story-addons { align-items:flex-start; flex-direction:column; }
  .story-addons p { text-align:left; }
  .panel-meta { text-align:left; }
  section { padding:64px 0; }
  .phead { padding:48px 0 40px; }
}

/* the longer "UNSTILL Motion" wordmark pushes the nav CTA off-screen on the
   narrowest phones — scale both down so the bar still fits at 360px */
@media (max-width:440px) {
  .brand { font-size:15.5px; gap:5px; }
  .brand .dot { width:5px; height:5px; }
  .nav-in { gap:12px; }
  .nav-in .btn { padding:11px 14px; font-size:10px; letter-spacing:.08em; }
}