/* ============================================================================
   SCULPA — landing page
   Brand system from Sculpa_Brand_Guidelines_V1_0 (June 2026):
   · Palette: Gebs F2F1F0 · Carbon 16161A · Olive 003E21 · Walnut 693502
              Indigo 083844 · Primrose F4E67A · Peony FCC0EF · Lavender BEBEFA
   · On Gebs, only Carbon. Olive × Lavender is the signature pairing.
   · Floods limited to two colours; bold pairings used confidently in rotation.
   · Type: FT Kunst Grotesk. Headlines Regular, tracking -10, tight leading.
     Preheaders uppercase Regular. Sub-heads Medium. Body Regular, 1.3 leading.
   ========================================================================== */

@font-face {
  font-family: "FT Kunst Grotesk";
  src: url("/fonts/ftkg-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FT Kunst Grotesk";
  src: url("/fonts/ftkg-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FT Kunst Grotesk";
  src: url("/fonts/ftkg-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FT Kunst Grotesk";
  src: url("/fonts/ftkg-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --gebs: #F2F1F0;
  --carbon: #16161A;
  --olive: #003E21;
  --walnut: #693502;
  --indigo: #083844;
  --primrose: #F4E67A;
  --peony: #FCC0EF;
  --lavender: #BEBEFA;

  --font: "FT Kunst Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --pad: clamp(1.375rem, 4.5vw, 4.5rem);
  --sect: clamp(7rem, 16vh, 12rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-reveal: 1s;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.intro-lock { overflow: hidden; }
html.lerp { scroll-behavior: auto; }
body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--gebs);
  color: var(--carbon);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; }
svg use { fill: currentColor; }
::selection { background: var(--lavender); color: var(--olive); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.container { padding-inline: var(--pad); max-width: 110rem; margin-inline: auto; }

/* -------------------------------------------------------------- skip link -- */
.skip-link {
  position: fixed; top: 0.75rem; left: 50%;
  transform: translate(-50%, -300%);
  z-index: 300;
  background: var(--carbon); color: var(--gebs);
  padding: 0.7em 1.4em; border-radius: 999px;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em;
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: 2px; }

/* ---------------------------------------------------------- custom cursor -- */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), opacity 0.3s ease;
  will-change: transform;
}
.cursor.on { opacity: 1; }
.cursor.grow { width: 4.25rem; height: 4.25rem; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [role] { cursor: none; }

/* ------------------------------------------------------------ typography -- */
.preheader {
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.preheader.rule {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(22, 22, 26, 0.35);
}
.preheader.rule--lavender { border-top-color: rgba(190, 190, 250, 0.4); }

.h2 {
  font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
}

.line { display: block; overflow: hidden; }
.line-inner {
  display: block;
  transform: translateY(115%);
  transition: transform 1.1s var(--ease-out);
}
.in > .line .line-inner, .in.line .line-inner { transform: translateY(0); }
.line:nth-child(2) .line-inner { transition-delay: 0.08s; }
.line:nth-child(3) .line-inner { transition-delay: 0.16s; }
.line:nth-child(4) .line-inner { transition-delay: 0.24s; }

.reveal-fade {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal-fade.in { opacity: 1; transform: translateY(0); }

/* editorial figures: images wipe upward inside their frame */
.reveal-media img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.25s var(--ease-out);
}
.reveal-media.in img { clip-path: inset(0 0 0 0); }

/* giant wordmarks: ink drawn through the stencil, left to right */
.wipe { clip-path: inset(-5% 100% -5% 0); }
.wipe.in { clip-path: inset(-5% 0 -5% 0); transition: clip-path 1.6s var(--ease-out); }

/* scroll-linked word reveal (manifesto, testimonial) */
[data-words] .w { opacity: 0.14; transition: opacity 0.35s linear; }
[data-words] .w.on { opacity: 1; }

/* ------------------------------------------------------------ intro veil -- */
.intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--olive);
  color: var(--lavender);
  display: grid; place-items: center;
  transform: translateY(0);
}
.intro.is-leaving { transition: transform 0.9s var(--ease-out); transform: translateY(-101%); }
.intro.is-done { display: none; }
.intro__mark { width: min(52vw, 26rem); }
.intro__logo {
  display: block; width: 100%; aspect-ratio: 905.25 / 159.25;
  clip-path: inset(-5% 100% -5% 0);
}
.intro.is-in .intro__logo { transition: clip-path 1.05s var(--ease-out); clip-path: inset(-5% 0 -5% 0); }

/* ---------------------------------------------------------------- header -- */
.site-head {
  --head-fg: var(--lavender);
  --head-bg: var(--olive);
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1.1rem, 2.5vw, 1.75rem) var(--pad);
  color: var(--head-fg);
  transition: color 0.8s ease, transform 0.5s var(--ease-out), opacity 0.5s ease;
}
.site-head.is-hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.site-head__logo svg { display: block; width: clamp(6.5rem, 8vw, 8.25rem); aspect-ratio: 905.25 / 159.25; }
.site-head__cta {
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.85em 1.6em;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  will-change: transform;
}
.site-head__cta:hover { background: var(--head-fg); border-color: var(--head-fg); color: var(--head-bg); }

/* ------------------------------------------------------------------ hero -- */
.hero {
  --hero-bg: var(--olive);
  --hero-fg: var(--lavender);
  position: relative;
  min-height: 100svh;
  background: var(--hero-bg);
  color: var(--hero-fg);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: background-color 1.8s ease, color 1.8s ease;
}
.hero__inner {
  flex: 1;
  display: flex; flex-direction: column;
  padding-top: clamp(7rem, 16vh, 11rem);
  padding-bottom: clamp(2.5rem, 5vh, 4.5rem);
  width: 100%;
}
.hero__pre { flex: none; }
.hero__soon {
  order: 0;
  align-self: flex-start;
  margin-top: 1.1rem;
  font-size: clamp(0.72rem, 0.68rem + 0.25vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.55em 1.2em;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.85;
}
.hero__inner::before { content: ""; flex: 0.9; order: 1; }
.hero__inner::after { content: ""; flex: 1.1; order: 3; }
.hero__title { order: 2; }
.hero__foot { order: 4; }
.hero__title {
  font-size: clamp(4.25rem, 2rem + 14vw, 13rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin-left: -0.05em;
}
/* per-letter choreography (spans added by JS; line rise disabled once split) */
.hero__title.split .line-inner { transform: none; transition: none; }
.hero__title .ch {
  display: inline-block;
  transform: translateY(118%);
  transition: transform 0.95s var(--ease-out);
  transition-delay: calc(var(--lo, 0s) + var(--ci) * 0.032s);
}
.hero__title.in .ch { transform: translateY(0); }
.hero__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 2rem;
}
.hero__sub { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.4rem); line-height: 1.3; }
.hero__scroll {
  display: flex; align-items: flex-end; gap: 1rem;
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 3.25rem;
  background: currentColor;
  animation: scrollcue 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scrollcue {
  0%   { transform: scaleY(0); transform-origin: top; }
  44%  { transform: scaleY(1); transform-origin: top; }
  56%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.btn {
  display: inline-block;
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 1.05em 2em;
  background: none;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  will-change: transform;
}
.btn:hover { background: var(--lavender); border-color: var(--lavender); color: var(--olive); }
.wordmark-big {
  display: block; width: 100%; aspect-ratio: 905.25 / 159.25;
  overflow: visible;
}

/* ------------------------------------------------------------- manifesto -- */
.manifesto { background: var(--gebs); color: var(--carbon); padding-block: var(--sect) clamp(4rem, 9vh, 7rem); }
.manifesto .preheader { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.manifesto__text {
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.12;
  max-width: 62rem;
}
.manifesto__text em { font-style: normal; font-weight: 500; }

/* ------------------------------------------------------------- hero film -- */
/* The brand film, tinted into the flood: greyscale + multiply, so paper
   dissolves into the flood colour and only the drawing hand remains.
   The two-colour pairing survives — and re-tints as the hero rotates. */
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(0.92) brightness(1.22);
  mix-blend-mode: multiply;
  opacity: 0.78;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--hero-bg) 52%, transparent) 0%, transparent 52%);
  transition: background 1.8s ease;
}
.hero__inner { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- journey -- */
.journey { background: var(--gebs); color: var(--carbon); height: 520svh; }
.journey__pin { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; }
.journey__grid {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  padding-block: clamp(5.5rem, 10vh, 7rem) clamp(2rem, 5vh, 4rem);
}
.journey__copy .preheader { margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem); }
.journey__lede { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); }
.journey__list { margin-top: clamp(1.75rem, 4vh, 3rem); border-top: 1px solid rgba(22,22,26,0.18); }
.journey__item {
  display: grid; grid-template-columns: 2.6rem minmax(9rem, max-content) 1fr;
  gap: 1rem; align-items: baseline;
  padding-block: clamp(0.7rem, 1.4vh, 1rem);
  border-bottom: 1px solid rgba(22,22,26,0.18);
  opacity: 0.34;
  transition: opacity 0.4s ease;
  cursor: pointer;
}
.journey__item:hover { opacity: 0.7; }
.journey__item.active { opacity: 1; }
.journey__num { font-size: 0.85rem; }
.journey__label { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.7rem); letter-spacing: -0.01em; }
.journey__line { font-size: 0.95rem; line-height: 1.3; opacity: 0.85; }
.journey__media { min-width: 0; }
.journey__frame {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--carbon);
}
.journey__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity 0.65s ease;
}
.journey__img.active { opacity: 1; animation: stage-settle 5.5s var(--ease-out) forwards; }
@keyframes stage-settle {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

/* Brand code: one room flooded lavender on the technical plan (stage 02) */
.journey__room {
  position: absolute;
  left: 39.5%; top: 27%; width: 13.5%; height: 27%;
  background: var(--lavender);
  opacity: 0;
  mix-blend-mode: multiply;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.4s ease 0s, transform 0.9s var(--ease-out) 0s;
}
.journey__frame[data-s="1"] .journey__room {
  opacity: 0.9;
  transform: scaleY(1);
  transition-delay: 0.55s, 0.55s;
}

.journey__count {
  position: absolute; right: 1.1rem; top: 1rem;
  color: var(--gebs);
  font-size: 0.85rem; letter-spacing: 0.02em;
  mix-blend-mode: difference;
}
.journey__count span { display: inline-block; }
.journey__count span.roll { animation: count-roll 0.5s var(--ease-out); }
@keyframes count-roll {
  from { transform: translateY(0.7em); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.journey__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgba(242,241,240,0.28); }
.journey__bar span { display: block; width: 0; height: 100%; background: var(--gebs); }

/* -------------------------------------------------------------- interlude -- */
.interlude {
  background: var(--walnut); color: var(--primrose);
  padding-block: var(--sect);
  min-height: 82svh;
  display: flex; align-items: center;
}
.interlude .preheader { margin-bottom: clamp(2.25rem, 6vh, 4rem); }
.interlude__quote {
  font-size: clamp(2.1rem, 1.1rem + 4.6vw, 4.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

/* -------------------------------------------------------------- audiences -- */
.audiences { display: grid; grid-template-columns: 1fr 1fr; }
.aud {
  padding: var(--sect) var(--pad);
  min-height: 74svh;
  display: flex;
  transition: background-color 0.6s ease, color 0.6s ease;
}
.aud__inner { display: flex; flex-direction: column; max-width: 36rem; }
.aud--private { background: var(--peony); color: var(--olive); }
.aud--developer { background: var(--primrose); color: var(--indigo); }
/* approved pairings, inverted (Olive × Peony · Indigo × Primrose) */
.aud--private:hover, .aud--private:focus-visible { background: var(--olive); color: var(--peony); }
.aud--developer:hover, .aud--developer:focus-visible { background: var(--indigo); color: var(--primrose); }
.aud .preheader { margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }
.aud__title {
  font-size: clamp(1.85rem, 1.2rem + 2.3vw, 3.1rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.aud__line { margin-top: auto; padding-top: clamp(2.5rem, 7vh, 5rem); font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); max-width: 30rem; }
.aud__cta {
  margin-top: 1.9rem;
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.aud__cta-text { position: relative; }
.aud__cta-text::after {
  content: ""; position: absolute; left: 0; bottom: -0.3em;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.aud:hover .aud__cta-text::after { transform: scaleX(1); transform-origin: left; }
.aud__arrow { display: inline-block; transition: transform 0.45s var(--ease-out); }
.aud:hover .aud__arrow { transform: translateX(0.45em); }

/* ----------------------------------------------------------------- studio -- */
.studio { background: var(--gebs); color: var(--carbon); padding-block: var(--sect); }
.studio .preheader { margin-bottom: clamp(3rem, 7vh, 5rem); }
.studio__group { overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: clamp(1.5rem, 3.5vw, 3.5rem); }
.studio__group img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.studio__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
}
.card { display: flex; flex-direction: column; }
.card--drop { margin-top: clamp(2.5rem, 6vh, 5rem); }
.card__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}
.card__meta--end { margin-bottom: 0; margin-top: 0.9rem; justify-content: flex-end; }
.card__frame { overflow: hidden; aspect-ratio: 4 / 5; background: var(--carbon); }
.card__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.card:hover .card__frame img { transform: scale(1.04); }
.card__role {
  margin-top: 0.9rem;
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  text-transform: uppercase; letter-spacing: 0.02em;
  opacity: 0.7;
}
.reveal-card { opacity: 0; transform: translateY(2.5rem); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal-card:nth-child(2) { transition-delay: 0.12s; }
.reveal-card:nth-child(3) { transition-delay: 0.24s; }
.reveal-card.in { opacity: 1; transform: translateY(0); }
.reveal-card .card__frame img { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-out), transform 1.2s var(--ease-out); }
.reveal-card.in .card__frame img { clip-path: inset(0 0 0 0); }
.studio__note { margin-top: clamp(3.5rem, 8vh, 6rem); max-width: 34rem; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); }

/* ------------------------------------------------------------ testimonial -- */
.testimonial {
  background: var(--indigo); color: var(--peony);
  padding-block: var(--sect);
  min-height: 88svh;
  display: flex; align-items: center;
}
.testimonial .preheader { margin-bottom: clamp(2.25rem, 6vh, 4rem); }
.testimonial__quote p {
  font-size: clamp(1.9rem, 1rem + 4vw, 4.25rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  max-width: 64rem;
}
.testimonial__cite {
  display: block; margin-top: clamp(2rem, 5vh, 3.25rem);
  font-style: normal;
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  text-transform: uppercase; letter-spacing: 0.02em;
}

/* ------------------------------------------------------------ stencil view -- */
/* The letterforms as windows: photography seen through the stencil. */
.stencilband {
  background: var(--gebs);
  padding: clamp(2rem, 6vh, 5rem) var(--pad) clamp(4rem, 10vh, 8rem);
}
.stencilband__svg {
  display: block;
  width: 100%;
  aspect-ratio: 905.25 / 159.25;
}

/* ---------------------------------------------------------- accreditation -- */
.accreditation { background: var(--gebs); color: var(--carbon); padding-block: clamp(4.5rem, 10vh, 8rem); }
.accreditation .preheader { margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }
.accreditation__row { display: flex; align-items: center; gap: clamp(1.75rem, 4vw, 3.5rem); flex-wrap: wrap; }
.accreditation__logo { height: clamp(3.25rem, 3rem + 2vw, 5rem); width: auto; }
.accreditation__line { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); line-height: 1.35; opacity: 0.85; }

/* ---------------------------------------------------------------- contact -- */
.contact {
  position: relative;
  background: var(--olive); color: var(--lavender);
  padding-top: var(--sect);
  overflow: hidden;
}
.contact .preheader { margin-bottom: clamp(2.5rem, 6vh, 4rem); }

/* the brief, assembling itself */
.brief {
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.12;
  max-width: 62rem;
  min-height: 3.4em;
  margin-bottom: clamp(2.5rem, 7vh, 5rem);
}
.brief em { font-style: normal; font-weight: 500; }
.brief .cursor-bar {
  display: inline-block; width: 2px; height: 0.95em;
  background: currentColor; vertical-align: -0.12em; margin-left: 0.08em;
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* stepper */
.fform { max-width: 62rem; }
.fform__viewport { position: relative; min-height: clamp(17rem, 34vh, 21rem); }
.fstep {
  position: absolute; inset: 0;
  border: 0;
  opacity: 0;
  transform: translateX(2.75rem);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.6s var(--ease-out);
}
.fstep.active { position: relative; opacity: 1; transform: translateX(0); pointer-events: auto; }
.fstep.leaving { opacity: 0; transform: translateX(-2.75rem); }
/* reversed travel when stepping back */
.fform__viewport.rev .fstep { transform: translateX(-2.75rem); }
.fform__viewport.rev .fstep.active { transform: translateX(0); }
.fform__viewport.rev .fstep.leaving { transform: translateX(2.75rem); }
@keyframes input-nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-0.4rem); }
  60% { transform: translateX(0.3rem); }
}
.finput.nudge { animation: input-nudge 0.4s ease; border-bottom-color: var(--peony); }
.fstep__q {
  display: block;
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  text-transform: uppercase; letter-spacing: 0.02em;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem);
  opacity: 0.85;
}
.fstep__opts { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.fstep__opts[hidden] { display: none; }
.fstep__opts--two { gap: 1.1rem; }
.opt {
  font-family: var(--font);
  text-align: left;
  background: none;
  color: inherit;
  border: 1px solid rgba(190, 190, 250, 0.55);
  border-radius: 1.4rem;
  padding: 1.15rem 1.5rem 1.2rem;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.9rem;
  align-items: baseline;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.45s var(--ease-out);
}
.fstep__opts--two .opt { flex: 1 1 18rem; border-radius: 1.6rem; padding: 1.5rem 1.7rem 1.6rem; }
.opt:hover { background: var(--lavender); border-color: var(--lavender); color: var(--olive); transform: translateY(-2px); }
.opt.picked { background: var(--lavender); border-color: var(--lavender); color: var(--olive); }
.opt__key {
  font-size: 0.7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  width: 1.5rem; height: 1.5rem;
  display: inline-grid; place-items: center;
  opacity: 0.65;
  transform: translateY(-0.1em);
}
.opt__label { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); letter-spacing: -0.01em; }
.opt__line { grid-column: 2; font-size: 0.95rem; opacity: 0.8; margin-top: 0.35rem; }
.fstep__field { max-width: 40rem; }
.finput {
  display: block; width: 100%;
  font-family: var(--font);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem);
  letter-spacing: -0.01em;
  background: none; border: 0;
  border-bottom: 1px solid rgba(190, 190, 250, 0.5);
  color: inherit;
  padding: 0.35em 0 0.4em;
  border-radius: 0;
  transition: border-color 0.3s ease;
}
.finput::placeholder { color: inherit; opacity: 0.38; }
.finput:focus { outline: none; border-bottom-color: var(--lavender); }
.finput + .finput { margin-top: 0.9rem; }
.fstep__hint { margin-top: 0.9rem; font-size: 0.95rem; opacity: 0.7; }
.fform__next, .fform__submit { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); }
.fform__error { margin-top: 1rem; font-size: 0.95rem; color: var(--peony); }
.fform__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(190, 190, 250, 0.32);
}
.fform__back {
  font-family: var(--font);
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  text-transform: uppercase; letter-spacing: 0.02em;
  background: none; border: 0; color: inherit;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
}
.fform__back:hover { transform: translateX(-0.3em); }
.fform__back:disabled { opacity: 0.25; cursor: default; transform: none; }
.fform__progress { display: flex; align-items: center; gap: 1.1rem; }
.fform__count { font-size: 0.85rem; letter-spacing: 0.02em; }
.fform__count span { display: inline-block; }
.fform__count span.roll { animation: count-roll 0.5s var(--ease-out); }
.fform__bar {
  width: clamp(6rem, 14vw, 12rem); height: 2px;
  background: rgba(190, 190, 250, 0.28);
}
.fform__bar span { display: block; height: 100%; width: 0; background: var(--lavender); transition: width 0.6s var(--ease-out); }
.fform.is-done .fform__nav { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }

/* success */
.fstep--success .fsuccess__title {
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.5rem);
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin-bottom: 1.4rem;
}
.fstep--success .fsuccess__line { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.4rem); opacity: 0.9; }
.fstep--success .line-inner { transition: transform 1s var(--ease-out) 0.15s; }
.fstep--success.active .line-inner { transform: translateY(0); }

.contact__direct {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  opacity: 0.9;
}
.contact__social {
  margin-top: 0.9rem;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  opacity: 0.9;
}
.contact__mail { position: relative; }
.contact__mail::after {
  content: ""; position: absolute; left: 0; bottom: -0.14em;
  width: 100%; height: 1px; background: currentColor;
  opacity: 0.5;
  transform: scaleX(1); transform-origin: left;
  transition: opacity 0.3s ease;
}
.contact__mail:hover::after { opacity: 1; }
.contact__wordmark { padding: clamp(5rem, 12vh, 9rem) var(--pad) 0; }
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem;
  padding-block: 1.6rem 2rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em;
  border-top: 1px solid rgba(190, 190, 250, 0.32);
  opacity: 0.85;
}

/* ------------------------------------------------------------- responsive -- */
@media (min-width: 981px) and (max-height: 780px) {
  .journey__grid { padding-top: clamp(4.5rem, 8vh, 5.5rem); }
  .journey__copy .h2 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
  .journey__lede { margin-top: 1rem; }
  .journey__item { padding-block: 0.55rem; }
  .journey__label { font-size: 1.2rem; }
}

