/* =====================================================================
   Think Creative, home page prototype
   One stylesheet, ordered: tokens, base, type, components, then one
   block per sheet (scene) in page order. Animation start states live
   under .js and are cancelled under prefers-reduced-motion.
   ===================================================================== */

/* ---------- Fonts (self-hosted, latin subsets) ---------- */
@font-face { font-family: "Instrument Serif"; src: url(../fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url(../fonts/geist-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(../fonts/geist-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
/* Palette: the old site's warm set (bone, warm ink, espresso, terracotta,
   slate), adapted for the drawing-set idea. Channels are kept separately so
   translucent tints follow the palette. */
:root {
  --paper-rgb: 244 238 227;   --paper: rgb(var(--paper-rgb));      /* bone */
  --paper-2: #ECE3D4;
  --paper-3: #DED3C1;
  --sheet-rgb: 251 248 242;   --sheet: rgb(var(--sheet-rgb));      /* warm white */
  --ink-rgb: 36 32 28;        --ink: rgb(var(--ink-rgb));          /* warm ink */
  --ink-2: #4F463E;
  --ink-3: #6B6056;
  --rule: rgb(var(--ink-rgb) / .16);
  --rule-2: rgb(var(--ink-rgb) / .32);
  --navy: #233E75;            /* the logo's own blue */
  --night-rgb: 43 35 30;      --night: rgb(var(--night-rgb));      /* espresso, for dark sheets */
  --night-2: #3E332C;
  --night-deep: #1E1814;
  --night-rule: rgb(var(--paper-rgb) / .16);
  --red-rgb: 166 76 51;       --red: rgb(var(--red-rgb));          /* terracotta: marked-up things only */
  --red-hover: #8E3F2E;
  --red-deep: #94432D;
  --red-2: #E08A6B;
  --red-tint: #EBCDBF;
  --on-red: #FBF8F2;
  --draft: #3F5D6E;           /* slate: drawing lines */
  --line: var(--draft);
  --slate-deep: #2F4757;
  --err: #94432D; --err-bg: #F3DDD3; --err-ink: #5E2A1C;

  /* Drawn room */
  --glass: #B8C5CD;
  --av: #2B231E;

  --f-display: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --pad: clamp(18px, 3.3vw, 56px);
  --gap: clamp(14px, 1.7vw, 28px);
  --hdr: 64px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); overflow-x: clip; scroll-padding-top: calc(var(--hdr) + 24px); }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font: 400 16px/1.55 var(--f-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11";
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { list-style: none; padding: 0; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .01em; font-feature-settings: "tnum", "zero" 0; }
em { font-style: italic; }

/* ---------- Type ---------- */
.h2 {
  font: 400 clamp(42px, 5.7vw, 100px)/.95 var(--f-display);
  letter-spacing: -.012em; text-wrap: balance;
}
.h2 em, .hero__title em { font-style: italic; }
.h3 { font: 400 clamp(30px, 3vw, 48px)/1 var(--f-display); letter-spacing: -.01em; }
.lede { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }

/* ---------- Buttons and links ---------- */
.btn {
  --h: 44px;
  display: inline-flex; align-items: center; gap: 12px; height: var(--h); padding: 0 18px;
  border-radius: 2px; text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: -.005em;
  white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn--lg { --h: 54px; padding: 0 22px; font-size: 16px; }
.btn--red { background: var(--red); color: var(--on-red); }
.btn--red:hover { background: var(--red-hover); }
.btn--line { border: 1px solid var(--rule-2); }
.btn--line:hover { border-color: var(--ink); }
.btn__arw { position: relative; width: 18px; height: 10px; transition: transform .35s var(--ease); }
.btn__arw::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; }
.btn__arw::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.btn:hover .btn__arw { transform: translateX(4px); }
.link { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: .35em; font-weight: 500; transition: text-decoration-color .3s, color .3s; }
.link:hover { text-decoration-color: var(--red); color: var(--red); }
.link--light { color: var(--paper); text-decoration-color: rgb(var(--paper-rgb) / .4); }
.link--light:hover { color: var(--red-2); text-decoration-color: var(--red-2); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--rule-2);
  border-radius: 999px; font-size: 14px; font-weight: 500; transition: background-color .25s, color .25s, border-color .25s;
}
.chip .mono { font-size: 11px; color: var(--ink-3); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"] .mono { color: rgb(var(--paper-rgb) / .6); }


/* Registration crop marks used around frames. */
.crop { position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 3; }
.crop::before, .crop::after { content: ""; position: absolute; background: currentColor; }
.crop::before { width: 14px; height: 1px; } .crop::after { width: 1px; height: 14px; }
.crop--tl { left: -22px; top: -22px; } .crop--tl::before { top: 22px; left: -6px; } .crop--tl::after { left: 22px; top: -6px; }
.crop--tr { right: -22px; top: -22px; } .crop--tr::before { top: 22px; right: -6px; } .crop--tr::after { right: 22px; top: -6px; }
.crop--bl { left: -22px; bottom: -22px; } .crop--bl::before { bottom: 22px; left: -6px; } .crop--bl::after { left: 22px; bottom: -6px; }
.crop--br { right: -22px; bottom: -22px; } .crop--br::before { bottom: 22px; right: -6px; } .crop--br::after { right: 22px; bottom: -6px; }
/* Phones: the marks would sit past the screen edge and widen the page. */
@media (max-width: 959px) { .crop { display: none; } .net { overflow-x: clip; } }

/* Title block, as on a drawing sheet. */
.tblock { display: flex; flex-wrap: wrap; border: 1px solid var(--rule-2); border-top: 0; font: 400 12px/1.35 var(--f-mono); color: var(--ink-2); }
.tblock__c { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 9px 12px; border-right: 1px solid var(--rule-2); min-height: 48px; }
.tblock__c:last-child { border-right: 0; }
.tblock__c i { font-style: normal; font-size: 10.5px; color: var(--ink-3); letter-spacing: .02em; }
.tblock__c b { font: 500 13px/1.25 var(--f-sans); color: var(--ink); letter-spacing: -.005em; }
.tblock__c--main { flex: 1 1 auto; }
.tblock__toggle { text-align: left; cursor: pointer; }
.tblock__toggle span { color: var(--ink); }
.tblock__toggle:hover { background: rgb(var(--ink-rgb) / .04); }

/* ---------- Sheets ---------- */
.sheet { position: relative; padding-inline: var(--pad); }
.sheet--dark { background: var(--night); color: var(--paper); --rule: var(--night-rule); --rule-2: rgb(var(--paper-rgb) / .3); }
.sheet--dark .lede { color: rgb(var(--paper-rgb) / .72); }
/* The one slate sheet: a cooler dark for variety among the espresso ones. */
.sheet--slate { --night-rgb: 34 52 63; --night: rgb(var(--night-rgb)); --night-2: #2F4757; }
.sheetbar {
  display: grid; grid-template-columns: 4em 1fr auto; align-items: center; gap: var(--gap);
  padding: 14px 0; border-top: 1px solid var(--rule); color: var(--ink-3);
}
.sheet--dark .sheetbar { color: rgb(var(--paper-rgb) / .64); }
.js.motion .sheetbar { border-top-color: transparent; background: linear-gradient(var(--rule-2), var(--rule-2)) left top / 0% 1px no-repeat; transition: background-size 1.6s var(--ease-in-out); }
.js.motion .sheetbar > span { opacity: 0; transform: translateY(6px); transition: opacity .8s var(--ease) .35s, transform .8s var(--ease) .35s; }
.js.motion .sheetbar.is-in { background-size: 100% 1px; }
.js.motion .sheetbar.is-in > span { opacity: 1; transform: none; }
.sheetbar__r { text-align: right; }
.sheetbar > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .sheetbar { grid-template-columns: 2.5em auto minmax(0, 1fr); } }
@media (max-width: 400px) { .sheetbar > span { white-space: normal; } .sheetbar { align-items: start; } }

/* ---------- Very wide screens: the layout stops widening at 1760px ---------- */
@media (min-width: 1900px) {
  :root { --pad: max(56px, calc((100vw - 1760px) / 2)); }
  body { font-size: 17px; }
  .lede { font-size: 21px; }
}

/* ---------- Loading screen ---------- */
.boot { display: none; }
.js.motion .boot { display: block; position: fixed; inset: 0; z-index: 200; background: var(--night-deep); color: var(--paper); }
html.is-loading { overflow: hidden; }
.boot__in { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto auto; gap: 18px; padding: clamp(22px, 3.3vw, 56px) var(--pad); }
.boot__mark { width: clamp(70px, 7.5vw, 124px); height: auto; overflow: visible; }
.boot__mark path { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.boot__name { align-self: start; display: flex; flex-wrap: wrap; gap: 4px 28px; color: rgb(var(--paper-rgb) / .62); }
.boot__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.boot__num { font: 400 min(19vw, 240px)/.8 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; font-feature-settings: "lnum", "tnum"; }
.boot__note { text-align: right; color: rgb(var(--paper-rgb) / .62); padding-bottom: .6em; }
.boot__bar { position: relative; height: 1px; background: rgb(var(--paper-rgb) / .16); }
.boot__bar i { position: absolute; inset: 0; background: var(--red-2); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Pointer (fine pointers with motion; js/cursor.js) ---------- */
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input:not([type="radio"]):not([type="checkbox"]), html.has-cursor textarea { cursor: text !important; }
html.has-cursor select { cursor: auto !important; }
.cur { position: fixed; left: 0; top: 0; z-index: 300; width: 0; height: 0; pointer-events: none; color: var(--ink); opacity: 0; transition: opacity .25s, color .3s; }
.cur.is-on { opacity: 1; }
.cur.is-on.is-hidden { opacity: 0; }
.cur.is-dark { color: var(--paper); }
.cur__x, .cur__ring, .cur__l { position: absolute; left: 0; top: 0; }
.cur__x { width: 22px; height: 22px; margin: -11px 0 0 -11px; transition: transform .35s var(--ease), opacity .25s; }
.cur__x::before, .cur__x::after { content: ""; position: absolute; background: currentColor; }
.cur__x::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.cur__x::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }
.cur__ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 1px solid currentColor; border-radius: 50%; transform: scale(0); opacity: 0; transition: transform .4s var(--ease), opacity .3s, background-color .3s, border-color .3s; }
.cur.is-act .cur__x { transform: scale(.45); }
.cur.is-act .cur__ring { transform: scale(1); opacity: .9; }
.cur.has-label .cur__x { opacity: 0; }
.cur.has-label .cur__ring { transform: scale(1.6); background: currentColor; opacity: 1; }
.cur__l { transform: translate(-50%, -50%); font: 500 11.5px/1 var(--f-mono); letter-spacing: .01em; color: var(--paper); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.cur.has-label .cur__l { opacity: 1; transition-delay: .08s; }
.cur.is-dark .cur__l { color: var(--ink); }
.cur.is-down .cur__ring { transform: scale(.8); }
.cur.is-down.has-label .cur__ring { transform: scale(1.4); }

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr);
  display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); padding: 0 var(--pad);
  color: var(--ink); transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.hdr.is-scrolled { background: rgb(var(--paper-rgb) / .86); -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); box-shadow: 0 1px 0 var(--rule); }
.hdr.is-dark { color: var(--paper); }
.hdr.is-dark.is-scrolled { background: rgb(var(--night-rgb) / .82); box-shadow: 0 1px 0 var(--night-rule); }
.hdr.is-film, .hdr.is-film.is-scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.hdr__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); margin-right: auto; }
.hdr.is-dark .hdr__brand { color: var(--paper); }
.hdr__mark { height: 28px; width: auto; fill: currentColor; }
.hdr__word { height: 12px; width: auto; fill: currentColor; }
.hdr__nav { display: flex; gap: clamp(18px, 2vw, 30px); font-size: 14px; font-weight: 500; }
.hdr__nav a, .hdr__tel { text-decoration: none; position: relative; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.hdr__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr__tel .mono { font-size: 13px; }
.hdr__tel:hover { color: var(--red); }
.hdr.is-dark .hdr__tel:hover { color: var(--red-2); }
.hdr__cta { --h: 40px; padding: 0 16px; }
.hdr__menu { display: none; position: relative; }
.hdr__menu summary { list-style: none; width: 40px; height: 40px; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.hdr__menu summary::-webkit-details-marker { display: none; }
.hdr__menu summary span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.hdr__menu[open] summary span:first-child { transform: translateY(3.75px) rotate(45deg); }
.hdr__menu[open] summary span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.hdr__sheet {
  position: fixed; top: var(--hdr); left: 0; right: 0; padding: 18px var(--pad) 28px; background: var(--paper); color: var(--ink);
  display: grid; gap: 4px; box-shadow: 0 1px 0 var(--rule), 0 24px 40px -24px rgb(var(--night-rgb) / .35);
}
.hdr__sheet > a { font: 400 38px/1.15 var(--f-display); text-decoration: none; }
.hdr__sheet p { margin-top: 14px; line-height: 2; font-size: 13px; }

@media (max-width: 920px) {
  :root { --hdr: 58px; }
  .hdr__nav, .hdr__tel { display: none; }
  .hdr__menu { display: block; }
  .hdr__word { height: 10px; }
  .hdr { gap: 10px; }
}
@media (max-width: 380px) { .hdr__word { display: none; } }

/* ---------- Sheet indicator, in the header (desktop) ---------- */
.sheetnav { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink-2); pointer-events: none; }
.hdr__brand { margin-right: 18px; }
.sheetnav__bar { position: relative; width: 56px; height: 1px; background: currentColor; opacity: .3; }
.sheetnav__bar i { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(var(--p, 0)); }
.sheetnav__bar::after { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; }
.sheetnav__no { color: var(--red); }
.hdr.is-dark .sheetnav { color: rgb(var(--paper-rgb) / .7); }
.hdr.is-dark .sheetnav__no { color: var(--red-2); }
.sheetnav__t { min-width: 9em; }
@media (max-width: 1180px) { .sheetnav { display: none; } .hdr__brand { margin-right: auto; } }
.no-js .sheetnav { display: none; }
.no-js .hdr__brand { margin-right: auto; }

/* =====================================================================
   00 Hero
   ===================================================================== */
.hero { padding-bottom: clamp(28px, 5vh, 56px); }
.hero__pin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; }

