/* =============================================================================
   VF PSYCHOLOGY — stylesheet
   -----------------------------------------------------------------------------
   Layer order is declared once, here. Anything you add later lands in the
   right place regardless of where you write it in the file.

     1. tokens      — every colour, size, space, radius, shadow. Edit here.
     2. reset       — normalise browser defaults
     3. base        — typography, links, lists, media
     4. layout      — container, section rhythm, grid helpers
     5. components  — .btn .card .nav .accordion .form .testimonial …
     6. utilities   — single-purpose overrides, last word

   RULES THIS FILE KEEPS:
     · Zero hex values outside @layer tokens.
     · Zero px values outside @layer tokens, with two unavoidable exceptions:
       the 1px clip rectangle in .u-visually-hidden, and the media query
       breakpoints — custom properties are not allowed in media conditions.
     · BEM class names. No inline styles. No !important.
     · Mobile-first: base styles are for 375px, min-width queries layer up
       at 400 (logo wordmark) / 640 / 900 (nav becomes horizontal) / 1200.
   ========================================================================== */

@layer tokens, reset, base, layout, components, utilities;

/* =============================================================================
   1. TOKENS
   -----------------------------------------------------------------------------
   This is the only block you need to touch to restyle the whole site.
   See README.md for a walkthrough.
   ========================================================================== */

@layer tokens {
  :root {
    /* ---- COLOUR: warm neutral base ---------------------------------- */
    --c-sand-50:   #FDFBF8;  /* page background                          */
    --c-sand-100:  #F7F2EA;  /* alternating section band                 */
    --c-sand-200:  #EFE7DA;  /* card background                          */
    --c-sand-300:  #E2D6C4;  /* borders, dividers                        */
    --c-sand-400:  #C4B49C;  /* muted rules, disabled states             */

    --c-ink-900:   #1E1B17;  /* headings           19.1:1 on sand-50     */
    --c-ink-700:   #3A342C;  /* body text          11.2:1 on sand-50     */
    --c-ink-500:   #5F564A;  /* secondary text      6.4:1 on sand-50     */
    --c-ink-300:   #857A6B;  /* NON-TEXT ONLY — 4.0:1, rules and icons   */

    /* ---- COLOUR: accent (deep sage) --------------------------------- */
    --c-accent-700: #2E4639; /* hover / pressed                          */
    --c-accent-600: #3B5A49; /* primary buttons     8.1:1 vs white       */
    --c-accent-500: #4E7360; /* icons, rules                             */
    --c-accent-100: #DCE6DF; /* accent tint background                   */

    /* TERRACOTTA SWAP — comment out the four sage values above and
       uncomment these four. Nothing else in the file needs to change.
    --c-accent-700: #7A3520;
    --c-accent-600: #8F4127;
    --c-accent-500: #A85433;
    --c-accent-100: #F2E0D6;
    */

    /* ---- COLOUR: pastel accents ------------------------------------
       A small, deliberate palette used in rotation for icon chips, card
       tints, step numbers and avatars. Each background carries its own
       readable ink (7:1+). Use the pairs together, never mix them.      */
    --c-pastel-mango:      #FBE3C9;  --c-pastel-mango-ink:  #7A4412;
    --c-pastel-purple:     #EDE7F2;  --c-pastel-purple-ink: #4A3D5C;
    --c-pastel-green:      #DCE6DF;  --c-pastel-green-ink:  #2E4639;
    --c-pastel-yellow:     #F7EFC7;  --c-pastel-yellow-ink: #63550F;
    --c-pastel-blue:       #DCE8F0;  --c-pastel-blue-ink:   #2F4B60;

    --c-focus:     #B25C1E;  /* focus ring — deliberately off-accent so it
                                stays visible on top of accent surfaces    */

    /* ---- SEMANTIC ALIASES — use THESE in components, not the raw
           colour ramp above. Retheming means repointing these.           */
    --bg-page:        var(--c-sand-50);
    --bg-alt:         var(--c-sand-100);
    --bg-card:        var(--c-sand-200);
    --bg-invert:      var(--c-ink-900);
    --text-heading:   var(--c-ink-900);
    --text-body:      var(--c-ink-700);
    --text-muted:     var(--c-ink-500);
    --text-on-accent: #FFFFFF;
    --text-on-invert: var(--c-sand-100);
    --border-subtle:  var(--c-sand-300);
    --link:           var(--c-accent-700);

    /* ---- TYPEFACES --------------------------------------------------- */
    /* Fraunces and Inter are loaded from assets/fonts/ via @font-face in
       the base layer. Until those .woff2 files are dropped in, the stack
       falls through to good system faces and the site still looks right. */
    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype",
                    Georgia, "Times New Roman", serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;

    /* ---- FLUID TYPE SCALE (1.200 at 375px → 1.250 at 1200px) --------- */
    --fs-xs:   clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
    --fs-sm:   clamp(0.938rem, 0.91rem + 0.14vw, 1.000rem);
    --fs-base: clamp(1.063rem, 1.02rem + 0.21vw, 1.125rem);  /* 17 → 18px */
    --fs-md:   clamp(1.188rem, 1.12rem + 0.32vw, 1.313rem);
    --fs-lg:   clamp(1.375rem, 1.26rem + 0.55vw, 1.688rem);
    --fs-xl:   clamp(1.625rem, 1.42rem + 0.98vw, 2.250rem);
    --fs-2xl:  clamp(1.938rem, 1.58rem + 1.71vw, 3.000rem);
    --fs-3xl:  clamp(2.250rem, 1.68rem + 2.73vw, 3.938rem);  /* h1        */

    --lh-tight: 1.15;   /* display headings  */
    --lh-snug:  1.30;   /* sub-headings      */
    --lh-body:  1.65;   /* body copy         */
    --lh-loose: 1.75;   /* long-form prose   */

    --ls-tight:  -0.02em;
    --ls-normal: 0;
    --ls-wide:   0.06em;   /* eyebrow labels */

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;

    --measure:       68ch;
    --measure-short: 46ch;

    /* ---- SPACING — 4px base, ratio ≈1.5 ------------------------------ */
    --sp-3xs: 0.25rem;   /*   4px */
    --sp-2xs: 0.5rem;    /*   8px */
    --sp-xs:  0.75rem;   /*  12px */
    --sp-sm:  1rem;      /*  16px */
    --sp-md:  1.5rem;    /*  24px */
    --sp-lg:  2.25rem;   /*  36px */
    --sp-xl:  3.5rem;    /*  56px */
    --sp-2xl: 5rem;      /*  80px */
    --sp-3xl: 7.5rem;    /* 120px */

    --section-y: clamp(3.5rem, 2.4rem + 4.7vw, 7rem);
    --gutter:    clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);
    --container:        72rem;   /* 1152px */
    --container-narrow: 44rem;   /*  704px */

    /* ---- RADII ------------------------------------------------------- */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   22px;
    --r-pill: 999px;

    /* ---- SHADOWS — warm-tinted, never neutral grey ------------------- */
    --sh-xs: 0 1px 2px rgba(30, 27, 23, 0.05);
    --sh-sm: 0 2px 6px rgba(30, 27, 23, 0.06);
    --sh-md: 0 6px 18px -4px rgba(30, 27, 23, 0.10);
    --sh-lg: 0 18px 40px -12px rgba(30, 27, 23, 0.16);

    /* ---- BORDERS, MOTION, LAYERING ----------------------------------- */
    --bw-hair:  1px;
    --bw-thick: 2px;
    --ring:        3px solid var(--c-focus);
    --ring-offset: 2px;

    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 300ms;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* ---- TAP TARGETS -------------------------------------------------
       WCAG floor for anything you press. Don't lower these.            */
    --tap-min:     48px;
    --tap-min-alt: 44px;   /* dense inline lists, e.g. footer links     */

    --z-header:    100;
    --z-nav-panel: 200;

    /* Header height, read by JS-free scroll-padding and the mobile panel */
    --header-h: 4.5rem;

    /* Reserved height for the Calendly embed on contact.html */
    --booking-h: 43.75rem;   /* 700px — Calendly's default inline height */

    /* Height of the brain mark in the header/footer logo */
    --logo-mark-h: 2.5rem;   /* 40px */
  }

  /* Motion off means motion off — durations collapse to zero everywhere. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 0ms;
      --dur-base: 0ms;
      --dur-slow: 0ms;
    }
  }
}

/* =============================================================================
   2. RESET
   ========================================================================== */

