/* ZettaCardia AI — Rural & Federally Qualified Health Center homepage prototype
   Static HTML/CSS mockup. Not wired to WordPress/Elementor. */

/* Breakpoint scale for new rules going forward: xs:480 sm:640 md:768 lg:1024 xl:1041(nav)
   Existing ad hoc breakpoints on untouched pages are left alone. */

:root{
  --ink:#1F2937;
  --ink-soft:#4B5563;
  --ink-faint:#94A3B8;
  --paper:#F8FCFF;
  --paper-raised:#FFFFFF;
  --section-blue:#F1F8FF;
  --section-mint:#EEF9F5;
  --hero-bg:#EAF6FF;
  --hero-bg-2:#F5FAF8;
  --hero-ink:#1F2937;
  --hero-ink-soft:#4B5563;
  --line:#E5E7EB;
  --accent:#0A6ED1;
  --accent-ink:#FFFFFF;
  --accent-soft:#E5F1FC;
  --teal:#0E8F6A;
  --teal-soft:#E1F5EC;
  --success:#22C55E;
  --shadow:0 0.0625rem 0.125rem rgba(15,23,42,0.05), 0 0.625rem 1.5rem rgba(15,23,42,0.06);
  --radius-lg:1.25rem;
  --radius-md:1rem;
  --radius-xl:1.5rem;
  --photo-a:#0A6ED1;
  --photo-b:#0E8F6A;

  --cyan:#38BDF8;
  --cyan-soft:#E3F6FE;
  --grad-primary:linear-gradient(135deg, var(--accent), var(--cyan));
  --grad-dark:linear-gradient(160deg, var(--hero-bg), var(--hero-bg-2));
  --glass-bg:color-mix(in srgb, var(--paper-raised) 88%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--paper-raised) 94%, transparent);
  --glass-border:var(--line);
  --glass-blur:0.625rem;
  --shadow-glow:0 0.5rem 1.5rem color-mix(in srgb, var(--accent) 16%, transparent);
  --shadow-lg:0 1.25rem 3rem rgba(15,23,42,0.10);

  /* Logo scales fluidly across the full viewport range (phone to large desktop);
     hero h1 tracks 0.72x this value (clamped 22-34px) so long headlines wrap
     to 2-3 lines inside the narrow .slide-text column instead of overflowing. */
  --logo-h:clamp(1.5rem, 2.2vw + 0.875rem, 3rem);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#1F2937; --ink-soft:#4B5563; --ink-faint:#94A3B8;
    --paper:#F8FCFF; --paper-raised:#FFFFFF; --hero-bg:#EAF6FF; --hero-bg-2:#F5FAF8;
    --hero-ink:#1F2937; --hero-ink-soft:#4B5563;
    --line:#E5E7EB; --accent:#0A6ED1; --accent-ink:#FFFFFF; --accent-soft:#E5F1FC;
    --teal:#0E8F6A; --teal-soft:#E1F5EC;
    --shadow:0 0.0625rem 0.125rem rgba(15,23,42,0.05), 0 0.625rem 1.5rem rgba(15,23,42,0.06);
    --cyan:#38BDF8; --cyan-soft:#E3F6FE;
  }
}
:root[data-theme="dark"]{
  --ink:#1F2937; --ink-soft:#4B5563; --ink-faint:#94A3B8;
  --paper:#F8FCFF; --paper-raised:#FFFFFF; --hero-bg:#EAF6FF; --hero-bg-2:#F5FAF8;
  --hero-ink:#1F2937; --hero-ink-soft:#4B5563;
  --line:#E5E7EB; --accent:#0A6ED1; --accent-ink:#FFFFFF; --accent-soft:#E5F1FC;
  --teal:#0E8F6A; --teal-soft:#E1F5EC;
  --shadow:0 0.0625rem 0.125rem rgba(15,23,42,0.05), 0 0.625rem 1.5rem rgba(15,23,42,0.06);
  --cyan:#38BDF8; --cyan-soft:#E3F6FE;
}
:root[data-theme="light"]{
  --ink:#1F2937; --ink-soft:#4B5563; --ink-faint:#94A3B8;
  --paper:#F8FCFF; --paper-raised:#FFFFFF; --hero-bg:#EAF6FF; --hero-bg-2:#F5FAF8;
  --hero-ink:#1F2937; --hero-ink-soft:#4B5563;
  --line:#E5E7EB; --accent:#0A6ED1; --accent-ink:#FFFFFF; --accent-soft:#E5F1FC;
  --teal:#0E8F6A; --teal-soft:#E1F5EC;
  --shadow:0 0.0625rem 0.125rem rgba(15,23,42,0.05), 0 0.625rem 1.5rem rgba(15,23,42,0.06);
  --cyan:#38BDF8; --cyan-soft:#E3F6FE;
}

*{box-sizing:border-box;}
/* Every size in this stylesheet is in rem, and on desktop (mouse/keyboard) devices the
   root size tracks the viewport width (16px at a 1920px-wide window). The whole page
   therefore scales as one unit: browser zoom (Ctrl +/-) and different screen
   resolutions all give the same view, and the desktop layout is kept at every zoom
   (the tablet/phone breakpoints below only apply to touch devices or tiny windows). */
@media (min-width:1041px){
  html{font-size:clamp(12px, 1.1111vw, 200px);}
}
@media (pointer:fine) and (min-width:401px){
  /* 16px (the original design size) at a 1920px-wide window; scales with the window from there */
  html{font-size:min(0.8333vw, 200px);}
}
html{
  scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--ink-faint) transparent;
}
html::-webkit-scrollbar{width:0.5rem;}
html::-webkit-scrollbar-track{background:transparent;}
html::-webkit-scrollbar-thumb{background:var(--ink-faint);border-radius:62.4375rem;}
html::-webkit-scrollbar-thumb:hover{background:var(--ink-soft);}
/* Back-to-top button (script.js initScrollTop): fades in once the page is scrolled
   near the bottom, so it appears right when the scrollbar reaches down. */
.scroll-top-btn{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:60;
  width:2.75rem;height:2.75rem;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;box-shadow:var(--shadow);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(0.5rem);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.scroll-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0);}
.scroll-top-btn:hover{background:var(--teal);}
.scroll-top-btn > svg{display:block;flex:none;width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem;}
@media (max-width:640px) and (pointer:coarse), (max-width:400px){.scroll-top-btn{right:1rem;bottom:1rem;width:2.5rem;height:2.5rem;}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:600;
  margin:0;
  text-wrap:balance;
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;}
.wrap{max-width:73.75rem;margin:0 auto;padding:0 2rem;}
@media (max-width:640px) and (pointer:coarse), (max-width:400px){.wrap{padding:0 1.25rem;}}

@media (prefers-reduced-motion: no-preference){
  .rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
  .rise-1{animation-delay:.05s;}
  .rise-2{animation-delay:.16s;}
  .rise-3{animation-delay:.27s;}
  @keyframes rise{from{opacity:0;transform:translateY(0.875rem);}to{opacity:1;transform:translateY(0);}}

  /* ================= Scroll reveal (wow.js-style) ================= */
  .reveal{
    opacity:0;transform:translateY(1.75rem);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
  }
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal.reveal-zoom{transform:scale(.92);}
  .reveal.reveal-zoom.in-view{transform:scale(1);}
  .reveal.reveal-blur{filter:blur(0.5rem);}
  .reveal.reveal-blur.in-view{filter:blur(0);}

  /* ================= Hero slide entrance (replays each time a slide activates) ================= */
  @keyframes zoomInSlide{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
  @keyframes slideFromLeft{from{opacity:0;transform:translateX(-4rem);}to{opacity:1;transform:translateX(0);}}
  @keyframes slideFromRight{from{opacity:0;transform:translateX(4rem);}to{opacity:1;transform:translateX(0);}}
  .slide.active .photo-frame{animation:zoomInSlide 1.4s ease both;animation-delay:.25s;}

  /* Card lines slide in alternately: heading from the left, subhead from the
     right, CTAs from the left again - each staggered after the one above it. */
  .slide.active .slide-text > *{
    animation:slideFromLeft .9s cubic-bezier(.22,1,.36,1) both;
  }
  .slide.active .slide-text > *:nth-child(even){animation-name:slideFromRight;}
  .slide.active .slide-text > *:nth-child(1){animation-delay:.15s;}
  .slide.active .slide-text > *:nth-child(2){animation-delay:.30s;}
  .slide.active .slide-text > *:nth-child(3){animation-delay:.45s;}
  .slide.active .slide-text > *:nth-child(4){animation-delay:.60s;}
  .slide.active .slide-text > *:nth-child(5){animation-delay:.75s;}
  .slide.active .slide-text h1:nth-child(1){
    animation:slideFromLeft .9s cubic-bezier(.22,1,.36,1) both;
    animation-delay:.15s;
  }
  .slide.active h1{
    animation:zoomInSlide 1.2s ease both;
    animation-delay:.15s;
  }
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;}
}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:var(--paper-raised);
  border-bottom:0.0625rem solid var(--line);
}
/* Full-screen hero: header floats transparently over the photo until the
   page scrolls, then gains the normal solid bar (see initHeaderScroll in script.js). */
