/* ---------- 0. FONTS (self-hosted — §58 performance, §62 no third-party requests) ---------- */

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

/* ============================================================
   ANUVRA CLINICAL SOLUTIONS
   Design system — v1.0
   Palette, type and layout per master brand brief §13–§19.
   Typography does the visual work. No cards. No icons.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root {
  /* The six approved colors — Brand Standards v1.0 §03. No others. */
  --forest:        #173B32;
  --ivory:         #F5F0E6;
  --ink:           #172126;
  --terracotta:    #A65347;
  --stone:         #D8D1C4;   /* hairlines only. Never a fill, never text. */
  --grey:          #7A807C;   /* 3.6:1 on ivory — large text only, never essential small text */

  /* Documented Anuvra tints (Brand System v1.0 working set, not new colors).
     The six above do not cover reversed or alternating surfaces. */
  --sand:          #EAE3D5;   /* alternating section background */
  --forest-deep:   #0E2A23;   /* button hover on forest */
  --ink-soft:      #3B4642;   /* softened body on ivory — 8.6:1, replaces grey for small text */
  --on-forest-tx:  #BFCCC4;   /* body on forest — 7.4:1 */
  --on-forest-lbl: #8FAA9B;   /* muted label on forest — 4.9:1 */

  /* Section-label color, scoped per surface. §03 makes terracotta the label
     color; §06B requires re-verifying it on anything but ivory or white. On
     --sand it measures 4.16:1 and fails AA, so sand sections take forest
     labels rather than introducing a seventh color. */
  --label-c:       var(--terracotta);

  --rule:          #D8D1C4;   /* hairline on ivory — Warm Stone, its only approved use */
  --rule-forest:   #2E5147;   /* hairline on forest */

  /* Type — §14 */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Brand Standards §04 digital scale. Mobile floor → desktop ceiling. */
  --t-h1:    clamp(2.5rem, 1.36rem + 3.8vw, 4.5rem);       /* 40 → 72 */
  --t-h2:    clamp(1.875rem, 1.36rem + 1.71vw, 3rem);      /* 30 → 48 */
  --t-h3:    clamp(1.25rem, 1.07rem + 0.61vw, 1.75rem);    /* 20 → 28 */
  --t-h4:    clamp(1.0625rem, 1rem + 0.21vw, 1.25rem);     /* 17 → 20 */
  --t-body:  clamp(1rem, 0.96rem + 0.13vw, 1.125rem);      /* 16 → 18 */
  --t-lede:  clamp(1.125rem, 1.04rem + 0.29vw, 1.375rem);  /* 18 → 22 */
  --t-small: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);      /* 14 → 16 */
  --t-label: 0.8125rem;                                     /* 13 */

  /* Rhythm — §17. Deliberately several values, not one. */
  --s-xl: clamp(4.5rem, 3.5rem + 4vw, 6.5rem); /*  72 → 104 */
  --s-lg: clamp(3.75rem, 3rem + 3vw, 5.5rem);  /*  60 →  88 */
  --s-md: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  --s-sm: clamp(2.5rem, 2.1rem + 1.6vw, 3.5rem);

  --wrap: 1200px;
  --gut:  clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
}

/* ---------- 2. RESET ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;                /* §04: 1.45–1.65 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; }

/* ---------- 3. TYPOGRAPHY ---------- */

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 600;                /* §04: H1, H2 and H3 are all Serif 600 */
  color: var(--forest);
  margin: 0;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); line-height: 1.12; }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.008em; }

h4, h3.sub, .sub {
  font-family: var(--sans);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1.05em; max-width: 66ch; }   /* §04: 62–68 character reading width */
p:last-child { margin-bottom: 0; }

/* §15 — most paragraphs left aligned, never centred at length */
.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink);
  max-width: 40ch;
}
.lede-wide { max-width: 52ch; }

.small   { font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }
.measure { max-width: 62ch; }

strong, b { font-weight: 600; }

/* Editorial label — §24. Sans, uppercase, tracked, quiet. */
.label {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label-c);           /* terracotta on ivory, forest on sand, sage on forest */
  margin: 0 0 1.5rem;
  line-height: 1.4;
}

/* Serif statement — used sparingly for brand language */
.statement {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--forest);
  max-width: 22ch;
}

/* ---------- 4. LINKS ---------- */

a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--terracotta); }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}
.on-forest :focus-visible { outline-color: var(--ivory); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--forest); color: var(--ivory);
  padding: 0.75rem 1.25rem; z-index: 999; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- 5. LAYOUT ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

section { position: relative; }

.sec, .sec-lg { padding-block: var(--s-lg); }
.sec-xl       { padding-block: var(--s-xl); }

/* Adjacent sections on the same background render as one continuous block, so
   the invisible seam between them was costing a full padding twice over. Halve
   it: the rhythm inside a block should be tighter than the rhythm between
   blocks, which is what the eye expects anyway. */
.on-sand + .on-sand,
.on-forest + .on-forest { padding-top: calc(var(--s-lg) * 0.4); }
.on-sand:has(+ .on-sand),
.on-forest:has(+ .on-forest) { padding-bottom: calc(var(--s-lg) * 0.4); }

/* The home hero sits directly under the header, so it does not need a full
   section's separation above it — there is nothing above to separate from, and
   the header already carries its own generous padding. --s-xl put 136px between
   the logo and the first label at desktop, which read as a gap rather than as
   breathing room. This matches the scale .pagehead uses on every other page. */
.hero         { padding-top: clamp(3.25rem, 2.6rem + 2.6vw, 5.25rem); }
.sec-md       { padding-block: var(--s-md); }

/* Asymmetric rhythm — §19. Sections do not all weigh the same. */
.mt-md { margin-top: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem); }
.mt-lg { margin-top: clamp(3.25rem, 2.6rem + 2.6vw, 5rem); }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

/* 12-column editorial grid — §17 */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  row-gap: var(--s-sm);
}

/* Spans set grid-column-END only. Using the `grid-column: span N` shorthand
   would set the START to `span N` and leave the end auto, which silently
   collapses any element that also carries a .startN class.
   The full 1-12 set is kept even where a span is currently unused: a gap in
   the scale is a trap, because class="c2" would then silently do nothing. */
