/* morfis-new-era · split stage: two grounds held in tension, resolved at the peak.
   Theme tokens + page classes only. Engine selectors are never restyled here. */

/* the page never scrolls sideways, and pinch-zoom is off: the experience is
   built on fixed chrome + sticky stages, which zoom turns into chaos.
   overflow-x: clip (not hidden) keeps position: sticky working. */
html { touch-action: pan-y; }
html, body { overflow-x: clip; }

:root {
  --sc-canvas:     #0B0A08;
  --sc-surface:    #16120D;
  --sc-ink:        #F2EDE4;
  --sc-ink-soft:   #A39A8B;
  --sc-accent:     #E8A33D;
  --sc-accent-ink: #14100A;
  --sc-font-display: "Clash Display", "Satoshi", system-ui, sans-serif;
  --sc-font-text:    "Satoshi", system-ui, sans-serif;

  /* the old era's cold family (left ground) */
  --old-ground: #0D1014;
  --old-ink:    #C9CED6;
  --old-soft:   #79828E;

  /* the new era's bright family (right ground): dawn, ivory, gold */
  --new-ground: #EFE7DA;
  --new-ink:    #1D150A;
  --new-soft:   #6B5A42;
  --accent-deep: #8F5E12;
}

/* ---------- chrome ---------- */

.mark {
  position: fixed; top: clamp(14px, 2.4vw, 28px); left: clamp(16px, 3vw, 40px);
  z-index: 60;
}
.mark img { width: clamp(120px, 12vw, 172px); height: auto; display: block; opacity: .92; }
.mark a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 4px; }

/* the pulse strips live INSIDE each stage, on the seam itself */
.pulse-strip {
  position: absolute; pointer-events: none; z-index: 6;
  left: calc(50% - 70px); top: 0; bottom: 0; width: 140px; height: 100%;
}
.pulse-strip--full { inset: 0; left: 0; width: 100%; height: 100%; }
@media (max-width: 719px) {
  .pulse-strip {
    left: 0; right: 0; width: 100%;
    top: calc(50% - 70px); bottom: auto; height: 140px;
  }
  .pulse-strip--full { inset: 0; top: 0; height: 100%; }
}

/* the side labels live inside the hero stage and leave with it */
.divider-labels { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.divider-labels span {
  position: absolute;
  font: 500 .68rem/1 var(--sc-font-text);
  letter-spacing: .22em; text-transform: uppercase;
}
.divider-labels__old { top: clamp(18px, 3vh, 34px); right: calc(50% + 1.6rem); color: var(--old-soft); }
.divider-labels__new { top: clamp(18px, 3vh, 34px); left: calc(50% + 1.6rem); color: var(--accent-deep); }

/* ---------- the halves ---------- */

.halves { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.half { position: relative; overflow: hidden; }
.half--old { background: var(--old-ground); color: var(--old-ink); }
.half--new { background: var(--new-ground); color: var(--new-ink); }
/* over bright imagery the scrim washes toward ivory and the type stays ink */
.half--new .half__scrim {
  background: linear-gradient(to top, rgba(243,236,224,.92) 0%, rgba(243,236,224,.6) 30%, rgba(243,236,224,0) 58%);
}
.half--new .half__scrim--deep {
  background: linear-gradient(to top, rgba(243,236,224,.92) 0%, rgba(243,236,224,.6) 42%, rgba(243,236,224,0) 68%);
}

.half__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.half--old .half__img { filter: saturate(.55) contrast(.95); }

/* the machine side carries a faint precision grid: the digital tell */
.half__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background:
    repeating-linear-gradient(to right, rgba(143,94,18,.09) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, rgba(143,94,18,.07) 0 1px, transparent 1px 72px);
  mask-image: linear-gradient(to top, transparent 20%, #000 60%);
}

/* density only where the text sits: a bottom band per half, sibling of the copy */
.half__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,5,4,.86) 0%, rgba(6,5,4,.55) 30%, rgba(6,5,4,0) 58%);
}
.half--old .half__scrim {
  background: linear-gradient(to top, rgba(7,9,12,.88) 0%, rgba(7,9,12,.56) 30%, rgba(7,9,12,0) 58%);
}
.half__scrim--deep {
  background: linear-gradient(to top, rgba(6,5,4,.92) 0%, rgba(6,5,4,.7) 42%, rgba(6,5,4,.12) 72%);
}

