/*
Theme Name:   Novagene
Theme URI:    https://novagene.com.pk/
Author:       Seven52
Author URI:   https://seven52.agency/
Description:  Bespoke WordPress theme for Novagene Pharmaceuticals (Pvt.) Ltd. Static page templates, one per site section, reproducing the approved "Bento" design direction exactly.
Version:      1.0.4
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License:      Proprietary. Licensed to Novagene Pharmaceuticals (Pvt.) Ltd.
Text Domain:  novagene
*/


/* ==========================================================================
   NOVAGENE, DIRECTION 03 "BENTO"
   Blue and white, rounded, modular. Reads energetic, contemporary, commercial.
   ========================================================================== */

:root{
  --teal:#20249e;
  --teal-2:#585ed6;
  --teal-deep:#101245;
  --ink:#14162e;
  --ink-2:#454a63;
  --body:#5c6070;
  --yellow:#dcdef5;
  --yellow-2:#f0f1fb;
  --cream:#ffffff;
  --cream-2:#f6f7fc;
  --white:#fff;
  --muted:#71768a;
  --line:rgba(20,22,46,.12);
  --f:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max:1300px;
  --pad:clamp(18px,4vw,44px);
  --r:26px;
  --r2:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f); font-size:16.5px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
p{margin:0; color:var(--body)}
h1,h2,h3,h4{margin:0; font-weight:800; line-height:1.05; letter-spacing:-.035em}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--yellow); color:var(--ink); border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 15px;
}
.tag--o{background:rgba(255,255,255,.14); color:var(--yellow)}
.tag--t{background:rgba(32,36,158,.1); color:var(--teal)}

