/* Self-hosted fonts (no Google Fonts request). Only the Latin files are downloaded by
   browsers — the unicode-range in each @font-face skips the others. font-display: swap. *//* dm-sans-latin-ext-opsz-normal */
@font-face {
  font-family: 'DM Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/_astro/dm-sans-latin-ext-opsz-normal.oos9povj.woff2) format('woff2-variations');
  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;
}

/* dm-sans-latin-opsz-normal */
@font-face {
  font-family: 'DM Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/_astro/dm-sans-latin-opsz-normal.Bf69Tn_J.woff2) format('woff2-variations');
  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;
}
/* instrument-serif-latin-400-normal */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/instrument-serif-latin-400-normal.DnYpCC2O.woff2) format('woff2'), url(/_astro/instrument-serif-latin-400-normal.BVbkICAY.woff) format('woff');
}
/* instrument-serif-latin-400-italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/instrument-serif-latin-400-italic.DKMiL14s.woff2) format('woff2'), url(/_astro/instrument-serif-latin-400-italic.u__WvvIK.woff) format('woff');
}
/* =========================================================
   Dr. Maren Ellison, PhD — site styles
   Built on the [Practice Name] template design system
   Every page links this file. Colors, type, space, radii and
   motion live in the variables below; components use only them.
   ========================================================= */

:root{
  /* ---- Color: one beige, one dark green, dark sections, black/white text ---- */
  --ink:#000000;                /* all text on light backgrounds */
  --paper:#FFFFFF;              /* white: text on dark + a few white buttons */
  --bg:#FAF8F4;                 /* off-white background (replaces every white surface) */
  --charcoal:#2E2F29;           /* dark sections: hero, footer, announcement, panels */
  --green:#587559;              /* the one green: every button + icons */
  /* legacy names from the template, mapped onto the palette above */
  --sage:var(--green);
  --sage-dark:var(--green);
  --sage-soft:var(--green);
  --sage-mist:var(--green);
  --on-sage-soft:var(--paper);
  --sand-1:var(--bg);
  --sand-2:var(--bg);
  --sand-3:var(--bg);
  --clay:var(--ink);
  --error:#9A3B2B;              /* error borders + icons only; the message text stays black */
  --muted:var(--ink);
  --faint:var(--ink);
  --on-dark:var(--paper);
  --on-dark-muted:var(--paper);
  --on-dark-faint:var(--paper);
  --rule:rgba(46,47,41,.22);    /* lines on beige */
  --rule-dark:rgba(255,255,255,.22);
  --overlay:rgba(35,36,31,.55);
  --overlay-strong:rgba(35,36,31,.64);
  --glass:rgba(255,255,255,.18);
  --glass-line:rgba(255,255,255,.35);
  --solid-header:rgba(250,248,244,.97);   /* full-width header: same off-white as the page (--bg) */

  /* ---- Type ---- */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'DM Sans Variable','DM Sans',system-ui,sans-serif;
  --fs-display:48px;
  --fs-h1:46px;
  --fs-h2:40px;
  --fs-h3:34px;
  --fs-h4:26px;
  --fs-h5:24px;
  --fs-stat:48px;
  --fs-lead:24px;
  --fs-body-lg:17px;
  --fs-body:16px;
  --fs-small:14px;
  --fs-caption:13px;
  --lh-tight:1;
  --lh-head:1.05;
  --lh-body:1.6;
  --track-head:-0.02em;

  /* ---- Space & shape ---- */
  --container:1248px;          /* +20% from the original 1040px */
  --container-wide:1440px;     /* +20% from 1200px */
  --measure:68ch;
  --gutter:16px;
  --section-gap:72px;
  --gap:12px;
  --gap-lg:32px;
  --pad-card:28px;
  --pad-tile:18px;
  --header-h:90px;
  --r-pill:999px;
  --r-card:24px;
  --r-tile:20px;
  --r-inner:20px;
  --r-sm:14px;
  --shadow-hover:0 10px 24px -10px rgba(35,36,31,.55);
  --shadow-lift:0 18px 32px -18px rgba(35,36,31,.45);
  --ring:0 0 0 3px rgba(88,117,89,.28);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.25s;
  --t-med:.35s;
  --t-slow:.9s;
}
@media (min-width:768px){
  :root{--fs-display:64px;--fs-h1:64px;--fs-h2:52px;--fs-h3:44px;--fs-h4:30px;--fs-h5:28px;--fs-stat:60px;--fs-lead:28px;
    --gutter:20px;--section-gap:88px;--gap:16px;--pad-card:32px;--pad-tile:22px;--r-card:28px;--r-tile:24px}
}
@media (min-width:1024px){
  :root{--fs-display:88px;--fs-h1:84px;--fs-h2:64px;--fs-h3:52px;--fs-h4:32px;--fs-h5:30px;--fs-stat:72px;--fs-lead:32px;
    --section-gap:112px;--pad-card:40px;--pad-tile:24px;--header-h:94px}
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg)}
.site{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);overflow-x:clip}
.site img{display:block;max-width:100%}
.site a{color:var(--ink)}
.site a:hover{color:var(--charcoal)}
.site :focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible{outline-color:var(--paper)}   /* white ring on dark sections: green was 2.6:1, below the 3:1 minimum */
picture{display:contents}   /* <Photo> wraps each <img> in <picture>; this keeps layouts treating the <img> as the direct child */
picture>source{display:none} /* …and keeps the <source> tags from counting as flex/grid items */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* "Skip to content": hidden until it receives keyboard focus, then shown top-left above everything */
.skip-link:focus,.skip-link:focus-visible{position:fixed;top:12px;left:12px;z-index:1000;width:auto;height:auto;margin:0;padding:12px 18px;clip:auto;overflow:visible;white-space:normal;background:var(--charcoal);color:var(--paper);border-radius:var(--r-sm);font-weight:600;outline:2px solid var(--paper);outline-offset:2px}
main:focus{outline:none}   /* main gets focus from the skip link; no ring around the whole page */
.main{display:flex;flex-direction:column;gap:var(--section-gap);padding-bottom:0}
.container{max-width:var(--container);width:100%;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.container-wide{max-width:var(--container-wide);width:100%;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.band{padding:72px 0}
@media (min-width:1024px){.band{padding:112px 0}}
.bg-charcoal{background:var(--charcoal);color:var(--paper)}
.bg-ink{background:var(--ink);color:var(--paper)}
.bg-sand{background:var(--sand-1)}
.bg-sand-2{background:var(--sand-2)}
.bg-sage{background:var(--sage);color:var(--paper)}
.stack{display:flex;flex-direction:column}
.g-8{gap:8px}.g-12{gap:12px}.g-16{gap:16px}.g-20{gap:20px}.g-24{gap:24px}.g-32{gap:32px}.g-40{gap:40px}

/* ---------- Type ---------- */
.display,.h1,.h2,.h3,.h4,.h5,.stat{font-family:var(--serif);font-weight:400;letter-spacing:var(--track-head);margin:0}
.display{font-size:var(--fs-display);line-height:.98}
.h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-tight)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-tight)}
.h4{font-size:var(--fs-h4);line-height:1.1;letter-spacing:0}
.h5{font-size:var(--fs-h5);line-height:var(--lh-head);letter-spacing:0}
.stat{font-size:var(--fs-stat);line-height:1}
.eyebrow{font-size:var(--fs-small);font-weight:500;color:var(--muted);margin:0}
.on-dark .eyebrow{color:var(--on-dark-muted)}
.lead{font-family:var(--serif);font-size:var(--fs-lead);line-height:1.25;margin:0}
.body-lg{font-size:var(--fs-body-lg);color:var(--muted);margin:0}
.body{font-size:var(--fs-body);color:var(--muted);margin:0}
.small{font-size:var(--fs-small);color:var(--muted);margin:0}
.caption{font-size:var(--fs-caption);color:var(--muted);margin:0}
.on-dark .body-lg,.on-dark .body,.on-dark .small,.on-dark .caption{color:var(--on-dark-muted)}
.measure{max-width:var(--measure)}
.italic{font-style:italic}

/* ---------- Buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border-radius:var(--r-pill);border:1px solid transparent;font-family:var(--sans);font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;
  transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease,background-color var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease}
.btn-lg{min-height:56px;padding:0 30px;font-size:16px}
.btn-sm{min-height:44px;padding:0 20px;font-size:14px}
.btn svg{transition:transform var(--t-fast) ease;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg.arrow-r{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.98)}
.site .btn-primary{background:var(--sage);color:var(--paper)}
.site .btn-primary:hover{background:var(--sage-dark);color:var(--paper);box-shadow:var(--shadow-hover)}
.site .btn-soft{background:var(--sage-soft);color:var(--on-sage-soft);font-weight:600}
.site .btn-soft:hover{background:var(--sage-mist);color:var(--on-sage-soft);box-shadow:var(--shadow-hover)}
.site .btn-outline{border-color:var(--sage);color:var(--sage);background:transparent}
.site .btn-outline:hover{background:var(--sage);color:var(--paper)}
.site .btn-ghost{border-color:rgba(255,255,255,.7);color:var(--paper);background:transparent}
.site .btn-ghost:hover{background:rgba(255,255,255,.14);color:var(--paper)}
.site .btn-light{background:var(--bg);color:var(--ink)}
.site .btn-light:hover{background:var(--sand-1);color:var(--ink);box-shadow:var(--shadow-hover)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.site .tlink{color:var(--sage);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px;transition:background-size var(--t-med) ease}
.site .tlink:hover{background-size:100% 1px;color:var(--sage-dark)}
.on-dark .tlink,.site .on-dark .tlink{color:var(--sage-mist)}
.ulink{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px;transition:background-size var(--t-med) ease}
.ulink:hover{background-size:100% 1px}
.icon-btn{width:48px;height:48px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
  transition:background-color var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-fast) ease}
.icon-btn:hover{background:var(--sage);border-color:var(--sage);color:var(--paper)}
.icon-btn:active{transform:scale(.95)}
.icon-btn[disabled]{opacity:.4;cursor:not-allowed;background:var(--bg);color:var(--ink);border-color:var(--rule)}
.on-dark .icon-btn{background:transparent;color:var(--paper);border-color:var(--rule-dark)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);font-size:var(--fs-caption);font-weight:500}
.pill-glass{background:var(--glass);border:1px solid var(--glass-line);color:var(--paper)}
.pill-sand{background:var(--sand-1);color:var(--clay)}
.dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--sage-mist);flex:none}

/* ---------- Motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(157,184,160,.7)}70%{box-shadow:0 0 0 10px rgba(157,184,160,0)}100%{box-shadow:0 0 0 0 rgba(157,184,160,0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes reveal{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes parallax{from{transform:translateY(-6%) scale(1.14)}to{transform:translateY(6%) scale(1.14)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.kb{animation:kenburns 14s var(--ease) both}
.rise{animation:rise var(--t-slow) var(--ease) both}
.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}.d4{animation-delay:.6s}
.pulse{animation:pulse 2.4s ease-out infinite}
@supports (animation-timeline: view()){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .para{animation:parallax linear both;animation-timeline:view();animation-range:cover}
}

/* =========================================================
   GLOBAL: announcement bar
   ========================================================= */
.announce{background:var(--charcoal);color:var(--on-dark);font-size:var(--fs-caption)}
.announce-in{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;position:relative;padding-right:56px;padding-left:56px;text-align:center}
.announce a{color:var(--paper);font-weight:600}
.announce a:hover{color:var(--sage-mist)}
.announce-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:transparent;color:var(--on-dark);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill)}
.announce-x:hover{background:rgba(255,255,255,.1)}

/* =========================================================
   GLOBAL: header (default solid + transparent-over-hero)
   ========================================================= */
.header{position:sticky;top:0;z-index:50;padding:12px 0;margin-bottom:calc(var(--header-h) * -1);transition:padding var(--t-med) var(--ease),background-color var(--t-med) ease,box-shadow var(--t-med) ease}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px;border-radius:var(--r-pill);padding:0 8px 0 22px;border:1px solid transparent;
  transition:background-color var(--t-med) ease,border-color var(--t-med) ease,padding var(--t-med) var(--ease)}
