/* ============================================================
   AUVUM BIO — auvumbio.com
   The public front door. Shares the brand tokens of auvum.bio
   but trades density for air: one idea per screen, big type,
   warm surfaces, and copy a patient can read without a glossary.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#ffffff; --bg2:#f8fafb; --bg3:#f1f5f6; --bg-warm:#fbf8f4;
  --ink:#0a0d12; --ink2:#1c2130; --ink3:#3a4259; --ink-soft:#535c72; --ink-mute:#6b7488;
  --border:#e4e9ee; --border2:#ccd4dd; --border-soft:#eef2f5;
  --teal:#0e9e85; --teal2:#0d8a73; --teal-deep:#0a6b59; --teal-soft:#e6f7f3;
  --blue:#1a4fd6; --blue2:#143cb5; --blue-soft:#e8edfb;
  --gold:#b8884a; --gold2:#a07532; --gold-soft:#fbf3e3;
  --plasma:#6a4fd6; --plasma-soft:#ede8fc;
  --sh1:0 1px 2px rgba(15,23,42,.04);
  --sh2:0 4px 16px rgba(15,23,42,.06),0 2px 5px rgba(15,23,42,.03);
  --sh3:0 18px 44px rgba(15,23,42,.09),0 5px 14px rgba(15,23,42,.04);
  --sh4:0 34px 80px rgba(15,23,42,.13),0 10px 26px rgba(15,23,42,.06);
  --display:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,monospace;
  --read:'Source Serif 4',Georgia,serif;
  --wrap:1180px; --gutter:clamp(20px,5vw,56px);
}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.65;
  font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
:where(a,button,[tabindex],input,select,textarea):focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.dark :where(a,button,[tabindex]):focus-visible{outline-color:#5fe0c8}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ink);color:#fff;padding:12px 20px;font-weight:600;text-decoration:none;border-radius:0 0 6px 0}
.skip:focus{left:0}

/* ── shell ─────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
section{position:relative}
.sec{padding:clamp(72px,10vw,132px) 0}
.sec.tight{padding:clamp(56px,7vw,92px) 0}
.sec.warm{background:var(--bg-warm)}
.sec.soft{background:var(--bg2)}
.sec.dark{background:linear-gradient(170deg,#0b1017,#080b10 60%,#0b1017);color:#fff}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal2);font-weight:500;display:inline-flex;align-items:center;gap:12px;margin-bottom:20px}
.eyebrow::before{content:'';width:26px;height:1px;background:currentColor;flex-shrink:0}
.eyebrow.mid{justify-content:center}
.dark .eyebrow{color:#5fe0c8}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.022em;line-height:1.14;color:inherit}
.h-xl{font-size:clamp(38px,6.4vw,74px);font-weight:300;letter-spacing:-.03em;line-height:1.06}
.h-lg{font-size:clamp(30px,4.4vw,50px);line-height:1.1}
.h-md{font-size:clamp(23px,2.7vw,32px)}
.h-sm{font-size:clamp(19px,2vw,23px)}
em{font-style:italic;color:var(--teal2)}
.dark em{color:#5fe0c8}
.lede{font-family:var(--read);font-size:clamp(17px,1.9vw,21px);line-height:1.72;color:var(--ink-soft);max-width:60ch}
.dark .lede{color:rgba(255,255,255,.68)}
.body-t{font-size:16px;line-height:1.78;color:var(--ink3);max-width:64ch}
.dark .body-t{color:rgba(255,255,255,.72)}
.center{text-align:center}
.center .lede,.center .body-t{margin-left:auto;margin-right:auto}

/* ── buttons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:0 30px;border-radius:8px;font-family:var(--body);font-size:15px;font-weight:600;
  letter-spacing:.01em;cursor:pointer;text-decoration:none;border:1px solid transparent;
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s,background .22s,border-color .22s}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;box-shadow:0 6px 20px rgba(14,158,133,.24)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(14,158,133,.32)}
.btn-ghost{background:#fff;border-color:var(--border2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-soft);transform:translateY(-2px);box-shadow:var(--sh2)}
.dark .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.dark .btn-ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.4)}
.btn-sm{min-height:42px;padding:0 20px;font-size:13.5px;border-radius:7px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.center .btn-row{justify-content:center}

/* ── header ────────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto 0;z-index:900;height:74px;display:flex;align-items:center;
  background:rgba(255,255,255,0);transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.hdr:not(.on-dark){background:rgba(255,255,255,.93);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
.hdr.stuck{background:rgba(255,255,255,.93);backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 1px 0 var(--border-soft)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand-mark{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--teal);display:grid;place-items:center;
  font-family:var(--display);font-size:19px;font-style:italic;color:var(--teal2);background:#fff;flex-shrink:0}
.brand-txt{font-family:var(--display);font-size:22px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.brand-txt sup{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--teal2);vertical-align:super}
.hdr.on-dark:not(.stuck) .brand-txt{color:#fff}
.hdr.on-dark:not(.stuck) .brand-mark{background:rgba(255,255,255,.1);border-color:#5fe0c8;color:#5fe0c8}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:color .2s;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.hdr.on-dark:not(.stuck) .nav a{color:rgba(255,255,255,.78)}
.hdr.on-dark:not(.stuck) .nav a:hover{color:#fff}
.hdr-act{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang{display:flex;border:1px solid var(--border2);border-radius:7px;overflow:hidden;background:#fff}
.lang button{border:none;background:transparent;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  padding:9px 12px;cursor:pointer;color:var(--ink-mute);transition:all .2s;min-height:40px}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}
.hdr.on-dark:not(.stuck) .lang{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.hdr.on-dark:not(.stuck) .lang button{color:rgba(255,255,255,.72)}
.hdr.on-dark:not(.stuck) .lang button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.burger{display:none;width:44px;height:44px;border-radius:9px;border:1px solid var(--border2);background:#fff;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.burger span{width:18px;height:1.7px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.hdr.on-dark:not(.stuck) .burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26)}
.hdr.on-dark:not(.stuck) .burger span{background:#fff}

.drawer{position:fixed;inset:0;z-index:950;background:rgba(10,13,18,.5);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s}
.drawer.open{opacity:1;pointer-events:auto}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:#fff;
  padding:88px 30px 34px;display:flex;flex-direction:column;gap:8px;transform:translateX(100%);
  transition:transform .34s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.drawer.open .drawer-panel{transform:none}
.drawer-panel a{padding:15px 0;font-family:var(--display);font-size:21px;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--border-soft)}
.drawer-close{position:absolute;top:22px;right:24px;width:42px;height:42px;border-radius:9px;
  border:1px solid var(--border);background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--ink-soft)}

/* ── hero ──────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  isolation:isolate;padding:130px 0 96px;background:#070a0f}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.92;
  filter:saturate(1.05) contrast(1.04)}
/* Scrim banded to the copy, not smeared over the whole frame: strong where the
   text sits on the left, releasing to almost nothing over the right of the shot
   so the microscopy actually reads. Non-linear falloff avoids a visible edge. */
