@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Mulish:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Sopris.ai — Design System
   Built to Brand Guidelines v2.0 (22 July 2026)
   ========================================================================== */

:root {
    /* --- Greens (approx. 20% of surface area) --- */
    --color-forest:        #1F4F2C;  /* Deep Forest — headings, primary buttons */
    --color-forest-deep:   #17381F;  /* derived — footer, for tonal separation */
    --color-aspen:         #4E8B5A;  /* Aspen Green — hovers, secondary accents */
    --color-forest-hero:   #2F6B3D;  /* Mountain green (Brand Guidelines v2.0) — homepage and
                                         interior page headers. Confirmed via live A/B test
                                         2026-08-03 against #17381F and Aspen #4E8B5A. */

    /* --- Neutrals (approx. 70%) --- */
    --color-cream:         #FAF3E6;  /* Warm Cream — page background (sampled from v2 mockup) */
    --color-paper:         #F7F0E3;  /* Soft Paper — cards, alternating bands */
    --color-tan:           #EAE2CA;  /* Deep Tan — callout bands, emphasis blocks */
    --color-white:         #FFFFFF;
    --color-border:        #E6DCCB;  /* derived warm hairline */

    /* --- Accents (approx. 10%) --- */
    --color-terracotta:    #BC5E28;  /* Burnt Terracotta — all primary CTAs */
    --color-terracotta-dk: #9C4C1F;  /* derived — CTA hover */
    --color-sandstone:     #DD9357;  /* Sandstone — light accent, on-dark links */

    /* --- Text --- */
    --color-text:          #28323E;  /* Body Text — testing Ink Navy, was #4F463B brown */
    --color-text-muted:    #575F68;  /* derived from Ink Navy, was #7A6E60 (derived from old brown) */
    --color-text-on-dark:  rgba(255, 248, 236, 0.82);

    /* --- Type --- */
    --font-display: 'Fraunces', 'Georgia', serif;
    --font-body:    'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* --- Spacing scale --- */
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;

    /* --- Section rhythm ---
       Vertical padding inside every band. Kept separate from --space-2xl so the
       page rhythm can be tuned without disturbing card and grid spacing that
       happens to use the same step. Two bands stacked = 2 x --section-y. */
    --section-y:    4rem;    /* was --space-2xl (6rem) */
    --section-y-sm: 2.75rem; /* under 968px */

    /* --- Structure --- */
    --width-max:    1240px;
    --width-narrow: 1080px;  /* inset measure — see .section-container--narrow */
    --width-text:   68ch;
    --radius-sm:    6px;
    --radius-md:    12px;
    --radius-lg:    20px;
    --shadow-soft:  0 1px 2px rgba(31, 79, 44, 0.04),
                    0 8px 24px rgba(31, 79, 44, 0.06);
    --shadow-lift:  0 2px 4px rgba(31, 79, 44, 0.06),
                    0 16px 40px rgba(31, 79, 44, 0.10);
}

/* --- Legacy aliases -------------------------------------------------------
   The other eight pages still reference the v1 variable names. These keep
   them rendering correctly until each page is updated. Do not use in new work. */
:root {
    --color-green-dark:   var(--color-forest);
    --color-green-light:  var(--color-aspen);
    --color-cream-light:  var(--color-cream);
    --color-orange:       var(--color-terracotta);
    --color-orange-dark:  var(--color-terracotta-dk);
    --color-text-dark:    var(--color-text);
    --color-text-light:   var(--color-text-muted);
    --font-serif:         var(--font-display);
    --font-sans:          var(--font-body);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

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

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    color: var(--color-text);
    background-color: var(--color-cream);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--color-sandstone); color: var(--color-forest); }

:focus-visible {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 3px;
    border-radius: 2px;
}

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

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-forest);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: var(--space-sm);
    text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); font-weight: 400; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.85rem); font-weight: 400; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); }
h4 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700;
     letter-spacing: 0.06em; text-transform: uppercase; }

p { margin-bottom: var(--space-md); max-width: var(--width-text); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--color-terracotta);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--color-terracotta-dk); }

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: var(--space-xs);
    display: block;
}

