/* ============================================
   SELF-HOSTED WEBFONTS
   Replaces the Google Fonts call. No third-party
   requests, no visitor IP addresses leaving the
   site, and one fewer connection to open.
   Variable fonts: one file covers every weight.
   ============================================ */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-var.woff2') format('woff2-variations'),
       url('/assets/fonts/fraunces-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-var-italic.woff2') format('woff2-variations'),
       url('/assets/fonts/fraunces-latin-var-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-var.woff2') format('woff2-variations'),
       url('/assets/fonts/manrope-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Enquiry form — confirmation shown after the email hand-off fires. */
#formSent[hidden] { display: none !important; }
#formSent {
  background: #EAF0EE;
  border-left: 3px solid var(--teal-deep);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin-top: 16px;
  color: var(--ink);
  text-align: left;
}
#formSent a { color: var(--teal-deep); font-weight: 600; }

/* ============================================
   LET'S TALK ABOUT CHARLIE — REBUILD
   Editorial • Trustworthy • Scotland-rooted
   ============================================ */

:root {
  /* Palette — anchored in RCA Trust teal, warmed for emotional resonance.
     Tuned Sep 2026: clay accent deepened for backbone; supporting colours
     disciplined so one accent leads; red reserved for danger only. */
  --teal-deep:    #1F4E4E;
  --teal-mid:     #2F6B6B;
  --teal-soft:    #B7CECE;
  --paper:        #F7F2E9;
  --paper-warm:   #EDE5D6;
  /* Clay — the lead accent. Deepened from #9A4527 so it reads as an equal
     to the teal, not a washed pastel, and clears AA on paper (4.9:1). */
  --rust:         #9A4527;
  /* Warm tint for accents on dark grounds (teal-deep / charcoal). */
  --rust-light:   #F5C4AE;
  --rust-deep:    #7E3820;
  /* Heather kept only as a quiet, occasional tertiary — not a co-lead.
     Muted toward the clay family so the accents stop competing. */
  --heather:      #A99CB8;
  --heather-deep: #6B5E7E;
  --charcoal:     #1A1814;
  --ink:          #2A2722;
  --muted:        #645E58;
  --line:         #D9CFBF;
  /* Danger only — alerts, 999, emergency. Never decorative. */
  --alert:        #B5341F;

  /* Type */
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Rhythm */
  --max:  1240px;
  --gut:  clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* WCAG 2.2 — 2.4.11 Focus Not Obscured (Minimum).
   The header is sticky, so anything scrolled to (including via keyboard
   focus) must clear it or the focus ring ends up hidden underneath. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
html:has(body.gate-focused) {
  scroll-padding-top: 152px; /* header + focus banner */
}

/* Reserve space below sticky header when jumping to anchors */
section[id], h2[id], #cravings { scroll-margin-top: 100px; }

/* WCAG 2.4.7 Focus Visible — global fallback.
   Guarantees every focusable element has a visible indicator even if it
   has no bespoke focus style. Component rules below may override it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 2px;
}
/* On dark backgrounds the dark ring would disappear — flip it to light. */
.stats--dark a:focus-visible,
.stats--dark button:focus-visible,
.cg-head a:focus-visible,
.cg-head button:focus-visible,
.focus-banner button:focus-visible,
.quickbar a:focus-visible,
.alert-bar:focus-visible,
footer a:focus-visible,
footer button:focus-visible {
  outline-color: var(--paper);
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

img { max-width: 100%; display: block; }

a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
a:hover { color: var(--rust); }

button { font: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--charcoal);
}

::selection { background: var(--rust); color: var(--paper); }

/* ============================================
   QUICK EXIT + SKIP NAV — ALWAYS VISIBLE
   ============================================ */

.skip {
  position: absolute; top: -100px; left: 0;
  background: var(--charcoal); color: var(--paper);
  padding: 12px 20px; z-index: 1000;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
}
.skip:focus { top: 0; }

.quickbar {
  position: fixed; top: 0; right: 0; z-index: 900;
  display: flex; gap: 0;
}
.quickbar__exit {
  background: var(--alert); color: #fff;
  padding: 10px 18px;
  font-family: var(--sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  border-bottom-left-radius: 4px;
  transition: background .2s ease;
}
.quickbar__exit:hover { background: #8a2716; }
.quickbar__exit svg { width: 14px; height: 14px; }

/* ============================================
   HEADER
   ============================================ */

.header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: 0; z-index: 800;
  backdrop-filter: blur(8px);
  background: rgba(247, 242, 233, 0.92);
}

.header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  text-decoration: none;
  display: flex; align-items: center; gap: 12px;
}
.brand__mark {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: block;
}
.brand__text { line-height: 1.05; }
.brand__sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block; margin-top: 2px;
}

.nav {
  display: flex; align-items: center; gap: 8px;
}
.nav__list {
  display: flex; gap: 4px; list-style: none; align-items: center;
}

/* Dropdown trigger buttons */
.nav__dropdown { position: relative; }
.nav__dropdown-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 2px;
  background: none; border: none; cursor: pointer;
  letter-spacing: 0.01em;
  transition: color .2s ease, background .2s ease;
}
.nav__dropdown-trigger:hover {
  color: var(--rust);
  background: var(--paper-warm);
}
.nav__chevron {
  width: 10px; height: 10px;
  transition: transform .25s ease;
  stroke: var(--muted);
}
.nav__dropdown.is-open .nav__chevron {
  transform: rotate(180deg);
  stroke: var(--rust);
}
.nav__dropdown.is-open .nav__dropdown-trigger {
  color: var(--rust);
  background: var(--paper-warm);
}

/* Dropdown menu panel */
.nav__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.05);
  list-style: none;
  padding: 8px 0;
  z-index: 900;
  animation: navDrop .2s ease;
}
@keyframes navDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav__dropdown.is-open .nav__dropdown-menu {
  display: block;
}
.nav__dropdown-menu li { }
.nav__dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.nav__dropdown-menu a:hover {
  background: var(--paper-warm);
  color: var(--rust);
  padding-left: 24px;
}

/* CTA button */
.nav__cta {
  background: var(--charcoal);
  color: var(--paper);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s ease;
  margin-left: 8px;
}
.nav__cta:hover { background: var(--rust); color: #fff; }
.nav__cta::before {
  content: "";
  width: 6px; height: 6px;
  background: #6FCF80;
  border-radius: 50%;
  box-shadow: 0 0 0 0 #6FCF80;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(111, 207, 128, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(111, 207, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 207, 128, 0); }
}

/* Mobile hamburger */
.nav__toggle { display: none; }

@media (max-width: 1100px) {
  .nav__list { display: none; }
  .nav__list.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    padding: 16px 24px;
    gap: 0;
    z-index: 850;
  }
  .nav__list.is-open .nav__dropdown { width: 100%; }
  .nav__list.is-open .nav__dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 16px;
  }
  .nav__list.is-open .nav__dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 8px 16px;
    min-width: 0;
    animation: none;
  }
  .nav__list.is-open .nav__dropdown-menu a {
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  .nav__list.is-open .nav__dropdown-menu a:hover { padding-left: 8px; }

  .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 10px;
    background: none; cursor: pointer;
  }
  .nav__toggle-bar {
    display: block;
    width: 100%; height: 1.5px;
    background: var(--charcoal);
    border-radius: 1px;
    transition: transform .3s ease, opacity .3s ease;
  }
  .nav__toggle.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__toggle.is-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
  .nav__toggle.is-open .nav__toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav__cta span { display: none; }
}

/* ============================================
   HERO
   ============================================ */

.hero {
  position: relative;
  padding: clamp(60px, 10vw, 120px) var(--gut) clamp(80px, 12vw, 140px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 85% 30%, rgba(169, 156, 184, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(31, 78, 78, 0.10) 0%, transparent 50%);
}
.hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; }
}

.hero__eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;
}
.hero__eyebrow::before {
  content: "";
  width: 32px; height: 1.5px; background: var(--rust);
}
.hero__title {
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  color: var(--charcoal);
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
}
.hero__lede {
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 40px;
  max-width: 580px;
}
.hero__ctas {
  display: flex; gap: 16px; flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center; gap: 10px;
  padding: 16px 28px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 2px;
  transition: all .2s ease;
}
.btn--primary {
  background: var(--rust);
  color: #fff;
}
.btn--primary:hover { background: var(--rust-deep); color: #fff; transform: translateY(-2px); }
.btn--secondary {
  background: transparent;
  color: var(--charcoal);
  border: 1.5px solid var(--charcoal);
}
.btn--secondary:hover { background: var(--charcoal); color: var(--paper); }
.btn svg { width: 16px; height: 16px; }

.hero__panel {
  background: var(--charcoal);
  color: var(--paper);
  padding: 36px 32px;
  border-radius: 2px;
  position: relative;
}
.hero__panel::before {
  content: "If it's urgent";
  position: absolute;
  top: -10px; right: 24px;
  background: var(--rust);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
}
.hero__panel-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-soft);
  margin-bottom: 8px;
}
.hero__panel-num {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  display: block;
  text-decoration: none;
}
.hero__panel-num:hover { color: var(--rust); }
.hero__panel-meta {
  font-size: 14px;
  color: var(--teal-soft);
  margin-bottom: 20px;
}
.hero__panel-list {
  list-style: none;
  border-top: 1px solid rgba(247, 242, 233, 0.15);
  padding-top: 18px;
}
.hero__panel-list li {
  font-size: 14px;
  padding: 6px 0;
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--paper);
}
.hero__panel-list li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--rust);
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}

/* ============================================
   COCAINE GUIDE — basics, forms, grades, paraphernalia
   ============================================ */

.cocaine-guide {
  padding: clamp(60px, 10vw, 100px) var(--gut);
  border-bottom: 1px solid var(--line);
  background: var(--charcoal);
  color: var(--paper);
}
.cocaine-guide__inner { max-width: var(--max); margin: 0 auto; }

.cg-head { margin-bottom: clamp(28px, 4vw, 40px); }
.cg-head .eyebrow { color: var(--rust-light); }  /* was --rust: 2.75:1 on charcoal */
.cg-head .section-title { color: #fff; }
.cg-head__intro {
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5;
  max-width: 720px;
  margin-top: 18px;
  color: var(--paper);
}
.cg-head__intro em { font-style: italic; color: var(--teal-soft); font-size: 0.9em; }

/* Tab bar */
.cg-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: clamp(24px, 4vw, 36px);
  border-bottom: 2px solid rgba(247, 242, 233, 0.12);
  padding-bottom: 0;
}
@media (max-width: 600px) { .cg-tabs { flex-direction: column; border-bottom: none; gap: 6px; } }

.cg-tab {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  background: rgba(247, 242, 233, 0.05);
  border: 1px solid rgba(247, 242, 233, 0.1);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--paper);
  text-align: left;
  transition: all .25s ease;
  flex: 1;
}
.cg-tab:hover { background: rgba(247, 242, 233, 0.08); border-bottom-color: var(--teal-soft); }
.cg-tab.is-active {
  background: rgba(247, 242, 233, 0.1);
  border-color: rgba(247, 242, 233, 0.15);
  border-bottom-color: var(--rust);
}
.cg-tab__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(247, 242, 233, 0.08);
  border-radius: 50%;
  color: var(--teal-soft);
  flex-shrink: 0;
  transition: background .25s ease, color .25s ease;
}
.cg-tab.is-active .cg-tab__icon { background: var(--rust); color: #fff; }
.cg-tab__icon svg { width: 18px; height: 18px; }
.cg-tab__label {
  font-size: 15px; font-weight: 600; display: block; letter-spacing: 0.01em;
  color: #fff;
}
.cg-tab__sub {
  font-size: 11px; color: var(--teal-soft); display: block; margin-top: 1px;
  letter-spacing: 0.02em;
}

/* Panels */
.cg-panel {
  display: none;
  animation: cgFade .3s ease;
}
.cg-panel.is-active { display: block; }
@keyframes cgFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Form cards */
.cg-form-cards { display: flex; flex-direction: column; gap: 16px; }
.cg-form-card {
  border: 1px solid rgba(247, 242, 233, 0.12);
  background: rgba(247, 242, 233, 0.04);
  overflow: hidden;
  border-left: 4px solid var(--rust);
}
.cg-form-card__head {
  padding: 22px 26px;
  background: rgba(247, 242, 233, 0.06);
  border-bottom: 1px solid rgba(247, 242, 233, 0.1);
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.cg-form-card__num {
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--rust); letter-spacing: 0.04em;
}
.cg-form-card__head h3 {
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: #fff;
}
.cg-form-card__aka {
  font-size: 12px; color: var(--teal-soft); font-style: italic;
}
.cg-form-card__body {
  padding: 22px 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px;
}
.cg-form-card__detail h4 {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rust); margin-bottom: 8px;
}
.cg-form-card__detail p {
  font-size: 14px; line-height: 1.55; color: var(--paper);
}
.cg-form-card__detail p strong { color: #fff; font-weight: 600; }

/* Grades — dark cards with coloured purity accents */
.cocaine-guide .cg-grades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.cocaine-guide .cg-grade {
  background: rgba(247, 242, 233, 0.04);
  border: 1px solid rgba(247, 242, 233, 0.12);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cocaine-guide .cg-grade__bar { height: 5px; }
.cocaine-guide .cg-grade__content { padding: 22px 22px 20px; flex: 1; }
.cocaine-guide .cg-grade__content h4 {
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  color: #fff; letter-spacing: -0.01em; margin-bottom: 6px;
}
.cocaine-guide .cg-grade__purity {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rust-light); margin-bottom: 12px !important;
}
.cocaine-guide .cg-grade__content p { color: var(--paper); font-size: 14px; line-height: 1.55; margin-bottom: 8px; }
.cocaine-guide .cg-grade__content p strong { color: var(--rust-light); font-weight: 600; }

.cocaine-guide .cg-grade__warning {
  margin-top: 14px !important;
  padding: 14px 16px;
  background: rgba(194, 93, 58, 0.15);
  border-left: 3px solid var(--rust);
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--paper);
}

.cocaine-guide .cg-grades-warning {
  padding: 22px 28px;
  background: var(--rust);
  color: #fff;
  font-size: 15px;
  line-height: 1.55;
}
.cocaine-guide .cg-grades-warning strong {
  color: #fff;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

/* Paraphernalia — structured cards matching Forms style */
.cg-para-intro {
  font-size: 14px; color: var(--teal-soft); font-style: italic;
  margin-bottom: clamp(20px, 3vw, 28px);
}
.cg-para-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: clamp(24px, 4vw, 36px);
}
.cg-para-item {
  display: block;
  text-align: left;
  padding: 0;
  background: rgba(247, 242, 233, 0.04);
  border: 1px solid rgba(247, 242, 233, 0.12);
  border-left: 4px solid var(--teal-mid);
  cursor: pointer;
  font-family: var(--sans);
  color: var(--paper);
  transition: border-color .2s ease, background .2s ease;
  position: relative;
  overflow: hidden;
}
.cg-para-item:hover { border-color: rgba(247, 242, 233, 0.25); border-left-color: var(--rust); background: rgba(247, 242, 233, 0.07); }
.cg-para-item__name {
  display: block;
  font-size: 15px; font-weight: 600; color: #fff;
  padding: 16px 40px 3px 18px;
}
.cg-para-item__hint {
  display: block;
  font-size: 12px; color: var(--teal-soft); letter-spacing: 0.02em;
  padding: 0 18px 14px;
}
.cg-para-item__detail {
  display: none;
  font-size: 13.5px; line-height: 1.55; color: var(--paper);
  padding: 14px 18px 16px;
  background: rgba(247, 242, 233, 0.04);
  border-top: 1px solid rgba(247, 242, 233, 0.1);
}
.cg-para-item.is-open {
  background: rgba(247, 242, 233, 0.08);
  border-left-color: var(--rust);
}
.cg-para-item.is-open .cg-para-item__detail { display: block; }
.cg-para-item::after {
  content: "+";
  position: absolute; top: 14px; right: 16px;
  font-size: 18px; color: var(--teal-soft); font-weight: 300;
  transition: transform .25s ease, color .25s ease;
}
.cg-para-item.is-open::after {
  transform: rotate(45deg); color: var(--rust);
}

/* Finding CTA on dark bg */
.cocaine-guide .cg-finding {
  margin-top: clamp(24px, 4vw, 36px);
  padding: clamp(28px, 4vw, 44px);
  background: rgba(47, 107, 107, 0.3);
  border-left: 4px solid var(--teal-soft);
}
.cocaine-guide .cg-finding h3 { color: #fff; }
.cocaine-guide .cg-finding p { color: var(--paper); }
.cocaine-guide .cg-finding a { color: var(--rust-light); }

.cg-overview {
  margin-bottom: clamp(40px, 6vw, 56px);
  max-width: 780px;
}
.cg-overview h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 500;
  margin-bottom: 18px;
  letter-spacing: -0.015em;
}
.cg-overview p {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 14px;
}
.cg-overview p strong { color: var(--rust); font-weight: 600; }
.cg-overview p em {
  font-style: italic;
  color: var(--muted);
  font-size: 14.5px;
}

