/* ===========================================================
   AB Wellness Solutions — Premium Prototype Stylesheet
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lato:ital,wght@0,400;0,700;0,900;1,400&family=Cormorant+Garamond:ital,wght@0,400;1,400;1,500&display=swap');

:root {
  --green: #05472A;
  --green-dark: #033820;
  --cream: #EFE0CD;
  --gray: #ABA59C;
  --charcoal: #41424C;
  --charcoal-dark: #2A2B33;
  --gold: #C49E5B;
  --gold-on-dark: #D3AC72; /* lightened gold for small text on --green/--charcoal: --gold alone is ~4.0-4.3:1, short of the 4.5:1 WCAG AA minimum */
  --offwhite: #FAFAF7;
  --white: #FFFFFF;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-quote: 'Cormorant Garamond', Georgia, serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow: 0 2px 8px rgba(0,0,0,0.06);

  --page-padding-desktop: 80px;
  --page-padding-tablet: 40px;
  --page-padding-mobile: 20px;
  --max-width: 1280px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

img { max-width: 100%; display: block; }

h1, h2 {
  font-family: var(--font-display);
  color: var(--green);
  font-weight: 400;
  margin: 0 0 0.5em;
  line-height: 1.15;
}

/* Subheading level: card / column headings use Lato, not the display serif */
h3, h4 {
  font-family: var(--font-body);
  color: var(--green);
  font-weight: 700;
  margin: 0 0 0.5em;
  line-height: 1.3;
}

h1 { font-size: 4.5rem; } /* Title — home hero only */
h2 { font-size: 3rem; }   /* Heading — page heroes, section headings */
h3 { font-size: 1.5rem; } /* Subheading */
h4 { font-size: 1.5rem; } /* Subheading */

/* page-level hero headlines use Heading scale (48px), not Title scale */
.page-hero h1 { font-size: 3rem; }

p { margin: 0 0 1em; }
a { color: var(--green); text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

.section { padding: 120px 0; position: relative; overflow: hidden; }
.section--cream { background: var(--cream); }
.section--offwhite { background: var(--offwhite); }
.section--green { background: var(--green); color: var(--cream); }
.section--green h1, .section--green h2, .section--green h3, .section--green h4 { color: var(--cream); }
.section--charcoal { background: var(--charcoal); color: var(--cream); }
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3, .section--charcoal h4 { color: var(--cream); }

.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Eyebrow / rules ---------- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.125rem;
  color: var(--charcoal);
  margin-bottom: 20px;
}

/* eyebrows on dark backgrounds need a light color for contrast, not gold */
.section--green .eyebrow, .section--charcoal .eyebrow,
.page-hero--green .eyebrow, .page-hero--charcoal .eyebrow {
  color: var(--cream);
}

.rule {
  width: 40px;
  height: 1px;
  background: var(--green);
  border: none;
  margin: 28px 0;
}

.rule.mx-auto { margin-left: auto; margin-right: auto; }

.lede {
  font-size: 1.15rem;
  color: var(--charcoal);
  max-width: 560px;
}

.section--green .lede, .section--charcoal .lede { color: rgba(239,224,205,0.85); }

/* ---------- Differentiator statements (brand-voice motif) ---------- */

/* longer statements: pull-quote / section-intro treatment */
.diff-statement {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--charcoal);
  max-width: 640px;
}
.section--green .diff-statement, .section--charcoal .diff-statement { color: rgba(239,224,205,0.85); }

.diff-statement--oneline { max-width: none; white-space: nowrap; }

/* short punchy statements: DM Serif moment with a scroll-drawn gold underline */
.diff-moment {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--green);
  font-size: 2rem;
  line-height: 1.3;
}
.diff-moment::after {
  content: '';
  position: absolute;
  left: 0; bottom: -12px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.5s var(--ease) 0.2s;
}
.diff-moment.is-visible::after { width: 60px; }
.diff-moment--center::after { left: 50%; transform: translateX(-50%); }
.diff-moment--no-underline::after { display: none; }

/* statement 8: full-width cream band, the brand's emotional anchor */
.quote-section--cream .quote-mark-ghost { color: var(--green); opacity: 0.05; }
.quote-section--cream .brand-quote { color: var(--green); }
.quote-section--cream .quote-attribution { color: rgba(5,71,42,0.55); }

/* "We are a company..." statement: charcoal band between the two
   green sections above/below it on the homepage */
.quote-section--charcoal { background: #2C2C28; }
.quote-section--charcoal .brand-quote { color: rgba(239,224,205,0.88); }
.quote-section--charcoal .quote-attribution { color: rgba(196,158,91,0.7); }
.quote-section--charcoal .quote-rule { background: rgba(196,158,91,0.4); }

/* ---------- Background geometric accents ---------- */

.bg-accent {
  position: absolute;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
}

.bg-accent--1 { width: 640px; height: 640px; top: -220px; right: -160px; }
.bg-accent--2 { width: 480px; height: 480px; bottom: -200px; left: -140px; }

.section > .container { z-index: 1; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 16px 32px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:hover { transform: scale(1.02); }

.btn--primary {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}
.btn--primary:hover { background: var(--charcoal); border-color: var(--charcoal); }

.btn--outline {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn--outline:hover { background: var(--green); color: var(--cream); }

.btn--cream {
  background: var(--cream);
  color: var(--charcoal);
  border-color: var(--cream);
}
.btn--cream:hover { background: var(--green); color: var(--cream); border-color: var(--green); }

.btn--inverse {
  background: var(--cream);
  color: var(--green);
  border-color: var(--cream);
}
.btn--inverse:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

#home-cta .btn--inverse:hover { background: var(--cream); color: var(--green); border-color: var(--cream); }

.btn--pill { border-radius: 999px; }

.btn-row { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- Nav ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: transparent;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.site-header.scrolled,
.site-header.solid {
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  max-width: 1280px;
  margin: 0 auto;
  animation: navFadeIn 0.5s var(--ease) both;
}

@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.logo-mark { height: 40px; width: auto; }
.logo-mark--light { display: none; }

.logo-text {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--green);
  line-height: 1.15;
  transition: color 0.3s var(--ease);
}

.logo-tagline {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  font-weight: 700;
  margin-top: 3px;
}
.site-header.on-dark:not(.scrolled) .logo-tagline { color: var(--cream); }

/* swap to the light (cream) mark + wordmark while nav is transparent over a dark hero */
/* the gold tagline reads fine on both cream and dark hero backgrounds, so it stays fixed */
.site-header.on-dark:not(.scrolled) .logo-mark--dark { display: none; }
.site-header.on-dark:not(.scrolled) .logo-mark--light { display: block; }
.site-header.on-dark:not(.scrolled) .logo-text {
  color: var(--cream);
}

.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; gap: 22px; }

.nav-links a {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--charcoal);
  padding-bottom: 6px;
  white-space: nowrap;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--green); }

.nav-cta {
  background: var(--green);
  color: var(--cream);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-cta:hover { background: var(--charcoal-dark); }
.site-header.on-dark:not(.scrolled) .nav-cta {
  background: var(--cream);
  color: var(--green);
}
.site-header.on-dark:not(.scrolled) .nav-cta:hover { background: var(--green); color: var(--cream); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--charcoal);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.site-header.on-dark:not(.scrolled) .nav-toggle span { background: var(--cream); }

/* nav links adapt on dark-hero pages before scroll */
.site-header.on-dark:not(.scrolled) .nav-links a {
  color: var(--cream);
}

/* ---------- Mobile nav overlay (full-screen, below 768px) ---------- */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--green);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.nav-overlay.open { display: flex; }

.nav-overlay-close {
  position: absolute;
  top: 24px; right: 24px;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  -webkit-tap-highlight-color: transparent;
}

.nav-overlay-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.nav-overlay-links a {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--cream);
  -webkit-tap-highlight-color: transparent;
}
.nav-overlay-links a.active { color: var(--gold); }
.nav-overlay-links a.nav-overlay-cta {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--green);
  padding: 14px 28px;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
}

/* ---------- Reveal-on-scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* lighter reveal for calm reading experiences (blog body copy) */
.reveal-light {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-light.is-visible { opacity: 1; transform: translateY(0); }

.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }
.stagger.is-visible > *:nth-child(7) { transition-delay: 600ms; }
.stagger.is-visible > *:nth-child(8) { transition-delay: 700ms; }

/* ---------- Hero (Home) ---------- */

.hero-home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--cream);
  padding-top: 100px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  min-height: 560px;
  width: 100%;
}

.hero-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.hero-copy h1 { margin-bottom: 0.3em; line-height: 1.05; }

.hero-line {
  display: block;
  overflow: hidden;
}

.hero-line span {
  display: inline-block;
  animation: wordUp 0.7s var(--ease) both;
  animation-delay: calc(var(--wi, 0) * 150ms);
}

@keyframes wordUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-underline {
  position: relative;
  display: inline-block;
}
.hero-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%;
  height: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  animation: underlineDraw 0.6s var(--ease) 1.15s forwards;
}
@keyframes underlineDraw { to { transform: scaleX(1); } }

.hero-copy .lede {
  margin: 60px 0 36px;
  font-size: 1.125rem;
  max-width: 420px;
  line-height: 1.7;
  opacity: 0;
  animation: fadeInBlock 0.6s var(--ease) 1.05s forwards;
}
@keyframes fadeInBlock { to { opacity: 1; } }

.hero-copy .rule { margin: 48px 0 16px; width: 80px; background: var(--gray); }

.hero-microcopy {
  font-size: 0.85rem;
  color: var(--charcoal);
  opacity: 0.75;
}

.btn--sharp { border-radius: 0; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; }

/* ---------- Hero split layout: left content / right photo ---------- */

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* ── Right side — photo area ───────────────────────────── */
.hero-right {
  position: relative;
  min-height: 320px;
}

/* The photo/grain/overlay layers are clipped to a rounded box here —
   deliberately NOT on .hero-right itself, since .hero-cred-card (a
   direct child of .hero-right, not of this inner wrapper) needs to
   bleed past the photo's left edge via its negative left offset. */
.hero-photo-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4px;
}

/* Photo layer */
.hero-photo-layer {
  position: absolute;
  inset: 0;
  background-image: url('../images/heroes/home-hero.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Left edge gradient — blends photo into left content */
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(239,224,205,0.15) 0%,
    rgba(5,71,42,0.1) 40%,
    rgba(5,71,42,0.05) 100%
  );
  z-index: 1;
}

/* Grain texture */
.hero-photo-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px;
  pointer-events: none;
}

/* MSO pill */
.hero-photo-pill {
  position: absolute;
  top: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(239,224,205,0.1);
  border: 1px solid rgba(196,158,91,0.3);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 11px;
  color: rgba(239,224,205,0.7);
  letter-spacing: 0.08em;
  font-family: var(--font-body);
  white-space: nowrap;
  z-index: 3;
}

/* Ghost monogram */
.hero-monogram {
  position: absolute;
  bottom: -1rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: 140px;
  color: rgba(239,224,205,0.05);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  z-index: 2;
  letter-spacing: -4px;
}

/* ── Credential card ───────────────────────────────────── */
.hero-cred-card {
  position: absolute;
  bottom: 2.5rem;
  left: -2rem;
  background: var(--white);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  width: 220px;
  box-shadow: 0 8px 32px rgba(5,71,42,0.2);
  z-index: 51;
  border-top: 3px solid var(--gold);
}

.hero-cred-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(5,71,42,0.07);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 10px;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  font-family: var(--font-body);
}

.hero-cred-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-cred-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--green);
  margin-bottom: 4px;
  line-height: 1.25;
}

.hero-cred-sub {
  font-size: 11px;
  color: var(--gray);
  line-height: 1.5;
}

.hero-cred-divider {
  width: 100%;
  height: 1px;
  background: rgba(5,71,42,0.08);
  margin: 10px 0;
}

.hero-cred-stats {
  display: flex;
  gap: 0;
}

.hero-cred-stat {
  flex: 1;
  text-align: center;
}

.hero-cred-stat:not(:last-child) {
  border-right: 1px solid rgba(5,71,42,0.08);
}

.hero-cred-stat-num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--green);
  line-height: 1;
  margin-bottom: 3px;
}

.hero-cred-stat-label {
  font-size: 9px;
  color: var(--gray);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Problem / Solution (horizontal rows) ---------- */

.problem-rows { margin-top: 64px; }

.problem-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  align-items: center;
  gap: 32px;
  padding: 36px 20px;
  border-top: 1px solid var(--gray);
  transition: background-color 0.25s var(--ease);
}
.problem-rows .problem-row:last-child { border-bottom: 1px solid var(--gray); }
.problem-row:hover { background: var(--cream); }

.problem-row .num {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gray);
}

