/* ==========================================================================
   Self-hosted webfonts. No request leaves this server for typography, so the
   site sets no third-party connections at all (blueprint 2.8 / 17).
   Files: assets/fonts/*.woff2, latin subset only.
   ========================================================================== */


@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   STEPPING STONE HOMES — DESIGN TOKENS  v1.1
   Final Production & Developer Implementation Package
   18 August 2026 — red-team correction pass

   Changes from v1.0 (see the v1.1 doc, Section 7, for the full
   correction record): clarified brand-core vs UI-palette usage
   principle in comments (no token value changed); split teal
   token guidance so --ssh-teal-muted is never used for ordinary
   text links; strengthened the focus treatment from a single
   orange outline to a two-tone ring that stays visible on white,
   warm-stone, teal-tint and dark surfaces. Everything else is
   unchanged from v1.0 — no tokens were altered without a
   red-team reason.
   ========================================================= */

:root {
  /* ---- Brand core (fixed — from logo/brand kit, do not alter) ----
     Used for: the logo itself, and small brand-defining accents.
     Never redrawn, recoloured, or substituted. */
  --ssh-brand-teal:      #357D86;
  --ssh-brand-orange:    #F37B26;
  --ssh-brand-navy:      #17394B;

  /* ---- UI palette (refined for interface use) ----
     Principle (v1.1 clarification): brand-core colours stay fixed
     for the logo and brand-defining moments. This refined palette
     is used for interface components — including the primary
     button — where visual restraint, hierarchy and accessibility
     support it. Using --ssh-navy-primary (not --ssh-brand-navy) on
     the primary button is a deliberate, documented choice, not an
     inconsistency: it keeps large interactive surfaces slightly
     softer than the raw brand mark while staying unmistakably on-
     brand. Both navys pass AA contrast against white; this is a
     restraint decision, not a compliance one. */
  --ssh-navy-primary:    #183246; /* headings, high-trust UI, primary button bg */
  --ssh-navy-deep:       #102633; /* dark sections, footer bg */

  /* Two teals with DIFFERENT jobs — do not use interchangeably: */
  --ssh-teal-muted:      #4F8380; /* DECORATIVE / large-area secondary emphasis only
                                      (tinted panels, large dividers, illustration).
                                      Do NOT use for ordinary text links on white —
                                      contrast is not reliably AA at body-text sizes. */
  --ssh-teal-dark:       #356764; /* ACCESSIBLE text links / nav-hover emphasis on
                                      light surfaces. This is the one to use for any
                                      normal-size text link on white or warm-stone. */

  --ssh-orange-warm:     #D7833A; /* accent only — CTA highlight, underline */
  --ssh-stone-warm:      #F6F3EE; /* dominant background — approx. 65-70% of surface */
  --ssh-teal-tint:       #EEF5F3; /* soft section backgrounds, info panels */
  --ssh-text-main:       #263238;
  --ssh-text-secondary:  #5D686B;
  --ssh-white:           #FFFFFF;
  --ssh-border:          #B9CFD1;

  /* ---- Focus (v1.1 — strengthened) ----
     A single orange outline is not reliably visible on every one
     of this palette's surfaces (white, warm stone, teal tint, and
     dark navy sections). The two-tone ring below keeps a visible
     "moat" between the focused control and whatever is behind it,
     on any of those backgrounds. Implemented as a box-shadow pair
     so it renders identically regardless of the element's own
     border-radius or background. */
  --ssh-focus-inner: #FFFFFF; /* light separation ring, sits against the control */
  --ssh-focus-outer: #17394B; /* high-contrast outer ring, brand navy */
  --ssh-focus-ring-legacy: #D7833A; /* retained for reference only — superseded below */

  /* ---- Typography ---- */
  --ssh-font-heading: "Source Serif 4", Georgia, Cambria, serif;
  --ssh-font-body:     Manrope, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --ssh-h1-desktop: clamp(2.6rem, 5vw, 4.6rem);   /* 56-64px homepage H1 */
  --ssh-h1-line:    1.1;
  --ssh-h2-desktop: clamp(2rem, 3.5vw, 3rem);      /* 38-44px */
  --ssh-h3:         clamp(1.375rem, 2vw, 1.625rem); /* 22-26px */
  --ssh-h4:         clamp(1.25rem, 1.6vw, 1.4rem);
  --ssh-body-lg:     1.1875rem; /* 19px */
  --ssh-body:        1.0625rem; /* 17px */
  --ssh-body-line:   1.6;
  --ssh-nav-size:    0.9375rem; /* 15px */
  --ssh-button-size: 0.9375rem;
  --ssh-small:       1rem; /* never go below 16px on young-person content */

  --ssh-weight-heading: 600;
  --ssh-weight-body:    400;
  --ssh-weight-medium:  500;
  --ssh-weight-semibold:600;

  /* ---- Spacing (8px rhythm) ---- */
  --ssh-space-1: 8px;
  --ssh-space-2: 16px;
  --ssh-space-3: 24px;
  --ssh-space-4: 32px;
  --ssh-space-5: 48px;
  --ssh-space-6: 64px;
  --ssh-section-desktop: 104px; /* 88-120px band, mid-point default */
  --ssh-section-mobile:  64px;  /* 56-72px band, mid-point default */

  /* ---- Layout ---- */
  --ssh-content-max: 1200px;
  --ssh-measure: 68ch; /* readable line length, 60-72 char target */
  --ssh-grid-columns: 12;

  /* ---- Radii / borders / shadow (restrained) ---- */
  --ssh-radius-button: 8px;
  --ssh-radius-card: 14px;
  --ssh-border-width: 1px;
  --ssh-shadow-card: none; /* cards are quiet: border only, no shadow by default */

  /* ---- Components ---- */
  --ssh-control-min: 44px; /* Stepping Stone usability standard — an internal choice,
                               not asserted as the WCAG 2.2 AA minimum (24x24px, with
                               exceptions). Documented explicitly to avoid the v1.0
                               genericity error of conflating the two. */
  --ssh-button-height: 46px;

  /* ---- Motion ---- */
  --ssh-transition-fast: 120ms ease;
  --ssh-transition-menu: 180ms ease;
}