body.home{padding-top:4rem;}
body.home .hero{margin-top:-4rem;}
header.site.on-hero{
  position:fixed;top:0;left:0;right:0;
  background:transparent;
  border-bottom-color:transparent;
  transition:background .3s ease, border-color .3s ease;
}
header.site.on-hero .menu-toggle{border-color:var(--line);background:var(--paper-raised);}
header.site.on-hero .menu-toggle span,
header.site.on-hero .menu-toggle span::before,
header.site.on-hero .menu-toggle span::after{background:var(--ink);}
@media (min-width:1041px), (pointer:fine) and (min-width:401px){
  header.site.on-hero nav.primary li{color:#000000;}
  header.site.on-hero nav.primary li.current{color:#000000;font-weight:700;}
}
header.site.on-hero.scrolled{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border-bottom-color:var(--glass-border);
}
header.site.on-hero.scrolled .menu-toggle{border-color:var(--line);background:var(--paper-raised);}
header.site.on-hero.scrolled .menu-toggle span,
header.site.on-hero.scrolled .menu-toggle span::before,
header.site.on-hero.scrolled .menu-toggle span::after{background:var(--ink);}
header.site.on-hero.scrolled nav.primary li{color:#000000;}
header.site.on-hero.scrolled nav.primary li.current{color:#000000;}
header.site .bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem;
  padding:0.875rem 0;
  position:relative;
}
/* Tablet/phone: keep the logo and menu button off the screen edge. */
@media (max-width:1040px) and (pointer:coarse), (max-width:400px){header.site .bar{padding-left:1.25rem;padding-right:1.25rem;}}
.logo{display:flex;align-items:center;gap:0.6875rem;flex:none;margin-left:0;}
/* Desktop: one offset (it scales with the root size, so the view is the same at every zoom). */
@media (min-width:1041px), (pointer:fine) and (min-width:401px){.logo{margin-left:-4rem;}}
/* Footer logo drops the header's negative margin-left (that pull only makes sense
   next to the header's own nav) so it lines up flush with the columns below it. */
.foot-logo-row .logo{margin-left:0;}
/* The logo PNG has transparent padding baked in before the icon starts, so even at
   margin-left:0 the visible mark sits right of the "Solutions" column edge below it. */
.foot-logo-row .logo img{margin-left:-0.875rem;}
/* On wide monitors the centered 73.75rem .wrap leaves a large empty margin on
   either side, so a small negative shift still reads as "centered" — pull
   further left specifically at large viewports without touching laptop sizing. */
.logo img{height:var(--logo-h);width:auto;display:block;}
footer .logo img{height:calc(var(--logo-h) * 0.8235);}
/* Brand tagline locked up beside the logo mark (header only) */
.logo-tagline{
  padding-left:0.6875rem;
  border-left:0.0625rem solid var(--line);
  font-size:0.75rem;
  line-height:1.25;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--ink-soft);
  max-width:19ch;
}
header.site.on-hero .logo-tagline{
  color:#0A0A0A;
  border-left-color:rgba(0,0,0,.22);
  text-shadow:0 0.0625rem 0.5rem rgba(255,255,255,.6);
}
@media (max-width:1040px) and (pointer:coarse), (max-width:400px){.logo-tagline{display:none;}}
nav.primary{display:flex;align-items:center;gap:1.5rem;}
nav.primary ul{list-style:none;display:flex;gap:1.375rem;margin:0;padding:0;font-size:0.875rem;}
nav.primary li{position:relative;color:#000000;}
nav.primary li.current{color:#000000;font-weight:600;}
@media (min-width:1041px), (pointer:fine) and (min-width:401px){
  /* > scopes this to each li's own top-level link only - otherwise it also matched
     the nested .drop a dropdown items, underlining all of them when li.current does. */
  nav.primary ul li > a{position:relative;display:inline-block;padding-bottom:0.25rem;transition:color .2s ease;}
  nav.primary ul li > a::after{
    content:"";position:absolute;left:0;right:100%;bottom:0;height:max(0.125rem, 1px);border-radius:0.0625rem;
    background:var(--grad-primary);transition:right .25s cubic-bezier(.2,.7,.2,1);
  }
  nav.primary ul li > a:hover::after,
  nav.primary ul li.current > a::after{right:0;}
}
nav.primary li.has-drop:hover .drop{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;}

.menu-toggle{
  display:none;flex:none;align-items:center;justify-content:center;
  width:2.375rem;height:2.375rem;border:0.0625rem solid var(--line);border-radius:0.5625rem;
  background:var(--paper-raised);cursor:pointer;padding:0;
}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
  content:"";display:block;width:1.0625rem;height:0.125rem;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.menu-toggle span{position:relative;}
.menu-toggle span::before{position:absolute;top:-0.375rem;left:0;}
.menu-toggle span::after{position:absolute;top:0.375rem;left:0;}
.menu-toggle[aria-expanded="true"] span{background:transparent;}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(0.375rem) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-0.375rem) rotate(-45deg);}

@media (max-width:1040px) and (pointer:coarse), (max-width:400px){
  .menu-toggle{display:flex;}
  nav.primary{
    display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper-raised);border-bottom:0.0625rem solid var(--line);
    box-shadow:var(--shadow);padding:0;
    max-height:0;opacity:0;overflow:hidden;pointer-events:none;
    transition:max-height .35s cubic-bezier(.2,.7,.2,1), opacity .3s ease, padding .35s ease;
  }
  nav.primary.open{max-height:40rem;opacity:1;pointer-events:auto;padding:0.375rem 0 1rem;}
  nav.primary ul{flex-direction:column;gap:0;width:100%;font-size:0.9375rem;}
  nav.primary ul li{width:100%;}
  nav.primary ul li a{display:block;padding:0.75rem 2rem;}
  nav.primary .has-drop .drop{
    display:block;position:static;box-shadow:none;border:none;background:none;
    margin:0;padding:0 0 0.25rem 1rem;min-width:0;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
  }
  nav.primary .has-drop .drop a{padding:0.5625rem 2rem;font-size:0.8438rem;color:var(--ink-faint);}
  nav.primary .btn.primary{margin:0.875rem 2rem 0;text-align:center;}
}
.drop{
  display:block;position:absolute;top:100%;left:-0.875rem;margin-top:0.625rem;
  background:var(--paper-raised);border:0.0625rem solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow);padding:0.5rem;width:16.25rem;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(0.375rem);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
li.has-drop::after{
  content:"";position:absolute;top:100%;left:0;right:0;height:0.625rem;
}
/* Explicit width:100% so the hover fill always spans the card edge to edge,
   regardless of how many lines a given item's text wraps to. */
.drop a{
  display:block;width:100%;box-sizing:border-box;padding:0.5625rem 0.75rem;border-radius:0.3125rem;
  font-size:0.875rem;font-weight:400;color:color-mix(in srgb, var(--ink-soft) 55%, var(--ink-faint));
}
.drop a:hover{background:var(--accent-soft);color:var(--accent);font-weight:500;}
/* Marks the dropdown item matching the page currently being viewed. */
.drop a.current{color:var(--accent);font-weight:500;}

/* Hero CTA "Explore the CAH & FQHC Solutions" - shows as one normal button;
   hovering (or tapping/focusing, via .open toggled in script.js) swaps it
   for a segmented group button whose two halves link straight to the
   matching PDF in /docs, opened in a new tab where the browser's native PDF
   viewer supplies its own download/print controls. */
.btn-group-hover{position:relative;display:inline-block;}
.btn-group-hover > .btn-group-label{font-family:inherit;line-height:inherit;cursor:pointer;}
.btn-group{display:inline-flex;white-space:nowrap;}
.btn-group .btn{border-radius:0;}
.btn-group .btn:first-child{border-radius:62.4375rem 0 0 62.4375rem;}
.btn-group .btn:last-child{border-radius:0 62.4375rem 62.4375rem 0;margin-left:-0.0625rem;}
.btn-group .btn:hover{position:relative;z-index:1;transform:none;}

/* The group swaps in place of the label (in normal flow, so the neighbouring
   "Schedule a Demo" button moves aside instead of being covered). */
.btn-group-hover .btn-group{display:none;}
@keyframes btnGroupIn{from{opacity:0;}to{opacity:1;}}
/* Hover swap only where a real hover exists; touch devices use the .open tap toggle. */
@media (hover:hover){
  .btn-group-hover:hover .btn-group-label{display:none;}
  .btn-group-hover:hover .btn-group{display:inline-flex;animation:btnGroupIn .2s ease;}
}
.btn-group-hover.open .btn-group-label{display:none;}
.btn-group-hover.open .btn-group{display:inline-flex;animation:btnGroupIn .2s ease;}

/* Phones (same breakpoint as the rest of the site): the two halves may not fit on
   one line, so they wrap as separate pill buttons. */
@media (max-width:640px) and (pointer:coarse), (max-width:400px){
  .btn-group-hover .btn-group{flex-wrap:wrap;gap:0.5rem;}
  .btn-group-hover.open .btn-group{display:flex;}
  .btn-group .btn,.btn-group .btn:first-child,.btn-group .btn:last-child{border-radius:62.4375rem;margin-left:0;}
}
.btn{
  position:relative;overflow:hidden;
  font-size:0.875rem;font-weight:600;padding:0.6875rem 1.375rem;border-radius:62.4375rem;
  display:inline-block;border:0.0625rem solid transparent;
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .2s ease, color .2s ease;
}
.btn::after{
  content:"";position:absolute;top:50%;left:50%;width:0;height:0;margin:0;
  border-radius:62.4375rem;background:rgba(255,255,255,.35);
  transform:translate(-50%,-50%);
}
.btn:active::after{
  width:220%;padding-bottom:220%;opacity:0;
  transition:width .5s ease, padding-bottom .5s ease, opacity .6s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn.primary{background:linear-gradient(135deg, var(--teal), var(--success));color:var(--accent-ink);box-shadow:var(--shadow);}
.btn.primary:hover{box-shadow:0 0.5rem 1.5rem color-mix(in srgb, var(--teal) 22%, transparent);}
.btn.secondary{border-color:var(--line);color:var(--ink);background:var(--paper-raised);}
.btn.secondary:hover{border-color:var(--teal);color:var(--teal);}
/* Looks like .btn.primary by default. On hover: the gradient sweeps left-to-right
   once, and the arrow icon fades/slides up into view once (no looping, no reserved
   empty gap when it's hidden - the icon's own width collapses to 0 until hover). */
.btn.on-dark{
  display:inline-flex;align-items:center;
  border-color:transparent;color:var(--accent-ink);box-shadow:var(--shadow);
  background:linear-gradient(90deg, var(--teal), var(--success), var(--teal));
  background-size:220% 100%;background-position:0% 0;
}
.btn.on-dark:hover{animation:btnGradientShift .9s ease forwards;}
@keyframes btnGradientShift{
  from{background-position:0% 0;}
  to{background-position:100% 0;}
}
.btn-arrow{
  position:relative;width:0;height:0.875rem;margin-left:0;overflow:hidden;flex:none;
  opacity:0;
  transition:opacity .2s ease, width .25s ease, margin-left .25s ease;
}
.btn.on-dark:hover .btn-arrow{opacity:1;width:0.875rem;margin-left:0.5rem;}
.btn-arrow svg{position:absolute;top:0;left:0;width:0.875rem;height:0.875rem;transform:translateY(130%);}
.btn.on-dark:hover .btn-arrow svg{animation:btnArrowUp .5s ease forwards;}
@keyframes btnArrowUp{to{transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .btn.on-dark:hover{animation:none;}
  .btn.on-dark:hover .btn-arrow svg{animation:none;transform:translateY(0);}
}

/* ---------- Hero ---------- */
.hero{
  background:var(--hero-bg-2);
  color:var(--hero-ink);
  position:relative;
  overflow:hidden;
  padding:0;
}
.hero h1{
  font-size:clamp(1.4375rem, calc(var(--logo-h) * 0.74), 2.125rem);
  line-height:1.15;
  color:var(--hero-ink);
}
.hero .subhead{
  margin-top:0.875rem;
  font-size:1.25rem;
  color:#000000;
  max-width:52ch;
  line-height:1.6;
  text-shadow:0 0.0625rem 0.75rem rgba(255,255,255,.6), 0 0.0625rem 0.125rem rgba(255,255,255,.85);
}
.hero .ctas{display:flex;align-items:center;gap:0.75rem;margin-top:1.125rem;flex-wrap:wrap;width:max-content;}
@media (max-width:640px) and (pointer:coarse), (max-width:400px){.hero .ctas{width:auto;}}

/* ---------- Hero slide backgrounds ---------- */
/* padding-top reserves a hard dead-zone under the fixed 4rem header so a long,
   multi-line heading can never grow up into the logo, no matter the viewport height
   or vertical alignment (center vs. bottom) a given slide uses. */
.slide{
  background-size:cover;
  background-position:center;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:6.875rem;
}
.slide.align-bottom{align-items:flex-end;padding-bottom:9vh;}
.slide::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(255,255,255,.80) 0px, rgba(255,255,255,.45) 5rem, rgba(255,255,255,0) 10rem);
}
.slide .wrap{position:relative;z-index:1;width:100%;}
/* Fixed to the width slide 3's ("One Primary Care Visit...") heading needs, so
   every card is identically sized instead of each stretching to its own text. */
.slide-text{
  width:100%;
  max-width:87.5rem;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  background:color-mix(in srgb, var(--paper-raised) 0%, #e7f4ff9c);
  -webkit-backdrop-filter:blur(0.375rem) saturate(140%);
  backdrop-filter:blur(0.75rem) saturate(140%);
  border-radius:var(--radius-lg);
  padding:2.125rem 2.5rem;
  box-shadow:0 1.5rem 3.375rem rgba(15,23,42,.14);
}
.slide-text .subhead{max-width:none;margin-left:0;margin-right:0;}
.slide-text .ctas{justify-content:center;width:max-content;max-width:100%;margin-left:auto;margin-right:auto;}
/* Always a single line; script.js (initHeroHeadlineFit) shrinks the font-size per
   heading/viewport so the longest line still fits the fixed card width above.
   (No overflow:hidden here - combined with the card's backdrop-filter it made
   Chromium/Safari composite the heading's box as its own isolated backdrop
   region, showing up as a lighter rectangle behind just that line.) */
.slide-text h1{white-space:nowrap;max-width:100%;}
@media (min-width:1400px){.slide-text{margin-left:auto;}}
@media (max-width:640px) and (pointer:coarse), (max-width:400px){
  .slide-text{max-width:100%;padding:1.5rem 1.375rem;}
  .slide-text h1{white-space:normal;font-size:clamp(1.25rem,5.4vw,1.625rem);}
}
.slider{position:relative;}
.slider .slider-dots{
  position:absolute;left:50%;bottom:1.375rem;z-index:2;
  transform:translateX(-50%);
  display:flex;gap:0.5625rem;margin-top:0;
  padding:0.625rem 0.875rem;border-radius:62.4375rem;
  /* background:var(--glass-bg-strong); */
  /* -webkit-backdrop-filter:blur(var(--glass-blur)); */
  /* backdrop-filter:blur(var(--glass-blur)); */
  /* box-shadow:var(--shadow); */
}

/* ================= Photo placeholder frame ================= */
.photo-frame{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--photo-a) 88%, transparent), color-mix(in srgb, var(--photo-b) 78%, transparent)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 0.125rem, transparent 0.125rem 1.625rem);
  display:flex;align-items:flex-end;
  box-shadow:0 1.25rem 2.75rem rgba(15,23,42,.14);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.photo-frame:hover{transform:translateY(-0.375rem);box-shadow:0 1.625rem 3.375rem rgba(15,23,42,.18);}