.highlight { color: var(--color-terracotta); font-weight: 600; }

/* ==========================================================================
   Navigation
   ========================================================================== */

nav {
    background: var(--color-cream);
    padding: var(--space-sm) var(--space-lg);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--color-border);
}

.nav-container {
    max-width: var(--width-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--color-forest);
    flex-shrink: 0;
}

.logo img { height: 46px; width: auto; }

/* When the image lockup is present, the text fallback is redundant */
.logo img + .logo-text { display: none; }

.nav-links {
    display: flex;
    gap: var(--space-lg);
    list-style: none;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Scoped with :not(.cta-button) deliberately.
   Previously this rule was plain `.nav-links a`, which matches the CTA too.
   Class + element (0,1,1) outranks the bare `.cta-button` class (0,1,0), so it
   silently overrode the button's own colour and weight — the button was
   rendering in body-text brown at 2.10:1 instead of cream at weight 600.
   Excluding the button here keeps `.cta-button` the single source of truth
   for how that button looks. */
.nav-links a:not(.cta-button) {
    color: var(--color-forest);      /* was --color-text (body brown) — nav read as body copy */
    font-size: 1.0625rem;            /* 17px, was 15px */
    font-weight: 500;
    padding-bottom: 2px;
    border-bottom: 1.5px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:not(.cta-button):hover {
    color: var(--color-terracotta-dk);   /* 5.49:1 on cream — resting state is already forest */
    border-bottom-color: var(--color-terracotta);
}

/* "You are here". The underline mechanism already existed for hover; this makes
   it persistent on the current page. Add aria-current="page" to the matching
   link in each page's nav — it drives both this style and screen readers. */
.nav-links a:not(.cta-button)[aria-current="page"] {
    border-bottom-color: var(--color-terracotta);
    font-weight: 600;
}

.cta-button {
    background: var(--color-terracotta);
    color: var(--color-cream);
    padding: 0.7rem 1.35rem;
    border-radius: var(--radius-sm);
    /* 19px at weight 700 clears the WCAG large-text threshold (18.66px bold),
       which drops the required contrast from 4.5:1 to 3:1. Cream on terracotta
       is 3.99:1, so it passes at this size and weight but not below it.
       Don't reduce either value without darkening the background. */
    font-weight: 700;
    font-size: 1.1875rem;
    transition: background 0.2s ease;
}

.cta-button:hover { background: var(--color-terracotta-dk); color: var(--color-cream); }

/* "You are here". Broadened from [aria-current="page"] to catch [aria-current="true"]
   too — the Services parent uses "true" (a generic "in this section" cue) rather
   than "page", since it isn't literally the page you're on when you're one level
   into a service landing page. */
.nav-links a:not(.cta-button)[aria-current] {
    border-bottom-color: var(--color-terracotta);
    font-weight: 600;
}

/* ==========================================================================
   Services nav dropdown
   No JS. <details>/<summary> supplies click-toggle, keyboard support, and an
   implicit expanded state that browsers expose to assistive tech as they would
   a hand-written aria-expanded — without the staleness risk of a static
   attribute we can't update without a script.
   ========================================================================== */

.nav-dropdown { position: relative; }

/* Descendant combinators throughout this block deliberately, not child (>) —
   .nav-dropdown is the <li>, but <summary> and [open] live one level deeper
   on the <details> it wraps. */
.nav-dropdown summary {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
    cursor: pointer;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::marker { content: ""; }

/* The link inside summary carries all real nav-link styling via the existing
   .nav-links a rule (it's a descendant, so that selector already reaches it).
   This just stops the summary's own box from taking on link color/underline. */
.nav-dropdown summary > a { border-bottom: inherit; }

.nav-dropdown .chevron {
    font-size: 0.7em;
    color: var(--color-forest);
    transition: transform 0.2s ease;
}

.nav-dropdown:hover .chevron,
.nav-dropdown:focus-within .chevron,
.nav-dropdown details[open] .chevron {
    transform: rotate(180deg);
}

/* .nav-dropdown-menu is a sibling of <details>, not its child. Native
   <details> only renders summary's sibling content when open — CSS can't
   reliably override that hidden-content-model behavior, so the actual menu
   lives outside it and reacts to details[open] via a sibling selector below.
   <details> here exists purely to supply the click/keyboard toggle and its
   built-in expanded-state semantics, not to hold the revealed content. */

.nav-dropdown-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--space-xs);
    min-width: 230px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    padding: var(--space-2xs) 0;
    z-index: 1001;

    /* Visibility is driven entirely by our own rules below, not by the
       details/summary content model, so hover can open it as well as click. */
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown details[open] ~ .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu li { display: block; }

.nav-dropdown-menu a {
    display: block;
    padding: var(--space-2xs) var(--space-sm);
    font-size: 0.9375rem;
    white-space: nowrap;
    border-bottom: none !important;
}

.nav-dropdown-menu a:hover { background: var(--color-paper); }

.nav-dropdown-menu a[aria-current="page"] {
    color: var(--color-terracotta-dk);
    font-weight: 600;
}

@media (max-width: 640px) {
    /* No hover, no absolute panel — the four services render as a plain
       indented list that sits open under "Services" at all times. */
    /* flex-basis alone forces this item onto its own row; DOM order (right
       after Home) already puts it where it needs to be, so no `order`. */
    .nav-dropdown { flex-basis: 100%; }

    .nav-dropdown .chevron { display: none; }

    .nav-dropdown-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        margin: var(--space-2xs) 0 0;
        padding: 0 0 0 var(--space-lg);
        text-align: left;
    }

    .nav-dropdown-menu a { padding: var(--space-3xs, 0.25rem) 0; }
}

/* ==========================================================================
   Sections & bands
   ========================================================================== */

section { padding: var(--section-y) var(--space-lg); }

.section-container,
.hero-container { max-width: var(--width-max); margin: 0 auto; }

/* Inset measure. A banded section runs its background edge to edge but pulls its
   content in tighter than the section above it. The change of measure is what
   tells the eye a new section started — it does the job the removed heading
   used to do, and costs no vertical space. */
.section-container--narrow { max-width: var(--width-narrow); }

.band-cream  { background: var(--color-cream); }
.band-paper  { background: var(--color-paper); }
.band-tan    { background: var(--color-tan); }
.band-white  { background: var(--color-white); }
.band-forest { background: var(--color-forest); color: var(--color-text-on-dark); }
.band-forest h1, .band-forest h2, .band-forest h3 { color: var(--color-cream); }

/* Hairline at every light-band boundary. Terminates one band and starts the
   next with a crisp edge rather than a fade, and adds no vertical space.
   The dark bands don't need it — the tonal step already reads as an edge. */
.band-cream,
.band-paper,
.band-tan,
.band-white { border-top: 1px solid var(--color-border); }

.section-header { text-align: center; margin-bottom: var(--space-xl); }

/* Interior page header — shallower than the homepage hero */
.page-header {
    background: var(--color-cream);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.page-header .section-container { max-width: var(--width-max); }
.page-header h1 { margin-bottom: var(--space-xs); }
.page-header .hero-subtitle { margin-bottom: 0; font-size: 1.125rem; }

/* Reversed variant, matching the homepage's hero/tan/cream progression
   (see --color-forest-hero). Scoped to a modifier rather than changing
   .page-header itself, since that shared class also renders plain on
   every other interior page. Covers both subtitle classes in use across
   pages — services.html uses .section-subtitle, resources.html and the
   four landing pages use .hero-subtitle. */
.page-header--forest {
    background: var(--color-forest-hero);
    border-bottom-color: transparent;
}
/* Centers this variant's .section-container by default, so pages using it
   (about.html included) don't need an inline text-align to get the same
   centered treatment already used on the other page-header--forest pages. */
.page-header--forest .section-container { text-align: center; }
.page-header--forest h1,
.page-header--forest .section-subtitle,
.page-header--forest .hero-subtitle { color: var(--color-paper); }
/* .hero-subtitle inherits the global `p { max-width: var(--width-text); }`
   rule, which narrows it below the container's width — without auto
   margins that narrower box sits flush left despite the centered
   ancestor, same issue fixed for .service-meta above. */
.page-header--forest .hero-subtitle {
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}
.page-header--forest .section-badge {
    color: var(--color-paper);
    border-color: var(--color-paper);
}
/* .service-meta's default terracotta is low-contrast on this dark green.
   Deep Tan gives a cleaner, more neutral contrast than the warmer/more
   orange Sandstone did.
   Centering needs margin:auto, not just text-align: the global `p { max-width:
   var(--width-text); }` rule (styles.css ~line 137) narrows every <p>,
   .service-meta included, to less than the container's width. A narrower
   block with no auto margins sits flush left regardless of text-align,
   which is exactly why this line wasn't centering. */
.page-header--forest .service-meta {
    color: var(--color-tan);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-badge {
    display: inline-block;
    background: transparent;
    color: var(--color-terracotta);
    border: 1px solid var(--color-terracotta);
    padding: 0.4rem 0.9rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-sm);
}

.section-title { text-align: center; margin-bottom: var(--space-sm); }

.section-subtitle {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-muted);
    font-size: 1.125rem;
}

/* Tan callout block — the "Not sure which program is right for you?" pattern */
.callout {
    background: var(--color-tan);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    max-width: var(--width-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.callout-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.callout-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--color-forest);
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.callout-text { flex: 1; min-width: 260px; }
.callout-text h3 { margin-bottom: 0.15rem; }
.callout-text p { color: var(--color-text); margin-bottom: 0; font-size: 1rem; }
.callout .btn { flex-shrink: 0; }

@media (max-width: 640px) {
    .callout { padding: var(--space-md); }
    .callout .btn { width: 100%; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Reversed to Deep Forest per live test 2026-08-03 (see --color-forest-hero).
   Was white — see git history if reverting. */
.hero { background: var(--color-forest-hero); padding: var(--section-y) var(--space-lg); }

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--space-xl);
    align-items: center;
}

.hero-content h1 { margin-bottom: var(--space-md); color: var(--color-paper); }

.hero-subtitle {
    font-size: 1.1875rem;
    color: var(--color-paper);
    margin-bottom: var(--space-lg);
    line-height: 1.7;
    max-width: 46ch;
}

.hero-ctas { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* .btn-secondary's default forest-on-transparent styling would be invisible
   against the hero's own forest-family background. Instead of the reversed
   outline treatment used on dark bands elsewhere, this exchanges the
   background/text pair from .btn-primary next to it: cream fill with
   terracotta text, the inverse of that button's terracotta fill with cream
   text. Hover deepens the fill to Deep Tan rather than swapping to a second
   color, since terracotta text is already the accent note. */
.hero .btn-secondary {
    background: var(--color-cream);
    color: var(--color-terracotta);
    border-color: var(--color-cream);
}
.hero .btn-secondary:hover {
    background: var(--color-tan);
    color: var(--color-terracotta);
    border-color: var(--color-tan);
}

.hero-image {
    width: 100%;
    aspect-ratio: 5 / 4;
    height: auto;
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    padding: 0.9rem 1.75rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    border: 1.5px solid;
    display: inline-block;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
    background: var(--color-terracotta);
    color: var(--color-cream);
    border-color: var(--color-terracotta);
}
.btn-primary:hover {
    background: var(--color-terracotta-dk);
    border-color: var(--color-terracotta-dk);
    color: var(--color-cream);
}

.btn-secondary {
    background: transparent;
    color: var(--color-forest);
    border-color: var(--color-forest);
}
.btn-secondary:hover { background: var(--color-forest); color: var(--color-cream); }

.btn-tertiary {
    background: transparent;
    color: var(--color-terracotta);
    border-color: var(--color-terracotta);
}
.btn-tertiary:hover { background: var(--color-terracotta); color: var(--color-cream); }

/* ==========================================================================
   Service cards
   ========================================================================== */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

/* With no .section-header above it the grid is the first child, and that
   top margin would reintroduce the gap the band padding already provides. */
.services-grid:first-child { margin-top: 0; }

/* Four explicit columns — homepage only.
   The shared auto-fit rule above fits only three tracks inside the narrow
   measure, orphaning the fourth card onto its own row. This variant is scoped
   so services.html keeps the auto-fit behaviour it has today.
   The arithmetic lands exactly: 1080px measure - 3 gaps at 40px = 960 / 4 = 240px. */
.services-grid--four { grid-template-columns: repeat(4, 1fr); }

/* Equal-height cards with the CTA pinned to the bottom, so the four
   buttons sit on one line regardless of content length. position: relative
   anchors the stretched-link overlay added below to this card, not to
   whatever positioned ancestor happens to be further up the tree. */
.services-grid--four .service-card { display: flex; flex-direction: column; position: relative; }
.services-grid--four .service-card-content { display: flex; flex-direction: column; flex: 1; }

/* At 240px the card is narrower than the services page equivalent, so the
   title steps down one notch to keep two-word service names on one line. */
.services-grid--four .service-title { font-size: 1.2rem; }

/* The homepage cards carry no description — the explanation now lives on each
   landing page. Extra bottom padding keeps the shortened content box from
   looking squat under the 3:2 photo. */
.services-grid--four .service-card-content {
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + 0.25rem);
}

/* Breathing room between the eyebrow and the pinned button. */
.services-grid--four .service-meta { margin-bottom: var(--space-md); }

/* Full-width outline CTA, pinned to the bottom of the content box. Tertiary
   rather than primary: four solid terracotta fills in a row would compete
   with the hero's primary action. */
.services-grid--four .btn {
    margin-top: auto;
    width: 100%;
    padding: 0.75rem 1rem;
}

/* Stretched link — the button's anchor covers the whole card, so the entire
   card is one large tap target without nesting anchors. */
.services-grid--four .service-card .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
}

/* Hovering anywhere on the card fills the button, so the affordance tracks
   the enlarged hit area. */
.services-grid--four .service-card:hover .btn-tertiary {
    background: var(--color-terracotta);
    color: var(--color-cream);
}

@media (max-width: 1100px) {
    .services-grid--four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .services-grid--four { grid-template-columns: 1fr; }
}

.service-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.service-card-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--color-paper);
    overflow: hidden;
}
.service-card-image img { width: 100%; height: 100%; object-fit: cover; }