/* Respect reduced motion throughout */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Colour-use ratio guidance (enforce in layout review, not CSS) ----
   65-70% warm stone / off-white backgrounds
   20-25% white
   5-8%   navy
   3-5%   teal
   1-2%   orange (accent only — never a section background, card fill,
          long text colour, or repeated icon fill)
*/

/* ---- Focus utility (v1.1) — apply to every interactive element ---- */
.ssh-focusable:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--ssh-focus-inner),
    0 0 0 4px var(--ssh-focus-outer);
  border-radius: 4px;
}
/* On dark sections (navy footer etc.) swap the outer ring to white-on-navy
   so the "moat" logic still holds — apply .ssh-on-dark to the ancestor. */
.ssh-on-dark :focus-visible {
  box-shadow:
    0 0 0 2px var(--ssh-navy-deep),
    0 0 0 4px var(--ssh-white);
}

/* ---- Example component tokens ---- */
.ssh-btn-primary {
  background: var(--ssh-navy-primary); /* UI palette, by design — see comment above */
  color: var(--ssh-white);
  border-radius: var(--ssh-radius-button);
  min-height: var(--ssh-button-height);
  font: var(--ssh-weight-semibold) var(--ssh-button-size) var(--ssh-font-body);
  padding: 0 var(--ssh-space-3);
  border: none;
}
.ssh-btn-secondary {
  background: transparent;
  color: var(--ssh-navy-primary);
  border: 1.5px solid var(--ssh-navy-primary);
  border-radius: var(--ssh-radius-button);
  min-height: var(--ssh-button-height);
  font: var(--ssh-weight-semibold) var(--ssh-button-size) var(--ssh-font-body);
  padding: 0 var(--ssh-space-3);
}
.ssh-btn-on-dark {
  background: var(--ssh-white);
  color: var(--ssh-navy-primary);
  border-radius: var(--ssh-radius-button);
  min-height: var(--ssh-button-height);
  font: var(--ssh-weight-semibold) var(--ssh-button-size) var(--ssh-font-body);
}
.ssh-card {
  background: var(--ssh-white);
  border: var(--ssh-border-width) solid var(--ssh-border);
  border-radius: var(--ssh-radius-card);
  box-shadow: var(--ssh-shadow-card);
  padding: var(--ssh-space-4);
}
.ssh-link {
  color: var(--ssh-teal-dark); /* NOT --ssh-teal-muted — see palette comment above */
  text-decoration: underline;
}
/* ==========================================================================
   Stepping Stone Homes — site stylesheet
   Built on design-tokens-v1.1.css (18 August 2026 red-team correction pass).

   Token values are NOT redefined here. This file consumes --ssh-* tokens and
   adds layout. If a colour, size or spacing value needs to change, change it
   in design-tokens-v1.1.css, not here.

   Colour-use ratio held to Section 7: 65-70% warm stone, 20-25% white,
   5-8% navy, 3-5% teal, 1-2% orange. Orange is never a section background,
   card fill, long text colour or repeated icon fill.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--ssh-stone-warm);
  color: var(--ssh-text-main);
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-body);
  line-height: var(--ssh-body-line);
  font-weight: var(--ssh-weight-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--ssh-font-heading);
  font-weight: var(--ssh-weight-heading);
  color: var(--ssh-navy-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: var(--ssh-h1-desktop); line-height: var(--ssh-h1-line); }
h2 { font-size: var(--ssh-h2-desktop); }
h3 { font-size: var(--ssh-h3); }
h4 { font-size: var(--ssh-h4); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: var(--ssh-body-lg); line-height: 1.6; color: var(--ssh-text-secondary); }
.measure { max-width: var(--ssh-measure); }
.muted { color: var(--ssh-text-secondary); }
.small { font-size: 1rem; }
.center { text-align: center; margin-inline: auto; }

.eyebrow {
  font-family: var(--ssh-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ssh-teal-dark);
  margin: 0 0 var(--ssh-space-2);
}

/* Editorial quote. Orange used only as a thin rule — accent, never a fill. */
.quote {
  font-family: var(--ssh-font-heading);
  font-weight: var(--ssh-weight-heading);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.34;
  color: var(--ssh-navy-primary);
  border-left: 3px solid var(--ssh-orange-warm);
  padding: 0.1em 0 0.1em 1em;
  margin: 0;
  max-width: 32ch;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--ssh-content-max); margin-inline: auto; padding-inline: var(--ssh-space-3); }