.hero-bg::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,9,14,.90) 0%,rgba(6,9,14,.80) 26%,rgba(6,9,14,.52) 48%,
                    rgba(6,9,14,.22) 68%,rgba(6,9,14,.10) 84%,rgba(6,9,14,.16) 100%),
    linear-gradient(180deg,rgba(6,9,14,.55) 0%,rgba(6,9,14,0) 22%,rgba(6,9,14,0) 62%,rgba(6,9,14,.72) 100%)}
@media(max-width:820px){
  .hero-bg video,.hero-bg img{opacity:.8}
  .hero-bg::after{background:linear-gradient(180deg,rgba(6,9,14,.72) 0%,rgba(6,9,14,.62) 40%,rgba(6,9,14,.82) 100%)}
}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:rgba(255,255,255,.8);margin-top:26px;max-width:56ch}
.hero .eyebrow{color:#5fe0c8}
.scroll-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78);
  text-shadow:0 1px 12px rgba(0,0,0,.7);
  text-decoration:none;transition:color .25s}
.scroll-cue:hover{color:#fff}
.scroll-cue i{display:block;width:1px;height:38px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);
  position:relative;overflow:hidden}
.scroll-cue i::after{content:'';position:absolute;top:-38px;left:0;width:1px;height:38px;
  background:linear-gradient(180deg,transparent,#5fe0c8);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{top:-38px}60%,100%{top:38px}}

/* ── reveal ────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}

/* ── mission ───────────────────────────────────────────────── */
.mission-quote{font-family:var(--display);font-size:clamp(25px,3.7vw,42px);line-height:1.32;
  letter-spacing:-.02em;color:var(--ink);max-width:27ch;margin:0 auto;text-align:center;text-wrap:balance}
.mission-quote em{color:var(--teal2)}
.mission-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px;margin-top:52px}
.mission-body p{font-size:15.5px;line-height:1.8;color:var(--ink3)}

/* ── stat strip ────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;
  background:var(--border-soft);border:1px solid var(--border-soft);border-radius:16px;overflow:hidden;margin-top:56px}
.stat{background:#fff;padding:32px 26px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:clamp(30px,3.6vw,42px);color:var(--ink);letter-spacing:-.03em;line-height:1}
.stat b span{color:var(--teal2)}
.stat i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);margin-top:12px;line-height:1.6}

/* ── audience cards ────────────────────────────────────────── */
.aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;margin-top:56px}
.aud{background:#fff;border:1px solid var(--border);border-radius:18px;padding:36px 32px 32px;
  display:flex;flex-direction:column;box-shadow:var(--sh1);transition:transform .3s,box-shadow .3s,border-color .3s}
