/* ===== Glace · design system (paper + ink + glacier blue · Geist/Inter) ===== */
:root{
  --paper:    oklch(0.978 0.005 220);
  --paper-2:  oklch(0.958 0.008 220);
  --paper-3:  oklch(0.938 0.012 220);
  --card:     oklch(0.995 0.003 220);

  --ink:      oklch(0.255 0.024 230);
  --ink-soft: oklch(0.435 0.020 228);
  --muted:    oklch(0.565 0.016 226);
  --faint:    oklch(0.70 0.014 224);
  --line:     oklch(0.885 0.012 222);
  --line-2:   oklch(0.825 0.016 222);

  --accent-h: 222;
  --accent:      oklch(0.605 0.115 var(--accent-h));
  --accent-deep: oklch(0.36 0.105 var(--accent-h));
  --accent-700:  oklch(0.43 0.115 var(--accent-h));
  --accent-soft: oklch(0.965 0.022 var(--accent-h));
  --accent-mid:  oklch(0.915 0.040 var(--accent-h));

  /* dark surfaces for banded sections */
  --deep:    oklch(0.265 0.052 232);
  --deep-2:  oklch(0.225 0.044 234);
  --on-deep: oklch(0.945 0.018 222);
  --on-deep-soft: oklch(0.80 0.028 222);
  --deep-line: oklch(0.40 0.040 222 / 0.55);
  --accent-bright: oklch(0.78 0.135 220);


  /* nav: deep glacier ink when detached on scroll */
  --nav-dark: oklch(0.225 0.050 232);
  --nav-line: oklch(1 0 0 / 0.12);

  /* hero background image */
  --hero-bg: url("BG stretched.jpg");

  --white: #fff;
  --serif: "Geist", system-ui, sans-serif;
  --sans:  "Inter", system-ui, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Geist Mono", Menlo, monospace;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 1px 2px oklch(0.255 0.024 230 / 0.05), 0 18px 50px -30px oklch(0.255 0.024 230 / 0.35);
  --shadow-lg: 0 2px 6px oklch(0.255 0.024 230 / 0.06), 0 40px 80px -44px oklch(0.255 0.024 230 / 0.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--accent-deep)}
::selection{background:var(--accent-mid);color:var(--ink)}

/* ---- layout ---- */
/* full-bleed like the hero: held in only by --gutter, so sections track the
   hero width on laptop+ (below 1180px the viewport was already the limit) */
.container{width:100%;max-width:none;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,132px)}
section[id], [id]{scroll-margin-top:90px}

/* ---- type utilities ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);
  font-size:0.72rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent-deep);
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.eyebrow .idx{color:var(--faint);letter-spacing:0.08em}
.eyebrow.on-dark{color:var(--accent-bright)}
.eyebrow.on-dark .dot{background:var(--accent-bright);box-shadow:0 0 0 4px oklch(0.78 0.135 220 / 0.18)}
.eyebrow.on-dark .idx{color:var(--on-deep-soft)}


/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:0.95rem;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--accent-700);color:var(--white);box-shadow:0 10px 28px -14px var(--accent-deep)}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 16px 34px -16px var(--accent-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--card);border-color:var(--accent);color:var(--accent-deep);transform:translateY(-2px)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px oklch(0 0 0 / 0.5)}
.btn-arrow .circ{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:oklch(1 0 0 / 0.16);
  transition:transform .25s var(--ease);
}
.btn-arrow .circ svg{width:12px;height:12px}
.btn-arrow:hover .circ{transform:translate(2px,-2px)}
.btn-light .circ{background:var(--accent-soft);color:var(--accent-deep)}

/* ---- nav: a floating frosted-white PILL (DocShield-style), fixed near the
   top, centered links with a hover-dot, and a dark "Book a call" pill. Always
   glass (no scroll animation). ---- */
.nav{
  position:fixed;top:clamp(12px,1.8vw,20px);left:0;right:0;z-index:100;
  display:flex;justify-content:center;padding:0 clamp(12px,3vw,24px);
}
.nav-inner{
  position:relative;width:100%;max-width:1200px;
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  padding:8px 8px 8px clamp(18px,2vw,26px);
  border-radius:999px;
  border:1px solid oklch(1 0 0 / 0.7);
  background:oklch(1 0 0 / 0.68);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 10px 34px -18px oklch(0.2 0.03 232 / 0.42), inset 0 1px 0 oklch(1 0 0 / 0.7);
}
.wordmark{
  display:inline-flex;align-items:center;gap:clamp(8px,1.2vw,14px);
  font-family:var(--serif);font-weight:400;letter-spacing:0.4em;font-size:1.16rem;
  color:var(--ink);text-decoration:none;flex:none;
}
.wordmark-logo{display:block;height:clamp(30px,3.6vw,40px);width:auto;flex-shrink:0}

