/* ============================================================
   Praventa Health — REDESIGN v2 ("editorial atelier")
   Light ground, rich saturated purple family, brand amber kept as
   the single intense colour moment. Tight section rhythm. Same
   class names as the build, so every inherited page picks this up.
   ============================================================ */
:root{
  /* light grounds */
  --paper:#ffffff;
  --paper-2:#f6f2fc;      /* lavender wash */
  --paper-3:#ece2f7;      /* deeper wash */
  --wash:#f8f4ff;

  /* ink */
  --ink:#241033;
  --ink-2:#463154;
  --ink-dim:#6f6280;
  --hair:rgba(36,16,51,.13);
  --hair-2:rgba(36,16,51,.22);

  /* deep purple family — measured on white:
     plum 11.60:1 · peri 10.56:1 · violet 10.40:1 · lav 6.55:1 · lav-2 5.07:1 */
  --lav:#7838c9;
  --lav-2:#8850d4;
  --violet:#56179f;
  --peri:#3a22aa;
  --plum:#631561;
  --violet-deep:#3a0869;

  /* the one intense moment */
  --orange:#eb6919;        /* fills, bars, gradients only */
  --orange-light:#fbb040;  /* fills only — 1.84:1 as text on light */
  --orange-ink:#b4530f;    /* readable amber for text: 5.0:1 on white */

  /* legacy aliases used by inherited pages */
  --purple-deep:#241033;
  --lilac:var(--paper-2);
  --text:var(--ink);
  --text-dim:var(--ink-dim);
  --line:var(--hair);
  --line-2:var(--hair-2);
  --surface:rgba(255,255,255,.7);

  --grad-text-purple:linear-gradient(120deg,#3a22aa 0%,#7838c9 100%);
  --grad-text-purple-alt:linear-gradient(120deg,#56179f 0%,#8850d4 100%);
  --grad-text-orange:linear-gradient(120deg,#eb6919 0%,#fbb040 100%);
  --grad-btn:linear-gradient(120deg,#eb6919 0%,#fbb040 100%);
  --grad-section:linear-gradient(160deg,#ece2f7 0%,#f8f4ff 60%,#fff3e6 100%);
  --grad-ring:linear-gradient(135deg,#56179f 0%,#fbb040 100%);

  --container:1200px;
  --measure:64ch;
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:"Raleway",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.75 Lato,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3{margin:0;font-family:var(--serif)}
p{margin:0}
::selection{background:#f6d9bd;color:var(--ink)}

.container{max-width:var(--container);margin:0 auto;padding:0 32px;width:100%}
.container-wide{max-width:1560px;margin:0 auto;padding:0 40px;width:100%}

/* display type — large and LIGHT, the editorial move */
.display{font-family:var(--serif);font-weight:300;letter-spacing:-.035em;line-height:.98;color:var(--ink)}
.gt{background-image:var(--grad-text-purple);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-weight:inherit}
.gt-orange{background-image:var(--grad-text-orange)}
.gt-purple-alt{background-image:var(--grad-text-purple-alt)}
em.ital{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.02em}

/* editorial section marker: 01 —— Label */
.marker{display:flex;align-items:center;gap:16px;font:700 11px/1 Lato,sans-serif;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.marker .n{color:var(--orange-ink);font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:0}
.marker .rule{flex:1;height:1px;background:var(--hair)}
.marker.center{justify-content:center}
.marker.center .rule{max-width:90px;flex:0 0 90px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;border-radius:99px;font-family:Lato,sans-serif;
  font-weight:700;line-height:1;transition:.4s var(--ease)}
/* ink on amber, not white: white runs 1.84:1 at the light end of the gradient,
   ink holds 5.5–9.5:1 across it and reads more editorial besides */
.btn-grad{padding:17px 36px;font-size:15px;color:var(--ink);background-image:var(--grad-btn);border:0;
  box-shadow:0 10px 30px rgba(235,105,25,.24)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(235,105,25,.34)}
.btn-outline-white,.btn-learn{padding:16px 34px;font-size:15px;color:var(--ink);
  border:1px solid var(--hair-2);background:transparent}
.btn-outline-white:hover,.btn-learn:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn .arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--hair)}
.site-header .inner{max-width:1560px;margin:0 auto;padding:11px 40px;display:flex;align-items:center;
  justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:27px;height:27px}
.wordmark{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.13em;color:var(--ink);
  text-transform:uppercase;white-space:nowrap}
.wordmark b{font-weight:700}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font:400 15px/1 Lato,sans-serif;color:var(--ink-2);padding:8px 9px;border-radius:99px;transition:.25s var(--ease)}
.nav a:hover{color:var(--ink);background:var(--paper-2)}
.nav a.active{color:var(--ink);position:relative}
.nav a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1.5px;
  background-image:var(--grad-btn)}
.nav .has-sub{position:relative;display:flex;align-items:center;gap:4px;cursor:pointer}
.nav .caret{width:7px;height:7px;border-right:1.5px solid var(--ink-dim);border-bottom:1.5px solid var(--ink-dim);
  transform:rotate(45deg) translateY(-2px)}
.submenu{position:absolute;top:100%;left:-8px;margin-top:11px;min-width:320px;background:#fff;
  border:1px solid var(--hair);border-radius:6px;padding:10px;box-shadow:0 30px 70px rgba(36,16,51,.13);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.28s var(--ease)}
.nav .has-sub:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.submenu a{display:block;padding:11px 16px;font-size:14px;color:var(--ink-2);border-radius:4px}
.submenu a:hover{background:var(--paper-2);color:var(--ink)}
.header-cta{padding:9px 22px;font-size:13px;color:#fff;background:var(--ink);border-radius:99px;
  font-weight:700;line-height:1;display:inline-block;transition:.3s var(--ease)}
.header-cta:hover{background:var(--orange)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:24px;height:1.5px;background:var(--ink);margin:6px 0}

/* ---------- editorial hero ---------- */
/* The copy sits ON the video, not below it — the headline must be readable the
   moment the page opens. .hero-art fills the stage; .hero-copy floats above it. */
.hero-v{position:relative;overflow:hidden;background:var(--paper);
  min-height:clamp(560px,84svh,900px);display:flex;align-items:center}
.hero-art{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:var(--paper-3)}
.hero-art video,.hero-art img{width:100%;height:100%;object-fit:cover}
/* three clips stacked; only .is-active is visible, crossfaded by site.js */
.hero-art .hero-clip{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.hero-art .hero-clip.is-active{opacity:1}
/* Scrim. The horizontal pass keeps ink type legible over whatever the clip is
   doing behind it; the vertical pass lands the band on --paper for the ticker.
   Opacities are measured against all three clips — see CLAUDE.md before easing them. */
.hero-art::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.94) 40%,
                    rgba(255,255,255,.86) 58%,rgba(255,255,255,.55) 72%,
                    rgba(255,255,255,.18) 84%,rgba(255,255,255,0) 94%),
    linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 26%,
                    rgba(255,255,255,.06) 68%,rgba(255,255,255,.62) 88%,var(--paper) 100%)}
.hero-copy{position:relative;z-index:3;width:100%;max-width:1560px;margin:0 auto;padding:0 40px}
/* cycle indicator — the only thing that changes with the artwork */
.hero-cycle{display:flex;align-items:center;gap:14px;margin-bottom:22px;
  font:700 11px/1 Lato,sans-serif;letter-spacing:.22em;text-transform:uppercase}
.hero-cycle .cyc-n{color:var(--orange-ink);font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.04em}
.hero-cycle .cyc-rule{width:52px;height:1px;background:var(--hair-2)}
.hero-cycle .cyc-label{color:var(--ink-2);transition:opacity .5s var(--ease)}
.hero-cycle.swapping .cyc-n,.hero-cycle.swapping .cyc-label{opacity:0}
.hero-cycle .cyc-n{transition:opacity .5s var(--ease)}
.hero-copy h1{font-family:var(--serif);font-weight:300;font-size:clamp(39px,7.1vw,105px);line-height:.94;
  letter-spacing:-.045em;color:var(--ink);max-width:15ch}
/* The hero H1 sits over live video, not paper. The light end of the standard
   purple gradient (#8B4FD9) measured 1.47:1 against the footage — this deeper
   pair holds up. Do not swap it back to var(--grad-text-purple). */
.hero-copy h1 .gt{font-weight:300;
  background-image:linear-gradient(120deg,#33199f 0%,#56179f 100%)}
.hero-copy h1 em.ital{font-size:.92em}
.hero-meta{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end;margin-top:40px;
  padding-top:28px;border-top:1px solid var(--hair)}
.hero-meta .lede{font-size:17.5px;line-height:1.72;color:var(--ink-2);max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start}
@media (min-width:1100px){.hero-actions{justify-content:flex-end}}

/* ---------- running ticker (hairline, quiet) ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:20px 0;background:var(--paper)}
.ticker .track{display:flex;gap:52px;width:max-content;animation:slide 44s linear infinite}
.ticker span{font:400 13px/1 Lato,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);display:flex;align-items:center;gap:52px;white-space:nowrap}
.ticker span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--orange-ink)}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker:hover .track{animation-play-state:paused}

/* ---------- sections ---------- */
.section{padding:64px 0;position:relative}
.section-sm{padding:48px 0}
.band-light{background:var(--paper-2)}
.section-purple{background-image:var(--grad-section)}
.section-head,.head-center{max-width:960px;margin:0 auto 52px;text-align:center}
.section-head h2,.head-center h2,.cta h2,.careers h2,.feature h2,.split h2,.split-chart h2,
.theme h2,.audience h2,.popint-head h2{font-family:var(--serif);font-weight:300;letter-spacing:-.035em;line-height:1.06;
  /* one heading scale across the whole site — see CLAUDE.md before changing */
  font-size:clamp(26px,3.1vw,42px);color:var(--ink)}
.section-head p,.head-center .lede,.head-center .lede p{color:var(--ink-2);font-size:18px;line-height:1.75;
  max-width:60ch;margin-left:auto;margin-right:auto}
.head-center .lede{margin-top:26px}
.head-center .lede p + p{margin-top:18px}
.head-center h3{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink)}
.bar,.head-center .bar{width:52px;height:2px;background-image:var(--grad-btn);margin:26px auto 0;border-radius:0}
.eyebrow,.theme-label{display:inline-flex;align-items:center;gap:10px;font:700 11px/1 Lato,sans-serif;
  letter-spacing:.22em;text-transform:uppercase;color:var(--orange-ink);background:none;border:0;padding:0}

/* statement type — the artistic pull-quote move */
.statement{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.1vw,42px);line-height:1.06;
  letter-spacing:-.035em;color:var(--ink);max-width:20ch}
.statement.center{margin:0 auto;text-align:center;max-width:22ch}
.statement em.ital{color:var(--violet)}

/* ---------- interior hero ---------- */
.page-hero{position:relative;padding:76px 0 48px;border-bottom:1px solid var(--hair);
  background-image:radial-gradient(60% 90% at 12% 0%,rgba(86,23,159,.22),transparent 70%),
                   radial-gradient(50% 80% at 88% 10%,rgba(235,105,25,.13),transparent 70%);
  text-align:left;overflow:hidden}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{margin-top:26px;font-family:var(--serif);font-weight:300;letter-spacing:-.04em;line-height:.98;
  font-size:clamp(38px,6.6vw,88px);color:var(--ink);max-width:16ch}
.page-hero p{color:var(--ink-2);max-width:56ch;margin-left:0;margin-right:0}
.page-hero .eyebrow{margin-bottom:0}
/* interior hero with a photographic / screenshot backdrop.
   Scrim opacities are measured against the actual image — see CLAUDE.md. */
.page-hero.has-backdrop{overflow:hidden}
.page-hero .hero-backdrop{position:absolute;inset:0;z-index:0}
.page-hero .hero-backdrop img{width:100%;height:100%;object-fit:cover;object-position:center}
.page-hero .hero-backdrop::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.92) 34%,
                    rgba(255,255,255,.78) 56%,rgba(255,255,255,.58) 78%,rgba(255,255,255,.50) 100%),
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.22) 38%,
                    rgba(255,255,255,.40) 76%,var(--paper) 100%)}

