/* Vesalius full site, draft 1 (2026-11-02).
   site-base.css is Template C's stylesheet, unchanged. This file adds what a multi-page
   site needs: the header with dropdown and full-screen menu, page heroes, breadcrumbs,
   the chapter link at the end of each page, and the blocks carried over from the
   previous vesaliuslabs.com pages. */

/* ---------- header: links, Science dropdown, Menu button on every width ---------- */
.site-header{transition:background .4s,border-color .4s,backdrop-filter .4s,transform .45s var(--ease)}
.site-header.tucked{transform:translateY(-100%)}
.menu-open .site-header{transform:none}
.site-header .wrap{gap:20px}
.nav{gap:24px;align-items:center}
.nav>li{position:relative}
.nav a.active,.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .caret{display:inline-block;width:7px;height:7px;margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.7;transition:transform .3s var(--ease)}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:translateY(0) rotate(225deg)}
.sub{position:absolute;left:50%;top:100%;width:min(640px,80vw);transform:translate(-50%,10px);padding-top:18px;opacity:0;visibility:hidden;transition:opacity .3s,transform .4s var(--ease),visibility .3s}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sub-inner{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(14,13,10,.96);backdrop-filter:blur(16px);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.sub a{display:block;padding:14px 16px;border-radius:12px;color:var(--text)}
.sub a::after{display:none}
.sub a:hover,.sub a:focus-visible{background:rgba(201,169,97,.1)}
.sub a b{display:block;font:400 1.1rem/1.2 var(--serif);margin-bottom:4px}
.sub a span{display:block;font-size:.82rem;color:var(--faint);line-height:1.45}
.sub .feat{grid-row:span 3;position:relative;overflow:hidden;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end}
.sub .feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform 1.2s var(--ease)}
.sub .feat:hover img{transform:scale(1.05)}
.sub .feat::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(12,11,9,.95),transparent 70%)}
.sub .feat b,.sub .feat span{position:relative;z-index:2}
.head-actions{display:flex;align-items:center;gap:12px}
/* board round 2026-11-02 (pin 1): the Menu button shows only where the header links are hidden */
.menu-btn{display:none;gap:10px;cursor:pointer;transition:border-color .3s,color .3s}
.menu-btn:hover{border-color:var(--gold);color:var(--gold-hi)}
.burger{position:relative;width:16px;height:10px}
.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger::before{top:0}.burger::after{top:8px}
.menu-open .burger::before{top:4px;transform:rotate(45deg)}
.menu-open .burger::after{top:4px;transform:rotate(-45deg)}
@media (max-width:1180px){.nav{gap:18px}.nav a{font-size:.82rem}}
@media (max-width:1080px){.menu-btn{display:inline-flex}}
@media (min-width:1081px){.site-menu{display:none!important}}

/* ---------- full-screen menu (the curtain menu James likes on MuseCell and Dezawa) ---------- */
.site-menu{position:fixed;inset:0;z-index:48;background:var(--ground);display:none;overflow-y:auto;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.site-menu.ready{display:block}
.menu-open .site-menu{clip-path:inset(0 0 0 0)}
.site-menu::before{content:"";position:fixed;inset:0;background:radial-gradient(50vw 60vh at 85% 20%,rgba(201,169,97,.1),transparent 70%),radial-gradient(45vw 50vh at 10% 90%,rgba(var(--cool),.12),transparent 70%);pointer-events:none}
.menu-grid{position:relative;max-width:1320px;margin:0 auto;padding:calc(var(--header) + clamp(28px,6vh,64px)) var(--gutter) 48px;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,6vw,90px);min-height:100%}
.menu-list{list-style:none;counter-reset:m}
.menu-list>li{border-bottom:1px solid var(--line-soft);opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.menu-open .menu-list>li{opacity:1;transform:none}
.menu-open .menu-list>li:nth-child(2){transition-delay:.05s}.menu-open .menu-list>li:nth-child(3){transition-delay:.1s}.menu-open .menu-list>li:nth-child(4){transition-delay:.15s}.menu-open .menu-list>li:nth-child(5){transition-delay:.2s}.menu-open .menu-list>li:nth-child(6){transition-delay:.25s}.menu-open .menu-list>li:nth-child(7){transition-delay:.3s}
.menu-list>li>a{display:flex;align-items:baseline;gap:20px;padding:clamp(10px,1.8vh,18px) 0;text-decoration:none;font:400 clamp(1.6rem,min(4vw,5.6vh),3rem)/1.05 var(--serif);letter-spacing:-.015em;transition:color .3s,padding .4s var(--ease)}
.menu-list>li>a::before{counter-increment:m;content:counter(m,decimal-leading-zero);font:500 .78rem var(--sans);letter-spacing:.2em;color:var(--gold);min-width:2.2em}
.menu-list>li>a:hover,.menu-list>li>a[aria-current="page"]{color:var(--gold-hi);padding-left:12px}
.menu-subs{display:flex;flex-wrap:wrap;gap:8px 22px;padding:0 0 16px calc(2.2em + 20px);font-size:.92rem}
.menu-subs a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.menu-subs a:hover{color:var(--gold-hi);border-color:var(--gold)}
.menu-side{display:flex;flex-direction:column;gap:26px;opacity:0;transition:opacity .6s .25s}
.menu-open .menu-side{opacity:1}
.menu-side .pic{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;max-height:46vh;border:1px solid var(--line-soft)}
.menu-side .pic img{width:100%;height:100%;object-fit:cover}
.menu-side .pic span{position:absolute;left:12px;bottom:10px;font-size:.68rem;color:rgba(243,237,225,.85);background:rgba(12,11,9,.7);padding:4px 8px;border-radius:4px}
.menu-side .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:6px}
.menu-side p,.menu-side address{color:var(--muted);font-style:normal;font-size:.95rem}
.menu-side a{color:var(--text)}
.menu-side .btn{align-self:flex-start}
@media (max-width:860px){.menu-grid{grid-template-columns:1fr}.menu-side .pic{display:none}}
body.menu-open{overflow:hidden}

