/* =====================================================================
   Durable Life Skills, Inc. - Site Stylesheet
   Sections:
     1. Theme tokens (edit brand colors here)
     2. Base / reset / typography
     3. Layout utilities
     4. Buttons
     5. Top bar
     6. Header + navigation (desktop & mobile)
     7. Hero
     8. Quick-access cards
     9. Section headings
    10. About / mission
    11. Services grid
    12. Approach steps
    13. Service area
    14. Testimonials
    15. FAQ
    16. CTA band
    17. Page hero (inner pages)
    18. Service detail list
    19. Team
    20. Contact page + lead form
    21. Footer
    22. Accessibility helpers
    23. Responsive breakpoints (375 / 768 / 1024 / 1440)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. THEME TOKENS
   Brand colors sampled from the DLS logo (uploads/6778579c78d94.png).
   Every color used on the site derives from these. Contrast pairs that
   pass WCAG 2.1 AA are noted; do not use --gold as text on white.
   --------------------------------------------------------------------- */
:root {
  /* Primary - logo plum/purple ("DLS", company name)        rgb(32,16,80) */
  --purple-900: #1a0d42;
  --purple-800: #24145a;   /* primary brand; white text = 14.9:1 */
  --purple-700: #3a2a78;   /* hover; white text = 9.7:1 */
  --purple-100: #e9e4f4;   /* tint background */
  --purple-50:  #f4f1fa;

  /* Secondary - logo leaf/vine green                      rgb(0,72,32) */
  --green-800: #0e4f28;    /* secondary brand; white text = 9.6:1, on white = 9.6:1 */
  --green-700: #1b6b3a;    /* hover; white text = 6.3:1 */
  --green-500: #4a7c59;    /* tagline green (logo); decorative only */
  --green-100: #e4efe7;
  --green-50:  #f0f6f2;

  /* Accent - logo sun gold                                rgb(232,176,24) */
  --gold-500: #e9b121;     /* backgrounds/decoration only; --purple-800 on gold = 8.2:1 */
  --gold-700: #8a6208;     /* gold as TEXT on white = 5.5:1 (AA) */
  --gold-100: #fbf1d3;
  --gold-50:  #fdf8e9;

  /* Neutrals */
  --ink-900: #1c1a24;
  --ink-700: #46424f;      /* body text; on white = 8.9:1 */
  --ink-500: #6b6775;      /* meta text; on white = 5.2:1 */
  --line:    #e2dfe8;
  --paper:   #ffffff;
  --paper-2: #f8f7fb;

  /* Semantic aliases used throughout */
  --brand:          var(--purple-800);
  --brand-hover:    var(--purple-700);
  --brand-2:        var(--green-800);
  --brand-2-hover:  var(--green-700);
  --accent:         var(--gold-500);
  --accent-text:    var(--gold-700);
  --focus-ring:     0 0 0 3px #fff, 0 0 0 6px var(--gold-500);

  /* Type */
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Scale */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(26, 13, 66, 0.10);
  --shadow-sm: 0 2px 8px rgba(26, 13, 66, 0.08);
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 72px;

  /* Logo sizing rule: mark height per breakpoint (see §6) */
  --logo-mark: 40px;
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--paper);
  text-wrap: pretty;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--purple-800); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--green-800); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--purple-800); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
ul.plain { list-style: none; margin: 0; padding: 0; }
/* Eyebrow: section label with a gold rule that draws in when it enters the viewport */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .8125rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--green-800); margin-bottom: .75rem; }
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--gold-500); flex: none; transform-origin: left center; }
.eyebrow.is-animate { opacity: 0; transform: translateY(6px); }
.eyebrow.is-animate::before { transform: scaleX(0); }
.eyebrow.is-animate.is-seen { animation: eyebrow-in .55s ease-out forwards; }
.eyebrow.is-animate.is-seen::before { animation: eyebrow-rule .6s .15s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes eyebrow-in { to { opacity: 1; transform: none; } }
@keyframes eyebrow-rule { to { transform: scaleX(1); } }
.quick__card .eyebrow::before { display: none; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--gold-500); flex: none; transform-origin: right center; }
.section-head--center .eyebrow.is-animate::after { transform: scaleX(0); }
.section-head--center .eyebrow.is-animate.is-seen::after { animation: eyebrow-rule .6s .15s cubic-bezier(.65,0,.35,1) forwards; }
@media (prefers-reduced-motion: reduce) { .eyebrow.is-animate { opacity: 1; transform: none; } .eyebrow.is-animate::before, .eyebrow.is-animate::after { transform: none; } }
.lead { font-size: 1.2rem; color: var(--ink-700); }
.muted { color: var(--ink-500); }

/* ---------------------------------------------------------------------
   3. LAYOUT
   --------------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(44px, 5.5vw, 72px); }
.section--tint { background: var(--paper-2); }
.section--green { background: var(--green-50); }
.grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Photo placeholders - replace with real photography */
.photo { margin: 0; width: 100%; position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, var(--green-100), var(--purple-100)); display: grid; place-items: center; color: var(--purple-800); font-size: .9rem; text-align: center; padding: 1rem; border: 1px dashed rgba(36, 20, 90, .25); }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo:has(img) { border: 0; box-shadow: var(--shadow-sm); }
.photo:has(img) > span { display: none; }

