/* RLBM Design System Tokens */
:root {
  --deep-evergreen: #1A4A3E;
  --evergreen-light: #8FADA6;
  --terracotta: #7A3D28;
  --antique-gold: #A07820;
  --warm-cream: #F6F1E9;
  --cream-dark: #EDE5D5;
  --deep-slate: #2E3338;
  --white: #FFFFFF;
}

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

body {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--deep-slate);
  background: var(--warm-cream);
}

h1, h2, h3, h4 { font-family: 'EB Garamond', serif; font-weight: 500; line-height: 1.25; color: var(--deep-evergreen); }
h1 { font-size: 2.75rem; font-weight: 400; }
h2 { font-size: 2rem; }
h3 { font-size: 1.35rem; }

.subhead { font-family: 'EB Garamond', serif; font-style: italic; color: var(--terracotta); font-size: 1.15rem; }
.label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--antique-gold); font-weight: 600; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Header / Nav */
.site-header { background: var(--deep-evergreen); position: sticky; top: 0; z-index: 100; }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 1100px; margin: 0 auto; }
/* --- Aug 2026. Nine nav items plus the brand need about 1500px on one line, so
   side by side they always wrapped, and the second row landed with a different
   left edge from the first. Two ragged rows squeezed against a long tagline.
   Stacking gives the nav the full container width, where it fits on one row for
   both sites, at roughly the same header height as before. The threshold is the
   width at which the nav actually fits one row (about 1020px of nav plus the
   container padding). Below it the old side-by-side layout is still shorter. --- */
@media (min-width: 1080px) {
  .nav-wrap { flex-direction: column; align-items: stretch; gap: 12px; }
  .nav-wrap .brand { align-self: flex-start; }
  /* space-between, so the nav row spans exactly the width the brand row does.
     HOME lands directly under the logo mark and the CTA anchors the right edge,
     which stops the mark reading as an orphan out on its own. Leftover space is
     never more than about 30px across eight gaps, so the items stay evenly set. */
  nav.main-nav { justify-content: space-between; flex-wrap: wrap; }
}
.brand { display: flex; flex-direction: row; align-items: center; gap: 12px; text-decoration: none; }
.brand-text { display: flex; flex-direction: column; }
/* --- Aug 2026. The nav was squeezing the brand block, which broke the longer
   practice names onto two lines and left the mark floating beside a three-line
   text stack. Only applied from 1150px up: below that the nav needs the room
   more than the brand does, and letting the brand hold full width there made
   the nav wrap into four rows. --- */
@media (min-width: 1080px) {
  .brand { flex: 0 0 auto; }
  .brand-name { white-space: nowrap; }
}
/* --- Aug 2026. The mark was sitting on a cream tile, which fought the artwork.
   The peak's own fill is the brand evergreen, the same colour as the header, so
   the mark is drawn to dissolve into that background and show only its gold
   outline, stripes and star. On a light tile that fill reads as a heavy dark
   block in a box. Tile removed, mark sized up now that it carries no padding. --- */
