/* ============================================================
   APEX SCIENTIFIC SOLUTIONS — Design System
   Palette drawn from the brand's own hero artwork.
   Display: Space Grotesk / Body: IBM Plex Sans / Data: IBM Plex Mono
   ============================================================ */

:root{
  /* Color */
  --navy-950:#050f1e;
  --navy-900:#0a1f38;
  --navy-800:#12304f;
  --navy-brand:#102a43;
  --blue-600:#1c4f7c;
  --blue-500:#2c6e9e;
  --teal-500:#4ea4ab;
  --teal-400:#63b8ba;
  --teal-300:#8fd8d3;
  --gold-500:#d1a13f;
  --white:#ffffff;
  --ink-900:#0d1b2a;
  --ink-700:#3c5164;
  --ink-500:#5f7284;
  --mist-50:#f5f9fa;
  --mist-100:#e9f1f3;
  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(13,27,42,.1);

  /* Type */
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* Layout */
  --max-w:1240px;
  --gutter:clamp(20px, 5vw, 64px);
  --radius:14px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0 0 .5em;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--navy-950);
}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}

.wrap{
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal-500);
  display:inline-flex;
  align-items:center;
  gap:.55em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--teal-500);
  display:inline-block;
}
.on-dark .eyebrow{color:var(--teal-300);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  padding:.9em 1.6em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--teal-400);outline-offset:3px;}
.btn-primary{
  background:var(--teal-500);
  color:var(--navy-950);
}
.btn-primary:hover{background:var(--teal-400); transform:translateY(-2px); box-shadow:0 10px 24px rgba(78,164,171,.35);}
.btn-ghost{
  background:transparent;
  border-color:var(--line-dark);
  color:var(--white);
}
.btn-ghost:hover{border-color:var(--teal-300); color:var(--teal-300); transform:translateY(-2px);}
.btn-outline-dark{
  background:transparent;
  border-color:var(--line-light);
  color:var(--navy-950);
}
.btn-outline-dark:hover{border-color:var(--blue-500); color:var(--blue-600); transform:translateY(-2px);}
.btn-arrow{transition:transform .18s ease;}
.btn:hover .btn-arrow{transform:translateX(3px);}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--navy-brand);
  border-bottom:1px solid var(--line-dark);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:14px;
}
.logo-link{display:flex; align-items:center;}
.logo-link img{height:64px; width:auto; display:block;}
.footer-brand img{height:70px; width:auto; display:block;}
.nav-links{
  display:flex;
  align-items:center;
  gap:2.4rem;
}
.nav-links a{
  font-size:.92rem;
  font-weight:500;
  color:#cfe1ec;
  position:relative;
  padding-block:4px;
}
.nav-links a:hover{color:var(--white);}
.nav-links a.active{color:var(--teal-300);}
.nav-links a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--teal-400); border-radius:2px;
}
.nav-links .btn-primary{display:none;}
.nav-cta{display:flex; align-items:center; gap:1.6rem;}
.nav-toggle{
  display:none;
  background:none;border:none;color:var(--white);
  width:38px;height:38px;cursor:pointer;
}
.nav-toggle svg{width:100%;height:100%;}

@media (max-width:860px){
  .nav-links{
    position:fixed;
    top:64px; left:0; right:0;
    height:calc(100vh - 64px);
    height:calc(100dvh - 64px);
    background:var(--navy-950);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    padding:2.5rem var(--gutter);
    gap:1.6rem;
    overflow-y:auto;
    transform:translateY(-110%);
    transition:transform .3s ease;
    pointer-events:none;
  }
  .nav-links.open{transform:translateY(0); pointer-events:auto;}
  .nav-links a{font-size:1.1rem;}
  .nav-cta .btn-primary{display:none;}
  .nav-links .btn-primary{display:inline-flex; margin-top:.5rem;}
  .nav-toggle{display:block;}
}

