/* ============================================================
   MHN — Medical & Health Networks
   Design system: "The Life Line"
   A continuous ECG trace is the connective thread between
   One Doctor → One Practice → One World. It runs down every
   page, spiking into a heartbeat at each new idea.

   Color system: clean clinical blues (light mode by default),
   with a matching deep-navy dark mode toggled via
   [data-theme="dark"] on <html>.
   ============================================================ */

:root{
  /* ---- color tokens: LIGHT (default) ---- */
  --bg-0:#FFFFFF;          /* deepest / hero background */
  --bg-1:#FFFFFF;          /* primary background */
  --bg-2:#E7F1FB;          /* secondary panels */
  --card:#FFFFFF;          /* card surface */
  --card-hover:#E7F1FB;    /* card hover surface */
  --line:rgba(23,58,94,0.10);
  --line-strong:rgba(23,58,94,0.20);

  --ink:#173A5E;           /* primary text */
  --ink-dim:#3F6790;       /* secondary text */
  --ink-faint:#7E9CBC;     /* tertiary / captions */

  --pulse:#2F78C8;         /* the "life line" — primary blue */
  --pulse-dim:#2F78C833;
  --brand-green:#008000;   /* accent green used for select homepage elements */
  --brand-green-dim:#00800026;
  --coral:#173A5E;         /* secondary accent / CTA — deep navy */
  --coral-dim:#173A5E1F;
  --amber:#9EC9F3;         /* sparing third accent, stats only */
  --on-accent:#FFFFFF;     /* text drawn on top of --pulse / --coral */

  /* ---- life-line gradient (matches navbar) ---- */
  --lifeline-1:#12335C;
  --lifeline-2:#1E5C96;
  --lifeline-3:#12793D;
  --lifeline-4:#00A651;

  /* ---- type ---- */
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --font-serif:'Playfair Display', Georgia, serif;

  --radius-s:6px;
  --radius-m:14px;
  --radius-l:28px;
}

/* ---- color tokens: DARK ---- */
[data-theme="dark"]{
  --bg-0:#0B1D33;
  --bg-1:#0F2440;
  --bg-2:#132C4E;
  --card:#17325A;
  --card-hover:#1C3B69;
  --line:rgba(231,241,251,0.09);
  --line-strong:rgba(231,241,251,0.16);

  --ink:#EAF3FC;
  --ink-dim:#A9C6E8;
  --ink-faint:#6E93BE;

  --pulse:#5FA8EA;
  --pulse-dim:#5FA8EA33;
  --coral:#9EC9F3;
  --coral-dim:#9EC9F326;
  --amber:#9EC9F3;
  --on-accent:#0B1D33;

  --lifeline-1:#0B2140;
  --lifeline-2:#14487A;
  --lifeline-3:#0E5C31;
  --lifeline-4:#00803D;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{transition:background-color .35s ease, color .35s ease;}
body, .mhn-nav .nav-inner, .card, .quote-card, .news-card, .job-row, .product-preview, .contact-form .form-control{
  transition:background-color .35s ease, border-color .35s ease, color .35s ease;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--bg-1);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.08;
  color:var(--ink);
  margin:0 0 0.5em;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:rgba(0,128,0,0.18); color:var(--ink);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--pulse);
  outline-offset:3px;
  border-radius:4px;
}

.container-mhn{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}
.mhn-nav .container-mhn{max-width:1360px;}

/* ============ CURSOR GLOW ============
   A soft light that follows the cursor across the whole site —
   subtle, low-opacity, purely atmospheric. */
#cursor-glow{
  position:fixed;
  top:0; left:0;
  width:520px; height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,120,200,0.14), transparent 70%);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .4s ease;
  will-change:transform;
}
[data-theme="dark"] #cursor-glow{background:radial-gradient(circle, rgba(95,168,234,0.16), transparent 70%);}
#cursor-glow.is-active{opacity:1;}
@media (max-width: 767px){ #cursor-glow{display:none;} }

/* ============ PAGE LOADER (globe + life-line splash) ============ */
#page-loader{
  position:fixed; inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--bg-0);
  opacity:1;
  visibility:visible;
  transition:opacity .5s ease, visibility 0s linear 0s;
}
.loader-globe{
  position:absolute;
  width:min(58vw, 400px);
  opacity:0.9;
  animation:loaderSpin 18s linear infinite;
}
@keyframes loaderSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.loader-line{
  position:relative;
  width:min(66vw, 380px);
  height:76px;
  z-index:1;
}
.loader-line path{
  fill:none; stroke:url(#loaderLifelineGradient); stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  opacity:0.3;
  animation:loaderDraw 1.7s cubic-bezier(.4,0,.2,1) infinite;
  filter:drop-shadow(0 0 6px rgba(226,35,28,.55));
}
@keyframes loaderDraw{
  0%{stroke-dashoffset:900;}
  55%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:-900;}
}
.loader-brand{
  position:relative;
  z-index:1;
  margin-top:22px;
  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:0.16em;
  font-size:0.85rem;
  color:var(--ink-faint);
  text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.loader-brand .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--pulse);
  box-shadow:0 0 0 4px var(--pulse-dim);
  animation:loaderPulseDot 1.7s ease-in-out infinite;
}
@keyframes loaderPulseDot{
  0%,100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.5); opacity:0.6;}
}
body.loaded #page-loader{
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease, visibility 0s linear .5s;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .loader-globe{animation:none;}
  .loader-line path{animation:none; stroke-dashoffset:0;}
  .loader-brand .dot{animation:none;}
}

/* ============ PAGE LOAD ============ */
body.is-loading{overflow:hidden;}
body.is-loading .mhn-header, body.is-loading main, body.is-loading .hero, body.is-loading .page-header{
  opacity:0;
}
.mhn-header, .hero, .page-header{
  opacity:1;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
body.is-loading .hero, body.is-loading .page-header{transform:translateY(14px);}

/* nav link click ripple */
.nav-links a{position:relative; overflow:hidden;}
.nav-links a .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(47,120,200,0.35);
  transform:scale(0);
  animation:ripple-out .55s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple-out{ to{ transform:scale(1); opacity:0; } }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--brand-green);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--brand-green);
  box-shadow:0 0 0 4px var(--brand-green-dim);
}
.eyebrow.eyebrow-green{color:var(--brand-green);}
.eyebrow.eyebrow-green::before{background:var(--brand-green); box-shadow:0 0 0 4px var(--brand-green-dim);}
#solutions .eyebrow{color:var(--brand-green);}
#solutions .eyebrow::before{background:var(--brand-green); box-shadow:0 0 0 4px var(--brand-green-dim);}
#news .eyebrow{color:var(--brand-green);}
#news .eyebrow::before{background:var(--brand-green); box-shadow:0 0 0 4px var(--brand-green-dim);}

/* professional page-title label for hero sections (no dot bullet) — used on About/Careers heroes */
.hero-kicker{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--brand-green);
  padding-left:16px;
  border-left:3px solid var(--brand-green);
  margin-bottom:18px;
  line-height:1.2;
}

.section{
  position:relative;
  padding:110px 0;
  border-top:1px solid var(--line);
}
.section-tight{padding:70px 0;}

.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head p{color:var(--ink-dim); font-size:1.05rem; max-width:560px;}

/* ============ THE LIFE LINE (signature element) ============
   A persistent, named sidebar of section buttons, fixed to the
   left edge of the viewport on every page. The track fills with
   the pulse color as you scroll, and whichever section you're
   currently on is bolded and highlighted. Content is per-page:
   built dynamically from each [data-pulse-node]'s data-pulse-label. */
#pulse-rail{
  position:fixed;
  top:0; left:0;
  width:96px; height:100vh;
  pointer-events:none;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.rail-name{
  pointer-events:auto;
  margin:100px 0 0 27px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.rail-name .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--pulse);
  box-shadow:0 0 0 3px var(--pulse-dim);
  flex-shrink:0;
}
#pulse-rail-items{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  padding-left:26px;
  margin:24px 0;
}
#pulse-rail-items::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0; width:2px;
  background:var(--line-strong);
}
#pulse-rail-fill{
  position:absolute;
  left:0; top:0; width:2px; height:0;
  background:var(--pulse);
  box-shadow:0 0 8px var(--pulse-dim);
  transition:height .12s linear;
}
.rail-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:auto;
  cursor:pointer;
  background:none;
  border:none;
  padding:3px 0;
  font-family:var(--font-mono);
}
.rail-item .tick{
  width:16px; height:2px;
  border-radius:2px;
  background:var(--line-strong);
  flex-shrink:0;
  transition:background .35s ease, width .35s ease, box-shadow .35s ease;
}
.rail-item .lbl{
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
  font-weight:500;
  transition:color .35s ease, transform .35s ease, font-weight .35s ease;
  transform:translateX(-4px);
  opacity:0.85;
}
.rail-item:hover .tick{background:var(--pulse); width:22px;}
.rail-item:hover .lbl{color:var(--ink);}
.rail-item.is-active .tick{
  background:var(--brand-green);
  width:26px;
  box-shadow:0 0 10px rgba(0,128,0,0.55);
}
.rail-item.is-active .lbl{
  color:var(--brand-green);
  font-weight:700;
  transform:translateX(0);
  opacity:1;
}
.rail-item.is-passed .tick{background:var(--pulse-dim);}
@media (max-width: 1100px){
  #pulse-rail{width:76px;}
  .rail-name{margin-left:20px;}
  #pulse-rail-items{padding-left:20px;}
  .rail-name span:last-child{display:none;}
}
@media (max-width: 991px){
  #pulse-rail{display:none;}
}

/* ============ NAVBAR ============ */
.mhn-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
}

