/* VueChat — home.css
   Homepage-only: the pinned hero→services→numbers scroll scene, and the
   sections that follow it. Loads after base.css, which supplies the
   design tokens, nav, footer, pills, and every component reused here
   (.eyebrow, .pill, .points, .stat-card, .ph placeholder, .m mask). */

/* ═══ SCENE — static layout (reduced motion / no JS) ══ */
.scene { position: relative; padding: 0 var(--gutter); }
.frame, .detail, .meta, .cue { display: none; }

.hero { padding: 22vh 0 12vh; max-width: 820px; }
.hero__title { margin: 28px 0 26px; }
.hero__italic {
  font: italic 300 clamp(1.5rem, 3vw, 2.6rem)/1.25 var(--display);
  letter-spacing: -0.01em;
  color: rgba(232, 229, 223, 0.75);
}
/* Capped by vh, not just vw — this heading must fit one viewport height
   inside the pinned scene, which .h-hero (used elsewhere) doesn't need to. */
.hero__title .m + .m > span {
  font: 800 clamp(3.2rem, min(8.4vw, 14vh), 8.4rem)/0.9 var(--display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.hero__title em { font-style: normal; color: var(--coral); }
.hero__sub { max-width: 30ch; font-size: 1.02rem; line-height: 1.6; color: rgba(232, 229, 223, 0.72); margin-bottom: 34px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.steps__list { display: grid; gap: 14vh; }
.step { max-width: 620px; }
.step__media {
  position: relative;
  aspect-ratio: 1;
  max-width: 520px;
  margin-bottom: 36px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.step__tag {
  font: 600 0.72rem/1 var(--body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 16px;
}
/* Also vh-capped, same reason as .hero__title */
.step__title {
  font: 800 clamp(2.2rem, min(4.6vw, 8vh), 4.6rem)/0.92 var(--display);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.step__lede {
  max-width: 44ch;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 24px;
}
.step .points { margin-bottom: 30px; }
.step__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ═══ SCENE — motion layout (pinned stage) ═════════════ */
.motion .scene { height: 100vh; height: 100svh; padding: 0; overflow: hidden; }

.motion .frame {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-2);
  will-change: transform, width, height;
}
.frame__intro { position: absolute; inset: 0; }
.frame__img { position: absolute; inset: 0; overflow: hidden; }
.motion .frame__img + .frame__img { clip-path: inset(100% 0% 0% 0%); }
.frame__inner { position: absolute; inset: 0; will-change: transform; }
.frame__inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame__dim { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; }
.frame__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15,14,14,0.85) 0%, rgba(15,14,14,0.5) 42%, rgba(15,14,14,0) 72%),
    linear-gradient(0deg, rgba(15,14,14,0.65) 0%, rgba(15,14,14,0) 45%);
}
/* Hero video: present but held back, so it reads as atmosphere under the gradient */
.frame__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

/* Detail cards hang off the square's lower-left corner */
.motion .detail { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.detail__card {
  position: absolute;
  left: calc(var(--sq-x) - var(--sq-size) * 0.2);
  /* Square card is shorter than the old 4:5 one — sit it lower so it still
     overhangs the square's bottom edge and reads as a layered card. */
  top: calc(var(--sq-y) + var(--sq-size) * 0.62);
  width: calc(var(--sq-size) * 0.4);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  opacity: 0;
  background: var(--bg-2);
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(232, 165, 152, 0.16);
  will-change: transform, opacity;
}
/* The card holds the original still-life photo shown whole, so it's square to
   match those sources (1:1) — a 4:5 card would crop their sides off. No zoom
   transform: the point is the full image, not a macro detail of it. */
.detail__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail__card .ph__label { right: 12px; bottom: 12px; font-size: 0.55rem; padding: 6px 10px; }

.motion .hero {
  position: absolute;
  left: var(--gutter);
  bottom: 13vh;
  z-index: 4;
  padding: 0;
  width: min(820px, calc(100% - var(--gutter) * 2));
}
.motion .cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: absolute;
  left: 50%; bottom: 34px;
  z-index: 4;
  transform: translateX(-50%);
  font: 600 0.62rem/1 var(--body);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(232, 229, 223, 0.6);
}
.cue i {
  width: 1px; height: 40px;
  background: linear-gradient(var(--coral), transparent);
  transform-origin: top;
  animation: cue 2.2s var(--ease-io) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.motion .meta {
  display: flex;
  align-items: center;
  gap: 22px;
  position: absolute;
  left: var(--gutter);
  top: var(--sq-y);
  z-index: 2;
  opacity: 0;
}
.counter { display: flex; align-items: flex-end; gap: 10px; }
.counter__win { display: block; height: 1em; overflow: hidden; font: italic 300 2.8rem/1 var(--display); color: var(--coral); }
.counter__roll { display: block; }
.counter__roll > span { display: block; height: 1em; }
.counter__total { font: 600 0.7rem/1 var(--body); letter-spacing: 0.2em; color: var(--muted); padding-bottom: 6px; }
.progress { display: flex; gap: 6px; }
.progress i { display: block; width: 36px; height: 3px; border-radius: 3px; background: rgba(232, 165, 152, 0.16); overflow: hidden; }
.progress b { display: block; height: 100%; background: var(--coral); transform-origin: 0 50%; transform: scaleX(0); }

.motion .steps {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--sq-y) + 84px);
  z-index: 2;
  width: min(36vw, 500px);
}
.motion .steps__list { display: grid; gap: 0; }
.motion .step { grid-area: 1 / 1; visibility: hidden; }
.motion .step.is-active { visibility: visible; }
.motion .step__media { display: none; }

/* Intro curtain */
.curtain { display: none; }
.motion .curtain {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  clip-path: inset(0% 0% 0% 0%);
}
.curtain__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.curtain__mark {
  display: flex;
  overflow: hidden;
  padding-bottom: 0.08em;
  font: 800 clamp(3.2rem, 11vw, 8.5rem)/1 var(--display);
  letter-spacing: -0.045em;
}
.curtain__mark span { display: inline-block; }
.curtain__tag { font: 600 0.7rem/1 var(--body); letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); opacity: 0; }

