:root {
  color-scheme: light;
  --bg: oklch(0.965 0.012 92);
  --bg-deeper: oklch(0.925 0.018 92);
  --ink: oklch(0.19 0.018 225);
  --ink-soft: oklch(0.35 0.025 225);
  --muted: oklch(0.47 0.026 225);
  --line: oklch(0.84 0.018 92);
  --line-strong: oklch(0.72 0.02 92);
  --panel: oklch(0.985 0.008 92);
  --navy: oklch(0.24 0.025 225);
  --route-blue: oklch(0.57 0.135 235);
  --signal-green: oklch(0.72 0.145 154);
  --warm-signal: oklch(0.79 0.13 76);
  --attention: oklch(0.62 0.16 25);
  --shadow: 0 24px 80px oklch(0.19 0.018 225 / 0.13);
  --radius-small: 6px;
  --site-pad: clamp(1.25rem, 4vw, 4.5rem);
  font-family: "Sora", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(90deg, oklch(0.19 0.018 225 / 0.045) 1px, transparent 1px),
    linear-gradient(180deg, oklch(0.19 0.018 225 / 0.035) 1px, transparent 1px),
    var(--bg);
  background-size: 88px 88px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: geometricPrecision;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 4%, oklch(0.79 0.13 76 / 0.14), transparent 22rem),
    linear-gradient(180deg, oklch(0.985 0.008 92 / 0.78), oklch(0.965 0.012 92 / 0.84));
  z-index: -1;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

svg {
  display: block;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 20;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-small);
  background: var(--navy);
  color: var(--panel);
  transform: translateY(-140%);
  transition: transform 180ms ease-out;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: 76px;
  padding: 0 var(--site-pad);
  border-bottom: 1px solid var(--line);
  background: oklch(0.965 0.012 92 / 0.88);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  width: fit-content;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand-mark {
  width: 34px;
  height: 34px;
  color: var(--ink);
  fill: currentColor;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  color: var(--ink-soft);
  font-size: 0.94rem;
  font-weight: 500;
}

.nav-links a,
.site-footer a {
  transition: color 160ms ease-out;
}

.nav-links a:hover,
.site-footer a:hover {
  color: var(--route-blue);
}

.header-cta,
.primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: fit-content;
  min-height: 46px;
  padding: 0.78rem 1.1rem;
  border: 1px solid oklch(0.19 0.018 225 / 0.12);
  border-radius: var(--radius-small);
  background: var(--navy);
  color: var(--panel);
  box-shadow: 0 18px 36px oklch(0.19 0.018 225 / 0.16);
  font-size: 0.9rem;
  font-weight: 700;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, background 180ms ease-out;
}

.header-cta svg,
.primary-cta svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-cta:hover,
.primary-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 48px oklch(0.19 0.018 225 / 0.2);
  background: oklch(0.28 0.032 225);
}