.c1  { grid-column-end: span 1; }  .c2  { grid-column-end: span 2; }
.c3  { grid-column-end: span 3; }  .c4  { grid-column-end: span 4; }
.c5  { grid-column-end: span 5; }  .c6  { grid-column-end: span 6; }
.c7  { grid-column-end: span 7; }  .c8  { grid-column-end: span 8; }
.c9  { grid-column-end: span 9; }  .c10 { grid-column-end: span 10; }
.c11 { grid-column-end: span 11; } .c12 { grid-column-end: span 12; }

.start2 { grid-column-start: 2; } .start3 { grid-column-start: 3; }
.start4 { grid-column-start: 4; } .start5 { grid-column-start: 5; }
.start6 { grid-column-start: 6; } .start7 { grid-column-start: 7; }
.start8 { grid-column-start: 8; }

.self-end { align-self: end; }

/* Surfaces */
.on-forest {
  background: var(--forest);
  color: var(--on-forest-tx);
  --label-c: var(--on-forest-lbl);
}
.on-forest h1, .on-forest h2, .on-forest h3, .on-forest .statement, .on-forest .display { color: var(--ivory); }
.on-forest h4, .on-forest h3.sub, .on-forest .sub { color: var(--ivory); }
.on-forest .lede { color: var(--ivory); }
.on-forest p { color: var(--on-forest-tx); }
.on-forest a { color: var(--ivory); }
.on-forest a:hover { color: var(--on-forest-lbl); }
.on-forest .small { color: var(--on-forest-tx); }

/* Alternating surface. Terracotta measures 4.16:1 here and fails AA, so the
   section label falls back to forest — see the --label-c note in the tokens. */
.on-sand { background: var(--sand); --label-c: var(--forest); }

/* ---------- 6. RULES & THE CONTINUITY MOTIF ---------- */
/* §12 — hairline rules. The horizontal continuity thread that used to live
   here was removed on 2 September at the client's request; the sequence it
   drew is carried by the between-visit workflow, which is semantic and
   tagged with who is responsible for each step. */

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.on-forest .rule { border-color: var(--rule-forest); }


/* Vertical continuity: the process spine. §30 — no cartoon number circles.
   RESTORED 2 September after being deleted by an over-broad dead-CSS removal.
   Nothing in the test suite notices when a component silently becomes plain
   text, which is why this survived four green runs. */

.spine { position: relative; margin: 0; padding: 0; }
.spine > li {
  position: relative;
  padding-left: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  padding-bottom: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
}
.spine > li:last-child { padding-bottom: 0; }
.spine > li::before {          /* the line */
  content: "";
  position: absolute;
  left: 3px; top: 0.55em; bottom: 0;
  width: 1px;
  background: var(--rule);
}
.spine > li:last-child::before { bottom: auto; height: 0; }
.spine > li::after {           /* the clinical touchpoint */
  content: "";
  position: absolute;
  left: 0; top: calc(0.55em - 3px);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--stone);
  transition: background 300ms ease, transform 300ms ease;
}
.spine > li.is-past::after { background: var(--terracotta); transform: scale(1.1); }
.no-js .spine > li::after,
.reveal-all .spine > li::after { background: var(--terracotta); }
@media (prefers-reduced-motion: reduce) { .spine > li::after { transition: none; } }
.on-forest .spine > li::before { background: var(--rule-forest); }
.on-forest .spine > li::after  { background: var(--terracotta); }

/* Step label — "01 — Fit conversation". 15 uses across the site, and it has
   been unstyled body text since the same deletion. */
.step-n {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label-c);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.on-forest .step-n { color: var(--on-forest-tx); }

/* ---------- 7. BUTTONS & ACTIONS ---------- */
/* Rectangular. §18 bans pill shapes. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--forest);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  padding: 1.125rem 1.75rem;
  border: 1px solid var(--forest);
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.btn:hover { background: var(--forest-deep); border-color: var(--forest-deep); color: var(--ivory); }
.btn-ivory::after, .on-forest .btn-ivory::after { background: var(--terracotta); }
.btn::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); flex: 0 0 auto; }

.btn-ivory,
.on-forest .btn-ivory { background: var(--ivory); color: var(--forest); border-color: var(--ivory); }
.btn-ivory:hover,
.on-forest .btn-ivory:hover { background: var(--stone); border-color: var(--stone); color: var(--forest); }
.btn-ivory::after { background: var(--terracotta); }

.btn-outline { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn-outline:hover { background: var(--forest); color: var(--ivory); }
/* A plain .btn on forest is outlined; .btn-ivory stays filled. Both selectors
   have the same specificity, so :not() is what keeps them from fighting. */
.on-forest .btn:not(.btn-ivory) { background: transparent; color: var(--ivory); border-color: var(--rule-forest); }
.on-forest .btn:not(.btn-ivory):hover { background: var(--forest-deep); border-color: var(--stone); }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2rem;
  transition: border-color 180ms ease, color 180ms ease;
}
.link-arrow:hover { color: var(--terracotta); border-color: var(--terracotta); }
.link-arrow span { transition: transform 180ms ease; display: inline-block; }
.link-arrow:hover span { transform: translateX(3px); }
.on-forest .link-arrow { color: var(--ivory); border-color: var(--rule-forest); }
.on-forest .link-arrow:hover { color: var(--on-forest-lbl); border-color: var(--on-forest-lbl); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

.microcopy {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-top: 1.5rem;
}
.on-forest .microcopy { color: var(--on-forest-tx); }

/* ---------- 8. EDITORIAL LISTS (in place of cards — §27, §29) ---------- */

.stack > * + * { margin-top: clamp(2rem, 1.6rem + 1.6vw, 3.25rem); }

/* Ruled list — thin rules, not boxes */

/* Plain marked list */
.marks { margin: 0; }
.marks li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.marks li:last-child { margin-bottom: 0; }
.marks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
}
.on-forest .marks li { color: var(--on-forest-tx); }
.on-forest .marks li::before { background: var(--terracotta); }