/* ---------- editorial feature rows (no boxes) ---------- */
.feature,.split,.split-chart,.audience .head,.theme .grid{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.theme .grid{grid-template-columns:.9fr 1.1fr;align-items:start}
.feature-media > img.shot,.split img,.audience .head img,.theme .media img{width:100%;border-radius:0;
  object-fit:cover;filter:saturate(.94)}
.theme .media img{aspect-ratio:4/5}
.split.reverse .media{order:2}
/* stacked photo/copy rows were flush against each other */
.split + .split{margin-top:72px}
/* the services index runs eight of these — its section titles were display-sized */
/* services INDEX only — the detail pages follow the site-wide heading scale.
   data-page="services" is shared by all nine, so it cannot scope this. */

.feature .body,.split .body,.split-chart .body,.audience .body,.theme .intro{
  margin-top:24px;font-size:17px;line-height:1.8;color:var(--ink-2);max-width:56ch}
.feature .body p + p,.split .body p + p,.split-chart .body p + p,.audience .body p + p{margin-top:20px}
.divider{display:flex;align-items:center;gap:6px;margin-top:22px}
.divider i{width:3px;height:3px;border-radius:50%;background:var(--orange-light)}
.divider b{width:56px;height:2px;background-image:var(--grad-btn);margin-left:4px}
.deco-dots,.deco-steth{display:none}
.theme{padding:62px 0}
.theme + .theme{border-top:1px solid var(--hair)}
.theme .media{position:sticky;top:120px}

/* offset / overlap — breaks the grid deliberately */
.offset-up{margin-top:-90px}
.bleed-right{margin-right:calc((100vw - min(100vw,var(--container)))/-2)}
.bleed-left{margin-left:calc((100vw - min(100vw,var(--container)))/-2)}
/* direct children of <main> are already full width — 100vw would add the scrollbar */
.full-bleed{width:100%;margin-left:0}
.container .full-bleed{width:100vw;margin-left:calc(50% - 50vw);max-width:100vw}
.full-bleed img,.full-bleed video{width:100%;height:clamp(320px,52vh,620px);object-fit:cover}

/* ---------- editorial index list (replaces card grids) ---------- */
.index-list{border-top:1px solid var(--hair);margin-top:48px}
.index-row{display:grid;grid-template-columns:80px 1.05fr 1.35fr;gap:40px;padding:32px 0;
  border-bottom:1px solid var(--hair);align-items:start;transition:.4s var(--ease);position:relative}
.index-row::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;
  background-image:var(--grad-btn);transition:width .6s var(--ease)}
