/* FewerBits website mockup
   Tokens follow FewerBits_Brand_Book_2026.pdf: five colours with a job each,
   Lustra Text for short headlines, a neutral sans for everything else,
   hard rectangular fields, the six-bit 3-2-1 rhythm. */

/* Fonts are self-hosted woff2. DejaVu Sans is subset to Latin (made with fontTools, see ARCHITECTURE.md). */
@font-face {
  font-family: "Lustra Text";
  src: url("fonts/LustraText-Regular.woff2") format("woff2"), url("fonts/LustraText-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DejaVu Sans Web";
  src: local("DejaVu Sans"), url("fonts/DejaVuSans-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DejaVu Sans Web";
  src: local("DejaVu Sans Bold"), url("fonts/DejaVuSans-Bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --orange: #FF5738;   /* signal: provocation, statement, action */
  --aub: #261B29;      /* anchor: authority, contrast, depth */
  --cream: #F5EFE6;    /* space: warmth, reading, breathing room */
  --turq: #00CBB8;     /* counterpoint: invention, clarity, change of pace */
  --citrus: #E6F26A;   /* spark: tiny jolt, detail, highlight */
  --aub-2: #32253a;
  --aub-3: #45354e;
  --line-dark: rgba(38, 27, 41, 0.16);
  --line-light: rgba(245, 239, 230, 0.16);
  /* Type scale: every font-size in this file uses one of these (hero and page titles excepted) */
  --fs-label: 12.5px;                          /* labels, tags, badges, meta (sentence case since 2026-10-21) */
  --fs-small: 15px;                            /* captions, notes, secondary running text */
  --fs-body: 17px;                             /* running text */
  --fs-lede: clamp(18px, 1.6vw, 22px);         /* intro paragraphs */
  --fs-large: clamp(19px, 1.8vw, 26px);        /* quotes, big statements, FAQ questions */
  --fs-h3: clamp(21px, 2vw, 32px);             /* small display headings */
  --fs-h3-lg: clamp(24px, 2.8vw, 44px);        /* card and row titles */
  --fs-h2: clamp(30px, 4.2vw, 64px);           /* section headings */
  --display-ws: -0.1em;   /* Lustra's word space is about 0.37em, wide enough to read as a double space in headlines */
  --display: "Lustra Text", "Michroma", "Eurostile", "Arial Black", sans-serif;   /* Michroma: free stand-in for Lustra */
  --body: "DejaVu Sans Web", "DejaVu Sans", Verdana, Geneva, sans-serif;   /* Verdana: same proportions as DejaVu */
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --bit: clamp(10px, 1.1vw, 16px);
  --step: steps(6, end);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--aub);
  color: var(--aub);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 {
  font-family: var(--display); word-spacing: var(--display-ws);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 4.6vw, 76px); }   /* page titles: one size on every page hero (2026-10-21, aligned on the smallest); the home hero sets its own */
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
::selection { background: var(--citrus); color: var(--aub); }
:focus-visible { outline: 3px solid var(--citrus); outline-offset: 3px; }
.band--cream :focus-visible, .band--turq :focus-visible, .band--orange :focus-visible, .band--citrus :focus-visible { outline-color: var(--aub); }

section[id], details[id] { scroll-margin-top: 96px; }   /* anchors land below the sticky nav */
.skip { position: absolute; left: -999px; top: 0; background: var(--citrus); color: var(--aub); padding: 12px 16px; z-index: 100; font-weight: 700; }
.skip:focus { left: 0; }

/* ---------- Fields ---------- */
.band { background: var(--bg); color: var(--fg); padding-block: clamp(72px, 11vh, 150px); position: relative; }
.band--aub { --bg: var(--aub); --fg: var(--cream); --line: var(--line-light); --accent: var(--turq); }
.band--cream { --bg: var(--cream); --fg: var(--aub); --line: var(--line-dark); --accent: var(--aub); }
.band--orange { --bg: var(--orange); --fg: var(--aub); --line: rgba(38, 27, 41, 0.28); --accent: var(--aub); }
.band--turq { --bg: var(--turq); --fg: var(--aub); --line: rgba(38, 27, 41, 0.28); --accent: var(--aub); }
.band--citrus { --bg: var(--citrus); --fg: var(--aub); --line: rgba(38, 27, 41, 0.28); --accent: var(--aub); }
.band--tight { padding-block: clamp(40px, 6vh, 72px); }
.band--flush { padding-block: 0; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.label {
  font-size: var(--fs-label);
  font-weight: 700;
 
 
  color: var(--accent);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.label::before { content: ""; width: 9px; height: 9px; background: var(--orange); flex: none; }
.band--orange .label::before { background: var(--aub); }
.lede { font-size: var(--fs-large); line-height: 1.5; max-width: 34em; }
.rule { border: 0; border-top: 1px solid var(--line); margin: clamp(28px, 4vw, 48px) 0; }
.head-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 72px); }
.head-row > p { max-width: 30em; }
.hl-turq { color: var(--turq); }
.hl-orange { color: var(--orange); }
.hl-citrus { color: var(--citrus); }
.strong-line { font-weight: 700; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--orange);
  color: var(--aub);
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.2;
  text-decoration: none;
  padding: 18px 24px;
  border: 0;
  cursor: pointer;
  position: relative;
}
.btn::after { content: ""; width: 10px; height: 10px; background: currentColor; transition: transform 0.24s var(--step); }
.btn:hover { background: var(--citrus); }
.btn:hover::after { transform: translateX(8px); }
.btn--lg { font-size: var(--fs-lede); padding: 24px 32px; }
.btn--dark { background: var(--aub); color: var(--cream); }
.btn--dark:hover { background: var(--cream); color: var(--aub); }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px currentColor; }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }
.link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link:hover { background: var(--fg); color: var(--bg); text-decoration: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--aub); color: var(--cream);
  border-bottom: 1px solid var(--line-light);
  view-transition-name: nav;
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
/* Lockup as in Brand/FewerBits logo.png: cap height of the wordmark spans rows 2 and 3 of the mark, baseline on the mark's bottom edge. Lustra cap height is 0.7em, so the mark is 34/31 of the font size. */
.logo { display: inline-flex; align-items: flex-start; height: 1.097em; gap: 0.19em; text-decoration: none; font-family: var(--display); word-spacing: var(--display-ws); font-size: 31px; line-height: 1; color: inherit; }
.logo svg { width: 1.097em; height: 1.097em; flex: none; }
.logo span { margin-top: 0.258em; }
.logo .bit { transition: transform 0.3s var(--step); }
.logo:hover .bit:nth-child(3) { transform: translateY(12px); }
.logo:hover .bit:nth-child(5) { transform: translateY(12px); }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-size: var(--fs-small); font-weight: 700; padding: 8px 0; position: relative; display: inline-flex; align-items: center; gap: 8px; }
.nav-links a::before { content: ""; width: 8px; height: 8px; background: var(--orange); transform: scale(0); transition: transform 0.18s var(--step); }
.nav-links a:hover::before, .nav-links a[aria-current="page"]::before { transform: scale(1); }
.nav-links a[aria-current="page"] { color: var(--turq); }
.nav .btn { padding: 12px 16px; font-size: var(--fs-small); }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: grid; grid-template-columns: repeat(3, 7px); gap: 3px; }
.nav-toggle i { width: 7px; height: 7px; background: var(--cream); transition: opacity 0.2s var(--step), background 0.2s; }
.nav-toggle[aria-expanded="true"] i:nth-child(n+4) { background: var(--orange); }
.nav-toggle[aria-expanded="true"] i:nth-child(3), .nav-toggle[aria-expanded="true"] i:nth-child(6), .nav-toggle[aria-expanded="true"] i:nth-child(5) { opacity: 0; }

