/* ==========================================================================
   Quality Excellence Services — website stylesheet
   1. tokens · 2. base · 3. components · 4. sections · 5. responsive · 6. print
   Every value below comes from the QES design system. Change a token in
   section 1 and it changes everywhere.
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */

:root, [data-theme="light"] {
  --surface-000:#ffffff; --surface-100:#f8f7f4; --surface-200:#efede8;
  --surface-300:#e2dfd8; --surface-inverse:#101828;
  --ink:#101828; --ink-muted:#555e6e; --ink-subtle:#616978;
  --ink-inverse:#f8f7f4; --ink-on-brand:#ffffff; --ink-on-accent:#ffffff;
  /* brand: the ink anchor for bands and buttons; link: azure for anything clickable */
  --brand:#101828; --brand-hover:#3c4453; --brand-tint:#e7f9ff;
  --link:#005cbc; --link-hover:#00428f;
  --accent:#dc0080; --accent-hover:#af0064; --accent-ink:#af0064; --accent-tint:#ffedf8;
  --conform:#1f6b45; --conform-tint:#dcefe3;
  --observation:#8a5a05; --observation-tint:#f7ecd5;
  --nonconformance:#a32820; --nonconformance-tint:#f7e2e0;
  --line-hairline:#dcd9d2; --line-strong:#858b96; --line-focus:#0079e4;
  /* the three brand hues, each with a text step, a tint and the ink that sits on it.
     They also stand for the regulatory families: US (FDA) · international (ISO) · EU. */
  --sunflower:#ffc600; --sunflower-ink:#755904; --sunflower-tint:#fff4bb; --ink-on-sunflower:#101828;
  --fuchsia:#dc0080; --fuchsia-ink:#af0064; --fuchsia-tint:#ffedf8; --ink-on-fuchsia:#ffffff;
  --azure:#0087f5; --azure-ink:#005cbc; --azure-tint:#e7f9ff; --ink-on-azure:#101828;
  /* chart steps: validated for lightness band, chroma floor, CVD separation and 3:1 */
  --chart-us:#997200; --chart-intl:#0079e4; --chart-eu:#fe2c9b;
  /* brand hexes at full strength: the logo, gradients, decoration. Never text. */
  --brand-sunflower:#ffc600; --brand-fuchsia:#ee008e; --brand-azure:#0087f5;
  --gradient-daybreak:linear-gradient(135deg, #0087f5 0.0%, #6375ff 9.0%, #9161f9 18.0%, #b74ce4 27.0%, #d633bf 36.0%, #ee008e 45.0%, #ff406b 53.0%, #ff6f56 61.0%, #ff9049 69.0%, #ffac3f 77.0%, #ffc600 85.0%, #ffc600 100%);
  --gradient-sunrise:linear-gradient(90deg, #ffc600 0.0%, #ffac3f 20.0%, #ff9049 40.0%, #ff6f56 60.0%, #ff406b 80.0%, #ee008e 100%);
  --gradient-horizon:linear-gradient(90deg, #ee008e 0.0%, #d633bf 20.0%, #b74ce4 40.0%, #9161f9 60.0%, #6375ff 80.0%, #0087f5 100%);
  --gradient-spectrum:linear-gradient(90deg, #0087f5 0.0%, #6375ff 10.0%, #9161f9 20.0%, #b74ce4 30.0%, #d633bf 40.0%, #ee008e 50.0%, #ff406b 60.0%, #ff6f56 70.0%, #ff9049 80.0%, #ffac3f 90.0%, #ffc600 100%);
  --scrim:rgba(8,12,22,.62);
  --shadow-none:none;
  --shadow-raised:0 1px 2px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.05);
  --shadow-overlay:0 8px 28px rgba(16,24,40,.14);
}

[data-theme="dark"] {
  --surface-000:#141c2e; --surface-100:#0b1120; --surface-200:#1b2537;
  --surface-300:#26314a; --surface-inverse:#05080f;
  --ink:#f3f5f9; --ink-muted:#b4bdcc; --ink-subtle:#98a2b3;
  --ink-inverse:#f3f5f9; --ink-on-brand:#ffffff; --ink-on-accent:#101828;
  /* brand: the ink anchor for bands and buttons; link: azure for anything clickable */
  --brand:#1b2744; --brand-hover:#243357; --brand-tint:#16233d;
  --link:#8ac9ff; --link-hover:#b5dfff;
  --accent:#ffc600; --accent-hover:#ffd22b; --accent-ink:#ffd22b; --accent-tint:#2c2410;
  --conform:#5cc08a; --conform-tint:#152a20;
  --observation:#e0a94a; --observation-tint:#2e2413;
  --nonconformance:#f08a80; --nonconformance-tint:#33191a;
  --line-hairline:#2c3649; --line-strong:#6b7589; --line-focus:#8ac9ff;
  /* the three brand hues, each with a text step, a tint and the ink that sits on it.
     They also stand for the regulatory families: US (FDA) · international (ISO) · EU. */
  --sunflower:#ffc600; --sunflower-ink:#ffd22b; --sunflower-tint:#2c2410; --ink-on-sunflower:#101828;
  --fuchsia:#ff6ab3; --fuchsia-ink:#ff9cc9; --fuchsia-tint:#3a1027; --ink-on-fuchsia:#101828;
  --azure:#56b1ff; --azure-ink:#8ac9ff; --azure-tint:#10243f; --ink-on-azure:#101828;
  /* chart steps: validated for lightness band, chroma floor, CVD separation and 3:1 */
  --chart-us:#bb8c00; --chart-intl:#0596ff; --chart-eu:#fe2c9b;
  --scrim:rgba(3,6,12,.68);
  --shadow-raised:0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --shadow-overlay:0 8px 28px rgba(0,0,0,.6);
}

/* Dark bands (the hero, page heads, the stats band, feature cards, the footer,
   tooltips): the accent turns to Sunflower and links to light azure, so every
   highlight on a dark ground stays above 4.5:1 without a second set of classes. */
.topbar, .hero, .band, .stats, .card--feature, .card--photo, .finding--photo, .rwcase__fig--photo, .pagehead, .site-footer, .htip, .pyramid__tier--2,
.pyramid__tier--3, .tier--featured, .webinar {
  --accent:var(--brand-sunflower); --accent-hover:#ffd22b;
  --accent-ink:#ffd22b; --ink-on-accent:#101828;
  --link:#8ac9ff; --link-hover:#b5dfff;
}

.credcard {  /* a light card inside the dark hero takes the light values back */
  --accent:#dc0080; --accent-hover:#af0064; --accent-ink:#af0064;
  --ink-on-accent:#ffffff; --link:#005cbc; --link-hover:#00428f;
}


:root {
  --space-1:4px;  --space-2:8px;   --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px;  --space-8:32px; --space-10:40px;
  --space-12:48px;--space-16:64px; --space-20:80px;--space-24:96px;
  --space-32:128px;
  --radius-none:0; --radius-xs:2px; --radius-sm:4px;
  --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --border-hairline:1px; --border-focus:2px; --border-rule:3px;
  --layout-page-max:1200px; --layout-measure:64ch; --layout-measure-narrow:48ch;
  --layout-hero-min:620px;
  --font-sans: Afacad, "Segoe UI", system-ui, -apple-system, sans-serif;
}


/* ── 2. BASE ───────────────────────────────────────────────────────────── */

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body {
  margin:0;
  background:var(--surface-100);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px; line-height:27px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,p,figure,blockquote,ul,ol { margin:0; }
ul { padding:0; list-style:none; }
img { display:block; max-width:100%; }
a { color:var(--link); }
a:hover { color:var(--link-hover); }

h1 { font-size:72px; line-height:68px; font-weight:600; letter-spacing:-.025em; }
h2 { font-size:48px; line-height:50px; font-weight:600; letter-spacing:-.02em; }
h3 { font-size:21px; line-height:27px; font-weight:600; }

.body-l { font-size:20px; line-height:31px; }

.eyebrow {
  font-size:12px; line-height:16px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink);
}
.eyebrow--onDark { color:var(--accent); }

:focus-visible {
  outline:var(--border-focus) solid var(--line-focus);
  outline-offset:var(--border-focus);
  border-radius:var(--radius-xs);
}

.skip-link {
  position:absolute; left:var(--space-4); top:-100px; z-index:100;
  background:var(--brand); color:var(--ink-on-brand);
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-sm);
  font-weight:600; text-decoration:none;
}
.skip-link:focus { top:var(--space-4); }

.wrap {
  max-width:var(--layout-page-max);
  margin-inline:auto;
  padding-inline:var(--space-6);
}


/* ── 3. COMPONENTS ─────────────────────────────────────────────────────── */

/* --- the logo -----------------------------------------------------------
   The Daybreak Q: the globe is the Q, its band and tail drawn at the weight of
   Afacad Bold's own stems so it sits in "QES" as a letter. Inline SVG, so it
   never waits on a file; colors are baked in (the mark is the brand, not a
   themeable icon). */
.brandmark__logo { display:block; height:40px; width:auto; flex:none; }
.site-footer__logo { display:block; height:56px; width:auto; }

/* --- buttons ------------------------------------------------------------ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-sans); font-size:15px; line-height:19px; font-weight:600;
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-sm);
  border:var(--border-hairline) solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.btn--lg    { font-size:17px; line-height:22px; padding:var(--space-4) var(--space-8); }
.btn--block { width:100%; }
.btn--primary   { background:var(--brand); color:var(--ink-on-brand); }
.btn--primary:hover  { background:var(--brand-hover); color:var(--ink-on-brand); }
.btn--accent    { background:var(--accent); color:var(--ink-on-accent); }
.btn--accent:hover   { background:var(--accent-hover); color:var(--ink-on-accent); }
.btn--ghost     { background:transparent; color:var(--ink-inverse); border-color:rgba(247,245,241,.55); }
.btn--ghost:hover    { background:rgba(247,245,241,.12); border-color:var(--ink-inverse); color:var(--ink-inverse); }
.btn--secondary { background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--secondary:hover{ background:var(--brand-tint); border-color:var(--brand); }

/* --- section head ------------------------------------------------------- */
.head { display:grid; gap:var(--space-4); }
.head--center { justify-items:center; text-align:center; margin-bottom:var(--space-16); }
.head--center .head__lead { max-width:62ch; }
.head__lead { font-size:20px; line-height:31px; color:var(--ink-muted); max-width:var(--layout-measure); }
.head .eyebrow { display:flex; align-items:center; gap:var(--space-3); }
.head .eyebrow::after { content:""; height:var(--border-rule); width:40px; background:var(--gradient-sunrise); }
.head--center .eyebrow::before { content:""; height:var(--border-rule); width:40px; background:var(--gradient-horizon); }

/* --- bullet list ---------------------------------------------------------
   The bullet is a short sunrise dash, not a check: nothing in this brand
   says quality is a box ticked. */
.ticks { display:grid; gap:var(--space-3); }
.ticks--two { grid-template-columns:1fr 1fr; gap:var(--space-2) var(--space-6); margin-top:var(--space-4); }
.ticks li {
  position:relative; padding-left:var(--space-6);
  font-size:15px; line-height:23px; color:var(--ink-muted);
}
.ticks li::before {
  content:""; position:absolute; left:0; top:10px;
  width:12px; height:3px; border-radius:2px;
  background:var(--gradient-sunrise);
}

/* --- cards -------------------------------------------------------------- */
.cards {
  display:grid; gap:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
}
.cards--3 { grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); }
.card {
  background:var(--surface-000);
  border:var(--border-hairline) solid var(--line-hairline);
  border-radius:var(--radius-md);
  padding:var(--space-8);
  display:grid; gap:var(--space-4); align-content:start;
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.card:hover { box-shadow:var(--shadow-raised); transform:translateY(-2px); border-color:var(--line-strong); }
.card__icon {
  display:grid; place-items:center;
  width:52px; height:52px; flex:none;
  border-radius:var(--radius-pill);
  background:var(--brand-tint); color:var(--ink);
}
.card p { color:var(--ink-muted); }
.card__kicker {
  font-size:12px; line-height:16px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-ink);
}
.card__foot {
  border-top:var(--border-hairline) solid var(--line-hairline);
  padding-top:var(--space-4); font-size:15px; line-height:23px; color:var(--ink-subtle) !important;
}
.card--feature { background:var(--brand); border-color:var(--brand); }
.card--feature h3, .card--feature p { color:var(--ink-on-brand); }
.card--feature p { opacity:.86; }
.card--feature .card__kicker { color:var(--accent-ink); opacity:1; }
/* accent-tint, not accent: brass on brand is 3.3:1 in Document and 1.1:1 in
   Console, because Console's brand is the light step. The tint inverts with the
   theme and holds 9.6:1 and 6.7:1. */
.card--feature .card__foot { border-top-color:rgba(255,255,255,.22); color:var(--ink-on-brand) !important; opacity:.78; }
[data-theme="dark"] .card--feature .card__foot { border-top-color:rgba(0,0,0,.28); }

/* --- callout ------------------------------------------------------------ */
.callout {
  display:flex; gap:var(--space-4);
  background:var(--accent-tint);
  border-radius:var(--radius-md);
  padding:var(--space-5);
  margin-top:var(--space-2);
}
.callout__icon { color:var(--accent-ink); flex:none; line-height:0; margin-top:2px; }
.callout__title { font-size:17px; line-height:23px; font-weight:600; margin-bottom:var(--space-1); }
.callout p { font-size:15px; line-height:23px; color:var(--ink-muted); }

/* --- the documentation pyramid -------------------------------------------
   One triangle, cut into four bands: three tiers of documents and the records
   that prove them. The figure is clipped once, as a whole, so every band's
   edge lies on the same two lines at any width, and the 3px gaps are the page
   showing through. Each band names its tier and the one question it answers;
   the numbered key beside it carries the examples. */
.pyramid {
  width:min(460px,100%); aspect-ratio:480/380; margin-inline:auto;
  display:grid; grid-template-rows:40fr 20fr 20fr 20fr; row-gap:3px;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.pyramid__tier {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2px var(--space-4); min-height:0;
}
.pyramid__tier strong { font-size:15px; line-height:18px; font-weight:600; }
.pyramid__tier span   { font-size:11.5px; line-height:15px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.9; }
.pyramid__tier--1 { justify-content:flex-end; padding-bottom:var(--space-2); background:var(--accent); color:var(--ink-on-accent); }
.pyramid__tier--1 span { opacity:1; }
.pyramid__tier--2 { background:var(--brand); color:var(--ink-on-brand); }
.pyramid__tier--3 { background:var(--brand-hover); color:var(--ink-on-brand); }
.pyramid__tier--4 { background:var(--surface-300); color:var(--ink); }

.pyrkey { display:grid; gap:var(--space-3); }
.pyrkey li {
  display:grid; grid-template-columns:36px 1fr; gap:var(--space-4); align-items:start;
  padding:var(--space-4) var(--space-5); background:var(--surface-100);
  border:var(--border-hairline) solid var(--line-hairline); border-radius:var(--radius-md);
}
.pyrkey__n {
  width:36px; height:36px; border-radius:var(--radius-pill); display:grid; place-items:center;
  font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
}
.pyrkey li:nth-child(1) .pyrkey__n { background:var(--accent); color:var(--ink-on-accent); }
.pyrkey li:nth-child(2) .pyrkey__n { background:var(--brand); color:var(--ink-on-brand); }
.pyrkey li:nth-child(3) .pyrkey__n { background:var(--brand-hover); color:var(--ink-on-brand); }
.pyrkey li:nth-child(4) .pyrkey__n { background:var(--surface-300); color:var(--ink); }
.pyrkey__head { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-1) var(--space-3); }
.pyrkey__head strong { font-size:17px; line-height:24px; font-weight:600; color:var(--ink); }
.pyrkey__head em { font-style:normal; font-size:11.5px; line-height:16px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
.pyrkey__who { font-size:13px !important; line-height:19px !important; font-weight:600; color:var(--ink) !important; margin-top:2px; }
.pyrkey p { font-size:15px; line-height:23px; color:var(--ink-muted); }

/* --- quotes ------------------------------------------------------------- */
.quotes { display:grid; gap:var(--space-8); grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); margin-top:var(--space-16); }
.quote { border-left:var(--border-rule) solid var(--accent); padding-left:var(--space-6); }
.quote blockquote { font-size:22px; line-height:33px; font-style:italic; font-weight:400; }
.quote figcaption { font-size:15px; line-height:23px; color:var(--ink-muted); margin-top:var(--space-4); }
.quote figcaption strong { color:var(--ink); font-weight:600; }


/* ── 4. SECTIONS ───────────────────────────────────────────────────────── */

/* --- credential bar ----------------------------------------------------- */
.topbar { background:var(--surface-inverse); color:var(--ink-inverse); }
.topbar__inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-6); flex-wrap:wrap;
  padding-block:var(--space-2);
  font-size:13px; line-height:20px;
}
.topbar__creds { display:flex; gap:var(--space-5); flex-wrap:wrap; opacity:.82; }
.topbar__creds span { position:relative; }
.topbar__creds span + span::before {
  content:""; position:absolute; left:calc(var(--space-5) / -2); top:50%;
  width:3px; height:3px; border-radius:50%; background:var(--accent); transform:translateY(-50%);
}
.topbar__contact { display:flex; gap:var(--space-2); font-weight:600; white-space:nowrap; }
.topbar__contact a { color:var(--ink-inverse); text-decoration:none; }
.topbar__contact a:hover { text-decoration:underline; text-underline-offset:3px; }