@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--sp-md));
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
  }

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

  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
  }

  img { height: auto; }

  svg { fill: currentColor; }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button { background: none; border: none; }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  /* Skipped links and anchors land below the sticky header, not under it. */
  :target { scroll-margin-top: calc(var(--header-h) + var(--sp-md)); }
}

/* =============================================================================
   3. BASE
   ========================================================================== */

@layer base {
  /* ---- Webfonts ------------------------------------------------------
     Drop the two .woff2 files into assets/fonts/ and these activate.
     Both are variable fonts, so one file covers the whole weight range.
     Missing files are harmless: the stacks in --font-display / --font-body
     fall through to system faces. See README.md § Fonts.               */

  @font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-variable.woff2") format("woff2-variations");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                   U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
  }

  @font-face {
    font-family: "Inter";
    src: url("../fonts/inter-variable.woff2") format("woff2-variations");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                   U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
  }

  body {
    background-color: var(--bg-page);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Belt and braces against horizontal scroll at any viewport. */
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    color: var(--text-heading);
    font-family: var(--font-display);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-tight);
    text-wrap: balance;
  }

  h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
  h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
  h3 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }
  h4 { font-size: var(--fs-md);  line-height: var(--lh-snug); }

  p { text-wrap: pretty; }

  p + p { margin-top: var(--sp-sm); }

  a {
    color: var(--link);
    text-decoration-thickness: var(--bw-hair);
    text-underline-offset: 0.18em;
    transition: color var(--dur-fast) var(--ease-out);
  }

  a:hover { color: var(--c-accent-500); }

  /* One focus treatment, applied once, inherited everywhere. */
  :focus-visible {
    outline: var(--ring);
    outline-offset: var(--ring-offset);
    border-radius: var(--r-xs);
  }

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

  hr {
    border: 0;
    border-top: var(--bw-hair) solid var(--border-subtle);
    margin-block: var(--sp-xl);
  }

  ::selection {
    background-color: var(--c-accent-100);
    color: var(--c-accent-700);
  }
}

/* =============================================================================
   4. LAYOUT
   ========================================================================== */

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow { max-width: var(--container-narrow); }

  /* The section is the unit of the page. Every band on every page is one.
     Reordering sections in the HTML never breaks spacing, because the
     rhythm lives here and not on the components inside.                 */
  .section {
    padding-block: var(--section-y);
  }

  .section--alt   { background-color: var(--bg-alt); }
  .section--tint  { background-color: var(--c-accent-100); }
  .section--invert {
    background-color: var(--bg-invert);
    color: var(--text-on-invert);
  }

  .section--invert h1,
  .section--invert h2,
  .section--invert h3 { color: var(--bg-page); }

  .section__head {
    max-width: var(--measure);
    margin-bottom: var(--sp-lg);
  }

  .section__head--center {
    margin-inline: auto;
    text-align: center;
  }

  .section__eyebrow {
    display: block;
    margin-bottom: var(--sp-xs);
    color: var(--c-accent-600);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
  }

  .section--invert .section__eyebrow { color: var(--c-sand-400); }

  .section__lede {
    max-width: var(--measure);
    margin-top: var(--sp-sm);
    font-size: var(--fs-md);
    color: var(--text-muted);
    line-height: var(--lh-loose);
  }

  .section--invert .section__lede { color: var(--c-sand-300); }

  /* Prose blocks — long-form pages (about, privacy) lean on this. */
  .prose { max-width: var(--measure); }
  .prose > * + * { margin-top: var(--sp-md); }
  .prose h2 { margin-top: var(--sp-xl); }
  .prose > h2:first-child { margin-top: 0; }
  .prose h3 { margin-top: var(--sp-lg); }
  .prose ul { padding-left: var(--sp-md); }
  .prose li + li { margin-top: var(--sp-2xs); }

  /* Auto-fitting grid. --grid-min sets the breakpoint per instance, so a
     single class covers 2-up, 3-up and 4-up without extra modifiers.    */
  .grid {
    display: grid;
    gap: var(--sp-md);
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--grid-min, 16rem), 100%), 1fr)
    );
  }

  .grid--wide { gap: var(--sp-lg); }

  /* Two-column split that stacks on mobile. Used by hero and about preview. */
  .split {
    display: grid;
    gap: var(--sp-lg);
  }

  @media (min-width: 900px) {
    .split {
      grid-template-columns: var(--split-cols, 1fr 1fr);
      gap: var(--sp-2xl);
      align-items: center;
    }
  }

  /* Narrow image column beside a long text column. The image stays at the
     top of a tall block instead of floating in its vertical middle. */
  .split--aside { --split-cols: 0.8fr 1.2fr; }
  @media (max-width: 899px) { .split--aside { gap: var(--sp-sm); } }

  @media (min-width: 900px) {
    .split--aside { align-items: start; }
    .split--aside > :first-child {
      position: sticky;
      top: calc(var(--header-h) + var(--sp-md));
    }
  }

  .stack > * + * { margin-top: var(--stack-gap, var(--sp-sm)); }
}