.service-card-content { padding: var(--space-md); }

/* Line icon in a solid circular chip, per brand guidelines */
.service-icon {
    width: 56px;
    height: 56px;
    background: var(--color-forest);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-sm);
    flex-shrink: 0;
}

.service-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--color-cream);
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Emoji fallback for pages not yet converted to SVG icons */
.service-icon { font-size: 1.5rem; color: var(--color-cream); }

.service-title { font-size: 1.35rem; margin-bottom: 0.25rem; color: var(--color-forest); }

.service-meta {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    font-weight: 600;
    margin: 0 0 var(--space-2xs);
}

.service-description {
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
    font-size: 1rem;
}

.service-features { list-style: none; margin-bottom: var(--space-sm); }

.service-features li {
    color: var(--color-text-muted);
    padding-left: 1.35rem;
    position: relative;
    margin-bottom: var(--space-2xs);
    font-size: 0.9375rem;
}

.service-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-sandstone);
}

.learn-more {
    color: var(--color-terracotta);
    font-weight: 600;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.2s ease;
}
.learn-more:hover { gap: 0.7rem; }

/* Plain, borderless variant used in the homepage overview row */
.service-card--plain {
    background: transparent;
    border: none;
    box-shadow: none;
    text-align: center;
}
.service-card--plain:hover { transform: none; box-shadow: none; }
.service-card--plain .service-icon { margin-left: auto; margin-right: auto; }
.service-card--plain .service-card-content { padding: 0; }

