/* =========================================================================
   Thallo Care — Disability Support Services
   Palette per the 23 Aug 2026 update PDF, which supplied a new logo and a
   named set of colours:
     background  #6C30ED
     text        #FFFFFF, #00DF98
     icons       #ECD80C  #FE4B79  #4E8EFF  #00DF98  #F7941E

   Pages stay light. The purple is the footer and the accent colour, not a
   page background.

   THE ONE RULE THAT KEEPS THIS ACCESSIBLE:
     purple  -> white text        (6.40:1)
     any of the five brights -> dark --ink text  (5.56:1 to 12.32:1)
   White on the brights runs 1.5-3.2:1 and must never be used for type.
   #00DF98 as a text colour only clears the bar on purple at LARGE sizes
   (3.66:1), so it is reserved for big headings on purple — never body copy,
   and never on white, where it is 1.75:1.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Two purples, per the 25 Aug list: #6C30ED and #9678D3, weighted toward
     the softer one. They can't do the same job — #9678D3 is 3.54:1 against
     white even at full opacity, so it can never sit behind white type. The
     split is therefore by role, not by amount:
       #6C30ED and deeper  ->  anything carrying white text
       #9678D3 and lighter ->  tints, washes, card grounds, the light end of
                               gradients, anything carrying dark ink
     Tinted surfaces cover far more of the page than the solid bands do, so
     the softer purple is what you mostly see. */
  --purple-900: #240a5e;
  --purple-800: #33108a;
  --purple-700: #4a18b8;
  --purple-600: #5a1fd4;
  --purple-500: #6c30ed;   /* the saturated brand purple */
  --purple-400: #8757f1;
  --purple-soft: #9678d3;  /* the second supplied purple — dark ink only */
  --purple-300: #b3a0e0;
  --purple-200: #d5c9ef;
  --purple-100: #e6dff7;
  --purple-50:  #f5f2fc;

  /* the five accent colours, exactly as supplied */
  --acc-yellow: #ecd80c;
  --acc-pink:   #fe4b79;
  --acc-blue:   #4e8eff;
  --acc-green:  #00df98;
  --acc-orange: #f7941e;

  /* ink-weight versions, for accent-coloured TEXT on a white card, where the
     accents themselves run 1.5-3.2:1 and are unusable */
  --acc-blue-ink:   #1f5fd6;
  --acc-green-ink:  #0f7a58;
  --acc-orange-ink: #97530a;
  --acc-pink-ink:   #b3123d;

  /* neutrals */
  --ink:    #1b1033;
  --body:   #4a4458;
  --muted:  #6e6880;
  --line:   #e7e1f0;
  --surface:#ffffff;
  --wash:   #faf8ff;

  /* ---- gradients ----
     Every brand colour is applied as a gradient rather than a flat fill.
     The purple range carries white type; the five accents carry --ink. */
  --grad-brand:  linear-gradient(135deg, #6c30ed 0%, #5a1fd4 55%, #4a18b8 100%);
  --grad-purple: linear-gradient(135deg, #8757f1 0%, #6c30ed 55%, #4a18b8 100%);
  --grad-deep:   linear-gradient(155deg, #33108a 0%, #4a18b8 45%, #6c30ed 100%);

  /* accent fills — dark --ink only */
  --grad-yellow: linear-gradient(135deg, #f5e64a 0%, #ecd80c 100%);
  --grad-pink:   linear-gradient(135deg, #ff7699 0%, #fe4b79 100%);
  --grad-blue:   linear-gradient(135deg, #7fadff 0%, #4e8eff 100%);
  --grad-green:  linear-gradient(135deg, #4dedbb 0%, #00df98 100%);
  --grad-orange: linear-gradient(135deg, #fbb35c 0%, #f7941e 100%);

  /* the interior page banner wash — gradual rather than a flat block, but
     every stop stays deep enough to hold white type */
  --grad-hero: linear-gradient(150deg,
                 #33108a 0%, #4a18b8 28%, #5a1fd4 52%,
                 #6c30ed 78%, #7b45f0 100%);

  /* The wash over the hero video. It runs sideways, not diagonally, because
     the copy sits in the left column and the footage should stay clean on the
     right — that's the "clean, not blurry" look asked for on 25 Aug.
     The left half is measured, not guessed: the brightest pixels there hit
     #FDFDFE (pavement and sky), so the veil holds #4A18B8/#5A1FD4 at .86+
     across the whole text column, which keeps white type at 5.9:1 or better.
     It then thins out to the soft purple over the subject. Do not lighten the
     left half — at #6C30ED/.70 the headline drops to 3.6:1, and #9678D3 can
     never carry white type at any opacity. */
  --grad-video-veil: linear-gradient(100deg,
                 rgba(74, 24, 184, .93) 0%, rgba(74, 24, 184, .90) 30%,
                 rgba(90, 31, 212, .86) 50%, rgba(108, 48, 237, .58) 72%,
                 rgba(150, 120, 211, .30) 100%);
  /* stacked layouts put the copy over the whole frame, so the veil goes solid */
  --grad-video-veil-narrow: linear-gradient(160deg,
                 rgba(74, 24, 184, .93) 0%, rgba(90, 31, 212, .90) 60%,
                 rgba(108, 48, 237, .88) 100%);

  /* The veil over the interior page banners. Stronger than the home hero's,
     and for a reason: the banner copy is CENTRED and spans the full width, so
     there is no safe side to thin out toward, and three of the five pages put
     body-size text there, which needs the full 4.5:1 rather than the 3:1 that
     large headings get. The five clips are bright office and library footage —
     the brightest 1% of pixels across them reaches #F9F9FE — so every stop
     here is sized against that. The lightest, #6C30ED at .84, lands at 4.9:1.
     The consequence is honest: the footage reads as a slow moving texture
     rather than clearly visible video. Thinning it is not an option. */
  --grad-page-veil: linear-gradient(165deg,
                 rgba(51, 16, 138, .93) 0%, rgba(74, 24, 184, .90) 38%,
                 rgba(90, 31, 212, .87) 70%, rgba(108, 48, 237, .84) 100%);

  /* pale tints — dark ink only. These are the #9678D3 family thinned right
     down, and they cover more of the page than any solid band does. */
  --grad-soft:      linear-gradient(150deg, #f3effc 0%, #f0f2fd 48%, #eef9ff 100%);
  --grad-chip:      linear-gradient(135deg, #4dedbb 0%, #00df98 100%);

  /* one ink serves every accent surface — see the rule at the top of the file */
  --on-accent: #1b1033;

  /* shape + depth */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-sm: 0 2px 8px rgba(45, 16, 92, .06);
  --shadow-md: 0 10px 30px rgba(45, 16, 92, .09);
  --shadow-lg: 0 24px 60px rgba(45, 16, 92, .14);

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 84px;

  --font-head: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2.15rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--purple-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--purple-700); }

img { max-width: 100%; height: auto; display: block; }
strong, b { color: var(--ink); font-weight: 650; }
ul { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: .45rem; }
hr {
  border: 0; height: 1px; margin: 2.5rem 0;
  background: linear-gradient(to right, rgba(231,225,240,0), var(--line) 20%, var(--line) 80%, rgba(231,225,240,0));
}

/* focus — visible for keyboard users on every interactive element */
:focus-visible {
  outline: 3px solid var(--purple-600);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible, .site-footer :focus-visible, .hero :focus-visible {
  outline-color: var(--acc-yellow);
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 999; background: var(--purple-800); color: #fff;
  padding: .8rem 1.5rem; border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600; text-decoration: none; transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--flush-top { padding-top: 0; }

/* tinted bands fade in and out at their edges rather than butting hard
   against the white sections above and below */
/* tinted in the #9678D3 family — dark ink only, which is all that sits here */
.section--wash {
  background-image: linear-gradient(to bottom,
    rgba(243, 239, 252, 0) 0%, #f3effc 10%, #eae2f8 50%, #f3effc 90%, rgba(243, 239, 252, 0) 100%);
}
/* the leading white layer fades the tint out at both edges, so the band
   dissolves into the page instead of ending on a line */
.section--soft {
  background-image:
    linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 85%, #ffffff 100%),
    var(--grad-soft);
}

.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.1rem; }
/* the line that carries the section's actual message, ahead of the detail */
.section-head__lead {
  font-family: var(--font-head); font-weight: 650;
  font-size: clamp(1.15rem, 2.3vw, 1.45rem); line-height: 1.4;
  color: var(--purple-700); margin-bottom: .85rem;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .78rem; font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple-700);
  background-image: linear-gradient(135deg, var(--purple-100) 0%, #e3ecfd 100%);
  padding: .4rem .9rem; border-radius: 100px;
  margin-bottom: 1rem;
}
.eyebrow--on-dark { color: var(--on-accent); background-image: var(--grad-chip); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.9rem); }
/* 420px keeps this at two columns on desktop rather than collapsing to 3 + orphan */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* cards size to their own content instead of stretching to the tallest —
   needed so one expanding service card doesn't drag the others with it */
.grid--top { align-items: start; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-head); font-size: 1rem; font-weight: 600;
  padding: .95rem 1.75rem; min-height: 52px;
  border: 2px solid transparent; border-radius: 100px;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background-image: var(--grad-brand); color: #fff; box-shadow: 0 8px 22px rgba(108, 48, 237, .30); }
.btn--primary:hover { color: #fff; box-shadow: 0 14px 32px rgba(108, 48, 237, .40); }

.btn--secondary {
  background-image: linear-gradient(170deg, #ffffff 0%, #faf7ff 100%);
  color: var(--purple-700); border-color: var(--purple-100); box-shadow: var(--shadow-sm);
}
.btn--secondary:hover { color: var(--purple-800); border-color: var(--purple-300); box-shadow: var(--shadow-md); }

/* referral CTA — pink, per the 13 Aug change list. Accent pink holds white at
   only 3.2:1, so like every accent surface it carries the dark ink. */
.btn--pink { background-image: var(--grad-pink); color: var(--on-accent); box-shadow: 0 8px 22px rgba(254, 75, 121, .40); }
.btn--pink:hover { color: var(--on-accent); box-shadow: 0 14px 32px rgba(254, 75, 121, .52); }
/* a soft rim keeps the accents from muddying into the purple bands behind them */
.hero .btn--pink, .cta-band .btn--pink, .site-footer .btn--pink,
.hero .btn--chat, .cta-band .btn--chat, .site-footer .btn--chat { border-color: rgba(255, 255, 255, .40); }

.btn--lime { background-image: var(--grad-chip); color: var(--on-accent); box-shadow: 0 8px 22px rgba(0, 223, 152, .40); }
.btn--lime:hover { color: var(--on-accent); background-image: linear-gradient(135deg, #7ff3cd 0%, #26e5a8 100%); }

/* the FREE 30-minute chat CTA — green, the second of the two supplied text
   colours, used as a fill here so it can carry the dark ink at 10.3:1 */
.btn--chat { background-image: var(--grad-green); color: var(--on-accent); box-shadow: 0 8px 22px rgba(0, 223, 152, .42); }
.btn--chat:hover { color: var(--on-accent); box-shadow: 0 14px 32px rgba(0, 223, 152, .55); }
.btn--chat svg { width: 19px; height: 19px; }

/* "Explore our Services" — #4E8EFF, per the 25 Aug list. White on it is
   3.16:1, so it takes the dark ink like every other accent fill. */
.btn--explore { background-image: var(--grad-blue); color: var(--on-accent); box-shadow: 0 8px 22px rgba(78, 142, 255, .42); }
.btn--explore:hover { color: var(--on-accent); box-shadow: 0 14px 32px rgba(78, 142, 255, .55); }
.hero .btn--explore { border-color: rgba(255, 255, 255, .40); }

.btn--ghost-light { background-image: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost-light:hover { background-image: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.14)); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.btn-row--center { justify-content: center; }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 54px; width: auto; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  font-family: var(--font-head); font-weight: 550; font-size: .97rem;
  color: var(--ink); text-decoration: none;
  padding: .6rem .85rem; border-radius: 100px;
  transition: background .16s ease, color .16s ease;
}
.nav a:hover { background: var(--purple-50); color: var(--purple-700); }
.nav a[aria-current="page"] { color: var(--purple-700); background-image: linear-gradient(135deg, var(--purple-100), #e6eefd); }
/* the in-nav CTA is for the mobile drawer only — the header keeps its own */
.nav > .btn { display: none; }
.nav > .btn[aria-current="page"] { background-image: var(--grad-pink); color: var(--on-accent); }

.header-cta { display: flex; align-items: center; gap: .6rem; flex: none; }
.header-cta .btn { padding: .7rem 1.3rem; min-height: 46px; font-size: .95rem; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: var(--purple-50); border: 1px solid var(--line);
  border-radius: 14px; cursor: pointer; color: var(--purple-700);
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 1000px) {
  .brand img { height: 46px; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.6rem;
    box-shadow: var(--shadow-md);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: .95rem 1rem; font-size: 1.05rem; border-radius: var(--r-sm); }
  .nav > .btn { display: inline-flex; margin-top: .7rem; width: 100%; }
  .header-cta .btn { display: none; }
}

/* ---------- 6. Hero ----------
   Home only. Layer order, bottom to top: the looping video, the purple veil
   that makes it safe for white type, two accent washes, then the content.
   The base gradient still sits underneath as the fallback for any browser or
   connection where the video never paints. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: #33108a;
  background-image:
    radial-gradient(760px 620px at 88% -10%, rgba(78, 142, 255, .34), rgba(78, 142, 255, 0) 66%),
    radial-gradient(720px 640px at -8% 106%, rgba(254, 75, 121, .30), rgba(254, 75, 121, 0) 66%),
    radial-gradient(1000px 520px at 46% 118%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
    var(--grad-hero);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  color: #fff;
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(4rem, 9vw, 7.5rem);
}

/* the clip itself — object-fit cover so it fills the band at any ratio */
.hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* the veil. Without it the white headline lands at 3.6:1 against the brightest
   part of the clip; with it the worst case across the text column is 5.9:1.
   No blur on the footage — the veil alone does the work, which is what keeps
   it looking clean rather than muddy. */
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grad-video-veil);
}
/* once the grid stacks, the copy sits over the full frame, so the veil does too */
@media (max-width: 900px) {
  .hero__veil { background-image: var(--grad-video-veil-narrow); }
}

/* Someone who asks for less motion should not get a looping video. The clip
   is paused and hidden by main.js as well, so this is belt and braces. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
/* The banner ends on a clean straight edge. It used to dissolve into the
   section below through a tall white fade; that was dropped on 25 Aug —
   "change the blur to a straight line ... it is making it look blah". The
   gradient inside the band still does the softening; only the edge is hard. */
.hero > .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: 1.1rem; }
.hero p { color: #fff; font-size: 1.1rem; }
.hero .lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: #fff; font-weight: 500; }

/* The services card was removed from the hero on 25 Aug, so the copy now sits
   in a single left column. It is held to roughly half the width on purpose:
   that is the part of the frame the veil covers, and it leaves the right side
   of the footage clear. */
.hero-copy { max-width: 640px; }
.hero-copy .btn-row { margin-top: 2rem; }
@media (max-width: 900px) {
  .hero-copy { max-width: none; }
}

/* Page banner for interior pages. Each page carries its own background clip
   (About, Services, Resources, Contact, Referrals), layered exactly like the
   home hero: video at the back, veil over it, content on top. The gradient
   below stays as the fallback wherever the video never paints. Taller than it
   used to be, to give the footage a little room to read around the copy. */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: #33108a;
  background-image:
    radial-gradient(820px 560px at 86% -18%, rgba(78, 142, 255, .30), rgba(78, 142, 255, 0) 66%),
    radial-gradient(700px 520px at 4% 116%, rgba(254, 75, 121, .26), rgba(254, 75, 121, 0) 68%),
    var(--grad-hero);
  background-repeat: no-repeat, no-repeat, no-repeat;
  color: #fff;
  padding: clamp(3.25rem, 7vw, 5.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}
.page-hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  pointer-events: none;
}
.page-hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grad-page-veil);
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__video { display: none; }
}
/* straight edge, same as the home hero — see the note above */
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #fff; max-width: 720px; margin-inline: auto; font-size: 1.1rem; }
/* the one-line promise under the page title — sized as a heading so it reads
   before the paragraph does */
.page-hero__lead {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.35;
  margin-bottom: 1.1rem;
}

/* ---------- 7. Cards ---------- */
.card {
  background-image: linear-gradient(170deg, #ffffff 0%, #fdfcff 62%, #faf7ff 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--purple-100); }
.card--stack { display: flex; flex-direction: column; }
.card__more { margin-top: auto; padding-top: 1.1rem; }
.card__more a { font-family: var(--font-head); font-weight: 600; text-decoration: none; }
.card__more a:hover { text-decoration: underline; }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--body); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 18px;
  margin-bottom: 1.1rem; color: #fff; flex: none;
  box-shadow: var(--shadow-sm);
}
.icon-badge svg { width: 28px; height: 28px; }
/* The five badge variants carry the five supplied accent colours. The class
   names predate this palette and are left alone so the markup doesn't churn:
   --violet is the orange slot and --purple is the brand purple. Only the
   purple badge takes a white glyph; every accent takes the dark ink. */
.icon-badge--purple { background-image: var(--grad-brand); }
.icon-badge--violet { background-image: var(--grad-orange); color: var(--on-accent); }
.icon-badge--blue   { background-image: var(--grad-blue);   color: var(--on-accent); }
.icon-badge--green  { background-image: var(--grad-green);  color: var(--on-accent); }
.icon-badge--pink   { background-image: var(--grad-pink);   color: var(--on-accent); }
.icon-badge--yellow { background-image: var(--grad-yellow); color: var(--on-accent); }

/* numbered pillar cards — same purple / blue / green trio as the services */
.pillar { position: relative; padding-top: 2.4rem; }
/* holds an icon rather than a numeral since 25 Aug — same size, same colours */
.pillar .pillar-num {
  position: absolute; top: -18px; left: clamp(1.5rem, 2.6vw, 2rem);
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: #fff;
  box-shadow: var(--shadow-sm);
}
.pillar .pillar-num svg { width: 27px; height: 27px; }
.pillar:nth-child(1) .pillar-num { background-image: var(--grad-brand); }
.pillar:nth-child(2) .pillar-num { background-image: var(--grad-blue);  color: var(--on-accent); }
.pillar:nth-child(3) .pillar-num { background-image: var(--grad-green); color: var(--on-accent); }

/* feature list with ticks */
.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .85rem; }
.tick-list li:last-child { margin-bottom: 0; }
.tick-list svg { width: 21px; height: 21px; flex: none; margin-top: 3px; color: var(--acc-green-ink); }
.tick-list strong { display: block; color: var(--ink); font-family: var(--font-head); font-weight: 650; }
/* single-line items — no bold lead-in to sit above, so they close up */
.tick-list--plain li { margin-bottom: .5rem; }

/* ---------- 8. Service columns ---------- */
.service-col { display: flex; flex-direction: column; overflow: hidden; padding: 0; }

.service-col__head { position: relative; padding: 1.6rem 1.75rem; color: #fff; }
.service-col__head h3 { color: #fff; margin: 0; font-size: 1.3rem; }
/* softens the hard edge where the colour band meets the card body */
.service-col__head::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 16px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.16));
}
.service-col:nth-child(1) .service-col__head { background-image: var(--grad-brand); }
.service-col:nth-child(2) .service-col__head { background-image: var(--grad-blue); color: var(--on-accent); }
.service-col:nth-child(2) .service-col__head h3 { color: var(--on-accent); }
.service-col:nth-child(3) .service-col__head { background-image: var(--grad-green); color: var(--on-accent); }
.service-col:nth-child(3) .service-col__head h3 { color: var(--on-accent); }
/* fourth card, added 25 Aug — yellow, as the capacity panel was */
.service-col:nth-child(4) .service-col__head { background-image: var(--grad-yellow); color: var(--on-accent); }
.service-col:nth-child(4) .service-col__head h3 { color: var(--on-accent); font-size: 1.18rem; }

.service-col__body { padding: 1.75rem; flex: 1; }
/* The bold promise line that opens each card. Since 30 Aug the closed card is
   just this line plus one paragraph — everything else sits behind "Read more",
   so this is the sentence doing all the work. */
.service-col__lead {
  font-family: var(--font-head); font-weight: 650;
  font-size: 1.06rem; line-height: 1.45;
  color: var(--ink); margin-bottom: .85rem;
}
.service-col:nth-child(1) .service-col__lead { color: var(--purple-700); }
.service-col:nth-child(2) .service-col__lead { color: var(--acc-blue-ink); }
.service-col:nth-child(3) .service-col__lead { color: var(--acc-green-ink); }
.service-col:nth-child(4) .service-col__lead { color: var(--acc-orange-ink); }
.service-col__body > h4 {
  font-family: var(--font-head); color: var(--purple-700);
  margin: 1.5rem 0 1rem; font-size: 1.02rem;
}

/* --- collapsible detail ---
   Built on <details> so it still opens and closes with JavaScript off. Each
   card is independent: opening one leaves the other two alone. */
.service-col__detail { margin-top: 1.25rem; }
.service-col__detail > summary {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  padding: .6rem 1.05rem; border-radius: 100px;
  cursor: pointer; list-style: none;
  color: var(--purple-700);
  background-image: linear-gradient(135deg, rgba(108, 48, 237, .10), rgba(78, 142, 255, .09));
  transition: background .18s ease, color .18s ease;
}
.service-col__detail > summary::-webkit-details-marker { display: none; }
.service-col__detail > summary::marker { content: ""; }
.service-col__detail > summary:hover { background-image: linear-gradient(135deg, rgba(108, 48, 237, .18), rgba(78, 142, 255, .17)); }
.service-col__detail > summary svg {
  width: 18px; height: 18px; flex: none;
  transition: transform .22s ease;
}
.service-col__detail[open] > summary svg { transform: rotate(180deg); }
.service-col__detail[open] > summary .lbl-more { display: none; }
.service-col__detail:not([open]) > summary .lbl-less { display: none; }

/* summary tint tracks its card's heading colour */
.service-col:nth-child(2) .service-col__detail > summary { color: var(--acc-blue-ink); background-image: linear-gradient(135deg, rgba(78, 142, 255, .14), rgba(78, 142, 255, .12)); }
.service-col:nth-child(2) .service-col__detail > summary:hover { background-image: linear-gradient(135deg, rgba(78, 142, 255, .24), rgba(78, 142, 255, .20)); }
.service-col:nth-child(3) .service-col__detail > summary { color: var(--acc-green-ink); background-image: linear-gradient(135deg, rgba(0, 223, 152, .16), rgba(0, 223, 152, .22)); }
.service-col:nth-child(3) .service-col__detail > summary:hover { background-image: linear-gradient(135deg, rgba(0, 223, 152, .26), rgba(0, 223, 152, .34)); }
.service-col:nth-child(4) .service-col__detail > summary { color: var(--acc-orange-ink); background-image: linear-gradient(135deg, rgba(236, 216, 12, .24), rgba(247, 148, 30, .16)); }
.service-col:nth-child(4) .service-col__detail > summary:hover { background-image: linear-gradient(135deg, rgba(236, 216, 12, .36), rgba(247, 148, 30, .26)); }

.service-col__extra { padding-top: .35rem; animation: detail-in .28s ease both; }
.service-col__extra > h4 {
  font-family: var(--font-head); color: var(--purple-700);
  margin: 1.1rem 0 1rem; font-size: 1.02rem;
}
.service-col:nth-child(2) .service-col__extra > h4 { color: var(--acc-blue-ink); }
.service-col:nth-child(3) .service-col__extra > h4 { color: var(--acc-green-ink); }
.service-col:nth-child(4) .service-col__extra > h4 { color: var(--acc-orange-ink); }

@keyframes detail-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 8b. Founder note (About) ---------- */
.founder-note {
  position: relative; overflow: hidden;
  background-image: linear-gradient(170deg, #ffffff 0%, #fdfcff 62%, #faf7ff 100%);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-md);
}
/* accent rule across the top, running purple to green and fading out */
.founder-note::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(to right,
    var(--purple-500) 0%, var(--acc-blue) 44%, var(--acc-green) 74%, rgba(0, 223, 152, 0) 100%);
}
.founder-note h2 { margin-bottom: 1.3rem; }
.founder-note__lead {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.28rem); line-height: 1.5;
  color: var(--purple-800); margin-bottom: 1.5rem;
}
/* the note now opens on Vicky's own greeting instead of a section heading */
.founder-note__hello { font-size: clamp(1.6rem, 3vw, 2.15rem); margin-bottom: 1rem; }
/* "Your goals. Your choices. Your journey." — the line the note turns on */
.founder-note__belief {
  font-family: var(--font-head); font-weight: 650;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--purple-700);
  margin: 1.6rem 0 1.15rem;
}

/* ---------- 8b-ii. Inline "read more" disclosure ----------
   A general version of the service-card pattern, for long prose blocks. It
   ships open in the markup and is closed by main.js only where the length is
   actually a problem, so desktop and no-JS both get the full text. */
.read-more { margin: 0 0 1.15rem; }
/* open by default means the summary would be pointless clutter on desktop —
   main.js reveals it at the same moment it closes the disclosure */
.read-more > summary { display: none; }
.read-more.is-collapsible > summary {
  display: inline-flex; align-items: center; gap: .5rem;
  width: 100%; justify-content: space-between; min-height: 48px;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  padding: .6rem 1.05rem; margin-bottom: .25rem;
  border-radius: 100px; cursor: pointer; list-style: none;
  color: var(--purple-700);
  background-image: linear-gradient(135deg, rgba(108, 48, 237, .10), rgba(78, 142, 255, .09));
}
.read-more > summary::-webkit-details-marker { display: none; }
.read-more > summary::marker { content: ""; }
.read-more > summary svg { width: 18px; height: 18px; flex: none; transition: transform .22s ease; }
.read-more[open] > summary svg { transform: rotate(180deg); }
.read-more[open] > summary .lbl-more { display: none; }
.read-more:not([open]) > summary .lbl-less { display: none; }
.read-more__body > p:last-child { margin-bottom: 0; }

/* ---------- 8c. Mission / Vision / Values (About) ----------
   One panel rather than three cards, per the 25 Aug list. */
.mvv {
  position: relative; overflow: hidden;
  background-image: linear-gradient(170deg, #ffffff 0%, #fbf9ff 60%, #f5f1fd 100%);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-md);
}
.mvv::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(to right,
    var(--purple-500) 0%, var(--acc-blue) 46%, var(--acc-pink) 76%, rgba(254, 75, 121, 0) 100%);
}
.mvv__item { display: flex; gap: clamp(1rem, 2.4vw, 1.6rem); align-items: flex-start; }
.mvv__item + .mvv__item {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  /* the divider fades out rather than ruling straight across */
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, var(--line) 0%, var(--line) 62%, rgba(231,225,240,0) 100%) 1;
}
.mvv__item .icon-badge { margin-bottom: 0; }
.mvv__item h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: .6rem; }
.mvv__item p { color: var(--body); margin: 0; }
@media (max-width: 620px) {
  .mvv__item { flex-direction: column; gap: 1rem; }
}

/* ---------- 9. Support tiles ----------
   Six of them, replacing the eleven-category directory that stood here until
   30 Aug. Each is an icon, a heading and one sentence — the point is to show
   the BREADTH Thallo Care can connect someone with, not to enumerate it. The
   badges run purple, green, blue, pink, yellow, orange so all five supplied
   accents appear alongside the brand purple. */
.support-tile { display: flex; flex-direction: column; }
.support-tile h3 { font-size: 1.16rem; margin-bottom: .45rem; }
.support-tile p { color: var(--body); font-size: .99rem; margin: 0; }
.support-tile .icon-badge { margin-bottom: 1rem; }

/* the closing note under the six tiles */
.and-more {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 3.2vw, 2.25rem);
  border-radius: var(--r-xl);
  background-image: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.62) 100%);
  border: 1px solid rgba(255,255,255,.9);
  text-align: center;
}
.and-more h3 { color: var(--purple-700); margin-bottom: .5rem; font-size: 1.22rem; }
.and-more p { color: var(--body); max-width: 68ch; margin-inline: auto; margin-bottom: 0; }

/* ---------- 9b. "Not sure where to start?" ----------
   Deliberately quiet — no button, no form. Someone who cannot place themselves
   against a service name needs an invitation, not another decision. */
.start-here {
  position: relative; overflow: hidden; text-align: center;
  background-image: linear-gradient(170deg, #ffffff 0%, #fbf9ff 60%, #f5f1fd 100%);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-md);
}
.start-here::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(to right,
    var(--purple-500) 0%, var(--acc-green) 48%, var(--acc-blue) 78%, rgba(78, 142, 255, 0) 100%);
}
.start-here h2 { margin-bottom: .7rem; }
.start-here__lead {
  font-family: var(--font-head); font-weight: 650;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--purple-700); margin-bottom: .9rem;
}
.start-here p:last-child { color: var(--body); max-width: 62ch; margin-inline: auto; }

