@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;
  --canvas: #f7f8f6;
  --canvas-deep: #eef1ed;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f0f2ef;
  --ink: #11120f;
  --ink-soft: #30332e;
  --muted: #62655f;
  --muted-strong: #4d504a;
  --line: #d8dad5;
  --line-strong: #bcc0b9;
  --line-soft: #e7e9e5;
  --bronze: #a96634;
  --bronze-bright: #c57e43;
  --coral: #d06769;
  --signal: #2f8f88;
  --signal-bright: #4caea5;
  --signal-pale: #d8fffb;
  --bronze-text: #9c5c2d;
  --coral-text: #9e3540;
  --signal-text: #256f6a;
  /* A bronze that carries type on top of it, and the ink that stays legible
     there. The base --bronze is tuned for fills and strokes and drops to 4.4:1
     under white, just under the threshold. */
  --bronze-solid: #9c5c2d;
  --on-bronze: #ffffff;
  --form-error: #f0a39b;
  --form-success: #9cc9ae;
  --form-warning: #e8c07d;
  --form-hint: #9b978e;
  --night: #0b0b0a;
  --night-raised: #171716;
  --night-line: #353431;
  --bone: #f3f0e8;
  --error: #a63e36;
  --success: #25775f;
  --shadow-sm: 0 4px 8px rgba(17, 18, 15, .06);
  --shadow-md: 0 5px 8px rgba(17, 18, 15, .08);
  --font-display: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Nunito", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Type scale. Only the hero uses --type-display; every section heading sits a
     clear step below it so the page has one loud moment instead of six. */
  --type-display: clamp(2.5rem, 4.4vw, 4.25rem);
  --type-section: clamp(1.9rem, 3.1vw, 2.9rem);
  --type-sub: clamp(1.45rem, 2.1vw, 1.95rem);
  --type-lead: clamp(1rem, 1.15vw, 1.12rem);
  --type-body: 1rem;
  --page-gutter: clamp(1.1rem, 4vw, 4.5rem);
  --page-max: 96rem;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 9rem;
  --radius-sm: .35rem;
  --radius-md: .6rem;
  --radius-lg: .85rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --z-content: 1;
  --z-header: 40;
  --z-menu: 45;
  --z-skip: 60;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0b0b0a;
  --canvas-deep: #10110f;
  --surface: #151614;
  --surface-raised: #1b1c19;
  --surface-soft: #20211e;
  --ink: #f3f0e8;
  --ink-soft: #d7d4cc;
  --muted: #aaa69f;
  --muted-strong: #c2beb7;
  --line: #353431;
  --line-strong: #4d4b47;
  --line-soft: #262523;
  --bronze: #d49a62;
  --bronze-bright: #e1ad78;
  --coral: #e79aa0;
  --signal: #74cfc6;
  --signal-bright: #8be1d8;
  --signal-pale: #173936;
  --bronze-text: #d49a62;
  --coral-text: #e79aa0;
  --signal-text: #74cfc6;
  --bronze-solid: #d49a62;
  --on-bronze: #0b0b0a;
  --error: #f0a39b;
  --success: #9cc9ae;
  --shadow-sm: none;
  --shadow-md: none;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  background: var(--canvas);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color .45s var(--ease-out), color .3s var(--ease-out);
}

body.menu-open, body.modal-open { overflow: hidden; }

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
svg { overflow: visible; }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 {
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
}
p { min-width: 0; overflow-wrap: break-word; text-wrap: pretty; }

::selection { background: var(--signal-pale); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  transform: translateY(-160%);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--canvas);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

.ambient-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .42;
  transition: opacity .4s var(--ease-out);
}

html[data-theme="dark"] .ambient-canvas { opacity: .22; }

.section-shell {
  position: relative;
  z-index: var(--z-content);
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  z-index: var(--z-header);
  top: max(1rem, env(safe-area-inset-top));
  left: 50%;
  width: min(calc(100% - 2rem), 90rem);
  transform: translateX(-50%);
}

.nav-shell {
  position: relative;
  z-index: 2;
  display: flex;
  /* The collapse to the burger is a width query, and width queries do not
     re-evaluate under text-only zoom. Wrapping means the CTA drops to a second
     row instead of overflowing the bar and becoming unreachable (WCAG 1.4.4). */
  flex-wrap: wrap;
  row-gap: .35rem;
  align-items: center;
  min-height: 4rem;
  padding: .45rem .55rem .45rem .75rem;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 87%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
}

.site-header.is-scrolled .nav-shell { transform: translateY(-.25rem); }

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .65rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.025em;
  text-decoration: none;
}

.brand b { color: var(--bronze-text); font-weight: 600; }
.brand-mark { position: relative; display: block; flex: 0 0 auto; width: 1.65rem; height: 1.65rem; }
.brand-mark img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-mark__dark { display: none !important; }
html[data-theme="dark"] .brand-mark__light { display: none !important; }
html[data-theme="dark"] .brand-mark__dark { display: block !important; }

.nav-links {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-width: 0;
  margin-inline: auto;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: .85rem;
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}

.nav-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: .85rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--canvas);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta__full { display: none; }
.nav-cta__short { display: inline; }

.theme-toggle,
.menu-toggle {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.theme-toggle__track {
  position: relative;
  display: block;
  width: 2.6rem;
  height: 1.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: var(--surface-soft);
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}

.theme-toggle svg {
  position: absolute;
  z-index: 2;
  top: .27rem;
  width: .85rem;
  height: .85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
}

.theme-toggle__sun { left: .24rem; color: var(--bronze-text); }
.theme-toggle__moon { right: .22rem; color: var(--signal-text); }
.theme-toggle__thumb {
  position: absolute;
  z-index: 1;
  top: .16rem;
  left: .16rem;
  width: 1.02rem;
  height: 1.02rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 4px rgba(17, 18, 15, .14);
  transition: transform .35s var(--ease-out), background-color .3s var(--ease-out);
}

html[data-theme="dark"] .theme-toggle__thumb { transform: translateX(1.23rem); }

.menu-toggle { position: relative; }
.menu-toggle span:not(.sr-only) { position: absolute; top: 50%; left: 50%; width: 1.15rem; height: 1.5px; margin-left: -.575rem; border-radius: 1px; background: var(--ink); transition: transform .25s var(--ease-out); }
.menu-toggle span:not(.sr-only):nth-last-child(2) { transform: translateY(-3px); }
.menu-toggle span:not(.sr-only):last-child { transform: translateY(3px); }
.menu-toggle[aria-expanded="true"] span:nth-last-child(2) { transform: translateY(0) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(0) rotate(-45deg); }

.menu-scrim { position: fixed; z-index: 1; inset: 0; background: color-mix(in srgb, var(--night) 38%, transparent); }
.menu-scrim[hidden] { display: none !important; }

.mobile-menu {
  position: absolute;
  z-index: 3;
  top: calc(100% + .5rem);
  right: 0;
  left: 0;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.mobile-menu > a:not(.button) {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding-inline: .75rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
}

.mobile-menu .button { margin-top: .65rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  min-height: 3.25rem;
  padding: .8rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease;
}

.button svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.button--primary { background: var(--ink); color: var(--canvas); }
.button--light { background: var(--bone); color: var(--night); }
.button:active { transform: translateY(1px) scale(.99); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 3rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}

.hero-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .7rem;
  padding-inline-start: var(--space-xs);
  margin-bottom: 1.5rem;
  color: var(--muted-strong);
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 600;
}
.hero-context > b { display: inline-flex; align-items: center; gap: .62rem; font-weight: inherit; }
/* Small neutral markers keep the row quiet and let the labels carry the hierarchy. */
.hero-context > b::before { content: ""; width: .3rem; height: .3rem; flex: 0 0 .3rem; border-radius: 50%; background: var(--line-strong); }

.hero {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  align-content: center;
  gap: clamp(2.25rem, 4.5vw, 3.5rem);
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
  min-height: 100svh;
  margin-inline: auto;
  padding-block: clamp(7rem, 11vw, 9.5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.hero__head { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: end; }
.hero__aside { display: grid; align-content: end; min-width: 0; }

.registration {
  position: absolute;
  inset: clamp(6.5rem, 10vw, 8rem) 0 2rem;
  pointer-events: none;
}

.registration::before,
.registration::after {
  content: "";
  position: absolute;
  opacity: .55;
  background: var(--line);
}

.registration::before { top: 0; bottom: 0; left: 0; width: 1px; }
.registration::after { right: 0; bottom: 0; left: 0; height: 1px; }
.registration__corner { position: absolute; width: 1.1rem; height: 1.1rem; }
.registration__corner::before,
.registration__corner::after { content: ""; position: absolute; background: var(--line-strong); }
.registration__corner::before { top: 50%; left: 0; width: 100%; height: 1px; }
.registration__corner::after { top: 0; left: 50%; width: 1px; height: 100%; }
.registration__corner--tl { top: -.55rem; left: -.55rem; }
.registration__corner--tr { top: -.55rem; right: -.55rem; }
.registration__corner--bl { bottom: -.55rem; left: -.55rem; }
.registration__corner--br { right: -.55rem; bottom: -.55rem; }

.hero__copy { min-width: 0; max-width: 46rem; overflow-wrap: break-word; }

.hero h1 {
  max-width: 16ch;
  margin-bottom: 0;
  font-size: var(--type-display);
  letter-spacing: -.04em;
}

.hero-word { position: relative; white-space: nowrap; }
.hero-word::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -.05em;
  bottom: .03em;
  left: -.05em;
  height: .13em;
  opacity: .58;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  animation: hero-line-in .8s var(--ease-out) forwards;
}

.hero-word--time { color: var(--signal); }
.hero-word--money { color: var(--bronze); }
.hero-word--opportunity { color: var(--coral); }
.hero-word--money::after { animation-delay: .16s; }
.hero-word--opportunity::after { animation-delay: .32s; }

@keyframes hero-line-in { to { transform: scaleX(1); } }

.hero__lead { max-width: 34rem; margin-bottom: 1.75rem; color: var(--muted-strong); font-size: var(--type-lead); line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.hero__assurance { display: flex; flex-wrap: wrap; gap: .65rem 1.4rem; margin-top: 2.4rem; color: var(--muted); font-size: .8rem; }
.hero__assurance span { position: relative; padding-left: .9rem; }
.hero__assurance span::before { content: ""; position: absolute; top: .62em; left: 0; width: .28rem; height: .28rem; border-radius: 50%; background: var(--signal); }

.bento-lens__stage {
  position: relative;
  width: min(100%, 21rem);
  aspect-ratio: 1;
  margin: 0 auto;
  isolation: isolate;
}

.opportunity-field__aura {
  position: absolute;
  z-index: -2;
  inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 31%, color-mix(in srgb, var(--signal-bright) 38%, transparent), transparent 34%),
    radial-gradient(circle at 26% 70%, color-mix(in srgb, var(--coral) 34%, transparent), transparent 38%),
    radial-gradient(circle at 66% 76%, color-mix(in srgb, var(--bronze) 29%, transparent), transparent 36%);
  filter: blur(22px) saturate(118%);
  animation: aura-breathe 8s ease-in-out infinite alternate;
}

@keyframes aura-breathe { to { transform: scale(1.035) rotate(2deg); filter: blur(28px) saturate(128%); } }

#opportunity-canvas { position: absolute; z-index: -1; inset: 8%; width: 84%; height: 84%; border-radius: 50%; }
.opportunity-field__geometry { width: 100%; height: 100%; color: var(--line-strong); }
.lens-orbits circle { fill: none; stroke: currentColor; stroke-width: 1; opacity: .64; }
.lens-orbits circle:nth-child(2) { stroke-dasharray: 2 5; opacity: .78; }
.lens-crosshair path, .lens-ticks path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .64; }
.lens-node { stroke: var(--canvas); stroke-width: 2; }
.lens-node--time { fill: var(--signal); }
.lens-node--money { fill: var(--bronze); }
.lens-node--opportunity { fill: var(--coral); }

.opportunity-field__core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-content: center;
  z-index: 2;
  width: 38%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--canvas) 62%, transparent);
}

