/* =========================================================================
   Hearth & Kin — Home Concierge
   Shared stylesheet for all pages.

   Contents
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout
   5.  Buttons
   6.  Header & navigation
   7.  Image placeholders
   8.  Hero
   9.  Sections & eyebrows
   10. Cards (service, experience, value, feature)
   11. Steps
   12. Pricing
   13. Accordion (FAQ)
   14. Forms
   15. Boundary / disclaimer blocks
   16. Footer
   17. Motion & reduced motion
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette (from SPEC.md) */
  --ivory: #F6F3EE;
  --cream: #EDE5D8;
  --rose: #DAB5AE;
  --sage: #7F8B72;
  --sage-dark: #66705D;
  --charcoal: #333333;

  /* Accessible companions to the brand palette.
     --sage-text is a darkened sage used ONLY for small text (eyebrows, links,
     meta) because #7F8B72 on ivory is 3.1:1 — fine for icons, dividers and
     large type, but below the 4.5:1 AA threshold for small text.
     #5A6353 on ivory is 5.3:1. Brand sage is still used for all icons,
     rules, and decorative accents. */
  --sage-text: #5A6353;
  /* --sage-icon is used for icons and any mark that carries meaning. Brand sage
     on Warm Cream is 2.88:1, just under the 3:1 non-text threshold of WCAG
     1.4.11; this reads as the same sage but measures 3.3:1 on cream and 3.8:1
     on ivory. Purely decorative hairlines still use brand --sage. */
  --sage-icon: #748067;
  --charcoal-soft: #4A4A4A;
  --muted: #6B6660;

  /* Surfaces */
  --bg: var(--ivory);
  --surface: #FCFAF7;
  --surface-warm: var(--cream);
  --line: #E0D8CB;
  --line-soft: #EAE3D9;
  /* Form controls need a visible boundary at 3:1 (WCAG 1.4.11). The soft
     --line used for decorative dividers is only 1.4:1 against white. */
  --field-border: #9C8E78;
  --dark: #2C2A27;

  /* Type */
  --font-heading: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
                  Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Scale — clamp()s follow the desktop/mobile ranges in SPEC.md */
  --h1: clamp(2.375rem, 1.55rem + 3.6vw, 4.25rem);   /* 38 → 68px */
  --h2: clamp(1.875rem, 1.35rem + 2.1vw, 3rem);      /* 30 → 48px */
  --h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);         /* 24 → 32px */
  --h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);/* 18 → 21px */
  --body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); /* 17 → 19px */
  --small: 0.9375rem;
  --label: 0.75rem;

  /* Rhythm */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 8vw, 8.75rem);
  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 16px;

  /* Motion — subtle only, per SPEC.md */
  --ease: cubic-bezier(0.33, 0.02, 0.2, 1);
  --t-fast: 160ms;
  --t: 220ms;

  --focus: #2C2A27;
  --shadow-soft: 0 1px 2px rgba(51, 46, 38, 0.04),
                 0 10px 30px -18px rgba(51, 46, 38, 0.28);
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Every icon inherits its colour from the element it sits in. */
svg.icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

a { color: var(--sage-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sage-dark); }

:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--ivory); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--sage-dark);
  color: #fff;
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

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

/* -------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--charcoal);
  margin: 0 0 0.5em;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: 1.08; }
h2 { font-size: var(--h2); line-height: 1.14; }
h3 { font-size: var(--h3); line-height: 1.22; }
h4 { font-size: var(--h4); line-height: 1.3; letter-spacing: -0.004em; }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  line-height: 1.66;
  color: var(--charcoal-soft);
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin: 0 0 1.15rem;
}
.eyebrow--rule { display: flex; align-items: center; gap: 0.85rem; }
.eyebrow--rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sage);
  opacity: 0.42;
  max-width: 6rem;
}
.section--center .eyebrow--rule { justify-content: center; }
.section--center .eyebrow--rule::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sage);
  opacity: 0.42;
  max-width: 6rem;
}

.meta {
  font-size: var(--small);
  color: var(--muted);
  letter-spacing: 0.02em;
}

.on-dark { color: rgba(246, 243, 238, 0.9); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--ivory); }
.on-dark .eyebrow { color: rgba(246, 243, 238, 0.82); }
.on-dark a { color: var(--ivory); }

/* Decorative accent under selected headings — the watercolour olive branch.
   Replaces the earlier sage hairline. Purely ornamental, so it carries no
   text alternative; it is a background image on an <hr>. */
.flourish {
  width: 96px;
  height: 86px;                 /* branch-flourish.png is 360x321 */
  border: 0;
  margin: 1.25rem 0 1.75rem;
  background: url("../img/branch-flourish.png") no-repeat left center;
  background-size: contain;
  opacity: 0.95;
}
.section--center .flourish {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}
.on-dark .flourish { opacity: 0.9; }

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

main { display: block; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 5.5vw, 5.5rem); }
.section--cream { background: var(--surface-warm); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--dark); }
.section--center { text-align: center; }
.section--center .section-intro { margin-inline: auto; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.section--center .section-head { margin-inline: auto; }
.section-intro { max-width: 60ch; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.split--media-right > .split-media { order: 2; }
/* Contact page: wider form column, details column beside it. */
.split--form { grid-template-columns: 1.55fr 1fr; align-items: start; }

.stack > * + * { margin-top: 1.25rem; }

/* Bullet list with sage leaf-style markers */
.list-check { list-style: none; margin: 0; padding: 0; }
.list-check li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.9rem;
  line-height: 1.6;
}
.list-check li:last-child { margin-bottom: 0; }
.list-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  background: url("../img/check-icon.png") no-repeat center;
  background-size: contain;
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.9rem 1.65rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  line-height: 1.25;
  border: 1.25px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}

/* Sage fill uses --sage-dark so white text clears AA (5.2:1).
   Brand sage #7F8B72 with white would be 3.6:1. */
