/* =========================================================
   CREYA LABS — COMING SOON (temporary holding page)
   Layout language: House-of-Games reference

   Self-contained. This page used to load the site's 128KB style.css
   for ~25 token values and one animation, which is most of its weight
   for none of its layout. Those values are copied below — keep them in
   step with style.css if the site's tokens move.
========================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Archivo carries the display type — headline, lead, section titles.
     Geist stays on everything set as running text. */
  --font-display:   'Archivo', 'Geist', -apple-system, Helvetica, Arial, sans-serif;

  /* Colour + surface */
  --bg:             #FCFCFE;
  --bg-raised:      #F2F4F9;
  --ink:            #0E0E12;
  --border:         rgba(0, 0, 0, 0.12);
  --border-md:      rgba(0, 0, 0, 0.22);

  /* Type */
  --font-body:      'Geist', 'Inter', -apple-system, Helvetica, Arial, sans-serif;
  --font-ui:        var(--font-body);
  --fs-body:        18px;
  --lh-body:        1.55;
  --tracking-body:  -0.011em;
  --tracking-small: normal;

  /* Spacing (8px base) */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px; --s8: 64px;

  /* Shape + motion */
  --radius:      16px;
  --radius-pill: 999px;
  --nav-h:       82px;
  --lift:        -2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 0.18s;
  --med:  0.36s;
}

/* Label roll, lifted from style.css — the only shared behaviour here */
.cta-flip {
  position: relative;
  display: block;
  overflow: hidden;
}
.cta-flip > span {
  display: block;
  transition: transform 0.45s var(--ease);
}
.cta-flip > span:last-child {
  position: absolute;
  inset: 0;
  transform: translateY(115%);
}

.soon-body {
  background: var(--bg);
  color: var(--soon-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The reference runs full-bleed — content sits against a fixed gutter
   rather than inside a centred measure, so the layout keeps reaching the
   viewport edges on wide screens. Two gutters: the nav bar hugs closer
   than the body content, as it does in the reference. */
.soon-body {
  --gutter:     clamp(24px, 4.8vw, 96px);
  --gutter-nav: clamp(20px, 2.2vw, 44px);
}

.soon-shell {
  width: 100%;
  padding-inline: var(--gutter);
}


/* ── NAV — dark band, pill actions ─────────────────────── */
/* One local addition to the token set: a cool violet, sampled off the
   case-03 artwork so the nav band and the hero wash share a hue. */
.soon-body {
  --soon-violet:      #5B4B9E;
  --soon-violet-deep: #3B2F72;
  /* The bar's own colour, kept in one place so it can follow the hero. */
  --soon-bar:         #3B2F72;
  /* The logo's lime. At this luminance it only works against dark
     surfaces — 9.7:1 on the violet, 17:1 on ink, but 1.1:1 on white.
     So it appears on hover/focus states, never as type on the page. */
  --soon-lime:        #DFFF00;
  /* Page-local text ramp — near-black body, cool near-black headings,
     and one muted step for placeholders and asides. Everything on a
     light surface takes one of these three; the global --text-* tokens
     are a different, softer ramp and mixing them was drifting. */
  --soon-text:        #0C0C0D;
  --soon-heading:     #111827;
  --soon-muted:       rgba(12, 12, 13, 0.45);
  /* Small copy scales with the page like everything else, rather than
     sitting at a fixed 14px while the footer around it grows. */
  --soon-fs-sm:       clamp(14px, 0.85vw, 16px);
}

/* Focus is the one place the lime is unconditionally useful: it has to
   be seen instantly, and it sits over the violet hero and the nav. */
.soon-body :focus-visible {
  outline: 2px solid var(--soon-lime);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Frosted violet rather than a solid band — the artwork reads through it,
   and the blur keeps the pills legible over whatever passes underneath.
   The opaque fallback comes first for browsers without backdrop-filter. */
/* Fixed, not sticky — the bar has to float over the hero so the artwork
   runs beneath it. Sticky sits in flow, which pushed the image down and
   left the glass blurring an empty page behind it. */
.soon-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: var(--soon-bar);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .soon-nav {
    background: rgba(48, 37, 98, 0.58);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}
.soon-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--nav-h);
  width: 100%;
  padding-inline: var(--gutter-nav);
}
.soon-nav-logo { display: inline-flex; align-items: center; }
.soon-nav-logo img { height: 44px; width: auto; display: block; }

.soon-nav-actions { display: flex; align-items: center; gap: var(--s1); }

.soon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 56px;
  padding-inline: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font-family: var(--font-ui);
  /* 16px — 14px looked undersized once the pill grew to 56px */
  font-size: 16px;
  letter-spacing: var(--tracking-small);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.soon-pill:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; transform: translateY(var(--lift)); }