.aud:hover{transform:translateY(-4px);box-shadow:var(--sh3);border-color:var(--border2)}
.aud-ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;margin-bottom:24px}
.aud-ico svg{width:26px;height:26px}
.aud-ico.t{background:var(--teal-soft);color:var(--teal2)}
.aud-ico.b{background:var(--blue-soft);color:var(--blue2)}
.aud-ico.g{background:var(--gold-soft);color:var(--gold2)}
.aud h3{margin-bottom:12px}
.aud > p{font-size:14.5px;line-height:1.72;color:var(--ink-soft);margin-bottom:20px}
.aud ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.aud li{display:flex;gap:11px;font-size:14px;line-height:1.6;color:var(--ink3)}
.aud li::before{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:8px}
.aud .btn{margin-top:auto;align-self:flex-start}

/* ── outpatient AI ─────────────────────────────────────────── */
.op-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px);align-items:center;margin-top:12px}
.op-settings{display:grid;gap:14px;margin-top:32px}
.op-set{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.op-set-ico{width:40px;height:40px;border-radius:10px;background:rgba(95,224,200,.13);
  display:grid;place-items:center;flex-shrink:0;color:#5fe0c8}
.op-set-ico svg{width:20px;height:20px}
.op-set b{display:block;font-size:14.5px;color:#fff;margin-bottom:4px;font-weight:600}
.op-set span{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62)}
.op-visual{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12)}
.op-visual img{width:100%;height:100%;object-fit:cover;opacity:.85}
.op-badge{position:absolute;top:18px;left:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:7px 14px;border-radius:100px;color:#0a0d12;
  background:linear-gradient(135deg,#5fe0c8,#8fb0ff);font-weight:600}
.op-hrv{position:absolute;left:18px;right:18px;bottom:18px;padding:18px 20px;border-radius:14px;
  background:rgba(8,11,16,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.13)}
.op-hrv b{display:block;font-family:var(--display);font-size:34px;color:#fff;line-height:1}
.op-hrv span{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.op-spark{display:flex;align-items:flex-end;gap:3px;height:26px;margin-top:12px}
.op-spark i{flex:1;background:linear-gradient(180deg,#5fe0c8,rgba(95,224,200,.25));border-radius:2px;
  animation:spark 2.6s ease-in-out infinite}
@keyframes spark{0%,100%{opacity:.45}50%{opacity:1}}

/* ── partners ──────────────────────────────────────────────── */
.p-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:38px}
.p-chip{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 16px;border-radius:100px;border:1px solid var(--border2);background:#fff;
  color:var(--ink-soft);cursor:pointer;transition:all .22s;min-height:36px}
.p-chip:hover{border-color:var(--ink-soft);color:var(--ink)}
.p-chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:20px;margin-top:36px}
.p-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px 26px 24px;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;box-shadow:var(--sh1);
  transition:transform .3s,box-shadow .3s,border-color .3s}
.p-card:hover{transform:translateY(-4px);box-shadow:var(--sh3);border-color:var(--border2)}
.p-card[hidden]{display:none}
.p-logo{height:56px;display:flex;align-items:center;margin-bottom:20px}
.p-logo img{max-height:52px;max-width:190px;width:auto;object-fit:contain}
.p-word{font-family:var(--display);font-size:22px;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.p-word small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal2);margin-top:5px;font-weight:500}
.p-cat{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:9px}
.p-name{font-family:var(--display);font-size:19px;color:var(--ink);letter-spacing:-.015em;margin-bottom:9px}
.p-desc{font-size:13.5px;line-height:1.68;color:var(--ink-soft);flex:1}
.p-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);font-weight:500}
.p-link span{transition:transform .25s}
.p-card:hover .p-link span{transform:translateX(4px)}

