/*
Theme Name: Rising Peaks Living
Theme URI: https://risingpeaksliving.com
Author: Rising Peaks Living
Author URI: https://risingpeaksliving.com
Description: Custom WordPress theme for Rising Peaks Living, a recovery housing operator launching in the Denver metro. Hardcoded section templates per the Step 01-05 copy outputs; mobile-first, WCAG 2.2 AA, performance-budget compliant. No required plugins.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved (proprietary)
Text Domain: rising-peaks-living
*/

/* =========================================================
   Rising Peaks Living — Theme Stylesheet
   Mobile-first. Breakpoints: 600 / 900 / 1200.
   Brand palette and typography per kb-business/operations/
   rising-peaks-living/brand/brand-brief.md (locked 2026-05-02).
   Accessibility per Step 04 ux-spec.md (WCAG 2.2 AA).
   ========================================================= */

/* ----- Custom properties (brand system) ----- */
:root {
  /* Palette */
  --color-anchor:        #1F3A52;  /* deep mountain blue */
  --color-anchor-deep:   #15293D;
  --color-sunset-gold:   #C68B4D;  /* warm accent */
  --color-sunset-deep:   #A66E36;
  --color-warm-clay:     #8B7B6B;  /* earth neutral */
  --color-sage:          #7A8471;  /* alternate neutral */
  --color-cream:         #F5F0E6;  /* background */
  --color-cream-warm:    #FBF8F2;
  --color-stone:         #3F4A52;  /* body type */
  --color-stone-light:   #6B7680;
  --color-rule:          rgba(63, 74, 82, 0.15);
  --color-rule-strong:   rgba(63, 74, 82, 0.30);

  /* Typography */
  --font-serif: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale (mobile defaults; desktop overrides in @media min-width: 900) */
  --fs-eyebrow: 0.75rem;
  --fs-body:    1.0625rem; /* 17px — readability bump for late-night provider read on phone */
  --fs-lead:    1.125rem;
  --fs-h3:      1.1875rem;
  --fs-h2:      1.875rem; /* 30px mobile — bigger than default editorial-restraint scale; H2s carry weight as section anchors */
  --fs-h1:      2rem;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* Layout */
  --max-content: 1180px;
  --max-narrow:  880px;
  --max-text:    760px;

  /* Motion */
  --transition-fast: 0.2s ease;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ----- Base ----- */
html { font-size: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-stone);
  background: var(--color-cream-warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-anchor);
  font-weight: 600; /* editorial restraint vs. 700 marketing-loud */
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-feature-settings: "onum" 1; /* old-style figures in headlines for residential read */
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; line-height: 1.1; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

p { max-width: var(--max-text); }
p + p { margin-top: var(--space-2); }

a { color: var(--color-anchor); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-fast); }
a:hover { color: var(--color-sunset-deep); }

ul, ol { padding-left: 1.25rem; }
li + li { margin-top: 0.4rem; }

strong, b { font-weight: 500; color: var(--color-anchor); }

/* ----- Focus ----- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-sunset-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ----- Skip-link ----- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-anchor);
  color: var(--color-cream);
  padding: 0.75rem 1rem;
  text-decoration: none;
  font-weight: 600;
  z-index: 1000;
  transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ----- Layout ----- */
.container {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.container-narrow {
  width: 100%;
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ----- Eyebrows ----- */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500; /* lighter than 600 — reads editorial, not corporate */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(31, 58, 82, 0.7); /* anchor blue at 70% — editorial restraint vs. brand-accent gold */
  margin-bottom: 0.75rem;
}

/* ----- Buttons ----- */
/* Square corners (no border-radius) — editorial restraint vs. the rounded-Stripe-default. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn-primary {
  background: var(--color-anchor);
  color: var(--color-cream);
  border-color: var(--color-anchor);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-anchor-deep);
  border-color: var(--color-anchor-deep);
  color: var(--color-cream);
}
.btn-secondary {
  background: transparent;
  color: var(--color-anchor);
  border-color: var(--color-anchor);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--color-anchor);
  color: var(--color-cream);
}

/* ----- Header ----- */
/* Header is non-sticky on every viewport. Editorial brands let the header scroll away;
   the visitor returns to the top with a deliberate scroll. The closing line on each page
   does the work a sticky header would otherwise do for navigation. */
.site-header {
  background: var(--color-cream-warm);
  border-bottom: 1px solid var(--color-rule);
  position: relative;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  gap: 1rem;
  flex-wrap: nowrap;
}
.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-anchor);
  font-family: var(--font-serif);
  font-weight: 600; /* matches headline weight; lighter than 700 for editorial wordmark read */
  font-size: 1.1rem;
  letter-spacing: 0.005em;
  flex-shrink: 0;
}
.logo-link:hover { color: var(--color-anchor-deep); }
.logo-mark {
  /* Full lockup with integrated wordmark (viewBox 460x120, aspect ~3.83:1).
     Renders the entire logo as one SVG so the brand name lives inside the
     mark and doesn't depend on the WordPress site title setting. */
  width: 200px;
  height: auto;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .logo-mark {
    width: 220px;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--color-anchor);
  color: var(--color-anchor);
  border-radius: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  margin-left: auto;
}
.nav-toggle:hover { background: var(--color-anchor); color: var(--color-cream); }
.nav-toggle-icon {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-icon::before { top: -7px; }
.nav-toggle-icon::after  { top: 7px; }

.primary-nav { display: none; }
.primary-nav[aria-expanded="true"],
.primary-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-cream-warm);
  border-bottom: 1px solid var(--color-rule);
  padding: 0.75rem 1.25rem 1.25rem;
}
.primary-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.primary-nav ul li {
  /* Override the global `li + li { margin-top: 0.4rem }` rule that was pushing
     the second and third nav items down relative to the first (Home) item. */
  margin-top: 0;
}
.primary-nav a {
  display: block;
  padding: 0.75rem 0.25rem;
  color: var(--color-anchor);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  min-height: 44px;
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: var(--color-sunset-deep);
}

