/* ============================================================
   DR ANNA HAOULA — DESIGN SYSTEM
   Direction A — "Clay" · Newsreader / Hanken Grotesk / DM Mono
   All colour pairings WCAG 2.2 AA verified (docs/accessibility-pack.md)
   Production build: fonts are self-hosted via assets/fonts/fonts.css.
   ============================================================ */

:root{
  /* colour */
  --paper:#F8F8F5; --cream:#F0EBE2; --ink:#2A2A28; --stone:#6C6962;
  --line:#DDD9D0; --accent:#945A41; --tint1:#E9D9D2; --tint2:#F3EBE8;
  --dark:#2E241D; --dark-soft:#3A2E25; --wa:#2A5B4C;
  --error:#8A3B2E; --success:#3E5A3E;
  /* type */
  --f-display:'Newsreader',Georgia,serif;
  --f-body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --f-mono:'DM Mono','SFMono-Regular',Consolas,monospace;
  --fs-hero:clamp(2.5rem,5.6vw,4.5rem);
  --fs-h1:clamp(2.25rem,3.6vw,3.25rem);
  --fs-h2:clamp(1.875rem,2.9vw,2.5rem);
  --fs-h3:clamp(1.25rem,1.8vw,1.5rem);
  --fs-h4:1.25rem;
  --fs-statement:clamp(1.625rem,2.7vw,2.25rem);
  --fs-body:1.0625rem; --fs-long:1.125rem; --fs-small:.9375rem;
  --fs-caption:.8125rem; --fs-eyebrow:.75rem; --fs-btn:.8125rem;
  /* rhythm — opened up after reference review: air is part of the brand */
  --sp-sm:4.5rem; --sp-md:7.5rem; --sp-lg:11rem; --gutter:2.5rem;
  /* shape */
  --r-sm:10px; --r-md:16px; --r-lg:30px;
  --sh-card:0 1px 2px rgba(42,42,40,.04),0 8px 24px rgba(42,42,40,.06);
  --sh-raise:0 2px 6px rgba(42,42,40,.06),0 16px 40px rgba(42,42,40,.10);
  --sh-glass:0 8px 40px rgba(46,36,29,.18);
  /* motion */
  --e-out:cubic-bezier(.33,1,.68,1); --e-inout:cubic-bezier(.65,0,.35,1);
  --e-reveal:cubic-bezier(.22,1,.36,1);
  --t-hover:.22s; --t-fade:.4s; --t-reveal:.7s;
}
@media(max-width:1280px){:root{--sp-sm:3.5rem;--sp-md:6rem;--sp-lg:8.5rem;--gutter:2rem}}
@media(max-width:991px){:root{--sp-sm:3rem;--sp-md:5rem;--sp-lg:7rem}}
@media(max-width:767px){:root{--sp-sm:2.5rem;--sp-md:4rem;--sp-lg:5.5rem;--gutter:1.25rem;--fs-body:1rem;--fs-long:1.0625rem;--fs-eyebrow:.6875rem}}
@media(max-width:479px){:root{--sp-sm:2.25rem;--sp-md:3.5rem;--sp-lg:4.5rem}}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:var(--fs-body);font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
a{color:inherit}
::selection{background:var(--tint1);color:var(--ink)}

/* focus — designed, visible, everywhere */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:var(--tint1)}
.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-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);
  color:var(--paper);font-family:var(--f-mono);font-size:var(--fs-caption);
  text-transform:uppercase;letter-spacing:.12em;padding:.9rem 1.4rem;text-decoration:none}
.skip-link:focus{left:1rem;top:1rem}

/* ---------- typography ---------- */
h1,h2,h3,.h-display{font-family:var(--f-display);font-weight:400;line-height:1.15;
  letter-spacing:-.01em;font-variation-settings:'opsz' 32}
