/* =========================================================================
   Home page redesign (Oct 2026): the investigation.
   Loaded only by index.html, on top of style.css. Motion follows the work
   itself: records get traced, mismatches get circled in red pencil, theories
   get crossed out, the root cause gets stamped. Every hidden starting state
   sits behind html.js, resting styles are the finished state, and
   prefers-reduced-motion (bottom of file) jumps everything to the end.
   ========================================================================= */

body { overflow-x: clip; }

@keyframes hm-wipe   { 0% { transform: scaleX(0); transform-origin: 0 50%; } 44% { transform: scaleX(1); transform-origin: 0 50%; } 46% { transform: scaleX(1); transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }
@keyframes hm-show   { 0%, 45% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes hm-pen    { from { stroke-dashoffset: 1; } }
@keyframes hm-in     { from { opacity: 0; transform: translateY(10px); } }
@keyframes hm-type   { from { clip-path: inset(0 100% 0 0); } }
@keyframes hm-ring   { from { transform: scale(1.8); opacity: 0; } }
@keyframes hm-popin  { from { transform: scale(0); opacity: 0; } }
@keyframes hm-stamp  { 0% { transform: scale(2.4) rotate(-14deg); opacity: 0; } 60% { transform: scale(.94) rotate(-4deg); opacity: 1; } 100% { transform: scale(1) rotate(-4deg); } }
@keyframes hm-ping   { 0% { box-shadow: 0 0 0 0 rgba(92,232,164,.55); } 100% { box-shadow: 0 0 0 9px rgba(92,232,164,0); } }
@keyframes hm-blink  { 50% { opacity: .35; } }
@keyframes hm-hunt   {
  0%, 20%   { left: 6.25%;  top: 10%; }
  25%, 45%  { left: 93.75%; top: 50%; }
  50%, 70%  { left: 18.75%; top: 90%; }
  75%, 95%  { left: 81.25%; top: 10%; }
  100%      { left: 6.25%;  top: 10%; }
}
@keyframes hm-huntdraw { 0% { stroke-dashoffset: 1; opacity: 1; } 22% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* =========================================================================
   Hero: copy on the left, the trace on the right
   ========================================================================= */
.hero.hm-hero {
  max-width: 1240px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 3.5rem;
  align-items: center;
}
.hm-hero .hero-sub { max-width: 560px; }
.hm-hero h1 { font-size: clamp(2.9rem, 4.8vw, 4.9rem); max-width: none; }
@media (min-width: 1061px) { .hm-ln { white-space: nowrap; } }

/* headline: each line is uncovered by a sliding redaction bar */
.hm-ln { display: block; }
.hm-w { position: relative; display: inline-block; }
.hm-txt { animation: hm-show 1s linear backwards; animation-delay: calc(var(--d, 0) * 1ms); }
.hm-bar { position: absolute; inset: .06em -.04em .02em; background: var(--cyan); transform: scaleX(0); animation: hm-wipe 1s cubic-bezier(.7,0,.3,1) backwards; animation-delay: calc(var(--d, 0) * 1ms); pointer-events: none; }
.hm-mark { position: relative; display: inline-block; }
.hm-circle { position: absolute; left: -9%; top: -14%; width: 118%; height: 130%; overflow: visible; pointer-events: none; }
.hm-circle path { fill: none; stroke: var(--pencil); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; animation: hm-pen .9s cubic-bezier(.6,0,.3,1) 1.35s backwards; }

/* crosshair that follows the pointer across the hero (fine pointers only, set up in JS) */
.hm-cross { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 0; }
.hero.hm-hover .hm-cross { opacity: 1; }
.hm-cross-x, .hm-cross-y { position: absolute; background: rgba(125,211,232,.22); }
.hm-cross-x { left: 0; right: 0; height: 1px; top: var(--y, 50%); }
.hm-cross-y { top: 0; bottom: 0; width: 1px; left: var(--x, 50%); }
.hm-cross-r { position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(10px, 8px); font-family: var(--font-label); font-size: 10px; letter-spacing: .12em; color: var(--cyan); white-space: nowrap; }
.hm-hero > :not(.hm-cross) { position: relative; z-index: 1; }

/* the trace: one symptom worked through to a ranked fix plan */
.hm-trace {
  margin: 0;
  background: var(--sheet-sunken);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-raised);
  padding: 1.1rem 1.2rem 1rem;
  display: flex; flex-direction: column; gap: .8rem;
  font-size: 14px;
}
.hm-tr-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--hairline); font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.hm-replay { display: none; font: inherit; color: var(--cyan); background: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .45rem .7rem; min-height: 32px; cursor: pointer; letter-spacing: .12em; text-transform: uppercase; }
html.js .hm-replay { display: inline-block; }
.hm-replay:hover { border-color: var(--cyan); color: var(--cyan-bright); }
.hm-tr-k { display: block; font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: .3rem; }
.hm-tr-step p { color: var(--text-soft); line-height: 1.45; margin: 0; }
.hm-tr-step.hm-s1 p { color: var(--text); font-size: 15px; }
.hm-tr-split { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.5fr); gap: .6rem; align-items: start; }
.hm-tr-card { border: 1px solid var(--hairline); background: var(--sheet-raised); padding: .65rem .7rem; height: 100%; }
.hm-neq { align-self: center; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--pencil); line-height: 1; }
.hm-tr-table { width: 100%; border-collapse: collapse; font-family: var(--font-label); font-size: 11px; }
.hm-tr-table th { text-align: left; font-weight: 400; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 0 .3rem .3rem 0; }
.hm-tr-table td { color: var(--text-soft); padding: .28rem .3rem .28rem 0; border-top: 1px solid var(--hairline); white-space: nowrap; }
.hm-bad { position: relative; display: inline-block; color: var(--pencil-bright); }
.hm-bad::after { content: ""; position: absolute; left: -.4rem; right: -.4rem; top: -.15rem; bottom: -.15rem; border: 1.5px solid var(--pencil); border-radius: 50%; }
.hm-cause { border-left: 2px solid var(--pencil); padding: .55rem .7rem; background: var(--pencil-tint); }
.hm-cause .hm-tr-k { color: var(--pencil-bright); }
.hm-cause p { color: var(--text); font-weight: 500; }
.hm-tr-step ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.hm-tr-step li { display: flex; gap: .55rem; color: var(--text-soft); }
.hm-tr-step li b { font-family: var(--font-label); font-weight: 500; font-size: 11px; color: var(--live); }
.hm-tr-note { font-family: var(--font-label); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); text-align: right; }