.half__copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(2rem, 6vh, 4.5rem);
}
.half figure { position: absolute; inset: 0; margin: 0; }

/* ---------- act 1 · hero (unpinned: one full screen that scrolls away) ---------- */

.hero-stage {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh;
}

/* hero entrance: pure CSS, no IntersectionObserver — the copy is anchored to
   the bottom edge, which short viewports push below the engine's reveal line */
.hero-enter { animation: hero-in .8s var(--sc-ease-out) both .15s; }
.hero-enter--late { animation-delay: .35s; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-enter, .hero-enter--late { animation: none; }
}

.hero-h { text-wrap: balance; max-width: 12ch; }
.hero-h--old { color: var(--old-ink); }
.half--new .hero-h { color: var(--new-ink); }
.hero-sub {
  margin-top: 1rem; max-width: 34ch; color: var(--new-soft);
  text-wrap: pretty;
}

/* ---------- act 2 · the channel duels ---------- */

/* the channel name is the scene title: huge, centred, straddling the seam */
.duel-topscrim {
  position: absolute; left: 0; right: 50%; top: 0; height: 34%;
  background: linear-gradient(to bottom, rgba(6,5,4,.88) 0%, rgba(6,5,4,.52) 55%, rgba(6,5,4,0) 100%);
  pointer-events: none; z-index: 5;
}
.duel-titles { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.duel-title {
  position: absolute; left: 0; right: 0; top: clamp(3.2rem, 9vh, 6rem);
  margin: 0; text-align: center;
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(3rem, 7.5vw, 6.5rem); line-height: 1;
  letter-spacing: .01em; color: var(--sc-ink);
}
/* the name changes era at the seam: bone ink over the old half, dark ink over the new.
   grid-stacked (not absolute) so the parent keeps its natural height */
.duel-title { display: grid; }
.duel-title .dt { grid-area: 1 / 1; }
.duel-title .dt--old { color: var(--sc-ink); clip-path: inset(0 50% 0 0); }
.duel-title .dt--new { color: var(--new-ink); clip-path: inset(0 0 0 50%); }

/* the old way: one cold verdict per channel */
.duel-old {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(1.25rem, 4vw, 3.25rem) clamp(2.2rem, 8vh, 5rem);
}
.duel-verdict {
  position: absolute; left: clamp(1.25rem, 4vw, 3.25rem); right: clamp(1.25rem, 4vw, 3.25rem); bottom: clamp(2.2rem, 8vh, 5rem);
  margin: 0; color: var(--old-ink);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55;
  max-width: 30ch; text-wrap: pretty;
}
.duel-verdict__rule {
  display: block; width: 2.4rem; height: 1px;
  background: var(--old-soft); margin-bottom: .8rem; opacity: .8;
}

/* the engine's answer: an operations checklist that ticks in line by line */
.duel-ops {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(1.25rem, 4vw, 3.25rem) clamp(2.2rem, 8vh, 5rem);
}
.ops {
  position: absolute; left: clamp(1.25rem, 4vw, 3.25rem); right: clamp(1.25rem, 4vw, 3.25rem); bottom: clamp(2.2rem, 8vh, 5rem);
  margin: 0; padding: 0; list-style: none;
}
.ops li {
  position: relative; padding: .55rem 0 .55rem 1.5rem;
  color: var(--new-ink); font-weight: 500;
  font-size: clamp(1.02rem, 1.4vw, 1.28rem); line-height: 1.4;
  border-block-start: 1px solid rgba(143, 94, 18, .28);
}
.ops li::before {
  content: "▸"; position: absolute; left: 0; top: .5rem;
  color: var(--accent-deep); font-size: 1.05em;
}

/* era verdict stamps: rubber-stamped over each half, like an inspector passed */
.stamp {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%) rotate(-7deg);
  width: clamp(240px, 26vw, 430px); height: auto;
  pointer-events: none; z-index: 4;
}
.stamp--old { opacity: .92; }
.stamp--new { opacity: .95; transform: translate(-50%, -50%) rotate(6deg); }