/* --- header ------------------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:var(--surface-000);
  border-bottom:var(--border-hairline) solid var(--line-hairline);
  transition:box-shadow .16s ease;
}
.site-header--scrolled { box-shadow:var(--shadow-raised); }
.site-header__inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-8); padding-block:var(--space-3);
}
.brandmark { display:flex; align-items:center; gap:var(--space-3); text-decoration:none; }
.brandmark__words { display:grid; gap:2px; }
.brandmark__name {
  font-size:10px; line-height:1.3; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted);
  white-space:nowrap;
}
.brandmark { flex:none; }

.site-nav { display:flex; align-items:center; gap:var(--space-6); }
.site-nav > * { flex:none; }        /* a nav label never wraps to two lines */
.site-nav a:not(.btn) {
  font-size:15px; line-height:19px; font-weight:600;
  color:var(--ink-muted); text-decoration:none;
  padding-block:var(--space-3); white-space:nowrap;
  border-bottom:var(--border-focus) solid transparent;
}
.site-nav a:not(.btn):hover { color:var(--link); }
.site-nav a:not(.btn).is-current { color:var(--ink); border-bottom-color:var(--accent); }

.nav-toggle {
  display:none; place-items:center;
  width:44px; height:44px; padding:0;
  background:transparent; color:var(--ink);
  border:var(--border-hairline) solid var(--line-strong);
  border-radius:var(--radius-sm); cursor:pointer;
}

/* --- hero --------------------------------------------------------------- */
.hero { position:relative; isolation:isolate; min-height:var(--layout-hero-min); display:grid; align-items:center; }
.hero__img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2;
}
.hero__scrim {
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    rgba(12,17,30,.90) 0%, rgba(12,17,30,.82) 38%,
    rgba(12,17,30,.58) 68%, rgba(12,17,30,.40) 100%);
}
.hero__inner {
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:var(--space-16); align-items:center;
  padding-block:var(--space-32);
  color:var(--ink-inverse);
}
.hero__copy { display:grid; gap:var(--space-6); max-width:17ch; }
.hero__copy h1 { color:var(--ink-inverse); }
.hero__lead { font-size:20px; line-height:31px; color:var(--ink-inverse); opacity:.9; max-width:52ch; }
.hero__copy > .hero__lead, .hero__copy > .hero__actions { max-width:none; }
.hero__copy { max-width:none; }
.hero__copy h1 { max-width:16ch; }
.hero__actions { display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-2); }

.credcard {
  background:var(--surface-000);
  border-radius:var(--radius-lg);
  padding:var(--space-8);
  box-shadow:var(--shadow-overlay);
  display:grid; gap:var(--space-4); justify-items:start;
  color:var(--ink);
}
.credcard__seal { width:92px; height:92px; }
.credcard__lede { font-size:21px; line-height:27px; font-weight:600; }
.credcard__list { display:grid; gap:var(--space-3); }
.credcard__list li {
  font-size:15px; line-height:22px; color:var(--ink-muted);
  padding-top:var(--space-3);
  border-top:var(--border-hairline) solid var(--line-hairline);
}
.credcard__list li:first-child { border-top:0; padding-top:0; }
.credcard__list strong { color:var(--ink); font-weight:600; }

/* --- standards strip ---------------------------------------------------- */
.standards { background:var(--surface-000); border-bottom:var(--border-hairline) solid var(--line-hairline); }
.standards__inner {
  display:flex; align-items:center; gap:var(--space-10); flex-wrap:wrap;
  padding-block:var(--space-6);
}
.standards__label {
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--ink-subtle); flex:none;
}
.standards__list { display:flex; gap:var(--space-8); flex-wrap:wrap; }
.standards__list li {
  font-size:17px; font-weight:600; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--ink-muted);
}

/* --- stats -------------------------------------------------------------- */
.stats { background:var(--brand); color:var(--ink-on-brand); }
.stats__grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:var(--space-10); padding-block:var(--space-16);
}
.stat { display:grid; gap:var(--space-2); align-content:start; }
.stat__figure {
  font-size:48px; line-height:50px; font-weight:600; letter-spacing:-.02em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.stat__label { font-size:17px; line-height:24px; font-weight:600; }
.stat__note  { font-size:14px; line-height:21px; opacity:.72; max-width:32ch; }

/* --- generic section ---------------------------------------------------- */
.section { padding-block:var(--space-24); }
.section--alt { background:var(--surface-000); border-block:var(--border-hairline) solid var(--line-hairline); }

/* --- split -------------------------------------------------------------- */
.split {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--space-20); align-items:stretch;
}
.split--reverse .split__media { order:2; }
.split__media {
  border-radius:var(--radius-lg); overflow:hidden;
  min-height:480px; background:var(--surface-200);
}
.split__media img { width:100%; height:100%; object-fit:cover; }

/* ── generated artwork ──────────────────────────────────────────────────── */
/* The illustrations are inline SVG, not <img>. Nothing to fetch means nothing
   that can fail to arrive — no host to block, no sibling file to lose, no data
   URI for a viewer's content policy to refuse. `slice` is what object-fit:cover
   is called inside an SVG. */
svg.art { display:block; width:100%; height:100%; }

/* Light type over a drawing gets a shadow as well as a dark ground. The ground
   does the work; the shadow is insurance for the one pixel that is lighter than
   the rest, and it costs nothing. Kept tight and low-opacity so it reads as
   weight rather than as a glow. */
.hero__copy, .band__quote, .pagehead__copy,
.hero__copy h1, .hero__lead, .band blockquote, .pagehead h1, .pagehead__lead {
  text-shadow:0 1px 2px rgba(5,9,15,.55), 0 2px 12px rgba(5,9,15,.35);
}
.hero__copy .btn, .band .btn, .pagehead .btn { text-shadow:none; }
/* The drawing already carries the directional gradient that keeps the left
   third calm. The hero's own scrim would be a second one stacked on it, which
   is the mistake this system has made before — so it stands down. */
svg.art.hero__img + .hero__scrim, svg.art.band__img + .band__scrim { display:none; }
.split__media svg.art { min-height:480px; }
.split__copy { display:grid; gap:var(--space-5); align-content:center; }
.split__copy h2 { font-size:40px; line-height:44px; }
.split__copy p { color:var(--ink-muted); max-width:var(--layout-measure); }
.split__copy .body-l { color:var(--ink); }

/* --- framework ---------------------------------------------------------- */
.framework {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--space-20); align-items:center;
  margin-top:var(--space-24);
  padding-top:var(--space-16);
  border-top:var(--border-hairline) solid var(--line-hairline);
}
.framework__copy { display:grid; gap:var(--space-4); align-content:start; }
.framework__copy h3 { font-size:28px; line-height:34px; letter-spacing:-.01em; }
.framework__copy p { color:var(--ink-muted); }
.framework__figure { display:grid; justify-items:center; gap:var(--space-5); }
.framework__figure figcaption {
  font-size:13px; line-height:18px; color:var(--ink-subtle);
  text-align:center; max-width:44ch;
}

/* --- image band with quote ---------------------------------------------- */
.band { position:relative; isolation:isolate; display:grid; align-items:center; min-height:420px; }
.band__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.band__scrim {
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(12,17,30,.78) 0%, rgba(12,17,30,.66) 50%, rgba(12,17,30,.80) 100%);
}
.band__quote { padding-block:var(--space-24); color:var(--ink-inverse); text-align:center; }
.band__quote p {
  font-size:36px; line-height:48px; font-style:italic; font-weight:400;
  max-width:26ch; margin-inline:auto; letter-spacing:-.01em;
}
.band__quote cite { display:block; margin-top:var(--space-8); font-style:normal; font-size:15px; opacity:.82; }
.band__quote cite strong { font-weight:600; opacity:1; }

/* --- contact ------------------------------------------------------------ */
.contact-section { background:var(--brand-tint); }
.contact { display:grid; grid-template-columns:1fr minmax(360px,.85fr); gap:var(--space-20); align-items:start; }
.contact__copy { display:grid; gap:var(--space-5); align-content:start; }
.contact__copy h2 { font-size:40px; line-height:44px; }
.contact__copy .body-l { color:var(--ink-muted); max-width:var(--layout-measure); }

.firstvisit {
  background:var(--surface-000);
  border-left:var(--border-rule) solid var(--accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--space-5) var(--space-6);
}
.firstvisit__title { font-weight:600; margin-bottom:var(--space-1); }
.firstvisit p { font-size:15px; line-height:23px; color:var(--ink-muted); }

.contact__list { display:grid; gap:var(--space-4); margin-top:var(--space-2); }
.contact__list li { display:flex; align-items:center; gap:var(--space-3); }
.contact__list a { color:var(--ink); text-decoration:none; font-weight:600; }
.contact__list a:hover { color:var(--link); text-decoration:underline; text-underline-offset:3px; }
.contact__icon { color:var(--link); line-height:0; flex:none; }
.contact__meta { color:var(--ink-muted); font-size:15px; }   /* ink-subtle is 4.4:1 on brand-tint */