.cg-section-title {
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: clamp(48px, 7vw, 72px) 0 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.cg-section-intro {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: clamp(24px, 4vw, 36px);
  max-width: 720px;
}
.cg-section-intro strong { color: var(--rust); font-weight: 600; }

/* Accordion */
.cg-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cg-acc-item {
  border: 1px solid var(--line);
  background: var(--paper);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cg-acc-item.is-open {
  border-color: var(--teal-deep);
  box-shadow: 0 4px 20px rgba(31, 78, 78, 0.08);
}
.cg-acc-trigger {
  display: grid;
  grid-template-columns: 32px 1fr 28px;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 20px 22px;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  transition: background .2s ease;
}
.cg-acc-trigger:hover { background: var(--paper-warm); }
.cg-acc-trigger:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: -2px;
}
.cg-acc-trigger__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--rust);
  letter-spacing: 0.04em;
}
.cg-acc-trigger__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cg-acc-trigger__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: 0.005em;
  line-height: 1.3;
}
.cg-acc-trigger__sub {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.cg-acc-trigger__icon {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 300;
  color: var(--muted);
  transition: transform .3s ease, color .3s ease;
  line-height: 1;
  text-align: center;
}
.cg-acc-item.is-open .cg-acc-trigger__icon {
  transform: rotate(45deg);
  color: var(--rust);
}

.cg-acc-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s ease, opacity .3s ease;
  opacity: 0;
}
.cg-acc-body[hidden] { display: block; max-height: 0; opacity: 0; }
.cg-acc-body.is-visible {
  max-height: 2000px;
  opacity: 1;
}
.cg-acc-body__inner {
  padding: 0 22px 24px 70px;
  display: grid;
  gap: 18px;
}
@media (max-width: 560px) {
  .cg-acc-body__inner { padding-left: 22px; }
}
.cg-acc-detail h4 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 8px;
}
.cg-acc-detail p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 10px;
}
.cg-acc-detail p strong { color: var(--charcoal); font-weight: 600; }

/* Grades */
.cg-grades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.cg-grade {
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cg-grade__bar {
  height: 6px;
  width: 100%;
}
.cg-grade__bar--low  { background: linear-gradient(90deg, var(--line) 0%, var(--muted) 25%, transparent 25%); }
.cg-grade__bar--mid  { background: linear-gradient(90deg, var(--heather) 0%, var(--heather-deep) 50%, transparent 50%); }
.cg-grade__bar--high { background: linear-gradient(90deg, var(--rust) 0%, var(--rust) 70%, transparent 70%); }
.cg-grade__bar--pure { background: var(--alert); }

.cg-grade__content {
  padding: 22px 22px 20px;
  flex: 1;
}
.cg-grade__content h4 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: #fff;
}
.cg-grade__purity {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 12px !important;
}
.cg-grade__content p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper);
  margin-bottom: 8px;
}
.cg-grade__content p strong { color: var(--rust); font-weight: 600; }

.cg-grade__warning {
  margin-top: 14px !important;
  padding: 14px 16px;
  background: rgba(194, 93, 58, 0.15);
  border-left: 3px solid var(--rust);
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--paper);
}

.cg-grades-warning {
  padding: 22px 28px;
  background: var(--charcoal);
  color: var(--paper);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: clamp(8px, 2vw, 16px);
}
.cg-grades-warning strong {
  color: var(--rust);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

/* Finding it CTA */
.cg-finding {
  margin-top: clamp(40px, 6vw, 56px);
  padding: clamp(28px, 4vw, 44px);
  background: rgba(47, 107, 107, 0.3);
  border-left: 4px solid var(--teal-soft);
}
.cg-finding h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  margin-bottom: 16px;
  letter-spacing: -0.015em;
  color: #fff;
}
.cg-finding p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px;
  max-width: 680px;
  color: var(--paper);
}
.cg-finding a { color: var(--rust); font-weight: 600; }

/* ============================================
   COCAINE EMERGENCY
   ============================================ */

.emergency {
  background: var(--alert);
  color: #fff;
  padding: clamp(60px, 10vw, 100px) var(--gut);
}
.emergency__inner { max-width: var(--max); margin: 0 auto; }
.emergency__head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }
.emergency__lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5;
  color: #fff;
  opacity: 0.9;
  margin-top: 20px;
}
.em-download {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: clamp(28px, 4vw, 40px);
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 3px solid #fff;
  text-decoration: none;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.em-download:hover {
  background: rgba(0, 0, 0, 0.24);
  border-color: rgba(255, 255, 255, 0.55);
  border-left-color: #fff;
  transform: translateY(-2px);
}
.em-download:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.em-download__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--alert);
  flex-shrink: 0;
}
.em-download__icon svg { width: 22px; height: 22px; }
.em-download__text { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.em-download__title {
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}
.em-download__sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 62ch;
}
.em-download__cta {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  border: 1.5px solid #fff;
  padding: 10px 18px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.em-download:hover .em-download__cta { background: #fff; color: var(--alert); }
@media (max-width: 620px) {
  .em-download { flex-direction: column; align-items: flex-start; gap: 14px; }
  .em-download__cta { align-self: stretch; text-align: center; }
}

.emergency__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: clamp(32px, 5vw, 48px);
}
.em-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 28px 26px;
}
.em-card--danger {
  background: rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.4);
}
.em-card h3 {
  font-size: 22px; color: #fff; margin-bottom: 16px; font-weight: 500;
}
.em-card ul { list-style: none; }
.em-card ul li {
  font-size: 14.5px; line-height: 1.55; padding: 6px 0; padding-left: 18px; position: relative;
}
.em-card ul li::before {
  content: "→"; position: absolute; left: 0; color: rgba(255,255,255,0.6);
}
.em-card__note {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 13.5px; line-height: 1.5; font-style: italic;
}
.em-card__note strong { font-weight: 700; font-style: normal; }
.emergency__donts { margin-bottom: clamp(32px, 5vw, 48px); }
.emergency__donts h3 { font-size: 24px; color: #fff; margin-bottom: 20px; }
.emergency__dont-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;
}
.em-dont {
  background: rgba(0,0,0,0.3); padding: 16px 20px; font-size: 14px; line-height: 1.5;
}
.em-dont strong { color: #fff; }
.emergency__after {
  padding: 28px 32px; background: rgba(255,255,255,0.1); border-left: 4px solid #fff;
}
.emergency__after h3 { font-size: 22px; color: #fff; margin-bottom: 12px; }
.emergency__after p { font-size: 15px; line-height: 1.6; }
.emergency__after a { color: #fff; font-weight: 600; }

/* ============================================
   SELF-ASSESSMENT
   ============================================ */

.assess {
  background: var(--paper-warm); padding: clamp(60px, 10vw, 100px) var(--gut); border-bottom: 1px solid var(--line); }
.assess__inner { max-width: var(--max); margin: 0 auto; }
.assess__cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;
  margin-top: clamp(36px, 5vw, 56px);
}
.assess-card {
  padding: 36px 32px; background: var(--paper-warm); border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.assess-card__for {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); margin-bottom: 14px;
}
.assess-card h3 { font-size: 28px; margin-bottom: 14px; letter-spacing: -0.015em; }
.assess-card p { font-size: 15px; line-height: 1.55; margin-bottom: 24px; flex: 1; }
.assess-card__btn { align-self: flex-start; margin-bottom: 14px; }
.assess-card__time {
  font-size: 12px; color: var(--muted); letter-spacing: 0.04em;
}

/* Quiz container */
.quiz-container {
  margin-top: 32px; background: var(--charcoal); color: var(--paper);
  padding: 0; border-radius: 2px; overflow: hidden;
}
.quiz-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; background: rgba(0,0,0,0.2);
}
.quiz-header__label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust); }
.quiz-header__progress { font-size: 13px; color: var(--paper); opacity: 0.6; }
.quiz-header__close {
  font-size: 28px; color: var(--paper); opacity: 0.6; cursor: pointer; background: none; border: none;
  line-height: 1;
}
.quiz-header__close:hover { opacity: 1; }
.quiz-body { padding: 32px 28px; }
.quiz-question {
  font-family: var(--serif); font-size: clamp(20px, 2.5vw, 26px); font-weight: 500;
  color: #fff; margin-bottom: 24px; line-height: 1.3;
}
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  display: block; width: 100%; text-align: left; padding: 16px 20px;
  background: rgba(247, 242, 233, 0.06); border: 1px solid rgba(247, 242, 233, 0.15);
  color: var(--paper); font-size: 15px; cursor: pointer; font-family: var(--sans);
  transition: background .2s ease, border-color .2s ease;
}
.quiz-option:hover { background: rgba(247, 242, 233, 0.12); border-color: var(--rust); }
.quiz-result { text-align: center; }
.quiz-result__score {
  font-family: var(--serif); font-size: 64px; font-weight: 400; color: var(--rust);
  display: block; margin-bottom: 8px;
}
.quiz-result__level {
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 20px; display: block;
}
.quiz-result p { font-size: 16px; line-height: 1.6; max-width: 560px; margin: 0 auto 24px; }
.quiz-result .btn { margin: 0 auto; }

/* ============================================
   LIVED EXPERIENCE
   ============================================ */

/* ---- Shared disclosure pattern (Stories, Professionals) ----
   Both sit on light backgrounds. For the dark Harm Reduction section
   see .harm-acc, which is the same pattern in light-on-dark. */
.disc-list {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  grid-template-columns: none !important;
}
.disc {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal-deep);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.disc:hover { border-left-color: var(--rust); }
.disc.is-open {
  border-color: var(--line);
  border-left-color: var(--rust);
  box-shadow: 0 6px 24px rgba(0,0,0,0.05);
}
.disc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  color: var(--ink);
  min-height: 24px;
}
.disc__trigger:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: -3px;
}
.disc__text { display: flex; flex-direction: column; gap: 5px; }
.disc__kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.disc__title {
  font-family: var(--serif);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  line-height: 1.3;
}
.disc__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--teal-deep);
  transition: transform .28s ease, border-color .22s ease, background .22s ease, color .22s ease;
  flex-shrink: 0;
}
.disc__chev svg { width: 15px; height: 15px; }
.disc.is-open .disc__chev {
  transform: rotate(180deg);
  border-color: var(--rust);
  background: var(--rust);
  color: #fff;
}
.disc__panel {
  padding: 4px 22px 22px;
}
.disc__panel[hidden] { display: none; }
.lived-story--open { border: none; padding: 0; background: none; margin: 0; }

@media (max-width: 560px) {
  .disc__trigger { padding: 15px 16px; gap: 12px; }
  .disc__panel { padding: 4px 16px 18px; }
}

.lived {
  background: var(--paper); padding: clamp(60px, 10vw, 100px) var(--gut);
  border-bottom: 1px solid var(--line);
}
.lived__inner { max-width: var(--max); margin: 0 auto; }
.lived__intro {
  font-family: var(--serif); font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5; max-width: 720px; margin-top: 20px;
}
.lived__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; margin-top: clamp(36px, 5vw, 56px);
}
.lived-story {
  background: var(--paper); padding: 32px 28px; border: 1px solid var(--line);
  border-left: 3px solid var(--heather-deep); display: flex; flex-direction: column;
}
.lived-story p {
  font-family: var(--serif); font-size: 16px; font-style: italic;
  line-height: 1.55; color: var(--ink); flex: 1; margin-bottom: 20px;
}
.lived-story footer { border-top: 1px solid var(--line); padding-top: 14px; }
.lived-story footer strong {
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--charcoal);
  display: block; margin-bottom: 2px;
}
.lived-story footer span {
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  letter-spacing: 0.04em;
}
.lived__cta {
  margin-top: 32px; padding: 20px 24px; background: var(--paper);
  border: 1px solid var(--line); font-size: 14px; color: var(--muted); font-style: italic;
}
.lived__cta a { color: var(--teal-deep); font-weight: 600; }

/* Principal's note — author callout below the four testimonials */
.principal-note {
  margin-top: clamp(36px, 5vw, 56px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--rust);
  padding: clamp(28px, 4vw, 44px);
  position: relative;
}
.principal-note__kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 18px;
}
.principal-note__body {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 18px);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 70ch;
}
.principal-note__body strong { font-style: normal; font-weight: 600; color: var(--charcoal); }
.principal-pull {
  margin: 26px 0;
  padding: 22px 0 22px 26px;
  border-left: 3px solid var(--rust);
}
.principal-pull p {
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  max-width: 34ch;
  margin: 0;
}
.principal-pull__turn {
  margin-top: 12px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--rust) !important;
}
.principal-note__body--cont { margin-top: 0; }

