/* ============================================================================
   redesign.css — v17 · "Clarity, in cobalt."
   Loaded LAST (after styles.css + v20-dark.css) so it wins the cascade.
   A clean, spare component system inspired by the clarity of the best AI-studio
   sites — but built in DLGM's own identity: near-black ground, cobalt accent,
   Inter + JetBrains Mono, restraint over flash. All r-* namespaced so it never
   collides with the legacy stylesheet.
   Tokens borrowed from the dark theme: --paper #06070C, --ink white,
   --accent #5A7FFF, --accent-pale #A4BAFF, --rule, --ink-soft/-softer.
   ============================================================================ */

/* ---------- nav: no bar — floats over the page, one continuous surface ---------- */
.nav.nav-curated{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: none;
  border-bottom: 0;
  box-shadow: none;
}
.nav.nav-curated.is-scrolled{ background: none; border-bottom: 0; }

/* ---------- layout scaffold ---------- */
.r-section {
  padding: clamp(60px, 9vw, 122px) var(--pad-x);
  border-top: 1px solid var(--rule);
}
.r-section.is-flush { border-top: 0; }
.r-close.is-flush { border-top: 0; }
.r-wrap { max-width: 1120px; margin: 0 auto; }
.r-wrap.is-narrow { max-width: 900px; }
.r-head { max-width: 780px; margin: 0 0 clamp(38px, 5vw, 64px); }
.r-lit .r-head { margin-bottom: clamp(48px, 6.2vw, 92px); }
.r-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- typography ---------- */
.r-eyebrow {
  display: block;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-pale);
  margin: 0 0 22px;
}
.r-h1 {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.r-h2 {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(27px, 3.5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.r-hi { color: var(--accent-pale); }
.r-lead {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 22px 0 0;
  max-width: 62ch;
}
.center .r-lead { margin-left: auto; margin-right: auto; }
.r-microline {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-softer);
  margin: 30px 0 0;
}
.r-microline .r-dot { color: var(--accent); margin: 0 8px; }

/* ---------- buttons row ---------- */
.r-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 34px;
}
.center .r-actions { justify-content: center; }

/* ---------- HERO (spare, centered) ---------- */
.r-hero {
  position: relative;
  padding: clamp(76px, 12vw, 156px) var(--pad-x) clamp(58px, 9vw, 112px);
  text-align: center;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.r-hero::before {
  /* one quiet cobalt pool behind the headline — the single flourish.
     Height caps at 110% of the hero so the fade always completes
     BEFORE the section edge — a fixed 620px got hard-clipped on short
     heroes (About page), drawing a visible line under the glow. */
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  width: min(900px, 92vw);
  height: min(620px, 110%);
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 40%,
      rgba(90, 127, 255, 0.16), rgba(90, 127, 255, 0.05) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.r-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}
.r-hero .r-lead { margin-left: auto; margin-right: auto; }
.r-hero .r-actions { justify-content: center; }
/* services: hero + stepper read as ONE page — no dividing rule between them */
.r-hero.is-flush { border-bottom: 0; padding-bottom: clamp(30px, 4vw, 56px); }

/* ---------- STEPS (home: how it works) ---------- */
.r-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.r-step {
  padding: 30px 26px 34px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.018);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
}
.r-step:hover {
  border-color: rgba(90, 127, 255, 0.34);
  background: rgba(90, 127, 255, 0.04);
  transform: translateY(-3px);
}
.r-step-num {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent-pale);
  margin: 0 0 20px;
}
.r-step-title {
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin: 0 0 10px;
}
.r-step-body {
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 900px) { .r-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .r-steps { grid-template-columns: 1fr; } }

/* ---------- PHASES (services: big numbered rows) ---------- */
.r-phase {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(20px, 4vw, 60px);
  padding: clamp(40px, 6vw, 74px) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
  scroll-margin-top: 100px; /* so home-page deep-links don't hide under the fixed nav */
}
.r-phase:first-child { border-top: 0; padding-top: clamp(8px, 2vw, 20px); }
.r-phase-num {
  font-family: var(--f-sans);
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  opacity: 0.55;
}
.r-phase-title {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
}
.r-phase-kicker {
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--accent-pale);
  margin: 0 0 20px;
}
.r-phase-lead {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 62ch;
}
.r-do-label {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-softer);
  margin: 0 0 16px;
}
.r-do-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 15px;
  max-width: 66ch;
}
.r-do-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.r-do-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
}
.r-do-list li strong { color: var(--ink); font-weight: 500; }
@media (max-width: 680px) {
  .r-phase { grid-template-columns: 1fr; gap: 14px; }
  .r-phase-num { font-size: 34px; }
}

/* ---------- SERVICES — stepper (reference-style: one phase at a time) ----------
   Numbered tabs across the top with a caret under the active one; a single big
   panel below. You move 1 → 2 → 3 → 4 by clicking a tab or the arrows. */
.r-steps-nav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(22px, 4.5vw, 64px);
  flex-wrap: wrap;
  margin: 0 0 clamp(34px, 4.5vw, 58px);
}
.r-step-tab {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 2px 20px;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.8vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--ink-softer);
  transition: color .25s var(--ease);
}
.r-step-tab-num {
  font-size: 0.52em;
  font-style: italic;
  margin-top: 0.12em;
  color: inherit;
}
.r-step-tab:hover { color: var(--ink-soft); }
.r-step-tab.is-on { color: var(--accent-pale); }
/* line under the active step */
.r-step-tab.is-on::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}
.r-step-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.r-svc-panel { display: none; }
.r-svc-panel.is-on { display: block; animation: svcIn .45s var(--ease) both; }
@keyframes svcIn {
  from { opacity: 0; transform: translateX(44px); }
  to   { opacity: 1; transform: translateX(0); }
}
.r-svc-card {
  border: 1px solid rgba(237, 240, 255, 0.06);
  border-radius: 26px;
  background-image: linear-gradient(135deg, #0D1120 0%, #05060B 100%);
  padding: clamp(32px, 5vw, 70px);
}
.r-svc-top {
  display: grid;
  grid-template-columns: clamp(150px, 22vw, 260px) 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(30px, 4vw, 52px);
}
.r-svc-top .r-ico { width: 100%; height: auto; color: var(--accent-pale); }
.r-svc-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-pale);
  margin: 0 0 18px;
}
.r-svc-num { font-size: 0.45em; font-style: italic; margin-top: 0.28em; color: var(--accent); }
.r-svc-panel .r-phase-kicker { font-weight: 600; color: var(--ink); }
/* chronological "step by step" list inside each phase card */
.r-how-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  max-width: 72ch;
  counter-reset: how;
}
.r-how-list li {
  position: relative;
  padding-left: 46px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  counter-increment: how;
}
.r-how-list li::before {
  content: counter(how, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.r-how-list li strong { color: var(--ink); font-weight: 500; }
.r-steps-arrows {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 36px);
}
.r-steps-prev, .r-steps-next {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink-soft);
  font-size: 18px;
  cursor: pointer;
  transition: border-color .2s ease-in-out, color .2s ease-in-out, box-shadow .2s ease-in-out;
}
.r-steps-prev:hover, .r-steps-next:hover {
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 30px 0 rgba(90, 127, 255, 0.15);
}
@media (max-width: 680px) {
  .r-svc-top { grid-template-columns: 1fr; gap: 22px; }
  .r-svc-top .r-ico { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .r-svc-panel.is-on { animation: none; }
}

/* ---------- BUILDS (proof, not a menu) ---------- */
.r-builds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.r-build {
  padding: 30px 28px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.018);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.r-build:hover { border-color: rgba(90, 127, 255, 0.3); background: rgba(90, 127, 255, 0.035); }
.r-build-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 9px;
}
.r-build-body { font-size: 14.5px; line-height: 1.58; color: var(--ink-soft); margin: 0; }
.r-builds-note {
  text-align: center;
  font-family: var(--f-sans);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-soft);
  margin: 34px auto 0;
  max-width: 54ch;
}
@media (max-width: 680px) { .r-builds { grid-template-columns: 1fr; } }

