/* ADBCS website. One stylesheet for every page.
   Motion lives under .mo (set in the head only when reduced motion is off). Hover is gated to fine pointers. */

/* ---------- Tokens ---------- */
/* metric-matched stand-in for Bricolage Grotesque while it loads, so the swap does not shift the layout */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 94%; ascent-override: 99%; descent-override: 29%; line-gap-override: 0%; }
:root {
  --paper: #FBFAF7;
  --paper-2: #F3F1EC;      /* one tone step: footer, panels, form, sub-nav, open FAQ rows */
  --ink: #1C1B1F;
  --muted: #5A5860;
  --line: #E6E3DC;         /* decorative only */
  --ctl: #85828A;          /* control borders, 3.6:1 on paper */
  --red: #D1655D;          /* logo red: the line, fills with ink text, large type */
  --red-tint: #F7E9E6;
  --band: #EAF0F6;         /* SLaiCE world */
  --navy: #1F3A5F;
  --blue: #2F5D8C;
  --cell: #CFDDEA;

  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Bricolage Grotesque", "Bricolage Fallback", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mark: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  /* Five steps, far apart: meta 14, body 17, lead 22, h2, display. Nothing else for running copy. */
  --fs-b: 1.0625rem;                                          /* 17 body */
  --fs-l: clamp(1.25rem, 1.15rem + 0.45vw, 1.375rem);         /* 20-22 lead */
  --fs-h3: var(--fs-l);                                       /* h3 shares the lead size; the display face and weight set it apart */
  --fs-h2: clamp(1.625rem, 1.1rem + 3.3vw, 4.375rem);         /* 26-70 */
  --fs-m: clamp(1.375rem, 0.9rem + 1.8vw, 2.5rem);            /* 22-40 small heading, statement, pull quote */
  --fs-d: clamp(2.75rem, 1.2rem + 7.4vw, 7.25rem);            /* 46 at 390, 116 at 1440 */
  --fs-fig: calc(var(--fs-d) * 0.8);                          /* big figures: 37-93 */

  --m: clamp(20px, 5vw, 80px);                                /* outer margin; the line runs in it */
  --g: clamp(16px, 2vw, 32px);
  --max: 1600px;
  --sec: clamp(56px, 6.5vw, 104px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-hover: 200ms;
  --t-move: 320ms;

  --offer: var(--ink);      /* rule colour for cards; set per world/offer */
  --sweep: #D1655D;
}
.w-slaice { --offer: var(--blue); }
.w-consult { --offer: var(--red); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; color-scheme: light; scroll-padding-top: 96px; }
a, button { touch-action: manipulation; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-b)/1.55 var(--sans);
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h5, h6 { margin: 0; }
/* Type roles: headings (h1, h2 and anything large) in Bricolage Grotesque; subheadings (h3-h6 and small titles) in
   Instrument Sans semibold; body in Instrument Sans regular. */
h1, h2, h3, h4, h5, h6 { font-weight: 500; text-wrap: balance; hyphens: none; font-optical-sizing: auto; }
h1, h2 { font-family: var(--display); }
h3, h4, h5, h6, .h3, .h4 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
/* tracking is size-specific: display -0.035em, h2 -0.025em, --fs-m -0.015em, 22px h3 -0.005em, body 0, 14px +0.01em, 12px +0.02em */
h1 { letter-spacing: -0.035em; line-height: 0.95; }
h2 { letter-spacing: -0.025em; line-height: 1.02; }
h3, h4, h5 { letter-spacing: -0.005em; line-height: 1.2; }
p { text-wrap: pretty; max-width: 64ch; }
a { color: inherit; }
p a, li > a:not([class]), dd a { text-decoration-color: var(--red); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
button { font: inherit; color: inherit; }
::selection { background: var(--band); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }
[id] { scroll-margin-top: 96px; }
table { font-variant-numeric: tabular-nums; }

.nw { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--m); top: 8px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; border-radius: 999px; transform: translateY(-160%); }
.skip:focus { transform: none; }

.wrap { padding-inline: max(var(--m), calc((100% - var(--max)) / 2)); }
.sec { position: relative; padding-block: var(--sec); }
.sec:not(.band):not(.tone) + .sec:not(.band):not(.tone),
.band + .sec.band, .tone + .sec.tone { padding-top: 0; }
.band { background: var(--band); }
.tone { background: var(--paper-2); }
.muted { color: var(--muted); }

/* ---------- Type roles ---------- */
.display { font-size: var(--fs-d); line-height: 0.95; letter-spacing: -0.035em; font-weight: 500; margin-left: -0.04em; }
.h2 { font-size: min(var(--fs-h2), 7.4vw); line-height: 1.02; letter-spacing: -0.025em; }
.h2s { font-size: var(--fs-m); line-height: 1.08; letter-spacing: -0.015em; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; }
.h4 { font-family: var(--sans); font-size: var(--fs-l); font-weight: 600; line-height: 1.2; letter-spacing: 0; }
.lead { font-size: var(--fs-l); line-height: 1.42; max-width: 40ch; }
.statement { font-family: var(--display); font-size: var(--fs-m); line-height: 1.22; letter-spacing: -0.015em; max-width: 30ch; font-weight: 400; }
.small { font-size: var(--fs-14); letter-spacing: 0.01em; }

/* ---------- Links ---------- */
.lnk { position: relative; display: inline-flex; align-items: baseline; gap: 0.4em; font-weight: 600; text-decoration: none; padding-bottom: 3px; }
.lnk::before, .lnk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.lnk::before { background: var(--line); }
.lnk::after { background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.lnk--s::after, .w-slaice .lnk::after { background: var(--blue); }
.w-consult .lnk::after { background: var(--red); }
.arr { display: inline-block; }
.mo .lnk::after { transition: transform var(--t-move) var(--ease-out); }
.mo .lnk .arr { transition: transform var(--t-move) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .lnk:hover::after { transform: scaleX(1); }
  .lnk:hover .arr { transform: translateX(3px); }
}
.lnk:focus-visible::after { transform: scaleX(1); }
.lnk:focus-visible .arr { transform: translateX(3px); }
.site-foot .lnk, .nav .lnk { font-weight: 500; }

/* ---------- Buttons (fill sweep comes from fx.css) ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 var(--fs-b)/1 var(--sans); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.btn--sm { min-height: 42px; padding: 0 18px; font-size: var(--fs-14); letter-spacing: 0.01em; }
.btn--lg { min-height: 60px; padding: 0 34px; font-size: var(--fs-b); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--teal { background: var(--navy); color: #fff; }
.btn--teal:hover, .btn--teal:focus-visible { color: #fff; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line-cream { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--paper); padding-top: env(safe-area-inset-top, 0px); view-transition-name: site-head; }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; padding-inline: max(var(--m), calc((100% - var(--max)) / 2), env(safe-area-inset-left, 0px)) max(var(--m), calc((100% - var(--max)) / 2), env(safe-area-inset-right, 0px)); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--red); }
.brand-a { width: 34px; height: 34px; flex: none; }
.brand-words { display: flex; flex-direction: column; gap: 3px; }
.brand-name { font: 800 1.375rem/1 var(--mark); letter-spacing: 0.12em; color: #D1655D; }
.brand-full { font: 500 var(--fs-12)/1.2 var(--sans); color: var(--muted); letter-spacing: 0.02em; }
@media (max-width: 1179px) { .brand-full { display: none; } }
.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.nav-list { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav-link { position: relative; display: inline-block; padding: 10px 0; font-weight: 500; text-decoration: none; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.nav-link[aria-current="page"]::after, .nav-link[data-current]::after { transform: scaleX(1); background: var(--red); view-transition-name: nav-cur; }
.mo .nav-link::after { transition: transform var(--t-move) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav-link:hover::after { transform: scaleX(1); } }
.nav-link:focus-visible::after { transform: scaleX(1); }

.has-drop { position: relative; display: flex; align-items: center; gap: 2px; }
.drop-btn { display: grid; place-items: center; width: 28px; height: 32px; padding: 0; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.drop-btn svg { width: 12px; height: 12px; }
.mo .drop-btn svg { transition: transform 160ms var(--ease-out); }
.has-drop.is-open .drop-btn svg { transform: rotate(180deg); }
.drop {
  position: absolute; top: calc(100% + 6px); left: -18px; min-width: 220px; padding: 10px;
  background: #fff; border-radius: 14px; box-shadow: 0 12px 32px -8px rgba(28, 27, 31, 0.22), 0 2px 6px rgba(28, 27, 31, 0.06);
  opacity: 0; visibility: hidden; transform: scale(0.96) translateY(-4px); transform-origin: 30px 0;
}
.drop::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; } /* hover bridge across the gap */
.drop a { display: block; padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 500; }
.drop a[aria-current="page"] { background: var(--red-tint); color: #A44640; }
/* hover in red: small red text uses the darker #A44640 for contrast (5:1 on the tint) */
@media (hover: hover) and (pointer: fine) { .drop a:hover { background: var(--red-tint); color: #A44640; } }
.has-drop.is-open .drop { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .has-drop:not(.is-shut):hover .drop { opacity: 1; visibility: visible; transform: none; }
}
.has-drop:not(.is-shut):focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.mo .drop { transition: opacity 100ms ease, transform 100ms var(--ease-out), visibility 0s linear 100ms; }
.mo .has-drop.is-open .drop, .mo .has-drop:not(.is-shut):focus-within .drop { transition: opacity 160ms ease, transform 160ms var(--ease-out), visibility 0s; }
@media (hover: hover) and (pointer: fine) { .mo .has-drop:not(.is-shut):hover .drop { transition: opacity 160ms ease, transform 160ms var(--ease-out), visibility 0s; } }

.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: none; font-weight: 600; cursor: pointer; -webkit-user-select: none; user-select: none; }
.menu-btn-icon { position: relative; width: 16px; height: 10px; }
.menu-btn-icon span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; }
.menu-btn-icon span:first-child { top: 0; } .menu-btn-icon span:last-child { bottom: 0; }
.mo .menu-btn-icon span { transition: transform 200ms var(--ease-out); }
.menu-btn[aria-expanded="true"] .menu-btn-icon span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-icon span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu { position: fixed; inset: calc(72px + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); padding: 16px max(var(--m), env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(var(--m), env(safe-area-inset-left, 0px)); }
/* closed: invisible and inert (set in site.js); transitions, not a keyframe, so closing mid-open reverses from where it is */
.menu { opacity: 0; transform: translateY(-8px); visibility: hidden; }
.menu.is-open { opacity: 1; transform: none; visibility: visible; }
.mo .menu { transition: opacity 180ms ease, transform 200ms var(--ease-out), visibility 0s 200ms; }
.mo .menu.is-open { transition: opacity 200ms ease, transform 240ms var(--ease-out), visibility 0s; }
.m-list { display: grid; gap: 2px; }
.m-link, .m-label { display: block; padding: 12px 0; font: 500 1.75rem/1.1 var(--display); letter-spacing: -0.015em; text-decoration: none; }
.m-label { color: var(--muted); font-size: var(--fs-14); font-family: var(--sans); font-weight: 600; letter-spacing: 0.01em; padding: 18px 0 4px; }
.m-group ul { display: grid; padding-left: 18px; border-left: 3px solid var(--band); }
.m-sub { display: block; padding: 9px 0; font-size: 1.25rem; font-family: var(--display); letter-spacing: -0.005em; text-decoration: none; }
.m-link[aria-current="page"], .m-sub[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.m-cta { margin-top: 28px; width: 100%; }
@media (max-width: 899px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .head-in { min-height: 72px; }
}
html.menu-open { overflow: hidden; }

/* ---------- Footer ---------- */
.site-foot { background: var(--paper-2); }
.foot-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--g); padding-block: 72px 32px; padding-inline: max(var(--m), calc((100% - var(--max)) / 2)); }
.foot-brand { grid-column: 1 / span 4; }
.brand--foot .brand-a { width: 30px; height: 30px; }
.foot-full { margin-top: 12px; color: var(--muted); max-width: 30ch; }
.foot-mean { margin-top: 18px; font: 600 var(--fs-l)/1.2 var(--sans); letter-spacing: 0; }
.foot-col { grid-column: span 2; }
.foot-contact { grid-column: span 2; }
.foot-h { font: 600 var(--fs-14)/1.2 var(--sans); letter-spacing: 0.01em; color: var(--muted); margin-bottom: 14px; }
.foot-col ul { display: grid; gap: 0; }
.foot-col li, .foot-contact p { font-size: var(--fs-b); }
.foot-contact p + p { margin-top: 0; }
.foot-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.copy { position: relative; min-height: 44px; padding: 4px 12px; border: 1.5px solid var(--ctl); border-radius: 999px; background: transparent; font-size: var(--fs-14); font-weight: 600; cursor: pointer; overflow: hidden; letter-spacing: 0.01em; }
.copy-done { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink); color: var(--paper); transform: translateY(100%); }
.mo .copy-done { transition: transform 240ms var(--ease-out); }
.copy.is-done .copy-done { transform: none; }
.foot-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 28px; margin-top: 16px; box-shadow: 0 -1px 0 var(--line); font-size: var(--fs-14); color: var(--muted); letter-spacing: 0.01em; }
.foot-legal { display: flex; gap: 22px; }
.foot-bottom .lnk { color: var(--ink); }
/* footer links: no rule at rest, the underline grows on hover; 44px tall touch targets */
.site-foot .lnk { min-height: 44px; align-items: center; padding-block: 8px; }
.site-foot .lnk::before { content: none; }
.site-foot .lnk::after { bottom: 8px; }
.foot-h { margin-bottom: 6px; }
@media (max-width: 1100px) {
  .foot-brand { grid-column: 1 / -1; }
  .foot-col, .foot-contact { grid-column: span 3; }
  .foot-contact { grid-column: span 3; }
}
@media (max-width: 700px) {
  .foot-col { grid-column: span 6; }
  .foot-contact { grid-column: 1 / -1; }
}

/* ---------- The rising line: scroll thread ---------- */
main { position: relative; display: block; }
/* one small SVG per piece (a run down a margin, or a swing across a gap), so a scroll frame repaints only the piece being drawn */
.thread { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; z-index: 3; }
.thread svg { position: absolute; overflow: visible; }
.thread path { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* the sign-off: past its end the line writes "thank you" (Sacramento outlines, inline SVG), revealed by scroll in site.js */
.thread-sign { display: none; }
@media (min-width: 1100px) { .thread-sign { display: block; width: max-content; flex-basis: 100%; } .thread-sign[data-thread-sign-end] { margin-left: auto; } }
.thread-sig { display: block; overflow: visible; }
.thread-sig path { fill: var(--red); }
.mo .thread-sig { visibility: hidden; }  /* until site.js reveals it with the scroll */
.thread-nib { position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); will-change: transform; }
@media (max-width: 1099px) { .thread { display: none; } }

/* ---------- Reveal (groups only, once, under .mo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .mo :is([data-reveal], .reveal):not(.is-in) > * { opacity: 0; transform: translateY(12px); }
  .mo :is([data-reveal], .reveal) > * { transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
  .mo :is([data-reveal], .reveal) > :nth-child(2) { transition-delay: 60ms; }
  .mo :is([data-reveal], .reveal) > :nth-child(n+3) { transition-delay: 120ms; }
  /* a fast scroll (over 2,500px/s, measured in site.js) shows the group at once: nothing fades in behind the reader */
  .mo :is([data-reveal], .reveal).is-instant > * { transition: none; }
  /* a keyboard user never tabs into something still invisible */
  .mo :is([data-reveal], .reveal):focus-within > * { opacity: 1; transform: none; transition-duration: 0s; transition-delay: 0s; }
}
@media print { .mo :is([data-reveal], .reveal) > * { opacity: 1 !important; transform: none !important; } }

