/* ==========================================================================
   Serendib Support Services — Design System
   Soft & Organic  ×  Corporate Modern
   --------------------------------------------------------------------------
   Everything visual is driven by the design tokens in :root below.
   To restyle the whole site, change the variables — not the components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS  (edit these to rebrand)
   -------------------------------------------------------------------------- */
:root {

  /* ---- Brand colours ---------------------------------------------------- */
  --color-primary:        #2f6e5b;   /* eucalyptus green — primary actions, nav */
  --color-primary-dark:   #245546;   /* hover */
  --color-primary-darker: #1c4234;   /* press / deep panels */
  --color-primary-soft:   #e8f1ec;   /* pale sage — soft section backgrounds */
  --color-primary-tint:   #cfe4d9;   /* sage tint — chips, icon circles */

  --color-accent:         #c2613d;   /* warm terracotta — accents, highlights */
  --color-accent-dark:    #a94e2e;   /* hover */
  --color-accent-soft:    #f7e7df;   /* pale clay — soft backgrounds */
  --color-accent-tint:    #ecc7ae;   /* clay tint — icon circles */

  /* ---- Neutrals --------------------------------------------------------- */
  --color-bg:             #faf6f0;   /* warm cream — page background */
  --color-surface:        #ffffff;   /* cards & panels */
  --color-surface-alt:    #f3ece0;   /* sand — alternating sections */
  --color-sand:           #efe6d6;   /* deeper sand — accents */

  --color-text:           #25302b;   /* primary text — warm near-black */
  --color-heading:        #1b2722;   /* headings */
  --color-muted:          #56615b;   /* secondary text (AA on light) */
  --color-faint:          #7c857f;   /* tertiary / captions */
  --color-on-dark:        #f3f1ea;   /* text on dark green panels */
  --color-on-dark-muted:  #c2d4cc;   /* muted text on dark panels */

  --color-border:         #e7ded0;   /* hairline borders on cream */
  --color-border-soft:    #eee7da;   /* lighter dividers */
  --color-border-strong:  #d8cdb9;   /* input borders */

  /* ---- Semantic --------------------------------------------------------- */
  --color-success:        #2e7d5b;
  --color-success-soft:   #e3f1ea;
  --color-warning:        #a96a12;
  --color-warning-soft:   #f7ecd8;
  --color-error:          #bc3a2b;
  --color-error-soft:     #f7e4e0;
  --color-info:           #2f6e5b;
  --color-info-soft:      #e8f1ec;

  --color-focus:          #1d6f8b;   /* high-visibility focus ring (distinct hue) */

  /* ---- Typography ------------------------------------------------------- */
  --font-heading: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs:   0.8125rem;                          /* 13px */
  --fs-sm:   0.9375rem;                           /* 15px */
  --fs-base: 1.0625rem;                           /* 17px — large, readable body */
  --fs-md:   1.1875rem;                            /* 19px */
  --fs-lg:   clamp(1.25rem, 1.6vw, 1.4rem);        /* lead */
  --fs-xl:   clamp(1.45rem, 2.2vw, 1.75rem);       /* h3 */
  --fs-2xl:  clamp(1.8rem, 3.2vw, 2.4rem);         /* h2 */
  --fs-3xl:  clamp(2.2rem, 4.6vw, 3rem);           /* big headings */
  --fs-4xl:  clamp(2.6rem, 6vw, 3.85rem);          /* hero display */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --lh-tight:  1.12;
  --lh-snug:   1.28;
  --lh-base:   1.65;
  --tracking-label: 0.13em;

  /* ---- Spacing scale (8px base) ---------------------------------------- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --section-y: clamp(3.5rem, 7vw, 6.5rem);   /* vertical section padding */

  /* ---- Radius ----------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;    /* default — buttons, inputs */
  --radius-lg:   14px;    /* cards */
  --radius-xl:   20px;    /* large panels */
  --radius-2xl:  28px;    /* hero / CTA containers */
  --radius-pill: 999px;

  /* ---- Shadows (soft, layered) ----------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(40, 50, 45, 0.06);
  --shadow-sm: 0 2px 8px rgba(28, 40, 32, 0.09);
  --shadow-md: 0 8px 22px -8px rgba(28, 40, 32, 0.24);
  --shadow-lg: 0 20px 48px -18px rgba(20, 35, 28, 0.32);
  --shadow-glow: 0 18px 40px -18px rgba(47, 110, 91, 0.40);

  /* ---- Layout ----------------------------------------------------------- */
  --container:        1140px;
  --container-wide:   1280px;
  --container-narrow: 760px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --header-h: 76px;

  /* ---- Motion (restrained) --------------------------------------------- */
  --transition: 140ms ease;          /* base — links, nav, buttons */
  --transition-slow: 240ms ease;     /* slow — card hovers */

  /* ---- Motion system tokens (shared by CSS transitions & script.js) ----
     script.js reads --motion-distance at runtime so the GSAP scroll-reveal
     layer and CSS hover states stay on the same scale. */
  --transition-fast: 100ms ease;         /* icon states, focus */
  --transition-base: var(--transition);  /* alias — keeps one source of truth */
  --ease-standard: cubic-bezier(0.33, 1, 0.68, 1);  /* ~ power3.out, used by GSAP reveals */
  --ease-soft:      cubic-bezier(0.16, 1, 0.3, 1);   /* ~ power2.out, gentler hover feel */
  --motion-distance: 20px;   /* default translateY for fade-up reveals */
  --hover-lift: -3px;        /* consistent hover raise for cards */
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  font-weight: var(--fw-extra);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }

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