/* ---------- Hero (home) ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); background: var(--aub); color: var(--cream); position: relative; }   /* the vh line is the fallback for browsers without svh */
.hero-copy { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 8vh, 110px) clamp(24px, 4vw, 64px) clamp(48px, 8vh, 110px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); overflow: hidden; }
.hero-copy > * { position: relative; z-index: 1; }
.bitfield { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-eyebrow { font-family: var(--display); word-spacing: var(--display-ws); font-size: clamp(30px, 4.3vw, 76px); line-height: 1.05; margin: 0 0 clamp(4px, 0.8vw, 12px); }
.hero h1 { font-size: clamp(60px, 9.4vw, 168px); line-height: 0.95; margin-bottom: clamp(12px, 2vw, 26px); }
.hero-second { font-family: var(--display); word-spacing: var(--display-ws); font-size: clamp(30px, 4.3vw, 76px); line-height: 1.05; margin: 0 0 clamp(28px, 4vw, 48px); }
.hero-sub { margin-top: 26px; max-width: 30em; color: rgba(245, 239, 230, 0.82); }
.hero-mark { position: relative; z-index: 1; align-self: center; justify-self: center; display: grid; grid-template-columns: repeat(3, var(--b)); gap: calc(var(--b) / 5); --b: clamp(64px, 9.5vw, 168px); }
.hero-mark i { width: var(--b); height: var(--b); }
.hero-mark i:nth-child(-n+3) { background: #FF5E3A; }
.hero-mark i:nth-child(4), .hero-mark i:nth-child(5) { background: #F3A552; }
.hero-mark i:nth-child(6) { background: var(--citrus); grid-column: 1; }
.hero-media { position: relative; overflow: hidden; background: #140d16; min-height: 320px; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; padding: 14px 18px; font-size: var(--fs-label); font-weight: 700; color: var(--cream); background: linear-gradient(transparent, rgba(20, 13, 22, 0.75)); }

/* ---------- Page heads ---------- */
.phead { padding-block: clamp(64px, 10vh, 130px) clamp(56px, 8vh, 100px); overflow: hidden; }
.phead h1 { max-width: 15em; }
.phead .lede { margin-top: clamp(22px, 3vw, 38px); }
.phead-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.stack-bits { display: grid; grid-template-columns: repeat(3, var(--b)); gap: calc(var(--b) / 5); --b: clamp(34px, 6vw, 92px); justify-self: end; }
.stack-bits i { width: var(--b); height: var(--b); background: var(--c, var(--aub)); }
.stack-bits i:nth-child(6) { grid-column: 1; }
.stack-bits i:nth-child(7) { display: none; }

/* ---------- Logo strip ---------- */
.proofstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 22px clamp(28px, 5vw, 72px); }
.proofstrip .label { margin: 0; color: rgba(245, 239, 230, 0.7); width: 100%; }   /* label on its own line, logos below */
.proofstrip img { height: clamp(22px, 2.4vw, 32px); width: auto; opacity: 0.72; border-radius: 0; transition: opacity 0.15s; }
.proofstrip img:hover { opacity: 1; }
.proofstrip img.sm { height: clamp(17px, 1.8vw, 24px); }
.logos { display: flex; }
.logos-track { display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); }
.logos-track[aria-hidden] { display: none; }   /* the duplicate exists for the marquee only */
/* Small screens: the logos run as a marquee, one continuous track that scrolls through once per 18s */
@media (max-width: 820px) {
  .logos { overflow: hidden; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .logos-track { flex: none; gap: 44px; padding-right: 44px; animation: marquee 18s linear infinite; }
  .logos-track[aria-hidden] { display: flex; }
  .proofstrip img { height: 26px; opacity: 0.85; }
  .proofstrip img.sm { height: 20px; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
}
@media (prefers-reduced-motion: reduce) { .logos-track { animation: none; } .logos { overflow-x: auto; mask-image: none; -webkit-mask-image: none; } .logos-track[aria-hidden] { display: none; } }

/* ---------- Tension ---------- */
.tension { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); }
.tension-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--aub); }
.tension-list li { padding: 20px 0; border-bottom: 2px solid var(--aub); font-size: var(--fs-lede); line-height: 1.45; display: grid; grid-template-columns: 22px 1fr; gap: 14px; }
.tension-list li::before { content: ""; width: 12px; height: 12px; background: var(--aub); margin-top: 0.5em; }
.tension-kicker { margin-top: 30px; font-family: var(--display); word-spacing: var(--display-ws); font-size: var(--fs-h3); line-height: 1.2; }

/* ---------- Compressor (signature) ---------- */
.comp { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.comp-panel { background: var(--aub); color: var(--cream); padding: clamp(22px, 3vw, 44px); }
.comp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: clamp(22px, 3vw, 36px); }
.comp-steps button { font: 700 var(--fs-label)/1.2 var(--body); color: var(--cream); background: var(--aub-2); border: 0; padding: 14px 8px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.comp-steps button::before { content: ""; height: 8px; width: var(--w, 100%); background: var(--aub-3); transition: background 0.2s; }
.comp-steps button[aria-pressed="true"] { background: var(--orange); color: var(--aub); }
.comp-steps button[aria-pressed="true"]::before { background: var(--aub); }
.comp-steps button:hover:not([aria-pressed="true"]) { background: var(--aub-3); }
.comp-text { font-size: inherit; line-height: 1.65; min-height: 9.2em; margin: 0; }   /* body size, like the text beside it */
/* Each word is an inline span that carries its own leading space. Inline (not inline-block), so a space at a line
   start collapses away like normal text; a cut word shrinks to nothing, and its space with it. */
.comp-text .w { display: inline; transition: font-size 0.45s var(--ease) 0.28s, opacity 0.2s linear 0.28s, color 0.15s; background-image: linear-gradient(var(--orange), var(--orange)); background-repeat: no-repeat; background-size: 0% 3px; background-position: 0 58%; }
.comp-text .w.cut { font-size: 0; opacity: 0; color: rgba(245, 239, 230, 0.5); background-size: 100% 3px; }
.comp-text.final .w:not(.cut) { color: var(--citrus); }
.comp-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: clamp(20px, 3vw, 32px); padding-top: 18px; border-top: 1px solid var(--line-light); font-size: var(--fs-label); font-weight: 700; }
.comp-count b { font-family: var(--display); word-spacing: var(--display-ws); font-weight: 400; font-size: var(--fs-h3); color: var(--turq); margin-right: 8px; letter-spacing: 0; }
.comp-note { color: rgba(245, 239, 230, 0.6); }

/* ---------- Ladder / cards ---------- */
.ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); align-items: end; }
.card { background: var(--bg); color: var(--fg); padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 16px; text-decoration: none; position: relative; transition: transform 0.2s var(--step); }
a.card:hover { transform: translate(-6px, -6px); box-shadow: 6px 6px 0 var(--shadow, var(--aub)); }
.card .label { margin: 0; }
.card h3 { font-size: var(--fs-h3-lg); }
.card-foot { margin-top: auto; padding-top: 18px; border-top: 2px solid currentColor; display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: var(--fs-small); }
.card-foot::after { content: ""; width: 10px; height: 10px; background: currentColor; align-self: center; transition: transform 0.24s var(--step); }
a.card:hover .card-foot::after { transform: translateX(-6px) scale(1.5); }
.ladder .card:nth-child(1) { min-height: 330px; }
.ladder .card:nth-child(2) { min-height: 400px; }
.ladder .card:nth-child(3) { min-height: 470px; }