.btn--primary { background: var(--sage-dark); color: #fff; }
.btn--primary:hover { background: #545D4C; color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--sage-text);
  border-color: var(--sage);
}
.btn--ghost:hover {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  color: #fff;
}

/* For placement over the dark hero overlay. */
.btn--light { background: var(--cream); color: var(--charcoal); }
.btn--light:hover { background: #fff; color: var(--charcoal); }

/* The hero CTA is the same solid sage as the header button. Sage against the
   dark hero is only ~2.4:1, so the control needs a light hairline to stay
   discernible as a control (WCAG 1.4.11 asks for 3:1). The fill and label
   colours are untouched. */
.hero .btn--primary { border-color: rgba(246, 243, 238, 0.72); }
.hero .btn--primary:hover { border-color: var(--ivory); }

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.section--center .btn-row { justify-content: center; }

/* Quiet inline "link" affordance with a sage arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 139, 114, 0.5);
  padding-bottom: 2px;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.link-arrow:hover { color: var(--sage-dark); border-color: var(--sage-dark); }
.link-arrow svg { width: 1rem; height: 1rem; }

/* -------------------------------------------------------------------------
   6. Header & navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ivory);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 104px;   /* accommodates the stacked logo lockup */
}

/* The supplied logo is a stacked lockup (monogram over wordmark over
   descriptor) at 720x412. width/height attributes are on the tag, so the
   header reserves its space before the image loads. */
.brand-logo {
  display: block;
  width: clamp(124px, 12vw, 152px);
  height: auto;
}
.brand-logo--footer { width: 168px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--charcoal);
  padding-block: 0.35rem;
}
.brand-mark { width: 30px; height: 30px; color: var(--sage); flex: none; }
.brand-text { display: block; line-height: 1; }
.brand-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.005em;
  line-height: 1.1;
}
.brand-label {
  display: block;
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sage-text);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--charcoal);
  cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.85rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a {
  display: inline-block;
  padding: 0.45rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.nav-list a:hover { color: var(--sage-dark); border-bottom-color: var(--sage); }
.nav-list a[aria-current="page"] {
  color: var(--sage-text);
  border-bottom-color: var(--sage);
}

.nav-cta { padding: 0.75rem 1.3rem; min-height: 44px; font-size: 0.6875rem; }

/* Eight nav items plus the CTA do not fit one row at the default density.
   Note this is not a viewport problem: .header-inner is capped by
   --container (1240px), so every width above 1240 has exactly the same room
   and wraps identically — collapsing to the hamburger earlier, or a dropdown
   below some breakpoint, would not have helped up there. Tightening the row
   is what actually buys the space, so it now applies across the whole desktop
   range rather than only in the band above the 1000px breakpoint.
   Labels are never shortened; each is held on one line. */
@media (min-width: 1001px) {
  .site-nav { gap: 1rem; }
  .nav-list { gap: 0.85rem; }
  .nav-list a {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .nav-cta { padding: 0.7rem 1rem; white-space: nowrap; }
}

@media (max-width: 1000px) {
  .site-header { position: static; }

  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 86vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 6.5rem 1.75rem 2.5rem;
    background: var(--ivory);
    border-left: 1px solid var(--line);
    box-shadow: -24px 0 60px -40px rgba(44, 42, 39, 0.5);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t) var(--ease), visibility var(--t) var(--ease);
    overflow-y: auto;
    z-index: 120;
  }
  .site-nav.is-open { transform: translateX(0); visibility: visible; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--line-soft); }
  .nav-list a {
    padding: 1.05rem 0;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    border-bottom: 0;
  }
  .nav-list a[aria-current="page"] { border-bottom: 0; }

  .nav-cta { margin-top: 1.75rem; width: 100%; }

  .nav-toggle { position: relative; z-index: 130; }

  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(44, 42, 39, 0.38);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
    z-index: 110;
  }
  .nav-scrim.is-visible { opacity: 1; visibility: visible; }

  body.nav-open { overflow: hidden; }

  /* Without JS the toggle cannot open anything, so the panel must not exist.
     The nav falls back to a plain wrapped row of links under the wordmark. */
  .no-js .nav-toggle { display: none; }
  .no-js .header-inner { flex-wrap: wrap; padding-bottom: 1rem; }
  .no-js .site-nav {
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 0;
    background: none;
    border-left: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    overflow: visible;
  }
  .no-js .nav-list { flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1.35rem; }
  .no-js .nav-list li { border-bottom: 0; }
  .no-js .nav-list a { padding: 0.4rem 0; font-size: 0.75rem; }
  .no-js .nav-cta { width: auto; margin-top: 0; }
}

/* -------------------------------------------------------------------------
   7. Image placeholders
   Light warm boxes with a descriptive label. aspect-ratio is always set so
   swapping in a real photo causes no layout shift.
   ------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E6E1D9;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(127, 139, 114, 0.07) 0 2px,
      transparent 2px 12px
    );
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.ph-label {
  max-width: 30ch;
  padding: 1.25rem;
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.7;
  text-transform: uppercase;
  text-align: center;
  color: #55604B;
}
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 16 / 7; }
.ph--square { aspect-ratio: 1 / 1; }

/* Slight, elegant scale on hover where a placeholder sits inside a link. */
.ph-frame { overflow: hidden; border-radius: var(--radius); }
.ph-frame .ph { transition: transform 400ms var(--ease); border-radius: 0; border: 0; }
.ph-frame:hover .ph { transform: scale(1.02); }

/* -------------------------------------------------------------------------
   7b. Real photography
   The wrapper owns the aspect ratio and the image fills it with object-fit,
   so a photo of any native ratio drops in with zero layout shift — the box
   reserves exactly the same space the placeholder did.
   ------------------------------------------------------------------------- */
.media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--4x3     { aspect-ratio: 4 / 3; }
.media--wide    { aspect-ratio: 16 / 7; }
.media--portrait{ aspect-ratio: 4 / 5; }
.media--square  { aspect-ratio: 1 / 1; }

/* Quiet, slow scale — the only image motion on the site. */
.media--zoom img { transition: transform 500ms var(--ease); }
.media--zoom:hover img { transform: scale(1.03); }

/* Photographic icons supplied as PNG. Sized a touch larger than the old
   inline SVGs because the artwork carries its own internal padding. */
.icon-img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}
.service .icon-img { width: 3.25rem; height: 3.25rem; }

/* -------------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 76vh, 760px);
  background: var(--dark);
  overflow: hidden;
}
.hero .ph,
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: -2;
}
.hero-img { object-fit: cover; object-position: center 62%; }
.hero .ph-label {
  color: rgba(246, 243, 238, 0.5);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-align: right;
  padding: 1rem 1.25rem;
}
/* Elegant dark overlay — warm, graded, never flat black.
   Bottom-weighted on purpose: the headline and sub-copy sit in the lower two
   thirds, and these stops keep white text at 5.4:1 or better there even if the
   photograph behind it is a bright white sky. Lightening them will break
   contrast once a real image replaces the placeholder. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(24, 22, 20, 0.92) 0%,
      rgba(32, 30, 27, 0.82) 45%,
      rgba(44, 42, 39, 0.58) 100%
    );
}
.hero-content {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  max-width: 60rem;
}
.hero h1 { margin-bottom: 0.42em; }
.hero-sub {
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.6;
  color: rgba(246, 243, 238, 0.92);
  margin-bottom: 2.25rem;
}
.hero-note {
  margin-top: 1.5rem;
  font-size: var(--small);
  letter-spacing: 0.06em;
  color: rgba(246, 243, 238, 0.78);
}

/* Lighter interior hero used on the non-home pages. */
.page-hero {
  background: var(--surface-warm);
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero .lede { max-width: 56ch; }
.page-hero-note { margin-top: 1.5rem; }
.page-hero-banner { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* -------------------------------------------------------------------------
   9. Grids
   ------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Five cards, centred: 3 across, then 2 centred beneath. */
.grid--5 { grid-template-columns: repeat(6, 1fr); }
.grid--5 > * { grid-column: span 2; }
.grid--5 > :nth-child(4) { grid-column: 2 / span 2; }
.grid--5 > :nth-child(5) { grid-column: 4 / span 2; }

/* -------------------------------------------------------------------------
   10. Cards
   ------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.4vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color var(--t) var(--ease),
              transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.section--surface .card, .section--cream .card { background: #FFFDFB; }
.card:hover {
  border-color: var(--sage);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.card-icon {
  color: var(--sage-icon);
  margin-bottom: 1.35rem;
}
.card-icon .icon { width: 2rem; height: 2rem; }
.card h3 { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem); margin-bottom: 0.55rem; }
.card p { font-size: 1rem; line-height: 1.66; color: var(--charcoal-soft); }
.card-index {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--sage-text);
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

/* -------------------------------------------------------------------------
   "How We Help" — open row, no cards
   Five items across on desktop, divided by hairline rules rather than boxed.
   The rules are drawn as a left border on each item and switched off for the
   first item in each row, which changes as the column count drops.
   ------------------------------------------------------------------------- */
.helps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: clamp(2.25rem, 4vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.help {
  text-align: center;
  padding-inline: clamp(0.7rem, 1.5vw, 1.5rem);
  border-left: 1px solid var(--line);
}
.help:nth-child(5n + 1) { border-left: 0; }

.help-icon {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  margin: 0 auto 1.15rem;
}

/* Sans-serif and bold here, not the serif used for section headings — these
   are item labels, and it matches the reference layout. */
.help h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--charcoal);
  margin-bottom: 0.55rem;
  text-wrap: balance;
}
.help p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal-soft);
  margin: 0;
}

