/* ============================================================
   NOXUS — home.css
   Hero + Stats + Split (x3) + Bento + CTA (per spec §3)
   ============================================================ */

/* Perf: skip style/layout/paint for below-the-fold sections until they're
   scrolled near. The browser otherwise renders the entire (long) page before
   the first paint, which was the bulk of the ~3.6s of main-thread render work
   capping FCP/LCP. contain-intrinsic-size reserves space so there's no scroll
   jump (CLS stays 0). The sticky split carousel is deliberately excluded — it
   relies on live layout for its pinned-stack scroll. */
.stats-section,
.process,
.disciplines {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* ============================================================
   HERO (§3-A)
   ============================================================ */

.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 85%, #D4B5A8 0%, transparent 55%),
    radial-gradient(ellipse at 75% 15%, #EDD8CC 0%, transparent 50%),
    #F0E6DF;
}

/* Left lede column: title + tagline (top) and description + buttons
   (below), centred as one group. Both blocks used to be independently
   absolute — the vertically-centred title sagged onto the bottom-anchored
   description on any viewport shorter than ~1000px (laptops, windowed
   desktop). Grouping them in one flex column makes overlap impossible at
   any height, the same DOM-stacking principle the mobile layout uses. */
.hero-lede {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 5vh, 84px);
}
.hero-title-block {
  z-index: 1;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(80px, 12vw, 160px);
  letter-spacing: -0.045em;
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--black);
  margin: 0;
}
.hero-subtitle {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.hero-subtitle-rule {
  width: 40px;
  height: 1px;
  background: rgba(0, 0, 0, 0.30);
  flex-shrink: 0;
}
.hero-subtitle-text {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-on-light-secondary);
}

/* (Moved to components.css so hero-paths can render on all pages.) */

/* Hero "image" — real MacBook PNG mockup (3/4 perspective baked in). */
.hero-image {
  position: absolute;
  top: 0;
  left: 38%;
  right: -4%;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Info bar (4 cells) */
.hero-info-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-light);
  z-index: 3;
}
.hero-info-cell {
  padding: 14px 24px;
  border-right: 1px solid var(--border-light);
}
.hero-info-cell:last-child { border-right: none; }
.hero-info-val-large {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--black);
  line-height: 1;
}
.hero-info-val-bold {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black);
}
.hero-info-val-muted {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-light-secondary);
}

/* Bottom-left description */
.hero-desc-block {
  z-index: 3;
  max-width: 340px;
}
.hero-double-slash {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--orange-on-light);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
/* Promoted from 11px fine-print to a readable lede */
.hero-desc-text {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-on-light-primary);
  line-height: 1.5;
  margin: 0;
}

/* ---- Hero CTA cluster (was missing — the hero had no in-view action) ---- */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.hero-actions__primary {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 14px 15px 14px 24px;
  border-radius: 12px;
  /* dimensional orange — pops off the flat hero */
  background: radial-gradient(circle at 50% 18%, #FF6A1F 0%, var(--orange) 68%, #D14908 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 -1px 2px rgba(0, 0, 0, 0.20) inset,
    0 14px 30px -12px rgba(232, 84, 10, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.14);
  transition:
    transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.hero-actions__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), background 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.hero-actions__primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -1px 2px rgba(0, 0, 0, 0.2) inset,
    0 22px 44px -12px rgba(232, 84, 10, 0.75),
    0 3px 8px rgba(0, 0, 0, 0.16);
}
.hero-actions__primary:hover .hero-actions__arrow {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.26);
}
.hero-actions__primary:active { transform: translateY(0) scale(0.98); }
.hero-actions__primary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.hero-actions__secondary {
  position: relative;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-on-light-primary);
  padding: 6px 1px;
  transition: color 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.hero-actions__secondary::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
}
.hero-actions__secondary:hover { color: var(--orange-on-light); }
.hero-actions__secondary:hover::after { transform: scaleX(1); }
.hero-actions__secondary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* price-from eyebrow */
.hero-price-from {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-on-light-muted);
  margin-bottom: 6px;
}

/* hero entrance: CTA + price eyebrow rise in on load */
@media (prefers-reduced-motion: no-preference) {
  .hero-actions,
  .hero-price-from {
    opacity: 0;
    animation: heroActionsRise 0.7s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
  .hero-actions { animation-delay: 0.5s; }
  .hero-price-from { animation-delay: 0.4s; }
}
@keyframes heroActionsRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* live availability dot on the booking cell */
.hero-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 9px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  background: radial-gradient(circle at 40% 35%, #34D17F 0%, #1AB967 70%);
  box-shadow: 0 0 0 0 rgba(26, 185, 103, 0.5);
  animation: heroLivePulse 2.6s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}
@keyframes heroLivePulse {
  0%   { box-shadow: 0 0 0 0  rgba(26, 185, 103, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(26, 185, 103, 0); }
  100% { box-shadow: 0 0 0 0  rgba(26, 185, 103, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-live-dot { animation: none !important; }
}

/* Bottom-right price block */
.hero-price-block {
  position: absolute;
  bottom: 200px;
  right: 60px;
  z-index: 3;
  text-align: right;
}
.hero-price-large {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 52px);
  color: var(--black);
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero-price-cur {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-on-light-muted);
  margin-left: 6px;
  vertical-align: top;
  position: relative;
  top: 8px;
}
.hero-type-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.hero-type-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-light-secondary);
}
/* .hero-cta-bar moved to components.css (used across home + inner pages) */

/* ============================================================
   STATS section (§3-B)
   ============================================================ */

.stats-section {
  background: var(--dark-bg);
  padding: 56px 40px 0;
  color: white;
}

.stats-section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.stats-tag {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-on-dark-secondary);
  line-height: 1.6;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Rounded dimensional cards (was a flush hairline grid — read as too
   square/flat). Each card is its own elevated surface with a hover lift. */
.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-dark);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 20px 44px -30px rgba(0, 0, 0, 0.75);
  --spot-size: 320px;
  transition:
    transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    border-color 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 84, 10, 0.4);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 26px 52px -28px rgba(0, 0, 0, 0.8),
    0 14px 30px -16px rgba(232, 84, 10, 0.3);
}