/* ---------- Sections generic ---------- */
section{padding-block:clamp(56px,8vw,108px);}
.section-head{max-width:640px; margin-bottom:3rem;}
.section-head.center{margin-inline:auto; text-align:center;}
.on-dark{background:var(--navy-950); color:var(--white);}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--white);}
.on-mist{background:var(--mist-50);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--navy-950);
  color:var(--white);
  overflow:hidden;
  padding-block:clamp(48px,7vw,60px) 0;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,5vw,60px);
  align-items:center;
  position:relative;
  z-index:2;
}
.hero-copy h1{
  font-size:clamp(2.3rem, 4.6vw, 3.6rem);
  color:var(--white);
}
.hero-copy h1 .accent{color:var(--teal-300);}
.hero-copy p.lede{
  font-size:1.08rem;
  color:#c9dbe6;
  max-width:46ch;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin-top:1.8rem; margin-bottom:2.6rem;
}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,auto);
  gap:1.6rem;
  padding-top:1.8rem;
  border-top:1px solid var(--line-dark);
}
@media (max-width:700px){
  .hero-stats{grid-template-columns:repeat(2,1fr);}
}
.hero-stat{display:flex; align-items:flex-start; gap:.65rem;}
.hero-stat svg{flex:none; width:22px;height:22px; color:var(--teal-400); margin-top:2px;}
.hero-stat span{display:block; font-size:.84rem; color:#c9dbe6; line-height:1.3;}

.hero-media{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:4/5;
  isolation:isolate;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,15,30,0) 40%, rgba(5,15,30,.75) 100%);
}
.hero-media-tag{
  position:absolute; left:18px; bottom:18px; z-index:2;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--white);
  background:rgba(10,25,45,.55);
  border:1px solid var(--line-dark);
  backdrop-filter:blur(6px);
  padding:.5em .8em;
  border-radius:8px;
}
.hero-bg-lines{
  position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:radial-gradient(circle at 15% 20%, rgba(78,164,171,.14), transparent 40%),
                    radial-gradient(circle at 85% 80%, rgba(44,110,158,.18), transparent 45%);
}

/* ---------- Molecular divider (signature motif) ---------- */
.thread{
  display:flex; align-items:center; gap:10px;
  max-width:var(--max-w); margin:0 auto; padding-inline:var(--gutter);
}
.thread::before,.thread::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-light) 20%, var(--line-light) 80%, transparent);
}
.thread .node{
  width:7px;height:7px;border-radius:50%;
  background:var(--teal-500);
  box-shadow:0 0 0 4px rgba(78,164,171,.15);
}
.on-dark .thread::before,.on-dark .thread::after{
  background:linear-gradient(90deg, transparent, var(--line-dark) 20%, var(--line-dark) 80%, transparent);
}

/* ---------- Cards / grids ---------- */
.grid{display:grid; gap:1.6rem;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
}

.card{
  background:var(--white);
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  padding:1.9rem 1.7rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(13,27,42,.08);
  border-color:transparent;
}
.icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;
  background:var(--mist-100);
  color:var(--blue-600);
  margin-bottom:1.1rem;
  flex:none;
}
.icon svg{width:22px;height:22px; flex:none;}
.card h3{font-size:1.08rem; margin-bottom:.5rem;}
.card p{color:var(--ink-700); font-size:.94rem; margin-bottom:0;}

.card-dark{
  background:var(--navy-900);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:1.9rem 1.7rem;
  color:var(--white);
}
.card-dark .icon{background:rgba(78,164,171,.14); color:var(--teal-300);}
.card-dark h3{color:var(--white);}
.card-dark p{color:#c9dbe6; font-size:.94rem;}

/* ---------- Split section (image + text) ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
@media (max-width:860px){ .split{grid-template-columns:1fr;} }
.split.reverse .split-media{order:2;}
.split-media img{border-radius:var(--radius);}
.split-media{position:relative;}

/* ---------- Mission band ---------- */
.mission-band{
  background:linear-gradient(135deg, var(--navy-950), var(--navy-800));
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.mission-band blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:500;
  line-height:1.35;
  max-width:820px;
  margin:0 auto;
  text-align:center;
  color:var(--white);
}
.mission-band .wrap{position:relative; z-index:2;}
.mission-dna{
  position:absolute; top:-10%; right:-6%; width:420px; height:420px; z-index:1;
  opacity:.14;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--mist-50);
  text-align:center;
}
.cta-band .wrap{max-width:720px;}
.cta-band h2{font-size:clamp(1.7rem,3.2vw,2.3rem);}
.cta-actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-brand);
  color:#a9bfcf;
  padding-top:clamp(48px,6vw,72px);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:2.4rem;
  padding-bottom:2.6rem;
  border-bottom:1px solid var(--line-dark);
}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}
.footer-grid img{height:30px; margin-bottom:1rem;}
.footer-grid p{font-size:.9rem; max-width:34ch;}
.footer-col h4{
  color:var(--white);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
}
.footer-col ul li{margin-bottom:.7rem; font-size:.92rem;}
.footer-col a:hover{color:var(--teal-300);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.8rem;
  padding-block:1.6rem;
  font-size:.8rem;
  font-family:var(--font-mono);
  color:#7f97a8;
}

