/* Integrated Functional Health: design system and page styles.
   Brand: IBM Plex Sans (headings) and Open Sans (body), Hyper Blue for actions,
   Blue Whale for ink and dark bands, Turquoise and Frisky Blue as accents, warm
   stone for warmth. Contrast pairs are checked in site/checks (WCAG 2.2 AA). */

/* ---------- fonts (self hosted) ---------- */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/ibm-plex-sans-500-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/ibm-plex-sans-500-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/open-sans-400-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/open-sans-400-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/open-sans-italic-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans Fallback";src:local("Arial");size-adjust:105.6%;ascent-override:101%;descent-override:27.7%;line-gap-override:0%}
@font-face{font-family:"Plex Fallback";src:local("Arial");size-adjust:100.5%;ascent-override:102%;descent-override:27.4%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  color-scheme:light;
  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --mist:#EAF2F6;
  --diamond:#E5EFF4;
  --stone:#F1EEE8;
  --stone-deep:#DAD7D0;
  --ink:#1C3341;
  --ink-soft:#43535C;
  --line:#D6DFE4;
  --action:#015F97;
  --action-deep:#003E63;
  --teal:#01857C;
  --teal-text:#016A63;
  --night:#1C3341;
  --night-deep:#132631;
  --on-night:#E5EFF4;
  --on-night-soft:#B7CAD5;
  --frisky:#7FAECB;

  --font-display:"IBM Plex Sans","Plex Fallback","Helvetica Neue",Arial,sans-serif;
  --font-body:"Open Sans","Open Sans Fallback","Segoe UI",Roboto,Arial,sans-serif;
  --step--1:clamp(.875rem,.85rem + .12vw,.9375rem);
  --step-0:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.4rem);
  --step-2:clamp(1.4rem,1.22rem + .85vw,1.8rem);
  --step-3:clamp(1.95rem,1.45rem + 2vw,2.95rem);
  --step-4:clamp(2.5rem,1.65rem + 3.6vw,4.5rem);

  --wrap:76rem;
  --measure:62ch;
  /* The floor is what a phone gets. 1.125rem (18px) read tight against the left
     edge (Matt, 17 September 2026), so the floor is 1.5rem and it opens up a
     little faster; the 2.5rem cap means desktop is unchanged. */
  --gutter:clamp(1.5rem,5vw,2.5rem);
  --section:clamp(4.5rem,9vw,8.5rem);
  --radius-xl:clamp(1.25rem,2.4vw,2rem);
  --radius:1rem;
  --shadow-soft:0 1px 2px rgb(28 51 65 / .06),0 22px 50px -26px rgb(28 51 65 / .32);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:6rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.7 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,picture,video{display:block;max-width:100%}