ul, ol { padding: 0; list-style: none; }

strong { font-weight: var(--fw-semibold); color: var(--color-heading); }

svg { flex-shrink: 0; }

::selection { background: var(--color-primary-tint); color: var(--color-heading); }

/* Accessible focus — high-visibility, never removed */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   3. LAYOUT  —  container & section
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; overflow: hidden; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--alt   {
  background: var(--color-surface-alt);
  background-image:
    radial-gradient(55% 100% at 100% 0%, rgba(194,97,61,0.09), transparent 55%),
    radial-gradient(50% 90% at 0% 100%, rgba(47,110,91,0.07), transparent 55%);
}
.section--sage  {
  background: var(--color-primary-soft);
  background-image:
    radial-gradient(55% 90% at 100% 0%, rgba(194,97,61,0.10), transparent 55%),
    radial-gradient(55% 80% at 0% 100%, rgba(255,255,255,0.5), transparent 60%);
}
.section--clay  {
  background: var(--color-accent-soft);
  background-image:
    radial-gradient(55% 90% at 100% 0%, rgba(47,110,91,0.08), transparent 55%),
    radial-gradient(55% 80% at 0% 100%, rgba(255,255,255,0.4), transparent 60%);
}
.section--surface { background: var(--color-surface); }

/* Dark green feature band */
.section--primary {
  background: var(--color-primary-darker);
  color: var(--color-on-dark);
  background-image:
    radial-gradient(60% 90% at 12% 8%, rgba(72,202,228,0.10), transparent 60%),
    radial-gradient(50% 80% at 90% 100%, rgba(194,97,61,0.18), transparent 60%);
}
.section--primary h1, .section--primary h2, .section--primary h3 { color: #fff; }
.section--primary .lead, .section--primary p { color: var(--color-on-dark-muted); }

/* Soft rounded transition — a section that curves up over the one above */
.section--curve { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; margin-top: calc(-1 * var(--radius-2xl)); position: relative; z-index: 1; }

/* Section heading block */
.section__head { max-width: 52ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head .lead { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-darker);
  background: var(--color-primary-tint);
  padding: 0.35rem 0.95rem 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.section--primary .eyebrow, .cta-panel .eyebrow { background: rgba(255,255,255,0.16); color: #fff; }

.title    { font-size: var(--fs-2xl); }
.title-lg { font-size: var(--fs-3xl); }
.display  { font-size: var(--fs-4xl); letter-spacing: -0.03em; }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--color-muted);
  font-weight: var(--fw-regular);
}
.text-muted { color: var(--color-muted); }
.measure { max-width: 62ch; }
.code { font-family: var(--font-mono); font-size: 0.92em; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { --btn-bg: var(--color-primary); box-shadow: var(--shadow-glow); }
.btn--primary:hover  { background: var(--color-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--primary:active { background: var(--color-primary-darker); transform: translateY(0); }

.btn--accent { --btn-bg: var(--color-accent); }
.btn--accent:hover { background: var(--color-accent-dark); color: #fff; }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--secondary:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-heading);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover { background: var(--color-surface); border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

.btn--white {
  --btn-bg: #fff;
  --btn-fg: var(--color-primary-darker);
}
.btn--white:hover { background: var(--color-bg); color: var(--color-primary-darker); }

.btn--on-dark-outline {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255,255,255,0.5);
}
.btn--on-dark-outline:hover { background: rgba(255,255,255,0.12); color: #fff; border-color:#fff; }

.btn--lg { min-height: 54px; padding: 0.9rem 1.9rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Plain text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: var(--color-primary);
}
.link-arrow svg { width: 17px; height: 17px; transition: transform var(--transition); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. BADGES & PILLS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  background: var(--color-primary-tint);
  color: var(--color-primary-darker);
  letter-spacing: 0.01em;
}
.badge svg { width: 15px; height: 15px; }
.badge--accent  { background: var(--color-accent-tint);  color: var(--color-accent-dark); }
.badge--sand    { background: var(--color-sand);         color: #6c5a3c; }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--neutral { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); }
.badge--ghost-dark { background: rgba(255,255,255,0.10); color: var(--color-on-dark); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  box-shadow: var(--shadow-xs);
}
.pill svg { width: 16px; height: 16px; color: var(--color-primary); }
.pill-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   7. ICON CIRCLES
   -------------------------------------------------------------------------- */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.icon-circle svg { width: 26px; height: 26px; }
.icon-circle--accent { background: var(--color-accent); color: #fff; }
.icon-circle--sand   { background: var(--color-heading); color: #fff; }
.icon-circle--sm { width: 44px; height: 44px; }
.icon-circle--sm svg { width: 21px; height: 21px; }
.icon-circle--lg { width: 68px; height: 68px; border-radius: 26px; }
.icon-circle--lg svg { width: 30px; height: 30px; }

/* solid "squircle" variant for service cards */
.icon-squircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.icon-squircle svg { width: 27px; height: 27px; }

/* --------------------------------------------------------------------------
   8. GRIDS
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

@media (min-width: 600px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 920px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* split layout: content + media */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first .split__media { order: -1; }
  .split--narrow-media { grid-template-columns: 1.1fr 0.9fr; }
}

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.card__title { font-size: var(--fs-xl); margin-top: var(--space-4); }
.card__text  { margin-top: var(--space-3); color: var(--color-muted); }
.card > .icon-circle + .card__title,
.card > .icon-squircle + .card__title { margin-top: var(--space-5); }

/* interactive service card */
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-slow), border-color var(--transition), transform var(--transition-slow);
  height: 100%;
}
.service-card:nth-of-type(3n+2) { border-top-color: var(--color-accent); }
.service-card:nth-of-type(3n+3) { border-top-color: var(--color-heading); }
.service-card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-primary-tint); transform: translateY(-5px); }
.service-card__title { font-size: var(--fs-md); font-weight: var(--fw-bold); margin-top: var(--space-4); color: var(--color-heading); }
.service-card__text  { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--fs-sm); flex: 1; }
.service-card__foot  { margin-top: var(--space-4); }

/* feature row (icon left, text right) */
.feature { display: flex; gap: var(--space-4); align-items: flex-start; }
.feature__body h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.feature__body p  { color: var(--color-muted); font-size: var(--fs-sm); }

/* audience card */
.audience-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}
.audience-card:nth-of-type(4n+2) { border-top-color: var(--color-accent); }
.audience-card:nth-of-type(4n+3) { border-top-color: var(--color-heading); }
.audience-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.audience-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 120px; height: 120px;
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  opacity: 0.6;
  z-index: 0;
}
.audience-card > * { position: relative; z-index: 1; }
.audience-card h3 { font-size: var(--fs-md); margin: var(--space-4) 0 var(--space-2); }
.audience-card p  { color: var(--color-muted); font-size: var(--fs-sm); }