.principal-note__attrib {
  font-family: var(--sans);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-bottom: 0;
}
.principal-note__attrib strong {
  display: block;
  font-size: 15px;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.principal-note__attrib span {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.principal-note__support {
  margin-top: 22px;
  padding: 14px 18px;
  background: var(--paper-warm);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.principal-note__support strong { color: var(--charcoal); }
.principal-note__support a {
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid var(--rust);
  font-weight: 600;
}

/* ============================================
   PROFESSIONALS HUB
   ============================================ */

.pros {
  background: var(--paper-warm); padding: clamp(60px, 10vw, 100px) var(--gut); border-bottom: 1px solid var(--line); }
.pros__inner { max-width: var(--max); margin: 0 auto; }
.pros__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; margin-top: clamp(36px, 5vw, 56px);
}
.pros-card {
  padding: 28px 26px; background: var(--paper-warm); border: 1px solid var(--line);
}
.pros-card__role {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep);
  display: block; margin-bottom: 12px;
}
.pros-card h3 { font-size: 20px; margin-bottom: 12px; font-weight: 500; }
.pros-card p { font-size: 14.5px; line-height: 1.55; margin-bottom: 10px; }
.pros-card em { font-style: italic; color: var(--muted); }
.pros-card a { color: var(--teal-deep); font-weight: 600; }

.pros__pathway {
  margin-top: clamp(40px, 6vw, 56px); padding: 32px clamp(24px, 4vw, 44px);
  background: var(--charcoal); color: var(--paper);
}
.pros__pathway h3 { font-size: 24px; color: #fff; margin-bottom: 24px; }
.pros__pathway-steps { display: flex; flex-direction: column; gap: 0; }
.pros__step {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0;
  border-top: 1px solid rgba(247,242,233,0.12); align-items: start;
}
.pros__step:first-child { border-top: 0; }
.pros__step-num {
  width: 40px; height: 40px; background: var(--rust); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 18px; font-weight: 500; border-radius: 50%;
}
.pros__step strong { font-size: 16px; color: #fff; display: block; margin-bottom: 4px; }
.pros__step p { font-size: 14px; color: var(--paper); opacity: 0.8; }

/* ============================================
   STATS / WHY THIS MATTERS
   ============================================ */

.stats {
  background: var(--paper-warm);
  padding: clamp(60px, 10vw, 100px) var(--gut);
  border-bottom: 1px solid var(--line);
}
/* Dark variant for visual contrast */
.stats.stats--dark {
  background: var(--charcoal);
  border-bottom: none;
}
.stats--dark .section-title,
.stats--dark .eyebrow { color: #fff; }
.stats--dark .eyebrow { color: #D27855; }
.stats--dark .section-intro { color: var(--paper); }
.stats--dark .stat { background: rgba(247, 242, 233, 0.06); }
.stats--dark .stat__num { color: #D27855; }
.stats--dark .stat__label { color: var(--paper); }
.stats--dark .stat__source { color: #D27855; }
.stats--dark .stats__grid { background: rgba(247, 242, 233, 0.08); border-color: rgba(247, 242, 233, 0.08); }
.stats--dark .stats__currency {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 78ch;
  margin-top: 18px;
}
.stats--dark .stats__currency { color: var(--teal-soft); opacity: 0.85; }
.talk-strip {
  display: flex;
  align-items: baseline;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 42px);
  padding: 20px 24px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
}
.talk-strip__text {
  font-family: var(--serif);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.4;
  color: var(--charcoal);
  flex: 1 1 260px;
  margin: 0;
}
.talk-strip__num {
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 600;
  color: var(--rust);
  text-decoration: none;
  letter-spacing: -0.01em;
  border-bottom: 2px solid transparent;
  padding: 2px 0;
  min-height: 24px;
  white-space: nowrap;
  transition: border-color .2s ease;
}
.talk-strip__num:hover { border-bottom-color: var(--rust); }
.talk-strip__meta {
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
/* dark-section variant */
.talk-strip--dark {
  background: rgba(247, 242, 233, 0.07);
  border-color: rgba(247, 242, 233, 0.2);
  border-left-color: var(--rust-light);
}
.talk-strip--dark .talk-strip__text { color: #fff; }
.talk-strip--dark .talk-strip__num { color: var(--rust-light); }
.talk-strip--dark .talk-strip__num:hover { border-bottom-color: var(--rust-light); }
.talk-strip--dark .talk-strip__meta { color: rgba(247, 242, 233, 0.7); }


/* ---- "If you read nothing else" strips ---- */
.read-first {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  align-items: baseline;
  margin-bottom: clamp(26px, 4vw, 38px);
  padding: 20px 24px;
  background: rgba(247, 242, 233, 0.07);
  border: 1px solid rgba(247, 242, 233, 0.2);
  border-left: 3px solid var(--rust-light);
}
.read-first__tag {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust-light);
  white-space: nowrap;
}
.read-first__text {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 58ch;
  margin: 0;
}
/* Light-background sections need the inverse treatment.
   effects is --paper-warm; harm is teal and guide is charcoal. */
.effects .read-first,
.stats .read-first,
.trends .read-first,
.schema .read-first,
.convo .read-first,
.assess .read-first,
.pros .read-first,
.lived .read-first {
  background: #fff;
  border-color: var(--line);
  border-left-color: var(--rust);
}
.effects .read-first__tag,
.stats .read-first__tag,
.trends .read-first__tag,
.schema .read-first__tag,
.convo .read-first__tag,
.assess .read-first__tag,
.pros .read-first__tag,
.lived .read-first__tag { color: var(--rust); }
.effects .read-first__text,
.stats .read-first__text,
.trends .read-first__text,
.schema .read-first__text,
.convo .read-first__text,
.assess .read-first__text,
.pros .read-first__text,
.lived .read-first__text { color: var(--charcoal); }

@media (max-width: 620px) {
  .read-first { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
}

/* ---- Site search ---- */
.site-search__open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  min-height: 24px;
  cursor: pointer;
  margin-right: 14px;
  transition: border-color .2s ease, color .2s ease;
}
.site-search__open:hover { border-color: var(--rust); color: var(--rust); }
.site-search__open:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; }
.site-search__open svg { width: 15px; height: 15px; }
@media (max-width: 880px) { .site-search__open span { display: none; } .site-search__open { padding: 8px 10px; } }

.site-search {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(26, 24, 20, 0.72);
  padding: clamp(60px, 12vh, 130px) var(--gut) 20px;
  overflow-y: auto;
}
.site-search[hidden] { display: none; }
.site-search__inner {
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0,0,0,0.3);
}
.site-search__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.site-search__bar svg { width: 19px; height: 19px; color: var(--muted); flex-shrink: 0; }
#searchInput {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--ink);
  padding: 6px 0;
  min-width: 0;
}
#searchInput:focus { outline: none; }
#searchInput::placeholder { color: var(--muted); }
.site-search__close {
  border: 1px solid var(--line);
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 6px 10px;
  min-height: 24px;
  cursor: pointer;
}
.site-search__close:hover { border-color: var(--rust); color: var(--rust); }
.site-search__hint {
  padding: 12px 18px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.site-search__results { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; }
.site-search__results li { border-bottom: 1px solid var(--line); }
.site-search__results li:last-child { border-bottom: none; }
.site-search__results button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 15px 18px;
  cursor: pointer;
  font-family: var(--sans);
}
.site-search__results button:hover,
.site-search__results button:focus-visible {
  background: var(--paper-warm);
  outline: none;
}
.sr-sec {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 5px;
}
.sr-title {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.25;
  margin-bottom: 4px;
}
.sr-snip { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.sr-snip mark, .sr-title mark {
  background: rgba(240, 180, 154, 0.5);
  color: inherit;
  padding: 0 2px;
}
.sr-shortcut { background: var(--paper-warm); }
.sr-shortcut button { display: flex; align-items: center; gap: 12px; }
.sr-shortcut .sr-sec { color: var(--teal-deep); margin-bottom: 0; flex-shrink: 0; }
.sr-shortcut .sr-title { margin-bottom: 0; font-size: 16px; }
.sr-shortcut::after { content: none; }
.site-search__none { padding: 22px 18px; font-size: 14.5px; color: var(--muted); }
.site-search__none strong { color: var(--charcoal); }
.search-flash { animation: searchFlash 2.2s ease; }
@keyframes searchFlash {
  0%, 55% { background-color: rgba(240, 180, 154, 0.32); }
  100% { background-color: transparent; }
}

.stats-chart {
  margin: clamp(34px, 5vw, 52px) 0 clamp(28px, 4vw, 40px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid rgba(247, 242, 233, 0.18);
}
.stats-chart__cap { margin-bottom: 22px; }
.stats-chart__kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust-light);
  display: block;
  margin-bottom: 10px;
}
.stats-chart__title {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.stats-chart__sub {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(247, 242, 233, 0.72);
  max-width: 56ch;
}
.stats-chart__plot { max-width: 700px; }
.stats-chart__note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(247, 242, 233, 0.6);
  max-width: 74ch;
}
.stats-chart__svg { width: 100%; height: auto; display: block; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.stats__caveat { background: rgba(194, 93, 58, 0.15); border-left-color: var(--rust); color: var(--paper); }
.stats__inner { max-width: var(--max); margin: 0 auto; }
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 72px);
}
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
}
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1.5px; background: var(--rust);
}
.section-title {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.section-intro {
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.5;
  color: var(--ink);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat {
  background: var(--paper-warm);
  padding: 36px 28px;
}
.stat__num {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 400;
  line-height: 0.95;
  color: var(--teal-deep);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  display: block;
}
.stat__num span {
  font-size: 0.5em;
  color: var(--rust);
  display: inline-block;
  margin-left: 4px;
  vertical-align: top;
  margin-top: 0.4em;
}
.stat__label {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
}
.stat__source {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rust);
  margin-top: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stats__currency {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 78ch;
  margin-top: 18px;
}
.stats--dark .stats__currency { color: var(--teal-soft); opacity: 0.85; }
.stats__caveat {
  margin-top: 28px;
  padding: 18px 22px;
  background: rgba(31, 78, 78, 0.06);
  border-left: 3px solid var(--teal-deep);
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* ============================================
   AUDIENCE / WHO THIS IS FOR
   ============================================ */

.audience {
  padding: clamp(60px, 10vw, 100px) var(--gut);
  border-bottom: 1px solid var(--line);
}
.audience__inner { max-width: var(--max); margin: 0 auto; }
.audience__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: clamp(40px, 6vw, 64px);
}
.aud-card {
  padding: 36px 32px 32px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  position: relative;
  display: flex; flex-direction: column;
  transition: transform .25s ease, border-color .25s ease;
}
.aud-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal-deep);
}
.aud-card__num {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--rust);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.aud-card__title {
  font-size: 28px;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.aud-card__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 24px;
  flex: 1;
}
.aud-card__link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
}
.aud-card__link::after {
  content: "→";
  transition: transform .2s ease;
}
.aud-card__link:hover::after { transform: translateX(4px); }

/* ============================================
   EARLY SIGNS — full content
   ============================================ */

.signs {
  background: var(--charcoal);
  color: var(--paper);
  padding: clamp(60px, 10vw, 100px) var(--gut);
}
.signs__inner { max-width: var(--max); margin: 0 auto; }
.signs h2 { color: #fff; }
.signs .eyebrow { color: var(--rust); }
.signs__intro {
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.5;
  color: var(--paper);
  max-width: 780px;
  margin-top: 24px;
}
.signs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 6vw, 64px);
  background: rgba(247, 242, 233, 0.12);
  border: 1px solid rgba(247, 242, 233, 0.12);
}
.sign-block {
  background: var(--charcoal);
  padding: 32px 28px;
}
.sign-block__num {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--rust);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.sign-block__title {
  font-size: 22px;
  color: #fff;
  margin-bottom: 18px;
  font-weight: 500;
}
.sign-block__list {
  list-style: none;
}
.sign-block__list li {
  font-size: 14.5px;
  line-height: 1.55;
  padding: 8px 0;
  border-top: 1px solid rgba(247, 242, 233, 0.1);
  color: var(--paper);
}
.sign-block__list li:first-child { border-top: 0; padding-top: 0; }

.signs__rule {
  margin-top: clamp(40px, 6vw, 64px);
  padding: 32px clamp(24px, 4vw, 40px);
  background: var(--rust);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 720px) { .signs__rule { grid-template-columns: 1fr; } }
.signs__rule strong {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  display: block;
  margin-bottom: 10px;
}
.signs__rule p { font-size: 16px; line-height: 1.5; }
.signs__rule .btn--primary { background: #fff; color: var(--rust); }
.signs__rule .btn--primary:hover { background: var(--charcoal); color: #fff; }

/* ============================================
   COCAETHYLENE FEATURE BLOCK
   ============================================ */

.cocaeth {
  padding: clamp(60px, 10vw, 110px) var(--gut);
  border-bottom: 1px solid var(--line);
}
.cocaeth__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 880px) { .cocaeth__inner { grid-template-columns: 1fr; } }

.cocaeth__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin: 0 auto;
}
.cocaeth__visual svg { width: 100%; height: 100%; }

.cocaeth__title {
  font-size: clamp(34px, 5vw, 52px);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.cocaeth__sub {
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 22px);
  font-style: italic;
  color: var(--rust);
  margin-bottom: 28px;
}
.cocaeth__body p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.65;
}
.cocaeth__list {
  list-style: none;
  margin: 24px 0;
  border-top: 1px solid var(--line);
}
.cocaeth__list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  font-size: 15px;
  align-items: start;
}
.cocaeth__list li::before {
  content: counter(item, decimal-leading-zero);
  counter-increment: item;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--rust);
  font-style: italic;
  padding-top: 2px;
}
.cocaeth__list { counter-reset: item; }

/* ============================================
   HARM REDUCTION
   ============================================ */

.harm {
  background: var(--teal-deep);
  color: var(--paper);
  padding: clamp(60px, 10vw, 100px) var(--gut);
}
.harm__inner { max-width: var(--max); margin: 0 auto; }
.harm h2 { color: #fff; }
.harm .eyebrow { color: var(--rust-light); }  /* was --rust: 1.44:1 */
.harm__intro {
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 22px);
  color: var(--paper);
  max-width: 780px;
  margin-top: 20px;
}
.harm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: clamp(40px, 6vw, 64px);
}
.harm-card {
  padding: 28px 26px;
  background: rgba(247, 242, 233, 0.06);
  border: 1px solid rgba(247, 242, 233, 0.15);
}
.harm-card h3 {
  font-size: 22px;
  color: #fff;
  margin-bottom: 14px;
  font-weight: 500;
}
.harm-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper);
}
.harm-card ul {
  list-style: none;
  margin-top: 12px;
}
.harm-card ul li {
  font-size: 14px;
  padding: 5px 0;
  padding-left: 16px;
  position: relative;
}
.harm-card ul li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--rust-light);
}

.harm__route {
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid rgba(247, 242, 233, 0.15);
}
.harm__route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.harm__route-card {
  padding: 24px 22px;
  background: rgba(247, 242, 233, 0.05);
  border: 1px solid rgba(247, 242, 233, 0.12);
  border-left: 3px solid var(--rust);
}
.harm__route-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.harm__route-card li {
  position: relative;
  padding-left: 15px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(247, 242, 233, 0.8);
}
.harm__route-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rust-light);
}
.harm__route-card li strong { color: #fff; }
.harm__route-card h4 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.harm__route-card p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(247, 242, 233, 0.8);
}
.harm__route--inject .harm__route-card {
  border-left-color: var(--heather);
}
.harm__route-notice {
  margin-top: 24px;
  padding: 20px 24px;
  background: rgba(169, 156, 184, 0.12);
  border-left: 3px solid var(--heather);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(247, 242, 233, 0.85);
}
.harm__route-notice strong {
  color: #fff;
  display: block;
  margin-bottom: 4px;
}

.harm__sex-support {
  margin-top: 18px;
  padding: 22px 24px;
  background: var(--teal-deep);
  border-left: 3px solid var(--rust);
}
.harm__sex-support h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
}
.harm__sex-support p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper);
  max-width: 76ch;
  margin-bottom: 10px;
}
.harm__sex-support p:last-child { margin-bottom: 0; }
.harm__sex-support strong { color: #fff; }

/* ---- Harm reduction: collapsible routes ----
   NB: this whole section sits on --teal-deep, so everything here is
   light-on-dark. Do not reuse these colours on the paper sections. */
.harm__routes-lede {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(247, 242, 233, 0.7);
  margin: clamp(30px,4vw,44px) 0 14px;
  max-width: 60ch;
}
.harm__routes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.harm-acc {
  background: rgba(247, 242, 233, 0.05);
  border: 1px solid rgba(247, 242, 233, 0.14);
  border-left: 3px solid var(--rust);
  transition: border-color .22s ease, background .22s ease;
}
.harm-acc:hover { background: rgba(247, 242, 233, 0.08); }
.harm-acc.is-open {
  background: rgba(247, 242, 233, 0.07);
  border-color: rgba(247, 242, 233, 0.28);
  border-left-color: var(--rust);
}
.harm-acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  color: var(--paper);
  min-height: 24px;
}
.harm-acc__trigger:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: -3px;
}
.harm-acc__text { display: flex; flex-direction: column; gap: 4px; }
.harm-acc__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust-light);
}
.harm-acc__title {
  font-family: var(--serif);
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.15;
}
.harm-acc__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.harm-acc__count {
  font-size: 12px;
  color: rgba(247, 242, 233, 0.75);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.harm-acc__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1.5px solid rgba(247, 242, 233, 0.3);
  border-radius: 50%;
  color: var(--paper);
  transition: transform .28s ease, border-color .22s ease, background .22s ease, color .22s ease;
  flex-shrink: 0;
}
.harm-acc__chev svg { width: 15px; height: 15px; }
.harm-acc.is-open .harm-acc__chev {
  transform: rotate(180deg);
  border-color: var(--rust);
  background: var(--rust);
  color: #fff;
}
.harm-acc__trigger:hover .harm-acc__chev { border-color: var(--paper); }

.harm-acc__panel {
  padding: 0 22px 24px;
  border-top: 1px solid rgba(247, 242, 233, 0.12);
}
.harm-acc__panel[hidden] { display: none; }
.harm-acc__intro {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(247, 242, 233, 0.75);
  max-width: 68ch;
  padding-top: 20px;
  margin-bottom: 20px;
}
/* Routes are nested inside panels now — kill the old top spacing/rule */
.harm-acc__panel .harm__route,

@media (max-width: 560px) {
  .harm-acc__trigger { padding: 16px; gap: 12px; }
  .harm-acc__count { display: none; }
  .harm-acc__panel { padding: 0 16px 20px; }
}

.harm__resource {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(28px, 4vw, 44px);
  background: rgba(247, 242, 233, 0.06);
  border: 1px solid rgba(247, 242, 233, 0.15);
  border-left: 4px solid var(--rust);
  max-width: 760px;
}
.harm__resource-kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rust-light);
  margin-bottom: 10px;
}
.harm__resource h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 500;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
}
.harm__resource p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper);
  margin-bottom: 20px;
}
.harm__resource p strong { color: #fff; }
.harm__resource-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--rust-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 69, 39, 0.4);
  transition: color .2s ease, border-color .2s ease;
}
.harm__resource-link:hover { color: #fff; border-color: rgba(247, 242, 233, 0.4); }

/* ============================================
   CONVERSATION — step-by-step journey
   ============================================ */

.convo {
  padding: clamp(60px, 10vw, 110px) var(--gut);
  border-bottom: 1px solid var(--line);
}
.convo__inner { max-width: var(--max); margin: 0 auto; }
.convo__head { margin-bottom: clamp(28px, 4vw, 40px); }
.convo__intro {
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5;
  max-width: 640px;
  margin-top: 18px;
}

/* Steps */
.convo-journey { display: flex; flex-direction: column; gap: 8px; }

/* Progress bar */
.convo-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: clamp(28px, 4vw, 40px);
  padding: 24px 0;
}
.convo-progress__dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding: 0 8px;
  transition: color .25s ease;
}
.convo-progress__dot:hover { color: var(--rust); }
.convo-progress__dot span {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper-warm);
  border: 2px solid var(--line);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  transition: all .25s ease;
}
.convo-progress__dot.is-active span {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
}
.convo-progress__dot.is-active { color: var(--rust); font-weight: 600; }
.convo-progress__dot.is-visited span {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: #fff;
}
.convo-progress__line {
  flex: 1;
  max-width: 60px;
  height: 2px;
  background: var(--line);
}
@media (max-width: 560px) {
  .convo-progress__dot { font-size: 10px; padding: 0 4px; }
  .convo-progress__dot span { width: 30px; height: 30px; font-size: 13px; }
  .convo-progress__line { max-width: 30px; }
}