.header-phone {
  display: none;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-anchor);
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--color-anchor);
  border-radius: 0;
  min-height: 44px;
  align-items: center;
}
.header-phone:hover,
.header-phone:focus-visible { background: var(--color-anchor); color: var(--color-cream); }

/* Header at tablet+ */
@media (min-width: 600px) {
  .nav-toggle { display: none; }
  .primary-nav,
  .primary-nav[aria-expanded="false"] {
    display: block !important;
    position: static;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .primary-nav ul {
    flex-direction: row;
    gap: 1.5rem;
  }
  .primary-nav a { padding: 0.5rem 0; }
  .header-phone { display: inline-flex; }
}

/* ----- Sections -----
   Single-side padding model: each section carries its own bottom padding for
   air below. Adjacent sections give a single, consistent gap (the previous
   section's bottom padding) rather than the doubled gap top+bottom padding
   would produce. The first section in <main> (or the section directly after
   the hero) gets a top padding for air below the header. */
.section {
  padding-top: 0;
  padding-bottom: var(--space-5); /* mobile: 48px below — tightened editorial rhythm */
}
main > .section:first-child,
.hero + .section {
  padding-top: var(--space-5);    /* first content section gets air above */
}
.section:last-child {
  padding-bottom: var(--space-5);
}

/* No alternating section backgrounds. Single cream-warm canvas across the whole site;
   section separation is carried by typography and vertical space, not by alternating row colors.
   The .section-cream and .section-dark classes are no-ops for backgrounds (kept for backward
   compatibility on existing markup so the build doesn't break). */
.section.section-cream { background: transparent; }
.section.section-dark  { background: transparent; color: inherit; }
.section.section-dark h2,
.section.section-dark h3 { color: var(--color-anchor); }
.section.section-dark .eyebrow { color: rgba(31, 58, 82, 0.7); }
.section.section-dark p { color: var(--color-stone); }

.section-header { margin-bottom: var(--space-4); }
.section-header h2 { margin-bottom: var(--space-2); }
.section-header p.lead { font-size: var(--fs-lead); }

@media (min-width: 900px) {
  .section {
    padding-bottom: var(--space-6); /* desktop: 64px below — tighter editorial rhythm */
  }
  main > .section:first-child,
  .hero + .section {
    padding-top: var(--space-6);    /* desktop: 64px above */
  }
  :root {
    --fs-body: 1.125rem;   /* 18px desktop body — paired with 1.65 line-height for editorial read */
    --fs-h1:   2.75rem;
    --fs-h2:   2.5rem;     /* 40px desktop — bigger H2s for editorial-feature weight */
    --fs-h3:   1.375rem;
    --fs-lead: 1.1875rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --fs-h1: 3.25rem;
  }
  h1 { letter-spacing: -0.015em; } /* tighter tracking at largest display size */
}

/* ----- Hero ----- */
.hero {
  padding: var(--space-5) 0 var(--space-6);
  background: transparent; /* unified cream-warm canvas; no separate hero background */
}
.hero-content { max-width: var(--max-narrow); }

/* Type-only hero variant (no photograph, magazine-feature header).
   Slightly more vertical breathing on desktop so the H1 has presence without a photo. */
.hero-type-only {
  padding: var(--space-6) 0 var(--space-5);
}
.hero-type-only h1 {
  margin-bottom: var(--space-3);
}
@media (min-width: 900px) {
  .hero-type-only {
    padding: var(--space-7) 0 var(--space-6);
  }
}

/* Asymmetric hero (What We Do): type-dominant left column, contained square photo right.
   Less viewport-dominating than the full-bleed-right hero pattern on Home, but still
   carries a contextual photographic moment. */
.hero-asymmetric {
  padding: var(--space-6) 0 var(--space-5);
}
.hero-asym-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}
.hero-asym-content h1 {
  margin-bottom: var(--space-2);
}
.hero-asym-content .subhead {
  font-size: var(--fs-lead);
  max-width: 540px;
}
.hero-asym-image {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-warm-clay);
}
.hero-asym-image img,
.hero-asym-image picture,
.hero-asym-image picture img,
.hero-asym-image .image-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
@media (min-width: 900px) {
  .hero-asymmetric {
    padding: var(--space-7) 0 var(--space-6);
  }
  .hero-asym-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
  .hero-asym-image {
    max-width: 460px;
    justify-self: end;
  }
}
.hero h1 {
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.hero .subhead {
  font-size: var(--fs-lead);
  margin-bottom: var(--space-3);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: var(--space-3);
}
/* Trust strip: kept as a layout container in case the About-Us reorg uses it,
   but the decorative sage dots are removed in favor of a simple middot separator. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
  font-size: 0.8125rem;
  color: var(--color-stone-light);
  font-weight: 500;
}
.trust-strip .trust-line {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.trust-strip .trust-line + .trust-line::before {
  content: '\00B7'; /* middot */
  margin-right: 1rem;
  color: var(--color-rule-strong);
}
.hero-image {
  margin-top: var(--space-4);
  /* No border-radius — full-bleed photographic treatment per ux design spec §5 */
  overflow: hidden;
}