.brand{font-family:var(--serif);font-size:24px;line-height:1;text-decoration:none;white-space:nowrap}
.site .brand{color:var(--ink)}
.nav{display:none;align-items:center;gap:28px;font-size:var(--fs-small);font-weight:500}
.site .nav a{color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{background-size:100% 1px}
.header-cta{display:none}
.burger{display:inline-flex;width:48px;height:48px;border-radius:var(--r-pill);border:0;background:var(--charcoal);color:var(--paper);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.burger span{display:block;width:18px;height:1.5px;background:currentColor}
@media (min-width:1024px){
  .nav{display:flex}
  .header-cta{display:inline-flex}
  .burger{display:none}
  .brand{font-size:26px}
  .header-bar{height:70px;padding:0 10px 0 28px}
}
/* default (solid) */
.header--solid,.header.is-solid{background:var(--solid-header);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--rule)}
.header.is-solid{padding:4px 0}
.header.is-solid .header-bar{height:60px}
/* transparent over hero (home) */
.header--over:not(.is-solid) .header-bar{background:var(--glass);border-color:var(--glass-line);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.site .header--over:not(.is-solid) .brand,.site .header--over:not(.is-solid) .nav a{color:var(--paper)}
.header--over:not(.is-solid) .burger{background:var(--bg);color:var(--ink)}
.page-top{padding-top:var(--header-h)}   /* pages without an image hero: clear the overlaid header */

/* mobile menu: full-screen overlay */
.mmenu{position:fixed;inset:0;z-index:100;background:var(--charcoal);color:var(--paper);display:flex;flex-direction:column;padding:16px var(--gutter) 32px;overflow-y:auto;animation:fadein var(--t-fast) ease both}
.mmenu-top{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.site .mmenu .brand{color:var(--paper)}
.mmenu-close{width:48px;height:48px;border-radius:var(--r-pill);border:1px solid var(--rule-dark);background:transparent;color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer}
.mmenu-links{display:flex;flex-direction:column;margin-top:32px;border-top:1px solid var(--rule-dark)}
.site .mmenu-links a{font-family:var(--serif);font-size:40px;line-height:1.1;color:var(--paper);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--rule-dark);display:flex;justify-content:space-between;align-items:center;animation:rise .6s var(--ease) both}
.mmenu-links a:nth-child(2){animation-delay:.05s}.mmenu-links a:nth-child(3){animation-delay:.1s}.mmenu-links a:nth-child(4){animation-delay:.15s}.mmenu-links a:nth-child(5){animation-delay:.2s}.mmenu-links a:nth-child(6){animation-delay:.25s}
.site .mmenu-links a:hover{color:var(--sage-mist)}
.mmenu-foot{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:20px}
.socials{display:flex;gap:10px}
.social{width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--rule-dark);display:flex;align-items:center;justify-content:center;transition:background-color var(--t-fast) ease,border-color var(--t-fast) ease}
.site .social{color:var(--paper)}
.social:hover{background:var(--sage);border-color:var(--sage)}
.socials--light .social{border-color:var(--rule)}
.site .socials--light .social{color:var(--ink)}
.site .socials--light .social:hover{color:var(--paper)}

/* =========================================================
   1. HEROES
   ========================================================= */
/* 1a full-bleed image hero */
.hero-full{position:relative;min-height:640px;background:var(--charcoal);display:flex;overflow:hidden;color:var(--paper)}
.hero-full .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.overlay{position:absolute;inset:0;background:var(--overlay)}
.overlay-strong{position:absolute;inset:0;background:var(--overlay-strong)}
.hero-full .container{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--header-h) + 64px);padding-bottom:56px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:640px}
.hero-copy .display{color:var(--paper)}
.hero-copy .sub{font-size:17px;color:var(--on-dark);max-width:500px;margin:0}
.hero-ctas{display:flex;flex-direction:column;align-self:stretch;gap:12px;margin-top:8px}
@media (min-width:640px){.hero-ctas{flex-direction:row;flex-wrap:wrap;align-self:flex-start}}
@media (min-width:1024px){.hero-full{min-height:780px}.hero-full .container{padding-bottom:96px}.hero-copy .sub{font-size:19px}}

/* =========================================================
   2. BENEFITS STRIP
   ========================================================= */
.benefits{border-bottom:1px solid var(--rule);overflow:hidden}
.benefits-track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.benefits:hover .benefits-track{animation-play-state:paused}
.benefit{display:flex;align-items:center;gap:10px;padding:20px 24px;font-size:var(--fs-small);font-weight:500;white-space:nowrap;color:var(--ink)}
.benefit svg{color:var(--sage);flex:none}
@media (min-width:1024px){
  .benefits-track{width:auto;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);justify-content:space-between;animation:none}
  .benefits-track .dup{display:none}
  .benefit{padding:24px 0}
}

/* =========================================================
   3. LOGOS
   ========================================================= */
.logo-strip{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:8px}
.logo-strip .label{font-size:var(--fs-small);color:var(--muted);white-space:nowrap}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 40px}
.logo{color:var(--faint);transition:color var(--t-med) ease,transform var(--t-med) var(--ease);white-space:nowrap}
.logo:hover{color:var(--ink);transform:translateY(-2px)}
.logo-serif{font-family:var(--serif);font-size:24px}
.logo-sans{font-size:15px;font-weight:600;letter-spacing:.06em}
@media (min-width:1024px){
  .logo-strip{flex-direction:row;justify-content:space-between;gap:48px}
  .logo-strip .label{padding-right:48px;border-right:1px solid var(--rule)}
  .logos{flex:1;justify-content:space-between}
  .logo-serif{font-size:28px}.logo-sans{font-size:17px}
}
.logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo-marquee .track{display:flex;gap:64px;width:max-content;animation:marquee 32s linear infinite;padding:8px 0}
.logo-marquee:hover .track{animation-play-state:paused}

/* =========================================================
   4. DIVIDERS
   ========================================================= */
.hdiv{border-top:1px solid var(--rule);padding-top:20px;display:grid;gap:16px}
.hdiv .num{font-size:var(--fs-small);font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
@media (min-width:1024px){.hdiv{grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px;align-items:start}}
.statement{text-align:center;padding:24px 0}
.statement .h2{max-width:860px;margin:0 auto}
.statement .h2 em{color:var(--sage)}
.rule-div{display:flex;align-items:center;gap:20px;color:var(--muted);font-size:var(--fs-small)}
.rule-div::before,.rule-div::after{content:"";flex:1;height:1px;background:var(--rule)}
.img-div{position:relative;height:320px;overflow:hidden;background:var(--charcoal)}
.img-div img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){.img-div{height:520px}}
.text-marquee{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:20px 0}
.text-marquee .track{display:flex;align-items:center;gap:32px;width:max-content;animation:marquee 40s linear infinite;font-family:var(--serif);font-size:var(--fs-h2);line-height:1;white-space:nowrap}
.text-marquee .glyph{color:var(--sage);font-size:.6em}
.text-marquee:hover .track{animation-play-state:paused}

/* collage divider */
.collage{position:relative;height:560px;display:flex;align-items:center;justify-content:center}
.collage .c-img{position:absolute;border-radius:var(--r-tile);overflow:hidden;box-shadow:var(--shadow-lift);transition:transform var(--t-slow) var(--ease)}
.collage .c-img img{width:100%;height:100%;object-fit:cover}
.collage .c-img:hover{transform:scale(1.04) rotate(0deg) !important}
.collage .c1{width:38%;aspect-ratio:4/5;left:0;top:0;transform:rotate(-4deg)}
.collage .c2{width:34%;aspect-ratio:1;right:0;top:4%;transform:rotate(3deg)}
.collage .c3{width:40%;aspect-ratio:4/3;right:8%;bottom:0;transform:rotate(-2deg)}
.collage .c4,.collage .c5{display:none}
.collage-text{position:relative;z-index:2;background:var(--bg);border-radius:var(--r-card);padding:20px 24px;max-width:300px;text-align:center;box-shadow:var(--shadow-lift)}
@media (min-width:1024px){
  .collage{height:720px}
  .collage .c1{width:22%;left:2%;top:4%}
  .collage .c2{width:18%;right:4%;top:0}
  .collage .c3{width:24%;right:0;bottom:6%}
  .collage .c4{display:block;width:18%;aspect-ratio:1;left:14%;bottom:0;transform:rotate(5deg)}
  .collage .c5{display:block;width:16%;aspect-ratio:4/5;left:44%;top:-2%;transform:rotate(-3deg)}
  .collage-text{max-width:520px;padding:36px 44px}
}

/* =========================================================
   5. TEXT SECTIONS
   ========================================================= */
.intro{max-width:820px}
.intro .lead{margin-top:16px}
.sticky-text{display:grid;gap:32px}
.sticky-text .side{display:flex;flex-direction:column;gap:16px}
.sticky-text .flow{display:flex;flex-direction:column;gap:20px;max-width:var(--measure)}
.sticky-text .flow p{margin:0;font-size:var(--fs-body-lg);color:var(--muted)}
.sticky-text .flow .h4{margin-top:16px}
@media (min-width:1024px){
  .sticky-text{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:64px;align-items:start}
  .sticky-text .side{position:sticky;top:calc(var(--header-h) + 24px)}
}
.fit{display:grid;gap:var(--gap)}
@media (min-width:768px){.fit{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fit-col{border-radius:var(--r-card);padding:var(--pad-card);display:flex;flex-direction:column;gap:20px}
.fit-col--yes{background:var(--sand-1)}
.fit-col--no{border:1px solid var(--rule)}
.fit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.fit-list li{display:flex;gap:14px;align-items:flex-start;font-size:var(--fs-body-lg)}
.fit-list .ic{flex:none;width:28px;height:28px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;margin-top:-1px}
.fit-col--yes .ic{background:var(--sage);color:var(--paper)}
.fit-col--no .ic{background:var(--sand-2);color:var(--clay)}
.principles{display:grid;gap:0;border-top:1px solid var(--rule)}
.principle{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 16px;padding:24px 0;border-bottom:1px solid var(--rule);transition:background-color var(--t-med) ease}
.principle .n{font-family:var(--serif);font-size:40px;line-height:1;color:var(--sage);grid-row:span 2;transition:transform var(--t-med) var(--ease)}
.principle:hover .n{transform:translateX(6px)}
.principle .t{font-weight:600;font-size:var(--fs-body-lg)}
.principle p{margin:0;color:var(--muted)}
@media (min-width:768px){
  .principles{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .principle{grid-template-columns:72px minmax(0,1fr)}
  .principle .n{font-size:52px}
}
@media (min-width:1024px){.principles{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* letter from the founder */
.letter{background:var(--sand-1);border-radius:var(--r-card);padding:32px 24px;display:grid;gap:32px;position:relative;overflow:hidden}
.letter-body{display:flex;flex-direction:column;gap:18px;max-width:62ch}
.letter-body p{margin:0;font-size:var(--fs-body-lg);color:var(--ink)}
.letter .greet{font-family:var(--serif);font-style:italic;font-size:var(--fs-h4)}
.signature{font-family:var(--serif);font-style:italic;font-size:48px;line-height:1;color:var(--sage)}
.letter-side{display:flex;align-items:center;gap:16px}
@media (min-width:1024px){.letter{grid-template-columns:minmax(0,1fr) 260px;padding:72px;gap:72px}.letter-side{flex-direction:column;align-items:flex-start}}

/* =========================================================
   6. IMAGE + TEXT
   ========================================================= */
.split{display:grid;gap:32px;align-items:center}
.split-media{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:var(--sand-2);position:relative}
.split-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.split-media:hover img{transform:scale(1.04)}
.split-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:480px}
@media (min-width:768px){
  .split{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
  .split--flip .split-media{order:2}
}
@media (min-width:1024px){.split{gap:96px}}
.split-stack{display:flex;flex-direction:column;gap:96px}
.mini-stats{display:flex;gap:32px;padding-top:8px;border-top:1px solid var(--rule);margin-top:8px;align-self:stretch}
.mini-stats .v{font-family:var(--serif);font-size:40px;line-height:1}
.card-split{border-radius:var(--r-card);padding:16px;display:grid;gap:24px;align-items:center}
.card-split .split-media{aspect-ratio:4/3;border-radius:var(--r-tile)}
.card-split .split-copy{padding:8px 8px 16px}
@media (min-width:768px){.card-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);padding:20px;gap:48px}.card-split .split-media{aspect-ratio:1}.card-split .split-copy{padding:24px 32px 24px 0}}

/* =========================================================
   7. INFORMATION CARDS
   ========================================================= */
.cards{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{border-radius:var(--r-card);padding:var(--pad-card);display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink);
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) ease,border-color var(--t-med) ease,background-color var(--t-med) ease}
.card:hover{transform:translateY(-4px)}
.card--bordered{border:1px solid var(--rule)}
.card--bordered:hover{border-color:var(--sage)}
.card--filled{background:var(--sand-1)}
.card--filled:hover{background:var(--sand-2)}
.card .ic{width:48px;height:48px;border-radius:var(--r-pill);background:var(--sand-2);color:var(--sage);display:flex;align-items:center;justify-content:center;transition:background-color var(--t-med) ease,color var(--t-med) ease}
.card--filled .ic{background:var(--bg)}
.card:hover .ic{background:var(--sage);color:var(--paper)}
.card p{margin:0;color:var(--muted)}
.card .more{margin-top:auto;padding-top:8px}

/* =========================================================
   8. NUMBERS
   ========================================================= */
.numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
.number{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--rule-dark)}
.number .stat{font-variant-numeric:tabular-nums}
@media (min-width:1024px){.numbers{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}

/* =========================================================
   9. SERVICES / PROCESS
   ========================================================= */
.steps-wrap{position:relative}
.steps{list-style:none;margin:0;padding:0;display:grid}
.step{position:relative;padding:0 0 32px 48px;display:flex;flex-direction:column;gap:8px}
.step::before{content:"";position:absolute;left:11px;top:28px;bottom:0;width:1px;background:var(--rule)}
.step:last-child::before{display:none}
.step .marker{position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--sage);display:flex;align-items:center;justify-content:center;transition:background-color var(--t-med) ease}
.step .marker::after{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--sage)}
.step:hover .marker{background:var(--sand-1)}
.step .k{font-size:var(--fs-caption);font-weight:600;color:var(--sage);letter-spacing:.04em}
.step p{margin:0;color:var(--muted)}
.steps-line{display:none}
@media (min-width:1024px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-top:48px}
  .step{padding:0}
  .step::before{display:none}
  .step .marker{top:-48px}
  .steps-line{display:block;position:absolute;left:0;right:0;top:11px;height:1px;background:var(--rule)}
  .steps-line span{display:block;height:100%;background:var(--sage);transform-origin:left;transform:scaleX(1)}
}
@supports (animation-timeline: view()){
  @media (min-width:1024px){.steps-line span{animation:grow-x linear both;animation-timeline:view();animation-range:entry 20% cover 45%}}
}