/* ==========================================================================
   Two-column
   ========================================================================== */

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    max-width: var(--width-max);
    margin: 0 auto;
}

.column-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.column-image img { width: 100%; height: 100%; object-fit: cover; }

/* Hero slots awaiting real photography. Keeps the box at full aspect ratio
   and a deliberately brand-colored fill, so the page proportions read
   correctly before the photo exists — no collapsed layout, no blank hole.
   The <img> underneath still tries to load; onerror only hides the <img>
   itself, so dropping a real file at the same path fills the slot with no
   markup changes needed. */
.column-image--placeholder { background: var(--color-tan); }

/* Vertical crop for portrait photography — 4/3 (the default) is too wide
   for a person shot without cropping in tight. */
.column-image--portrait { aspect-ratio: 4 / 5; }

.column-content h2 { margin-bottom: var(--space-md); }

/* ==========================================================================
   About
   ========================================================================== */

.about-section { background: var(--color-paper); }
.founder-bio { max-width: 780px; margin: 0 auto; }
.founder-bio h3 { color: var(--color-terracotta); margin-bottom: var(--space-lg); }

/* Bio lead-in line — bumped up from body size and weighted bold so it
   reads as a standalone opening statement rather than blending into the
   paragraphs that follow it. */
.bio-lead { font-size: 1.2em; font-weight: 700; color: var(--color-forest); }

/* Full-bleed valley photo — the one deliberately distinctive moment on this
   page. Breaks out of .section-container on purpose: no max-width, no side
   padding, no radius. Built from a real <img> (not a CSS background-image)
   so a missing file can gracefully fall back the same way
   .column-image--placeholder does elsewhere — background-image has no
   onerror equivalent to detect a failed load.
   .about-valley itself carries the fallback fill (Forest Deep) so the
   layout and heading still read correctly even with no photo in place. */
.about-valley {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: 420px;
    padding: 0;
    background: var(--color-forest-deep);
    overflow: hidden;
}
.about-valley img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Scrim: transparent at top so the photo reads clearly, reaching full
   strength by 65% down and holding there through the bottom edge — the
   heading sits inside that flat zone, not the transition, so its contrast
   doesn't depend on exactly where within the lower third it lands.
   rgba(23, 56, 31, ...) is Forest Deep; 0.72 against Warm Cream text
   clears 4.5:1 even in a worst-case (near-white photo pixel) blend. */
.about-valley::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(23, 56, 31, 0.72) 65%);
}
.about-valley-heading {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: var(--space-lg);
}
.about-valley-heading h2 { color: var(--color-cream); margin: 0; }

@media (max-width: 768px) {
    .about-valley { min-height: 260px; }
}

/* ==========================================================================
   Testimonial
   ========================================================================== */

.testimonial-section {
    background: var(--color-forest);
    color: var(--color-cream);
    padding: var(--section-y) var(--space-lg);
}

.testimonial-container { max-width: 820px; margin: 0 auto; text-align: center; }

.testimonial-text {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
    font-style: normal;
    color: var(--color-cream);
    line-height: 1.45;
    margin: 0 auto var(--space-md);
    max-width: none;
}

.testimonial-author {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    color: var(--color-sandstone);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-section { background: var(--color-paper); }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
    max-width: var(--width-max);
    margin: 0 auto;
}

.contact-info h2 { margin-bottom: var(--space-md); }
.contact-details { margin-top: var(--space-lg); }

.contact-detail { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); align-items: flex-start; }

.contact-detail-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--color-forest);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.contact-detail-icon svg {
    width: 20px; height: 20px;
    stroke: var(--color-cream); stroke-width: 1.6;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.contact-detail-text { color: var(--color-text-muted); }

.contact-form {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
}

.form-group { margin-bottom: var(--space-md); }

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-2xs);
    color: var(--color-forest);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-cream);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group select { appearance: none; cursor: pointer; padding-right: 2.25rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-forest) 50%),
                      linear-gradient(135deg, var(--color-forest) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat; }

.form-group textarea { resize: vertical; min-height: 130px; }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(188, 94, 40, 0.12);
}