.convo-step:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.convo-step {
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.convo-step:hover { border-color: var(--teal-deep); }
.convo-step.is-open {
  border-color: var(--teal-deep);
  box-shadow: 0 4px 20px rgba(31, 78, 78, 0.08);
  cursor: default;
}

.convo-step__header {
  display: grid;
  grid-template-columns: 48px 1fr 28px;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
}
.convo-step__num {
  width: 48px; height: 48px;
  background: var(--paper-warm);
  color: var(--teal-deep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  transition: background .25s ease, color .25s ease;
}
.convo-step.is-open .convo-step__num {
  background: var(--teal-deep); color: #fff;
}
.convo-step__header h3 {
  font-size: 20px; font-weight: 500; letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.convo-step__preview {
  font-size: 13px; color: var(--muted); margin: 0;
}
.convo-step.is-open .convo-step__preview { display: none; }
.convo-step__icon {
  font-size: 22px; color: var(--muted); font-weight: 300;
  transition: transform .3s ease, color .3s ease;
  font-family: var(--sans);
}
.convo-step.is-open .convo-step__icon {
  transform: rotate(45deg); color: var(--rust);
}

.convo-step__body {
  display: none;
  padding: 0 24px 28px 88px;
  animation: cgFade .3s ease;
}
@media (max-width: 600px) { .convo-step__body { padding-left: 24px; } }
.convo-step.is-open .convo-step__body { display: block; }

.convo-step__body > p {
  font-size: 15px; line-height: 1.6; margin-bottom: 16px; max-width: 640px;
}

/* Do / Don't grid */
.convo-step__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) { .convo-step__grid { grid-template-columns: 1fr; } }

.convo-step__do, .convo-step__dont {
  padding: 20px;
  border-radius: 2px;
}
.convo-step__do { background: rgba(47, 107, 107, 0.06); }
.convo-step__dont { background: rgba(181, 52, 31, 0.06); }
.convo-step__do h4 { color: var(--teal-deep); }
.convo-step__dont h4 { color: var(--alert); }
.convo-step__do h4, .convo-step__dont h4 {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px;
}
.convo-step__do ul, .convo-step__dont ul {
  list-style: none;
}
.convo-step__do ul li, .convo-step__dont ul li {
  font-size: 14px; line-height: 1.5; padding: 6px 0 6px 18px;
  position: relative; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.convo-step__do ul li::before {
  content: "✓"; position: absolute; left: 0; color: var(--teal-deep); font-weight: 700; font-size: 12px;
}
.convo-step__dont ul li::before {
  content: "✕"; position: absolute; left: 0; color: var(--alert); font-weight: 700; font-size: 12px;
}
.convo-step__do ul li strong, .convo-step__dont ul li strong { font-weight: 600; }

/* Scripts inside step 2 */
.convo-step__scripts {
  display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px;
}
.convo-step__scripts blockquote {
  padding: 20px 24px;
  background: var(--paper-warm);
  border-left: 3px solid var(--heather-deep);
  margin: 0;
}
.convo-step__scripts blockquote p {
  font-family: var(--serif); font-size: clamp(16px, 1.8vw, 19px);
  font-style: italic; line-height: 1.45; color: var(--ink); margin: 0;
}
.convo-step__scripts blockquote footer {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-top: 10px;
}

.convo-step__tip {
  font-size: 14px; line-height: 1.55; color: var(--ink);
  padding: 16px 20px; background: rgba(47, 107, 107, 0.06);
  border-left: 3px solid var(--teal-deep);
}
.convo-step__tip strong { color: var(--charcoal); }

/* Callout box */
.convo-step__callout {
  padding: 18px 22px;
  background: var(--charcoal);
  color: var(--paper);
  margin: 16px 0;
  font-size: 15px;
}
.convo-step__callout strong { color: var(--rust); }
.convo-step__callout em {
  font-family: var(--serif); font-size: 17px; color: #fff;
}

/* ============================================
   EFFECTS ON THE BODY — replaces blank-1
   ============================================ */

.effects {
  background: var(--paper-warm);
  padding: clamp(60px, 10vw, 100px) var(--gut);
  border-bottom: 1px solid var(--line);
}
.effects__inner { max-width: var(--max); margin: 0 auto; }
.effects__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  margin-top: clamp(40px, 6vw, 56px);
  border-top: 1px solid var(--line);
}
.effect {
  padding: 32px 4px 32px 0;
  border-bottom: 1px solid var(--line);
}
.effect__head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 14px;
}
.effect__icon {
  width: 36px; height: 36px;
  background: var(--teal-deep);
  color: var(--paper);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
  flex-shrink: 0;
}
.effect h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.effect p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.effect__time {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 600;
}

/* Cutting agents feature pull-out within Effects section */
.cutting-agents {
  background: var(--charcoal);
  color: var(--paper);
  padding: clamp(40px, 6vw, 64px) clamp(28px, 4vw, 56px);
  margin: clamp(24px, 4vw, 40px) 0 clamp(48px, 7vw, 72px);
  position: relative;
  border-left: 4px solid var(--rust);
}
.cutting-agents__head { max-width: 800px; margin-bottom: clamp(32px, 4vw, 48px); }
.cutting-agents__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.cutting-agents__eyebrow::before {
  content: ""; width: 24px; height: 1.5px; background: var(--rust);
}
.cutting-agents__title {
  font-family: var(--serif);
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 20px;
}
.cutting-agents__lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5;
  color: var(--paper);
}
.cutting-agents__lede strong {
  color: var(--rust);
  font-weight: 500;
}
.cutting-agents__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: rgba(247, 242, 233, 0.12);
  border: 1px solid rgba(247, 242, 233, 0.12);
  margin-bottom: clamp(24px, 4vw, 36px);
}
.cutting-fact {
  background: var(--charcoal);
  padding: 28px 26px;
}
.cutting-fact__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--rust);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 14px;
}
.cutting-fact h4 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cutting-fact p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper);
}
.cutting-fact strong {
  color: var(--rust);
  font-weight: 500;
}
.cutting-agents__caveat {
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.85;
  padding: 20px 24px;
  background: rgba(194, 93, 58, 0.1);
  border-left: 2px solid var(--rust);
  font-style: italic;
}
.cutting-agents__caveat strong {
  color: var(--rust);
  font-style: normal;
  font-weight: 600;
}
.cutting-agents__link {
  display: inline-block;
  margin-top: 12px;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #F2B5A6;
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 181, 166, 0.4);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.cutting-agents__link:hover {
  color: var(--paper);
  border-color: var(--paper);
}

.effects__subtitle {
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: clamp(32px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

/* ============================================
   BODY EXPLORER — interactive tab/panel
   ============================================ */

.body-explorer__intro {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: clamp(20px, 3vw, 32px);
  font-style: italic;
}

.body-explorer {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}
@media (max-width: 880px) {
  .body-explorer { grid-template-columns: 1fr; }
}

/* NAV (tab list) */
.body-explorer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 8px;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
@media (max-width: 880px) {
  .body-explorer__nav {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 8px;
    gap: 6px;
  }
}

.bx-nav {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
  width: 100%;
  position: relative;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
@media (max-width: 880px) {
  .bx-nav {
    flex: 0 0 240px;
    scroll-snap-align: start;
    width: auto;
  }
}
.bx-nav:hover {
  background: var(--paper-warm);
  border-color: var(--line);
}
.bx-nav:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}
.bx-nav.is-active {
  background: var(--charcoal);
  color: var(--paper);
  border-color: var(--charcoal);
}
.bx-nav.is-active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: var(--rust);
}
@media (max-width: 880px) {
  .bx-nav.is-active::before { display: none; }
  .bx-nav.is-active {
    border-bottom: 3px solid var(--rust);
  }
}

.bx-nav__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-warm);
  border-radius: 50%;
  color: var(--teal-deep);
  transition: background .18s ease, color .18s ease;
}
.bx-nav.is-active .bx-nav__icon {
  background: var(--rust);
  color: #fff;
}
.bx-nav__icon svg { width: 20px; height: 20px; }

.bx-nav__text {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bx-nav__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx-nav__pill {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.bx-nav.is-active .bx-nav__pill {
  color: var(--teal-soft);
}

/* PANELS */
.body-explorer__panels {
  position: relative;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  padding: clamp(28px, 4vw, 48px);
  min-height: 360px;
}

.bx-panel {
  display: none;
  animation: bxFade .35s ease;
}
.bx-panel.is-active {
  display: block;
}
@keyframes bxFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bx-panel__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--rust);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 12px;
}
.bx-panel h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin-bottom: 20px;
}
.bx-panel p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 24px;
  max-width: 64ch;
}
.bx-panel p strong {
  font-weight: 600;
  color: var(--charcoal);
  border-bottom: 1.5px solid var(--rust);
  padding-bottom: 1px;
}

.bx-panel__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
@media (max-width: 560px) { .bx-panel__meta { grid-template-columns: 1fr; gap: 12px; } }

.bx-panel__time, .bx-panel__rev {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  padding-left: 14px;
  position: relative;
}
.bx-panel__time { color: var(--rust); }
.bx-panel__rev  { color: var(--teal-deep); }
.bx-panel__time::before, .bx-panel__rev::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
}
.bx-panel__time::before { background: var(--rust); }
.bx-panel__rev::before  { background: var(--teal-deep); }

/* ============================================
   SCHEMA EXPLORER — toggle cycle diagram
   ============================================ */

.schema {
  background: var(--paper-warm);
  padding: clamp(60px, 10vw, 110px) var(--gut);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, var(--paper) 0%, var(--paper-warm) 100%);
}
.schema__inner { max-width: var(--max); margin: 0 auto; }

/* Toggle switch */
.schema-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  background: var(--charcoal);
  padding: 6px;
  border-radius: 3px;
  width: fit-content;
}
.schema-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
  opacity: 0.55;
  border-radius: 2px;
  transition: all .25s ease;
}
.schema-toggle__btn:hover { opacity: 0.85; }
.schema-toggle__btn.is-active {
  opacity: 1;
  background: var(--rust);
  color: #fff;
}
.schema-toggle__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.schema-toggle__dot--dark  { background: var(--paper); opacity: 0.4; }
.schema-toggle__dot--light { background: var(--teal-soft); }
.schema-toggle__btn.is-active .schema-toggle__dot { background: #fff; opacity: 1; }

.schema-toggle__hint {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: clamp(32px, 5vw, 48px);
  max-width: 680px;
  line-height: 1.5;
  transition: opacity .3s ease;
}

/* Grid of cycle cards */
.schema-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
@media (max-width: 880px) { .schema-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .schema-grid { grid-template-columns: 1fr; } }

/* Card */
.schema-card {
  padding: 28px 26px 24px;
  border-radius: 2px;
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
  /* DEFAULT = schema state */
  background: var(--charcoal);
  border: 1px solid rgba(247, 242, 233, 0.12);
}
.schema-card__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 14px;
  transition: color .4s ease;
  color: var(--rust-light);
}
.schema-card__schema,
.schema-card__structure {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.schema-card__schema { display: flex; }
.schema-card__structure { display: none; }
.schema-card h3,
.schema-card h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.15;
  transition: color .4s ease;
  color: #fff;
}
.schema-card p {
  font-size: 14.5px;
  line-height: 1.55;
  transition: color .4s ease;
  color: var(--paper);
  flex: 1;
}
.schema-card p em {
  font-style: italic;
  opacity: 0.85;
}
.schema-card p strong {
  font-weight: 600;
  color: var(--rust-light);
}

.schema-card__arrow {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 20px;
  color: var(--rust-light);
  opacity: 0.5;
  font-family: var(--sans);
}
.schema-card__arrow--loop {
  font-size: 24px;
  color: var(--alert);
  opacity: 0.8;
}
.schema-card__arrow--alt { display: none; }
.schema-card__arrow--break { display: none; }

/* STRUCTURE STATE — toggled via JS class on parent */
.no-sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  margin-bottom: clamp(36px, 5vw, 56px);
  padding: clamp(26px, 3.4vw, 38px);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
}
@media (max-width: 760px) { .no-sub { grid-template-columns: 1fr; gap: 14px; } }
.no-sub__lead { align-self: start; }
.no-sub__kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  display: block;
  margin-bottom: 10px;
}
.no-sub__title {
  font-family: var(--serif);
  font-size: clamp(23px, 3vw, 33px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}
.no-sub__body p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink);
  max-width: 62ch;
  margin-bottom: 14px;
}
.no-sub__body p:last-child { margin-bottom: 0; }
.no-sub__body strong { color: var(--charcoal); font-weight: 700; }
.no-sub__line {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--serif) !important;
  font-size: clamp(17px, 1.9vw, 21px) !important;
  line-height: 1.42 !important;
  color: var(--charcoal) !important;
}
.no-sub__line em { font-style: italic; color: var(--rust); font-weight: 500; }

.schema-explorer.is-structure .schema-card {
  background: var(--paper);
  border-color: var(--teal-deep);
  box-shadow: 0 2px 16px rgba(31, 78, 78, 0.08);
}
.schema-explorer.is-structure .schema-card__num { color: var(--teal-deep); }
.schema-explorer.is-structure .schema-card h3,
.schema-explorer.is-structure .schema-card h4 { color: var(--charcoal); }
.schema-explorer.is-structure .schema-card p { color: var(--ink); }
.schema-explorer.is-structure .schema-card p strong { color: var(--teal-deep); }
.schema-explorer.is-structure .schema-card__schema { display: none; }
.schema-explorer.is-structure .schema-card__structure { display: flex; }
.schema-explorer.is-structure .schema-card__arrow { display: none; }
.schema-explorer.is-structure .schema-card__arrow--alt { display: block; color: var(--teal-deep); opacity: 0.4; }
.schema-explorer.is-structure .schema-card__arrow--break {
  display: block;
  color: var(--teal-deep);
  opacity: 0.7;
  font-size: 16px;
}

/* Card entrance animation */
.schema-explorer.is-structure .schema-card {
  animation: schemaFlip .4s ease;
}
@keyframes schemaFlip {
  0%   { opacity: 0.5; transform: scale(0.97); }
  100% { opacity: 1;   transform: scale(1); }
}

/* KEY INSIGHT block */
.schema-insight {
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 44px);
  background: var(--charcoal);
  color: var(--paper);
  border-left: 4px solid var(--rust);
}
.schema-insight h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 500;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -0.015em;
}
.schema-insight p {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 72ch;
}
.schema-insight p strong {
  color: var(--rust);
  font-weight: 600;
}
.schema-insight__cite {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-style: italic;
  color: var(--rust) !important;
  margin-top: 24px !important;
  padding-top: 20px;
  border-top: 1px solid rgba(247, 242, 233, 0.15);
}

/* ============================================
   GET HELP — proper section
   ============================================ */

.help {
  padding: clamp(60px, 10vw, 110px) var(--gut);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.help__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
}
@media (max-width: 880px) { .help__inner { grid-template-columns: 1fr; } }

.help__title {
  font-size: clamp(36px, 5.5vw, 60px);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.help__lede {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 32px;
}

/* ---- Trend alert cards (link to alerts.html) ---- */
.trend-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 960px) { .trend-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .trend-cards { grid-template-columns: 1fr; } }

.trend-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px 22px;
  background: var(--paper-warm);
  border: 1.5px solid var(--line);
  border-top: 4px solid var(--alert);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.trend-card:hover {
  border-color: var(--alert);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(181, 52, 31, 0.1), 0 2px 6px rgba(0,0,0,0.04);
}
.trend-card:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 3px;
}
.trend-card__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--alert);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.trend-card__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--alert);
  animation: alertPulse 2s infinite;
}
.trend-card__title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.trend-card__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  flex: 1;
  margin-bottom: 18px;
}
.trend-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--alert);
  transition: gap .2s ease;
}
.trend-card:hover .trend-card__cta { gap: 12px; }
.trend-card__cta svg { width: 14px; height: 14px; }


/* ---- Cravings: practical layer under the Schema ---- */
.cravings {
  margin-top: clamp(44px, 6vw, 68px);
  padding-top: clamp(36px, 5vw, 52px);
  border-top: 1px solid var(--line);
}
.cravings__head { max-width: 62ch; margin-bottom: 26px; }
.cravings__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--heather-deep);
  margin-bottom: 12px;
}
.cravings__title {
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin-bottom: 14px;
}
.cravings__lede {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--muted);
}


