/* =====================================================================
FENWEH.COM — Website design system, V2 "Held Complexity"
Brand: navy ink on paper white, ivory plates, one orange accent.
Core seven govern every clinical surface; the expressive range is
reserved for resource and campaign surfaces only.
Type: DM Sans (display) + IBM Plex Sans (text).
Variable names are inherited from V1 so markup stays untouched; the
VALUES are V2. Mapping is noted per group below.
===================================================================== */
:root{
/* --saffron-* now carries V2 ORANGE (#E9784A) — the single accent. Never a large fill. */
--saffron-900:#6E2F14;--saffron-700:#A8451B;--saffron-600:#C2542A;--saffron-500:#E9784A;
--saffron-400:#F0906A;--saffron-300:#F5AE92;--saffron-200:#F9CDBB;--saffron-100:#FCE6DC;--saffron-050:#FEF4EF;
/* --indigo-* now carries the V2 NAVY anchor (#1F2430 / #142536) */
--indigo-900:#0E1520;--indigo-800:#142536;--indigo-700:#1F2430;--indigo-600:#2E3B4D;--indigo-500:#46536A;--indigo-300:#9AA3B0;--indigo-100:#E3E6EB;
/* --rose-* now carries V2 PURPLE (#6E5BA7) — quotes and links */
--rose-600:#5C4A93;--rose-500:#6E5BA7;--rose-300:#A99BD0;--rose-100:#EAE5F4;
/* --lilac-* now carries V2 GREEN (#7EA38A) — confirmation, safety, growth */
--lilac-700:#4E6B58;--lilac-500:#7EA38A;--lilac-300:#A9C2B2;--lilac-100:#E7EFE9;
/* Neutrals — navy ink on paper white, ivory as the secondary surface */
--ink-900:#1F2430;--ink-700:#4A5460;--ink-500:#8C8C89;--ink-300:#B4B4B1;
--line:#E2E5E9;--line-2:#CDD2D9;--cream:#FFFFFF;--cream-2:#F7F5F0;--ivory:#F7F5F0;--white:#fff;
--ok:#4E6B58;--warn:#C2542A;--stop:#C2542A;
/* V2 expressive range — resource, campaign and illustration surfaces only */
--x-pink:#F562C0;--x-coral:#F87373;--x-yellow:#F4CA50;--x-mint:#37DDAE;
--x-cyan:#30CBF2;--x-indigo:#7082F5;--x-chalk:#CDCDCD;
/* Type */
--serif:"DM Sans",system-ui,-apple-system,sans-serif;
--sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
/* Radius — V2 scale: 10 controls, 14 cells, 18 panels */
--r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-2xl:22px;--r-full:999px;
/* Elevation — V2 two-stop, navy tinted */
--sh-sm:0 1px 2px rgba(20,37,54,.05);
--sh-md:0 1px 2px rgba(20,37,54,.05),0 10px 28px -10px rgba(20,37,54,.14);
--sh-lg:0 2px 4px rgba(20,37,54,.06),0 18px 44px -14px rgba(20,37,54,.18);
--sh-xl:0 3px 6px rgba(20,37,54,.07),0 30px 70px -20px rgba(20,37,54,.22);
--wrap:1180px;--nav-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink-900);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:600;line-height:1.13;letter-spacing:-0.012em;margin:0;color:var(--ink-900);text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--rose-600);text-decoration:none;transition:color .18s}
a:hover{color:var(--saffron-600)}
img{max-width:100%;display:block}
strong{font-weight:700}
em{font-style:italic}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--saffron-500);outline-offset:2px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:760px}
section{position:relative}
.band{padding:56px 0}
.band--indigo{background:var(--indigo-700);color:var(--ivory)}
.band--indigo h1,.band--indigo h2,.band--indigo h3,.band--indigo h4{color:var(--ivory)}
.band--cream2{background:var(--cream-2)}
.band--ivory{background:var(--ivory)}
.band--night{background:linear-gradient(165deg,var(--indigo-800),var(--indigo-900));color:var(--ivory)}
.band--night h1,.band--night h2,.band--night h3{color:var(--ivory)}
@media(min-width:768px){.band{padding:88px 0}.wrap{padding:0 32px}}
/* ---------- Eyebrow / kicker ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:0;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo-900);background:var(--saffron-500);padding:5px 11px 4px;border-radius:3px;margin-bottom:18px}
.eyebrow--ghost{background:transparent;color:var(--saffron-600);padding:0;letter-spacing:.16em}
.band--indigo .eyebrow,.band--night .eyebrow{background:var(--saffron-400);color:var(--indigo-900)}
.eyebrow--lilac{background:var(--lilac-500);color:#fff}
.eyebrow--rose{background:var(--rose-500);color:var(--indigo-900)}
.lead{font-size:19px;line-height:1.6;color:var(--ink-700);max-width:60ch}
.band--indigo .lead,.band--night .lead{color:#e9dbe4}
.muted{color:var(--ink-500)}
.band--indigo .muted{color:var(--indigo-300)}
.center{text-align:center}
.center .lead,.center .eyebrow{margin-left:auto;margin-right:auto}
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:44px}
.section-head{max-width:none}
.section-head h2{font-size:clamp(28px,5.2vw,44px)}
.section-head .lead{margin-top:16px}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:16px;border:0;border-radius:var(--r-md);padding:14px 24px;transition:transform .18s,box-shadow .18s,background .18s,color .18s;text-decoration:none;line-height:1;text-align:center}
.btn svg{flex:none}
.btn--primary{background:var(--saffron-500);color:var(--indigo-900)}
.btn--primary:hover{background:var(--saffron-400);color:var(--indigo-900);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn--indigo{background:var(--indigo-700);color:var(--ivory)}
.btn--indigo:hover{background:var(--indigo-800);color:var(--ivory);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn--ghost{background:transparent;color:var(--indigo-700);box-shadow:inset 0 0 0 1.6px var(--line-2)}
.btn--ghost:hover{background:var(--ivory);color:var(--indigo-800);box-shadow:inset 0 0 0 1.6px var(--indigo-300)}
.hero .btn--ghost,.phero:not(.phero--cream) .btn--ghost,.band--indigo .btn--ghost,.band--night .btn--ghost{color:var(--ivory);box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.32)}
.hero .btn--ghost:hover,.phero:not(.phero--cream) .btn--ghost:hover,.band--indigo .btn--ghost:hover,.band--night .btn--ghost:hover{background:rgba(255,255,255,.1);color:var(--ivory)}
.btn--light{background:var(--ivory);color:var(--indigo-800)}
.btn--light:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn--text{background:transparent;color:var(--rose-600);padding:12px 4px}
.btn--text:hover{color:var(--saffron-600)}
.btn--lg{font-size:17px;padding:16px 30px}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.center .btn-row{justify-content:center}
/* ---------- Chips ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:7px 14px;border-radius:var(--r-full);background:var(--saffron-100);color:var(--saffron-700);line-height:1}
.chip .d{flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.chip--indigo{background:var(--indigo-100);color:var(--indigo-700)}
.chip--lilac{background:var(--lilac-100);color:var(--lilac-700)}
.chip--rose{background:var(--rose-100);color:var(--rose-600)}
.chip--outline{background:transparent;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.3);color:var(--ivory)}
.chip-row{display:flex;flex-wrap:wrap;gap:9px}
/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(236,228,213,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header.is-scrolled{box-shadow:var(--sh-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:16px}
.nav__logo{display:flex;align-items:center;gap:9px;flex:none}
.nav__logo img{height:30px;width:auto}
.nav__spark{width:22px;height:22px;flex:none}
.nav__links{display:none}
.nav__right{display:flex;align-items:center;gap:10px}
.nav__cta{display:none}
.nav__burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:transparent;border:0;padding:10px;border-radius:var(--r-md)}
.nav__burger span{height:2.4px;width:100%;background:var(--ink-900);border-radius:2px;transition:transform .25s,opacity .2s}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){opacity:0}
body.menu-open .nav__burger span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}
@media(min-width:1000px){
.nav__burger{display:none}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__cta{display:inline-flex}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:600;color:var(--ink-700);padding:9px 13px;border-radius:var(--r-md);background:transparent;border:0;transition:background .15s,color .15s}
.nav__link:hover,.nav__item:hover .nav__link,.nav__item:focus-within .nav__link{background:var(--saffron-100);color:var(--saffron-700)}
.nav__link .caret{width:12px;height:12px;transition:transform .2s}
.nav__item:hover .nav__link .caret{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);min-width:520px;background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:18px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;z-index:120}
.mega::before{content:"";position:absolute;top:-16px;left:-8px;right:-8px;height:18px}
.nav__item>.nav__link::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.mega--wide{min-width:640px}
.mega--left{left:0;transform:translateX(-20%) translateY(6px)}
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__item:hover .mega--left,.nav__item:focus-within .mega--left{transform:translateX(-20%) translateY(0)}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega__col-title{grid-column:1/-1;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-300);padding:6px 10px 4px}
.mega__link{display:block;padding:9px 10px;border-radius:var(--r-md);transition:background .14s}
.mega__link:hover{background:var(--saffron-050)}
.mega__link b{display:block;font-size:14.5px;font-weight:700;color:var(--ink-900)}
.mega__link span{display:block;font-size:12.5px;color:var(--ink-500);margin-top:1px}
.mega__feature{margin-top:8px;grid-column:1/-1;background:var(--indigo-700);border-radius:var(--r-lg);padding:16px 18px;color:var(--ivory);display:flex;align-items:center;justify-content:space-between;gap:14px}
.mega__feature b{color:#fff;font-family:var(--serif);font-size:16px}
.mega__feature span{font-size:12.5px;color:var(--indigo-300);display:block;margin-top:2px}
}
/* ---------- Mobile drawer ---------- */
.drawer{position:fixed;inset:var(--nav-h) 0 0;background:var(--cream);z-index:95;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 120px}
body.menu-open .drawer{transform:translateX(0)}
body.menu-open{overflow:hidden}
.drawer__section{border-bottom:1px solid var(--line)}
.drawer__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:0;padding:16px 4px;font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink-900);text-align:left}
.drawer__toggle .caret{width:18px;height:18px;transition:transform .25s;color:var(--saffron-600)}
.drawer__toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
.drawer__panel{max-height:0;overflow:hidden;transition:max-height .3s ease}
.drawer__panel-in{padding:2px 4px 16px;display:flex;flex-direction:column;gap:2px}
.drawer__panel a{display:block;padding:11px 12px;border-radius:var(--r-md);color:var(--ink-700);font-weight:600;font-size:16px}
.drawer__panel a:hover{background:var(--saffron-050);color:var(--saffron-700)}
.drawer__panel a span{display:block;font-size:13px;font-weight:500;color:var(--ink-500)}
.drawer__cta{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.drawer__simple{display:block;padding:16px 4px;font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink-900);border-bottom:1px solid var(--line)}
@media(min-width:1000px){.drawer{display:none}}
/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(170deg,var(--indigo-800) 0%,var(--indigo-900) 100%);color:var(--ivory)}
.hero__in{position:relative;z-index:2;padding:52px 20px 60px}
.hero h1{color:var(--ivory);font-size:clamp(38px,8.5vw,70px);letter-spacing:-0.018em;line-height:1.06;font-weight:600}
.hero h1 em{color:var(--saffron-400);font-style:italic}
.hero__sub{font-size:clamp(17px,2.4vw,21px);color:#e9dbe4;max-width:46ch;margin-top:20px;line-height:1.55}
.hero .btn-row{margin-top:30px}
.hero__chips{margin-top:26px}
.hero__spark{position:absolute;top:-60px;right:-40px;width:340px;height:340px;background:radial-gradient(circle at 50% 45%,rgba(251,187,61,.4),rgba(242,160,7,0) 68%);pointer-events:none;z-index:1}
.hero__art{margin-top:40px;position:relative;z-index:2}
.hero__frame{border-radius:var(--r-2xl);overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:var(--sh-xl);aspect-ratio:4/3;background:var(--indigo-600)}
.hero__frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03)}
@media(min-width:900px){
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:72px 32px 84px}
.hero__art{margin-top:0}
.hero__frame{aspect-ratio:3/3.4}
}
/* ---------- Recognition reframe strip ---------- */
.reframe{display:grid;gap:14px}
.reframe__card{background:var(--ivory);border:1px solid var(--line);border-left:4px solid var(--saffron-500);border-radius:var(--r-lg);padding:20px 22px}
.reframe__card:nth-child(3n+2){border-left-color:var(--lilac-500)}
.reframe__card:nth-child(3n+3){border-left-color:var(--rose-500)}
.reframe__q{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink-900);line-height:1.2}
.reframe__a{font-size:15px;color:var(--ink-500);margin-top:8px}
.band--indigo .reframe__card{background:var(--indigo-800);border-color:var(--indigo-600);border-left-color:var(--saffron-500)}
.band--indigo .reframe__q{color:var(--ivory)}
.band--indigo .reframe__a{color:var(--indigo-300)}
@media(min-width:700px){.reframe{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.reframe{grid-template-columns:1fr 1fr 1fr}}
/* ---------- Feeling tiles (Start Here) ---------- */
.feelgrid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){.feelgrid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.feelgrid{grid-template-columns:1fr 1fr 1fr}}
.feeltile{display:flex;flex-direction:column;gap:8px;background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;transition:transform .18s,box-shadow .18s,border-color .18s;color:var(--ink-900)}
.feeltile:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--saffron-400);color:var(--ink-900)}
.feeltile__q{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.2}
.feeltile__t{font-size:14px;color:var(--ink-500)}
.feeltile__go{margin-top:auto;font-size:13.5px;font-weight:800;color:var(--rose-600);display:inline-flex;align-items:center;gap:6px;letter-spacing:.01em}
/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr 1fr}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.grid-3{grid-template-columns:1fr 1fr 1fr}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;transition:transform .18s,box-shadow .18s}
.card--link:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.card__ic{width:44px;height:44px;border-radius:var(--r-md);background:var(--saffron-100);color:var(--saffron-700);display:grid;place-items:center;margin-bottom:16px}
.card--lilac .card__ic{background:var(--lilac-100);color:var(--lilac-700)}
.card--rose .card__ic{background:var(--rose-100);color:var(--rose-600)}
.card--indigo .card__ic{background:var(--indigo-100);color:var(--indigo-700)}
.card h3{font-size:21px;margin-bottom:9px}
.card p{font-size:15px;color:var(--ink-500);margin:0}
.card__link{margin-top:16px;font-size:14px;font-weight:800;color:var(--rose-600);display:inline-flex;align-items:center;gap:6px}
.card--top{border-top:4px solid var(--saffron-500)}
.card--top.card--lilac{border-top-color:var(--lilac-500)}
.card--top.card--rose{border-top-color:var(--rose-500)}
.card--top.card--indigo{border-top-color:var(--indigo-700)}
/* Identity / who-it's-for card with image */
.idcard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff;isolation:isolate}
.idcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);z-index:-2}
.idcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,18,38,.9) 8%,rgba(18,18,38,.36) 60%,rgba(18,18,38,.12) 100%);z-index:-1}
.idcard.no-img{background:linear-gradient(160deg,var(--indigo-600),var(--indigo-800))}
.idcard h3{color:#fff;font-size:22px}
.idcard p{color:#e9dbe4;font-size:14px;margin:7px 0 0}
.idcard .idcard__go{margin-top:14px;font-size:13px;font-weight:800;color:var(--saffron-300);display:inline-flex;align-items:center;gap:6px}
/* ---------- Split feature ---------- */
.split{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:56px}.split--rev .split__media{order:2}}
.split__media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3;background:var(--indigo-700)}
.split__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03)}
/* ---------- Therapist cards ---------- */
.tcard{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);display:flex;flex-direction:column}
.tcard__photo{aspect-ratio:4/4.2;background:var(--indigo-700);position:relative;overflow:hidden}
.tcard__photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(1) contrast(1.03)}
.tcard__photo::after{content:"";position:absolute;inset:auto 0 0 0;height:82px;background:linear-gradient(transparent,rgba(18,18,38,.66))}
.tcard__pin{position:absolute;z-index:2;left:14px;bottom:12px;font-size:12px;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:6px}
.tcard__body{padding:18px 20px 22px}
.tcard__body h3,.tcard__body h4{font-size:21px;margin-bottom:2px}
.tcard__pron{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-600)}
.tcard__spec{font-size:13.5px;color:var(--ink-500);margin:11px 0 12px;line-height:1.5}
.tcard__langs{font-size:12.5px;color:var(--ink-700)}
.tcard__langs b{color:var(--ink-900)}
.tcard__link{margin-top:15px;font-weight:800;color:var(--rose-600);font-size:14px;display:inline-flex;gap:6px}
/* ---------- Article / recognition cards ---------- */
.acard{display:flex;flex-direction:column;background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .18s,box-shadow .18s}
.acard:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.acard__pic{aspect-ratio:16/9;overflow:hidden;background:var(--indigo-700);position:relative}
.acard__pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03)}
.acard__tag{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;letter-spacing:.04em;background:var(--ivory);color:var(--indigo-800);padding:5px 10px;border-radius:var(--r-full)}
.acard__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.acard__body h3{font-size:19px;line-height:1.18;margin-bottom:8px}
.acard__body p{font-size:14px;color:var(--ink-500);margin:0 0 14px}
.acard__meta{margin-top:auto;font-size:12.5px;color:var(--ink-500);display:flex;align-items:center;gap:8px}
.acard__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-300)}
/* ---------- TL;DR / answer box (GEO) ---------- */
.tldr{background:var(--saffron-050);border:1px solid var(--saffron-200);border-left:4px solid var(--saffron-500);border-radius:var(--r-lg);padding:20px 24px;margin:0 0 28px}
.tldr__label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron-700);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tldr p{font-size:16.5px;color:var(--ink-900);margin:0;line-height:1.55}
.callout{background:var(--lilac-100);border:1px solid var(--lilac-300);border-radius:var(--r-lg);padding:20px 24px;margin:26px 0}
.callout--rose{background:var(--rose-100);border-color:var(--rose-300)}
.callout__q{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--indigo-800);line-height:1.3}
/* ---------- Prose (articles / hub bodies) ---------- */
.prose{font-size:17.5px;line-height:1.72;color:var(--ink-700);max-width:70ch}
.prose>h2{font-size:clamp(24px,4vw,32px);margin:44px 0 14px;color:var(--ink-900)}
.prose>h3{font-size:22px;margin:32px 0 10px;color:var(--ink-900)}
.prose p{margin:0 0 20px}
.prose strong{color:var(--ink-900)}
.prose ul,.prose ol{margin:0 0 22px;padding-left:24px}
.prose li{margin-bottom:9px}
.prose ul li::marker{color:var(--saffron-600)}
.prose ol li::marker{color:var(--saffron-600);font-weight:700}
.prose blockquote{margin:28px 0;padding:6px 0 6px 24px;border-left:4px solid var(--saffron-500);font-family:var(--serif);font-size:23px;line-height:1.4;color:var(--indigo-800);font-weight:600}
.prose blockquote em{color:var(--rose-600)}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rose-300)}
.prose a:hover{text-decoration-color:var(--saffron-500)}
/* ---------- Data table (GEO) ---------- */
.dtable{width:100%;border-collapse:collapse;font-size:15px;margin:22px 0;background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.dtable caption{caption-side:top;text-align:left;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-300);margin-bottom:10px}
.dtable th,.dtable td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.dtable thead th{background:var(--indigo-700);color:var(--ivory);font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.02em}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr:nth-child(even){background:var(--saffron-050)}
.dtable td b{color:var(--ink-900)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ---------- FAQ accordion ---------- */
.faq{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--ivory)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:last-child{border-bottom:0}
.faq__q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;padding:20px 22px;background:transparent;border:0;font-family:var(--serif);font-weight:700;font-size:17.5px;color:var(--ink-900);line-height:1.3}
.faq__sign{flex:none;width:28px;height:28px;border-radius:50%;background:var(--saffron-100);color:var(--saffron-700);display:grid;place-items:center;font-size:19px;transition:transform .25s,background .2s}
.faq__item.is-open .faq__sign{transform:rotate(45deg);background:var(--saffron-500);color:#fff}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq__a-in{padding:0 22px 22px;color:var(--ink-500);font-size:16px;line-height:1.6}
.faq__a-in a{color:var(--rose-600)}
/* ---------- Stats ---------- */
.statrow{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(min-width:760px){.statrow{grid-template-columns:repeat(4,1fr)}}
.stat{padding:4px}
.stat__n{font-family:var(--serif);font-size:clamp(32px,5vw,44px);font-weight:800;color:var(--saffron-500);line-height:1}
.band--indigo .stat__n,.band--night .stat__n{color:var(--saffron-400)}
.stat__l{font-size:13.5px;color:var(--ink-500);margin-top:8px;line-height:1.4}
.band--indigo .stat__l{color:var(--indigo-300)}
/* ---------- Steps ---------- */
.steps{display:grid;gap:18px}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding-top:8px}
.step__n{width:40px;height:40px;border-radius:50%;background:var(--indigo-700);color:var(--saffron-400);font-family:var(--serif);font-weight:800;font-size:18px;display:grid;place-items:center;margin-bottom:14px}
.step h4{font-size:18px;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--ink-500);margin:0}
/* ---------- Pledge / list ---------- */
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checklist li{position:relative;padding-left:34px;font-size:16px;color:var(--ink-700)}
.checklist li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--lilac-100);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f5d52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.band--indigo .checklist li{color:#e9dbe4}
/* ---------- Do / don't ---------- */
.vt{display:grid;gap:18px}
@media(min-width:700px){.vt{grid-template-columns:1fr 1fr}}
.vt__col{border-radius:var(--r-lg);padding:24px}
.vt__col--do{background:var(--lilac-100);border:1px solid var(--lilac-300)}
.vt__col--dont{background:var(--rose-100);border:1px solid var(--rose-300)}
.vt__col h4{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.vt__col--do h4{color:var(--lilac-700)}
.vt__col--dont h4{color:var(--rose-600)}
.vt ul{margin:0;padding:0;list-style:none}
.vt li{font-size:15px;padding:8px 0 8px 26px;position:relative;color:var(--ink-700)}
.vt__col--do li::before{content:"✓";position:absolute;left:0;color:var(--lilac-700);font-weight:800}
.vt__col--dont li::before{content:"✕";position:absolute;left:0;color:var(--rose-600);font-weight:800}
/* ---------- Quote ---------- */
.bigquote{font-family:var(--serif);font-size:clamp(26px,4.6vw,40px);line-height:1.28;letter-spacing:-0.02em;font-weight:600;color:var(--ink-900);max-width:22ch}
.band--indigo .bigquote,.band--night .bigquote{color:var(--ivory)}
.bigquote .hl{color:var(--saffron-600)}
.band--indigo .bigquote .hl,.band--night .bigquote .hl{color:var(--saffron-400)}
/* ---------- Breadcrumb ---------- */
.crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:13px;color:var(--ink-500);padding:16px 0}
.crumb a{color:var(--ink-500);font-weight:600}
.crumb a:hover{color:var(--saffron-600)}
.crumb .sep{color:var(--ink-300)}
/* ---------- Page hero (interior) ---------- */
.phero{background:linear-gradient(165deg,var(--indigo-700),var(--indigo-900));color:var(--ivory);padding:22px 0 56px}
.phero h1{color:var(--ivory);font-size:clamp(32px,6vw,54px);letter-spacing:-0.015em;max-width:18ch}
.phero h1 em{color:var(--saffron-400)}
.phero .lead{color:#e9dbe4;margin-top:18px;font-size:19px}
.phero--cream{background:var(--cream-2);color:var(--ink-900)}
.phero--cream h1{color:var(--ink-900)}
.phero--cream h1 em{color:var(--rose-600)}
.phero--cream .lead{color:var(--ink-700)}
.phero--cream .crumb{color:var(--ink-500)}
/* ---------- Newsletter / inline form ---------- */
.subscribe{display:flex;gap:10px;flex-wrap:wrap;max-width:460px}
.subscribe input{flex:1;min-width:200px;font-family:var(--sans);font-size:16px;padding:14px 16px;border-radius:var(--r-md);border:1.5px solid var(--line-2);background:var(--white);color:var(--ink-900)}
.subscribe input:focus{outline:none;border-color:var(--saffron-500);box-shadow:0 0 0 3px var(--saffron-100)}
.band--indigo .subscribe input,.band--night .subscribe input{border-color:var(--indigo-500);background:rgba(255,255,255,.06);color:var(--ivory)}
.band--indigo .subscribe input::placeholder{color:var(--indigo-300)}
/* ---------- Forms ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;color:var(--ink-700)}
.field .hint{font-weight:500;color:var(--ink-500);font-size:13px}
.input,.textarea,.select{width:100%;font-family:var(--sans);font-size:16px;padding:13px 15px;border-radius:var(--r-md);border:1.5px solid var(--line-2);background:var(--white);color:var(--ink-900);transition:border .18s,box-shadow .18s}
.textarea{min-height:120px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--saffron-500);box-shadow:0 0 0 3px var(--saffron-100)}
.input::placeholder,.textarea::placeholder{color:var(--ink-300)}
/* ---------- Footer ---------- */
.site-footer{background:var(--indigo-900);color:var(--indigo-300);padding:56px 0 32px;font-size:14.5px}
.site-footer h4{color:var(--ivory);font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.footer__grid{display:grid;gap:36px 24px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}}
.footer__brand{grid-column:1/-1}
@media(min-width:900px){.footer__brand{grid-column:auto}}
.footer__logo{height:28px;margin-bottom:16px}
.footer__desc{color:var(--indigo-300);max-width:34ch;font-size:14.5px;line-height:1.6}
.footer__links{display:flex;flex-direction:column;gap:10px}
.footer__links a{color:var(--indigo-300);font-weight:500}
.footer__links a:hover{color:var(--saffron-400)}
.footer__crisis{background:var(--indigo-800);border:1px solid var(--indigo-600);border-radius:var(--r-lg);padding:16px 18px;margin-top:36px;font-size:13.5px;color:#e9dbe4;line-height:1.55}
.footer__crisis b{color:var(--saffron-400)}
.footer__bottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--indigo-600);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;color:var(--indigo-300)}
.footer__social{display:flex;gap:10px}
.footer__social a{width:36px;height:36px;border-radius:50%;background:var(--indigo-800);display:grid;place-items:center;color:var(--indigo-300)}
.footer__social a:hover{background:var(--saffron-500);color:var(--indigo-900)}
/* ---------- Phone mockup ---------- */
.phone{width:250px;border-radius:40px;background:#14142a;padding:9px;box-shadow:var(--sh-xl);flex:none}
.phone__screen{position:relative;border-radius:32px;overflow:hidden;background:var(--cream);aspect-ratio:250/510;display:flex;flex-direction:column}
.phone__notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:78px;height:18px;background:#14142a;border-radius:0 0 12px 12px;z-index:5}
.phone__status{display:flex;justify-content:space-between;align-items:center;padding:11px 20px 4px;font-size:11px;font-weight:700;color:var(--ink-700)}
.appui{flex:1;display:flex;flex-direction:column;overflow:hidden}
.appui__top{padding:8px 16px 10px}
.appui__ey{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--saffron-600)}
.appui__h{font-family:var(--serif);font-size:21px;color:var(--ink-900);margin:4px 0 0}
.appui__body{padding:0 16px 12px;flex:1;overflow:hidden}
.appui__foot{padding:12px 16px 16px;border-top:1px solid var(--line)}
.appbtn{width:100%;border:0;border-radius:var(--r-md);padding:13px;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px}
.appbtn--mari{background:var(--saffron-500);color:var(--indigo-900)}
.appbtn--ghost{background:transparent;color:var(--indigo-700);box-shadow:inset 0 0 0 1.5px var(--line-2);margin-top:8px}
.mini-t{display:flex;align-items:center;gap:11px;background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 11px}
.mini-t img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center 20%;filter:grayscale(1);flex:none}
.mini-t .nm{font-weight:800;font-size:13px;color:var(--ink-900)}
.mini-t .sub{font-size:11px;color:var(--ink-500)}
.weekstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:13px 0}
.daycell{text-align:center;padding:8px 0;border-radius:var(--r-md);background:var(--ivory);border:1px solid var(--line)}
.daycell .dow{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-300)}
.daycell .dn{font-size:15px;font-weight:800;color:var(--ink-900);margin-top:2px}
.daycell.on{background:var(--indigo-700);border-color:var(--indigo-700)}
.daycell.on .dow{color:var(--saffron-300)}
.daycell.on .dn{color:#fff}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slot{text-align:center;padding:10px 0;border-radius:var(--r-md);background:var(--ivory);border:1.5px solid var(--line);font-size:13px;font-weight:700;color:var(--ink-700)}
.slot.on{background:var(--saffron-100);border-color:var(--saffron-500);color:var(--saffron-700)}
/* ---------- Browser mockup ---------- */
.browser{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-xl);border:1px solid var(--line);background:var(--ivory)}
.browser__bar{background:#e7ddca;padding:11px 14px;display:flex;align-items:center;gap:7px}
.browser__bar i{width:11px;height:11px;border-radius:50%;background:#c9ba9e;display:block}
.browser__url{margin-left:12px;background:var(--ivory);border-radius:var(--r-full);padding:5px 14px;font-size:11.5px;color:var(--ink-500);flex:1;max-width:280px}
.browser__shot{display:block;width:100%}
/* ---------- Utility ---------- */
.hide-mobile{display:none}
@media(min-width:768px){.hide-mobile{display:block}}
.only-mobile{display:block}
@media(min-width:768px){.only-mobile{display:none}}
.divider{height:1px;background:var(--line);border:0;margin:0}
.pill-note{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--lilac-700);background:var(--lilac-100);padding:8px 14px;border-radius:var(--r-full)}
.img-fallback{background:radial-gradient(circle at 42% 38%,var(--saffron-400),var(--saffron-600))!important}
.img-fallback.idcard-fb{background:linear-gradient(160deg,var(--indigo-600),var(--indigo-800))!important}
/* ---------- Quiz (Get Matched) ---------- */
.quiz{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--sh-lg);padding:24px;max-width:640px;margin:0 auto}
@media(min-width:640px){.quiz{padding:36px 40px}}
.q-bar{height:6px;background:var(--cream-2);border-radius:var(--r-full);overflow:hidden;margin-bottom:8px}
.q-bar__fill{height:100%;width:0;background:var(--saffron-500);border-radius:var(--r-full);transition:width .4s cubic-bezier(.4,0,.2,1)}
.q-live{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-300);margin-bottom:20px}
.q-step h3{font-size:clamp(22px,4vw,29px);line-height:1.15;margin-bottom:6px}
.q-step .q-sub{font-size:15px;color:var(--ink-500);margin-bottom:22px}
.q-choices{display:grid;gap:11px}
.q-choice{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:17px 18px;font-family:var(--sans);font-size:16.5px;font-weight:600;color:var(--ink-900);transition:border-color .16s,background .16s,transform .12s}
.q-choice:hover{border-color:var(--saffron-400);background:var(--saffron-050);transform:translateY(-1px)}
.q-choice.is-sel{border-color:var(--saffron-500);background:var(--saffron-100)}
.q-choice__ic{flex:none;width:40px;height:40px;border-radius:var(--r-md);background:var(--ivory);display:grid;place-items:center;color:var(--saffron-600);box-shadow:var(--sh-sm)}
.q-choice__t small{display:block;font-size:13px;font-weight:500;color:var(--ink-500);margin-top:2px}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px}
.q-result-card{text-align:left}
.q-result-card h3{font-size:clamp(22px,4vw,30px);line-height:1.16;margin-top:10px}
.q-result-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.q-result-fine{font-size:13.5px;color:var(--ink-500);margin-top:18px;line-height:1.55}
/* ---------- Self-check ---------- */
.chk-progress{position:sticky;top:var(--nav-h);z-index:10;height:6px;background:var(--cream-2);border-radius:var(--r-full);overflow:hidden;margin-bottom:28px}
.chk-progress__fill{height:100%;width:0;background:var(--lilac-500);transition:width .3s}
.chk-q{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin-bottom:16px}
.chk-q__q{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink-900);margin-bottom:16px;line-height:1.3}
.chk-opts{display:grid;gap:9px}
@media(min-width:620px){.chk-opts{grid-template-columns:repeat(4,1fr)}}
.chk-opt{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 10px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--cream);font-size:14px;font-weight:700;color:var(--ink-700);cursor:pointer;transition:border-color .15s,background .15s}
.chk-opt:hover{border-color:var(--lilac-300)}
.chk-opt.is-sel{border-color:var(--lilac-500);background:var(--lilac-100);color:var(--lilac-700)}
.chk-opt input{position:absolute;opacity:0;pointer-events:none}
.chk-result{background:var(--ivory);border:1px solid var(--line);border-top:4px solid var(--lilac-500);border-radius:var(--r-lg);padding:28px}
.chk-result h3{font-size:clamp(23px,4vw,30px)}
.chk-disclaimer{background:var(--cream-2);border-radius:var(--r-md);padding:14px 16px;font-size:13.5px;color:var(--ink-500);margin-top:18px;line-height:1.55}
/* ---------- Consult form ---------- */
.consult{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--sh-md);padding:26px}
@media(min-width:640px){.consult{padding:34px 38px}}
.form-2{display:grid;gap:0 18px}
@media(min-width:560px){.form-2{grid-template-columns:1fr 1fr}}
.form-2 .field--full{grid-column:1/-1}
.form-done{text-align:center;padding:20px 10px}
.form-done__ic{width:64px;height:64px;border-radius:50%;background:var(--lilac-100);color:var(--lilac-700);display:grid;place-items:center;margin:0 auto 18px}
.byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 18%;filter:grayscale(1);flex:none}
.byline__n{font-weight:800;color:var(--ink-900);font-size:15px}
.byline__m{font-size:13px;color:var(--ink-500)}
.byline .bdot{width:3px;height:3px;border-radius:50%;background:var(--ink-300);display:inline-block;margin:0 5px;vertical-align:middle}
.author-card{display:flex;gap:18px;align-items:flex-start;background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.author-card img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:center 18%;filter:grayscale(1);flex:none}
.catbar{display:flex;flex-wrap:wrap;gap:8px}
.catbar a{font-size:13.5px;font-weight:700;padding:9px 15px;border-radius:var(--r-full);background:var(--ivory);border:1px solid var(--line);color:var(--ink-700);transition:all .15s}
.catbar a:hover,.catbar a.is-active{background:var(--saffron-100);border-color:var(--saffron-300);color:var(--saffron-700)}
.feature-article{display:grid;gap:0;background:var(--indigo-700);border-radius:var(--r-xl);overflow:hidden;color:var(--ivory)}
.feature-article__pic{aspect-ratio:16/10;position:relative;overflow:hidden;background:radial-gradient(circle at 42% 40%,var(--saffron-400),var(--saffron-600));display:grid;place-items:center}
.feature-article__body{padding:28px}
.feature-article h3{color:#fff;font-size:clamp(24px,3.4vw,32px);line-height:1.14}
.feature-article p{color:var(--indigo-100);margin:12px 0 0}
@media(min-width:820px){.feature-article{grid-template-columns:1.1fr 1fr;align-items:center}.feature-article__pic{aspect-ratio:auto;height:100%;min-height:300px}.feature-article__body{padding:40px}}
/* reduce motion */
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto}}
/* =====================================================================
V2 OVERRIDES
Where V1's brand logic contradicts the V2 book, V2 wins.
===================================================================== */
/* Headings: DM Sans, positive tracking (V2 never letterspaces tight) */
h1,h2,h3,h4,h5{font-weight:400;letter-spacing:.008em}
h1,h2{font-weight:300;letter-spacing:.012em}
.hero h1,.phero h1{font-weight:300;letter-spacing:.012em}
.bigquote,.drawer__toggle,.drawer__simple,.faq__q,.reframe__q,.feeltile__q,.chk-q__q{font-weight:400}
/* Orange is an accent, never a fill: primary action is navy (V2 p35) */
.btn--primary{background:var(--indigo-700);color:var(--ivory)}
.btn--primary:hover{background:var(--indigo-800);color:var(--ivory)}
.hero .btn--primary,.phero:not(.phero--cream) .btn--primary,.band--indigo .btn--primary,.band--night .btn--primary{background:var(--ivory);color:var(--indigo-800)}
.hero .btn--primary:hover,.phero:not(.phero--cream) .btn--primary:hover,.band--indigo .btn--primary:hover,.band--night .btn--primary:hover{background:#fff;color:var(--indigo-900)}
.appbtn--mari{background:var(--indigo-700);color:var(--ivory)}
.footer__social a:hover{background:var(--ivory);color:var(--indigo-900)}
/* Eyebrow: V2 sets labels as uppercase letterspaced text, not a coloured chip */
.eyebrow{background:transparent;color:var(--saffron-600);padding:0;font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.2em}
.band--indigo .eyebrow,.band--night .eyebrow,.hero .eyebrow,.phero:not(.phero--cream) .eyebrow{background:transparent;color:var(--saffron-400)}
.eyebrow--lilac{background:transparent;color:var(--lilac-700)}
.eyebrow--rose{background:transparent;color:var(--rose-600)}
/* Photography: V2 asks for warm, slightly low-contrast, never desaturated and
never cool-graded. This brings stock imagery into the brand grade. */
.hero__frame img,.split__media img,.idcard img,.tcard__photo img,.acard__pic img,
.byline img,.author-card img,.mini-t img,.feature-article__pic img{
filter:saturate(.94) contrast(.97) sepia(.10) brightness(1.02)}
/* The contour motif replaces V1's radial glow */
.hero__spark{background:none}
.hero::after{content:"";position:absolute;right:-160px;top:-120px;width:620px;height:620px;
background:url("assets/fenweh_symbol_white.svg") center/contain no-repeat;opacity:.10;pointer-events:none;z-index:1}
.img-fallback{background:var(--cream-2)!important;background-image:url("assets/fenweh_symbol_navy.svg")!important;
background-size:52% auto!important;background-position:center!important;background-repeat:no-repeat!important;opacity:1}
.img-fallback.idcard-fb{background:var(--indigo-800)!important;background-image:url("assets/fenweh_symbol_white.svg")!important;
background-size:64% auto!important;background-position:center!important;background-repeat:no-repeat!important}
/* Accent rails: V2 pairs core hues, so left-border accents follow purple / green / orange */
.reframe__card{border-left-color:var(--rose-500)}
.reframe__card:nth-child(3n+2){border-left-color:var(--lilac-500)}
.reframe__card:nth-child(3n+3){border-left-color:var(--saffron-500)}
/* TL;DR box: ivory plate with one orange rule, not an orange wash */
.tldr{background:var(--cream-2);border-color:var(--line);border-left-color:var(--saffron-500)}
.tldr__label{color:var(--saffron-600);letter-spacing:.2em}
/* Focus ring on the accent, at V2 radius */
:focus-visible{outline:2.5px solid var(--rose-500);outline-offset:2px;border-radius:4px}
/* Nav logo sizing for the V2 wordmark */
.nav__logo img{height:26px}
.footer__logo{height:26px}
.site-header{background:rgba(255,255,255,.88);border-bottom-color:var(--line)}
/* Expressive range, resource surfaces only (V2 p20) */
.catbar a:hover,.catbar a.is-active{background:var(--cream-2);border-color:var(--rose-300);color:var(--rose-600)}
.chip{background:var(--cream-2);color:var(--ink-700)}
.chip--indigo{background:var(--indigo-100);color:var(--indigo-700)}
.chip--lilac{background:var(--lilac-100);color:var(--lilac-700)}
.chip--rose{background:var(--rose-100);color:var(--rose-600)}
.card__ic{background:var(--cream-2);color:var(--rose-600)}
.faq__sign{background:var(--cream-2);color:var(--rose-600)}
.faq__item.is-open .faq__sign{background:var(--rose-500);color:#fff}
.q-bar__fill{background:var(--rose-500)}
.chk-progress__fill{background:var(--lilac-500)}
.q-choice.is-sel{border-color:var(--rose-500);background:var(--rose-100)}
.q-choice:hover{border-color:var(--rose-300);background:var(--cream-2)}
.q-choice__ic{color:var(--rose-600)}
.slot.on{background:var(--rose-100);border-color:var(--rose-500);color:var(--rose-600)}
.stat__n{color:var(--rose-600);font-weight:300}
.band--indigo .stat__n,.band--night .stat__n{color:var(--saffron-400)}
.step__n{background:var(--indigo-700);color:var(--saffron-400)}
.prose ul li::marker,.prose ol li::marker{color:var(--rose-500)}
.prose blockquote{border-left-color:var(--rose-500);color:var(--indigo-800);font-weight:400}
.dtable tbody tr:nth-child(even){background:var(--cream-2)}
.browser__bar{background:var(--cream-2)}
.browser__bar i{background:var(--line-2)}
.hero h1 em,.phero h1 em{color:var(--saffron-400);font-style:italic}
.phero--cream h1 em{color:var(--rose-600)}
.bigquote .hl{color:var(--rose-600)}
/* ---------- Element patterns brought onto the V2 system ---------- */
/* V2 marks a category with a coloured dot on an ivory plate, not a left rail */
.reframe__card{background:var(--cream-2);border:0;border-left:0;border-radius:var(--r-lg);padding:24px 26px}
.reframe__q{display:flex;align-items:flex-start;gap:12px}
.reframe__q::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;background:var(--rose-500);margin-top:.42em}
.reframe__card:nth-child(3n+2) .reframe__q::before{background:var(--lilac-500)}
.reframe__card:nth-child(3n+3) .reframe__q::before{background:var(--saffron-500)}
.reframe__a{padding-left:23px}
.band--indigo .reframe__card{background:rgba(247,245,240,.06);border:0}
/* Accent rules are hairline-to-2px in V2, never heavy slabs */
.card--top{border-top-width:2px}
.card{border-radius:var(--r-lg)}
/* Overlays and device shells follow the navy anchor, not V1's blue-black */
.idcard::after{background:linear-gradient(0deg,rgba(20,37,54,.92) 8%,rgba(20,37,54,.40) 60%,rgba(20,37,54,.10) 100%)}
.idcard.no-img{background:linear-gradient(160deg,var(--indigo-600),var(--indigo-800))}
.idcard p{color:rgba(247,245,240,.86)}
.idcard .idcard__go{color:var(--saffron-400)}
.tcard__photo::after{background:linear-gradient(transparent,rgba(20,37,54,.7))}
.tcard__photo,.split__media,.hero__frame{background:var(--indigo-800)}
.phone{background:var(--indigo-900)}
.phone__notch{background:var(--indigo-900)}
.phone__screen{background:var(--cream)}
.tcard__pron{color:var(--rose-600);letter-spacing:.18em;font-weight:600}
/* The contour motif carries every dark band, the way section plates do in the book */
.band--indigo,.band--night,.phero:not(.phero--cream){position:relative;overflow:hidden}
.band--indigo::after,.band--night::after,.phero:not(.phero--cream)::after{
content:"";position:absolute;right:-190px;bottom:-220px;width:660px;height:660px;
background:url("assets/fenweh_symbol_white.svg") center/contain no-repeat;opacity:.09;pointer-events:none}
.band--indigo>.wrap,.band--night>.wrap,.phero>.wrap{position:relative;z-index:1}
/* Reversed copy on navy uses ivory, per the V2 contrast pairings */
.band--indigo .lead,.band--night .lead,.phero:not(.phero--cream) .lead{color:rgba(247,245,240,.82)}
.band--indigo .muted,.band--night .muted{color:rgba(247,245,240,.62)}
.band--indigo .checklist li{color:rgba(247,245,240,.86)}
.footer__desc,.footer__links a,.footer__bottom,.site-footer{color:rgba(247,245,240,.7)}
.footer__links a:hover{color:var(--saffron-400)}
.site-footer{background:var(--indigo-800)}
.footer__crisis{background:rgba(247,245,240,.05);border-color:rgba(247,245,240,.16);color:rgba(247,245,240,.82)}
.footer__crisis b{color:var(--saffron-400)}
.footer__bottom{border-top-color:rgba(247,245,240,.16)}
.footer__social a{background:rgba(247,245,240,.08);color:rgba(247,245,240,.75)}
/* Do / don't follows green for yes and orange for never (V2 p31) */
.vt__col--do{background:var(--lilac-100);border-color:var(--lilac-300)}
.vt__col--dont{background:var(--saffron-100);border-color:var(--saffron-300)}
.vt__col--dont h4{color:var(--saffron-700)}
.vt__col--dont li::before{color:var(--saffron-700)}
/* Callouts as ivory plates with one coloured hairline */
.callout{background:var(--cream-2);border-color:var(--line);border-left:2px solid var(--lilac-500);border-radius:var(--r-lg)}
.callout--rose{border-left-color:var(--rose-500)}
.callout__q{color:var(--indigo-800);font-weight:400}
/* Quiz + self-check plates */
.quiz,.consult{border-radius:var(--r-xl)}
.q-bar,.chk-progress{background:var(--cream-2)}
.q-choice{background:var(--cream-2);border-color:var(--line)}
.chk-opt{background:var(--cream-2)}
.chk-opt.is-sel{border-color:var(--lilac-500);background:var(--lilac-100);color:var(--lilac-700)}
.chk-result{border-top-color:var(--lilac-500);border-top-width:2px}
.chk-disclaimer{background:var(--cream-2);color:var(--ink-500)}
.daycell{background:var(--cream-2);border-color:var(--line)}
.daycell.on{background:var(--indigo-700);border-color:var(--indigo-700)}
.daycell.on .dow{color:var(--saffron-400)}
.slot{background:var(--cream-2)}
.appui__ey{color:var(--saffron-600);letter-spacing:.18em}
.appbtn--ghost{color:var(--indigo-700)}
.pill-note{background:var(--lilac-100);color:var(--lilac-700)}
.acard__tag{background:var(--ivory);color:var(--indigo-800)}
.dtable thead th{background:var(--indigo-800)}
.feature-article{background:var(--indigo-800)}
.feature-article p{color:rgba(247,245,240,.8)}
.form-done__ic{background:var(--lilac-100);color:var(--lilac-700)}
.subscribe input:focus,.input:focus,.textarea:focus,.select:focus{border-color:var(--rose-500);box-shadow:0 0 0 3px var(--rose-100)}
/* ---------- Paper white is the ground (V2 p18) ----------
Every section band is white. Ivory stays the secondary surface: cards,
plates, chips and controls, which is what gives the white page its texture. */
.band--ivory,.band--cream2,.phero--cream{background:#FFFFFF}
/* Two light bands in a row need a hairline, or the structure disappears */
.band--ivory+.band--ivory,.band--ivory+.band--cream2,
.band--cream2+.band--cream2,.band--cream2+.band--ivory,
.band--ivory+.band:not([class*="--"]),.band--cream2+.band:not([class*="--"]),
.band:not([class*="--"])+.band--ivory,.band:not([class*="--"])+.band--cream2,
.band:not([class*="--"])+.band:not([class*="--"]){border-top:1px solid var(--line)}
/* ═══════════════════════════════════════════════════════════════════
V2 COMPLIANCE PASS — gaps found auditing the site against the book
═══════════════════════════════════════════════════════════════════ */
/* 1. Horizontal lockup: icon and wordmark side by side, no .com.
36px clears the 32px symbol minimum from the guidelines (p14). */
.nav__logo img{height:36px}
.footer__logo{height:34px}
@media(max-width:420px){.nav__logo img{height:32px}}
/* 2. Type. The book sets DM Sans 300 for display and forbids negative
tracking; the site was running 600 weight at -0.012em. */
h1,h2{font-weight:300;letter-spacing:.012em}
h3{font-weight:400;letter-spacing:.01em}
h4,h5{font-weight:500;letter-spacing:.01em}
.hero h1,.phero h1{font-weight:300;letter-spacing:.02em}
.bigquote{font-weight:300;letter-spacing:.015em}
.prose h2,.prose h3{letter-spacing:.012em}
.reframe__q,.feeltile__q,.callout__q,.faq__q,.drawer__toggle,.drawer__simple{font-weight:400;letter-spacing:.01em}
.stat__n{font-weight:300;letter-spacing:.015em}
.step__n{font-weight:400}
.prose blockquote{font-weight:300;letter-spacing:.012em}
/* small labels: the book sets these at 500, not 800 */
.eyebrow,.tcard__pron,.tldr__label,.acard__tag,.dtable caption,.mega__col-title{font-weight:500}
.card__link,.feeltile__go,.tcard__link,.idcard__go{font-weight:500}
.btn{font-weight:500}
/* 3. Photography. The book asks for warm, available light, slightly
under-exposed. The site was desaturating every image to grey. */
.hero__frame img,.idcard img,.split__media img,.tcard__photo img,
.acard__pic img,.mini-t img,.imgwrap img{
filter:saturate(.94) contrast(.97) sepia(.05) brightness(.99)}
/* ═══════════════════════════════════════════════════════════════════
ILLUSTRATION SYSTEM
Line art carries every editorial and emotional image. Photography is
reserved for the founders and the team, where a real face is the point.
These are drawings on white, so they sit CONTAINED on a light panel
rather than cropped and graded like a photograph.
═══════════════════════════════════════════════════════════════════ */
.hero__frame img,.idcard img,.acard__pic img,.split__media > img[src*="/webp/"]{
object-fit:contain;filter:none}
/* Hero: the drawing sits on a white plate against the navy ground */
.hero__frame{background:#fff;border:0;padding:12px;box-shadow:var(--sh-xl)}
.hero__frame img{width:100%;height:100%}
/* Identity cards: illustration above, words below. No dark overlay,
because line art cannot carry reversed type the way a photograph can. */
.idcard{background:#fff;border:1px solid var(--line);color:var(--ink-900);
padding:0;min-height:0;isolation:auto;justify-content:flex-start;
transition:transform .18s,box-shadow .18s,border-color .18s}
.idcard::after{display:none}
.idcard img{position:static;z-index:auto;width:100%;height:200px;
object-fit:contain;padding:16px 16px 0}
.idcard h3{color:var(--ink-900);font-size:22px;padding:16px 22px 0}
.idcard p{color:var(--ink-500);padding:0 22px;margin:8px 0 0}
.idcard .idcard__go{color:var(--rose-600);padding:0 22px 22px;margin-top:auto}
.idcard:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--rose-300)}
.idcard.no-img{background:#fff}
/* Article and split panels.
Bound the drawing rather than stretch it: a percentage height against an
auto grid row is cyclic, so it resolves to the image's intrinsic square
and overflows. And the drawings are square, so a 16:9 well would strand
them in whitespace — 4:3 keeps them the size of the card. */
/* background-COLOR, not the shorthand: the shorthand also resets
background-image and wiped the variants declared above. */
.acard__pic{background-color:#fff;background-image:none;display:grid;
grid-template-rows:minmax(0,1fr);place-items:center;padding:10px;aspect-ratio:4/3}
.feature-article__pic{background-color:#fff;background-image:none;display:grid;
grid-template-rows:minmax(0,1fr);place-items:center;padding:18px}
.feature-article__pic img{width:100%;height:100%;min-height:0;object-fit:contain;filter:none}
.acard__pic img{width:100%;height:100%;min-height:0;object-fit:contain}
/* only the split panels that actually hold a drawing; the others carry
the phone mock-up and must stay transparent */
.split__media:has(> img[src*="/webp/"]){background:#fff;border:1px solid var(--line);padding:16px;box-shadow:none}
/* Team photography keeps its warm grade; nothing else is a photograph */
.tcard__photo img,.mini-t img,.byline img,.author-card img{
filter:saturate(.94) contrast(.97) sepia(.05) brightness(.99)}
/* ═══════════════════════════════════════════════════════════════════
WHITE HERO
The drawings carry a white ground, so a white hero lets them sit in
the page instead of on a plate floating over navy.
═══════════════════════════════════════════════════════════════════ */
.hero{background:#fff;color:var(--ink-900);border-bottom:1px solid var(--line)}
.hero h1{color:var(--ink-900)}
.hero h1 em{color:var(--rose-600)}
.hero__sub{color:var(--ink-500)}
.hero__frame{background:transparent;border:0;padding:0;box-shadow:none;overflow:visible}
.hero::after{background-image:url("assets/fenweh_symbol_navy.svg");opacity:.05}
/* controls need the light-ground treatment back */
.hero .btn--primary{background:var(--indigo-700);color:var(--ivory)}
.hero .btn--primary:hover{background:var(--indigo-800);color:var(--ivory)}
.hero .btn--ghost{color:var(--indigo-700);box-shadow:inset 0 0 0 1.6px var(--line-2)}
.hero .btn--ghost:hover{background:var(--ivory);color:var(--indigo-800);box-shadow:inset 0 0 0 1.6px var(--indigo-300)}
.hero .chip{background:var(--ivory);color:var(--ink-700);box-shadow:inset 0 0 0 1px var(--line)}
.hero .eyebrow{background:var(--saffron-100);color:var(--indigo-900)}
/* ═══════════════════════════════════════════════════════════════════
V2 GROUND SYSTEM — two grounds, navy is ink
Paper white and ivory alternate. Navy never fills a band; it is the
ink, the mark, and the closing footer. Colour lives in the artwork.
═══════════════════════════════════════════════════════════════════ */
.band{background:#fff}
.band--cream2,.band--ivory{background:var(--ivory)}
.band--indigo,.band--night{background:var(--ivory);color:var(--ink-900)}
.band--indigo h1,.band--indigo h2,.band--indigo h3,.band--indigo h4,
.band--night h1,.band--night h2,.band--night h3,.band--night h4{color:var(--ink-900)}
.band--indigo .lead,.band--night .lead,.band--indigo .muted,.band--night .muted{color:var(--ink-500)}
.band--indigo .eyebrow,.band--night .eyebrow{background:var(--saffron-100);color:var(--indigo-900)}
.band--indigo em,.band--night em{color:var(--rose-600)}
.band--indigo .card,.band--night .card{background:#fff;border-color:var(--line);color:var(--ink-900)}
.band--indigo .card p,.band--night .card p{color:var(--ink-900)}
.band--indigo .reframe__card,.band--night .reframe__card{background:#fff;border-color:var(--line)}
.band--indigo .reframe__q,.band--night .reframe__q{color:var(--ink-900)}
.band--indigo .reframe__a,.band--night .reframe__a{color:var(--ink-500)}
.band--indigo .stat__n,.band--night .stat__n{color:var(--rose-600)}
.band--indigo .btn--primary,.band--night .btn--primary,
.hero .btn--primary,.phero:not(.phero--cream) .btn--primary{background:var(--x-coral);color:var(--indigo-900)}
.band--indigo .btn--ghost,.band--night .btn--ghost,
.hero .btn--ghost,.phero:not(.phero--cream) .btn--ghost{color:var(--indigo-700);box-shadow:inset 0 0 0 1.6px var(--line-2)}
.band--indigo .btn--ghost:hover,.band--night .btn--ghost:hover,
.hero .btn--ghost:hover,.phero:not(.phero--cream) .btn--ghost:hover{background:#fff;color:var(--indigo-900)}
.phero:not(.phero--cream){background:var(--ivory);color:var(--ink-900)}
.phero:not(.phero--cream) h1,.phero:not(.phero--cream) h2{color:var(--ink-900)}
.phero:not(.phero--cream) .phero__sub,.phero:not(.phero--cream) .lead{color:var(--ink-500)}
/* Actions: coral carries the primary, ink outlines the rest. */
.btn--primary,.btn--indigo{background:var(--x-coral);color:var(--indigo-900)}
.btn--primary:hover,.btn--indigo:hover{background:var(--saffron-500);color:var(--ivory)}
.btn--light{background:var(--indigo-700);color:var(--ivory)}
/* Small navy fills, re-grounded */
.step__n{background:var(--ivory);color:var(--indigo-700);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.daycell.on{background:var(--x-coral);border-color:var(--x-coral)}
.daycell.on .dow{color:var(--indigo-900)}
.daycell.on .dn{color:var(--indigo-900)}
.dtable thead th{background:var(--ivory);color:var(--ink-900);border-bottom:1.5px solid var(--line-2)}
.mega__feature{background:var(--ivory);color:var(--ink-900)}
.mega__feature b{color:var(--ink-900)}
.mega__feature span{color:var(--ink-500)}
.feature-article{background:#fff;border:1px solid var(--line);color:var(--ink-900)}
.feature-article p{color:var(--ink-500)}
.tcard__photo,.split__media,.acard__pic,.hero__frame{background:var(--ivory)}
.img-fallback.idcard-fb{background:var(--ivory)!important;
background-image:url("assets/fenweh_symbol_navy.svg")!important}
/* Device mock: drawn, not moulded — matches the line-art register */
.phone{background:#fff;box-shadow:inset 0 0 0 2px var(--indigo-700),var(--sh-lg)}
.phone__notch{background:var(--indigo-700)}
/* ── Drawings sit on the page, never on a plate ────────────────────
No well, no card ground, no tint behind the line art. The band's own
ground is the only surface. */
.acard__pic,.feature-article__pic,.hero__frame,.split__media,
.tcard__photo,.idcard img,.imgwrap{background:transparent;background-color:transparent;background-image:none}
.split__media:has(> img[src*="/webp/"]),
.acard__pic:has(> img[src*="/webp/"]),
.feature-article__pic:has(> img[src*="/webp/"]){
background:transparent;border:0;box-shadow:none;padding:0}
.idcard img{padding:0}
.idcard{background:#fff}
/* photographs still need a holding ground while they load */
.tcard__photo{background:var(--ivory)}
/* ── The contour panel ─────────────────────────────────────────────
Fourteen values around one centre. Used once, where the site says
it leads with who you are: the graphic is that sentence, drawn. */
.thesis{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.thesis{grid-template-columns:1.05fr .95fr;gap:56px}}
.thesis__panel{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);display:block;width:100%}
.thesis__legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.thesis__legend span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
color:var(--ink-500);background:#fff;border:1px solid var(--line);
border-radius:var(--r-full);padding:6px 13px}
.thesis__legend i{width:9px;height:9px;border-radius:50%;flex:none}
.btn--light,.appbtn--mari{background:var(--x-coral);color:var(--indigo-900)}
.btn--light:hover,.appbtn--mari:hover{background:var(--saffron-500);color:var(--ivory)}
/* The mark, opened out, is the hero image. No frame, no plate. */
.hero__frame{background:transparent;border:0;padding:0;box-shadow:none;overflow:visible;aspect-ratio:4/3}
.hero__frame img{width:100%;height:100%;object-fit:contain;filter:none}
@media(min-width:900px){.hero__frame{aspect-ratio:4/3}}
/* The hero holds the mark itself, so the watermark is one mark too many. */
.hero::after{display:none}
.hero__spark{display:none}
/* Brand Gray #8C8C89 is a swatch colour; as body text on ivory it reads
3.09:1. Secondary copy uses a darker member of the same neutral ramp
so it clears 4.5:1 on both grounds. */
:root{--ink-500:#6B6B68}
.muted,.lead{color:var(--ink-500)}
.card__link,.feeltile__go,.tcard__link,.idcard__go,.acard__more{color:#A8451F}
.daycell .dow{color:#6B6B68}
/* ═══════════════════════════════════════════════════════════════════
LIGHT-GROUND TEXT
Accents authored for the old navy grounds. Those grounds are ivory
now, so #F0906A rendered at 2.17:1. Everything below is re-pointed
to the ink-side members of the same families.
═══════════════════════════════════════════════════════════════════ */
.hero h1 em,.phero h1 em,.phero:not(.phero--cream) h1 em{color:var(--rose-600);font-style:italic}
.hero .eyebrow,.phero:not(.phero--cream) .eyebrow,
.band--indigo .eyebrow,.band--night .eyebrow{background:transparent;color:var(--saffron-700)}
.phero:not(.phero--cream) h1,.phero:not(.phero--cream) h2,.phero:not(.phero--cream) h3{color:var(--ink-900)}
.phero:not(.phero--cream) .lead,.phero:not(.phero--cream) .phero__sub,
.phero:not(.phero--cream) .muted,.phero:not(.phero--cream) p{color:var(--ink-500)}
.phero:not(.phero--cream) .breadcrumb,.phero:not(.phero--cream) .breadcrumb a{color:var(--ink-500)}
.phero:not(.phero--cream) .chip{background:#fff;color:var(--ink-700);box-shadow:inset 0 0 0 1px var(--line)}
.band--indigo .bigquote,.band--night .bigquote{color:var(--ink-900)}
.band--indigo .bigquote .hl,.band--night .bigquote .hl,
.band--indigo .stat__n,.band--night .stat__n{color:var(--rose-600)}
.band--indigo .stat__l,.band--night .stat__l,
.band--indigo .checklist li,.band--night .checklist li,
.band--indigo p,.band--night p{color:var(--ink-500)}
.band--indigo li,.band--night li{color:var(--ink-700)}
.idcard p{color:var(--ink-500)}
.idcard h3{color:var(--ink-900)}
.idcard .idcard__go{color:#A8451F}
/* Hero mark: the contours are animated in place, so the SVG is inline
and sized by its box rather than loaded as an image. */
#heroContour{cursor:crosshair;touch-action:pan-y}
.hero__mark{display:block;width:100%;height:100%;overflow:visible}
.hero__mark path{will-change:d}
@media(prefers-reduced-motion:reduce){#heroContour{cursor:default}}
/* ── Page-load intro ──────────────────────────────────────────────────
The mark arrives at the size of the page and settles back into the
hero, so the first thing you see is the inside of the logo. While it
is oversized the hero must not clip it and the page must not gain a
scrollbar, hence the temporary overflow changes. */
#heroContour{transform-origin:50% 50%}
html.fw-intro{overflow:hidden}
html.fw-intro body{overflow:hidden}
html.fw-intro .hero{overflow:visible}
/* .hero__in is position:relative with z-index:2, so it forms a stacking
context and traps any z-index set on its children. The mark has to be
lifted at that level to clear the veil, not at .hero__art's. */
html.fw-intro .hero__in{z-index:200}
html.fw-intro .hero__art{z-index:2}
/* The copy stays down for the whole arrival and is revealed by the veil
lifting, so nothing appears while the mark is still oversized. */
html.fw-intro .hero__copy{opacity:0}
/* The page is held behind a plain veil while the mark is oversized, so
the arrival is the only thing on screen. It lifts once the mark lands,
and the content rises very slightly as it goes. */
.fw-veil{position:fixed;inset:0;background:#fff;z-index:150;pointer-events:none;
opacity:1;transition:opacity 800ms ease}
.fw-veil.is-out{opacity:0}
@media(prefers-reduced-motion:reduce){
html.fw-intro .hero__copy{opacity:1}
.fw-veil{display:none}
}
/* ═══════════════════════════════════════════════════════════════════
AESTHETIC PASS — colour discipline and page rhythm
The site had drifted into five competing accents: coral fills, burnt
orange labels, purple text links, cool grey hairlines and an ivory
ground that ran for five sections at a stretch. The book asks for the
opposite: navy as ink and action, one warm accent used sparingly, and
a ground that alternates so the page has a pulse.
═══════════════════════════════════════════════════════════════════ */
/* 1. ACTION IS NAVY. Coral is an accent, never a fill (V2 p35). All three
filled variants had collapsed to the same coral, so a page of
buttons read as one loud colour with no hierarchy. */
.btn--primary,.btn--indigo,.btn--light{background:#1F2430;color:#FFFFFF}
.btn--primary:hover,.btn--indigo:hover,.btn--light:hover{
background:#142536;color:#FFFFFF;transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn--ghost{background:transparent;color:#1F2430;box-shadow:inset 0 0 0 1.5px #D8D3C9}
.btn--ghost:hover{background:#F7F5F0;color:#1F2430;box-shadow:inset 0 0 0 1.5px #1F2430}
/* one accent for inline actions, dark enough to read on white */
.btn--text{color:#C2542A}
.btn--text:hover{color:#1F2430}
/* 2. LABELS ARE QUIET. Thirteen eyebrows on the homepage, every one in
burnt orange, turned a structural label into wallpaper. Neutral
returns them to signposting and lets the accent mean something. */
.eyebrow,.eyebrow--ghost,.eyebrow--lilac,.eyebrow--rose{
color:#6B6B68;font-size:13px;font-weight:500;letter-spacing:.18em}
/* 3. THE PAGE BREATHES. Strict alternation instead of eleven ivory bands
with three whites scattered through them. */
section.band{background:#FFFFFF;border-top:0}
section.band:nth-of-type(even){background:#F7F5F0}
/* the hairline was propping up structure the alternation now provides */
section.band+section.band{border-top:0}
/* 4. WARM HAIRLINES. The borders were #E2E5E9, a cool blue-grey that sits
outside the palette entirely and greys the page down. */
.card,.acard,.tcard,.feeltile,.reframe__card,.faq,.dtable,.subscribe input{
border-color:#E8E4DC}
/* the subtle lift the brand asks for, present at rest rather than only on hover */
.card,.acard,.tcard,.feeltile{box-shadow:var(--sh-sm)}
.card--link:hover,.acard:hover,.feeltile:hover{box-shadow:var(--sh-md)}
/* 5. DEAD WEIGHT. These bands are light now, so a white watermark on them
painted nothing. */
.band--indigo::after,.band--night::after{content:none}
/* 6. Two holdouts from the pass above.
The hero button was still coral through a more specific selector, and
the hairline token itself was #E2E5E9 — a cool blue-grey that greyed
every card, table and input on the site. Fixing the token rather than
the consumers keeps them in step. */
:root{--line:#E8E4DC;--line-2:#D8D3C9}
.hero .btn--primary,.phero .btn--primary,
.hero .btn--indigo,.hero .btn--light{background:#1F2430;color:#FFFFFF}
.hero .btn--primary:hover,.phero .btn--primary:hover{background:#142536;color:#FFFFFF}
.hero .btn--ghost,.phero:not(.phero--cream) .btn--ghost{
color:#1F2430;box-shadow:inset 0 0 0 1.5px #D8D3C9}
.hero .btn--ghost:hover,.phero:not(.phero--cream) .btn--ghost:hover{
background:#F7F5F0;color:#1F2430;box-shadow:inset 0 0 0 1.5px #1F2430}
/* 7. .band--indigo and .band--night are light grounds now, so their
reversed-button treatment is wrong: it was still painting a coral
fill meant for a dark plate. */
.band--indigo .btn--primary,.band--night .btn--primary,
.band--indigo .btn--indigo,.band--night .btn--indigo,
.band--indigo .btn--light,.band--night .btn--light{background:#1F2430;color:#FFFFFF}
.band--indigo .btn--primary:hover,.band--night .btn--primary:hover,
.band--indigo .btn--light:hover,.band--night .btn--light:hover{background:#142536;color:#FFFFFF}
.band--indigo .btn--ghost,.band--night .btn--ghost{
color:#1F2430;box-shadow:inset 0 0 0 1.5px #D8D3C9}
.band--indigo .btn--ghost:hover,.band--night .btn--ghost:hover{
background:#F7F5F0;color:#1F2430;box-shadow:inset 0 0 0 1.5px #1F2430}
/* and their reversed copy colours, which were set for ivory-on-navy */
.band--indigo .lead,.band--night .lead,
.band--indigo .muted,.band--night .muted,
.band--indigo .checklist li{color:var(--ink-700)}
.band--indigo h1,.band--indigo h2,.band--indigo h3,.band--indigo h4,
.band--night h1,.band--night h2,.band--night h3,
.band--indigo .bigquote,.band--night .bigquote{color:var(--ink-900)}
.band--indigo .eyebrow,.band--night .eyebrow{color:#6B6B68}
.band--indigo .stat__n,.band--night .stat__n{color:#C2542A}
/* ═══════════════════════════════════════════════════════════════════
PAGE PARITY — the inner pages were drifting from the homepage
═══════════════════════════════════════════════════════════════════ */
/* 8. The last coral fill. A legacy rule scoped as
.phero:not(.phero--cream) .btn--primary carries specificity 0,3,0
because the :not() argument counts, so it outranked the 0,2,0
override that fixed every other button. Matching the pattern. */
.phero:not(.phero--cream) .btn--primary,
.phero:not(.phero--cream) .btn--indigo,
.phero:not(.phero--cream) .btn--light{background:#1F2430;color:#FFFFFF}
.phero:not(.phero--cream) .btn--primary:hover,
.phero:not(.phero--cream) .btn--indigo:hover,
.phero:not(.phero--cream) .btn--light:hover{background:#142536;color:#FFFFFF}
.phero:not(.phero--cream) .btn--ghost{
background:transparent;color:#1F2430;box-shadow:inset 0 0 0 1.5px #D8D3C9}
.phero:not(.phero--cream) .btn--ghost:hover{
background:#F7F5F0;color:#1F2430;box-shadow:inset 0 0 0 1.5px #1F2430}
/* 9. Inner heroes carried no brand mark at all, so the right-hand half of
every page opened on dead space while the homepage opens on the
contours. The mark is placed as a quiet ground rather than a second
focal point: the homepage keeps the living one. */
.phero{position:relative;overflow:hidden}
.phero>.wrap{position:relative;z-index:1}
.phero::before{
content:"";position:absolute;right:-90px;top:50%;transform:translateY(-50%);
width:460px;height:460px;pointer-events:none;
background:url("assets/fenweh_symbol_outline.svg") center/contain no-repeat;
opacity:.30}
@media(max-width:860px){.phero::before{width:300px;right:-120px;opacity:.10}}
@media(max-width:620px){.phero::before{display:none}}
/* 10. The hero mark and the hero copy were sharing the same space, which
dropped body text to 2.64:1 over the darkest stroke. Opacity cannot
solve it — legibility would need .04, which is invisible. So they
are separated geometrically instead: the copy is capped to the left
column and the mark is confined to the empty right one. The cap is
a reading improvement in its own right; the lead was running to a
70-character measure. */
.phero .wrap>.crumb,.phero .wrap>.eyebrow,.phero .wrap>h1,
.phero .wrap>h2,.phero .wrap>.lead,.phero .wrap>p,
.phero .wrap>.btn-row,.phero .wrap>.chips{max-width:52%}
.phero::before{right:-40px;width:min(430px,40vw);height:min(430px,40vw)}
/* the leftover navy-era ghost: a second mark stacked in the same corner,
invisible on ivory but still fetched on all 14 inner pages */
.phero:not(.phero--cream)::after{content:none}
@media(max-width:860px){
.phero .wrap>.crumb,.phero .wrap>.eyebrow,.phero .wrap>h1,
.phero .wrap>h2,.phero .wrap>.lead,.phero .wrap>p,
.phero .wrap>.btn-row,.phero .wrap>.chips{max-width:56%}
}
@media(max-width:620px){
.phero .wrap>.crumb,.phero .wrap>.eyebrow,.phero .wrap>h1,
.phero .wrap>h2,.phero .wrap>.lead,.phero .wrap>p,
.phero .wrap>.btn-row,.phero .wrap>.chips{max-width:none}
}
/* ═══════════════════════════════════════════════════════════════════
THE EXPRESSIVE REGISTER (book pp. 20-22, 27)
The seven expressive values were defined in :root and then never used,
so half the colour system was missing from the site. The book is
precise about where it goes: outward-facing surfaces where the job is
to attract rather than reassure. Never on crisis, intake, booking or
any clinical page; never behind body copy; never touching the mark.
═══════════════════════════════════════════════════════════════════ */
/* p27 — line art on colour. A figure on a colour block carries TWO values
only: navy ink on one expressive ground, with the ground showing through
what would be white. The block crops the figure rather than letterboxing
it. Captions sit below on paper white, never over the colour. */
.figstrip{display:grid;gap:26px;grid-template-columns:repeat(2,1fr)}
@media(min-width:680px){.figstrip{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.figstrip{grid-template-columns:repeat(5,1fr);gap:22px}}
.figblock{margin:0;display:flex;flex-direction:column;gap:14px}
.figblock__b{aspect-ratio:1;border-radius:var(--r-xl);overflow:hidden;
display:grid;place-items:center;transition:transform .2s ease-out}
.figblock__b img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
filter:none;display:block}
.figblock:hover .figblock__b{transform:translateY(-4px)}
.figblock h3{font-size:19px;font-weight:500;letter-spacing:.01em;margin:0;color:var(--ink-900)}
.figblock p{font-size:16px;color:#6B6B68;margin:0;line-height:1.45}
/* one hue per block, never gradiented together */
.g-pink{background:#F562C0}
.g-coral{background:#F87373}
.g-indigo{background:#7082F5}
.g-yellow{background:#F4CA50}
.g-mint{background:#37DDAE}
.g-cyan{background:#30CBF2}
.g-chalk{background:#CDCDCD}
/* p20 — an expressive block used as a statement surface. Ground, not
accent: fill it and set navy ink on top. All seven sit at mid
luminance, so navy reads and white does not. */
.xblock{border-radius:var(--r-xl);padding:38px 34px;color:#1F2430;
display:flex;flex-direction:column;gap:14px;justify-content:space-between;
min-height:230px}
.xblock h3,.xblock h2,.xblock p,.xblock .eyebrow,.xblock a{color:#1F2430}
.xblock .eyebrow{background:transparent;color:#1F2430;opacity:.72}
.xblock__q{font-family:var(--serif);font-size:clamp(22px,2.5vw,29px);
font-weight:300;line-height:1.22;letter-spacing:.012em;margin:0;text-wrap:balance}
.xblock__go{font-size:16px;font-weight:500;display:inline-flex;align-items:center;gap:7px;
margin-top:auto}
a.xblock{text-decoration:none;transition:transform .2s ease-out}
a.xblock:hover{transform:translateY(-4px);color:#1F2430}
/* 11. Detail-page heroes carry a figure, not just the watermark. On a
paper ground the book keeps the figure in its five-value form
(p27), so these are the original drawings, not the two-value
navy cut used on colour blocks. The contour mark stays behind
them as the ground, dimmed so the two never compete. */
.phero__art{position:absolute;right:2vw;top:50%;transform:translateY(-50%);
width:min(400px,36vw);pointer-events:none;z-index:0}
.phero__art img{width:100%;height:auto;display:block;filter:none}
.phero::before{opacity:.16;right:-70px;width:min(370px,34vw);height:min(370px,34vw)}
@media(max-width:860px){
.phero__art{width:32vw;right:1vw}
.phero::before{opacity:.12}
}
@media(max-width:620px){
.phero__art{position:static;transform:none;width:190px;margin:22px 0 -6px}
}
/* 12. The mark and the figure were landing in the same place, so the
contours cut straight through the drawing. The mark drops back to
what it should be: a large, faint field bleeding off the right
edge, read as page texture rather than a second object. The figure
sits inboard of it and stays the only thing you look at. */
.phero::before{
right:-300px;top:50%;bottom:auto;transform:translateY(-50%);
width:min(640px,62vw);height:min(640px,62vw);opacity:.07}
.phero__art{right:5vw;width:min(360px,33vw)}
@media(max-width:860px){
.phero::before{width:70vw;height:70vw;right:-34vw;opacity:.06}
.phero__art{width:31vw;right:2vw}
}
@media(max-width:620px){
.phero::before{display:none}
.phero__art{position:static;transform:none;width:190px;margin:22px 0 -6px}
}
/* 13. Two bugs in the hero figure, both visible only on the one page whose
wrap is .wrap-narrow (your-anger-isnt-anger).
(a) The art was inserted INSIDE .wrap, so the z-index:1 on .wrap
could not separate them: an absolutely-positioned child paints
above its static siblings whatever the DOM order. The copy is
lifted instead, which fixes it wherever the art happens to sit.
(b) .phero h1 carries max-width:18ch from the original sheet. At
54px that is ~715px, far wider than the 52% column the art assumes,
so the headline ran straight under the drawing. Capping the column
has to beat that rule on every phero, narrow wrap included. */
.phero .wrap>*:not(.phero__art){position:relative;z-index:1}
.phero .wrap>h1,.phero--cream .wrap>h1,.phero .wrap-narrow>h1{max-width:min(52%,18ch)}
@media(max-width:860px){
.phero .wrap>h1,.phero--cream .wrap>h1,.phero .wrap-narrow>h1{max-width:min(56%,18ch)}
}
@media(max-width:620px){
.phero .wrap>h1,.phero--cream .wrap>h1,.phero .wrap-narrow>h1{max-width:18ch}
}
/* 14. Illustrations in a split sat on bare white with nothing holding them.
The contours give the figure a ground to sit in. Scoped with :has()
to illustration wells only — photography keeps its clean frame, and
the book is explicit that the mark never goes behind type. */
.split__media:has(img[src*="/webp/"]),
.split__media:has(img[src*="/art-navy/"]){position:relative;background:transparent;box-shadow:none}
.split__media:has(img[src*="/webp/"])::before,
.split__media:has(img[src*="/art-navy/"])::before{
content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:104%;aspect-ratio:1;pointer-events:none;z-index:0;
background:url("assets/fenweh_symbol_outline.svg") center/contain no-repeat;
opacity:.34}
.split__media:has(img[src*="/webp/"]) img,
.split__media:has(img[src*="/art-navy/"]) img{position:relative;z-index:1}
/* 15. Every dot on the site is the logo's inner core, not a circle. The
shape is applied as a mask so it still takes currentColor and every
existing colour rule keeps working untouched. */
.chip .d,.acard__meta .dot,.byline .bdot,.thesis__legend i,
.reframe__q::before{
border-radius:0;
-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='534' height='395' viewBox='419 449 534 395'%3E%3Cpath d='M 925.15 553.85 C 920.86 544.58 916.08 535.44 910.62 526.82 C 905.16 518.21 899.12 509.81 892.38 502.17 C 885.63 494.54 878.19 487.29 870.18 481.03 C 862.17 474.76 853.4 469.13 844.31 464.58 C 835.22 460.04 825.46 456.36 815.64 453.78 C 805.81 451.21 795.5 449.78 785.34 449.14 C 775.18 448.5 764.84 449 754.68 449.93 C 744.52 450.87 734.38 452.69 724.37 454.75 C 714.36 456.82 704.43 459.44 694.63 462.32 C 684.82 465.21 675.1 468.49 665.52 472.08 C 655.95 475.67 646.5 479.66 637.18 483.87 C 627.87 488.09 618.66 492.6 609.62 497.38 C 600.57 502.16 591.63 507.18 582.93 512.55 C 574.23 517.92 565.73 523.65 557.41 529.6 C 549.09 535.55 541.02 541.86 533.02 548.24 C 525.02 554.62 517.15 561.17 509.4 567.86 C 501.66 574.54 493.9 581.25 486.55 588.35 C 479.2 595.46 471.91 602.72 465.3 610.5 C 458.69 618.28 452.39 626.45 446.87 635.03 C 441.35 643.6 436.23 652.61 432.19 661.95 C 428.14 671.29 424.69 681.12 422.59 691.06 C 420.5 700.99 419.27 711.43 419.61 721.54 C 419.95 731.65 421.34 742.23 424.63 751.72 C 427.92 761.2 433.13 770.57 439.37 778.45 C 445.61 786.32 453.83 793.05 462.08 798.95 C 470.34 804.84 479.65 809.52 488.9 813.81 C 498.15 818.11 507.86 821.59 517.57 824.73 C 527.29 827.88 537.24 830.46 547.22 832.69 C 557.19 834.92 567.3 836.68 577.43 838.11 C 587.55 839.55 597.76 840.5 607.96 841.32 C 618.15 842.13 628.39 842.62 638.61 843.01 C 648.83 843.39 659.07 843.68 669.3 843.64 C 679.53 843.6 689.78 843.42 699.99 842.77 C 710.19 842.11 720.39 841.06 730.53 839.69 C 740.66 838.31 750.74 836.48 760.79 834.54 C 770.84 832.61 780.84 830.42 790.8 828.07 C 800.76 825.73 810.74 823.36 820.54 820.47 C 830.35 817.57 840.18 814.54 849.64 810.7 C 859.1 806.87 868.49 802.56 877.3 797.44 C 886.11 792.33 894.74 786.56 902.52 780 C 910.3 773.45 917.72 766.12 923.98 758.13 C 930.23 750.13 935.75 741.23 940.06 732.05 C 944.37 722.87 947.65 712.94 949.85 703.02 C 952.04 693.1 953.01 682.73 953.21 672.55 C 953.4 662.38 952.41 652.07 951.03 641.96 C 949.66 631.85 947.41 621.8 944.96 611.88 C 942.51 601.96 939.64 592.09 936.34 582.42 C 933.04 572.75 929.43 563.11 925.15 553.85 Z' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='534' height='395' viewBox='419 449 534 395'%3E%3Cpath d='M 925.15 553.85 C 920.86 544.58 916.08 535.44 910.62 526.82 C 905.16 518.21 899.12 509.81 892.38 502.17 C 885.63 494.54 878.19 487.29 870.18 481.03 C 862.17 474.76 853.4 469.13 844.31 464.58 C 835.22 460.04 825.46 456.36 815.64 453.78 C 805.81 451.21 795.5 449.78 785.34 449.14 C 775.18 448.5 764.84 449 754.68 449.93 C 744.52 450.87 734.38 452.69 724.37 454.75 C 714.36 456.82 704.43 459.44 694.63 462.32 C 684.82 465.21 675.1 468.49 665.52 472.08 C 655.95 475.67 646.5 479.66 637.18 483.87 C 627.87 488.09 618.66 492.6 609.62 497.38 C 600.57 502.16 591.63 507.18 582.93 512.55 C 574.23 517.92 565.73 523.65 557.41 529.6 C 549.09 535.55 541.02 541.86 533.02 548.24 C 525.02 554.62 517.15 561.17 509.4 567.86 C 501.66 574.54 493.9 581.25 486.55 588.35 C 479.2 595.46 471.91 602.72 465.3 610.5 C 458.69 618.28 452.39 626.45 446.87 635.03 C 441.35 643.6 436.23 652.61 432.19 661.95 C 428.14 671.29 424.69 681.12 422.59 691.06 C 420.5 700.99 419.27 711.43 419.61 721.54 C 419.95 731.65 421.34 742.23 424.63 751.72 C 427.92 761.2 433.13 770.57 439.37 778.45 C 445.61 786.32 453.83 793.05 462.08 798.95 C 470.34 804.84 479.65 809.52 488.9 813.81 C 498.15 818.11 507.86 821.59 517.57 824.73 C 527.29 827.88 537.24 830.46 547.22 832.69 C 557.19 834.92 567.3 836.68 577.43 838.11 C 587.55 839.55 597.76 840.5 607.96 841.32 C 618.15 842.13 628.39 842.62 638.61 843.01 C 648.83 843.39 659.07 843.68 669.3 843.64 C 679.53 843.6 689.78 843.42 699.99 842.77 C 710.19 842.11 720.39 841.06 730.53 839.69 C 740.66 838.31 750.74 836.48 760.79 834.54 C 770.84 832.61 780.84 830.42 790.8 828.07 C 800.76 825.73 810.74 823.36 820.54 820.47 C 830.35 817.57 840.18 814.54 849.64 810.7 C 859.1 806.87 868.49 802.56 877.3 797.44 C 886.11 792.33 894.74 786.56 902.52 780 C 910.3 773.45 917.72 766.12 923.98 758.13 C 930.23 750.13 935.75 741.23 940.06 732.05 C 944.37 722.87 947.65 712.94 949.85 703.02 C 952.04 693.1 953.01 682.73 953.21 672.55 C 953.4 662.38 952.41 652.07 951.03 641.96 C 949.66 631.85 947.41 621.8 944.96 611.88 C 942.51 601.96 939.64 592.09 936.34 582.42 C 933.04 572.75 929.43 563.11 925.15 553.85 Z' fill='%23000'/%3E%3C/svg%3E");
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
mask-mode:alpha;
background-color:currentColor}
/* the ones that carry their own colour keep it */
.acard__meta .dot,.byline .bdot{background-color:var(--ink-300)}
.reframe__q::before{background-color:var(--rose-500)}
.reframe__card:nth-child(3n+2) .reframe__q::before{background-color:var(--lilac-500)}
.reframe__card:nth-child(3n+3) .reframe__q::before{background-color:var(--saffron-500)}
/* The core is an organic shape, not a disc: it needs size to read, and
it is wider than tall (534:395), so the boxes follow that ratio. At the
old 6px a circle and a pebble look identical. */
.chip .d{width:14px;height:10px}
.acard__meta .dot,.byline .bdot{width:9px;height:7px}
.thesis__legend i{width:16px;height:12px}
.reframe__q::before{width:20px;height:15px;margin-top:.3em}
/* 16. The rings were being cut by the well's own overflow, and sized off
width so the square ran taller than the 4:3 box. Sized off height
instead, so the contour closes inside the column. */
.split__media:has(img[src*="/webp/"]),
.split__media:has(img[src*="/art-navy/"]){overflow:visible}
.split__media:has(img[src*="/webp/"])::before,
.split__media:has(img[src*="/art-navy/"])::before{
width:auto;height:128%;aspect-ratio:1}
/* 17. A row of chips reads as a set, so the cores cycle through the core
palette rather than repeating one colour. Four hues, in the book's
order, so a row of any length stays balanced. */
.chip:nth-of-type(4n+1) .d{background-color:#6E5BA7}
.chip:nth-of-type(4n+2) .d{background-color:#7EA38A}
.chip:nth-of-type(4n+3) .d{background-color:#E9784A}
.chip:nth-of-type(4n+4) .d{background-color:#1F2430}
/* a chip that already carries a hue keeps its own */
.chip--rose .d{background-color:var(--rose-600)}
.chip--lilac .d{background-color:var(--lilac-700)}
.chip--indigo .d{background-color:var(--indigo-700)}
/* 18. The halo behind illustrations was the full three-contour mark, and
the figures' white fills are transparent after the knockout, so all
three lines showed straight through faces and bodies. One contour
only, sized past the artwork, so it frames the drawing instead of
crossing it. */
.split__media:has(img[src*="/webp/"])::before,
.split__media:has(img[src*="/art-navy/"])::before{
background-image:url("assets/fenweh_ring_outer.svg");
height:122%;opacity:.22}
/* 19. The self-check teaser was a 4:3 plate with a 340px column inside it,
so the card was mostly empty. It is a product surface, so it should
look like the real thing: sized to its content, one clear question,
and the progress reading as progress. */
.chkmock{align-self:center;width:100%;background:#FFFFFF;
border:1px solid var(--line);border-radius:var(--r-xl);
box-shadow:var(--sh-md);padding:30px 30px 26px;
display:flex;flex-direction:column;gap:20px}
.chkmock__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.chkmock__label{font-size:14px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--lilac-700)}
.chkmock__count{font-size:15px;color:#6B6B68}
.chkmock__q{font-family:var(--serif);font-size:clamp(21px,2.2vw,26px);
font-weight:300;letter-spacing:.012em;line-height:1.3;color:var(--ink-900);margin:0}
.chkmock__opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:520px){.chkmock__opts{grid-template-columns:repeat(4,1fr)}}
.chkmock__opts .chk-opt{display:grid;place-items:center;text-align:center;
padding:13px 6px;font-size:16px;border-radius:var(--r-md);
border:1px solid var(--line-2);color:var(--ink-700);background:#fff}
.chkmock__opts .chk-opt.is-sel{background:#EEF3EF;border-color:var(--ok);
color:var(--ok);font-weight:500}
.chkmock__bar{height:6px;border-radius:999px;background:var(--cream-2);overflow:hidden}
.chkmock__bar i{display:block;height:100%;border-radius:999px;background:var(--ok)}
.chkmock__note{margin:0;font-size:15px;color:#6B6B68}
/* 20. The halo is one contour, and it travels the same palette as the
hero core so the two read as the same living mark. It is painted
as a mask rather than an so the colour is animatable; the
shape is inlined because masks are CORS-restricted and an external
file is silently dropped. */
@keyframes fwHalo{
0.00%{background-color:#1F2430}
7.14%{background-color:#6E5BA7}
14.29%{background-color:#7082F5}
21.43%{background-color:#30CBF2}
28.57%{background-color:#37DDAE}
35.71%{background-color:#7EA38A}
42.86%{background-color:#F4CA50}
50.00%{background-color:#E9784A}
57.14%{background-color:#F87373}
64.29%{background-color:#F562C0}
71.43%{background-color:#8C8C89}
78.57%{background-color:#CDCDCD}
85.71%{background-color:#F7F5F0}
92.86%{background-color:#142536}
100%{background-color:#1F2430}
}
.split__media:has(img[src*="/webp/"])::before,
.split__media:has(img[src*="/art-navy/"])::before{
background-image:none;
-webkit-mask:url("data:image/svg+xml,") center/contain no-repeat;
mask:url("data:image/svg+xml,") center/contain no-repeat;
background-color:#1F2430;
opacity:.5;
animation:fwHalo 78s linear infinite}
@media(prefers-reduced-motion:reduce){
.split__media:has(img[src*="/webp/"])::before,
.split__media:has(img[src*="/art-navy/"])::before{animation:none}
}
/* 21. A second contour. Both masks use the outer's viewBox, so the middle
ring nests inside it exactly as it does in the mark rather than
being fitted independently and drifting out of register. The inner
one runs the palette a third of a cycle behind, so the pair is
never the same colour at the same moment. */
.split__media:has(img[src*="/webp/"])::after,
.split__media:has(img[src*="/art-navy/"])::after{
content:"";position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);
width:auto;height:128%;aspect-ratio:1;
pointer-events:none;z-index:0;
-webkit-mask:url("data:image/svg+xml,") center/contain no-repeat;
mask:url("data:image/svg+xml,") center/contain no-repeat;
background-color:#7EA38A;
opacity:.5;
animation:fwHalo 78s linear infinite;
animation-delay:-26s}
@media(prefers-reduced-motion:reduce){
.split__media:has(img[src*="/webp/"])::after,
.split__media:has(img[src*="/art-navy/"])::after{animation:none}
}
/* 22. A breeze. Every background contour drifts slowly wherever it sits.
The movement is driven on the independent translate/rotate/scale
properties rather than on transform, because all of these elements
already use transform to centre themselves and animating it would
throw them out of position. Independent properties compose with it
instead of replacing it.
Three variants at co-prime periods, so contours near each other
never fall into step and the motion never reads as a loop. */
@keyframes fwBreezeA{
0% {translate:0 0; rotate:0deg; scale:1}
25% {translate:34px -26px; rotate:2.4deg; scale:1.05}
50% {translate:18px 32px; rotate:-1.8deg; scale:.965}
75% {translate:-30px 14px; rotate:1.2deg; scale:1.035}
100%{translate:0 0; rotate:0deg; scale:1}
}
@keyframes fwBreezeB{
0% {translate:0 0; rotate:0deg; scale:1}
30% {translate:-32px 22px; rotate:-2.6deg; scale:1.045}
60% {translate:26px 30px; rotate:1.7deg; scale:.96}
100%{translate:0 0; rotate:0deg; scale:1}
}
@keyframes fwBreezeC{
0% {translate:0 0; rotate:0deg; scale:1}
40% {translate:52px 34px; rotate:3deg; scale:1.06}
70% {translate:-38px -28px; rotate:-2.2deg; scale:.955}
100%{translate:0 0; rotate:0deg; scale:1}
}
.phero::before{animation:fwBreezeC 23s ease-in-out infinite}
.split__media:has(img[src*="/webp/"])::before,
.split__media:has(img[src*="/art-navy/"])::before{
animation:fwHalo 78s linear infinite, fwBreezeA 17s ease-in-out infinite}
.split__media:has(img[src*="/webp/"])::after,
.split__media:has(img[src*="/art-navy/"])::after{
animation:fwHalo 78s linear infinite, fwBreezeB 21s ease-in-out infinite;
animation-delay:-26s, -7s}
@media(prefers-reduced-motion:reduce){
.phero::before,
.split__media:has(img[src*="/webp/"])::before,
.split__media:has(img[src*="/art-navy/"])::before,
.split__media:has(img[src*="/webp/"])::after,
.split__media:has(img[src*="/art-navy/"])::after{animation:none}
}
/* the marks were too faint for any movement to register */
.phero::before{opacity:.13}
.split__media:has(img[src*="/webp/"])::before,
.split__media:has(img[src*="/art-navy/"])::before,
.split__media:has(img[src*="/webp/"])::after,
.split__media:has(img[src*="/art-navy/"])::after{opacity:.38}
/* 23. The halos are real SVG now, so they can feel the cursor. The old
masked pseudo-elements are retired: a ::before cannot receive a
pointer event, which is the whole reason for the change. The CSS
breeze moves to the injected element. */
.split__media:has(img[src*="/webp/"])::before,
.split__media:has(img[src*="/art-navy/"])::before,
.split__media:has(img[src*="/webp/"])::after,
.split__media:has(img[src*="/art-navy/"])::after{content:none}
.fw-halo{
position:absolute;left:50%;top:50%;
transform:translate(calc(-50% + var(--fwPx,0px)), calc(-50% + var(--fwPy,0px)));
width:auto;height:128%;aspect-ratio:1;z-index:0;
opacity:.40;overflow:visible;
animation:fwBreezeA 17s ease-in-out infinite}
.split__media:has(img[src*="/webp/"]) img,
.split__media:has(img[src*="/art-navy/"]) img{position:relative;z-index:1}
/* the well itself takes the pointer; the artwork must not swallow it */
.split__media:has(img[src*="/webp/"]) img,
.split__media:has(img[src*="/art-navy/"]) img{pointer-events:none}
@media(prefers-reduced-motion:reduce){.fw-halo{animation:none}}
/* 24. The hero contours travel with the scroll. The offset arrives as
custom properties on the .phero (a pseudo-element cannot be
targeted from script) and is composed into the transform alongside
the -50% centring the mark already relies on. The breeze keeps
running on translate/rotate/scale, which compose separately. */
.phero::before{
transform:translate(var(--fwPx,0px), calc(-50% + var(--fwPy,0px))) rotate(var(--fwRo,0deg));
will-change:transform}
@media(prefers-reduced-motion:reduce){
.phero::before{transform:translateY(-50%);will-change:auto}
}
/* 25. The self-check is interactive, so its options need to behave like
controls: a real focus ring, a hover state, and a disabled state
for the beat between answering and the next question. */
.chk-opt{font:inherit;font-weight:500;cursor:pointer;background:#fff;
transition:background .18s,border-color .18s,color .18s,opacity .18s}
.chk-opt:hover:not(:disabled){border-color:#7EA38A;background:#F2F6F3}
.chk-opt:focus-visible{outline:2px solid #1F2430;outline-offset:2px}
.chk-opt:disabled{cursor:default}
.chk-opt:disabled:not(.is-sel){opacity:.45}
.chkmock__bar i{transition:width .34s ease}
/* 26. The recognition markers were cycling three hues, so in a six-card
grid each colour appeared twice and the repeat was obvious. Page 22
keeps the site on the core register, which gives five marks that
are genuinely distinct on ivory: purple, green, orange, gray, navy.
Cycling five over six means only the first returns, and it lands
diagonally opposite rather than beside itself. */
.reframe__q::before{background-color:#6E5BA7}
.reframe__card:nth-child(5n+2) .reframe__q::before{background-color:#7EA38A}
.reframe__card:nth-child(5n+3) .reframe__q::before{background-color:#E9784A}
.reframe__card:nth-child(5n+4) .reframe__q::before{background-color:#8C8C89}
.reframe__card:nth-child(5n+5) .reframe__q::before{background-color:#1F2430}
/* the left-hand accent rails follow the same five, where they are used */
.reframe__card{border-left-color:#6E5BA7}
.reframe__card:nth-child(5n+2){border-left-color:#7EA38A}
.reframe__card:nth-child(5n+3){border-left-color:#E9784A}
.reframe__card:nth-child(5n+4){border-left-color:#8C8C89}
.reframe__card:nth-child(5n+5){border-left-color:#1F2430}
/* the first step needs the same specificity as the legacy 3n rules it is
replacing, or cards 1 and 6 keep inheriting the old orange */
.reframe__card:nth-child(5n+1) .reframe__q::before{background-color:#6E5BA7}
.reframe__card:nth-child(5n+1){border-left-color:#6E5BA7}
/* 27. A pair of blocks stacked inside a split column. Side by side they
were too narrow to read once the illustration took half the row. */
.stack-2{display:grid;gap:16px}
.stack-2 .xblock{min-height:0;padding:24px 26px}
.stack-2 .xblock__q{font-size:22px;line-height:1.24}
/* 28. The Living Archive sits on community, which page 20 names as a
place the expressive range belongs. The book is specific about how:
ground not accent, fill the block, navy ink on top, one hue per
block and never two gradiented together. These were ivory cards
with a hairline of colour on top, which is the accent treatment
the book rules out. */
.xquote{border:0;box-shadow:none;border-radius:var(--r-xl);padding:28px 30px}
/* The attribution was set at 66% navy, which blends to 3.15:1 on the pink
ground and fails at that size. On a mid-luminance ground the ink cannot
be faded, so the hierarchy comes from scale and weight instead: solid
navy reads 4.97:1 on pink and better on the other three. */
.xquote cite,.xquote .muted,.xquote footer,.xquote span{
color:#1F2430;font-style:normal;font-size:14px;font-weight:500;
letter-spacing:.06em;text-transform:uppercase}
.xquote p{text-wrap:pretty}
/* 29. Every nav item hovered to the same orange, so the header read as one
switch rather than five destinations. Each now takes its own core
hue. The raw brand hues are too light as 15px text on white —
green is 2.80:1 and orange 2.90:1 — so each uses its darkened
member with the light tint of the same family behind it. */
@media(min-width:1000px){
/* 1 · Start Here — purple */
.nav__links>.nav__link:first-child:hover,
.nav__links>.nav__link:first-child:focus-visible{background:#EAE5F4;color:#5C4A93}
/* 2 · Therapy — green */
.nav__item:nth-of-type(1):hover .nav__link,
.nav__item:nth-of-type(1):focus-within .nav__link{background:#E7EFE9;color:#4E6B58}
/* 3 · Who It's For — orange */
.nav__item:nth-of-type(2):hover .nav__link,
.nav__item:nth-of-type(2):focus-within .nav__link{background:#FCE6DC;color:#A8451B}
/* 4 · Learn — navy */
.nav__item:nth-of-type(3):hover .nav__link,
.nav__item:nth-of-type(3):focus-within .nav__link{background:#E3E6EB;color:#1F2430}
/* 5 · About — the quiet neutral */
.nav__item:nth-of-type(4):hover .nav__link,
.nav__item:nth-of-type(4):focus-within .nav__link{background:#EFEFEE;color:#4A5460}
/* the panel links follow the hue of the menu they belong to */
.nav__item:nth-of-type(1) .mega__link:hover{background:#E7EFE9}
.nav__item:nth-of-type(1) .mega__link:hover b{color:#4E6B58}
.nav__item:nth-of-type(2) .mega__link:hover{background:#FCE6DC}
.nav__item:nth-of-type(2) .mega__link:hover b{color:#A8451B}
.nav__item:nth-of-type(3) .mega__link:hover{background:#E3E6EB}
.nav__item:nth-of-type(3) .mega__link:hover b{color:#1F2430}
.nav__item:nth-of-type(4) .mega__link:hover{background:#EFEFEE}
.nav__item:nth-of-type(4) .mega__link:hover b{color:#4A5460}
.mega__link{transition:background .14s}
.mega__link b{transition:color .14s}
}
/* 30. The three assurance cards were inconsistent with each other and with
the site: two carried a coloured top rule and one did not, two had a
tinted icon tile and one had a bare glyph, and the icons were generic
stroke pictograms rather than the brand's own shape. They now share
one treatment, and the icon is the logo's core carrying the hue. */
.card--ic{position:relative;overflow:hidden}
.card--ic .card__ic{
width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;
background:color-mix(in srgb,var(--ic) 12%,transparent);margin-bottom:18px;
transition:background .22s cubic-bezier(.22,.61,.36,1)}
.card--ic .card__ic svg{width:20px;height:auto;color:var(--ic);display:block;
transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.card--ic:hover .card__ic{background:color-mix(in srgb,var(--ic) 20%,transparent)}
.card--ic:hover .card__ic svg{transform:scale(1.12) rotate(-6deg)}
/* the hue also arrives as a hairline along the foot on hover, which is how
the rest of the site signals a live surface */
.card--ic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:var(--ic);transform:scaleX(0);transform-origin:left;
transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.card--ic:hover::after{transform:scaleX(1)}
/* ═══════════════════════════════════════════════════════════════════
MOBILE — measured at 390px across the site
═══════════════════════════════════════════════════════════════════
No page overflows horizontally, so the work here is touch and
legibility rather than layout. Two real faults showed up. */
@media(max-width:760px){
/* 1. Touch targets. .btn--text measured 40px and the icon buttons in
the header sat under the 44px minimum. Padding rather than font
size, so the type scale is untouched. */
.btn--text{min-height:44px;padding:12px 6px;align-items:center}
.btn,.nav__link,.faq__q,.drawer__toggle,.catbar a{min-height:44px}
.faq__q{padding-top:16px;padding-bottom:16px}
/* the chips are labels rather than controls, so they keep their size;
only the ones that are genuinely links get the target */
a.chip{min-height:44px;padding-top:11px;padding-bottom:11px}
/* 2. Legibility. An 11px badge and a 12px column heading are readable
on a desktop monitor and not on a phone held at arm's length. */
.acard__tag{font-size:13px;padding:6px 12px}
.footer__grid h4{font-size:13.5px}
.tcard__pin{font-size:13px}
/* .phone__status is a simulated device status bar; 11px is correct there
and it is deliberately excluded from the floor */
.tcard__pron,.dtable caption,.mega__col-title{font-size:12.5px}
.card p,.acard__body p,.tcard__spec{font-size:15.5px}
/* 3. Rhythm. Desktop band padding leaves too much air between sections
once everything is a single column. */
.band{padding-top:52px;padding-bottom:52px}
.phero{padding-top:26px;padding-bottom:38px}
.grid{gap:16px}
h1{line-height:1.08}
.btn-row{gap:10px}
.btn-row .btn{flex:1 1 auto;justify-content:center}
}
@media(max-width:420px){
/* at the narrow end a two-up button row wraps mid-label, so let each
action take the full width rather than break its own text */
.btn-row{flex-direction:column;align-items:stretch}
.btn-row .btn{width:100%}
}
/* ═══════════════════════════════════════════════════════════════════
MOBILE HERO + STICKY ACTION
═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
/* The mark leads on mobile. On a phone the headline is the first thing
in the flow and the artwork sat four screens down, so the brand's
one distinctive asset was effectively missing above the fold. Flex
ordering moves it without touching the source, which keeps the
desktop grid and the reading order for screen readers intact. */
.hero__in{display:flex;flex-direction:column}
.hero__art{order:-1;margin:0 auto 22px;width:min(70vw,300px)}
.hero__art #heroContour,.hero__art svg{width:100%;height:auto;display:block}
.hero{padding-top:8px}
}
/* A single persistent action. Booking is the one thing this site is for,
and on a phone the primary CTA otherwise scrolls away within a screen.
It is hidden on the page it points at, and on the crisis-sensitive
intake flow, so it never nags someone already in the funnel. */
.mcta{display:none}
@media(max-width:760px){
.mcta{
display:block;position:fixed;left:0;right:0;bottom:0;z-index:900;
background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-top:1px solid var(--line);
padding:10px 16px calc(10px + env(safe-area-inset-bottom));
transform:translateY(110%);transition:transform .34s cubic-bezier(.16,1,.3,1)}
.mcta.is-in{transform:translateY(0)}
.mcta .btn{width:100%;min-height:50px;font-size:16px}
/* the bar floats over the page, so the last section needs room to clear it */
body.has-mcta .site-footer{padding-bottom:96px}
}
@media(prefers-reduced-motion:reduce){
.mcta{transition:none}
}
/* ═══════════════════════════════════════════════════════════════════
FIGSTRIP — halo contours instead of filled tiles
═══════════════════════════════════════════════════════════════════
The filled squares were built for two-value navy art. The
illustrations now carry their own colour, so a solid tile behind
them puts colour on colour and flattens the drawing. The ground
becomes paper white and the hue returns as a single stroked halo,
which is the mark's own language: a contour holding something. */
.figblock__b{
aspect-ratio:1;border-radius:0;overflow:visible;background:none !important;
position:relative;display:grid;place-items:center;
transition:transform .25s cubic-bezier(.16,1,.3,1)}
/* No contour behind these. A ring is a circle, and the drawings have
their own silhouette; an outline around them only competes with it.
The illustration sits on paper white and carries its own colour. */
.figblock__b::before,.figblock__b::after{content:none}
.figblock__b img{
position:relative;z-index:1;
width:100%;height:100%;object-fit:contain;transform:none;display:block}
.figblock:hover .figblock__b{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){.figblock__b{transition:none}}
/* hue retained for captions and any future accent use */
.figblock__b.g-pink{color:#F562C0}
.figblock__b.g-coral{color:#F87373}
.figblock__b.g-indigo{color:#7082F5}
.figblock__b.g-yellow{color:#E0A81F}
.figblock__b.g-mint{color:#1FBF93}
.figblock__b.g-cyan{color:#1FA9CC}
.figblock__b.g-chalk{color:#9A9A97}
/* ═══════════════════════════════════════════════════════════════════
WCARD — the illustrated cards added to the deeper pages
═══════════════════════════════════════════════════════════════════ */
.wcard{
margin:0;background:#fff;border-radius:var(--r-xl);
box-shadow:inset 0 0 0 1px var(--line);
padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;
transition:box-shadow .2s ease-out,transform .2s ease-out}
.wcard:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-md)}
.wcard__art{
position:relative;aspect-ratio:4/3;display:grid;place-items:center;margin-bottom:4px}
.wcard__art::before{
content:"";position:absolute;left:50%;top:50%;width:76%;aspect-ratio:1;
transform:translate(-50%,-50%);border-radius:50%;
border:1.5px solid var(--line-2);opacity:.7}
.wcard__art img{position:relative;z-index:1;width:84%;height:84%;object-fit:contain;display:block}
.wcard h3{margin:0;font-size:21px;font-weight:500;letter-spacing:.01em;color:var(--ink-900)}
.wcard p{margin:0;font-size:16.5px;line-height:1.5;color:#6B6B68}
@media(max-width:760px){.wcard{padding:18px 18px 22px}.wcard h3{font-size:20px}}
.wcard__art::before{
content:"";position:absolute;left:50%;top:50%;
width:96%;aspect-ratio:1261/1041;transform:translate(-50%,-50%);
border:0;border-radius:0;opacity:.4;background-color:var(--ink-300);
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201261%201041%22%3E%3Cpath%20d%3D%22M%201028.81%20127.3%20C%201016.06%20114.55%201001.52%20102.91%20986.19%2093.43%20C%20970.87%2083.94%20953.96%2076.15%20936.87%2070.39%20C%20919.78%2064.63%20901.6%2060.89%20883.65%2058.87%20C%20865.7%2056.85%20847.2%2056.83%20829.18%2058.28%20C%20811.15%2059.74%20793.01%2063.05%20775.49%2067.59%20C%20757.96%2072.14%20740.69%2078.42%20724.03%2085.56%20C%20707.36%2092.7%20691.23%20101.35%20675.51%20110.44%20C%20659.79%20119.52%20644.74%20129.84%20629.71%20140.07%20C%20614.68%20150.29%20600.12%20161.22%20585.32%20171.8%20C%20570.53%20182.37%20555.9%20193.19%20540.93%20203.52%20C%20525.97%20213.85%20510.86%20223.98%20495.53%20233.77%20C%20480.21%20243.56%20464.59%20252.89%20449.01%20262.27%20C%20433.42%20271.64%20417.59%20280.61%20402.02%20290.01%20C%20386.46%20299.41%20370.78%20308.66%20355.6%20318.67%20C%20340.43%20328.67%20325.35%20338.94%20310.97%20350.03%20C%20296.59%20361.12%20282.55%20372.81%20269.32%20385.23%20C%20256.09%20397.66%20243.39%20410.82%20231.57%20424.59%20C%20219.74%20438.36%20208.58%20452.85%20198.39%20467.86%20C%20188.19%20482.87%20178.72%20498.54%20170.39%20514.66%20C%20162.07%20530.77%20154.53%20547.49%20148.44%20564.56%20C%20142.34%20581.63%20137.16%20599.28%20133.82%20617.07%20C%20130.49%20634.86%20128.38%20653.22%20128.42%20671.28%20C%20128.47%20689.34%20130.17%20707.84%20134.09%20725.44%20C%20138%20743.03%20144.07%20760.64%20151.92%20776.87%20C%20159.76%20793.1%20169.9%20808.67%20181.13%20822.8%20C%20192.37%20836.94%20205.55%20849.92%20219.32%20861.65%20C%20233.09%20873.39%20248.29%20883.76%20263.75%20893.22%20C%20279.22%20902.68%20295.58%20910.91%20312.1%20918.43%20C%20328.63%20925.94%20345.71%20932.43%20362.89%20938.31%20C%20380.08%20944.19%20397.62%20949.17%20415.21%20953.73%20C%20432.81%20958.28%20450.61%20962.15%20468.45%20965.65%20C%20486.29%20969.15%20504.26%20972.07%20522.24%20974.73%20C%20540.23%20977.39%20558.29%20979.62%20576.36%20981.61%20C%20594.44%20983.6%20612.56%20985.26%20630.69%20986.67%20C%20648.82%20988.09%20666.98%20989.2%20685.14%20990.11%20C%20703.3%20991.01%20721.48%20991.66%20739.66%20992.1%20C%20757.84%20992.54%20776.03%20992.8%20794.22%20992.74%20C%20812.4%20992.68%20830.6%20992.45%20848.77%20991.75%20C%20866.93%20991.04%20885.12%20990.08%20903.22%20988.49%20C%20921.33%20986.89%20939.45%20984.96%20957.41%20982.19%20C%20975.37%20979.42%20993.3%20976.07%201010.96%20971.84%20C%201028.63%20967.61%201046.25%20962.77%201063.39%20956.8%20C%201080.53%20950.83%201097.56%20944.08%201113.79%20936.01%20C%201130.03%20927.95%201146.04%20918.88%201160.78%20908.39%20C%201175.52%20897.9%201189.8%20886.14%201202.25%20873.06%20C%201214.7%20859.99%201226.17%20845.37%201235.48%20829.93%20C%201244.8%20814.5%201252.55%20797.57%201258.13%20780.43%20C%201263.72%20763.29%201267.32%20745.05%201269.01%20727.08%20C%201270.7%20709.12%201270.26%20690.59%201268.27%20672.63%20C%201266.28%20654.66%201262.17%20636.68%201257.07%20619.3%20C%201251.97%20601.92%201245.01%20584.95%201237.67%20568.35%20C%201230.32%20551.75%201221.51%20535.77%201213%20519.7%20C%201204.5%20503.63%201195.2%20487.97%201186.64%20471.93%20C%201178.08%20455.88%201169.38%20439.88%201161.66%20423.43%20C%201153.94%20406.98%201146.79%20390.21%201140.31%20373.24%20C%201133.83%20356.26%201128.41%20338.87%201122.78%20321.58%20C%201117.15%20304.29%201112.36%20286.71%201106.55%20269.49%20C%201100.74%20252.26%201095.22%20234.83%201087.91%20218.23%20C%201080.61%20201.63%201072.57%20185.06%201062.72%20169.91%20C%201052.87%20154.75%201041.56%20140.04%201028.81%20127.3%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%2218%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201261%201041%22%3E%3Cpath%20d%3D%22M%201028.81%20127.3%20C%201016.06%20114.55%201001.52%20102.91%20986.19%2093.43%20C%20970.87%2083.94%20953.96%2076.15%20936.87%2070.39%20C%20919.78%2064.63%20901.6%2060.89%20883.65%2058.87%20C%20865.7%2056.85%20847.2%2056.83%20829.18%2058.28%20C%20811.15%2059.74%20793.01%2063.05%20775.49%2067.59%20C%20757.96%2072.14%20740.69%2078.42%20724.03%2085.56%20C%20707.36%2092.7%20691.23%20101.35%20675.51%20110.44%20C%20659.79%20119.52%20644.74%20129.84%20629.71%20140.07%20C%20614.68%20150.29%20600.12%20161.22%20585.32%20171.8%20C%20570.53%20182.37%20555.9%20193.19%20540.93%20203.52%20C%20525.97%20213.85%20510.86%20223.98%20495.53%20233.77%20C%20480.21%20243.56%20464.59%20252.89%20449.01%20262.27%20C%20433.42%20271.64%20417.59%20280.61%20402.02%20290.01%20C%20386.46%20299.41%20370.78%20308.66%20355.6%20318.67%20C%20340.43%20328.67%20325.35%20338.94%20310.97%20350.03%20C%20296.59%20361.12%20282.55%20372.81%20269.32%20385.23%20C%20256.09%20397.66%20243.39%20410.82%20231.57%20424.59%20C%20219.74%20438.36%20208.58%20452.85%20198.39%20467.86%20C%20188.19%20482.87%20178.72%20498.54%20170.39%20514.66%20C%20162.07%20530.77%20154.53%20547.49%20148.44%20564.56%20C%20142.34%20581.63%20137.16%20599.28%20133.82%20617.07%20C%20130.49%20634.86%20128.38%20653.22%20128.42%20671.28%20C%20128.47%20689.34%20130.17%20707.84%20134.09%20725.44%20C%20138%20743.03%20144.07%20760.64%20151.92%20776.87%20C%20159.76%20793.1%20169.9%20808.67%20181.13%20822.8%20C%20192.37%20836.94%20205.55%20849.92%20219.32%20861.65%20C%20233.09%20873.39%20248.29%20883.76%20263.75%20893.22%20C%20279.22%20902.68%20295.58%20910.91%20312.1%20918.43%20C%20328.63%20925.94%20345.71%20932.43%20362.89%20938.31%20C%20380.08%20944.19%20397.62%20949.17%20415.21%20953.73%20C%20432.81%20958.28%20450.61%20962.15%20468.45%20965.65%20C%20486.29%20969.15%20504.26%20972.07%20522.24%20974.73%20C%20540.23%20977.39%20558.29%20979.62%20576.36%20981.61%20C%20594.44%20983.6%20612.56%20985.26%20630.69%20986.67%20C%20648.82%20988.09%20666.98%20989.2%20685.14%20990.11%20C%20703.3%20991.01%20721.48%20991.66%20739.66%20992.1%20C%20757.84%20992.54%20776.03%20992.8%20794.22%20992.74%20C%20812.4%20992.68%20830.6%20992.45%20848.77%20991.75%20C%20866.93%20991.04%20885.12%20990.08%20903.22%20988.49%20C%20921.33%20986.89%20939.45%20984.96%20957.41%20982.19%20C%20975.37%20979.42%20993.3%20976.07%201010.96%20971.84%20C%201028.63%20967.61%201046.25%20962.77%201063.39%20956.8%20C%201080.53%20950.83%201097.56%20944.08%201113.79%20936.01%20C%201130.03%20927.95%201146.04%20918.88%201160.78%20908.39%20C%201175.52%20897.9%201189.8%20886.14%201202.25%20873.06%20C%201214.7%20859.99%201226.17%20845.37%201235.48%20829.93%20C%201244.8%20814.5%201252.55%20797.57%201258.13%20780.43%20C%201263.72%20763.29%201267.32%20745.05%201269.01%20727.08%20C%201270.7%20709.12%201270.26%20690.59%201268.27%20672.63%20C%201266.28%20654.66%201262.17%20636.68%201257.07%20619.3%20C%201251.97%20601.92%201245.01%20584.95%201237.67%20568.35%20C%201230.32%20551.75%201221.51%20535.77%201213%20519.7%20C%201204.5%20503.63%201195.2%20487.97%201186.64%20471.93%20C%201178.08%20455.88%201169.38%20439.88%201161.66%20423.43%20C%201153.94%20406.98%201146.79%20390.21%201140.31%20373.24%20C%201133.83%20356.26%201128.41%20338.87%201122.78%20321.58%20C%201117.15%20304.29%201112.36%20286.71%201106.55%20269.49%20C%201100.74%20252.26%201095.22%20234.83%201087.91%20218.23%20C%201080.61%20201.63%201072.57%20185.06%201062.72%20169.91%20C%201052.87%20154.75%201041.56%20140.04%201028.81%20127.3%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%2218%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
/* No ring behind the card illustrations. A circle is not a Fenweh
shape, and the drawings already have their own silhouette; an
outline around them only competes with it. The figstrip keeps its
halo because there the contour IS the graphic device. */
.wcard__art::before{content:none !important}
.wcard__art{aspect-ratio:4/3;padding:4px 0}
.wcard__art img{width:92%;height:92%}
.figblock__b::before{
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22117.4%2045.8%201164.3%20958.0%22%3E%3Cpath%20d%3D%22M%201028.81%20127.3%20C%201016.06%20114.55%201001.52%20102.91%20986.19%2093.43%20C%20970.87%2083.94%20953.96%2076.15%20936.87%2070.39%20C%20919.78%2064.63%20901.6%2060.89%20883.65%2058.87%20C%20865.7%2056.85%20847.2%2056.83%20829.18%2058.28%20C%20811.15%2059.74%20793.01%2063.05%20775.49%2067.59%20C%20757.96%2072.14%20740.69%2078.42%20724.03%2085.56%20C%20707.36%2092.7%20691.23%20101.35%20675.51%20110.44%20C%20659.79%20119.52%20644.74%20129.84%20629.71%20140.07%20C%20614.68%20150.29%20600.12%20161.22%20585.32%20171.8%20C%20570.53%20182.37%20555.9%20193.19%20540.93%20203.52%20C%20525.97%20213.85%20510.86%20223.98%20495.53%20233.77%20C%20480.21%20243.56%20464.59%20252.89%20449.01%20262.27%20C%20433.42%20271.64%20417.59%20280.61%20402.02%20290.01%20C%20386.46%20299.41%20370.78%20308.66%20355.6%20318.67%20C%20340.43%20328.67%20325.35%20338.94%20310.97%20350.03%20C%20296.59%20361.12%20282.55%20372.81%20269.32%20385.23%20C%20256.09%20397.66%20243.39%20410.82%20231.57%20424.59%20C%20219.74%20438.36%20208.58%20452.85%20198.39%20467.86%20C%20188.19%20482.87%20178.72%20498.54%20170.39%20514.66%20C%20162.07%20530.77%20154.53%20547.49%20148.44%20564.56%20C%20142.34%20581.63%20137.16%20599.28%20133.82%20617.07%20C%20130.49%20634.86%20128.38%20653.22%20128.42%20671.28%20C%20128.47%20689.34%20130.17%20707.84%20134.09%20725.44%20C%20138%20743.03%20144.07%20760.64%20151.92%20776.87%20C%20159.76%20793.1%20169.9%20808.67%20181.13%20822.8%20C%20192.37%20836.94%20205.55%20849.92%20219.32%20861.65%20C%20233.09%20873.39%20248.29%20883.76%20263.75%20893.22%20C%20279.22%20902.68%20295.58%20910.91%20312.1%20918.43%20C%20328.63%20925.94%20345.71%20932.43%20362.89%20938.31%20C%20380.08%20944.19%20397.62%20949.17%20415.21%20953.73%20C%20432.81%20958.28%20450.61%20962.15%20468.45%20965.65%20C%20486.29%20969.15%20504.26%20972.07%20522.24%20974.73%20C%20540.23%20977.39%20558.29%20979.62%20576.36%20981.61%20C%20594.44%20983.6%20612.56%20985.26%20630.69%20986.67%20C%20648.82%20988.09%20666.98%20989.2%20685.14%20990.11%20C%20703.3%20991.01%20721.48%20991.66%20739.66%20992.1%20C%20757.84%20992.54%20776.03%20992.8%20794.22%20992.74%20C%20812.4%20992.68%20830.6%20992.45%20848.77%20991.75%20C%20866.93%20991.04%20885.12%20990.08%20903.22%20988.49%20C%20921.33%20986.89%20939.45%20984.96%20957.41%20982.19%20C%20975.37%20979.42%20993.3%20976.07%201010.96%20971.84%20C%201028.63%20967.61%201046.25%20962.77%201063.39%20956.8%20C%201080.53%20950.83%201097.56%20944.08%201113.79%20936.01%20C%201130.03%20927.95%201146.04%20918.88%201160.78%20908.39%20C%201175.52%20897.9%201189.8%20886.14%201202.25%20873.06%20C%201214.7%20859.99%201226.17%20845.37%201235.48%20829.93%20C%201244.8%20814.5%201252.55%20797.57%201258.13%20780.43%20C%201263.72%20763.29%201267.32%20745.05%201269.01%20727.08%20C%201270.7%20709.12%201270.26%20690.59%201268.27%20672.63%20C%201266.28%20654.66%201262.17%20636.68%201257.07%20619.3%20C%201251.97%20601.92%201245.01%20584.95%201237.67%20568.35%20C%201230.32%20551.75%201221.51%20535.77%201213%20519.7%20C%201204.5%20503.63%201195.2%20487.97%201186.64%20471.93%20C%201178.08%20455.88%201169.38%20439.88%201161.66%20423.43%20C%201153.94%20406.98%201146.79%20390.21%201140.31%20373.24%20C%201133.83%20356.26%201128.41%20338.87%201122.78%20321.58%20C%201117.15%20304.29%201112.36%20286.71%201106.55%20269.49%20C%201100.74%20252.26%201095.22%20234.83%201087.91%20218.23%20C%201080.61%20201.63%201072.57%20185.06%201062.72%20169.91%20C%201052.87%20154.75%201041.56%20140.04%201028.81%20127.3%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%2218%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22117.4%2045.8%201164.3%20958.0%22%3E%3Cpath%20d%3D%22M%201028.81%20127.3%20C%201016.06%20114.55%201001.52%20102.91%20986.19%2093.43%20C%20970.87%2083.94%20953.96%2076.15%20936.87%2070.39%20C%20919.78%2064.63%20901.6%2060.89%20883.65%2058.87%20C%20865.7%2056.85%20847.2%2056.83%20829.18%2058.28%20C%20811.15%2059.74%20793.01%2063.05%20775.49%2067.59%20C%20757.96%2072.14%20740.69%2078.42%20724.03%2085.56%20C%20707.36%2092.7%20691.23%20101.35%20675.51%20110.44%20C%20659.79%20119.52%20644.74%20129.84%20629.71%20140.07%20C%20614.68%20150.29%20600.12%20161.22%20585.32%20171.8%20C%20570.53%20182.37%20555.9%20193.19%20540.93%20203.52%20C%20525.97%20213.85%20510.86%20223.98%20495.53%20233.77%20C%20480.21%20243.56%20464.59%20252.89%20449.01%20262.27%20C%20433.42%20271.64%20417.59%20280.61%20402.02%20290.01%20C%20386.46%20299.41%20370.78%20308.66%20355.6%20318.67%20C%20340.43%20328.67%20325.35%20338.94%20310.97%20350.03%20C%20296.59%20361.12%20282.55%20372.81%20269.32%20385.23%20C%20256.09%20397.66%20243.39%20410.82%20231.57%20424.59%20C%20219.74%20438.36%20208.58%20452.85%20198.39%20467.86%20C%20188.19%20482.87%20178.72%20498.54%20170.39%20514.66%20C%20162.07%20530.77%20154.53%20547.49%20148.44%20564.56%20C%20142.34%20581.63%20137.16%20599.28%20133.82%20617.07%20C%20130.49%20634.86%20128.38%20653.22%20128.42%20671.28%20C%20128.47%20689.34%20130.17%20707.84%20134.09%20725.44%20C%20138%20743.03%20144.07%20760.64%20151.92%20776.87%20C%20159.76%20793.1%20169.9%20808.67%20181.13%20822.8%20C%20192.37%20836.94%20205.55%20849.92%20219.32%20861.65%20C%20233.09%20873.39%20248.29%20883.76%20263.75%20893.22%20C%20279.22%20902.68%20295.58%20910.91%20312.1%20918.43%20C%20328.63%20925.94%20345.71%20932.43%20362.89%20938.31%20C%20380.08%20944.19%20397.62%20949.17%20415.21%20953.73%20C%20432.81%20958.28%20450.61%20962.15%20468.45%20965.65%20C%20486.29%20969.15%20504.26%20972.07%20522.24%20974.73%20C%20540.23%20977.39%20558.29%20979.62%20576.36%20981.61%20C%20594.44%20983.6%20612.56%20985.26%20630.69%20986.67%20C%20648.82%20988.09%20666.98%20989.2%20685.14%20990.11%20C%20703.3%20991.01%20721.48%20991.66%20739.66%20992.1%20C%20757.84%20992.54%20776.03%20992.8%20794.22%20992.74%20C%20812.4%20992.68%20830.6%20992.45%20848.77%20991.75%20C%20866.93%20991.04%20885.12%20990.08%20903.22%20988.49%20C%20921.33%20986.89%20939.45%20984.96%20957.41%20982.19%20C%20975.37%20979.42%20993.3%20976.07%201010.96%20971.84%20C%201028.63%20967.61%201046.25%20962.77%201063.39%20956.8%20C%201080.53%20950.83%201097.56%20944.08%201113.79%20936.01%20C%201130.03%20927.95%201146.04%20918.88%201160.78%20908.39%20C%201175.52%20897.9%201189.8%20886.14%201202.25%20873.06%20C%201214.7%20859.99%201226.17%20845.37%201235.48%20829.93%20C%201244.8%20814.5%201252.55%20797.57%201258.13%20780.43%20C%201263.72%20763.29%201267.32%20745.05%201269.01%20727.08%20C%201270.7%20709.12%201270.26%20690.59%201268.27%20672.63%20C%201266.28%20654.66%201262.17%20636.68%201257.07%20619.3%20C%201251.97%20601.92%201245.01%20584.95%201237.67%20568.35%20C%201230.32%20551.75%201221.51%20535.77%201213%20519.7%20C%201204.5%20503.63%201195.2%20487.97%201186.64%20471.93%20C%201178.08%20455.88%201169.38%20439.88%201161.66%20423.43%20C%201153.94%20406.98%201146.79%20390.21%201140.31%20373.24%20C%201133.83%20356.26%201128.41%20338.87%201122.78%20321.58%20C%201117.15%20304.29%201112.36%20286.71%201106.55%20269.49%20C%201100.74%20252.26%201095.22%20234.83%201087.91%20218.23%20C%201080.61%20201.63%201072.57%20185.06%201062.72%20169.91%20C%201052.87%20154.75%201041.56%20140.04%201028.81%20127.3%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%2218%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
width:108%;aspect-ratio:1164.3/958.0}
/* ═══════════════════════════════════════════════════════════════════
HERO HEIGHT PARITY
The interior hero sizes itself from its copy, so a one-line headline
(press) came out 140px shorter than a two-line one (our-approach).
Because .phero__art is absolutely positioned and vertically centred,
the 305px drawing then overflowed the shorter section instead of
sitting inside it. A floor tall enough to contain the art keeps every
interior hero on the same footing; taller copy still grows past it.
═══════════════════════════════════════════════════════════════════ */
@media(min-width:621px){
.phero{min-height:560px;display:flex;align-items:center}
.phero>.wrap{width:100%}
}
/* ═══════════════════════════════════════════════════════════════════
CLOSING CTA ILLUSTRATION
The final band is the conversion moment and it was centred type in a
very wide, very empty field. One drawing above the eyebrow closes the
composition without competing with it: modest, centred, and the same
asset on every page, so it costs one cached request site-wide rather
than a new download per page. Sized well below the hero art so the
hierarchy between opening and closing stays intact.
═══════════════════════════════════════════════════════════════════ */
.cta-art{width:200px;margin:0 auto 6px}
.cta-art img{width:100%;height:auto;display:block}
@media(max-width:620px){.cta-art{width:150px}}
/* ═══════════════════════════════════════════════════════════════════
ILLUSTRATION WELLS — authoritative
Renaming assets/art/ to assets/webp/ for the WebP conversion silently
killed every rule keyed on [src*="/art/"], and those rules were what
made these panels behave like drawings rather than photographs. With
them dead the artwork fell back to the base .split__media treatment:
a 4/3 box with object-fit:cover, which crops a square illustration top
and bottom, plus a card ground, a shadow and the photographic colour
grade. Restated here explicitly so a future rename cannot break it
again: the drawing is shown whole, on the band's own ground, ungraded.
═══════════════════════════════════════════════════════════════════ */
.split__media:has(img[src*="/webp/"]){
aspect-ratio:auto;overflow:visible;
background:transparent;background-color:transparent;background-image:none;
border:0;box-shadow:none;border-radius:0;padding:0}
.split__media:has(img[src*="/webp/"]) img{
width:100%;height:auto;max-width:100%;
object-fit:contain;filter:none;display:block}
/* the same fallback reached the card grids and hero frames */
.acard__pic:has(img[src*="/webp/"]),
.feature-article__pic:has(img[src*="/webp/"]),
.hero__frame:has(img[src*="/webp/"]),
.phero__art:has(img[src*="/webp/"]){
background:transparent;border:0;box-shadow:none}
.acard__pic:has(img[src*="/webp/"]) img,
.feature-article__pic:has(img[src*="/webp/"]) img,
.hero__frame:has(img[src*="/webp/"]) img,
.phero__art:has(img[src*="/webp/"]) img{object-fit:contain;filter:none}
/* The contour halo is brand furniture and stays. What goes is the card it
was sitting on: no white panel, no shadow, no crop — the ring sits on
the band's own ground, behind the drawing. */
.split__media .fw-halo{display:block}
/* ── Assurance cards: illustration instead of a colour dot ───────────────
The three cards under the matching form each carried a 44px tinted tile
holding the logo core, which read as a generic dot rather than as
anything of Fenweh's. Each now opens on the drawing that states its
promise: consent and pace, being genuinely heard, grounding in crisis.
The art sits directly on the card ground with no plate behind it,
which is the same rule the illustration wells follow. */
.card--ic .card__art{
height:132px;margin:-4px 0 18px;display:flex;align-items:flex-end;justify-content:flex-start;
transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.card--ic .card__art img{
height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left bottom;display:block}
.card--ic:hover .card__art{transform:translateY(-3px) scale(1.03)}
@media(max-width:900px){.card--ic .card__art{height:116px}}
@media(prefers-reduced-motion:reduce){
.card--ic .card__art{transition:none}
.card--ic:hover .card__art{transform:none}}
/* ═══════════════════════════════════════════════════════════════════
ARTICLE ARTWORK
Long-form pages are not service pages: there is no split hero to put a
drawing beside, so the artwork works editorially instead. A lead plate
under the byline, then a figure at each turn in the argument. Both sit
directly on the band ground with no card, matching the illustration
treatment used everywhere else.
═══════════════════════════════════════════════════════════════════ */
.art-lead{margin:34px auto 0;max-width:430px}
.art-lead img{width:100%;height:auto;display:block}
.art-fig{margin:44px auto 40px;max-width:340px;padding:0}
.art-fig img{width:100%;height:auto;display:block}
@media(max-width:620px){
.art-lead{max-width:300px;margin-top:26px}
.art-fig{max-width:260px;margin:34px auto 30px}
}
/* ═══════════════════════════════════════════════════════════════════
INTRINSIC IMAGE SIZING + CLICKABLE WORK CARDS
═══════════════════════════════════════════════════════════════════ */
/* 1. Every image carries width/height attributes to reserve layout space.
Without height:auto the height attribute wins and the image is
stretched vertically inside any width-constrained box. This is the
root fix, stated globally so no future markup can hit it again. */
img{height:auto}
/* 2. Work cards that lead somewhere. Same surface as the static card,
plus the affordance. Mobile first: single column, art scales with
the card, tap target is the whole card. */
a.wcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;
transition:transform .22s ease, box-shadow .22s ease}
a.wcard:hover{transform:translateY(-3px)}
a.wcard .wcard__link{margin-top:auto;padding-top:14px;font-size:15px;font-weight:650;
color:#1F2430;letter-spacing:.01em}
a.wcard:hover .wcard__link{color:#E9784A}
@media(prefers-reduced-motion:reduce){a.wcard{transition:none}a.wcard:hover{transform:none}}
/* 3. The footer gained a Conditions column. Mobile-first: two columns on
phones, six once there is room. The brand block keeps more width. */
/* ═══════════════════════════════════════════════════════════════════
FOOTER: LOGO SCALES, COLUMNS BREATHE
═══════════════════════════════════════════════════════════════════ */
/* 1. The footer logo was pinned to a fixed height while img{max-width:100%}
clamped its width to the grid track. With object-fit at its default
(fill) the artwork compresses rather than scales, so a track narrower
than the logo needs distorts it horizontally. Same defect class as the
stretched illustrations: never pin one axis and let the other be
clamped. Width-led sizing cannot distort. */
.footer__logo{width:min(100%,178px);height:auto;margin-bottom:16px}
/* 2. Belt and braces for every logo on the site: if a future rule pins a
height inside a narrower box, letterbox instead of squash. */
.nav__logo img,.footer__logo{object-fit:contain}
/* 3. Six link columns at ~111px forced most labels onto two lines in the
900-1200px band. Three columns there gives each label a full line;
six only once the viewport can carry them. */
@media(min-width:900px){.footer__grid{grid-template-columns:1.5fr repeat(2,1fr)}}
@media(min-width:1200px){.footer__grid{grid-template-columns:1.6fr repeat(5,1fr)}}
/* ═══════════════════════════════════════════════════════════════════
CHIPS THAT LEAD SOMEWHERE
Same pill as the static label so the row stays visually even; the
affordance is the hue shift and lift on hover, plus a real focus ring
for keyboard users. A chip never links to the page it sits on.
═══════════════════════════════════════════════════════════════════ */
a.chip{text-decoration:none;color:var(--ink-900);cursor:pointer;
transition:background .18s ease, box-shadow .18s ease, transform .18s ease}
a.chip:hover{background:#FFFFFF;color:#1F2430;transform:translateY(-1px);
box-shadow:inset 0 0 0 1.5px #1F2430, 0 2px 8px rgba(31,36,48,.08)}
a.chip:focus-visible{outline:2px solid #E9784A;outline-offset:2px}
a.chip:hover .d{transform:scale(1.25)}
a.chip .d{transition:transform .18s ease}
@media(prefers-reduced-motion:reduce){
a.chip,a.chip .d{transition:none}
a.chip:hover{transform:none}
a.chip:hover .d{transform:none}
}
/* ═══════════════════════════════════════════════════════════════════
DRAWER: OUT MEANS OUT
The closed drawer was parked off-canvas with transform alone, still
visibility:visible and pointer-events:auto. Two consequences: every
link inside it sat in the keyboard tab order invisibly, and a fixed
transformed element still contributes to the document scroll width,
which is where the horizontal leak came from. body{overflow-x:hidden}
was masking the symptom. Closing it properly fixes both at the root.
═══════════════════════════════════════════════════════════════════ */
.drawer{visibility:hidden;pointer-events:none}
body.menu-open .drawer{visibility:visible;pointer-events:auto}
/* Linked chips need a real touch target. 27px is fine as a desktop
label and far below the 44px minimum once it is a tappable link. */
@media(hover:none),(max-width:760px){
a.chip{min-height:44px;padding:11px 16px;font-size:14px}
.chip-row{gap:10px}
}
/* The hero contour and the phero halo bleed past the right edge by design.
overflow-x:hidden on body alone does not reliably contain them, because
the root element propagates the overflow. overflow-x:clip on html does
contain it and, unlike hidden, does not turn the root into a scroll
container, so position:sticky and the fixed header keep working. */
html{overflow-x:clip}