.opportunity-field__core span,
.opportunity-field__core strong { display: block; font-family: var(--font-display); text-transform: uppercase; }
.opportunity-field__core span { color: var(--muted-strong); font-size: clamp(.44rem, .72vw, .62rem); font-weight: 500; letter-spacing: .12em; line-height: 1.2; white-space: nowrap; }
.opportunity-field__core strong { margin-top: .12rem; color: var(--signal-text); font-size: clamp(.75rem, 1.35vw, 1.02rem); font-weight: 600; letter-spacing: .12em; line-height: 1; }
html[data-theme="dark"] .opportunity-field__core { border-color: transparent; background: radial-gradient(circle, color-mix(in srgb, var(--canvas) 90%, transparent) 42%, color-mix(in srgb, var(--canvas) 45%, transparent) 68%, transparent 100%); color: var(--bone); box-shadow: none; }
html[data-theme="dark"] .opportunity-field__core strong { color: var(--signal-bright); }

/* Hero bento: the offer set, visible without scrolling */
.hero-bento { display: grid; gap: clamp(.55rem, .9vw, .85rem); }

.bento-lens,
.bento-card {
  position: relative;
  min-width: 0;
  padding: clamp(1rem, 1.9vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out), border-color .25s ease, box-shadow .35s var(--ease-out);
}

.bento-lens { display: flex; flex-direction: column; gap: 1rem; margin: 0; }

.bento-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .55rem .9rem;
  align-content: start;
  color: inherit;
  text-decoration: none;
}

.bento-card__icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
  border-radius: var(--radius-md);
  color: var(--bronze-text);
}
.bento-card__icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bento-card--report .bento-card__icon,
.bento-card--build .bento-card__icon { color: var(--signal-text); }

.bento-card__body { grid-column: 1 / -1; }
.bento-card__body strong { display: block; margin-bottom: .3rem; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.bento-card__body small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.5; }

.bento-card__go {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: var(--muted);
  transition: transform .25s var(--ease-out), color .25s ease, background-color .25s ease;
}
.bento-card__go svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 40rem) {
  .hero-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-lens { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .bento-lens__stage { flex: 0 0 auto; width: min(46%, 17rem); }
  .bento-lens figcaption { margin-top: 0; }
}

@media (min-width: 64rem) {
  .hero__head { grid-template-columns: minmax(0, 1.4fr) minmax(17rem, .6fr); }
  .hero-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(9.5rem, auto); }
  .bento-lens { grid-column: span 5; grid-row: span 2; flex-direction: column; align-items: stretch; }
  .bento-lens__stage { width: min(100%, 17rem); }
  .bento-card--audit { grid-column: span 4; }
  .bento-card--report { grid-column: span 3; }
  .bento-card--ai { grid-column: span 4; }
  .bento-card--build { grid-column: span 3; }
  .bento-card { grid-template-rows: auto 1fr; align-content: stretch; }
  .bento-card__body { align-self: end; }
}

.bento-lens figcaption { margin-top: auto; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.bento-lens__legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; margin-bottom: .4rem; color: var(--ink-soft); font-family: var(--font-display); font-size: .75rem; font-weight: 600; }
.bento-lens__legend i { width: .4rem; height: .4rem; margin-right: -.5rem; border-radius: 50%; }
.bento-lens__legend .is-time { background: var(--signal); }
.bento-lens__legend .is-money { background: var(--bronze); }
.bento-lens__legend .is-opportunity { background: var(--coral); }

