/* ===================================================================
   Comprehensive Biosciences | shared site stylesheet (every page links it)
   Page builders: see ../PAGES.md for the section classes and the rules.
   Page: demo1 (NovaLab interpretation). Heavy uppercase display type
   over the water photograph, chevron hero cut, angled splits, flat CTA
   blocks, zero radius, no shadows.
   Header: demo2 (Laborax interpretation), carried over as built there:
   wordmark, dark rounded nav bar with boxed items on the photo, the
   inbox address, gold Partner Login with the arrow box. Mona Sans is
   loaded for the header only, because that is the face it was set in.

   Palette: navy #192B5D, navy deep #101C3E, teal #5F969A,
            gold #E6CA6D, ground #F4F6FA. Nothing else.
   =================================================================== */

:root{
  --navy:#192B5D;
  --navy-deep:#101C3E;
  --teal:#5F969A;
  --gold:#E6CA6D;
  --ground:#F4F6FA;
  --white:#FFFFFF;
  --ink:#1B2233;
  --ink-2:#4A5266;
  --rule:rgba(25,43,93,.16);
  --rule-dark:rgba(255,255,255,.16);
  --on-dark:rgba(255,255,255,.78);
  --on-dark-2:rgba(255,255,255,.56);

  --display:'Archivo','Arial Narrow',Arial,Helvetica,sans-serif;
  --body:'IBM Plex Sans','Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','Consolas','Courier New',monospace;

  --pad:clamp(20px,5vw,72px);
  --wrap:1240px;
  --band:clamp(72px,9vw,128px);
  --header-h:86px;           /* height of the fixed header at rest, used to clear it */
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:16px;line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:0;}
table{border-collapse:collapse;width:100%;}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
section[id]{scroll-margin-top:72px;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--display);color:var(--navy);margin:0;
  text-transform:uppercase;line-height:.96;letter-spacing:-.02em;font-weight:800;
}
.h-xl{font-size:clamp(2.05rem,6.2vw,5.4rem);font-weight:900;letter-spacing:-.025em;line-height:.94;}
.h-l{font-size:clamp(1.9rem,3.5vw,3rem);}
.h-m{font-size:clamp(1.45rem,2.3vw,2rem);}
.h-s{font-size:clamp(1.05rem,1.4vw,1.2rem);letter-spacing:-.005em;line-height:1.1;}
.on-dark{color:var(--white);}
.label{
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);display:block;
}
.label.on-dark{color:var(--gold);}
.lede{font-size:1.05rem;color:var(--ink-2);max-width:62ch;}
.lede.on-dark{color:var(--on-dark);}
.rule{height:1px;background:var(--rule);border:0;margin:0;}
.rule.on-dark{background:var(--rule-dark);}

