/* ============================================================================
   MAXBULL LLC — maxbull.app
   Layer 1 of 3: the universal foundation. Everything below is plain CSS and
   works with JavaScript disabled, WebGPU absent and video blocked.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Surfaces, read off the logo: near-black through machined silver. */
  --void:      #050506;
  --carbon:    #0a0a0c;
  --graphite:  #131418;
  --edge:      #34373e;

  /* Ink */
  --silver:    #949aa3;
  --chrome:    #c9ced5;
  --white:     #f2f0ec;

  /* Product accents — restrained, one per chapter. */
  --ptce:      #e8a33c;
  --ptce-ink:  #f2b962;
  --unigo:     #3c6dff;
  --unigo-ink: #8aa5ff;
  --wingman:      #ff4d45;
  --wingman-ink:  #ff8b84;

  /* Active accent, re-bound per chapter. */
  --accent: var(--chrome);
  --accent-ink: var(--chrome);

  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid scale */
  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem);
  --step-0:  clamp(0.96rem, 0.90rem + 0.28vw, 1.12rem);
  --step-1:  clamp(1.15rem, 1.04rem + 0.52vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.22rem + 1.10vw, 2.20rem);
  --step-3:  clamp(2.00rem, 1.45rem + 2.70vw, 3.80rem);
  --step-4:  clamp(2.35rem, 1.30rem + 4.60vw, 5.20rem);
  --step-5:  clamp(2.60rem, 1.40rem + 4.20vw, 5.60rem);

  --gutter: clamp(1.25rem, 4.2vw, 5.5rem);
  --measure: 62ch;
  --rule: 1px solid color-mix(in srgb, var(--edge) 70%, transparent);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --nav-h: 4.5rem;
  color-scheme: dark;
}

@media (min-width: 900px) { :root { --nav-h: 5.25rem; } }

/* ----------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--void);
  color: var(--chrome);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.62;
  font-variation-settings: "wght" 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, video, canvas { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--white);
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "wght" 700, "wdth" 112;
  letter-spacing: -0.022em;
  line-height: 0.94;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--white); color: var(--void); }

/* ------------------------------------------------------------ utilities -- */
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; inset-block-start: 0.6rem; inset-inline-start: 0.6rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--white); color: var(--void);
  font: 600 0.85rem/1 var(--font-text);
  text-decoration: none; border-radius: 2px;
  transform: translateY(-160%);
  transition: transform 0.22s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.eyebrow, .kicker {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-variation-settings: "wght" 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--silver);
  margin: 0;
}
.kicker { display: flex; align-items: baseline; gap: 0.85rem; }
.kicker__num {
  font-family: var(--font-display);
  font-variation-settings: "wght" 700, "wdth" 100;
  color: var(--accent-ink);
  letter-spacing: 0.04em;
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: color-mix(in srgb, var(--chrome) 42%, transparent);
  display: inline-flex; align-items: center; gap: 0.7ch;
  padding: 0.95em 1.6em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-variation-settings: "wght" 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.32s var(--ease-out), border-color 0.32s var(--ease-out),
              transform 0.4s var(--ease-out);
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--white);
  transform: translateY(101%);
  transition: transform 0.42s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--void); border-color: var(--white); }

.btn--solid { --btn-bg: var(--white); --btn-fg: var(--void); --btn-bd: var(--white); }
.btn--solid::before { background: var(--void); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--white); border-color: var(--white); }

.btn--lg { padding: 1.15em 2.1em; font-size: var(--step-0); }

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: 100;
  padding-block-start: env(safe-area-inset-top);
  background: transparent;
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out),
              backdrop-filter 0.4s var(--ease-out);
  border-block-end: 1px solid transparent;
}
.nav[data-scrolled="true"] {
  background: color-mix(in srgb, var(--void) 78%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-block-end-color: color-mix(in srgb, var(--edge) 60%, transparent);
}

.nav__inner {
  block-size: var(--nav-h);
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}

.nav__brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
}
.nav__brand picture { display: block; }
.nav__symbol {
  inline-size: 2.1rem; block-size: 2.1rem;
  object-fit: contain;
  transition: transform 0.5s var(--ease-out);
}
.nav__brand:hover .nav__symbol { transform: translateY(-2px); }
.hero__logo { display: block; }
.nav__wordmark {
  font-family: var(--font-display);
  font-variation-settings: "wght" 800, "wdth" 118;
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}

.nav__links { display: none; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); }
.nav__links ul {
  display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__links a:not(.btn) {
  font-size: var(--step--1);
  font-variation-settings: "wght" 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--silver);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.3s var(--ease-out);
}
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: 1px;
  background: var(--accent-ink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.4s var(--ease-out);
}
.nav__links a:not(.btn):hover, .nav__links a:not(.btn)[aria-current="true"] { color: var(--white); }
.nav__links a:not(.btn):hover::after, .nav__links a:not(.btn)[aria-current="true"]::after { transform: none; }
.nav__cta { padding: 0.7em 1.25em; }

.nav__toggle {
  inline-size: 2.75rem; block-size: 2.75rem;
  display: grid; place-items: center;
  background: none; border: 1px solid color-mix(in srgb, var(--edge) 80%, transparent);
  border-radius: 2px; cursor: pointer; color: var(--white);
  transition: border-color 0.3s var(--ease-out);
}
.nav__toggle:hover { border-color: var(--chrome); }
.nav__toggle-bars { display: block; inline-size: 1.1rem; }
.nav__toggle-bars i {
  display: block; block-size: 1.5px; background: currentColor;
  transition: transform 0.35s var(--ease-out), opacity 0.2s linear;
}
.nav__toggle-bars i:first-child { margin-block-end: 5px; }
.nav__toggle[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.nav__drawer {
  padding: 1.25rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--void) 96%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-block-start: var(--rule);
  max-block-size: calc(100dvh - var(--nav-h));
  overflow-y: auto;
}
.nav__drawer[hidden] { display: none; }
.nav__drawer ul { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.nav__drawer li + li { border-block-start: var(--rule); }
.nav__drawer a:not(.btn) {
  display: block; padding-block: 0.95rem;
  font-family: var(--font-display);
  font-variation-settings: "wght" 600, "wdth" 108;
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  color: var(--white);
  text-decoration: none;
}
.nav__drawer .btn { inline-size: 100%; justify-content: center; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__drawer { display: none !important; }
}

body[data-menu-open="true"] { overflow: hidden; }

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block-start: calc(var(--nav-h) + clamp(1.5rem, 5vh, 3.5rem));
  padding-block-end: clamp(1.5rem, 4vh, 3rem);
  padding-inline: var(--gutter);
  isolation: isolate;
  overflow: clip;
}

.hero__stage { position: absolute; inset: 0; z-index: -1; background: var(--void); }
.hero__stage > * { position: absolute; inset: 0; }
.hero__poster img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  opacity: 0.9;
}
@media (max-width: 719px) {
  .hero__poster img { object-position: 50% 66%; }
  .hero__vignette {
    background:
      linear-gradient(to bottom, var(--void) 0%, color-mix(in srgb, var(--void) 88%, transparent) 38%,
                      color-mix(in srgb, var(--void) 72%, transparent) 62%, var(--void) 100%);
  }
}
@media (min-width: 720px) { .hero__poster img { object-position: 72% 50%; } }
.hero__canvas { inline-size: 100%; block-size: 100%; opacity: 0; transition: opacity 1.1s linear; }
.hero__canvas[data-active="true"] { opacity: 1; }

.hero__vignette {
  background:
    radial-gradient(130% 100% at 76% 46%, transparent 0%, color-mix(in srgb, var(--void) 34%, transparent) 62%, var(--void) 100%),
    linear-gradient(to right, var(--void) 0%, color-mix(in srgb, var(--void) 88%, transparent) 30%, color-mix(in srgb, var(--void) 30%, transparent) 56%, transparent 78%),
    linear-gradient(to bottom, color-mix(in srgb, var(--void) 72%, transparent) 0%, transparent 20%, transparent 66%, var(--void) 100%);
}
.hero__grain {
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

.hero__content {
  align-self: center;
  max-inline-size: min(100%, 54rem);
  display: grid;
  gap: clamp(0.85rem, 2vh, 1.45rem);
}

.hero__logo, .hero__logo img {
  inline-size: clamp(5rem, 9.5vw, 8.75rem);
  block-size: auto;
  margin-block-end: clamp(0.15rem, 0.8vh, 0.6rem);
  filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.6));
}

.hero__headline {
  font-size: var(--step-5);
  font-variation-settings: "wght" 800, "wdth" 118;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
}

.hero__lede {
  max-inline-size: 46ch;
  font-size: var(--step-1);
  color: var(--chrome);
  line-height: 1.48;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: clamp(0.4rem, 1.6vh, 1rem); }
@media (max-width: 560px) {
  .hero__actions { display: grid; gap: 0.6rem; }
  .hero__actions .btn { justify-content: center; }
}

.hero__scroll {
  justify-self: start; align-self: end;
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-size: var(--step--1);
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--silver); text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.hero__scroll:hover { color: var(--white); }
.hero__scroll-rule {
  inline-size: clamp(2.5rem, 6vw, 5rem); block-size: 1px;
  background: linear-gradient(to right, var(--chrome), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll-rule::after {
  content: ""; position: absolute; inset-block: 0; inline-size: 35%;
  background: var(--white);
  animation: rule-travel 3.4s var(--ease-in-out) infinite;
}
@keyframes rule-travel {
  0%, 12% { transform: translateX(-110%); }
  60%, 100% { transform: translateX(320%); }
}

/* ----------------------------------------------------------- work intro -- */
.work-intro {
  padding: clamp(5rem, 16vh, 11rem) var(--gutter);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  border-block-start: var(--rule);
}
.work-intro__title {
  font-size: clamp(2.1rem, 1.2rem + 3.9vw, 4.7rem);
  font-variation-settings: "wght" 700, "wdth" 105;
  line-height: 0.92;
}
.work-intro__body { max-inline-size: var(--measure); color: var(--silver); font-size: var(--step-1); }

@media (min-width: 900px) {
  .work-intro {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    align-items: end;
  }
  .work-intro .kicker { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------- divider -- */
.divider {
  position: relative;
  block-size: clamp(7rem, 16vw, 13rem);
  overflow: hidden;
  border-block: var(--rule);
}
.divider img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  opacity: 0.5;
}
.divider::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--void), transparent 26%, transparent 74%, var(--void)),
              linear-gradient(to bottom, color-mix(in srgb, var(--void) 55%, transparent), transparent 45%,
                              color-mix(in srgb, var(--void) 55%, transparent));
}

/* -------------------------------------------------------------- chapter -- */
.chapter {
  --accent: var(--chrome);
  --accent-ink: var(--chrome);
  position: relative;
  padding-block: clamp(5rem, 14vh, 10rem);
  isolation: isolate;
  overflow: clip;
  border-block-start: var(--rule);
}
.chapter--ptce    { --accent: var(--ptce);    --accent-ink: var(--ptce-ink); }
.chapter--unigo   { --accent: var(--unigo);   --accent-ink: var(--unigo-ink); }
.chapter--wingman { --accent: var(--wingman); --accent-ink: var(--wingman-ink); }

.chapter__bg { position: absolute; inset: 0; z-index: -1; }
.chapter__bg img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  opacity: 0.46;
}
.chapter__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--void) 0%, color-mix(in srgb, var(--void) 52%, transparent) 20%,
                    color-mix(in srgb, var(--void) 58%, transparent) 76%, var(--void) 100%),
    linear-gradient(to right, var(--void) 4%, color-mix(in srgb, var(--void) 80%, transparent) 42%, transparent 86%);
}

.chapter__grid {
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 6vw, 4.5rem);
}

.chapter__head { display: grid; gap: 0.9rem; justify-items: start; max-inline-size: 46rem; }
.chapter__head .chapter__positioning { margin-block-start: clamp(0.5rem, 1.6vw, 1rem); }
.chapter__index {
  font-family: var(--font-display);
  font-variation-settings: "wght" 800, "wdth" 100;
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 55%, transparent);
  margin: 0 0 0.2em;
}
.chapter__icon {
  inline-size: clamp(4.25rem, 8vw, 6rem);
  block-size: auto;
  border-radius: 22.37%;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chrome) 16%, transparent),
    0 26px 60px -20px rgba(0, 0, 0, 0.9);
}
.chapter__name {
  font-size: var(--step-3);
  font-variation-settings: "wght" 700, "wdth" 112;
}
.chapter__name-sub { font-variation-settings: "wght" 400, "wdth" 100; color: var(--silver); }
.chapter__name-plus { color: var(--accent-ink); }
.chapter__subtitle {
  font-size: var(--step--1);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.chapter__body { display: grid; gap: clamp(1.25rem, 3vw, 2rem); max-inline-size: 46rem; }
.chapter__positioning {
  font-family: var(--font-display);
  font-variation-settings: "wght" 600, "wdth" 104;
  font-size: var(--step-2);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--white);
  text-wrap: balance;
}
.chapter__copy { color: var(--silver); max-inline-size: var(--measure); }

.features { list-style: none; margin: 0; padding: 0; display: grid; }
.feature {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 1rem;
  padding-block: 0.95rem;
  border-block-start: var(--rule);
  align-items: start;
}
.feature:last-child { border-block-end: var(--rule); }
.feature__num {
  font-family: var(--font-display);
  font-variation-settings: "wght" 700, "wdth" 100;
  font-size: var(--step--1);
  color: var(--accent-ink);
  letter-spacing: 0.06em;
  padding-block-start: 0.28em;
}
.feature__text { color: var(--silver); font-size: var(--step-0); }
.feature__text b { color: var(--white); font-variation-settings: "wght" 600; }

.chapter__cta { margin-block-start: 0.5rem; }
.chapter__cta .btn--solid::before { background: var(--accent); }
.chapter__cta .btn--solid:hover { color: var(--void); border-color: var(--accent); }

@media (min-width: 1024px) {
  .chapter__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-areas:
      "head shots"
      "body shots";
    align-items: start;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: clamp(1.35rem, 2.4vw, 2.4rem);
  }
  .chapter__head { grid-area: head; }
  .chapter__body { grid-area: body; }
  .chapter__shots { grid-area: shots; position: sticky; inset-block-start: calc(var(--nav-h) + 2rem); }
}

/* ---------------------------------------------------- screenshot strip -- */
.chapter__shots { display: grid; gap: 0.9rem; min-inline-size: 0; }

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(11rem, 44vw, 15.5rem);
  gap: clamp(0.75rem, 1.6vw, 1.35rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block: clamp(1rem, 2vw, 2rem);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
  cursor: grab;
}
.shots::-webkit-scrollbar { display: none; }
.shots:active { cursor: grabbing; }
.shots:focus-visible { outline-offset: -3px; }

.shot {
  margin: 0;
  scroll-snap-align: center;
  position: relative;
  aspect-ratio: 1290 / 2796;
  border-radius: clamp(14px, 2.4vw, 22px);
  overflow: hidden;
  background: var(--graphite);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chrome) 12%, transparent),
    0 34px 70px -28px rgba(0, 0, 0, 0.95);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
  transform-origin: 50% 90%;
  will-change: transform;
}
.shot picture { display: block; block-size: 100%; }
.shot img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

@media (min-width: 1024px) {
  .shots { grid-auto-columns: clamp(13rem, 16vw, 17rem); margin-inline-end: calc(var(--gutter) * -1); }
}

.shots__hint {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #7f858e;
  margin: 0;
}
.shots__rule { flex: 1 1 auto; max-inline-size: 5rem; block-size: 1px; background: var(--edge); }

/* --------------------------------------------------------------- studio -- */
.studio {
  position: relative;
  padding-block: clamp(6rem, 18vh, 12rem);
  padding-inline: var(--gutter);
  border-block-start: var(--rule);
  isolation: isolate;
  overflow: clip;
}
.studio__bg { position: absolute; inset: 0; z-index: -1; }
.studio__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.26; }
.studio__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--void), color-mix(in srgb, var(--void) 60%, transparent) 40%, var(--void));
}
.studio__canvas {
  position: absolute; inset: 0;
  z-index: 2;                    /* above the section's own scrim */
  inline-size: 100%; block-size: 100%;
  opacity: 0; transition: opacity 1.2s linear;
  pointer-events: none;
}
.studio__canvas[data-active="true"] { opacity: 0.85; }

.studio__inner { display: grid; gap: clamp(1.75rem, 5vw, 3.25rem); position: relative; }
.studio__manifesto {
  font-size: var(--step-4);
  font-variation-settings: "wght" 700, "wdth" 102;
  line-height: 0.98;
  max-inline-size: 22ch;
}
.studio__cols { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); color: var(--silver); max-inline-size: 78rem; }
.studio__cols p { max-inline-size: 46ch; }
.studio__mark, .studio__mark img {
  inline-size: clamp(3.5rem, 6vw, 5.5rem); block-size: auto;
}
.studio__mark { opacity: 0.55; justify-self: start; }

@media (min-width: 900px) {
  .studio__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
}

/* --------------------------------------------------------- capabilities -- */
.caps {
  position: relative;
  padding: clamp(5rem, 15vh, 10rem) var(--gutter);
  border-block-start: var(--rule);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  isolation: isolate;
  overflow: clip;
}
.caps__bg { position: absolute; inset: 0; z-index: -1; }
.caps__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.16; }
.caps__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--void) 0%, color-mix(in srgb, var(--void) 72%, transparent) 40%, var(--void) 100%);
}
.caps__index { list-style: none; margin: 0; padding: 0; }
.cap {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-areas: "num name" ".  note";
  gap: 0.15rem 1rem;
  padding-block: clamp(1rem, 2.4vw, 1.6rem);
  border-block-start: var(--rule);
  position: relative;
  transition: color 0.4s var(--ease-out);
}
.caps__index li:last-child { border-block-end: var(--rule); }
.cap__num {
  grid-area: num;
  font-family: var(--font-display);
  font-variation-settings: "wght" 700, "wdth" 100;
  font-size: var(--step--1);
  color: var(--silver);
  letter-spacing: 0.06em;
  padding-block-start: 0.55em;
  transition: color 0.4s var(--ease-out);
}
.cap__name {
  grid-area: name;
  font-family: var(--font-display);
  font-variation-settings: "wght" 600, "wdth" 108;
  font-size: var(--step-2);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--white);
  transition: transform 0.5s var(--ease-out);
}
.cap__note { grid-area: note; color: var(--silver); font-size: var(--step-0); max-inline-size: 52ch; }

@media (hover: hover) and (min-width: 900px) {
  .cap { grid-template-columns: 3.5rem minmax(0, 0.9fr) minmax(0, 1fr);
         grid-template-areas: "num name note"; align-items: baseline; }
  .cap__name { transform-origin: 0 50%; }
  .cap:hover .cap__name { transform: translateX(0.6rem); }
  .cap:hover .cap__num { color: var(--white); }
}

/* -------------------------------------------------------------- contact -- */
.contact {
  position: relative;
  min-block-size: 88svh;
  display: grid; align-items: center;
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
  border-block-start: var(--rule);
  isolation: isolate;
  overflow: clip;
}
.contact__bg { position: absolute; inset: 0; z-index: -1; }
.contact__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.4; }
.contact__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--void) 0%, color-mix(in srgb, var(--void) 45%, transparent) 45%, var(--void) 100%);
}
.contact__inner { display: grid; gap: clamp(1.25rem, 3vw, 2rem); justify-items: start; }
.contact__headline {
  font-size: clamp(2.1rem, 1.15rem + 4.05vw, 4.8rem);
  max-inline-size: 24ch;
  font-variation-settings: "wght" 800, "wdth" 112;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.contact__body { color: var(--silver); max-inline-size: 44ch; font-size: var(--step-1); }

/* --------------------------------------------------------------- footer -- */
.foot {
  border-block-start: var(--rule);
  padding: clamp(3rem, 8vh, 5rem) var(--gutter) calc(clamp(2rem, 5vh, 3rem) + env(safe-area-inset-bottom));
  background: var(--carbon);
}
.foot__inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.foot__brand { display: grid; gap: 1rem; justify-items: start; }
.foot__brand picture, .foot__brand img { inline-size: 4.25rem; block-size: auto; opacity: 0.9; }
.foot__brand p { color: var(--silver); font-size: var(--step--1); line-height: 1.7; }
.foot__brand a { color: var(--chrome); text-decoration: none; }
.foot__brand a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.foot__title {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-variation-settings: "wght" 500;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--silver); margin: 0 0 1rem;
}
.foot__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.foot__nav a {
  color: var(--chrome); text-decoration: none; font-size: var(--step-0);
  transition: color 0.25s var(--ease-out);
}
.foot__nav a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.foot__legal { color: #868c95; font-size: var(--step--1); }

@media (min-width: 760px) {
  .foot__inner {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .foot__legal { grid-column: 1 / -1; padding-block-start: clamp(1.5rem, 4vw, 2.5rem); border-block-start: var(--rule); }
}

/* ============================================================================
   Layer 2 — native enhanced motion.
   Scroll-driven animations where supported; an IntersectionObserver class
   does the same job everywhere else. Neither is required to read the page.
   ========================================================================= */

@keyframes mb-reveal {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes mb-rise {
  from { opacity: 0; transform: translate3d(0, 0.9em, 0); }
  to   { opacity: 1; transform: none; }
}

/* Fallback path: JS toggles .is-in. */
html.js:not(.sda) .reveal { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
html.js:not(.sda) .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

@supports (animation-timeline: view()) {
  html.sda .reveal {
    animation: mb-reveal linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 24%;
  }
}


/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.js:not(.sda) .reveal { opacity: 1; transform: none; }
  html.sda .reveal { animation: none; opacity: 1; transform: none; }
  .shots { scroll-snap-type: none; }
  .hero__scroll-rule::after { display: none; }
}

/* ------------------------------------------------------------- no-js -- */
html.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------- forced colors ----- */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonBorder; }
  .chapter__bg, .contact__bg, .studio__bg, .hero__stage { display: none; }
  .chapter__index { -webkit-text-stroke: 0; color: CanvasText; }
}

/* ------------------------------------------------------------- print -- */
@media print {
  .nav, .hero__stage, .chapter__bg, .studio__bg, .contact__bg, .shots__hint { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, .feature__text b { color: #000; }
}

/* Line breaks that only make sense at wider measures. */
.br-wide { display: none; }
@media (min-width: 700px) { .br-wide { display: inline; } }

/* ============================================================================
   CINEMATIC LAYER
   A fixed stack of Seedance films behind the whole page, an accent wash that
   transitions per chapter, and scroll-scrubbed depth. `--p` (0…1) and `--pc`
   (−1…1) are written by src/motion/scrub.js; every rule below degrades to its
   resting value when they are absent, so none of this is required to read the
   page. All of it is switched off under prefers-reduced-motion.
   ========================================================================= */

@property --accent     { syntax: "<color>"; inherits: true; initial-value: #c9ced5; }
@property --accent-ink { syntax: "<color>"; inherits: true; initial-value: #c9ced5; }

:root { transition: --accent 800ms var(--ease-in-out), --accent-ink 800ms var(--ease-in-out); }
html[data-chapter="ptce"]    { --accent: #e8a33c; --accent-ink: #f2b962; }
html[data-chapter="unigo"]   { --accent: #3c6dff; --accent-ink: #8aa5ff; }
html[data-chapter="wingman"] { --accent: #ff4d45; --accent-ink: #ff8b84; }
html[data-chapter="studio"], html[data-chapter="contact"], html[data-chapter="hero"] {
  --accent: #c9ced5; --accent-ink: #c9ced5;
}

/* ---------------------------------------------------------- film backdrop -- */
.backdrop {
  position: fixed; inset: 0; z-index: -3;
  background: var(--void);
  opacity: 0;
  transition: opacity 900ms linear;
  pointer-events: none;
  contain: strict;
}
html[data-backdrop="on"] .backdrop { opacity: 1; }

.backdrop__layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 950ms var(--ease-in-out);
  background-position: 62% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.backdrop__layer[data-active="true"] { opacity: 1; }
.backdrop__layer video {
  opacity: 0;
  transition: opacity 900ms linear;
}
.backdrop__layer[data-ready="true"] video { opacity: 1; }
.backdrop__layer video {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
@media (max-width: 719px) { .backdrop__layer video { object-position: 50% 50%; } }

/* Once film is running the per-section posters step aside. The hero poster
   fades (it is already decoded and on screen); the below-the-fold ones are
   taken out of layout entirely, which stops their lazy images ever being
   fetched. If a film later fails, `data-backdrop` is removed and they load
   normally. */
html[data-backdrop="on"] .hero__poster {
  opacity: 0;
  transition: opacity 800ms linear;
}
html[data-backdrop="on"] .chapter__bg picture,
html[data-backdrop="on"] .studio__bg picture,
html[data-backdrop="on"] .caps__bg picture,
html[data-backdrop="on"] .contact__bg picture,
html[data-backdrop="on"] .divider picture { display: none; }

/* ------------------------------------------------------------ accent wash -- */
.wash {
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 74% 42%,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%,
      color-mix(in srgb, var(--accent) 5%, transparent) 42%,
      transparent 70%);
}
.wash::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--void) 92%, transparent) 0%,
      color-mix(in srgb, var(--void) 78%, transparent) 32%,
      color-mix(in srgb, var(--void) 26%, transparent) 62%,
      color-mix(in srgb, var(--void) 18%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--void) 62%, transparent) 0%,
      transparent 20%,
      transparent 72%,
      color-mix(in srgb, var(--void) 62%, transparent) 100%);
}
@media (max-width: 719px) {
  .wash::after {
    background: linear-gradient(to bottom,
      var(--void) 0%,
      color-mix(in srgb, var(--void) 84%, transparent) 30%,
      color-mix(in srgb, var(--void) 62%, transparent) 62%,
      var(--void) 100%);
  }
}

/* Global film grain, above the page but below the navigation. */
.grain {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: 0.19;
  mix-blend-mode: overlay;
  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='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* -------------------------------------------------------- scroll progress -- */
.rail {
  position: fixed; z-index: 95;
  inset-block: 0; inset-inline-end: clamp(0.65rem, 1.7vw, 1.6rem);
  display: none; place-items: center;
  pointer-events: none;
}
@media (min-width: 1024px) { .rail { display: grid; } }
.rail__track {
  inline-size: 1px; block-size: min(34vh, 300px);
  background: color-mix(in srgb, var(--edge) 85%, transparent);
  position: relative; overflow: hidden;
}
.rail__fill {
  position: absolute; inset-inline: -1px; inset-block-start: 0;
  block-size: 100%;
  background: var(--accent-ink);
  transform-origin: 50% 0;
  transform: scaleY(var(--p, 0));
}

/* ------------------------------------------------------------------ hero -- */
.hero__stage {
  transform: translate3d(0, calc(var(--p, 0) * 9vh), 0) scale(calc(1 + var(--p, 0) * 0.13));
  will-change: transform;
}
.hero__content {
  transform: translate3d(0, calc(var(--p, 0) * -13vh), 0);
  opacity: calc(1 - var(--p, 0) * 1.45);
  will-change: transform, opacity;
}
.hero__scroll { opacity: calc(1 - var(--p, 0) * 3.2); }

/* --------------------------------------------------------------- chapter -- */
.chapter__bg img,
.contact__bg img,
.studio__bg img {
  transform: translate3d(0, calc(var(--pc, 0) * -5%), 0) scale(1.1);
  will-change: transform;
}
.chapter__index {
  transform: translate3d(0, calc(var(--pc, 0) * -3.2rem), 0);
  opacity: calc(0.55 + (1 - var(--pc, 0) * var(--pc, 0)) * 0.45);
  will-change: transform;
}
.chapter__head { transform: translate3d(0, calc(var(--pc, 0) * -1.1rem), 0); }
.chapter__body { transform: translate3d(0, calc(var(--pc, 0) * -0.5rem), 0); }

/* --------------------------------------------- screenshots, scrubbed depth -- */
.shots {
  transform: translate3d(calc(var(--pc, 0) * -3.5%), 0, 0);
  perspective: 1400px;
  will-change: transform;
}
.shot {
  --fan: calc((var(--i, 0) - 2.5) * 0.5rem);
  transform:
    translate3d(0, calc(var(--fan) + var(--pc, 0) * (-1.4rem - var(--i, 0) * 0.42rem)), 0)
    rotate(calc(var(--pc, 0) * -0.45deg));
  transition: box-shadow 0.5s var(--ease-out);
  will-change: transform;
}
.shot img { transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out); }
@media (hover: hover) and (min-width: 1024px) {
  .shots:hover .shot img { filter: brightness(0.62) saturate(0.85); }
  .shots .shot:hover img { transform: scale(1.05); filter: none; }
  .shots .shot:hover {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
      0 46px 90px -30px rgba(0, 0, 0, 0.98);
  }
}

/* ----------------------------------------------------- chapter light cuts -- */
.cut { position: relative; block-size: 0; overflow: visible; z-index: 0; }
.cut span {
  position: absolute; inset-inline: 0;
  block-size: 70vh; inset-block-start: -35vh;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--accent) 42%, transparent) 46%,
    color-mix(in srgb, var(--white) 26%, transparent) 50%,
    color-mix(in srgb, var(--accent) 42%, transparent) 54%,
    transparent 100%);
  filter: blur(40px);
  opacity: calc(0.9 - (var(--pc, 1) * var(--pc, 1)) * 0.9);
  transform: translate3d(0, calc(var(--pc, 0) * 18vh), 0)
             scaleY(calc(0.35 + (1 - var(--pc, 0) * var(--pc, 0)) * 0.9));
  will-change: transform, opacity;
}

/* -------------------------------------------------------------- divider --- */
.divider img {
  transform: translate3d(0, calc(var(--pc, 0) * -8%), 0) scale(1.14);
}

/* -------------------------------------------------------------- studio ---- */
.studio__mark {
  transform: rotate(calc(var(--pc, 0) * 4deg)) translate3d(0, calc(var(--pc, 0) * -1rem), 0);
}

/* -------------------------------------------------------- capabilities ---- */
.cap { --slide: calc((1 - var(--p, 1)) * 2rem); }
.cap__name { will-change: transform; }

/* -------------------------------------------------------------- contact --- */
.contact__inner { transform: translate3d(0, calc(var(--pc, 0) * -2.5rem), 0); }

/* ------------------------------------------------------- word stagger ----- */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block-end: 0.09em;
  margin-block-end: -0.09em;
}
.word__i { display: inline-block; will-change: transform, opacity; }

html.js [data-split="done"] .word__i {
  transform: translate3d(0, 108%, 0) rotate(2.4deg);
  opacity: 0;
}
html.js [data-split="done"].words-in .word__i {
  animation: word-in 1.05s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 52ms + 60ms);
}
@keyframes word-in {
  from { transform: translate3d(0, 108%, 0) rotate(2.4deg); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}

/* Reveals get a touch more travel and a slight blur settle now. */
html.js:not(.sda) .reveal { opacity: 0; transform: translate3d(0, 2.2rem, 0); }
html.js:not(.sda) .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
@supports (animation-timeline: view()) {
  html.sda .reveal { animation-range: entry 2% cover 22%; }
}

/* --------------------------------------------------- motion, switched off -- */
@media (prefers-reduced-motion: reduce) {
  .backdrop, .grain, .cut { display: none !important; }
  .rail__fill { transform: scaleY(1); }
  .hero__stage, .hero__content, .chapter__index, .chapter__head, .chapter__body,
  .shots, .shot, .studio__mark, .contact__inner, .divider img,
  .chapter__bg img, .contact__bg img, .studio__bg img {
    transform: none !important;
  }
  .hero__content, .hero__scroll, .chapter__index { opacity: 1 !important; }
  html.js [data-split="done"] .word__i { transform: none !important; opacity: 1 !important; animation: none !important; }
  html[data-backdrop="on"] .chapter__bg picture,
  html[data-backdrop="on"] .studio__bg picture,
  html[data-backdrop="on"] .caps__bg picture,
  html[data-backdrop="on"] .contact__bg picture,
  html[data-backdrop="on"] .divider picture { display: block; }
  html[data-backdrop="on"] .hero__poster { opacity: 1; }
}

html.no-js .word__i { transform: none; opacity: 1; }

/* When the film stack is live, the sections stop painting their own ground and
   their own scrims — the fixed `.wash` is the only thing between film and type,
   so the darkness never doubles up. */
html[data-backdrop="on"] .hero__stage { background: transparent; }
html[data-backdrop="on"] .divider { display: none; }
html[data-backdrop="on"] .chapter__bg::after,
html[data-backdrop="on"] .studio__bg::after,
html[data-backdrop="on"] .caps__bg::after,
html[data-backdrop="on"] .contact__bg::after { opacity: 0.2; }
html[data-backdrop="on"] .hero__vignette { opacity: 0.3; }

/* A touch of grade on the film so it holds up under the scrim. */
.backdrop__layer video { filter: contrast(1.1) saturate(1.06) brightness(1.14); }

/* ============================================================================
   ENQUIRY FORM
   Editorial rather than boxy: rules instead of input boxes, labels that lift,
   budget and timeline as one-tap chips. Works as a plain form POST with
   JavaScript off; src/form/enquiry.js takes over when it is on.
   ========================================================================= */

.contact { min-block-size: auto; align-items: start; }
.contact__inner { justify-items: stretch; gap: clamp(2rem, 5vw, 3.5rem); }
.contact__lede { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); justify-items: start; }

@media (min-width: 1000px) {
  .contact__inner {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
  .contact__lede { position: sticky; inset-block-start: calc(var(--nav-h) + 3rem); }
  .enquiry, .enquiry__done { grid-column: 2; grid-row: 1; }
}

/* ------------------------------------------------------------------ form -- */
.enquiry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.1rem) clamp(1.25rem, 2.5vw, 2rem);
  align-content: start;
}
@media (min-width: 620px) {
  .enquiry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }
}

.field { position: relative; display: grid; }

.field__label {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-variation-settings: "wght" 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--silver);
  margin-block-end: 0.55rem;
  transition: color 0.28s var(--ease-out);
}

.field__input {
  appearance: none;
  inline-size: 100%;
  padding: 0.35rem 0 0.75rem;
  background: transparent;
  border: 0;
  border-block-end: 1px solid color-mix(in srgb, var(--chrome) 30%, transparent);
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-text);
  font-size: var(--step-1);
  line-height: 1.4;
  transition: border-color 0.35s var(--ease-out);
}
.field__input--area { resize: vertical; min-block-size: 6.5rem; }
.field__input::placeholder { color: transparent; }
.field__input:focus { border-block-end-color: var(--white); }
/* Pointer focus gets the drawn rule alone; keyboard focus also gets a real
   ring, because a 1px line is not a focus indicator you can rely on. */
.field__input:focus:not(:focus-visible) { outline: none; }
.field__input:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
  border-radius: 2px;
}
.field:focus-within .field__label { color: var(--white); }

/* The rule redraws from the left on focus — the only flourish in the form. */
.field::after {
  content: "";
  position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease-out);
  pointer-events: none;
}
.field:focus-within::after { transform: scaleX(1); }

.field[data-invalid="true"] .field__input { border-block-end-color: var(--wingman-ink); }
.field[data-invalid="true"] .field__label { color: var(--wingman-ink); }
.field__err {
  margin-block-start: 0.5rem;
  font-size: var(--step--1);
  color: var(--wingman-ink);
  letter-spacing: 0.01em;
}
.field__count {
  position: absolute; inset-block-end: -1.45rem; inset-inline-end: 0;
  font-size: 0.7rem; letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--silver) 70%, transparent);
  font-variant-numeric: tabular-nums;
}
.field__count[data-near="true"] { color: var(--wingman-ink); }

/* ----------------------------------------------------------------- chips -- */
.chips { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.chips__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; }
.chip input {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0;
}
.chip label {
  display: inline-flex; align-items: center;
  padding: 0.62em 1.05em;
  border: 1px solid color-mix(in srgb, var(--chrome) 28%, transparent);
  border-radius: 100px;
  font-size: var(--step--1);
  font-variation-settings: "wght" 500;
  letter-spacing: 0.04em;
  color: var(--chrome);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  user-select: none;
}
.chip label:hover { border-color: var(--chrome); color: var(--white); }
.chip input:checked + label {
  background: var(--white);
  border-color: var(--white);
  color: var(--void);
}
.chip input:focus-visible + label {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
@media (hover: hover) { .chip label:active { transform: scale(0.97); } }

/* Honeypot: present in the DOM, unreachable by a person. */
.hp {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ------------------------------------------------------- submit + status -- */
.enquiry__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.9rem clamp(1rem, 2vw, 1.75rem);
  margin-block-start: clamp(0.25rem, 1vw, 0.75rem);
}
.enquiry__send { position: relative; }
.enquiry__send[disabled] { cursor: progress; opacity: 0.75; }
.enquiry__spin {
  inline-size: 0; block-size: 0.85em;
  border-radius: 50%;
  border: 2px solid transparent;
  border-block-start-color: currentColor;
  border-inline-start-color: currentColor;
  opacity: 0;
  transition: inline-size 0.3s var(--ease-out), opacity 0.3s var(--ease-out),
              margin-inline-start 0.3s var(--ease-out);
}
.enquiry[data-state="sending"] .enquiry__spin {
  inline-size: 0.85em;
  margin-inline-start: 0.15em;
  opacity: 1;
  animation: mb-spin 0.7s linear infinite;
}
@keyframes mb-spin { to { transform: rotate(360deg); } }

.enquiry__note {
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--silver) 82%, transparent);
  max-inline-size: 28ch;
}
.enquiry__status {
  grid-column: 1 / -1;
  min-block-size: 1.2em;
  font-size: var(--step--1);
  color: var(--silver);
}
.enquiry__status[data-tone="error"] { color: var(--wingman-ink); }

.enquiry[hidden], .enquiry__done[hidden] { display: none; }

/* --------------------------------------------------------------- success -- */
.enquiry__done {
  display: grid; gap: 1.1rem; justify-items: start;
  align-content: start;
  padding-block: clamp(1rem, 3vw, 2.5rem);
  animation: mb-rise 0.7s var(--ease-out) both;
}
.enquiry__done img { inline-size: 3rem; block-size: auto; opacity: 0.85; }
.enquiry__done h3 {
  font-size: var(--step-3);
  font-variation-settings: "wght" 700, "wdth" 110;
  outline: none;
}
.enquiry__done p { color: var(--silver); max-inline-size: 42ch; }

@media (prefers-reduced-motion: reduce) {
  .field::after { transition: none; }
  .enquiry__done { animation: none; }
  .enquiry[data-state="sending"] .enquiry__spin { animation: none; }
}

/* In the two-column contact layout the headline shares the width with the
   form, so it steps down a size and stops forcing its own line break. */
@media (min-width: 1000px) {
  .contact__headline {
    font-size: clamp(2.2rem, 0.8rem + 2.9vw, 3.6rem);
    max-inline-size: 13ch;
  }
  .contact__lede .br-wide { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCREENSHOT LIGHTBOX

   The button sits on top of each screenshot in the strip; the panel is built
   by src/motion/lightbox.js and appended to <body>, so none of this exists
   without JavaScript — and without JavaScript the strips still scroll.
   ═══════════════════════════════════════════════════════════════════════════ */

.shot__zoom {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: end center;
  padding-block-end: clamp(0.6rem, 1.4vw, 1rem);
  appearance: none; border: 0; background: none;
  border-radius: inherit;
  cursor: zoom-in;
  color: var(--white);
}
.shot__zoom:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.shot__zoom-badge {
  display: grid; place-items: center;
  inline-size: 2.1rem; block-size: 2.1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--void) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--chrome) 40%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(0.4rem) scale(0.9);
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}
.shot__zoom-badge svg { inline-size: 1rem; block-size: 1rem; }
.shot:hover .shot__zoom-badge,
.shot__zoom:focus-visible .shot__zoom-badge { opacity: 1; transform: none; }
@media (hover: none) {
  .shot__zoom-badge { opacity: 0.9; transform: none; }
}

.lb {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  padding-block-start: max(clamp(1rem, 3vw, 2.5rem), env(safe-area-inset-top));
}
.lb[hidden] { display: none; }
.lb__scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--void) 90%, transparent);
  backdrop-filter: blur(22px) saturate(0.8);
  -webkit-backdrop-filter: blur(22px) saturate(0.8);
  cursor: zoom-out;
}
.lb__panel {
  position: relative;
  display: grid; justify-items: center;
  gap: clamp(0.85rem, 1.6vw, 1.3rem);
  max-block-size: 100%;
  min-block-size: 0;
}
.lb__frame {
  margin: 0;
  border-radius: clamp(20px, 2.2vw, 30px);
  overflow: hidden;
  background: var(--graphite);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chrome) 16%, transparent),
    0 70px 130px -50px rgba(0, 0, 0, 1);
  will-change: transform;
  touch-action: pan-y;
}
.lb__frame picture { display: block; }
.lb__img {
  display: block;
  inline-size: auto; block-size: auto;
  max-block-size: min(76vh, 900px);
  max-inline-size: min(92vw, 420px);
  -webkit-user-drag: none; user-select: none;
}
.lb__chrome {
  display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.5rem);
}
.lb__step {
  display: grid; place-items: center;
  inline-size: 2.6rem; block-size: 2.6rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--carbon) 80%, transparent);
  border: 1px solid var(--edge);
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out),
              opacity 0.25s var(--ease-out);
}
.lb__step svg { inline-size: 1.15rem; block-size: 1.15rem; }
.lb__step:hover:not(:disabled) { border-color: var(--chrome); background: var(--graphite); }
.lb__step:disabled { opacity: 0.28; cursor: default; }
.lb__step:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.lb__count {
  margin: 0;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #9aa0a8;
  font-variant-numeric: tabular-nums;
  min-inline-size: 4.5ch; text-align: center;
}
.lb__caption {
  margin: 0;
  max-inline-size: 46ch;
  text-align: center;
  font-size: var(--step--1);
  line-height: 1.55;
  color: #9aa0a8;
}
.lb__close {
  position: absolute;
  inset-block-start: max(clamp(0.8rem, 2vw, 1.6rem), env(safe-area-inset-top));
  inset-inline-end: clamp(0.8rem, 2vw, 1.6rem);
  display: grid; place-items: center;
  inline-size: 2.9rem; block-size: 2.9rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--carbon) 84%, transparent);
  border: 1px solid var(--edge);
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.lb__close svg { inline-size: 1.25rem; block-size: 1.25rem; }
.lb__close:hover { border-color: var(--chrome); transform: rotate(90deg); }
.lb__close:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

body[data-lightbox-open="true"] { overflow: hidden; }

/* Landscape phones have no vertical room to spare: drop the caption and let
   the picture take the height. */
@media (max-height: 520px) {
  .lb__caption { display: none; }
  .lb__img { max-block-size: 78vh; }
}

@media (prefers-reduced-motion: reduce) {
  .shot__zoom-badge { transition: none; }
  .lb__close:hover { transform: none; }
}

/* On a phone the screenshots and the screen have almost the same shape, so the
   picture goes edge to edge rather than sitting in a card, and the controls
   float over it. */
@media (max-width: 640px) {
  .lb { padding: 0; }
  .lb__panel { gap: 0; inline-size: 100%; block-size: 100%; align-content: center; }
  .lb__frame {
    border-radius: 0;
    box-shadow: none;
    justify-self: center; align-self: center;
  }
  .lb__img {
    max-inline-size: 100vw;
    max-block-size: 100vh;
    max-block-size: 100dvh;
  }
  .lb__caption { display: none; }
  .lb__chrome {
    position: absolute;
    inset-block-end: calc(env(safe-area-inset-bottom) + 1.1rem);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--void) 62%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .lb__step { inline-size: 2.4rem; block-size: 2.4rem; }
  .lb__count { color: var(--white); }
  .lb__close {
    inset-block-start: max(0.7rem, calc(env(safe-area-inset-top) + 0.4rem));
    inset-inline-end: 0.7rem;
  }
}

/* Belt and braces: the drawer's link colour must never repaint the solid
   button's label white on a white fill. */
.nav__drawer .btn--solid { color: var(--void); }
/* ═══════════════════════════════════════════════════════════════════════════
   SOUND CONTROL

   Fixed bottom-right, built by src/audio/ambience.js. One capsule in four
   modes, set as data-mode on .sound:

     invite  first visit — speaker, pulsing bars, two lines of copy, halo
     brief   the three seconds after it is accepted: "Sound on"
     off     resting and silent — speaker + "Sound off", never bare dots
     on      resting and playing — the compact visualiser alone

   The bars are driven by --v per bar (0…1) from the AnalyserNode; without Web
   Audio they fall back to a slow CSS drift, and while inviting they run a
   cobalt-to-amber pulse instead, since there is no audio to read yet.
   ═══════════════════════════════════════════════════════════════════════════ */

.sound {
  position: fixed;
  z-index: 96;
  inset-block-end: max(clamp(1rem, 2.4vw, 1.9rem), calc(env(safe-area-inset-bottom) + 0.9rem));
  inset-inline-end: max(clamp(1rem, 2.4vw, 1.9rem), calc(env(safe-area-inset-right) + 0.9rem));
  display: grid;
  justify-items: end;
  gap: 0.45rem;
  pointer-events: none;
}

/* ── the capsule ──────────────────────────────────────────────────────────── */
.sound__btn {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; gap: 0.6rem;
  min-block-size: 42px;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chrome) 20%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chrome) 7%, transparent), transparent 62%),
    color-mix(in srgb, var(--void) 66%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--chrome) 14%, transparent),
    0 18px 36px -18px rgba(0, 0, 0, 0.9);
  color: var(--white);
  cursor: pointer;
  text-align: start;
  transition: border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out), opacity 0.3s var(--ease-out),
              gap 0.55s var(--ease-out), padding 0.55s var(--ease-out);
}
.sound__btn:hover {
  border-color: color-mix(in srgb, #3c6dff 45%, var(--chrome) 30%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--chrome) 20%, transparent),
    0 22px 44px -18px rgba(0, 0, 0, 0.95),
    0 0 26px -8px color-mix(in srgb, #3c6dff 55%, transparent);
}
.sound__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ── speaker ──────────────────────────────────────────────────────────────── */
.sound__icon {
  display: grid; place-items: center;
  inline-size: 1.05rem; block-size: 1.05rem;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--chrome) 88%, var(--white));
  transition: inline-size 0.5s var(--ease-out), opacity 0.4s var(--ease-out),
              margin 0.5s var(--ease-out), color 0.4s var(--ease-out);
}
.sound__icon svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.sound__wave { transition: opacity 0.4s var(--ease-out); }
/* Silent: the sound waves come off the speaker, so the icon reads as "muted". */
.sound[data-playing="false"] .sound__wave { opacity: 0.22; }
.sound[data-playing="true"] .sound__icon { color: #8ea8ff; }
/* Playing and at rest, the bars say everything — the speaker folds away. */
.sound[data-mode="on"] .sound__icon {
  inline-size: 0; opacity: 0; margin-inline-end: -0.6rem;
}

/* ── bars ─────────────────────────────────────────────────────────────────── */
.sound__bars {
  display: flex; align-items: center; justify-content: space-between;
  inline-size: 60px; block-size: 18px;
  flex: 0 0 auto;
  transition: inline-size 0.5s var(--ease-out), opacity 0.4s var(--ease-out),
              margin 0.5s var(--ease-out);
}
.sound__bars i {
  --v: 0;
  inline-size: 2px;
  block-size: 100%;
  border-radius: 2px;
  transform-origin: 50% 50%;
  /* 0.13 is the resting sliver; the analyser fills the rest. */
  transform: scaleY(calc(0.13 + var(--v) * 0.87));
  background: linear-gradient(180deg, #f0b451 0%, #6f92ff 38%, #2f5ce0 100%);
  opacity: 0.55;
  transition: opacity 0.5s var(--ease-out);
}
.sound[data-playing="true"] .sound__bars i {
  opacity: 1;
  filter: drop-shadow(0 0 4px color-mix(in srgb, #3c6dff 60%, transparent));
}
/* Off and at rest the speaker and the words carry it; a row of dots beside
   them would only be noise. */
.sound[data-mode="off"] .sound__bars {
  inline-size: 0; opacity: 0; margin-inline-end: -0.6rem;
}

/* No analyser yet (no Web Audio, or un-gestured autoplay): a slow drift. */
.sound[data-playing="true"]:not([data-analyser="true"]) .sound__bars i {
  animation: sound-drift 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.19s);
}
@keyframes sound-drift {
  0%, 100% { transform: scaleY(0.22); }
  50%      { transform: scaleY(0.78); }
}
/* Inviting: nothing to analyse yet, so the row breathes cobalt into amber. */
.sound[data-mode="invite"] .sound__bars i {
  opacity: 1;
  animation: sound-invite 1.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.14s);
}
@keyframes sound-invite {
  0%, 100% { transform: scaleY(0.18); filter: none; }
  45%      { transform: scaleY(0.72); filter: drop-shadow(0 0 5px color-mix(in srgb, #3c6dff 70%, transparent)); }
  70%      { transform: scaleY(0.4);  filter: drop-shadow(0 0 5px color-mix(in srgb, #f0b451 55%, transparent)); }
}

/* ── copy ─────────────────────────────────────────────────────────────────── */
.sound__copy {
  display: grid;
  gap: 0.12rem;
  max-inline-size: 15rem;
  overflow: hidden;
  transition: max-inline-size 0.55s var(--ease-out), opacity 0.4s var(--ease-out),
              margin 0.55s var(--ease-out);
}
.sound__lead {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9aa0a8;
  white-space: nowrap;
  overflow: hidden;
  max-block-size: 1.2em;
  max-inline-size: 15rem;
  transition: max-block-size 0.45s var(--ease-out), max-inline-size 0.5s var(--ease-out),
              opacity 0.35s var(--ease-out);
}
.sound__cta {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  font-variation-settings: "wght" 550;
  color: var(--white);
  white-space: nowrap;
}
.sound__arrow {
  display: inline-block;
  margin-inline-start: 0.45ch;
  transition: transform 0.35s var(--ease-out), opacity 0.3s var(--ease-out);
}
.sound__btn:hover .sound__arrow { transform: translateX(2px); }
/* Only the invitation asks for anything, so only it gets the lead and arrow. */
.sound:not([data-mode="invite"]) .sound__lead { max-block-size: 0; max-inline-size: 0; opacity: 0; }
.sound:not([data-mode="invite"]) .sound__arrow { display: none; }
/* Playing and settled: the capsule is just the visualiser again. */
.sound[data-mode="on"] .sound__copy {
  max-inline-size: 0; opacity: 0; margin-inline-start: -0.6rem;
}

/* ── halo: two and a half pulses, then gone ───────────────────────────────── */
/* Inside the button, so it traces the capsule exactly as the capsule grows. */
.sound__halo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.sound[data-mode="invite"] .sound__halo {
  animation: sound-halo 2.1s ease-out 3;
}
@keyframes sound-halo {
  0%   { opacity: 0.55; box-shadow: 0 0 0 0 color-mix(in srgb, #3c6dff 45%, transparent); }
  70%  { opacity: 0;    box-shadow: 0 0 0 16px color-mix(in srgb, #3c6dff 0%, transparent); }
  100% { opacity: 0;    box-shadow: 0 0 0 0 transparent; }
}

/* ── tooltip ──────────────────────────────────────────────────────────────── */
.sound__tip {
  pointer-events: none;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.sound__btn:hover ~ .sound__tip,
.sound__btn:focus-visible ~ .sound__tip { opacity: 1; transform: none; }
/* The capsule is already saying it — a tooltip on top would be a stutter. */
.sound[data-mode="invite"] .sound__tip,
.sound[data-mode="brief"] .sound__tip { opacity: 0 !important; }

/* ── phones ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sound__btn { min-block-size: 38px; padding: 0 0.7rem; gap: 0.5rem; }
  .sound__bars { inline-size: 48px; block-size: 15px; }
  .sound__copy { max-inline-size: 10.5rem; }
  .sound__lead { font-size: 0.5rem; letter-spacing: 0.16em; }
  .sound__cta { font-size: 0.7rem; }
  /* One line of copy is enough on a phone; the lead would wrap the capsule
     halfway across the screen. */
  .sound[data-mode="invite"] .sound__lead { max-block-size: 0; max-inline-size: 0; opacity: 0; }
}

/* The lightbox owns the screen while it is open. */
body[data-lightbox-open="true"] .sound__btn { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .sound__btn, .sound__tip, .sound__bars i, .sound__copy, .sound__icon,
  .sound__bars, .sound__lead, .sound__arrow { transition: none; }
  .sound__btn:hover { transform: none; }
  /* The invitation stays; only the attention-seeking motion goes. */
  .sound[data-mode="invite"] .sound__halo { animation: none; }
  .sound[data-mode="invite"] .sound__bars i { animation: none; transform: scaleY(0.45); }
  .sound[data-playing="true"]:not([data-analyser="true"]) .sound__bars i {
    animation-duration: 6s;
  }
}