.process-section { position: relative; z-index: 2; padding-block: clamp(5rem, 11vw, 10rem); background: var(--canvas); }
.section-intro { max-width: 70rem; }
.section-intro h2 { max-width: 22ch; margin-bottom: 1.5rem; font-size: var(--type-section); }
.section-intro > p:last-child { max-width: 44rem; margin-bottom: 0; color: var(--muted-strong); font-size: var(--type-lead); }
.process-intro { margin-bottom: clamp(4rem, 9vw, 8rem); }
.process-step { display: grid; scroll-margin-top: 6rem; }
.process-step__copy { min-width: 0; max-width: 38rem; }
/* The number is the wayfinding for a five-stage sequence, so it is sized as a
   marker, not a caption. At .75rem in a 2.1rem ring it measured 0.4 of its own
   heading and read as decoration next to it. */
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: 1.15rem; border: 1px solid color-mix(in srgb, var(--bronze) 42%, var(--line)); border-radius: 50%; background: color-mix(in srgb, var(--bronze) 7%, var(--surface)); color: var(--bronze-text); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: .01em; transition: background-color .45s var(--ease-out), border-color .45s var(--ease-out), color .45s var(--ease-out); }
.process-step h3 { margin-bottom: 1rem; font-size: var(--type-sub); }
.process-step__copy > p:not(.step-outcome) { max-width: 40rem; color: var(--muted-strong); font-size: var(--type-body); }
.step-focus { display: flex; gap: .7rem; align-items: baseline; max-width: 38rem; margin: 1.35rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .85rem; }
.step-focus span { flex: 0 0 auto; color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.step-outcome { display: flex; gap: .75rem; align-items: flex-start; max-width: 38rem; margin: 1.5rem 0 0; padding: 1rem 0; border-block: 1px solid var(--line); color: var(--muted-strong); font-size: .85rem; }
.step-outcome span { flex: 0 0 auto; color: var(--bronze-text); font-family: var(--font-display); font-weight: 600; }

.artifact {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  container-type: inline-size;
}

.artifact-bar {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding-inline: 1rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .75rem;
}

.artifact-bar > span:nth-child(2) { margin-left: auto; }
.artifact-brand { color: var(--ink); font-weight: 600; }

.artifact-note { margin: 0; padding: .85rem 1rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .8125rem; }
.discovery-canvas { display: grid; gap: 1rem; padding: 1rem; }
.discovery-radar { position: relative; display: grid; place-items: center; min-height: 18rem; background: var(--surface-soft); }
.discovery-radar svg { width: min(85%, 18rem); color: var(--line-strong); }
.discovery-radar circle, .discovery-radar path { fill: none; stroke: currentColor; stroke-width: 1; }
.discovery-radar path:not(.radar-shape) { opacity: .55; }
.discovery-radar .radar-shape { fill: color-mix(in srgb, var(--signal) 12%, transparent); stroke: var(--signal); stroke-width: 1.4; }
.discovery-radar .radar-focus { fill: var(--bronze); stroke: var(--surface); stroke-width: 2; }
.discovery-radar > span { position: absolute; bottom: 1rem; color: var(--muted); font-family: var(--font-display); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.discovery-notes { display: grid; }
.discovery-notes > div { display: grid; gap: .3rem; padding: 1rem 0; border-top: 1px solid var(--line-soft); }
.discovery-notes small { color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; text-transform: uppercase; }
.discovery-notes strong { color: var(--ink-soft); font-family: var(--font-display); font-size: .88rem; font-weight: 500; line-height: 1.4; }

.intake-progress { height: 2px; background: var(--line-soft); }
.intake-progress span { display: block; width: 80%; height: 100%; background: linear-gradient(90deg, var(--bronze), var(--coral), var(--signal)); }
.intake-layout { display: grid; min-height: 24rem; }
.intake-nav { display: flex; gap: .35rem; overflow-x: auto; padding: 1rem; border-bottom: 1px solid var(--line-soft); }
.intake-nav span { flex: 0 0 auto; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-family: var(--font-display); font-size: .75rem; }
.intake-nav .complete { border-color: color-mix(in srgb, var(--success) 48%, var(--line)); color: var(--success); }
.intake-nav .active { border-color: var(--bronze); color: var(--bronze-text); }
.intake-form-preview { padding: 1.5rem; }
.intake-form-preview > p { margin-bottom: .6rem; color: var(--ink-soft); font-family: var(--font-display); font-size: .82rem; font-weight: 600; }
.fake-select, .fake-textarea { margin-bottom: 1.4rem; padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); color: var(--muted-strong); font-size: .78rem; }
.fake-select { display: flex; justify-content: space-between; }
.fake-textarea { min-height: 6rem; }
.typing-caret { display: inline-block; width: 1px; height: 1em; margin-left: .15rem; vertical-align: -.15em; background: var(--bronze); animation: caret 1s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }
.intake-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.intake-tags span { padding: .35rem .55rem; border-radius: 99px; background: var(--signal-pale); color: var(--signal-text); font-family: var(--font-display); font-size: .75rem; }

.audit-workspace { display: grid; min-height: 30rem; }
.audit-transcript { display: grid; gap: .85rem; padding: 1rem; border-bottom: 1px solid var(--line-soft); background: var(--surface-soft); }
.audit-transcript p { margin: 0; padding: .75rem; border: 1px solid transparent; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.audit-transcript p span { display: block; margin-bottom: .25rem; color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; }
.audit-transcript .is-highlighted { border-color: color-mix(in srgb, var(--bronze) 40%, var(--line)); background: var(--surface); color: var(--ink-soft); }
.audit-map { position: relative; min-height: 19rem; padding: 1rem; }
.audit-map > svg { width: 100%; height: auto; }
.map-link { fill: none; stroke: var(--line-strong); stroke-width: 1.2; marker-end: url(#arrowhead); }
#arrowhead path { fill: var(--line-strong); }
.map-node rect { fill: var(--surface); stroke: var(--line-strong); }
.map-node text { fill: var(--ink-soft); font-family: var(--font-display); font-size: 19px; text-anchor: middle; }
.map-node--friction rect { fill: color-mix(in srgb, var(--bronze) 8%, var(--surface)); stroke: var(--bronze); }
.map-node--warning rect { fill: color-mix(in srgb, var(--coral) 8%, var(--surface)); stroke: var(--coral); }
.map-node .map-small { fill: var(--muted); font-size: 15px; }
.audit-finding { position: absolute; right: .8rem; bottom: .8rem; width: min(15rem, 54%); padding: .75rem; border: 1px solid var(--bronze); border-radius: var(--radius-sm); background: var(--surface); }
.audit-finding span, .audit-finding small { display: block; color: var(--muted); font-size: .75rem; }
.audit-finding span { margin-bottom: .25rem; color: var(--bronze-text); font-family: var(--font-display); text-transform: uppercase; }
.audit-finding strong { display: block; margin-bottom: .25rem; font-family: var(--font-display); font-size: .75rem; line-height: 1.35; }

.report-handoff { display: grid; min-height: 30rem; padding: clamp(1.25rem, 4cqi, 2.5rem); background: var(--canvas-deep); }
.report-handoff__cover { position: relative; display: flex; flex-direction: column; min-height: 22rem; padding: clamp(1.3rem, 4cqi, 2.4rem); border: 1px solid var(--line); background: var(--surface); }
.report-handoff__cover > span { font-family: var(--font-display); font-size: .75rem; font-weight: 600; }
.report-handoff__cover > small { margin-top: auto; color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.report-handoff__cover h4 { max-width: 20ch; margin: .65rem 0 1.5rem; font-size: clamp(1.3rem, 3.4cqi, 1.85rem); }
.report-handoff__cover > div { display: flex; flex-wrap: wrap; gap: .45rem; }
.report-handoff__cover i { padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: .75rem; font-style: normal; }
.report-handoff__cover > b { position: absolute; top: 1.3rem; right: 1.3rem; color: var(--muted); font-family: var(--font-display); font-size: .75rem; font-weight: 500; }
.report-handoff__note { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 0 0; }
.report-handoff__note > span { color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; text-transform: uppercase; }
.report-handoff__note p { margin: .7rem 0 1.2rem; color: var(--muted-strong); font-size: .82rem; }
.report-handoff__note a { display: inline-flex; align-items: center; gap: .6rem; min-height: 1.75rem; width: max-content; border-bottom: 1px solid var(--line-strong); color: var(--ink); font-family: var(--font-display); font-size: .75rem; font-weight: 600; text-decoration: none; }

.implementation-path { position: relative; min-height: 32rem; padding: 1rem; }
.implementation-source { width: min(100%, 19rem); padding: 1rem; border: 1px solid var(--bronze); border-radius: var(--radius-sm); background: var(--surface); }
.implementation-source small, .implementation-source strong, .implementation-source span { display: block; }
.implementation-source small { color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; text-transform: uppercase; }
.implementation-source strong { margin: .4rem 0; font-family: var(--font-display); font-size: .82rem; line-height: 1.35; }
.implementation-source span { color: var(--muted); font-size: .75rem; }
.implementation-path > svg { width: 100%; height: 7rem; color: var(--line-strong); }
.implementation-path > svg path { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.implementation-modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.implementation-modules article { min-height: 5.5rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.implementation-modules span, .implementation-modules strong, .implementation-modules small { display: block; }
.implementation-modules span { color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; }
.implementation-modules strong { margin-top: .4rem; font-family: var(--font-display); font-size: .76rem; }
.implementation-modules small { color: var(--muted); font-size: .75rem; }
.implementation-destinations { display: grid; gap: .5rem; margin-top: .8rem; }
.implementation-destinations > div { padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.implementation-destinations .is-selected { border-color: var(--signal); background: var(--signal-pale); }
.implementation-destinations small, .implementation-destinations strong { display: block; }
.implementation-destinations small { color: var(--muted); font-size: .75rem; text-transform: uppercase; }
.implementation-destinations strong { margin-top: .2rem; font-family: var(--font-display); font-size: .75rem; }

.report-section { position: relative; z-index: 2; padding-block: clamp(5rem, 11vw, 10rem); background: var(--canvas-deep); }
.report-heading { display: grid; gap: 1.5rem; margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }
.report-heading > div { min-width: 0; }
.report-heading h2 { max-width: 24ch; margin-bottom: 0; font-size: var(--type-section); }
.report-heading > p { max-width: 34rem; margin: 0; color: var(--muted-strong); font-size: var(--type-lead); }

.report-viewer { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.report-viewer__topbar { display: grid; gap: .9rem; padding: .85rem; border-bottom: 1px solid var(--line); }
/* The tabs sat as bare text between two static labels and read as metadata. The
   track is what says the three are one control; the raised pill and the signal
   foot say which is on. The foot is also the state indicator that clears 3:1,
   which a pill background at 1.06:1 against the bar never could. */
.report-viewer__topbar [role="tablist"] { display: flex; justify-self: center; justify-content: flex-start; gap: .25rem; max-width: 100%; padding: .25rem; border: 1px solid var(--line); border-radius: calc(var(--radius-sm) + .3rem); background: color-mix(in srgb, var(--ink) 4%, var(--surface)); overflow-x: auto; scrollbar-width: thin; }
.report-viewer__topbar button { position: relative; display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; min-height: 2.4rem; padding: .5rem .85rem .65rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--muted-strong); font-family: var(--font-display); font-size: .8125rem; font-weight: 500; cursor: pointer; transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out); }
.report-viewer__topbar button[aria-selected="true"] { border-color: var(--line-strong); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-sm); }
.report-viewer__topbar button[aria-selected="true"]::after { content: ""; position: absolute; right: .85rem; bottom: .3rem; left: .85rem; height: 2px; border-radius: 2px; background: var(--signal); }
.report-tab-index { color: var(--bronze-text); font-size: .6875rem; letter-spacing: .06em; }
.report-viewer__status { color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; }
.report-panel { min-height: 38rem; }
.report-sidebar { padding: 1.5rem; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.report-sidebar h3 { margin-bottom: .8rem; font-size: 1.35rem; }
.report-sidebar p { color: var(--muted); font-size: .82rem; }
.report-sidebar dl { margin: 1.75rem 0 0; }
.report-sidebar dl > div { display: grid; gap: .15rem; padding-block: .75rem; border-top: 1px solid var(--line); }
.report-sidebar dt { color: var(--muted); font-size: .75rem; }
.report-sidebar dd { margin: 0; color: var(--ink-soft); font-family: var(--font-display); font-size: .75rem; }
.report-page { padding: clamp(1.5rem, 4vw, 3.25rem); }
.report-page > header { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.report-page > header span { color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; text-transform: uppercase; }
.report-page > header h3 { max-width: 22ch; margin: .7rem 0 0; font-size: clamp(1.35rem, 2.1vw, 1.95rem); }
/* Only the short value sits inside the ring. "Confidence" is 76px of text and
   the ring interior is 58px, so the descriptor lives underneath instead. */
/* align-self keeps it from stretching to the heading's height, which would pull
   the label away from the ring whenever the heading wraps to more lines. */
.report-score { display: grid; flex: 0 0 auto; align-self: start; justify-items: center; gap: .5rem; }
.report-score__ring { position: relative; display: grid; place-items: center; width: 5rem; height: 5rem; }
.report-score__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.report-score circle { fill: none; stroke-width: 5; }
.report-score__track { stroke: var(--line); }
/* 245.04 is the circumference at r=39. The arc is a fraction of it, so the ring
   cannot show a level the --score it was given does not support. */
.report-score__value { stroke: var(--signal); stroke-linecap: round; stroke-dasharray: calc(var(--score, .85) * 245.04) 245.04; }
/* Needs to out-specify `.report-page > header span`, which would otherwise make
   this an uppercase bronze micro-label like the kicker beside it. */
.report-score .report-score__ring > span { position: relative; color: var(--ink); font-family: var(--font-display); font-size: .95rem; font-weight: 600; line-height: 1.1; text-transform: none; }
.report-score > small { color: var(--muted); font-family: var(--font-display); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.report-signals { display: grid; margin-block: 1.5rem; border-block: 1px solid var(--line); }
.report-signals article { padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
.report-signals article:last-child { border-bottom: 0; }
.report-signals small, .report-signals strong { display: block; }
.report-signals small { color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; text-transform: uppercase; }
.report-signals strong { margin-top: .35rem; font-family: var(--font-display); font-size: .82rem; }
.report-signals p { margin: .3rem 0 0; color: var(--muted); font-size: .75rem; }
.report-signals b { display: inline-block; margin-top: .55rem; padding: .2rem .5rem; border-radius: 99px; background: color-mix(in srgb, var(--bronze) 12%, var(--surface)); color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; font-weight: 600; }
.report-priority { display: grid; gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--bronze); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bronze) 5%, var(--surface)); }
.report-priority > div > span { color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; }
.report-priority h4 { margin: .45rem 0; font-size: 1.2rem; }
.report-priority p { margin: 0; color: var(--muted-strong); font-size: .82rem; }
.report-priority dl { display: grid; gap: .7rem; margin: 0; }
/* Label and value share a line where the column allows it, and fall back to
   stacking when it does not. Stacked at every width, the three attributes ran
   roughly twice the height of the copy beside them and opened a void across the
   top half of the card. */
.report-priority dl > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem .9rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.report-priority dt { color: var(--muted); font-size: .75rem; }
.report-priority dd { margin: 0; font-family: var(--font-display); font-size: .8125rem; }

.map-legend { display: grid; gap: .5rem; margin-top: 2rem; color: var(--muted); font-size: .75rem; }
.map-legend span { display: flex; align-items: center; gap: .5rem; }
.map-legend i { flex: 0 0 auto; width: .7rem; height: .7rem; border: 1px solid color-mix(in srgb, var(--signal) 72%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--signal) 58%, var(--surface)); box-shadow: 0 0 .6rem color-mix(in srgb, var(--signal) 24%, transparent); }
.map-legend span:nth-child(2) i { border-color: color-mix(in srgb, var(--bronze) 72%, transparent); background: color-mix(in srgb, var(--bronze) 58%, var(--surface)); box-shadow: 0 0 .6rem color-mix(in srgb, var(--bronze) 24%, transparent); }
.map-legend span:nth-child(3) i { border-color: color-mix(in srgb, var(--coral) 72%, transparent); background: color-mix(in srgb, var(--coral) 58%, var(--surface)); box-shadow: 0 0 .6rem color-mix(in srgb, var(--coral) 24%, transparent); }
.opportunity-map { padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--surface); }
.map-plot { position: relative; padding: 1.5rem .25rem 2.25rem 3.4rem; }
.map-grid {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 35rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--canvas);
  background-image:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--signal) 8%, transparent), transparent 44%),
    linear-gradient(to right, color-mix(in srgb, var(--line) 58%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 58%, transparent) 1px, transparent 1px);
  background-size: auto, 25% 100%, 100% 25%;
}
.map-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 20%, color-mix(in srgb, var(--signal) 18%, transparent) 20.15% 20.35%, transparent 20.5%),
    radial-gradient(circle at 50% 48%, transparent 0 38%, color-mix(in srgb, var(--line-strong) 44%, transparent) 38.1% 38.25%, transparent 38.45%),
    linear-gradient(to right, transparent calc(50% - .5px), color-mix(in srgb, var(--line-strong) 56%, transparent) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(48% - .5px), color-mix(in srgb, var(--line-strong) 56%, transparent) 48%, transparent calc(48% + .5px));
}
.map-grid::after {
  content: "";
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 0;
  width: .5rem;
  height: .5rem;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--signal) 66%, transparent);
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--signal) 9%, transparent), 0 0 .8rem color-mix(in srgb, var(--signal) 42%, transparent);
  pointer-events: none;
}
.map-axis { position: absolute; display: flex; justify-content: space-between; color: var(--muted); font-family: var(--font-display); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.map-axis--x { right: 0; bottom: 0; left: 3.25rem; }
.map-axis--y { top: 1.5rem; bottom: 2.25rem; left: 0; writing-mode: vertical-rl; }
.map-bubble {
  position: absolute;
  z-index: 1;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  display: grid;
  place-content: center;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--map-accent, var(--line-strong)) 82%, var(--line));
  border-radius: 50%;
  background: var(--map-fill, var(--surface));
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--map-accent, var(--line-strong)) 16%, transparent), 0 0 .9rem color-mix(in srgb, var(--map-accent, var(--line-strong)) 12%, transparent);
  transition: transform .25s var(--ease-out), border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.map-bubble::before { content: ""; position: absolute; inset: 9%; border: 1px solid color-mix(in srgb, var(--map-accent, var(--line-strong)) 25%, transparent); border-radius: 50%; pointer-events: none; }