/* ---------- flat buttons, zero radius ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.09em;
  text-transform:uppercase;padding:17px 28px;border:2px solid transparent;
  white-space:nowrap;line-height:1;transition:background .2s,color .2s,border-color .2s;
}
.btn-gold{background:var(--gold);color:var(--navy-deep);border-color:var(--gold);}
.btn-gold:hover{background:var(--white);border-color:var(--white);}
.btn-navy{background:var(--navy);color:var(--white);border-color:var(--navy);}
.btn-navy:hover{background:var(--navy-deep);border-color:var(--navy-deep);}
.btn-line-light{border-color:rgba(255,255,255,.55);color:var(--white);}
.btn-line-light:hover{border-color:var(--white);background:var(--white);color:var(--navy-deep);}
.btn-line-navy{border-color:var(--navy);color:var(--navy);}
.btn-line-navy:hover{background:var(--navy);color:var(--white);}
.arrow{display:inline-block;width:14px;height:14px;flex:0 0 auto;}

/* ---------- header (from demo2): Laborax nav bar sitting on the photo ---------- */
.topbar{
  --gut:clamp(18px,3.4vw,44px);--r-ctl:6px;
  position:fixed;inset:0 0 auto 0;z-index:50;padding:18px 0;color:#fff;
  font-family:'Mona Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background .25s ease,padding .25s ease;
}
.topbar a:focus-visible,.topbar button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.topbar.solid{background:rgba(16,28,62,.94);padding:10px 0}
.topbar .shell{width:min(1320px,100% - 2*var(--gut));margin-inline:auto}
.topbar .row{display:flex;align-items:center;gap:22px}
.lx-brand{display:inline-flex;flex:none}
.lx-brand img{height:40px;width:auto}
.navbar{
  display:flex;align-items:center;gap:4px;padding:6px;margin-left:8px;
  background:rgba(16,28,62,.66);border:1px solid rgba(255,255,255,.14);border-radius:12px;
}
.navbar a{
  display:block;padding:11px 16px;border-radius:8px;
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#fff;line-height:1.6;
  transition:background .2s ease,color .2s ease;
}
.navbar a:hover{background:rgba(255,255,255,.1)}
.navbar a.active{background:#fff;color:var(--navy)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.top-mail{display:grid;line-height:1.2;color:#fff}
.top-mail small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.top-mail a{font-size:13px;font-weight:600}
.top-mail a:hover{color:var(--gold)}
/* demo2's arrow-in-square button, gold variant */
.lx-btn{
  display:inline-flex;align-items:center;gap:14px;white-space:nowrap;
  padding:4px 4px 4px 22px;border-radius:var(--r-ctl);
  font-weight:600;font-size:14px;letter-spacing:.01em;line-height:1;
  background:var(--gold);color:var(--navy-deep);border:1px solid transparent;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.lx-btn .sq{
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-ctl);
  border:1px solid rgba(16,28,62,.35);flex:none;
}
.lx-btn .sq svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lx-btn:hover{background:#EBD48A}
.menu-btn{
  display:none;width:48px;height:48px;border-radius:var(--r-ctl);border:1px solid rgba(255,255,255,.4);
  background:transparent;color:#fff;cursor:pointer;place-items:center;
}
.menu-btn span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.lx-mnav{
  display:none;background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.16);
  padding:10px var(--gut) 22px;margin-top:18px;max-height:calc(100vh - 84px);overflow-y:auto;
}
.lx-mnav a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);color:#fff;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.lx-mnav a.active{color:var(--gold)}
.lx-mnav a.mail{text-transform:none;letter-spacing:.01em}
.lx-mnav a.lx-btn{display:inline-flex;margin-top:18px;padding:4px 4px 4px 22px;border:1px solid transparent;color:var(--navy-deep);text-transform:none;letter-spacing:.01em;font-size:14px}
.topbar.open{background:var(--navy-deep)}
.topbar.open .lx-mnav{display:block}

/* ---------- hero: full bleed, left set, chevron cut ---------- */
.hero{position:relative;background:var(--ground);}
.hero-stage{
  position:relative;overflow:hidden;background:var(--navy-deep);isolation:isolate;
  clip-path:polygon(0 0,100% 0,100% 82%,52% 100%,0 78%);
}
.hero-media{position:absolute;inset:0;z-index:-2;background:url("bg.jpg") center/cover no-repeat;}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(16,28,62,.55) 0%,rgba(16,28,62,0) 22%),
    linear-gradient(90deg,rgba(16,28,62,.86) 0%,rgba(16,28,62,.66) 55%,rgba(16,28,62,.38) 100%);
}
.hero-inner{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:min(94vh,900px);
  padding-top:calc(var(--header-h) + clamp(56px,9vh,110px));padding-bottom:clamp(190px,26vh,290px);
}
.hero h1{color:var(--white);max-width:12.6em;margin-bottom:30px;}
.hero-sub{
  color:var(--on-dark);font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.5;max-width:52ch;margin-bottom:38px;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.hero-tab{
  position:absolute;right:var(--pad);bottom:28px;z-index:2;
  display:inline-flex;align-items:center;gap:18px;background:var(--navy);color:var(--white);
  padding:16px 24px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.hero-tab strong{font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.06em;color:var(--gold);}
.hero-tab:hover{background:var(--navy-deep);}

/* ---------- splits ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--white);}
.split.dark{background:var(--navy-deep);color:var(--on-dark);}
.split.ground{background:var(--ground);}
.split-media{position:relative;min-height:clamp(340px,44vw,700px);overflow:hidden;background:var(--navy-deep);}
.split-media.photo{background:url("bg.jpg") center/cover no-repeat;}
.split-media.photo.crop-b{background-position:80% 70%;}
.split-media.photo::after{content:"";position:absolute;inset:0;background:rgba(16,28,62,.34);}
.split-media.cut-right{clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%);}
.split-media.cut-left{clip-path:polygon(18% 0,100% 0,100% 100%,18% 100%,0 50%);}
.split-media.helix-panel{background:var(--navy);}
.split-media.helix-panel img{position:absolute;right:-6%;top:50%;transform:translateY(-50%);height:118%;width:auto;opacity:.18;filter:brightness(0) invert(1);}
.split-media .tag{
  position:absolute;left:0;bottom:40px;background:var(--gold);color:var(--navy-deep);
  font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:12px 22px;
}
.split-media.cut-left .tag{left:auto;right:0;}
.split-body{padding:var(--band) clamp(24px,5vw,88px);display:flex;flex-direction:column;justify-content:center;}
.split-inner{max-width:600px;width:100%;}
.split.reverse .split-media{order:2;}
.split.reverse .split-body{display:flex;justify-content:center;align-items:flex-end;}
.two-col{columns:2;column-gap:36px;font-size:.94rem;color:var(--ink-2);margin-top:28px;}
.two-col p{break-inside:avoid;}
.split.dark .two-col{color:var(--on-dark);}

/* numbered list, two columns, rule separated */
.num-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:32px 0 40px;counter-reset:n;}
.num-list li{counter-increment:n;padding:18px 0 20px;border-top:1px solid var(--rule);display:grid;grid-template-columns:38px 1fr;gap:12px;}
.num-list li::before{content:counter(n,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--teal);padding-top:4px;}
.num-list h4{font-size:.92rem;letter-spacing:.02em;line-height:1.15;margin-bottom:6px;text-transform:uppercase;}
.num-list p{font-size:.88rem;color:var(--ink-2);}

/* ---------- doors: statement line and numbered steps inside a split ---------- */
.door-body .statement{
  font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.18;letter-spacing:-.01em;
  color:var(--navy);margin:14px 0 28px;text-transform:none;
}
.split.dark .statement{color:var(--white);}
.steps{counter-reset:s;margin:0 0 34px;}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--rule);}
.steps li:last-child{border-bottom:1px solid var(--rule);}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:900;font-size:1.3rem;line-height:1;color:var(--teal);padding-top:2px;}
.steps strong{display:block;font-family:var(--display);font-weight:800;font-size:.9rem;letter-spacing:.02em;text-transform:uppercase;color:var(--navy);margin-bottom:4px;line-height:1.15;}
.steps p{font-size:.9rem;color:var(--ink-2);}
.split.dark .steps li{border-color:var(--rule-dark);}
.split.dark .steps strong{color:var(--white);}
.split.dark .steps p{color:var(--on-dark-2);}
.door-foot{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;}
.door-foot .aside{font-size:.86rem;color:var(--ink-2);}
.split.dark .door-foot .aside{color:var(--on-dark-2);}
.door-foot .aside a{color:var(--navy);border-bottom:2px solid var(--gold);}
.split.dark .door-foot .aside a{color:var(--white);}

