/* ==========================================================================
   PRISM Accessibility Consultants — design system
   Typeface: Atkinson Hyperlegible Next, designed by the Braille Institute for
   low-vision readers. Every colour pair used for text meets WCAG 2.2 AA.

   Material system (modern skeuomorphism): light comes from above-left.
   Kept deliberately restrained: soft depth and real materials, never toy-like.
   - porcelain: raised surfaces (cards, keys, buttons)
   - well:      recessed surfaces (tracks, inputs, toggles)
   - orb:       matte spheres, used only on Why PRISM and the portrait chips
   - selection: chosen keys turn ink-dark; no indicator lights or glows
   - textures:  paper grain everywhere, a faint linen on alternate sections
   No shine or sheen animations anywhere.
   ========================================================================== */

:root {
  --paper: #f6f1e7;
  --paper-2: #ede5d3;
  --white: #fffdf8;
  --ink: #14202e;
  --ink-2: #46525f;
  --navy: #0e1c2e;
  --navy-2: #172a40;
  --blue: #1b5e9b;
  --blueprint: #1d4f80;
  --orange: #fe9013;
  --orange-ink: #a14e06;     /* orange for text on light backgrounds */
  --yellow: #fecf2a;
  --yellow-deep: #f0b90b;

  /* The PRISM logo palette: yellow, light orange, darker orange and prism blue (with a lighter tint of
     the blue for variety). Every accent on the site comes from these. */
  --s1: #fecf2a; --s2: #fea61e; --s3: #fe9013; --s4: #3a6f9c; --s5: #5b8dbd; --s6: #3a6f9c;
  --brand-blue: #3a6f9c; --blue-ink: #2f5f8c;
  --spectrum: linear-gradient(90deg, var(--s1), var(--s2), var(--s3), var(--s4), var(--s5), var(--s6));

  --line: rgba(20, 32, 46, .12);
  --line-2: rgba(20, 32, 46, .32);

  /* Materials */
  --porcelain: linear-gradient(180deg, #fffefb 0%, #f8f3ea 100%);
  --raise: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(20, 32, 46, .03), 0 1px 2px rgba(20, 32, 46, .07), 0 6px 14px -6px rgba(20, 32, 46, .14), 0 22px 40px -26px rgba(20, 32, 46, .22);
  --raise-hi: inset 0 1px 0 #fff, 0 0 0 1px rgba(20, 32, 46, .035), 0 2px 4px rgba(20, 32, 46, .06), 0 14px 28px -12px rgba(20, 32, 46, .22), 0 40px 64px -36px rgba(20, 32, 46, .3);
  /* A physical key: top light, a thin lower edge for thickness, then a soft shadow */
  --key: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(20, 32, 46, .08), 0 4px 12px -8px rgba(20, 32, 46, .28);
  --key-hover: inset 0 1px 0 #fff, 0 2px 4px rgba(20, 32, 46, .08), 0 12px 22px -14px rgba(20, 32, 46, .35);
  --well-bg: linear-gradient(180deg, #e7dfcf, #efe8da);
  --well: inset 0 2px 5px rgba(20, 32, 46, .14), inset 0 -1px 0 rgba(255, 255, 255, .85);
  --press: inset 0 1px 3px rgba(20, 32, 46, .16), inset 0 -1px 0 rgba(255, 255, 255, .6);
  --selected: 0 8px 18px -10px rgba(14, 28, 46, .7);
  /* Textures: kept faint on purpose */
  --linen: repeating-linear-gradient(0deg, rgba(20, 32, 46, .017) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(20, 32, 46, .013) 0 1px, transparent 1px 4px);
  --perf: radial-gradient(circle at 2px 2px, rgba(20, 32, 46, .085) 1.1px, transparent 1.6px) 0 0 / 12px 12px;

  --fg: var(--ink);
  --muted: var(--ink-2);
  --rule: var(--line);
  --rule-2: var(--line-2);
  --focus: var(--blue);
  --accent: var(--s2);

  --r: 14px;
  --r-lg: 24px;
  --r-xl: 32px;
  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --label: "Lexend", "Atkinson Hyperlegible Next", system-ui, sans-serif;   /* small labels, meta text and numerals */
  --display: "Lexend", "Atkinson Hyperlegible Next", system-ui, sans-serif; /* headings */
  --hand: "Caveat", "Segoe Print", cursive;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --gap: clamp(16px, 2vw, 28px);
  --header-h: 96px;           /* floating bar (64px) plus the space above and below it */
  --section: clamp(72px, 9vw, 128px);
  /* Heading sizes inside components, so every card and panel matches */
  --t-card: 1.25rem;
  --t-item: 1.08rem;
  --t-panel: clamp(1.45rem, 2.2vw, 1.85rem);
}

.dark {
  --fg: #f6f1e7;
  --muted: #b9c3cf;
  --rule: rgba(246, 241, 231, .16);
  --rule-2: rgba(246, 241, 231, .38);
  --focus: var(--yellow);
  background: var(--navy);
  color: var(--fg);
}

/* ---- Display preferences (set from the Display panel) ------------------- */
html[data-text="lg"] { font-size: 112.5%; }
html[data-text="xl"] { font-size: 125%; }
html[data-spacing="wide"] body *:not(svg *) { letter-spacing: .12em !important; word-spacing: .16em !important; }
html[data-spacing="wide"] p, html[data-spacing="wide"] li, html[data-spacing="wide"] dd { line-height: 1.9 !important; }
html[data-spacing="wide"] p { margin-bottom: 2em; }
html[data-links="underline"] a:not(.btn) { text-decoration: underline !important; text-underline-offset: .2em; }
html[data-contrast="high"] {
  --paper: #fff; --paper-2: #fff; --white: #fff; --ink: #000; --ink-2: #000;
  --navy: #000; --navy-2: #000; --blue: #00376b; --orange-ink: #6e3400;
  --line: rgba(0, 0, 0, .85); --line-2: #000;
  --porcelain: #fff; --well-bg: #fff;
}
html[data-contrast="high"] .dark { --muted: #fff; --rule: rgba(255, 255, 255, .8); }
html[data-contrast="high"] body::after { display: none; }
html[data-contrast="high"] .word { opacity: 1 !important; }
html[data-contrast="high"] .card, html[data-contrast="high"] .key, html[data-contrast="high"] .dkey, html[data-contrast="high"] .explorer__opt { border: 2px solid #000; box-shadow: none; }

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65;
  color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* While the window is being resized, pause transitions so panels don't flash. */
.is-resizing *, .is-resizing *::before, .is-resizing *::after { transition: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); text-underline-offset: .2em; }
.dark a:not(.btn) { color: var(--fg); }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
h3, h4 { font-weight: 600; line-height: 1.22; letter-spacing: -.015em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--yellow); color: var(--ink); }
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.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-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000; background: var(--yellow); color: var(--ink);
  font-weight: 700; padding: 12px 20px; border-radius: 999px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---- Type ---------------------------------------------------------------- */
.t-display { font-size: clamp(2.7rem, 6.6vw, 5.8rem); line-height: .95; letter-spacing: -.04em; }
.t-1 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -.045em; }
.t-2 { font-size: clamp(1.95rem, 3.6vw, 3.1rem); line-height: 1.06; letter-spacing: -.04em; }
.t-3 { font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.2; letter-spacing: -.015em; }
.t-lead { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.55; max-width: 54ch; }
.t-statement { font-size: clamp(1.9rem, 4.4vw, 3.9rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; color: #d96a00; }   /* the logo's orange, deepened just enough to read on cream (3:1 for large text) */
.meta { font-family: var(--label); font-size: .82rem; font-weight: 500; letter-spacing: .015em; }
.muted { color: var(--muted); }

/* A small category line above a page title (articles, guides, case studies) */
.kicker { margin: 0; font: 600 .84rem/1.3 var(--label); letter-spacing: .02em; color: var(--orange-ink); }
/* One vertical rhythm for every heading group on the site */
.kicker + :is(h1, h2) { margin-top: .9rem; }
:is(h1, h2) + .t-lead { margin-top: 1.2rem; }
.t-lead + :is(.ledger, .checks, .rating, .mount, .card, .seals) { margin-top: 1.8rem; }

/* highlighted words get a brand-yellow underline that draws in under the text (never through it) */
.lit {
  background: linear-gradient(90deg, #fecf2a, #fea61e) no-repeat 0 100% / 100% .1em; padding-bottom: .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.js .lit { background-size: 0% .1em; transition: background-size 1.2s var(--ease-out) .3s; }
.js .lit.is-visible { background-size: 100% .1em; }
.dark .lit, .on-photo .lit { background: none; color: var(--yellow); }

/* ---- Layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
main > section { overflow-x: clip; }
.bg-2 { background-color: var(--paper-2); background-image: var(--linen); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(20, 32, 46, .04); }
.ruled { border-top: 1px solid var(--rule); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }

.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; align-items: start; }
.grid12 > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 960px) {
  .c-main { grid-column: 1 / 10; }
  .c-main.rail-head { grid-column: 1 / -1; }
  .c-main-narrow { grid-column: 1 / 9; }
  .c-a5 { grid-column: 1 / 6; }
  .c-a6 { grid-column: 1 / 7; }
  .c-b6 { grid-column: 7 / 13; }
  .c-a7 { grid-column: 1 / 8; }
  .c-b4 { grid-column: 9 / 13; }
  .c-b5 { grid-column: 8 / 13; }
  .c-mid { grid-column: 4 / 9; }
  .c-side { grid-column: 10 / 13; }
  .self-end { align-self: end; }
  .self-center { align-self: center; }
  .sticky { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}
.head { margin-bottom: clamp(36px, 5vw, 64px); }
.head .t-lead { margin-top: 1.2rem; }
.head h2 { max-width: 22ch; }
.grid2 { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid3 { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid4 { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* ---- Materials ------------------------------------------------------------ */
.card {
  position: relative; border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 32px);
  background: radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, .75), transparent 55%), var(--porcelain); border: 1px solid rgba(20, 32, 46, .07); box-shadow: var(--raise);
}
.card--hover { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--raise-hi); }
.well { border-radius: var(--r); background: var(--well-bg); box-shadow: var(--well); }
.perf { background: var(--perf), var(--well-bg); }

/* Glossy sphere. Every filled circle on the site uses it: the icon orbs, the list ticks and the mock-up status dots;
   the RHFAC seal and the AODA date badge use the blue seal version below. */
.orb, .checks--detail .tick, .vig__ok, .vig__flag {
  position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .98) 0, color-mix(in srgb, var(--accent) 60%, #fff) 22%, var(--accent) 54%, color-mix(in srgb, var(--accent) 66%, #000) 100%);
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .16), inset 0 2px 2px rgba(255, 255, 255, .6), 0 12px 22px -10px color-mix(in srgb, var(--accent) 75%, #000), 0 2px 3px rgba(20, 32, 46, .12);
}
.orb::after, .checks--detail .tick::after, .vig__ok::after, .vig__flag::after { content: ""; position: absolute; left: 24%; top: 10%; width: 38%; height: 22%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); pointer-events: none; }
/* RHFAC as a PRISM-blue orb with the letters. The Foundation's own logo is governed by its brand guidelines for RHFAC Professionals,
   so it stays out until those guidelines say it may be used (the file is kept in assets/images). */
.orb--seal { --accent: #2f5f8c; container-type: inline-size; color: #fff; background: radial-gradient(circle at 32% 24%, #9dbfdf 0, #3a6f9c 46%, #1f466c 100%); }
.orb__mark { position: relative; z-index: 1; font: 700 22cqw/1 var(--label); letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.orb--seal img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.orb--seal::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 42%), radial-gradient(circle at 70% 84%, rgba(0, 0, 0, .3), transparent 62%);
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .22), inset 0 2px 2px rgba(255, 255, 255, .55); }
.orb--seal::after { z-index: 2; }
.orb .ic { position: relative; z-index: 1; width: 26px; height: 26px; stroke-width: 2; }
.orb--sm { width: 42px; height: 42px; }
.orb--sm .ic { width: 21px; height: 21px; }
.orb--lg { width: 88px; height: 88px; }
.orb--lg .ic { width: 40px; height: 40px; stroke-width: 1.8; }


/* Raised pill / key that presses in when selected */
.key {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 18px; border-radius: 999px; cursor: pointer;
  background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .1); box-shadow: var(--key);
  font: 600 .98rem/1.2 var(--font); color: var(--ink); text-align: left; text-decoration: none; transition: box-shadow .25s, transform .25s, background .25s;
}
.key:hover { transform: translateY(-1px); box-shadow: var(--key-hover); }
.key[aria-selected="true"], .key[aria-pressed="true"], .key:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--selected); transform: none; }

/* ---- Buttons & links ------------------------------------------------------ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 50px; padding: .8em 1.45em;
  border-radius: 999px; border: 1px solid transparent; font: 700 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, box-shadow .25s, transform .2s var(--ease);
}
.btn .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  color: var(--ink); background: linear-gradient(180deg, #ffe37a 0%, #fecf2a 52%, #f6be12 100%); border-color: rgba(160, 110, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(170, 115, 0, .2), 0 6px 14px -8px rgba(200, 140, 0, .7), 0 1px 2px rgba(20, 32, 46, .14);
}
.btn--primary:hover { background: linear-gradient(180deg, #ffdc5c 0%, #fbc81d 52%, #eeb20a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(170, 115, 0, .2), 0 10px 20px -10px rgba(200, 140, 0, .8), 0 1px 2px rgba(20, 32, 46, .14); }
.btn--primary:active { box-shadow: inset 0 2px 4px rgba(150, 100, 0, .25); transform: translateY(1px); }
.btn--ink {
  color: #f6f1e7; background: linear-gradient(180deg, #2a3a4d, #14202e); border-color: #0b1520;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 14px -8px rgba(14, 28, 46, .7);
}
.btn--ink:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); transform: translateY(1px); }
.btn--ink:hover { background: linear-gradient(180deg, #2f5e8c, #1b4a78); }
.btn--line { color: var(--fg); background: var(--porcelain); border-color: rgba(20, 32, 46, .12); box-shadow: var(--key); }
.btn--line:hover { box-shadow: var(--key-hover); }
.btn--glass { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--glass:hover { background: rgba(255, 255, 255, .28); }
html[data-contrast="high"] .btn { border: 2px solid currentColor; box-shadow: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 1.8rem; }
.link-arrow {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-weight: 700; color: var(--fg);
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .35em;
}
.link-arrow .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover .ic { transform: translateX(4px); }

/* ---- Floating header ------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 100; padding: 12px var(--gutter) 20px; pointer-events: none; }
.header__bar {
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 8px;
  max-width: calc(var(--container) - 2 * var(--gutter)); height: 64px; margin-inline: auto; padding: 0 9px 0 24px;
  border-radius: 999px; background: linear-gradient(180deg, rgba(255, 254, 251, .94), rgba(250, 246, 238, .9));
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(20, 32, 46, .08); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20, 32, 46, .05), 0 12px 32px -16px rgba(20, 32, 46, .32);
  transition: box-shadow .3s;
}
.is-scrolled .header__bar { box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20, 32, 46, .06), 0 16px 40px -16px rgba(20, 32, 46, .42); }
html[data-contrast="high"] .header__bar { background: #fff; border: 2px solid #000; }
.brand { display: flex; align-items: center; flex: none; height: 44px; color: var(--ink); text-decoration: none; border-radius: 8px; }
.brand__logo { display: block; height: 30px; width: auto; aspect-ratio: 1912 / 492; overflow: visible; }
.brand__logo .beam { transform-box: fill-box; transform-origin: left center; transition: transform .6s var(--ease); }
.brand:hover .brand__logo .beam { transform: scaleX(1.08); }

.site-nav { display: flex; align-items: center; margin-left: clamp(10px, 2vw, 28px); }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__home, .nav__cta { display: none; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border: 0; background: none;
  cursor: pointer; border-radius: 999px; font: 500 1rem/1.2 var(--font); color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color .2s;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { background: rgba(20, 32, 46, .06); }
.nav__link[aria-current="page"], .has-sub.is-current > .nav__link { font-weight: 700; }
.nav__link[aria-current="page"]::after, .has-sub.is-current > .nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--orange);
}
.has-sub.is-current > .nav__link::after { margin-left: -10px; }
.nav__link .ic { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.nav__link[aria-expanded="true"] .ic { transform: rotate(180deg); }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header__cta { min-height: 46px; padding: .65em 1.2em; }

/* Mega menus */
.has-sub { position: relative; }
.mega {
  position: absolute; top: calc(100% + 18px); left: -28px; z-index: 10;
  width: min(700px, calc(100vw - 2 * var(--gutter))); padding: 10px; border-radius: var(--r-lg);
  display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--raise-hi);
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); transform-origin: 60px 0;
  clip-path: inset(0 0 100% 0 round var(--r-lg));
  transition: opacity .25s ease, transform .45s var(--ease-out), clip-path .5s var(--ease-out), visibility 0s .5s;
}
.mega.is-open, html:not(.js) .has-sub:hover .mega, html:not(.js) .has-sub:focus-within .mega {
  opacity: 1; visibility: visible; transform: none; clip-path: inset(0 0 0 0 round var(--r-lg)); transition-delay: 0s;
}
.mega__list { display: grid; gap: 2px; align-content: start; }
.js .mega__item { opacity: 0; }
.mega.is-open .mega__item { animation: itemIn .5s var(--ease-out) both; animation-delay: calc(.08s + var(--i, 0) * .07s); }
@keyframes itemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mega__link {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px;
  color: var(--ink); text-decoration: none; transition: background-color .2s;
}
.mega__link:hover, .mega__link[aria-current="page"] { background: var(--paper); }
.mega__link > .ic:first-child { width: 22px; height: 22px; color: var(--ink-2); }
.mega--res { grid-template-columns: 1fr 1fr; width: min(640px, calc(100vw - 2 * var(--gutter))); }
.mega--res .mega__list { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
.mega__all { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 14px; background: var(--paper); color: var(--ink); font-weight: 700; text-decoration: none; }
.mega__all:hover { background: var(--paper-2); }
.mega__all .ic { width: 18px; height: 18px; }
.mega__title { display: block; font-weight: 700; line-height: 1.25; }
.mega__desc { display: block; font-size: .9rem; color: var(--ink-2); line-height: 1.4; }
.mega__go { opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--ease-out); }
.mega__link:hover .mega__go, .mega__link:focus-visible .mega__go { opacity: 1; transform: none; }
.mega__feature {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px;
  min-height: 220px; padding: 20px; border-radius: 18px; color: var(--ink); isolation: isolate;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%), var(--porcelain);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20, 32, 46, .06);
}
.mega__feature p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.mega__feature strong { font-size: 1.15rem; line-height: 1.2; }
.mega__feature a, .mega__feature button { font: 700 1rem/1.2 var(--font); color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .3em; }

