/* Svasth design system — generated bundle. Edit the partials in src/assets/css/, not this file. */
/* ============================================================
   01 — DESIGN TOKENS
   BRAND PRESERVATION: every colour below is carried over verbatim
   from the legacy css/style.css :root block. No hue, saturation or
   lightness has been altered. New tokens are additive only
   (spacing, motion, z-index, semantic state colours).
   ============================================================ */

:root {
  /* ---------- BRAND COLOUR — UNCHANGED FROM LEGACY ---------- */
  --primary: #c59a6d;
  --primary-dark: #a67c52;
  --primary-light: #e0bfa0;
  --secondary: #1e2429;
  --secondary-light: #2c333a;
  --dark: #1e2429;
  --light: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-800: #343a40;
  --text-main: #2c3e50;
  --text-light: #ffffff;
  --text-muted: #6c757d;

  /* Secondary brand tints found in legacy stylesheet, preserved */
  --primary-hover: #d1aa7f;
  --primary-active: #b38a5d;
  --text-slate: #34495e;
  --text-grey: #7f8c8d;

  /* ---------- SEMANTIC ALIASES ----------
     These are the ONLY colour tokens that change between themes. The
     brand values above never flip: #c59a6d is #c59a6d in both modes.
     Components must consume these, never the raw brand values, or they
     will not theme. */
  --color-accent: var(--primary);
  --color-accent-strong: var(--primary-dark);

  /* surfaces, back to front */
  --color-surface: #ffffff;
  --color-surface-sunken: #f8f9fa;
  --color-surface-raised: #ffffff;
  --color-border: #dee2e6;
  --color-border-strong: #cdd3d8;

  /* text */
  --color-heading: #1e2429;
  --color-text: #2c3e50;
  --color-text-muted: #6c757d;
  --color-text-inverse: #ffffff;

  /* One shared ground for the feature-card family (calculators,
     expertise, recipes, blog cards, tool panels). Defined once here so
     the whole family stays in step and future changes land everywhere. */
  --surface-feature: linear-gradient(
    168deg,
    color-mix(in srgb, var(--primary) 6%, var(--color-surface-raised)) 0%,
    var(--color-surface-raised) 62%
  );

  /* a tinted ground used by page chrome */
  --color-tint: color-mix(in srgb, var(--primary) 4%, var(--gray-100));
  --color-tint-soft: color-mix(in srgb, var(--primary) 1.5%, var(--color-surface));

  /* elevation on dark needs lightening rather than shadow */
  --elevate: none;
  color-scheme: light;

  /* ---------- STATE COLOURS (new — deliberately NOT brand gold,
       so status never competes with the accent) ---------- */
  --color-success: #2f6b4f;
  --color-success-bg: #e6f2ec;
  --color-warning: #8a6d1f;
  --color-warning-bg: #fbf3dc;
  --color-danger: #a3352a;
  --color-danger-bg: #f9e7e5;
  --color-info: #2f5d6b;
  --color-info-bg: #e4f0f3;

  /* ---------- TYPOGRAPHY — families unchanged ---------- */
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Lato", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Modular type scale (1.200 minor third), fluid at the top end */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.5rem);
  --text-3xl: clamp(1.625rem, 1.4rem + 1.1vw, 1.875rem);
  --text-4xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.5rem);
  --text-5xl: clamp(2.25rem, 1.6rem + 3vw, 3.25rem);

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.1em;

  --measure: 65ch; /* optimal reading width */

  /* ---------- SPACING — legacy scale kept, finer steps added ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem; /* legacy --spacing-xs */
  --space-xs: 0.75rem;
  --space-sm: 1rem; /* legacy --spacing-sm */
  --space-md: 1.5rem;
  --space-lg: 2rem; /* legacy --spacing-md */
  --space-xl: 3rem;
  --space-2xl: 4rem; /* legacy --spacing-lg */
  --space-3xl: 6rem; /* legacy --spacing-xl */

  /* Legacy aliases retained so nothing referencing them breaks */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Section rhythm */
  --section-padding-y: clamp(3rem, 7vw, 6rem);
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* ---------- RADIUS — legacy values kept ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 50px;
  --radius-circle: 50%;

  /* ---------- SHADOW — legacy values kept ---------- */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 20px rgba(197, 154, 109, 0.3);

  /* ---------- MOTION (new — replaces ad hoc per-page timings) ---------- */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --transition: all var(--duration-base) var(--ease-out);

  /* ---------- Z-INDEX SCALE (new — replaces stray z-index:10000) ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* Brand emblem, for use as a subtle surface watermark */
  --brand-mark: url("/assets/brand/logo-mark.svg");

  /* ---------- FOCUS ---------- */
  --focus-ring: 2px solid var(--primary-dark);
  --focus-offset: 3px;

  /* ---------- CONTROL SIZING (a11y touch targets) ---------- */
  --control-height: 2.75rem; /* 44px */
  --control-height-sm: 2.25rem;
  --control-pad-x: 1rem;
}

/* Breakpoint reference (media queries can't read custom properties;
   these exist as documentation and for JS to read if needed):
     --bp-sm: 360px | --bp-md: 600px | --bp-lg: 900px | --bp-xl: 1280px */

/* ============================================================
   THEME — DARK
   Not an inversion. Surfaces are a warm charcoal that carries a trace of
   the brand gold, so the palette still reads as Svasth rather than
   generic dark-mode grey. Type is a warm off-white, never pure #fff, to
   cut halation on large areas. Brand colours are untouched: the gold sits
   on these grounds at 6.9:1, comfortably over AA.

   Structure: the media query is the system default, and the two
   data-theme selectors override it in BOTH directions so the toggle
   always wins.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface: #15191c;
    --surface-feature: linear-gradient(
      168deg,
      color-mix(in srgb, var(--primary) 11%, var(--color-surface-raised)) 0%,
      var(--color-surface-raised) 62%
    );
    --color-surface-sunken: #101315;
    --color-surface-raised: #1c2226;
    --color-border: #2b3338;
    --color-border-strong: #3a444a;

    --color-heading: #f2efe9;
    --color-text: #ddd8d0;
    --color-text-muted: #a29c94;
    --color-text-inverse: #15191c;

    --color-tint: color-mix(in srgb, var(--primary) 8%, #1c2226);
    --color-tint-soft: color-mix(in srgb, var(--primary) 3%, #15191c);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --elevate: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-surface: #15191c;
  --surface-feature: linear-gradient(
    168deg,
    color-mix(in srgb, var(--primary) 11%, var(--color-surface-raised)) 0%,
    var(--color-surface-raised) 62%
  );
  --color-surface-sunken: #101315;
  --color-surface-raised: #1c2226;
  --color-border: #2b3338;
  --color-border-strong: #3a444a;

  --color-heading: #f2efe9;
  --color-text: #ddd8d0;
  --color-text-muted: #a29c94;
  --color-text-inverse: #15191c;

  --color-tint: color-mix(in srgb, var(--primary) 8%, #1c2226);
  --color-tint-soft: color-mix(in srgb, var(--primary) 3%, #15191c);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --elevate: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --color-surface: #ffffff;
  --surface-feature: linear-gradient(
    168deg,
    color-mix(in srgb, var(--primary) 6%, var(--color-surface-raised)) 0%,
    var(--color-surface-raised) 62%
  );
  --color-surface-sunken: #f8f9fa;
  --color-surface-raised: #ffffff;
  --color-border: #dee2e6;
  --color-border-strong: #cdd3d8;

  --color-heading: #1e2429;
  --color-text: #2c3e50;
  --color-text-muted: #6c757d;
  --color-text-inverse: #ffffff;

  --color-tint: color-mix(in srgb, var(--primary) 4%, var(--gray-100));
  --color-tint-soft: color-mix(in srgb, var(--primary) 1.5%, #ffffff);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --elevate: none;

  color-scheme: light;
}

/* State colours need their own dark values: the light tints are far too
   bright to sit on a charcoal ground. Foregrounds are lifted so each
   still clears AA against its own background. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-success: #7fc9a3;
    --color-success-bg: #16281f;
    --color-warning: #e0bd6a;
    --color-warning-bg: #2a2312;
    --color-danger: #f0968a;
    --color-danger-bg: #2e1a17;
    --color-info: #7fbcce;
    --color-info-bg: #14262c;
  }
}
:root[data-theme="dark"] {
  --color-success: #7fc9a3;
  --color-success-bg: #16281f;
  --color-warning: #e0bd6a;
  --color-warning-bg: #2a2312;
  --color-danger: #f0968a;
  --color-danger-bg: #2e1a17;
  --color-info: #7fbcce;
  --color-info-bg: #14262c;
}
:root[data-theme="light"] {
  --color-success: #2f6b4f;
  --color-success-bg: #e6f2ec;
  --color-warning: #8a6d1f;
  --color-warning-bg: #fbf3dc;
  --color-danger: #a3352a;
  --color-danger-bg: #f9e7e5;
  --color-info: #2f5d6b;
  --color-info-bg: #e4f0f3;
}

/* ============================================================
   02 — RESET & BASE ELEMENTS
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Scroll lock applied when the mobile drawer or a modal is open */
body.is-scroll-locked {
  overflow: hidden;
}