/* ---------- 10. Quote + testimonials ---------- */
.pull-quote {
  position: relative;
  background-image: var(--grad-soft);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-left: clamp(1.9rem, 3.4vw, 2.9rem);
  font-family: var(--font-head); font-style: italic; font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.55; color: var(--purple-800);
}
/* the accent bar fades out toward the bottom rather than stopping square */
.pull-quote::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(to bottom, var(--purple-500) 0%, var(--acc-blue) 55%, rgba(78, 142, 255, 0) 100%);
}

.quote-card { display: flex; flex-direction: column; }
.quote-card__mark { color: var(--purple-300); width: 38px; height: 38px; margin-bottom: .75rem; }
.quote-card blockquote { margin: 0 0 1.25rem; font-size: 1rem; color: var(--body); font-style: italic; }
.quote-card figcaption {
  margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 650; color: var(--ink); font-style: normal;
}
.quote-card figcaption span { display: block; font-weight: 500; font-size: .92rem; color: var(--muted); }

/* ---------- 11. FAQ accordion ---------- */
.faq {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background-image: linear-gradient(170deg, #ffffff 0%, #fdfcff 100%);
  overflow: hidden; margin-bottom: .9rem; box-shadow: var(--shadow-sm);
}
.faq:last-child { margin-bottom: 0; }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.4rem; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-head); font-weight: 600; font-size: 1.03rem; color: var(--ink);
  transition: background .16s ease;
}
.faq__q:hover { background-image: linear-gradient(135deg, var(--purple-50), #f4f9ff); }
.faq__q svg { width: 22px; height: 22px; flex: none; color: var(--purple-600); transition: transform .22s ease; margin-top: 2px; }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { padding: 0 1.4rem; max-height: 0; overflow: hidden; transition: max-height .28s ease, padding .28s ease; }
.faq__a[data-open="true"] { padding: 0 1.4rem 1.35rem; }
.faq__a p { color: var(--body); margin: 0 0 1rem; }
.faq__a p:last-child { margin-bottom: 0; }
/* the compliance checklist — two columns where there's room, one where there isn't */
.faq__checks {
  display: grid; gap: .5rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 0 0 1.15rem;
}
.faq__checks li { margin-bottom: 0; font-size: .98rem; }

/* ---------- 12. Contact ---------- */
.contact-item { display: flex; gap: 1.1rem; align-items: flex-start; }
.contact-item .icon-badge { width: 50px; height: 50px; border-radius: 15px; margin-bottom: 0; }
.contact-item .icon-badge svg { width: 24px; height: 24px; }
.contact-item h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.contact-item a { font-family: var(--font-head); font-weight: 600; color: var(--purple-700); text-decoration: none; overflow-wrap: anywhere; }
/* icon above text — gives long addresses the full card width in narrow columns */
.contact-item--stack { flex-direction: column; gap: .9rem; }
.contact-item--stack .icon-badge { margin-bottom: 0; }
.contact-item a:hover { text-decoration: underline; }
.contact-item p { margin: 0; color: var(--muted); font-size: .98rem; }

/* ---------- 13. Forms ---------- */
.form-card {
  background-image: linear-gradient(175deg, #ffffff 0%, #fdfcff 70%, #faf7ff 100%);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.5vw, 2.75rem); box-shadow: var(--shadow-md);
}
.field { margin-bottom: 1.35rem; }
.field > label, .fieldset-legend {
  display: block; margin-bottom: .45rem;
  font-family: var(--font-head); font-weight: 600; font-size: .97rem; color: var(--ink);
}
.req { color: #c2185b; margin-left: .15rem; }
.hint { display: block; font-weight: 400; font-size: .88rem; color: var(--muted); margin-top: .15rem; }

.input, .select, .textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: .85rem 1rem; min-height: 52px;
  background: var(--wash); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.input::placeholder, .textarea::placeholder { color: #9a94a8; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--purple-300); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; background: #fff;
  border-color: var(--purple-600); box-shadow: 0 0 0 4px rgba(108, 48, 237, .14);
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none; cursor: pointer; padding-right: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e169b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px;
}

fieldset { margin: 0 0 1.35rem; padding: 0; border: 0; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; }
.check {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1.1rem; min-height: 54px;
  background: var(--wash); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; font-size: .98rem;
  transition: border-color .16s ease, background .16s ease;
}
.check:hover { border-color: var(--purple-300); background: var(--purple-50); }
.check input { width: 21px; height: 21px; accent-color: var(--purple-600); flex: none; cursor: pointer; margin: 0; }
.check:has(input:checked) { border-color: var(--purple-600); background: var(--purple-50); }

.form-error { display: none; margin-top: .4rem; color: #c2185b; font-size: .9rem; font-weight: 500; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: #c2185b; background: #fff5f8; }
.field.has-error .form-error, fieldset.has-error .form-error { display: block; }

.form-note {
  margin-top: 1rem; font-size: .92rem; color: var(--muted); text-align: center;
}
.form-status {
  display: none; margin-bottom: 1.5rem; padding: 1rem 1.25rem;
  border-radius: var(--r-sm); border: 1.5px solid var(--purple-300);
  background-image: linear-gradient(135deg, var(--purple-50), #f2f8ff);
  color: var(--purple-800); font-size: .97rem;
}
.form-status.is-visible { display: block; }

/* ---------- 14. CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background-color: #5a1fd4;
  background-image:
    radial-gradient(620px 480px at 8% 118%, rgba(0, 223, 152, .28), rgba(0, 223, 152, 0) 68%),
    radial-gradient(560px 420px at 96% -20%, rgba(236, 216, 12, .22), rgba(236, 216, 12, 0) 70%),
    var(--grad-brand);
  background-repeat: no-repeat, no-repeat, no-repeat;
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}
.cta-band > * { position: relative; z-index: 1; }
/* the one place #00DF98 is used as type: this heading is 27-40px, which is
   "large" for WCAG, so 3.66:1 on the purple clears the 3:1 floor. Never
   reuse this colour at body size. */
.cta-band h2 { color: var(--acc-green); }
.cta-band p { color: #fff; max-width: 620px; margin-inline: auto; }

/* ---------- 13b. Capacity building ----------
   The standalone panel became the fourth service card on 25 Aug; only the
   "In simple terms" callout inside it survives. */
.capacity__plain {
  margin: 1.35rem 0 0; padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  background-image: linear-gradient(135deg, rgba(236, 216, 12, .18), rgba(247, 148, 30, .11));
  color: var(--body); font-size: .97rem;
}

/* ---------- 14b. Free 30-minute chat block (Contact) ---------- */
.free-chat {
  position: relative; overflow: hidden;
  background-image: linear-gradient(170deg, #ffffff 0%, #f7fffb 60%, #eefdf7 100%);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-md);
}
/* accent rule across the top, tapering out like the founder note's */
.free-chat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(to right,
    var(--acc-green) 0%, var(--acc-blue) 48%, var(--acc-yellow) 78%, rgba(236, 216, 12, 0) 100%);
}
.free-chat h2 { margin-bottom: .8rem; font-size: clamp(1.5rem, 2.8vw, 2rem); }
.free-chat p { color: var(--body); max-width: 70ch; }

/* ---------- 14c. Resources ---------- */
.res-group {
  position: relative; overflow: hidden;
  background-image: linear-gradient(170deg, #ffffff 0%, #fbf9ff 62%, #f5f1fd 100%);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
  box-shadow: var(--shadow-sm);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.res-group:last-child { margin-bottom: 0; }
/* accent rule per group, tapering out like the others on the site */
.res-group::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
}
.res-group--guides::before { background: linear-gradient(to right, var(--purple-500) 0%, var(--purple-soft) 62%, rgba(150,120,211,0) 100%); }
.res-group--easy::before   { background: linear-gradient(to right, var(--acc-green) 0%, var(--acc-blue) 60%, rgba(78,142,255,0) 100%); }
.res-group--links::before  { background: linear-gradient(to right, var(--acc-blue) 0%, var(--purple-500) 60%, rgba(108,48,237,0) 100%); }
.res-group--crisis::before { background: linear-gradient(to right, var(--acc-pink) 0%, var(--acc-orange) 58%, rgba(247,148,30,0) 100%); }

.res-group__head { display: flex; gap: clamp(1rem, 2.2vw, 1.4rem); align-items: flex-start; margin-bottom: 1.4rem; }
.res-group__head .icon-badge { margin-bottom: 0; }
.res-group__head h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: .35rem; }
.res-group__head p { color: var(--muted); margin: 0; }

.res-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.res-list li { margin: 0; }
.res-list a {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem .95rem; border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight: 550; font-size: .98rem;
  color: var(--purple-700); text-decoration: none;
  background-image: linear-gradient(135deg, rgba(150, 120, 211, .12), rgba(108, 48, 237, .06));
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.res-list a::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple-soft);
}
.res-list a:hover {
  color: var(--purple-800); transform: translateX(2px);
  background-image: linear-gradient(135deg, rgba(150, 120, 211, .22), rgba(108, 48, 237, .12));
}
/* external links open in a new tab; say so rather than leaving it a surprise */
.res-list a[target="_blank"]::after {
  content: ""; margin-left: auto; flex: none; width: 14px; height: 14px; opacity: .55;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.res-group--crisis { background-image: linear-gradient(170deg, #ffffff 0%, #fff8fa 62%, #fff1f5 100%); }
.res-emergency {
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  color: var(--acc-pink-ink); text-decoration: none;
  border-bottom: 2px solid rgba(179, 18, 61, .35);
}
.res-emergency:hover { color: #8d0e30; }
/* the shared grid--2 min of 420px never fits two-up inside the narrow
   container, so this block sets its own */
.res-crisis-grid {
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}
.res-crisis {
  padding: 1.1rem 1.25rem; border-radius: var(--r-md);
  background-image: linear-gradient(170deg, #ffffff 0%, #fffafc 100%);
  border: 1px solid var(--line);
}
.res-crisis h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.res-crisis p { margin: 0 0 .3rem; color: var(--body); font-size: .95rem; }
.res-crisis p:last-child { margin-bottom: 0; }
.res-crisis__num a {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.25rem; color: var(--purple-700); text-decoration: none;
}
.res-crisis__num a:hover { text-decoration: underline; }
.res-crisis__site a { font-size: .9rem; color: var(--muted); }

/* ---------- 15. Placeholder (Resources) ---------- */
.placeholder {
  text-align: center; max-width: 640px; margin-inline: auto;
  border: 2px dashed var(--purple-300); border-radius: var(--r-xl);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  background-image: var(--grad-soft);
}
.placeholder .icon-badge { margin-inline: auto; }

/* ---------- 16. Footer ----------
   "This purple should be down the bottom of each page" — the 23 Aug PDF.
   The band opens on the brand purple #6C30ED and settles a few steps deeper
   behind the text, so the exact brand colour is present at the top edge while
   the copy sits on ground where white clears 8:1 and the yellow link hover
   clears 5.6:1. At a flat #6C30ED that hover would fall to 4.38:1. */
.site-footer {
  position: relative;
  background-color: var(--purple-600);
  background-image:
    /* the soft purple arrives as a wash rather than a gradient stop: over the
       #6C30ED base it composites to 4.76:1, so the footer copy stays legible
       wherever it lands. A literal #9678D3 stop would be 3.54:1. */
    radial-gradient(900px 520px at 12% -18%, rgba(150, 120, 211, .60), rgba(150, 120, 211, 0) 72%),
    radial-gradient(640px 400px at 94% 4%, rgba(0, 223, 152, .18), rgba(0, 223, 152, 0) 72%),
    linear-gradient(180deg, #6c30ed 0%, #5a1fd4 34%, #4a18b8 72%, #3d1499 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  color: rgba(255,255,255,.88);
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
}
.site-footer > .container { position: relative; z-index: 1; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1.1rem; letter-spacing: .02em; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr 1.3fr; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer img.footer-logo { height: 74px; width: auto; margin-bottom: 1.2rem; }
.site-footer p { font-size: .97rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer a { color: rgba(255,255,255,.92); text-decoration: none; font-size: .97rem; }
.site-footer a:hover { color: var(--acc-yellow); text-decoration: underline; }
.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,.20);
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center;
  font-size: .9rem; color: rgba(255,255,255,.82);
}

/* =========================================================================
   17. MOBILE
   Reworked 30 Aug. The audit that prompted it (tools/mobile_audit.mjs, real
   device metrics at 390x844) found no horizontal overflow, so nothing here is
   fixing a broken layout. What it found was:
     - pages 8,000-11,500px tall, i.e. ten to fourteen screens of scrolling
     - nav and footer links 19px tall against a 44px accessible minimum
     - an 84px header that never shrank, eating 10% of a phone screen
     - the page scrolling behind the open menu drawer
     - five autoplaying banner clips loading on mobile data
   Everything below addresses one of those. Desktop is untouched.
   ========================================================================= */

/* The header is the single biggest fixed cost on a phone. 84px -> 64px gives
   back a fifth of it; the drawer and scroll-padding both key off this token,
   so they follow automatically. */
@media (max-width: 1000px) {
  :root { --header-h: 64px; }
  .brand img { height: 40px; }
}

/* ---- 17a. Tap targets ----
   WCAG 2.2 asks for 24px minimum; 44px is the iOS guideline and the one worth
   hitting for a site whose visitors include people with motor and vision
   disability. The links themselves were 19px tall — the text height, with no
   padding around it. */
@media (max-width: 1000px) {
  .site-footer li { margin-bottom: 0; }
  .site-footer li a,
  .nav a {
    display: flex; align-items: center;
    min-height: 44px;
  }
  .site-footer li a { padding-block: .35rem; }

  /* inline links inside body copy get a bigger hit area without changing how
     the sentence sets — vertical padding only, so line boxes stay put */
  main p > a, main li > a { padding-block: .3rem; }

  /* the remaining offenders the audit named individually. Each is a link that
     sits on its own line already, so making it a 44px flex box costs nothing
     in layout and makes it a comfortable thumb target. */
  .brand,
  .card__more a,
  .contact-item a,
  .res-crisis__num a,
  .res-crisis__site a,
  .res-emergency {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* the crisis numbers wrap, so they need to grow downward, not clip */
  .res-crisis__num a, .res-crisis__site a, .res-emergency { flex-wrap: wrap; }
  /* "000" is three characters, so height alone still leaves it 36px wide.
     It is the most important link on the site — pad it out to a full target.
     Sitting at the end of its sentence, the extra width reads as emphasis. */
  .res-emergency { min-width: 44px; justify-content: center; padding-inline: .35rem; }

  /* WCAG 2.2 puts the floor at 24px. The label around each box is already
     54px tall and fully clickable, so this is about the box being an easy
     target in its own right rather than a 21px speck. */
  .check input { width: 24px; height: 24px; }
}

/* ---- 17b. Vertical rhythm ----
   The clamp() minimums were tuned for desktop and never came down far enough.
   On a 390px screen 56px of padding above AND below every section is most of
   a thumb-scroll spent on nothing. */
@media (max-width: 720px) {
  .section { padding: 2.5rem 0; }
  .section--tight { padding: 1.75rem 0; }
  .section--flush-top { padding-top: 0; }
  .section-head { margin-bottom: 1.75rem; }
  .grid { gap: 1rem; }

  .page-hero { padding: 2.25rem 0 2.5rem; }
  .hero { padding: 2.5rem 0 3rem; }
  /* at 1.1rem/1.7 the Services intro ran to eight lines and filled the screen
     on its own, so the first card was never in view with it */
  .page-hero p, .hero p { font-size: 1rem; line-height: 1.55; }
  .page-hero__lead { margin-bottom: .8rem; }

  /* headings were sized against a 1180px canvas; the clamp minimums are still
     too big when the container is 350px wide */
  h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  h2 { font-size: clamp(1.45rem, 6vw, 1.9rem); }
  h3 { font-size: 1.15rem; }
  body { font-size: 1rem; line-height: 1.65; }

  .card { padding: 1.25rem; border-radius: var(--r-md); }
  .service-col { padding: 0; }
  .service-col__head { padding: 1.15rem 1.25rem; }
  .service-col__head h3 { font-size: 1.12rem; }
  .service-col__body { padding: 1.25rem; }
  .cta-band, .start-here, .founder-note, .mvv, .free-chat, .res-group, .form-card {
    padding: 1.5rem 1.25rem; border-radius: var(--r-lg);
  }
  .icon-badge { width: 48px; height: 48px; border-radius: 15px; margin-bottom: .8rem; }
  .icon-badge svg { width: 24px; height: 24px; }
}

/* ---- 17c. Buttons ----
   Two pill buttons side by side on a 350px container leaves each about 160px
   wide, which wraps their labels to two lines. Stacked and full-width they
   stay one line and become far easier to hit. */
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; gap: .7rem; }
  .btn-row .btn { width: 100%; }
  .btn { padding: .95rem 1.25rem; }
}

/* ---- 17d. Menu drawer ----
   The drawer is fixed, so the page underneath used to keep scrolling behind
   it. main.js now locks the body while it is open; this is the backdrop that
   makes the lock legible, plus the safe-area padding a notched phone needs. */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(27, 16, 51, .45);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1001px) { .nav-backdrop { display: none; } }

@media (max-width: 1000px) {
  .nav {
    z-index: 101;
    padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .nav a { padding: .6rem 1rem; font-size: 1.02rem; }
  .nav > .btn { min-height: 52px; }
  /* the drawer is a scroll container of its own once the body is locked */
  .nav.is-open { overscroll-behavior: contain; }
}
/* held on <html> by main.js while the drawer is open */
.nav-locked { overflow: hidden; }

/* ---- 17e. Phone quick-action bar ----
   The phone number used to sit only in the footer, which on the Services page
   was 8,000px down. This puts calling and referring one thumb-reach away on
   every page. Phones only — from 721px up the header CTA already does it. */
.mobile-bar { display: none; }

@media (max-width: 720px) {
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 98;
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    padding: .55rem var(--gutter);
    padding-bottom: calc(.55rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px rgba(45, 16, 92, .10);
  }
  .mobile-bar__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 50px; padding: .5rem .6rem;
    font-family: var(--font-head); font-weight: 600; font-size: .95rem;
    border-radius: 100px; text-decoration: none;
    color: var(--on-accent);
  }
  .mobile-bar__btn svg { width: 18px; height: 18px; flex: none; }
  /* both accents carry the dark ink, per the rule at the top of this file */
  .mobile-bar__btn--call { background-image: var(--grad-chip); }
  .mobile-bar__btn--referral { background-image: var(--grad-pink); }

  /* clear the bar so it never covers the last line of the footer */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  /* the drawer sits above the bar, so the bar hides while it is open */
  .nav-locked .mobile-bar { opacity: 0; visibility: hidden; }
}

/* ---- 17f. Odds and ends ---- */
/* belt and braces against a stray wide child; `clip` (not `hidden`) so it
   cannot silently break position: sticky on the header */
html, body { overflow-x: clip; }

@media (max-width: 720px) {
  /* long addresses and phone numbers must not force a sideways scroll */
  .contact-item a, .res-list a { overflow-wrap: anywhere; }
  .res-list { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .site-footer img.footer-logo { height: 58px; }
  /* the summary is the primary control on a card — give it the full width so
     the whole strip is tappable, not just the pill */
  .service-col__detail > summary { width: 100%; justify-content: space-between; min-height: 48px; }
  .faq__q { padding: 1rem 1.1rem; min-height: 56px; }
  .and-more { padding: 1.25rem; }
}

/* ---------- 18. Motion ----------
   Reveal-on-scroll hides content until main.js observes it, so the hiding is
   gated on scripting being available to undo it. With JavaScript off the
   content is simply visible and unanimated — without this gate the whole page
   below the hero stayed blank. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .card--hover:hover { transform: none; }
}

/* ---------- 19. Print ---------- */
@media print {
  .site-header, .nav, .cta-band, .site-footer, .skip-link, .btn,
  .mobile-bar, .nav-backdrop { display: none !important; }
  body { color: #000; font-size: 11pt; padding-bottom: 0; }
  .hero, .page-hero { background: none !important; color: #000; padding: 0 0 1rem; }
  .hero h1, .page-hero h1, .hero p, .page-hero p { color: #000 !important; }
  .card, .faq { break-inside: avoid; box-shadow: none; }
  .faq__a { max-height: none !important; padding: 0 1.4rem 1rem !important; }
  /* the service cards and the founder note are forced open by the beforeprint
     handler in main.js — a closed <details> can't be revealed from CSS alone */
  .service-col__detail > summary, .read-more > summary { display: none !important; }
  .service-col__extra { animation: none; }
}