/* The arrival: full-bleed film. Static by default (no JS, reduced motion, phones); pinned and scrubbed on wide screens. */
.hero__film {
  grid-column: 1 / -1; position: relative; margin: 0 calc(var(--pad) * -1) clamp(48px, 9vh, 110px);
  height: 100svh; min-height: 560px; overflow: hidden; background: var(--night-deep); color: var(--paper);
}
.plates, .plate, .plate video { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
/* hidden plates are visibility:hidden once faded, so they stop compositing a full-screen video */
.plate { opacity: 0; visibility: hidden; transition: opacity 1.4s var(--ease-in-out), visibility 0s 1.4s; }
.plate.is-on { opacity: 1; visibility: visible; transition: opacity 1.4s var(--ease-in-out); }
.plate video { object-fit: cover; background: var(--night-deep); }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(var(--night-rgb) / .55) 0, rgb(var(--night-rgb) / 0) 24%),
    linear-gradient(to top, rgb(30 24 20 / .82) 0, rgb(30 24 20 / .45) 34%, rgb(30 24 20 / 0) 62%);
}
.hero__open {
  position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(30px, 7vh, 76px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
}
.hero__title { grid-column: 1 / span 9; font-weight: 400; }
.hero__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(16px, 2.6vh, 30px); font: 500 clamp(16px, 1.25vw, 20px)/1.2 var(--f-sans); letter-spacing: -.005em; color: rgb(var(--paper-rgb) / .9); }
.hero__eyebrow::before { content: ""; width: 9px; height: 9px; background: var(--red-2); flex: none; }
.hero__line { display: block; font: 400 clamp(56px, 8.6vw, 156px)/.88 var(--f-display); letter-spacing: -.02em; color: var(--paper); }
.hero__line em { font-style: italic; letter-spacing: -.01em; }
.hero__opencta { grid-column: 10 / -1; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; padding-bottom: 8px; }
.hero__vis { position: absolute; right: var(--pad); top: calc(var(--hdr) + 22px); display: flex; gap: 14px; color: rgb(var(--paper-rgb) / .78); }
.hero__visn { color: var(--red-2); }
.hero__vist { padding-left: 14px; border-left: 1px solid rgb(var(--paper-rgb) / .3); }
.hero__cue { display: none; }

