/* ──────────────────────────────────────────────────────────────────
   IOU Counseling, Design system
   Sage / cream / slate. Crimson Text serif + Inter sans.
   Colors taken from Figma metadata.
   ────────────────────────────────────────────────────────────────── */

:root{
  --sage-500: rgb(132, 181, 159);
  --sage-600: rgb(95, 132, 120);
  --sage-700: rgb(126, 158, 110);
  --sage-300: rgb(158, 198, 138);
  --sage-200: rgb(214, 213, 211);
  --slate-900: rgb(46, 50, 49);
  --slate-700: rgb(68, 68, 68);
  --slate-500: rgb(83, 89, 86);
  --slate-400: rgb(148, 158, 155);
  --cream:    rgb(245, 240, 232);
  --cream-2:  rgb(250, 246, 240);
  --line:     rgb(229, 226, 226);
  --line-2:   rgb(236, 236, 236);
  --warm-accent: rgb(219, 156, 127);
  --white: #ffffff;

  --serif: "Crimson Text", "Source Serif Pro", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;

  --max: 1440px;

  --shadow-card: 0 1px 41.4px rgba(0,0,0,0.06);
  --shadow-soft: 0 8px 32px rgba(46,50,49,0.08);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--slate-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:0;background:transparent;cursor:pointer;color:inherit;}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-0.022em;
  margin:0;
  color:var(--slate-900);
}

.container{ max-width:1440px; margin:0 auto; padding:0 64px; }
@media (max-width:900px){ .container{ padding:0 24px; } }

/* ─── Eyebrow / small caps ─── */
.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--sage-600);
}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:14px 26px;
  font-family:var(--sans);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:999px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
  cursor:pointer;
}
.btn-primary{
  background:var(--sage-500);
  color:#fff;
  box-shadow: 0 6px 20px -6px rgba(132,181,159,.55);
}
.btn-primary:hover{
  background:var(--sage-600);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(95,132,120,.6);
}
.btn-ghost{
  background:transparent;
  color:var(--slate-900);
  border:1px solid var(--slate-900);
}
.btn-ghost:hover{
  background:var(--slate-900);
  color:#fff;
}
.btn-light{
  background:transparent;
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
}
.btn-light:hover{ background:#fff; color:var(--slate-900); border-color:#fff; }

.btn-sm{ padding:10px 20px; font-size:12px; }

/* ─── Nav ─── */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  height:80px;
  display:flex;align-items:center;
  background:rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
/* Tint the sage logo a hair darker so it reads cleanly on white. */
.nav .nav__brand img{
  filter: brightness(0.78) saturate(1.3);
  transition: filter .35s var(--ease);
}

/* Dark hero nav — applied on the home page only, before the user scrolls.
   Once .is-scrolled fires (after 24px), the bar fades back to solid white. */
.nav.is-dark:not(.is-scrolled){
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.nav.is-dark:not(.is-scrolled) .nav__brand-name,
.nav.is-dark:not(.is-scrolled) .nav__link{
  color: #fff;
}
.nav.is-dark:not(.is-scrolled) .nav__link::after{ background: #fff; }
.nav.is-dark:not(.is-scrolled) .nav__link.is-active{ color: var(--sage-500); }
.nav.is-dark:not(.is-scrolled) .nav__link.is-active::after{ background: var(--sage-500); }
.nav.is-dark:not(.is-scrolled) .nav__brand img{
  filter: brightness(0) invert(1);
}
.nav__inner{
  width:100%;
  max-width:none;
  padding:0 64px;
  display:flex;align-items:center;justify-content:space-between;
  gap: 12px;
}
.nav__brand{ display:flex; align-items:center; gap:14px; flex-shrink: 0; min-width: 0; }
.nav__brand-mark{ width:40px; height:40px; flex-shrink: 0; }
.nav__brand-name{
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:0.14em;
  color:var(--slate-900);
  text-transform:uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.nav__links{ display:flex; gap:32px; align-items:center; flex-shrink: 0; }
.nav__link{
  position:relative;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--slate-900);
  padding:8px 2px;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__cta{ flex-shrink: 0; white-space: nowrap; }
.nav__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:2px;
  height:1px;
  background:var(--slate-900);
  transform:scaleX(0);
  transform-origin:right center;
  transition: transform .4s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left center; }
.nav__link.is-active{ color:var(--sage-600); }
.nav__link.is-active::after{ transform:scaleX(1); background:var(--sage-600); }

.nav__hamburger{ display:none; }

/* Mid-range: progressively shrink brand + links so they stay on one line.
   Above 1100px we keep the inline links; below 1100px we collapse to the
   hamburger so things never touch. Two steps so the squeeze is gradual. */
@media (max-width: 1440px) and (min-width: 1281px){
  .nav__inner{ padding: 0 40px; }
  .nav__brand-name{ font-size: 19px; letter-spacing: 0.12em; }
  .nav__brand-mark{ width: 36px; height: 36px; }
  .nav__brand{ gap: 12px; }
  .nav__links{ gap: 24px; }
  .nav__link{ font-size: 12px; letter-spacing: 0.16em; }
}
@media (max-width: 1280px) and (min-width: 1101px){
  .nav__inner{ padding: 0 24px; }
  .nav__brand-name{ font-size: 16px; letter-spacing: 0.1em; }
  .nav__brand-mark{ width: 32px; height: 32px; }
  .nav__brand{ gap: 10px; }
  .nav__links{ gap: 16px; }
  .nav__link{ font-size: 11px; letter-spacing: 0.12em; }
  .nav__cta .btn{ padding: 12px 16px; font-size: 11px; }
}

@media (max-width:1100px){
  .nav__inner{ padding: 0 24px; gap: 12px; }
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  /* Below desktop, brand must yield space so the hamburger always renders.
     The desktop rule has flex-shrink: 0 — override it here. */
  .nav__brand{
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .nav__brand-name{
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  /* Force the solid white nav bar on tablet/mobile so the hamburger
     never sits on a dark hero. The !important is needed because the
     desktop .nav.is-dark:not(.is-scrolled) rule has equal specificity
     and would otherwise win on cascade order. */
  .nav, .nav.is-dark, .nav.is-dark:not(.is-scrolled){
    background:rgba(255,255,255,.96) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  }
  /* On the white tablet/mobile nav the sage logo can blend into white;
     boost contrast with a darker tint and a slightly heavier brand name. */
  .nav .nav__brand{ color: var(--sage-700) !important; }
  .nav .nav__brand img{
    filter: brightness(0.7) saturate(1.4) !important;
  }
  .nav .nav__brand-name,
  .nav.is-dark .nav__brand-name,
  .nav.is-dark:not(.is-scrolled) .nav__brand-name{
    color: var(--slate-900) !important;
    font-weight: 600;
    letter-spacing: 0.14em;
  }
  .nav.is-dark .nav__link,
  .nav.is-dark:not(.is-scrolled) .nav__link{ color:var(--slate-700) !important; }
  .nav.is-dark .nav__hamburger{ color:var(--slate-700); }
  /* Hamburger — pinned and never shrinks. flex-shrink: 0 is critical:
     it guarantees the button stays in the layout even if the brand
     grows to the edge of the viewport. position: relative + z-index
     keeps it above any absolute siblings. */
  .nav__hamburger{
    display:flex; flex-direction:column; gap:5px;
    width:32px; height:32px; align-items:center; justify-content:center;
    color:var(--slate-700) !important;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 32px;
    position: relative;
    z-index: 2;
    margin-left: auto;
  }
  .nav__hamburger span{ width:22px; height:1.5px; background:currentColor; transition:opacity .15s var(--ease); }
  /* When menu is open: hide the burger entirely (no X morph). The close
     X inside the curve panel is the user's close affordance, plus ESC. */
  .nav__hamburger{ transition: opacity .12s var(--ease); }
  .nav.is-open .nav__hamburger{ opacity: 0; pointer-events: none; }
}
/* Progressive shrinkage so brand always fits beside hamburger with
   consistent visual spacing across iPhone and Android. The brand text
   does the responsive work while padding and gap stay close to iPhone
   reference values. Calculations target: viewport - (padding × 2) -
   nav-inner gap - hamburger 32px - logo - brand-gap = brand-text width.
   iPhone 14 (390px), 18px padding, 16px gap → 286px for text — feels right.
   Galaxy S22 (360px) shrinks brand text to keep ~286 / 390 ≈ 73% ratio
   of the available right-of-brand space, so the gap reads identically.
*/
@media (max-width:600px){
  .nav__inner{ padding: 0 18px; gap: 16px; }
  .nav__brand-name{ font-size: 15px; letter-spacing: 0.1em; }
  .nav__brand-mark{ width: 32px; height: 32px; }
  .nav__brand{ gap: 8px; }
}
@media (max-width:480px){
  .nav__inner{ padding: 0 18px; gap: 16px; }
  .nav__brand-name{ font-size: 14px; letter-spacing: 0.08em; }
  .nav__brand-mark{ width: 30px; height: 30px; }
  .nav__brand{ gap: 8px; }
}
@media (max-width:400px){
  .nav__inner{ padding: 0 18px; gap: 14px; }
  .nav__brand-name{ font-size: 13px; letter-spacing: 0.06em; }
  .nav__brand-mark{ width: 28px; height: 28px; }
  .nav__brand{ gap: 7px; }
}
@media (max-width:360px){
  .nav__inner{ padding: 0 16px; gap: 12px; }
  .nav__brand-name{ font-size: 12px; letter-spacing: 0.04em; }
  .nav__brand-mark{ width: 26px; height: 26px; }
  .nav__brand{ gap: 6px; }
}
/* Last-resort: at viewports below an iPhone SE 1st-gen (320px), some
   in-app browsers (Gmail/AOL/FB webviews) may report even narrower widths.
   Hide the wordmark text so the logo + hamburger always show cleanly. */
@media (max-width:319px){
  .nav__brand-name{ display: none; }
}
/* ─── Curve menu (mobile + tablet drawer) ────────────────────────
   Full-viewport sage panel slides in from the right; the left edge
   is an SVG curve that morphs from bowed-in (closed) to flat (open).
   No scrim — the panel covers everything. The hamburger toggles it.
*/
body.is-nav-open{ overflow: hidden; }

.curve-menu{
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
  /* Match reference: slide past 100px so the curve has trail room. */
  transform: translateX(calc(100% + 100px));
  transition: transform .5s cubic-bezier(.76,0,.24,1), visibility 0s linear .5s;
  background: var(--sage-500);
}
.curve-menu.is-open{
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform .5s cubic-bezier(.76,0,.24,1), visibility 0s linear 0s;
}

/* SVG curve sits to the LEFT of the panel, off-screen. As the panel
   slides in, the curve trails behind it creating the bowed sweep. */
.curve-menu__svg{
  position: absolute;
  top: 0;
  left: -99px;
  width: 100px;
  height: 100%;
  pointer-events: none;
  display: block;
  overflow: visible;
}
.curve-menu__path{
  fill: var(--sage-500);
  stroke: none;
  /* JS animates the `d` attribute via rAF for smooth cross-browser morph. */
}

/* Inner content sits on top of the SVG, inside the panel area. */
.curve-menu__inner{
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px clamp(28px, 6vw, 80px) 40px;
  color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Hide curve menu on desktop (>=1101px) — desktop nav handles it. */
@media (min-width: 1101px){
  .curve-menu{ display: none; }
}

/* Head: brand + close */
.curve-menu__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
}
.curve-menu__brand{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s var(--ease) .12s, transform .35s var(--ease) .12s;
  /* Keep wordmark on one line. min-width:0 lets flex actually shrink the
     element below content size if needed; the inner span handles ellipsis. */
  min-width: 0;
  flex: 0 1 auto;
}
.curve-menu__brand > span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.curve-menu.is-open .curve-menu__brand{ opacity: 1; transform: none; }
.curve-menu__brand:hover{ color: rgba(255,255,255,.85); }

.curve-menu__close{
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.32);
  background: transparent;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: rotate(-90deg) scale(.8);
  flex-shrink: 0;
  transition:
    opacity .35s var(--ease) .15s,
    transform .4s cubic-bezier(.34,1.56,.64,1) .15s,
    background-color .25s var(--ease),
    border-color .25s var(--ease);
}
.curve-menu.is-open .curve-menu__close{
  opacity: 1;
  transform: rotate(0) scale(1);
}
.curve-menu__close:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
}

/* Nav: numbered list, big serif, letter-by-letter hover. */
.curve-menu__nav{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0;
  gap: 4px;
}
.curve-menu__link{
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 4vw, 44px);
  padding: 10px 0;
  text-decoration: none;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(36px, 7vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  position: relative;
}
.curve-menu.is-open .curve-menu__link{
  opacity: 1;
  transform: translateX(0);
}
.curve-menu__num{
  font-family: var(--sans);
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,.55);
  align-self: flex-start;
  padding-top: 18px;
  flex-shrink: 0;
  font-feature-settings: "tnum";
  transition: color .25s var(--ease);
}
.curve-menu__label{
  display: inline-flex;
  flex-wrap: wrap;
  font-style: italic;
  font-weight: 300;
  position: relative;
}
.curve-menu__char{
  display: inline-block;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1) var(--d, 0s),
              color .25s var(--ease);
  will-change: transform;
}
.curve-menu__link:hover .curve-menu__char{
  transform: translateY(-6px);
}
.curve-menu__link:hover .curve-menu__num,
.curve-menu__link.is-active .curve-menu__num{
  color: rgba(255,255,255,.95);
}
.curve-menu__link.is-active .curve-menu__label{
  color: #fff;
}
.curve-menu__link.is-active::after{
  content: "";
  position: absolute;
  left: clamp(56px, 6vw, 88px); /* sit past the number */
  bottom: 14px;
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,.65);
}