.problem-row .problem-text {
  font-size: 1.5rem;
  color: var(--charcoal);
  margin: 0;
}

.problem-row .answer-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
  text-align: right;
}
.problem-row .answer-wrap .arrow {
  color: var(--green);
  transition: transform 0.25s var(--ease);
}
.problem-row:hover .answer-wrap .arrow { transform: translateX(8px); }
.problem-row .answer {
  font-family: var(--font-display);
  color: var(--green);
  font-size: 1.5rem;
  margin: 0;
}


/* ---------- Brand statement / quote ---------- */

.quote-section { text-align: center; position: relative; }
.quote-mark-ghost {
  position: absolute;
  top: -40px; left: 0;
  font-family: var(--font-display);
  font-size: 12rem;
  color: var(--cream);
  opacity: 0.06;
  line-height: 1;
  pointer-events: none;
}
.quote-rule { width: 60px; height: 1px; background: var(--gold); margin: 0 auto 40px; }
.quote-rule--bottom { margin: 48px auto 0; }

.brand-quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--cream);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.8;
}

.brand-quote .word {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s var(--ease);
}
.quote-section.is-visible .brand-quote .word {
  clip-path: inset(0 0% 0 0);
}

.quote-attribution {
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(239,224,205,0.6);
}

/* ---------- Stats row (architectural) ---------- */

.stats-arch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-left: 40px;
}
.stats-arch::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100%;
  background: var(--green);
}

.stat { position: relative; }
.stat:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0; left: -20px;
  width: 1px;
  height: 100%;
  background: var(--green);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 4.4rem;
  color: var(--green);
  line-height: 1;
}

.stat-label {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.stat-rule { width: 40px; height: 1px; background: var(--gray); margin: 18px 0 12px; }

.stat-detail {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gray);
}

/* ---------- Footer CTA (page-level, not global footer) ---------- */

.footer-cta {
  text-align: center;
}
.footer-cta h2 { max-width: 700px; margin: 0 auto 40px; }
.footer-cta.cta-charcoal h2 { color: var(--charcoal); }

/* ---------- How It Works: page hero ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 110px;
  padding-bottom: 60px;
}

.page-hero .container { text-align: center; }
.page-hero h1 { max-width: 780px; margin: 0 auto 0.4em; }
.page-hero .lede { max-width: 620px; margin: 0 auto; }
.page-hero--cream { background: var(--cream); }
.page-hero--green {
  /* background/min-height/position/overflow now come from the shared
     .page-hero image-hero system (see "HERO IMAGE BACKGROUNDS" below) */
  color: var(--cream);
}
.page-hero--green h1 { color: var(--cream); position: relative; z-index: 1; }
.page-hero--green .eyebrow, .page-hero--green .lede { position: relative; z-index: 1; }
.page-hero--green .lede { color: rgba(239,224,205,0.85); }

.hero-ghost-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 22rem;
  color: var(--cream);
  opacity: 0.04;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* character-by-character reveal */
.char-reveal .char {
  display: inline-block;
  clip-path: inset(0 0 100% 0);
  animation: charReveal 0.4s var(--ease) forwards;
  animation-delay: calc(var(--ci, 0) * 20ms);
}
@keyframes charReveal { to { clip-path: inset(0 0 0% 0); } }
.page-hero--charcoal { background: var(--charcoal); color: var(--cream); }
.page-hero--charcoal h1 { color: var(--cream); }
.page-hero--charcoal .lede { color: rgba(239,224,205,0.85); }

/* ---------- Balance visualization (practice / abws): dark full-bleed split ---------- */

.balance-section {
  position: relative;
  overflow: hidden;
  background: var(--offwhite);
}
.balance-section > .container {
  position: relative;
  z-index: 1;
  padding: 72px 32px;
}

.balance-heading {
  text-align: center;
  margin-bottom: 56px;
}

.balance-viz {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.balance-line {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: var(--gold);
  animation: balancePulse 2.4s ease-in-out infinite;
}
@keyframes balancePulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.balance-dot {
  position: absolute;
  left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
}
.balance-dot--top { top: -4px; }
.balance-dot--bottom { bottom: -4px; }

.balance-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
}
.balance-col--practice .balance-label { color: var(--charcoal); }
.balance-col--abws .balance-label { color: var(--green); }

.balance-col--practice { text-align: right; }
.balance-col ul li {
  font-size: 1.05rem;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s var(--ease);
}
.balance-col--practice ul li { justify-content: flex-end; color: var(--charcoal); transform: translateX(16px); }
.balance-col--abws ul li { justify-content: flex-start; color: var(--green); transform: translateX(-16px); }
.balance-col.is-visible ul li { opacity: 1; transform: translateX(0); }
.balance-col ul li:nth-child(1) { transition-delay: 0ms, 0ms, 0ms; }
.balance-col ul li:nth-child(2) { transition-delay: 80ms, 80ms, 0ms; }
.balance-col ul li:nth-child(3) { transition-delay: 160ms, 160ms, 0ms; }
.balance-col ul li:nth-child(4) { transition-delay: 240ms, 240ms, 0ms; }
.balance-col ul li:nth-child(5) { transition-delay: 320ms, 320ms, 0ms; }
.balance-col ul li:nth-child(6) { transition-delay: 400ms, 400ms, 0ms; }
.balance-col ul li:nth-child(7) { transition-delay: 480ms, 480ms, 0ms; }
.balance-col ul li:nth-child(8) { transition-delay: 560ms, 560ms, 0ms; }
.balance-col--practice .arrow { color: var(--charcoal); opacity: 0.6; }
.balance-col--abws .arrow { color: var(--green); opacity: 0.6; }

.balance-col ul li { position: relative; cursor: default; }
.balance-col .arrow { display: inline-block; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), color 0.3s var(--ease); }
.balance-col ul li:hover .arrow { opacity: 1; }
.balance-col ul li:hover { color: var(--green); }
.balance-col ul li:hover .arrow { color: var(--green); }
.balance-col--practice ul li:hover .arrow { transform: translateX(8px); }
.balance-col--abws ul li:hover .arrow { transform: translateX(-8px); }

/* ---------- MSO callout ---------- */

.mso-section .lede.center { max-width: 700px; margin: 0 auto; }

.callout {
  background: var(--green);
  color: var(--cream);
  padding: 44px 48px;
  border-left: 4px solid var(--cream);
  border-radius: 4px;
  max-width: 800px;
  margin: 48px auto 0;
}
.callout p {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.5rem;
  margin: 0;
  line-height: 1.5;
}

/* ---------- 3-step diagonal staircase ---------- */

.staircase {
  margin-top: 80px;
  padding: 20px 0 40px;
}

.step {
  position: relative;
  max-width: 340px;
}
.step + .step { margin-top: -20px; }
.step:nth-child(1) { margin-left: 0; }
.step:nth-child(2) { margin-left: 30%; }
.step:nth-child(3) { margin-left: 58%; }



.step .step-ghost {
  font-family: var(--font-display);
  font-size: 6rem;
  color: var(--cream);
  opacity: 0.06;
  line-height: 1;
  position: absolute;
  top: -30px; left: -8px;
  z-index: 0;
  pointer-events: none;
}
.step .step-num {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
}
.step h3 { position: relative; z-index: 1; font-size: 2rem; font-family: var(--font-display); font-weight: 400; margin-bottom: 10px; color: var(--cream); }
.step p { position: relative; z-index: 1; max-width: 280px; color: rgba(239,224,205,0.75); }

/* ---------- Services page lifecycle columns ---------- */

.accordion {
  margin-top: 24px;
  border-top: 1px solid var(--gray);
}

.accordion-panel {
  border-bottom: 1px solid var(--gray);
  background: var(--offwhite);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--green);
}
.accordion-panel.is-open .accordion-header,
.accordion-panel[data-panel="operate"].is-open .accordion-header,
.accordion-panel[data-panel="grow"].is-open .accordion-header { color: inherit; }

.ah-arrow {
  font-family: var(--font-body);
  transition: transform 0.3s var(--ease);
}
.accordion-panel.is-open .ah-arrow { transform: rotate(90deg); }

.ah-sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-left: auto;
}
.accordion-panel.is-open .ah-sub { color: inherit; opacity: 0.75; }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}
.accordion-panel.is-open .accordion-body { max-height: 640px; }

.accordion-content {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 40px;
  padding: 0 32px 40px;
  position: relative;
  align-items: center;
}

.accordion-ghost {
  font-family: var(--font-display);
  font-size: 11rem;
  opacity: 0.06;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.accordion-content ul li {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.accordion-panel.is-open .accordion-content ul li { opacity: 1; transform: translateX(0); }
.accordion-panel.is-open .accordion-content ul li:nth-child(1) { transition-delay: 0ms; }
.accordion-panel.is-open .accordion-content ul li:nth-child(2) { transition-delay: 60ms; }
.accordion-panel.is-open .accordion-content ul li:nth-child(3) { transition-delay: 120ms; }
.accordion-panel.is-open .accordion-content ul li:nth-child(4) { transition-delay: 180ms; }
.accordion-panel.is-open .accordion-content ul li:nth-child(5) { transition-delay: 240ms; }
.accordion-panel.is-open .accordion-content ul li:nth-child(6) { transition-delay: 300ms; }

.accordion-panel[data-panel="operate"].is-open { background: var(--green); color: var(--cream); }
.accordion-panel[data-panel="grow"].is-open { background: var(--charcoal); color: var(--cream); }

.lifecycle-desc {
  font-size: 0.92rem;
  color: var(--charcoal);
  margin-bottom: 20px;
}
.accordion-panel.is-open .lifecycle-desc { color: inherit; opacity: 0.85; }

.accordion-content ul li {
  padding: 9px 0;
  font-size: 0.98rem;
  display: flex;
  gap: 10px;
}
.accordion-content ul li .arrow { color: var(--green); flex-shrink: 0; }
.accordion-panel[data-panel="operate"].is-open .arrow,
.accordion-panel[data-panel="grow"].is-open .arrow { color: var(--cream); }

.coo-band { text-align: center; }
.coo-band .lede.center { max-width: 680px; margin: 0 auto; }

.tech-badges {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.tech-badge {
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 10px 26px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--green);
}

/* ---------- Who We Serve: provider cards ---------- */

.provider-strip {
  display: flex;
  gap: 20px;
  margin-top: 56px;
}

.provider-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--offwhite);
  border-bottom: 3px solid var(--green);
  border-radius: 4px;
  padding: 32px 16px;
  text-align: center;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease);
}
.provider-card:hover,
.provider-card.tapped {
  background: var(--green);
  color: var(--cream);
  transform: translateY(-4px);
}
.provider-card .provider-abbr {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--green);
  margin-bottom: 10px;
  transition: color 0.25s var(--ease);
}
.provider-card:hover .provider-abbr,
.provider-card.tapped .provider-abbr { color: var(--cream); }
.provider-card p { font-size: 0.85rem; margin: 0; }

.ph-rule {
  width: 0;
  height: 1px;
  background: var(--gold);
  margin: 14px auto 0;
  transition: width 0.3s var(--ease);
}
.provider-card:hover .ph-rule,
.provider-card.tapped .ph-rule { width: 40px; }

.ph-detail {
  opacity: 0;
  margin-top: 12px;
  font-size: 0.75rem;
  color: rgba(239,224,205,0.75);
  transition: opacity 0.3s var(--ease);
}
.provider-card:hover .ph-detail,
.provider-card.tapped .ph-detail { opacity: 1; }

/* ---------- Lifecycle cards (numbered) ---------- */

/* ---------- Practice lifecycle timeline ---------- */

.timeline { max-width: 760px; margin: 0 auto 64px; }
.timeline-bar { position: relative; height: 1px; background: var(--gray); }
.timeline-node {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green);
  transition: transform 0.3s var(--ease);
}
.timeline-node[data-node="1"] { left: 0%; }
.timeline-node[data-node="2"] { left: 50%; }
.timeline-node[data-node="3"] { left: 100%; }

.timeline-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
}

.lifecycle-journey:has(.lc-card[data-node="1"]:hover) .timeline-node[data-node="1"],
.lifecycle-journey:has(.lc-card[data-node="2"]:hover) .timeline-node[data-node="2"],
.lifecycle-journey:has(.lc-card[data-node="3"]:hover) .timeline-node[data-node="3"] {
  transform: translate(-50%, -50%) scale(1.7);
}

.lc-cards { display: flex; flex-direction: column; gap: 24px; margin-top: 56px; }

