*,*::before,*::after{box-sizing:border-box}
:root{
  --sage:#C1D0BD; --ink:#1D271B; --white:#FFF;
  --tint:#EEF2EC; --line:#DDE3D9; --line-dk:rgba(193,208,189,.24);
  /* the sage hue held at four lightnesses, so green can carry the page without
     any colour entering that is not already in the mark */
  --mint:#E4EBE0; --sage-dp:#556E4E;   /* darkest step: clears 4.5:1 on mint and on white */
  --sage-mid:#8CA485;                 /* decorative only, never carries text */
  --soft:#55604F; --danger:#B3261E;
  --f:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  --s0:4px;--s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:80px;
  --measure:1200px;
  /* softer geometry, borrowed from the reference and kept to three steps */
  --r-sm:8px; --r:12px; --r-lg:18px;
  --shadow-sm:0 4px 6px -1px rgba(29,39,27,.07),0 2px 4px -2px rgba(29,39,27,.06);
  --shadow:0 20px 25px -5px rgba(29,39,27,.10),0 8px 10px -6px rgba(29,39,27,.07);
  /* one easing curve, two durations, nothing else */
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick:200ms;
  --dur-reveal:600ms;
  --motion:var(--dur-quick);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@keyframes draw-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .band__in .draw::after,.js .hero__in .draw::after{
  animation:draw-in 760ms var(--ease) both;animation-delay:620ms}

/* --- section motion ------------------------------------------------------
   More movement than before, but all of it on the same curve and all of it
   tied to something arriving: a row of facts counts in, a picture resolves,
   a ridge lifts the next section into place. */
.js .stagger>*{opacity:0;transform:translateY(18px)}
.js .stagger.is-visible>*{opacity:1;transform:none;
  transition:opacity 560ms var(--ease) calc(var(--n,0)*90ms),
             transform 560ms var(--ease) calc(var(--n,0)*90ms)}
.js .stagger>*:nth-child(1){--n:0}.js .stagger>*:nth-child(2){--n:1}
.js .stagger>*:nth-child(3){--n:2}.js .stagger>*:nth-child(4){--n:3}
.js .stagger>*:nth-child(5){--n:4}.js .stagger>*:nth-child(n+6){--n:5}

.js .shot img{clip-path:inset(0 0 12% 0);transform:scale(1.04);
  transition:clip-path 900ms var(--ease),transform 1100ms var(--ease)}
.js .is-visible .shot img,.js .shot.is-visible img{clip-path:inset(0 0 0 0);transform:none}
.hero__media .shot img,.band .band__img img{clip-path:none!important}

.locs>a,.progs>a,.rows>div{transition:background-color var(--dur-quick) var(--ease),
  transform var(--dur-quick) var(--ease)}
.lnk{transition:color var(--dur-quick) var(--ease),transform var(--dur-quick) var(--ease)}
.lnk:hover{transform:translateX(3px)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--f);font-size:18px;line-height:1.65;color:var(--ink);
  background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{width:100%;max-width:var(--measure);margin:0 auto;padding-inline:clamp(20px,4vw,var(--s5))}
img{max-width:100%;display:block;height:auto}
a{color:var(--ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--sage)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px}
.skip:focus{position:fixed;top:var(--s3);left:var(--s3);z-index:100;width:auto;height:auto;
  min-height:44px;clip:auto;margin:0;display:inline-flex;align-items:center;
  background:var(--ink);color:var(--white);padding:0 var(--s4);border-radius:var(--r-sm)}

/* utility bar: timely notice on the left, how to reach a person on the right */
.util{background:var(--mint);color:var(--ink);font-size:.86rem;
  border-bottom:1px solid var(--line)}
.util .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2) var(--s5);padding-block:10px;flex-wrap:wrap}
.util__note{flex:1 1 auto;min-width:0;text-wrap:pretty}
.util p{margin:0}
.util strong{color:var(--ink);font-weight:700}
.util a{color:var(--sage-dp);font-weight:600;text-underline-offset:.2em}
.util a:hover{color:var(--ink)}
.util__contact{display:flex;gap:var(--s4);white-space:nowrap}
.util__contact a{font-weight:600;display:inline-flex;align-items:center;min-height:32px}
.util__contact .util__staff{gap:6px;padding:0 10px;border:1px solid var(--sage-mid);border-radius:var(--r-sm);
  color:var(--ink);text-decoration:none;background:var(--white);white-space:nowrap}
.util__contact .util__staff:hover,.util__contact .util__staff:focus-visible{border-color:var(--ink);color:var(--ink)}
@media(max-width:720px){
  .util{font-size:.82rem}
  .util .wrap{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .util__note{order:2}
  .util__contact{order:1;gap:var(--s4)}
}
@media(max-width:560px){
  /* on a phone the number is worth more than the notice, and the notice was
     costing 129px of a 568px first screen */
  .util__note{display:none}
  .util .wrap{flex-direction:row;justify-content:flex-start;padding-block:var(--s1)}
  .util__contact{gap:var(--s5)}
}
@media(max-width:400px){
  .util__contact{gap:var(--s3)}
  .util__contact .util__staff{padding:0 8px}
}

/* header */
.hdr{border-bottom:1px solid transparent;background:var(--white);position:sticky;top:0;z-index:40;transition:border-color var(--dur-quick) var(--ease),box-shadow var(--dur-quick) var(--ease)}
.hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 24px -22px rgba(29,39,27,.55)}
/* anchored sections must not land under the sticky header */
[id]{scroll-margin-top:96px}
@media(max-width:920px){[id]{scroll-margin-top:84px}}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:68px;transition:min-height var(--dur-quick) var(--ease)}
.hdr.is-stuck .wrap{min-height:58px}
.hdr.is-stuck .brand img{height:40px}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;flex:none;min-height:44px}
.brand img{width:auto;height:46px;flex:none;transition:transform var(--dur-quick) var(--ease)}
.brand:hover img{transform:rotate(-4deg) scale(1.04)}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__txt b{font-size:1.14rem;font-weight:800;letter-spacing:.02em;color:var(--ink);
  text-transform:uppercase}
.brand__txt em{font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--soft);margin-top:4px}
@media(max-width:520px){
  .brand img{height:38px}
  .brand__txt b{font-size:1rem}
  .brand__txt em{font-size:.7rem;letter-spacing:.06em}
}
@media(max-width:360px){
  /* one row matters more than the tagline on a 320px screen */
  .brand__txt em{display:none}
  .brand img{height:34px}
  .hdr .wrap{gap:var(--s1)}
}
.nav{display:flex;gap:var(--s5);align-items:center}
.nav a{font-size:.96rem;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.nav a{position:relative;text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;
  background:var(--sage);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-quick) var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 var(--s5);
  background:var(--ink);color:var(--white);font-weight:600;font-size:1rem;border-radius:var(--r-sm);
  text-decoration:none;transition:background-color var(--motion) var(--ease)}
.btn:hover{background:#2C3829}
.btn--sage{background:var(--sage);color:var(--ink)}
.btn--sage:hover{background:var(--white);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
/* tertiary action: a link that looks like a link */
.lnk{display:inline-flex;align-items:center;min-height:48px;font-weight:600;font-size:1rem;
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--sage);
  text-decoration-thickness:2px;text-underline-offset:.28em;
  transition:text-decoration-color var(--dur-quick) var(--ease)}
.lnk:hover{text-decoration-color:var(--ink)}
.btn--ghost:hover{background:var(--tint)}
.menu{display:none;border:0;padding:0}
@media(max-width:920px){
  .nav{display:none}
  .hdr .wrap{flex-wrap:wrap;gap:var(--s2);padding-block:var(--s2);min-height:0}
  .menu{display:block;margin-left:auto}
  .menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);
    min-height:44px;padding:0 var(--s3);font-size:.9rem;font-weight:600;
    box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-sm)}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary::after{content:"\2261";font-size:1.15rem;line-height:1}
  .menu[open] summary::after{content:"\00D7"}
  .hdr .btn{display:none}
  .menu[open] ~ .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;
    flex-basis:100%;order:3;padding-top:var(--s1)}
  .menu[open] ~ .nav a{padding-block:var(--s3);border-bottom:1px solid var(--line);font-size:1rem}
  .menu[open] ~ .btn{display:inline-flex;flex-basis:100%;order:4;margin-block:var(--s3) var(--s1)}
}
@media(max-width:520px){
  .hdr .btn{padding:0 var(--s4);font-size:.88rem}
}