h1{font-size:var(--fs-h1);line-height:1.12}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.2}
h4{font-family:var(--f-body);font-weight:500;font-size:var(--fs-h4);line-height:1.25}
h5{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.1em}
h6{font-family:var(--f-mono);font-weight:400;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.12em;color:var(--stone)}
.hero-h{font-size:var(--fs-hero);line-height:1.1}
em,.it{font-style:italic;font-variation-settings:'opsz' 32}
h1 em,h2 em,h3 em,.hero-h em{color:var(--accent);font-style:italic}
.statement{font-family:var(--f-display);font-size:var(--fs-statement);line-height:1.35;font-weight:400}
.lead{font-size:var(--fs-long);line-height:1.6}
.lead-lg{font-family:var(--f-body);font-weight:300;font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.5}
.small{font-size:var(--fs-small)}
.caption{font-family:var(--f-mono);font-size:var(--fs-caption);color:var(--stone);line-height:1.45}
.muted{color:var(--stone)}
.eyebrow{font-family:var(--f-mono);font-size:var(--fs-eyebrow);font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--accent);display:flex;
  align-items:center;gap:.65rem;margin-bottom:1.5rem}
.eyebrow::before{content:"";width:1.5rem;height:1px;background:var(--accent);flex:none}
.eyebrow--bare::before{display:none}
.eyebrow--center{justify-content:center}
.on-dark .eyebrow{color:var(--tint1)}
.on-dark .eyebrow::before{background:var(--tint1)}
blockquote{font-family:var(--f-display);font-size:var(--fs-h3);line-height:1.4;font-style:italic;
  padding-left:1.75rem;border-left:2px solid var(--accent)}
blockquote cite{display:block;margin-top:1rem;font-family:var(--f-mono);font-style:normal;
  font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.14em;color:var(--stone)}
.prose>*+*{margin-top:1.25em}
.prose h2{margin-top:2em}
.prose h3{margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.4rem}
.prose li+li{margin-top:.55em}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--t-hover) var(--e-out)}
.prose a:hover{color:var(--ink)}
.prose figcaption{margin-top:.75rem}
.prose img{border-radius:var(--r-md)}

/* text link w/ underline draw */
.tlink{font-family:var(--f-mono);font-size:var(--fs-btn);text-transform:uppercase;
  letter-spacing:.14em;text-decoration:none;color:var(--ink);position:relative;
  display:inline-flex;align-items:center;gap:.5rem;padding-bottom:.35rem}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(.35);transform-origin:left;
  transition:transform var(--t-hover) var(--e-out)}
.tlink:hover::after{transform:scaleX(1)}
.tlink .arr{transition:transform var(--t-hover) var(--e-out)}
.tlink:hover .arr{transform:translateX(4px)}

/* ---------- layout ---------- */
.outer{max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}
.inner{max-width:1136px;margin-inline:auto;padding-inline:var(--gutter)}
.reading{max-width:720px;margin-inline:auto;padding-inline:var(--gutter)}
.pad-sm{padding-block:var(--sp-sm)}
.pad-md{padding-block:var(--sp-md)}
.pad-lg{padding-block:var(--sp-lg)}
.bg-cream{background:var(--cream)}
.bg-tint{background:var(--tint2)}
.on-dark{background:var(--dark);color:var(--paper)}
.on-dark .muted{color:var(--tint1)}
.center{text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
@media(max-width:991px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.grid-2,.grid-3{grid-template-columns:1fr}}
.hairline{border:0;border-top:1px solid var(--line)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--fs-btn);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;text-decoration:none;border-radius:999px;padding:1rem 1.9rem;
  min-height:44px;border:1px solid transparent;
  transition:background var(--t-hover) var(--e-out),color var(--t-hover) var(--e-out),
    border-color var(--t-hover) var(--e-out),transform var(--t-hover) var(--e-out)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:16px;height:16px;flex:none}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--dark)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-wa{border-color:var(--wa);color:var(--wa);background:transparent}
.btn-wa:hover{background:var(--wa);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:var(--tint1)}
.btn-ghost-light{border-color:rgba(248,248,245,.55);color:var(--paper)}
.btn-ghost-light:hover{border-color:var(--paper);background:rgba(248,248,245,.1)}
.btn[disabled],.btn.is-disabled{opacity:.42;pointer-events:none}
.btn-sm{padding:.65rem 1.3rem;font-size:.75rem}

/* tags */
.tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-mono);
  font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);
  background:var(--tint2);border:1px solid var(--tint1);border-radius:var(--r-sm);
  padding:.4rem .8rem;text-decoration:none;transition:background var(--t-hover) var(--e-out)}