.photo-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.04) 46%, transparent 70%);
}
.photo-frame .cap{
  position:relative;z-index:1;padding:1.125rem 1.25rem;color:#F4F1E9;
  font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  font-size:0.6875rem;letter-spacing:.04em;line-height:1.5;
}
.photo-frame .cap b{
  display:block;font-size:0.625rem;letter-spacing:.09em;text-transform:uppercase;
  color:#9CC7F5;margin-bottom:0.3125rem;
}
.photo-frame.square{aspect-ratio:1/1;}
.photo-frame.wide{aspect-ratio:16/9;}
.photo-frame.tall{aspect-ratio:3/4;}
.photo-frame img,
.photo-frame video{
  width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:0;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.photo-frame:hover img,
.photo-frame:hover video{transform:scale(1.06);}
.photo-frame:has(img),
.photo-frame:has(video){background:var(--hero-bg-2);}
.photo-frame:has(img)::after,
.photo-frame:has(video)::after{display:none;}
.photo-frame.contain{background:var(--paper-raised);}
.photo-frame.contain img{object-fit:contain;padding:0.875rem;}
/* The "wearing" photo in each tech-photo-card's cycle is a real photograph, not a
   product shot on a transparent background - contain+padding let the frame's
   background color show around/behind the person, so it gets object-fit:cover
   (no padding) instead, filling the frame edge to edge like .photo-frame normally does. */
/* Biased toward the chest, not a plain center crop - center crop was framing the
   face and cropping the worn device out of the bottom of the frame. */
.photo-frame.contain img.photo-cover{object-fit:cover;object-position:center 75%;padding:0;}
/* Per-photo nudges on top of the shared 75% crop bias. */
.photo-frame.contain img.photo-cover-lifesignals{object-position:center calc(75% + 0.625rem);}
.photo-frame.contain img.photo-cover-mypatch{object-position:center calc(75% - 1.875rem);}

/* Cross-fading images within one .photo-frame, cycled by initPhotoCycles() in script.js */
.photo-frame .cycle-img{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .6s ease;}
.photo-frame .cycle-img.active{opacity:1;z-index:1;}

/* ================= Split hero / section grid ================= */
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:3.25rem;align-items:center;}
@media (max-width:900px) and (pointer:coarse), (max-width:400px){.hero-grid{grid-template-columns:1fr;gap:2.25rem;}}
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:3rem;align-items:center;}
.split > *{min-width:0;}
.split.reverse{grid-template-columns:1.15fr 1fr;}
.split.reverse .photo-frame{order:2;}
@media (max-width:860px) and (pointer:coarse), (max-width:400px){.split,.split.reverse{grid-template-columns:1fr;}.split.reverse .photo-frame{order:0;}}