/* ---------------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.5rem; border-radius: 999px; font-weight: 800; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s; font-family: var(--font-body); line-height: 1.2; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn--accent { background: var(--accent); color: var(--purple-900); border-color: var(--accent); }
.btn--accent:hover { background: #f0c145; border-color: #f0c145; color: var(--purple-900); }
.btn--outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--outline:hover { background: var(--purple-50); color: var(--brand); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--sm { min-height: 40px; padding: .5rem 1.1rem; font-size: .9375rem; }
.btn--block { width: 100%; }
.link-arrow { font-weight: 800; text-decoration: none; color: var(--green-800); white-space: nowrap; }
.link-arrow::after { content: " →"; }
.link-arrow:hover { color: var(--purple-800); }

/* ---------------------------------------------------------------------
   5. TOP BAR
   --------------------------------------------------------------------- */
.topbar { background: var(--purple-900); color: #fff; font-size: .875rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 40px; }
.topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { text-decoration: underline; color: #fff; }
.topbar__tag { color: var(--gold-500); font-family: var(--font-head); font-style: italic; letter-spacing: .02em; }
.topbar__contact { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   6. HEADER + NAV
   Logo treatment: the header is always WHITE so the plum/green/gold
   artwork keeps full contrast. The full lock-up (with tagline) is not
   legible under ~180px wide, so the header uses the emblem mark + an
   HTML wordmark set in the brand serif. Clear space = 25% of mark height.
   --------------------------------------------------------------------- */
.header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.header.is-scrolled { box-shadow: var(--shadow-sm); }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: calc(var(--logo-mark) * .22); text-decoration: none; padding: calc(var(--logo-mark) * .2) 0; color: var(--purple-800); transition: opacity .25s, transform .25s; }
.brand__monkey { height: calc(var(--logo-mark) * 1.15); width: auto; flex: none; }
.brand__wordmark { height: calc(var(--logo-mark) * 1.08); width: auto; max-width: min(52vw, 380px); object-fit: contain; object-position: left center; }
/* Home page: the hero shows the full lock-up top-right, so the compact
   monkey brand stays hidden until the visitor scrolls. */
.has-hero-logo .header:not(.is-scrolled) .brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
/* At rest the hero logo card sits over this slot; reserve its width so the nav clears it. */
.has-hero-logo:not(.logo-right) .header:not(.is-scrolled) .brand { width: clamp(340px, 36vw, 600px); flex: none; }
.has-hero-logo .header .nav { margin-left: auto; }
.nav a, .header__cta { white-space: nowrap; }
.has-hero-logo .header:not(.is-scrolled) .brand:focus-visible { opacity: 1; pointer-events: auto; }
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--ink-900); font-size: .975rem; }
.nav a:hover { background: var(--purple-50); color: var(--purple-800); }
.nav a[aria-current="page"] { color: var(--purple-800); box-shadow: inset 0 -3px 0 var(--gold-500); border-radius: 0; }
.header__actions { display: flex; align-items: center; gap: .75rem; }
.header__cta { display: none; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; color: var(--purple-800); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile drawer */
.mobile-nav { display: none; border-top: 1px solid var(--line); background: #fff; }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: .5rem 0; }
.mobile-nav a { display: block; padding: .85rem var(--gutter); font-weight: 700; color: var(--ink-900); text-decoration: none; min-height: 48px; }
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { background: var(--purple-50); color: var(--purple-800); }
.mobile-nav .mobile-nav__cta { padding: .75rem var(--gutter) 1.25rem; }

/* ---------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; z-index: 0; color: #fff; padding-block: 0 clamp(96px, 11vw, 150px); display: flow-root; }
.hero .container { display: flow-root; }
/* Variant A: while the page is at rest the whole hero sits above the sticky
   header (z 50) so the logo card can straddle it; once scrolling starts the
   hero drops beneath the header and the compact monkey brand fades in. */
.has-hero-logo:not(.logo-right) .header:not(.is-scrolled) ~ main .hero { z-index: 51; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--purple-900); overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.hero__bg::after { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(233,177,33,.35), rgba(233,177,33,0) 70%); pointer-events: none; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(26,13,66,.86) 0%, rgba(26,13,66,.66) 45%, rgba(26,13,66,.18) 100%); }
.hero__inner { max-width: 720px; }
/* Logo card: top-left, straddling the white header and the hero photo.
   Above the header only while the page is at rest; once scrolling starts
   it drops beneath the header and the compact monkey brand fades in. */