/* ---------- VALUES (about) ---------- */
.r-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.r-value {
  padding: 30px 28px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.018);
}
.r-value-k {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-pale);
  margin: 0 0 14px;
}
.r-value-title { font-size: 19px; font-weight: 500; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.012em; }
.r-value-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
@media (max-width: 680px) { .r-values { grid-template-columns: 1fr; } }

/* ---------- PROSE (about story) ---------- */
.r-prose { max-width: 66ch; }
.r-prose p {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.r-prose p:last-child { margin-bottom: 0; }
.r-prose p strong { color: var(--ink); font-weight: 500; }
.r-prose .r-prose-lede {
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin-bottom: 28px;
}

/* ---------- FAQ (native <details>, zero JS) ---------- */
.r-faq { max-width: 840px; margin: 0 auto; border-top: 1px solid var(--rule); }
.r-faq details { border-bottom: 1px solid var(--rule); }
.r-faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 26px 44px 26px 0;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.r-faq summary:hover { color: var(--accent-pale); }
.r-faq summary::-webkit-details-marker { display: none; }
.r-faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.3s var(--ease);
}
.r-faq details[open] summary::after { content: "\2013"; }
.r-faq-a {
  padding: 0 44px 28px 0;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 72ch;
}

/* ---------- HOW IT WORKS — full-width stage cards (one after another, click-through) ---------- */
.r-stages { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px); }

/* Card treatment measured 1:1 from the reference (morningside.ai .process_card),
   re-coloured to cobalt. Rest: hairline border + 135° dark fill. Hover: the border
   becomes a GRADIENT RING (dark → bright accent toward the bottom-right corner) via
   the double background-clip technique, plus a soft 50px glow — their exact recipe:
     border: 1px solid transparent;
     background: fill-gradient (padding-box), border-gradient (border-box);
     box-shadow: 0 0 50px 0 accent@15%;                                          */