/* Foot: contact + legal */
.curve-menu__foot{
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.16);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s var(--ease) .25s, transform .35s var(--ease) .25s;
}
.curve-menu.is-open .curve-menu__foot{ opacity: 1; transform: none; }

.curve-menu__contact{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.curve-menu__contact a{
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.curve-menu__contact a:hover{ color: #fff; }

.curve-menu__legal{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: flex-end;
}
.curve-menu__legal-link{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.curve-menu__legal-link:hover,
.curve-menu__legal-link.is-active{ color: #fff; }

/* Tighten on small phones */
@media (max-width: 600px){
  .curve-menu__svg{ left: -80px; width: calc(100% + 80px); }
  .curve-menu__inner{ padding: 22px 28px 28px; }
  .curve-menu__nav{ padding: 16px 0; gap: 2px; }
  .curve-menu__foot{ flex-direction: column; align-items: flex-start; }
  .curve-menu__legal{ justify-content: flex-start; }
  /* Brand inside drawer: shrink so it stays beside the close button on
     one line. Pairs with the .curve-menu__brand min-width:0 + nowrap span
     so the wordmark cannot wrap. */
  .curve-menu__brand{ font-size: 13px; letter-spacing: 0.12em; gap: 10px; }
  .curve-menu__close{ width: 44px; height: 44px; }
}
@media (max-width: 480px){
  .curve-menu__link{ font-size: 40px; gap: 18px; padding: 8px 0; }
  .curve-menu__num{ padding-top: 12px; }
  .curve-menu__link.is-active::after{ left: 48px; bottom: 10px; }
  .curve-menu__inner{ padding: 20px 22px 24px; }
  .curve-menu__brand{ font-size: 12px; letter-spacing: 0.1em; gap: 8px; }
  .curve-menu__close{ width: 42px; height: 42px; }
}
@media (max-width: 380px){
  .curve-menu__inner{ padding: 18px 18px 22px; }
  .curve-menu__brand{ font-size: 11px; letter-spacing: 0.08em; gap: 8px; }
  .curve-menu__close{ width: 40px; height: 40px; }
}
@media (max-width: 340px){
  /* Drop the wordmark text inside the drawer entirely on ultra-narrow
     viewports — the logo mark alone reads as the brand and the menu
     title is implicit since the user just opened the menu. */
  .curve-menu__brand > span{ display: none; }
}


/* ─── Page transitions ─── */
/* Page is always visible. Section-level .reveal handles staggered entrance. */
.page{
  padding-top: 80px;  /* clear the always-fixed nav */
}
/* The home hero is full-bleed and handles its own offset. */
.page:has(> .hero){ padding-top: 0; }
@keyframes pageIn{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform:none; }
}

/* ─── Reveal on scroll ───
   Disabled site-wide per design direction (keep animations only on the
   home hero h1 + lede via data-reveal-words). The `.reveal` class is
   left in markup throughout the codebase but rendered as a no-op so
   nothing animates on scroll. */
.reveal,
.reveal.is-in,
.reveal.delay-1,
.reveal.delay-2,
.reveal.delay-3,
.reveal.delay-4{
  opacity: 1;
  transform: none;
  transition: none;
  transition-delay: 0s;
}

/* ─── Word-stagger text reveal ───
   Applied via data-reveal-words on any text-bearing element. A small JS
   helper splits the element's text nodes into <span class="word"> chunks
   while leaving inline elements (em, strong, span) intact. Each word
   then rises + fades in with a 40ms cascade. */
[data-reveal-words]:not([data-words-split]){ visibility: hidden; }
[data-reveal-words] .word{
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 38ms);
  will-change: opacity, transform;
}
[data-reveal-words].is-revealed .word{
  opacity: 1;
  transform: none;
}
/* Hero text gets a slightly slower, more deliberate cascade */
.hero__title[data-reveal-words] .word,
.hero__lede[data-reveal-words] .word{
  transition-duration: 1.1s;
  transition-delay: calc(var(--i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce){
  .reveal,
  [data-reveal-words] .word{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Decorative line/scribble ─── */
.scribble{
  position:absolute; pointer-events:none;
  width:520px; height:520px;
  border-radius:50%;
  border:1px solid var(--sage-500);
  opacity:.18;
}
.scribble--organic{
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  transform: rotate(-12deg);
  border-color: var(--sage-500);
}

/* ─── Hero (home) ─── */
.hero{
  position:relative;
  min-height: 94vh;
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:#1c2624;
}
@media (max-width: 900px){
  /* Leave ~22vh of next section peeking so users see scroll affordance */
  .hero{ min-height: 78vh; }
}
@media (max-width: 600px){
  .hero{ min-height: 74vh; }
}
.hero__bg{
  position:absolute; inset:0;
  /* Solid dark fill behind the video element so the moment between page
     load and the first painted video frame is just a dark wash, never a
     stray placeholder image. */
  background: #0f1c18;
}
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background:url("assets/grain.png");
  opacity:.12;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.hero__content{
  position:relative;
  z-index:2;
  width:100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 140px 64px 120px;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.hero__title{
  font-family:var(--serif);
  /* Fluid: phones ≈ 30px, tablets ≈ 36–44px, desktop caps at 56px */
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing:-0.03em;
  font-weight:400;
  color:#fff;
  max-width: 18ch;
  margin:0;
}
@media (max-width: 900px){
  .hero__title{ line-height: 1.08; letter-spacing: -0.025em; }
}
@media (max-width: 600px){
  .hero__title{ line-height: 1.12; letter-spacing: -0.02em; }
}
.hero__title em{
  font-style:italic;
  font-weight:400;
  color: var(--sage-500);
}
.hero__lede{
  font-family:var(--sans);
  /* Fluid: phones ≈ 15px, tablets ≈ 16–17px, desktop caps at 18px */
  font-size: clamp(15px, 0.5vw + 14px, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  max-width: 48ch;
  margin: 0 0 clamp(24px, 3vw, 35px);
}
@media (max-width: 600px){
  .hero__lede{ line-height: 1.55; max-width: 100%; }
}
.hero__cta-row{ margin-top:8px; display:flex; gap:14px; flex-wrap:wrap; }

/* Three pillars row beneath the CTAs */
.hero__pillars{
  list-style: none;
  margin: 36px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  max-width: 720px;
}
.hero__pillars > li{
  display: inline-flex;
  align-items: baseline;
}
.hero__pillars a{
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  color: rgba(255,255,255,.78);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 0;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.hero__pillars a:hover{
  color: #fff;
  transform: translateY(-1px);
}
.hero__pillar-num{
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  letter-spacing: 0;
  color: var(--sage-500);
  line-height: 1;
}
.hero__pillar-sep{
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.22);
}
/* Responsive sizing for the hero pillars row (I · O · U) */
@media (max-width: 900px){
  .hero__pillars{ gap: 22px; margin-top: 28px; padding-top: 20px; max-width: 100%; }
  .hero__pillars a{ font-size: 12px; letter-spacing: 0.16em; gap: 10px; }
  .hero__pillar-num{ font-size: 18px; }
}
@media (max-width: 600px){
  .hero__pillars{ gap: 14px; margin-top: 24px; padding-top: 18px; }
  .hero__pillars a{ font-size: 11px; letter-spacing: 0.14em; gap: 8px; }
  .hero__pillar-num{ font-size: 16px; }
  .hero__pillar-sep{ display: none; }
}

/* Responsive sizing for hero CTA buttons (scoped — doesn't change buttons elsewhere) */
@media (max-width: 900px){
  .hero__cta-row .btn{ font-size: 13px; padding: 12px 22px; min-height: 44px; }
}
@media (max-width: 600px){
  .hero__cta-row{ gap: 10px; width: 100%; }
  .hero__cta-row .btn{ font-size: 12px; padding: 12px 20px; letter-spacing: 0.08em; flex: 1 1 auto; min-width: 140px; min-height: 44px; }
}
.hero__scribble{
  position:absolute;
  right: -120px;
  bottom: -180px;
  width:780px; height:780px;
  pointer-events:none;
  z-index:1;
  opacity:.5;
}

@media (max-width:900px){
  .hero__content{
    padding: 100px 24px 56px;
    gap: 20px;
  }
}
@media (max-width:600px){
  .hero__content{
    padding: 92px 20px 48px;
    gap: 18px;
  }
}

/* ─── Section + headings ─── */
.section{
  padding: 120px 0;
  position:relative;
  overflow:hidden;
}
.section--cream{ background: var(--cream); }
.section--dark{ background: var(--slate-900); color: rgba(255,255,255,.86); }
.section--dark h1, .section--dark h2, .section--dark h3{ color:#fff; }

.section h2{
  font-size: clamp(40px, 5.2vw, 80px);
  line-height: 1;
  letter-spacing: -0.035em;
}

/* Legal page section headings — smaller than display h2; left-aligned, readable. */
.privacy-section__h{
  font-size: clamp(22px, 1.6vw + 14px, 32px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0 0 12px;
}
.privacy-toc__num,
.privacy-section__num{ display: none; }
.section h3{
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.section__lede{
  font-size: 18px;
  line-height: 1.7;
  color: var(--slate-700);
  max-width: 64ch;
}
.text-center .section__lede,
[style*="text-align: center"] .section__lede,
[style*="text-align:center"] .section__lede{
  margin-inline: auto;
}

/* ─── Two-col ─── */
.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items:center;
}
@media (max-width:900px){
  .two-col{ grid-template-columns: 1fr; gap: 48px; }
}
.two-col--reverse > *:first-child{ order: 2; }
@media (max-width:900px){ .two-col--reverse > *:first-child{ order: 0; } }

/* ─── Image frame (Figma "stroke + image" treatment) ─── */
.imgframe{
  position:relative;
  aspect-ratio: 5/4;
  border-radius: 8px;
  overflow:hidden;
}
.imgframe img{ width:100%; height:100%; object-fit:cover; }
.imgframe::after{
  content:"";
  position:absolute; inset:0;
  background:url("assets/grain.png");
  opacity:.08;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.imgframe--portrait{ aspect-ratio: 4/5; }
.imgframe--squareish{ aspect-ratio: 1/1; }

.imgframe--ringed{
  position:relative;
  padding: 60px;
  aspect-ratio: 1/1;
}
.imgframe--ringed .imgframe__inner{
  position:absolute;
  inset: 60px;
  border-radius: 12px;
  overflow:hidden;
}
.imgframe--ringed .imgframe__inner img{ width:100%; height:100%; object-fit:cover; }
.imgframe--ringed::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid var(--sage-500);
  transform: scale(.96);
  pointer-events:none;
}

.icon-leaf{
  display:inline-flex;
  width:64px; height:64px;
  border-radius:50%;
  background: rgba(95,132,120,0.92);
  align-items:center; justify-content:center;
  color:#fff;
}
.icon-leaf svg{ width:34px; height:34px; }

/* ─── Philosophy cards (3 sage gradient cards) ─── */
.phil-card{
  position:relative;
  flex:1;
  min-height: 480px;
  border-radius: 14px;
  overflow:hidden;
  isolation:isolate;
  padding: 48px 36px;
  display:flex; flex-direction:column;
  color:#fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(circle at 70% 80%, rgba(126,158,110,.55) 0%, rgba(126,158,110,0) 60%),
    linear-gradient(135deg, rgba(132,181,159,.95), rgba(83,109,90,.95));
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.phil-card::after{
  content:"";
  position:absolute; inset:0;
  background:url("assets/grain.png");
  opacity:.18; mix-blend-mode: overlay;
  pointer-events:none;
}
.phil-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(46,50,49,.25);
}
.phil-card__sigil{
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 140px;
  display:flex; align-items:center; justify-content:center;
  margin: 12px auto 24px;
}
.phil-card__sigil img{
  /* Always preserve natural aspect ratio of the sigil artwork. */
  max-width: 140px;
  max-height: 140px;
  width: auto;
  height: auto;
}
/* InnerStanding sigil — render as-is on the sage card. */
.phil-card:nth-child(1) .phil-card__sigil img{
  filter: none;
}
@media (max-width:600px){
  .phil-card__sigil{ min-height: 120px; }
  .phil-card__sigil img{ max-width: 120px; max-height: 120px; }
}
.phil-card__title{
  font-family:var(--serif);
  font-size: 32px;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 12px;
  color:#fff;
  text-align:center;
}
.phil-card__copy{
  font-size: 15px;
  line-height: 1.6;
  text-align:center;
  color:rgba(255,255,255,.85);
  max-width: 30ch;
  margin: 0 auto;
}
.phil-card__num{
  margin-top:auto;
  font-family:var(--serif);
  font-size: 32px;
  letter-spacing:0.02em;
  color: rgba(255,255,255,.72);
}

.phil-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
}
@media (max-width:900px){
  .phil-row{ grid-template-columns: 1fr; }
  .phil-card{ min-height: 420px; }
}

/* ─── Areas of Focus grid ─── */
.aof-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-top: 64px;
}
@media (max-width:1280px){ .aof-grid{ grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (max-width:720px){ .aof-grid{ grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width:480px){ .aof-grid{ grid-template-columns: 1fr; } }

.aof-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width: 100%;
  min-width: 0;
  height: clamp(280px, 38vw, 360px);
  border-radius: 12px;
  padding: 18px;
  overflow:hidden;
  background-color: var(--slate-900);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration:none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.aof-card__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 78%, rgba(0,0,0,0.85) 100%);
  transition: background .4s var(--ease);
}
.aof-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.aof-card:hover .aof-card__overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.7) 75%, rgba(0,0,0,0.9) 100%);
}
.aof-card__title{
  position:relative;
  font-family:var(--serif);
  font-weight:500;
  font-size: 15px;
  line-height: 1.25;
  color: #fff;
  margin: 0;
  letter-spacing:-0.005em;
  max-width: 100%;
  text-wrap: pretty;
}
@media (max-width:1280px){
  .aof-card{ height: 360px; padding: 24px; }
  .aof-card__title{ font-size: 24px; line-height: 1.12; letter-spacing: -0.015em; font-weight: 500; }
}
@media (max-width:720px){
  .aof-card{ height: 300px; padding: 20px; }
  .aof-card__title{ font-size: 20px; }
}
@media (max-width:480px){
  .aof-card{ height: 280px; padding: 24px; }
  .aof-card__title{ font-size: 24px; }
}

/* ─── Marquee strip ─── */
.marquee{
  background: var(--slate-900);
  color:#fff;
  padding: 26px 0;
  overflow:hidden;
  position:relative;
}
.marquee__track{
  display:flex; gap:64px;
  white-space:nowrap;
  width:max-content;
  animation: marquee 38s linear infinite;
}
@keyframes marquee{
  to{ transform: translateX(-50%); }
}
.marquee__item{
  font-family:var(--serif);
  font-size:28px;
  display:flex; align-items:center; gap:0;
  letter-spacing:-0.01em;
  color: rgba(255,255,255,.92);
}
.marquee__item span:not(:last-child){
  display:flex; align-items:center;
}
.marquee__item span:not(:last-child)::after{
  content:""; width:8px; height:8px; border-radius:50%;
  background: var(--sage-500);
  margin: 0 32px;
  flex-shrink: 0;
}
.marquee__item::after{
  content:""; width:8px; height:8px; border-radius:50%;
  background: var(--sage-500);
  margin-left: 32px;
  flex-shrink: 0;
}
.marquee__track{ gap: 32px; }

/* ─── CTA dark section ─── */
.cta-dark{
  position:relative;
  background:
    linear-gradient(180deg, rgba(46,50,49,.85), rgba(46,50,49,.95)),
    url("assets/clouds.jpg") center/cover no-repeat;
  color:#fff;
  padding: 140px 0;
  overflow:hidden;
}
.cta-dark::after{
  content:""; position:absolute; inset:0;
  background:url("assets/grain.png"); opacity:.1; mix-blend-mode: overlay; pointer-events:none;
}
.cta-dark h2{ color:#fff; max-width: 14ch; }
.cta-dark__inner{
  position:relative; z-index:2;
  max-width: 1440px; margin: 0 auto; padding: 0 64px;
}
@media (max-width:900px){ .cta-dark__inner{ padding: 0 24px; } }

/* ─── FAQ ─── */
.faq{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}
@media (max-width:900px){ .faq{ grid-template-columns: 1fr; gap: 40px; } }
.faq__title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px,4.6vw,72px);
  line-height: 1;
  letter-spacing:-0.03em;
  color: var(--slate-900);
}
.faq__list{ display:flex; flex-direction:column; gap:12px; }
.faq__item{
  background:#fff;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow:hidden;
  border:1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.faq__item.is-open{ border-color: var(--sage-500); }
.faq__head{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 24px;
  font-family:var(--sans);
  font-weight:600;
  font-size: 18px;
  color: var(--slate-900);
  text-align:left;
  cursor:pointer;
}
.faq__plus{
  width:28px; height:28px; flex-shrink:0;
  position:relative;
  color: var(--sage-600);
}
.faq__plus::before, .faq__plus::after{
  content:""; position:absolute; left:50%; top:50%;
  background: currentColor;
  transition: transform .35s var(--ease);
}
.faq__plus::before{ width: 14px; height:1.5px; transform: translate(-50%,-50%); }
.faq__plus::after{  width: 1.5px; height:14px; transform: translate(-50%,-50%); }
.faq__item.is-open .faq__plus::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq__body{
  max-height:0; overflow:hidden;
  transition: max-height .55s var(--ease-out);
}
.faq__body-inner{
  padding: 0 24px 22px;
  color: var(--slate-700);
  line-height: 1.65;
  font-size: 15px;
}

/* ─── Home: A Different Approach (flower image) ─── */
.home-approach__art{
  display:flex; align-items:center; justify-content:center;
  position: relative;
}
.home-approach__art img{
  display:block;
  width: 100%;
  max-width: 540px;
  height: auto;
  filter: drop-shadow(0 28px 48px rgba(46,50,49,.12));
}

/* ─── Contact hero ─── */
.contact-hero__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--sage-600);
  margin: 0;
  white-space: normal;
}
.contact-hero__title .serif-italic{
  font-style: italic;
  color: var(--slate-900);
}
@media (max-width: 600px){
  .contact-hero__title{ font-size: clamp(36px, 9vw, 48px); }
}

/* ─── Footer ─── */
.footer{
  position: relative;
  background: var(--slate-900);
  color: rgba(255,255,255,.72);
  padding: 96px 0 32px;
  overflow: hidden;
  isolation: isolate;
}
.footer::before{
  /* subtle sage glow at top edge */
  content:"";
  position:absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(132,181,159,.55), transparent);
}
.footer__grain{
  position:absolute; inset:0;
  background-image: url("assets/grain.png");
  background-size: 240px 240px;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index:-1;
}
.footer__inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 64px;
  display:grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width:1100px){
  .footer__inner{ grid-template-columns: 1fr 1fr; gap: 48px 40px; }
}
@media (max-width:600px){
  .footer__inner{ grid-template-columns: 1fr; padding: 0 28px; gap: 40px; }
}
.footer h4{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-500);
  margin: 0 0 22px;
}

/* Brand column */
.footer__brand-col{ max-width: 420px; }
.footer__brand{
  display:flex; align-items:center; gap: 14px;
  text-decoration:none;
  margin-bottom: 22px;
}
.footer__brand-name{
  font-family: var(--serif);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 600;
  letter-spacing: 0.12em;
  color:#fff;
  white-space: nowrap;
  text-transform: uppercase;
}
@media (max-width: 600px){
  .footer__brand-name{ font-size: 13px; letter-spacing: 0.1em; }
}
/* Belt-and-suspenders: kill list markers on every footer list so screen
   readers / reader-mode / older browsers never insert numbered or
   bulleted markers. */
.footer ul, .footer ol{
  list-style: none !important;
  padding: 0;
  margin: 0;
}
.footer li{ list-style: none !important; }
.footer__tag{
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,.65);
  margin: 0 0 28px;
}
.footer__sub{
  display:flex;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 5px 5px 5px 22px;
  margin-bottom: 28px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.footer__sub:focus-within{
  border-color: rgba(132,181,159,.5);
  background: rgba(255,255,255,.08);
}
.footer__sub input{
  flex:1; min-width: 0;
  background:transparent; border:0; outline:none;
  color:#fff;
  font-family: var(--sans);
  font-size: 14px;
}
.footer__sub input::placeholder{ color: rgba(255,255,255,.4); }
.footer__sub-btn{
  white-space: nowrap;
}
.footer__social{
  display:flex; gap: 10px;
}
.footer__social a{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  transition: all .3s var(--ease);
}
.footer__social a:hover{
  background: var(--sage-500);
  border-color: var(--sage-500);
  color: var(--slate-900);
  transform: translateY(-2px);
}

/* Link columns */
.footer__col ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap: 12px;
}
.footer__col a{
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255,255,255,.7);
  text-decoration:none;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
  position: relative;
}
.footer__col a:hover{
  color: #fff;
  padding-left: 8px;
}
.footer__col a::before{
  content:"";
  position:absolute;
  left:-2px; top:50%;
  width: 0; height: 1px;
  background: var(--sage-500);
  transition: width .25s var(--ease);
}
.footer__col a:hover::before{ width: 6px; }