.section { padding-block: var(--ssh-section-mobile); }
@media (min-width: 900px) { .section { padding-block: var(--ssh-section-desktop); } }
.section--tight { padding-block: var(--ssh-space-6); }
.section--white { background: var(--ssh-white); }
.section--tint { background: var(--ssh-teal-tint); }
.section--navy { background: var(--ssh-navy-deep); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--ssh-white); }
.section--navy p, .section--navy li { color: #D6E2E4; }
.section--navy .eyebrow { color: #9FC4C2; }

.split { display: grid; gap: var(--ssh-space-5); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--ssh-space-6); }
  .split--wide-text { grid-template-columns: 1.05fr 0.95fr; }
  .split--flip > *:first-child { order: 2; }
}

.grid { display: grid; gap: var(--ssh-space-3); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.head { max-width: var(--ssh-measure); margin-bottom: var(--ssh-space-5); }
.stack > * + * { margin-top: 1.1em; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: var(--ssh-space-2); top: -80px; z-index: 200;
  background: var(--ssh-navy-primary); color: var(--ssh-white);
  padding: 12px 20px; border-radius: var(--ssh-radius-button);
  font-weight: var(--ssh-weight-semibold); text-decoration: none;
  transition: top var(--ssh-transition-fast);
}
.skip:focus { top: var(--ssh-space-2); }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ssh-stone-warm) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ssh-border);
}
.hdr__in { min-height: 80px; display: flex; align-items: center; gap: var(--ssh-space-2); min-width: 0; }

/* Eight primary links plus the CTA need about 1250px beside the logo, which
   will not fit inside the 1200px content container at any viewport width.
   The header bar alone is allowed a wider container above the breakpoint;
   page content stays at --ssh-content-max. */