/* ---------- Headings ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-5xl);
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
}
h3 {
  font-size: var(--text-2xl);
}
h4 {
  font-size: var(--text-xl);
}
h5 {
  font-size: var(--text-lg);
}
h6 {
  font-size: var(--text-base);
}

p {
  max-width: var(--measure);
}

/* Vertical rhythm via owl selector — avoids margin-collapse surprises */
.prose > * + * {
  margin-top: var(--space-sm);
}
.prose > * + :is(h2, h3, h4) {
  margin-top: var(--space-lg);
}
.prose :is(ul, ol) {
  padding-left: 1.25rem;
}
.prose li + li {
  margin-top: var(--space-3xs);
}
.prose img {
  border-radius: var(--radius-md);
}

/* ---------- Links ---------- */
a {
  color: var(--primary-dark);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
  transition:
    color var(--duration-fast) var(--ease-out),
    text-decoration-color var(--duration-fast) var(--ease-out);
}
a:hover {
  color: var(--primary);
}

/* ---------- Media ---------- */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- Forms inherit type ---------- */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ---------- Tables ---------- */
table {
  border-collapse: collapse;
  width: 100%;
}

/* ---------- Accessibility primitives ---------- */

/* Single, consistent focus ring for every interactive element */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Visually hidden but available to assistive tech */
.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;
}

/* Skip link — first focusable element on every page */
.skip-link {
  position: absolute;
  top: 0;
  left: var(--space-sm);
  z-index: var(--z-toast);
  transform: translateY(-150%);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--secondary);
  color: var(--text-light);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--text-light);
}

/* Numerals that line up in columns */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .site-header,
  .site-footer,
  .no-print {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
}

/* ============================================================
   03 — LAYOUT PRIMITIVES
   One grid system (CSS Grid + flex). Replaces the two competing
   grids in the legacy code (Bootstrap's .col-md-* and the bespoke
   flex grid in recipes.html).
   ============================================================ */

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow {
  max-width: var(--container-narrow);
}
.container--wide {
  max-width: 1400px;
}

/* ---------- Section ---------- */
.section {
  padding-block: var(--section-padding-y);
}
.section--tight {
  padding-block: clamp(2rem, 4vw, 3rem);
}
.section--sunken {
  background-color: var(--color-surface-sunken);
}
.section--dark {
  background-color: var(--color-heading);
  color: var(--text-light);
}
.section--dark :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-light);
}

/* Section header block */
.section-header {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  text-align: center;
}
.section-header > * + * {
  margin-top: var(--space-2xs);
}
.section-title {
  font-size: var(--text-4xl);
}
.section-subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: none;
}

/* Eyebrow label above a title */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--primary-dark);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
}
.section-header .eyebrow::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
}

/* ---------- Auto-fit grid (the one grid) ---------- */
.grid {
  display: grid;
  gap: var(--space-lg);
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
/* Fixed two-column split that collapses at a known breakpoint */
.grid--split {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .grid--split {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .grid--split-sticky {
    align-items: start;
  }
}

/* ---------- Cluster / stack helpers ---------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.cluster--center {
  justify-content: center;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.stack--lg {
  gap: var(--space-lg);
}

/* ---------- Utility ---------- */
.text-center {
  text-align: center;
}
.mx-auto {
  margin-inline: auto;
}
.flow-narrow {
  max-width: var(--measure);
  margin-inline: auto;
}

/* Wide content never scrolls the page body sideways */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   04 — COMPONENTS
   One canonical implementation per component. Replaces the five
   overlapping card variants and three form idioms in the legacy
   stylesheet.
   ============================================================ */

/* ==================== SITE HEADER / NAV ==================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 4.5rem;
  padding-block: var(--space-2xs);
}

/* --- Brand lockup ---
   Sizes are driven by two custom properties so the emblem and wordmark
   scale together and stay in proportion at every breakpoint. The wordmark
   is optically smaller than the emblem: its script has long ascenders and
   descenders, so matching cap heights would make it read far too large. */
.site-header__brand {
  /* Bumped ~13% (3 → 3.4rem, 2 → 2.25rem) so both read clearly at a
     glance. The header's min-height is 4.5rem, so this still fits inside
     the existing band — measured height is unchanged. */
  --mark-size: 3.4rem;
  --wordmark-size: 2.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  text-decoration: none;
  /* keeps the lockup from being squeezed by a long nav */
  min-width: 0;
}
.site-header__mark,
.site-header__wordmark {
  width: auto;
  transition: height var(--duration-base) var(--ease-out);
}
.site-header__mark {
  height: var(--mark-size);
}
.site-header__wordmark {
  height: var(--wordmark-size);
  /* nudges the script onto the emblem's optical centre line */
  margin-top: 0.15em;
}
.site-header[data-scrolled="true"] .site-header__brand {
  --mark-size: 2.7rem;
  --wordmark-size: 1.8rem;
}

/* The emblem already contains the "Svasth by Soumya" script, so below the
   nav breakpoint the standalone wordmark is redundant — drop it and let
   the emblem carry the identity. */
@media (max-width: 599px) {
  .site-header__brand {
    --mark-size: 2.9rem;
  }
  .site-header__wordmark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__mark,
  .site-header__wordmark {
    transition: none;
  }
}

/* --- Desktop nav --- */
.nav {
  display: none;
}
@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
  }
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--control-height);
  padding-inline: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-xs);
  right: var(--space-xs);
  bottom: 0.55rem;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}