/* =========================================================
   HOME
   ========================================================= */
.hero { position: relative; overflow: hidden; }
.hero-in { position: relative; z-index: 1; padding-inline: max(var(--m), calc((100% - var(--max)) / 2)); }
.hero--home .hero-in { padding-top: clamp(32px, min(6vw, 7svh), 96px); padding-bottom: clamp(120px, 11vw, 176px); }
/* home h1: one sentence, two balanced lines at most; the selector outranks older overrides elsewhere */
.hero--home .hero-h { font-size: var(--fs-d); white-space: normal; text-wrap: balance; max-width: 13ch; }
.hero-copy { position: relative; z-index: 2; margin-top: clamp(28px, 3vw, 48px); max-width: 600px; }
.hero-say { font-size: var(--fs-l); font-weight: 600; line-height: 1.3; color: var(--ink); max-width: none; }
.hero-say + .lead { margin-top: 10px; color: var(--muted); }
.hero-copy .actions { margin-top: 36px; }
.rise-hero { position: absolute; z-index: 0; left: 46%; top: 5%; width: calc(54% - var(--m)); height: calc(95% - 36px); overflow: visible; }
.hero-grid { position: absolute; z-index: 0; left: 46%; top: 5%; width: calc(54% - var(--m)); height: calc(95% - 36px); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%), linear-gradient(to right, transparent 0%, #000 45%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 55%), linear-gradient(to right, transparent 0%, #000 45%); mask-composite: intersect; }
.hero-grid rect.hg-cell { fill: var(--line); opacity: 0.5; }
.rise-hero path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  /* the full 1.5s draw only on the first page of a visit; afterwards a quick 600ms draw */
  .mo .rise-hero { clip-path: inset(-10% 100% -10% -2%); animation: wipe 600ms var(--ease-in-out) forwards; }
  .mo.first-visit .rise-hero { animation: wipe 1500ms var(--ease-in-out) 250ms forwards; }
}
@keyframes wipe { to { clip-path: inset(-10% -2% -10% -2%); } }
@media (max-width: 1023px) {
  .rise-hero, .hero-grid { left: 34%; top: 40%; width: calc(66% - var(--m)); height: calc(60% - 30px); }
  /* home: the copy sits higher now the h1 is two lines, so the line and grid start under the lead, beside the buttons */
  .hero--home .rise-hero, .hero--home .hero-grid { left: 52%; top: 50%; width: calc(48% - var(--m)); height: calc(50% - 30px); }
}
@media (max-width: 759px) {
  .hero--home .hero-in { padding-bottom: 0; }
  .rise-hero { position: relative; left: auto; top: auto; width: 100%; height: 140px; margin-top: 36px; }
}
/* phones: the line becomes a band right under the h1, so it belongs to the headline instead of falling below the fold */
@media (max-width: 599px) {
  .hero--home .hero-in { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(48px, 12vw, 72px); }
  .hero--home .hero-h { grid-row: 1; }
  .hero--home .rise-hero, .hero--home .hero-grid { grid-row: 2; grid-column: 1; position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; height: 100px; margin: 14px 0 0; }
  .hero--home .hero-copy { grid-row: 3; margin-top: 20px; }
}

/* Two doors */
.doors { padding-top: clamp(72px, 7vw, 120px); }
.doors-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 20px; align-items: end; }
.doors-head .h2 { grid-column: 1 / span 7; max-width: 22ch; }
.doors-intro { grid-column: 8 / -1; font-size: var(--fs-l); line-height: 1.4; color: var(--muted); max-width: 30ch; }
@media (max-width: 899px) { .doors-head .h2, .doors-intro { grid-column: 1 / -1; } }
.door-list { margin-top: clamp(48px, 5vw, 80px); }
.door { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 18px; align-items: start; padding: clamp(32px, 3.2vw, 48px) 0 clamp(32px, 3.2vw, 48px); isolation: isolate; }
.door::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); z-index: 1; }
.door::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--door); transform: scaleX(0); transform-origin: left; z-index: 1; }
.door:last-child { box-shadow: inset 0 -2px 0 var(--ink); }
.door--c { --door: var(--red); --door-bg: var(--red-tint); }
.door--s { --door: var(--blue); --door-bg: var(--band); }
.door-bg { position: absolute; inset: 0 calc(-1 * var(--m)); z-index: -1; background: var(--door-bg); clip-path: inset(0 100% 0 0); }
.door-title { grid-column: 1 / span 7; grid-row: 1; font-size: min(var(--fs-h2), 7.4vw); line-height: 1.02; letter-spacing: -0.025em; }
.door-a { text-decoration: none; }
.door-a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.door-a:focus-visible { outline: none; }
.door:has(.door-a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 4px; }
.door-desc { grid-column: 8 / -1; grid-row: 1; font-size: var(--fs-l); line-height: 1.4; padding-top: 0.4em; max-width: 34ch; }
.door-more { grid-column: 1 / span 6; grid-row: 2; align-self: end; color: var(--ink); max-width: 56ch; }
.door-go { grid-column: 8 / -1; grid-row: 2; align-self: end; font-weight: 600; display: inline-flex; gap: 0.5em; }
.door--s .door-go { color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .mo .door-more, .mo .door-go { opacity: 0; transform: translateY(6px); transition: opacity 240ms ease, transform 240ms var(--ease-out); }
  .mo .door-go .arr { transform: translateX(-6px); transition: transform 240ms var(--ease-out); }
  /* the slide moves the title text, not the heading: a transform on the heading would shrink the panel-wide link to the heading */
  .mo .door-t { display: inline-block; transition: transform 200ms var(--ease-out); }
  .mo .door::after { transition: transform 240ms var(--ease-out); }
  .mo .door-bg { transition: clip-path 240ms var(--ease-out); }
  .mo .door:hover .door-more, .mo .door:hover .door-go { opacity: 1; transform: none; }
  .mo .door:hover .door-go { transition-delay: 60ms; }
  .mo .door:hover .door-go .arr { transform: translateX(4px); }
  .mo .door:hover .door-t { transform: translateX(8px); }
  .door:hover::after { transform: scaleX(1); }
  .door:hover .door-bg { clip-path: inset(0 0 0 0); }
}
.mo .door:focus-within .door-more, .mo .door:focus-within .door-go { opacity: 1; transform: none; }
.door:focus-within::after { transform: scaleX(1); }
.door:focus-within .door-bg { clip-path: inset(0 0 0 0); }
@media (max-width: 899px) {
  .door { grid-template-columns: 1fr; row-gap: 14px; }
  .door-title, .door-desc, .door-more, .door-go { grid-column: 1 / -1; grid-row: auto; }
  .door-desc { padding-top: 0; }
  .door-more { color: var(--muted); }
}