/* ---- top utility bar ---- */
.mhn-topbar{
  padding:12px 0;
  background:linear-gradient(90deg, #12335C 0%, #1E5C96 40%, #12793D 75%, #00A651 100%);
  border-bottom:1px solid rgba(234,243,252,0.10);
  transition:padding .35s ease, background .35s ease, max-height .35s ease, opacity .35s ease;
  overflow:hidden;
  max-height:200px;
}
[data-theme="dark"] .mhn-topbar{ background:linear-gradient(90deg, #0B2140 0%, #14487A 40%, #0E5C31 75%, #00803D 100%); }
.mhn-topbar.topbar-hidden{
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  border-bottom-color:transparent;
  pointer-events:none;
}
.mhn-topbar .container-mhn{max-width:1360px;}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.topbar-logo{
  display:flex; align-items:center;
  flex-shrink:0;
}
.topbar-logo img{
  height:44px;
  width:auto;
  display:block;
}
.topbar-navslot{display:flex; justify-content:center; flex:1; min-width:0;}
.nav-controls{display:flex; align-items:center; gap:18px;}
.topbar-actions{display:flex; align-items:center; gap:18px;}
@keyframes navPillGradient{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.topbar-contact{
  font-family:var(--font-body); font-weight:600; font-size:0.85rem;
  color:#FFFFFF; border:1px solid rgba(255,255,255,0.55);
  padding:8px 18px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.topbar-contact:hover{
  border-color:transparent;
  color:#12335C;
  background:linear-gradient(120deg, #EAF3FC, #CFE4FB, #EAF3FC);
  background-size:200% 200%;
  animation:navPillGradient 2.4s ease infinite;
}

/* ============ NAVBAR (the "broken off" bar shown once the page is
   scrolled -- hidden until then, since the links live in the top bar
   at rest) ============ */
/* ============ NAVBAR (floating link bar shown once the page is
   scrolled -- the top bar tucks away, and just the nav links +
   search float directly over the page, with no background or
   pill behind them). ============ */
.mhn-nav{
  max-height:0;
  padding:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transition:max-height .35s ease, padding .35s ease, opacity .3s ease;
}
.mhn-nav.is-scrolled{
  max-height:200px;
  padding:14px 0;
  opacity:1;
  overflow:visible;
  pointer-events:auto;
}
.mhn-nav{position:relative;}
.mhn-nav .nav-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.mhn-nav .nav-inner .brand{
  position:absolute;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  margin-right:0;
}
/* the scrolled-state pill: same gradient theme as the top bar, with the
   same light/visible icon treatment -- scoped to .mhn-nav only, so the
   top bar itself (logo + Contact Us section) is completely untouched. */
.mhn-nav .nav-controls{
  background:linear-gradient(90deg, #12335C 0%, #1E5C96 40%, #12793D 75%, #00A651 100%);
  border:1px solid rgba(234,243,252,0.22);
  border-radius:999px;
  padding:8px 20px;
  box-shadow:0 10px 26px -12px rgba(0,0,0,0.35);
}
/* "Contact Us" pill duplicate that only shows once the nav-controls
   group has floated into the scrolled pill bar -- the top bar's own
   Contact Us button is hidden at that point (whole top bar tucks
   away), so this keeps Contact reachable while scrolled. Hidden at
   rest since the top bar already shows Contact Us there. */
.nav-contact-scroll{display:none;}
.mhn-nav .nav-contact-scroll{
  display:inline-flex;
  padding:6px 16px;
  font-size:0.82rem;
  white-space:nowrap;
}
[data-theme="dark"] .mhn-nav .nav-controls{
  background:linear-gradient(90deg, #0B2140 0%, #14487A 40%, #0E5C31 75%, #00803D 100%);
}
.mhn-nav .nav-links a{color:rgba(234,243,252,0.85);}
.mhn-nav .nav-links a:hover{color:#EAF3FC; background:rgba(234,243,252,0.16);}
.mhn-nav .nav-links a.active{color:#12335C; background:#EAF3FC;}
.mhn-nav .nav-search{border-color:rgba(234,243,252,0.4); background:rgba(234,243,252,0.14);}
[data-theme="dark"] .mhn-nav .nav-search{background:rgba(234,243,252,0.14);}
.mhn-nav .nav-search:hover{border-color:#EAF3FC;}
.mhn-nav .nav-search.is-open{background:rgba(6,16,32,0.55); border-color:rgba(234,243,252,0.4);}
.mhn-nav .nav-search button{color:#EAF3FC;}
.mhn-nav .nav-search input{color:#EAF3FC;}
.mhn-nav .nav-search input::placeholder{color:rgba(234,243,252,0.6);}
.mhn-nav .nav-toggle{margin-left:auto; color:#EAF3FC;}

.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:1.12rem;
  letter-spacing:0.02em;
  color:var(--ink);
  position:relative; z-index:1;
  padding-right:20px;
  margin-right:8px;
  border-right:1px solid rgba(234,243,252,0.16);
}
@media (max-width: 767px){ .brand{border-right:none; padding-right:0; margin-right:0;} }
.nav-brand-logo{height:30px; width:auto; display:block;}
.brand .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--pulse);
  box-shadow:0 0 0 0 var(--pulse-dim);
  animation:beat 1.8s infinite;
}
@keyframes beat{
  0%,100%{box-shadow:0 0 0 0 var(--pulse-dim);}
  35%{box-shadow:0 0 0 6px var(--pulse-dim);}
}

.nav-links{
  display:flex; align-items:center; gap:2px;
  list-style:none; margin:0; padding:0;
  position:relative; z-index:1;
}
.nav-links a{
  font-size:0.9rem;
  color:var(--ink-dim);
  padding:8px 14px;
  border-radius:999px;
  transition:color .25s ease, background .25s ease;
}
.nav-links a:hover, .nav-links a.active{
  color:var(--ink);
  background:rgba(255,255,255,0.06);
}

/* nav links now live inside the colorful gradient topbar by default --
   the dim navy text above is meant for light/dark theme backgrounds, so
   give them light text here for contrast against the topbar gradient.
   (.active keeps the white-pill treatment above, which already reads fine.) */
.topbar-navslot .nav-links a{color:rgba(234,243,252,0.8);}
.topbar-navslot .nav-links a:hover{color:#EAF3FC; background:rgba(234,243,252,0.14);}
.topbar-navslot .nav-search{border-color:rgba(234,243,252,0.35); background:rgba(234,243,252,0.10);}
.topbar-navslot .nav-search:hover{border-color:#EAF3FC;}

.btn-pulse{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.88rem;
  color:var(--on-accent);
  background:var(--brand-green);
  border:none;
  padding:11px 22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  position:relative; z-index:1;
  cursor:pointer;
}
.btn-pulse:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(0,128,0,0.45);
  color:var(--on-accent);
}
.hero-actions .btn-pulse{background:var(--brand-green);}
.hero-actions .btn-pulse:hover{box-shadow:0 10px 24px -8px rgba(0,128,0,0.45);}
.btn-coral{
  background:var(--coral);
  color:var(--on-accent);
}
.btn-coral:hover{
  box-shadow:0 10px 24px -8px rgba(23,58,94,0.45);
  color:var(--on-accent);
}
.btn-ghost{
  font-weight:600;
  font-size:0.9rem;
  color:var(--ink);
  border:1px solid var(--line-strong);
  padding:10px 20px;
  border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .25s ease, background .25s ease;
}
.btn-ghost:hover{ border-color:var(--pulse); background:rgba(47,120,200,0.06); color:var(--ink);}
.btn-app{margin-left:10px; background:var(--brand-green);}
.btn-app:hover{box-shadow:0 10px 24px -8px rgba(0,128,0,0.45);}
@media (max-width:480px){ .btn-app{margin-left:0; margin-top:10px;} }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  flex-shrink:0;
  padding:0;
  border-radius:50%;
  /* very light frosted-glass look */
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.12);
  /* blur only (no colour boost) so the button never shows up as a coloured disc */
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:none;
  color:rgba(255,255,255,0.75);
  font-size:1.5rem; line-height:1;
  align-items:center; justify-content:center;
  cursor:pointer;
  z-index:1;
  transition:border-color .25s ease, background .25s ease, transform .2s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.22); color:#FFFFFF;}
.nav-toggle:active{transform:scale(0.92);}
/* "Contact Us" + theme entries inside the mobile menu (never shown on desktop) */
.nav-links > .nav-links-contact,
.nav-links > .nav-links-theme{display:none !important;}

/* ============ THEME TOGGLE ============ */
.theme-toggle{
  position:relative; z-index:1;
  width:38px; height:38px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--bg-2);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, color .25s ease, transform .35s ease;
}
.theme-toggle:hover{border-color:var(--pulse); color:var(--pulse);}
.theme-toggle:active{transform:scale(0.9);}
.theme-toggle .bi-sun-fill{display:none;}
[data-theme="dark"] .theme-toggle .bi-moon-stars-fill{display:none;}
[data-theme="dark"] .theme-toggle .bi-sun-fill{display:inline-block;}

/* ============ LOGIN BUTTON (next to theme toggle) ============ */
.nav-login-btn{
  position:relative; z-index:1;
  width:38px; height:38px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--bg-2);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, color .25s ease, transform .2s ease;
}
.nav-login-btn:hover{border-color:var(--pulse); color:var(--pulse);}
.nav-login-btn:active{transform:scale(0.9);}

/* ---- nav search ---- */
.nav-search{
  position:relative; z-index:1;
  display:flex; align-items:center;
  height:38px; width:38px;
  flex-shrink:0;
  border-radius:999px;
  border:1px solid rgba(234,243,252,0.22);
  background:rgba(234,243,252,0.06);
  overflow:hidden;
  transition:width .35s cubic-bezier(.2,.8,.2,1), background .25s ease, border-color .25s ease;
}
.nav-search:hover{border-color:var(--pulse);}
.nav-search.is-open{width:200px; background:rgba(6,16,32,0.55);}
.nav-search button{
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:#EAF3FC; font-size:0.95rem; cursor:pointer;
}
.nav-search input{
  border:none; background:none; outline:none;
  color:#EAF3FC; font-family:var(--font-body); font-size:0.85rem;
  width:0; opacity:0; min-width:0;
  transition:width .3s ease, opacity .3s ease;
}
.nav-search.is-open input{width:150px; opacity:1;}
.nav-search input::placeholder{color:rgba(234,243,252,0.5);}
.nav-search-results{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:300px;
  max-height:340px;
  overflow-y:auto;
  background:#0B1D33;
  border:1px solid rgba(234,243,252,0.16);
  border-radius:14px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,0.5);
  padding:6px;
  display:none;
}
.nav-search-results.is-visible{display:block;}
.nav-search-results a{
  display:block;
  padding:9px 12px;
  border-radius:9px;
  font-size:0.85rem;
  font-weight:500;
  color:#EAF3FC;
  transition:background .2s ease;
}
.nav-search-results a:hover, .nav-search-results a.is-active{background:rgba(255,255,255,0.09);}
.nav-search-results a .sr-page{
  display:block;
  font-size:0.7rem;
  font-family:var(--font-mono);
  color:rgba(234,243,252,0.5);
  margin-top:2px;
}
.nav-search-results .sr-empty{
  padding:10px 12px;
  font-size:0.82rem;
  color:rgba(234,243,252,0.55);
}
@media (max-width: 767px){ .nav-search{display:none;} }
@media (max-width: 991px){
  /* one clean row on tablets & phones:  hamburger (left) · logo · actions (right) */
  /* bar = hamburger + logo on the left, theme (mood) button on the right.
     Contact Us moves into the hamburger menu. */
  .topbar-inner{display:flex; align-items:center; justify-content:flex-start; gap:14px;}
  .topbar-navslot{order:-1; flex:0 0 auto; justify-content:flex-start;}
  .topbar-actions{margin-left:auto; gap:10px;}
  .topbar-actions .topbar-contact{display:none;}
  .nav-controls{gap:0;}
  .nav-toggle{display:flex; position:relative; z-index:201;}
  .nav-cta{display:none;}
  .nav-contact-scroll{display:none !important;}

  /* the dropdown menu — same gradient as the top bar so the light link text is
     always readable, in both themes */
  .nav-links{
    position:fixed;
    top:84px; left:16px; right:16px;
    z-index:200;
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex-direction:column;
    align-items:stretch;
    background:linear-gradient(90deg, rgba(18,51,92,0.14) 0%, rgba(30,92,150,0.14) 40%, rgba(18,121,61,0.14) 75%, rgba(0,166,81,0.14) 100%);
    -webkit-backdrop-filter:blur(22px);
    backdrop-filter:blur(22px);
    border:1px solid rgba(234,243,252,0.18);
    border-radius:18px;
    padding:10px;
    box-shadow:0 24px 40px -20px rgba(11,29,51,0.35);
    display:none;
    gap:4px;
  }
  .nav-links.is-open{display:flex;}
  [data-theme="dark"] .nav-links{
    background:linear-gradient(90deg, rgba(11,33,64,0.18) 0%, rgba(20,72,122,0.18) 40%, rgba(14,92,49,0.18) 75%, rgba(0,128,61,0.18) 100%);
  }
  .nav-links a,
  .topbar-navslot .nav-links a{
    display:block;
    padding:12px 16px;
    font-size:1rem;
    color:rgba(234,243,252,0.92);
  }
  .nav-links a:hover,
  .topbar-navslot .nav-links a:hover{color:#FFFFFF; background:rgba(234,243,252,0.14);}
  .topbar-navslot .nav-links a.active{color:#FFFFFF; font-weight:700; background:rgba(234,243,252,0.18);}
  .nav-links > .nav-links-contact{display:block !important; margin-top:6px;}
  .nav-links-contact a{
    display:flex !important;
    align-items:center; justify-content:center; gap:8px;
    font-weight:600;
    border:1px solid rgba(255,255,255,0.55);
  }
  .nav-links > .nav-links-theme{display:block !important;}
  .nav-theme-item{
    width:100%;
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 16px;
    border-radius:12px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.4);
    color:#FFFFFF;
    font-family:var(--font-body); font-size:1rem; font-weight:500;
    cursor:pointer;
  }
  .nav-theme-item:hover{background:rgba(255,255,255,0.24);}
  .nav-theme-item .bi-sun-fill,
  .nav-theme-item .lbl-light{display:none;}
  [data-theme="dark"] .nav-theme-item .bi-moon-stars-fill,
  [data-theme="dark"] .nav-theme-item .lbl-dark{display:none;}
  [data-theme="dark"] .nav-theme-item .bi-sun-fill{display:inline-block;}
  [data-theme="dark"] .nav-theme-item .lbl-light{display:inline;}

  /* the floating pill nav is desktop-only: on small screens the top bar just
     stays in place, so the hamburger, logo, theme and Contact never disappear */
  .mhn-topbar.topbar-hidden{
    max-height:200px;
    padding:12px 0;
    opacity:1;
    pointer-events:auto;
    border-bottom-color:rgba(234,243,252,0.10);
  }
  .mhn-nav{display:none;}
  body.nav-open{overflow:hidden;}
}
@media (max-width: 600px){
  .mhn-topbar .container-mhn{padding:0 16px;}
  .topbar-logo img{height:36px;}
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:100px 0 16px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(11,29,51,0.24), rgba(11,29,51,0.14) 45%, rgba(11,29,51,0.24)),
    radial-gradient(ellipse 900px 500px at 78% 12%, rgba(47,120,200,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 90%, rgba(23,58,94,0.06), transparent 60%),
    var(--bg-0);
}
[data-theme="dark"] .hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.16) 45%, rgba(0,0,0,0.30)),
    radial-gradient(ellipse 900px 500px at 78% 12%, rgba(47,120,200,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 90%, rgba(23,58,94,0.06), transparent 60%),
    var(--bg-0);
}
.hero-orbit{
  position:absolute;
  right:max(7%, calc((100% - 1240px) / 2 + 60px));
  top:52%;
  transform:translateY(-50%);
  width:min(30vw, 380px);
  height:auto;
  opacity:0.32;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
@media (max-width: 1100px){
  .hero-orbit{right:5%; width:min(34vw, 440px);}
}
@media (max-width: 767px){
  .hero-orbit{opacity:0.16; right:8%; width:min(48vw, 260px); top:62%;}
}
.hero-content{position:relative; z-index:2; max-width:700px;}
.hero-heading{
  font-family:var(--font-mono);
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brand-green);
  margin:0 0 6px;
}
.hero-tag{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:10px;
  display:block;
}
.hero h1{
  font-size:clamp(1.9rem, 3.6vw, 2.9rem);
  margin-bottom:12px;
  line-height:1.15;
}
.hero h1 .accent{color:var(--brand-green);}
.hero p.lead{
  font-size:1.05rem;
  color:var(--ink-dim);
  max-width:560px;
  margin-bottom:18px;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
.hero-meta{
  margin-top:20px;
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
}
.hero-meta div{border-left:2px solid var(--pulse-dim); padding-left:14px;}
.hero-meta .n{font-size:1.5rem; color:var(--ink); display:block; font-family:var(--font-display);}
.hero-meta .l{font-size:0.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.08em;}

/* animated life-line trace across hero */
.hero-trace{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:240px;
  width:100%;
  z-index:1;
  pointer-events:none;
}
@media (max-height: 820px){
  .hero{padding-top:90px; padding-bottom:12px;}
  .hero-meta{margin-top:14px;}
}
@media (max-width: 767px){
  .hero{padding-top:110px;}
  .hero-trace{height:180px;}
}
@media (min-width: 768px) and (max-width: 991px){
  .hero-trace{height:210px;}
}
.hero-trace path{
  fill:none; stroke:url(#heroLifelineGradient); stroke-width:2;
  opacity:0.3;
  stroke-dasharray:12 8;
  animation:dash 3.2s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:-200; } }

/* ============ CARDS: SOLUTIONS ============ */
.grid{display:grid; gap:22px;}
.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: 991px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;} }

/* Our Partners in Health — continuous sliding logo marquee (Services page) */
.partners-track-wrap{
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.partners-track{
  display:flex;
  align-items:center;
  gap:26px;
  width:max-content;
  animation:partners-scroll 24s linear infinite;
}
.partners-track-wrap:hover .partners-track{animation-play-state:paused;}
@keyframes partners-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .partners-track{animation:none;}
}
.partner-logo-card{
  background:none;
  border:none;
  padding:18px;
  width:230px;
  height:130px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.partner-logo-card:hover{
  transform:translateY(-4px);
}
.partner-logo-card .logo-badge{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.partner-logo-card .logo-badge img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
/* Sphere's logo needs a white plate behind it to stay legible — keep its
   background even though every other partner logo runs transparent */
.partner-logo-card .logo-badge.logo-badge--sphere{
  background:#FFFFFF;
  border-radius:var(--radius-s);
}
/* The Eye Associates logo renders small relative to the others — scale it up */
.partner-logo-card .logo-badge img.logo-eye-associates{
  max-width:220%;
  max-height:220%;
}
@media (max-width:640px){
  .partner-logo-card{width:170px; height:100px; padding:10px;}
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:30px 26px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease;
}
.card::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(240px 140px at var(--mx,50%) var(--my,0%), rgba(47,120,200,0.12), transparent 70%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--pulse-dim);
  background:var(--card-hover);
}
.card:hover::after{opacity:1;}
.card-media.skeleton{
  height:64px;
  border-radius:10px;
  margin-bottom:16px;
  background:linear-gradient(100deg, var(--bg-2) 30%, var(--card-hover) 50%, var(--bg-2) 70%);
  background-size:200% 100%;
  animation:shimmer 1.8s ease-in-out infinite;
}
.card-media{
  height:150px;
  border-radius:10px;
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}
.card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-media img{transform:scale(1.07);}
.card-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(47,120,200,0.38), rgba(23,58,94,0.16));
  mix-blend-mode:multiply;
  pointer-events:none;
}
[data-theme="dark"] .card-media::after{
  background:linear-gradient(160deg, rgba(47,120,200,0.5), rgba(6,16,32,0.4));
  mix-blend-mode:color;
}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.card[data-selectable].is-selected{
  border-color:var(--pulse);
  background:var(--card-hover);
  box-shadow:0 0 0 1px var(--pulse-dim), 0 16px 34px -18px rgba(47,120,200,0.4);
}
.card[data-selectable].is-selected .icon{
  background:var(--pulse);
  color:var(--on-accent);
}
.card .icon{
  width:46px; height:46px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-green-dim);
  color:var(--brand-green);
  font-size:1.3rem;
  margin-bottom:20px;
}
.card h3{font-size:1.15rem; margin-bottom:8px;}
.card p{color:var(--ink-dim); font-size:0.94rem; margin-bottom:16px; flex-grow:1;}
.card .learn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.82rem;
  color:var(--pulse);
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  border-radius:999px;
  border:1.5px solid var(--pulse);
  background:rgba(47,120,200,0.08);
  align-self:flex-start;
  margin-top:auto;
  transition:transform .2s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card .learn:hover{
  background:var(--brand-green);
  color:var(--on-accent);
  border-color:var(--brand-green);
  box-shadow:0 10px 24px -10px rgba(0,128,0,0.5);
  transform:translateY(-2px);
}
.card .learn:active{
  transform:translateY(0) scale(0.94);
  box-shadow:0 4px 10px -6px rgba(0,128,0,0.5);
  transition:transform .12s ease, box-shadow .12s ease;
}
.card .learn i{transition:transform .25s ease;}
.card .learn:hover i{transform:translateX(4px);}

/* ============ CORE VALUES MARQUEE ============ */
.values-marquee{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:32px 0;
  overflow:hidden;
}
.values-marquee .container-mhn{
  display:flex;
  align-items:center;
  gap:36px;
}
.values-marquee .vm-label{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--brand-green);
  display:flex;
  align-items:center;
  gap:10px;
  padding-right:28px;
  border-right:1px solid var(--line-strong);
}
.values-marquee .vm-label::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--brand-green);
  box-shadow:0 0 0 4px var(--brand-green-dim);
  flex-shrink:0;
}
.vm-track-wrap{
  flex:1;
  min-width:0;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.vm-track{
  display:flex;
  width:max-content;
  animation:vm-scroll 22s linear infinite;
}
.vm-track span{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.3rem;
  color:var(--ink);
  white-space:nowrap;
  padding:0 30px;
  position:relative;
}
.vm-track span::after{
  content:"◆";
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  font-size:0.5rem;
  color:var(--pulse);
  opacity:0.6;
}
@keyframes vm-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .vm-track{animation:none;}
}
@media (max-width: 767px){
  .values-marquee .container-mhn{flex-direction:column; align-items:flex-start; gap:14px;}
  .values-marquee .vm-label{border-right:none; padding-right:0;}
}