/* ---------- Receipt ---------- */
.evidence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.receipt { background: var(--cream); color: var(--aub); padding: clamp(24px, 3vw, 44px) clamp(20px, 2.6vw, 38px); position: relative; font-size: var(--fs-small); --tooth: 14px; }
.receipt::before, .receipt::after { content: ""; position: absolute; left: 0; right: 0; height: var(--tooth); background: conic-gradient(from 135deg at 50% 0, var(--cream) 90deg, transparent 0) 0 0 / var(--tooth) var(--tooth) repeat-x; }
.receipt::before { top: calc(var(--tooth) * -1); transform: scaleY(-1); }
.receipt::after { bottom: calc(var(--tooth) * -1); }
.receipt-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 2px dashed var(--aub); font-weight: 700; font-size: var(--fs-label); }
.receipt dl { margin: 0; }
.receipt-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 15px 0; border-bottom: 1px solid var(--line-dark); align-items: baseline; }
.receipt dt { font-weight: 700; }
.receipt dt small { display: block; font-weight: 400; font-size: var(--fs-label); opacity: 0.75; }
.receipt dd { margin: 0; font-family: var(--display); word-spacing: var(--display-ws); font-size: var(--fs-h3); line-height: 1; text-align: right; white-space: nowrap; }
.receipt-foot { padding-top: 16px; font-size: var(--fs-label); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 700; }
.press { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; list-style: none; padding: 0; }
.press li { font-size: var(--fs-label); font-weight: 700; padding: 8px 12px; box-shadow: inset 0 0 0 1.5px var(--line-light); }