/* Contact column */
.footer__contact li{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
}
.footer__lbl{
  display:block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 4px;
}

.footer__bottom{
  max-width: 1320px;
  margin: 80px auto 0;
  padding: 28px 64px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255,255,255,.4);
}
@media (max-width:600px){
  .footer__bottom{ flex-direction:column; gap: 8px; padding: 28px 28px 0; text-align:center; }
}

/* ─── Subscribe pill (Figma uses a sage subscribe near footer) ─── */
.subscribe-pill{
  display:flex; justify-content:center;
  padding: 64px 0;
  background: var(--white);
}
.subscribe-pill .btn{ min-width: 160px; }

/* ─── Stage cards (philosophy detail page) ─── */
.stage-card{
  position:relative;
  border-radius: 14px;
  overflow:hidden;
  isolation:isolate;
  padding: 48px 56px;
  color:#fff;
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  min-height: 280px;
  background:
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
    radial-gradient(circle at 15% 85%, rgba(126,158,110,.4), rgba(126,158,110,0) 60%),
    linear-gradient(120deg, rgba(132,181,159,.95), rgba(83,109,90,.95));
}
.stage-card::after{
  content:""; position:absolute; inset:0;
  background:url("assets/grain.png"); opacity:.18; mix-blend-mode: overlay; pointer-events:none;
}
.stage-card .stage-eyebrow{
  font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom:18px;
}
.stage-card h3{
  font-family:var(--serif);
  font-size: 38px;
  font-weight: 600;
  color:#fff;
  margin:0 0 16px;
  letter-spacing:-0.02em;
}
.stage-card h3 em{
  font-style: italic; font-size: 22px; color: rgba(255,255,255,.78); margin-left: 8px; font-weight:400;
}
.stage-card__big{
  font-family:var(--serif);
  font-size: 24px;
  line-height: 1.3;
  color:#fff;
  margin-bottom:16px;
}
.stage-card__copy{
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  max-width: 48ch;
}
.stage-card__sigil{
  display:flex; align-items:center; justify-content:center;
  width: 240px; height: 240px;
  align-self:center; justify-self:end;
}
.stage-card__sigil img{
  max-width: 240px;
  max-height: 240px;
  width: auto;
  height: auto;
}
@media (max-width: 900px){
  .stage-card{ grid-template-columns: 1fr; padding: 32px; }
  .stage-card__sigil{ width:160px; height:160px; justify-self:center; }
  .stage-card__sigil img{ max-width:160px; max-height:160px; }
}