/* on desktop the collapse is transparent to layout: links centre, CTA sits right */
.nav-collapse{display:contents}
.nav-menu{
  display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);
  list-style:none;margin:0 auto;padding:0;
}
.nav-menu li{display:inline-flex}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:0.9rem;font-weight:500;color:var(--ink-soft);
  text-decoration:none;white-space:nowrap;transition:color .2s var(--ease);
}
.nav-link:hover{color:var(--accent-deep)}
/* the little primary dot that fades in beside the hovered link */
.nav-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  margin-left:-4px;opacity:0;transition:opacity .25s var(--ease);
}
.nav-link:hover .nav-dot{opacity:1}

/* CTA group: a light "Log in" + the dark "Book a call" pill */
.nav-cta{flex:none;display:inline-flex;align-items:center;gap:8px}
.nav-login{
  display:inline-flex;align-items:center;
  padding:11px 18px;border-radius:999px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:0.86rem;font-weight:600;letter-spacing:0.01em;
  text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.nav-login:hover{background:oklch(1 0 0 / 0.55);border-color:var(--accent-mid);color:var(--accent-deep)}
.nav-book{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:999px;
  background:oklch(0.50 0.115 222);color:#fff;   /* lighter teal (matches orbital widgets), fixed */
  font-family:var(--sans);font-size:0.86rem;font-weight:600;letter-spacing:0.01em;
  text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.nav-book:hover{background:oklch(0.43 0.115 222);transform:translateY(-1px)}
.nav-book svg{width:17px;height:17px}
/* larger variant for hero/CTA placements (e.g. the audit band) */
.nav-book--lg{padding:15px 28px;font-size:0.98rem;gap:10px}
.nav-book--lg svg{width:19px;height:19px}

/* burger: hidden on desktop, shown when the menu collapses */
.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 10px;border-radius:999px;cursor:pointer;
  color:var(--ink);margin-left:auto;flex:none;
}
.nav-burger span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* collapse into a frosted dropdown below the pill on smaller screens */
@media (max-width:920px){
  .nav-burger{display:flex}
  .nav-collapse{
    display:none;
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:12px;border-radius:22px;
    border:1px solid oklch(1 0 0 / 0.7);
    background:oklch(1 0 0 / 0.92);
    -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
    box-shadow:0 24px 60px -24px oklch(0.2 0.03 232 / 0.45);
  }
  #nav-toggle:checked ~ .nav-collapse{display:flex}
  .nav-menu{flex-direction:column;align-items:stretch;gap:2px;margin:0}
  .nav-menu li{display:block}
  .nav-link{padding:11px 14px;border-radius:12px;font-size:0.98rem}
  .nav-link:hover{background:var(--accent-soft)}
  .nav-dot{display:none}
  .nav-cta{flex-direction:column;align-items:stretch;gap:6px;margin-top:8px;width:100%}
  .nav-login{justify-content:center;padding:12px 18px}
  .nav-book{justify-content:center;padding:13px 20px}
}

/* ---- hero (full-bleed image · uppercase headline right · lead bottom-left) ---- */
.hero{position:relative;isolation:isolate;overflow:visible;z-index:1}
.hero-bg{
  position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-bg), linear-gradient(178deg, var(--accent-soft) 0%, var(--paper) 58%, var(--paper-2) 100%);
  background-size:cover,cover;
  background-position:center top,center top;
  background-repeat:no-repeat,no-repeat;
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* bottom: fade fully into paper so the next section continues seamlessly */
    linear-gradient(0deg, var(--paper) 0%, color-mix(in oklab, var(--paper) 62%, transparent) 16%, transparent 42%),
    /* top: paper whitespace that fades down into the scene (funnel shifted down) */
    linear-gradient(180deg, var(--paper) 0%, color-mix(in oklab, var(--paper) 72%, transparent) 13%, transparent 32%),
    radial-gradient(62% 46% at 82% 38%, color-mix(in oklab, var(--paper) 50%, transparent), transparent 66%);
}
.hero-inner{
  max-width:none;position:relative;z-index:2;
  min-height:clamp(640px,100vh,1040px);
  min-height:clamp(640px,100svh,1040px);
  display:grid;grid-template-rows:1fr auto;
  padding-block:clamp(104px,15vh,184px) clamp(40px,7vh,80px);
  gap:clamp(32px,7vh,72px);
}
.hero-title{
  align-self:center;justify-self:end;text-align:right;
  position:relative;top:clamp(56px,14vh,140px);
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,5.2vw,3.4rem);line-height:1.02;letter-spacing:-0.004em;color:var(--ink);
  text-wrap:balance;
}
.hero-foot{
  display:grid;grid-template-columns:1fr;justify-items:start;align-items:end;
  padding-top:clamp(14px,2vw,22px);
  transform:translateY(clamp(10px,2.4vh,30px));
}
.hero-lead-wrap{display:grid;grid-template-columns:1fr;gap:8px;align-items:start;max-width:340px}
.hero-ver{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.04em;color:var(--accent-deep);white-space:nowrap}
.hero-lead{font-size:0.95rem;line-height:1.55;color:var(--ink-soft)}