.contact__form {
  display:grid; gap:var(--space-5);
  background:var(--surface-000);
  border-radius:var(--radius-lg);
  padding:var(--space-10);
  box-shadow:var(--shadow-raised);
}
.form__title { font-size:21px; line-height:27px; font-weight:600; }
.field { display:grid; gap:var(--space-2); }
.field label { font-size:15px; line-height:19px; font-weight:600; }
.field input, .field textarea {
  font-family:var(--font-sans); font-size:17px; line-height:26px;
  color:var(--ink); background:var(--surface-000);
  border:var(--border-hairline) solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4);
  width:100%; resize:vertical;
}
.field input::placeholder, .field textarea::placeholder { color:var(--ink-subtle); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color:var(--nonconformance); }
.field__error { font-size:14px; line-height:20px; color:var(--nonconformance); font-weight:600; }
.field__note  { font-size:15px; line-height:23px; color:var(--conform); font-weight:600; min-height:23px; }

/* --- footer ------------------------------------------------------------- */
.site-footer { background:var(--surface-inverse); color:var(--ink-inverse); padding-block:var(--space-16) var(--space-8);
               border-top:4px solid transparent; border-image:var(--gradient-spectrum) 1; }
.site-footer a { color:var(--ink-inverse); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; text-underline-offset:3px; }
.site-footer__top {
  display:grid;
  grid-template-columns:minmax(300px,1.35fr) repeat(3,minmax(0,1fr));
  gap:var(--space-16) var(--space-10);
}

/* The identity column: mark, name, and every way of reaching QES, together.
   A footer's real job is to be the place the phone number is — separating the
   contact detail from the lockup put it at the far end of the row, which is the
   last place anyone looks. */
.site-footer__ident { display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-4); align-content:start; }
.site-footer__ident > .site-footer__logo { grid-column:1 / -1; }
.site-footer__words { grid-column:1 / -1; }
.site-footer__name { font-size:10px; line-height:1.4; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--accent); margin-top:var(--space-1); }
.site-footer__tag { font-size:14px; line-height:1.5; opacity:.78; margin-top:var(--space-1); }

.site-footer__contact {
  grid-column:1 / -1; font-style:normal;
  display:grid; gap:var(--space-2); margin-top:var(--space-5);
}
.site-footer__line {
  display:grid; grid-template-columns:76px 1fr; gap:var(--space-3);
  font-size:15px; line-height:23px; align-items:baseline;
}
.site-footer__line > span:first-child {
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); opacity:.9;
}
a.site-footer__line { text-decoration:none; }
a.site-footer__line:hover { text-decoration:none; }
a.site-footer__line:hover > span:first-child { opacity:1; }

.site-footer__creds {
  grid-column:1 / -1; margin-top:var(--space-5); padding-top:var(--space-4);
  border-top:var(--border-hairline) solid rgba(255,255,255,.16);
  font-size:12.5px; line-height:20px; opacity:.62; max-width:46ch;
}

/* The three link columns. Every industry is listed: a footer is where somebody
   who does not know the word for what they do goes looking for their own. */
.site-footer__col ul { display:grid; gap:var(--space-2); }
.site-footer__head {
  font-size:11px; line-height:16px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:var(--space-4);
}
.site-footer__col a { font-size:14.5px; line-height:21px; opacity:.86; }
.site-footer__col a:hover { opacity:1; }

.site-footer__legal {
  margin-top:var(--space-12); padding-top:var(--space-5);
  border-top:var(--border-hairline) solid rgba(255,255,255,.16);
  display:flex; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap;
  font-size:13px; line-height:20px; opacity:.6;
}
.site-footer__legal .credits a { text-decoration:underline; text-underline-offset:2px; }


/* ── 5. RESPONSIVE ─────────────────────────────────────────────────────── */

@media (max-width:1080px) {
  h1 { font-size:56px; line-height:56px; }
  h2 { font-size:38px; line-height:42px; }
  .hero__inner { grid-template-columns:1fr; gap:var(--space-12); padding-block:var(--space-24); }
  .credcard { max-width:460px; }
  .split, .framework, .contact { grid-template-columns:1fr; gap:var(--space-12); }
  .split--reverse .split__media { order:0; }
  .split__copy h2, .contact__copy h2 { font-size:34px; line-height:38px; }
  .band__quote p { font-size:30px; line-height:42px; }
  .site-footer__top { grid-template-columns:1fr 1fr; gap:var(--space-12) var(--space-10); }
  .site-footer__ident { grid-column:1 / -1; }
}

/* Seven links, a menu and a button need room. Between 1080 and 1280 the lockup
   gives it up — the QES logo still identifies the site, and the full name
   is one scroll away in the footer. Below 1080 the bar collapses to the sheet. */
@media (max-width:1280px) {
  .brandmark__name { display:none; }
  .site-nav { gap:var(--space-5); }
}

@media (max-width:1080px) {
  .nav-toggle { display:grid; }
  .site-header__inner { gap:var(--space-4); }
  .site-nav {
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:var(--space-2);
    background:var(--surface-000);
    border-bottom:var(--border-hairline) solid var(--line-hairline);
    box-shadow:var(--shadow-overlay);
    padding:var(--space-4) var(--space-6) var(--space-6);
    display:none;
    max-height:calc(100vh - 120px); overflow-y:auto;
  }
  .site-nav.is-open { display:flex; }
  .site-nav a:not(.btn) { padding-block:var(--space-4); border-bottom:none; }
}
@media (max-width:820px) {
  .topbar__creds span:nth-child(n+3) { display:none; }
  .section { padding-block:var(--space-16); }
  .head--center { margin-bottom:var(--space-10); }
  .ticks--two { grid-template-columns:1fr; }
  .site-footer__top { grid-template-columns:1fr; gap:var(--space-10); }
  .site-footer__line { grid-template-columns:70px 1fr; }
}

@media (max-width:560px) {
  body { font-size:16px; line-height:26px; }
  h1 { font-size:40px; line-height:42px; }
  h2, .split__copy h2, .contact__copy h2 { font-size:29px; line-height:33px; }
  .stat__figure { font-size:38px; line-height:40px; }
  .band__quote p { font-size:23px; line-height:33px; }
  .card, .contact__form { padding:var(--space-6); }
  .hero__actions .btn { width:100%; }
  .topbar__creds { display:none; }
  .topbar__inner { justify-content:center; }
  /* On a phone the triangle is narrow, so it stands taller and gives the apex
     more of the height: the apex words then sit where there is room for them. */
  .pyramid { aspect-ratio:480/440; grid-template-rows:42fr 19.33fr 19.33fr 19.33fr; }
  .pyramid__tier { padding-block:1px; }
  .pyramid__tier strong { font-size:13.5px; line-height:16px; }
  .pyramid__tier span   { font-size:10.5px; line-height:13px; }
}


/* ── 6. PRINT ──────────────────────────────────────────────────────────── */

@media print {
  .topbar, .site-header, .nav-toggle, .contact__form, .hero__actions, .skip-link { display:none; }
  body { background:#fff; font-size:11pt; line-height:16pt; }
  .hero, .band { min-height:0; color:var(--ink); }
  .hero__img, .band__img, .hero__scrim, .band__scrim, svg.art { display:none; }
  .hero__inner, .band__quote { color:var(--ink); padding-block:var(--space-8); }
  .hero__copy h1, .hero__lead { color:var(--ink); opacity:1; }
  .stats { background:#fff; color:var(--ink); }
  .stats__grid { padding-block:var(--space-8); }
  .section { padding-block:var(--space-8); break-inside:avoid; }
  .site-footer { background:#fff; color:var(--ink); }
  .site-footer__name { color:var(--accent-ink); }
  a { color:var(--ink); }
}


/* ══════════════════════════════════════════════════════════════════════════
   7. THE 2026 COMPLIANCE PAGE
   Domain palette in use: sunflower = FDA, azure = ISO, fuchsia = EU.
   Every hue is paired with its regime's NAME — the color is reinforcement,
   never the signal.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- per-regime theming: one class sets the hue for anything inside ------- */
/* --hue-chart is the same hue re-stepped for anything thin: data marks and the
   3px rules on cards. The UI step is tuned for fills and text and sunflower only
   reaches 2.1:1 there, which is under the 3:1 a rule or a mark has to clear.
   The chart step is the same hue at a level that passes, so one token serves
   both jobs and the sunflower restriction stops being a special case. */
.r-fda { --hue:var(--sunflower); --hue-ink:var(--sunflower-ink); --hue-tint:var(--sunflower-tint); --on-hue:var(--ink-on-sunflower); --hue-chart:var(--chart-us); }
.r-iso { --hue:var(--azure);     --hue-ink:var(--azure-ink);     --hue-tint:var(--azure-tint);     --on-hue:var(--ink-on-azure);     --hue-chart:var(--chart-intl); }
.r-eu  { --hue:var(--fuchsia); --hue-ink:var(--fuchsia-ink); --hue-tint:var(--fuchsia-tint); --on-hue:var(--ink-on-fuchsia); --hue-chart:var(--chart-eu); }
/* For content that belongs to no single regulator — QES's own analysis. */
.r-brand { --hue:var(--brand); --hue-ink:var(--ink); --hue-tint:var(--brand-tint); --on-hue:var(--ink-on-brand); --hue-chart:var(--brand); }

/* --- deadline strip ------------------------------------------------------ */
.deadlines { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:var(--space-6); }
.deadline {
  background:var(--surface-000);
  border:var(--border-hairline) solid var(--line-hairline);
  border-top:var(--border-rule) solid var(--hue-chart);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  padding:var(--space-6); display:grid; gap:var(--space-3); align-content:start;
}
.deadline__tag {
  display:inline-flex; align-items:center; gap:var(--space-2); justify-self:start;
  background:var(--hue-tint); color:var(--hue-ink);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-xs);
}
.deadline__tag::before { content:""; width:8px; height:8px; border-radius:var(--radius-pill); background:var(--hue-ink); }
.deadline__name { font-size:21px; line-height:27px; font-weight:600; }
.deadline__when {
  font-size:28px; line-height:32px; font-weight:600; letter-spacing:-.015em;
  color:var(--hue-ink); font-variant-numeric:tabular-nums;
}
.deadline__note { font-size:15px; line-height:23px; color:var(--ink-muted); }
.deadline__status {
  margin-top:var(--space-2); padding-top:var(--space-3);
  border-top:var(--border-hairline) solid var(--line-hairline);
  font-size:13px; line-height:19px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-subtle);
}

/* --- the cube ------------------------------------------------------------ */
.cubewrap { display:grid; grid-template-columns:minmax(300px,440px) 1fr; gap:var(--space-20); align-items:center; }
.cube { width:100%; height:auto; display:block; overflow:visible; }
.cube .tile { stroke:var(--surface-100); stroke-width:2.5; transition:opacity .18s ease; }
.section--alt .cube .tile { stroke:var(--surface-000); }
.cubeface { cursor:pointer; outline:none; }
.cubeface .tile { opacity:.42; }
.cubeface.is-active .tile, .cube:not(.has-active) .cubeface .tile { opacity:1; }
.cubeface:hover .tile { opacity:.82; }
.cubeface.is-active:hover .tile { opacity:1; }
.cubeface:focus-visible .tile { stroke:var(--line-focus); stroke-width:3.5; }

.cubepanel { display:grid; gap:var(--space-5); align-content:center; min-height:330px; }
.cubepanel__tag {
  justify-self:start; display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--hue-tint); color:var(--hue-ink);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-xs);
}
.cubepanel h3 { font-size:32px; line-height:36px; letter-spacing:-.015em; }
.cubepanel p { color:var(--ink-muted); max-width:52ch; }
.cubelegend { display:flex; gap:var(--space-2) var(--space-5); flex-wrap:wrap; margin-top:var(--space-8); font-size:13.5px; color:var(--ink-muted); }
.cubelegend span { display:inline-flex; align-items:center; gap:var(--space-2); }
.cubelegend i { width:14px; height:14px; border-radius:2px; display:block; }

/* --- reporting clock ----------------------------------------------------- */
.clock { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:var(--space-6); }
.clock__item {
  background:var(--fuchsia-tint); border-radius:var(--radius-md);
  padding:var(--space-6); display:grid; gap:var(--space-2); align-content:start;
}
.clock__days {
  font-size:48px; line-height:48px; font-weight:600; letter-spacing:-.03em;
  color:var(--fuchsia-ink); font-variant-numeric:tabular-nums;
}
.clock__days small { font-size:17px; font-weight:600; letter-spacing:0; }
.clock__what { font-size:16px; line-height:24px; color:var(--ink); font-weight:600; }
.clock__ref { font-size:13px; line-height:19px; color:var(--ink-muted); letter-spacing:.02em; }