/* ---------- access bar ---------- */
.access{padding:var(--band) 0;}
.access-row{
  display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:center;
  border-top:3px solid var(--navy);border-bottom:1px solid var(--rule);padding:36px 0;
}
.access-row p{margin-top:8px;color:var(--ink-2);max-width:60ch;}
.access-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:var(--on-dark);padding:clamp(64px,7vw,96px) 0 0;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(32px,4vw,64px);padding-bottom:clamp(44px,5vw,64px);}
.footer-brand img{width:224px;margin-bottom:26px;}
.footer-brand p{font-size:.9rem;max-width:34ch;}
.footer-brand .email{display:inline-block;color:var(--white);border-bottom:1px solid var(--gold);margin:6px 0 22px;}
.footer-brand .email:hover{border-color:var(--white);}
.footer-col h4{color:var(--white);font-size:1rem;letter-spacing:.02em;margin-bottom:18px;}
.footer-links a{display:block;padding:9px 0;border-bottom:1px solid var(--rule-dark);font-size:.88rem;color:var(--on-dark);}
.footer-links a:hover{color:var(--gold);}
.footer-bar{border-top:1px solid var(--rule-dark);padding:22px 0 30px;}
.footer-bar .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center;}
.footer-bar p{font-size:.78rem;color:var(--on-dark-2);max-width:78ch;}
.footer-brand address{font-style:normal;font-size:.9rem;margin:0 0 22px;}
.footer-brand .footer-login{margin-bottom:26px;}

/* ---------- inner page title band (demo1 hero, shortened) ----------
   <section class="page-hero"><div class="page-hero-stage"><div class="hero-media"></div>
   <div class="hero-scrim"></div><div class="wrap page-hero-inner"><h1 class="h-xl">Title</h1>
   <p class="hero-sub">optional one line</p></div></div></section> */
.page-hero{position:relative;background:var(--ground);}
.page-hero-stage{
  position:relative;overflow:hidden;background:var(--navy-deep);isolation:isolate;
  clip-path:polygon(0 0,100% 0,100% 84%,52% 100%,0 80%);
}
.page-hero-inner{
  position:relative;padding-top:calc(var(--header-h) + clamp(48px,7vh,88px));
  padding-bottom:clamp(110px,14vw,180px);
}
.page-hero h1{color:var(--white);max-width:14em;}
.page-hero .hero-sub{margin:24px 0 0;}
.page-body{padding:var(--band) 0;}