/* type */
h1{font-size:clamp(2rem,1.5rem + 2.3vw,3rem);font-weight:800;letter-spacing:-.032em;line-height:1.1;
  margin:0 0 var(--s4);text-wrap:balance;max-width:19ch}
h2{font-size:clamp(1.45rem,1.2rem + .95vw,1.95rem);font-weight:800;letter-spacing:-.026em;line-height:1.2;
  margin:0 0 var(--s3);text-wrap:balance}
h3{font-size:1.12rem;font-weight:700;letter-spacing:-.012em;line-height:1.35;margin:0 0 var(--s1)}
p{margin:0 0 var(--s3);max-width:68ch}
/* Long unbreakable tokens (emails, URLs) must never force a horizontal scroll.
   `anywhere` rather than `break-word` because only `anywhere` reduces the
   min-content size that grid and flex tracks are sized from. */
p,li,dd,dt,address,figcaption,summary,code,.answer,.lead{overflow-wrap:anywhere}
/* grid and flex children default to min-width:auto, which refuses to shrink */
.rows>div>*,.row>*,.nap>div>*,.pairs>div>*,.ftr li,.ftr address{min-width:0}
.lead{font-size:1.1rem;color:var(--soft);max-width:64ch}
.eyebrow{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--soft);margin:0 0 var(--s2)}
.sec{padding-block:clamp(40px,4.5vw,var(--s7))}
.sec--tint{background:var(--tint)}
.sec--mint{background:var(--mint)}
.sec--sage{background:var(--sage);color:var(--ink)}
/* A sage band inverts what the ink band assumed, so every colour the ink
   treatment set has to be answered here at equal or greater specificity. */
.sec--sage h2,.sec--sage h3{color:var(--ink)}
.sec--sage.stand .stmt{color:var(--ink)}
.sec--sage p{color:#2F3B2C}
.sec--sage .fact dt{color:#4A5A45}
.sec--sage .fact dd{color:#2F3B2C}
.sec--sage .facts{border-top-color:rgba(29,39,27,.2)}
.sec--sage .fact{border-right-color:rgba(29,39,27,.2)}
@media(max-width:860px){.sec--sage .fact{border-bottom-color:rgba(29,39,27,.2)}}
/* every section head carries the same short sage rule */
.sec h2::before{content:"";display:block;width:38px;height:3px;border-radius:2px;
  background:var(--sage-dp);margin-bottom:var(--s3)}
.sec--ink h2::before{background:var(--sage)}
.sec--sage h2::before{background:var(--ink)}
.card--act h2::before{display:none}
.sec--ink{background:var(--ink);color:var(--sage);position:relative;overflow:hidden}
.sec--ink>.wrap{position:relative;z-index:1}
.sec--ink::after{content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:min(38vw,330px);aspect-ratio:314/340;pointer-events:none;opacity:.07;
  background:url("/assets/logo-mark-dark.svg") no-repeat center/contain}
@media(max-width:760px){.sec--ink::after{right:-70px;opacity:.05}}
.sec--ink h2,.sec--ink h3{color:var(--white)}
.sec--ink p{color:var(--sage)}
.sec+.sec:not(.sec--tint):not(.sec--ink){border-top:1px solid var(--line)}

/* breadcrumb */
.crumb{font-size:.82rem;color:var(--soft);padding-block:var(--s4) 0}
.crumb a{color:var(--soft);display:inline-flex;align-items:center;min-height:32px}
.crumb span{margin-inline:var(--s1);color:var(--soft)}

/* definition rows */
dl.rows{margin:0;border-top:1px solid var(--line)}
.rows>div{display:grid;grid-template-columns:minmax(190px,.3fr) 1fr;gap:var(--s1) clamp(24px,4vw,var(--s7));
  align-items:baseline;padding-block:var(--s4);border-bottom:1px solid var(--line)}
.rows dt,.rows dd{margin:0}
.rows dd{color:var(--soft);max-width:62ch;font-size:1.03rem}
@media(max-width:720px){.rows>div{grid-template-columns:1fr}}

/* steps */
ol.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(16px,2vw,var(--s5));position:relative;padding-top:var(--s5)}
ol.steps::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line)}
.steps li{position:relative}
.steps li::before{content:"";position:absolute;top:-27px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--white);border:2px solid var(--ink)}
.sec--tint .steps li::before{background:var(--tint)}
.steps .n{font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--soft);display:block;
  margin-bottom:var(--s0);font-variant-numeric:tabular-nums}
.steps p{font-size:.93rem;color:var(--soft);margin:var(--s0) 0 0}
@media(max-width:900px){
  ol.steps{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:var(--s5)}
  ol.steps::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}
  .steps li{padding-block:var(--s4)}
  .steps li::before{top:30px;left:-37px}
}

/* facts / NAP */
.nap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:0;
  border-top:1px solid var(--line)}
.nap>div{padding:var(--s4) var(--s4) 0 0;border-right:1px solid var(--line)}
.nap>div:last-child{border-right:0}
.nap dt{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--soft);margin-bottom:var(--s1)}
.nap dd{margin:0;font-size:1.03rem;line-height:1.6;overflow-wrap:anywhere}
/* auto-fit leaves an orphan whenever the item count does not divide by the column
   count it happens to pick. Pick a divisor of the real count instead. */
@media(min-width:900px){
  .nap:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,auto)}
  .nap:has(>:nth-child(5):last-child){grid-template-columns:repeat(5,auto)}
  .nap:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,auto)}
  .nap:has(>:nth-child(6):last-child)>div:nth-child(3n){border-right:0}
  .nap:has(>:nth-child(6):last-child)>div:nth-child(n+4){border-top:1px solid var(--line)}
}
@media(min-width:600px) and (max-width:899px){
  .nap:has(>:nth-child(6):last-child),.nap:has(>:nth-child(4):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .nap:has(>:nth-child(6):last-child)>div:nth-child(2n),
  .nap:has(>:nth-child(4):last-child)>div:nth-child(2n){border-right:0}
  .nap:has(>:nth-child(6):last-child)>div:nth-child(n+3),
  .nap:has(>:nth-child(4):last-child)>div:nth-child(n+3){border-top:1px solid var(--line)}
  /* five is prime, so a partial row is unavoidable here. Close the row edges so it
     reads as a wrapped list rather than a broken grid. */
  .nap:has(>:nth-child(5):last-child)>div:nth-child(3n){border-right:0}
  .nap:has(>:nth-child(5):last-child)>div:nth-child(n+4){border-top:1px solid var(--line)}
}
/* below desktop, a fact list holding an email address stacks into one column, so the address
   keeps its single line without spilling into the next column or past the screen */
@media(max-width:899px){
  .nap:has(a[href^="mailto:"]){grid-template-columns:1fr}
  .nap:has(a[href^="mailto:"])>div{border-right:0;padding-right:0}
  .nap:has(a[href^="mailto:"])>div+div{border-top:1px solid var(--line)}
}
@media(max-width:720px){.nap>div{border-right:0;border-bottom:1px solid var(--line);
  padding-right:0;padding-bottom:var(--s4)}.nap>div:last-child{border-bottom:0}}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none;margin:0;padding:0;font-size:.9rem}
.chips li{color:var(--soft)}
.chips li:not(:last-child)::after{content:"\00B7";margin-left:var(--s1);color:var(--soft)}

/* notice */
.notice{border-left:3px solid var(--sage);background:var(--tint);padding:var(--s4);margin:var(--s4) 0}
.notice p:last-child{margin-bottom:0}
.notice--open{border-left-color:var(--ink)}

/* faq */
details{border-bottom:1px solid var(--line);padding-block:var(--s3)}
details summary{cursor:pointer;font-weight:700;font-size:1rem;list-style:none;display:flex;
  justify-content:space-between;gap:var(--s4);align-items:baseline;min-height:32px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-weight:600;color:var(--soft);flex:none}
details[open] summary::after{content:"\2212"}
details p{margin:var(--s2) 0 0;color:var(--soft)}