.display-btn, .faq-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 15px 0 13px; border-radius: 999px; cursor: pointer;
  font: 600 .95rem/1 var(--font); color: var(--ink); background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .12);
  box-shadow: var(--key); transition: box-shadow .2s, background .2s, transform .2s;
}
.display-btn:hover, .faq-btn:hover { box-shadow: var(--key-hover); }
.display-btn[aria-expanded="true"], .faq-btn[aria-expanded="true"] { background: var(--well-bg); box-shadow: var(--press); }
.display-btn .ic, .faq-btn .ic { width: 20px; height: 20px; }
html:not(.js) .display-btn, html:not(.js) .faq-btn { display: none; }

.menu-toggle {
  display: none; position: relative; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .12); box-shadow: inset 0 1px 0 #fff, 0 3px 8px -4px rgba(20, 32, 46, .2);
}
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
  position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), background-color .2s;
}
.menu-toggle__bars { top: 50%; margin-top: -1px; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; left: 0; margin-left: 0; }
.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1239px) {
  .display-btn span:not(.sr-only) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .display-btn { width: 46px; padding: 0; justify-content: center; }
}
@media (max-width: 1023px) {
  .header__bar { padding-left: 20px; }
  .faq-btn span:not(.sr-only) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .faq-btn { width: 46px; padding: 0; justify-content: center; }
  .js .menu-toggle { display: block; }
  .nav__home { display: block; }
  .site-nav { margin: 0; }
  .js .site-nav {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 12px;
    max-height: calc(100dvh - var(--header-h) - 16px); overflow-y: auto; padding: 8px 16px 16px; border-radius: var(--r-lg);
    background: var(--white); border: 1px solid var(--line); box-shadow: var(--raise-hi);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right;
    transition: opacity .25s var(--ease), transform .35s var(--ease-out), visibility 0s .35s;
  }
  .js .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  html:not(.js) .header__bar { height: auto; flex-wrap: wrap; padding-block: 10px; border-radius: var(--r-lg); }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__list > li { border-bottom: 1px solid var(--line); }
  .nav__link { width: 100%; justify-content: flex-start; padding: 16px 6px; font-size: 1.15rem; border-radius: 0; }
  .nav__link .ic { margin-left: auto; }
  .nav__link:hover, .nav__link[aria-expanded="true"] { background: none; }
  .nav__link[aria-current="page"]::after, .has-sub.is-current > .nav__link::after { position: static; margin: 0 0 0 8px; }
  .nav__cta { display: flex; }
  .mega { position: static; width: auto; padding: 0 0 12px; border: 0; box-shadow: none; display: none; grid-template-columns: 1fr;
    opacity: 1; visibility: visible; transform: none; clip-path: none; transition: none; }
  .mega.is-open { display: grid; }
  .mega__feature { display: none; }
}
@media (max-width: 559px) {
  .header__cta { display: none; }
  .brand__logo { height: 26px; }
  .header__bar { height: 60px; padding-left: 18px; }
  :root { --header-h: 88px; }
}