/* --- requirement table --------------------------------------------------- */
.reqtable { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.reqtable caption {
  text-align:left; font-size:13px; line-height:19px; color:var(--ink-subtle);
  padding-bottom:var(--space-3);
}
.reqtable th, .reqtable td {
  text-align:left; padding:var(--space-4);
  border-bottom:var(--border-hairline) solid var(--line-hairline);
  font-size:15px; line-height:23px;
}
.reqtable thead th {
  background:var(--surface-200); color:var(--ink);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:var(--border-hairline) solid var(--line-strong);
}
.reqtable td:first-child { font-weight:600; white-space:nowrap; }
.reqtable td { color:var(--ink-muted); }
.reqtable tbody tr:last-child td { border-bottom:0; }

/* --- change list --------------------------------------------------------- */
.changes { display:grid; gap:var(--space-5); }
.change {
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-5);
  padding:var(--space-5) var(--space-6);
  background:var(--surface-000);
  border:var(--border-hairline) solid var(--line-hairline);
  border-left:var(--border-rule) solid var(--hue-chart);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.change__clause {
  font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--hue-ink);
  white-space:nowrap; padding-top:3px; font-variant-numeric:tabular-nums;
  min-width:92px;   /* so "Clause 4" and "Clauses 8-10" start their text alike */
}
.change__what strong { display:block; font-size:17px; line-height:24px; margin-bottom:var(--space-1); }
.change__what p { font-size:15px; line-height:23px; color:var(--ink-muted); }

/* --- three questions ----------------------------------------------------- */
.questions { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:var(--space-8); }
.question { display:grid; gap:var(--space-4); align-content:start; }
.question__head { display:flex; align-items:center; gap:var(--space-4); }
.question__n {
  width:44px; height:44px; display:grid; place-items:center; border-radius:var(--radius-pill);
  background:var(--hue-tint); color:var(--hue-ink);
  font-size:17px; font-weight:600; font-variant-numeric:tabular-nums;
}
.question h3 { font-size:21px; line-height:28px; }
.question p { color:var(--ink-muted); font-size:16px; line-height:25px; }
.question__icon { color:var(--hue-ink); }

/* --- source note --------------------------------------------------------- */
.sources {
  margin-top:var(--space-12); padding-top:var(--space-5);
  border-top:var(--border-hairline) solid var(--line-hairline);
  font-size:13px; line-height:20px; color:var(--ink-muted);
}
.sources a { color:var(--ink-muted); text-decoration:underline; text-underline-offset:2px; }
.sources strong { color:var(--ink); }

@media (max-width:1080px) {
  .cubewrap { grid-template-columns:1fr; gap:var(--space-12); }
  .cubepanel { min-height:0; }
  .cube { max-width:380px; margin-inline:auto; }
}
@media (max-width:560px) {
  .clock__days { font-size:38px; line-height:40px; }
  .change { grid-template-columns:1fr; gap:var(--space-2); }
  .reqtable th, .reqtable td { padding:var(--space-3) var(--space-2); font-size:14px; }
  .reqtable td:first-child { white-space:normal; }
  .reqtable thead th { font-size:11px; letter-spacing:.06em; }
}


/* ══════════════════════════════════════════════════════════════════════════
   8. RESEARCH & REPORTS  ·  INDUSTRIES
   ══════════════════════════════════════════════════════════════════════════ */

/* --- report cards -------------------------------------------------------- */
.reports { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:var(--space-6); }
.report {
  background:var(--surface-000);
  border:var(--border-hairline) solid var(--line-hairline);
  border-radius:var(--radius-md);
  padding:var(--space-8);
  display:grid; gap:var(--space-4); align-content:start;
  transition:box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.report:hover { box-shadow:var(--shadow-raised); transform:translateY(-2px); border-color:var(--line-strong); }
.report__meta { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.report__scope {
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--hue-tint); color:var(--hue-ink);
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:3px var(--space-3); border-radius:var(--radius-xs);
}
.report__scope::before { content:""; width:7px; height:7px; border-radius:var(--radius-pill); background:var(--hue-ink); }
.report__date {
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-subtle); font-variant-numeric:tabular-nums;
}
.report h3 { font-size:22px; line-height:29px; letter-spacing:-.01em; }
.report__stand { font-size:16px; line-height:25px; color:var(--ink-muted); }
.report__so {
  border-top:var(--border-hairline) solid var(--line-hairline);
  padding-top:var(--space-4); font-size:15px; line-height:23px; color:var(--ink);
}
.report__so strong {
  display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hue-ink); margin-bottom:var(--space-1);
}

/* --- horizon timeline ---------------------------------------------------- */
.horizon { position:relative; background:var(--surface-000);
           border:var(--border-hairline) solid var(--line-hairline);
           border-radius:var(--radius-md); padding:var(--space-8) var(--space-8) var(--space-6); }
.horizon__head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-6); flex-wrap:wrap; margin-bottom:var(--space-8); }
.horizon__title { font-size:21px; line-height:27px; font-weight:600; }
.horizon__sub { font-size:14px; line-height:21px; color:var(--ink-subtle); margin-top:2px; }
.horizon__plot { position:relative; }
.horizon__years { position:relative; height:22px; margin-left:var(--tl-gutter,168px); }
.horizon__year {
  position:absolute; transform:translateX(-50%);
  font-size:12.5px; font-weight:600; color:var(--ink-subtle);
  font-variant-numeric:tabular-nums;
}
.horizon__grid { position:absolute; top:22px; bottom:0; left:var(--tl-gutter,168px); right:0; pointer-events:none; }
.horizon__gridline { position:absolute; top:0; bottom:0; width:1px; background:var(--line-hairline); }
.hrow { display:grid; grid-template-columns:var(--tl-gutter,168px) 1fr; align-items:center; padding-block:5px; }
.hrow__label {
  font-size:13px; line-height:17px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--hue-ink); padding-right:var(--space-4);
  white-space:nowrap;
}
.hrow__track { position:relative; height:144px; }   /* overridden per row */
.hrow__axis { position:absolute; left:0; right:0; top:var(--ax,50%); height:2px; background:var(--line-hairline); }
.hmark {
  position:absolute; top:var(--ax,50%); transform:translate(-50%,-50%);
  width:13px; height:13px; border-radius:var(--radius-pill);
  background:var(--hue-chart); box-shadow:0 0 0 2.5px var(--surface-000);
  border:0; padding:0; cursor:pointer;
}
.hmark::after {            /* the hit target is bigger than the mark */
  content:""; position:absolute; inset:-11px; border-radius:var(--radius-pill);
}
.hmark:focus-visible { outline:var(--border-focus) solid var(--line-focus); outline-offset:3px; }

/* Four lanes — one near and one far each side of the axis. The build script
   places each date in the near lane that was not used last and drops to a far
   lane only when two dates are too close to share one, so no two labels can
   ever overlap. A leader line ties a far label back to its marker. The first
   and last marks pull their label inboard rather than centring it. */
.hmark__label {
  position:absolute; transform:translateX(-50%);
  font-size:12.5px; line-height:16px; font-weight:600; color:var(--ink);
  width:126px; text-align:center; pointer-events:none;
}
.hmark__label span { display:block; font-weight:400; color:var(--ink-subtle); font-variant-numeric:tabular-nums; }
.hmark__label--a1 { bottom:calc(100% - var(--ax,50%) + 20px); }
.hmark__label--a2 { bottom:calc(100% - var(--ax,50%) + 92px); }
.hmark__label--b1 { top:calc(var(--ax,50%) + 20px); }
.hmark__label--b2 { top:calc(var(--ax,50%) + 92px); }
.hmark__label--start { transform:translateX(-14px); text-align:left; }
.hmark__label--end   { transform:translateX(calc(-100% + 14px)); text-align:right; }

.hlead { position:absolute; width:1px; background:var(--line-hairline); }
.hlead--a1 { bottom:calc(100% - var(--ax,50%) + 7px); height:13px; }
.hlead--a2 { bottom:calc(100% - var(--ax,50%) + 7px); height:85px; }
.hlead--b1 { top:calc(var(--ax,50%) + 7px); height:13px; }
.hlead--b2 { top:calc(var(--ax,50%) + 7px); height:85px; }
.htip {
  position:absolute; z-index:6; min-width:210px; max-width:290px;
  background:var(--surface-inverse); color:var(--ink-inverse);
  border-radius:var(--radius-sm); padding:var(--space-4);
  font-size:13.5px; line-height:20px; box-shadow:var(--shadow-overlay);
  pointer-events:none; opacity:0; transition:opacity .12s ease;
}
.htip.is-on { opacity:1; }
.htip b { display:block; font-size:14.5px; margin-bottom:var(--space-1); }
.htip em { display:block; font-style:normal; color:var(--accent); font-size:12px;
           letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--space-2);
           font-variant-numeric:tabular-nums; }
.horizon__foot { display:flex; justify-content:space-between; align-items:center; gap:var(--space-5);
                 flex-wrap:wrap; margin-top:var(--space-6); padding-top:var(--space-5);
                 border-top:var(--border-hairline) solid var(--line-hairline); }
.horizon__legend { display:flex; gap:var(--space-6); flex-wrap:wrap; font-size:13.5px; color:var(--ink-muted); }
.horizon__legend span { display:inline-flex; align-items:center; gap:var(--space-2); }
.horizon__legend i { width:11px; height:11px; border-radius:var(--radius-pill); display:block; }
.horizon__table { margin-top:var(--space-6); overflow-x:auto; }
.horizon__table[hidden] { display:none; }
.horizon__note {
  margin-top:var(--space-4); font-size:12.5px; line-height:19px; color:var(--ink-subtle);
  max-width:78ch;
}
.horizon__btn { font-size:14px; padding:var(--space-2) var(--space-4); }

/* A screen reader gets the same information the tooltip carries. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- the nav dropdown ---------------------------------------------------- */
/* A link AND a disclosure. The link goes to the overview, the button beside it
   opens the list. Two controls rather than one, because a single element cannot
   be both a reliable link and a reliable menu button on a touch screen. */
.navitem { position:relative; display:flex; align-items:center; gap:2px; }
.navitem__toggle {
  display:grid; place-items:center;
  width:22px; height:22px; padding:0;
  background:transparent; border:0; border-radius:var(--radius-xs);
  color:var(--ink-subtle); cursor:pointer;
  transition:color .14s ease, transform .16s ease;
}
.navitem__toggle:hover { color:var(--link); }
.navitem__toggle:focus-visible { outline:var(--border-focus) solid var(--line-focus); outline-offset:1px; }
.navitem__toggle[aria-expanded="true"] { color:var(--link); transform:rotate(180deg); }

.navmenu {
  position:absolute; top:calc(100% + 10px); left:-14px; z-index:40;
  min-width:252px; padding:var(--space-2);
  background:var(--surface-000);
  border:var(--border-hairline) solid var(--line-hairline);
  border-top:var(--border-rule) solid var(--accent);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  box-shadow:var(--shadow-overlay);
  display:none;
}
.navitem.is-open .navmenu { display:block; }
.navmenu li + li { margin-top:1px; }
.navmenu li:first-child { border-bottom:var(--border-hairline) solid var(--line-hairline);
                          margin-bottom:var(--space-2); padding-bottom:var(--space-2); }
.site-nav .navmenu a {
  display:block; padding:var(--space-3) var(--space-4);
  font-size:15px; line-height:20px; font-weight:600;
  color:var(--ink-muted); border-radius:var(--radius-sm); border-bottom:0;
}
.site-nav .navmenu a:hover { background:var(--brand-tint); color:var(--link-hover); }
.site-nav .navmenu a.is-current { background:var(--brand-tint); color:var(--link-hover); }

/* --- the sector page head ------------------------------------------------ */
.pagehead { background:var(--brand); color:var(--ink-on-brand); padding-block:var(--space-20) var(--space-16);
            border-bottom:4px solid transparent; border-image:var(--gradient-spectrum) 1; }
.pagehead__inner { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-16); }
.pagehead__copy { display:grid; gap:var(--space-5); max-width:64ch; }
.pagehead h1 { font-size:58px; line-height:56px; letter-spacing:-.025em; color:var(--ink-on-brand); }
.pagehead__lead { font-size:20px; line-height:31px; color:var(--ink-on-brand); opacity:.88; max-width:58ch; }
.pagehead .eyebrow a { color:var(--accent); text-decoration:none; }
.pagehead .eyebrow a:hover { text-decoration:underline; text-underline-offset:3px; }
.pagehead__seal { flex:none; width:76px; height:76px; }

.chips { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-1); }
.chip {
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-on-brand); background:rgba(255,255,255,.14);
  border:var(--border-hairline) solid rgba(255,255,255,.28);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-xs);
}
[data-theme="dark"] .chip { color:var(--ink-on-brand); background:rgba(0,0,0,.14); border-color:rgba(0,0,0,.24); }

/* --- sector split: short enough that neither column has to be sticky ----- */
.sectorsplit { display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space-16); align-items:start; }
.sectorsplit__copy { display:grid; gap:var(--space-5); }
.sectorsplit__copy p { color:var(--ink-muted); max-width:58ch; }
.expbox {
  background:var(--brand-tint); border-radius:var(--radius-md);
  padding:var(--space-6) var(--space-6) var(--space-5);
  display:grid; gap:var(--space-3); align-content:start;
}
.expbox strong { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.expbox p { font-size:15px; line-height:23px; color:var(--ink); }
.expbox__more { font-size:14px; font-weight:600; justify-self:start; }

/* --- standards list ------------------------------------------------------ */
.stdlist { display:grid; gap:var(--space-3); }
.stdlist--two { grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-5); }
.std {
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-4);
  background:var(--surface-000);
  border:var(--border-hairline) solid var(--line-hairline);
  border-left:var(--border-rule) solid var(--hue-chart);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--space-4) var(--space-5);
  align-items:start;
}
.std__id { display:grid; gap:2px; min-width:132px; }
/* The issuing body always prints, so the rule's color is reinforcement and
   never the signal — the same discipline the deadline and report cards follow. */