.brand-logo { height: 54px; width: auto; }
.brand-name { font-family: 'EB Garamond', serif; font-size: 1.3rem; color: var(--white); letter-spacing: 0.02em; }
.brand-sub { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--evergreen-light); }
nav.main-nav { display: flex; gap: 8px; flex-wrap: wrap; }
nav.main-nav a {
  color: var(--white); text-decoration: none; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 12px 14px; border-radius: 8px;
  min-height: 44px; display: inline-flex; align-items: center;
}
nav.main-nav a:hover { background: rgba(255,255,255,0.12); }
nav.main-nav a.active { color: var(--evergreen-light); }
nav.main-nav a.nav-cta { background: var(--terracotta); }
nav.main-nav a.nav-cta:hover { background: #6a341f; }

/* Hero */
.hero { background: linear-gradient(160deg, rgba(26,74,62,0.88) 0%, rgba(18,51,43,0.79) 100%), url('images/own-sunny-cove.jpg') center/cover; color: var(--white); padding: 96px 0; }
.hero h1 { color: var(--white); max-width: 720px; }
.hero .subhead { color: var(--evergreen-light); margin-top: 16px; max-width: 640px; }
.hero .label { margin-bottom: 20px; display: block; }
.hero-actions { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; }

/* Page hero (interior pages) */
.page-hero { background: var(--deep-evergreen); color: var(--white); padding: 64px 0; }
.page-hero h1 { color: var(--white); }
.page-hero .subhead { color: var(--evergreen-light); margin-top: 10px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 28px; border-radius: 8px; text-decoration: none;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  border: none; cursor: pointer; font-family: 'Raleway', sans-serif;
}
.btn-primary { background: var(--deep-evergreen); color: var(--white); }
.btn-primary:hover { background: #143b31; }
.btn-secondary { background: var(--terracotta); color: var(--white); }
.btn-secondary:hover { background: #6a341f; }
.btn-outline { background: transparent; color: var(--white); border: 1px solid var(--evergreen-light); }
.btn-outline:hover { background: rgba(255,255,255,0.1); }

/* Sections */
section { padding: 72px 0; }
section.alt { background: var(--white); }
.section-intro { max-width: 740px; margin: 0 auto 48px; text-align: center; }
.section-intro h2::after { margin-left: auto; margin-right: auto; }
.section-intro .label { display: block; margin-bottom: 8px; }
.section-intro h2 { margin-bottom: 14px; }

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.card {
  background: var(--white); border: 1px solid var(--cream-dark); border-radius: 8px;
  padding: 32px; transition: border-color 0.2s ease;
}
.card:hover { border-color: var(--evergreen-light); }
.card .icon {
  width: 48px; height: 48px; border-radius: 8px; background: var(--cream-dark);
  color: var(--deep-evergreen); display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 18px;
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.95rem; }
section.alt .card { background: var(--warm-cream); }

/* --- Aug 2026. Cards in a grid row are stretched to equal height, but their
   content was not, so the trailing "read more" links floated at whatever height
   the copy happened to end. Making the card a column flex box and letting the
   last paragraph absorb the slack pins those links to the bottom of every card,
   so they line up across a row. --- */
.card { display: flex; flex-direction: column; }
.card > p:last-of-type { margin-bottom: auto; }

/* Pillars */
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.pillar {
  background: var(--white); border: 1px solid var(--cream-dark); border-radius: 8px;
  padding: 24px 16px; text-align: center;
}
.pillar:hover { border-color: var(--evergreen-light); }
.pillar .icon { font-size: 1.8rem; margin-bottom: 10px; }
.pillar h3 { font-size: 1.05rem; }

/* Pricing */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; align-items: stretch; }
.tier {
  background: var(--white); border: 1px solid var(--cream-dark); border-radius: 8px;
  padding: 36px 30px; display: flex; flex-direction: column;
}
.tier:hover { border-color: var(--evergreen-light); }
.tier.featured { border: 2px solid var(--deep-evergreen); position: relative; }
.tier .tier-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--terracotta); color: var(--white); font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}
.tier .price { font-family: 'EB Garamond', serif; font-size: 2.4rem; color: var(--deep-evergreen); margin: 12px 0 2px; }
.tier .price span { font-size: 1rem; font-family: 'Raleway', sans-serif; color: var(--deep-slate); }
.tier .hsa-note { font-size: 0.8rem; color: var(--antique-gold); font-weight: 600; margin-bottom: 18px; }
.tier ul { list-style: none; margin: 18px 0 26px; flex: 1; }
.tier ul li { padding: 7px 0 7px 26px; position: relative; font-size: 0.92rem; border-bottom: 1px solid var(--cream-dark); }
.tier ul li:last-child { border-bottom: none; }
.tier ul li::before { content: "✓"; position: absolute; left: 0; color: var(--deep-evergreen); font-weight: 700; }

/* Info band */
.band { background: var(--deep-evergreen); color: var(--white); padding: 64px 0; }
.band h2 { color: var(--white); }
.band .subhead { color: var(--evergreen-light); }
.band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

/* Two-column */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

/* Provider cards */
.provider { background: var(--white); border: 1px solid var(--cream-dark); border-radius: 8px; padding: 40px; }
.provider .credential { color: var(--antique-gold); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; display: block; }