@media (min-width: 900px) {
  /* Editorial hero (Home + What We Do): type column stays inside the container's
     natural left edge, photograph bleeds full-width to the right viewport edge.
     Scoped via :has() so the Contact hero (which has no .hero-grid) keeps its
     standard contained layout. */
  .hero:has(.hero-grid) {
    padding: 0; /* photograph bleeds top-and-bottom; type column carries its own internal padding */
  }
  .hero:has(.hero-grid) > .container {
    max-width: none;
    padding: 0;
    width: 100%;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: stretch;
    gap: 0;
    min-height: 60vh;
  }
  .hero-grid .hero-content {
    padding: var(--space-6) var(--space-5) var(--space-6) max(1.25rem, calc((100vw - 1180px) / 2));
    align-self: center;
    max-width: 720px;
  }
  .hero-grid .hero-image {
    margin-top: 0;
    overflow: hidden;
  }
  .hero-grid .hero-image img,
  .hero-grid .hero-image picture,
  .hero-grid .hero-image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
  }
}

/* ----- Two-column block grid ----- */
.block-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.block-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.block-grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); /* 48px between blocks on mobile */ }
@media (min-width: 600px) {
  .block-grid-2 { grid-template-columns: 1fr 1fr; }
  .block-grid-4 { grid-template-columns: 1fr 1fr; gap: var(--space-6); /* 64px between blocks on tablet/desktop */ row-gap: var(--space-6); column-gap: var(--space-5); }
}
@media (min-width: 900px) {
  .block-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ----- Feature blocks (Home Section 3 — editorial photograph-led, no bordered card) ----- */
.feature-block {
  /* No background, no border, no card padding — the photograph is the block's anchor */
  padding: 0;
}
.feature-block .feature-image {
  /* Thin sage rule above the photograph signals quiet editorial separation, not a tile-grid card */
  border-top: 1px solid var(--color-sage);
  padding-top: var(--space-2);
  overflow: hidden;
  margin-bottom: var(--space-2);
  aspect-ratio: 3 / 2; /* matches manifest compositions; the visual rework comes from removing the card and adding breathing room, not from cropping */
  background: var(--color-warm-clay);
}
.feature-block .feature-image img { width: 100%; height: 100%; object-fit: cover; }
.feature-block h3 { margin-bottom: 0.5rem; margin-top: 0.5rem; }
.feature-block p { max-width: none; /* let the body fill the block column */ }

.section-dark .feature-block .feature-image {
  border-top-color: rgba(245, 240, 230, 0.30);
}

/* Approach blocks (no images by default per UX spec) */
.approach-block {
  border-left: 3px solid var(--color-sunset-gold);
  padding: 0.5rem 0 0.5rem var(--space-2);
}
.approach-block.approach-callout {
  border-left-width: 4px;
  background: rgba(198, 139, 77, 0.06);
  padding: var(--space-2) var(--space-3);
  border-radius: 0; /* squared to match the rest of the system */
}
.approach-block h3 { margin-bottom: 0.4rem; }

/* ----- Standards lists ----- */
.standards-list {
  list-style: none;
  padding: 0;
}
.standards-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.625rem;
}
/* Em-dash hanging indent in place of decorative gold dots — quieter and more editorial */
.standards-list li::before {
  content: '\2014'; /* em-dash */
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(31, 58, 82, 0.45);
  font-weight: 400;
}

/* ----- Fit blocks ----- */
.fit-block { padding: var(--space-2) 0; }
.fit-block.fit-yes { border-top: 3px solid var(--color-sunset-gold); padding-top: var(--space-2); }
.fit-block.fit-no  { border-top: 3px solid var(--color-warm-clay); padding-top: var(--space-2); }

/* ----- Pathway ----- */
/* Uppercase Roman numerals in serif type — editorial replacement for the gold-circle "How it works" template. */
.pathway-list {
  counter-reset: pathway;
  list-style: none;
  padding: 0;
}
.pathway-list li {
  counter-increment: pathway;
  position: relative;
  padding-left: 3rem;
  margin-bottom: var(--space-4);
  min-height: 44px;
}
.pathway-list li::before {
  content: counter(pathway, upper-roman);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-sunset-deep);
  letter-spacing: 0.04em;
  /* No background, no border, no circle — the numeral does the work alone */
}
.pathway-list li strong { display: block; margin-bottom: 0.25rem; color: var(--color-anchor); font-size: 1.05rem; }
.prelaunch-note {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-stone-light);
  border-left: 3px solid var(--color-warm-clay);
  padding-left: var(--space-2);
  margin-top: var(--space-3);
}

/* ----- Closing section (formerly CTA band) -----
   Drops the anchor-blue full-width colored band in favor of a quiet editorial close.
   Same cream-warm background as the rest of the site; section separation carried by
   typography and a thin top rule. The strategist owns the closing-line copy that lives
   inside this container. */
