/* Scira Diagnostics , site styles (light theme) */
:root{
  --ink:#0C1B2A;
  --ink-2:#28425c;
  --clarity:#1B9AA8;
  --clarity-d:#137a86;
  --clarity-lt:#8ED2D9;
  --wash:#eaf7f8;
  --paper:#f6f8f9;
  --paper-2:#eef2f4;
  --slate:#5f7180;
  --line:#e4e9ec;
  --white:#ffffff;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1180px;
  --shadow:0 18px 44px rgba(12,27,42,.10);
  --shadow-sm:0 6px 20px rgba(12,27,42,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
section{position:relative}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.4px;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(36px,4.6vw,54px)}
h2{font-size:clamp(26px,3.3vw,38px)}
h3{font-size:22px}
p{color:var(--ink-2);text-wrap:pretty}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--clarity-d)}
.lead{font-size:clamp(17px,1.4vw,20px);color:var(--ink-2);line-height:1.55;text-wrap:pretty}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:13px 24px;border-radius:40px;transition:.2s;cursor:pointer;border:1.5px solid transparent}
.btn-primary{background:var(--clarity);color:#fff}
.btn-primary:hover{background:var(--clarity-d);transform:translateY(-1px);box-shadow:0 10px 24px rgba(27,154,168,.30)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--clarity);color:var(--clarity-d)}
.btn svg{width:16px;height:16px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.nav .brand img{height:34px}
.nav ul{display:flex;gap:30px;list-style:none;align-items:center}
.nav ul a{font-size:15px;font-weight:500;color:var(--ink-2);transition:.2s}
.nav ul a:hover,.nav ul a.active{color:var(--clarity-d)}
.nav .navcta{display:flex;align-items:center;gap:18px}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--ink)}