.map-bubble::after { content: ""; position: absolute; top: 16%; right: 18%; width: .32rem; height: .32rem; border-radius: 50%; background: var(--map-accent, var(--line-strong)); box-shadow: 0 0 .65rem color-mix(in srgb, var(--map-accent, var(--line-strong)) 60%, transparent); pointer-events: none; }
.map-bubble.is-prioritize { --map-accent: var(--bronze); --map-fill: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--bronze) 16%, transparent), transparent 64%), color-mix(in srgb, var(--bronze) 8%, var(--surface)); }
.map-bubble.is-investigate { --map-accent: var(--signal); --map-fill: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 64%), color-mix(in srgb, var(--signal) 8%, var(--surface)); }
.map-bubble.is-sequence { --map-accent: var(--coral); --map-fill: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--coral) 15%, transparent), transparent 64%), color-mix(in srgb, var(--coral) 8%, var(--surface)); }
.map-bubble span { position: relative; z-index: 1; color: var(--map-accent, var(--bronze-text)); font-family: var(--font-display); font-size: .75rem; }
.map-bubble strong { position: relative; z-index: 1; max-width: 9ch; font-family: var(--font-display); font-size: .75rem; line-height: 1.2; }
.map-bubble--one { width: 8.5rem; height: 8.5rem; }
.map-bubble--two { width: 6.5rem; height: 6.5rem; }
.map-bubble--three { width: 6.5rem; height: 6.5rem; }
.map-bubble--four { width: 6rem; height: 6rem; }
.map-bubble[aria-expanded="true"] { border-color: var(--map-accent); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--map-accent) 18%, transparent), 0 0 1.3rem color-mix(in srgb, var(--map-accent) 28%, transparent); }

.map-detail { margin-top: 1.25rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.map-detail__rest { margin: 0; color: var(--muted); font-size: .78rem; }
.map-detail__body { display: grid; gap: .75rem; animation: map-detail-in .35s var(--ease-out) both; }
.map-detail__body > span { color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.map-detail__body h4 { margin: 0; font-size: 1.02rem; }
.map-detail__body p { margin: 0; color: var(--muted-strong); font-size: .82rem; }
.map-detail__recommendation { display: grid; gap: .25rem; padding: .8rem .9rem; border: 1px solid color-mix(in srgb, var(--bronze) 42%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bronze) 6%, var(--surface)); }
.map-detail__recommendation span, .map-detail__recommendation small { color: var(--muted); font-family: var(--font-display); font-size: .75rem; }
.map-detail__recommendation strong { font-family: var(--font-display); font-size: .9rem; }
.map-detail__flow { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.map-detail__flow > div { display: grid; gap: .3rem; min-width: 0; padding: .75rem .85rem; border-top: 1px solid var(--line); background: var(--surface-soft); }
.map-detail__flow small { color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; text-transform: uppercase; }
.map-detail__flow strong { color: var(--ink-soft); font-family: var(--font-display); font-size: .78rem; line-height: 1.35; }
.map-detail__meta { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 0; padding: 0; list-style: none; }
.map-detail__meta li { padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-family: var(--font-display); font-size: .75rem; }
.map-detail__meta li b { color: var(--ink); font-weight: 600; }
@keyframes map-detail-in { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }

/* Night mode is composed as an instrument, not a black version of the daylight
   chart. The map gets a quieter surface, a measured field and restrained node
   halos so the ranking remains the visual focus. */
html[data-theme="dark"] .report-panel[data-report-panel="map"] .report-sidebar {
  background: radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--signal) 8%, transparent), transparent 42%), var(--surface-soft);
}
html[data-theme="dark"] .opportunity-map {
  background: radial-gradient(ellipse at 72% 8%, color-mix(in srgb, var(--signal) 6%, transparent), transparent 46%), var(--surface);
}
html[data-theme="dark"] .map-grid {
  border-color: color-mix(in srgb, var(--line-strong) 76%, transparent);
  background-image:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 46%),
    linear-gradient(to right, color-mix(in srgb, var(--line) 72%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 72%, transparent) 1px, transparent 1px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 3%, transparent), 0 1rem 2rem rgba(0, 0, 0, .16);
}
html[data-theme="dark"] .map-bubble {
  color: var(--bone);
  backdrop-filter: blur(4px);
}
html[data-theme="dark"] .map-detail {
  background: linear-gradient(120deg, color-mix(in srgb, var(--bronze) 6%, var(--surface)), var(--surface));
}