a.tag:hover,.tag.is-active{background:var(--tint1)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background var(--t-fade) var(--e-inout),box-shadow var(--t-fade) var(--e-inout)}
.site-header.is-scrolled{background:rgba(248,248,245,.86);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
/* pages opening on a dark hero: header runs light until scrolled */
body[data-hero="dark"] .site-header:not(.is-scrolled) .nav-link,
body[data-hero="dark"] .site-header:not(.is-scrolled) .logo,
body[data-hero="dark"] .site-header:not(.is-scrolled) .burger{color:var(--paper)}
body[data-hero="dark"] .site-header:not(.is-scrolled) .logo .caption{color:var(--tint1)}
body[data-hero="dark"] .site-header:not(.is-scrolled) .btn-ghost{border-color:rgba(248,248,245,.55);color:var(--paper)}
body[data-hero="dark"] .site-header:not(.is-scrolled) .btn-ghost:hover{background:rgba(248,248,245,.12)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding-block:1.1rem}
.logo{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--ink)}
.logo svg{height:40px;width:auto}
.nav-desktop{display:flex;align-items:center;gap:2.2rem}
.nav-link{font-family:var(--f-mono);font-size:var(--fs-btn);text-transform:uppercase;
  letter-spacing:.14em;text-decoration:none;color:var(--ink);padding:.6rem 0;position:relative;
  background:none;border:0;cursor:pointer;transition:opacity var(--t-hover) var(--e-out)}
.nav-link::after{content:"";position:absolute;left:0;bottom:.2rem;height:1px;width:0;
  background:var(--accent);transition:width var(--t-hover) var(--e-out)}
.nav-link:hover::after,.nav-link[aria-expanded="true"]::after{width:100%}
.header-cta{display:flex;gap:.8rem;align-items:center}
@media(max-width:991px){.nav-desktop,.header-cta .btn-ghost{display:none}}

/* mega menu */
.mega{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none}
.mega-scrim{position:absolute;inset:0;background:rgba(42,42,40,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity var(--t-fade) var(--e-inout)}
.mega-panel{position:absolute;left:0;right:0;top:0;background:var(--paper);
  border-bottom:1px solid var(--line);padding-top:5.5rem;
  transform:translateY(-12px);opacity:0;
  transition:opacity var(--t-fade) var(--e-inout),transform var(--t-fade) var(--e-inout)}
.mega.is-open{visibility:visible;pointer-events:auto}
.mega.is-open .mega-scrim{opacity:1}
.mega.is-open .mega-panel{opacity:1;transform:none}
.mega-grid{display:grid;grid-template-columns:1.2fr repeat(5,1fr);gap:1.5rem;
  padding-block:2.5rem 3rem}
.mega-intro .statement{font-size:1.375rem}
.mega-item{text-decoration:none;color:var(--ink);border-radius:var(--r-md);padding:1.1rem;
  transition:opacity var(--t-hover) var(--e-out),transform var(--t-hover) var(--e-out),
    background var(--t-hover) var(--e-out)}
.mega-item:hover{background:var(--tint2)}
.mega-grid.has-hover .mega-item:not(:hover){opacity:.5;transform:scale(.975)}
.mega-item .micon{width:34px;height:34px;color:var(--accent);margin-bottom:1rem}
.mega-item .mname{font-family:var(--f-display);font-size:1.1rem;line-height:1.25}
.mega-item .mhook{font-size:var(--fs-caption);color:var(--stone);margin-top:.4rem;line-height:1.45}

/* mobile menu */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.burger svg{width:22px;height:22px}
@media(max-width:991px){.burger{display:inline-flex}}
.mmenu{position:fixed;inset:0;z-index:110;background:var(--paper);display:flex;
  flex-direction:column;padding:1.2rem var(--gutter) 2rem;overflow:auto;
  opacity:0;visibility:hidden;transition:opacity .35s var(--e-inout),visibility 0s .35s}
.mmenu.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--e-inout)}
.mmenu-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem}
.mmenu-link{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-display);font-size:1.9rem;line-height:1.2;text-decoration:none;
  color:var(--ink);padding:.85rem 0;border-bottom:1px solid var(--line);position:relative}