.cta-band {
  background: transparent;
  color: var(--color-stone);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-rule);
}
.cta-band h2 { color: var(--color-anchor); }
.cta-band .eyebrow { color: rgba(31, 58, 82, 0.7); }
.cta-band p { color: var(--color-stone); max-width: var(--max-text); }
.cta-band .btn-primary {
  background: var(--color-anchor);
  border-color: var(--color-anchor);
  color: var(--color-cream);
}
.cta-band .btn-primary:hover,
.cta-band .btn-primary:focus-visible {
  background: var(--color-anchor-deep);
  border-color: var(--color-anchor-deep);
  color: var(--color-cream);
}
.cta-band .phone-link {
  color: var(--color-anchor);
  margin-left: 1rem;
  font-weight: 500;
}

/* ----- Founders ----- */
.founders-content { max-width: var(--max-text); }

/* ----- Prose column (used on About Us, How We Operate, Who We Serve, How We Work With Your Team, Talk To Us)
   Single editorial column for narrative-register sections. Width tuned for line lengths
   in the 65-75 character range at body type sizes. */
.prose-column {
  max-width: var(--max-text);
}
.prose-column h2 {
  margin-bottom: var(--space-3);
}
.prose-column p {
  margin-bottom: var(--space-2);
  max-width: none; /* prose-column already constrains the container */
}
.prose-column ul,
.prose-column ol {
  margin-bottom: var(--space-3);
  margin-top: var(--space-2);
}

/* Centered variant — the whole prose column sits centered horizontally inside
   its container instead of left-aligned. Body text remains left-aligned within
   the column for readability. Used across What We Do so text isn't crammed
   against the left edge of the page. */
.prose-column-centered {
  margin-left: auto;
  margin-right: auto;
}

/* ----- Photo essay (Home §3) — load-bearing section that carries HOME-feel through photography only.
   Three brand-cast photographs in a full-bleed editorial triptych. No captions, no overlay,
   no operational claims. The photos do the work alone. Inherits standard .section padding. */
.photo-essay {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px; /* a hairline gap between photos rather than a wide gutter; reads as one essay */
  width: 100%;
}
.photo-essay-figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5; /* portrait crop on mobile gives each photo presence */
  background: var(--color-warm-clay);
}
.photo-essay-figure img,
.photo-essay-figure picture,
.photo-essay-figure picture img,
.photo-essay-figure .image-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
@media (min-width: 600px) {
  .photo-essay {
    grid-template-columns: 1fr 1fr 1fr; /* triptych on tablet+ */
    gap: 4px;
  }
  .photo-essay-figure {
    /* Was 3/4 (portrait-tall) — ate the entire desktop fold and pushed §4
       below scroll once the merged-page sections were added 2026-05-13.
       4/5 keeps each photo's compositional weight while bringing §4 closer
       to the fold so readers see prose, not just photos. */
    aspect-ratio: 4 / 5;
    max-height: 520px;
  }
}

/* ----- Talk To Us section (Home §4 and What We Do §5)
   Quiet inline form layout. Single cream-warm canvas. Prose + form stacked vertically
   on mobile, side-by-side on wide desktop. Reads as a contact card, not a CTA band. */
.section-talk {
  border-top: 1px solid var(--color-rule);
}
.section-talk .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.section-talk .prose-column {
  max-width: var(--max-text);
}
.section-talk .talk-form {
  width: 100%;
}
.section-talk .talk-form .contact-form-wrap {
  max-width: 720px;
}
@media (min-width: 1100px) {
  .section-talk .container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-6);
    align-items: start;
  }
}

/* ----- About section (Home §2)
   Inherits standard .section padding so the page rhythm stays consistent. */

/* ----- Generic prose sections (What We Do — How We Operate, Who We Serve, How We Work With Your Team)
   Bigger H2 type carries the page rhythm without ornamental section markers.
   Inherits .section padding; prose-column handles width. */

/* ----- Split section (asymmetric two-column with image)
   Used on §2 and §4 of What We Do. One side text, one side photograph,
   side-by-side on desktop, stacked on mobile.
   .section-split-image-right puts the photograph on the right.
   .section-split-image-left puts the photograph on the left (visual order via grid). */
.section-split .split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}
.section-split .split-content h2 {
  margin-bottom: var(--space-3);
}
.section-split .split-content p:last-child {
  margin-bottom: 0;
}
.section-split .split-image {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-warm-clay);
}
.section-split .split-image img,
.section-split .split-image picture,
.section-split .split-image picture img,
.section-split .split-image .image-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
@media (min-width: 900px) {
  .section-split .split-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
  .section-split .split-content {
    max-width: 580px;
  }
  /* Visual reorder: photo-left variant flips the visual order. Source order unchanged
     for screen-reader logic (figure precedes text in markup on §4 already). */
  .section-split-image-left .split-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .section-split-image-right .split-image,
  .section-split-image-left .split-image {
    aspect-ratio: 4 / 5;
    max-height: 600px;
  }
}