/* The panel carries a min-height so the viewer does not jump between tabs. Left
   to stretch, the four rows pulled apart to fill it; left at the top, they
   stranded a void underneath. Centred, they read as one deliberate group. */
.path-plan { display: grid; align-content: center; padding: 2rem; }
.path-plan article { position: relative; display: grid; grid-template-columns: 3.3rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.path-plan article::before { content: ""; position: absolute; top: 50%; left: 1.55rem; bottom: -50%; width: 1px; background: var(--line); }
.path-plan article:last-child::before { display: none; }
.path-plan article > span { position: relative; z-index: 1; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border: 1px solid var(--bronze); border-radius: 50%; background: var(--surface); color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; text-transform: uppercase; }
.path-plan h4 { margin-bottom: .35rem; font-size: 1rem; }
.path-plan p { margin: 0; color: var(--muted); font-size: .78rem; }
/* The phase name lives here, not in the circle. "Handover" renders at 65px and
   the circle is 50px, so any name longer than five characters escaped it. */
/* The phase name is an eyebrow above the heading, not a badge in the circle and
   not a third column. "Handover" renders at 65px against a 50px circle, and as a
   right-hand column it sat marooned across a wide empty gap. */
.path-plan article > div > small { display: block; margin-bottom: .3rem; color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }

/* The report claims to quantify. This is the one place a figure is shown being
   built rather than asserted, so the claim is checkable rather than trusted. */
/* The arithmetic is the one place the page proves it returns money, so it is the
   loudest object in the artifact. It used to be a white box inside the bronze
   card: a card nested in a card, which demoted the payoff to a footnote and set
   the figures level with a sub-heading. It now leads the findings page, opened
   by a rule, with only the answer carrying a surface.
   --figure and --figure-lh are shared by the input figures and the operators, so
   the minus and the equals stay centred on the numbers at every width. */
.value-math { --figure: clamp(1.5rem, 2vw, 1.85rem); --figure-lh: 1.05; grid-column: 1 / -1; margin-top: .35rem; padding-top: 1.6rem; border-top: 1px solid color-mix(in srgb, var(--bronze) 32%, var(--line)); }
.value-math--lead { margin: 1.6rem 0 0; padding: 1.35rem 0 0; }
.value-math .value-math__label { margin: 0 0 1.15rem; color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.value-math__row { display: grid; gap: 1.6rem; }
.value-math__step { position: relative; min-width: 0; }
.value-math__step small { display: block; color: var(--muted); font-family: var(--font-display); font-size: .8125rem; line-height: 1.3; }
.value-math__step strong { display: block; margin-top: .3rem; font-family: var(--font-display); font-size: var(--figure); font-variant-numeric: tabular-nums; line-height: var(--figure-lh); letter-spacing: -.025em; }
.value-math__step em { display: block; margin-top: .5rem; color: var(--muted); font-size: .8125rem; font-style: normal; line-height: 1.45; text-wrap: pretty; }
.value-math__step--cost strong { color: var(--coral-text); }
/* The panel bleeds out of the cell rather than padding it, so all three figures
   keep identical box metrics and stay on one line. */
.value-math__step--result { isolation: isolate; }
.value-math__step--result::before { content: ""; position: absolute; z-index: -1; inset: -.85rem; border: 1px solid color-mix(in srgb, var(--signal) 45%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--signal) 9%, var(--surface)); }
.value-math__step--result strong { color: var(--signal-text); font-size: clamp(1.85rem, 2.5vw, 2.35rem); }
/* Stacked, a bare minus sign on its own line reads as a stray character, so it
   becomes a labelled divider. Side by side it goes back to a plain operator. */
.value-math__op { display: flex; align-items: center; gap: .65rem; color: var(--muted); font-family: var(--font-display); font-size: 1.05rem; }
.value-math__op::before, .value-math__op::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.value-math .value-math__note { margin: 1.35rem 0 0; color: var(--muted); font-size: .8125rem; }

.build-section { position: relative; z-index: 2; padding-block: clamp(5rem, 11vw, 10rem); background: var(--canvas); }
.build-layout { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.build-layout > * { min-width: 0; }

/* Four levels of build, smallest first, so the spectrum reads as a ladder the
   visitor can place themselves on rather than an undifferentiated capability list. */
.build-scale { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.build-scale li {
  display: grid;
  gap: .45rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color .2s ease, transform .2s var(--ease-out);
}
.build-scale li > span { color: var(--bronze-text); font-family: var(--font-display); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.build-scale h3 { margin: 0; font-size: 1.15rem; }
.build-scale p { margin: 0; color: var(--muted); font-size: .85rem; }
.build-scale li > small { margin-top: .35rem; padding-top: .7rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-family: var(--font-display); font-size: .75rem; }

.build-terms { display: grid; gap: 1.5rem; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-soft); }
.build-terms h3 { margin: 0; font-size: 1.15rem; }
.build-terms ul { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.build-terms li { display: grid; gap: .2rem; padding-block: .9rem; border-bottom: 1px solid var(--line); }
.build-terms strong { font-family: var(--font-display); font-size: .9rem; }
.build-terms span { color: var(--muted); font-size: .82rem; }
.build-terms__note { margin: .8rem 0 0; color: var(--muted); font-size: .8rem; }

/* Booking is the primary path now, so it gets its own block above the form
   rather than a link buried in the copy. */
/* No box around the call to action. Boxed, the primary action of the page read
   as one more sub-panel inside the section; on the section ground it reads as
   the thing the section is for. */
.discovery-book { margin-top: 2.2rem; }
.discovery-book .button { width: 100%; }
.discovery-book small { display: block; margin-top: .85rem; color: #8f8c85; font-size: .8125rem; }

.principles-section { position: relative; z-index: 2; overflow: hidden; padding-block: clamp(5.5rem, 10vw, 9rem); background: var(--canvas); }
.principles-section::before { position: absolute; inset: 0 0 0 42%; content: ""; pointer-events: none; background: radial-gradient(circle at 76% 26%, color-mix(in srgb, var(--signal) 8%, transparent), transparent 36%), radial-gradient(circle at 30% 72%, color-mix(in srgb, var(--bronze) 7%, transparent), transparent 34%); opacity: .72; }
.principles-layout { position: relative; display: grid; gap: clamp(3rem, 7vw, 7rem); }
.principles-statement { min-width: 0; max-width: 56rem; }
.principles-statement h2 { max-width: 18ch; margin-bottom: 1.35rem; font-size: var(--type-section); }
.principles-statement > p:last-of-type { max-width: 40rem; margin: 0; color: var(--muted-strong); font-size: var(--type-lead); }

/* A quiet calibration line anchors the statement without inventing a plotted
   score. The four stops name the checks that shape a useful scope. */
.principles-instrument { max-width: 32rem; margin-top: clamp(3rem, 6vw, 5.5rem); padding-top: 1.15rem; border-top: 1px solid var(--line); }
.principles-instrument__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.principles-instrument__header span:first-child { color: var(--bronze-text); }
.principles-instrument__header span:last-child { color: var(--signal-text); }
.principles-instrument__scale { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: 1.35rem; }
.principles-instrument__scale-line { position: absolute; top: .32rem; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, var(--bronze), var(--coral) 48%, var(--signal)); box-shadow: 0 0 .55rem color-mix(in srgb, var(--signal) 20%, transparent); }
.principles-instrument__stop { position: relative; z-index: 1; display: grid; justify-items: center; gap: .85rem; min-width: 0; }
.principles-instrument__stop i { display: block; width: .68rem; height: .68rem; border: 1px solid var(--stop-color); border-radius: 50%; background: var(--canvas); box-shadow: 0 0 0 .27rem color-mix(in srgb, var(--stop-color) 12%, transparent); }
.principles-instrument__stop b { color: var(--stop-color); font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .08em; line-height: 1.1; text-align: center; text-transform: uppercase; }
.principles-instrument__stop--evidence { --stop-color: var(--bronze-text); }
.principles-instrument__stop--impact { --stop-color: var(--coral-text); }
.principles-instrument__stop--complexity, .principles-instrument__stop--ownership { --stop-color: var(--signal-text); }

.principles-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.principles-list li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 1.25rem; padding-block: 1.35rem; border-bottom: 1px solid var(--line); }
.principles-list__marker { width: 1.35rem; height: 2px; margin-top: .72rem; background: var(--principles-mark, var(--signal)); }
.principles-list li:nth-child(1) { --principles-mark: var(--bronze); }
.principles-list li:nth-child(2) { --principles-mark: var(--coral); }
.principles-list li:nth-child(3), .principles-list li:nth-child(4) { --principles-mark: var(--signal); }
.principles-list h3 { margin-bottom: .35rem; font-size: 1.2rem; transition: color .2s ease; }
.principles-list p { max-width: 35rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }

/* Mentors. Portraits are the only photography on the page, so the cards stay
   plain: one image, one name, one reason the person is listed. Depth lives in
   the profile dialog rather than in a longer card. */
.mentors-section { position: relative; z-index: 2; padding-block: clamp(5rem, 11vw, 10rem); background: var(--canvas-deep); }
.mentors-layout { display: grid; gap: 3.25rem; }
.mentors-statement { min-width: 0; max-width: 56rem; }
.mentors-statement h2 { max-width: 20ch; margin-bottom: 1.5rem; font-size: var(--type-section); }
.mentors-statement > p:last-child { max-width: 44rem; margin: 0; color: var(--muted-strong); font-size: var(--type-lead); }
.mentors-note { max-width: 44rem; margin: -1rem 0 0; color: var(--muted); font-size: .8125rem; }

.mentors-head { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-end; justify-content: space-between; }

.mentors-controls { display: flex; gap: .6rem; }
.mentors-controls[hidden] { display: none; }

.rail-button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted-strong);
  cursor: pointer;
  place-items: center;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.rail-button svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-button:disabled { cursor: default; opacity: .32; }

/* Horizontal rail. The roster scrolls rather than wrapping, so a growing list
   of mentors never adds a second row or leaves an orphan card. */
/* min-width:0 is load-bearing. As a grid item the rail defaults to min-width
   auto, which is the min-content width of a row of non-shrinking cards, so it
   would blow past the shell instead of letting the track scroll. */
.mentors-rail { position: relative; min-width: 0; }
.mentors-rail::before,
.mentors-rail::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(1.5rem, 5vw, 3.5rem);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mentors-rail::before { left: 0; background: linear-gradient(to right, var(--canvas-deep), transparent); }
.mentors-rail::after { right: 0; background: linear-gradient(to left, var(--canvas-deep), transparent); }
.mentors-rail.has-prev::before, .mentors-rail.has-next::after { opacity: 1; }

.mentors-track {
  display: flex;
  gap: 1.25rem;
  /* A card's hover lift and focus ring need room inside the scroll container,
     which starts clipping vertically the moment overflow-x is set. */
  margin: -.6rem;
  padding: .6rem;
  overflow-x: auto;
  list-style: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  /* Match the padding above, or the first card snaps to 10px instead of 0 and
     the rail loads looking already scrolled. */
  scroll-padding-inline: .6rem;
  scroll-snap-type: x proximity;
}
.mentors-track::-webkit-scrollbar { height: .4rem; }
.mentors-track::-webkit-scrollbar-track { background: transparent; }
.mentors-track::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line-strong); }
.mentors-track:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