.nav__link:hover {
  color: var(--primary-dark);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav__link[aria-current="page"] {
  color: var(--primary-dark);
  font-weight: var(--weight-semibold);
}

/* --- Hamburger toggle --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-heading);
}
@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-out);
}
.nav-toggle__bars {
  position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}
.nav-toggle__bars::before {
  top: -6px;
}
.nav-toggle__bars::after {
  top: 6px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Mobile drawer --- */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  padding: 5.5rem var(--container-pad) var(--space-lg);
  background: var(--color-surface-raised);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--duration-slow) var(--ease-out),
    visibility var(--duration-slow);
}
.nav-drawer[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
}
/* `display:flex` above out-specifies the UA's `[hidden] { display:none }`,
   which left the off-screen drawer in the layout and inflated the document
   scroll width on every page. Restore the attribute's meaning explicitly. */
.nav-drawer[hidden] {
  display: none;
}
@media (min-width: 900px) {
  .nav-drawer {
    display: none;
  }
}
.nav-drawer__link {
  display: block;
  padding: var(--space-xs) var(--space-2xs);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.nav-drawer__link[aria-current="page"] {
  color: var(--primary-dark);
}
.nav-drawer__group-title {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--control-height);
  padding: 0 var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background-color: var(--primary);
  color: var(--text-light);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) {
  background-color: var(--primary-hover);
  color: var(--text-light);
  box-shadow: var(--shadow-md);
}
.btn--primary:active:not(:disabled) {
  background-color: var(--primary-active);
}

.btn--secondary {
  background-color: transparent;
  color: var(--primary-dark);
  border-color: var(--primary);
}
.btn--secondary:hover:not(:disabled) {
  background-color: var(--primary);
  color: var(--text-light);
}

.btn--tertiary {
  min-height: 2.25rem;
  padding: var(--space-3xs) 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--primary-dark);
  border: none;
}
.btn--tertiary:hover:not(:disabled) {
  color: var(--primary);
  transform: none;
}
.btn--tertiary::after {
  content: "→";
  transition: transform var(--duration-fast) var(--ease-out);
}
.btn--tertiary:hover::after {
  transform: translateX(3px);
}

/* On dark backgrounds */
.btn--on-dark {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--text-light);
}
.btn--on-dark:hover:not(:disabled) {
  background-color: var(--text-light);
  color: var(--color-heading);
}

.btn--sm {
  min-height: var(--control-height-sm);
  padding-inline: var(--space-sm);
  font-size: var(--text-xs);
}
.btn--block {
  width: 100%;
}
.btn--icon {
  width: var(--control-height);
  padding: 0;
  border-radius: var(--radius-circle);
}

/* Loading state — label hidden, spinner shown */
.btn[data-loading="true"] {
  pointer-events: none;
  position: relative;
  color: transparent;
}
.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--text-light);
  animation: spin 0.7s linear infinite;
}
.btn--secondary[data-loading="true"]::after {
  color: var(--primary-dark);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==================== CARD ==================== */
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  flex: 1;
}
.card__title {
  font-size: var(--text-xl);
}
.card__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  flex: 1;
}
.card__media {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  background: var(--color-surface-sunken);
}
.card__footer {
  margin-top: var(--space-2xs);
}

/* Interactive variant — whole card is a hit target */
.card--interactive:hover,
.card--interactive:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}
.card--interactive .card__title a {
  color: inherit;
  text-decoration: none;
}
.card--interactive .card__title a::before {
  content: "";
  position: absolute;
  inset: 0;
}
.card--interactive {
  position: relative;
}

/* Icon variant */
.card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-2xs);
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-dark);
  font-size: 1.5rem;
}

/* Stat variant */
.card--stat {
  text-align: center;
  padding: var(--space-md);
}
.card--stat .stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}
.card--stat .stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==================== FORM SYSTEM ==================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.field + .field {
  margin-top: var(--space-md);
}
.field__label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}
.field__label .required {
  color: var(--color-danger);
  margin-left: 2px;
}
.field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.field__error {
  display: none;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-danger);
}
.field[data-invalid="true"] .field__error {
  display: flex;
}

/* Control base — shared by input, select, textarea */
.control {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--control-pad-x);
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.control::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}
.control:hover:not(:disabled) {
  border-color: var(--primary-light);
}
.control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.control:disabled {
  background: var(--color-surface-sunken);
  cursor: not-allowed;
  opacity: 0.7;
}
.field[data-invalid="true"] .control {
  border-color: var(--color-danger);
}
.field[data-invalid="true"] .control:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 22%, transparent);
}

textarea.control {
  min-height: 8rem;
  padding-block: var(--space-2xs);
  resize: vertical;
  line-height: var(--leading-normal);
}

select.control {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%232c3e50' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  cursor: pointer;
}

/* Numeric input with a unit suffix rendered inside the field */
.control-group {
  position: relative;
  display: flex;
  align-items: center;
}
.control-group .control {
  padding-right: 3.5rem;
}
.control-group__unit {
  position: absolute;
  right: var(--control-pad-x);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  pointer-events: none;
}
/* Remove spinner chrome consistently */
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Choice controls (radio / checkbox) --- */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--control-height);
  padding: 0 var(--space-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-sm);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.choice:hover {
  border-color: var(--primary-light);
}
.choice input {
  accent-color: var(--primary);
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
}
.choice:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-weight: var(--weight-semibold);
}
.choice:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Checkbox in a list (e.g. habit tracker) */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--control-height);
  cursor: pointer;
}
.checkbox-row input {
  accent-color: var(--primary);
  width: 1.15rem;
  height: 1.15rem;
}

/* --- Star rating (preserved from legacy feedback form) --- */
.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: var(--space-3xs);
}
.star-rating input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.star-rating label {
  font-size: 1.6rem;
  color: var(--color-border);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
  line-height: 1;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: var(--primary);
}
.star-rating input:focus-visible + label {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.char-counter {
  align-self: flex-end;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Form-level error summary */
.form-summary {
  display: none;
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-danger-bg);
  border-left: 3px solid var(--color-danger);
  color: var(--color-danger);
  font-size: var(--text-sm);
}
.form-summary[data-visible="true"] {
  display: block;
}
.form-summary ul {
  margin-top: var(--space-3xs);
  padding-left: 1.1rem;
}

/* ==================== CALCULATOR ==================== */
.calculator {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
/* Grid items default to min-width:auto, so a wide child (the reference
   tables, which carry min-width:32rem) forces the whole column wider than
   the viewport. min-width:0 lets the column shrink and hands the scrolling
   to .table-wrap, where it belongs. */
.calculator > *,
.calculator__panel {
  min-width: 0;
}
@media (min-width: 900px) {
  .calculator {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}

.calculator__panel {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.calculator__panel-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
}
.calculator__actions {
  margin-top: var(--space-lg);
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

/* Result panel — the payoff of the interaction */
.result {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--primary) 10%, var(--color-surface)),
    var(--color-surface)
  );
  border: 1px solid var(--primary-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.result[hidden] {
  display: none;
}
.result__value {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 9vw, 4rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}
.result__unit {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  margin-left: var(--space-3xs);
}
.result__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3xs);
}
.result__detail {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.result__detail ul,
.result__detail ol {
  padding-left: 1.1rem;
  margin-top: var(--space-2xs);
}
.result__detail li + li {
  margin-top: var(--space-3xs);
}

/* Entrance choreography for the result */
.result[data-revealed="true"] {
  animation: result-in var(--duration-slow) var(--ease-out) both;
}
@keyframes result-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==================== BADGE / CHIP ==================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.25rem 0.7rem;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  white-space: nowrap;
}
.badge--accent {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary-dark);
}
.badge--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.badge--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.badge--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* ==================== ALERT ==================== */
.alert {
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border-left: 3px solid currentColor;
  font-size: var(--text-sm);
}
.alert__body {
  color: var(--color-text);
}
.alert__body > * + * {
  margin-top: var(--space-3xs);
}
.alert--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}
.alert--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.alert--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.alert--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ==================== TOOLTIP ==================== */
.tooltip {
  position: relative;
  display: inline-flex;
  border-bottom: 1px dotted var(--color-text-muted);
  cursor: help;
}
.tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  z-index: var(--z-raised);
  width: max-content;
  max-width: 15rem;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--secondary);
  color: var(--text-light);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  border-radius: var(--radius-md);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    visibility var(--duration-fast);
}
.tooltip:hover .tooltip__bubble,
.tooltip:focus-visible .tooltip__bubble {
  opacity: 1;
  visibility: visible;
}