/* ---------- Sections generic ---------- */
section{padding:2.1875rem 0;}
.eyebrow{
  font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  margin-bottom:0.75rem;display:block;
}
/* Always a single line; script.js (initSectionTitleFit) shrinks the font-size per
   title/viewport so the longest one still fits its container width. */
.section-title{font-size:clamp(1.5rem,3vw,2rem);max-width:100%;white-space:nowrap;}
.section-lede{margin-top:0.875rem;color:var(--ink-soft);
  /* max-width:56ch; */
  font-size:1rem;}

/* outcomes */
.outcomes{
  position:relative;overflow:hidden;
  background:var(--paper);border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line);
}
.outcomes .wrap{position:relative;z-index:1;}

/* ================= Decorative background utilities ================= */
/* Any section wrapping a .bg-blob automatically becomes its containing box,
   and its .wrap sits above the blob — no per-page inline styles needed. */
section:has(.bg-blob){position:relative;overflow:hidden;}
section:has(.bg-blob) > .wrap{position:relative;z-index:1;}
.bg-blob{
  display:none;
}
.bg-blob-a{width:26.25rem;height:26.25rem;background:var(--grad-primary);top:-8.75rem;left:-6.25rem;}
.bg-blob-b{width:26.25rem;height:26.25rem;background:radial-gradient(circle, var(--cyan), transparent 70%);bottom:-6.25rem;right:-3.75rem;}
.bg-dots{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 0.0625rem, transparent 0.0625rem);
  background-size:1.375rem 1.375rem;
  mask-image:radial-gradient(ellipse at center, black 40%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 40%, transparent 75%);
}
@media (prefers-reduced-motion:no-preference){
  /* Uses the standalone `translate` property (not `transform`) so it composes
     cleanly with the JS mouse-parallax effect below, which sets `transform`
     on the same elements — the two never fight over one property. */
  .bg-blob{animation:blobFloat 14s ease-in-out infinite alternate;}
  .bg-blob-b{animation-delay:-6s;}
  @keyframes blobFloat{from{translate:0 0;}to{translate:1.5rem -1.125rem;}}
}

/* ================= Glassmorphic card modifier ================= */
.glass-card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:0.0625rem solid transparent;
  background-image:
    linear-gradient(var(--glass-bg), var(--glass-bg)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--cyan) 55%, transparent));
  background-origin:border-box;
  background-clip:padding-box, border-box;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-card{background:var(--glass-bg-strong);background-image:none;}
}
.glass-card.glass-card:hover{
  transform:translateY(-0.5rem) scale(1.015);
  box-shadow:var(--shadow-lg), var(--shadow-glow);
}

.tiles{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem;}
.tile{
  position:relative;background:var(--paper-raised);border:0.0625rem solid var(--line);
  border-radius:var(--radius-md);padding:1.625rem 1.5rem;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.tile::before{
  content:"";position:absolute;top:0;left:0;right:0;height:0.25rem;
  background:var(--accent);
}
.tile:nth-child(3n+2)::before{background:var(--teal);}
.tile:nth-child(3n)::before{background:color-mix(in srgb, var(--accent) 55%, var(--teal) 45%);}
.tile-icon{
  width:2.75rem;height:2.75rem;border-radius:0.8125rem;margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--accent) 14%, var(--paper-raised));
  color:var(--accent);
  transition:transform .45s cubic-bezier(.3,1.4,.4,1), background .35s ease;
}
.tile-icon svg{width:1.375rem;height:1.375rem;}
.tile:nth-child(3n+2) .tile-icon{background:color-mix(in srgb, var(--teal) 14%, var(--paper-raised));color:var(--teal);}
.tile:nth-child(3n) .tile-icon{
  background:color-mix(in srgb, var(--accent) 8%, color-mix(in srgb, var(--teal) 10%, var(--paper-raised)));
  color:color-mix(in srgb, var(--accent) 55%, var(--teal) 45%);
}
.tile:hover{transform:translateY(-0.4375rem);box-shadow:0 1.125rem 2.25rem rgba(15,23,42,.10), 0 0 0 0.0625rem color-mix(in srgb, var(--accent) 20%, transparent);border-color:transparent;}
.tile:hover .tile-icon{transform:scale(1.14) rotate(-6deg);}
.tile h4{font-size:1.0312rem;margin-bottom:0.5rem;}
.tile p{font-size:0.875rem;color:var(--ink-soft);}
@media (max-width:860px) and (pointer:coarse), (max-width:400px){.tiles{grid-template-columns:1fr 1fr;}}
@media (max-width:560px) and (pointer:coarse), (max-width:400px){.tiles{grid-template-columns:1fr;}}

/* trust bar */
.trust{
  margin-top:1.25rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(11.25rem,1fr));
  border-top:0.0625rem solid var(--line);
}
.trust div{
  padding:1rem 1.125rem 1rem 0;border-bottom:0.0625rem solid var(--line);font-size:0.8438rem;color:var(--ink-soft);
  border-left:0.0625rem solid var(--line);padding-left:1rem;
}

/* featured customer */
.featured{border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:2.75rem 2.75rem;margin-top:2.25rem;}
.featured .eyebrow{margin-bottom:0.625rem;}
.featured h3{font-size:clamp(1.25rem,2.4vw,1.6875rem);max-width:26ch;}
.featured p.body{margin-top:1rem;color:var(--ink-soft);max-width:60ch;font-size:0.9688rem;}
.featured .note{margin-top:1.125rem;font-size:0.7812rem;color:var(--ink-faint);font-style:italic;}
.featured .btn{margin-top:1.375rem;}
@media (max-width:640px) and (pointer:coarse), (max-width:400px){.featured{padding:1.875rem 1.625rem;}}

/* CAH callout band */
.callout{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg, var(--accent-soft), var(--cyan-soft) 60%, var(--teal-soft));
  border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line);
}
.callout .inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:1.875rem;flex-wrap:wrap;padding:3.25rem 0;
}
/* Always a single line; script.js (initCalloutTitleFit) shrinks the font-size per
   heading/viewport so the longest one still fits its container width. */
.callout h3{font-size:clamp(1.3125rem,2.6vw,1.75rem);max-width:100%;white-space:nowrap;color:var(--accent);}
.callout p{margin-top:0.5rem;color:var(--ink-soft);max-width:44ch;font-size:0.9375rem;}

/* footer */
footer{
  position:relative;overflow:hidden;
  padding:4rem 0 2.5rem;
  background:var(--grad-dark);
  color:var(--hero-ink-soft);
}
/* Logo + tagline sit on their own row above the link columns, not squeezed in beside them. */
.foot-logo-row{position:relative;z-index:1;margin-bottom:2.5rem;}
.foot-grid{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:2.5rem;}
.foot-col h5{
  font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  font-size:0.7188rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:0.875rem;
}
.foot-col a{display:block;font-size:0.875rem;color:var(--hero-ink-soft);margin-bottom:0.5625rem;transition:color .2s ease;}
.foot-col a:hover{color:var(--teal);}
.foot-tagline{font-size:0.8438rem;color:var(--hero-ink-soft);margin-top:0.625rem;}
.foot-newsletter{min-width:13.75rem;}
.newsletter-form{display:flex;gap:0.5rem;margin-top:0.875rem;flex-wrap:wrap;}
.newsletter-form input{
  flex:1;min-width:9.375rem;font:inherit;font-size:0.875rem;padding:0.625rem 0.875rem;border-radius:62.4375rem;
  border:0.0625rem solid var(--line);background:var(--paper-raised);color:var(--hero-ink);
}
.newsletter-form input::placeholder{color:var(--ink-faint);}
.newsletter-form input:focus{outline:0.125rem solid var(--accent);outline-offset:0.0625rem;}
.newsletter-form .btn{padding:0.625rem 1.25rem;}
footer .form-note{font-size:0.75rem;color:var(--ink-faint);margin-top:0.625rem;font-style:italic;}
.foot-bottom{
  position:relative;z-index:1;
  margin-top:3rem;padding-top:1.375rem;border-top:0.0625rem solid var(--line);
  font-size:0.7812rem;color:var(--hero-ink-soft);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.foot-social{display:flex;gap:0.75rem;}
.social-link{
  display:flex;align-items:center;justify-content:center;width:2.125rem;height:2.125rem;border-radius:50%;
  border:0.0625rem solid var(--line);color:var(--hero-ink-soft);background:var(--paper-raised);
  transition:transform .3s cubic-bezier(.3,1.4,.4,1), color .2s ease, border-color .2s ease;
}
.social-link svg{width:1rem;height:1rem;}
.social-link:hover{color:var(--teal);border-color:var(--teal);transform:translateY(-0.1875rem) scale(1.08);}

/* ================= Hero slider (home page) ================= */
.slider{position:relative;min-height:21.25rem;}
.slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s ease;
}
.slide.active{position:relative;opacity:1;visibility:visible;pointer-events:auto;}
.slide .kicker{
  font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1rem;display:block;
}
.slider-dots{display:flex;gap:1rem;margin-top:2.75rem;}
.slider-dots button{
  position:relative;overflow:hidden;
  width:4.5rem;height:0.3rem;border-radius:0.1875rem;border:none;
  background:rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(0.375rem) saturate(140%);
  backdrop-filter:blur(0.375rem) saturate(140%);
  cursor:pointer;padding:0;
}
.slider-dots button:hover{background:rgba(0,0,0,.5);}
.slider-dots button:focus-visible{outline:0.125rem solid var(--accent);outline-offset:0.1875rem;}
/* Fill sweeps left-to-right over the slide's dwell time, like a Stories progress bar.
   Only the active dot animates; others sit empty until they take their turn. */