.lc-card {
  position: relative;
  background: transparent;
  border: none;
  padding: 44px 48px;
  overflow: hidden;
  transition: transform 0.2s var(--ease);
}
.lc-card:hover {
  transform: translateY(-2px);
}
.lc-card .lc-num {
  position: absolute;
  top: -10px; right: 24px;
  font-family: var(--font-display);
  font-size: 7rem;
  color: var(--green);
  opacity: 0.16;
  line-height: 1;
  pointer-events: none;
}
.lc-card h3 { margin-bottom: 14px; position: relative; }
.lc-card p { position: relative; max-width: 640px; margin: 0; }

.disclaimer-box {
  background: transparent;
  border: 1px solid var(--gray);
  border-radius: 4px;
  padding: 24px 32px;
  font-family: var(--font-quote);
  font-size: 0.875rem;
  color: var(--charcoal);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.6;
}
.disclaimer-box.disclaimer-box--plain { border: none; }

/* ---------- Shared Footer ---------- */

.site-footer {
  background: var(--charcoal);
  color: var(--cream);
  padding-top: 80px;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #C49E5B, transparent);
  pointer-events: none;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(239,224,205,0.15);
}

.footer-logo { display: inline-block; }
.footer-logo img { height: 96px; width: auto; }
.footer-brand p.desc {
  margin-top: 24px;
  font-size: 0.9rem;
  color: rgba(239,224,205,0.75);
  max-width: 320px;
}

.footer-col h3 {
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul li { margin-bottom: 12px; }
.footer-col a {
  color: var(--cream);
  opacity: 0.85;
  font-size: 0.95rem;
  transition: opacity 0.2s var(--ease);
}
.footer-col a:hover { opacity: 1; }
.footer-col p {
  font-family: var(--font-quote);
  font-size: 0.875rem;
  color: rgba(239,224,205,0.75);
  line-height: 1.6;
}

/* footer left column: contact details, styled like the muted description text */
.footer-brand-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(239,224,205,0.15);
}
.footer-brand-contact a,
.footer-brand-contact p {
  font-size: 0.9rem;
  color: rgba(239,224,205,0.75);
  margin: 0;
  transition: opacity 0.2s var(--ease);
}
.footer-brand-contact a { opacity: 0.85; }
.footer-brand-contact a:hover { opacity: 1; }

/* footer right column: looking-for-care sub-section */
.footer-col h3.footer-subheading {
  color: var(--gold-on-dark);
  font-size: 11px;
  letter-spacing: 0.15em;
}
.footer-col p.footer-disclaimer {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(239,224,205,0.4);
  line-height: 1.6;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: 0.8rem;
  color: rgba(239,224,205,0.65);
  background: var(--charcoal-dark);
  margin-top: 48px;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Resources / Blog page ---------- */

.category-pill {
  display: inline-block;
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}


/* filter tabs */

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0 56px;
}

.filter-tab {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: transparent;
  border: 1px solid rgba(171,165,156,0.5);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.filter-tab:hover { background: var(--cream); }
.filter-tab.active {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}

/* article grid */

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.article-card {
  display: block;
  background: var(--offwhite);
  border-left: 3px solid transparent;
  border-radius: 4px;
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.article-card:hover,
.article-card.tapped {
  transform: translateY(-4px);
  border-left-color: var(--green);
  background: var(--white);
}
.article-card.is-hidden { display: none; }

.article-card--featured {
  grid-column: span 2;
  min-height: 380px;
  background: var(--green);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 48px;
  transition: background-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.article-card--featured:hover {
  background: #032d1a;
  transform: translateY(-4px);
  border-left-color: transparent;
}
.article-card.article-card--featured .category-pill {
  display: inline-block;
  border: none;
  padding: 0;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 20px;
}
.article-card--featured h3 {
  font-size: 2rem;
  color: var(--cream);
  max-width: 640px;
}
.article-card.article-card--featured .preview {
  color: rgba(239,224,205,0.75);
  max-width: 560px;
}
.article-card.article-card--featured .article-meta {
  border-top-color: rgba(239,224,205,0.2);
  color: rgba(239,224,205,0.8);
}
.article-card.article-card--featured .read-link { color: var(--cream); }

.article-card .category-pill {
  color: var(--green);
  border-color: var(--green);
  margin-bottom: 18px;
}

.article-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 14px;
  line-height: 1.3;
}

.article-card .preview {
  font-size: 0.92rem;
  color: var(--charcoal);
  margin-bottom: 24px;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--charcoal);
  opacity: 0.75;
  border-top: 1px solid rgba(171,165,156,0.3);
  padding-top: 18px;
}
.article-meta > span { font-family: var(--font-quote); font-size: 0.875rem; }

.read-link {
  color: var(--green);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 1;
}
.read-link .arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.article-card:hover .read-link .arrow { transform: translateX(4px); }

/* email capture */

.email-capture { text-align: center; max-width: 600px; margin: 0 auto; }
.email-form {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.email-form input[type="email"] {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid var(--gray);
  border-radius: 4px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--charcoal);
  transition: border-color 0.2s var(--ease);
}
.email-form input[type="email"]:focus {
  border-color: var(--green);
}
.email-form input[type="email"]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.email-form .btn { white-space: nowrap; }
.email-note {
  margin-top: 16px;
  font-family: var(--font-quote);
  font-size: 0.875rem;
  color: var(--charcoal);
  opacity: 0.7;
}

/* ===========================================================
   Global premium systems: cursor, transitions, progress,
   texture, magnetism, dividers, micro-animations
   =========================================================== */

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---------- Page transition wipe ---------- */

.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--green);
  z-index: 100000;
  pointer-events: none;
  transform: scaleX(1);
  transform-origin: left;
}
.page-transition-overlay.is-covering {
  transform-origin: left;
  animation: pt-wipe-in 0.4s ease-in forwards;
}
.page-transition-overlay.is-revealing {
  transform-origin: right;
  animation: pt-wipe-out 0.4s ease-out forwards;
}
@keyframes pt-wipe-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pt-wipe-out { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Scroll progress indicator ---------- */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--gold);
  z-index: 100001;
  pointer-events: none;
}

/* ---------- Noise texture overlay (cream sections) ---------- */

.section--cream, .hero-home {
  position: relative;
}
.section--cream::before,
.hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}
/* .page-hero--cream no longer carries the noise texture — its own
   ::before is now the photo-hero image layer (see "HERO IMAGE
   BACKGROUNDS" below), which would otherwise conflict with it. */
/* .container establishes its own stacking context here, so anything
   nested inside it (like .hero-cred-card) can only rank against
   page-level fixed/overlay elements by raising this ancestor's z-index,
   not by raising the card's own z-index in isolation. */
.hero-home > .container { position: relative; z-index: 51; }
.page-hero > .container { position: relative; z-index: 2; }

/* ---------- Magnetic buttons ---------- */

.btn {
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease),
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Section divider utilities ---------- */

.divider-rule {
  position: relative;
  height: 1px;
  background: var(--gray);
  width: 100%;
}
.divider-rule .diamond {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- Eyebrow letter-spacing reveal ---------- */

.eyebrow { letter-spacing: 0.05em; transition: letter-spacing 0.6s var(--ease); }
.reveal.is-visible .eyebrow,
.stagger.is-visible .eyebrow { letter-spacing: 0.12em; }

/* ---------- Footer link arrow on hover ---------- */

.footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s var(--ease);
}
.footer-col a::after {
  content: '\2192';
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.footer-col a:hover::after { opacity: 1; transform: translateX(0); }

/* ---------- Geometric shape entrance (fade + scale) ---------- */

.shape-in {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible .shape-in,
.is-visible.shape-in { opacity: 1; transform: scale(1); }

/* ===========================================================
   Blog detail page
   =========================================================== */

.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--green);
  z-index: 100001;
  pointer-events: none;
  transition: width 0.1s linear;
}

.article-hero {
  background: var(--green);
  padding: 140px 0 80px;
}
.article-hero .container { max-width: 800px; }

.breadcrumb {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(239,224,205,0.75);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb a {
  color: rgba(239,224,205,0.75);
  transition: color 0.2s var(--ease);
}
.breadcrumb a:hover { color: var(--cream); }

.article-hero .category-pill {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-on-dark);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.article-hero h1 {
  font-size: 3rem;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 24px;
}

.article-subtitle {
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: rgba(239,224,205,0.75);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 32px;
}

.article-meta-row {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: rgba(239,224,205,0.75);
}
.article-meta-row .dot { margin: 0 8px; }

.article-body {
  background: var(--offwhite);
  padding: 80px 0 120px;
}
.article-body .container { max-width: 800px; }

.article-body p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  line-height: 1.85;
  margin-bottom: 28px;
}
.article-body p.article-lede,
.article-body p.article-closing {
  font-size: 1.125rem;
}

.article-body h2 {
  font-size: 2rem;
  color: var(--green);
  margin-top: 56px;
  margin-bottom: 20px;
  display: inline-block;
}

.heading-underline { position: relative; }
.heading-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -10px;
  width: 0;
  height: 1px;
  background: var(--green);
  transition: width 0.4s var(--ease) 0.2s;
}
.heading-underline.is-visible::after { width: 40px; }

.pull-quote {
  position: relative;
  background: var(--cream);
  padding: 48px;
  margin: 40px 0;
}
.pull-quote::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 0;
  background: var(--green);
  transition: height 0.6s ease-out;
}
.pull-quote.is-visible::before { height: 100%; }
.pull-quote p {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--green);
  line-height: 1.5;
  margin: 0;
  opacity: 0;
  transition: opacity 0.4s var(--ease) 0.5s;
}
.pull-quote.is-visible p { opacity: 1; }

.article-callout {
  background: var(--cream);
  border-left: 4px solid var(--green);
  padding: 24px 32px;
  margin: 40px 0;
}
.article-callout .ac-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--charcoal);
  margin-bottom: 16px;
}
.article-callout ul li {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--font-body);
  color: var(--charcoal);
}
.article-callout ul li .arrow { color: var(--green); flex-shrink: 0; }

.article-caption {
  font-family: var(--font-quote);
  font-size: 0.875rem;
  color: var(--gray);
}

.article-footer-cta {
  background: var(--green);
  padding: 80px 0;
  text-align: center;
}
.article-footer-cta .container { max-width: 640px; }
.article-footer-cta .eyebrow { color: var(--gold-on-dark); font-size: 11px; letter-spacing: 0.2em; }
.article-footer-cta h2 { color: var(--cream); font-size: 2.25rem; }
.article-footer-cta p { color: rgba(239,224,205,0.75); }
.article-footer-cta .btn--inverse:hover { background: var(--gold); }

.related-articles { background: var(--offwhite); padding: 80px 0; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 40px;
}

/* ===========================================================
   Work With ABWS — cream-dominant document layout
   =========================================================== */

.wwa-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  position: relative;
  z-index: 1;
}

/* ---- section 1: hero statement (cream) ---- */

.wwa-hero {
  background: var(--cream);
  padding: 160px 0 100px;
  position: relative;
  overflow: hidden;
}

.wwa-hero-circle {
  position: absolute;
  top: -300px; right: -240px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.04;
  pointer-events: none;
}
.wwa-hero-diagonal {
  position: absolute;
  top: 0; right: 0;
  width: 141vmax; height: 1px;
  background: var(--gray);
  opacity: 0.2;
  transform-origin: top right;
  transform: rotate(135deg);
  pointer-events: none;
}

.wwa-hero-grid {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 40px;
  position: relative;
  z-index: 1;
}

.wwa-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 24px;
  opacity: 0;
  animation: wwaFadeUp 0.3s var(--ease) 0.4s forwards;
}

.wwa-headline {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4.5rem;
  line-height: 1.0;
  margin: 0;
  position: relative;
}
.wwa-headline--charcoal { margin-top: 32px; display: inline-block; }
.wwa-headline .wwa-line { display: block; overflow: hidden; }
.wwa-headline .wwa-line span {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: wwaWordUp 0.6s var(--ease) forwards;
}
.wwa-headline--green span { color: var(--green); animation-delay: calc(0.6s + var(--wi, 0) * 80ms); }
.wwa-headline--charcoal span { color: var(--charcoal); animation-delay: calc(1.5s + var(--wi, 0) * 80ms); }
@keyframes wwaWordUp { to { opacity: 1; transform: translateY(0); } }
@keyframes wwaFadeUp { to { opacity: 1; } }

.wwa-headline--charcoal::after {
  content: '';
  position: absolute;
  left: 0; bottom: -10px;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  animation: wwaUnderlineDraw 0.8s var(--ease) 2.1s forwards;
}

.wwa-hero-rule {
  height: 1px;
  width: 80px;
  background: var(--gray);
  border: none;
  margin: 32px 0 20px;
}

.wwa-body-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(65,66,76,0.7);
  line-height: 1.7;
  max-width: 420px;
  opacity: 0;
  animation: wwaFadeUp 0.6s var(--ease) 1.9s forwards;
}

