/* ==========================================================================
   CybernaX Biotechnologies — site stylesheet
   Palette derived from the CybernaX logo:
     deep blue  #004098   sky  #36A5DD   navy ink #1F2D5A
   ========================================================================== */

:root{
  --blue:      #004098;
  --blue-dark: #012f70;
  --sky:       #36A5DD;
  --sky-soft:  #9FB9DA;
  --navy:      #1F2D5A;
  --navy-deep: #16204070;
  --ink:       #14203f;
  --body:      #4a5568;
  --line:      #e2e8f0;
  --bg-soft:   #f5f8fc;
  --bg-tint:   #eef4fb;
  --white:     #ffffff;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --sec: clamp(64px, 9vw, 128px);

  --sans: "Inter", "Helvetica Neue", Helvetica, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4{color:var(--ink);margin:0 0 .6em;line-height:1.15;font-weight:600;letter-spacing:-.015em}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.45em}
strong{color:var(--ink);font-weight:600}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.section--soft{background:var(--bg-soft)}
.section--tint{background:var(--bg-tint)}

/* ---------- type scale ---------- */
.h-hero{font-size:clamp(1.85rem,4.6vw,3.55rem);font-weight:500;line-height:1.1;letter-spacing:-.03em;color:var(--ink);max-width:15ch}
.hero .h-hero{max-width:none;font-size:clamp(1.85rem,7.6vw,3.55rem)}
@media (min-width:901px){.hero .h-hero{font-size:clamp(2.3rem,4.4vw,3.55rem)}}
.h-1{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:500;letter-spacing:-.025em}
.h-2{font-size:clamp(1.45rem,2.4vw,2.05rem);font-weight:600}
.h-3{font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:600}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6;color:var(--body)}
.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky);margin:0 0 1rem;display:block;
}
.eyebrow--navy{color:var(--blue)}
.rule{width:64px;height:3px;background:var(--sky);border:0;margin:0 0 1.6rem}
/* Platform block heading stack: eyebrow → platform name → title.
   The product name (CX Ionizable Lipid) stays the largest of the three. */
.platform-name{
  display:block;margin:0 0 .3rem;
  font-size:clamp(1.1rem,1.55vw,1.42rem);font-weight:600;line-height:1.35;
  color:var(--blue);letter-spacing:-.01em;
}
.platform-name strong{font-weight:800;letter-spacing:.01em}
/* Headings whose line breaks must be exact: one .l per line. */
.l{display:block}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.85em 1.7em;border-radius:2px;
  font-size:.94rem;font-weight:600;letter-spacing:.02em;
  background:var(--blue);color:#fff;border:1px solid var(--blue);
  transition:background .25s,border-color .25s,color .25s,transform .25s;
}
.btn:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--blue)}
.btn--ghost:hover{background:var(--blue);color:#fff}
.btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn .arw{transition:transform .25s}
.btn:hover .arw{transform:translateX(4px)}

/* ==========================================================================
   HEADER + RIGHT HAMBURGER MENU
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__in{
  max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  height:86px;display:flex;align-items:center;justify-content:space-between;
}
.brand img{height:42px;width:auto}
/* The header must sit ABOVE the drawer, otherwise the overlay swallows the
   close click. When the drawer is open the bar goes transparent and the logo
   swaps to its light version (its navy plate matches the drawer exactly). */
body.nav-open .site-header{
  background:transparent;backdrop-filter:none;
  border-bottom-color:transparent;z-index:160;
}
.brand img.brand--light{display:none}
body.nav-open .brand img.brand--dark{display:none}
body.nav-open .brand img.brand--light{display:block}

/* burger */
.burger{
  appearance:none;border:0;background:none;cursor:pointer;
  width:46px;height:46px;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-end;gap:6px;padding:0;
  z-index:200;position:relative;
}
.burger span{
  display:block;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .35s cubic-bezier(.6,.05,.2,1),opacity .2s,width .35s,background .35s;
}
.burger span:nth-child(1){width:26px}
.burger span:nth-child(2){width:18px}
.burger span:nth-child(3){width:26px}
.burger:hover span:nth-child(2){width:26px}
body.nav-open .burger span{background:#fff;width:26px}
body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* overlay */
.navdrawer{
  position:fixed;inset:0;z-index:150;
  background:var(--navy);
  clip-path:circle(0% at calc(100% - 46px) 39px);
  transition:clip-path .6s cubic-bezier(.77,0,.18,1);
  display:flex;flex-direction:column;justify-content:center;
  pointer-events:none;
}
body.nav-open .navdrawer{clip-path:circle(150% at calc(100% - 46px) 39px);pointer-events:auto}
.navdrawer__in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);width:100%}
.navdrawer a{
  display:block;color:#fff;font-size:clamp(2rem,6vw,3.6rem);font-weight:500;
  letter-spacing:-.03em;line-height:1.25;padding:.12em 0;
  opacity:0;transform:translateY(18px);
  transition:opacity .4s,transform .4s,color .25s;
}
body.nav-open .navdrawer a{opacity:1;transform:none}
body.nav-open .navdrawer a:nth-child(1){transition-delay:.22s}
body.nav-open .navdrawer a:nth-child(2){transition-delay:.29s}
body.nav-open .navdrawer a:nth-child(3){transition-delay:.36s}
body.nav-open .navdrawer a:nth-child(4){transition-delay:.43s}
.navdrawer a:hover,.navdrawer a[aria-current="page"]{color:var(--sky)}
.navdrawer__meta{
  margin-top:3rem;color:rgba(255,255,255,.55);font-size:.9rem;
  opacity:0;transition:opacity .4s .5s;
}
body.nav-open .navdrawer__meta{opacity:1}
.navdrawer__meta a{display:inline;font-size:.9rem;color:rgba(255,255,255,.8);font-weight:400}
body{transition:none}
body.nav-open{overflow:hidden}