/* Proof */
.proof-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 56px; align-items: start; }
.proof-h { grid-column: 1 / span 7; max-width: 14ch; }
.proof-c { grid-column: 1 / span 7; }
.proof-s { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: end; background: var(--band); padding: clamp(28px, 3vw, 44px); border-radius: 4px; }
.proof-k { font-weight: 600; margin-bottom: 14px; }
.proof-big { display: flex; align-items: baseline; gap: 0.3em; margin-bottom: 14px; max-width: none; font-family: var(--display); font-weight: 500; color: var(--navy); }
.proof-n { font-size: var(--fs-fig); line-height: 0.9; letter-spacing: -0.035em; font-variant-numeric: lining-nums; }
.proof-u { font-size: var(--fs-l); letter-spacing: -0.005em; }
.proof-c { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(28px, 4vw, 64px); row-gap: 28px; align-items: center; }
.proof-c .lnk { grid-column: 1 / -1; justify-self: start; }
.proof-line { font-size: var(--fs-m); line-height: 1.12; letter-spacing: -0.015em; max-width: 16ch; font-weight: 500; }
.ledger { width: clamp(220px, 22vw, 320px); height: auto; overflow: visible; }
.ledger rect { fill: var(--line); }
.ledger rect.ey { fill: var(--cell); } /* --band (#EAF0F6) is too close to paper to read as filled; --cell is its one-step-darker sibling */
@media (max-width: 600px) { .proof-c { grid-template-columns: 1fr; } }
.figs { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: clamp(32px, 5vw, 88px); row-gap: 20px; align-items: end; }
.fig { display: flex; flex-direction: column-reverse; gap: 6px; }
.fig dd { font: 500 var(--fs-fig)/0.9 var(--display); letter-spacing: -0.027em; font-variant-numeric: tabular-nums lining-nums; }
.fig dt { color: var(--muted); max-width: 22ch; }
.fig--xl { grid-row: span 2; }
.fig--xl dd { font-size: clamp(6rem, 3rem + 11vw, 14rem); line-height: 0.82; letter-spacing: -0.042em; }
.proof-c .lnk { margin-top: 8px; }
.seals { display: grid; gap: 4px; margin-bottom: 22px; }
.seals li { display: flex; align-items: center; gap: 12px; font: 500 var(--fs-h3)/1.2 var(--display); letter-spacing: -0.005em; }
.seals li::before { content: ""; flex: none; width: 18px; height: 10px; border-left: 3px solid var(--blue); border-bottom: 3px solid var(--blue); transform: rotate(-45deg) translate(2px, -3px); }
.proof-s p { margin-bottom: 22px; }
.proof-s .lnk::after { background: var(--blue); }
@media (max-width: 899px) {
  .proof-h, .proof-c, .proof-s { grid-column: 1 / -1; grid-row: auto; }
}

/* Logos */
.logos-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; align-items: center; }
.logos-head { grid-column: 1 / span 3; }
.logos-head p { margin-top: 8px; }
.logos-grid > .logos, .logos-grid > .marq { grid-column: 4 / -1; min-width: 0; }
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.logo { display: flex; align-items: center; justify-content: center; min-width: 0; height: 116px; padding: 20px 28px; background: #fff; border-radius: 4px; overflow: hidden; }
/* the image box always fits its tile (Safari otherwise keeps an image's natural width inside grid items) */
.logo img { display: block; width: 100%; height: 46px; max-width: 100%; object-fit: contain; }
.marq { --line: #85828A; }
.marq__pause { font-size: var(--fs-14); letter-spacing: 0.01em; }
@media (max-width: 899px) {
  .logos-head, .logos-grid > .logos, .logos-grid > .marq { grid-column: 1 / -1; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* SLaiCE teaser */
.teaser-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 56px; align-items: start; }
.teaser-h { grid-column: 1 / -1; }
.teaser-text { grid-column: 1 / span 5; }
.points { display: grid; gap: 26px; }
.points p { margin-top: 6px; }
.teaser-text .actions { margin-top: 44px; }
.teaser-fig { grid-column: 7 / -1; position: sticky; top: 120px; }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px var(--g); margin-top: 22px; }
.flow li { position: relative; padding-top: 12px; font-weight: 500; color: var(--navy); line-height: 1.3; }
.flow li::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 3px; background: var(--blue); opacity: 0; transform: scaleX(0.4); transform-origin: left; }
.flow li.is-on::before { opacity: 1; transform: none; }
.mo .flow li::before { transition: opacity 200ms ease, transform 320ms var(--ease-out); }
html:not(.js) .flow li:last-child::before { opacity: 1; transform: none; }
@media (max-width: 600px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the steps are buttons: plain text until the first play ends, then hover, tap or focus shows each step */
.flow-btn { display: flex; align-items: flex-start; width: 100%; min-height: 44px; padding: 0 0 6px; border: 0; background: none; font: inherit; color: inherit; text-align: left; line-height: inherit; cursor: default; }
.is-live .flow-btn { cursor: pointer; }
.flow-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .is-live .flow-btn:hover { text-decoration: underline; text-underline-offset: 3px; } }
.flow-hint { margin-top: 6px; font-size: var(--fs-14); color: var(--muted); visibility: hidden; }
.is-live .flow-hint { visibility: visible; }
@media (max-width: 1180px) {
  .teaser-text, .teaser-fig { grid-column: 1 / -1; }
  .teaser-fig { position: static; max-width: 760px; }
  .teaser-fig .board { --cw: clamp(40px, 5vw, 56px); }
}

/* opening quote mark in logo red (large type only) */
.q { color: var(--red); }

/* Closing CTA */
.cta { padding-block: clamp(72px, 8vw, 128px); }
/* logo strips are a single row: a slimmer band than a full section */
.sec.logos-sec { padding-block: clamp(40px, 4.5vw, 72px); }
.cta-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; }
.cta-h { font-size: min(var(--fs-h2), 7.2vw); line-height: 1.02; letter-spacing: -0.025em; max-width: 24ch; }

/* =========================================================
   SLaiCE slice board (home teaser, SLaiCE story, phone steps)
   ========================================================= */
.board { --cw: clamp(34px, 3.1vw, 50px); --ch: clamp(18px, 1.6vw, 24px); --gap: 5px; position: relative; background: #fff; border-radius: 6px; padding: clamp(18px, 2vw, 32px); font-variant-numeric: tabular-nums; }
.b-row { display: flex; align-items: flex-start; gap: clamp(10px, 1.4vw, 22px); }
.b-title { font-weight: 600; font-size: var(--fs-14); margin-bottom: 12px; max-width: none; letter-spacing: 0.01em; }
.b-grid, .t-grid { position: relative; display: flex; gap: var(--gap); }
.yrs { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-12); color: var(--muted); padding-right: 4px; letter-spacing: 0.02em; }
.yrs span { height: var(--ch); line-height: var(--ch); }
.yrs .yrs-h { height: 30px; line-height: 30px; margin-bottom: 2px; }
.col { position: relative; z-index: 0; display: flex; flex-direction: column; gap: 6px; }
.col::before { content: ""; position: absolute; inset: -6px -5px; z-index: -1; border-radius: 8px; background: var(--band); opacity: 0; }
.col-h { display: grid; place-items: center; height: 30px; min-width: var(--cw); padding: 0 6px; border: 0; border-radius: 999px; background: var(--paper-2); font: 600 var(--fs-12)/1 var(--sans); color: var(--ink); letter-spacing: 0.02em; }
button.col-h { cursor: help; }
.cells { display: flex; flex-direction: column; gap: 4px; }
.c, .t { position: relative; display: block; width: var(--cw); height: var(--ch); border-radius: 3px; background: var(--cell); }
.c::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue); opacity: 0; }
.cut { position: absolute; left: -2px; right: -2px; top: calc(30px + 6px + 5 * (var(--ch) + 4px) - 3px); height: 2px; background: var(--ink); clip-path: inset(0 100% 0 0); }
.cut span { position: absolute; right: 0; top: 6px; font-size: var(--fs-12); font-weight: 600; white-space: nowrap; background: #fff; padding: 0 4px; letter-spacing: 0.02em; }
.b-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 88px; color: var(--blue); font-size: var(--fs-12); font-weight: 700; opacity: 0.35; letter-spacing: 0.02em; }
.b-mid span { color: var(--navy); }
.b-arrow { width: clamp(40px, 4vw, 64px); height: 16px; }
.t-cols { display: grid; grid-template-columns: repeat(2, minmax(var(--cw), max-content)); gap: 4px var(--gap); align-content: start; }
.t-cols .col-h { margin-bottom: 2px; background: var(--navy); color: #fff; }
.t { background: var(--blue); opacity: 0; transform: translateX(-14px); }
.b-rec { margin-top: 18px; padding: 14px 16px; background: var(--band); border-radius: 4px; opacity: 0; transform: translateY(6px); }
.b-rec .b-title { margin-bottom: 8px; }
.b-rec dl { display: grid; gap: 6px; }
.b-rec dl > div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; }
.b-rec dt { font-size: var(--fs-14); color: var(--muted); letter-spacing: 0.01em; }
.b-rec dd { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-14); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.m-to { font-weight: 600; color: var(--navy); }
.m-arrow { color: var(--blue); }
.b-note { margin-top: 8px; font-size: var(--fs-12); color: var(--muted); letter-spacing: 0.02em; }
.b-live { margin-top: 16px; font-size: var(--fs-b); color: var(--muted); min-height: 3.1em; }
.tip { position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 190px; padding: 8px 10px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: var(--fs-14); line-height: 1.3; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); letter-spacing: 0.01em; }
.col:first-of-type .tip { left: -12px; transform: translate(0, 4px); }
.mo .tip { transition: opacity 150ms ease, transform 200ms var(--ease-out); }
.mo .col::before { transition: opacity 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .col:hover::before { opacity: 1; }
  .col:hover .tip { opacity: 1; transform: translate(-50%, 0); }
  .col:first-of-type:hover .tip { transform: translate(0, 0); }
}
.col:focus-within::before, .col.is-tip::before { opacity: 1; }
.col:focus-within .tip, .col.is-tip .tip { opacity: 1; transform: translate(-50%, 0); }
.col:first-of-type:focus-within .tip, .col:first-of-type.is-tip .tip { transform: translate(0, 0); }

/* states: 1 select, 2 filter, 3 mask, 4 move (cumulative) */
.board:not([data-state="0"]) .col:not(.is-pick) .c { opacity: 0.45; }
.board:not([data-state="0"]) .is-pick .c::after { opacity: 1; }
.board:not([data-state="0"]) .is-pick .col-h { background: var(--navy); color: #fff; }
.board:not([data-state="0"]) .b-mid { opacity: 1; }
.board:is([data-state="2"], [data-state="3"], [data-state="4"]) .is-pick .c.is-old::after { opacity: 0; }
.board:is([data-state="2"], [data-state="3"], [data-state="4"]) .c.is-old { opacity: 0.45; }
.board:is([data-state="2"], [data-state="3"], [data-state="4"]) .cut { clip-path: inset(0 0 0 0); }
.board:is([data-state="3"], [data-state="4"]) .b-rec { opacity: 1; transform: none; }
.board[data-state="4"] .t { opacity: 1; transform: none; }
.mo .board .c { transition: opacity 300ms ease; }
.mo .board .c::after { transition: opacity 300ms ease; }
.mo .board .col-h { transition: background-color 300ms ease, color 300ms ease; }
.mo .board .cut { transition: clip-path 420ms var(--ease-out); }
.mo .board .b-mid { transition: opacity 300ms ease; }
.mo .board .b-rec { transition: opacity 400ms ease, transform 400ms var(--ease-out); }
.mo .board .t { transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.mo .board[data-state="4"] .t { transition-delay: min(calc(var(--i) * 40ms), 200ms); }
.board--mini { --cw: 26px; --ch: 12px; --gap: 4px; padding: 16px; }
.board--mini .yrs { display: none; }
.board--mini .col-h { height: 22px; font-size: var(--fs-12); padding: 0 4px; letter-spacing: 0.02em; }
.board--mini .cut { top: calc(22px + 6px + 5 * (var(--ch) + 4px) - 3px); }
.board--mini .cut span { display: none; }
.board--mini .b-mid { padding-top: 54px; }
.board--mini .b-arrow { width: 32px; }
.board--mini .b-rec { margin-top: 12px; }
@media (max-width: 600px) {
  .board .b-row { flex-direction: column; gap: 10px; }
  .board .b-mid { flex-direction: row; padding: 0 0 0 40px; gap: 10px; }
  .board .b-arrow { transform: rotate(90deg); width: 34px; }
  .board { --cw: 40px; }
}

/* =========================================================
   Shared page pieces
   ========================================================= */
/* inner-page hero */
.hero--page .hero-in, .hero--s .hero-in { padding-top: clamp(48px, 6vw, 104px); padding-bottom: clamp(72px, 8vw, 136px); }
.hero-tick { position: absolute; right: var(--m); bottom: 28px; width: min(36%, 520px); height: 150px; overflow: visible; z-index: 0; }
.hero-tick path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .mo .hero-tick { clip-path: inset(-10% 100% -10% -2%); animation: wipe 1200ms var(--ease-in-out) 200ms forwards; }
}
@media (max-width: 899px) { .hero-tick { position: relative; right: auto; bottom: auto; width: 70%; height: 90px; margin: 40px 0 0 auto; } }

/* stretched-link cards: they stay still; the rule takes the offer colour and the arrow slides 4px */
.card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 0 0; }
.card::before, .card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.card::before { background: var(--line); }
.card::after { background: var(--offer); transform: scaleX(0); transform-origin: left; }
.card-a { text-decoration: none; }
.card-a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-a:focus-visible { outline: none; }
.card:has(.card-a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 6px; }
.card-go { margin-top: auto; padding-top: 10px; font-weight: 600; display: inline-flex; gap: 0.5em; color: var(--navy); }
.w-consult .card-go, .w-neutral .card-go { color: var(--ink); }
.mo .card::after, .mo .card-go .arr { transition: transform 360ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card:hover::after { transform: scaleX(1); }
  .card:hover .card-go .arr { transform: translateX(4px); }
}
.card:has(.card-a:focus-visible)::after { transform: scaleX(1); }
.card:has(.card-a:focus-visible) .card-go .arr { transform: translateX(4px); }