/* ---------- Floating header ---------- */
.hdr{position:sticky; top:0; z-index:80; padding:14px 0}
.hdr__in{
  display:flex; align-items:center; gap:20px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(16px);
  border:1px solid rgba(20,22,46,.07); border-radius:999px;
  padding:11px 11px 11px 26px; box-shadow:0 14px 40px -28px rgba(16,18,69,.7);
}
.hdr__in img{height:54px; width:auto}
.hdr__in .custom-logo{height:54px; width:auto}
.nav{display:flex; gap:5px; margin-left:auto}
.nav a{
  font-size:13.5px; font-weight:700; padding:10px 14px; border-radius:999px;
  color:var(--ink); background:var(--yellow); letter-spacing:-.005em;
  border:1px solid rgba(32,36,158,.18); white-space:nowrap;
  transition:background .22s, color .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.nav a:hover{background:var(--teal); border-color:var(--teal); color:#fff; transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(32,36,158,.9)}

.btn{
  display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  padding:13px 24px; font-size:14.5px; font-weight:700; letter-spacing:-.01em;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), background .22s, color .22s, box-shadow .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn--t{background:var(--teal); color:#fff; box-shadow:0 12px 26px -16px rgba(32,36,158,1)}
.btn--t:hover{background:var(--teal-deep)}
.btn--y{background:#fff; color:var(--teal); box-shadow:0 12px 26px -16px rgba(16,18,69,.65)}
.btn--y:hover{background:#f6f7fc}

.btn--g{background:rgba(255,255,255,.12); color:#fff}
.btn--g:hover{background:rgba(255,255,255,.2)}
.btn--o{border:1.5px solid var(--line); color:var(--ink)}
.btn--o:hover{border-color:var(--teal); color:var(--teal)}
.a{width:15px;height:15px;flex:0 0 auto}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--ink);align-items:center;justify-content:center;margin-left:auto;flex:0 0 auto}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:1.8px;background:#fff;position:relative;border-radius:2px}
.burger span::before,.burger span::after{content:'';position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- Bento hero ---------- */
.hero{padding:clamp(12px,2vw,22px) 0 clamp(46px,6vw,80px)}
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.bx{border-radius:var(--r); padding:clamp(26px,3vw,42px); position:relative; overflow:hidden}
.bx--main{grid-column:span 12; background:var(--teal); color:#fff; min-height:clamp(360px,38vw,540px); display:flex; flex-direction:column; justify-content:flex-end}
.bx--main::before{
  content:''; position:absolute; right:-16%; top:-30%; width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.20),rgba(255,255,255,0) 68%);
}
.bx--main h1{font-size:clamp(34px,4.6vw,64px); max-width:24ch; position:relative}
.bx--main h1 mark{background:#fff; color:var(--teal); padding:0 .12em; border-radius:8px; white-space:nowrap}
.bx--main p{margin-top:22px; color:rgba(255,255,255,.86); max-width:72ch; font-size:clamp(15.5px,1.2vw,17.5px); position:relative}
.bx--main .lede2{margin-top:14px; color:#fff; font-weight:600; max-width:66ch}
.bx--main .btns{display:flex; gap:11px; flex-wrap:wrap; margin-top:30px; position:relative}



.bx--photo{grid-column:span 8; min-height:230px; background:var(--teal-deep); color:#fff; display:flex; align-items:flex-end; padding:0}
/* IMAGE SLOT: hero photo tile */
.bx--photo > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bx--photo .t{position:relative; width:100%; padding:clamp(20px,2.4vw,32px); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:linear-gradient(transparent, rgba(16,18,69,.78))}
.bx--dark{grid-column:span 4; background:var(--ink); color:#fff; display:flex; flex-direction:column; justify-content:space-between; min-height:150px}
.bx--dark h3{font-size:21px}
.bx--dark p{color:rgba(255,255,255,.66); font-size:14.5px; margin-top:10px}

/* ---------- Sections ---------- */
.sec{padding:clamp(56px,7.5vw,110px) 0}
.sec--cream2{background:var(--cream-2)}
.head{display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end}
.head h2{font-size:clamp(30px,4.2vw,54px); margin-top:20px; max-width:20ch}
.head p{margin-top:16px; max-width:56ch; font-size:16.5px}
.head--c{grid-template-columns:1fr; text-align:center; justify-items:center}
.head--c h2,.head--c p{max-width:24ch; margin-left:auto; margin-right:auto}
.head--c p{max-width:56ch}

/* ---------- About bento ---------- */


















/* ---------- Areas ---------- */
















/* ---------- Global ---------- */
.gwrap{background:var(--yellow); border-radius:var(--r); padding:clamp(30px,4.4vw,64px); display:grid; grid-template-columns:1fr .82fr; gap:clamp(28px,4vw,56px); align-items:center; position:relative; overflow:hidden}
.gwrap h2{font-size:clamp(30px,4.2vw,52px); max-width:16ch}
.gwrap p{color:rgba(20,22,46,.72); margin-top:18px; max-width:46ch}








/* ---------- Certs ---------- */
.certs{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:clamp(30px,4vw,48px)}
.cc{background:var(--white); border:1px solid var(--line); border-radius:var(--r2); padding:26px 18px; text-align:center; transition:.28s}
.cc:hover{transform:translateY(-4px); border-color:var(--teal)}
.cc b{display:block; font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--teal)}
.cc span{display:block; margin-top:8px; font-size:12.5px; color:var(--muted)}

/* ---------- Impact ---------- */













/* ---------- Resources / rail ---------- */






/* IMAGE SLOT: resource thumbnails, 800x500 */








/* ---------- Careers ---------- */





/* IMAGE SLOT: careers */








/* ---------- News ---------- */


/* IMAGE SLOT: news thumbnails, 800x520 */












/* ---------- CTA ---------- */
.cta{background:var(--teal); color:#fff; border-radius:var(--r); padding:clamp(36px,5vw,70px); text-align:center; position:relative; overflow:hidden}
.cta::before{content:''; position:absolute; left:50%; top:-60%; width:80%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 65%)}
.cta h2{font-size:clamp(28px,4vw,50px); max-width:20ch; margin:0 auto; position:relative}
.cta p{color:rgba(255,255,255,.76); max-width:52ch; margin:18px auto 0; position:relative}
.cta .btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; position:relative}

/* ---------- Footer ---------- */
.ft{background:var(--teal-deep); color:rgba(255,255,255,.68); border-radius:var(--r) var(--r) 0 0; margin-top:clamp(46px,6vw,80px); padding:clamp(44px,5.5vw,76px) 0 0}
.ft__top{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(24px,4vw,50px); padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.14)}
.ft__b img{height:50px; width:auto}
.ft__b p{color:rgba(255,255,255,.66); margin-top:20px; font-size:14.5px; max-width:34ch}
.ft h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); font-weight:800}
.ft ul{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px}
.ft ul li{font-size:14.5px}
.ft .ft-strong{font-weight:600; color:#fff}
.ft .ft-block{line-height:1.5; color:rgba(255,255,255,.62)}
.ft .ft-block span{display:block; color:#fff; font-size:13px; font-weight:600; margin-bottom:3px}
.ft ul a{font-size:14.5px; transition:.2s}
.ft ul a:hover{color:#fff}
.subf{display:flex; gap:8px; margin-top:20px; max-width:340px}
.subf input{flex:1; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; border-radius:999px; padding:12px 18px; font-size:14px; outline:none}
.subf input::placeholder{color:rgba(255,255,255,.45)}
.subf input:focus{border-color:var(--yellow)}
.ft__bot{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; padding:22px 0 32px; font-size:13.5px}
.soc{display:flex; gap:9px; margin-left:auto}
.soc a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.09);display:grid;place-items:center;transition:.22s}
.soc a:hover{background:var(--yellow); color:var(--ink)}
.soc svg{width:15px;height:15px}


/* ==========================================================================
   CONTENT UPDATE, Sept 2026. Sections rebuilt around the client copy.
   ========================================================================== */
.grid12{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.sp4{grid-column:span 4} .sp6{grid-column:span 6}  .sp12{grid-column:span 12}

/* stat and image tiles, glance */
.gst{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,2.6vw,36px); display:flex; flex-direction:column; justify-content:center; min-height:176px; transition:.3s}
.gst:hover{transform:translateY(-4px); box-shadow:0 30px 60px -46px rgba(16,18,69,.9)}
.gst b{font-size:clamp(28px,3vw,42px); font-weight:800; letter-spacing:-.05em; line-height:1; color:var(--teal)}
.gst span{margin-top:10px; font-size:14px; color:var(--muted); font-weight:500; line-height:1.5}
.gimg{border-radius:var(--r); overflow:hidden; background:var(--teal-deep); position:relative; min-height:176px}
/* IMAGE SLOT: factory image */
.gimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gimg .t{position:absolute; left:0; right:0; bottom:0; padding:clamp(16px,2vw,24px);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:linear-gradient(transparent, rgba(16,18,69,.82))}

/* science at the core */
.sci{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,60px); align-items:start}
.sci h2{font-size:clamp(28px,3.6vw,46px); max-width:19ch; margin-top:20px}
.sci__p p{font-size:clamp(15.8px,1.2vw,17.5px)}
.sci__p p + p{margin-top:18px}

/* capability and block cards */
.blk{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px 32px; display:flex; flex-direction:column; transition:.3s}
.blk:hover{transform:translateY(-4px); box-shadow:0 30px 60px -46px rgba(16,18,69,.9)}
.blk--t{background:var(--teal); border-color:var(--teal); color:#fff}
.blk--t p{color:rgba(255,255,255,.84)}
.blk--t .blk__i{background:rgba(255,255,255,.16); color:#fff}
.blk__i{width:46px; height:46px; border-radius:14px; background:var(--yellow); display:grid; place-items:center; color:var(--teal)}
.blk__i svg{width:22px; height:22px}
.blk__n{font-size:11.5px; font-weight:800; letter-spacing:.14em; color:var(--teal)}
.blk--t .blk__n{color:rgba(255,255,255,.75)}
.blk h3{font-size:22px; margin-top:18px}
.blk p{margin-top:12px; font-size:14.8px}
.blk ul{list-style:none; margin:20px 0 0; padding:18px 0 0; display:grid; gap:10px; border-top:1px solid var(--line)}
.blk--t ul{border-color:rgba(255,255,255,.24)}
.blk li{font-size:14.4px; display:flex; gap:11px; align-items:baseline; color:var(--body)}
.blk li::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; flex:0 0 auto}
.blk--t li{color:rgba(255,255,255,.88)}

/* quality steps */
.qsteps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(32px,4vw,52px)}
.qs{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px 30px; transition:.3s}
.qs:hover{transform:translateY(-4px); box-shadow:0 30px 60px -46px rgba(16,18,69,.9)}
.qs b{font-size:11.5px; font-weight:800; letter-spacing:.14em; color:var(--teal)}
.qs h3{font-size:19px; margin-top:14px}
.qs p{margin-top:10px; font-size:14.3px}

/* R and D rows */
.rdimg{margin-top:24px; border-radius:var(--r2); overflow:hidden; aspect-ratio:16/9; background:var(--teal-deep); position:relative}
/* IMAGE SLOT: R and D image */
.rdimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rdrow{border-top:1px solid rgba(20,22,46,.14)}
.rdi{display:grid; grid-template-columns:58px 1fr; gap:16px; align-items:baseline;
  padding:17px 0; border-bottom:1px solid rgba(20,22,46,.14)}
.rdi b{font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--teal)}
.rdi h4{font-size:17.5px; font-weight:700; letter-spacing:-.025em; margin:0}
.rdi p{margin-top:7px; font-size:14.3px}

/* contact */
.cinfo{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(30px,4vw,48px)}
.ci{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px 30px}
.ci b{display:block; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--teal)}
.ci p{margin-top:14px; font-size:15.5px; line-height:1.55; color:var(--ink)}
.ci a{color:var(--teal); font-weight:600}
.ci small{display:block; margin-top:10px; font-size:13.5px; color:var(--muted)}

/* careers band */
.cbz{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(30px,4vw,48px)}
.cb{background:var(--cream-2); border-radius:var(--r); padding:28px 26px 30px}
.cb h3{font-size:19px}
.cb p{margin-top:10px; font-size:14.4px}

@media (max-width:1024px){
  .sp4{grid-column:span 6} 
  .gimg{grid-column:span 12; min-height:280px}
  .sci{grid-template-columns:1fr}
  .qsteps{grid-template-columns:1fr 1fr}
  .cinfo,.cbz{grid-template-columns:1fr}
}
@media (max-width:680px){
  .sp4,.sp6{grid-column:span 12}
  .qsteps{grid-template-columns:1fr}
  .rdi{grid-template-columns:1fr}
  .rdi b{display:block; margin-bottom:6px}
}


/* media on block cards and the careers banner */
.blk__m{margin:-30px -28px 22px; aspect-ratio:16/10; overflow:hidden; background:var(--teal-deep);
  border-radius:var(--r) var(--r) 0 0; position:relative}
/* IMAGE SLOT: manufacturing block card */
.blk__m img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.blk:hover .blk__m img{transform:scale(1.05)}
.cimg{position:relative; border-radius:var(--r); overflow:hidden; background:var(--teal-deep);
  aspect-ratio:21/7; margin-top:clamp(28px,3.4vw,44px)}
/* IMAGE SLOT: careers banner */
.cimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cimg::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(16,18,69,.55), rgba(16,18,69,0) 62%)}
.cimg span{position:absolute; left:0; bottom:0; z-index:2; padding:clamp(18px,2.2vw,28px);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff}
@media (max-width:680px){ .cimg{aspect-ratio:16/10} }