/* the trace plays once on load; Replay restarts it */
.hm-play .hm-s1 { animation: hm-in .5s var(--ease-out) .5s backwards; }
.hm-play .hm-s2 { animation: hm-in .5s var(--ease-out) 1s backwards; }
.hm-play .hm-s3 { animation: hm-in .5s var(--ease-out) 1.15s backwards; }
.hm-play .hm-tr-table tbody tr { animation: hm-type .45s steps(14, end) backwards; }
.hm-play .hm-tr-table tbody tr:nth-child(1) { animation-delay: 1.5s; }
.hm-play .hm-tr-table tbody tr:nth-child(2) { animation-delay: 1.75s; }
.hm-play .hm-tr-table tbody tr:nth-child(3) { animation-delay: 2s; }
.hm-play .hm-bad::after { animation: hm-ring .45s cubic-bezier(.3,1.4,.5,1) backwards; }
.hm-play tr:nth-child(1) .hm-bad::after { animation-delay: 2.6s; }
.hm-play tr:nth-child(2) .hm-bad::after { animation-delay: 2.9s; }
.hm-play .hm-neq { animation: hm-popin .4s cubic-bezier(.3,1.6,.5,1) 3.3s backwards; }
.hm-play .hm-cause { animation: hm-in .55s var(--ease-out) 3.7s backwards; }
.hm-play .hm-s5 { animation: hm-in .5s var(--ease-out) 4.3s backwards; }
.hm-play .hm-s5 li:nth-child(1) { animation: hm-in .4s var(--ease-out) 4.6s backwards; }
.hm-play .hm-s5 li:nth-child(2) { animation: hm-in .4s var(--ease-out) 4.85s backwards; }

/* =========================================================================
   Sections
   ========================================================================= */

/* section labels: the dimension line draws across */
html.js .reveal .section-label { border-bottom-color: transparent; background: linear-gradient(var(--line), var(--line)) left bottom / 0% 1px no-repeat; transition: background-size 1.1s var(--ease-out) .15s; }
html.js .reveal.in .section-label { background-size: 100% 1px; }
html.js .reveal .section-label::after { opacity: 0; transition: opacity .3s 1.1s; }
html.js .reveal.in .section-label::after { opacity: 1; }