/* ---------- Page header (About / Contact) ---------- */
.page-header{
  background:var(--navy-950);
  color:var(--white);
  padding-block:clamp(64px,9vw,110px) clamp(48px,6vw,70px);
  position:relative;
  overflow:hidden;
}
.page-header h1{color:var(--white); font-size:clamp(2.1rem,4vw,3rem); max-width:18ch;}
.page-header p{color:#c9dbe6; max-width:56ch; font-size:1.05rem;}
.page-header-lines{position:absolute; inset:0; opacity:.5; z-index:0;
  background-image:radial-gradient(circle at 90% 10%, rgba(78,164,171,.18), transparent 45%);
}
.page-header .wrap{position:relative; z-index:1;}

/* ---------- Founder quote ---------- */
.founder{
  display:grid;
  grid-template-columns:.9fr 1.4fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
@media (max-width:860px){ .founder{grid-template-columns:1fr;} }
.founder-quote{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.4vw,1.55rem);
  color:var(--navy-950);
  line-height:1.5;
}
.founder-sig{margin-top:1.6rem;}
.founder-sig strong{display:block; font-family:var(--font-display); font-size:1.05rem; margin-bottom:.3rem;}
.founder-sig span{display:block; font-family:var(--font-mono); font-size:.8rem; color:var(--ink-500); letter-spacing:.03em; margin-top:.15rem;}
.founder-mark{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--mist-100);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-600);
  margin-bottom:1.4rem;
}
.founder-mark svg{width:28px;height:28px;}

/* ---------- Values (connected sequence) ---------- */
.values-list{
  position:relative;
  border-left:1px solid var(--line-light);
  padding-left:2.4rem;
  display:flex; flex-direction:column; gap:2.4rem;
}
.value-item{position:relative;}
.value-item::before{
  content:"";
  position:absolute; left:-2.52rem; top:.3rem;
  width:10px;height:10px;border-radius:50%;
  background:var(--teal-500);
  box-shadow:0 0 0 5px var(--mist-100);
}
.value-item h3{font-size:1.15rem; margin-bottom:.35rem;}
.value-item p{color:var(--ink-700); max-width:60ch; margin:0;}

/* ---------- Positioning pull quote ---------- */
.pull-quote{
  background:var(--mist-50);
  text-align:center;
}
.pull-quote blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  max-width:820px;
  margin:0 auto;
  color:var(--navy-950);
  line-height:1.5;
}
.pull-quote cite{
  display:block; margin-top:1.4rem;
  font-family:var(--font-mono);
  font-style:normal;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--teal-500);
}

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,5vw,64px);
  align-items:start;
}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{
  display:flex; gap:1rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line-light);
}
.contact-card:first-child{padding-top:0;}
.contact-card .icon{
  flex:none;
  width:42px;height:42px;
  border-radius:10px;
  background:var(--mist-100);
  color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;
}
.contact-card .icon svg{width:20px;height:20px;}
.contact-card h4{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-mono); color:var(--ink-500); margin-bottom:.4rem;}
.contact-card p{margin:0; font-size:1rem; color:var(--navy-950);}
.contact-card a:hover{color:var(--blue-600);}

.map-wrap{
  margin-top:2rem;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line-light);
  aspect-ratio:16/10;
}
.map-wrap iframe{width:100%;height:100%;border:0;}

.form-panel{
  background:var(--mist-50);
  border-radius:20px;
  padding:clamp(24px,4vw,44px);
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
@media (max-width:520px){ .form-row{grid-template-columns:1fr;} }
.field{margin-bottom:1.2rem;}
.field label{
  display:block; font-family:var(--font-mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-500);
  margin-bottom:.5rem;
}
.field input, .field select, .field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:.96rem;
  padding:.85em 1em;
  border-radius:9px;
  border:1px solid var(--line-light);
  background:var(--white);
  color:var(--ink-900);
}
.field textarea{resize:vertical; min-height:120px;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(78,164,171,.15);
}
.form-note{font-size:.82rem; color:var(--ink-500); margin-top:1rem;}
.form-success{
  display:none;
  background:rgba(78,164,171,.12);
  border:1px solid rgba(78,164,171,.35);
  color:#1b5c60;
  padding:1em 1.2em;
  border-radius:10px;
  font-size:.92rem;
  margin-top:1rem;
}