@media (min-width: 1300px) {
  .hdr .wrap { max-width: 1320px; }
}
.nav { min-width: 0; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.logo__mark { width: 44px; height: 44px; flex: none; }
.logo__txt {
  font-family: var(--ssh-font-heading);
  font-weight: var(--ssh-weight-heading);
  font-size: 1.125rem; line-height: 1.1;
  color: var(--ssh-navy-primary);
}
.logo__txt span {
  display: block;
  font-family: var(--ssh-font-body);
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ssh-teal-dark);
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  text-decoration: none;
  font-size: var(--ssh-nav-size);
  padding: 10px 8px;
  font-weight: var(--ssh-weight-medium);
  color: var(--ssh-text-main);
  border-radius: 6px;
  white-space: nowrap;
  transition: color var(--ssh-transition-fast);
}
.nav a:hover { color: var(--ssh-teal-dark); }
.nav a[aria-current="page"] {
  color: var(--ssh-teal-dark);
  font-weight: var(--ssh-weight-semibold);
  box-shadow: inset 0 -2px 0 var(--ssh-orange-warm);
  border-radius: 0;
}
/* The CTA inside the nav needs to out-specify `.nav a` above, which would
   otherwise win on colour and padding and render the label invisible. */
.nav a.btn {
  margin-left: var(--ssh-space-1);
  padding: 0 var(--ssh-space-3);
  border-radius: var(--ssh-radius-button);
  box-shadow: none;
}
.nav a.btn--primary { color: var(--ssh-navy-deep); }
.nav a.btn--primary:hover { color: var(--ssh-navy-deep); }
.nav a.btn--secondary { color: var(--ssh-navy-primary); }

/* Menu button: labelled, never icon-only; 44x44 minimum (Section 11). */
/* Compact CTA for the mobile header bar. Scoped to .hdr__in so it out-specifies
   the generic `.btn { display: inline-flex }` rule further down the file —
   otherwise it renders on desktop too, beside the one already in the nav. */
.hdr__in .hdr__cta { display: none; margin-left: auto; flex: none; white-space: nowrap; }

.burger {
  display: none;
  align-items: center; gap: 8px;
  min-width: 44px; min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1.5px solid var(--ssh-navy-primary);
  border-radius: var(--ssh-radius-button);
  color: var(--ssh-navy-primary);
  font-size: var(--ssh-nav-size);
  font-weight: var(--ssh-weight-semibold);
  cursor: pointer;
}
.burger__bars { display: block; width: 18px; height: 12px; position: relative; }
.burger__bars::before, .burger__bars::after, .burger__bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
}
.burger__bars::before { top: 0; }
.burger__bars span { top: 5px; }
.burger__bars::after { bottom: 0; }

@media (max-width: 1299px) {
  .burger { display: inline-flex; }
  /* Full-screen panel, all primary links in one visible list, CTA repeated. */
  .nav {
    position: fixed; inset: 80px 0 0 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ssh-stone-warm);
    padding: var(--ssh-space-3) var(--ssh-space-3) var(--ssh-space-6);
    overflow-y: auto;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 15px 12px;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--ssh-border);
    border-radius: 0;
  }
  .nav a.btn {
    margin: var(--ssh-space-3) 0 0;
    justify-content: center;
    border-bottom: none;
  }
  /* Compact CTA in the header bar itself, 560px and above only. */
  .hdr__in .hdr__cta { display: inline-flex; }
  body.nav-open { overflow: hidden; }
}

/* Below 560px the label would crowd the bar, so the panel carries it instead. */
@media (max-width: 639px) {
  .hdr__in .hdr__cta { display: none; }
}