.slider-dots button .fill{
  position:absolute;inset:0;transform:scaleX(0);transform-origin:left center;
  background:var(--accent);border-radius:inherit;
}
.slider-dots button.active .fill{
  animation:dotProgress var(--slide-duration,7.5s) linear forwards;
}
.slider.paused .slider-dots button.active .fill{animation-play-state:paused;}
@keyframes dotProgress{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@media (prefers-reduced-motion: reduce){
  .slider-dots button.active .fill{animation:none;transform:scaleX(1);}
}

/* ================= Hero backdrop card: bottom-center + slide in / slide out ================= */
/* The .slide-text card is anchored to the bottom-center of the hero. On entry it
   fades in while its lines slide in alternately from left/right (see the entrance
   block near the top); on exit the whole card glides out to the right
   (JS adds a transient .leaving class to the outgoing slide). */
.hero .slide{align-items:flex-end;}
.hero .slide .wrap{
  display:flex;
  justify-content:center;
  padding-bottom:clamp(4rem, 12vh, 9.375rem);
}

/* the card itself just fades; the per-line slide-ins (see the entrance block
   above) carry the left/right motion on the way in */
.hero .slide .slide-text{
  opacity:0;
  transition:opacity .55s ease;
  will-change:opacity, transform;
}
.hero .slide.active .slide-text{
  opacity:1;
  transition-delay:.1s;
}
/* on the way out the whole card glides off to the right */
.hero .slide.leaving .slide-text{
  transform:translateX(4.5rem);
  opacity:0;
  transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .6s ease;
}
/* keep the outgoing slide painted (above the incoming one) while its card slides away */
.hero .slide.leaving{
  position:absolute;inset:0;
  visibility:visible;
  opacity:0;
  pointer-events:none;
  z-index:2;
  transition:opacity .8s ease;
}
@media (prefers-reduced-motion: reduce){
  .hero .slide .slide-text,
  .hero .slide.active .slide-text > *{transform:none;opacity:1;transition:none;animation:none;}
  .hero .slide.leaving{opacity:0;transition:none;}
}

/* ================= Interior page header band ================= */
.crumbs{
  font-size:0.7812rem;color:var(--hero-ink-soft);margin-bottom:1.125rem;
  font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
}
.crumbs a{color:var(--hero-ink-soft);}
.crumbs a:hover{color:var(--hero-ink);}
.crumbs .sep{margin:0 0.4375rem;opacity:.5;}
.page-header{
  background:linear-gradient(175deg,var(--hero-bg),var(--hero-bg-2));
  color:var(--hero-ink);padding:3.25rem 0 2.875rem;
}

.pgtag{
    width: 75rem;
    margin-top: revert;
}

/* Always a single line; script.js (initPageHeaderFit) shrinks the font-size per
   heading/viewport so the longest one still fits the .wrap column. */
.page-header h1{color:var(--hero-ink);font-size:clamp(1.75rem,3.6vw,2.375rem);
  white-space:nowrap;max-width:100%;
  line-height:1.14;}
.page-header .lede{margin-top:1rem;color:var(--hero-ink-soft);
  /* max-width:56ch; */
  font-size:1.0312rem;}

/* Tablet/phone: titles may wrap and the fixed-width tag heading gives way, so nothing
   forces horizontal scrolling on narrow screens. */
@media (max-width:1040px) and (pointer:coarse), (max-width:400px){
  .page-header h1,.section-title,.callout h3{white-space:normal;}
  .pgtag{width:auto;max-width:100%;}
}

/* ================= Constraint / capability table ================= */
table.gap{width:100%;border-collapse:collapse;margin-top:0.5rem;font-size:0.9062rem;}
table.gap th{
  text-align:left;font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  padding:0 1rem 0.75rem;border-bottom:0.0625rem solid var(--line);
}
table.gap td{padding:1rem;border-bottom:0.0625rem solid var(--line);vertical-align:top;}
table.gap td.old{color:var(--ink-faint);width:36%;}
table.gap td.new{color:var(--ink);font-weight:500;}
table.gap tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;margin-top:1.75rem;border:0.0625rem solid var(--line);border-radius:var(--radius-md);padding:0.375rem 0.5rem;background:var(--paper-raised);}

/* ================= Constraint tiles (CAH page) ================= */
.constraints{display:grid;grid-template-columns:repeat(auto-fit,minmax(14.375rem,1fr));gap:0.75rem;margin-top:1.5rem;}
.constraints .c-tile{
  border-radius:var(--radius-md);padding:1rem 1.125rem;font-size:0.9062rem;color:var(--ink-soft);
}

/* ================= Solutions grid ================= */
.sol-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.25rem;}
@media (max-width:760px) and (pointer:coarse), (max-width:400px){.sol-grid{grid-template-columns:1fr;}}
.sol-card{
  border-radius:var(--radius-md);padding:1.5rem 1.625rem;
}
.sol-card.is-current{background:var(--accent-soft);}
.sol-card .sol-eyebrow{font-size:0.7812rem;color:var(--accent);font-style:italic;margin-bottom:0.5rem;display:block;}
.sol-card h4{font-size:1.0625rem;margin-bottom:0.5rem;}
.sol-card p{font-size:0.875rem;color:var(--ink-soft);}

/* ================= Resource list ================= */
.res-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.75rem;}
.res-item{
  display:grid;grid-template-columns:1fr 2fr;gap:1.5rem;padding:1.625rem 1.75rem;
  border-radius:var(--radius-md);
}
.res-item .res-tag{
  font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);
}
.res-item h4{font-size:1.125rem;margin-top:0.5rem;max-width:22ch;}
.res-item p{font-size:0.9062rem;color:var(--ink-soft);margin-top:0.625rem;max-width:56ch;}
@media (max-width:700px) and (pointer:coarse), (max-width:400px){.res-item{grid-template-columns:1fr;gap:0.375rem;}}

/* ================= About: values grid ================= */
.values{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0.0625rem;background:var(--line);
  margin-top:2.5rem;border:0.0625rem solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
}
.value{
  position:relative;background:var(--glass-bg);padding:1.75rem 1.375rem;text-align:left;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  transition:background .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .value{background:var(--glass-bg-strong);}
}
.value:hover{background:var(--glass-bg-strong);transform:translateY(-0.25rem);}
.value .num{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;font-size:0.75rem;color:var(--accent);}
.value h4{font-size:1rem;margin-top:0.625rem;}
.value p{font-size:0.8438rem;color:var(--ink-soft);margin-top:0.5rem;}
@media (max-width:860px) and (pointer:coarse), (max-width:400px){.values{grid-template-columns:1fr 1fr;}}
@media (max-width:560px) and (pointer:coarse), (max-width:400px){.values{grid-template-columns:1fr;}}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;}
.stat{border-left:0.125rem solid var(--accent);padding-left:1rem;}
.stat .n{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:1.875rem;font-weight:700;}
.stat .l{font-size:0.7812rem;color:var(--ink-faint);margin-top:0.25rem;}
@media (max-width:760px) and (pointer:coarse), (max-width:400px){.stat-row{grid-template-columns:1fr 1fr;}}

/* ================= Contact page ================= */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3.5rem;margin-top:2.5rem;align-items:center;}
@media (max-width:860px) and (pointer:coarse), (max-width:400px){.contact-grid{grid-template-columns:1fr;}}
/* Vertical stepper: one continuous line behind a hollow ring per item, each ring
   centered on that item's label line. */