.wwa-inline-trust {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gray);
  margin-top: 40px;
  opacity: 0;
  animation: wwaFadeUp 0.6s var(--ease) 2.1s forwards;
}
.wwa-inline-trust .dot { margin: 0 8px; }

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════ */

.contact-body {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
}

/* ── Left panel ────────────────────────────────────────── */
.contact-left {
  background: #2C2C28;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-left-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196,158,91,0.65);
  margin-bottom: 1.75rem;
}

.contact-detail {
  margin-bottom: 1.5rem;
}

.contact-detail-key {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(239,224,205,0.3);
  margin-bottom: 5px;
}

.contact-detail-val {
  font-size: 14px;
  color: rgba(239,224,205,0.85);
  line-height: 1.6;
}

.contact-detail-val a {
  color: #C49E5B;
  text-decoration: none;
  transition: color 0.2s;
}

.contact-detail-val a:hover { color: #EFE0CD; }

.contact-left-divider {
  width: 32px;
  height: 1px;
  background: rgba(196,158,91,0.2);
  margin: 0.25rem 0 1.5rem;
}

.contact-respond {
  font-size: 12px;
  color: rgba(239,224,205,0.35);
  font-style: italic;
  line-height: 1.7;
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(239,224,205,0.07);
}

/* ── Right panel — form ─────────────────────────────────── */
.contact-right {
  background: #FFFFFF;
  padding: 3rem 2.5rem;
}

.contact-form-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C49E5B;
  margin-bottom: 1.75rem;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.5rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-field-full {
  grid-column: 1 / -1;
}

.contact-field-label {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ABA59C;
  font-weight: 700;
}

.contact-required { color: #c0392b; }

/* ── Form inputs — white, green border ───────────────────── */
.contact-input,
.contact-select,
.contact-textarea {
  background: #FFFFFF;
  border: 1.5px solid rgba(5,71,42,0.2);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px;
  color: #2C2C28;
  font-family: 'Lato', sans-serif;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
  border-color: #C49E5B;
  box-shadow: 0 0 0 3px rgba(196,158,91,0.12);
}

.contact-input::placeholder,
.contact-textarea::placeholder {
  color: #ABA59C;
  font-style: italic;
}

.contact-select { cursor: pointer; }
.contact-select option { color: #2C2C28; }

.contact-textarea {
  resize: none;
  height: 100px;
  line-height: 1.6;
}

.contact-char-count {
  font-size: 11px;
  color: #ABA59C;
  text-align: right;
  margin-top: 3px;
}

/* ── Privacy checkbox ────────────────────────────────────── */
.contact-privacy-row { margin-top: 0.25rem; }

.contact-privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.contact-checkbox {
  width: 17px;
  height: 17px;
  border: 1.5px solid rgba(5,71,42,0.2);
  border-radius: 4px;
  background: #FFFFFF;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  transition: all 0.2s;
}

.contact-checkbox:checked {
  background: #05472A;
  border-color: #05472A;
}

.contact-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: 2px solid #EFE0CD;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.contact-privacy-text {
  font-size: 11px;
  color: #ABA59C;
  line-height: 1.65;
}

.contact-privacy-text strong { color: #41424C; }

.contact-privacy-text a {
  color: #05472A;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Error message ───────────────────────────────────────── */
.contact-error {
  display: none;
  font-size: 12px;
  color: #c0392b;
  background: rgba(192,57,43,0.06);
  border: 1px solid rgba(192,57,43,0.15);
  border-radius: 6px;
  padding: 10px 14px;
  line-height: 1.5;
}

.contact-error.visible { display: block; }

/* ── Submit button ───────────────────────────────────────── */
.contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.contact-submit {
  background: #05472A;
  color: #EFE0CD;
  border: none;
  padding: 13px 30px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  transition: background 0.2s, transform 0.15s;
}

.contact-submit:hover {
  background: #063d24;
  transform: translateY(-1px);
}

.contact-submit:active { transform: translateY(0); }

.contact-submit:disabled {
  background: #ABA59C;
  cursor: not-allowed;
  transform: none;
}

.contact-form-note {
  font-size: 11px;
  color: #ABA59C;
  font-style: italic;
  line-height: 1.5;
  max-width: 220px;
}

/* ── Success state ───────────────────────────────────────── */
.contact-success {
  display: none;
  text-align: center;
  padding: 3rem 2rem;
}

.contact-success.visible { display: block; }

.contact-success-icon {
  width: 48px;
  height: 48px;
  background: rgba(5,71,42,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 20px;
  color: #05472A;
}

.contact-success-title {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  color: #05472A;
  margin-bottom: 8px;
}

.contact-success-sub {
  font-size: 13px;
  color: #ABA59C;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE — mobile / tablet
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Stack vertically — form first, contact details second */
  .contact-body {
    grid-template-columns: 1fr;
  }

  /* Form comes first on mobile */
  .contact-right { order: 1; padding: 2rem 1.25rem; }

  /* Contact details come second on mobile */
  .contact-left { order: 2; padding: 2rem 1.25rem; }

  /* Form grid single column on mobile */
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  /* All fields full width on mobile */
  .contact-field-full { grid-column: 1; }

  .contact-respond { margin-top: 1.5rem; }

  .contact-form-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-form-note { max-width: 100%; }

}

@media (min-width: 768px) and (max-width: 1023px) {
  .contact-body { grid-template-columns: 1fr 1fr; }
}

/* ---- section 3: bottom anchor (the one green section) ---- */

.wwa-anchor {
  background: var(--green);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.wwa-anchor-ghost {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 12.5rem;
  color: var(--cream);
  opacity: 0.04;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.wwa-anchor-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  position: relative;
  z-index: 1;
}
.wwa-anchor-item { position: relative; padding: 0 24px; }
.wwa-anchor-item + .wwa-anchor-item::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: rgba(239,224,205,0.15);
}
.wwa-anchor-label {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.wwa-anchor-text { font-family: var(--font-body); font-size: 0.9375rem; color: rgba(239,224,205,0.8); }

/* ---- footer override for this page: gold border bookends the page ---- */

body.wwa-page .footer-col h3 { color: var(--gold-on-dark); }

/* ===========================================================
   Practices We Support (placeholder page)
   =========================================================== */

.practices-hero { padding: 160px 0 80px; }
.practices-coming-soon { background: var(--cream); }
.practices-coming-soon .disclaimer-box {
  margin-top: 48px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: none;
  padding: 0 24px;
  white-space: nowrap;
  font-size: clamp(0.72rem, 0.85vw, 0.9rem);
}
@media (max-width: 1199px) {
  .practices-coming-soon .disclaimer-box { left: 0; transform: none; width: auto; white-space: normal; padding: 0; font-size: 0.9rem; }
}
.practices-hero .eyebrow {
  letter-spacing: 0.22em;
  opacity: 0;
  animation: practicesFadeUp 0.6s var(--ease) 0.2s forwards;
}
.practices-hero h1 { opacity: 0; animation: practicesFadeUp 0.6s var(--ease) 0.4s forwards; }
.practices-hero .lede {
  font-size: 0.95rem;
  max-width: 600px;
  opacity: 0;
  animation: practicesFadeUp 0.6s var(--ease) 0.6s forwards;
}
@keyframes practicesFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.practices-coming-soon {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.practices-coming-soon .container { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }

.practices-ghost {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 6.5rem;
  color: var(--green);
  opacity: 0;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  animation: practicesGhostFade 0.8s var(--ease) forwards;
}
@keyframes practicesGhostFade { to { opacity: 0.04; } }

.practices-rule-gold {
  width: 40px; height: 1px;
  background: var(--gold);
  border: none;
  margin: 0 auto 40px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.practices-rule-gold.is-visible { transform: scaleX(1); }

.practices-coming-soon h2 { font-size: 2.25rem; }


.practices-rule-gray {
  width: 80px; height: 1px;
  background: var(--gray);
  border: none;
  margin: 48px auto 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.practices-rule-gray.is-visible { transform: scaleX(1); }

.practices-question {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gray);
  letter-spacing: 0.08em;
  margin-top: 32px;
}

.practices-cta {
  display: inline-block;
  margin-top: 24px;
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 28px;
  border-radius: 0;
  transition: background-color 0.2s var(--ease);
}
.practices-cta:hover { background: var(--charcoal); }
.practices-cta.reveal { transition-delay: 0.2s; }

.practices-disclaimer-section { background: var(--cream); padding: 60px 0; }
.practices-disclaimer-section .disclaimer-box {
  font-size: 1.125rem;
  padding: 32px 40px;
  border-color: rgba(171,165,156,0.3);
}

body.practices-page .footer-cta .eyebrow { color: var(--gold); }
body.practices-page .footer-cta .btn--inverse:hover { background: var(--gold); color: var(--green); }

/* ===========================================================
   ABWS Chatbot Widget
   =========================================================== */

.abws-chat-trigger {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--gold);
  box-shadow: 0 8px 32px rgba(5,71,42,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.abws-chat-trigger:hover { background: var(--charcoal); transform: scale(1.08); }
.abws-chat-trigger svg { width: 24px; height: 24px; }
.abws-chat-trigger .abws-chat-icon-close { width: 20px; height: 20px; display: none; }
.abws-chat-trigger.is-open .abws-chat-icon-open { display: none; }
.abws-chat-trigger.is-open .abws-chat-icon-close { display: block; }

.abws-chat-trigger.is-pulsing { animation: abwsPulse 1s ease-out; }
@keyframes abwsPulse {
  0% { box-shadow: 0 8px 32px rgba(5,71,42,0.25), 0 0 0 0 rgba(5,71,42,0.4); }
  100% { box-shadow: 0 8px 32px rgba(5,71,42,0.25), 0 0 0 16px rgba(5,71,42,0); }
}

.abws-chat-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: abwsDotBounce 1s infinite;
}
@keyframes abwsDotBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.abws-chat-window {
  position: fixed;
  bottom: 104px;
  right: 32px;
  z-index: 9998;
  width: 380px;
  height: 520px;
  background: var(--offwhite);
  border: 1px solid rgba(171,165,156,0.3);
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.92) translateY(16px);
  opacity: 0;
  transform-origin: bottom right;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
  pointer-events: none;
}
.abws-chat-window.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.abws-chat-header {
  background: var(--green);
  padding: 16px 20px;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}
.abws-chat-header-left { display: flex; align-items: center; gap: 10px; }
.abws-chat-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--green);
  font-family: var(--font-display);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.abws-chat-header-text { display: flex; flex-direction: column; gap: 2px; }
.abws-chat-name { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--cream); }
.abws-chat-status { font-family: var(--font-body); font-size: 11px; color: rgba(239,224,205,0.5); }
.abws-chat-status .dot { color: var(--gold); }
.abws-chat-header-right { display: flex; align-items: center; gap: 12px; }
.abws-chat-header-right button {
  background: none;
  border: none;
  color: rgba(239,224,205,0.6);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}
.abws-chat-header-right button:hover { color: var(--cream); }

.abws-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 16px;
  background: var(--offwhite);
}
.abws-chat-messages::-webkit-scrollbar { width: 4px; }
.abws-chat-messages::-webkit-scrollbar-track { background: transparent; }
.abws-chat-messages::-webkit-scrollbar-thumb { background: rgba(171,165,156,0.4); border-radius: 2px; }

.abws-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 12px;
  animation: abwsMsgIn 0.25s ease-out;
}
@keyframes abwsMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.abws-chat-row--user { justify-content: flex-end; }

.abws-chat-avatar-sm {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--green);
  font-family: var(--font-display);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.abws-chat-avatar-sm--spacer { visibility: hidden; }

.abws-chat-bubble-wrap { display: flex; flex-direction: column; max-width: 80%; }
.abws-chat-row--user .abws-chat-bubble-wrap { align-items: flex-end; }

.abws-chat-bubble {
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
}
.abws-chat-bubble--bot {
  background: var(--white);
  border: 1px solid rgba(171,165,156,0.25);
  border-radius: 2px 12px 12px 2px;
  color: var(--charcoal);
}
.abws-chat-bubble--user {
  background: var(--green);
  border-radius: 12px 2px 2px 12px;
  color: var(--cream);
}
.abws-chat-time {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--gray);
  margin-top: 4px;
}

.abws-chat-typing { display: flex; align-items: center; gap: 4px; padding: 10px 14px; }
.abws-chat-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gray);
  animation: abwsTypingBounce 1s infinite ease-in-out;
}
.abws-chat-typing span:nth-child(2) { animation-delay: 150ms; }
.abws-chat-typing span:nth-child(3) { animation-delay: 300ms; }
@keyframes abwsTypingBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.abws-chat-quick-replies {
  flex: none;
  min-height: 60px;
  max-height: 60px;
  background: var(--offwhite);
  border-top: 1px solid rgba(171,165,156,0.3);
  overflow-x: auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.abws-chat-quick-replies:empty { display: none; }

.abws-chat-chip {
  flex: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 20px;
  padding: 6px 14px;
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.abws-chat-chip:hover { background: var(--green); color: var(--cream); }

.abws-chat-input-row {
  flex: none;
  height: 56px;
  background: var(--white);
  border-top: 1px solid rgba(171,165,156,0.2);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
}
.abws-chat-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
}
.abws-chat-input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.abws-chat-input::placeholder { color: var(--gray); }
.abws-chat-send {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--green);
  border: none;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.abws-chat-send:hover { background: var(--charcoal); }
.abws-chat-send svg { width: 14px; height: 14px; }

/* ===========================================================
   Responsive — tablet (max-width: 1023px)
   =========================================================== */

@media (max-width: 1023px) {

  /* ---- typography scale ---- */
  h1 { font-size: 3.25rem; }         /* Title 72 -> 52 */
  h2 { font-size: 2.25rem; }         /* Heading 48 -> 36 */
  h3, h4 { font-size: 1.25rem; }     /* Subheading 24 -> 20 */
  .eyebrow { font-size: 11px; }
  .brand-quote, .pull-quote p, .callout p, .diff-statement { font-size: 1.25rem; }
  .diff-moment { font-size: 1.625rem; }
  .diff-statement--oneline { white-space: normal; max-width: 640px; }

  /* ---- section rhythm ---- */
  .section { padding: 80px 0; }
  .container { padding: 0 var(--page-padding-tablet); }
  .wwa-container, .wwa-form-inner { padding: 0 var(--page-padding-tablet); }

  /* ---- nav: links stay horizontal, everything shrinks ---- */
  .logo-mark { height: 34px; }
  .logo-text { font-size: 1.1rem; }
  .nav-right { gap: 24px; }
  .nav-links { gap: 24px; }
  .nav-links a { font-size: 12px; letter-spacing: 0.06em; }
  .nav-cta { padding: 10px 16px; font-size: 11px; }

  /* ---- Home ---- */
  .hero-copy .lede { max-width: 100%; }
  .stat-number { font-size: 3.25rem; }

  /* ---- How It Works ---- */
  .page-hero--green { padding: 100px 0 80px; }
  .hero-ghost-text { font-size: 200px; }
  .page-hero--green h1 { font-size: 2.25rem; }

  /* staircase simplifies to a vertical stack starting at tablet */
  .staircase { margin-top: 48px; }
  .step { max-width: 100%; padding-left: 60px; }
  .step:nth-child(2), .step:nth-child(3) { margin-left: 0; }
  .step + .step { margin-top: 40px; }
  .step .step-ghost { font-size: 4rem; top: -14px; left: 20px; }
  .step .step-num { position: absolute; left: 0; top: 2px; }

  /* ---- Services ---- */
  .page-hero h1 { font-size: 2.25rem; }
  .accordion-content { grid-template-columns: 1fr 140px; }
  .accordion-ghost { font-size: 8.75rem; }

  /* ---- Who We Serve ---- */
  .provider-strip { flex-wrap: wrap; justify-content: center; }
  .provider-card { flex: 0 1 30%; min-width: 200px; }
  .provider-strip:has(.provider-card:hover) .provider-card,
  .provider-strip:has(.provider-card:hover) .provider-card:hover { flex: 0 1 30%; }
  .disclaimer-box { padding: 20px; font-size: 0.8125rem; }

  /* ---- Resources ---- */
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .article-card--featured { grid-column: span 2; }

  /* ---- Work With ABWS ---- */
  .wwa-hero-grid { grid-template-columns: 55fr 45fr; }
  .wwa-headline { font-size: 3.25rem; }
  .wwa-anchor { padding: 48px 0; }

  /* ---- Practices We Support ---- */
  .practices-hero { padding: 120px 0 60px; }

  /* ---- Blog detail ---- */
  .article-hero { padding: 120px 0 60px; }
  .article-hero h1 { font-size: 2.25rem; }
  .article-subtitle { font-size: 1rem; }
  .article-body { padding: 60px 0 80px; }
  .article-body h2 { font-size: 1.625rem; }
  .article-footer-cta { padding: 60px 0; }
  .article-footer-cta h2 { font-size: 1.75rem; }

  /* ---- Footer ---- */
  .footer-top { gap: 32px; }
  .footer-col h3 { font-size: 0.72rem; }
  .footer-col a, .footer-col p { font-size: 0.85rem; }
  .footer-col p.footer-disclaimer { font-size: 0.75rem; }
}

/* ===========================================================
   Responsive — mobile (max-width: 767px)
   =========================================================== */

@media (max-width: 767px) {

  /* ---- typography scale ---- */
  h1 { font-size: 2.375rem; }        /* Title -> 38 */
  h2 { font-size: 1.75rem; }         /* Heading -> 28 */
  h3, h4 { font-size: 1.125rem; }    /* Subheading -> 18 */
  .eyebrow { font-size: 10px; }
  .brand-quote, .pull-quote p, .callout p, .diff-statement { font-size: 1.125rem; }
  .diff-moment { font-size: 1.375rem; }

  /* ---- section rhythm ---- */
  .section { padding: 60px 0; }
  .container { padding: 0 var(--page-padding-mobile); }
  .wwa-container, .wwa-form-inner { padding: 0 var(--page-padding-mobile); }

  /* ---- buttons full-width ---- */
  .btn-row { flex-direction: column; gap: 12px; }
  .btn-row .btn,
  .footer-cta .btn,
  .article-footer-cta .btn,
  .email-form .btn { width: 100%; }

  /* ---- nav: hamburger + full-screen overlay ---- */
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; gap: 5px; }
  .nav-toggle span { width: 22px; height: 1.5px; background: var(--green); }
  .site-header.on-dark:not(.scrolled) .nav-toggle span { background: var(--cream); }

  /* ---- Home ---- */
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-home { min-height: auto; padding: 100px 0 40px; }
  .hero-left { padding: 2rem 1.25rem; }

  /* Photo strip below text on mobile (natural DOM order — .hero-left
     comes first in the markup, so no "order" override is needed) */
  .hero-right {
    min-height: 180px;
    width: 100%;
  }

  /* .hero-photo-inner is position:absolute on desktop (sized to match
     .hero-right exactly, behind the floating card). At mobile the card
     switches to position:relative/in-flow, so if the photo layer stayed
     absolute it would have no in-flow height of its own and would just
     sit underneath the card instead of forming its own band above it. */
  .hero-photo-inner {
    position: relative;
    min-height: 180px;
    border-radius: 0;
  }

  /* Pill hidden on mobile — too small */
  .hero-photo-pill { display: none; }

  /* Monogram smaller on mobile */
  .hero-monogram {
    font-size: 80px;
    bottom: -0.5rem;
    right: 0.5rem;
  }

  /* Credential card — full width strip on mobile */
  .hero-cred-card {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    border-radius: 0;
    border-top: 3px solid var(--gold);
    box-shadow: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(5,71,42,0.08);
    padding: 1rem 1.25rem;
  }

  /* Stats horizontal on mobile */
  .hero-cred-stats { justify-content: space-around; }

  /* Hide sub text on mobile to keep card compact */
  .hero-cred-sub { display: none; }
  .hero-cred-divider { margin: 8px 0; }

  .problem-row {
    grid-template-columns: 60px 1fr;
    grid-template-areas: "num text" "answer answer";
    gap: 8px;
    border-top: none;
    border-bottom: 1px solid var(--gray);
    padding: 24px 4px;
  }
  .problem-rows .problem-row:first-child { border-top: 1px solid var(--gray); }
  .problem-row .num { grid-area: num; }
  .problem-row .problem-text { grid-area: text; }
  .problem-row .answer-wrap {
    grid-area: answer;
    justify-self: start;
    text-align: left;
    padding-left: 20px;
    margin-top: 4px;
  }

  .quote-mark-ghost { font-size: 7.5rem; }

  /* Stats container — single horizontal row */
  .stats-arch {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 2rem 1.25rem;
  }
  .stats-arch::before { display: none; }

  /* Each stat item — equal width, centered */
  .stat {
    flex: 1;
    text-align: center;
    padding: 0;
    position: relative;
  }
  .stat::before { display: none; }

  /* Divider between items */
  .stat:not(:last-child) {
    border-right: 1px solid rgba(5,71,42,0.12);
  }

  /* Scale down the large number */
  .stat-number { font-size: 36px; }

  /* Scale down the label */
  .stat-label { font-size: 9px; letter-spacing: 0.08em; }

  .stat-rule { margin-left: auto; margin-right: auto; }

  /* Hide the sub-description text on mobile to keep it clean */
  .stat-detail { display: none; }

  /* ---- How It Works ---- */
  .page-hero--green { padding: 100px 0 60px; }
  .hero-ghost-text { display: none; }
  .page-hero--green h1 { font-size: 1.75rem; line-height: 1.1; }

  .balance-viz { grid-template-columns: 1fr; gap: 40px; }
  .balance-line { display: none; }
  .balance-col--practice, .balance-col--practice ul li { text-align: left; justify-content: flex-start; }

  .step .step-ghost { font-size: 3rem; }
  .step h3 { font-size: 1.5rem; }

  /* ---- Services ---- */
  .page-hero h1 { font-size: 1.75rem; }
  .accordion-header { min-height: 64px; font-size: 1.375rem; padding-left: 20px; padding-right: 20px; }
  .accordion-content { padding-left: 20px; padding-right: 20px; }
  .accordion-content { grid-template-columns: 1fr; }
  .accordion-content ul li { font-size: 0.875rem; }
  .accordion-ghost { display: none; }
  .tech-badges { flex-direction: column; }
  .tech-badge { width: 100%; text-align: center; padding: 16px; }

  /* ---- Who We Serve ---- */
  .provider-strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .provider-strip::-webkit-scrollbar { display: none; }
  .provider-card { flex: 0 0 auto; min-width: 140px; padding: 20px 16px; }
  .provider-strip:has(.provider-card:hover) .provider-card,
  .provider-strip:has(.provider-card:hover) .provider-card:hover { flex: 0 0 auto; }
  .provider-card .provider-abbr { font-size: 2rem; }

  .timeline { display: none; }
  .lc-cards { gap: 16px; }
  .lc-card { padding: 32px 24px; margin-bottom: 0; }

  .disclaimer-box { padding: 20px; font-size: 0.8125rem; }

  /* ---- Resources ---- */
  .filter-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { white-space: nowrap; }

  .article-grid, .footer-top { grid-template-columns: 1fr; }
  .article-card--featured { grid-column: span 1; }
  .article-card--featured h3 { font-size: 1.375rem; }

  .email-form { flex-direction: column; }
  .email-form input[type="email"] { width: 100%; margin-bottom: 12px; }

  /* ---- Work With ABWS ---- */
  .wwa-hero { padding: 100px 0 60px; }
  .wwa-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .wwa-headline { font-size: 2.25rem; }
  .wwa-hero-circle, .wwa-hero-diagonal { display: none; }

  .wwa-anchor-items { grid-template-columns: 1fr; gap: 0; }
  .wwa-anchor-item { padding: 20px 0; border-bottom: 1px solid rgba(239,224,205,0.15); }
  .wwa-anchor-item + .wwa-anchor-item::before { display: none; }

  /* ---- Practices We Support ---- */
  .practices-hero { padding: 100px 0 48px; }
  .practices-coming-soon { padding: 60px 0; }
  .practices-coming-soon .disclaimer-box { left: 0; transform: none; width: auto; white-space: normal; font-size: 0.875rem; padding: 0; }
  .practices-cta { width: 100%; text-align: center; }

  /* ---- Blog detail ---- */
  .article-hero { padding: 100px 0 48px; }
  .breadcrumb { display: none; }
  .article-hero h1 { font-size: 1.625rem; }
  .article-subtitle { font-size: 0.9375rem; }
  .article-meta-row { line-height: 1.8; }

  .article-body { padding: 40px 0 60px; }
  .article-body h2 { font-size: 1.375rem; }
  .pull-quote { padding: 28px 20px; }
  .pull-quote p { font-size: 1.125rem; }
  .article-callout { padding: 20px 16px; }

  .article-footer-cta { padding: 48px 0; }
  .article-footer-cta h2 { font-size: 1.375rem; }

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

  /* ---- Footer ---- */
  .footer-top { text-align: center; }
  .footer-brand { text-align: center; }
  .footer-brand p.desc { margin-left: auto; margin-right: auto; }
  .footer-brand-contact { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }
  .footer-col ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .footer-col ul li { margin-bottom: 0; font-size: 0.875rem; }
  .footer-col p { font-size: 0.75rem; }
  .footer-bottom { font-size: 0.6875rem; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
}

/* ===========================================================
   ABWS Chatbot: mobile
   =========================================================== */
@media (max-width: 767px) {
  .abws-chat-trigger { bottom: 16px; right: 16px; width: 52px; height: 52px; }
  .abws-chat-window {
    width: calc(100vw - 24px);
    height: 70vh;
    max-height: 500px;
    right: 12px;
    bottom: 80px;
  }
  .abws-chat-chip { font-size: 11px; padding: 5px 10px; }
  .abws-chat-quick-replies { flex-wrap: nowrap; overflow-x: auto; }
  .abws-chat-input { font-size: 16px; }
  .abws-chat-bubble-wrap { max-width: 85%; }
  .abws-chat-bubble { font-size: 13px; }

  .page-transition-overlay.is-covering { animation-duration: 0.3s; }
  .page-transition-overlay.is-revealing { animation-duration: 0.3s; }
}

/* ---------- Open layout: fewer boxes, more whitespace + hairlines ---------- */

.provider-strip { gap: 0; }
.provider-card {
  background: transparent;
  border-bottom: none;
  border-radius: 0;
  padding: 16px 24px;
}
.provider-card + .provider-card { border-left: 1px solid rgba(171,165,156,0.5); }
.provider-card:hover,
.provider-card.tapped {
  background: transparent;
  color: var(--green);
  transform: none;
}
.provider-card:hover .provider-abbr,
.provider-card.tapped .provider-abbr { color: var(--green); }
.ph-detail { color: var(--charcoal); }

.article-card:not(.article-card--featured) {
  background: transparent;
  border-left: none;
  border-top: 1px solid rgba(171,165,156,0.5);
  border-radius: 0;
  padding: 28px 0 8px;
}
.article-card:not(.article-card--featured):hover,
.article-card:not(.article-card--featured).tapped {
  background: transparent;
  transform: none;
}
.article-card:not(.article-card--featured) h3 { transition: color 0.2s var(--ease); }
.article-card:not(.article-card--featured):hover h3 { color: var(--green); }
.article-grid { column-gap: 48px; row-gap: 40px; }

.article-card:not(.article-card--featured) .category-pill {
  border: none;
  padding: 0;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}

.filter-tabs { gap: 28px; }
.filter-tab {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 6px 0;
}
.filter-tab:hover { background: transparent; border-bottom-color: rgba(5,71,42,0.35); }
.filter-tab.active { background: transparent; color: var(--green); border-bottom-color: var(--green); }

.tech-badges { gap: 0; }
.tech-badge { border: none; border-radius: 0; padding: 0 24px; }
.tech-badge + .tech-badge { border-left: 1px solid rgba(171,165,156,0.5); }

@media (max-width: 767px) {
  .provider-card + .provider-card { border-left: 1px solid rgba(171,165,156,0.5); }
  .tech-badges { gap: 12px; }
  .tech-badge, .tech-badge + .tech-badge { border-left: none; padding: 8px 0; }
}

@media (max-width: 767px) {
  .balance-col--abws .arrow { order: 2; transform: scaleX(-1); }
  .balance-col--abws ul li:hover .arrow { transform: scaleX(-1) translateX(-8px); }
  .balance-col--practice ul li:hover .arrow { transform: translateX(8px); }
}

.provider-nav { display: none; }
@media (max-width: 767px) {
  .provider-strip { scroll-snap-type: x mandatory; }
  .provider-card { scroll-snap-align: center; }
  .provider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  .provider-nav-hint {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
  }
  .provider-nav-btn {
    width: 40px; height: 40px;
    border: 1px solid var(--green);
    border-radius: 50%;
    background: transparent;
    color: var(--green);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
  }
  .provider-nav-btn:active { background: var(--green); color: var(--cream); }
}

/* ===========================================================
   Homepage: hero background SVG, hero CTA entrance
   =========================================================== */

.hero-bg-svg {
  position: absolute;
  top: -60px;
  right: -80px;
  width: 520px;
  height: 520px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.hero-cta-btn { opacity: 0; }

/* ===========================================================
   Homepage: trust strip
   =========================================================== */

.trust-strip {
  background: #0a1f12;
  display: flex;
  border-top: 1px solid rgba(196,158,91,0.15);
  border-bottom: 1px solid rgba(196,158,91,0.08);
}
.trust-strip-item {
  flex: 1;
  padding: 1.75rem 1.5rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  cursor: default;
  transition: background 0.25s;
}
.trust-strip-item:last-child { border-right: none; }
.trust-strip-item:hover { background: rgba(196,158,91,0.04); }
.trust-strip-item:hover .trust-strip-bar { opacity: 1; }
.trust-strip-item:hover .trust-strip-num { color: #C49E5B; }
.trust-strip-num {
  font-family: 'DM Serif Display', serif;
  font-size: 28px;
  color: rgba(239,224,205,0.1);
  line-height: 1;
  margin-bottom: 6px;
  transition: color 0.25s;
}
.trust-strip-bar {
  width: 20px;
  height: 2px;
  background: #C49E5B;
  margin-bottom: 8px;
  opacity: 0;
  transition: opacity 0.25s;
}
.trust-strip-title {
  font-size: 11px;
  font-weight: 700;
  color: #EFE0CD;
  letter-spacing: 0.04em;
  line-height: 1.35;
  margin-bottom: 4px;
}
.trust-strip-sub {
  font-size: 10px;
  color: rgba(239,224,205,0.4);
  line-height: 1.4;
}

@media (max-width: 767px) {
  /* Hide the static grid on mobile */
  .trust-strip {
    display: none;
  }

  /* Show the mobile ribbon instead */
  .trust-ribbon-mobile {
    display: block;
    background: #0a1f12;
    border-top: 1px solid rgba(196,158,91,0.15);
    border-bottom: 1px solid rgba(196,158,91,0.08);
    overflow: hidden;
    padding: 1.5rem 0;
  }

}

@media (min-width: 768px) {
  .trust-ribbon-mobile {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .trust-strip-item { flex: 0 0 33.33%; border-bottom: 1px solid rgba(255,255,255,0.06); }
}

/* ── Trust ribbon (mobile auto-scroll) ─────────────────────
   Visibility is fully handled by the two media queries above
   (block under 768px, none at 768px+) — no unscoped base rule
   here, since one would win the cascade over both by source
   order and keep the ribbon hidden on mobile too. */

.trust-ribbon-track {
  display: flex;
  width: max-content;
  animation: trust-ribbon-scroll 22s linear infinite;
}

.trust-ribbon-track:hover {
  animation-play-state: paused;
}

.trust-ribbon-item {
  min-width: 160px;
  padding: 0 1.25rem 0 1rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trust-ribbon-item:last-child {
  border-right: none;
}

.trust-ribbon-num {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: rgba(239,224,205,0.1);
  line-height: 1;
}

.trust-ribbon-title {
  font-size: 12px;
  font-weight: 700;
  color: #EFE0CD;
  letter-spacing: 0.03em;
  line-height: 1.35;
}

.trust-ribbon-sub {
  font-size: 10px;
  color: rgba(239,224,205,0.4);
  line-height: 1.4;
}

@media (max-width: 767px) {
  /* Ribbon numbers — fully visible (no hover to reveal them on touch) */
  .trust-ribbon-num {
    color: rgba(239,224,205,0.55);
  }

  /* Ribbon title — full brightness */
  .trust-ribbon-title {
    color: #EFE0CD;
    font-size: 12px;
    font-weight: 700;
  }

  /* Ribbon sub — more readable */
  .trust-ribbon-sub {
    color: rgba(239,224,205,0.55);
    font-size: 10px;
  }

  /* Gold bar always visible on mobile */
  .trust-ribbon-item::after {
    content: '';
    display: block;
    width: 16px;
    height: 2px;
    background: #C49E5B;
    margin-top: 6px;
  }
}

@keyframes trust-ribbon-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .trust-ribbon-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
  }
  .trust-ribbon-item {
    min-width: 150px;
    margin-bottom: 1rem;
  }
}

/* ===========================================================
   Homepage: problem/solution swipe cards (mobile only)
   =========================================================== */

.problem-desktop { display: block; }
.problem-swipe-mobile { display: none; }

@media (max-width: 767px) {
  .problem-desktop { display: none; }
  .problem-swipe-mobile {
    display: block;
    padding: 0 1.25rem;
    overflow: hidden;
  }
}

.swipe-cont {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
  padding-right: 1.25rem;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  padding-left: 1.25rem;
}
.swipe-cont::-webkit-scrollbar { display: none; }

.swipe-card {
  min-width: 280px;
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .swipe-card {
    min-width: calc(100vw - 4rem);
    max-width: calc(100vw - 4rem);
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}
.swipe-card-top {
  background: #05472A;
  padding: 1.5rem 1.5rem 2rem;
  position: relative;
  min-height: 140px;
  overflow: hidden;
}
.swipe-card.active-swipe .swipe-card-top { background: #063d24; }
.swipe-card-num {
  font-family: 'DM Serif Display', serif;
  font-size: 60px;
  color: rgba(239,224,205,0.07);
  position: absolute;
  top: -10px; right: 12px;
  line-height: 1;
  user-select: none;
  overflow: hidden;
}
.swipe-card-tag {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C49E5B;
  margin-bottom: 10px;
}
.swipe-problem {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  color: #EFE0CD;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: break-word;
}
.swipe-card-bottom {
  background: #FFFFFF;
  border-top: 3px solid #C49E5B;
  padding: 1.25rem 1.5rem;
  overflow: hidden;
}
.swipe-solution-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ABA59C;
  margin-bottom: 6px;
}
.swipe-solution {
  font-size: 13px;
  color: #05472A;
  font-weight: 700;
  line-height: 1.45;
}
.swipe-solution-sub {
  font-size: 11px;
  color: #41424C;
  margin-top: 4px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.swipe-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1.25rem;
}
.swipe-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(5,71,42,0.2);
  transition: all 0.3s;
}
.swipe-dot.active { background: #05472A; width: 20px; border-radius: 3px; }
.swipe-auto-label {
  text-align: center;
  font-size: 11px;
  color: #ABA59C;
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* ===========================================================
   Homepage: brand quote word-by-word reveal
   =========================================================== */

.quote-word {
  display: inline;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.quote-word.visible { opacity: 1; }

/* ===========================================================
   Homepage: premium values ticker
   =========================================================== */

.premium-ticker-wrap {
  overflow: hidden;
  border-top: 1px solid rgba(44,44,40,0.1);
  border-bottom: 1px solid rgba(44,44,40,0.1);
  padding: 1.25rem 0;
  background: #FFFFFF;
}
.premium-ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 28s linear infinite;
}
.ticker-item {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-style: italic;
  color: #2C2C28;
  letter-spacing: 0.06em;
  padding: 0 1.75rem;
  white-space: nowrap;
}
.ticker-sep { color: #C49E5B; margin-left: 0.5rem; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .premium-ticker-track { animation: none; }
}

/* ===========================================================
   How It Works: vertical sticky timeline
   =========================================================== */

.sticky-timeline {
  position: relative;
  padding: 2rem 0 2rem 4rem;
}
.sticky-timeline-line {
  position: absolute;
  /* .sticky-step sits at .sticky-timeline's 4rem left padding — this
     centers the 2px line exactly on that same edge, where the dots
     (see .sticky-step-dot) are also centered. */
  left: calc(4rem - 1px);
  top: 2rem;
  bottom: 2rem;
  width: 2px;
  background: rgba(239,224,205,0.1);
}
.sticky-timeline-progress {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: #C49E5B;
  transition: height 0.4s ease;
}
.sticky-step {
  position: relative;
  padding: 0 0 3rem 2rem;
}
.sticky-step-dot {
  position: absolute;
  /* Centers the 14px dot on .sticky-step's own left edge, which is
     where .sticky-timeline-line is also centered. */
  left: -7px;
  top: 0.35rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #EFE0CD;
  border: 2px solid rgba(5,71,42,0.15);
  transition: all 0.3s;
  z-index: 1;
}
.sticky-step.active .sticky-step-dot {
  background: #C49E5B;
  border-color: #C49E5B;
  box-shadow: 0 0 0 4px rgba(196,158,91,0.15);
}
.sticky-step-num {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196,158,91,0.7);
  margin-bottom: 8px;
}
.sticky-step-title {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: #EFE0CD;
  margin-bottom: 0.75rem;
}
.sticky-step-body {
  font-size: 14px;
  color: rgba(239,224,205,0.7);
  line-height: 1.7;
  max-width: 520px;
}

/* Inactive steps fade via color alone — .sticky-step's own opacity is
   reduced below, so stacking a second, lower-alpha color on top of that
   would compound into near-invisible text; the container opacity is
   removed in favor of this single color-based dim. */
.sticky-step:not(.active) .sticky-step-title {
  color: rgba(239,224,205,0.35);
}
.sticky-step:not(.active) .sticky-step-body {
  color: rgba(239,224,205,0.25);
}

/* Mobile — disable sticky, simple reveal */
@media (max-width: 767px) {
  .sticky-timeline { padding-left: 2.5rem; }
  /* .sticky-step now sits at 2.5rem (not 4rem) here — re-center the
     line on that edge to match, same reasoning as the desktop rule. */
  .sticky-timeline-line { left: calc(2.5rem - 1px); }
  .sticky-step { opacity: 1; padding-bottom: 2rem; }
  .sticky-step-title { font-size: 18px; }
}

/* ===========================================================
   How It Works: MSO responsibility table
   =========================================================== */

.mso-table-wrap { padding: 2rem 0; }
.mso-table-intro { margin-bottom: 1.75rem; }
.mso-table-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C49E5B;
  margin-bottom: 8px;
}
.mso-table-title {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  color: #05472A;
  line-height: 1.25;
}
.mso-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}
.mso-th {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px;
  font-weight: 700;
}
.mso-th.provider-th { color: #ABA59C; text-align: left; width: 44%; }
.mso-th.vs-th { width: 12%; text-align: center; }
.mso-th.abws-th { color: #C49E5B; text-align: left; }
.mso-td {
  padding: 12px 16px;
  font-size: 13.5px;
  vertical-align: middle;
}
.mso-td.provider-td {
  background: #FFFFFF;
  color: #41424C;
  border-radius: 8px 0 0 8px;
  border: 1px solid rgba(5,71,42,0.06);
  border-right: none;
}
.mso-td.vs-td {
  background: #EFE0CD;
  text-align: center;
  font-size: 12px;
  color: #ABA59C;
  border-top: 1px solid rgba(5,71,42,0.06);
  border-bottom: 1px solid rgba(5,71,42,0.06);
}
.mso-td.abws-td {
  background: #05472A;
  color: rgba(239,224,205,0.9);
  border-radius: 0 8px 8px 0;
  font-weight: 500;
}
.mso-row-alt .provider-td { opacity: 0.55; }
.mso-row-alt .abws-td { background: #063d24; }
.mso-table-footer {
  font-size: 12px;
  color: #ABA59C;
  text-align: center;
  margin-top: 1.25rem;
  font-style: italic;
}

/* ── MSO mobile card stack ──────────────────────────────── */
.mso-cards-mobile {
  display: none;
}

@media (max-width: 767px) {

  /* Hide desktop table (and its own footer note — the card stack has
     its own copy, .mso-mobile-footer, so showing both would duplicate
     the disclaimer) */
  .mso-table {
    display: none;
  }
  .mso-table-footer {
    display: none;
  }

  /* Show mobile cards */
  .mso-cards-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1.5rem;
  }

  .mso-mobile-card {
    border-radius: 12px;
    overflow: hidden;
  }

  /* You handle — cream top half */
  .mso-mobile-you {
    background: #FFFFFF;
    border: 1px solid rgba(5,71,42,0.08);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 0.875rem 1.25rem;
  }

  .mso-mobile-you-label {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ABA59C;
    margin-bottom: 4px;
  }

  .mso-mobile-you-text {
    font-size: 13px;
    color: #41424C;
    font-weight: 500;
    line-height: 1.4;
  }

  /* Connector — thin gold bar with arrow */
  .mso-mobile-connector {
    display: flex;
    align-items: center;
    background: #EFE0CD;
    padding: 0 1.25rem;
    height: 28px;
    gap: 8px;
    border-left: 1px solid rgba(5,71,42,0.08);
    border-right: 1px solid rgba(5,71,42,0.08);
  }

  .mso-mobile-connector-line {
    flex: 1;
    height: 1px;
    background: rgba(196,158,91,0.35);
  }

  .mso-mobile-connector-dot {
    font-size: 12px;
    color: #C49E5B;
    font-weight: 700;
    flex-shrink: 0;
  }

  /* ABWS handles — green bottom half */
  .mso-mobile-abws {
    background: #05472A;
    border-radius: 0 0 12px 12px;
    padding: 0.875rem 1.25rem;
  }

  .mso-mobile-abws-label {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(196,158,91,0.7);
    margin-bottom: 4px;
  }

  .mso-mobile-abws-text {
    font-size: 13px;
    color: rgba(239,224,205,0.9);
    font-weight: 600;
    line-height: 1.4;
  }

  /* Footer note */
  .mso-mobile-footer {
    font-size: 11px;
    color: #ABA59C;
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
  }

}

/* ===========================================================
   Services: accordion service icons
   =========================================================== */

.acc-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #05472A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.45s ease;
  color: #EFE0CD;
}
.acc-icon-wrap svg {
  width: 17px;
  height: 17px;
  stroke: #EFE0CD;
}
/* Rotate icon 360deg when accordion opens */
.accordion-panel.is-open .acc-icon-wrap {
  transform: rotate(360deg);
}

/* ===========================================================
   Services: grain texture on COO callout
   =========================================================== */

.coo-band { position: relative; overflow: hidden; }

.grain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}

.coo-band > *:not(.grain-canvas) { position: relative; z-index: 1; }

/* ===========================================================
   Who We Serve: dark premium provider credential cards
   =========================================================== */

.cred-section-dark {
  background: transparent;
  padding: 3rem 0;
  border-radius: 0;
}
.cred-section-header { margin-bottom: 2rem; }
.cred-section-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C49E5B;
  margin-bottom: 8px;
}
.cred-section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  color: #05472A;
  line-height: 1.2;
}
.cred-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cred-card-dark {
  background: #FFFFFF;
  border: 1px solid rgba(5,71,42,0.1);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  position: relative;
  transition: all 0.3s ease;
  cursor: default;
  overflow: hidden;
}
.cred-card-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, #C49E5B, transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .cred-card-dark:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(5,71,42,0.1);
    border-color: rgba(5,71,42,0.2);
  }
  .cred-card-dark:hover::before { opacity: 1; }
}
.cred-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  background: rgba(5,71,42,0.07);
  border: 1px solid rgba(5,71,42,0.15);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #05472A;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.cred-card-name {
  font-family: 'DM Serif Display', serif;
  font-size: 17px;
  color: #05472A;
  margin-bottom: 8px;
  line-height: 1.3;
}
.cred-card-desc {
  font-size: 12px;
  color: #41424C;
  line-height: 1.6;
}
.cred-card-tag {
  display: inline-block;
  margin-top: 12px;
  font-size: 10px;
  color: #ABA59C;
  border: 1px solid rgba(5,71,42,0.1);
  border-radius: 20px;
  padding: 3px 9px;
  letter-spacing: 0.06em;
}