/* Search and the language switch have nothing behind them until launch.
   Disabled rather than removed — the bar keeps the reference's shape,
   and the state is honest to anyone who tries to use them. */
.soon-pill:disabled {
  opacity: 0.5;
  cursor: default;
}
.soon-pill:disabled:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  transform: none;
}
.soon-pill--icon { width: 56px; padding-inline: 0; }
.soon-pill svg { width: 18px; height: 18px; }

.soon-pill--solid {
  background: #fff;
  color: var(--ink);
  /* No border at all. It was invisible at rest (white on white), but on
     hover the fill — clipped to the padding box by `overflow: hidden` —
     couldn't reach past it, leaving a 1px white ring around the violet.
     The extra padding replaces the border's width so nothing shifts. */
  border: 0;
  padding-inline: calc(var(--s3) + 1px);
  gap: 6px;
  font-weight: 500;
}
/* Same gesture as the close button: the new colour wipes up from the
   bottom rather than swapping instantly. */
.soon-pill--solid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.4s var(--ease);
}
.soon-pill--solid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--soon-violet-deep);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
}
.soon-pill--solid:hover::before,
.soon-pill--solid:focus-visible::before { transform: none; }
/* The generic pill hover tints the background; the solid pill keeps its
   white base so the wiping layer above is what reads. */
.soon-pill--solid:hover,
.soon-pill--solid:focus-visible {
  color: #fff;
  background: #fff;
}
.soon-pill--solid:hover svg,
.soon-pill--solid:focus-visible svg { color: var(--soon-lime); transform: rotate(90deg); }
.soon-pill--solid svg { transition: transform var(--med) var(--ease), color var(--fast) var(--ease); }

/* Label roll — the site's existing .cta-flip idiom, wired to this page's
   two primary buttons. The overflow clip lives on .cta-flip itself. */
.soon-pill--solid:hover .cta-flip > span:first-child,
.soon-submit:hover .cta-flip > span:first-child { transform: translateY(-115%); }
.soon-pill--solid:hover .cta-flip > span:last-child,
.soon-submit:hover .cta-flip > span:last-child  { transform: translateY(0); }

/* ── NAV MENU — white panel drops from the top ─────────── */
body.menu-locked { overflow: hidden; }

.soon-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(14, 14, 18, 0.42);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.soon-menu.is-open { opacity: 1; }

.soon-menu-panel {
  background: var(--bg);
  padding: var(--s3) var(--gutter-nav) clamp(48px, 7vh, 88px);
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease);
  will-change: transform;
  /* Sizes to its own content — capped only so a short viewport can
     still scroll rather than clip the last link. */
  max-height: 100svh;
  overflow-y: auto;
}
.soon-menu.is-open .soon-menu-panel { transform: translateY(0); }

.soon-menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--nav-h);
}
.soon-menu-logo img { height: 44px; width: auto; display: block; }

/* The close is the only control in the panel, so it earns some detail:
   a violet disc wipes up from the bottom under the mark, the mark itself
   turns a quarter and picks up the lime, and a ring pushes outward. */
.soon-menu-close {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.4s var(--ease);
}
.soon-menu-close::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--soon-violet);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
}
.soon-menu-close:hover::before,
.soon-menu-close:focus-visible::before { transform: none; }

.soon-menu-close svg {
  width: 26px;
  height: 26px;
  transition: transform 0.5s var(--ease);
}
.soon-menu-close:hover svg,
.soon-menu-close:focus-visible svg { transform: rotate(90deg); }
.soon-menu-close:hover,
.soon-menu-close:focus-visible { color: var(--soon-lime); }

.soon-menu-links {
  display: grid;
  justify-items: start;
  margin-top: clamp(32px, 5vh, 64px);
}
/* Links rise out from behind a clip rather than fading in — the words
   arrive like a curtain lifting, which is what makes the panel feel
   authored instead of just "a list that appeared". */
