/* ─────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────── */
:root{
  --ink:        #04060B;   /* page */
  --panel:      #0B0F16;   /* cards */
  --panel-hi:   #121826;   /* card hover */
  --navy:       #061140;   /* hero gradient floor */
  --blue:       #1E3EE0;   /* electric blue — links, outlines */
  --blue-glow:  #4C6BFF;
  --mint:       #6FE9D2;   /* primary accent */
  --mint-dim:   #3FBFAB;
  --text:       #EAEEF5;
  --muted:      #8B95A8;
  --faint:      #59617240;
  --line:       rgba(255,255,255,.10);
  --line-soft:  rgba(255,255,255,.055);

  --display: "Archivo", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --pad: clamp(20px, 4.5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:800; line-height:.95; letter-spacing:-.035em; }

::selection{ background:var(--mint); color:#04060B; }

:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
  border-radius:2px;
}

/* Utility: clinical label */
.tag{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ─────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:16px var(--pad);
  background:rgba(4,6,11,.62);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav__brand{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.02em; }
.nav__brand svg{ width:26px; height:20px; flex:none; }
.nav__links{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.nav__links a{
  font-size:14px; color:var(--muted);
  transition:color .25s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__cta{
  color:var(--ink) !important;
  background:var(--mint);
  padding:8px 16px; border-radius:100px;
  font-weight:600; font-size:13px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__cta:hover{ transform:translateY(-1px); box-shadow:0 6px 22px -6px var(--mint-dim); }

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  min-height:100svh;
  align-items:stretch;
}
.hero__panel{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(110px,14vh,170px) var(--pad) clamp(48px,7vh,80px);
  background:
    radial-gradient(120% 95% at 8% 108%, #2340C9 0%, #10228A 26%, var(--navy) 52%, #04060B 82%);
  overflow:hidden;
}
/* faint measurement grid — imaging viewport vernacular */
.hero__panel::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 20% 80%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(80% 70% at 20% 80%, #000 0%, transparent 75%);
  pointer-events:none;
}
.hero__inner{ position:relative; max-width:600px; }

.hero__eyebrow{
  display:flex; align-items:center; gap:10px;
  margin-bottom:clamp(20px,3.5vh,30px);
  color:#9FB2FF;
}
.pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--mint); flex:none;
  box-shadow:0 0 0 0 rgba(111,233,210,.6);
  animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(111,233,210,.55); }
  70%{ box-shadow:0 0 0 9px rgba(111,233,210,0); }
  100%{ box-shadow:0 0 0 0 rgba(111,233,210,0); }
}

.hero h1{
  font-size:clamp(46px,7.4vw,104px);
  font-variation-settings:"wdth" 96;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hero h1 em{
  font-style:normal; display:block;
  color:transparent;
  -webkit-text-stroke:1.4px rgba(255,255,255,.62);
}
.hero__role{
  margin:clamp(16px,2.6vh,24px) 0 0;
  font-family:var(--mono); font-size:clamp(13px,1.15vw,15px);
  letter-spacing:.02em; color:var(--mint);
}
.hero__lede{
  margin:18px 0 0; max-width:44ch;
  color:#C3CCDE; font-size:clamp(15px,1.15vw,17.5px);
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,4.5vh,40px); }
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:100px;
  font-family:var(--body); font-weight:600; font-size:13.5px;
  letter-spacing:.01em; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.btn svg{ width:14px; height:14px; flex:none; }
.btn--solid{ background:var(--mint); color:#04060B; }
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -12px var(--mint); }
.btn--wire{ background:rgba(255,255,255,.03); color:var(--text); border-color:rgba(255,255,255,.28); }
.btn--wire:hover{ transform:translateY(-2px); border-color:var(--mint); color:var(--mint); }

.hero__socials{ display:flex; gap:8px; margin-top:clamp(28px,4.5vh,40px); }
.icon-btn{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  color:#C3CCDE;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.icon-btn svg{ width:17px; height:17px; }
.icon-btn:hover{ background:var(--mint); color:#04060B; border-color:var(--mint); transform:translateY(-2px); }

/* ── portrait as an imaging viewport ── */
.hero__scan{
  position:relative; margin:0;
  background:#0A0D13;
  overflow:hidden;
  border-left:1px solid var(--line-soft);
}
.hero__scan img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%;
  filter:contrast(1.06) saturate(.94);
}
/* fallback texture if the photo hasn't been dropped in yet */
.hero__scan::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 45% at 50% 34%, #2C3340 0%, #14181F 55%, #0A0D13 100%);
}
.hero__scan img{ position:relative; z-index:1; }
/* colour wash tying the portrait to the panel */
.hero__scan::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, rgba(6,17,64,.55) 0%, rgba(6,17,64,0) 34%),
             linear-gradient(0deg, rgba(4,6,11,.85) 0%, rgba(4,6,11,0) 42%);
}
.viewport{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.viewport__brackets{ position:absolute; inset:clamp(18px,2.4vw,34px); }
.viewport__brackets span{
  position:absolute; width:22px; height:22px;
  border:1.5px solid rgba(111,233,210,.75);
}
.viewport__brackets span:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.viewport__brackets span:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.viewport__brackets span:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
.viewport__brackets span:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }
/* slow scan sweep — the signature */
.viewport__sweep{
  position:absolute; left:0; right:0; height:150px;
  background:linear-gradient(180deg, transparent, rgba(111,233,210,.14) 45%, rgba(111,233,210,.5) 50%, rgba(111,233,210,.14) 55%, transparent);
  animation:sweep 7.5s var(--ease) infinite;
  opacity:.65;
}
@keyframes sweep{
  0%{ transform:translateY(-160px); opacity:0; }
  12%{ opacity:.7; }
  88%{ opacity:.7; }
  100%{ transform:translateY(100svh); opacity:0; }
}
.viewport__meta{
  position:absolute; left:clamp(18px,2.4vw,34px); bottom:clamp(18px,2.4vw,34px);
  display:grid; gap:3px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(234,238,245,.62);
}
.viewport__meta b{ color:var(--mint); font-weight:500; }