/* cta band */
.cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}

/* footer */
.ftr{background:var(--ink);color:var(--sage);padding-block:var(--s6) var(--s5);font-size:.98rem}
.ftr h2{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--sage);margin:0 0 var(--s3)}
.ftr a{color:var(--sage);overflow-wrap:anywhere}
.ftr address,.ftr li{overflow-wrap:anywhere}
.ftr .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--s5) var(--s6)}
/* an email address or phone number reads as one unit: never split it across lines; on the
   narrowest phones it scales down a little instead */
a[href^="mailto:"],a[href^="tel:"]{white-space:nowrap;overflow-wrap:normal;word-break:normal}
a[href^="mailto:"]{font-size:min(1em,4.1vw)}
.ftr a[href^="mailto:"]{font-size:min(.85rem,4.1vw)}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ftr ul a{display:inline-flex;align-items:center;min-height:32px}
.ftr address{font-style:normal;line-height:1.6}
.ftr .fbrand{font-size:1rem;margin:0 0 var(--s1)}
.ftr .fbrand strong{color:#fff;font-weight:800;letter-spacing:-.02em}
.ftr .fbrand{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.ftr .fbrand img{width:auto;height:52px;flex:none}
.ftr .brand__txt b{color:#fff}
.ftr .brand__txt em{color:var(--sage)}
.ftr .fdesc{max-width:56ch;margin:0 0 var(--s6);font-size:.9rem;color:var(--sage)}
.ftr .flinks{margin-top:var(--s3)}
.ftr .fine{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line-dk);
  font-size:.78rem;line-height:1.6;color:var(--sage)}
.ftr .fine p{max-width:none}

ul.bul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s2);
  max-width:68ch}
ul.bul li{padding-left:var(--s4);position:relative}
ul.bul li::before{content:"";position:absolute;left:0;top:1.05em;width:8px;height:1px;background:var(--sage)}
ul.bul>li>a,ul.chips>li>a{display:inline-block;padding-block:7px;min-height:24px}
.rows .st{display:block;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--soft);margin-top:var(--s0)}
.stand .inner{display:flex;flex-direction:column;gap:clamp(28px,3.5vw,var(--s6))}
.stand .stmt{font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);font-weight:700;line-height:1.4;
  letter-spacing:-.02em;color:var(--white);max-width:38ch;margin:0;text-wrap:balance}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-dk);margin:0}
.fact{padding:var(--s4) var(--s4) 0 0;border-right:1px solid var(--line-dk)}
.fact:last-child{border-right:0}
.fact dt{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--sage);margin:0 0 var(--s1)}
.fact dd{margin:0;font-size:.95rem;line-height:1.6;color:var(--sage);max-width:28ch}
@media(max-width:860px){.facts{grid-template-columns:repeat(2,1fr)}
  .fact{padding-right:var(--s4);padding-bottom:var(--s4)}
  .fact:nth-child(2n){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line-dk)}}
@media(max-width:540px){.facts{grid-template-columns:1fr}
  .fact{border-right:0;border-bottom:1px solid var(--line-dk);padding-right:0}
  .fact:last-child{border-bottom:0}.fact dd{max-width:none}}

/* image placeholders: replace with real photography */
figure.ph{margin:var(--s5) 0;border:1px dashed var(--line);background:var(--tint);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2)}
figure.ph .tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--soft)}
figure.ph figcaption{font-size:.9rem;color:var(--soft);max-width:60ch}
figure.ph code{font-size:.82rem;color:var(--ink);background:var(--white);padding:2px 6px;
  border:1px solid var(--line);display:inline-block}

/* answer-first lede */
.answer{font-size:1.24rem;line-height:1.55;color:var(--ink);max-width:60ch;font-weight:500;
  border-left:3px solid var(--sage);padding-left:var(--s4)}

/* why / session two-column lists */
.pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 clamp(24px,4vw,var(--s7));border-top:1px solid var(--line)}
.pairs>div{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.pairs h3{margin-bottom:var(--s1)}
.pairs p{color:var(--soft);margin:0;font-size:1.02rem}

/* form */
form.inq{max-width:640px;display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s5)}
.fld{display:flex;flex-direction:column;gap:var(--s1)}
.fld label{font-weight:600;font-size:.92rem}
.fld .hint{font-size:.85rem;color:var(--soft)}
.fld input,.fld select,.fld textarea{font:inherit;font-size:1rem;padding:12px 14px;min-height:48px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);color:var(--ink);width:100%;
  transition:border-color var(--motion) var(--ease),box-shadow var(--motion) var(--ease)}
.fld textarea{min-height:120px;resize:vertical}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--soft)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px var(--sage)}
.fld input:user-invalid,.fld textarea:user-invalid{border-color:var(--danger)}
/* While You Wait: the offer ladder, the context figures and the question list */
.figs{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);margin:var(--s4) 0 0}
.figs div{display:grid}
.figs b{font-size:clamp(1.6rem,4.5vw,2.2rem);font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.figs span{font-size:.92rem;color:var(--soft);max-width:22ch}
table.rate{width:100%;border-collapse:collapse;font-size:.96rem;margin:var(--s3) 0 0}
table.rate th,table.rate td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);
  vertical-align:top}
table.rate thead th{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);
  border-bottom:2px solid var(--line)}
table.rate tbody th{font-weight:700}
table.rate .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-wrap{overflow-x:auto}
.tiers__h{margin-top:var(--s6)}
.tiers{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  margin-top:var(--s4);align-items:stretch}
.tier{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.tier--hero{border:2px solid var(--sage-mid)}
.tier__who{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--sage-deep);margin:0}
.tier h3{margin:0}
.tier__price{font-size:1.45rem;font-weight:800;margin:0;font-variant-numeric:tabular-nums}
.tier__price small{font-size:.8rem;font-weight:600;color:var(--soft)}
.tier__body{font-size:.92rem;color:var(--soft);margin:0}
.tier__note{font-size:.86rem;margin:0;padding:var(--s2);background:var(--mint);border-radius:var(--r-sm)}
.tier__cta{margin:auto 0 0}
.qas{display:grid;gap:0;border-top:1px solid var(--line);margin-top:var(--s4)}
.qas details{border-bottom:1px solid var(--line)}
.qas summary{cursor:pointer;padding:var(--s3) 0;font-weight:600}
.qas details[open] summary{color:var(--sage-deep)}
.qas details>div{padding-bottom:var(--s3)}
label.check{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:start}
.sec--ink .inq input,.sec--ink .inq select,.sec--ink .inq textarea{background:var(--white);color:var(--ink)}
.sec--ink .inq label,.sec--ink .consent{color:rgba(255,255,255,.92)}
.sec--ink .hint{color:rgba(255,255,255,.75)}
.req{color:var(--danger);font-weight:700}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.consent{font-size:.86rem;color:var(--soft);max-width:60ch}
button.btn{border:0;cursor:pointer;font:inherit;font-weight:600;font-size:.95rem}
.btn:active{transform:translateY(1px)}
.sent{border-left:3px solid var(--sage);background:var(--tint);padding:var(--s4);margin-top:var(--s4)}

/* 404 */
.e404{min-height:52vh;display:flex;flex-direction:column;justify-content:center}


/* ---------- motion: restrained editorial ----------
   One curve. Two durations. Entrances are always fade + 24px rise, once, then done.
   Nothing loops, nothing parallaxes, nothing animates on scroll-back. */