/* ---------- Buttons ----------
   Primary = navy fill, white text (UI palette, per Section 7).
   Orange is an accent only and is never a button fill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--ssh-button-height);
  padding: 0 var(--ssh-space-3);
  border-radius: var(--ssh-radius-button);
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-button-size);
  font-weight: var(--ssh-weight-semibold);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--ssh-transition-fast), color var(--ssh-transition-fast), border-color var(--ssh-transition-fast);
}
/* Primary CTA is warm orange per the Final Design Instructions, Section 7.
   White on #D7833A reaches only 2.92:1, so the "high-contrast text" the
   instructions call for is deep navy at 5.34:1. The 1.5px darker rim gives the
   button a defined edge against warm stone (3.69:1) without a shadow. */
.btn--primary {
  background: var(--ssh-orange-warm);
  color: var(--ssh-navy-deep);
  border-color: #B96A1E;
}
.btn--primary:hover { background: #D07D30; border-color: #A75B15; color: var(--ssh-navy-deep); }
.btn--secondary { background: transparent; color: var(--ssh-navy-primary); border-color: var(--ssh-navy-primary); }
.btn--secondary:hover { background: var(--ssh-white); }
.btn--on-dark { background: var(--ssh-stone-warm); color: var(--ssh-navy-primary); border-color: var(--ssh-stone-warm); }
.btn--on-dark:hover { background: #EDF2F2; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--ssh-space-2); margin-top: var(--ssh-space-4); }

/* Text links use the accessible teal, never the decorative one. */
.link {
  color: var(--ssh-teal-dark);
  font-weight: var(--ssh-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link:hover { color: var(--ssh-navy-primary); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--ssh-space-6) var(--ssh-space-5); }
@media (min-width: 900px) { .hero { padding-block: 72px 64px; } }
.hero__grid { display: grid; gap: var(--ssh-space-5); align-items: start; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--ssh-space-6); } }
.hero h1 { margin-bottom: 0.3em; }
.hero__l2 {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-body-lg);
  font-weight: var(--ssh-weight-semibold);
  color: var(--ssh-teal-dark);
  margin: 0 0 var(--ssh-space-2);
}
.hero--simple { padding-block: var(--ssh-space-6) var(--ssh-space-4); }

/* ---------- Trust strip ---------- */
.trust {
  border-block: 1px solid var(--ssh-border);
  background: var(--ssh-teal-tint);
}
.trust__list {
  list-style: none; margin: 0; padding: var(--ssh-space-2) 0;
  display: flex; flex-wrap: wrap; gap: 8px var(--ssh-space-4);
  font-size: 0.9375rem; font-weight: var(--ssh-weight-medium);
  color: var(--ssh-navy-primary);
}
.trust__list li { display: flex; align-items: center; gap: 10px; }
.trust__list li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ssh-teal-dark); flex: none;
}
.trust--hero { padding-top: var(--ssh-space-3); font-size: 0.9375rem; color: var(--ssh-text-secondary); }

/* ---------- Cards ---------- */
.card {
  background: var(--ssh-white);
  border: var(--ssh-border-width) solid var(--ssh-border);
  border-radius: var(--ssh-radius-card);
  box-shadow: var(--ssh-shadow-card);
  padding: var(--ssh-space-4);
}
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--ssh-text-secondary); }
.card--tint { background: var(--ssh-teal-tint); }

/* Editorial narrative block — no icons (Section 10, item 3). */
.block h3 { margin-bottom: 0.45em; }
.block__rule { display: block; width: 40px; height: 3px; background: var(--ssh-orange-warm); border-radius: 2px; margin-bottom: var(--ssh-space-2); }

/* ---------- Panels ---------- */
.panel { border-radius: var(--ssh-radius-card); padding: var(--ssh-space-5); }
.panel--white { background: var(--ssh-white); border: 1px solid var(--ssh-border); }
.panel--tint { background: var(--ssh-teal-tint); border: 1px solid var(--ssh-border); }
.panel--navy { background: var(--ssh-navy-deep); color: #D6E2E4; }
.panel--navy h2, .panel--navy h3 { color: var(--ssh-white); }
.duo { display: grid; gap: var(--ssh-space-3); }
@media (min-width: 880px) { .duo { grid-template-columns: 1fr 1fr; } }

/* ---------- Facts list ---------- */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: flex; flex-wrap: wrap; gap: 4px var(--ssh-space-3);
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--ssh-border);
}
.facts li:first-child { border-top: 1px solid var(--ssh-border); }
.facts b { font-weight: var(--ssh-weight-semibold); color: var(--ssh-navy-primary); }
.facts span { color: var(--ssh-text-secondary); text-align: right; }

