/* site-v3 prototype - BCG-style layout in RBS colours (DEC-2026-010: cyan = interactive,
   pink = wordmark only). Pure ASCII. No external loads: fonts are self-hosted. */

@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #FFFFFF;
  --paper: #F3F8FC;
  --tint: #E9F2F9;
  --soft: #DDEFFB;
  --hairline: #D8E4ED;
  --ink: #0F1A22;
  --ink-2: #35454F;
  --muted: #56676F;
  --link: #0A6FA6;
  --btn-bg: #0A6FA6;
  --btn-hover: #085A87;
  --btn-fg: #FFFFFF;
  --focus: #0B84C4;
  --pink: #D23C86;
  --band: #0C2233;
  --on-band: #FFFFFF;
  --on-band-2: #C3D1DA;
  --band-link: #7AD2F7;
  --header-bg: rgb(255 255 255 / .86);
  --shadow: 0 1px 2px rgb(15 26 34 / .06), 0 8px 28px rgb(15 26 34 / .08);
  /* hero wash */
  --w1: #DDEFFB; --w2: #BFE3F7; --w3: #D7F2EF; --w4: #EEF4FB; --wash-base: #FFFFFF;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r: 24px;
  --r-sm: 14px;
  --max: 1320px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1117; --paper: #0F1820; --tint: #131E27; --soft: #17232D; --hairline: #243440;
    --ink: #E6EEF4; --ink-2: #B9C7D1; --muted: #93A4AF; --link: #45BEF2;
    --btn-bg: #45BEF2; --btn-hover: #7AD2F7; --btn-fg: #0F1A22; --focus: #45BEF2; --pink: #F06BAE;
    --band: #0E1F2E; --on-band: #E6EEF4; --on-band-2: #B9C7D1; --band-link: #7AD2F7;
    --header-bg: rgb(15 24 32 / .82); --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 28px rgb(0 0 0 / .35);
    --w1: #0F2A3D; --w2: #123A55; --w3: #0E3236; --w4: #101C27; --wash-base: #0A1117;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1117; --paper: #0F1820; --tint: #131E27; --soft: #17232D; --hairline: #243440;
  --ink: #E6EEF4; --ink-2: #B9C7D1; --muted: #93A4AF; --link: #45BEF2;
  --btn-bg: #45BEF2; --btn-hover: #7AD2F7; --btn-fg: #0F1A22; --focus: #45BEF2; --pink: #F06BAE;
  --band: #0E1F2E; --on-band: #E6EEF4; --on-band-2: #B9C7D1; --band-link: #7AD2F7;
  --header-bg: rgb(15 24 32 / .82); --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 28px rgb(0 0 0 / .35);
  --w1: #0F2A3D; --w2: #123A55; --w3: #0E3236; --w4: #101C27; --wash-base: #0A1117;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; } /* the ring follows each control's own radius */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.5rem, 5.6vw, 5rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 1.8vw, 1.75rem); }
