/* ============================================================
   SCIENTIFIC — design tokens
   Two-family system: Inter for headings/labels (structural,
   technical), DM Sans for reading copy (warm, legible). Both are
   self-hosted variable fonts (OFL-licensed) — see fonts/FONT-LICENSE.txt
   ============================================================ */
:root{
  --font-head:"Inter Var",Inter,"Segoe UI",system-ui,Arial,sans-serif;
  --font-body:"DM Sans Var","DM Sans","Segoe UI",system-ui,Arial,sans-serif;

  --ink:#10243A;          /* primary text / dark surface */
  --teal:#087F8C;         /* brand accent */
  --teal-strong:#096b75;  /* accent hover */
  --teal-soft:#73bdc5;    /* accent on dark */

  --text-secondary:#57697a; /* body copy, secondary */
  --text-tertiary:#5b7281;  /* captions, fine print */

  --bg:#FFFFFF;           /* page background */
  --bg-soft:#F6F9FB;      /* gentle section tint, barely-there */
  --border:#DCE5EC;       /* hairlines on light */
  --border-strong:#8ca5b2;

  --cta-bg:#EAF3F4;       /* pale-teal CTA panels */
  --cta-border:#C6E2E4;

  /* type scale */
  --text-2xs:12px;
  --text-xs:13px;
  --text-sm:14px;
  --text-base:16px;
  --text-label:11px;
}

@font-face{font-family:"Inter Var";src:url('fonts/Inter-Var.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans Var";src:url('fonts/DMSans-Var.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}

/* ============================================================
   Reset & base
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:145px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:6px}
img{display:block;max-width:100%;height:auto;-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-touch-callout:none}
figure{margin:0}
p{line-height:1.6;margin:0}

h1,h2,h3{font-family:var(--font-head);margin:0}
h1{font-weight:460;letter-spacing:-.02em;line-height:1.04}
h2{font-weight:520;letter-spacing:-.015em;line-height:1.08;font-size:clamp(30px,3.1vw,46px)}
h3{font-weight:600;letter-spacing:-.005em;line-height:1.15;font-size:22px}
em{font-style:normal;color:var(--teal)}

.wrap,.site-header,.bar-inner{width:min(1320px,calc(100% - 112px));margin-inline:auto}

/* Shared "structural label" treatment: eyebrow / small-label */
.eyebrow,.small-label{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:var(--text-label);font-weight:600;color:var(--teal)}
.eyebrow{margin-bottom:28px}

/* ============================================================
   Top utility bar — intentionally dark; a thin brand strip, not
   a content section, so it's exempt from the "keep it light" pass
   ============================================================ */
.domain-bar{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff;font-size:var(--text-2xs);letter-spacing:.02em}
.bar-inner{display:flex;align-items:center;justify-content:space-between;min-height:43px}
.domain-bar strong{font-weight:500}
.domain-bar a{background:var(--teal);padding:8px 17px;margin:5px 0;font-size:var(--text-2xs);display:flex;gap:22px;align-items:center;border-radius:2px}
.domain-bar a:hover{background:var(--teal-strong)}

/* ============================================================
   Header & nav
   ============================================================ */
.site-header{display:flex;align-items:center;justify-content:space-between;height:104px;border-bottom:1px solid var(--border)}
.wordmark{display:block;width:198px}
.wordmark img{width:100%}
nav{display:flex;gap:31px;font-size:var(--text-xs)}
nav a{padding:12px 0;border-bottom:1px solid transparent}
nav a:hover{color:var(--teal);border-color:var(--teal)}
.menu-button{display:none}

/* ============================================================
   Hero — full white, no tint
   ============================================================ */
.hero{display:grid;grid-template-columns:43% 57%;align-items:center;min-height:650px;padding-block:75px 64px;gap:0}
.hero h1{font-size:clamp(44px,4.6vw,72px);line-height:1.04;font-weight:460}
.lead{font-size:var(--text-base);color:var(--text-secondary);max-width:370px;margin-top:28px}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;font-size:var(--text-xs);font-weight:500;padding-bottom:10px;border-bottom:1px solid var(--border-strong);margin-top:32px;background:none;border-top:0;border-left:0;border-right:0}
.text-link:hover{color:var(--teal);border-bottom-color:var(--teal)}
.hero-art{padding-left:20px;position:relative}
.hero-art img{width:100%;aspect-ratio:3/2;object-fit:cover;mix-blend-mode:multiply}
.hero-art figcaption{display:flex;justify-content:space-between;font-size:var(--text-2xs);color:var(--text-tertiary);letter-spacing:.02em;margin-top:14px;gap:12px}