/* =========================================================
   10. PRICING
   ========================================================= */
.toggle{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--sand-1);gap:4px}
.toggle button{min-height:44px;padding:0 20px;border-radius:var(--r-pill);border:0;background:transparent;font-family:var(--sans);font-size:var(--fs-small);font-weight:500;color:var(--muted);cursor:pointer;transition:background-color var(--t-fast) ease,color var(--t-fast) ease,box-shadow var(--t-fast) ease}
.toggle button[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:0 2px 8px -4px rgba(35,36,31,.4)}
.prices{display:grid;gap:var(--gap);align-items:stretch}
@media (min-width:1024px){.prices{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}}
.price-card{border-radius:var(--r-card);border:1px solid var(--rule);padding:var(--pad-card);display:flex;flex-direction:column;gap:18px;background:var(--bg);transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) ease}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.price-card .amt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price-card .amt .h2{font-variant-numeric:tabular-nums}
.price-card ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:12px}
.price-card li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.price-card li svg{flex:none;color:var(--sage);margin-top:4px}
.price-card .btn{margin-top:auto}
.price-card--featured{background:var(--charcoal);border-color:var(--charcoal);color:var(--paper);position:relative}
.price-card--featured .small,.price-card--featured .caption{color:var(--on-dark-muted)}
.price-card--featured ul{border-top-color:var(--rule-dark)}
.price-card--featured li svg{color:var(--sage-mist)}
.badge{position:absolute;top:-14px;left:var(--pad-card);background:var(--sage-soft);color:var(--on-sage-soft);font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--r-pill)}
@media (min-width:1024px){.price-card--featured{transform:scale(1.04);padding-top:56px;padding-bottom:56px}.price-card--featured:hover{transform:scale(1.04) translateY(-4px)}}
.amt-anim{display:inline-block;animation:rise .45s var(--ease) both}

/* comparison table */
.compare-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-tile);-webkit-overflow-scrolling:touch}
.compare{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:15px}
.compare th,.compare td{padding:16px 20px;text-align:center;border-bottom:1px solid var(--rule)}
.compare th:first-child,.compare td:first-child{text-align:left;position:sticky;left:0;background:var(--bg);z-index:1}
.compare thead th{background:var(--sand-1);font-family:var(--serif);font-weight:400;font-size:22px;position:sticky;top:0;z-index:2}
.compare thead th:first-child{background:var(--sand-1);font-family:var(--sans);font-size:var(--fs-small);font-weight:500;color:var(--muted);z-index:3}
.compare tbody tr{transition:background-color var(--t-fast) ease}
.compare tbody tr:hover td{background:var(--sand-1)}
.compare tbody tr:last-child td{border-bottom:0}
.compare .yes{color:var(--sage)}
.compare .no{color:var(--faint)}
@media (min-width:1024px){
  .compare-wrap{overflow:visible;border:0;border-radius:0}
  .compare thead th{top:calc(var(--header-h) - 28px)}
  .compare thead th:first-child{border-top-left-radius:var(--r-sm);border-bottom-left-radius:var(--r-sm)}
  .compare thead th:last-child{border-top-right-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)}
}

/* =========================================================
   11. GRIDS: bento
   ========================================================= */
.bento{display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{border-radius:var(--r-tile);overflow:hidden;position:relative;padding:var(--pad-tile);display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:180px;
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) ease}
.tile:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--shadow-lift)}
.tile--img{padding:0;color:var(--paper)}
.tile--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.tile--img:hover img{transform:scale(1.06)}
.tile--img .cap{position:relative;margin-top:auto;padding:var(--pad-tile);background:linear-gradient(transparent,rgba(35,36,31,.75))}
.tile--feature{grid-column:span 2;min-height:360px}
.tile--wide{grid-column:span 2}
.tile .stat{line-height:.9}
@media (min-width:1024px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px}
  .tile{min-height:0}
  .tile--feature{grid-column:span 2;grid-row:span 2}
  .tile--tall{grid-row:span 2}
}

/* =========================================================
   12. SLIDERS
   ========================================================= */
.slider{position:relative}
.slider-viewport{overflow:hidden;border-radius:var(--r-card)}
.slider-track{display:flex;transition:transform .7s var(--ease)}
.slide{flex:0 0 100%;min-width:0}
.slider-ctrls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.dots{display:flex;gap:4px}
.dots button{width:28px;height:44px;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.dots button span{display:block;width:8px;height:8px;border-radius:var(--r-pill);background:var(--rule);transition:width var(--t-med) var(--ease),background-color var(--t-med) ease}
.dots button[aria-current="true"] span{width:24px;background:var(--sage)}
.arrows{display:flex;gap:8px}
.case{display:grid;background:var(--sand-1);min-height:100%}
.case-media{aspect-ratio:4/3;overflow:hidden}
.case-media img{width:100%;height:100%;object-fit:cover}
.case-copy{padding:var(--pad-card);display:flex;flex-direction:column;align-items:flex-start;gap:14px;justify-content:center}
@media (min-width:768px){.case{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.case-media{aspect-ratio:auto;min-height:480px}}

/* =========================================================
   13. TABS
   ========================================================= */
.tablist{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 4px;border-bottom:1px solid var(--rule)}
.tablist::-webkit-scrollbar{display:none}
.tab{flex:none;min-height:48px;padding:0 4px;margin-right:20px;border:0;background:transparent;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--muted);cursor:pointer;position:relative;white-space:nowrap}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
@media (min-width:768px){.tablist{margin:0;padding:0 0 4px}.tab{font-size:var(--fs-body-lg);margin-right:36px}}
.tabpanels{display:grid;margin-top:32px}
.tabpanel{grid-area:1/1;display:grid;gap:24px;align-items:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s ease,transform .45s var(--ease),visibility 0s linear .45s}
.tabpanel.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s var(--ease),visibility 0s}
.tabpanel .media{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3}
.tabpanel .media img{width:100%;height:100%;object-fit:cover}
.tabpanel ul{margin:0;padding-left:20px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
@media (min-width:768px){.tabpanel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}

/* =========================================================
   14. TESTIMONIALS
   ========================================================= */
.tslider-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 24px;scroll-padding-left:var(--gutter)}
.tslider-track::-webkit-scrollbar{display:none}
.tcard{flex:0 0 86%;scroll-snap-align:start;border-radius:var(--r-card);background:var(--sand-1);padding:var(--pad-card);display:flex;flex-direction:column;gap:20px;transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) ease}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.tcard blockquote{margin:0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--ink)}
@media (min-width:768px){.tcard{flex-basis:calc((100% - var(--gap)) / 2)}}
@media (min-width:1024px){.tslider-track{margin:0;padding:4px 0 24px;scroll-padding-left:0}.tcard{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
.stars{display:flex;gap:2px;color:var(--clay)}
.person{display:flex;align-items:center;gap:12px;margin-top:auto}
.avatar{width:48px;height:48px;border-radius:var(--r-pill);background:var(--sand-3);color:var(--clay);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px;flex:none}
.avatar-lg{width:64px;height:64px;font-size:26px}
.person .nm{font-weight:600;font-size:15px;line-height:1.3}
.person .rl{font-size:var(--fs-caption);color:var(--muted)}
.bigquote{text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px;max-width:900px;margin:0 auto}
.bigquote .mark{font-family:var(--serif);font-size:120px;line-height:.5;color:var(--sage);height:44px}
.bigquote blockquote{margin:0;font-family:var(--serif);font-size:var(--fs-h3);line-height:1.1;letter-spacing:var(--track-head)}
.masonry{columns:1;column-gap:var(--gap)}
@media (min-width:640px){.masonry{columns:2}}
@media (min-width:1024px){.masonry{columns:3}}
.mq{break-inside:avoid;margin:0 0 var(--gap);border-radius:var(--r-card);border:1px solid var(--rule);padding:var(--pad-card);display:flex;flex-direction:column;gap:20px;
  transition:transform var(--t-med) var(--ease),background-color var(--t-med) ease,border-color var(--t-med) ease}
.mq:hover{transform:translateY(-4px);background:var(--sand-1);border-color:var(--sand-1)}
.mq blockquote{margin:0}
.mq .q-xl{font-family:var(--serif);font-size:var(--fs-h4);line-height:1.15}
.mq .q-l{font-family:var(--serif);font-size:24px;line-height:1.2}
.mq .q-m{font-size:var(--fs-body-lg);line-height:1.55}
.mq .nm{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--t-med) ease}
.mq:hover .nm{background-size:100% 1px}
.mq--dark{background:var(--charcoal);border-color:var(--charcoal);color:var(--paper)}
.mq--dark:hover{background:var(--ink);border-color:var(--ink)}
.mq--dark .rl{color:var(--on-dark-muted)}
.mq--dark .avatar{background:var(--sage);color:var(--paper)}

/* =========================================================
   15. FAQ / ACCORDION
   ========================================================= */
.faq2{display:grid;gap:40px}
.faq2 .side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media (min-width:1024px){.faq2{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px;align-items:start}.faq2 .side{position:sticky;top:calc(var(--header-h) + 24px)}}
.acc{border-top:1px solid var(--rule)}
.acc-item{border-bottom:1px solid var(--rule)}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:16px 0;border:0;background:transparent;text-align:left;font-family:var(--serif);font-size:24px;line-height:1.15;color:var(--ink);cursor:pointer}
.acc-btn:hover{color:var(--sage)}
.acc-ic{flex:none;width:40px;height:40px;border-radius:var(--r-pill);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;position:relative;transition:background-color var(--t-med) ease,border-color var(--t-med) ease,color var(--t-med) ease}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;width:14px;height:1.5px;background:currentColor;transition:transform var(--t-med) var(--ease)}
.acc-ic::after{transform:rotate(90deg)}
.acc-item.is-open .acc-ic{background:var(--sage);border-color:var(--sage);color:var(--paper)}
.acc-item.is-open .acc-ic::after{transform:rotate(0deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc-item.is-open .acc-panel{grid-template-rows:1fr}
.acc-panel > div{overflow:hidden}
.acc-panel p{margin:0;padding:0 56px 24px 0;color:var(--muted);font-size:var(--fs-body-lg)}
@media (min-width:768px){.acc-btn{font-size:26px}}

/* =========================================================
   16. PEOPLE
   ========================================================= */
.team{display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.team{grid-template-columns:repeat(4,minmax(0,1fr))}}
.member{display:flex;flex-direction:column;gap:12px}
.member-photo{position:relative;border-radius:var(--r-tile);overflow:hidden;aspect-ratio:4/5;background:var(--sand-2)}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--clay);font-size:var(--fs-caption);text-align:center;padding:12px}
.ph--1{background:var(--sand-1)}.ph--2{background:var(--sand-2)}.ph--3{background:var(--sand-3)}
.member-bio{position:absolute;inset:auto 8px 8px 8px;background:var(--charcoal);color:var(--on-dark);border-radius:var(--r-sm);padding:16px;font-size:var(--fs-small);line-height:1.5;
  opacity:0;transform:translateY(12px);transition:opacity var(--t-med) ease,transform var(--t-med) var(--ease);pointer-events:none}