.index-row:hover::after{width:100%}
.index-row:hover .idx-title{color:var(--violet)}
.index-row .idx-n{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--orange-ink);padding-top:6px}
.idx-title{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.12;
  letter-spacing:-.025em;color:var(--ink);transition:color .4s var(--ease)}
.idx-body{font-size:16px;line-height:1.8;color:var(--ink-2)}
.idx-body ul{margin:16px 0 0;padding:0;list-style:none;columns:2;column-gap:32px}
.idx-body li{font-size:15px;line-height:1.9;color:var(--ink-dim);break-inside:avoid}

/* ---------- numerals as artwork ---------- */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid var(--hair)}
.figure{padding:34px 28px 32px;border-right:1px solid var(--hair)}
.figure:last-child{border-right:0}
.figure .n{font-family:var(--serif);font-weight:200;font-size:clamp(44px,5.2vw,74px);line-height:1;
  letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.figure .n em{font-style:normal;color:var(--orange-ink)}
.figure .l{margin-top:18px;font:700 10px/1.4 Lato,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim)}
.figure p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--ink-2)}

/* ---------- process as a horizontal score ---------- */
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:56px;border-top:1px solid var(--hair)}
.rail .node{padding:28px 24px 26px;border-right:1px solid var(--hair);position:relative}
.rail .node:last-child{border-right:0}
.rail .num{font-family:var(--serif);font-weight:400;font-size:13px;color:var(--orange-ink)}
.rail h3{margin-top:20px;font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:-.02em;color:var(--ink)}
.rail p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.rail .node::after{content:"";position:absolute;left:0;top:-1px;width:0;height:2px;
  background-image:var(--grad-btn);transition:width .7s var(--ease)}
.rail.in .node::after{width:100%}
.rail.in .node:nth-child(2)::after{transition-delay:.12s}
.rail.in .node:nth-child(3)::after{transition-delay:.24s}
.rail.in .node:nth-child(4)::after{transition-delay:.36s}
.rail.in .node:nth-child(5)::after{transition-delay:.48s}

/* ---------- quiet cards (inherited pages) — hairline, not boxed ---------- */
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--hair)}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--hair)}
.why4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--hair);margin-top:48px}
.card-light,.card-dark,.why-item,.segment,.cap-card,.proof-item,.inquiry{
  background:var(--paper);padding:30px 28px;border:0;border-radius:0;transition:.4s var(--ease)}
.band-light .card-light,.band-light .card-dark,.band-light .why-item,.band-light .segment,
.band-light .cap-card,.band-light .inquiry,.band-light .proof-item{background:var(--paper-2)}
.section-purple .card-light,.section-purple .why-item,.section-purple .card-dark{background:var(--wash)}
.card-light:hover,.card-dark:hover,.why-item:hover,.segment:hover,.cap-card:hover,.inquiry:hover{
  background:var(--wash)}
.card-light h3,.card-dark h3,.segment h3,.inquiry h3,.cap-card h3,.proof-item h3{
  font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:-.02em;color:var(--ink);line-height:1.25}
.why-item h3{font:700 10px/1 Lato,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange-ink);margin-bottom:16px}
.card-light p,.card-dark p,.segment p,.inquiry p,.cap-card p,.proof-item p,.why-item p{
  margin-top:14px;font-size:15px;line-height:1.8;color:var(--ink-2)}
.card-light img,.cap-card img,.inquiry img{width:34px;height:34px;margin-bottom:20px;opacity:.85}
/* government capability cards carry photographs, not icons */
.cap-card img.cap-photo{width:100%;height:190px;object-fit:cover;margin-bottom:24px;opacity:1;
  filter:saturate(.96)}
.cap-card:hover img.cap-photo{filter:saturate(1.02)}
.card-dark img{width:30px;height:30px;margin-bottom:18px}
.proof-item img{width:100%;height:200px;object-fit:cover;margin-bottom:0}
.proof-item{padding:0}
.proof-item .inner{padding:30px 30px 34px}
.pillar,.env-card,.serve-card{background:var(--paper);border:0;border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;transition:.4s var(--ease)}
.pillar > img,.env-card img,.serve-card img{width:100%;height:280px;object-fit:cover;filter:saturate(.94)}
.pillar .inner,.env-card .inner,.serve-card .body{padding:30px 4px 0;display:flex;flex-direction:column;flex:1}
.pillar h3,.env-card h3,.serve-card h3{font-family:var(--serif);font-weight:400;font-size:26px;
  letter-spacing:-.025em;color:var(--ink)}
.pillar p,.env-card p{margin-top:14px;font-size:16px;line-height:1.75;color:var(--ink-2)}
.pillar ul{margin:20px 0 0;padding:0;list-style:none}
.pillar li,.cap-list li,.bridge li,.legal li,.segment li{position:relative;padding-left:0;font-size:15px;
  line-height:1.85;color:var(--ink-2)}

.cap-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 32px}
.serve-card .body{align-items:flex-start;gap:16px}
.pillar:hover img,.env-card:hover img,.serve-card:hover img{filter:saturate(1.02)}

/* numbered capability rows */
.cap-rows{margin-top:16px;border-top:1px solid var(--hair)}
.cap-row{display:grid;grid-template-columns:60px 1fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--hair)}
.cap-row + .cap-row{border-top:0}
.cap-row .num{width:auto;height:auto;border-radius:0;background:none;border:0;color:var(--orange-ink);
  font-family:var(--serif);font-weight:400;font-size:15px;display:block;padding-top:5px}
.cap-row.alt .num{background:none;color:var(--violet)}
.cap-row h3{font-family:var(--serif);font-weight:400;font-size:25px;letter-spacing:-.025em;color:var(--ink)}
.cap-row p{margin-top:12px;font-size:16px;line-height:1.85;color:var(--ink-2);max-width:62ch}
.cap-row .tag{display:inline-block;margin-top:14px;font:700 10px/1 Lato,sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange-ink);background:none;border:0;padding:0}

/* service page steps */
.steps{position:relative;margin-top:44px;border-top:1px solid var(--hair)}
.steps::before{display:none}
.steps .step{position:relative;padding:30px 0 30px 92px;border-bottom:1px solid var(--hair)}
.steps .step + .step{margin-top:0}
.steps .step .dot{position:absolute;left:0;top:30px;width:auto;height:auto;border-radius:0;background:none;
  border:0;color:var(--orange-ink);font-family:var(--serif);font-weight:400;font-size:15px;display:block}
.steps .step h3{font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.025em;color:var(--ink)}
.steps .step .body{margin-top:14px;font-size:16px;line-height:1.85;color:var(--ink-2);max-width:62ch}
.steps .step ul{margin:14px 0 0;padding:0;list-style:none}
.steps .step ul li{position:relative;padding-left:0;font-size:15px;line-height:1.9;color:var(--ink-2)}

.steps-media{margin-top:40px;display:flex;justify-content:center}
.steps-media img{max-width:340px}

/* approach timeline */
.approach{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:54px;border-top:1px solid var(--hair)}
.approach::before{display:none}
.approach .step{padding:28px 22px 26px;border-right:1px solid var(--hair);text-align:left}
.approach .step:last-child{border-right:0}
.approach .dot{width:auto;height:auto;border-radius:0;background:none;border:0;margin:0;
  color:var(--orange-ink);font-family:var(--serif);font-weight:400;font-size:14px;display:block}
.approach h3{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.02em;
  color:var(--ink);min-height:auto;display:block;line-height:1.2}