.stat-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 18px 4px;
}
.stat-card-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: white;
}
.stat-card-denom {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-on-dark-secondary);
}
.stat-card-desc {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark-secondary);
  padding: 0 18px 14px;
  margin: 0;
}

.stat-card-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
}

/* Card 1 — orange fill with diagonal stripe texture */
.stat-card.is-orange .stat-card-body {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent, transparent 4px,
      rgba(0, 0, 0, 0.07) 4px, rgba(0, 0, 0, 0.07) 5px
    ),
    var(--orange);
}

.stat-number {
  font-family: var(--font-ui);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: white;
}
.stat-number sup {
  font-size: 0.42em;
  font-weight: 500;
  vertical-align: top;
  margin-top: 10px;
  display: inline-block;
}

.stat-card-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.10);
  position: relative;
}
.stat-card-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--orange);
}


/* ============================================================
   SPLIT FEATURE section (§3-D)
   ============================================================ */

/* Sticky-stack carousel: each split pins at top: 0 as the user scrolls,
   the next one swings up underneath. Vanilla port of the GSAP
   story-scroll reference — each section rotates from 30° → 0° around
   its bottom-left corner as it enters the viewport. */
.splits-stack {
  position: relative;
  overflow-x: hidden;
  /* Natural height ≈ 3 × 100vh from the sticky children */
}

.split-section {
  min-height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

/* Inner wrapper holds the grid layout AND the scroll-driven rotation.
   Splitting the responsibilities lets the section keep `position: sticky`
   (which is required for the stacking carousel) while the inner element
   gets a clean `animation-timeline: view()` that Chrome can compute
   correctly. */
.split-section__inner {
  display: grid;
  grid-template-columns: 56fr 44fr;
  min-height: 100vh;
  background: var(--dark-bg);
  border-radius: 40px 40px 0 0;
  /* Pivot from bottom-left, matching the GSAP story-scroll reference. */
  transform-origin: 0% 100%;
  /* Rotation is driven by js/splits-rotate.js which sets --roll on each
     element based on scroll progress (entry phase). Default 0deg so
     no-JS users see static panels in their final position. */
  transform: rotate(var(--roll, 0deg));
  will-change: transform;
}

/* Stacking order so later sections sit above earlier ones during the
   sticky hold (prevents Z-fighting when two sections briefly overlap). */
#split-1 { z-index: 1; }
#split-2 { z-index: 2; }
#split-3 { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .split-section__inner {
    transform: none;
  }
}