/* ============================================================
   COLOR-BLOCK SECTIONS
   ============================================================
   Real color used as section backgrounds, not just as small accents.
   Three palette colors deployed strategically as full-bleed sections:
     - .section-warm-clay  →  #8B7B6B (Home About Us)
     - .section-sage       →  #7A8471 (What We Do — Who We Serve)
     - .section-anchor     →  #1F3A52 (Home + What We Do — Talk To Us)
   Plus a hero variant of the warm-clay block (.hero-warm-clay) for What We Do.

   Each color block reverses the type to cream so the content stays readable.
   Eyebrows and links also adjust for contrast on each background. */

/* Shared color-block base */
.section-color-block,
.hero-color-block {
  /* Override the .section single-side padding so the block carries equal vertical
     air on both sides, like an editorial feature block. */
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  color: var(--color-cream);
}
@media (min-width: 900px) {
  .section-color-block,
  .hero-color-block {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
}
.section-color-block h2,
.section-color-block h3,
.hero-color-block h1,
.hero-color-block h2,
.hero-color-block h3 {
  color: var(--color-cream);
}
.section-color-block p,
.hero-color-block p,
.hero-color-block .subhead {
  color: var(--color-cream);
}
.section-color-block a,
.hero-color-block a {
  color: var(--color-sunset-gold);
}
.section-color-block a:hover,
.hero-color-block a:hover {
  color: #E8B27D; /* warmer sunset for hover on dark backgrounds */
}

/* Warm-clay variant (#8B7B6B) — Home About Us */
.section-warm-clay,
.hero-warm-clay {
  background: var(--color-warm-clay);
}

/* Sage variant (#7A8471) — What We Do Who We Serve */
.section-sage {
  background: var(--color-sage);
}

/* Anchor variant (#1F3A52) — Talk To Us closing on Home and What We Do */
.section-anchor {
  background: var(--color-anchor);
}

/* Hero color block (What We Do) — type-driven, no photograph */
.hero-color-block {
  background: var(--color-warm-clay);
  padding: var(--space-7) 0 var(--space-6);
}
.hero-color-block h1 {
  color: var(--color-cream);
  margin-bottom: var(--space-3);
}
.hero-color-block .subhead {
  color: var(--color-cream);
  font-size: var(--fs-lead);
}
@media (min-width: 900px) {
  .hero-color-block {
    padding: calc(var(--space-7) * 1.25) 0 var(--space-7);
  }
}

/* Hero-split variant — magazine-spread pattern.
   Left half: warm-clay color block with the H1 sentence (cream type).
   Right half: kitchen photograph at full strength.
   The two halves meet flush at the center; each carries full-bleed to its
   outside viewport edge. On mobile, panels stack: photograph on top, text below.
   This is the visual anchor pattern — color paired with photography, not just
   either alone. */
.hero-split {
  padding: 0;
  background: transparent;
}
.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
  min-height: auto;
}
.hero-split-text {
  background: var(--color-warm-clay);
  color: var(--color-cream);
  padding: var(--space-6) 1.25rem;
  display: flex;
  align-items: center;
  /* mobile source order: text first, photograph second.
     But for visual landing on mobile we want the photograph first;
     reorder via CSS so img reads first on mobile, text reads first on desktop. */
  order: 2;
}
.hero-split-text-inner {
  width: 100%;
  max-width: 540px;
}
.hero-split-text h1 {
  font-size: 1.625rem;      /* mobile: 26px — sentence-sized, fits the column */
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-cream);
  font-weight: 600;
  margin: 0;
}
.hero-split-image {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-warm-clay);
  order: 1; /* photograph first on mobile */
}
.hero-split-image img,
.hero-split-image picture,
.hero-split-image picture img,
.hero-split-image .image-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

@media (min-width: 600px) {
  .hero-split-text h1 {
    font-size: 2rem;        /* tablet: 32px */
    line-height: 1.2;
  }
}