.soon-menu-links a {
  display: block;
  overflow: hidden;         /* the clip the words rise out of */
  padding-block: 2px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.018em;
  color: rgba(12, 12, 13, 0.4);
  text-decoration: none;
  transition: color var(--med) var(--ease);
}
.soon-menu-links a > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.62s var(--ease);
}
.soon-menu.is-open .soon-menu-links a > span { transform: none; }
.soon-menu.is-open .soon-menu-links a:nth-child(1) > span { transition-delay: 0.16s; }
.soon-menu.is-open .soon-menu-links a:nth-child(2) > span { transition-delay: 0.23s; }
.soon-menu.is-open .soon-menu-links a:nth-child(3) > span { transition-delay: 0.30s; }
.soon-menu.is-open .soon-menu-links a:nth-child(4) > span { transition-delay: 0.37s; }

/* Just the tone shift: the word darkens and steps aside. Nothing
   arrives, nothing sweeps. */
.soon-menu-links a:hover,
.soon-menu-links a:focus-visible { color: var(--soon-heading); }
/* Prefixed to outrank the .is-open entrance rule above, which also sets
   transform on this element. */
.soon-menu.is-open .soon-menu-links a:hover > span,
.soon-menu.is-open .soon-menu-links a:focus-visible > span { transform: translateX(10px); }


/* ── HERO — full-bleed photo under a duotone wash ──────── */
/* One tall band: the headline fills the first screen, the intro copy
   sits under it inside the same image and wash. */
.soon-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(72px, 12vh, 140px);
}

.soon-hero-top {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Full viewport — the nav floats on top rather than taking height. */
  min-height: 100svh;
  /* Sits in the lower third — lifted off the base, but nowhere near
     centred, so the artwork still owns the top of the frame. */
  padding-bottom: clamp(72px, 17vh, 180px);
}

/* Measures taken off the reference, which sets everything as a share of
   the viewport rather than against a fixed column:
     lead   78% wide, ~3.2vw
     body   58% wide, ~1.1vw
   so the block keeps its proportions at any width. */
.soon-hero-intro {
  position: relative;
  width: min(88%, 1760px);
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

.soon-intro-eyebrow {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  color: rgba(255, 255, 255, 0.72);
}
/* With one family throughout, the brand name is emphasised by weight and
   value rather than by a change of face. */
.soon-intro-eyebrow strong {
  font-weight: 600;
  color: #fff;
}

.soon-intro-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: 1.26;
  letter-spacing: -0.015em;
  /* Gaps are proportional to the lead, not the viewport. The reference
     runs a ~62px lead with a 56px gap above it; ours is 40px, so the
     old vw-based margins were leaving far too much air. */
  margin-top: clamp(14px, 1.6vw, 30px);
  /* Not `balance` — that pulls the lines in well short of the container
     and left the lead reading narrower than the body beneath it. */
  text-wrap: pretty;
}

.soon-intro-body {
  /* 70% of the viewport, expressed against the 88% container — but
     capped at a readable measure, or a 1920 screen gives 95-character
     lines. The size cap keeps it clear of the 40px lead above it. */
  width: min(80%, 1400px);
  max-width: 72ch;
  margin: clamp(12px, 1.35vw, 26px) auto 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  /* Stepped back in value as well as size — at 20px and 82% it was
     reading as a second headline rather than as support. */
  color: rgba(255, 255, 255, 0.76);
}

@media (max-width: 700px) {
  .soon-hero-intro { width: min(90%, 560px); }
  .soon-intro-body { width: 100%; }
}

.soon-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Hue transplant. The artwork is essentially monochrome, so `color`
   blending keeps every value in the image — the highlights, the falloff,
   the black — and swaps only the hue for the brand violet. This is what
   lets any of the bg-*.jpg files be dropped in without the page taking
   on whatever colour that file happens to be. Sits above the photo and
   below the gradient wash. */
.soon-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--soon-violet);
  mix-blend-mode: color;
  /* Barely there. bg-4 is already brand violet, so the transplant only
     needs to pull stray hues into line — at higher strengths it erased
     the magenta highlights and the light sweep that make the image worth
     using. Raise this toward 1 only for artwork that is off-brand. */
  opacity: 0.2;
  pointer-events: none;
}