.mentor-card {
  position: relative;
  display: flex;
  overflow: hidden;
  flex: 0 0 min(80vw, 21rem);
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color .2s ease, box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}

.mentor-card__portrait { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--surface-soft); }
.mentor-card__portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.mentor-card__kicker {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .25rem .55rem;
  border: 1px solid color-mix(in srgb, var(--bone) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--night) 62%, transparent);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mentor-card__kicker--lead { border-color: color-mix(in srgb, var(--signal-bright) 55%, transparent); color: var(--signal-bright); }

.mentor-card__body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 1.25rem 1.25rem 1.1rem; }
.mentor-card__name { margin: 0 0 .2rem; font-size: 1.1rem; }
.mentor-card__trigger {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* The whole card is the target; the button stays the single focusable control. */
.mentor-card__trigger::after { position: absolute; z-index: 1; inset: 0; content: ""; }
.mentor-card__role { margin: 0 0 .7rem; color: var(--bronze-text); font-family: var(--font-display); font-size: .8125rem; font-weight: 600; }
.mentor-card__summary { margin: 0 0 1rem; color: var(--muted); font-size: .875rem; line-height: 1.55; }

.mentor-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: auto 0 .9rem; padding: 0; list-style: none; }
.mentor-card__tags li { padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .75rem; }

.mentor-card__more { display: inline-flex; align-items: center; gap: .35rem; color: var(--signal-text); font-family: var(--font-display); font-size: .8125rem; font-weight: 600; }
.mentor-card__more svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s var(--ease-out); }

.mentor-card:focus-within { border-color: var(--signal); }
.mentor-card__trigger:focus-visible { outline: none; }
.mentor-card:focus-within { outline: 2px solid var(--signal); outline-offset: 3px; }

/* Profile dialog. One panel is filled from the card that opened it, so a new
   mentor is a card plus a template and never another copy of this markup. */
.modal { position: fixed; z-index: var(--z-skip); inset: 0; }
.modal[hidden] { display: none !important; }
.modal__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--night) 72%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal__frame { position: absolute; inset: 0; display: flex; overflow-y: auto; align-items: flex-start; justify-content: center; padding: clamp(1rem, 4vw, 3rem) 1rem; }

.modal__panel {
  position: relative;
  width: min(100%, 40rem);
  overflow: hidden;
  margin: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(11, 11, 10, .3);
}
.modal__panel:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.mentor-modal__portrait { position: relative; overflow: hidden; height: clamp(11rem, 30vw, 15rem); background: var(--surface-soft); }
.mentor-modal__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.mentor-modal__portrait::after { position: absolute; inset: 0; background: linear-gradient(to top, var(--surface), color-mix(in srgb, var(--surface) 35%, transparent) 45%, transparent 78%); content: ""; }

.modal__close {
  position: absolute;
  z-index: 2;
  top: .7rem;
  right: .7rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--bone) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--night) 62%, transparent);
  color: var(--bone);
  cursor: pointer;
  place-items: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .2s ease;
}
.modal__close svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.mentor-modal__body { padding: 0 clamp(1.25rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.25rem); }
.mentor-modal__kicker { margin: 0 0 .5rem; color: var(--signal-text); font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mentor-modal__body h3 { margin: 0 0 .2rem; font-size: clamp(1.5rem, 3vw, 1.85rem); }
.mentor-modal__role { margin: 0 0 1.35rem; color: var(--bronze-text); font-family: var(--font-display); font-size: .95rem; font-weight: 600; }
.mentor-modal__detail p { max-width: 42rem; margin: 0 0 .9rem; color: var(--muted-strong); font-size: .9375rem; line-height: 1.65; }
/* The booking shell follows the page theme. Calendly's free embed keeps its
   own light interface, so the light version of our modal gives it a clean,
   continuous frame. Dark mode restores the night surface used by discovery. */
.booking-modal__panel { width: min(100%, 32rem); border-color: var(--line); background: var(--surface); color: var(--ink); }
.booking-modal__close { top: .85rem; right: .85rem; border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink); }
.booking-modal__head { padding: clamp(1.5rem, 4vw, 2.1rem) clamp(1.25rem, 4vw, 2.1rem) 0; }
.booking-modal__head h2 { max-width: 16ch; margin: 0 0 .7rem; color: var(--ink); font-size: clamp(1.5rem, 3vw, 1.85rem); letter-spacing: -.02em; text-wrap: balance; }
.booking-modal__head > p { margin: 0; max-width: 34rem; color: var(--muted-strong); font-size: .9375rem; line-height: 1.6; }
.booking-modal__body { padding: clamp(1.35rem, 4vw, 1.9rem) clamp(1.25rem, 4vw, 2.1rem) clamp(1.5rem, 4vw, 2.1rem); }
.booking-form__lead { margin: 0 0 1.15rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }
/* A dialog for booking in a hurry: the reserved error slot still prevents the
   shift, but the gaps around it come down so the whole thing stays on a screen. */
.booking-form .field { margin-bottom: .3rem; }
.booking-form .field label { margin-bottom: .3rem; }
.booking-form .field-error { min-height: 1rem; font-size: .8125rem; }
.booking-form .field textarea { min-height: 3.5rem; }
.booking-form__note { margin: .5rem 0 0; color: var(--muted); font-size: .8125rem; text-align: center; }
.booking-form__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.field-optional { color: var(--muted); font-weight: 400; }
.booking-modal__panel .field label { color: var(--ink-soft); }
.booking-modal__panel .field input, .booking-modal__panel .field textarea, .booking-modal__panel .field select { border-color: var(--line-strong); background: var(--canvas); color: var(--ink); }
.booking-modal__panel .field input::placeholder, .booking-modal__panel .field textarea::placeholder { color: var(--muted); }
.booking-modal__panel .field input:focus, .booking-modal__panel .field textarea:focus, .booking-modal__panel .field select:focus { border-color: var(--signal); background: var(--surface); }
.booking-modal__panel .field-hint { color: var(--muted); }
.booking-embed { overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); }
.booking-embed iframe { display: block; width: 100%; min-width: 320px; height: min(72vh, 41rem); border: 0; border-radius: var(--radius-sm); }
html[data-theme="dark"] .booking-embed { border: 1px solid color-mix(in srgb, var(--bone) 22%, transparent); background: var(--bone); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); }

