/* VETS Growth Marketing — site stylesheet.
   A port of the approved prototype (handoff prototype/assets/site.css) into cascade layers, with the
   components the prototype did not need (guide meta, table of contents, sources, key takeaways,
   prose tables, the honest "form not connected" notice).
   Every colour is a token in @layer tokens, mirrored from docs/design-system/_tokens.scss;
   Design/SiteCssTests fails on drift and on any raw hex outside that layer. */

@layer tokens, base, layout, components, prose, figures, utilities;

/* Self-hosted, latin subset, SIL OFL. Barlow Condensed for headings (700, 800), Inter for everything
   else. Two families, per the skill's performance rule. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-condensed-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/barlow-condensed-latin-800.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
}

@layer tokens {
  :root {
    --color-command-navy: #0B1826;
    --color-service-gold: #BE9D5B;
    --color-warm-white: #F7F5EF;
    --color-steel-gray: #65717D;
    --color-field-slate: #DCE1E5;
    --color-white: #FFFFFF;
    --color-ink: #17212B;
    --color-success: #2F6B57;

    --color-navy-raised: #13263A;
    --color-gold-hover: #CDAE6E;
    --color-gold-deep: #8A6E36;
    --color-ink-soft: #36424E;
    --color-on-navy-text: #D9DEE3;
    --color-on-navy-soft: #C7CED5;
    --color-on-navy-muted: #A9B3BD;
    --color-placeholder-line: #B9C2CA;
    --color-error: #A33A2F;
    --color-success-tint: #E6F0EC;
    --color-flag-tint: #FFF3CD;
    --color-flag-ink: #5C4500;

    /* Translucent derivatives of the palette (not new colours). */
    --color-gold-hairline: rgb(190 157 91 / 0.35);
    --color-gold-wash: rgb(190 157 91 / 0.25);
    --color-warm-white-line: rgb(247 245 239 / 0.55);
    --color-warm-white-hairline: rgb(247 245 239 / 0.1);
    --color-warm-white-border: rgb(247 245 239 / 0.4);
    --color-slate-wash: rgb(220 225 229 / 0.45);
    --shadow-sheet: 0 24px 60px -24px rgb(0 0 0 / 0.55);
    --shadow-card: 0 12px 32px -18px rgb(11 24 38 / 0.35);

    --font-heading: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    --font-body: "Inter", Arial, sans-serif;

    --radius-card: 12px;
    --radius-button: 6px;
    --content-max-width: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
    --section-y: clamp(40px, 5vw, 72px);
    --measure: 68ch;
    --header-height: 104px;
  }
  /* The header is sticky: on phones the logo is 64px and the header shrinks to match. */
  @media (max-width: 920px) { :root { --header-height: 88px; } }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }
  body { margin: 0; background: var(--color-warm-white); color: var(--color-ink); font: 400 17px/1.6 var(--font-body); }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; }
  p { margin: 0 0 1em; text-wrap: pretty; }
  h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; line-height: 1.02; letter-spacing: 0.005em; margin: 0 0 .45em; color: inherit; }
  h1 { font-size: clamp(2.75rem, 6.2vw, 4.75rem); text-transform: uppercase; }
  h2 { font-size: clamp(2rem, 4vw, 3rem); }
  h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.15; }
  :focus-visible { outline: 3px solid var(--color-service-gold); outline-offset: 3px; border-radius: 2px; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none; animation: none; }
  }
}

@layer layout {
  .wrap { max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--gutter); }
  .section { padding: var(--section-y) 0; }
  .section-white { background: var(--color-white); }
  .section-tight { padding: 8px 0 clamp(28px, 4vw, 48px); }
  .section-snug { padding: clamp(28px, 4vw, 48px) 0; }
  /* A section that continues the one above on the same background: no second top padding. */
  .section-continue { padding-top: 0; }
  .on-navy { background: var(--color-command-navy); color: var(--color-warm-white); }
  .on-navy .muted { color: var(--color-on-navy-muted); }
  .section-head { max-width: 960px; margin-bottom: 32px; }
  /* Heading on the left, its action on the right: the row is used edge to edge. */
  .section-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
  .section-head--split > div { flex: 1 1 520px; min-width: 0; }

  /* Header */
  .site-header { background: var(--color-command-navy); color: var(--color-warm-white); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--color-gold-hairline); }
  .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-height); }
  /* The stacked logo at its footer size, so "Growth Marketing" stays readable (option D, 2026-10-20). */
  .brand-link img { height: 80px; width: auto; }
  .nav { display: flex; align-items: center; gap: 28px; }
  .nav a { text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--color-warm-white); opacity: .9; }
  .nav a:hover, .nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-color: var(--color-service-gold); text-underline-offset: 6px; text-decoration-thickness: 2px; }
  .nav .btn { opacity: 1; text-decoration: none; color: var(--color-command-navy); }
  .nav-toggle { display: none; background: none; border: 1px solid var(--color-warm-white-border); color: var(--color-warm-white); border-radius: var(--radius-button); padding: 10px 14px; font: 600 .95rem var(--font-body); cursor: pointer; }

  /* Without JavaScript the nav simply stays open below the logo on small screens; site.js adds
     html.js and only then is it collapsed behind the toggle. */
  @media (max-width: 920px) {
    .site-header .wrap { flex-wrap: wrap; }
    .nav { flex-wrap: wrap; gap: 4px 20px; padding-bottom: 12px; }
    .js .site-header .wrap { flex-wrap: nowrap; }
    .js .nav-toggle { display: inline-flex; }
    .js .nav { display: none; position: absolute; left: 0; right: 0; top: var(--header-height); background: var(--color-command-navy); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; border-bottom: 1px solid var(--color-gold-hairline); }
    .js .nav.open { display: flex; }
    .js .nav a { padding: 14px 0; border-bottom: 1px solid var(--color-warm-white-hairline); }
    .js .nav .btn { margin-top: 16px; padding: 12px 22px; border-bottom: 0; }
    .brand-link img { height: 64px; }
  }

  /* Footer */
  .site-footer { background: var(--color-command-navy); color: var(--color-on-navy-soft); padding: 28px 0 8px; font-size: .95rem; }
  .footer-grid { display: grid; grid-template-columns: .8fr 1.1fr 1fr 1.1fr 1fr; gap: 28px; }
  .site-footer h2 { font-size: 1.15rem; color: var(--color-warm-white); text-transform: uppercase; letter-spacing: .04em; }
  .site-footer ul { list-style: none; padding: 0; margin: 0; }
  .site-footer li { margin-bottom: 10px; }
  .site-footer a { text-decoration: none; }
  .site-footer a:hover { color: var(--color-warm-white); text-decoration: underline; }
  .site-footer address { font-style: normal; }
  .footer-base { margin-top: 28px; padding: 16px 0 12px; border-top: 1px solid var(--color-gold-hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .86rem; }
  /* 80px tall is ~155px wide: as large as the first footer column allows at full width. */
  .footer-logo img { height: 80px; width: auto; }
  @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
  @media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 380px) { .footer-grid { grid-template-columns: 1fr; } }

  /* Two-column content + aside */
  .content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 64px); align-items: start; }
  @media (max-width: 960px) { .content-grid { grid-template-columns: minmax(0, 1fr); } }
}