/* ==================== MODAL ==================== */
.modal {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(85vh, 48rem);
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}
.modal::backdrop {
  background: rgba(30, 36, 41, 0.6);
  backdrop-filter: blur(3px);
}
.modal[open] {
  animation: modal-in var(--duration-base) var(--ease-out);
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-2xs);
}
.modal__title {
  font-size: var(--text-xl);
}
.modal__close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-circle);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.modal__close:hover {
  background: var(--color-border);
}
.modal__body {
  padding: 0 var(--space-md) var(--space-md);
  overflow-y: auto;
  max-height: 60vh;
}
.modal--wide {
  width: min(48rem, calc(100vw - 2rem));
}

/* Image lightbox variant */
.modal--lightbox {
  width: auto;
  max-width: 92vw;
  background: transparent;
  box-shadow: none;
}
.modal--lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  border-radius: var(--radius-md);
}

/* ==================== TABS ==================== */
.tabs__list {
  display: flex;
  gap: var(--space-3xs);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}
.tabs__tab {
  flex-shrink: 0;
  min-height: var(--control-height);
  padding: 0 var(--space-sm);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.tabs__tab:hover {
  color: var(--color-text);
}
.tabs__tab[aria-selected="true"] {
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
  font-weight: var(--weight-semibold);
}
.tabs__panel[hidden] {
  display: none;
}

/* ==================== TABLE ==================== */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
}
.table {
  min-width: 32rem;
  font-size: var(--text-sm);
}
.table caption {
  padding: var(--space-2xs) var(--space-sm);
  text-align: left;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  caption-side: top;
}
.table :is(th, td) {
  padding: var(--space-2xs) var(--space-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  background: var(--color-surface-sunken);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.table tbody tr:last-child :is(th, td) {
  border-bottom: none;
}
.table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-surface-sunken) 70%, transparent);
}
.table--numeric td {
  font-variant-numeric: tabular-nums;
}

/* ==================== STATE COMPONENTS ==================== */

/* --- Loading spinner --- */
.spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* --- Skeleton --- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-sunken) 25%,
    var(--color-border) 50%,
    var(--color-surface-sunken) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  to {
    background-position: -200% 0;
  }
}
.skeleton--text {
  height: 0.8em;
  margin-block: 0.25em;
}
.skeleton--title {
  height: 1.4em;
  width: 60%;
}
.skeleton--media {
  aspect-ratio: 16 / 10;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

/* --- Empty state --- */
.empty-state {
  display: grid;
  place-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}
.empty-state__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary-dark);
  font-size: 1.5rem;
}
.empty-state__title {
  font-size: var(--text-xl);
}
.empty-state__text {
  color: var(--color-text-muted);
  max-width: 42ch;
}

/* --- Error state (page level) --- */
.error-state {
  display: grid;
  place-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
}
.error-state__code {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  color: var(--primary);
  line-height: 1;
}

/* ==================== SCROLL REVEAL ====================
   Progressive enhancement: the hidden state only applies once JS has
   marked the document ready. Without JS (or if site.js fails), content
   renders fully visible rather than disappearing. */
[data-js-ready] [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}
[data-js-ready] [data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-js-ready] [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   05 — CONTENT PATTERNS
   Article, recipe and collection UI. All built from the tokens in
   01-tokens.css; no new colour values are introduced here.
   ============================================================ */

/* ==================== READING PROGRESS ==================== */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--z-sticky);
  background: transparent;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--primary);
  transition: width 80ms linear;
}
@media print {
  .reading-progress {
    display: none;
  }
}

/* ==================== ARTICLE ==================== */
.article-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

/* Shell: body centred, TOC parked in the left margin on wide screens */
.article-shell {
  display: grid;
  gap: var(--space-lg);
  padding-bottom: var(--space-2xl);
}
@media (min-width: 1100px) {
  .article-shell {
    grid-template-columns: 15rem minmax(0, var(--container-narrow));
    justify-content: center;
    align-items: start;
    gap: var(--space-xl);
  }
}
.article-body {
  max-width: var(--container-narrow);
  margin-inline: auto;
  min-width: 0;
}
.article-body > * {
  max-width: var(--measure);
}
.article-body :is(h2, h3) {
  scroll-margin-top: 6rem;
}
.article-body h2 {
  font-size: var(--text-3xl);
  margin-top: var(--space-xl);
}
.article-body h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-lg);
}
.article-body img {
  width: 100%;
  border-radius: var(--radius-md);
}
.article-body blockquote {
  margin-block: var(--space-lg);
  padding-left: var(--space-md);
  border-left: 3px solid var(--primary);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}
.article-body :is(ul, ol) {
  padding-left: 1.3rem;
}
.article-body table {
  font-size: var(--text-sm);
}

/* ---- Table of contents ---- */
.article-toc {
  display: none;
}
/* `display:block` below out-specifies the UA's `[hidden] { display:none }`,
   which made the container appear on wide screens even when the script had
   not populated it — an empty "On this page" box. Restore the attribute. */
.article-toc[hidden] {
  display: none !important;
}
@media (min-width: 1100px) {
  .article-toc {
    display: block;
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding-right: var(--space-2xs);
    border-right: 1px solid var(--color-border);
  }
}
.article-toc__title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}
.article-toc ol {
  list-style: none;
  display: grid;
  gap: 2px;
}
.article-toc a {
  display: block;
  padding: var(--space-3xs) var(--space-2xs);
  border-left: 2px solid transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article-toc a:hover {
  color: var(--color-text);
  background: var(--color-surface-sunken);
}
.article-toc a[aria-current="true"] {
  color: var(--primary-dark);
  border-left-color: var(--primary);
  font-weight: var(--weight-semibold);
}
.article-toc li[data-level="3"] a {
  padding-left: var(--space-sm);
  font-size: var(--text-xs);
}

/* ==================== CTA PANEL ==================== */
.cta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-2xl);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 14%, var(--color-surface)),
    var(--color-surface-sunken)
  );
  border: 1px solid var(--primary-light);
  max-width: none;
}
.cta-panel__title {
  font-size: var(--text-xl);
}
.cta-panel__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-3xs);
  margin-bottom: 0;
}