/* ─── Global reach / globe ──────────────────────────── */
/* Sized to fit within one viewport so the whole section can lock centred.
   Top padding still clears the fixed nav when the section is locked to the
   top of the screen; the earlier 9rem was over-correcting for a collision
   that turned out to be a screenshot artefact. */
.globe-section {
  background: var(--bg-3);
  overflow: hidden;
  padding-top: 7rem;
  padding-bottom: 3rem;
}
.globe-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 24px 24px 8px;
  max-width: 1200px;
  margin: 0 auto;
}
.globe-side-panel { flex: 0 0 180px; display: flex; flex-direction: column; gap: 40px; }
.globe-side-panel--markets { flex-basis: 200px; gap: 0; }
.globe-stat__num { font: 800 2.4rem/1 var(--display); color: var(--coral); margin: 0 0 8px; }
.globe-stat__label { font-size: 0.68rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 4px; }
.globe-stat__note { font-size: 0.6rem; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
#globe-canvas { cursor: grab; display: block; max-width: 100%; }

.globe-markets__title { font: 700 0.6rem/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); margin: 0 0 24px; }
.globe-markets__list { display: flex; flex-direction: column; gap: 22px; }
.globe-market__row { display: flex; justify-content: space-between; margin-bottom: 7px; }
.globe-market__name { font-size: 0.82rem; color: var(--muted); }
.globe-market__value { font-size: 0.82rem; color: var(--ink); font-weight: 700; }
.globe-market__track { height: 3px; background: rgba(232, 165, 152, 0.1); border-radius: 2px; }
.globe-market__bar { height: 100%; background: var(--coral); border-radius: 2px; }
.globe-markets__more { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 2px; }
.globe-markets__more span { font-size: 0.68rem; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; }