.approach p{margin-top:12px;font-size:14px;line-height:1.7;color:var(--ink-2)}

/* formula / equation */
.formula{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;counter-reset:step;
  border-top:1px solid var(--hair)}
.formula.five{grid-template-columns:repeat(5,1fr)}
.formula .step-card{position:relative;border:0;border-right:1px solid var(--hair);border-radius:0;
  padding:30px 24px 28px;background:none}
.formula .step-card:last-child{border-right:0}
.formula .step-card::before{counter-increment:step;content:"0" counter(step);position:static;
  display:block;width:auto;height:auto;border-radius:0;background:none;color:var(--orange-ink);
  font-family:var(--serif);font-weight:400;font-size:14px;margin-bottom:18px}
.formula h3{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.02em;color:var(--ink);margin-bottom:12px}
.formula p{font-size:15px;line-height:1.75;color:var(--ink-2)}
.equation{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;margin-top:44px}
.equation .term{padding:0;border:0;background:none;font-family:var(--serif);font-weight:300;
  font-size:clamp(26px,3.6vw,48px);letter-spacing:-.03em;color:var(--ink)}
.equation .op{font-family:var(--serif);font-weight:300;font-size:clamp(22px,3vw,38px);color:var(--orange-ink)}
.equation-result{margin:34px auto 0;text-align:center;font-size:17px;line-height:1.8;color:var(--ink-2);max-width:64ch}

/* showcase */
.showcase{margin-top:0;position:relative;z-index:2}
.showcase .frame{background:none;border:1px solid var(--hair);border-radius:0;padding:0;box-shadow:none}
.showcase .frame img{width:100%;border-radius:0}
.showcase .caption{margin-top:18px;text-align:center;font-size:14px;color:var(--ink-dim);letter-spacing:.02em}

/* bridge */
.bridge{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);border-radius:0;background:none}
.bridge > div{padding:38px 34px 40px}
.bridge > div + div{border-left:1px solid var(--hair)}
.bridge .who{font:700 10px/1 Lato,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-ink)}
.bridge h3{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.025em;color:var(--ink)}
.bridge p{margin-top:16px;font-size:16px;line-height:1.8;color:var(--ink-2)}
.bridge ul{margin:20px 0 0;padding:0;list-style:none}
.bridge-note{margin-top:26px;text-align:center;font-size:14px;color:var(--ink-dim)}

/* difference lines — editorial stack */
.diff{max-width:900px;margin:0 auto;text-align:center}
/* Praventa difference — four components as boxes */
.diff{max-width:1136px}
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--hair);
  margin-top:38px;text-align:left}
.diff-box{background:var(--paper);padding:30px 26px 32px;transition:.4s var(--ease)}
.diff-box .dn{display:block;font-family:var(--serif);font-weight:400;font-size:13px;color:var(--orange-ink)}
.diff-box h3{margin-top:20px;font-family:var(--serif);font-weight:400;font-size:26px;
  letter-spacing:-.025em;color:var(--ink);line-height:1.15}
.diff-box p{margin-top:10px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.diff-box:hover{background:var(--wash)}
.diff-box:hover h3{color:var(--violet)}
.diff-all{margin-top:26px;font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.4vw,28px);color:var(--ink)}

/* who-we-serve legacy overlap → flat editorial */
.serve-wrap{padding:62px 0 0;background-image:var(--grad-section)}
.serve-cards{padding:0 0 62px;background:var(--paper)}
.serve-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:0;padding-top:48px}

/* audience */
.audience{padding:60px 0}
.audience + .audience{border-top:1px solid var(--hair)}
.audience .kicker{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:24px;color:var(--violet)}
.audience h3.values-title{margin-top:62px;text-align:center;font-family:var(--serif);font-weight:300;
  font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em;color:var(--ink)}
.audience .cards-3{margin-top:34px}
.segments{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--hair);margin-top:40px}
.segment.span2{grid-column:span 2}

/* contact */
.inquiry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--hair);margin-top:44px}
.inquiry{display:flex;flex-direction:column}
.inquiry p{flex:1}
.inquiry .btn{margin-top:26px;align-self:flex-start}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
.contact-card{background:var(--paper-2);border:0;border-radius:0;padding:34px 30px}
.contact-card h3{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink);margin-bottom:22px}
.contact-card .row{display:flex;gap:14px;align-items:flex-start;margin-top:24px}
.contact-card .row svg{width:16px;height:16px;fill:var(--orange-ink);flex-shrink:0;margin-top:4px}
.contact-card .row .label{font:700 10px/1 Lato,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:6px}
.contact-card .row a,.contact-card .row span{font-size:16px;color:var(--ink)}
form.enquiry{display:grid;gap:22px}
form.enquiry .two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
form.enquiry label{display:block;font:700 10px/1 Lato,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:10px}
form.enquiry input,form.enquiry textarea,form.enquiry select{width:100%;padding:14px 2px;
  font:400 16px/1.5 Lato,sans-serif;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--hair-2);
  border-radius:0;transition:.3s var(--ease)}
form.enquiry input::placeholder,form.enquiry textarea::placeholder{color:#a698b4}
form.enquiry input:focus,form.enquiry textarea:focus,form.enquiry select:focus{outline:none;
  border-bottom-color:var(--orange)}
form.enquiry textarea{min-height:130px;resize:vertical}
form.enquiry .btn{justify-self:start;border:0;cursor:pointer}
.form-note{font-size:14px;color:var(--orange-ink);margin-top:4px}

/* legal / prose */
.legal{padding:60px 0 70px}
.legal .container{max-width:760px}
.legal .lead{font-size:19px;line-height:1.85;margin-bottom:44px;color:var(--ink-2)}
.legal h2{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.025em;color:var(--ink);margin:56px 0 16px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--ink);margin:30px 0 10px}
.legal p{font-size:17px;line-height:1.9;color:var(--ink-2)}
/* long unbroken URLs in the policy text overflow narrow viewports */
.legal p,.legal li,.legal a{overflow-wrap:anywhere;word-break:break-word}
.legal p + p{margin-top:16px}
.legal ul{margin:16px 0 0;padding:0;list-style:none}
.legal a{color:var(--orange-ink);font-weight:700}

/* cta + careers */
.cta{padding:64px 0;text-align:center}
.cta p{max-width:60ch;margin:26px auto 0;font-size:18px;line-height:1.8;color:var(--ink-2)}
.cta .btn{margin-top:34px}
.careers{padding:62px 0;text-align:center}
.careers .brandmark{width:56px;height:56px;margin:0 auto 26px;opacity:.9}
.careers p{max-width:64ch;margin:24px auto 0;font-size:17px;line-height:1.8;color:var(--ink-2)}
.careers .btn{margin-top:32px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hero-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:34px auto 0}
.hero-pills span{padding:0;border:0;background:none;font:700 11px/1 Lato,sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim)}
.hero-sub{margin-top:22px;font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.8vw,34px);
  letter-spacing:-.03em;color:var(--violet)}
.punch .big{font-family:var(--serif);font-weight:300;font-size:clamp(28px,4.2vw,58px);line-height:1.06;
  letter-spacing:-.035em;color:var(--ink)}