/* which round you are in: four tab labels riding the seam's foot */
.duel-tabs {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(.9rem, 2.4vh, 1.6rem);
  display: flex; justify-content: center; gap: clamp(1.1rem, 3vw, 2.4rem);
  z-index: 8; pointer-events: none;
  padding: .55rem 1.1rem; border-radius: 999px;
  background: rgba(10, 9, 8, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(242, 237, 228, .08);
}
.duel-tab {
  position: relative; display: inline-grid;
  font: 500 .68rem/1 var(--sc-font-text);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sc-ink-soft); opacity: .5;
}
.duel-tab i {
  position: absolute; inset: 0; font-style: normal;
  color: var(--sc-accent);
}

/* ---------- act 3 · engine ---------- */

/* the left half dies as the act advances: driven from the act's own --sc-p */
.half--dying { --p: var(--sc-p, 0); }
.half--dying .half__img {
  filter: saturate(calc(.55 - .5 * var(--p))) contrast(calc(.95 - .25 * var(--p))) brightness(calc(1 - .55 * var(--p)));
}
.dying-line {
  position: absolute; left: clamp(1.25rem, 4vw, 3.25rem); right: 1rem; bottom: clamp(2.2rem, 8vh, 5rem);
  color: var(--old-ink); font-size: clamp(1rem, 1.4vw, 1.25rem); max-width: 26ch;
}
.half--rising .half__img { opacity: calc(.7 + .3 * var(--sc-p, 0)); }

.engine-copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(2.2rem, 7vh, 5rem);
}
.engine-sub { margin-top: .8rem; color: #4A3A24; max-width: 44ch; text-wrap: pretty; }
.figures { margin: 1.6rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 2rem; }
.figure--wide { grid-column: 1 / -1; }
.figure--wide dd { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.figure dt {
  font: 500 .68rem/1 var(--sc-font-text); letter-spacing: .2em;
  text-transform: uppercase; color: var(--new-soft); margin-bottom: .3rem;
}
.figure dd {
  margin: 0; font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1; color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

/* ---------- act 4 · silence ---------- */

.act-silence [data-sc-stage] { background: #070605; --p: var(--sc-p, 0); }
/* never touch the stage's own position: it is the engine's sticky mechanism */
/* the old era speaks its last words on ITS side of the divider */
.silence-core {
  position: absolute; left: 0; top: 0; bottom: 0; width: 50%;
  display: grid; place-items: center; text-align: center;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  overflow: hidden; /* the drifting letter-spacing must never widen the page */
}
/* phase 1 (p < .5): the line sits still and readable.
   phase 2 (p > .5): the letters drift apart and the cue fades it out. */
.silence-line {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.3;
  color: var(--old-ink); max-width: 18ch; text-wrap: balance; margin: 0;
  letter-spacing: max(.01em, calc((var(--p) - .5) * .5em + .01em));
}
.silence-signal {
  position: absolute; left: 0; right: 0; bottom: 16vh;
  display: flex; justify-content: center; align-items: center; gap: .55rem;
  font: 500 .74rem/1 var(--sc-font-text); letter-spacing: .26em;
  text-transform: uppercase; color: var(--sc-accent); margin: 0;
}
@media (max-width: 719px) {
  .silence-core { width: 100%; bottom: 50%; }
  .silence-signal { bottom: 24vh; }
}
.silence-signal__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent);
  animation: signal-blink 1.1s steps(2, start) infinite;
}
@keyframes signal-blink { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .silence-signal__dot { animation: none; } }

/* ---------- act 5 · peak ---------- */

/* the peak is bright now: the stage ground itself is ivory (so slow-loading
   frames never leave ink on dark), and the line sits in an ivory wash */
.act-peak [data-sc-stage] { background: var(--new-ground); }
.act-peak .sc-scrim--band {
  background: linear-gradient(to top, rgba(243,236,224,.9) 0%, rgba(243,236,224,.55) 32%, rgba(243,236,224,0) 60%);
}
/* the peak line lives in the lower band, over the wash */
.peak-copy {
  position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 9vh, 6rem);
  text-align: center; padding: 0 var(--sc-gutter);
}
.peak-copy h2 { color: var(--new-ink); text-wrap: balance; }

/* ---------- flow sections: services, founder, results ---------- */

.act-services, .act-founder, .act-results {
  background: var(--sc-canvas); position: relative; z-index: 45;
}
/* a flow section straight after a pinned act starts tight, not a screen late */
.act-services { padding-block-start: clamp(3rem, 7vh, 5rem); }
.services-intro { max-width: 56rem; }
.services-note { color: var(--sc-ink-soft); max-width: var(--sc-measure); }

.services-detail {
  margin: clamp(2.2rem, 5vh, 3.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 5rem);
}
.services-detail > div {
  padding: 1.05rem 0; border-block-start: 1px solid var(--sc-hairline);
}
.services-detail dt {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem); color: var(--sc-ink);
  display: flex; align-items: center; gap: .65rem;
}
.svc-ico { color: var(--sc-accent); flex: 0 0 auto; }
/* a thin cinematic strip above each service: the world of that service */
.svc-banner {
  display: block; width: 100%; height: clamp(52px, 6vw, 76px);
  object-fit: cover; border-radius: 8px; margin-bottom: .75rem;
  opacity: .92;
  box-shadow: inset 0 1px 0 rgba(242, 237, 228, .08);
}
.services-detail dd {
  margin: .35rem 0 0; color: var(--sc-ink-soft); font-size: .95rem;
  line-height: 1.6; max-width: 46ch; text-wrap: pretty;
}