.split-left {
  position: relative;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(80, 40, 20, 0.25) 0%, transparent 55%),
    var(--dark-bg);
}
.split-left > .btn-tag { align-self: flex-start; }
.split-helper-text {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.55 white on the dark panel ≈ 6:1 — AA-compliant for this small,
     tracked microcopy (the 0.40 token falls short at ~3.8:1). */
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  max-width: 240px;
  margin: 0;
}
.split-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 0;
}
.split-image-mock {
  max-width: 92%;
  max-height: 55vh;
  aspect-ratio: 5/4;
  width: 100%;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(232, 84, 10, 0.18), transparent 70%),
    linear-gradient(160deg, #2a2a2c 0%, #0c0c0c 100%);
  border-radius: 42px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.6),
    0 12px 30px -10px rgba(232, 84, 10, 0.20);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.split-image-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  background: #0a0a0a;
}
.split-image-bar span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.split-image-bar span:nth-child(1) { background: #F66160; }
.split-image-bar span:nth-child(2) { background: #F8BD4F; }
.split-image-bar span:nth-child(3) { background: #56C246; }
.split-image-content {
  flex: 1;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.split-image-content h4 {
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.6vw, 22px);
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 16ch;
}
.split-image-content h4 em { font-style: italic; color: var(--orange); }
.split-image-content small {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   SPLIT MOCK — VARIANT A: Code editor (Split 1, Hand-coded)
   ============================================================ */
.split-image-mock--code {
  background:
    radial-gradient(80% 60% at 10% 0%, rgba(232, 84, 10, 0.10), transparent 65%),
    linear-gradient(168deg, #1c1410 0%, #0a0807 100%);
  border: 1px solid rgba(232, 84, 10, 0.16);
  box-shadow:
    0 30px 60px -22px rgba(0, 0, 0, 0.65),
    0 14px 34px -14px rgba(232, 84, 10, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* Skip rendering + animation work when off-screen. Cuts main-thread
     style/layout cost by an order of magnitude during page load. */
  content-visibility: auto;
  contain-intrinsic-size: 400px 380px;
}
.mock-code__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 14px 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mock-code__tab {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  padding: 8px 14px 9px;
  border-radius: 6px 6px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
}
.mock-code__tab.is-active {
  color: rgba(255, 230, 200, 0.92);
  background: rgba(232, 84, 10, 0.08);
  border-color: rgba(232, 84, 10, 0.22);
}
.mock-code__live {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 4px;
}
.mock-code__live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #56C246;
  box-shadow: 0 0 0 0 rgba(86, 194, 70, 0.5);
  animation: mock-live-ring 2.2s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}
@keyframes mock-live-ring {
  0%   { box-shadow: 0 0 0 0  rgba(86, 194, 70, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(86, 194, 70, 0); }
  100% { box-shadow: 0 0 0 0  rgba(86, 194, 70, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .mock-code__live-dot { animation: none; }
}
@keyframes mock-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
.mock-code__body {
  margin: 0;
  padding: 18px 22px 22px;
  font-family: 'Courier New', ui-monospace, Menlo, monospace;
  font-size: clamp(11px, 0.92vw, 13px);
  line-height: 1.85;
  color: rgba(255, 230, 200, 0.92);
  overflow: hidden;
  letter-spacing: 0.01em;
}
.mock-code__row {
  display: flex;
  align-items: baseline;
  white-space: pre;
  gap: 14px;
}
.mock-code__ln {
  display: inline-block;
  width: 22px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.18);
  text-align: right;
  user-select: none;
}
.mock-code__type {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: mock-type-reveal 9s cubic-bezier(0.32, 0.72, 0, 1) infinite;
  animation-delay: calc(var(--idx) * 0.85s);
}
@keyframes mock-type-reveal {
  0%   { clip-path: inset(0 100% 0 0); }
  10%  { clip-path: inset(0 0 0 0); }
  88%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .mock-code__type { clip-path: none; animation: none; }
}
.c-mute { color: rgba(255, 255, 255, 0.32); font-style: italic; }
.c-tag  { color: #ff8a4a; }
.c-attr { color: #ffd089; }
.c-op   { color: rgba(255, 255, 255, 0.50); }
.c-str  { color: #ffb070; }
.c-text { color: rgba(255, 245, 230, 0.96); }
.mock-code__caret {
  display: inline-block;
  width: 7px; height: 1.05em;
  margin-left: 4px;
  background: var(--orange);
  vertical-align: text-bottom;
  animation: mock-caret 1.05s steps(1) infinite;
}
@keyframes mock-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ============================================================
   SPLIT MOCK — VARIANT B: Chat conversation (Split 2, Founder-led)
   ============================================================ */
.split-image-mock--chat {
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(232, 84, 10, 0.08), transparent 65%),
    linear-gradient(170deg, #1a1614 0%, #0c0a09 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 30px 60px -22px rgba(0, 0, 0, 0.65),
    0 14px 34px -14px rgba(232, 84, 10, 0.18);
  padding: 0;
  content-visibility: auto;
  contain-intrinsic-size: 400px 380px;
}
.mock-chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.mock-chat__avatar {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0;
  flex-shrink: 0;
}
.mock-chat__id { display: flex; flex-direction: column; gap: 2px; }
.mock-chat__name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.mock-chat__status {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mock-chat__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #56C246;
  box-shadow: 0 0 8px rgba(86, 194, 70, 0.55);
}
.mock-chat__body {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-chat__bubble {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.45;
  padding: 9px 13px;
  border-radius: 14px;
  max-width: 88%;
}
.mock-chat__bubble--in {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.85);
  border-bottom-left-radius: 4px;
  transform-origin: 0 100%;
}
.mock-chat__bubble--out {
  align-self: flex-end;
  background: var(--orange);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 12px -4px rgba(232, 84, 10, 0.45);
  transform-origin: 100% 100%;
}

/* Sequential reveal loop. 9s total cycle, each item lingers visible. */
.mock-chat__bubble,
.mock-chat__typing {
  animation: mock-chat-loop 9s cubic-bezier(0.32, 0.72, 0, 1) infinite both;
  opacity: 0;
}
.mock-chat__body > .mock-chat__bubble:nth-child(1) { animation-delay: 0.4s; }
.mock-chat__body > .mock-chat__bubble:nth-child(2) { animation-delay: 1.4s; }
.mock-chat__body > .mock-chat__bubble:nth-child(3) { animation-delay: 2.3s; }
.mock-chat__body > .mock-chat__typing                { animation-delay: 3.1s; }
@keyframes mock-chat-loop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
  6%   { opacity: 1; transform: translateY(0)   scale(1);    }
  82%  { opacity: 1; transform: translateY(0)   scale(1);    }
  92%  { opacity: 0; transform: translateY(-6px) scale(0.97); }
  100% { opacity: 0; transform: translateY(10px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .mock-chat__bubble, .mock-chat__typing {
    opacity: 1;
    animation: none;
    transform: none;
  }
}
.mock-chat__typing {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.mock-chat__typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  animation: mock-typing 1.2s ease-in-out infinite;
}
.mock-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.mock-chat__typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes mock-typing {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.45; }
  30%           { transform: translateY(-3px); opacity: 1;    }
}

/* ============================================================
   SPLIT MOCK — shared bits (rule, corner stamp) reused by --turn variant
   ============================================================ */
.mock-type__rule {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 48px;
  height: 1px;
  background: var(--orange);
}
.mock-type__corner {
  position: absolute;
  bottom: 16px;
  right: 22px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.mock-type__corner-sep { color: var(--orange); margin: 0 2px; }

/* ============================================================
   SPLIT MOCK — VARIANT D: Turnaround / speed (Split 3, replaces bilingual)
   ============================================================ */
.split-image-mock--turn {
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 400px 380px;
  background:
    radial-gradient(60% 60% at 75% 35%, rgba(232, 84, 10, 0.16), transparent 65%),
    radial-gradient(70% 60% at 20% 80%, rgba(80, 40, 20, 0.36), transparent 60%),
    linear-gradient(165deg, #1d1612 0%, #0a0807 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 30px 60px -22px rgba(0, 0, 0, 0.65),
    0 14px 34px -14px rgba(232, 84, 10, 0.18);
  display: block;
  padding: 0;
  overflow: hidden;
}
.mock-turn__from,
.mock-turn__to,
.mock-turn__unit {
  position: absolute;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
  text-transform: lowercase;
}
.mock-turn__from {
  top: 22%;
  left: 7%;
  font-size: clamp(18px, 2.4vw, 28px);
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}
.mock-turn__num {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -28%);
  font-family: var(--font-display);
  font-size: clamp(96px, 14vw, 168px);
  line-height: 0.84;
  letter-spacing: -0.05em;
  color: var(--orange);
  text-shadow: 0 8px 28px rgba(232, 84, 10, 0.32);
  pointer-events: none;
  user-select: none;
}
.mock-turn__unit {
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(24px, 3vw, 36px);
  color: rgba(255, 245, 235, 0.95);
  font-style: italic;
}
.mock-turn__to {
  bottom: 16%;
  right: 7%;
  font-size: clamp(22px, 3vw, 36px);
  color: rgba(255, 245, 235, 0.95);
}
.mock-turn__week {
  position: absolute;
  top: 16px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mock-turn__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
/* Sequential fill — each day lights up in turn, then resets. 6s loop. */
.mock-turn__dot--seq {
  animation: mock-turn-seq 6s cubic-bezier(0.32, 0.72, 0, 1) infinite both;
  animation-delay: calc(var(--seq) * 0.55s);
}
@keyframes mock-turn-seq {
  0%, 6%   { background: rgba(255, 255, 255, 0.18); transform: scale(1); }
  10%      { background: var(--orange);              transform: scale(1.25); }
  16%, 80% { background: var(--orange);              transform: scale(1); }
  90%      { background: rgba(255, 255, 255, 0.18); }
  100%     { background: rgba(255, 255, 255, 0.18); }
}
/* Last dot — fires after the 4 days, pulses with a ring glow ("LIVE"). */
.mock-turn__dot--last {
  background: rgba(255, 255, 255, 0.18);
  animation: mock-turn-live 6s cubic-bezier(0.32, 0.72, 0, 1) infinite both;
  animation-delay: 2.4s;
}
@keyframes mock-turn-live {
  0%, 6%   { background: rgba(255, 255, 255, 0.18); box-shadow: 0 0 0 0 rgba(232, 84, 10, 0); transform: scale(1); }
  10%      { background: var(--orange);              transform: scale(1.4); box-shadow: 0 0 0 0 rgba(232, 84, 10, 0.6); }
  35%      { box-shadow: 0 0 0 11px rgba(232, 84, 10, 0); }
  16%, 80% { background: var(--orange);              transform: scale(1); }
  90%      { background: rgba(255, 255, 255, 0.18); }
}

/* "04" number gets a subtle pop when the LIVE dot fires */
.mock-turn__num {
  animation: mock-turn-num 6s cubic-bezier(0.32, 0.72, 0, 1) infinite both;
  animation-delay: 2.4s;
}
@keyframes mock-turn-num {
  0%, 6%   { transform: translate(-50%, -28%) scale(1); text-shadow: 0 8px 28px rgba(232, 84, 10, 0.20); }
  12%      { transform: translate(-50%, -30%) scale(1.06); text-shadow: 0 10px 36px rgba(232, 84, 10, 0.45); }
  22%, 80% { transform: translate(-50%, -28%) scale(1); text-shadow: 0 8px 28px rgba(232, 84, 10, 0.32); }
  100%     { transform: translate(-50%, -28%) scale(1); text-shadow: 0 8px 28px rgba(232, 84, 10, 0.20); }
}

@media (prefers-reduced-motion: reduce) {
  .mock-turn__dot--seq, .mock-turn__dot--last { animation: none; background: var(--orange); }
  .mock-turn__num { animation: none; }
}

/* The variants override the base mock chrome — kill the default
   header/content baked into .split-image-mock for these. */
.split-image-mock--code,
.split-image-mock--chat,
.split-image-mock--type,
.split-image-mock--turn {
  flex-direction: column;
}

.split-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-left: 1px solid var(--border-dark);
  border-right: 1px solid var(--border-dark);
}
.split-diamond {
  width: 8px; height: 8px;
  transform: rotate(45deg);
}
.split-diamond.active   { background: var(--orange); }
.split-diamond.inactive { background: rgba(255, 255, 255, 0.20); }

.split-right {
  position: relative;
  padding: 56px 56px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 78% 50%, rgba(60, 30, 10, 0.24) 0%, transparent 58%),
    var(--dark-bg);
}
/* Ghost index numeral — fills the empty right field with depth and
   echoes the 01/03 counter as an oversized editorial watermark. It is a
   real aria-hidden element (not ::before content) so screen readers don't
   double-announce the index alongside the live counter. --wm is driven by
   splits-rotate.js for a scroll-scrubbed parallax drift. */
.split-watermark {
  position: absolute;
  top: 50%;
  right: -1.5vw;
  margin: 0;
  transform: translateY(calc(-50% + var(--wm, 0px)));
  will-change: transform;
  font-family: var(--font-display);
  font-size: clamp(220px, 28vw, 440px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.026);
  pointer-events: none;
  user-select: none;
}
/* Keep real content above the watermark. */
.split-right > * { position: relative; z-index: 1; }
.split-right > .split-watermark { z-index: 0; }
.split-right > .split-counter { margin-top: auto; }
.split-plus-icon {
  width: 28px; height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  align-self: flex-end;
}
.split-headline {
  font-family: var(--font-ui);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 32px 0;
}
.split-orange { color: var(--orange); }
.split-white  { color: white; }
.split-body-text {
  font-family: var(--font-body);
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* AA contrast on dark — see .split-helper-text note. */
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  max-width: 38ch;
  text-align: left;
  align-self: flex-start;
  margin: 0;
}
/* Short orange kicker rule anchors the supporting copy to the left
   edge, matching the headline alignment. */
.split-body-text::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  margin-bottom: 18px;
}
.split-outcome {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.1vw, 13px);
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
  max-width: 42ch;
  text-align: left;
  align-self: flex-start;
  margin: 14px 0 0;
}
.split-counter {
  display: flex;
  align-items: baseline;
  gap: 3px;
  align-self: flex-end;
}
.split-counter-num {
  font-family: var(--font-display);
  font-size: 28px;
  color: white;
}
.split-counter-denom {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-on-dark-muted);
  letter-spacing: 0.05em;
}

/* ============================================================
   SPLIT — premium choreographed entrance (desktop)
   The panel introduces itself as a diagonal cascade once it has
   rolled upright into view. js/splits-rotate.js adds .is-presented
   to the .split-section at the moment the drum-roll settles (same
   scroll progress that drives the rotation), so the cascade is
   actually witnessed instead of firing while the panel is still
   hidden behind the previous one. Left column leads (helper, mock,
   tag); right column follows (headline wipe, body, outcome, counter).
   Hidden state is gated by .splits-ready so no-JS users see content.
   ============================================================ */
@media (min-width: 769px) {
  /* Columns are always present — they host the choreography, not fade as blocks. */
  .split-left.reveal,
  .split-right.reveal {
    opacity: 1;
    transform: none;
  }

  .splits-ready .split-helper-text,
  .splits-ready .btn-tag,
  .splits-ready .split-body-text,
  .splits-ready .split-outcome,
  .splits-ready .split-counter {
    opacity: 0;
    transform: translateY(36px);
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }
  .splits-ready .split-image-mock {
    opacity: 0;
    transform: scale(0.9) translateY(52px);
    transition:
      opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }
  /* Headline gets a vertical mask-wipe on top of the rise — the centerpiece. */
  .splits-ready .split-headline {
    opacity: 0;
    transform: translateY(52px);
    clip-path: inset(0 0 100% 0);
    transition:
      opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
      clip-path 0.95s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, clip-path;
  }

  /* Diagonal cascade — left column leads, right follows, finishing on the counter. */
  .split-section.is-presented .split-helper-text { opacity: 1; transform: none; transition-delay: 0.05s; }
  .split-section.is-presented .split-image-mock  { opacity: 1; transform: scale(1) translateY(0); transition-delay: 0.12s; }
  .split-section.is-presented .split-headline    { opacity: 1; transform: none; clip-path: inset(0 0 -0.15em 0); transition-delay: 0.22s; }
  .split-section.is-presented .split-body-text   { opacity: 1; transform: none; transition-delay: 0.36s; }
  .split-section.is-presented .btn-tag           { opacity: 1; transform: none; transition-delay: 0.42s; }
  .split-section.is-presented .split-outcome     { opacity: 1; transform: none; transition-delay: 0.48s; }
  .split-section.is-presented .split-counter     { opacity: 1; transform: none; transition-delay: 0.58s; }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .splits-ready .split-helper-text,
  .splits-ready .btn-tag,
  .splits-ready .split-headline,
  .splits-ready .split-body-text,
  .splits-ready .split-outcome,
  .splits-ready .split-counter,
  .splits-ready .split-image-mock {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ============================================================
   PROCESS section — uses the shared .work-card / .work-grid
   component (see css/components/slot-card.css). This file only
   defines the section wrapper (background, padding, section-top
   heading) — every card inside matches the work page slots for
   visual harmony across the site.
   ============================================================ */

.process {
  background: var(--dark-bg);
  padding: 96px 40px;
  color: white;
}

.process__top {
  max-width: 1280px;
  margin: 0 auto 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.process__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-on-dark-secondary);
}
.process-heading {
  font-family: var(--font-ui);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: white;
  max-width: 26ch;
  margin: 12px 0 0;
}
.process-heading em {
  font-style: italic;
  color: var(--orange);
}

@media (max-width: 900px) {
  .process { padding: 64px 24px; }
  .process__top { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   BENTO grid (§3-C)
   ============================================================ */

.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  background: transparent;
  padding: 0;
}
.bento-cell {
  background: linear-gradient(168deg, #1c1614 0%, #141110 100%);
  padding: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  border-radius: 18px;
  border: 1px solid var(--border-dark);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 22px 48px -30px rgba(0, 0, 0, 0.7);
}
.bento-cell-price:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 84, 10, 0.4);
}

/* ============================================================
   BENTO — section top (eyebrow + heading) + pricing cells
   ============================================================ */

#bento {
  background: var(--black);
  padding: 80px 40px 0;
}

.bento-section-top {
  max-width: 1280px;
  margin: 0 auto 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}

.bento-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--text-on-dark-secondary);
}

.bento-heading {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: white;
  margin: 0;
  max-width: 800px;
}
.bento-heading em {
  font-style: italic;
  color: var(--orange);
}

.bento-cell-price {
  text-decoration: none;
  color: inherit;
  gap: 8px;
  cursor: pointer;
  isolation: isolate;
  transition:
    background-color 320ms cubic-bezier(0.32, 0.72, 0, 1),
    transform        420ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow       420ms cubic-bezier(0.32, 0.72, 0, 1);
}

.bento-cell-price:hover,
.bento-cell-price:active,
.bento-cell-price:focus-visible {
  background: #1a1a1a;
  transform: translateY(-2px);
  box-shadow:
    0 18px 38px -22px rgba(0, 0, 0, 0.7),
    0 6px 18px -8px rgba(232, 84, 10, 0.25);
}
.bento-cell-price { -webkit-tap-highlight-color: transparent; }

/* Featured cell — Custom Build. Always-on orange-tinted edge + lift. */
.bento-cell-price.is-featured {
  background: linear-gradient(168deg, #1d1614 0%, #141110 100%);
  box-shadow:
    inset 0 0 0 1px rgba(232, 84, 10, 0.32),
    0 22px 44px -22px rgba(0, 0, 0, 0.7),
    0 10px 24px -8px rgba(232, 84, 10, 0.18);
  z-index: 1;
}
.bento-cell-price.is-featured:hover,
.bento-cell-price.is-featured:active,
.bento-cell-price.is-featured:focus-visible {
  background: linear-gradient(168deg, #221915 0%, #181311 100%);
  box-shadow:
    inset 0 0 0 1px rgba(232, 84, 10, 0.45),
    0 26px 52px -22px rgba(0, 0, 0, 0.75),
    0 14px 30px -8px rgba(232, 84, 10, 0.28);
}

/* "Most Popular" badge on featured cell */
.bento-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 5px 9px;
  border: 1px solid rgba(232, 84, 10, 0.45);
  border-radius: 999px;
  background: rgba(232, 84, 10, 0.06);
}

.bento-price-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}

.bento-price-amount {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  color: white;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-top: 6px;
}

.bento-price-unit {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.bento-price-desc {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-on-dark-secondary);
  line-height: 1.55;
  margin: 14px 0 0;
}

.bento-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.bento-tag {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.3;
  white-space: nowrap;
}
.bento-meta {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
}

.bento-price-arrow {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--orange);
  margin-top: auto;
  line-height: 1;
  align-self: flex-end;
  transition: transform 200ms;
}

.bento-cell-price:hover .bento-price-arrow,
.bento-cell-price:active .bento-price-arrow,
.bento-cell-price:focus-visible .bento-price-arrow {
  transform: translateX(4px);
}

/* ============================================================
   BENTO — wide design-services cell. Editorial typographic moment.
   ============================================================ */
.bento-cell-wide {
  grid-column: span 2;
  overflow: hidden;
  padding: 32px 34px;
  gap: 14px;
}
.bento-wide-motif {
  position: absolute;
  right: -28px;
  bottom: -78px;
  font-family: var(--font-display);
  font-size: 360px;
  line-height: 0.78;
  color: var(--orange);
  opacity: 0.08;
  letter-spacing: -0.08em;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.bento-cell-wide > * { position: relative; z-index: 1; }
.bento-wide-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.bento-wide-meta {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.bento-wide-headline {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 72px);
  color: white;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 6px 0 4px;
  font-weight: 400;
}
.bento-wide-headline em {
  font-style: italic;
  color: var(--orange);
}
.bento-tags--wide { margin-top: auto; }
.bento-wide-cta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(232, 84, 10, 0.40);
  border-radius: 999px;
  background: rgba(232, 84, 10, 0.06);
  transition:
    background 220ms cubic-bezier(0.32, 0.72, 0, 1),
    transform  220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.bento-cell-wide:hover .bento-wide-cta,
.bento-cell-wide:focus-visible .bento-wide-cta {
  background: rgba(232, 84, 10, 0.14);
  transform: translateX(3px);
}

.bento-price-arrow--text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .bento-cell-wide { grid-column: span 1; }
}

/* ============================================================
   MOBILE RESPONSIVE (per spec §5)
   ============================================================ */

@media (max-width: 1024px) {
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .split-section__inner { grid-template-columns: 1fr; }

  /* Section-flow markers surface inline at top of each panel on mobile
     instead of vanishing — preserves the "01/02/03" cadence indicator. */
  .split-divider {
    display: flex;
    flex-direction: row;
    position: static;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 18px 0 0;
    order: -1;
  }
}

@media (max-width: 768px) {
  /* Mobile hero is a normal flow column — NOT absolute-on-100vh.
     The old layout anchored the title from the top (top:25%) and the desc
     from the bottom (bottom:250px); on short / in-app-browser viewports those
     two collided on load until a scroll recomputed layout. Stacking the blocks
     in DOM order makes overlap impossible at any viewport height, and 100dvh
     avoids the iOS URL-bar viewport jump. */
  .hero-section {
    height: auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 104px 24px 0;
  }
  .hero-lede,
  .hero-title-block,
  .hero-desc-block,
  .hero-price-block,
  .hero-info-bar,
  .hero-cta-bar {
    position: static;
    inset: auto;
    transform: none;
    max-width: none;
    width: auto;
  }
  /* lede is just a passthrough container on mobile — let the children
     flow with their own margins (hero-desc-block margin-top below). */
  .hero-lede { display: block; gap: 0; }
  .hero-title { font-size: clamp(56px, 16vw, 88px); }
  .hero-image { display: none; }
  .hero-desc-block { margin-top: 30px; }
  .hero-price-block { margin-top: 22px; text-align: left; }
  /* info bar + reserve band: full-bleed, pinned to the bottom of the hero */
  .hero-info-bar {
    margin: auto -24px 0;
    grid-template-columns: 1fr 1fr;
  }
  .hero-cta-bar { margin: 0 -24px; }
  .hero-info-cell:nth-child(2) { border-right: none; }
  .hero-info-cell:nth-child(1),
  .hero-info-cell:nth-child(2) { border-bottom: 1px solid var(--border-light); }

  .stats-section { padding: 40px 20px 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .bento-grid { grid-template-columns: 1fr; }

  /* Disable sticky drum-roll on mobile — 3 × 100vh of pinned scroll
     is brutal on a phone. Let splits flow naturally. */
  .split-section {
    position: static;
    min-height: auto;
  }
  .split-section__inner {
    min-height: auto;
    animation: none;
    animation-timeline: auto;

    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .split-section.is-visible .split-section__inner {
    opacity: 1;
    transform: translateY(0);
  }

  /* Parent section handles entry — children skip their reveal */
  .split-left.reveal,
  .split-right.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .split-left, .split-right { padding: 32px 24px; }
  .split-headline { font-size: clamp(28px, 7vw, 44px); }

  /* Process now uses .work-card layout — mobile rules live in slot-card.css */
  .process { padding: 56px 20px; }

  /* btn-tag (hero "Hand-coded / Process / Speed" chips): 35px → 44px */
  .btn-tag {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .hero-info-bar { grid-template-columns: 1fr 1fr; }
  /* Hero positioning now handled by the flow layout in the 768px query. */
  .hero-desc-text { font-size: 14px; line-height: 1.5; }
  .hero-price-large { font-size: 28px; }
}


/* ============================================================
   DISCIPLINES — editorial asymmetric (light)
   ============================================================ */

.disciplines {
  background: var(--off-white);
  padding: 100px 40px;
  border-top: 1px solid var(--border-light);
}

/* ============================================================
   DISCIPLINES — "falls down" entry choreography.
   When the section enters the viewport (right after the process
   carousel completes), it drops in from above with a gravity-like
   ease — slow start, accelerating middle, soft landing. Reads as
   the next slide dropping into place.
   ============================================================ */
.disciplines.js-ready {
  opacity: 0;
  transform: translateY(-80px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.55, 0.05, 0.30, 1);
  will-change: transform, opacity;
}
.disciplines.is-entering {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .disciplines.js-ready {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.disciplines__layout {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 64px;
  align-items: start;
}

.disciplines__intro {
  position: sticky;
  top: 120px;
}
.disciplines__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--text-on-light-primary);
}
.disciplines__heading em {
  font-style: italic;
  color: var(--orange);
}

.disciplines__list {
  display: flex;
  flex-direction: column;
}

/* Editorial rows — hairline rules between, no card boxes */
.discipline {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  padding: 40px 18px;
  border-top: 1px solid var(--border-light);
  border-radius: 18px;
  --spot-size: 460px;
  --spot-color: rgba(232, 84, 10, 0.09);
  transition: background 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
.discipline:hover {
  background: linear-gradient(120deg, rgba(232, 84, 10, 0.045) 0%, transparent 66%);
}
.discipline:first-child { padding-top: 0; border-top: none; }
.discipline:last-child { padding-bottom: 0; }

.discipline__marker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 88px;
  flex-shrink: 0;
}
.discipline__num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--orange-on-light);
}
.discipline__illus {
  width: 76px;
  height: 76px;
  color: var(--orange);
  transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
  transform-origin: center;
}
.discipline:hover .discipline__illus {
  transform: scale(1.08) rotate(-3deg);
}

.discipline__content { min-width: 0; }
.discipline__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--text-on-light-primary);
}
.discipline__body {
  margin: 0 0 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-on-light-secondary);
  max-width: 60ch;
}
.discipline__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.discipline__tag {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5A5A5A;
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.035);
}

/* ============================================================
   DISCIPLINE — premium hover treatment.
   Whole row tints orange-warm, the /NN number scales, the title
   slides right + tightens its tracking, and the tags lift in a
   staggered cascade. Reads as a "this row is alive" beat without
   adding a permanent boxed treatment that would break the
   editorial rhythm.
   ============================================================ */
.discipline__marker,
.discipline__content {
  position: relative;
  z-index: 1;
}
.discipline__num {
  display: inline-block;
  transform-origin: left center;
  transition:
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
    color 280ms;
  will-change: transform;
}
.discipline__title {
  display: inline-block;
  transition:
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 480ms cubic-bezier(0.16, 1, 0.3, 1),
    color 280ms;
  will-change: transform;
}
.discipline__tag {
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    color 280ms,
    border-color 280ms,
    background 280ms;
  will-change: transform;
}

.discipline:hover .discipline__num {
  transform: scale(1.10);
  color: var(--orange);
}
.discipline:hover .discipline__title {
  transform: translateX(10px);
  letter-spacing: -0.02em;
}
.discipline:hover .discipline__tag {
  transform: translateY(-2px);
  border-color: rgba(232, 84, 10, 0.45);
  color: var(--orange-on-light);
  background: rgba(232, 84, 10, 0.06);
}
.discipline:hover .discipline__tag:nth-of-type(2) { transition-delay: 50ms; }
.discipline:hover .discipline__tag:nth-of-type(3) { transition-delay: 100ms; }
.discipline:hover .discipline__tag:nth-of-type(4) { transition-delay: 150ms; }

/* Dark theme: tag treatment shifts so hover colors read well against
   the dark surface. No row-level background tint. */
:root.dark .discipline:hover .discipline__tag {
  border-color: rgba(232, 84, 10, 0.45);
  color: var(--orange);
  background: rgba(232, 84, 10, 0.09);
}

@media (prefers-reduced-motion: reduce) {
  .discipline__num,
  .discipline__title,
  .discipline__tag { transition: none !important; }
  .discipline:hover .discipline__num,
  .discipline:hover .discipline__title,
  .discipline:hover .discipline__tag { transform: none !important; }
}

/* Per-variant illustration micro-motion (preserved) */
.d1-ripple-mid { transform-origin: 34px 44px; animation: d1-pulse-a 2.8s ease-in-out infinite; }
.d1-ripple-out { transform-origin: 34px 44px; animation: d1-pulse-b 2.8s ease-in-out infinite; }
@keyframes d1-pulse-a {
  0%, 100% { transform: scale(1);     opacity: 0.55; }
  50%      { transform: scale(1.18);  opacity: 0.18; }
}
@keyframes d1-pulse-b {
  0%, 100% { transform: scale(1);     opacity: 0.30; }
  50%      { transform: scale(1.22);  opacity: 0.05; }
}

.d2-panel--back  { opacity: 0.30; transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1); }
.d2-panel--mid   { opacity: 0.55; transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1); }
.d2-panel--front { fill: var(--off-white); }
:root.dark .d2-panel--front { fill: var(--dark-bg); }
.discipline--2:hover .d2-panel--back { transform: translate(-2px, -2px); }
.discipline--2:hover .d2-panel--mid  { transform: translate(-1px, -1px); }

