/* ============================================================
   TechMils — experience layer
   Live figures, motion and interaction on top of site.css and
   refinements.css. Everything here is progressive: without
   JavaScript, or with reduced motion, each part shows its
   finished state.
   ============================================================ */
:root {
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --grid-dot: rgba(22, 36, 58, .13);
  --plate: #f6f4ee;
  interpolate-size: allow-keywords;
}

/* ---- page-to-page cross-fade (browsers that support it) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; }
.nav { view-transition-name: site-nav; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes line-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes stroke-in { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes soft-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.5); opacity: .35; } }
@keyframes ring-out { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.9); opacity: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================ NAV, BUTTONS, LINKS */
/* Brand lockup: a larger mark, the name, and a small descriptor line under it. */
.brand { gap: .8rem; }
.brand-logo { width: 46px; height: 46px; transition: transform .7s var(--ease); }
.brand:hover .brand-logo, .brand:focus-visible .brand-logo { transform: rotate(-14deg) scale(1.06); }
.brand-name { display: flex; flex-direction: column; gap: .3rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.brand-tag { color: var(--orange-dark); font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: .16em; line-height: 1; text-transform: uppercase; white-space: nowrap; transition: color .3s, letter-spacing .5s var(--ease); }
.brand:hover .brand-tag, .brand:focus-visible .brand-tag { color: #c75400; letter-spacing: .19em; }
.footer .brand-logo { width: 42px; height: 42px; }
.footer .brand-name { font-size: 1.4rem; }
.footer .brand-tag, .footer .brand:hover .brand-tag { color: #ffb575; }
.nav-link { position: relative; }
.nav-link.active { box-shadow: none; }
.nav-link::after { position: absolute; right: 0; bottom: 5px; left: 0; height: 2px; background: var(--orange); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-link:hover::after, .nav-link.active::after, .has-menu:focus-within .nav-link::after { transform: scaleX(1); }
.nav-menu a { transition: background .2s, padding-left .25s var(--ease); }
.nav-menu a:hover { padding-left: 1rem; }
.scroll-progress { width: 100%; transform: scaleX(0); transform-origin: left; will-change: transform; }

.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { --btn-fill: var(--night); --btn-fill-ink: var(--paper-bright); }
.btn-primary::before { position: absolute; inset: 0; z-index: -1; background: var(--btn-fill); content: ""; transform: translateY(102%); transition: transform .4s var(--ease); }
.btn-primary:hover { background: var(--orange); color: var(--btn-fill-ink); }
.btn-primary:hover::before, .btn-primary:focus-visible::before { transform: none; }
.btn-primary:focus-visible { color: var(--btn-fill-ink); }
.patriage-hero .btn-primary, .product-feature .btn-primary, .form-card .btn-primary { --btn-fill: var(--paper-bright); --btn-fill-ink: var(--night); }
.patriage-hero .btn-primary:hover, .product-feature .btn-primary:hover, .form-card .btn-primary:hover { background: var(--orange); color: var(--night); }
.cta-band .btn-primary { --btn-fill: var(--paper-bright); --btn-fill-ink: var(--night); }
.cta-band .btn-primary:hover { background: var(--night); color: var(--night); }
.btn:disabled::before { display: none; }

.text-link { transition: color .2s, text-decoration-color .2s; }
.text-link:hover { text-decoration-color: currentColor; }
.text-link > span[aria-hidden] { display: inline-block; transition: transform .3s var(--ease); }
.text-link:hover > span[aria-hidden] { transform: translateX(4px); }

/* The short rule in front of section labels draws in with its section. */
.eyebrow-mark { transform-origin: left; }
.js .reveal:not(.in) .eyebrow-mark { transform: scaleX(0); }
.reveal.in .eyebrow-mark { transition: transform .7s var(--ease) .25s; }

/* ============================================================ HOME HERO */
.home-hero--figure { position: relative; isolation: isolate; padding-block: clamp(2.4rem, 3.4vw, 3.4rem) clamp(3.2rem, 5vw, 5rem); }
.home-hero--figure::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1.5px);
  background-size: 24px 24px;
  content: "";
  -webkit-mask-image: radial-gradient(115% 95% at 80% 36%, #000 0%, rgba(0,0,0,.5) 40%, transparent 74%);
  mask-image: radial-gradient(115% 95% at 80% 36%, #000 0%, rgba(0,0,0,.5) 40%, transparent 74%);
  pointer-events: none;
}
.home-hero--figure h1 { margin-bottom: 1.6rem; }
@media screen and (min-width: 761px) { .home-hero--figure h1 { font-size: clamp(3.3rem, 6.1vw, 5.8rem); } }
.h1-line { display: block; overflow: hidden; margin-bottom: -.16em; padding-bottom: .16em; }
.h1-line > span { display: inline-block; animation: line-rise .95s var(--ease) both; }
.h1-line + .h1-line > span { padding-right: .08em; animation-delay: .1s; }
.home-hero--figure h1 em { position: relative; white-space: nowrap; }
.h1-stroke { position: absolute; bottom: -.07em; left: 0; width: 95%; height: .2em; overflow: visible; }
.h1-stroke path { fill: none; stroke: var(--orange); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: stroke-in .8s var(--ease-io) .85s forwards; }
.home-hero--figure .hero-copy > .eyebrow { animation: fade-up .8s var(--ease) both; }
.home-hero--figure .hero-copy > .lead { animation: fade-up .9s var(--ease) .28s both; }
.home-hero--figure .hero-copy > .btn-row { animation: fade-up .9s var(--ease) .4s both; }
.home-hero--figure .hero-copy > .hero-meta { margin-top: 2rem; animation: fade-up .9s var(--ease) .52s both; }
.hero-meta { max-width: none; gap: .5rem 1.25rem; font-size: .69rem; }

/* ---- Fig. 01: the live example ---- */
.hero-figure { position: relative; isolation: isolate; animation: fade-up 1s var(--ease) .18s both; }
.hero-figure-frame { position: relative; }
.hero-figure-frame::before { position: absolute; inset: 9px -9px -9px 9px; z-index: -1; border: 1px solid #dad8d0; border-radius: 2px; background: #efece4; content: ""; }
.hero-figure-label { margin-bottom: .9rem; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1.15rem; }
.demo-bar[hidden] { display: none; }
.demo-tabs { display: flex; gap: .2rem; padding: .2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.demo-tab { min-height: 32px; padding: .3rem .85rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted-ink); cursor: pointer; font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; transition: color .2s, background .3s var(--ease); }
.demo-tab:hover { color: var(--ink); }
.demo-tab[aria-selected="true"] { background: var(--night); color: var(--paper-bright); }
.demo-replay { display: grid; flex: none; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted-ink); cursor: pointer; transition: color .2s, border-color .2s, transform .6s var(--ease); }
.demo-replay:hover { border-color: var(--ink); color: var(--ink); transform: rotate(-90deg); }
.demo-replay:active { transform: rotate(-360deg); }

.hero-question p { min-height: 1.2em; }
.hero-molecule { max-width: 380px; margin-block: .5rem .35rem; }
.mol-lead { fill: none; stroke: var(--orange); stroke-width: 1.2; stroke-dasharray: 3 4; transition: stroke-width .25s, opacity .4s; }
.mol-node { fill: var(--orange); stroke: #fffefb; stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease), fill .3s, stroke .3s; }
.mol-tag { fill: var(--orange-dark); font-family: var(--font-mono); font-size: 11px; font-weight: 600; transition: opacity .4s; }
.mol-hit { fill: transparent; }
.mol-ref.is-hl .mol-node { transform: scale(1.75); }
.mol-ref.is-hl .mol-lead { stroke-width: 2; }

.hero-figure .evidence-rows li { margin-inline: -.6rem; padding-inline: .6rem; transition: background .25s, box-shadow .25s, opacity .35s; }
.hero-figure .evidence-rows li.is-hl { background: rgba(255,121,0,.1); box-shadow: inset 3px 0 0 var(--orange); }
.hero-figure.has-hl .evidence-rows li:not(.is-hl) { opacity: .5; }
.evidence-rows i { transition: color .3s; }
.evidence-rows i::before { transition: background .3s, box-shadow .3s; }

.hero-answer p { min-height: 4.65em; }
.claim { border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background .25s; }
.claim.is-hl { background: rgba(255,121,0,.18); }
.cite { display: inline-flex; min-width: 1.75em; height: 1.4em; align-items: center; justify-content: center; margin-left: .22em; padding: 0 .3em; border: 1px solid rgba(6,111,101,.38); border-radius: 3px; background: #fffefb; color: var(--teal); font-family: var(--font-mono); font-size: .66rem; font-weight: 600; line-height: 1; vertical-align: .14em; transition: background .2s, color .2s, border-color .2s; }
button.cite { cursor: pointer; }
.cite.is-hl, button.cite:hover, .cite[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: #fff; }
.tok { display: inline-block; }

/* Armed by the script: the example plays once it is on screen. */
.is-armed .tok { opacity: 0; transform: translateY(.4em); }
.is-armed .show .tok { opacity: 1; transform: none; transition: opacity .3s ease-out calc(var(--i, 0) * 34ms), transform .45s var(--ease) calc(var(--i, 0) * 34ms), background .2s, color .2s, border-color .2s; }
.is-armed .mol-bonds > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-armed .mol-atoms { opacity: 0; }
.is-armed.mol-on .mol-bonds > * { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-io); }
.is-armed.mol-on .mol-bonds > :nth-child(n+3) { transition-delay: .15s; }
.is-armed.mol-on .mol-bonds > :nth-child(n+4) { transition-delay: .3s; }
.is-armed.mol-on .mol-atoms { opacity: 1; transition: opacity .5s .55s; }
.is-armed .mol-ref:not(.is-on) .mol-node { fill: #fffefb; stroke: var(--line-strong); stroke-width: 1.4; transform: scale(.7); }
.is-armed .mol-ref:not(.is-on) .mol-lead, .is-armed .mol-ref:not(.is-on) .mol-tag { opacity: 0; }
.is-armed:not(.mol-on) .mol-ref { opacity: 0; }
.is-armed .mol-ref { transition: opacity .4s .5s; }
.is-armed .evidence-rows li:not(.is-checking):not(.is-done) { opacity: .34; }
.is-armed .evidence-rows li:not(.is-done) i { color: transparent; }
.is-armed .evidence-rows li:not(.is-done):not(.is-checking) i::before { background: var(--line-strong); box-shadow: none; }
.is-armed .evidence-rows li.is-checking { background: rgba(255,121,0,.07); }
.is-armed .evidence-rows li.is-checking i::before { background: var(--orange); box-shadow: none; animation: soft-pulse .75s ease-in-out infinite; }
.is-armed .hero-answer { opacity: 0; transform: translateY(10px); }
.is-armed .hero-answer.show { opacity: 1; transform: none; transition: opacity .45s, transform .6s var(--ease); }

/* ============================================================ SOURCE STRIP */
.source-strip { border-block: 1px solid var(--line); background: var(--paper); }
.source-strip-inner { display: grid; grid-template-columns: minmax(150px, 13rem) minmax(0, 1fr); align-items: center; gap: 1rem clamp(1.5rem, 4vw, 4rem); padding-block: 1.35rem; }
.source-strip-label { max-width: 17ch; color: var(--orange-dark); font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .09em; line-height: 1.5; text-transform: uppercase; }
.source-strip ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem 1.5rem; list-style: none; }
.source-strip li { display: flex; align-items: center; gap: .55rem; color: var(--ink-2); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.source-strip li::before { flex: none; width: 5px; height: 5px; border-radius: 1px; background: var(--teal); content: ""; }

/* ============================================================ WHAT WE BUILD */
.capability-ledger { position: relative; z-index: 0; }
.capability-row { position: relative; grid-template-columns: 55px minmax(0, 1fr) minmax(0, .88fr); align-items: center; gap: clamp(1.5rem, 3.6vw, 3.6rem); padding: clamp(2.2rem, 3.6vw, 3.2rem) 0; }
.capability-row::before { position: absolute; inset: 0 -1rem; z-index: -1; background: var(--paper); content: ""; opacity: 0; transition: opacity .4s; }
.capability-row:hover::before { opacity: 1; }
.capability-id { align-self: start; padding-top: .35rem; }
.capability-id > span { transition: color .3s; }
.capability-row:hover .capability-id > span { color: var(--orange-dark); }
.capability-copy { display: block; }
.capability-label { margin-bottom: .9rem; }
.capability-copy h3 { max-width: 17ch; margin-bottom: 1.05rem; }
.capability-detail { max-width: 52ch; }

.cap-fig { min-width: 0; margin: 0; }
.cap-plate { position: relative; overflow: hidden; padding: 1.1rem 1.2rem .95rem; border: 1px solid var(--line); border-radius: 3px; background: var(--plate) radial-gradient(circle at 1px 1px, rgba(22,36,58,.09) 1px, transparent 1.5px) 0 0 / 18px 18px; transition: border-color .3s, box-shadow .4s var(--ease); }
.capability-row:hover .cap-plate { border-color: var(--line-strong); box-shadow: 0 16px 40px rgba(22,36,58,.08); }
.cap-plate svg { width: 100%; max-width: 440px; height: auto; margin-inline: auto; overflow: visible; }
.cap-fig figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .65rem; color: var(--faint-ink); font-family: var(--font-mono); font-size: .69rem; font-weight: 500; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; }
.cap-fig figcaption span:first-child { flex: none; color: var(--orange-dark); font-weight: 600; }
.cap-fig figcaption span:last-child { text-align: right; }

.fig-ink { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fig-ink--bold { stroke-width: 2; }
.fig-faint { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.fig-dash { stroke-dasharray: 2 5; }
.fig-chip { fill: #fffefb; stroke: var(--line-strong); stroke-width: 1; }
.fig-t { fill: var(--ink); font-family: var(--font-display); font-size: 12px; font-weight: 650; letter-spacing: -.01em; }
.fig-t--on { fill: #fffefb; font-size: 10.5px; }
.fig-s { fill: var(--muted-ink); font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; }
.fig-node { fill: var(--night); }
.fig-ring { fill: none; stroke: var(--orange); stroke-width: 1.2; stroke-dasharray: 3 5; transform-box: fill-box; transform-origin: center; }
.fig-gate { fill: #fffefb; stroke: var(--orange); stroke-width: 1.6; stroke-linejoin: round; }
.fig-gate-ink { fill: none; stroke: var(--orange-dark); stroke-width: 1.3; stroke-linecap: round; }
.fig-doc { fill: #fffefb; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.fig-check { fill: var(--teal); stroke: var(--plate); stroke-width: 2; }
.fig-check-mark { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fig-scatter circle, .fig-rest { fill: rgba(22,36,58,.24); }
.fig-radius { fill: rgba(255,121,0,.07); stroke: var(--orange); stroke-width: 1; stroke-dasharray: 3 4; }
.fig-near { fill: var(--ink); stroke: var(--plate); stroke-width: 1.5; }
.fig-query { fill: var(--orange); stroke: var(--plate); stroke-width: 2; }
.fig-stop { fill: var(--plate); stroke: var(--ink); stroke-width: 1.6; }
.fig-pulse { fill: none; stroke: var(--orange); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.flow-dot { fill: var(--orange); opacity: 0; }

.cap-fig .d1 { --d: .2s; } .cap-fig .d2 { --d: .4s; } .cap-fig .d3 { --d: .6s; }
.cap-fig .d4 { --d: .8s; } .cap-fig .d5 { --d: 1s; } .cap-fig .d6 { --d: 1.2s; }
.cap-fig .pop { transform-box: fill-box; transform-origin: center; }
.js .reveal:not(.in) .cap-fig .pop { opacity: 0; transform: scale(.55); }
.reveal.in .cap-fig .pop { transition: opacity .45s ease-out calc(.2s + var(--d, 0s)), transform .6s var(--ease) calc(.2s + var(--d, 0s)); }
.js .cap-fig .draw { stroke-dasharray: 1; }
.js .reveal:not(.in) .cap-fig .draw { stroke-dashoffset: 1; }
.reveal.in .cap-fig .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-io) calc(.3s + var(--d, 0s)); }
.js .reveal:not(.in) .cap-fig .fig-ring { opacity: 0; }
.reveal.in .cap-fig .fig-ring { transition: opacity .6s .6s; animation: spin 9s linear 1 .6s; }
.capability-row:hover .fig-ring { animation: spin 9s linear infinite; }
.reveal.in .fig-pulse { animation: ring-out 1.4s ease-out 2 1.9s; }
.capability-row:hover .fig-pulse { animation: ring-out 1.4s ease-out infinite; }
.capability-row:hover .fig-radius { animation: soft-pulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flow { 0% { offset-distance: 0%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes flow-again { 0% { offset-distance: 0%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@supports (offset-path: path("M0 0 H1")) {
  .flow-dot--1 { offset-path: path("M68 34 C 96 34, 92 90, 117 90"); }
  .flow-dot--2 { offset-path: path("M68 90 H117"); }
  .flow-dot--3 { offset-path: path("M68 146 C 96 146, 92 90, 117 90"); }
  .flow-dot--4 { offset-path: path("M159 90 H250"); }
  .reveal.in .flow-dot { animation: flow 1.5s var(--ease-io) 2 1.5s both; }
  .reveal.in .flow-dot--2 { animation-delay: 1.65s; }
  .reveal.in .flow-dot--3 { animation-delay: 1.8s; }
  .reveal.in .flow-dot--4 { animation-delay: 2.5s; }
  .capability-row:hover .flow-dot { animation: flow-again 1.5s var(--ease-io) infinite both; }
  .capability-row:hover .flow-dot--2 { animation-delay: .15s; }
  .capability-row:hover .flow-dot--3 { animation-delay: .3s; }
  .capability-row:hover .flow-dot--4 { animation-delay: .9s; }
}

/* ============================================================ WHERE WE HELP */
.focus-grid { gap: 1rem; border: 0; }
.focus-grid .focus-item { position: relative; padding: 1.5rem 1.5rem 1.45rem; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-bright); }
.focus-grid .focus-item::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--orange); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.focus-grid .focus-item:hover::before, .focus-grid .focus-item:focus-within::before { transform: scaleX(1); }
.js .focus-grid .focus-item.in { transition: opacity .65s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.focus-grid .focus-item:hover, .focus-grid .focus-item:focus-within { border-color: var(--line-strong); box-shadow: 0 22px 48px rgba(22,36,58,.11); transform: translateY(-5px); }
.focus-top { display: flex; min-height: 40px; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.focus-top .item-index { font-size: .69rem; text-align: right; }
.focus-icon { flex: none; width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, transform .5s var(--ease); }
.focus-item:hover .focus-icon { stroke: var(--orange-dark); transform: rotate(-6deg) scale(1.06); }
.focus-grid .focus-item h3 { margin: 1.9rem 0 .7rem; }
.focus-grid .focus-item .text-link { position: static; }
.focus-grid .focus-item .text-link::after { position: absolute; inset: 0; content: ""; }

/* ============================================================ DARK STAGES */
[data-spotlight] { --mx: 78%; --my: 16%; }
.product-stage, .patriage-hero, .about-hero { position: relative; isolation: isolate; overflow: hidden; }
.product-stage::before, .patriage-hero::before, .about-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(560px circle at var(--mx) var(--my), rgba(255,121,0,.15), transparent 66%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.075) 1px, transparent 1.5px) 0 0 / 26px 26px;
  content: "";
  pointer-events: none;
}

/* The dossier preview: a small stack of pages that leans toward the pointer. */
.report-stack { perspective: 1400px; }
.report-stack::before, .report-stack::after { position: absolute; inset: 0; border: 1px solid rgba(22,36,58,.16); border-radius: 1px; content: ""; transition: transform .6s var(--ease); }
.report-stack::before { z-index: -2; background: #d8d4c8; transform: translate(12px, 12px) rotate(1.4deg); }
.report-stack::after { z-index: -1; background: #e8e5db; transform: translate(6px, 6px) rotate(.6deg); }
.report-stack:hover::before { transform: translate(20px, 16px) rotate(2.8deg); }
.report-stack:hover::after { transform: translate(10px, 8px) rotate(1.3deg); }
.report-paper { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .5s; }
.report-stack:hover .report-paper { box-shadow: 0 26px 60px rgba(0,0,0,.22); }
.js .reveal:not(.in) .report-metrics > div, .js .reveal:not(.in) .report-markets li, .js .reveal:not(.in) .report-recommendation { opacity: 0; transform: translateY(9px); }
.reveal.in .report-metrics > div, .reveal.in .report-markets li, .reveal.in .report-recommendation { transition: opacity .5s ease-out, transform .6s var(--ease); }
.reveal.in .report-metrics > div:nth-child(1) { transition-delay: .3s; }
.reveal.in .report-metrics > div:nth-child(2) { transition-delay: .38s; }
.reveal.in .report-metrics > div:nth-child(3) { transition-delay: .46s; }
.reveal.in .report-markets li:nth-child(1) { transition-delay: .58s; }
.reveal.in .report-markets li:nth-child(2) { transition-delay: .68s; }
.reveal.in .report-markets li:nth-child(3) { transition-delay: .78s; }
.reveal.in .report-recommendation { transition-delay: .95s; }

/* ============================================================ HOW WE WORK */
.principle-list { --p: 1; border-top: 0; }
.js .principle-list[data-progress] { --p: 0; }
.principle-list::before, .principle-list::after { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; content: ""; }
.principle-list::before { background: var(--line); }
.principle-list::after { background: var(--orange); transform: scaleY(var(--p)); transform-origin: top; }
.principle-list article { position: relative; padding-left: 2.1rem; transition: opacity .45s; }
.principle-list article::before { position: absolute; top: 2.05rem; left: -5px; width: 12px; height: 12px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--paper-bright); content: ""; transition: border-color .3s, background .3s, box-shadow .3s; }
.principle-list article > span { transition: color .3s; }
.js .principle-list[data-progress] article:not(.is-active) { opacity: .5; }
.principle-list article.is-active::before { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 5px rgba(255,121,0,.16); }
.principle-list article.is-active > span { color: var(--orange-dark); }

/* ============================================================ FOUNDER */
.founder-id { display: flex; align-items: center; gap: 1.15rem; margin-bottom: 1.6rem; }
.founder-monogram { display: grid; flex: none; width: 68px; height: 68px; place-items: center; border-radius: 50%; background: var(--night); box-shadow: 0 0 0 5px var(--paper-2), 0 0 0 6px var(--line-strong); color: #ffb575; font-family: var(--font-serif); font-size: 1.6rem; font-style: italic; font-weight: 500; letter-spacing: -.02em; }
.founder-grid .founder-id h3 { margin: 0; }
.founder-grid .founder-id h3 span { margin: .35rem 0 0; }
.founder-credentials li { position: relative; padding-left: 1.6rem; }
.founder-credentials li::before { position: absolute; top: 1.05rem; left: .1rem; width: 9px; height: 5px; border-bottom: 2px solid var(--teal); border-left: 2px solid var(--teal); content: ""; transform: rotate(-45deg); }

/* ============================================================ CTA + FOOTER */
.cta-inner { isolation: isolate; }
.cta-inner::before { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 1px 1px, rgba(17,28,48,.2) 1px, transparent 1.5px) 0 0 / 22px 22px; content: ""; -webkit-mask-image: linear-gradient(105deg, transparent 38%, #000 100%); mask-image: linear-gradient(105deg, transparent 38%, #000 100%); pointer-events: none; }
.footer { overflow: hidden; }
.footer-wordmark {
  --mx: -999px;
  --my: -999px;
  max-width: var(--maxw);
  margin: clamp(.5rem, 2vw, 1.5rem) auto -.2em;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  background: radial-gradient(460px circle at var(--mx) var(--my), rgba(255,121,0,.7), rgba(255,121,0,0) 68%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(4.4rem, 19.5vw, 17.5rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .82;
  -webkit-text-stroke: 1px rgba(255,255,255,.16);
  white-space: nowrap;
  user-select: none;
}

/* ============================================================ PATRIAGE PAGE */
body:has(.product-nav) .nav { position: relative; }
.product-nav { position: sticky; top: 0; z-index: 900; background: rgba(255,254,251,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: box-shadow .3s; }
.product-nav.is-stuck { box-shadow: 0 10px 30px rgba(22,36,58,.08); }
.product-nav-wrap { display: flex; align-items: center; gap: 1.5rem; }
.product-nav-inner { position: relative; flex: 1; min-width: 0; }
.product-nav-brand span { margin-left: .45rem; }
.product-nav a:not(.btn) { position: relative; transition: color .2s; }
.product-nav a:not(.btn)::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--orange); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.product-nav a:not(.btn):hover::after, .product-nav a[aria-current]::after { transform: scaleX(1); }
.product-nav a[aria-current] { color: var(--ink); }
.product-nav a.btn { flex: none; min-height: 38px; color: var(--night); font-size: .82rem; }
.product-nav a.btn:hover { color: var(--paper-bright); }
.js .product-nav-cta { visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease), visibility .3s, color .2s; }
.js .product-nav.is-stuck .product-nav-cta { visibility: visible; opacity: 1; transform: none; }

.js .dossier-page:not([hidden]) { animation: panel-in .5s var(--ease) both; }
.report-tab { transition: color .2s, background .25s, border-color .25s, box-shadow .25s; }

.analysis-grid { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 4px; }
.analysis-grid .analysis-card { position: relative; padding: clamp(1.6rem, 2.6vw, 2.3rem) clamp(1.4rem, 2.8vw, 2.5rem) clamp(1.7rem, 2.8vw, 2.4rem); transition: background .35s; }
.analysis-grid .analysis-card:nth-last-child(-n+2) { border-bottom: 0; }
.analysis-grid .analysis-card:hover { background: var(--paper); }
.analysis-card-top svg { stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, transform .5s var(--ease); }
.analysis-card:hover .analysis-card-top svg { stroke: var(--orange); transform: translateY(-3px) scale(1.08); }
.analysis-output b { transition: color .3s; }

.process-rail { position: relative; border-top: 0; }
.process-rail::before, .process-rail::after { position: absolute; top: 23px; right: 0; left: 0; height: 2px; content: ""; }
.process-rail::before { background: var(--line-strong); }
.process-rail::after { background: var(--orange); transform-origin: left; }
.process-rail .process-step { display: block; padding: 0 clamp(1.2rem, 2.4vw, 2.2rem) .6rem 0; border: 0; }
.process-rail .process-step + .process-step { padding-left: 0; border-left: 0; }
.process-step > span { position: relative; z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 1.5rem; border: 2px solid var(--orange); border-radius: 50%; background: var(--orange); color: var(--night); font-family: var(--font-mono); font-size: .82rem; font-weight: 600; letter-spacing: 0; line-height: 1; }
.js .process-rail[data-inview]:not(.in)::after { transform: scaleX(0); }
.process-rail[data-inview].in::after { transition: transform 1.9s var(--ease-io) .2s; }
.js .process-rail[data-inview]:not(.in) .process-step > span { border-color: var(--line-strong); background: var(--paper-2); color: var(--muted-ink); }
.process-rail[data-inview].in .process-step > span { transition: background .4s, border-color .4s, color .4s; }
.process-rail[data-inview].in .process-step:nth-child(1) > span { transition-delay: .2s; }
.process-rail[data-inview].in .process-step:nth-child(2) > span { transition-delay: .85s; }
.process-rail[data-inview].in .process-step:nth-child(3) > span { transition-delay: 1.5s; }
.review-gate { max-width: none; align-items: center; margin-top: 2.2rem; padding: 1.15rem 1.4rem; border: 1px solid var(--line-strong); border-left: 4px solid var(--orange); border-radius: 3px; background: var(--paper-bright); }
.review-gate p { max-width: 86ch; }
.review-gate strong { display: inline; margin: 0 .35rem 0 0; }

.fit-stage { display: flex; max-width: none; flex-direction: column; gap: .6rem; margin: 1.4rem 0 0; }
.fit-dots { display: flex; gap: 5px; }
.fit-dots i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1.5px transparent; transition: background .45s, box-shadow .45s; }
.fit-col.is-patriage .fit-dots i { background: var(--orange); }
.fit-col:nth-child(3) .fit-dots i { background: var(--teal); }
.fit-col.is-patriage .fit-dots i:nth-child(n+6), .fit-col:nth-child(3) .fit-dots i:nth-child(n+3) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.js .fit-col.reveal:not(.in).is-patriage .fit-dots i { background: var(--orange); box-shadow: inset 0 0 0 1.5px transparent; }
.js .fit-col.reveal:not(.in):nth-child(3) .fit-dots i { background: var(--teal); box-shadow: inset 0 0 0 1.5px transparent; }
.fit-col.in .fit-dots i:nth-child(n+3) { transition-delay: .7s; }
.fit-col.in .fit-dots i:nth-child(n+6) { transition-delay: .85s; }
.fit-col.in .fit-dots i:nth-child(n+9) { transition-delay: 1s; }
.fit-stage small { color: var(--faint-ink); font-family: var(--font-mono); font-size: .69rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fit-col h3 { margin-top: 1.5rem; }

.coverage-board { min-width: 0; }
.coverage-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.coverage-filters[hidden] { display: none; }
.coverage-filter { display: inline-flex; min-height: 40px; align-items: center; gap: .55rem; padding: .4rem .95rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; font-size: .84rem; font-weight: 600; transition: background .25s, color .25s, border-color .25s; }
.coverage-filter:hover { border-color: var(--ink); }
.coverage-filter > span { color: var(--faint-ink); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; }
.coverage-filter > i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.coverage-filter.is-local > i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.coverage-filter[aria-pressed="true"] { border-color: var(--night); background: var(--night); color: var(--paper-bright); }
.coverage-filter[aria-pressed="true"] > span { color: #aeb9c9; }
.coverage-filter[aria-pressed="true"].is-assessed > i { background: var(--teal-bright); }
.coverage-count { max-width: none; margin-bottom: 1.2rem; color: var(--faint-ink); font-size: .84rem; }
.coverage-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; list-style: none; }
.coverage-tiles li { display: flex; min-width: 0; min-height: 116px; flex-direction: column; padding: .95rem 1rem .85rem; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper-bright); transition: opacity .35s, transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease); }
.coverage-tiles li:hover { border-color: var(--ink); box-shadow: 0 14px 32px rgba(22,36,58,.1); transform: translateY(-3px); }
.coverage-tiles b { color: var(--ink); font-family: var(--font-display); font-size: 1.5rem; font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.coverage-tiles span { margin-top: .5rem; color: var(--ink-2); font-size: .85rem; font-weight: 600; line-height: 1.3; }
.coverage-tiles small { display: flex; align-items: center; gap: .42rem; margin-top: auto; padding-top: .7rem; color: var(--teal); font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; }
.coverage-tiles small::before { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.coverage-tiles li[data-status="local"] { border-style: dashed; background: transparent; }
.coverage-tiles li[data-status="local"] b { color: var(--muted-ink); }
.coverage-tiles li[data-status="local"] small { color: var(--faint-ink); }
.coverage-tiles li[data-status="local"] small::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.coverage-tiles li.is-dim { opacity: .26; }

.plan-row { margin-inline: -1.25rem; padding-inline: 1.25rem; border-left: 4px solid transparent; transition: background .3s; }
.plan-row:not(.is-recommended):hover { background: rgba(22,36,58,.035); }
.plan-row.is-recommended { border-left-color: var(--orange); }

.faq-list summary { transition: color .2s; }
.faq-list summary:hover { color: var(--orange-dark); }
.faq-list summary > span { transition: transform .35s var(--ease); }
.faq-list details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .45s var(--ease), opacity .35s, content-visibility .45s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; opacity: 1; }

/* ============================================================ ABOUT + CONTACT */
.principle-cards .card { transition: background .35s; }
.principle-cards .card:hover { background: var(--paper-bright); }
.principle-cards .card-number { transition: color .3s; }
.principle-cards .card:hover .card-number { color: var(--orange); }
.company-facts div { transition: background .3s, padding .35s var(--ease); }
.company-facts div:hover { padding-inline: .8rem; background: var(--paper-bright); }

.contact-reasons article { transition: background .3s, box-shadow .3s, padding .35s var(--ease); }
.contact-reasons article.is-picked { padding-inline: 1rem; background: rgba(255,121,0,.07); box-shadow: inset 3px 0 0 var(--orange); }
.reason-pick { display: inline-flex; min-height: 32px; align-items: center; gap: .35rem; margin-top: .55rem; padding: 0; border: 0; background: none; color: var(--orange-dark); cursor: pointer; font-size: .86rem; font-weight: 680; text-decoration: underline; text-decoration-color: rgba(184,66,0,.28); text-underline-offset: 5px; }
.reason-pick[hidden] { display: none; }
.reason-pick:hover { text-decoration-color: currentColor; }
.reason-pick > span { display: inline-block; transition: transform .3s var(--ease); }
.reason-pick:hover > span { transform: translateX(4px); }
.reason-pick[aria-pressed="true"] { color: var(--teal); text-decoration: none; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1240px) {
  .hero-question p { min-height: 2.4em; }
}
@media (max-width: 1120px) {
  .coverage-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .capability-row { grid-template-columns: 55px minmax(0, 1fr); align-items: start; }
  .cap-fig { grid-column: 2; max-width: 520px; }
  .coverage-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .source-strip-inner { grid-template-columns: 1fr; }
  .source-strip-label { max-width: none; }
}
@media (max-width: 760px) {
  .nav-link::after { display: none; }
  .brand { gap: .7rem; }
  .brand-logo { width: 42px; height: 42px; }
  .brand-name { font-size: 1.4rem; }
  .brand-tag { font-size: .56rem; }
  .hero-figure-frame::before { inset: 6px -6px -6px 6px; }
  .home-hero--figure .hero-copy > .hero-meta { margin-top: 1.5rem; }
  .source-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-row { grid-template-columns: 28px minmax(0, 1fr); }
  .capability-row::before { inset-inline: 0; }
  .cap-fig { grid-column: 1 / -1; }
  .cap-plate { padding: .9rem .8rem .8rem; }
  .report-stack::before { transform: translate(7px, 8px) rotate(1deg); }
  .report-stack::after { transform: translate(4px, 4px) rotate(.4deg); }
  .report-stack:hover::before { transform: translate(7px, 8px) rotate(1deg); }
  .report-stack:hover::after { transform: translate(4px, 4px) rotate(.4deg); }
  .principle-list article { padding-left: 1.6rem; }
  .product-nav a.product-nav-cta { display: none; }
  .analysis-grid .analysis-card { padding: 1.6rem 1.25rem 1.7rem; }
  .process-rail::before, .process-rail::after { top: 0; right: auto; bottom: 0; left: 23px; width: 2px; height: auto; }
  .process-rail::after { transform-origin: top; }
  .js .process-rail[data-inview]:not(.in)::after { transform: scaleY(0); }
  .process-rail .process-step, .process-rail .process-step + .process-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1.1rem; padding: 0 0 2rem; }
  .process-rail .process-step:last-child { padding-bottom: .4rem; }
  .process-step > span { margin-bottom: 0; }
  .review-gate { align-items: flex-start; padding: 1rem 1.1rem; }
  .coverage-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-tiles li { min-height: 104px; }
  .plan-row, .plan-row.is-recommended { margin-inline: -.7rem; padding-inline: .7rem; }
  .founder-monogram { width: 58px; height: 58px; font-size: 1.4rem; }
}
@media (max-width: 560px) {
  .demo-tab { padding-inline: .62rem; font-size: .66rem; }
  .hero-answer p { min-height: 6.2em; }
  .analysis-grid .analysis-card { border-left: 0; }
  .analysis-grid .analysis-card:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .coverage-filter { padding-inline: .8rem; font-size: .8rem; }
}
@media (hover: none) {
  .focus-grid .focus-item:hover { box-shadow: none; transform: none; }
  .coverage-tiles li:hover { box-shadow: none; transform: none; }
}

/* ============================================================ ACCESSIBILITY + PRINT */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
  .h1-stroke path { stroke-dashoffset: 0; }
  .flow-dot, .fig-pulse { display: none; }
  .report-paper { transform: none; }
}
@media (forced-colors: active) {
  .demo-tab[aria-selected="true"], .coverage-filter[aria-pressed="true"] { border: 1px solid Highlight; }
  .footer-wordmark { color: CanvasText; -webkit-text-stroke: 0; background: none; }
  .fit-dots i, .coverage-tiles small::before, .mol-node { forced-color-adjust: none; }
}
@media print {
  .brand-logo { width: 9mm; height: 9mm; }
  .brand-name { gap: 1mm; font-size: 12pt; }
  .brand-tag { font-size: 5pt; }
  .demo-bar, .coverage-filters, .footer-wordmark, .product-nav-cta, .flow-dot, .fig-pulse, .fig-ring { display: none !important; }
  .home-hero--figure::before, .product-stage::before, .patriage-hero::before, .about-hero::before, .cta-inner::before, .hero-figure-frame::before { display: none; }
  .h1-line { overflow: visible; }
  .h1-stroke path, .cap-fig .draw { stroke-dashoffset: 0 !important; }
  .cap-fig .pop, .is-armed .tok, .is-armed .hero-answer, .report-metrics > div, .report-markets li, .report-recommendation, .principle-list article { opacity: 1 !important; transform: none !important; }
  .capability-row { grid-template-columns: 10mm minmax(0, 1fr) 58mm; align-items: center; }
  .cap-fig { grid-column: auto; }
  .cap-plate { padding: 2mm; }
  .focus-grid .focus-item { padding: 4mm; box-shadow: none; break-inside: avoid; }
  .product-nav { position: static; }
  .report-paper { transform: none !important; }
  .process-rail::after { transform: none !important; }
  .process-step > span { border-color: var(--orange) !important; background: var(--orange) !important; color: var(--night) !important; }
  .coverage-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .coverage-tiles li { min-height: 0; opacity: 1 !important; break-inside: avoid; }
  .plan-row, .plan-row.is-recommended { margin-inline: 0; }
  .principle-list { --p: 1 !important; }
}