.mmenu-link .thumb{width:52px;height:52px;border-radius:var(--r-sm);background:var(--tint1);
  overflow:hidden;flex:none;transform:scale(0);transition:transform .35s var(--e-inout)}
.mmenu-link.is-active .thumb,.mmenu-link:active .thumb{transform:scale(1)}
.mmenu-link::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--accent);transition:width .35s var(--e-inout)}
.mmenu-link.is-active::after{width:100%}
.mmenu-foot{margin-top:auto;padding-top:2.5rem;display:grid;gap:.8rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;
  padding-top:7.5rem;color:var(--paper);overflow:hidden;background:var(--dark)}
.hero-media{position:absolute;inset:0}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(46,36,29,.25) 0%,rgba(46,36,29,.15) 45%,rgba(46,36,29,.72) 100%)}
.hero-media svg,.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-grid{position:relative;z-index:2;width:100%;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,.72fr);gap:3rem;align-items:end;
  padding-block:0 5rem}
.hero-copy .eyebrow{color:var(--tint1)}
.hero-copy .eyebrow::before{background:var(--tint1)}
.hero-sub{font-family:var(--f-mono);font-size:var(--fs-small);letter-spacing:.06em;
  color:var(--tint1);max-width:44ch;margin-top:1.5rem;line-height:1.6}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
@media(max-width:991px){.hero-grid{grid-template-columns:1fr;padding-bottom:3.5rem}
  .hero{min-height:100svh;align-items:flex-end}}

/* glass credential card */
.glass-card{background:rgba(248,248,245,.14);border:1px solid rgba(248,248,245,.28);
  border-radius:var(--r-lg);padding:1.6rem;backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);box-shadow:var(--sh-glass);color:var(--paper);
  position:relative}
.glass-card::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.14),transparent 42%)}
.glass-card .gc-portrait{border-radius:calc(var(--r-lg) - 12px);overflow:hidden;
  aspect-ratio:4/5;max-height:300px;width:100%;
  background:linear-gradient(160deg,var(--tint1),var(--tint2));margin-bottom:1.3rem}
.glass-card .gc-portrait svg{width:100%;height:100%}
.glass-card .gc-name{font-family:var(--f-display);font-size:1.6rem;line-height:1.15}
.glass-card .gc-cred{font-family:var(--f-mono);font-size:var(--fs-caption);
  text-transform:uppercase;letter-spacing:.14em;color:var(--tint1);margin-top:.6rem;line-height:1.6}
.glass-card .gc-meta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.glass-card .gc-meta span{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid rgba(248,248,245,.35);border-radius:999px;
  padding:.32rem .7rem}
@media(max-width:991px){.glass-card{max-width:420px}}
@media(max-width:479px){.glass-card{padding:1.2rem}
  .glass-card .gc-portrait{aspect-ratio:16/10}}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.8rem;display:flex;flex-direction:column;gap:1rem;text-decoration:none;
  color:var(--ink);position:relative;
  transition:transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out),
    border-color var(--t-hover) var(--e-out)}
a.card:hover{transform:translateY(-4px);box-shadow:var(--sh-raise);border-color:var(--tint1)}
.card .cicon{width:44px;height:44px;color:var(--accent);
  transition:transform var(--t-hover) var(--e-out)}
a.card:hover .cicon{transform:translateY(-4px)}
a.card:hover .tlink::after{transform:scaleX(1)}
a.card:hover .arr{transform:translateX(4px)}
.card h3{font-size:1.35rem;min-height:2.6em;display:flex;align-items:flex-start}
.card .chook{color:var(--stone);font-size:var(--fs-small);line-height:1.5;flex:1}
.card .tlink{margin-top:.4rem}
.card-num{font-family:var(--f-mono);font-size:var(--fs-caption);color:var(--accent);letter-spacing:.12em}

/* programme card row (5-up) */
.prog-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem}
@media(max-width:1280px){.prog-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.prog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:479px){.prog-grid{grid-template-columns:1fr}.card h3{min-height:0}}

/* method pillars */
.method-wrap{position:relative}
.method-line{position:absolute;inset:0;pointer-events:none}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;position:relative}
@media(max-width:991px){.method-grid{grid-template-columns:1fr 1fr}}
@media(max-width:479px){.method-grid{grid-template-columns:1fr}}
.pillar{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:2rem;transition:transform var(--t-hover) var(--e-out),
  border-color var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out)}