/* figures decode into place (JS); keep their width steady while they do */
.ledger-fig, .case-stat-fig, .build-fig, .engage-price { font-variant-numeric: tabular-nums; }

/* gap strip: each theory gets crossed out in red pencil */
.gap-ico { width: 18px; height: 18px; margin-top: 3px; }
.gap-ico svg { display: block; width: 18px; height: 18px; overflow: visible; }
.gap-ico path { fill: none; stroke: var(--pencil); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gap-strip.in .gap-ico path { animation: hm-pen .35s cubic-bezier(.6,0,.3,1) backwards; }
.gap-strip.in .gap-item:nth-child(1) .gap-ico path:nth-child(1) { animation-delay: .5s; }
.gap-strip.in .gap-item:nth-child(1) .gap-ico path:nth-child(2) { animation-delay: .75s; }
.gap-strip.in .gap-item:nth-child(2) .gap-ico path:nth-child(1) { animation-delay: .95s; }
.gap-strip.in .gap-item:nth-child(2) .gap-ico path:nth-child(2) { animation-delay: 1.2s; }
.gap-strip.in .gap-item:nth-child(3) .gap-ico path:nth-child(1) { animation-delay: 1.4s; }
.gap-strip.in .gap-item:nth-child(3) .gap-ico path:nth-child(2) { animation-delay: 1.65s; }
html.js .gap-strip .gap-item p { transition: color .5s; }
html.js .gap-strip.in .gap-item p { color: var(--text-muted); transition-delay: 1.9s; }
html.js .gap-bridge-line { transform: scaleX(0); transition: transform 1.1s var(--ease-out) 2s; }
.gap-bridge-line:first-child { transform-origin: right; }
.gap-bridge-line:last-child { transform-origin: left; }
html.js .gap-strip.in .gap-bridge-line { transform: scaleX(1); }
html.js .gap-strip .gap-bridge-text { opacity: 0; transition: opacity .8s 2s; }
html.js .gap-strip.in .gap-bridge-text { opacity: 1; }

/* method: a 14-day Gantt chart, a playhead runs day 1 to 14 */
.hm-gantt { position: relative; margin-bottom: 1.5rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); background: var(--sheet-sunken); }
.hm-g-grid { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); column-gap: 3px; }
.hm-g-days span { font-family: var(--font-label); font-size: 10px; color: var(--text-faint); text-align: center; padding-bottom: .5rem; transition: color .2s; }
.hm-g-rows { grid-template-rows: repeat(4, 20px); row-gap: 6px; }
.hm-g-bar { height: 20px; display: flex; align-items: center; padding-left: .45rem; font-family: var(--font-label); font-size: 10px; letter-spacing: .1em; color: var(--sheet-sunken); background: var(--cyan); transform-origin: left; overflow: hidden; white-space: nowrap; }
.hm-g-bar:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
.hm-g-bar:nth-child(2) { grid-column: 4 / 9; grid-row: 2; }
.hm-g-bar:nth-child(3) { grid-column: 9 / 13; grid-row: 3; }
.hm-g-bar:nth-child(4) { grid-column: 13 / 15; grid-row: 4; background: var(--pencil); }
.hm-g-head { position: absolute; top: .6rem; bottom: .6rem; left: 1.1rem; width: 1px; background: var(--pencil-bright); box-shadow: 0 0 8px rgba(255,122,100,.7); opacity: 0; }
html.js #method .hm-g-bar { transform: scaleX(0); transition: transform .5s cubic-bezier(.6,0,.3,1); }
html.js #method.in .hm-g-bar { transform: scaleX(1); }
#method .hm-g-bar:nth-child(1) { transition-delay: .35s; }
#method .hm-g-bar:nth-child(2) { transition-delay: .95s; }
#method .hm-g-bar:nth-child(3) { transition-delay: 1.95s; }
#method .hm-g-bar:nth-child(4) { transition-delay: 2.75s; }
#method.in .hm-g-head { animation: hm-playhead 2.8s linear .3s both; }
@keyframes hm-playhead { 0% { opacity: 1; left: 1.1rem; } 92% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 1.1rem); } }
#method.in .hm-g-days span { color: var(--cyan-bright); }
#method .hm-g-days span:nth-child(1)  { transition-delay: .3s; }
#method .hm-g-days span:nth-child(2)  { transition-delay: .5s; }
#method .hm-g-days span:nth-child(3)  { transition-delay: .7s; }
#method .hm-g-days span:nth-child(4)  { transition-delay: .9s; }
#method .hm-g-days span:nth-child(5)  { transition-delay: 1.1s; }
#method .hm-g-days span:nth-child(6)  { transition-delay: 1.3s; }
#method .hm-g-days span:nth-child(7)  { transition-delay: 1.5s; }
#method .hm-g-days span:nth-child(8)  { transition-delay: 1.7s; }
#method .hm-g-days span:nth-child(9)  { transition-delay: 1.9s; }
#method .hm-g-days span:nth-child(10) { transition-delay: 2.1s; }
#method .hm-g-days span:nth-child(11) { transition-delay: 2.3s; }
#method .hm-g-days span:nth-child(12) { transition-delay: 2.5s; }
#method .hm-g-days span:nth-child(13) { transition-delay: 2.7s; }
#method .hm-g-days span:nth-child(14) { transition-delay: 2.9s; }
html.js #method .method-step { opacity: .3; transition: opacity .5s var(--ease-out); }
html.js #method.in .method-step { opacity: 1; }
#method .method-step:nth-child(1) { transition-delay: .35s; }
#method .method-step:nth-child(2) { transition-delay: .95s; }
#method .method-step:nth-child(3) { transition-delay: 1.95s; }
#method .method-step:nth-child(4) { transition-delay: 2.75s; }