/* ---------- page hero (interior pages) ---------- */
/* board round 2026-11-02 (pin 8): shorter hero, text centred against the picture on every page */
.page-hero{position:relative;min-height:min(56svh,520px);display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:calc(var(--header) + 28px) 0 clamp(36px,5vh,56px)}
.page-hero .ph-media{position:absolute;inset:0 0 0 34%;z-index:-2;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 16%,#000 40%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 16%,#000 40%)}
.page-hero .ph-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroPush 2.4s var(--ease) forwards}
.page-hero .ph-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--ground) 0%,rgba(12,11,9,.8) 25%,rgba(12,11,9,.25) 60%,rgba(12,11,9,.4)),linear-gradient(0deg,var(--ground) 0%,transparent 40%)}
.page-hero::after{content:"";position:absolute;left:-15%;bottom:-40%;width:70%;height:90%;z-index:-1;background:radial-gradient(closest-side,rgba(var(--cool),.26),transparent);pointer-events:none}
.page-hero .wrap{max-width:1320px;position:relative}
.page-hero h1{font-size:clamp(2.3rem,4.4vw,4rem);margin:0 0 18px;max-width:21ch}
.page-hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.page-hero h1 .ln span{display:block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.page-hero h1 .ln:nth-child(2) span{animation-delay:.14s;color:var(--gold-hi)}
.page-hero .lede{max-width:58ch}
.page-hero .ai-tag{top:auto;bottom:18px}
.page-hero.plain{min-height:0;padding-top:calc(var(--header) + clamp(40px,6vh,70px));padding-bottom:clamp(20px,4vh,40px)}
.page-hero.plain .ph-media{display:none}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.78rem;letter-spacing:.06em;color:var(--faint)}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--gold-hi)}
.crumbs span[aria-hidden]{color:var(--gold-deep)}
@media (max-width:760px){.page-hero{min-height:0;display:block;padding-top:0}.page-hero .ph-media{position:relative;inset:auto;height:34svh;min-height:220px;margin-bottom:-40px;-webkit-mask-image:none;mask-image:none}.page-hero .ph-media::before{background:linear-gradient(0deg,var(--ground) 4%,rgba(12,11,9,0) 50%),linear-gradient(180deg,rgba(12,11,9,.6),transparent 40%)}.page-hero.plain{padding-top:calc(var(--header) + 30px)}}
.static .page-hero h1 .ln span,.static .page-hero .ph-media img{transform:none}

/* ---------- shared content blocks ---------- */
.section.tight{padding:clamp(56px,7vw,96px) 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.split.top{align-items:start}
.split .pic{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line-soft)}
.split .pic img{width:100%;height:100%;object-fit:cover}
.split .pic .ai-tag{top:12px;right:12px}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.prose p{color:var(--muted);font-size:1.08rem;line-height:1.75;max-width:66ch}
.prose p+p{margin-top:1.1em}
.prose strong{color:var(--text);font-weight:600}
.prose em{color:var(--text)}
.h-lg{font-size:clamp(2rem,3.6vw,3.1rem)}
.dot{color:var(--gold-hi)}
.kicker{font-size:.8rem;letter-spacing:.14em;color:var(--gold-hi);margin-top:10px}

/* numbered pillars and fact rows */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pillars.three{grid-template-columns:repeat(3,1fr)}
.pillar{position:relative;padding:clamp(26px,3vw,38px);border:1px solid var(--line-soft);border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));transition:border-color .4s,transform .5s var(--ease)}
.pillar:hover{border-color:var(--line);transform:translateY(-3px)}
.pillar .n{font-family:var(--serif);font-size:2.6rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--gold)}
.pillar h3{font-size:clamp(1.4rem,2vw,1.8rem);margin:16px 0 10px}
.pillar p{color:var(--muted)}
.pillar .ico{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold-hi)}
.pillar .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pillars.four{grid-template-columns:repeat(4,1fr);gap:16px}
.team-groups{margin:8px 0 clamp(36px,4vw,56px)}
.team-groups .pillar{display:block;color:inherit;text-decoration:none;padding:clamp(20px,2vw,28px)}
.team-groups .pillar h3{font-size:clamp(1.15rem,1.5vw,1.4rem);margin:0 0 8px}
.team-groups .pillar p{font-size:.95rem}
.team-groups .pillar.on{border-color:var(--gold)}
.leadership .tabs{scroll-margin-top:calc(var(--header) + 16px)}
@media (max-width:960px){.pillars.three,.pillars.four{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.pillars,.pillars.three,.pillars.four{grid-template-columns:1fr}}
.facts{display:grid;gap:14px}
.fact{display:grid;grid-template-columns:200px 1fr;gap:28px;padding:26px 28px;border:1px solid var(--line-soft);border-radius:16px;background:rgba(255,255,255,.025)}
.fact .k{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;padding-top:4px}
.fact p{color:var(--muted)}
@media (max-width:700px){.fact{grid-template-columns:1fr;gap:8px}}
.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tagcard{padding:24px;border:1px solid var(--line-soft);border-radius:16px;background:rgba(255,255,255,.025);transition:border-color .3s}
.tagcard:hover{border-color:var(--line)}
.tagcard .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);font-weight:600}
.tagcard p{color:var(--muted);font-size:.95rem;margin-top:8px}
@media (max-width:860px){.tags{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tags{grid-template-columns:1fr}}

/* editorial bands: image and text alternating (About approach, delivery formats) */
.bands{display:grid;gap:clamp(40px,6vw,90px)}
.band-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);align-items:center}
.band-row:nth-child(even) .pic{order:2}
.band-row .pic{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/11;border:1px solid var(--line-soft)}
.band-row .pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.band-row:hover .pic img{transform:none}
.band-row .pic .ai-tag{top:12px;right:12px}
.band-row .n{font-family:var(--serif);font-size:.95rem;color:var(--gold)}
.band-row .lab{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-left:10px}
.band-row h3{font-size:clamp(1.8rem,3vw,2.6rem);margin:12px 0 14px}
.band-row h4{font:500 1.05rem/1.4 var(--sans);color:var(--gold-hi);margin-bottom:10px}
.band-row p{color:var(--muted);max-width:52ch}
@media (max-width:860px){.band-row{grid-template-columns:1fr}.band-row:nth-child(even) .pic{order:0}}

/* regulatory notes inside pages */
.disc{border-left:2px solid var(--gold);padding:18px 22px;background:rgba(201,169,97,.06);border-radius:0 12px 12px 0;color:var(--muted);font-size:.92rem;line-height:1.65}
.disc .k{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:6px}
.disc p+p{margin-top:.8em}
/* board round 2 (pin 17): footnotes and disclaimers run the full width of their container */
.fine{color:var(--faint);font-size:.86rem}

/* pull quote */
.quote{text-align:center;max-width:22ch;margin:0 auto;font:400 clamp(2rem,4.4vw,3.6rem)/1.12 var(--serif);letter-spacing:-.02em}
.quote::before{content:"\201C";display:block;font-size:4rem;line-height:.6;color:var(--gold);margin-bottom:18px}