.std__scope {
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hue-ink);
}
.std__code {
  font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.std__what { font-size:14.5px; line-height:22px; color:var(--ink-muted); }
.std__what b { color:var(--ink); font-weight:600; }

/* --- references ---------------------------------------------------------- */
/* Each card takes a domain hue so the section carries the palette, and the
   date under every quote is the point: a reference without one is a slogan. */
.refgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); }
.ref {
  background:var(--surface-000);
  border:var(--border-hairline) solid var(--line-hairline);
  border-left:var(--border-rule) solid var(--hue-chart);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--space-8);
  display:grid; gap:var(--space-4); align-content:start;
  margin:0;
}
.ref blockquote { font-size:19px; line-height:30px; font-style:italic; color:var(--ink); margin:0; }
.ref__more { font-size:17px !important; line-height:27px !important; color:var(--ink-muted) !important; }
.ref figcaption {
  border-top:var(--border-hairline) solid var(--line-hairline);
  padding-top:var(--space-4); display:grid; gap:2px;
}
.ref figcaption strong { font-size:16px; color:var(--ink); font-weight:600; }
.ref figcaption span { font-size:14.5px; line-height:21px; color:var(--ink-muted); }
.ref__when {
  font-size:11.5px !important; letter-spacing:.09em; text-transform:uppercase;
  color:var(--hue-ink) !important; font-weight:600; margin-top:var(--space-1);
}
.ref--wide { max-width:74ch; margin-inline:auto; padding:var(--space-10); }
.ref--wide blockquote { font-size:21px; line-height:33px; }
@media (max-width:900px) { .refgrid { grid-template-columns:1fr; } }

/* --- the regime filter --------------------------------------------------- */
/* Three chips in the three domain hues. Each prints its own jurisdiction and
   its own count, so the color reinforces a label that is already there. */
.rfilter { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-8); }
.rfilter__chip {
  font-family:var(--font-sans); font-size:14px; font-weight:600; line-height:20px;
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  background:var(--surface-000); color:var(--ink-muted);
  border:var(--border-hairline) solid var(--line-hairline);
  border-left:var(--border-rule) solid var(--hue-chart, var(--line-strong));
  border-radius:0 var(--radius-pill) var(--radius-pill) 0;
  cursor:pointer;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.rfilter__chip span {
  font-size:12px; font-variant-numeric:tabular-nums;
  color:var(--ink-subtle); background:var(--surface-200);
  padding:0 var(--space-2); border-radius:var(--radius-pill);
}
.rfilter__chip:hover { color:var(--ink); border-color:var(--line-strong); border-left-color:var(--hue-chart, var(--line-strong)); }
.rfilter__chip:focus-visible { outline:var(--border-focus) solid var(--line-focus); outline-offset:2px; }
.rfilter__chip.is-on { background:var(--hue-tint, var(--brand-tint)); color:var(--hue-ink, var(--ink)); border-color:var(--hue-chart, var(--brand)); }
.rfilter__chip.is-on span { background:var(--surface-000); color:var(--hue-ink, var(--ink)); }
.rfilter__count { font-size:13.5px; color:var(--ink-subtle); margin-left:var(--space-2); }
.std[hidden] { display:none; }

/* --- findings ------------------------------------------------------------ */
.findings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-10); }
.finding { display:grid; grid-template-columns:auto 1fr; gap:var(--space-4); align-items:start; }
.finding__n {
  width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius-pill);
  background:var(--hue-tint); color:var(--hue-ink);
  font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;
}
.finding h3 { font-size:19px; line-height:25px; margin-bottom:var(--space-2); }
.finding p { font-size:16px; line-height:25px; color:var(--ink-muted); }

/* --- the overview grid --------------------------------------------------- */
.sectorgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:var(--space-6); }
.sectorcard {
  /* the summary takes the slack, so the count and chips line up across the row */
  display:grid; gap:var(--space-3); grid-template-rows:auto 1fr auto auto;
  background:var(--surface-000); color:inherit; text-decoration:none;
  border:var(--border-hairline) solid var(--line-hairline);
  border-top:var(--border-rule) solid var(--accent);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  padding:var(--space-6);
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.sectorcard:hover { box-shadow:var(--shadow-raised); transform:translateY(-2px); border-color:var(--line-strong); border-top-color:var(--accent); }
.sectorcard:focus-visible { outline:var(--border-focus) solid var(--line-focus); outline-offset:3px; }
.sectorcard h3 { font-size:23px; line-height:29px; letter-spacing:-.01em; color:var(--ink); }
.sectorcard p { font-size:15.5px; line-height:24px; color:var(--ink-muted); }
.sectorcard__foot {
  display:flex; align-items:center; justify-content:space-between;
  border-top:var(--border-hairline) solid var(--line-hairline);
  padding-top:var(--space-3); margin-top:var(--space-1);
}
.sectorcard__count { font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-subtle); }
.sectorcard__go { font-size:19px; color:var(--accent-ink); transition:transform .16s ease; }
.sectorcard:hover .sectorcard__go { transform:translateX(4px); }
.chips--card .chip {
  color:var(--ink-muted); background:var(--surface-200);
  border-color:var(--line-hairline); font-size:10.5px;
}

/* --- previous / next ----------------------------------------------------- */
.pager {
  display:flex; justify-content:space-between; gap:var(--space-6);
  margin-top:var(--space-16); padding-top:var(--space-6);
  border-top:var(--border-hairline) solid var(--line-hairline);
}
.pager a { font-size:17px; font-weight:600; text-decoration:none; display:grid; gap:2px; }
.pager a:hover { text-decoration:underline; text-underline-offset:3px; }
.pager a span {
  font-size:11.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted);   /* the pager sits on brand-tint */
}
.pager__next { text-align:right; }

/* Four readings of one length: two by two beats three and an orphan. */
.questions--pairs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-12) var(--space-16); }

/* Two copies of one sentence: the chart is only on the wide layout. */
.only-narrow { display:none; }

/* The label is 104px here, and the build script keeps 15.5% of the track
   between any two labels in a lane — so at 1024px, the narrowest width that
   still shows the chart, there is about 20px of clear air between them. */
@media (max-width:1200px) {
  .horizon { --tl-gutter:124px; }
  .hmark__label { width:104px; font-size:11.5px; }
}

/* Below this a fourteen-mark axis stops being readable, whatever is done to the
   labels. The table is not a fallback here — it is the narrow layout. */
@media (max-width:1023px) {
  .horizon { padding:var(--space-5); }
  .horizon__plot, .horizon__foot, .horizon__btn { display:none; }
  .horizon__table[hidden] { display:block; }
  .horizon__table { margin-top:var(--space-5); overflow-x:visible; }
  .horizon__head { margin-bottom:0; }
  .only-wide { display:none; }
  .only-narrow { display:inline; }

  /* A four-column table cannot shrink, so it stops being a table: each row
     becomes a card with the same four facts stacked in reading order. */
  .horizon__table .reqtable,
  .horizon__table tbody,
  .horizon__table tr { display:block; width:100%; }
  /* The column headers and the caption stay for a screen reader; on this
     layout the subtitle above already says what the caption says. */
  .horizon__table thead,
  .horizon__table caption { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); }
  .horizon__table tr {
    padding:var(--space-4) 0;
    border-bottom:var(--border-hairline) solid var(--line-hairline);
  }
  .horizon__table tr:last-child { border-bottom:0; }
  .horizon__table td { display:block; border:0; padding:0; }
  .horizon__table td:nth-child(1),
  .horizon__table td:nth-child(2) {
    display:inline; font-size:12px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-subtle); white-space:normal;
  }
  .horizon__table td:nth-child(2)::before { content:" \00B7 "; }
  .horizon__table td:nth-child(3) {
    margin-top:var(--space-2); font-size:19px; line-height:25px;
    font-weight:600; color:var(--ink);
  }
  .horizon__table td:nth-child(4) { margin-top:var(--space-1); font-size:15px; line-height:23px; }
}

@media (max-width:1080px) {
  /* In the collapsed sheet the menu is not a dropdown — it is an indented
     list that is always open, so nothing is hidden behind a hover. This
     breakpoint must match the one that collapses the bar. */
  .navitem { display:block; position:static; }
  .navitem__toggle { display:none; }
  .navmenu {
    display:block; position:static; min-width:0;
    margin:0 0 var(--space-2) var(--space-4);
    padding:0 0 0 var(--space-4);
    background:transparent; box-shadow:none;
    border:0; border-left:var(--border-hairline) solid var(--line-hairline);
    border-radius:0;
  }
  .navmenu li:first-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
  .site-nav .navmenu a { padding:var(--space-2) var(--space-3); font-weight:400; }
  .site-nav .navmenu a.is-current { font-weight:600; }
}

@media (max-width:1080px) {
  .findings { grid-template-columns:1fr; gap:var(--space-6); }
  .stdlist--two { grid-template-columns:1fr; }
  .sectorsplit { grid-template-columns:1fr; gap:var(--space-10); }
  .pagehead__seal { display:none; }
  .pagehead h1 { font-size:46px; line-height:46px; }
}

@media (max-width:820px) {
  .questions--pairs { grid-template-columns:1fr; }
  .std { grid-template-columns:1fr; gap:var(--space-2); }
  .std__id { min-width:0; display:flex; align-items:baseline; gap:var(--space-3); }
  .pagehead { padding-block:var(--space-12) var(--space-10); }
  .pagehead h1 { font-size:38px; line-height:40px; }
  .pager { flex-direction:column; gap:var(--space-4); }
  .pager__next { text-align:left; }
}



/* ══════════════════════════════════════════════════════════════════════════
   THE TEAM — partner profiles and the Venn of where the practices meet
   ══════════════════════════════════════════════════════════════════════════ */
.teamgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8); margin-top:var(--space-12); }
.person {
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-hairline);
  border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
  border-top:4px solid var(--hue-person, var(--brand));
}
.person--m { --hue-person:var(--brand-azure); }
.person--a { --hue-person:var(--brand-fuchsia); }
.person--b { --hue-person:var(--brand-sunflower); }
.person__photo svg { display:block; width:100%; height:auto; border-radius:0 !important; }
.person__body { padding:var(--space-6) var(--space-6) var(--space-8); display:flex; flex-direction:column; gap:var(--space-2); }
.person__body p { font-size:15px; line-height:23px; color:var(--ink-muted); margin:0; }
.person__practice { font-size:11.5px !important; line-height:16px !important; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink) !important; }
.person__name { font-size:23px; line-height:28px; letter-spacing:-.01em; margin:0; }
.person__title { font-weight:600; color:var(--ink) !important; margin-bottom:var(--space-2) !important; }
.person__label { font-size:11.5px !important; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-subtle) !important; margin-top:var(--space-3) !important; }
.person__creds { margin-top:auto !important; padding-top:var(--space-4); border-top:var(--border-hairline) solid var(--line-hairline);
  font-size:13.5px !important; line-height:20px !important; color:var(--ink) !important; }

/* A placeholder is meant to be seen: bracketed and highlighted until someone replaces it. */
.ph { background:var(--sunflower-tint); color:var(--sunflower-ink); border-radius:3px; padding:0 3px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; }

.vennwrap { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--space-12); align-items:center;
  margin-top:var(--space-12); }
.venn__figure svg { display:block; width:100%; height:auto; max-width:620px; margin-inline:auto; }
.venn text { font-family:var(--font-sans); }
.venn__region { pointer-events:none; outline:none; }
.venn__region .venn__fill { transition:fill .16s ease; }
.venn__region.is-hover .venn__fill, .venn__region:focus-visible .venn__fill, .venn__region.is-active .venn__fill { fill:var(--on); }
.vennpanel {
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-hairline); border-radius:var(--radius-lg);
  padding:var(--space-8); min-height:300px; box-shadow:var(--shadow-raised);
  border-top:4px solid transparent; border-image:var(--gradient-spectrum) 1;
}
.vennitem h3 { font-size:23px; line-height:28px; margin:var(--space-1) 0 var(--space-4); }
.vennitem__who { font-size:11.5px; line-height:16px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin:0; }
.vennitem .ticks li { color:var(--ink-muted); }
.vennlist { margin-top:var(--space-12); border-top:var(--border-hairline) solid var(--line-hairline); padding-top:var(--space-6); }
.vennlist summary { cursor:pointer; font-weight:600; font-size:17px; color:var(--link); }
.vennlist__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8) var(--space-10);
  margin-top:var(--space-8); }
.vennlist__grid .vennitem h3 { font-size:19px; line-height:24px; margin-bottom:var(--space-3); }

.steps { list-style:none; counter-reset:step; padding:0; margin:0; display:grid; gap:var(--space-4); }
.steps li { counter-increment:step; position:relative; padding-left:var(--space-12); font-size:16px; line-height:25px;
  color:var(--ink-muted); }
.steps li strong { color:var(--ink); }
.steps li::before { content:counter(step, decimal-leading-zero); position:absolute; left:0; top:0;
  font-size:15px; font-weight:700; color:var(--accent-ink); font-variant-numeric:tabular-nums; }

