/* The home page: the live landing, with the bridge to the use cases, the
   line states and the Client Community added (Suneeta's bridge brief).
   Everything here is scoped to body.home-page, so the services pages, which
   share the hero and the stacking scroll, are unchanged. Every color is a
   site token from styles.css. */

/* ------------------------------------------------------------- hero */

/* The headline: larger and heavier than before. The size is measured
   against the hero column (cqw), so each line stays whole on desktop:
   "Some need a decision." at weight 700 needs about 10.3 times the font
   size, and 9.4cqw leaves room for it. */
.home-page .hero--decision{--h-size:clamp(3.25rem,9.4cqw,8.5rem)}
.home-page .hero-h .h-l1,
.home-page .hero-h .h-l2{font-weight:600}
.home-page .hero-h .h-l3{font-weight:700}
.home-page .hero--decision .h-display span{white-space:nowrap}

/* The tagline, one line under the headline: Public Sans 500, one neon per
   phrase (.neon in styles.css). One line on desktop; on phones it wraps
   between phrases. */
.home-page .hero-tagline{
  margin:28px 0 0;
  font-weight:500;font-size:clamp(16px,1.35vw,19px);line-height:1.45;
  color:var(--muted-navy);white-space:nowrap;
}
.home-page .panel--cream .hero-tagline{color:var(--muted-cream)}
/* 28px above the tagline, from the headline; 32px below it, to the first
   paragraph */
.home-page .hero-tagline + .hero-row{margin-top:32px}

/* 48px between the nav and the eyebrow (32px on phones), at every window
   height: the hero starts at the top rather than centering */
.home-page .hero--decision{padding-top:calc(var(--nav-h) + 48px);align-items:flex-start}

/* Below the headline: the two ledes and the button on the left, the study
   figure on the right. The figure takes the text column's height: its top
   is level with the first lede, its bottom ("flagged, month 8") level with
   the bottom of the button. */
.home-page .hero-row{
  display:grid;
  grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:clamp(28px,4vw,64px);
  align-items:stretch;
  margin-top:var(--hero-gap);
}
.home-page .hero-copy .lede{max-width:52ch}
.home-page .hero-copy .lede:first-child{margin-top:0}
.home-page .hero-fig{margin:0;min-width:0;position:relative}

/* The second hero button, outlined: the same size as the first (the line
   is an inset shadow, so it adds no width), navy fill, light text. On
   narrow screens the two buttons stack, at one width. */
.home-page .btn--outline{
  background:transparent;color:var(--on-navy);
  box-shadow:inset 0 0 0 1.5px var(--emerald);
}
.home-page .btn--outline:hover{background:var(--hover-tint);opacity:1;box-shadow:inset 0 0 0 1.5px var(--emerald),var(--hover-glow)}
.home-page .btn--outline:focus-visible{outline:none;box-shadow:inset 0 0 0 1.5px var(--emerald),var(--ring)}
@media (max-width:560px){
  .home-page .hero--decision .hero-actions{flex-direction:column;align-items:stretch;max-width:360px}
}

/* the note under the hero, to use case 1 */
.home-page .hero-note{
  display:block;margin:36px 0 0 auto;max-width:56ch;text-align:right;
  font-family:var(--mono);font-size:12.5px;line-height:1.55;
  color:var(--muted-navy);text-decoration:none;
}
.home-page .hero-note:hover{color:var(--emerald);background:var(--hover-tint);box-shadow:0 0 0 3px var(--hover-tint);border-radius:4px}
.home-page .hero-note b{color:var(--red-on-navy);font-weight:500}
.home-page .hero-note:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

/* Layers inside the hero, bottom to top: the grid, the figure, the cursor
   trail, the text. The trail draws over the figure but never on the words. */
.home-page .hero .wrap{z-index:auto}
.home-page .hero-fig{position:relative;z-index:1}
.home-page .hero-canvas{z-index:2}
.home-page .hero .eyebrow,
.home-page .hero-h,
.home-page .hero-tagline,
.home-page .hero-copy,
.home-page .hero-note{position:relative;z-index:3}