@media (max-width: 1000px) {
  .helps { grid-template-columns: repeat(3, 1fr); }
  .help:nth-child(n)      { border-left: 1px solid var(--line); }
  .help:nth-child(3n + 1) { border-left: 0; }
}
@media (max-width: 700px) {
  .helps { grid-template-columns: repeat(2, 1fr); }
  .help:nth-child(n)      { border-left: 1px solid var(--line); }
  .help:nth-child(2n + 1) { border-left: 0; }
}
@media (max-width: 520px) {
  .helps { grid-template-columns: 1fr; row-gap: 0; }
  .help {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 1.85rem 0;
  }
  .help:first-child { border-top: 0; padding-top: 0; }
  .help:last-child { padding-bottom: 0; }
}

/* Large service cards (Services page) */
.service {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0 1.75rem;
  padding: clamp(1.9rem, 3vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.service + .service { margin-top: clamp(1.25rem, 2vw, 1.75rem); }
.service-icon { color: var(--sage-icon); grid-row: span 2; }
.service-icon .icon { width: 2.25rem; height: 2.25rem; }
/* The service name is an <h2> for document structure but is sized as a card
   heading, not a section heading. */
.service h2 {
  font-size: var(--h3);
  line-height: 1.22;
  margin-bottom: 0.5rem;
}
.service-desc { max-width: 62ch; color: var(--charcoal-soft); }
.service-includes {
  margin-top: 1.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.service-includes h3,
.service-includes h4 {
  font-family: var(--font-body);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin-bottom: 1.1rem;
}
.service-includes ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-includes li {
  position: relative;
  padding-left: 1.85rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
}
.service-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 19px;
  height: 19px;
  background: url("../img/check-icon.png") no-repeat center;
  background-size: contain;
}
.service-note {
  margin-top: 1.6rem;
  padding: 0.95rem 1.15rem;
  background: rgba(127, 139, 114, 0.08);
  border-left: 2px solid var(--sage);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--small);
  line-height: 1.6;
  color: var(--charcoal-soft);
}

/* Value columns (About) */
.value { text-align: center; }
.value .icon { width: 2rem; height: 2rem; color: var(--sage-icon); margin: 0 auto 1.1rem; }
.value h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.value p { font-size: 0.9375rem; color: var(--charcoal-soft); }

/* Feature row (How It Works — communication) */
.feature { display: flex; gap: 1.1rem; align-items: flex-start; }
.feature .icon { color: var(--sage-icon); margin-top: 0.2rem; }
.feature h3 { font-size: 1.1875rem; margin-bottom: 0.3rem; }
.feature p { font-size: 0.9375rem; color: var(--charcoal-soft); margin: 0; }

/* -------------------------------------------------------------------------
   11. Steps
   ------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps .step {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0 2rem;
  padding-bottom: clamp(2.25rem, 3.5vw, 3.25rem);
}
.steps .step:last-child { padding-bottom: 0; }
/* Connecting hairline between step numerals */
.steps .step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 2.75rem;
  top: 4rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--sage);
  opacity: 0.32;
}
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid var(--sage);
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--sage-text);
  grid-row: span 2;
}
.section--cream .step-num { background: var(--surface-warm); }
.steps .step h3 { margin-bottom: 0.4rem; padding-top: 1.1rem; }
.steps .step p { max-width: 58ch; color: var(--charcoal-soft); margin: 0; }

/* -------------------------------------------------------------------------
   12. Pricing
   ------------------------------------------------------------------------- */
.pricing { align-items: stretch; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.9rem, 2.8vw, 2.6rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.section--cream .price-card, .section--surface .price-card { background: #FFFDFB; }
.price-card--featured {
  border-color: var(--sage);
  border-width: 1.5px;
  box-shadow: var(--shadow-soft);
}
.price-badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4rem 1rem;
  background: var(--rose);
  color: var(--charcoal);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.price-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.85rem;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.price-figure {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 2rem + 1vw, 2.875rem);
  line-height: 1;
  color: var(--charcoal);
}
.price-unit {
  font-size: var(--small);
  letter-spacing: 0.05em;
  color: var(--muted);
}
.price-card ul {
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0;
  flex: 1;
}
.price-card li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 19px;
  height: 19px;
  background: url("../img/check-icon.png") no-repeat center;
  background-size: contain;
}
.pricing-note {
  margin-top: clamp(2rem, 3vw, 2.75rem);
  text-align: center;
  font-size: var(--small);
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   13. Accordion (FAQ)
   ------------------------------------------------------------------------- */
.accordion {
  max-width: 900px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.acc-item { border-bottom: 1px solid var(--line); }
/* Each question is a real heading wrapping a real button, so the page keeps a
   navigable outline. The heading itself carries no styling of its own. */
.acc-item h3 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}
.acc-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: clamp(1.25rem, 2vw, 1.6rem) 0;
  background: none;
  border: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  line-height: 1.35;
  color: var(--charcoal);
  text-align: left;
  cursor: pointer;
  transition: color var(--t) var(--ease);
}
.acc-trigger:hover { color: var(--sage-dark); }
.acc-icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.35rem;
}
.acc-icon::before,
.acc-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--sage-icon);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.acc-icon::before { width: 16px; height: 1.25px; transform: translate(-50%, -50%); }
.acc-icon::after  { width: 1.25px; height: 16px; transform: translate(-50%, -50%); }
.acc-trigger[aria-expanded="true"] .acc-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--ease);
}
.acc-panel[data-open="true"] { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
/* Without JS nothing can expand the panels, so every answer stays open and the
   +/- affordance is hidden. The FAQ still reads as a complete page. */
.no-js .acc-panel { grid-template-rows: 1fr; }
.no-js .acc-icon { display: none; }
.no-js .acc-trigger { cursor: default; }
.acc-panel p {
  max-width: 68ch;
  padding-bottom: 1.6rem;
  color: var(--charcoal-soft);
  margin: 0;
}

/* -------------------------------------------------------------------------
   14. Forms
   ------------------------------------------------------------------------- */
.form-wrap {
  padding: clamp(1.75rem, 3.4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem 1.5rem;
}
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin-bottom: 0.55rem;
}
.field .optional {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--muted);
}
.req { color: #8C4A3F; margin-left: 0.15rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 0.95rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--charcoal);
  background: #fff;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748067' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.1rem;
  padding-right: 2.6rem;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #7E7161; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(127, 139, 114, 0.18);
}
.field [aria-invalid="true"] { border-color: #A45244; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(164, 82, 68, 0.18); }

.error {
  display: none;
  margin-top: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #8C4A3F;
}
.error.is-visible { display: block; }

.field--check { flex-direction: row; align-items: flex-start; gap: 0.8rem; }
.field--check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin-top: 0.2rem;
  flex: none;
  accent-color: var(--sage-dark);
  padding: 0;
}
.field--check label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--charcoal-soft);
  margin: 0;
  line-height: 1.55;
}
.field--check .error { margin-left: 0; }