/* The sheet the film lands on. */
.hero__copy { grid-column: 1 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-bottom: 6px; }
.hero__h2 { font: 400 clamp(48px, 6.4vw, 116px)/.92 var(--f-display); letter-spacing: -.016em; text-wrap: balance; }
.hero__aside { display: grid; gap: 22px; max-width: 30em; }
.hero__lede { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hero__call { color: var(--ink-3); }
.hero__call a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.hero__call a:hover { color: var(--red); border-color: var(--red); }

.hero__sheet {
  grid-column: 6 / -1; align-self: start; justify-self: end; display: flex; flex-direction: column; min-width: 0; width: 100%; color: var(--ink-3);
  /* never taller than the screen allows: cap the width so the frame keeps the photo's proportions (the traced lines depend on it) */
  max-width: calc((100svh - var(--hdr) - clamp(20px, 4vh, 48px) - clamp(28px, 5vh, 56px) - 64px) * 1448 / 1073);
}
.hero__frame { position: relative; }
.hero__media {
  position: relative; aspect-ratio: 1448 / 1073; width: 100%;
  overflow: hidden; background: var(--sheet); outline: 1px solid var(--rule-2);
}
.hero__built, .hero__paper, .hero__media picture, .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__paper { background: var(--sheet); }
.hero__paper .hero-drawing .ln { stroke: var(--line); opacity: .92; }
.hero__paper .hero-drawing .ln-split, .hero__paper .hero-drawing .ln-hw { opacity: .6; }
.hero__scan { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--red); box-shadow: 0 0 0 1px rgb(var(--red-rgb) / .15), 0 0 24px 4px rgb(var(--red-rgb) / .25); opacity: 0; pointer-events: none; z-index: 2; }
.hero__photo { object-fit: cover; }
.hero-drawing { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-drawing .ln { fill: none; stroke: var(--sheet); stroke-width: var(--sw, 2.6); stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.hero-drawing .ln-split, .hero-drawing .ln-hw { opacity: .5; }
.hero-drawing .ln-tv { opacity: .4; }
.hero__lens { display: none; }

.callouts { position: absolute; inset: 0; pointer-events: none; }
.callout { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px; transform: translate(-11px, -11px); }
.callout__n {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--ink); color: var(--paper); font: 500 11px/1 var(--f-mono); box-shadow: 0 0 0 3px rgb(var(--sheet-rgb) / .7);
}
.callout__t {
  position: relative; padding: 4px 8px; background: rgb(var(--sheet-rgb) / .94); color: var(--ink); font: 400 12px/1.2 var(--f-mono);
  white-space: nowrap; box-shadow: 0 1px 0 rgb(var(--ink-rgb) / .12);
}
.callout--left { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -11px); }
.callout--up { flex-direction: column-reverse; transform: translate(-11px, calc(-100% + 11px)); align-items: flex-start; }
.callout--down { flex-direction: column; align-items: flex-start; }

.hero .tblock { margin-left: auto; width: 100%; }
.hero .tblock__c--main b { font-size: 13px; }

/* Hero animation start states (JS only, motion allowed). */
.js.motion .hero:not(.is-intro-done) .hero__line, .js.motion .hero:not(.is-intro-done) .hero__eyebrow,
.js.motion .hero:not(.is-intro-done) .hero__opencta, .js.motion .hero:not(.is-intro-done) .hero__vis,
.js.motion .hero:not(.is-intro-done) .tblock { opacity: 0; }
.js.motion .hero:not(.is-intro-done) .hero__built { clip-path: inset(0 100% 0 0); }
.js.motion .hero:not(.is-intro-done) .callout { opacity: 0; }

/* Wide screens with motion: one pinned stage. The film lies over the sheet,
   then pulls back into the sheet's frame (hero.js sets the clip). */
@media (min-width: 960px) {
  .js.motion .hero { padding-bottom: 0; }
  .js.motion .hero__pin {
    height: 100svh; padding-top: calc(var(--hdr) + clamp(20px, 4vh, 48px)); padding-bottom: clamp(28px, 5vh, 56px);
    grid-template-rows: minmax(0, 1fr);
  }
  .js.motion .hero__film { position: absolute; inset: 0 calc(var(--pad) * -1); margin: 0; height: auto; min-height: 0; z-index: 4; will-change: clip-path; }
  .js.motion .hero__cue { display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: rgb(var(--paper-rgb) / .7); }
  .js.motion .hero__cue i { position: relative; width: 1px; height: 38px; background: rgb(var(--paper-rgb) / .25); overflow: hidden; }
  .js.motion .hero__cue i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: var(--paper); animation: cue 2.2s var(--ease-in-out) infinite; }
  .js.motion .hero.is-landed .hero__film { visibility: hidden; }
}
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
.hero.is-paper .hero-drawing .ln { stroke: var(--line); opacity: .9; }
.hero.is-paper .hero-drawing .ln-split, .hero.is-paper .hero-drawing .ln-hw { opacity: .55; }
.hero.is-paper .hero__media { background: var(--sheet); }

