:root {
  --navy: #0f172a;
  --ink: #162033;
  --muted: #5c687c;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --soft: #f8fafc;
  --line: #e2e8f0;
  --green: #16a34a;
  --amber: #b7791f;
  --white: #fff;
  --max: 1280px;
  --header: 84px;
  font-family: "Inter", sans-serif;
  color: var(--navy);
  background: var(--white);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--white); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.shell { min-height: 100vh; overflow: clip; }
.container { width: min(var(--max), calc(100% - 64px)); margin-inline: auto; }
.narrow { width: min(860px, calc(100% - 64px)); margin-inline: auto; }

.site-header {
  height: var(--header);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 180px 1fr 190px;
  align-items: center;
  gap: 32px;
}
.brand { display: inline-flex; align-items: center; width: fit-content; }
.brand img { width: 132px; height: auto; display: block; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 30px; }
.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  padding: 10px 0;
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--blue);
  transition: right .25s ease;
}
.nav-link:hover, .nav-link.active { color: var(--navy); }
.nav-link:hover::after, .nav-link.active::after { right: 0; }
.header-cta { justify-self: end; }
.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 10px;
  padding: 12px;
}
.menu-button span { display: block; height: 2px; background: var(--navy); margin: 4px 0; }

.button {
  border: 1px solid transparent;
  border-radius: 9px;
  min-height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); color: white; box-shadow: 0 8px 20px rgba(37,99,235,.16); }