/* explore cards (home, science hub) */
.explore{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.explore.four{grid-template-columns:repeat(2,1fr)}
.xcard{position:relative;display:flex;flex-direction:column;min-height:360px;border-radius:20px;overflow:hidden;border:1px solid var(--line-soft);text-decoration:none;background:var(--ground-2);isolation:isolate}
.xcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.62;transform:scale(1.04);transition:transform 1.4s var(--ease),opacity .6s}
.xcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(12,11,9,.96) 22%,rgba(12,11,9,.2) 75%)}
.xcard:hover img{transform:none;opacity:.8}
.xcard .body{margin-top:auto;padding:clamp(22px,2.6vw,32px)}
.xcard .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.xcard h3{font-size:clamp(1.5rem,2.2vw,1.95rem);margin:10px 0 8px}
.xcard p{color:var(--muted);font-size:.96rem}
.xcard .go{display:inline-block;margin-top:14px;font-weight:600;font-size:.88rem;color:var(--gold-hi)}
.xcard .go i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.xcard:hover .go i{transform:translateX(5px)}
.xcard::after{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--gold-hi) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.xcard:hover::after{opacity:1;animation:spin 3s linear infinite}
.xcard .ai-tag{top:12px;right:12px;bottom:auto}
@media (max-width:960px){.explore{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.explore,.explore.four{grid-template-columns:1fr}.xcard{min-height:300px}}

/* home: quality strip */
.q-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-soft);margin-top:clamp(40px,5vw,64px)}
.q-strip li{list-style:none;padding:26px 22px 0 0;border-right:1px solid var(--line-soft);margin-right:22px}
.q-strip li:last-child{border-right:0;margin-right:0}
.q-strip .n{font-family:var(--serif);color:var(--gold)}
.q-strip .lab{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-left:8px}
.q-strip h3{font-size:1.3rem;margin:10px 0 6px}
.q-strip p{color:var(--muted);font-size:.92rem}
@media (max-width:860px){.q-strip{grid-template-columns:1fr 1fr;row-gap:26px}.q-strip li:nth-child(2){border-right:0;margin-right:0}}
@media (max-width:520px){.q-strip{grid-template-columns:1fr}.q-strip li{border-right:0;margin-right:0}}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-weight:600;color:var(--gold-hi);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px}
.more:hover{border-color:var(--gold)}
.more i{font-style:normal;transition:transform .3s var(--ease)}
.more:hover i{transform:translateX(5px)}