@media (max-width: 767px) {
  .cred-cards-grid { grid-template-columns: 1fr; gap: 12px; }
  .cred-section-dark { padding: 2rem 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cred-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop only: 5 cards in a 3-column grid leaves the last row's 2 cards
   left-aligned under columns 1–2. Switching to flex-wrap centers an
   incomplete last row automatically (each wrapped line is justified on
   its own), while the full first row still fills edge-to-edge exactly
   as the grid did, so its layout is unaffected. */
@media (min-width: 1024px) {
  .cred-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cred-card-dark {
    flex: 0 0 calc((100% - 2 * 14px) / 3);
  }
}

/* ===========================================================
   Who We Serve: practice lifecycle horizontal stepper
   =========================================================== */

.lifecycle-stepper { padding: 2rem 0; }
.lifecycle-tabs {
  display: flex;
  border-bottom: 1px solid rgba(5,71,42,0.12);
  margin-bottom: 0;
  gap: 0;
  flex-wrap: wrap;
}
.lifecycle-tab {
  padding: 12px 24px;
  font-size: 13px;
  font-family: 'Lato', sans-serif;
  color: #ABA59C;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.lifecycle-tab:hover { color: #05472A; }
.lifecycle-tab.active {
  color: #05472A;
  border-bottom-color: #C49E5B;
  font-weight: 700;
}
.lifecycle-panel { display: none; }
.lifecycle-panel.active { display: block; }
.lifecycle-panel-inner {
  padding: 2rem 0;
  animation: panel-fade 0.3s ease;
}
@keyframes panel-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.lifecycle-panel-title {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  color: #05472A;
  margin-bottom: 0.75rem;
}
.lifecycle-panel-body {
  font-size: 14px;
  color: #41424C;
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 1.25rem;
}
.lifecycle-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.lifecycle-tag {
  background: rgba(5,71,42,0.07);
  color: #05472A;
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(5,71,42,0.12);
}

@media (max-width: 767px) {
  .lifecycle-tab { padding: 10px 16px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes panel-fade { from { opacity: 1; } to { opacity: 1; } }
}

/* ===========================================================
   Resources: reading time indicator
   =========================================================== */

.reading-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #C49E5B;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.reading-time svg { flex-shrink: 0; stroke: #C49E5B; }

/* ===========================================================
   Resources: full-width editorial featured article
   =========================================================== */

.featured-article-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 2.5rem;
  min-height: 280px;
}
.featured-article-left {
  background: #EFE0CD;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.featured-article-tag {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C49E5B;
  margin-bottom: 0.75rem;
}
.featured-article-title {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  color: #05472A;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
.featured-article-excerpt {
  font-size: 13px;
  color: #41424C;
  line-height: 1.65;
  margin-bottom: 1rem;
}
.featured-article-meta { margin-bottom: 1.25rem; }
.featured-article-cta {
  font-size: 12px;
  color: #05472A;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}
.featured-article-cta:hover { gap: 8px; }
.featured-article-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Image layer */
.featured-article-img-layer {
  position: absolute;
  inset: 0;
  background-image: url('../images/articles/featured-article.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.6s ease;
}

/* Subtle zoom on hover */
@media (hover: hover) {
  .featured-article-card:hover .featured-article-img-layer {
    transform: scale(1.04);
  }
}

/* Green overlay — gradient so top is lighter, bottom darker */
.featured-article-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(5,71,42,0.60) 0%,
    rgba(5,71,42,0.75) 100%
  );
  z-index: 1;
  transition: background 0.3s ease;
}

/* Slightly lighter on hover */
@media (hover: hover) {
  .featured-article-card:hover .featured-article-img-overlay {
    background: linear-gradient(
      135deg,
      rgba(5,71,42,0.48) 0%,
      rgba(5,71,42,0.62) 100%
    );
  }
}

/* Ghost monogram sits above both layers */
.featured-article-monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 72px;
  color: rgba(239,224,205,0.08);
  font-style: italic;
  user-select: none;
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0.05em;
}

/* Small gold accent line on the right side */
.featured-article-right::after {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(196,158,91,0.4),
    transparent
  );
  z-index: 3;
}

@media (max-width: 767px) {
  .featured-article-card { grid-template-columns: 1fr; }
  .featured-article-right { min-height: 160px; }
  .featured-article-monogram { font-size: 48px; }
}

/* ===========================================================
   Context-aware custom cursor (desktop only)
   =========================================================== */

@media (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }

  .cursor-dot {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #05472A;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    /* Position comes from JS via translate3d(...) — transform (GPU
       compositing) instead of left/top (layout) keeps this off the
       main thread, so it doesn't compete with scroll. The dot tracks
       the mouse with no transition — only the ring below has lag. */
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background 0.2s;
    will-change: transform;
    top: 0; left: 0;
  }

  .cursor-ring {
    position: fixed;
    width: 36px;
    height: 36px;
    border: 1.5px solid #05472A;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    /* The "follows with slight lag" effect is now a CSS transition on
       transform (previously a JS requestAnimationFrame loop that ran
       forever, every frame, on every page — even when the mouse was
       idle. A transition only costs anything while actually catching
       up to a new position, and runs on the compositor, not the main
       thread, so it doesn't compete with scroll performance.) */
    transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.25s ease, height 0.25s ease,
                border-color 0.25s ease, background 0.25s ease,
                opacity 0.25s ease;
    background: transparent;
    will-change: transform;
    top: 0; left: 0;
  }

  .cursor-ring.is-card {
    width: 52px;
    height: 52px;
    border-color: #C49E5B;
  }

  .cursor-ring.is-button {
    background: rgba(5,71,42,0.12);
  }

  .cursor-dot.is-hidden,
  .cursor-ring.is-hidden {
    opacity: 0;
  }
}

/* ===========================================================
   Page wipe transition (Barba.js)
   =========================================================== */

.page-wipe {
  position: fixed;
  inset: 0;
  background: #05472A;
  z-index: 99990;
  transform: scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
}

/* ===========================================================
   Back to top floating button
   =========================================================== */

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #05472A;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9990;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
  box-shadow: 0 4px 16px rgba(5,71,42,0.25);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
  stroke: #C49E5B;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: #063d24;
  transform: translateY(-2px);
}
.back-to-top:focus-visible {
  outline: 2px solid #C49E5B;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .back-to-top { bottom: 1.25rem; right: 1.25rem; width: 44px; height: 44px; }
}