.hero {
  display: grid;
  grid-template-columns: minmax(35rem, 0.9fr) minmax(32rem, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  min-height: min(720px, calc(100svh - 76px));
  padding: clamp(3.2rem, 6vw, 5.4rem) var(--site-pad) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.hero-copy {
  max-width: 43rem;
}

.hero h1 {
  max-width: 7.2ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(4.1rem, 8vw, 7.25rem);
  line-height: 0.95;
  letter-spacing: 0;
  font-weight: 800;
}

.hero-copy p {
  max-width: 44rem;
  margin: 1.65rem 0 2rem;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.5vw, 1.36rem);
  line-height: 1.7;
}

.route-board {
  position: relative;
  min-height: 32rem;
  padding: clamp(1rem, 2vw, 1.6rem);
}

.route-board::before {
  content: "";
  position: absolute;
  inset: 3.5rem 3rem 3rem 2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  opacity: 0.22;
  transform: rotate(-9deg);
}

.route-legend {
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.7rem);
  top: clamp(0.25rem, 1vw, 0.8rem);
  z-index: 2;
  display: grid;
  gap: 0.62rem;
  min-width: 10.5rem;
  padding: 0.2rem 0 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.route-legend p {
  width: 9rem;
  margin: 0 0 0.1rem;
  padding-bottom: 0.48rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.route-legend span {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: center;
  gap: 0.6rem;
}

.route-legend i {
  display: block;
  height: 4px;
  border-radius: 999px;
}

.legend-strategy {
  background: var(--route-blue);
}

.legend-systems {
  background: var(--signal-green);
}

.legend-operating {
  background: var(--warm-signal);
}

.legend-foundations {
  background: oklch(0.64 0.012 225);
}

.route-map {
  position: relative;
  width: min(100%, 760px);
  min-height: 32rem;
  margin-left: auto;
  overflow: visible;
}

.route-base {
  stroke: oklch(0.63 0.012 225);
  stroke-width: 2;
  opacity: 0.72;
}

.route-dashes {
  stroke: oklch(0.64 0.012 225);
  stroke-width: 2;
  stroke-dasharray: 8 9;
  opacity: 0.58;
}

.route-line {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 180ms ease-out, stroke-width 180ms ease-out;
}

.route-strategy {
  stroke: var(--route-blue);
}

.route-systems {
  stroke: var(--signal-green);
}

.route-operating {
  stroke: var(--warm-signal);
}

.route-map[data-active-route="strategy"] .route-line:not([data-route-line="strategy"]),
.route-map[data-active-route="systems"] .route-line:not([data-route-line="systems"]),
.route-map[data-active-route="operating"] .route-line:not([data-route-line="operating"]) {
  opacity: 0.3;
  stroke-width: 4;
}

.route-nodes circle:nth-child(-n + 4) {
  fill: var(--panel);
  stroke: var(--ink);
  stroke-width: 4;
}

.route-nodes circle:nth-child(n + 5) {
  fill: var(--ink);
}

.route-labels,
.signals {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.route-labels text:nth-child(3n + 2),
.route-labels text:nth-child(3n + 3),
.signals text {
  fill: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
}

.signals circle {
  fill: transparent;
  stroke-width: 3;
}

.signals circle:nth-child(1) {
  stroke: var(--signal-green);
}

.signals circle:nth-child(2) {
  stroke: var(--warm-signal);
}

.signals circle:nth-child(3) {
  stroke: var(--attention);
}

.work,
.method,
.outcomes,
.contact {
  padding: clamp(2.1rem, 5vw, 4.4rem) var(--site-pad);
  border-bottom: 1px solid var(--line);
}

.section-intro {
  display: grid;
  grid-template-columns: minmax(14rem, 0.45fr) 1fr;
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: start;
}

.section-label {
  margin: 0;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

p,
a,
span {
  overflow-wrap: break-word;
}

h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.75rem, 3.6vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.service-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.service-item {
  display: grid;
  gap: 0.7rem;
  min-height: 15rem;
  padding: clamp(1.2rem, 2vw, 1.55rem);
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease-out;
}

.service-item:last-child {
  border-right: 0;
}

.service-item:hover,
.service-item:focus-visible,
.service-item.is-active {
  background: oklch(0.985 0.008 92 / 0.78);
}

.service-item strong {
  color: var(--ink);
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.2;
}

.service-item span:last-child {
  max-width: 20rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.7;
}

.service-line {
  width: 100%;
  max-width: 16rem;
  height: 4px;
  border-radius: 999px;
}

.strategy-line {
  background: var(--route-blue);
}

.systems-line {
  background: var(--signal-green);
}

.operating-line {
  background: var(--warm-signal);
}

.foundations-line {
  background: oklch(0.64 0.012 225);
}

.method {
  display: grid;
  grid-template-columns: minmax(15rem, 0.32fr) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.method-copy p:last-child {
  max-width: 23rem;
  color: var(--ink-soft);
}

.checkpoint-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkpoint-list::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  right: 1rem;
  top: 1.45rem;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--muted) 0 5px, transparent 5px 10px);
}

.checkpoint-list::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1.06rem;
  width: 0.72rem;
  height: 0.72rem;
  border-top: 1px solid var(--muted);
  border-right: 1px solid var(--muted);
  transform: rotate(45deg);
}

.checkpoint-list li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding-top: 0.1rem;
}

.checkpoint-number {
  display: inline-grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 4px solid var(--route-blue);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.route-strategy-ring {
  border-color: var(--route-blue);
}

.route-systems-ring {
  border-color: var(--signal-green);
}

.route-operating-ring {
  border-color: var(--warm-signal);
}

.route-foundations-ring {
  border-color: oklch(0.64 0.012 225);
}

.checkpoint-list h3 {
  margin: 0.9rem 0 0;
  font-size: 1.08rem;
  line-height: 1.2;
}

.checkpoint-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.65;
}