/* ---------- Numbered process ---------- */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--ssh-space-2);
  padding: var(--ssh-space-3) 0;
  border-top: 1px solid var(--ssh-border);
}
.steps li:last-child { border-bottom: 1px solid var(--ssh-border); }
.steps__n {
  font-family: var(--ssh-font-heading);
  font-size: 1.5rem; font-weight: var(--ssh-weight-heading);
  color: var(--ssh-teal-dark); line-height: 1.1;
}
.steps h3 { margin-bottom: 0.25em; }
.steps p { color: var(--ssh-text-secondary); margin: 0; }

/* ---------- Photography ---------- */
.shot img { width: 100%; object-fit: cover; border-radius: var(--ssh-radius-card); aspect-ratio: 4 / 3; }
.shot--tall img { aspect-ratio: 4 / 5; }
.shot figcaption { margin-top: 12px; font-size: 1rem; color: var(--ssh-text-secondary); }

.gallery { display: grid; gap: var(--ssh-space-3); }
@media (min-width: 640px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .gallery--3 { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { display: flex; flex-direction: column; gap: 10px; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ssh-radius-card); }
.gallery figcaption { font-size: 1rem; color: var(--ssh-text-secondary); line-height: 1.5; }

/* ---------- Leadership cards ----------
   Editorial and human, not a staff directory (Leadership Guide, Section 6).
   4:5 rectangular crop, 6-8px radius, no circular headshots, no heavy shadow. */
.leaders { display: grid; gap: var(--ssh-space-5); }
@media (min-width: 860px) { .leaders { grid-template-columns: 1fr 1fr; gap: var(--ssh-space-6); } }
.leader__photo {
  width: 100%; max-width: 340px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: var(--ssh-space-3);
}
.leader__name { font-size: 1.5rem; margin-bottom: 0.15em; }
.leader__role {
  font-family: var(--ssh-font-body);
  font-size: 0.9375rem;
  font-weight: var(--ssh-weight-medium);
  color: var(--ssh-teal-dark);
  letter-spacing: 0.02em;
  margin: 0 0 var(--ssh-space-2);
}
.leader__quote {
  font-family: var(--ssh-font-heading);
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ssh-navy-primary);
  margin: 0 0 var(--ssh-space-2);
}
.leader p { color: var(--ssh-text-main); }

/* ---------- Notices ---------- */
.notice {
  border: 1px solid var(--ssh-border);
  border-left: 4px solid var(--ssh-orange-warm);
  background: var(--ssh-teal-tint);
  border-radius: var(--ssh-radius-button);
  padding: var(--ssh-space-2) var(--ssh-space-3);
}
.notice strong { color: var(--ssh-navy-primary); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--ssh-space-3); }
.form__row { display: grid; gap: var(--ssh-space-3); }
@media (min-width: 700px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: 1rem; font-weight: var(--ssh-weight-semibold); color: var(--ssh-navy-primary); margin-bottom: 6px; }
.field .hint { display: block; font-weight: var(--ssh-weight-body); color: var(--ssh-text-secondary); font-size: 0.9375rem; margin-top: 2px; }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  min-height: var(--ssh-control-min);
  color: var(--ssh-text-main);
  background: var(--ssh-white);
  border: 1.5px solid #6C8084; /* 4.15:1 on white, 3.75:1 on stone - SC 1.4.11 */
  border-radius: var(--ssh-radius-button);
  padding: 12px 14px;
  transition: border-color var(--ssh-transition-fast);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ssh-teal-dark); }