/* ─── Tag-pill row ─── */
.tag-row{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center;
}
.tag-pill{
  font-family:var(--sans);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--sage-500);
  color: var(--sage-600);
  background: rgba(132,181,159,.06);
}
.tag-pill__sep{ color: var(--sage-600); }

/* ─── Events grid ─── */
.events-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 56px;
}
@media (max-width:900px){ .events-grid{ grid-template-columns: 1fr; } }
.event-card{
  display:flex; flex-direction:column; gap: 16px;
  transition: transform .5s var(--ease-out);
}
.event-card:hover{ transform: translateY(-4px); }
.event-card__img{
  aspect-ratio: 5/4;
  border-radius: 10px;
  overflow:hidden;
  position:relative;
}
.event-card__img img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease-out); }
.event-card:hover .event-card__img img{ transform: scale(1.04); }
.event-card__meta{
  display:flex; gap: 18px;
  font-size: 13px;
  color: var(--slate-500);
}
.event-card__meta span{ display:inline-flex; align-items:center; gap: 6px; }
.event-card__title{
  font-family:var(--serif);
  font-size: 24px;
  color: var(--sage-600);
  letter-spacing: -0.01em;
}
.event-card__copy{
  font-size: 14px; color: var(--slate-700); line-height: 1.55;
}