/* founder */
.founder-grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2rem, 6vw, 5.5rem); align-items: center;
}
.founder-photo { position: relative; margin: 0; border-radius: 12px; overflow: hidden; }
.founder-photo img {
  width: 100%; height: auto; display: block;
  filter: grayscale(1) contrast(1.06) brightness(.92);
}
.founder-photo__tint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(232,163,61,.28), rgba(11,10,8,.12) 60%);
  mix-blend-mode: multiply;
}
.founder-photo::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(242,237,228,.12); pointer-events: none;
}
.founder-role { color: var(--sc-accent); margin-top: -.4rem; }
.founder-copy .sc-body { color: var(--sc-ink-soft); max-width: var(--sc-measure); }
.founder-era {
  margin-top: .6rem; font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.3; color: var(--sc-ink);
  max-width: 24ch; text-wrap: balance;
}

/* results: label schema, no cards-as-structure, one hairline rhythm */
.cases {
  margin-top: clamp(2.2rem, 5vh, 3.5rem);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem);
}
.case { border-block-start: 1px solid var(--sc-hairline); padding-top: 1.1rem; }
.case__tag { color: var(--sc-accent); }
.case dl { margin: 1rem 0 0; }
.case dl > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .45rem 0;
}
.case dt { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.case dd {
  margin: 0; font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem); color: var(--sc-ink);
  font-variant-numeric: tabular-nums;
}
.case__down { color: var(--sc-accent); }

/* ---------- act 7 · close ---------- */

.close { display: grid; place-items: center; background: var(--sc-canvas); }
.close__inner { text-align: center; padding: 0 var(--sc-gutter); max-width: 46rem; }
.close-sub { margin-top: 1.1rem; color: var(--sc-ink-soft); }
.cta.cta--fixed {
  position: fixed; top: clamp(16px, 2.6vw, 30px); right: clamp(16px, 3vw, 40px);
  z-index: 60; margin: 0;
  font-size: .85rem; padding: .7rem 1.25rem;
  box-shadow: 0 4px 18px rgba(11, 10, 8, .55);
}
@media (max-width: 719px) {
  .cta.cta--fixed { font-size: .78rem; padding: .58rem 1rem; }
}