/* home: leadership teaser */
.faces{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.faces .person{flex:none}
@media (max-width:760px){.faces{grid-template-columns:1fr 1fr}}

/* CTA band (end of home and some pages) */
.cta-band{position:relative;border:1px solid var(--line);border-radius:26px;overflow:hidden;padding:clamp(34px,5vw,70px);display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center;background:linear-gradient(120deg,rgba(201,169,97,.1),rgba(var(--cool),.12))}
/* board round 2 (pin 20): a generic premium product line in the CTA, one colourway per page.
   Text and buttons sit on the left; the full lineup shows on the right, fading in from the text side. */
.cta-band{grid-template-columns:1fr;padding-right:48%}
.cta-band .btns{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin-top:8px}
.cta-band::before{content:"";position:absolute;top:0;bottom:0;right:0;width:56%;background:url(../shared/img/generated/pl1-navy-gold.webp) 62% 64%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 32%);mask-image:linear-gradient(90deg,transparent,#000 32%);pointer-events:none;transition:transform 1.6s var(--ease)}
.cta-band:hover::before{transform:scale(1.03)}
.cta-band.pl2::before{background-image:url(../shared/img/generated/pl2-black-gold.webp)}
.cta-band.pl3::before{background-image:url(../shared/img/generated/pl3-ivory-gold.webp)}
.cta-band>*{position:relative;z-index:1}
@media (max-width:860px){.cta-band{padding-right:clamp(34px,5vw,70px);padding-bottom:58vw}.cta-band::before{top:auto;width:100%;height:62vw;background-position:68% 70%;-webkit-mask-image:linear-gradient(0deg,#000 55%,transparent);mask-image:linear-gradient(0deg,#000 55%,transparent)}.cta-band .btns{flex-direction:column;align-items:stretch}}
.cta-band h2{position:relative}
.cta-band p{position:relative;color:var(--muted);margin-top:14px;max-width:52ch}
.cta-band .btns{position:relative;display:flex;gap:12px}
@media (max-width:860px){.cta-band .btn{justify-content:center}}

/* in-page tabs (News and Resources) */
.ptabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,4vw,44px)}
.ptab-panel[hidden]{display:none}
.events{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.event{border:1px solid var(--line-soft);border-radius:20px;overflow:hidden;background:var(--ground-2);display:flex;flex-direction:column}
.event .ph{aspect-ratio:16/9;position:relative;overflow:hidden;background:#15120d}
.event .ph img{width:100%;height:100%;object-fit:cover}
.event .body{padding:clamp(22px,2.6vw,32px);display:grid;gap:10px}
.event h3{font-size:1.5rem}
.event p{color:var(--muted)}
.event a.go{color:var(--gold-hi);font-weight:600;text-decoration:none;font-size:.9rem;display:inline-block;padding:6px 0}
@media (max-width:760px){.events{grid-template-columns:1fr}}
.news-item.archive a{cursor:default}
.badge{display:inline-block;margin-left:10px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line-soft);border-radius:999px;padding:3px 8px;vertical-align:middle}

/* leadership: bios */
.person button.open-bio{all:unset;cursor:pointer;display:block;width:100%}
.person button.open-bio:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px;border-radius:18px}
.person .bio-cue{display:inline-block;margin-top:8px;font-size:.78rem;color:var(--gold-hi);opacity:.85}
dialog.bio{margin:auto;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);border:1px solid var(--line);border-radius:22px;background:var(--ground-2);color:var(--text);padding:0;overflow:auto}
dialog.bio::backdrop{background:rgba(5,5,4,.75);backdrop-filter:blur(4px)}
.bio-in{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:clamp(22px,3vw,36px)}
.bio-in .portrait{margin:0}
.bio-in h3{font-size:1.9rem}
.bio-in .rl{color:var(--gold-hi);margin:6px 0 16px;font-size:.92rem}
.bio-in p{color:var(--muted);margin-top:.8em;font-size:.98rem;line-height:1.7}
.bio-close{position:sticky;top:12px;float:right;margin:12px 12px 0 0;background:rgba(12,11,9,.7);color:var(--text);border:1px solid var(--line);border-radius:999px;min-height:40px;padding:0 16px;font:600 .8rem var(--sans);cursor:pointer;z-index:2}
@media (max-width:640px){.bio-in{grid-template-columns:1fr}.bio-in .portrait{max-width:200px}}
.consent-note{margin-top:30px;text-align:center;color:var(--faint);font-size:.88rem}

/* legal pages */
.legal{max-width:78ch}
.legal h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:2.2em 0 .6em}
.legal h3{font-size:1.25rem;margin:1.6em 0 .5em}
.legal p,.legal li{color:var(--muted);line-height:1.75}
.legal p+p{margin-top:1em}
.legal ul,.legal ol{padding-left:1.4em;margin:.8em 0}
.legal li+li{margin-top:.4em}
.legal a{color:var(--gold-hi)}
.legal .updated{color:var(--faint);font-size:.9rem}

/* footer columns */
.foot-cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:clamp(24px,3vw,48px);padding-bottom:34px}
.foot-cols h2,.foot-cols h4{font:600 .72rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.foot-cols ul{list-style:none;display:grid;gap:4px}
.foot-cols li a{color:var(--muted);text-decoration:none;font-size:.92rem;display:inline-flex;min-height:32px;align-items:center}
.foot-cols li a:hover{color:var(--gold-hi)}
.foot-cols .brand img{height:34px;width:auto}
.foot-cols .brand p,.foot-cols .brand address{color:var(--muted);font-size:.92rem;font-style:normal;margin-top:14px}
.foot-cols .brand a{color:var(--text)}
.foot-cols .brand address a{display:inline-block;padding:5px 0}
@media (max-width:960px){.foot-cols{grid-template-columns:1fr 1fr}.foot-cols .brand{grid-column:1/-1}}

/* review sitemap page */
.smap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.smap .node{border:1px solid var(--line-soft);border-radius:16px;padding:20px 22px;background:rgba(255,255,255,.025)}
.smap .node.top{grid-column:1/-1;text-align:center;border-color:var(--line)}
.smap .node h3{font-size:1.35rem}
.smap .node .u{font-size:.78rem;color:var(--gold-hi);letter-spacing:.04em}
.smap .node ul{margin:12px 0 0 1.1em;color:var(--muted);font-size:.9rem}
.smap .node .src{margin-top:12px;font-size:.8rem;color:var(--faint);border-top:1px solid var(--line-soft);padding-top:10px}
@media (max-width:860px){.smap{grid-template-columns:1fr}}
.srctable{width:100%;border-collapse:collapse;font-size:.92rem}
.srctable th,.srctable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.srctable th{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.srctable td{color:var(--muted)}
.srctable td:first-child{color:var(--text);white-space:nowrap}
@media (max-width:760px){.srctable thead{display:none}.srctable tr{display:block;padding:12px 0;border-bottom:1px solid var(--line-soft)}.srctable td{display:block;border:0;padding:4px 0;overflow-wrap:anywhere}.srctable td:first-child{white-space:normal}}

@media (prefers-reduced-motion:reduce){.page-hero h1 .ln span,.page-hero .ph-media img{transform:none}.site-menu{transition:none}.menu-list>li{opacity:1;transform:none}}

/* ---------- arc card slider (board round 2026-11-02, pin 9; home Quality section only for now) ---------- */
.arc{position:relative;margin-top:clamp(40px,6vw,80px)}
.arc-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.arc-nav .tab{padding:11px 20px;font-size:.92rem}
.arc-nav .tab[aria-pressed="true"]{background:rgba(201,169,97,.14);border-color:var(--gold);color:var(--text)}
.arc-step{background:none;border:1px solid var(--line-soft);color:var(--gold-hi);width:44px;height:44px;border-radius:50%;font-size:1.05rem;cursor:pointer;transition:border-color .3s,background .3s}
.arc-step:hover{border-color:var(--gold);background:rgba(201,169,97,.1)}
.arc-viewport{position:relative;overflow:hidden;padding:84px 0 70px;margin-top:8px;outline:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.arc-viewport:focus-visible{box-shadow:inset 0 0 0 2px var(--gold-hi)}
.arc-dial{position:absolute;left:50%;pointer-events:none;overflow:visible}
.arc-dial line{stroke:rgba(201,169,97,.28);stroke-width:1}
.arc-dial line.l{stroke:rgba(230,207,155,.55)}
.arc-stage{position:relative;height:500px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.arc-card{position:absolute;top:0;left:50%;width:clamp(250px,25vw,340px);height:clamp(380px,36vw,480px);transform:translateX(-50%);transform-origin:50% 375%;will-change:transform;backface-visibility:hidden;border-radius:20px;overflow:hidden;border:1px solid var(--line-soft);background:linear-gradient(170deg,#1b1812,#0f0e0b 60%);display:flex;flex-direction:column;transition:border-color .5s,box-shadow .5s,opacity .5s,filter .5s}
.arc-card .ph{position:relative;height:46%;overflow:hidden}
.arc-card .ph img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.arc-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#141210,transparent 55%)}
.arc-card .body{padding:18px clamp(20px,2vw,28px) 24px;display:flex;flex-direction:column}
.arc-card .n{font-family:var(--serif);font-size:2.4rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--gold)}
.arc-card .lab{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hi);margin-top:10px}
.arc-card h3{font-size:clamp(1.3rem,1.7vw,1.6rem);margin:10px 0 8px}
.arc-card p{color:var(--muted);font-size:.93rem;line-height:1.55}
.arc-card[data-status="active"]{border-color:rgba(201,169,97,.6);box-shadow:0 40px 90px -40px rgba(var(--cool),.75),0 0 0 1px rgba(201,169,97,.2)}
.arc-card[data-status="inview"]{opacity:.62;filter:saturate(.7)}
.arc-card[data-status="not-active"]{opacity:.25}
.arc-fade{position:absolute;left:0;right:0;bottom:-1px;height:120px;background:linear-gradient(180deg,transparent,var(--ground));pointer-events:none;z-index:200}
.arc[data-drag="grab"] .arc-stage{cursor:grab}
.arc[data-drag="grabbing"] .arc-stage{cursor:grabbing}
/* before the script runs (or without it): the four cards in a row */
.arc:not(.ready) .arc-stage{display:flex;gap:16px;justify-content:center;height:auto;flex-wrap:wrap}
.arc:not(.ready) .arc-card{position:relative;left:auto;transform:none}
.arc:not(.ready) .arc-card[aria-hidden="true"]{display:none}
@media (max-width:620px){.arc-card{width:250px;height:400px}.arc-viewport{padding-top:64px;-webkit-mask-image:none;mask-image:none}.arc-nav .tab{padding:9px 14px;font-size:.84rem}}
@media (max-width:620px){.arc-step{display:none}}

/* ---------- board round 2 (2026-11-02, second pass) ---------- */

/* pins 11, 23: one arrow sitewide. Solid chevron; on hover it steps forward and a dot trail fills in behind it */
.chev{width:1.55em;height:.95em;flex:none;fill:currentColor;overflow:visible;vertical-align:-.12em;margin-left:-.45em}
.chev.l{transform:scaleX(-1);margin:0 -.45em 0 0}
.chev .cc{transition:transform .5s var(--ease)}
.chev .cd circle{opacity:0;transform:translateX(5px);transition:opacity .35s,transform .5s var(--ease)}
:is(a,button,.xcard,.news-item):is(:hover,:focus-visible) .chev .cc{transform:translateX(3px)}
:is(a,button,.xcard,.news-item):is(:hover,:focus-visible) .chev .cd circle{opacity:1;transform:none}
:is(a,button,.xcard,.news-item):is(:hover,:focus-visible) .chev .c3 circle{transition-delay:0s}
:is(a,button,.xcard,.news-item):is(:hover,:focus-visible) .chev .c2 circle{transition-delay:.06s}
:is(a,button,.xcard,.news-item):is(:hover,:focus-visible) .chev .c1 circle{transition-delay:.12s}
.btn .chev{margin-left:-.2em}
.arc-step{display:inline-grid;place-items:center}
.arc-step .chev{margin:0;width:1.3em}

/* pin 14: Providers hero, the group sits lower and further right so no face is cropped or behind the header button */
.prov-hero .ph-media{top:calc(var(--header) - 6px)}
.prov-hero .ph-media img{width:116%;max-width:none;object-position:50% 0%;margin-left:6%}
@media (max-width:760px){.prov-hero .ph-media{top:auto}.prov-hero .ph-media img{width:100%;margin:0;object-position:40% 10%}}

/* pin 16: feature cards with life. The line icon draws in, a light follows the pointer, the card tilts toward it,
   a gold rule sweeps across the top. Applies to every .pillar grid on the site. */
.pillars{perspective:1200px}
.pillar{overflow:hidden;isolation:isolate;transform-style:preserve-3d;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));transition:border-color .4s,transform .6s var(--ease),box-shadow .6s,opacity .7s var(--ease)}
.pillar::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(201,169,97,.16),transparent 60%);opacity:0;transition:opacity .5s}
.pillar{background:linear-gradient(90deg,transparent,var(--gold-hi),transparent) top center/0% 1px no-repeat,linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));transition:border-color .4s,transform .6s var(--ease),box-shadow .6s,opacity .7s var(--ease),background-size 1.2s .25s var(--ease)}
.pillar.in{background-size:100% 1px,auto}
.pillar::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 65%,var(--gold-hi) 82%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.pillar:hover::after{opacity:1;animation:spin 3s linear infinite}
.pillar:hover{border-color:rgba(201,169,97,.45);box-shadow:0 40px 80px -40px rgba(var(--cool),.6)}
.pillar:hover::before{opacity:1}
.pillar .ico{width:56px;height:56px;border-radius:16px;background:radial-gradient(circle at 30% 20%,rgba(201,169,97,.22),rgba(201,169,97,.04));border:1px solid rgba(201,169,97,.35);transition:transform .6s var(--ease),box-shadow .6s}
.pillar .ico svg{width:26px;height:26px;stroke-dasharray:90;stroke-dashoffset:90;transition:stroke-dashoffset 1.6s .35s var(--ease)}
.pillar.in .ico svg{stroke-dashoffset:0}
.pillar:hover .ico{transform:translateZ(30px) scale(1.06);box-shadow:0 0 30px rgba(201,169,97,.25)}
.pillar .ico~.n{position:absolute;top:clamp(20px,2.4vw,30px);right:clamp(22px,2.6vw,32px);font-size:2.2rem;opacity:.55;transition:opacity .4s,transform .6s var(--ease)}
.pillar:hover .ico~.n{opacity:1;transform:translateX(-4px)}
.pillar .ico~h3{margin-top:22px}
.pillar h3{transition:transform .6s var(--ease)}
.pillar:hover h3{transform:translateZ(18px)}
.static .pillar .ico svg{stroke-dashoffset:0;transition:none}
.static .pillar{background-size:100% 1px,auto}
@media (prefers-reduced-motion:reduce){.pillar .ico svg{stroke-dashoffset:0}.pillar{background-size:100% 1px,auto}}