.cravings__quick {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(24px, 3.5vw, 34px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.cravings__quick li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  background: var(--paper-warm);
  border-left: 3px solid var(--heather-deep);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.cravings__quick-num {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--heather-deep);
  letter-spacing: 0.06em;
}
.cravings__quick-body { display: block; }
.cravings__quick strong { display: block; color: var(--charcoal); margin-bottom: 3px; }

.cravings__download {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.cravings__download:hover { border-color: var(--rust); transform: translateY(-2px); }
.cravings__download:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.cravings__download-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--rust); color: #fff; flex-shrink: 0;
}
.cravings__download-icon svg { width: 20px; height: 20px; }
.cravings__download-text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cravings__download-text strong {
  font-family: var(--serif); font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 500; color: var(--charcoal); line-height: 1.2;
}
.cravings__download-text span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.cravings__download-cta {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rust); border: 1.5px solid var(--rust); padding: 10px 16px;
  flex-shrink: 0; white-space: nowrap; transition: background .2s ease, color .2s ease;
}
.cravings__download:hover .cravings__download-cta { background: var(--rust); color: #fff; }
@media (max-width: 620px) {
  .cravings__download { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cravings__download-cta { align-self: stretch; text-align: center; }
}




.cravings__foot p + p {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(247, 242, 233, 0.18);
}

/* ---- Coverage / catchment panel ---- */
/* ---- Get Support: routes by need ---- */
.routes { display: flex; flex-direction: column; gap: clamp(24px, 3.4vw, 34px); margin-bottom: 26px; }
.route-group { break-inside: avoid; }
.route-group__title {
  font-family: var(--serif);
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--line);
}
.route-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "who num" "note note";
  gap: 3px 18px;
  align-items: baseline;
  padding: 15px 18px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
}
.route--local { border-left-color: var(--teal-deep); background: #fff; }
.route__who {
  grid-area: who;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.2;
}
.route__num {
  grid-area: num;
  font-family: var(--serif);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 600;
  color: var(--rust);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
  border-bottom: 1.5px solid transparent;
  padding: 3px 0;
  min-height: 24px;
  transition: border-color .2s ease;
}
.route__num:hover { border-bottom-color: var(--rust); }
.route--local .route__num { color: var(--teal-deep); }
.route--local .route__num:hover { border-bottom-color: var(--teal-deep); }
.route__num--plain {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.route__note {
  grid-area: note;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 5px;
  max-width: 80ch;
}
.route__note strong { color: var(--charcoal); }
.route__note a { color: var(--rust); text-underline-offset: 2px; }
.routes__foot {
  padding: 18px 20px;
  background: var(--teal-deep);
  border-left: 3px solid var(--rust);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper);
  max-width: 82ch;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.routes__foot strong { color: #fff; }
@media (max-width: 560px) {
  .route { grid-template-columns: 1fr; grid-template-areas: "who" "num" "note"; }
  .route__num { margin-top: 4px; }
}

.coverage {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-left: 4px solid var(--rust);
  padding: clamp(24px, 3.2vw, 34px);
  margin: 0 0 clamp(28px, 4vw, 40px);
}
.coverage__title {
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  margin-bottom: 14px;
  max-width: 28ch;
}
.coverage__body {
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink);
  max-width: 66ch;
  margin-bottom: 12px;
}
.coverage__body strong { color: var(--charcoal); font-weight: 700; }

.coverage__routes {
  list-style: none;
  padding: 0;
  margin: 22px 0 18px;
  display: grid;
  gap: 10px;
}
.coverage-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "where contact" "who contact" "note note";
  gap: 2px 18px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 16px 18px;
}
.coverage-route--local {
  border-color: var(--teal-deep);
  border-left-width: 3px;
  background: #fff;
}
.coverage-route__where {
  grid-area: where;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.coverage-route--local .coverage-route__where { color: var(--teal-deep); }
.coverage-route__who {
  grid-area: who;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.2;
}
.coverage-route__contact {
  grid-area: contact;
  font-family: var(--serif);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 600;
  color: var(--rust);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* 2.5.8 target size */
  display: inline-block;
  padding: 4px 0;
  min-height: 24px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.coverage-route--local .coverage-route__contact { color: var(--teal-deep); }
.coverage-route__contact:hover { border-bottom-color: currentColor; }
.coverage-route__ext { font-size: 0.8em; }
.coverage-route__note {
  grid-area: note;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 7px;
}
.coverage__conf {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 78ch;
}
.coverage__conf strong { color: var(--charcoal); }
.coverage__conf a {
  display: inline-block;
  margin-top: 4px;
  color: var(--rust);
  font-weight: 600;
  text-underline-offset: 3px;
}
.coverage__foot {
  font-size: 14px;
  color: var(--ink);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.coverage__foot strong { color: var(--alert); font-weight: 700; }

@media (max-width: 560px) {
  .coverage-route {
    grid-template-columns: 1fr;
    grid-template-areas: "where" "who" "contact" "note";
    gap: 3px;
  }
  .coverage-route__contact { margin-top: 6px; }
}

.help__channels {
  display: grid;
  gap: 14px;
  margin-bottom: 32px;
}
.channel {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  padding: 18px 20px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s ease, transform .2s ease;
}
.channel:hover {
  border-color: var(--rust);
  transform: translateX(4px);
}
.channel__icon {
  width: 44px; height: 44px;
  background: var(--teal-deep);
  color: var(--paper);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.channel__icon svg { width: 20px; height: 20px; }
.channel__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 2px;
}
.channel__value {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}
.channel__hours {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.help__expect {
  background: var(--charcoal);
  color: var(--paper);
  padding: 28px;
  border-radius: 2px;
}
.help__expect h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 16px;
  font-weight: 500;
}
.help__expect ol {
  list-style: none;
  counter-reset: step;
}
.help__expect ol li {
  counter-increment: step;
  padding: 10px 0 10px 32px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.5;
  border-top: 1px solid rgba(247, 242, 233, 0.12);
}
.help__expect ol li:first-child { border-top: 0; }
.help__expect ol li::before {
  content: counter(step);
  position: absolute; left: 0; top: 11px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--rust);
  font-weight: 500;
}

/* Form */
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 36px clamp(24px, 4vw, 40px);
}
.form h3 {
  font-size: 26px;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.form__sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 28px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form__field {
  display: flex; flex-direction: column;
  margin-bottom: 16px;
}
.form__field label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.form__field input,
.form__field select,
.form__field textarea {
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 14px;
  /* 1.4.11 — control boundary must reach 3:1. --line was 1.38:1. */
  border: 1px solid var(--muted);
  background: #fff;
  color: var(--ink);
  border-radius: 2px;
  transition: border-color .2s ease, background .2s ease;
}
.form__field input:focus-visible,
.form__field select:focus-visible,
.form__field textarea:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 1px;
  border-color: var(--teal-deep);
  background: #fff;
}
.form__field textarea { resize: vertical; min-height: 110px; }
.form__field .req { color: var(--rust); }
.form__check {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.form__check input { margin-top: 3px; flex-shrink: 0; }
.form__submit {
  background: var(--charcoal);
  color: var(--paper);
  padding: 16px 28px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 2px;
  width: 100%;
  transition: background .2s ease;
}
.form__submit:hover { background: var(--rust); }
.form__privacy {
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
  text-align: center;
}

/* ============================================
   PARTNERSHIP / CREDIBILITY
   ============================================ */

.partners {
  background: var(--paper-warm);
  padding: clamp(50px, 8vw, 80px) var(--gut);
  border-bottom: 1px solid var(--line);
}
.partners__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 720px) { .partners__inner { grid-template-columns: 1fr; } }

.partners h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.partners p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 12px;
}
.about-more {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-more a {
  font-family: var(--serif);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 500;
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  align-self: flex-start;
  padding-bottom: 2px;
  transition: border-color .2s ease;
}
.about-more a:hover { border-bottom-color: var(--rust); }
.about-more span { font-size: 13.5px; color: var(--muted); }

.about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.about-fact {
  background: rgba(31, 78, 78, 0.05);
  border-left: 3px solid var(--rust);
  padding: 18px 20px;
}
.about-fact__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1;
  color: var(--teal-deep);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.about-fact__lbl {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  margin: 0;
  line-height: 1.45;
}
@media (max-width: 480px) {
  .about-facts { grid-template-columns: 1fr; }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.accessibility {
  background: var(--paper);
  padding: clamp(56px, 8vw, 100px) var(--gut);
  border-top: 1px solid var(--line);
}
.accessibility__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.accessibility h2 {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.02em;
  margin: 6px 0 14px;
  color: var(--charcoal);
}
.accessibility__lede {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
  margin-bottom: 36px;
}
.accessibility__lede strong { color: var(--charcoal); }

/* ---- Reading age panel ---- */
.read-age {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal-deep);
  padding: clamp(26px, 3.5vw, 40px);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.read-age__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.read-age__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 8px;
}
.read-age__title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  margin: 0;
  max-width: 22ch;
}
.read-age__score {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.read-age__num {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 68px);
  font-weight: 600;
  line-height: 0.85;
  color: var(--teal-deep);
  letter-spacing: -0.03em;
}
.read-age__unit {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.read-age__body {
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink);
  max-width: 66ch;
  margin-bottom: 14px;
}
.read-age__body strong { color: var(--charcoal); font-weight: 700; }

.read-age__bars {
  list-style: none;
  padding: 0;
  margin: 26px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.read-age__bars li {
  display: grid;
  grid-template-columns: minmax(0, 15em) 1fr 2.2em;
  align-items: center;
  gap: 14px;
}
.read-age__bar-label {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
}
.read-age__bar-track {
  position: relative;
  height: 9px;
  background: rgba(31, 78, 78, 0.10);
  border-radius: 1px;
  overflow: hidden;
}
.read-age__bar-fill {
  display: block;
  height: 100%;
  border-radius: 1px;
}
.read-age__bar-fill.is-good { background: var(--teal-deep); }
.read-age__bar-fill.is-ok   { background: var(--heather-deep); }
.read-age__bar-fill.is-ref  { background: var(--alert); opacity: 0.75; }
.read-age__bar-val {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--charcoal);
  text-align: right;
}
.read-age__bars-ref {
  padding-top: 9px;
  margin-top: 3px;
  border-top: 1px dashed var(--line);
}
.read-age__bars-ref .read-age__bar-label { color: var(--muted); font-style: italic; }
.read-age__bars-ref .read-age__bar-val   { color: var(--alert); }

.read-age__note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 72ch;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

@media (max-width: 620px) {
  .read-age__bars li {
    grid-template-columns: 1fr 2.2em;
    grid-template-areas: "label val" "track track";
    gap: 5px 12px;
  }
  .read-age__bar-label { grid-area: label; }
  .read-age__bar-val   { grid-area: val; }
  .read-age__bar-track { grid-area: track; margin-bottom: 6px; }
}

.accessibility__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 720px) {
  .accessibility__grid { grid-template-columns: 1fr; }
}
.accessibility__col h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 14px;
}
.accessibility__col h3:not(:first-child) { margin-top: 28px; }
.accessibility__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.accessibility__col li {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  padding: 8px 0 8px 22px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.accessibility__col li:last-child { border-bottom: none; }
.accessibility__col li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 12px; height: 2px;
  background: var(--rust);
}
.accessibility__col p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
}
.accessibility__col a {
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid var(--rust);
  font-weight: 600;
}
.accessibility__col a:hover { background: rgba(154, 69, 39, 0.08); }

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background: var(--charcoal);
  color: var(--paper);
  padding: clamp(60px, 8vw, 80px) var(--gut) 32px;
}
.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(247, 242, 233, 0.15);
}
@media (max-width: 720px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
.footer__brand {
  font-family: var(--serif);
  font-size: 24px;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}
.footer__tag {
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.75;
  margin-bottom: 20px;
  max-width: 420px;
}
.footer__col h3,
.footer__col h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust-light);
  margin-bottom: 16px;
}
.footer__col ul {
  list-style: none;
}
.footer__col ul li {
  padding: 2px 0;
  font-size: 14px;
}
.footer__col a {
  color: var(--paper);
  text-decoration: none;
  opacity: 0.8;
  /* 2.5.8 Target Size (Minimum) — inline links in a nav list were ~22px tall */
  display: inline-block;
  padding: 4px 0;
  min-height: 24px;
  transition: opacity .2s ease;
}
.footer__col a:hover { opacity: 1; color: var(--rust-light); }
.footer__note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--teal-soft);
  opacity: 0.85;
  padding-top: 8px;
  max-width: 30ch;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
  font-size: 12px;
  color: var(--paper);
  opacity: 0.6;
}
.footer__bottom a { color: var(--paper); opacity: 1; text-decoration: none; }
.footer__bottom a:hover { color: var(--rust-light); }

/* ============================================
   PRINT / PRESENTATION
   ============================================ */

@media print {
  .quickbar, .nav__cta, .form, .nav__toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .header, .help, .signs, .harm, .footer { page-break-inside: avoid; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   LANDING GATE
   ============================================ */

.gate {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(60px, 10vw, 100px) var(--gut) clamp(60px, 8vw, 80px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.gate__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 20%, rgba(169, 156, 184, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(31, 78, 78, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 55% 60%, rgba(154, 69, 39, 0.04) 0%, transparent 40%);
}

.gate__inner {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.gate__eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gate__eyebrow::before {
  content: "";
  width: 32px;
  height: 1.5px;
  background: var(--rust);
  flex-shrink: 0;
}

.gate__title {
  font-family: var(--serif);
  font-size: clamp(38px, 6.5vw, 78px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--charcoal);
  max-width: 820px;
  margin-bottom: 20px;
}
.gate__title em {
  font-style: italic;
  color: var(--rust);
}

.gate__sub {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  max-width: 560px;
  margin-bottom: clamp(44px, 7vw, 64px);
}

.gate__doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: clamp(32px, 5vw, 48px);
}

@media (max-width: 780px) {
  .gate__doors {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  background: var(--paper-warm);
  border: 1.5px solid var(--line);
  border-top: 4px solid var(--line);
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  color: var(--ink);
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.door:hover,
.door:focus-visible {
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(154, 69, 39, 0.12), 0 2px 8px rgba(0,0,0,0.04);
}
/* 2.4.7 — keyboard focus needs its own visible indicator,
   not just the same treatment as hover. */
.door:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 3px;
}

.door--family:hover, .door--family:focus-visible { border-color: var(--teal-deep); border-top-color: var(--teal-deep); }
.door--young:hover,  .door--young:focus-visible  { border-color: var(--heather-deep); border-top-color: var(--heather-deep); }
.door--user:hover,   .door--user:focus-visible   { border-color: var(--rust); border-top-color: var(--rust); }

.door__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.door--family .door__label { color: var(--teal-deep); }
.door--young  .door__label { color: var(--heather-deep); }
.door--user   .door__label { color: var(--rust); }

.door__label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.door__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.door__title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  margin-bottom: 14px;
}

.door__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  flex: 1;
  margin-bottom: 24px;
}

.door__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s ease, gap 0.2s ease;
}
.door--family .door__cta { color: var(--teal-deep); }
.door--young  .door__cta { color: var(--heather-deep); }
.door--user   .door__cta { color: var(--rust); }

.door:hover .door__cta,
.door:focus-visible .door__cta { gap: 14px; }

.door__cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
.door:hover .door__cta svg,
.door:focus-visible .door__cta svg { transform: translateX(4px); }

.gate__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.gate__skip {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gate__skip a {
  color: var(--muted);
  font-weight: 500;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
.gate__skip a:hover { color: var(--rust); }

.gate__phone {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gate__phone-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.gate__phone-num {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--teal-deep);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.gate__phone-num:hover { color: var(--rust); }
.gate__phone-scope {
  display: block;
  width: 100%;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.gate__phone { flex-wrap: wrap; }

.gate__live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.gate__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6FCF80;
  box-shadow: 0 0 0 0 rgba(111,207,128,0.7);
  animation: livepulse 2s infinite;
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(111,207,128,0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(111,207,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,207,128,0); }
}

/* ============================================
   FOCUS FILTER
   ============================================ */

/* ============================================
   ACTIVE ALERT BAR
   ============================================ */

.alert-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  padding: 10px var(--gut);
  background: var(--alert);
  color: #fff;
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  position: relative;
}

.alert-bar__head {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.alert-bar__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.75);
  animation: alertPulse 2s infinite;
}
@keyframes alertPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.75); }
  70%  { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.alert-bar__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #fff;
  color: var(--alert);
  padding: 3px 9px;
  border-radius: 2px;
  white-space: nowrap;
}

.alert-bar__items {
  display: flex;
  align-items: center;
  gap: 8px 26px;
  flex-wrap: wrap;
  justify-content: center;
}

.alert-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  /* 2.5.8 target size */
  padding: 5px 0;
  min-height: 24px;
  /* 1.4.11 — the underline is what marks these as links, so it needs 3:1.
     0.35 gave 1.93:1; 0.7 gives 3.71:1. */
  border-bottom: 1.5px solid rgba(255,255,255,0.7);
  transition: border-color .2s ease, gap .2s ease;
}
.alert-item strong { font-weight: 700; }
.alert-item:hover,
.alert-item:focus-visible {
  border-bottom-color: #fff;
  gap: 10px;
}
.alert-item svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.alert-item:hover svg { transform: translateX(3px); }

/* Separator between the two alerts on wide screens */
.alert-bar__items .alert-item + .alert-item { position: relative; }
.alert-bar__items .alert-item + .alert-item::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: rgba(255,255,255,0.3);
}

@media (max-width: 820px) {
  .alert-bar { font-size: 12.5px; padding: 46px 16px 10px 16px; gap: 8px 14px; }
  .alert-bar__items { gap: 4px 14px; flex-direction: column; align-items: flex-start; }
  .alert-bar__items .alert-item + .alert-item::before { display: none; }
}
@media (max-width: 480px) {
  .alert-item__detail { display: none; }
}

/* Briefly highlight a card that was opened from an alert link */
.laced-card.is-flagged {
  outline: 3px solid var(--alert);
  outline-offset: 3px;
}

body.gate-focused .gate { display: none; }

body.gate-focused main > section:not(.gate-highlight) {
  display: none;
}

body.gate-focused main > section.gate-highlight {
  display: revert;
}

/* Flex column on main lets us re-order sections per audience
   without touching document order. */
main { display: flex; flex-direction: column; }
main > * { order: 5; }
main > .focus-banner { order: -1; }
main > .gate         { order: 0; }

/* People who use land on harm reduction and emergency first —
   safety information ahead of everything else. */
body.aud-user #harm      { order: 1; }
body.aud-user #emergency { order: 2; }

/* Extra scroll offset while the focus banner is showing,
   so anchor jumps clear both the header and the banner. */
body.gate-focused section[id],
body.gate-focused h2[id],
body.gate-focused #cravings,
body.gate-focused #pink-cocaine,
body.gate-focused #medetomidine-alert {
  scroll-margin-top: 150px;
}