/* =============================================================================
   5. COMPONENTS
   ========================================================================== */

@layer components {

  /* ---------------------------------------------------------------------
     SKIP LINK
     ------------------------------------------------------------------ */
  .skip-link {
    position: absolute;
    left: var(--sp-sm);
    top: var(--sp-sm);
    z-index: calc(var(--z-nav-panel) + 1);
    padding: var(--sp-xs) var(--sp-sm);
    background-color: var(--c-accent-600);
    color: var(--text-on-accent);
    border-radius: var(--r-sm);
    text-decoration: none;
    transform: translateY(-200%);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
    color: var(--text-on-accent);
  }

  /* ---------------------------------------------------------------------
     BUTTON
     ------------------------------------------------------------------ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2xs);
    min-height: var(--tap-min);                        /* tap target floor */
    padding: var(--sp-xs) var(--sp-md);
    border: var(--bw-thick) solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    line-height: var(--lh-snug);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color     var(--dur-fast) var(--ease-out),
      color            var(--dur-fast) var(--ease-out),
      transform        var(--dur-fast) var(--ease-out);
  }

  .btn:active { transform: translateY(1px); }

  .btn--primary {
    background-color: var(--c-accent-600);
    border-color: var(--c-accent-600);
    color: var(--text-on-accent);
  }

  .btn--primary:hover {
    background-color: var(--c-accent-700);
    border-color: var(--c-accent-700);
    color: var(--text-on-accent);
  }

  .btn--secondary {
    background-color: transparent;
    border-color: var(--c-accent-600);
    color: var(--c-accent-700);
  }

  .btn--secondary:hover {
    background-color: var(--c-accent-100);
    color: var(--c-accent-700);
  }

  .btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-body);
    padding-inline: var(--sp-2xs);
  }

  .btn--ghost:hover { color: var(--c-accent-700); }

  /* On dark bands the primary inverts to sand so it still leads. */
  .section--invert .btn--primary {
    background-color: var(--c-sand-50);
    border-color: var(--c-sand-50);
    color: var(--c-ink-900);
  }

  .section--invert .btn--primary:hover {
    background-color: var(--c-sand-200);
    border-color: var(--c-sand-200);
  }

  .section--invert .btn--secondary {
    border-color: var(--c-sand-400);
    color: var(--c-sand-100);
  }

  .section--invert .btn--secondary:hover {
    background-color: rgba(253, 251, 248, 0.08);
    color: var(--bg-page);
  }

  .btn--full { width: 100%; }

  .btn__icon { width: 1em; height: 1em; flex: none; }

  /* Button rows wrap instead of overflowing on narrow screens. */
  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
  }

  .btn-row--center { justify-content: center; }

  /* ---------------------------------------------------------------------
     HEADER + NAV
     ------------------------------------------------------------------ */
  .header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--bg-page);
    border-bottom: var(--bw-hair) solid transparent;
    transition:
      border-color var(--dur-base) var(--ease-out),
      box-shadow   var(--dur-base) var(--ease-out);
  }

  /* .is-stuck is toggled by main.js once the page scrolls past the header. */
  .header.is-stuck {
    border-bottom-color: var(--border-subtle);
    box-shadow: var(--sh-sm);
  }

  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    min-height: var(--header-h);
  }

  /* Logo = brain mark (assets/img/logo-mark.svg, from the delivered logo)
     + a thin divider + the wordmark as real text, so it stays crisp and
     picks up the site's own type and colours. */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--text-heading);
    letter-spacing: var(--ls-tight);
    text-decoration: none;
  }

  .logo__brain {
    display: block;
    width: auto;
    height: var(--logo-mark-h);
    flex: none;
  }

  .logo__text {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-3xs);
    padding-left: var(--sp-xs);
    border-left: var(--bw-hair) solid var(--c-sand-400);
    line-height: 1;
  }

  .logo__mark { color: var(--c-accent-600); }

  /* Hidden below ~400px: there the logo, the CTA and the menu button fight
     for one row and start eating the gutter. "VF" carries the identity
     well enough on a screen that small. */
  .logo__sub {
    display: none;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  @media (min-width: 400px) {
    .logo__sub { display: inline; }
  }

  .nav { display: flex; align-items: center; gap: var(--sp-sm); }

  /* Mobile: the link list is a panel toggled by .nav__toggle.
     Desktop (900px+): it becomes an inline row and the toggle disappears. */
  .nav__list {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav__list.is-open {
    display: flex;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: var(--z-nav-panel);
    flex-direction: column;
    gap: var(--sp-3xs);
    padding: var(--sp-sm) var(--gutter) var(--sp-md);
    background-color: var(--bg-page);
    border-bottom: var(--bw-hair) solid var(--border-subtle);
    box-shadow: var(--sh-md);
  }

  .nav__link {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--text-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
  }

  .nav__link {
    padding-inline: var(--sp-2xs);
    border-radius: var(--r-sm);
  }

  .nav__link:hover {
    color: var(--c-accent-700);
    background-color: var(--c-accent-100);
  }

  .nav__link[aria-current="page"] {
    color: var(--c-accent-700);
    font-weight: var(--fw-semi);
    background-color: var(--c-accent-100);
  }

  /* Services dropdown. Mobile: the sub-list sits inline in the open panel,
     indented, toggled by the caret button. Desktop: a floating panel under
     the Services item, opened by hover, keyboard focus, or the caret. */
  .nav__item--sub { display: flex; flex-wrap: wrap; align-items: center; }

  .nav__sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: var(--r-sm);
    color: var(--text-heading);
    cursor: pointer;
  }

  .nav__sub-toggle svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .nav__sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .nav__sub {
    display: none;
    flex-basis: 100%;
    margin: 0;
    padding: 0 0 0 var(--sp-sm);
    list-style: none;
  }

  .nav__item--sub.is-open .nav__sub { display: block; }

  .nav__sub-link {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    padding-inline: var(--sp-2xs);
    border-radius: var(--r-sm);
    color: var(--text-body);
    font-size: var(--fs-sm);
    text-decoration: none;
  }

  .nav__sub-link:hover {
    color: var(--c-accent-700);
    background-color: var(--c-accent-100);
  }

  .nav__sub-link[aria-current="page"] {
    color: var(--c-accent-700);
    font-weight: var(--fw-semi);
    background-color: var(--c-accent-100);
  }

  .nav__sub-link--all {
    font-weight: var(--fw-medium);
    color: var(--c-accent-700);
  }


  /* Language switch — one compact link to the same page in the other
     language (EN pages show "ES", Spanish pages show "EN"). */
  .lang-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: var(--tap-min);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-decoration: none;
  }

  .lang-switch:hover { color: var(--c-accent-700); background-color: var(--bg-alt); }

  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: var(--r-sm);
    color: var(--text-heading);
    cursor: pointer;
  }

  .nav__toggle:hover { background-color: var(--bg-alt); }

  .nav__toggle-icon { width: 1.5rem; height: 1.5rem; }

  /* Swap the icon glyphs on open, no JS class juggling needed. */
  .nav__toggle[aria-expanded="true"] .nav__toggle-icon--open,
  .nav__toggle[aria-expanded="false"] .nav__toggle-icon--close { display: none; }

  /* The header CTA is short on mobile so it never crowds the logo, and it
     never wraps to a second line — at 320px that would double the header
     height and push the hero off the first screen. */
  .header__cta {
    white-space: nowrap;
    padding-inline: var(--sp-sm);
  }

  .header__cta-short { display: inline; }
  .header__cta-long  { display: none; }

  @media (min-width: 900px) {
    .nav__list {
      display: flex;
      position: static;
      flex-direction: row;
      align-items: center;
      gap: var(--sp-md);
      padding: 0;
      background: none;
      border: 0;
      box-shadow: none;
    }

    .nav__toggle { display: none; }

    .header__cta-short { display: none; }
    .header__cta-long  { display: inline; }

    .nav__item--sub { position: relative; flex-wrap: nowrap; gap: 0; }

    .nav__sub-toggle { width: 1.5rem; height: var(--tap-min); }

    .nav__sub {
      position: absolute;
      top: 100%;
      left: calc(-1 * var(--sp-sm));
      z-index: var(--z-nav-panel);
      /* Wide enough for the longest item — labels never wrap on desktop. */
      width: max-content;
      min-width: 15rem;
      padding: var(--sp-2xs) var(--sp-sm);
      background-color: var(--bg-page);
      border: var(--bw-hair) solid var(--border-subtle);
      border-radius: var(--r-sm);
      box-shadow: var(--sh-md);
    }

    .nav__item--sub:hover .nav__sub,
    .nav__item--sub:focus-within .nav__sub,
    .nav__item--sub.is-open .nav__sub { display: block; }

    /* Menu labels never wrap — "Sobre mí" on one line, always. */
    .nav__link { white-space: nowrap; }

    .nav__sub-link {
      min-height: 2.25rem;
      white-space: nowrap;
    }

    .nav__sub-link--all {
      margin-top: var(--sp-3xs);
      border-top: var(--bw-hair) solid var(--border-subtle);
      padding-top: var(--sp-3xs);
    }
  }

  /* ---------------------------------------------------------------------
     HERO
     ------------------------------------------------------------------ */
  .hero {
    padding-block: var(--sp-xl) var(--section-y);
    background-color: var(--bg-page);
  }

  @media (min-width: 900px) {
    .hero { padding-block: var(--sp-2xl) var(--section-y); }
    .hero .split { --split-cols: 1.15fr 0.85fr; align-items: center; }
  }

  .hero__title { max-width: 15ch; }

  .hero__subtitle {
    max-width: var(--measure-short);
    margin-top: var(--sp-md);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    color: var(--text-muted);
  }

  .hero__actions { margin-top: var(--sp-lg); }

  .hero__note {
    margin-top: var(--sp-xs);
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }

  .hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2xs) var(--sp-sm);
    margin-top: var(--sp-lg);
    padding-top: var(--sp-md);
    border-top: var(--bw-hair) solid var(--border-subtle);
    list-style: none;
    padding-left: 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }

  .hero__trust li {
    display: flex;
    align-items: center;
    gap: var(--sp-3xs);
  }

  .hero__trust svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--c-accent-500);
  }

  /* Portrait sits in a soft frame, offset slightly — asymmetry without
     resorting to a full-bleed image with text dumped on top.           */
  .hero__figure {
    position: relative;
    margin: 0;
  }

  .hero__portrait {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
  }

  /* Mobile: the portrait must be inside the first screen, like on desktop
     where it sits beside the headline. The figure is a sibling of the
     content block, so the content wrapper is flattened (display: contents)
     and everything is reordered on the hero grid: title first, portrait
     directly under it in a shorter landscape crop, then the rest. */
  @media (max-width: 899.98px) {
    .hero .split { gap: 0; }
    .hero__content { display: contents; }

    .hero .section__eyebrow { order: 1; }
    .hero__title            { order: 2; }
    .hero__figure           { order: 3; margin-block: var(--sp-md) var(--sp-2xs); }
    /* Credentials right under the portrait, so face and qualifications
       read as one unit — the subtitle and CTAs follow. */
    .hero__trust            { order: 4; margin-top: var(--sp-xs); padding-top: 0; border-top: 0; }
    .hero__subtitle         { order: 5; }
    .hero__actions          { order: 6; }
    .hero__note             { order: 7; }

    .hero__portrait {
      aspect-ratio: 3 / 2;
      /* The source is a 4:5 portrait; keep the face in this landscape crop. */
      object-position: 50% 32%;
    }
  }

  .hero__caption {
    margin-top: var(--sp-xs);
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }

  /* "Show all questions" button under the trimmed homepage FAQ (added by
     initFaqTrim in main.js — without JS the full list is simply shown). */
  .accordion__more { margin-top: var(--sp-md); }

  /* The FAQ band is pastel green, and the items are the SAME colour as
     the band (no boxes) — only hairline separators mark the rows. The
     default sage trigger/icon colours already match. */
  .section--faq { background-color: var(--c-pastel-green); }

  .section--faq .accordion__item {
    background-color: transparent;
    border-color: #BCCDC2;
  }

  /* ---------------------------------------------------------------------
     RECOGNITION ("Does this sound familiar?")
     ------------------------------------------------------------------ */
  /* Soft lilac band — same hue as the purple testimonial avatar. It
     overrides the default .section--alt sand background on this section. */
  .section--recognition {
    background-color: var(--c-pastel-purple);
  }

  .section--recognition .recognition__item {
    border-color: #D8CCE4;
  }

  /* Each question card gets its own pastel accent edge. */
  .recognition__item:nth-child(4n + 1) { border-left-color: #B98A4E; }
  .recognition__item:nth-child(4n + 2) { border-left-color: #7A6693; }
  .recognition__item:nth-child(4n + 3) { border-left-color: #B3A146; }
  .recognition__item:nth-child(4n + 4) { border-left-color: #6E93AD; }

  .recognition__list {
    display: grid;
    gap: var(--sp-sm);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 640px) {
    .recognition__list { grid-template-columns: repeat(2, 1fr); }
  }

  .recognition__item {
    padding: var(--sp-md);
    background-color: var(--bg-page);
    border: var(--bw-hair) solid var(--border-subtle);
    border-left: var(--bw-thick) solid var(--c-accent-500);
    border-radius: var(--r-md);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    color: var(--text-heading);
  }

  .recognition__closer {
    max-width: var(--measure);
    margin-top: var(--sp-lg);
    font-size: var(--fs-md);
    color: var(--text-muted);
  }

  /* ---------------------------------------------------------------------
     CARD — pillars, audiences, services
     ------------------------------------------------------------------ */
  .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--sp-md);
    background-color: var(--bg-page);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
  }

  .card--filled { background-color: var(--bg-card); border-color: transparent; }

  /* Pastel rotation. Any grid of cards cycles mango → purple → green →
     yellow → blue on its icon chips; filled cards also tint their surface.
     Position-based on purpose: add or reorder cards and it keeps working. */
  .grid > .card:nth-child(5n + 1) .card__icon { background-color: var(--c-pastel-mango);  color: var(--c-pastel-mango-ink); }
  .grid > .card:nth-child(5n + 2) .card__icon { background-color: var(--c-pastel-purple); color: var(--c-pastel-purple-ink); }
  .grid > .card:nth-child(5n + 3) .card__icon { background-color: var(--c-pastel-green);  color: var(--c-pastel-green-ink); }
  .grid > .card:nth-child(5n + 4) .card__icon { background-color: var(--c-pastel-yellow); color: var(--c-pastel-yellow-ink); }
  .grid > .card:nth-child(5n + 5) .card__icon { background-color: var(--c-pastel-blue);   color: var(--c-pastel-blue-ink); }

  .grid > .card--filled:nth-child(5n + 1) { background-color: var(--c-pastel-mango); }
  .grid > .card--filled:nth-child(5n + 2) { background-color: var(--c-pastel-purple); }
  .grid > .card--filled:nth-child(5n + 3) { background-color: var(--c-pastel-green); }
  .grid > .card--filled:nth-child(5n + 4) { background-color: var(--c-pastel-yellow); }
  .grid > .card--filled:nth-child(5n + 5) { background-color: var(--c-pastel-blue); }

  .grid > .card--filled:nth-child(5n + 1) .card__icon { background-color: rgba(255, 255, 255, 0.55); }
  .grid > .card--filled:nth-child(5n + 2) .card__icon { background-color: rgba(255, 255, 255, 0.55); }
  .grid > .card--filled:nth-child(5n + 3) .card__icon { background-color: rgba(255, 255, 255, 0.55); }
  .grid > .card--filled:nth-child(5n + 4) .card__icon { background-color: rgba(255, 255, 255, 0.55); }
  .grid > .card--filled:nth-child(5n + 5) .card__icon { background-color: rgba(255, 255, 255, 0.55); }

  .card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--sp-sm);
    background-color: var(--c-accent-100);
    border-radius: var(--r-sm);
    color: var(--c-accent-700);
  }

  .card__icon svg { width: 1.5rem; height: 1.5rem; }

  .card__title { margin-bottom: var(--sp-2xs); }

  .card__text { color: var(--text-muted); }

  /* Overview cards on services.html link through to the detail pages. */
  .card__title-link {
    color: inherit;
    text-decoration: none;
  }

  .card__title-link:hover { color: var(--c-accent-700); }

  .card__more {
    font-weight: var(--fw-medium);
    color: var(--c-accent-700);
    text-decoration: none;
  }

  .card__more:hover { text-decoration: underline; }

  /* Long-form copy on the service detail pages — same voice as the cards,
     but on the page background instead of inside a card. */
  .page-copy__text { color: var(--text-muted); }

  .page-copy__list {
    margin-top: var(--sp-sm);
    padding-left: 0;
    list-style: none;
    color: var(--text-muted);
  }

  .page-copy__list li {
    position: relative;
    padding-left: var(--sp-md);
  }

  .page-copy__list li + li { margin-top: var(--sp-3xs); }

  .page-copy__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: var(--sp-2xs);
    height: var(--bw-thick);
    background-color: var(--c-accent-500);
    border-radius: var(--r-pill);
  }

  .card__list {
    margin-top: var(--sp-sm);
    padding-left: 0;
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }

  .card__list li {
    position: relative;
    padding-left: var(--sp-md);
  }

  .card__list li + li { margin-top: var(--sp-3xs); }

  .card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: var(--sp-2xs);
    height: var(--bw-thick);
    background-color: var(--c-accent-500);
    border-radius: var(--r-pill);
  }

  .card__footer { margin-top: auto; padding-top: var(--sp-md); }

  .card__price {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--text-heading);
  }

  .card__price-note {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }

  /* ---------------------------------------------------------------------
     ABOUT PREVIEW
     ------------------------------------------------------------------ */
  .about-preview__figure { margin: 0; }

  .about-preview__portrait {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
  }

  .about-preview__credentials {
    margin: var(--sp-md) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }

  .about-preview__credentials li {
    padding-block: var(--sp-3xs);
    border-top: var(--bw-hair) solid var(--border-subtle);
  }

  /* ---------------------------------------------------------------------
     PROCESS — numbered steps
     ------------------------------------------------------------------ */
  .steps {
    display: grid;
    gap: var(--sp-lg);
    margin: 0;
    padding: 0;
    counter-reset: step;
    list-style: none;
  }

  @media (min-width: 900px) {
    .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
  }

  .steps__item {
    position: relative;
    counter-increment: step;
    padding-left: var(--sp-xl);
  }

  @media (min-width: 900px) {
    .steps__item { padding-left: 0; padding-top: var(--sp-xl); }
  }

  .steps__item::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--c-accent-600);
    border-radius: var(--r-pill);
    color: var(--text-on-accent);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
  }

  /* Step numbers rotate through three pastels instead of flat green. */
  .steps__item:nth-child(3n + 1)::before { background-color: var(--c-pastel-mango); color: var(--c-pastel-mango-ink); }
  .steps__item:nth-child(3n + 2)::before { background-color: var(--c-pastel-blue);  color: var(--c-pastel-blue-ink); }
  .steps__item:nth-child(3n + 3)::before { background-color: var(--c-pastel-green); color: var(--c-pastel-green-ink); }

  .steps__title { margin-bottom: var(--sp-2xs); }

  .steps__text { color: var(--text-muted); }

  .steps__meta {
    display: inline-block;
    margin-top: var(--sp-2xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-accent-600);
  }

  /* ---------------------------------------------------------------------
     TESTIMONIAL
     ------------------------------------------------------------------ */
  /* -------------------------------------------------------------------
     TESTIMONIAL CAROUSEL (testimonials page)
     Scroll-snap does the work; the buttons (wired up in main.js) are a
     convenience on top. Without JS it is simply a swipeable row.
     ------------------------------------------------------------------ */
  .carousel { position: relative; }

  .carousel__track {
    display: flex;
    gap: var(--sp-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-block: var(--sp-3xs) var(--sp-sm);
    -webkit-overflow-scrolling: touch;
  }

  .carousel__track:focus-visible {
    outline: var(--ring);
    outline-offset: var(--ring-offset);
  }

  .carousel__track > .testimonial {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  @media (min-width: 640px) {
    .carousel__track > .testimonial { flex-basis: calc(50% - var(--sp-md) / 2); }
  }

  @media (min-width: 900px) {
    .carousel__track > .testimonial { flex-basis: calc((100% - 2 * var(--sp-md)) / 3); }
  }

  .carousel__btn {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    transform: translateY(-50%);
    border-radius: var(--r-pill);
    background-color: var(--bg-page);
    border: var(--bw-hair) solid var(--border-subtle);
    box-shadow: var(--sh-md);
    color: var(--text-heading);
    cursor: pointer;
  }

  .carousel__btn:hover { background-color: var(--c-accent-100); color: var(--c-accent-700); }

  .carousel__btn svg { width: 1.25rem; height: 1.25rem; }

  .carousel__btn--prev { left: calc(-1 * var(--sp-2xs)); }
  .carousel__btn--next { right: calc(-1 * var(--sp-2xs)); }

  .carousel__btn[disabled] { opacity: 0.35; cursor: default; }
  .carousel__btn[disabled]:hover { background-color: var(--bg-page); color: var(--text-heading); }

  /* Lilac arrows on desktop, placed in the gutter beside the cards; on phones
     the reviews stack vertically instead. */
  .carousel__btn {
    background-color: #C7B3E5;
    color: #2F2146;
    border-color: transparent;
  }
  .carousel__btn:hover { background-color: #A98BD3; color: #FFFFFF; }
  .carousel__btn[disabled]:hover { background-color: #C7B3E5; color: #2F2146; }

  @media (min-width: 640px) {
    .carousel { padding-inline: calc(var(--tap-min) + var(--sp-xs)); }
    .carousel__btn--prev { left: 0; }
    .carousel__btn--next { right: 0; }
  }

  @media (max-width: 639px) {
    .carousel__track {
      flex-direction: column;
      overflow: visible;
      scroll-snap-type: none;
    }
    .carousel__track > .testimonial { flex: none; width: 100%; }
    .carousel__btn { display: none; }
  }

  /* Card header: initials avatar + star rating */
  .testimonial__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-xs);
    margin-bottom: var(--sp-sm);
  }

  .testimonial__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
  }

  .testimonial__avatar--1 { background-color: var(--c-pastel-green);  color: var(--c-pastel-green-ink); }
  .testimonial__avatar--2 { background-color: var(--c-pastel-mango);  color: var(--c-pastel-mango-ink); }
  .testimonial__avatar--3 { background-color: var(--c-pastel-purple); color: var(--c-pastel-purple-ink); }
  .testimonial__avatar--4 { background-color: var(--c-pastel-blue);   color: var(--c-pastel-blue-ink); }

  .testimonial__stars { display: inline-flex; gap: 2px; color: #C79A3B; }

  .testimonial__stars svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
  }

  .testimonial {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: var(--sp-md);
    background-color: var(--bg-page);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--r-md);
  }

  .testimonial__quote {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    color: var(--text-heading);
  }

  .testimonial__attribution {
    margin-top: var(--sp-md);
    padding-top: var(--sp-sm);
    border-top: var(--bw-hair) solid var(--border-subtle);
    font-size: var(--fs-xs);
    font-style: normal;
    color: var(--text-muted);
  }

  .testimonial__mark {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: var(--sp-2xs);
    color: var(--c-accent-500);
  }

  /* ---------------------------------------------------------------------
     ACCORDION (FAQ)
     ------------------------------------------------------------------ */
  .accordion { max-width: var(--measure); }

  .accordion__item {
    border-bottom: var(--bw-hair) solid var(--border-subtle);
  }

  .accordion__item:first-child {
    border-top: var(--bw-hair) solid var(--border-subtle);
  }

  .accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    width: 100%;
    min-height: var(--tap-min);
    padding-block: var(--sp-sm);
    color: var(--text-heading);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    line-height: var(--lh-snug);
    text-align: left;
    cursor: pointer;
  }

  .accordion__trigger:hover { color: var(--c-accent-700); }

  .accordion__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    color: var(--c-accent-600);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .accordion__trigger[aria-expanded="true"] .accordion__icon {
    transform: rotate(45deg);
  }

  /* Panels are hidden with [hidden] so they stay closed and readable
     even if JS never runs. JS only removes/reapplies the attribute.   */
  .accordion__panel {
    padding-bottom: var(--sp-md);
    color: var(--text-muted);
    max-width: var(--measure);
  }

  .accordion__panel[hidden] { display: none; }

  /* ---------------------------------------------------------------------
     CTA BAND
     ------------------------------------------------------------------ */
  .cta-band { text-align: center; }

  /* Photo variant (homepage): a blurred woodland path behind the dark band.
     The image lives on ::before so the blur never touches the text; ::after
     is a dark ink overlay that keeps the contrast of the plain band. The
     blur is pre-scaled so its soft edges stay outside the clipped box. */
  .cta-band--photo {
    position: relative;
    overflow: hidden;
  }

  .cta-band--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/cta-woods.jpg");
    background-size: cover;
    background-position: center;
    filter: blur(7px);
    transform: scale(1.08);
  }

  .cta-band--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(30, 27, 23, 0.72);
  }

  .cta-band--photo > .container {
    position: relative;
    z-index: 1;
  }

  .cta-band__inner {
    max-width: var(--container-narrow);
    margin-inline: auto;
  }

  .cta-band__text {
    margin-top: var(--sp-sm);
    font-size: var(--fs-md);
    color: var(--c-sand-300);
  }

  .cta-band__actions { margin-top: var(--sp-lg); }

  .cta-band__note {
    margin-top: var(--sp-md);
    font-size: var(--fs-xs);
    color: var(--c-sand-400);
  }

  /* ---------------------------------------------------------------------
     FORM
     ------------------------------------------------------------------ */
  .form { max-width: var(--container-narrow); }

  .form__field + .form__field { margin-top: var(--sp-md); }

  .form__label {
    display: block;
    margin-bottom: var(--sp-3xs);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-heading);
  }

  .form__hint {
    display: block;
    margin-bottom: var(--sp-2xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
  }

  .form__input,
  .form__select,
  .form__textarea {
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--sp-xs) var(--sp-sm);
    background-color: var(--bg-page);
    border: var(--bw-hair) solid var(--c-sand-400);
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    color: var(--text-body);
    transition:
      border-color var(--dur-fast) var(--ease-out),
      box-shadow   var(--dur-fast) var(--ease-out);
  }

  .form__textarea {
    min-height: 9rem;
    line-height: var(--lh-body);
    resize: vertical;
  }

  .form__input:hover,
  .form__select:hover,
  .form__textarea:hover { border-color: var(--c-ink-300); }

  .form__input:focus,
  .form__select:focus,
  .form__textarea:focus {
    border-color: var(--c-accent-600);
    box-shadow: 0 0 0 var(--bw-thick) var(--c-accent-100);
  }

  .form__input[aria-invalid="true"],
  .form__textarea[aria-invalid="true"],
  .form__select[aria-invalid="true"] { border-color: var(--c-focus); }

  /* Error text is added by main.js; it also exists in the markup as an
     empty live region so screen readers announce it in place.         */
  .form__error {
    display: block;
    margin-top: var(--sp-3xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-focus);
  }

  .form__error:empty { display: none; }

  .form__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2xs);
    margin-top: var(--sp-md);
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }

  .form__checkbox {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1em;
    accent-color: var(--c-accent-600);
  }

  .form__actions { margin-top: var(--sp-lg); }

  .form__status {
    margin-top: var(--sp-md);
    padding: var(--sp-sm) var(--sp-md);
    background-color: var(--c-accent-100);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--c-accent-700);
  }

  .form__status:empty { display: none; }

  /* ---------------------------------------------------------------------
     RATES TABLE
     ------------------------------------------------------------------ */
  .rates {
    /* Scroll the table, never the page, if it outgrows a narrow screen. */
    overflow-x: auto;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--r-md);
  }

  .rates__table { min-width: 30rem; font-size: var(--fs-sm); }

  .rates__table th,
  .rates__table td {
    padding: var(--sp-sm) var(--sp-md);
    text-align: left;
    border-bottom: var(--bw-hair) solid var(--border-subtle);
  }

  .rates__table thead th {
    background-color: var(--bg-alt);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .rates__table tbody tr:last-child th,
  .rates__table tbody tr:last-child td { border-bottom: 0; }

  .rates__table tbody th {
    font-weight: var(--fw-semi);
    color: var(--text-heading);
  }

  .rates__note {
    margin-top: var(--sp-sm);
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }

  /* ---------------------------------------------------------------------
     CALLOUT — booking placeholder, reimbursement note, crisis notice
     ------------------------------------------------------------------ */
  .callout {
    padding: var(--sp-md);
    background-color: var(--bg-alt);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--r-md);
  }

  .callout--accent {
    background-color: var(--c-accent-100);
    border-color: transparent;
  }

  .callout--urgent {
    background-color: var(--bg-page);
    border-left: var(--bw-thick) solid var(--c-focus);
  }

  .callout__title {
    margin-bottom: var(--sp-2xs);
    font-size: var(--fs-md);
  }

  .callout__text { font-size: var(--fs-sm); color: var(--text-muted); }

  /* ---------------------------------------------------------------------
     BOOKING — Calendly inline widget wrapper (contact.html)
     Calendly injects its own iframe; the wrapper only reserves height so
     the page doesn't jump when the script loads.
     ------------------------------------------------------------------ */
  .booking__embed {
    min-height: var(--booking-h);
    border-radius: var(--r-md);
    overflow: hidden;
  }

  /* ---------------------------------------------------------------------
     CONTACT DETAILS LIST
     ------------------------------------------------------------------ */
  .contact-list { margin: 0; padding: 0; list-style: none; }

  .contact-list__item + .contact-list__item {
    margin-top: var(--sp-md);
    padding-top: var(--sp-md);
    border-top: var(--bw-hair) solid var(--border-subtle);
  }

  .contact-list__label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .contact-list__value {
    display: block;
    margin-top: var(--sp-3xs);
    font-size: var(--fs-md);
    color: var(--text-heading);
  }

  /* ---------------------------------------------------------------------
     FOOTER
     ------------------------------------------------------------------ */
  .footer {
    padding-block: var(--sp-xl) var(--sp-lg);
    background-color: var(--bg-alt);
    border-top: var(--bw-hair) solid var(--border-subtle);
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }

  .footer__grid {
    display: grid;
    gap: var(--sp-lg);
  }

  @media (min-width: 640px) {
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 900px) {
    .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-xl); }
  }

  .footer__title {
    margin-bottom: var(--sp-sm);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-heading);
  }

  .footer__list { margin: 0; padding: 0; list-style: none; }

  .footer__list li + li { margin-top: var(--sp-2xs); }

  .footer__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min-alt);
    color: var(--text-muted);
    text-decoration: none;
  }

  .footer__link:hover {
    color: var(--c-accent-700);
    text-decoration: underline;
  }

  .footer__socials {
    display: flex;
    gap: var(--sp-2xs);
    margin-top: var(--sp-sm);
  }

  .footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    background-color: var(--bg-page);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--r-pill);
    color: var(--text-body);
  }

  .footer__social:hover {
    background-color: var(--c-accent-100);
    color: var(--c-accent-700);
  }

  .footer__social svg { width: 1.25rem; height: 1.25rem; }

  .footer__legal {
    margin-top: var(--sp-xl);
    padding-top: var(--sp-md);
    border-top: var(--bw-hair) solid var(--border-subtle);
    font-size: var(--fs-xs);
  }

  .footer__legal p + p { margin-top: var(--sp-3xs); }

  /* ---------------------------------------------------------------------
     PAGE HEADER (inner pages)
     ------------------------------------------------------------------ */
  .page-header {
    padding-block: var(--sp-xl) var(--sp-lg);
    background-color: var(--bg-alt);
  }

  .page-header__title { max-width: 20ch; }

  .page-header__lede {
    max-width: var(--measure);
    margin-top: var(--sp-md);
    font-size: var(--fs-md);
    color: var(--text-muted);
  }

  .breadcrumb {
    margin-bottom: var(--sp-sm);
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }

  .breadcrumb a { color: var(--text-muted); }

  /* ---------------------------------------------------------------------
     REVEAL ON SCROLL
     Opt-in per element via .reveal. main.js adds .is-visible.
     Without JS, or with reduced motion, content is simply visible.
     ------------------------------------------------------------------ */
  .reveal { opacity: 1; }

  /* Only arm the animation when JS is present AND motion is welcome. */
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal {
      opacity: 0;
      transform: translateY(var(--sp-sm));
      transition:
        opacity   var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
    }

    .js .reveal.is-visible {
      opacity: 1;
      transform: none;
    }
  }
}