/* ─── Pagination dots ─── */
.pagination{
  display:flex; gap: 8px; justify-content:center; margin-top: 48px;
}
.pagination button{
  width:36px; height:36px; border-radius:50%;
  background: #fff; border: 1px solid var(--line);
  font-family: var(--sans); font-size: 13px;
  color: var(--slate-700);
  display:inline-flex; align-items:center; justify-content:center;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.pagination button:hover{ background: var(--cream); }
.pagination button.is-active{ background: var(--sage-500); color: #fff; border-color: var(--sage-500); }

/* ─── Form ─── */
.form-grid{
  display:grid; grid-template-columns: 1fr; gap: 24px;
}
.field{
  display:flex; flex-direction:column; gap:6px;
  position:relative;
}
.field label{
  font-size: 13px;
  color: var(--slate-700);
  letter-spacing: 0.04em;
}
.field input, .field textarea, .field select{
  font-family: var(--sans);
  font-size: 16px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  outline: none;
  color: var(--slate-900);
  transition: border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus{
  border-bottom-color: var(--sage-500);
}
.field textarea{ resize:vertical; min-height: 100px; }
.field select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b8a82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
  cursor: pointer;
}
.field__hint{
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-700);
}

/* ─── Intake form ─── */
.intake-form{
  display:flex; flex-direction:column; gap:18px;
  background:#fff;
  border-radius:12px;
  padding: 32px;
  box-shadow: 0 30px 80px -40px rgba(46,50,49,.45), 0 4px 12px -4px rgba(46,50,49,.15);
}
.intake-form__title{
  font-size: 22px;
  font-family: var(--sans);
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.intake-checks{ border:0; padding:0; margin:0; }
.intake-checks legend{
  font-size: 13px;
  color: var(--slate-700);
  letter-spacing: .04em;
  padding: 0;
  margin-bottom: 8px;
}
.intake-checks__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
@media (max-width: 600px){ .intake-checks__grid{ grid-template-columns: 1fr; } }
.intake-check{
  display:flex; align-items:center; gap:10px;
  font-size: 15px;
  color: var(--slate-900);
  cursor: pointer;
  padding: 6px 0;
}
.intake-check input{
  width: 18px; height: 18px;
  accent-color: var(--sage-600);
  cursor: pointer;
  flex-shrink: 0;
}
.intake-consent{
  display:flex; align-items:flex-start; gap:10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate-900);
  cursor: pointer;
  padding: 8px 0;
}
.intake-consent input{
  width: 18px; height: 18px;
  accent-color: var(--sage-600);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}
.intake-status{
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid;
}
.intake-status--ok{
  color: #2f6a52;
  background: rgba(132,181,159,.15);
  border-color: rgba(132,181,159,.45);
}
.intake-status--error{
  color: #8a3a3a;
  background: rgba(168,76,76,.08);
  border-color: rgba(168,76,76,.35);
}
.intake-safety-note{
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-700);
}
.intake-disclosure{
  margin-top: 8px;
  padding: 20px 22px;
  background: rgba(132,181,159,.08);
  border: 1px solid rgba(132,181,159,.30);
  border-radius: 10px;
}
.intake-disclosure__title{
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sage-700, var(--sage-600));
}
.intake-disclosure__copy{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-700);
}
.intake-disclosure__copy:last-of-type{ margin-bottom: 14px; }
.intake-disclosure__sub{
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-900);
}
.intake-disclosure__list{
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate-700);
}
.intake-disclosure__list li{ list-style: disc; }

/* ─── Location & Availability cards ─── */
.loc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
}
@media (max-width: 800px){
  .loc-grid{ grid-template-columns: 1fr; gap: 20px; }
}
.loc-card{
  background: #fff;
  border-radius: 12px;
  padding: 36px;
  box-shadow: 0 30px 80px -40px rgba(46,50,49,.35), 0 4px 12px -4px rgba(46,50,49,.12);
  display: flex;
  flex-direction: column;
}
.loc-card--alt{
  background: linear-gradient(180deg, rgba(132,181,159,.08), rgba(132,181,159,.02));
}
.loc-card__title{
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  margin: 0;
  color: var(--slate-900);
}
.loc-card__copy{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-700);
}
.loc-card__cta{ margin-top: auto; }
.loc-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loc-list li{
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate-700);
}
.loc-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sage-500);
}
.loc-card__divider{
  margin: 28px 0;
  height: 1px;
  background: rgba(46,50,49,.12);
}

