:root {
  --sc-canvas: #111418;
  --sc-surface: #191d22;
  --sc-ink: #f7f5f0;
  --sc-ink-soft: #b8bdc6;
  --sc-accent: #315cff;
  --sc-accent-ink: #ffffff;
  --sc-font-display: "Space Grotesk", system-ui, sans-serif;
  --sc-font-text: "Manrope", system-ui, sans-serif;
  --paper: #f7f5f0;
  --ink: #111418;
  --blue: #315cff;
  --line: rgba(17, 20, 24, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sc-font-text); }
a { color: inherit; }
.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; left: 1rem; top: 1rem; z-index: 100; background: var(--blue); color: #fff; padding: .7rem 1rem; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-nav { position: fixed; z-index: 20; top: 1rem; left: 1rem; right: 1rem; display: flex; align-items: center; justify-content: space-between; pointer-events: none; color: #fff; }
.site-nav a { pointer-events: auto; }
.site-nav__mark { display: flex; height: 2.75rem; align-items: center; gap: .7rem; padding: 0 .85rem; text-decoration: none; background: var(--ink); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 6px 18px rgba(17,20,24,.22); }
.site-nav__word { font-family: var(--sc-font-display); font-size: .9rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.site-nav__word i { font-style: normal; color: #7f9bff; }
.site-nav__mark img { width: auto; height: 1.6rem; flex: none; }
.site-nav > div { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.6rem); padding: .25rem .25rem .25rem 1.4rem; background: var(--ink); box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 6px 18px rgba(17,20,24,.22); }
.site-nav > div a { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.site-nav__cta { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.15rem; background: var(--blue); color: #fff; transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out); }
.site-nav__cta:active { transform: translateY(1px); }
.kicker { margin: 0 0 1.15rem; font-size: .72rem; line-height: 1; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

.growth-split { background: var(--ink); }
.split-stage { overflow: hidden; min-height: 100svh; background: var(--ink); }
.close-mark span { color: rgba(255,255,255,.55); }
.split-pane { position: absolute; inset-block: 0; overflow: hidden; transition: none; }
.split-pane--presence { left: 0; width: var(--split, 50%); color: var(--ink); background: var(--paper); }
.split-pane--system { right: 0; width: calc(100% - var(--split, 50%)); color: var(--paper); background: var(--ink); }
.split-pane::after { content: ""; position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, transparent, #000 28%, transparent 88%); }
.hero-copy { position: absolute; z-index: 2; top: 50%; width: min(42vw, 39rem); transform: translateY(-50%); }
.hero-copy--left { left: clamp(1.4rem, 5vw, 5.8rem); }
.hero-copy--right { right: clamp(1.4rem, 5vw, 5.8rem); text-align: right; }
.hero-copy h1, .hero-copy h2 { margin: 0; font-family: var(--sc-font-display); font-size: clamp(3.2rem, 6vw, 6.8rem); line-height: .91; letter-spacing: -.065em; text-wrap: balance; }
.hero-copy h2 { font-size: clamp(2.8rem, 5.2vw, 5.8rem); }
.hero-note { max-width: 27rem; margin: 1.5rem 0 0; color: inherit; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.6; text-wrap: pretty; }
.hero-copy--right .hero-note { margin-left: auto; }
.side-label { position: absolute; z-index: 2; bottom: 2rem; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.split-pane--presence .side-label { left: clamp(1.4rem, 5vw, 5.8rem); }
.split-pane--system .side-label { right: clamp(1.4rem, 5vw, 5.8rem); }
.split-rule { position: absolute; z-index: 6; inset-block: 0; left: var(--split, 50%); width: 1px; background: rgba(49, 92, 255, .5); }
.split-rule span { position: absolute; top: var(--rule-y, 50%); left: 50%; width: 12px; height: 12px; border: 2px solid var(--blue); background: var(--paper); transform: translate(-50%, -50%) rotate(45deg); }
.hero-actions { position: absolute; z-index: 8; left: clamp(1.4rem, 5vw, 5.8rem); bottom: clamp(4.2rem, 9vh, 5.6rem); display: flex; gap: .6rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.5rem; border: 1px solid transparent; font-size: .92rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(36,72,216,.35); }
.btn--ghost { background: var(--ink); color: #fff; border-color: rgba(255,255,255,.3); }

.paths { position: relative; background: var(--paper); color: var(--ink); }
.paths-stage { min-height: 100svh; overflow: hidden; background: var(--paper); color: var(--ink); }

/* The cards are a persistent split, like the hero's, driven by --split
   (0-100, presence's share). At rest it's an even 50/50 choice. Committing
   (click, or scroll past the idle window) animates one side to 100 and the
   other off screen, holds full-bleed, then the video crossfades in on top.
   The second path later slides back in from its own edge the same way. */
.path-choice { position: absolute; inset: 0; z-index: 1; display: flex; }
.path-card { flex: none; width: calc(var(--split, 50) * 1%); display: flex; border: 0; margin: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; overflow: hidden; }
.path-card--dark { width: calc((100 - var(--split, 50)) * 1%); }
.path-card--light { background: var(--paper); color: var(--ink); }
.path-card--dark { background: var(--ink); color: var(--paper); }
.path-card--light .path-card__inner { margin-left: 0; }
.path-card--dark .path-card__inner { margin-right: 0; margin-left: auto; }
.path-index { font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.path-card__inner { display: flex; flex-direction: column; justify-content: center; flex: none; width: min(46rem, 88vw); height: 100%; padding: clamp(2rem, 6vw, 5.8rem); }
.path-card.is-picked { box-shadow: inset 0 0 0 2px var(--blue); }
.path-card h3 { margin: clamp(1.4rem, 3vh, 2.2rem) 0 1rem; font-family: var(--sc-font-display); font-size: clamp(2.4rem, 3.4vw, 4.8rem); line-height: .92; letter-spacing: -.06em; text-wrap: balance; }
.path-card p { max-width: 38ch; margin: 0; color: #4b525c; line-height: 1.6; }
.path-card--dark p { color: #b8bdc6; }
.path-card__tap { display: inline-flex; align-items: center; gap: .5rem; margin-top: clamp(1.6rem, 3vh, 2.4rem); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: opacity 260ms ease; }
.path-card__tap i { font-style: normal; transition: transform 160ms var(--sc-ease-out); }
.path-card:focus-visible { outline: 2px solid var(--blue); outline-offset: -6px; }

.walkthrough { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; pointer-events: none; color: #fff; transition: opacity 700ms var(--sc-ease-out); }
.paths-stage[data-phase="walkthrough"] .walkthrough { opacity: 1; visibility: visible; pointer-events: auto; }

/* walkthrough: one full-screen video per step, scrubbed by scroll, with a
   single large caption crossfading in over it. No persistent list — the
   video and the headline are the whole interface. */
.walkthrough { color: #fff; }
.walk-film { position: absolute; inset: 0; overflow: hidden; background: #0c0e11; }
.walk-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.78) contrast(1.02) brightness(.9); transition: opacity 1100ms ease; }
.walk-clip.is-active { opacity: 1; }
.walk-film__scrim { position: absolute; inset: 0; background:
    radial-gradient(ellipse 60% 54% at 50% 52%, rgba(7,8,10,.22), rgba(7,8,10,.56) 72%),
    linear-gradient(0deg, rgba(7,8,10,.64), rgba(7,8,10,.34) 32%, rgba(7,8,10,.42) 68%, rgba(7,8,10,.66)); }

.walkthrough__head { position: absolute; z-index: 3; top: clamp(4.6rem, 10vh, 6.4rem); left: clamp(1.4rem, 5vw, 5.8rem); right: clamp(1.4rem, 5vw, 5.8rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.walkthrough__label { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.walkthrough__switch { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 1px solid rgba(255,255,255,.5); background: rgba(12,14,17,.4); color: #fff; font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; backdrop-filter: blur(6px); }
.walkthrough__switch[hidden] { display: none; }
.walkthrough__switch i { font-style: normal; }
.walkthrough__switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }


.walk-rail { position: absolute; z-index: 3; top: 50%; left: clamp(1.4rem, 6vw, 8rem); right: clamp(1.4rem, 6vw, 8rem); transform: translateY(-50%); margin: 0; padding: 0; list-style: none; text-align: center; }
.walk-step { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.walk-step__head { display: flex; align-items: baseline; justify-content: center; gap: .9rem; width: 100%; padding: 0; margin: 0 0 1.1rem; border: 0; background: transparent; color: inherit; font: inherit; text-align: center; cursor: pointer; opacity: 0; transform: translateY(18px) scale(.98); pointer-events: none; transition: opacity 650ms var(--sc-ease-out), transform 750ms var(--sc-ease-out); }
.walk-step.is-current .walk-step__head { opacity: 1; transform: none; pointer-events: auto; }
.walk-step__title { font-family: var(--sc-font-display); font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 600; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 2px 28px rgba(0,0,0,.5); }
.walk-step__head:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.walk-step__detail { max-width: 40ch; margin: 0 auto; color: rgba(255,255,255,.84); font-size: 1.05rem; line-height: 1.55; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 650ms var(--sc-ease-out) 140ms, transform 750ms var(--sc-ease-out) 140ms; }
.walk-step.is-current .walk-step__detail { opacity: 1; transform: none; }

.walkthrough__cta { position: absolute; z-index: 3; right: clamp(1.4rem, 5vw, 5.8rem); bottom: clamp(2rem, 6vh, 3.6rem); display: inline-flex; align-items: center; justify-content: center; min-height: 3.35rem; padding: 0 1.45rem; background: var(--blue); color: #fff; text-decoration: none; font-size: .82rem; font-weight: 700; letter-spacing: .03em; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out), background-color 140ms ease; }
.walkthrough__cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.pressure { padding: 15vh 5vw 18vh; background: var(--paper); color: var(--ink); }
.pressure-line { max-width: 90rem; margin: auto; }
.pressure p { margin: 0; font-family: var(--sc-font-display); font-size: clamp(2.1rem, 5vw, 6rem); line-height: 1.02; letter-spacing: -.055em; }
.pressure p + p { margin-left: 15vw; color: var(--blue); }

.architecture-stage { overflow: hidden; min-height: 100svh; background: var(--ink); }
.architecture-copy { position: absolute; z-index: 3; top: 8vh; left: 5vw; max-width: 48rem; }
.architecture-copy h2 { margin: 0; font-family: var(--sc-font-display); font-size: clamp(2.8rem, 5.4vw, 6.4rem); line-height: .95; letter-spacing: -.06em; }
.architecture-copy > p:last-child { color: var(--sc-ink-soft); font-size: 1.05rem; }
.blueprint--v { display: none; }
.blueprint { position: absolute; inset: 22% 2% 5%; width: 96%; height: 73%; overflow: visible; }
.grid-lines { fill: none; stroke: rgba(247,245,240,.08); stroke-width: 1; }
.system-line { fill: none; stroke: var(--blue); stroke-width: 4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--arch-p, 0)); }
.system-line--branch { stroke-width: 2; stroke-dashoffset: calc(1 - max(0, calc((var(--arch-p, 0) - .38) * 1.62))); }
.nodes { color: var(--paper); opacity: clamp(0, calc((var(--arch-p, 0) - .22) * 2.3), 1); }
.nodes circle { fill: var(--ink); stroke: var(--blue); stroke-width: 3; vector-effect: non-scaling-stroke; }
.nodes text { fill: currentColor; font-family: var(--sc-font-text); font-size: 17px; font-weight: 600; text-anchor: middle; letter-spacing: .04em; }
.nodes--side text { text-anchor: start; font-size: 22px; }
.nodes--side text.up { text-anchor: middle; }
.architecture-outcome { position: absolute; z-index: 3; left: 5vw; right: 5vw; bottom: 3rem; display: flex; align-items: center; gap: 1rem; color: var(--sc-ink-soft); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: clamp(0, calc((var(--arch-p, 0) - .65) * 3), 1); }
.architecture-outcome i { height: 1px; flex: 1; background: var(--blue); }

.method { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10vw; padding: clamp(6rem, 12vw, 11rem) 5vw; background: var(--paper); color: var(--ink); }
.method-heading { position: sticky; top: 16vh; align-self: start; }
.method-heading h2 { max-width: 9ch; margin: 0; font-family: var(--sc-font-display); font-size: clamp(2.8rem, 5vw, 6rem); line-height: .95; letter-spacing: -.06em; }
.method-list { margin: 0; padding: 0; list-style: none; }
.method-list li { display: grid; grid-template-columns: 9rem 1fr; gap: 2rem; padding: 2.2rem 0; border-top: 1px solid var(--line); }
.method-list span { font-weight: 700; }
.method-list p { max-width: 36ch; margin: 0; color: #4b525c; font-size: 1.05rem; line-height: 1.65; }

.work { padding: clamp(6rem, 12vw, 11rem) 5vw clamp(8rem, 15vw, 14rem); background: var(--ink); color: var(--paper); }
.work-heading { display: grid; grid-template-columns: .8fr 1.4fr .8fr; gap: 5vw; align-items: end; max-width: 100rem; margin: 0 auto clamp(5rem, 9vw, 9rem); }
.work-heading .kicker { align-self: start; }
.work-heading h2 { max-width: 11ch; margin: 0; font-family: var(--sc-font-display); font-size: clamp(3rem, 5.7vw, 6.8rem); line-height: .93; letter-spacing: -.06em; }
.work-heading > p:last-child { max-width: 33ch; margin: 0; color: var(--sc-ink-soft); line-height: 1.65; }
.work-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem, 9vw, 9rem) clamp(1.2rem, 3vw, 3rem); max-width: 100rem; margin: auto; }
.project--wide { grid-column: 1 / -1; }
.project-visual { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #20252c; cursor: default; }
.project-visual::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
.project-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(.78) contrast(1.03); }
.project-meta { display: grid; grid-template-columns: 1fr 1.35fr; gap: 2rem; align-items: start; padding-top: 1.4rem; border-top: 1px solid rgba(247,245,240,.16); }
.project-meta span { font-family: var(--sc-font-display); font-size: 1.15rem; font-weight: 600; }
.project-meta p { margin: .35rem 0 0; color: var(--sc-ink-soft); font-size: .92rem; line-height: 1.6; }
.project-meta > p { margin: 0; }
.site-footer { position: absolute; z-index: 3; left: 5vw; right: 5vw; bottom: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

@media (hover: hover) and (pointer: fine) {
  .path-card:hover .path-card__tap i { transform: translateX(4px); }
  .walk-step__head:hover { opacity: 1; }
  .walkthrough__switch:hover { background: rgba(128,128,128,.14); }
  .btn--primary:hover { background: #4a6dff; }
  .btn--ghost:hover { background: #20252c; }
  .site-nav__cta:hover { background: #4a6dff; }
  .site-nav__link:hover { opacity: .68; }
}

.close-stage { min-height: 100svh; overflow: hidden; background: #2448d8; color: #fff; }
.close-plan { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px); background-size: 72px 72px; transform: scale(calc(.95 + var(--close-p, 0) * .05)); }
.close-content { position: relative; z-index: 2; display: flex; min-height: 100svh; max-height: 100svh; overflow-y: auto; scroll-padding-top: 5.5rem; flex-direction: column; align-items: center; text-align: center; padding: clamp(4.5rem, 9vh, 6rem) 5vw clamp(3rem, 6vh, 4rem); }
.close-inner { display: flex; flex-direction: column; align-items: center; width: 100%; margin: auto 0; }
.contact-form input, .contact-form select, .contact-form textarea, .contact-form button { scroll-margin-top: 5.5rem; }
.close-mark { display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); border: 1px solid rgba(255,255,255,.7); font-family: var(--sc-font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.08em; flex: none; }
.close-content h2 { max-width: 13ch; margin: 0; font-family: var(--sc-font-display); font-size: clamp(2.3rem, 5vw, 5.2rem); line-height: .96; letter-spacing: -.055em; }
.close-content > p:not(.kicker) { max-width: 34rem; font-size: 1rem; text-wrap: pretty; margin: 1.1rem auto 1.8rem; line-height: 1.55; }
.cta { display: inline-flex; align-items: center; min-height: 3.5rem; padding: 0 2rem; background: #fff; color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 700; border: 0; cursor: pointer; transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out); }
.cta:hover { transform: translateY(-2px); background: var(--paper); }
.cta:active { transform: translateY(1px); }
.booking-cta { gap: .75rem; margin-bottom: 1.35rem; }
.booking-cta span { font-size: 1.15em; transition: transform 140ms var(--sc-ease-out); }
.booking-cta:hover span { transform: translate(.15rem, -.15rem); }
.contact-divider { display: flex; align-items: center; gap: 1rem; width: min(100%, 30rem); margin: 0 0 1.35rem; color: rgba(255,255,255,.7); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contact-divider::before, .contact-divider::after { content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.25); }
.contact-divider span { white-space: nowrap; }

.contact-form { width: min(100%, 30rem); display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form label { display: flex; flex-direction: column; gap: .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.form-label { display: inline-flex; align-items: baseline; gap: .2rem; }
.form-label i { font-style: normal; color: #9fb3ff; }
.contact-form input, .contact-form select, .contact-form textarea { font-family: var(--sc-font-text); font-size: .95rem; font-weight: 500; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); padding: .75rem .9rem; min-height: 2.9rem; text-transform: none; letter-spacing: normal; }
.contact-form textarea { min-height: 5.5rem; resize: vertical; font-weight: 400; line-height: 1.5; }
.contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 1.2rem) center, calc(100% - .9rem) center; background-size: .35rem .35rem; background-repeat: no-repeat; }
.contact-form select option { color: var(--ink); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.5); }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid #fff; outline-offset: 2px; background: rgba(255,255,255,.14); }
.contact-form .cta { align-self: flex-start; margin-top: .3rem; }
.form-note { margin: 0; font-size: .72rem; color: rgba(255,255,255,.6); }
:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

@media (max-width: 900px), (hover: none) {
  .walk-step__detail { font-size: 1rem; }
}

@media (max-width: 900px) {
  .site-nav { top: .65rem; left: .65rem; right: .65rem; }
  .site-nav > div a:not(.site-nav__cta) { display: none; }
  .site-nav > div { padding: .25rem; }
  .site-nav__word { display: none; }
  .site-nav__mark { padding: 0; width: 2.75rem; justify-content: center; }
  .hero-copy--right .hero-note { margin-left: 0; }
  .split-pane { left: 0 !important; width: 100% !important; height: 50%; }
  .split-pane--presence { top: 0; bottom: auto; }
  .split-pane--system { top: 50%; bottom: auto; }
  .split-rule { inset: 50% 0 auto; width: 100%; height: 1px; }
  .split-rule span { top: 50%; left: var(--rule-y, 50%); }
  .hero-copy { top: 56%; width: calc(100vw - 2.8rem); }
  .hero-copy--left, .hero-copy--right { left: clamp(1.4rem, 6vw, 3rem); right: auto; text-align: left; }
  .hero-copy h1, .hero-copy h2 { max-width: 14ch; font-size: clamp(2.3rem, 8.6vw, 4.4rem); }
  .hero-note { max-width: 26rem; margin-top: .8rem; font-size: clamp(.95rem, 2.4vw, 1.15rem); line-height: 1.5; }
  .hero-copy .kicker { margin-bottom: .7rem; }
  .side-label { display: none; }
  .hero-actions { left: 1.4rem; right: 1.4rem; bottom: max(1.1rem, env(safe-area-inset-bottom)); transform: none; }
  .hero-actions .btn { flex: 1; padding: 0 1rem; }
  /* Same push-and-hold choreography, vertical instead of horizontal: the
     top (customer-facing) card grows down, the bottom (inside the business)
     card grows up — mirrors how the hero split already flips on mobile. */
  .path-choice { flex-direction: column; }
  .path-card, .path-card--dark { width: 100%; height: calc(var(--split, 50) * 1%); }
  .path-card--dark { height: calc((100 - var(--split, 50)) * 1%); }
  .path-card__inner { width: 100%; padding: clamp(1.6rem, 7vw, 2.6rem); }
  .path-card--light .path-card__inner { margin-top: 0; }
  .path-card--dark .path-card__inner { margin-top: auto; margin-bottom: 0; }
  .path-card h3 { margin-top: 1rem; font-size: clamp(1.9rem, 8.6vw, 2.7rem); }
  .path-card p { font-size: .92rem; }
  .path-card__tap { margin-top: 1.2rem; }
  .walkthrough__head { left: 1.4rem; right: 1.4rem; top: 4.6rem; flex-direction: column; align-items: flex-start; gap: .6rem; }
  .walkthrough__switch { padding: .5rem .8rem; font-size: .7rem; }
  .walk-rail { left: 1.4rem; right: 1.4rem; }
  .walk-step__title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .walk-step__detail { font-size: .92rem; max-width: 30ch; }
  .walkthrough__cta { left: 1.4rem; right: 1.4rem; bottom: 1.4rem; }
  .pressure { padding: 12vh 1.4rem 14vh; }
  .pressure p { font-size: clamp(2rem, 7.4vw, 4rem); }
  .pressure p + p { margin: 1.5rem 0 0; }
  .architecture-copy { top: 10vh; left: clamp(1.4rem, 6vw, 3rem); right: 1.4rem; }
  .architecture-copy h2 { font-size: clamp(2.4rem, 8vw, 4.4rem); }
  .blueprint { inset: 30% 2% 12%; width: 96%; height: 58%; }
  .nodes text { font-size: 24px; }
  .architecture-outcome { left: 1.4rem; right: 1.4rem; bottom: max(1.6rem, env(safe-area-inset-bottom)); gap: .5rem; font-size: .68rem; letter-spacing: .08em; }
  .method { grid-template-columns: 1fr; gap: 3rem; padding: 5rem clamp(1.4rem, 6vw, 3rem); }
  .method-heading { position: static; }
  .method-heading h2 { max-width: 12ch; font-size: clamp(2.5rem, 8.4vw, 4.4rem); }
  .method-list li { grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1.6rem 0; }
  .work { padding: 5rem clamp(1.4rem, 6vw, 3rem) 6rem; }
  .work-heading { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 3rem; }
  .work-heading h2 { max-width: 12ch; font-size: clamp(2.5rem, 8.4vw, 4.4rem); }
  .work-heading > p:last-child { font-size: 1.05rem; }
  .work-list { grid-template-columns: 1fr; gap: 3.5rem; }
  .project--wide { grid-column: auto; }
  .project-meta { grid-template-columns: 1fr; gap: .6rem; }
  .close-content { padding: clamp(3.5rem, 9vh, 5rem) clamp(1.4rem, 6vw, 3rem) 3rem; }
  .close-content h2 { font-size: clamp(2.4rem, 9vw, 4.2rem); }
  .contact-form { width: 100%; }
  .booking-cta { width: 100%; justify-content: center; }
  .contact-divider { width: 100%; }
  .form-row { grid-template-columns: 1fr; gap: .85rem; }
  .contact-form .cta { align-self: stretch; justify-content: center; }
  .site-footer { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .blueprint--h { display: none; }
  .blueprint--v { display: block; inset: 31% 6% 14%; width: 88%; height: 55%; }
  .architecture-outcome i { min-width: .6rem; }
  .btn { font-size: .88rem; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .hero-actions { left: clamp(1.4rem, 6vw, 3rem); right: auto; }
  .hero-actions .btn { flex: none; min-width: 12rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .system-line { stroke-dashoffset: 0; }
  .nodes, .architecture-outcome { opacity: 1; }
  .close-plan { transform: none; }
  .walkthrough { transition-duration: 1ms; }
  .walk-step__head, .walk-step__detail { transition: none !important; transform: none !important; }
  .walk-clip { transition: none; }
}

/* Keep the dashboard entry reachable in the compact mobile navigation. */
@media (max-width: 900px) {
  .site-nav > div a.site-nav__link[href="/dashboard"] { display: inline-flex; align-items: center; min-height: 2.5rem; padding-inline: .8rem; }
}
.site-footer a { color: inherit; text-underline-offset: .3em; }
/* Keep the floating navigation inside the site's shared content width. */
.site-nav{left:50%;right:auto;width:calc(100% - 10vw);max-width:100rem;transform:translateX(-50%)}
@media(max-width:900px){.site-nav{width:calc(100% - 2.8rem)}}
.home-dashboards{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:clamp(2rem,5vw,5rem);padding:6rem 5vw;max-width:110rem;margin:auto;border-top:1px solid var(--line)}.home-dashboard-copy h2{font-family:var(--sc-font-display);font-size:clamp(2.6rem,4vw,4.6rem);line-height:1.03;letter-spacing:-.055em;margin:1rem 0 1.5rem}.home-dashboard-copy>p:not(.kicker){max-width:34rem;line-height:1.7;color:#505761}.home-dashboard-industries{display:flex;flex-wrap:wrap;gap:1rem;margin:1.5rem 0 2rem;font-size:.8rem;font-weight:600}.home-dashboard-demo{min-width:0}.home-dashboard-demo img{display:block;width:100%;height:auto;border:1px solid #d4dcde;box-shadow:0 18px 40px #11141815}.home-dashboard-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}.home-dashboard-tabs button{font:inherit;font-size:.75rem;padding:.7rem .9rem;min-height:44px;background:transparent;border:1px solid #c5c8cd;cursor:pointer;touch-action:manipulation}.home-dashboard-tabs button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.home-dashboard-tabs button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.home-dashboard-caption{font-size:.75rem;color:#505761;margin:1rem 0 0;min-height:2.4em}@media(max-width:900px){.home-dashboards{grid-template-columns:1fr;padding:3.5rem 1.4rem}.home-dashboard-copy h2{font-size:clamp(2.3rem,7vw,3.8rem)}.home-dashboard-copy .btn{white-space:normal}.home-dashboard-demo{max-width:42rem}}@media(max-width:380px){.hero-actions .btn{font-size:.72rem;padding:0 .5rem}}
.home-dashboards{background:var(--paper);color:var(--ink)}.home-dashboard-tabs button{color:var(--ink)}.home-dashboard-tabs button[aria-pressed=true]{color:white}
/* Selected work: each card links to its case study and the live site. */
a.project-visual { cursor: pointer; }
a.project-visual img { transition: transform 500ms var(--sc-ease-out), filter 300ms var(--sc-ease-out); }
.project-actions { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1rem; }
.project-actions a { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(247,245,240,.35); text-underline-offset: .35em; }
.project-actions a:first-child { color: #9db1ff; text-decoration-color: rgba(157,177,255,.5); }
.work-all { display: flex; justify-content: center; max-width: 100rem; margin: clamp(4rem, 8vw, 7rem) auto 0; }
@media (hover: hover) and (pointer: fine) {
  a.project-visual:hover img { transform: scale(1.02); filter: none; }
  .project-actions a:hover { text-decoration-color: currentColor; }
}
/* Client reviews: homepage (dark) and work.html (light). Generated by build-work.mjs. */
.reviews { padding: clamp(5rem, 10vw, 9rem) 5vw; }
.reviews--dark { background: var(--ink); color: var(--paper); border-top: 1px solid rgba(247,245,240,.12); }
.reviews--light { margin: clamp(5rem, 10vw, 9rem) 0 0; padding-inline: 0; border-top: 1px solid var(--line); }
.reviews__head, .reviews__list { max-width: 100rem; margin: 0 auto; }
.reviews__head h2 { margin: 0 0 clamp(2.5rem, 5vw, 4rem); font-family: var(--sc-font-display); font-size: clamp(2.6rem, 5vw, 5.2rem); line-height: .95; letter-spacing: -.06em; }
.reviews__list { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.review { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; margin: 0; padding: clamp(1.6rem, 3vw, 2.6rem); border: 1px solid rgba(247,245,240,.16); background: #171b20; }
.reviews--light .review { border-color: var(--line); background: #fff; }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.25rem, 2vw, 1.85rem); font-weight: 500; line-height: 1.3; letter-spacing: -.025em; text-wrap: pretty; }
.review figcaption { display: grid; gap: .25rem; padding-top: 1.2rem; border-top: 1px solid rgba(247,245,240,.16); font-size: .85rem; }
.reviews--light .review figcaption { border-color: var(--line); }
.review figcaption span { color: var(--sc-ink-soft); }
.reviews--light .review figcaption span { color: #505761; }
.review figcaption a { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: #9db1ff; text-underline-offset: .3em; }
.reviews--light .review figcaption a { color: var(--blue); }
@media (max-width: 900px) {
  .reviews { padding: 4.5rem 1.4rem; }
  .reviews--light { padding-inline: 0; }
  .reviews__list { grid-template-columns: 1fr; }
}