/* Problem / what we do / what stays with you — §36. Rules, not boxes. */
.triad { display: grid; gap: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.triad > div { border-top: 1px solid var(--rule); padding-top: 1.15rem; }
.triad > div > .key,
.triad > div > h4 {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label-c);
  margin: 0 0 0.7rem;
}
.on-forest .triad > div { border-color: var(--rule-forest); }
.on-forest .triad > div > .key,
.on-forest .triad > div > h4 { color: var(--on-forest-lbl); }

/* Legal pages: section headings are h2 but should not shout like a page section */
h2.legal-h { font-size: var(--t-h3); line-height: 1.22; letter-spacing: -0.012em; }

/* Page opener — every interior page starts the same way, so the site reads as one document */
.pagehead { padding-top: clamp(3.25rem, 2.6rem + 2.6vw, 5rem); padding-bottom: var(--s-md); }

/* ---------- 9. FIGURES (pilot numbers — §31) ---------- */

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2.5rem, 2rem + 4vw, 5.5rem);
  align-items: flex-start;
}

/* Three figures across one hairline band. Keeps them on a single row and stops
   the section collapsing into an L of numbers with air beside it. */
.figs-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
.figs-band .figure { padding: 1.35rem 1.25rem 0 0; }
.figs-band .figure + .figure {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
}
.figs-band .num { font-size: clamp(2.75rem, 1.7rem + 3.2vw, 4.25rem); }
.on-sand .figs-band { border-top-color: var(--stone); }
@media (max-width: 620px) {
  /* WCAG 2.2 SC 2.5.8 — 24x24 minimum. Footer and contact links are lists, not
     links inside a sentence, so the inline exception does not apply to them. */
  .ftr li a,
  .marks li a,
  p a[href^="tel:"],
  p a[href^="mailto:"],
  .ftr .legal a {
    display: inline-block;
    padding-block: 0.3rem;
  }
  .ftr nav li, .ftr ul li { margin-bottom: 0.25rem; }

 .figs-band .num { font-size: 2.5rem; } }
.figure .num {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.75rem, 2.5rem + 5vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--forest);
}
.on-forest .figure .num { color: var(--ivory); }
.figure .cap {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.on-forest .figure .cap { color: var(--on-forest-tx); }

/* ---------- 10. RESPONSIBILITY MATRIX (§38) ---------- */


.on-forest .matrix .key,

/* ============================================================
   VISUAL LIFE LAYER
   Process made visible. Every component below exists to let a
   reader picture the work, not to fill space.
   ============================================================ */

/* ---------- The signature between-visit workflow ----------
   A hairline running the margin with terracotta touchpoints (§05),
   tapering as it descends because the mark "begins quietly and gains
   weight." Each stage steps slightly right, so the sequence rises. */

.workflow { position: relative; margin: 0; padding: 0; counter-reset: wf; }
.workflow > li {
  position: relative;
  padding-left: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem);
  padding-bottom: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  margin-left: calc(var(--step, 0) * clamp(0px, -0.5rem + 1.4vw, 1.75rem));
  transition: margin-left 240ms ease;
}
.workflow > li:last-child { padding-bottom: 0; }

/* the line */
.workflow > li::before {
  content: "";
  position: absolute;
  left: 5px; top: 0.7em; bottom: 0;
  width: 1px;
  background: var(--rule);
  transform-origin: top;
}
.workflow > li:nth-child(2)::before { width: 1.5px; left: 4.75px; }
.workflow > li:nth-child(3)::before { width: 2px;   left: 4.5px; }
.workflow > li:nth-child(4)::before { width: 2.5px; left: 4.25px; }
.workflow > li:nth-child(5)::before { width: 3px;   left: 4px; }
.workflow > li:last-child::before { bottom: auto; height: 0; }

/* the touchpoint */
.workflow > li::after {
  content: "";
  position: absolute;
  left: 0; top: calc(0.7em - 5px);
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ivory);
  border: 2px solid var(--rule);
  transition: background 300ms ease, border-color 300ms ease, transform 300ms ease;
}
.on-sand .workflow > li::after { background: var(--sand); }
.workflow > li.is-past::after {
  background: var(--terracotta);
  border-color: var(--terracotta);
  transform: scale(1.12);
}
.workflow > li.is-past::before { background: var(--terracotta); opacity: 0.32; }

.wf-stage {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label-c);
  margin-bottom: 0.5rem;
}
.wf-what {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--forest);
  margin: 0;
  max-width: 26ch;
}
.wf-detail { font-size: var(--t-small); color: var(--ink-soft); margin: 0.5rem 0 0; max-width: 46ch; }

@media (prefers-reduced-motion: reduce) {
  .workflow > li, .workflow > li::after, .workflow > li::before { transition: none; }
}

/* ---------- Horizontal pathway (contact attempts, Services 02) ---------- */

.pathway { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pathway > li {
  flex: 1 1 8.5rem;
  padding: 1.15rem 1rem 1.25rem 0;
  position: relative;
}
.pathway > li + li { padding-left: 1rem; }
.pathway > li::before {
  content: "";
  position: absolute;
  left: 0; top: -4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--terracotta);
}
.pathway > li + li::before { left: 1rem; }
.pathway .p-n {
  display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.35rem;
}
.pathway .p-t { display: block; font-weight: 600; font-size: 1rem; color: var(--forest); line-height: 1.3; }

/* ---------- Traceability schematic (Services 04) ---------- */

.trace { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem,100%),1fr)); gap: 0;
         border-top: 2px solid var(--forest); }
.trace > div { padding: 1.25rem 1.25rem 1.5rem 0; }
.trace > div + div { border-left: 1px solid var(--rule); padding-left: 1.25rem; }
.trace dt {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--label-c); margin-bottom: 0.55rem;
}
.trace dd { margin: 0; font-size: var(--t-small); color: var(--ink); line-height: 1.5; }

/* ---------- Responsibility as one connected workflow (§38) ---------- */