/* ==================== RECIPE ==================== */
.recipe-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px;
  /* Previously pulled up to overlap the old dark full-bleed hero. The
     compact light header is not tall enough to absorb that, and the
     overlap clipped the standfirst — so the card now sits below it. */
  margin-top: var(--space-lg);
  position: relative;
  z-index: var(--z-raised);
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.recipe-stats__item {
  background: var(--color-surface-raised);
  padding: var(--space-sm);
  text-align: center;
}
.recipe-stats dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.recipe-stats dd {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--primary-dark);
  margin-top: var(--space-3xs);
}

.recipe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: flex-end;
  margin-bottom: var(--space-md);
}

.recipe-grid {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 820px) {
  .recipe-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-2xl);
    align-items: start;
  }
  .recipe-grid > section:first-child {
    position: sticky;
    top: 6rem;
  }
}
.recipe-section-title {
  font-size: var(--text-2xl);
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--primary);
  margin-bottom: var(--space-2xs);
}
.recipe-progress {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-sm);
  min-height: 1.2em;
}

/* ---- Checklists ---- */
.checklist {
  list-style: none;
  display: grid;
  gap: var(--space-3xs);
}
.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  min-height: var(--control-height);
  padding: var(--space-2xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.checklist__item:hover {
  background: var(--color-surface-sunken);
}
.checklist__item input {
  accent-color: var(--primary);
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.28em;
  flex-shrink: 0;
  cursor: pointer;
}
.checklist__item input:checked + span {
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.checklist__item span {
  transition: color var(--duration-fast) var(--ease-out);
}

.steps {
  list-style: none;
  display: grid;
  gap: var(--space-2xs);
  counter-reset: step;
}
.steps__label {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.steps__label:hover {
  background: var(--color-surface-sunken);
}
.steps__label input {
  accent-color: var(--primary);
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.35em;
  cursor: pointer;
}
.steps__num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary-dark);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}
.steps__label input:checked ~ .steps__num {
  background: var(--primary);
  color: var(--text-light);
}
.steps__label input:checked ~ .steps__text {
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.steps__text {
  transition: color var(--duration-fast) var(--ease-out);
}

@media print {
  .recipe-grid {
    grid-template-columns: 1fr;
  }
  .recipe-grid > section:first-child {
    position: static;
  }
  .checklist__item input,
  .steps__label input {
    display: none;
  }
}

/* ==================== COLLECTION CONTROLS ==================== */
.collection-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}
.filter-chip {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.filter-chip:hover {
  border-color: var(--primary-light);
  color: var(--color-text);
}
.filter-chip[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-light);
}

.collection-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  margin-top: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.card__meta span + span::before {
  content: "·";
  margin-right: var(--space-2xs);
}

.recipe-card .card__body {
  gap: var(--space-3xs);
}

/* Collection cards are a scannable grid, so their summary text is clamped.
   This keeps every card the same height and means a single over-long
   description can never stretch one card out of the layout — which is
   exactly what happened when the Bottle Gourd Kofta excerpt was 1,854
   characters instead of the ~60 every other recipe carries. */
[data-collection-grid] .card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
[data-collection-grid] .card {
  height: 100%;
}

/* Fallback tile for a recipe with no photograph — the emblem on a tinted
   ground, so the card keeps the same footprint as its neighbours. */
.card__media--placeholder {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 10%, var(--color-surface-sunken));
}
.card__media--placeholder img {
  width: 38%;
  height: auto;
  opacity: 0.5;
}

/* Hidden by the filter — kept in the DOM for fast re-show */
[data-item][hidden] {
  display: none !important;
}

/* ============================================================
   06 — PAGE-LEVEL PATTERNS
   Services, about, contact, questionnaire and tracker composition.
   Built from existing tokens; no new colour values.
   ============================================================ */

/* ==================== SERVICES ==================== */
.service-tabs .tabs__list {
  gap: var(--space-3xs);
  padding-bottom: 2px;
}
.service-panel {
  animation: panel-in var(--duration-base) var(--ease-out);
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-panel {
    animation: none;
  }
}

.service-panel__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.service-panel__intro h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2xs);
}
.service-panel__intro p {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin: 0;
}
.service-panel__steps-title {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* Numbered process — the numbering is real sequence information */
.process {
  list-style: none;
  display: grid;
  gap: var(--space-md);
  counter-reset: process;
}
@media (min-width: 760px) {
  .process {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}
.process__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
}
.process__num {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-circle);
  background: var(--secondary);
  color: var(--text-light);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.process__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3xs);
}
.process__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* ==================== ABOUT ==================== */
.lede-statement {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-heading);
  max-width: 22ch;
  margin-top: var(--space-2xs);
  padding-left: var(--space-md);
  border-left: 3px solid var(--primary);
}

.credential-list {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.credential {
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-border);
  transition: border-color var(--duration-base) var(--ease-out);
}
.credential:hover {
  border-left-color: var(--primary);
}
.credential__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3xs);
  color: var(--primary-dark);
}
.credential__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* ==================== CONTACT ==================== */
.contact-channels {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-sm);
  /* Same as .recipe-stats: the overlap was tuned to the old dark banner. */
  margin-top: var(--space-lg);
  position: relative;
  z-index: var(--z-raised);
}
.contact-channel {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}
.contact-channel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.contact-channel__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  font-size: 1.2rem;
}
.contact-channel__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.contact-channel__value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  margin: 0;
}
a.contact-channel__value {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
}
a.contact-channel__value:hover {
  color: var(--primary-dark);
}

/* Success panel that replaces a submitted form */
.form-success {
  display: grid;
  place-items: center;
  gap: var(--space-2xs);
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  animation: result-in var(--duration-slow) var(--ease-out);
}
.form-success[hidden] {
  display: none;
}
.form-success__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-circle);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: 1.75rem;
  font-weight: var(--weight-bold);
}
.form-success__title {
  font-size: var(--text-2xl);
}
.form-success__text {
  color: var(--color-text-muted);
  max-width: 40ch;
  margin-bottom: var(--space-2xs);
}

/* ==================== QUESTIONNAIRE (multi-step) ==================== */
.quiz {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.quiz__progress {
  margin-bottom: var(--space-lg);
}
.quiz__progress-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}
.quiz__progress-bar {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--primary);
  transition: width var(--duration-slow) var(--ease-out);
}
.quiz__progress-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.quiz__step {
  animation: panel-in var(--duration-base) var(--ease-out);
}
.quiz__step[hidden] {
  display: none;
}
.quiz__question {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-md);
}
.quiz__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: space-between;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* Selectable answer options — large touch targets */
.option-list {
  display: grid;
  gap: var(--space-2xs);
}
.option {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--control-height);
  padding: var(--space-2xs) var(--space-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.option:hover {
  border-color: var(--primary-light);
  background: var(--color-surface-sunken);
}
.option input {
  accent-color: var(--primary);
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  cursor: pointer;
}
.option:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.option:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Review summary before submit */
.quiz__review {
  display: grid;
  gap: var(--space-2xs);
}
.review-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm);
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.review-row dt {
  color: var(--color-text-muted);
}
.review-row dd {
  font-weight: var(--weight-semibold);
  text-align: right;
}