/* ---------- Split with image ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.split-media { position: relative; min-height: clamp(340px, 46vw, 680px); overflow: hidden; background: #140d16; }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-copy { background: var(--bg); color: var(--fg); padding: clamp(40px, 7vw, 110px) clamp(24px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.split-copy .label { margin: 0; }
.caption-tag { position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--turq); color: var(--aub); font-size: var(--fs-label); font-weight: 700; padding: 8px 12px; }

/* ---------- Posts ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.post { background: var(--pbg, #fff8ee); color: var(--aub); padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 14px; min-height: 290px; text-decoration: none; box-shadow: inset 0 0 0 2px var(--aub); transition: transform 0.2s var(--step), box-shadow 0.2s var(--step); }
.post:hover { transform: translate(-6px, -6px); box-shadow: inset 0 0 0 2px var(--aub), 6px 6px 0 var(--aub); }
.post h3 { font-size: var(--fs-large); }
.post p { font-size: var(--fs-small); }
.post-kind { font-size: var(--fs-label); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.post-kind::before { content: ""; width: 9px; height: 9px; background: var(--k, var(--orange)); }
.post[data-kind="loose"] { --k: var(--turq); }
.post-meta { margin-top: auto; font-size: var(--fs-label); font-weight: 700; opacity: 0.7; }
.post--feature { grid-column: span 2; --pbg: var(--aub); color: var(--cream); box-shadow: none; }
.post--feature:hover { box-shadow: 6px 6px 0 var(--orange); }
.post--feature h3 { font-size: var(--fs-h3-lg); }
.post[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
.chip { font: 700 var(--fs-label)/1 var(--body); padding: 13px 16px; background: transparent; color: var(--aub); border: 0; box-shadow: inset 0 0 0 2px var(--aub); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--aub); color: var(--cream); }
.chip:hover:not([aria-pressed="true"]) { background: var(--citrus); }

/* ---------- Services rows ---------- */
.rows { border-top: 2px solid var(--fg); }
.row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto; gap: clamp(16px, 4vw, 64px); align-items: start; padding: clamp(32px, 4.5vw, 64px) clamp(0px, 1vw, 16px); border-bottom: 2px solid var(--fg); transition: background 0.01s, color 0.01s, padding 0.2s var(--step); }
.row:hover { background: var(--fg); color: var(--bg); padding-inline: clamp(12px, 2vw, 28px); }
.row h3 { font-size: var(--fs-h3-lg); }
.row ul { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.row-tags::before { content: "Marketing calls this"; font-size: var(--fs-label); opacity: 0.6; margin-right: 6px; }
.row li { font-size: var(--fs-label); font-weight: 700; padding: 6px 10px; box-shadow: inset 0 0 0 1.5px currentColor; }
.row-tag { font-size: var(--fs-label); font-weight: 700; background: var(--orange); color: var(--aub); padding: 7px 10px; white-space: nowrap; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); counter-reset: s; }
.step { background: var(--sbg, var(--aub-2)); color: var(--sfg, var(--cream)); padding: clamp(24px, 2.6vw, 40px); min-height: 300px; display: flex; flex-direction: column; gap: 14px; counter-increment: s; }
.step::before { content: counter(s); font-family: var(--display); word-spacing: var(--display-ws); font-size: clamp(56px, 6vw, 96px); line-height: 0.9; }
.step:nth-child(2) { --sbg: var(--turq); --sfg: var(--aub); }
.step:nth-child(3) { --sbg: var(--orange); --sfg: var(--aub); }
.step h3 { margin-top: auto; }

.versus { display: grid; grid-template-columns: 1fr 1fr; }
.versus > div { padding: clamp(32px, 5vw, 80px) clamp(24px, 4vw, 64px); }
.versus .without { background: var(--aub-2); color: rgba(245, 239, 230, 0.82); }
.versus .with { background: var(--turq); color: var(--aub); }
.versus p { font-size: var(--fs-large); line-height: 1.45; max-width: 24em; }

.fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); }
.fit ul { list-style: none; margin: 18px 0 0; padding: 0; border-top: 2px solid var(--fg); }
.fit li { padding: 16px 0 16px 30px; border-bottom: 1px solid var(--line); position: relative; }
.fit li::before { content: ""; position: absolute; left: 0; top: 23px; width: 12px; height: 12px; background: var(--turq); }
.fit .no li::before { background: transparent; box-shadow: inset 0 0 0 2.5px var(--orange); }

.faq { border-top: 2px solid var(--fg); max-width: 920px; }
.faq details { border-bottom: 2px solid var(--fg); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; gap: 20px; align-items: center; font-family: var(--display); word-spacing: var(--display-ws); font-size: var(--fs-large); line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; background: var(--orange); flex: none; transition: transform 0.2s var(--step); }
.faq details[open] summary::after { transform: rotate(45deg) scale(0.8); background: var(--turq); }
.faq details > div { padding: 0 0 26px; max-width: 42em; }

/* ---------- Sprints ---------- */
.picker { background: var(--aub); color: var(--cream); padding: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.picker h3 { font-size: var(--fs-h3-lg); }
.picker .label { --accent: var(--turq); }   /* the picker is dark inside a cream band */
.picker-opts { display: grid; gap: 8px; }
.picker-opts button { font: 400 var(--fs-body)/1.4 var(--body); text-align: left; color: var(--cream); background: var(--aub-2); border: 0; padding: 16px 18px; cursor: pointer; display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: center; }
.picker-opts button::before { content: ""; width: 12px; height: 12px; box-shadow: inset 0 0 0 2px var(--cream); }
.picker-opts button:hover { background: var(--aub-3); }
.picker-opts button[aria-pressed="true"] { background: var(--citrus); color: var(--aub); font-weight: 700; }
.picker-opts button[aria-pressed="true"]::before { background: var(--aub); box-shadow: none; }
.sprints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); align-items: stretch; margin-top: clamp(20px, 3vw, 40px); }
.sprint { background: #fff8ee; color: var(--aub); box-shadow: inset 0 0 0 2px var(--aub); display: flex; flex-direction: column; transition: transform 0.25s var(--step), box-shadow 0.25s var(--step); scroll-margin-top: 100px; }
.sprint.is-pick { transform: translate(-8px, -8px); box-shadow: inset 0 0 0 2px var(--aub), 8px 8px 0 var(--orange); }
.sprint-top { background: var(--sc, var(--orange)); padding: clamp(22px, 2.4vw, 34px); display: grid; gap: 12px; min-height: 230px; align-content: space-between; }
.sprint:nth-child(2) { --sc: var(--turq); }
.sprint:nth-child(3) { --sc: var(--citrus); }
.sprint-top h3 { font-size: var(--fs-h3-lg); }
.sprint-pickflag { display: none; font-size: var(--fs-label); font-weight: 700; background: var(--aub); color: var(--cream); padding: 6px 10px; justify-self: start; }
.sprint.is-pick .sprint-pickflag { display: inline-block; }
.sprint-body { padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 20px; flex: 1; }
.sprint-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-block: 2px solid var(--aub); }
.sprint-facts div { padding: 14px 0; }
.sprint-facts div + div { padding-left: 16px; border-left: 2px solid var(--aub); }
.sprint-facts div > span { display: block; font-size: var(--fs-label); font-weight: 700; opacity: 0.7; }
.sprint-facts b { font-family: var(--display); word-spacing: var(--display-ws); font-weight: 400; font-size: var(--fs-large); }
.sprint h4 { font: 700 var(--fs-label)/1.2 var(--body); margin-bottom: 10px; }
.sprint ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.sprint li { padding: 7px 0 7px 22px; position: relative; }
.sprint li::before { content: ""; position: absolute; left: 0; top: 16px; width: 9px; height: 9px; background: var(--aub); }
.sprint .not li { opacity: 0.72; }
.sprint .not li::before { background: transparent; box-shadow: inset 0 0 0 2px var(--aub); }
.sprint .btn { margin-top: auto; justify-content: space-between; }
.sprint-note { font-size: var(--fs-small); font-weight: 700; }
.sprint-vat { font-size: var(--fs-small); opacity: 0.75; margin-top: 24px; max-width: 46em; }
/* "Marketing calls this" tags, the same style as the Services rows */
.sprint .sprint-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-label); }
.sprint-tags::before { content: "Marketing calls this"; opacity: 0.6; margin-right: 6px; }
.sprint .sprint-tags li { padding: 6px 10px; font-weight: 700; box-shadow: inset 0 0 0 1.5px currentColor; }
.sprint .sprint-tags li::before { display: none; }
.sprint-entry { margin-top: clamp(20px, 3vw, 40px); }
.sprint--wide { flex-direction: row; }
.sprint--wide .sprint-top { --sc: var(--aub); color: var(--cream); flex: 0 0 34%; min-height: 0; }
.sprint--wide .sprint-pickflag { background: var(--citrus); color: var(--aub); }
.sprint--wide .sprint-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px clamp(20px, 3vw, 44px); align-content: start; }
.sprint--wide .sprint-facts, .sprint--wide .sprint-body > p:not(.sprint-note) { grid-column: 1 / -1; }
.sprint--wide .btn { margin-top: 0; align-self: end; }
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--fg); }
.timeline--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* three steps (Visit); the breakpoints below still apply */
.timeline > div { padding: 22px 22px 0 0; position: relative; }
.timeline > div::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; background: var(--orange); }
.timeline b { display: block; font-size: var(--fs-label); margin-bottom: 10px; color: var(--accent); }
.timeline h3 { margin-bottom: 10px; }
/* Up to 900px the timeline is a strip that scrolls sideways and snaps one step per swipe. The strip bleeds to the
   viewport edges, the next step peeks in from the right, and each card carries its own piece of the line so the
   line stays continuous while the strip scrolls. */