.field .err { display: none; margin: 6px 0 0; font-weight: var(--ssh-weight-semibold); color: #A3231A; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #A3231A; }
.field.is-bad .err { display: block; }

/* Honeypot. Hidden every way at once so it can never render as an empty box,
   whatever else the cascade does. Kept out of the tab order and off the
   accessibility tree; still submitted, so bots that fill it are caught. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.hp input, .hp label { display: block; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }

/* Empty error paragraphs must never draw anything. */
.field .err:empty { display: none !important; }

.check { display: flex; gap: 12px; align-items: flex-start; }
.check input {
  width: 22px; height: 22px; min-height: 22px; flex: none; margin-top: 3px;
  accent-color: var(--ssh-navy-primary);
}
.check label { margin: 0; font-weight: var(--ssh-weight-body); color: var(--ssh-text-main); }

.form__status { margin: 0; font-weight: var(--ssh-weight-semibold); color: var(--ssh-teal-dark); }
.form__status[data-state="error"] { color: #A3231A; }
.form__errors {
  display: none;
  border: 1.5px solid #A3231A;
  border-radius: var(--ssh-radius-button);
  padding: var(--ssh-space-2) var(--ssh-space-3);
  background: var(--ssh-white);
}
.form__errors[data-open="true"] { display: block; }
.form__errors h3 { color: #A3231A; font-size: 1.125rem; margin-bottom: 0.4em; }
.form__errors ul { margin: 0; padding-left: 1.2em; }
.form__errors a { color: #A3231A; }

/* ---------- FAQ (keyboard-operable, no hover-only) ---------- */
.faq { border-top: 1px solid var(--ssh-border); }
.faq details { border-bottom: 1px solid var(--ssh-border); }
.faq summary {
  cursor: pointer;
  padding: var(--ssh-space-2) 0;
  min-height: var(--ssh-control-min);
  display: flex; align-items: center; gap: 12px;
  font-weight: var(--ssh-weight-semibold);
  color: var(--ssh-navy-primary);
  font-size: 1.0625rem;
}
.faq summary::marker { color: var(--ssh-teal-dark); }
.faq p { padding-bottom: var(--ssh-space-2); color: var(--ssh-text-main); }

/* ---------- Footer ---------- */
.ftr { background: var(--ssh-navy-deep); color: #C3D3D6; padding-block: var(--ssh-space-6) var(--ssh-space-4); }
.ftr h2, .ftr h3 {
  color: var(--ssh-white);
  font-family: var(--ssh-font-body);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: var(--ssh-space-2);
}
.ftr a { color: #C3D3D6; text-decoration: none; }
.ftr a:hover { color: var(--ssh-white); text-decoration: underline; text-underline-offset: 3px; }
.ftr__grid { display: grid; gap: var(--ssh-space-5); }
@media (min-width: 760px)  { .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1040px) { .ftr__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr__brand p { color: #A9BEC1; max-width: 36ch; }
.ftr__base {
  margin-top: var(--ssh-space-5);
  padding-top: var(--ssh-space-3);
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 0.9375rem; color: #A9BEC1;
}
.ftr__base p { margin: 0 0 8px; }

/* ---------- For Young People ----------
   Strictest cognitive-accessibility bar. Type never below 16px. */
.yp { font-size: 1.1875rem; line-height: 1.7; }
.yp h2 { font-size: clamp(1.625rem, 2.4vw, 2.125rem); }
.yp h3 { font-size: 1.375rem; }
.yp p, .yp li { font-size: 1.1875rem; }
.yp .card p { color: var(--ssh-text-main); }
.yp .small, .yp .lede { font-size: 1.1875rem; }
.yp-back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--ssh-control-min);
  font-weight: var(--ssh-weight-semibold);
  color: var(--ssh-teal-dark);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Prose (legal/utility pages) ---------- */
.prose { max-width: var(--ssh-measure); }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.5em; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; }
.prose th, .prose td { text-align: left; padding: 12px; border-bottom: 1px solid var(--ssh-border); vertical-align: top; }
.prose th { color: var(--ssh-navy-primary); font-weight: var(--ssh-weight-semibold); }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

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

::selection { background: var(--ssh-teal-tint); color: var(--ssh-navy-primary); }

/* Open-role badge on Careers. Not colour alone — the word "Open" carries it. */
.role-open {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--ssh-teal-tint);
  border: 1px solid var(--ssh-teal-dark);
  color: var(--ssh-teal-dark);
  font-family: var(--ssh-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}