/* pins 18, 19: Providers, the prescribers who can open an account */
/* board round 3 (pins 39, 40): portraits two above and two below the heading, a gold rule, the copy on the right.
   Role labels sit on a dark glass strip so the gold text reads over any photo. */
.who-grid{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.who-left{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.who-left h2{margin:0;padding:clamp(4px,1vw,12px) 0}
.pv-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.pv-pair figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:18px;border:1px solid var(--line-soft)}
.pv-pair img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;transform:scale(1.04);transition:transform 1.4s var(--ease)}
.pv-pair figure:hover img{transform:scale(1.08)}
.pv-pair figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 10px;text-align:center;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi);font-weight:600;background:rgba(8,7,6,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:1px solid rgba(201,169,97,.28);opacity:0;transform:translateY(100%);transition:opacity .4s,transform .5s var(--ease)}
.pv-pair figure:hover figcaption,.pv-pair figure:focus-within figcaption{opacity:1;transform:none}
.who-rule{background:linear-gradient(180deg,transparent,rgba(201,169,97,.7) 18%,rgba(201,169,97,.7) 82%,transparent)}
.who-grid .prose{align-self:center}
@media (hover:none){.pv-pair figcaption{opacity:1;transform:none}}
@media (max-width:860px){.who-grid{grid-template-columns:1fr;gap:28px}.who-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,97,.7),transparent)}
  .who-left h2{order:-1;padding:0 0 4px}.who-left{gap:12px}.pv-pair figcaption{opacity:1;transform:none;font-size:.62rem;letter-spacing:.12em;padding:9px 6px}}
/* board round 3 (pins 30, 31, 41): the quality wheel gets an intro, more room and centred card text; centred headings and links */
.arc-intro{max-width:760px;margin:0 auto clamp(26px,3vw,40px);text-align:center}
.arc-intro h3{font-size:clamp(1.5rem,2.2vw,2rem);margin:0 0 12px}
.arc-intro p{color:var(--muted);line-height:1.65;margin:0}
.arc-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.arc-card .body{align-items:center;text-align:center}
.center-more{text-align:center}
.section-head.center{text-align:center;justify-items:center}

/* pins 24, 25: scroll animation everywhere. site.js tags headings, text, pictures, buttons and cards that
   are not already animated; they rise in as they reach the screen, cards in a short stagger, and pictures
   open from a soft mask, then drift gently with the scroll. */
/* Premium pass (2026-11-04): one entrance system for every page. site.js tags each element with one
   role: rv-h (heading: words rise line by line), rv-text, rv-img (mask opens, picture settles),
   rv-item (cards), rv-act (buttons and links). Same easing and timings everywhere; the script sequences
   elements that arrive together. Authored .reveal elements use the same look. */
/* Only the "before" state is styled. When an element has arrived, site.js adds .in and later removes
   .rv, so the element returns to its own design (its own opacity, transforms and hover transitions). */