/* value card with number */
.value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}
.value-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.value-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: 0.05em;
}
.value-card h3 { font-size: var(--fs-md); margin: var(--space-3) 0 var(--space-2); }
.value-card p  { color: var(--color-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   10. CALLOUT BOXES
   -------------------------------------------------------------------------- */
.callout {
  display: flex;
  gap: var(--space-4);
  padding: clamp(1.2rem, 3vw, 1.75rem);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-tint);
  border-radius: var(--radius-lg);
}
.callout__icon { color: var(--color-primary); }
.callout__icon svg { width: 26px; height: 26px; }
.callout h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.callout p  { color: var(--color-muted); font-size: var(--fs-sm); }

.callout--accent  { background: var(--color-accent-soft); border-color: var(--color-accent-tint); }
.callout--accent  .callout__icon { color: var(--color-accent-dark); }
.callout--warning { background: var(--color-warning-soft); border-color: #ecd9b6; }
.callout--warning .callout__icon { color: var(--color-warning); }
.callout--sand    { background: var(--color-surface-alt); border-color: var(--color-border); }

/* --------------------------------------------------------------------------
   11. CHECKLIST
   -------------------------------------------------------------------------- */
.checklist { display: grid; gap: var(--space-3); }
.checklist li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.checklist li > svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 1px;
}
.checklist--accent li > svg { color: var(--color-accent); }
.checklist--cols { grid-template-columns: 1fr; }
@media (min-width: 600px) { .checklist--cols { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); } }