.cta {
  display: inline-block; margin-top: 2rem;
  font: 700 1rem/1 var(--sc-font-text); letter-spacing: .01em;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  padding: 1.05rem 2.2rem; border-radius: 10px; text-decoration: none;
  transition: transform .14s var(--sc-ease-out), background-color .14s var(--sc-ease-out);
}
.cta:hover { background: #F0B255; }
.cta:active { transform: translateY(1px) scale(.98); }
.cta:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.close-contact { margin-top: 1.4rem; font-size: .95rem; color: var(--sc-ink-soft); display: flex; gap: .8rem; justify-content: center; }
.close-contact a { color: var(--sc-ink-soft); text-underline-offset: 3px; }
.close-contact a:hover { color: var(--sc-ink); }
.close-contact a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 3px; }

.foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem var(--sc-gutter);
}
.foot img { width: 108px; height: auto; opacity: .7; }
.foot small { color: var(--sc-ink-soft); font-size: .78rem; }

/* ---------- phones: the split turns horizontal, old above, new below ---------- */

@media (max-width: 719px) {
  .halves { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .divider-labels__old { top: calc(50% - 2.2rem); right: 1rem; left: auto; }
  .divider-labels__new { top: calc(50% + 1.2rem); left: 1rem; right: auto; }
  .hero-h { font-size: var(--sc-t-xl); }
  .peak-copy h2 { font-size: var(--sc-t-2xl); }
  .peak-copy { max-width: 92vw; bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px) + 2.4rem); }

  /* Safari's bottom bar overlays the lower half: everything anchored to the
     bottom of the NEW half climbs above it */
  .half__copy { padding-bottom: 1.4rem; }
  .half--new .half__copy { padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px) + 3rem); }
  .duel-title { top: 3.9rem; bottom: auto; font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .stamp { width: clamp(200px, 56vw, 300px); }
  .stamp--old { top: 42%; }
  .stamp--new { top: 34%; }
  .duel-topscrim { right: 0; }
  .duel-title .dt--old { clip-path: none; }
  .duel-title .dt--new { display: none; }
  .duel-verdict { bottom: 4.4rem; font-size: .98rem; max-width: none; }
  .ops { bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px) + 3.4rem); }
  .ops li { font-size: .98rem; padding: .45rem 0 .45rem 1.3rem; }
  .duel-tabs { bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)); }
  .engine-copy { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px) + 3.2rem); }
  .figures { margin-top: .9rem; gap: .55rem 1.1rem; }
  .figure dt { font-size: .58rem; letter-spacing: .14em; margin-bottom: .15rem; }
  .figure dd { font-size: 1.35rem; }
  .engine-sub { display: none; }
  .dying-line { bottom: 1.3rem; }

  /* keyboard-proof modal: top-aligned, whole overlay scrolls; the tail margin
     leaves room so every field can rise above the keyboard */
  .modal { padding-top: max(1.2rem, env(safe-area-inset-top, 0px)); }
  .modal__panel { margin: 0 auto 45vh; }
  .services-detail { grid-template-columns: 1fr; }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-photo { max-width: 320px; }
  .cases { grid-template-columns: 1fr; }
  .foot { flex-direction: column; gap: .5rem; padding-bottom: 1rem; }
}

/* ---------- consultation modal ---------- */