/* ---- hero liquid-glass overlays (floating search pills + booking card) ---- */
.hero-glass{
  position:absolute;z-index:1;left:50%;top:clamp(96px,15vh,172px);transform:translateX(-50%);
  width:min(820px,86%);
  display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:13px 15px;
  pointer-events:none;
}
.gpill{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:0.82rem;font-weight:400;color:var(--ink-soft);
  padding:8px 14px;border-radius:999px;
  background:color-mix(in oklab, var(--paper) 38%, transparent);
  border:1px solid color-mix(in oklab, var(--white) 58%, transparent);
  box-shadow:0 10px 26px -14px oklch(0.255 0.024 230 / 0.45), inset 0 1px 0 oklch(1 0 0 / 0.5);
  -webkit-backdrop-filter:blur(11px) saturate(140%);backdrop-filter:blur(11px) saturate(140%);
  animation:floaty 6s var(--ease) infinite;
}
.gpill svg{width:12px;height:12px;color:var(--accent);flex:none}
.gpill:nth-child(2){animation-duration:7s;animation-delay:-2s}
.gpill:nth-child(3){animation-duration:6.5s;animation-delay:-1s}
.gpill:nth-child(4){animation-duration:7.4s;animation-delay:-3s}
.gpill:nth-child(5){animation-duration:6.2s;animation-delay:-0.6s}

.hero-booked{
  position:absolute;z-index:1;left:50%;bottom:clamp(-56px,-4vh,-28px);transform:translateX(-50%);
  display:flex;align-items:center;gap:15px;
  padding:13px 18px;border-radius:16px;
  background:color-mix(in oklab, var(--paper) 46%, transparent);
  border:1px solid color-mix(in oklab, var(--white) 60%, transparent);
  box-shadow:0 18px 44px -22px oklch(0.255 0.024 230 / 0.5), inset 0 1px 0 oklch(1 0 0 / 0.55);
  -webkit-backdrop-filter:blur(15px) saturate(150%);backdrop-filter:blur(15px) saturate(150%);
  pointer-events:none;animation:floatC 7.5s var(--ease) infinite;
}
.hb-check{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-700);color:var(--white)}
.hb-check svg{width:18px;height:18px}
.hb-body{display:flex;flex-direction:column;line-height:1.3}
.hb-body b{font-size:0.9rem;font-weight:600;color:var(--ink)}
.hb-body span{font-size:0.76rem;color:var(--muted)}
.hb-num{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;padding-left:15px;border-left:1px solid color-mix(in oklab, var(--ink) 12%, transparent)}
.hb-num b{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:-0.02em;color:var(--ink)}
.hb-num span{font-size:0.7rem;color:var(--muted)}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes floatC{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}

/* ---- compliance / trust band (light, hero-aligned) ---- */
.band{
  background:linear-gradient(180deg,var(--paper) 0%,#d9e6ee 55%,var(--paper) 100%);
}
.band-inner{
  display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(30px,4vw,52px);padding-block:clamp(64px,9vw,108px);
}
.band-body{max-width:860px}
.band-ver{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.04em;color:var(--accent-deep);white-space:nowrap}
.band-title{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.03;letter-spacing:-0.004em;
  color:var(--ink);margin:16px 0 18px;text-wrap:balance;
}
.band-lead{color:var(--ink-soft);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6;max-width:68ch;text-align:justify;text-wrap:pretty;hyphens:auto}

/* shadcn-style trust cards: three compliance guarantees (bordered cards,
   icon tile, title, muted body). Uses the section's muted steel accent. */
.trust-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.trust-card{
  display:flex;flex-direction:column;gap:clamp(11px,1.1vw,15px);
  padding:clamp(20px,2.2vw,30px);
  border-radius:16px;                                   /* shadcn rounded-xl */
  border:1px solid var(--line);                         /* shadcn border */
  background:var(--card);                                /* shadcn bg-card */
  box-shadow:0 1px 2px oklch(0.255 0.024 230 / 0.05), 0 22px 46px -32px oklch(0.255 0.024 230 / 0.34);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.trust-card:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 2px oklch(0.255 0.024 230 / 0.06), 0 30px 58px -30px oklch(0.255 0.024 230 / 0.42);
  border-color:var(--accent-mid);
}
.trust-ico{
  width:clamp(42px,4vw,52px);height:clamp(42px,4vw,52px);border-radius:13px;
  display:grid;place-items:center;
  background:color-mix(in oklab,var(--accent) 12%,var(--card));
  border:1px solid var(--accent-mid);color:var(--accent-deep);
}
.trust-ico svg{width:clamp(21px,2.1vw,26px);height:clamp(21px,2.1vw,26px);stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trust-card h3{
  font-family:var(--serif);font-weight:600;letter-spacing:-0.01em;line-height:1.2;
  font-size:clamp(1.04rem,1.35vw,1.2rem);color:var(--ink);
}
.trust-card p{
  font-size:clamp(0.88rem,1vw,0.96rem);line-height:1.55;color:var(--ink-soft);
  text-wrap:pretty;margin:0;
}
/* pulsing ring, still used by the "How we build" step dots (.term-ring) */
@keyframes hipaaPulse{
  0%{transform:scale(1);opacity:0.5}
  70%{opacity:0}
  100%{transform:scale(1.34);opacity:0}
}

/* ---- stats ---- */
.stats-sec{padding-block:clamp(56px,7vw,96px)}
/* editorial split: two oversized numerals, a thin center rule, teal underline */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);max-width:760px;margin-inline:auto}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding-inline:clamp(8px,2vw,24px)}
.stat + .stat{border-left:1px solid var(--line)}
.stat-n{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(3rem,7vw,5rem);letter-spacing:-0.035em;color:var(--ink);line-height:1}
.stat-n small{font-size:0.36em;font-weight:500;color:var(--accent-700);margin-left:4px;letter-spacing:0}
.stat-n::after{content:"";display:block;width:clamp(40px,5vw,56px);height:3px;border-radius:2px;margin:clamp(14px,1.6vw,18px) auto 0;background:var(--accent-700);opacity:0.9}
.stat-l{display:block;margin-top:clamp(12px,1.4vw,16px);font-size:0.95rem;color:var(--muted);max-width:22ch}