.member.is-open .member-bio{opacity:1;transform:none}
@media (hover:hover){.member:hover .member-bio{opacity:1;transform:none}}
.member-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.member .nm{font-family:var(--serif);font-size:24px;line-height:1.1}
.member .bio-btn{width:44px;height:44px}

/* =========================================================
   17. FORMS (shared input style)
   ========================================================= */
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field .lbl{font-size:var(--fs-small);font-weight:500;color:var(--ink)}
.field .opt{color:var(--muted);font-weight:400}
.input,.select,.textarea{width:100%;min-height:52px;padding:0 18px;border-radius:var(--r-sm);border:1px solid var(--rule);background:var(--bg);font-family:var(--sans);font-size:16px;color:var(--ink);
  transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease,background-color var(--t-fast) ease;-webkit-appearance:none;appearance:none}
.textarea{padding:14px 18px;min-height:140px;resize:vertical;line-height:1.5}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--faint)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--sage);box-shadow:var(--ring)}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--sand-1);color:var(--faint);cursor:not-allowed}
.is-error .input,.is-error .select,.is-error .textarea{border-color:var(--error)}
.err{display:flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--error);font-weight:500}
.on-sage .err,.on-dark .err{color:var(--paper)}
.inline-form{display:flex;flex-direction:column;gap:10px}
@media (min-width:640px){.inline-form{flex-direction:row}.inline-form .input{flex:1}}
.on-sage .input{border-color:transparent}
.success{display:flex;gap:14px;align-items:flex-start;border-radius:var(--r-tile);padding:20px;background:var(--sand-1);color:var(--ink);animation:rise .5s var(--ease) both}
.success .ic{flex:none;width:36px;height:36px;border-radius:var(--r-pill);background:var(--sage);color:var(--paper);display:flex;align-items:center;justify-content:center}
.on-sage .success,.on-dark .success{background:rgba(255,255,255,.12);color:var(--paper)}
.on-sage .success .ic,.on-dark .success .ic{background:var(--bg);color:var(--sage)}

/* =========================================================
   18. CONVERSION
   ========================================================= */
.news-band{border-radius:var(--r-card);padding:32px 24px;display:grid;gap:24px;align-items:center}
@media (min-width:1024px){.news-band{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding:56px;gap:64px}}
.cta-band{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;background:var(--ink);color:var(--paper)}
.cta-band .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-band .inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding-top:72px;padding-bottom:72px}
.cta-band .h1{color:var(--paper);max-width:760px}

/* =========================================================
   19. CONTENT FEEDS
   ========================================================= */
.posts{display:grid;gap:var(--gap-lg) var(--gap)}
@media (min-width:768px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink)}
.post-media{border-radius:var(--r-tile);overflow:hidden;aspect-ratio:4/3;background:var(--sand-2)}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.post:hover .post-media img{transform:scale(1.05)}
.post .meta{display:flex;gap:10px;align-items:center;font-size:var(--fs-caption);color:var(--muted)}
.post .h5{transition:color var(--t-fast) ease}
.post:hover .h5{color:var(--sage)}
.post p{margin:0;color:var(--muted);font-size:15px}

/* =========================================================
   20. FOOTERS
   ========================================================= */
.footer-mega{background:var(--charcoal);color:var(--on-dark);padding:72px 0 0}
.footer-grid{display:grid;gap:40px}
.footer-col h3{font-family:var(--sans);font-size:var(--fs-small);font-weight:600;color:var(--paper);margin:0 0 14px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.site .footer-mega a{color:var(--on-dark-muted);text-decoration:none}
.site .footer-mega a:hover{color:var(--paper)}
.footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
@media (min-width:640px){.footer-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.footer-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) minmax(0,1.3fr);gap:56px}}
.footer-mega .input{background:rgba(255,255,255,.08);border-color:var(--rule-dark);color:var(--paper)}
.footer-mega .input::placeholder{color:var(--on-dark-faint)}
.footer-mega .field label{color:var(--paper)}
.footer-bottom{margin-top:56px;border-top:1px solid var(--rule-dark);padding:20px 0 28px;display:flex;flex-direction:column;gap:12px;font-size:var(--fs-caption);color:var(--on-dark-faint)}
.footer-bottom .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.footer-bottom .legal{display:flex;flex-wrap:wrap;gap:20px}
.footer-crisis{font-size:var(--fs-caption);color:var(--on-dark-muted);padding:14px 16px;border-radius:var(--r-sm);background:rgba(255,255,255,.06)}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .benefits-track,.logo-marquee .track,.text-marquee .track{flex-wrap:wrap;width:auto}
}

/* =========================================================
   PAGE: Blog index
   ========================================================= */
.page-head{padding-top:48px;display:grid;gap:28px;align-items:end}
@media (min-width:1024px){.page-head{padding-top:72px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:64px}}
.blog-search{position:relative}
.blog-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.blog-search .input{padding-left:48px;border-radius:var(--r-pill)}
.blog-search .input::-webkit-search-cancel-button{cursor:pointer}

/* featured post */
.featured-post{display:grid;border-radius:var(--r-card);overflow:hidden;background:var(--sand-1);text-decoration:none;color:var(--ink);transition:box-shadow var(--t-med) ease}
.site .featured-post{color:var(--ink)}
.featured-post:hover{box-shadow:var(--shadow-lift)}
.fp-media{aspect-ratio:4/3;overflow:hidden}
.fp-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.featured-post:hover .fp-media img{transform:scale(1.04)}
.fp-copy{padding:var(--pad-card);display:flex;flex-direction:column;align-items:flex-start;gap:18px;justify-content:center}
.fp-copy .meta,.post .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:var(--fs-caption);color:var(--muted)}
.featured-post:hover .btn-primary{background:var(--sage-dark);transform:translateY(-2px)}
.featured-post:hover .btn svg.arrow-r{transform:translateX(4px)}
.byline{display:flex;align-items:center;gap:12px}
.byline .nm{display:block;font-weight:600;font-size:15px;line-height:1.3}
@media (min-width:768px){.featured-post{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.fp-media{aspect-ratio:auto;min-height:460px}.fp-copy{padding:48px}}

/* filter bar */
.blog-bar{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--rule);padding-top:24px}
@media (min-width:1024px){.blog-bar{flex-direction:row;align-items:center;justify-content:space-between}}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter)}
.chips::-webkit-scrollbar{display:none}
@media (min-width:1024px){.chips{flex-wrap:wrap;margin:0;padding:0;overflow:visible}}
.chip{flex:none;min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--bg);font-family:var(--sans);font-size:var(--fs-small);font-weight:500;color:var(--ink);cursor:pointer;
  transition:background-color var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease}
.chip:hover{border-color:var(--sage)}
.chip[aria-pressed="true"]{background:var(--sage);border-color:var(--sage);color:var(--paper)}

/* post cards as articles (title + image are the links) */
.post .h5 a{color:inherit;text-decoration:none}
.site .post .h5 a:hover{color:var(--sage)}
.post .h5 a::after{content:"";position:absolute;inset:0}
.post{position:relative}
.post .post-link{display:block}
.post.is-in{animation:rise .5s var(--ease) both}
.blog-empty{border:1px dashed var(--rule);border-radius:var(--r-card);padding:40px var(--pad-card);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}

/* pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px}
.pagination:empty{display:none}
.page-btn{min-width:48px;height:48px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--bg);font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease}
.page-btn:hover{border-color:var(--sage)}
.page-btn[aria-current="page"]{background:var(--charcoal);border-color:var(--charcoal);color:var(--paper)}
.page-btn[disabled]{opacity:.4;cursor:not-allowed;border-color:var(--rule)}

/* start-here reading list */
.start-here{background:var(--sand-1);border-radius:var(--r-card);padding:var(--pad-card);display:grid;gap:28px}
@media (min-width:1024px){.start-here{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:64px;padding:56px;align-items:center}}
.start-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--sand-3)}
.start-list a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--sand-3);text-decoration:none;transition:padding var(--t-med) var(--ease)}
.start-list a:hover{padding-left:8px}
.start-list .n{font-family:var(--serif);font-size:28px;line-height:1;color:var(--sage)}
.start-list .t{font-family:var(--serif);font-size:24px;line-height:1.15}

[data-blog]{scroll-margin-top:calc(var(--header-h) + 16px)}


/* =========================================================
   SECTION VARIANTS (from the template Elements page)
   ========================================================= */

/* ===== 1b split hero ===== */
.hero-split{display:grid;gap:32px;align-items:center}
.hero-split .media{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;position:relative}
.hero-split .media img{width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){
  .hero-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;min-height:640px}
  .hero-split .media{aspect-ratio:auto;height:680px;margin-right:calc(50% - 50vw + var(--gutter));border-radius:var(--r-card) 0 0 var(--r-card);margin-bottom:-120px}
}
/* ===== 1c typographic hero ===== */
.hero-type{padding:48px 0 24px;display:flex;flex-direction:column;gap:28px}
.hero-type .mega{font-family:var(--serif);font-weight:400;font-size:clamp(52px,10vw,148px);line-height:.92;letter-spacing:-.03em;margin:0}
.hero-type .mega em{color:var(--sage)}
.scroll-cue{display:inline-flex;align-items:center;gap:14px;font-size:var(--fs-small);color:var(--muted);text-decoration:none}
.scroll-cue .line{width:1px;height:48px;background:var(--rule);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--sage);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{to{top:100%}}
/* ===== 1d hero with floating cards ===== */
.hero-float{display:grid;gap:40px;align-items:center}
.float-wrap{position:relative;padding:24px 0 40px}
.float-wrap .main-img{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;max-width:440px;margin-left:auto}
.float-wrap .main-img img{width:100%;height:100%;object-fit:cover}
.fcard{position:absolute;background:var(--bg);border-radius:var(--r-tile);box-shadow:var(--shadow-lift);padding:16px 18px;display:flex;gap:12px;align-items:center;animation:bob 6s ease-in-out infinite}
.fcard.f1{left:0;top:12%}
.fcard.f2{right:-4px;bottom:6%;max-width:260px;animation-delay:-2s;align-items:flex-start}
.fcard.f3{left:6%;bottom:0;animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (min-width:1024px){.hero-float{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}.fcard.f1{left:-8%}}
/* ===== 1e video hero ===== */
.hero-video{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--charcoal);color:var(--paper)}
.hero-video .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kenburns 20s ease-in-out infinite alternate}
.hero-video .inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding:72px var(--gutter)}
.play{width:88px;height:88px;border-radius:var(--r-pill);border:1px solid var(--glass-line);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:transform var(--t-med) var(--ease),background-color var(--t-med) ease}
.play::before{content:"";position:absolute;inset:-8px;border-radius:var(--r-pill);border:1px solid var(--glass-line);animation:ring 2.4s ease-out infinite}
@keyframes ring{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}}
.play:hover{transform:scale(1.08);background:var(--sage)}
.play-sm{width:56px;height:56px}
.play-sm::before{display:none}
.vid-tag{position:absolute;top:16px;left:16px;font-size:var(--fs-caption);color:var(--on-dark-muted)}