/* in-page navigation */
.subnav { position: sticky; top: 80px; z-index: 20; background: var(--paper-2); }
.subnav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; min-height: 48px; padding-block: 0; }
.subnav a { position: relative; display: flex; align-items: center; min-height: 48px; padding: 0; font-size: var(--fs-b); line-height: 1.2; font-weight: 500; text-decoration: none; }
.subnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--offer); transform: scaleX(0); transform-origin: left; }
.mo .subnav a::after { transition: transform 320ms var(--ease-out); }
.subnav a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .subnav a:hover::after { transform: scaleX(1); } }
.subnav a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 899px) { .subnav { position: static; } .subnav ul { gap: 0 20px; } }

/* FAQ accordion: plus turns into a cross; answer opens 0fr -> 1fr */
.faq { display: grid; gap: 6px; }
.qa { --qa-rest: rgba(243, 241, 236, 0.55); --qa-open: var(--paper-2); border-radius: 6px; background: var(--qa-rest); padding-inline: clamp(16px, 2vw, 24px); }
.band .qa, .tone .qa { --qa-rest: rgba(255, 255, 255, 0.5); --qa-open: #fff; }
.qa.is-open { background: var(--qa-open); }
.mo .qa { transition: background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .qa:hover { background: var(--qa-open); } }
.qa-q { font: inherit; letter-spacing: 0; }
.qa-q button { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 0; border: 0; background: none; text-align: left; cursor: pointer; font: 600 var(--fs-l)/1.3 var(--sans); letter-spacing: 0; }
.qa-icon { position: relative; flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; background: var(--paper-2); }
.w-slaice .qa-icon { background: var(--band); }
.band .qa-icon { background: #fff; }
.qa-icon::before, .qa-icon::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: var(--ink); border-radius: 2px; }
.qa-icon::after { transform: rotate(90deg); }
.qa-icon { transform: rotate(0deg); }
.qa.is-open .qa-icon { transform: rotate(45deg); }
.mo .qa-icon { transition: transform 260ms var(--ease-out); }
.qa-a { display: grid; grid-template-rows: 1fr; }
.js .qa-a { grid-template-rows: 0fr; visibility: hidden; }
.js .qa.is-open .qa-a { grid-template-rows: 1fr; visibility: visible; }
.mo .qa-a { transition: grid-template-rows 320ms var(--ease-out), visibility 0s linear 320ms; }
.mo .qa.is-open .qa-a { transition: grid-template-rows 320ms var(--ease-out), visibility 0s; }
.qa-in { overflow: hidden; }
/* the answer text fades in once the row has started to open (60ms), and out at once on close; height stays on grid rows */
.mo .qa-in { transition: opacity 200ms ease; }
.mo .qa:not(.is-open) .qa-in { opacity: 0; }
.mo .qa.is-open .qa-in { transition-delay: 60ms; }
.qa-in p { padding: 0 52px 24px 0; }
@media (max-width: 600px) { .qa-in p { padding-right: 0; } }
@media (hover: hover) and (pointer: fine) { .qa-q button:hover .qa-icon { background: var(--ink); } .qa-q button:hover .qa-icon::before, .qa-q button:hover .qa-icon::after { background: var(--paper); } }

/* rising path (consulting engagement, about story) */
.rise { position: relative; }
.rise-svg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: var(--rise-h, 300px); overflow: visible; }
.rise-svg path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rise-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); }
.rise-step { position: relative; padding-top: calc(var(--rise-h, 300px) * var(--y) + 34px); }
.rise-step::before, .rise-step::after { content: ""; position: absolute; left: calc(50% - 9px); top: calc(var(--rise-h, 300px) * var(--y) - 9px); width: 18px; height: 18px; border-radius: 50%; }
.rise-step::before { background: var(--paper); box-shadow: inset 0 0 0 4px var(--red); }
.rise-step::after { background: var(--red); opacity: 0; transform: scale(0.6); }
.rise-step > * { max-width: 30ch; }
.rise-num { display: block; font: 500 var(--fs-14)/1 var(--sans); color: var(--muted); margin-bottom: 10px; letter-spacing: 0.01em; }
.rise-step h3 { font-size: var(--fs-h3); }
.rise-step p { margin-top: 10px; }
.rise-step:nth-child(1) { --y: 0.9; } .rise-step:nth-child(2) { --y: 0.62; } .rise-step:nth-child(3) { --y: 0.36; } .rise-step:nth-child(4) { --y: 0.1; }
.rise-step { padding-left: 0; }
.rise-step::before, .rise-step::after { left: 0; }
.rise-step > * { margin-left: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mo .rise.is-armed .rise-svg { clip-path: inset(-10% 100% -10% -2%); }
  .mo .rise.is-play .rise-svg { clip-path: inset(-10% -2% -10% -2%); transition: clip-path 900ms var(--ease-in-out); }
  .mo .rise .rise-step::after { transition: opacity 300ms ease, transform 300ms var(--ease-out); }
  .mo .rise.is-play:not(.is-scroll):not(.is-story) .rise-step::after, .mo .rise.is-scroll .rise-step.is-on::after { opacity: 1; transform: none; }
  .mo .rise.is-play .rise-step:nth-child(1)::after { transition-delay: 60ms; }
  .mo .rise.is-play .rise-step:nth-child(2)::after { transition-delay: 380ms; }
  .mo .rise.is-play .rise-step:nth-child(3)::after { transition-delay: 560ms; }
  .mo .rise.is-play .rise-step:nth-child(4)::after { transition-delay: 820ms; }
  .mo .rise.is-scroll .rise-step::after { transition-delay: 0ms; }
  .mo .rise-step::before { transition: transform 240ms var(--ease-out); }
  /* doubled classes outrank the scroll rule (.rise.is-scroll .rise-step.is-on) so the hovered dot always grows */
  .mo .rise.rise .rise-step.rise-step:is(:hover, :focus-within)::before, .mo .rise.rise .rise-step.rise-step:is(:hover, :focus-within)::after { opacity: 1; transform: scale(1.3); transition-delay: 0ms; }
}
@media (max-width: 899px) {
  .rise-svg { display: none; }
  .rise-steps { grid-template-columns: 1fr; row-gap: 36px; padding-left: 32px; box-shadow: inset 4px 0 0 var(--red); }
  .rise-step { padding-top: 0; }
  .rise-step::before, .rise-step::after { left: -39px; top: 2px; }
}

/* closing CTA variants */
.cta--s .cta-h { max-width: 18ch; }
.cta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

/* =========================================================
   SLaiCE page
   ========================================================= */
.s-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 40px; }
.s-hero-h { grid-column: 1 / -1; white-space: nowrap; font-size: min(var(--fs-d), 7.7vw); }
.s-hero-copy { grid-column: 1 / span 6; }
.s-hero-copy .actions { margin-top: 32px; }
.seals--row { grid-column: 8 / -1; align-self: start; margin: 0; gap: 10px; }
.seals--row li { font-size: var(--fs-l); }
@media (max-width: 899px) {
  .s-hero-copy, .seals--row { grid-column: 1 / -1; }
  .s-hero-h { font-size: 7.7vw; }
  .s-hero .hero-tick, .c-hero .hero-tick { grid-column: 1 / -1; }
}

.tax-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 48px; align-items: start; }
.tax-text { grid-column: 1 / span 7; }
.tax-text .statement { margin-top: 28px; }
.tax-text > p:not(.statement) { margin-top: 22px; }
.tax-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--g); margin-top: 48px; }
.tax-points dt, .feat-list dt, .ben-col dt, .cmp-points dt { font: 600 var(--fs-b)/1.3 var(--sans); }
.tax-points dd, .feat-list dd, .ben-col dd, .cmp-points dd { margin-top: 6px; }
.tax-figs { grid-column: 9 / -1; display: grid; gap: 28px; }
.tax-figs > div { display: flex; flex-direction: column-reverse; gap: 4px; }
.tax-figs dd { font: 500 var(--fs-fig)/0.9 var(--display); letter-spacing: -0.032em; color: var(--navy); font-variant-numeric: tabular-nums lining-nums; }
.tax-figs dt { color: var(--muted); }
@media (max-width: 899px) {
  .tax-text, .tax-figs { grid-column: 1 / -1; }
  .tax-points { grid-template-columns: 1fr; }
}

.uc-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.uc-head { grid-column: 1 / span 6; grid-row: 1; align-self: start; }
.uc-head .lead { margin-top: 22px; max-width: 30ch; }
.stairs { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); align-items: start; --step: clamp(90px, 8vw, 120px); }
.stair { padding-bottom: 8px; background: var(--band); }
.stair::before { content: none; }
.stair:nth-child(1) { margin-top: calc(var(--step) * 3); } .stair:nth-child(2) { margin-top: calc(var(--step) * 2); } .stair:nth-child(3) { margin-top: var(--step); }
.stair h3 { font-size: var(--fs-m); letter-spacing: -0.015em; line-height: 1.08; }
.law { color: var(--muted); }
@media (max-width: 1099px) {
  .uc-head, .stairs { grid-column: 1 / -1; }
  .stairs { grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; margin-top: 56px; }
  .stair:nth-child(n) { margin-top: 0; }
}
@media (max-width: 600px) { .stairs { grid-template-columns: 1fr; } }