/* Tables */
.fee-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--cream-dark); border-radius: 8px; overflow: hidden; }
.fee-table th { background: var(--deep-evergreen); color: var(--white); text-align: left; padding: 14px 18px; font-family: 'Raleway', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.fee-table td { padding: 13px 18px; border-top: 1px solid var(--cream-dark); font-size: 0.93rem; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
label.field-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 6px; color: var(--deep-slate); }
input, select, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--cream-dark); border-radius: 8px;
  font-family: 'Raleway', sans-serif; font-size: 0.95rem; background: var(--white); color: var(--deep-slate);
  min-height: 44px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--evergreen-light); border-color: var(--evergreen-light); }

/* Notice */
.notice { background: var(--cream-dark); border-radius: 8px; padding: 20px 24px; font-size: 0.9rem; }

/* FAQ */
details { background: var(--white); border: 1px solid var(--cream-dark); border-radius: 8px; padding: 20px 24px; margin-bottom: 12px; }
details summary { font-family: 'EB Garamond', serif; font-size: 1.15rem; color: var(--deep-evergreen); cursor: pointer; }
details p { margin-top: 12px; font-size: 0.95rem; }

/* Footer */
.site-footer { background: var(--deep-slate); color: #b8bcc0; padding: 56px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .tagline { color: var(--antique-gold); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 700; margin-bottom: 8px; }
.site-footer .footer-brand { font-family: 'EB Garamond', serif; font-size: 1.25rem; color: var(--white); margin-bottom: 12px; }
.site-footer h3 { color: var(--white); font-size: 1rem; margin-bottom: 14px; }
.site-footer a { color: #b8bcc0; text-decoration: none; display: block; padding: 4px 0; font-size: 0.9rem; }
.site-footer a:hover { color: var(--white); }
/* --- Aug 2026. Five items under space-between were squeezed until the short
   ones broke mid-phrase, so "Privacy Policy · Terms of Use" stacked into three
   lines. Centring the row and letting each item size to its own content makes
   them wrap as whole phrases. --- */
.footer-bottom { border-top: 1px solid #454b52; padding-top: 24px; font-size: 0.78rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px; text-align: center; }
.footer-bottom > span { flex: 0 1 auto; }
/* .site-footer a is display:block for the footer nav columns, which was also
   stacking the inline links in this bar. Keep them inline here. */
.footer-bottom a { display: inline-block; padding: 4px 0; font-size: inherit; }

@media (max-width: 860px) {
  h1 { font-size: 2.1rem; }
  .hero { padding: 64px 0; }
  .nav-wrap { flex-direction: column; gap: 10px; }
  nav.main-nav { justify-content: center; }
}
@media (max-width: 640px) {
  .provider { padding: 26px 22px; }
  .post-hero-img { height: 220px; }
}

/* Photography */
.card-photo { width: 100%; height: 170px; object-fit: cover; border-radius: 8px; margin-bottom: 18px; display: block; }
.pillar-photo { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; margin-bottom: 12px; display: block; }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.blog-card { background: var(--white); border: 1px solid var(--cream-dark); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s ease; }
.blog-card:hover { border-color: var(--evergreen-light); }
.blog-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.blog-card .blog-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.blog-card h3 { margin: 8px 0 10px; }
.blog-card p { font-size: 0.93rem; flex: 1; }
.blog-meta { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--antique-gold); font-weight: 600; }
.blog-card .read-more { margin-top: 18px; color: var(--terracotta); text-decoration: none; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.post-hero-img { width: 100%; height: 340px; object-fit: cover; display: block; border-radius: 8px; margin-bottom: 40px; }
.post-body { max-width: 760px; margin: 0 auto; }
.post-body h2 { margin: 36px 0 14px; }
.post-body p { margin-bottom: 16px; }
.post-body ul { margin: 0 0 16px 22px; }
.post-body li { margin-bottom: 8px; }

/* Sister-practice cross links */
.xlink-bar { background: var(--cream-dark); text-align: center; padding: 10px 18px; font-size: 0.88rem; color: var(--deep-slate); }
.xlink-bar a { color: var(--terracotta); font-weight: 700; text-decoration: none; }
.xlink-bar a:hover { text-decoration: underline; }
.sister-link { color: var(--terracotta); font-weight: 600; text-decoration: none; }
.sister-link:hover { text-decoration: underline; }
.site-footer .sister-link { color: var(--evergreen-light); }


/* === Dynamic layer: elevation, motion, ridgeline dividers === */

/* Elevation system */
.card, .pillar, .blog-card, .provider {
  box-shadow: 0 1px 2px rgba(46,51,56,0.05);
  transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover, .pillar:hover, .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(26,74,62,0.13);
  border-color: var(--evergreen-light);
}
.btn { transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(26,74,62,0.22); }

/* Scroll reveal (classes added by scripts.js; without JS nothing is hidden) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; transition-delay: var(--rd, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .pillar:hover, .blog-card:hover, .btn:hover { transform: none; }
}

/* Section seams: one consistent device, a gold diamond ornament echoing the logo dividers */
section.alt, .band { position: relative; }
section.alt::before, .band::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 18px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 18'%3E%3Cline x1='0' y1='9' x2='92' y2='9' stroke='%23A07820' stroke-width='1'/%3E%3Crect x='104' y='3' width='12' height='12' transform='rotate(45 110 9)' fill='%23A07820'/%3E%3Cline x1='128' y1='9' x2='220' y2='9' stroke='%23A07820' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Heroes end on a clean line with a gold rule, mid-century style; no ridge against photography */
.hero, .page-hero { border-bottom: 3px solid var(--antique-gold); }
.hero + section.alt::before, .page-hero + section.alt::before { display: none; }


/* === Hero pop: lighter overlay, mid-century stripe edge, stronger type === */
.hero, .page-hero { border-bottom: none; position: relative; }
.hero::after, .page-hero::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 12px;
  background: linear-gradient(to bottom,
    var(--antique-gold, #A07820) 0 6px,
    var(--terracotta, #7A3D28) 6px 10px,
    var(--evergreen-light, #8FADA6) 10px 12px);
}
.hero { padding-bottom: 108px; }
.hero h1 { font-size: 3.1rem; text-shadow: 0 1px 3px rgba(18,51,43,0.65), 0 3px 26px rgba(18,51,43,0.8); }
.hero h1::after { content: ""; display: block; width: 76px; height: 4px; background: var(--antique-gold); margin-top: 22px; }
.hero .subhead { color: var(--warm-cream); text-shadow: 0 1px 3px rgba(18,51,43,0.6), 0 2px 16px rgba(18,51,43,0.75); }
@media (max-width: 860px) {
  .hero h1 { font-size: 2.2rem; }
}


/* === Tier 2: shrinking header, mobile nav, photographic interior headers === */

/* Header shrinks on scroll */
.site-header { transition: box-shadow 0.3s ease; }
.site-header.scrolled { box-shadow: 0 4px 18px rgba(18,51,43,0.3); }
.site-header .nav-wrap { transition: padding 0.3s ease; }
.site-header.scrolled .nav-wrap { padding-top: 8px; padding-bottom: 8px; }
.brand-logo { transition: height 0.3s ease; }
.site-header.scrolled .brand-logo { height: 44px; }

/* Mobile hamburger (activated by scripts.js; without JS the nav renders as before) */
.nav-toggle {
  display: none; background: none; border: 1px solid var(--evergreen-light);
  border-radius: 6px; padding: 9px 11px; cursor: pointer; line-height: 0;
}
@media (max-width: 860px) {
  .js-nav .nav-wrap { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .js-nav .nav-toggle { display: inline-flex; }
  .js-nav .main-nav { display: none; flex-direction: column; width: 100%; gap: 4px; padding: 12px 0 16px; }
  .js-nav .main-nav a { padding: 12px 14px; }
  .js-nav.nav-open .main-nav { display: flex; }
}

/* Interior page headers get photography */
.page-hero {
  background: linear-gradient(160deg, rgba(26,74,62,0.92) 0%, rgba(18,51,43,0.86) 100%),
    url('images/own-stone-steps-path.jpg') center/cover;
}
.page-hero h1 { text-shadow: 0 1px 3px rgba(18,51,43,0.65), 0 3px 22px rgba(18,51,43,0.8); }
.page-hero .subhead { color: var(--warm-cream); text-shadow: 0 1px 3px rgba(18,51,43,0.6), 0 2px 14px rgba(18,51,43,0.7); }


/* === Mobile infographics: keep a readable size, scroll sideways instead of shrinking === */
@media (max-width: 640px) {
  .infographic-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
  .infographic-scroll > svg { min-width: 640px; }
  .infographic-hint { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--antique-gold); text-align: center; margin-top: 6px; }
}
.infographic-hint { display: none; }


/* === Tier 3: unified image tone, drawing gold rules, stat counters === */
.card-photo, .pillar-photo, .blog-card img, .post-hero-img { filter: saturate(0.9) sepia(0.07) contrast(1.02); }
.section-intro h2::after {
  content: ""; display: block; width: 64px; height: 3px; background: var(--antique-gold);
  margin-top: 14px; transform: scaleX(1); transform-origin: center; transition: transform 0.8s ease 0.25s;
}
.section-intro.reveal:not(.in) h2::after { transform: scaleX(0); }
.stat-num { font-family: 'EB Garamond', serif; font-size: 3rem; line-height: 1; color: var(--deep-evergreen); display: block; }


/* Typographic polish: balance heading line breaks, no single-word widows */
h1, h2, h3 { text-wrap: balance; }
.subhead { text-wrap: pretty; }


/* Mobile guard: comparison tables scroll within their card, page itself never scrolls sideways */
html, body { overflow-x: clip; }
@media (max-width: 680px) {
  .fee-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* === Style Guide v2.0 compliance: contrast, focus, touch targets (Section 17 items 2-5) === */
.brand-sub { color: #CBD9D4; }
nav.main-nav a.active { color: #CBD9D4; }
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--evergreen-light); outline-offset: 2px;
}
.site-footer a { padding: 11px 0; }


/* Evidence page components (ported per Style Guide v2.0, Section 17 item 6) */
.ev-strip { text-align: center; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--antique-gold); font-weight: 600; margin-bottom: 34px; }
.ev-card { border-left: 4px solid var(--antique-gold); }
.ev-entry { padding: 16px 0; }
.ev-entry + .ev-entry { border-top: 1px solid var(--cream-dark); }
.ev-meta { color: var(--deep-slate); opacity: 0.75; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 6px; }
.ev-title { font-weight: 600; color: var(--deep-slate); }
.ev-finding { font-size: 0.95rem; margin-top: 6px; }
.ev-badge { display: inline-block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--white); }
.ev-badge.meta { background: var(--deep-evergreen); }
.ev-badge.rct { background: var(--terracotta); }
.ev-badge.guide { background: var(--deep-slate); }
.ev-badge.found { background: #7A5C10; }
.ev-badge.hist { background: var(--evergreen-light); color: var(--deep-slate); }
.ev-entry .sister-link { display: inline-block; padding: 10px 0; }
.ev-anchors { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.ev-anchors a { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--deep-evergreen); text-decoration: none; border: 1px solid var(--evergreen-light); border-radius: 999px; padding: 9px 16px; background: var(--white); }
.ev-card { scroll-margin-top: 110px; }


/* ==========================================================================
   ACCESSIBILITY PASS, AUGUST 2026
   Batch 1 of the pre-launch punch list. Every rule below is additive and sits
   at the end of the cascade so it can be removed in one block if needed.
   ========================================================================== */

/* --- X3. Gold contrast -------------------------------------------------
   #A07820 fails WCAG AA in every text use, from 1.37:1 on the hero overlay
   to 4.04:1 on white. Two replacement tokens: a darker gold for text on
   light surfaces, a lighter one for text on the slate footer. Decorative
   gold (rules, borders, badges, dividers) is unchanged.
   ---------------------------------------------------------------------- */
:root {
  --gold-text: #7A5C10;      /* 6.24:1 on white, 5.55:1 on warm cream */
  --gold-on-dark: #C9A44C;   /* 5.49:1 on deep slate */
}

.label,
.tier .hsa-note,
.provider .credential,
.blog-meta,
.infographic-hint,
.ev-strip,
.ev-meta { color: var(--gold-text); }

/* Labels sitting on a dark hero or band read as cream, not gold. 6.32:1. */
.hero .label,
.page-hero .label,
.band .label { color: var(--warm-cream); }

.site-footer .tagline { color: var(--gold-on-dark); }

@media (max-width: 640px) {
  .infographic-hint { color: var(--gold-text); }
}

/* --- X4. Focus ring ----------------------------------------------------
   The evergreen-light outline computes 2.15:1 on warm cream, below the 3:1
   WCAG 1.4.11 threshold. Deep evergreen reaches 8.92:1 on cream and 10.03:1
   on white. The light ring is kept only where the background is dark.
   ---------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--deep-evergreen);
  outline-offset: 2px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--deep-evergreen);
  border-color: var(--deep-evergreen);
}

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.hero .btn:focus-visible,
.page-hero .btn:focus-visible,
.band .btn:focus-visible,
.footer-signup-row input:focus {
  outline: 2px solid var(--evergreen-light);
  outline-offset: 2px;
}

/* --- X5. Skip link -----------------------------------------------------
   Bypass Blocks, WCAG 2.4.1 Level A. Off-screen until focused.
   ---------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--deep-evergreen);
  color: var(--warm-cream);
  padding: 14px 22px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--antique-gold);
  outline-offset: -6px;
}

/* --- X7. Infographic scroller ------------------------------------------
   scripts.js wraps wide SVGs in a horizontal scroller. Without a tabindex a
   keyboard-only user cannot reach the off-screen half.
   ---------------------------------------------------------------------- */
.infographic-scroll:focus-visible {
  outline: 2px solid var(--deep-evergreen);
  outline-offset: 4px;
}

/* --- X9. Touch targets --------------------------------------------------
   Six element types fell below the 44x44 minimum.
   ---------------------------------------------------------------------- */
.nav-toggle {
  min-height: 44px;
  min-width: 44px;
  display: none;
  align-items: center;
  justify-content: center;
}
@media (max-width: 860px) {
  .js-nav .nav-toggle { display: inline-flex; }
}

details summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.blog-card .read-more,
.xlink-bar a,
.ev-anchors a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-footer .social-links a {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- X12. Reduced motion ------------------------------------------------
   The existing block missed the header shrink, the logo resize, and the
   section-heading underline.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .nav-wrap,
  .brand-logo,
  .section-intro h2::after { transition: none !important; }
  .section-intro.reveal:not(.in) h2::after { transform: scaleX(1); }
}

/* --- X2. Print ----------------------------------------------------------
   Without this, anything that never scrolled into view prints blank. That
   includes the consent form, both terms pages, and the privacy policies.
   ---------------------------------------------------------------------- */
@media print {
  .reveal,
  .reveal:not(.in) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .section-intro h2::after { transform: scaleX(1) !important; }

  .site-header,
  .nav-toggle,
  .skip-link,
  .hero-actions,
  .footer-signup,
  .infographic-hint { display: none !important; }

  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; word-break: break-all; }
  .card, .tier, .pillar, .blog-card, details, .notice { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}

/* --- T7 companion. Intrinsic width and height attributes were added to every
   image so the browser reserves the right space and the page stops shifting as
   photos load. This keeps an image that has no sizing class from overflowing
   its column at full intrinsic width. --------------------------------------- */
img:where(:not([class])) { max-width: 100%; height: auto; }

/* --- Aug 2026. .btn-outline is white text for dark bands. This is the same
   shape for a light section, added for the retreats and events pages. --- */
.btn-outline-dark {
  background: transparent;
  color: var(--deep-evergreen);
  border: 1px solid var(--deep-evergreen);
}
.btn-outline-dark:hover { background: rgba(26,74,62,0.07); }

/* --- Aug 2026. .read-more was only ever styled inside .blog-card. The tile
   links added across Services, Membership, the home page and the two new pages
   sit inside .card and .tier, where they were falling back to the browser's
   default blue underline. This gives the class its own styling wherever it is
   used, and keeps the blog-card rule as the more specific override. --- */
.read-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 16px;
  color: var(--terracotta);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.read-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Aug 2026. Neither site had a base link style, so every inline link in body
   copy fell back to the browser's default blue and visited purple. That is 197
   links across the two sites, including every citation on the Evidence pages.
   Scoped with :where() so it carries no specificity and every component style
   (nav, footer, buttons, .read-more, .xlink-bar) still wins. --- */
main :where(p, li, td, dd, .card, .tier, .notice, .post-body, .two-col) a:not([class]) {
  color: var(--deep-evergreen);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
main :where(p, li, td, dd, .card, .tier, .notice, .post-body, .two-col) a:not([class]):hover {
  color: var(--terracotta);
}