.r-stage {
  position: relative;
  display: grid;
  grid-template-columns: clamp(52px, 6vw, 100px) clamp(150px, 17vw, 236px) 1fr;
  align-items: center;
  gap: clamp(22px, 4vw, 64px);
  padding: clamp(40px, 5.4vw, 78px) clamp(30px, 4.6vw, 72px);
  border: 1px solid rgba(237, 240, 255, 0.06);
  border-radius: 26px;
  background-image: linear-gradient(135deg, #0D1120 0%, #05060B 100%);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .55s var(--ease);
}
.r-stage:hover {
  border-color: transparent;
  background-image:
    linear-gradient(135deg, #0D1120 0%, #05060B 100%),
    linear-gradient(135deg, #141C3A 0%, #5A7FFF 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 50px 0 rgba(90, 127, 255, 0.15);
}
.r-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.r-stage-num {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(52px, 8vw, 128px);
  line-height: 0.8;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  opacity: 0.42;
  transition: opacity .4s var(--ease);
}
.r-stage:hover .r-stage-num { opacity: 0.72; }

.r-stage-figure { display: grid; place-items: center; color: var(--accent-pale); }
.r-stage-figure .r-ico { width: clamp(94px, 13vw, 156px); height: auto; }

.r-stage-body { display: block; max-width: 60ch; }
.r-stage-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* arrow is invisible at rest; on hover it fades in and eases 5px over — reference-exact
   (.process-card_arrow: opacity 0 → hover opacity 1 + translateX(5px), 0.2s ease-in-out) */
.r-stage-arrow {
  color: var(--accent);
  font-size: 0.6em;
  opacity: 0;
  transform: translateX(0);
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}
.r-stage:hover .r-stage-arrow { opacity: 1; transform: translateX(5px); }
.r-stage-lead {
  display: block;
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.62;
  color: var(--ink-soft);
}

/* Fallback entrance for browsers without scroll-driven animation: one-shot slide-in
   from the right (main.js toggles .is-in). ALL cards come from the right — measured
   from the reference; nothing alternates and nothing slides past centre.
   NOTE: the visible rule MUST carry the `html.js-revealing` prefix too, or it's less
   specific than the hidden rule (0,4,1 vs 0,3,1) and the cards never appear. */
html.js-revealing .r-stage.reveal { opacity: 0; transform: translateX(66px); }
html.js-revealing .r-stage.reveal.is-in { opacity: 1; transform: none; }

/* ---------- stage emblems: each stage acts out its own story with your scroll ----
   Scrubbed by the CARD's named view-timeline: every choreography completes exactly
   when the card reaches the middle of the screen, holds, and reverses on scroll-up.
   Identify searches then finds; Build sets its blocks down one after another
   (upper slabs carry an opaque fill so they occlude the block beneath as they
   land); Deploy's power symbol goes green then pushes its four nodes out; Train's
   bars rise together from the baseline.
   Defaults (no scroll-driven-animation support / reduced motion) are the FINISHED
   state: stack seated, power green and pushed out, bars at full height. */
.r-ico { overflow: visible; }
/* deployed = powered on: the glyph reads green wherever it appears settled */
.r-ico .d-power { stroke: #3ED598; }
@supports (animation-timeline: view()) {
  .r-stage { view-timeline: --stage block; }

  /* --- IDENTIFY: sweep like a search, then ping the find --- */
  .r-stage .i-glass {
    transform-box: fill-box;
    transform-origin: center;
    animation: emSweep linear both;
    animation-timeline: --stage;
    animation-range: entry 10% cover 44%;
  }
  .r-stage .i-scan line { animation: emFade linear both; animation-timeline: --stage; }
  .r-stage .i-scan line:nth-child(1) { animation-range: entry 14% cover 26%; }
  .r-stage .i-scan line:nth-child(2) { animation-range: entry 18% cover 29%; }
  .r-stage .i-scan line:nth-child(3) { animation-range: entry 22% cover 32%; }
  .r-stage .i-scan line:nth-child(4) { animation-range: entry 26% cover 35%; }
  .r-stage .i-scan line:nth-child(5) { animation-range: entry 30% cover 38%; }
  .r-stage .i-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: emPing linear both;
    animation-timeline: --stage;
    animation-range: cover 36% cover 48%;
  }
  .r-stage .i-d2 { animation-range: cover 39% cover 50%; }
  .r-stage .i-link {
    stroke-dasharray: 1;
    animation: emDraw linear both;
    animation-timeline: --stage;
    animation-range: cover 44% cover 52%;
  }

  /* --- BUILD: blocks placed one after another, whole at mid-screen --- */
  .r-stage .b-s { animation: emPlace linear both; animation-timeline: --stage; }
  .r-stage .b-s1 { animation-range: entry 10% cover 26%; }
  .r-stage .b-s2 { animation-range: entry 20% cover 34%; }
  .r-stage .b-s3 { animation-range: entry 30% cover 42%; }
  .r-stage .b-s4 { animation-range: entry 40% cover 50%; }

  /* --- DEPLOY: power goes green, then the four nodes push out --- */
  .r-stage .d-power {
    animation: emPowerOn linear both;
    animation-timeline: --stage;
    animation-range: cover 18% cover 36%;
  }
  .r-stage .d-sn, .r-stage .d-se, .r-stage .d-ss, .r-stage .d-sw {
    animation: emPushN linear both;
    animation-timeline: --stage;
    animation-range: cover 34% cover 52%;
  }
  .r-stage .d-se { animation-name: emPushE; }
  .r-stage .d-ss { animation-name: emPushS; }
  .r-stage .d-sw { animation-name: emPushW; }

  /* --- TRAIN: all bars rise together, full height at mid-screen --- */
  .r-stage .t-bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: emGrow linear both;
    animation-timeline: --stage;
    animation-range: entry 12% cover 50%;
  }

}
@keyframes emSweep { from { transform: translate(-13px, -5px) rotate(-7deg); } to { transform: none; } }
@keyframes emFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes emPing {
  0% { transform: scale(0); opacity: 0; }
  65% { transform: scale(1.45); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes emDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes emPlace {
  from { transform: translateY(-15px); opacity: 0; }
  55% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
@keyframes emPowerOn { from { stroke: currentColor; } 60% { stroke: currentColor; } to { stroke: #3ED598; } }
@keyframes emPushN { from { transform: translate(0, 13px); opacity: 0.2; } to { transform: none; opacity: 1; } }
@keyframes emPushE { from { transform: translate(-13px, 0); opacity: 0.2; } to { transform: none; opacity: 1; } }
@keyframes emPushS { from { transform: translate(0, -13px); opacity: 0.2; } to { transform: none; opacity: 1; } }
@keyframes emPushW { from { transform: translate(13px, 0); opacity: 0.2; } to { transform: none; opacity: 1; } }
@keyframes emGrow { from { transform: scaleY(0.06); } to { transform: none; } }

/* ---------- services stepper: the SAME stories play ONCE, in time, whenever
   you move to a step (and for the first step when you first scroll to it).
   main.js re-adds .is-anim on each activation; fill-mode both holds the
   finished state after the run. ---------- */
.r-svc-panel.is-anim .i-glass { transform-box: fill-box; transform-origin: center; animation: emSweep 0.8s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
.r-svc-panel.is-anim .i-scan line { animation: emFade 0.45s ease both; }
.r-svc-panel.is-anim .i-scan line:nth-child(1) { animation-delay: 0.25s; }
.r-svc-panel.is-anim .i-scan line:nth-child(2) { animation-delay: 0.35s; }
.r-svc-panel.is-anim .i-scan line:nth-child(3) { animation-delay: 0.45s; }
.r-svc-panel.is-anim .i-scan line:nth-child(4) { animation-delay: 0.55s; }
.r-svc-panel.is-anim .i-scan line:nth-child(5) { animation-delay: 0.65s; }
.r-svc-panel.is-anim .i-dot { transform-box: fill-box; transform-origin: center; animation: emPing 0.5s ease both 0.8s; }
.r-svc-panel.is-anim .i-d2 { animation-delay: 0.95s; }
.r-svc-panel.is-anim .i-link { stroke-dasharray: 1; animation: emDraw 0.35s ease both 1.1s; }
.r-svc-panel.is-anim .b-s { animation: emPlace 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
.r-svc-panel.is-anim .b-s1 { animation-delay: 0.05s; }
.r-svc-panel.is-anim .b-s2 { animation-delay: 0.3s; }
.r-svc-panel.is-anim .b-s3 { animation-delay: 0.55s; }
.r-svc-panel.is-anim .b-s4 { animation-delay: 0.8s; }
.r-svc-panel.is-anim .d-power { animation: emPowerOn 0.6s ease both 0.15s; }
.r-svc-panel.is-anim .d-sn { animation: emPushN 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both 0.7s; }
.r-svc-panel.is-anim .d-se { animation: emPushE 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both 0.7s; }
.r-svc-panel.is-anim .d-ss { animation: emPushS 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both 0.7s; }
.r-svc-panel.is-anim .d-sw { animation: emPushW 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both 0.7s; }
.r-svc-panel.is-anim .t-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: emGrow 0.8s cubic-bezier(0.22, 0.8, 0.3, 1) both 0.1s; }

@media (prefers-reduced-motion: reduce) {
  .r-stage .r-ico *, .r-stage .r-ico g,
  .r-svc-panel .r-ico *, .r-svc-panel .r-ico g { animation: none !important; }
  .r-stage .i-link, .r-svc-panel .i-link { stroke-dashoffset: 0 !important; }
}

/* ---------- stage entrance: the measured reference choreography ----------
   Ground truth sampled from morningside.ai (.process_step transforms vs scrollY):
     step 1 starts at translateX(+500px) opacity 0, step 2 at +600, step 3 at +700 —
     ALL from the right, staggered; each slides to 0 / fades to 1 SCROLL-LINKED as it
     enters, settles at centre, and STOPS. It never exits left and never alternates.
   Ours: same mechanics, four cards, staggered travel. The .r-lit section already has
   overflow:clip, so the off-screen start can't cause a sideways scrollbar. */
@supports (animation-timeline: view()) {
  /* scroll-timeline owns entrance — retire the JS one-shot so they don't fight */
  html.js-revealing .r-stage.reveal { opacity: 1; transform: none; }
  .r-stage {
    --slide-from: 420px;
    animation: stageIn linear both;
    animation-timeline: view();
    /* complete the slide during entry, like theirs — settled before it's centred */
    animation-range: entry 0% entry 85%;
  }
  .r-stage:nth-child(2) { --slide-from: 500px; }
  .r-stage:nth-child(3) { --slide-from: 580px; }
  .r-stage:nth-child(4) { --slide-from: 660px; }
  @keyframes stageIn {
    from { transform: translateX(var(--slide-from)); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }
}
@media (max-width: 820px) {
  .r-stage {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 34px 26px;
    text-align: left;
  }
  .r-stage-num { font-size: clamp(46px, 12vw, 66px); line-height: 0.9; }
  .r-stage-figure { place-items: start; }
  .r-stage-figure .r-ico { width: 90px; }
  .r-stage-body { max-width: none; }
  /* smaller travel on narrow screens so cards don't streak across a phone */
  .r-stage { --slide-from: 120px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .r-stage { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* ---------- soft blue wash (used behind how-it-works) ---------- */
/* clip, NOT hidden — hidden would make this section a scroll container and break the
   cards' scroll-driven view() timelines (verified live: they read as 'finished'). */
.r-lit { position: relative; overflow: clip; padding-top: clamp(20px, 2.6vw, 38px); padding-bottom: 150px; }  /* Colin: guarantee box → black/blue line = 150 */
.r-lit::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  left: -8%;
  top: 20%;
  width: min(600px, 64vw);
  height: 600px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(90, 127, 255, 0.10), transparent 70%);
}
.r-lit > * { position: relative; z-index: 1; }

/* ---------- sub-header inside a merged section ---------- */
/* Must out-specify `.r-guarantee-inner { margin: 0 auto }` below, or the top gap is
   cancelled by the cascade (equal specificity, later rule wins). Compound selector = (0,2,0). */
.r-guarantee-inner.r-subhead { margin-top: clamp(290px, 30vw, 420px); }

/* ---------- GUARANTEE band — the signature promise, dressed like one ---------- */
.r-guarantee-inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(56px, 8vw, 104px) clamp(30px, 6vw, 90px);
  border: 1px solid transparent;
  border-radius: 26px;
  /* hairline gradient border: bright at the top edge, quiet at the sides */
  background:
    linear-gradient(180deg, rgba(13, 17, 33, 0.92), rgba(7, 8, 12, 0.94)) padding-box,
    linear-gradient(180deg, rgba(147, 167, 255, 0.45), rgba(90, 127, 255, 0.10) 45%, rgba(147, 167, 255, 0.22)) border-box;
}
.r-guarantee-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 78% 55% at 50% 0%, rgba(90, 127, 255, 0.13), transparent 72%);
  pointer-events: none;
}
.r-guarantee-inner .r-h2 { font-size: clamp(30px, 4vw, 50px); }
.r-guarantee-inner .r-lead { margin-left: auto; margin-right: auto; font-size: clamp(16.5px, 1.55vw, 21px); }
.r-g-seal {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 28px;
  border-radius: 50%;
  color: var(--accent-pale);
  border: 1px solid rgba(147, 167, 255, 0.32);
  background: radial-gradient(circle at 50% 28%, rgba(90, 127, 255, 0.20), rgba(90, 127, 255, 0.03));
  box-shadow: 0 0 36px rgba(90, 127, 255, 0.22);
}
.r-g-seal svg { width: 30px; height: 30px; }
.r-g-points {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3vw, 46px);
  flex-wrap: wrap;
  margin: clamp(36px, 4.5vw, 56px) 0 0;
  padding: clamp(26px, 3vw, 38px) 0 0;
  border-top: 1px solid rgba(147, 167, 255, 0.14);
}
.r-g-points li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.r-g-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-pale);
}

/* ---------- CLOSE / final CTA (self-contained, full-bleed) ---------- */
.r-close {
  padding: clamp(240px, 24.5vw, 355px) var(--pad-x) clamp(230px, 26vw, 350px);
  text-align: center;
  border-top: 1px solid var(--rule);
  /* NO background of its own — the page reads as one surface and the
     page-bottom pool (body layer) fades up through it with no seam */
  background: none;
}

/* ---------- page-bottom cobalt pool (all pages) ----------
   Morningside-style: a tall, full-width wash rising from the very bottom of
   the DOCUMENT (scroll layers), brightest at the footer — in our cobalt.
   v20-dark's four fixed atmospheric washes are repeated after it because
   background-image is a single longhand; the per-layer lists below keep
   their fixed behavior while the pool scrolls with the page. */
body {
  background-image:
    radial-gradient(ellipse 85% 780px at 50% 100%, rgba(96, 132, 255, 0.34), rgba(96, 132, 255, 0.17) 38%, rgba(96, 132, 255, 0.06) 68%, transparent 100%),
    linear-gradient(0deg, rgba(96, 132, 255, 0.22) 0%, rgba(96, 132, 255, 0.13) 26%, rgba(96, 132, 255, 0.05) 58%, transparent 100%);
  background-size: 100% 100%, 100% 1000px;
  background-position: 0 0, left bottom;
  background-repeat: no-repeat;
  background-attachment: scroll, scroll;
  background-color: var(--paper);
}
/* v20-dark's four ambient washes, moved off body's fixed background layers
   onto a composited fixed element — fixed background-attachment forces a
   full repaint on every scroll frame (the scroll lag under the hero) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 8% -4%,  rgba(90, 127, 255, 0.13),  transparent 60%),
    radial-gradient(ellipse 50% 35% at 92% 6%,  rgba(80, 60, 220, 0.10),  transparent 60%),
    radial-gradient(ellipse 70% 45% at 50% 58%, rgba(40, 50, 130, 0.07),  transparent 65%),
    radial-gradient(ellipse 55% 35% at 12% 96%, rgba(90, 127, 255, 0.08), transparent 60%);
}
.r-footer { border-top-color: rgba(147, 167, 255, 0.14); }
.r-close-inner { max-width: 780px; margin: 0 auto; }
.r-close .r-h2 { font-size: clamp(32px, 4.3vw, 54px); }
.r-close .r-lead { font-size: clamp(17.5px, 1.65vw, 22.5px); }
.r-close .btn-primary { font-size: 17px; padding: 16px 32px; }
.r-close .r-lead { margin-left: auto; margin-right: auto; }
.r-close .r-actions { justify-content: center; }

/* ---------- current-page nav marker ---------- */
.nav-links a.is-current { color: var(--ink); }

/* ---------- minimal footer (one bottom bar, all pages) ---------- */
.r-footer {
  border-top: 1px solid var(--rule);
  padding: 30px var(--pad-x);
}
.r-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.r-footer-copy {
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-softer);
}
.r-footer-copy .dot { color: var(--accent); }
.r-footer-nav { display: flex; gap: 24px; }
.r-footer-nav a {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.r-footer-nav a:hover { color: var(--ink); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .r-step, .r-build { transition: none; }
  .r-step:hover { transform: none; }
}

/* ============================================================
   Recent-work proof strip — monochrome emblem row (home only)
   ============================================================ */
.r-proof{
  margin: clamp(24px, 4vw, 56px) auto clamp(248px, 23.6vw, 321px);
  text-align: center;
}
.r-proof-kicker{
  margin: 0 0 clamp(30px, 3.5vw, 46px);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-softer);
}
.r-logo-row{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 92px);
}
.r-logo-row li{ display: inline-flex; }
.r-brand{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: default;
  color: var(--ink-soft);
  transition: color .35s var(--ease);
}
.r-brand .r-mk{
  height: 42px;
  width: auto;
  display: block;
  flex: none;
}
.r-brand .r-tile{ border-radius: 10px; }
.r-brand .r-wm{
  font-family: var(--f-sans);
  font-size: 21px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}
/* per-brand wordmark treatments — echo each real identity */
.r-b-resurgo .r-wm{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 20px;
  color: #EAD9B0;
}
.r-b-talkonce .r-wm{ letter-spacing: -.02em; color: #fff; }
.r-b-talkonce .r-wm em{ font-style: normal; color: #A78BFA; }
.r-b-nature .r-wm{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  color: #CFE7D6;
}
.r-b-ruby .r-wm{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  color: #F0CCB8;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.r-b-nature .r-wm small,
.r-b-ruby .r-wm small{
  font-family: var(--f-sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: .6;
  margin-top: 4px;
}
.r-b-nature .r-wm small{ color: #9fd8bd; }
.r-b-ruby .r-wm small{ font-style: normal; letter-spacing: .3em; font-size: 7.5px; color: #d8b49a; margin-top: 5px; }
/* logos stay completely static — no hover or press effect */
.r-logo-row .r-mk{ opacity: 1; }
@media (max-width: 640px){
  .r-logo-row{ gap: 24px 34px; }
  .r-brand .r-mk{ height: 34px; }
  .r-brand .r-wm{ font-size: 18px; }
  .r-b-resurgo .r-wm{ font-size: 16px; }
  .r-b-ruby .r-wm{ font-size: 21px; }
}

/* ---------- proof strip choreography: the four brands rise in as a staggered set ---------- */
html.js-revealing .r-proof.reveal .r-logo-row li{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.js-revealing .r-proof.reveal.is-in .r-logo-row li{ opacity: 1; transform: none; }
html.js-revealing .r-proof.reveal.is-in .r-logo-row li:nth-child(2){ transition-delay: .09s; }
html.js-revealing .r-proof.reveal.is-in .r-logo-row li:nth-child(3){ transition-delay: .18s; }
html.js-revealing .r-proof.reveal.is-in .r-logo-row li:nth-child(4){ transition-delay: .27s; }
@media (prefers-reduced-motion: reduce){
  html.js-revealing .r-proof.reveal .r-logo-row li{ opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Orbit hero — invisible system ring behind the headline.
   Nothing shows at rest. Moving the mouse across the hero
   reveals the ring lines around the pointer (canvas, painted by
   main.js) and lights whichever phase word is nearest — so you
   can follow the line from Identify to Build to Deploy to Train.
   Dots sit exactly ON the outer ring line.
   ============================================================ */
/* the orbit hero fills the first screen; copy sits dead-center so the big
   circle (drawn around it by main.js) has room on every side */
@media (min-width: 961px){
  .r-hero.has-orbit{
    display: grid;
    place-items: center;
    min-height: min(660px, 100vh);
    padding-top: 48px;
    padding-bottom: 48px;
  }
  /* copy (and the oval locked to it) rides ~1in lower in the frame */
  .r-hero.has-orbit .r-hero-inner{ margin-top: 54px; }
}
.r-hero-orbit{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1260px, 96vw);
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.r-orbit-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; }
.r-orbit-node{
  --lit: 0;
  position: absolute;
  width: 0; height: 0;
  opacity: var(--lit);
}
.r-orbit-dot{
  position: absolute;
  left: -3.5px; top: -3.5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #a9baff;
  transform: scale(calc(0.7 + 0.55 * var(--lit)));
}
.r-orbit-dot::after{
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 167, 255, 0.55), transparent 70%);
  opacity: var(--lit);
}
.r-orbit-tag{
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-pale);
}
/* labels read outward from the ring: above the line on top, below on bottom */
.r-orbit-node.n1 .r-orbit-tag, .r-orbit-node.n2 .r-orbit-tag{ bottom: 15px; }
.r-orbit-node.n3 .r-orbit-tag, .r-orbit-node.n4 .r-orbit-tag{ top: 15px; }
@media (max-width: 960px){ .r-hero-orbit{ display: none; } }
@media (prefers-reduced-motion: reduce){
  .r-orbit-node{ --lit: 0.5; }
}

/* ============================================================
   Team — About page. Photo above, bio below, three across.
   Until real photos land, an engraved monogram holds each frame
   (swap in <img> and the monogram span comes out).
   ============================================================ */
.r-team{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 40px);
}
.r-person{ text-align: left; }
.r-person-photo{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(90,127,255,.13), rgba(90,127,255,.03) 55%, transparent 80%),
    #0B0E17;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.r-person-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.r-person-mono{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--accent-pale, #9db2ff);
  opacity: .75;
}
.r-person-name{
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.012em;
  margin: 0 0 4px;
}
.r-person-role{
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-pale, #8fa3ff);
  margin: 0 0 12px;
}
.r-person-bio{ font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
@media (max-width: 860px){
  .r-team{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

/* ---------- APPLY — Work-with-us, two-column (intro left, form card right) ---------- */
.r-apply{
  padding: clamp(140px, 15vw, 196px) var(--pad-x) clamp(90px, 10vw, 150px);
  /* blue-washed surface (Morningside carries a green cast; ours is cobalt).
     Strongest at the top, eased back to the site black by the bottom edge
     so the footer boundary never draws a seam. */
  background:
    radial-gradient(1100px 700px at 14% 6%, rgba(90, 127, 255, 0.13), transparent 68%),
    radial-gradient(1000px 760px at 88% 30%, rgba(90, 127, 255, 0.07), transparent 66%),
    linear-gradient(180deg, #0C1220 0%, #0A0F1C 62%, #06070C 100%);
}
.r-apply-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(44px, 5.5vw, 88px);
  align-items: start;
}
.r-apply-results{ max-width: 900px; margin: 0 auto; }
.r-apply-intro{ position: sticky; top: 110px; }
.r-apply-intro .r-h1{ font-size: clamp(34px, 4.4vw, 56px); }
.r-apply-intro .r-lead{ margin-top: 24px; }
.r-apply-facts{
  margin-top: clamp(36px, 4.5vw, 58px);
  display: grid;
  gap: 24px;
}
.r-fact{ display: flex; align-items: center; gap: 16px; }
.r-fact-ico{
  width: 46px; height: 46px;
  border-radius: 13px;
  flex: none;
  display: grid; place-items: center;
  background: rgba(90, 127, 255, 0.10);
  border: 1px solid rgba(90, 127, 255, 0.22);
  color: var(--accent-pale, #8fa3ff);
}
.r-fact-ico svg{ width: 21px; height: 21px; }
.r-fact-text{ display: grid; gap: 3px; }
.r-fact-text strong{ font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.r-fact-text span{ font-size: 14.5px; color: var(--ink-soft); }
.r-fact-text a{ color: var(--ink-soft); text-decoration: none; transition: color var(--t-fast, .18s) var(--ease, ease); }
.r-fact-text a:hover{ color: var(--accent-pale, #8fa3ff); }

/* the form card — dark, one surface, carrying the blue cast */
.r-apply-card.apply-form{
  max-width: none;
  margin: 0;
  background: linear-gradient(180deg, rgba(90, 127, 255, 0.075), rgba(90, 127, 255, 0.035)), #0B101C;
  border: 1px solid rgba(140, 160, 255, 0.14);
  border-radius: 18px;
  padding: clamp(28px, 3.4vw, 44px);
}
.r-apply-card .field{ margin-bottom: 20px; }
.r-apply-card .field-row{ gap: 18px; }
.r-apply-card .field-label{ font-size: 14px; margin-bottom: 9px; }
/* dark inputs (override the site-wide white ones) */
.r-apply-card .field-input,
.r-apply-card .field-select,
.r-apply-card .field-textarea{
  background: rgba(10, 13, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  color: var(--ink);
  padding: 13px 15px;
}
.r-apply-card .field-input::placeholder,
.r-apply-card .field-textarea::placeholder,
.r-apply-card textarea.field-input::placeholder{ color: rgba(255, 255, 255, 0.30); }
.r-apply-card .field-select:invalid{ color: rgba(255, 255, 255, 0.30); }
.r-apply-card .field-select option{ background: #0D1017; color: #E9ECF5; }
.r-apply-card .field-input:focus,
.r-apply-card .field-select:focus,
.r-apply-card .field-textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(90, 127, 255, 0.14);
}
.r-apply-card .field-select{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23A9B1C6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* budget pills */
.r-budget{ border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.r-budget .field-label{ margin-bottom: 10px; }
.r-budget-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.r-pill{ position: relative; display: block; cursor: pointer; }
.r-pill.is-wide{ grid-column: 1 / -1; }
.r-pill input{
  position: absolute; inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.r-pill span{
  display: flex; align-items: center; justify-content: center;
  padding: 14px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(10, 13, 22, 0.72);
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 500;
  text-align: center;
  transition: border-color var(--t-fast, .18s) var(--ease, ease),
              background var(--t-fast, .18s) var(--ease, ease),
              color var(--t-fast, .18s) var(--ease, ease),
              box-shadow var(--t-fast, .18s) var(--ease, ease);
}
.r-pill:hover span{ border-color: rgba(255, 255, 255, 0.24); }
.r-pill input:checked + span{
  border-color: var(--accent);
  background: rgba(90, 127, 255, 0.12);
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(90, 127, 255, 0.12);
}
.r-pill input:focus-visible + span{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* full-width submit */
.r-apply-card .form-submit{
  width: 100%;
  justify-content: center;
  padding: 17px 26px;
  font-size: 15px;
  border-radius: 12px;
  margin-top: 8px;
}

@media (max-width: 960px){
  .r-apply{ padding-top: clamp(116px, 20vw, 150px); }
  .r-apply-grid{ grid-template-columns: 1fr; gap: 46px; }
  .r-apply-intro{ position: static; }
}
@media (max-width: 480px){
  .r-budget-grid{ grid-template-columns: 1fr; }
}

/* ============ PHONE-ONLY POLISH (nothing here touches desktop) ============ */
/* The closed hamburger panel drew a stray 1px line under the nav on every
   page — v20-dark.css forces its border-bottom visible at all times, which
   defeats styles.css's transparent-when-closed rule. Line only when open.
   (The panel is display:none above 760px, so desktop never renders it.) */
.nav-mobile-panel{ border-bottom-color: transparent; }
.nav-mobile-panel.is-open{ border-bottom-color: var(--rule); }

@media (max-width: 640px){
  /* Home hero hugged the nav (headline started 3px under it) — slide the
     whole copy block down so the first screen breathes. */
  .r-hero.has-orbit{ padding-top: 149px; }
}

@media (max-width: 640px){
  /* Home-page vertical rhythm, per Colin's phone walkthrough 7/11.
     All selectors are home-only (.r-proof / .r-guarantee-inner /
     has-orbit sibling), so services/founders/apply are untouched. */
  .r-proof{ margin-top: 77px; margin-bottom: 169px; }   /* strip down ~10% of screen; logos→"From idea" black cut ~15% (was 248px) */
  .r-guarantee-inner.r-subhead{ margin-top: 169px; }     /* Train card→guarantee black cut ~20% (was 290px) */
  .r-hero.has-orbit ~ .r-close{ padding-top: 133px; }     /* guarantee→"Tell us about your business" black cut ~20% (was 240px) */
}

@media (max-width: 640px){
  /* Home hero type, per Colin 7/11: title two sizes up (34→38), lead one
     size up (16→18) and pushed ~5% of a screen lower (gap 22→64). */
  .r-hero.has-orbit .r-h1{ font-size: 38px; }
  .r-hero.has-orbit .r-h1 .h1-br{ display: block; }  /* clean 4-line stack: 'Get more of / the business.' */
  .r-hero.has-orbit .r-lead{ font-size: 18px; margin-top: 43px; }
}

@media (max-width: 640px){
  /* Services page rhythm, per Colin 7/11 — same scale as home (9/15/20/20/20).
     svc-* classes exist only on services.html; .r-head.center and
     .r-guarantee-inner:not(.r-subhead) are services-only too. */
  .r-hero.is-flush.svc-hero{ padding-top: 149px; padding-bottom: 67px; }   /* nav→h1 76px (9%); lead→tabs 127px (15%) */
  .r-head.center{ margin-top: 49px; }                      /* arrows→Questions 169px (20%) */
  .r-guarantee-inner:not(.r-subhead){ margin-top: 49px; }  /* last FAQ→guarantee 169px (20%) */
  .svc-close{ padding-top: 109px; }                        /* guarantee→"Tell us" 169px (20%) */
}

@media (max-width: 640px){
  /* About Us page rhythm, per Colin 7/12 — 9/15/15/15/20 scale.
     abt-* classes exist only on founders.html. */
  .r-hero.is-flush.abt-hero{ padding-top: 149px; padding-bottom: 67px; }  /* nav→"Meet the team." 76px (9%); h1→Colin photo 127px (15%) */
  .abt-hero .r-eyebrow{ display: none; }                                  /* "About us" label removed on phones */
  .abt-hero + section .r-team{ gap: 127px; }                              /* between person cards 127px (15%) */
  .abt-close{ padding-top: 109px; }                                       /* Aidan bio→"Tell us" 169px (20%) */
}

/* Long-form team bios (7/12) are two paragraphs — give them a breath apart. */
.r-person-bio + .r-person-bio{ margin-top: 12px; }

/* ===== TEAM ROWS (Morningside-style, 7/12) — desktop/laptop only. Each
   person is a full-width horizontal row, photo and text on alternating
   sides. Phone (≤860px) keeps the stacked card layout untouched. ===== */
@media (min-width: 861px){
  /* Widened 7/12 per Colin (match Morningside's measure): wider container,
     wider text column, larger name + body type. */
  .r-wrap:has(.r-team){ max-width: 1360px; }
  .r-team{ grid-template-columns: 1fr; gap: clamp(96px, 10vw, 150px); }
  .r-person{
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    column-gap: clamp(56px, 7vw, 120px);
    align-items: center;
  }
  .r-person-info{ order: 1; max-width: 760px; }
  .r-person-photo{ order: 2; margin-bottom: 0; width: 100%; max-width: 480px; justify-self: end; }
  .r-person:nth-child(even){ grid-template-columns: 0.85fr 1.15fr; }
  .r-person:nth-child(even) .r-person-photo{ order: 1; justify-self: start; }
  .r-person:nth-child(even) .r-person-info{ order: 2; justify-self: end; }
  .r-person-name{ font-size: clamp(38px, 4vw, 58px); margin: 0 0 10px; letter-spacing: -.02em; }
  .r-person-role{ margin: 0 0 22px; font-size: 12.5px; }
  .r-person-bio{ font-size: 17px; line-height: 1.7; }
}

/* organized footer */
.r-footer-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:48px;max-width:none}
.r-footer-copy{justify-self:start;font-size:12.5px;opacity:.5}
.r-footer-center{grid-column:2;justify-self:center;display:flex;gap:140px;align-items:flex-start}
.r-footer-col{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;font-size:13px}
.r-footer-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.72;margin:0;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.r-footer-col span{opacity:.72}
.r-footer-col a{color:inherit;text-decoration:none;opacity:.82}
.r-footer-col a:hover{opacity:1;text-decoration:underline}
@media(max-width:820px){
  .r-footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}
  .r-footer-center{gap:40px;flex-wrap:wrap;justify-content:center}
}



/* ============================================================
   v69 — Homepage v2 (typed hero + gift card + diagnostic section)
   and the /case-studies page. All r2-* namespaced.
   ============================================================ */

/* ---------- hero: two columns over the aura canvas ---------- */
.r2-hero-grid{
  position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,47fr) minmax(0,53fr);
  gap:34px; align-items:center; text-align:left;
}
.r2-hero-copy .r-h1{ text-wrap:balance; }
.r2-line2{ display:block; color:var(--accent-pale); min-height:1.12em; }
.r2-caret{
  display:inline-block; width:3px; height:.92em; background:var(--accent-pale);
  vertical-align:-.08em; margin-left:3px; animation:r2blink 1s steps(1) infinite;
}
@keyframes r2blink{ 50%{opacity:0} }
.r2-hero-copy .r-lead{ margin-top:22px; }

.r2-gift{
  position:relative; max-width:470px; justify-self:end;
  transform:translate(14px, 26px);
  background:linear-gradient(rgba(90,127,255,.09),rgba(90,127,255,.03)), rgba(8,11,20,.72);
  border:1px solid rgba(140,160,255,.22); border-radius:20px;
  padding:34px 32px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 70px rgba(90,127,255,.10);
}
.r2-gift-eyebrow{
  font-family:var(--f-sans); font-size:11.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-pale); margin:0 0 14px;
}
.r2-gift-h{
  font-family:var(--f-sans); font-size:clamp(21px,1.8vw,25px); line-height:1.3;
  font-weight:600; letter-spacing:-.015em; color:var(--ink); margin:0 0 14px;
}
.r2-gift-body{ font-size:15px; line-height:1.65; color:var(--ink-soft); margin:0 0 24px; }
.r2-gift-fine{ font-size:12.5px; line-height:1.55; color:var(--ink-softer); margin:16px 0 0; }
@media(max-width:960px){
  .r2-hero-grid{ grid-template-columns:1fr; gap:60px; }
  .r2-gift{ justify-self:stretch; max-width:none; transform:none; }
}

/* ---------- case-study teasers (home) ---------- */
.r2-cases{ margin-top:clamp(64px, 8vw, 110px); }
.r2-cases .r-head{ margin-bottom:clamp(30px,4vw,48px); }
.r2-case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.r2-case-card{
  display:block; text-decoration:none; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.025); border:1px solid var(--rule);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.r2-case-card:hover{ transform:translateY(-5px); border-color:rgba(147,167,255,.4); }
.r2-case-card img{ display:block; width:100%; height:185px; object-fit:cover; object-position:top; }
.r2-case-body{ padding:20px 22px 22px; }
.r2-case-name{ font-size:18px; font-weight:600; color:var(--ink); margin:0 0 8px; }
.r2-case-line{ font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0 0 14px; }
.r2-case-more{ font-size:13.5px; font-weight:600; color:var(--accent-pale); }
@media(max-width:900px){ .r2-case-grid{ grid-template-columns:1fr; gap:16px; } }

/* ---------- the diagnostic section (home) ---------- */
.r2-diag{ position:relative; padding:clamp(80px,10vw,130px) var(--pad-x); overflow:hidden; }
.r2-diag::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 600px at 14% 8%, rgba(90,127,255,.12), transparent 60%),
    radial-gradient(700px 520px at 88% 40%, rgba(90,127,255,.06), transparent 60%);
}
.r2-diag-grid{
  position:relative; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(36px,5vw,64px); align-items:start;
}
.r2-diag-points{ margin:28px 0 0; padding:0; list-style:none; }
.r2-diag-points li{
  display:flex; gap:12px; font-size:15px; line-height:1.55; color:var(--ink-soft); margin:0 0 14px;
}
.r2-diag-points li::before{ content:"✓"; color:var(--accent-pale); font-weight:600; }
.r2-gift-note{ margin-top:28px; font-size:14.5px; line-height:1.6; color:var(--ink-softer); font-style:italic; }

/* the sample diagnostic, writing itself */
.r2-audit{
  background:#FCFCFB; color:#12151C; padding:24px 26px 22px; border-radius:14px; margin-top:36px;
  box-shadow:0 34px 90px rgba(0,0,0,.68), 0 0 70px rgba(90,127,255,.14),
    0 0 0 1px rgba(147,167,255,.16);
}
.r2-a-brand{ font-size:12.5px; font-weight:600; border-bottom:2px solid #E23B3B;
  padding-bottom:8px; margin-bottom:12px; color:#12151C; }
.r2-a-brand .s{ color:#3D5FE8; }
.r2-a-h{ font-family:var(--f-sans); font-size:16.5px; font-weight:600; letter-spacing:-.015em;
  margin:0 0 10px; min-height:22px; color:#12151C; }
.r2-redact{ display:inline-block; background:#1c1f26; border-radius:3px; width:86px; height:.78em;
  vertical-align:-.06em; }
.r2-a-k{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:#9aa2b1; margin:10px 0 6px; }
.r2-a-f{ font-size:11px; line-height:1.55; color:#3A4049; margin:0 0 5px; min-height:14px; }
.r2-a-sys{ font-size:11.5px; line-height:1.5; color:#12151C; margin:0 0 7px; opacity:0;
  transform:translateY(5px); transition:opacity .5s ease, transform .5s ease; }
.r2-a-sys.on{ opacity:1; transform:none; }
.r2-a-sys em{ font-style:normal; color:#3A4049; }
.r2-a-sys b{ color:#E23B3B; font-weight:600; margin-right:5px; }

/* the real form */
.r2-form{
  background:linear-gradient(rgba(90,127,255,.07),rgba(90,127,255,.03)), #0B101C;
  border:1px solid rgba(140,160,255,.16); border-radius:18px; padding:30px 28px;
}
.r2-form label{ display:block; font-size:13px; font-weight:500; color:#c7cfe0; margin:15px 0 6px; }
.r2-form label:first-child{ margin-top:0; }
.r2-form input,.r2-form select{
  width:100%; padding:13px 14px; font-size:15px; font-family:inherit; color:#fff;
  background:rgba(10,13,22,.72); border:1px solid rgba(147,167,255,.22); border-radius:9px; outline:none;
}
.r2-form input:focus,.r2-form select:focus{ border-color:var(--accent); }
.r2-form input::placeholder{ color:#6b7488; }
.r2-form select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238c96ad' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.r2-form select option{ background:#141a28; color:#fff; }
.r2-consent{ display:flex; gap:10px; align-items:flex-start; margin:18px 0 0;
  font-size:12.5px; color:#9aa4ba; line-height:1.5; }
.r2-consent input{ width:auto; margin-top:2px; }
.r2-hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.r2-form button{
  width:100%; margin-top:22px; padding:15px; font-size:16px; font-weight:600; font-family:inherit;
  color:#fff; background:var(--accent); border:none; border-radius:10px; cursor:pointer;
  transition:opacity .2s;
}
.r2-form button:hover{ opacity:.92; }
.r2-form button:disabled{ opacity:.55; cursor:default; }
.r2-err{ color:#ff9a9a; font-size:13.5px; margin-top:12px; display:none; }
.r2-fine{ font-size:11.5px; color:#6b7488; text-align:center; margin:14px 0 0; }
.r2-done{ text-align:center; padding:60px 24px; }
.r2-done h3{ font-family:var(--f-sans); font-size:26px; color:var(--ink); margin:0 0 12px; font-weight:600; }
.r2-done p{ font-size:16px; color:var(--ink-soft); line-height:1.6; max-width:420px; margin:0 auto; }
@media(max-width:960px){ .r2-diag-grid{ grid-template-columns:1fr; } }

/* ---------- /case-studies page ---------- */
.r2-cs-hero{ position:relative; padding:clamp(150px,17vw,200px) var(--pad-x) clamp(60px,7vw,90px); overflow:hidden; }
.r2-cs-hero::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(900px 560px at 50% -20%, rgba(90,127,255,.16), transparent 62%); }
.r2-cs-hero .r-wrap{ position:relative; }
.r2-study{ padding:clamp(60px,8vw,96px) var(--pad-x); }
.r2-study + .r2-study{ border-top:1px solid var(--rule); }
.r2-study-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(34px,5vw,64px); align-items:center;
}
.r2-study.is-flip .r2-study-media{ order:-1; }
.r2-study-kicker{ display:flex; align-items:baseline; gap:16px; margin:0 0 18px; flex-wrap:wrap; }
.r2-wordmark{ font-size:26px; color:var(--ink); }
.r2-wm-talkonce{ font-weight:600; } .r2-wm-talkonce b{ color:#8F7BFF; font-weight:600; }
.r2-wm-resurgo{ font-family:var(--f-display, 'Cormorant Garamond', serif); letter-spacing:.2em; font-weight:600; }
.r2-wm-nature{ font-family:var(--f-display, 'Cormorant Garamond', serif); font-weight:600; }
.r2-wm-nature b{ color:#C9A96A; font-weight:600; }
.r2-study-tag{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-softer); }
.r2-study h2{ font-family:var(--f-sans); font-size:clamp(26px,2.6vw,38px); line-height:1.12;
  font-weight:600; letter-spacing:-.02em; margin:0 0 20px; color:var(--ink); }
.r2-study p{ font-size:16px; line-height:1.7; color:var(--ink-soft); margin:0 0 16px; }
.r2-chips{ display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 26px; }
.r2-chip{ font-size:12.5px; font-weight:500; color:#C9D2E8; border:1px solid rgba(147,167,255,.28);
  border-radius:999px; padding:7px 14px; }
.r2-visit{ display:inline-block; text-decoration:none; font-weight:600; font-size:15px; color:var(--accent-pale); }
.r2-visit:hover{ color:var(--ink); }
.r2-study-media{ display:grid; gap:20px; }
.r2-shot{ border-radius:14px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(147,167,255,.14); }
.r2-shot img{ display:block; width:100%; height:auto; }
.r2-shot-b{ width:78%; justify-self:end; margin-top:-6%; position:relative; z-index:2; }
.r2-study.is-flip .r2-shot-b{ justify-self:start; }
@media(max-width:960px){
  .r2-study-grid{ grid-template-columns:1fr; }
  .r2-study.is-flip .r2-study-media{ order:0; }
  .r2-shot-b{ width:84%; margin-top:-8%; }
}

/* click-to-play video */
.r2-shot-video{ position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  background:none; font-family:inherit; text-align:left; border-radius:14px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(147,167,255,.14); }
.r2-shot-video img{ display:block; width:100%; height:auto; }
.r2-shot-video::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,6,12,.05),rgba(4,6,12,.45)); transition:background .25s ease; }
.r2-shot-video:hover::after{ background:linear-gradient(180deg,rgba(4,6,12,0),rgba(4,6,12,.3)); }
.r2-play{ position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(10,14,26,.55); border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 40px rgba(0,0,0,.5); transition:transform .25s ease; }
.r2-shot-video:hover .r2-play{ transform:translate(-50%,-50%) scale(1.08); }
.r2-play svg{ margin-left:3px; }
.r2-play-label{ position:absolute; z-index:2; left:50%; top:calc(50% + 54px); transform:translateX(-50%);
  font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.6); }
.r2-vbox{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:rgba(4,6,12,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.r2-vbox[hidden]{ display:none; }
.r2-vbox video{ width:min(1040px,100%); max-height:82vh; border-radius:14px;
  box-shadow:0 40px 120px rgba(0,0,0,.7); }
.r2-vbox-close{ position:absolute; top:18px; right:22px; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(147,167,255,.3); background:rgba(10,13,22,.7); color:#c7cfe0;
  font-size:22px; line-height:1; cursor:pointer; font-family:inherit; }
.r2-vbox-close:hover{ color:#fff; }
@media (prefers-reduced-motion: reduce){ .r2-caret{ animation:none; } }

/* ---------- v70: hero scene = EXACTLY the approved preview background ---------- */
.r-hero.has-orbit.r2-scene{
  background:
    radial-gradient(1200px 760px at 84% 30%, rgba(90,127,255,.17), transparent 60%),
    radial-gradient(1600px 560px at 50% 108%, rgba(64,94,210,.22), transparent 62%),
    radial-gradient(800px 560px at 8% 90%, rgba(38,52,110,.14), transparent 60%),
    linear-gradient(115deg,#05060A 0%,#070910 48%,#0A0F1F 100%);
}
.r-hero.has-orbit.r2-scene::before{ content:none; } /* kill the old cobalt pool */
.r2-grain{
  position:absolute; inset:0; z-index:1; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.r2-seam{
  position:absolute; z-index:1; top:-12%; bottom:-12%; left:55%; width:2px; opacity:.65;
  background:linear-gradient(180deg,transparent,rgba(147,167,255,.55) 32%,
    rgba(90,127,255,.8) 50%,rgba(147,167,255,.55) 68%,transparent);
  transform:rotate(17deg);
  box-shadow:0 0 22px rgba(90,127,255,.45), 0 0 80px rgba(90,127,255,.2);
}
.r2-stars{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.r2-stars i{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:rgba(200,212,255,.5); animation:r2tw 5s ease-in-out infinite;
}
@keyframes r2tw{ 0%,100%{opacity:.25} 50%{opacity:.8} }
@media (prefers-reduced-motion: reduce){ .r2-stars i{ animation:none; } }

/* ---------- v71: footer rebalanced (no contact col) + hero card final position ---------- */
.r-footer-inner{ grid-template-columns:1fr auto 1fr; align-items:start; }
.r-footer-copy{ justify-self:start; }
.r-footer-center{ display:contents; }
.r-footer-center .r-footer-col:first-child{ grid-column:2; justify-self:center; }
.r-footer-center .r-footer-col:last-child{ grid-column:3; justify-self:end; }
@media(max-width:820px){
  .r-footer-inner{ grid-template-columns:1fr; justify-items:center; }
  .r-footer-copy{ justify-self:center; }
  .r-footer-center .r-footer-col:first-child,
  .r-footer-center .r-footer-col:last-child{ grid-column:auto; justify-self:center; }
}

/* the seam sits further left so the gift card owns its own segment at any width */
.r2-seam{ left:47%; }
.r2-gift{ transform:none; margin-top:110px; }
@media(max-width:960px){
  .r2-gift{ margin-top:0; }
  .r2-seam{ display:none; }
}

/* v72: breathing room between case teasers and "From idea to running" */
.r2-cases{ margin-bottom: clamp(90px, 11vw, 160px); }

/* ---------- v73: cinematic hero loop (the night desk) — no seam line ---------- */
.r2-hero-video{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s ease;
  background:url('../images/hero/desk-poster.jpg?v=2') center/cover no-repeat;
}
.r2-hero-video.is-on{ opacity:1; }

/* v87: guaranteed cinematic motion — a slow Ken Burns zoom that runs via CSS,
   so the hero shows motion in EVERY browser even where the video file won't
   play (Safari needs byte-range support the static host doesn't provide).
   The element is always visible (shows its poster/video) and slowly zooms. */
.r2-hero-video{ opacity:1 !important; animation: r2ken 30s ease-in-out infinite alternate; will-change: transform; }
@keyframes r2ken { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce){ .r2-hero-video{ animation: none; } }
.r2-scene .r2-shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(4,6,12,.82) 0%, rgba(4,6,12,.55) 46%, rgba(4,6,12,.38) 100%);
}
/* poster as instant backdrop behind the video element too */
.r-hero.has-orbit.r2-scene{
  background:url('images/hero/desk-poster.jpg?v=2') center/cover no-repeat, #06070C;
}

/* v74→v75: hero = 92.5% of the viewport, content centered within it */
.r-hero.has-orbit.r2-scene{
  min-height:92.5svh;
  padding-top:0; padding-bottom:0;
  display:grid; align-items:center;
}

/* v76: Colin's exact rhythm — 380px between train→guarantee and guarantee→diagnostic */
.r-lit .r-guarantee-inner.r-subhead{ margin-top:150px; }   /* Colin: train box → guarantee = 150 */
.r2-diag{ padding-top:48px; }  /* Colin: FREE BUSINESS DIAGNOSTIC starts right at the top of the blue section */

/* ---------- v77: scroll-scrubbed Higgsfield emblems (home) + play-on-activate (services) ---------- */
.r-stage-figure .r2-seq{
  width: clamp(220px, 24vw, 300px); aspect-ratio: 1/1; object-fit: cover;
  border-radius: 14px; display: block;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(147,167,255,.10);
}
.r-svc-top .r2-seq{
  width: min(280px, 100%); aspect-ratio: 1/1; object-fit: cover;
  border-radius: 14px; display: block; margin: 0 auto 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(147,167,255,.10);
}
@media (max-width: 860px){
  .r-stage-figure .r2-seq{ width: min(240px, 70vw); }
}

/* v78: footer — Company left-center, Legal right-center, equal thirds of space
   (edge→Company = Company→Legal = Legal→edge), © centered underneath */
.r-footer-inner{ display:flex; flex-direction:column; align-items:stretch; gap:34px; }
.r-footer-center{ display:flex; justify-content:space-evenly; align-items:flex-start; width:100%; gap:0; }
.r-footer-copy{ order:2; text-align:center; justify-self:auto; }
@media(max-width:820px){
  .r-footer-center{ flex-direction:column; align-items:center; gap:28px; }
}

/* v80: phone hero — content is taller than the viewport there, so centering
   pinned it to the top under the nav. Give it real top/bottom room. */
@media(max-width:960px){
  .r-hero.has-orbit.r2-scene{ min-height:auto; padding-top:132px; padding-bottom:72px; }
}

/* v83: phone footer — Company + Legal SIDE BY SIDE with equal thirds of space
   (edge→Company = Company→Legal = Legal→edge), © centered underneath.
   Last rule in the file so it wins over the earlier mobile footer overrides. */
@media(max-width:820px){
  .r-footer-inner{ display:flex; flex-direction:column; align-items:stretch; gap:30px; }
  .r-footer-center{ display:flex; flex-direction:row; justify-content:space-evenly;
    align-items:flex-start; flex-wrap:nowrap; gap:0; width:100%; }
  .r-footer-copy{ order:2; justify-self:center; text-align:center; width:100%; }
}

/* v84: PHONE ONLY — +40px extra black beneath the guarantee box (desktop untouched) */
@media(max-width:640px){
  .r-lit{ padding-bottom: 150px; }   /* Colin: guarantee → black/blue line = 150 (phone matches desktop) */
}

/* v85: PHONE ONLY — instant-paint poster for the portrait hero video (desktop untouched) */
@media(max-width:640px){
  .r2-hero-video{ background-image:url('../images/hero/desk-poster-portrait.jpg'); }
  .r-hero.has-orbit.r2-scene{ background-image:url('images/hero/desk-poster-portrait.jpg'); }
}