/* ---------- Option sublabel (PCOS yes/no) ---------- */
.option__sub {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-left: var(--space-3xs);
}

/* ---------- PCOS score breakdown ---------- */
.score-breakdown {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.score-row__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3xs);
}
.score-row--top .score-row__head {
  font-weight: var(--weight-bold);
  color: var(--primary-dark);
}
.score-row__track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}
.score-row__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gray-800);
  opacity: 0.35;
  transition: width var(--duration-slow) var(--ease-out);
}
.score-row--top .score-row__bar {
  background: var(--primary);
  opacity: 1;
}

.pcos-explanation {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border-left: 3px solid var(--primary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.pcos-explanation b {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  margin-bottom: var(--space-3xs);
  color: var(--color-heading);
}

/* ============================================================
   07 — GROWTH CHARTS
   Inline-SVG chart styling. No charting library, no CDN.
   ============================================================ */

.growth {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
.growth > * {
  min-width: 0;
}
@media (min-width: 1000px) {
  .growth {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }
}
.growth__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}
@media (min-width: 1000px) {
  .growth__side {
    position: sticky;
    top: 6rem;
  }
}

/* ---------- chart frame ---------- */
.growth-chart {
  margin: 0;
  padding: var(--space-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.growth-chart__canvas {
  width: 100%;
  overflow: hidden;
}
.growth-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.growth-chart__caption {
  margin-top: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

/* ---------- SVG internals ---------- */
.growth-chart__grid line {
  stroke: var(--color-border);
  stroke-width: 1;
}
.growth-chart__grid .growth-chart__grid-v {
  stroke: var(--color-border);
  opacity: 0.5;
}
.growth-chart__tick {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--color-text-muted);
}
.growth-chart__axis-title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  fill: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.growth-chart__band-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
}
.growth-chart__line {
  vector-effect: non-scaling-stroke;
  transition: stroke-width var(--duration-fast) var(--ease-out);
}
.growth-chart__line[data-band="50th"] {
  stroke-dasharray: none;
}

/* plotted child */
.growth-chart__marker-guide {
  stroke: var(--primary);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.6;
}
.growth-chart__marker-halo {
  fill: var(--primary);
  opacity: 0.25;
  animation: marker-pulse 1.6s var(--ease-out) 2;
  transform-box: fill-box;
  transform-origin: center;
}
.growth-chart__marker {
  fill: var(--primary-dark);
  stroke: #fff;
  stroke-width: 2;
}
@keyframes marker-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .growth-chart__marker-halo {
    animation: none;
  }
}

/* ---------- result note ---------- */
.growth-note {
  margin-top: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--text-sm);
}

/* ---------- data table disclosure ---------- */
.growth-table-disclosure {
  margin-top: var(--space-2xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-raised);
}
.growth-table-disclosure summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  min-height: 2.25rem;
  display: flex;
  align-items: center;
}
.growth-table-disclosure summary::marker {
  color: var(--primary);
}
.growth-table-disclosure[open] summary {
  margin-bottom: var(--space-2xs);
}
.growth-table-disclosure .table {
  min-width: 42rem;
}

/* ============================================================
   08 — PAGE CHROME
   The canonical page header and the site footer.

   Design note — why the page header is light now:
   the old treatment was a full-bleed near-black band 195–252px tall that
   pushed content past 300px on every page. It read as a slab sitting on
   the page rather than the top of it. This replaces it with a warm paper
   band: a wash of the brand gold over the existing neutral, dissolving
   into the page and closed by a hairline rule with a short gold segment.
   Hierarchy now comes from typography and space, not from a dark block.

   No font colours changed. Titles keep --secondary, ledes keep
   --text-muted; both sit on a near-white ground, so contrast is far
   higher than the white-on-dark it replaces.
   ============================================================ */

/* ==================== PAGE HEADER ==================== */
.page-head {
  position: relative;
  isolation: isolate;
  /* Warm paper: a 6% gold wash over the existing neutral, fading to the
     page surface so there is no hard edge where the band ends. */
  /* Tint strength is set by contrast, not taste: at 7% the ground fell to
     rgb(239,232,224) and the site's existing --text-muted dropped to
     3.85:1, below AA. Dialled back so every inherited text colour keeps
     the same headroom it has on white. */
  /* Uses the theming tint tokens, not --gray-100: that raw brand value
     does not flip, which left this band rendering light in dark mode. */
  background: linear-gradient(180deg, var(--color-tint) 0%, var(--color-tint-soft) 100%);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

/* A very faint gold bloom anchored to the text side — gives the band
   depth without a pattern or an image. */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    60ch 120% at 8% 0%,
    color-mix(in srgb, var(--primary) 6%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

/* The rule that closes the band carries a short gold segment at the
   content's left edge — a small, deliberate accent rather than a border
   treatment applied everywhere. */
.page-head::after {
  content: "";
  position: absolute;
  left: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  bottom: -1px;
  width: 3.5rem;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.page-head__inner {
  /* Compact by design: this is the single biggest vertical saving. */
  padding-block: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: flex-start;
  text-align: left;
}

/* ---- eyebrow / breadcrumbs share one small-label treatment ---- */
/* Gold is kept for the rules and accents, not for the small text itself:
   --primary-dark only reaches 3.73:1 on plain white, so at this size it
   never met AA anywhere on the site. Using --secondary here (an existing
   site colour) puts the label comfortably over 4.5:1 without altering any
   token. The gold still leads the eyebrow as a rule and closes the band
   as the accent bar. */
.page-head__eyebrow,
.page-head__crumbs {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0;
}
.page-head__eyebrow::before {
  background: var(--primary);
}
.page-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.page-head__eyebrow::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: currentColor;
}

.page-head__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-head__crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-3xs);
  color: var(--color-border);
}
.page-head__crumbs a {
  color: var(--color-heading);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
}
.page-head__crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-head__crumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--weight-medium);
  /* long article titles must not blow out the row */
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- title + lede ---- */
.page-head__title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  margin: 0;
  max-width: 20ch;
}
/* Uses --text-main rather than --text-muted: both are established site
   colours, and --text-main clears AA comfortably on the tinted ground
   while --text-muted only just missed it. No new colour introduced. */
.page-head__lede {
  font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.1rem);
  line-height: var(--leading-snug);
  color: var(--color-text);
  max-width: 58ch;
  margin: 0;
}
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  margin: var(--space-3xs) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.page-head__meta span + span::before {
  content: "·";
  margin-right: var(--space-2xs);
  color: var(--color-border);
}

/* ---- variant: picture-led (recipes) ----
   The photograph sits beside the text on wide screens instead of behind
   it, so the type never has to fight an image for contrast. */