/* ── team ──────────────────────────────────────────────────── */
.t-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px;margin-top:52px}
.t-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:var(--sh1);transition:transform .3s,box-shadow .3s}
.t-card:hover{transform:translateY(-4px);box-shadow:var(--sh3)}
.t-photo{position:relative;aspect-ratio:4/5;background:linear-gradient(150deg,var(--bg3),var(--bg2));overflow:hidden}
.t-photo img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.t-photo .ini{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);
  font-size:34px;color:var(--ink-mute)}
.t-body{padding:18px 20px 22px}
.t-name{font-family:var(--display);font-size:17.5px;color:var(--ink);letter-spacing:-.015em;line-height:1.25}
.t-name span{color:var(--ink-mute);font-size:.72em}
.t-role{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal2);margin-top:7px;line-height:1.5}

/* ── trust ─────────────────────────────────────────────────── */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:48px}
.trust-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:30px 28px;box-shadow:var(--sh1)}
.trust-card h4{font-size:17px;margin-bottom:11px;display:flex;align-items:center;gap:11px}
.trust-card h4::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0}
.trust-card p{font-size:14px;line-height:1.72;color:var(--ink-soft)}

/* ── cta band ──────────────────────────────────────────────── */
.cta-band{background:linear-gradient(135deg,var(--teal-deep),#0d3f8f 55%,var(--blue2));color:#fff;
  border-radius:22px;padding:clamp(40px,6vw,72px);text-align:center;box-shadow:var(--sh4)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.82);max-width:52ch;margin:20px auto 0;font-size:16px;line-height:1.75}
.cta-band .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.22)}
.cta-band .btn-primary{background:#fff;color:var(--ink);box-shadow:0 8px 26px rgba(0,0,0,.2)}
.cta-band .btn-primary:hover{background:#fff;box-shadow:0 14px 36px rgba(0,0,0,.28)}

/* ── footer ────────────────────────────────────────────────── */
footer{background:var(--bg3);border-top:1px solid var(--border);padding:clamp(52px,7vw,80px) 0 36px}
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(28px,5vw,64px)}
.f-top p{font-size:14px;line-height:1.75;color:var(--ink-soft);max-width:44ch;margin-top:16px}
.f-col h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:18px;font-weight:600}
.f-col a{display:block;font-size:14px;color:var(--ink-soft);text-decoration:none;margin-bottom:12px;transition:color .2s}
.f-col a:hover{color:var(--ink)}
.f-contact{margin-top:22px;font-size:13.5px;line-height:1.8;color:var(--ink-soft)}
.f-contact a{color:var(--blue2);text-decoration:none;font-weight:500}
.f-bottom{margin-top:52px;padding-top:26px;border-top:1px solid var(--border);
  font-size:12.5px;line-height:1.75;color:var(--ink-mute)}
.f-bottom strong{color:var(--ink-soft)}

/* ── responsive ────────────────────────────────────────────── */
@media(max-width:960px){
  .op-grid{grid-template-columns:1fr}
  .op-visual{max-width:420px;margin:0 auto;aspect-ratio:16/11}
  .f-top{grid-template-columns:1fr 1fr}
  .f-top > :first-child{grid-column:1/-1}
}
@media(max-width:820px){
  .nav{display:none}
  .burger{display:flex}
  .hero{min-height:auto;padding:120px 0 76px}
}
@media(max-width:560px){
  .lang button{padding:9px 9px;font-size:10px}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .aud .btn{width:100%}
  .f-top{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .hero-bg video{display:none}
}

/* OutPatient AI capability list */
.op-list{list-style:none;display:grid;gap:11px;margin-top:28px}
.op-list li{display:flex;gap:12px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.76)}
.op-list li::before{content:'';flex-shrink:0;width:16px;height:16px;margin-top:4px;border-radius:50%;
  background:rgba(95,224,200,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%235fe0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain}

/* ── MOBILE HEADER & HERO CORRECTIONS ───────────────────────
   The header row was carrying brand + language + Contact + burger and
   overflowed at 375px, pushing the burger off-screen entirely. Contact
   lives in the drawer on small screens, so it is dropped from the bar. */
@media(max-width:820px){
  .hdr-act > .btn{display:none}
  .hdr-in{gap:12px}
  /* the cue sits under a full-width stacked CTA on mobile — take it out of the
     flow rather than letting it print over the buttons */
  .scroll-cue{display:none}
  .hero{padding-bottom:64px}
}
@media(max-width:420px){
  .brand-txt{font-size:19px}
  .brand-mark{width:32px;height:32px;font-size:17px}
  .lang button{padding:9px 10px}
}
/* hero type was wrapping mid-phrase at narrow widths */
@media(max-width:560px){
  .hero h1{font-size:clamp(31px,9vw,42px);max-width:none}
  .hero .lede{font-size:16px;line-height:1.68}
}

/* ── TOUCH TARGETS (mobile) ─────────────────────────────────
   Filter chips, language buttons and footer links measured 23-36px tall.
   44px is the floor for a reliable thumb tap. */
@media(max-width:820px){
  .p-chip{min-height:44px;padding:0 16px;display:inline-flex;align-items:center}
  .lang button{min-height:44px;min-width:44px}
  .f-col a{display:inline-block;padding:13px 0;line-height:1.25}
  .f-contact a{display:inline-block;padding:13px 0;line-height:1.25}
  .brand{padding:6px 0}
}

/* ── CAPABILITY PILLARS — test / distribute / facilitate ─────
   These bodies run long on purpose: each states the limit as well
   as the offer. Stacked rows rather than narrow cards, so the text
   keeps a readable measure instead of turning into a column of soup. */
.cap-list{display:flex;flex-direction:column;gap:0;margin:clamp(38px,5vw,56px) 0 clamp(52px,7vw,84px);
  border-top:1px solid var(--border)}
.cap{display:grid;grid-template-columns:clamp(150px,17vw,210px) 1fr;gap:clamp(20px,4vw,56px);
  padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--border-soft)}