/* ============ STAT STRIP ============ */
.stat-strip{
  background:var(--bg-0);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:70px 0;
}
.stat-strip .grid-4{gap:0;}
.stat{
  text-align:center;
  padding:20px 16px;
  border-right:1px solid var(--line);
}
.stat:last-child{border-right:none;}
.stat .num{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  font-weight:700;
  color:var(--pulse);
  font-variant-numeric:tabular-nums;
}
.stat .num .unit{font-size:0.5em; color:var(--ink-dim); margin-left:2px;}
.stat .lbl{
  font-family:var(--font-mono);
  font-size:0.76rem;
  letter-spacing:0.06em;
  color:var(--ink-faint);
  margin-top:8px;
}
@media (max-width: 640px){
  .stat{border-right:none; border-bottom:1px solid var(--line);}
}

/* ============ PRODUCT PREVIEW ============ */
.product-preview{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:6px;
  position:relative;
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.6);
}
.product-preview .chrome{
  display:flex; align-items:center; gap:8px;
  padding:14px 18px;
}
.product-preview .chrome span{width:9px; height:9px; border-radius:50%; background:var(--line-strong);}
.product-preview .screen{
  background:var(--bg-0);
  border-radius:calc(var(--radius-l) - 10px);
  padding:26px;
  font-family:var(--font-mono);
  font-size:0.8rem;
}
.mock-row{display:flex; gap:18px;}
.mock-side{width:150px; flex-shrink:0; display:flex; flex-direction:column; gap:10px;}
.mock-pill{height:12px; border-radius:6px; background:var(--line-strong);}
.mock-pill.active{background:var(--pulse-dim); border:1px solid var(--pulse);}
.mock-main{flex:1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
.mock-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; min-height:80px;}
.mock-card .k{color:var(--ink-faint); font-size:0.68rem;}
.mock-card .v{color:var(--pulse); font-size:1.3rem; font-family:var(--font-display); margin-top:6px;}
.mock-chart{grid-column:1/-1; height:110px; background:var(--card); border:1px solid var(--line); border-radius:10px; margin-top:12px; position:relative; overflow:hidden;}
.mock-chart svg{position:absolute; inset:0; width:100%; height:100%;}
@media (max-width: 767px){ .mock-side{display:none;} .mock-main{grid-template-columns:1fr 1fr;} }