@media (max-width: 980px) {
  .journey { height: 440svh; }
  .journey__grid {
    grid-template-columns: 1fr;
    align-content: start;
    gap: clamp(1.5rem, 4vh, 2.5rem);
    padding-top: clamp(5rem, 9vh, 6rem);
  }
  .journey__lede { display: none; }
  .journey__frame { aspect-ratio: 3 / 2; }
  .journey__room { display: none; }
  .journey__list { display: flex; flex-wrap: wrap; row-gap: 0.4rem; border-top: 0; margin-top: 0.5rem; }
  .journey__item {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex: 0 0 auto;
    border-bottom: 0;
    padding-block: 0;
    padding-right: 1.6rem;
  }
  .journey__line { display: none; }
  .journey__num { font-size: 0.75rem; }
  .audiences { grid-template-columns: 1fr; }
  .aud { min-height: 66svh; }
  .studio__group { aspect-ratio: 4 / 3; }
  .studio__grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .card--drop { margin-top: 0; }
  .hero__title { font-size: clamp(3.4rem, 16vw, 7rem); }
}

@media (max-width: 560px) {
  .hero__scroll { display: none; }
  .fform__viewport { min-height: 24rem; }
  .fstep__opts { flex-direction: column; }
  .opt { width: 100%; }
}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .line-inner, .reveal-fade, .reveal-card, .reveal-card .card__frame img,
  .intro__logo, .journey__img, .card__frame img, .reveal-media img, .wipe,
  .hero__title .ch {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
  [data-words] .w { opacity: 1 !important; transition: none !important; }
  .journey__img { opacity: 0 !important; }
  .journey__img.active { opacity: 1 !important; }
  .journey__room { transition: none !important; transform: none !important; }
  .hero { transition: none !important; }
  .hero__scroll::after { animation: none !important; }
  .hero__media { display: none !important; }
  .fstep { transition: none !important; }
  .fstep:not(.active) { transform: none !important; }
  .brief .cursor-bar { animation: none !important; }
  .intro { display: none !important; }
  .cursor { display: none !important; }
}