.page-head--media .page-head__inner {
  gap: var(--space-2xs);
}
@media (min-width: 820px) {
  .page-head--media .page-head__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: var(--space-xl);
    align-items: center;
    padding-block: clamp(1.5rem, 3vw, 2rem);
  }
  .page-head--media .page-head__inner::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    min-height: 8.5rem;
    background-image: var(--head-media);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  .page-head--media .page-head__crumbs,
  .page-head--media .page-head__title,
  .page-head--media .page-head__lede,
  .page-head--media .page-head__meta {
    grid-column: 1;
  }
}

/* ---- variant: plain (no tint — for pages that supply their own art) ---- */
.page-head--plain {
  background: var(--color-surface-raised);
}
.page-head--plain::before {
  display: none;
}

/* ---- variant: hero (homepage only) ----
   Deliberately unchanged in spirit: the homepage is the one place a large
   photographic statement earns its height. */
.page-head--hero {
  min-height: min(78vh, 44rem);
  display: grid;
  place-items: center;
  text-align: center;
  border-bottom: none;
  background:
    linear-gradient(rgba(30, 36, 41, 0.66), rgba(30, 36, 41, 0.72)),
    var(--head-media, none) center 20% / cover no-repeat,
    var(--secondary);
}
.page-head--hero::before,
.page-head--hero::after {
  display: none;
}
.page-head--hero .page-head__inner {
  align-items: center;
  text-align: center;
  padding-block: var(--space-2xl);
}
.page-head--hero .page-head__title {
  color: var(--text-light);
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  max-width: 18ch;
}
.page-head--hero .page-head__lede {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-lg);
  max-width: 52ch;
}
.page-head--hero .page-head__eyebrow {
  color: var(--primary-light);
}

@media (max-width: 599px) {
  .page-head__title {
    max-width: none;
  }
  .page-head__crumbs [aria-current="page"] {
    max-width: 18ch;
  }
}

/* ==================== FOOTER ====================
   Design note — colour:
   the previous footer was the same flat near-black as the old page
   banner, 389px tall on desktop and 691px on mobile because four columns
   stacked into a tower. This is a deep espresso: --secondary warmed
   toward the brand gold, so it reads as part of the palette rather than
   generic black, and it closes the page against the light header above
   it. A hairline gold rule marks the join. Text stays white — no font
   colours changed.
   ============================================================ */
.site-footer {
  --footer-ink: rgba(255, 255, 255, 0.72);
  --footer-ink-strong: #ffffff;
  position: relative;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--primary) 8%, var(--secondary)) 0%,
      var(--secondary) 55%
    );
  color: var(--footer-ink);
  padding-block: 0;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    color-mix(in srgb, var(--primary) 40%, transparent) 38%,
    transparent 70%
  );
}

/* ---- main row: brand · links · contact, side by side ---- */
.site-footer__main {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-md);
}
@media (min-width: 760px) {
  .site-footer__main {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-xl);
    align-items: start;
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: flex-start;
}
.site-footer__brand img {
  height: 2.75rem;
  width: auto;
  /* the emblem is gold on transparent; lift it slightly on the dark ground */
  filter: brightness(1.12);
}
/* The wordmark picks up the same accent as the column headings
   ("Explore", "Get in touch") — one token, so both track any theme change. */
.site-footer__name {
  color: var(--primary-light);
}
.site-footer__blurb {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--footer-ink);
  max-width: 34ch;
  margin: 0;
}

.site-footer__col-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--primary-light);
  margin: 0 0 var(--space-2xs);
}

/* Links wrap inline rather than stacking one-per-row — this is what kept
   the old mobile footer near 700px tall. */
.site-footer__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
  margin: 0;
  padding: 0;
}
@media (min-width: 760px) {
  /* Two columns, not one — seven links stacked singly made this column
     298px tall on its own and was what kept the whole footer oversized. */
  .site-footer__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-md);
  }
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-size: var(--text-sm);
  color: var(--footer-ink);
  text-decoration: none;
}
.site-footer__links a:hover {
  color: var(--primary-light);
}

.site-footer__contact {
  display: grid;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
}
.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.25rem;
  color: var(--footer-ink-strong);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.site-footer__contact a:hover {
  color: var(--primary-light);
}
.site-footer__contact .muted {
  color: var(--footer-ink);
  font-weight: var(--weight-normal);
}
.site-footer__cta {
  margin-top: var(--space-2xs);
}

/* ---- legal bar ---- */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.58);
}
.site-footer__legal p {
  margin: 0;
  max-width: none;
}
/* Designer credit. Deliberately kept in the legal bar, where a design
   credit conventionally sits — quiet, but findable.

   `inline-block`, not `inline-flex`: as a flex container the label and the
   name became separate flex items, and CSS drops the whitespace *between*
   flex items, so this rendered as "Designed byH. Sumant" and could break
   mid-phrase on narrow screens. Normal inline flow keeps the space and the
   phrase intact; line-height preserves the 36px touch target. */
.designer-credit {
  display: inline-block;
  min-height: 2.25rem;
  line-height: 2.25rem;
  white-space: nowrap;
  padding-inline: var(--space-3xs);
  background: none;
  border: none;
  /* One step brighter than the legal bar's 58%, using the footer's own ink
     token — visible enough to notice, quiet enough not to compete. */
  color: var(--footer-ink);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}
.designer-credit:hover {
  color: var(--primary-light);
}
.designer-name {
  font-weight: var(--weight-semibold);
}

@media (max-width: 759px) {
  .site-footer__main {
    gap: var(--space-sm);
    padding-block: var(--space-md) var(--space-sm);
  }
  .site-footer__brand img {
    height: 2.25rem;
  }
  /* The copyright and strapline wrapped to three lines and sat above a
     separately-stacked credit button — 115px for a legal bar. Tightened
     and allowed to share the row. */
  .site-footer__legal {
    justify-content: flex-start;
    gap: 0 var(--space-sm);
    padding-block: var(--space-2xs);
    line-height: var(--leading-snug);
  }
  .site-footer__legal p {
    flex: 1 1 100%;
  }
  .site-footer__contact {
    gap: 0;
  }
}

/* ============================================================
   THEME CONTROL + DARK-MODE CHROME ADJUSTMENTS
   ============================================================ */

.site-header__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .site-header__controls {
    margin-left: var(--space-sm);
  }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  height: var(--control-height);
  padding-inline: var(--space-xs);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
}
.theme-toggle__icon {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
}
.theme-toggle__icon svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}
/* Show the icon of the theme you would switch TO, matching the label. */
.theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-toggle__moon { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle__sun { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

/* The word is redundant on small screens where space is tight. */
@media (max-width: 599px) {
  .theme-toggle__text { display: none; }
  .theme-toggle { padding-inline: 0; width: var(--control-height); justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle__icon svg { transition: none; }
}

/* ---- dark-mode chrome ---- */
[data-theme="dark"] .site-header {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}
[data-theme="dark"] .page-head {
  border-bottom-color: var(--color-border);
}
/* The traced brand SVGs are a fixed gold; on a dark ground they read a
   touch heavy, so lift them very slightly rather than recolouring. */
[data-theme="dark"] .site-header__mark,
[data-theme="dark"] .site-header__wordmark {
  filter: brightness(1.08);
}

/* Footer already sits on --secondary, which is dark in both themes; in
   dark mode give it a hair of separation from the page instead of the
   gradient, which would otherwise vanish. */
[data-theme="dark"] .site-footer {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--primary) 6%, #1b2125) 0%,
    #171c20 60%
  );
  border-top: 1px solid var(--color-border);
}

/* Sections that are intentionally dark need to stay distinct from a dark
   page rather than blending into it. */
[data-theme="dark"] .section--dark {
  background: var(--color-surface-raised);
  border-block: 1px solid var(--color-border);
}

/* ============================================================
   CALCULATOR SURFACES
   The tool pages read as white-on-white: a white panel on a white page
   with only a hairline between them. Seating the page on the sunken
   surface and lifting the panels gives the form real presence, and the
   same rule holds in dark mode because both sides are tokens.
   ============================================================ */
.calculator,
.growth {
  --panel-bg: var(--color-surface-raised);
}

/* the band the tool sits in */
.calculator-shell {
  background: var(--color-surface-sunken);
  border-block: 1px solid var(--color-border);
}

.calculator__panel,
.growth-chart {
  background: var(--panel-bg, var(--color-surface-raised));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm), var(--elevate);
}