/* Lens: hover over the photo to see the drawing underneath. */
.js .hero__lens {
  display: block; position: absolute; inset: 0; pointer-events: none; background: var(--sheet); opacity: 0;
  -webkit-mask-image: radial-gradient(circle var(--lr, 130px) at var(--mx, 50%) var(--my, 50%), #000 98%, transparent 100%);
  mask-image: radial-gradient(circle var(--lr, 130px) at var(--mx, 50%) var(--my, 50%), #000 98%, transparent 100%);
  transition: opacity .35s var(--ease);
}
.js .hero__lens.is-on { opacity: 1; }
.hero__lens .hero-drawing .ln { stroke: var(--line); opacity: .95; }
.hero__lens .hero-drawing .ln-split, .hero__lens .hero-drawing .ln-hw { opacity: .6; }
.hero__ring { position: absolute; left: 0; top: 0; width: 260px; height: 260px; margin: -130px 0 0 -130px; border: 1px solid var(--red); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); z-index: 2; }
.hero__ring.is-on { opacity: 1; }
.hero__ring::before, .hero__ring::after { content: ""; position: absolute; background: var(--red); }
.hero__ring::before { left: 50%; top: -8px; width: 1px; height: 16px; } .hero__ring::after { top: 50%; left: -8px; height: 1px; width: 16px; }

@media (max-width: 959px) {
  .hero__pin { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .hero__film, .hero__copy, .hero__sheet { grid-column: 1; }
  .hero__film { margin-bottom: 20px; }
  .hero__open { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .hero__title, .hero__opencta { grid-column: 1; }
  .hero__opencta { justify-self: start; align-items: flex-start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
  .hero__line { font-size: clamp(50px, 14vw, 96px); }
  .hero__vis { top: auto; bottom: auto; top: calc(var(--hdr) + 14px); right: var(--pad); left: var(--pad); justify-content: space-between; }
  .hero__copy { display: contents; }
  .hero__h2 { order: 1; font-size: clamp(40px, 11vw, 72px); }
  .hero__sheet { order: 2; margin-inline: calc(var(--pad) * -1); width: auto; max-width: none; justify-self: stretch; }
  .hero__aside { order: 3; }
  .hero__media { max-height: none; outline: 0; }
  .hero .crop { display: none; }
  .hero .tblock { border-left: 0; border-right: 0; }
  .hero .tblock__c:nth-child(2), .hero .tblock__c:nth-child(3) { display: none; }
  .callout__n { width: 22px; height: 22px; font-size: 10.5px; }
}
@media (max-width: 599px) {
  .callouts { display: none; }
  .hero .tblock__c:nth-child(4) { display: none; }
}

/* =====================================================================
   01 Scope: the exploded room
   ===================================================================== */
.scope { padding-top: clamp(40px, 8vh, 96px); }
.scope__stage {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding-top: clamp(24px, 4vh, 48px); padding-bottom: clamp(40px, 8vh, 100px);
}
.scope__copy { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 22px; }
.scope__list { display: grid; gap: 0; margin-top: 10px; border-top: 1px solid var(--rule); }
.scope__list li { display: grid; grid-template-columns: 3em 1fr; gap: 0 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); transition: color .35s var(--ease); }
.scope__list .mono { padding-top: 4px; color: var(--ink-3); transition: color .35s; }
.scope__list h3 { font: 500 16px/1.3 var(--f-sans); letter-spacing: -.005em; }
.scope__list p { font-size: 14.5px; color: var(--ink-2); margin-top: 3px; max-width: 36em; }
.scope__draw { grid-column: 6 / -1; position: relative; display: flex; flex-direction: column; min-width: 0; }
.scope__svg { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.js.motion .scope__svg { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); }
.js.motion .scope__svg .room { position: absolute; inset: 0; width: 100%; height: 100%; }
.scope__counter, .scope__now { display: none; }

/* Room drawing styles */
.room { width: 100%; height: auto; overflow: visible; }
.room .f { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill .5s var(--ease), stroke .5s var(--ease); }
.room .e { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s var(--ease); }
.room .fine { stroke-width: .6; opacity: .5; }
.room .ft { fill: var(--sheet); } .room .fl { fill: #ECE3D5; } .room .fr { fill: #DCD0BD; }
/* materials: concrete and block, travertine, walnut, plaster, slate-grey services */
.room .civ.ft { fill: #DAD3C8; } .room .civ.fl { fill: #CFC7BA; } .room .civ.fr { fill: #BFB5A6; } .room .blk-x.fl, .room .blk-y.fr { fill: #C4B9A9; }
.room .blk.ft { fill: #D5CDC1; } .room .blk.fl { fill: #C7BDAF; } .room .blk.fr { fill: #B6AB9B; }
.room .cut { fill: url(#hatch); }
.room .hatch-l { stroke: var(--line); stroke-width: 1.2; }
.room .course { stroke-width: .6; opacity: .4; }
.room .chase { stroke: var(--red); stroke-dasharray: 4 3; stroke-width: 1.1; opacity: 0; }
.room .plan-sheet { fill: #F7F3EB; stroke-dasharray: 4 4; }
.room .dash { stroke-dasharray: 5 5; }
.room .floor { fill: #E4D6BF; }
.room .lin.fl { fill: #F1EADF; } .room .lin.fr { fill: #E3D9CA; }
.room .feature { fill: #E9E1D3; }
.room .paint-a { fill: #D7BFA4; } .room .paint-b { fill: #CFB497; }
.room .paint { opacity: .62; }
.room .plaster { stroke: #9C7C5E; stroke-width: .8; opacity: .55; }
.room .glass { fill: var(--glass); opacity: .5; }
.room .steel { stroke-width: 2.2; }
.room .refl { stroke: #fff; stroke-width: 1.4; opacity: .9; }
.room .ceil-field { fill: #F7F3EC; opacity: .55; }
.room .av.fl, .room .av.fr, .room .av.ft { fill: var(--av); }
.room .keypad { fill: var(--ink); }
.room .vein { stroke-width: .7; opacity: .55; }
.room .dim, .room .dimw { stroke: var(--red); stroke-width: 1; }
.room .dimt { font: 500 13px var(--f-mono); fill: var(--red); }
.room .mk, .room .dimt { transform-box: fill-box; transform-origin: center; transform: scale(var(--label-k, 1)); }
.room .mk circle { fill: var(--ink); transition: fill .4s; }
.room .mk text { fill: var(--paper); font: 500 11px var(--f-mono); }
.room .mep.ft { fill: #C9D2D7; } .room .mep.fl { fill: #AFBCC3; } .room .mep.fr { fill: #95A6AF; }
.room .pipe { stroke-width: 2; }
.room .cove { stroke: #D9A441; stroke-width: 2; opacity: .8; }
.room .dl { fill: #fff; }
.room .spk { stroke-dasharray: 2 2; }
.room .layer { transition: opacity .5s var(--ease); }
.room .frm.ft { fill: #FFFFFF; } .room .frm.fl { fill: #F7F4EE; } .room .frm.fr { fill: #EDE8DF; }
.room .joi.ft { fill: #C99E73; } .room .joi.fl { fill: #A97A50; } .room .joi.fr { fill: #8C6142; }
.room .stn.ft { fill: #EFE6D8; } .room .stn.fl { fill: #DDD0BC; } .room .stn.fr { fill: #CDBDA5; }
.room .shelf-void { fill: #5E4330; }
.room .led { stroke: #E8B04A; stroke-width: 2.2; opacity: .9; }
.room .rug { fill: #D5C7B2; stroke-dasharray: 3 3; }
.room .tbl.ft { fill: #7A5A40; } .room .tbl.fl { fill: #634631; } .room .tbl.fr { fill: #523927; }
.room .uph.ft { fill: #F3EFE7; } .room .uph.fl { fill: #E2DCD0; } .room .uph.fr { fill: #D4CDBF; }
.room .fp { stroke: var(--red); stroke-width: 1.2; }
.room .hatchline { stroke-dasharray: 2 3; }
.room .paint-c { fill: #C4A88A; }

/* Stamp and handover tag overlays */
.stamp, .handtag { position: absolute; pointer-events: none; }
.stamp {
  left: 4%; bottom: 12%; padding: 10px 16px 8px; border: 2px solid var(--red); color: var(--red); transform: rotate(-8deg);
  display: grid; justify-items: center; gap: 2px; background: rgb(var(--paper-rgb) / .7); border-radius: 3px;
}
.stamp__t { font: 600 22px/1 var(--f-sans); letter-spacing: .02em; }
.stamp__s { font-size: 11px; }
.handtag {
  left: 0; bottom: 11%; display: grid; gap: 3px; padding: 14px 18px 14px 26px; background: var(--ink); color: var(--paper); max-width: 220px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.handtag b { font: 400 24px/1.05 var(--f-display); }
.handtag .mono { font-size: 10.5px; opacity: .7; }
.no-js .stamp, .no-js .handtag, .js:not(.motion) .stamp, .js:not(.motion) .handtag { display: none; }

/* Scope, pinned and animated (JS, motion allowed, wide screens) */
.js.motion .scope { padding-top: 0; }
.js.motion .scope .sheetbar { position: relative; }
@media (min-width: 960px) {
  .js.motion .scope__stage { height: calc(100svh - var(--hdr)); grid-template-rows: minmax(0, 1fr); padding-top: clamp(16px, 3vh, 36px); padding-bottom: clamp(16px, 3vh, 32px); }
  .js.motion .scope__draw { min-height: 0; height: 100%; }
  .js.motion .scope__svg { flex: 1 1 0; min-height: 0; }
  .js.motion .scope__copy { gap: 16px; }
  .js.motion .scope__copy .h2 { font-size: clamp(40px, 4.4vw, 76px); }
  .js.motion .scope__copy .lede { font-size: 16.5px; }
  .js.motion .scope__list { margin-top: 4px; }
  .js.motion .scope__list li { padding: 7px 0; }
  .js.motion .scope__list p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .js.motion .scope__list h3 { font-size: 15px; color: var(--ink-3); transition: color .35s, transform .45s var(--ease); }
  .js.motion .scope__list li.is-on h3 { color: var(--ink); transform: translateX(6px); }
  .js.motion .scope__list li.is-on .mono, .js.motion .scope__list li.is-done .mono { color: var(--red); }
  .js.motion .scope__list li.is-done h3 { color: var(--ink-2); }
  .js.motion .scope__counter { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; }
  .js.motion .scope__num { font: 400 clamp(54px, 5vw, 84px)/.9 var(--f-display); color: var(--red); font-feature-settings: "lnum", "tnum"; }
  .js.motion .scope__counter .mono { color: var(--ink-3); }
  .js.motion .scope__now { display: grid; grid-template-columns: minmax(10em, auto) 1fr; gap: 20px; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--rule); min-height: 64px; }
  .js.motion .scope__now-t { font: 400 26px/1.05 var(--f-display); }
  .js.motion .scope__now-d { font-size: 15px; color: var(--ink-2); max-width: 40em; }
}
.js .room.is-live .layer { opacity: .42; }
.js .room.is-live .layer.is-on, .js .room.is-live .layer.is-keep { opacity: 1; }
.js .room .layer.is-on .f, .js .room .layer.is-on .e:not(.vein):not(.refl):not(.cove) { stroke: var(--red); stroke-width: 1.35; }
.js .room.spk-on .spk { stroke: var(--red); stroke-dasharray: none; stroke-width: 1.6; }
.js .room.spk-on .layer--ceiling { opacity: .8; }
.js .room .layer.is-on .mk circle { fill: var(--red); }
.js .room .layer--civil.is-on .chase, .js .room.show-chases .chase { opacity: 1; }
.js .room.lining-off .layer--walls, .js .room.lining-off .layer--finish { opacity: .08 !important; }
.js .room.paint-off .layer--finish .paint, .js .room.paint-off .layer--finish .plaster { opacity: 0; }
.js.motion .room .paint, .js.motion .room .plaster { transition: opacity .8s var(--ease); }
.js.motion .room .layer--finish .paint { clip-path: inset(0 0 0 0); }
.js.motion .room .mk { opacity: 0; transition: opacity .4s; }
.js .room .layer.is-on .mk { opacity: 1; }

@media (min-width: 960px) and (max-height: 820px) {
  .js.motion .scope__list { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: 20px; }
  .js.motion .scope__list li { padding: 5px 0; grid-template-columns: 2.4em 1fr; }
  .js.motion .scope__list h3 { font-size: 14px; }
  .js.motion .scope__copy .h2 { font-size: clamp(34px, 6.4vh, 64px); }
  .js.motion .scope__copy .lede { font-size: 15px; }
}
@media (max-width: 959px) {
  .scope__copy, .scope__draw { grid-column: 1 / -1; }
  .scope__draw { margin-top: 28px; }
  .js.motion .scope__stage { display: block; }
  .js.motion .scope__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .js.motion .scope__pinwrap { height: calc(100svh - var(--hdr)); display: flex; flex-direction: column; padding: 14px 0 18px; }
  .js.motion .scope__draw { height: calc(100svh - var(--hdr)); margin-top: 0; padding: 12px 0 16px; display: flex; flex-direction: column; }
  .js.motion .scope__svg { flex: 1 1 0; min-height: 0; }
  .js.motion .scope__counter { display: flex; align-items: baseline; gap: 8px; }
  .js.motion .scope__num { font: 400 46px/.9 var(--f-display); color: var(--red); }
  .js.motion .scope__counter .mono { color: var(--ink-3); }
  .js.motion .scope__now { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--rule); min-height: 92px; }
  .js.motion .scope__now-t { font: 400 26px/1.05 var(--f-display); }
  .js.motion .scope__now-d { font-size: 14.5px; color: var(--ink-2); }
  .stamp { transform: rotate(-8deg) scale(.75); transform-origin: left bottom; }
  .handtag { transform: scale(.8); transform-origin: right top; }
}

/* =====================================================================
   02 One team (dark)
   ===================================================================== */
.oneteam { padding-top: 0; padding-bottom: clamp(48px, 9vh, 120px); }
.oneteam__pin { padding: clamp(28px, 5vh, 64px) 0 clamp(26px, 4vh, 48px); display: grid; gap: clamp(26px, 4vh, 48px); }
.oneteam__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 22px 40px; }
.oneteam__head .h2 { max-width: 12em; }
.oneteam__switch { display: flex; gap: 8px; }
.oneteam .chip { border-color: rgb(var(--paper-rgb) / .3); color: var(--paper); }
.oneteam .chip:hover { border-color: var(--paper); }
.oneteam .chip[aria-pressed="true"] { background: var(--paper); color: var(--night); border-color: var(--paper); }
.oneteam__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
.net { grid-column: 1 / span 7; position: relative; padding: 10px 0 70px; background-image: radial-gradient(rgb(var(--paper-rgb) / .1) 1px, transparent 1.2px); background-size: 24px 24px; background-position: center; }
.net__svg { width: 100%; height: auto; overflow: visible; }
.net__wire { stroke: rgb(var(--paper-rgb) / .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; fill: none; }
.net__wire--main { stroke: var(--paper); stroke-width: 2.4; }
.net__wire--x { stroke: var(--red-2); stroke-dasharray: 4 5; stroke-width: 1.3; }
.net__node circle { fill: var(--night); stroke: rgb(var(--paper-rgb) / .85); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.net__node text { fill: var(--paper); font: 400 19px var(--f-sans); letter-spacing: -.01em; }
@media (max-width: 700px) {
  .js .net__node text { font-size: 25px; }
  .js .net__node--you text { font-size: 28px; }
  .js .net__node--tc text { font-size: 22px; }
  .net { padding-bottom: 0; }
}
.net__node--you circle { fill: var(--red-2); stroke: none; }
.net__node--you text { font: 500 22px var(--f-sans); }
.net__node--tc circle { fill: var(--paper); stroke: none; }
.net__node--tc text { fill: var(--night); font: 600 18px var(--f-mono); letter-spacing: .02em; }
.net__cap { position: absolute; left: 0; bottom: 0; max-width: 24em; font-size: 15px; color: rgb(var(--paper-rgb) / .75); transition: opacity .5s var(--ease); }
.net__cap .mono { display: block; color: var(--red-2); margin-bottom: 4px; }
.net__cap--a { opacity: 0; }
.net.is-a .net__cap--a { opacity: 1; } .net.is-a .net__cap--b { opacity: 0; }
.cmp { grid-column: 8 / -1; font-size: 14.5px; }
.cmp__row { display: grid; grid-template-columns: 8.5em 1fr 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--night-rule); align-items: baseline; }
.cmp__row > :first-child { font-weight: 500; color: var(--paper); }
.cmp__row > :nth-child(2) { color: rgb(var(--paper-rgb) / .66); transition: color .5s; }
.cmp__row > :nth-child(3) { color: var(--paper); transition: color .5s; }
.cmp__row--head { border-top: 0; padding-top: 0; }
.cmp__row--head .mono { color: rgb(var(--paper-rgb) / .64) !important; }
.cmp.is-a .cmp__row > :nth-child(2) { color: var(--paper); }
.cmp.is-a .cmp__row > :nth-child(3) { color: rgb(var(--paper-rgb) / .66); }
/* Wide screens pin the diagram and the table for the untangle (js/scenes/oneteam.js uses the same query) */
@media (min-width: 1200px) and (min-height: 700px) {
  .js.motion .oneteam__pin { height: calc(100svh - var(--hdr)); padding: clamp(20px, 4vh, 48px) 0; gap: clamp(18px, 3vh, 36px); grid-template-rows: auto minmax(0, 1fr); }
  .js.motion .oneteam__body { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .js.motion .net { height: 100%; display: flex; flex-direction: column; justify-content: center; }
  .js.motion .net__svg { flex: 0 1 auto; min-height: 0; }
}
@media (min-width: 1200px) and (min-height: 700px) and (max-height: 820px) {
  .js.motion .cmp__row { padding: 7px 0; }
}
@media (max-width: 959px) {
  .net, .cmp { grid-column: 1 / -1; }
  .net__cap { position: static; margin-top: 10px; }
  .net__cap--a { display: none; } .net.is-a .net__cap--a { display: block; } .net.is-a .net__cap--b { display: none; }
  .cmp__row { grid-template-columns: 1fr 1fr; }
  .cmp__row > :first-child { grid-column: 1 / -1; }
  .cmp__row--head > :first-child { display: none; }
}
.no-js .net__cap--a { opacity: 1; position: static; }
.no-js .filters, .no-js .oneteam__switch, .no-js .js-only { display: none; }
.no-js .net__cap--b { position: static; }

/* =====================================================================
   03 Work
   ===================================================================== */
.work { padding-bottom: clamp(56px, 10vh, 130px); }
.work__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap); padding: clamp(28px, 5vh, 64px) 0 clamp(28px, 5vh, 56px); align-items: end; }
.work__head .h2 { grid-column: 1 / span 7; }
.work__intro { grid-column: 8 / -1; display: grid; gap: 18px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.work__body { position: relative; }
.jobs { border-top: 1px solid var(--rule); }
.job { padding: 18px 0 22px; border-bottom: 1px solid var(--rule); }
.job[hidden] { display: none; }
.job__head { display: grid; grid-template-columns: 3em 1fr; gap: 2px 12px; align-items: baseline; }
.job__no { font: 400 12px var(--f-mono); color: var(--ink-3); grid-row: span 2; padding-top: 6px; }
.job__title { font: 400 clamp(30px, 3vw, 46px)/1.02 var(--f-display); letter-spacing: -.01em; }
.job__title a { text-decoration: none; }
.job__title a:hover { color: var(--red); }
.job__meta { font: 400 12px/1.5 var(--f-mono); color: var(--ink-3); }
.job__meta span[aria-hidden] { opacity: .55; margin: 0 .2em; }
.job__nda { display: inline-block; margin-left: 10px; padding: 0 6px; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-2); }
.job__strip { display: flex; gap: 8px; margin: 14px calc(var(--pad) * -1) 0; padding: 0 var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.job__strip::-webkit-scrollbar { display: none; }
.job__strip li { flex: none; scroll-snap-align: start; scroll-margin-left: var(--pad); }
.job__strip .frame { display: block; height: clamp(160px, 26vw, 260px); aspect-ratio: var(--ar); background: var(--c); overflow: hidden; }
.job__strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .5s; }
.job__strip .frame:hover img { transform: scale(1.03); }
.job--note .job__text { margin: 12px 0 18px 3.75em; max-width: 34em; color: var(--ink-2); }
.job--note .btn { margin-left: 3.75em; }
.js .job--note { display: none; }
.js .job--note.is-shown { display: block; }
.work__all { margin-top: 28px; }
.viewer { display: none; }

/* Wide screens with JS: list on the left, pinned viewer on the right */
@media (min-width: 1024px) {
  .js .work__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
  .js .jobs { grid-column: 1 / span 5; }
  .js .job { padding: 0; cursor: pointer; }
  .js .job__head { padding: clamp(18px, 3.2vh, 30px) 0; transition: padding .5s var(--ease); }
  .js .job__strip { display: none; }
  .js .job__title { font-size: clamp(30px, 2.6vw, 44px); color: var(--ink-3); transition: color .4s var(--ease), transform .5s var(--ease); }
  .js .job__title a { pointer-events: none; }
  .js .job:hover .job__title { color: var(--ink-2); }
  .js .job.is-on .job__title { color: var(--ink); transform: translateX(10px); }
  .js .job.is-on .job__no { color: var(--red); }
  .js .job.is-on .job__head { position: relative; }
  .js .job.is-on .job__head::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--red); }
  .js .job--note.is-shown .job__text, .js .job--note.is-shown .btn { margin-left: 3.75em; }
  .js .job--note.is-shown { padding-bottom: 28px; }
  .js .viewer {
    display: flex; flex-direction: column; gap: 14px; grid-column: 7 / -1; position: sticky; top: calc(var(--hdr) + 20px);
    height: calc(100svh - var(--hdr) - 40px); min-height: 520px;
  }
  .viewer__stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
  .viewer__print { position: relative; width: var(--pw, 100%); height: var(--ph, 100%); background: var(--pc, var(--paper-2)); color: var(--ink-3); transition: width .75s var(--ease), height .75s var(--ease), background-color .6s; }
  .viewer__img { position: absolute; inset: 0; overflow: hidden; }
  .viewer__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .viewer__img img.is-in { animation: develop .9s var(--ease) both; }
  .viewer__img img.is-full { animation: fadein .45s var(--ease) both; }
  .viewer__img img.is-out { animation: fadeout .5s var(--ease) both; }
  .viewer__notep { position: absolute; inset: 0; display: grid; place-items: center; padding: 10%; text-align: center; font: 400 clamp(28px, 2.6vw, 42px)/1.15 var(--f-display); color: var(--ink); }
  .viewer__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .viewer__cap { display: flex; gap: 14px; color: var(--ink-2); }
  .viewer__job { color: var(--ink); }
  .viewer__nav { display: flex; align-items: center; gap: 6px; }
  .viewer__btn { width: 38px; height: 38px; border: 1px solid var(--rule-2); border-radius: 50%; display: grid; place-items: center; font-size: 15px; transition: border-color .25s, background-color .25s, color .25s; }
  .viewer__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .viewer__open { margin-left: 12px; font-size: 14px; }
  .viewer__strip { display: flex; gap: 6px; height: 64px; overflow: hidden; }
  .viewer__strip button { flex: none; height: 100%; aspect-ratio: var(--ar); background: var(--c); opacity: .45; transition: opacity .3s, outline-color .3s; outline: 1px solid transparent; outline-offset: 2px; }
  .viewer__strip button:hover { opacity: .85; }
  .viewer__strip button:focus-visible { opacity: 1; outline: 2px solid var(--red); outline-offset: 2px; }
  .viewer__strip button.is-on { opacity: 1; outline-color: var(--ink); }
  .viewer__strip img { width: 100%; height: 100%; object-fit: cover; }
  .viewer.is-note .viewer__img { display: grid; place-items: center; }
}
/* Phone photo lightbox */
.lightbox { padding: 0; border: 0; margin: 0; width: 100vw; max-width: none; height: 100%; max-height: none; background: var(--night-deep); color: var(--paper); }
.lightbox::backdrop { background: var(--night-deep); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px var(--pad); }
.lightbox__cap { min-width: 0; color: rgb(var(--paper-rgb) / .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox__x { flex: none; }
.lightbox__x { font: 400 13px var(--f-mono); text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; }
.lightbox__img { position: relative; min-height: 0; background: var(--c, #222); margin: 0 var(--pad); }
.lightbox__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lightbox__img .lightbox__low { filter: blur(6px); }
.lightbox__nav { display: flex; justify-content: center; gap: 14px; padding: 16px; }
.lightbox__nav button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgb(var(--paper-rgb) / .45); font-size: 18px; color: var(--paper); }
@keyframes develop { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 1023px) { .work__head .h2, .work__intro { grid-column: 1 / -1; } }

/* =====================================================================
   05 Detail
   ===================================================================== */
.detail { padding-bottom: clamp(56px, 10vh, 130px); }
.detail__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 6vh, 64px) var(--gap); padding-top: clamp(28px, 5vh, 64px); }
.detail__head { grid-column: 1 / span 8; display: grid; gap: 20px; }
.dwg { grid-column: 1 / span 8; position: relative; align-self: start; background: var(--sheet); outline: 1px solid var(--rule-2); }
@media (min-width: 960px) { .dwg { position: sticky; top: calc(var(--hdr) + 28px); } }
.dwg__svg { width: 100%; height: auto; padding: clamp(16px, 2.5vw, 40px) clamp(16px, 2.5vw, 40px) clamp(10px, 1.5vw, 20px); overflow: visible; }
.dwg__hint { display: none; }
@media (max-width: 599px) {
  .dwg__pan { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .dwg__pan .dwg__svg { width: 760px; max-width: none; }
  .dwg__hint { display: block; padding: 8px 12px 0; color: var(--ink-3); font-size: 11px !important; }
}
.dwg__note { padding: 10px 12px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 11px !important; }
.dwg .tblock { border-left: 0; border-right: 0; border-bottom: 0; border-top: 1px solid var(--rule-2); }
.dwg__svg .d-cut path { fill: none; stroke: var(--line); stroke-width: 2; stroke-linejoin: miter; }
.dwg__svg .d-beyond path { fill: none; stroke: var(--line); stroke-width: .8; opacity: .75; }
.dwg__svg .d-beyond .d-edge { stroke-dasharray: 3 3; opacity: .45; }
.dwg__svg .d-hatch line, .dwg__svg .d-hatch path { stroke: var(--line); stroke-width: .7; fill: none; opacity: .55; }
.dwg__svg .d-hatch circle { fill: var(--ink); opacity: .45; }
.dwg__svg pattern line, .dwg__svg pattern path { stroke: var(--line); stroke-width: .7; fill: none; }
.dwg__svg pattern circle { fill: var(--ink); }
.dwg__svg #h-stone path { stroke-width: .6; opacity: .7; }
.dwg__svg .d-dims path { fill: none; stroke: var(--red); stroke-width: .9; }
.dwg__svg .d-dims text { font: 500 11.5px var(--f-mono); fill: var(--red); }
.dwg__svg .d-notes path { fill: none; stroke: var(--line); stroke-width: .7; }
.dwg__svg .d-notes text { font: 400 12px var(--f-sans); fill: var(--ink); letter-spacing: .005em; }
.dwg__svg .d-notes .d-small { font-size: 11.5px; fill: var(--ink-2); }
.tblock__sign { min-width: 170px; }
.sig { width: 150px; height: 34px; margin-top: -2px; }
.sig path { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dstamp {
  position: absolute; right: 4%; bottom: 118px; display: grid; justify-items: center; padding: 8px 16px 6px; border: 2px solid var(--red); color: var(--red); pointer-events: none;
  transform: rotate(-9deg); border-radius: 3px; background: rgb(var(--sheet-rgb) / .6);
}
.dstamp span:first-child { font: 600 24px/1 var(--f-sans); letter-spacing: .02em; }
.dstamp .mono { font-size: 10.5px; }
.proof { grid-column: 9 / -1; display: grid; gap: 34px; align-content: start; }
.proof__i { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rule); }
.proof__n { color: var(--red); }
.proof__i h3 { font: 400 clamp(24px, 2vw, 32px)/1.05 var(--f-display); letter-spacing: -.005em; }
.proof__i p { font-size: 15px; color: var(--ink-2); }
.proof__photo { order: -1; margin: -14px 0 6px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.proof__i--img { border-top: 0; padding-top: 0; }
.proof__photo img { width: 100%; height: 100%; object-fit: cover; }
.proof__i:nth-child(3) .proof__photo { aspect-ratio: 4 / 4.2; }
.proof__i .proof__n { order: -2; display: none; }
.proof__cap { font-size: 11px !important; color: var(--ink-3) !important; }
@media (max-width: 959px) {
  .detail__head, .dwg, .proof { grid-column: 1 / -1; }
  .dwg { margin-inline: calc(var(--pad) * -1); outline: 0; border-block: 1px solid var(--rule-2); }
  .dwg .tblock__c:nth-child(4) { display: none; }
  .dstamp { right: 6%; bottom: 58px; }
  .dwg { overflow-x: clip; }
}

/* =====================================================================
   06 Programme
   ===================================================================== */
.prog { background: var(--paper-2); --red: var(--red-deep); }
.prog__pin { padding: 0 0 clamp(56px, 10vh, 120px); }
.prog__stage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(22px, 3.6vh, 44px) var(--gap); padding: clamp(28px, 5vh, 64px) 0 clamp(22px, 3.6vh, 44px); }
.prog__now { display: none; }
.prog__head { grid-column: 1 / span 8; display: grid; gap: 16px; }
.prog__week { grid-column: 10 / -1; align-self: end; justify-self: end; display: flex; align-items: baseline; gap: 10px; color: var(--ink-3); }
.prog__wk { font: 400 clamp(64px, 7vw, 124px)/.85 var(--f-display); color: var(--red); font-feature-settings: "lnum", "tnum"; min-width: 1.05em; text-align: right; }
.gantt { grid-column: 1 / -1; position: relative; --cols: 14; --lab: minmax(13em, 3fr); }
.gantt__weeks, .gantt__row { display: grid; grid-template-columns: var(--lab) repeat(var(--cols), minmax(0, 1fr)); }
.gantt__weeks { padding-bottom: 8px; font: 400 11px var(--f-mono); color: var(--ink-3); }
.gantt__weeks span { padding-left: 6px; border-left: 1px solid var(--rule); }
.gantt__weeks span:first-child { grid-column: 2; }
.gantt__rows { border-top: 1px solid var(--rule-2); }
.gantt__row { position: relative; align-items: center; min-height: 64px; border-bottom: 1px solid var(--rule); }
.gantt__label { grid-column: 1; display: grid; gap: 2px; padding: 10px 16px 10px 0; }
.gantt__label .mono { color: var(--ink-3); font-size: 11px; }
.gantt__label h3 { font: 500 15px/1.25 var(--f-sans); }
.gantt__track { grid-column: 2 / -1; position: relative; height: 100%; min-height: 64px; background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px); background-size: calc(100% / 14) 100%; }
.gantt__bar {
  position: absolute; top: 50%; height: 14px; margin-top: -7px; background: var(--ink);
  left: calc((var(--a) - 1) / 14 * 100%); width: calc((var(--b) - var(--a) + 1) / 14 * 100%);
  transform-origin: left; transform: scaleX(var(--fill, 1));
}
.gantt__row:last-child .gantt__bar { background: var(--red); }
.gantt__note { grid-column: 2 / -1; grid-row: 2; font-size: 14px; color: var(--ink-2); padding: 0 0 12px min(calc((var(--a) - 1) / 14 * 100%), 52%); max-width: none; }
.gantt__cursor { display: none; }
.prog__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap); align-items: start; margin-top: 8px; }
.prog__small { grid-column: 1 / span 4; font-size: 15px; color: var(--ink-2); }

/* Programme, animated: a week cursor sweeps the chart as you scroll */
.js.motion .gantt__cursor { display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--labw, 0px) + (100% - var(--labw, 0px)) * var(--wk, 0) / 14); width: 0; pointer-events: none; }
.js.motion .gantt__cursor i { position: absolute; top: 0; bottom: 0; left: 0; border-left: 1.5px solid var(--red); }
.js.motion .gantt__cursor i::before { content: ""; position: absolute; top: -4px; left: -5px; width: 9px; height: 9px; background: var(--red); border-radius: 50%; }
.js.motion .gantt__note { color: var(--ink-3); transition: color .4s var(--ease); }
.js.motion .gantt__row.is-on .gantt__note { color: var(--ink); }
.js.motion .gantt__row h3 { transition: color .4s; color: var(--ink-3); }
.js.motion .gantt__row.is-on h3, .js.motion .gantt__row.is-done h3 { color: var(--ink); }
.js.motion .gantt__row.is-on .gantt__bar { background: var(--red); }
@media (min-width: 960px) {
  .js.motion .prog__stage { height: calc(100svh - var(--hdr)); align-content: start; padding-top: clamp(20px, 4vh, 48px); padding-bottom: clamp(16px, 3vh, 32px); gap: clamp(16px, 2.6vh, 32px) var(--gap); }
  .js.motion .prog__head .h2 { font-size: clamp(40px, 4.4vw, 78px); }
  .js.motion .gantt__note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .js.motion .gantt__row { min-height: 0; }
  .js.motion .gantt__track { min-height: clamp(44px, 8.2vh, 124px); }
  .js.motion .gantt__bar { height: 18px; margin-top: -9px; }
  .js.motion .gantt__label h3 { font-size: 16px; }
  .js.motion .gantt__label { padding: 8px 16px 8px 0; }
  .js.motion .prog__now { grid-column: 1 / -1; display: grid; grid-template-columns: var(--labw-px, 13em) 1fr; align-items: baseline; gap: 0; padding-top: 12px; border-top: 1px solid var(--rule-2); min-height: 52px; }
  .js.motion .prog__now-t { color: var(--red); }
  .js.motion .prog__now-d { font: 400 clamp(20px, 1.6vw, 26px)/1.2 var(--f-display); }
}
@media (min-width: 960px) and (max-height: 820px) {
  .js.motion .prog__head .h2 { font-size: clamp(34px, 6.6vh, 64px); }
  .js.motion .prog__head .lede { font-size: 15px; }
  .js.motion .prog__wk { font-size: clamp(54px, 11vh, 110px); }
  .js.motion .gantt__track { min-height: clamp(32px, 5.8vh, 56px); }
  .js.motion .gantt__label { padding: 5px 16px 5px 0; }
  .js.motion .prog__now { min-height: 40px; padding-top: 8px; }
}
@media (max-width: 959px) {
  .prog__head, .prog__week { grid-column: 1 / -1; }
  .prog__week { justify-self: start; }
  .gantt { --lab: 0; }
  .gantt__weeks { grid-template-columns: repeat(14, minmax(0, 1fr)); }
  .gantt__weeks span:first-child { grid-column: auto; }
  .gantt__row { grid-template-columns: repeat(14, minmax(0, 1fr)); padding-top: 10px; }
  .gantt__label { grid-column: 1 / -1; padding: 0 0 6px; display: flex; gap: 10px; align-items: baseline; }
  .gantt__track { grid-column: 1 / -1; min-height: 28px; }
  .gantt__note { grid-column: 1 / -1; grid-row: auto; padding-left: 0; padding-top: 8px; font-size: 13.5px; }
  .prog__small { grid-column: 1 / -1; }
  .js.motion .gantt__cursor { display: none; }
}

/* =====================================================================
   07 Clients (dark)
   ===================================================================== */
.clients { padding-bottom: clamp(56px, 10vh, 130px); }
.clients__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 5vh, 56px) var(--gap); padding-top: clamp(28px, 5vh, 64px); }
.clients .h2 { grid-column: 1 / span 6; }
.clients__index { grid-column: 1 / -1; border-top: 1px solid var(--night-rule); }
.cgroup { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px var(--gap); padding: clamp(14px, 2.2vh, 22px) 0; border-bottom: 1px solid var(--night-rule); align-items: baseline; }
.cgroup__t { grid-column: 1 / span 3; font-weight: 400; color: rgb(var(--paper-rgb) / .64); }
.cgroup__n { grid-column: 4 / -1; font: 400 clamp(26px, 2.7vw, 46px)/1.16 var(--f-display); letter-spacing: -.008em; color: rgb(var(--paper-rgb) / .92); text-wrap: pretty; }
.cgroup__n > span, .cgroup__n > a { white-space: nowrap; }
.cgroup__n > *:not(:last-child)::after { content: "/"; margin: 0 .3em 0 .28em; color: rgb(var(--paper-rgb) / .22); font-style: normal; text-decoration: none; display: inline-block; }
.cgroup__n a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--red-2); text-underline-offset: .14em; transition: color .3s; }
.cgroup__n a:hover { color: var(--red-2); }
.clients__nda { font-style: italic; color: rgb(var(--paper-rgb) / .6); white-space: normal !important; }
.clients__key { grid-column: 1 / -1; margin-top: calc(clamp(28px, 5vh, 56px) * -0.5); color: rgb(var(--paper-rgb) / .64); display: flex; align-items: center; gap: 10px; }
.fine-only { display: none; }
@media (hover: hover) and (pointer: fine) { .js .fine-only { display: inline; } }
.clients__swatch { width: 20px; height: 1px; background: var(--red-2); flex: none; }
.figs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--night-rule); }
.figs > div { padding: 18px 16px 0 0; border-right: 1px solid var(--night-rule); margin-right: 16px; }
.figs > div:last-child { border-right: 0; }
.figs dt { color: rgb(var(--paper-rgb) / .64); font-size: 11.5px; }
.figs dd { margin-top: 10px; font: 400 clamp(38px, 3.8vw, 64px)/1 var(--f-display); color: var(--paper); }
.clients__peek { position: fixed; left: 0; top: 0; z-index: 30; width: 260px; aspect-ratio: 4 / 3; pointer-events: none; opacity: 0; transform: translate(-50%, -110%) scale(.92); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.clients__peek.is-on { opacity: 1; transform: translate(-50%, -110%) scale(1); }
.clients__peek img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgb(var(--paper-rgb) / .4); }
@media (max-width: 959px) {
  .clients .h2, .clients__key { grid-column: 1 / -1; }
  .cgroup__t, .cgroup__n { grid-column: 1 / -1; }
  .clients__key { margin-top: -10px; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figs > div { border-right: 0; margin-right: 0; padding-bottom: 14px; border-bottom: 1px solid var(--night-rule); }
  .figs > div:first-child { grid-column: 1 / -1; }
  .clients__peek { display: none; }
}

/* =====================================================================
   08 Start: survey, form, questions
   ===================================================================== */
.start { padding-bottom: clamp(56px, 10vh, 130px); }
.start__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gap); padding-top: clamp(28px, 5vh, 64px); align-items: start; }
.start__copy { grid-column: 1 / span 5; display: grid; gap: 34px; position: sticky; top: calc(var(--hdr) + 28px); }
.steps { display: grid; border-top: 1px solid var(--rule); }
.steps li { display: grid; grid-template-columns: 3em 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.steps .mono { color: var(--red); padding-top: 5px; }
.steps h3 { font: 400 26px/1.05 var(--f-display); }
.steps p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.start__direct { font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.start__direct a { color: var(--ink); font-weight: 500; }
.form { grid-column: 7 / -1; display: grid; gap: 22px; padding: clamp(20px, 2.6vw, 40px); background: var(--sheet); outline: 1px solid var(--rule-2); }
.form__set { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipr { position: relative; }
.chipr input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chipr span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid rgb(var(--ink-rgb) / .45); border-radius: 999px; font-size: 14px; transition: background-color .25s, color .25s, border-color .25s; }
.chipr:hover span { border-color: var(--ink); }
.chipr input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chipr input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.field small { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--f-sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .58);
  padding: 10px 0; border-radius: 0; transition: border-color .25s, box-shadow .25s;
}
/* no resize handle: Windows draws it with a native control whose first paint stalls the scroll ~80 ms */
.field textarea { resize: none; min-height: 84px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--red); box-shadow: inset 0 -2px 0 var(--red); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.field.is-bad input { border-bottom-color: var(--red); box-shadow: inset 0 -2px 0 var(--red); }
.form__err { display: block; margin-top: 6px; font: 500 13px/1.3 var(--f-sans); font-style: normal; color: var(--err); }
.form__err::before { content: "! "; font-weight: 700; }
.form__alert:empty { display: none; }
.form__alert { padding: 10px 14px; border-left: 3px solid var(--err); background: var(--err-bg); color: var(--err-ink); font-size: 14px; font-weight: 500; }
.form__legend small, .field small { font-weight: 400; color: var(--ink-3); margin-left: 4px; font-size: 12.5px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.form__fine { font-size: 13px; color: var(--ink-3); max-width: 22em; }
.form__done { font: 400 26px/1.2 var(--f-display); }
.form__done:empty { display: none; }
.form.is-sent > *:not(.form__done) { display: none; }
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap); margin-top: clamp(64px, 12vh, 140px); padding-top: 22px; border-top: 1px solid var(--rule); }
.faq .h3 { grid-column: 1 / span 4; }
.faq__list { grid-column: 5 / -1; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; font: 400 clamp(21px, 1.7vw, 26px)/1.2 var(--f-display); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 24px/1 var(--f-sans); color: var(--ink-3); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--red); }
.faq details p { padding: 0 0 20px; max-width: 40em; color: var(--ink-2); }
@media (max-width: 959px) {
  .start__copy, .form, .faq .h3, .faq__list { grid-column: 1 / -1; }
  .start__copy { position: static; }
  .form { margin-inline: calc(var(--pad) * -1); outline: 0; border-block: 1px solid var(--rule-2); }
  .form__row { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.ftr { padding: 0 var(--pad) 28px; }
.ftr__cta {
  position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px;
  min-height: min(88svh, 900px); margin: 0 calc(var(--pad) * -1) clamp(36px, 6vh, 72px); padding: calc(var(--hdr) + 40px) var(--pad) clamp(36px, 7vh, 80px);
  overflow: hidden; isolation: isolate;
}
.ftr__film { position: absolute; inset: 0; z-index: -1; background: var(--night-deep); }
.ftr__film video { width: 100%; height: 100%; object-fit: cover; }
.ftr__film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(30 24 20 / .8) 0, rgb(30 24 20 / .35) 45%, rgb(30 24 20 / .15) 70%, rgb(var(--night-rgb) / .5) 100%); }
.ftr__vis { position: absolute; right: var(--pad); top: calc(var(--hdr) + 22px); color: rgb(var(--paper-rgb) / .7); }
.ftr__big { font: 400 clamp(52px, 8.4vw, 150px)/.9 var(--f-display); letter-spacing: -.02em; }
.ftr__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px var(--gap); padding: 28px 0; border-top: 1px solid var(--night-rule); }
.ftr__brand { grid-column: 1 / span 5; display: grid; gap: 18px; }
.ftr__brand img { width: min(320px, 100%); }
.ftr__brand p { color: rgb(var(--paper-rgb) / .6); font-size: 14.5px; max-width: 26em; }
.ftr__nav { grid-column: 7 / span 2; display: grid; gap: 6px; align-content: start; }
.ftr__contact { grid-column: 9 / -1; display: grid; gap: 6px; align-content: start; }
.ftr__nav a, .ftr__contact a { text-decoration: none; }
.ftr__nav a:hover, .ftr__contact a:hover { color: var(--red-2); }
.ftr__contact span { color: rgb(var(--paper-rgb) / .64); }
.ftr__tblock { display: flex; flex-wrap: wrap; border: 1px solid var(--night-rule); color: rgb(var(--paper-rgb) / .64); }
.ftr__tblock span { padding: 10px 14px; border-right: 1px solid var(--night-rule); }
.ftr__tblock span:first-child { flex: 1; }
.ftr__tblock span:last-child { border-right: 0; }
@media (max-width: 959px) {
  .ftr__brand, .ftr__nav, .ftr__contact { grid-column: 1 / -1; }
}

/* ---------- Enquiry dialog ---------- */
.ask {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(620px, 100vw); max-width: none; height: 100%; max-height: none;
  padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior: contain;
}
.ask::backdrop { background: rgb(var(--night-rgb) / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ask[open] { animation: askin .55s var(--ease) both; }
.ask[open]::backdrop { animation: fadein .4s var(--ease) both; }
@keyframes askin { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.ask__in { padding: 22px clamp(20px, 3vw, 40px) 40px; display: grid; gap: 18px; }
.ask__head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; margin: -22px calc(clamp(20px, 3vw, 40px) * -1) 0; padding: 16px clamp(20px, 3vw, 40px) 12px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.ask__title { font: 400 36px/1 var(--f-display); }
.ask__x { min-height: 44px; padding: 0 4px 0 16px; font: 400 13px var(--f-mono); text-decoration: underline; text-underline-offset: 4px; }
.ask__lede { color: var(--ink-2); font-size: 15px; }
.ask__lede a { color: var(--ink); }
.ask .form { margin: 0; padding: 0; outline: 0; background: none; grid-column: auto; }
.ask .form__row { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .ask .form__row { grid-template-columns: 1fr; } }

/* ---------- Generic reveal (JS + motion) ---------- */
.js.motion .reveal-img { overflow: hidden; }
.js.motion .reveal-img img { transform-origin: 50% 60%; }
.js.motion [data-reveal] { opacity: 0; transform: translateY(18px); }
.js.motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1s var(--ease); }
.split-line-mask { padding-bottom: .2em; margin-bottom: -.2em; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}