/* ============================================================
   Intro
   ============================================================ */
.intro{display:grid;grid-template-columns:29% 71%;padding-block:58px 90px;border-top:1px solid var(--border)}
.intro .eyebrow{margin-top:8px}
.intro p:not(.eyebrow){max-width:675px;margin-top:28px;font-size:var(--text-base);color:var(--text-secondary)}

/* ============================================================
   Section generic
   ============================================================ */
.section{padding-block:95px}
.section-heading{margin-bottom:45px}
.section-heading .eyebrow{margin-bottom:22px}

/* Platform */
.platform{border-top:1px solid var(--border)}
.platform-grid{display:grid;grid-template-columns:56% 44%;gap:0;align-items:center}
.platform-grid figure{padding-right:65px}
.platform-grid img{aspect-ratio:3/2;object-fit:cover;mix-blend-mode:multiply}
.platform-grid figcaption{font-size:var(--text-2xs);color:var(--text-tertiary);margin-top:16px}
.section-summary{font-size:var(--text-base);color:var(--text-secondary);max-width:440px}
.module-tabs{display:flex;gap:23px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-top:32px}
.module-tabs button{padding:12px 0;background:none;border:0;border-bottom:2px solid transparent;font-size:var(--text-xs);white-space:nowrap}
.module-tabs button[aria-selected=true]{border-bottom-color:var(--teal);color:var(--teal)}
.module-panel{padding-top:28px;min-height:240px}
.module-panel h3{margin-top:18px;font-size:clamp(26px,2.4vw,32px);font-weight:540}
.module-panel p{font-size:var(--text-sm);color:var(--text-secondary);margin-top:20px;max-width:410px}
.platform-principle{display:flex;gap:15px;align-items:center;margin-top:25px;padding-top:22px;border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--text-tertiary)}
.tiny-dot{width:7px;height:7px;border-radius:50%;background:var(--teal)}

/* Research domains */
.domains{background:var(--bg-soft)}
.heading-row{display:flex;justify-content:space-between;align-items:end;gap:60px}
.heading-row>p{max-width:350px;color:var(--text-secondary);font-size:var(--text-sm)}
.division-tabs{display:flex;border-bottom:1px solid var(--border);gap:0}
.division-tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;text-align:left;padding:20px 12px 20px 0;font-size:var(--text-xs)}
.division-tabs button[aria-selected=true]{color:var(--teal);border-bottom-color:var(--teal)}
.division-panel{display:grid;grid-template-columns:minmax(0,37fr) minmax(0,63fr);gap:35px;align-items:center;padding-top:45px;overflow:hidden}
.division-copy{padding-right:25px}
.division-copy h3{font-size:clamp(28px,2.8vw,38px);margin-top:20px;font-weight:540}
.division-copy>p:not(.small-label){font-size:var(--text-sm);color:var(--text-secondary);margin-top:24px}
.division-copy ul{padding:0;list-style:none;margin:25px 0 30px;font-size:var(--text-xs);line-height:2.1}
.division-copy li:before{content:'—';margin-right:12px;color:var(--teal)}
.concept-label{font-size:var(--text-2xs);color:var(--text-tertiary);letter-spacing:.02em}
.division-panel img{aspect-ratio:3/2;object-fit:cover;width:100%;mix-blend-mode:multiply}

/* Systems / product grid */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.product-grid figure{background:var(--bg-soft);margin-bottom:27px;overflow:hidden}
.product-grid img{aspect-ratio:3/2;object-fit:cover;transition:transform .6s}
.product-grid article:hover img{transform:scale(1.035)}
.product-grid h3{font-size:24px;margin-top:14px;letter-spacing:-.01em}
.product-grid article>p:not(.small-label){font-size:var(--text-sm);color:var(--text-secondary);margin-top:17px;max-width:310px}
.product-grid .text-link{margin-top:23px}