/* Cool violet throughout — deepest at the top so the nav band dissolves
   into the image, opening slightly through the middle so the artwork's
   own forms stay legible, then closing again at the base behind the
   headline. Multiply keeps the render's structure. */
.soon-hero-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(59, 47, 114, 0.80) 0%,
    rgba(91, 75, 158, 0.38) 26%,
    rgba(80, 62, 148, 0.55) 52%,
    rgba(45, 34, 96, 0.88) 74%,
    rgba(30, 22, 68, 0.95) 100%);
  mix-blend-mode: multiply;
}

/* Load reveal — the headline settles first, the intro follows it up the
   page. One gesture, no bounce; the delays are what make it read as
   deliberate rather than as three separate animations. */
@keyframes soon-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.soon-hero-title { animation: soon-rise 0.9s var(--ease) 0.15s both; }

/* The intro sits below the fold, so it waits for the scroll rather than
   playing out unseen on load. */
.soon-hero-intro > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.soon-hero-intro.is-visible > * { opacity: 1; transform: none; }
.soon-hero-intro.is-visible .soon-intro-lead { transition-delay: 0.1s; }
.soon-hero-intro.is-visible .soon-intro-body { transition-delay: 0.2s; }

.soon-hero-title {
  /* No display face. One family across the whole page — a holding page
     with no decorative type is itself a claim about restraint, which is
     the argument a QA studio wants to make. Geist ships loose, so at
     112px it needs real negative tracking to read as set rather than
     typed, and 500 rather than 400 to hold against the artwork. */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 10vw, 112px);
  line-height: 1;
  /* Archivo sets tighter than Geist, so it needs less pulling in */
  letter-spacing: -0.025em;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}


/* ── FOOTER ────────────────────────────────────────────── */
.soon-footer { padding-top: clamp(56px, 6vw, 100px); }

/* Column tracks measured off the reference: the brand column runs to
   ~59% of the page, the links column to ~82%, legal takes the rest. */
.soon-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4.1fr) minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(40px, 4vw, 72px);
  padding-bottom: clamp(48px, 5.5vw, 96px);
}

.soon-footer-logo img { height: 40px; width: auto; display: block; }
.soon-footer-tagline {
  margin-top: clamp(18px, 1.5vw, 28px);
  max-width: 46ch;
  font-size: clamp(15px, 0.85vw, 17px);
  color: var(--soon-text);
}

.soon-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  color: var(--soon-text);
  text-decoration: none;
  font-size: var(--soon-fs-sm);
  letter-spacing: var(--tracking-small);
}
.soon-contact svg {
  width: 18px; height: 18px; flex: none;
  color: var(--soon-heading);
  transition: transform var(--med) var(--ease);
}
.soon-contact { transition: color var(--med) var(--ease); }
.soon-contact:hover { color: var(--soon-violet); }
.soon-contact:hover svg { transform: translateX(3px); color: var(--soon-violet); }

.soon-col-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 0.95vw, 20px);
  font-weight: 600;
  color: var(--soon-heading);
  letter-spacing: -0.01em;
  margin-bottom: clamp(20px, 1.7vw, 34px);
}
.soon-col ul { list-style: none; display: grid; gap: clamp(14px, 0.95vw, 19px); }
/* Footer links shift tone rather than growing an underline — the violet
   is the page's own colour, so the change reads as brand, not decoration. */
.soon-col a {
  font-size: clamp(15px, 0.9vw, 18px);
  color: var(--soon-text);
  text-decoration: none;
  transition: color 0.4s var(--ease);
}
.soon-col a:hover,
.soon-col a:focus-visible { color: var(--soon-violet); }

/* Newsletter — inset pill field with a button riding inside it */
.soon-newsletter { margin-top: clamp(44px, 5.5vw, 92px); }
.soon-newsletter .soon-col-title { margin-bottom: clamp(16px, 1.4vw, 26px); }

.soon-field {
  display: flex;
  align-items: center;
  gap: var(--s2);
  max-width: 470px;
  padding: 7px 7px 7px var(--s3);
  background: var(--bg-raised);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: border-color var(--fast) var(--ease);
}
.soon-field:focus-within { border-color: var(--border-md); }
.soon-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--soon-fs-sm);
  letter-spacing: var(--tracking-small);
  color: var(--soon-heading);
}
.soon-field input::placeholder { color: var(--soon-muted); }
.soon-field input:focus { outline: none; }