.punch .big em{font-style:normal;color:var(--orange-ink)}
.punch p{margin-top:28px;font-size:18px;line-height:1.8;color:var(--ink-2);max-width:60ch;margin-left:auto;margin-right:auto}
.process{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 20px;margin-top:40px}
.process span{padding:0;border:0;background:none;font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink)}
.process i{color:var(--orange-ink);font-style:normal;font-size:16px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hair)}
.stat{border:0;border-right:1px solid var(--hair);border-radius:0;padding:34px 28px;min-height:0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;background:none}
.stat:last-child{border-right:0}
.stat .num{font-family:var(--serif);font-weight:200;font-size:clamp(42px,5vw,68px);letter-spacing:-.05em;color:var(--ink)}
.stat .num.accent{color:var(--orange-ink);-webkit-text-fill-color:currentColor}
.stat .label{margin-top:16px;font:700 10px/1 Lato,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.stat hr{display:none}
.stat .desc{margin-top:14px;font-size:15px;line-height:1.75;color:var(--ink-2)}
.ring{background:none;padding:0;border-radius:0}
.ring img{border-radius:0;width:100%;object-fit:cover}
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:44px}
.device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:44px}
.device{text-align:left}
.device h3{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink)}
.split-chart .chart{border-left:0;padding-left:0}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--hair);margin-top:40px}
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--hair);margin-top:44px}
.contract-table{margin-top:36px;border:0;border-top:1px solid var(--hair);border-radius:0;background:none}
.contract-row{display:grid;grid-template-columns:300px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--hair)}
.contract-row + .contract-row{border-top:0}
.contract-row dt{font:700 10px/1 Lato,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);padding-top:4px}
.contract-row dd{margin:0;font-size:17px;color:var(--ink)}
.gov-note{margin-top:24px;font-size:14px;line-height:1.8;color:var(--ink-dim)}

/* ---------- footer ---------- */
.site-footer{background:var(--paper-2);border-top:1px solid var(--hair);padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr .9fr 1.1fr;gap:28px 32px}
.footer-brand img{width:52px;height:48px;opacity:.9}
.footer-tagline{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.02em;
  color:var(--ink);line-height:1.3}
.footer-caps{margin-top:12px;font-size:13px;line-height:1.7;color:var(--ink-dim);max-width:290px}
.site-footer h2{font:700 10px/1 Lato,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:16px;font-family:Lato,sans-serif}
.contact-h{margin-top:22px}
.footer-list{display:flex;flex-direction:column;gap:9px}
.footer-list a{font-size:15px;color:var(--ink-2);transition:.25s var(--ease)}
.footer-list a:hover{color:var(--orange-ink)}
.contact-row{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:15px}
.contact-row svg{width:13px;height:13px;flex-shrink:0;fill:var(--orange-ink)}
.footer-bottom{max-width:var(--container);margin:34px auto 0;padding:20px 32px 0;border-top:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-bottom p{font-size:14px;color:var(--ink-dim)}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger.in > *:nth-child(2){transition-delay:.09s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.18s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.27s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.36s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-stagger > *{opacity:1;transform:none;transition:none}
  .ticker .track{animation:none}
  /* keep the first clip's poster as a still — don't leave the hero blank */
  .hero-art .hero-clip:not(.is-active){display:none}
  .hero-art .hero-clip{transition:none}
  .hero-cycle .cyc-n,.hero-cycle .cyc-label{transition:none}
  .rail .node::after{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero-v{min-height:clamp(520px,80svh,820px)}
  .hero-meta{grid-template-columns:1fr;gap:32px;align-items:start}
  .hero-actions{justify-content:flex-start}
  .feature,.split,.split-chart,.audience .head,.contact-grid,.theme .grid{grid-template-columns:1fr;gap:36px}
  .theme .media{position:static}
  .theme .media img{aspect-ratio:16/10}
  .split.reverse .media{order:0}
  .figures,.rail,.approach,.formula,.formula.five{grid-template-columns:repeat(2,1fr)}
  .figure,.rail .node,.approach .step,.formula .step-card{border-right:0;border-bottom:1px solid var(--hair)}
  .index-row{grid-template-columns:44px 1fr;gap:24px}
  .index-row .idx-body{grid-column:2}
  .cards-3,.why4,.inquiry-grid,.proof,.device-grid,.serve-grid,.pair-grid{grid-template-columns:repeat(2,1fr)}
  .diff-grid{grid-template-columns:repeat(2,1fr)}
  .split + .split{margin-top:54px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .bridge,.cap-grid,.segments{grid-template-columns:1fr}
  .bridge > div + div{border-left:0;border-top:1px solid var(--hair)}
  .segment.span2{grid-column:span 1}
  .section,.theme,.audience{padding:48px 0}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--hair)}
}
@media (max-width:860px){
  .nav,.header-cta{display:none}
  .burger{display:block}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--hair);flex-direction:column;align-items:stretch;gap:0;padding:14px 32px 26px}
  .nav.open a{padding:14px 0}
  .nav.open .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;margin:0;padding:0 0 0 14px;min-width:0}
  .site-header .inner{position:relative;padding:10px 24px}
  .hero-v{min-height:clamp(500px,76svh,760px)}
  /* copy runs full-width here, so the horizontal scrim can't carry it */
  .hero-art::after{background:
    linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.72) 40%,
                    rgba(255,255,255,.78) 74%,var(--paper) 100%)}
  .hero-copy{padding:0 24px}
  .container{padding:0 24px}
  .idx-body ul{columns:1}
}
@media (max-width:620px){
  .figures,.rail,.approach,.formula,.formula.five,.cards-3,.why4,.inquiry-grid,.proof,
  .device-grid,.serve-grid,.pair-grid,.cards-2,.footer-grid{grid-template-columns:1fr}
  .index-row{grid-template-columns:1fr;gap:12px}
  .index-row .idx-n{padding-top:0}
  .cap-row,.steps .step{grid-template-columns:1fr;padding-left:0}
  .cap-row .num,.steps .step .dot{position:static;margin-bottom:10px}
  .steps .step{padding-left:0}
  .cap-list{grid-template-columns:1fr}
  .diff-grid{grid-template-columns:1fr}
}

/* ============================================================
   CMM "How It Works" — clinical pharmacist process-of-care cycle.
   Four quadrants around a segmented ring. Ring fills carry the
   literal reference colours; the HEADINGS use readable partners,
   because the reference's orange/amber run 3.2:1 and 1.8:1 as text.
   ============================================================ */
.cyc{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:34px 26px;
  align-items:center;margin-top:44px}
.cyc-top{grid-column:1/-1;grid-row:1;max-width:500px;margin:0 auto}
.cyc-left{grid-column:1;grid-row:2}
.cyc-hub-wrap{grid-column:2;grid-row:2;position:relative;width:340px;height:340px;flex-shrink:0}
.cyc-right{grid-column:3;grid-row:2;padding-left:20px}
.cyc-bottom{grid-column:1/-1;grid-row:3;max-width:690px;margin:0 auto}
/* faint diagonals dividing the four quadrants, per the client reference.
   Drawn behind everything; the ring's opaque hub covers the crossing point. */