.hero__logo { position: relative; z-index: 2; background: rgba(255,255,255,.97); border-radius: var(--radius); padding: clamp(12px, 1.2vw, 16px) clamp(14px, 1.4vw, 18px); box-shadow: var(--shadow); width: min(100%, 320px); margin: -36px 0 clamp(28px, 4vw, 44px); border-top: 5px solid var(--gold-500); }
.hero__logo img { width: 100%; height: auto; }
/* Variant B (index-logo-right.html, body.logo-right): card pinned top-right of the
   hero, no header overlap; text column yields the space from 768px. */
.logo-right .hero { padding-top: clamp(72px, 10vw, 140px); }
.logo-right .hero .container { position: relative; }
.logo-right .hero__logo { margin: 0 0 1.75rem; }
.hero .eyebrow { color: var(--gold-500); }
.hero h1 { color: #fff; margin-bottom: 1rem; font-size: clamp(2.2rem, 5vw, 3.75rem); }
.hero h1 em { font-style: italic; color: var(--gold-500); }
.hero .lead { color: rgba(255,255,255,.9); font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 60ch; }
.hero__actions { margin-top: 1.75rem; }
.hero__note { margin-top: 1.5rem; font-size: .95rem; color: rgba(255,255,255,.75); }
.hero__proof { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18); }
.hero__proof div { font-size: .9rem; color: rgba(255,255,255,.8); }
.hero__proof strong { display: block; font-family: var(--font-head); font-size: 1.35rem; color: #fff; }
/* Scroll cue: sits in the hero's bottom padding, above the overlapping quick cards */
.hero__scroll { grid-column: 1 / -1; justify-self: center; display: flex; width: max-content; margin: clamp(20px, 3vw, 36px) auto 0; flex-direction: column; align-items: center; gap: .15rem; color: rgba(255,255,255,.85); text-decoration: none; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; min-height: 44px; min-width: 44px; justify-content: center; }
.hero__scroll:hover, .hero__scroll:focus-visible { color: var(--gold-500); }
.hero__scroll svg { width: 26px; height: 26px; animation: hero-bob 1.8s ease-in-out infinite; }
@keyframes hero-bob { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(7px); opacity: 1; } }
/* Variant C (index-hero-balanced.html, body.hero-balanced): copy splits into
   headline (left) and lead/actions/proof (right) so the hero fills its width. */
.hero-balanced .hero__inner { max-width: none; display: grid; gap: 1.5rem clamp(32px, 5vw, 80px); align-items: end; }
.hero-balanced .hero h1 { margin-bottom: 0; font-size: clamp(2.2rem, 4.6vw, 4.25rem); }
.hero-balanced .hero__proof { margin-top: 2rem; }

/* ---------------------------------------------------------------------
   8. QUICK-ACCESS CARDS (overlap the hero, as in the reference layout)
   --------------------------------------------------------------------- */