@media (min-width: 900px) {
  .hero-split-grid {
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
  }
  /* What We Do hero is mirrored vs Home: photograph on the LEFT, warm-clay
     block with H1 on the RIGHT. Same compositional vocabulary as Home but
     reversed, so the two pages form a pair instead of reading as the same
     page twice. Source order remains text-first for accessibility (H1 reads
     before the image to screen readers and SEO). */
  .hero-split-image {
    order: 1;               /* desktop: photograph on the left */
    aspect-ratio: auto;
    height: 100%;
  }
  .hero-split-text {
    order: 2;               /* desktop: text on the right */
    /* Padding now mirrors what was on the left — generous gutter on the inside
       (the center seam where text sits next to the photograph), with the right
       padding aligned to the standard container's right edge. */
    padding-left: var(--space-5);
    padding-right: max(2rem, calc((100vw - 1180px) / 2 + 1.25rem));
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
  .hero-split-text-inner {
    max-width: 480px;
  }
  .hero-split-text h1 {
    font-size: 2.5rem;      /* desktop: 40px */
    line-height: 1.15;
    letter-spacing: -0.015em;
  }
}
@media (min-width: 1200px) {
  .hero-split-text h1 {
    font-size: 3rem;        /* large desktop: 48px */
    letter-spacing: -0.02em;
  }
}

/* Talk To Us inside an anchor-blue block — form gets cream-tinted inputs
   with anchor-darker text and sunset-gold submit so it stays readable on dark. */
.section-talk-anchor .form-required-note,
.section-talk-anchor .helper,
.section-talk-anchor .privacy-line {
  color: rgba(245, 240, 230, 0.78);
}
.section-talk-anchor .privacy-line a {
  color: var(--color-sunset-gold);
  text-decoration: underline;
}
.section-talk-anchor .form-field label {
  color: var(--color-cream);
  font-weight: 500;
}
.section-talk-anchor .form-field .required-mark {
  color: var(--color-sunset-gold);
}
.section-talk-anchor .form-field input,
.section-talk-anchor .form-field select,
.section-talk-anchor .form-field textarea {
  background: var(--color-cream);
  color: var(--color-anchor);
  border-color: rgba(245, 240, 230, 0.4);
}
.section-talk-anchor .form-field input:focus-visible,
.section-talk-anchor .form-field select:focus-visible,
.section-talk-anchor .form-field textarea:focus-visible {
  border-color: var(--color-sunset-gold);
  outline-color: var(--color-sunset-gold);
}
.section-talk-anchor .btn-primary {
  background: var(--color-sunset-gold);
  border-color: var(--color-sunset-gold);
  color: var(--color-anchor);
}
.section-talk-anchor .btn-primary:hover,
.section-talk-anchor .btn-primary:focus-visible {
  background: var(--color-sunset-deep);
  border-color: var(--color-sunset-deep);
  color: var(--color-cream);
}

/* Prominent list variant (Who We Serve on the sage block) — bigger type,
   more breathing room, em-dash marker in cream so it reads on the sage. */
.standards-list-prominent li {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}
.standards-list-prominent li::before {
  color: rgba(245, 240, 230, 0.6); /* cream em-dash for sage background */
}
@media (min-width: 900px) {
  .standards-list-prominent li {
    font-size: 1.25rem;
    margin-bottom: 1.125rem;
  }
}

/* Section-talk on dark blocks doesn't need the top hairline rule — the color
   transition itself is the section divider. Override the cream-warm version. */
.section-talk-anchor {
  border-top: 0;
}

/* Center-align headlines on color-block sections (warm-clay hero, sage feature,
   anchor-blue Talk To Us). Body remains left-aligned within the centered column
   for readability — only the display headline and the lead/subhead get centered. */
.hero-color-block .prose-column-centered,
.section-color-block .prose-column-centered {
  text-align: center;
}
.hero-color-block .prose-column-centered h1,
.hero-color-block .prose-column-centered .subhead,
.section-color-block .prose-column-centered h2 {
  text-align: center;
}
/* Body paragraphs and lists on color blocks return to left-aligned within the
   centered column so reading flow holds. */
.hero-color-block .prose-column-centered > p:not(.subhead),
.section-color-block .prose-column-centered > p,
.section-color-block .prose-column-centered > ul,
.section-color-block .prose-column-centered > ol {
  text-align: left;
}

/* ============================================================
   FULL-WIDTH PHOTOGRAPHIC BAND (between sections)
   ============================================================
   Standalone <figure> element placed between sections on What We Do.
   Bleeds edge-to-edge, no caption, no heading — purely a visual punctuation
   moment. Aspect ratio is wide (21:9-ish) on mobile, even wider on desktop. */
.full-width-band {
  margin: 0;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-warm-clay);
}
.full-width-band img,
.full-width-band picture,
.full-width-band picture img,
.full-width-band .image-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
@media (min-width: 900px) {
  .full-width-band {
    aspect-ratio: 21 / 8;
    max-height: 540px;
  }
}

/* Legacy section-with-band rules (still used on prior What We Do version
   if any template references it; safe to keep as the new template uses
   .full-width-band as a sibling figure). */
.section-with-band {
  padding-top: 0;
}
.section-band-image {
  margin: 0 0 var(--space-5) 0;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--color-warm-clay);
  width: 100%;
}
.section-band-image img,
.section-band-image picture,
.section-band-image picture img,
.section-band-image .image-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/* ============================================================
   PAIRED SECTIONS (Who We Serve | How We Work With Your Team)
   ============================================================
   Two parallel content blocks side-by-side on desktop, stacked on mobile.
   Cream-warm background (page default). A vertical sage hairline rule
   divides the columns on desktop; a horizontal sage rule between them
   on mobile. No color blocks — the typographic differentiation and the
   rule do the visual separation. */
.section-paired .paired-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
.section-paired .paired-column {
  margin: 0;
  padding: 0;
  max-width: 540px;
}
.section-paired .paired-column h2 {
  margin-bottom: var(--space-3);
}
.section-paired .paired-column p {
  margin-bottom: var(--space-2);
}
.section-paired .paired-column p:last-child {
  margin-bottom: 0;
}
.section-paired .paired-column .standards-list-indent {
  margin-left: 0;
}
/* Mobile: a horizontal sage rule between the stacked columns */
.section-paired .paired-column + .paired-column {
  border-top: 1px solid rgba(122, 132, 113, 0.4);
  padding-top: var(--space-5);
  margin-top: var(--space-3);
}
@media (min-width: 900px) {
  /* Asymmetric 40/60 split — narrower left column for the shorter "Who We Serve"
     content, wider right column for the longer "How We Work With Your Team"
     content. Counterintuitively, this BALANCES the visual heights: wider
     columns wrap text in fewer lines, so the longer content takes less vertical
     space when given more horizontal room. Both columns end closer to the
     same height. Magazine "main + sidebar" pattern. */
  .section-paired .paired-grid {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-6);
  }
  .section-paired .paired-column {
    max-width: none; /* let the grid template control width */
  }
  /* Desktop: vertical sage rule between columns instead of horizontal between rows */
  .section-paired .paired-column + .paired-column {
    border-top: 0;
    border-left: 1px solid rgba(122, 132, 113, 0.4);
    padding-top: 0;
    padding-left: var(--space-6);
    margin-top: 0;
  }
}