@layer components {
  .lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 60ch; text-wrap: pretty; }
  /* In a section head the lede may run wider; beside an action it takes the whole row. (Here, not
     in layout, because components is the later layer and would otherwise cap it at 60ch.) */
  .section-head .lede { max-width: 72ch; }
  .section-head--split .lede { margin-bottom: 0; max-width: none; }
  .muted { color: var(--color-steel-gray); }

  .skip { position: absolute; left: -999px; top: 8px; background: var(--color-service-gold); color: var(--color-command-navy); padding: 10px 16px; z-index: 100; border-radius: var(--radius-button); font-weight: 600; }
  .skip:focus { left: 8px; }

  /* Signature motif: the logo's double gold rule. Only ever above an H2. */
  .rule2 { display: block; height: 8px; width: 72px; border-top: 2px solid var(--color-service-gold); border-bottom: 2px solid var(--color-service-gold); margin: 0 0 22px; }
  .on-navy .rule2 { opacity: .9; }

  /* Buttons: 6px radius, never pills. Gold is the primary CTA and nothing else. */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--radius-button); font: 600 1rem/1.2 var(--font-body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
  .btn-gold { background: var(--color-service-gold); color: var(--color-command-navy); }
  .btn-gold:hover { background: var(--color-gold-hover); }
  .btn-navy { background: var(--color-command-navy); color: var(--color-warm-white); }
  .btn-navy:hover { background: var(--color-navy-raised); }
  .btn-outline { background: transparent; color: var(--color-command-navy); border-color: var(--color-command-navy); }
  .btn-outline:hover { background: var(--color-white); }
  .on-navy .btn-outline { color: var(--color-warm-white); border-color: var(--color-warm-white-line); }
  .on-navy .btn-outline:hover { background: var(--color-navy-raised); border-color: var(--color-warm-white); }
  .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

  /* Hero */
  .hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(88px, 11vw, 140px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 50% 100%, 0 calc(100% - 44px)); }
  .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
  .hero h1 { max-width: 13ch; }
  .hero .lede { color: var(--color-on-navy-text); }
  .hero-notes { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .95rem; color: var(--color-on-navy-soft); }
  .hero-notes li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--color-service-gold); transform: rotate(45deg) translateY(-2px); }
  @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } }

  /* Signature element: the diagnosis sheet */
  .sheet { background: var(--color-warm-white); color: var(--color-ink); border-radius: var(--radius-card); padding: 28px 28px 22px; box-shadow: var(--shadow-sheet); border-top: 6px solid var(--color-service-gold); }
  .sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--color-field-slate); padding-bottom: 12px; margin-bottom: 6px; }
  .sheet-head h2 { font-size: 1.7rem; margin: 0; text-transform: uppercase; }
  .sheet-head span { font-size: .82rem; color: var(--color-steel-gray); }
  .sheet ol { list-style: none; counter-reset: move; margin: 0; padding: 0; }
  .sheet li { counter-increment: move; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--color-field-slate); }
  .sheet li:last-child { border-bottom: 0; }
  .sheet li::before { content: counter(move); font: 800 1.5rem/1 var(--font-heading); color: var(--color-command-navy); background: var(--color-field-slate); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 4px; }
  .sheet strong { display: block; font-weight: 600; line-height: 1.3; }
  .sheet small { color: var(--color-steel-gray); font-size: .88rem; line-height: 1.45; display: block; margin-top: 2px; }
  .sheet-foot { font-size: .8rem; color: var(--color-steel-gray); margin: 12px 0 0; }

  /* Commitments strip */
  .commit { display: grid; grid-template-columns: repeat(4, 1fr); }
  .commit div { padding: 26px 22px 6px 0; }
  .commit h3 { font-size: 1.3rem; margin-bottom: .3em; }
  .commit p { color: var(--color-steel-gray); font-size: .96rem; }
  @media (max-width: 920px) { .commit { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .commit { grid-template-columns: 1fr; } }

  /* Hires vs team comparison */
  .compare { width: 100%; border-collapse: collapse; background: var(--color-white); border-radius: var(--radius-card); overflow: hidden; }
  .compare th, .compare td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--color-field-slate); vertical-align: top; }
  .compare thead th { background: var(--color-command-navy); color: var(--color-warm-white); font: 700 1.15rem/1.2 var(--font-heading); letter-spacing: .02em; }
  .compare td:first-child { font-weight: 600; }
  .compare .yes { color: var(--color-success); font-weight: 600; }
  .compare tfoot td { background: var(--color-warm-white); font-weight: 600; }
  .table-scroll { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--color-field-slate); }

  /* Service rows */
  .rows { border-top: 2px solid var(--color-command-navy); }
  .row { display: grid; grid-template-columns: 280px minmax(0, 1fr) 210px; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--color-field-slate); }
  .row h3 { margin: 0; }
  .row p { margin: 0; color: var(--color-ink-soft); }
  .row a.more { justify-self: end; font-weight: 600; text-decoration-color: var(--color-service-gold); text-underline-offset: 4px; white-space: nowrap; }
  @media (max-width: 760px) { .row { grid-template-columns: 1fr; gap: 8px; } .row a.more { justify-self: start; } }

  /* Service cards (/services): one per service, each linking to its hub of guides. */
  /* Services: an accordion of <details> in two columns (owner's pick A), like the guide index. */
  .service-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 2px solid var(--color-command-navy); }
  .service-item { border-bottom: 1px solid var(--color-field-slate); scroll-margin-top: calc(var(--header-height) + 16px); }
  .service-item > summary { display: flex; align-items: center; gap: 14px; padding: 16px 4px; cursor: pointer; list-style: none; }
  .service-item > summary::-webkit-details-marker { display: none; }
  .service-item__text { flex: 1; min-width: 0; }
  .service-item h3 { margin: 0 0 3px; font-size: clamp(1.2rem, 1.6vw, 1.35rem); }
  .service-item > summary:hover h3 { text-decoration: underline; text-decoration-color: var(--color-service-gold); text-underline-offset: 4px; }
  .service-item__outcome { display: block; color: var(--color-ink-soft); font-size: .92rem; line-height: 1.45; }
  .service-item__chev { display: inline-grid; color: var(--color-gold-deep); }
  .service-item[open] .service-item__chev { transform: rotate(180deg); }
  .service-item__body { padding: 0 4px 18px 62px; }
  .service-item__body .icon-list { margin: 0 0 12px; font-size: .95rem; }
  .service-item .more, .next-step .more { font-weight: 600; text-decoration-color: var(--color-service-gold); text-underline-offset: 4px; }
  @media (max-width: 760px) { .service-acc { grid-template-columns: 1fr; } .service-item__body { padding-left: 4px; } }

  /* The two next steps under the service list, as one band. */
  .next-steps { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 28px; }
  .next-step { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start; padding: 24px 26px; border-radius: var(--radius-card); }
  .next-step h3 { margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.4rem); }
  .next-step p { margin: .4em 0 0; }
  .next-step .icon-list { margin: 12px 0 0; font-size: .95rem; }
  .next-step > :last-child { grid-column: 2; justify-self: start; margin-top: 12px; }
  .next-step--guides { background: var(--color-warm-white); border: 1px solid var(--color-field-slate); }
  @media (max-width: 760px) { .next-steps { grid-template-columns: 1fr; } .next-step > :last-child { grid-column: 1 / -1; } }

  /* Process */
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; }
  .steps li { counter-increment: step; padding: 0 24px 0 0; position: relative; }
  .steps li::before { content: counter(step); font: 800 3.4rem/1 var(--font-heading); color: var(--color-service-gold); display: block; margin-bottom: 14px; }
  .steps li::after { content: ""; position: absolute; top: 26px; left: 56px; right: 18px; height: 2px; background: var(--color-gold-hairline); }
  .steps li:last-child::after { display: none; }
  .steps h3 { text-transform: uppercase; letter-spacing: .03em; }
  @media (max-width: 920px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; } .steps li::after { display: none; } }
  @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

  /* Industry index */
  /* 310px columns at 1rem fit the longest names ("Landscaping & Lawn Care Companies") on one line, so
     every row is the same height. Narrower screens drop to two columns instead of wrapping names. */
  .industries { columns: 3 310px; column-gap: 56px; margin: 0; padding: 0; list-style: none; }
  .industries li { break-inside: avoid; border-bottom: 1px solid var(--color-field-slate); }
  .industries a { display: flex; justify-content: space-between; gap: 12px; padding: 20px 0; text-decoration: none; font-weight: 500; font-size: 1rem; }
  .industries a:hover { color: var(--color-command-navy); text-decoration: underline; text-decoration-color: var(--color-service-gold); text-underline-offset: 4px; }
  .industries span { color: var(--color-steel-gray); font-size: .88rem; font-weight: 400; white-space: nowrap; }

  /* Placeholder blocks: owner-supplied facts still to come. Visible on purpose. */
  .placeholder { border: 2px dashed var(--color-placeholder-line); border-radius: var(--radius-card); padding: 24px; background: repeating-linear-gradient(135deg, transparent 0 12px, var(--color-slate-wash) 12px 24px); }
  .placeholder .tag { display: inline-block; font-size: .78rem; font-weight: 600; background: var(--color-ink); color: var(--color-warm-white); padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; }
  .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .case { display: flex; flex-direction: column; align-items: flex-start; background: var(--color-white); border: 1px solid var(--color-field-slate); border-top: 3px solid var(--color-command-navy); border-radius: var(--radius-card); padding: clamp(22px, 3vw, 30px); }
  .case h3 { font-size: 1.6rem; margin: 16px 0 14px; }
  .case-label { font: 600 .82rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--color-steel-gray); margin: 0 0 4px; }
  .case-scope { list-style: none; padding: 0; margin: 0 0 20px; align-self: stretch; }
  .case-scope li { position: relative; padding: 8px 0 8px 20px; border-bottom: 1px solid var(--color-field-slate); font-weight: 500; line-height: 1.35; }
  .case-scope li::before { content: ""; position: absolute; left: 0; top: calc(8px + .45em); width: 8px; height: 8px; background: var(--color-service-gold); transform: rotate(45deg); }
  .case .more { margin-top: auto; font-weight: 600; text-decoration-color: var(--color-service-gold); text-underline-offset: 4px; }
  @media (max-width: 920px) { .cases { grid-template-columns: 1fr; } }
  .photo-ph { aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; color: var(--color-steel-gray); font-size: .9rem; }
  .ph-inline { background: var(--color-flag-tint); color: var(--color-flag-ink); padding: 0 4px; border-radius: 3px; font-size: .92em; }
  .on-navy .ph-inline, .site-footer .ph-inline { background: var(--color-gold-wash); color: var(--color-warm-white); }

  /* Founder */
  /* The photo column runs the full height of the text beside it: no empty band above or below. */
  .founder { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 64px); align-items: stretch; }
  /* Owner photos fill the same column, cropped to it; the focal point keeps Trevor in frame. */
  /* The image is taken out of flow so the text, not the photo's own height, sets the row height. */
  .founder-photo { display: block; position: relative; min-height: 280px; border-radius: var(--radius-card); overflow: hidden; background: var(--color-slate-wash); }
  .founder-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
  .founder-photo-scene img { object-position: 70% 28%; }
  @media (max-width: 860px) {
    .founder { grid-template-columns: 1fr; }
    .founder-photo { aspect-ratio: 4 / 3; min-height: 0; }
  }
  .facts { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--color-field-slate); }
  .facts li { padding: 12px 0; border-bottom: 1px solid var(--color-field-slate); }

  /* FAQ: visible H3 questions and full answers, from the same objects as the FAQPage schema. */
  /* Full width: two columns of questions on wide screens, so the row is used edge to edge. */
  .faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 56px); border-top: 2px solid var(--color-command-navy); }
  .faq-item { padding: 20px 0 6px; border-bottom: 1px solid var(--color-field-slate); }
  .faq h3 { font-family: var(--font-body); font-size: 1.08rem; font-weight: 600; line-height: 1.4; margin: 0 0 6px; }
  .faq p { color: var(--color-ink-soft); margin: 0 0 14px; }
  @media (max-width: 860px) { .faq-list { grid-template-columns: 1fr; } }

  /* Inner-page hero */
  .page-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 88px); }
  .page-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); max-width: 26ch; text-transform: none; line-height: 1.05; }
  .page-hero .lede { color: var(--color-on-navy-text); }
  .crumbs { font-size: .88rem; margin-bottom: 22px; color: var(--color-on-navy-muted); }
  .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
  .crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--color-service-gold); }
  .crumbs a { color: var(--color-on-navy-text); text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .page-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--color-on-navy-muted); }

  /* Answer box (AEO): the direct answer first */
  .answer { background: var(--color-white); border-left: 6px solid var(--color-service-gold); border-radius: 0 var(--radius-card) var(--radius-card) 0; padding: 24px 28px; margin: -40px 0 32px; position: relative; box-shadow: var(--shadow-card); max-width: 860px; }
  .answer h2 { font-size: 1.5rem; text-transform: uppercase; margin-bottom: .35em; }
  .answer p:last-child { margin: 0; }

  /* Sticky consultation aside */
  .aside { position: sticky; top: calc(var(--header-height) + 28px); background: var(--color-command-navy); color: var(--color-warm-white); border-radius: var(--radius-card); padding: 28px; }
  .aside h2 { font-size: 1.7rem; text-transform: uppercase; }
  .aside ul { padding-left: 1.1em; color: var(--color-on-navy-text); font-size: .95rem; }
  .aside .btn { width: 100%; }
  .aside-stack { display: grid; gap: 24px; position: sticky; top: calc(var(--header-height) + 28px); }
  .aside-stack .aside { position: static; }
  @media (max-width: 960px) { .aside, .aside-stack { position: static; } }
  /* In a short section there is nothing to scroll past, so the aside stays in place. */
  .content-grid--static .aside { position: static; }

  /* On this page */
  .toc { background: var(--color-white); border: 1px solid var(--color-field-slate); border-radius: var(--radius-card); padding: 22px 24px; font-size: .95rem; }
  .toc h2 { font-family: var(--font-body); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-steel-gray); margin-bottom: 10px; }
  .toc ol { margin: 0; padding-left: 1.2em; }
  .toc li { margin-bottom: 6px; }
  .toc a { text-decoration: none; }
  .toc a:hover { text-decoration: underline; text-decoration-color: var(--color-service-gold); }
  @media (max-width: 960px) { .toc { display: none; } }

  /* Key takeaways */
  .takeaways { background: var(--color-white); border: 1px solid var(--color-field-slate); border-top: 4px solid var(--color-command-navy); border-radius: var(--radius-card); padding: 22px 26px 8px; margin: 0 0 36px; }
  .takeaways h2 { font-size: 1.4rem; text-transform: uppercase; margin-bottom: .5em; }

  .checks { list-style: none; padding: 0; }
  .checks li { position: relative; padding-left: 30px; margin-bottom: .7em; }
  .checks li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 10px; height: 16px; border: solid var(--color-success); border-width: 0 3px 3px 0; transform: rotate(45deg); }

  /* Link lists */
  .related { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; border-top: 2px solid var(--color-command-navy); }
  .related a { display: block; padding: 16px 0; border-bottom: 1px solid var(--color-field-slate); text-decoration: none; font-weight: 500; }
  .related a:hover { text-decoration: underline; text-decoration-color: var(--color-service-gold); text-underline-offset: 4px; }
  .related small { display: block; color: var(--color-steel-gray); font-weight: 400; font-size: .86rem; margin-top: 2px; }
  .related-block + .related-block { margin-top: 40px; }
  .related-block h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

  /* Industries by speed (owner's pick C): a row per group, industries as pills that never wrap. */
  .industry-groups { border-top: 2px solid var(--color-command-navy); }
  .industry-group { display: grid; grid-template-columns: minmax(300px, 1.25fr) 2.6fr; gap: 16px 32px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--color-field-slate); }
  .industry-group__label { display: flex; gap: 14px; align-items: flex-start; }
  .industry-group h3 { margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.35rem); }
  .industry-group__label p { margin: 4px 0 0; color: var(--color-steel-gray); font-size: .9rem; line-height: 1.45; }
  .industry-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
  .industry-pills a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--color-field-slate); border-radius: 999px; background: var(--color-warm-white); font-weight: 500; font-size: .95rem; text-decoration: none; white-space: nowrap; }
  .industry-pills a .icon { color: var(--color-gold-deep); }
  .industry-pills a:hover { border-color: var(--color-service-gold); background: var(--color-white); }
  .industry-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; color: var(--color-steel-gray); font-size: .9rem; }
  .industry-legend .icon { color: var(--color-gold-deep); }
  .industry-legend .icon:nth-of-type(2) { margin-left: 14px; }
  @media (max-width: 760px) { .industry-group { grid-template-columns: 1fr; } .industry-pills a { white-space: normal; } }

  /* Sources */
  .sources { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--color-field-slate); font-size: .92rem; }
  .sources h2 { font-family: var(--font-body); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-steel-gray); }
  .sources ol { padding-left: 1.2em; margin: 0; }
  .sources li { margin-bottom: 6px; color: var(--color-ink-soft); }
  .byline-note { font-size: .88rem; color: var(--color-steel-gray); margin-top: 18px; }

  /* Forms */
  .form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; background: var(--color-white); padding: clamp(22px, 4vw, 36px); border-radius: var(--radius-card); border: 1px solid var(--color-field-slate); }
  .form .full { grid-column: 1 / -1; }
  .form label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
  .form .hint { font-weight: 400; color: var(--color-steel-gray); font-size: .85rem; }
  .form input, .form select, .form textarea { width: 100%; min-height: 48px; padding: 11px 14px; font: 400 1rem var(--font-body); color: var(--color-ink); background: var(--color-white); border: 1px solid var(--color-steel-gray); border-radius: var(--radius-button); }
  .form textarea { min-height: 120px; resize: vertical; }
  .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--color-command-navy); outline: 3px solid var(--color-service-gold); outline-offset: 1px; }
  .form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
  .form .check input { width: 20px; min-height: 20px; height: 20px; margin-top: 3px; flex: none; }
  .form [aria-invalid="true"] { border-color: var(--color-error); }
  .form .error { color: var(--color-error); font-size: .88rem; margin-top: 4px; display: none; }
  .form [aria-invalid="true"] + .error, .form .error.shown { display: block; }
  .form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  @media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

  .notice { border-left: 6px solid var(--color-service-gold); background: var(--color-white); border-radius: 0 var(--radius-card) var(--radius-card) 0; padding: 18px 22px; margin: 0 0 24px; box-shadow: var(--shadow-card); }
  .notice-ok { border-left-color: var(--color-success); background: var(--color-success-tint); color: var(--color-success); }
  .notice-error { border-left-color: var(--color-error); }
  /* A notice that hands off to the phone: the number is a button beside the text, never a wrapped link. */
  .notice-call { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
  .notice-call p { margin: 0; flex: 1 1 18rem; }
  .notice-call .btn { flex: none; white-space: nowrap; }
  .notice-call .btn .icon { color: var(--color-service-gold); }
  @media (max-width: 640px) { .notice-call .btn { width: 100%; } }

  /* Closing CTA strip: one line, joined to the footer below (same navy, a gold hairline between). */
  .cta-strip { border-bottom: 1px solid var(--color-gold-hairline); }
  .cta-strip__in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-block: clamp(28px, 3.5vw, 40px); }
  .cta-strip h2 { flex: 1 1 320px; margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.08; text-transform: uppercase; text-wrap: balance; }
  .cta-strip__tel { display: inline-flex; align-items: center; gap: 8px; color: var(--color-on-navy-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .cta-strip__tel .icon { color: var(--color-service-gold); }
  .cta-strip__tel:hover { color: var(--color-warm-white); text-decoration: underline; text-decoration-color: var(--color-service-gold); }

  /* Guide index: an accordion of <details>, every link in the HTML open or closed. */
  .guide-groups { border-top: 2px solid var(--color-command-navy); }
  .guide-group { border-bottom: 1px solid var(--color-field-slate); }
  .guide-group > summary { display: flex; align-items: center; gap: 14px; padding: 12px 4px; cursor: pointer; list-style: none; }
  .guide-group > summary::-webkit-details-marker { display: none; }
  .guide-group h3 { flex: 1; min-width: 0; margin: 0; font-size: clamp(1.2rem, 2vw, 1.4rem); text-transform: uppercase; letter-spacing: .02em; }
  .guide-group > summary:hover h3 { text-decoration: underline; text-decoration-color: var(--color-service-gold); text-underline-offset: 4px; }
  .guide-group__count { color: var(--color-steel-gray); font-size: .88rem; white-space: nowrap; }
  .guide-group__chev { display: inline-grid; color: var(--color-gold-deep); }
  .guide-group[open] .guide-group__chev { transform: rotate(180deg); }
  .guide-group__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 32px; padding: 0 4px 16px 62px; }
  .guide-group__links a { display: block; padding: 9px 0; border-top: 1px solid var(--color-field-slate); text-decoration: none; font-weight: 600; }
  .guide-group__links a:hover span { text-decoration: underline; text-decoration-color: var(--color-service-gold); text-underline-offset: 3px; }
  .guide-group__links small { display: block; margin-top: 2px; color: var(--color-steel-gray); font-size: .84rem; font-weight: 400; line-height: 1.4; }
  .guide-group__all span { color: var(--color-gold-deep); }
  @media (max-width: 640px) { .guide-group__links { padding-left: 4px; } .guide-group__count { display: none; } }

  /* Back to top: the logo's chevron pointing up, a navy face inside a gold edge so it shows on
     navy too. Without JavaScript it is always there; with it, only after the reader scrolls. */
  .to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: block; width: 50px; height: 56px; background: var(--color-service-gold); clip-path: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); text-decoration: none; }
  .to-top__face { position: absolute; inset: 2px; display: grid; place-items: center; padding-top: 8px; font-size: 20px; background: var(--color-command-navy); color: var(--color-service-gold); clip-path: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); }
  .to-top:hover .to-top__face { background: var(--color-navy-raised); }
  .to-top:focus-visible { outline: none; }
  .to-top:focus-visible .to-top__face { background: var(--color-service-gold); color: var(--color-command-navy); }
  .js .to-top:not(.is-shown) { display: none; }
  @media print { .to-top { display: none; } }

  /* Google reviews block. Score is static and updated by hand; who reviewed and what they mention sit
     in a panel beside it. Live review cards are not shown yet. */
  .reviews { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
  @media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }
  .score { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 6px; }
  .score-num { font: 800 clamp(4rem, 8vw, 5.5rem)/1 var(--font-heading); color: var(--color-command-navy); }
  .stars { color: var(--color-service-gold); font-size: 1.6rem; letter-spacing: 3px; }
  .reviews-score .btn { margin-top: 10px; }
  .reviews-detail { display: grid; gap: 28px; background: var(--color-warm-white); border: 1px solid var(--color-field-slate); border-top: 3px solid var(--color-command-navy); border-radius: var(--radius-card); padding: clamp(22px, 3.5vw, 36px); }
  .reviews-label { font: 600 .82rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--color-steel-gray); margin: 0 0 12px; }
  .reviewers { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .reviewers li { position: relative; padding: 10px 0 10px 20px; border-bottom: 1px solid var(--color-field-slate); font-weight: 500; line-height: 1.35; }
  .reviewers li::before { content: ""; position: absolute; left: 0; top: calc(10px + .45em); width: 8px; height: 8px; background: var(--color-service-gold); transform: rotate(45deg); }
  @media (max-width: 560px) { .reviewers { grid-template-columns: 1fr; } }
  .topics { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .topics li { border: 1px solid var(--color-field-slate); background: var(--color-white); border-radius: 999px; padding: 6px 14px; font-size: .92rem; font-weight: 500; }

  /* Industry profile facts on a hub */
  .profile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; border-top: 2px solid var(--color-command-navy); margin: 0; }
  .profile div { padding: 16px 0; border-bottom: 1px solid var(--color-field-slate); }
  .profile dt { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-steel-gray); }
  .profile dd { margin: 4px 0 0; }
  @media (max-width: 860px) { .profile { grid-template-columns: 1fr; } }
}