.respflow { display: grid; gap: 0; }
.respflow > div { position: relative; padding: 1.5rem 0 1.75rem clamp(2rem,1.5rem + 2vw,3.25rem); }
.respflow > div::before {
  content: ""; position: absolute; left: 5px; top: 1.9rem; bottom: -0.5rem;
  width: 1px; background: var(--rule-forest);
}
.respflow > div:last-child::before { display: none; }
.respflow > div::after {
  content: ""; position: absolute; left: 0; top: 1.55rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--terracotta);
}
.respflow h3 {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-forest-lbl); margin: 0 0 0.9rem;
}
.respflow ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; }
.respflow li { font-size: 1.0625rem; color: var(--on-forest-tx); }

/* ---------- Editorial callout (§12 field notes) ---------- */

.note {
  border-left: 2px solid var(--terracotta);
  padding: 0.15rem 0 0.15rem 1.35rem;
  max-width: 46ch;
}
.note b {
  display: block; font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--label-c);
  margin-bottom: 0.5rem;
}
.note p { margin: 0; font-family: var(--serif); font-size: clamp(1.0625rem,1rem + 0.3vw,1.25rem);
          line-height: 1.4; color: var(--forest); }
.on-forest .note { border-left-color: var(--terracotta); }
.on-forest .note p { color: var(--ivory); }
.on-forest .note b { color: var(--on-forest-lbl); }

/* ---------- Illustrative monthly report ----------
   The one proof object. It shows what "auditable" produces without inventing
   a client, a number or a result. Values are deliberately empty. */

.report { border: 1px solid var(--rule); background: #FBF9F4; padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); }
.on-sand .report { background: var(--ivory); }
.report-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem;
}
.report-head b {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--label-c);
}
.report-head span { font-size: var(--t-small); color: var(--ink-soft); }
.report dl { display: grid; gap: 0; margin: 0 0 1.75rem; }
.report dl > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding-block: 0.6rem; border-bottom: 1px solid var(--rule);
}
.report dt { font-size: 1rem; color: var(--ink); }
.report dd {
  margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.125rem;
  color: var(--stone); letter-spacing: 0.08em;
}
/* Labels inside the illustrative document, not headings in the page outline */
.report .rk {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.4rem; max-width: none;
}
.report .block + .block { margin-top: 1.15rem; }
.report .block p { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.report .foot {
  margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: 0.8125rem; color: var(--ink-soft); font-style: italic;
}

/* ---------- Photography plate ----------
   No rounded corners, no card, no shadow. A rule, a crop, a caption. */

.plate { margin: 0; }
.plate img { width: 100%; display: block; object-fit: cover; }
.plate .cap {
  display: block; margin-top: 0.85rem; padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small); color: var(--ink-soft); max-width: 44ch;
}
.plate-wide img  { aspect-ratio: 16 / 6.5; }
.plate-square img{ aspect-ratio: 1 / 1; }
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* ---------- Phase disclosure (How It Works) ---------- */

.phase { border-top: 1px solid var(--rule); }
.phase > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: clamp(1rem,0.7rem + 1.4vw,2.5rem);
  padding-block: clamp(1.5rem,1.2rem + 1.2vw,2.25rem);
}
.phase > summary::-webkit-details-marker { display: none; }
.phase .ph-n {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--label-c);
}
.phase .ph-t {
  font-family: var(--serif); font-weight: 600; font-size: var(--t-h3); line-height: 1.2;
  letter-spacing: -0.008em; color: var(--forest);
}
.phase .ph-x { font-family: var(--sans); font-size: 1.375rem; color: var(--terracotta); line-height: 1; }
.phase[open] .ph-x::before { content: "\2013"; }
.phase:not([open]) .ph-x::before { content: "+"; }
.phase > summary:hover .ph-t { color: var(--terracotta); }
.phase .ph-body { padding: 0 0 clamp(1.75rem,1.4rem + 1.4vw,2.75rem); }

@media (max-width: 620px) {
  .phase > summary { grid-template-columns: 1fr auto; }
  .phase .ph-n { grid-column: 1 / -1; margin-bottom: 0.35rem; }
  .trace > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .pathway > li + li { padding-left: 0; }
  .pathway > li + li::before { left: 0; }
}

/* ---------- 11. FAQ (§64) ---------- */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding-block: 1.5rem;
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.28;
  color: var(--forest);
  letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--terracotta);
  line-height: 1;
  flex: 0 0 auto;
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--terracotta); }
.faq .answer { padding: 0 0 1.75rem; max-width: 62ch; }

/* ---------- 12. HEADER (§22) ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 240, 230, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.hdr.is-scrolled { border-bottom-color: var(--rule); }

.hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 84px;
}

.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand img, .brand svg { height: 40px; width: auto; }

.hdr-nav { display: flex; align-items: center; gap: clamp(1.25rem, 0.4rem + 1.8vw, 2.25rem); }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 0.4rem + 1.5vw, 2.125rem); }
.nav a, .hdr .btn { white-space: nowrap; }
.nav a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.nav a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }
.nav a[aria-current="page"] { color: var(--forest); border-bottom-color: var(--terracotta); }

.hdr .btn { padding: 0.8rem 1.25rem; font-size: 0.9688rem; }

.burger {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  line-height: 0;
}
.burger span {
  display: block; width: 20px; height: 1.5px;
  background: var(--forest);
  transition: transform 200ms ease, opacity 160ms ease;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: block; }
  .hdr-in { min-height: 72px; }
  .hdr-nav {
    position: fixed;
    inset: 72px 0 auto 0;
    background: var(--ivory);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 1.5rem var(--gut) 2rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .hdr-nav.is-open { display: flex; }
  .hdr-nav .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .hdr-nav .nav a {
    padding-block: 1rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1.125rem;
  }
  .hdr-nav .btn { margin-top: 1.5rem; justify-content: center; padding: 1.05rem 1.5rem; }
}

/* ---------- 13. FORMS (§43, §45, §60) ---------- */

.form { display: grid; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.5rem;
}
.field label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--forest);
  letter-spacing: 0.005em;
}
.field .hint { font-size: var(--t-small); color: var(--ink-soft); font-weight: 400; }
.req { color: var(--terracotta); font-weight: 600; }