.pillar:hover{transform:translateY(-3px);border-color:var(--tint1);box-shadow:var(--sh-card)}
.pillar .card-num{display:block;margin-bottom:1.4rem}
.pillar h3{font-size:1.3rem;margin-bottom:.7rem}
.pillar p{font-size:var(--fs-small);color:var(--stone);line-height:1.55}

/* ---------- collage ---------- */
.collage{display:grid;grid-template-columns:1fr 2fr 1fr;gap:1.2rem;align-items:start}
.collage figure{border-radius:var(--r-md);overflow:hidden;margin:0}
.collage .c1{margin-top:4.5rem}
.collage .c3{margin-top:9rem}
.collage figcaption{font-family:var(--f-mono);font-size:var(--fs-caption);color:var(--stone);
  padding-top:.7rem}
@media(max-width:767px){.collage{grid-template-columns:1fr 1fr}
  .collage .c1{margin-top:2rem}.collage .c2{grid-column:span 2;order:-1}.collage .c3{margin-top:0}}

/* ---------- measure (sticky) ---------- */
.measure-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.measure-sticky{position:sticky;top:7rem}
.measure-item{padding:1.9rem 0;border-top:1px solid var(--line);opacity:.38;
  transition:opacity .5s var(--e-inout)}
.measure-item.is-active{opacity:1}
.measure-item h3{display:flex;gap:1rem;align-items:baseline;font-size:1.35rem}
.measure-item h3 .card-num{flex:none}
.measure-item p{color:var(--stone);font-size:var(--fs-small);margin-top:.6rem;
  padding-left:2.6rem;line-height:1.55}
.mnode{opacity:.25;transition:opacity .5s var(--e-inout)}
.mnode.is-active{opacity:1}
@media(max-width:991px){.measure-grid{grid-template-columns:1fr}
  .measure-sticky{position:static}.measure-item{opacity:1}
  .measure-item p{padding-left:0}.measure-diagram{display:none}}

/* ---------- credibility band ---------- */
.cred-band{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem;
  border-block:1px solid var(--line);padding-block:2.6rem}
.cred-item .cnum{font-family:var(--f-display);font-size:2rem;line-height:1}
.cred-item .clabel{font-family:var(--f-mono);font-size:var(--fs-caption);color:var(--stone);
  text-transform:uppercase;letter-spacing:.12em;margin-top:.7rem;line-height:1.5}
@media(max-width:991px){.cred-band{grid-template-columns:repeat(3,1fr)}}
@media(max-width:479px){.cred-band{grid-template-columns:1fr 1fr;gap:1.5rem}}

/* ---------- testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:991px){.testi-grid{grid-template-columns:1fr}}
.testi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:2rem;display:flex;flex-direction:column;gap:1.2rem;
  transition:transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out)}
.testi:hover{transform:translateY(-3px);box-shadow:var(--sh-card)}
.bg-cream .testi{background:var(--paper)}
.testi .tq{font-family:var(--f-display);font-size:1.2rem;line-height:1.45;font-style:italic;flex:1}
.testi .twho{font-family:var(--f-mono);font-size:var(--fs-caption);text-transform:uppercase;
  letter-spacing:.13em;color:var(--stone);border-top:1px solid var(--line);padding-top:1.1rem}
.testi .tnote{font-family:var(--f-mono);font-size:.6875rem;color:var(--stone);letter-spacing:.06em}

/* ---------- insights carousel ---------- */
.carousel{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:1rem;cursor:grab;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel.is-dragging{cursor:grabbing;scroll-snap-type:none}
.post-card{flex:0 0 340px;scroll-snap-align:start;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:1rem}
@media(max-width:479px){.post-card{flex-basis:280px}}
.post-card .pimg{border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:var(--tint2);
  transition:transform var(--t-hover) var(--e-out)}
.post-card .pimg svg,.post-card .pimg img{transition:transform .8s var(--e-out)}
.post-card:hover .pimg{transform:translateY(-4px)}
.post-card:hover .pimg svg,.post-card:hover .pimg img{transform:scale(1.05)}
.post-card:hover h3{color:var(--accent);transition:color var(--t-hover) var(--e-out)}
.post-card h3{transition:color var(--t-hover) var(--e-out)}
.post-card .pmeta{display:flex;gap:1rem;font-family:var(--f-mono);font-size:var(--fs-caption);
  color:var(--stone);text-transform:uppercase;letter-spacing:.1em}
.post-card h3{font-size:1.25rem;line-height:1.3}

/* ---------- CTA / footer ---------- */
.cta-panel{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--dark)}
.cta-panel .cta-media{position:absolute;inset:0;opacity:.85}
.cta-panel .cta-media::after{content:"";position:absolute;inset:0;background:rgba(46,36,29,.5)}
.cta-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .9fr;
  gap:3rem;padding:4.5rem;align-items:center}