/* hidden only while JS is running: without it, everything is visible from the start */
html.js .reveal{opacity:0;transform:translateY(24px);
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
html.js .reveal.is-visible{opacity:1;transform:none}

/* stagger: 120ms apart, five items maximum */
html.js .stagger>*{opacity:0;transform:translateY(24px);
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
html.js .stagger.is-visible>*{opacity:1;transform:none}
html.js .stagger.is-visible>*:nth-child(1){transition-delay:0ms}
html.js .stagger.is-visible>*:nth-child(2){transition-delay:120ms}
html.js .stagger.is-visible>*:nth-child(3){transition-delay:240ms}
html.js .stagger.is-visible>*:nth-child(4){transition-delay:360ms}
html.js .stagger.is-visible>*:nth-child(5){transition-delay:480ms}
html.js .stagger.is-visible>*:nth-child(n+6){transition-delay:480ms}

/* the one signature flourish per page: the h1 underline draws itself */
.draw{position:relative;display:inline}
.draw::after{content:"";position:absolute;left:0;right:0;bottom:-.14em;height:3px;
  background:var(--sage);transform:scaleX(0);transform-origin:left center;
  transition:transform 800ms var(--ease) 200ms}
.is-visible .draw::after,.draw.is-visible::after{transform:scaleX(1)}

/* interactive feedback: 2px lift and a colour change. nothing else. */
.btn{transition:background-color var(--dur-quick) var(--ease),
  color var(--dur-quick) var(--ease),transform var(--dur-quick) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.rows>div,.locs>a{transition:background-color var(--dur-quick) var(--ease),
  transform var(--dur-quick) var(--ease)}
.ico-w{transition:color var(--dur-quick) var(--ease)}
.rows>div:hover{background:rgba(193,208,189,.14)}
.locs>a:hover{background:var(--tint);transform:translateY(-2px)}
.rows>div:hover .ico-w{color:var(--ink)}
.brand img{transition:transform var(--dur-quick) var(--ease)}
.brand:hover img{transform:translateY(-2px)}
details summary{transition:color var(--dur-quick) var(--ease)}
details summary:hover{color:var(--soft)}
details summary::after{transition:transform var(--dur-quick) var(--ease)}
details[open] summary::after{transform:rotate(180deg)}

/* opt-in only: the volcano the clinic is named after. never fires on its own. */
.ash{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.ash i{position:absolute;bottom:-12px;width:7px;height:7px;border-radius:50%;
  background:var(--sage);opacity:0;animation:drift 6s var(--ease) forwards}
@keyframes drift{
  0%{opacity:0;transform:translateY(0)}
  14%{opacity:.8}
  100%{opacity:0;transform:translateY(-104vh) translateX(var(--dx,0))}
}
.egg{background:none;border:0;padding:0;cursor:pointer;color:var(--sage);font:inherit;
  min-width:28px;min-height:28px;line-height:1;transition:opacity var(--dur-quick) var(--ease)}
.egg:hover{color:var(--white)}

/* Reduced motion collapses everything and forces the final visible state.
   Content must never be left hidden. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important}
  html.js .reveal,html.js .stagger>*{opacity:1!important;transform:none!important}
  .draw::after{transform:scaleX(1)!important}
  .ash{display:none!important}
}



.rows--ico>div{align-items:start}
.rows--ico dt{display:flex;flex-direction:column}

/* photography */
.shot{margin:0;overflow:hidden;background:var(--tint)}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot--tall{aspect-ratio:4/5}
.hero__art .shot{aspect-ratio:4/3}
@media(max-width:900px){.hero__art .shot{aspect-ratio:16/10}}

/* resources */
.posts{display:grid;gap:0;border-top:1px solid var(--line)}
.post{padding-block:var(--s4);border-bottom:1px solid var(--line)}
.post h3 a{display:inline-block;min-height:24px;padding-block:2px}
.linklist a{display:inline-block;min-height:24px;padding-block:2px}
.post__meta{font-size:.8rem;color:var(--soft);margin:0 0 var(--s1);text-transform:uppercase;
  letter-spacing:.1em;font-weight:600}
.post h3{margin-bottom:var(--s1)}
.post h3 a{text-decoration:none}
.post h3 a:hover{text-decoration:underline;text-decoration-color:var(--sage);
  text-decoration-thickness:2px}
.post p{color:var(--soft);margin:0;max-width:64ch}
.note-inline{font-size:.92rem;color:var(--soft);margin-top:var(--s4)}
.article{max-width:760px}
.article__body{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s5)}
.article__body p{margin:0;max-width:68ch}
.article__body h2{margin:var(--s5) 0 0}
.article__body h3{margin:var(--s3) 0 0;font-size:1.05rem}
.article__body ul.bul{margin:0}
.article__back{margin-top:var(--s6)}
ul.linklist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4) var(--s6)}
ul.linklist li{border-top:1px solid var(--line);padding-top:var(--s3)}
ul.linklist a{text-decoration:none;font-size:1.04rem}
ul.linklist a:hover{text-decoration:underline;text-decoration-color:var(--sage)}
ul.linklist span{font-size:.94rem;color:var(--soft);display:block;margin-top:var(--s0)}

/* section heads and labels */
.head{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:clamp(20px,2.5vw,var(--s5))}
.label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  color:var(--soft);margin:0}
.sec--ink .label{color:var(--sage)}

.hero__h1{font-size:clamp(1.95rem,1.1rem + 2.6vw,3.3rem);line-height:1.08;letter-spacing:-.036em;
  max-width:26ch}
.hero__h1 .hl{display:block;overflow:hidden;padding-block:.06em;margin-block:-.06em}
.hero__h1 .hl>span{display:block;will-change:transform}
.hero .eyebrow{margin-bottom:var(--s3)}
.hero__copy .answer{max-width:52ch}
.hero__copy .lead{max-width:46ch}

/* The entrance runs as CSS animation, not a JS-toggled class. requestAnimationFrame
   does not fire in a background tab, so a rAF-gated reveal can leave the page blank
   for anyone who opens the site in a new tab. Animations are time-based and need no
   script. The html.js gate still means nothing is hidden when scripting is off.

   Order: the photograph settles, the scrim resolves, the title rises out of its mask,
   the promise and the action follow, and the ridge lifts the page into view. */
@keyframes hero-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes hero-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes band-settle{from{transform:scale(1.07)}to{transform:none}}
@keyframes ridge-rise{from{transform:translateY(52%)}to{transform:none}}
@keyframes scrim-in{from{opacity:0}to{opacity:1}}

html.js .hero__media img,html.js .band .band__img img{
  animation:band-settle 2400ms cubic-bezier(.17,.84,.44,1) both}
html.js .hero__scrim,html.js .band__scrim{animation:scrim-in 800ms var(--ease) both}
html.js .ridge{animation:ridge-rise 880ms var(--ease) both;animation-delay:320ms}

html.js .hero__h1 .hl>span{animation:hero-rise 640ms var(--ease) both;
  animation-delay:calc(180ms + var(--i,0)*95ms)}
html.js .hero__h1 .hl:nth-child(1)>span{--i:0}
html.js .hero__h1 .hl:nth-child(2)>span{--i:1}
html.js .hero__h1 .hl:nth-child(3)>span{--i:2}

html.js .hero .eyebrow,html.js .hero .chip,html.js .hero__in .answer,html.js .hero__in .cta,
html.js .hero__in .ico-hero,html.js .hero--sm h1,html.js .band__in h1,html.js .tiles a,
html.js .card--act{animation:hero-in 560ms var(--ease) both;animation-delay:var(--d,0ms)}
html.js .hero .eyebrow,html.js .hero .chip{--d:90ms}
html.js .tiles a{--d:calc(640ms + var(--t,0)*70ms)}
html.js .tiles a:nth-child(1){--t:0}.js .tiles a:nth-child(2){--t:1}
html.js .tiles a:nth-child(3){--t:2}.js .tiles a:nth-child(4){--t:3}
html.js .tiles a:nth-child(5){--t:4}.js .tiles a:nth-child(6){--t:5}
html.js .card--act{--d:520ms}
html.js .hero__in .ico-hero{--d:110ms}
html.js .hero--sm h1,html.js .band__in h1{--d:210ms}
html.js .hero__in .answer{--d:450ms}
html.js .hero__in .cta{--d:570ms}
.skip:focus{position:fixed;top:var(--s3);left:var(--s3);z-index:100;width:auto;height:auto;
  min-height:44px;clip:auto;margin:0;display:inline-flex;align-items:center;
  background:var(--ink);color:var(--white);padding:0 var(--s4);border-radius:4px}