/* ==========================================================================
   HERO — home. Full-bleed looping video with the headline over it.
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(520px,78vh,820px);
  display:flex;align-items:center;
  background:#0d1c38;
}
.hero__media{
  position:absolute;inset:0;z-index:-2;
}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:62% 50%;
  display:block;
}
/* Scrim: dark enough on the left for white type, clear on the right so the
   cell and the targeting binders stay readable. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(8,20,44,.90) 0%, rgba(8,20,44,.72) 34%, rgba(8,20,44,.28) 62%, rgba(8,20,44,.10) 100%),
    linear-gradient(180deg, rgba(8,20,44,.34) 0%, rgba(8,20,44,0) 26%);
}
.hero__in{
  position:relative;width:100%;
  max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  padding-block:clamp(72px,10vw,120px);
}
.hero__text{max-width:min(640px,60%)}
.hero h1{
  color:#fff;margin-bottom:0;
  text-shadow:0 2px 26px rgba(6,16,38,.45);
}
.hero h1 .l{display:block}
.hero__cta{margin-top:2.4rem;display:flex;gap:.9rem;flex-wrap:wrap}

/* Scroll cue */
.hero__cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:24px;height:38px;border:1.5px solid rgba(255,255,255,.45);border-radius:14px;
  z-index:1;
}
.hero__cue::after{
  content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;border-radius:2px;
  background:rgba(255,255,255,.8);transform:translateX(-50%);
  animation:cue 2.1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes cue{
  0%,12%{opacity:0;transform:translate(-50%,0)}
  30%{opacity:1}
  70%{opacity:1;transform:translate(-50%,15px)}
  90%,100%{opacity:0;transform:translate(-50%,15px)}
}

@media (prefers-reduced-motion:reduce){
  .hero__cue::after{animation:none}
}

/* attribute chips */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.2rem;padding:0;list-style:none}
.chips li{
  margin:0;font-size:.8rem;font-weight:600;letter-spacing:.04em;
  color:var(--blue);background:#fff;border:1px solid #d6e4f5;
  padding:.5em 1em;border-radius:100px;
}

/* ==========================================================================
   PAGE HERO (interior pages)
   ========================================================================== */