.contact-info{position:relative;display:flex;flex-direction:column;gap:3rem;}
/* height is set by script.js (initContactStepper) to reach the last ring's exact
   center - a fixed bottom:0.5625rem guess undershot/overshot it since the last item
   (2-line address) isn't the same height as the others. */
.contact-info::before{
  content:"";position:absolute;left:0.375rem;top:0.4375rem;width:0.125rem;background:var(--line);
  height:var(--stepper-track-height, calc(100% - 0.875rem));
}
.contact-info .c-item{position:relative;padding-left:1.75rem;}
/* h5's line-height is pinned to exactly the circle's own height so top:0 lines the
   two up precisely, instead of guessing an offset against the inherited 1.6 line-height. */
.contact-info .c-item::before{
  content:"";position:absolute;left:0;top:0;z-index:1;
  width:0.875rem;height:0.875rem;border-radius:50%;box-sizing:border-box;
  background:var(--paper-raised);border:0.1562rem solid color-mix(in srgb, var(--accent) 80%, white 20%);
  box-shadow:0 0 0 0.25rem color-mix(in srgb, var(--accent) 16%, transparent);
  transition:background .2s ease, box-shadow .2s ease;
}
.contact-info .c-item.filled::before{
  box-shadow:0 0 0 0.25rem color-mix(in srgb, var(--accent) 26%, transparent);
}
/* script.js (initContactStepper): fills as the growing line reaches each item. */
.contact-info .c-item.filled::before{background:color-mix(in srgb, var(--accent) 80%, white 20%);}
/* The line itself travels: an accent-colored fill grows down over the grey line,
   from the top, reaching (and filling) each ring in turn. */