@media (max-width: 900px) {
  .timeline {
    display: flex; gap: 0; border-top: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) 4px; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .timeline::-webkit-scrollbar { display: none; }
  .timeline > div { flex: 0 0 min(78vw, 360px); scroll-snap-align: start; border-top: 2px solid var(--fg); padding: 22px 28px 0 0; }
  .timeline > div:last-child { flex-basis: calc(min(78vw, 360px) + var(--gutter)); padding-right: calc(28px + var(--gutter)); }   /* the last card fills to the edge, so the strip ends clean */
  .timeline > div::before { top: -8px; }
  .timeline h3 { text-wrap: pretty; }
}

/* ---------- About ---------- */
.about-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: stretch; background: var(--turq); color: var(--aub); min-height: calc(100vh - 73px); min-height: calc(100svh - 73px); }   /* fills the first screen; 73px is the nav and its border */
@media (max-width: 820px) { .about-hero { min-height: 0; } }
.about-hero-copy { padding: clamp(56px, 9vh, 120px) clamp(24px, 4vw, 64px) clamp(56px, 9vh, 120px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); display: flex; flex-direction: column; justify-content: center; }
.about-hero .label { --accent: var(--aub); }
.portrait { position: relative; min-height: clamp(380px, 48vw, 760px); overflow: hidden; background: var(--aub); }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.bleed { margin: 0; position: relative; aspect-ratio: 1185 / 560; overflow: hidden; background: #b3121c; }
.bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.prose { max-width: 40em; font-size: var(--fs-lede); }
.prose h2 { margin: 1.6em 0 0.6em; font-size: var(--fs-h3-lg); }
.prose h2:first-child { margin-top: 0; }
.prose--body { font-size: var(--fs-body); }   /* legal text: body size, not the article's lede size */
.prose blockquote { margin: 1.6em 0; padding: 22px 26px; background: var(--aub); color: var(--cream); font-family: var(--display); word-spacing: var(--display-ws); font-size: var(--fs-h3); line-height: 1.25; }
.story { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 110px); }
.story aside { position: sticky; top: 110px; align-self: start; }
.career { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.career li { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); gap: clamp(14px, 3vw, 48px); padding: clamp(22px, 2.6vw, 36px) 0; border-bottom: 1px solid var(--line); }
.career .when { font-size: var(--fs-label); font-weight: 700; color: var(--turq); padding-top: 8px; }
.career h3 { margin-bottom: 10px; }
.career p { max-width: 38em; color: rgba(245, 239, 230, 0.84); }
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.rules > div { padding: clamp(24px, 2.6vw, 40px); min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.rules > div:nth-child(1) { background: var(--orange); }
.rules > div:nth-child(2) { background: var(--turq); }
.rules > div:nth-child(3) { background: var(--aub); color: var(--cream); }
.rules > div:nth-child(4) { background: var(--citrus); }

/* ---------- Visit ---------- */
.visit-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.status { background: var(--aub-2); padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 18px; }
.status-now { display: flex; align-items: center; gap: 14px; font-family: var(--display); word-spacing: var(--display-ws); font-size: var(--fs-h3-lg); line-height: 1.1; }
.status-dot { width: 18px; height: 18px; background: var(--aub-3); flex: none; }
.status[data-open="true"] .status-dot { background: var(--citrus); animation: blink 1.2s steps(2, jump-none) infinite; }
.status[data-open="true"] .status-now { color: var(--citrus); }
@keyframes blink { 50% { opacity: 0.25; } }
.hours { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-light); font-size: var(--fs-small); }
.hours li.is-today { color: var(--citrus); font-weight: 700; }
.hours .appt { color: inherit; opacity: 0.75; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }   /* links to the booking calendar */
.hours .appt:hover { opacity: 1; color: var(--citrus); }
.asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 2px solid var(--aub); }
.asks > div { padding: clamp(20px, 2.4vw, 34px); border-right: 2px solid var(--aub); border-bottom: 2px solid var(--aub); font-family: var(--display); word-spacing: var(--display-ws); font-size: var(--fs-large); line-height: 1.25; min-height: 150px; display: flex; align-items: flex-end; transition: background 0.01s; }
.asks > div:nth-child(3n) { border-right: 0; }
.asks > div:nth-last-child(-n+3) { border-bottom: 0; }
.asks > div:hover { background: var(--aub); color: var(--citrus); }
.find { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.map { position: relative; min-height: 440px; background: var(--aub-2); overflow: hidden; }
.map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-pin { position: absolute; left: 58%; top: 46%; z-index: 2; display: grid; gap: 8px; justify-items: start; }
.map-pin i { width: 22px; height: 22px; background: var(--orange); animation: blink 1.2s steps(2, jump-none) infinite; }
.map-pin span { background: var(--cream); color: var(--aub); font-size: var(--fs-label); font-weight: 700; padding: 7px 10px; white-space: nowrap; }
.facts { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.facts li { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.facts b { font-size: var(--fs-label); padding-top: 3px; }

/* ---------- Article ---------- */
.article { max-width: 760px; margin-inline: auto; }
.article h1 { font-size: clamp(34px, 5vw, 72px); margin-bottom: 26px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--fs-label); font-weight: 700; padding-block: 16px; border-block: 2px solid var(--aub); margin-bottom: clamp(28px, 4vw, 48px); }
.progress { position: fixed; top: 72px; left: 0; height: 5px; width: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); z-index: 49; }

/* ---------- CTA + footer ---------- */
.cta { text-align: left; overflow: hidden; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.cta h2 { font-size: clamp(38px, 6.4vw, 104px); line-height: 1; margin-bottom: clamp(24px, 3vw, 40px); }
.cta-alt { display: grid; gap: 12px; font-size: var(--fs-small); }
.cta-alt a { font-weight: 700; }
.footer { background: var(--aub); color: var(--cream); padding-block: clamp(48px, 7vw, 96px) 28px; border-top: 1px solid var(--line-light); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.6fr)); gap: clamp(24px, 4vw, 64px); }
.footer-mark { display: grid; grid-template-columns: repeat(3, var(--b)); gap: calc(var(--b) / 5); --b: clamp(26px, 3.4vw, 46px); margin-bottom: 26px; }
.footer-mark i { width: var(--b); height: var(--b); }
.footer-mark i:nth-child(-n+3) { background: #FF5E3A; }
.footer-mark i:nth-child(4), .footer-mark i:nth-child(5) { background: #F3A552; }
.footer-mark i:nth-child(6) { background: var(--citrus); grid-column: 1; }
.footer-sign { font-family: var(--display); word-spacing: var(--display-ws); font-size: var(--fs-h3-lg); line-height: 1.1; }
.footer-h { font: 700 var(--fs-label)/1.2 var(--body); margin-top: 0; color: var(--turq); margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; font-size: var(--fs-small); }
.footer ul a { text-decoration: none; display: inline-block; padding: 4px 0; }   /* padded so the tap target is tall enough on a phone */
.footer ul a:hover { color: var(--citrus); text-decoration: underline; }
.cookie-btn { background: none; border: 0; padding: 6px 0; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.cookie-btn:hover { color: var(--citrus); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-top: clamp(40px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--line-light); font-size: var(--fs-label); font-weight: 700; }


/* ---------- Motion ---------- */
.px { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: vt-in 0.42s steps(7, end) both; }
  @keyframes vt-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

  html.js [data-r] { opacity: 0; transform: translateY(22px); }
  html.js [data-r].in { opacity: 1; transform: none; transition: opacity 0.5s linear calc(var(--i, 0) * 70ms), transform 0.7s var(--ease) calc(var(--i, 0) * 70ms); }
  html.js [data-r="wipe"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
  html.js [data-r="wipe"].in { clip-path: inset(0 0 0 0); transition: clip-path 0.6s steps(6, end) calc(var(--i, 0) * 90ms); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .status[data-open="true"] .status-dot, .map-pin i { animation: none; }
  .comp-text .w { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ladder, .posts, .sprints, .steps { grid-template-columns: 1fr 1fr; }
  .ladder .card { min-height: 300px !important; }
  .rules { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .comp { grid-template-columns: 1fr; }
}
/* The nav switches to the menu button at 900px: between 820 and 900 the five links plus the button no longer fit on one line. */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links { position: fixed; inset: 72px 0 0 0; background: var(--aub); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 20px var(--gutter) 40px; display: none; overflow: auto; }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--line-light); }
  .nav-links a { font-family: var(--display); word-spacing: var(--display-ws); font-weight: 400; font-size: 30px; padding: 18px 0; width: 100%; }
  .nav-links .btn { margin-top: 24px; font-family: var(--body); font-size: var(--fs-body); font-weight: 700; padding: 18px 22px; width: auto; }
  .nav-links li:last-child { border: 0; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .hero, .about-hero, .split, .find, .versus, .tension, .evidence, .head-row, .phead-grid, .cta-grid, .visit-hero, .story, .picker, .fit { grid-template-columns: 1fr; }
  .sprint-top { min-height: 0; gap: 14px; }
  .sprint--wide { flex-direction: column; }
  .sprint--wide .sprint-body { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero-media { min-height: 62vw; order: 2; }
  .hero-mark { display: none; }
  .hero-copy, .about-hero-copy { padding-inline: var(--gutter); }
  .stack-bits { justify-self: start; --b: 44px; }
  .ladder, .posts, .sprints, .steps, .asks { grid-template-columns: 1fr; }
  .post--feature { grid-column: auto; }
  .asks > div { border-right: 0 !important; border-bottom: 2px solid var(--aub) !important; min-height: 0; }
  .asks > div:last-child { border-bottom: 0 !important; }
  .row { grid-template-columns: 1fr; gap: 12px; }
  .row-tag { justify-self: start; }
  .story aside { position: static; }
  .career li { grid-template-columns: 1fr; gap: 6px; }
  .comp-steps { grid-template-columns: 1fr 1fr; }
  .comp-text { min-height: 11em; }
  .split-media { order: -1; }
  .facts li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 520px) {
  .rules, .footer-grid { grid-template-columns: 1fr; }
  .rules > div { min-height: 0; }
  .hero h1 { font-size: 19vw; }
  .btn--lg, .btn-row > .btn { width: 100%; justify-content: space-between; }
  .logo { font-size: 22px; }
}

/* ---------- Quotes + Why page ---------- */
.quote { margin: 0; padding: clamp(24px, 2.6vw, 40px); background: #fff8ee; color: var(--aub); box-shadow: inset 0 0 0 2px var(--aub); display: flex; flex-direction: column; gap: 22px; }
.quote::before { content: ""; width: 14px; height: 14px; background: var(--orange); box-shadow: 20px 0 0 var(--orange); flex: none; }
.quote blockquote { margin: 0; font-family: var(--display); word-spacing: var(--display-ws); font-size: var(--fs-large); line-height: 1.28; }
.quote figcaption { margin-top: auto; padding-top: 16px; border-top: 2px solid currentColor; display: grid; gap: 3px; font-size: var(--fs-small); justify-items: start; }
.quote figcaption b { font-size: var(--fs-small); }
.quote--dark { background: var(--aub-2); color: var(--cream); box-shadow: none; }
.quote--lg { padding: clamp(28px, 4vw, 64px); max-width: 1040px; }
.quote--lg blockquote { font-size: var(--fs-h3-lg); line-height: 1.15; }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.whys { border-top: 2px solid var(--fg); }
.why-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); padding: clamp(28px, 4vw, 56px) 0; border-bottom: 2px solid var(--fg); align-items: start; }
.why-row h3 { font-size: var(--fs-h3-lg); margin-bottom: 18px; }
.why-row p { max-width: 30em; font-size: var(--fs-lede); }
.cmp-scroll { overflow-x: auto; }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.45; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 18px 18px; border-bottom: 1px solid var(--line-light); }
.cmp thead th { font-family: var(--display); word-spacing: var(--display-ws); font-weight: 400; font-size: var(--fs-large); border-bottom: 2px solid var(--cream); }
.cmp thead td { border-bottom: 2px solid var(--cream); }
.cmp tbody th { font-size: var(--fs-label); color: var(--turq); width: 17%; padding-left: 0; }
.cmp .me { background: var(--orange); color: var(--aub); font-weight: 700; border-bottom-color: rgba(38, 27, 41, 0.25); }
.cmp thead .me { border-bottom-color: var(--aub); }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }
@media (max-width: 1024px) { .quotes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .quotes, .why-row { grid-template-columns: 1fr; } }
/* On a phone the comparison table becomes a list: one block per row, each cell labelled with its column (data-col, set in build.py) */
@media (max-width: 820px) {
  .cmp { min-width: 0; display: block; }
  .cmp thead { display: none; }
  .cmp tbody, .cmp tr, .cmp tbody th { display: block; }
  .cmp tr { padding: 20px 0 14px; border-bottom: 1px solid var(--line-light); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp tbody th { width: auto; padding: 0 0 12px; border: 0; }
  .cmp td { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 8px 0; border: 0; }
  .cmp td::before { content: attr(data-col); font-size: var(--fs-label); font-weight: 700; opacity: 0.7; padding-top: 2px; }
  .cmp td.me { padding: 12px 14px; margin-bottom: 6px; }
}
.why-row--solo { grid-template-columns: minmax(0, 1fr); }
.hero-photo { overflow: hidden; min-height: clamp(560px, 84vh, 960px); display: flex; align-items: center; }
.hero-photo .wrap { position: relative; z-index: 2; width: 100%; }
.hero-photo-bg { position: absolute; inset: 0; z-index: 0; }
.hero-photo-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-photo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(38, 27, 41, 0.9) 0%, rgba(38, 27, 41, 0.7) 45%, rgba(38, 27, 41, 0.3) 100%), linear-gradient(rgba(38, 27, 41, 0.35), rgba(38, 27, 41, 0.1) 40%, rgba(38, 27, 41, 0.55)); }
.hero-photo .caption-tag { z-index: 2; }
.hero-photo .status { background: rgba(38, 27, 41, 0.88); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.hero-photo .lede { text-shadow: 0 1px 2px rgba(38, 27, 41, 0.6); }
.hero-photo h1 { max-width: none; }
.press--light li { box-shadow: inset 0 0 0 1.5px var(--line-dark); }
.split-copy .press { margin-top: 0; }
.cta--meetings .cta-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: start; }
.cta--meetings h2 { font-size: clamp(34px, 4.6vw, 74px); }
.cta--meetings .cta-alt { margin-top: 8px; max-width: 30em; }
.meetings { min-height: 560px; }   /* the HubSpot card brings its own colour (set in HubSpot) */
.meetings .meetings-iframe-container { min-height: 560px; }
.meetings iframe { display: block; }
@media (max-width: 820px) {
  .cta--meetings .cta-grid { grid-template-columns: 1fr; }   /* after the two-column rule above, so it wins on a phone */
  .meetings iframe { min-width: 0 !important; width: 100% !important; }   /* HubSpot sets min-width:312px inline, wider than a small phone's column */
}

.eur { font-family: var(--body); font-weight: 700; font-size: 0.78em; }   /* Lustra has no euro sign */
.sprints > .sprint:nth-child(n+4) { grid-column: 1 / -1; }
.cta--photo .split-copy { padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); gap: 28px; }
.cta--photo .split-copy .label { margin: 0; }
.cta--photo h2 { margin-bottom: 0; font-size: clamp(36px, 4.2vw, 68px); }   /* half-width column, so smaller than the full-width CTA */
.cta--photo .cta-alt { max-width: 30em; }
.cta--photo .split-media { min-height: clamp(360px, 52vw, 760px); }
@media (max-width: 820px) { .cta--photo .split-copy { padding-left: var(--gutter); } .cta--photo .split-media { order: 2; min-height: 70vw; } }
/* Alternative home header: photo in the right half, bit field unchanged behind the copy */
.hero--photo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.hero--photo .hero-media { position: relative; z-index: 1; margin-left: -8%; }   /* the dissolve zone overlaps the copy column so the bits run into the photo */
.hero--photo h1 { font-size: clamp(52px, 6.6vw, 108px); }
.hero--photo .hero-eyebrow, .hero--photo .hero-second { font-size: clamp(28px, 3.3vw, 58px); }
@media (max-width: 820px) { .hero--photo { grid-template-columns: 1fr; } .hero--photo .hero-media { min-height: 110vw; } }
/* Alternative hero, cutout version: Merlijn standing on the bit field, no photo background */
.hero--cutout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.hero--cutout h1 { font-size: clamp(56px, 8.4vw, 150px); }
.hero--cutout .hero-eyebrow, .hero--cutout .hero-second { font-size: clamp(30px, 4vw, 72px); }
.hero-cutout { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.hero-cutout img { height: 90%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; display: block; }
@media (max-width: 820px) { .hero--cutout { grid-template-columns: 1fr; } .hero-cutout { min-height: 90vw; } .hero-cutout img { height: 85vw; } }
/* Services: the rows run as a first year, each phase is a dark divider row */
.rows-intro { max-width: 46em; margin-bottom: clamp(40px, 6vw, 80px); }
.rows-intro h2 + p { margin-top: 18px; }
.phase { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto; gap: clamp(16px, 4vw, 64px); align-items: baseline; padding: clamp(22px, 2.6vw, 34px) clamp(12px, 2vw, 28px); background: var(--aub); color: var(--cream); border-bottom: 2px solid var(--fg); }
.row + .phase { margin-top: clamp(40px, 6vw, 96px); }   /* a pause before each new phase */
.phase h3 { font-size: var(--fs-h3); color: var(--citrus); }
.phase p { margin: 0; font-size: var(--fs-small); color: rgba(245, 239, 230, 0.85); }
@media (max-width: 820px) { .phase { grid-template-columns: 1fr; gap: 6px; } }
.facts-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.facts-strip > div { padding-left: 18px; border-left: 3px solid var(--orange); }
.facts-strip h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.facts-strip p { font-size: var(--fs-small); color: rgba(245, 239, 230, 0.8); }
@media (max-width: 820px) { .facts-strip { grid-template-columns: 1fr; } }
/* Sprint cards are collapsed in the grid; the card on top (picked or first) is open */
.sprint-toggle { font: 700 var(--fs-small) var(--body); color: var(--aub); background: none; border: 0; padding: 8px 0; margin: -8px 0; cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 10px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sprint-toggle::after { content: ""; width: 9px; height: 9px; background: var(--orange); transition: transform 0.2s var(--step); }
.sprint.is-open .sprint-toggle::after { transform: rotate(45deg); }
.sprint-more { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 36px); padding-top: 4px; }   /* air between You get, Not included and the tags */
.sprint:not(.is-open):not(.sprint--wide) .sprint-more { display: none; }
.sprint--wide .sprint-toggle { display: none; }
.sprint--wide .sprint-more { display: contents; }
/* About: the red-wall photo carries the spec-sheet quote; the photo drifts slower than the page (scroll-driven, where supported) */
.bleed--quote { aspect-ratio: auto; height: clamp(480px, 70vh, 820px); }
.bleed-quote { position: absolute; z-index: 2; left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); top: 50%; transform: translateY(-50%); max-width: 11em; margin: 0; font-family: var(--display); word-spacing: var(--display-ws); font-size: var(--fs-h2); line-height: 1.08; color: var(--cream); text-shadow: 0 2px 18px rgba(38, 27, 41, 0.45); }
.bleed--quote img { height: 130%; top: -15%; will-change: transform; }   /* moved by site.js on scroll; source is 3000px wide */
/* Phones and tablets: a 3:4 frame shows about a third of the wide photo, so the crop moves right to keep Merlijn in
   the frame (he stands at about 77% of the photo's width) and the quote sits left of him, centred vertically, as on desktop.
   height:auto, or the aspect ratio derives a width wider than the phone. */