.pagehero{
  background:linear-gradient(115deg,var(--navy) 0%, #16306e 55%, #0a4fa8 100%);
  color:#fff;position:relative;overflow:hidden;
}
.pagehero::after{
  content:"";position:absolute;right:-8%;top:-40%;width:56%;height:180%;
  background:radial-gradient(circle at 50% 50%, rgba(54,165,221,.32), rgba(54,165,221,0) 62%);
  pointer-events:none;
}
.pagehero__in{
  max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  padding-block:clamp(56px,7.5vw,104px);position:relative;z-index:1;
}
.pagehero h1{color:#fff;font-weight:500;font-size:clamp(2.1rem,4.6vw,3.5rem);letter-spacing:-.03em;margin-bottom:.5rem}
.pagehero p{color:rgba(255,255,255,.82);max-width:62ch;margin:0;font-size:clamp(1rem,1.4vw,1.2rem)}
.pagehero .eyebrow{color:var(--sky)}

/* ==========================================================================
   GENERIC LAYOUT HELPERS
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.split--wide-left{grid-template-columns:1.15fr .85fr}
.split--wide-right{grid-template-columns:.85fr 1.15fr}
.split__media img,.split__media svg{width:100%;border-radius:4px}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,34px)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column;
  transition:box-shadow .3s,transform .3s,border-color .3s;
}
/* Pushes a trailing "read more" line to the bottom so it lines up between cards. */
.card > .readmore-row{margin-top:auto;padding-top:1.2rem;margin-bottom:0}
.card:hover{box-shadow:0 16px 42px -22px rgba(19,40,90,.4);border-color:#cfe0f4;transform:translateY(-2px)}
.card__media{margin:-1px -1px 1.6rem;border-radius:3px 3px 0 0;overflow:hidden;background:var(--bg-tint)}
.card h3{margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}

.center{text-align:center}
.narrow{max-width:820px;margin-inline:auto}
.narrow-lg{max-width:1040px;margin-inline:auto}

/* Home — the two platform blurbs, side by side */
.plat-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,52px);
  text-align:left;margin-top:clamp(30px,3.6vw,48px);
}
.plat-pair__item{border-top:3px solid var(--sky);padding-top:1.3rem}
.plat-pair__name{
  display:block;font-size:clamp(1.02rem,1.4vw,1.2rem);font-weight:600;line-height:1.4;
  color:var(--ink);margin-bottom:.6rem;
}
.plat-pair__name b{color:var(--blue);font-weight:800;letter-spacing:.01em}
.plat-pair__item p{margin:0;font-size:1rem;line-height:1.65}
@media (max-width:760px){.plat-pair{grid-template-columns:1fr;gap:28px}}
.mb-0{margin-bottom:0}

/* stat / icon blocks */
.iconblock{display:flex;gap:1.15rem;align-items:flex-start}
.iconblock__icon{
  flex:0 0 54px;width:54px;height:54px;border-radius:50%;
  background:var(--bg-tint);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.iconblock__icon svg{width:26px;height:26px}
.iconblock h3{font-size:1.08rem;margin-bottom:.35rem}
.iconblock p{margin:0;font-size:.97rem}

/* barrier table (Platform 1 / home issue panels)
   .barrier uses display:contents so the three cards share grid rows and line up. */
.barriers{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto 1fr auto;gap:0 clamp(16px,2vw,26px);
}
.barrier{display:contents}
.barrier:nth-of-type(1) > *{grid-column:1}
.barrier:nth-of-type(2) > *{grid-column:2}
.barrier:nth-of-type(3) > *{grid-column:3}
.barrier__head{grid-row:1}
.barrier__challenge{grid-row:2}
.barrier__solution{grid-row:3}
.barrier__head{
  background:#fff;padding:1.4rem 1.5rem 1.1rem;
  border:1px solid var(--line);border-bottom:0;border-radius:4px 4px 0 0;
}
.barrier__num{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#c0392b;display:block;margin-bottom:.5rem;
}
.barrier__head h3{font-size:1.05rem;margin:0;line-height:1.35}
.barrier__challenge{
  padding:0 1.5rem 1.5rem;font-size:.95rem;background:#fff;
  border:1px solid var(--line);border-top:0;border-bottom:0;
}
.barrier__challenge p{margin:0}
.barrier__solution{
  background:linear-gradient(135deg,var(--navy),#0a4491);color:#fff;
  padding:1.35rem 1.5rem;font-size:.95rem;border-radius:0 0 4px 4px;
}
.barrier__solution .lbl{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sky);margin-bottom:.5rem;
}
.barrier__solution p{margin:0;color:rgba(255,255,255,.92)}
.barrier__solution strong{color:#fff}

/* simple compare rows */
.compare{border-top:1px solid var(--line)}
.compare__row{
  display:grid;grid-template-columns:minmax(180px,1fr) 1fr 1fr;gap:clamp(14px,2vw,28px);
  padding:1.5rem 0;border-bottom:1px solid var(--line);align-items:start;
}
.compare__row h4{margin:0;font-size:1rem}
.compare__row p{margin:0;font-size:.96rem}
.compare__lbl{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#8a94a6;margin-bottom:.35rem;display:block;
}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,36px)}
.team-grid--3{grid-template-columns:repeat(3,1fr)}
/* Photos sit under a navy duotone and resolve to full colour on hover. The
   overlay takes hue and saturation from --navy while the image supplies the
   luminance, so the portraits keep their tonal range instead of flattening.
   `isolation:isolate` keeps the blend inside the frame. */
.member__photo{
  aspect-ratio:4/5;overflow:hidden;background:var(--bg-tint);border-radius:3px;margin-bottom:1.1rem;
  position:relative;isolation:isolate;
}
.member__photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--navy);mix-blend-mode:color;transition:opacity .45s ease;
}
.member__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .45s,transform .8s}
.member:hover .member__photo img,
.member:focus-within .member__photo img{filter:none;transform:scale(1.03)}
.member:hover .member__photo::after,
.member:focus-within .member__photo::after{opacity:0}
.member h3{font-size:1.12rem;margin-bottom:.2rem}