/* ---- 3D animated chart (Inside the Platform) ---- */
.chart-3d{
  grid-column:1/-1;
  height:190px;
  margin-top:12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:radial-gradient(120% 130% at 50% 100%, var(--card) 0%, var(--bg-2) 100%);
  display:flex; align-items:flex-end; justify-content:center;
  gap:16px;
  padding:22px 20px 0;
  perspective:900px;
  overflow:hidden;
  position:relative;
}
.chart-3d::before{
  content:"PATIENT VOLUME — LAST 9 DAYS";
  position:absolute; top:10px; left:16px;
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em;
  color:var(--ink-faint);
}
.chart-3d-floor{
  display:flex; align-items:flex-end; justify-content:center;
  gap:14px;
  width:100%; height:100%;
  transform-style:preserve-3d;
  transform:rotateX(24deg) rotateY(-8deg);
  animation:chart-breathe 8s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes chart-breathe{
  0%,100%{ transform:rotateX(24deg) rotateY(-8deg); }
  50%{ transform:rotateX(17deg) rotateY(-3deg); }
}
@media (prefers-reduced-motion: reduce){
  .chart-3d-floor{animation:none;}
}
.bar-3d{
  position:relative;
  width:22px;
  height:0;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, var(--amber), var(--pulse) 45%, var(--coral));
  box-shadow:9px 5px 0 -1px rgba(23,58,94,0.55);
  transform:translateZ(calc(var(--i) * 2px));
  transform-origin:bottom center;
  transition:height 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i) * 70ms);
}
.bar-3d::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:6px;
  background:rgba(255,255,255,0.55);
  border-radius:4px 4px 0 0;
}
[data-theme="dark"] .bar-3d::after{background:rgba(255,255,255,0.28);}
.reveal.is-visible .bar-3d{height:var(--h);}

/* ============ TESTIMONIALS ============ */
.quote-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:32px;
  height:100%;
}
.quote-card .mark{font-family:var(--font-display); font-size:2.6rem; color:var(--pulse-dim); line-height:1; margin-bottom:6px;}
.quote-card p.q{font-size:1.02rem; color:var(--ink); margin-bottom:22px;}
.quote-who{display:flex; align-items:center; gap:12px;}
.quote-avatar{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--pulse), var(--coral));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--on-accent);
}
.quote-who .name{font-weight:600; font-size:0.92rem;}
.quote-who .org{color:var(--ink-faint); font-size:0.8rem; font-family:var(--font-mono);}

/* ============ NEWS ============ */
.news-card{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  background:var(--card);
  transition:border-color .3s ease, transform .3s ease;
}
.news-card:hover{border-color:var(--pulse-dim); transform:translateY(-4px);}
.news-card.is-selected{border-color:var(--pulse); box-shadow:0 0 0 1px var(--pulse-dim);}
.news-card.is-selected .date{color:var(--coral);}
.news-card .thumb{
  height:150px;
  background:linear-gradient(135deg, var(--bg-2), var(--card-hover));
  position:relative;
  overflow:hidden;
}
.news-card .thumb::before{
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:16px 16px;
}
.news-card .thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.news-card:hover .thumb img{transform:scale(1.08);}
.news-card .thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(47,120,200,0.34), rgba(23,58,94,0.14));
  mix-blend-mode:multiply;
  pointer-events:none;
}
[data-theme="dark"] .news-card .thumb::after{
  background:linear-gradient(160deg, rgba(47,120,200,0.46), rgba(6,16,32,0.4));
  mix-blend-mode:color;
}
.news-card .thumb.skeleton::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  background-size:200% 100%;
  animation:shimmer 1.8s ease-in-out infinite;
}
[data-theme="dark"] .news-card .thumb.skeleton::after{
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  background-size:200% 100%;
}
.news-card .body{padding:20px;}
.news-card .date{font-family:var(--font-mono); font-size:0.72rem; color:var(--brand-green); text-transform:uppercase; letter-spacing:0.06em;}
.news-card h4{font-size:1rem; margin:10px 0 0;}