@media(max-width:991px){.cta-inner{grid-template-columns:1fr;padding:2.5rem}}
.site-footer{background:var(--dark);color:var(--paper)}
.footer-statement{font-family:var(--f-display);font-size:clamp(1.75rem,3.4vw,2.75rem);
  line-height:1.2;text-align:center;max-width:24ch;margin-inline:auto}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;
  padding-block:3.5rem;border-top:1px solid rgba(248,248,245,.14)}
@media(max-width:991px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:479px){.footer-grid{grid-template-columns:1fr}}
.footer-h{font-family:var(--f-mono);font-size:var(--fs-caption);text-transform:uppercase;
  letter-spacing:.16em;color:var(--tint1);margin-bottom:1.2rem}
.footer-link{display:block;color:var(--paper);text-decoration:none;font-size:var(--fs-small);
  padding:.28rem 0;opacity:.85;transition:opacity var(--t-hover) var(--e-out)}
.footer-link:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.footer-reg{border-top:1px solid rgba(248,248,245,.14);padding-block:1.6rem;
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;align-items:center}
.footer-reg p{font-family:var(--f-mono);font-size:var(--fs-caption);color:var(--tint1);
  letter-spacing:.04em;line-height:1.6}
.disclaimer{background:var(--dark-soft);border-radius:var(--r-sm);padding:1.1rem 1.4rem;
  font-size:var(--fs-small);line-height:1.6;color:var(--tint1)}

/* ---------- WhatsApp element ---------- */
.wa-fab{opacity:0;transform:translateY(10px);pointer-events:none}
.wa-fab.is-vis{opacity:1;transform:none;pointer-events:auto}
.wa-fab{position:fixed;right:1.4rem;bottom:1.4rem;z-index:80;display:inline-flex;
  align-items:center;gap:.6rem;background:var(--paper);color:var(--wa);
  border:1px solid var(--wa);border-radius:999px;padding:.85rem 1.35rem;min-height:44px;
  font-family:var(--f-mono);font-size:.75rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;box-shadow:var(--sh-raise);
  transition:background var(--t-hover) var(--e-out),color var(--t-hover) var(--e-out),
    transform .35s var(--e-inout),opacity .35s var(--e-inout)}
.wa-fab.is-vis:hover{background:var(--wa);color:var(--paper);transform:translateY(-2px)}
.wa-fab svg{width:17px;height:17px}
@media(max-width:479px){.wa-fab span{display:none}.wa-fab{padding:.85rem}}
.wa-desk-note{position:fixed;right:1.4rem;bottom:5.4rem;z-index:80;width:250px;
  background:var(--ink);color:var(--paper);border-radius:var(--r-md);padding:1.1rem 1.2rem;
  font-size:var(--fs-caption);font-family:var(--f-mono);line-height:1.55;letter-spacing:.03em;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--t-hover) var(--e-out),transform var(--t-hover) var(--e-out),visibility 0s .22s}
.wa-fab:hover+.wa-desk-note,.wa-fab:focus-visible+.wa-desk-note{opacity:1;visibility:visible;
  transform:none;transition:opacity var(--t-hover) var(--e-out),transform var(--t-hover) var(--e-out)}
@media(max-width:991px){.wa-desk-note{display:none}}

/* choice moment */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:767px){.choice{grid-template-columns:1fr}}
.choice-card{border:1px solid var(--line);border-radius:var(--r-md);padding:2rem;
  background:var(--paper);display:flex;flex-direction:column;gap:.9rem}