@media(max-width:920px){
  .nav{display:none}
  .hdr .wrap{flex-wrap:wrap;gap:var(--s2);padding-block:var(--s2);min-height:0}
  .menu{display:block;margin-left:auto}
  .menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);
    min-height:44px;padding:0 var(--s3);font-size:.9rem;font-weight:600;
    box-shadow:inset 0 0 0 1px var(--line);border-radius:4px}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary::after{content:"\2261";font-size:1.15rem;line-height:1}
  .menu[open] summary::after{content:"\00D7"}
  .hdr .btn{display:none}
  .menu[open] ~ .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;
    flex-basis:100%;order:3;padding-top:var(--s1)}
  .menu[open] ~ .nav a{padding-block:var(--s3);border-bottom:1px solid var(--line);font-size:1rem}
  .menu[open] ~ .btn{display:inline-flex;flex-basis:100%;order:4;margin-block:var(--s3) var(--s1)}
}
.fld input,.fld select,.fld textarea{font:inherit;font-size:1rem;padding:12px 14px;min-height:48px;
  border:1px solid var(--line);border-radius:4px;background:var(--white);color:var(--ink);width:100%;
  transition:border-color var(--motion) var(--ease),box-shadow var(--motion) var(--ease)}

/* The entrance runs as CSS animation, not a JS-toggled class. requestAnimationFrame
   does not fire in a background tab, so a rAF-gated reveal can leave the hero blank
   for anyone who opens the site in a new tab. Animations are time-based and need no
   script. The html.js gate still means nothing is hidden when scripting is off. */
@keyframes hero-rise{from{transform:translateY(105%)}to{transform:none}}

html.js .hero__h1 .hl>span{animation:hero-rise 620ms var(--ease) both;
  animation-delay:calc(140ms + var(--i,0)*90ms)}

html.js .hero .eyebrow,html.js .hero__copy .answer,html.js .hero__copy .lead,html.js .hero__copy .cta,
html.js .hero__art{animation:hero-in 520ms var(--ease) both;animation-delay:var(--d)}
html.js .hero .eyebrow{--d:60ms}
html.js .hero__art{--d:280ms}
@media(max-width:900px){.js .hero__art{--d:620ms}}
html.js .hero__copy .answer{--d:420ms}
html.js .hero__copy .lead{--d:500ms}
html.js .hero__copy .cta{--d:580ms}

/* A tab that is not being presented does not advance its animations, so an
   entrance with a backwards fill would sit at opacity 0 until the tab is focused.
   Nobody sees an animation they were not looking at: show the resolved state. */
html.at-rest .hero__h1 .hl>span,html.at-rest .hero .eyebrow,html.at-rest .hero__in .answer,
html.at-rest .hero__in .cta,html.at-rest .hero__in .ico-hero,html.at-rest .hero--sm h1,
html.at-rest .hero .chip,html.at-rest .tiles a,html.at-rest .card--act,html.at-rest .hero__h1,
html.at-rest .band__in h1,html.at-rest .ridge,html.at-rest .hero__media img,
html.at-rest .band .band__img img,html.at-rest .hero__scrim,html.at-rest .band__scrim{
  animation:none;opacity:1;transform:none}
/* the same for every scroll reveal: a page loaded without being watched shows its content,
   because a transition that never runs would otherwise leave sections at opacity 0 */
html.at-rest .reveal,html.at-rest .stagger>*{opacity:1;transform:none;transition:none}
html.at-rest .band__in .draw::after,html.at-rest .hero__in .draw::after{
  animation:none;transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  /* the same composition, already resolved */
  html.js .band__in .draw::after,html.js .hero__in .draw::after{animation:none;transform:scaleX(1)}
  html.js .stagger>*{opacity:1;transform:none;transition:none}
  html.js .shot img{clip-path:none;transform:none;transition:none}
  html.js .hero__h1 .hl>span,html.js .hero .eyebrow,html.js .hero__in .answer,html.js .hero__in .cta,
  html.js .hero__in .ico-hero,html.js .hero--sm h1,html.js .band__in h1,html.js .ridge,
  html.js .hero .chip,html.js .tiles a,html.js .card--act,html.js .hero__h1,
  html.js .hero__media img,html.js .band .band__img img,html.js .hero__scrim,html.js .band__scrim{
    animation:none;opacity:1;transform:none}
  .hdr,.hdr .wrap,.nav a::after{transition:none}
}

/* --- photographic band ---------------------------------------------------
   Every page opens the same way: a photograph, the title over it, and a ridge
   closing it into the page. The ridge is the recurring gesture, and it is a
   hillside because the mark is a mountain. */
.hero,.band{position:relative;isolation:isolate;overflow:clip;background:var(--ink)}
.hero__media,.band .band__img{position:absolute;inset:0;z-index:-2;margin:0}
.hero__media .shot{position:absolute;inset:0;margin:0}
.hero__media img,.band .band__img img{width:100%;height:100%;object-fit:cover;display:block}
.hero__scrim,.band__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(29,39,27,.9) 0%,rgba(29,39,27,.72) 42%,
    rgba(29,39,27,.34) 76%,rgba(29,39,27,.18) 100%)}
.ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;
  height:clamp(46px,7vw,108px);display:block;z-index:1;pointer-events:none}

.hero{display:flex;align-items:center;min-height:min(76svh,700px);
  padding-block:clamp(52px,6vw,96px) clamp(88px,10vw,148px)}
.hero--sm{min-height:min(50svh,440px);
  padding-block:clamp(44px,6vw,84px) clamp(80px,10vw,150px)}
.hero__in{width:100%;position:relative;z-index:2;color:var(--white)}
.hero__in>*+*{margin-top:var(--s3)}
.hero__in .eyebrow{color:var(--sage)}
.hero__in h1,.band__in h1{color:var(--white)}
.hero__in .answer{color:rgba(255,255,255,.92);max-width:54ch;
  border-left:0;padding-left:0;font-weight:400}
.hero__in .cta{margin-top:var(--s5)}
.hero__h1{font-size:clamp(2.05rem,1.1rem + 3vw,3.6rem);line-height:1.07;
  letter-spacing:-.036em;max-width:24ch}
.hero .draw::after,.band .draw::after{background:var(--sage)}
.hero .ico-hero{color:var(--sage)}

/* --- hero furniture ------------------------------------------------------
   A chip states the category, the headline carries the accent on the phrase
   that matters, service tiles give the six real entry points, and the card
   holds the one action most parents are here to take. */
.hero__h1 em{font-style:normal;color:var(--sage)}

.hero__split{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(390px,.6fr);
  gap:clamp(28px,4vw,var(--s7));align-items:center}
.hero__lead{min-width:0}

.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);
  margin-top:var(--s5)}
.tiles a{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);
  border-radius:var(--r);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);color:var(--white);text-decoration:none;
  transition:background-color var(--dur-quick) var(--ease),
             transform var(--dur-quick) var(--ease),border-color var(--dur-quick) var(--ease)}
.tiles a:hover,.tiles a:focus-visible{background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.34);transform:translateY(-2px)}
.tiles__i{display:flex;color:var(--sage)}
.tiles__i .ico{width:22px;height:22px}
.tiles__t{font-size:.88rem;font-weight:600;line-height:1.35}

.card--act{background:var(--white);color:var(--ink);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,var(--s5));box-shadow:var(--shadow)}
.card--act h2{font-size:1.18rem;margin:0 0 var(--s2)}
.card--act p{margin:0 0 var(--s4);color:var(--soft);font-size:.95rem;line-height:1.6}
.card--act .btn{margin-bottom:var(--s2)}
/* scoped under the card so it outranks .card--act p, which would otherwise reset the size */
.card--act .card__note{display:grid;justify-items:start;gap:2px;margin:var(--s3) 0 0;font-size:clamp(.8rem,3.6vw,.86rem);color:var(--soft);line-height:1.55}
.card__note span,.card__note a{white-space:nowrap}
.card--act{min-width:0}
.card__note a{color:var(--soft)}
.card--act .btn{white-space:nowrap;padding-inline:var(--s3)}
.btn--block{display:flex;width:100%}
.btn--soft{background:var(--tint);color:var(--ink)}
.btn--soft:hover{background:var(--line)}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn--line:hover{background:var(--tint)}

/* Buttons always show their box. On a photo or the dark band the default ink fill would vanish
   into the background, so actions there use sage; inside the white card they keep their own look. */