.cyc-diag{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* four straight diagonals, each confined to an empty corner corridor so no
   stroke ever crosses text. Endpoints are derived from the measured text
   extents — re-measure before moving them. */
.cyc-diag line{stroke:rgba(36,16,51,.16);stroke-width:2;
  vector-effect:non-scaling-stroke;stroke-linecap:round}
.cyc > .cyc-q,.cyc > .cyc-hub-wrap{position:relative;z-index:1}
.cyc-hub-wrap svg{width:100%;height:100%;display:block}
.cyc-hub{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;pointer-events:none}
.cyc-hub span{max-width:150px;font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.22;
  letter-spacing:-.01em;color:var(--violet)}
.cyc-q h3{font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.2;letter-spacing:-.02em}
.cyc-q ul{margin:14px 0 0;padding:0;list-style:none}
.cyc-q li{position:relative;font-size:15px;line-height:1.6;color:var(--ink-2)}
.cyc-q li + li{margin-top:9px}
/* every quadrant reads the same way: left-justified, hanging bullet */
.cyc-q li{padding-left:16px}
.cyc-q li::before{content:"•";position:absolute;left:0;color:var(--lav)}
/* quadrant heading colours — measured on the light band */
.cyc-left h3{color:#631561}            /* 11.6:1 */
.cyc-top h3{color:var(--orange-ink)}   /* 5.0:1  */
.cyc-right h3{color:#8f5a0a}           /* 5.2:1  */
.cyc-bottom h3{color:#92278f}          /* 6.5:1  */
@media (max-width:1040px){
  .cyc{grid-template-columns:1fr;gap:30px;justify-items:center}
  .cyc-top,.cyc-left,.cyc-hub-wrap,.cyc-right,.cyc-bottom{grid-column:1;grid-row:auto;
    max-width:620px;width:100%;text-align:left}
  /* stack the ring first, then the four stages in numerical reading order */
  /* the X only makes sense over the 2D cross layout */
  .cyc-diag{display:none}
  .cyc-hub-wrap{width:290px;height:290px;order:0}
  .cyc-left{order:1}
  .cyc-top{order:2}
  .cyc-right{order:3}
  .cyc-bottom{order:4}
  .cyc-top li::before,.cyc-right li::before{content:""}
  .cyc-top li,.cyc-right li{padding-left:16px}
  .cyc-top li::before,.cyc-right li::before{content:"•";position:absolute;left:0;color:var(--lav)}
}

/* CMM copy blocks: the margins are pushed OUT so the full original copy lands on
   four lines. Line count is width-dependent — tuned at 1440. Measure, don't guess. */
.page-service .wide-copy{max-width:none}
/* only the paragraph goes wide; the heading keeps its normal measure */
.page-service .head-center.wide-copy h2,.page-service .wide-copy > h2{max-width:960px;margin-left:auto;margin-right:auto}
.page-service .wide-copy .lede,.page-service .wide-copy .lede p,
.page-service .wide-copy > p{font-size:16px;line-height:1.7;margin-left:auto;margin-right:auto}
/* widths tuned so the full original copy breaks at exactly four lines */
.page-service .wide-copy .lede,.page-service .wide-copy .lede p{max-width:1150px}
.page-service .wide-copy > p{max-width:900px}

/* ---------- services menu pill (interior service pages) ----------
   This component had no styles at all in the redesign stylesheet, so it rendered
   as unstyled text on all eight service pages. Hairline pill to match the register. */
.svc-menu-wrap{border-bottom:1px solid var(--hair);background:var(--paper);padding:18px 0}
.svc-menu{position:relative;max-width:var(--container);margin:0 auto;padding:0 32px;
  display:flex;justify-content:center}
.svc-menu-toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  padding:12px 24px;border:1px solid var(--hair-2);border-radius:99px;background:var(--paper);
  font:700 12px/1 Lato,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  transition:.3s var(--ease)}
.svc-menu-toggle:hover,.svc-menu-toggle:focus-visible{border-color:var(--ink);
  background:var(--ink);color:#fff;outline:none}
.svc-menu-toggle .grid{display:grid;grid-template-columns:repeat(3,3px);gap:2px;flex-shrink:0}
.svc-menu-toggle .grid i{width:3px;height:3px;border-radius:50%;background:var(--orange)}
.svc-menu-toggle:hover .grid i,.svc-menu-toggle:focus-visible .grid i{background:var(--orange-light)}
.svc-menu-toggle .chev{width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease);flex-shrink:0}
.svc-menu.open .svc-menu-toggle .chev{transform:rotate(-135deg) translateY(1px)}
.svc-menu-list{position:absolute;top:100%;left:50%;margin-top:12px;min-width:380px;
  transform:translate(-50%,-8px);background:#fff;border:1px solid var(--hair);padding:10px;
  box-shadow:0 30px 70px rgba(36,16,51,.13);z-index:40;
  opacity:0;visibility:hidden;transition:.28s var(--ease)}
.svc-menu.open .svc-menu-list{opacity:1;visibility:visible;transform:translate(-50%,0)}
.svc-menu-list a{display:block;padding:11px 16px;font-size:14px;color:var(--ink-2);border-radius:4px}
.svc-menu-list a:hover{background:var(--paper-2);color:var(--ink)}
@media (max-width:620px){
  .svc-menu{padding:0 24px}
  .svc-menu-list{min-width:0;width:calc(100vw - 48px)}
}

/* ---------- "Why Praventa" grid (government page) ----------
   .why-grid had no rules at all, so five cards stacked full-width instead of
   forming a grid. (The stylesheet's .why4 is orphaned — no markup uses it.)
   Three columns; .wide items span the full row, which is what lets the
   Flexibility sentence sit on a single line. */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--hair);margin-top:48px}
.why-grid .why-item.wide{grid-column:1/-1}
@media (max-width:1100px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.why-grid{grid-template-columns:1fr}}

/* smaller portrait in the "From insight to execution" row */
.split .media.media-sm{display:flex;justify-content:flex-start}
.split .media.media-sm img{max-width:400px;width:100%}
@media (max-width:1100px){.split .media.media-sm img{max-width:320px}}

/* Photo matches the height of the text column beside it (home government row).
   The image is taken out of flow so it cannot drive the row height — otherwise
   `align-items:stretch` just grows the TEXT column up to the image instead. */
.split.match-height{align-items:stretch}
.split.match-height .media{position:relative;min-height:340px}
.split.match-height .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* careers: smaller heading, and a wide enough measure for the copy to sit on three lines */
.careers h2{line-height:1.15}
.careers p{max-width:1040px;margin-top:20px}

/* "The gap" (home section 01) — slightly smaller type throughout */

.gap-section .lede-body{font-size:17px}
.gap-section .figure .n{font-size:clamp(38px,4.4vw,62px)}
.gap-section .figure p{font-size:14px}

/* ---------- services index refinements ---------- */
/* the two pyramid figures are diagrams — contain, never crop, when height-matched */
.split.match-height.split-diagram .media img{object-fit:contain;object-position:center}
/* Government & Public Sector block: smaller title, wider lede (three lines) */

.gov-block .head-center,.gov-block .head-center .lede,
.gov-block .head-center .lede p{max-width:1040px}

/* services index: closing CTA sits tight under the government block, and both of
   its paragraphs share one measure with a single line gap between them */
.page-services-index .gov-block{padding-bottom:28px}
.page-services-index .cta{padding-top:30px}
.page-services-index .cta .head-center{margin-bottom:0}
.page-services-index .cta .lede,.page-services-index .cta .lede p{max-width:900px}
.page-services-index .cta .lede p + p{margin-top:18px}

/* ---------- CMM page: heading scale + cycle balance ---------- */
/* every heading on this page steps down a size */
.page-service .page-hero h1{font-size:54px}

/* the four cycle stage headings */
.page-service .cyc-q h3{font-size:20px}

/* bottom stage matches the top one: same measure, centred, so the whole
   composition reads symmetrically about the ring */
.cyc-bottom{max-width:420px}

/* ---------- government solutions page ---------- */
/* tighter rhythm than the site default on this page */
body[data-page="government-solutions"] .section{padding:48px 0}
body[data-page="government-solutions"] .cta{padding:48px 0}
/* Supporting Complex Government Missions + Teaming headings step down */
body[data-page="government-solutions"] .split h2,

/* teaming lede widened so it lands on two or three lines */
body[data-page="government-solutions"] .cta .head-center,
body[data-page="government-solutions"] .cta .lede,
body[data-page="government-solutions"] .cta .lede p{max-width:900px}
/* one line between the lede and "Looking for a qualified partner?" — the
   shared .head-center rule adds 52px of its own on top of the paragraph margin */
body[data-page="government-solutions"] .cta .head-center{margin-bottom:0}

/* ---------- who we serve: hero backdrop is deliberately more visible ---------- */
/* --orange-ink is 5.02:1 on white but drops to 4.2-5.0 over a photographic backdrop,
   and the eyebrow is only 11px. Deeper amber on EVERY backdrop hero keeps a real
   margin so swapping a photo cannot quietly push a label under 4.5. */
.page-hero.has-backdrop .eyebrow{color:#8f4409}
.page-hero.has-backdrop.backdrop-strong .hero-backdrop::after{
  background:
    linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.84) 34%,
                    rgba(255,255,255,.60) 56%,rgba(255,255,255,.34) 78%,rgba(255,255,255,.26) 100%),
    linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.12) 38%,
                    rgba(255,255,255,.28) 76%,var(--paper) 100%)}