/* ===== Modal / lightbox ===== */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:var(--gutter);animation:fadein var(--t-fast) ease both}
.modal-bg{position:absolute;inset:0;background:rgba(35,36,31,.82);border:0;cursor:pointer}
.modal-box{position:relative;width:100%;max-width:960px;animation:rise .4s var(--ease) both}
.modal-close{position:absolute;top:-56px;right:0;width:48px;height:48px;border-radius:var(--r-pill);border:1px solid var(--rule-dark);background:transparent;color:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center}
.video-ph{aspect-ratio:16/9;border-radius:var(--r-tile);background:var(--ink);color:var(--on-dark-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.qv{background:var(--bg);border-radius:var(--r-card);overflow:hidden;display:grid;max-width:820px;margin:0 auto}
.qv .m{aspect-ratio:1;background:var(--sand-2)}
.qv .m img{width:100%;height:100%;object-fit:cover}
.qv .c{padding:var(--pad-card);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
@media (min-width:768px){.qv{grid-template-columns:1fr 1fr}}

/* ===== 3a logo grid ===== */
.logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.logo-grid .cell{display:flex;align-items:center;justify-content:center;min-height:120px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:background-color var(--t-med) ease}
.logo-grid .cell:hover{background:var(--sand-1)}
.logo-grid .cell:hover .logo{color:var(--sage)}
@media (min-width:1024px){.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.logo-grid .cell{min-height:150px}}

/* ===== 5 text sections ===== */
.two-col .cols{columns:1;column-gap:48px;margin-top:28px}
.two-col .cols p{margin:0 0 18px;color:var(--muted);font-size:var(--fs-body-lg);break-inside:avoid-column}
@media (min-width:768px){.two-col .cols{columns:2}}
.dropcap-wrap{display:grid;gap:32px}
.dropcap{margin:0;font-size:var(--fs-body-lg);max-width:var(--measure);color:var(--ink)}
.dropcap::first-letter{font-family:var(--serif);float:left;font-size:96px;line-height:.8;padding:8px 14px 0 0;color:var(--sage)}
.margin-quote{border-left:1px solid var(--sage);padding-left:20px;font-family:var(--serif);font-size:24px;line-height:1.2;margin:0;align-self:start}
@media (min-width:1024px){.dropcap-wrap{grid-template-columns:minmax(0,1fr) 240px;gap:64px}}
.pullquote{position:relative;margin:0;padding:48px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;gap:20px;max-width:880px}
.pullquote .mk{font-family:var(--serif);font-size:160px;line-height:.6;height:56px;color:var(--sage-mist)}
.pullquote blockquote{margin:0;font-family:var(--serif);font-size:var(--fs-h3);line-height:1.08;letter-spacing:var(--track-head)}
.inline-img{max-width:var(--measure)}
.inline-img p{margin:0 0 18px;color:var(--muted);font-size:var(--fs-body-lg)}
.inline-img figure{margin:6px 0 20px;}
.inline-img figure img{border-radius:var(--r-tile);aspect-ratio:4/3;width:100%;object-fit:cover}
.inline-img figcaption{font-size:var(--fs-caption);color:var(--muted);margin-top:8px}
@media (min-width:768px){.inline-img figure{float:right;width:46%;margin:6px 0 16px 32px}}
.callout{display:flex;gap:16px;align-items:flex-start;background:var(--sand-1);border-radius:var(--r-tile);padding:24px;max-width:var(--measure)}
.callout .ic{flex:none;width:40px;height:40px;border-radius:var(--r-pill);background:var(--sage);color:var(--paper);display:flex;align-items:center;justify-content:center}
.callout p{margin:0;color:var(--ink)}
.takeaways{border:1px solid var(--ink);border-radius:var(--r-tile);padding:28px;max-width:var(--measure)}
.takeaways h3{font-family:var(--sans);font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;margin:0 0 16px;color:var(--sage)}
.takeaways ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-body-lg)}
.takeaways li::marker{color:var(--sage)}
.qa{display:flex;flex-direction:column;gap:32px;max-width:var(--measure)}
.qa h3{font-family:var(--sans);font-size:var(--fs-body-lg);font-weight:600;margin:0 0 8px}
.qa p{margin:0;color:var(--muted);font-size:var(--fs-body-lg)}
.dl{margin:0;border-top:1px solid var(--rule)}
.dl .row{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--rule);transition:padding var(--t-med) var(--ease)}
.dl .row:hover{padding-left:8px}
.dl dt{font-family:var(--serif);font-size:24px;line-height:1.15}
.dl dd{margin:0;color:var(--muted)}
@media (min-width:768px){.dl .row{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}}
.rich{max-width:var(--measure);font-size:var(--fs-body-lg);color:var(--ink)}
.rich h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-h3);line-height:1.05;letter-spacing:var(--track-head);margin:0 0 16px}
.rich h3{font-family:var(--serif);font-weight:400;font-size:var(--fs-h4);line-height:1.1;margin:32px 0 12px}
.rich h4{font-family:var(--sans);font-size:var(--fs-body-lg);font-weight:600;margin:24px 0 8px}
.rich p{margin:0 0 16px;color:var(--muted)}
.rich ul,.rich ol{margin:0 0 16px;padding-left:22px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.rich li::marker{color:var(--sage)}
.rich strong{color:var(--ink);font-weight:600}
.site .rich a{color:var(--sage);text-underline-offset:3px}
.site .rich a:hover{color:var(--sage-dark)}
.rich code{font-family:ui-monospace,Menlo,monospace;font-size:.88em;background:var(--sand-1);color:var(--clay);padding:2px 6px;border-radius:6px}
.rich hr{border:0;height:1px;background:var(--rule);margin:32px 0}
.story{display:flex;flex-direction:column;gap:40px;max-width:820px}
.story .chap{display:grid;gap:8px}
.story .yr{font-family:var(--serif);font-size:32px;line-height:1;color:var(--sage)}
.story p{margin:0;color:var(--muted);font-size:var(--fs-body-lg);max-width:var(--measure)}
@media (min-width:768px){.story .chap{grid-template-columns:120px minmax(0,1fr);gap:32px}}

/* ===== 6d image stack ===== */
.img-stack{position:relative;padding:0 18% 18% 0}
.img-stack .a{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5}
.img-stack .b{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:1;border-radius:var(--r-tile);overflow:hidden;border:8px solid var(--bg);box-shadow:var(--shadow-lift);transition:transform var(--t-slow) var(--ease)}
.img-stack:hover .b{transform:translate(-8px,-8px) rotate(-2deg)}
.img-stack img{width:100%;height:100%;object-fit:cover}

/* ===== 7 card variants ===== */
.card--image{padding:0;overflow:hidden;background:var(--sand-1)}
.card--image .m{aspect-ratio:3/2;overflow:hidden}
.card--image .m img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.card--image:hover .m img{transform:scale(1.05)}
.card--image .b{padding:var(--pad-tile);display:flex;flex-direction:column;gap:10px}
.card--iconleft{flex-direction:row;align-items:flex-start;gap:18px;border:1px solid var(--rule)}
.card--iconleft:hover{border-color:var(--sage)}

/* ===== 8a benefits row ===== */
.ben-row{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.ben-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ben-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ben{display:flex;flex-direction:column;gap:10px}
.ben .ic{color:var(--sage)}
.ben h3{font-family:var(--sans);font-size:var(--fs-body-lg);font-weight:600;margin:0}
.ben p{margin:0;color:var(--muted);font-size:15px}
.ben--card{background:var(--sand-1);border-radius:var(--r-tile);padding:var(--pad-tile);transition:transform var(--t-med) var(--ease),background-color var(--t-med) ease}
.ben--card:hover{transform:translateY(-4px);background:var(--sand-2)}
.ben--num .n{font-family:var(--serif);font-size:48px;line-height:1;color:var(--sage)}
.ben--num{border-top:1px solid var(--rule);padding-top:20px}

/* ===== 9 services ===== */
.svc-card{border-radius:var(--r-card);border:1px solid var(--rule);padding:var(--pad-card);display:flex;flex-direction:column;gap:14px;transition:transform var(--t-med) var(--ease),border-color var(--t-med) ease,background-color var(--t-med) ease}
.svc-card:hover{transform:translateY(-4px);border-color:var(--sand-2);background:var(--sand-1)}
.svc-card .from{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid var(--rule)}
.svc-card .from .v{font-family:var(--serif);font-size:32px;line-height:1}
.offer{display:grid;gap:0;border-radius:var(--r-card);overflow:hidden;background:var(--sand-1)}
.offer .m{min-height:320px;position:relative}
.offer .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.offer .c{padding:var(--pad-card);display:flex;flex-direction:column;gap:20px}
.offer ul.ck{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.offer ul.ck li{display:flex;gap:12px;align-items:flex-start}
.offer ul.ck li svg{flex:none;margin-top:5px;color:var(--sage)}
.mini-tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mini-tl div{border-top:2px solid var(--sage);padding-top:8px;font-size:var(--fs-caption);color:var(--muted)}
.mini-tl b{display:block;color:var(--ink);font-weight:600}
@media (min-width:1024px){.offer{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.offer .c{padding:56px}}

/* ===== 11 grids ===== */
.grid-reg{display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.grid-reg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gi{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.gi .m{border-radius:var(--r-tile);overflow:hidden;aspect-ratio:1}
.gi .m img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.gi:hover .m img{transform:scale(1.06)}
.masonry-img{columns:2;column-gap:var(--gap)}
@media (min-width:1024px){.masonry-img{columns:3}}
.masonry-img figure{margin:0 0 var(--gap);break-inside:avoid;border-radius:var(--r-tile);overflow:hidden;position:relative}
.masonry-img img{width:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.masonry-img figure:hover img{transform:scale(1.05)}
.masonry-img figcaption{position:absolute;left:12px;bottom:12px;background:var(--bg);border-radius:var(--r-pill);padding:4px 12px;font-size:var(--fs-caption);opacity:0;transform:translateY(6px);transition:opacity var(--t-med) ease,transform var(--t-med) var(--ease)}
.masonry-img figure:hover figcaption{opacity:1;transform:none}
.hs-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 8px;scroll-padding-left:var(--gutter)}
.hs-track::-webkit-scrollbar{display:none}
.hs-card{flex:0 0 78%;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink)}
.hs-card .m{border-radius:var(--r-tile);overflow:hidden;aspect-ratio:4/5}
.hs-card .m img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.hs-card:hover .m img{transform:scale(1.05)}
@media (min-width:768px){.hs-card{flex-basis:42%}}
@media (min-width:1024px){.hs-card{flex-basis:30%}}

/* ===== 12 sliders ===== */
.img-slide{aspect-ratio:4/3;position:relative}
.img-slide img{width:100%;height:100%;object-fit:cover}
.img-slide .cap{position:absolute;left:16px;bottom:16px;background:var(--bg);padding:6px 14px;border-radius:var(--r-pill);font-size:var(--fs-caption)}
@media (min-width:768px){.img-slide{aspect-ratio:21/9}}
.ba{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;user-select:none;background:var(--charcoal)}
@media (min-width:768px){.ba{aspect-ratio:16/9}}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .eve{filter:brightness(.55) sepia(.45) saturate(1.2)}
.ba .handle{position:absolute;top:0;bottom:0;width:2px;background:var(--bg);transform:translateX(-1px);pointer-events:none}
.ba .knob{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:var(--r-pill);background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lift);transition:transform var(--t-fast) ease}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba input:focus-visible ~ .handle .knob{outline:2px solid var(--sage);outline-offset:3px}
.ba:hover .knob{transform:scale(1.08)}
.ba .tag{position:absolute;top:16px;background:var(--bg);color:var(--ink);font-size:var(--fs-caption);font-weight:600;padding:4px 12px;border-radius:var(--r-pill);pointer-events:none}

/* ===== 13b sticky scroll ===== */
.ss{display:grid;gap:32px}
.ss-media{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:var(--sand-2)}
.ss-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform 1.2s var(--ease)}
.ss-media img.is-active{opacity:1;transform:none}
.ss-items{display:flex;flex-direction:column}
.ss-item{padding:32px 0;border-top:1px solid var(--rule);opacity:.4;transition:opacity .5s ease;display:flex;flex-direction:column;gap:12px}
.ss-item.is-active{opacity:1}
.ss-item p{margin:0;color:var(--muted);font-size:var(--fs-body-lg)}
@media (min-width:1024px){
  .ss{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
  .ss-media{position:sticky;top:calc(var(--header-h) + 88px);order:2}
  .ss-item{min-height:56vh;justify-content:center}
}

/* ===== 14 testimonial variants ===== */
.tc-img{display:grid;gap:var(--gap)}
@media (min-width:768px){.tc-img{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tci{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:3/4;color:var(--paper);display:flex;flex-direction:column;justify-content:flex-end;margin:0}
.tci img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.tci:hover img{transform:scale(1.05)}
.tci::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.82));z-index:1}
.tci blockquote,.tci figcaption{position:relative;z-index:2;margin:0;padding:0 24px}
.tci blockquote{font-family:var(--serif);font-size:28px;line-height:1.1}
.tci figcaption{padding-top:10px;padding-bottom:24px;font-size:var(--fs-caption);color:var(--on-dark-muted)}
.logo-quote{display:grid;gap:var(--gap)}
@media (min-width:768px){.logo-quote{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lq{border-radius:var(--r-card);background:var(--sand-1);padding:var(--pad-card);display:flex;flex-direction:column;gap:20px;margin:0;transition:transform var(--t-med) var(--ease)}
.lq:hover{transform:translateY(-4px)}
.lq .lg{color:var(--clay)}
.lq blockquote{margin:0;font-family:var(--serif);font-size:var(--fs-h5);line-height:1.15}
.vt{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.vt{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vt-card{display:flex;flex-direction:column;gap:12px}
.vt-thumb{position:relative;border-radius:var(--r-tile);overflow:hidden;aspect-ratio:4/5;border:0;padding:0;cursor:pointer;background:var(--charcoal);display:block;width:100%}
.vt-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.vt-thumb:hover img{transform:scale(1.05)}
.vt-thumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.vt-thumb:hover .play{transform:translate(-50%,-50%) scale(1.08);background:var(--sage)}
.vt-thumb .dur{position:absolute;right:12px;bottom:12px;background:var(--ink);color:var(--paper);font-size:12px;padding:2px 8px;border-radius:var(--r-pill)}

/* ===== 15c accordion with image ===== */
.acc-img{display:grid;gap:32px;align-items:start}
.acc-img .media{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5}
.acc-img .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.acc-img .media img.is-active{opacity:1}
@media (min-width:1024px){.acc-img{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px}.acc-img .acc-btn{font-size:var(--fs-h4);min-height:88px}}

/* ===== 16 people ===== */
.founder{display:grid;gap:32px;align-items:center}
.founder .portrait{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:var(--sand-2)}
@media (min-width:768px){.founder{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.tl{list-style:none;margin:0;padding:0;position:relative;max-width:720px}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--rule)}
.tl li{position:relative;padding:0 0 36px 44px;display:grid;gap:6px}
.tl li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--sage);transition:background-color var(--t-med) ease}
.tl li:hover::before{background:var(--sage)}
.tl .y{font-size:var(--fs-caption);font-weight:600;color:var(--sage);letter-spacing:.04em}
.tl p{margin:0;color:var(--muted)}
@media (min-width:768px){.tl li{grid-template-columns:100px minmax(0,1fr);gap:24px}}
.press{display:grid;gap:var(--gap)}
@media (min-width:768px){.press{grid-template-columns:repeat(3,minmax(0,1fr))}}
.press-item{display:flex;flex-direction:column;gap:16px;padding:24px 0;border-top:1px solid var(--ink)}
.press-item .q{font-family:var(--serif);font-size:24px;line-height:1.2;margin:0}
.badges{display:flex;flex-wrap:wrap;gap:12px}
.badge-round{width:112px;height:112px;border-radius:var(--r-pill);border:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--muted);padding:12px;transition:transform var(--t-med) var(--ease),border-color var(--t-med) ease}
.badge-round b{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink);line-height:1}
.badge-round:hover{transform:rotate(-6deg);border-color:var(--sage)}

/* ===== 17 forms ===== */
.states{display:grid;gap:20px}
@media (min-width:768px){.states{grid-template-columns:repeat(3,minmax(0,1fr))}}
.input.is-hover{border-color:var(--faint)}
.input.is-focus{border-color:var(--sage);box-shadow:var(--ring)}
.input.is-ok{border-color:var(--sage)}
.ok-msg{display:flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--sage);font-weight:500}
.lead-card{display:grid;border-radius:var(--r-card);overflow:hidden;background:var(--sand-1)}
.lead-card .m{background:var(--sand-3);display:flex;align-items:center;justify-content:center;padding:40px}
.lead-card .book{width:62%;max-width:220px;aspect-ratio:3/4;border-radius:6px 14px 14px 6px;background:var(--charcoal);color:var(--paper);padding:24px 20px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-lift);transform:rotate(-4deg);transition:transform var(--t-med) var(--ease)}
.lead-card:hover .book{transform:rotate(0) translateY(-6px)}
.lead-card .c{padding:var(--pad-card);display:flex;flex-direction:column;gap:16px}
@media (min-width:768px){.lead-card{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.form-grid{display:grid;gap:18px}
@media (min-width:768px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid .full{grid-column:1 / -1}}
.select-wrap{position:relative}
.select-wrap svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.select{padding-right:44px;cursor:pointer}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--rule);cursor:pointer;font-size:15px;transition:border-color var(--t-fast) ease,background-color var(--t-fast) ease}
.opt:hover{border-color:var(--faint)}
.opt input{width:18px;height:18px;margin:0;accent-color:var(--sage)}
.opt.is-on{border-color:var(--sage);background:var(--sand-1)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--muted);cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--sage);flex:none}
.ms{border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--pad-card);display:flex;flex-direction:column;gap:28px;max-width:820px}
.ms-top{display:flex;flex-direction:column;gap:12px}
.ms-steps{display:flex;justify-content:space-between;font-size:var(--fs-caption);color:var(--muted);font-weight:500}
.ms-steps .on{color:var(--sage)}
.ms-bar{height:4px;border-radius:var(--r-pill);background:var(--sand-2);overflow:hidden}
.ms-bar span{display:block;height:100%;background:var(--sage);border-radius:var(--r-pill);transition:width .5s var(--ease)}
.ms-body{animation:rise .45s var(--ease) both}
.ms-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;margin-bottom:10px;font-size:var(--fs-small);font-weight:500}