.form-status {
  display: none;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  line-height: 1.6;
}
.form-status.is-visible { display: flex; }
.form-status--success {
  background: rgba(127, 139, 114, 0.12);
  border: 1px solid var(--sage);
  color: #3F4736;
}
.form-status--error {
  background: rgba(164, 82, 68, 0.08);
  border: 1px solid #C08376;
  color: #7E4136;
}
.form-status .icon { color: currentColor; margin-top: 0.1rem; }
/* The tick belongs to the success state only. */
.form-status--error .icon { display: none; }

/* The submit button should not stretch across the whole field on desktop. */
.field--full > .btn { align-self: flex-start; }
@media (max-width: 640px) {
  .field--full > .btn { align-self: stretch; }
}

.form-footnote {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Contact details column */
.contact-detail {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line-soft);
}
.contact-detail:first-of-type { padding-top: 0; }
.contact-detail .icon { color: var(--sage-icon); margin-top: 0.25rem; }
.contact-detail dt {
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin-bottom: 0.2rem;
}
.contact-detail dd { margin: 0; font-size: 1.0625rem; }
.contact-detail a { color: var(--charcoal); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-detail a:hover { color: var(--sage-dark); border-color: var(--sage); }

/* -------------------------------------------------------------------------
   14b. Closing CTA banner
   Photograph on the left, invitation on the right. Used at the foot of every
   page so the same call to action recurs in the same shape.
   ------------------------------------------------------------------------- */
.cta-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: left;
}
.cta-banner-media { position: relative; min-height: 340px; }
.cta-banner-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-banner-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.75rem);
}
.cta-banner-body h2 { margin-bottom: 0.35em; }
.cta-banner-body p { max-width: 46ch; color: var(--charcoal-soft); }
.cta-banner-body .btn-row { justify-content: flex-start; margin-top: 2rem; }
.cta-banner-body .flourish { margin-top: 0.5rem; }

@media (max-width: 860px) {
  .cta-banner { grid-template-columns: 1fr; }
  .cta-banner-media { min-height: 230px; }
}

/* -------------------------------------------------------------------------
   15. Boundary / disclaimer blocks
   ------------------------------------------------------------------------- */
.boundary {
  padding: clamp(1.9rem, 3vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.boundary-lead { max-width: 70ch; }
.boundary h3 {
  font-family: var(--font-body);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin: 2rem 0 1.15rem;
}
.boundary ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.boundary li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
}
/* A quiet horizontal bar — a "not this" marker, no alarming iconography. */
.boundary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 10px;
  height: 1.25px;
  background: #B08C84;
}
.emergency-line {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--charcoal);
}

.disclaimer-strip {
  padding: 1.35rem 1.5rem;
  background: rgba(127, 139, 114, 0.07);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  font-size: var(--small);
  line-height: 1.65;
  color: var(--charcoal-soft);
}

/* -------------------------------------------------------------------------
   16. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-warm);
  border-top: 1px solid var(--line);
  padding-block: clamp(3.25rem, 5vw, 4.75rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.25rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.footer-brand .brand { margin-bottom: 1.1rem; }
.footer-brand p { font-size: var(--small); color: var(--charcoal-soft); max-width: 34ch; }
/* Sitewide positioning line, sitting above the serving line in the footer. */
.footer-tagline {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--charcoal);
  margin-bottom: 0.4rem;
}
/* Private Client page only: a second serving line sitting under the shared
   Lodi one. Set in sage so it reads as an addition rather than a correction
   to the line above. --sage-text on --cream is 4.6:1. */
.footer-bay {
  margin-top: 0.5rem;
  color: var(--sage-text);
  font-weight: 600;
}
.footer-col h2 {
  font-family: var(--font-body);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin-bottom: 1.15rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.7rem; }
.footer-col a {
  font-size: var(--small);
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.footer-col a:hover { color: var(--sage-dark); border-bottom-color: var(--sage); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding-top: 1.9rem;
}
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}
.footer-legal-links a { font-size: 0.8125rem; }
.footer-disclaimer {
  max-width: 68ch;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
.footer-disclaimer + .footer-disclaimer { margin-top: 0.7rem; }
.footer-copy { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }

/* -------------------------------------------------------------------------
   17. Motion
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* If JS never runs, nothing may stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ph-frame:hover .ph { transform: none; }
  .card:hover { transform: none; }
}

/* =========================================================================
   SERVICES PAGE
   Built to the supplied mockup: split hero, 3x2 grid of five service cards
   plus a highlighted note cell, three pricing tiers, custom-plan strip.
   ========================================================================= */

/* --- split hero: copy panel left, photograph bleeding off the right --- */
.split-hero {
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.split-hero-body {
  display: flex;
  align-items: center;
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
  /* keeps the copy aligned to the site container while the panel is full-bleed */
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.split-hero-inner { max-width: 34ch; }
.split-hero h1 { margin-bottom: 0; }
.split-hero p { color: var(--charcoal-soft); margin-bottom: 0; }
.split-hero-branch {
  width: 62px;
  height: auto;
  margin-top: 2rem;
  opacity: 0.9;
}
.split-hero-media { position: relative; min-height: 320px; }
.split-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A short hairline used under the hero heading and each card heading. */
.rule-sm {
  width: 46px;
  height: 1px;
  border: 0;
  background: var(--sage);
  opacity: 0.55;
  margin: 1.4rem 0;
}
.svc-card .rule-sm { margin-inline: auto; }

/* --- 3 x 2 service grid --- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
  align-items: stretch;
}
.svc-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.svc-card:hover { border-color: var(--sage); box-shadow: var(--shadow-soft); }
.svc-card-icon {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: contain;
  margin: 0 auto 1.25rem;
}
.svc-card h3 {
  font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  line-height: 1.25;
  margin-bottom: 0;
  text-wrap: balance;
}
.svc-card > p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--charcoal-soft);
  margin-bottom: 1.6rem;
}

/* The "includes" checklist is left-aligned inside a centred card. */
.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.svc-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.62rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
}
.svc-list li:last-child { margin-bottom: 0; }
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 18px;
  height: 18px;
  background: url("../img/check-icon.png") no-repeat center;
  background-size: contain;
}

/* --- sixth cell: the tailored-service note --- */
.svc-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 3vw, 2.75rem);
  background: #E6E1D5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.svc-note img { width: 66px; height: auto; margin-bottom: 1.4rem; opacity: 0.9; }
.svc-note p {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0;
  max-width: 26ch;
}
.svc-note p + p { margin-top: 1.4rem; }

/* --- pricing --- */
.price-card { padding: 0; overflow: hidden; }
.price-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.85rem, 2.8vw, 2.5rem);
}
/* Full-width banner across the top of the featured tier, per the mockup —
   replaces the earlier floating pill. White on --sage-dark is 5.2:1. */
.price-banner {
  margin: 0;
  padding: 0.65rem 1rem;
  background: var(--sage-dark);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}
.price-tier {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-text);
  text-align: center;
  margin: 0 0 0.6rem;
}
.price-card .price-name { text-align: center; margin-bottom: 0.6rem; }
.price-card .price-amount { justify-content: center; }
.price-includes {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 0.9rem;
}
/* The inherited .price-card ul already carries flex:1 and a bottom margin;
   neutralise the margin so the footer rule sits at a predictable distance. */
.price-inner ul { margin-bottom: 0; }
.price-foot { margin-top: auto; text-align: center; }
.price-foot p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
  margin: 0 0 1.1rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 1.5rem;
}
.price-foot .btn { margin-bottom: 1.35rem; }
.price-foot img { width: 40px; height: auto; margin: 0 auto; opacity: 0.85; }