/* the sticky scroll story */
.story-h { max-width: none; font-size: min(var(--fs-h2), 6.2vw); }
.story-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); margin-top: clamp(40px, 4vw, 72px); }
.story-stage { grid-column: 1 / span 7; position: sticky; top: 150px; top: clamp(96px, 18svh, 150px); align-self: start; }
.story-count { margin-top: 12px; font-size: var(--fs-14); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.story-steps { grid-column: 9 / -1; }
.step { position: relative; min-height: 72vh; min-height: 72svh; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-block: 40px; }
.step::before { content: ""; position: absolute; left: -28px; top: calc(50% - 60px); width: 4px; height: 0; background: var(--red); }
.step h3 { padding-top: 0; }
.step:first-child { min-height: 50vh; min-height: 50svh; justify-content: flex-start; padding-top: 80px; }
.step:last-child { min-height: 80vh; min-height: 80svh; }
.step::before { height: 72px; transform: scaleY(0); transform-origin: bottom; }
.step.is-active::before { transform: scaleY(1); }
.mo .step::before { transition: transform 420ms var(--ease-out); }
.step .board--mini { display: none; }
.board--story { --cw: clamp(40px, 3.6vw, 60px); --ch: clamp(20px, 1.9vw, 28px); padding: clamp(24px, 2.6vw, 40px); }
.board--story .b-row { justify-content: space-between; }
.board--story .b-mid { padding-top: 120px; }
@media (max-width: 1023px) {
  .story-stage { display: none; }
  .story-steps { grid-column: 1 / -1; display: grid; gap: 48px; }
  .step, .step:first-child, .step:last-child { min-height: 0; padding: 0; justify-content: flex-start; }
  .step::before { display: none; }
  .step .board--mini { display: block; margin-top: 8px; max-width: 520px; }
}
.mask-demo { margin-top: 8px; padding: 18px 20px; background: var(--band); border-radius: 4px; }
.mask-cap { color: var(--muted); margin-bottom: 10px; }
.mask-demo dl { display: grid; gap: 8px; }
.mask-demo dl > div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: baseline; }
.mask-demo dt { color: var(--muted); font-size: var(--fs-14); letter-spacing: 0.01em; }
.mask-demo dd { display: flex; flex-wrap: wrap; gap: 4px 12px; font-variant-numeric: tabular-nums; }
.js-mask { font-weight: 600; color: var(--navy); white-space: pre; }
.m-arrow { color: var(--blue); }
html:not(.js) .js-mask { font-size: 0; }
html:not(.js) .js-mask::after { content: attr(data-to); font-size: var(--fs-b); }
/* board: masked dots on selected cells from step 3 */
.board .c::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='1.1' fill='%23fff'/%3E%3C/svg%3E"); }
.board:is([data-state="3"], [data-state="4"]) .is-pick .c:not(.is-old)::before { opacity: 0.9; }
.mo .board .c::before { transition: opacity 400ms ease; }
.board .t { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='1.1' fill='%23ffffff' fill-opacity='.9'/%3E%3C/svg%3E"); }

.feat-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 40px; }
.feat-head { grid-column: 1 / span 4; }
.feat-head .lead { margin-top: 20px; }
.feat-list { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px var(--g); }
.feat-list dt { font-family: var(--sans); font-size: var(--fs-l); font-weight: 600; letter-spacing: 0; }
@media (max-width: 899px) { .feat-head, .feat-list { grid-column: 1 / -1; } }
@media (max-width: 600px) { .feat-list { grid-template-columns: 1fr; } }

.ben-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
.ben-head .h2 { grid-column: 1 / span 6; }
.ben-head .lead { grid-column: 8 / -1; }
.xchart { position: relative; margin-top: clamp(40px, 4vw, 64px); }
.xchart svg { width: 100%; height: clamp(140px, 16vw, 230px); overflow: visible; }
.xchart path { fill: none; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.l-cost { stroke: var(--blue); }
.l-value { stroke: var(--red); }
.xchart figcaption { display: flex; justify-content: space-between; gap: 24px; margin-top: 16px; }
.xchart figcaption span { max-width: 34ch; }
.xchart strong { display: block; font: 500 var(--fs-h3)/1.2 var(--display); letter-spacing: -0.005em; }
.x-cost strong { color: var(--navy); }
.x-value { text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .mo .xchart.is-armed svg { clip-path: inset(-10% 100% -10% -2%); }
  .mo .xchart.is-play svg { clip-path: inset(-10% -2% -10% -2%); transition: clip-path 1200ms var(--ease-in-out); }
}
.ben-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 48px; margin-top: 56px; }
.ben-col--cost { grid-column: 1 / span 5; }
.ben-col--value { grid-column: 8 / -1; }
.ben-col h3 { padding-bottom: 14px; margin-bottom: 22px; }
.ben-col--cost h3 { box-shadow: inset 0 -4px 0 var(--blue); }
.ben-col--value h3 { box-shadow: inset 0 -4px 0 var(--red); }
.ben-col dl { display: grid; gap: 22px; }
.ben-close { margin-top: 72px; font: 500 var(--fs-h3)/1.2 var(--display); letter-spacing: -0.005em; text-align: center; max-width: none; }
@media (max-width: 899px) {
  .ben-head .h2, .ben-head .lead, .ben-col--cost, .ben-col--value { grid-column: 1 / -1; }
  .ben-head .lead { margin-top: 20px; }
  .xchart figcaption { flex-direction: column; }
  .x-value { text-align: left; }
  .ben-close { text-align: left; }
}