/* ─── Waitlist inline form ─── */
.waitlist-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(132,181,159,.35);
  border-radius: 10px;
  padding: 18px 20px;
  animation: waitlist-in .25s var(--ease, ease-out);
}
@keyframes waitlist-in{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: translateY(0); }
}
.waitlist-form .field input{ padding: 10px 0; font-size: 15px; }
.waitlist-form__note{
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--slate-700);
}
.waitlist-form__actions{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.waitlist-form__cancel{
  background: transparent;
  border: 0;
  padding: 6px 4px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--slate-700);
  cursor: pointer;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.waitlist-form__cancel:hover{ color: var(--slate-900); }
.waitlist-success{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(132,181,159,.18);
  border: 1px solid rgba(132,181,159,.45);
  border-radius: 10px;
}
.waitlist-success__check{
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sage-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.waitlist-success strong{ display: block; font-size: 15px; color: var(--slate-900); }
.waitlist-success p{ margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--slate-700); }

/* ─── Calendar ─── */
.calendar{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
}
@media (max-width: 800px){
  .calendar{ grid-template-columns: 1fr; }
}
.calendar__side{
  border-right: 1px solid var(--line);
  padding-right: 24px;
  display:flex; flex-direction:column; gap: 12px;
}
@media (max-width: 800px){ .calendar__side{ border-right:0; padding-right:0; border-bottom: 1px solid var(--line); padding-bottom: 16px; } }

.calendar__therapist{
  font-family:var(--serif); font-size: 18px;
  letter-spacing: 0.02em;
}
.calendar__head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px;
  font-family: var(--sans); font-weight: 600;
}
.calendar__chev{
  width: 28px; height: 28px; border-radius: 50%; background: transparent;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background-color .25s var(--ease);
}
.calendar__chev:hover{ background: var(--cream); }
.calendar__grid{
  display:grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  font-size: 13px;
}
.calendar__day-name{ color: var(--slate-500); font-size: 11px; letter-spacing: .12em; text-align:center; padding: 4px 0; }
.calendar__day{
  aspect-ratio: 1/1;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 50%;
  cursor:pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
  font-variant-numeric: tabular-nums;
}
.calendar__day:hover{ background: var(--cream); }
.calendar__day.is-muted{ color: var(--slate-400); pointer-events:none; }
.calendar__day.is-selected{ background: var(--sage-500); color:#fff; }
.calendar__day.is-today{ outline: 1px solid var(--sage-500); }

/* ─── Pricing cards ─── */
.pricing-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 56px;
}
@media (max-width:900px){ .pricing-grid{ grid-template-columns: 1fr; } }
.price-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 40px 32px;
  display:flex; flex-direction:column;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.price-card:hover{
  border-color: var(--sage-500);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.price-card__title{
  font-family:var(--serif);
  font-size: 24px;
  color: var(--slate-900);
  margin-bottom: 8px;
}
.price-card__sub{
  color: var(--slate-500);
  font-size: 14px;
  margin-bottom: 24px;
}
.price-card__amt{
  font-family:var(--serif);
  font-size: 40px;
  color: var(--sage-600);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.price-card__per{ font-size: 14px; color: var(--slate-500); margin-bottom: 28px; }
.price-card ul{ list-style:none; padding:0; margin: 0 0 32px; display:flex; flex-direction:column; gap: 10px; font-size: 14px; color: var(--slate-700); }
.price-card ul li{ display:flex; gap: 10px; align-items:flex-start; }
.price-card ul li::before{
  content: "";
  width: 14px; height: 14px; flex-shrink:0; border-radius:50%;
  background: rgba(132,181,159,.15);
  border: 1px solid var(--sage-500);
  margin-top: 4px;
}
.price-card ul ul{ margin: 6px 0 0 24px; gap: 6px; }
.price-card ul ul li::before{ background:transparent; border:0; width:4px; height:4px; background: var(--slate-500); border-radius:50%; margin-top: 8px; }
.price-card .btn{ margin-top: auto; align-self:flex-start; }

/* ─── Mens Work hero ─── */
.mens-hero{
  position:relative;
  min-height: 88vh;
  background:
    linear-gradient(180deg, rgba(40,72,89,0.0) 0%, rgba(31,52,65,0.6) 100%),
    url("assets/men-hero.jpg") center/cover no-repeat;
  color:#fff;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.mens-hero::after{
  content:""; position:absolute; inset:0;
  background: url("assets/grain.png"); opacity:.12; mix-blend-mode:overlay; pointer-events:none;
}
.mens-hero__content{
  position:relative; z-index:2;
  max-width: 1440px; margin: 0 auto; padding: 0 64px 100px; width:100%;
}
.mens-hero h1{
  font-family:var(--serif); font-weight:400;
  font-size: clamp(48px, 8vw, 120px); line-height: 1; letter-spacing:-0.04em;
  color:#fff; max-width: 16ch;
}

/* ─── Offerings (sage cards used on Men's Work + Services hero) ─── */
.offer-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width:900px){ .offer-grid{ grid-template-columns: 1fr; } }
.offer-card{
  position:relative;
  min-height: 360px;
  border-radius: 12px; overflow:hidden;
  padding: 36px 32px;
  color:#fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.32), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 70% 90%, rgba(126,158,110,.55), rgba(126,158,110,0) 60%),
    linear-gradient(135deg, rgba(132,181,159,.95), rgba(83,109,90,.95));
  display:flex; flex-direction:column;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.offer-card::after{
  content:""; position:absolute; inset:0;
  background:url("assets/grain.png"); opacity:.16; mix-blend-mode: overlay; pointer-events:none;
}
.offer-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(46,50,49,.25);
}
.offer-card__title{
  font-family:var(--serif); font-size:28px; line-height:1.1; color:#fff; max-width: 14ch;
  margin-bottom: 56px;
}
.offer-card__copy{ color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.5; max-width: 26ch; }
.offer-card__num{
  margin-top:auto;
  font-family: var(--serif);
  font-size: 26px;
  color: rgba(255,255,255,.78);
}

/* ─── Tabbed list (who I work with) ─── */
.list-rows{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.list-row{
  display:grid; grid-template-columns: 1fr; gap:24px;
  padding: 22px 8px; align-items:center;
  border-bottom:1px solid var(--line);
  transition: background-color .3s var(--ease), padding .3s var(--ease);
}
.list-row:hover{
  background: var(--cream-2);
  padding-left: 16px;
}
.list-row__num{
  font-family: var(--serif);
  font-size: 22px;
  color: var(--sage-600);
}
.list-row__text{
  font-family: var(--sans);
  font-size: 17px;
  color: var(--slate-900);
}

/* ─── Testimonial / quote / dark CTA used multiple places ─── */
.quote{
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 22ch;
}

/* ─── Logos strip (insurance) ─── */
.logos{
  display:flex; gap: 56px; flex-wrap:wrap;
  align-items:center; justify-content:center;
  margin-top: 36px;
  opacity:.55;
}
.logos__item{
  font-family: var(--serif); font-size: 22px; color: var(--slate-700);
  letter-spacing: .04em;
}

/* ─── Vertical timeline (about / philosophy) ─── */
.timeline{
  position:relative;
  padding-left: 72px;
}
.timeline::before{
  content:""; position:absolute;
  left: 28px; top: 0; bottom: 0;
  width: 1px; background: var(--sage-500); opacity:.4;
}
.timeline__node{
  position:relative;
  margin-bottom: 56px;
}
.timeline__node::before{
  content:""; position:absolute; left:-58px; top:8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--sage-500);
  outline: 4px solid var(--cream);
}

/* ─── Misc helpers ─── */
.flex-center{ display:flex; align-items:center; justify-content:center; }
.text-center{ text-align:center; }
.mt-32{ margin-top:32px; }
.mt-48{ margin-top:48px; }
.mt-64{ margin-top:64px; }
.mb-16{ margin-bottom:16px; }
.muted{ color: var(--slate-500); }
.serif-italic{ font-style: italic; font-family: var(--serif); color: var(--sage-600); font-weight: 400; }

/* selection */
::selection{ background: var(--sage-500); color:#fff; }

/* ──────────────────────────────────────────────────────────────────
   IOU Framework page
   ────────────────────────────────────────────────────────────────── */
.fw-hero{ padding: 160px 0 80px; position:relative; }
.fw-hero__grid{
  display:grid; grid-template-columns: 1fr auto;
  gap: 60px; align-items:end;
}
.fw-hero__title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 9vw, 152px);
  line-height: .92; letter-spacing: -0.045em;
  color: var(--slate-900); margin: 0;
}
.fw-hero__sub{
  max-width: 320px;
  color: var(--slate-500);
  font-size: 20px; line-height: 1.5;
  padding-bottom: 14px;
}
.fw-hero__rule{
  height: 1px; background: var(--line);
  max-width: var(--max); margin: 60px auto 0;
}
@media (max-width: 900px){
  .fw-hero{ padding: 130px 0 48px; }
  .fw-hero__grid{ grid-template-columns: 1fr; gap: 24px; }
  .fw-hero__sub{ padding-bottom: 0; }
}

.fw-section-h{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 1.02; letter-spacing: -0.035em;
  color: var(--slate-900); margin: 0;
}
.fw-section-h--mid{ font-size: clamp(32px, 4vw, 56px); }