#globe-tooltip {
  position: fixed;
  display: none;
  background: rgba(15, 14, 14, 0.97);
  border: 1px solid rgba(232, 165, 152, 0.22);
  border-radius: var(--r-md);
  padding: 14px 20px;
  pointer-events: none;
  z-index: 1000;
}
#tooltip-country { font: 700 0.6rem/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); margin: 0 0 6px; }
#tooltip-earnings { font: 800 1.4rem/1 var(--display); color: var(--ink); margin: 0; }
#globe-tooltip .tip-note { font-size: 0.6rem; color: var(--muted); margin: 5px 0 0; letter-spacing: 0.08em; text-transform: uppercase; }

.globe-mobile-stats { display: none; max-width: 540px; margin: 0 auto; padding: 0 24px 40px; }
.globe-mobile-stats__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
/* min-width: 0 overrides the grid-item default of min-width: auto. Without
   it, "$1.28M" — one unbreakable string — was treated as this column's
   minimum content size and forced to 122px, stealing width from its 1fr
   siblings (measured: 122px/96px/100px instead of three equal thirds). That
   left the "486%" cell visibly narrower and crowding the box's rounded
   corner — the "numbers aren't in the box properly" the columns really
   were unequal, not just tight. min-width: 0 makes 1fr divide evenly like
   it's supposed to; the num's own font-size below is what keeps every
   number actually fitting inside that now-equal, narrower share. */
.globe-mobile-stats__cell { min-width: 0; padding: 22px 8px; border-right: 1px solid var(--line); }
.globe-mobile-stats__cell:last-child { border-right: none; }
/* Scales with viewport width so "$1.28M" (the widest of the three) keeps a
   consistent margin inside its equal-thirds column right down to a 320px
   phone — verified by measuring rendered width, not assumed from the type
   scale. white-space: nowrap because none of these values have a valid break
   point anyway; it just guards against a future longer number line-wrapping. */
.globe-mobile-stats__num { font: 800 clamp(1.05rem, 4.8vw, 1.5rem)/1 var(--display); white-space: nowrap; color: var(--coral); margin: 0 0 6px; }
.globe-mobile-stats__label { font-size: 0.6rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; line-height: 1.4; }

@media (max-width: 768px) {
  .globe-side-panel { display: none; }
  .globe-mobile-stats { display: block; }
  .globe-stage { gap: 0; padding: 32px 16px 24px; }
}

/* ─── How it works ──────────────────────────────────── */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.how-item { padding: 0 2.25rem; border-left: 1px solid var(--line); }
.how-item:first-child { border-left: none; padding-left: 0; }
.how-item:last-child { padding-right: 0; }
.how-item .step-num { margin-bottom: 24px; }
.how-item h3 { font: 700 1.15rem/1.3 var(--body); margin-bottom: 10px; }
.how-item p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; }

/* ─── Team teaser ───────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 48px; }
.team-card img { width: 100%; height: 340px; object-fit: cover; border-radius: var(--r-lg); margin-bottom: 22px; filter: grayscale(12%); }
.team-card .role { color: var(--coral); font: 700 0.68rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.team-card h3 { font: 700 1.3rem/1.2 var(--display); margin-bottom: 10px; }
.team-card .line { color: var(--muted); font-size: 0.88rem; line-height: 1.6; }

/* ─── Section gradients ──────────────────────────────────────────────
   Each section starts on the colour the one above ended on, so the page
   drifts black → dark grey → back rather than stepping between flat
   blocks. Change one boundary colour and you must change its neighbour,
   or a hard edge reappears. */