@media (max-width:980px){
  .home-page .hero-row{grid-template-columns:minmax(0,1fr)}
  .home-page .hero-fig{max-width:560px;height:clamp(240px,62vw,340px);margin-top:8px}
  .home-page .hero-note{margin-left:0;text-align:left}
  /* the flag label sits left of its line, so it stays inside the column */
  .home-page .hf-lab--flag{transform:translateX(calc(-100% - 10px))}
}
@media (max-width:767px){
  .home-page .hero--decision{padding-top:calc(var(--nav-h) + 32px)}
}
@media (max-width:640px){
  .home-page .hero--decision{--h-size:clamp(2.9rem,12vw,4.75rem)}
  .home-page .hero--decision .h-display span{white-space:normal}
  .home-page .hero-tagline{white-space:normal}
}

/* The study figure, as a loop: the agreement line draws in, then the errors
   caught line with its 95% band, then the dashed true rate (about 2.5s);
   it holds for 2s, the month 8 flag pulses once, everything fades out over
   0.8s, and it starts again. One 6.4s clock for every part. The resting
   state is the finished figure, which is what reduced motion shows. */
/* hf:start (tools/home/export-hero.mjs reads the figure's rules from here
   to the hf:end mark) */
.hf{position:absolute;inset:0;--pt:30px;--pb:30px}
.hf-plot{position:absolute;left:0;top:var(--pt);width:100%;height:calc(100% - var(--pt) - var(--pb));overflow:visible}
.hf-plot path,.hf-plot line{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.hf-over{position:absolute;inset:0}
.hf-agree{stroke:var(--muted-navy);stroke-opacity:.9;stroke-width:2}
.hf-est{stroke:var(--red-on-navy);stroke-width:2.75}
.hf-true{stroke:var(--red-on-navy);stroke-opacity:.75;stroke-width:1.25;stroke-dasharray:5 6}
.hf-band{fill:var(--red-on-navy);fill-opacity:.16}
.hf-rule{stroke:var(--on-navy);stroke-opacity:.09;stroke-width:1}
.hf-flagline{stroke:var(--emerald);stroke-opacity:.75;stroke-width:1.25;stroke-dasharray:4 5}
.hf-lab{position:absolute;font-family:var(--mono);font-size:13px;line-height:16px;white-space:nowrap}
.hf-lab--agree{top:0;right:0;color:var(--muted-navy)}
.hf-lab--est{left:calc(var(--x) * 1%);top:calc(var(--pt) + (100% - var(--pt) - var(--pb)) * var(--y) / 100);transform:translate(10px,calc(-100% - 12px));color:var(--red-on-navy)}
.hf-lab--flag{left:calc(var(--x) * 1%);bottom:0;transform:translateX(10px);color:var(--emerald)}
.hf-dotwrap{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--pt) + (100% - var(--pt) - var(--pb)) * var(--y) / 100);width:16px;height:16px;margin:-8px 0 0 -8px}
.hf-dot{display:block;width:100%;height:100%;box-sizing:border-box;border-radius:50%;background:var(--emerald);border:3px solid var(--navy)}
@media (prefers-reduced-motion:no-preference){
  .hf-all{animation:hf-all 6.4s linear infinite}
  .hf-agree{animation:hf-agree 6.4s linear infinite}
  .hf-est{animation:hf-est 6.4s linear infinite}
  .hf-true{animation:hf-true 6.4s linear infinite}
  .hf-band{animation:hf-band 6.4s linear infinite}
  .hf-lab--agree{animation:hf-lab-agree 6.4s linear infinite}
  .hf-lab--est{animation:hf-lab-est 6.4s linear infinite}
  .hf-flag{animation:hf-flag 6.4s linear infinite}
  .hf-dot{animation:hf-pulse 6.4s ease-in-out infinite}
}
@keyframes hf-all{0%,80%{opacity:1}92.5%,100%{opacity:0}}
/* each line draws in from the left: a wipe, so it reads the same at any
   size the figure is stretched to */