/* ---- selected work ---- */
.work-title{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.02;letter-spacing:-0.01em;
  color:var(--ink);text-wrap:balance;margin-top:18px;
}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.work-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,1.8vw,24px);box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.work-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent-mid)}
.work-thumb{position:relative;aspect-ratio:5/4;border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:clamp(18px,2vw,24px);border:1px solid var(--line)}
.thumb-a{background:linear-gradient(150deg,oklch(0.95 0.040 222),var(--card))}
.thumb-b{background:linear-gradient(150deg,oklch(0.95 0.036 200),var(--card))}
.thumb-c{background:linear-gradient(150deg,oklch(0.95 0.044 244),var(--card))}
.thumb-mark{position:relative;z-index:1;font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.4vw,2.1rem);letter-spacing:0.02em;color:var(--accent-deep)}
.work-k{display:inline-block;font-family:var(--sans);font-weight:600;font-size:0.78rem;letter-spacing:0.01em;color:var(--accent-deep)}
.work-card h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:-0.015em;margin:8px 0 10px;color:var(--ink)}
.work-card p{font-size:0.94rem;color:var(--ink-soft);line-height:1.55}

/* ---- promise / plan cards ---- */
/* promise / terms: zigzag of three radiating dots (no cards) */
/* cap the top padding on wide screens (the .section default hits ~132px on a
   laptop); mobile/tablet stay at their current ~72-77px floor */
#work{padding-top:clamp(72px,10vw,80px);padding-bottom:clamp(36px,5vw,72px)}
.promise-sec{background:linear-gradient(180deg,var(--paper) 0%,#d9e6ee 50%,var(--paper) 100%);padding-top:clamp(36px,5vw,72px)}
.terms-head{margin-bottom:clamp(44px,5.5vw,72px)}
.terms-title{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.03;letter-spacing:-0.004em;
  color:var(--ink);text-wrap:balance;
}
.terms-intro{
  margin-top:clamp(12px,1.4vw,18px);max-width:64ch;
  color:var(--ink-soft);font-size:clamp(0.95rem,1.1vw,1.05rem);line-height:1.55;text-wrap:pretty;
}
.terms{
  --dot:clamp(60px,7vw,80px);
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-items:start;gap:clamp(16px,2.2vw,32px);
}
/* W-zigzag across four: drop the 2nd and 4th terms by one dot-height (the zig
   svg is child 1, so those are the 3rd and 5th children) */
.term:nth-child(3),
.term:nth-child(5){margin-top:var(--dot)}
.terms-zig{position:absolute;top:0;left:0;width:100%;height:calc(var(--dot) * 2);z-index:0}
.terms-zig polyline{
  fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-dasharray:3 6;opacity:0.5;
  animation:zigFlow 1.1s linear infinite;
}
@keyframes zigFlow{to{stroke-dashoffset:-9}}
.term{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.term-top{display:flex;justify-content:center;margin-bottom:clamp(16px,1.8vw,22px)}
.term-dot{
  position:relative;width:var(--dot);height:var(--dot);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,var(--card),var(--accent-soft));
  border:1px solid var(--accent-mid);box-shadow:0 20px 48px -26px var(--accent-deep);
}
.term-ic{width:clamp(28px,3.4vw,36px);height:clamp(28px,3.4vw,36px);color:var(--accent-deep)}
.term-num{
  position:absolute;top:-5px;right:-5px;z-index:2;
  min-width:23px;height:23px;padding:0 5px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-deep);color:var(--white);
  font-family:var(--sans);font-weight:600;font-size:0.72rem;line-height:1;
  box-shadow:0 4px 12px -4px var(--accent-deep);
}
.term-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:hipaaPulse 3.2s var(--ease) infinite}
.term-ring.r2{animation-delay:1.6s}
.term:nth-child(3) .term-ring{animation-delay:.5s}
.term:nth-child(3) .term-ring.r2{animation-delay:2.1s}
.term:nth-child(4) .term-ring{animation-delay:1s}
.term:nth-child(4) .term-ring.r2{animation-delay:2.6s}
/* each step's copy sits in a frosted-glass card (shares the Select Work pane
   recipe) so the three steps read as polished, staggered stops on the zigzag */