@media (max-width:1080px) {
  .teamgrid { grid-template-columns:1fr 1fr; }
  .vennwrap { grid-template-columns:1fr; }
  .vennlist__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .teamgrid, .vennlist__grid { grid-template-columns:1fr; }
}
@media print {
  .vennlist { display:block; } .vennlist summary { display:none; }
}

/* Small screens: the diagram shrinks to ~60% of its drawn size, so its labels
   grow about their own centers to stay readable (the panel and list below
   carry the full text either way). */
@media (max-width: 640px) {
  .venn .venn__lbl, .venn .venn__who { transform-box: fill-box; transform-origin: center; }
  .venn .venn__lbl { transform: scale(1.4); }
  .venn .venn__lbl[data-k="ma"], .venn .venn__lbl[data-k="mb"], .venn .venn__lbl[data-k="ab"] { transform: scale(1.22); }
  .venn .venn__lbl[data-k="mab"] { transform: scale(1.1); }
  .venn .venn__who { transform: scale(1.3); }
}

/* Labels outside the circles sit on the page, so they follow the theme. */
.venn .venn__name { fill:var(--ink); }
.venn .venn__prac { fill:var(--accent-ink); }


/* ══════════════════════════════════════════════════════════════════════════
   9. OFFERS — the services, resources and government pages
   Every price on the site is a starting price for the smallest scope it
   describes, and says so beside the number. The full rate card is internal.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- a price ------------------------------------------------------------- */
.price { display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.price__from { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); }
.price__amount { font-size:36px; line-height:40px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.price__per { font-size:15px; line-height:20px; color:var(--ink-muted); }
.price--sm .price__amount { font-size:26px; line-height:30px; }

/* --- a small label: badge, standard, status ------------------------------ */
.tag {
  display:inline-flex; align-items:center; gap:var(--space-2); justify-self:start; align-self:flex-start;
  font-size:11.5px; line-height:16px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-xs);
  background:var(--hue-tint, var(--accent-tint)); color:var(--hue-ink, var(--accent-ink));
}
.tag--soon { background:var(--surface-200); color:var(--ink-muted); }
.status {
  display:inline-block; font-size:12px; line-height:18px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:1px var(--space-2); border-radius:var(--radius-xs); white-space:nowrap;
}
.status--conform     { background:var(--conform-tint);        color:var(--conform); }
.status--observation { background:var(--observation-tint);    color:var(--observation); }
.status--nc          { background:var(--nonconformance-tint); color:var(--nonconformance); }

/* --- fixed-price packages ------------------------------------------------ */
.offers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-6); }
.offer {
  background:var(--surface-000);
  border:var(--border-hairline) solid var(--line-hairline);
  border-top:var(--border-rule) solid var(--brand);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  padding:var(--space-8) var(--space-6) var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-4);
}
.offer h3 { font-size:23px; line-height:28px; letter-spacing:-.01em; }
.offer__lead { font-size:16px; line-height:25px; color:var(--ink-muted); }
.offer__terms {
  font-size:14px; line-height:21px; font-weight:600; color:var(--ink);
  padding-block:var(--space-3); border-block:var(--border-hairline) solid var(--line-hairline);
}
.offer__assume { font-size:13px; line-height:19px; color:var(--ink-muted); margin-top:auto; padding-top:var(--space-2); }
.offer .btn { width:100%; }

.terms {
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-6); align-items:center;
  margin-top:var(--space-10); padding:var(--space-6) var(--space-8);
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-hairline);
  border-left:var(--border-rule) solid var(--accent); border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.terms__title { font-size:17px; line-height:24px; font-weight:600; }
.terms p { font-size:15px; line-height:23px; color:var(--ink-muted); }
.terms__icon { color:var(--accent-ink); line-height:0; }

/* --- the transition briefing --------------------------------------------- */
.brief-offer {
  background:var(--surface-000); border-radius:var(--radius-lg); padding:var(--space-8);
  box-shadow:var(--shadow-overlay); display:grid; gap:var(--space-5); align-content:start;
  border-top:4px solid transparent; border-image:var(--gradient-spectrum) 1;
}
.brief-offer__name { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.brief-offer__note { font-size:14px; line-height:21px; color:var(--ink-muted); }
.outcomes { display:grid; gap:var(--space-5); counter-reset:o; }
.outcomes li { display:grid; grid-template-columns:44px 1fr; gap:var(--space-4); counter-increment:o; }
.outcomes li::before {
  content:counter(o, decimal-leading-zero); width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--radius-pill); background:var(--azure-tint); color:var(--azure-ink);
  font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;
}
.outcomes strong { display:block; font-size:17px; line-height:24px; }
.outcomes p { font-size:15px; line-height:23px; color:var(--ink-muted); }

/* --- fractional quality manager ------------------------------------------ */
.tiers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); align-items:stretch; }
.tier {
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-hairline);
  border-radius:var(--radius-lg); padding:var(--space-8);
  display:flex; flex-direction:column; gap:var(--space-4);
}
.tier h3 { font-size:23px; line-height:28px; }
.tier__lead { font-size:16px; line-height:25px; color:var(--ink-muted); }
.tier__rows { display:grid; border-top:var(--border-hairline) solid var(--line-hairline); margin-top:var(--space-1); }
.tier__rows div {
  display:flex; justify-content:space-between; gap:var(--space-4);
  padding-block:var(--space-3); border-bottom:var(--border-hairline) solid var(--line-hairline);
  font-size:15px; line-height:22px;
}
.tier__rows dt { color:var(--ink-muted); }
.tier__rows dd { margin:0; font-weight:600; text-align:right; }
.tier .btn { margin-top:auto; width:100%; }
.tier--featured { background:var(--brand); border-color:var(--brand); color:var(--ink-on-brand); box-shadow:var(--shadow-overlay); }
.tier--featured .tier__lead, .tier--featured .tier__rows dt, .tier--featured .price__per,
.tier--featured .price__from { color:var(--ink-on-brand); opacity:.82; }
.tier--featured .price__amount { color:var(--ink-on-brand); }
.tier--featured .tier__rows, .tier--featured .tier__rows div { border-color:rgba(255,255,255,.2); }
[data-theme="dark"] .tier--featured .tier__rows, [data-theme="dark"] .tier--featured .tier__rows div { border-color:rgba(255,255,255,.14); }
.tier--featured .tag { background:var(--accent); color:var(--ink-on-accent); }

.compare {
  display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-8); align-items:center;
  margin-top:var(--space-12); padding:var(--space-8);
  background:var(--brand-tint); border-radius:var(--radius-lg);
}
.compare__fig { display:grid; gap:var(--space-1); }
.compare__num { font-size:40px; line-height:44px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.compare__label { font-size:15px; line-height:23px; color:var(--ink-muted); max-width:36ch; }
.compare__vs { font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); }
.compare__src { grid-column:1 / -1; font-size:13px; line-height:20px; color:var(--ink-muted);
                border-top:var(--border-hairline) solid var(--line-hairline); padding-top:var(--space-4); }

/* --- discovery call ------------------------------------------------------ */
.booking { display:grid; grid-template-columns:1fr minmax(360px,.95fr); gap:var(--space-20); align-items:start; }
.booking__copy { display:grid; gap:var(--space-6); align-content:start; }
.booking__copy h2 { font-size:40px; line-height:44px; }
.booking__copy .body-l { color:var(--ink-muted); }
.field select {
  font-family:var(--font-sans); font-size:17px; line-height:26px; color:var(--ink);
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-strong);
  border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); width:100%;
}
.field--pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
fieldset.field { border:0; padding:0; margin:0; min-width:0; }
fieldset.field legend { font-size:15px; line-height:19px; font-weight:600; padding:0; margin-bottom:var(--space-2); }
.pick { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.pick label {
  display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer;
  font-size:15px; line-height:20px; font-weight:600; color:var(--ink-muted);
  padding:var(--space-2) var(--space-3); border:var(--border-hairline) solid var(--line-strong);
  border-radius:var(--radius-sm); background:var(--surface-000);
}
.pick input { accent-color:var(--brand); margin:0; }
.pick label:has(input:checked) { background:var(--brand); border-color:var(--brand); color:var(--ink-on-brand); }
.pick label:has(input:focus-visible) { outline:var(--border-focus) solid var(--line-focus); outline-offset:2px; }
.field__hint { font-size:14px; line-height:20px; color:var(--ink-muted); }

/* --- case studies -------------------------------------------------------- */
.cases { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }
.case {
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-hairline);
  border-radius:var(--radius-lg); padding:var(--space-8); display:flex; flex-direction:column; gap:var(--space-4);
}
.case__fig { font-size:48px; line-height:50px; font-weight:600; letter-spacing:-.02em; color:var(--accent-ink); font-variant-numeric:tabular-nums; }
.case__kicker { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); }
.case h3 { font-size:22px; line-height:28px; }
.case dl { display:grid; gap:var(--space-3); margin:0; }
.case dt { font-size:11.5px; line-height:16px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); }
.case dd { margin:0; font-size:15px; line-height:23px; color:var(--ink-muted); }
.case blockquote {
  margin-top:auto; padding-top:var(--space-4); border-top:var(--border-hairline) solid var(--line-hairline);
  font-size:16px; line-height:25px; font-style:italic; color:var(--ink);
}
.case cite { display:block; margin-top:var(--space-2); font-size:13px; line-height:19px; font-style:normal; color:var(--ink-muted); }

/* --- the readiness check ------------------------------------------------- */
.quiz { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:var(--space-12); align-items:start; }
.quiz__form { display:grid; gap:var(--space-4); }
.q {
  margin:0; padding:var(--space-5) var(--space-6) var(--space-6); min-width:0;
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-hairline);
  border-radius:var(--radius-md);
}
.q legend { float:left; width:100%; padding:0; font-size:17px; line-height:25px; font-weight:600; }
.q__clause {
  display:block; margin-bottom:var(--space-1);
  font-size:12px; line-height:16px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--azure-ink);
}
.q__opts { clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); padding-top:var(--space-4); }
.opt {
  display:flex; gap:var(--space-3); align-items:flex-start; cursor:pointer;
  padding:var(--space-3); border:var(--border-hairline) solid var(--line-strong); border-radius:var(--radius-sm);
  font-size:14.5px; line-height:21px; color:var(--ink-muted); background:var(--surface-000);
}
.opt input { margin:3px 0 0; accent-color:var(--brand); flex:none; }
.opt:has(input:checked) { border-color:var(--brand); background:var(--brand-tint); color:var(--ink); box-shadow:inset 0 0 0 1px var(--brand); }
.opt:has(input:focus-visible) { outline:var(--border-focus) solid var(--line-focus); outline-offset:2px; }
.quiz__panel {
  position:sticky; top:96px; display:grid; gap:var(--space-5);
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-hairline);
  border-radius:var(--radius-lg); padding:var(--space-8); box-shadow:var(--shadow-raised);
}
.quiz__count { font-size:13px; line-height:19px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.meter { height:8px; border-radius:var(--radius-pill); background:var(--surface-200); overflow:hidden; }
.meter i { display:block; height:100%; width:0; background:var(--brand); border-radius:var(--radius-pill); transition:width .2s ease; }
.score { display:flex; align-items:baseline; gap:var(--space-2); font-variant-numeric:tabular-nums; }
.score b { font-size:64px; line-height:64px; font-weight:600; letter-spacing:-.03em; }
.score span { font-size:17px; color:var(--ink-muted); }
.verdicts { display:grid; }
.verdicts li {
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  padding-block:var(--space-3); border-bottom:var(--border-hairline) solid var(--line-hairline);
  font-size:15px; line-height:22px;
}
.verdicts li:first-child { border-top:var(--border-hairline) solid var(--line-hairline); }
.quiz__result[hidden], .quiz__start[hidden] { display:none; }
.quiz__result { display:grid; gap:var(--space-5); }
.quiz__result h3 { font-size:23px; line-height:28px; }
.quiz__result p { font-size:15px; line-height:23px; color:var(--ink-muted); }
.quiz__actions { display:grid; gap:var(--space-3); }
.quiz__actions .btn { width:100%; white-space:normal; text-align:center; }

/* --- downloads ----------------------------------------------------------- */
.downloads { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.9fr); gap:var(--space-12); align-items:start; }
.doclist { display:grid; gap:var(--space-4); }
.doc {
  display:grid; grid-template-columns:56px 1fr; gap:var(--space-4); align-items:start;
  padding:var(--space-5); background:var(--surface-000);
  border:var(--border-hairline) solid var(--line-hairline); border-radius:var(--radius-md);
}
.doc__icon {
  width:56px; height:70px; border:var(--border-hairline) solid var(--line-strong); border-radius:var(--radius-xs);
  display:grid; place-items:end center; padding-bottom:6px; position:relative; background:var(--surface-100);
  font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--ink-muted);
}
.doc__icon::before { content:""; position:absolute; top:10px; left:9px; right:9px; height:3px; border-radius:2px; background:var(--gradient-sunrise); }
.doc h3 { font-size:19px; line-height:25px; }
.doc p { font-size:15px; line-height:23px; color:var(--ink-muted); }
.doc__meta { font-size:13px !important; line-height:19px !important; font-weight:600; color:var(--ink-muted); margin-top:var(--space-1); }
.doc__top { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); align-items:center; margin-bottom:var(--space-1); }