.results         { background: linear-gradient(180deg, #0F0E0E 0%, #141212 100%); }
.globe-section   { background: linear-gradient(180deg, #141212 0%, #0A0909 100%); }
.calc-section    { background: linear-gradient(180deg, #0A0909 0%, #131110 100%); }
.process-section { background: linear-gradient(180deg, #131110 0%, #171514 100%); }
.team-section    { background: linear-gradient(180deg, #171514 0%, #121010 100%); }
.faq-section     { background: linear-gradient(180deg, #121010 0%, #0F0E0E 100%); }
.contact-section { background: linear-gradient(180deg, #0F0E0E 0%, #0A0909 100%); } /* meets the footer */

/* ─── Earnings calculator ────────────────────────────────────────────
   Ported from calculator.html. Same controls and formula; restyled onto
   the site's tokens (the original used main.css variables that don't
   exist here, plus its own hard-coded hexes). */
/* Scaled down ~20% from the ported original so the whole tool — inputs and
   results together — fits one viewport. Previously the results sat below the
   fold, so moving a slider changed a number you couldn't see. */
.calc-section { padding-top: 5rem; padding-bottom: 3rem; }
.calc-section .h-section { font-size: clamp(1.9rem, 3.7vw, 3.3rem); margin-bottom: 12px !important; }
.calc-lede { max-width: 46ch; margin-bottom: 26px; font-size: 0.9rem; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }

.calc-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
}
.calc-card__label {
  font: 600 0.65rem/1 var(--body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 16px;
}

/* Slider */
.calc-slider__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.calc-slider__head span { font-size: 0.85rem; color: var(--muted); }
.calc-badge {
  background: var(--coral); color: var(--bg);
  font: 700 0.82rem/1 var(--body);
  padding: 7px 14px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.calc-card input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: rgba(232, 165, 152, 0.15);
  border-radius: 4px; outline: none; margin: 8px 0 4px;
}
.calc-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral); cursor: pointer;
  border: 3px solid var(--bg-2);
  box-shadow: 0 0 0 2px var(--coral);
}
.calc-card input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral); cursor: pointer; border: 3px solid var(--bg-2);
}
.calc-card input[type="range"]:focus-visible { outline: 2px solid var(--coral); outline-offset: 6px; }
.calc-slider__range { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--dim); margin-top: 6px; }

/* Toggles — pill group, matching the nav's treatment */
.calc-toggle {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: rgba(232, 165, 152, 0.06);
  border-radius: var(--r-pill);
  padding: 5px;
}
.calc-toggle__btn {
  flex: 1; min-width: 64px;
  padding: 9px 12px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: 600 0.74rem/1 var(--body);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.calc-toggle__btn:hover { color: var(--ink); background: rgba(232, 165, 152, 0.08); }
.calc-toggle__btn.is-active { background: var(--coral); color: var(--bg); }
.calc-toggle__desc { font-size: 0.74rem; color: var(--muted); margin-top: 12px; line-height: 1.55; min-height: 34px; }
#price-row { margin-top: 14px; }

/* Results */
.calc-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-result {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
}
.calc-result__label { font-size: 0.72rem; color: var(--muted); margin-bottom: 9px; }
.calc-result__num {
  font: 800 clamp(1.5rem, 3.2vw, 2.1rem)/1 var(--display);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.calc-result__sub { font-size: 0.72rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.calc-result--hero {
  background: var(--coral);
  border-color: transparent;
  display: flex; flex-direction: column; justify-content: center;
}
.calc-result--hero .calc-result__label,
.calc-result--hero .calc-result__sub { color: rgba(15, 14, 14, 0.65); }
.calc-result--hero .calc-result__num { color: var(--bg); font-size: clamp(1.8rem, 4vw, 2.7rem); }

.calc-disclaimer { font-size: 0.68rem; color: var(--dim); text-align: center; margin-top: 18px; line-height: 1.6; }

/* Slider block also tightened so the four cards keep equal heights */
.calc-slider__head { margin-bottom: 10px !important; }
.calc-badge { padding: 6px 12px; font-size: 0.76rem; }

@media (max-width: 760px) {
  .calc-grid, .calc-results { grid-template-columns: 1fr; }
}

/* The ~20% reduction above fits a 900px-tall window, but a short laptop
   (1280×680) still overflowed by a measured 173px — and a calculator whose
   results sit below the fold is the exact problem that reduction was meant to
   solve. Height, not width, is what's scarce here, so compact against height:
   the same trick used to make the globe section fit. Desktop is untouched. */
@media (min-width: 761px) and (max-height: 800px) {
  .calc-section { padding-top: 2.5rem; padding-bottom: 1.75rem; }
  .calc-section .h-section { font-size: clamp(1.6rem, 2.9vw, 2.2rem); }
  .calc-lede { margin-bottom: 12px; font-size: 0.84rem; }
  .calc-grid { gap: 10px; margin-bottom: 10px; }
  .calc-card { padding: 13px 16px; }
  .calc-card__label { margin-bottom: 10px; }
  .calc-slider__head { margin-bottom: 8px !important; }
  .calc-card input[type="range"] { margin: 6px 0 2px; }
  .calc-toggle__desc { min-height: 24px; margin-top: 8px; font-size: 0.7rem; }
  #price-row { margin-top: 10px; }
  .calc-results { gap: 10px; }
  .calc-result { padding: 15px 16px; }
  .calc-result__num { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
  .calc-result--hero .calc-result__num { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
  .calc-result__label { margin-bottom: 6px; }
  .calc-result__sub { margin-top: 5px; }
  .calc-disclaimer { margin-top: 10px; }
}

/* ─── Apply CTA + inline form ────────────────────────── */
/* Sits inside the process section, so its own top margin is the whole gap.
   The section's bottom padding is trimmed below to stop a large dead space
   opening up under the button while the panel is closed. */
.apply-cta { text-align: center; margin-top: 6rem; }
.process-section { padding-bottom: 3.5rem; }
.apply-cta__title {
  font: 800 clamp(2.2rem, 4.6vw, 4.2rem)/0.95 var(--display);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.apply-cta__title em { font-style: normal; color: var(--coral); }
.apply-cta__lede {
  max-width: 46ch;
  margin: 0 auto 30px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.65;
  color: var(--muted);
}
#apply-toggle { cursor: pointer; }
#apply-toggle .pill__icon { transition: transform 0.5s var(--ease-out); }
#apply-toggle[aria-expanded="true"] .pill__icon { transform: rotate(180deg); }

/* 0fr → 1fr animates to the content's natural height without guessing a
   max-height, which would either clip a long form or slow the close. */
.apply-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.65s var(--ease-out); }
.apply-panel.is-open { grid-template-rows: 1fr; }
.apply-panel__inner { overflow: hidden; }
.apply-form-wrap { max-width: 760px; margin: 0 auto; padding-top: 48px; }

#apply-form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-label .req { color: var(--coral); }
.form-label .opt { color: var(--dim); text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 6px; }
#apply-submit { border: none; }
.form-note { font-size: 0.78rem; line-height: 1.6; color: var(--dim); }
.form-note a { color: var(--coral); }

/* ─── Contact ────────────────────────────────────────────────────────
   Channels on the left, a short enquiry form on the right. The cards reuse
   the same surface treatment as .calc-card / .apply-* so this reads as part
   of the site rather than a bolted-on contact page. */
.contact-lede { max-width: 56ch; margin-bottom: 3.25rem; }
.contact-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 26px; align-items: start; }

.contact-channels { display: grid; gap: 14px; align-content: start; }
.contact-channel {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 24px;
  transition: border-color 0.35s, background 0.35s, transform 0.35s var(--ease-out);
}
.contact-channel:hover {
  border-color: var(--line-strong);
  background: #1A1817;
  transform: translateY(-2px);
}
.contact-channel__label {
  display: block;
  font: 600 0.65rem/1 var(--body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 12px;
}
.contact-channel__value {
  display: block;
  font: 700 1.05rem/1.3 var(--display);
  margin-bottom: 8px;
  overflow-wrap: anywhere; /* the email address must not widen the column */
}
.contact-channel__note { display: block; font-size: 0.8rem; color: var(--muted); line-height: 1.55; }

.contact-form-wrap {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 32px;
}
.contact-form-wrap form { display: grid; gap: 18px; }

.contact-success { text-align: center; padding: 26px 0; }
.contact-success__tick { font-size: 2.2rem; color: var(--coral); margin-bottom: 14px; }
.contact-success h3 { font: 700 1.35rem/1.2 var(--display); margin-bottom: 10px; }
.contact-success p { color: var(--muted); line-height: 1.7; max-width: 40ch; margin: 0 auto; }

@media (max-width: 899px) {
  .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-form-wrap { padding: 24px 22px; }
}

.apply-success {
  text-align: center;
  padding: 56px 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}
.apply-success__tick { font-size: 2.4rem; color: var(--coral); margin-bottom: 18px; }
.apply-success h3 { font: 700 1.5rem/1.2 var(--display); margin-bottom: 12px; }
.apply-success p { color: var(--muted); line-height: 1.7; max-width: 46ch; margin: 0 auto; }

@media (max-width: 899px) {
  .apply-cta { margin-top: 4.5rem; }
  .form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .apply-panel, #apply-toggle .pill__icon { transition: none; }
}

@media (max-width: 899px) {
  .how-grid, .team-grid { grid-template-columns: 1fr; gap: 32px; }
  .how-item { border-left: none; padding: 0; }
  /* "THE APPLICATION" is a single 15-character word — at the shared clamp's
     2.2rem floor it is wider than a 390px screen and runs off the edge. Scale
     these headings to the viewport instead so long words always fit. */
  .h-section { font-size: clamp(1.75rem, 7.4vw, 2.4rem); }
}

/* ─── Results ───────────────────────────────────────── */
/* The numbers own a full screen of their own — the scroll scene clears the
   stage completely before this, so nothing sits behind them. */
.results {
  position: relative;
  z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 7rem var(--gutter);
}
.results__inner { width: 100%; }
.results__grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* ─── Mobile ────────────────────────────────────────── */
@media (max-width: 899px) {
  .results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* Square on top, copy underneath */
  .motion .frame { border-radius: 22px; }
  .motion .hero { left: 6vw; right: 6vw; width: auto; bottom: 11vh; }
  .motion .cue { display: none; }

  /* Counter + progress sit ABOVE the square, centred with it, on the page
     background. On desktop they live in the left gutter; the old mobile
     position laid them across the top-left of the photo, which is what made
     the image look cluttered rather than placed. Centred with left/right +
     justify-content rather than translateX(-50%) on purpose: the scene
     timeline animates .meta's y, and GSAP writing a transform would drop a
     translate set here. */
  .motion .meta {
    left: 0; right: 0;
    justify-content: center;
    top: calc(var(--sq-y) - 42px);
    gap: 12px;
  }
  .motion .counter__win { font-size: 1.35rem; }
  .motion .counter__total { padding-bottom: 2px; font-size: 0.6rem; }
  .motion .progress i { width: 18px; }

  /* Tucked into the square's lower-left corner, the way it hangs off the
     square on desktop, and kept within the photo's width — it used to sit
     across the right of the image and overhang that edge by ~13px. */
  .detail__card {
    left: calc(var(--sq-x) - var(--sq-size) * 0.07);
    top: calc(var(--sq-y) + var(--sq-size) * 0.6);
    width: calc(var(--sq-size) * 0.34);
    border-radius: 14px;
  }
  .detail__card .ph__label { display: none; }

  /* 18px matches GAP_IMG_TEXT in home.js, which reserves the same gap when
     it sizes the square — change one and you must change the other. */
  .motion .steps { left: 6vw; right: 6vw; width: auto; top: calc(var(--sq-y) + var(--sq-size) + 18px); }
  .motion .step__tag { margin-bottom: 10px; font-size: 0.64rem; }
  .motion .step__title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); margin-bottom: 12px; }
  .motion .step__lede { font-size: 0.86rem; line-height: 1.55; margin-bottom: 14px; }
  .motion .step .points { gap: 7px; margin-bottom: 16px; }
  .motion .step .points li { font-size: 0.82rem; grid-template-columns: 18px 1fr; gap: 10px; }
  .motion .step .points li::before { width: 18px; height: 18px; background-size: 9px; }
}

/* Short phones (a 390x844 handset only gives ~745px of svh once the browser
   chrome is showing, so most of them land here). home.js sizes the square
   from the height the copy actually needs, which means tightening the copy
   here buys the image back that space directly rather than just moving the
   overflow somewhere else. */
@media (max-width: 899px) and (max-height: 780px) {
  .motion .step__tag { margin-bottom: 8px; }
  .motion .step__title { font-size: clamp(1.7rem, 7.4vw, 2.1rem); margin-bottom: 10px; }
  .motion .step__lede { font-size: 0.82rem; line-height: 1.5; margin-bottom: 12px; }
  .motion .step .points { gap: 6px; margin-bottom: 14px; }
  .motion .step .points li { font-size: 0.78rem; line-height: 1.4; }
}