/* hero */
.hero{padding:76px 0 70px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{margin:16px 0 20px}
.hero .lead{max-width:52ch}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:480px}
.hero-visual img{position:relative;width:min(560px,100%);height:auto;filter:drop-shadow(0 26px 64px rgba(19,122,134,.20));animation:fadeIn 1.1s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .eyebrow,.hero h1,.hero .lead,.hero-cta{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.05s}
.hero .lead{animation-delay:.12s}
.hero-cta{animation-delay:.19s}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* dot-grid background helper */
.dotgrid{background-image:radial-gradient(var(--line) 1.3px,transparent 1.3px);background-size:26px 26px}

/* trust strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:26px 54px;justify-content:space-between;padding-top:26px;padding-bottom:26px;align-items:center}
.stat .n{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--clarity-d);line-height:1}
.stat .t{font-size:13.5px;color:var(--slate);margin-top:5px;max-width:22ch}

/* generic section spacing */
.sec{padding:82px 0}
.sec-head{max-width:64ch;margin-bottom:42px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin:14px 0 14px}

/* pillar cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 26px;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.icon{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--wash);color:var(--clarity-d);margin-bottom:18px}
.icon svg{width:26px;height:26px}
.card h3{margin-bottom:8px}
.card p{font-size:15px}

/* band (tinted) */
.band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band.ink{background:var(--ink);border-color:transparent}
.band.ink h2,.band.ink h3{color:#fff}
.band.ink p{color:#c6d3dd}
.band.ink .eyebrow{color:var(--clarity-lt)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}

/* patient band */
.quote-lg{font-family:var(--serif);font-size:clamp(24px,2.8vw,34px);line-height:1.3;color:var(--ink);max-width:22ch}
.band.ink .quote-lg{color:#fff}

/* science visual (nodes) */
.nodeart{position:relative;border-radius:20px;background:radial-gradient(120% 120% at 28% 8%,#1b3550,#0c1b2a 68%);min-height:320px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.nodeart:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(142,210,217,.20),transparent 65%);top:-70px;right:-70px;pointer-events:none}
.nodeart .seq{position:absolute;inset:0;opacity:.42}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:13px;font-weight:600;letter-spacing:.03em;padding:7px 14px;border-radius:30px;background:rgba(142,210,217,.14);color:#bfe6ea;border:1px solid rgba(142,210,217,.25)}

/* value list */
.vlist{list-style:none;display:flex;flex-direction:column;gap:16px}
.vlist li{display:flex;gap:14px;font-size:16px;color:var(--ink-2)}
.vlist li b{color:var(--ink)}
.vlist .tick{flex:none;width:26px;height:26px;border-radius:50%;background:var(--wash);color:var(--clarity-d);display:flex;align-items:center;justify-content:center;margin-top:2px}
.vlist .tick svg{width:14px;height:14px}

/* cta band */
.cta-band{text-align:center;background:linear-gradient(160deg,#eaf7f8,#f6f8f9)}
.cta-band h2{margin-bottom:16px}
.cta-band .btns{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap}

/* page hero (interior) */
.page-hero{padding:70px 0 40px;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{max-width:24ch}
.page-hero .lead{max-width:60ch;margin-top:18px}

/* prose */
.prose{max-width:70ch}
.prose h2{margin:40px 0 14px}
.prose h3{margin:30px 0 8px}
.prose p{margin-bottom:16px}
.prose ul{margin:0 0 16px 20px}
.prose li{margin-bottom:8px;color:var(--ink-2)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:start}
.form-row{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.form-row label{font-size:14px;font-weight:600;color:var(--ink)}
.form-row input,.form-row select,.form-row textarea{font-family:var(--sans);font-size:15px;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);transition:.2s}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--clarity);box-shadow:0 0 0 4px rgba(27,154,168,.12)}
.form-row textarea{min-height:140px;resize:vertical}
.contact-cards{display:flex;flex-direction:column;gap:16px}
.ccard{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--paper)}
.ccard .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:700;margin-bottom:6px}
.ccard a{color:var(--clarity-d);font-weight:600}
.ccard p{font-size:14.5px}

/* footer */
.site-footer{background:var(--ink);color:#c6d3dd;padding:60px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.10)}
.site-footer .brandmark{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.site-footer .brandmark .m{font-family:var(--serif);font-size:24px;color:#fff;letter-spacing:.04em}
.site-footer .tag{font-family:var(--serif);font-style:italic;color:var(--clarity-lt);font-size:16px;margin-bottom:14px}
.site-footer p{color:#93a6b4;font-size:14px;max-width:34ch}
.site-footer h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7f95a6;margin-bottom:14px;font-family:var(--sans);font-weight:700}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.site-footer ul a{color:#c6d3dd;font-size:14.5px;transition:.2s}
.site-footer ul a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;font-size:13px;color:#7f95a6}
.aperture-mini{width:30px;height:30px}

/* footer aperture svg colouring */
.aperture-mini circle{fill:none}

@media(max-width:900px){
  .hero-grid,.split,.contact-grid,.foot-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .hero-visual{order:-1;min-height:300px}
  .hero-visual img{height:300px}
  .nav ul{display:none}
  .menu-toggle{display:block}
  .nav ul.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:16px 26px;gap:16px}
}

/* ---- image hero banner ---- */
.hero-banner{position:relative;background:#e6f3f8 url('assets/hero.webp') no-repeat;background-size:cover;background-position:center right;min-height:clamp(440px,44vw,600px);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(233,244,249,.82) 0%,rgba(233,244,249,.58) 26%,rgba(233,244,249,.12) 46%,rgba(233,244,249,0) 60%);pointer-events:none}
.hero-banner .wrap{position:relative;z-index:1;width:100%}
.hero-copy{max-width:520px}
.hero-copy h1{margin:16px 0 18px}
.hero-copy .eyebrow,.hero-copy h1,.hero-copy .lead,.hero-copy .hero-cta{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
.hero-copy h1{animation-delay:.05s}
.hero-copy .lead{animation-delay:.12s}
.hero-copy .hero-cta{animation-delay:.19s}
.foot-bottom a{color:#9fb6c4;text-decoration:underline;text-underline-offset:2px}
.foot-bottom a:hover{color:#fff}
@media(max-width:820px){
  .hero-banner{min-height:340px;background-position:top right;padding:34px 0}
  .hero-banner::before{background:linear-gradient(180deg,rgba(233,244,249,.92) 0%,rgba(233,244,249,.74) 58%,rgba(233,244,249,.55) 100%)}
  .hero-copy{max-width:100%}
}

/* Staff login. Deliberately a ghost button, not a primary one: this is a door for the eight
   people who work here, and it must not compete with the call to action aimed at everyone
   else. Hidden below 900px, where the nav is already tight and the footer link serves. */
.staff-login{padding:10px 18px;font-size:14px;color:var(--muted)}
.staff-login:hover{border-color:var(--clarity);color:var(--clarity-d)}
.staff-login svg{width:14px;height:14px;opacity:.75}
@media(max-width:900px){.staff-login{display:none}}