/* case files: manila folders, each slides up and the root cause gets stamped */
.case-list { gap: 2.6rem; padding-top: 14px; }
.case-file { position: relative; transition: border-color .3s var(--ease); }
.case-file:hover { border-color: var(--line-strong); }
.case-file::before {
  content: ""; position: absolute; top: -15px; left: -1px; width: 150px; height: 15px;
  background: var(--sheet-raised); border: 1px solid var(--line); border-bottom: 0;
  clip-path: polygon(0 100%, 9% 0, 91% 0, 100% 100%);
}
html.js .case-file.hm-io { opacity: 0; transform: translateY(36px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), border-color .3s var(--ease); }
html.js .case-file.hm-in { opacity: 1; transform: none; }
.case-body dt.is-cause {
  justify-self: start; align-self: start;
  border: 2px solid var(--pencil); color: var(--pencil-bright);
  padding: .15rem .45rem; border-radius: 2px; font-weight: 500;
  transform: rotate(-4deg);
}
.case-file.hm-in dt.is-cause { animation: hm-stamp .45s cubic-bezier(.3,1,.5,1) .6s backwards; }
.case-body dd.is-cause { border-left: 2px solid var(--pencil); padding-left: .8rem; }

/* builds: a production board, status lights come on row by row */
.build-row { position: relative; padding-left: 1.6rem; transition: background .25s; }
.build-row:hover { background: rgba(125,211,232,.04); }
.hm-led { position: absolute; left: .3rem; top: 1.55rem; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: hm-ping 2.4s ease-out infinite; }
html.js #builds .hm-led { background: transparent; box-shadow: inset 0 0 0 1px var(--text-faint); animation: none; transition: background .2s, box-shadow .2s; }
html.js #builds.in .hm-led { background: var(--live); box-shadow: none; animation: hm-ping 2.4s ease-out infinite; }
html.js #builds .build-row { opacity: .35; transition: opacity .4s, background .25s; }
html.js #builds.in .build-row { opacity: 1; }
#builds .build-row:nth-child(1), #builds .build-row:nth-child(1) .hm-led { transition-delay: .3s; animation-delay: .3s; }
#builds .build-row:nth-child(2), #builds .build-row:nth-child(2) .hm-led { transition-delay: .55s; animation-delay: .55s; }
#builds .build-row:nth-child(3), #builds .build-row:nth-child(3) .hm-led { transition-delay: .8s; animation-delay: .8s; }
#builds .build-row:nth-child(4), #builds .build-row:nth-child(4) .hm-led { transition-delay: 1.05s; animation-delay: 1.05s; }
#builds .build-row:nth-child(5), #builds .build-row:nth-child(5) .hm-led { transition-delay: 1.3s; animation-delay: 1.3s; }
#builds .build-row:nth-child(6), #builds .build-row:nth-child(6) .hm-led { transition-delay: 1.55s; animation-delay: 1.55s; }
.build-link { display: inline-block; transition: color .2s, transform .25s var(--ease); }
.build-link:hover { transform: translateX(4px); }