.quick { margin-top: clamp(-72px, -8vw, -110px); position: relative; z-index: 2; }
.quick__card { border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); color: var(--ink-700); display: flex; flex-direction: column; gap: .5rem; box-shadow: var(--shadow); border: 1px solid transparent; }
.quick__card h3 { margin: 0; }
.quick__card p { margin: 0 0 .75rem; }
.quick__card .btn { align-self: flex-start; margin-top: auto; }
.quick__card .eyebrow { margin-bottom: .25rem; }
.quick__card .ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: .5rem; }
.quick__card .ico svg { width: 26px; height: 26px; }
/* Tinted variants: pale brand tint, brand-colored heading/eyebrow/icon */
.quick__card--purple { background: #d6cdea; border-color: #c3b6e0; }
.quick__card--purple h3, .quick__card--purple .eyebrow { color: var(--purple-800); }
.quick__card--purple .ico { background: #c3b6e0; color: var(--purple-800); }
.quick__card--green { background: #c6ddcd; border-color: #a8cbb3; }
.quick__card--green h3, .quick__card--green .eyebrow { color: var(--green-800); }
.quick__card--green .ico { background: #a8cbb3; color: var(--green-800); }
.quick__card--gold { background: #f3e0a6; border-color: #ecd079; }
.quick__card--gold h3 { color: var(--purple-900); }
.quick__card--gold .eyebrow { color: var(--gold-700); }
.quick__card--gold .ico { background: #ecd079; color: var(--gold-700); }

/* ---------------------------------------------------------------------
   9. SECTION HEADINGS
   --------------------------------------------------------------------- */
.section-head { max-width: 720px; margin-bottom: clamp(20px, 3vw, 36px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.125rem; }

/* ---------------------------------------------------------------------
   10. ABOUT / MISSION
   --------------------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .6rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; }
.checklist li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: .2rem; border-radius: 50%; background: var(--green-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/14px no-repeat; }
.about__art { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.about__art .photo:nth-of-type(1) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.about__art .photo:nth-of-type(1) img { object-position: 50% 30%; }
.about__art .photo:nth-of-type(2) { aspect-ratio: 1; grid-row: 2; grid-column: 1; }
.about__art .photo:nth-of-type(3) { aspect-ratio: 1; border: 6px solid var(--gold-500); grid-row: 2; grid-column: 2; }
.about__frame { position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--gold-500); border-radius: var(--radius); z-index: -1; opacity: .6; }
.about__stat { position: static; margin-top: 1rem; grid-column: 1 / -1; background: var(--purple-800); color: #fff; border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); max-width: 240px; }
.about__stat strong { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--gold-500); }

/* ---------------------------------------------------------------------
   11. SERVICES GRID
   --------------------------------------------------------------------- */
.section--dark { background: var(--purple-900); color: rgba(255,255,255,.85); background-image: radial-gradient(ellipse at 15% 0%, rgba(14,79,40,.55), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(233,177,33,.18), transparent 50%); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: var(--gold-500); }
.section--dark .section-head p { color: rgba(255,255,255,.8); }
/* Journey line: draws itself across seven nodes when the section scrolls into view */
.services { overflow: hidden; background: #efecf5; background-image: radial-gradient(ellipse at 10% 0%, rgba(214,205,234,.8), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(198,221,205,.8), transparent 55%); border-top: 1px solid var(--line); }
.services::after { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; left: -20vw; bottom: -30vw; border-radius: 50%; background: radial-gradient(circle, rgba(233,177,33,.18), transparent 60%); pointer-events: none; animation: services-drift 14s ease-in-out infinite alternate; }
.services .section-head p { color: var(--ink-700); }
.services { position: relative; }
.services .container { position: relative; z-index: 1; }
@keyframes services-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(18vw, -10vw) scale(1.15); } }
.journey { position: relative; height: clamp(80px, 10vw, 130px); margin: .25rem auto clamp(40px, 4vw, 56px); max-width: 1000px; }
@media (max-width: 639px) { .journey { display: none; } }
.journey svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.journey__track { fill: none; stroke: rgba(36,20,90,.14); stroke-width: 2; vector-effect: non-scaling-stroke; }
.journey__line { fill: none; stroke: var(--gold-500); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 1px 3px rgba(138,98,8,.35)); }
.journey__node { position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #fff; border: 3px solid var(--gold-500); display: grid; place-items: center; text-decoration: none; transform: scale(0); box-shadow: 0 0 0 0 rgba(233,177,33,.5), 0 4px 12px rgba(26,13,66,.15); transition: transform .25s, box-shadow .25s; z-index: 1; }
.journey__node img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; }
.journey__node span { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-4px); white-space: nowrap; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--purple-800); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.journey__node:hover, .journey__node:focus-visible, .journey__node.is-hot { transform: scale(1.18) !important; box-shadow: 0 0 0 8px rgba(233,177,33,.25), 0 8px 20px rgba(26,13,66,.2); z-index: 2; animation-play-state: paused; }
.journey__node:hover span, .journey__node:focus-visible span, .journey__node.is-hot span { opacity: 1; transform: translateX(-50%) translateY(0); }
.services.is-inview .journey__node { animation: journey-pop .5s cubic-bezier(.34,1.56,.64,1) forwards, journey-pulse 3s ease-out infinite; }
.services.is-inview .journey__node:nth-child(2) { animation-delay: .1s, 2.4s; }
.services.is-inview .journey__node:nth-child(3) { animation-delay: .5s, 2.8s; }
.services.is-inview .journey__node:nth-child(4) { animation-delay: .85s, 3.2s; }
.services.is-inview .journey__node:nth-child(5) { animation-delay: 1.25s, 3.6s; }
.services.is-inview .journey__node:nth-child(6) { animation-delay: 1.6s, 4s; }
.services.is-inview .journey__node:nth-child(7) { animation-delay: 1.95s, 4.4s; }
.services.is-inview .journey__node:nth-child(8) { animation-delay: 2.3s, 4.8s; }
@keyframes journey-pop { to { transform: scale(1); } }
@keyframes journey-draw { to { stroke-dashoffset: 0; } }
.services.is-inview .journey__line { animation: journey-draw 2.4s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes journey-pulse { 0% { box-shadow: 0 0 0 0 rgba(233,177,33,.5); } 60%, 100% { box-shadow: 0 0 0 14px rgba(233,177,33,0); } }
.services .service-card { opacity: 0; transform: translateY(18px); }
.services.is-inview .service-card { animation: card-rise .6s ease-out forwards; }
.services.is-inview .service-card:nth-child(1) { animation-delay: .2s; } .services.is-inview .service-card:nth-child(2) { animation-delay: .3s; } .services.is-inview .service-card:nth-child(3) { animation-delay: .4s; } .services.is-inview .service-card:nth-child(4) { animation-delay: .5s; } .services.is-inview .service-card:nth-child(5) { animation-delay: .6s; } .services.is-inview .service-card:nth-child(6) { animation-delay: .7s; } .services.is-inview .service-card:nth-child(7) { animation-delay: .8s; } .services.is-inview .service-card:nth-child(8) { animation-delay: .9s; }
@keyframes card-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .journey__line { stroke-dashoffset: 0; } .journey__node { transform: scale(1); } .services .service-card { opacity: 1; transform: none; } }
.service-card__ico { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; background: var(--purple-100); color: var(--purple-800); margin-bottom: .5rem; transition: transform .25s; }
.service-card__ico img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(26,13,66,.25)); }
.service-card:hover .service-card__ico, .service-card.is-hot .service-card__ico { transform: scale(1.08) rotate(-4deg); }
.service-card.is-hot { box-shadow: 0 0 0 3px var(--gold-500), var(--shadow); border-color: transparent; }
.service-card:nth-child(3n+2) .service-card__ico { background: var(--green-100); color: var(--green-800); }
.service-card:nth-child(3n) .service-card__ico { background: var(--gold-100); color: var(--gold-700); }

.service-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: .5rem; transition: transform .18s, box-shadow .18s, border-color .18s; }
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.service-card__num { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--purple-100); color: var(--purple-800); font-weight: 800; font-family: var(--font-head); font-size: 1.05rem; margin-bottom: .5rem; }
.service-card:nth-child(3n+2) .service-card__num { background: var(--green-100); color: var(--green-800); }
.service-card:nth-child(3n) .service-card__num { background: var(--gold-100); color: var(--gold-700); }
.service-card { color: var(--ink-700); }
.service-card h3 { color: var(--purple-800); }
.service-card h3 { margin: 0; font-size: 1.15rem; }
.service-card p { margin: 0 0 .5rem; flex: 1; }
.service-card--cta { background: var(--gold-500); border-color: var(--gold-500); color: var(--purple-900); justify-content: center; }
.service-card--cta h3, .service-card--cta p { color: var(--purple-900); }