/* --------------------------------------------------------------------------
   12. PROCESS STEPS / TIMELINE
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); counter-reset: step; }
@media (min-width: 760px) { .steps--row { grid-template-columns: repeat(3, 1fr); } }

.step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}
.step:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: var(--fw-extra);
  font-size: var(--fs-md);
  margin-bottom: var(--space-4);
}
.step:nth-child(2) .step__num { background: var(--color-accent); }
.step:nth-child(3) .step__num { background: var(--color-primary-darker); }
.step:nth-child(2) { border-top-color: var(--color-accent); }
.step:nth-child(3) { border-top-color: var(--color-primary-darker); }
.step h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.step p  { color: var(--color-muted); font-size: var(--fs-sm); }
/* connector dots on desktop row layout */
@media (min-width: 760px) {
  .steps--row .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(clamp(1.5rem, 3vw, 2rem) + 24px);
    right: -1.1rem;
    width: 0.9rem; height: 2px;
    background: var(--color-border-strong);
  }
}

/* --------------------------------------------------------------------------
   13. PATHWAY (vertical timeline)
   -------------------------------------------------------------------------- */
.pathway { display: grid; gap: 0; }
.pathway__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  position: relative;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.pathway__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px; top: 44px; bottom: 0;
  width: 2px;
  background: var(--color-border-strong);
}
.pathway__marker {
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-extra);
  z-index: 1;
}
.pathway__marker svg { width: 20px; height: 20px; }
.pathway__content { padding-top: var(--space-1); }
.pathway__content h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.pathway__content p  { color: var(--color-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   14. STAT BAND
   -------------------------------------------------------------------------- */
.stat-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 600px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .stat-grid--4 { grid-template-columns: repeat(4, 1fr); } .stat-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.stat {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-slow), background var(--transition);
}
.stat:hover { transform: translateY(-3px); background: rgba(255,255,255,0.1); }
.stat__num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: var(--fw-extra);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat__label { margin-top: var(--space-3); color: var(--color-on-dark-muted); font-size: var(--fs-sm); }
.stat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.16);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.stat__icon svg { width: 26px; height: 26px; }