/* --- custom plan strip --- */
.custom-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding: 1.15rem clamp(1.25rem, 3vw, 2.25rem);
  background: rgba(127, 139, 114, 0.09);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.custom-strip-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
  margin: 0;
}
.custom-strip-item:last-child { justify-content: flex-end; }
.custom-strip-item img { width: 30px; height: auto; flex: none; opacity: 0.9; }
.custom-strip-item .icon { width: 1.25rem; height: 1.25rem; color: var(--sage-icon); }
.custom-strip-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
}

/* --- responsive --- */
@media (max-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .split-hero { grid-template-columns: 1fr; }
  .split-hero-body {
    padding-inline: var(--gutter);
    padding-block: clamp(2.5rem, 7vw, 3.5rem);
  }
  .split-hero-inner { max-width: 46ch; }
  .split-hero-media { min-height: 0; aspect-ratio: 16 / 9; }
  .custom-strip { grid-template-columns: 1fr; gap: 1rem; text-align: left; }
  .custom-strip-item:last-child { justify-content: flex-start; }
  .custom-strip-divider { width: 100%; height: 1px; align-self: auto; }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   ABOUT PAGE
   Split hero (shared .split-hero), bio two-column with an experience list,
   and the banded "My Approach" box.
   ========================================================================= */

/* Centred intro block. Deliberately NOT .section-head + .section--center:
   that pairing only works when .section--center is an ANCESTOR, and putting
   both on one element leaves the 62ch block flush left with centred text
   inside it, which reads as off-centre. */
.about-intro {
  max-width: 60ch;
  margin: 0 auto clamp(2.5rem, 4vw, 3.75rem);
  text-align: center;
}
.about-intro h2 { margin-bottom: 0; }
.about-intro .flourish { margin-inline: auto; }
.about-intro .lede { margin: 0; }

/* --- bio: portrait left, story + experience right --- */
.bio-grid {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  /* Explicitly centred within the container so both gutters match. */
  max-width: var(--container);
  margin-inline: auto;
}
.bio-lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--charcoal-soft);
}
.bio-lead strong { color: var(--charcoal); font-weight: 700; }

/* --- personal origin note ------------------------------------------------
   A warm aside sitting between the founder story and the experience list.
   Deliberately off-pattern: every other block on the page is an ivory or
   cream band with a centred head, so this one takes a soft rose wash, the
   branch flourish used across the site, a rose edge, and a narrower measure —
   it should read as something told, not something presented.
   #F5EAE6 is --rose let down over ivory; --charcoal-soft on it is 7.5:1
   and the --sage-text eyebrow is 5.3:1, both clear of AA. */
.origin-note {
  margin: clamp(2.1rem, 3.4vw, 2.9rem) 0 0;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: #F5EAE6;
  border: 1px solid rgba(218, 181, 174, 0.6);
  border-left: 3px solid var(--rose);
  border-radius: var(--radius);
}
/* The same branch flourish the rest of the site uses, at pull-quote size. */
.origin-sprig {
  display: block;
  width: 52px;
  height: auto;
  margin-bottom: 1.15rem;
  opacity: 0.9;
}
.origin-note .eyebrow { margin-bottom: 0.75rem; }
.origin-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
  line-height: 1.25;
  color: var(--charcoal);
  margin: 0 0 1.2rem;
}
.origin-note p:not(.eyebrow) {
  max-width: 54ch;
  margin: 0 0 1.15rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--charcoal-soft);
}
.origin-note p:last-child { margin-bottom: 0; }

/* --- experience list: icon, heading, one or two lines, hairline between --- */
.exp-list {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
}
.exp-item {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 1.35rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line-soft);
}
.exp-item:first-child { border-top: 0; padding-top: 0; }
.exp-item:last-child { padding-bottom: 0; }
.exp-item .icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--sage-icon);
  grid-row: span 2;
  margin-top: 0.15rem;
}
.exp-item h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--charcoal);
  margin-bottom: 0.3rem;
}
.exp-item p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal-soft);
  margin: 0;
}

/* --- "My Approach": heading cell followed by four divided columns --- */
.approach-box {
  display: grid;
  grid-template-columns: 1.15fr repeat(4, 1fr);
  align-items: center;
  padding-block: clamp(2rem, 3.2vw, 3rem);
  background: #EDE8DD;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.approach-head { padding-inline: clamp(1.5rem, 2.6vw, 2.5rem); }
.approach-head h2 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); margin-bottom: 0; }
.approach-head .flourish { margin: 1.35rem 0 0; }
.approach-item {
  text-align: center;
  align-self: stretch;
  padding-inline: clamp(0.85rem, 1.5vw, 1.5rem);
  border-left: 1px solid var(--line);
}
.approach-item .icon {
  width: 2rem;
  height: 2rem;
  color: var(--sage-icon);
  margin: 0 auto 1rem;
}
.approach-item h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.approach-item p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal-soft);
  margin: 0;
}

@media (max-width: 1000px) {
  .approach-box { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; }
  .approach-head { grid-column: 1 / -1; text-align: center; margin-bottom: 0.5rem; }
  .approach-head .flourish { margin-inline: auto; }
  .approach-item:nth-child(2) { border-left: 0; }
  .approach-item:nth-child(even) { border-left: 0; }
  .approach-item:nth-child(odd)  { border-left: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .bio-grid { grid-template-columns: 1fr; justify-items: center; }
  .bio-media { max-width: 420px; width: 100%; }
  .bio-body { max-width: 62ch; }
}
@media (max-width: 560px) {
  .approach-box { grid-template-columns: 1fr; row-gap: 0; padding-inline: 0; }
  .approach-item {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-block: 1.85rem;
  }
  .approach-head { margin-bottom: 1.5rem; }
  .exp-item { grid-template-columns: 2.25rem 1fr; gap: 0 1rem; }
}

/* =========================================================================
   CONTACT PAGE
   Split hero, then form left / ways-to-connect right.
   ========================================================================= */

.split-hero-tagline {
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  color: var(--charcoal);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.form-wrap h2,
.connect-card h2 {
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.125rem);
  margin-bottom: 0.5rem;
}
.form-intro {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal-soft);
  margin-bottom: 1.85rem;
}

.connect-card {
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.connect-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.connect-item {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  padding: 1.35rem 0;
}
.connect-item:first-child { padding-top: 0; }
.connect-item + .connect-item { border-top: 1px solid var(--line-soft); }

.connect-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(127, 139, 114, 0.15);
}
.connect-badge .icon { width: 1.4rem; height: 1.4rem; color: #5E6952; }

.connect-item h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}
.connect-item p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal-soft);
  margin: 0;
}
.connect-item p + p { margin-top: 0.2rem; }
.connect-item a { color: var(--charcoal); text-decoration: none; border-bottom: 1px solid var(--line); }
.connect-item a:hover { color: var(--sage-dark); border-color: var(--sage); }
.connect-item .link-arrow { margin-top: 0.85rem; border-bottom-color: rgba(127, 139, 114, 0.5); }
.connect-item .link-arrow:hover { color: var(--sage-dark); }

.connect-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1.35rem 1.4rem;
  background: rgba(127, 139, 114, 0.07);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.connect-note img { width: 40px; height: auto; flex: none; opacity: 0.9; }
.connect-note p { font-size: 0.9375rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0; }
.connect-note strong { display: block; color: var(--charcoal); margin-bottom: 0.25rem; }