.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 1.0625rem;   /* ≥16px on mobile — §59 */
  line-height: 1.5;
  color: var(--ink);
  background: #FFFFFF;             /* §03: white is used inside form fields */
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 160ms ease, background 160ms ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--forest);
  background: #fff;
  outline: 2px solid var(--terracotta);
  outline-offset: 1px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); opacity: 1; }

/* Quiet by design. The substance is unchanged and it is still the first thing
   above the form, but it no longer competes with the heading: the terracotta
   bar and the 600 weight are gone, and it now reads as a note rather than a
   warning notice. The same instruction is repeated on the message field
   itself, which is where it is actually needed. */
.phi-notice {
  padding: 0 0 0 1.1rem;
  border-left: 1px solid var(--stone);
  font-size: var(--t-small);
  color: var(--ink-soft);
  font-weight: 400;
  line-height: 1.55;
  max-width: 58ch;
}
.phi-notice strong { font-weight: 600; color: var(--ink); }

/* Consent checkbox. Unchecked by default, always. */
.consent {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.85rem 0 0.1rem;
}
.consent input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0.15rem 0 0; flex: 0 0 auto;
  accent-color: var(--forest); border-radius: 3px;
}
.consent label {
  font-weight: 400; font-size: var(--t-small); line-height: 1.5;
  color: var(--ink); cursor: pointer;
}

/* Form-level message, for a server-side failure the visitor must see */
.form-alert {
  border-left: 2px solid #8C2F22;
  background: #FBF3F1;
  padding: 0.9rem 1.1rem;
  font-size: var(--t-small);
  line-height: 1.55;
  color: #172126;
  max-width: 62ch;
}
.form-alert[hidden] { display: none !important; }
.form-alert b { display: block; font-weight: 600; margin-bottom: 0.2rem; }

.btn[aria-busy="true"] { opacity: 0.72; pointer-events: none; }

.field-error { font-size: var(--t-small); color: #8C2F22; font-weight: 600; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: #8C2F22;
}

/* ---------- 14. FOOTER (§54) ---------- */

.ftr { background: var(--forest); color: var(--on-forest-tx); padding-block: var(--s-md) var(--s-sm); }
.ftr .ftr-name {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-forest-lbl);
  margin: 0;
}
.ftr .brandline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-h3);
  color: var(--ivory);
  letter-spacing: -0.014em;
  margin: 0.85rem 0 0;
}
.ftr .ftr-h {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-forest-lbl);
  margin: 0 0 1.1rem;
}
.ftr nav li { margin-bottom: 0.6rem; }
.ftr a { color: var(--on-forest-tx); text-decoration: none; }
.ftr a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 0.22em; }
.ftr .legal {
  margin-top: var(--s-sm);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-forest);
  font-size: var(--t-small);
  color: var(--on-forest-tx);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  align-items: baseline;
}
.ftr .legal p { max-width: none; margin: 0; color: var(--on-forest-tx); }

/* ---------- 15. MOTION (§21) ---------- */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .link-arrow span { transition: none; }
}
.no-js .reveal,
.reveal-all .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- 16. RESPONSIVE GRID COLLAPSE ---------- */

@media (max-width: 900px) {
  .grid { row-gap: var(--s-sm); }
  .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11 { grid-column: 1 / -1; }
  .start2, .start3, .start4, .start5, .start6, .start7, .start8 { grid-column-start: 1; }
  .m-half { grid-column-start: auto; grid-column-end: span 6; }
  .statement, .lede { max-width: 34ch; }
  .lede-wide { max-width: none; }
}

@media (max-width: 620px) {
  /* The five-stop horizontal sequence collapses to one wrapped line with arrows,
     which keeps the order legible instead of stacking into an unordered list. */

  .m-half { grid-column: 1 / -1; }
  .statement { max-width: none; }
  .figures { gap: 2.25rem 3rem; }
  .faq summary { gap: 1.25rem; }
}

/* ---------- 17. PRINT ----------
   Tuned for the review PDF and for anyone printing a page for a meeting: the
   design survives, backgrounds render, and blocks do not split across pages.
   ------------------------------------------------------------------------ */

@media print {
  html, body {
    background: var(--ivory) !important;
    color: var(--ink) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 11pt;
  }
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .hdr { position: static !important; background: var(--ivory) !important;
         border-bottom: 1px solid var(--rule) !important; backdrop-filter: none; }
  .burger, .skip { display: none !important; }
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; }

  /* Screen rhythm is far too generous on paper */
  .sec, .sec-lg  { padding-block: 2.25rem; }
  .sec-xl        { padding-block: 2.75rem; }
  .hero          { padding-top: 1.75rem; }
  .sec-md        { padding-block: 1.75rem; }
  .pagehead      { padding-top: 1.75rem; padding-bottom: 1.5rem; }
  .ftr           { padding-block: 2rem 1.25rem; }

  /* Only genuinely atomic blocks resist a page break. Headings are deliberately
     allowed to flow: forbidding a break inside a four-line serif H2 pushes the
     whole section to the next page and leaves half a sheet empty. */
  section            { break-inside: auto; }
  .triad > div,
  .faq details,
  .figure,
  .actions,
  .spine > li        { break-inside: avoid; }
  h3, h4             { break-after: avoid; break-inside: avoid; }
  h1, h2, .statement { break-inside: auto; }
  p, li              { orphans: 3; widows: 3; break-inside: auto; }

  /* The FAQ prints open */
  .faq details       { }
  .faq .answer       { display: block !important; }

  a { text-decoration: none; }
  .btn { border: 1px solid var(--forest); }
  .btn-ivory { border-color: var(--ivory); }
}

/* ============================================================
   17. PROGRESSIVE DISCLOSURE, FLIP CARDS AND THE PICKED MOTION
   Added 2 September 2026 from the maximalist comparison build.
   Every colour below is one of the six approved values or a
   documented Anuvra tint. No sevenths.
   ============================================================ */

/* ---------- 17a. Disclosure ----------
   Detail folds behind a summary so a page can carry the same substance in a
   third of the scroll. One open at a time inside a section (see anuvra.js), or
   a reader reopens the page to its old height on the way down. */