/* ============ CAREERS / HIRING TEASER ============ */
.hiring-section{
  background:
    radial-gradient(ellipse 700px 400px at 85% 20%, rgba(95,168,234,0.16), transparent 65%),
    linear-gradient(135deg, #12335C, #173A5E 55%, #0E2846);
}
[data-theme="dark"] .hiring-section{
  background:
    radial-gradient(ellipse 700px 400px at 85% 20%, rgba(95,168,234,0.14), transparent 65%),
    linear-gradient(135deg, #0B2140, #0F2A4C 55%, #081A30);
}
.careers-banner{
  background:rgba(234,243,252,0.06);
  border:1px solid rgba(234,243,252,0.16);
  border-radius:var(--radius-l);
  padding:38px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.careers-banner h3{margin:0 0 6px; font-size:1.3rem; color:#EAF3FC;}
.careers-banner p{margin:0; color:rgba(234,243,252,0.7);}

/* round, animated gradient CTA */
.btn-gradient-round{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
  color:#fff;
  border:none;
  padding:15px 30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:relative;
  cursor:pointer;
  background:linear-gradient(115deg, #00590a, #008000, #2fb84f, #008000);
  background-size:300% 100%;
  animation:gradient-flow 5s ease-in-out infinite;
  box-shadow:0 10px 30px -10px rgba(0,128,0,0.65);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.btn-gradient-round:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 38px -10px rgba(47,184,79,0.75);
  color:#fff;
}
.btn-gradient-round:active{transform:translateY(-1px) scale(0.99);}
@keyframes gradient-flow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@media (prefers-reduced-motion: reduce){
  .btn-gradient-round{animation:none;}
}

/* ============ FOOTER ============ */
footer.mhn-footer{
  position:relative;
  overflow:hidden;
  background:var(--bg-2);
  border-top:1px solid var(--line);
  padding:84px 0 28px;
}
footer.mhn-footer, footer.mhn-footer .brand{color:var(--ink);}
footer.mhn-footer .text-dim, footer.mhn-footer .footer-grid a, footer.mhn-footer .footer-bottom{color:var(--ink-dim);}
footer.mhn-footer .footer-grid h5{color:var(--ink);}
footer.mhn-footer .footer-grid a:hover{color:var(--pulse);}
footer.mhn-footer .footer-bottom{border-color:var(--line);}
footer.mhn-footer .social-icons a{border:none; color:var(--ink-dim);}
footer.mhn-footer .social-icons a:hover{border-color:transparent; color:var(--pulse);}

.footer-watermark{
  position:absolute;
  top:-0.16em;
  left:50%;
  transform:translateX(-32%);
  transform-origin:50% 50%;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(9rem, 15vw, 15rem);
  letter-spacing:0.02em;
  color:var(--ink);
  opacity:0.055;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:0;
  backface-visibility:hidden;
}
footer.mhn-footer{perspective:1400px;}
@keyframes footerWatermarkSpin{
  from{transform:translateX(-32%) rotateY(0deg);}
  to{transform:translateX(-32%) rotateY(360deg);}
}
footer.mhn-footer.footer-animate .footer-watermark{
  animation:footerWatermarkSpin 1.5s cubic-bezier(.4,0,.2,1) 1;
}
@media (max-width: 767px){
  @keyframes footerWatermarkSpinMobile{
    from{transform:translateX(-28%) rotateY(0deg);}
    to{transform:translateX(-28%) rotateY(360deg);}
  }
  footer.mhn-footer.footer-animate .footer-watermark{
    animation-name:footerWatermarkSpinMobile;
  }
}

/* DESKTOP (>= 992px): original full-footer background ECG line */
.footer-lifeline{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.footer-lifeline path,
.footer-lifeline-m path{
  fill:none;
  stroke-width:2;
  stroke-linecap:butt;
  stroke-linejoin:miter;
  opacity:0.12;
  stroke-dasharray:10 7;
  filter:drop-shadow(0 0 2px rgba(226,35,28,0.25));
  animation:dash 3.2s linear infinite;
}
.footer-lifeline path{stroke:url(#footerLifelineGradient);}
.footer-lifeline-m path{stroke:url(#footerLifelineGradientM);}

/* SHORT SCREENS (tablet/mobile): separate in-flow strip; hidden on desktop */
.footer-lifeline-strip{display:none;}
@media (max-width: 991px){
  .footer-lifeline--desktop{display:none;}
  .footer-lifeline-strip{
    display:block;
    position:relative;
    width:100%;
    height:56px;
    margin-top:40px;
    overflow:hidden;
    pointer-events:none;
  }
  .footer-lifeline-m{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .footer-lifeline-m path{opacity:0.08;}
}
@media (prefers-reduced-motion: reduce){
  footer.mhn-footer.footer-animate .footer-watermark{animation:none;}
  .footer-lifeline path,
  .footer-lifeline-m path{animation:none;}
}

footer.mhn-footer .container-mhn{position:relative; z-index:1;}

footer.mhn-footer .brand{
  display:flex; align-items:flex-start; gap:14px;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.55rem;
  line-height:1.25;
  letter-spacing:0;
  border:none; padding:0; margin:0 0 18px;
}
footer.mhn-footer .brand .footer-logo{
  height:42px; width:auto; flex-shrink:0;
  display:block;
}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
.footer-grid > div{min-width:0;}
footer.mhn-footer .brand{min-width:0;}
@media (max-width: 991px){
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
}
@media (max-width: 767px){
  .footer-grid{grid-template-columns:1fr; row-gap:32px;}
  .footer-watermark{font-size:clamp(5rem, 26vw, 8rem); transform:translateX(-28%);}
  .footer-lifeline-strip{height:60px; margin-top:28px;}
  .footer-lifeline-m path{stroke-width:2.5; opacity:0.35;}
}
.footer-grid h5{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  margin-bottom:18px;
}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.footer-grid a{color:var(--ink-dim); font-size:0.94rem; font-family:var(--font-body);}
.footer-grid a:hover{color:var(--pulse);}
.footer-bottom{
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
  font-size:0.76rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
@media (max-width: 991px){
  .footer-bottom{margin-top:20px;}
}
.footer-bottom .bottom-links{display:flex; gap:26px; flex-wrap:wrap;}
.footer-bottom .bottom-links a{color:var(--ink-faint);}
.footer-bottom .bottom-links a:hover{color:var(--pulse);}
.social-icons{display:flex; gap:16px; margin-top:20px;}
.social-icons a{
  width:auto; height:auto;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  color:var(--ink-dim);
  transition:color .25s ease;
}
.social-icons a:hover{color:var(--pulse);}

/* ============ PAGE HEADER (interior pages) ============ */
.page-header{
  padding:170px 0 70px;
  background:
    radial-gradient(ellipse 700px 400px at 85% 0%, rgba(47,120,200,0.08), transparent 60%),
    var(--bg-0);
  border-bottom:1px solid var(--line);
}

/* HMIS product page — hero background image, readable in both light and dark themes */
.page-header--hmis{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 28%, rgba(255,255,255,0.3) 58%, rgba(255,255,255,0) 80%),
    url('../Images/hmis-hero-bg.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
[data-theme="dark"] .page-header--hmis{
  background-image:
    linear-gradient(90deg, rgba(11,29,51,0.97) 0%, rgba(11,29,51,0.85) 28%, rgba(11,29,51,0.45) 58%, rgba(11,29,51,0.15) 80%),
    url('../Images/hmis-hero-bg.jpg');
}

/* Survey product page — hero background image, readable in both light and dark themes */
.page-header--survey{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 28%, rgba(255,255,255,0.3) 58%, rgba(255,255,255,0) 80%),
    url('../Images/survey-hero-bg.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
[data-theme="dark"] .page-header--survey{
  background-image:
    linear-gradient(90deg, rgba(11,29,51,0.97) 0%, rgba(11,29,51,0.85) 28%, rgba(11,29,51,0.45) 58%, rgba(11,29,51,0.15) 80%),
    url('../Images/survey-hero-bg.webp');
}

/* ECD product page — hero background image, readable in both light and dark themes */
.page-header--ecd{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 28%, rgba(255,255,255,0.3) 58%, rgba(255,255,255,0) 80%),
    url('../Images/ecd-hero-bg.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
[data-theme="dark"] .page-header--ecd{
  background-image:
    linear-gradient(90deg, rgba(11,29,51,0.97) 0%, rgba(11,29,51,0.85) 28%, rgba(11,29,51,0.45) 58%, rgba(11,29,51,0.15) 80%),
    url('../Images/ecd-hero-bg.jpg');
}

/* Analytics product page — hero background image, readable in both light and dark themes */
.page-header--analytics{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 28%, rgba(255,255,255,0.3) 58%, rgba(255,255,255,0) 80%),
    url('../Images/analytics-hero-bg.png');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
[data-theme="dark"] .page-header--analytics{
  background-image:
    linear-gradient(90deg, rgba(11,29,51,0.97) 0%, rgba(11,29,51,0.85) 28%, rgba(11,29,51,0.45) 58%, rgba(11,29,51,0.15) 80%),
    url('../Images/analytics-hero-bg.png');
}

/* Attendance App page — hero background image, readable in both light and dark themes */
.page-header--attendance{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 28%, rgba(255,255,255,0.3) 58%, rgba(255,255,255,0) 80%),
    url('../Images/attendance-hero-bg.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
[data-theme="dark"] .page-header--attendance{
  background-image:
    linear-gradient(90deg, rgba(11,29,51,0.97) 0%, rgba(11,29,51,0.85) 28%, rgba(11,29,51,0.45) 58%, rgba(11,29,51,0.15) 80%),
    url('../Images/attendance-hero-bg.jpg');
}

/* Clinic Licensing & Compliance page — hero background image, readable in both light and dark themes */
.page-header--clinic-licensing{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 28%, rgba(255,255,255,0.3) 58%, rgba(255,255,255,0) 80%),
    url('../Images/clinic-licensing-hero-bg.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
[data-theme="dark"] .page-header--clinic-licensing{
  background-image:
    linear-gradient(90deg, rgba(11,29,51,0.97) 0%, rgba(11,29,51,0.85) 28%, rgba(11,29,51,0.45) 58%, rgba(11,29,51,0.15) 80%),
    url('../Images/clinic-licensing-hero-bg.jpg');
}

/* Government Liaison & Public Health Programs page — hero background image, readable in both light and dark themes */
.page-header--government-liaison{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 28%, rgba(255,255,255,0.3) 58%, rgba(255,255,255,0) 80%),
    url('../Images/government-liaison-hero-bg.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
[data-theme="dark"] .page-header--government-liaison{
  background-image:
    linear-gradient(90deg, rgba(11,29,51,0.97) 0%, rgba(11,29,51,0.85) 28%, rgba(11,29,51,0.45) 58%, rgba(11,29,51,0.15) 80%),
    url('../Images/government-liaison-hero-bg.jpg');
}

/* Health Consulting page — hero background image, readable in both light and dark themes */
.page-header--health-consulting{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 28%, rgba(255,255,255,0.3) 58%, rgba(255,255,255,0) 80%),
    url('../Images/health-consulting-hero-bg.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
[data-theme="dark"] .page-header--health-consulting{
  background-image:
    linear-gradient(90deg, rgba(11,29,51,0.97) 0%, rgba(11,29,51,0.85) 28%, rgba(11,29,51,0.45) 58%, rgba(11,29,51,0.15) 80%),
    url('../Images/health-consulting-hero-bg.jpg');
}

/* Software Solutions (Detailed Product Report) page — hero background image, readable in both light and dark themes */
.page-header--software-solutions{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 28%, rgba(255,255,255,0.3) 58%, rgba(255,255,255,0) 80%),
    url('../Images/software-solutions-hero-bg.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
[data-theme="dark"] .page-header--software-solutions{
  background-image:
    linear-gradient(90deg, rgba(11,29,51,0.97) 0%, rgba(11,29,51,0.85) 28%, rgba(11,29,51,0.45) 58%, rgba(11,29,51,0.15) 80%),
    url('../Images/software-solutions-hero-bg.jpg');
}
.page-header .eyebrow{margin-bottom:16px;}
.page-header h1{font-size:clamp(2rem, 4vw, 3rem); max-width:760px;}
.page-header p{color:var(--ink-dim); max-width:620px; font-size:1.05rem;}

/* ============ CONTACT HERO — centered title over the globe image ============ */
.page-header-contact{
  position:relative;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}
/* light mode: soft white wash keeps the title legible over the artwork */
.page-header-contact::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,0.55);
  z-index:1;
}
/* dark mode: a navy wash (matching the theme's own dark background) instead of
   white, so the globe glows through instead of getting washed out by a bright
   patch that clashes with the rest of the dark page */
[data-theme="dark"] .page-header-contact::before{
  background:linear-gradient(180deg, rgba(11,29,51,0.55), rgba(11,29,51,0.72));
}
.page-header-contact .container-mhn{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
}
.contact-hero-inner{
  width:100%;
  text-align:center;
}
.contact-hero-title{
  width:100%;
  margin:0 auto; /* .page-header h1 sets max-width:760px — without this the title
                    box itself sits flush left instead of centering as a block */
  font-size:clamp(2.2rem, 4.5vw, 3.2rem);
  color:var(--ink); /* theme-aware now, so it stays readable against either wash */
}
@media (max-width:767px){
  .page-header-contact{min-height:260px;}
}

/* bold, high-impact hero heading treatment — Careers & Products */
.careers-hero h1,
.products-hero-content h1{
  font-weight:700;
  font-size:clamp(2.2rem, 4.6vw, 3.4rem);
  letter-spacing:-0.015em;
}

/* ============ BREADCRUMBS (dark rounded bar, site-wide) ============ */
.mhn-crumbs-bar{
  padding:20px 0 0;
}
.mhn-crumbs{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(11,29,51,0.55);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(234,243,252,0.12);
  border-radius:999px;
  padding:10px 20px;
  font-family:var(--font-mono);
  font-size:0.8rem;
  box-shadow:0 14px 30px -18px rgba(11,29,51,0.3);
}
.mhn-crumbs .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--brand-green);
  box-shadow:0 0 0 3px rgba(0,128,0,0.28);
  flex-shrink:0;
}
.mhn-crumbs .crumb{
  color:rgba(234,243,252,0.55);
  text-decoration:none;
  transition:color .2s ease;
}
a.mhn-crumbs-link, .mhn-crumbs a.crumb{color:rgba(234,243,252,0.55);}
.mhn-crumbs a.crumb:hover{color:#EAF3FC;}
.mhn-crumbs .sep{color:rgba(234,243,252,0.28); margin:0 1px; font-size:0.75rem;}
.mhn-crumbs .crumb.is-active{color:#EAF3FC; font-weight:600;}
@media (max-width:576px){
  .mhn-crumbs{max-width:100%; overflow-x:auto; white-space:nowrap;}
}

/* ============ PRODUCTS HERO — full-bleed background photo ============ */
.products-hero{
  position:relative;
  overflow:hidden;
  min-height:520px;
  display:flex;
  align-items:center;
  padding:200px 0 90px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* light mode: soft white wash keeps the heading/copy legible over the photo
   while still letting the artwork read through */
.products-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.62) 38%, rgba(255,255,255,0.22) 62%, rgba(255,255,255,0.08) 100%);
  z-index:1;
}
/* dark mode: navy wash (matching the theme's own background) instead of white,
   so the photo still glows through without a bright patch that clashes with
   the rest of the dark page */
[data-theme="dark"] .products-hero::before{
  background:linear-gradient(100deg, rgba(11,29,51,0.92) 0%, rgba(11,29,51,0.74) 38%, rgba(11,29,51,0.42) 62%, rgba(11,29,51,0.22) 100%);
}
.products-hero .container-mhn{position:relative; z-index:2;}
.products-hero-content{position:relative; z-index:2; max-width:600px;}
.products-hero-content .eyebrow{color:var(--brand-green);}
.products-hero-content .eyebrow::before{background:var(--brand-green); box-shadow:0 0 0 4px var(--brand-green-dim);}

@media (max-width:767px){
  .products-hero{min-height:auto; padding:170px 0 40px;}
  .products-hero::before{background:rgba(255,255,255,0.82);}
  [data-theme="dark"] .products-hero::before{background:rgba(11,29,51,0.88);}
}

/* ============ SERVICES HERO — full-bleed photo collage background ============ */
.services-hero{
  position:relative;
  overflow:hidden;
  min-height:620px;
  display:flex;
  align-items:center;
  padding:190px 0 100px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* light mode: soft white wash keeps the heading/copy legible over the artwork
   while still letting the photo read through */
.services-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.62) 38%, rgba(255,255,255,0.22) 62%, rgba(255,255,255,0.08) 100%);
  z-index:1;
}
/* dark mode: navy wash (matching the theme's own background) instead of white,
   so the collage still glows through without a bright patch that clashes with
   the rest of the dark page */
[data-theme="dark"] .services-hero::before{
  background:linear-gradient(100deg, rgba(11,29,51,0.92) 0%, rgba(11,29,51,0.74) 38%, rgba(11,29,51,0.42) 62%, rgba(11,29,51,0.22) 100%);
}
.services-hero .container-mhn{position:relative; z-index:2;}
.services-hero-row{display:flex; align-items:center; gap:32px; flex-wrap:wrap;}
.services-hero-content{position:relative; z-index:2; flex:1 1 420px; max-width:560px;}

@media (max-width:991px){
  .services-hero-row{flex-direction:column;}
}
@media (max-width:767px){
  .services-hero{min-height:auto; padding:170px 0 60px;}
  .services-hero::before{background:rgba(255,255,255,0.82);}
  [data-theme="dark"] .services-hero::before{background:rgba(11,29,51,0.88);}
}

/* ============ ABOUT HERO — full-bleed background photo, text left ============ */
.about-hero{
  position:relative;
  overflow:hidden;
  min-height:440px;
  display:flex;
  align-items:center;
  padding:150px 0 60px; /* shorter than the default .page-header padding — no
                            graphic underneath any more, so the section can sit lower */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* light mode: soft white wash keeps the heading/copy legible over the photo
   while still letting the artwork read through */
.about-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.62) 38%, rgba(255,255,255,0.22) 62%, rgba(255,255,255,0.08) 100%);
  z-index:1;
}
/* dark mode: navy wash (matching the theme's own background) instead of white,
   so the photo still glows through without a bright patch that clashes with
   the rest of the dark page */
[data-theme="dark"] .about-hero::before{
  background:linear-gradient(100deg, rgba(11,29,51,0.92) 0%, rgba(11,29,51,0.74) 38%, rgba(11,29,51,0.42) 62%, rgba(11,29,51,0.22) 100%);
}
.about-hero .container-mhn{position:relative; z-index:2;}
.about-hero-content{max-width:560px;}
.ahc-eyebrow{
  display:block;
  text-align:left;
  font-family:var(--font-mono);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--pulse);
  margin-bottom:18px;
}
.ahc-title{
  text-align:left;
  max-width:560px;
  margin:0 0 32px;
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(2rem, 4.4vw, 3.1rem);
  line-height:1.22;
  letter-spacing:-0.01em;
  color:var(--ink);
}

@media (max-width:767px){
  .about-hero{min-height:auto; padding:150px 0 44px;}
  .about-hero::before{background:rgba(255,255,255,0.82);}
  [data-theme="dark"] .about-hero::before{background:rgba(11,29,51,0.88);}
  .ahc-title{margin-bottom:24px;}
}

/* ============ REVEAL ANIMATION ============ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:0.08s;}
.reveal-delay-2{transition-delay:0.16s;}
.reveal-delay-3{transition-delay:0.24s;}
.reveal-delay-4{transition-delay:0.32s;}

/* ============ PROCESS STEPS (services page) ============ */
.process-step{
  display:flex; gap:22px;
  padding:28px 0;
  border-top:1px solid var(--line);
}
.process-step:last-child{border-bottom:1px solid var(--line);}
.process-step .idx{
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--pulse);
  width:38px; flex-shrink:0;
  padding-top:4px;
}
.process-step h4{font-size:1.05rem; margin-bottom:6px;}
.process-step p{color:var(--ink-dim); margin:0; max-width:560px;}

/* ============ TEAM ============ */
.team-card{text-align:left;}
.team-photo{
  aspect-ratio:1/1;
  border-radius:var(--radius-m);
  background:linear-gradient(160deg, var(--card), var(--bg-2));
  border:1px solid var(--line);
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.team-photo .initials{
  font-family:var(--font-display);
  font-size:2.6rem;
  color:var(--ink-faint);
}
.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.team-card h4{margin-bottom:2px; font-size:1.02rem;}
.team-card .role{color:var(--pulse); font-family:var(--font-mono); font-size:0.78rem;}
.team-card .bio{color:var(--ink-dim); font-size:0.88rem; margin-top:10px;}

/* ============ TIMELINE (about) ============ */
.timeline{position:relative; padding-left:34px;}
.timeline::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line-strong);}
.timeline-item{position:relative; padding-bottom:36px;}
.timeline-item::before{
  content:""; position:absolute; left:-34px; top:4px;
  width:14px; height:14px; border-radius:50%;
  background:var(--bg-1); border:2px solid var(--brand-green);
}
.timeline-item .yr{font-family:var(--font-mono); color:var(--brand-green); font-size:0.85rem;}
.timeline-item h4{margin:6px 0 6px;}
.timeline-item p{color:var(--ink-dim); margin:0;}

/* ============ VALUES ============ */
.value-card{padding:26px 0; border-top:1px solid var(--line);}
.value-card:last-child{border-bottom:1px solid var(--line);}
.value-card .icon{color:var(--brand-green); font-size:1.4rem; margin-bottom:14px;}

/* ============ PRODUCT DETAIL SECTIONS ============ */
.product-block{padding:80px 0; border-top:1px solid var(--line);}
.product-block:nth-child(even){background:var(--bg-2);}
.feature-list{list-style:none; padding:0; margin:22px 0 28px; display:flex; flex-direction:column; gap:12px;}
.feature-list li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-dim); font-size:0.95rem;}
.feature-list i{color:var(--brand-green); margin-top:3px;}
.tag-pill{
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-faint); border:1px solid var(--line-strong); border-radius:999px; padding:5px 12px; margin-right:8px;
}
.product-block .tag-pill{color:var(--brand-green); border-color:rgba(0,128,0,0.35);}
.product-block .btn-pulse{background:var(--brand-green);}
.product-block .btn-pulse:hover{box-shadow:0 10px 24px -8px rgba(0,128,0,0.45);}
#custom-it .feature-list i, #analytics .feature-list i{color:var(--brand-green);}
.btn-cta-green{background:var(--brand-green);}
.btn-cta-green:hover{box-shadow:0 10px 24px -8px rgba(0,128,0,0.45);}

/* ============ JOB LISTING (careers) ============ */
.job-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;}
.filter-chip{
  font-family:var(--font-mono); font-size:0.8rem;
  border:1px solid var(--line-strong); border-radius:999px;
  padding:8px 16px; cursor:pointer; color:var(--ink-dim);
  transition:all .25s ease;
  background:none;
}
.filter-chip.active, .filter-chip:hover{border-color:var(--brand-green); color:var(--brand-green); background:var(--brand-green-dim);}
.job-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 26px; border:1px solid var(--line); border-radius:var(--radius-m);
  margin-bottom:14px; transition:border-color .25s ease, transform .25s ease;
  flex-wrap:wrap; gap:14px;
  background:var(--card);
}
.job-row:hover{border-color:var(--brand-green-dim); transform:translateX(4px);}
.job-row h4{margin:0 0 6px; font-size:1.02rem;}
.job-row .meta{color:var(--ink-faint); font-family:var(--font-mono); font-size:0.78rem; display:flex; gap:14px; flex-wrap:wrap;}
.job-row .bi-arrow-right{color:var(--brand-green) !important;}

/* icons made green on Careers (Culture + What you get) and Services (All Services) */
#culture .card .icon, #why .card .icon, #all-services .card .icon{color:var(--brand-green);}

/* ============ CONTACT ============ */
/* keep this section on the same plain page background as the rest of
   the site (matching the hero above it) — no extra colored band here.
   overflow:hidden keeps the decor glow fully contained, so it can
   never push the page wider than the viewport. */
.contact-section{
  overflow:hidden;
}
/* Contact background: the same glass background as the Careers login / sign up
   pages — soft blurred colour glows + glass reflections behind the card.
   (Colours are variables so light and dark each get their own tuning.) */
.contact-bg-decor{
  --cg-bg-1:#D2E4F7;
  --cg-bg-2:#CDEADB;
  --cg-glow-1:rgba(47,120,200,0.20);
  --cg-glow-2:rgba(0,166,81,0.16);
  --cg-glow-3:rgba(255,255,255,0.35);
  --cg-blur:40px;
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:linear-gradient(135deg, var(--cg-bg-1), var(--cg-bg-2));
}
[data-theme="dark"] .contact-bg-decor{
  --cg-bg-1:#0B1D33;
  --cg-bg-2:#0C2A3A;
  --cg-glow-1:rgba(63,143,224,0.30);
  --cg-glow-2:rgba(18,181,101,0.22);
  --cg-glow-3:rgba(255,255,255,0.08);
  --cg-blur:0px;
}
/* soft colour glows */
.contact-bg-decor::before{
  content:"";
  position:absolute;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background:
    radial-gradient(circle at 20% 80%, var(--cg-glow-1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--cg-glow-2) 0%, transparent 50%),
    radial-gradient(circle at 45% 45%, var(--cg-glow-3) 0%, transparent 40%);
  filter:blur(var(--cg-blur));
  animation:contactGlassPulse 15s ease-in-out infinite;
}
/* glass reflections */
.contact-bg-decor::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,
      transparent 27.7%, rgba(255,255,255,0.95) 28%, transparent 28.4%,
      transparent 59.7%, rgba(255,255,255,0.9) 60%, transparent 60.4%,
      transparent 89.7%, rgba(255,255,255,0.85) 90%, transparent 90.4%),
    linear-gradient(115deg,
      transparent 0%, transparent 16%,
      rgba(255,255,255,0.80) 28%, rgba(255,255,255,0.22) 35%, transparent 41%,
      transparent 50%,
      rgba(255,255,255,0.70) 60%, rgba(255,255,255,0.18) 67%, transparent 73%,
      transparent 82%,
      rgba(255,255,255,0.55) 90%, transparent 97%),
    linear-gradient(180deg, rgba(255,255,255,0.50) 0%, transparent 42%);
}
[data-theme="dark"] .contact-bg-decor::after{
  background:
    linear-gradient(115deg,
      transparent 0%, transparent 22%,
      rgba(255,255,255,0.07) 32%, transparent 42%,
      transparent 56%,
      rgba(255,255,255,0.07) 64%, transparent 72%,
      transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 35%);
}
@keyframes contactGlassPulse{
  0%,100%{transform:scale(1) rotate(0deg);}
  50%{transform:scale(1.1) rotate(5deg);}
}
@media (prefers-reduced-motion:reduce){
  .contact-bg-decor::before{animation:none;}
}

/* the contact card itself: a real glass pane over the soft wash —
   see-through so the color behind it reads gently, while staying
   raised & 3D */
.contact-glass-card{
  position:relative;
  z-index:1;
  padding:52px 48px;
  border-radius:var(--radius-l);
  background:linear-gradient(160deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 100%);
  backdrop-filter:blur(10px) saturate(110%);
  -webkit-backdrop-filter:blur(10px) saturate(110%);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 30px 58px -26px rgba(23,58,94,0.22),
    0 10px 22px -14px rgba(23,58,94,0.14),
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(23,58,94,0.05);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, background .4s ease;
}
.contact-glass-card::before{
  content:"";
  position:absolute;
  top:0; left:32px; right:32px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}
.contact-glass-card:hover{
  transform:translateY(-5px);
  box-shadow:
    0 38px 68px -26px rgba(23,58,94,0.26),
    0 12px 26px -14px rgba(23,58,94,0.16),
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(23,58,94,0.06);
}
[data-theme="dark"] .contact-glass-card{
  background:linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 30px 58px -26px rgba(0,0,0,0.5),
    0 10px 22px -14px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}
[data-theme="dark"] .contact-glass-card::before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}
[data-theme="dark"] .contact-glass-card:hover{
  box-shadow:
    0 38px 68px -26px rgba(0,0,0,0.58),
    0 12px 26px -14px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.3);
}
@media (max-width:767px){
  .contact-glass-card{padding:34px 24px;}
}