@keyframes hf-agree{0%{clip-path:inset(-20px 100% -20px -20px)}16%,100%{clip-path:inset(-20px -20px -20px -20px)}}
@keyframes hf-est{0%,12%{clip-path:inset(-20px 100% -20px -20px)}28%,100%{clip-path:inset(-20px -20px -20px -20px)}}
@keyframes hf-true{0%,25%{clip-path:inset(-20px 100% -20px -20px)}39%,100%{clip-path:inset(-20px -20px -20px -20px)}}
@keyframes hf-band{0%,12%{opacity:0}26%,100%{opacity:1}}
@keyframes hf-lab-agree{0%,8%{opacity:0}16%,100%{opacity:1}}
@keyframes hf-lab-est{0%,22%{opacity:0}30%,100%{opacity:1}}
@keyframes hf-flag{0%,30%{opacity:0}39%,100%{opacity:1}}
@keyframes hf-pulse{0%,70%{transform:scale(1)}75%{transform:scale(1.7)}80%,100%{transform:scale(1)}}
/* hf:end */

/* --------------------------------------------------- where we start */

.home-page .doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:36px}
.home-page .door{
  border-radius:var(--r-card);padding:30px 32px;border:1px solid;
  display:grid;gap:14px;align-content:start;
}
.home-page .door h3{font-size:clamp(24px,2.2vw,30px);font-weight:600;line-height:1.2;margin:0}
.home-page .door p{font-size:15.5px;line-height:1.55}
.home-page .door-eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.home-page .door ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.home-page .door li{font-size:15px;padding-left:18px;position:relative}
.home-page .door li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--red-on-navy)}
.home-page .door-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:6px}
.home-page .door-links a{font-weight:600;text-decoration:none}
.home-page .door-links a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--emerald);background:var(--hover-tint);box-shadow:0 0 0 3px var(--hover-tint);border-radius:4px}
.home-page .door--hp .door-links a:hover{color:var(--emerald)}
.home-page .door-links a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
.home-page .door--hp{background:var(--navy);border-color:var(--line-navy);color:var(--on-navy)}
.home-page .door--hp .door-eyebrow,
.home-page .door--hp .door-links a{color:var(--emerald)}
.home-page .door--hp p{color:var(--muted-navy)}
.home-page .door--sb{background:var(--card-cream);border-color:var(--line-cream);color:var(--on-cream)}
.home-page .door--sb .door-eyebrow{color:var(--muted-cream)}
.home-page .door--sb p{color:var(--muted-cream)}
.home-page .door--sb .door-links a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--emerald);text-decoration-thickness:2px;text-underline-offset:4px}

/* ------------------------------------------------------ line states */

.home-page .states-h{font-size:clamp(22px,2vw,26px);font-weight:600;line-height:1.25;margin:56px 0 0}
.home-page .states-lede{margin-top:10px}
.home-page .states-ex{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--panel-muted);margin:28px 0 0}
.home-page .states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:12px}
.home-page .state{display:grid;gap:10px;align-content:start}
.home-page .state b{font-size:15.5px;line-height:1.35}
.home-page .state p{font-size:14.5px}
.home-page .st{font-family:var(--mono);font-size:12px;padding:2px 10px;border-radius:999px;justify-self:start}
.home-page .st--ok{background:var(--emerald-soft);color:var(--on-cream)}
.home-page .st--dr{background:color-mix(in srgb,var(--amber-on-cream) 8%,var(--card-cream));color:var(--amber-on-cream)}
.home-page .st--br{background:var(--navy);color:var(--cream)}
.home-page .st--un{border:1px solid var(--line-cream);color:var(--muted-cream)}
.home-page .meter{height:8px;border-radius:4px;background:color-mix(in srgb,var(--line-cream) 70%,var(--card-cream));position:relative;overflow:hidden}
.home-page .meter i{position:absolute;inset:0 auto 0 0;border-radius:4px}
.home-page .m-ok{background:var(--emerald)} .home-page .m-dr{background:var(--amber-on-cream)} .home-page .m-br{background:var(--red-on-navy)}
.home-page .states-note{font-size:14.5px;color:var(--panel-muted);margin-top:22px;max-width:80ch}

/* ------------------------------------------------------ why we measure */

.home-page .debrief-call{margin-top:18px;font-size:15px;line-height:1.55;color:var(--muted-navy);max-width:40ch}

/* --------------------------------------------- how an engagement runs */

.home-page .steps-num .gate{
  display:flex;align-items:center;gap:9px;margin-top:8px;
  font-family:var(--mono);font-size:12.5px;line-height:1.4;color:var(--emerald);
}
.home-page .steps-num .gate::before{content:"";flex:none;width:8px;height:8px;transform:rotate(45deg);border:1.5px solid var(--emerald)}
.home-page .steps-num .gate--value::before{background:var(--emerald)}

