/* ==========================================================================
   Mana Health and Wellness — site stylesheet
   One sheet for every page. Tokens first, then base, then components.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  /* ground */
  --cream:#F6F1E7;
  --paper:#FFFDF8;
  --sand:#ECE2CE;
  --line:#DED2B8;
  --line-2:#DBCEB2;

  /* ink */
  --ink:#2A2420;          /* 13.6:1 on cream */
  --ink-soft:#57504A;     /*  6.9:1 on cream */
  --ink-mute:#6E6459;     /*  4.9:1 on cream */

  /* brand */
  --forest:#14351F;       /* 12.0:1 on cream */
  --forest-deep:#0F2717;
  --green:#266A0F;        /*  5.9:1 on cream */
  --green-dark:#1B4D0C;
  --red:#DF2325;          /*  4.8:1 with white — buttons + script only */
  --red-deep:#B81A1C;     /*  5.8:1 on cream — red TEXT uses this */
  --red-press:#A81618;
  --gold:#FFC00D;         /*  8.2:1 on forest — never text on cream */

  /* on dark */
  --on-dark:#D9E3D3;
  --on-dark-mute:#C6D4BF;
  --on-dark-faint:#8FA888;
  --on-dark-line:rgba(255,255,255,.18);

  /* confirm blocks */
  --confirm-bg:#FBF3DF;
  --confirm-line:#C7902E;
  --confirm-ink:#6B5219;
  --confirm-label:#8A6A1E;

  /* type */
  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-script:'Allura',cursive;

  --fs-h1:clamp(38px,4.4vw,64px);
  --fs-h2:clamp(29px,3.1vw,42px);
  --fs-h2-lg:clamp(31px,3.4vw,46px);
  --fs-h3:clamp(21px,1.8vw,26px);
  --fs-h4:clamp(19px,1.4vw,23px);
  --fs-lead:clamp(18px,1.35vw,20px);
  --fs-body:17px;
  --fs-small:15px;
  --fs-eyebrow:13px;

  /* layout */
  --maxw:1200px;
  --gutter:40px;
  --sp-major:clamp(72px,8vw,120px);
  --sp:clamp(56px,6.5vw,96px);
  --sp-tight:clamp(40px,4.5vw,72px);

  /* form */
  --radius-card:8px;
  --radius-panel:14px;
  --shadow:0 20px 40px -28px rgba(20,53,31,.5);
  --header-h:104px;
  /* --logo-h drives BOTH the header and footer marks, so the two can never drift
     apart. Raised to 80px so the header matches the footer's presence; the
     ceiling is the 1200px breakpoint, where 253px of logo + nav + call button
     leaves 20px of slack. */
  --logo-h:80px;
  --header-h-compact:84px;
  --logo-h-compact:64px;
  --util-h:44px;
}

@media (max-width:1024px){ :root{ --header-h:80px; --logo-h:64px; --header-h-compact:68px; --logo-h-compact:52px; --util-h:40px; } }
@media (max-width:768px){  :root{ --gutter:24px; } }
/* the lockup is 3.16:1, so at 320px the logo has to give way to the two 44px
   action buttons — 158px + 16 gap + 98 actions = 272 against 280 available */
@media (max-width:430px){  :root{ --gutter:20px; --logo-h:50px; --logo-h-compact:42px; } }

/* ----------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h-compact) + 28px);}
body{
  margin:0;
  /* reserved space for the fixed topbar. --topbar-h is measured by site.js so it
     tracks the real box (border included, and any wrap the utility bar takes);
     the calc is only the pre-JS fallback. */
  padding-top:var(--topbar-h, calc(var(--util-h) + var(--header-h) + 1px));
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  color:var(--forest);
  letter-spacing:-.018em;
  line-height:1.12;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);letter-spacing:-.022em;line-height:1.06;}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);font-weight:600;line-height:1.25;}
h4{font-size:var(--fs-h4);font-weight:600;line-height:1.3;}
p{margin:0;text-wrap:pretty;}
p + p{margin-top:16px;}
img{display:block;max-width:100%;height:auto;}
ul,ol{margin:0;}
a{color:var(--green-dark);}
a:hover{color:var(--red-deep);}
:focus-visible{outline:2px solid var(--red-deep);outline-offset:2px;border-radius:2px;}
::selection{background:var(--gold);color:var(--ink);}
button{font:inherit;color:inherit;}

.wrap{max-width:calc(var(--maxw) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter);}
.narrow{max-width:720px;}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:200;
  background:var(--red);color:#fff;font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:0 0 8px 8px;text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:0;color:#fff;}

.eyebrow{
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-eyebrow);
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-dark);margin:0;
}
.eyebrow--gold{color:var(--gold);}
.eyebrow--red{color:var(--red-deep);}
.script{font-family:var(--font-script);color:var(--red);font-weight:400;}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-soft);}
.muted{color:var(--ink-soft);}
.small{font-size:var(--fs-small);line-height:1.55;}

.section{padding-block:var(--sp);}
.section--major{padding-block:var(--sp-major);}
.section--paper{background:var(--paper);border-top:1px solid var(--line);}
.section--sand{background:var(--sand);}
.section--forest{background:var(--forest);color:var(--on-dark);}
/* List h1 as well as h2/h3: a section is not guaranteed to be mid-page. The
   same block is a section on the homepage and a page hero on lokahi.html. */