.contact-form .form-control{
  background:linear-gradient(145deg, rgba(0,128,0,0.09), rgba(0,166,81,0.04));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(0,128,0,0.38);
  color:var(--ink);
  border-radius:var(--radius-s);
  padding:13px 16px;
  font-family:var(--font-body);
  box-shadow:
    0 8px 20px -10px rgba(0,128,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -3px 6px rgba(0,128,0,0.10);
  transition:box-shadow .25s ease, border-color .25s ease, transform .15s ease, background .25s ease;
}
.contact-form .form-control:hover{
  border-color:rgba(0,128,0,0.55);
  box-shadow:
    0 10px 24px -10px rgba(0,128,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -3px 6px rgba(0,128,0,0.12);
}
.contact-form .form-control:focus{
  background:linear-gradient(145deg, rgba(0,128,0,0.13), rgba(0,166,81,0.06));
  color:var(--ink);
  border-color:var(--brand-green);
  transform:translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(0,128,0,0.18),
    0 12px 28px -10px rgba(0,128,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -3px 6px rgba(0,128,0,0.14);
}
.contact-form label{font-family:var(--font-mono); font-size:0.95rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink); margin-bottom:8px;}
.contact-form label .req{color:var(--coral); font-weight:700;}
.contact-info-item{display:flex; align-items:center; gap:16px; padding:20px 0; border-top:1px solid var(--line);}
.contact-info-item:last-child{border-bottom:1px solid var(--line);}
.contact-info-item .ic{
  color:#FFFFFF;
  font-size:1.15rem;
  width:44px; height:44px; min-width:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(150deg, #00C853 0%, #008000 55%, #045c26 100%);
  box-shadow:
    0 8px 16px -6px rgba(0,128,0,0.55),
    inset 0 2px 3px rgba(255,255,255,0.4),
    inset 0 -3px 5px rgba(0,0,0,0.28);
}
.map-frame{
  border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/10; background:var(--bg-2); position:relative;
}
.map-frame-iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.map-frame-link{
  position:absolute; bottom:12px; left:12px;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); color:var(--coral); font-size:0.8rem; font-weight:600;
  background:var(--bg-0); padding:6px 14px; border-radius:999px; border:1px solid var(--coral);
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.map-frame-link:hover{
  background:var(--coral); color:var(--on-accent, #fff);
}

/* generic utility */
.text-dim{color:var(--ink-dim);}
.mt-btn-row{display:flex; gap:16px; flex-wrap:wrap;}
.section-cta{text-align:center; padding:100px 0;}
.section-cta h2{font-size:clamp(1.8rem,4vw,2.6rem); max-width:640px; margin:0 auto 16px;}
.section-cta p{color:var(--ink-dim); max-width:520px; margin:0 auto 30px;}
/* ============ CAREERS HERO — home-page background + team/network graphic scene ============ */
.careers-hero{
  position:relative;
  overflow:hidden;
  padding:150px 0 40px;
  background:
    linear-gradient(180deg, rgba(11,29,51,0.24), rgba(11,29,51,0.14) 45%, rgba(11,29,51,0.24)),
    radial-gradient(ellipse 900px 500px at 78% 12%, rgba(47,120,200,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 90%, rgba(23,58,94,0.06), transparent 60%),
    var(--bg-0);
  border-bottom:none;
}
[data-theme="dark"] .careers-hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.16) 45%, rgba(0,0,0,0.30)),
    radial-gradient(ellipse 900px 500px at 78% 12%, rgba(47,120,200,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 90%, rgba(23,58,94,0.06), transparent 60%),
    var(--bg-0);
}
.careers-hero .container-mhn{position:relative; z-index:2;}
.ch-text{max-width:700px;}

/* quick-fact chips under the hero copy */
.ch-highlights{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px;}
.ch-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  background:var(--card); border:1px solid var(--line);
  font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-dim);
  box-shadow:0 14px 26px -18px rgba(23,58,94,0.4);
}
.ch-chip i{color:var(--pulse); font-size:0.85rem;}

/* soft blue wave band, sitting quietly behind the graphic scene */
.ch-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.ch-wave{position:absolute; inset:0; width:100%; height:100%;}
.ch-wave-blue{fill:var(--pulse); opacity:.07;}
.ch-glow{
  position:absolute; right:-6%; top:6%; width:640px; height:640px; max-width:60vw;
  background:radial-gradient(circle, rgba(47,120,200,0.16), transparent 68%);
  filter:blur(4px);
}

/* graphic scene: dashboard cards + team on the left, clinic network + group on the right */
.ch-scene{
  position:relative; z-index:1;
  max-width:1360px; margin:32px auto 0;
  padding:0 5vw;
}
.ch-stage{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; flex-wrap:wrap;
  perspective:1600px;
  animation:chStageTilt 10s ease-in-out infinite;
}
@keyframes chStageTilt{
  0%,100%{transform:rotateX(3deg) rotateY(-2deg);}
  50%{transform:rotateX(1deg) rotateY(2deg);}
}
.ch-cluster-left{display:flex; align-items:flex-end; gap:20px; flex:1 1 460px;}
.ch-cluster-right{display:flex; flex-direction:column; align-items:flex-end; gap:14px; flex:1 1 340px;}

.ch-cards{position:relative; width:195px; height:195px; flex-shrink:0; transform-style:preserve-3d;}
.ch-card{
  position:absolute;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:14px;
  box-shadow:0 30px 50px -24px rgba(23,58,94,0.35);
  transform-style:preserve-3d;
}
.ch-card::before{
  content:""; position:absolute; top:0; left:14px; right:14px; height:3px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, var(--pulse), var(--brand-green));
  opacity:.8;
}
.ch-card-title{
  display:block; font-family:var(--font-mono); font-size:0.6rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-faint); margin-bottom:10px;
}
.ch-card-1{
  top:0; left:0; width:110px; height:119px; opacity:.9;
  animation:chCard1Float 6.5s ease-in-out infinite;
}
@keyframes chCard1Float{
  0%,100%{transform:rotate(-4deg) perspective(900px) rotateY(-9deg) rotateX(4deg) translateZ(10px) translateY(0);}
  50%{transform:rotate(-4deg) perspective(900px) rotateY(-9deg) rotateX(4deg) translateZ(10px) translateY(-9px);}
}
.ch-card-line{display:block; height:6px; border-radius:3px; background:var(--line-strong); margin-bottom:8px;}
.ch-card-line.short{width:60%;}
.ch-card-2{
  top:26px; left:41px; width:127px; height:145px; z-index:1;
  animation:chCard2Float 7.5s ease-in-out infinite; animation-delay:.35s;
}
@keyframes chCard2Float{
  0%,100%{transform:rotate(-1deg) perspective(900px) rotateY(8deg) rotateX(-3deg) translateZ(34px) translateY(0);}
  50%{transform:rotate(-1deg) perspective(900px) rotateY(8deg) rotateX(-3deg) translateZ(34px) translateY(-11px);}
}
.ch-card-3{
  top:82px; left:88px; width:107px; height:111px; z-index:2;
  animation:chCard3Float 6.9s ease-in-out infinite; animation-delay:.7s;
}
@keyframes chCard3Float{
  0%,100%{transform:rotate(2deg) perspective(900px) rotateY(-6deg) rotateX(5deg) translateZ(58px) translateY(0);}
  50%{transform:rotate(2deg) perspective(900px) rotateY(-6deg) rotateX(5deg) translateZ(58px) translateY(-8px);}
}