.home-page .proof{margin-top:44px;padding-top:32px;border-top:1px solid var(--line-navy)}
.home-page .proof .eyebrow{margin-bottom:14px}
.home-page .proof h3{font-size:clamp(21px,1.8vw,24px);font-weight:600;line-height:1.25;margin:0}
.home-page .proof .lede{font-size:16px;margin-top:12px}
.home-page .proof pre{
  margin:18px 0 0;background:var(--card-navy);border:1px solid var(--line-navy);border-radius:14px;
  padding:18px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--on-navy);
}
.home-page .proof pre .c{color:var(--muted-navy)}
.home-page .proof pre:focus-visible{outline:none;box-shadow:var(--ring)}

/* --------------------------------------------- the Client Community door */

.home-page .cc-door{
  margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;
}
.home-page .cc-door>div{display:grid;gap:6px}
.home-page .cc-door h3{margin:0}

@media (max-width:980px){
  .home-page .doors{grid-template-columns:minmax(0,1fr)}
  .home-page .states{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .home-page .states,
  .home-page .cc-door{grid-template-columns:minmax(0,1fr)}
  .home-page .cc-door .btn{justify-self:start}
  .home-page .door{padding:24px 22px}
}

/* --------------------------------------------- background patterns

   Every navy panel carries the hero's measurement grid, stronger than
   before, under a wide mask that never fades below about 18%. Every cream
   panel carries a navy grid with a dot at each minor crossing. Text sits
   above both (the .wrap is z-index 1). */
.home-page .hero-grid,
.home-page .panel--navy:not(.hero)::before{
  background-image:
    repeating-linear-gradient(to right,rgba(16,185,129,.20) 0 1px,transparent 1px var(--grid-maj)),
    repeating-linear-gradient(to bottom,rgba(16,185,129,.15) 0 1px,transparent 1px var(--grid-maj)),
    repeating-linear-gradient(to right,rgba(244,246,249,.075) 0 1px,transparent 1px var(--grid-min)),
    repeating-linear-gradient(to bottom,rgba(244,246,249,.06) 0 1px,transparent 1px var(--grid-min));
  -webkit-mask-image:radial-gradient(120% 95% at 80% 10%,#000 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.18) 100%);
  mask-image:radial-gradient(120% 95% at 80% 10%,#000 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.18) 100%);
}
.home-page .panel--navy:not(.hero)::before,
.home-page .panel--cream::before{content:"";position:absolute;inset:0;pointer-events:none}
.home-page .panel--cream::before{
  background-image:
    repeating-linear-gradient(to right,rgba(14,31,59,.09) 0 1px,transparent 1px var(--grid-maj)),
    repeating-linear-gradient(to bottom,rgba(14,31,59,.07) 0 1px,transparent 1px var(--grid-maj)),
    radial-gradient(rgba(14,31,59,.16) 1px,transparent 1.4px);
  background-size:auto,auto,var(--grid-min) var(--grid-min);
  -webkit-mask-image:radial-gradient(120% 95% at 15% 0%,#000 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.15) 100%);
  mask-image:radial-gradient(120% 95% at 15% 0%,#000 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.15) 100%);
}

/* the line under the cycle points to the Weekly AI Debrief, so it shows
   only while the Debrief does (debrief.js marks <html> with dbf-live) */
.home-page .debrief-call{display:none}
.dbf-live .home-page .debrief-call{display:block}

/* a grid column may shrink below its widest line, so the code block
   scrolls inside itself on a phone instead of widening the page */
.home-page .split > *{min-width:0}

/* How an engagement runs: the steps, gates and proof make a long column,
   so the drift figure keeps its place beside them as the section scrolls */
.home-page .how-split{align-items:start}
.home-page .how-split > .fig{position:sticky;top:calc(var(--nav-h) + 40px)}
@media (max-width:900px){.home-page .how-split > .fig{position:static}}

/* ------------------------------------- Healthcare is where we start */

/* One readable column, about 680px, on cream: no cards, no icons. Text is
   the cream ink; the link is navy with an emerald underline, because
   emerald is too faint to read as text on cream. */
.home-page .hc-col{max-width:680px}
.home-page .hc-col .h-section{max-width:none;margin:0 0 30px}
.home-page .hc-col p{margin:0 0 20px;font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--on-cream)}
.home-page .hc-col .hc-sub{
  margin:44px 0 14px;font-size:clamp(21px,1.8vw,24px);line-height:1.3;font-weight:600;color:var(--on-cream);
}
/* the five insights: a plain list, spaced well apart, each marked by the
   short emerald bar the cream labels use (a mark, never text) */
.home-page .hc-list{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:22px}
.home-page .hc-list li{
  position:relative;padding-left:30px;
  font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--on-cream);
}
.home-page .hc-list li::before{content:"";position:absolute;left:0;top:.8em;width:18px;height:2px;background:var(--emerald)}
.home-page .hc-list strong{font-weight:700}
.home-page .hc-col .hc-more{margin:34px 0 0}
.home-page .hc-more a{
  font-weight:600;color:var(--navy);text-decoration:underline;
  text-decoration-color:var(--emerald);text-decoration-thickness:2px;text-underline-offset:4px;
}
.home-page .hc-more a:hover{text-decoration-thickness:3px;background:var(--hover-tint);box-shadow:0 0 0 3px var(--hover-tint);border-radius:4px}
.home-page .hc-more a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

/* -------------------------------------------- Who you'll work with */

/* the checked credentials, under the text: a short plain list */
.home-page .founder-list{list-style:none;margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--line-cream);display:grid;gap:10px}
.home-page .founder-list li{
  position:relative;padding-left:26px;
  font-size:15.5px;line-height:1.5;color:var(--on-cream);
}
.home-page .founder-list li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:2px;background:var(--emerald)}
/* one column below 900px: the photo goes above the text */
@media (max-width:900px){
  .home-page .founder-fig{order:-1}
}

/* ------------------------------- Questions METRIS helps you answer */

/* three audiences side by side on desktop, stacked on phones; the numbers
   run 1 to 11 across them and stay visible */
.home-page .hq-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,52px);margin-top:44px;align-items:start}
.home-page .hq-col h3{
  margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line-navy);
  font-size:clamp(19px,1.6vw,22px);font-weight:600;line-height:1.3;
}
.home-page .hq-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.home-page .hq-list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px;font-size:16px;line-height:1.55;color:var(--on-navy)}
.home-page .hq-n{font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--emerald)}
@media (max-width:900px){
  .home-page .hq-cols{grid-template-columns:minmax(0,1fr);gap:40px}
}