.cap-v{display:flex;align-items:baseline;gap:11px;font-family:var(--display);
  font-size:clamp(21px,2.4vw,29px);font-weight:500;letter-spacing:-.014em;color:var(--ink);
  line-height:1.15}
.cap-n{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  color:var(--teal);flex:none;position:relative;top:-.5em}
.cap-h{font-family:var(--body);font-size:clamp(16.5px,1.6vw,18.5px);font-weight:600;
  line-height:1.42;color:var(--ink2);margin-bottom:11px;letter-spacing:-.005em}
.cap-b p{font-size:15.5px;line-height:1.68;color:var(--ink-soft);max-width:70ch}
.aud-head{margin-bottom:clamp(26px,3.4vw,40px)}
.aud-head .h-md{font-family:var(--display);font-weight:400;letter-spacing:-.015em}
.lede.mid{margin:20px auto 0;text-align:center;max-width:74ch}

@media(max-width:820px){
  .cap{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .cap-v{font-size:21px}
  .cap-b p{font-size:15.5px;max-width:none}
  .lede.mid{text-align:left}
}

/* ── OUTPATIENT AI — operator capabilities ──────────────────
   Sits inside .sec.dark, so everything here is light-on-dark. */
.op-more{margin-top:clamp(52px,7vw,86px);padding-top:clamp(40px,5vw,60px);
  border-top:1px solid rgba(255,255,255,.13)}
.op-fig{margin:0 0 clamp(34px,4.5vw,52px);max-width:520px}
.op-fig img{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.42)}
.op-fig figcaption{margin-top:13px;font-size:13.5px;line-height:1.55;
  color:rgba(255,255,255,.62);max-width:46ch}
.op-cap-head{margin-bottom:clamp(26px,3.4vw,38px)}
.op-cap-head .h-md{font-family:var(--display);font-weight:400;letter-spacing:-.016em;
  color:#fff;max-width:24ch;line-height:1.18}
.op-cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.11);
  border-radius:12px;overflow:hidden}
.op-cap{background:#0d1218;padding:26px 24px 28px;display:flex;flex-direction:column;gap:9px}
.op-cap h4{font-family:var(--body);font-size:16px;font-weight:600;line-height:1.38;
  color:#fff;letter-spacing:-.004em}
.op-cap p{font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.66)}
.op-caveat{margin-top:clamp(26px,3.4vw,36px);padding:18px 20px;
  background:rgba(255,255,255,.045);border-left:2px solid var(--gold);
  border-radius:0 8px 8px 0;font-size:14.5px;line-height:1.62;
  color:rgba(255,255,255,.72);max-width:82ch}

/* ── HOME SIGNPOSTS ─────────────────────────────────────────
   The home page is now a doorway, not the whole site. */
.sign-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;margin-top:clamp(36px,4.6vw,52px)}
.sign{display:flex;flex-direction:column;gap:10px;padding:28px 26px 26px;
  background:var(--bg);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--sh2);text-decoration:none;color:inherit;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s}