/* Approach / steps (these four ARE a sequence, so numbering stays) */
.approach{border-top:1px solid var(--border);padding-top:75px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:42px}
.steps article{border-top:1px solid var(--border-strong);padding-top:20px}
.steps span{font-family:var(--font-head);font-size:var(--text-xs);font-weight:600;color:var(--teal)}
.steps h3{margin-top:16px;font-size:20px}
.steps p{font-size:var(--text-sm);color:var(--text-secondary);margin-top:17px}

/* ============================================================
   Vision — the one deliberate dark moment on the page. Keeping a
   single strong contrast beat here (instead of several dark CTA
   panels) is what makes it land instead of reading as gloomy.
   ============================================================ */
.vision{background:var(--ink);color:#fff;padding-block:100px}
.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.vision .eyebrow{color:var(--teal-soft)}
.vision h2{font-size:clamp(32px,3.2vw,48px)}
.vision p:not(.eyebrow){color:#b9c8d3;max-width:420px;margin-top:24px;font-size:var(--text-sm)}
.light-link{color:#fff;border-color:#5c788b}
.light-link:hover{color:var(--teal-soft)}
.vision-wordmark{padding:30px 0 30px 30px}
.vision-wordmark img{width:100%}
.vision-wordmark p{font-size:13px!important;letter-spacing:.12em}
.vision-line{display:block;width:70px;height:1px;background:var(--teal);margin-top:37px}

/* ============================================================
   Footer
   ============================================================ */
footer{padding-block:58px 38px}
.footer-top,.footer-bottom{display:flex;justify-content:space-between;gap:50px}
.footer-top{align-items:center;padding-bottom:35px;border-bottom:1px solid var(--border)}
.footer-top>a:last-child{font-size:var(--text-xs);color:var(--text-tertiary);display:flex;align-items:center;gap:6px}
.footer-top strong{font-weight:500;color:var(--ink)}
.footer-bottom{padding-top:24px;align-items:start}
.footer-bottom p{font-size:var(--text-2xs);color:var(--text-tertiary);max-width:660px}
.footer-bottom a{font-size:var(--text-xs);white-space:nowrap;color:var(--teal)}
.equator-mark{width:43px;margin-right:8px}

/* ============================================================
   Product dialog
   ============================================================ */
dialog{padding:0;border:0;width:min(900px,calc(100% - 32px));max-height:90vh;background:var(--bg);color:var(--ink);box-shadow:0 30px 100px #10243a44}
dialog::backdrop{background:#10243acc;backdrop-filter:blur(5px)}
dialog>img{width:100%;max-height:45vh;object-fit:cover}
.dialog-close{position:absolute;right:18px;top:15px;width:34px;height:34px;border:0;background:#fff;color:var(--ink);border-radius:50%;font-size:24px}
.dialog-copy{padding:30px 40px 38px}
.dialog-copy h2{font-size:30px;margin:15px 0 20px;font-weight:540}
.dialog-copy>p:not(.small-label):not(.concept-label){font-size:var(--text-base);color:var(--text-secondary);max-width:650px}
.dialog-copy .concept-label{margin-top:25px}

/* ============================================================
   Domain purchase CTAs — pale-teal panels threaded through the
   narrative. Buttons stay teal-on-white everywhere for a
   consistent affordance regardless of panel tone.
   ============================================================ */
.domain-cta{background:var(--cta-bg);color:var(--ink);padding-block:44px}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:48px}
.cta-inner>div{min-width:0}
.domain-cta .eyebrow{color:var(--teal);margin-bottom:14px}
.domain-cta h2{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.02em;line-height:1.2}
.domain-cta p:not(.eyebrow){max-width:670px;color:var(--text-secondary);font-size:var(--text-sm);margin-top:12px}
.buy-button{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;flex-shrink:0;min-width:200px;min-height:54px;padding:17px 24px;background:var(--teal);color:#fff;font-size:var(--text-xs);border:1px solid #369aa4;border-radius:2px;transition:background .2s}
.buy-button:hover{background:var(--teal-strong)}
.buy-button:focus-visible{outline-color:var(--teal-soft)}
.cta-pale{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-final{background:var(--cta-bg);padding-block:55px;border-top:1px solid var(--cta-border);border-bottom:1px solid var(--cta-border)}
.cta-final .buy-button{background:var(--ink);border-color:#244b63}
.cta-final .buy-button:hover{background:#1b3953}

/* ============================================================
   Responsive
   ============================================================ */
@media(min-width:1600px){.hero{min-height:740px}}
@media(max-width:1000px){
  .wrap,.site-header,.bar-inner{width:calc(100% - 64px)}
  nav{gap:20px;font-size:var(--text-2xs)}
  .wordmark{width:170px}
  .hero{grid-template-columns:45% 55%;min-height:560px}
  .hero h1{font-size:53px}
  .hero-art{padding-left:0}
  .platform-grid figure{padding-right:35px}
  .module-tabs{gap:14px}
  .division-panel{gap:20px}
  .steps{gap:25px}
  .product-grid{gap:20px}
  .vision-grid{gap:40px}
  .heading-row{gap:35px}
}
@media(max-width:740px){
  html{scroll-padding-top:100px}
  .wrap,.site-header,.bar-inner{width:calc(100% - 40px)}
  .domain-bar{font-size:var(--text-2xs)}
  .bar-note{display:none}
  .domain-bar a{gap:15px;padding:7px 12px}
  .site-header{height:80px}
  .wordmark{width:158px}
  .menu-button{display:flex;gap:14px;align-items:center;border:0;background:none;font-size:var(--text-xs);padding:12px 0}
  .menu-button span{font-size:20px}
  nav{display:none;position:absolute;top:123px;left:0;right:0;background:var(--bg);z-index:20;padding:20px;flex-direction:column;gap:4px;border-bottom:1px solid var(--border)}
  nav.open{display:flex}
  nav a{font-size:15px;padding:12px 0}
  .hero{display:flex;flex-direction:column;align-items:stretch;padding-block:49px 38px;min-height:0}
  .eyebrow{margin-bottom:23px}
  .hero h1{font-size:clamp(40px,9vw,60px)}
  .lead{font-size:var(--text-sm);max-width:440px;margin-top:23px}
  .text-link{margin-top:25px}
  .hero-art{margin-top:35px}
  .intro{display:block;padding-block:37px 52px}
  .intro .eyebrow{margin-top:0;margin-bottom:22px}
  .intro p:not(.eyebrow){font-size:var(--text-sm);margin-top:23px}
  h2{font-size:32px}
  .section{padding-block:58px}
  .section-heading{margin-bottom:29px}
  .platform-grid{display:flex;flex-direction:column;align-items:stretch}
  .platform-grid figure{padding:0}
  .platform-content{margin-top:31px}
  .section-summary{font-size:var(--text-sm)}
  .module-tabs{gap:24px;margin-top:23px}
  .module-panel{min-height:220px}
  .module-panel h3{font-size:28px}
  .heading-row{display:block}
  .heading-row>p{margin-top:23px;max-width:440px}
  .division-tabs{overflow:auto;gap:22px}
  .division-tabs button{flex:0 0 auto;white-space:nowrap;padding-block:16px}
  .division-panel{display:flex;flex-direction:column;align-items:stretch;gap:26px;padding-top:30px}
  .division-copy{padding:0}
  .division-copy h3{font-size:32px}
  .division-copy>p:not(.small-label){margin-top:19px}
  .division-copy ul{margin-block:18px}
  .division-panel figure{order:-1}
  .product-grid{grid-template-columns:1fr;gap:45px}
  .product-grid figure{margin-bottom:22px}
  .product-grid h3{font-size:26px}
  .product-grid article>p:not(.small-label){font-size:var(--text-sm);max-width:430px}
  .steps{grid-template-columns:1fr 1fr;gap:32px 25px}
  .steps h3{margin-top:18px}
  .steps p{margin-top:12px}
  .vision{padding-block:58px}
  .vision-grid{grid-template-columns:1fr;gap:35px}
  .vision h2{font-size:34px}
  .vision-wordmark{padding:15px 0}
  .vision-wordmark img{max-width:380px}
  .footer-top,.footer-bottom{flex-direction:column;gap:24px}
  .footer-top{align-items:start}
  .footer-bottom{gap:22px}
  footer{padding-block:42px 30px}
  .dialog-copy{padding:25px}
  .dialog-copy h2{font-size:27px}
  .domain-cta{padding-block:32px}
  .cta-inner{flex-direction:column;align-items:stretch;gap:24px}
  .buy-button{width:100%;min-height:52px}
  .domain-cta p:not(.eyebrow){font-size:var(--text-xs)}
  .footer-top>a:last-child{flex-wrap:wrap;font-size:var(--text-2xs)}
  .equator-mark{width:32px}
  .domain-cta h2{font-size:27px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}