img{height:auto}
picture img{width:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:var(--step-4);line-height:1.04;letter-spacing:-.03em}
h2{font-size:var(--step-3);line-height:1.1;letter-spacing:-.024em}
h3{font-size:var(--step-2);line-height:1.22}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
p,li,dd{text-wrap:pretty}
a{color:var(--action);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--action-deep);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--action);outline-offset:3px;border-radius:4px}
.section--night :focus-visible,.site-footer :focus-visible,.band :focus-visible{outline-color:var(--frisky)}
main:focus{outline:none}
::selection{background:var(--diamond);color:var(--ink)}
.skip-link{position:absolute;left:var(--gutter);top:-6rem;z-index:100;background:var(--ink);color:#fff;padding:.8rem 1.1rem;border-radius:.6rem;font:600 1rem var(--font-display);text-decoration:none}
.skip-link:focus{top:.75rem;color:#fff}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2 * var(--gutter),var(--wrap));margin-inline:auto}
.section{padding-block:var(--section)}
.section--mist{background:var(--mist)}
.section--stone{background:var(--stone)}
.section--night{background:var(--night);color:var(--on-night)}
.section-head{display:grid;gap:1.1rem;max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head--center{margin-inline:auto;text-align:center;justify-items:center}
.eyebrow{font:600 .8125rem/1.3 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text)}
.section--night .eyebrow,.band .eyebrow{color:var(--frisky)}
.lede{font-size:var(--step-1);line-height:1.55;color:var(--ink-soft);max-width:var(--measure)}
.section--night .lede{color:var(--on-night-soft)}
.prose{display:grid;gap:1.1em;max-width:var(--measure)}
.prose p{color:var(--ink-soft)}
.split{display:grid;gap:clamp(2.75rem,6vw,5.5rem);align-items:center}
@media (min-width:56rem){
  .split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--reverse>:first-child{order:2}
}
.img-missing{display:block;width:100%;height:100%;min-height:12rem;background:repeating-linear-gradient(135deg,var(--diamond) 0 12px,var(--mist) 12px 24px)}
/* Photos fill their framed boxes: the picture element takes the box's full size. */
.hero-photo>picture,.l-hero-photo>picture,.service-media>picture,.meet-photo>picture,.choice-photo>picture,.avatar>picture,.band-media>picture{width:100%;height:100%}
.hero-photo img,.l-hero-photo img,.service-media img,.meet-photo img,.choice-photo img,.avatar img,.band-media img{width:100%;height:100%;object-fit:cover}

/* ---------- buttons and links ---------- */
.btn{--bg:var(--action);--fg:#fff;--bd:var(--action);display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.8rem 1.55rem;border:2px solid var(--bd);border-radius:999px;background:var(--bg);color:var(--fg);font:600 1rem/1.2 var(--font-display);letter-spacing:.005em;text-align:center;text-decoration:none;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn:hover{--bg:var(--action-deep);--bd:var(--action-deep);color:var(--fg);text-decoration:none}
.btn--ghost{--bg:transparent;--fg:var(--action);--bd:var(--action)}
.btn--ghost:hover{--bg:var(--action);--fg:#fff;--bd:var(--action)}
.btn--light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--light:hover{--bg:var(--diamond);--bd:var(--diamond);--fg:var(--ink)}
.btn--outline-light{--bg:transparent;--fg:#fff;--bd:rgb(255 255 255 / .55)}
.btn--outline-light:hover{--bg:rgb(255 255 255 / .12);--bd:#fff;--fg:#fff}
.btn--sm{min-height:2.875rem;padding:.55rem 1.2rem;font-size:.9375rem}
.btn .arrow{flex:none;transition:transform .2s var(--ease)}
.btn:hover .arrow,.text-link:hover .arrow{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}
.text-link{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;font:600 1.0625rem/1.2 var(--font-display);text-decoration:none}
.text-link:hover span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgb(251 250 247 / .92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.75rem}
.brand{flex:none;display:block;border-radius:.4rem}
.brand img{width:16.25rem;height:auto}
.nav-toggle{flex:none;display:inline-grid;place-items:center;width:3rem;height:3rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer}
.nav-toggle path{stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .25s var(--ease),opacity .2s;transform-origin:center}
.nav-toggle[aria-expanded="true"] .l1{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .l2{opacity:0}
.nav-toggle[aria-expanded="true"] .l3{transform:translateY(-5px) rotate(-45deg)}
.site-nav{display:none}
.js .site-nav.is-open{display:block;position:absolute;top:100%;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));padding:.75rem var(--gutter) 1.75rem;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgb(28 51 65 / .4)}
html:not(.js) .site-nav{display:block;width:100%}
html:not(.js) .header-inner{flex-wrap:wrap;padding-block:.75rem}
html:not(.js) .nav-toggle{display:none}
.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.nav-list a{display:flex;align-items:center;min-height:3rem;padding:.25rem .6rem;border-radius:.6rem;font:600 1.125rem/1.2 var(--font-display);color:var(--ink);text-decoration:none}
.nav-list a:hover{background:var(--mist);color:var(--ink)}
.nav-list a[aria-current="page"]{color:var(--action)}
.nav-actions{display:grid;gap:.75rem;margin-top:1rem}
.nav-quiet{display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:.6rem;font:600 1rem var(--font-display);color:var(--ink-soft);text-decoration:none}
.nav-quiet:hover{color:var(--action)}
body.nav-open{overflow:hidden}
@media (min-width:80rem){
  .nav-toggle{display:none}
  .site-nav,.js .site-nav.is-open{display:flex;position:static;align-items:center;gap:1.5rem;padding:0;background:none;border:0;box-shadow:none}
  .nav-list{display:flex;gap:.1rem}
  .nav-list a{min-height:2.75rem;padding:.25rem .8rem;font-size:1rem;white-space:nowrap}
  .nav-actions{display:flex;align-items:center;gap:.9rem;margin:0}
  .nav-actions .btn{min-height:2.875rem;padding:.55rem 1.25rem;font-size:.9375rem;white-space:nowrap}
  body.nav-open{overflow:auto}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(2rem,5vw,4.5rem) clamp(3.5rem,8vw,7rem)}
.hero-grid{display:grid;gap:clamp(2.75rem,5vw,4.5rem);align-items:center}
@media (min-width:60rem){.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.hero-copy{display:grid;gap:1.6rem;justify-items:start}
.hero h1 .accent{display:block;color:var(--action)}
.hero .lede{max-width:36rem}
.hero-points{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;color:var(--ink-soft);font-size:var(--step--1)}
.hero-points li{display:flex;align-items:center;gap:.5rem}
.hero-points svg{color:var(--teal)}
.hero-visual{position:relative;isolation:isolate}
.hero-photo{position:relative;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/3;background:var(--diamond);box-shadow:var(--shadow-soft)}
@media (min-width:60rem){.hero-photo{aspect-ratio:4/5}}
.hero-photo img,.hero-photo .img-missing{height:100%;object-fit:cover}
.orbits{position:absolute;z-index:-1;pointer-events:none;width:min(120%,44rem);right:-30%;top:-22%;opacity:.95}
.orbits circle{fill:none;stroke-width:1.25}
.hero-card{position:absolute;left:clamp(.75rem,3vw,1.5rem);bottom:clamp(.75rem,3vw,1.5rem);right:clamp(.75rem,3vw,1.5rem);max-width:21rem;display:grid;gap:.2rem;padding:1rem 1.2rem;border-radius:1rem;background:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 30px -18px rgb(28 51 65 / .5)}
.hero-card-title{font:600 .9375rem/1.3 var(--font-display);letter-spacing:.02em;color:var(--ink)}
.hero-card-text{font-size:.9375rem;line-height:1.45;color:var(--ink-soft)}

/* ---------- intersection ---------- */
.venn{width:100%;max-width:32rem;margin-inline:auto;overflow:visible}
.venn circle{mix-blend-mode:multiply}
.venn text{font-family:var(--font-display);font-weight:600;fill:var(--ink)}
.dimensions{display:grid;gap:1.35rem;margin-top:2.25rem}
.dimension{display:grid;gap:.3rem;padding-left:1.5rem;border-left:3px solid var(--c,var(--action))}
.dimension dt{font:600 var(--step-1)/1.25 var(--font-display)}
.dimension dd{color:var(--ink-soft)}

/* ---------- regulate, integrate, optimize ---------- */
.rio{position:relative;overflow:hidden;isolation:isolate}
.rio::before{content:"";position:absolute;z-index:-1;inset:-30% -20% auto auto;width:48rem;height:48rem;border-radius:50%;background:radial-gradient(closest-side,rgb(1 95 151 / .45),transparent);pointer-events:none}
.rio h2{color:#fff}
.rio-steps{list-style:none;padding:0;display:grid;gap:1.25rem}
@media (min-width:56rem){.rio-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}}
.rio-step{display:grid;gap:1rem;align-content:start;padding:clamp(1.75rem,3vw,2.5rem);border-radius:var(--radius-xl);background:rgb(229 239 244 / .06);border:1px solid rgb(229 239 244 / .16)}
.rio-num{font:600 .8125rem/1 var(--font-display);letter-spacing:.14em;color:var(--frisky)}
.rio-step h3{font-size:var(--step-3);color:#fff;letter-spacing:-.02em}
.rio-step p{color:var(--on-night-soft)}
.rio-mark{width:3rem;height:3rem;color:var(--frisky)}

/* ---------- services ---------- */
.services-grid{display:grid;gap:1.25rem}
@media (min-width:40rem){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:68rem){.services-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}}
.service-card{position:relative;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface);box-shadow:0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.service-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),var(--shadow-soft)}
.service-card:focus-within{outline:3px solid var(--action);outline-offset:3px}
.service-media{aspect-ratio:3/2;overflow:hidden;background:var(--diamond)}
.service-media img,.service-media .img-missing{height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.service-card:hover .service-media img{transform:scale(1.04)}
.service-body{display:grid;gap:.8rem;align-content:start;padding:1.5rem 1.5rem 1.75rem}
.service-desire{font-style:italic;color:var(--ink-soft)}
.service-card h3 a{color:var(--ink);text-decoration:none}
.service-card h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.service-card h3 a:focus-visible{outline:none}
.service-text{color:var(--ink-soft)}
.service-facts{margin-top:.1rem}
.service-more{display:inline-flex;align-items:center;gap:.45rem;margin-top:.25rem;font:600 1rem var(--font-display);color:var(--action)}
@media (min-width:40rem){.service-card--wide{grid-column:1/-1}}
@media (min-width:56rem){
  .service-card--wide{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:none}
  .service-card--wide .service-media{aspect-ratio:auto;min-height:22rem}
  .service-card--wide .service-body{align-content:center;padding:clamp(2rem,4vw,3.5rem)}
  .service-card--wide h3{font-size:var(--step-3)}
}

/* ---------- steps and consults ---------- */
.steps{list-style:none;padding:0;display:grid;gap:1.75rem;counter-reset:step}
@media (min-width:56rem){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}}
.step{display:grid;gap:.75rem;align-content:start;padding-top:1.5rem;border-top:2px solid var(--ink)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font:600 .875rem/1 var(--font-display);letter-spacing:.14em;color:var(--teal-text)}
.step p{color:var(--ink-soft)}
.consults-head{margin-top:clamp(3.5rem,7vw,5rem);margin-bottom:1.5rem}
.consults{display:grid;gap:1.25rem}
@media (min-width:48rem){.consults{grid-template-columns:repeat(2,minmax(0,1fr))}}
.consult{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;align-items:start;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--radius-xl);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.avatar{width:clamp(4.5rem,10vw,6rem);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--diamond)}
.avatar img{height:100%;object-fit:cover}
.consult-body{display:grid;gap:.7rem;justify-items:start}
.consult h3{font-size:var(--step-1)}
.consult p{color:var(--ink-soft)}
.facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.facts li{padding:.25rem .75rem;border-radius:999px;background:var(--mist);font-size:.875rem;line-height:1.5;color:var(--ink)}

/* ---------- meet ---------- */
.meet-photo{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:5/4;background:var(--diamond);box-shadow:var(--shadow-soft)}
.meet-photo img{height:100%;object-fit:cover}
.pull-quote{display:grid;gap:.6rem;margin-block:.5rem;padding-left:1.35rem;border-left:3px solid var(--teal)}
.pull-quote blockquote p{font:500 var(--step-2)/1.35 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.pull-quote figcaption{font-size:var(--step--1);color:var(--ink-soft)}
.people{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 2rem}
.people li{display:grid;line-height:1.4}
.people strong{font:600 1.0625rem var(--font-display)}
.people span{font-size:var(--step--1);color:var(--ink-soft)}

/* ---------- photo band ---------- */
/* On phones the photo sits above the text on solid Blue Whale, so text contrast never
   depends on the photo. From tablets up the text overlays a dark gradient. */
.band{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:var(--on-night)}
.band-media{position:relative;aspect-ratio:4/3}
.band-media picture,.band-media img,.band-media .img-missing{width:100%;height:100%;object-fit:cover}
.band-media::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(180deg,rgb(28 51 65 / 0),var(--night))}
.band-content{display:grid;gap:1.25rem;max-width:34rem;padding-block:1.25rem var(--section)}
@media (min-width:56rem){
  .band{display:grid;align-items:center;min-height:clamp(36rem,80vh,48rem)}
  .band-media{position:absolute;inset:0;z-index:-2;aspect-ratio:auto}
  .band-media::after{display:none}
  .band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(19 38 49 / .94) 0%,rgb(19 38 49 / .82) 36%,rgb(19 38 49 / .08) 70%)}
  .band-content{padding-block:var(--section)}
}
@media (max-width:29.99rem){
  .consult{grid-template-columns:1fr}
  .avatar{width:4.5rem}
}
.band h2{color:#fff}
.band p{color:var(--on-night)}
.qualities{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.75rem;margin-top:.5rem}
.qualities li{padding-top:.75rem;border-top:1px solid var(--rule);font:600 1.0625rem var(--font-display);color:var(--ink)}
/* Written for the photo band on the homepage, where the type sits on a dark
   image, then reused on a light section on /longevity/ and rendered white on
   near white (contrast 1.13). Same fault as the crisis notice on 19 September
   2026: a component that assumes its background. The light treatment is the
   default now and the dark one is scoped to the band it was made for. */
.band .qualities li{border-top-color:rgb(229 239 244 / .35);color:#fff}

/* ---------- guide ---------- */
.guide{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center}
@media (min-width:56rem){.guide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
/* Molly's real cover mockup (17 September 2026) replaced a cover drawn in CSS. The
   artwork carries its own perspective and shadow, so it needs no card, border or
   rotation here: just a size and a little room to sit in. */
.guide-shot{display:block;width:min(100%,22rem);margin-inline:auto}
.guide-shot img{display:block;width:100%;height:auto}

/* ---------- faq ---------- */
.faq{display:grid;gap:.75rem;max-width:52rem}
.faq-item{border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:3.5rem;padding:1.1rem 1.35rem;list-style:none;cursor:pointer;border-radius:var(--radius)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:.7rem;height:.7rem;margin-top:-.3rem;border-right:2px solid var(--action);border-bottom:2px solid var(--action);transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq-item[open] summary::after{margin-top:.3rem;transform:rotate(-135deg)}
.faq-q{font-size:var(--step-1);line-height:1.35}
.faq-a{display:grid;gap:.9em;padding:0 1.35rem 1.35rem;color:var(--ink-soft);max-width:var(--measure)}
@media (min-width:62rem){
  .faq-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .faq-layout .section-head{position:sticky;top:7rem;margin-bottom:0}
  .faq-layout .faq{max-width:none}
}

/* ---------- final call to action ---------- */
.final{text-align:center}
.final .wrap{display:grid;gap:1.4rem;justify-items:center}
.final h2{color:#fff;max-width:20ch}
.final .lede{margin-inline:auto}
.final .btn-row{justify-content:center;margin-top:.5rem}

/* ---------- book page ---------- */
.page-hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3rem)}
.page-hero .wrap{display:grid;gap:1.25rem;max-width:48rem;margin-inline:auto;text-align:center;justify-items:center}
.choice{display:grid;gap:clamp(1.5rem,3vw,2.5rem);overflow:hidden;border-radius:var(--radius-xl);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
@media (min-width:52rem){.choice{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.choice+.choice{margin-top:1.5rem}
.choice-photo{aspect-ratio:4/3;background:var(--diamond)}
@media (min-width:52rem){.choice-photo{aspect-ratio:auto;min-height:100%}}
.choice-photo img{height:100%;object-fit:cover;object-position:50% 18%}
.choice-body{display:grid;gap:1rem;align-content:center;justify-items:start;padding:0 clamp(1.25rem,3vw,2.5rem) clamp(1.75rem,4vw,2.5rem)}
@media (min-width:52rem){.choice-body{padding:clamp(2rem,4vw,3rem) clamp(2rem,4vw,3rem) clamp(2rem,4vw,3rem) 0}}
.checks{list-style:none;padding:0;display:grid;gap:.5rem}
.checks li{position:relative;padding-left:1.8rem;color:var(--ink-soft)}
.checks li::before{content:"";position:absolute;left:.15rem;top:.55em;width:.95rem;height:.5rem;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.note{padding:1.1rem 1.35rem;border-radius:var(--radius);background:var(--mist);color:var(--ink)}
.note--quiet{background:transparent;box-shadow:0 0 0 1px var(--line)}
.crisis{padding:1.1rem 1.35rem;border-radius:var(--radius);background:var(--surface);box-shadow:inset .25rem 0 0 var(--action),0 0 0 1px var(--line)}
.crisis,.prose p.crisis{color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{background:var(--night-deep);color:var(--on-night-soft);padding-block:clamp(3.5rem,7vw,5.5rem) 2.25rem;font-size:.9375rem;line-height:1.65}
.site-footer a{color:var(--on-night);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;gap:2.5rem}
@media (min-width:40rem){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:68rem){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-brand{display:grid;gap:1.1rem;align-content:start}
.footer-brand img{width:15rem;height:auto}
.footer-h{margin-bottom:.9rem;font:600 .8125rem/1.3 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--frisky)}
.footer-list{list-style:none;padding:0;display:grid;gap:.1rem}
.footer-list a{display:inline-block;padding-block:.3rem}
.contact-lines{font-style:normal;display:grid;gap:.2rem}
.social{display:flex;gap:.5rem;margin-top:.25rem}
.social a{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;box-shadow:0 0 0 1px rgb(229 239 244 / .25)}
.social a:hover{background:rgb(229 239 244 / .1);text-decoration:none}
.site-footer .crisis{margin-top:3rem;background:rgb(229 239 244 / .07);box-shadow:0 0 0 1px rgb(229 239 244 / .16);color:var(--on-night)}
.site-footer .crisis strong{color:#fff}
.footer-legal{display:grid;gap:1rem;margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid rgb(229 239 244 / .16);font-size:.8125rem;line-height:1.65}
.footer-legal p{max-width:90ch}
.footer-legal p a,.note a,.prose p a,.lede a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* ---------- sticky book bar (phones) ---------- */
.book-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));background:rgb(251 250 247 / .95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--line);transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s}
.book-bar.is-visible{transform:none;visibility:visible;transition:transform .3s var(--ease),visibility 0s}
.book-bar p{font:600 .9375rem/1.3 var(--font-display);color:var(--ink)}
/* Room on the right for Rio's chat bubble, which the chat platform fixes to the bottom right corner */
.book-bar{padding-right:calc(var(--gutter) + 4.75rem)}
@media (min-width:80rem){.book-bar{display:none}}

/* ---------- landing pages (no menu, one action) ---------- */
.landing-header{background:var(--paper);box-shadow:0 1px 0 var(--line)}
.landing-header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.75rem}
.landing-logo{width:16.25rem;height:auto}
.landing-header-cta{display:none}
@media (min-width:48rem){.landing-header-cta{display:inline-flex}}
.l-hero{padding-block:clamp(2rem,5vw,4.5rem) clamp(3.5rem,8vw,6.5rem)}
.l-hero-grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media (min-width:60rem){.l-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.l-hero-copy{display:grid;gap:1.5rem;justify-items:start}
.l-hero h1{font-size:clamp(2.3rem,1.55rem + 3vw,3.9rem)}
.l-hero-photo{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/3;background:var(--diamond);box-shadow:var(--shadow-soft)}
@media (min-width:60rem){.l-hero-photo{aspect-ratio:4/5}}
.l-hero-photo img,.l-hero-photo .img-missing{height:100%;object-fit:cover}
.narrow{max-width:46rem;display:grid;gap:1.25rem}
.signs{list-style:none;padding:0;display:grid;gap:.7rem;margin-bottom:.75rem}
.signs li{position:relative;padding:.95rem 1.1rem .95rem 3.1rem;border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line);color:var(--ink);font-weight:600;line-height:1.45}
.signs li::before{content:"";position:absolute;left:1.1rem;top:50%;width:1rem;height:1rem;margin-top:-.5rem;border-radius:50%;background:rgb(1 95 151 / .2);box-shadow:.55rem 0 0 rgb(1 133 124 / .3)}
.capacities{list-style:none;padding:0;display:grid;gap:1px;overflow:hidden;border-radius:var(--radius-xl);background:var(--line);box-shadow:0 0 0 1px var(--line)}
@media (min-width:40rem){.capacities{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:68rem){.capacities{grid-template-columns:repeat(3,minmax(0,1fr))}}
.capacities li{display:grid;gap:.5rem;align-content:start;padding:clamp(1.5rem,3vw,2.25rem);background:var(--surface)}
.capacities li::before{content:"";width:1.6rem;height:1.6rem;margin-bottom:.6rem;border-radius:50%;background:rgb(1 95 151 / .18);box-shadow:.9rem 0 0 rgb(1 133 124 / .24)}
.capacities h3{font-size:var(--step-1)}
.capacities p{color:var(--ink-soft)}
.fit{display:grid;gap:1.25rem}
@media (min-width:56rem){.fit{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.fit-card{display:grid;gap:1rem;align-content:start;padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--radius-xl);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.fit-card h3{font-size:var(--step-1)}
.fit-card--no{background:transparent;box-shadow:0 0 0 1px var(--stone-deep)}
.crosses{list-style:none;padding:0;display:grid;gap:.6rem}
.crosses li{position:relative;padding-left:1.8rem;color:var(--ink-soft)}
.crosses li::before,.crosses li::after{content:"";position:absolute;left:.15rem;top:.8em;width:.95rem;height:2px;background:var(--ink-soft);transform:rotate(45deg)}
.crosses li::after{transform:rotate(-45deg)}
.fit-note{padding-top:.9rem;border-top:1px solid var(--stone-deep);font-size:var(--step--1);color:var(--ink-soft)}
.checks--large{gap:.9rem}
.checks--large li{padding-left:2.2rem;font-size:var(--step-1);line-height:1.45;color:var(--ink)}
.meet-photo--portrait{width:100%;max-width:30rem;aspect-ratio:4/5;justify-self:center}
.landing-footer{padding-top:clamp(2.5rem,5vw,3.5rem)}
.landing-footer .crisis{margin-top:0}
.landing-legal-links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.landing-legal-links a{display:inline-block;padding-block:.3rem}

/* ---------- blog: index, archives and posts ----------
   Light context only. Every class here is new: reusing a dark band component in
   a light section is what made the crisis notice and the qualities list
   invisible (19 and 20 September 2026), so nothing below borrows one. */
/* Left aligned hero. The wrap keeps its own centring and gutters: overriding
   margin-inline put the text against the left edge of the window. The lines
   are held to a readable width by the children instead. */
.page-hero--left .wrap{max-width:none;text-align:left;justify-items:start}
.page-hero--left h1,.page-hero--left .lede,.page-hero--left .prose,.page-hero--left .search-form{max-width:52rem}
/* The marketing pages open with a centred hero and a full section break under
   it. On an article, that much air pushes the first paragraph off the screen. */
.page-hero--left+.section{padding-top:clamp(1.75rem,3.5vw,2.75rem)}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
.chips a{display:inline-flex;align-items:center;min-height:2.5rem;padding:.3rem .95rem;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font:600 .9375rem/1.4 var(--font-display);color:var(--action);text-decoration:none}
.chips a:hover{background:var(--mist);color:var(--action-deep)}
.chips a[aria-current="page"]{background:var(--action);color:#fff;box-shadow:none}
.post-grid{display:grid;gap:1.25rem}
@media (min-width:40rem){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:68rem){.post-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}}
.post-card{position:relative;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface);box-shadow:0 0 0 1px var(--line);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.post-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),var(--shadow-soft)}
.post-card:focus-within{outline:3px solid var(--action);outline-offset:3px}
.post-card-media{aspect-ratio:3/2;overflow:hidden;background:var(--diamond)}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post-card:hover .post-card-media img{transform:scale(1.04)}
.post-card-media--blank{display:grid;place-items:center;background:linear-gradient(145deg,var(--diamond),var(--stone))}
.post-card-media--blank span{font:600 .8125rem/1.3 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.post-card-body{display:grid;gap:.7rem;align-content:start;padding:1.5rem 1.5rem 1.75rem}
.post-kicker{font:600 .8125rem/1.3 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text)}
.post-card h2,.post-card h3{font-size:var(--step-1);line-height:1.25}
.post-card h2 a,.post-card h3 a{color:var(--ink);text-decoration:none}
.post-card h2 a::after,.post-card h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.post-card h2 a:focus-visible,.post-card h3 a:focus-visible{outline:none}
.post-excerpt{color:var(--ink-soft)}
.post-meta{display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:var(--step--1);color:var(--ink-soft)}
.post-meta>*{display:flex;align-items:center;gap:.4rem}
@media (min-width:56rem){
  .post-card--feature{grid-column:1/-1;grid-template-rows:auto;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .post-card--feature .post-card-media{aspect-ratio:auto;min-height:100%}
  .post-card--feature .post-card-body{align-content:center;gap:.9rem;padding:clamp(1.75rem,3.5vw,3rem)}
  .post-card--feature h2,.post-card--feature h3{font-size:var(--step-2)}
}
.pagination{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;margin-top:clamp(2.5rem,5vw,3.5rem);padding:0}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:2.875rem;min-height:2.875rem;padding-inline:.9rem;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font:600 1rem/1.2 var(--font-display);color:var(--action);text-decoration:none}
.pagination a.page-numbers:hover{background:var(--mist);color:var(--action-deep)}
.pagination .current{background:var(--action);color:#fff;box-shadow:none}
.pagination .dots{background:transparent;box-shadow:none;color:var(--ink-soft)}

/* the article itself */
.entry-head{display:grid;gap:1.1rem;max-width:52rem;justify-items:start}
.entry-head h1{font-size:var(--step-3)}
.entry-figure{margin-top:clamp(2rem,4vw,3rem);border-radius:var(--radius-xl);overflow:hidden;background:var(--diamond);box-shadow:var(--shadow-soft)}
.entry-figure img{width:100%;height:auto}
.entry{max-width:var(--measure)}
.entry>*+*{margin-top:1.1em}
.entry>h2{margin-top:2em;font-size:var(--step-2)}
.entry>h3{margin-top:1.6em;font-size:var(--step-1)}
.entry p,.entry li,.entry dd{color:var(--ink-soft)}
.entry a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.entry ul,.entry ol{display:grid;gap:.5rem;padding-left:1.4rem}
.entry li::marker{color:var(--teal-text)}
.entry blockquote{display:grid;gap:.6rem;padding-left:1.35rem;border-left:3px solid var(--teal)}
.entry blockquote p{font:500 var(--step-1)/1.45 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.entry blockquote cite{font:400 var(--step--1) var(--font-body);font-style:normal;color:var(--ink-soft)}
.entry figure{display:grid;gap:.6rem;margin-block:1.6em}
.entry img{border-radius:var(--radius);height:auto}
.entry figcaption{font-size:var(--step--1);color:var(--ink-soft)}
.entry hr{border:0;border-top:1px solid var(--line);margin-block:2.2em}
.entry table{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.entry th,.entry td{padding:.6rem .75rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.entry th{font-family:var(--font-display);color:var(--ink)}
.entry code{padding:.1em .35em;border-radius:.3rem;background:var(--mist);font-size:.9em}
.entry pre{overflow:auto;padding:1rem 1.15rem;border-radius:var(--radius);background:var(--mist)}
.entry pre code{padding:0;background:none}
.entry .wp-block-button__link,.entry .wp-element-button{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.8rem 1.55rem;border:2px solid var(--action);border-radius:999px;background:var(--action);color:#fff;font:600 1rem/1.2 var(--font-display);text-decoration:none}
.entry .wp-block-button__link:hover{background:var(--action-deep);border-color:var(--action-deep);color:#fff}
.entry-foot{display:grid;gap:1.5rem;max-width:52rem;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(2rem,4vw,2.5rem);border-top:1px solid var(--line)}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;align-items:start}
.byline .avatar{width:clamp(3.5rem,8vw,4.5rem)}
.byline-body{display:grid;gap:.35rem}
.byline-name{font:600 var(--step-1)/1.3 var(--font-display);color:var(--ink)}
.byline-body p{font-size:var(--step--1);color:var(--ink-soft)}
.post-nav{display:grid;gap:1rem;margin-top:1.5rem}
@media (min-width:48rem){.post-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post-nav a{display:grid;gap:.3rem;padding:1.1rem 1.35rem;border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line);text-decoration:none}
.post-nav a:hover{background:var(--mist)}
.post-nav span{font:600 .8125rem/1.3 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text)}
.post-nav strong{font:600 1.0625rem/1.35 var(--font-display);color:var(--ink)}
.post-nav a:last-child{text-align:left}
@media (min-width:48rem){.post-nav a:last-child{text-align:right}}

/* search */
.search-form{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;max-width:34rem}
.search-field{flex:1 1 14rem;min-height:3.25rem;padding:.7rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:400 1rem var(--font-body)}
.search-field::placeholder{color:var(--ink-soft)}
.empty-note{max-width:var(--measure);color:var(--ink-soft)}