/* scroll cue */
.scroll-cue{
  position:absolute; z-index:4; bottom:clamp(18px,2.4vw,34px); right:clamp(18px,2.4vw,34px);
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(234,238,245,.55);
  transition:color .25s var(--ease);
}
.scroll-cue:hover{ color:var(--mint); }
.scroll-cue i{
  display:block; width:1px; height:34px;
  background:linear-gradient(180deg, transparent, var(--mint));
  animation:drop 2.2s var(--ease) infinite;
}
@keyframes drop{ 0%,100%{ transform:scaleY(.35); transform-origin:top; opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* ─────────────────────────────────────────────
   CAPABILITY STRIP
   ───────────────────────────────────────────── */
.strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px;
  padding:20px var(--pad);
  border-bottom:1px solid var(--line-soft);
  background:#060911;
}
.strip .tag{ color:#5D6678; }
.strip ul{ display:flex; flex-wrap:wrap; gap:8px 10px; list-style:none; margin:0; padding:0; }
.strip li{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  padding:5px 12px; border-radius:100px;
  border:1px solid var(--line);
  color:#AEB8CA;
}

/* ─────────────────────────────────────────────
   WORK
   ───────────────────────────────────────────── */
.work{ padding:clamp(64px,10vh,120px) var(--pad) clamp(70px,11vh,130px); }
.work__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:clamp(34px,5vh,58px);
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
.work__head h2{
  font-size:clamp(38px,6.4vw,86px);
  font-variation-settings:"wdth" 92;
}
.work__head p{ margin:0; max-width:36ch; color:var(--muted); font-size:14.5px; }

.grid{
  display:grid; gap:clamp(14px,1.5vw,22px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.study{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:14px; overflow:hidden;
  transition:border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.study:hover{ border-color:rgba(111,233,210,.35); background:var(--panel-hi); transform:translateY(-3px); }

.study__fig{
  position:relative; margin:0; overflow:hidden;
  min-height:230px;
  background:#0E1219;
}
.study__fig img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) contrast(1.05) brightness(.86);
  transform:scale(1.02);
  transition:filter .6s var(--ease), transform .8s var(--ease);
}
.study:hover .study__fig img{ filter:grayscale(0) contrast(1.02) brightness(1); transform:scale(1.06); }
/* generated stand-ins, keyed to each study's real imagery */
.f-tabular{ background:
  repeating-linear-gradient(180deg,#11161F 0 26px,#0C1119 26px 52px),
  linear-gradient(90deg,#0E1219,#161C26); }
.f-fundus{ background:radial-gradient(45% 45% at 58% 46%, #FFCF6B 0%, #E08A2C 34%, #A83A18 62%, #4A130A 100%); }
.f-mri{ background:radial-gradient(50% 50% at 50% 45%, #C8CDD6 0%, #6E7480 40%, #232830 72%, #0B0E14 100%); }
.f-chart{ background:linear-gradient(160deg,#F2F0EA 0%,#DCDAD2 100%); }
.f-unet{ background:linear-gradient(150deg,#F7F8FA 0%,#E4E8EF 100%); }
.f-poker{ background:linear-gradient(160deg,#1E6B3C 0%,#0E3A21 100%); }

.study__body{
  display:flex; flex-direction:column;
  padding:clamp(20px,2vw,28px);
}
.study__meta{
  display:flex; align-items:center; gap:10px;
  margin-bottom:auto; padding-bottom:20px;
}
.study__meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--faint); }
.study h3{
  font-size:clamp(21px,1.95vw,29px);
  font-variation-settings:"wdth" 94;
  letter-spacing:-.03em; text-wrap:balance;
}
.study p{
  margin:12px 0 0; color:var(--muted);
  font-size:14.5px; line-height:1.55; max-width:42ch;
}
.study p.study__stack{
  margin-top:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; line-height:1.7;
  color:#6B7488;
}
.study__link{
  display:inline-flex; align-items:center; gap:8px;
  align-self:flex-start; margin-top:22px;
  padding:10px 18px; border-radius:8px;
  border:1px solid rgba(30,62,224,.85);
  color:var(--blue-glow);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.study__link svg{ width:11px; height:11px; transition:transform .3s var(--ease); }
.study__link:hover{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 10px 26px -12px var(--blue-glow); }
.study__link:hover svg{ transform:translate(2px,-2px); }

/* ongoing work reads differently, because it is */
.study--live{ grid-column:1 / -1; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
.study--live .study__fig{ min-height:300px; }
.study--live h3{ font-size:clamp(26px,3vw,44px); }
.study--live .study__body{ padding:clamp(26px,3vw,44px); }
.status{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mint);
}
.status i{ width:6px; height:6px; border-radius:50%; background:var(--mint); animation:pulse 2.6s infinite; }

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
.foot{
  position:relative;
  border-top:1px solid var(--line);
  padding:clamp(56px,9vh,110px) var(--pad) 0;
  background:linear-gradient(180deg,#04060B 0%, #060B1C 60%, #071033 100%);
}
.foot__top{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px); align-items:start;
}
.foot h2{
  font-size:clamp(34px,5.4vw,72px);
  font-variation-settings:"wdth" 92;
  text-wrap:balance;
}
.foot h2 span{ color:var(--mint); }
.foot__note{ margin:20px 0 0; max-width:38ch; color:var(--muted); font-size:15px; }
.foot__cta{ margin-top:28px; }

.contact{ display:grid; gap:22px; }
.contact__row{ display:grid; gap:5px; }
.contact__row a, .contact__row address{
  font-style:normal; font-size:16px; color:var(--text);
  font-family:var(--body);
  transition:color .25s var(--ease);
}
.contact__row a:hover{ color:var(--mint); }
.contact .hero__socials{ margin-top:4px; }

.wordmark{
  margin-top:clamp(48px,8vh,96px);
  padding-bottom:clamp(6px,1.4vw,18px);
  font-family:var(--display); font-weight:800;
  font-variation-settings:"wdth" 125;
  font-size:clamp(38px,13.2vw,220px);
  line-height:.78; letter-spacing:-.045em;
  text-align:center;
  color:transparent;
  background:linear-gradient(180deg, rgba(234,238,245,.92) 12%, rgba(111,233,210,.30) 88%);
  -webkit-background-clip:text; background-clip:text;
  user-select:none;
  overflow:hidden;
}
.foot__legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  padding:22px 0;
  border-top:1px solid var(--line-soft);
}

/* ─────────────────────────────────────────────
   MOTION / REVEAL
   ───────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.hero .reveal{ transition-delay:calc(var(--i,0) * 90ms); }

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width:1080px){
  .study{ grid-template-columns:1fr; }
  .study__fig{ min-height:200px; }
  .study--live{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero__scan{ order:-1; aspect-ratio:4/3; border-left:0; border-bottom:1px solid var(--line-soft); }
  .hero__scan img{ object-position:center 22%; }
  .hero__panel{ padding-top:clamp(40px,6vh,64px); }
  .scroll-cue{ display:none; }
  .grid{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; }
  .nav__links a:not(.nav__cta){ display:none; }
}
@media (max-width:560px){
  .hero__actions .btn{ flex:1 1 100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .viewport__sweep{ display:none; }
}

.wordmark{
  font-variation-settings:"wdth" 100;
  font-size:clamp(30px, 10.5vw, 190px);
  letter-spacing:-.055em;
  padding-inline:0;
}