/* ---------- How It Works as boxes (service detail pages) ---------- */
.step-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--hair);margin-top:44px}
.step-box{background:var(--paper);padding:30px 28px 34px;transition:.4s var(--ease)}
.step-box .sb-n{display:block;font-family:var(--serif);font-weight:400;font-size:13px;color:var(--orange-ink)}
.step-box h3{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:24px;
  letter-spacing:-.025em;line-height:1.18;color:var(--ink)}
.step-box .sb-body{margin-top:12px;font-size:15px;line-height:1.75;color:var(--ink-2)}
.step-box .sb-body p + p{margin-top:12px}
.step-box .sb-body ul{margin:12px 0 0;padding:0;list-style:none}
.step-box .sb-body li{font-size:14px;line-height:1.8;color:var(--ink-2)}
.step-box:hover{background:var(--wash)}
.step-box:hover h3{color:var(--violet)}
@media (max-width:1040px){.step-boxes{grid-template-columns:1fr}}

/* engagement + call to action: smaller heading, wider measure */
.page-service .cta h2{font-size:clamp(26px,3vw,40px)}
.page-service .cta p{max-width:900px;margin-left:auto;margin-right:auto}

/* who we serve — closing block */
.deployed-block{padding-top:44px;padding-bottom:44px}

.deployed-block .head-center,.deployed-block .lede,.deployed-block .lede p{max-width:1040px}

/* RPM device figures: 20% smaller, tighter above and below */
.device-grid{margin-top:28px;gap:18px 32px}
.device .ring img{width:80%;margin-left:auto;margin-right:auto}
.device h3{margin-top:10px}

/* AI & Automation hero trimmed to sit with the other pages' heroes */
.page-hero.hero-compact{padding-top:56px;padding-bottom:40px}

/* ---------- analytics: capability cards (replaces the stacked .cap-rows list) ---------- */
.cap-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:none;margin-top:44px}
/* borders live on the cards, so an incomplete final row leaves no grey block.
   the -1px offsets collapse neighbouring borders into a single hairline. */
.cap-cards .cap-card-item{border:1px solid var(--hair);margin:-1px 0 0 -1px}
/* a trailing orphan sits in the middle column rather than hanging off the left */
.cap-cards .cap-card-item.center-cell{grid-column:2}
.cap-card-item{position:relative;background:var(--paper);padding:30px 26px 34px;overflow:hidden;
  transition:.4s var(--ease)}
.cap-card-item .n{position:absolute;top:10px;right:18px;font-family:var(--serif);font-weight:200;
  font-size:66px;line-height:1;color:var(--lav);opacity:.15;pointer-events:none;letter-spacing:-.04em}
.cap-card-item h3{position:relative;font-family:var(--serif);font-weight:400;font-size:22px;
  letter-spacing:-.025em;line-height:1.2;color:var(--ink);max-width:15ch;transition:color .4s var(--ease)}
.cap-card-item p{margin-top:12px;font-size:15px;line-height:1.75;color:var(--ink-2)}
.cap-card-item::after{content:"";position:absolute;left:0;top:0;width:0;height:2px;
  background-image:var(--grad-btn);transition:width .6s var(--ease)}
.cap-card-item:hover{background:var(--wash)}
.cap-card-item:hover::after{width:100%}
.cap-card-item:hover h3{color:var(--violet)}
@media (max-width:1040px){.cap-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cap-cards{grid-template-columns:1fr}}

/* analytics section headings step down */

/* ---------- AI & Automation: the equation block ---------- */
body[data-page="ai-scribe"] .section-purple{padding-top:44px;padding-bottom:44px}

body[data-page="ai-scribe"] .equation{margin-top:30px}
body[data-page="ai-scribe"] .equation .term{font-size:clamp(22px,2.6vw,34px)}
body[data-page="ai-scribe"] .equation .op{font-size:clamp(18px,2.1vw,26px)}
body[data-page="ai-scribe"] .equation-result{margin-top:24px}

/* analytics — population intelligence runs full width: label, heading, intro,
   then a horizontal band photo sitting directly on top of the card grid */
.popint-head{max-width:none}
.popint-head h2{margin-top:14px;max-width:26ch}
.popint-head .intro{margin-top:20px;max-width:78ch}
.popint-band{margin-top:36px}
.popint-band img{width:100%;height:clamp(200px,22vw,300px);object-fit:cover;display:block}
.popint-band + * .cap-cards,.popint-band ~ .container .cap-cards{margin-top:2px}

/* check-mark cards (Responsible AI) — a small accent, not the giant ghost numeral */
.cap-card-item.mark .n{position:static;font-size:20px;color:var(--orange-ink);opacity:1;
  font-weight:400;display:block;margin-bottom:4px}

/* AI & Automation section headings */

/* ============================================================
   SOFTWARE PAGE — all selectors prefixed .sw- so nothing leaks
   into the other pages (see CLAUDE.md: unscoped component CSS
   bled into the About timeline once already).
   ============================================================ */
.sw-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* --- program coverage table --- */
.sw-table{margin-top:42px;border-top:1px solid var(--hair)}
.sw-thead,.sw-row{display:grid;grid-template-columns:252px 1fr 158px;gap:26px;
  padding:22px 0;border-bottom:1px solid var(--hair)}