/* ===== 18 conversion ===== */
.cta-card{display:grid;border-radius:var(--r-card);overflow:hidden;background:var(--charcoal);color:var(--paper)}
.cta-card .m{min-height:260px;position:relative}
.cta-card .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.cta-card:hover .m img{transform:scale(1.04)}
.cta-card .c{padding:var(--pad-card);display:flex;flex-direction:column;gap:18px;align-items:flex-start;justify-content:center}
@media (min-width:768px){.cta-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cta-card .c{padding:56px}}
.cta-color{border-radius:var(--r-card);background:var(--sand-3);padding:var(--pad-card);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
@media (min-width:1024px){.cta-color{flex-direction:row;align-items:center;justify-content:space-between;padding:56px}}
.booking{display:grid;gap:32px;align-items:start}
@media (min-width:1024px){.booking{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:64px}}
.embed{border-radius:var(--r-card);border:1px solid var(--rule);padding:var(--pad-tile);display:flex;flex-direction:column;gap:20px;background:var(--bg)}
.embed .note{font-size:var(--fs-caption);color:var(--muted);text-align:center;border-top:1px dashed var(--rule);padding-top:14px}
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.day,.slot{border:1px solid var(--rule);background:var(--bg);border-radius:var(--r-sm);min-height:56px;cursor:pointer;font-family:var(--sans);font-size:var(--fs-small);color:var(--ink);transition:border-color var(--t-fast) ease,background-color var(--t-fast) ease,color var(--t-fast) ease}
.day{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.day b{font-family:var(--serif);font-weight:400;font-size:22px}
.day:hover,.slot:hover{border-color:var(--sage)}
.day[aria-pressed="true"],.slot[aria-pressed="true"]{background:var(--sage);border-color:var(--sage);color:var(--paper)}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.slot{min-height:48px}

/* ===== 19 feeds ===== */
.social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@media (min-width:1024px){.social-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}}
.sg{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;display:block}
.sg img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.sg::after{content:"";position:absolute;inset:0;background:rgba(88,117,89,.0);transition:background-color var(--t-med) ease}
.sg:hover img{transform:scale(1.08)}
.sg:hover::after{background:rgba(88,117,89,.35)}
.events{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.event{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px 20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--rule)}
.event .date{width:72px;height:80px;border-radius:var(--r-sm);background:var(--sand-1);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background-color var(--t-med) ease,color var(--t-med) ease}
.event .date b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1}
.event .date span{font-size:12px;font-weight:600;letter-spacing:.06em}
.event:hover .date{background:var(--sage);color:var(--paper)}
.event .go{grid-column:2}
@media (min-width:768px){.event{grid-template-columns:72px minmax(0,1fr) auto}.event .go{grid-column:auto}}
.products{display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.products{grid-template-columns:repeat(4,minmax(0,1fr))}}
.prod{display:flex;flex-direction:column;gap:10px}
.prod .m{position:relative;border-radius:var(--r-tile);overflow:hidden;aspect-ratio:4/5;background:var(--sand-2)}
.prod .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease,transform var(--t-slow) var(--ease)}
.prod .m .alt{opacity:0}
.prod:hover .m .alt{opacity:1}
.prod:hover .m img{transform:scale(1.04)}
.prod .qv-btn{position:absolute;left:10px;right:10px;bottom:10px;opacity:0;transform:translateY(8px);transition:opacity var(--t-med) ease,transform var(--t-med) var(--ease)}
.prod:hover .qv-btn,.prod .qv-btn:focus-visible{opacity:1;transform:none}
@media (hover:none){.prod .qv-btn{opacity:1;transform:none}}
.prod .row{display:flex;justify-content:space-between;gap:8px;align-items:baseline}