.rv{transition:opacity .8s var(--ease),transform .9s var(--ease)}
.rv:not(.rv-h):not(.rv-img):not(.in){opacity:0;transform:translateY(22px)}
.rv.rv-act:not(.in){transform:translateY(12px)}
.js .reveal.rv-h,.js .reveal.rv-img{opacity:1;transform:none}
.rv-h .w{display:inline-block;transition:opacity .7s var(--ease),transform .95s var(--ease)}
.rv-h:not(.in) .w{opacity:0;transform:translateY(.45em)}
.rv.rv-img{transition:clip-path 1.2s var(--ease)}
.rv.rv-img:not(.in){clip-path:inset(12% 0 0 0)}
.rv.rv-img img,.rv.rv-img video{transition:scale 1.6s var(--ease)}
.rv.rv-img:not(.in) img,.rv.rv-img:not(.in) video{scale:1.06}
.rv:not(.in):focus-within{opacity:1;transform:none;clip-path:none}
.rv-h:not(.in):focus-within .w{opacity:1;transform:none}
[data-par]{will-change:translate}
@media (prefers-reduced-motion:reduce){.rv,.rv-h .w,.rv.rv-img img{transition:none}}
/* Premium pass: one pointer light on every linked card (desktop pointers only; site.js adds .pt-glow) */
.pt{position:relative;isolation:isolate}
.pt-glow{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(360px circle at var(--px,50%) var(--py,50%),rgba(201,169,97,.14),transparent 62%)}
.pt:hover>.pt-glow,.pt:focus-within>.pt-glow{opacity:1}
/* Premium pass: no looping decoration. The spinning gold borders become a still gold edge on hover. */
.xcard:hover::after,.pillar:hover::after{animation:none;background:linear-gradient(rgba(230,207,155,.55),rgba(230,207,155,.55))}
/* board round 3 (pin 38): the physician on the far left of the Providers hero sits outside the heavy fade, on a relit copy of the photo */
.prov-hero .ph-media{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.65) 9%,#000 22%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.65) 9%,#000 22%)}
.prov-hero .ph-media::before{background:linear-gradient(90deg,var(--ground) 0%,rgba(12,11,9,.6) 12%,rgba(12,11,9,.08) 30%,rgba(12,11,9,.3)),linear-gradient(0deg,var(--ground) 0%,transparent 40%)}
/* board round 3 (pin 33): looping hero video over its first-frame image */
.page-hero .ph-media .ph-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.page-hero .ph-media .ph-vid.on{opacity:1}
/* board round 3 (pin 36): certificate pages fade in on the left behind the copy, the product line on the right, no box */
.coa-show{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(460px,44vw,620px);display:flex;align-items:center}
.coa-art{position:absolute;left:-12%;top:50%;width:min(64%,940px);transform:translateY(-50%);z-index:-1;opacity:.17;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 62%,transparent),linear-gradient(0deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 62%,transparent);filter:sepia(.35) saturate(.8)}
.coa-art img{width:100%;height:auto;display:block}
.coa-prod{position:absolute;right:0;top:0;bottom:0;width:54%;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
.coa-prod img{width:100%;height:100%;object-fit:cover;object-position:60% 62%}
.coa-copy{max-width:540px}
.coa-copy h2{margin:0 0 16px}
.coa-copy p{color:var(--muted);line-height:1.7}
.coa-copy .btns{margin:26px 0 18px}
.coa-copy .fine{font-size:.8rem;opacity:.75}
@media (max-width:860px){.coa-show{display:block;padding-bottom:62vw}.coa-art{width:120%;left:-20%;top:12%;transform:none;opacity:.22}.coa-prod{top:auto;width:100%;height:62vw;-webkit-mask-image:linear-gradient(0deg,#000 55%,transparent);mask-image:linear-gradient(0deg,#000 55%,transparent)}}
.step-list .step p+p{margin-top:10px}
/* board round 4 (pin 44): Muse cells page: comparison table, three-card row, references */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(36px,4vw,56px)}
.cards-3 .glass h3{font-size:clamp(1.25rem,1.7vw,1.5rem)}
.cards-3 .glass p{color:var(--muted);line-height:1.6}
.fact strong{color:var(--gold-hi);font-weight:600}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:.95rem}
.cmp th,.cmp td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.cmp thead th{font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--text)}
.cmp tbody th{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;white-space:nowrap}
.cmp td{color:var(--muted)}
.cmp .hl{background:rgba(201,169,97,.08);color:var(--text)}
.cmp thead .hl{color:var(--gold-hi)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.refs{margin:18px 0 0;padding-left:22px;color:var(--muted);font-size:.92rem;line-height:1.7}
.refs li{margin-bottom:8px}
@media (max-width:860px){.cards-3{grid-template-columns:1fr}}
/* board round 4 (pin 43): social icons in the footer */
.site-footer .social{list-style:none;display:flex;gap:12px;margin:18px 0 0;padding:0}
.site-footer .social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);color:var(--gold-hi);transition:border-color .3s,background .3s}
.site-footer .social a:hover{border-color:var(--gold);background:rgba(201,169,97,.1)}
.site-footer .social svg{width:18px;height:18px;fill:currentColor}
/* board round 5 (pin 46): every image hero is the same height on desktop and tablet, matching Providers; text-only utility
   pages (site map, legal) keep their compact hero, and phones keep content height */
@media (min-width:761px){.page-hero:not(.plain){min-height:max(460px,min(56svh,520px))}}
/* AI review round (2026-11-03): an odd last explore card spans the row; a call-to-action band without a product photo */
.explore.four>.xcard:last-child:nth-child(odd){grid-column:1/-1}
.cta-band.plain{padding-right:clamp(34px,5vw,70px)}
.cta-band.plain::before{display:none}
@media (max-width:860px){.cta-band.plain{padding-bottom:clamp(34px,5vw,70px)}}

/* board round 6 (pin 46): one biography page per person */
.bio-page{padding-top:calc(var(--header) + clamp(40px,7vh,84px))}
.bio-grid{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:clamp(28px,5vw,72px);align-items:start;max-width:1120px}
.bio-grid .portrait{margin:0;position:sticky;top:calc(var(--header) + 24px)}
.bio-copy h1{font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1.05}
.bio-copy .rl{color:var(--gold-hi);margin:10px 0 26px;font-size:1rem;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.bio-copy .rl .grp{color:var(--muted);font-size:.86rem}
.bio-copy p:not(.rl):not(.bio-back){color:var(--muted);font-size:1.05rem;line-height:1.75;max-width:66ch;margin-top:1em}
.bio-back{margin-top:34px}
.person a.open-bio{display:block;color:inherit;text-decoration:none;cursor:pointer}
.person a.open-bio:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px;border-radius:18px}
@media (max-width:760px){.bio-grid{grid-template-columns:1fr}.bio-grid .portrait{position:relative;top:auto;max-width:300px}}
/* Delivery Formats hero: keep the product group (right side of the image) in view at every width */
.df-hero .ph-media img{object-position:100% 50%}
/* Research Library (Peptide Platform page, board pin 47) */
.lib-controls{display:grid;gap:18px;padding:clamp(20px,2.4vw,30px);border:1px solid var(--line-soft);border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.lib-search{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:999px;padding:0 20px;background:var(--ground)}
.lib-search svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.6}
.lib-search input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:500 1rem var(--sans);padding:14px 0;outline:none}
.lib-search input::placeholder{color:var(--faint)}
.lib-search:focus-within{border-color:var(--gold)}
.lib-fams{display:flex;flex-wrap:wrap;gap:8px}
.lib-chip{font:600 .8rem/1 var(--sans);color:var(--muted);background:none;border:1px solid var(--line-soft);border-radius:999px;padding:9px 14px;min-height:36px;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.lib-chip .c{color:var(--faint);font-weight:500;margin-left:2px}
.lib-chip:hover{border-color:var(--line);color:var(--text)}
.lib-chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#15110a}
.lib-chip[aria-pressed="true"] .c{color:rgba(21,17,10,.65)}
.lib-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 22px}
.lib-select{display:grid;gap:6px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.lib-select select{font:500 .92rem var(--sans);letter-spacing:0;text-transform:none;color:var(--text);background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;min-width:220px}
.lib-check{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--muted);min-height:44px;cursor:pointer}
.lib-check input{width:18px;height:18px;accent-color:var(--gold)}
.lib-reset{background:none;border:0;color:var(--gold-hi);font:600 .88rem var(--sans);text-decoration:underline;text-underline-offset:4px;min-height:44px;cursor:pointer}
.lib-count{margin:26px 0 6px;color:var(--faint);font-size:.9rem}
.lib-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lib-item{border:1px solid var(--line-soft);border-radius:16px;padding:22px 24px;background:rgba(255,255,255,.015);display:flex;flex-direction:column;gap:10px;transition:border-color .3s}
.lib-item:hover{border-color:var(--line)}
.lib-meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.lib-type{color:var(--faint)}
.lib-type.human{color:var(--gold)}
.lib-fam{color:var(--faint)}
.lib-item h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;line-height:1.4;letter-spacing:0}
.lib-item h3 a{color:var(--text);text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease),color .25s}
.lib-item h3 a:hover{color:var(--gold-hi);background-size:100% 1px}
.lib-item h3 a::after{content:" \2197";color:var(--gold);font-weight:400}
.lib-cite{font-size:.85rem;color:var(--faint);margin:0}
.lib-sum{font-size:.92rem;color:var(--muted);margin:0}
.lib-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.lib-tag{font:600 .74rem/1 var(--sans);color:var(--gold-hi);background:rgba(201,169,97,.08);border:1px solid var(--line);border-radius:999px;padding:7px 11px;min-height:30px;cursor:pointer}
.lib-tag:hover{background:rgba(201,169,97,.18)}
.lib-empty{grid-column:1/-1;color:var(--muted);padding:30px 0}
.lib-more{margin:28px auto 0;display:flex}
@media (max-width:860px){.lib-list{grid-template-columns:1fr}.lib-select select{min-width:0;width:100%}.lib-select{flex:1 1 200px}}