/* LinkedIn mark after the name. Inline so it never adds a line of its own. */
.member__li{
  display:inline-flex;align-items:center;vertical-align:-2px;margin-left:.45rem;
  color:#98a2b3;transition:color .25s;
}
.member__li:hover,.member__li:focus-visible{color:var(--blue)}
.member__li svg{width:16px;height:16px;display:block;fill:currentColor}
.member__role{
  color:var(--blue);font-size:.83rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.85rem;line-height:1.4;min-height:2.8em;
}
.member__bio{font-size:.94rem;line-height:1.65;margin:0}
.member__bio li{margin-bottom:.3rem}

/* ==========================================================================
   NEWS
   ========================================================================== */
.news-layout{display:grid;grid-template-columns:220px 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.news-filter{list-style:none;margin:0;padding:0;position:sticky;top:110px}
.news-filter li{margin:0;border-bottom:1px solid var(--line)}
.news-filter button{
  appearance:none;background:none;border:0;cursor:pointer;font:inherit;
  width:100%;text-align:left;padding:.9rem 0;color:var(--body);
  font-size:.98rem;font-weight:500;transition:color .25s;
  display:flex;justify-content:space-between;align-items:center;
}
.news-filter button:hover{color:var(--blue)}
.news-filter button[aria-selected="true"]{color:var(--ink);font-weight:600}
.news-filter button[aria-selected="true"]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--sky)}