.cmp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 48px; align-items: start; }
.cmp-grid > .h2 { grid-column: 1 / -1; }
.cmp-head { grid-column: 1 / span 4; }
.cmp-points { display: grid; gap: 22px; }
.cmp-wrap { grid-column: 6 / -1; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 6px; font-size: var(--fs-b); }
.cmp th, .cmp td { padding: 20px 18px; text-align: left; vertical-align: top; }
.cmp thead th { font: 600 var(--fs-l)/1.15 var(--sans); letter-spacing: 0; padding-top: 26px; vertical-align: bottom; }
.cmp tbody th { font-weight: 600; width: 30%; }
.cmp tbody tr + tr > * { box-shadow: inset 0 1px 0 var(--line); }
.cmp .is-us { background: var(--navy); color: #fff; font-weight: 600; }
.cmp thead .is-us { border-radius: 6px 6px 0 0; }
.cmp tbody tr:last-child .is-us { border-radius: 0 0 6px 6px; }
.cmp tbody tr + tr > .is-us { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.cmp td { font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .cmp-head, .cmp-wrap { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .cmp { font-size: var(--fs-14); letter-spacing: 0.01em; }
  .cmp th, .cmp td { padding: 14px 8px; }
  .cmp thead th { font-size: var(--fs-b); }
}

.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 40px; align-items: start; }
.faq-head { grid-column: 1 / span 4; position: sticky; top: 150px; top: clamp(112px, 18svh, 150px); }
.faq-head .h2 { font-size: var(--fs-m); letter-spacing: -0.015em; }
.faq-head p { margin-top: 20px; }
.faq-head .lnk { margin-top: 24px; }
.faq-grid > .faq { grid-column: 6 / -1; }
@media (max-width: 899px) { .faq-head, .faq-grid > .faq { grid-column: 1 / -1; } .faq-head { position: static; } }

/* placeholder content the client must supply */
.ph { background: var(--red-tint); padding: 0 0.2em; border-radius: 3px; box-shadow: inset 0 -2px 0 var(--red); }

/* breadcrumb and inner hero */
.crumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: var(--fs-14); color: var(--muted); letter-spacing: 0.01em; }
.crumb li + li::before { content: "/"; margin-right: 8px; }
.crumb .lnk { font-weight: 500; color: var(--ink); }
.hero-lead { margin-top: clamp(24px, 2.6vw, 40px); max-width: 44ch; position: relative; z-index: 1; }
.hero--page .display { position: relative; z-index: 1; }
.hero--short .hero-in { padding-bottom: clamp(48px, 5vw, 80px); }

/* =========================================================
   Use cases
   ========================================================= */
.uc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: clamp(48px, 5vw, 80px); align-items: start; }
.uc-intro { grid-column: 1 / span 5; }
.uc-intro .statement { margin-top: 24px; }
.uc-intro > p:not(.statement) { margin-top: 20px; }
.uc-intro .btn { margin-top: 32px; }
.uc-fig { grid-column: 7 / -1; background: var(--band); padding: clamp(20px, 2.4vw, 36px); border-radius: 6px; }
.band .uc-fig { background: #fff; }
.uc--flip .uc-intro { grid-column: 8 / -1; grid-row: 1; }
.uc--flip .uc-fig { grid-column: 1 / span 6; grid-row: 1; }
.laws { margin-top: 28px; padding-top: 18px; box-shadow: inset 0 3px 0 var(--blue); }
.laws ul { display: grid; gap: 10px; margin-top: 10px; }
.uc-cmp { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.uc-was { grid-column: 1 / span 5; }
.uc-now { grid-column: 7 / -1; }
.uc-cmp h3 { margin-bottom: 16px; }
.uc-cmp ul { display: grid; gap: 12px; }
.uc-cmp li { position: relative; padding-left: 30px; }
.uc-was li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 16px; height: 2px; background: var(--muted); }
.uc-now li::before { content: ""; position: absolute; left: 2px; top: 0.32em; width: 14px; height: 8px; border-left: 3px solid var(--blue); border-bottom: 3px solid var(--blue); transform: rotate(-45deg); }
.uc-how { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; }
.uc-how > h3 { grid-column: 1 / span 3; }
.uc-steps { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--g); counter-reset: st; }
.uc-steps li { counter-increment: st; position: relative; padding-top: 22px; }
.uc-steps li::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: calc(25% * var(--k, 1)); background: var(--blue); }
.uc-steps li:nth-child(1) { --k: 1; } .uc-steps li:nth-child(2) { --k: 2; } .uc-steps li:nth-child(3) { --k: 3; } .uc-steps li:nth-child(4) { --k: 4; }
.uc-steps h4 { font-size: var(--fs-b); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.uc-steps h4::before { content: counter(st) ". "; color: var(--muted); font-weight: 500; }
.uc-steps p { margin-top: 6px; }
.uc-out { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--g); }
.uc-out dt { font: 500 var(--fs-h3)/1.2 var(--display); letter-spacing: -0.005em; }
.uc-out dd { margin-top: 8px; color: var(--muted); }
.uc-out--two { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uc-out--figs > div { display: flex; flex-direction: column-reverse; gap: 6px; }
.uc-out--figs dd { margin: 0; color: var(--navy); font: 500 clamp(2.75rem, 1.6rem + 3.4vw, 5rem)/0.95 var(--display); letter-spacing: -0.027em; }
.uc-out--figs dt { font: 400 var(--fs-b)/1.4 var(--sans); color: var(--muted); letter-spacing: 0; }
@media (max-width: 1023px) {
  .uc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .uc-intro, .uc-fig, .uc--flip .uc-intro, .uc--flip .uc-fig, .uc-was, .uc-now, .uc-how > h3, .uc-steps { grid-column: 1 / -1; grid-row: auto; }
  .uc-now { margin-top: 36px; }
  .uc-out, .uc-out--two { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .uc-steps { grid-template-columns: 1fr; } }

/* flow diagrams (HTML, so the labels reflow and never drop below 12px) */
.fl { display: flex; align-items: stretch; flex-wrap: wrap; row-gap: 16px; }
.fl-sys, .fl-side { flex: 1 1 0; min-width: 0; padding: 18px 18px 20px; border-radius: 6px; background: #fff; }
.band .fl-sys, .band .fl-side { background: var(--band); }
.fl-sys--tgt { box-shadow: inset 0 4px 0 var(--navy); }
.fl-name { font-weight: 600; font-size: var(--fs-b); line-height: 1.25; }
.fl-sub { font-size: var(--fs-14); color: var(--muted); letter-spacing: 0.01em; }
.bks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 14px; }
.bks i { display: block; height: 22px; border-radius: 3px; background: var(--cell); }
.bks i.on { background: var(--blue); }
.bks--rows { grid-template-columns: 1fr; }
.bks--rows i { height: 16px; }
.bks--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bks--big { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bks--masked i.on { background-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='1.1' fill='%23fff'/%3E%3C/svg%3E"); }
.fl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fl-tags span { padding: 4px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.02em; }
.fl-go { flex: 0 0 clamp(96px, 9vw, 132px); display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; padding: 0 12px; text-align: center; font-size: var(--fs-12); font-weight: 600; line-height: 1.3; color: var(--navy); letter-spacing: 0.02em; }
.fl-go::before { content: ""; height: 12px; background: var(--blue); clip-path: polygon(0 5px, calc(100% - 10px) 5px, calc(100% - 10px) 0, 100% 6px, calc(100% - 10px) 12px, calc(100% - 10px) 7px, 0 7px); }
.fl-stack { flex: 1 1 0; display: grid; gap: 10px; }
.fl-sys--sm .bks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl--sdt .fl-side { flex-basis: 100%; background: transparent; box-shadow: inset 0 0 0 2px var(--cell); }
.fl--sdt .fl-side .bks { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 280px; }
.fl--sdt .fl-go { flex-basis: clamp(80px, 7vw, 110px); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: var(--fs-14); letter-spacing: 0.01em; }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg::before { content: ""; width: 18px; height: 12px; border-radius: 3px; background: var(--cell); }
.lg--on::before { background: var(--blue); }
@media (max-width: 1279px) and (min-width: 900px) {
  .fl:not(.fl--sdt) { flex-direction: column; }
}
@media (max-width: 1279px) {
  .fl--sdt { flex-direction: column; }
}
.fl:is(.fl--sdt), .fl { }
@media (max-width: 1279px) {
  .fl .fl-go, .fl--sdt .fl-go { flex: none; flex-direction: row; align-items: center; justify-content: flex-start; padding: 6px 0 6px 18px; text-align: left; }
  .fl .fl-go::before { flex: none; width: 12px; height: 34px; clip-path: polygon(5px 0, 7px 0, 7px calc(100% - 10px), 12px calc(100% - 10px), 6px 100%, 0 calc(100% - 10px), 5px calc(100% - 10px)); }
}
@media (max-width: 899px) { .fl { flex-direction: column; } }

/* migration race */
.race { grid-column: 1 / -1; padding: clamp(24px, 3vw, 48px); background: #fff; border-radius: 6px; }
.lanes { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; column-gap: 24px; row-gap: 16px; margin-top: 28px; align-items: center; }
.lane { display: contents; }
.lane-name { font-weight: 600; }
.track { position: relative; height: 52px; border-radius: 4px; background: var(--paper-2); }
.js-race-fill { position: absolute; inset: 0; border-radius: 4px; background: var(--cell); transform-origin: left center; }
.lane--us .js-race-fill { background: var(--navy); }
.js-race-label { position: absolute; top: 50%; left: calc(var(--to) * 100%); transform: translate(calc(-100% - 14px), -50%); font: 600 var(--fs-b)/1 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lane--us .js-race-label { color: #fff; }
.mo .js-race-label { opacity: 0; transition: opacity 300ms ease; }
.mo .js-race-label.is-shown { opacity: 1; }
.axis { grid-column: 2; display: flex; justify-content: space-between; font-size: var(--fs-12); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.race-note { margin-top: 22px; color: var(--muted); }
@media (max-width: 600px) {
  .lanes { grid-template-columns: 1fr; row-gap: 8px; }
  .lane-name { margin-top: 10px; }
  .axis { grid-column: 1; }
  .js-race-label { font-size: var(--fs-14); letter-spacing: 0.01em; }
}

/* =========================================================
   Consulting
   ========================================================= */
.c-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.c-hero .display { grid-column: 1 / -1; }
.c-hero-copy { grid-column: 1 / span 6; margin-top: clamp(28px, 3vw, 48px); position: relative; z-index: 1; }
.c-hero-copy .actions { margin-top: 32px; }
@media (max-width: 899px) { .c-hero-copy { grid-column: 1 / -1; } }
.svc-lead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 40px; margin-top: clamp(64px, 6vw, 112px); }
.svc-lead-text { grid-column: 1 / span 7; }
.svc-title { font-size: min(var(--fs-h2), 7.4vw); line-height: 1.02; letter-spacing: -0.025em; max-width: 12ch; }
.svc-lead-text .lead { margin-top: 24px; }
.ticks { display: grid; gap: 10px; margin-top: 22px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.32em; width: 14px; height: 8px; border-left: 3px solid var(--offer); border-bottom: 3px solid var(--offer); transform: rotate(-45deg); }
.svc-lead-text .lnk { margin-top: 28px; }
.models { grid-column: 9 / -1; align-self: end; background: var(--red-tint); padding: clamp(24px, 2.4vw, 36px); border-radius: 4px; }
.models-h { font: 600 var(--fs-b)/1.3 var(--sans); letter-spacing: 0; margin-bottom: 14px; }
.models-list { display: grid; gap: 4px; }
.models-list li { font: 500 var(--fs-h3)/1.2 var(--display); letter-spacing: -0.005em; }
.svc-pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 56px; margin-top: clamp(64px, 6vw, 104px); }
.svc-card:nth-child(1) { grid-column: 1 / span 5; }
.svc-card:nth-child(2) { grid-column: 7 / -1; margin-top: clamp(0px, 6vw, 96px); }
.svc-card h3 { font-size: var(--fs-m); line-height: 1.08; letter-spacing: -0.015em; }
@media (max-width: 899px) {
  .svc-lead-text, .models, .svc-card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
}
.eng-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 20px; align-items: end; margin-bottom: clamp(56px, 6vw, 96px); }
.eng-head .h2 { grid-column: 1 / span 7; }
.eng-head .lead { grid-column: 8 / -1; }
@media (max-width: 899px) { .eng-head .h2, .eng-head .lead { grid-column: 1 / -1; } }
.rise-steps--years h3 { font-size: min(var(--fs-h2), 7.4vw); line-height: 1.02; letter-spacing: -0.025em; }
.p-index .rise-steps--years h3 { font-size: max(var(--fs-l), calc(var(--fs-h2) * 0.6)); }  /* Home proof: the same size as About's story years (--fs-h2s there) */
.rise-step .lnk { display: inline-block; margin-top: 12px; }

/* =========================================================
   Clients
   ========================================================= */
.cs-intro { padding-bottom: clamp(40px, 4vw, 64px); }
.cs-intro-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 20px; align-items: start; }
.cs-intro-in .h2 { grid-column: 1 / span 7; }
.cs-intro-in .lead { grid-column: 8 / -1; }
.case-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: clamp(40px, 4.4vw, 72px); }
.case-top { grid-column: 1 / span 7; }
.case-client { font-weight: 600; color: var(--ink); }
.case-top .h2s { max-width: 28ch; }
.case-kind { margin-top: 18px; color: var(--muted); font-size: var(--fs-l); }
.case-figs { grid-column: 9 / -1; display: grid; gap: 24px; align-self: end; }
.case-figs > div { display: flex; flex-direction: column-reverse; gap: 6px; }
.case-figs dd { font: 500 var(--fs-fig)/0.92 var(--display); letter-spacing: -0.032em; color: var(--navy); font-variant-numeric: lining-nums; }
.case-figs dt { color: var(--muted); }
/* two figures span both rows, so the challenge sits under the heading, not under the figures */
.case-figs:not(.case-figs--four) { grid-row: 1 / span 2; }
.case-figs:not(.case-figs--four) + .case-brief { grid-row: 2; align-self: end; }
.case-figs--four { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); }
.case-figs--four dd { font-size: min(var(--fs-h2), 7.4vw); white-space: nowrap; }
.case-story { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 40px; }
.case-block:nth-child(1) { grid-column: 1 / span 5; }
.case-block:nth-child(2) { grid-column: 7 / -1; }
.case-block h4 { margin-bottom: 14px; }
.case-block p + p, .case-block ol + p, .case-block p + ol { margin-top: 14px; }
.case-list { list-style: decimal; padding-left: 1.4em; display: grid; gap: 12px; }
.case-list li::marker { font-weight: 600; color: var(--navy); }
.tl { grid-column: 1 / -1; }
.tl figcaption { margin-bottom: 18px; }
.tl-bar { display: flex; gap: 4px; }
.tl-seg { flex: var(--n) 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tl-seg::before { content: ""; order: -1; height: 56px; border-radius: 4px; background: var(--cell); margin-bottom: 8px; }
.tl-seg--hist::before { background: var(--blue); }
.tl-seg--now { flex: 0 0 clamp(120px, 14%, 200px); }
.tl-seg--now::before { background: var(--navy); }
.tl-yr { font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-what { color: var(--muted); max-width: 26ch; }
.band .tl-what { color: #4a4950; }
.pull { grid-column: 2 / span 10; position: relative; padding-top: 0.4em; }

.pull p { font: 400 var(--fs-m)/1.2 var(--display); letter-spacing: -0.015em; max-width: 32ch; text-indent: -0.42em; }
.case-quote { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.case-quote h4 { grid-column: 1 / span 3; }
.case-quote blockquote { grid-column: 4 / span 8; }
.case-quote blockquote p { max-width: 70ch; }
/* case studies: a one-line challenge up front; the full story opens on demand */
.case-brief { grid-column: 1 / span 8; font-size: var(--fs-l); max-width: 62ch; }
.case-brief strong { color: var(--navy); }
.case-more { grid-column: 1 / -1; }
.case-more > summary { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 20px; border: 1.5px solid var(--ctl); border-radius: 999px; font-weight: 600; cursor: pointer; list-style: none; }
.case-more > summary::-webkit-details-marker { display: none; }
.case-more > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .case-more > summary:hover { background: #fff; } }
.cm-icon { position: relative; width: 12px; height: 12px; }
.cm-icon::before, .cm-icon::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: currentColor; border-radius: 1px; }
.cm-icon::after { transform: rotate(90deg); }
.case-more[open] .cm-icon::after { transform: none; }
.case-more .cm-close, .case-more[open] .cm-open { display: none; }
.case-more[open] .cm-close { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .mo .case-more { interpolate-size: allow-keywords; }
  .mo .case-more::details-content { block-size: 0; overflow: clip; transition: block-size 420ms var(--ease-in-out), content-visibility 420ms allow-discrete; }
  .mo .case-more[open]::details-content { block-size: auto; }
  .mo .case-more-in { opacity: 0; transition: opacity 300ms ease; }
  .mo .case-more[open] .case-more-in { opacity: 1; transition-delay: 120ms; }
  .mo .cm-icon::after { transition: transform 240ms var(--ease-out); }
}
.case-more-in { display: grid; row-gap: clamp(32px, 3.4vw, 56px); margin-top: clamp(28px, 3vw, 44px); }
.month { grid-column: 1 / -1; padding: clamp(24px, 3vw, 44px); background: var(--paper-2); border-radius: 6px; }
.month figcaption { margin-bottom: 22px; }
.month-row { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; column-gap: 20px; row-gap: 8px; align-items: center; }
.month-row + .month-row { margin-top: 18px; }
.month-name { font-weight: 600; }
.days { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; }
.days i { display: block; height: 30px; border-radius: 2px; background: #fff; }
.days--before i:nth-child(-n+5) { background: var(--cell); }

.month-note { grid-column: 2; color: var(--muted); }
.along { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 24px; }
.along > h4 { grid-column: 1 / span 3; }
.along-list { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--g); }
.along-list li { padding-top: 18px; box-shadow: inset 0 3px 0 var(--blue); }
.along-list p { margin-top: 8px; }
@media (max-width: 899px) {
  .cs-intro-in .h2, .cs-intro-in .lead, .case-brief, .case-top, .case-figs, .case-block:nth-child(n), .pull, .case-quote h4, .case-quote blockquote, .along > h4, .along-list { grid-column: 1 / -1; }
  .case-figs--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-figs:not(.case-figs--four), .case-figs:not(.case-figs--four) + .case-brief { grid-row: auto; }
  .case-quote blockquote { margin-top: 12px; }
  .along-list { grid-template-columns: 1fr; }

  .tl-bar { flex-direction: column; gap: 14px; }
  .tl-seg, .tl-seg--now { flex: none; display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; }
  .tl-seg::before { grid-row: span 2; height: auto; min-height: 48px; margin: 0; }
  .month-row { grid-template-columns: 1fr; }
  .month-note { grid-column: 1; }
  .days i { height: 22px; }
}

/* =========================================================
   About
   ========================================================= */
.hero--about .hero-in { padding-top: clamp(48px, 7vw, 120px); padding-bottom: clamp(140px, 13vw, 220px); }
.about-h { font-size: clamp(3rem, 0.6rem + 10vw, 10rem); line-height: 0.95; letter-spacing: -0.035em; position: relative; z-index: 1; }
.hero--about .hero-copy { max-width: 560px; }
.rise-hero--about { left: 40%; width: calc(60% - var(--m)); top: 34%; height: calc(66% - 30px); }
@media (max-width: 759px) {
  .hero--about .hero-in { padding-bottom: 0; }
  .about-h { font-size: 15vw; }
  .rise-hero--about { position: relative; left: auto; top: auto; width: 100%; height: 130px; margin-top: 36px; }
}
.vals { margin-top: clamp(48px, 5vw, 80px); display: grid; gap: clamp(40px, 4vw, 64px); }
.val { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; }
.val-h { grid-column: var(--c, 1) / span 6; font-size: min(var(--fs-h2), 7.4vw); line-height: 1.02; letter-spacing: -0.025em; }
.val p { grid-column: span 3; font-size: var(--fs-l); line-height: 1.4; }
.val:nth-child(1) { --c: 1; } .val:nth-child(2) { --c: 2; } .val:nth-child(3) { --c: 3; }
@media (max-width: 1023px) { .val-h { grid-column: 1 / span 7; } .val p { grid-column: span 5; } }
@media (max-width: 899px) { .val { grid-template-columns: 1fr; row-gap: 12px; } .val-h, .val p { grid-column: 1; } }
.lead-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 40px; align-items: start; }
.lead-title { grid-column: 1 / -1; }
.portrait { grid-column: 1 / span 4; position: sticky; top: 120px; background: #CFDDEA; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 4; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; mix-blend-mode: multiply; }
.person { grid-column: 6 / -1; }
.person-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.person-name { font-size: min(var(--fs-h2), 7.4vw); line-height: 1.02; letter-spacing: -0.025em; }
.person-links { display: flex; gap: 10px; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ctl); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.mo .icon-btn { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
.creds { display: grid; grid-template-columns: auto auto auto; justify-content: start; column-gap: clamp(28px, 4vw, 64px); row-gap: 20px; margin-top: 40px; padding: 0; }
.creds > div { display: flex; flex-direction: column-reverse; gap: 6px; }
.creds dd { font: 500 min(var(--fs-h2), 7.4vw)/0.92 var(--display); letter-spacing: -0.032em; font-variant-numeric: lining-nums; }
.creds dt { color: var(--muted); max-width: 18ch; }
.bio { margin-top: 40px; }
.bio p + p { margin-top: 16px; }
.bio .lead { max-width: 36ch; }
@media (max-width: 899px) {
  .portrait, .person { grid-column: 1 / -1; position: static; }
  .portrait { max-width: 360px; }
  .creds { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   FAQ page and legal
   ========================================================= */
.faq-page { padding-top: clamp(24px, 3vw, 48px); }
.faq-page-grid, .legal-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 32px; align-items: start; }
.faq-toc, .legal-toc { grid-column: 1 / span 3; position: sticky; top: 112px; }
.subnav-list { display: grid; gap: 4px; }
.subnav-list a { position: relative; display: inline-block; padding: 8px 0; font-weight: 500; text-decoration: none; }
.subnav-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--offer); transform: scaleX(0); transform-origin: left; }
.mo .subnav-list a::after { transition: transform 320ms var(--ease-out); }
.subnav-list a[aria-current]::after, .subnav-list a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .subnav-list a:hover::after { transform: scaleX(1); } }
.faq-groups, .legal-body { grid-column: 5 / -1; display: grid; gap: clamp(64px, 6vw, 104px); }
.faq-group .h2s { margin-bottom: 24px; }
.legal-body { gap: 96px; max-width: 74ch; }
.legal-sec h3 { margin: 36px 0 10px; }
.legal-sec p + p { margin-top: 12px; }
.legal-sec > .h2 + * { margin-top: 20px; }
.legal-sec ul { display: grid; gap: 8px; margin-top: 12px; padding-left: 1.25em; list-style: disc; }
.legal-sec li::marker { color: var(--red); }
.legal-sec ul + p { margin-top: 12px; }
.updated { margin-top: 16px; color: var(--muted); }
@media (max-width: 899px) {
  .faq-toc, .legal-toc { grid-column: 1 / -1; position: static; }
  .subnav-list { display: flex; flex-wrap: wrap; gap: 0 22px; }
  .faq-groups, .legal-body { grid-column: 1 / -1; }
}

/* =========================================================
   Forms (behaviour in forms.js)
   ========================================================= */
.contact { padding-block: clamp(48px, 6vw, 104px) var(--sec); }
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 56px; align-items: start; }
.contact-side { grid-column: 1 / span 6; position: relative; }
.contact-h { font-size: min(clamp(2.25rem, 0.9rem + 3.8vw, 5.25rem), 8vw); line-height: 0.98; }
.careers .contact-h { white-space: nowrap; }
.contact-side .lead { margin-top: 28px; }
.contact-direct { display: grid; gap: 6px; margin-top: 40px; }
.big-link { position: relative; display: inline-block; font: 500 clamp(1.375rem, 1rem + 1.2vw, 2rem)/1.2 var(--display); letter-spacing: -0.015em; text-decoration: none; overflow-wrap: anywhere; padding-bottom: 4px; }
.big-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0.18); transform-origin: left; }
.mo .big-link::after { transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .big-link:hover::after { transform: scaleX(1); } }
.big-link:focus-visible::after { transform: scaleX(1); }
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.offices h2 { margin-bottom: 6px; }
.contact-rise { width: 70%; height: 110px; margin-top: 56px; overflow: visible; }
.contact-rise path, .end-rise path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .mo .contact-rise, .mo .end-rise { clip-path: inset(-10% 100% -10% -2%); animation: wipe 1200ms var(--ease-in-out) 250ms forwards; }
}
.form, .form-col { grid-column: 8 / -1; }
.form-col .form { grid-column: auto; }
.form { display: grid; gap: 22px; padding: clamp(24px, 3vw, 48px); background: var(--paper-2); border-radius: 6px; }
.form-note { color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px var(--g); }
.field { display: grid; gap: 8px; align-content: start; }
.field[hidden] { display: none; }
.label { font-weight: 600; font-size: var(--fs-b); padding: 0; }
.opt { font-weight: 400; color: var(--muted); }
.input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--ctl); border-radius: 6px; background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--sans); }
textarea.input { resize: vertical; min-height: 128px; }
.input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.input::placeholder { color: #75737B; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
[aria-invalid="true"].input, .upload:has([aria-invalid="true"]) { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.err { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-14); font-weight: 500; color: var(--ink); max-width: none; letter-spacing: 0.01em; }
.err::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--red); color: var(--ink); font-weight: 700; font-size: var(--fs-12); line-height: 1; letter-spacing: 0.02em; }
.err[hidden] { display: none; }
.topics { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.topics .label { margin-bottom: 4px; }
.topic-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.topic { position: relative; cursor: pointer; }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topic-box { display: grid; gap: 4px; height: 100%; padding: 16px 16px 18px; border: 1.5px solid var(--ctl); border-radius: 6px; background: #fff; }
.topic-name { font-weight: 600; }
.topic-sub { font-size: var(--fs-14); color: var(--muted); letter-spacing: 0.01em; }
.topic { --tc: var(--ink); --tb: var(--paper-2); }
.topic--c { --tc: var(--red); --tb: var(--red-tint); }
.topic--s { --tc: var(--navy); --tb: var(--band); }
.topic input:checked + .topic-box { border-color: var(--tc); background: var(--tb); box-shadow: inset 0 0 0 1.5px var(--tc); }
.topic input:focus-visible + .topic-box { outline: 2px solid var(--blue); outline-offset: 2px; }
.topics:has([aria-invalid="true"]) .topic-box { border-color: var(--red); }
.mo .topic-box { transition: background-color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .topic:hover .topic-box { border-color: var(--ink); } }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }
.check input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px; }
.upload { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px; border: 1.5px dashed var(--ctl); border-radius: 6px; background: #fff; cursor: pointer; }
.upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; }
.upload-hint { font-size: var(--fs-14); color: var(--muted); letter-spacing: 0.01em; }
.upload:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.file-name { font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.01em; }
.file-name:empty { display: none; }
.form-submit { justify-self: start; }
.areas { margin-top: 48px; }
.areas dl { display: grid; gap: 18px; margin-top: 18px; }
.areas dt { font-weight: 600; }
.pref { margin-top: 36px; }
.done { padding: clamp(28px, 3vw, 48px); background: var(--paper-2); border-radius: 6px; }
.done:focus { outline: none; }
.done-rise { width: 96px; height: 64px; margin-bottom: 24px; }
.done p { margin-top: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .mo .done:not([hidden]) .done-rise path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: tick 600ms var(--ease-out) 100ms forwards; }
}
@keyframes tick { to { stroke-dashoffset: 0; } }
@media (max-width: 1023px) {
  .contact-side, .form, .form-col { grid-column: 1 / -1; }
  .contact-rise { display: none; }
}
@media (max-width: 600px) {
  .field-row, .topic-opts, .offices { grid-template-columns: 1fr; }
  .careers .contact-h { white-space: normal; }
}