/* ===== Board round 4 (2026-11-04) ===== */
/* pin 69 (site-wide rule): a heading beside a text block sits level with the middle of it */
.split.top{align-items:center}
/* pin 60: buttons built from <button> take the site button look, not the browser's grey */
button.btn{font:inherit;cursor:pointer}
.btn-ghost{background:transparent}
/* pin 57: Science mega menu, one icon per page and the feature card spanning the full height */
.sub{width:min(760px,86vw)}
.sub-inner{grid-template-columns:1.05fr 1fr;gap:4px}
.sub .feat{grid-row:span 4;min-height:290px}
.sub .it{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:center;padding:12px 14px}
.sub .it .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(201,169,97,.06);color:var(--gold-hi);font-style:normal;transition:border-color .3s,background .3s}
.sub .it .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sub .it .tx{display:block;font-size:inherit;color:var(--text);line-height:inherit}
.sub .it:hover .ico,.sub .it:focus-visible .ico{border-color:var(--gold);background:rgba(201,169,97,.14)}
/* version label in every footer, readable so reviewers can tell which draft they are on */
.ver{display:block;text-align:right;font-size:.62rem;letter-spacing:.06em;color:rgba(201,169,97,.85);margin:6px 0 0;padding:0;border:0;background:none}

/* pin 73: the chevron dots no longer slide into the link text on hover (site-wide) */
.chev{margin-left:.3em}
.btn .chev{margin-left:.2em}
.chev.l{margin:0 .3em 0 0}
/* pin 79: the CTA buttons sit side by side on desktop (they were wrapping by a few pixels); they stack only on phones */
@media (min-width:861px){.cta-band .btns{flex-wrap:nowrap;width:max-content;max-width:calc(100% + 26vw)}}
/* SEO round (2026-11-04): the contact form title is now h2 and its step titles h3; same look as before */
.form-card h2{font-size:1.7rem;margin-bottom:8px}
.pane h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:6px 0 20px;letter-spacing:normal;line-height:1.6}
/* Quality round (2026-11-04): the contact emails and the bio "Back to Leadership" link get a taller tap area (WCAG 2.2 target size) from an invisible layer, so nothing moves or repaints */
.ct-channels .mu-fact a,.bio-back .text-link{position:relative}
.ct-channels .mu-fact a::after,.bio-back .text-link::after{content:"";position:absolute;left:0;right:0;top:-1px;bottom:-1px}

/* ---- Premium pass item 4 (2026-11-04): one section rhythm on every page, calmer glows ----
   One spacing scale for all pages (main pages and the science pages used different ones).
   Peptual Blue stays; its glow fields and card shadows are roughly halved so gold leads. */
main .section,main .mu{padding:clamp(72px,9vw,128px) 0}
main .section.tight,main .mu.tight{padding:clamp(48px,6vw,88px) 0}
.section-head{margin-bottom:clamp(32px,4.5vw,56px)}
.glass.cool{border-color:rgba(var(--cool),.28);box-shadow:0 30px 90px -44px rgba(var(--cool),.26)}
.glass.cool::before{background:radial-gradient(400px 220px at var(--mx,50%) var(--my,0%),rgba(var(--cool),.12),transparent 70%)}
.pillar:hover{box-shadow:0 40px 80px -44px rgba(var(--cool),.3)}
.ambient{background:radial-gradient(60vw 50vh at var(--ax,80%) var(--ay,10%),rgba(201,169,97,.07),transparent 70%),radial-gradient(55vw 45vh at var(--bx,10%) var(--by,90%),rgba(var(--cool),.05),transparent 70%)}
/* Premium pass item 5: inner-page image heroes fit short laptop windows such as 1280 x 529 (Michael's
   window). Normal heights keep the board round 5 rule above; only windows under 650 px tall change. */
@media (min-width:761px) and (max-height:650px){.page-hero:not(.plain){min-height:max(360px,min(68svh,420px))}}
/* Premium pass item 6: typography finish. Balanced heading wraps, no single words stranded on a last
   line, long-form paragraphs held to a readable measure (footer disclosures stay full width). */
h1,h2,h3,.statement{text-wrap:balance}
p,li,.lede{text-wrap:pretty}
.prose>p,.lg-body p,.bio-body p{max-width:70ch}
/* Premium pass item 10: two text spots that measured just under 4.5:1 */
.corner{color:rgba(243,237,225,.78)}
.person .rl{color:rgba(243,237,225,.66)}
/* Premium pass item 8: Quality steps stay fully readable; the active step is marked by its gold label and
   number instead of dimming the others to 38% (which also failed contrast). The clip no longer restarts
   when the same step triggers again (site.js). */
.js .step{opacity:1}
.step .lab{transition:color .3s var(--ease)}
.step.active .lab{color:var(--gold-hi)}
.js .step:not(.active) .n{opacity:.45}
/* Premium pass item 5: hero button and text link share one centre line */
.hero-ctas{align-items:center;column-gap:clamp(16px,2vw,28px)}
/* Premium pass item 9: tablet layouts. Contact's three channels sit in one row on tablets instead of a
   long single column; long email addresses wrap inside their column. Phones keep the stacked layout. */