.ch-network{width:100%; height:auto; overflow:visible;}
.ch-network line{
  stroke:var(--line-strong); stroke-width:1.4;
  stroke-dasharray:220; stroke-dashoffset:220;
  animation:chLineDraw 1.3s ease forwards;
}
.ch-network line:nth-child(2){animation-delay:.15s;}
.ch-network line:nth-child(3){animation-delay:.3s;}
.ch-network line:nth-child(4){animation-delay:.45s;}
@keyframes chLineDraw{to{stroke-dashoffset:0;}}
.ch-network circle{
  fill:var(--pulse); transform-box:fill-box; transform-origin:center;
  animation:chDotPulse 3.2s ease-in-out infinite;
}
.ch-network circle:nth-child(6){animation-delay:.4s;}
.ch-network circle:nth-child(7){animation-delay:.8s;}
.ch-network circle:nth-child(8){animation-delay:1.2s;}
.ch-network circle:nth-child(9){animation-delay:1.6s;}
@keyframes chDotPulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.35);}}

.ch-bars{width:100%; height:44px; overflow:visible;}
.ch-bars rect{
  fill:var(--brand-green); transform-box:fill-box; transform-origin:bottom;
  animation:chBarGrow .7s cubic-bezier(.2,.8,.2,1) both, chBarBounce 3.4s ease-in-out 1s infinite;
}
.ch-bars rect:nth-child(even){fill:var(--pulse);}
.ch-bars rect:nth-child(1){animation-delay:0s, 1.1s;}
.ch-bars rect:nth-child(2){animation-delay:.08s, 1.2s;}
.ch-bars rect:nth-child(3){animation-delay:.16s, 1.3s;}
.ch-bars rect:nth-child(4){animation-delay:.24s, 1.4s;}
.ch-bars rect:nth-child(5){animation-delay:.32s, 1.5s;}
.ch-bars rect:nth-child(6){animation-delay:.4s, 1.6s;}
@keyframes chBarGrow{from{transform:scaleY(0);} to{transform:scaleY(1);}}
@keyframes chBarBounce{0%,100%{transform:scaleY(1);} 50%{transform:scaleY(1.08);}}