/* When .section-paired is layered on a sage color block (Home §5 since
   2026-05-13), the sage dividers become invisible against the same-color
   background. Swap to a cream-tinted divider so the column separation reads.
   Mobile (horizontal rule between stacked columns) and desktop (vertical rule
   between the two columns) both get the override. */
.section-color-block.section-sage.section-paired .paired-column + .paired-column {
  border-color: rgba(245, 240, 230, 0.4);
}

/* Quiet in-prose anchor link — used to give committed mid-page readers a
   shortcut to the bottom-of-page CTA section without adding a second button.
   Sunset-gold, underlined, slightly small. Not a button. Right-arrow glyph
   in the markup signals jump. */
.prose-jump {
  margin-top: var(--space-3);
  font-size: 0.95em;
}
.prose-jump a {
  color: var(--color-sunset-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose-jump a:hover,
.prose-jump a:focus {
  color: var(--color-sunset-gold);
  text-decoration-thickness: 2px;
}

/* ============================================================
   DECORATIVE ELEMENTS — used selectively across prose sections
   ============================================================ */

/* Thin sage hairline rule above H2 — small typographic ornament that signals
   "this is a section opening." Editorial magazine convention. */
.has-rule-above-h2 h2 {
  position: relative;
  padding-top: var(--space-3);
}
.has-rule-above-h2 h2::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-sage);
  margin-bottom: var(--space-3);
  position: absolute;
  top: 0;
  left: 0;
}

/* Lead paragraph — first paragraph in a prose section set in slightly larger,
   slightly looser type as an editorial section opener. */
.lead-paragraph {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--color-stone);
}
@media (min-width: 900px) {
  .lead-paragraph {
    font-size: 1.3125rem;
    line-height: 1.5;
  }
}

/* Peak mark above H2 / H1 — extracts the peak silhouette from the brand wordmark
   and uses it as a small decorative ornament. Brand-rooted decoration, not a
   magazine-default flourish. Used selectively across the three pages so it
   reads as brand language rather than as random sprinkles. */
.has-peak-above-h2 h2,
.has-peak-above-h1 h1 {
  position: relative;
  padding-top: var(--space-3);
}
.has-peak-above-h2 h2::before,
.has-peak-above-h1 h1::before {
  content: '';
  display: block;
  width: 36px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24'><path d='M2 22 L18 4 L28 12 L36 2 L48 14 L62 22 Z' fill='%237A8471'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: var(--space-2);
  opacity: 0.7;
}
/* On color blocks (warm-clay / sage / anchor-blue), swap the peak mark to cream
   so it reads against the dark backgrounds. */
.section-color-block.has-peak-above-h2 h2::before,
.section-color-block .has-peak-above-h2 h2::before,
.hero-color-block.has-peak-above-h1 h1::before,
.hero-color-block .has-peak-above-h1 h1::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24'><path d='M2 22 L18 4 L28 12 L36 2 L48 14 L62 22 Z' fill='%23F5F0E6'/></svg>");
  opacity: 0.85;
}

/* Talk To Us CTA on the anchor-blue closing — sunset-gold button, small email
   line below in cream. The button is the primary action; the email line is
   the lower-friction alternative. */