.hero .btn,.band .btn,.sec--ink .btn{background:var(--sage);color:var(--ink)}
.hero .btn:hover,.band .btn:hover,.sec--ink .btn:hover{background:var(--white);color:var(--ink)}
.hero .btn--ghost,.band .btn--ghost,.sec--ink .btn--ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
.hero .btn--ghost:hover,.band .btn--ghost:hover,.sec--ink .btn--ghost:hover{background:rgba(255,255,255,.14);color:var(--white)}
.card--act .btn{background:var(--ink);color:var(--white)}
.card--act .btn:hover{background:#2C3829;color:var(--white)}
.card--act .btn--soft{background:var(--mint);color:var(--ink);box-shadow:inset 0 0 0 1px var(--sage-mid)}
.card--act .btn--soft:hover{background:var(--sage)}
.card--act .btn--line{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.card--act .btn--line:hover{background:var(--tint)}
/* the header action stays on one line; between the phone menu and full desktop the nav and
   button tighten slightly so everything fits (measured 921 to 1366px) */
.hdr .btn{white-space:nowrap}
@media(min-width:921px) and (max-width:1119px){
  .hdr .wrap{gap:var(--s3)}
  .nav{gap:var(--s3)!important}
  .nav a{font-size:.9rem}
  .hdr .btn{padding:0 var(--s3);font-size:.9rem}
  .brand__txt em{font-size:.62rem}
}

@media(max-width:1080px){
  .hero__split{grid-template-columns:1fr}
  .card--act{max-width:520px}
}
/* Phone legibility and reach: fine print stops shrinking, and secondary
   navigation gets a real tap target. */
@media(max-width:620px){
  .util{font-size:.82rem}
  .ftr .fine p,.ftr .fine p.flinks{font-size:.86rem;line-height:1.65}
  .crumb a,.crumb span{display:inline-flex;align-items:center;min-height:44px}
  details summary{min-height:44px;align-items:center}
  .post h3 a{padding-block:9px}
}
@media(max-width:620px){
  /* Authored line breaks are a desktop composition. On a phone they force breaks
     mid-phrase, so the headline reflows as prose and animates as one block. */
  .hero__h1 .hl{display:inline;overflow:visible;padding-block:0;margin-block:0}
  .hero__h1 .hl>span{display:inline}
  .js .hero__h1 .hl>span{animation:none;transform:none}
  .js .hero__h1{animation:hero-in 620ms var(--ease) both;animation-delay:180ms}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chip{letter-spacing:.1em;font-size:.7rem}
}

/* interior page opener */
.band{display:flex;align-items:flex-end;min-height:clamp(220px,28vw,360px);
  padding-block:clamp(52px,7vw,92px) clamp(72px,9vw,128px)}
.band__in{width:100%;position:relative;z-index:2}
.band__in h1{margin:0;max-width:22ch}

/* controls that sit on the photograph */
.btn--go::after{content:"\2192";display:inline-block;margin-left:var(--s2);
  transition:transform var(--dur-quick) var(--ease)}
.btn--go:hover::after,.btn--go:focus-visible::after{transform:translateX(4px)}
.lnk--light{color:var(--white)}
.lnk--light:hover{color:var(--sage)}
.hero .btn--ghost{border-color:rgba(255,255,255,.55);color:var(--white);background:transparent}
.hero .btn--ghost:hover{background:rgba(255,255,255,.13);border-color:var(--white)}

@media(max-width:900px){
  .hero{min-height:auto;padding-block:clamp(44px,9vw,76px) clamp(72px,14vw,116px)}
  .hero--sm{min-height:auto}
  .hero__scrim,.band__scrim{background:linear-gradient(180deg,rgba(29,39,27,.88) 0%,
    rgba(29,39,27,.82) 55%,rgba(29,39,27,.92) 100%)}
  .hero__in .answer{max-width:none}
}

/* service icons */
.ico{width:24px;height:24px;display:block}
.ico-w{display:block;color:var(--soft);margin-bottom:var(--s2)}
.ico-hero{display:block;color:var(--soft);margin-bottom:var(--s3)}
.ico-hero .ico{width:30px;height:30px}

/* embedded estimator, funding pages only */
.calc{position:relative;border:1px solid var(--line);background:var(--white);margin-top:var(--s4);
  overflow:hidden;max-width:100%}
.calc iframe{display:block;width:100%;max-width:100%;min-width:0;height:min(1150px,88vh);border:0}
.calc__out{margin-top:var(--s3);font-size:.96rem;color:var(--soft)}

/* location grid (hub) */
.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
  border-top:1px solid var(--line)}
.locs>a{padding:var(--s4) var(--s4) var(--s4) 0;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);text-decoration:none;display:block;
  transition:background-color var(--motion) var(--ease)}
.locs>a:hover{background:var(--tint)}
.locs>a:last-child{border-right:0}
.locs .st{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--soft);line-height:1.35;min-height:2.7em}
.locs address{font-style:normal;color:var(--soft);font-size:.94rem;line-height:1.6;margin-top:var(--s1)}

/* --- term schedule table -------------------------------------------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s4) 0;
  border-top:1px solid var(--line)}
table.sched{width:100%;min-width:660px;border-collapse:collapse;font-size:.96rem}
.sched th,.sched td{text-align:left;padding:var(--s3) var(--s4) var(--s3) 0;
  border-bottom:1px solid var(--line);vertical-align:top}
.sched th{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--soft);white-space:nowrap}
.sched td:first-child{white-space:nowrap;color:var(--soft)}
.sched .pg{font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line);display:inline-block;padding-block:11px}
.sched .pg:hover{border-bottom-color:var(--ink)}
.sched tbody tr{transition:background-color var(--dur-quick) var(--ease)}
.sched tbody tr:hover{background:rgba(193,208,189,.14)}
.sched .num{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:720px){.sched th,.sched td{padding-right:var(--s3)}}

/* --- programme cards ------------------------------------------------- */
.progs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;
  border-top:1px solid var(--line)}
.progs>a{display:block;padding:var(--s4) var(--s4) var(--s4) 0;text-decoration:none;color:inherit;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background-color var(--dur-quick) var(--ease),transform var(--dur-quick) var(--ease)}
.progs>a:hover{background:var(--tint);transform:translateY(-2px)}
.progs .st{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--soft);line-height:1.35}
.progs h3{margin:var(--s1) 0 var(--s0);font-size:1.08rem}
.progs p{margin:0;color:var(--soft);font-size:.96rem;line-height:1.6}

/* --- founder note ----------------------------------------------------
   A portrait beside the letter rather than a band: the photograph is a
   person, not a scene, so it holds its own column and stays upright. */
.founder{display:grid;grid-template-columns:320px minmax(0,1fr);
  gap:clamp(24px,4vw,var(--s7));align-items:start;margin-top:var(--s4)}
.founder__portrait .shot{margin:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow)}
.founder__portrait img{width:100%;height:auto;display:block}
.founder__letter>p:first-child{margin-top:0}
.founder__sign{margin-top:var(--s4);line-height:1.6}
.founder__sign strong{font-size:1.05rem}
@media(max-width:820px){
  .founder{grid-template-columns:1fr;gap:var(--s4)}
  .founder__portrait{max-width:280px}
}

/* --- embedded programme guide ----------------------------------------
   Canva serves a fixed 1.294:1 deck. The padded box holds that ratio so the
   frame never letterboxes or clips, and the height is capped on tall phones
   so the guide cannot push the rest of the page off the screen. */
.guide{position:relative;width:100%;padding-top:77.2727%;margin:var(--s4) 0 var(--s3);
  overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow);background:var(--tint)}
.guide iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.guide__link{margin:0;font-size:.95rem;color:var(--soft)}
.guide__link a{color:var(--ink);font-weight:600}
@media(max-width:620px){
  /* a 1.294:1 box is very tall on a narrow screen, so cap it and let the
     link carry anyone who would rather read it full size */
  .guide{padding-top:0;height:min(68svh,520px)}
}

/* --- session date chips ---------------------------------------------- */
.dates{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1)}
.dates li{font-size:.86rem;font-variant-numeric:tabular-nums;color:var(--soft);
  border:1px solid var(--line);border-radius:2px;padding:4px var(--s2);white-space:nowrap}

/* --- price columns ---------------------------------------------------- */
.fees{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;
  border-top:1px solid var(--line);margin:var(--s4) 0}