/* Footnote under the submit button */
.form-footnote {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.form-footnote .icon { width: 1.05rem; height: 1.05rem; color: var(--sage-icon); flex: none; }

@media (max-width: 940px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   INTAKE & PURCHASE PAGE
   Single scrolling form with numbered steps, plus a sticky summary sidebar.
   ========================================================================= */

.intake-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.intake-main { min-width: 0; }

.intake-aside-inner {
  position: sticky;
  top: 7rem;                 /* clears the sticky header */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- numbered steps --------------------------------------------------- */
/* A <fieldset> carries a UA border, padding and margin, and its <legend> is
   painted over that border. All of it is reset here. `display: block` is set
   explicitly so the element can never inherit a grid/flex layout from another
   rule that happens to share the .step name — that previously turned each
   section into two columns and pushed the intro line into a narrow gutter. */
.step {
  display: block;
  min-width: 0;
  margin: 0 0 clamp(2rem, 3.5vw, 3rem);
  padding: 0 0 clamp(2rem, 3.5vw, 3rem);
  border: 0;
  border-bottom: 1px solid var(--line-soft);
}
.step--last { border-bottom: 0; padding-bottom: 0; }

/* The legend is taken out of its special border-straddling rendering and laid
   out as an ordinary flex row: badge, then heading. `float: none` and the
   width reset keep Safari/Firefox from shrink-wrapping it oddly. */
.step legend {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 0 0.25rem;
  border: 0;
  background: none;
  line-height: inherit;
}
.step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--sage-dark);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
}
.step-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem);
  line-height: 1.25;
  color: var(--charcoal);
}
/* Normal body text under the heading, indented to line up with the title
   rather than the badge. Never a column. */
.step-note {
  display: block;
  width: auto;
  max-width: 62ch;
  margin: 0 0 1.6rem 2.9rem;   /* 2rem badge + 0.9rem gap */
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal-soft);
}
.sub-label {
  margin: 1.5rem 0 0.9rem;
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- yes/no and tile choices ------------------------------------------ */
/* Each yes/no question is its own full-width row. They were previously
   auto-fitted into columns, which crowded the long question labels. */
.choice-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.choice-label {
  margin: 0 0 0.7rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--charcoal);
}
.choice-options { display: flex; flex-wrap: wrap; gap: 0.5rem 1.35rem; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9375rem;
  color: var(--charcoal-soft);
  cursor: pointer;
}
.choice input { width: 20px; height: 20px; accent-color: var(--sage-dark); margin: 0; }

/* A standalone question group (the gate/alarm one) needs its own spacing;
   inside .choice-row the grid gap already handles it. */
.choice-group { margin-bottom: 1.6rem; }
.choice-row .choice-group { margin-bottom: 0; }
.choice-group--wide { margin-bottom: 1.9rem; }
.intake-aside { min-width: 0; }
/* 2 x 2 on desktop, stacked on mobile — fixed columns rather than auto-fit so
   the four options never reflow into a cramped single row. */
.tile-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
.tile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--charcoal-soft);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.tile input { width: 20px; height: 20px; accent-color: var(--sage-dark); flex: none; margin: 0; }
.tile:hover { border-color: var(--sage-dark); }
.tile:has(input:checked) { border-color: var(--sage-dark); background: rgba(127, 139, 114, 0.09); }
.tile:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }

/* --- plan selection cards --------------------------------------------- */
.plan-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.plan-option {
  position: relative;
  display: block;
  cursor: pointer;
}
/* The radio sits visually inside the card head, not hidden — a keyboard user
   needs to see what has focus. */
.plan-option > input {
  position: absolute;
  top: 1.35rem;
  left: 1.15rem;
  width: 20px;
  height: 20px;
  accent-color: var(--sage-dark);
  margin: 0;
  z-index: 1;
}
.plan-option-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem 1.25rem 1.35rem 2.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.plan-option:hover .plan-option-inner { border-color: var(--sage); }
.plan-option:has(input:checked) .plan-option-inner {
  border-color: var(--sage-dark);
  border-width: 1.5px;
  box-shadow: var(--shadow-soft);
  background: #FFFDFB;
}
.plan-option:has(input:focus-visible) .plan-option-inner {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
}
.plan-option-head { display: block; margin-bottom: 0.85rem; }
.plan-option-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--charcoal);
}
.plan-option-price {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9375rem;
  color: var(--sage-text);
  font-weight: 600;
}
.plan-option-list { display: block; }
.plan-option-list > span {
  position: relative;
  display: block;
  padding-left: 1.5rem;
  margin-bottom: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--charcoal-soft);
}
.plan-option-list > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08em;
  width: 15px;
  height: 15px;
  background: url("../img/check-icon.png") no-repeat center;
  background-size: contain;
}
.plan-option--featured { padding-top: 0.7rem; }
.plan-option-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.3rem 0.85rem;
  background: var(--sage-dark);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-option--featured > input { top: 2.05rem; }