/* --- the toolkit shop ---------------------------------------------------- */
.kits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }
.kit {
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-hairline);
  border-top:var(--border-rule) solid var(--hue-chart, var(--brand));
  border-radius:0 0 var(--radius-md) var(--radius-md);
  padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3);
}
.kit[hidden] { display:none; }
.kit h3 { font-size:20px; line-height:26px; }
.kit p { font-size:15px; line-height:23px; color:var(--ink-muted); }
.kit__meta { font-size:13px !important; line-height:19px !important; font-weight:600; }
.kit__buy { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-top:auto; padding-top:var(--space-4);
            border-top:var(--border-hairline) solid var(--line-hairline); }

/* --- training ------------------------------------------------------------ */
.webinar {
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr); gap:var(--space-10); align-items:center;
  background:var(--brand); color:var(--ink-on-brand); border-radius:var(--radius-lg); padding:var(--space-10);
  border-top:4px solid transparent; border-image:var(--gradient-spectrum) 1;
}
.webinar h3 { font-size:28px; line-height:34px; letter-spacing:-.01em; color:var(--ink-on-brand); }
.webinar p { color:var(--ink-on-brand); opacity:.86; }
.webinar .eyebrow { color:var(--accent); }
.webinar .price__amount, .webinar .price__per, .webinar .price__from { color:var(--ink-on-brand); }
.webinar__buy { display:grid; gap:var(--space-3); justify-items:start; }
.webinar__buy .btn { width:100%; }
.webinar__note { font-size:14px !important; line-height:21px; }
.courses { display:grid; margin-top:var(--space-10); border-top:var(--border-hairline) solid var(--line-strong); }
.course {
  display:grid; grid-template-columns:minmax(0,1fr) 150px 90px 110px 170px; gap:var(--space-6); align-items:center;
  padding-block:var(--space-5); border-bottom:var(--border-hairline) solid var(--line-hairline);
}
.course h3 { font-size:19px; line-height:25px; }
.course p { font-size:15px; line-height:23px; color:var(--ink-muted); }
.course__cell { font-size:15px; line-height:22px; color:var(--ink-muted); }
.course__cell b { display:none; }
.course__price { font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; }
.course--head { padding-block:var(--space-3); }
.course--head span { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); }

/* --- the Quality Brief --------------------------------------------------- */
.signup { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.signup input {
  flex:1 1 240px; font-family:var(--font-sans); font-size:17px; line-height:26px; color:var(--ink);
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-strong);
  border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4);
}
.signup input[aria-invalid="true"] { border-color:var(--nonconformance); }

/* --- government ---------------------------------------------------------- */
.facts { display:grid; margin:0; }
.facts div {
  display:grid; grid-template-columns:120px 1fr; gap:var(--space-4);
  padding-block:var(--space-3); border-bottom:var(--border-hairline) solid var(--line-hairline);
}
.facts div:first-child { border-top:var(--border-hairline) solid var(--line-hairline); }
.facts dt { font-size:12px; line-height:22px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); }
.facts dd { margin:0; font-size:15px; line-height:22px; }
.facts dd small { display:block; font-size:13px; line-height:19px; color:var(--ink-muted); }
.govgrid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr); gap:var(--space-12); align-items:start; }
.govcard {
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-hairline);
  border-radius:var(--radius-lg); padding:var(--space-8); display:grid; gap:var(--space-5);
  position:sticky; top:96px;
}
.govcard h3 { font-size:21px; line-height:27px; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1180px) {
  .offers { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .course { grid-template-columns:minmax(0,1fr) 130px 80px 100px 150px; gap:var(--space-4); }
}
@media (max-width:1080px) {
  .tiers, .cases, .kits { grid-template-columns:1fr 1fr; }
  .booking, .quiz, .downloads, .govgrid, .webinar { grid-template-columns:1fr; gap:var(--space-10); }
  .booking__copy h2 { font-size:34px; line-height:38px; }
  .quiz__panel, .govcard { position:static; }
  .compare { grid-template-columns:1fr; gap:var(--space-4); }
  .compare__vs { justify-self:start; }
  .terms { grid-template-columns:auto 1fr; }
  .terms .btn { grid-column:1 / -1; justify-self:start; }
}
@media (max-width:820px) {
  .course--head { display:none; }
  .course { grid-template-columns:1fr 1fr; gap:var(--space-2) var(--space-4); }
  .course > div:first-child { grid-column:1 / -1; }
  .course__cell b { display:inline; font-weight:600; color:var(--ink); }
  .course .btn { grid-column:1 / -1; justify-self:start; }
  .q__opts { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .offers, .tiers, .cases, .kits { grid-template-columns:1fr; }
  .field--pair { grid-template-columns:1fr; }
  .facts div { grid-template-columns:1fr; gap:0; }
  .webinar { padding:var(--space-6); }
  .terms { grid-template-columns:1fr; padding:var(--space-5); }
  .terms__icon { display:none; }
}
@media (max-width:560px) {
  .price__amount { font-size:32px; line-height:36px; }
  .compare__num { font-size:34px; line-height:38px; }
  .score b { font-size:52px; line-height:54px; }
  .booking__copy h2 { font-size:29px; line-height:33px; }
  .tier, .case, .quiz__panel, .govcard, .brief-offer { padding:var(--space-6); }
}
@media print {
  .quiz__form, .signup, .booking form, .kit__buy .btn, .offer .btn, .tier .btn { display:none; }
}
a.chip { text-decoration:none; transition:background .14s ease; }
a.chip:hover { background:rgba(255,255,255,.26); color:var(--ink-on-brand); }
.btn[hidden], .tag[hidden] { display:none; }
.brief-offer { align-self:start; }
.pick--stack { display:grid; gap:var(--space-2); }
.pick--stack label { justify-content:flex-start; font-weight:500; }
.check { display:flex; align-items:flex-start; gap:var(--space-3); cursor:pointer;
         font-size:15px; line-height:22px; color:var(--ink-muted); }
.check input { margin:4px 0 0; accent-color:var(--brand); flex:none; }
.field .pick input, .check input { width:auto; padding:0; border:0; }
/* in-page jumps land below the sticky header, not under it */
html { scroll-padding-top:84px; }


/* ══════════════════════════════════════════════════════════════════════════
   10. PHOTOGRAPHY, CASES AND QUIETER REFERENCES (October 23, 2026)
   Every photograph that carries text sits under a dark layer, and the text on
   it carries a shadow, so it stays readable whatever the photograph does.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- the framework section: the copy and the pyramid side by side, the four-level
   key below them as a 2 × 2 grid. One pair of equal columns and one column gap serve
   both rows, so the key's left column lines up under the copy and its right column
   under the pyramid. */
.framework {
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-areas:"copy fig" "key key";
  column-gap:var(--space-12); row-gap:var(--space-16);
  align-items:center;
}
.framework__copy { grid-area:copy; }
.framework__figure { grid-area:fig; }
.pyrkey {
  grid-area:key; list-style:none; padding:0; margin:0;
  grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-6) var(--space-12);
}
.pyrkey li { height:100%; }
@media (max-width:900px) {
  .framework { grid-template-columns:minmax(0, 1fr); grid-template-areas:"copy" "fig" "key"; row-gap:var(--space-12); }
  .pyrkey { column-gap:var(--space-6); }
}
@media (max-width:720px) {
  .pyrkey { grid-template-columns:minmax(0, 1fr); }
}

/* --- photographs behind text: a dark ground first, then the photo, then the layer */
.hero, .band { background:var(--surface-inverse); }
img.hero__img, img.band__img { display:block; }
.hero__scrim {
  background:linear-gradient(100deg, rgba(8,12,22,.90) 0%, rgba(8,12,22,.80) 40%,
    rgba(8,12,22,.62) 75%, rgba(8,12,22,.52) 100%);
}
.band__scrim {
  background:linear-gradient(180deg, rgba(8,12,22,.82) 0%, rgba(8,12,22,.72) 50%, rgba(8,12,22,.84) 100%);
}
.pagehead--photo { position:relative; isolation:isolate; overflow:hidden; padding-block:var(--space-24) var(--space-20); }
.pagehead__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; display:block; }
.pagehead__scrim {
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(8,12,22,.92) 0%, rgba(8,12,22,.80) 45%, rgba(8,12,22,.60) 100%);
}
.hero .eyebrow, .pagehead .eyebrow, .pagehead--photo .chip, .band cite {
  text-shadow:0 1px 2px rgba(5,9,15,.6), 0 2px 10px rgba(5,9,15,.35);
}
.pagehead--photo .chip { background:rgba(8,12,22,.45); border-color:rgba(255,255,255,.34); }
.split__img { display:block; width:100%; height:100%; min-height:480px; object-fit:cover; }
img.is-missing { visibility:hidden; }

/* --- industry cards carry their photograph */
.sectorcard { grid-template-rows:auto auto 1fr auto auto; overflow:hidden; }
.sectorcard__photo {
  display:block; margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2);
  aspect-ratio:16/9; overflow:hidden; background:var(--surface-200);
}
.sectorcard__photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.sectorcard:hover .sectorcard__photo img { transform:scale(1.04); }
@media (prefers-reduced-motion:reduce) { .sectorcard__photo img { transition:none; } }

/* --- the industries dropdown: an invisible bridge over the gap under the word */
.navmenu::before { content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }

/* --- a real-world case on each industry page */
.rwcase { display:grid; grid-template-columns:260px minmax(0,1fr) 320px; gap:var(--space-10); align-items:start; }
.rwcase__fig { border-top:var(--border-rule) solid var(--accent); padding-top:var(--space-4); }
.rwcase__fig b {
  display:block; font-size:52px; line-height:54px; font-weight:600; letter-spacing:-.03em;
  color:var(--accent-ink); font-variant-numeric:tabular-nums;
}
.rwcase__fig span { display:block; font-size:15px; line-height:22px; color:var(--ink-muted); margin-top:var(--space-2); }
.rwcase__facts { display:grid; gap:var(--space-6); margin:0; }
.rwcase__facts dt { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:var(--space-2); }
.rwcase__facts dd { margin:0; font-size:16px; line-height:26px; color:var(--ink-muted); }
.rwcase__lesson {
  background:var(--brand-tint); border-radius:var(--radius-lg); padding:var(--space-6);
  display:grid; gap:var(--space-4); justify-items:start;
}
.rwcase__label { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); }
.rwcase__lesson p { font-size:15.5px; line-height:24px; color:var(--ink); }
@media (max-width:1180px) { .rwcase { grid-template-columns:220px minmax(0,1fr); } .rwcase__lesson { grid-column:1 / -1; } }
@media (max-width:820px) { .rwcase { grid-template-columns:1fr; gap:var(--space-8); } .rwcase__fig b { font-size:44px; line-height:46px; } }

/* --- references: smaller type, so the evidence reads as evidence, not as a banner */
.band { min-height:340px; }
.band__quote { padding-block:var(--space-20); }
.band__quote p { font-size:24px; line-height:34px; max-width:40ch; }
.quote blockquote { font-size:17px; line-height:27px; }
.ref { padding:var(--space-6); gap:var(--space-3); }
.ref blockquote { font-size:16px; line-height:25px; }
.ref__more { font-size:15px !important; line-height:23px !important; }
.ref figcaption strong { font-size:15px; }
.ref figcaption span { font-size:13.5px; line-height:20px; }
.ref--wide { max-width:64ch; padding:var(--space-6) var(--space-8); }
.ref--wide blockquote { font-size:17px; line-height:27px; }
.case blockquote { font-size:15px; line-height:23px; }
@media (max-width:560px) {
  .band__quote p { font-size:19px; line-height:28px; }
  .ref--wide { padding:var(--space-5); }
}
/* On a narrow screen the text runs the full width, so the layer is even and
   dark everywhere: white text holds at least 7:1 over a pure-white photograph. */
@media (max-width:820px) {
  .hero__scrim, .pagehead__scrim { background:rgba(8,12,22,.80); }
}

/* 11. page not found ---------------------------------------------------- */
.notfound { display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; }
.notfound__contact { text-align:center; margin-top:var(--space-10); color:var(--ink-muted); }
.quiz__submit { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); padding-top:var(--space-2); }
.quiz__submit .field__note { margin:0; }
[data-quiz-band]:focus { outline:none; }
[data-quiz-band]:focus-visible { outline:var(--border-focus) solid var(--line-focus); outline-offset:4px; }

/* 12. published work: each card on a darkened photograph ------------------
   A dark ground first (so the text reads before the photo loads, or if it never
   does), then the photo, then a layer that darkens it. The layer is never lighter
   than 72% dark where the text sits, which keeps white text above 7:1 even over a
   white page in the photo, and every line of text carries a soft shadow. The card
   looks the same in both themes, because the photograph does not change. */