/* ---------- Full bleed band ---------- */
.fb{position:relative; min-height:clamp(320px,42vw,500px); display:grid; overflow:hidden; background:var(--teal-deep)}
.fb > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.fb__c{position:relative; display:flex; align-items:flex-end; padding:clamp(32px,5vw,72px) 0; color:#fff;
  background:linear-gradient(0deg, rgba(16,18,69,.90) 10%, rgba(16,18,69,.30) 60%, rgba(16,18,69,.15) 100%)}
.fb h2{font-size:clamp(28px,4vw,54px); max-width:18ch; margin-top:20px}
.fb p{margin-top:16px; color:rgba(255,255,255,.78); max-width:48ch}

/* ---------- Reveal ---------- */
.rv{opacity:0; transform:translateY(20px) scale(.99); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .nav{display:none}
  .hdr__in > .btn{display:none}
  .burger{display:flex}
  
  .bx--photo{grid-column:span 12}
  .bx--dark{grid-column:span 12}
  
  
  .certs{grid-template-columns:repeat(3,1fr)}
  
  
  .ft__top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  
  
  .gwrap{grid-template-columns:1fr}
  
  .head{grid-template-columns:1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  
  
  
  
  .certs{grid-template-columns:repeat(2,1fr)}
  
  
  
  .ft__top{grid-template-columns:1fr}
}

/* mobile menu */
.mob{position:fixed; inset:0; background:var(--cream); z-index:95; padding:22px var(--pad); display:none; flex-direction:column}
.mob.open{display:flex}
.mob__t{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mob__t img{height:42px; width:auto}
.mob a.m{font-size:28px; font-weight:800; letter-spacing:-.04em; padding:12px 0; border-bottom:1px solid var(--line)}
.x{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font-size:22px;line-height:1;display:grid;place-items:center}

/* ==========================================================================
   MULTI PAGE COMPONENTS
   Everything below extends the approved homepage design language to the
   inner page templates. Tokens, radii, spacing and type scale are unchanged.
   ========================================================================== */

/* accessibility and admin bar */
.skip{position:absolute; left:-9999px; top:0; background:var(--teal); color:#fff; padding:12px 18px; border-radius:0 0 12px 0; z-index:999; font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--teal-2); outline-offset:3px; border-radius:6px}
.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){ .admin-bar .hdr{top:46px} }
:target{scroll-margin-top:110px}
[id]{scroll-margin-top:110px}

/* ---------- Page hero ---------- */
.phero{padding:clamp(10px,1.6vw,18px) 0 0}
.phero__in{
  background:var(--teal); color:#fff; border-radius:var(--r);
  padding:clamp(34px,5vw,76px) clamp(26px,4vw,64px) clamp(38px,5vw,72px);
  position:relative; overflow:hidden;
}
.phero__in::before{
  content:''; position:absolute; right:-14%; top:-42%; width:64%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.20),rgba(255,255,255,0) 68%);
}
.phero__g{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,58px); align-items:end; position:relative}
.phero h1{font-size:clamp(34px,5.4vw,66px); margin-top:22px; max-width:17ch}
.phero p{color:rgba(255,255,255,.80); margin-top:18px; max-width:54ch; font-size:clamp(15.8px,1.2vw,17.5px)}
.phero p + p{margin-top:14px}
.phero .btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.phero__g--plain{grid-template-columns:1fr}
.crumb{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.62); position:relative}
.crumb a{color:rgba(255,255,255,.62)}
.crumb a:hover{color:#fff}
.crumb span{opacity:.5}
.phero__m{border-radius:var(--r2); overflow:hidden; aspect-ratio:4/3; background:var(--teal-deep); position:relative}
.phero__m img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
@media (max-width:900px){ .phero__g{grid-template-columns:1fr} .phero__m{aspect-ratio:16/9} }

/* A full bleed band directly after the page hero needs the gap a section would
   normally have supplied. Quality is the page that does this. */
.phero + .fb{margin-top:clamp(44px,6vw,86px)}

/* ---------- Prose and split ---------- */
.prose{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,60px); align-items:start}
.prose h2{font-size:clamp(28px,3.6vw,46px); max-width:19ch; margin-top:20px}
.prose__t p{font-size:clamp(15.8px,1.2vw,17.5px)}
.prose__t p + p{margin-top:18px}
@media (max-width:900px){ .prose{grid-template-columns:1fr} }

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); align-items:center}
.split--rev .split__m{order:2}
.split__m{border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--teal-deep); position:relative}
.split__m img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.split h2{font-size:clamp(26px,3.2vw,42px); max-width:18ch; margin-top:18px}
.split p{margin-top:16px}
.split p + p{margin-top:14px}
@media (max-width:900px){ .split{grid-template-columns:1fr} .split--rev .split__m{order:0} }

