/*
  strategy.css
  Presentation for the LLBS Living Well Together Strategy page (index.html).

  Palette extracted from the strategy PDF:
    #145f81  — primary teal-blue (main brand colour)
    #042433  — dark navy
    #0556A8  — bright blue accent (footer rule, highlights)
    #4EA72E  — green (positive/strength)
    #E7EAED  — very light grey (alternate row / card bg)
    #CCD2D8  — mid grey (borders, inactive)
    Tints of primary: P80=#44809B P86=#367694 P92=#286D8C P98=#1A6384
    Value card tints (P36–P64): P36=#ABC6D2 P46=#93B6C6 P56=#7CA6B9 P64=#6999AF
*/

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Custom properties ── */
:root {
  --primary: #145f81;
  --primary-dark: #042433;
  --accent: #0556a8;
  --green: #4ea72e;
  --mid-grey: #ccd2d8;
  --light-bg: #e7eaed;
  --lighter-bg: #f3f5f6;
  --white: #fff;
  --text: #1a1a1a;
  --text-muted: #485366;

  /* Timeline tints (P80–P98 of #145f81) */
  --t80: #44809b;
  --t86: #367694;
  --t92: #286d8c;
  --t98: #1a6384;

  /* Value card tints (P36–P64) */
  --p36: #abc6d2;
  --p46: #93b6c6;
  --p56: #7ca6b9;
  --p64: #6999af;
}

/* ── Base ── */
body {
  font-family: 'DM Sans', Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  font-size: 1rem;
}

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--accent);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  z-index: 9999;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ── Focus ── */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ── Header — matches llbs.co.uk style: white bar, DM Sans, dark links ── */
.site-header {
  background: var(--white);
  color: var(--text);
  padding: 0.875rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.1);
}

.site-header__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-header__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.site-header__logo-img {
  height: 44px;
  width: auto;
  display: block;
}

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid rgb(0 0 0 / 0.25);
  color: var(--text);
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  font-size: 0.9375rem;
  border-radius: 3px;
  font-family: inherit;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding: 0;
}

.site-nav a {
  display: block;
  color: var(--text);
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  border-radius: 3px;
  font-size: 0.9375rem;
  transition: background 0.15s, color 0.15s;
}

.site-nav a:hover,
.site-nav a:focus {
  background: rgb(21 96 130 / 0.08);
  color: var(--primary);
}

@media (width <= 820px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    width: 100%;
    display: none;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    margin-top: 0.4rem;
  }

  .site-nav a {
    padding: 0.5rem 0.6rem;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .site-nav a,
  .hero__cta,
  .cta-contact a,
  .tab-button {
    transition: none;
  }
}

/* ── Layout ── */
section {
  padding: 3rem 2rem;
}

/* .vmv-card is excluded so the alternating lighter-bg never overrides the explicit
   dark backgrounds on the vision and mission cards. Without this, .vmv-card--dark
   (.vmv-card:nth-of-type(even) inside #vision) was matched and its dark background
   clobbered with --lighter-bg, making white text and the --p46 label invisible. */
section:nth-of-type(even):not(.cta-section, .vmv-card) {
  background: var(--lighter-bg);
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

.section-heading {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  color: var(--primary-dark);
  margin-bottom: 0.625rem;
  font-weight: bold;
}

.section-intro {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 820px;
  margin-bottom: 1.75rem;
  line-height: 1.65;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

@media (width <= 680px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* ── Two-col inline headings ── */
.two-col-heading {
  color: var(--primary-dark);
  margin-bottom: 0.625rem;
}

.two-col-heading--top {
  margin-top: 1.25rem;
  margin-bottom: 0.625rem;
}

/* ── Hero ── */
.hero {
  background: var(--primary-dark);
  color: var(--white);
  padding: 5rem 2rem 4rem;
  text-align: center;
  position: relative;
}

.hero::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--accent);
}

.hero__eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mid-grey);
  margin-bottom: 1rem;
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  color: var(--white);
  margin-bottom: 0.4rem;
  font-weight: bold;
}

.hero__subtitle {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: normal;
  color: var(--p56);
  margin-bottom: 2rem;
}

.hero__cta {
  display: inline-block;

  /* #145f81 on white = 7.0:1 (AAA). Previous var(--primary) #156082 = 6.94:1.
     --primary is unchanged (approved exception ACC-LLBS-001 covers #156082 on white). */
  background: #145f81;
  color: var(--white);
  padding: 0.875rem 2.25rem;
  text-decoration: none;
  font-weight: bold;
  border-radius: 3px;
  font-size: 1rem;
  border: 2px solid var(--accent);
  transition: background 0.2s;
}