/* =========================================================
   Thank you and 404
   ========================================================= */
.end { padding-block: clamp(56px, 7vw, 120px) var(--sec); position: relative; overflow: hidden; }
.end-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 56px; position: relative; }
.end-text { grid-column: 1 / span 8; position: relative; z-index: 1; }
.end-h { font-size: min(var(--fs-h2), 7.2vw); }
@media (max-width: 600px) { .end-h br { display: none; } }
.end-text .lead { margin-top: 28px; }
.end-text .actions { margin-top: 36px; }
.end-rise { position: absolute; right: max(var(--m), calc((100% - var(--max)) / 2)); top: 0; width: 36%; height: 260px; overflow: visible; }
.end-rise path { stroke-linejoin: round; }
.end-rise .lg-cell { fill: var(--line); }
.end-links { grid-column: 1 / -1; margin-top: 24px; }
.end-links h2 { margin-bottom: 20px; }
.end-links ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px var(--g); }
.end-links ul:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.end-links .card { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 20px 22px; border-radius: 6px; background: var(--paper-2); font: 600 var(--fs-l)/1.25 var(--sans); }
.end-links .card::before, .end-links .card::after { content: none; }
.mo .end-links .card { transition: background-color 200ms ease, transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .end-links .card:hover { background: var(--red-tint); } }
.end-links .card:has(.card-a:focus-visible) { background: var(--red-tint); }
.end-links .card-go { margin: 0; padding: 0; }
.big404 { grid-column: 1 / -1; font: 500 clamp(7rem, 3rem + 18vw, 20rem)/0.8 var(--display); letter-spacing: -0.052em; color: var(--red); margin-left: -0.05em; }
.end--404 .end-rise { top: 0; width: 46%; height: 230px; }
@media (max-width: 899px) {
  .end-text { grid-column: 1 / -1; }
  .end-rise { position: relative; right: auto; grid-column: 1 / -1; justify-self: end; width: 80%; height: 120px; grid-row: 1; }
  .end-h { font-size: min(var(--fs-h2), 9.6vw); }
  .end--404 .end-rise { grid-row: 2; }
  .end-grid { row-gap: 32px; }
  .end-links ul { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .cmp { font-size: var(--fs-14); table-layout: fixed; letter-spacing: 0.01em; }
  .cmp th, .cmp td { padding: 12px 5px; hyphens: auto; -webkit-hyphens: auto; }
  .cmp thead th { font-size: var(--fs-14); font-family: var(--sans); font-weight: 600; letter-spacing: 0.01em; }
  .cmp tbody th { width: 28%; hyphens: manual; -webkit-hyphens: manual; }
}

/* page-to-page cross-fade where supported */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 140ms ease-out both; }
  ::view-transition-new(root) { animation: vt-in 280ms var(--ease-out) both; }
  /* the header stays put; only the current-page marker glides to its new item */
  ::view-transition-group(site-head) { animation: none; }
  ::view-transition-old(site-head) { display: none; }
  ::view-transition-new(site-head) { animation: none; }
  ::view-transition-group(nav-cur) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* Magick Woods supplies only a white-lettering logo, so its tile is dark. Client logos are never recoloured. */