.card--photo {
  position:relative; isolation:isolate; overflow:hidden; min-height:280px;
  background:#0b111d; border-color:transparent; color:#ffffff;
}
.card--photo .card__media { position:absolute; inset:0; z-index:-2; display:block; }
.card--photo .card__img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.card--photo::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,12,22,.72) 0%, rgba(8,12,22,.80) 50%, rgba(8,12,22,.90) 100%);
}
.card--photo h3, .card--photo p { color:#ffffff; text-shadow:0 1px 2px rgba(0,0,0,.65), 0 0 18px rgba(0,0,0,.35); }
.card--photo p { opacity:1; color:rgba(255,255,255,.92); }
.card--photo .card__kicker { color:#ffd22b; }
.card--photo .card__foot { border-top-color:rgba(255,255,255,.28); color:rgba(255,255,255,.86) !important; }
.card--photo:hover { border-color:transparent; box-shadow:var(--shadow-overlay); }
.card--photo:hover .card__img { transform:scale(1.05); }
@media (prefers-reduced-motion:reduce) { .card--photo .card__img { transition:none; } .card--photo:hover .card__img { transform:none; } }

/* 13. industry pages: the three findings and the case figure on darkened photographs.
   Same recipe as the published-work cards: dark ground, photo, a layer at least 72%
   dark, and shadowed white text. */
.finding--photo {
  position:relative; isolation:isolate; overflow:hidden; min-height:300px;
  grid-template-columns:1fr; grid-template-rows:auto 1fr; align-content:start;
  padding:var(--space-8); border-radius:var(--radius-md); background:#0b111d; color:#ffffff;
  transition:box-shadow .16s ease, transform .16s ease;
}
.finding--photo .finding__media, .rwcase__fig--photo .rwcase__media { position:absolute; inset:0; z-index:-2; display:block; margin:0; }
.finding--photo .finding__img, .rwcase__fig--photo .rwcase__img {
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.finding--photo::before, .rwcase__fig--photo::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,12,22,.72) 0%, rgba(8,12,22,.80) 50%, rgba(8,12,22,.90) 100%);
}
.finding--photo .finding__n { background:rgba(255,210,43,.16); color:#ffd22b; border:1px solid rgba(255,210,43,.55); }
.finding--photo h3, .finding--photo p { color:#ffffff; text-shadow:0 1px 2px rgba(0,0,0,.65), 0 0 18px rgba(0,0,0,.35); }
.finding--photo p { color:rgba(255,255,255,.92); }
.finding--photo:hover { box-shadow:var(--shadow-overlay); transform:translateY(-2px); }
.finding--photo:hover .finding__img { transform:scale(1.05); }
.findings:has(.finding--photo) { gap:var(--space-6); }

.rwcase__fig--photo {
  position:relative; isolation:isolate; overflow:hidden; border-top:0;
  padding:var(--space-8) var(--space-6); border-radius:var(--radius-md); background:#0b111d; min-height:260px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.rwcase__fig--photo b { color:#ffd22b; text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 22px rgba(0,0,0,.4); }
.rwcase__fig--photo span:not(.rwcase__media) { color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(0,0,0,.65); }
.rwcase__fig--photo::after { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--gradient-sunrise); }
@media (prefers-reduced-motion:reduce) {
  .finding--photo, .finding--photo .finding__img, .rwcase__fig--photo .rwcase__img { transition:none; }
  .finding--photo:hover, .finding--photo:hover .finding__img { transform:none; }
}

/* 14. standards & guidance ------------------------------------------------
   The library hub and one page per standard. Status pills reuse the audit
   colors (conform, observation, nonconformance) and always print their label,
   so the color is never the only signal. */
.spill {
  display:inline-flex; align-items:center; white-space:nowrap;
  font-size:11px; line-height:16px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:2px var(--space-2); border-radius:var(--radius-xs);
  background:var(--conform-tint); color:var(--conform);
}
.spill--new { background:var(--azure-tint); color:var(--azure-ink); }
.spill--revision, .spill--pending, .spill--suspended { background:var(--observation-tint); color:var(--observation); }
.spill--withdrawn, .spill--canceled { background:var(--nonconformance-tint); color:var(--nonconformance); }

.stdfilter { display:grid; gap:var(--space-3); margin:var(--space-10) 0 var(--space-8); }
.stdfilter__row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); }
.stdfilter__label {
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-subtle);
  min-width:104px;
}
.stdfilter .rfilter__count { margin-left:0; min-height:20px; }
.stdgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:var(--space-4); }
.stdcard {
  display:grid; grid-template-rows:auto auto 1fr auto; gap:var(--space-2);
  background:var(--surface-100);
  border:var(--border-hairline) solid var(--line-hairline);
  border-left:var(--border-rule) solid var(--hue-chart);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--space-4) var(--space-5);
  transition:box-shadow .16s ease, border-color .16s ease;
}
.stdcard[hidden], .stdgrid__empty[hidden] { display:none; }
.stdcard:hover { box-shadow:var(--shadow-raised); }
.stdcard__top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3); }
.stdcard__scope { font-size:10.5px; line-height:15px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--hue-ink); }
.stdcard__code { font-size:18px; line-height:24px; }
.stdcard__code a { color:var(--ink); text-decoration:none; }
.stdcard__code a:hover { text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hue-chart); }
.stdcard__short { font-size:14.5px; line-height:21px; color:var(--ink-muted); }
.stdcard__foot {
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-3);
  border-top:var(--border-hairline) solid var(--line-hairline); padding-top:var(--space-3); margin-top:var(--space-2);
  font-size:14px; line-height:20px;
}
.stdcard__foot a { font-weight:600; }
.stdcard__full { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-subtle); }
.stdgrid__empty { margin-top:var(--space-6); color:var(--ink-muted); }
.change__links { font-size:14px !important; margin-top:var(--space-2); }
.changes--dated .change { grid-template-columns:150px minmax(0,1fr); }
.changes--dated .change__clause { min-width:0; white-space:normal; }
.stdlegend { display:grid; gap:var(--space-3); }
.stdlegend li { display:grid; gap:var(--space-1); font-size:14.5px; line-height:21px; color:var(--ink-muted); }
.stdlegend .spill { justify-self:start; }

.crumbs ol { display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; padding:0; margin:0 0 var(--space-10); font-size:14px; line-height:20px; color:var(--ink-subtle); }
.crumbs li + li::before { content:"›"; margin-right:var(--space-2); color:var(--ink-subtle); }
.crumbs a { color:var(--ink-muted); }
.section--std { padding-block:var(--space-16) var(--space-24); }
.stddoc { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--space-16); align-items:start; }
.stddoc__main { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-10); min-width:0; }
.stddoc__block { display:grid; gap:var(--space-4); align-content:start; }
.stddoc__block > p { font-size:17px; line-height:27px; color:var(--ink-muted); max-width:var(--layout-measure); }
.stddoc__h { font-size:26px; line-height:32px; letter-spacing:-.01em; }
.stddoc__note { font-size:15px !important; line-height:23px !important; }
.stddoc__pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-10); }
.stddoc__table { overflow-x:auto; border:var(--border-hairline) solid var(--line-hairline); border-radius:var(--radius-md); background:var(--surface-000); }
.stddoc__table .reqtable td:first-child { white-space:normal; min-width:112px; }
.stddoc__table caption { padding:var(--space-3) var(--space-4); }
.stdstatus {
  display:grid; gap:var(--space-2); padding:var(--space-5) var(--space-6);
  background:var(--conform-tint); border-left:var(--border-rule) solid var(--conform);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.stdstatus p { font-size:16px; line-height:25px; color:var(--ink); }
.stdstatus .spill { background:var(--surface-000); }
.stdstatus--new { background:var(--azure-tint); border-left-color:var(--azure-ink); }
.stdstatus--revision, .stdstatus--pending, .stdstatus--suspended { background:var(--observation-tint); border-left-color:var(--observation); }
.stdstatus--withdrawn, .stdstatus--canceled { background:var(--nonconformance-tint); border-left-color:var(--nonconformance); }
.stdstatus__checked { font-size:13px; color:var(--ink-muted); margin-left:var(--space-2); }
.stdstatus__next { font-size:15px !important; line-height:23px !important; }
.stdcheck, .stdroad { display:grid; gap:var(--space-3); padding:0; margin:0; list-style:none; counter-reset:std; }
.stdcheck li, .stdroad li { position:relative; padding-left:var(--space-12); font-size:15.5px; line-height:24px; color:var(--ink-muted); counter-increment:std; }
.stdcheck li::before {
  content:counter(std); position:absolute; left:0; top:0;
  width:32px; height:24px; display:grid; place-items:center; border-radius:var(--radius-xs);
  background:var(--surface-200); color:var(--ink); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;
}
.stdroad li { padding-left:0; border-left:var(--border-rule) solid var(--line-hairline); padding:var(--space-1) 0 var(--space-1) var(--space-5); }
.stdroad li strong { display:block; color:var(--ink); font-size:16px; }
.stdhelp { display:grid; gap:var(--space-3); padding:var(--space-6); border-radius:var(--radius-md); background:var(--brand-tint); }
.stdhelp__title { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.stdhelp p { font-size:16px; line-height:25px; color:var(--ink); }
.stdhelp__actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-2); }
.stdhelp .btn { white-space:normal; text-align:center; }
.stdrels { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); gap:var(--space-3); }
.stdrel {
  display:grid; gap:2px; align-content:start; height:100%; padding:var(--space-3) var(--space-4); text-decoration:none;
  background:var(--surface-000); border:var(--border-hairline) solid var(--line-hairline); border-radius:var(--radius-sm);
}
.stdrel b { color:var(--ink); font-size:15px; }
.stdrel span { color:var(--ink-muted); font-size:13.5px; line-height:19px; }
.stdrel:hover { border-color:var(--line-strong); }
.stdrel:hover b { text-decoration:underline; text-underline-offset:3px; }
.section--std .sources { margin-top:0; }
.glance {
  position:sticky; top:96px; display:grid; gap:var(--space-4);
  padding:var(--space-6); background:var(--surface-000);
  border:var(--border-hairline) solid var(--line-hairline); border-radius:var(--radius-md); overflow:hidden;
}
.glance::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--gradient-sunrise); }
.glance__h { font-size:20px; line-height:26px; }
.glance__list { display:grid; gap:var(--space-3); margin:0; }
.glance__list div { display:grid; gap:2px; border-bottom:var(--border-hairline) solid var(--line-hairline); padding-bottom:var(--space-3); }
.glance__list dt { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-subtle); }
.glance__list dd { margin:0; font-size:15px; line-height:22px; color:var(--ink); }
.glance .btn { white-space:normal; text-align:center; flex-wrap:wrap; }
.glance__meta { font-weight:400; opacity:.8; }
.glance__note { font-size:13px; line-height:19px; color:var(--ink-muted); }
.stdlist__more { margin-top:var(--space-6); font-size:15px; line-height:23px; color:var(--ink-muted); }
.std__code a { color:inherit; text-decoration:underline; text-decoration-color:var(--hue-chart); text-underline-offset:3px; }
.std__code a:hover { color:var(--link-hover); }

.stdpromo { display:grid; grid-template-columns:1.3fr .7fr; gap:var(--space-16); align-items:center; }
.stdpromo__copy { display:grid; gap:var(--space-6); }
.stdpromo__actions { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.stdpromo__facts { display:grid; gap:var(--space-5); margin:0; }
.stdpromo__facts div { display:grid; grid-template-columns:96px 1fr; gap:var(--space-4); align-items:baseline; border-bottom:var(--border-hairline) solid var(--line-hairline); padding-bottom:var(--space-4); }
.stdpromo__facts dt { font-size:40px; line-height:44px; font-weight:600; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.stdpromo__facts dd { margin:0; font-size:16px; line-height:24px; color:var(--ink-muted); }

@media (max-width:1080px) {
  .stddoc { grid-template-columns:minmax(0,1fr); gap:var(--space-12); }
  .glance { position:static; order:-1; }
  .glance__list { grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); column-gap:var(--space-6); }
  .stdpromo { grid-template-columns:minmax(0,1fr); gap:var(--space-10); }
}
@media (max-width:720px) {
  .stddoc__pair { grid-template-columns:minmax(0,1fr); gap:var(--space-10); }
  .stddoc__h { font-size:22px; line-height:28px; }
  .stdfilter__label { min-width:0; width:100%; }
  .stdcheck li { padding-left:var(--space-10); }
  .changes--dated .change { grid-template-columns:minmax(0,1fr); gap:var(--space-2); }
}

/* --- November 6, 2026: documented information; the two-partner team ---------- */
.docinfo { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--space-8); align-items:start;
  margin-top:var(--space-16); margin-bottom:var(--space-16); }
.docinfo__main, .docinfo__side { background:var(--surface-000); border:var(--border-hairline) solid var(--line-hairline);
  border-radius:var(--radius-lg); padding:var(--space-8); display:grid; gap:var(--space-4); align-content:start; }
.docinfo h3 { font-size:24px; line-height:30px; letter-spacing:-.01em; }
.docinfo p { color:var(--ink-muted); }
.docinfo strong { color:var(--ink); font-weight:600; }
.docinfo__records { margin:0 0 0 var(--space-6); }
.docinfo__summary { background:var(--accent-tint); border-radius:var(--radius-md); padding:var(--space-5); display:grid; gap:var(--space-2); }
.docinfo__label { font-size:12px; line-height:16px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink) !important; }
.docinfo__more a { font-weight:600; }
.teamgrid--two { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1040px; margin-inline:auto; }
.venn--two { max-width:560px; }
@media (max-width:1080px) { .docinfo { grid-template-columns:1fr; } }
@media (max-width:560px) { .docinfo__main, .docinfo__side { padding:var(--space-6); } .docinfo__records { margin-left:0; grid-template-columns:1fr; }
  .teamgrid--two { grid-template-columns:1fr; } }