@media (min-width:641px) and (max-width:860px){main .mu-facts.ct-channels{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:0}.ct-channels .mu-fact a{overflow-wrap:anywhere}}
/* ===== Mobile and tablet pass (2026-11-06, Michael) =====
   1. Headline descenders: the line masks were .06em deep and clipped the italic g, p and y on every hero.
      The masks are deeper now, with a matching negative margin so the spacing is unchanged. */
.hero h1 .ln,.page-hero h1 .ln{padding-bottom:.24em;margin-bottom:-.18em}
.hero h1 .ln:nth-child(2) span{padding-bottom:.2em;margin-bottom:-.2em}
.hero h1 .ln span,.page-hero h1 .ln span{transform:translateY(130%)}
.static .hero h1 .ln span,.static .page-hero h1 .ln span{transform:none}
@media (prefers-reduced-motion:reduce){.hero h1 .ln span,.page-hero h1 .ln span{transform:none}}
/* 2. Phones and portrait tablets: one centered column by default. Headings, intros, cards, buttons, notes and
      notices center; multi-paragraph reading text, legal text, forms, tables and the timelines stay left-aligned
      because long centered paragraphs are hard to read. 860px is where the two-column layouts stack. */
@media (max-width:860px){
  main{text-align:center}
  main .lede,main .statement,.cta-band p,.coa-copy,.mu-cta-text{margin-left:auto;margin-right:auto}
  main .mu-rule{margin-left:auto;margin-right:auto;transform-origin:center}
  .section-head{justify-items:center}
  main .prose,main .legal,.lg-toc,.form-card,.lib-controls,.lib-list,.lib-count,.cmp-wrap,.srctable,.refs,main details>:not(summary),
  .step-list,.mu-journey,.sci-fmt .wrap,.smap .node ul,.bio-copy p:not(.rl):not(.bio-back){text-align:left}
  .ct-form .form-card>h2,.ct-form .form-card>.sub,.form-card>h2,.form-card>.sub{text-align:center}
  .hero-ctas{justify-content:center}
  .prov .btn{align-self:center}
  .pillar .ico,.xcard .mu-ico{margin-left:auto;margin-right:auto}
  .q-strip li{padding-right:0}
  .bio-grid .portrait{margin:0 auto}
  .bio-copy .rl{justify-content:center}
  /* spacing: the desktop section rhythm left 144px or more between sections on a phone */
  main .section,main .mu{padding:56px 0}
  main .section.tight,main .mu.tight{padding:40px 0}
  .section-head{margin-bottom:28px}
  .steps{padding-top:8px}
  .cards-2{margin-top:36px}
  .cta-band .btns{flex-wrap:nowrap}
  main .coa-show{padding-bottom:calc(62vw + 24px)}
  main .wap-meta,main .wap-tx summary{justify-content:center}
}
/* page heroes between 761 and 860px keep the desktop layout (picture on the right), so their text stays left */
@media (min-width:761px) and (max-width:860px){
  .page-hero{text-align:left}
  .page-hero .mu-rule,.page-hero .lede{margin-left:0}
  .page-hero .hero-ctas{justify-content:flex-start}
}
@media (max-width:760px){
  main .section,main .mu{padding:48px 0}
  main .section.tight,main .mu.tight{padding:36px 0}
  .page-hero h1,.page-hero .lede{margin-left:auto;margin-right:auto}
  .page-hero .hero-ctas{justify-content:center}
  /* 3. Phone hero: the infinity sits two thirds of the way across the film, so the crop is anchored on it and it
        lands in the middle of the screen. Every later scene in the phone film sits inside the same window. */
  .hero{--hh:clamp(270px,80vw,52svh)}
  .hero-media{height:var(--hh);min-height:0}
  .hero-media video.loop{position:absolute;top:0;left:50%;height:100%;width:max(151.5%,calc(var(--hh) * 16 / 9));max-width:none;
    object-position:66.9% 50%;translate:-66.9% 0;transform-origin:66.9% 50%}
  .hero-copy{margin:0 auto}
  /* 4. Pause controls on phones: a small round icon in the corner instead of a text pill (the control has to stay:
        a looping video needs a way to stop it, WCAG 2.2.2). The text is still there for screen readers. */
  .hero-pause,.vid-frame>.vid-btn{width:34px;height:34px;min-height:34px;padding:0;border-radius:50%;font-size:0;line-height:0;
    display:grid;place-items:center;background:rgba(12,11,9,.5);border-color:rgba(243,237,225,.22);opacity:.85}
  .hero-pause::before,.vid-frame>.vid-btn::before{content:"";width:10px;height:12px;background:linear-gradient(90deg,var(--text) 0 33%,transparent 33% 67%,var(--text) 67%)}
  .hero-pause.is-paused::before,.vid-frame>.vid-btn.is-paused::before{width:10px;height:12px;margin-left:2px;background:var(--text);clip-path:polygon(0 0,100% 50%,0 100%)}
  .hero-pause{top:calc(var(--hh) - 78px);right:12px}
  .hero-pause[hidden]{display:none}
  .vid-frame>.vid-btn{right:2px;bottom:2px}
}
/* tablets held upright: full-width pictures in the stacked timelines were up to 440px tall; a wider crop keeps the text closer */
@media (min-width:641px) and (max-width:860px){
  .step .inline{aspect-ratio:21/9}
  .sci-fmt .pic{aspect-ratio:16/8}
}
/* 5. Portrait tablets (iPad, iPad Air, iPad Pro held upright): the film fills the top of the screen with the infinity
      in view, and the headline sits centered below it instead of over it. hero.js reads the object-position. */
@media (min-width:761px) and (max-width:1080px) and (orientation:portrait){
  .hero{align-items:flex-end}
  .hero-media{inset:0 0 auto 0;height:62%;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .hero-media video{object-position:100% 50%}
  .hero-media::before{background:linear-gradient(180deg,rgba(12,11,9,.6),transparent 22%),linear-gradient(0deg,var(--ground) 0%,transparent 34%)}
  .hero .wrap{padding-bottom:clamp(44px,6vh,80px)}
  .hero-copy{margin:0 auto;text-align:center;max-width:680px}
  .hero .lede{margin-left:auto;margin-right:auto}
  .hero-ctas{justify-content:center}
  .corner{display:none}
  .hero-pause{bottom:auto;top:calc(62% - 64px)}
}
/* 6. Footer on phones and tablets held upright: one centered block (logo, company line, address, social icons,
      link columns, disclaimers, copyright, links and version). */
@media (max-width:960px){
  .site-footer{text-align:center}
  .foot-cols .brand img{margin:0 auto}
  .foot-cols .brand p,.foot-cols .brand address{margin-left:auto;margin-right:auto;max-width:52ch}
  .site-footer .social{justify-content:center}
  .foot-cols ul{justify-items:center}
  .foot-bottom{flex-direction:column;align-items:center;gap:0}
  .ver{text-align:center}
}