.logo--on-dark { background: #1C1B1F; }

/* ===== Improvement round 1 (lead developer) ===== */
/* logo-red consulting button: ink text on #D1655D is 4.5:1 */
.btn--red { background: var(--red); color: var(--ink); }
/* proof on the first screen */
.hero-proof { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--fs-b); color: var(--muted); }
.hero-proof li { display: inline-flex; align-items: flex-start; gap: 8px; }
.hero-proof li::before { content: ""; flex: none; width: 14px; height: 2px; margin-top: 0.75em; background: var(--red); border-radius: 2px; }
/* the rising line ends in the A mark */
.rise-a { position: absolute; z-index: 1; width: 44px; height: 44px; right: calc(var(--m) - 12px); top: calc(5% - 34px); }
@media (prefers-reduced-motion: no-preference) {
  .mo .rise-a { opacity: 0; transform: translateY(10px) scale(0.85); animation: rise-a-in 600ms var(--ease-out) 650ms forwards; }
  .mo.first-visit .rise-a { animation-delay: 1650ms; }
}
@keyframes rise-a-in { to { opacity: 1; transform: none; } }
/* Home hero story (fx.js): the grid cells the line passes over light up; on the first page of a visit a pen draws the
   line, the cells light behind it, then the A lands. Later pages: the quick draw, cells already lit. */
.hero-grid rect.hg-lit { fill: #F3D6CF; }
@media (prefers-reduced-motion: no-preference) {
  .mo .hero--home.hs-story .rise-hero { animation: none; clip-path: inset(-10% 100% -10% -2%); }
  .mo .hero--home.hs-story .hero-grid rect.hg-lit { opacity: 0; transition: opacity 420ms var(--ease-out); }
  .mo .hero--home.hs-story .hero-grid rect.hg-lit.is-on { opacity: 1; }
  .mo .hero--home.hs-story .rise-a { animation: none; opacity: 0; transform: translateY(10px) scale(0.85); }
  .mo .hero--home.hs-story .rise-a.is-in { animation: hs-a-land 560ms var(--ease-out) forwards; }
  .hs-pen { position: absolute; z-index: 1; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--paper), 0 0 14px rgba(209, 101, 93, 0.6); pointer-events: none; }
}
@keyframes hs-a-land { 0% { opacity: 0; transform: translateY(10px) scale(0.85); } 60% { opacity: 1; transform: translateY(-2px) scale(1.12); } 100% { opacity: 1; transform: none; } }
@media (max-width: 899px) { .rise-a { display: none; } }
/* a drawn visual for each offer row */
.door-art { grid-column: 11 / -1; grid-row: 2; justify-self: end; align-self: end; width: 100%; max-width: 200px; height: auto; overflow: visible; }
.door-art--c path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.door-art--c circle { fill: var(--paper); stroke: var(--red); stroke-width: 3; }
.door-art--c .da-end { fill: var(--red); }
.door-art--s .on { fill: var(--blue); }
.door-art--s .off { fill: var(--cell-off, #CFDDEA); }
/* pale cells vanish on the band blue, so empty cells go white wherever they sit straight on it */
.door--s:focus-within .door-art--s .off { fill: #fff; }
@media (hover: hover) and (pointer: fine) { .door--s:hover .door-art--s .off { fill: #fff; } }
.mo .door-art--s .off { transition: fill 240ms ease; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mo .door-art { opacity: 0.55; transition: opacity 260ms ease; }
  .mo .door:hover .door-art, .mo .door:focus-within .door-art { opacity: 1; }
  .mo .door-art--c .da-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
  .mo .door:is(:hover, :focus-within) .door-art--c .da-line { animation: da-draw 700ms var(--ease-in-out) both; }
}
@keyframes da-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 899px) { .door-art { grid-column: 1 / -1; grid-row: auto; justify-self: start; max-width: 160px; } }
/* About: a name card instead of a photo */
.namecard { grid-column: 1 / span 4; position: sticky; top: 120px; aspect-ratio: 3 / 4; border-radius: 4px; background: #FFFFFF; box-shadow: 0 0 0 1px #C7D4E5; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 2.6vw, 40px); overflow: hidden; }
.nc-mono { font-family: var(--display); font-weight: 500; font-size: clamp(5rem, 9vw, 9rem); line-height: 0.85; letter-spacing: -0.042em; color: var(--navy); }
.nc-rise { width: 100%; height: 34%; overflow: visible; }
.nc-rise path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nc-years { font-size: var(--fs-b); color: var(--muted); }
.nc-years b { display: block; font-family: var(--display); font-weight: 500; font-size: 2.25rem; line-height: 1; color: var(--ink); margin-bottom: 4px; }
@media (max-width: 899px) { .namecard { position: relative; top: auto; grid-column: 1 / -1; aspect-ratio: auto; min-height: 260px; max-width: 420px; } }
/* phones: a shorter rising line that sits under the buttons without taking a whole screen-band */
@media (max-width: 759px) {
  .rise-hero { width: 72%; margin-left: auto; height: 96px; margin-top: 28px; }
  .hero-grid { top: auto; bottom: 0; left: auto; right: var(--m); width: calc((100% - 2 * var(--m)) * 0.72); height: 96px; }
}

/* =========================================================
   Touch and tablets (iPad portrait 744-834, landscape 1024-1366)
   ========================================================= */
html { overflow-x: clip; }
.marq { min-width: 0; overflow: clip; }
/* touch: every control at least 44px tall without moving the layout */
@media (pointer: coarse) {
  .drop-btn { width: 44px; height: 44px; }
  .btn--sm { min-height: 44px; }
  .lnk:not(p .lnk) { padding-top: 8px; padding-bottom: 11px; margin-block: -8px; }
  .lnk:not(p .lnk)::before, .lnk:not(p .lnk)::after { bottom: 8px; }
  .site-foot .lnk { padding-block: 8px; margin-block: 0; }
  .big-link { padding-block: 5px; }
  .subnav-list a { min-height: 44px; display: inline-flex; align-items: center; }
  .subnav-list a::after { bottom: 6px; }
  button.col-h { position: relative; }
  button.col-h::after { content: ""; position: absolute; inset: -7px -2px; }
  .end-links .card-a { padding-block: 8px; }
}
/* tablet tier, 744-1099: deliberate two-column layouts instead of a stretched phone column */
@media (min-width: 744px) and (max-width: 899px) {
  .door { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
  .door-title { grid-column: 1 / span 6; grid-row: 1; }
  /* the description spans two rows, so the short line sits right under the title instead of below the description */
  .door-desc { grid-column: 7 / -1; grid-row: 1 / span 2; padding-top: 0.3em; }
  .door-more { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
  .door-go { grid-column: 7 / -1; grid-row: 3; }
  .door-art { grid-column: 7 / -1; grid-row: 4; justify-self: start; }
  .proof-h { grid-column: 1 / -1; }
  .proof-c { grid-column: 1 / span 7; grid-template-columns: 1fr; }
  .proof-s { grid-column: 8 / -1; grid-row: auto; }
  .logos-head { grid-column: 1 / -1; }
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .logo { height: 96px; padding: 16px 18px; }
  .end-links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-col { grid-column: span 4; }
  .foot-contact { grid-column: span 6; }
}
@media (min-width: 744px) and (max-width: 1180px) {
  .points { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); }
  .teaser-text { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .end-links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   Apple design audit (round 4)
   ========================================================= */
/* Press states: feedback on touch-down (fx.js adds the empty touchstart listener iOS needs for :active).
   Small things scale to 0.98 in 80ms; large rows take a tint instead. Release is 200ms ease-out. */
.mo :is(.card, .m-link, .m-sub, .drop a, .copy) { transition: transform 200ms var(--ease-out); }
html.mo .race-again, html.mo .race-again.is-shown { transition: opacity 200ms ease, transform 200ms var(--ease-out); }
.mo .door { transition: background-color 200ms var(--ease-out); }
.m-link, .m-sub { transform-origin: left center; }
.mo :is(.card, .m-link, .m-sub, .drop a, .icon-btn, .topic-box, .race-again, .copy):active { transform: scale(0.98); transition-duration: 80ms; }
.door:active, .qa:has(.qa-q button:active) { background: var(--paper-2); }
.mo .door:active, .mo .qa:has(.qa-q button:active) { transition-duration: 80ms; }
.band .qa:has(.qa-q button:active), .tone .qa:has(.qa-q button:active) { background: #fff; }

/* Edge shadows: the sticky header, the sticky sub-nav and the pinned phone story board show a hairline only while
   content scrolls under them. site.js toggles .is-stuck from a 1px sentinel (IntersectionObserver, no scroll listener). */
.stick-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; visibility: hidden; }
.story-grid { position: relative; }
.story-grid > .stick-sentinel { position: absolute; left: 0; width: 1px; margin: 0; }
.story-grid > .stick-sentinel--start { top: 0; }
.story-grid > .stick-sentinel--end { bottom: 0; }
.site-head, .subnav, .story-stage { box-shadow: 0 1px 0 rgba(28, 27, 31, 0); }
.mo :is(.site-head, .subnav, .story-stage) { transition: box-shadow 200ms ease; }
.site-head.is-stuck, .subnav.is-stuck { box-shadow: 0 1px 0 rgba(28, 27, 31, 0.06); }
@media (max-width: 743px) { .story-stage.is-stuck { box-shadow: 0 1px 0 rgba(28, 27, 31, 0.06); } }
/* when a bar is stuck right under the header, only the lower edge shows */
html.edge-under .site-head.is-stuck { box-shadow: 0 1px 0 rgba(28, 27, 31, 0); }


/* large titles that are h3 in the outline still read as headings: keep the heading face */
.display, .h2, .h2s, .door-title, .svc-card h3, .svc-title, .val-h, .person-name, .rise-steps--years h3, .proof-line { font-family: var(--display); font-weight: 500; }
.seals li { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }