/* ───────────────────────────────────────────────────────────
   MightyDesk — palette lifted from the logo:
   pale-sky → warm-peach gradient, cornflower rocket, navy, orange M
   ─────────────────────────────────────────────────────────── */

@property --p { syntax: '<number>'; initial-value: 0; inherits: true; }

:root {
  --sky:        #dbe8f8;
  --sky-deep:   #c3d9f3;
  --cream:      #fbf3ea;
  --peach:      #f8ddc4;
  --blue:       #93bbef;
  --blue-deep:  #5b8ed8;
  --navy:       #101f6b;
  --ink:        #1a2550;
  --ink-soft:   #5a6489;
  --orange:     #f97008;
  --orange-lit: #ff8a2b;

  --rail-w: 168px;
  --pad: clamp(20px, 5vw, 64px);

  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* A `display` declaration on a class outranks the UA's [hidden] rule, so
   toggling el.hidden would otherwise leave the element on screen. */
[hidden] { display: none !important; }

::selection { background: var(--orange); color: #fff; }

/* ─── Sky: fixed gradient + drifting orbs ─────────────────── */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      var(--sky) 0%,
      #e8eef8 34%,
      var(--cream) 62%,
      var(--peach) 100%);
  transition: filter 900ms ease;
}

/* each section nudges the whole sky a touch warmer or cooler */
body[data-tone="dozer"]     .sky { filter: hue-rotate(-6deg)  saturate(1.08); }
body[data-tone="dayparter"] .sky { filter: hue-rotate(14deg)  saturate(1.02); }
body[data-tone="factora"]   .sky { filter: hue-rotate(-14deg) saturate(1.10); }
body[data-tone="build"]     .sky { filter: saturate(1.12) brightness(1.01); }

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}
.orb--a {
  width: 46vw; height: 46vw; min-width: 320px; min-height: 320px;
  top: -8vh; left: -6vw;
  background: radial-gradient(circle at 40% 40%, var(--blue) 0%, rgba(147,187,239,0) 70%);
}
.orb--b {
  width: 38vw; height: 38vw; min-width: 280px; min-height: 280px;
  top: 36vh; right: -8vw;
  background: radial-gradient(circle at 50% 50%, rgba(249,112,8,.42) 0%, rgba(249,112,8,0) 70%);
}
.orb--c {
  width: 52vw; height: 52vw; min-width: 340px; min-height: 340px;
  bottom: -18vh; left: 22vw;
  background: radial-gradient(circle at 50% 50%, rgba(255,214,168,.6) 0%, rgba(255,214,168,0) 70%);
}

.grain {
  position: absolute;
  inset: -50%;
  opacity: .16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ─── Chrome: topbar, rail, footer ────────────────────────── */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(11px + env(safe-area-inset-top, 0px)) var(--pad) 11px;
  transition: opacity 420ms ease;
}

/* The hero already carries the mark and the wordmark at full size, so the
   corner brand only starts earning its place once you have scrolled past them.
   The Contact button is there from the first screen. */
.topbar__brand {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 420ms ease, transform 420ms ease;
}
.topbar.is-lit .topbar__brand {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Contact shows the mark and is the contact section — the bar is redundant
   there, so it stands down. Outranks .is-lit on specificity. */
body[data-at-contact] .topbar {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

.topbar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(251,243,234,.82), rgba(251,243,234,0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity 420ms ease;
}
.topbar.is-lit::before { opacity: 1; }

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.015em;
  color: var(--navy);
}
/* The mark is slim, so it needs a taller box than a filled logo would to carry
   the same weight; the negative side margins claw back the canvas padding so
   the gap to the wordmark stays optically even. */
.topbar__brand img { width: 40px; height: 40px; margin-inline: -8px; }

.topbar__cta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  color: var(--navy);
  padding: 8px 18px;
  border: 1.5px solid rgba(16,31,107,.22);
  border-radius: 999px;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.topbar__cta:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.rail {
  position: fixed;
  z-index: 35;
  right: max(18px, calc(var(--pad) - 18px));
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 420ms ease;
}
.rail.is-lit { opacity: 1; }
.rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 48px; }
.rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 7px 0;
  min-height: 16px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.rail a i {
  width: 22px; height: 2px;
  border-radius: 2px;
  background: rgba(26,37,80,.28);
  transition: width 260ms ease, background 260ms ease;
  flex: none;
}
.rail a span {
  position: absolute;
  right: 52px;
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.rail a:hover span,
.rail a.is-on span { opacity: 1; transform: none; }
.rail a:hover i { width: 34px; background: var(--ink-soft); }
.rail a.is-on { color: var(--navy); }
.rail a.is-on i { width: 42px; background: var(--orange); }

/* Pinned to the viewport so the notice rides along with every section. Below
   the curtain's z-index, so the easter egg still goes fully black. */
.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  justify-content: space-between;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px));
  font-size: .76rem;
  color: var(--ink-soft);
  /* Nothing in here is clickable, and it sits over the contact form. */
  pointer-events: none;
}

.foot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(0deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  mask-image: linear-gradient(0deg, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent 100%);
}

/* ─── Scroll scenes ───────────────────────────────────────── */

.scene {
  position: relative;
  height: var(--len, 200vh);
}

/* A sticky stage is pinned for (scene height − one screen), then spends a whole
   screen-height sliding away before the next scene even begins. That slide was
   dead scrolling with nothing in the middle of the view. Pulling each scene up
   over its predecessor's slide removes it from the scroll budget entirely: the
   incoming stage is already pinned and painting above the outgoing one.
   Exactly one screen, no more: any further overlap runs both fades at once in
   the same space, which reads as a smudge of two sections rather than a
   handoff. One leaves, then the next arrives. */
.scene + .scene { margin-top: -100vh; }

.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(72px + env(safe-area-inset-top, 0px)) var(--pad) 72px;
  overflow: hidden;
}

/* generic enter / exit fade for every non-hero scene */
.scene--product .stage { opacity: clamp(0, calc(var(--p) * 7), 1); }
.scene--product .stage > * { opacity: clamp(0, calc((1 - var(--p)) * 7), 1); }

/* ─── Hero ────────────────────────────────────────────────── */

.hero {
  display: grid;
  place-items: center;
  text-align: center;
  opacity: clamp(0, calc((1 - var(--p)) * 7), 1);
}

.hero__mark {
  /* Sized off the canvas, not the ink: the mark fills ~90% of the box's height
     but under half its width, so height is what binds here. */
  width: min(72vw, 470px, 44svh);
  transform:
    translate3d(0, calc(var(--p) * -7vh), 0)
    scale(calc(1 - .44 * var(--p)));
  transform-origin: center 46%;
  will-change: transform;
  filter: drop-shadow(0 30px 60px rgba(16,31,107,.14));
}
.hero__mark img { width: 100%; height: auto; }

.hero__word {
  margin: clamp(4px, 1vh, 14px) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, min(7vw, 8svh), 4.4rem);
  line-height: .95;
  letter-spacing: -.045em;
  color: var(--navy);
  transform: translate3d(0, calc(var(--p) * -11vh), 0);
  will-change: transform;
}

.hero__intro {
  /* Long enough that it is sized against height as well as width, so it still
     clears the fold on a short laptop window. */
  max-width: 68ch;
  margin: clamp(14px, 2.4vh, 22px) 0 0;
  font-size: clamp(.94rem, min(1.32vw, 2.1svh), 1.1rem);
  line-height: 1.66;
  color: var(--ink-soft);
  text-wrap: pretty;
  transform: translate3d(0, calc(var(--p) * -11vh), 0);
}

.hero__intro p { margin: 0; }
.hero__intro p + p { margin-top: clamp(11px, 1.5vh, 20px); }

/* Says what to do, points where, and works if clicked — a hairline and the word
   "scroll" only read to people who already know the convention. */
.hero__hint {
  margin-top: clamp(14px, 2.4vh, 26px);
  display: inline-grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: clamp(0, calc(1 - var(--p) * 3), 1);
  transition: color 200ms ease;
}
.hero__hint svg {
  width: 21px;
  height: 21px;
  animation: nudge 1.9s ease-in-out infinite;
}
.hero__hint:hover { color: var(--orange); }
.hero__hint:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 2px;
}

@keyframes nudge {
  0%, 100% { transform: translateY(-3px); opacity: .5; }
  50%      { transform: translateY(4px);  opacity: 1; }
}

/* Wide screens set the copy beside the mark rather than under it, which buys
   back the vertical room the mark needs to stay the largest logo here. */
@media (min-width: 900px) {
  .hero {
    width: min(1100px, 100%);
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-areas:
      "mark  word"
      "mark  intro"
      "hint  hint";
    column-gap: clamp(24px, 3.4vw, 50px);
    justify-items: center;
  }

  .hero__mark {
    --mark-w: min(34vw, 470px, 56svh);
    grid-area: mark;
    align-self: center;
    width: var(--mark-w);
    /* The PNG carries ~27% transparent padding each side, so the gap to the
       text measures nearly three times the column gap. Claw most of it back. */
    margin-inline-end: calc(var(--mark-w) * -0.2);
  }
  .hero__hint { grid-area: hint; }

  /* The mark spans both rows, so any height it adds beyond the heading and
     copy settles above and below the pair — keeping the two of them together
     and the group centred against the mark. */
  .hero__word {
    grid-area: word;
    align-self: end;
    justify-self: start;
    text-align: left;
    margin: 0 0 clamp(10px, 1.6vh, 18px);
  }

  .hero__intro {
    grid-area: intro;
    align-self: start;
    justify-self: start;
    /* A shorter measure and larger type give the column enough height to hold
       its own against the mark beside it. */
    max-width: 46ch;
    margin: 0;
    text-align: left;
    font-size: clamp(1.02rem, min(1.55vw, 2.5svh), 1.28rem);
  }
}

/* ─── Products ────────────────────────────────────────────── */

.product {
  display: grid;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  width: min(1100px, 100%);
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    justify-items: stretch;
    text-align: left;
  }
  .scene--flip .product__art { order: 2; }
}

.product__art {
  position: relative;
  margin: 0;
  /* Capped against height too, so the MightyDesk mark stays the largest on the
     site at every window size — its ink is only ~90% of its box, theirs fills. */
  width: min(58vw, 330px, 36svh);
  transform: translate3d(0, calc((.5 - var(--p)) * 11vh), 0);
  will-change: transform;
}
.product__art::before {
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 46%, rgba(255,255,255,0) 72%);
  z-index: -1;
}
.product__art img {
  width: 100%; height: auto;
  filter: drop-shadow(0 26px 46px rgba(16,31,107,.16));
}

/* Scenes overlap, so the stage of the section arriving next sits invisibly over
   the one being read and would swallow its clicks. Stages take no pointer
   events at all; only the live section's links opt back in, which also stops a
   faded-out section leaving an invisible link over its successor. */
.scene--product { pointer-events: none; }
.scene--product.is-live .product__copy a { pointer-events: auto; }

.product__copy a {
  color: var(--navy);
  font-weight: 500;
  text-decoration-color: rgba(16, 31, 107, .35);
  text-underline-offset: 3px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.product__copy a:hover {
  color: var(--orange);
  text-decoration-color: currentColor;
}
.product__copy a:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

.product__body {
  position: relative;
  transform: translate3d(0, calc((.5 - var(--p)) * 5vh), 0);
  will-change: transform;
}

.product__index {
  position: absolute;
  top: -.95em;
  left: -.08em;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5.5rem, 13vw, 11rem);
  line-height: 1;
  letter-spacing: -.06em;
  color: rgba(16,31,107,.05);
  transform: translate3d(0, calc((.5 - var(--p)) * 17vh), 0);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 899px) {
  /* stacked layout leaves no clean space for the ghost numeral */
  .product__index { display: none; }
}

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
}

.product__body h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7.5vw, 5rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--navy);
}

.product__copy {
  margin: 20px 0 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  line-height: 1.62;
  color: var(--ink-soft);
}
@media (max-width: 899px) { .product__copy { margin-inline: auto; } }

/* The agents mighty.build runs. */
.tools {
  --icon: clamp(22px, 2.5vw, 28px);
  display: flex;
  align-items: center;
  gap: 11px;
  margin: clamp(20px, 3vh, 30px) 0 0;
  padding: 0;
  list-style: none;
}
.tools img {
  width: var(--icon);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(16, 31, 107, .16));
}

/* This one is a wide sprite that fills only 63% of its square canvas, so at a
   shared width its ink comes out two-thirds the height of the app icons beside
   it. Sized up to match them optically rather than on paper. */
.tools .tool--wide { width: calc(var(--icon) * 1.3); }
@media (max-width: 899px) { .tools { justify-content: center; } }

/* ─── Contact ─────────────────────────────────────────────── */

/* The contact scene is not pinned: a sticky 100svh stage would trap the form
   under the on-screen keyboard on phones. It scrolls normally and reveals once. */
.scene--contact { height: auto; }

/* Every other section anchors at mid-scene, half its travel past its own top;
   contact anchors at its top, so the standard -100vh overlap left it arriving
   in half the distance of the rest. Giving back that half-travel (55vh) evens
   the spacing out. */
.scene + .scene--contact { margin-top: -45vh; }

.stage--static {
  position: static;
  height: auto;
  min-height: 100svh;
  overflow: visible;
  padding-bottom: clamp(64px, 10vh, 120px);
}

.contact {
  display: grid;
  /* place-items, not justify-items: stretch would distort the mark */
  place-items: center;
  text-align: center;
  gap: 0;
  width: min(680px, 100%);
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.contact.is-in { opacity: 1; transform: none; }
.contact__mark {
  width: clamp(92px, 16vw, 146px);
  height: auto;
  margin-bottom: 26px;
  filter: drop-shadow(0 18px 34px rgba(16,31,107,.16));
}
.contact h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--navy);
}
/* Scoped to the intro line — an unscoped `.contact p` also caught the
   form's field paragraphs and capped every input at 34ch. */
.contact__lede {
  margin: 18px 0 0;
  max-width: 34ch;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  /* Evens the two lines out; without it the last word is left on its own. */
  text-wrap: balance;
}

.btn {
  display: inline-block;
  padding: 16px 34px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  box-shadow: 0 14px 30px rgba(249,112,8,.28);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.btn:hover {
  background: var(--orange-lit);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(249,112,8,.34);
}
.btn:active { transform: translateY(0); }

/* ─── Contact form ────────────────────────────────────────── */

.cform {
  width: 100%;
  margin-top: clamp(28px, 4vh, 44px);
  display: grid;
  gap: 18px;
  text-align: left;
  padding: clamp(22px, 4vw, 36px);
  border-radius: 26px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(16, 31, 107, .1);
}

.field { display: grid; gap: 7px; margin: 0; }

.field label {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 13px 15px;
  border-radius: 13px;
  border: 1.5px solid rgba(16, 31, 107, .16);
  background: rgba(255, 255, 255, .78);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-soft); opacity: .6; }

.field input:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(249, 112, 8, .16);
}

.field input.is-bad,
.field textarea.is-bad { border-color: #d64545; }
.field input.is-bad:focus,
.field textarea.is-bad:focus { box-shadow: 0 0 0 4px rgba(214, 69, 69, .15); }

.field__err:empty { display: none; }
.field__err {
  font-size: .8rem;
  color: #c33c3c;
}

/* Off-screen rather than display:none — bots skip hidden inputs. */
.cform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cform .btn {
  justify-self: start;
  margin-top: 4px;
  border: 0;
  cursor: pointer;
}
.cform .btn:disabled {
  opacity: .62;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.cform__status:empty { display: none; }
.cform__status {
  margin: 0;
  font-size: .9rem;
  color: var(--ink-soft);
}
.cform__status[data-state="bad"] { color: #c33c3c; }

.cform__done {
  width: 100%;
  margin-top: clamp(28px, 4vh, 44px);
  padding: clamp(28px, 5vw, 44px);
  border-radius: 26px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(16, 31, 107, .1);
}
.cform__done h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  letter-spacing: -.025em;
  color: var(--navy);
}


iframe[name="gform-sink"] {
  position: absolute;
  width: 0; height: 0;
  border: 0;
  visibility: hidden;
}

.field input:focus-visible,
.field textarea:focus-visible { outline: none; }

/* ─── Easter egg: past the end ────────────────────────────── */

/* Scroll runway below the footer. The first screen of it fades the curtain in;
   the rest is somewhere to sit while the film runs. */
.runway { height: 160vh; }

.launch {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: #000;
  opacity: var(--fade, 0);
  pointer-events: none;
}

/* The film is square, so it sits inside the smaller of the two axes. */
.launch video {
  width: min(100vw, 100svh);
  height: min(100vw, 100svh);
  object-fit: contain;
  opacity: 0;
  transition: opacity 900ms ease;
}
.launch.is-playing video { opacity: 1; }

/* Only offered once the curtain is actually black. visibility, not just
   opacity, so it is out of the tab order the rest of the time. */
.sound {
  position: absolute;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 9px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .82);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 0s linear 400ms,
              background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.launch.is-black .sound {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 400ms ease, visibility 0s,
              background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.sound:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.sound:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.sound svg { width: 17px; height: 17px; flex: none; }

/* The icon shows the current state: crossed out while muted. */
.sound .icon-loud { display: none; }
.sound[aria-pressed="true"] .icon-muted { display: none; }
.sound[aria-pressed="true"] .icon-loud { display: block; }

/* ─── Focus + reduced motion ──────────────────────────────── */

a:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero, .hero__mark, .hero__word, .hero__intro, .hero__hint,
  .product__art, .product__body, .product__index, .contact,
  .scene--product .stage, .scene--product .stage > * {
    transform: none !important;
    opacity: 1 !important;
  }
  .hero__mark { width: min(52vw, 380px); }
  .contact { opacity: 1 !important; transform: none !important; }
  .hero__hint svg { animation: none; }
  .orb { transform: none !important; }
  .scene { height: auto; }
  /* A full-screen video that starts on its own is the last thing wanted here. */
  .runway { height: 0; }
  .launch { display: none; }
  /* Nothing is pinned here, so there is no slide to absorb — overlapping the
     sections would just stack them on top of each other. */
  .scene + .scene { margin-top: 0; }
  /* ...and with no overlap, sections need not step out of the way of clicks. */
  .scene--product { pointer-events: auto; }
  .stage { position: static; height: auto; min-height: 100svh; }
}

@media (max-width: 860px) {
  .rail { display: none; }
}