.soon-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  flex: none;
  height: 48px;
  padding-inline: var(--s4);
  border: 0;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--soon-fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-small);
  cursor: pointer;
  transition: color 0.4s var(--ease), transform var(--fast) var(--ease);
}
/* Ink wipes up from the bottom, same gesture as the nav pill and the
   close button. Lime on ink reads at 17:1 — the footer's one colour. */
.soon-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
}
.soon-submit:hover::before,
.soon-submit:focus-visible::before { transform: none; }
.soon-submit:hover,
.soon-submit:focus-visible { color: var(--soon-lime); transform: translateY(var(--lift)); }
.soon-submit svg { width: 14px; height: 14px; }

.soon-note { margin-top: var(--s2); font-size: var(--soon-fs-sm); letter-spacing: var(--tracking-small); color: var(--soon-muted); }

/* Copyright sits under a rule that runs the full page width — the border
   goes on the shell, which is full-bleed, not on the inset row. */
.soon-legal-wrap { border-top: 1px solid var(--border); }
.soon-legal {
  padding-block: clamp(28px, 3.2vw, 56px) clamp(20px, 1.8vw, 32px);
  font-size: clamp(14px, 0.85vw, 17px);
  letter-spacing: var(--tracking-small);
  color: var(--soon-text);
}


/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 900px) {
  .soon-footer-grid { grid-template-columns: 1fr 1fr; }
  .soon-footer-brand { grid-column: 1 / -1; }
}

/* Phones. The reference keeps every control and collapses them all to
   equal circles — `navigation` drops its label and becomes a bare `+`.
   Nothing is removed, so the bar reads the same as it does on desktop,
   only denser. */
@media (max-width: 640px) {
  .soon-pill {
    width: 44px;
    height: 44px;
    padding-inline: 0;
    gap: 0;
    font-size: 15px;
  }
  .soon-pill--icon { width: 44px; }
  .soon-pill svg { width: 17px; height: 17px; }
  /* The label goes; the plus is the whole control */
  .soon-pill--solid .cta-flip { display: none; }
  /* The language pill keeps its two letters and drops the globe, as in
     the reference — a glyph and an icon won't both fit in 44px. */
  .soon-nav-actions > .soon-pill:not(.soon-pill--icon):not(.soon-pill--solid) svg { display: none; }

  .soon-nav-logo img { height: 30px; }
  .soon-nav-actions { gap: 8px; }

  .soon-menu-logo img { height: 30px; }
  .soon-menu-close { width: 44px; height: 44px; }
  .soon-menu-close svg { width: 20px; height: 20px; }

  /* The artwork is a wide, centred composition, so a straight portrait
     crop lands on the flat middle slab — shift right to pull the blocks
     and the highlight into frame. */
  .soon-hero-img { object-position: 68% center; }

  .soon-hero-title { font-size: 39px; }
  /* Short of a full screen on purpose: the headline sits high enough
     that the intro's first line shows below it, which is what invites
     the scroll. */
  .soon-hero-top {
    min-height: 74svh;
    padding-bottom: clamp(28px, 5vh, 48px);
  }

  .soon-footer-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .soon-field { flex-wrap: wrap; padding: var(--s2); border-radius: var(--radius); }
  .soon-field input { flex-basis: 100%; padding: var(--s1) var(--s2); }
  .soon-submit { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .soon-pill:hover, .soon-submit:hover { transform: none; }
  .soon-menu, .soon-menu-panel { transition: none; }
  .soon-menu-close:hover svg { transform: none; }
  .soon-menu-close::before,
  .soon-pill--solid::before,
  .soon-submit::before { transition: none; }
  .soon-menu-links a > span { transform: none !important; transition: none; }
  .soon-pill--solid:hover svg { transform: none; }
  .soon-contact:hover svg { transform: none; }
  .cta-flip > span { transition: none; }
  /* No motion at all — the reveals resolve to their finished state. */
  .soon-hero-title { animation: none; }
  .soon-hero-intro > * { opacity: 1; transform: none; transition: none; }
}