.fw-overview__grid{
  display:grid; grid-template-columns: 1.2fr 1fr;
  gap: 80px; align-items:center;
}
.fw-overview__lede{
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.6; color: var(--slate-700);
  font-weight: 500; letter-spacing: -0.01em;
  margin: 24px 0 0;
}
.fw-overview__block{ margin-top: 28px; }
.fw-overview__lbl{
  font-family: var(--sans); font-weight: 600;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage-700); margin-bottom: 10px;
}
.fw-overview__block ul{ list-style:none; padding:0; margin:0; }
.fw-overview__block li{
  position: relative; padding-left: 22px;
  font-size: 18px; line-height: 1.7; color: var(--slate-700);
}
.fw-overview__block li::before{
  content:""; position:absolute; left:0; top: 13px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage-500);
}
.fw-overview__block p{
  font-size: 18px; line-height: 1.7; color: var(--slate-700);
  margin: 0;
}
.fw-overview__art img{
  display:block; width:100%; height:auto;
  border-radius: 16px;
  filter: drop-shadow(0 24px 40px rgba(46,50,49,.12));
}
@media (max-width: 900px){
  .fw-overview__grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* Stages */
.fw-stages{ display:flex; flex-direction:column; gap: 48px; }
.fw-stage{
  position: relative;
  border-radius: 24px; overflow: hidden;
  min-height: 540px;
  isolation: isolate;
}
.fw-stage__bg{
  position:absolute; inset:0;
  background-image: url('assets/framework-stage-bg.jpg');
  background-size: cover; background-position: center;
  z-index: 0;
}
.fw-stage__bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(46,80,68,.7) 0%, rgba(46,80,68,.85) 100%);
}
.fw-stage__noise{
  position:absolute; inset:0;
  background: url('assets/grain.png');
  opacity: .08; mix-blend-mode: overlay; z-index: 1;
  pointer-events: none;
}
.fw-stage__inner{
  position: relative; z-index: 2;
  padding: 64px 72px;
  color: #fff;
  display: flex; flex-direction: column; gap: 56px;
}
.fw-stage__head{
  display: grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: center;
}
.fw-stage__eyebrow{
  font-family: var(--sans); font-weight: 700;
  font-size: 14px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.78); margin-bottom: 18px;
}
.fw-stage__title{
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.1; letter-spacing: -0.025em;
  color: #fff; margin: 0;
}
.fw-stage__sub{
  font-weight: 400; font-style: italic;
  font-size: .72em; color: rgba(255,255,255,.72);
}
.fw-stage__copy{
  margin-top: 18px; max-width: 60ch;
  font-size: 18px; line-height: 1.6;
  color: rgba(255,255,255,.88);
}
.fw-stage__sigil{
  display:flex; align-items:center; justify-content:center;
  width: 200px; height: 200px;
  opacity: .9;
}
.fw-stage__sigil img{
  max-width: 180px; max-height: 180px;
  width:auto; height:auto;
  filter: brightness(0) invert(1);
}
.fw-stage__cols{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.fw-stage__lbl{
  font-family: var(--sans); font-weight: 700;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.fw-stage__cols ul{ list-style:none; padding:0; margin:0; }
.fw-stage__cols li{
  position: relative; padding-left: 20px;
  font-size: 16px; line-height: 1.7;
  color: rgba(255,255,255,.88);
}
.fw-stage__cols li::before{
  content:""; position:absolute; left: 0; top: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.6);
}
@media (max-width: 1000px){
  .fw-stage__inner{ padding: 40px 32px; gap: 36px; }
  .fw-stage__head{ grid-template-columns: 1fr; }
  .fw-stage__sigil{ width:140px; height:140px; }
  .fw-stage__cols{ grid-template-columns: 1fr; gap: 32px; }
}

/* Process */
.fw-process__grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.fw-process__art img{
  display:block; width:100%; height:auto;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.fw-phases{ list-style:none; padding:0; margin: 36px 0 0;
  display:flex; flex-direction:column; gap: 0;
}
.fw-phase{
  display: grid; grid-template-columns: auto 1fr;
  gap: 24px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.fw-phase:last-child{ border-bottom: 1px solid var(--line); }
.fw-phase__num{
  font-family: var(--serif); font-size: 14px;
  letter-spacing: .18em; color: var(--sage-700);
}
.fw-phase__txt{ display:flex; flex-direction:column; gap: 4px; }
.fw-phase__title{
  font-family: var(--serif); font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em; color: var(--slate-900);
}
.fw-phase__sub{
  font-family: var(--sans); font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage-700);
}
@media (max-width: 900px){
  .fw-process__grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* Cycle */
.fw-cycle{
  display:flex; flex-wrap:wrap; gap: 14px;
  align-items: center; justify-content: center;
  margin: 32px auto 0;
  max-width: 100%;
}
.fw-cycle__pill{
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: .04em; color: var(--slate-700);
  background: rgba(255,255,255,.5);
}
.fw-cycle__arrow{
  color: var(--sage-600); font-size: 18px;
}

/* Wheel */
.fw-wheel__grid{
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 80px; align-items: center;
}
.fw-wheel__cols{
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 40px; align-items: start;
  margin-top: 32px;
}
.fw-wheel__divider{
  width: 1px; background: var(--line);
  align-self: stretch;
}
.fw-wheel__lbl{
  font-family: var(--serif); font-size: 26px;
  letter-spacing: -0.02em; color: var(--slate-900);
  margin-bottom: 16px;
}
.fw-wheel__cols ul,
.fw-sigil__cols ul{
  list-style: none; padding: 0; margin: 0;
}
.fw-wheel__cols li,
.fw-sigil__cols li{
  position: relative; padding-left: 22px;
  font-size: 17px; line-height: 1.7; color: var(--slate-700);
}
.fw-wheel__cols li::before,
.fw-sigil__cols li::before{
  content:""; position:absolute; left:0; top: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage-500);
}
.fw-wheel__art{ padding: 0 24px; }
@media (max-width: 1000px){
  .fw-wheel__grid{ grid-template-columns: 1fr; gap: 40px; }
  .fw-wheel__cols{ grid-template-columns: 1fr; gap: 24px; }
  .fw-wheel__divider{ display:none; }
}

/* Hierarchical bar */
.fw-hier__top{
  display:grid; grid-template-columns: 1.4fr 1fr;
  gap: 60px; align-items: end;
  margin-bottom: 48px;
}
.fw-hier__sub{
  font-family: var(--sans); font-weight: 500;
  font-size: 20px; color: var(--slate-700);
  margin-top: 14px;
}
.fw-hier__rt ul{ list-style:none; padding:0; margin: 8px 0 0; }
.fw-hier__rt li{
  font-size: 17px; line-height: 1.9; color: var(--slate-900);
  position: relative; padding-left: 22px;
}
.fw-hier__rt li::before{
  content:""; position:absolute; left:0; top: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage-500);
}
.fw-hier__rail{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.fw-hier__seg{
  padding: 28px 28px;
  display: flex; flex-direction: column; gap: 8px;
  border-radius: 4px;
  color: #fff;
}
.fw-hier__seg--1{ background: var(--sage-300); color: var(--slate-900); }
.fw-hier__seg--2{ background: var(--sage-500); }
.fw-hier__seg--3{ background: var(--slate-900); }
.fw-hier__seg-lbl{
  font-family: var(--sans); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase;
  opacity: .82;
}
.fw-hier__seg-name{
  font-family: var(--serif); font-size: 26px;
  letter-spacing: -0.02em;
}
@media (max-width: 800px){
  .fw-hier__top{ grid-template-columns: 1fr; gap: 24px; }
  .fw-hier__rail{ grid-template-columns: 1fr; }
}

/* Master sigil section */
.fw-sigil__grid{
  display: grid; grid-template-columns: auto 1fr;
  gap: 100px; align-items: center;
}
.fw-sigil__art{
  display:flex; align-items:center; justify-content:center;
  width: 460px;
}
.fw-sigil__cols{
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 44px; align-items: start;
  margin-top: 32px;
}
@media (max-width: 1100px){
  .fw-sigil__grid{ grid-template-columns: 1fr; gap: 48px; }
  .fw-sigil__art{ width: 100%; max-width: 320px; margin: 0 auto; }
  .fw-sigil__cols{ grid-template-columns: 1fr; gap: 24px; }
  .fw-sigil__cols .fw-wheel__divider{ display:none; }
}

/* Distinctiveness */
.fw-distinct__grid{
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 80px; align-items: center;
}
.fw-distinct__cols{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; margin-top: 32px;
}
.fw-distinct__cols ul{ list-style:none; padding:0; margin:0; }
.fw-distinct__cols li{
  position: relative; padding-left: 22px;
  font-size: 17px; line-height: 1.8; color: var(--slate-700);
  margin-bottom: 12px;
}
.fw-distinct__cols li::before{
  content:""; position:absolute; left:0; top: 13px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage-500);
}
@media (max-width: 900px){
  .fw-distinct__grid{ grid-template-columns: 1fr; gap: 48px; }
  .fw-distinct__cols{ grid-template-columns: 1fr; gap: 16px; }
}

/* Applications */
.fw-apps__row{
  display:flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin-top: 36px;
}
.fw-apps__pill{
  padding: 12px 22px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}

/* Summary */
.fw-summary__big{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.4; letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 28px 0;
}
.fw-ip{
  margin-top: 80px; padding: 48px;
  background: #fff; border-radius: 18px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.fw-ip__head h3{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em; color: var(--slate-900);
  margin: 0 0 8px;
}
.fw-ip__head p{
  color: var(--slate-700); margin: 0;
}
.fw-ip__row{
  display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: center;
  margin: 24px 0;
}
.fw-ip__pill{
  padding: 10px 20px; border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--slate-900);
}
.fw-ip__line{
  font-style: italic; color: var(--slate-500);
  font-size: 15px; margin: 12px 0 0;
}


/* ─── Services page (glass-card sections on dark photos) ─── */
.services-page{ padding-top: 0; }

.services-top{
  padding: 160px 0 80px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.services-top__grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: end;
}
.services-top__title{
  font-family: var(--serif);
  font-size: clamp(64px, 9vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 400;
  color: var(--slate-900);
  margin: 0;
}
.services-top__title em{
  font-style: italic;
  color: var(--sage-600);
}
.services-top__lede{
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--slate-700);
  max-width: 46ch;
  margin: 0 0 12px;
}

@media (max-width: 900px){
  .services-top{ padding: 140px 0 60px; }
  .services-top__grid{ grid-template-columns: 1fr; gap: 28px; align-items: start; }
}

/* ── Each service section ── */
.svc-section{
  position: relative;
  padding: 120px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}
.svc-section + .svc-section{
  padding-top: 80px;
}
.svc-section__noise{
  position: absolute; inset: 0;
  background-image: url("assets/services-noise.png");
  background-size: auto;
  mix-blend-mode: overlay;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
.svc-section .container{ position: relative; z-index: 1; }

/* Glass card */
.svc-card{
  position: relative;
  background: rgba(255,255,255,0.11);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 56px 64px 48px;
  color: #fff;
  max-width: 1300px;
  margin: 0 auto;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}
.svc-card__head{
  text-align: center;
  margin-bottom: 40px;
}
.svc-card__title{
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #fff;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.svc-card__blurb{
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  max-width: 70ch;
  margin: 0 auto;
}

.svc-card__cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 24px;
}
.svc-col__title{
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 400;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.svc-col__intro{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0 0 16px;
}
.svc-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.svc-list li{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}
.svc-check{
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.svc-emph{
  font-style: italic;
  color: var(--sage-500);
  font-weight: 500;
}

.svc-card__foot{
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.svc-card__hint{
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.62);
}

@media (max-width: 980px){
  .svc-section{ padding: 80px 0; }
  .svc-card{ padding: 40px 28px 32px; }
  .svc-card__cols{ grid-template-columns: 1fr; gap: 32px; }
  .svc-card__head{ margin-bottom: 28px; }
  .svc-col__title{ font-size: 24px; }
  .svc-card__foot{ flex-direction: column; align-items: stretch; text-align: center; }
}


/* ─── About / Meet Gene, editorial sticky-portrait layout ─── */
.about-meet{ overflow: visible; padding-top: 140px; }
.about-meet__grid{
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  grid-template-areas:
    "media head"
    "media body";
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 24px;
  align-items: start;
}
.about-meet__head{ grid-area: head; }
.about-meet__media{ grid-area: media; }
.about-meet__body{ grid-area: body; }
.about-meet__media{
  position: sticky;
  top: 110px;
  align-self: start;
}
.about-meet__portrait{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(46,50,49,.45), 0 4px 12px -4px rgba(46,50,49,.15);
}
.about-meet__portrait::before{
  content: "";
  position: absolute;
  inset: -10px -10px auto auto;
  width: 64px; height: 64px;
  border-top: 1px solid var(--sage-500);
  border-right: 1px solid var(--sage-500);
  opacity: .7;
  pointer-events: none;
}
.about-meet__portrait::after{
  content: "";
  position: absolute;
  inset: auto auto -10px -10px;
  width: 64px; height: 64px;
  border-bottom: 1px solid var(--sage-500);
  border-left: 1px solid var(--sage-500);
  opacity: .7;
  pointer-events: none;
}
.about-meet__meta{
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(46,50,49,.15);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-meet__meta > div{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.about-meet__meta dt{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-700);
}
.about-meet__meta dd{
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--slate-900);
  font-style: italic;
}
.about-meet__title{
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.about-meet__body .section__lede:first-of-type{ margin-top: 24px; }

@media (max-width: 900px){
  .about-meet{ padding-top: 56px; padding-bottom: 64px; }
  .about-meet__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "body";
    column-gap: 0;
    row-gap: 24px;
  }
  .about-meet__head{ text-align: center; }
  .about-meet__media{
    position: static;
    max-width: 420px;
    margin: 0 auto;
  }
  .about-meet__title{ text-align: center; }
  .about-meet__body{ text-align: left; }
  /* First paragraph after the body (no longer sits under title here) loses its top margin */
  .about-meet__body .section__lede:first-child{ margin-top: 0; }
}
@media (max-width: 600px){
  .about-meet{ padding-top: 40px; padding-bottom: 56px; }
  .about-meet__grid{ row-gap: 20px; }
}

/* ─── Pricing section (About) ─── */
.pricing-section{ padding: 120px 0; }
.pricing-section__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 8px 0 18px;
}
.pricing-section__sub{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-700);
  margin: 0;
}
.pricing-section__note{
  text-align: center;
  margin: 48px auto 0;
  max-width: 560px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--slate-500);
  font-style: italic;
}

.pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 64px;
  align-items: stretch;
}

.pricing-card{
  background: #fff;
  border-radius: 8px;
  padding: 44px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 1px 0 rgba(46,50,49,.04), 0 18px 40px -28px rgba(46,50,49,.12);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  min-height: 380px;
}
.pricing-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(46,50,49,.04), 0 26px 50px -28px rgba(46,50,49,.18);
}

.pricing-card__head{ display: flex; flex-direction: column; gap: 10px; }
.pricing-card__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--slate-900);
}
.pricing-card__title em{ color: var(--slate-900); }
.pricing-card__sub{
  font-family: var(--sans);
  font-size: 15px;
  color: var(--slate-700);
  margin: 0;
  line-height: 1.5;
}
.pricing-card__rule{
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}
.pricing-card__items{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.pricing-card__items li{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
}
.pricing-card__label{
  font-family: var(--sans);
  font-size: 15px;
  color: var(--slate-700);
  line-height: 1.4;
}
.pricing-card__price{
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--sage-600);
  white-space: nowrap;
}

/* Pill outlined book button */
.btn.btn-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid var(--slate-900);
  background: transparent;
  color: var(--slate-900);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease);
  margin-top: 8px;
}
.btn.btn-pill:hover{
  background: var(--slate-900);
  color: #fff;
}

@media (max-width: 1000px){
  .pricing-grid{ grid-template-columns: 1fr; gap: 20px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .pricing-card{ min-height: 0; }
}

/* ─── Disclaimer page ─── */
.disclaimer-hero__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
}
.disclaimer-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 40px;
  align-items: stretch;
}
.disclaimer-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: border-color .25s var(--ease), box-shadow .35s var(--ease);
}
.disclaimer-card:hover{
  border-color: rgba(46,50,49,.18);
  box-shadow: 0 1px 0 rgba(46,50,49,.04), 0 22px 50px -32px rgba(46,50,49,.18);
}
.disclaimer-card--emergency{
  background: #fcf3ef;
  border-color: rgba(196, 92, 64, .22);
}
.disclaimer-card--emergency:hover{
  border-color: rgba(196, 92, 64, .4);
}
.disclaimer-card__head{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.disclaimer-card__chip{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(196, 92, 64, .12);
  color: rgb(170, 75, 50);
  border: 1px solid rgba(196, 92, 64, .25);
}
.disclaimer-card__chip--neutral{
  background: rgba(132, 181, 159, .14);
  color: var(--sage-600);
  border-color: rgba(132, 181, 159, .35);
}
.disclaimer-card__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--slate-900);
}
.disclaimer-card__rule{
  height: 1px;
  background: var(--line);
  margin: 4px 0 6px;
}
.disclaimer-card--emergency .disclaimer-card__rule{
  background: rgba(196, 92, 64, .18);
}
.disclaimer-card__copy{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--slate-700);
  margin: 0;
}
.disclaimer-card__copy strong{ color: var(--slate-900); }

.disclaimer-resources{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.disclaimer-resources li{
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(196, 92, 64, .2);
  border-radius: 8px;
}
.disclaimer-resources__num{
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.01em;
  color: rgb(170, 75, 50);
  text-align: center;
  line-height: 1;
  font-weight: 500;
}
.disclaimer-resources__num--word{
  font-style: italic;
  font-size: 24px;
}
.disclaimer-resources__label{
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--slate-700);
}

.disclaimer-foot{
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.disclaimer-foot p{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-700);
  margin: 0;
}

@media (max-width: 900px){
  .disclaimer-grid{ grid-template-columns: 1fr; }
  .disclaimer-card{ padding: 36px 28px 32px; }
}

/* ─── Emergency banner (contact + footer) ─── */
.emergency-banner{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 22px;
  background: #fcf3ef;
  border: 1px solid rgba(196, 92, 64, .22);
  border-left: 3px solid rgb(196, 92, 64);
  border-radius: 6px;
  margin-top: 32px;
}
.emergency-banner__icon{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(196, 92, 64, .14);
  color: rgb(170, 75, 50);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.emergency-banner__body{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-700);
}
.emergency-banner__body strong{ color: var(--slate-900); }
.emergency-banner__body a{
  color: var(--sage-600);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.emergency-banner__body a:hover{ color: var(--slate-900); }

/* ─── Footer expanded copyright + emergency ─── */
.footer__bottom{
  display: block;
  text-align: left;
  padding: 28px 64px 32px;
}
.footer__copyright{
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
  margin: 0 0 18px;
  max-width: 100%;
}
.footer__emergency{
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-left: 2px solid rgb(196, 92, 64);
  border-radius: 4px;
  background: rgba(255,255,255,.02);
}
.footer__emergency strong{ color: #fff; }
.footer__emergency a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4);
  margin-left: 4px;
  white-space: nowrap;
}
.footer__emergency a:hover{ color: #fff; border-bottom-color: #fff; }
.footer__emergency-tag{
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(232, 144, 112);
  margin-right: 10px;
  padding: 2px 8px;
  border: 1px solid rgba(232, 144, 112, .35);
  border-radius: 999px;
  vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────────────
   Mobile + tablet responsive hardening (added 2026-04-27)
   - Forms and cards never bleed past viewport
   - Long emails wrap instead of overflowing
   - Section/display headers shrink on mobile site-wide
   - Beat inline fontSize values via !important media-query overrides
   ────────────────────────────────────────────────────────────────── */

/* Belt + suspenders: prevent horizontal overflow at the document level */
html{ overflow-x: clip; }
@supports not (overflow-x: clip){
  html{ overflow-x: hidden; }
}

/* Allow long unbreakable strings (emails, URLs) to wrap inside cards */
.contact-info,
.contact-info a,
.contact-info span,
.contact-info strong{
  min-width: 0;
  max-width: 100%;
}
.contact-info a strong,
.contact-info a span{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Form inputs — explicit width safety so they fit their card.
   Excludes checkbox/radio so labels don't get squeezed off-screen. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea,
.field select{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Tablet (601–900) — tighten card paddings */
@media (max-width: 900px){
  .intake-form{ padding: 28px 22px; }
  .loc-card{ padding: 30px 26px; }
  .intake-disclosure{ padding: 18px 18px; }
  .contact-info{ padding: 28px 22px !important; gap: 22px !important; }
}

/* Mobile ≤600px — main responsive pass */
@media (max-width: 600px){
  .container{ padding: 0 20px; }

  /* Card paddings shrink so the content room nearly doubles */
  .intake-form{ padding: 22px 16px; gap: 16px; border-radius: 10px; }
  .loc-card{ padding: 22px 18px; border-radius: 10px; }
  .loc-card--alt .loc-card__divider{ margin: 22px 0; }
  .intake-disclosure{ padding: 16px 14px; }
  .contact-info{ padding: 22px 18px !important; gap: 18px !important; border-radius: 10px; }
  .waitlist-form{ padding: 14px 14px; }
  .emergency-banner{ padding: 14px 16px; gap: 12px; margin-top: 20px; }
  .emergency-banner__body{ font-size: 13.5px; line-height: 1.55; }

  /* Section + hero padding shrink */
  .section{ padding: 64px 0; }
  /* Override inline 140px hero top padding on contact page */
  .page > section[style*="140px"]{
    padding-top: 96px !important;
    padding-bottom: 28px !important;
  }
  .two-col{ gap: 28px !important; }

  /* Email block — tighter type so 33-char address fits */
  .contact-info a strong{ font-size: 13.5px; letter-spacing: -.005em; }
  .contact-info a span:first-of-type{ font-size: 10.5px; }

  /* Site-wide header shrink on mobile (overrides inline fontSize via !important) */
  .page h1,
  .contact-hero__title{
    font-size: clamp(32px, 8.5vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }
  .section h2,
  .svc-card__title,
  .services-top__title,
  #intake-form > .container > h2{
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }
  .section h3{
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.18 !important;
  }

  /* FAQ tighter */
  .faq__head{ padding: 18px 16px; font-size: 16px; }
  .faq__body-inner{ padding: 0 16px 18px; }
}

/* Very narrow ≤380px (iPhone SE etc.) */
@media (max-width: 380px){
  .container{ padding: 0 16px; }
  .intake-form{ padding: 18px 14px; }
  .loc-card{ padding: 20px 16px; }
  .contact-info{ padding: 20px 16px !important; }
  .contact-info a strong{ font-size: 13px; }
}