/* ------------------------------------------ Why work with METRIS */

/* two columns of reasons, a bold lead and a line or two each; no icons.
   The services list on cream uses the same grid. */
.home-page .hw-grid{
  list-style:none;margin:40px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px clamp(32px,4vw,64px);
}
.home-page .hw-grid li{
  padding-top:16px;border-top:1px solid var(--line-cream);
  font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--on-cream);
}
.home-page .hw-grid strong{font-weight:700}
@media (max-width:767px){
  .home-page .hw-grid{grid-template-columns:minmax(0,1fr);gap:22px}
}

/* --------------------------------------------------- Our products */

.home-page .hp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
.home-page .hp-item{display:flex;flex-direction:column}
.home-page .hp-item h3{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 12px}
.home-page .hp-item h3 .illus{color:var(--emerald);border-color:var(--emerald);font-family:var(--mono);font-weight:500}
.home-page .hp-item p{margin:0;font-size:16px;line-height:1.6;color:var(--muted-navy)}
.home-page .hp-item .hp-link{margin-top:auto;padding-top:22px}
.home-page .hp-link a{font-weight:600;color:var(--emerald);text-decoration:none}
.home-page .hp-link a:hover{text-decoration:underline;text-underline-offset:3px;background:var(--hover-tint);box-shadow:0 0 0 3px var(--hover-tint);border-radius:4px}
.home-page .hp-link a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
@media (max-width:767px){
  .home-page .hp-grid{grid-template-columns:minmax(0,1fr)}
}

/* --------------------------------------------------- Our services */

.home-page .hs .hero-actions{margin-top:40px}

/* ------------------------------ Innovation and research (on navy) */

.home-page .hr-col p,
.home-page .hr-col .hc-list li{color:var(--on-navy)}