/* ═══════════════ ZOBO BIOSCIENCES — shared stylesheet ═══════════════ */

:root{
  --ink:#0A0E0D; --ink-2:#111716; --ink-3:#18201E;
  --bone:#F3F1EA; --paper:#FBFAF6;
  --accent:#C9F24C; --accent-dim:#516A17;
  --text-mid:#5B655F; --text-light:#B9C4BE; --text-faint:#6D7A74;
  --line-dark:rgba(10,14,13,.14); --line-light:rgba(243,241,234,.14);
  --display:"Archivo",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(20px,5vw,84px); --maxw:1400px;
  --ease:cubic-bezier(.22,.9,.28,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);font-size:16px;
  line-height:1.6;font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.03;margin:0;}
p{margin:0;}

/* ── primitives ── */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.sec{padding-block:clamp(66px,9vw,132px);position:relative;}
.sec--tight{padding-block:clamp(48px,6vw,86px);}
.sec--light{background:var(--bone);color:var(--ink);}
.sec--paper{background:var(--paper);color:var(--ink);}
.sec--ink2{background:var(--ink-2);}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  display:flex;align-items:center;gap:12px;margin:0 0 26px;color:var(--accent);}
.sec--light .eyebrow,.sec--paper .eyebrow{color:var(--accent-dim);}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35;max-width:90px;}

.h2{font-size:clamp(29px,4.4vw,56px);max-width:20ch;}
.h3{font-size:clamp(20px,2.4vw,29px);}
.lede{font-size:clamp(16px,1.35vw,19px);line-height:1.62;color:var(--text-light);max-width:64ch;margin-top:22px;}
.sec--light .lede,.sec--paper .lede{color:var(--text-mid);}
.small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--text-faint);}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;padding:15px 26px;border-radius:100px;
  border:1px solid transparent;transition:.4s var(--ease);}
.btn--fill{background:var(--accent);color:var(--ink);}
.btn--fill:hover{background:var(--bone);transform:translateY(-2px);}
.btn--ghost{border-color:var(--line-light);color:var(--bone);}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.sec--light .btn--ghost,.sec--paper .btn--ghost{border-color:var(--line-dark);color:var(--ink);}
.sec--light .btn--ghost:hover,.sec--paper .btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--bone);}
.btn .arw{transition:transform .4s var(--ease);}
.btn:hover .arw{transform:translateX(4px);}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}

/* ── nav ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s;}
.nav.is-stuck{background:rgba(10,14,13,.85);backdrop-filter:blur(14px);border-bottom-color:var(--line-light);}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;
  letter-spacing:-.02em;font-size:17px;}
.brand__mark{width:26px;height:26px;flex:none;}
.brand small{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;opacity:.5;
  text-transform:uppercase;display:block;margin-top:2px;font-weight:400;}
.nav__links{display:flex;gap:30px;align-items:center;}
.nav__links a{font-size:13.5px;color:var(--text-light);transition:color .3s;position:relative;}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--accent);transition:right .35s var(--ease);}
.nav__links a:hover{color:var(--bone);}
.nav__links a:hover::after,.nav__links a.on::after{right:0;}
.nav__links a.on{color:var(--bone);}
.nav__cta{padding:11px 20px;font-size:11px;}
@media(max-width:980px){.nav__links{display:none;}}
@media(max-width:560px){.brand{font-size:15px;}.brand small{display:none;}.nav__cta{padding:10px 16px;font-size:10px;}}

/* ── hero (home) ── */
.hero{position:relative;padding-top:150px;padding-bottom:clamp(56px,7vw,100px);overflow:hidden;}
.hero__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-light) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-light) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(120% 80% at 70% 20%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 80% at 70% 20%,#000 0%,transparent 72%);}
.hero__glow{position:absolute;width:min(760px,90vw);aspect-ratio:1;right:-14%;top:-16%;
  background:radial-gradient(circle,rgba(201,242,76,.13),transparent 62%);pointer-events:none;}
.hero__in{position:relative;display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(30px,5vw,72px);align-items:center;}
@media(max-width:1020px){.hero__in{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(38px,7vw,88px);font-weight:800;letter-spacing:-.04em;line-height:.98;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero__sub{margin-top:28px;font-size:clamp(15px,1.5vw,19px);line-height:1.62;color:var(--text-light);max-width:52ch;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px;}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 13px;border:1px solid var(--line-light);border-radius:100px;color:var(--text-light);}
.chip--on{border-color:rgba(201,242,76,.42);color:var(--accent);}
.hero__art{position:relative;aspect-ratio:1/1;max-width:500px;justify-self:end;width:100%;}
@media(max-width:1020px){.hero__art{max-width:380px;justify-self:start;margin-top:18px;}}
.spin{animation:spin 46s linear infinite;transform-origin:250px 250px;}
@keyframes spin{to{transform:rotate(360deg);}}
.draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.4s var(--ease) .3s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.pulse circle{animation:pl 3.6s ease-in-out infinite;}
.pulse circle:nth-child(2n){animation-delay:.7s;}
.pulse circle:nth-child(3n){animation-delay:1.4s;}
@keyframes pl{0%,100%{opacity:.35;r:4;}50%{opacity:1;r:6;}}

/* ── page hero (inner pages) ── */
.phero{position:relative;padding-top:154px;padding-bottom:clamp(44px,5.5vw,74px);}
.phero__grid{position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:linear-gradient(var(--line-light) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-light) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(110% 90% at 20% 0%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(110% 90% at 20% 0%,#000 0%,transparent 70%);}
.phero__in{position:relative;}
.phero h1{font-size:clamp(34px,5.6vw,70px);font-weight:800;letter-spacing:-.04em;line-height:1;max-width:17ch;}
.phero h1 em{font-style:normal;color:var(--accent);}
.phero .lede{margin-top:26px;}

/* ── media ── */
.media{position:relative;overflow:hidden;background:var(--ink-3);}
.media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04) brightness(.99);
  transition:filter .7s var(--ease),transform .9s var(--ease);}
.media:hover img{filter:grayscale(.15) contrast(1.03) brightness(1);transform:scale(1.02);}
.media--tint::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,14,13,.10),rgba(10,14,13,.55));}
.bleed{position:relative;height:clamp(240px,38vw,460px);overflow:hidden;background:var(--ink-3);}
.bleed img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.7);}
.bleed::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,14,13,.55),rgba(10,14,13,.85));}
.bleed__cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:0 var(--gut) clamp(24px,3vw,42px);}
.bleed__cap p{font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(19px,2.6vw,32px);color:var(--bone);max-width:26ch;line-height:1.14;}
.cap{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin-top:12px;}