.post-list{display:flex;flex-direction:column;gap:0}
.post{
  display:grid;grid-template-columns:260px 1fr;gap:clamp(20px,3vw,40px);
  padding:2.1rem 0;border-bottom:1px solid var(--line);align-items:center;
}
.post:first-child{padding-top:0}
.post__thumb{border-radius:3px;overflow:hidden;background:var(--bg-tint);aspect-ratio:16/10}
.post__thumb img,.post__thumb svg{width:100%;height:100%;object-fit:cover}
.post__meta{display:flex;gap:.9rem;align-items:center;margin-bottom:.6rem;font-size:.78rem}
.tag{
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);
}
.post__date{color:#8a94a6}
.post h3{font-size:1.22rem;margin-bottom:.5rem;line-height:1.3}
.post h3 a{color:var(--ink);transition:color .25s}
.post h3 a:hover{color:var(--blue)}
.post p{font-size:.96rem;margin:0 0 .8rem}
.readmore{font-size:.88rem;font-weight:600;color:var(--blue);display:inline-flex;gap:.4em;align-items:center}
.readmore .arw{transition:transform .25s}
.readmore:hover .arw{transform:translateX(4px)}

/* article */
.article{max-width:760px;margin-inline:auto}
.article h2{font-size:1.4rem;margin-top:2.4rem}
.article__hero{margin-bottom:2.5rem;border-radius:4px;overflow:hidden}
.article blockquote{
  margin:2rem 0;padding:0 0 0 1.6rem;border-left:3px solid var(--sky);
  font-size:1.07rem;line-height:1.65;color:var(--ink);font-style:normal;
}
.article blockquote cite{display:block;margin-top:.7rem;font-size:.9rem;color:var(--body);font-style:normal}
.backlink{display:inline-flex;gap:.45em;align-items:center;font-size:.9rem;font-weight:600;margin-bottom:2rem}

/* ==========================================================================
   PARTNERING BAND (shared) + FOOTER
   ========================================================================== */
.partnerband{
  background:linear-gradient(115deg,#16306e 0%,#12459a 55%,#0a4fa8 100%);
  color:#fff;position:relative;overflow:hidden;
}
.partnerband::after{
  content:"";position:absolute;left:-6%;bottom:-70%;width:46%;height:190%;
  background:radial-gradient(circle at 50% 50%, rgba(54,165,221,.28), rgba(54,165,221,0) 62%);
}
.partnerband__in{
  max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  padding-block:clamp(56px,7vw,96px);position:relative;z-index:1;text-align:center;
}
.partnerband h2{color:#fff;font-weight:500;font-size:clamp(1.9rem,3.8vw,3rem);letter-spacing:-.03em;margin-bottom:1.4rem}
.partnerband p{color:rgba(255,255,255,.8);max-width:60ch;margin:0 auto 2rem}
.partnerband__mail{
  display:inline-block;font-size:clamp(1.05rem,2vw,1.45rem);font-weight:500;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:.18em;transition:border-color .3s,color .3s;
}
.partnerband__mail:hover{color:var(--sky);border-color:var(--sky)}

.site-footer{background:var(--navy);color:rgba(255,255,255,.62);font-size:.86rem}
.site-footer__in{
  max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  padding-block:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.site-footer__left{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.site-footer__left img{height:30px;width:auto}
.site-footer__icp{color:rgba(255,255,255,.55);transition:color .25s}
.site-footer__icp:hover{color:#fff}
.site-footer__right a{
  display:inline-flex;width:34px;height:34px;border-radius:50%;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#fff;transition:background .25s,transform .25s;
}
.site-footer__right a:hover{background:var(--sky);transform:translateY(-2px)}
.site-footer__right svg{width:16px;height:16px;fill:currentColor}
.site-footer__copy{color:rgba(255,255,255,.4)}

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   WORDPRESS-SPECIFIC
   (harmless in the static build; required once the theme is installed)
   ========================================================================== */
.member__bio p{margin:0 0 .8em}
.member__bio p:last-child{margin-bottom:0}
.article p:last-child{margin-bottom:0}
.article img,.article figure{max-width:100%;height:auto;margin:2rem 0;border-radius:4px}
.article figure{margin:2.2rem 0}
.article figure img{border:1px solid var(--line);border-radius:4px;margin:0}
.article figcaption{font-size:.85rem;color:#8a94a6;margin-top:.7rem;line-height:1.5}
.article ul,.article ol{margin:0 0 1.2em;padding-left:1.3em}
.alignleft{float:left;margin:0 1.6rem 1.2rem 0}
.alignright{float:right;margin:0 0 1.2rem 1.6rem}
.aligncenter{margin-inline:auto;display:block}
.wp-caption{max-width:100%}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.navigation.pagination{margin-top:2.5rem;display:flex;justify-content:center}
.navigation.pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap}
.navigation.pagination .page-numbers{
  display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:3px;color:var(--body);font-size:.9rem;
}
.navigation.pagination .page-numbers.current,
.navigation.pagination .page-numbers:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .team-grid,.team-grid--3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  body{font-size:16px}
  .hero{min-height:clamp(460px,72vh,640px)}
  .hero__text{max-width:none}
  .hero__media img{object-position:68% 50%}
  .hero::before{
    background:
      linear-gradient(180deg, rgba(8,20,44,.86) 0%, rgba(8,20,44,.66) 46%, rgba(8,20,44,.42) 100%),
      linear-gradient(100deg, rgba(8,20,44,.55) 0%, rgba(8,20,44,.12) 100%);
  }
  .split,.split--wide-left,.split--wide-right{grid-template-columns:1fr}
  .split--flip .split__media{order:-1}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .barriers{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .barriers > .barrier > *{grid-column:auto;grid-row:auto}
  .barrier__solution{margin-bottom:clamp(20px,3vw,28px)}
  .news-layout{grid-template-columns:1fr;gap:28px}
  .news-filter{position:static;display:flex;gap:1.4rem;overflow-x:auto;padding:0 1.5rem .2rem 0;-webkit-overflow-scrolling:touch}
  .news-filter li{border-bottom:0;flex:0 0 auto}
  .news-filter button{padding:.4rem 0;gap:.5rem;white-space:nowrap}
  .news-filter button[aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--sky)}
  .post{grid-template-columns:1fr;gap:16px}
  .compare__row{grid-template-columns:1fr;gap:8px}
  .compare__row h4{margin-bottom:.4rem}
}
@media (max-width:620px){
  .site-header__in{height:72px}
  .brand img{height:34px}
  .team-grid,.team-grid--3,.grid-4{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .chips{gap:.4rem}
  .chips li{font-size:.74rem;padding:.45em .85em}
  .site-footer__in{flex-direction:column;align-items:flex-start;padding-block:22px}
  .site-footer__left{gap:12px}
  .navdrawer{clip-path:circle(0% at calc(100% - 40px) 33px)}
  body.nav-open .navdrawer{clip-path:circle(150% at calc(100% - 40px) 33px)}
  .hero__cta{gap:.6rem}
  .btn{padding:.8em 1.4em;font-size:.9rem}
}