/* Alert-bar targets sit mid-section, so give them clearance too */
#pink-cocaine,
#medetomidine-alert { scroll-margin-top: 110px; }

/* Show only the check-in relevant to the chosen audience */
body.aud-young  [data-audience-card="family"],
body.aud-user   [data-audience-card="family"] { display: none; }
body.aud-family [data-audience-card="user"]   { display: none; }

/* When only one card is showing, don't leave it stranded in a 2-col grid */
body.aud-family .assess__cards,
body.aud-young  .assess__cards,
body.aud-user   .assess__cards {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
}

/* ============================================
   FOCUS BANNER
   ============================================ */

.focus-banner {
  display: none;
  position: sticky;
  top: 77px; /* sits below the site's sticky header */
  z-index: 700;
  background: var(--charcoal);
  color: var(--paper);
  padding: 12px var(--gut);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--rust);
}
body.gate-focused .focus-banner { display: flex; }

.focus-banner__path {
  display: flex;
  align-items: center;
  gap: 10px;
}
.focus-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rust);
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.focus-banner__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.focus-banner__switch {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-soft);
  background: none;
  border: none;
  cursor: pointer;
  /* 2.5.8 Target Size (Minimum) — needs 24x24 CSS px */
  padding: 6px 4px;
  min-height: 24px;
  font-family: var(--sans);
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.focus-banner__switch:hover { color: #fff; }
.focus-banner__clear {
  font-size: 12px;
  color: var(--teal-soft);   /* was --muted: 2.77:1 on charcoal, failed 1.4.3 */
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 6px 14px;
  font-family: var(--sans);
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.focus-banner__clear:hover { border-color: var(--paper); color: var(--paper); }

/* ============================================
   CONTRAST CORRECTIONS — WCAG 2.2 AA (1.4.3)
   The stylesheet already warns that --rust is too
   dark to sit on --charcoal or --teal-deep, and
   supplies --rust-light for exactly that job. A
   handful of dark-section accents were still using
   --rust and measured 2.1:1 to 2.7:1 against a 4.5:1
   requirement. These rules move them onto the token
   that was designed for it. Appended last so they
   win on source order without touching the original
   declarations.
   ============================================ */

/* Rust accents sitting on --charcoal-family backgrounds */
.signs .eyebrow,
.signs .section-title em,
.sign-block__num,
.cutting-agents__eyebrow,
.cutting-agents__lede strong,
.cutting-fact__num,
.cutting-fact p strong,
.cg-form-card__num,
.cg-form-card__detail h4,
.stats--dark .stat__source {
  color: var(--rust-light);
}

/* Small print inside the dark stats band: --muted gave 2.7:1 */
.stats--dark .stats__caveat {
  color: #A49C92;
}

/* Inline links inside the dark alert panels inherited the teal link
   colour, which is 1.9:1 on charcoal. Match the panel's own accent. */
.trend-danger a {
  color: #F2B5A6;
  text-decoration-color: rgba(242, 181, 166, 0.5);
}
.trend-danger a:hover { color: #FFD3C4; }

/* ============================================
   CONTRAST, ROUND TWO — inside collapsed panels
   These were invisible to the first audit because
   axe skips hidden content, and every one of them
   sits behind an accordion or a tab. Found by
   force-opening every panel and re-testing.
   ============================================ */

/* Worst defect on the site: the sexual-assault support box sits on
   --teal-deep and the links inherited the global link colour, which is
   also --teal-deep. Ratio 1.0:1. The SARCS and Rape Crisis numbers were
   literally invisible. */
.harm__sex-support a {
  color: var(--rust-light);
  text-decoration-color: rgba(245, 196, 174, 0.6);
}
.harm__sex-support a:hover { color: #fff; text-decoration-color: #fff; }

/* "Print this page" on the red emergency band: teal on alert-red, 1.54:1. */
.em-download { color: #fff; }
.em-download:hover { color: #fff; }

/* Rust on charcoal in the schema panel, 2.74:1 — same family as the
   thirteen fixed in the first pass, but hidden inside a disclosure. */
.schema-insight p strong { color: var(--rust-light); }
.schema-insight__cite { color: var(--rust-light) !important; }

/* The global rule is `a:hover { color: var(--rust) }`, and rust is 1.44:1
   on teal. Every link that sits on a dark ground needs its hover pinned
   light, or it disappears the moment a mouse touches it. */
.harm__resource-link:hover,
.emergency__after a:hover,
.stats--dark a:hover,
.footer a:hover { color: #fff; }

/* ============================================
   MOBILE OVERFLOW CORRECTIONS
   See mobile_patch.py for the full diagnosis.
   ============================================ */

/* .help__inner: a 1fr track cannot shrink below its content's minimum, and
   its widest item had a ~415px floor inside a 350px box. */
@media (max-width: 880px) {
  .help__inner { grid-template-columns: minmax(0, 1fr); }
  .help__inner > * { min-width: 0; }
}

/* .channel's middle column was held open by "info@rcatrust.org.uk", which
   has no break opportunity in it. */
.help__channels { grid-template-columns: minmax(0, 1fr); }
.channel { grid-template-columns: 44px minmax(0, 1fr) auto; }
.channel__value { overflow-wrap: anywhere; }

/* Form controls default to a size attribute width, not their container's. */
.form input,
.form select,
.form textarea { max-width: 100%; }

/* Narrow phones: drop the channel's right-hand meta below the value
   rather than letting it compete for the same row. */
@media (max-width: 460px) {
  .channel { grid-template-columns: 44px minmax(0, 1fr); row-gap: 4px; }
  .channel__hours { grid-column: 2; text-align: left; }
}

/* Very narrow phones: the header lockup is the last thing that will not
   fit. The search button keeps its aria-label, so hiding the visible word
   costs nothing to a screen reader and it stays a 40px+ target. */
@media (max-width: 400px) {
  .header__inner { gap: 10px; }
  .brand { font-size: 17px; gap: 9px; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__sub { display: none; }
  .site-search__open { padding-left: 12px; padding-right: 12px; }
  .site-search__open span {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  .nav__cta { font-size: 11px; padding: 10px 12px; letter-spacing: 0.04em; }
}
/* ============================================
   HEADER CAPACITY  (900-1100px)
   The header runs out of room before the nav
   collapses: the brand wrapped onto four lines
   and the enquiry form pushed the page into
   horizontal scroll. Found by sweeping 900 and
   960px, widths the first pass skipped between
   880 and 1024.
   ============================================ */

/* The brand and the primary CTA must never wrap. */
.brand { flex-shrink: 0; }
.brand__text { white-space: nowrap; }
.nav__cta, .nav__emergency, .site-search__open { white-space: nowrap; }

/* Two inputs side by side in a narrow column: 1fr takes its minimum from the
   input's own default size, so the row overflowed the page. */
.form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* The nav now collapses at 1100px rather than 880px, because between those
   widths there is not enough room for brand + search + four dropdowns + the
   call to action. The rule that hides the CTA's label belongs to the phone
   layout only, so it is put back for the newly collapsed range. */
@media (min-width: 881px) and (max-width: 1100px) {
  .nav__cta span { display: inline; }
}

/* ============================================
   CRISIS PATH
   See crisis.py for the reasoning. Opens on
   :target so it works with JavaScript switched
   off; .is-open is what the JS uses.
   ============================================ */

/* The Emergency trigger lives in the header, not the fixed Quick Exit bar.
   That bar is position:fixed at top-right; putting Emergency in it doubled its
   width and, once the page scrolled and the header stuck to the top, it landed
   straight on top of the "Get Help Now" button. In the header it sits in normal
   flex flow, so it can never overlap anything, and it is visible at every
   scroll position because the header is sticky. Quick Exit keeps its own bar
   and its own styling — the two safety controls must not compete. */
.nav__emergency {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--alert); background: #FCEFEA;
  border: 1px solid #E4A895; border-radius: 3px;
  text-decoration: none; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav__emergency:hover { background: var(--alert); color: #fff; border-color: var(--alert); }
.nav__emergency svg { width: 14px; height: 14px; flex-shrink: 0; }

/* The header only has genuine room for this above ~1150px. Below that the
   brand starts wrapping, so the thumb button takes over instead — the two
   breakpoints are deliberately continuous so there is never a width with no
   crisis route. */
@media (max-width: 1279px) {
  .nav__emergency { display: none; }
}
/* Nothing in the header may wrap onto a second line. */
.nav__list > li > a,
.nav__dropdown-trigger,
.nav__cta,
.nav__emergency,
.site-search__open { white-space: nowrap; }

/* ---- the bar above the landing doors ---- */
.gate-emergency {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  margin-bottom: clamp(20px, 3vw, 30px);
  background: #FCEFEA;
  border: 1px solid #E9B9A9;
  border-left: 4px solid var(--alert);
  border-radius: 3px;
  text-decoration: none;
  color: var(--charcoal);
  transition: background .18s ease, border-color .18s ease;
}
.gate-emergency:hover { background: #FBE5DD; border-left-color: #8E2818; }
.gate-emergency__icon { flex-shrink: 0; color: var(--alert); display: flex; }
.gate-emergency__icon svg { width: 26px; height: 26px; }
.gate-emergency__text { display: block; line-height: 1.4; }
.gate-emergency__text strong {
  display: block; font-size: 17px; font-weight: 700; color: var(--alert);
  margin-bottom: 2px;
}
.gate-emergency__text span { font-size: 14.5px; color: var(--ink); }
.gate-emergency__go {
  margin-left: auto; font-size: 22px; color: var(--alert); flex-shrink: 0;
}
@media (max-width: 560px) {
  .gate-emergency { gap: 12px; padding: 14px 16px; }
  .gate-emergency__text strong { font-size: 16px; }
  .gate-emergency__text span { font-size: 13.5px; }
  .gate-emergency__go { display: none; }
}

/* ---- floating button, phones only ---- */
.enow-fab { display: none; }
@media (max-width: 1279px) {
  .enow-fab {
    display: flex; align-items: center; gap: 8px;
    position: fixed; right: 14px; bottom: 14px; z-index: 880;
    padding: 13px 18px 13px 15px;
    background: var(--alert); color: #fff;
    border-radius: 999px;
    font-family: var(--sans); font-size: 15px; font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .enow-fab.is-shown { opacity: 1; visibility: visible; transform: none; }
  .enow-fab svg { width: 17px; height: 17px; }
}
@media print { .enow-fab, .nav__emergency { display: none !important; } }

/* The Quick Exit bar is position:fixed at top-right. Once the page scrolls,
   the alert bar leaves and the header sticks to the top — and the bar was
   landing straight on the "Get Help Now" button. This was true of the original
   site at 1366px and below, and adding anything to the bar made it worse.
   Rather than squeeze the header to make room (which wraps the brand and the
   nav), the bar simply steps down below the header when the header is stuck.
   It stays fixed, stays top-right, and stays reachable at all times. */
.quickbar { transition: top .18s ease; }
body.qb-clear .quickbar { top: var(--hdr-h, 81px); }

/* ---- the panel ---- */
.enow { display: none; }
.enow:target, .enow.is-open {
  display: block;
  position: fixed; inset: 0; z-index: 1000;
}
.enow__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 9, 8, 0.72);
}
.enow__panel {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(0,0,0,0.4);
}
@media (min-width: 700px) {
  .enow__panel {
    height: auto; max-height: 92vh;
    margin: 4vh auto; border-radius: 4px;
  }
}
.enow__head {
  position: sticky; top: 0; z-index: 2;
  background: var(--alert); color: #fff;
  padding: 18px 56px 18px 24px;
}
.enow__kicker {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #FFD9CF; margin-bottom: 5px;
}
.enow__title {
  font-family: var(--serif); font-size: clamp(21px, 3.4vw, 27px);
  font-weight: 600; line-height: 1.15; color: #fff; margin: 0;
  letter-spacing: -0.01em;
}
.enow__close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; border-radius: 3px;
}
.enow__close:hover { background: rgba(255,255,255,0.16); }
.enow__close svg { width: 19px; height: 19px; }

.enow__body { padding: 22px 24px 30px; }

.enow__call {
  display: block; text-align: center; text-decoration: none;
  background: var(--alert); color: #fff;
  padding: 20px 18px; border-radius: 4px;
  margin-bottom: 16px;
}
.enow__call:hover { background: #8E2818; }
.enow__call-num {
  display: block; font-family: var(--serif);
  font-size: clamp(34px, 7vw, 44px); font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
}
.enow__call-sub {
  display: block; font-family: var(--sans); font-size: 14px;
  color: #FFD9CF; margin-top: 7px;
}

.enow__reassure {
  font-size: 15px; line-height: 1.55; color: var(--ink);
  background: var(--paper-warm); border-left: 3px solid var(--teal-deep);
  padding: 13px 15px; margin-bottom: 24px;
}
.enow__reassure strong { color: var(--charcoal); }

.enow__sub {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
.enow__signs { list-style: none; margin: 0 0 24px; padding: 0; }
.enow__signs li {
  position: relative; padding: 7px 0 7px 24px;
  font-size: 16px; line-height: 1.45; color: var(--charcoal);
  border-bottom: 1px solid var(--line);
}
.enow__signs li::before {
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--alert);
}

.enow__state {
  padding: 14px 16px; margin-bottom: 10px;
  background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--teal-deep);
}
.enow__state--urgent { border-left-color: var(--alert); background: #FCEFEA; }
.enow__state-q {
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  color: var(--charcoal); margin-bottom: 5px;
}
.enow__state p:last-child {
  font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0;
}

.enow__nx {
  font-size: 14.5px; line-height: 1.55; color: var(--ink);
  padding: 13px 15px; margin: 18px 0 0;
  background: var(--paper-warm); border-left: 3px solid var(--heather-deep);
}

.enow__foot {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
.enow__more {
  font-size: 14px; font-weight: 600; color: var(--teal-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.enow__sams {
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
  margin-top: 16px;
}
.enow__sams a { color: var(--muted); font-weight: 700; }

body.enow-open { overflow: hidden; }

/* ============================================
   CHECK-IN RESULT — band scale, safety flags
   ============================================ */
.quiz-scale { display: block; max-width: 420px; margin: 0 auto 18px; }
.quiz-scale__track {
  display: flex; gap: 5px; margin-bottom: 10px;
}
.quiz-scale__seg {
  flex: 1; height: 9px; border-radius: 1px;
  background: rgba(247, 242, 233, 0.16);
}
.quiz-scale__caption {
  display: block; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(247, 242, 233, 0.62);
}
.quiz-result__foot {
  font-size: 13px; line-height: 1.55;
  color: rgba(247, 242, 233, 0.62);
  max-width: 460px; margin: 22px auto 0;
}
.quiz-result__foot a { color: rgba(247, 242, 233, 0.62); }
.quiz-result__foot a:hover { color: var(--paper); }

.quiz-flag {
  text-align: left; max-width: 560px; margin: 0 auto 14px;
  padding: 16px 18px;
  background: rgba(247, 242, 233, 0.07);
  border-left: 3px solid var(--rust-light);
}
.quiz-flag__title {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  color: var(--rust-light); margin-bottom: 6px;
}
.quiz-flag__text {
  font-size: 14px !important; line-height: 1.55;
  color: rgba(247, 242, 233, 0.88); margin: 0 0 8px !important;
}
.quiz-flag__link {
  font-size: 13px; font-weight: 600; color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

/* "How this is scored" disclosure */
.assess-method__intro { margin-bottom: 20px; }
.assess-method h4 {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 24px 0 10px;
}
.assess-method p { font-size: 15px; line-height: 1.65; margin-bottom: 12px; }
.assess-method ul { margin: 0 0 12px 20px; }
.assess-method li { font-size: 15px; line-height: 1.6; margin-bottom: 7px; }
.assess-bands {
  width: 100%; border-collapse: collapse; margin: 4px 0 16px;
  font-size: 14px;
}
.assess-bands th, .assess-bands td {
  text-align: left; padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.assess-bands th {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.assess-bands td:first-child { white-space: nowrap; font-weight: 600; }
.assess-bands__dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: baseline;
}
@media (max-width: 560px) {
  .assess-bands, .assess-bands tbody, .assess-bands tr, .assess-bands td { display: block; width: 100%; }
  .assess-bands thead { display: none; }
  .assess-bands tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .assess-bands td { border: 0; padding: 2px 0; }
}


/* ============================================
   SOCIALS ANNOUNCEMENT BAR + FOOTER SOCIAL LINKS
   Added 17 September 2026.
   Sits BELOW the active-alert bar and the header by design: drug
   alerts must always be the first thing on the page. This strip is
   informational, so it is quieter and dismissible.
   ============================================ */

.reportbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  padding: 9px calc(var(--gut) + 28px) 9px var(--gut);
  background: var(--teal-deep);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  position: relative;
}
.reportbar[hidden] { display: none; }
.reportbar__text { margin: 0; font-weight: 500; }
.reportbar__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--rust);
  color: #fff;
  padding: 3px 9px;
  border-radius: 2px;
  white-space: nowrap;
  margin-right: 10px;
}
.reportbar__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
  white-space: nowrap;
  margin-left: 4px;
}
.reportbar__link:hover,
.reportbar__link:focus-visible { color: var(--rust-light); }
.reportbar__close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--paper);
  opacity: 0.7;
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  border-radius: 4px;
}
.reportbar__close:hover, .reportbar__close:focus-visible { opacity: 1; }
@media (max-width: 560px) {
  .reportbar { font-size: 13px; padding-right: calc(var(--gut) + 24px); }
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 13px;
}
.footer__social-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
.footer__social a {
  color: var(--paper);
  text-decoration: none;
  border: 1px solid rgba(247, 242, 233, 0.28);
  border-radius: 999px;
  padding: 3px 12px;
}
.footer__social a:hover, .footer__social a:focus-visible {
  color: var(--rust-light);
  border-color: var(--rust-light);
}

/* ===== NITAZENES — plain-talk section (added Sept 2026) ===== */
.nitaz {
  background: var(--charcoal);
  color: var(--paper);
  padding: clamp(64px, 9vw, 120px) 0;
  position: relative;
}
.nitaz__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.nitaz__eyebrow {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #F2B5A6; margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.nitaz__eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #E8573F; box-shadow: 0 0 0 4px rgba(232,87,63,0.22); }
.nitaz__title {
  font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 24px;
  max-width: 24ch; color: var(--paper) !important;
}
.nitaz__title em { font-style: italic; color: #F2B5A6; }
.nitaz__lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65; max-width: 62ch; color: rgba(247,242,233,0.86); margin-bottom: 40px; }
.nitaz__lede strong { color: var(--paper); }

.nitaz__facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 28px; }
.nitaz__fact { background: rgba(247,242,233,0.06); border: 1px solid rgba(247,242,233,0.12); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 0.95rem; line-height: 1.55; color: rgba(247,242,233,0.82); }
.nitaz__fact-big { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: var(--paper); font-weight: 600; letter-spacing: -0.01em; }

.nitaz__callout { border-left: 4px solid #F2B5A6; background: rgba(242,181,166,0.08); padding: 16px 20px; border-radius: 0 8px 8px 0; margin-bottom: 56px; max-width: 760px; }
.nitaz__callout-kicker { font-weight: 700; color: #F2B5A6; margin-bottom: 4px; }
.nitaz__callout p { line-height: 1.6; }

.nitaz__block { margin-bottom: 56px; }
.nitaz__h3 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--paper); margin-bottom: 14px; max-width: 30ch; }
.nitaz__body { font-size: 1.05rem; line-height: 1.7; max-width: 66ch; color: rgba(247,242,233,0.84); margin-bottom: 18px; }
.nitaz__body strong { color: var(--paper); }

.nitaz__routes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 8px; }
.nitaz__route { background: rgba(247,242,233,0.06); border: 1px solid rgba(247,242,233,0.12); border-radius: 8px; padding: 22px; }
.nitaz__route--hot { border-color: #E8573F; background: rgba(232,87,63,0.10); }
.nitaz__route-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(247,242,233,0.14); font-weight: 700; margin-bottom: 12px; }
.nitaz__route--hot .nitaz__route-num { background: #E8573F; color: #fff; }
.nitaz__route h4 { font-family: var(--serif); font-size: 1.25rem; color: var(--paper); margin-bottom: 8px; }
.nitaz__route p { font-size: 0.97rem; line-height: 1.6; color: rgba(247,242,233,0.82); }
.nitaz__route p strong { color: var(--paper); }

.nitaz__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10px 0 18px; }
.nitaz__col { border-radius: 8px; padding: 22px; background: rgba(247,242,233,0.06); border: 1px solid rgba(247,242,233,0.12); }
.nitaz__col--danger { background: rgba(232,87,63,0.12); border-color: #E8573F; }
.nitaz__col-head { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; color: rgba(247,242,233,0.7); }
.nitaz__col--danger .nitaz__col-head { color: #F2B5A6; }
.nitaz__col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.nitaz__col li { padding-left: 20px; position: relative; line-height: 1.5; color: rgba(247,242,233,0.86); }
.nitaz__col li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: rgba(247,242,233,0.4); }
.nitaz__col--danger li { color: var(--paper); font-weight: 500; }
.nitaz__col--danger li::before { background: #E8573F; }

.nitaz__warn { background: var(--alert); color: #fff; border-radius: 8px; padding: 20px 24px; }
.nitaz__warn p { line-height: 1.6; font-size: 1.02rem; }
.nitaz__warn strong { color: #fff; }

.nitaz__steps { list-style: none; counter-reset: nz; display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin-top: 10px; }
.nitaz__steps li { counter-increment: nz; position: relative; padding: 18px 20px 18px 66px; background: rgba(247,242,233,0.06); border: 1px solid rgba(247,242,233,0.12); border-radius: 8px; line-height: 1.6; color: rgba(247,242,233,0.86); }
.nitaz__steps li strong { color: var(--paper); }
.nitaz__steps li::before { content: counter(nz); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: #E8573F; color: #fff; font-weight: 800; display: grid; place-items: center; }
.nitaz__small { margin-top: 12px; font-size: 0.95rem; color: rgba(247,242,233,0.7); }

.nitaz__keep { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.nitaz__keep-item { background: rgba(247,242,233,0.06); border: 1px solid rgba(247,242,233,0.12); border-radius: 8px; padding: 22px; }
.nitaz__keep-item h4 { font-family: var(--serif); font-size: 1.2rem; color: var(--paper); margin-bottom: 8px; line-height: 1.25; }
.nitaz__keep-item p { font-size: 0.97rem; line-height: 1.6; color: rgba(247,242,233,0.82); }
.nitaz__keep-item a { color: #F2B5A6; font-weight: 700; white-space: nowrap; }
.nitaz__keep-item a:hover, .nitaz__keep-item a:focus-visible { color: #fff; }

.nitaz__rise { display: flex; gap: 36px; align-items: center; background: rgba(247,242,233,0.05); border: 1px solid rgba(247,242,233,0.12); border-radius: 10px; padding: 28px; margin-bottom: 48px; }
.nitaz__rise-text { flex: 1 1 48%; }
.nitaz__rise-svg { flex: 1 1 52%; max-width: 420px; width: 100%; height: auto; }
.nitaz__src { font-size: 0.85rem; color: rgba(247,242,233,0.6); line-height: 1.5; }

.nitaz__close { font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.3; max-width: 34ch; color: var(--paper); border-top: 1px solid rgba(247,242,233,0.18); padding-top: 32px; }

@media (max-width: 900px) {
  .nitaz__facts { grid-template-columns: 1fr 1fr; }
  .nitaz__routes { grid-template-columns: 1fr; }
  .nitaz__rise { flex-direction: column; align-items: stretch; }
}
@media (max-width: 600px) {
  .nitaz__facts, .nitaz__compare, .nitaz__keep { grid-template-columns: 1fr; }
  .nitaz__steps li { padding-left: 60px; }
}
/* Renfrewshire panel in Stats (added Sept 2026) */
.stats__local { margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(247,242,233,0.18); }
.stats__local-title { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--paper); margin-bottom: 8px; }
.stats__local-intro { color: rgba(247,242,233,0.8); font-size: 1.02rem; margin-bottom: 22px; max-width: 60ch; }
.stats__local-foot { color: rgba(247,242,233,0.85); font-size: 1rem; line-height: 1.6; max-width: 70ch; margin-top: 22px; }
@media print { .reportbar { display: none !important; } }


/* ==========================================================
   POLISH PASS — 29 September 2026
   One block, identical on every page, loaded last so it wins.
   1. Active-alert strip (replaces the old .alert-bar)
   2. Quick Exit lives in the header once the nav collapses
   3. Phone header that actually fits (no sideways scroll)
   4. Mobile menu: scrollable, with help + emergency inside
   5. Report strip: one tidy line on phones
   6. Small fixes (fact cards, footer, 1280px header)
   ========================================================== */

/* ---------- 1. ACTIVE-ALERT STRIP ---------- */
.alertstrip {
  background: var(--alert);
  color: #fff;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.35;
  position: relative;
  z-index: 810;
}
.alertstrip a { color: #fff; }
.alertstrip__inner {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 40px;
  padding: 0 var(--gut);
  display: flex;
  align-items: center;
  gap: 8px 18px;
}
.alertstrip__pulse {
  width: 8px; height: 8px; flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  animation: alertPulse 2s infinite;
}
.alertstrip__tag {
  display: inline-flex; align-items: center; gap: 9px;
  flex-shrink: 0;
  text-decoration: none;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  min-height: 32px;
}
.alertstrip__tag-text {
  background: #fff; color: var(--alert);
  padding: 3px 8px; border-radius: 2px;
}
.alertstrip__tag:hover .alertstrip__tag-text { background: #FCEFEA; }
.alertstrip__count {
  display: inline-block; margin-right: 8px;
  background: #fff; color: var(--alert);
  padding: 2px 7px; border-radius: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  vertical-align: 1px;
}

.alertstrip__items {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  gap: 4px 0;
  min-width: 0;
}
.alertstrip__items li { display: flex; align-items: center; min-width: 0; }
.alertstrip__items li + li::before {
  content: ""; width: 1px; height: 14px; margin: 0 14px;
  background: rgba(255,255,255,0.35); flex-shrink: 0;
}
.alertstrip__item {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1.5px solid rgba(255,255,255,0.55);
  white-space: nowrap;
  transition: border-color .2s ease, gap .2s ease;
}
.alertstrip__item:hover, .alertstrip__item:focus-visible { border-bottom-color: #fff; gap: 9px; color: #fff; }
.alertstrip__item strong { font-weight: 700; }
.alertstrip__detail { opacity: 0.92; }
.alertstrip__item svg { width: 11px; height: 11px; flex-shrink: 0; }
.alertstrip__all {
  margin-left: auto; flex-shrink: 0;
  font-weight: 700; font-size: 12.5px;
  text-decoration: none; white-space: nowrap;
  padding: 6px 0;
}
.alertstrip__all:hover { text-decoration: underline; color: #fff; }
.alertstrip__toggle { display: none; }
.alertstrip :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The fixed Quick Exit sits over the right end of the strip on desktop —
   keep the strip's content clear of it. */
@media (min-width: 1101px) {
  .alertstrip__inner {
    padding-right: max(var(--gut), calc(160px - (100vw - var(--max)) / 2));
  }
}
/* Names only in the strip; the one-line summaries live in the phone panel
   and on the alerts page. Keeps the strip to a single calm line. */
.alertstrip__detail { display: none; }

/* Phones and small tablets: one 44px row that opens a list. */
@media (max-width: 900px) {
  .alertstrip__inner { padding: 0 16px; min-height: 44px; }
  .alertstrip__all { display: none; }
  .alertstrip.is-js .alertstrip__tag { display: none; }
  .alertstrip.is-js .alertstrip__toggle {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 44px; padding: 0;
    color: #fff; text-align: left;
    font: inherit; font-size: 13.5px;
  }
  .alertstrip__toggle-names {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 600;
  }
  .alertstrip__toggle-cta {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    padding: 5px 9px; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px;
  }
  .alertstrip__toggle-cta svg { width: 12px; height: 12px; transition: transform .2s ease; }
  .alertstrip.is-open .alertstrip__toggle-cta svg { transform: rotate(180deg); }

  /* The list becomes a drop-down panel under the row */
  .alertstrip__items { display: none; }
  .alertstrip.is-open .alertstrip__panel { display: block; }
}
.alertstrip__panel { display: none; }
.alertstrip__panel {
  border-top: 1px solid rgba(255,255,255,0.22);
  background: #A42E1B;
  padding: 6px 16px 14px;
}
.alertstrip__panel ul { list-style: none; margin: 0; padding: 0; }
.alertstrip__panel li + li { border-top: 1px solid rgba(255,255,255,0.16); }
.alertstrip__panel a.alertstrip__row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; text-decoration: none;
}
.alertstrip__row span { flex: 1; min-width: 0; }
.alertstrip__row strong { display: block; font-size: 15px; font-weight: 700; }
.alertstrip__row em { display: block; font-style: normal; font-size: 13px; opacity: 0.9; margin-top: 1px; }
.alertstrip__row svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.85; }
.alertstrip__panel .alertstrip__more {
  display: inline-flex; margin-top: 6px;
  font-weight: 700; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (min-width: 901px) { .alertstrip.is-open .alertstrip__panel { display: none; } }

/* ---------- 2. QUICK EXIT ---------- */
/* Desktop: same fixed button, now sized to the strip it sits on, darker so it
   reads as a separate control from the alerts. */
.quickbar__exit {
  min-height: 40px; box-sizing: border-box;
  background: #8E2818;
  box-shadow: -1px 0 0 rgba(255,255,255,0.3);
  border-bottom-left-radius: 4px;
}
.quickbar__exit:hover { background: var(--charcoal); color: #fff; }

/* In-header version, used whenever the nav is collapsed. It's in the sticky
   header, so it is always on screen and never covers content. */
.hdr-exit { display: none; }
@media (max-width: 1100px) {
  .quickbar { display: none !important; }
  .hdr-exit {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; padding: 0 13px;
    background: var(--alert); color: #fff;
    border-radius: 4px;
    font-family: var(--sans); font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
  }
  .hdr-exit:hover, .hdr-exit:focus-visible { background: #8E2818; color: #fff; }
  .hdr-exit svg { width: 13px; height: 13px; flex-shrink: 0; }
}
@media print { .hdr-exit, .alertstrip__toggle, .alertstrip__panel { display: none !important; } }

/* ---------- 3. HEADER THAT FITS ---------- */
@media (max-width: 1100px) {
  .header__inner { gap: 12px; }
  .brand { margin-right: auto; }
  .site-search__open { margin-right: 0; }
  .nav { gap: 8px; }
  .nav__cta { margin-left: 0; }
  .nav__toggle { flex-shrink: 0; }
}
/* Hide the dot-only "Get Help Now" square — it moves into the menu. */
@media (max-width: 880px) {
  .nav__cta { display: none; }
  .site-search__open { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 4px; flex-shrink: 0; }
}
@media (max-width: 640px) {
  .header__inner { padding: 12px 16px; gap: 8px; }
  .nav { gap: 6px; }
  .brand { gap: 9px; font-size: 17px; margin-right: auto; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__sub { display: none; }
  /* Two-line wordmark: "Let's Talk / About Charlie" */
  .brand__text { white-space: normal; max-width: 6.7em; line-height: 1.02; }
  .site-search__open span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .hdr-exit__word { display: none; }
  .hdr-exit { padding: 0 11px; }
}
@media (max-width: 359px) {
  .header__inner { padding-left: 14px; padding-right: 14px; gap: 6px; }
  .brand { font-size: 15.5px; gap: 7px; }
  .brand__mark { width: 32px; height: 32px; }
  .hdr-exit { padding: 0 9px; letter-spacing: 0.03em; gap: 5px; }
  .site-search__open, .nav__toggle { width: 38px; height: 38px; }
  .hdr-exit { height: 38px; }
}
/* Sticky offsets: follow the real header height (set by the page script)
   rather than a hard-coded 77px. */
.focus-banner { top: var(--hdr-h, 77px); }
@media (max-width: 640px) {
  section[id], h2[id], #cravings { scroll-margin-top: 80px; }
}

/* 1280–1339px: the Emergency button arrives and the row was 7px too wide. */
@media (min-width: 1101px) and (max-width: 1399px) {
  .header__inner { gap: 16px; }
  .nav__dropdown-trigger { padding-left: 10px; padding-right: 10px; }
}

/* ---------- 4. MOBILE MENU ---------- */
.nav__menu-help { display: none; }
@media (max-width: 1100px) {
  .nav__list.is-open {
    max-height: calc(100vh - var(--hdr-h, 70px));
    max-height: calc(100dvh - var(--hdr-h, 70px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 20px;
  }
  .nav__list.is-open .nav__menu-help {
    display: grid; gap: 10px;
    width: 100%;
    padding-top: 18px;
  }
  .nav__menu-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--charcoal); color: var(--paper);
    padding: 14px 18px; border-radius: 3px;
    font-family: var(--sans); font-size: 14px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
  }
  .nav__menu-cta:hover { background: var(--rust); color: #fff; }
  .nav__menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .nav__menu-phone, .nav__menu-sos {
    display: flex; flex-direction: column; justify-content: center;
    padding: 11px 14px; border-radius: 3px; text-decoration: none;
    font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.25;
  }
  .nav__menu-phone { border: 1px solid var(--line); color: var(--teal-deep); }
  .nav__menu-sos { background: #FCEFEA; border: 1px solid #E4A895; color: var(--alert); }
  .nav__menu-phone small, .nav__menu-sos small {
    font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px;
  }
}

/* ---------- 5. REPORT STRIP ---------- */
.reportbar__more { display: inline; }
@media (max-width: 1180px) { .reportbar__more { display: none; } }
@media (max-width: 640px) {
  .reportbar {
    justify-content: flex-start;
    padding: 9px 44px 9px 16px;
    font-size: 13px; line-height: 1.4;
  }
  .reportbar__more { display: none; }
  .reportbar__tag { font-size: 9.5px; padding: 2px 7px; margin-right: 8px; vertical-align: 1px; }
  .reportbar__link { margin-left: 2px; }
  .reportbar__close { right: 6px; padding: 10px; }
}

/* ---------- 6. SMALL FIXES ---------- */
/* ".partners p" was overriding the fact-card numbers, so "49" rendered at
   body size. */
.partners .about-fact__num {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(26px, 3.6vw, 36px); line-height: 1;
  color: var(--teal-deep); margin: 0 0 8px; letter-spacing: -0.02em;
}
.partners .about-fact__lbl { font-size: 13px; margin: 0; line-height: 1.45; }

/* Footer: the brand column no longer gets squeezed into half the width on phones */
@media (max-width: 880px) {
  .footer__top > div:first-child { grid-column: 1 / -1; }
}

/* The 999 button kept its right edge on the page even when the page was
   wider than the screen; with the overflow fixed it just needs to clear the
   iPhone home bar. */
.enow-fab { bottom: max(14px, env(safe-area-inset-bottom)); }



.laced {
  background: var(--teal-deep);   /* was --charcoal: sat directly under the charcoal guide section */
  color: var(--paper);
  padding: clamp(64px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.laced::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 0%, rgba(154, 69, 39, 0.18), transparent 55%),
              radial-gradient(ellipse at 90% 90%, rgba(31, 78, 78, 0.22), transparent 55%);
  pointer-events: none;
}
.laced__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
  position: relative;
}
.laced__eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #F2B5A6;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.laced__eyebrow::before {
  content: ""; display: inline-block; width: 28px; height: 1px; background: #F2B5A6;
}
.laced__title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.02em;
  margin-bottom: 24px; max-width: 22ch;
  color: var(--paper) !important;
}
.laced__title em { font-style: italic; color: #F2B5A6; }
.laced__lede {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55; max-width: 60ch;
  color: rgba(247, 242, 233, 0.85);
  margin-bottom: 48px;
}
.laced__lede strong { color: var(--paper); font-weight: 700; }
.laced__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 56px;
}
.laced-card {
  background: rgba(247, 242, 233, 0.04);
  border: 1px solid rgba(247, 242, 233, 0.12);
  border-radius: 6px;
  padding: 22px 22px 18px;
  text-align: left;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
  color: var(--paper);
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--sans);
}
.laced-card:hover { border-color: rgba(242, 181, 166, 0.5); background: rgba(247, 242, 233, 0.07); transform: translateY(-2px); }
.laced-card:focus-visible { outline: 2px solid #F2B5A6; outline-offset: 3px; }
.laced-card__tag {
  align-self: flex-start;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--alert); color: var(--paper);
  padding: 4px 10px; border-radius: 2px;
  margin-bottom: 12px;
}
.laced-card__tag.is-amber { background: var(--rust); }
.laced-card__name {
  font-family: var(--serif);
  font-size: 1.5rem; font-weight: 500;
  letter-spacing: -0.01em;
}
.laced-card__street {
  font-size: 0.8rem;
  color: rgba(247, 242, 233, 0.72);
  font-style: italic;
}
.laced-card__reveal {
  max-height: 0; opacity: 0; overflow: hidden;
  font-size: 0.9rem; line-height: 1.55;
  color: rgba(247, 242, 233, 0.85);
  transition: max-height .35s ease, opacity .25s ease, margin .25s ease;
}
.laced-card__reveal strong { color: #F2B5A6; }
.laced-card.is-open .laced-card__reveal { max-height: 340px; opacity: 1; margin-top: 4px; }
.laced-card__prompt {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(247, 242, 233, 0.72);
  transition: color .25s ease;
}
.laced-card__prompt svg { width: 13px; height: 13px; transition: transform .3s ease; }
.laced-card.is-open .laced-card__prompt svg { transform: rotate(45deg); }
.laced-card.is-open .laced-card__prompt span::after { content: " — close"; }

/* Footnote */
.laced__footnote {
  font-family: var(--serif);
  font-size: 1.05rem; line-height: 1.55;
  color: rgba(247, 242, 233, 0.75);
  max-width: 65ch;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 242, 233, 0.12);
}
.laced__footnote strong { color: rgba(247,242,233,0.9); }
.laced__footnote a { color: #F2B5A6; }
.laced__footnote a:hover { color: var(--paper); }

/* Access panel — naloxone info */
.laced-access {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 40px;
  max-width: 760px;
}
.laced-access__card {
  background: rgba(247, 242, 233, 0.04);
  border: 1px solid rgba(247, 242, 233, 0.12);
  border-radius: 6px;
  padding: 24px;
}
.laced-access__kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #F2B5A6;
  margin-bottom: 8px;
}
.laced-access__card h3,
.laced-access__card h4 {
  font-family: var(--serif);
  font-size: 1.4rem; font-weight: 500;
  margin-bottom: 12px;
  color: var(--paper);
}
.laced-access__card p {
  font-family: var(--sans);
  font-size: 0.95rem; line-height: 1.6;
  color: rgba(247, 242, 233, 0.78);
  margin-bottom: 12px;
}
.laced-access__card p:last-of-type { margin-bottom: 0; }
.laced-access__card strong { color: var(--paper); }
.laced-access__card a {
  color: #F2B5A6;
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 181, 166, 0.4);
  transition: color .2s ease, border-color .2s ease;
}
.laced-access__card a:hover { color: var(--paper); border-color: var(--paper); }
.laced-access__note {
  font-family: var(--sans);
  font-size: 0.85rem; line-height: 1.5;
  color: rgba(247, 242, 233, 0.72);
  margin-top: 14px;
}
@media (max-width: 600px) {
  .laced-card.is-open .laced-card__reveal { max-height: 460px; }
}

/* ============================================
   EMERGING TRENDS
   ============================================ */

.trends {
  padding: clamp(60px, 10vw, 100px) var(--gut);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.trends__inner { max-width: var(--max); margin: 0 auto; }

.trends__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 72px);
  padding-bottom: clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 780px) { .trends__head { grid-template-columns: 1fr; } }

.trends__head-lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  margin-top: 18px;
}
.trends__head-aside {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal-deep);
  padding: 28px 26px;
}
.trends__head-aside p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 10px;
}
.trends__head-aside p:last-child { margin-bottom: 0; }
.trends__head-aside strong { color: var(--charcoal); }

.trend-alert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--alert);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: 28px;
}
.trend-alert::before {
  content: "";
  width: 7px; height: 7px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.trend-article {
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
.trend-article__header {
  background: var(--charcoal);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}
@media (max-width: 600px) { .trend-article__header { grid-template-columns: 1fr; } }

.trend-article__tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust-light);
  display: block;
  margin-bottom: 10px;
}
.trend-article__date {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(247, 242, 233, 0.62);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 16px;
}
.trend-article__title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.trend-article__title em { font-style: italic; color: #F2B5A6; }
.trend-article__subtitle {
  font-family: var(--serif);
  font-size: clamp(16px, 1.8vw, 20px);
  color: rgba(247, 242, 233, 0.7);
  line-height: 1.45;
  max-width: 580px;
}
.trend-article__badge {
  background: var(--alert);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 16px;
  white-space: nowrap;
  align-self: start;
}

.trend-article__body {
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 44px);
}
.trend-article__intro {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 52px);
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.trend-article__intro strong { color: var(--charcoal); }

.trend-section-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 18px;
  display: block;
}
.trend-section-divider {
  margin: clamp(36px, 5vw, 52px) 0 clamp(28px, 4vw, 44px);
  border: none;
  border-top: 1px solid var(--line);
}

.trend-compounds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: clamp(36px, 5vw, 52px);
}
.trend-compound {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal-deep);
  padding: 20px 20px 18px;
}
.trend-compound--dominant { border-top-color: var(--rust); }
.trend-compound--warning  { border-top-color: var(--alert); background: #fdf0ed; }
.trend-compound__name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.trend-compound__freq {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 10px;
}
.trend-compound--dominant .trend-compound__freq { color: var(--rust); }
.trend-compound--warning  .trend-compound__freq { color: var(--alert); }
.trend-compound p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.trend-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  margin-bottom: clamp(36px, 5vw, 52px);
  overflow: hidden;
}
.trend-fact {
  padding: 20px 22px;
  border-right: 1px solid var(--line);
}
.trend-fact:last-child { border-right: none; }
.trend-fact__num {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 500;
  color: var(--rust);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.trend-fact p { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

.trend-dangers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: clamp(36px, 5vw, 52px);
}
.trend-danger {
  padding: 22px 20px;
  background: var(--charcoal);
  color: var(--paper);
  border-left: 4px solid var(--rust);
}
.trend-danger--critical { border-left-color: var(--alert); }
.trend-danger h3,
.trend-danger h4 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.trend-danger p { font-size: 13.5px; line-height: 1.55; color: rgba(247,242,233,0.8); }
.trend-danger p strong { color: #F2B5A6; }
.trend-danger--critical p strong { color: #ffb3a0; }

.trend-callout {
  padding: clamp(24px, 3vw, 36px);
  background: var(--paper-warm);
  border-left: 4px solid var(--teal-deep);
}
.trend-callout h3,
.trend-callout h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 10px;
}
.trend-callout p { font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: 10px; }
.trend-callout p:last-child { margin-bottom: 0; }
.trend-callout a { color: var(--rust); font-weight: 600; }


/* ==========================================================
   SITE STRUCTURE — 29 September 2026
   Home is now a hub; each topic has its own page.
   ========================================================== */

/* ---------- Breadcrumb bar on topic pages ---------- */
.crumbbar {
  max-width: var(--max); margin: 0 auto; width: 100%;
  padding: 18px var(--gut) 0;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
}
.crumbbar ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.crumbbar li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbbar a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.crumbbar a:hover { color: var(--rust); border-color: var(--rust); }
.crumbbar [aria-current] { color: var(--ink); font-weight: 600; }
.crumbwrap { background: var(--paper); }
/* Sections were designed to follow another section; on their own page the
   first one shouldn't start with a hairline. */
main > .crumbwrap + section { border-top: 0; }

/* ---------- Home: landing panel on wide screens ---------- */
.gate__top { display: block; }
.gate__aside { display: none; }
@media (min-width: 1100px) {
  .gate__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
  }
  .gate__aside {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--teal-deep);
    padding: 24px 26px 22px;
    margin-top: 6px;
    font-family: var(--sans);
  }
}
.gate__aside-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rust); margin: 0 0 8px;
}
.gate__aside-phone {
  display: inline-block;
  font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.05;
  color: var(--teal-deep); text-decoration: none; letter-spacing: -0.01em;
}
.gate__aside-phone:hover { color: var(--rust); }
.gate__aside-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink); margin: 8px 0 6px; line-height: 1.4;
}
.gate__aside-alt { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0 0 20px; }
.gate__aside-alt a { color: var(--teal-deep); }
.gate__aside-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gate__aside-list li { border-bottom: 1px solid var(--line); }
.gate__aside-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; font-size: 14.5px; font-weight: 600; color: var(--charcoal); text-decoration: none;
}
.gate__aside-list a::after { content: "→"; color: var(--rust); transition: transform .2s ease; }
.gate__aside-list a:hover { color: var(--rust); }
.gate__aside-list a:hover::after { transform: translateX(3px); }

/* ---------- Helpline open / closed ---------- */
.hours-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #6FCF80; box-shadow: 0 0 0 0 rgba(111,207,128,0.7);
  animation: livepulse 2s infinite;
}
.ltac-closed .hours-dot,
.ltac-closed .gate__live-dot { background: #A39A90; animation: none; box-shadow: none; }
.ltac-closed .nav__cta::before { background: #A39A90; animation: none; box-shadow: none; }
.hours-closed-extra { display: none; }
.ltac-closed .hours-closed-extra { display: inline; }

/* ---------- Home: guided paths after choosing a door ---------- */
.door.is-selected { outline: 3px solid currentColor; outline-offset: -3px; }
.paths { margin-top: clamp(20px, 3vw, 28px); }
.path { display: none; }
.path:target, .path.is-active { display: block; }
.path {
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--path-c, var(--teal-deep));
  padding: clamp(22px, 3.4vw, 36px);
  scroll-margin-top: calc(var(--hdr-h, 70px) + 16px);
}
.path--family { --path-c: #1F4E4E; }
.path--young  { --path-c: #6B5E7E; }
.path--user   { --path-c: #9A4527; }
.path__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.path__kicker {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--path-c); margin: 0 0 6px;
}
.path__title { font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); font-weight: 500; margin: 0; }
.path__lede { font-family: var(--sans); font-size: 15px; color: var(--muted); margin: 8px 0 0; }
.path__switch {
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; padding: 6px 0;
}
.path__switch:hover { color: var(--rust); }
.path__steps { list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.path__steps a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; align-items: start;
  height: 100%; box-sizing: border-box;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--paper); text-decoration: none; color: var(--charcoal);
  transition: border-color .18s ease, background .18s ease;
}
.path__steps a:hover { border-color: var(--path-c); background: #fff; }
.path__steps a::before {
  counter-increment: step; content: counter(step);
  grid-row: span 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--path-c); color: #fff;
  font-family: var(--serif); font-size: 15px; font-weight: 600;
}
.path__steps strong { font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.3; }
.path__steps span { font-family: var(--sans); font-size: 13.5px; color: var(--muted); line-height: 1.45; }

/* ---------- Home: topic hub ---------- */
.topics {
  padding: clamp(60px, 9vw, 100px) var(--gut);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.topics__inner { max-width: var(--max); margin: 0 auto; }
.topics__groups {
  display: grid; gap: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: clamp(28px, 4vw, 44px);
}
.topics__group-title {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rust); margin: 0 0 10px;
  padding-bottom: 10px; border-bottom: 2px solid var(--charcoal);
}
.topics__list { list-style: none; margin: 0; padding: 0; }
.topics__list li { border-bottom: 1px solid var(--line); }
.topic {
  display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 2px 12px; align-items: center;
  padding: 14px 0; text-decoration: none; color: var(--charcoal);
}
.topic strong { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.25; }
.topic span { grid-column: 1; font-family: var(--sans); font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.topic svg { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--rust); transition: transform .2s ease; }
.topic:hover strong { color: var(--rust); }
.topic:hover svg { transform: translateX(3px); }

/* ---------- Topic pages: "next in your path" + "keep reading" ---------- */
.path-next {
  max-width: var(--max); margin: 0 auto; width: 100%; box-sizing: border-box;
  padding: clamp(28px, 4vw, 40px) var(--gut) 0;
}
.path-next__card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  background: var(--charcoal); color: var(--paper);
  padding: 20px 24px; border-radius: 3px; border-left: 4px solid var(--path-c, var(--rust));
  font-family: var(--sans);
}
.path-next__meta { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust-light); margin: 0 0 4px; }
.path-next__label { font-family: var(--serif); font-size: 21px; margin: 0; color: #fff; }
.path-next__go {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); color: var(--charcoal); padding: 12px 18px; border-radius: 3px;
  font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.path-next__go:hover { background: var(--rust-light); color: var(--charcoal); }
.path-next__back { color: var(--paper); font-size: 13px; opacity: 0.8; }
.path-next__back:hover { color: #fff; opacity: 1; }

.related {
  padding: clamp(44px, 6vw, 64px) var(--gut) clamp(52px, 7vw, 76px);
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
}
.related__inner { max-width: var(--max); margin: 0 auto; }
.related__title {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rust); margin: 0 0 16px;
}
.related__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.related__grid a {
  display: block; height: 100%; box-sizing: border-box;
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--teal-deep);
  padding: 18px 20px; text-decoration: none; color: var(--charcoal);
  transition: border-color .18s ease, transform .18s ease;
}
.related__grid a:hover { border-top-color: var(--rust); transform: translateY(-2px); }
.related__grid strong { display: block; font-family: var(--serif); font-size: 19px; font-weight: 500; margin-bottom: 4px; }
.related__grid span { font-family: var(--sans); font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.related__help {
  margin: 22px 0 0; font-family: var(--sans); font-size: 14.5px; color: var(--ink);
}
.related__help a { font-weight: 700; }

/* ---------- Get help: phone channel ---------- */
.channel__hours [data-hours] { display: inline; }
.channel--phone .channel__icon { background: var(--teal-deep); }

/* ---------- Alert strip: "updated" date ---------- */
.alertstrip__date {
  flex-shrink: 0; font-size: 12px; opacity: 0.85; white-space: nowrap;
}
@media (max-width: 1180px) { .alertstrip__date { display: none; } }
.alertstrip__panel-date { font-size: 12.5px; opacity: 0.85; margin: 10px 0 0; }

/* Search results that live on another page */
.sr-page { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust); margin-bottom: 2px; }
.site-search__loading { padding: 14px 4px; color: var(--muted); font-size: 14px; }

@media print {
  .path-next, .related, .crumbbar, .gate__aside { display: none !important; }
}

/* Search shortcuts are real links now (they go to another page) */
.site-search__results a {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; text-decoration: none; color: inherit;
  padding: 14px 18px; box-sizing: border-box;
}
.site-search__results a:hover, .site-search__results a:focus-visible { background: var(--paper-warm); }

/* Section titles are the page's <h1> on topic pages; carry over the
   rules that targeted them as h2. */
.signs h1, .harm h1 { color: #fff; }
h1[id] { scroll-margin-top: 100px; }