.more { border-top: 1px solid var(--rule); margin-top: 1.25rem; }
.more + .more { margin-top: 0; }
.more summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 2.4rem 0.95rem 0;
  position: relative;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--forest);
  transition: color 200ms ease;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::marker { content: ""; }
.more summary:hover { color: var(--label-c); }
.more summary::after {          /* chevron, drawn not shipped */
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-72%) rotate(45deg);
  transition: transform 260ms ease;
}
.more[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.more[open] summary { color: var(--label-c); }
.more .body { padding-bottom: 1.35rem; }
.more[open] .body { animation: more-slide 340ms cubic-bezier(.2,.6,.2,1); }
@keyframes more-slide { from { opacity: 0; transform: translateY(-6px); } }

/* Dark variant, for a disclosure sitting on the forest band. Terracotta is
   2.87:1 on forest and fails AA, so the open state takes the sage label tint
   rather than a seventh colour. */
.on-forest .more,
.more.dark { border-top-color: var(--rule-forest); }
.on-forest .more summary,
.more.dark summary { color: var(--ivory); }
.on-forest .more summary:hover,
.on-forest .more[open] summary,
.more.dark summary:hover,
.more.dark[open] summary { color: var(--on-forest-lbl); }
.on-forest .more .body p,
.more.dark .body p { color: var(--on-forest-tx); }

/* A disclosure group closes with a hairline so the last summary is not left
   hanging on an open edge. */
.drops { border-bottom: 1px solid var(--rule); }
.on-forest .drops { border-bottom-color: var(--rule-forest); }

/* Numbered disclosure rows — the economics variables and the commitments. */
.more .d-n {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--label-c);
  min-width: 2.2ch;
  flex: 0 0 auto;
}
.on-forest .more .d-n, .more.dark .d-n { color: var(--on-forest-lbl); }
.more summary .d-t { font-size: 1.02rem; }
.more .body > p,
.more .body > ul { padding-left: 2.85ch; }
@media (max-width: 620px) { .more .body > p, .more .body > ul { padding-left: 0; } }

/* ---------- 17b. Flip card ----------
   Two faces stacked in one grid cell, so the card is as tall as the taller of
   the two and nothing is ever clipped. The back is forest; only one card in a
   group may be open at a time, which keeps the number of forest surfaces on a
   page inside Brand Standards §03. */

.flips { display: grid; gap: clamp(1rem, 0.8rem + 0.8vw, 1.4rem);
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.flip {
  perspective: 1400px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
}
.flip-in {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(.4,.1,.2,1);
}
.flip[aria-expanded="true"] .flip-in { transform: rotateY(180deg); }
.face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem;
  border-top: 2px solid var(--terracotta);
  background: transparent;
}
.face.back {
  transform: rotateY(180deg);
  background: var(--forest);
  border-top-color: var(--on-forest-lbl);
}
.face h3 { margin-bottom: 0.55rem; }
.face p { font-size: var(--t-small); color: var(--ink-soft); margin: 0; }
.face.back h3 { color: var(--ivory); }
.face.back p { color: var(--on-forest-tx); }
.flip .cue {
  margin-top: auto;
  padding-top: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label-c);
}
.face.back .cue { color: var(--on-forest-lbl); }
.flip .cue svg { width: 13px; height: 13px; stroke: currentColor; fill: none;
                 stroke-width: 2; transition: transform 300ms ease; }
.flip:hover .cue svg { transform: rotate(180deg); }
.flip:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }

/* On sand the front face keeps its own ground so the card reads as a surface
   you can turn, rather than as text that happens to move. */
.on-sand .face { background: var(--ivory); }
.on-sand .face.back { background: var(--forest); }

@media (prefers-reduced-motion: reduce) {
  .flip-in { transition: none; transform-style: flat; }
  .flip[aria-expanded="true"] .flip-in { transform: none; }
  .face { backface-visibility: visible; }
  .face.back { transform: none; display: none; }
  .flip[aria-expanded="true"] .face.front { display: none; }
  .flip[aria-expanded="true"] .face.back { display: flex; }
  .flip .cue svg, .flip:hover .cue svg { transition: none; transform: none; }
  .more[open] .body { animation: none; }
}

/* ---------- 17c. Responsibility split ----------
   Three columns from 900px up, where reading them side by side is the point.
   Below that they collapse into disclosures rather than stacking into one very
   long list. anuvra.js forces them open above the breakpoint. */

.respflow.drops > .col-d { border-top: 1px solid var(--rule-forest); }
.col-d summary { font-size: 1.02rem; }
.col-d .body ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; padding-left: 0; }
.col-d .body li { font-size: 1.0625rem; color: var(--on-forest-tx); }
@media (min-width: 900px) {
  .respflow.drops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                    gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start;
                    border-bottom: 0; }
  .respflow.drops > .col-d { border-top: 2px solid var(--terracotta); }
  .respflow.drops summary { cursor: default; pointer-events: none; padding-right: 0; }
  .respflow.drops summary::after { display: none; }
  .col-d .body ul { display: block; }
  .col-d .body li { margin-bottom: 0.35rem; }
}

/* ---------- 17d. Eyebrow rule (F2) ----------
   The section label gains the short terracotta rule the brand already uses
   above sub-headings, so every eyebrow on the site starts the same way. */

.label::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 2px;
  background: currentColor;
  vertical-align: 0.28em;
  margin-right: 0.7rem;
}

/* ---------- 17e. Pills (F5) ---------- */

.pills { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.pill {
  display: inline-block;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--forest);
  background: transparent;
}
.on-sand .pill { border-color: #C9BFAB; }
.on-forest .pill { border-color: var(--rule-forest); color: var(--ivory); }

/* ---------- 17f. Fee contrast (G3) ---------- */

.versus { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem);
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vs { border-top: 1px solid var(--rule-forest); padding-top: 1.25rem; }
.vs .tag {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-forest-lbl); margin: 0 0 0.75rem;
}
.vs h3 { font-size: var(--t-h3); margin-bottom: 0.8rem; }
.vs p { font-size: var(--t-small); }
.vs.us { border-top: 2px solid var(--terracotta); }