/* ---- Breadcrumbs ---------------------------------------------------------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font: 500 .84rem/1.4 var(--label); color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.breadcrumbs a { color: inherit; }

/* ---- Media & image slots ------------------------------------------------- */
.media {
  position: relative; overflow: hidden; border-radius: var(--r-lg); isolation: isolate;
  background: radial-gradient(90% 70% at 80% 15%, rgba(254, 207, 42, .4), transparent 55%), linear-gradient(150deg, #4f657c, var(--navy));
}
.media img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder until a photo is added: a frosted print with a camera mark and the expected file name */
.media__ph { display: none; position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; font: 500 .74rem/1.3 var(--label); color: #fff;
  background: rgba(14, 28, 46, .42); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.media.is-missing img { visibility: hidden; }
.media.is-missing .media__ph { display: block; }
.media.is-missing::before { content: ""; position: absolute; z-index: 0; left: -20%; right: -20%; top: 42%; height: 24%; background: var(--spectrum); opacity: .42; filter: blur(26px); transform: rotate(-14deg); }
.media.is-missing::after {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 60px; height: 60px; translate: -50% -50%; border-radius: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l1.6-2.2h6.8L17 8h3v11H4z'/%3E%3Ccircle cx='12' cy='13.2' r='3.6'/%3E%3C/svg%3E") center / 28px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  border: 1px solid rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -10px rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ar-portrait { aspect-ratio: 4 / 5; }
.ar-wide { aspect-ratio: 3 / 2; }
.pos-payton img { object-position: 50% 20%; }
.pos-house img { object-position: 31% 50%; }
.pos-roofline img { object-position: 50% 8%; }
.pos-desks img { object-position: 50% 82%; }
/* A photo printed on a raised mount */
.mount { padding: 10px; border-radius: calc(var(--r-xl) + 10px); background: var(--porcelain); box-shadow: var(--raise-hi); }
.mount > .media { border-radius: var(--r-xl); }

/* Portrait with a soft spectrum glow and floating glass chips */
.portrait { position: relative; isolation: isolate; }
.portrait__glow {
  position: absolute; inset: 10% -4% -4% 10%; z-index: -1; border-radius: 40%;
  background: conic-gradient(from 210deg, var(--s1), var(--s2), var(--s3), var(--s4), var(--s5), var(--s6), var(--s1));
  filter: blur(56px); opacity: .5; animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.portrait .media { box-shadow: var(--raise-hi); border-radius: var(--r-xl); }
.chip {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 20px;
  background: rgba(255, 253, 248, .86); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #fff, 0 14px 30px -14px rgba(20, 32, 46, .35); color: var(--ink); line-height: 1.3;
}
.chip__text strong { display: block; font-size: .98rem; }
.chip__text span { display: block; font-size: .85rem; color: var(--ink-2); }
.portrait .chip { position: absolute; left: -24px; bottom: 28px; max-width: calc(100% - 24px); }
.portrait .chip--top { left: auto; right: -20px; bottom: auto; top: 28px; }
@media (max-width: 1100px) { .portrait .chip { left: 12px; } .portrait .chip--top { left: auto; right: 12px; } }
@media (max-width: 959px) { .portrait__glow { inset: 12% 0 0 12%; } }

/* ---- Home hero: the glass house -------------------------------------------- */
.hero-photo { padding-top: clamp(6px, 1.4vw, 20px); }
.hero-photo__frame {
  position: relative; height: clamp(560px, 80svh, 820px); border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  background: #20160e; container-type: size; color: #fff; box-shadow: var(--raise-hi);
}
.hero-photo__scene {
  --sw: max(128cqw, 177.78cqh);
  position: absolute; width: var(--sw); height: calc(var(--sw) * .5625); top: calc(50cqh - var(--sw) * .28125);
  left: clamp(calc(100cqw - var(--sw)), calc(var(--fx, .2) * 100cqw - var(--sw) * .4), 0px);
}
.hero-photo__kb { position: absolute; inset: 0; transform-origin: 40% 55%; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.12) translateX(-1.5%); } }
.hero-photo__kb img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo__rays {
  position: absolute; left: 41%; top: 52%; width: 150%; aspect-ratio: 1; translate: -50% -50%; mix-blend-mode: screen; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 214, 140, 0) 0deg, rgba(255, 220, 150, .3) 1.4deg, rgba(255, 214, 140, 0) 3.2deg 8deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 14%, transparent 42%), conic-gradient(from 40deg, transparent 0deg, #000 22deg, #000 88deg, transparent 112deg);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 14%, transparent 42%), conic-gradient(from 40deg, transparent 0deg, #000 22deg, #000 88deg, transparent 112deg);
  mask-composite: intersect;
  animation: rays 9s ease-in-out infinite alternate;
}
@keyframes rays { from { rotate: -4deg; opacity: .55; } to { rotate: 5deg; opacity: 1; } }
.hero-photo__glow {
  position: absolute; left: 41%; top: 52%; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 232, 170, .85) 0, rgba(255, 190, 90, .35) 30%, transparent 65%);
  animation: glow 5s ease-in-out infinite alternate;
}
@keyframes glow { from { opacity: .5; scale: .88; } to { opacity: 1; scale: 1.1; } }
.hero-photo__motes span {
  position: absolute; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle at 40% 40%, rgba(255, 236, 190, .55), rgba(255, 200, 120, .12) 60%, transparent 70%);
  animation: drift var(--t, 18s) ease-in-out infinite alternate; animation-delay: var(--d, 0s);
}
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 30px), var(--dy, -40px)); } }
.hero-photo__shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(18, 14, 10, 0) 30%, rgba(16, 18, 22, .55) 56%, rgba(14, 20, 28, .88) 100%),
              linear-gradient(0deg, rgba(14, 20, 28, .55), transparent 45%);
}
.hero-photo__content { position: absolute; z-index: 2; right: clamp(24px, 5vw, 72px); bottom: clamp(28px, 5.5vw, 76px); width: min(540px, calc(100% - 48px)); }
.hero-photo__content .t-lead { color: #ece7dd; margin-top: 1.2rem; }
@media (max-width: 1099px) {
  .hero-photo__frame { --fx: .5; height: clamp(600px, 86svh, 820px); }
  .hero-photo__scene { --sw: max(100cqw, 177.78cqh); top: calc(42cqh - var(--sw) * .28125); }
  .hero-photo__shade { background: linear-gradient(0deg, rgba(14, 20, 28, .95) 0%, rgba(14, 20, 28, .82) 38%, rgba(14, 20, 28, .25) 62%, rgba(14, 20, 28, 0) 78%); }
  .hero-photo__content { left: clamp(20px, 4vw, 40px); right: clamp(20px, 4vw, 40px); width: auto; max-width: 640px; bottom: clamp(24px, 4vw, 40px); }
}
.js .hero-in { opacity: 0; transform: translateY(20px); animation: rise .9s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---- Inner page hero ----------------------------------------------------- */
.svc-hero { padding-block: clamp(20px, 3vw, 40px) var(--section); }
.svc-hero .breadcrumbs { margin-bottom: clamp(24px, 3.5vw, 40px); }
@media (min-width: 960px) {
  .svc-hero__title { grid-column: 1 / 9; }
  .svc-hero__aside { grid-column: 9 / 13; align-self: end; }
}
.svc-hero__aside p:last-child { margin-bottom: 0; }
.svc-hero__aside .actions { margin-top: 1.4rem; }
.svc-hero__media { margin-top: clamp(36px, 5vw, 56px); aspect-ratio: 21 / 9; border-radius: var(--r-xl); box-shadow: var(--raise-hi); }
@media (max-width: 719px) { .svc-hero__media { aspect-ratio: 4 / 3; } }

/* ---- Illuminated statement ------------------------------------------------ */
/* words wait in a readable warm grey (3:1 at this size), then light up in their colour */
.is-split .word { color: #85796a; transition: color .35s ease; }
.is-split .word.on { color: inherit; }
.statement-foot { margin-top: clamp(28px, 4vw, 44px); max-width: 54ch; }
.statement-foot .actions { margin-top: 1rem; }
/* the PRISM house beside the home statement, its light fanning out to the edge of the page */
.statement-sec { overflow-x: clip; }
.statement-mark { display: none; color: var(--ink); }
@media (min-width: 960px) {
  .statement-sec .c-main { grid-column: 1 / 9; }
  .statement-sec .t-statement { font-size: clamp(1.9rem, 3.6vw, 3.45rem); }
  .statement-mark { display: block; grid-column: 9 / 13; align-self: center; margin-right: calc(var(--gutter) * -1); pointer-events: none; }
  .statement-mark__svg { display: block; width: 100%; height: auto; overflow: visible; }
}
.js .statement-mark__house { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .statement-mark__beams { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--ease-out) .5s; }
.js .statement-mark__spark { opacity: 0; transition: opacity .8s ease .5s; }
.js .statement-mark.is-visible .statement-mark__house { opacity: 1; transform: none; }
.js .statement-mark.is-visible .statement-mark__beams { transform: none; }
.js .statement-mark.is-visible .statement-mark__spark { opacity: 1; }
html[data-motion="reduce"] .statement-mark__house, html[data-motion="reduce"] .statement-mark__beams, html[data-motion="reduce"] .statement-mark__spark { opacity: 1; transform: none; transition: none; }

/* ---- Tagline: the glass house under an arch, light fanning out behind it ------ */
.tagline { display: grid; justify-items: center; text-align: center; }
.tagline__art { position: relative; display: grid; place-items: center; width: 100%; margin-bottom: clamp(32px, 4vw, 48px); isolation: isolate; }
.tagline__rays { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1700px, 160vw); aspect-ratio: 2.2; translate: -50% -50%;
  background: conic-gradient(from 225deg at 50% 50%, transparent 0deg, rgba(254, 207, 42, .55) 18deg, transparent 30deg, rgba(254, 166, 30, .5) 44deg, transparent 58deg, rgba(254, 144, 19, .4) 72deg, transparent 86deg,
              transparent 180deg, rgba(58, 111, 156, .38) 198deg, transparent 212deg, rgba(254, 166, 30, .45) 226deg, transparent 240deg, rgba(254, 207, 42, .5) 254deg, transparent 268deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 100%); mask: radial-gradient(closest-side, #000 18%, transparent 100%); filter: blur(6px); opacity: .9; transition: transform 1.4s var(--ease-out), opacity 1.4s; }
.tagline__film { position: relative; margin: 0; width: min(100%, 1080px); padding: clamp(6px, 1vw, 12px); border-radius: calc(var(--r-xl) + 10px); background: var(--porcelain); box-shadow: var(--raise-hi); }
.tagline__film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-xl); background: #2a2118; }
.film-toggle { position: absolute; right: clamp(16px, 2.2vw, 30px); bottom: clamp(16px, 2.2vw, 30px); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); cursor: pointer;
  color: #fff; background: rgba(14, 28, 46, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s; }
.film-toggle:hover { background: rgba(14, 28, 46, .75); }
.film-toggle .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.film-toggle__play { display: none; fill: currentColor; }
.film-toggle.is-paused .film-toggle__play { display: block; }
.film-toggle.is-paused .film-toggle__pause { display: none; }
.tagline__text { max-width: none; font-size: clamp(1.9rem, 4vw, 3.6rem); font-weight: 300; line-height: 1.12; letter-spacing: -.035em; text-wrap: pretty; }
.tagline__text em { display: block; margin-top: .08em; font-size: 1.12em; font-style: normal; font-weight: 600; letter-spacing: -.04em; background: linear-gradient(90deg, var(--orange-ink), #a14e06 45%, #a14e06); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.tagline__sub { max-width: 46ch; margin: clamp(18px, 2vw, 26px) 0 0; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink-2); }
html.js .tagline__art:not(.is-visible) .tagline__rays { transform: scale(.6); opacity: 0; }
html[data-contrast="high"] .tagline__text em { color: var(--ink); background: none; }
.facil-note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font: 500 .95rem/1.5 var(--label); color: var(--muted); }

/* ---- Service explorer (home) --------------------------------------------- */
.explorer { display: grid; gap: var(--gap); }
@media (min-width: 960px) { .explorer { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; } }
.explorer__list { display: grid; gap: 12px; align-content: start; }
.explorer__opt {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; border-radius: 20px;
  text-align: left; cursor: pointer; color: var(--ink); border: 1px solid rgba(20, 32, 46, .1);
  background: var(--porcelain); box-shadow: var(--key);
  transition: box-shadow .3s, transform .3s var(--ease), background .3s;
}
.explorer__opt::after { content: ""; position: absolute; left: -1px; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: rgba(20, 32, 46, .1); transition: background .3s, box-shadow .3s; }
.explorer__opt:hover { transform: translateX(3px); box-shadow: var(--key-hover); }
.explorer__opt[aria-selected="true"] { background: #fff; box-shadow: var(--key-hover); transform: translateX(6px); }
.explorer__opt[aria-selected="true"]::after { background: var(--ink); }
.explorer__txt { display: grid; gap: 2px; }
.explorer__txt strong { font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -.015em; line-height: 1.2; }
.explorer__txt .meta { font: 300 1.5rem/1 var(--label); letter-spacing: -.02em; color: var(--orange-ink); margin-bottom: 4px; }
.explorer__chev { opacity: .35; transition: opacity .3s, transform .3s var(--ease); }
.explorer__opt[aria-selected="true"] .explorer__chev { opacity: 1; transform: translateX(3px); }
.explorer__stage { position: relative; display: grid; min-height: 480px; border-radius: var(--r-xl); background: var(--perf), var(--well-bg); box-shadow: var(--well); overflow: hidden; isolation: isolate; }
.explorer__panel { position: relative; display: grid; grid-template-rows: 1fr auto; }
.explorer__panel[hidden] { display: none; }
.explorer__panel.is-entering .mock { animation: mockIn .7s var(--ease-out) both; }
.explorer__panel.is-entering .mock--float { animation-delay: .12s; }
@keyframes mockIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.explorer__visual { position: relative; padding: 28px; display: grid; place-items: center; }
.explorer__visual::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%); filter: blur(20px); z-index: -1; }
.explorer__copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px 24px; background: rgba(255, 253, 248, .75); border-top: 1px solid rgba(255, 255, 255, .8); backdrop-filter: blur(8px); }
.explorer__copy p { margin: 0; max-width: 40ch; color: var(--ink-2); }
@media (max-width: 959px) { .explorer__stage { min-height: 0; } }
/* each service has its own vivid colour: the chosen option fills with it, and the stage glows in it */
.services-sec { overflow: hidden; isolation: isolate; }
.services-sec::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 8% 70%, rgba(254, 144, 19, .16), transparent 70%), radial-gradient(40% 55% at 95% 30%, rgba(58, 111, 156, .16), transparent 70%), radial-gradient(30% 40% at 60% 100%, rgba(58, 111, 156, .14), transparent 70%); }
.explorer__opt::after { background: var(--tone-b, rgba(20, 32, 46, .1)); }
.explorer__opt .explorer__txt .meta { color: var(--num, var(--orange-ink)); font-weight: 400; }
.explorer__side { display: grid; gap: 14px; align-content: start; }
/* the chosen option's colour fades in rather than snapping */
.explorer__opt { color: var(--ink); transition: transform .3s var(--ease), box-shadow .4s, color .4s; }
.explorer__opt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .55s var(--ease-out);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(120deg, var(--tone-a), var(--tone-b)); }
.explorer__opt > :not(.explorer__progress) { position: relative; z-index: 1; }
.explorer__opt[aria-selected="true"] { color: var(--on, #fff); border-color: transparent; transform: translateX(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 34px -16px var(--tone-a), 0 4px 10px -4px rgba(20, 32, 46, .25); }
.explorer__opt[aria-selected="true"]::before { opacity: 1; }
.explorer__opt[aria-selected="true"]::after { background: color-mix(in srgb, var(--on, #fff) 55%, transparent); }
.explorer__opt[aria-selected="true"] .explorer__txt .meta { color: var(--on, #fff); opacity: .85; }
.explorer__opt[aria-selected="true"] .explorer__chev { color: var(--on, #fff); }
/* the tour: a bar fills along the bottom of the chosen option, then the next one takes over */
.explorer__progress { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 9px; height: 3px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--on, #fff) 28%, transparent); opacity: 0; transition: opacity .3s; }
.explorer__progress::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--on, #fff); transform-origin: left; transform: scaleX(0); }
.explorer.is-touring .explorer__opt[aria-selected="true"] .explorer__progress { opacity: 1; }
.explorer.is-touring .explorer__opt[aria-selected="true"] .explorer__progress::after { animation: tourFill var(--dwell, 6s) linear forwards; }
.explorer.is-held .explorer__opt[aria-selected="true"] .explorer__progress::after { animation-play-state: paused; }
@keyframes tourFill { to { transform: scaleX(1); } }
/* the stage blends from one service colour to the next */
@property --glow-a { syntax: "<color>"; inherits: true; initial-value: #a9c9e8; }
@property --glow-b { syntax: "<color>"; inherits: true; initial-value: #2f5f8c; }
.explorer__stage { --glow-a: #a9c9e8; --glow-b: #2f5f8c; box-shadow: var(--raise-hi); transition: --glow-a .8s var(--ease-out), --glow-b .8s var(--ease-out);
  background: radial-gradient(14px 14px at 7px 7px, rgba(255, 255, 255, .22) 1.2px, transparent 1.8px) 0 0 / 18px 18px,
  radial-gradient(90% 80% at 20% 15%, rgba(255, 255, 255, .38), transparent 60%), linear-gradient(140deg, var(--glow-a), var(--glow-b)); }
.explorer__panel { background: none; }
.explorer__panel.is-entering .explorer__copy p { animation: panelIn .5s var(--ease-out) both; }
.explorer__visual::before { background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 65%); }
.explorer__copy { background: rgba(255, 253, 248, .9); }
html[data-contrast="high"] .explorer__opt[aria-selected="true"]::before { background: #000; }

/* UI mock-ups used as illustrations */
.mock { position: relative; width: min(100%, 380px); border-radius: 18px; padding: 18px; background: linear-gradient(180deg, #fff, #fbf8f2); border: 1px solid rgba(20, 32, 46, .09); box-shadow: var(--raise-hi); font-size: .9rem; color: var(--ink); }
.mock:not(.mock--float) { padding-top: 40px; }
.mock:not(.mock--float)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; border-radius: 18px 18px 0 0; border-bottom: 1px solid rgba(20, 32, 46, .07);
  background: radial-gradient(circle, #fe9013 3.5px, transparent 4px) 14px 50% / 14px 14px no-repeat, radial-gradient(circle, #fecf2a 3.5px, transparent 4px) 30px 50% / 14px 14px no-repeat,
              radial-gradient(circle, #3a6f9c 3.5px, transparent 4px) 46px 50% / 14px 14px no-repeat, linear-gradient(180deg, #f7f3ec, #efe9de);
}
.mock--float { position: absolute; width: auto; max-width: 230px; padding: 12px 14px; right: 6%; bottom: 10%; border-radius: 16px; }
.mock--float.left { right: auto; left: 6%; bottom: auto; top: 10%; }
.mock__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; margin-bottom: 12px; }
.mock__head strong, .mock__pill { white-space: nowrap; }
.mock__head strong { font-size: 1rem; }
.mock__pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 600 .74rem/1.4 var(--label); background: var(--well-bg); box-shadow: var(--well); }
.mock__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.mock__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.mock__ring { --p: .72; width: 76px; height: 76px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 360deg), #e6dfd0 0); box-shadow: inset 0 1px 2px rgba(20, 32, 46, .2); }
.mock__ring span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--porcelain); box-shadow: 0 2px 4px rgba(20, 32, 46, .15); font: 800 1rem/1 var(--font); }
.mock__bar { height: 10px; border-radius: 999px; background: #e6dfd0; box-shadow: inset 0 1px 2px rgba(20, 32, 46, .18); overflow: hidden; }
.mock__bar i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: var(--spectrum); }
.mock__big { font: 800 2.4rem/1 var(--font); letter-spacing: -.03em; }

/* ---- Sector picker and other tab-driven pickers ------------------------------ */
.picker { display: grid; gap: var(--gap); align-items: start; }
.picker__keys { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.picker__panel[hidden] { display: none; }
.picker__panel.is-entering { animation: panelIn .45s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } }
.picker__panel .card { display: grid; gap: 14px; }
.picker__panel h3 { font-size: var(--t-panel); letter-spacing: -.025em; }
.picker__panel p { margin: 0; color: var(--ink-2); }
.picker__start { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.picker__start .meta { width: 100%; color: var(--muted); }
.picker__panel .picker__label { margin: 20px 0 6px; color: var(--muted); }
/* home sectors in the logo's light: yellow into orange */
.sectors-sec { overflow: hidden; isolation: isolate; }
.sectors-sec::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(45% 45% at 92% 18%, rgba(254, 207, 42, .22), transparent 70%), radial-gradient(40% 45% at 6% 85%, rgba(254, 144, 19, .16), transparent 70%); }
.sectors-sec .picker__keys .key { transition: box-shadow .25s, transform .25s, background .35s, color .35s; }
.sectors-sec .picker__keys .key:hover { background: linear-gradient(120deg, #fff8e1, #ffeccc); }
.sectors-sec .picker__keys .key[aria-selected="true"] { color: var(--ink); border-color: transparent;
  background: radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, .35), transparent 55%), linear-gradient(120deg, #fecf2a, #fea61e 55%, #fe9013);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 26px -14px #c46a06, 0 3px 8px -3px rgba(20, 32, 46, .2); }
.sectors-sec .picker__panel .card { border-top: 4px solid transparent; background: var(--porcelain) padding-box, linear-gradient(90deg, #fecf2a, #fe9013) border-box; }
.sectors-sec .picker__panel .card::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -170px; top: -190px; border-radius: 50%; background: radial-gradient(circle, rgba(254, 166, 30, .26), transparent 70%); }
.sectors-sec .picker__panel .card { overflow: hidden; isolation: isolate; }
.sectors-sec .scene-stage { background: radial-gradient(110% 80% at 50% 8%, #fffaf0 0, rgba(255, 250, 240, 0) 60%), linear-gradient(180deg, #fff1d1, #fddcab); }
.sectors-sec .checks--detail .tick { --accent: #fea61e; color: var(--ink); }
.sectors-sec .picker__label { color: #a14e06; font-weight: 600; }
html[data-contrast="high"] .sectors-sec .picker__keys .key[aria-selected="true"] { background: #000; color: #fff; }
@media (min-width: 840px) {
  .picker__keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .picker__keys .key { justify-content: center; text-align: center; }
  .picker__panel .card { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: 1fr auto auto auto auto auto 1fr; gap: 0 clamp(28px, 4vw, 56px); padding: clamp(14px, 1.4vw, 18px); padding-right: clamp(24px, 3vw, 44px); }
  .picker__panel .scene-stage { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .picker__panel .card > :not(.scene-stage) { grid-column: 2; }
  .picker__panel h3 { grid-row: 2; margin-bottom: 10px; }
  .picker__panel .card > p:not(.meta) { grid-row: 3; }
  .picker__panel .picker__label { grid-row: 4; }
  .picker__panel .checks { grid-row: 5; }
  .picker__panel .picker__start { grid-row: 6; margin-top: 18px; }
}

/* ---- Audits: dimension keys ------------------------------------------------ */
.dims { display: grid; gap: var(--gap); }
.dims__keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .dims__keys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dims__keys { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dkey {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 108px; padding: 16px; border-radius: 20px; cursor: pointer; text-align: left;
  position: relative; color: var(--ink); background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .1); box-shadow: var(--key);
  font: 700 1.02rem/1.25 var(--font); transition: transform .3s var(--ease), box-shadow .3s, background .3s;
}
.dkey:hover { transform: translateY(-1px); box-shadow: var(--key-hover); }
.dkey[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--selected); transform: none; }
.dkey .ic { width: 26px; height: 26px; stroke-width: 1.6; color: var(--ink-2); }
.dkey[aria-selected="true"] .ic { color: var(--yellow); }
.dims__panel[hidden] { display: none; }
.dims__panel.is-entering { animation: panelIn .45s var(--ease-out); }
.dims__panel .card { overflow: hidden; isolation: isolate; }
.dims__panel .card::before { content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; right: -130px; top: -150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%); }
.panel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.panel-head h3 { font-size: var(--t-panel); letter-spacing: -.025em; }
.asks { margin-top: 1.2rem; counter-reset: q; }
.asks .meta { color: var(--muted); margin-bottom: 4px; }
.asks li { counter-increment: q; display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule); }
.asks li::before { content: counter(q, decimal-leading-zero); font: 300 1.55rem/1 var(--label); letter-spacing: -.02em; color: var(--orange-ink); }
.dims__panel .panel-head { margin-bottom: 12px; }
/* each dimension in its logo colour: a bar on its key, the chosen key filled, the scene on a bright backdrop */
.dkey::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--accent); transition: opacity .3s; }
.dkey .ic { color: color-mix(in srgb, var(--accent) 72%, #14202e); }
.dkey[aria-selected="true"] { color: var(--on, var(--ink)); border-color: transparent;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .4), transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 26px -14px color-mix(in srgb, var(--accent) 80%, #000), 0 3px 8px -3px rgba(20, 32, 46, .2); }
.dkey[aria-selected="true"] .ic { color: var(--on, var(--ink)); }
.dkey[aria-selected="true"]::after { opacity: 0; }
html[data-contrast="high"] .dkey[aria-selected="true"] { background: #000; color: #fff; }
html[data-contrast="high"] .dkey[aria-selected="true"] .ic { color: #fff; }
.dims__panel .card { border-top: 5px solid transparent; background: var(--porcelain) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent)) border-box; }
.dims__panel .scene-stage { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -10px 24px -12px rgba(20, 32, 46, .25);
  background: radial-gradient(14px 14px at 7px 7px, rgba(255, 255, 255, .24) 1.2px, transparent 1.8px) 0 0 / 18px 18px,
  radial-gradient(90% 70% at 50% 8%, rgba(255, 255, 255, .5), transparent 62%), linear-gradient(150deg, color-mix(in srgb, var(--accent) 38%, #fff), var(--accent)); }
.dims__panel .asks li::before { color: var(--num, var(--orange-ink)); font-weight: 400; }
.dims__panel .asks .meta { color: var(--num, var(--orange-ink)); font-weight: 600; }
.dims__panel .scene-stage { margin: 0 0 22px; }
@media (min-width: 900px) {
  .dims__panel .card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(28px, 4vw, 56px); padding: clamp(14px, 1.4vw, 18px); padding-right: clamp(24px, 3vw, 44px); }
  .dims__panel .scene-stage { grid-column: 1; grid-row: 1 / -1; margin: 0; aspect-ratio: 4 / 3; }
  .dims__panel .card > :not(.scene-stage) { grid-column: 2; }
  .dims__panel .panel-head { grid-row: 2; }
  .dims__panel .card > p { grid-row: 3; margin: 0; }
  .dims__panel .asks { grid-row: 4; }
}

/* ---- Audits: what changes (Payton's note, then before and with PRISM) ------- */
.change { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 960px) {
  .change { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); }
  .change__note { position: sticky; top: calc(var(--header-h) + 24px); }
}
.change__note { margin: 0; padding: 0; overflow: hidden; }
.change__photo { aspect-ratio: 16 / 11; overflow: hidden; }
.change__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.change__note blockquote { margin: 0; padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px) 0; }
.change__note blockquote p { margin: 0; font-size: clamp(1.1rem, 1.45vw, 1.24rem); line-height: 1.6; color: var(--ink); text-indent: -.42em; }
.change__note blockquote p::before { content: "\201C"; color: var(--orange-ink); }
.change__note blockquote p::after { content: "\201D"; color: var(--orange-ink); }
.change__note figcaption { display: grid; gap: 2px; padding: 18px clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px); }
.change__note figcaption strong { font: 600 1.05rem/1.3 var(--display); }
.change__note figcaption .meta { color: var(--muted); }
.change__view { margin: 0 0 8px; padding: 0; border: 0; min-inline-size: 0; }
.change__list { list-style: none; margin: 0; padding: 0; }
.change__list li { position: relative; display: grid; grid-template-columns: 3.8rem 1fr; padding: 22px 0 22px 18px; border-bottom: 1px solid var(--rule); }
.change__list li::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: var(--rule); }
.change__list li::after { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--s1), var(--s2) 50%, var(--s3)); transform-origin: top; transition: transform .5s var(--ease-out) calc(var(--i) * 90ms); }
.change__n { font: 300 2rem/1 var(--label); letter-spacing: -.03em; color: var(--orange-ink); transition: color .45s var(--ease) calc(var(--i) * 90ms); }
.change__list h3 { font-size: var(--t-card); margin-bottom: 6px; }
.change__txt { display: grid; }
.change__txt p { grid-area: 1 / 1; margin: 0; transition: opacity .45s var(--ease-out) calc(var(--i) * 90ms), transform .45s var(--ease-out) calc(var(--i) * 90ms), visibility 0s calc(var(--i) * 90ms); }
.change__b { color: var(--muted); }
.change__a { color: var(--ink-2); }
.change__list[data-state="after"] .change__b, .change__list[data-state="before"] .change__a {
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .3s var(--ease) calc(var(--i) * 90ms), transform .3s var(--ease) calc(var(--i) * 90ms), visibility 0s calc(var(--i) * 90ms + .3s);
}
.change__list[data-state="before"] .change__n { color: var(--muted); }
.change__list[data-state="before"] li::after { transform: scaleY(0); }

/* ---- Audits: interactive room ---------------------------------------------- */
.room { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 960px) { .room { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.room__scene { position: relative; }
.room__scene svg { width: 100%; height: auto; }
.hotspot {
  position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: linear-gradient(180deg, #fff, #eee7db);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(20, 32, 46, .14), 0 0 0 3px var(--accent), 0 0 0 4px rgba(20, 32, 46, .18), 0 10px 18px -6px rgba(20, 32, 46, .55);
  transition: transform .3s var(--ease), background .3s;
}
.hotspot::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: ping 2.4s ease-out infinite; }
.hotspot::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; font: 800 .9rem/1 var(--font); color: var(--ink); }
.hotspot:hover, .hotspot[aria-pressed="true"] { transform: scale(1.12); }
.hotspot[aria-pressed="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 45%, #fff), var(--accent)); }
.hotspot[aria-pressed="true"]::before { animation: none; opacity: 1; inset: -7px; }
@keyframes ping { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.room__card { display: grid; gap: 16px; }
.room__card .meta { color: var(--muted); margin: 0; }
.room__card h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.qa { padding: 16px 18px; border-radius: 16px; }
.qa p { margin: 6px 0 0; }
.qa--check { background: var(--well-bg); box-shadow: var(--well); color: var(--ink-2); }
.qa--prism { background: linear-gradient(180deg, #fff5d6, #ffeab0); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(200, 140, 0, .25), 0 10px 20px -12px rgba(200, 140, 0, .5); }
.qa--prism p { font-weight: 700; font-size: 1.08rem; color: var(--ink); line-height: 1.4; }
.qa__tag { font: 600 .78rem/1 var(--label); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); }
.room__nav { display: flex; gap: 8px; }
.room__more { grid-column: 1 / -1; }
.room__more summary { cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* ---- Seals (standards) --------------------------------------------------- */
.seals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 18px 14px; }
.seal { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.seal__disc {
  position: relative; width: 112px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; padding: 14px;
  background: radial-gradient(circle at 35% 28%, #fffef9 0, #f3ece0 45%, #ddd2bf 100%);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .9), inset 0 -3px 6px rgba(20, 32, 46, .12), 0 12px 22px -10px rgba(20, 32, 46, .35), 0 0 0 6px var(--accent), 0 0 0 7px color-mix(in srgb, var(--accent) 70%, #14202e);
  font: 800 1.05rem/1.05 var(--font); letter-spacing: -.01em; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .5s var(--ease-out);
}

.seal__cap { font-size: .8rem; color: var(--muted); }

/* ---- The RHFAC seal (Rick Hansen Foundation's mark): cropped square, shown as a clean circle ---- */
.rhfac-seal { display: block; aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(20, 32, 46, .45); }
.rhfac-badge { display: block; width: clamp(76px, 7vw, 96px); height: clamp(76px, 7vw, 96px); margin-bottom: 20px; }
.cred__seal { position: absolute; right: 18px; top: 50%; translate: 0 -50%; width: 54px; height: 54px; }
.cred:has(.cred__seal) { padding-right: 86px; }
.seal__disc--logo { padding: 7px; background: radial-gradient(circle at 35% 28%, #6f9cc6 0, #3a6f9c 55%, #2f5f8c 100%); }   /* the RHFAC seal is blue all the way out */
.seal__disc--logo .seal__orb { width: 100%; height: 100%; }
.article__seal { display: block; width: 80px; height: 80px; margin-bottom: 18px; }
.seal__btn { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 16px; background: none; color: inherit; font: inherit; cursor: pointer; }
.seal__btn .seal__disc { transition: transform .4s var(--ease-out), box-shadow .3s; }
.seal__btn:hover .seal__disc { transform: translateY(-3px); }
.seal__btn[aria-pressed="true"] .seal__disc { box-shadow: inset 0 2px 1px rgba(255, 255, 255, .9), inset 0 -3px 6px rgba(20, 32, 46, .12), 0 12px 22px -10px rgba(20, 32, 46, .35), 0 0 0 6px var(--accent), 0 0 0 10px var(--ink); }
.seal__btn[aria-pressed="true"] .seal__cap { color: var(--ink); font-weight: 700; }
.seal-note { margin-top: 24px; }
/* Audits evidence: the standards on the left, the explanation beside them */
.evidence { display: grid; gap: var(--gap); }
@media (min-width: 960px) {
  .evidence { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: center; }
  .evidence .seals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .evidence .seal-note { margin-top: 0; }
}
.evidence .seal-note { padding: clamp(24px, 2.6vw, 36px); }
.evidence .seal-note .meta { font-size: .95rem; font-weight: 600; margin-bottom: 10px; }
.evidence .seal-note [data-seal-what] { font: 600 clamp(1.15rem, 1.5vw, 1.35rem)/1.4 var(--display); letter-spacing: -.015em; color: var(--ink); margin-bottom: 14px; }
.evidence .seal-note__use { font-size: 1.02rem; line-height: 1.6; }
.seal-note .meta { margin: 0 0 6px; color: var(--orange-ink); }
.seal-note p { margin: 0 0 10px; }
.seal-note__use { color: var(--ink-2); margin-bottom: 0 !important; }
.seal-note.is-entering { animation: panelIn .4s var(--ease-out); }
.room__card.is-entering .qa { animation: panelIn .45s var(--ease-out) both; }
.room__card.is-entering .qa--prism { animation-delay: .08s; }

/* ---- Sites by sector (audits) --------------------------------------------- */
.sites { display: grid; padding-block: 8px; }
.sites li { display: grid; gap: 8px 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--rule); }
.sites li:first-child { border-top: 0; }
.sites h3 { font-size: var(--t-item); letter-spacing: -.01em; }
.sites__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pill .ic { width: 14px; height: 14px; stroke-width: 2.4; flex: none; }
.formats-all { justify-content: center; margin-top: clamp(28px, 4vw, 40px); }

/* ---- Ledger, quotes, tags -------------------------------------------------- */
.ledger { border-top: 1px solid var(--rule-2); }
.ledger > div { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 560px) { .ledger > div { grid-template-columns: 9rem 1fr; } }
.ledger dt { font: 500 .84rem/1.6 var(--label); color: var(--muted); padding-top: .1em; }
.ledger dd { font-weight: 500; }
.pull { margin: 1.6rem 0; padding-left: 22px; border-left: 3px solid var(--accent); }
/* ---- MLI value: big figures that make the case at a glance ---------------------- */
.value-sec { overflow: hidden; isolation: isolate; padding-top: clamp(16px, 2.5vw, 40px); }
.value-sec::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(45% 55% at 22% 50%, rgba(254, 144, 19, .16), transparent 70%), radial-gradient(40% 50% at 80% 30%, rgba(58, 111, 156, .14), transparent 70%); }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 1.6rem 0 0; }
.stat { display: grid; align-content: start; gap: 6px; padding: 16px 16px 18px; border-radius: 20px; background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .07); box-shadow: var(--raise); }
.stat b { font: 500 clamp(2rem, 3.4vw, 2.9rem)/1 var(--label); letter-spacing: -.04em; background: linear-gradient(100deg, #d96a00, #d96a00); -webkit-background-clip: text; background-clip: text; color: transparent; justify-self: start; padding-bottom: .04em; }
.stat span { font-size: .9rem; line-height: 1.4; color: var(--ink-2); }
html[data-contrast="high"] .stat b { background: none; color: var(--ink); }
@media (max-width: 479px) { .stat-row { grid-template-columns: 1fr; } .stat { grid-template-columns: 6.2rem 1fr; align-items: center; column-gap: 10px; } }
.pull p { font-size: clamp(1.12rem, 1.6vw, 1.35rem); line-height: 1.4; font-weight: 500; font-style: italic; margin: 0; }
.bigquote blockquote { margin: 0; }
.bigquote p { font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; margin: 0; text-indent: -.42em; }
.bigquote p::before { content: "\201C"; color: var(--accent); }
.bigquote p::after { content: "\201D"; color: var(--accent); }
.bigquote figcaption { margin-top: 1.6rem; font: 500 .9rem/1.5 var(--label); color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border-radius: 999px; font: 600 .8rem/1.2 var(--label); color: var(--ink); background: var(--well-bg); box-shadow: var(--well); text-decoration: none; }
a.pill:hover { background: #fff; }
.checks { display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.checks .tick { width: 22px; height: 22px; margin-top: 2px; display: grid; place-items: center; color: var(--orange-ink); }
.checks .tick .ic { width: 17px; height: 17px; stroke-width: 2.4; }

/* ---- Feature cards (trust) ---------------------------------------------------- */
.feature { display: flex; flex-direction: column; gap: 12px; overflow: hidden; isolation: isolate; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.feature::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(110% 70% at 100% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%); }
.feature:hover { transform: translateY(-3px); box-shadow: var(--raise-hi); }
.feature .orb { margin-bottom: 10px; }
.feature h3 { font-size: var(--t-card); letter-spacing: -.02em; }
@media (min-width: 720px) { .grid4 .feature h3 { min-height: 2.44em; } }   /* one- and two-line titles keep the text below them level */
.feature p { margin: 0; color: var(--ink-2); }
.feature .stamp { position: absolute; top: 20px; right: 24px; font: 300 2.6rem/1 var(--label); letter-spacing: -.03em; color: var(--orange-ink); }

/* ---- Scene stages: every small illustration sits on the same soft backdrop ---------- */
.scene-stage { display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 0 0 18px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(110% 80% at 50% 10%, #fffdf9 0, rgba(255, 253, 249, 0) 62%), linear-gradient(180deg, #f5f0e6, #ebe3d4); box-shadow: inset 0 1px 3px rgba(20, 32, 46, .08); }
.scene-stage img { width: 100%; height: 100%; object-fit: contain; }
.aud .scene-stage { margin: -6px -6px 14px; }

/* ---- Rails (horizontal scrollers) -------------------------------------------- */
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.rail-ctrl { display: flex; gap: 8px; flex: none; }
.rail-ctrl button {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer; color: var(--fg); display: grid; place-items: center;
  background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .12); box-shadow: var(--key); transition: transform .2s, box-shadow .2s;
}
.rail-ctrl button:hover:not(:disabled) { transform: translateY(-1px); }
.rail-ctrl button:active:not(:disabled) { box-shadow: var(--press); transform: translateY(1px); }
.rail-ctrl button:disabled { opacity: .4; cursor: default; }
.rail-ctrl .ic { width: 20px; height: 20px; }
html:not(.js) .rail-ctrl { display: none; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 3 * var(--gap)) / 3.6));
  gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; padding: 8px 4px 28px; margin-top: 28px;
  scrollbar-width: thin; scrollbar-color: var(--ink-2) transparent; overscroll-behavior-x: contain;
}
.rail > li { scroll-snap-align: start; display: flex; }
/* Audience card */
.aud { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.aud h3 { font-size: var(--t-card); letter-spacing: -.02em; }
.aud p { margin: 0; color: var(--ink-2); }
.aud__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
/* Education audiences: each card in its own colour, with a point and what people leave with */
.aud--vivid { overflow: hidden; isolation: isolate; border-top: 5px solid transparent; gap: 10px;
  background: var(--porcelain) padding-box, linear-gradient(90deg, var(--glow-a), var(--glow-b)) border-box; }
.aud--vivid::after { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; right: -140px; bottom: -170px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow-b) 22%, transparent), transparent 70%); }
.aud--vivid .scene-stage { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -10px 24px -12px rgba(20, 32, 46, .25);
  background: radial-gradient(14px 14px at 7px 7px, rgba(255, 255, 255, .24) 1.2px, transparent 1.8px) 0 0 / 18px 18px,
  radial-gradient(90% 70% at 50% 8%, rgba(255, 255, 255, .5), transparent 62%), linear-gradient(150deg, var(--glow-a), var(--glow-b)); }
.aud__point { margin: 0; font: 600 1.14rem/1.35 var(--display); letter-spacing: -.015em; color: var(--tone); }
.aud__label { margin: 6px 0 0; color: var(--muted); }
.aud__gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aud__gets li { position: relative; padding-left: 22px; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.aud__gets li::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--glow-a), var(--glow-b)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow-b) 18%, transparent); }
.aud--vivid .pill { background: color-mix(in srgb, var(--glow-b) 16%, var(--porcelain)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glow-b) 32%, transparent); }
/* Audits sectors: each card in its own brand colour (orange, blue, pink, amber, repeating) */
/* sectors: bold colour blocks running dark blue → yellow, no pictures (the home page already shows the buildings) */
.sector-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 960px) { .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.sector-grid > li { display: flex; }
#sectors > li:nth-child(1) .aud { --fill-a: #2f5f8c; --fill-b: #234d76; --on: #fff; }
#sectors > li:nth-child(2) .aud { --fill-a: #4677a3; --fill-b: #2f5f8c; --on: #fff; }
#sectors > li:nth-child(3) .aud { --fill-a: #ff9d2e; --fill-b: #f08000; --on: #14202e; }
#sectors > li:nth-child(4) .aud { --fill-a: #ffb84a; --fill-b: #fea61e; --on: #14202e; }
#sectors > li:nth-child(n+5) .aud { --fill-a: #ffdc5c; --fill-b: #fec42a; --on: #14202e; }
#sectors .aud { overflow: hidden; isolation: isolate; min-height: 196px; justify-content: space-between; gap: 26px; border: 0; color: var(--on);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .24), transparent 55%), linear-gradient(135deg, var(--fill-a), var(--fill-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 34px -18px var(--fill-b), 0 4px 10px -4px rgba(20, 32, 46, .2); }
#sectors .aud h3 { color: var(--on); font: 600 clamp(1.45rem, 2.1vw, 1.8rem)/1.15 var(--display); letter-spacing: -.02em; max-width: 11em; }
#sectors .aud .aud__meta { display: flex; flex-wrap: wrap; gap: 6px; }
#sectors .aud .pill { color: var(--on); background: color-mix(in srgb, #fff 24%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 40%, transparent); }
@media (max-width: 719px) { #sectors .aud { min-height: 0; gap: 18px; } }
#sectors .aud__mark { position: absolute; z-index: -1; right: -16px; bottom: -20px; width: 140px; height: 140px; stroke-width: 1; color: var(--on); opacity: .16; }
html[data-contrast="high"] #sectors .aud { background: #fff; color: #000; border: 2px solid #000; }
html[data-contrast="high"] #sectors .aud h3, html[data-contrast="high"] #sectors .aud .pill { color: #000; }

/* ---- Closing call to action: the logo forming -------------------------------- */
.closing { position: relative; padding-block: clamp(140px, 15vw, 196px) clamp(72px, 9vw, 112px); overflow: hidden; }
.closing__art { position: absolute; top: clamp(28px, 4vw, 52px); left: 0; width: 100%; height: clamp(96px, 9vw, 128px); color: var(--ink); }
.js .closing__art .ray { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.4s var(--ease-out); }
.js .closing__art .outline { stroke-dasharray: 2600; stroke-dashoffset: 2600; transition: stroke-dashoffset 1.6s var(--ease-out) .7s; }
.js .closing__art .roof { opacity: 0; transition: opacity .8s ease 1.4s; }
.js .closing__art .band { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1s var(--ease-out); }
.js .closing__art .band-1 { transition-delay: 1.6s; }
.js .closing__art .band-2 { transition-delay: 1.72s; }
.js .closing__art .band-3 { transition-delay: 1.84s; }
.js .closing__art.is-visible .ray, .js .closing__art.is-visible .outline { stroke-dashoffset: 0; }
.js .closing__art.is-visible .roof { opacity: 1; }
.js .closing__art.is-visible .band { transform: none; }
@media (min-width: 960px) {
  .closing__title { grid-column: 1 / 9; }
  .closing__aside { grid-column: 9 / 13; align-self: end; }
}
.closing__aside p { color: var(--muted); }
.closing__aside .meta { margin: 1.2rem 0 0; }

/* ---- Process flow: a recessed track with glossy stations ---------------------- */
.flow { --progress: 0; position: relative; display: grid; gap: 32px; }
.flow__item { position: relative; padding-left: 84px; min-height: 60px; }
.flow__badge {
  position: absolute; left: 0; top: -4px; z-index: 1; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--muted);
  background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .1); box-shadow: var(--key);
  transition: background .5s, color .5s, transform .6s var(--ease-out), box-shadow .6s;
}
.flow__badge .ic { width: 24px; height: 24px; stroke-dasharray: 100; stroke-dashoffset: 0; position: relative; z-index: 1; }
.flow__item.is-lit .flow__badge {
  color: var(--ink); transform: scale(1.04); border-color: color-mix(in srgb, var(--accent) 70%, #fff);
  background: radial-gradient(circle at 50% 40%, #fff 0, color-mix(in srgb, var(--accent) 18%, #fffdf8) 60%, color-mix(in srgb, var(--accent) 34%, #f4eee3) 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 22px -4px var(--accent), 0 6px 12px -6px rgba(20, 32, 46, .3);
}
.flow__item.is-lit .flow__badge .ic { animation: drawIcon 1s var(--ease-out) both; }
@keyframes drawIcon { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.flow__item .meta { display: block; font: 300 1.45rem/1.1 var(--label); letter-spacing: -.02em; color: var(--orange-ink); margin-bottom: 6px; }
.flow__item h3 { font-size: var(--t-card); margin-bottom: .3em; }
.flow__item p { color: var(--muted); margin: 0; }
.flow::before, .flow::after { content: ""; position: absolute; left: 26px; top: 30px; bottom: 30px; width: 8px; border-radius: 8px; }
.flow::before { background: var(--well-bg); box-shadow: var(--well); }
.flow::after { left: 28px; width: 4px; background: var(--line-y, linear-gradient(180deg, var(--s1), var(--s2), var(--s3), var(--s5))); transform-origin: top; transform: scaleY(var(--progress)); box-shadow: 0 0 10px rgba(254, 166, 30, .7); }
.flow__phase { padding-left: 84px; margin-bottom: -12px; }
.flow__phase span { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border-radius: 999px; font: 600 .76rem/1.2 var(--label); letter-spacing: .04em; text-transform: uppercase; background: var(--porcelain); box-shadow: var(--raise); color: var(--ink-2); }
@media (min-width: 960px) {
  .flow--row { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); }
  .flow--row .flow__item { padding: 88px 0 0; }
  .flow--row .flow__badge { top: 0; }
  .flow--row::before { left: 26px; top: 26px; bottom: auto; height: 8px; width: calc((100% + var(--gap)) * (var(--n) - 1) / var(--n) + 8px); }
  .flow--row::after { left: 28px; top: 28px; bottom: auto; height: 4px; width: calc((100% + var(--gap)) * (var(--n) - 1) / var(--n) + 4px); background: var(--line-x, var(--spectrum)); transform-origin: left; transform: scaleX(var(--progress)); }
}

/* ---- Compare table ----------------------------------------------------------- */
.compare { width: 100%; border-collapse: collapse; margin-top: 12px; }
.compare th { text-align: left; font: 500 .86rem/1.4 var(--label); color: var(--muted); padding: 0 0 12px; }
.compare th + th { padding-left: var(--gap); }
.compare td { vertical-align: top; padding: 16px 0; border-top: 1px solid var(--rule-2); width: 50%; }
.compare td + td { padding-left: var(--gap); font-weight: 700; }
.compare td:first-child { color: var(--muted); }
@media (max-width: 719px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tr, .compare td { display: block; width: 100%; }
  .compare tr { border-top: 1px solid var(--rule-2); padding: 14px 0; }
  .compare td, .compare td + td { padding: 0; border: 0 !important; }
  .compare td + td { margin-top: 8px; }
  .compare td + td::before { content: attr(data-label); display: block; font: 500 .8rem/1.4 var(--label); color: var(--muted); margin-bottom: 4px; }
}

/* ---- Scrolly: a sticky visual that changes as steps scroll past ------------- */
.scrolly { display: grid; gap: var(--gap); }
.scrolly__visual {
  position: sticky; top: 0; z-index: 1; height: calc(min(44vh, 400px) + var(--header-h)); display: grid; place-items: center;
  background: var(--scrolly-bg, var(--paper)); padding: calc(var(--header-h) - 4px) var(--gutter) 8px; margin-inline: calc(var(--gutter) * -1);
}
.scrolly__visual > * { width: 100%; height: 100%; }
.scrolly__visual > .sheet { height: auto; max-height: 100%; }
.scrolly__steps > li { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; padding-block: 28px; opacity: .85; transition: opacity .5s ease; }
.scrolly__steps > li.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scrolly__steps > li { opacity: 1; } }
.scrolly__steps .meta { color: var(--orange-ink); font-size: .95rem; font-weight: 600; }
.scrolly__steps h3 { font-size: clamp(1.75rem, 2.7vw, 2.35rem); letter-spacing: -.035em; margin: .35em 0 .5em; }
.scrolly__steps p { font-size: clamp(1.08rem, 1.35vw, 1.22rem); line-height: 1.62; color: var(--ink-2); margin: 0 0 20px; max-width: 44ch; }
.scrolly__steps .checks { max-width: 44ch; }
.checks--detail { --tick: var(--accent, var(--orange-ink)); gap: 0; }
.checks--detail li { padding: 14px 0; border-top: 1px solid var(--rule); }
.checks--detail li:last-child { border-bottom: 1px solid var(--rule); }
.checks--detail .tick { --accent: var(--tick); width: 24px; height: 24px; margin-top: 1px; color: var(--on, #fff);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .16), inset 0 1px 1px rgba(255, 255, 255, .6), 0 5px 9px -4px color-mix(in srgb, var(--accent) 75%, #000), 0 1px 2px rgba(20, 32, 46, .12); }
.checks--detail .tick .ic { position: relative; z-index: 1; width: 14px; height: 14px; stroke-width: 3; }
.checks--detail strong { display: block; font: 600 1.06rem/1.35 var(--display); letter-spacing: -.01em; color: var(--ink); }
.checks__note { display: block; margin-top: 3px; font-size: .98rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 960px) {
  .scrolly { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 72px); }
  .scrolly__visual { top: calc(var(--header-h) + 8px); height: calc(100vh - var(--header-h) - 32px); max-height: 760px; background: none; padding: 0; margin: 0; }
  .scrolly__steps > li { min-height: 66vh; }
  .scrolly__steps > li:first-child { margin-top: 6vh; }
  .scrolly__steps > li:last-child { margin-bottom: 6vh; }
}
html[data-motion="reduce"] .scrolly__steps > li { opacity: 1; }

/* Isometric building that assembles (MLI) */
.iso { overflow: visible; }
.iso text { font-family: var(--font); }
.iso .part { opacity: 0; transform: translateY(-34px); transition: opacity .7s ease, transform .9s var(--ease-out); }
.iso .part.is-on { opacity: 1; transform: none; }
.iso .tag { opacity: 0; transform: translateX(-10px); transition: opacity .5s .4s, transform .6s var(--ease-out) .4s; }
.iso .tag.is-on { opacity: 1; transform: none; }

/* Blueprint sheet with hand-drawn mark-up (MLI) */
.sheet { position: relative; width: 100%; max-width: 680px; margin-inline: auto; border-radius: 6px; transform: rotate(-1deg);
  box-shadow: 0 2px 3px rgba(20, 32, 46, .2), 0 30px 50px -22px rgba(20, 32, 46, .5); background-color: var(--blueprint);
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
                    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
                    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .08), transparent 60%);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px, 100% 100%;
}
.sheet::before, .sheet::after { content: ""; position: absolute; width: 90px; height: 26px; background: rgba(255, 250, 230, .62); box-shadow: 0 1px 2px rgba(20, 32, 46, .15); }
.sheet::before { left: -16px; top: 10px; transform: rotate(-32deg); }
.sheet::after { right: -16px; bottom: 12px; transform: rotate(-30deg); }
.sheet svg { width: 100%; height: auto; }
.plan text { fill: #fff; font-family: var(--label); }
.plan .hand { font-family: var(--hand); font-weight: 700; }
.plan .walls { stroke-dasharray: 3000; stroke-dashoffset: 3000; transition: stroke-dashoffset 2.4s var(--ease-out); }
.plan.is-visible .walls { stroke-dashoffset: 0; }
.plan .layer { opacity: 0; transition: opacity .3s; }
.plan .layer .draw { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.6s var(--ease-out); }
.plan .layer.is-on { opacity: 1; }
.plan .layer.is-on .draw { stroke-dashoffset: 0; }
.plan .layer text, .plan .layer .fill { opacity: 0; transition: opacity .6s .9s; }
.plan .layer.is-on text, .plan .layer.is-on .fill { opacity: 1; }

/* Staircase with a glowing orb (education journey) */
.stairs3d .step-top { transition: fill .8s ease; }
.stairs3d .is-lit .step-top { fill: url(#stepLit); }
.stairs3d .is-lit .step-glow { opacity: 1; }
.stairs3d .step-glow { opacity: 0; transition: opacity .8s ease; }
.stairs3d .ball { transform: translate(calc(var(--rise, 0) * var(--dx)), calc(var(--rise, 0) * var(--dy))); transition: transform 1s var(--ease-out); }
.stairs3d .ball-halo { opacity: calc(.35 + var(--rise, 0) * .16); transition: opacity 1s; }
.stairs3d text { font-family: var(--font); }

/* Cost-of-change chart (MLI process) */
.costcurve { display: block; width: 100%; height: auto; overflow: visible; }
.costcurve text { font-family: var(--font); }
.costcurve text.meta { font-family: var(--label); font-size: 12px; letter-spacing: 0; }
.js .costcurve .draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.8s var(--ease-out) .2s; }
.js .costcurve.is-visible .draw { stroke-dashoffset: 0; }
.js .costcurve .fade { opacity: 0; transition: opacity .7s ease var(--d, .8s); }
.js .costcurve.is-visible .fade { opacity: 1; }

/* "A loop, not a line" scene (About) */
.loopart { display: block; width: 100%; height: auto; overflow: visible; }
.loopart text { font-family: var(--font); }
.js .loopart .draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2s var(--ease-out); }
.js .loopart.is-visible .draw { stroke-dashoffset: 0; }
.js .loopart .stop { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .9s var(--ease-out); transition-delay: calc(.3s + var(--i, 0) * .25s); }
.js .loopart.is-visible .stop { opacity: 1; transform: none; }
.loopart .flowline { stroke-dasharray: 22 978; opacity: 0; transition: opacity .6s 1.8s; animation: loopflow 8s linear infinite; }
.loopart.is-visible .flowline { opacity: .95; }
@keyframes loopflow { to { stroke-dashoffset: -1000; } }
html[data-motion="reduce"] .loopart .flowline { display: none; }
@media (prefers-reduced-motion: reduce) { .loopart .flowline { display: none; } }

/* ---- MLI points estimator ---------------------------------------------------- */
.calc { display: grid; gap: var(--gap); }
@media (min-width: 1024px) { .calc { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } }
.calc__inputs { display: grid; gap: 22px; }
.calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc legend { font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 0; }
.calc legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.seg-toggle { display: inline-grid; grid-auto-flow: column; padding: 4px; border-radius: 999px; background: var(--well-bg); box-shadow: var(--well); max-width: 100%; }
.seg-toggle label { position: relative; }
.seg-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-toggle span { display: block; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .95rem; white-space: nowrap; transition: background .25s, color .25s, box-shadow .25s; }
.seg-toggle input:checked + span { background: var(--porcelain); color: var(--ink); box-shadow: var(--key); }
.seg-toggle input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 420px) { .seg-toggle span { padding: 10px 12px; font-size: .88rem; } }
.opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr)); }
.opt { position: relative; display: flex; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt > span { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 60px; padding: 10px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.3;
  background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .1); box-shadow: var(--key); transition: background .2s, box-shadow .2s, transform .2s; }
.opt:hover > span { box-shadow: var(--key-hover); }
.opt b { font-size: .98rem; }
.opt em { font-style: normal; font: 600 .8rem/1.3 var(--label); color: var(--orange-ink); }
.opt input:checked + span { background: #fff; box-shadow: 0 0 0 2px var(--ink), var(--key); }
.opt input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.calc__check { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: .95rem; cursor: pointer; }
.calc__check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.calc__out { position: relative; overflow: hidden; isolation: isolate; padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl); color: #f6f1e7;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 1.5px) 0 0 / 10px 10px, linear-gradient(180deg, #1b2c42, #0e1c2e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .04), var(--raise-hi); }
@media (min-width: 1024px) { .calc__out { position: sticky; top: calc(var(--header-h) + 16px); } }
.calc__out::before { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; right: -150px; top: -190px; border-radius: 50%; background: conic-gradient(from 180deg, var(--s1), var(--s2), var(--s3), var(--s5), var(--s1)); filter: blur(70px); opacity: .35; }
.calc__score { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.calc__score strong { font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.calc__score span { color: #b9c3cf; }
.meter { position: relative; height: 14px; margin: 22px 0 34px; border-radius: 999px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .08); }
.meter::after { content: ""; position: absolute; inset: 1px 2px 50%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; z-index: 2; }
.meter__fill { position: absolute; inset: 0 auto 0 0; width: calc(min(var(--pts, 0), 130) / 130 * 100%); border-radius: inherit; background: var(--spectrum); box-shadow: 0 0 16px rgba(254, 166, 30, .55), inset 0 1px 0 rgba(255, 255, 255, .5); transition: width .8s var(--ease-out); }
.meter__a11y { position: absolute; top: 0; bottom: 0; left: calc(var(--from, 0) / 130 * 100%); width: calc(var(--len, 0) / 130 * 100%); border-radius: 999px; outline: 2px solid #fff; outline-offset: 1px; transition: left .8s var(--ease-out), width .8s var(--ease-out); }
.meter__mark { position: absolute; top: -6px; bottom: -6px; width: 2px; left: calc(var(--at) / 130 * 100%); background: rgba(255, 255, 255, .5); }
.meter__mark span { position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; font: 500 .74rem/1 var(--label); color: #b9c3cf; white-space: nowrap; }
.calc__tier { font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.calc__benefits { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calc__benefits div { padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(0, 0, 0, .25); }
.calc__benefits dt { color: #b9c3cf; font-size: .8rem; }
.calc__benefits dd { font-weight: 700; }
.calc__note { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(254, 207, 42, .14); border: 1px solid rgba(254, 207, 42, .4); font-size: .93rem; }
.calc__note strong { color: var(--yellow); }
.calc__fine { margin: 12px 0 0; font-size: .8rem; color: #b9c3cf; }
.calc__type { margin: 12px 0 0; font-size: .92rem; color: #dfe5ec; }
.opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc__more { margin-top: 10px; font-size: .92rem; color: var(--ink-2); }
.calc__more summary { cursor: pointer; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.calc__more p { margin: 6px 0 0; max-width: 60ch; }
/* ---- RHFAC rating scale ------------------------------------------------------- */
.rating { margin-top: 24px; }
.rating__bar { display: grid; grid-template-columns: 60fr 20fr 20fr; gap: 3px; padding: 4px; border-radius: 18px; background: var(--well-bg); box-shadow: var(--well); font: 600 .8rem/1.2 var(--label); }
.rating__bar span { display: flex; align-items: center; min-height: 48px; padding: 8px 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.rating__bar span:nth-child(1) { background: linear-gradient(180deg, #f3ede1, #e6ddcb); color: var(--ink-2); border-radius: 14px 4px 4px 14px; }
.rating__bar span:nth-child(2) { background: linear-gradient(180deg, #cfe2f4, #a9c9e8); color: var(--ink); border-radius: 4px; }
.rating__bar span:nth-child(3) { background: linear-gradient(180deg, #ffe37a, #fecf2a); color: var(--ink); border-radius: 4px 14px 14px 4px; }
.rating__scale { position: relative; height: 1.2em; margin-top: 8px; font: 500 .78rem/1 var(--label); color: var(--muted); }
.rating__scale span { position: absolute; translate: -50% 0; }
.rating__scale span:first-child { translate: 0 0; }
.rating__scale span:last-child { translate: -100% 0; }
.rating__pts { display: grid; grid-template-columns: 60fr 20fr 20fr; gap: 3px; margin-top: 10px; font-size: .88rem; color: var(--ink-2); }
.rating__pts span:not(:first-child) { font-weight: 700; color: var(--ink); }

.rating__track { position: relative; }
.rating__marker { position: absolute; z-index: 2; top: -7px; bottom: -7px; left: calc(4px + (100% - 8px) * var(--s, 72) / 100); width: 3px; margin-left: -1.5px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(20, 32, 46, .35); transition: left .15s linear; }
.rating__marker::after { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; }
.rating__bar span { transition: box-shadow .3s; }
.rating__bar span.is-active { box-shadow: inset 0 0 0 2px var(--ink); }
.rating__try { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 16px; margin-top: 22px; padding: 16px 18px; border-radius: 16px; background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .08); box-shadow: var(--key); }
.rating__try label { font-weight: 700; }
.rating__try output { grid-column: 1 / -1; color: var(--ink-2); }
.rating__try output strong { color: var(--ink); margin-right: 4px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: var(--well-bg); box-shadow: var(--well); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 8px; background: var(--well-bg); box-shadow: var(--well); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .2); box-shadow: var(--key); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .2); box-shadow: var(--key); }
input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* ---- Roles (MLI who we support): role keys, a large scene with a sample deliverable ---- */
.roles { display: grid; gap: var(--gap); }
.roles__keys { display: grid; gap: 10px; }
@media (min-width: 720px) { .roles__keys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.roles__keys .key { display: grid; justify-items: start; align-content: center; gap: 3px; min-height: 76px; padding: 14px 22px; border-radius: 22px; font: 600 1.15rem/1.2 var(--display); letter-spacing: -.01em; }
.roles__keys .key small { font: 500 .84rem/1.35 var(--label); color: var(--muted); letter-spacing: 0; }
/* each role carries its own colour (blue → orange → yellow): a bar underneath, and the chosen one fills with it */
.roles__keys .key::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--accent); transition: opacity .3s; }
.roles__keys .key[aria-selected="true"] { color: var(--on, var(--ink)); border-color: transparent;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(120deg, var(--tone-a), var(--tone-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 30px -16px var(--tone-a), 0 4px 10px -4px rgba(20, 32, 46, .25); }
.roles__keys .key[aria-selected="true"]::after { opacity: 0; }
.roles__keys .key[aria-selected="true"] small { color: color-mix(in srgb, var(--on, var(--ink)) 80%, transparent); }
html[data-contrast="high"] .roles__keys .key[aria-selected="true"] { background: #000; color: #fff; }
html[data-contrast="high"] .roles__keys .key[aria-selected="true"] small { color: #fff; }
.roles__keys .key { position: relative; }
.roles__panel[hidden] { display: none; }
.roles__panel.is-entering { animation: panelIn .45s var(--ease-out); }
.roles__panel .card { display: grid; gap: clamp(24px, 3vw, 40px); overflow: hidden; isolation: isolate; }
.roles__panel .card::before { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; right: -150px; top: -170px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%); }
@media (min-width: 900px) { .roles__panel .card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; padding: clamp(14px, 1.4vw, 18px); padding-right: clamp(24px, 3vw, 44px); } }
.roles__visual { position: relative; }
.roles__visual .scene-stage { margin: 0; }
.roles__body h3 { font-size: var(--t-panel); letter-spacing: -.03em; margin: 0 0 10px; }
.roles__body > p:not(.meta):not(.sites__tags) { color: var(--ink-2); margin: 0; font-size: 1.08rem; line-height: 1.6; }
.roles__label { margin: 22px 0 6px; color: var(--muted); }
.roles__body .checks { margin-bottom: 18px; }
.roles__body .sites__tags { margin-bottom: 18px; }

/* ---- Rendered glass prism (about) -------------------------------------------- */
.prism-split { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 960px) { .prism-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.prism-art { width: 100%; height: auto; overflow: visible; color: var(--ink); }
.prism-sec { overflow: hidden; isolation: isolate; }
.prism-sec::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 62% 58%, rgba(254, 166, 30, .2), transparent 70%), radial-gradient(40% 50% at 18% 40%, rgba(91, 143, 191, .16), transparent 70%); }
.prism-sec .prism-art { color: #efe6d6; }
.prism-sec .facet-list p { color: var(--muted); }
.prism-sec .facet-list h3 { color: var(--fg); }
.js .prism-art .beam-out { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1.2s var(--ease-out); transition-delay: calc(.8s + var(--i, 0) * .14s); }
.js .prism-art .beam-in { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1s var(--ease-out); }
.js .prism-art.is-visible .beam-in { stroke-dashoffset: 0; }
.js .prism-art.is-visible .beam-out { transform: none; }
.facet-list { display: grid; gap: 12px; }
.facet-list > li { padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); }
.facet-list h3 { font-size: var(--t-card); letter-spacing: -.02em; margin-bottom: .25em; }
.facet-list p { color: var(--ink-2); margin: 0; }

/* ---- Credentials (about) ------------------------------------------------------- */
.creds { display: grid; gap: 12px; }
.cred { display: grid; gap: 2px; padding: 16px 18px 16px 28px; overflow: hidden; isolation: isolate;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 26%, var(--porcelain)), var(--porcelain) 78%); }
.cred::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--accent), var(--accent-2, var(--accent))); }
.cred::after { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -90px; top: -110px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2, var(--accent)) 26%, transparent), transparent 70%); }
.cred .meta { display: block; color: color-mix(in srgb, var(--accent) 50%, #14202e); font-size: .76rem; font-weight: 600; }
html[data-contrast="high"] .cred .meta { color: var(--ink); }
.cred strong { display: block; line-height: 1.3; }
.cred span:not(.meta) { display: block; font-size: .9rem; color: var(--ink-2); }

.creds .cred { margin: 0; }

/* ---- How we work: a loop (about) ------------------------------------------------ */
.loop { display: grid; gap: var(--gap); align-items: center; }
.loop__art { width: min(100%, 620px); margin-inline: auto; }
.costfig { padding: clamp(16px, 2vw, 24px); }
@media (min-width: 960px) { .loop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.loop__steps li { display: grid; grid-template-columns: 3.6rem 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--rule); }
.loop__steps li:first-child { border-top: 0; }
.loop__steps .meta { font: 300 2rem/1 var(--label); letter-spacing: -.03em; color: var(--orange-ink); }
.loop__steps h3 { font-size: var(--t-card); letter-spacing: -.02em; margin-bottom: .2em; }
.loop__steps p { margin: 0; color: var(--ink-2); }

/* ---- Principles (about) ------------------------------------------------------- */
.principles { display: grid; gap: var(--gap); }
@media (min-width: 840px) { .principles { grid-template-columns: 1fr 1fr; } }
.principles { counter-reset: pr; }
.principles .card { display: grid; gap: 10px; align-content: start; }
.principles .card { overflow: hidden; isolation: isolate; }
.principles .card::before { counter-increment: pr; content: counter(pr, decimal-leading-zero); justify-self: start; font: 400 2.4rem/1.05 var(--label); letter-spacing: -.03em;
  background: linear-gradient(100deg, #d96a00, #d96a00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.principles .card::after { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; right: -120px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.principles .card > div { position: relative; padding-left: 18px; }
.principles .card > div::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--s2), var(--s3)); }
html[data-contrast="high"] .principles .card::before { background: none; color: var(--ink); }
.principles h3 { font-size: var(--t-card); letter-spacing: -.02em; margin-bottom: .25em; }
.principles p { margin: 0; color: var(--ink-2); }


/* ---- Topics (education) -------------------------------------------------------- */
.topics { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.topics .card { display: flex; flex-direction: column; gap: 6px; }
.topics header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.topics header h3 { font-size: var(--t-card); }
.topics header p { margin: 0; font-size: .9rem; color: var(--muted); }
.topics li { padding: 12px 0; border-top: 1px solid var(--rule); }
.topics li strong { display: block; }
.topics li span { font-size: .93rem; color: var(--ink-2); }

/* ---- Education: plan your session ------------------------------------------------- */
.planner { display: grid; gap: var(--gap); }
@media (min-width: 1024px) { .planner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: start; } .planner__out { position: sticky; top: calc(var(--header-h) + 16px); } }
.planner__inputs { display: grid; gap: 26px; }
.planner fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.planner legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0; margin-bottom: 12px; font-weight: 700; }
.planner__count { font: 500 .8rem/1.2 var(--label); color: var(--muted); }
.planner__keys, .planner__group { display: flex; flex-wrap: wrap; gap: 8px; }
.planner__topics { display: grid; gap: 14px; }
.planner__group .meta { width: 100%; margin: 0; font-size: .76rem; color: var(--muted); }
label.key { position: relative; }
label.key input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
label.key:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
label.key:has(input:disabled) { opacity: .45; cursor: not-allowed; }
label.key:has(input:disabled) input { cursor: not-allowed; }
.planner__formats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr)); }
.fmt > span { align-items: flex-start; }
.ring.ring--mini { width: 28px; margin: 0 0 6px; -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); }
.ring.ring--mini::before, .ring.ring--mini::after { display: none; }
.agenda { padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-lg); background: #fff; border: 1px solid rgba(20, 32, 46, .08); box-shadow: var(--raise-hi); }
.agenda__kicker { margin: 0; color: var(--orange-ink); }
.agenda__title { margin: 6px 0 4px; font-size: var(--t-panel); letter-spacing: -.025em; }
.agenda__meta { margin: 0 0 16px; color: var(--muted); }
.agenda__list { display: grid; border-top: 1px solid var(--rule); }
.agenda__list li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: .96rem; animation: panelIn .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.agenda__list li.is-break { color: var(--muted); }
.agenda__time { font: 600 .82rem/1.6 var(--label); color: var(--ink-2); }
.agenda__dur { font: 500 .78rem/1.6 var(--label); color: var(--muted); white-space: nowrap; }
.agenda__inc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.planner__send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.planner__send p { margin: 0; font-size: .92rem; color: var(--muted); }

/* ---- Duration rings (education formats) ---------------------------------------- */
.rings { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.rings .card { display: flex; flex-direction: column; gap: 10px; }
.ring { --p: .25; position: relative; width: 120px; aspect-ratio: 1; border-radius: 50%; margin-bottom: 10px; display: grid; place-items: center;
  background: conic-gradient(from -90deg, var(--accent) 0 calc(var(--p) * 360deg), transparent 0), var(--well-bg); box-shadow: var(--well); }
.ring__face { position: relative; z-index: 1; width: 82px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(120% 90% at 30% 15%, #fff, #f3eee5 60%, #e9e2d5); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(20, 32, 46, .08), 0 0 0 1px rgba(20, 32, 46, .08), 0 6px 12px -4px rgba(20, 32, 46, .3); font: 800 1.05rem/1.05 var(--font); }
.ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: repeating-conic-gradient(from -90deg, rgba(20, 32, 46, .32) 0 1deg, transparent 1deg 30deg); -webkit-mask: radial-gradient(circle, transparent 47px, #000 48px, #000 53px, transparent 54px); mask: radial-gradient(circle, transparent 47px, #000 48px, #000 53px, transparent 54px); }
.ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(160deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 45%); pointer-events: none; }
.ring__face small { display: block; font: 500 .7rem/1.2 var(--label); color: var(--muted); }
.rings h3 { font-size: var(--t-card); }
.rings p { margin: 0; color: var(--ink-2); }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .07); box-shadow: inset 0 1px 0 #fff, 0 4px 12px -8px rgba(20, 32, 46, .25); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px; cursor: pointer; list-style: none; font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 700; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background-color: var(--paper-2);
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)); background-size: 12px 2px, 2px 12px; background-position: center; background-repeat: no-repeat;
  box-shadow: var(--well); transition: transform .35s var(--ease-out), background-color .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--yellow); }
.faq__body { padding: 0 20px 20px; color: var(--muted); }
.faq__body p:last-child { margin: 0; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .4s var(--ease-out), content-visibility .4s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ---- Floating panels: FAQ and Display settings ---------------------------------- */
.faq-panel, .prefs {
  position: fixed; right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); top: calc(var(--header-h) - 10px); z-index: 150;
  max-height: calc(100dvh - var(--header-h) - 16px); overflow-y: auto;
  background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--raise-hi);
  --muted: var(--ink-2); --focus: var(--blue);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right;
  transition: opacity .2s var(--ease), transform .3s var(--ease-out), visibility 0s .3s;
}
.faq-panel.is-open, .prefs.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 480px) { .faq-panel, .prefs { right: 12px; left: 12px; width: auto !important; } }
.faq-panel { width: min(440px, calc(100vw - 32px)); display: flex; flex-direction: column; padding: 0; }
.faq-panel__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 12px; }
.faq-panel__head h2 { font-size: 1.2rem; letter-spacing: -.015em; }
.faq-panel__head p { margin: 2px 0 0; font-size: .9rem; color: var(--ink-2); }
.faq-panel__close { margin-left: auto; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid rgba(20, 32, 46, .12); cursor: pointer; background: var(--porcelain); box-shadow: var(--key); font-size: 1.2rem; line-height: 1; }
.faq-panel__tools { padding: 0 20px 12px; border-bottom: 1px solid var(--line); }
.faq-panel__tools input { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(20, 32, 46, .16); background: var(--well-bg); box-shadow: var(--well); }
.faq-panel__tools input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(27, 94, 155, .22); }
.faq-panel__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.faq-panel__cats button { min-height: 32px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font: 600 .82rem/1.2 var(--font); color: var(--ink); background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .12); box-shadow: var(--key); }
.faq-panel__cats button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: none; }
.faq-panel__list { padding: 6px 20px; max-height: 42vh; overflow-y: auto; }
.faq-panel__list details { border-bottom: 1px solid var(--line); }
.faq-panel__list details:last-child { border-bottom: 0; }
.faq-panel__list summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 700; line-height: 1.35; }
.faq-panel__list summary::-webkit-details-marker { display: none; }
.faq-panel__list summary::after { content: "+"; flex: none; font: 500 1.2rem/1 var(--font); color: var(--ink-2); transition: transform .3s var(--ease-out); }
.faq-panel__list details[open] summary::after { transform: rotate(45deg); }
.faq-panel__list details > div { padding: 0 0 14px; font-size: .94rem; color: var(--ink-2); }
.faq-panel__list details > div p { margin: 0 0 6px; }
.faq-panel__list details a { font-weight: 700; color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.faq-panel__note { margin: 0; padding: 10px 20px; font-size: .9rem; color: var(--ink-2); }
.faq-panel__ask { padding: 14px 20px 6px; border-top: 1px solid var(--line); background: var(--paper); }
.faq-panel__ask label { display: block; font-weight: 700; margin-bottom: 8px; }
.faq-panel__row { display: flex; gap: 8px; align-items: flex-end; }
.faq-panel__row textarea { flex: 1; min-height: 46px; max-height: 120px; resize: none; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(20, 32, 46, .16); background: #fff; box-shadow: var(--well); }
.faq-panel__row textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27, 94, 155, .22); }
.faq-panel__row .btn { min-height: 46px; padding: 0 18px; }
.faq-panel__answer { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .94rem; line-height: 1.55; white-space: pre-wrap; }
.faq-panel__answer.is-loading::after { content: ""; display: inline-block; width: 1.2em; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.faq-panel__fine { margin: 8px 0 8px; font-size: .78rem; color: var(--ink-2); }
.faq-panel__all { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); text-decoration: none; background: var(--paper); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.faq-panel__all:hover { background: var(--paper-2); }
.faq-panel__all .ic { width: 18px; height: 18px; }

/* ---- FAQ page, resources hub, glossary ------------------------------------------- */
.page-head { padding-bottom: clamp(36px, 5vw, 56px); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 3vw, 36px); }
.jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .1); box-shadow: var(--key); }
.jump a:hover { box-shadow: var(--key-hover); }
.faq-page { display: grid; gap: clamp(40px, 5vw, 64px); }
.faq-page > * { max-width: 880px; }
.faq-group { scroll-margin-top: calc(var(--header-h) + 16px); }
.faq-group h2 { margin-bottom: 18px; }
.faq-more { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; }
.faq-more p { margin: 6px 0 0; color: var(--ink-2); max-width: 48ch; }
.res-group { scroll-margin-top: calc(var(--header-h) + 16px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filters button { min-height: 40px; padding: 6px 16px; border-radius: 999px; cursor: pointer; font: 600 .92rem/1.2 var(--font); color: var(--ink); background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .12); box-shadow: var(--key); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--selected); }
.res-list { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.res-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.res-card .kicker { font-size: .78rem; }
.res-card h3 { font-size: var(--t-card); letter-spacing: -.02em; }
.res-card p { margin: 0; color: var(--ink-2); }
.res-card .link-arrow { margin-top: auto; }
.glossary { display: grid; gap: 0; margin: 0 0 1.4em; }
.glossary > div { padding: 14px 0; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 16px); }
.glossary dt { font-weight: 800; letter-spacing: -.01em; }
.glossary dd { margin: 4px 0 0; color: var(--ink-2); }
.glossary > div:target { background: color-mix(in srgb, var(--yellow) 18%, transparent); border-radius: 8px; padding-inline: 10px; }
.prose h2[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---- Contact: booking ------------------------------------------------------------ */
.booking { display: grid; gap: 18px; }
.booking__tabs { display: inline-grid; grid-auto-flow: column; justify-self: start; padding: 4px; border-radius: 999px; background: var(--well-bg); box-shadow: var(--well); }
.booking__tabs button { padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer; background: transparent; font: 600 .95rem/1.2 var(--font); color: var(--ink-2); }
.booking__tabs button[aria-selected="true"] { background: var(--porcelain); color: var(--ink); box-shadow: var(--key); }
.booking__panel[hidden] { display: none; }
.cal { min-height: 420px; border-radius: 18px; background: var(--perf), var(--well-bg); box-shadow: var(--well); overflow: hidden; display: grid; }
.cal__ph { display: grid; place-items: center; align-content: center; gap: 12px; padding: 32px; text-align: center; }
.cal__ph p { margin: 0; color: var(--ink-2); max-width: 40ch; }
.cal__card { padding: 14px 16px 16px; margin-bottom: 8px; border-radius: 16px; background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .08); box-shadow: var(--raise); }
.cal__bar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-size: .88rem; }
.cal__nav { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); background: var(--well-bg); box-shadow: var(--well); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 30px); gap: 6px; }
.cal__grid b { font: 600 .7rem/1 var(--label); color: var(--muted); text-align: center; padding-bottom: 2px; }
.cal__grid i { width: 30px; height: 30px; border-radius: 9px; background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .07); box-shadow: var(--key); }
.cal__grid i.on { background: linear-gradient(180deg, #ffe37a, #fecf2a); border-color: rgba(160, 110, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 0 #d9a20d, 0 0 12px -2px rgba(254, 207, 42, .9); }
.cal__grid i.off { opacity: .4; box-shadow: none; background: transparent; }

.radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.meet-opts { grid-template-columns: 1fr; gap: 6px; }
.meet-opts .opt > span { flex-direction: row; justify-content: space-between; align-items: center; min-height: 50px; padding: 10px 16px; }
.booking__sel { margin: 0; color: var(--ink-2); }
.booking__panel .field legend { margin-bottom: 10px; }
.contact__next { margin-top: clamp(32px, 4vw, 48px); }
.contact__next > h2 { color: var(--muted); font-weight: 500; margin-bottom: 24px; }
.contact__next .flow { gap: 28px; }
.contact__alt { margin-top: clamp(32px, 4vw, 48px); }

/* ---- Photo band, drop cap ------------------------------------------------------ */
.band { position: relative; min-height: clamp(460px, 64vh, 640px); display: flex; align-items: flex-end; overflow: hidden; }
.band > .media { position: absolute; inset: 0; border-radius: 0; }
.band > .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 28, 46, .94), rgba(14, 28, 46, .6) 50%, rgba(14, 28, 46, .15)); }
.band > .media.is-missing::after { width: auto; height: auto; translate: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.band > .media .media__ph { bottom: auto; top: 14px; }
.band__inner { position: relative; z-index: 1; padding-block: 56px; }
.band__inner .t-lead { max-width: 52ch; margin-top: 1.1rem; }
html[data-contrast="high"] .band > .media::after { background: rgba(0, 0, 0, .85); }
.dropcap::first-letter { float: left; font-size: 4.3em; line-height: .8; font-weight: 800; margin: .08em .1em 0 0; color: #d96a00; }   /* bright orange that still reads on cream */
.meet-story { margin-top: 1.4rem; }
.meet-story p { margin: 0 0 1.1em; font-size: clamp(1.05rem, 1.2vw, 1.14rem); line-height: 1.72; color: var(--ink-2); max-width: 60ch; }
.meet-story .meet-mission { margin: 1.6rem 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--s3); border-image: linear-gradient(180deg, var(--s1), var(--s2), var(--s3)) 1;
  font: 600 clamp(1.3rem, 2.1vw, 1.7rem)/1.32 var(--display); letter-spacing: -.025em; color: var(--ink); max-width: 30ch; }

/* ---- Articles and resource listings ------------------------------------------------ */
.article__head { padding-block: clamp(20px, 3vw, 40px) clamp(32px, 4vw, 56px); }
.article__head .wrap > * { max-width: 780px; }
.article__head .breadcrumbs { margin-bottom: clamp(24px, 3vw, 36px); }
.article__head .t-1 { margin: 1rem 0 1.2rem; font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.article__meta { color: var(--muted); margin-top: 1.4rem; }
.article__body { max-width: 720px; padding-bottom: var(--section); }
.prose { font-size: 1.1rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); letter-spacing: -.02em; margin-top: 2em; }
.prose p { margin-bottom: 0; }
.prose ul, .prose ol { display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.prose .checks li { padding-left: 0; }
.prose .checks li::before { content: none; }
.prose .checks { gap: 12px; }
.prose ol { counter-reset: o; }
.prose ol li { counter-increment: o; position: relative; padding-left: 34px; }
.prose ol li::before { content: counter(o); position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem/1 var(--label); background: var(--porcelain); box-shadow: var(--raise); }
.callout { padding: 18px 20px; border-radius: 18px; background: linear-gradient(180deg, #fff5d6, #ffeab0); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(200, 140, 0, .25), 0 10px 20px -12px rgba(200, 140, 0, .5); }
.callout p { margin: 0; }
.table-wrap { overflow-x: auto; border-radius: 18px; background: var(--porcelain); box-shadow: var(--raise); }
.data-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.data-table caption { text-align: left; padding: 14px 16px 0; font: 600 .82rem/1.4 var(--label); color: var(--muted); }
.data-table th, .data-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { font-weight: 700; background: rgba(20, 32, 46, .03); }
.post-list { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.post { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); }
.post h2, .post h3 { font-size: var(--t-card); letter-spacing: -.02em; }
.post p { margin: 0; color: var(--ink-2); }
.post .link-arrow { margin-top: auto; }
.case { display: grid; gap: 22px; }
@media (min-width: 900px) { .case { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.case h2 { font-size: var(--t-panel); letter-spacing: -.025em; margin: 12px 0 10px; }
.case__cols { display: grid; gap: 18px; }
@media (min-width: 640px) { .case__cols { grid-template-columns: 1fr 1fr; } }
.case__cols h3 { font-size: .86rem; font-family: var(--label); font-weight: 600; color: var(--muted); margin-bottom: 10px; }

.cases { display: grid; gap: var(--gap); }
.case > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.case__challenge { margin: 10px 0 0; color: var(--ink-2); }
.case__cols > div { padding: 18px; border-radius: 18px; background: var(--well-bg); box-shadow: var(--well); }
.insights-ask { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-top: var(--gap); }
.insights-ask h2 { font-size: var(--t-card); letter-spacing: -.02em; }
.insights-ask p { margin: 2px 0 0; color: var(--ink-2); }
@media (max-width: 600px) { .insights-ask { grid-template-columns: auto 1fr; } .insights-ask .btn { grid-column: 1 / -1; } }

/* ---- Forms ----------------------------------------------------------------- */
.form-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label, .field legend { font-weight: 700; font-size: .98rem; }
.field .opt-label { font-weight: 400; color: var(--muted); }
.field .req { color: var(--orange-ink); margin-left: 2px; }
.field .hint { font-size: .9rem; color: var(--muted); margin: -2px 0 0; }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1px solid #a49d88; background: var(--well-bg); box-shadow: var(--well);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.textarea { min-height: 140px; resize: vertical; }
.select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2314202e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"), var(--well-bg); background-repeat: no-repeat; background-position: right 16px center, 0 0; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(27, 94, 155, .22); }
.select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2314202e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: #b3261e; }
.field__error { display: none; align-items: center; gap: 6px; margin: 0; color: #a3221b; font-size: .92rem; font-weight: 700; }
.field.has-error .field__error { display: flex; }
.field__error svg { width: 16px; height: 16px; flex: none; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--porcelain); border: 1px solid rgba(20, 32, 46, .12); box-shadow: inset 0 1px 0 #fff, 0 3px 6px -3px rgba(20, 32, 46, .22); font-size: .96rem; font-weight: 500; transition: background .2s, box-shadow .2s; }
.choice input:checked + span { background: var(--well-bg); box-shadow: var(--press), 0 0 0 2px var(--ink); font-weight: 700; }
.choice input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; font-weight: 400 !important; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.hp { position: absolute; left: -9999px; }
.error-summary { border: 2px solid #b3261e; border-radius: var(--r); padding: 20px 24px; margin-bottom: 24px; background: #fdf1ef; }
.error-summary h2 { font-size: 1.15rem; color: #8c1d18; margin-bottom: .5em; letter-spacing: 0; }
.error-summary ul { list-style: disc; padding-left: 1.2em; }
.error-summary a { color: #8c1d18; font-weight: 700; }
.form-success { padding: clamp(16px, 3vw, 28px) 0; }
.form-success .orb { margin-bottom: 18px; animation: pop .6s var(--ease-out); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.btn[aria-busy="true"] { opacity: .75; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }

/* ---- Footer and skyline ------------------------------------------------------- */
.site-footer { position: relative; padding-top: clamp(64px, 8vw, 96px); overflow: hidden; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(180deg, #13243a 0%, #0e1c2e 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.footer__top { padding-bottom: clamp(28px, 4vw, 40px); }
@media (min-width: 960px) { .footer__brand { grid-column: 1 / 6; } .footer__nav { grid-column: 6 / 13; } }
.site-footer .brand { color: var(--fg); margin-bottom: 1.4rem; height: auto; }
.site-footer .brand__logo { height: 40px; }
.footer__tag { font-size: clamp(1.4rem, 2.3vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; max-width: 18ch; margin: 0; }
.footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 28px var(--gap); }
.footer__heading { font: 500 .84rem/1.3 var(--label); color: var(--muted); margin-bottom: 1rem; letter-spacing: 0; }
.footer__links { display: grid; gap: .55rem; }
.footer__links a, .footer__links button { color: var(--fg); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.footer__links a:hover, .footer__links button:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.skyline { display: block; width: 100%; height: clamp(170px, 19vw, 280px); }
.js .skyline .lit-win { opacity: 0; transition: opacity .8s ease; transition-delay: var(--d, 0s); }
.js .skyline.is-visible .lit-win { opacity: 1; }
.js .skyline .sky-beam { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 2.4s var(--ease-out) .3s; }
.js .skyline.is-visible .sky-beam { transform: none; }
.footer__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 18px 28px; font: 500 .84rem/1.4 var(--label); color: var(--muted); border-top: 1px solid var(--rule); }
.footer__bottom p { margin: 0; }

/* ---- Display preferences panel ------------------------------------------- */
.prefs { width: min(370px, calc(100vw - 32px)); padding: 22px; }
.prefs h2 { font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: .3em; }
.prefs > p { font-size: .94rem; color: var(--muted); }
.prefs__group { border: 0; padding: 0; margin: 0 0 14px; }
.prefs__group legend { font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg .choice span { width: 100%; justify-content: center; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; font-weight: 500; }
.switch small { display: block; font-weight: 400; color: var(--muted); font-size: .86rem; }
.switch input { appearance: none; position: relative; width: 50px; height: 30px; margin: 0; flex: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #ddd5c5, #ebe4d6); border: 1px solid rgba(20, 32, 46, .14); box-shadow: inset 0 2px 4px rgba(20, 32, 46, .22), 0 1px 0 rgba(255, 255, 255, .9); transition: background .25s, box-shadow .25s; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff 0, #f7f2e9 55%, #e4dccd 100%); box-shadow: inset 0 -1px 1px rgba(20, 32, 46, .12), 0 1px 1px rgba(20, 32, 46, .25), 0 3px 6px rgba(20, 32, 46, .25); transition: transform .3s var(--ease-out); }
.switch input:checked { background: linear-gradient(180deg, #f6c21a, #fed54a); border-color: rgba(160, 110, 0, .4); box-shadow: inset 0 2px 4px rgba(150, 100, 0, .35), 0 0 12px -2px rgba(254, 207, 42, .8), 0 1px 0 rgba(255, 255, 255, .9); }
.switch input:checked::after { transform: translateX(20px); }
.prefs .seg .choice span { box-shadow: var(--key); }
.prefs .seg .choice input:checked + span { box-shadow: var(--press), 0 0 0 2px var(--ink); }
.prefs__group legend, .switch { font-size: .95rem; }
.prefs__actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.prefs__actions button { background: none; border: 0; padding: 8px 0; color: var(--blue); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }

/* ---- Scroll reveal ---------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Reduced motion (system setting or the Display panel) ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
html[data-motion="reduce"] { scroll-behavior: auto; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important;
}

@media print {
  .site-header, .prefs, .faq-panel, .closing__art, body::after, .rail-ctrl, .skyline { display: none !important; }
  .js [data-reveal], .js .hero-in { opacity: 1 !important; transform: none !important; }
  .dark { background: #fff !important; color: #000 !important; }
}

/* ---- Audit close-ups: mock-ups of the thing we check, drawn in HTML so they use the site's fonts and scale with the stage ---- */
.vig-stage { position: relative; display: block; container-type: inline-size; }
.vig { position: absolute; inset: 0; font: 400 2.8cqw/1.35 var(--font); color: #14202e; text-align: left; }
.vig p { margin: 0; }
.vig .ic { width: 1.1em; height: 1.1em; stroke-width: 2.2; flex: none; }
.vig__card, .vig__screen, .vig__browser, .vig__doc { position: absolute; left: var(--x); top: var(--y); width: var(--w); border-radius: 1em; }
.vig__card, .vig__doc, .vig__browser { background: linear-gradient(180deg, #fff, #fbf8f2); border: 1px solid rgba(20, 32, 46, .08);
  box-shadow: inset 0 1px 0 #fff, 0 .25em .6em -.2em rgba(20, 32, 46, .22), 0 1.6em 3em -1.4em rgba(20, 32, 46, .55); }
.vig__card, .vig__doc { padding: 1.1em 1.2em; }
.vig__float { left: auto; top: auto; right: var(--r); bottom: var(--b); padding: .85em 1em; font-size: .92em; border-radius: .9em; }
.vig__float--top { bottom: auto; top: var(--t); }
.vig__label { font: 600 .74em/1.3 var(--label); color: #46525f; letter-spacing: .02em; margin-bottom: .4em !important; }
.vig__title { font: 600 1.2em/1.2 var(--display); letter-spacing: -.01em; margin-bottom: .4em !important; }
.vig__p { font-size: .84em; color: #46525f; margin: .55em 0 .35em !important; }
.vig__muted { font-size: .76em; color: #46525f; }
.vig__field { position: relative; padding: .5em .7em; border-radius: .55em; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 32, 46, .22); font-size: .88em; }
.vig__field.is-focus { box-shadow: inset 0 0 0 .14em #2f5f8c, 0 0 0 .32em #fecf2a; }
.vig__field.is-error { box-shadow: inset 0 0 0 .14em #a14e06, 0 0 0 .32em #fecf2a; }
.vig__caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: #14202e; animation: vigCaret 1.1s steps(1) infinite; }
@keyframes vigCaret { 50% { opacity: 0; } }
html[data-motion="reduce"] .vig__caret { animation: none; }
@media (prefers-reduced-motion: reduce) { .vig__caret { animation: none; } }
.vig__chips { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .7em; }
.vig__float .vig__chips { margin-top: .2em; }
.vig__chip { display: inline-flex; align-items: center; gap: .3em; padding: .24em .65em; border-radius: 999px; font: 600 .72em/1.4 var(--label); background: var(--well-bg); box-shadow: var(--well); white-space: nowrap; }
.vig__chip.is-on { color: var(--on, #14202e); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 .2em .5em -.2em color-mix(in srgb, var(--accent) 80%, #000); }
.vig__chip .ic { width: 1em; height: 1em; stroke-width: 3; }
.vig__foot { display: flex; align-items: center; gap: .7em; margin-top: .95em; }
.vig__btn { display: inline-flex; padding: .45em 1em; border-radius: 999px; background: #14202e; color: #fff; font: 600 .76em/1.2 var(--label); box-shadow: 0 .3em .6em -.3em rgba(20, 32, 46, .6); }
.vig__row { display: flex; align-items: center; gap: .55em; padding: .42em 0; border-top: 1px solid rgba(20, 32, 46, .1); font-size: .84em; font-weight: 600; }
.vig__label + .vig__row { border-top: 0; }
.vig__ok, .vig__flag { flex: none; display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; font: 800 .82em/1 var(--font);
  box-shadow: inset 0 -.15em .3em rgba(0, 0, 0, .16), inset 0 .06em .06em rgba(255, 255, 255, .6), 0 .25em .45em -.2em color-mix(in srgb, var(--accent) 75%, #000); }
.vig__ok { --accent: #3a6f9c; color: #fff; }
.vig .vig__ok .ic { position: relative; z-index: 1; width: .8em; height: .8em; stroke-width: 3.4; }
.vig__flag { --accent: #fe9013; color: #14202e; }
/* programs */
.vig__ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; }
.vig__ways span { display: grid; justify-items: center; gap: .3em; padding: .6em .3em; border-radius: .6em; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 32, 46, .14); font: 600 .72em/1.2 var(--label); }
.vig__ways span:first-child { background: color-mix(in srgb, var(--accent) 12%, #fff); box-shadow: inset 0 0 0 .16em var(--accent); }
.vig .vig__ways .ic { width: 1.6em; height: 1.6em; stroke-width: 1.8; color: #2f5f8c; }
.vig__check { display: flex; align-items: center; gap: .5em; padding: .2em 0; font-size: .82em; }
.vig__check::before { content: ""; flex: none; width: 1.05em; height: 1.05em; border-radius: .28em; background: #fff; box-shadow: inset 0 0 0 .1em rgba(20, 32, 46, .35); }
.vig__check.is-on::before { box-shadow: none; background: #2f5f8c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat; }
.vig__bar { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); align-items: center; gap: .5em; margin-top: .5em; font: 600 .74em/1.2 var(--label); }
.vig__bar i { display: block; height: .75em; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #5b8dbd, #2f5f8c); }
.vig__bar.is-drop i { background: linear-gradient(90deg, #fecf2a, #fe9013); }
.vig__note { margin-top: .6em !important; font-size: .74em; font-weight: 600; color: #a14e06; }
/* communications */
.vig__screen { aspect-ratio: 16 / 10.5; overflow: hidden; border: .4em solid #14202e; border-radius: .9em; background: linear-gradient(160deg, #3a6f9c, #1b2c40);
  box-shadow: 0 .25em .6em -.2em rgba(20, 32, 46, .3), 0 1.6em 3em -1.4em rgba(20, 32, 46, .6); }
.vig__slide { position: absolute; left: 6%; top: 8%; width: 56%; padding: .85em 1em; border-radius: .6em; background: #fffdf8; box-shadow: 0 .4em 1em -.5em rgba(0, 0, 0, .5); }
.vig__lines { display: grid; gap: .4em; margin-top: .4em; }
.vig__lines i { display: block; height: .42em; width: var(--w, 100%); border-radius: .3em; background: #e6dfd0; }
.vig__pip { position: absolute; right: 6%; top: 8%; width: 28%; aspect-ratio: 3 / 3.5; overflow: hidden; border-radius: .6em; background: linear-gradient(180deg, #cfe0f0, #8fb2d4); box-shadow: 0 0 0 .14em rgba(255, 255, 255, .75); }
.vig__person { position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, #234d76 0 15%, transparent 15.6%), radial-gradient(46% 40% at 50% 102%, #234d76 0 98%, transparent 100%),
  radial-gradient(circle at 34% 72%, #fea61e 0 7%, transparent 7.6%), radial-gradient(circle at 64% 66%, #fea61e 0 7%, transparent 7.6%); }
.vig__pip b { position: absolute; left: .35em; bottom: .35em; padding: .1em .45em; border-radius: .3em; background: #fecf2a; color: #14202e; font: 800 .62em/1.4 var(--label); }
.vig__cc { position: absolute; left: 6%; right: 6%; bottom: 7%; display: flex; align-items: center; gap: .55em; padding: .5em .7em; border-radius: .45em; background: rgba(10, 16, 24, .84); color: #fff; font-size: .88em; font-weight: 600; }
.vig__cc b { flex: none; padding: .05em .35em; border-radius: .25em; background: #fff; color: #14202e; font: 800 .7em/1.4 var(--label); }
/* digital */
.vig__browser { overflow: hidden; }
.vig__chrome { display: flex; align-items: center; gap: .35em; padding: .55em .8em; background: linear-gradient(180deg, #f7f3ec, #efe9de); border-bottom: 1px solid rgba(20, 32, 46, .08); }
.vig__chrome i { width: .6em; height: .6em; border-radius: 50%; background: #3a6f9c; }
.vig__chrome i:nth-child(2) { background: #fe9013; }
.vig__chrome i:nth-child(3) { background: #fecf2a; }
.vig__chrome span { flex: 1; margin-left: .6em; padding: .15em .7em; border-radius: 999px; background: #fff; font: 500 .68em/1.4 var(--label); color: #46525f; box-shadow: inset 0 0 0 1px rgba(20, 32, 46, .1); }
.vig__body { padding: 1em 1.2em 1.2em; }
.vig__flabel { font: 600 .74em/1.2 var(--label); margin: .75em 0 .3em !important; }
.vig__err { display: flex; align-items: center; gap: .4em; margin: .55em 0 .9em !important; font-size: .74em; font-weight: 600; color: #a14e06; }
.vig__err .vig__flag { width: 1.3em; height: 1.3em; font-size: .9em; }
.vig__big { font: 300 2.3em/1 var(--label); letter-spacing: -.03em; color: #d96a00; margin: .05em 0 .3em !important; }
.vig__big small { margin-left: .08em; font-size: .52em; font-weight: 500; color: #46525f; }
.vig__meter { height: .75em; margin-top: .3em; overflow: hidden; border-radius: 999px; background: #e6dfd0; box-shadow: inset 0 1px 2px rgba(20, 32, 46, .18); }
.vig__meter i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #2f5f8c, #fe9013, #fecf2a); }
/* policy */
.vig__doc { padding: 1.3em 1.4em 1.5em; background: linear-gradient(180deg, #fffefb, #faf4e8); transform: rotate(-1.6deg); }
.vig__mark { position: relative; margin: .9em 0 .2em !important; font: 600 .98em/1.4 var(--display); }
.vig__mark em { position: relative; font-style: normal; }
.vig__mark svg, .vig__hand svg { position: absolute; overflow: visible; fill: none; stroke: #fe9013; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vig__circle { left: -.5em; top: -.4em; width: calc(100% + 1em); height: calc(100% + .8em); }
.vig__under { left: 0; bottom: -.3em; width: 78%; height: .45em; }
.vig__hand { position: relative; margin: .35em 0 .7em 34% !important; padding-left: 2em; font: italic 600 .95em/1.2 var(--display); color: #d96a00; transform: rotate(-3deg); }
.vig__hand svg { left: 0; top: -.75em; width: 1.7em; height: 1.3em; stroke-width: 2.6; }
.dims__panel.is-entering .vig__float { animation: mockIn .7s var(--ease-out) .12s both; }
html[data-motion="reduce"] .dims__panel.is-entering .vig__float { animation: none; }

/* ---- Before you book: a few real answers, two resources and a related service, so no service page is a dead end ---- */
.prebook__grid { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 960px) { .prebook__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }
.prebook .t-lead { margin: 1rem 0 1.6rem; }
.prebook__side { display: grid; gap: 14px; }
@media (min-width: 960px) { .prebook__side { padding-top: 6px; } }
.prebook__side > .meta { margin: 0; color: var(--orange-ink); font-weight: 600; }
.prebook__card { padding: 18px 22px; gap: 6px; }
.prebook__card h3 { font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.prebook__card--pair { border-top: 0; background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .5), transparent 55%), linear-gradient(135deg, #fff4d6, #ffe3b0); }
.prebook__card--pair .kicker { color: #7d5c00; }

/* ---- Education › speaking: three signature talks, then what an organizer needs ---- */
.talks { list-style: none; margin: 0; padding: 0; }
.talks > li { display: flex; }
.talk { display: flex; flex-direction: column; gap: 12px; width: 100%; overflow: hidden; isolation: isolate; border-top: 5px solid transparent;
  background: var(--porcelain) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent)) border-box; }
.talk::before { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; right: -130px; top: -150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.talk__format { margin: 0; font: 600 .84rem/1.3 var(--label); color: var(--num, var(--orange-ink)); }
.talk h3 { font-size: var(--t-card); letter-spacing: -.02em; line-height: 1.2; }
.talk p { margin: 0; color: var(--ink-2); }
.talk .talk__for { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink); }
.talk__for span { display: block; font: 600 .78rem/1.4 var(--label); color: var(--ink-2); }
.speak__kit { display: grid; gap: clamp(24px, 3vw, 48px); margin-top: clamp(20px, 2.4vw, 28px); }
@media (min-width: 960px) { .speak__kit { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.speak__h { font-size: var(--t-card); margin-bottom: 14px; }
@media (min-width: 600px) { .speak__kit .ledger > div { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); } }
@media (max-width: 599px) { .speak__kit .ledger > div { grid-template-columns: 1fr; } }
.speak__bio { display: grid; gap: 14px; align-content: start; }
.speak__bio .meta { margin: 0; color: var(--orange-ink); font-weight: 600; }
.speak__bio blockquote { margin: 0; padding: 18px 20px; border-radius: 16px; background: var(--well-bg); box-shadow: var(--well); font-size: 1.02rem; line-height: 1.6; }
.speak__bio .btn { justify-self: start; }

/* contact: a promise under the send button */
.form-promise { margin: 10px 0 0; text-align: center; font-size: .92rem; color: var(--ink-2); }

/* ---- Audits › what you receive, how long it takes, what shapes the cost ---- */
.receive__side { display: grid; gap: 22px; align-content: start; }
.receive__card { display: grid; gap: 14px; border-top: 5px solid transparent;
  background: var(--porcelain) padding-box, linear-gradient(90deg, #2f5f8c, var(--s3), var(--s1)) border-box; }
.receive__card h3 { font-size: var(--t-item, 1.15rem); }
.receive__card h3:not(:first-child) { margin-top: 10px; }
.receive__list { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--ink-2); }
.receive__list li::marker { color: var(--orange); }
.receive__fine { margin: 4px 0 0; font-size: .92rem; color: var(--ink-2); }
.receive .actions { margin-top: 0; }

/* home hero: a low-risk first step under the buttons */
.hero-photo__note { margin: 14px 0 0; font-size: .95rem; color: #ece7dd; }

.closing__more { margin: 14px 0 0; font-size: .95rem; color: var(--ink-2); }
.closing__more a { color: var(--ink); font-weight: 600; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* MLI estimator: hand the result to the contact form */
.calc__send { display: grid; gap: 8px; margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
.calc__send .btn { justify-self: start; }
.calc__send p { margin: 0; font-size: .92rem; color: #cfd8e2; }

/* focus on the dark hero photo uses the yellow ring */
.on-photo { --focus: var(--yellow); }

/* Audits: the AODA reporting deadline, under the hero */
.deadline { display: grid; gap: 14px 24px; align-items: center; margin-top: clamp(18px, 2.4vw, 28px); padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px); border-radius: var(--r-lg);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .5), transparent 55%), linear-gradient(120deg, #fff1c4, #ffe0a8); box-shadow: var(--raise); }
@media (min-width: 900px) { .deadline { grid-template-columns: auto minmax(0, 1fr) auto; } }
.deadline__date { place-content: center; gap: 2px; width: 100px; height: 100px; text-align: center; }
.deadline__date > span { position: relative; z-index: 1; display: block; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); font: 500 .82rem/1.1 var(--label); }
.deadline__date b { display: block; font: 600 1.15rem/1.1 var(--display); white-space: nowrap; }
.deadline p { margin: 0; max-width: 70ch; }
.deadline__links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.t-lead a { color: inherit; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* mock-ups that show scores or results are labelled as examples */
.ex-tag { position: absolute; z-index: 3; top: 12px; left: 12px; padding: 3px 10px; border-radius: 999px; font: 600 .72rem/1.4 var(--label); letter-spacing: .02em; color: var(--ink); background: rgba(255, 253, 248, .86); box-shadow: 0 1px 0 #fff inset, 0 2px 6px -2px rgba(20, 32, 46, .3); }
.vig .ex-tag { top: 3%; left: auto; right: 3%; font-size: .68em; }

/* Education audience cards: real photos, cropped to the card */
.scene-stage--photo { background: var(--paper-2); }
.scene-stage--photo img { object-fit: cover; object-position: var(--pos, 50% 50%); }

/* contact: one short form */
.contact__form { display: grid; gap: 18px; }
.contact__form > h2 { margin: 0; }

/* header FAQ panel, simplified: common questions, a search, an optional ask box, two links */
.faq-panel__head { align-items: center; padding-bottom: 10px; }
.faq-panel__head h2 { margin: 0; font-size: 1.25rem; }
.faq-panel__tools { border-bottom: 0; padding-bottom: 6px; }
.faq-panel__label { margin: 0; padding: 8px 20px 0; font: 600 .8rem/1.4 var(--label); color: var(--orange-ink); }
.faq-panel__list { max-height: 46vh; }
.faq-panel__ask { padding: 0 20px; border-top: 1px solid var(--line); background: var(--paper); }
.faq-panel__ask > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 700; }
.faq-panel__ask > summary::-webkit-details-marker { display: none; }
.faq-panel__ask > summary::after { content: "+"; font: 500 1.2rem/1 var(--font); color: var(--ink-2); transition: transform .3s var(--ease-out); }
.faq-panel__ask[open] > summary::after { transform: rotate(45deg); }
.faq-panel__ask form { margin-bottom: 4px; }
.faq-panel__row input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(20, 32, 46, .16); background: #fff; font: inherit; }
.faq-panel__row input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27, 94, 155, .22); }
.faq-panel__foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.faq-panel__foot a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 20px; font-weight: 700; color: var(--ink); text-decoration: none; }
.faq-panel__foot a + a { border-left: 1px solid var(--line); }
.faq-panel__foot a:hover { background: var(--paper-2); }
.faq-panel__foot .ic { width: 18px; height: 18px; }

/* home tour: a quiet way to stop it, only while it plays */
.explorer__pause { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--porcelain); box-shadow: var(--key); font: 600 .8rem/1.2 var(--label); color: var(--ink-2); }
.explorer__pause:hover { color: var(--ink); }
.explorer__pause .ic { width: 14px; height: 14px; }
.explorer__pause[hidden] { display: none; }

/* 404: three ways forward */
.notfound { list-style: none; margin: 0; padding: 0; }
.notfound > li { display: flex; }
.notfound__more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: clamp(28px, 3vw, 40px) 0 0; }

/* ---- Header panels (Display settings, Questions): one shared frame ----
   Same width, a title with a one-line note and a round close button, orange section labels,
   and a two-part footer bar. Each panel only styles what's inside its body. */
.hpanel { width: min(420px, calc(100vw - 32px)); padding: 0; display: flex; flex-direction: column; }
.hpanel__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 14px; }
.hpanel__head h2 { margin: 0; font: 600 1.25rem/1.2 var(--display); letter-spacing: -.015em; }
.hpanel__head h2:focus { outline: none; }
.hpanel__head p { margin: 4px 0 0; font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.hpanel__close { margin-left: auto; width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(20, 32, 46, .12); background: var(--porcelain); box-shadow: var(--key); font-size: 1.2rem; line-height: 1; color: var(--ink); }
.hpanel__close:hover { background: #fff; }
.hpanel__body { padding: 0 20px 14px; }
.hpanel__label { margin: 0 0 8px; padding: 0; font: 600 .8rem/1.4 var(--label); letter-spacing: .02em; color: var(--orange-ink); }
.hpanel__foot { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; border-top: 1px solid var(--line); }
.hpanel__foot > a, .hpanel__foot > button { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 20px; border: 0; background: none; cursor: pointer;
  font: 700 .95rem/1.2 var(--font); color: var(--ink); text-align: left; text-decoration: none; }
.hpanel__foot > * + * { border-left: 1px solid var(--line); }
.hpanel__foot > a:hover, .hpanel__foot > button:hover { background: var(--paper-2); }
.hpanel__foot .ic { width: 18px; height: 18px; flex: none; }
/* Display panel body */
.prefs.hpanel .prefs__group { margin: 0 0 6px; }
.prefs.hpanel .switch:last-child { padding-bottom: 4px; }
/* Questions panel body keeps its own search, list and ask box, on the shared padding */
.faq-panel.hpanel .faq-panel__label { padding: 8px 20px 0; margin: 0; }

/* Every RHFAC circle is the same: the blue orb with "RHFAC" centred in white.
   (Selectors are specific enough to beat card rules such as .cred span, which restyle any span inside.) */
span.orb.orb--seal { display: grid; place-items: center; color: #fff; font-size: 1rem; }
span.orb.orb--seal > .orb__mark { display: block; color: #fff; font: 700 22cqw/1 var(--label); letter-spacing: .01em; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }