/* =============================================================================
   The Open Way Therapy — v1 stylesheet (scaffold)
   Design tokens are the approved set from the brand identity system §20.
   Structure: tokens → reset → a11y (skip-nav/focus) → base type → layout →
   components → section surfaces → responsive → print.
   Values come only from tokens; no magic hex outside :root.
   ============================================================================= */

:root {
    /* Core brand colors (brand system §9/§20) */
    --color-coastal-900: #183642;
    --color-mist-400:    #9AB8BF;
    --color-sage-400:    #A3B2A4;
    --color-cloud-050:   #FAF8F3;
    --color-sand-300:    #D8D0C3;
    --color-gold-500:    #C39A52;
    --color-gold-700:    #6A4C00;  /* darker gold accent for accessible large-text emphasis on frosted panels (>=3:1) */
    --color-graphite-900:#1F2953;

    /* Functional extensions */
    --color-mist-700:    #60757A;
    --color-success-700: #2F6B59;
    --color-warning-800: #7A5600;
    --color-error-700:   #9C3B3B;

    /* Semantic roles */
    --color-page:        var(--color-cloud-050);
    --color-surface:     #FFFFFF;
    --color-surface-soft:var(--color-sand-300);
    --color-text:        var(--color-graphite-900);
    --color-heading:     var(--color-coastal-900);
    --color-link:        var(--color-coastal-900);
    --color-action:      var(--color-coastal-900);
    --color-action-hover:var(--color-graphite-900);
    --color-action-text: var(--color-cloud-050);
    --color-border:      var(--color-mist-700);
    --color-focus:       var(--color-coastal-900);

    /* Focus (brand §11: ≥3px Midnight Coastal Blue, ≥3px offset) */
    --focus-ring:   3px solid var(--color-focus);
    --focus-offset: 3px;

    /* Typography */
    --font-display: "Manrope", "Avenir Next", "Segoe UI", Arial, sans-serif;
    --font-heading: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", Arial, sans-serif;
    --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;
    --font-ui:      "Plus Jakarta Sans", "Avenir Next", "Segoe UI", Arial, sans-serif;

    --weight-regular:  400;
    --weight-semibold: 600;
    --weight-extrabold:800;

    --text-small: 0.875rem;
    --text-ui:    0.9375rem;
    --text-body:  1rem;
    --text-lead:  clamp(1.125rem, 1.5vw, 1.375rem);
    --text-h3:    clamp(1.35rem, 2vw, 1.75rem);
    --text-h2:    clamp(1.75rem, 3vw, 2.75rem);
    --text-h1:    clamp(2.25rem, 4vw, 3.75rem);
    --text-display: clamp(2.5rem, 5vw, 4.5rem);

    /* Line height */
    --leading-tight:  1.05;
    --leading-normal: 1.65;

    /* Spacing (4px base) */
    --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
    --space-4: 1rem;    --space-6: 1.5rem;  --space-8: 2rem;
    --space-12:3rem;    --space-16:4rem;    --space-24:6rem;  --space-32:8rem;

    /* Shape + elevation */
    --radius-control: 0.75rem;
    --radius-card:    1rem;
    --radius-pill:    999px;
    --shadow-soft:    0 10px 30px rgba(24, 54, 66, 0.08);

    /* Motion */
    --duration-fast:     140ms;
    --duration-standard: 220ms;
    --duration-slow:     380ms;
    --ease-calm:         cubic-bezier(0.22, 1, 0.36, 1);

    /* Layout */
    --content-max: 80rem;
    --reading-max: 45rem;
}

/* Approved gradients (brand §10/§20) — available for hero/atmosphere; not required. */
:root {
    --gradient-ocean-horizon: linear-gradient(135deg, #183642 0%, #9AB8BF 55%, #FAF8F3 100%);
    --gradient-coastal-mist:  linear-gradient(180deg, #FAF8F3 0%, #D8D0C3 100%);
    --gradient-sage-reflection:linear-gradient(135deg, #A3B2A4 0%, #FAF8F3 100%);
}

/* --- Modern reset (BurdsNerds) -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, video, svg, picture { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; }

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

/* --- Accessibility: skip link + focus -------------------------------------- */
.skip-nav { position: absolute; left: -9999px; }
.skip-nav:focus-visible {
    position: fixed; top: var(--space-3); left: var(--space-3);
    z-index: 300;
    padding: var(--space-3) var(--space-4);
    background: var(--color-coastal-900); color: var(--color-cloud-050);
    border-radius: var(--radius-control);
}
*:focus { outline: none; }
*:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* --- Base typography ------------------------------------------------------- */
body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-text);
    background: var(--color-page);
}
h1, h2, h3 { color: var(--color-heading); line-height: var(--leading-tight); }
h1 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-h1); letter-spacing: -0.03em; }
h2 { font-family: var(--font-heading); font-weight: var(--weight-regular); font-size: var(--text-h2); letter-spacing: -0.02em; }
h3 { font-family: var(--font-heading); font-weight: var(--weight-regular); font-size: var(--text-h3); }
p  { max-width: var(--reading-max); }
a  { color: var(--color-link); text-underline-offset: 0.15em; } /* links keep a persistent underline (non-color cue) */

/* --- Layout ---------------------------------------------------------------- */
.section { padding-block: var(--space-16); }
.section__inner { width: min(100% - 2 * var(--space-4), var(--content-max)); margin-inline: auto; }
.prose { max-width: var(--reading-max); }
.prose > * + * { margin-top: var(--space-4); }

/* "How I can help" layout: Layer 1 recognition beside the office photo (help__grid),
   then Layer 2 areas/approaches as quiet supporting specificity (help__specifics).
   Mobile-first single column; two columns on wider viewports (see min-width block). */
.help__grid { display: grid; gap: var(--space-8); }
.help__media { margin: 0; }
.help__media img { width: 100%; height: auto; border-radius: var(--radius-card); } /* natural ~5:4, no crop */
/* Layer 2 group: centered beneath the full text/image row (restrained max-width so it
   doesn't stretch edge-to-edge and both columns keep breathing room). Group is centered,
   but the list text inside stays left-aligned (see .spec-list). */
.help__specifics { margin-top: var(--space-12); margin-inline: auto; max-width: 52rem; }
.help__specifics h3 { margin-bottom: var(--space-3); }
.help__cols { display: grid; gap: var(--space-8); }
/* Quiet, secondary list: smaller UI type + brand-gold marker so modalities never dominate
   and never read as cards/pills/filters (plain semantic lists). List text stays left-aligned. */
.spec-list { list-style: none; padding: 0; }
.spec-list > li { position: relative; padding-left: var(--space-4); font-size: var(--text-ui); }
.spec-list > li + li { margin-top: var(--space-2); }
.spec-list > li::before {
    content: ""; position: absolute; left: 0; top: 0.6em;
    width: 0.375rem; height: 0.375rem; border-radius: var(--radius-pill);
    background: var(--color-gold-500);   /* brand gold (was --color-mist-400) — marker only; body text stays dark */
}
.help__note { margin-top: var(--space-8); font-size: var(--text-small); color: var(--color-mist-700); }

/* --- Buttons (brand §15) --------------------------------------------------- */
.btn {
    display: inline-block;
    font-family: var(--font-ui); font-weight: var(--weight-semibold);
    min-height: 48px; padding: 0.85rem 1.6rem;
    border-radius: var(--radius-control);
    text-decoration: none;
    transition: background-color var(--duration-standard) var(--ease-calm);
}
.btn--primary { background: var(--color-action); color: var(--color-action-text); }
/* Gold hover with DARK text — graphite on gold is 5.38:1 (AA). White on gold
   would be 2.45:1 (fail), so the label darkens on hover to stay readable. */
.btn--primary:hover { background: var(--color-gold-500); color: var(--color-graphite-900); }

/* Compact secondary "directions" buttons: smaller siblings of the primary CTA.
   Brand §15 secondary treatment (transparent ground, Midnight Coastal Blue border + text,
   Warm Sand hover) keeps them clearly subordinate to the filled email button. Shared radius,
   font, and global focus ring. ~44px touch target, much smaller footprint than the primary. */
.btn--map {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0.4rem 0.95rem;
    font-size: var(--text-small);
    background: transparent; color: var(--color-coastal-900);
    border: 2px solid var(--color-coastal-900);
}
.btn--map:hover { background: var(--color-sand-300); color: var(--color-coastal-900); }
.btn--map:active { background: var(--color-sand-300); }

/* --- Masthead -------------------------------------------------------------- */
.masthead { background: var(--color-cloud-050); }

/* Crisis/support: a quiet, full-width utility strip above the brand band, so urgent
   support is available on first paint without being the brand's first emotional note.
   Warm Sand ground + Midnight Coastal Blue text ≈ 8.3:1 (AA); no red, no icon, small type. */
.crisis-utility { background: var(--color-sand-300); }
.crisis-utility__inner {
    width: min(100% - 2 * var(--space-4), var(--content-max)); margin-inline: auto;
    padding-block: var(--space-2); text-align: center;
}
.crisis-utility__text {
    max-width: none; font-family: var(--font-ui);
    font-size: var(--text-small); line-height: 1.4;
    color: var(--color-coastal-900);
}
.crisis-utility__text a { color: var(--color-coastal-900); font-weight: var(--weight-semibold); }

/* Brand band: a calm, centered logo lockup (the crisis strip sits above it). */
.masthead__inner {
    width: min(100% - 2 * var(--space-4), var(--content-max)); margin-inline: auto;
    display: flex; justify-content: center; align-items: center;
    padding-block: var(--space-4);
}
/* Brand system §7: the full lockup must not display below 240 CSS px wide; the desktop
   cap is trimmed ~13% (from 300px) so the centered masthead reads as calm, not oversized. */
.masthead__logo { width: clamp(240px, 40vw, 260px); }

/* --- Hero (full-bleed image + editorial coastal panel) --------------------- */
/* Mobile-first: the image fills the hero; a restrained, near-opaque Cloud White
   panel (Option B) carries the copy near the top over the calm sky, keeping the
   sandstone shelf + horizon visible below. Light panel + dark text guarantees
   contrast on any part of the image and avoids a heavy dark gradient. */
.section--hero {
    position: relative;
    min-height: min(88svh, 720px);
    display: flex;
    align-items: flex-start;      /* copy sits high, over the open sky */
    overflow: hidden;
    isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 58%;     /* keep horizon + sandstone shelf; trim excess sky. Validate per breakpoint. */
}
.hero__panel {
    position: relative; z-index: 1;
    width: min(100% - 2 * var(--space-4), 40rem);
    margin: var(--space-6) auto 0;          /* modest top offset so the CTA stays near the fold on phones */
    padding: var(--space-6);
    background: rgba(250, 248, 243, 0.50);   /* --color-cloud-050 @ 50% (frosted middle ground) */
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.hero__panel > * + * { margin-top: var(--space-4); }
.hero__lede { font-size: var(--text-lead); }
/* Dark text on the translucent panel (coastal/graphite ~12–13:1) so contrast holds even
   over the image bleed-through — mist-700 (~4.6:1 on solid) would fail once the panel is 0.94. */
.hero__tagline { font-family: var(--font-ui); letter-spacing: 0.02em; color: var(--color-coastal-900); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); max-width: none; }
.hero__microcopy { font-size: var(--text-small); color: var(--color-graphite-900); }
/* Emphasis on a single hero word ("different") — color only, no other type change.
   Brushed Gold (gold-500 #C39A52) fails large-text contrast on the frosted panel. Ochre Brown
   (warning-800 #7A5600) held AA on a solid panel, but at the approved 50% panel over the actual
   hero photo its worst case fell to ~2.89:1 (< 3:1 large). Gold-700 (#6A4C00) — a darker gold
   accent — restores ~3.46:1 worst-case on mobile (5.47:1 desktop), ≥3:1 large, keeping the gold
   character. (A brief 2026-08-25 switch to gold-500 was reverted here for AA; see project-decisions.) */
.hero__emphasis { color: var(--color-gold-700); }

/* --- About ----------------------------------------------------------------- */
.about__grid { display: grid; gap: var(--space-8); }
.about__media img { border-radius: var(--radius-card); }
.about__cred { font-size: var(--text-small); color: var(--color-mist-700); }

/* --- Availability (CA / CO) — subtle Warm Sand gradient (matches service card) */
.section--availability { background: linear-gradient(160deg, #D8CDBB 0%, #EDEDE0 100%); }
.availability__grid { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.availability__block {
    background: var(--color-cloud-050); border-radius: var(--radius-card);
    padding: var(--space-6);
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--space-3);
}
/* Decorative gold state icon (coastal / mountains). Headings carry the meaning, so the SVGs
   are aria-hidden; gold is on-brand for decorative sun/horizon + matching mountain line art. */
.state-icon { width: 3.5rem; height: auto; color: var(--color-gold-500); }
/* Short, centered decorative gold rule between each state heading and its description
   (brand: "small nonessential rules"). Not an <hr> — no semantic weight needed. */
.availability__block h3::after {
    content: ""; display: block;
    width: 72px; height: 2px; margin: var(--space-3) auto 0;
    background: var(--color-gold-500); border-radius: var(--radius-pill);
}

/* --- Approach (Mist Blue coastal gradient; matches service-card treatment) -- */
.section--mist { background: linear-gradient(160deg, #9AB8BF 0%, #DCE8EA 100%); }

/* --- Services ("Ways we can work together") — high-level, not a catalog ----- */
.services__intro { max-width: var(--reading-max); }
.services-grid { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.service { border-radius: var(--radius-card); padding: var(--space-6); }
/* Coordinated brand-derived tint gradients (subtle). Dark text (coastal h3 / graphite p)
   stays AA on the deepest stop of each: sand ~8:1, mist 6.65:1, sage 6.31:1. */
.service:nth-child(1) { background: linear-gradient(160deg, #D8CDBB 0%, #EDEDE0 100%); } /* Warm Sand tint */
.service:nth-child(2) { background: linear-gradient(160deg, #9AB8BF 0%, #DCE8EA 100%); } /* Mist Blue tint */
.service:nth-child(3) { background: linear-gradient(160deg, #A3B2A4 0%, #E4E9E3 100%); } /* Soft Sage tint */
.service h3 { margin-bottom: var(--space-2); }
.service p { max-width: none; }

/* --- Closing conversion (Starting is simple + contact) --------------------- */
/* One immersive band replaces the former two-column "Starting is simple" and the separate
   "Reach out" section. The water photo (ocean-cta) is a full-width atmospheric backdrop; a
   centered, translucent warm-white panel carries the process + the primary email action:
   the calm, symmetrical bookend to the asymmetric hero. Below it, a quiet utility band
   (phone + office + directions) returns to the cream page. Mobile-first: single column. */

/* Scene: full-bleed water behind a centered panel. Mirrors the hero's image treatment
   (absolute picture, object-fit: cover) but centered and quieter. */
.closing__scene {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
}
.closing__media { position: absolute; inset: 0; z-index: 0; }
.closing__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 50%;   /* calm center crop; the water frame around the panel stays useful at any size */
}

/* Centered translucent panel — relates to the hero card but wider, more horizontal, and
   quieter: no border, no shadow. Uses the SAME warm-white translucency as .hero__panel
   (the master) so the two read as intentional bookends. Caps near 70% of the content area. */
.closing__panel {
    position: relative; z-index: 1;
    width: min(100%, 56rem);
    padding: var(--space-8);
    background: rgba(250, 248, 243, 0.50);   /* --color-cloud-050 @ 50% — exact match to .hero__panel */
    border-radius: var(--radius-card);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-align: center;
}
.closing__panel > * + * { margin-top: var(--space-8); }

/* Conversion lead-in above the closing H2: a confident warm-gold kicker in the display face —
   smaller than the "Starting is simple" heading (--text-lead is ~half --text-h2) but clearly
   visible. Reuses the panel's own numeral accent (--color-warning-800, ~6.3:1 on the panel =
   AA) so it harmonizes with the 01/02/03 marks and echoes the hero's gold conversion emphasis.
   Centered by the panel's text-align; max-width:none matches .process__reassure so a short line
   truly centers on wide panels. No new token or value — all from the approved set. */
.closing__eyebrow {
    max-width: none;
    font-family: var(--font-display); font-weight: var(--weight-semibold);
    font-size: var(--text-lead);
    color: var(--color-warning-800);
}
/* Couple the kicker to its heading — tighter than the panel's default --space-8 rhythm — so the
   two read as one intentional lead-in, while the normal break to the process below is kept. */
.closing__eyebrow + h2 { margin-top: var(--space-4); }

/* Three editorial steps: typography + whitespace, never cards. Gold-family numerals
   (warning-800 Ochre Brown, the same warm accent as the hero's "different" — ~6.3:1 on the
   panel = AA), dark brand headings/body. Sequence is carried by the ordered list and the
   numerals, never by color alone. Mobile: a single stacked column in reading order. */
.process { list-style: none; padding: 0; display: grid; gap: var(--space-8); }
.process__step { max-width: none; }
.process__num {
    display: block;
    font-family: var(--font-display); font-weight: var(--weight-semibold);
    font-size: var(--text-h2); line-height: 1; letter-spacing: -0.01em;
    color: var(--color-warning-800);
}
.process__title { margin-top: var(--space-3); }
.process__detail { margin-top: var(--space-3); margin-inline: auto; max-width: 26rem; }

/* Reassurance, then the primary action: "what happens -> reassurance -> action".
   Dark text (not mist) so contrast holds over the translucent panel. */
.process__reassure { max-width: none; font-family: var(--font-ui); color: var(--color-coastal-900); }
.closing__action { max-width: none; }

/* Quiet utility band on the cream page: phone (secondary) + office + directions (utility).
   Understated text links keep the map destinations subordinate to the email CTA above. */
.utility { padding-block: var(--space-12); text-align: center; }
.utility > * + * { margin-top: var(--space-4); }
.utility__phone { max-width: none; }
.utility__office { max-width: none; font-size: var(--text-small); color: var(--color-mist-700); }
.utility__office-name { font-weight: var(--weight-semibold); }
.utility__directions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); }

/* --- Footer (dark) --------------------------------------------------------- */
.site-footer { background: var(--color-coastal-900); color: var(--color-cloud-050); }
.site-footer__inner {
    width: min(100% - 2 * var(--space-4), var(--content-max)); margin-inline: auto;
    padding-block: var(--space-16);
}
.site-footer__inner > * + * { margin-top: var(--space-4); }
.site-footer a { color: var(--color-cloud-050); }
.site-footer__brand { font-family: var(--font-display); font-weight: var(--weight-extrabold); }
.site-footer__crisis, .site-footer__copy { font-size: var(--text-small); color: var(--color-mist-400); max-width: none; }
/* Focus on the dark footer stays visible against both the link and the ground. */
.site-footer *:focus-visible { outline-color: var(--color-cloud-050); }

/* --- Responsive: hero enhancement + two-column about on wider viewports ----- */
@media (min-width: 48em) {
    /* Masthead: a slightly more generous vertical band on wider viewports. */
    .masthead__inner { padding-block: var(--space-6); }

    .section--hero { min-height: min(80vh, 820px); align-items: center; }
    /* Desktop enhances mobile: the panel becomes an editorial left column,
       letting the coastal scene breathe to its right. */
    .hero__panel { margin: 0; margin-inline: auto max(6vw, var(--space-16)); max-width: 34rem; padding: var(--space-8); }
    .about__grid { grid-template-columns: 5fr 7fr; align-items: center; }
    .availability__grid { grid-template-columns: 1fr 1fr; }
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    /* Closing conversion: immersive water height and generous panel padding. The three-step
       columnization happens later, at 64em, so the steps stay stacked through tablet widths. */
    .closing__scene { min-height: clamp(560px, 60vh, 700px); padding-block: var(--space-24); }
    .closing__panel { padding: var(--space-12); }
    /* How I can help: recognition text gets more width than the supporting office photo,
       and the Layer 2 areas/approaches sit side by side. */
    .help__grid { grid-template-columns: 3fr 2fr; gap: var(--space-12); align-items: center; }
    .help__cols { grid-template-columns: 1fr 1fr; }
}

/* --- Closing steps: three editorial columns only at desktop (~1024px / 64em), so the steps
   stay stacked through tablet widths (separate from the site's 48em enhancements). --------- */
@media (min-width: 64em) {
    .process { grid-template-columns: repeat(3, 1fr); gap: 0; }
    .process__step { padding-inline: var(--space-6); }
    .process__step + .process__step { border-inline-start: 1px solid rgba(24, 54, 66, 0.14); } /* coastal-900 @ 14% hairline */
}

/* --- Print ----------------------------------------------------------------- */
@media print {
    .section--hero { min-height: auto; }
    .hero__bg, .about__media { display: none; }
    body { background: #fff; color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}