/* pricing: the sample report slides out of the folder, then the three steps connect */
html.js #pricing .sample-banner { opacity: 0; transform: translateY(40px) rotate(-1.5deg); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
html.js #pricing.in .sample-banner { opacity: 1; transform: none; }
.engage-card { transition: border-color .3s; }
.engage-card:hover { border-color: var(--line-strong); }
@media (min-width: 861px) {
  .engage-card + .engage-card::before { content: ""; position: absolute; left: -1.25rem; top: 50%; width: 1.25rem; height: 1px; background: var(--pencil); transform-origin: left; }
  .engage-card + .engage-card::after { content: ""; position: absolute; left: -7px; top: calc(50% - 4px); width: 7px; height: 7px; border-top: 1px solid var(--pencil); border-right: 1px solid var(--pencil); transform: rotate(45deg); }
  html.js #pricing .engage-card + .engage-card::before { transform: scaleX(0); transition: transform .4s var(--ease-out); }
  html.js #pricing .engage-card + .engage-card::after { opacity: 0; transition: opacity .2s; }
  html.js #pricing.in .engage-card + .engage-card::before { transform: scaleX(1); }
  html.js #pricing.in .engage-card + .engage-card::after { opacity: 1; }
  #pricing .engage-card:nth-child(2)::before { transition-delay: 1s; }
  #pricing .engage-card:nth-child(2)::after { transition-delay: 1.35s; }
  #pricing .engage-card:nth-child(3)::before { transition-delay: 1.5s; }
  #pricing .engage-card:nth-child(3)::after { transition-delay: 1.85s; }
}
html.js #pricing .engage-card { opacity: 0; transition: opacity .6s var(--ease-out), border-color .3s; }
html.js #pricing.in .engage-card { opacity: 1; }
#pricing .engage-card:nth-child(1) { transition-delay: .5s; }
#pricing .engage-card:nth-child(2) { transition-delay: 1.1s; }
#pricing .engage-card:nth-child(3) { transition-delay: 1.6s; }

/* about: a pencil signature under the name */
.about-lead { position: relative; display: inline-block; padding-bottom: .35em; }
.hm-sig { position: absolute; left: 0; bottom: 0; width: 100%; height: .3em; overflow: visible; }
.hm-sig path { fill: none; stroke: var(--pencil); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
#about.in .hm-sig path { animation: hm-pen 1.3s cubic-bezier(.6,0,.3,1) .4s backwards; }

/* closing question: a field of figures, a red circle hunts across it */
.cta-section { position: relative; overflow: hidden; isolation: isolate; }
.hm-field {
  position: absolute; inset: 1rem 0; z-index: -1; pointer-events: none;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr);
  align-items: center; justify-items: center;
  font-family: var(--font-label); font-size: 13px; color: var(--text-faint); letter-spacing: .04em;
  -webkit-mask-image: radial-gradient(ellipse 46% 42% at 50% 48%, transparent 0 55%, #000 100%);
  mask-image: radial-gradient(ellipse 46% 42% at 50% 48%, transparent 0 55%, #000 100%);
}
.hm-hunt { position: absolute; width: 84px; height: 44px; transform: translate(-50%, -50%); animation: hm-hunt 12s cubic-bezier(.6,0,.3,1) infinite; }
.hm-hunt svg { width: 100%; height: 100%; overflow: visible; }
.hm-hunt path { fill: none; stroke: var(--pencil); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; animation: hm-huntdraw 3s ease-in-out infinite; }

/* title block cells settle in */
html.js footer.title-block.hm-io .tb-cell { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
html.js footer.title-block.hm-in .tb-cell { opacity: 1; transform: none; }
footer.title-block .tb-cell:nth-child(2) { transition-delay: .1s; }
footer.title-block .tb-cell:nth-child(3) { transition-delay: .2s; }
footer.title-block .tb-cell:nth-child(4) { transition-delay: .3s; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1060px) {
  .hero.hm-hero { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hm-trace { max-width: 560px; }
  .hm-cross { display: none; }
}
@media (max-width: 640px) {
  .hm-tr-split { grid-template-columns: minmax(0, 1fr); }
  .hm-neq { justify-self: center; }
  .hm-g-days span { font-size: 9px; }
  .hm-g-bar { font-size: 0; padding: 0; }
  .hm-field { grid-template-columns: repeat(4, 1fr); }
  .hm-field span:nth-child(n+21) { display: none; }
  .hm-hunt { display: none; }
}

/* reduced motion: every animation and transition jumps to its finished state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0s !important;
  }
  .hm-hunt, .hm-g-head, .hm-cross { display: none; }
}