/* ===== 20 footer variants ===== */
.f-frame{border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.f-min{padding:28px var(--pad-card);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.f-min .links{display:flex;flex-wrap:wrap;gap:20px;font-size:var(--fs-small);font-weight:500}
.site .f-min a{text-decoration:none}
@media (min-width:1024px){.f-min{flex-direction:row;align-items:center;justify-content:space-between}}
.f-word{background:var(--sand-1);padding:40px var(--pad-card) 0;display:flex;flex-direction:column;gap:32px;overflow:hidden}
.f-word .links{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:var(--fs-small);font-weight:500}
.site .f-word a{text-decoration:none}
.f-word .mark{font-family:var(--serif);font-size:clamp(64px,15vw,210px);line-height:.78;letter-spacing:-.04em;white-space:nowrap;color:var(--ink);margin:0 0 -.12em;transition:color var(--t-slow) ease}
.f-word:hover .mark{color:var(--sage)}
.f-cta{background:var(--charcoal);color:var(--on-dark);padding:48px var(--pad-card) 24px;display:flex;flex-direction:column;gap:40px}
.f-cta .big{font-family:var(--serif);font-size:var(--fs-h2);line-height:1;color:var(--paper);margin:0;max-width:640px}
.f-cta .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;border-top:1px solid var(--rule-dark);padding-top:20px;font-size:var(--fs-caption);color:var(--on-dark-faint)}
.site .f-cta a{color:var(--on-dark-muted);text-decoration:none}
.site .f-cta a:hover{color:var(--paper)}


/* =========================================================
   MAREN ELLISON — site-specific additions
   ========================================================= */
/* header: services dropdown */
.nav-item{position:relative;display:flex;align-items:center}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.site .header--over:not(.is-solid) .nav-drop-btn{color:var(--paper)}
.nav-drop-btn svg{transition:transform var(--t-fast) ease}
.nav-item.is-open .nav-drop-btn svg{transform:rotate(180deg)}
.nav-drop{display:none;position:absolute;top:100%;left:-16px;padding-top:18px;min-width:280px}
.nav-drop-in{background:var(--bg);border-radius:var(--r-tile);box-shadow:var(--shadow-lift);padding:8px;display:flex;flex-direction:column;animation:drop .2s ease both}
.nav-item.is-open .nav-drop{display:block}
@media (hover:hover){.nav-item:hover .nav-drop{display:block}}
.site .header .nav .nav-drop a{color:var(--ink);padding:12px 14px;border-radius:var(--r-sm);display:flex;flex-direction:column;gap:2px;background-image:none}
.site .header .nav .nav-drop a:hover{background:var(--sand-1)}
.nav-drop a small{font-size:var(--fs-caption);color:var(--muted);font-weight:400}
.nav a[aria-current="page"],.nav-drop-btn.is-current{background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px}
.brand small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.06em;margin-top:4px;opacity:.8}
.mmenu-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;padding:12px 0 18px;border-bottom:1px solid var(--rule-dark)}
.site .mmenu-sub a{font-size:17px;color:var(--on-dark-muted);text-decoration:none;padding:8px 0}
.site .mmenu-sub a:hover{color:var(--paper)}
.mmenu-label{font-size:var(--fs-caption);color:var(--on-dark-faint);padding-top:16px;letter-spacing:.04em}

/* small hero used on fees / faq / contact */
.page-head--plain{padding-top:56px;display:flex;flex-direction:column;gap:18px;max-width:760px}
@media (min-width:1024px){.page-head--plain{padding-top:88px}}

/* split hero: keep the image inside its own section here */
.hero-split .media{margin-bottom:0}
.hero-split .media .ph{font-size:var(--fs-small)}

/* "does this sound familiar?" lists */
.signs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.signs li{position:relative;padding:18px 20px 18px 52px;border-radius:var(--r-tile);background:var(--bg);font-size:var(--fs-body-lg);line-height:1.5;transition:transform var(--t-med) var(--ease)}
.signs li:hover{transform:translateX(4px)}
.signs li::before{content:"";position:absolute;left:22px;top:27px;width:10px;height:10px;border-radius:var(--r-pill);background:var(--sage-soft)}
@media (min-width:768px){.signs--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.familiar{background:var(--sand-1);border-radius:var(--r-card);padding:var(--pad-card);display:grid;gap:28px}
@media (min-width:1024px){.familiar{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);padding:56px;gap:56px;align-items:start}}

/* tag lists ("I often work with") */
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--rule);font-size:15px;background:var(--bg);transition:border-color var(--t-fast) ease,background-color var(--t-fast) ease}
.tags li:hover{border-color:var(--sage);background:var(--sand-1)}

/* steps with three items */
@media (min-width:1024px){.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* fee table */
.fees-table{min-width:0}
.fees-table th,.fees-table td{text-align:left}
.fees-table td:last-child,.fees-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.fees-table td.fee{font-family:var(--serif);font-size:24px}
.fees-table thead th{font-family:var(--sans);font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.compare-wrap.fees{overflow-x:auto}

/* faq groups */
.faq-group{display:grid;gap:20px;scroll-margin-top:calc(var(--header-h) + 24px)}
@media (min-width:1024px){.faq-group{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px}}
.crisis{display:flex;flex-direction:column;gap:14px;border-radius:var(--r-card);background:var(--charcoal);color:var(--paper);padding:var(--pad-card)}
.crisis a{color:var(--paper)}
@media (min-width:1024px){.crisis{padding:48px 56px}}

/* contact */
.contact-grid{display:grid;gap:32px;align-items:start}
@media (min-width:1024px){.contact-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:64px}}
.details{border-radius:var(--r-card);background:var(--sand-1);overflow:hidden}
.details .m{aspect-ratio:16/10;overflow:hidden}
.details .m img{width:100%;height:100%;object-fit:cover}
.details dl{margin:0;padding:var(--pad-tile) var(--pad-card) var(--pad-card);display:grid;gap:16px}
.details dt{font-size:var(--fs-caption);font-weight:600;color:var(--clay);letter-spacing:.04em}
.details dd{margin:2px 0 0}
.details a{color:var(--ink)}
.form-card{border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--pad-card)}
.note{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:var(--muted);background:var(--sand-1);border-radius:var(--r-sm);padding:12px 14px}
.note svg{flex:none;margin-top:2px;color:var(--clay)}

/* credentials list on about */
.creds{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.creds li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-body-lg)}
.creds svg{color:var(--sage);margin-top:4px}

/* related-service link card */
.related{display:flex;flex-direction:column;gap:10px;border-radius:var(--r-tile);border:1px solid var(--rule);padding:22px;text-decoration:none;transition:border-color var(--t-fast) ease,transform var(--t-med) var(--ease)}
.site .related{color:var(--ink)}
.related:hover{border-color:var(--sage);transform:translateY(-3px)}
.related .k{font-size:var(--fs-caption);font-weight:600;color:var(--sage);letter-spacing:.04em}

/* footer CTA band (closing call to action, per page) */
.footer-cta{background:var(--charcoal);color:var(--paper)}
.footer-cta .inner{display:flex;flex-direction:column;gap:22px;align-items:flex-start;padding:72px 0 56px;border-bottom:1px solid var(--rule-dark)}
.footer-cta .h2{color:var(--paper);max-width:720px}
@media (min-width:1024px){.footer-cta .inner{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:96px 0 64px}}
.footer-mega{padding-top:56px}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-col h2{font-family:var(--sans);font-size:var(--fs-small);font-weight:600;color:var(--paper);margin:0 0 14px}
.hero-split{padding-top:32px}
@media (min-width:1024px){.hero-split{padding-top:48px}}
.compare tbody tr:hover th{background:var(--sand-1)}
.fees-table td{white-space:nowrap}
/* breathing room between the last section and the footer */
.main{padding-bottom:var(--section-gap)}


/* =========================================================
   THEME: beige + dark green, high contrast
   - one beige (--bg) everywhere white used to be
   - one green (--green) for every button
   - dark sections stay dark; text is black on beige, white on dark
   ========================================================= */
body,.site{background:var(--bg);color:var(--ink)}
.site a:hover{color:var(--ink)}

/* buttons: every filled button is the dark green with white text */
.site .btn-primary,.site .btn-soft{background:var(--green);color:var(--paper);font-weight:600}
.site .btn-primary:hover,.site .btn-soft:hover{background:var(--green);color:var(--paper);box-shadow:0 12px 26px -10px rgba(35,36,31,.6)}
.site .btn-outline{border:1.5px solid var(--green);color:var(--ink);font-weight:600}
.site .btn-outline:hover{background:var(--green);color:var(--paper)}
/* white buttons stay white */
.site .btn-light{background:var(--paper);color:var(--ink);font-weight:600}
.site .btn-light:hover{background:var(--paper);color:var(--ink)}
.site .btn-ghost{border-color:var(--paper);color:var(--paper)}
.header--over:not(.is-solid) .burger{background:var(--paper);color:var(--ink)}
.icon-btn,.chip,.page-btn,.day,.slot{background:var(--paper);border-color:var(--rule)}
.icon-btn:hover,.chip[aria-pressed="true"],.day[aria-pressed="true"],.slot[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--paper)}

/* text on beige: black, never grey or green */
.site .tlink,.step .k,.principle .n,.ben--num .n,.start-list .n,.takeaways h3,.dropcap::first-letter,.signature,
.tl .y,.ok-msg,.related .k,.site .rich a,.logo,.logo:hover,.err,.eyebrow,.caption,.small,.body,.body-lg,.chip,.page-btn,.acc-btn,.acc-btn:hover,.tab{color:var(--ink)}
.site .tlink{font-weight:600;background-image:linear-gradient(var(--green),var(--green));background-size:100% 1.5px}
.site .tlink:hover{background-size:100% 3px;color:var(--ink)}
.eyebrow{font-weight:600;letter-spacing:.02em}

/* text on dark sections: white */
.on-dark,.on-dark :is(h1,h2,h3,h4,p,li,dt,dd,address,label,legend,.eyebrow,.caption,.small,.body,.body-lg,.brand,.display,.sub,.lead,.footer-crisis),
.on-dark a:not(.btn),.site .on-dark a:not(.btn):hover,.on-dark .tlink{color:var(--paper)}
.on-dark .tlink{background-image:linear-gradient(var(--paper),var(--paper))}
.site .footer-mega a,.site .footer-mega a:hover{color:var(--paper)}
.footer-col h2{color:var(--paper)}
.site .mmenu .brand,.site .mmenu-links a,.site .mmenu-sub a{color:var(--paper)}
.announce a{text-decoration:underline}

/* surfaces: the same beige, defined by stronger lines instead of a second tint */
.card--filled,.familiar,.details,.tcard,.mq,.fit-col--yes,.callout,.success,.start-here,.news-band.bg-sand,.toggle,.compare thead th,.compare thead th:first-child,
.card--image,.member-photo,.post-media,.offer,.ben--card,.lq{background:var(--bg)}
.card--filled,.familiar,.details,.card--image,.callout,.success,.ben--card,.lq,.fit-col--yes{border:1px solid var(--rule)}
.card--filled:hover,.card--image:hover{border-color:var(--ink)}
.card .ic,.card--filled .ic{background:var(--paper);color:var(--green)}
.card:hover .ic{background:var(--green);color:var(--paper)}
.signs li{background:var(--paper)}
.signs li::before{background:var(--green)}
.tags li{background:var(--paper);border-color:var(--rule)}
.tags li:hover{border-color:var(--green);background:var(--paper)}
.input,.select,.textarea{background:var(--paper);border-color:rgba(46,47,41,.35)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink)}
.compare thead th{border-bottom:1.5px solid var(--ink)}
.compare th:first-child,.compare td:first-child{background:var(--bg)}
.compare tbody tr:hover td,.compare tbody tr:hover th{background:var(--paper)}
.nav-drop-in{background:var(--bg)}
.site .header .nav .nav-drop a:hover{background:var(--paper)}
.nav-drop a small{color:var(--ink)}
.ph{color:var(--ink)}
.ph--1,.ph--2,.ph--3{background:var(--bg)}
.member-photo,.split-media,.portrait{border:1px solid var(--rule)}

/* high-contrast feature panels: dark, like the footer */
.lead-card,.card-split{background:var(--charcoal);color:var(--paper);border:0}
.lead-card .m{background:transparent}
.lead-card .book{background:var(--bg);color:var(--ink)}
.lead-card .book *{color:var(--ink) !important}
.lead-card .c :is(h1,h2,h3,p,label,.eyebrow,.body,.body-lg,.caption),
.card-split .split-copy :is(h2,h3,p,.eyebrow,.body-lg,.caption,.v){color:var(--paper)}
.card-split .mini-stats{border-top-color:var(--rule-dark) !important}
.card-split .btn-outline,.lead-card .btn-outline{border-color:var(--paper);color:var(--paper)}
.card-split .btn-outline:hover{background:var(--paper);color:var(--ink)}
.lead-card .err,.lead-card .success p{color:var(--paper)}
.lead-card .success{background:rgba(255,255,255,.08);border-color:var(--rule-dark)}
.lead-card .success .ic{background:var(--paper);color:var(--green)}
.card-split .split-media{border:0}