.term-card{
  position:relative;isolation:isolate;width:100%;max-width:420px;margin-inline:auto;
  display:flex;flex-direction:column;gap:8px;text-align:left;
  padding:clamp(15px,1.7vw,20px) clamp(16px,1.8vw,22px);border-radius:12px;
  background:color-mix(in oklab,var(--card) 66%,transparent);
  border:1px solid color-mix(in oklab,var(--white) 60%,transparent);
  box-shadow:0 14px 34px -22px var(--accent-deep),inset 0 1px 0 oklch(1 0 0 / 0.5);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.term-card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,oklch(1 0 0 / 0.45),transparent 46%);
}
.term-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px -24px var(--accent-deep);border-color:var(--accent-mid)}
.term-k{font-family:var(--sans);font-weight:600;font-size:0.78rem;letter-spacing:0.02em;text-transform:uppercase;color:var(--accent-deep)}
.term-p{font-size:0.96rem;line-height:1.55;color:var(--ink-soft);text-align:left;text-wrap:pretty;margin:0}


/* ---- team ---- */
.team-head{margin-bottom:clamp(40px,5vw,64px)}
.team-title{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.03;letter-spacing:-0.004em;
  color:var(--ink);text-wrap:balance;text-align:right;
}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.5vw,40px)}
.member{display:flex;gap:clamp(18px,2vw,26px);align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,2vw,28px);box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.member:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent-mid)}
.m-photo-wrap{flex:none;width:clamp(96px,11vw,128px);aspect-ratio:1;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.m-photo{width:100%;height:100%;object-fit:cover;display:block}
.m-body{min-width:0}
.m-name{font-family:var(--serif);font-weight:600;font-size:1.25rem;letter-spacing:-0.01em;color:var(--ink);text-transform:uppercase}
.m-role{font-family:var(--sans);font-weight:600;font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent-deep);margin-top:5px}
.m-bio{font-size:0.92rem;line-height:1.55;color:var(--ink-soft);margin-top:13px}
.m-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:0.86rem;font-weight:600;color:var(--accent-deep)}
.m-link svg{width:17px;height:17px}
.m-link:hover{color:var(--accent)}

/* ---- FAQ: hairline-divided accordion (pure CSS details/summary) ---- */
.faq-head{margin-bottom:clamp(30px,4vw,52px)}
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,32px);
  padding:clamp(18px,2.3vw,28px) 0;
  font-family:var(--sans);font-weight:600;line-height:1.35;
  font-size:clamp(1rem,1.35vw,1.16rem);color:var(--ink);
  transition:color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent-deep)}
/* circled plus that becomes a minus when open */
.faq-icon{position:relative;flex:none;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--accent-mid);transition:border-color .2s var(--ease)}
.faq-item summary:hover .faq-icon{border-color:var(--accent)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;
  width:9px;height:1.6px;border-radius:2px;background:var(--accent-deep);transform:translate(-50%,-50%)}
.faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s var(--ease)}
.faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(0)}
.faq-a{padding:0 0 clamp(20px,2.4vw,28px);max-width:660px}
.faq-a p{color:var(--ink-soft);font-size:clamp(0.95rem,1.1vw,1.02rem);line-height:1.6;text-wrap:pretty;margin:0}
@media (prefers-reduced-motion:reduce){.faq-icon::after{transition:none}}

/* ---- CTA (concise, centered, colorful — animated heartbeat) ---- */
.audit{position:relative;overflow:hidden;text-align:center;padding-block:clamp(60px,8vw,104px)}
/* single brand-green wash (same green as the "How we build" section) */
.audit::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(960px,96%);height:min(420px,90%);border-radius:50%;
  background:radial-gradient(ellipse at center,var(--accent-soft),transparent 68%);
  filter:blur(18px);
}

.audit-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}

/* live status pill */
.audit-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent-deep);background:color-mix(in oklab,var(--accent-soft) 82%,transparent);
  border:1px solid var(--accent-mid);padding:6px 14px;border-radius:999px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.audit-live{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:auditPing 1.8s ease-out infinite}