.sign:hover{transform:translateY(-3px);box-shadow:var(--sh3);border-color:var(--border2)}
.sign .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--teal)}
.sign h3{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.24;
  letter-spacing:-.01em}
.sign p{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.sign .go{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:12px;
  color:var(--teal-deep);font-weight:500;display:flex;align-items:center;gap:7px}
.sign .go::after{content:"→";transition:transform .18s}
.sign:hover .go::after{transform:translateX(3px)}

@media(max-width:820px){
  .op-cap-grid{grid-template-columns:1fr}
  .op-cap{padding:22px 20px 24px}
  .op-fig{max-width:none}
  .op-cap-head .h-md{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .sign{transition:none}
  .sign:hover{transform:none}
}

/* ── REAL BRAND LOCKUP ──────────────────────────────────────
   Replaces the CSS-drawn "A" + wordmark with the actual logo
   from the brand folder. Two variants ship: the navy wordmark
   for light grounds, and one with the wordmark lifted to white
   for the transparent-over-hero header and the dark footer.
   The gradient ring is identical in both — only the type flips. */
.brand{gap:0}
.brand-logo{height:38px;width:auto;display:block}
.brand-logo.dark{display:none}
/* header sitting transparent over the dark hero */
.hdr.on-dark:not(.stuck) .brand-logo.light{display:none}
.hdr.on-dark:not(.stuck) .brand-logo.dark{display:block}
.foot-brand img{height:38px;width:auto;display:block}

@media(max-width:820px){
  .brand-logo,.foot-brand img{height:32px}
}
@media(max-width:380px){
  .brand-logo,.foot-brand img{height:28px}
}

/* ── CONTACT FORM ────────────────────────────────────────────
   Real, self-hosted form — no third-party form service, no
   outbound link. Submits to inquiry.php via fetch(); the plain
   <form action> is the no-JS fallback. */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(36px,5vw,64px);
  align-items:start}
/* Grid items default to min-width:auto, which floors them at their content's
   min-content size. The form's two-input row and the office-address lines
   are both wide enough that, once the grid collapses to one column on
   mobile, that floor won here and pushed the whole page (and the fixed
   header riding the same viewport-relative box) past 375px. */
.contact-intro,.contact-form{min-width:0}
.contact-intro h1{font-family:var(--display);font-weight:400;letter-spacing:-.018em;
  font-size:clamp(30px,4vw,42px);line-height:1.12;margin-bottom:18px}
.contact-intro p{font-size:16.5px;line-height:1.68;color:var(--ink-soft);max-width:46ch}
.ci-direct{margin-top:28px;display:flex;flex-direction:column;gap:9px;
  font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.ci-direct a{color:var(--teal-deep);font-weight:600;text-decoration:none}
.ci-direct a:hover{text-decoration:underline}

.contact-form{background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:clamp(24px,3vw,34px);box-shadow:var(--sh2);display:flex;flex-direction:column;gap:18px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
.cf-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.cf-field span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute)}
.cf-field span i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.75}
.cf-field input,.cf-field select,.cf-field textarea{
  font:inherit;font-size:15.5px;color:var(--ink);background:var(--bg2);
  border:1.5px solid var(--border2);border-radius:9px;padding:12px 13px;
  width:100%;max-width:100%;box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s}
.cf-field textarea{resize:vertical;min-height:110px;font-family:inherit}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft);background:#fff}
.cf-full{width:100%}
.cf-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;
  line-height:1.5;color:var(--ink-soft);cursor:pointer;min-height:44px;padding:2px 0}
.cf-check input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--teal)}
/* honeypot: present in the DOM for bots that fill every field, invisible
   and unreachable for a real visitor tabbing or reading with a screen reader */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cf-submit{min-width:170px}
.cf-submit:disabled{opacity:.6;cursor:default}
.cf-status{font-size:13.5px;line-height:1.5;margin:0}
.cf-status[data-state="ok"]{color:var(--teal-deep)}
.cf-status[data-state="err"]{color:var(--gold2)}
.cf-noscript{margin-top:4px;font-size:12.5px;color:var(--ink-mute)}

@media(max-width:860px){
  .contact-grid{grid-template-columns:1fr}
  .cf-row{grid-template-columns:1fr}
}
@media(max-width:480px){
  .cf-field input,.cf-field select,.cf-field textarea{font-size:16px} /* stop iOS zoom-on-focus */
}

.op-cta{margin-top:26px}
.op-cta .btn{width:auto}