.contact-info .stepper-fill{
  position:absolute;left:0.375rem;top:0.4375rem;width:0.125rem;height:0;z-index:1;
  background:color-mix(in srgb, var(--accent) 80%, white 20%);
  transition:height .55s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.contact-info .c-item h5{
  font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  font-size:0.6875rem;line-height:0.875rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:0.375rem;
}
.contact-info .c-item p{font-size:0.9375rem;color:var(--ink);}
.contact-form{border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:2rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
@media (max-width:520px) and (pointer:coarse), (max-width:400px){.form-row{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:0.375rem;margin-bottom:1rem;}
.field label{font-size:0.7812rem;color:var(--ink-soft);font-weight:600;}
.field input,.field select,.field textarea{
  font:inherit;font-size:0.9062rem;padding:0.625rem 0.75rem;border:0.0625rem solid var(--line);border-radius:0.625rem;
  background:var(--paper-raised);color:var(--ink);width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{resize:vertical;min-height:6.5rem;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 0.25rem color-mix(in srgb, var(--accent) 18%, transparent);
}
/* Custom dropdown (script.js initCustomSelects) - a native <select>'s option list
   can't be styled to match the Solutions nav dropdown (rounded hover pills, our own
   colors), so JS progressively enhances each .field select into this markup and
   hides the original (kept in the DOM so its value/name still work for the form). */
select.js-enhanced{display:none;}
.select-wrap{position:relative;}
.select-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
  font:inherit;font-size:0.9062rem;padding:0.625rem 0.75rem;border:0.0625rem solid var(--line);border-radius:0.625rem;
  background:var(--paper-raised);color:var(--ink);width:100%;cursor:pointer;text-align:left;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.select-trigger:focus-visible,.select-wrap.open .select-trigger{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 0.25rem color-mix(in srgb, var(--accent) 18%, transparent);
}
.select-trigger svg{flex:none;width:1rem;height:1rem;color:var(--ink-faint);transition:transform .2s ease;}
.select-wrap.open .select-trigger svg{transform:rotate(180deg);}
.select-list{
  list-style:none;margin:0;position:absolute;top:calc(100% + 0.375rem);left:0;right:0;z-index:20;
  background:var(--paper-raised);border:0.0625rem solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow);padding:0.5rem;max-height:17.5rem;overflow:auto;
  opacity:0;visibility:hidden;transform:translateY(0.375rem);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.select-wrap.open .select-list{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.select-list::-webkit-scrollbar{width:0.3125rem;}
.select-list::-webkit-scrollbar-track{background:transparent;}
.select-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:62.4375rem;}
.select-list::-webkit-scrollbar-thumb:hover{background:var(--ink-faint);}
.select-option{
  display:block;padding:0.5625rem 0.75rem;border-radius:0.3125rem;font-size:0.875rem;font-weight:400;cursor:pointer;
  color:color-mix(in srgb, var(--ink-soft) 55%, var(--ink-faint));
}
.select-option:hover{background:var(--accent-soft);color:var(--accent);font-weight:500;}
.select-option[aria-selected="true"]{color:var(--accent);font-weight:500;}

/* Floating labels — input sits before its label in the DOM so the CSS
   sibling selector can float the label up once the field has content. */
.field.floating{position:relative;display:block;margin-bottom:1.25rem;}
.field.floating input,.field.floating textarea{width:100%;}
.field.floating label{
  position:absolute;left:0.8125rem;top:0.6875rem;font-size:0.9062rem;font-weight:400;color:var(--ink-faint);
  pointer-events:none;transform-origin:left top;background:transparent;padding:0 0.1875rem;
  transition:transform .18s ease, color .18s ease, background .18s ease;
}
.field.floating input:focus + label,
.field.floating input:not(:placeholder-shown) + label,
.field.floating textarea:focus + label,
.field.floating textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.1875rem) scale(.83);
  background:var(--paper-raised);
}
.field.floating input:focus + label,
.field.floating textarea:focus + label{
  color:var(--accent);
}
.field.floating input:not(:focus):not(:placeholder-shown) + label,
.field.floating textarea:not(:focus):not(:placeholder-shown) + label{
  color:color-mix(in srgb, var(--ink-soft) 60%, var(--ink) 40%);
}

@keyframes fieldShake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(0.125rem);}
  30%,50%,70%{transform:translateX(-0.25rem);}
  40%,60%{transform:translateX(0.25rem);}
}
.field.shake{animation:fieldShake .4s ease;}
.field.shake input,.field.shake textarea,.field.shake select{border-color:#EF4444;}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#EF4444;}
.field-msg{margin:0.375rem 0 0 0.25rem;font-size:0.75rem;font-weight:500;color:#DC2626;}

/* Meeting slot picker (script.js initMeetingPicker) - trigger button + <dialog> */
.meeting-picker[hidden]{display:none;}
.meeting-picker{position:relative;}
.meeting-picker .picker-label{font-size:0.7812rem;color:var(--ink-soft);font-weight:600;}
.meeting-picker .picker-label small{font-weight:500;color:var(--ink-faint);}
.meeting-trigger{
  display:flex;align-items:center;gap:0.625rem;width:100%;text-align:left;cursor:pointer;
  font:inherit;font-size:0.9062rem;padding:0.625rem 0.75rem;border:0.0625rem solid var(--line);border-radius:0.625rem;
  background:var(--paper-raised);color:var(--ink-faint);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.meeting-trigger svg{flex:none;width:1.125rem;height:1.125rem;color:var(--accent);}
.meeting-trigger.has-value{color:var(--ink);font-weight:500;}
.meeting-trigger .meeting-summary{flex:1;min-width:0;}
.meeting-trigger .meeting-change{flex:none;font-size:0.8125rem;font-weight:600;color:var(--accent);}
.meeting-trigger:hover{border-color:var(--accent);}
.meeting-trigger:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 0.25rem color-mix(in srgb, var(--accent) 18%, transparent);}
.meeting-picker.has-error .meeting-trigger{border-color:#EF4444;}
.field .meeting-slot-value{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;}

.meeting-dialog{
  width:min(36rem, calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;
  padding:1.5rem;border:0.0625rem solid var(--line);border-radius:var(--radius-lg);
  background:var(--paper-raised);color:var(--ink);box-shadow:var(--shadow-lg);
}
.meeting-dialog[open]{animation:mdIn .2s ease;}
.meeting-dialog::backdrop{background:rgba(15,23,42,0.45);-webkit-backdrop-filter:blur(0.1875rem);backdrop-filter:blur(0.1875rem);}
@keyframes mdIn{from{opacity:0;transform:translateY(0.5rem) scale(.98);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){.meeting-dialog[open]{animation:none;}}
.md-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;}
.md-head h3{margin:0 0 0.25rem;font-size:1.125rem;}
.md-head p{margin:0;font-size:0.8125rem;color:var(--ink-soft);}
.md-close{
  flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;padding:0;margin:0;
  border:0;border-radius:0;outline:none;box-shadow:none;background:none;color:var(--ink-soft);cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.md-close svg{width:1.25rem;height:1.25rem;}
.md-close:hover,.md-close:focus-visible{color:var(--ink);}
.md-step{margin:0 0 0.625rem;font-size:0.8125rem;font-weight:600;color:var(--ink-soft);}
.md-step span{font-weight:500;color:var(--ink-faint);}
.md-cal{border:0.0625rem solid var(--line);border-radius:var(--radius-md);padding:0.75rem;margin-bottom:1.25rem;}
.md-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;}
.md-month{font-size:0.9375rem;font-weight:600;}
.md-nav{
  display:grid;place-items:center;width:2rem;height:2rem;padding:0;border:0.0625rem solid var(--line);border-radius:0.5rem;
  background:var(--paper-raised);color:var(--ink-soft);cursor:pointer;transition:border-color .2s ease, color .2s ease;
}
.md-nav svg{width:1rem;height:1rem;}
.md-nav:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.md-nav:disabled{opacity:.35;cursor:default;}
.md-weekdays,.md-days{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.25rem;}
.md-weekdays{margin-bottom:0.25rem;}
.md-weekdays span{text-align:center;font-size:0.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);padding:0.25rem 0;}
.md-slots{display:grid;grid-template-columns:repeat(auto-fill, minmax(5.25rem, 1fr));gap:0.5rem;margin-bottom:0.5rem;}
.md-day,.md-slot{
  font:inherit;border:0.0625rem solid var(--line);border-radius:0.625rem;background:var(--paper-raised);color:var(--ink);cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.md-day{height:2.5rem;min-width:0;padding:0;font-size:0.875rem;font-weight:600;border-color:transparent;}
.md-day:disabled{color:var(--ink-faint);font-weight:400;opacity:.55;cursor:default;background:none;}
.md-day:not(:disabled){background:var(--accent-soft);color:var(--accent);}
.md-day.is-today{box-shadow:inset 0 -0.125rem 0 var(--accent);}
.md-days.is-loading{opacity:.45;pointer-events:none;}
.md-status{margin:0.625rem 0 0;font-size:0.8125rem;color:var(--ink-soft);text-align:center;}
.md-slot{padding:0.5rem 0.25rem;font-size:0.8438rem;font-weight:500;color:var(--ink-soft);}
.md-day:hover:not(:disabled),.md-slot:hover{border-color:var(--accent);}
.md-day:focus-visible,.md-slot:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 0.25rem color-mix(in srgb, var(--accent) 18%, transparent);}
.md-day[aria-pressed="true"],.md-slot[aria-pressed="true"]{background:color-mix(in srgb, var(--accent) 14%, var(--paper-raised));border-color:color-mix(in srgb, var(--accent) 55%, transparent);color:var(--accent);}
.md-slot.is-booked{
  display:flex;flex-direction:column;align-items:center;gap:0.0625rem;padding-block:0.3125rem;
  background:color-mix(in srgb, var(--line) 45%, var(--paper-raised));border-color:var(--line);
  color:var(--ink-faint);cursor:not-allowed;
}
.md-slot.is-booked span{text-decoration:line-through;}
.md-slot.is-booked small{font-size:0.625rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.md-slot.is-booked:hover{border-color:var(--line);}
.md-foot{display:flex;justify-content:flex-end;gap:0.75rem;margin-top:1.25rem;padding-top:1rem;border-top:0.0625rem solid var(--line);}
.md-foot .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
@media (max-width:480px){
  .meeting-dialog{padding:1.125rem;}
  .md-cal{padding:0.5rem;}
  .md-day{height:2.25rem;}
}

.form-note{font-size:0.75rem;color:var(--ink-faint);margin-top:0.875rem;font-style:italic;}
.form-error{color:#c0392b;font-style:normal;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* ---------- cosmic checkbox (recolored blue to match the site accent) ---------- */
.cosmic-checkbox {
  --size: 0.9375rem;
  --clr-idle: #8b8fa3;
  --clr-active: var(--accent);
  --clr-glow: #38BDF8;
  /* Deliberately darker than a typical "glow" tone: the original component was
     built for a dark card background where a pale blue would pop, but this
     checkbox sits on white, so the checked label needs real contrast instead. */
  --clr-core: var(--accent);
  --clr-spark: #7DD3FC;
  --duration: 0.6s;
  display: inline-flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cosmic-checkbox input {
  display: none;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ---------- the box ---------- */
.checkbox-box {
  position: relative;
  width: var(--size);
  height: var(--size);
  border: 0.125rem solid var(--clr-idle);
  border-radius: 0.125rem;
  transition:
    border-color 0.3s,
    background 0.3s,
    box-shadow 0.3s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* idle hover */
.cosmic-checkbox:hover .checkbox-box {
  border-color: var(--clr-glow);
  box-shadow: 0 0 0.5rem rgba(10, 110, 209, 0.25);
}

/* Background Element */
.checkbox-bg {
  position: absolute;
  inset: 0;
  border-radius: 0.125rem;
  background: linear-gradient(135deg, var(--accent), var(--clr-glow));
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.cosmic-checkbox input:checked ~ .checkbox-container .checkbox-bg {
  opacity: 1;
  transform: scale(1);
  box-shadow:
    0 0 0.75rem rgba(10, 110, 209, 0.5),
    0 0 1.875rem rgba(10, 110, 209, 0.2),
    inset 0 0 0.5rem rgba(191, 227, 255, 0.15);
}

/* ---------- checkmark ---------- */
.checkmark {
  width: 0.5625rem;
  height: 0.5625rem;
  color: #fff;
  opacity: 0;
  transform: scale(0) rotate(-20deg);
  transition:
    opacity 0.25s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.checkmark path {
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}

/* ---------- label text ---------- */
.label-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.0188rem;
  user-select: none;
}

/* ======================
   PARTICLES
   ====================== */
.particle {
  position: absolute;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--clr-spark);
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 50%;
  z-index: 3;
}

/* ======================
   SHOCKWAVE RINGS
   ====================== */
.ring {
  position: absolute;
  inset: -0.5rem;
  border-radius: 50%;
  border: 0.125rem solid var(--clr-glow);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ======================
   SPARK LINES
   ====================== */
.spark {
  position: absolute;
  width: 0.125rem;
  height: 0.625rem;
  background: linear-gradient(to top, var(--clr-spark), transparent);
  opacity: 0;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  pointer-events: none;
  border-radius: 0.125rem;
  z-index: 3;
}

/* Position sparks in a radial pattern */
.s1 { transform: rotate(0deg) translateY(-2px); }
.s2 { transform: rotate(45deg) translateY(-2px); }
.s3 { transform: rotate(90deg) translateY(-2px); }
.s4 { transform: rotate(135deg) translateY(-2px); }
.s5 { transform: rotate(180deg) translateY(-2px); }
.s6 { transform: rotate(225deg) translateY(-2px); }
.s7 { transform: rotate(270deg) translateY(-2px); }
.s8 { transform: rotate(315deg) translateY(-2px); }

/* ==========================================
   CHECKED STATE — the supernova ignites
   ========================================== */
.cosmic-checkbox input:checked ~ .checkbox-container .checkbox-box {
  border-color: var(--clr-active);
  transform: scale(1);
  animation: box-pulse 0.5s ease;
}

@keyframes box-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(0.85); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* checkmark draws in */
.cosmic-checkbox input:checked ~ .checkbox-container .checkmark {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.cosmic-checkbox input:checked ~ .checkbox-container .checkmark path {
  stroke-dashoffset: 0;
}

/* label keeps the normal text color, checked or not (no color swap). */

/* ---- Particle explosion ---- */
.cosmic-checkbox input:checked ~ .checkbox-container .p1 {
  animation: particle-fly 0.65s ease-out forwards;
  --angle: -45deg; --dist: 1.375rem; --clr: #7DD3FC;
}
.cosmic-checkbox input:checked ~ .checkbox-container .p2 {
  animation: particle-fly 0.6s 0.05s ease-out forwards;
  --angle: -90deg; --dist: 1.625rem; --clr: #38BDF8;
}
.cosmic-checkbox input:checked ~ .checkbox-container .p3 {
  animation: particle-fly 0.55s 0.08s ease-out forwards;
  --angle: 0deg; --dist: 1.25rem; --clr: #0EA5E9;
}
.cosmic-checkbox input:checked ~ .checkbox-container .p4 {
  animation: particle-fly 0.7s 0.03s ease-out forwards;
  --angle: 45deg; --dist: 1.5rem; --clr: #0A6ED1;
}
.cosmic-checkbox input:checked ~ .checkbox-container .p5 {
  animation: particle-fly 0.5s 0.1s ease-out forwards;
  --angle: 135deg; --dist: 1.125rem; --clr: #60A5FA;
}
.cosmic-checkbox input:checked ~ .checkbox-container .p6 {
  animation: particle-fly 0.65s 0.06s ease-out forwards;
  --angle: -135deg; --dist: 1.4375rem; --clr: #3B82F6;
}

@keyframes particle-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(1);
    background: var(--clr);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--angle))
      translateY(calc(var(--dist) * -1)) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle))
      translateY(calc(var(--dist) * -1.4)) scale(0);
  }
}

/* ---- Shockwave rings ---- */
.cosmic-checkbox input:checked ~ .checkbox-container .ring-1 { animation: shockwave 0.7s ease-out forwards; }
.cosmic-checkbox input:checked ~ .checkbox-container .ring-2 { animation: shockwave 0.7s 0.12s ease-out forwards; }
.cosmic-checkbox input:checked ~ .checkbox-container .ring-3 { animation: shockwave 0.7s 0.24s ease-out forwards; }

@keyframes shockwave {
  0% { opacity: 0.7; transform: scale(0.5); border-color: var(--clr-glow); }
  50% { opacity: 0.4; border-color: var(--clr-spark); }
  100% { opacity: 0; transform: scale(2.2); border-color: transparent; }
}

/* ---- Spark lines burst ---- */
.cosmic-checkbox input:checked ~ .checkbox-container .s1 { animation: spark-burst 0.5s 0.05s ease-out forwards; --rot: 0deg; }
.cosmic-checkbox input:checked ~ .checkbox-container .s2 { animation: spark-burst 0.45s 0.08s ease-out forwards; --rot: 45deg; }
.cosmic-checkbox input:checked ~ .checkbox-container .s3 { animation: spark-burst 0.5s 0.03s ease-out forwards; --rot: 90deg; }
.cosmic-checkbox input:checked ~ .checkbox-container .s4 { animation: spark-burst 0.55s 0.1s ease-out forwards; --rot: 135deg; }
.cosmic-checkbox input:checked ~ .checkbox-container .s5 { animation: spark-burst 0.5s 0.06s ease-out forwards; --rot: 180deg; }
.cosmic-checkbox input:checked ~ .checkbox-container .s6 { animation: spark-burst 0.45s 0.09s ease-out forwards; --rot: 225deg; }
.cosmic-checkbox input:checked ~ .checkbox-container .s7 { animation: spark-burst 0.5s 0.04s ease-out forwards; --rot: 270deg; }
.cosmic-checkbox input:checked ~ .checkbox-container .s8 { animation: spark-burst 0.55s 0.07s ease-out forwards; --rot: 315deg; }

@keyframes spark-burst {
  0% { opacity: 1; transform: rotate(var(--rot)) translateY(-0.25rem) scaleY(0.5); }
  50% {
    opacity: 0.9;
    transform: rotate(var(--rot)) translateY(-1.25rem) scaleY(1.2);
    background: linear-gradient(to top, var(--clr-active), transparent);
  }
  100% { opacity: 0; transform: rotate(var(--rot)) translateY(-1.875rem) scaleY(0.3); }
}

/* ======================
   IDLE BREATHING GLOW
   ====================== */
.checkbox-box::before {
  content: "";
  position: absolute;
  inset: -0.1875rem;
  border-radius: 0.125rem;
  background: radial-gradient(circle, rgba(10, 110, 209, 0.12), transparent 70%);
  opacity: 0;
  animation: idle-breathe 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes idle-breathe {
  0%, 100% { opacity: 0; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.15); }
}

.cosmic-checkbox input:checked ~ .checkbox-container .checkbox-box::before {
  animation: none;
  opacity: 0.6;
  transform: scale(1.2);
  background: radial-gradient(circle, rgba(10, 110, 209, 0.25), transparent 70%);
  transition: opacity 0.5s, transform 0.5s;
}

/* ======================
   AFTER-GLOW
   ====================== */
.checkbox-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.125rem;
  opacity: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
  pointer-events: none;
  transition: opacity 0.4s 0.2s;
}

.cosmic-checkbox input:checked ~ .checkbox-container .checkbox-box::after { opacity: 1; }

/* ======================
   UNCHECKED TRANSITION
   ====================== */
.cosmic-checkbox input:not(:checked) ~ .checkbox-container .checkbox-box {
  background: transparent;
  box-shadow: none;
}
.cosmic-checkbox input:not(:checked) ~ .checkbox-container .checkmark {
  opacity: 0;
  transform: scale(0) rotate(-20deg);
}
.cosmic-checkbox input:not(:checked) ~ .checkbox-container .checkmark path { stroke-dashoffset: 28; }

/* ======================
   FOCUS-VISIBLE (a11y)
   ====================== */
.cosmic-checkbox input:focus-visible ~ .checkbox-container .checkbox-box {
  outline: 0.125rem solid var(--clr-glow);
  outline-offset: 0.1875rem;
}

/* Visual glass treatment comes from the shared .glass-card class (applied in HTML);
   this rule only adds the layout specific to the success state. */
.form-success{border-radius:var(--radius-lg);padding:3.25rem 2rem;text-align:center;}
.form-success .check-icon{width:3.25rem;height:3.25rem;color:var(--success);margin:0 auto 1.125rem;}
/* pathLength="1" on both shapes (contact.html), so a dash of 1 is always the full stroke;
   the circle starts at 12 o'clock and draws clockwise. */
.form-success .check-icon circle{stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:center;transform-box:fill-box;}
.form-success .check-icon path{stroke-dasharray:1;stroke-dashoffset:1;}
@media (prefers-reduced-motion:no-preference){
  .form-success .check-icon circle{animation:drawIn .5s ease forwards;}
  .form-success .check-icon path{animation:drawIn .3s ease forwards .45s;}
  @keyframes drawIn{to{stroke-dashoffset:0;}}
}
@media (prefers-reduced-motion:reduce){
  .form-success .check-icon circle,.form-success .check-icon path{stroke-dashoffset:0;}
}
.form-success h3{font-size:1.25rem;}
.form-success p{margin-top:0.625rem;color:var(--ink-soft);font-size:0.875rem;max-width:46ch;margin-left:auto;margin-right:auto;}

/* ================= Case study columns ================= */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem;}
@media (max-width:760px) and (pointer:coarse), (max-width:400px){.case-grid{grid-template-columns:1fr;}}
.case-col{border-radius:var(--radius-md);padding:1.5rem 1.375rem;}
.case-col h4{
  font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  font-size:0.7188rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:0.875rem;
}
.case-col ul{margin:0;padding-left:1.125rem;font-size:0.9062rem;color:var(--ink-soft);}
.case-col li{margin-bottom:0.5625rem;}
.pending-tag{
  font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  font-size:0.625rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent);padding:0.125rem 0.4375rem;border-radius:0.25rem;margin-left:0.375rem;
}

/* ================= Technology / monitors photo grid + comparison table ================= */
.tech-photos{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:0.5rem;}
@media (max-width:860px) and (pointer:coarse), (max-width:400px){.tech-photos{grid-template-columns:1fr 1fr;}}
@media (max-width:640px) and (pointer:coarse), (max-width:400px){.tech-photos{grid-template-columns:1fr;}}
.tech-photo-card{text-align:center;}
.tech-photo-card .tech-photo{width:100%;max-width:21.25rem;margin:0 auto;position:relative;}
.tech-photo-card h4{margin-top:1.125rem;font-size:1.0312rem;}
.tech-photo-card p{margin-top:0.5rem;font-size:0.875rem;color:var(--ink-soft);text-align:left;}
.tech-badge{
  display:inline-block;margin-top:0.75rem;
  font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  font-size:0.6875rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent);padding:0.3125rem 0.75rem;border-radius:62.4375rem;
}
@media (prefers-reduced-motion:no-preference){
  /* translate (not transform) so this composes cleanly with .photo-frame's
     own hover transform instead of fighting over the same property. */
  .tech-photo-card .tech-photo{animation:techFloat 5s ease-in-out infinite;}
  .tech-photo-card:nth-child(2) .tech-photo{animation-delay:-1.7s;}
  .tech-photo-card:nth-child(3) .tech-photo{animation-delay:-3.4s;}
  @keyframes techFloat{0%,100%{translate:0 0;}50%{translate:0 -0.625rem;}}
}

/* ================= Related solutions strip ================= */
.related{border-top:0.0625rem solid var(--line);padding-top:2.25rem;margin-top:2.25rem;}
.related h5{
  font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1rem;
}

/* Booked-meeting summary on the contact success screen (script.js showMeetingSuccess) */
.success-meeting{
  display:flex;flex-direction:column;align-items:center;gap:0.375rem;margin:1.5rem auto 0;max-width:30rem;
  padding:1.125rem 1rem;border:0.0625rem solid var(--line);border-radius:var(--radius-md);background:var(--accent-soft);
}
.success-meeting[hidden]{display:none;}
.success-meeting-label{font-size:0.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}
.success-meeting strong{font-size:0.9375rem;color:var(--ink);}
.success-cal{display:flex;flex-wrap:wrap;justify-content:center;gap:0.625rem;margin-top:0.625rem;}
.success-cal:not(:has(.btn:not([hidden]))){display:none;}
.success-meeting .success-note{font-size:0.8125rem;color:var(--ink-soft);}
.success-cal .btn[hidden]{display:none;}