/* ---------- Pull quote ---------- */
.pq{background:var(--yellow-2); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(28px,3.4vw,48px); margin-top:clamp(30px,4vw,48px); text-align:center}
.pq p{font-size:clamp(19px,2.3vw,28px); font-weight:700; letter-spacing:-.03em; line-height:1.28;
  color:var(--ink); max-width:34ch; margin:0 auto}

/* ---------- Bullet list panel ---------- */
.bl{list-style:none; margin:clamp(24px,3vw,38px) 0 0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(2,1fr)}
.bl li{background:var(--white); border:1px solid var(--line); border-radius:var(--r2);
  padding:17px 20px 17px 50px; position:relative; font-size:15px; color:var(--ink); font-weight:600}
.bl li::before{
  content:''; position:absolute; left:19px; top:50%; width:16px; height:16px; margin-top:-8px;
  border-radius:50%; background:var(--teal);
}
.bl li::after{
  content:''; position:absolute; left:24px; top:50%; width:5px; height:8px; margin-top:-5px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(43deg);
}

@media (max-width:760px){ .bl{grid-template-columns:1fr} }

/* ---------- Dosage form cards ---------- */
.dfg{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(22px,2.6vw,32px)}
.df{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px 28px; transition:.3s}
.df:hover{transform:translateY(-4px); box-shadow:0 30px 60px -46px rgba(16,18,69,.9)}
.df b{display:block; font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--ink)}
.df p{margin-top:10px; font-size:14.4px}
@media (max-width:900px){ .dfg{grid-template-columns:1fr} }