.hero__cta:hover,
.hero__cta:focus {
  background: var(--accent);
}

/* ── Stats ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--mid-grey);
  border-top: 4px solid var(--primary);
  padding: 1.5rem;
  text-align: center;
}

.stat-card__number {
  font-size: 2.25rem;
  font-weight: bold;
  color: var(--primary);
  display: block;
}

.stat-card__label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* ── Blockquote ── */
blockquote {
  border-left: 4px solid var(--primary);
  padding: 0.875rem 1.25rem;
  margin: 1.25rem 0;
  background: var(--light-bg);
  font-style: italic;
}

blockquote footer {
  font-style: normal;

  /* #424d60 on --light-bg (#e7eaed) = 7.11:1 (AAA). Override --text-muted which
     reaches only ~6.7:1 on this background after the root value update.
     background: transparent overrides the global footer{background:#02131d} rule
     which otherwise leaks into blockquote > footer elements. */
  color: #424d60;
  background: transparent;
  font-size: 0.875rem;
  margin-top: 0.35rem;
}

/* ── SWOT ── */
.swot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--mid-grey);
}

@media (width <= 640px) {
  .swot-grid {
    grid-template-columns: 1fr;
  }
}

.swot-quadrant {
  padding: 1.5rem;
  border: 1px solid var(--mid-grey);
}

.swot-quadrant--s {
  background: #ebf5e9;
}

.swot-quadrant--w {
  background: #fef9e7;
}

.swot-quadrant--o {
  background: #ebf1fa;
}

.swot-quadrant--t {
  background: #fdeeee;
}

.swot-quadrant h3 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  font-weight: bold;
}

.swot-quadrant--s h3 {
  /* #1e5e0e on #ebf5e9 ≥ 7:1 (AAA). Previous #2a6a1a was 5.91:1. */
  color: #1e5e0e;
}

.swot-quadrant--w h3 {
  color: #7a4800;
}

.swot-quadrant--o h3 {
  /* #0b5678 on #ebf1fa ≥ 7:1 (AAA). Previous var(--primary) #156082 was 6.11:1. */
  color: #0b5678;
}

.swot-quadrant--t h3 {
  color: #a01010;
}

.swot-quadrant ul {
  list-style: none;
  padding: 0;
}

.swot-quadrant li {
  padding: 0.2rem 0 0.2rem 1.1rem;
  font-size: 0.9375rem;
  position: relative;
}

.swot-quadrant li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  font-weight: bold;
}

.swot-quadrant--s li::before {
  color: #4ea72e;
}

.swot-quadrant--w li::before {
  color: #b06000;
}

.swot-quadrant--o li::before {
  color: var(--primary);
}

.swot-quadrant--t li::before {
  color: #a01010;
}

/* ── Vision / Mission ── */
.vmv-card {
  background: var(--primary);
  color: var(--white);
  padding: 1.75rem;
  margin-bottom: 1rem;
  position: relative;
}

.vmv-card--dark {
  background: var(--primary-dark);
}

/* Vision card: darker bg (#00293c) so --p46 label (#93b6c6) reaches 7.16:1 (AAA).
   Mission card (.vmv-card--dark, bg #042433) is not flagged — leave unchanged. */
.vmv-card:not(.vmv-card--dark) {
  background: #00293c;
}

.vmv-card__label {
  font-size: 0.6875rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--p46);
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.vmv-card__text {
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* ── Values section heading ── */
.values-heading {
  color: var(--primary-dark);
  margin-top: 0.5rem;
  margin-bottom: 0.875rem;
}

/* ── Values ── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  border: 1px solid var(--mid-grey);
  margin-top: 1.25rem;
}

.value-card {
  padding: 1.25rem;
  border: 1px solid var(--mid-grey);
  background: var(--white);
  border-top: 4px solid var(--primary);
}

.value-card:nth-child(2) {
  border-top-color: var(--t80);
}

.value-card:nth-child(3) {
  border-top-color: var(--t86);
}

.value-card:nth-child(4) {
  border-top-color: var(--t92);
}

.value-card:nth-child(5) {
  border-top-color: var(--t98);
}

/* Requirements says value-card headings use h4, not h3 */
.value-card h4 {
  color: var(--primary-dark);
  font-size: 0.9375rem;
  margin-bottom: 0.4rem;
  font-weight: bold;
}

.value-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ── Strategy table ── */
.themes-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
}

.themes-table th {
  background: var(--primary-dark);
  color: var(--white);
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: bold;
}

.themes-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--mid-grey);
  border-right: 1px solid var(--mid-grey);
  vertical-align: top;
}

.themes-table tr:nth-child(even) td {
  background: var(--light-bg);
}