.choice-card h3{font-size:1.3rem}
.choice-card p{color:var(--stone);font-size:var(--fs-small);flex:1;line-height:1.55}

/* ---------- forms ---------- */
.field{display:grid;gap:.5rem;margin-bottom:1.4rem}
.field label{font-family:var(--f-mono);font-size:var(--fs-caption);text-transform:uppercase;
  letter-spacing:.13em;color:var(--ink)}
.field .help{font-size:var(--fs-caption);color:var(--stone);font-family:var(--f-body)}
.input,select.input,textarea.input{width:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.95rem 1.1rem;font:inherit;font-size:var(--fs-body);
  color:var(--ink);min-height:44px;transition:border-color var(--t-hover) var(--e-out),
    box-shadow var(--t-hover) var(--e-out)}
.input::placeholder{color:var(--stone);opacity:.75}
.input:hover{border-color:var(--stone)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--tint1);outline:none}
.field.is-error .input{border-color:var(--error);box-shadow:0 0 0 3px rgba(138,59,46,.12)}
.field.is-error .err{display:flex}
.err{display:none;align-items:center;gap:.45rem;color:var(--error);font-size:var(--fs-caption);
  font-family:var(--f-mono);letter-spacing:.04em}
.form-success{border:1px solid var(--success);background:#EEF2EA;border-radius:var(--r-md);
  padding:1.8rem;display:flex;gap:1rem;align-items:flex-start}
.form-success svg{color:var(--success);flex:none;width:22px;height:22px;margin-top:.15rem}
.steps{display:flex;gap:.5rem;margin-bottom:2rem}
.step{flex:1;text-align:center;font-family:var(--f-mono);font-size:var(--fs-caption);
  letter-spacing:.1em;text-transform:uppercase;color:var(--stone);padding-bottom:.8rem;
  border-bottom:2px solid var(--line)}
.step.is-active{color:var(--accent);border-color:var(--accent)}
.step.is-done{color:var(--ink);border-color:var(--ink)}
.antispam{display:flex;align-items:center;gap:.7rem;font-size:var(--fs-caption);
  color:var(--stone);font-family:var(--f-mono);letter-spacing:.03em}
.antispam svg{width:15px;height:15px;color:var(--accent);flex:none}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.4rem 0;cursor:pointer;font-family:var(--f-display);font-size:1.2rem;
  line-height:1.3;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .fx{flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:999px;
  display:grid;place-items:center;transition:transform .3s var(--e-inout),background .3s var(--e-inout)}
.faq summary .fx svg{width:13px;height:13px}
.faq details[open] summary .fx{transform:rotate(45deg);background:var(--tint2)}
.faq .fa{padding:0 3.2rem 1.5rem 0;color:var(--stone);line-height:1.6;max-width:62ch}

/* ---------- reveals & motion ----------
   Choreography, not uniformity: elements arrive from the direction that
   makes sense for them. All fire once; all collapse under reduced motion. */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity var(--t-reveal) var(--e-reveal),transform var(--t-reveal) var(--e-reveal);
  transition-delay:var(--d,0s)}
.rv.is-in{opacity:1;transform:none}
.rv.rv-l{transform:translateX(-36px)}      /* enters from left  — left columns, sticky rails */
.rv.rv-r{transform:translateX(36px)}       /* enters from right — right columns, carousels  */
.rv.rv-up{transform:translateY(40px)}      /* deeper rise — footer statements, CTAs         */
.rv.rv-sc{transform:scale(.955);transform-origin:50% 62%}  /* settles — large panels        */
.rv.is-in{transform:none}
/* image clip-zoom reveal: frame opens while the image settles from 1.05 */
.rv.rv-img{clip-path:inset(9% 7% 9% 7% round var(--r-lg));transform:none;
  transition:opacity .7s var(--e-reveal),clip-path .95s var(--e-reveal);transition-delay:var(--d,0s)}
.rv.rv-img>svg,.rv.rv-img>img,.rv.rv-img>span{transform:scale(1.06);
  transition:transform 1.25s var(--e-reveal);transition-delay:var(--d,0s)}