/* stat band on light background */
.stat--light { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.stat--light .stat__num { color: var(--color-primary); }
.stat--light .stat__label { color: var(--color-muted); }
.stat--light .stat__icon { background: var(--color-primary-soft); }

/* --------------------------------------------------------------------------
   15. COMPARISON TABLE
   -------------------------------------------------------------------------- */
.compare {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.compare table { width: 100%; border-collapse: collapse; min-width: 540px; }
.compare caption { text-align: left; padding: 0 0 var(--space-4); color: var(--color-muted); font-size: var(--fs-sm); }
.compare th, .compare td {
  text-align: left;
  padding: clamp(0.9rem, 2vw, 1.15rem) clamp(1rem, 2.5vw, 1.4rem);
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: top;
  font-size: var(--fs-sm);
}
.compare thead th {
  background: var(--color-primary-soft);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-primary-tint);
}
.compare thead th:first-child { background: var(--color-surface-alt); }
.compare tbody th[scope="row"] {
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  background: var(--color-bg);
  width: 30%;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
}
.compare__tag svg { width: 18px; height: 18px; }
.compare__tag--yes svg  { color: var(--color-success); }
.compare__tag--info svg { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   16. FAQ  (details / summary)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--space-3); }
.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--color-primary-tint); box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: clamp(1.1rem, 2.4vw, 1.4rem) clamp(1.2rem, 3vw, 1.6rem);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--color-heading);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-primary); }
.faq__icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), background var(--transition);
}
.faq__icon svg { width: 17px; height: 17px; }
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--color-primary); color: #fff; }
.faq__a {
  padding: 0 clamp(1.2rem, 3vw, 1.6rem) clamp(1.2rem, 2.6vw, 1.5rem);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.faq__a p + p { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   17. CTA PANEL
   -------------------------------------------------------------------------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-darker);
  color: var(--color-on-dark);
  border-radius: var(--radius-2xl);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background-image:
    radial-gradient(50% 80% at 100% 0%, rgba(72,202,228,0.16), transparent 60%),
    radial-gradient(60% 90% at 0% 100%, rgba(194,97,61,0.22), transparent 60%);
}
.cta-panel h2 { color: #fff; font-size: var(--fs-3xl); max-width: 18ch; }
.cta-panel p  { color: var(--color-on-dark-muted); margin-top: var(--space-4); max-width: 52ch; }
.cta-panel .btn-group { margin-top: clamp(1.5rem, 3vw, 2rem); }
.cta-panel__blob {
  position: absolute;
  inset: auto -60px -80px auto;
  width: 280px; height: 280px;
  border-radius: 47% 53% 60% 40% / 50% 45% 55% 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}

/* light accent CTA strip */
.cta-strip {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-tint);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 760px) { .cta-strip { grid-template-columns: 1fr auto; } }
.cta-strip h3 { font-size: var(--fs-xl); }
.cta-strip p  { color: var(--color-muted); margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   18. FORMS
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-md);
}
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.form__group { display: grid; gap: var(--space-2); }
.form__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--color-heading);
}
.form__req { color: var(--color-error); font-weight: var(--fw-bold); }
.form__optional { color: var(--color-faint); font-weight: var(--fw-regular); font-size: var(--fs-xs); }

.form__control {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form__control::placeholder { color: var(--color-faint); }
.form__control:hover { border-color: var(--color-primary-tint); }
.form__control:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px rgba(47,110,91,0.16);
}
textarea.form__control { min-height: 132px; resize: vertical; line-height: var(--lh-base); }
select.form__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2356615b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}
.form__hint { font-size: var(--fs-xs); color: var(--color-faint); }

/* file upload placeholder */
.form__file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.form__file:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.form__file svg { width: 22px; height: 22px; color: var(--color-primary); }
.form__file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.form__consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--color-muted); }
.form__consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--color-primary); flex-shrink: 0; }

fieldset { border: 0; padding: 0; }
fieldset legend {
  font-family: var(--font-heading);
  font-weight: var(--fw-extra);
  font-size: var(--fs-md);
  color: var(--color-heading);
  padding: 0;
  margin-bottom: var(--space-2);
}
.fieldset-note { color: var(--color-muted); font-size: var(--fs-sm); margin-bottom: var(--space-5); }