/* --- custom plan row --------------------------------------------------- */
.plan-custom { display: block; margin-top: 1rem; cursor: pointer; }
.plan-custom > input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.plan-custom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: rgba(127, 139, 114, 0.08);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.plan-custom:hover .plan-custom-inner { border-color: var(--sage); }
.plan-custom:has(input:checked) .plan-custom-inner {
  border-color: var(--sage-dark);
  border-width: 1.5px;
  background: rgba(127, 139, 114, 0.14);
}
.plan-custom:has(input:focus-visible) .plan-custom-inner {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
}
.plan-custom-text { font-size: 0.9375rem; line-height: 1.55; color: var(--charcoal-soft); }
.plan-custom-text strong { color: var(--charcoal); }
.plan-custom-action {
  flex: none;
  padding: 0.7rem 1.3rem;
  background: var(--sage-dark);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-custom:has(input:checked) .plan-custom-action { background: #545D4C; }

/* --- emergency box ----------------------------------------------------- */
.emergency-box {
  margin-top: 1.75rem;
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.emergency-box > p {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal-soft);
}

/* --- sidebar ----------------------------------------------------------- */
.side-card {
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.side-card--tinted { background: rgba(127, 139, 114, 0.08); border-color: var(--line); }
.side-card--center { text-align: center; }
.side-card--media { padding: 0.9rem; }

.side-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  line-height: 1.25;
  text-align: center;
  margin: 0;
}
.side-title--sm { font-size: 1.125rem; text-align: left; margin-bottom: 1.1rem; }
.side-card .flourish { width: 62px; height: 55px; margin: 0.75rem auto 1.25rem; }

.side-label {
  margin: 0 0 0.6rem;
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.side-label--tight { margin-top: 1.35rem; }

.summary-empty { font-size: 0.9375rem; color: var(--muted); margin: 0; }
.summary-plan {
  padding: 0.9rem 1rem;
  background: rgba(127, 139, 114, 0.13);
  border-radius: var(--radius-sm);
}
.summary-plan[hidden] { display: none; }
.summary-plan-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--charcoal);
}
.summary-plan-price { margin: 0.15rem 0 0; font-size: 0.9375rem; color: var(--charcoal-soft); }

.summary-features { margin: 0; }
.summary-features[hidden] { display: none; }
.summary-features li { font-size: 0.875rem; padding-left: 1.65rem; margin-bottom: 0.55rem; }
.summary-features li::before { width: 16px; height: 16px; top: 0.08em; }

.next-list { list-style: none; margin: 0; padding: 0; }
.next-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.next-list li + li { margin-top: 1.15rem; }
.next-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(127, 139, 114, 0.15);
}
.next-icon .icon { width: 1.1rem; height: 1.1rem; color: #5E6952; }
.next-list h3 {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 0.15rem;
  color: var(--charcoal);
}
.next-list p { font-size: 0.875rem; line-height: 1.55; color: var(--charcoal-soft); margin: 0; }

.side-flag { display: flex; gap: 0.9rem; align-items: flex-start; }
.side-flag .icon { width: 1.6rem; height: 1.6rem; color: #5E6952; flex: none; margin-top: 0.1rem; }
.side-flag h3 {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 0.25rem;
  color: var(--charcoal);
}
.side-flag p { font-size: 0.875rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0; }
.side-flag a { color: var(--charcoal); }

.side-trust {
  margin: 0 0 0.35rem;
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.side-cards { margin: 0; font-size: 0.8125rem; color: var(--muted); }

.side-tagline {
  margin: 0.9rem 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  color: var(--charcoal);
}

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1080px) {
  .intake-layout { grid-template-columns: 1fr; }
  .intake-aside-inner {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .side-card--media { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .plan-options { grid-template-columns: 1fr; }
  .plan-option--featured { padding-top: 0.9rem; }
  .form-grid--three { grid-template-columns: 1fr; }
  .intake-aside-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .step legend { gap: 0.7rem; }
  .step-note { margin-left: 0; }
  .tile-options { grid-template-columns: 1fr; }
  .choice-options { gap: 0.65rem 1.1rem; }
  .plan-custom-inner { flex-direction: column; align-items: stretch; text-align: left; }
  .plan-custom-action { text-align: center; }
}

/* Browsers without :has() still get a usable form — the radio itself always
   shows the selection, only the card highlight is lost. */
@supports not (selector(:has(*))) {
  .plan-option > input { position: static; margin-bottom: 0.6rem; }
  .plan-option-inner { padding-left: 1.25rem; }
  .plan-custom > input { position: static; width: auto; height: auto; opacity: 1; }
}

/* Carried over from the earlier intake styles — still used by both forms. */
.consent-note {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}

/* Busy state while a submission is in flight (contact + intake). */
.form-status--busy {
  background: rgba(127, 139, 114, 0.1);
  border: 1px solid var(--sage);
  color: #3F4736;
}
.form-status--busy .icon { display: none; }

.btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.btn:disabled { cursor: not-allowed; opacity: 0.7; }

/* A <fieldset> defaults to min-width:min-content, which stops the grids
   inside .step from shrinking on narrow screens. */
.step { min-width: 0; }
.step > .form-grid { min-width: 0; }
/* =========================================================================
   LEGAL PROSE  (privacy policy, and any future policy page)
   ========================================================================= */
.legal-prose { max-width: 72ch; }
.legal-prose > .lede { margin-bottom: 2.25rem; }
.legal-prose h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  line-height: 1.25;
  margin: clamp(2.25rem, 4vw, 3rem) 0 0.75rem;
}
.legal-prose p { color: var(--charcoal-soft); }
.legal-prose ul { list-style: none; margin: 0 0 1.25em; padding: 0; }
.legal-prose li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.75rem;
  line-height: 1.65;
  color: var(--charcoal-soft);
}
/* A quiet sage dash rather than the check icon used for service benefits —
   these are disclosures, not selling points. */
.legal-prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 9px;
  height: 1.25px;
  background: var(--sage);
}
.legal-effective {
  margin: 0.9rem 0 0;
  font-size: var(--small);
  letter-spacing: 0.03em;
  color: var(--muted);
}
.legal-contact {
  display: block;
  margin-top: 1.25rem;
  padding: 1.35rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  font-style: normal;
  line-height: 1.85;
  color: var(--charcoal-soft);
}
.legal-contact strong { color: var(--charcoal); }
/* =========================================================================
   HOW IT WORKS PAGE
   Vertical timeline (numbered rail + cards with a photo flush to the card
   edge), then the communication band.
   Deliberately NOT named .step — that class already belongs to the intake
   fieldsets, and a shared name previously caused a layout collision.
   ========================================================================= */

.timeline { list-style: none; margin: 0; padding: 0; }

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.5rem;
  align-items: start;
}
.tl-item + .tl-item { margin-top: 1.15rem; }

/* Rail connecting the numbered badges. */
.tl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.625rem;
  top: 3.5rem;
  bottom: -1.15rem;
  width: 1px;
  background: var(--sage);
  opacity: 0.45;
}

.tl-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-top: 1.35rem;
  border-radius: 50%;
  background: var(--sage-dark);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
}

.tl-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 38%;
  align-items: center;
  /* Fixes every card to the same height so all five photo slots are identical.
     Without it the row height follows the copy, and the step with the longest
     description gets a taller photo than its neighbours. The value clears the
     tallest card's natural content height. */
  min-height: 240px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tl-item:hover .tl-card { border-color: var(--sage); box-shadow: var(--shadow-soft); }

.tl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 4.25rem;
  height: 4.25rem;
  margin: 1.5rem 0 1.5rem 1.5rem;
  border-radius: 50%;
  background: rgba(127, 139, 114, 0.13);
}
.tl-icon .icon { width: 1.85rem; height: 1.85rem; color: #5E6952; }

.tl-text { padding: 1.5rem 1.35rem; }
.tl-text h3 {
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  line-height: 1.25;
  margin-bottom: 0.4rem;
}
.tl-text p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal-soft);
  margin: 0;
  max-width: 46ch;
}

/* Photo bleeds to the top, bottom and right edges of the card. The card's
   min-height plus align-self:stretch means every slot is exactly the same
   size; the card's overflow:hidden gives them all the same rounded corner. */
.tl-media {
  position: relative;
  align-self: stretch;
  margin: 0;
  min-height: 168px;
  background: var(--cream);
}
.tl-media img,
.tl-media .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
/* The slot is wider than 3:2, so cover trims the top and bottom. Where the
   subject sits high in the frame, bias the visible window upward so faces and
   screens are not clipped. */
.tl-media--top img { object-position: center 32%; }

/* --- communication band ------------------------------------------------ */
.comm-band {
  background: #D9DACE;          /* sage-tinted, charcoal text clears AA */
  border-block: 1px solid var(--line);
}
/* --sage-text is 4.45:1 on this band — just under AA for the 12px eyebrow.
   This darker sage measures 5.2:1 and reads the same. */
.comm-band .eyebrow { color: #4F5945; }
.comm-grid {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.comm-body .lede { color: var(--charcoal-soft); }

/* Illustrative phone showing the kind of update a family receives. */
.phone {
  width: min(240px, 100%);
  margin: 0 auto;
  padding: 0.85rem 0.7rem 1rem;
  background: #FCFAF7;
  border: 8px solid #2C2A27;
  border-radius: 30px;
  box-shadow: 0 24px 50px -28px rgba(44, 42, 39, 0.6);
}
.phone-brand {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  text-align: center;
  margin: 0;
}
.phone-sub {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--sage-text);
  margin: 0.1rem 0 0.85rem;
}
.phone-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin: 0 0 0.5rem;
}
.phone-shot {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 0.75rem;
}
.phone-shot img { width: 100%; height: 100%; object-fit: cover; }
.phone-list { list-style: none; margin: 0; padding: 0; }
.phone-list li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.4rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--charcoal-soft);
}
.phone-list li:last-child { margin-bottom: 0; }
.phone-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 12px;
  height: 12px;
  background: url("../img/check-icon.png") no-repeat center;
  background-size: contain;
}