.sw-thead{padding:14px 0;font:700 10px/1 Lato,sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim)}
.sw-row h3{margin:0;font-family:var(--serif);font-weight:400;font-size:20px;
  letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.sw-row p{margin:0;font-size:15px;line-height:1.72;color:var(--ink-2)}
.sw-codes{font:700 13px/1.75 Lato,sans-serif;color:var(--violet);letter-spacing:.01em}
.sw-note{margin-top:24px;font-size:13px;line-height:1.85;color:var(--ink-dim)}

/* --- bullet lists inside cards --- */
.sw-bul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.sw-bul li{position:relative;padding-left:19px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.sw-bul li::before{content:"";position:absolute;left:0;top:10px;width:4px;height:4px;
  border-radius:50%;background:var(--orange)}
.sw-bul li b{font-weight:700;color:var(--ink)}

/* --- trust strip --- */
.sw-trust{margin-top:36px;padding-top:24px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:12px 30px;
  font:700 11px/1.7 Lato,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.sw-trust span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--orange);margin-right:10px;vertical-align:middle}

/* --- callout --- */
.sw-callout{margin-top:42px;padding:32px 36px;background:var(--paper-2);
  border-left:3px solid var(--orange);font-size:16px;line-height:1.8;color:var(--ink-2)}
.sw-callout strong{color:var(--ink)}

/* --- product mockups --- */
.sw-shot{margin-top:42px}
.sw-cap{margin-top:16px;font-size:14px;line-height:1.8;color:var(--ink-dim);max-width:74ch}

@media (max-width:980px){
  .sw-thead{display:none}
  .sw-row{grid-template-columns:1fr;gap:12px}
}
@media (max-width:760px){
}

/* ============================================================
   Header breakpoint — the nav carries eight items since the
   Software page was added, and needs ~1000px to lay out. The
   860px block below was tuned for seven, so the header spent
   861–1000px overflowing its own container. Hand off to the
   burger earlier; everything else about the mobile treatment
   still starts at 860.
   ============================================================ */
@media (max-width:1040px){
  .nav,.header-cta{display:none}
  .burger{display:block}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--hair);flex-direction:column;align-items:stretch;gap:0;padding:14px 32px 26px}
  .nav.open a{padding:14px 0}
  .nav.open .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;margin:0;padding:0 0 0 14px;min-width:0}
  .site-header .inner{position:relative}
}

/* sourced footnote under a figures block — unique class, used on the
   home page gap section; kept out of the generic component names so it
   cannot bleed the way .step once did. */
.fig-note{margin-top:24px;font-size:12.5px;line-height:1.85;color:var(--ink-dim);max-width:104ch}
.fig-note em{font-style:italic}

/* Hero backdrop can carry a video as well as a still. Same object-fit and
   the same scrim applies, so contrast behaves identically — but a moving
   backdrop still has to be measured on composited pixels, not the DOM. */
.page-hero .hero-backdrop video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media (prefers-reduced-motion:reduce){
  .page-hero .hero-backdrop video{display:none}
  .page-hero .hero-backdrop.has-poster{background-size:cover;background-position:center}
}

/* Even nav rhythm. Every pair of nav labels sits 22px apart ink-to-ink,
   except Services -> Software, where the dropdown caret sits outside the
   link and added 11px. Close the caret's inner gap and trim the link's
   right padding by the same amount so all seven gaps measure equal. */
.nav .has-sub{gap:0}
.nav .caret{margin-left:3px}   /* Services -> Software reads 25px, 3px wider than
                                    the 22px rhythm, to offset the caret sitting between them */

/* --- FAQ block (software + care-management-companies pages) --- */
.faq{margin-top:42px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:baseline;gap:16px;
  font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";flex-shrink:0;width:16px;font-family:Lato,sans-serif;font-weight:700;
  font-size:17px;color:var(--orange-ink);line-height:1.3}
.faq details[open] summary::before{content:"\2212"}
.faq .a{padding:0 0 24px 32px;font-size:15.5px;line-height:1.8;color:var(--ink-2);max-width:78ch}
.faq .a p + p{margin-top:14px}
@media (max-width:620px){.faq summary{font-size:17.5px}.faq .a{padding-left:0}}

/* --- Real product screenshots --- */
.ui-shot{margin:0}
.ui-shot picture{display:block}
.ui-shot img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid rgba(16,10,30,.10);
  box-shadow:0 1px 2px rgba(16,10,30,.05),0 18px 44px -18px rgba(16,10,30,.28)}
.ui-shot figcaption{margin-top:16px;font-size:13.5px;line-height:1.68;color:var(--ink-3,var(--ink-2));max-width:76ch}

/* --- Automation pipeline: timer -> time log -> qualification -> superbill --- */
.flow{--flow-step:.55s;margin-top:46px;position:relative}
.flow-track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;
  border:1px solid var(--hair);border-radius:16px;background:var(--paper);overflow:hidden}
.flow-step{position:relative;padding:30px 26px 28px;border-right:1px solid var(--hair)}
.flow-step:last-child{border-right:0}
.flow-step::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(120,56,201,.09),rgba(120,56,201,0) 62%);
  opacity:0;transition:opacity .7s var(--ease)}
.flow.in .flow-step::before{opacity:1}
.flow.in .flow-step:nth-child(2)::before{transition-delay:var(--flow-step)}
.flow.in .flow-step:nth-child(3)::before{transition-delay:calc(var(--flow-step)*2)}
.flow.in .flow-step:nth-child(4)::before{transition-delay:calc(var(--flow-step)*3)}
.flow-step > *{position:relative;z-index:3}

.flow-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--paper-2);color:var(--violet);
  font-family:Lato,sans-serif;font-weight:700;font-size:12px;letter-spacing:.02em;
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease)}
.flow.in .flow-num{background:linear-gradient(135deg,var(--violet),var(--peri));color:#fff;transform:scale(1.06)}
.flow.in .flow-step:nth-child(2) .flow-num{transition-delay:var(--flow-step)}
.flow.in .flow-step:nth-child(3) .flow-num{transition-delay:calc(var(--flow-step)*2)}
.flow.in .flow-step:nth-child(4) .flow-num{transition-delay:calc(var(--flow-step)*3)}

.flow-step h3{margin:16px 0 0;font-family:var(--serif),Georgia,serif;font-weight:400;
  font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.flow-step p{margin:9px 0 0;font-size:14px;line-height:1.66;color:var(--ink-2)}
.flow-step .flow-out{margin-top:14px;display:inline-block;padding:5px 11px;border-radius:999px;
  background:var(--paper-2);border:1px solid var(--hair);
  font-family:Lato,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--violet)}

/* the moving pulse that carries data from one stage to the next */
.flow-wire{position:absolute;top:47px;height:2px;background:var(--hair);overflow:hidden;
  left:26px;right:26px;z-index:2;pointer-events:none}
.flow-wire i{position:absolute;top:0;left:0;height:100%;width:26%;
  background:linear-gradient(90deg,transparent,var(--lav),transparent);
  transform:translateX(-30%);opacity:0}
.flow.in .flow-wire i{opacity:1;animation:flow-run 3.4s var(--ease) .5s infinite}
@keyframes flow-run{0%{transform:translateX(-30%)}100%{transform:translateX(400%)}}

.flow-foot{margin-top:18px;font-size:14px;line-height:1.7;color:var(--ink-2)}
.flow-foot b{color:var(--ink)}

@media (max-width:900px){
  .flow-track{grid-template-columns:1fr 1fr}
  .flow-step:nth-child(2){border-right:0}
  .flow-step:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .flow-wire{display:none}
}
@media (max-width:560px){
  .flow-track{grid-template-columns:1fr}
  .flow-step{border-right:0;border-bottom:1px solid var(--hair)}
  .flow-step:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .flow-step::before,.flow.in .flow-num{transition:none}
  .flow.in .flow-wire i{animation:none;opacity:.55;transform:none;width:100%;
    background:linear-gradient(90deg,transparent,var(--lav),transparent)}
}