/* ---------- Focus tag pills ---------- */
.tag-row{
  display:flex; flex-wrap:wrap; gap:.7rem;
  justify-content:center;
}
.tag-pill{
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.03em;
  color:#c9dbe6;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-dark);
  padding:.55em 1.1em;
  border-radius:999px;
  white-space:nowrap;
}

/* ---------- Founder photo ---------- */
.founder-photo{
  width:100%;
  max-width:280px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(13,27,42,.18);
  margin-bottom:1.4rem;
}
.founder-photo img{width:100%; height:100%; object-fit:cover; aspect-ratio:1/1;}

/* ---------- Why-us checklist ---------- */
.check-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem 2rem;
}
@media (max-width:700px){ .check-list{grid-template-columns:1fr;} }
.check-item{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.96rem; color:var(--ink-700);
}
.check-item svg{flex:none; width:19px; height:19px; margin-top:.15em; color:var(--teal-500);}
.on-dark .check-item{color:#c9dbe6;}
.on-dark .check-item svg{color:var(--teal-300);}

/* ---------- Value chain (business model) ---------- */
.chain{
  display:flex; flex-direction:column; gap:0;
}
.chain-stage{
  background:var(--white);
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  padding:1.8rem 2rem;
}
.chain-stage.mid{
  background:var(--navy-950);
  border-color:var(--navy-950);
  color:var(--white);
}
.chain-stage.mid h3{color:var(--white);}
.chain-stage h3{font-size:1.05rem; margin-bottom:.6rem;}
.chain-stage .eyebrow{margin-bottom:.5rem;}
.chain-tags{display:flex; flex-wrap:wrap; gap:.5rem;}
.chain-tags span{
  font-size:.82rem;
  padding:.4em .85em;
  border-radius:999px;
  background:var(--mist-100);
  color:var(--ink-700);
}
.chain-stage.mid .chain-tags span{
  background:rgba(255,255,255,.08);
  color:#c9dbe6;
  border:1px solid var(--line-dark);
}
.chain-arrow{
  display:flex; align-items:center; justify-content:center;
  padding:.5rem 0;
  color:var(--teal-500);
}
.chain-arrow svg{width:22px; height:22px; transform:rotate(90deg);}

/* ---------- Solutions portfolio / detail pages ---------- */
.portfolio-card{
  background:var(--white);
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  padding:1.8rem 1.7rem;
  transition:transform .2s ease, box-shadow .2s ease;
  display:block;
}
.portfolio-card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(13,27,42,.08);}
.portfolio-card .icon{margin-bottom:1.2rem;}
.portfolio-card h3{font-size:1.1rem; margin-bottom:.5rem;}
.portfolio-card p{color:var(--ink-700); font-size:.93rem; margin:0;}

.solution-section{border-top:1px solid var(--line-light);}
.solution-section:first-of-type{border-top:none;}
.solution-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  margin-top:2rem;
}
@media (max-width:760px){ .solution-columns{grid-template-columns:1fr;} }
.solution-columns h4{
  font-family:var(--font-mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--blue-600);
  margin-bottom:1rem;
}
.solution-columns ul{display:flex; flex-direction:column; gap:.65rem;}
.solution-columns li{
  font-size:.95rem; color:var(--ink-700);
  padding-left:1.3rem; position:relative;
}
.solution-columns li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%;
  background:var(--teal-500);
}
.solution-note{
  margin-top:1.6rem;
  font-size:.85rem;
  color:var(--ink-500);
  font-style:italic;
}
.solution-commitment{
  margin-top:1.8rem;
  padding:1.3rem 1.5rem;
  background:var(--mist-50);
  border-left:3px solid var(--teal-500);
  border-radius:0 10px 10px 0;
  font-size:.98rem;
  color:var(--ink-900);
}
.solution-commitment strong{display:block; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--teal-500); margin-bottom:.4rem; font-weight:600;}

/* ---------- Utility ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}