.talk-cta-row {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.section-talk-anchor .talk-cta {
  background: var(--color-sunset-gold);
  border-color: var(--color-sunset-gold);
  color: var(--color-anchor);
}
.section-talk-anchor .talk-cta:hover,
.section-talk-anchor .talk-cta:focus-visible {
  background: var(--color-sunset-deep);
  border-color: var(--color-sunset-deep);
  color: var(--color-cream);
}
.talk-email-line {
  margin-top: var(--space-3);
  font-size: 0.95rem;
}
.section-talk-anchor .talk-email-line {
  color: rgba(245, 240, 230, 0.85);
}
.section-talk-anchor .talk-email-line a {
  color: var(--color-sunset-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ----- Lists inside prose columns (Who We Serve, How We Work With Your Team)
   Slightly larger type and more breathing room between items so the lists
   don't read as plain bullet text. Each item gets visual presence. */
.prose-column .standards-list {
  margin: var(--space-3) 0 var(--space-3);
}
.prose-column .standards-list li {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 0.875rem;
  padding-left: 1.5rem;
}
@media (min-width: 900px) {
  .prose-column .standards-list li {
    font-size: 1.125rem;
    line-height: 1.55;
    margin-bottom: 1rem;
  }
}

/* Indented variant — pulls the entire list inward so it visually differentiates
   from the surrounding body prose. A thin sage rule on the left edge marks the
   list as a distinct typographic moment, not just bulleted body text. */
.standards-list-indent {
  border-left: 2px solid rgba(122, 132, 113, 0.35);
  padding-left: calc(var(--space-3) + 0.5rem); /* mobile: indent + space for em-dashes */
  margin-left: var(--space-2);
}
@media (min-width: 900px) {
  .standards-list-indent {
    padding-left: calc(var(--space-4) + 0.5rem);
    margin-left: var(--space-3);
  }
}
/* On color-block backgrounds, swap the rule color to cream-tint so it reads on dark */
.section-color-block .standards-list-indent {
  border-left-color: rgba(245, 240, 230, 0.4);
}

/* ----- Contact form ----- */
/* No bordered card around the form; the form sits directly on the page background.
   Squared corners on input fields match the squared button system. */
.contact-form-wrap {
  background: transparent;
  border: 0;
  padding: 0;
  max-width: 720px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-3);
}
.form-field label {
  font-weight: 600;
  color: var(--color-anchor);
  font-size: 0.95rem;
}
.form-field .required-mark { color: var(--color-sunset-deep); margin-left: 0.2rem; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--color-rule-strong);
  border-radius: 0;
  /* Warm cream input background — pure white reads cold against the cream-warm page; this gives
     the field a slight recess from the body without breaking the warm canvas. */
  background: var(--color-cream);
  color: var(--color-stone);
  font-size: 1rem;
  min-height: 44px;
  font-family: var(--font-sans);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--color-anchor);
  outline: 3px solid var(--color-sunset-gold);
  outline-offset: 0;
}
.form-field .helper {
  font-size: 0.8125rem;
  color: var(--color-stone-light);
}
.form-field .error-message {
  font-size: 0.8125rem;
  color: #b91c1c;
  display: none;
}
.form-field.is-invalid .error-message { display: block; }
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea { border-color: #b91c1c; }

.form-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-required-note {
  font-size: 0.8125rem;
  color: var(--color-stone-light);
  margin-bottom: var(--space-2);
}

.form-submit {
  width: 100%;
}
@media (min-width: 600px) {
  .form-submit { width: auto; min-width: 200px; }
}

.form-status {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: 6px;
  font-size: 0.95rem;
}
.form-status.is-success {
  background: rgba(122, 132, 113, 0.15);
  border: 1px solid var(--color-sage);
  color: var(--color-stone);
}
.form-status.is-error {
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid #b91c1c;
  color: #7a1818;
}

.privacy-line {
  font-size: 0.8125rem;
  color: var(--color-stone-light);
  margin-top: var(--space-2);
  max-width: 720px;
}

/* ----- Two-track contact ----- */
.contact-track h3 { margin-bottom: 0.5rem; }
.contact-track .contact-list {
  list-style: none;
  padding: 0;
  margin-top: 0.75rem;
}
.contact-track .contact-list li {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

/* ----- Service area ----- */
.closing-footnote {
  font-size: 0.875rem;
  color: var(--color-stone-light);
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-3);
  margin-top: var(--space-4);
  max-width: var(--max-text);
}

/* ----- Footer ----- */
.site-footer {
  background: var(--color-anchor);
  color: var(--color-cream);
  padding: var(--space-5) 0 var(--space-3);
  font-size: 0.9rem;
}
.site-footer a { color: var(--color-cream); }
.site-footer a:hover { color: var(--color-sunset-gold); }

.footer-disclaimers {
  border-top: 1px solid rgba(245, 240, 230, 0.18);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  color: rgba(245, 240, 230, 0.80);
  font-size: 0.8125rem;
  line-height: 1.55;
  max-width: 880px;
}
.footer-disclaimers p + p { margin-top: 0.75rem; }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(245, 240, 230, 0.70);
  margin-top: var(--space-3);
}
.footer-bottom .footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.footer-bottom .footer-links li { margin: 0; }

@media (min-width: 600px) {
  .footer-bottom .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.85rem;
  }
  .footer-bottom .footer-links li + li::before {
    content: '·';
    margin-right: 0.85rem;
    color: rgba(245, 240, 230, 0.50);
  }
}

.footer-draft-line {
  background: rgba(198, 139, 77, 0.18);
  color: var(--color-sunset-gold);
  border: 1px dashed var(--color-sunset-gold);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  margin-top: var(--space-2);
  display: inline-block;
}

/* ----- Legal pages ----- */
.legal-page { padding: var(--space-5) 0; }
.legal-page .container-narrow > h1 { margin-bottom: var(--space-3); }
.legal-page h2 { margin: var(--space-4) 0 var(--space-2); font-size: 1.4rem; }
.legal-page h3 { margin: var(--space-3) 0 0.5rem; font-size: 1.1rem; }
.legal-page p, .legal-page li { font-size: 0.95rem; }
.legal-page ul, .legal-page ol { margin: var(--space-1) 0 var(--space-2) 1.25rem; }
.legal-page li { margin-bottom: 0.4rem; }
.draft-banner {
  background: rgba(198, 139, 77, 0.12);
  border-left: 4px solid var(--color-sunset-gold);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: 0 6px 6px 0;
}
.draft-banner strong { color: var(--color-sunset-deep); }

.draft-notice {
  background: rgba(198, 139, 77, 0.10);
  border: 1px solid var(--color-sunset-gold);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  margin-top: var(--space-4);
  font-size: 0.95rem;
}

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

/* ----- Print ----- */
@media print {
  .site-header, .nav-toggle, .primary-nav, .header-phone,
  .footer-bottom .footer-links, .skip-link, .cta-band, .hero-ctas { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .section { padding: 1rem 0; }
}