/* block heading rule */
.brule{display:flex; align-items:baseline; gap:16px; margin-top:clamp(40px,5vw,72px);
  padding-bottom:16px; border-bottom:1px solid var(--line)}
.brule h3{font-size:clamp(22px,2.6vw,32px)}
.brule span{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--teal)}

/* ---------- Leadership placeholders ---------- */
.lead{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(30px,4vw,48px)}
.lp{background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.lp__m{aspect-ratio:1; background:var(--cream-2); position:relative}
.lp__m img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.lp__b{padding:20px 22px 24px}
.lp__b b{display:block; height:13px; width:62%; border-radius:999px; background:rgba(20,22,46,.14)}
.lp__b span{display:block; margin-top:11px; height:11px; width:44%; border-radius:999px; background:rgba(20,22,46,.09)}
.lp__b em{display:block; margin-top:16px; font-style:normal; font-size:11.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
/* a leadership card with real content, the grey bars become type */
.lp--set .lp__b b{height:auto; width:auto; background:none; font-size:17.5px; font-weight:800;
  letter-spacing:-.03em; line-height:1.2; color:var(--ink)}
.lp--set .lp__b span{height:auto; width:auto; background:none; margin-top:7px; font-size:13.5px;
  font-weight:600; line-height:1.4; color:var(--muted)}
@media (max-width:1024px){ .lead{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .lead{grid-template-columns:1fr} }

/* ---------- To be confirmed notice ---------- */
.tbc{display:flex; gap:16px; align-items:flex-start; background:var(--yellow-2);
  border:1px dashed rgba(32,36,158,.35); border-radius:var(--r2);
  padding:20px 24px; margin-top:clamp(24px,3vw,36px)}
.tbc svg{width:20px; height:20px; color:var(--teal); flex:0 0 auto; margin-top:2px}
.tbc p{font-size:14.4px; color:var(--ink-2)}
.tbc b{color:var(--teal)}

/* ---------- Forms ---------- */
.fwrap{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px,3.4vw,46px); margin-top:clamp(30px,4vw,48px)}
.frm{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.fld{display:flex; flex-direction:column; gap:8px}
.fld--w{grid-column:span 2}
.fld label{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.fld label i{font-style:normal; color:var(--teal)}
.fld input,.fld select,.fld textarea{
  width:100%; background:var(--cream-2); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; font-size:15.5px; color:var(--ink); transition:border-color .2s, background .2s;
}
.fld textarea{min-height:150px; resize:vertical; line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--teal); background:#fff}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted)}
.fld input[type=file]{padding:11px 14px; font-size:14px}
.fld small{font-size:12.5px; color:var(--muted)}
.frm .btn{justify-self:start}
.fld .btn{align-self:flex-start}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:760px){ .frm{grid-template-columns:1fr} .fld--w{grid-column:span 1} }

.msg{border-radius:var(--r2); padding:16px 20px; margin-bottom:22px; font-size:15px; font-weight:600}



/* ---------- Editor content, generic page and 404 ---------- */
.ed{max-width:78ch}
.ed h2{font-size:clamp(26px,3.2vw,40px); margin-top:38px}
.ed h3{font-size:clamp(20px,2.2vw,26px); margin-top:30px}
.ed p{margin-top:16px}
.ed ul,.ed ol{margin-top:16px; padding-left:22px; color:var(--body)}
.ed li{margin-top:8px}
.ed a{color:var(--teal); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.ed img{border-radius:var(--r2); margin-top:24px}
.ed blockquote{margin:26px 0 0; padding:20px 26px; border-left:3px solid var(--teal);
  background:var(--cream-2); border-radius:0 var(--r2) var(--r2) 0}
.ed table{width:100%; border-collapse:collapse; margin-top:24px; font-size:15px}
.ed th,.ed td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line)}
.ed th{font-weight:800; color:var(--ink)}

/* nav active state already defined, this keeps it for real page links */
.nav a[aria-current="page"]{background:var(--teal); border-color:var(--teal); color:#fff}
.mob a.m[aria-current="page"]{color:var(--teal)}

/* print */
@media print{
  .hdr,.mob,.burger,.ft,.btns,.fwrap{display:none !important}
  .rv{opacity:1 !important; transform:none !important}
  body{font-size:12pt}
}