@layer prose {
  .prose { max-width: var(--measure); }
  .prose > :first-child, .prose .rule2 + h2 { margin-top: 0; }
  .founder .prose { max-width: none; }
  .prose .facts { padding-left: 0; }
  .prose h2 { margin-top: 1.6em; font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
  .prose h3 { margin-top: 1.4em; }
  .prose ul, .prose ol { padding-left: 1.2em; }
  .prose li { margin-bottom: .4em; }
  .prose a { text-decoration-color: var(--color-service-gold); text-underline-offset: 3px; text-decoration-thickness: 2px; }
  .prose strong { font-weight: 600; }
  .legal h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
  .legal > .placeholder { margin-bottom: 28px; }
  .prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--color-service-gold); color: var(--color-ink-soft); }
  .prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; background: var(--color-white); display: block; overflow-x: auto; }
  .prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--color-field-slate); vertical-align: top; }
  .prose thead th { background: var(--color-command-navy); color: var(--color-warm-white); font-weight: 600; }
  .prose dl { margin: 1.2em 0; border-top: 1px solid var(--color-field-slate); }
  .prose dt { font-weight: 600; padding-top: 12px; }
  .prose dd { margin: 4px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--color-field-slate); color: var(--color-ink-soft); }
  .prose hr { border: 0; border-top: 1px solid var(--color-field-slate); margin: 2em 0; }
  /* Boxed components inside an article keep their own heading styles (prose wins the cascade). */
  .prose .takeaways h2 { margin-top: 0; font-size: 1.4rem; }
  .prose .sources h2 { margin-top: 0; font-family: var(--font-body); font-size: .82rem; }
  /* The how-to section is a real sequence: numbered markers are earned here. */
  .prose #steps + ol { counter-reset: step; list-style: none; padding: 0; }
  .prose #steps + ol > li { counter-increment: step; position: relative; padding: 0 0 0 52px; margin-bottom: 1.1em; min-height: 36px; }
  .prose #steps + ol > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; display: grid; place-items: center; font: 800 1.3rem/1 var(--font-heading); color: var(--color-command-navy); background: var(--color-field-slate); border-radius: 4px; }
}