/* ===========================================================
   Homepage: services carousel (mobile only)
   =========================================================== */

/* ── Services carousel (mobile only) ───────────────────── */
.services-carousel-mobile {
  display: none;
}

@media (max-width: 767px) {
  /* Hide the desktop services section */
  .services-desktop-section {
    display: none;
  }

  /* Show mobile carousel */
  .services-carousel-mobile {
    display: block;
    padding: 2rem 0 1.5rem;
  }
}

.services-carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 4px;
  /* Without this, scroll-snap-align:start aligns each card flush with
     the viewport edge after snapping settles, overriding the padding
     above — so only the very first card (at scrollLeft 0) ever showed
     a left margin; every card after it snapped flush left. */
  scroll-padding-left: 1.25rem;
  scroll-padding-right: 1.25rem;
}
.services-carousel-track::-webkit-scrollbar { display: none; }

.services-carousel-card {
  min-width: calc(100vw - 4rem);
  max-width: calc(100vw - 4rem);
  flex-shrink: 0;
  scroll-snap-align: start;
  background: #05472A;
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.services-carousel-icon {
  width: 40px;
  height: 40px;
  background: rgba(239,224,205,0.22);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.services-carousel-icon svg {
  width: 18px;
  height: 18px;
  stroke: #C49E5B;
}

.services-carousel-num {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196,158,91,0.6);
  margin-bottom: 8px;
}

.services-carousel-title {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: #EFE0CD;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.services-carousel-desc {
  font-size: 13px;
  color: rgba(239,224,205,0.65);
  line-height: 1.65;
}

.services-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.services-carousel-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(5,71,42,0.2);
  transition: all 0.3s;
  flex-shrink: 0;
}
.services-carousel-dot.active {
  background: #05472A;
  width: 20px;
  border-radius: 3px;
}