.outcomes {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.outcome-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.outcome-rail p {
  min-height: 8.8rem;
  margin: 0;
  padding: 1.45rem clamp(1rem, 2vw, 1.7rem);
  border-right: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.55;
}

.outcome-rail p:last-child {
  border-right: 0;
}

.contact {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(20rem, 0.55fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  width: 100%;
  background:
    linear-gradient(120deg, oklch(0.24 0.025 225 / 0.98), oklch(0.31 0.035 225 / 0.98)),
    var(--navy);
  color: var(--panel);
}

.contact .section-label,
.contact h2 {
  color: var(--panel);
}

.contact-copy p:not(.section-label) {
  max-width: 44rem;
  color: oklch(0.91 0.012 92);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.contact-email {
  display: inline-flex;
  margin-top: 1.1rem;
  color: oklch(0.82 0.13 76);
  font-weight: 700;
}

.contact-form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid oklch(0.985 0.008 92 / 0.18);
  border-radius: var(--radius-small);
  background: oklch(0.19 0.018 225 / 0.34);
}

.contact-form label {
  display: grid;
  gap: 0.42rem;
}

.contact-form label span {
  color: oklch(0.91 0.012 92);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid oklch(0.985 0.008 92 / 0.28);
  border-radius: var(--radius-small);
  background: oklch(0.985 0.008 92 / 0.08);
  color: var(--panel);
  padding: 0.85rem 0.9rem;
  outline: none;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--warm-signal);
  box-shadow: 0 0 0 3px oklch(0.79 0.13 76 / 0.18);
}

.form-submit {
  margin-top: 0.2rem;
  background: oklch(0.82 0.13 76);
  color: var(--ink);
}

.form-submit:hover {
  background: oklch(0.88 0.11 76);
}

.form-note {
  min-height: 2.6rem;
  margin: 0;
  color: oklch(0.86 0.012 92);
  font-size: 0.8rem;
  line-height: 1.55;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.35rem var(--site-pad);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.86rem;
}

.footer-brand {
  color: var(--ink);
}

.site-footer p {
  margin: 0;
}

.site-footer a:last-child {
  color: var(--ink);
  font-weight: 700;
}

:focus-visible {
  outline: 3px solid oklch(0.79 0.13 76 / 0.85);
  outline-offset: 3px;
}

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav-links {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .route-board {
    min-height: 28rem;
    padding-top: 2.4rem;
  }

  .route-map {
    width: 100%;
  }

  .service-ledger,
  .outcome-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-item:nth-child(2n),
  .outcome-rail p:nth-child(2n) {
    border-right: 0;
  }

  .service-item:nth-child(n + 3),
  .outcome-rail p:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .method {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-header {
    min-height: 68px;
  }

  .brand span {
    font-size: 0.92rem;
  }

  .header-cta {
    min-height: 40px;
    padding: 0.62rem 0.78rem;
    font-size: 0.78rem;
  }

  .hero {
    padding-top: 3.3rem;
  }

  .hero h1 {
    font-size: clamp(2.95rem, 13.5vw, 3.7rem);
  }

  .hero-copy p {
    font-size: 1rem;
  }

  .route-board {
    min-height: 21rem;
    padding: 1rem 0 0;
    overflow: hidden;
  }

  .route-board::before,
  .route-legend {
    display: none;
  }

  .route-map {
    width: 46rem;
    min-height: 22rem;
    transform: translateX(-5.7rem);
  }

  .route-labels,
  .signals {
    display: none;
  }

  .section-intro,
  .contact,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .service-ledger,
  .outcome-rail {
    grid-template-columns: 1fr;
  }

  .service-item,
  .service-item:nth-child(2n),
  .outcome-rail p,
  .outcome-rail p:nth-child(2n) {
    border-right: 0;
  }

  .service-item:nth-child(n + 2),
  .outcome-rail p:nth-child(n + 2) {
    border-top: 1px solid var(--line);
  }

  .checkpoint-list {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .checkpoint-list::before {
    left: 1.42rem;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--muted) 0 5px, transparent 5px 10px);
  }

  .checkpoint-list::after {
    display: none;
  }

  .checkpoint-list li {
    min-height: 8rem;
    padding-left: 4rem;
  }

  .checkpoint-number {
    position: absolute;
    left: 0;
    top: 0;
  }
}

@media (max-width: 470px) {
  .header-cta span {
    display: none;
  }

  .header-cta {
    width: 42px;
    padding: 0;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .hero h1 {
    font-size: clamp(3rem, 19vw, 4.15rem);
  }

  .primary-cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}