html[data-theme="dark"] .booking-modal__panel { border-color: #3a3935; background: #141513; color: var(--bone); }
html[data-theme="dark"] .booking-modal__close { border-color: color-mix(in srgb, var(--bone) 32%, transparent); background: color-mix(in srgb, var(--night) 62%, transparent); color: var(--bone); }
html[data-theme="dark"] .booking-modal__head h2 { color: var(--bone); }
html[data-theme="dark"] .booking-modal__head > p { color: #b6b2aa; }
html[data-theme="dark"] .booking-form__lead { border-top-color: var(--night-line); color: #8f8c85; }
html[data-theme="dark"] .booking-form__note { color: var(--form-hint); }
html[data-theme="dark"] .booking-form__note a { color: var(--bone); }
html[data-theme="dark"] .field-optional { color: var(--form-hint); }
html[data-theme="dark"] .booking-modal__panel .field label { color: #d5d1ca; }
html[data-theme="dark"] .booking-modal__panel .field input, html[data-theme="dark"] .booking-modal__panel .field textarea, html[data-theme="dark"] .booking-modal__panel .field select { border-color: #6f6d66; background: #191a17; color: var(--bone); }
html[data-theme="dark"] .booking-modal__panel .field input::placeholder, html[data-theme="dark"] .booking-modal__panel .field textarea::placeholder { color: #9b978e; }
html[data-theme="dark"] .booking-modal__panel .field input:focus, html[data-theme="dark"] .booking-modal__panel .field textarea:focus, html[data-theme="dark"] .booking-modal__panel .field select:focus { border-color: #74cfc6; background: #1d1f1b; }
html[data-theme="dark"] .booking-modal__panel .field-hint { color: var(--form-hint); }

.mentor-facts { margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.mentor-facts li { position: relative; padding: .8rem 0 .8rem 1.4rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .875rem; line-height: 1.5; }
.mentor-facts li::before { position: absolute; top: 1.25rem; left: 0; width: .4rem; height: .4rem; border-radius: 50%; background: var(--signal); content: ""; }

.discovery-section { position: relative; z-index: 2; overflow: hidden; padding-block: clamp(5rem, 11vw, 10rem); background: var(--night); color: var(--bone); }
.discovery-glow { position: absolute; top: -20rem; left: 10%; width: 80rem; height: 50rem; background: radial-gradient(ellipse, rgba(116, 207, 198, .11), rgba(233, 154, 115, .08) 35%, transparent 68%); filter: blur(22px); pointer-events: none; }
.discovery-layout { display: grid; gap: 4rem; }
.discovery-layout > * { min-width: 0; }
.discovery-copy { min-width: 0; }
.discovery-copy h2 { max-width: 18ch; margin-bottom: 1.5rem; color: var(--bone); font-size: var(--type-section); }
.discovery-copy > p { max-width: 38rem; color: #b6b2aa; font-size: var(--type-lead); }
.discovery-expectations { margin-top: 3rem; border-top: 1px solid var(--night-line); }
.discovery-expectations > div { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--night-line); }
.discovery-expectations span { color: #d49a62; font-family: var(--font-display); font-size: .75rem; }
.discovery-expectations p { margin: 0; color: #8f8c85; font-size: .82rem; }
.discovery-expectations strong { display: block; margin-bottom: .15rem; color: #dedbd3; font-family: var(--font-display); font-weight: 600; }

.discovery-form { position: relative; min-width: 0; padding: clamp(1.2rem, 4vw, 2.5rem); border: 1px solid #3a3935; border-radius: var(--radius-lg); background: #141513; }
.form-header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #353431; font-family: var(--font-display); }
.form-header span { color: var(--bone); font-weight: 600; }
.form-header small { color: #8f8c85; }
.field-row { display: grid; gap: 1rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: .45rem; color: #d5d1ca; font-family: var(--font-display); font-size: .8125rem; font-weight: 600; }
.field label .req { color: var(--form-warning); }
.form-required-note { margin: -1.25rem 0 1.5rem; color: var(--form-hint); font-size: .8125rem; }
.field input, .field textarea, .field select { width: 100%; min-height: 3rem; border: 1px solid #6f6d66; border-radius: var(--radius-sm); background: #191a17; color: var(--bone); font-size: 1rem; transition: border-color .15s ease, background-color .15s ease; }
.field input, .field select { padding: .7rem .8rem; }
.field textarea { min-height: 8rem; padding: .8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9b978e; opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #74cfc6; background: #1d1f1b; outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--form-error); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--form-error) 45%, transparent); }
.field input[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus { border-color: var(--form-error); outline: 2px solid var(--form-error); outline-offset: 2px; }
.field-error { display: block; min-height: 1.2rem; margin-top: .3rem; color: var(--form-error); font-size: .875rem; }
.field-hint { display: block; margin-top: .35rem; color: var(--form-hint); font-size: .8125rem; }
.form-submit { width: 100%; margin-top: .5rem; }
.form-submit.is-loading { pointer-events: none; opacity: .75; }
.form-status { min-height: 1.5rem; margin: .9rem 0 0; color: var(--form-success); font-size: .85rem; text-align: center; }
.form-status[data-state="error"] { color: var(--form-error); }
.form-status[data-state="warning"] { color: var(--form-warning); }
.form-note { margin: .4rem 0 0; color: var(--form-hint); font-size: .8125rem; text-align: center; }
.form-note a { color: var(--bone); text-decoration: underline; text-underline-offset: 2px; }
.honeypot { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-footer { position: relative; z-index: 2; padding-block: 2rem max(2rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--canvas); }
.footer-layout { display: grid; gap: 1.4rem; align-items: center; }
.brand--footer { width: max-content; }
.site-footer p { margin: 0; color: var(--muted); font-size: .82rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--muted-strong); font-family: var(--font-display); font-size: .8rem; text-decoration: none; }
.site-footer small { color: var(--muted); font-size: .75rem; }
.noscript { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; left: 1rem; padding: 1rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .85rem; }

@container (min-width: 35rem) {
  .discovery-canvas { grid-template-columns: 1fr 1fr; }
  .intake-layout { grid-template-columns: 8rem 1fr; }
  .intake-nav { flex-direction: column; overflow: visible; border-right: 1px solid var(--line-soft); border-bottom: 0; }
  .audit-workspace { grid-template-columns: .7fr 1.3fr; }
  .audit-transcript { border-right: 1px solid var(--line-soft); border-bottom: 0; }
  .implementation-modules { grid-template-columns: repeat(4, 1fr); }
  .implementation-destinations { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 40rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .report-signals { grid-template-columns: repeat(3, 1fr); }
  /* Flex column so the figures line up along the bottom regardless of how
     many lines each pattern description wraps to. */
  .report-signals article { display: flex; flex-direction: column; padding: 1rem; border-right: 1px solid var(--line); border-bottom: 0; }
  .report-signals article b { align-self: flex-start; margin-top: auto; }
  .report-signals article:first-child { padding-left: 0; }
  .report-signals article:last-child { padding-right: 0; border-right: 0; }
  .report-priority { grid-template-columns: 1.5fr .8fr; }
  .build-scale { grid-template-columns: 1fr 1fr; }
  .report-viewer__topbar { grid-template-columns: 1fr auto; align-items: center; }
  /* Give the tabs their own row at tablet widths. A three-column bar leaves the
     implementation label clipped before the visitor can reach it. */
  .report-viewer__topbar [role="tablist"] { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }

  .report-viewer__status { text-align: right; }
}

@media (max-width: 39.99rem) {
  .site-header { width: calc(100% - 1rem); }
  .nav-shell { min-height: 3.65rem; padding: .35rem; }
  .brand { gap: .42rem; min-height: 2.75rem; font-size: .78rem; }
  .brand-mark { width: 1.35rem; height: 1.35rem; }
  .nav-actions { gap: .15rem; }
  .nav-cta { padding-inline: .65rem; font-size: .72rem; }
  .theme-toggle, .menu-toggle { min-width: 2.75rem; min-height: 2.75rem; }
  .theme-toggle__track { transform: scale(.9); }
  .hero { gap: 3rem; padding-top: 7.5rem; }
  .hero h1 { max-width: 12ch; font-size: clamp(2.35rem, 11vw, 2.9rem); }
  .hero__lead { font-size: 1rem; }
  .hero__actions { align-items: stretch; }
  .hero__actions .button { width: 100%; }
  .hero__actions .text-link { width: max-content; max-width: 100%; }
  .hero__assurance { display: grid; }
  .hero-context { gap: .4rem; }
  .hero-context > b { padding: .25rem .55rem; border: 1px solid var(--line); border-radius: 99px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
  .report-score__ring { width: 4.2rem; height: 4.2rem; }
  .map-detail__flow { grid-template-columns: 1fr; }
  .map-plot { padding-left: 2.45rem; }
  .map-grid { height: 26rem; }
  .map-axis--x { left: 2.3rem; }
  .map-axis--y { top: 1.25rem; }
  .map-bubble--one { width: 7rem; height: 7rem; }
  .map-bubble--two, .map-bubble--three { width: 5.5rem; height: 5.5rem; }
  .map-bubble--four { width: 4.8rem; height: 4.8rem; }
}

@media (min-width: 48rem) {
  .report-handoff { grid-template-columns: minmax(0, 1.25fr) minmax(12rem, .75fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
  .report-handoff__note { padding: 0; }
  .report-panel { grid-template-columns: 17rem 1fr; }
  .report-panel.is-active { display: grid; }
  .report-sidebar { border-right: 1px solid var(--line); border-bottom: 0; }
  .path-plan { padding: 3rem; }
  .path-plan article { grid-template-columns: 4rem 1fr; align-items: center; padding: 1.7rem 0; }
  .path-plan article::before { left: 1.55rem; }
  .principles-list li { padding-block: 1.55rem; }
  .footer-layout { grid-template-columns: auto 1fr auto; }
  .site-footer p { text-align: center; }
  .footer-links { justify-content: flex-end; }
  .site-footer small { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
}

@media (min-width: 64rem) {
  /* Keep the navigation visually centred between the brand and the action
     group, even when those side groups have different widths. */
  .nav-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr); }
  .brand { grid-column: 1; }
  .nav-links { display: flex; grid-column: 2; margin-inline: 0; }
  .nav-actions { grid-column: 3; justify-self: end; margin-left: 0; }
  .report-viewer__topbar { grid-template-columns: auto 1fr auto; }
  .report-viewer__topbar [role="tablist"] { grid-column: auto; justify-self: center; justify-content: center; }
  .nav-cta { padding-inline: 1rem; }
  .nav-cta__full { display: inline; }
  .nav-cta__short { display: none; }
  .menu-toggle { display: none; }
  .hero { gap: clamp(2rem, 4vw, 5rem); }
  .process-step__copy { max-width: 42rem; }
  .report-heading { grid-template-columns: 1.2fr .8fr; align-items: end; }
  .report-heading > p { justify-self: end; }
  .principles-layout { grid-template-columns: minmax(0, 1fr) minmax(22rem, .78fr); gap: clamp(4rem, 9vw, 10rem); align-items: start; }
  .principles-statement { position: static; }
  /* The call column is shorter than the message form and centres against it.
     Top-aligned it left roughly 500px of dead section under the primary action. */
  .discovery-layout { grid-template-columns: 1fr .9fr; gap: clamp(4rem, 9vw, 10rem); align-items: center; }
  .build-scale { grid-template-columns: repeat(4, 1fr); }
  /* Heading and caveat on the left, the terms as one uninterrupted list on the
     right. Five terms across two columns always leaves an empty cell. */
  .build-terms { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
  .discovery-book .button { width: auto; }
  /* Once there is room, the three terms read as one equation left to right.
     Below this they stack, with the operator still between each pair. */
  .value-math__row { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 2rem; }
  /* Label line plus the figure's own top margin, then the same size and leading
     as the figures, so the glyph lands on their centre without a magic number. */
  .value-math__op { display: block; padding-top: calc(.8125rem * 1.3 + .3rem); font-size: var(--figure); font-weight: 500; line-height: var(--figure-lh); text-align: center; }
  .value-math__op::before, .value-math__op::after { display: none; }
}

@media (min-width: 78rem) {
  .process-step { grid-template-columns: minmax(18rem, .72fr) minmax(30rem, 1.28fr); gap: clamp(2.5rem, 4vw, 5rem); align-items: center; }
  .process-step__copy { align-self: center; }
}

/* Natural consulting timeline */
.process-intro { margin-bottom: clamp(2.25rem, 4.5vw, 4rem); }
.process-timeline { position: relative; }
.timeline-track { display: none; }
.process-timeline .process-step {
  display: grid;
  gap: clamp(2.25rem, 5vw, 5rem);
  min-height: 0;
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.process-timeline .process-step:first-child { padding-top: clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid var(--line); }
.process-timeline .process-step:last-child { padding-bottom: 0; }
.process-timeline .artifact { align-self: center; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }

@media (min-width: 48rem) {
  .mentor-modal__panel { display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1fr); }
  /* Context beside the fields rather than stacked above them. Stacked, the
     dialog ran 883px against a 900px viewport, which is not what booking in a
     hurry should feel like. */
  .booking-modal__panel { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); width: min(100%, 51rem); }
  .booking-modal__head { display: flex; flex-direction: column; justify-content: center; padding: 2.25rem; border-right: 1px solid var(--night-line); background: #101110; }
  /* The column is the measure here, so the heading is not also clamped by a
     character count that broke "15-minute" across two lines. */
  .booking-modal__head h2 { max-width: none; }
  .booking-modal__body { padding: 2.25rem; }
  /* Clears the close button, which sits over this column. */
  .booking-form__lead { margin-bottom: 1.25rem; padding-top: 0; padding-right: 3rem; border-top: 0; }
  /* A scheduler wants the full width, and it brings its own framing. */
  .booking-modal__panel--embed { display: block; width: min(100%, 44rem); }
  .booking-modal__panel--embed .booking-modal__head { border-right: 0; background: none; }
  .mentor-modal__portrait { height: 100%; min-height: 22rem; }
  .mentor-modal__portrait::after { background: linear-gradient(to right, transparent 55%, color-mix(in srgb, var(--surface) 40%, transparent) 82%, var(--surface)); }
  .mentor-modal__body { padding: clamp(1.75rem, 3vw, 2.5rem); }
}

@media (min-width: 64rem) {
  .timeline-track { display: block; position: absolute; top: 3rem; bottom: 1rem; left: 50%; width: 1px; background: var(--line); transform: translateX(-50%); }
  .timeline-beam { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: linear-gradient(var(--bronze), var(--coral), var(--signal)); box-shadow: 0 0 .75rem color-mix(in srgb, var(--bronze) 55%, transparent); will-change: transform; }
  .process-timeline .process-step { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 5.5vw, 5.5rem); align-items: center; }
  .process-timeline .process-step::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; width: .7rem; height: .7rem; transform: translate(-50%, -50%) scale(1); border: 2px solid var(--canvas); border-radius: 50%; background: var(--line-strong); box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 .6rem var(--canvas); transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out); }
  .process-timeline .process-step.is-reached::before { transform: translate(-50%, -50%) scale(1.25); background: var(--bronze); box-shadow: 0 0 0 1px var(--bronze), 0 0 0 .6rem var(--canvas), 0 0 1rem color-mix(in srgb, var(--bronze) 65%, transparent); }
  /* The numbers ignite with the beam, so the sequence doubles as the progress
     readout instead of sitting beside one. */
  .process-timeline .process-step.is-reached .step-number { border-color: var(--bronze-solid); background: var(--bronze-solid); color: var(--on-bronze); }
  .process-timeline .process-step:nth-child(odd) .process-step__copy { grid-column: 1; grid-row: 1; padding-right: clamp(1rem, 3vw, 3rem); }
  .process-timeline .process-step:nth-child(odd) .artifact { grid-column: 2; grid-row: 1; }
  .process-timeline .process-step:nth-child(even) .process-step__copy { grid-column: 2; grid-row: 1; padding-left: clamp(1rem, 3vw, 3rem); }
  .process-timeline .process-step:nth-child(even) .artifact { grid-column: 1; grid-row: 1; }
  .process-timeline .process-step:first-child { padding-top: clamp(3rem, 5vw, 4rem); }
}

@media (max-width: 47.99rem) {
  .process-timeline .process-step { padding-block: 3rem; }
  /* Keep the proof artifacts present on mobile, but remove their desktop-sized
     breathing room so the next stage arrives before the visitor loses the path. */
  .process-timeline .artifact-note { padding: .7rem .85rem; font-size: .75rem; }
  .discovery-radar { min-height: 15rem; }
  .intake-layout { min-height: 20rem; }
  .audit-workspace { min-height: 25rem; }
  .audit-map { min-height: 17rem; }
  .report-handoff { min-height: 25rem; }
  .report-handoff__cover { min-height: 18rem; }
  .implementation-path { min-height: 27rem; }
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { background: var(--surface-soft); color: var(--ink); }
  .theme-toggle:hover, .menu-toggle:hover { background: var(--surface-soft); }
  .button:hover { transform: translateY(-2px); }
  .button--primary:hover { background: var(--bronze); color: var(--on-bronze); }
  .button--light:hover { background: var(--signal-pale); }
  html[data-theme="dark"] .button--light:hover { background: var(--signal); color: var(--night); }
  .text-link:hover { border-color: var(--bronze); color: var(--bronze-text); }
  .map-bubble:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--map-accent, var(--ink)) 16%, transparent), 0 0 1.2rem color-mix(in srgb, var(--map-accent, var(--ink)) 22%, transparent); }
  .footer-links a:hover { color: var(--bronze-text); }
  .bento-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
  .bento-card:hover .bento-card__icon { border-color: currentColor; }
  .bento-card:hover .bento-card__go { transform: translateX(3px); background: var(--surface-soft); color: var(--ink); }
  .process-timeline .artifact:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(17, 18, 15, .09); }
  html[data-theme="dark"] .process-timeline .artifact:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--line-strong) 78%, transparent), 0 1rem 2rem rgba(0, 0, 0, .28); }
  .principles-list li:hover h3 { color: var(--bronze-text); }
  .principles-list li:hover .principles-list__marker { width: 1.75rem; background: var(--ink); }
  .build-scale li:hover { transform: translateY(-3px); border-color: var(--line-strong); }
  .report-viewer__topbar button:not([aria-selected="true"]):hover { border-color: var(--line); background: var(--surface-raised); color: var(--ink); }
  .report-handoff__note a:hover { border-color: var(--bronze); color: var(--bronze-text); }
  .mentor-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
  .mentor-card:hover .mentor-card__portrait img { transform: scale(1.04); }
  .mentor-card:hover .mentor-card__more svg { transform: translateX(3px); }
  .modal__close:hover { background: color-mix(in srgb, var(--night) 82%, transparent); }
  .booking-modal__close:hover { background: var(--surface-soft); }
  html[data-theme="dark"] .booking-modal__close:hover { background: color-mix(in srgb, var(--night) 82%, transparent); }
}

@media (pointer: coarse) {
  .nav-links a, .report-viewer__topbar button { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ambient-canvas, #opportunity-canvas { display: none; }
  .timeline-beam { transition: none; }
  .opportunity-field__aura { transform: none; }
}

@media print {
  .site-header, .ambient-canvas, .theme-toggle, .menu-toggle, .hero__actions, .discovery-form, .site-footer { display: none !important; }
  body, .process-section, .report-section, .build-section, .principles-section { background: #fff !important; color: #111 !important; }
  .discovery-section { background: #111 !important; color: #fff !important; }
  .hero { min-height: auto; padding-top: 2rem; }
  .process-step { break-inside: avoid; min-height: auto; }
  .artifact { box-shadow: none; }
}