/* ===========================================================
   How It Works: section background rhythm
   =========================================================== */

/* ---- Timeline section: cream -> dark green ---- */
.hiw-timeline-section {
  background: #05472A;
  border-top: 1px solid rgba(5,71,42,0.15);
}
.hiw-timeline-section .eyebrow {
  color: rgba(196,158,91,0.8);
}
.hiw-timeline-section h2 {
  color: #EFE0CD;
}

/* ---- Differentiator quote section: dark green -> charcoal ---- */
.hiw-quote-section {
  background: #2C2C28;
  border-top: 1px solid rgba(239,224,205,0.06);
}
.hiw-quote-section .diff-moment {
  color: rgba(239,224,205,0.85);
}
.hiw-quote-section .quote-rule {
  background: rgba(196,158,91,0.4);
}

/* ---- CTA section: charcoal -> cream ----
   Background and heading color already match this section's defaults
   (.section--cream / the site's base h2 color are both already the
   values requested here), so these rules mostly restate the existing
   look explicitly; the border-top below is the one actual visible
   addition. */
.hiw-cta-section {
  background: #EFE0CD;
  border-top: 1px solid rgba(196,158,91,0.2);
}
.hiw-cta-section h2 {
  color: #05472A;
}
.hiw-cta-section p {
  color: #41424C;
}