.submit-button {
    background: var(--color-terracotta);
    color: var(--color-cream);
    border: none;
    padding: 0.9rem 1.75rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.submit-button:hover { background: var(--color-terracotta-dk); }

/* ==========================================================================
   Blog / resources
   ========================================================================== */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.blog-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.blog-image { width: 100%; aspect-ratio: 16 / 10; background: var(--color-paper); overflow: hidden; }
.blog-image img { width: 100%; height: 100%; object-fit: cover; }

.blog-content { padding: var(--space-md); }

.blog-date {
    color: var(--color-terracotta);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-2xs);
}

.blog-title { font-size: 1.25rem; margin-bottom: var(--space-2xs); color: var(--color-forest); }
.blog-excerpt { color: var(--color-text-muted); margin-bottom: var(--space-sm); font-size: 1rem; }

/* ==========================================================================
   Newsletter
   ========================================================================== */

.newsletter-section {
    background: var(--color-forest);
    color: var(--color-cream);
    padding: var(--section-y) var(--space-lg);
    text-align: center;
}

.newsletter-container { max-width: 560px; margin: 0 auto; }
.newsletter-section h2 { color: var(--color-cream); margin-bottom: var(--space-sm); }
.newsletter-section p {
    color: var(--color-text-on-dark);
    margin: 0 auto var(--space-lg);
    max-width: 46ch;
}

.newsletter-form { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

.newsletter-form input {
    flex: 1;
    min-width: 220px;
    padding: 0.85rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--color-cream);
    color: var(--color-text);
}
.newsletter-form input:focus { outline: none; border-color: var(--color-sandstone); }

.newsletter-form button {
    background: var(--color-terracotta);
    color: var(--color-cream);
    border: none;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.newsletter-form button:hover { background: var(--color-terracotta-dk); }

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
    background: var(--color-forest-deep);
    color: var(--color-text-on-dark);
    padding: var(--section-y) var(--space-lg) var(--space-lg);
}

.footer-container { max-width: var(--width-max); margin: 0 auto; }

.footer-content {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.footer-logo img { height: 42px; width: auto; margin-bottom: var(--space-sm); }

.footer-section h4 {
    color: var(--color-sandstone);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    margin-bottom: var(--space-sm);
}

.footer-section p { color: var(--color-text-on-dark); font-size: 0.9375rem; }

.footer-links { list-style: none; }
.footer-links li { margin-bottom: var(--space-2xs); }
.footer-links a { color: var(--color-text-on-dark); font-size: 0.9375rem; }
.footer-links a:hover { color: var(--color-sandstone); }

.footer-social { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.footer-social a { color: var(--color-text-on-dark); font-size: 1.25rem; }
.footer-social a:hover { color: var(--color-sandstone); }

.footer-divider {
    border-top: 1px solid rgba(255, 248, 236, 0.14);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    color: rgba(255, 248, 236, 0.55);
    font-size: 0.875rem;
}

.footer-bottom-links { display: flex; gap: var(--space-md); list-style: none; }
.footer-bottom-links a { color: rgba(255, 248, 236, 0.55); }
.footer-bottom-links a:hover { color: var(--color-sandstone); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.text-center { text-align: center; }
.mt-3 { margin-top: var(--space-xl); }
.mb-3 { margin-bottom: var(--space-xl); }
.max-width-container { max-width: 820px; margin: 0 auto; }

/* Warm placeholder for image slots awaiting real photography */
.img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: var(--space-sm);
}

/* Pre-wired image slots.
   The <img> points at its final filename and carries onerror="this.remove()".
   Until that file exists the image removes itself and this label shows through,
   naming the exact file the slot is waiting for. Drop the file into images/
   and it appears — no HTML editing needed. */
[data-slot] { position: relative; }

[data-slot]::before {
    content: attr(data-slot);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-paper);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-align: center;
    padding: var(--space-sm);
}

[data-slot] img { position: relative; z-index: 1; }

/* Wide landscape figure — a full-container band image */
.figure-wide {
    width: 100%;
    max-width: var(--width-max);
    margin: 0 auto;
    aspect-ratio: 5 / 2;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-paper);
}