/* ---------- responsive ---------- */
/* header breakpoints are demo2's own */
/* demo2's header pattern and order of retreat (email first, then tighter
   items, then the menu button). The nav has four items, so the inbox
   address fits again from 1280 and the boxed nav holds down to 960. */
@media (max-width:1279px){
  .top-mail{display:none}
}
@media (max-width:1099px){
  .navbar a{padding:11px 12px}
}
@media (max-width:959px){
  .navbar{display:none}
  .menu-btn{display:grid}
  .top-right .lx-btn{display:none}
}
@media (min-width:960px){
  .lx-mnav,.topbar.open .lx-mnav{display:none}
}
/* page breakpoints are demo1's own */
@media (max-width:1180px){
  .split{grid-template-columns:1fr;}
  .split.reverse .split-media{order:0;}
  .split-media{min-height:clamp(240px,48vw,420px);}
  .split-media.cut-right{clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);}
  .split-media.cut-left{clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);}
  .split-media .tag,.split-media.cut-left .tag{left:0;right:auto;bottom:auto;top:0;}
  .split-body{padding:clamp(48px,7vw,80px) var(--pad);}
  .split-inner{max-width:720px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  .hero-inner{min-height:0;padding-top:calc(var(--header-h) + 48px);padding-bottom:clamp(140px,34vw,220px);}
  .hero-stage{clip-path:polygon(0 0,100% 0,100% 86%,52% 100%,0 84%);}
  .hero-tab{position:static;display:flex;justify-content:space-between;width:calc(100% - 2*var(--pad));margin:-10px var(--pad) 0;}
  .num-list{grid-template-columns:1fr;}
  .two-col{columns:1;}
  .access-row{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .hero-media{background-image:url("bg-mobile.jpg");}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
  .hero-cta .btn,.door-foot .btn,.access-actions .btn{width:100%;}
  .access-actions{width:100%;}
  .hero-tab{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* ===================================================================
   Shared components promoted from the inner page builds (2026-10-22).
   Kept at the end of the file so they cascade exactly as the page
   <style> blocks they came from did.
   =================================================================== */

/* page hero with buttons: spacing, and room under them so the chevron
   cut never clips the buttons on phones */
.page-hero .hero-cta{margin-top:30px;}

/* inline text link inside a lede */
.lede a{color:var(--navy);border-bottom:2px solid var(--gold);}
.lede.on-dark a{color:var(--white);}

/* ruled index rows: number, main text, who or what, one action (Contact) */
.idx-head{display:grid;grid-template-columns:1fr 1fr;gap:20px 64px;align-items:end;margin-bottom:clamp(36px,5vw,56px);}
.idx-list{border-top:3px solid var(--navy);counter-reset:r;}
.idx-list li{
  counter-increment:r;display:grid;grid-template-columns:56px minmax(0,1fr) 260px 190px;gap:16px 36px;
  padding:30px 0 32px;border-bottom:1px solid var(--rule);align-items:start;
}
.idx-list li::before{content:counter(r,decimal-leading-zero);font-family:var(--display);font-weight:900;font-size:1.5rem;line-height:1;color:var(--teal);}
.idx-main h3{margin-bottom:12px;}
.idx-main p{font-size:.94rem;color:var(--ink-2);max-width:62ch;}
.idx-who .label{color:var(--teal);margin-bottom:8px;}
.idx-who p{font-size:.88rem;color:var(--ink);}
.idx-act{justify-self:end;}
.idx-act .btn{min-width:170px;}

@media (max-width:1180px){
  .idx-list li{grid-template-columns:44px minmax(0,1fr) 240px;}
  .idx-act{grid-column:2 / -1;justify-self:start;}
}
@media (max-width:820px){
  .page-hero-inner:has(.hero-cta){padding-bottom:clamp(140px,34vw,200px);}
  .idx-head{grid-template-columns:1fr;}
  .idx-list li{grid-template-columns:36px minmax(0,1fr);}
  .idx-list li::before{font-size:1.2rem;}
  .idx-who,.idx-act{grid-column:2;}
}
@media (max-width:560px){
  .page-hero-inner:has(.hero-cta){padding-bottom:200px;}
  .idx-act{width:100%;}
  .idx-act .btn{width:100%;}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none!important;animation:none!important;}
}