/* Panel headings get a gold rule so the tool carries brand rather than an
   icon — this replaces the emoji that used to sit beside them. */
.calculator__panel-title {
  position: relative;
  padding-left: var(--space-sm);
}
.calculator__panel-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.35em;
  width: 3px;
  border-radius: 2px;
  background: var(--primary);
}

/* Result panel: tinted so the answer is visibly the payoff, not just
   another card. */
.result {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--primary) 12%, var(--color-surface-raised)),
    var(--color-surface-raised)
  );
  border-color: color-mix(in srgb, var(--primary) 45%, var(--color-border));
  box-shadow: var(--shadow-sm), var(--elevate);
}
[data-theme="dark"] .result {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--primary) 16%, var(--color-surface-raised)),
    var(--color-surface-raised)
  );
}

/* Inputs need to read as inset on a raised panel in both themes. */
.control {
  background: var(--color-surface);
}
[data-theme="dark"] .control {
  background: var(--color-surface-sunken);
}

/* Growth chart canvas keeps a light plotting ground in dark mode would be
   wrong — the SVG uses currentColor-ish tokens, so it themes with the
   page. Just ensure the frame matches the panels. */
[data-theme="dark"] .growth-chart__marker {
  stroke: var(--color-surface-raised);
}

/* ============================================================
   09 — SURFACE TREATMENT
   Calculator cards, calculator panels and the service explorer.

   One system, not three: every surface here is a soft brand-tinted
   gradient on a raised ground, edged with a hairline, and marked with a
   single gold accent that strengthens on hover or when active. Nothing
   introduces a new colour — the tint is --primary mixed into the existing
   surface tokens, so it themes automatically and stays restrained.

   Deliberately NOT four different colours: the four services share one
   family, and only the ACTIVE one carries full-strength gold. That reads
   as a considered system rather than a rainbow.
   ============================================================ */

/* ---------- the shared feature-card ground ----------
   One token (--surface-feature, defined per theme in 01-tokens.css) and
   one class. Previously this was a hardcoded selector list duplicated for
   light and dark, which meant Expertise cards were silently excluded and
   any future change had to be made in five places.

   `.card--feature` is the hook; panels that are not cards consume the
   token directly. Both resolve to the same value, so the family stays in
   step and each theme supplies its own tint strength automatically. */
.card--feature,
.calculator__panel,
.service-panel {
  background: var(--surface-feature);
}

/* ==================== CALCULATOR / TOOL CARDS ==================== */
/* The hub cards: a tinted ground, a gold top edge that grows on hover,
   and a quiet monogram rule instead of an icon. */
.tool-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--elevate);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}
.tool-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    color-mix(in srgb, var(--primary) 35%, transparent) 45%,
    transparent 80%
  );
  transform: scaleX(0.32);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}
.tool-card:hover,
.tool-card:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--color-border));
  box-shadow: var(--shadow-md), var(--elevate);
}
.tool-card:hover::before,
.tool-card:focus-within::before {
  transform: scaleX(1);
}

/* A faint brand emblem watermark, bottom-right, clipped by the card.
   Low enough opacity to read as texture rather than a logo placement. */
.tool-card::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  bottom: -2rem;
  width: 8rem;
  height: 8rem;
  background: var(--brand-mark) center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}
[data-theme="dark"] .tool-card::after {
  opacity: 0.08;
}
.tool-card:hover::after {
  opacity: 0.1;
}
[data-theme="dark"] .tool-card:hover::after {
  opacity: 0.14;
}

.tool-card .card__body {
  position: relative;
  z-index: 1;
}
/* Category label above the title, in place of the old emoji */
.tool-card__kicker {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-3xs);
}
.tool-card__kicker::before {
  content: "";
  width: 1.1rem;
  height: 1px;
  background: currentColor;
}
[data-theme="dark"] .tool-card__kicker {
  color: var(--primary-light);
}

/* ==================== CALCULATOR PANELS ==================== */
.calculator__panel {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm), var(--elevate);
}

/* ==================== SERVICE EXPLORER ==================== */
.service-tabs .tabs__list {
  gap: var(--space-3xs);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0;
  /* Wrap rather than scroll: four service names do not fit on one line
     below ~900px, and a scrollbar under the tabs hid the fourth option. */
  flex-wrap: wrap;
  overflow-x: visible;
}
.service-tabs .tabs__tab {
  flex: 0 1 auto;
}

/* Tabs become quiet pills; only the active one carries the brand. */
.service-tabs .tabs__tab {
  position: relative;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding-inline: var(--space-md);
  color: var(--color-text-muted);
  background: transparent;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.service-tabs .tabs__tab:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.service-tabs .tabs__tab[aria-selected="true"] {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 14%, var(--color-surface-raised)),
      var(--color-surface-raised)
    );
  border-color: var(--color-border);
  /* sits on top of the list's bottom rule */
  margin-bottom: -1px;
  padding-bottom: 1px;
}
.service-tabs .tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}

/* Panel: tinted surface, gold rule down the intro, emblem watermark. */
.service-panel {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--elevate);
}
.service-panel::after {
  content: "";
  position: absolute;
  right: -2rem;
  top: -2rem;
  width: 11rem;
  height: 11rem;
  background: var(--brand-mark) center / contain no-repeat;
  opacity: 0.04;
  pointer-events: none;
}
[data-theme="dark"] .service-panel::after {
  opacity: 0.07;
}
.service-panel > * {
  position: relative;
  z-index: 1;
}

.service-panel__intro {
  gap: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 3px solid var(--primary);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--space-lg);
}
.service-panel__intro h2 {
  font-size: var(--text-3xl);
}

/* Steps: numbered chips on a soft ground so the four read as a set. */
.process__step {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border: 1px solid transparent;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}
[data-theme="dark"] .process__step {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.process__step:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}
[data-theme="dark"] .process__step:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.process__num {
  background: var(--primary);
  color: #fff;
}
[data-theme="dark"] .process__num {
  color: var(--color-surface);
}

@media (max-width: 599px) {
  /* keep cards from getting tall on a phone */
  .service-panel {
    padding: var(--space-md) var(--space-sm);
  }
  .process__step {
    padding: var(--space-2xs) var(--space-xs);
  }
  .service-tabs .tabs__tab {
    padding-inline: var(--space-sm);
  }
}