.button-primary:hover { background: var(--blue-dark); }
.button-secondary { border-color: #cbd5e1; background: white; color: var(--navy); }
.button-secondary:hover { border-color: #94a3b8; }
.button-dark { background: white; color: var(--navy); }
.button-text { padding-inline: 4px; color: var(--blue); }
.arrow { font-size: 18px; line-height: 1; }

.eyebrow {
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 18px;
}
h1, h2, h3 { font-family: "Inter Tight", sans-serif; letter-spacing: -.035em; margin: 0; }
h1 { font-size: clamp(48px, 6vw, 86px); line-height: .99; font-weight: 600; }
h2 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.05; font-weight: 600; }
h3 { font-size: 24px; line-height: 1.15; font-weight: 600; }
p { color: var(--muted); line-height: 1.7; }
.lead { font-size: 18px; max-width: 680px; }
.section { padding: 112px 0; }
.section-soft { background: var(--soft); border-block: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 48px; margin-bottom: 56px; }
.section-head p { max-width: 500px; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.assessment-hero { padding: 72px 0 104px; }
.assessment-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 72px; align-items: center; }
.assessment-copy h1 { font-size: clamp(48px, 5.2vw, 76px); }
.assessment-copy .lead { margin: 26px 0 0; }
.assessment-panel {
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  padding: 30px;
  background: white;
  box-shadow: 0 18px 45px rgba(15,23,42,.07);
}
.panel-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 10px; }
.panel-title { font-weight: 650; letter-spacing: -.02em; }
.live-indicator { display: flex; gap: 8px; align-items: center; color: var(--green); font-size: 12px; font-weight: 600; }
.live-indicator::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(22,163,74,.1); }
.metric-row { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: 16px; padding: 15px 0; }
.metric-name { font-size: 13px; color: #475569; }
.metric-track { height: 7px; border-radius: 20px; background: #e8edf4; overflow: hidden; }
.metric-bar { height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.metric-value { font-size: 13px; font-weight: 700; text-align: right; }
.score-summary { margin-top: 18px; padding: 24px; display: flex; justify-content: space-between; align-items: center; background: var(--navy); color: white; border-radius: 12px; }
.score-label { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: .1em; }
.score-number { font-family: "Inter Tight"; font-size: 48px; letter-spacing: -.05em; }
.score-number small { font-size: 18px; color: #94a3b8; }
.attention { color: #fbbf24; font-size: 13px; font-weight: 600; }

.intro-statement { padding: 96px 0 80px; border-top: 1px solid var(--line); }
.intro-statement h2 { max-width: 980px; }
.intro-statement h2 span { color: var(--blue); }
.intro-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 38px; align-items: start; }
.intro-bottom p { margin: 0; font-size: 18px; }

.cost-grid { border-top: 1px solid var(--line); }
.cost-row { display: grid; grid-template-columns: 1fr 52px 1fr; align-items: center; border-bottom: 1px solid var(--line); padding: 27px 8px; }
.cost-cause { font-family: "Inter Tight"; font-size: 27px; letter-spacing: -.025em; }
.cost-arrow { color: #94a3b8; font-size: 22px; }
.cost-effect { color: var(--navy); font-weight: 600; }

.calculator { display: grid; grid-template-columns: .86fr 1.14fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: white; }
.calculator-form { padding: 42px; }
.field { margin-bottom: 24px; }
.field label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.field input[type="number"], .contact-form input, .contact-form textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 14px 15px;
  color: var(--navy);
  outline: none;
  background: white;
}
.field input:focus, .contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.calculator-result { background: var(--navy); color: white; padding: 54px; display: flex; flex-direction: column; justify-content: center; }
.result-kicker { color: #94a3b8; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.result-value { font-family: "Inter Tight"; font-size: clamp(54px, 6vw, 84px); letter-spacing: -.055em; margin: 12px 0 4px; }
.result-period { color: #94a3b8; }
.result-note { color: #cbd5e1; max-width: 440px; margin-top: 38px; font-size: 14px; }

.gallery-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.gallery-tab { border: 1px solid var(--line); background: white; border-radius: 20px; padding: 9px 15px; color: #475569; cursor: pointer; font-size: 13px; }
.gallery-tab.active { color: white; background: var(--navy); border-color: var(--navy); }
.comparison {
  --position: 52%;
  height: 560px;
  position: relative;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  background: #eef2f6;
  user-select: none;
}
.comparison-view { position: absolute; inset: 0; padding: 50px; overflow: hidden; }
.comparison-before { width: var(--position); z-index: 2; background: #e5e7eb; border-right: 1px solid #94a3b8; }
.comparison-after { background: #fff; }
.comparison-before .site-mock { width: calc((100vw - 128px) * .74); max-width: 1100px; filter: grayscale(1); }
.comparison-label { position: absolute; top: 22px; z-index: 5; font-size: 11px; font-weight: 700; letter-spacing: .1em; padding: 8px 11px; border-radius: 5px; }
.label-before { left: 22px; background: #fff; }
.label-after { right: 22px; background: var(--green); color: white; }
.site-mock { height: 100%; border: 1px solid #cbd5e1; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 35px rgba(15,23,42,.1); }
.mock-nav { height: 54px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 24px; justify-content: space-between; font-size: 12px; font-weight: 700; }
.mock-links { display: flex; gap: 18px; color: #64748b; font-weight: 500; }
.mock-body { display: grid; grid-template-columns: 1fr 1.1fr; height: calc(100% - 54px); }
.mock-copy { padding: 48px 36px; }
.mock-copy strong { display: block; font-family: "Inter Tight"; font-size: clamp(32px, 4vw, 62px); line-height: 1.02; letter-spacing: -.04em; max-width: 500px; }
.mock-copy p { max-width: 390px; }
.mock-button { display: inline-block; margin-top: 12px; background: var(--blue); color: white; padding: 12px 16px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.mock-image { margin: 24px; border-radius: 8px; background: #dbe4ee; position: relative; overflow: hidden; }
.mock-image::before, .mock-image::after { content: ""; position: absolute; background: #c2cedc; }
.mock-image::before { width: 65%; height: 70%; right: -8%; bottom: 0; border-radius: 80px 0 0; }
.mock-image::after { width: 46%; height: 46%; left: 9%; bottom: 0; border-radius: 90px 90px 0 0; }
.comparison-before .mock-copy { padding-top: 70px; }
.comparison-before .mock-copy strong { font-size: clamp(26px, 3vw, 44px); }
.comparison-before .mock-button { background: #64748b; }
.comparison-handle { position: absolute; z-index: 6; left: var(--position); top: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border: 1px solid #cbd5e1; border-radius: 50%; background: white; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(15,23,42,.15); pointer-events: none; }
.comparison input { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; opacity: 0; cursor: ew-resize; }

.editorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
.diagram { position: sticky; top: 125px; min-height: 500px; border: 1px solid var(--line); border-radius: 16px; padding: 36px; background: white; }
.diagram-title { font-size: 13px; color: #64748b; margin-bottom: 34px; }
.journey { display: grid; gap: 22px; }
.journey-node { border: 1px solid var(--line); border-radius: 10px; padding: 18px; position: relative; background: white; }
.journey-node:not(:last-child)::after { content: ""; width: 1px; height: 23px; position: absolute; left: 28px; top: 100%; background: #cbd5e1; }
.journey-node b { display: block; font-size: 14px; }
.journey-node span { color: #64748b; font-size: 12px; }
.journey-node.problem { border-left: 3px solid #dc2626; }
.journey-node.success { border-left: 3px solid var(--green); }
.editorial-item { padding: 0 0 48px; margin-bottom: 48px; border-bottom: 1px solid var(--line); }
.editorial-item .number { color: var(--blue); font-size: 12px; font-weight: 700; margin-bottom: 18px; }
.editorial-item p { margin-bottom: 0; }

.difference { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.difference-head, .difference-row { display: grid; grid-template-columns: 1fr 1fr; }
.difference-head { background: var(--navy); color: white; }
.difference-head div { padding: 24px 30px; font-size: 13px; font-weight: 700; }
.difference-row { border-top: 1px solid var(--line); }
.difference-row div { padding: 30px; font-family: "Inter Tight"; font-size: 23px; }
.difference-row div:first-child { background: var(--soft); color: #64748b; }
.difference-row div:last-child { color: var(--navy); font-weight: 600; }

.final-cta { padding: 0 0 112px; }
.cta-panel { background: var(--navy); color: white; border-radius: 18px; padding: 70px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-panel h2 { max-width: 700px; }

.page-hero { padding: 94px 0 82px; border-bottom: 1px solid var(--line); }
.page-hero .lead { margin: 25px 0 0; }
.page-hero-grid { display: grid; grid-template-columns: 1fr .75fr; gap: 80px; align-items: end; }
.page-note { border-left: 2px solid var(--blue); padding-left: 24px; }
.page-note p { margin: 0; }
.page-hero-visual { padding: 72px 0 82px; }
.page-hero-visual .page-hero-grid { grid-template-columns: .78fr 1.22fr; gap: 58px; align-items: center; }
.page-hero-visual h1 { font-size: clamp(44px, 4.6vw, 68px); }
.page-inline-note { border-left: 2px solid var(--blue); padding-left: 18px; color: #64748b; font-size: 13px; line-height: 1.6; margin-top: 28px; max-width: 580px; }
.hero-story { min-width: 0; }
.visual-story { min-height: 430px; border: 1px solid #cbd5e1; border-radius: 16px; background: white; box-shadow: 0 18px 45px rgba(15,23,42,.07); position: relative; overflow: hidden; }

.visual-toolbar { height: 52px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 7px; padding: 0 18px; font-size: 10px; color: #64748b; }
.visual-toolbar > span { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.visual-toolbar b { margin-left: 10px; font-weight: 500; }
.visual-toolbar em { margin-left: auto; font-style: normal; color: var(--green); font-weight: 700; letter-spacing: .1em; }
.scan-canvas { height: 320px; position: relative; background: var(--soft); padding: 30px 44px; }
.scan-site { position: absolute; inset: 28px 62px; border: 1px solid #cbd5e1; background: white; border-radius: 8px; overflow: hidden; }
.scan-site i { display: block; position: absolute; background: #dce4ee; border-radius: 4px; }
.scan-logo { left: 22px; top: 20px; width: 72px; height: 8px; }
.scan-nav { right: 22px; top: 20px; width: 128px; height: 7px; }
.scan-heading { left: 28px; top: 82px; width: 42%; height: 42px; background: #aebdce !important; }
.scan-copy { left: 28px; top: 142px; width: 35%; height: 32px; }
.scan-button { left: 28px; top: 194px; width: 86px; height: 28px; background: #93b4f5 !important; }
.scan-image { right: 28px; top: 68px; width: 41%; height: 165px; }
.scan-line { position: absolute; left: 62px; right: 62px; top: 36px; height: 2px; background: var(--blue); box-shadow: 0 0 16px rgba(37,99,235,.45); animation: scan 3.8s ease-in-out infinite; z-index: 3; }
.scan-marker { position: absolute; z-index: 4; border: 1px solid #f1c8c8; background: #fff; border-radius: 6px; padding: 7px 9px; font-size: 10px; color: #64748b; box-shadow: 0 5px 14px rgba(15,23,42,.09); }
.scan-marker b { color: #dc2626; margin-left: 5px; }
.marker-one { left: 28px; top: 94px; }
.marker-two { right: 28px; top: 148px; }
.marker-three { left: 45%; bottom: 28px; }
.visual-status { min-height: 58px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; font-size: 11px; color: #64748b; }
.visual-status strong { color: var(--navy); }
@keyframes scan { 0%,100% { top: 38px; opacity: .4; } 50% { top: 292px; opacity: 1; } }

.anatomy-visual { min-height: 460px; background: var(--soft); }
.anatomy-browser { position: absolute; left: 10%; top: 10%; width: 62%; height: 70%; border: 1px solid #94a3b8; background: white; border-radius: 10px; box-shadow: 0 14px 32px rgba(15,23,42,.08); overflow: hidden; }
.anatomy-bar { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 13px; border-bottom: 1px solid var(--line); }
.anatomy-bar span { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; }
.anatomy-bar i { width: 48%; height: 7px; border-radius: 10px; background: #e2e8f0; margin-left: 12px; }
.anatomy-page { position: absolute; inset: 38px 0 0; }
.anatomy-page div { position: absolute; background: #dbe4ee; border-radius: 4px; }
.anatomy-headline { left: 8%; top: 14%; width: 45%; height: 18%; background: #a9b8c9 !important; }
.anatomy-copy { left: 8%; top: 38%; width: 38%; height: 10%; }
.anatomy-cta { left: 8%; top: 55%; width: 22%; height: 11%; background: #9cbaf5 !important; }
.anatomy-proof { left: 8%; right: 8%; bottom: 10%; height: 11%; }
.anatomy-content { right: 8%; top: 14%; width: 35%; height: 52%; }
.anatomy-callout { position: absolute; right: 5%; background: white; border: 1px solid var(--line); border-left: 3px solid #dc2626; padding: 11px 13px; border-radius: 7px; min-width: 158px; font-size: 11px; box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.anatomy-callout b { color: #dc2626; margin-right: 8px; }
.callout-one { top: 18%; }
.callout-two { top: 42%; }
.callout-three { top: 66%; }
.anatomy-callout::before { content: ""; position: absolute; right: 100%; top: 50%; width: 52px; height: 1px; background: #f0a6a6; }
.anatomy-path { position: absolute; left: 8%; right: 8%; bottom: 4%; display: flex; align-items: center; gap: 8px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: #64748b; }
.anatomy-path i { height: 1px; flex: 1; background: var(--green); position: relative; }
.anatomy-path i::after { content: ""; position: absolute; right: 0; top: -3px; border-left: 5px solid var(--green); border-block: 3px solid transparent; }
.anatomy-path i.broken { background: #dc2626; }
.anatomy-path i.broken::after { border-left-color: #dc2626; }

.outcome-dashboard { padding: 24px; background: var(--navy); color: white; }
.dashboard-top { height: 38px; display: flex; justify-content: space-between; border-bottom: 1px solid #293449; color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.dashboard-top b { color: white; }
.dashboard-main { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; padding: 30px 0; }
.dashboard-score { border-right: 1px solid #293449; padding-right: 28px; }
.dashboard-score > span, .dashboard-chart > span { display: block; color: #94a3b8; font-size: 11px; margin-bottom: 18px; }
.dashboard-score strong { display: block; font: 600 58px "Inter Tight"; letter-spacing: -.05em; }
.dashboard-score strong small { color: var(--green); font-size: 22px; margin: 0 9px; }
.dashboard-score i { height: 7px; display: block; background: #273248; border-radius: 10px; margin-top: 28px; }
.dashboard-score i b { display: block; width: 81%; height: 100%; border-radius: inherit; background: var(--blue); animation: grow 1.2s ease both; }
.chart-bars { height: 165px; display: flex; align-items: end; gap: 8px; border-bottom: 1px solid #39455a; }
.chart-bars i { flex: 1; min-width: 8px; background: #34425a; position: relative; animation: rise .8s ease both; transform-origin: bottom; }
.chart-bars i:nth-last-child(-n+4) { background: var(--blue); }
.chart-bars i b { position: absolute; top: -22px; right: 0; font-style: normal; color: #60a5fa; font-size: 11px; white-space: nowrap; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #293449; padding-top: 24px; gap: 16px; }
.dashboard-metrics div { border-right: 1px solid #293449; }
.dashboard-metrics div:last-child { border: 0; }
.dashboard-metrics span { display: block; font-size: 9px; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; }
.dashboard-metrics strong { display: block; margin-top: 8px; font: 600 24px "Inter Tight"; color: #4ade80; }
@keyframes grow { from { width: 0; } }
@keyframes rise { from { transform: scaleY(0); } }

.blueprint-visual { min-height: 470px; background: #0f2445; color: white; border-color: #1e3a66; }
.blueprint-grid { position: absolute; inset: 22px; border: 1px solid rgba(147,197,253,.14); }
.blueprint-grid::before, .blueprint-grid::after { content: ""; position: absolute; background: rgba(147,197,253,.12); }
.blueprint-grid::before { left: 33%; top: 0; bottom: 0; width: 1px; box-shadow: 190px 0 rgba(147,197,253,.12); }
.blueprint-grid::after { top: 33%; left: 0; right: 0; height: 1px; box-shadow: 0 138px rgba(147,197,253,.12); }
.blueprint-path { position: absolute; inset: 34px 36px 62px; }
.blueprint-path svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #60a5fa; stroke-width: 2; stroke-dasharray: 6 6; }
.blueprint-node { position: absolute; z-index: 2; min-width: 105px; background: #102b50; border: 1px solid #3b82f6; border-radius: 8px; padding: 11px 13px; box-shadow: 0 0 0 5px rgba(59,130,246,.06); }
.blueprint-node b { display: block; color: #60a5fa; font-size: 9px; margin-bottom: 5px; }
.blueprint-node span { font: 600 13px "Inter Tight"; }
.node-1 { left: 0; top: 6%; }.node-2 { left: 29%; top: 6%; }.node-3 { left: 29%; top: 42%; }
.node-4 { left: 56%; top: 42%; }.node-5 { left: 56%; top: 76%; }.node-6 { right: 0; top: 76%; }
.blueprint-legend { position: absolute; left: 36px; bottom: 25px; display: flex; align-items: center; gap: 9px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: #93c5fd; }
.blueprint-legend i { width: 28px; border-top: 1px dashed #60a5fa; }

.solution-map { min-height: 470px; padding: 28px; background: var(--soft); }
.map-origin { border: 1px solid #94a3b8; border-radius: 9px; padding: 16px 18px; background: white; width: 56%; margin: 0 auto; text-align: center; }
.map-origin span, .map-outcome span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: #64748b; margin-bottom: 5px; }
.map-origin strong, .map-outcome strong { font-size: 13px; }
.map-lines { height: 52px; position: relative; }
.map-lines::before { content: ""; position: absolute; left: 50%; top: 0; height: 26px; border-left: 1px solid #94a3b8; }
.map-lines::after { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 25px; border-top: 1px solid #94a3b8; }
.map-lines i { position: absolute; top: 25px; height: 27px; border-left: 1px solid #94a3b8; }
.map-lines i:nth-child(1) { left: 16.66%; }.map-lines i:nth-child(2) { left: 50%; }.map-lines i:nth-child(3) { left: 83.33%; }
.map-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.map-options > div { background: white; border: 1px solid var(--line); border-radius: 9px; padding: 18px 14px; min-height: 126px; }
.map-options > div.selected { border-color: var(--blue); box-shadow: inset 0 3px 0 var(--blue); }
.map-options span { display: block; font-size: 9px; color: #64748b; min-height: 25px; }
.map-options strong { display: block; font: 600 22px "Inter Tight"; letter-spacing: -.02em; margin: 7px 0; color: var(--navy); }
.map-options .selected strong { color: var(--blue); }
.map-options small { color: #64748b; font-size: 9px; line-height: 1.45; display: block; }
.map-outcome { width: 56%; margin: 42px auto 0; border-radius: 9px; padding: 14px; text-align: center; background: var(--navy); color: white; position: relative; }
.map-outcome::before { content: ""; position: absolute; height: 43px; border-left: 1px solid #94a3b8; bottom: 100%; left: 50%; }
.map-outcome span { color: #94a3b8; }

.review-journey { min-height: 430px; background: var(--navy); color: white; display: flex; align-items: center; justify-content: center; padding: 34px; }
.review-radar { width: 128px; height: 128px; border: 1px solid #334155; border-radius: 50%; display: grid; place-items: center; position: relative; flex: 0 0 auto; }
.review-radar i { position: absolute; border: 1px solid #334155; border-radius: 50%; }
.review-radar i:nth-child(1) { inset: 12px; }.review-radar i:nth-child(2) { inset: 30px; }.review-radar i:nth-child(3) { inset: 48px; background: #1e293b; }
.review-radar span { position: absolute; top: 26px; z-index: 2; color: #60a5fa; font-size: 10px; }
.review-radar b { position: relative; z-index: 2; text-align: center; font: 600 13px "Inter Tight"; line-height: 1.25; }
.review-radar.active { border-color: #3b82f6; box-shadow: 0 0 0 12px rgba(37,99,235,.08); }
.review-radar.active i { border-color: #2563eb; }
.review-radar.active i:nth-child(3) { background: var(--blue); }
.review-connector { flex: 1; min-width: 44px; position: relative; color: #94a3b8; text-align: center; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.review-connector i { display: block; border-top: 1px dashed #475569; margin-bottom: 10px; }
.review-connector i::after { content: ""; position: absolute; right: 0; top: -3px; border-left: 5px solid #475569; border-block: 3px solid transparent; }

.audit-overview { display: grid; grid-template-columns: 340px 1fr; gap: 54px; }
.overall-card { border: 1px solid var(--line); border-radius: 16px; padding: 34px; height: fit-content; position: sticky; top: 120px; }
.score-ring { width: 190px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; margin: 20px auto 28px; background: conic-gradient(var(--blue) 0 42%, #e8edf4 42% 100%); position: relative; }
.score-ring::after { content: ""; position: absolute; inset: 13px; background: white; border-radius: 50%; }
.score-ring strong { position: relative; z-index: 1; font: 600 46px "Inter Tight"; }
.score-ring strong small { font-size: 16px; color: #64748b; }
.audit-list { display: grid; gap: 18px; }
.audit-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.audit-card-top { padding: 24px 26px; display: grid; grid-template-columns: 1fr 60px; align-items: center; border-bottom: 1px solid var(--line); }
.audit-card-top h3 { font-size: 21px; }
.audit-score { font-family: "Inter Tight"; font-size: 26px; text-align: right; color: var(--blue); }
.audit-card-body { display: grid; grid-template-columns: repeat(3,1fr); }
.audit-detail { padding: 24px 26px; border-right: 1px solid var(--line); }
.audit-detail:last-child { border-right: 0; }
.audit-detail b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.audit-detail p { font-size: 13px; margin: 0; line-height: 1.55; }

.issue-layout { display: grid; grid-template-columns: 280px 1fr; gap: 64px; }
.issue-index { position: sticky; top: 120px; height: fit-content; }
.issue-index p { font-size: 14px; }
.issue-count { font: 600 62px "Inter Tight"; letter-spacing: -.05em; }
.issues { border-top: 1px solid var(--line); }
.issue { border-bottom: 1px solid var(--line); }
.issue-toggle { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 42px 1fr 32px; align-items: center; text-align: left; padding: 27px 0; cursor: pointer; color: var(--navy); }
.issue-no { color: #94a3b8; font-size: 12px; }
.issue-toggle h3 { font-size: 25px; }
.plus { font-size: 26px; color: var(--blue); transition: transform .25s; }
.issue.open .plus { transform: rotate(45deg); }
.issue-content { display: none; grid-template-columns: repeat(3,1fr); gap: 30px; padding: 0 0 32px 42px; }
.issue.open .issue-content { display: grid; animation: reveal .35s ease; }
.issue-content b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.issue-content p { font-size: 14px; margin: 0; }

.case-list { display: grid; gap: 92px; }
.case { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.case:nth-child(even) .case-visual { order: 2; }
.case-visual { min-height: 450px; background: var(--soft); border: 1px solid var(--line); border-radius: 16px; padding: 34px; display: grid; place-items: center; }
.case-window { width: 100%; height: 330px; background: white; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 16px 35px rgba(15,23,42,.08); padding: 24px; }
.case-window-bar { height: 10px; width: 54px; border-radius: 20px; background: #dbe2eb; margin-bottom: 30px; }
.case-window h3 { max-width: 310px; font-size: 36px; }
.case-window .block { height: 80px; background: #e8eef5; margin-top: 28px; border-radius: 6px; }
.case-type { color: var(--blue); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.case-copy h2 { margin: 14px 0 28px; }
.case-facts { display: grid; gap: 18px; }
.case-fact { display: grid; grid-template-columns: 95px 1fr; border-top: 1px solid var(--line); padding-top: 18px; }
.case-fact b { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.case-fact p { margin: 0; font-size: 14px; }
.result-strip { display: flex; gap: 30px; margin-top: 30px; }
.result-strip strong { display: block; font: 600 30px "Inter Tight"; color: var(--blue); }
.result-strip span { font-size: 11px; color: #64748b; }

.timeline { max-width: 980px; margin: 0 auto; position: relative; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 73px; width: 1px; background: #cbd5e1; }
.timeline-step { display: grid; grid-template-columns: 148px 1fr; padding: 0 0 88px; position: relative; }
.timeline-no { width: 58px; height: 58px; margin-left: 44px; border: 1px solid #cbd5e1; background: white; border-radius: 50%; display: grid; place-items: center; font: 600 16px "Inter Tight"; position: relative; z-index: 2; }
.timeline-content { display: grid; grid-template-columns: 1fr .8fr; gap: 50px; border-bottom: 1px solid var(--line); padding-bottom: 70px; }
.timeline-content h2 { font-size: 46px; margin-bottom: 18px; }
.timeline-output { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.timeline-output b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.timeline-output span { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.timeline-output span:last-child { border: 0; }

.solutions { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.solution { border: 1px solid var(--line); border-radius: 16px; padding: 34px; display: flex; flex-direction: column; min-height: 470px; }
.solution.featured { border-color: var(--navy); box-shadow: inset 0 4px 0 var(--blue); }
.solution-no { color: #94a3b8; font-size: 12px; }
.solution h2 { margin: 38px 0 18px; }
.solution-who { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 18px; }
.solution-who b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.outcomes { list-style: none; padding: 0; margin: 22px 0 34px; }
.outcomes li { padding: 10px 0 10px 23px; position: relative; color: #475569; font-size: 14px; }
.outcomes li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.solution .button { margin-top: auto; }

.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: start; }
.contact-points { margin-top: 46px; border-top: 1px solid var(--line); }
.contact-point { padding: 20px 0; border-bottom: 1px solid var(--line); display: flex; gap: 15px; font-size: 14px; }
.contact-point span { color: var(--green); }
.contact-form { border: 1px solid var(--line); border-radius: 16px; padding: 36px; }
.contact-form .field label { display: block; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: 12px; margin: 18px 0 0; }
.form-success { display: none; border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534; padding: 14px; border-radius: 8px; margin-top: 18px; font-size: 14px; }
.form-success.visible { display: block; }

.site-footer { border-top: 1px solid var(--line); padding: 50px 0 36px; }
.footer-main { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; padding-bottom: 42px; }
.footer-brand img { width: 126px; }
.footer-brand p { max-width: 320px; font-size: 14px; }
.footer-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.footer-group b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.footer-group a { display: block; color: #64748b; font-size: 13px; padding: 6px 0; }
.footer-group a:hover { color: var(--blue); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; color: #94a3b8; font-size: 12px; }

.question-hero { min-height: calc(100vh - var(--header)); background: var(--navy); }
.question-photo { min-height: calc(100vh - var(--header)); position: relative; display: flex; align-items: stretch; overflow: hidden; }
.question-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.question-overlay { position: absolute; inset: 0; background: rgba(7,13,27,.28); }
.question-overlay::after { content: ""; position: absolute; inset: 0 38% 0 0; background: rgba(7,13,27,.7); }
.question-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr .72fr; align-items: center; gap: 64px; padding-block: 76px; }
.question-copy { color: white; max-width: 760px; }
.question-copy .eyebrow { color: #93c5fd; }
.question-copy h1 { font-size: clamp(54px,6vw,88px); }
.question-copy h2 { font-size: clamp(28px,3vw,44px); color: #dbeafe; margin-top: 24px; max-width: 720px; }
.question-copy > p:last-child { color: #cbd5e1; max-width: 620px; font-size: 17px; margin-top: 30px; }
.performance-overlay { align-self: end; justify-self: end; width: min(390px,100%); background: rgba(15,23,42,.92); border: 1px solid rgba(226,232,240,.22); padding: 12px 24px; border-radius: 12px; backdrop-filter: blur(8px); }
.performance-overlay div { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(226,232,240,.15); }
.performance-overlay div:last-child { border: 0; }
.performance-overlay span { color: #94a3b8; font-size: 12px; }
.performance-overlay strong { font: 600 26px "Inter Tight"; color: white; }
.performance-overlay .lost strong { color: #fca5a5; }

.reality-section { background: white; }
.reality-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 86px; align-items: center; }
.reality-copy { max-width: 520px; }
.warning-signs { margin-top: 34px; border-top: 1px solid var(--line); }
.warning-signs span { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--navy); font: 500 18px "Inter Tight"; }
.recognition-section { padding: 112px 0; border-block: 1px solid var(--line); }
.recognition-list { border-top: 1px solid #cbd5e1; }
.recognition-list > div { min-height: 104px; display: grid; grid-template-columns: 60px 1fr 54px; align-items: center; border-bottom: 1px solid #cbd5e1; transition: padding .25s ease, background .25s ease; }
.recognition-list > div:hover { padding-inline: 18px; background: white; }
.recognition-list span { color: var(--blue); font-size: 11px; }
.recognition-list strong { font: 500 clamp(22px,2.2vw,32px) "Inter Tight"; letter-spacing: -.025em; }
.recognition-list i { font-style: normal; color: var(--blue); justify-self: end; }
.recognition-list i .arrow { font-size: 24px; }

.friction-section { padding: 112px 0 0; background: white; }
.friction-heading { margin-bottom: 64px; }
.friction-stage { --progress: 0; min-height: 230vh; position: relative; }
.friction-intro { position: absolute; left: 0; top: 0; width: 260px; border-top: 1px solid var(--line); padding-top: 18px; }
.friction-intro span { display: block; color: var(--blue); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.friction-intro strong { display: block; font: 600 28px "Inter Tight"; margin: 12px 0; }
.friction-intro small { color: #64748b; }
.friction-scene { position: sticky; top: calc(var(--header) + 24px); height: calc(100vh - var(--header) - 48px); min-height: 620px; background: var(--navy); border-radius: 18px; overflow: hidden; perspective: 1200px; }
.friction-scene::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px); background-size: 42px 42px; }
.friction-axis { position: absolute; left: 28px; right: 28px; top: 24px; display: flex; justify-content: space-between; color: #64748b; font-size: 9px; letter-spacing: .12em; }
.friction-deck { position: absolute; left: 50%; top: 48%; width: min(710px,70%); height: 470px; transform: translate(-50%,-50%) rotateX(54deg) rotateZ(-8deg); transform-style: preserve-3d; }
.friction-layer { --step: calc(var(--i) * 72px); position: absolute; left: calc(var(--i) * 4%); right: calc(var(--i) * 4%); top: calc(var(--i) * 48px); height: 132px; background: rgba(22,32,51,.98); border: 1px solid #34435d; border-radius: 12px; padding: 20px 24px; color: white; display: grid; grid-template-columns: 1fr auto; gap: 13px 20px; transform: translateZ(calc((5 - var(--i)) * 34px)) translateY(calc((1 - var(--progress)) * var(--step))); opacity: calc(.32 + (var(--progress) * .68)); transition: border-color .35s ease, background .35s ease; box-shadow: 0 18px 35px rgba(0,0,0,.22); }
.friction-layer.active { border-color: #3b82f6; background: #142441; }
.friction-layer > div:first-child span { display: block; color: #60a5fa; font-size: 9px; }
.friction-layer > div:first-child b { font: 600 18px "Inter Tight"; }
.friction-layer > strong { font: 600 32px "Inter Tight"; }
.friction-layer > small { color: #94a3b8; text-align: right; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.friction-meter { grid-column: 1/-1; height: 5px; background: #2b374b; border-radius: 10px; overflow: hidden; }
.friction-meter i { display: block; height: 100%; width: calc(var(--retained) * 1%); background: var(--blue); border-radius: inherit; transition: width 1s ease; }
.friction-layer:last-child .friction-meter i { background: var(--green); }
.friction-loss { position: absolute; right: 36px; bottom: 30px; text-align: right; color: white; }
.friction-loss span { display: block; color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.friction-loss strong { font: 600 44px "Inter Tight"; color: #fca5a5; }

.viewer-note { position: absolute; z-index: 7; padding: 8px 11px; border-radius: 6px; background: #ecfdf5; color: #15803d; border: 1px solid #bbf7d0; font-size: 10px; font-weight: 700; pointer-events: none; box-shadow: 0 7px 18px rgba(15,23,42,.09); opacity: calc(.25 + (var(--position,52%) / 100)); }
.note-message { right: 27%; top: 25%; }.note-proof { right: 12%; top: 53%; }.note-action { right: 34%; bottom: 14%; }
.comparison-3d .site-mock { transform: perspective(1600px) rotateX(1.5deg); }
.method-preview-track { display: grid; grid-template-columns: repeat(6,1fr); border-block: 1px solid var(--line); }
.method-preview-track > div { min-height: 150px; padding: 26px 18px; border-right: 1px solid var(--line); position: relative; }
.method-preview-track > div:last-child { border: 0; }
.method-preview-track span { color: var(--blue); font-size: 10px; }
.method-preview-track strong { display: block; margin-top: 45px; font: 600 20px "Inter Tight"; }
.method-preview-track i { position: absolute; right: -5px; top: 50%; width: 9px; height: 9px; border-top: 1px solid var(--blue); border-right: 1px solid var(--blue); transform: rotate(45deg); z-index: 2; }
.method-preview-track > div:last-child i { display: none; }
.cta-panel p { color: #cbd5e1; margin: 14px 0 0; max-width: 650px; }

.issue-search { max-width: 900px; margin-left: auto; margin-bottom: 54px; }
.issue-search label { display: block; color: var(--blue); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; margin-bottom: 10px; }
.issue-search > div { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid #94a3b8; }
.issue-search input { border: 0; background: transparent; outline: 0; padding: 14px 0; font: 500 25px "Inter Tight"; color: var(--navy); }
.issue-search input::placeholder { color: #94a3b8; }
.issue-search span { color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.issue[hidden] { display: none; }

.scan-visual { perspective: 1000px; }
.scan-site { transform: rotateX(4deg) rotateY(-5deg); transform-origin: center; box-shadow: 16px 18px 30px rgba(15,23,42,.12); }
.timeline-step { opacity: .48; transition: opacity .5s ease, transform .5s ease; }
.timeline-step.active { opacity: 1; }
.timeline-step.active .timeline-no { background: var(--blue); border-color: var(--blue); color: white; box-shadow: 0 0 0 10px rgba(37,99,235,.08); }

.impact-hero { min-height: calc(100vh - var(--header)); display: flex; align-items: center; padding: 72px 0; background: white; }
.impact-hero-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 72px; align-items: center; }
.impact-copy h1 { font-size: clamp(56px,5.8vw,84px); }
.impact-copy .lead { margin-top: 28px; max-width: 600px; }
.impact-question { margin-top: 34px; padding: 18px 0; border-block: 1px solid var(--line); font: 600 20px "Inter Tight"; color: var(--blue); }
.performance-board { min-height: 570px; background: var(--navy); color: white; border-radius: 18px; padding: 26px; position: relative; perspective: 1200px; box-shadow: 0 25px 55px rgba(15,23,42,.14); overflow: hidden; }
.performance-board::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.055) 1px,transparent 1px); background-size: 42px 42px; }
.board-header { position: relative; z-index: 2; display: flex; justify-content: space-between; color: #94a3b8; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; padding-bottom: 20px; border-bottom: 1px solid #293449; }
.board-header b { color: white; }
.board-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-top: 22px; transform-style: preserve-3d; }
.board-metric { min-height: 188px; border: 1px solid #34435a; background: #141f33; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; position: relative; transform: translateZ(0); transition: transform .4s ease,border-color .4s ease; overflow: hidden; }
.board-metric:hover { transform: translateY(-5px) translateZ(22px); border-color: #3b82f6; }
.board-metric span { color: #94a3b8; font-size: 11px; }
.board-metric strong { font: 600 clamp(36px,4vw,54px) "Inter Tight"; letter-spacing: -.05em; margin-top: 20px; }
.board-metric small { color: #94a3b8; font-size: 10px; margin-top: auto; }
.board-metric i { position: absolute; left: 22px; right: 22px; bottom: 48px; height: 3px; background: #2d394e; }
.board-metric i::after { content: ""; display: block; height: 100%; width: 72%; background: var(--blue); }
.metric-enquiries i::after { width: 23%; }.metric-customers i::after { width: 11%; background: #60a5fa; }
.metric-revenue { background: white; color: var(--navy); transform: translateZ(32px); border-color: white; }
.metric-revenue span,.metric-revenue small { color: #64748b; }.metric-revenue strong { color: var(--blue); font-size: clamp(32px,3.4vw,47px); }.metric-revenue i::after { width: 86%; background: var(--green); }
.board-insight { position: relative; z-index: 2; margin-top: 20px; padding: 16px 18px; display: flex; justify-content: space-between; gap: 20px; align-items: center; background: #19263b; border-radius: 8px; }
.board-insight span { color: #60a5fa; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.board-insight strong { font-size: 12px; }

.revenue-section { padding: 112px 0 0; }
.revenue-journey { --journey: 0; min-height: 230vh; position: relative; }
.revenue-scene { position: sticky; top: calc(var(--header) + 18px); height: calc(100vh - var(--header) - 36px); min-height: 630px; background: var(--navy); border-radius: 18px; overflow: hidden; perspective: 1300px; color: white; }
.revenue-scene::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.055) 1px,transparent 1px); background-size: 44px 44px; }
.revenue-context { position: absolute; left: 34px; top: 30px; z-index: 4; }
.revenue-context span { display: block; color: #60a5fa; font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }
.revenue-context strong { display: block; font: 600 20px "Inter Tight"; margin-top: 8px; }
.revenue-stack { position: absolute; left: 50%; top: 49%; width: min(760px,72%); height: 500px; transform: translate(-50%,-50%); transform-style: preserve-3d; }
.revenue-card { position: absolute; inset: 0; height: 128px; padding: 20px 26px; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 18px; border: 1px solid #34435a; border-radius: 12px; background: #152138; transform: translateY(calc(var(--i) * 50px + (1 - var(--journey)) * var(--i) * 36px)) translateZ(calc((4 - var(--i)) * 35px)) rotateX(3deg); opacity: calc(.28 + var(--journey) * .72); box-shadow: 0 20px 36px rgba(0,0,0,.24); transition: background .35s ease,border-color .35s ease; }
.revenue-card.active { background: #182c4d; border-color: #3b82f6; }
.revenue-card > span { color: #60a5fa; font-size: 10px; }
.revenue-card small { display: block; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; }
.revenue-card strong { display: block; font: 600 34px "Inter Tight"; letter-spacing: -.04em; margin: 3px 0; }
.revenue-card p { position: absolute; right: 26px; top: 42px; color: #94a3b8; font-size: 10px; margin: 0; }
.revenue-card-4 strong { color: #fca5a5; }.revenue-card-5 { background: white; color: var(--navy); }.revenue-card-5 strong { color: var(--blue); }.revenue-card-5 small,.revenue-card-5 p { color: #64748b; }
.revenue-summary { position: absolute; right: 34px; bottom: 28px; z-index: 5; text-align: right; opacity: calc(var(--journey) * 1); }
.revenue-summary span { display: block; color: #94a3b8; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.revenue-summary strong { font: 600 43px "Inter Tight"; color: #4ade80; }.revenue-summary small { color: #94a3b8; }

.health-section { background: white; }
.health-section-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: center; }
.health-copy .button { margin-top: 24px; }
.health-scan-business { min-height: 510px; background: var(--soft); border: 1px solid #cbd5e1; border-radius: 16px; padding: 24px; position: relative; perspective: 1000px; box-shadow: 0 18px 42px rgba(15,23,42,.07); overflow: hidden; }
.health-scan-head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding-bottom: 19px; border-bottom: 1px solid #cbd5e1; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #64748b; }
.health-scan-head strong { color: var(--navy); }.health-scan-head em { font: 600 24px "Inter Tight"; color: var(--blue); font-style: normal; letter-spacing: -.04em; }
.health-layers { position: relative; height: 345px; margin-top: 18px; transform-style: preserve-3d; }
.health-layers article { position: absolute; left: calc(var(--i) * 3%); right: calc(var(--i) * 3%); top: calc(var(--i) * 53px); height: 94px; background: white; border: 1px solid #cbd5e1; border-radius: 9px; padding: 14px 18px; display: grid; grid-template-columns: 1fr 52px 150px; align-items: center; gap: 15px; transform: translateZ(calc((4 - var(--i)) * 23px)); box-shadow: 0 10px 22px rgba(15,23,42,.08); }
.health-layers article > div span { display: block; color: var(--blue); font-size: 8px; }.health-layers article b { font: 600 14px "Inter Tight"; }
.health-layers article > strong { font: 600 22px "Inter Tight"; color: var(--blue); }
.health-layers article small { color: #b91c1c; font-size: 9px; text-align: right; }
.health-layers article i { position: absolute; left: 18px; right: 18px; bottom: 10px; height: 3px; background: #e2e8f0; border-radius: 10px; }
.health-layers article i::after { content: ""; display: block; height: 100%; width: var(--score); background: var(--blue); border-radius: inherit; }
.health-scan-foot { display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center; border-top: 1px solid #cbd5e1; padding-top: 17px; }
.health-scan-foot span { font-size: 8px; text-transform: uppercase; letter-spacing: .09em; color: #64748b; }.health-scan-foot strong { color: #b7791f; font-size: 11px; }.health-scan-foot small { text-align: right; color: #64748b; font-size: 9px; }
.transformation-action { justify-content: center; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes reveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1080px) {
  .header-inner { grid-template-columns: 150px 1fr 168px; gap: 18px; }
  .main-nav { gap: 18px; }
  .nav-link { font-size: 13px; }
  .assessment-grid { gap: 42px; }
  .metric-row { grid-template-columns: 125px 1fr 42px; }
  .comparison-before .site-mock { width: 920px; }
}

@media (max-width: 860px) {
  :root { --header: 72px; }
  .container, .narrow { width: min(100% - 36px, var(--max)); }
  .header-inner { grid-template-columns: 1fr auto; }
  .header-cta { display: none; }
  .menu-button { display: block; }
  .main-nav {
    position: absolute;
    top: var(--header);
    left: 0;
    right: 0;
    padding: 16px 18px 24px;
    background: white;
    border-bottom: 1px solid var(--line);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .main-nav.open { display: flex; }
  .nav-link { padding: 13px 4px; }
  .nav-link::after { display: none; }
  .section { padding: 80px 0; }
  .impact-hero { min-height: auto; padding: 64px 0 80px; }
  .impact-hero-grid,.health-section-grid { grid-template-columns: 1fr; gap: 46px; }
  .impact-copy { max-width: 720px; }
  .performance-board { min-height: 530px; }
  .revenue-section { padding-top: 80px; }
  .revenue-journey { min-height: 190vh; }
  .revenue-stack { width: 84%; }
  .health-copy { max-width: 650px; }
  .question-content { grid-template-columns: 1fr; align-content: end; padding-block: 62px 38px; }
  .question-photo > img { object-position: 63% center; }
  .question-overlay { background: rgba(7,13,27,.62); }
  .question-overlay::after { inset: 55% 0 0; background: rgba(7,13,27,.32); }
  .question-copy { align-self: end; }
  .question-copy h1 { font-size: clamp(48px,11vw,68px); }
  .performance-overlay { justify-self: stretch; width: 100%; display: grid; grid-template-columns: 1fr 1fr; padding: 8px 18px; }
  .performance-overlay div { display: block; }
  .performance-overlay div:nth-child(odd) { border-right: 1px solid rgba(226,232,240,.15); }
  .performance-overlay strong { display: block; margin-top: 4px; }
  .reality-grid { grid-template-columns: 1fr; gap: 44px; }
  .recognition-section { padding: 80px 0; }
  .friction-section { padding-top: 80px; }
  .friction-stage { min-height: 190vh; }
  .friction-intro { display: none; }
  .friction-scene { min-height: 570px; }
  .friction-deck { width: 84%; }
  .method-preview-track { grid-template-columns: repeat(3,1fr); }
  .method-preview-track > div:nth-child(3) { border-right: 0; }
  .method-preview-track > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .assessment-hero { padding: 54px 0 80px; }
  .assessment-grid, .calculator, .editorial-grid, .audit-overview, .issue-layout, .contact-layout { grid-template-columns: 1fr; }
  .assessment-copy { max-width: 700px; }
  .intro-bottom { grid-template-columns: 1fr; gap: 28px; }
  .section-head { display: block; }
  .section-head p { margin-top: 20px; }
  .diagram, .overall-card, .issue-index { position: static; }
  .comparison { height: 480px; }
  .comparison-before .site-mock { width: 800px; }
  .audit-card-body, .solutions { grid-template-columns: 1fr; }
  .page-hero-visual .page-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .page-hero-visual { padding-top: 58px; }
  .visual-story { min-height: 420px; }
  .audit-detail { border-right: 0; border-bottom: 1px solid var(--line); }
  .audit-detail:last-child { border-bottom: 0; }
  .issue-content { grid-template-columns: 1fr; padding-left: 42px; }
  .case { grid-template-columns: 1fr; gap: 30px; }
  .case:nth-child(even) .case-visual { order: 0; }
  .timeline-content { grid-template-columns: 1fr; gap: 24px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-main { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 600px) {
  h1 { font-size: 46px; }
  .impact-copy h1 { font-size: 48px; }
  .performance-board { min-height: 680px; padding: 18px; }
  .board-grid { grid-template-columns: 1fr; gap: 10px; }
  .board-metric { min-height: 125px; padding: 16px; }
  .board-metric strong { font-size: 35px; margin-top: 8px; }
  .board-metric i { bottom: 39px; left: 16px; right: 16px; }
  .metric-revenue { transform: none; }
  .board-insight { display: block; }
  .board-insight strong { display: block; margin-top: 6px; }
  .revenue-journey { min-height: 170vh; }
  .revenue-scene { min-height: 620px; border-radius: 12px; }
  .revenue-context { left: 18px; top: 18px; }
  .revenue-stack { width: 94%; height: 470px; }
  .revenue-card { height: 105px; padding: 14px; grid-template-columns: 25px 1fr; gap: 8px; transform: translateY(calc(var(--i) * 65px + (1 - var(--journey)) * var(--i) * 20px)) translateZ(calc((4 - var(--i)) * 20px)); }
  .revenue-card strong { font-size: 26px; }
  .revenue-card p { right: 14px; top: 35px; max-width: 115px; text-align: right; font-size: 8px; }
  .revenue-summary { right: 18px; bottom: 16px; }
  .revenue-summary strong { font-size: 33px; }
  .health-scan-business { min-height: 500px; padding: 16px; }
  .health-scan-head { grid-template-columns: 1fr auto; }
  .health-scan-head strong { display: none; }
  .health-layers article { left: calc(var(--i) * 1.5%); right: calc(var(--i) * 1.5%); grid-template-columns: 1fr 44px; height: 88px; padding: 12px; }
  .health-layers article small { position: absolute; right: 12px; bottom: 12px; font-size: 8px; }
  .health-layers article i { right: 145px; left: 12px; bottom: 12px; }
  .health-scan-foot { grid-template-columns: 1fr auto; }
  .health-scan-foot small { grid-column: 1/-1; text-align: left; }
  .question-photo { min-height: 920px; }
  .question-content { padding-top: 310px; }
  .question-copy h2 { font-size: 27px; }
  .question-copy > p:last-child { font-size: 15px; }
  .performance-overlay { grid-template-columns: 1fr 1fr; }
  .performance-overlay div { padding: 12px 8px; }
  .recognition-list > div { grid-template-columns: 34px 1fr 28px; min-height: 92px; }
  .recognition-list strong { font-size: 20px; }
  .friction-stage { min-height: 170vh; }
  .friction-scene { height: calc(100vh - var(--header) - 20px); min-height: 590px; border-radius: 12px; }
  .friction-deck { width: 96%; height: 430px; transform: translate(-50%,-50%) rotateX(58deg) rotateZ(-5deg); }
  .friction-layer { height: 114px; padding: 14px; top: calc(var(--i) * 43px); }
  .friction-layer > div:first-child b { font-size: 14px; }
  .friction-layer > strong { font-size: 24px; }
  .friction-loss { right: 18px; bottom: 18px; }
  .friction-loss strong { font-size: 34px; }
  .viewer-note { font-size: 8px; padding: 6px; }
  .note-message { right: 8%; }.note-proof { right: 5%; }.note-action { right: 16%; }
  .method-preview-track { grid-template-columns: 1fr 1fr; }
  .method-preview-track > div { min-height: 118px; }
  .method-preview-track > div:nth-child(3) { border-right: 1px solid var(--line); }
  .method-preview-track > div:nth-child(even) { border-right: 0; }
  .method-preview-track > div:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
  .method-preview-track strong { margin-top: 28px; font-size: 17px; }
  .issue-search { margin-bottom: 36px; }
  .issue-search input { font-size: 19px; min-width: 0; }
  h2 { font-size: 36px; }
  .site-header .brand img { width: 118px; }
  .assessment-panel, .calculator-form, .calculator-result, .contact-form { padding: 24px; }
  .metric-row { grid-template-columns: 105px 1fr 38px; gap: 10px; }
  .score-summary { padding: 18px; }
  .intro-statement { padding: 70px 0 60px; }
  .cost-row { grid-template-columns: 1fr 32px 1fr; }
  .cost-cause { font-size: 21px; }
  .comparison { height: 430px; }
  .visual-story { min-height: 360px; border-radius: 12px; }
  .scan-canvas { height: 265px; padding: 22px; }
  .scan-site { inset: 24px 38px; }
  .scan-line { left: 38px; right: 38px; }
  .marker-one { left: 12px; }
  .marker-two { right: 12px; }
  @keyframes scan { 0%,100% { top: 30px; opacity: .4; } 50% { top: 238px; opacity: 1; } }
  .anatomy-visual { min-height: 390px; }
  .anatomy-browser { left: 6%; width: 70%; height: 68%; }
  .anatomy-callout { right: 2%; min-width: 128px; padding: 9px; font-size: 9px; }
  .anatomy-callout::before { width: 24px; }
  .anatomy-path { left: 5%; right: 5%; }
  .outcome-dashboard { padding: 18px; }
  .dashboard-main { grid-template-columns: 1fr; gap: 20px; padding: 22px 0; }
  .dashboard-score { border-right: 0; border-bottom: 1px solid #293449; padding: 0 0 18px; }
  .dashboard-score strong { font-size: 44px; }
  .dashboard-score i { margin-top: 14px; }
  .chart-bars { height: 105px; }
  .dashboard-metrics { gap: 8px; }
  .dashboard-metrics strong { font-size: 18px; }
  .blueprint-visual { min-height: 420px; }
  .blueprint-path { inset: 28px 20px 60px; }
  .blueprint-node { min-width: 87px; padding: 9px; }
  .blueprint-node span { font-size: 11px; }
  .node-2 { left: 34%; }.node-3 { left: 22%; }.node-4 { left: 55%; }.node-5 { left: 48%; }
  .blueprint-path svg { display: none; }
  .solution-map { padding: 20px 14px; min-height: 430px; }
  .map-origin, .map-outcome { width: 80%; }
  .map-options { gap: 6px; }
  .map-options > div { padding: 13px 9px; min-height: 140px; }
  .map-options strong { font-size: 16px; }
  .review-journey { min-height: 390px; flex-direction: column; padding: 24px; }
  .review-radar { width: 102px; height: 102px; }
  .review-connector { min-height: 48px; width: 1px; flex: 0 0 48px; }
  .review-connector i { height: 38px; border-top: 0; border-left: 1px dashed #475569; margin: 4px 0; }
  .review-connector i::after { right: -2px; top: 36px; transform: rotate(90deg); }
  .review-connector span { position: absolute; left: 12px; top: 14px; white-space: nowrap; }
  .comparison-view { padding: 48px 18px 18px; }
  .comparison-before .site-mock { width: 680px; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-image { display: none; }
  .mock-copy { padding: 34px 24px; }
  .difference-row div { padding: 22px 18px; font-size: 18px; }
  .cta-panel { padding: 42px 26px; display: block; }
  .cta-panel .button { margin-top: 28px; }
  .audit-card-top { padding: 20px; }
  .audit-detail { padding: 20px; }
  .issue-toggle { grid-template-columns: 32px 1fr 28px; }
  .issue-toggle h3 { font-size: 21px; }
  .issue-content { padding-left: 32px; }
  .case-visual { min-height: 340px; padding: 18px; }
  .case-window { height: 285px; }
  .case-window h3 { font-size: 30px; }
  .result-strip { gap: 18px; }
  .timeline::before { left: 24px; }
  .timeline-step { grid-template-columns: 62px 1fr; padding-bottom: 55px; }
  .timeline-no { margin-left: 0; width: 50px; height: 50px; }
  .timeline-content h2 { font-size: 38px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-bottom { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}