.rv.rv-img.is-in{clip-path:inset(0 0 0 0 round var(--r-lg))}
.rv.rv-img.is-in>svg,.rv.rv-img.is-in>img,.rv.rv-img.is-in>span{transform:none}

/* hero entrance — runs once on load (navigation is the user action) */
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroLine{from{transform:translateY(108%)}to{transform:none}}
@keyframes heroCard{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes heroMedia{from{transform:scale(1.045)}to{transform:none}}
.hero .h-line{display:block;overflow:hidden}
.hero .h-line>span{display:block;animation:heroLine .95s var(--e-reveal) .1s both}
.hero .h-line+.h-line>span{animation-delay:.24s}
.hero-copy .eyebrow{animation:heroRise .7s var(--e-reveal) .05s both}
.hero-sub{animation:heroRise .7s var(--e-reveal) .5s both}
.hero-ctas{animation:heroRise .7s var(--e-reveal) .62s both}
.hero-grid .glass-card{animation:heroCard 1s var(--e-reveal) .55s both}
.hero-media>svg,.hero-media>img,.hero-media>video{animation:heroMedia 1.8s var(--e-inout) both}
.hero-media{will-change:transform}
.draw path,.draw line,.draw circle,.draw ellipse{stroke-dasharray:var(--len,600);
  stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.2s var(--e-inout) var(--d,0s)}
.draw.is-in path,.draw.is-in line,.draw.is-in circle,.draw.is-in ellipse{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.rv.rv-l,.rv.rv-r,.rv.rv-up,.rv.rv-sc{opacity:1;transform:none}
  .rv.rv-img{clip-path:inset(0 0 0 0 round var(--r-lg));opacity:1}
  .rv.rv-img>svg,.rv.rv-img>img,.rv.rv-img>span{transform:none}
  .wa-fab{opacity:1;transform:none;pointer-events:auto}
  .draw path,.draw line,.draw circle,.draw ellipse{stroke-dashoffset:0}
  .carousel{scroll-snap-type:x mandatory}}

/* ---------- misc / CMS states ---------- */
.pagination{display:flex;gap:.5rem;justify-content:center;align-items:center}
.page-n{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:999px;font-family:var(--f-mono);font-size:var(--fs-caption);text-decoration:none;
  color:var(--ink);transition:all var(--t-hover) var(--e-out)}
.page-n:hover{border-color:var(--ink)}
.page-n.is-current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.empty-state{text-align:center;border:1px dashed var(--line);border-radius:var(--r-md);
  padding:4rem 2rem}
.empty-state svg{width:44px;height:44px;color:var(--stone);margin:0 auto 1.4rem}
.breadcrumb{display:flex;gap:.7rem;font-family:var(--f-mono);font-size:var(--fs-caption);
  text-transform:uppercase;letter-spacing:.1em;color:var(--stone)}
.breadcrumb a{color:var(--stone);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.author-card{display:flex;gap:1.4rem;align-items:center;border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.6rem;background:var(--paper)}
.author-card .ava{width:76px;height:76px;border-radius:999px;overflow:hidden;flex:none;
  background:linear-gradient(160deg,var(--tint1),var(--tint2))}
.pull-quote{font-family:var(--f-display);font-size:var(--fs-h2);line-height:1.3;font-style:italic;
  text-align:center;max-width:22ch;margin:3rem auto;color:var(--accent)}
.notice{border:1px solid var(--tint1);background:var(--tint2);border-radius:var(--r-sm);
  padding:1rem 1.2rem;font-size:var(--fs-small);color:var(--ink);line-height:1.55}
.proto-note{position:fixed;left:1rem;bottom:1rem;z-index:70;font-family:var(--f-mono);
  font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
  background:rgba(248,248,245,.85);border:1px solid var(--line);border-radius:999px;
  padding:.35rem .8rem;pointer-events:none}
@media(max-width:767px){.proto-note{display:none}}
.cookie{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:120;
  background:var(--ink);color:var(--paper);border-radius:var(--r-md);padding:1.1rem 1.4rem;
  display:flex;gap:1.2rem;align-items:center;max-width:min(92vw,620px);box-shadow:var(--sh-raise)}
.cookie p{font-size:var(--fs-caption);font-family:var(--f-mono);line-height:1.5;letter-spacing:.02em}