.fees>div{padding:var(--s4) var(--s4) var(--s4) 0;border-right:1px solid var(--line)}
.fees>div:last-child{border-right:0}
.fees dt{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--soft);margin-bottom:var(--s1)}
.fees dd{margin:0}
.fees .amt{display:block;font-size:1.5rem;font-weight:600;line-height:1.2;
  font-variant-numeric:tabular-nums}
.fees .per{display:block;font-size:.9rem;color:var(--soft);margin-top:var(--s0)}
.fees .blk{display:block;font-size:.9rem;color:var(--soft);margin-top:var(--s2);line-height:1.55}
@media(max-width:720px){.fees>div{border-right:0;border-bottom:1px solid var(--line)}
  .fees>div:last-child{border-bottom:0}}
@media(max-width:720px){.locs>a{border-right:0;padding-right:0}}

/* ---------- fee estimator ---------- */
.est{padding-top:var(--s5)}
.est .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.est-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:var(--s6);align-items:start}
.est-sec{padding-block:var(--s5);border-top:1px solid var(--line)}
.est-sec:first-child{border-top:0;padding-top:0}
.est-sec h2{font-size:clamp(1.25rem,1.1rem + .5vw,1.45rem);margin-bottom:var(--s1)}
.est-hint{color:var(--soft);margin:0 0 var(--s4);font-size:1rem}
.est .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s3);margin-bottom:var(--s3)}
.est .field{display:flex;flex-direction:column;gap:6px;min-width:0;border:0;padding:0;margin:0 0 var(--s3)}
.est .field label,.est .lbl{font-weight:600;font-size:.95rem;padding:0}
.est input[type=text],.est input[type=date],.est select{font:inherit;font-size:1rem;min-height:50px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);color:var(--ink);width:100%;
  transition:border-color var(--dur-quick) var(--ease),box-shadow var(--dur-quick) var(--ease)}
.est input:hover,.est select:hover{border-color:var(--soft)}
.est input:focus,.est select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--sage)}
.est .help{font-size:.92rem;color:var(--soft);margin:0 0 var(--s3);max-width:62ch}
.est-rate{margin:0;min-height:50px;display:flex;align-items:center;font-weight:600}

.est .svc{padding-block:var(--s3);border-top:1px solid var(--line)}
.est .svc:first-of-type{border-top:0;padding-top:0}
.est .svc-body{padding:var(--s4) 0 var(--s1) 56px}
@media(max-width:640px){.est .svc-body{padding-left:0}}

.est .toggle{position:relative;display:flex;align-items:center;gap:14px;cursor:pointer;min-height:44px;
  font-weight:700;font-size:1.05rem}
.est .toggle input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.est .track{flex:none;width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;
  transition:background-color var(--dur-quick) var(--ease)}
.est .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--white);border:1px solid rgba(29,39,27,.12);transition:transform var(--dur-quick) var(--ease)}
.est .toggle input:checked+.track{background:var(--sage-dp)}
.est .toggle input:checked+.track::after{transform:translateX(18px)}
.est .toggle input:focus-visible+.track{outline:2px solid var(--ink);outline-offset:3px}
/* Embers for Access carries its own orange, used only on its subsidy switch */
.est{--embers:#D9622B;--embers-ink:#A4441A}
.est .toggle--embers input:checked+.track{background:var(--embers)}
.est .toggle--embers .t-lbl{color:var(--embers-ink)}
#embersCard h2{color:var(--embers-ink)}
.est-embers-terms{margin:var(--s2) 0 0;font-size:.92rem;font-weight:600;color:var(--embers-ink)}

.est .days{display:flex;flex-wrap:wrap;gap:var(--s1)}
.est .day{position:relative}
.est .day input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.est .day span{display:inline-flex;align-items:center;justify-content:center;min-width:60px;min-height:46px;
  padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);
  font-weight:600;transition:background-color var(--dur-quick) var(--ease),color var(--dur-quick) var(--ease),
  border-color var(--dur-quick) var(--ease)}
.est .day:hover span{border-color:var(--soft)}
.est .day input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--white)}
.est .day input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}

.est-list{border-top:1px solid var(--line);margin-top:var(--s3)}
.est .term-h{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--soft);
  padding:var(--s4) 0 var(--s1)}
.est .prog{display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:var(--s2) var(--s2);
  border-bottom:1px solid var(--line);cursor:pointer;transition:background-color var(--dur-quick) var(--ease)}
.est .prog:hover{background:var(--tint)}
.est .prog.on{background:var(--mint)}
.est .prog input{flex:none;width:20px;height:20px;accent-color:var(--sage-dp);margin:0}
.est .pn{display:block;font-weight:700}
.est .pm{display:block;font-size:.9rem;color:var(--soft)}
.est .pp{text-align:right;flex:none;line-height:1.2}
.est .pp b{display:block;font-variant-numeric:tabular-nums}
.est .pp small{font-size:.78rem;color:var(--soft)}

.est-note{border-left:3px solid var(--sage);padding:var(--s1) 0 var(--s1) var(--s3);margin:var(--s3) 0;
  font-size:.95rem;color:var(--soft);max-width:64ch}
.est-note b{color:var(--ink)}
.est-tag{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--sage-dp);
  margin-bottom:2px}

.est .info-btn{font:inherit;font-size:.92rem;font-weight:600;color:var(--ink);background:none;border:0;
  padding:var(--s1) 0;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;
  text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:.2em}
.est .info-btn .i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--soft);font-size:.72rem;font-style:italic;text-decoration:none}
.est .info-box{border-left:3px solid var(--sage);padding:var(--s2) 0 var(--s2) var(--s3);margin-bottom:var(--s3);
  font-size:.9rem;color:var(--soft)}
.est .info-box h3{font-size:1rem;color:var(--ink);margin-bottom:var(--s2)}
.est .ref{display:grid;grid-template-columns:62px 1fr;gap:var(--s2);margin-bottom:var(--s2)}
.est .tag2{font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--sage-dp);padding-top:3px}
.est .dis{font-size:.85rem;margin-top:var(--s2)}

.est-summary{position:sticky;top:96px;background:var(--tint);border-radius:var(--r);padding:var(--s5)}
.est-summary h2{font-size:1.2rem;margin-bottom:var(--s3)}
.est .k{margin:0;font-size:.82rem;font-weight:600;color:var(--soft)}
.est .big{margin:2px 0 0;font-size:clamp(2rem,1.6rem + 1.4vw,2.6rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.05;font-variant-numeric:tabular-nums}
.est .big small{font-size:.9rem;font-weight:500;color:var(--soft);letter-spacing:0}
.est .sum-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin:var(--s4) 0;
  padding-block:var(--s3);border-block:1px solid var(--line)}
.est .v{margin:2px 0 0;font-weight:700;font-variant-numeric:tabular-nums}
.est .sec-lbl{margin:var(--s4) 0 var(--s1);font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--soft)}
.est .mtable{width:100%;border-collapse:collapse;font-size:.95rem}
.est .mtable td{padding:6px 0;border-bottom:1px solid var(--line)}
.est .mv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.est .mv.zero{color:var(--soft);font-weight:400}
.est .tot td{font-weight:800;border-bottom:0;padding-top:var(--s2)}
.est .line{display:grid;grid-template-columns:1fr auto;gap:2px var(--s2);padding:var(--s2) 0;
  border-bottom:1px solid var(--line)}
.est .line.empty{display:block;color:var(--soft);font-size:.95rem}
.est .ln{font-weight:700}
.est .amt{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.est .amt small{display:block;font-size:.8rem;font-weight:500;color:var(--soft)}
.est .ls{grid-column:1/-1;font-size:.85rem;color:var(--soft)}
.est .grand{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s3) 0;
  font-size:1.1rem;font-weight:800}
.est .grand .k{font-size:1rem;color:var(--ink)}
.est .btns{display:grid;gap:var(--s1);margin-top:var(--s2)}
.est .btns .btn{width:100%}
.est .foot-note{font-size:.85rem;color:var(--soft);margin:var(--s4) 0 0}
.est .print-only{display:none}