.section--forest h1,.section--forest h2,.section--forest h3{color:#fff;}
/* Container rules below style PROSE paragraphs. `.eyebrow` and `.confirm` are
   also <p> elements, so these must exclude them. Do NOT add more :not() classes
   here — each one raises this rule's specificity and silently outranks the
   light-island overrides further down (that is how the contact form's privacy
   notices went invisible). Give a new utility its own scoped rule instead. */
.section--forest p:not(.eyebrow):not(.confirm){color:var(--on-dark);}
.section--forest a{color:var(--gold);}
/* Buttons and pill links carry their own colour by role. The blanket link rule
   above out-ranks the .btn-- modifiers (0,2,0 vs 0,1,0), so it repaints them
   gold unless each is restated here — the third instance of this same trap. */
.section--forest a.btn--primary,
.section--forest a.btn--primary:hover{color:#fff;}
.section--forest a.btn--onforest,
.section--forest a.btn--onforest:hover{color:#fff;}
.section--forest a.btn--outline{color:#fff;border-color:rgba(255,255,255,.55);}
.section--forest a.btn--gold{color:#2e2b25;}
.section--forest a.link-arrow--onforest{color:#fff;}
.section--forest a.link-arrow--onforest:hover{color:var(--gold);}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding-inline:26px;border-radius:999px;border:1.5px solid transparent;
  font-family:var(--font-body);font-weight:600;font-size:16px;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn svg{flex:none;}
.btn--primary{background:var(--red);color:#fff;}
.btn--primary:hover{background:var(--red-press);color:#fff;}
.btn--outline{background:transparent;color:var(--forest);border-color:var(--forest);}
.btn--outline:hover{background:var(--forest);color:var(--cream);}
.btn--gold{background:var(--gold);color:var(--forest);}
.btn--gold:hover{background:#fff;color:var(--forest);}
.btn--onforest{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.btn--onforest:hover{background:rgba(255,255,255,.12);color:#fff;}
.btn--lg{height:56px;padding-inline:28px;}
.btn--block{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

.link-arrow{
  display:inline-block;font-weight:600;font-size:16px;color:var(--red-deep);
  text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;
}
.link-arrow:hover{color:var(--forest);}
.link-arrow--onforest{color:#fff;border-bottom-color:rgba(255,255,255,.5);}
.link-arrow--onforest:hover{color:var(--gold);}

@media (max-width:560px){
  .btn{width:100%;height:56px;}
  .btn-row{flex-direction:column;align-items:stretch;gap:12px;}
}

/* ---------------------------------------------------------- confirm note -- */
.confirm{
  border:1.5px dashed var(--confirm-line);background:var(--confirm-bg);
  border-radius:var(--radius-card);padding:14px 18px;
  font-size:14px;line-height:1.6;color:var(--confirm-ink);
}
.confirm b{
  display:inline;text-transform:uppercase;letter-spacing:.08em;
  font-size:11px;font-weight:700;color:var(--confirm-label);margin-right:6px;
}
.confirm--onforest{
  border-color:rgba(255,192,13,.55);background:rgba(255,192,13,.07);color:#E7DCB8;
}
.confirm--onforest b{color:var(--gold);}

/* ------------------------------------------------------------- pullquote -- */
.pull{border-left:3px solid var(--red);padding:4px 0 4px 22px;}
.pull p{font-family:var(--font-display);font-size:clamp(20px,2vw,24px);line-height:1.42;color:var(--forest);}
.pull cite{display:block;font-family:var(--font-body);font-style:normal;font-size:15px;color:var(--ink-mute);margin-top:12px;}
.note-rule{border-left:3px solid var(--red);padding:2px 0 2px 20px;}
.note-rule p{font-size:16px;line-height:1.6;color:#3F3830;}

/* ------------------------------------------------------------ utility bar -- */
/* The topbar is FIXED, not sticky. A sticky header keeps its box in normal flow,
   so shrinking it shrinks the document and drags every element below it upward —
   a 40px lurch under the reader's eye and a large layout shift on every session.
   Out of flow, its height can change freely; body reserves the at-rest height
   once, and scrolled content simply passes underneath.

   The utility bar collapses by SLIDING the whole topbar up by its own height —
   not by clipping it. A max-height clip would cap a content-driven box, and the
   hours line is still an unconfirmed placeholder: if it ever wraps to two lines,
   a clip would silently swallow the 988 crisis link. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .22s ease;}
.topbar.is-compact{transform:translateY(calc(-1 * var(--util-h)));}
.util{background:var(--forest);color:var(--on-dark-mute);font-size:14px;}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding-block:8px;flex-wrap:wrap;}
.util__left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.util__sep{color:#4A6A52;}
.util a{color:var(--gold);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,192,13,.45);}
.util a:hover{color:#fff;border-bottom-color:#fff;}
.util__flag{color:var(--on-dark-faint);}
@media (max-width:768px){
  .util .wrap{justify-content:center;text-align:center;min-height:0;}
  .util__left{display:none;}
}

/* ---------------------------------------------------------------- header -- */
.site-header{
  background:rgba(246,241,231,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  min-height:var(--header-h);
  transition:min-height .22s ease;
}
/* Full presence at rest, compact once the reader is moving. The lockup's tagline
   is only 7.5% of the artwork height, so the logo needs ~96px to stay readable —
   too tall to carry on every scroll. This resolves that tension instead of
   picking one side of it. */
/* Scoped to .site-header: `.util .wrap` and `.site-header .wrap` share the bare
   `wrap` class, so an unscoped `.topbar.is-compact .wrap` also hits the utility
   bar and forces it to the compact HEADER height — the bar grows instead of
   collapsing and the header never pins to top:0. */
.topbar.is-compact .site-header .wrap{min-height:var(--header-h-compact);}
.topbar.is-compact .site-header .brand__mark{height:var(--logo-h-compact);}
.brand{display:flex;align-items:center;text-decoration:none;flex:none;}
/* Mana's horizontal lockup (1781x564, ratio 3.158:1), used whole. Its tagline is
   12.1% of the artwork height, so 72px puts HEALTH & WELLNESS at 8.7px — readable
   without an oversized header. Width is left auto; setting both axes would
   distort the mark. */
.brand__mark{height:var(--logo-h);width:auto;transition:height .22s ease;}

.nav{display:flex;align-items:center;gap:26px;}
.nav a{font-weight:500;font-size:15px;color:var(--ink-soft);text-decoration:none;white-space:nowrap;}
.nav a:hover{color:var(--green-dark);}
.nav a[aria-current="page"]{color:var(--forest);font-weight:600;border-bottom:2px solid var(--red);padding-bottom:3px;}

.nav-drop{position:relative;}
.nav-drop__btn{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;padding:0;cursor:pointer;
  font-weight:500;font-size:15px;color:var(--ink-soft);
}
.nav-drop__btn:hover{color:var(--green-dark);}
.nav-drop__btn svg{transition:transform .15s ease;}
.nav-drop__btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.nav-drop__panel{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);
  min-width:266px;padding:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:0 24px 46px -22px rgba(20,53,31,.4);
  display:flex;flex-direction:column;
}
/* Bridge the 18px gap between the button and the panel. Without this the pointer
   leaves .nav-drop mid-travel and the menu closes before it can be used. */
.nav-drop__panel::before{
  content:"";position:absolute;left:0;right:0;top:-19px;height:19px;
}
.nav-drop__panel[hidden]{display:none;}
.nav-drop__panel a{padding:10px 14px;border-radius:6px;font-size:15px;color:var(--ink-soft);}
.nav-drop__panel a:hover{background:var(--sand);color:var(--forest);}
.nav-drop__panel .all{
  margin-top:6px;padding-top:12px;border-top:1px solid var(--line);
  border-radius:0;font-weight:600;color:var(--green-dark);
}

.header-call{flex:none;}
.header-call__icon{display:none;}
.menu-btn{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;flex:none;
}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;}
.header-actions{display:flex;align-items:center;gap:10px;flex:none;}

/* Compact the nav from 1280 rather than 1180: at 1201px the full-size nav (686px)
   plus logo, call button, gutters and gaps comes to 1099px against 1121px of room
   — a 22px margin. The compact nav (627px) restores an 81px buffer. */
@media (max-width:1280px){ .nav{gap:20px;} .nav a,.nav-drop__btn{font-size:14.5px;} }

/* Hand off to the mobile menu at 1200px, NOT 1024px. The desktop header's minimum
   content width is ~1100–1120px (80 gutters + 56 gaps + 627 nav + 165 call + 192
   logo); below that the nav sat in a container too narrow for it and clipped the
   phone CTA off the right edge. body{overflow-x:hidden} suppressed the scrollbar,
   so the button was silently unreachable rather than visibly broken. */
@media (max-width:1200px){
  .nav{display:none;}
  .menu-btn{display:flex;}
}

@media (max-width:1024px){
  .site-header .wrap{gap:16px;}
  .header-call{width:44px;height:44px;padding:0;border-radius:50%;}
  .header-call__label{display:none;}
  .header-call__icon{display:block;}
}

/* ----------------------------------------------------------- mobile menu -- */
.mobile-nav{
  position:fixed;inset:0;z-index:99;
  background:var(--cream);
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:0;
}
.mobile-nav[hidden]{display:none;}
/* Child selectors, not descendant. `.mobile-nav a` (or even a:not(.btn)) also
   matches links nested INSIDE the foot note — which turned the 988 crisis link
   into a block-level, 19px, underlined row in the middle of a sentence. Scoping
   to direct children targets the nav rows only. */
.mobile-nav > a{
  display:block;padding:16px 0;border-bottom:1px solid var(--line);
  font-size:19px;font-weight:500;color:var(--forest);text-decoration:none;
}
.mobile-nav > a:hover{color:var(--red-deep);}
.mobile-nav > a[aria-current="page"]{color:var(--red-deep);font-weight:600;}
.mobile-nav__group{
  padding:16px 0 6px;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red-deep);
}
.mobile-nav__sub > a{
  display:block;padding:13px 0 13px 16px;border-bottom:1px solid var(--line);
  font-size:17px;font-weight:500;color:var(--ink-soft);text-decoration:none;
}
.mobile-nav__sub > a:hover{color:var(--red-deep);}
.mobile-nav__sub > a[aria-current="page"]{color:var(--red-deep);font-weight:600;}
.mobile-nav__foot{
  margin-top:32px;padding-top:24px;border-top:2px solid var(--forest);
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;flex-direction:column;gap:14px;
}
.mobile-nav__foot .btn{width:100%;height:56px;font-size:17px;}
.mobile-nav__foot p{color:var(--ink-soft);}
.mobile-nav__foot p a{color:var(--red-deep);font-weight:600;}

/* ------------------------------------------------------ sticky call bar --- */
.callbar{display:none;}
@media (max-width:1024px){
  .callbar{
    position:fixed;left:0;right:0;bottom:0;z-index:98;
    display:flex;align-items:center;gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(15,39,23,.97);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  .callbar .btn{flex:1;height:48px;font-size:16px;padding-inline:14px;width:auto;}
  body{padding-bottom:84px;}
}

/* ------------------------------------------------------------------ hero -- */
.hero{position:relative;background:var(--cream);}
.hero__media{position:absolute;inset:0;overflow:hidden;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:78% center;}
/* The clear point tracks the TEXT COLUMN, not a fixed percentage of the hero.
   A percentage breaks between 900 and 1200px, where the 620px column plus
   gutters spans 60-72% of the band and the lead lands on dark canopy. Same
   pattern as .feature-hero__media::after below. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  --clear:max(760px, 52vw);
  background:linear-gradient(96deg,
    rgba(246,241,231,.985) 0,
    rgba(246,241,231,.96) calc(var(--clear) * .55),
    rgba(246,241,231,.80) calc(var(--clear) * .92),
    rgba(246,241,231,.66) var(--clear),
    rgba(246,241,231,.03) calc(var(--clear) + 150px));
}
.hero__inner{position:relative;min-height:660px;display:flex;flex-direction:column;justify-content:center;padding-block:64px;}
.hero__text{max-width:620px;}
.hero h1{margin-top:20px;}
.hero h1 .script{
  display:inline-block;margin-top:6px;
  font-size:1.44em;line-height:.95;
}
.hero .lead{margin-top:26px;max-width:56ch;color:#3F3830;}
.hero .btn-row{margin-top:34px;}
.hero__trust{
  margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:15px;color:var(--ink-soft);
}
.hero__trust span.dot{width:4px;height:4px;border-radius:50%;background:#B4A88E;flex:none;}

@media (max-width:900px){
  .hero__media{position:static;height:210px;}
  .hero__media::after{display:none;}
  .hero__media img{object-position:82% center;}
  .hero__inner{min-height:0;padding-block:32px 40px;}
  .hero__text{max-width:none;}
}

/* --------------------------------------------------------- accreditation -- */
.accred{display:grid;grid-template-columns:196px 1fr;gap:56px;align-items:start;}
.accred__seal{width:196px;height:196px;}
.accred__body{display:flex;flex-direction:column;gap:22px;padding-top:6px;}
.accred__intro{display:flex;flex-direction:column;gap:14px;max-width:70ch;}
.accred__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  border-top:1px solid var(--line);padding-top:26px;
}
.accred__grid h3{font-size:19px;margin-top:4px;}
.accred__grid p{font-size:15px;line-height:1.55;color:var(--ink-soft);margin-top:7px;}
.rule-red{display:block;width:32px;height:3px;background:var(--red);}
@media (max-width:900px){
  .accred{grid-template-columns:1fr;gap:26px;}
  .accred__seal{width:124px;height:124px;}
  .accred__grid{grid-template-columns:1fr 1fr;gap:22px;}
}
@media (max-width:430px){ .accred__grid{grid-template-columns:1fr;} }

/* ------------------------------------------------------- section heading -- */
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;}
.sec-head__title{display:flex;flex-direction:column;gap:14px;}
.sec-head p:not(.eyebrow):not(.confirm){font-size:var(--fs-lead);line-height:1.6;color:var(--ink-soft);}
.section--forest .sec-head p:not(.eyebrow):not(.confirm){color:var(--on-dark);}
@media (max-width:900px){ .sec-head{grid-template-columns:1fr;gap:16px;} }

/* ---------------------------------------------------------- service index -- */
.svc-cols{display:grid;grid-template-columns:1fr 1fr;gap:72px;margin-top:52px;}
@media (max-width:900px){ .svc-cols{grid-template-columns:1fr;gap:40px;} }
.svc-group{display:flex;flex-direction:column;}
.svc-group__label{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-deep);padding-bottom:14px;border-bottom:2px solid var(--forest);
}
.svc-item{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line-2);text-decoration:none;
}
.svc-item:hover .svc-item__name{color:var(--red-deep);}
.svc-item:hover .svc-item__arrow{transform:translateX(4px);}
.svc-item__name{display:block;font-family:var(--font-display);font-weight:600;font-size:23px;color:var(--forest);line-height:1.25;transition:color .15s ease;}
.svc-item__desc{display:block;font-size:16px;line-height:1.5;color:var(--ink-soft);margin-top:5px;}
.svc-item__arrow{color:var(--red-deep);font-size:20px;line-height:1;transition:transform .15s ease;}
.svc-more{padding:22px 0;display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.svc-more p{font-size:15px;line-height:1.55;color:var(--ink-mute);}
@media (max-width:430px){ .svc-item__name{font-size:21px;} }

/* ------------------------------------------------------------- 2-up split -- */
.split{display:grid;gap:80px;align-items:center;}
.split--media-right{grid-template-columns:1.02fr .98fr;}
.split--media-left{grid-template-columns:.94fr 1.06fr;}
.split--text-wide{grid-template-columns:1.06fr .94fr;}
.split__media img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-panel);box-shadow:var(--shadow);
}
.split__body{display:flex;flex-direction:column;align-items:flex-start;}
.split__body h2{margin-top:18px;}
.split__body > p:not(.eyebrow):not(.confirm){margin-top:22px;max-width:58ch;font-size:var(--fs-lead);line-height:1.6;color:var(--ink-soft);}
.split__body .btn-row,.split__body .pull,.split__body .note-rule,.split__body .confirm{margin-top:26px;}
.split__body .btn-row + .confirm{margin-top:26px;}
@media (max-width:900px){
  .split{grid-template-columns:1fr!important;gap:28px;}
  .split--media-right .split__media{order:-1;}
  .split__media img{aspect-ratio:16/10;}
  .split__body{width:100%;}
  .split__body .btn-row{width:100%;}
}

/* ---------------------------------------------------------------- lokahi -- */
.lokahi__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.chip{
  border:1px solid rgba(255,255,255,.3);border-radius:999px;
  padding:8px 15px;font-size:14px;font-weight:500;color:var(--on-dark);
}
.section--forest .split__body > p:not(.eyebrow):not(.confirm){color:var(--on-dark);}
.section--forest .split__media img{box-shadow:0 24px 50px -28px rgba(0,0,0,.6);}

/* --------------------------------------------------------------- pillars -- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:52px;}
.pillar{display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--green);padding-top:22px;}
.pillar:nth-child(2){border-top-color:var(--red);}
.pillar:nth-child(3){border-top-color:var(--gold);}
.pillar h3{font-size:25px;}
.pillar p{font-size:16.5px;line-height:1.6;color:var(--ink-soft);}
@media (max-width:1024px){ .pillars{grid-template-columns:1fr 1fr;gap:28px;} }
@media (max-width:700px){ .pillars{grid-template-columns:1fr;gap:22px;} .pillar h3{font-size:22px;} }

/* ----------------------------------------------------------------- story -- */
.story__aside{display:flex;flex-direction:column;gap:24px;}
.story__aside img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-panel);box-shadow:var(--shadow);
}
@media (max-width:900px){ .story__aside img{aspect-ratio:16/10;} }
.team-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:26px 28px;display:flex;flex-direction:column;gap:12px;
}
.team-card p:not(.confirm){font-size:16px;line-height:1.6;color:var(--ink-soft);}

/* ------------------------------------------------------------------- faq -- */
.faq{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start;}
.faq__head{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.faq__list{display:flex;flex-direction:column;}
.faq__item{border-top:1px solid var(--line);}
.faq__item:last-of-type{border-bottom:1px solid var(--line);}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  background:none;border:0;cursor:pointer;text-align:left;padding:24px 0;
  font-family:var(--font-display);font-weight:600;font-size:23px;line-height:1.3;color:var(--forest);
}
.faq__q:hover{color:var(--red-deep);}
.faq__icon{
  flex:none;font-family:var(--font-body);font-size:26px;line-height:1;color:var(--green);
  transition:transform .2s ease;translate:0 -2px;
}
.faq__q[aria-expanded="true"] .faq__icon{transform:rotate(45deg);}
/* the button is inside its <h3>, so `.faq__a` is a sibling of the heading, not of
   the button — the open state is driven by a class the script puts on the item. */
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;}
.faq__item.is-open .faq__a{grid-template-rows:1fr;}
.faq__a > div{overflow:hidden;}
.faq__a p{font-size:var(--fs-body);line-height:1.65;color:var(--ink-soft);max-width:68ch;padding-bottom:24px;}
@media (max-width:900px){
  .faq{grid-template-columns:1fr;gap:24px;}
  .faq__q{font-size:20px;padding:18px 0;gap:16px;}
}

/* --------------------------------------------------------------- contact -- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:start;}
.contact__phone{
  display:inline-block;margin-top:32px;
  font-family:var(--font-display);font-weight:500;font-size:clamp(36px,4vw,52px);
  color:var(--gold);text-decoration:none;letter-spacing:-.01em;line-height:1;
}
.contact__phone:hover{color:#fff;}
.contact__meta{display:flex;flex-direction:column;gap:9px;margin-top:24px;font-size:17px;line-height:1.5;color:var(--on-dark-mute);}
.contact__meta a{color:var(--on-dark-mute);}
.contact__crisis{border-top:1px solid var(--on-dark-line);margin-top:30px;padding-top:22px;display:flex;flex-direction:column;gap:6px;}
.contact__crisis b{font-size:15px;color:#fff;font-weight:600;}
.contact__crisis p{font-size:16px;line-height:1.55;color:var(--on-dark-mute);}

.form-card{background:var(--paper);border-radius:var(--radius-panel);padding:36px 38px;display:flex;flex-direction:column;gap:18px;}
/* The form card is a LIGHT island inside a forest section, so the section's
   dark-ground colour rules must be reversed for everything inside it. */
.section--forest .form-card h3{color:#2e2b25;}
.section--forest .form-card > p:not(.confirm){color:#2e2b25;}
.section--forest .form-card .privacy-note p{color:#2e2b25;}
.section--forest .form-card label{color:var(--ink);}
.section--forest .form-card a{color:var(--red-deep);}
.form-card h3{font-size:26px;}
.form-card > p{font-size:15.5px;line-height:1.55;color:var(--ink-soft);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:14px;font-weight:600;color:var(--ink);}
.field .req{color:var(--red-deep);}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:var(--cream);border:1.5px solid var(--line);border-radius:var(--radius-card);
}
.field textarea{min-height:96px;resize:vertical;line-height:1.5;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C9B893;}
.privacy-note{
  background:var(--confirm-bg);border:1px solid #E9CE8C;border-radius:var(--radius-card);
  padding:14px 16px;display:flex;flex-direction:column;gap:8px;
}
.privacy-note p{font-size:14.5px;line-height:1.5;color:var(--confirm-ink);}
.privacy-note p:first-child{font-weight:600;color:#5C4413;}
@media (max-width:1024px){ .contact{grid-template-columns:1fr;gap:40px;} }
@media (max-width:560px){ .form-grid{grid-template-columns:1fr;} .form-card{padding:26px 22px;} }

/* ---------------------------------------------------------------- footer -- */
.site-footer{background:var(--forest-deep);color:var(--on-dark-mute);padding-top:64px;}
.site-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:56px;}
.site-footer h2{font-size:13px;}
/* Same --logo-h as the header, so the two marks always render at identical
   height. The lockups differ in aspect ratio (3.167:1 vs 2.527:1) until Mana
   supplies a reversed export of the current file, so their WIDTHS still differ —
   matching height is what the eye reads as the same size, since the emblem runs
   full-height in both. */
.footer-logo{
  height:var(--logo-h);width:auto;align-self:flex-start;
}
.site-footer .about{display:flex;flex-direction:column;gap:16px;}
.site-footer .about p:not(.foot-tagline){font-size:16px;line-height:1.6;color:#B7C7B0;max-width:34ch;}
.foot-tagline{
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
}
.fcol{display:flex;flex-direction:column;gap:12px;}
.fcol__label{
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-faint);margin:0;font-family:var(--font-body);
}
.fcol a{font-size:16px;color:#E7DEC9;text-decoration:none;}
.fcol a:hover{color:var(--gold);}
.fcol span{font-size:16px;line-height:1.55;color:#B7C7B0;}
.fphone{font-family:var(--font-display);font-weight:600;font-size:26px;color:var(--gold)!important;}
/* .fcol a sets 16px; out-rank it on specificity rather than source order */
.fcol a.fphone{font-size:26px;}
/* Explicit 2x2 grid rather than a wrapping flex row: with four children and
   space-between, wrap order decided the layout and the credit floated into a
   gap. Rows are now fixed — identity left, legal right; small print left,
   credit right. */
.foot-bottom{
  margin-top:48px;padding:24px var(--gutter) 40px;border-top:1px solid #2A4634;
  max-width:calc(var(--maxw) + var(--gutter) * 2);margin-inline:auto;
  display:grid;grid-template-columns:minmax(380px,1fr) minmax(0,auto);gap:20px 48px;align-items:start;
}
.foot-bottom span{font-size:15px;color:var(--on-dark-faint);max-width:62ch;}
.foot-copy{grid-area:1/1;}
.foot-legal{grid-area:1/2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 22px;max-width:none;}
.foot-disclaimer{grid-area:2/1;}
.foot-legal a{font-size:15px;color:#C6D4BF;text-decoration:none;border-bottom:1px solid rgba(198,212,191,.35);}
.foot-legal a:hover{color:var(--gold);border-bottom-color:var(--gold);}
/* Agency credit: lower right, baseline-aligned to the last line of the small print. */
.foot-credit{grid-area:2/2;align-self:end;text-align:right;max-width:none;white-space:nowrap;}
.foot-credit a{color:#C6D4BF;text-decoration:none;border-bottom:1px solid rgba(198,212,191,.35);}
.foot-credit a:hover{color:var(--gold);border-bottom-color:var(--gold);}
/* Single column below 1000px. Above it, col 1 has a 380px floor so the small
   print keeps a readable measure and the legal links wrap instead of the
   paragraph collapsing into a ribbon. */
@media (max-width:1000px){
  .foot-bottom{grid-template-columns:1fr;gap:18px;}
  .foot-copy,.foot-legal,.foot-disclaimer,.foot-credit{grid-area:auto;}
  .foot-legal{justify-content:flex-start;}
  .foot-credit{text-align:left;white-space:normal;}
}

/* legal page: numbered rights list and the block a compliance officer fills in */
.legal-list{list-style:none;padding:0;counter-reset:lg;display:flex;flex-direction:column;gap:18px;}
.legal-list li{position:relative;padding-left:44px;font-size:16.5px;line-height:1.6;color:var(--ink-soft);}
.legal-list li::before{
  counter-increment:lg;content:counter(lg);
  position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:50%;
  background:var(--forest);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;
}
.legal-list li b{color:var(--ink);display:block;margin-bottom:2px;}
.legal-drop{
  border:2px dashed var(--confirm-line);background:var(--confirm-bg);
  border-radius:var(--radius-panel);padding:28px 30px;
  display:flex;flex-direction:column;gap:12px;
}
.legal-drop h3{color:var(--confirm-ink);}
.legal-drop p{font-size:16px;line-height:1.6;color:var(--confirm-ink);}
.legal-drop ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15.5px;line-height:1.55;color:var(--confirm-ink);}
.legal-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.legal-nav a{
  font-size:15px;font-weight:600;color:var(--forest);text-decoration:none;
  border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;background:var(--paper);
}
.legal-nav a:hover{border-color:var(--forest);background:var(--forest);color:var(--cream);}
@media (max-width:1024px){ .site-footer .cols{grid-template-columns:1fr 1fr;gap:36px;} }
@media (max-width:560px){ .site-footer .cols{grid-template-columns:1fr;gap:30px;} }

/* ------------------------------------------------------------- feature hero -
   The homepage hero device, reused mid-page: full-bleed photograph with a
   directional scrim clearing a column for the text. Forest scrim instead of
   cream, so it reads as the same move inverted rather than a repeat.

   --clear is where the text column ends: the wrap is centred with a 1200px
   content box, so the text's far edge is max(640px, 50vw) from its own side.
   The scrim stops are anchored to THAT, not to a viewport percentage, or the
   copy runs off the opaque end between 900px and 1280px. */
.feature-hero{position:relative;overflow:hidden;background:var(--forest);}
.feature-hero__media{position:absolute;inset:0;isolation:isolate;}
.feature-hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 52%;}
/* Two layers, not one. ::before MULTIPLIES the brand colour into the photograph,
   which darkens it while keeping its tonal structure — you still read the sun,
   the horizon, the hillside. A flat scrim crushes all of that to one colour.
   ::after is the directional gradient that clears the text column. */
.feature-hero__media::before{
  content:"";position:absolute;inset:0;
  background:var(--forest);mix-blend-mode:multiply;opacity:0;
}
.feature-hero__media::after{
  content:"";position:absolute;inset:0;
  --clear:max(660px, 50vw);
  --srgb:20,53,31;
  --dir:96deg;
  --a1:.985; --a2:.955; --a3:.90; --a4:.30; --a5:.03;
  background:linear-gradient(var(--dir),
    rgba(var(--srgb),var(--a1)) 0px,
    rgba(var(--srgb),var(--a2)) calc(var(--clear) - 140px),
    rgba(var(--srgb),var(--a3)) var(--clear),
    rgba(var(--srgb),var(--a4)) calc(var(--clear) + 260px),
    rgba(var(--srgb),var(--a5)) calc(var(--clear) + 460px));
}
.feature-hero__inner{
  position:relative;min-height:640px;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--sp);
}
.feature-hero__text{max-width:600px;display:flex;flex-direction:column;align-items:flex-start;}
.feature-hero__text h1,.feature-hero__text h2{margin-top:18px;}
.feature-hero__text > p:not(.eyebrow):not(.confirm):not(.script-accent){margin-top:24px;max-width:52ch;font-size:var(--fs-lead);line-height:1.6;}
.feature-hero__text .confirm{margin-top:28px;}
html[data-air="close"] .feature-hero__inner{min-height:540px;}
html[data-air="open"] .feature-hero__inner{min-height:740px;}

/* --right — the scrim mirrors and the text column sits on the right, so two
   photographic bands never lean the same way twice running. Light ground, so
   the FALLBACK behind the lazy-loaded photograph must be light too — dark text
   over the inherited forest would be invisible until the image paints. */
.feature-hero--right{background:var(--cream);}
.feature-hero--right .feature-hero__media img{object-position:34% 52%;}
/* Light ground: SCREEN cream into the photo to lift it, rather than multiply. */
.feature-hero--right .feature-hero__media::before{background:var(--cream);mix-blend-mode:screen;}
.feature-hero--right .feature-hero__media::after{--srgb:246,241,231;--dir:264deg;--a3:.915;--a4:.34;}
.feature-hero--right .feature-hero__inner{align-items:flex-end;}

/* --quote — a centred, symmetrical photograph can't take a side scrim without
   losing its subject, so this one darkens from the bottom and the text sits low. */
.feature-hero--quote .feature-hero__media img{object-position:center 46%;}
.feature-hero--quote .feature-hero__media::after{
  background:linear-gradient(to top,
    rgba(15,39,23,.965) 0%,
    rgba(15,39,23,.90) 24%,
    rgba(15,39,23,.55) 48%,
    rgba(15,39,23,.22) 72%,
    rgba(15,39,23,.10) 100%);
}
.feature-hero--quote .feature-hero__inner{min-height:540px;justify-content:flex-end;}
.feature-hero--quote .feature-hero__text{max-width:780px;}
.feature-hero--quote blockquote{border-left-color:var(--gold);}
.feature-hero--quote blockquote p{
  color:#fff;font-size:clamp(24px,3vw,38px);line-height:1.32;letter-spacing:-.014em;
}
.feature-hero--quote blockquote cite{color:var(--on-dark-mute);}
html[data-air="close"] .feature-hero--quote .feature-hero__inner{min-height:460px;}
html[data-air="open"] .feature-hero--quote .feature-hero__inner{min-height:620px;}

@media (max-width:900px){
  .feature-hero__media{position:static;height:230px;}
  .feature-hero__media::after{display:none;}
  .feature-hero__media img{object-position:62% center;}
  .feature-hero--right .feature-hero__media img{object-position:40% center;}
  .feature-hero__inner{min-height:0;padding-block:var(--sp-tight) var(--sp);}
  .feature-hero__text{max-width:none;}
  .feature-hero--right .feature-hero__inner{align-items:stretch;}
  html[data-air="close"] .feature-hero__inner,
  html[data-air="open"] .feature-hero__inner{min-height:0;}
  /* the quote band keeps its overlay on mobile — text sits over the image there,
     so it needs both layers back (currently unused, kept for reuse). */
  .feature-hero--quote .feature-hero__media{position:absolute;height:auto;inset:0;}
  .feature-hero--quote .feature-hero__media::after{display:block;}
  .feature-hero--quote .feature-hero__inner{min-height:420px;justify-content:flex-end;}
  html[data-air="close"] .feature-hero--quote .feature-hero__inner,
  html[data-air="open"] .feature-hero--quote .feature-hero__inner{min-height:420px;}
}

/* ==========================================================================
   INTERIOR PAGE COMPONENTS
   ========================================================================== */


.page-hero{background:var(--cream);padding-block:var(--sp-tight) var(--sp);}
.page-hero__inner{max-width:820px;display:flex;flex-direction:column;align-items:flex-start;}
.page-hero h1{margin-top:14px;}
.page-hero .lead{margin-top:20px;max-width:62ch;}
.page-hero .btn-row{margin-top:30px;}

.prose{max-width:68ch;display:flex;flex-direction:column;gap:16px;}
.prose p{line-height:1.7;color:var(--ink-soft);}
.prose h3{margin-top:12px;}

.duo{display:grid;grid-template-columns:1.12fr .88fr;gap:72px;align-items:start;}
.duo__side{display:flex;flex-direction:column;gap:16px;}
@media (max-width:900px){ .duo{grid-template-columns:1fr;gap:36px;} }

.checklist{list-style:none;padding:0;display:flex;flex-direction:column;gap:13px;}
.checklist li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.6;color:var(--ink-soft);}
.checklist li::before{
  content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;
  border-radius:50%;background:var(--green);
}
.section--forest .checklist li{color:var(--on-dark);}
.section--forest .checklist li::before{background:var(--gold);}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:44px;}
.steps--3{grid-template-columns:repeat(3,1fr);}
.stepc{display:flex;flex-direction:column;gap:9px;border-top:3px solid var(--forest);padding-top:20px;}
.stepc__n{
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red-deep);
}
.stepc h3{font-size:22px;}
.stepc p{font-size:16px;line-height:1.6;color:var(--ink-soft);}
@media (max-width:900px){ .steps,.steps--3{grid-template-columns:1fr 1fr;gap:26px;} }
@media (max-width:560px){ .steps,.steps--3{grid-template-columns:1fr;gap:22px;} }

.boundary{
  border:1px solid var(--line);background:var(--paper);border-radius:var(--radius-card);
  padding:22px 26px;display:flex;flex-direction:column;gap:8px;
}
.boundary h3{font-size:19px;}
.boundary p{font-size:16px;line-height:1.6;color:var(--ink-soft);}

.res__group{display:flex;flex-direction:column;margin-top:8px;}
.res__item{
  padding:22px 0;border-bottom:1px solid var(--line-2);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
}
/* Rows with nothing in the second cell — the classes band — would otherwise keep
   the 24px gap reserved against a 0px column, wrapping text early against a dead
   strip. Single-column variant drops it. */
.res__item--solo{grid-template-columns:1fr;gap:0;}
.res__item h3{font-size:21px;}
.res__item p{font-size:16px;line-height:1.55;color:var(--ink-soft);margin-top:5px;}
.res__item a{font-weight:600;color:var(--red-deep);text-decoration:none;white-space:nowrap;}
.res__item a:hover{color:var(--forest);}
/* Outbound links carry a visible cue so nobody mistakes a public service for a
   Mana page. The arrow is generated, so it can never be forgotten in markup. */
.res__item a[target="_blank"]::after{content:" ↗";font-size:.9em;}
.res__note{
  margin-top:20px;max-width:70ch;font-size:var(--fs-small);line-height:1.55;
  color:var(--ink-mute);
}
.res__note a{color:var(--green-dark);font-weight:600;}
@media (max-width:560px){ .res__item{grid-template-columns:1fr;gap:10px;} }

.faq-group{margin-top:44px;}
.faq-group__label{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-deep);padding-bottom:14px;border-bottom:2px solid var(--forest);margin-bottom:0;
}

/* ---- SCRIM: how much of the photograph survives behind the text ---------- */
/* solid is the flat wash (photo effectively hidden in the text column).
   veiled and sheer trade opacity for a multiply/screen tint, so the image keeps
   its shape. Worst-case contrast for white on forest, computed against a pure
   white source pixel: veiled 7.6:1, sheer 5.0:1 — both clear AA. */
html[data-scrim="veiled"] .feature-hero__media::before{opacity:.58;}
html[data-scrim="veiled"] .feature-hero__media::after{--a1:.78;--a2:.70;--a3:.58;--a4:.20;--a5:.02;}
html[data-scrim="veiled"] .feature-hero--right .feature-hero__media::after{--a3:.62;--a4:.22;}

html[data-scrim="sheer"] .feature-hero__media::before{opacity:.45;}
html[data-scrim="sheer"] .feature-hero__media::after{--a1:.60;--a2:.52;--a3:.42;--a4:.10;--a5:0;}
html[data-scrim="sheer"] .feature-hero--right .feature-hero__media::after{--a3:.50;--a4:.12;}
/* At sheer the text sits over real image detail, so it gets a soft halo. Not a
   substitute for contrast — the numbers above already pass — but it stops the
   copy fizzing against high-frequency areas like the water. */
html[data-scrim="sheer"] .feature-hero__text h1,
html[data-scrim="sheer"] .feature-hero__text h2,
html[data-scrim="sheer"] .feature-hero__text > p{text-shadow:0 1px 14px rgba(15,39,23,.6);}
html[data-scrim="sheer"] .feature-hero--right .feature-hero__text h1,
html[data-scrim="sheer"] .feature-hero--right .feature-hero__text h2,
html[data-scrim="sheer"] .feature-hero--right .feature-hero__text > p{text-shadow:0 1px 14px rgba(246,241,231,.75);}

/* --------------------------------------------------------------- motion --- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .reveal{opacity:1;transform:none;}
  .faq__a{transition:none;}
  .site-header .wrap,.brand__mark,.topbar{transition:none;}
}

/* ==========================================================================
   ROLE UTILITIES — THE LAST WORD
   Four separate bugs in this project came from the same mistake: a CONTAINER
   rule (.section--forest p, .section--forest a, .prose p, .form-card) silently
   repainting a ROLE utility (.eyebrow, .confirm, .btn--*). Container rules say
   where a thing sits; role utilities say what it IS — and what it is must win.

   Doubling the class raises specificity above any single-class container rule
   AND removes the dependence on source order, which is what actually broke the
   .legal-drop blocks (.prose p and .legal-drop p were both 0,1,1; .prose p was
   simply written later). Declare new colour-bearing utilities HERE, at the end.
   Order matters within this block: base first, modifier after.
   ========================================================================== */
.eyebrow.eyebrow{color:var(--green-dark);}
.eyebrow--red.eyebrow--red{color:var(--red-deep);}
.eyebrow--gold.eyebrow--gold{color:var(--gold);}

/* The script face has a ~0.35em x-height, so the 32px floor from the type scale
   is a legibility threshold, not a preference. Enforce it here rather than in a
   per-instance inline clamp, where it is easy to set too low and never notice. */
/* matches .section--forest p:not():not() at 0,3,1 and is declared later, so the
   script keeps its gold without escalating the container rule */
.section--forest .feature-hero__text p.script-accent{color:var(--gold);}
.script-accent{
  font-family:var(--font-script);
  font-size:clamp(32px,3.2vw,40px);
  line-height:1.12;
  color:var(--red);
}
.section--forest .script-accent{color:var(--gold);}

.confirm.confirm{color:var(--confirm-ink);}
.confirm.confirm b{color:var(--confirm-label);}
.confirm.confirm li{color:var(--confirm-ink);}
.confirm--onforest.confirm--onforest{color:#E7DCB8;}
.confirm--onforest.confirm--onforest b{color:var(--gold);}

.legal-drop.legal-drop h3{color:var(--confirm-ink);}
.legal-drop.legal-drop p{color:var(--confirm-ink);}
.legal-drop.legal-drop li{color:var(--confirm-ink);}

.boundary.boundary p{color:var(--ink-soft);}

/* The form success and failure panels are LIGHT islands inside .section--forest,
   exactly like .form-card. The container rule they must beat is
       .section--forest p:not(.eyebrow):not(.confirm)   = 0,3,1
   THREE class-level components plus an element. A doubled class only reaches
   0,2,1 and loses regardless of source order — measure the selector before
   assuming doubling is enough. These match 0,3,1 and sit later in source.
   .form-error is written element-qualified so it survives being moved out of
   the form, where it currently only wins by inheriting .form-card's reversal. */
.section--forest .form-done.form-done p{color:var(--ink-soft);}
.section--forest .form-done.form-done h3{color:var(--ink);}
.section--forest .form-done.form-done a{color:var(--red-deep);}
.section--forest p.form-error.form-error{color:#8A2B12;}
.section--forest .form-error.form-error a{color:#8A2B12;}
.form-done p{color:var(--ink-soft);}
.form-done h3{color:var(--ink);}
.form-done a{color:var(--red-deep);}
p.form-error{color:#8A2B12;}
.privacy-note.privacy-note p{color:var(--confirm-ink);}
.privacy-note.privacy-note p:first-child{color:#5C4413;}

/* ==========================================================================
   MOBILE PHOTO TREATMENT — must be the LAST rule in this file.
   Below 900px the feature-hero photograph is its own band above the copy, so no
   text sits over it and the multiply/screen treatment is pure loss. The
   html[data-scrim="…"] variants above are (0,2,1) and appear later in source
   than the @media block that lays out mobile, so an override written up there
   loses on source order — media queries add no specificity. This block sits
   after them for that reason. Do not move it.
   ========================================================================== */
@media (max-width:900px){
  .feature-hero__media::before,
  html[data-scrim] .feature-hero__media::before{opacity:0;}
  /* the quote band is the exception: text sits over the image there */
  html[data-scrim="veiled"] .feature-hero--quote .feature-hero__media::before{opacity:.58;}
  html[data-scrim="sheer"] .feature-hero--quote .feature-hero__media::before{opacity:.45;}
}

/* ------------------------------------------------- place (real clinic photos) --
   Photographs of the actual building. Used sparingly: About, Contact, Lokahi.
   Fixed aspect-ratio on the img plus width/height in the markup means no CLS. */
.place{display:grid;gap:22px;}
.place--2{grid-template-columns:1fr 1fr;}
.place figure{margin:0;display:flex;flex-direction:column;gap:11px;}
.place img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-panel);box-shadow:var(--shadow);
}
.place--wide img{aspect-ratio:16/9;}
.place figcaption{font-size:15px;line-height:1.5;color:var(--ink-soft);}
.section--forest .place figcaption{color:var(--on-dark);}
@media (max-width:900px){
  .place--2{grid-template-columns:1fr;}
  .place img{aspect-ratio:16/10;}
}

/* Honeypot: visually and audibly hidden, but not display:none — bots fill what
   they can find, and display:none is the first thing they skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.hp input,.hp label{pointer-events:none;}

/* ------------------------------------------------------ legal (verbatim notices) --
   The NPP and the 1557 notice are published word for word. They are long and
   structural, so they need tighter rhythm and visible hierarchy than page prose. */
.legal h3{margin-top:2.2em;padding-top:1.1em;border-top:1px solid var(--line);}
.legal h4{margin-top:1.6em;font-size:1.02em;}
.legal ul{margin-top:.7em;}
.legal li{margin-bottom:.45em;}
.legal-banner{
  margin-top:6px;padding:16px 20px;border-radius:var(--radius-panel);
  background:var(--sand);font-weight:600;text-transform:none;
}
.legal-lead{font-size:1.06em;font-weight:600;}
.legal-dl{display:flex;flex-direction:column;gap:11px;margin-top:1.1em;}
.legal-dl > div{display:grid;grid-template-columns:minmax(0,160px) 1fr;gap:16px;}
.legal-dl dt{font-weight:600;color:var(--ink-soft);}
.legal-dl dd{margin:0;}
@media (max-width:640px){
  .legal-dl > div{grid-template-columns:1fr;gap:2px;}
}

/* The verbatim HHS tagline. Set slightly up from body copy so it reads as a
   notice in its own right, and lang="es" so screen readers switch voice. */
.legal-tagline{font-size:1.04em;font-weight:600;color:var(--ink);}

/* Success and failure states for the contact form. .form-done replaces the
   whole card, so it repeats the card's own surface treatment. */
.form-done{
  background:var(--paper);border-radius:var(--radius-panel);padding:36px 38px;
  display:flex;flex-direction:column;gap:12px;
}
.form-done:focus{outline:none;}
.form-done h3{font-size:24px;color:var(--ink);}
.form-done p{font-size:16px;line-height:1.6;color:var(--ink-soft);}
.form-done a{color:var(--red-deep);}
.form-error{
  font-size:15.5px;line-height:1.55;color:#8A2B12;
  background:#FBEDE7;border-radius:12px;padding:13px 16px;
}
.form-error a{color:#8A2B12;}
@media (max-width:560px){ .form-done{padding:26px 22px;} }