/* --------------------------------------------------------------------------
   19. MEDIA  (images with soft fallback + organic frames)
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 120% at 75% 15%, var(--color-accent-soft), transparent 55%),
    linear-gradient(150deg, var(--color-primary-tint), var(--color-primary-soft) 55%, var(--color-accent-soft));
  box-shadow: var(--shadow-md);
}
/* Decorative organic fallback that shows only if a photo fails to load */
.media__art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* color:transparent hides the raw alt text on a broken image while the alt
   attribute stays available to screen readers; the soft panel reads as intentional */
.media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; }
.media--blob, .media--blob-2 { border-radius: var(--radius-xl); }
.media--ratio-4-3 { aspect-ratio: 4 / 3; }
.media--ratio-1-1 { aspect-ratio: 1 / 1; }
.media--ratio-3-4 { aspect-ratio: 3 / 4; }
.media--ratio-16-10 { aspect-ratio: 16 / 10; }

/* floating card over media */
.media-float {
  position: absolute;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 270px;
}
.media-float strong { display: block; font-size: var(--fs-sm); color: var(--color-heading); white-space: nowrap; }
.media-float span { display: block; font-size: var(--fs-xs); color: var(--color-muted); text-wrap: pretty; }
.media-float--bl { left: clamp(-0.5rem, 2vw, 1rem); bottom: clamp(0.75rem, 3vw, 1.5rem); }
.media-float--tr { right: clamp(-0.5rem, 2vw, 1rem); top: clamp(0.75rem, 3vw, 1.5rem); }

/* decorative organic blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
}
.blob--sage  { background: var(--color-primary-tint); }
.blob--clay  { background: var(--color-accent-tint); }
.blob--sand  { background: var(--color-sand); }

/* --------------------------------------------------------------------------
   20. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 85% 12%, var(--color-accent-soft), transparent 55%),
    radial-gradient(70% 80% at 8% 90%, var(--color-primary-soft), transparent 55%),
    var(--color-bg);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
}
.hero__inner { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: center; position: relative; z-index: 1; }
@media (min-width: 920px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; } }

.hero__title { font-size: var(--fs-4xl); letter-spacing: -0.03em; margin-bottom: var(--space-5); }
.hero__title .accent { color: var(--color-primary); position: relative; white-space: nowrap; }
.hero__text { font-size: var(--fs-lg); color: var(--color-muted); max-width: 54ch; margin-bottom: var(--space-6); line-height: 1.5; }
.hero__actions { margin-bottom: var(--space-6); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
.hero__trust-item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-muted); }
.hero__trust-item svg { width: 19px; height: 19px; color: var(--color-primary); }

.hero__media { position: relative; }
.hero__media .media { aspect-ratio: 4 / 5; }
.hero__decor {
  position: absolute;
  inset: -6% -6% -6% -6%;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   21. PAGE HERO  (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(55% 80% at 90% 0%, var(--color-primary-soft), transparent 60%),
    radial-gradient(50% 90% at 0% 100%, var(--color-accent-soft), transparent 55%),
    var(--color-bg);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.page-hero__title { font-size: var(--fs-3xl); margin-bottom: var(--space-4); }
.page-hero__text  { font-size: var(--fs-lg); color: var(--color-muted); line-height: 1.5; }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--color-faint); margin-bottom: var(--space-5); }
.crumbs a { color: var(--color-muted); font-weight: var(--fw-semibold); }
.crumbs svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   22. SITE HEADER / NAV  (hamburger disclosure on mobile, no JS required)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,246,240,0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: transform 0.3s ease;
}
/* Mobile only: header (and the open mobile menu, which hangs off it) slides
   out of view on scroll-down, and back in on scroll-up — see script.js. */