@media(max-width:980px){
  .est-layout{grid-template-columns:1fr;gap:var(--s5)}
  .est-summary{position:static;padding:var(--s4)}
  .est{padding-bottom:96px}
}
.est-bar{display:none}
@media(max-width:980px){
  .est-bar{display:flex;align-items:center;gap:var(--s2);position:fixed;z-index:45;left:var(--s2);right:var(--s2);
    bottom:calc(var(--s2) + env(safe-area-inset-bottom,0px));min-height:60px;padding:0 var(--s3);
    background:var(--ink);color:var(--white);border-radius:var(--r);text-decoration:none;
    transition:transform var(--dur-quick) var(--ease),opacity var(--dur-quick) var(--ease)}
  .est-bar b{margin-left:auto;font-size:1.2rem;font-variant-numeric:tabular-nums}
  .est-bar__k{font-size:.85rem;color:var(--sage)}
  .est-bar__go{font-size:.85rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--sage)}
  .est-bar.is-hidden{transform:translateY(150%);opacity:0;pointer-events:none}
}
@media(max-width:380px){.est-bar__go{display:none}}

.is-embed .hdr,.is-embed .ftr,.is-embed .band,.is-embed .crumb,.is-embed .est-intro,
.is-embed .skip,.is-embed .est-bar{display:none!important}
.is-embed body{background:transparent}
.is-embed .est{padding:0 0 var(--s4)}
.is-embed .est-summary{top:var(--s3)}
.calc--auto{border:0;background:transparent;margin-top:var(--s4)}
.calc--auto iframe{height:1400px}

@media print{
  .hdr,.ftr,.band,.crumb,.est-intro,.est-controls,.no-print,.est-bar,.skip{display:none!important}
  .js .reveal,.js .stagger>*{opacity:1!important;transform:none!important}
  body{background:#fff;font-size:10.5pt}
  .est,.est .wrap{padding:0;max-width:none}
  .est-layout{display:block}
  .est-summary{position:static;background:#fff;padding:0;border-radius:0}
  .est .print-only{display:block}
  .est .p-head{display:flex;justify-content:space-between;gap:24px;border-bottom:2px solid #1D271B;
    padding-bottom:10px;margin-bottom:12px}
  .est .p-title{font-size:15pt;font-weight:800;margin:0}
  .est .p-sub{margin:2px 0 0;color:#55604F}
  .est .p-meta{text-align:right;font-size:9pt;color:#55604F}
  .est .p-info{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 18px;margin-bottom:14px;font-size:9.5pt}
  .est .p-info b{display:block;font-size:8pt;text-transform:uppercase;letter-spacing:.08em;color:#55604F}
  .est .p-foot{margin-top:16px;padding-top:10px;border-top:1px solid #DDE3D9;font-size:8.5pt;color:#55604F}
  .est .line,.est .mtable tr{break-inside:avoid}
}

/* ---------- virtual assistant ---------- */
.ma-launch{position:fixed;z-index:60;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 20px 0 16px;border:0;border-radius:26px;
  background:#FF9623;color:var(--ink);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;
  box-shadow:0 6px 20px rgba(154,86,10,.34);transition:transform var(--dur-quick) var(--ease),background-color var(--dur-quick) var(--ease)}
.ma-launch:hover{transform:translateY(-2px);background:#F08807}
.ma-launch:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ma-open .ma-launch{display:none}
.is-embed .ma-launch,.is-embed .ma-panel{display:none!important}
@media(max-width:980px){body:has(.est-bar:not(.is-hidden)) .ma-launch{bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
@media print{.ma-launch,.ma-panel{display:none!important}}

.ma-panel{position:fixed;z-index:61;right:16px;bottom:16px;width:min(400px,calc(100vw - 32px));height:min(640px,calc(100dvh - 32px));
  display:flex;flex-direction:column;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 48px rgba(29,39,27,.24);overflow:hidden;animation:ma-in var(--dur-quick) var(--ease)}
@keyframes ma-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:560px){.ma-panel{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0}}
.ma-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:16px 16px 12px 20px;background:var(--ink);color:var(--white)}
.ma-head h2{font-size:1.02rem;margin:0;color:var(--white)}
.ma-head p{margin:2px 0 0;font-size:.82rem;color:var(--sage)}
.ma-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-6px -6px 0 0;border:0;border-radius:8px;background:transparent;color:var(--white);cursor:pointer}
.ma-x:hover{background:rgba(255,255,255,.12)}
.ma-x:focus-visible{outline:2px solid var(--sage)}
.ma-privacy{margin:0;padding:8px 20px;font-size:.8rem;background:var(--mint);color:var(--ink);border-bottom:1px solid var(--line)}
.ma-log{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.ma-msg{max-width:88%;padding:10px 14px;border-radius:12px;font-size:.95rem;line-height:1.5;overflow-wrap:anywhere}
.ma-bot{align-self:flex-start;background:var(--tint);border-bottom-left-radius:4px}
.ma-me{align-self:flex-end;background:var(--ink);color:var(--white);border-bottom-right-radius:4px}
.ma-error{background:#FFF4F0;border:1px solid #F0D3C7}
.ma-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ma-warn{margin:8px 0 0;font-size:.82rem;font-weight:600}
.ma-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0}
.ma-links a{color:var(--ink);font-weight:600;text-decoration-color:var(--sage-mid);text-underline-offset:.2em}
.ma-cta{display:inline-flex;align-items:center;min-height:40px;margin-top:10px;padding:0 14px;border:1px solid var(--ink);border-radius:8px;
  background:var(--white);color:var(--ink);font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:background-color var(--dur-quick) var(--ease)}
.ma-cta:hover{background:var(--mint)}
.ma-cta--solid{background:var(--ink);color:var(--white);margin:0}
.ma-cta--solid:hover{background:var(--sage-dp)}
.ma-cta:disabled{opacity:.6;cursor:default}
.ma-typing{display:flex;gap:4px;align-items:center;min-height:38px}
.ma-typing i{width:6px;height:6px;border-radius:50%;background:var(--sage-dp);animation:ma-dot 1s infinite var(--ease)}
.ma-typing i:nth-child(3){animation-delay:.15s}.ma-typing i:nth-child(4){animation-delay:.3s}
@keyframes ma-dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.ma-chips{display:flex;gap:6px;overflow-x:auto;padding:4px 16px 10px;scrollbar-width:none}
.ma-chips::-webkit-scrollbar{display:none}
.ma-chip{flex:none;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:18px;background:var(--white);color:var(--ink);
  font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color var(--dur-quick) var(--ease),background-color var(--dur-quick) var(--ease)}
.ma-chip:hover{border-color:var(--sage-dp);background:var(--mint)}
.ma-compose{display:flex;gap:8px;align-items:flex-end;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.ma-compose textarea{flex:1;min-height:44px;max-height:120px;resize:none;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;color:var(--ink)}
.ma-compose textarea:focus,.ma-form input:focus,.ma-form select:focus,.ma-form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--sage)}
.ma-send{min-height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--ink);color:var(--white);font:inherit;font-weight:700;cursor:pointer}
.ma-send:disabled{opacity:.5}
.ma-intake{max-height:62%;overflow-y:auto;border-top:1px solid var(--line);background:var(--white)}
.ma-form{padding:14px 16px 16px}
.ma-form h3{font-size:1rem;margin:0 0 2px}
.ma-hint{display:block;font-size:.8rem;color:var(--soft);margin:0 0 6px}
.ma-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ma-fld{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.ma-fld label{font-size:.84rem;font-weight:600}
.ma-form input,.ma-form select,.ma-form textarea{font:inherit;font-size:16px;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);width:100%}
.ma-consent{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:.86rem}
.ma-consent input{width:20px;height:20px;margin-top:1px;accent-color:var(--sage-dp)}
.ma-hp{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.ma-ferr{min-height:1em;margin:8px 0 0;font-size:.85rem;font-weight:600;color:#9A3412}
.ma-factions{display:flex;gap:12px;align-items:center;margin-top:8px}
.ma-link{border:0;background:none;font:inherit;font-weight:600;color:var(--soft);cursor:pointer;min-height:40px}
@media(prefers-reduced-motion:reduce){.ma-panel,.ma-typing i{animation:none}.ma-launch{transition:none}}