p { margin: 0 0 1em; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.eyebrow { font: 600 .78rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; background: var(--btn-bg); color: var(--btn-fg); padding: 10px 16px; border-radius: 999px; z-index: 100; }
.skip-link:focus { top: 16px; }

/* ---------- buttons: pills, cyan is every interactive role ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; background: var(--btn-bg); color: var(--btn-fg);
  font: 600 .95rem/1 var(--sans); text-decoration: none; padding: .95em 1.4em; border-radius: 999px; border: 0;
  cursor: pointer; transition: background .2s, transform .2s; }
.btn:hover { background: var(--btn-hover); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { background: var(--tint); }
.btn--on-band { background: var(--band-link); color: #0F1A22; }
.btn--on-band:hover { background: #FFFFFF; }
.arrow { font-weight: 600; text-decoration: none; color: var(--link); }
.arrow::after { content: " \2192"; display: inline-block; transition: transform .2s; }
.arrow:hover::after { transform: translateX(4px); }

/* ---------- floating header ---------- */
.site-header { position: fixed; inset: 14px 0 auto; z-index: 50; pointer-events: none; }
.header__bar { pointer-events: auto; display: flex; align-items: center; gap: 24px; background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid var(--hairline); border-radius: 999px; box-shadow: var(--shadow);
  padding: 10px 10px 10px 24px; max-width: calc(var(--max) - 2 * clamp(16px, 4vw, 48px)); margin: 0 auto; }
.brand { font: 600 1.05rem/1 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand .mark { color: var(--pink); }
.nav { display: flex; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav a { display: block; padding: 10px 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .95rem; }
.nav a:hover { background: var(--tint); }
.theme-toggle { background: none; border: 0; color: var(--ink); cursor: pointer; width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem; }
.theme-toggle:hover { background: var(--tint); }
.header__bar .btn { padding: .8em 1.2em; font-size: .9rem; }
@media (max-width: 980px) {
  .nav { display: none; }
  .header__bar { gap: 8px; padding-left: 18px; }
  .header__bar .theme-toggle { margin-left: auto; }
}
@media (max-width: 480px) { .header__bar .btn .long { display: none; } }

/* ---------- hero with the moving colour wash ---------- */
.hero { position: relative; overflow: hidden; background: var(--wash-base); padding: clamp(150px, 22vh, 220px) 0 clamp(64px, 9vw, 110px); isolation: isolate; }
.wash { position: absolute; inset: -20%; z-index: -1; filter: blur(70px) saturate(1.1); }
.wash span { position: absolute; border-radius: 50%; opacity: .9; will-change: transform; }
.wash span:nth-child(1) { width: 62%; height: 70%; left: 2%;  top: 8%;  background: var(--w1); }
.wash span:nth-child(2) { width: 55%; height: 62%; left: 44%; top: -4%; background: var(--w2); }
.wash span:nth-child(3) { width: 48%; height: 58%; left: 30%; top: 46%; background: var(--w3); }
.wash span:nth-child(4) { width: 44%; height: 50%; left: 62%; top: 48%; background: var(--w4); }
/* Gemini silk loop: tinted into the palette, faded in once playing. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
  opacity: 0; transition: opacity 1.2s ease; filter: saturate(1.25) hue-rotate(-6deg); }
.hero__video.is-playing { opacity: 1; }
/* Veil: brand tint plus a white fade on the left so the headline always reads. */
.hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(255 255 255 / .72) 0%, rgb(255 255 255 / .35) 45%, rgb(255 255 255 / 0) 75%),
    linear-gradient(160deg, rgb(11 132 196 / .10), rgb(215 242 239 / .14)); }
:root[data-theme="dark"] .hero__video { filter: invert(1) hue-rotate(180deg) brightness(.55) saturate(1.4); }
:root[data-theme="dark"] .hero__veil { background: linear-gradient(90deg, rgb(10 17 23 / .78) 0%, rgb(10 17 23 / .4) 50%, rgb(10 17 23 / .1) 80%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__video { filter: invert(1) hue-rotate(180deg) brightness(.55) saturate(1.4); }
  :root:not([data-theme="light"]) .hero__veil { background: linear-gradient(90deg, rgb(10 17 23 / .78) 0%, rgb(10 17 23 / .4) 50%, rgb(10 17 23 / .1) 80%); }
}
.hero--page { padding: clamp(140px, 18vh, 190px) 0 clamp(48px, 6vw, 80px); }
.portrait-wrap { margin: 0; }
.portrait-wrap figcaption { color: var(--muted); font-size: .95rem; }
.portrait-wrap figcaption strong { color: var(--ink); }
.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.principles li { border-top: 2px solid var(--btn-bg); padding-top: 18px; }
.principles h3 { font-size: 1.35rem; }
.principles p { color: var(--ink-2); margin: 0; }
.apply { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.apply ol { margin: 0; padding-left: 1.2em; }
.apply li { margin-bottom: .6em; }
@media (max-width: 900px) { .apply { grid-template-columns: 1fr; } }
.nav a[aria-current="page"] { background: var(--tint); }
/* price card */
.price { display: grid; grid-template-columns: 1fr 1.2fr; border-radius: var(--r); overflow: hidden; border: 1px solid var(--hairline); }
.price__head { background: var(--band); color: var(--on-band); padding: clamp(28px, 4vw, 56px); }
.price__head p { color: var(--on-band-2); }
.price__amount { font: 400 clamp(2.6rem, 5vw, 4rem)/1 var(--serif); color: var(--on-band); margin: .2em 0 .25em; }
.price__amount small { font: 600 1rem/1 var(--sans); color: var(--on-band-2); }
.price__body { padding: clamp(28px, 4vw, 56px); background: var(--bg); }
.price__body h3 { font-size: 1.3rem; margin-top: 1.2em; }
.price__body h3:first-child { margin-top: 0; }
.ticks { list-style: none; margin: 0 0 1em; padding: 0; }
.ticks li { padding: 8px 0 8px 30px; position: relative; border-top: 1px solid var(--hairline); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 12px; height: 7px; border-left: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(-45deg); }
.rates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.rates li { background: var(--tint); border-radius: var(--r); padding: 28px; }
.rates strong { display: block; font: 400 2rem/1.1 var(--serif); margin: .2em 0 .3em; }
.rates span { color: var(--ink-2); font-size: .95rem; }
.faq details { border-top: 1px solid var(--hairline); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; font: 400 1.25rem/1.3 var(--serif); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--link); font-family: var(--sans); font-weight: 600; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 12px 0 0; color: var(--ink-2); max-width: 46em; }
@media (max-width: 900px) { .price { grid-template-columns: 1fr; } }
/* fade the wash to the page at the bottom so the next section is seamless */
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; z-index: -1; background: linear-gradient(to bottom, transparent, var(--bg)); }
@media (prefers-reduced-motion: no-preference) {
  .wash span:nth-child(1) { animation: drift-a 26s ease-in-out infinite alternate; }
  .wash span:nth-child(2) { animation: drift-b 31s ease-in-out infinite alternate; }
  .wash span:nth-child(3) { animation: drift-c 23s ease-in-out infinite alternate; }
  .wash span:nth-child(4) { animation: drift-d 37s ease-in-out infinite alternate; }
  .wash { animation: sheet 18s ease-in-out infinite alternate; }
}
@keyframes drift-a { to { transform: translate(18%, 10%) scale(1.15) rotate(18deg); } }
@keyframes drift-b { to { transform: translate(-22%, 16%) scale(.9) rotate(-24deg); } }
@keyframes drift-c { to { transform: translate(14%, -20%) scale(1.2) rotate(30deg); } }
@keyframes drift-d { to { transform: translate(-16%, -12%) scale(1.1); } }
/* the whole sheet sways a little, like cloth */
@keyframes sheet { 0% { transform: skewY(-2deg) scaleX(1.02); } 100% { transform: skewY(2deg) scaleX(.98); } }

.hero__inner { max-width: 1180px; }
.hero h1 { max-width: 22ch; }
/* Home: a short brand line, set big like BCG's. Interior heroes keep the default size. */
.hero:not(.hero--page) h1 { font-size: clamp(3rem, 8vw, 7rem); line-height: 1.02; letter-spacing: -.02em; }
.hero:not(.hero--page) { padding-bottom: clamp(80px, 11vw, 140px); }
.hero h1 { margin-bottom: .35em; }
.hero__support { font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--ink-2); max-width: 40em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 2rem; }
.commit { list-style: none; padding: 0; margin: clamp(48px, 7vw, 88px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hairline); }
.commit li { padding: 22px 24px 0 0; }
.commit li + li { padding-left: 24px; border-left: 1px solid var(--hairline); }
.commit strong { display: block; font: 400 1.6rem/1.15 var(--serif); margin-bottom: 6px; }
.commit span { color: var(--muted); font-size: .95rem; }
@media (max-width: 820px) {
  .commit { grid-template-columns: 1fr 1fr; }
  .commit li:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section--paper { background: var(--paper); }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head h2 { margin: 0; max-width: 18em; }
.lede { font: 400 clamp(1.4rem, 2.4vw, 2.1rem)/1.35 var(--serif); max-width: 32em; }

/* ---------- bento tiles ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.tile { position: relative; overflow: hidden; border-radius: var(--r); background: var(--tint); padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; min-height: 280px; text-decoration: none; color: var(--ink); isolation: isolate;
  transition: transform .35s ease, box-shadow .35s ease; }
a.tile:hover, .tile--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile h3 { margin-bottom: .4em; }
.tile p { color: var(--ink-2); }
.tile .arrow { margin-top: auto; }
.tile--ink { background: var(--band); color: var(--on-band); }
.tile--ink p { color: var(--on-band-2); }
.tile--ink .arrow { color: var(--band-link); }
.tile--soft { background: var(--soft); }
.span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; } .span-12 { grid-column: span 12; }
.stack { display: grid; gap: 20px; grid-template-rows: 1fr 1fr; }
@media (max-width: 900px) { .span-7, .span-5, .span-4, .span-6 { grid-column: span 12; } }

/* Feature tile: full-bleed tinted photo, text on an ink scrim */
.tile--feature { min-height: 620px; padding: 0; justify-content: flex-end; background: var(--band); color: #FFFFFF; }
.tile--feature .tile__media { position: absolute; inset: 0; z-index: -2; }
.tile--feature::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(12 34 51 / 0) 25%, rgb(12 34 51 / .55) 55%, rgb(8 26 40 / .94) 100%); }
.tile--feature figure { margin: 0; padding: clamp(28px, 3.5vw, 48px); }
.tile--feature .eyebrow { color: #C3D1DA; }
.tile--feature .ph { place-items: start start; padding: 72px 24px 24px; text-align: left; }
.tile--feature blockquote { margin: 0 0 1.2em; font: 400 clamp(1.25rem, 1.7vw, 1.6rem)/1.4 var(--serif); color: #FFFFFF; max-width: 30em; }
.tile--feature figcaption { color: #C3D1DA; font-size: .95rem; }
.tile--feature figcaption strong { display: block; color: #FFFFFF; font-size: 1.05rem; }
.tile__tag { position: absolute; top: 20px; left: 20px; background: rgb(255 255 255 / .92); color: #0F1A22; font: 600 .75rem/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase; padding: 9px 12px; border-radius: 999px; }

/* Tinted photography: greyscale image multiplied over a brand colour, like BCG's tinted stock.
   Drop a real <img> inside .tinted; the placeholder shows until then. */
.tinted { position: relative; background: var(--tint-color, #0B84C4); overflow: hidden; }
.tinted img, .tinted video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.05); mix-blend-mode: multiply; }
.tinted--soft { --tint-color: #9FD3F0; }
.tinted--deep { --tint-color: #0A6FA6; }
.ph { width: 100%; height: 100%; min-height: inherit; display: grid; place-items: center; text-align: center; padding: 24px;
  color: rgb(255 255 255 / .9); font: 600 .8rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  background:
    radial-gradient(60% 80% at 30% 30%, rgb(255 255 255 / .28), transparent 60%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / .06) 0 2px, transparent 2px 14px); }
.ph--dark { color: #0F1A22; }

/* ---------- ask a question (BCG Answer analogue - nothing is sent by this site) ---------- */
.ask { display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; align-items: stretch; }
.ask__panel { background: var(--soft); border-radius: var(--r); padding: clamp(28px, 4vw, 56px); }
.ask__art { border-radius: var(--r); overflow: hidden; position: relative; min-height: 360px; background: var(--wash-base); isolation: isolate; }
.ask__art .wash { inset: -30%; filter: blur(46px); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.4rem 0 1.2rem; padding: 0; list-style: none; }
.chip { font: 600 .9rem/1.2 var(--sans); background: var(--bg); color: var(--ink); border: 1.5px solid var(--hairline); border-radius: 999px;
  padding: .7em 1.05em; cursor: pointer; text-align: left; }
.chip:hover { border-color: var(--btn-bg); }
.chip[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.answer { background: var(--bg); border-radius: var(--r-sm); padding: 20px 22px; margin-bottom: 1.4rem; border-left: 4px solid var(--btn-bg); }
.answer p:last-child { margin: 0; }
.ask__form label { display: block; font-weight: 600; margin-bottom: 8px; }
.ask__row { display: flex; gap: 10px; background: var(--bg); border: 1.5px solid var(--hairline); border-radius: 999px; padding: 6px 6px 6px 22px; }
.ask__row:focus-within { border-color: var(--btn-bg); }
.ask__row textarea { flex: 1; border: 0; background: transparent; color: var(--ink); font: 1rem/1.4 var(--sans); resize: none; padding: 12px 0; min-height: 48px; }
.ask__row textarea:focus { outline: none; }
.fine { font-size: .85rem; color: var(--muted); margin-top: .9rem; }
@media (max-width: 900px) { .ask { grid-template-columns: 1fr; } .ask__art { min-height: 220px; } }

/* ---------- video feature ---------- */
.video { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.video__frame { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--band); position: relative; }
.video__frame .ph { color: #C3D1DA; }
.play { width: 76px; height: 76px; border-radius: 50%; background: rgb(255 255 255 / .94); display: grid; place-items: center; margin: 0 auto 14px; }
.play::before { content: ""; border-left: 20px solid #0A6FA6; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 6px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; padding: 18px 0 18px 64px; position: relative; border-top: 1px solid var(--hairline); }
.steps li::before { content: "0" counter(s); position: absolute; left: 0; top: 16px; font: 400 1.6rem/1 var(--serif); color: var(--link); }
.steps h3 { font-size: 1.2rem; margin-bottom: .3em; }
.steps p { margin: 0; color: var(--ink-2); font-size: .97rem; }
@media (max-width: 900px) { .video { grid-template-columns: 1fr; } }

/* ---------- insights row ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border-radius: var(--r); overflow: hidden; background: var(--bg); border: 1px solid var(--hairline); transition: transform .35s, box-shadow .35s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 16 / 10; }
.card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: 1.45rem; }
.card__body p { color: var(--ink-2); font-size: .97rem; }
.card__body .arrow { margin-top: auto; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* ---------- company ---------- */
.company { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.facts li:last-child { border-bottom: 1px solid var(--hairline); }
.facts dt, .facts .k { color: var(--muted); font-size: .9rem; font-weight: 600; letter-spacing: .04em; }
.portrait { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 20px; }
@media (max-width: 900px) { .company { grid-template-columns: 1fr; } .facts li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- careers band ---------- */
.careers { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r); overflow: hidden; background: var(--paper); }
.careers__copy { padding: clamp(32px, 5vw, 72px); }
.careers__media { min-height: 380px; }
.careers .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
@media (max-width: 900px) { .careers { grid-template-columns: 1fr; } .careers__media { min-height: 240px; } }

/* ---------- closing band + footer ---------- */
.band { background: var(--band); color: var(--on-band); position: relative; overflow: hidden; isolation: isolate; }
.band p { color: var(--on-band-2); }
.band a:not(.btn) { color: var(--band-link); }
.band .wash { opacity: .35; }
.band__inner { padding: clamp(72px, 9vw, 128px) 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px 64px; align-items: end; }
.band .fine { color: var(--on-band-2); }
@media (max-width: 900px) { .band__inner { grid-template-columns: 1fr; } }
.site-footer { background: #081A28; color: #C3D1DA; padding: 64px 0 40px; font-size: .95rem; }
.site-footer a { color: #E6EEF4; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .brand { color: #FFFFFF; font-size: 1.2rem; }
.site-footer .brand .mark { color: #F06BAE; }
.footer__cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; margin-bottom: 48px; }
.footer__cols h2 { font: 600 .78rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #93A4AF; margin: 0 0 14px; }
.footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__cols address { font-style: normal; }
.footer__legal { border-top: 1px solid #243440; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: #93A4AF; font-size: .85rem; }
@media (max-width: 900px) { .footer__cols { grid-template-columns: 1fr 1fr; } }

/* Prototype-only: marks things Brendan must confirm. Remove before go-live. */
.confirm { outline: 2px dashed #D8A855; outline-offset: 4px; }
.confirm-note { display: inline-block; background: #FFF4DC; color: #6B4A08; font: 600 .75rem/1.3 var(--sans); padding: 4px 8px; border-radius: 6px; margin-bottom: 10px; }

/* scroll reveal (only when motion is allowed and JS has run). The rise uses the separate
   translate property, so the hover lift and the touch press (transform) still work on revealed
   tiles and cards; browsers without translate simply fade (C-touch-a11y-forms, 2026-10-17). */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; translate: 0 24px; transition: opacity .8s ease, translate .8s ease, transform .35s ease, box-shadow .35s ease; }
  .js .reveal.is-in { opacity: 1; translate: none; }
}

/* ======================================================================
   SITE BUILD LAYER (2026-10-01): logo header, phone menu, and the site-v2
   components restyled in the v3 language so every page shares one look.
   ====================================================================== */

/* ---------- header: logo, phone menu ---------- */
.header__bar { padding-top: 6px; padding-bottom: 6px; }
.brand__logo { height: 50px; width: auto; display: block; }
.footer__logo { width: 190px; height: auto; margin-bottom: 18px; }
.footer__contact { margin: 0; }
.footer__boundary { color: #93A4AF; font-size: .85rem; max-width: 60em; margin: 0 0 18px; }
.footer__cols address + address { margin-top: 12px; }
.nav a.is-active { background: var(--tint); }
/* (A-navigation-chrome 2026-10-17: the old pre-burger phone-menu button was removed here;
   nothing rendered it, and its last live rule hid the header Book button on every phone.) */
@media (max-width: 480px) { .brand__logo { height: 42px; } } /* toggle stays 44px (C-touch-a11y-forms) */

/* ---------- home: featured-client byline ---------- */
.tile--feature .tile__media video { width: 100%; height: 100%; object-fit: cover; opacity: .55; mix-blend-mode: luminosity; }
.byline { display: flex; align-items: center; gap: 16px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid rgb(255 255 255 / .85); flex: none; }
.careers__media video { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(.3); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* ---------- interior pages: room under the floating header, soft wash behind the head ---------- */
main { background-repeat: no-repeat; background-size: 100% 680px;
  background-image: radial-gradient(60% 100% at 85% 0%, var(--w2) 0%, transparent 70%), radial-gradient(50% 90% at 10% 0%, var(--w1) 0%, transparent 70%); }
main > .page-head, main > .container.page-head, main > .with-aside { padding-top: clamp(130px, 17vh, 170px); }
.page-head { padding-bottom: clamp(40px, 6vw, 72px); }
header.page-head > .container > *, .container.page-head > * { max-width: 920px; }
.page-head h1, .with-aside__intro h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); }
.page-head .eyebrow, .with-aside__intro .eyebrow { color: var(--muted); }
.lead { font: 400 clamp(1.15rem, 1.6vw, 1.4rem)/1.5 var(--serif); color: var(--ink-2); max-width: 44em; }
.statement { font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
.micro { font: 600 .74rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .6em; }
.more { margin-top: 1.6rem; }
.more a { font-weight: 600; text-decoration: none; }
.more a::after { content: " \2192"; }
.fine { font-size: .87rem; color: var(--muted); }
.section--tight { padding: 32px 0; }
.section h2 { margin-bottom: .6em; }
.section > .container > p, .block > p, .prose p, .split__body p { max-width: 46em; }

/* breadcrumb */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 1.4rem; font-size: .88rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--hairline); }
.breadcrumb a { color: var(--muted); }

/* with-aside: head across the top, body left, sticky aside right */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 clamp(32px, 5vw, 80px); padding-bottom: clamp(64px, 8vw, 112px); }
.with-aside__intro { grid-column: 1 / -1; padding-bottom: clamp(32px, 5vw, 56px); max-width: 920px; }
.with-aside__body { grid-column: 1; min-width: 0; }
.with-aside__side { grid-column: 2; grid-row: 2 / span 2; align-self: start; position: sticky; top: 110px; display: grid; gap: 20px; }
@media (max-width: 960px) {
  .with-aside { grid-template-columns: 1fr; }
  .with-aside__side { grid-column: 1; grid-row: auto; position: static; }
}
.block { padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--hairline); }
.block:first-child { border-top: 0; padding-top: 0; }
.block h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.block h3 { font-size: 1.3rem; margin-top: 1.4em; }
.jumplist { background: var(--tint); border-radius: var(--r); padding: 22px 24px; }
.jumplist ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: .95rem; }
.jumplist a { text-decoration: none; }
.jumplist a:hover { text-decoration: underline; }

/* start-here card (sits in asides) */
.start-here { background: var(--band); color: var(--on-band); border-radius: var(--r); padding: 26px; }
.start-here .micro { color: var(--on-band-2); }
.start-here h2 { font-size: 1.7rem; color: var(--on-band); margin-bottom: .2em; }
.start-here__price { font: 400 2.2rem/1.1 var(--serif); margin: 0 0 .6em; }
.start-here .checklist li { color: var(--on-band-2); border-color: rgb(255 255 255 / .12); }
.start-here .checklist li::before { border-color: var(--band-link); }
.start-here .btn { background: var(--band-link); color: #0F1A22; width: 100%; justify-content: center; text-align: center; line-height: 1.3; }
.start-here .btn:hover { background: #FFFFFF; }
.start-here__contact { font-size: .88rem; color: var(--on-band-2); margin: 1em 0 0; }
.start-here a:not(.btn) { color: var(--band-link); }

/* lists */
.checklist, .crosslist { list-style: none; margin: 0 0 1.2em; padding: 0; }
.checklist li, .crosslist li { position: relative; padding: 10px 0 10px 32px; border-top: 1px solid var(--hairline); }
.checklist li:last-child, .crosslist li:last-child { border-bottom: 1px solid var(--hairline); }
.checklist li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 12px; height: 7px; border-left: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(-45deg); }
.crosslist li::before, .crosslist li::after { content: ""; position: absolute; left: 4px; top: 21px; width: 14px; height: 2px; background: var(--muted); transform: rotate(45deg); }
.crosslist li::after { transform: rotate(-45deg); }
.deflist { margin: 0; }
.deflist > div { display: grid; grid-template-columns: 14em 1fr; gap: 8px 32px; padding: 20px 0; border-top: 1px solid var(--hairline); }
.deflist dt { font: 400 1.2rem/1.3 var(--serif); }
.deflist dd { margin: 0; }
.deflist dd p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .deflist > div { grid-template-columns: 1fr; } }
.sources { font-size: .9rem; color: var(--ink-2); padding-left: 1.2em; display: grid; gap: 6px; }
.routes { list-style: none; margin: 1em 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.routes a { display: block; height: 100%; text-decoration: none; background: var(--tint); border-radius: var(--r-sm); padding: 18px 20px; color: var(--ink); transition: transform .25s, box-shadow .25s; }
.routes a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.routes__label { display: block; font: 400 1.15rem/1.3 var(--serif); margin-bottom: 6px; }
.routes__test { display: block; font-size: .9rem; color: var(--ink-2); }

/* fit */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fit__col { background: var(--tint); border-radius: var(--r); padding: 26px; }
.fit__col--no { background: var(--paper); border: 1px solid var(--hairline); }
.fit__col h3 { margin-top: 0; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* notices and callouts */
.notice { border-radius: var(--r-sm); padding: 18px 22px; background: var(--tint); border-left: 4px solid var(--link); margin: 1.2em 0; }
.notice--warn { background: #FFF6E5; border-left-color: #B7791F; color: #3D2A06; }
.notice--warn a { color: #7A4E0A; }
.notice__title { font-weight: 600; margin-bottom: .3em; }
.notice p:last-child { margin-bottom: 0; }
:root[data-theme="dark"] .notice--warn { background: #2A2110; color: #F1E3C4; border-left-color: #D8A855; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .notice--warn { background: #2A2110; color: #F1E3C4; border-left-color: #D8A855; } }
.callout { background: var(--soft); border-radius: var(--r); padding: clamp(24px, 3vw, 36px); margin: 1.6em 0; }
.callout h3 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.callout--stance { background: none; border-left: 3px solid var(--link); border-radius: 0; padding: 6px 0 6px 24px; }
.callout--stance p { font: 400 clamp(1.3rem, 2vw, 1.7rem)/1.35 var(--serif); color: var(--ink); }

/* tables */
.table-wrap { overflow-x: auto; border-radius: var(--r-sm); border: 1px solid var(--hairline); margin: 1em 0; }
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table caption { text-align: left; padding: 14px 18px; font-weight: 600; background: var(--paper); border-bottom: 1px solid var(--hairline); }
.table th, .table td { padding: 12px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--hairline); }
.table thead th { background: var(--tint); font: 600 .78rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-top: 0; }
.table tbody th { font-weight: 600; }
.table .num { text-align: right; white-space: nowrap; }
.table-note { font-size: .88rem; color: var(--muted); }
.who { display: inline-block; font: 600 .75rem/1 var(--sans); padding: 6px 10px; border-radius: 999px; background: var(--tint); color: var(--ink); white-space: nowrap; }
.who--me { background: var(--btn-bg); color: var(--btn-fg); }
.who--both { background: var(--soft); }

/* grids and cards */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }
.card { padding: clamp(22px, 2.6vw, 32px); }
.card h3 { font-size: 1.4rem; }
.card p { color: var(--ink-2); }
.card__foot { margin-top: auto; padding-top: .4em; margin-bottom: 0; }
.card__foot a, .card__link { font-weight: 600; text-decoration: none; }
.card__link::after { content: " \2192"; }
.card--rule { border-top: 3px solid var(--link); }
.card--link { position: relative; }
.card--link .card__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card__amount { font: 400 clamp(2.4rem, 4vw, 3.2rem)/1 var(--serif); color: var(--ink); margin: .2em 0 .4em; }
.price-card__unit { font: 600 .95rem/1 var(--sans); color: var(--muted); }

/* split: heading left, body right */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.split + .split { margin-top: clamp(40px, 5vw, 64px); }
.split--intro { margin-bottom: clamp(28px, 4vw, 48px); }
.split__head h2 { margin: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* v2 timeline steps: numbers come from the shared .steps counter */
.steps--row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.steps--row li { padding: 56px 0 0; border-top: 2px solid var(--link); }
.steps--row li::before { top: 14px; }
@media (max-width: 900px) { .steps--row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps--row { grid-template-columns: 1fr; } }
.steps__title { font-size: 1.2rem; }

/* faq (v2 markup) */
.faq__answer { margin-top: 12px; color: var(--ink-2); }
.faq__answer p { max-width: 46em; }

/* quotes */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.quote { margin: 0; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.section--paper .quote { background: var(--bg); }
.quote blockquote { margin: 0 0 1.2em; }
.quote blockquote p { font: 400 1.2rem/1.5 var(--serif); color: var(--ink); }
.quote blockquote p::before { content: "\201C"; }
.quote blockquote p::after { content: "\201D"; }
.quote figcaption { margin-top: auto; color: var(--muted); font-size: .92rem; }
.quote__name { display: block; color: var(--ink); font-weight: 600; }
.quote__heading { font-weight: 600; }
.quote__note { font-size: .85rem; color: var(--muted); margin: .8em 0 0; }

/* person (about) */
.person { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
.person__mono, .person__photo { width: clamp(120px, 14vw, 180px); aspect-ratio: 1; border-radius: 50%; }
.person__mono { display: grid; place-items: center; background: var(--soft); font: 400 2.4rem/1 var(--serif); color: var(--link); }
.person__photo { height: auto; object-fit: cover; object-position: 50% 18%; }
@media (max-width: 600px) { .person { grid-template-columns: 1fr; } }

/* contact */
.contact-lines { list-style: none; padding: 0; margin: 1.4em 0 0; display: grid; gap: 8px; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ---------- what we do: figures band ---------- */
.figures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); }
.figures li { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--hairline); }
.figures li:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--hairline); }
.figures strong { display: block; font: 400 clamp(3rem, 6vw, 5rem)/1 var(--serif); letter-spacing: -.02em; color: var(--link); margin-bottom: 10px; }
.figures span { color: var(--ink-2); }
@media (max-width: 820px) {
  .figures { grid-template-columns: 1fr 1fr; }
  .figures li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .figures li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--hairline); }
}

/* ---------- header: bigger logo (Brendan 2026-10-02: name hard to read) + burger ---------- */
.brand__logo { height: 64px; }
.header__bar { padding-top: 5px; padding-bottom: 5px; padding-left: 10px; gap: 14px; }
@media (max-width: 480px) { .brand__logo { height: 52px; } }
.burger { display: none; width: 48px; height: 48px; border-radius: 16px; border: 0; background: var(--tint); cursor: pointer; flex: none; position: relative; }
.js .burger:not([hidden]) { display: block; }
.burger:hover { background: var(--soft); }
.burger__lines, .burger__lines::before, .burger__lines::after { position: absolute; left: 13px; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; content: ""; }
.burger__lines { top: 23px; }
.burger__lines::before { top: -7px; left: 0; }
.burger__lines::after { top: 7px; left: 0; }
/* The burger replaces the old "Menu" pill on small screens. */
@media (max-width: 980px) { .js .site-nav { display: none; } }

/* ---------- full-screen menu ---------- */
.megamenu { position: fixed; inset: 0; z-index: 200; background: var(--bg); overflow-y: auto; pointer-events: auto; }
.megamenu[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .megamenu:not([hidden]) { animation: mm-in .28s ease; } }
@keyframes mm-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.megamenu__top { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--hairline); }
.megamenu__close { width: 48px; height: 48px; border-radius: 16px; border: 0; background: var(--tint); color: var(--ink); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.megamenu__close:hover { background: var(--soft); }
.megamenu__grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); min-height: calc(100vh - 78px); }
.megamenu__side { border-right: 1px solid var(--hairline); padding: 20px 0 32px; }
.megamenu__sections { list-style: none; margin: 0 0 20px; padding: 0 12px; }
.megamenu__sections button, .megamenu__sections a { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font: 400 clamp(1.3rem, 1.8vw, 1.6rem)/1.2 var(--serif); color: var(--ink); text-decoration: none; padding: 14px 16px; border-radius: 14px; }
.megamenu__sections button[aria-pressed="true"], .megamenu__sections button:hover, .megamenu__sections a:hover { background: var(--tint); }
.megamenu__sections li + li { border-top: 1px solid var(--hairline); }
.megamenu__feature-media { margin: 0 24px; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 7; }
.megamenu__feature-media video { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.megamenu__feature { padding: 18px 28px 0; }
.megamenu__feature[hidden] { display: none; }
.megamenu__feature-title { font: 400 clamp(1.7rem, 2.4vw, 2.2rem)/1.15 var(--serif); margin: 0 0 .3em; }
.megamenu__within { margin: 26px 0 10px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.megamenu__mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.megamenu__mini a { color: var(--ink); text-underline-offset: .25em; }
.megamenu__panels { padding: 0; }
.megamenu__panel[hidden] { display: none; }
.megamenu__head { padding: 26px clamp(24px, 3vw, 40px) 18px; border-bottom: 1px solid var(--hairline); }
.megamenu__title { font: 400 1.5rem/1.2 var(--serif); margin: 0 0 4px; }
.megamenu__head p:not(.megamenu__title) { margin: 0; color: var(--ink-2); }
.megamenu__links { list-style: none; margin: 0; padding: 24px clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; }
.megamenu__links a { display: block; padding: 12px 0; color: var(--ink); text-decoration: none; font-size: 1.1rem; border-bottom: 1px solid transparent; }
.megamenu__links a:hover { color: var(--link); border-bottom-color: var(--hairline); }
@media (max-width: 820px) {
  .megamenu__grid { grid-template-columns: 1fr; min-height: 0; }
  .megamenu__side { border-right: 0; border-bottom: 1px solid var(--hairline); order: 2; }
  .megamenu__panels { order: 1; }
  .megamenu__links { grid-template-columns: 1fr; }
  .megamenu__feature-media { display: none; }
}
html.menu-open { overflow: hidden; }

/* ---------- "How can we help?" block: menu bottom-right and footer ---------- */
.assist__title { font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1.2 var(--serif); margin: 0 0 .4em; }
.assist p:not(.assist__title) { max-width: 34em; }
.assist__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 1.2em 0 0; }
.megamenu__assist { margin: 8px clamp(24px, 3vw, 40px) 32px; padding: clamp(22px, 3vw, 36px); background: var(--paper); border-radius: var(--r);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.megamenu__assist .assist p:not(.assist__title) { color: var(--ink-2); }
.footer__assist { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px;
  border-top: 1px solid #243440; padding: 36px 0; margin-bottom: 24px; }
.site-footer .assist__title { color: #FFFFFF; }
.site-footer .btn { background: #45BEF2; color: #0F1A22; }
.site-footer .btn:hover { background: #FFFFFF; text-decoration: none; }
.site-footer .arrow { color: #7AD2F7; }
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); background: var(--tint); }
.social a:hover { color: var(--link); background: var(--soft); }
.social svg { width: 22px; height: 22px; }
.site-footer .social a { color: #E6EEF4; background: rgb(255 255 255 / .08); }
.site-footer .social a:hover { color: #7AD2F7; background: rgb(255 255 255 / .14); }

/* ---------- About section: floating sub-menu (BCG "About BCG:" bar) ---------- */
.subnav { position: fixed; z-index: 45; left: 0; right: 0; top: 104px; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.subnav__bar { pointer-events: auto; display: flex; align-items: center; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--header-bg); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid var(--hairline); border-radius: 999px; box-shadow: var(--shadow); padding: 6px 8px 6px 20px; }
.subnav__bar::-webkit-scrollbar { display: none; }
.subnav__label { font: 700 .78rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; margin-right: 6px; }
.subnav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.subnav a { display: block; white-space: nowrap; padding: 10px 14px; border-radius: 999px; text-decoration: none; color: var(--ink);
  font: 500 .82rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.subnav a:hover { background: var(--tint); }
.subnav a[aria-current="page"] { background: var(--soft); color: var(--link); }
main:has(> .subnav) .hero--page { padding-top: clamp(190px, 24vh, 240px); }
@media (max-width: 640px) { .subnav { top: 80px; } .subnav__label { display: none; } .subnav__bar { padding-left: 8px; } }

/* ---------- About pages: leader card, pledges, big figure, reviews badge ---------- */
.leader { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.leader__photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; }
.leader__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.leader__body h3 { font-size: clamp(2rem, 3.4vw, 3rem); }
@media (max-width: 760px) { .leader { grid-template-columns: 1fr; } .leader__photo { max-width: 360px; } }
.pledges { list-style: none; margin: 0; padding: 0; counter-reset: p; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 5vw, 80px); }
.pledges li { counter-increment: p; border-top: 1px solid var(--hairline); padding: 32px 0 32px 84px; position: relative; }
.pledges li::before { content: "0" counter(p); position: absolute; left: 0; top: 26px; font: 400 2.6rem/1 var(--serif); color: var(--link); }
.pledges h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.pledges p { color: var(--ink-2); margin: 0; }
@media (max-width: 820px) { .pledges { grid-template-columns: 1fr; } }
.figure-big { font: 400 clamp(4.5rem, 11vw, 9rem)/.95 var(--serif); letter-spacing: -.03em; color: var(--link); margin: 0 0 .2em; }
.reviews-badge { display: inline-flex; align-items: center; gap: 20px; text-decoration: none; color: var(--ink); background: var(--tint);
  border-radius: var(--r); padding: 22px 28px; }
.reviews-badge__num { font: 400 3.4rem/1 var(--serif); color: var(--link); }
.reviews-badge:hover { box-shadow: var(--shadow); }

/* ---------- case study: sticky "at a glance" beside the story ---------- */
.case { display: grid; grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.case__glance { position: sticky; top: 170px; background: var(--tint); border-radius: var(--r); padding: 26px; }
.case__glance dl { margin: 0; }
.case__glance dl > div { padding: 12px 0; border-top: 1px solid var(--hairline); }
.case__glance dt { font: 600 .74rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.case__glance dd { margin: 4px 0 0; }
.case__body .block:first-child { padding-top: 0; }
.case__body .quote { margin-top: 8px; }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } .case__glance { position: static; } }

/* ---------- home: "How can we help you today?" (two dropdowns drive the card) ---------- */
.help { background: var(--soft); }
.help__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.help__ask h2 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.help__ask > p { color: var(--ink-2); max-width: 34em; font-size: 1.1rem; }
.help__form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.help__select { appearance: none; -webkit-appearance: none; font: 600 1rem/1.2 var(--sans); color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--ink); border-radius: 14px; padding: 15px 48px 15px 18px; cursor: pointer; min-width: 240px; flex: 1 1 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='%230F1A22' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; }
.help__select--dark { background-color: var(--band); color: #FFFFFF; border-color: var(--band);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.help__select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.help__card { background: var(--bg); border-radius: var(--r); padding: clamp(26px, 3.5vw, 44px); box-shadow: var(--shadow); }
.help__big { font: 400 clamp(4rem, 8vw, 6.5rem)/.95 var(--serif); letter-spacing: -.03em; color: var(--link); margin: .1em 0 .15em; }
.help__line { font: 400 1.35rem/1.3 var(--serif); margin-bottom: 1em; }
.help__facts { list-style: none; margin: 0 0 1.2em; padding: 0; }
.help__facts li { padding: 9px 0; border-top: 1px solid var(--hairline); color: var(--ink-2); }
.help__facts li[hidden] { display: none; }
.help__note { font-size: .92rem; color: var(--muted); }
.help__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .help__card.is-swapping .help__big, .help__card.is-swapping .help__line, .help__card.is-swapping .help__facts { opacity: 0; transform: translateY(6px); }
  .help__big, .help__line, .help__facts { transition: opacity .25s ease, transform .25s ease; }
}
:root[data-theme="dark"] .help__select--dark { background-color: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='%230F1A22' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .help__select { border-color: var(--hairline-2, var(--hairline));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='%23E6EEF4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .help__select--dark { background-color: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='%230F1A22' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
/* minmax(0, 1fr), not 1fr: a select's min-content is its longest option, which pushed the
   section to 417px on a 375px phone (found 2026-10-02). */
.help__select { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .help__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- AI page: observe-plan-act-check cycle ---------- */
.cycle { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.cycle li { position: relative; padding: 22px 24px 0 0; border-top: 2px solid var(--link); }
.cycle li + li { padding-left: 24px; }
.cycle li:not(:last-child)::after { content: "\2192"; position: absolute; right: -10px; top: -15px; background: var(--bg); color: var(--link); font-weight: 600; padding: 0 4px; }
.cycle h3 { font-size: 1.4rem; margin-bottom: .3em; }
.cycle p:not(.eyebrow) { color: var(--ink-2); margin: 0; }
@media (max-width: 760px) { .cycle { grid-template-columns: 1fr 1fr; gap: 24px 0; } .cycle li:nth-child(3) { padding-left: 0; } .cycle li::after { display: none; } }

/* ---------- photo slots (filled by the builder when a file exists) ---------- */
.photo-slot { position: relative; overflow: hidden; width: 100%; }
.photo-slot.tinted { background: var(--tint-color, #0B84C4); }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot .ph { position: absolute; inset: 0; min-height: 0; }
.tile__photo { margin: calc(-1 * clamp(24px, 3vw, 40px)) calc(-1 * clamp(24px, 3vw, 40px)) 22px; border-radius: var(--r) var(--r) 0 0; }
.media-wide { border-radius: var(--r); }
.office__photo { border-radius: var(--r-sm); margin-bottom: 18px; }
/* Dark mode: multiply over a near-black tint flattened every photo to a navy block. Blend by
   luminosity at half strength instead: the photo keeps its tonal range and still takes the
   tint's hue. Covers slot photos, the portrait and the tinted videos. Light mode unchanged.
   (C-touch-a11y-forms 2026-10-17; replaces the old dark .photo-slot opacity .85 rule.) */
:root[data-theme="dark"] .tinted img, :root[data-theme="dark"] .tinted video { mix-blend-mode: luminosity; opacity: .5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tinted img, :root:not([data-theme="light"]) .tinted video { mix-blend-mode: luminosity; opacity: .5; } }

/* ---------- about: timeline, inline personal social row, placeholder marker ---------- */
.timeline { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.timeline li { position: relative; padding: 0 0 36px 40px; border-left: 2px solid var(--hairline); margin-left: 8px; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--link); box-shadow: 0 0 0 4px var(--paper); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline__when { font: 600 .78rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.timeline h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); margin-bottom: .4em; }
.timeline p { max-width: 42em; }
.timeline__sources { font-size: .88rem; color: var(--muted); }
.timeline .ticks li { font-size: .97rem; }
.social--inline { margin-top: 18px; }
.hero .leader__body h1 { margin-bottom: .3em; }
/* Unfilled facts show as amber chips in preview so they cannot be missed; the builder warns too. */
[data-placeholder] { background: #FFF4DC; color: #6B4A08; border-radius: 6px; padding: 2px 6px; }
span[data-placeholder] { display: inline; }

/* ---------- careers: role profiles ---------- */
.roles { display: grid; gap: 20px; }
.role { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r); padding: clamp(24px, 3.5vw, 44px); }
.role__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; margin-bottom: 20px; }
.role__head h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0; }
.role__status { margin: 0; font: 600 .78rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border: 1.5px solid var(--hairline); border-radius: 999px; padding: 10px 14px; white-space: nowrap; }
.role__status--open { color: var(--btn-fg); background: var(--btn-bg); border-color: var(--btn-bg); }
.role__body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(24px, 4vw, 56px); }
.role__body h4 { font: 600 .8rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.role__body .ticks { margin: 0; }
.role__meta { margin: 20px 0 0; font-size: .9rem; color: var(--muted); }
@media (max-width: 760px) { .role__body { grid-template-columns: 1fr; } }

/* ---------- footer legal row, sitemap page ---------- */
.footer__legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer__legal-links a { font-size: .85rem; }
.sitemap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px clamp(24px, 4vw, 64px); }
.sitemap h2 { font-size: 1.3rem; margin: 0 0 .5em; }
.sitemap h2 + ul + h2 { margin-top: 1.6em; }
.sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sitemap a { text-decoration: none; }
.sitemap a:hover { text-decoration: underline; }
@media (max-width: 760px) { .sitemap { grid-template-columns: 1fr; } }

/* ---------- what we do: animated Venn ---------- */
.venn { margin: clamp(40px, 6vw, 80px) auto 0; max-width: 920px; }
/* overflow: hidden keeps the slide-in start position and the breathing scale inside the stage;
   without it the right circle pushed the page 7px sideways on phones (found 2026-10-02). The
   1.5% inset leaves room for the blur so the clip never shows a hard edge. */
.venn__stage { position: relative; aspect-ratio: 1.7; isolation: isolate; overflow: hidden; }
.venn__circle { position: absolute; top: 1.5%; width: 57%; aspect-ratio: 1; border-radius: 50%; filter: blur(2px); mix-blend-mode: multiply; }
.venn__circle--a { left: 1.5%; background: radial-gradient(circle at 30% 25%, #EEF7FD 0%, #BFE3F7 55%, #8CCDEF 100%); }
.venn__circle--b { right: 1.5%; background: radial-gradient(circle at 70% 75%, #9FE6DE 0%, #C9F0EC 55%, #E6F8F6 100%); }
.venn__label { position: absolute; top: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap;
  font: 400 clamp(1.1rem, 3vw, 2.3rem)/1.1 var(--serif); color: #2C4A5C; }
.venn__label--a { left: 19%; }
.venn__label--b { left: 81%; }
.venn__label--mid { left: 50%; color: #0F1A22; font-weight: 600; }
:root[data-theme="dark"] .venn__circle { mix-blend-mode: screen; }
:root[data-theme="dark"] .venn__circle--a { background: radial-gradient(circle at 30% 25%, #1E5878 0%, #123A55 60%, #0D2B40 100%); }
:root[data-theme="dark"] .venn__circle--b { background: radial-gradient(circle at 70% 75%, #1C6B66 0%, #0E3A3E 60%, #0B2A2D 100%); }
:root[data-theme="dark"] .venn__label { color: #C3D1DA; }
:root[data-theme="dark"] .venn__label--mid { color: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .venn__circle { mix-blend-mode: screen; }
  :root:not([data-theme="light"]) .venn__circle--a { background: radial-gradient(circle at 30% 25%, #1E5878 0%, #123A55 60%, #0D2B40 100%); }
  :root:not([data-theme="light"]) .venn__circle--b { background: radial-gradient(circle at 70% 75%, #1C6B66 0%, #0E3A3E 60%, #0B2A2D 100%); }
  :root:not([data-theme="light"]) .venn__label { color: #C3D1DA; }
  :root:not([data-theme="light"]) .venn__label--mid { color: #FFFFFF; }
}
/* Motion: the circles slide together as the figure scrolls in, the overlap label arrives
   last, then the circles breathe slowly. Static with reduced motion or without JS. */
@media (prefers-reduced-motion: no-preference) {
  .js .venn.reveal { opacity: 1; translate: none; }
  .js .venn .venn__circle { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), opacity 1.2s ease; opacity: 0; }
  .js .venn .venn__circle--a { transform: translateX(-22%); }
  .js .venn .venn__circle--b { transform: translateX(22%); }
  .js .venn .venn__label { opacity: 0; transition: opacity .9s ease .5s; }
  .js .venn .venn__label--mid { transition-delay: 1.3s; }
  .js .venn.is-in .venn__circle { opacity: 1; transform: none; }
  .js .venn.is-in .venn__label { opacity: 1; }
  .js .venn.is-in .venn__circle--a { animation: venn-a 9s ease-in-out 1.6s infinite alternate; }
  .js .venn.is-in .venn__circle--b { animation: venn-b 11s ease-in-out 1.6s infinite alternate; }
}
@keyframes venn-a { to { transform: translate(2%, -2%) scale(1.03); } }
@keyframes venn-b { to { transform: translate(-2%, 2%) scale(1.03); } }

/* ---------- what we do: tabs and list/detail picker (BCG-style explorer) ---------- */
h4 { font: 400 1.5rem/1.2 var(--serif); margin: 0 0 .5em; }
.explorer__tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--hairline); margin-bottom: clamp(24px, 3vw, 40px); }
.explorer__tabs button { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 14px 18px;
  font: 600 .95rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.explorer__tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--link); }
.explorer__tabs button:hover { color: var(--ink); }
.js .explorer[data-ready] .explorer__fallback { display: none; }
.explorer__panel + .explorer__panel { margin-top: 48px; }
.js .explorer[data-ready] .explorer__panel + .explorer__panel { margin-top: 0; }
.explorer__panel[hidden] { display: none; }
.picker { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(24px, 4vw, 64px); align-items: start; }
.picker__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.picker__list li { border-bottom: 1px solid var(--hairline); }
.picker__list button { width: 100%; text-align: left; background: none; border: 0; padding: 16px 32px 16px 0; position: relative;
  font: 400 clamp(1.15rem, 1.6vw, 1.4rem)/1.3 var(--serif); color: var(--ink-2); cursor: pointer; }
.picker__list button::after { content: "\2192"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--sans);
  color: var(--link); opacity: 0; transition: opacity .2s, transform .2s; }
.picker__list button:hover, .picker__list button[aria-pressed="true"] { color: var(--ink); }
.picker__list button[aria-pressed="true"]::after, .picker__list button:hover::after { opacity: 1; }
.picker__detail { background: var(--tint); border-radius: var(--r); padding: clamp(28px, 4vw, 52px); min-height: 100%; }
.picker__detail article + article { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--hairline); }
.js [data-picker][data-ready] .picker__detail article { margin: 0; padding: 0; border: 0; }
.js [data-picker][data-ready] .picker__detail article[hidden] { display: none; }
.picker__detail p:not(.eyebrow) { color: var(--ink-2); font-size: 1.05rem; max-width: 40em; }
.picker__detail h4 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
@media (max-width: 820px) { .picker { grid-template-columns: 1fr; } }
.principles h4 { font-size: 1.35rem; }

/* ---------- forms (contact page, home ask box) ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }
.form { background: var(--tint); border-radius: var(--r); padding: clamp(24px, 3.5vw, 44px); display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.form__field label { display: block; font-weight: 600; margin-bottom: 6px; }
.form__field .req, .form__field .opt { font-weight: 400; color: var(--muted); font-size: .9rem; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea,
.ask__more input { width: 100%; font: 1rem/1.4 var(--sans); color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--hairline); border-radius: 12px; padding: 12px 14px; }
.form textarea { resize: vertical; min-height: 150px; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible, .ask__more input:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--btn-bg); }
.form p { margin: 0; }
.form__check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.form__check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--btn-bg); }
/* Honeypot: off-screen, not display:none, so simple bots still see and fill it. */
.form__trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ask__form { position: relative; }
.ask__more { display: flex; gap: 10px; margin: 12px 0 14px; }
.ask__more input { border-radius: 999px; padding: 12px 20px; }
@media (max-width: 520px) { .ask__more { flex-direction: column; } }
.contact-lines a { font:400 clamp(1.3rem, 2.4vw, 1.9rem)/1.3 var(--serif); text-decoration: none; }

/* closing band shared by v2 pages */
.cta-band { background: var(--band); color: var(--on-band); padding: clamp(64px, 8vw, 112px) 0; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(40% 50% at 80% 30%, rgb(69 190 242 / .22), transparent 70%), radial-gradient(35% 45% at 15% 80%, rgb(215 242 239 / .12), transparent 70%); pointer-events: none; }
.cta-band .container { position: relative; max-width: 980px; }
.cta-band h2 { color: var(--on-band); }
.cta-band p { color: var(--on-band-2); max-width: 44em; }
.cta-band a:not(.btn) { color: var(--band-link); }
.cta-band .btn { background: var(--band-link); color: #0F1A22; margin: .6em 0 1.2em; }
.cta-band .btn:hover { background: #FFFFFF; }
.cta-band .fine { color: var(--on-band-2); }

/* commitments include (pricing page) */
.commitments { margin-top: -8px; margin-bottom: 8px; }
.commitments__card { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 4px 0 18px; }
.commitments__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.commitments__cell { padding: 20px 20px 0 0; }
.commitments__cell + .commitments__cell { padding-left: 20px; border-left: 1px solid var(--hairline); }
.commitments__value { display: block; font: 400 1.45rem/1.2 var(--serif); margin-bottom: 4px; }
.commitments__label { color: var(--muted); font-size: .92rem; }
.commitments__caption { margin: 16px 0 0; font-size: .9rem; color: var(--muted); }
@media (max-width: 820px) { .commitments__grid { grid-template-columns: 1fr 1fr; } .commitments__cell:nth-child(3) { padding-left: 0; border-left: 0; } }

/* dark statement band from v2 */
.band--statement .lead { color: var(--on-band); }
.band--statement .split__head h2 { color: var(--on-band); }

/* prose tables/lists inside articles */
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }

/* ======================================================================
   DESIGN-AUDIT FIXES (2026-10-02, workflow wf_7f71b065-423). Later rules win.
   ====================================================================== */

/* 5: closing bands use dark wash tokens in light mode too, so band text stays AA */
.band { --w1: #0F2A3D; --w2: #123A55; --w3: #0E3236; --w4: #101C27; }

/* 8: call-first start-here card */
.start-here__next { font-size: .95rem; color: var(--on-band-2); margin: 0 0 1em; }

/* 12: industry select chevron and borders in toggle-dark mode */
:root[data-theme="dark"] .help__select:not(.help__select--dark) { border-color: var(--muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='%23E6EEF4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .help__select--dark { border-color: var(--btn-bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .help__select:not(.help__select--dark) { border-color: var(--muted); } }

/* 13: form field edges at least 3:1 against the panel */
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"],
.form select, .form textarea, .ask__more input, .ask__row { border-color: var(--muted); }

/* 14: v3 insight cards keep full-bleed media (v2 .card padding no longer applies) */
.cards .card { padding: 0; }

/* 18: hover motion respects reduced motion; only links lift */
li.card:not(.card--link):hover { transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .tile, .card, .routes a, .arrow::after { transition: none; }
  a.tile:hover, .tile--lift:hover, .card:hover, .card--link:hover, .routes a:hover, .arrow:hover::after { transform: none; }
}

/* 25: tinted media follows the theme */
:root[data-theme="dark"] .tinted { --tint-color: #0F2A3D; }
:root[data-theme="dark"] .tinted--soft { --tint-color: #1E5878; }
:root[data-theme="dark"] .tinted--deep { --tint-color: #123A55; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tinted { --tint-color: #0F2A3D; }
  :root:not([data-theme="light"]) .tinted--soft { --tint-color: #1E5878; }
  :root:not([data-theme="light"]) .tinted--deep { --tint-color: #123A55; }
}

/* 30: section heads keep the h2 and its arrow on one line */
.section .section__head h2 { margin: 0; }
.section__head { align-items: baseline; }

/* 32: dark Venn side labels and the light hero veil */
:root[data-theme="dark"] .venn__label { color: #E6EEF4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .venn__label { color: #E6EEF4; } }
.hero__veil { background:
    linear-gradient(90deg, rgb(255 255 255 / .72) 0%, rgb(255 255 255 / .45) 50%, rgb(255 255 255 / .2) 85%),
    linear-gradient(160deg, rgb(11 132 196 / .10), rgb(215 242 239 / .14)); }
:root[data-theme="dark"] .hero__veil { background: linear-gradient(90deg, rgb(10 17 23 / .78) 0%, rgb(10 17 23 / .4) 50%, rgb(10 17 23 / .1) 80%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero__veil { background: linear-gradient(90deg, rgb(10 17 23 / .78) 0%, rgb(10 17 23 / .4) 50%, rgb(10 17 23 / .1) 80%); } }

/* Legacy-page migration (2026-10-02): a with-aside layout inside a v3 .section, with no
   intro row, so the sticky side starts on row 1 beside the body. */
.with-aside--v3 { padding-bottom: 0; }
.with-aside--v3 .with-aside__side { grid-row: 1 / span 2; top: 150px; }
@media (max-width: 960px) { .with-aside--v3 .with-aside__side { grid-row: auto; position: static; } }

/* ======================================================================
   A-navigation-chrome (mobile pass 2026-10-17, package 2 of 5): header, phone menu,
   sub-nav, jump-link offsets, footer tap rows. Details and browser tests are in
   _audit/mobile-changes-2026-10-17.md. Later rules win.
   ====================================================================== */

/* --- Header: side gutter that lines the pill up with .container; compact Book button on
   phones; the auto margin sits on the logo so the right-hand controls never jump --- */
.site-header { padding-inline: clamp(16px, 4vw, 48px); }
.header__cta { white-space: nowrap; }
@media (max-width: 980px) {
  .header__bar .brand { margin-right: auto; }
  .header__bar .theme-toggle { margin-left: 0; }
  .header__bar .btn { min-height: 44px; }
}
@media (max-width: 560px) { .header__bar .btn .long { display: none; } }
@media (max-width: 480px) { .header__bar .theme-toggle { width: 44px; height: 44px; } }
@media (max-width: 400px) { .header__bar { gap: 8px; } }
@media (max-width: 359px) { .site-header { padding-inline: 8px; } }

/* Reserve the burger and theme-toggle space from first paint (site.js unhides them), so the
   logo does not shift. visibility:hidden keeps the placeholders out of the tab order and the
   accessibility tree. */
.js .burger[hidden] { display: block; visibility: hidden; }
.js .theme-toggle[hidden] { display: inline-block; visibility: hidden; }

/* No-JS phones and tablets: the burger needs site.js, so a Menu link jumps to the footer,
   which carries every link. */
.nav-fallback { display: none; }
@media (max-width: 980px) {
  html:not(.js) .nav-fallback { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
    color: var(--link); box-shadow: inset 0 0 0 1.5px currentColor; font: 600 .9rem/1 var(--sans); text-decoration: none; white-space: nowrap; }
  html:not(.js) .nav-fallback:hover { background: var(--tint); }
}

/* Header hides on scroll down and returns on scroll up (site.js sets .hdr-up). Phones and
   tablets only, not on short screens (they use the absolute bars below). The sub-nav rises
   to 14px and stays as wayfinding. Reduced motion: it still hides, without the slide. */
@media (max-width: 980px) and (min-height: 501px) {
  .hdr-up .header__bar { transform: translateY(calc(-100% - 56px)); } /* 56px also clears the shadow */
  .hdr-up .header__bar:has(:focus-visible) { transform: none; }
  .hdr-up .subnav { transform: translateY(-90px); }
  .hdr-up .otp { top: 12px; }
}
@media (max-width: 640px) and (min-height: 501px) { .hdr-up .subnav { transform: translateY(-84px); } }
@media (max-width: 480px) and (min-height: 501px) { .hdr-up .subnav { transform: translateY(-72px); } }
@media (max-width: 980px) and (min-height: 501px) and (prefers-reduced-motion: no-preference) {
  .header__bar, .subnav { transition: transform .3s ease; }
  .otp { transition: top .3s ease; }
}

/* --- Phone menu: section pills on top, the chosen panel right under them, close bar
   sticky. The pressed pill is cyan (DEC-2026-010). Mini lists repeat panel links. --- */
.megamenu { overscroll-behavior: contain; }
.megamenu__top { position: sticky; top: 0; z-index: 2; background: var(--bg); }
@media (max-width: 820px) {
  .megamenu__side { display: contents; }
  .megamenu__sections { order: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 16px clamp(16px, 4vw, 48px) 8px; }
  .megamenu__sections li + li { border-top: 0; }
  .megamenu__sections button, .megamenu__sections a { display: inline-flex; align-items: center; width: auto; min-height: 44px; padding: 10px 16px;
    border-radius: 999px; font: 600 1rem/1.2 var(--sans); background: var(--tint); }
  .megamenu__sections a { background: none; box-shadow: inset 0 0 0 1.5px var(--hairline); }
  .megamenu__sections button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }
  .megamenu__panels { order: 2; }
  .megamenu__feature { order: 3; padding: 8px clamp(16px, 4vw, 48px) 32px; }
  .megamenu__within, .megamenu__mini { display: none; }
  .megamenu__head { padding: 18px clamp(16px, 4vw, 48px) 12px; }
  .megamenu__links { padding: 6px clamp(16px, 4vw, 48px) 12px; }
  .megamenu__assist { margin: 8px clamp(16px, 4vw, 48px) 24px; }
}
/* Closing fades out too (opening keeps mm-in). Browsers without display transitions drop
   this declaration and close instantly, as before. */
@media (prefers-reduced-motion: no-preference) {
  .megamenu { transition: opacity .2s ease, transform .2s ease, display .2s allow-discrete; }
  .megamenu[hidden] { opacity: 0; transform: translateY(-8px); pointer-events: none; }
}

/* --- About/Careers sub-nav: the list (not the pill) scrolls, with an edge fade when it
   overflows (site.js sets .is-scrollable and centres the current page); 44px pills and
   no overlap with the header on phones --- */
.subnav__bar { overflow: hidden; }
.subnav ul { min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 18px; overscroll-behavior-x: contain; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav li { flex: none; scroll-snap-align: start; }
.subnav.is-scrollable ul { padding-inline: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.subnav a:focus-visible { outline-offset: -3px; } /* the scrolling list would clip an outside ring */
@media (max-width: 640px) {
  .subnav { top: 98px; }
  .subnav__bar { padding: 4px; }
  .subnav a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; }
}
@media (max-width: 480px) { .subnav { top: 86px; } }

/* --- In-page jumps and focus scrolling land below the fixed bars: header bottom + 16px,
   sub-nav bottom + ~16px (header ends 90px, or 78px at <=480; sub-nav ends 151px desktop,
   152px at 481-640, 140px at <=480). .otp is the guides' sticky chip, if present. --- */
html { scroll-padding-top: 106px; }
html:has(.subnav) { scroll-padding-top: 172px; }
@media (max-width: 960px) { html:has(.otp) { scroll-padding-top: 150px; } }
@media (max-width: 640px) { html:has(.subnav) { scroll-padding-top: 168px; } }
@media (max-width: 480px) { html { scroll-padding-top: 94px; } html:has(.subnav) { scroll-padding-top: 156px; } }
/* Short screens (landscape phones, 400% zoom): the bars scroll away with the page instead of
   covering most of it. The fixed menu still covers the viewport (no transform on ancestors). */
@media (max-height: 500px) {
  .site-header, .subnav { position: absolute; }
  html, html:has(.subnav) { scroll-padding-top: 16px; }
}

/* --- Footer: 44px tap rows on phones and tablets; the logo + email row gets the full
   width, then Services | Insights and Company | Offices --- */
@media (max-width: 900px) {
  .footer__cols { gap: 28px 20px; }
  .footer__cols > div:first-child { grid-column: 1 / -1; }
  .footer__cols h2 { margin-bottom: 4px; }
  .footer__cols ul { gap: 0; }
  .footer__cols ul a, .footer__contact a { display: block; padding: 10px 0; }
  .footer__legal-links { gap: 0 20px; }
  .footer__legal-links a, .footer__assist .arrow { display: inline-block; padding: 11px 0; }
}

/* ======================================================================
   B-motion-performance (mobile pass 2026-10-17, package 3 of 5): video policy, pause
   control, wash cost on phones, reveal failsafe and print, phone hero fold, headline
   wrapping, page crossfade, swipe rails, swap-in. Details and browser tests are in
   _audit/mobile-changes-2026-10-17.md. Later rules win.
   ====================================================================== */

/* --- Scroll reveal never strands content. Until site.js sets .js-ready, everything fades in
   by itself after 3 s (slow, blocked or failed script). Focus inside a block that has not
   revealed yet shows it at once. --- */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.js-ready) .reveal, .js:not(.js-ready) .venn .venn__circle, .js:not(.js-ready) .venn .venn__label {
    animation: reveal-failsafe .6s ease 3s forwards; }
  .js .reveal:focus-within { opacity: 1; translate: none; transition: none; }
}
@keyframes reveal-failsafe { to { opacity: 1; transform: none; translate: none; } }

/* Print: IntersectionObserver never runs for print layout, so show every block; the fixed
   bars print once at the top; no video, menu or screen-only controls. */
@media print {
  html.js .reveal, html.js .venn .venn__circle, html.js .venn .venn__label {
    opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important; animation: none !important; }
  .site-header, .subnav { position: static; }
  .header__bar, .subnav { transform: none !important; }
  .hero__video, .megamenu, .burger, .theme-toggle, .motion-toggle { display: none !important; }
}

/* --- Background video: once a hero video plays it covers the wash, so the wash stops and,
   after the 1.2 s video fade, hides (site.js sets .has-video). --- */
.hero.has-video .wash, .hero.has-video .wash span { animation-play-state: paused; }
.hero.has-video .wash { visibility: hidden; transition: visibility 0s 1.3s; }

/* --- Wash on phones and small tablets: no live blur. A blurred parent with moving children
   is re-blurred every frame; soft radial gradients keep the look and leave only compositor
   transforms. Desktop keeps the blurred silk. The .band token override still applies. --- */
@media (max-width: 820px) {
  .wash, .ask__art .wash { filter: none; }
  .wash span:nth-child(1) { background: radial-gradient(closest-side, var(--w1) 30%, transparent); }
  .wash span:nth-child(2) { background: radial-gradient(closest-side, var(--w2) 30%, transparent); }
  .wash span:nth-child(3) { background: radial-gradient(closest-side, var(--w3) 30%, transparent); }
  .wash span:nth-child(4) { background: radial-gradient(closest-side, var(--w4) 30%, transparent); }
}

/* --- Pause control for looping motion (WCAG 2.2.2). site.js adds one button to each hero
   (not with reduced motion, where nothing loops). .motion-off is the visitor's saved choice,
   applied in head.html before first paint; it freezes every wash and the Venn, and site.js
   pauses the videos. Without JS there is no control, so the wash does not move at all. --- */
html:not(.js) .wash, html:not(.js) .wash span { animation: none; }
.motion-off .wash, .motion-off .wash span, .motion-off .venn__circle { animation-play-state: paused !important; }
.motion-toggle { position: absolute; z-index: 1; bottom: 12px;
  right: max(clamp(16px, 4vw, 48px), calc((100% - var(--max)) / 2 + 48px));
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--btn-bg); background: var(--header-bg); color: var(--link); cursor: pointer; }
.motion-toggle:hover { background: var(--tint); }
.motion-toggle:focus-visible { border-radius: 50%; }
.motion-toggle svg { width: 20px; height: 20px; }
.motion-toggle .mt-play, .motion-toggle[aria-pressed="true"] .mt-pause { display: none; }
.motion-toggle[aria-pressed="true"] .mt-play { display: inline; }
/* Room for the button under the last line of an interior hero (from first paint, so nothing
   shifts when site.js adds it). From 1067px wide the existing padding is already larger. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero--page { padding-bottom: max(64px, clamp(48px, 6vw, 80px)); }
}

/* --- Phone hero fold: a smaller h1 floor and less top padding, so the main button (on About,
   the name) is inside the first 700px on every interior page. 112px clears the header (ends
   90px), 172px the sub-nav (ends 152px). 8.4vw meets the 2.5rem cap at 476px, so no jump at
   the breakpoint. The home hero is not touched. --- */
@media (max-width: 640px) {
  .hero--page { padding-top: 112px; padding-bottom: 40px; }
  main:has(> .subnav) .hero--page { padding-top: 172px; }
  .hero--page h1 { font-size: clamp(2rem, 8.4vw, 2.5rem); }
  .hero--page .eyebrow { margin-bottom: .8rem; }
  .hero--page .hero__support { font-size: 1.05rem; line-height: 1.5; }
  .hero--page .hero__actions { margin-top: 1.5rem; }
}
@media (max-width: 760px) { .hero .leader__photo { width: min(240px, 62vw); } }

/* --- Headlines: balanced lines, no one-word last line; body copy only avoids orphans.
   Browsers without text-wrap wrap as before. --- */
h1, h2, h3, h4, .help__line, .assist__title, .megamenu__feature-title { text-wrap: balance; }
p, blockquote, .lede { text-wrap: pretty; }

/* --- Page changes crossfade (same-origin links; Chrome/Edge 126+, Safari 18.2+). Nothing is
   named, so the fixed header stays in the root snapshot and holds still. Off with reduced
   motion; other browsers navigate as before. --- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
}

/* --- Swipe rails on phones (home Insights cards, What we do quotes): one row that snaps card
   by card with the next card peeking. CSS only; screens only (print stacks); above 700px the
   grid is unchanged. The bleed margin equals the .container gutter. In a rail the reveal only
   fades (no rise), so it cannot create vertical scroll inside the row. --- */
@media screen and (max-width: 700px) {
  .rail { display: flex; gap: 12px; overflow: auto hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * clamp(16px, 4vw, 48px)); padding: 4px clamp(16px, 4vw, 48px) 12px;
    scroll-padding-inline: clamp(16px, 4vw, 48px); scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 min(85%, 340px); scroll-snap-align: start; }
  .js .rail > .reveal { translate: none; }
  .rail:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
}

/* --- Swap-in: chip answers, picker details and explorer tabs rise and fade in on every show,
   like the help card (showing a [hidden] element restarts the animation). --- */
@media (prefers-reduced-motion: no-preference) {
  .answer:not([hidden]), .js [data-picker][data-ready] .picker__detail article:not([hidden]),
  .js .explorer[data-ready] .explorer__panel:not([hidden]) { animation: swap-in .3s ease backwards; }
}
@keyframes swap-in { from { opacity: 0; transform: translateY(6px); } }

/* ======================================================================
   C-touch-a11y-forms (mobile pass 2026-10-17, package 4 of 5): tap targets, screen-reader
   glyphs, focus rings, touch press feedback, phone forms and form errors, dark photos, text
   over media, toggle-dark chevron, forced colours, table scroll hint, small text. Details and
   browser tests are in _audit/mobile-changes-2026-10-17.md. Later rules win.
   Edited in place instead (overriding would have been messier): the global focus-ring radius,
   the scroll-reveal rise (now the translate property), the 34px toggle at <=480, the dark
   photo blend, the Venn reveal end state, the toggle-dark select chevron selector, and B's
   reveal failsafe keyframe, reveal focus-within and rail reveal rules (translate, not transform).
   ====================================================================== */

/* --- Tap targets: 44px for standalone controls. Inline links in running text are exempt. --- */
.theme-toggle { width: 44px; height: 44px; }
.chip { min-height: 44px; }
/* Standalone arrow links: an 18px taller hit area; the negative margin keeps the line box, so
   nothing moves. (.tile .arrow is a span and keeps margin-top: auto.) */
a.arrow, .more a { display: inline-block; padding-block: 9px; margin-block: -9px; }
@media (max-width: 900px) { .footer__assist .arrow { margin-block: 0; } } /* keeps A's footer rows */
/* FAQ: the whole row is the toggle, not only the 26px question line. Same spacing as before:
   18px above the question, 12px to the answer, 18px below it. */
.faq details { padding: 0; }
.faq summary { padding: 18px 0; }
.faq details[open] summary { padding-bottom: 0; }
.faq details[open] { padding-bottom: 18px; }
@media (max-width: 760px), (pointer: coarse) {
  .megamenu__mini a, .start-here__contact a { display: inline-block; padding: 9px 0; }
  .jumplist ol { gap: 0; }
  .jumplist a { display: block; padding: 9px 0; }
  .sitemap ul { gap: 0; }
  .sitemap li > a { display: inline-block; padding: 9px 0; }
}
/* Touch screens wider than 900px (tablets in landscape) get the same footer tap rows that
   A-navigation-chrome gave phones; the column layout is unchanged. */
@media (pointer: coarse) and (min-width: 901px) {
  .footer__cols ul { gap: 0; }
  .footer__cols ul a, .footer__contact a { display: block; padding: 10px 0; }
  .footer__legal-links { gap: 0 20px; }
  .footer__legal-links a { display: inline-block; padding: 11px 0; }
}
/* The whole consent label already toggles the box; on touch the box itself is a little bigger. */
@media (pointer: coarse) { .form__check input { width: 24px; height: 24px; margin-top: 0; } }

/* --- Decorative glyphs leave accessible names (screen readers stop saying "right arrow" or
   "plus"). Engines without the alt-text syntax drop these and keep the earlier content. --- */
.arrow::after, .more a::after, .card__link::after { content: " \2192" / ""; }
.picker__list button::after, .cycle li:not(:last-child)::after { content: "\2192" / ""; }
.faq summary::after { content: "+" / ""; }
.faq details[open] summary::after { content: "\2212" / ""; }
.breadcrumb li + li::before { content: "/" / ""; }

/* --- Focus: the home question box shows the same ring as every other field (the textarea's
   own outline stays off; the pill carries the ring and follows its radius) --- */
.ask__row:focus-within { border-color: var(--btn-bg); outline: 3px solid var(--focus); outline-offset: 3px; }

/* --- Touch press feedback: no grey tap rectangle; a short scale-down on press that springs
   back on the element's own transition; hover lifts do not stick after a tap. Colours are the
   existing cyan and tint tokens (DEC-2026-010). --- */
.btn, .chip, .tile, .card, .routes a, .burger, .megamenu__close, .theme-toggle, .subnav a, .picker__list button,
.explorer__tabs button, .megamenu__sections button, .megamenu__sections a, .megamenu__links a, .faq summary {
  -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  a.tile:hover, .tile--lift:hover, .card:hover, .card--link:hover, .routes a:hover, .reviews-badge:hover { transform: none; box-shadow: none; }
  .arrow:hover::after { transform: none; }
}
.chip, .burger, .megamenu__close, .theme-toggle { transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: no-preference) {
  .btn:active, .chip:active, .burger:active, .megamenu__close:active, .theme-toggle:active { transform: scale(.97); transition-duration: .06s; }
  a.tile:active, a.card:active, .card--link:active, .routes a:active { transform: scale(.985); transition-duration: .06s; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .chip:active, a.tile:active, a.card:active, .routes a:active { opacity: .82; }
}
.subnav a:active, .megamenu__sections button:active, .megamenu__sections a:active { background: var(--soft); }
.picker__list button:active, .explorer__tabs button:active, .megamenu__links a:active, .faq summary:active { color: var(--link); }

/* --- Phone forms: the Roles link field gets the field style (16px text, so iOS does not zoom
   on focus); the home question box shows more than one line; the stacked Ask button centres
   its label. min-width: 0 lets a content-sized textarea shrink inside its flex row. --- */
.form input[type="url"] { width: 100%; font: 1rem/1.4 var(--sans); color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--muted); border-radius: 12px; padding: 12px 14px; }
@media (max-width: 600px) {
  .ask__row { border-radius: var(--r-sm); padding: 6px 14px; }
  .ask__row textarea { min-height: 6.2em; resize: vertical; }
}
@supports (field-sizing: content) { .ask__row textarea { field-sizing: content; max-height: 40vh; min-width: 0; } }
.ask__more .btn { justify-content: center; }

/* --- Form errors: contact.php returns to #form-error, so the notice shows without JS too
   (author CSS beats the browser's [hidden] rule). site.js also unhides and focuses it; the
   focus is only for scrolling and screen readers, so no ring on the notice. Placeholders get
   the AA muted colour instead of the browser's pale default. --- */
#form-error:target { display: block; }
#form-error:focus { outline: none; }
::placeholder { color: var(--muted); opacity: 1; }

/* --- Text over media: the hero eyebrow is darker (it runs over the bright right side of the
   wash on phones), and the feature-tile scrim starts higher, so the eyebrow and the top of
   the quote stay AA over pale video frames at every width. --- */
.hero .eyebrow { color: var(--ink-2); }
.tile--feature::before { background: linear-gradient(180deg, rgb(12 34 51 / .2) 0%, rgb(12 34 51 / .72) 32%, rgb(8 26 40 / .94) 62%); }

/* --- Windows High Contrast (forced colours): the burger lines and list marks stay visible,
   round and pill controls get an outline, selected states use the system Highlight. iOS
   Increase Contrast (prefers-contrast: more) darkens the muted text to --ink-2. --- */
@media (forced-colors: active) {
  .burger__lines, .burger__lines::before, .burger__lines::after, .crosslist li::before, .crosslist li::after, .timeline li::before {
    forced-color-adjust: none; background: CanvasText; }
  .burger, .megamenu__close, .theme-toggle, .btn, .social a { border: 1px solid ButtonText; }
  .chip[aria-pressed="true"], .megamenu__sections button[aria-pressed="true"], .subnav a[aria-current="page"], .nav a[aria-current="page"] {
    forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .explorer__tabs button { forced-color-adjust: none; color: ButtonText; background: Canvas; border-bottom-color: Canvas; }
  .explorer__tabs button[aria-selected="true"] { border-bottom-color: Highlight; }
  .explorer__tabs button:focus-visible { outline-color: Highlight; }
}
@media (prefers-contrast: more) { html:root:root { --muted: var(--ink-2); } }

/* --- Wide tables: an edge shadow shows on whichever side has more to scroll (CSS only: the
   cover gradients scroll with the content, the shadows stay with the box). Narrower cells on
   phones. --cover matches the band the table sits on. --- */
:root { --edge: rgb(15 26 34 / .22); }
:root[data-theme="dark"] { --edge: rgb(0 0 0 / .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --edge: rgb(0 0 0 / .6); } }
.table-wrap { --cover: var(--bg);
  background:
    linear-gradient(90deg, var(--cover) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(270deg, var(--cover) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--edge), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--edge), transparent) right center / 14px 100% no-repeat scroll,
    var(--cover); }
.section--paper .table-wrap { --cover: var(--paper); }
@media (max-width: 640px) {
  .table { font-size: .9rem; }
  .table th, .table td { padding: 10px 12px; }
}

/* --- Small text: provenance dates, role chips and photo tags up from 11.8-12px; the contact
   page email tile scales down on phones so the address fits on one line (the existing
   overflow-wrap: anywhere stays as the last resort). The footer email row is A's. --- */
.micro { font-size: .8rem; }
.who, .tile__tag { font-size: .8rem; }
@media (max-width: 900px) { .tile__email { font-size: clamp(1rem, 4.6vw, 1.35rem); } }

/* ======================================================================
   D-guides-wayfinding (mobile pass 2026-10-17, package 5 of 5): the guides' "On this page"
   list on phones (sticky chip at the top of the article), the desktop aside that keeps the
   list in view, and the reading-progress hairline. Details and browser tests are in
   _audit/mobile-changes-2026-10-17.md. Later rules win.
   ====================================================================== */

/* --- Phones and tablets (<=960px): the aside, with the list, comes after the whole article.
   site.js puts a copy (.otp, no ids) at the top of the body as a sticky disclosure chip that
   names the section being read, and marks the layout [data-otp] so the aside copy hides: one
   list, and one "On this page" landmark, at any width. The start-here card stays in the aside
   after the article. The open list is an overlay, so it never reflows the article. Screens
   only (print keeps the original list). Without JS nothing changes. --- */
.otp { display: none; }
.otp + .block { border-top: 0; padding-top: 0; } /* the hidden chip takes .block:first-child at every width */
@media screen and (max-width: 960px) {
  .otp { display: block; position: sticky; top: 98px; z-index: 40; margin: 0 0 28px; background: var(--header-bg);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border: 1px solid var(--hairline); border-radius: 24px; box-shadow: var(--shadow); }
  .otp details { position: relative; }
  .otp summary { display: block; list-style: none; cursor: pointer; border-radius: 23px; -webkit-tap-highlight-color: transparent; }
  .otp summary::-webkit-details-marker { display: none; }
  .otp summary:active { background: var(--soft); }
  .otp__sum { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; font: 600 .9rem/1.2 var(--sans); color: var(--link); }
  .otp__sum::after { content: "\25BE"; content: "\25BE" / ""; margin-left: auto; }
  .otp details[open] .otp__sum::after { content: "\25B4"; content: "\25B4" / ""; }
  .otp__now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--ink); }
  .otp__now:not(:empty)::before { content: "\00B7\00A0"; content: "\00B7\00A0" / ""; color: var(--muted); }
  .otp__list { list-style: none; margin: 0; padding: 6px 8px 10px; position: absolute; left: -1px; right: -1px; top: calc(100% + 6px);
    max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; background: var(--bg);
    border: 1px solid var(--hairline); border-radius: 18px; box-shadow: var(--shadow); }
  .otp__list li { margin: 0; }
  .otp__list a { display: block; padding: 12px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
  .otp__list a:hover { background: var(--tint); }
  .otp__list a[aria-current] { color: var(--link); background: var(--tint); }
  .otp__list a:focus-visible { outline-offset: -3px; } /* the scrolling list would clip an outside ring */
  .with-aside[data-otp] .with-aside__side .jumplist { display: none; }
  /* Space for the chip from first paint (site.js is deferred), so nothing below it shifts when
     it arrives. A failed site.js load drops .js (head.html), and the space with it. */
  .js .with-aside:has(> .with-aside__side .jumplist ol):not([data-otp]) > .with-aside__body::before {
    content: ""; display: block; height: 78px; }
  /* Jumps land below the chip: chip top + 50px + 16px. The header ends 90px (78px at <=480);
     the chip sits 8px under it. A-navigation-chrome's .hdr-up rule lifts it to 12px. */
  html:has(.otp) { scroll-padding-top: 164px; }
}
@media screen and (max-width: 480px) {
  .otp { top: 86px; }
  html:has(.otp) { scroll-padding-top: 152px; }
}
/* Short screens: the header scrolls away (A-navigation-chrome), so the chip rides near the top. */
@media screen and (max-width: 960px) and (max-height: 500px) {
  .otp { top: 8px; }
  html:has(.otp) { scroll-padding-top: 74px; }
}
@media (forced-colors: active) {
  .otp__list a[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* --- Desktop guides (>=961px): the whole aside (start-here card + list, about 1,100px) was
   sticky, so on a laptop the list sat below the fold until the article ended. The aside is now
   a plain block stretched over the body's rows (a sticky grid item only moves inside its own
   grid area): the start-here card scrolls past and only the list stays pinned, scrolling inside
   itself when it is taller than the screen. --- */
@media screen and (min-width: 961px) {
  .with-aside--v3 .with-aside__side { position: static; display: block; align-self: stretch; }
  .with-aside--v3 .with-aside__side > * + * { margin-top: 20px; }
  .with-aside--v3 .with-aside__side .jumplist { position: sticky; top: 150px; max-height: calc(100vh - 170px); overflow-y: auto; }
}
@media screen and (min-width: 961px) and (max-height: 500px) {
  .with-aside--v3 .with-aside__side .jumplist { top: 16px; max-height: calc(100vh - 32px); }
}

/* --- Reading progress on the long guides: a 3px cyan hairline across the top of the screen
   that fills as the page scrolls. CSS scroll-driven, no JS (Chrome/Edge 115+, Safari 26+);
   other browsers and reduced motion get nothing. Decorative: an empty pseudo-element, so it is
   not in the accessibility tree, and it never takes a tap. Above the header (50) and sub-nav
   (45), below the menu (200). The 1ms duration is normalised to the whole scroll range. --- */
@supports (animation-timeline: scroll()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    main:has(.jumplist)::before { content: ""; position: fixed; z-index: 60; inset: 0 0 auto; height: 3px;
      background: var(--link); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
      animation: read-progress 1ms linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes read-progress { to { transform: scaleX(1); } }

/* ======================================================================
   v4 HEADER (2026-10-20, Brendan: "top left logo is tiny"; no booking button in the bar).
   The logo grows 16px (8px at <=480), so every offset that clears the fixed bar moves by the
   same amount: sub-nav, guide chip, hero top padding, jump landing and the hide-on-scroll lift.
   ====================================================================== */
.brand__logo { height: 80px; }
@media (max-width: 480px) { .brand__logo { height: 60px; } }

.hero { padding-top: clamp(166px, calc(22vh + 16px), 236px); }
.hero--page { padding-top: clamp(156px, calc(18vh + 16px), 206px); }
main:has(> .subnav) .hero--page { padding-top: clamp(206px, calc(24vh + 16px), 256px); }
.subnav { top: 120px; }

html { scroll-padding-top: 122px; }
html:has(.subnav) { scroll-padding-top: 188px; }
@media (max-width: 960px) { html:has(.otp) { scroll-padding-top: 166px; } }
@media screen and (max-width: 960px) {
  .otp { top: 114px; }
  html:has(.otp) { scroll-padding-top: 180px; }
}
@media (max-width: 640px) {
  .subnav { top: 114px; }
  html:has(.subnav) { scroll-padding-top: 184px; }
  .hero--page { padding-top: 128px; }
  main:has(> .subnav) .hero--page { padding-top: 188px; }
}
@media (max-width: 480px) {
  .subnav { top: 94px; }
  html { scroll-padding-top: 102px; }
  html:has(.subnav) { scroll-padding-top: 164px; }
  .hero--page { padding-top: 120px; }
  main:has(> .subnav) .hero--page { padding-top: 180px; }
}
@media screen and (max-width: 480px) {
  .otp { top: 94px; }
  html:has(.otp) { scroll-padding-top: 160px; }
}
@media (max-width: 980px) and (min-height: 501px) { .hdr-up .subnav { transform: translateY(-106px); } }
@media (max-width: 640px) and (min-height: 501px) { .hdr-up .subnav { transform: translateY(-100px); } }
@media (max-width: 480px) and (min-height: 501px) { .hdr-up .subnav { transform: translateY(-80px); } }
/* Short screens keep their own rules (the bars scroll away), restated so the above cannot win. */
@media (max-height: 500px) { html, html:has(.subnav) { scroll-padding-top: 16px; } }
@media screen and (max-width: 960px) and (max-height: 500px) {
  .otp { top: 8px; }
  html:has(.otp) { scroll-padding-top: 74px; }
}