/* green accents (icons, markers, open states) all use the one green */
.dot{background:var(--paper)}
.step .marker{background:var(--bg);border-color:var(--green)}
.step .marker::after,.steps-line span,.dots button[aria-current="true"] span,.ms-bar span{background:var(--green)}
.acc-item.is-open .acc-ic,.fit-col--yes .ic,.callout .ic,.success .ic{background:var(--green);border-color:var(--green);color:var(--paper)}
.acc-ic{border-color:var(--ink)}
.benefit svg{color:var(--green)}
.benefits{border-bottom:1px solid var(--rule)}
.member-bio{background:var(--charcoal);color:var(--paper)}

/* crisis box on the FAQ */
.crisis :is(.h3,a){color:var(--paper)}

/* closing call to action: heading gets the full width so it fits on one line on desktop */
.footer-cta .inner{flex-direction:column;align-items:flex-start;gap:28px}
@media (min-width:1024px){.footer-cta .inner{flex-direction:column;align-items:flex-start;justify-content:flex-start}}
.footer-cta .h2{max-width:none;text-wrap:balance}

/* white surfaces become beige; only buttons stay white */
.signs li{background:var(--bg);border:1px solid var(--rule)}
.tags li,.tags li:hover{background:var(--bg)}
.input,.select,.textarea{background:var(--bg)}
.card .ic,.card--filled .ic{background:var(--green);color:var(--paper)}
.compare tbody tr:hover td,.compare tbody tr:hover th{background:var(--bg)}
.compare tbody tr:hover{box-shadow:inset 3px 0 0 var(--green)}
.site .header .nav .nav-drop a:hover{background:rgba(88,117,89,.12)}

/* header: when it turns solid on scroll, drop the pill's border + glass at once
   (fading them out left a ghost of the rounded border across the full-width bar) */
.header.is-solid .header-bar{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:height var(--t-med) var(--ease),padding var(--t-med) var(--ease)}
/* announcement bar: the brand green, white text */
.announce{background:var(--green);color:var(--paper)}
.announce a,.announce-x{color:var(--paper)}
.announce-x:hover{background:rgba(255,255,255,.14)}
/* free guide panel: brand green; its button switches to white so it stays visible */
.lead-card{background:var(--green)}
.lead-card .site .btn-primary,.site .lead-card .btn-primary{background:var(--paper);color:var(--ink)}
.site .lead-card .btn-primary:hover{background:var(--paper);color:var(--ink);box-shadow:0 12px 26px -10px rgba(0,0,0,.45)}
.lead-card .input{border-color:transparent}

/* =========================================================
   BLOG POST (article page)
   ========================================================= */
.article-head{padding-top:48px;display:flex;flex-direction:column;gap:20px;max-width:880px}
@media (min-width:1024px){.article-head{padding-top:72px}}
.article-head .meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:var(--fs-small)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--fs-small);list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:8px}
.site .crumbs a{color:var(--ink)}
.article-hero{border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9;margin-top:8px}
.article-hero img{width:100%;height:100%;object-fit:cover}
.article-layout{display:grid;gap:40px}
@media (min-width:1024px){.article-layout{grid-template-columns:200px minmax(0,1fr);gap:64px}}
.article-aside{display:flex;flex-direction:column;gap:16px}
@media (min-width:1024px){.article-aside{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}}
.share{display:flex;flex-wrap:wrap;gap:8px}
.share .icon-btn{width:44px;height:44px}
.article-body{max-width:var(--measure);display:flex;flex-direction:column;gap:28px}
.article-body .rich{max-width:none}
.article-body .rich p:first-child{font-size:20px;line-height:1.55;color:var(--ink)}
.article-body .pullquote{padding:32px 0}
.article-body .pullquote blockquote{font-size:var(--fs-h4)}
.author-box{display:flex;gap:20px;align-items:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:24px 0}
.author-box img{width:72px;height:72px;border-radius:var(--r-pill);object-fit:cover;flex:none}
.author-box .nm{font-weight:600}
.copied{font-size:var(--fs-caption)}

/* header: swap between the rounded pill and the full-width bar instantly, in both directions.
   Cross-fading the two (in either direction) briefly showed the pill's rounded corners. */
.header,.header .header-bar{transition:padding var(--t-med) var(--ease),height var(--t-med) var(--ease)}

/* =========================================================
   HOME — original design section patterns
   ========================================================= */
/* "recognized by" strip under the hero */
.recognized{padding:40px 0 44px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.recognized .label{font-size:var(--fs-small);font-weight:600}
.recognized .row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 44px}
.recognized .row span{color:var(--ink);transition:transform var(--t-med) var(--ease)}
.recognized .row span:hover{transform:translateY(-2px)}
.recognized .serif{font-family:var(--serif);font-size:24px}
.recognized .caps{font-size:14px;font-weight:600;letter-spacing:.08em}
@media (min-width:1024px){.recognized .serif{font-size:28px}.recognized .caps{font-size:16px}}

/* about + 2x2 stat tiles */
.about-tiles{display:grid;gap:40px;align-items:start}
@media (min-width:1024px){.about-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.stat-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:768px){.stat-tiles{gap:16px}}
.stat-tile{aspect-ratio:1;border-radius:var(--r-tile);padding:var(--pad-tile);display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--rule);background:var(--bg);
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) ease}
.stat-tile:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow-lift)}
.stat-tile .big{font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:-.02em}
.stat-tile .lbl{font-size:var(--fs-caption);font-weight:500}
@media (min-width:1024px){.stat-tile .big{font-size:68px}}
.stat-tile--dark{background:var(--charcoal);border-color:var(--charcoal);color:var(--paper)}
.stat-tile--green{background:var(--green);border-color:var(--green);color:var(--paper)}
.stat-tile--dark .lbl,.stat-tile--green .lbl{color:var(--paper)}

/* full-width photo divider with a large quote */
.img-quote{position:relative;height:420px;display:flex;align-items:flex-end;overflow:hidden;background:var(--charcoal);color:var(--paper)}
.img-quote .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.img-quote .container{position:relative;padding-bottom:48px}
.img-quote blockquote{margin:0;font-family:var(--serif);font-size:var(--fs-h2);line-height:1.04;letter-spacing:var(--track-head);max-width:760px;color:var(--paper)}
.img-quote figcaption{margin-top:16px;font-size:var(--fs-small);font-weight:600;color:var(--paper)}
@media (min-width:1024px){.img-quote{height:600px}.img-quote .container{padding-bottom:72px}.img-quote blockquote{font-size:72px}}

/* tall service cards with an overlapping label panel */
.tall-cards{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.tall-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tall-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tall-card{position:relative;height:420px;border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;text-decoration:none;background:var(--charcoal)}
@media (min-width:1024px){.tall-card{height:480px}}
.tall-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.tall-card:hover img{transform:scale(1.07)}
.tall-card .label{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--bg);border-radius:var(--r-inner);padding:18px 18px 18px 20px;transition:transform var(--t-med) var(--ease)}
.tall-card:hover .label{transform:translateY(-6px)}
.tall-card .label .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tall-card .name{font-family:var(--serif);font-size:26px;line-height:1.05;color:var(--ink)}
.tall-card .desc{font-size:14px;line-height:1.45;color:var(--ink)}
.tall-card .arrow{flex:none;width:44px;height:44px;border-radius:var(--r-pill);background:var(--green);color:var(--paper);display:flex;align-items:center;justify-content:center;transition:transform var(--t-med) ease}
.tall-card:hover .arrow{transform:rotate(45deg)}
.tall-card--dark .label{background:var(--charcoal)}
.tall-card--dark .name,.tall-card--dark .desc{color:var(--paper)}

/* numbered step rows */
.step-rows{border-top:1px solid var(--ink)}
.step-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px 16px;padding:24px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.step-row .n{font-family:var(--serif);font-size:40px;line-height:1;color:var(--ink);grid-row:span 2;transition:color var(--t-med) ease,transform var(--t-med) var(--ease)}
.step-row:hover .n{color:var(--green);transform:translateX(6px)}
.step-row .t{font-family:var(--serif);font-size:26px;line-height:1.1;margin:0}
.step-row p{margin:0}
@media (min-width:1024px){
  .step-row{grid-template-columns:120px minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:28px 0}
  .step-row .n{font-size:64px;grid-row:auto}
  .step-row .t{font-size:32px}
}
.split-head{display:grid;gap:20px 32px;align-items:end}
@media (min-width:1024px){.split-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* two fee cards */
.fee-cards{display:grid;gap:16px}
@media (min-width:768px){.fee-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fee-card{border-radius:var(--r-card);padding:var(--pad-card);display:flex;flex-direction:column;gap:14px;border:1px solid var(--rule);background:var(--bg);transition:transform var(--t-med) var(--ease)}
.fee-card:hover{transform:translateY(-4px)}
.fee-card .big{font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:-.02em}
@media (min-width:1024px){.fee-card{padding:40px}.fee-card .big{font-size:56px}}
.fee-card--dark{background:var(--charcoal);border-color:var(--charcoal);color:var(--paper)}
.fee-card--dark :is(.eyebrow,.body,.big,a){color:var(--paper)}
.fee-card--dark .tlink{background-image:linear-gradient(var(--paper),var(--paper))}

/* closing call to action on a full-width photo (footer, when a page sets cta_image) */
.footer-cta--image{position:relative;overflow:hidden;min-height:520px;display:flex;align-items:center}
.footer-cta--image .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.footer-cta--image .container{position:relative}
.footer-cta--image .inner{align-items:center;text-align:center;border-bottom:0}
@media (min-width:1024px){.footer-cta--image{min-height:600px}.footer-cta--image .inner{align-items:center}}
.footer-cta--image .h2{font-size:var(--fs-h1)}
.footer-cta--image p{margin:0 auto}
@media (min-width:1024px){.recognized .row{flex-wrap:nowrap;gap:14px 40px;white-space:nowrap}}
@media (min-width:1024px) and (max-width:1279px){.recognized .serif{font-size:22px}.recognized .caps{font-size:13px}.recognized .row{gap:14px 28px}}

/* blog: compact featured post */
.featured-post--compact .fp-copy{gap:12px}
@media (min-width:768px){
  .featured-post--compact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .featured-post--compact .fp-media{min-height:0;aspect-ratio:16/10}
  .featured-post--compact .fp-copy{padding:36px 40px}
}
.featured-post--compact .h3{transition:color var(--t-fast) ease}
.page-head{padding-top:40px}
@media (min-width:1024px){.page-head{padding-top:56px}}

/* buttons on dark backgrounds (hero, photo dividers, footer call to action): white, so they read clearly */
.site .on-dark .btn-primary,.site .on-dark .btn-soft{background:var(--paper);color:var(--ink)}
.site .on-dark .btn-primary:hover,.site .on-dark .btn-soft:hover{background:var(--paper);color:var(--ink);box-shadow:0 12px 26px -10px rgba(0,0,0,.55)}

/* ---------- Cookie consent banner (src/components/ConsentBanner.astro) ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:560px;margin-left:auto;display:flex;flex-direction:column;gap:16px;padding:20px 24px;border-radius:var(--r-card);background:var(--charcoal);color:var(--paper);box-shadow:var(--shadow-lift)}
.consent[hidden]{display:none}
.consent .small{margin:0}
.consent-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}

/* ---------- Blog index: topic chips and page numbers are real links now ---------- */
a.chip{display:inline-flex;align-items:center;text-decoration:none}
.chip[aria-current="page"]{background:var(--green);border-color:var(--green);color:var(--paper)}
a.page-btn,span.page-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.page-btn[aria-current="page"]{background:var(--charcoal);border-color:var(--charcoal);color:var(--paper)}
.page-btn[data-disabled]{opacity:.4;cursor:not-allowed;border-color:var(--rule)}
/* a pull quote placed inside the article text keeps the same spacing as before */
.article-body .rich > .pullquote{margin:44px 0 28px}

/* ---------- Contact form (src/pages/contact.astro) ---------- */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}   /* honeypot: off-screen, never seen by people */
.form-status{margin:0;padding:14px 18px;border:1px solid var(--error);border-radius:var(--r-sm);font-weight:500}
.form-status[hidden]{display:none}
.cf-turnstile{min-height:65px}