/* ── Theme label pills ── */
.theme-label {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: bold;
  color: var(--white);

  /* #145f81 on white = 7.0:1 (AAA). Previous var(--primary) #156082 = 6.94:1. */
  background: #145f81;
  white-space: nowrap;
}

.theme-label--t80 {
  /* #235f7a on white = 7.0:1 (AAA). Previous var(--t80) #44809b = 4.39:1. */
  background: #235f7a;
}

.theme-label--t86 {
  /* #1f5f7d on white = 7.0:1 (AAA). Previous var(--t86) #367694 = 5.05:1. */
  background: #1f5f7d;
}

.theme-label--t92 {
  /* #145f81 on white = 7.0:1 (AAA). Previous var(--t92) #286d8c = 5.8:1. */
  background: #145f81;
}


/* ── Timeline ── */
.timeline-heading {
  color: var(--primary-dark);
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

.timeline-intro {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.timeline-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
}

.timeline-table th {
  /* #145f81 on white = 7.0:1 (AAA). Previous var(--primary) #156082 = 6.94:1. */
  background: #145f81;
  color: var(--white);
  padding: 0.625rem 0.75rem;
  text-align: center;
}

.timeline-table th:first-child {
  text-align: left;
}

.timeline-table td {
  padding: 0;
  border-top: 1px solid var(--mid-grey);
  border-bottom: 1px solid var(--mid-grey);
  border-left: none;
  border-right: none;
  text-align: center;
  vertical-align: middle;
}

.timeline-table td:first-child {
  text-align: left;
  padding: 0.625rem 0.75rem 0.625rem 0.875rem;
  font-weight: bold;
  border: 1px solid var(--mid-grey);
}

.timeline-table td:last-child {
  border-right: 1px solid var(--mid-grey);
}

.timeline-bar {
  display: block;
  height: 24px;
  background: var(--primary);
}

.timeline-bar--t80 {
  background: var(--t80);
}

.timeline-bar--t86 {
  background: var(--t86);
}

.timeline-bar--t92 {
  background: var(--t92);
}

.timeline-bar--t98 {
  background: var(--t98);
}

/* Half-year bars */
.timeline-bar--half-left {
  width: 50%;
}

.timeline-bar--half-right {
  width: 50%;
  margin-left: 50%;
}

/* ── Tabs ── */
.tabs {
  margin-top: 1.5rem;
}

.tab-list {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 3px solid var(--mid-grey);
  list-style: none;
  padding: 0;
}

.tab-button {
  padding: 0.65rem 1.1rem;
  border: 1px solid transparent;
  border-bottom: none;
  background: var(--light-bg);
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--primary-dark);
  margin-bottom: -3px;
  font-weight: normal;
  transition: background 0.15s;
}

.tab-button:hover {
  background: var(--mid-grey);
}

.tab-button[aria-selected='true'] {
  background: var(--white);
  font-weight: bold;
  border-color: var(--mid-grey);

  /* #145f81 on white = 7.0:1 (AAA). Previous var(--primary) #156082 = 6.94:1. */
  color: #145f81;
  border-bottom: 3px solid var(--accent);
}

.tab-panel {
  padding: 2rem;
  border: 1px solid var(--mid-grey);
  border-top: none;
  background: var(--white);
}

.tab-panel[hidden] {
  display: none;
}

.theme-outcome-box {
  border-left: 4px solid var(--primary);
  background: var(--light-bg);
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.25rem;
}

.theme-outcome-box__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;

  /* #424d60 on --light-bg (#e7eaed) = 7.11:1 (AAA). --text-muted (#485366) only
     reaches ~6.7:1 on this background; a direct override is required. */
  color: #424d60;
  margin-bottom: 0.2rem;
  font-weight: bold;
}

.theme-outcome-box__text {
  font-weight: bold;
  font-size: 1rem;
  color: var(--primary-dark);
}

/* Theme-specific outcome box accent colours */
.theme-outcome-box--t80 {
  border-left-color: var(--t80);
}

.theme-outcome-box--t86 {
  border-left-color: var(--t86);
}

.theme-outcome-box--t92 {
  border-left-color: var(--t92);
}

.routes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.route-box {
  background: var(--lighter-bg);
  border: 1px solid var(--mid-grey);
  border-top: 3px solid var(--primary);
  padding: 1.25rem;
}

/* Theme-specific route-box accent colours */
.route-box--t80 {
  border-top-color: var(--t80);
}

.route-box--t86 {
  border-top-color: var(--t86);
}

.route-box--t92 {
  border-top-color: var(--t92);
}