/* team avatars — glossy 3D bubbles, overlapping like a stacked group */
.ch-people{display:flex; align-items:center; margin-left:6px;}
.ch-people-group{gap:0;}
.ch-person{display:flex; flex-direction:column; align-items:center;}
.ch-people .ch-person + .ch-person{margin-left:-12px;}
.ch-person-avatar{
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--pulse) 55%, #fff), var(--pulse) 70%);
  color:#fff;
  border:2px solid var(--bg-0);
  box-shadow:0 14px 22px -10px rgba(23,58,94,0.5), inset 0 1px 1px rgba(255,255,255,0.5);
  animation:chAvatarBob 5.5s ease-in-out infinite;
}
.ch-avatar-green{background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--brand-green) 55%, #fff), var(--brand-green) 70%);}
.ch-person-lg .ch-person-avatar{width:52px; height:52px; font-size:1.3rem;}
.ch-person-sm .ch-person-avatar{width:34px; height:34px; font-size:0.9rem;}
.ch-people .ch-person:nth-child(1) .ch-person-avatar{animation-delay:0s;}
.ch-people .ch-person:nth-child(2) .ch-person-avatar{animation-delay:.6s;}
.ch-people .ch-person:nth-child(3) .ch-person-avatar{animation-delay:1.2s;}
.ch-people .ch-person:nth-child(4) .ch-person-avatar{animation-delay:1.8s;}
.ch-people .ch-person:nth-child(5) .ch-person-avatar{animation-delay:2.4s;}
@keyframes chAvatarBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}

.ch-card-mini{
  position:relative; width:150px; padding:12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:0 26px 44px -22px rgba(23,58,94,0.32);
  transform-style:preserve-3d;
  animation:chCardMiniFloat 7.2s ease-in-out infinite;
}
@keyframes chCardMiniFloat{
  0%,100%{transform:rotate(-2deg) perspective(900px) rotateY(9deg) rotateX(-4deg) translateY(0);}
  50%{transform:rotate(-2deg) perspective(900px) rotateY(9deg) rotateX(-4deg) translateY(-10px);}
}
.ch-card-mini .ch-network circle{fill:var(--brand-green);}

/* small floating "we're hiring" badge for extra polish */
.ch-float-badge{
  position:absolute; z-index:2; left:50%; top:-6px;
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-dim);
  box-shadow:0 18px 30px -16px rgba(23,58,94,0.35);
  animation:chBadgeFloat 6s ease-in-out infinite;
  white-space:nowrap;
}
.ch-float-badge i{color:var(--brand-green); font-size:0.85rem;}
@keyframes chBadgeFloat{0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-7px);}}

@media (max-width:991px){
  .ch-scene{margin-top:40px; gap:28px;}
  .ch-stage{gap:28px;}
  .ch-cluster-left, .ch-cluster-right{flex:1 1 100%; justify-content:center;}
  .ch-cluster-right{align-items:center;}
  .ch-float-badge{display:none;}
}
@media (max-width:767px){
  .careers-hero{padding:150px 0 40px;}
  .ch-stage{flex-direction:column; align-items:center; padding:0 6vw;}
  .ch-cards{width:170px; height:170px; transform:scale(0.9);}
  .ch-card-mini{width:135px;}
}

/* ============ PRODUCT IMAGE (Products page) ============ */
.product-image{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:6px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.6);
  overflow:hidden;
}
.product-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:10 / 7;
  object-fit:cover;
  border-radius:calc(var(--radius-l) - 6px);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.product-image:hover img{transform:scale(1.03);}