/* ===========================================================
   Homepage: desktop services card grid
   (replaces the old auto-scrolling services-marquee ticker)
   =========================================================== */

.services-grid-desktop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 64px;
}

/* 7th card spans full width as a featured card */
.services-grid-desktop .service-card:last-child {
  grid-column: 1 / -1;
  max-height: 280px;
}

.service-card {
  background: #05472A;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.services-grid-desktop .service-card:last-child {
  min-height: 200px;
  justify-content: center;
}

.service-icon {
  width: 40px;
  height: 40px;
  background: rgba(239,224,205,0.22);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.service-icon svg {
  width: 18px;
  height: 18px;
  stroke: #C49E5B;
}

.service-num {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196,158,91,0.6);
  margin-bottom: 8px;
}

.service-title {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  color: #EFE0CD;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.service-desc {
  font-size: 12.5px;
  color: rgba(239,224,205,0.65);
  line-height: 1.6;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .services-grid-desktop { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================
   Service card image backgrounds (desktop .service-card and
   mobile .services-carousel-card share the same system)
   =========================================================== */

/* Base pattern for all service cards */
.service-card,
.services-carousel-card {
  position: relative;
  overflow: hidden;
}

/* The image layer — sits behind the overlay */
.service-card::before,
.services-carousel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.6s ease;
  z-index: 0;
}

/* Subtle zoom on hover */
@media (hover: hover) {
  .service-card:hover::before,
  .services-carousel-card:hover::before {
    transform: scale(1.04);
  }
}

/* Dark green overlay — gradient keeps the image visible up top while
   staying dark enough at the bottom (where the text now sits) to read */
.service-card::after,
.services-carousel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(5,71,42,0.20) 0%,
      rgba(5,71,42,0.30) 40%,
      rgba(5,71,42,0.62) 75%,
      rgba(5,71,42,0.78) 100%
    );
  z-index: 1;
  transition: background 0.3s ease;
}

/* Slightly lighter overlay on hover — lets image breathe */
@media (hover: hover) {
  .service-card:hover::after,
  .services-carousel-card:hover::after {
    background:
      linear-gradient(
        to bottom,
        rgba(5,71,42,0.10) 0%,
        rgba(5,71,42,0.18) 40%,
        rgba(5,71,42,0.52) 75%,
        rgba(5,71,42,0.68) 100%
      );
  }
}

/* All card content must sit above both layers */
.service-card > *,
.services-carousel-card > * {
  position: relative;
  z-index: 2;
}

/* ── Service card photo backgrounds ── */

[data-service="operations"]::before,
.services-carousel-card:nth-child(1)::before {
  background-image: url('../images/services/operations.jpg');
}

[data-service="administration"]::before,
.services-carousel-card:nth-child(2)::before {
  background-image: url('../images/services/administration.jpg');
}

[data-service="billing"]::before,
.services-carousel-card:nth-child(3)::before {
  background-image: url('../images/services/billing.jpg');
}

[data-service="credentialing"]::before,
.services-carousel-card:nth-child(4)::before {
  background-image: url('../images/services/credentialing.jpg');
}

[data-service="hr"]::before,
.services-carousel-card:nth-child(5)::before {
  background-image: url('../images/services/hr.jpg');
}

[data-service="technology"]::before,
.services-carousel-card:nth-child(6)::before {
  background-image: url('../images/services/technology.jpg');
}

[data-service="marketing"]::before,
.services-carousel-card:nth-child(7)::before {
  background-image: url('../images/services/marketing.jpg');
}

/* Card titles — desktop and mobile carousel */
.services-carousel-title,
.service-card h3,
.service-card .service-title {
  color: #FFFFFF;
  font-size: 20px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  position: relative;
  z-index: 2;
}

/* Card descriptions — desktop and mobile carousel */
.services-carousel-desc,
.service-card p,
.service-card .service-desc {
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  position: relative;
  z-index: 2;
}

/* Card numbers — gold, no shadow needed against the gold */
.services-carousel-num,
.service-card .service-num {
  color: rgba(196,158,91,0.9);
  text-shadow: none;
  position: relative;
  z-index: 2;
}

/* Card icons */
.services-carousel-icon,
.service-icon {
  position: relative;
  z-index: 2;
}
.services-carousel-icon svg,
.service-icon svg {
  stroke: rgba(196,158,91,0.9);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
}

@media (max-width: 767px) {
  .services-grid-desktop { display: none; }
}

/* ════════════════════════════════════════════════════════
   HERO IMAGE BACKGROUNDS — inner pages only
   Home page (index.html) does not use .page-hero at all,
   so none of this touches it.
   ════════════════════════════════════════════════════════ */

/* Image layer — ::before. (position/overflow/min-height/flex on
   .page-hero itself already come from the base rule above.) */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transition: transform 0.8s ease;
  /* Parallax offset, set from JS (js/libs.js); no-ops to 0px until then */
  transform: translateY(var(--hero-parallax, 0px));
}

/* Dark green overlay — ::after */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(5,71,42,0.82);
  z-index: 1;
}

/* ── Text color overrides for image hero ─────────────────
   Scoped to .page-hero so they don't affect any other section */

.page-hero .eyebrow {
  color: rgba(196,158,91,0.85);
}

.page-hero h1 {
  color: #EFE0CD;
}

.page-hero .lede {
  color: rgba(239,224,205,0.75);
}

/* Buttons inside hero — invert to cream on green */
.page-hero .btn--primary {
  background: #EFE0CD;
  color: #05472A;
  border-color: #EFE0CD;
}

.page-hero .btn--outline {
  border-color: rgba(239,224,205,0.5);
  color: #EFE0CD;
}

/* ── Per-page photo backgrounds ──────────────────────────
   Each has a unique placeholder tone until a real photo is
   dropped into images/heroes/ (see images/heroes/README.txt) */

/* How It Works */
.hero-how-it-works::before {
  background-image: url('../images/heroes/how-it-works.jpg');
}

/* Services */
.hero-services::before {
  background-image: url('../images/heroes/services.jpg');
}

/* Who We Serve */
.hero-who-we-serve::before {
  background-image: url('../images/heroes/who-we-serve.jpg');
}

/* Practices We Support */
.hero-practices::before {
  background-image: url('../images/heroes/practices.jpg');
}

/* Resources */
.hero-resources::before {
  background-image: url('../images/heroes/resources.jpg');
}

/* Contact */
.hero-contact::before {
  background-image: url('../images/heroes/contact.jpg');
}

/* ── Contact hero — adapt the .wwa-hero layout to sit on the
   dark photo overlay. .wwa-hero-grid already carries z-index:1
   (same as the ::after overlay below it) via .wwa-container —
   same nested-stacking-context trap as the home hero's credential
   card, so it needs to be raised above the overlay explicitly. */
.hero-contact .wwa-hero-grid { z-index: 2; }
.hero-contact .wwa-hero-circle,
.hero-contact .wwa-hero-diagonal { display: none; }

.hero-contact .wwa-eyebrow { color: rgba(196,158,91,0.85); }
.hero-contact .wwa-headline--green span { color: #EFE0CD; }
.hero-contact .wwa-headline--charcoal span { color: rgba(239,224,205,0.78); }
.hero-contact .wwa-headline--charcoal::after { background: rgba(196,158,91,0.7); }
.hero-contact .wwa-hero-rule { background: rgba(239,224,205,0.25); }
.hero-contact .wwa-body-text { color: rgba(239,224,205,0.92); }
.hero-contact .wwa-inline-trust { color: rgba(239,224,205,0.68); }

/* Fixed hero height, matching the other inner pages.
   .wwa-hero's content (eyebrow + two-line two-tone headline + rule
   + body + meta) was sized for the old auto-height hero and doesn't
   fit this fixed box, so it's scaled down to fit — otherwise, pinned
   to the bottom via justify-content:flex-end, it overflows out the
   top and gets clipped behind the fixed header. */
.hero-contact {
  min-height: 380px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 100px;
  padding-bottom: 3rem;
}

.hero-contact .wwa-eyebrow { margin-bottom: 10px; }
.hero-contact .wwa-headline { font-size: 2.75rem; }
.hero-contact .wwa-headline--charcoal { margin-top: 10px; }
.hero-contact .wwa-hero-rule { margin: 16px auto 14px; }
.hero-contact .wwa-inline-trust { margin-top: 16px; }

/* Center-align, matching the other inner-page heroes */
.hero-contact .wwa-hero-grid { grid-template-columns: 1fr; }
.hero-contact .wwa-hero-left {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.hero-contact .wwa-body-text { margin-left: auto; margin-right: auto; }

@media (max-width: 767px) {
  .hero-contact {
    min-height: 280px;
    max-height: 360px;
    padding-top: 90px;
  }
  .hero-contact .wwa-eyebrow { margin-bottom: 2px; }
  .hero-contact h1 { margin-bottom: 0; }
  .hero-contact .wwa-headline { font-size: 1.1875rem; }
  .hero-contact .wwa-headline--charcoal { margin-top: 2px; }
  .hero-contact .wwa-hero-rule { margin: 4px auto; }
  .hero-contact .wwa-body-text { max-width: none; line-height: 1.3; }
  .hero-contact .wwa-inline-trust { margin-top: 2px; }
}

/* ── Responsive hero height ───────────────────────────────
   Ensures the photo has enough area to show */

@media (max-width: 767px) {
  .page-hero { min-height: 240px; }
}

@media (min-width: 1280px) {
  .page-hero { min-height: 400px; }
}