.route-box h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;

  /* #000e15 on --lighter-bg (#f3f5f6) = 19.2:1 (AAA). Previous var(--primary)
     #156082 on #f3f5f6 was below 7:1. Selector changed from h4 to h3 to fix
     G141 heading-level skip inside tab panels (h2 section → h3 in panel). */
  color: #000e15;
  margin-bottom: 0.625rem;
  font-weight: bold;
}

.route-box ul {
  list-style: none;
  padding: 0;
}

.route-box li {
  padding: 0.2rem 0 0.2rem 1rem;
  font-size: 0.9375rem;
  position: relative;
}

.route-box li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--primary);
}

/* ── Income ── */
.income-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.income-card {
  background: var(--primary-dark);
  color: var(--white);
  padding: 1.75rem;
  text-align: center;
  border-bottom: 4px solid var(--accent);
}

.income-card--mid {
  /* #00496b: white label ≥ 7:1 (AAA), +4% number (#93b6c6) targets ≥ 4.5:1 (G18
     large text). Previous var(--primary) #156082 gave white label 6.94:1. */
  background: #00496b;
}

.income-card--teal {
  /* #094967: white label ≥ 7:1 (AAA), ~13% number (#93b6c6) targets ≥ 4.5:1 (G18
     large text). Previous var(--t86) #367694 gave white label 5.05:1. */
  background: #094967;
}

.income-card__number {
  font-size: 2.75rem;
  font-weight: bold;
  color: var(--p46);
  display: block;
}

.income-card__label {
  font-size: 0.9375rem;
}

/* ── JHWS table ── */
.jhws-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.jhws-table th {
  background: var(--primary-dark);
  color: var(--white);
  padding: 0.875rem 1rem;
  text-align: left;
}

.jhws-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--mid-grey);
  border-right: 1px solid var(--mid-grey);
  vertical-align: top;
}

.jhws-table tr:nth-child(even) td {
  background: var(--light-bg);
}

/* ── Investment box (health section) ── */
.investment-box {
  background: var(--primary-dark);
  color: var(--white);
  padding: 1.75rem;
  border-top: 4px solid var(--accent);
}

.investment-box h3 {
  color: var(--white);
  margin-bottom: 1rem;
  font-size: 1rem;
}

.investment-list {
  list-style: none;
  padding: 0;
}

.investment-list li {
  padding: 0.4rem 0 0.4rem 1.4rem;
  position: relative;
}

.investment-list__tick {
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: bold;
}

/* ── CTA section ── */
.cta-section {
  background: var(--primary-dark);
  color: var(--white);
  position: relative;
}

.cta-section::before {
  content: '';
  display: block;
  height: 5px;
  background: var(--accent);
}

.cta-section__inner {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.cta-heading {
  color: var(--white);
}

.cta-intro {
  max-width: 740px;
  margin: 0 auto 1rem;
  font-size: 1rem;
  color: var(--white);
  line-height: 1.65;
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1.75rem 0;
  text-align: left;
}

@media (width <= 680px) {
  .cta-grid {
    grid-template-columns: 1fr;
  }
}

.cta-grid-heading {
  color: var(--white);
  margin-bottom: 0.625rem;
  font-size: 1rem;
}

.cta-grid ul {
  list-style: none;
  padding: 0;
}

.cta-grid li {
  padding: 0.35rem 0 0.35rem 1.4rem;
  position: relative;
  font-size: 0.9375rem;
}

.cta-grid li::before {
  content: '\2714';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: bold;
}

.cta-close {
  color: var(--white);
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
}

.cta-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  justify-content: center;
}

.cta-contact a {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  text-decoration: none;
  padding: 0.875rem 2rem;
  font-weight: bold;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}

.cta-contact a:hover,
.cta-contact a:focus {
  background: transparent;
  border-color: var(--white);
}

/* ── Footer ── */
footer {
  background: #02131d;
  color: var(--mid-grey);
  padding: 1.75rem 2rem;
  text-align: center;
  font-size: 0.875rem;
  border-top: 5px solid var(--accent);
}

footer a {
  color: var(--p46);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

.footer-contact {
  margin-top: 0.5rem;
}

/* ── Utility ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.inset-box {
  background: var(--light-bg);
  border-left: 4px solid var(--primary);
  padding: 1.25rem;
  margin-top: 1rem;
}

.inset-box h4 {
  color: var(--primary-dark);
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

.overflow-x-auto {
  overflow-x: auto;
}

/* Spacing utilities used in place of inline style attributes */
.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-15 {
  margin-top: 1.5rem;
}

.mt-875 {
  margin-top: 0.875rem;
}

.align-start {
  align-items: start;
}

/* ── No-JS fallback ── */
.no-js-notice {
  background: var(--light-bg);
  border-left: 4px solid var(--accent);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: 0.9375rem;
}