@keyframes auditPing{0%{box-shadow:0 0 0 0 rgba(92,124,152,0.55)}70%,100%{box-shadow:0 0 0 7px rgba(92,124,152,0)}}

.audit-line{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.7rem,3.8vw,3rem);line-height:1.1;letter-spacing:-0.01em;
  color:var(--nav-dark);margin:clamp(16px,2vw,22px) 0 0;max-width:min(900px,92%);text-wrap:balance;
}
.audit-line em{font-style:normal;color:var(--accent-deep)}
.audit-sub{
  font-family:var(--sans);font-size:clamp(0.98rem,1.4vw,1.12rem);line-height:1.6;
  color:var(--ink-soft);max-width:min(760px,92%);margin:clamp(14px,1.8vw,20px) 0 0;text-wrap:pretty;
}

/* animated heartbeat / ECG trace */
.audit-ecg{width:min(680px,92%);height:clamp(60px,9vw,92px);margin:clamp(16px,2.2vw,28px) 0 clamp(4px,1vw,10px)}
.audit-ecg svg{width:100%;height:100%;overflow:visible}
.ecg-base{fill:none;stroke:color-mix(in oklab,var(--line) 90%,transparent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.ecg-live{
  fill:none;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:150 1300;stroke-dashoffset:1450;
  filter:drop-shadow(0 0 6px color-mix(in oklab,var(--accent) 55%,transparent));
  animation:ecgSweep 2.8s linear infinite;
}
@keyframes ecgSweep{to{stroke-dashoffset:0}}

.audit .btn{margin-top:clamp(20px,2.6vw,30px)}

@media (prefers-reduced-motion:reduce){
  .audit-live{animation:none}
  .ecg-live{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
}

/* ---- footer (dark green, same as the floating navbar) ---- */
.footer{background:var(--nav-dark);color:var(--on-deep);padding-block:56px 30px}
.footer .wordmark{color:var(--on-deep);animation:none}
.footer-inner{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;padding-bottom:28px}
.footer-brand{max-width:300px}
.footer-brand p{margin-top:14px;color:var(--on-deep-soft);font-size:0.95rem;line-height:1.55}
.footer-cols{display:flex;gap:64px;text-transform:uppercase}
.fcol{display:flex;flex-direction:column;gap:11px}
.fcol-h{font-family:var(--sans);font-size:1.05rem;font-weight:600;letter-spacing:0;color:var(--on-deep);margin-bottom:6px}
.fcol a{font-size:0.95rem;line-height:1.55;color:var(--on-deep-soft);transition:color .2s;text-transform:none;overflow-wrap:anywhere}
.fcol a:hover{color:var(--accent-bright)}
.footer-base{display:flex;justify-content:space-between;align-items:center;padding-top:0;font-size:0.84rem;color:var(--on-deep-soft);flex-wrap:wrap;gap:10px}
.footer-base a{color:var(--accent-bright);font-weight:500}

/* ---- entrance animation ---- */
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reveal{animation:rise .8s var(--ease) both}
.reveal.d1{animation-delay:.08s}
.reveal.d2{animation-delay:.16s}
.reveal.d3{animation-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ---- responsive ---- */
@media (max-width:920px){
  .stat-l{max-width:24ch}
  /* tablet: nudge the funnel image back down a touch. The nudge is a
     constant so the photo's bottom edge sits a known 64px above the box
     bottom, and the mask fades the photo out just before that edge: no
     hard image seam against the next section (the laptop look). */
  .hero-bg{
    background-position:center top,center top;
    -webkit-mask:linear-gradient(to bottom,#000 calc(100% - 230px),transparent calc(100% - 70px));
    mask:linear-gradient(to bottom,#000 calc(100% - 230px),transparent calc(100% - 70px));
  }
  /* blend the cropped hero image into the next section: a fixed, opaque-at-the-seam
     bottom fade (px-based so it doesn't shrink with the shorter hero) */
  .hero-scrim{
    background:
      linear-gradient(to top, var(--paper) 0, var(--paper) 40px,
        color-mix(in oklab, var(--paper) 60%, transparent) 220px,
        color-mix(in oklab, var(--paper) 28%, transparent) 360px, transparent 480px),
      linear-gradient(180deg, var(--paper) 0%, color-mix(in oklab, var(--paper) 72%, transparent) 12%, transparent 30%);
  }
}
@media (max-width:760px){
  .nav-inner{padding:8px 8px 8px 18px}
  /* mobile: the collage becomes a normal flow stack (funnel zone, booked
     card, headline, lead). Row 1 reserves the image zone: the background is
     height-fitted on portrait screens, so the funnel's base always lands at
     the same svh fraction and the booked card lands on it like the laptop
     view. svh is the single height basis, nothing is offset in vh, and the
     hero never bleeds content into the next section. */
  .hero-inner{
    min-height:clamp(640px,100svh,900px);
    /* row 1 is the funnel's footprint. The image box is 72svh tall and
       height-fitted, and the podium bottom sits at 81% of the source
       image, so on screen it lands near 52svh. Row 1 parks the booked
       card just under it, and the whole stack (image, card, headline,
       lead) budgets to ~100svh: no scrolling to see the hero on common
       phones. */
    grid-template-rows:clamp(285px,52svh,470px) auto auto;gap:0;
    padding-block:clamp(80px,calc(10svh + 24px),112px) 12px;
  }
  .hero-title{
    justify-self:start;text-align:left;top:auto;
    font-size:clamp(2.1rem,8.5vw,3rem);
    margin-top:clamp(32px,6svh,52px);
  }
  .hero-foot{justify-items:start;transform:none;padding-top:clamp(10px,1.8svh,16px)}
  .hero-booked{
    position:static;justify-self:center;align-self:end;transform:none;
    width:max-content;max-width:94%;padding:12px 20px;gap:12px;
    animation:floaty 7.5s var(--ease) infinite;
  }
  /* mobile: zoom the funnel out by shrinking the image box (production look).
     cover fills the shorter box edge-to-edge so the bottom mask can fade
     seamlessly into the page — no hard rectangle from a size/height mismatch. */
  .hero-bg{
    top:0;bottom:auto;height:clamp(390px,65svh,540px);
    background-size:cover,cover;
    background-position:center 28px,center top;
    -webkit-mask:linear-gradient(to bottom,#000 calc(100% - 155px),transparent calc(100% - 68px));
    mask:linear-gradient(to bottom,#000 calc(100% - 155px),transparent calc(100% - 68px));
  }
  /* mobile: taller bottom fade so the header/subtext zone melts cleanly to paper */
  .hero-scrim{
    background:
      linear-gradient(to top, var(--paper) 0, var(--paper) 40px,
        color-mix(in oklab, var(--paper) 72%, transparent) 230px,
        color-mix(in oklab, var(--paper) 32%, transparent) 380px, transparent 500px),
      linear-gradient(180deg, var(--paper) 0%, color-mix(in oklab, var(--paper) 72%, transparent) 12%, transparent 30%);
  }
  /* mobile: keep just the top 2 small pills (4 & 5 already hidden above) */
  .gpill:nth-child(3){display:none}
  .hero-glass{top:clamp(72px,11svh,116px);width:min(320px,90%);gap:8px 9px}
  .gpill{font-size:0.7rem;padding:6px 11px;gap:5px}
  .gpill svg{width:11px;height:11px}
  .hb-num{padding-left:12px}
  .hb-num b{font-size:1.3rem}
  /* keep the card title on one line; the trimmed gaps above make it fit */
  .hb-body b{white-space:nowrap}
  .work-grid,.team-grid{grid-template-columns:1fr}
  .team-title{text-align:left}
  /* terms: stack vertically with a centered connector instead of the zigzag */
  .terms{grid-template-columns:1fr;gap:clamp(34px,8vw,48px)}
  .terms-zig{display:none}
  .term:nth-child(3),.term:nth-child(5){margin-top:0}
  .terms::before{content:"";position:absolute;top:clamp(28px,9vw,40px);bottom:clamp(28px,9vw,40px);left:50%;
    border-left:1.5px dashed var(--accent);opacity:0.4}
  .term-top{margin-bottom:clamp(14px,3.5vw,20px)}
  .band-inner{gap:clamp(28px,7vw,40px)}
  .trust-grid{grid-template-columns:1fr;gap:14px}
  .footer-cols{gap:40px;display:grid;grid-template-columns:1fr 1fr;width:100%}
}
/* tablet (761–920px): same stacked hero as mobile so the booked card never
   floats over the funnel when the viewport shrinks in inspect mode */
@media (min-width:761px) and (max-width:1000px){
  /* four zigzag pointers get cramped in one row on tablets: use a 2x2 grid,
     no zig, level offsets */
  .terms{grid-template-columns:repeat(2,1fr);row-gap:clamp(30px,5vw,44px)}
  .terms-zig{display:none}
  .term:nth-child(3),.term:nth-child(5){margin-top:0}
}
@media (min-width:761px) and (max-width:920px){
  .hero-inner{
    min-height:clamp(640px,100svh,900px);
    grid-template-rows:clamp(285px,52svh,470px) auto auto;gap:0;
    padding-block:clamp(80px,calc(10svh + 24px),112px) 12px;
  }
  .hero-title{
    justify-self:start;text-align:left;top:auto;
    font-size:clamp(2.1rem,7.5vw,2.8rem);
    margin-top:clamp(28px,5svh,44px);
  }
  .hero-foot{justify-items:start;transform:none;padding-top:clamp(10px,1.8svh,16px)}
  .hero-booked{
    position:static;justify-self:center;align-self:end;transform:none;
    width:max-content;max-width:94%;padding:12px 20px;gap:12px;
    animation:floaty 7.5s var(--ease) infinite;
  }
  .hero-bg{
    top:0;bottom:auto;height:clamp(400px,62svh,560px);
    background-size:cover,cover;
    background-position:center 28px,center top;
    -webkit-mask:linear-gradient(to bottom,#000 calc(100% - 230px),transparent calc(100% - 70px));
    mask:linear-gradient(to bottom,#000 calc(100% - 230px),transparent calc(100% - 70px));
  }
  .hero-glass{top:clamp(72px,11svh,116px);width:min(360px,88%);gap:8px 10px}
}
/* tablet + small-laptop (≤1300px): the funnel is cover-cropped, so the two
   lowest pills (4 & 5) fall outside the visible crop — keep just the top 3 */
@media (max-width:1300px){
  .gpill:nth-child(4),.gpill:nth-child(5){display:none}
}
/* small-laptop band (921–1300px): hero is still cover-cropped shorter than full
   desktop — lift the booking card off the bottom and use a px-based blend so the
   image melts into the next section instead of cutting hard */
@media (min-width:921px) and (max-width:1300px){
  .hero-booked{bottom:clamp(16px,5vh,72px)}
  .hero-scrim{
    background:
      linear-gradient(to top, var(--paper) 0, var(--paper) 40px,
        color-mix(in oklab, var(--paper) 60%, transparent) 220px,
        color-mix(in oklab, var(--paper) 28%, transparent) 380px, transparent 520px),
      linear-gradient(180deg, var(--paper) 0%, color-mix(in oklab, var(--paper) 72%, transparent) 12%, transparent 30%);
  }
}
@media (max-width:430px){
  .stats-grid{grid-template-columns:1fr;max-width:320px}
  /* stacked: swap the center rule for a divider above the second stat */
  .stat + .stat{border-left:none;border-top:1px solid var(--line);padding-top:clamp(24px,7vw,32px)}
  .hero-lead-wrap{gap:6px}
  .footer-inner{flex-direction:column;gap:32px}
  .footer-cols{grid-template-columns:1fr;gap:28px}
  /* keep the nav comfortably inside narrow phones */
  .wordmark{letter-spacing:0.12em}
  .nav-link{padding:8px 12px}
  .nav-book{padding:9px 15px}
}

/* ============================================================
   LOWER SECTIONS · consistent medical blue (not ocean-green teal)
   ------------------------------------------------------------
   From the compliance band down, remap the teal accent family to
   the orbit's muted STEEL medical-blue, at low prominence. Scoped
   to these sections, so the hero / nav / one-partner keep their
   accent. accent-soft becomes a neutral light so section-tint
   gradients no longer read greenish.
   ============================================================ */
#compliance,
.stats-sec,
#promise,
.audit{
  --accent:       #5c7c98;   /* was #0090b3 ocean teal  -> steel 600 */
  --accent-700:   #496880;   /* was #005c7c             -> steel 700 */
  --accent-deep:  #33526a;   /* was #004764             -> steel 800 */
  --accent-bright:#8ba7bd;   /* was #28cbf3 cyan        -> steel 400 */
  --accent-mid:   #c5d6e2;   /* was #c7eaf6             -> steel 200 */
  --accent-soft:  #eef4f8;   /* was #e4f7fe cyan tint   -> neutral light */
}

/* ============================================================
   LEGAL PAGES · terms.html / privacy.html — clean prose layout
   using the site tokens; sits below the fixed floating nav.
   ============================================================ */
.legal{
  max-width:820px;margin:0 auto;
  padding:clamp(120px,15vh,176px) var(--gutter) clamp(72px,10vw,132px);
}
.legal-head{
  margin-bottom:clamp(30px,4vw,52px);
  padding-bottom:clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--line);
}
.legal-title{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.2rem);line-height:1.03;letter-spacing:-0.004em;color:var(--ink);
  text-wrap:balance;
}
.legal-meta{
  margin-top:14px;font-family:var(--sans);font-size:clamp(0.88rem,1vw,0.95rem);font-weight:500;
  letter-spacing:0;color:var(--muted);
}
.legal h2{
  font-family:var(--serif);font-weight:600;letter-spacing:-0.01em;
  font-size:clamp(1.15rem,1.9vw,1.5rem);color:var(--ink);
  margin:clamp(30px,3.6vw,46px) 0 12px;
}
.legal p{
  color:var(--ink-soft);font-size:clamp(0.95rem,1.1vw,1.02rem);line-height:1.7;
  margin:0 0 14px;text-wrap:pretty;
}
.legal ul{margin:0 0 16px;padding-left:1.35em;display:flex;flex-direction:column;gap:9px}
.legal li{color:var(--ink-soft);font-size:clamp(0.95rem,1.1vw,1.02rem);line-height:1.6}
.legal li::marker{color:var(--accent)}
.legal a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--accent)}
.legal strong{color:var(--ink);font-weight:600}