/* 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}

/* Below the headline: the two ledes and the button on the left, the study
   figure on the right, its top level with the first lede. */
.home-page .hero-row{
  display:grid;
  grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
  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:6px 0 0;min-width:0}
.home-page .hero-fig svg{display:block;width:100%;height:auto;overflow:visible}

/* 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(--on-navy)}
.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-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;margin-top:8px}
  .home-page .hero-note{margin-left:0;text-align:left}
}
@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}
}

/* 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-agree{stroke:var(--muted-navy);stroke-opacity:.9}
.hf-est{stroke:var(--red-on-navy)}
.hf-true{stroke:var(--red-on-navy);stroke-opacity:.75}
.hf-band{fill:var(--red-on-navy);fill-opacity:.16}
.hf-rule{stroke:var(--on-navy);stroke-opacity:.09}
.hf-flagline{stroke:var(--emerald);stroke-opacity:.75}
.hf-dot{fill:var(--emerald);stroke:var(--navy)}
.hf-lab{font-family:var(--mono);font-size:22px}
.hf-lab--agree{fill:var(--muted-navy)}
.hf-lab--est{fill:var(--red-on-navy)}
.hf-lab--flag{fill:var(--emerald)}

@media (prefers-reduced-motion:no-preference){
  .hf-all{animation:hf-all 6.4s linear infinite}
  .hf-agree,.hf-est,.hf-mask{stroke-dasharray:1;stroke-dashoffset:0}
  .hf-agree{animation:hf-agree 6.4s linear infinite}
  .hf-est{animation:hf-est 6.4s linear infinite}
  .hf-mask{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{transform-box:fill-box;transform-origin:center;animation:hf-pulse 6.4s ease-in-out infinite}
}
@keyframes hf-all{0%,80%{opacity:1}92.5%,100%{opacity:0}}
@keyframes hf-agree{0%{stroke-dashoffset:1}16%,100%{stroke-dashoffset:0}}
@keyframes hf-est{0%,12%{stroke-dashoffset:1}28%,100%{stroke-dashoffset:0}}
@keyframes hf-true{0%,25%{stroke-dashoffset:1}39%,100%{stroke-dashoffset:0}}
@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)}}

/* --------------------------------------------------- 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}
.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 Debrief, in the nav bar's row

   On the home page the chip sits in the header's own row, just before the
   button, and its panel drops below the header. Its words hide below 1500px
   so the row never overflows; the chip keeps its full name for screen
   readers either way. */
.nav-end{display:flex;align-items:center;gap:12px}
.nav .dbf{position:relative;top:auto;right:auto;z-index:auto;--debrief-top:var(--nav-h,72px)}
.nav .dbf-panel{position:absolute;top:calc(100% + 18px);right:0}
@media (max-width:1499px){.nav .dbf-chip .dbf-label{display:none}}
@media (max-width:767px){
  .nav .dbf{position:absolute;top:calc(100% + 12px);right:12px;--debrief-top:calc(var(--nav-h,72px) + 64px)}
  .nav .dbf-panel{top:calc(100% + 8px)}
}

/* 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}}