/* Icons and structural diagrams. Their own layer, AFTER prose, so the .prose rules for lists,
   tables and links never reach inside a figure: a later layer wins whatever the specificity. Move
   these rules into components and every diagram inside a guide picks up prose list padding.
   No transitions or animation beyond hover and focus (handoff §10). Gold on a light surface fails
   3:1 for graphics, so on light sections icons and accents are gold-deep; on navy they are gold. */
@layer figures {
  /* Icons: Lucide geometry from the inline sprite, coloured by currentColor. */
  .icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
  .icon-well { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-button); background: var(--color-white); border: 1px solid var(--color-field-slate); color: var(--color-gold-deep); }
  .icon-well .icon { width: 22px; height: 22px; vertical-align: 0; }
  .on-navy .icon-well, .aside .icon-well { background: var(--color-navy-raised); border-color: var(--color-gold-hairline); color: var(--color-service-gold); }

  /* Icons on existing components */
  /* Icon beside the title, text underneath at full width. */
  .commit > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; align-content: start; }
  .commit > div > .icon-well { width: 40px; height: 40px; }
  .commit > div > h3 { margin: 0; }
  .commit > div > p { grid-column: 1 / -1; margin-top: 10px; }
  .row h3 { display: flex; align-items: center; gap: 14px; }
  .profile dt { display: flex; align-items: center; gap: 8px; }
  .profile dt .icon { color: var(--color-gold-deep); width: 1.25em; height: 1.25em; }
  .industries a { justify-content: flex-start; align-items: baseline; }
  .industries a { gap: 10px; }
  .industries a > .icon { color: var(--color-gold-deep); align-self: center; }
  .industries a > span:last-child { margin-left: auto; }
  .icon-list { list-style: none; padding: 0; }
  .icon-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: .55em; }
  .icon-list .icon { margin-top: .25em; color: var(--color-gold-deep); }
  .aside .icon-list .icon, .on-navy .icon-list .icon { color: var(--color-service-gold); }
  .aside p .icon, .site-footer .icon { color: var(--color-service-gold); margin-right: 8px; }
  .site-footer li:has(> .icon) { display: flex; align-items: flex-start; }
  .site-footer li > .icon { margin-top: .2em; }
  .sources h2 .icon { margin-right: 6px; }
  .loop-note { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; font-weight: 600; }
  .on-navy .loop-note { color: var(--color-on-navy-text); }
  .loop-note .icon { color: var(--color-gold-deep); }
  .on-navy .loop-note .icon { color: var(--color-service-gold); }

  /* ── Diagrams ── Structural only: boxes, rules and chevrons, never a size that encodes a
     quantity. Each figure is a size container, so the same markup lays out for a phone, the
     guide column, the sidebar and a full-width section. */
  .dgm {
    --dgm-card: var(--color-white);
    --dgm-ink: var(--color-ink);
    --dgm-soft: var(--color-ink-soft);
    --dgm-line: var(--color-steel-gray);
    --dgm-border: var(--color-field-slate);
    --dgm-accent: var(--color-gold-deep);
    --dgm-strong: var(--color-command-navy);
    --dgm-on-strong: var(--color-warm-white);
    --dgm-strong-accent: var(--color-service-gold);
    --dgm-leak: var(--color-error);
    --dgm-check: var(--color-success);
    --dgm-note: var(--color-steel-gray);
    --dgm-frame: var(--color-command-navy);
    --dgm-gap: 30px;
    container: dgm / inline-size;
    margin: 2.4em 0;
    padding-top: 20px;
    border-top: 2px solid var(--dgm-frame);
  }
  .on-navy .dgm, .aside .dgm {
    --dgm-card: var(--color-navy-raised);
    --dgm-ink: var(--color-warm-white);
    --dgm-soft: var(--color-on-navy-text);
    --dgm-line: var(--color-on-navy-muted);
    --dgm-border: var(--color-gold-hairline);
    --dgm-accent: var(--color-service-gold);
    --dgm-strong: var(--color-warm-white);
    --dgm-on-strong: var(--color-command-navy);
    --dgm-strong-accent: var(--color-gold-deep);
    --dgm-leak: var(--color-on-navy-text);
    --dgm-check: var(--color-service-gold);
    --dgm-note: var(--color-on-navy-muted);
    --dgm-frame: var(--color-warm-white-border);
  }
  .aside .dgm { margin: 0 0 24px; border-top: 0; padding-top: 0; }
  .dgm:last-child { margin-bottom: 0; }
  .wrap > .dgm:first-child, .section-head + .dgm { margin-top: 0; }
  /* Resets at zero specificity (:where), so the component rules below win on source order alone. */
  .dgm :where(p) { margin: 0; }
  .dgm :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
  .dgm :where(li) { margin: 0; }
  .dgm :where(a) { text-decoration: none; color: inherit; }
  .dgm__title { font: 700 1.35rem/1.15 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; color: var(--dgm-ink); margin-bottom: 20px; }
  .dgm__note { margin-top: 18px; font-size: .86rem; line-height: 1.5; color: var(--dgm-note); max-width: 72ch; }

  /* One box */
  .dgm-node { position: relative; }
  .dgm-node__body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: start; height: 100%; padding: 14px 16px; background: var(--dgm-card); color: var(--dgm-ink); border: 1px solid var(--dgm-border); border-radius: var(--radius-button); box-shadow: var(--shadow-card); }
  .dgm-node__body:not(:has(> .icon)) { grid-template-columns: minmax(0, 1fr); }
  .dgm-node__body > .icon { grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; color: var(--dgm-accent); }
  .dgm-node__title, .dgm-node__sub { grid-column: -2 / -1; }
  .dgm-node__title { font-weight: 600; line-height: 1.3; }
  .dgm-node__sub { margin-top: 3px; font-size: .88rem; line-height: 1.45; color: var(--dgm-soft); }
  a.dgm-node__body { border-color: var(--dgm-line); }
  a.dgm-node__body:hover .dgm-node__title, a.dgm-node__body:focus-visible .dgm-node__title { text-decoration: underline; text-decoration-color: var(--color-service-gold); text-underline-offset: 3px; text-decoration-thickness: 2px; }
  .is-accent > .dgm-node__body { border: 2px solid var(--dgm-accent); }
  .is-outcome > .dgm-node__body, .dgm-hub__center > .dgm-node__body { background: var(--dgm-strong); color: var(--dgm-on-strong); border-color: var(--dgm-strong); }
  .is-outcome > .dgm-node__body > .icon, .dgm-hub__center > .dgm-node__body > .icon { color: var(--dgm-strong-accent); }
  .is-outcome .dgm-node__sub, .dgm-hub__center .dgm-node__sub { color: var(--dgm-on-strong); }
  .dgm-tag { position: absolute; top: -11px; right: 12px; z-index: 1; padding: 2px 8px; border-radius: 4px; font-size: .72rem; font-weight: 600; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; background: var(--dgm-strong); color: var(--dgm-on-strong); }
  th .dgm-tag { position: static; margin-left: 8px; vertical-align: middle; }

  /* Flow: boxes in order, joined by an arrow (a rule and a solid head) in the accent colour.
     Vertical by default; side by side once the figure is wide enough, with the icon moved above
     the title so the words get the box's full width. */
  .dgm-flow { display: grid; gap: var(--dgm-gap); counter-reset: dgm; }
  .dgm-flow > li + li::before { content: ""; position: absolute; left: 27px; top: calc(-1 * var(--dgm-gap)); height: calc(var(--dgm-gap) - 8px); border-left: 2px solid var(--dgm-accent); }
  .dgm-flow > li + li::after { content: ""; position: absolute; left: 22px; top: -9px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--dgm-accent); }
  .dgm-flow--numbered { padding-left: 12px; }
  .dgm-flow--numbered > li { counter-increment: dgm; }
  .dgm-flow--numbered > li > .dgm-node__body::before { content: counter(dgm); position: absolute; left: -12px; top: -12px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 4px; font: 800 1rem/1 var(--font-heading); background: var(--dgm-strong); color: var(--dgm-on-strong); }
  .dgm-loop { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: .92rem; font-weight: 600; color: var(--dgm-soft); }
  .dgm-loop .icon { color: var(--dgm-accent); }
  @container dgm (min-width: 600px) {
    .dgm-flow:not(.dgm-leak):is([data-count="2"], [data-count="3"], [data-count="4"]) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .dgm-flow:not(.dgm-leak):is([data-count="2"], [data-count="3"], [data-count="4"]) > li > .dgm-node__body { grid-template-columns: minmax(0, 1fr); }
    .dgm-flow:not(.dgm-leak):is([data-count="2"], [data-count="3"], [data-count="4"]) > li > .dgm-node__body > .icon { grid-row: auto; margin: 2px 0 10px; }
    .dgm-flow:not(.dgm-leak):is([data-count="2"], [data-count="3"], [data-count="4"]) > li + li::before { left: calc(-1 * var(--dgm-gap) + 2px); top: 50%; width: calc(var(--dgm-gap) - 12px); height: 0; margin-top: -1px; border-left: 0; border-top: 2px solid var(--dgm-accent); }
    .dgm-flow:not(.dgm-leak):is([data-count="2"], [data-count="3"], [data-count="4"]) > li + li::after { left: -11px; top: 50%; margin-top: -6px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--dgm-accent); border-right: 0; }
  }
  @container dgm (min-width: 900px) {
    .dgm-flow:not(.dgm-leak)[data-count="5"] { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .dgm-flow:not(.dgm-leak)[data-count="5"] > li > .dgm-node__body { grid-template-columns: minmax(0, 1fr); }
    .dgm-flow:not(.dgm-leak)[data-count="5"] > li > .dgm-node__body > .icon { grid-row: auto; margin: 2px 0 10px; }
    .dgm-flow:not(.dgm-leak)[data-count="5"] > li + li::before { left: calc(-1 * var(--dgm-gap) + 2px); top: 50%; width: calc(var(--dgm-gap) - 12px); height: 0; margin-top: -1px; border-left: 0; border-top: 2px solid var(--dgm-accent); }
    .dgm-flow:not(.dgm-leak)[data-count="5"] > li + li::after { left: -11px; top: 50%; margin-top: -6px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--dgm-accent); border-right: 0; }
  }

  /* Leak: the same path, with where each stage loses people branching off to the side. */
  .dgm-leak { max-width: 880px; }
  .dgm-leak > li:not(.is-outcome) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 28px; align-items: center; }
  .dgm-exit { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; font-size: .88rem; line-height: 1.4; font-weight: 500; color: var(--dgm-leak); background: var(--dgm-card); border: 1px dashed var(--dgm-leak); border-radius: var(--radius-button); }
  .dgm-exit .icon { margin-top: .1em; }
  .dgm-exit::before { content: ""; position: absolute; left: -29px; top: 50%; width: 28px; border-top: 2px dashed var(--dgm-leak); }
  /* Wide: the stages run across the full row, each leak hanging beneath its stage, ending on the
     outcome. */
  @container dgm (min-width: 900px) {
    /* Every column shares the same two rows (subgrid), so boxes match in height and every leak
       starts on the same line however its words wrap. */
    .dgm-leak { max-width: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 22px; }
    .dgm-leak > li:not(.is-outcome) { grid-row: span 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; gap: 22px 0; align-items: stretch; }
    .dgm-leak > li.is-outcome { grid-row: 1; }
    .dgm-leak > li > .dgm-node__body { height: auto; min-height: 78px; }
    .dgm-leak .dgm-exit::before { left: 50%; top: -23px; width: 0; height: 22px; border-top: 0; border-left: 2px dashed var(--dgm-leak); }
    .dgm-leak > li + li::before { left: calc(-1 * var(--dgm-gap) + 2px); top: 39px; width: calc(var(--dgm-gap) - 12px); height: 0; border-left: 0; border-top: 2px solid var(--dgm-accent); }
    .dgm-leak > li + li::after { left: -11px; top: 33px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--dgm-accent); border-right: 0; }
  }
  @container dgm (max-width: 479px) {
    .dgm-leak > li:not(.is-outcome) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .dgm-exit { margin-left: 40px; }
    .dgm-exit::before { left: -13px; top: -9px; width: 0; height: calc(50% + 9px); border-top: 0; border-left: 2px dashed var(--dgm-leak); }
  }

  /* Hub: one centre, the parts that feed it on a rail. Centre on top on a phone, beside on wider. */
  .dgm-hub { --rail: -21px; }
  .dgm-hub__spokes { display: grid; gap: 12px; margin: var(--dgm-gap) 0 0 48px; }
  .dgm-hub__spokes > li::before { content: ""; position: absolute; left: var(--rail); top: 24px; width: calc(-1 * var(--rail)); border-top: 2px solid var(--dgm-line); }
  .dgm-hub__spokes > li::after { content: ""; position: absolute; left: var(--rail); top: -12px; bottom: 0; border-left: 2px solid var(--dgm-line); }
  .dgm-hub__spokes > li:first-child::after { top: calc(-1 * var(--dgm-gap)); }
  .dgm-hub__spokes > li:last-child::after { bottom: auto; height: 38px; }
  .dgm-hub__spokes > li:first-child:last-child::after { height: calc(var(--dgm-gap) + 26px); }
  @container dgm (min-width: 640px) {
    .dgm-hub { --rail: -28px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 56px; align-items: center; max-width: 900px; }
    .dgm-hub__spokes { margin: 0; }
    .dgm-hub__center { position: relative; }
    .dgm-hub__center::after { content: ""; position: absolute; left: 100%; top: 50%; width: 28px; border-top: 2px solid var(--dgm-line); }
    .dgm-hub__spokes > li::after { top: -6px; }
    .dgm-hub__spokes > li:first-child::after { top: 24px; }
    .dgm-hub__spokes > li:last-child::after { bottom: auto; top: -6px; height: 32px; }
  }

  /* Compare: a real table. On a narrow screen each row becomes a card with labelled cells. */
  .dgm-compare__scroll { overflow-x: auto; }
  .dgm-compare { display: table; width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .95rem; background: transparent; }
  .dgm-compare th, .dgm-compare td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--dgm-border); }
  .dgm-compare thead th { font: 700 1.1rem/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .03em; color: var(--dgm-ink); background: transparent; border-bottom: 2px solid var(--dgm-strong); }
  .dgm-compare thead th + th { border-top: 4px solid var(--dgm-strong); background: var(--dgm-card); }
  .dgm-compare thead th.is-accent { border-top-color: var(--dgm-accent); }
  .dgm-compare tbody th { width: 26%; font-weight: 600; color: var(--dgm-ink); }
  .dgm-compare td { background: var(--dgm-card); color: var(--dgm-soft); }
  .dgm-compare td + td, .dgm-compare thead th + th + th { border-left: 1px solid var(--dgm-border); }
  .dgm-compare td.is-accent { color: var(--dgm-ink); }
  @container dgm (max-width: 519px) {
    .dgm-compare, .dgm-compare tbody, .dgm-compare tr, .dgm-compare tbody th, .dgm-compare td { display: block; width: auto; }
    .dgm-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .dgm-compare tr { margin-bottom: 14px; border: 1px solid var(--dgm-border); border-radius: var(--radius-button); overflow: hidden; background: var(--dgm-card); }
    .dgm-compare tbody th { background: var(--dgm-strong); color: var(--dgm-on-strong); border-bottom: 0; }
    .dgm-compare td + td { border-left: 0; }
    .dgm-compare tr > :last-child { border-bottom: 0; }
    .dgm-compare td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dgm-accent); }
  }

  /* Stack: levels, each indented under the one above and joined by an elbow. */
  .dgm-stack { --indent: 36px; display: grid; gap: 14px; max-width: 640px; }
  .dgm-stack > li { margin-left: calc(var(--depth, 0) * var(--indent)); }
  .dgm-stack > li + li::before { content: ""; position: absolute; left: calc(18px - var(--indent)); top: -14px; width: calc(var(--indent) - 18px); height: 38px; border: solid var(--dgm-line); border-width: 0 0 2px 2px; }
  .dgm-stack > li:first-child > .dgm-node__body { background: var(--dgm-strong); color: var(--dgm-on-strong); border-color: var(--dgm-strong); }
  .dgm-stack > li:first-child > .dgm-node__body > .icon { color: var(--dgm-strong-accent); }
  .dgm-stack > li:first-child .dgm-node__sub { color: var(--dgm-on-strong); }
  @container dgm (max-width: 479px) { .dgm-stack { --indent: 22px; } .dgm-stack > li + li::before { left: calc(12px - var(--indent)); width: calc(var(--indent) - 12px); } }

  /* Checklist: grouped items, not numbered (the groups are areas, not an order). */
  .dgm-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
  .dgm-checks__group { padding: 14px 16px; background: var(--dgm-card); border: 1px solid var(--dgm-border); border-top: 3px solid var(--dgm-strong); border-radius: var(--radius-button); }
  .dgm-checks__title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 700 1.1rem/1.2 var(--font-heading); letter-spacing: .03em; text-transform: uppercase; color: var(--dgm-ink); }
  .dgm-checks__title .icon { color: var(--dgm-accent); }
  .dgm-checks li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; font-size: .92rem; line-height: 1.45; color: var(--dgm-soft); }
  .dgm-checks li .icon { margin-top: .15em; color: var(--dgm-check); }

  /* Decision: one question, a stem, and a branch for each answer. */
  .dgm-question { display: flex; align-items: center; gap: 12px; max-width: 560px; padding: 14px 18px; border-radius: var(--radius-button); font-weight: 600; background: var(--dgm-strong); color: var(--dgm-on-strong); }
  .dgm-question .icon { color: var(--dgm-strong-accent); }
  .dgm-branches { display: grid; gap: 14px; margin: var(--dgm-gap) 0 0 48px; }
  .dgm-branches > li::before { content: ""; position: absolute; left: -21px; top: 24px; width: 21px; border-top: 2px solid var(--dgm-line); }
  .dgm-branches > li::after { content: ""; position: absolute; left: -21px; top: -14px; bottom: 0; border-left: 2px solid var(--dgm-line); }
  .dgm-branches > li:first-child::after { top: calc(-1 * var(--dgm-gap)); }
  .dgm-branches > li:last-child::after { bottom: auto; height: 40px; }
  /* The answer label sits above its box inside the same row, so the box fills what is left
     rather than the whole row, and the tag sits on the label's line. */
  .dgm-branches > li { display: flex; flex-direction: column; }
  .dgm-branches > li > .dgm-node__body { height: auto; flex: 1; }
  .dgm-branches .dgm-tag { top: -2px; }
  .dgm-when { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dgm-accent); }
  @container dgm (min-width: 600px) {
    .dgm-question { margin: 0 auto; position: relative; }
    .dgm-question::after { content: ""; position: absolute; left: 50%; top: 100%; height: calc(var(--dgm-gap) / 2); border-left: 2px solid var(--dgm-line); }
    .dgm-branches { position: relative; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: var(--dgm-gap) 0 0; }
    .dgm-branches::before { content: ""; position: absolute; top: calc(var(--dgm-gap) / -2); left: calc(50% / var(--n, 3)); right: calc(50% / var(--n, 3)); border-top: 2px solid var(--dgm-line); }
    .dgm-branches[data-count="2"] { --n: 2; }
    .dgm-branches[data-count="4"] { --n: 4; }
    .dgm-branches > li::before { left: 50%; top: calc(var(--dgm-gap) / -2); width: 0; height: calc(var(--dgm-gap) / 2); border-top: 0; border-left: 2px solid var(--dgm-line); }
    .dgm-branches > li::after { display: none; }
  }
}

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mt-0 { margin-top: 0; }
  .mb-0 { margin-bottom: 0; }
}