.d3-arc-fg {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: d3-fill 1.4s cubic-bezier(0.32, 0.72, 0, 1) 0.2s both;
}
.d3-needle, .d3-needle-pin {
  transform-origin: 40px 56px;
  animation: d3-needle 1.4s cubic-bezier(0.32, 0.72, 0, 1) 0.2s both;
}
@keyframes d3-fill   { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes d3-needle { from { transform: rotate(-90deg); } to { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  .d1-ripple-mid, .d1-ripple-out, .d3-arc-fg, .d3-needle, .d3-needle-pin {
    animation: none;
  }
  .d3-arc-fg    { stroke-dashoffset: 0; }
  .d3-needle, .d3-needle-pin { transform: rotate(0); }
  .discipline__illus { transition: none; }
}

/* Responsive */
@media (max-width: 900px) {
  .disciplines { padding: 64px 24px; }
  .disciplines__layout { grid-template-columns: 1fr; gap: 40px; }
  .disciplines__intro { position: static; }
}
@media (max-width: 600px) {
  .discipline { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
  .discipline__marker { flex-direction: row; align-items: center; width: auto; }
}

/* Dark mode override */
:root.dark .disciplines {
  background: var(--dark-bg);
  border-top-color: var(--border-dark);
}
:root.dark .disciplines__heading { color: var(--text-on-dark-primary); }
:root.dark .discipline { border-top-color: var(--border-dark); }
:root.dark .discipline__title { color: var(--text-on-dark-primary); }
:root.dark .discipline__body { color: rgba(232, 220, 203, 0.65); }
:root.dark .discipline__tag {
  color: rgba(232, 220, 203, 0.70);
  border-color: var(--border-dark);
  background: rgba(232, 220, 203, 0.04);
}