.figure-wide img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 968px) {
    .figure-wide { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   Utility
   ========================================================================== */

/* Same clip-based hiding pattern already used inline for the newsletter
   email label — promoted to a real class so it doesn't need repeating. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ==========================================================================
   Services chooser page (services.html)
   ========================================================================== */

/* Eyebrow's default terracotta is low-contrast on the forest hero — same
   fix already applied to .service-meta and .section-badge in that context. */
.page-header--forest .eyebrow { color: var(--color-tan); }

/* Section 2 — "Start here if…" self-selection list. Each item is a single
   link so the whole row is clickable, not just the service name. */
.chooser-list {
    list-style: none;
    max-width: var(--width-text);
    margin: var(--space-lg) auto 0;
}

.chooser-list li + li { margin-top: var(--space-sm); }

.chooser-list a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.chooser-list a:hover {
    border-color: var(--color-terracotta);
    transform: translateX(2px);
}

.chooser-list strong { color: var(--color-forest); }

.chooser-list .chooser-target {
    color: var(--color-terracotta);
    font-weight: 600;
    white-space: nowrap;
}

/* Section 3 — comparison table. Desktop renders a real <table>; below 700px
   it's swapped for .compare-cards (four label/value blocks, one per
   service) rather than letting the table scroll or shrink. Both markups
   exist in the DOM at all times and CSS toggles which is visible, since
   the site has no JS to switch a breakpoint-dependent view. */
.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.compare-table th,
.compare-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.compare-table thead th {
    background: var(--color-forest);
    color: var(--color-cream);
    font-family: var(--font-display);
    font-weight: 500;
}

.compare-table thead th a { color: var(--color-cream); border-bottom: 1.5px solid transparent; }
.compare-table thead th a:hover { border-bottom-color: var(--color-sandstone); }

.compare-table tbody th {
    color: var(--color-forest);
    font-weight: 700;
    background: transparent;
}

/* Zebra striping on data rows only, not the header row. */
.compare-table tbody tr.row-alt { background: var(--color-paper); }

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }

.compare-cards { display: none; }

@media (max-width: 700px) {
    .compare-table { display: none; }
    .compare-cards { display: block; }
}

.compare-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.compare-card + .compare-card { margin-top: var(--space-md); }

.compare-card h3 { margin-bottom: var(--space-sm); }
.compare-card h3 a { color: var(--color-forest); }

.compare-card dl { display: grid; grid-template-columns: 1fr; gap: var(--space-xs) 0; }
.compare-card div + div { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-border); }
.compare-card dt { font-size: 0.8125rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.compare-card dd { margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 968px) {
    section, .hero, .newsletter-section, .testimonial-section, footer {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    section, .hero, .newsletter-section, .testimonial-section {
        padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm);
    }

    .nav-links { gap: var(--space-md); }

    .hero-container,
    .two-column,
    .contact-grid { grid-template-columns: 1fr; gap: var(--space-lg); }

    .hero-image { aspect-ratio: 16 / 10; }
    .column-image { aspect-ratio: 16 / 10; }

    .footer-content { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    /* The nav wraps to a second row rather than disappearing —
       every page keeps working navigation on a phone. */
    .nav-container { flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

    .nav-links {
        width: 100%;
        justify-content: center;
        /* Column gap tightened from --space-md to claw back some of the height
           the larger link type costs when the nav wraps on a phone. */
        gap: var(--space-2xs) var(--space-sm);
    }

    /* Same specificity trap as the desktop rule: an unscoped `.nav-links a`
       here (0,1,1) outranks `.cta-button` (0,1,0) and, being later in the file,
       was shrinking the button to 14px on phones. At 14px the WCAG large-text
       exemption no longer applies, so cream-on-terracotta dropped to a failing
       3.99:1 against the 4.5:1 requirement. Scoped, so the button holds 19px/700
       on mobile — which also gives a better tap target. */
    .nav-links a:not(.cta-button) { font-size: 1rem; }
    .cta-button { padding: 0.6rem 1.1rem; }

    .logo img { height: 38px; }

    .hero-ctas { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; }

    .footer-content { grid-template-columns: 1fr; gap: var(--space-md); }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form input, .newsletter-form button { width: 100%; }
}