@media (max-width: 820px) {
  .bleed--quote { aspect-ratio: 3 / 4; height: auto; }
  .bleed--quote img { object-position: 76% 50%; }
  .bleed-quote { left: var(--gutter); max-width: 58%; font-size: clamp(24px, 6.4vw, 40px); }
}
/* The quote on the red wall drops into place and fades in; its two orange bits land first */
.bleed-quote::before { content: ""; display: block; width: 14px; height: 14px; background: var(--orange); box-shadow: 20px 0 0 var(--orange); margin-bottom: 22px; }
@media (prefers-reduced-motion: no-preference) {
  html.js .bleed-quote[data-r="drop"] { opacity: 0; transform: translateY(calc(-50% - 80px)); }
  html.js .bleed-quote[data-r="drop"].in { opacity: 1; transform: translateY(-50%); transition: opacity 0.9s ease-out 0.15s, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
  html.js .bleed-quote[data-r="drop"]::before { opacity: 0; transform: translateY(-40px); }
  html.js .bleed-quote[data-r="drop"].in::before { opacity: 1; transform: none; transition: opacity 0.5s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
}

/* ---- Why: "check it" card, where a quote would sit ---- */
.why-check { border: 2px solid var(--fg); padding: clamp(20px, 2.4vw, 32px); align-self: start; }
.why-check .label { font-size: var(--fs-label); margin-bottom: 12px; }
.why-check p:not(.label) { font-size: var(--fs-body); margin-bottom: 16px; }
.why-row > div > .why-check { margin-top: 26px; }
.cmp tr:target { scroll-margin-top: 120px; }
.cmp tr:target th, .cmp tr:target td:not(.me) { background: var(--citrus); color: var(--aub); }

/* Services: the hero and the three callouts fill the first screen together; the hero takes the slack and centres its content */
.fill-screen { display: flex; flex-direction: column; min-height: calc(100vh - 73px); min-height: calc(100svh - 73px); }   /* 73px: the nav plus its border */
.fill-screen > .phead { flex: 1; display: flex; align-items: center; padding-block: clamp(32px, 5.5vh, 100px); }
.fill-screen > .band--tight { padding-block: clamp(28px, 4.5vh, 64px); }
.fill-screen > .phead > .wrap { width: 100%; }