.site-header--hidden { transform: translateY(-100%); }
@media (min-width: 960px) {
  .site-header--hidden { transform: none; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.brand__mark { width: 44px; height: 44px; flex-shrink: 0; }
.brand__name { font-family: var(--font-heading); font-weight: var(--fw-extra); font-size: 1.18rem; color: var(--color-heading); line-height: 1.05; letter-spacing: -0.02em; }
.brand__sub  { display: block; font-size: 0.7rem; font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary); margin-top: 2px; }

/* Hamburger toggle — a plain checkbox + label, toggled via the :checked
   sibling selector below. Kept as a checkbox rather than <details> because
   closed <details> content collapses to zero width internally in modern
   browsers in a way author CSS cannot override, which breaks "always show
   the menu on desktop". The checkbox stays keyboard-focusable (hidden with
   .sr-only, not display:none) and needs zero JavaScript to open or close;
   script.js only adds an auto-close-on-link-click convenience on top. */
.nav-toggle-input:checked ~ .nav-toggle .nav-toggle__icon--open  { display: none; }
.nav-toggle-input:checked ~ .nav-toggle .nav-toggle__icon--close { display: block; }
.nav-toggle-input:focus-visible ~ .nav-toggle { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  color: var(--color-heading);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.nav-toggle:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.nav-toggle__icon { width: 24px; height: 24px; }
.nav-toggle__icon--close { display: none; }

/* Mobile dropdown panel */
.nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--gutter) var(--space-5);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.nav-toggle-input:checked ~ .nav { display: block; }
.nav__list { flex-direction: column; align-items: stretch; gap: var(--space-1); }
.nav__link { width: 100%; padding: var(--space-4); font-size: var(--fs-base); }
.header-cta { margin-top: var(--space-4); }
.header-cta .btn { width: 100%; min-height: 48px; padding: 0.85rem 1.2rem; }

.nav__list { display: flex; gap: var(--space-1); }
.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--color-muted);
  transition: color var(--transition), background var(--transition);
}
.nav__link:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.nav__link.is-active { color: var(--color-primary-darker); background: var(--color-primary-tint); }

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav {
    display: flex !important;
    position: static;
    align-items: center;
    gap: var(--space-6);
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-height: none;
    overflow: visible;
    margin-inline: auto;
  }
  .nav__list { flex-direction: row; align-items: center; }
  .nav__link { width: auto; padding: 0.55rem 0.9rem; font-size: var(--fs-sm); }
  .header-cta { margin-top: 0; }
  .header-cta .btn { width: auto; min-height: 44px; padding: 0.6rem 1.2rem; }
}

/* --------------------------------------------------------------------------
   23. SITE FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--color-primary-darker); color: var(--color-on-dark-muted); padding-top: clamp(3rem, 6vw, 4.5rem); }
.site-footer a { color: var(--color-on-dark-muted); }
.site-footer a:hover { color: #fff; }
.site-footer__top {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 720px) { .site-footer__top { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 980px) { .site-footer__top { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }

.footer-brand .brand__name { color: #fff; }
.footer-brand p { color: var(--color-on-dark-muted); margin-top: var(--space-4); max-width: 34ch; font-size: var(--fs-sm); }
.footer-brand .brand { margin-bottom: var(--space-2); }

.footer-col__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-4);
}
.footer-links { display: grid; gap: var(--space-3); }
.footer-links a { font-size: var(--fs-sm); }
.footer-contact { display: grid; gap: var(--space-3); font-size: var(--fs-sm); }
.footer-contact .row { display: flex; gap: var(--space-3); align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; color: var(--color-accent); margin-top: 2px; flex-shrink: 0; }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* --------------------------------------------------------------------------
   24. UTILITIES
   -------------------------------------------------------------------------- */
.u-center { text-align: center; }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mt-9 { margin-top: var(--space-9); }
.u-mb-0 { margin-bottom: 0; }
.u-maxw-prose { max-width: 62ch; }
.u-flow > * + * { margin-top: var(--space-4); }
.u-relative { position: relative; }
.divider { height: 1px; background: var(--color-border); border: 0; margin-block: 0; }

/* --------------------------------------------------------------------------
   25. LEGAL / POLICY PAGES
   -------------------------------------------------------------------------- */
.legal-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .legal-layout { grid-template-columns: 260px minmax(0,1fr); } }