/* =============================================================================
   6. UTILITIES
   ========================================================================== */

@layer utilities {
  .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .u-measure       { max-width: var(--measure); }
  .u-measure-short { max-width: var(--measure-short); }
  .u-center        { margin-inline: auto; }
  .u-text-center   { text-align: center; }
  .u-muted         { color: var(--text-muted); }
  .u-small         { font-size: var(--fs-sm); }
  .u-xsmall        { font-size: var(--fs-xs); }

  .u-mt-sm  { margin-top: var(--sp-sm); }
  .u-mt-md  { margin-top: var(--sp-md); }
  .u-mt-lg  { margin-top: var(--sp-lg); }
  .u-mt-xl  { margin-top: var(--sp-xl); }
  .u-mb-md  { margin-bottom: var(--sp-md); }
  .u-measure-wide { max-width: 92ch; }
  @media (min-width: 900px) { .u-one-line { white-space: nowrap; } }

  .u-grid-2 { --grid-min: 20rem; }
  .u-grid-3 { --grid-min: 16rem; }
  .u-grid-4 { --grid-min: 13rem; }

  /* .u-grid-2 is capped at two columns: with four cards, a third column on
     wide screens would leave a 3 + 1 orphan instead of a balanced 2 × 2. */
  @media (min-width: 900px) {
    .u-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}