/* block flow, not grid: WebKit's scroll containers mishandle grid-centred
   overflow, which left the phone form half-openable */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: block; padding: 1rem;
  background: rgba(7, 6, 5, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0; transition: opacity .22s var(--sc-ease-out);
}
.modal.is-open { opacity: 1; }
.modal__panel { transform: translateY(14px) scale(.985); transition: transform .24s var(--sc-ease-out); }
.modal.is-open .modal__panel { transform: none; }
.modal[hidden] { display: none; }
/* the floating CTA steps aside while the form is up */
body.modal-open .cta--fixed { opacity: 0; pointer-events: none; }
.cta.cta--fixed { transition: opacity .18s var(--sc-ease-out), transform .14s var(--sc-ease-out), background-color .14s var(--sc-ease-out); }
.modal__panel {
  position: relative; width: 100%; max-width: 30rem; margin: 5vh auto 6vh;
  background: var(--sc-surface); border: 1px solid var(--sc-hairline);
  border-radius: 14px; padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(242, 237, 228, .06);
}
.modal__close {
  position: absolute; top: .9rem; right: .9rem; padding: .5rem;
  background: none; border: 0; color: var(--sc-ink-soft); cursor: pointer; border-radius: 8px;
  transition: color .15s var(--sc-ease-out);
}
.modal__close:hover { color: var(--sc-ink); }
.modal__close:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.modal__title { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.modal__sub { margin-top: .5rem; color: var(--sc-ink-soft); font-size: .92rem; line-height: 1.55; }
.modal__opt { color: var(--sc-ink-soft); font-weight: 400; }
.modal__form { margin-top: 1.6rem; display: grid; gap: 1.05rem; }
.modal__form label {
  display: grid; gap: .45rem;
  font: 500 .8rem/1.2 var(--sc-font-text); letter-spacing: .04em; color: var(--sc-ink);
}
.modal__form input, .modal__form select, .modal__form textarea {
  width: 100%; padding: .8rem 1rem; border-radius: 10px;
  border: 1px solid var(--sc-hairline-strong); background: var(--sc-canvas);
  color: var(--sc-ink); font: 400 .95rem/1.4 var(--sc-font-text);
  transition: border-color .15s var(--sc-ease-out);
}
.modal__form input::placeholder, .modal__form textarea::placeholder { color: var(--sc-ink-soft); opacity: .55; }
.modal__form input:focus-visible, .modal__form select:focus-visible, .modal__form textarea:focus-visible {
  outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: var(--sc-accent);
}
.modal__form textarea { resize: none; }
.modal__form input.is-invalid { border-color: #C25842; }
.field-err { font: 400 .78rem/1.45 var(--sc-font-text); letter-spacing: 0; color: #D97B66; }
.modal__submit { margin-top: .4rem; width: 100%; text-align: center; }
.modal__success { text-align: center; padding: 2.2rem 0 1.4rem; }
.modal__success-title { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.4rem; color: var(--sc-ink); }

/* short viewports (landscape phones): the display type steps down hard so the
   split headlines fit their half-screens */
@media (max-height: 520px) and (min-width: 720px) {
  .hero-h { font-size: clamp(1.3rem, 5.5vh, 2rem); max-width: none; }
  .hero-sub { display: none; }
  .half__copy { padding-bottom: 1.2rem; }
  .duel-verdict { font-size: .88rem; bottom: 1.1rem; }
  .ops li { font-size: .88rem; padding: .35rem 0 .35rem 1.2rem; }
  .duel-title { font-size: clamp(1.8rem, 9vh, 2.6rem); top: 2.4rem; }
  .engine-copy { padding-bottom: 1.4rem; }
  .figures { grid-template-columns: repeat(4, auto); gap: .5rem 1.4rem; margin-top: .7rem; }
  .figure dd { font-size: 1.15rem; }
  .engine-sub { display: none; }
  .peak-copy h2 { font-size: clamp(1.6rem, 8vh, 2.6rem); }
  .close__inner .sc-display--lg { font-size: clamp(1.5rem, 7vh, 2.4rem); }
}

/* scroll velocity feeds the grain: fast hands heat the page up (set by pulse.js) */
.sc-grain { opacity: calc(.04 + .07 * var(--scroll-heat, 0)); }

/* reduced motion: the pulse becomes a still hairline (pulse.js also bails),
   ambient loops are paused by pulse.js and hold their poster frame */
@media (prefers-reduced-motion: reduce) {
  #pulse { display: none; }
  .divider-labels { display: none; }
}