/* ── alternating feature rows ── */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,72px);align-items:center;}
.feat + .feat{margin-top:clamp(56px,7vw,110px);}
.feat--flip .feat__media{order:2;}
@media(max-width:900px){.feat{grid-template-columns:1fr;}.feat--flip .feat__media{order:0;}}
.feat__media{aspect-ratio:4/3;}
.feat__body h3{font-size:clamp(23px,2.8vw,36px);}
.feat__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;}
.sec--light .feat__k,.sec--paper .feat__k{color:var(--accent-dim);}
.feat__body p{margin-top:20px;font-size:15.5px;line-height:1.72;color:var(--text-light);}
.sec--light .feat__body p,.sec--paper .feat__body p{color:var(--text-mid);}

/* ── two-column prose ── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start;}
@media(max-width:900px){.two{grid-template-columns:1fr;}}
.two .col p{font-size:15.5px;line-height:1.74;color:var(--text-light);}
.sec--light .two .col p,.sec--paper .two .col p{color:var(--text-mid);}
.two .col p + p{margin-top:20px;}
p.pull,.two .col p.pull{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,32px)!important;
  letter-spacing:-.025em;line-height:1.22;color:var(--bone)!important;}
.sec--light p.pull,.sec--paper p.pull,.sec--light .two .col p.pull,.sec--paper .two .col p.pull{color:var(--ink)!important;}
p.pull em{font-style:normal;color:var(--accent);}
.sec--light p.pull em,.sec--paper p.pull em{color:var(--accent-dim);}

/* ── band ── */
.band{border-block:1px solid var(--line-light);background:var(--ink-2);}
.band__in{display:grid;grid-template-columns:repeat(4,1fr);}
@media(max-width:860px){.band__in{grid-template-columns:repeat(2,1fr);}}
.band__c{padding:30px var(--gut);border-left:1px solid var(--line-light);
  display:flex;flex-direction:column;justify-content:space-between;min-height:118px;}
.band__c:first-child{border-left:0;}
@media(max-width:860px){.band__c:nth-child(3){border-left:0;}
  .band__c:nth-child(n+3){border-top:1px solid var(--line-light);}}
.band__n{font-family:var(--display);font-size:clamp(17px,1.7vw,21px);font-weight:700;
  letter-spacing:-.02em;color:var(--bone);}
.band__l{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);margin-top:9px;}

/* ── stats ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);
  margin-top:52px;border:1px solid var(--line-light);}
@media(max-width:860px){.stats{grid-template-columns:1fr;}}
.stat{background:var(--ink-2);padding:36px 30px;transition:background .4s var(--ease);}
.stat:hover{background:var(--ink-3);}
.stat__n{font-family:var(--display);font-size:clamp(40px,5vw,64px);font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--bone);}
.stat__t{margin-top:15px;font-size:14.5px;line-height:1.55;color:var(--text-light);max-width:34ch;}
.stat__s{margin-top:17px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint);}

/* ── nav cards (home → inner pages) ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);
  margin-top:52px;border:1px solid var(--line-dark);}
@media(max-width:900px){.cards{grid-template-columns:1fr;}}
.card{background:var(--bone);display:block;transition:background .45s var(--ease);}
.card:hover{background:var(--paper);}
.card__m{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);}
.card__b{padding:28px 28px 34px;}
.card__k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-dim);}
.card h3{margin-top:16px;font-size:clamp(20px,2.2vw,26px);color:var(--ink);}
.card p{margin-top:12px;font-size:14px;line-height:1.6;color:var(--text-mid);}
.card__go{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);display:inline-flex;gap:9px;align-items:center;}
.card:hover .card__go .arw{transform:translateX(4px);}
.card__go .arw{transition:transform .4s var(--ease);}

/* ── area blocks (focus page) ── */
.area{border-top:1px solid var(--line-light);padding-block:clamp(40px,5vw,72px);}
.area:first-of-type{border-top:0;padding-top:0;}
.area__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4.5vw,68px);align-items:start;}
@media(max-width:900px){.area__grid{grid-template-columns:1fr;}}
.area__media{aspect-ratio:5/4;}
.area__n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent);}
.area h2{margin-top:20px;font-size:clamp(25px,3.2vw,42px);}
.area__k{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint);}
.area__body p{margin-top:20px;font-size:15.5px;line-height:1.72;color:var(--text-light);}
.area__body p:first-child{margin-top:0;}

/* ── note ── */
.note{border:1px solid var(--line-light);background:var(--ink-2);padding:clamp(26px,3.2vw,42px);
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;margin-top:56px;}
@media(max-width:700px){.note{grid-template-columns:1fr;gap:14px;}}
.note__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;padding-top:4px;}
.note p{font-size:15px;line-height:1.72;color:var(--text-light);max-width:74ch;}
.note p + p{margin-top:16px;}

/* ── principles grid ── */
.pr{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);
  margin-top:52px;border:1px solid var(--line-dark);}
@media(max-width:900px){.pr{grid-template-columns:1fr;}}
.pr__c{background:var(--bone);padding:32px 28px 36px;transition:.4s var(--ease);}
.pr__c:hover{background:var(--paper);}
.pr__n{font-family:var(--mono);font-size:10.5px;color:var(--accent-dim);letter-spacing:.1em;}
.pr__c h4{margin-top:24px;font-size:19px;letter-spacing:-.02em;color:var(--ink);}
.pr__c p{margin-top:12px;font-size:14px;line-height:1.64;color:var(--text-mid);}

/* ── contact ── */
.cta{position:relative;overflow:hidden;background:var(--ink);}
.cta__glow{position:absolute;inset:auto -10% -60% 30%;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(201,242,76,.11),transparent 62%);pointer-events:none;}
.cta__in{position:relative;display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(30px,5vw,72px);align-items:end;}
@media(max-width:960px){.cta__in{grid-template-columns:1fr;align-items:start;}}
.cta h2{font-size:clamp(29px,4.6vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1;}
.cta h2 em{font-style:normal;color:var(--accent);}
.info{border:1px solid var(--line-light);padding:28px;background:var(--ink-2);}
.info__r{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line-light);font-size:14px;}
.info__r:last-child{border-bottom:0;}
.info__r span{color:var(--text-faint);font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding-top:3px;}
.info__r b{color:var(--bone);font-weight:600;text-align:right;}

/* ── footer ── */
.ft{background:var(--ink);border-top:1px solid var(--line-light);padding-block:54px 32px;}
.ft__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
@media(max-width:820px){.ft__in{grid-template-columns:1fr;gap:30px;}}
.ft h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);font-weight:400;margin:0 0 16px;}
.ft a{display:block;color:var(--text-light);font-size:14px;padding:5px 0;transition:color .3s;}
.ft a:hover{color:var(--accent);}
.ft__b{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;
  padding-top:24px;border-top:1px solid var(--line-light);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);}

/* ── reveal ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .spin,.pulse circle{animation:none;}
  .draw{stroke-dashoffset:0;animation:none;}
  .media img{transition:none;}
  html{scroll-behavior:auto;}
}
::selection{background:var(--accent);color:var(--ink);}