/* ---------- 17g. The minutes tool (C1) ----------
   Lives on a forest band at the top of Economics. Built to be walked up to:
   a display-scale counter that animates, a heavy meter, and activity buttons
   that look like they want pressing.

   Accuracy: the THRESHOLDS are real CMS monthly clinical-staff-time
   requirements (20 for base chronic care management and for behavioral health
   integration, 60 for complex). The minute value on each activity is
   illustrative and the copy says so. Nothing here carries a rate, a dollar
   figure or a projection.

   Colour on forest: the track is Deep Forest (a documented tint, used as a
   surface); the fill is terracotta, which is a graphic, not text. Warm Stone
   and Forest Rule appear only as borders. */

.acc { margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); }

.acc-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.acc-min { margin: 0; display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.acc-n {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.5rem, 2.2rem + 5.4vw, 6.5rem);
  line-height: 0.85; letter-spacing: -0.035em;
  color: var(--ivory); font-variant-numeric: tabular-nums;
  display: inline-block; min-width: 2ch;
}
.acc-min small {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-forest-lbl);
}
.acc-ctl { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; }
.acc-goals { display: flex; gap: 0.35rem; }
.gchip {
  cursor: pointer; background: transparent; border: 1px solid var(--rule-forest);
  border-radius: 999px; padding: 0.34rem 0.85rem;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  color: var(--on-forest-tx); line-height: 1.3;
}
.gchip:hover { border-color: var(--ivory); color: var(--ivory); }
.gchip[aria-pressed="true"] { background: var(--ivory); border-color: var(--ivory); color: var(--forest); }
.acc .reset {
  background: none; border: 0; padding: 0.3rem 0; cursor: pointer;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--on-forest-lbl);
  border-bottom: 1px solid var(--rule-forest);
}
.acc .reset:hover { color: var(--ivory); border-bottom-color: var(--ivory); }

/* The meter. Heavy on purpose — it is the thing the eye should land on. */
.meter {
  position: relative; height: 18px; border-radius: 999px;
  background: var(--forest-deep); overflow: hidden;
}
.meter i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--terracotta);
  transition: width 520ms cubic-bezier(.22,.61,.36,1), background 300ms ease;
}
.meter.is-met i { background: var(--ivory); }

.acc-scale {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.75rem; margin-top: 0.65rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--on-forest-lbl);
}
/* Always in the layout, so its arrival never pushes the page down under the
   finger that just tapped. visibility:hidden also keeps it out of the
   accessibility tree until it is true. */
.acc-flag {
  background: var(--ivory); color: var(--forest);
  padding: 0.22rem 0.7rem; border-radius: 999px; letter-spacing: 0.12em;
  visibility: hidden;
}
.acc-flag.is-on { visibility: visible; animation: acc-pop 380ms cubic-bezier(.3,1.5,.5,1); }
@keyframes acc-pop { from { transform: scale(0.7); opacity: 0; } }

/* The activities. Large enough to look pressable, and the first one carries a
   quiet attention ring until the reader touches anything. */
.acts { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.6rem; }
.act {
  cursor: pointer; background: transparent; border: 1px solid var(--rule-forest);
  border-radius: 999px; padding: 0.6rem 1.1rem;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  color: var(--ivory); line-height: 1.3; position: relative;
}
.act b { font-weight: 600; color: var(--on-forest-lbl); margin-left: 0.45rem; }
.act:hover { border-color: var(--ivory); }
.act:hover b { color: var(--ivory); }
.act:active { transform: translateY(1px); }
.acc:not(.is-touched) .act:first-child::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 1px solid var(--on-forest-lbl);
  animation: acc-ring 2.2s ease-out 2;   /* WCAG 2.2.2: must finish inside 5s */
}
@keyframes acc-ring {
  0%   { opacity: 0.9; transform: scale(1); }
  60%  { opacity: 0;   transform: scale(1.12); }
  100% { opacity: 0;   transform: scale(1.12); }
}

.acc-out {
  margin: 1.3rem 0 0; font-size: var(--t-lede); line-height: 1.45;
  color: var(--ivory); max-width: 54ch;
  /* Sized to the longest message so nothing below it moves when the text
     changes under the reader's finger. */
  min-height: 4.6em;
}
.acc-fine {
  margin: 1.4rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--rule-forest);
  font-size: var(--t-small); color: var(--on-forest-tx); max-width: 78ch;
}
.acc-fine strong { color: var(--ivory); }

@media (pointer: coarse) {
  /* 24px clears WCAG 2.5.8; 44px is what a thumb actually wants. */
  .act, .gchip { min-height: 44px; display: inline-flex; align-items: center; }
  .acc .reset { min-height: 44px; min-width: 44px; display: inline-flex;
                align-items: center; justify-content: center; }
}
@media (max-width: 400px) { .acc-scale { flex-wrap: wrap; } }
@media (max-width: 620px) {
  .acc-top { align-items: flex-start; }
  .acc-ctl { width: 100%; justify-content: space-between; }
  .act { padding: 0.55rem 0.95rem; }
  .acc-out { font-size: var(--t-body); min-height: 7.4em; }
}
@media (prefers-reduced-motion: reduce) {
  .meter i { transition: none; }
  .acc-flag.is-on, .acc:not(.is-touched) .act:first-child::after { animation: none; }
}
@media print {
  .acc-goals, .acc .reset, .acts { display: none; }
}

/* ---------- 17h. The interval, illustrated (C3) ----------
   Two panels over the same interval: what is scheduled inside it without
   between-visit contact, and what is scheduled inside it with contracted
   capacity. No day count and no interval length anywhere — three and six
   months are as common as one, so naming a number made the graphic wrong for
   most readers and made them do work to correct it.

   Rules this obeys:
   · Warm Stone appears only as a hairline stroke. §03 restricts it to that,
     so the quiet marks are sand with a stone edge rather than a stone fill.
   · Panel two shows contact that is SCHEDULED and LOGGED and an escalation
     that is ROUTED. It never shows a result: no readmission, no engagement
     rate, no clinical or financial outcome.
   · The whole thing is static SVG in the HTML, so it renders with JavaScript
     off, and the draw rides the site's existing .reveal observer, inheriting
     the .no-js and .reveal-all fallbacks. */