/* 4-across feature row with hairline dividers */
.comm-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.comm-feature {
  text-align: center;
  padding-inline: clamp(0.6rem, 1.4vw, 1.25rem);
  border-left: 1px solid rgba(127, 139, 114, 0.42);
}
.comm-feature:first-child { border-left: 0; }
.comm-feature .icon {
  width: 1.75rem;
  height: 1.75rem;
  color: #4F5945;
  margin: 0 auto 0.7rem;
}
.comm-feature h3 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 0 0 0.35rem;
}
.comm-feature p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
  margin: 0;
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 940px) {
  .comm-grid { grid-template-columns: 1fr; }
  .phone { margin-bottom: 0.5rem; }
}
@media (max-width: 860px) {
  .tl-card { grid-template-columns: auto minmax(0, 1fr); }
  .tl-media { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .tl-item { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 0.9rem; }
  .tl-item:not(:last-child)::before { left: 1.25rem; top: 2.9rem; }
  .tl-num { width: 2.5rem; height: 2.5rem; margin-top: 1.1rem; font-size: 0.875rem; }
  .tl-icon { width: 3.25rem; height: 3.25rem; margin: 1.15rem 0 0 1.15rem; }
  .tl-icon .icon { width: 1.5rem; height: 1.5rem; }
  .tl-card { grid-template-columns: minmax(0, 1fr); }
  .tl-text { padding: 1rem 1.15rem 1.25rem; }
  .comm-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 0; }
  .comm-feature:nth-child(odd) { border-left: 0; }
}
@media (max-width: 420px) {
  .comm-features { grid-template-columns: 1fr; }
  .comm-feature { border-left: 0; }
}

/* =========================================================================
   PRIVATE CLIENT PAGE
   Bay Area engagement page. Darker and quieter than the Lodi pages: the hero
   is a single full-bleed photo weighted to the right with a graded scrim, and
   the closing band is solid --dark. No pricing appears on this page.
   ========================================================================= */

/* General utility, kept with the page that first needed it. */
.media--16x9 { aspect-ratio: 16 / 9; }

/* --- hero: photo bled to the right, copy on a darkened left field ---------
   The scrim holds >=0.86 opacity across the copy column and only clears over
   the right-hand third, so ivory text measures ~12:1 where it actually sits
   while the photograph still reads. */
.pc-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 78vh, 780px);
  background: var(--dark);
  overflow: hidden;
}
.pc-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
  z-index: -2;
}
.pc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(28, 26, 24, 0.94) 0%,
    rgba(28, 26, 24, 0.90) 30%,
    rgba(28, 26, 24, 0.86) 44%,
    rgba(28, 26, 24, 0.56) 62%,
    rgba(28, 26, 24, 0.30) 82%,
    rgba(28, 26, 24, 0.26) 100%);
}
/* The container is a flex item; without min-width:0 it refuses to shrink below
   the headline's min-content width and pushes the page wider than the screen. */
.pc-hero > .container { min-width: 0; }
.pc-hero-inner { max-width: min(36ch, 100%); padding-block: clamp(3rem, 6vw, 4.5rem); }
.pc-hero-inner h1 { margin-bottom: 0; }
.pc-hero-sub {
  font-size: var(--body);
  line-height: 1.7;
  margin-bottom: 0;
}
/* Quiet qualifier under the subhead — this page takes no online payment. */
.pc-consult-note {
  font-size: var(--small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, 0.72);
  margin: 1.6rem 0 0;
}
.pc-hero .btn-row { margin-top: 1.9rem; }

/* --- badged icon columns (benefit row + built on trust) -------------------
   One treatment shared by both sections so they read as a pair: a soft sage
   disc after .connect-badge on the contact page, centred over the heading.
   The centring has to come from margin-inline:auto, not text-align — the
   reset sets img/svg to display:block, so a bare icon ignores text-align and
   pins itself to the left of the column, which is what it was doing. */
.pc-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: rgba(127, 139, 114, 0.15);
}
.pc-badge .icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--sage-text);
}
/* Heading size is shared with .card h3, tying these columns to the Bespoke
   Services cards above them. */
.pc-benefit h3,
.pc-trust h3 {
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  margin: 0 0 0.55rem;
}

/* --- four-column benefit row --- */
.pc-benefit { text-align: center; }
.pc-benefit p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--charcoal-soft);
  max-width: 27ch;
  margin: 0 auto;
}

/* --- note + CTA sitting under the bespoke service cards --- */
.pc-cards-note {
  max-width: 60ch;
  margin: clamp(2.25rem, 3.5vw, 3rem) auto 0;
  color: var(--charcoal-soft);
}

/* --- built on trust: three centred icon columns --- */
.pc-trust { text-align: center; }
.pc-trust p {
  font-size: 1rem;
  line-height: 1.66;
  color: var(--charcoal-soft);
  max-width: 34ch;
  margin: 0 auto;
}

/* --- closing band --- */
.pc-closing { max-width: 56ch; margin-inline: auto; }
.pc-closing h2 { margin-bottom: 0.5em; }
.pc-closing p { margin-bottom: 0; }
.pc-closing .pc-consult-note { margin-top: 1.5rem; }
.pc-closing .btn-row { margin-top: 2rem; }

@media (max-width: 860px) {
  /* Copy no longer clears the photo, so the scrim goes even across. */
  .pc-hero { align-items: flex-end; min-height: clamp(500px, 70vh, 640px); }
  .pc-hero-img { object-position: center; }
  .pc-hero::after {
    background: linear-gradient(180deg,
      rgba(28, 26, 24, 0.62) 0%,
      rgba(28, 26, 24, 0.80) 45%,
      rgba(28, 26, 24, 0.92) 100%);
  }
  .pc-hero-inner { max-width: min(46ch, 100%); }
}

@media (max-width: 640px) {
  .pc-benefit p, .pc-trust p { max-width: 38ch; }
}

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

/* --- Tablet: two-column cards --- */
@media (max-width: 1000px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 > *,
  .grid--5 > :nth-child(4),
  .grid--5 > :nth-child(5) { grid-column: auto; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .boundary ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .split--form { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2.25rem; }
  .split--media-right > .split-media { order: 0; }
  .service { grid-template-columns: 1fr; gap: 1.25rem; }
  .service-icon { grid-row: auto; }
  .service-includes ul { grid-template-columns: 1fr; }
}

/* --- Mobile: single column --- */
@media (max-width: 640px) {
  :root { --section-y: 3.75rem; }

  body { font-size: 1.0625rem; }  /* 17px — above the 16px floor */

  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }

  .hero { min-height: 0; align-items: stretch; }
  .hero-content { padding-block: clamp(4rem, 18vw, 6rem) 3.25rem; }
  .hero .btn { width: 100%; }
  .hero .ph-label { display: none; }

  .steps .step { grid-template-columns: 3.5rem 1fr; gap: 0 1.15rem; }
  .step-num { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
  .steps .step:not(:last-child)::before { left: 1.75rem; top: 4rem; }
  .steps .step h3 { padding-top: 0.35rem; font-size: 1.375rem; }

  .form-grid { grid-template-columns: 1fr; }

  .boundary ul { grid-template-columns: 1fr; }

  .btn-row .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .footer-copy { white-space: normal; }

  .accordion { border-top-width: 1px; }
  .acc-trigger { gap: 1rem; }
}

@media (max-width: 640px) {
  .header-inner { min-height: 88px; }
  .brand-logo { width: 116px; }
  .brand-logo--footer { width: 150px; }
}

@media (max-width: 380px) {
  .brand-logo { width: 104px; }
}

/* --- Print --- */
@media print {
  .site-header, .nav-toggle, .site-nav, .nav-scrim, .btn, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .hero::after { display: none; }
}