/* ---------------------------------------------------------------------
   12. APPROACH STEPS
   --------------------------------------------------------------------- */
.steps { counter-reset: step; position: relative; display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: minmax(0, 1fr); perspective: 1400px; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Each step is a card that folds open from its left edge, 1→4, each time the section enters view */
.step { position: relative; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 1.25rem 1.4rem 1.5rem; backdrop-filter: blur(6px); transform-origin: left center; transform-style: preserve-3d; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-head); font-size: 3rem; line-height: 1; color: var(--gold-500); display: inline-block; margin-bottom: .5rem; position: relative; }
/* Connector: runs from the card's right edge to the next card */
.step::after { content: ""; position: absolute; left: 100%; width: clamp(20px, 3vw, 32px); top: calc(1.25rem + 1.5rem); height: 2px; background: linear-gradient(90deg, var(--gold-500) 0 100%) no-repeat, rgba(255,255,255,.18); background-size: 0% 100%, 100% 100%; }
.step:last-child::after { display: none; }
.step h3 { font-size: 1.15rem; margin-top: .25rem; }
.step p { margin: .4rem 0 0; }
.steps.is-animate .step { opacity: 0; transform: rotateY(-78deg) translateX(-8px); }
.steps.is-animate .step::after { background-size: 0% 100%, 100% 100%; }
.steps.is-animate.is-seen .step { animation: step-fold .75s var(--d, 0s) cubic-bezier(.2,.8,.2,1) forwards; }
.steps.is-animate.is-seen .step::after { animation: step-link .45s calc(var(--d, 0s) + .55s) cubic-bezier(.65,0,.35,1) forwards; }
.steps .step:nth-child(1) { --d: .1s; } .steps .step:nth-child(2) { --d: .9s; } .steps .step:nth-child(3) { --d: 1.7s; } .steps .step:nth-child(4) { --d: 2.5s; }
@keyframes step-fold { 0% { opacity: 0; transform: rotateY(-78deg) translateX(-8px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes step-link { to { background-size: 100% 100%, 100% 100%; } }
@media (max-width: 1023px) { .step::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .steps.is-animate .step { opacity: 1; transform: none; animation: none !important; } .steps.is-animate .step::after { background-size: 100% 100%, 100% 100%; animation: none !important; } }

/* ---------------------------------------------------------------------
   12b. STATS BAND + PHOTO BAND (approach) + NEWS
   --------------------------------------------------------------------- */
.stats { background: var(--green-800); color: #fff; }
.stats .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.5rem; padding-block: clamp(32px, 4vw, 48px); }
.stat { border-left: 3px solid var(--gold-500); padding-left: 1rem; }
.stat strong { display: block; font-family: var(--font-head); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; color: #fff; }
.stat span { font-size: .95rem; color: rgba(255,255,255,.85); }
.band { position: relative; isolation: isolate; color: #fff; overflow: hidden; border-top: 6px solid var(--gold-500); }
.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(26,13,66,.86) 0%, rgba(26,13,66,.66) 45%, rgba(26,13,66,.18) 100%); }
.band h2, .band h3 { color: #fff; }
.band p { color: rgba(255,255,255,.85); }
.band .eyebrow { color: var(--gold-500); }
.band .step h3 { color: #fff; }
.section-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.section-head--row h2 { margin-bottom: 0; }
.news-card { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.news-card .photo { border-radius: 0; aspect-ratio: 16 / 9; box-shadow: none; background: var(--purple-100); }
.news-card .photo--brand { display: grid; place-items: center; background: var(--purple-100); }
.news-card .photo--brand img { width: 38%; height: auto; object-fit: contain; opacity: .9; }
.news-card__body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.news-card__meta { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-700); }
.news-card h3 { margin: 0; font-size: 1.15rem; }
.news-card h3 a { color: var(--purple-800); text-decoration: none; }
.news-card h3 a:hover { text-decoration: underline; }
.news-card p { margin: 0; flex: 1; font-size: .975rem; }

/* ---------------------------------------------------------------------
   13. SERVICE AREA
   --------------------------------------------------------------------- */
.area { background: var(--purple-800); color: #fff; border-radius: calc(var(--radius) + 6px); padding: clamp(28px, 4vw, 56px); display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); align-items: center; position: relative; overflow: hidden; }
.area { isolation: isolate; overflow: hidden; }
.area .area__list { grid-column: 1 / -1; }
.area__bg { position: absolute !important; inset: 0; z-index: -2 !important; }
.area__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.area::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(26,13,66,.86) 0%, rgba(26,13,66,.66) 45%, rgba(26,13,66,.18) 100%); }
.area::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; bottom: -160px; border-radius: 50%; border: 40px solid rgba(233,177,33,.18); pointer-events: none; }
.area > * { position: relative; z-index: 1; }

.area h2, .area h3 { color: #fff; }
.area p { color: rgba(255,255,255,.88); }
.area__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.area__list li { background: rgba(26,13,66,.55); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-sm); padding: .7rem .9rem; font-weight: 700; backdrop-filter: blur(4px); }
.area__list li span { display: block; font-weight: 400; font-size: .85rem; color: rgba(255,255,255,.88); }
.area address { font-style: normal; line-height: 1.5; }
/* Map (d3-rendered Colorado with pins) */
.area__map { position: relative; min-height: 260px; aspect-ratio: 4 / 3; }
.area__map svg { width: 100%; height: 100%; display: block; overflow: visible; }
.area__map .county { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.18); stroke-width: .6; opacity: 0; }
.area__map .county.is-served { fill: rgba(233,177,33,.22); stroke: rgba(233,177,33,.6); }
.area__map .state { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.area__map .pin { opacity: 0; }
.area__map .pin circle.dot { fill: var(--gold-500); stroke: var(--purple-900); stroke-width: 2; }
.area__map .pin.is-home circle.dot { fill: #fff; stroke: var(--gold-500); stroke-width: 3; }
.area__map .pin circle.ring { fill: none; stroke: var(--gold-500); stroke-width: 2; opacity: 0; }
.area__map .pin text { fill: #fff; font-family: var(--font-body); font-weight: 800; font-size: 15px; paint-order: stroke; stroke: rgba(26,13,66,.85); stroke-width: 3px; }
.area__map .pin.is-hot circle.dot, .area__map .pin:hover circle.dot { fill: #fff; stroke: var(--gold-500); r: 8; }
.area__list li[data-city] { cursor: default; transition: background .2s, border-color .2s; }
.area__list li.is-hot { background: rgba(233,177,33,.3); border-color: var(--gold-500); }
.area.is-seen .area__map .state { animation: map-draw 1.6s cubic-bezier(.65,0,.35,1) forwards; }
.area.is-seen .area__map .county { animation: map-fade .6s .9s ease-out forwards; }
.area.is-seen .area__map .pin { animation: pin-drop .55s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: var(--d, 1.4s); }
.area.is-seen .area__map .pin.is-home circle.ring { animation: pin-ring 2.4s calc(var(--d, 1.4s) + .5s) ease-out infinite; }
@keyframes map-draw { to { stroke-dashoffset: 0; } }
@keyframes map-fade { to { opacity: 1; } }
@keyframes pin-drop { 0% { opacity: 0; transform: translateY(-22px) scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes pin-ring { 0% { r: 8; opacity: .8; } 100% { r: 34; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .area__map .state { stroke-dashoffset: 0; } .area__map .county, .area__map .pin { opacity: 1; animation: none !important; } }
.area address a { color: var(--gold-500); }

/* ---------------------------------------------------------------------
   14. TESTIMONIALS
   --------------------------------------------------------------------- */
.quotes.section { padding-block: clamp(32px, 4vw, 52px); background: #ebe8f1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quotes .section-head { margin-bottom: clamp(12px, 1.5vw, 18px); }
.quotes .section-head h2 { margin-bottom: 0; }
.quotes .grid { gap: clamp(14px, 2vw, 20px); }
.quote { background: #fff; border-radius: var(--radius); padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; position: relative; box-shadow: var(--shadow-sm); }
.quote__stars { color: var(--gold-500); letter-spacing: .1em; font-size: .95rem; }
.quote blockquote { margin: 0; font-family: var(--font-head); font-size: 1.15rem; color: var(--ink-900); line-height: 1.5; }
.quote blockquote::before { content: "“"; color: var(--gold-500); font-size: 2.5rem; line-height: 0; vertical-align: -0.4em; margin-right: .1em; }
.quote figcaption { font-size: .95rem; color: var(--ink-500); }
.quote figcaption strong { color: var(--purple-800); display: block; }

/* ---------------------------------------------------------------------
   15. FAQ
   --------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--purple-800); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--purple-50); color: var(--purple-800); font-weight: 800; }
.faq details[open] summary::after { content: "–"; background: var(--gold-100); color: var(--gold-700); }
.faq details p { padding: 0 0 1.25rem; margin: 0; max-width: 70ch; }

/* ---------------------------------------------------------------------
   16. CTA BAND
   --------------------------------------------------------------------- */
.cta { background: var(--green-800); color: #fff; position: relative; isolation: isolate; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta:has(.cta__bg)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(14,79,40,.94) 0%, rgba(14,79,40,.8) 50%, rgba(14,79,40,.55) 100%); }
.cta .container { display: grid; gap: 1.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); padding-block: clamp(44px, 6vw, 72px); }
.cta h2 { color: #fff; margin: 0 0 .5rem; }
.cta p { color: rgba(255,255,255,.9); margin: 0; }
.cta .row { justify-content: flex-start; }

/* ---------------------------------------------------------------------
   17. PAGE HERO (inner pages)
   --------------------------------------------------------------------- */
.page-hero { position: relative; isolation: isolate; color: #fff; background: var(--purple-900); padding-block: clamp(56px, 8vw, 104px); overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(26,13,66,.86) 0%, rgba(26,13,66,.66) 45%, rgba(26,13,66,.18) 100%); }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: rgba(255,255,255,.88); }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: rgba(255,255,255,.7); }
.page-hero .lead { max-width: 65ch; }
.breadcrumb { font-size: .9rem; color: var(--ink-500); margin-bottom: .75rem; }
.breadcrumb a { color: var(--ink-500); }
.breadcrumb span { margin: 0 .4rem; }

/* ---------------------------------------------------------------------
   18. SERVICE DETAIL LIST (services.html)
   --------------------------------------------------------------------- */
.service-nav { position: sticky; top: calc(var(--header-h) + 16px); display: none; }
.service-nav ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.service-nav a { display: block; padding: .5rem 1rem; color: var(--ink-500); text-decoration: none; font-weight: 700; font-size: .95rem; margin-left: -2px; border-left: 2px solid transparent; }
.service-nav a:hover, .service-nav a.is-active { color: var(--purple-800); border-left-color: var(--gold-500); }
.service-detail { scroll-margin-top: calc(var(--header-h) + 24px); padding-block: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); align-items: start; }
.service-detail:last-child { border-bottom: 0; }
.service-detail h2 { font-size: 1.6rem; }
.service-detail__mascot { width: 72px; height: 72px; border-radius: 20px; background: var(--purple-100); display: grid; place-items: center; margin-bottom: .75rem; }
.service-detail__mascot img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(26,13,66,.25)); }
.service-detail:nth-of-type(3n+2) .service-detail__mascot { background: var(--green-100); }
.service-detail:nth-of-type(3n) .service-detail__mascot { background: var(--gold-100); }
.pillars { background: #efecf5; background-image: radial-gradient(ellipse at 10% 0%, rgba(214,205,234,.8), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(198,221,205,.8), transparent 55%); }
.service-detail .who { font-size: .9rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-700); }
.service-detail .photo { aspect-ratio: 4 / 3; }

/* ---------------------------------------------------------------------
   19. TEAM
   --------------------------------------------------------------------- */
.person { text-align: left; }
.person .photo { aspect-ratio: 1; border-radius: var(--radius); margin-bottom: .9rem; }
.person h3 { margin: 0; font-size: 1.1rem; }
.person .role { color: var(--green-800); font-weight: 700; font-size: .95rem; margin: .1rem 0 .5rem; }
.person p { font-size: .975rem; }

/* ---------------------------------------------------------------------
   20. CONTACT + LEAD FORM
   --------------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; }
.contact-info { display: grid; gap: 1.25rem; }
.contact-info__item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info__item .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--green-100); color: var(--green-800); display: grid; place-items: center; }
.contact-info__item .ico svg { width: 22px; height: 22px; }
.contact-info__item strong { display: block; color: var(--purple-800); font-family: var(--font-head); font-size: 1.05rem; }
.contact-info__item a { text-decoration: none; }
.contact-info__item a:hover { text-decoration: underline; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow); }
.form-card h2 { font-size: 1.5rem; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-weight: 800; font-size: .925rem; color: var(--ink-900); }
.field .hint { font-size: .85rem; color: var(--ink-500); }
.field input, .field select, .field textarea { font: inherit; color: var(--ink-900); background: #fff; border: 1.5px solid #c9c4d6; border-radius: var(--radius-sm); padding: .8rem .95rem; min-height: 48px; width: 100%; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--purple-800); box-shadow: 0 0 0 3px var(--purple-100); outline: none; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #b3261e; }
.field .error { color: #b3261e; font-size: .85rem; display: none; }
.field.has-error .error { display: block; }
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset legend { font-weight: 800; font-size: .925rem; color: var(--ink-900); margin-bottom: .5rem; padding: 0; }
.radio-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-row label { display: inline-flex; align-items: center; gap: .5rem; border: 1.5px solid #c9c4d6; border-radius: 999px; padding: .55rem .95rem; min-height: 44px; cursor: pointer; font-weight: 700; font-size: .95rem; }
.radio-row label:has(input:checked) { border-color: var(--purple-800); background: var(--purple-50); color: var(--purple-800); }
.radio-row input { accent-color: var(--purple-800); }
.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .925rem; }
.consent input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--purple-800); flex: none; }
.form-status { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius-sm); display: none; font-weight: 700; }
.form-status.is-success { display: block; background: var(--green-100); color: var(--green-800); }
.form-status.is-error { display: block; background: #fbe6e4; color: #8a1c15; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------------
   21. FOOTER
   The full lock-up (with tagline) needs a light ground, so it sits on a
   white panel inside the plum footer at ≥ 220px wide.
   --------------------------------------------------------------------- */
.footer { background: var(--purple-900); color: rgba(255,255,255,.82); padding-top: clamp(48px, 6vw, 72px); }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { color: var(--gold-500); text-decoration: underline; }
.footer__grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); }
.footer__logo { background: #fff; border-radius: var(--radius); padding: 14px 16px; display: block; width: 100%; max-width: 440px; }
.footer__logo img { width: 100%; height: auto; }
.footer h4 { color: #fff; font-family: var(--font-body); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; margin-bottom: 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer address { font-style: normal; line-height: 1.6; }
.footer .tagline { color: var(--gold-500); font-family: var(--font-head); font-style: italic; margin-top: 1rem; }
.footer__bottom { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid rgba(255,255,255,.14); padding: 1.25rem 0; font-size: .875rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; color: rgba(255,255,255,.7); }
.footer__bottom .row { gap: 1.25rem; }

/* ---------------------------------------------------------------------
   22. ACCESSIBILITY HELPERS
   --------------------------------------------------------------------- */
.skip-link { position: absolute; left: 8px; top: -100px; z-index: 100; background: var(--gold-500); color: var(--purple-900); padding: .75rem 1rem; border-radius: var(--radius-sm); font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------
   23. RESPONSIVE
   375px: single column, mark-only-ish brand (mark + 1-line wordmark)
   768px: two-column splits, full wordmark w/ sub-line
   1024px: desktop nav + header CTA, 3-col grids
   1440px: container caps at 1200px
   --------------------------------------------------------------------- */
@media (max-width: 479px) {
  .has-hero-logo:not(.logo-right) .header:not(.is-scrolled) .brand { width: 0; min-width: 0; flex: 1; }
  .header__actions { flex-shrink: 0; }
  .brand__wordmark { max-width: 46vw; }
  .topbar__tag { display: none; }
  .about__stat { max-width: none; }
}
@media (min-width: 640px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid--2 .field--full { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  :root { --logo-mark: 46px; --header-h: 80px; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area { grid-template-columns: 1.2fr 1fr; }
  .hero__logo { width: clamp(340px, 36vw, 600px); margin-top: -28px; }
  .logo-right .hero__logo { position: absolute; top: 0; right: 0; width: clamp(320px, 34vw, 520px); margin: 0; }
  .logo-right .hero__inner { max-width: calc(100% - clamp(320px, 34vw, 520px) - 40px); }
  .cta .container { grid-template-columns: 1fr auto; }
  .hero-balanced .hero__logo { margin-bottom: 2.5rem; }
  .service-detail { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: .8fr 1.2fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  :root { --logo-mark: 52px; --header-h: 88px; }
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .has-hero-logo:not(.logo-right) .header:not(.is-scrolled) .brand { width: clamp(300px, 28vw, 600px); }
  .hero__logo { width: clamp(300px, 28vw, 600px); }
  .nav-toggle, .mobile-nav { display: none !important; }
  .service-nav { display: block; }
  .logo-right .hero__inner { max-width: min(640px, calc(100% - clamp(320px, 34vw, 520px) - 48px)); }
  .services-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
  .footer__grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; }
  .hero-balanced .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .hero-balanced .hero__col--aside { padding-bottom: .35rem; }
  .hero-balanced .hero__proof { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: .6rem 1.75rem; }
  /* Badge pinned to the seam where the three photos meet (row 2, centered, pulled up half its height) */
  .about__stat { grid-row: 2; grid-column: 1 / -1; align-self: start; justify-self: center; transform: translateY(-50%); margin-top: 0; max-width: 300px; z-index: 1; padding: .8rem 1.1rem; font-size: .9rem; line-height: 1.45; text-align: center; border: 3px solid #fff; }
  .about__stat strong { font-size: 1.3rem; }
}
@media (min-width: 1440px) {
  body { font-size: 1.1rem; }
}

/* Print */
@media print {
  .topbar, .header__actions, .nav-toggle, .mobile-nav, .cta, .skip-link { display: none !important; }
  .header { position: static; }
  a { color: inherit; }
}