.tl { margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); max-width: 34rem; }

.tl-note {
  font-size: var(--t-small); color: var(--ink-soft);
  max-width: 52ch; margin: 0 0 1rem;
}
.tl-card {
  border: 1px solid var(--rule);
  padding: clamp(1rem, 0.85rem + 0.7vw, 1.4rem);
}
.tl-card + .tl-card { border-top: 0; }
/* One key for both panels: they share an encoding, so naming it twice is
   noise and costs a line of height that the graphic needs more. */
.tl-h {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 0.9rem;
}
.tl-card.b .tl-h { color: var(--label-c); }
.tl-svg { width: 100%; height: auto; display: block; overflow: visible; }
.tl-base { stroke: var(--rule); stroke-width: 1; }

/* The four marks. Sand carries the quiet ones; Warm Stone is their edge only. */
.bar.none  { fill: var(--sand);       stroke: var(--rule);      stroke-width: 0.6; }
.bar.visit { fill: var(--ivory);      stroke: var(--forest);    stroke-width: 1.6; }
.bar.out   { fill: var(--forest);     stroke: none; }
.bar.esc   { fill: var(--terracotta); stroke: none; }
.pip       { fill: var(--terracotta); }

.tl-key {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem;
  margin: 0.85rem 0 0; padding: 0;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.tl-key li { display: flex; align-items: center; gap: 0.42rem; }
.sw { width: 9px; height: 13px; border-radius: 1px; flex: 0 0 auto; }
.sw.none  { background: var(--sand);       border: 1px solid var(--rule); }
.sw.visit { background: var(--ivory);      border: 1.5px solid var(--forest); }
.sw.out   { background: var(--forest); }
.sw.esc   { background: var(--terracotta); }
.tl-d {
  font-size: var(--t-small); color: var(--ink-soft);
  max-width: 52ch; margin: 0.85rem 0 0;
}

/* ---- the draw ----
   The interval fills in left to right, panel one first, then panel two, so
   the reader sees the empty month before the worked one. Bars grow from the
   baseline; the escalation marker lands after its own bar. */
.tl .bar, .tl .pip { transform-box: fill-box; }
.tl .bar { transform-origin: bottom center; }
.tl .pip { transform-origin: center; }

.tl.reveal:not(.is-in) .bar { transform: scaleY(0); }
.tl.reveal:not(.is-in) .pip { opacity: 0; transform: scale(0); }

.tl.is-in .bar {
  transform: scaleY(1);
  transition: transform 320ms cubic-bezier(.22,.9,.3,1);
}
.tl.is-in .pip {
  opacity: 1; transform: scale(1);
  transition: opacity 240ms ease, transform 300ms cubic-bezier(.3,1.4,.5,1);
}
/* Panel one finishes at ~946ms. Panel two starts after it, not across it —
   the reader is meant to see the empty interval land before the worked one
   begins. Whole sequence ends just under two seconds. */
.tl-card.a .bar { transition-delay: calc(120ms + var(--i) * 22ms); }
.tl-card.b .bar { transition-delay: calc(1120ms + var(--i) * 22ms); }
.tl-card.b .pip { transition-delay: calc(1400ms + var(--i) * 22ms); }

.no-js .tl .bar, .no-js .tl .pip,
.reveal-all .tl .bar, .reveal-all .tl .pip {
  opacity: 1 !important; transform: none !important;
}

@media (max-width: 560px) {
  .tl-key { gap: 0.35rem 0.9rem; letter-spacing: 0.05em; }
  .tl-note { margin-bottom: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tl .bar, .tl .pip,
  .tl.reveal:not(.is-in) .bar, .tl.reveal:not(.is-in) .pip {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

@media print {
  .tl .bar, .tl .pip { opacity: 1 !important; transform: none !important; }
  .tl-card { break-inside: avoid; }
}

/* ---------- 17i-pre. Pull quote (F3) ----------
   One per page at most, or it stops being emphasis. It lifts a sentence that
   already exists in the prose; it never introduces a new claim. */

.pull {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--forest);
  max-width: 30ch;
  margin: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--terracotta);
}
.on-forest .pull { color: var(--ivory); }
.on-sand .pull { border-top-color: var(--forest); }

/* ---------- 17i. Per-step responsibility tag (G4) ---------- */

.wf-tag {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
}
.wf-tag.is-anuvra { color: var(--forest); border-color: var(--forest); }
.wf-tag.is-shared { color: var(--label-c); border-color: var(--terracotta); }
.on-forest .wf-tag { color: var(--on-forest-tx); border-color: var(--rule-forest); }

/* ---------- 17j. Display-size service numbers (F4) ---------- */

.svc-n {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--label-c);
  margin: 0 0 0.9rem;
}

/* ---------- 17k. Staggered reveal (C7) ----------
   Siblings arrive in sequence rather than together, which reads as authored
   rather than assembled. Delay only; nothing waits on a delay to become
   readable, and reduced motion drops it entirely. */

.reveal.d1.is-in { transition-delay: 90ms; }
.reveal.d2.is-in { transition-delay: 180ms; }
.reveal.d3.is-in { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal.d1, .reveal.d2, .reveal.d3 { transition-delay: 0ms !important; }
}

/* ---------- 17l. Counter (C2) ----------
   The figure animates from its own final value, which stays in the HTML, so a
   reader without JavaScript sees the number rather than a zero. */
.figure .num { font-variant-numeric: tabular-nums; }

/* ---------- 17m. Print ---------- */
@media print {
  .more .body   { display: block !important; }
  .more summary { display: none; }
  .flip-in      { display: block; }
  .face         { break-inside: avoid; }
  .face.back    { background: none; border-top-color: var(--rule);
                  transform: none; }   /* or it prints mirrored */
  .face.back h3 { color: var(--forest); }
  .face.back p  { color: var(--ink); }
  .flip .cue    { display: none; }
}