.toc-desktop { display: none; }
@media (min-width: 960px) {
  .toc-desktop {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    max-height: calc(100vh - var(--header-h) - var(--space-8));
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
  }
}
.toc-desktop h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); margin-bottom: var(--space-4); font-weight: var(--fw-bold); }
.toc-desktop ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.toc-desktop a { font-size: var(--fs-sm); color: var(--color-text); line-height: 1.4; display: block; }
.toc-desktop a:hover { color: var(--color-primary); }

.toc-mobile { display: block; margin-bottom: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
@media (min-width: 960px) { .toc-mobile { display: none; } }
.toc-mobile summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--color-heading); list-style: none; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile[open] summary { border-bottom: 1px solid var(--color-border-soft); }
.toc-mobile ol { list-style: none; margin: 0; padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); }
.toc-mobile a { font-size: var(--fs-sm); }

.legal-content { max-width: var(--container-narrow); }
.legal-content section:first-of-type h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-content h2 {
  font-size: var(--fs-xl);
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.legal-content h3 { font-size: var(--fs-md); margin-top: var(--space-6); margin-bottom: var(--space-2); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.legal-content p { margin-top: var(--space-4); color: var(--color-text); }
.legal-content ul { margin-top: var(--space-3); display: grid; gap: var(--space-2); padding-left: 1.3rem; list-style: disc; }
.legal-content li { color: var(--color-text); padding-left: var(--space-1); }
.legal-content li::marker { color: var(--color-primary); }
.legal-content strong { color: var(--color-heading); }

.legal-meta { color: var(--color-muted); font-size: var(--fs-sm); margin-top: var(--space-3); }

.legal-backtotop { display: inline-flex; margin-top: var(--space-5); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-muted); }
.legal-backtotop:hover { color: var(--color-primary); }

.org-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-xs); margin-top: var(--space-4); }
.org-card h3 { margin-top: 0 !important; font-size: var(--fs-base); margin-bottom: var(--space-2) !important; }
.org-card p { margin-top: var(--space-2); font-size: var(--fs-sm); }
.org-card p:first-of-type { margin-top: 0; }

.contact-panel { background: var(--color-primary-soft); border: 1px solid var(--color-primary-tint); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.25rem); margin-top: var(--space-4); }
.contact-panel address { font-style: normal; line-height: 1.7; }
.contact-panel address a { font-weight: var(--fw-semibold); }
.contact-panel p { font-size: var(--fs-sm); }

@media print {
  .site-header, .site-footer, .toc-desktop, .toc-mobile, .legal-backtotop, .skip-link, .crumbs { display: none !important; }
  body { background: #fff; }
  .page-hero { background: none; padding: 0 0 1rem; }
  .legal-layout { display: block; }
  .legal-content { max-width: 100%; }
  .legal-content h2 { border-top: 0; break-after: avoid; }
  .legal-content h2, .legal-content h3 { break-after: avoid; }
  .org-card, .contact-panel { break-inside: avoid; }
  a { color: inherit !important; text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   26. FORM CHOICE GROUPS  (radio / checkbox pill options)
   -------------------------------------------------------------------------- */
.choice-group { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 1.1rem;
  min-height: 44px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.choice:hover { border-color: var(--color-primary); }
.choice input { width: 20px; height: 20px; accent-color: var(--color-primary); margin: 0; flex-shrink: 0; }
.choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-heading); }

/* --------------------------------------------------------------------------
   27. MOTION / GSAP SCROLL-REVEAL HOOKS
   --------------------------------------------------------------------------
   Elements are only pre-hidden when JS is available (the .js-anim class is
   added synchronously in <head>, before first paint). With JS disabled, or
   if GSAP fails to load, script.js reveals everything instantly — content
   is never dependent on animation to become visible.
   -------------------------------------------------------------------------- */
.js-anim [data-animate="fade-up"],
.js-anim [data-animate="hero-media"],
.js-anim [data-animate="image-reveal"] {
  opacity: 0;
}
.js-anim [data-animate="stagger"] > *,
.js-anim [data-animate="hero"] > * {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-animate="fade-up"],
  .js-anim [data-animate="hero-media"],
  .js-anim [data-animate="image-reveal"],
  .js-anim [data-animate="stagger"] > *,
  .js-anim [data-animate="hero"] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}