/* Full Covers
   Theme: light. Off-white page, ink type, one tomato-red accent. Photography in full colour.
   Accent use: --red for fills (white text passes AA), --red-ink for small red text on the page,
   --red-bright only for large emphasis over dark photo scrims.
   Shape rule: interactive controls are full pills; photo panels, cards and media use --r (24px),
   media inside a white bezel uses --r-in (18px).
   Layers: panels 0, content 2, nav 40. */

:root {
  --bg: #f4f3ef;
  --surface: #ffffff;
  --ink: #141414;
  --muted: #5c5b57;
  --soft: #8a8984;
  --line: rgba(20, 20, 20, 0.1);
  --red: #d63a22;
  --red-hover: #c03019;
  --red-ink: #b02e17;
  --red-bright: #ff5b3d;
  --red-wash: #fde9e4;
  --on-red: #ffffff;
  --scrim: 20, 16, 14;
  --shadow: 0 1px 2px rgba(60, 40, 30, 0.05), 0 18px 40px -18px rgba(60, 40, 30, 0.18);
  --font: "Schibsted Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --r: 24px;
  --r-in: 18px;
  --inset: clamp(8px, 1vw, 14px);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --wrap: 1320px;
  --gutter: clamp(1rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.display {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 700; color: var(--red); padding-right: 0.04em; }
.lede { color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.eyebrow {
  display: inline-flex; align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--red-wash); color: var(--red-ink);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- brand ---------- */
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none;
  font-weight: 800; font-size: 1.15rem; letter-spacing: -0.03em;
  white-space: nowrap;
}
.mark { width: 1.75rem; height: 1.75rem; flex: none; }
.mark .ring { fill: none; stroke: currentColor; stroke-width: 7; }
.mark .yolk { fill: var(--red); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.9rem;
  padding: 0.45rem 0.45rem 0.45rem 1.4rem;
  border: 0; border-radius: 999px;
  background: var(--red); color: var(--on-red);
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(214, 58, 34, 0.6);
  transition: transform 0.5s var(--ease), background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.btn i {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.1rem;
  transition: transform 0.5s var(--ease);
}
.btn:hover { background: var(--red-hover); box-shadow: 0 14px 28px -10px rgba(214, 58, 34, 0.7); }
.btn:hover i { transform: translate(3px, -2px) scale(1.06); }
.btn:active { transform: scale(0.98); }
.btn--sm { padding: 0.3rem 0.3rem 0.3rem 1.1rem; font-size: 0.9375rem; box-shadow: none; }
.btn--sm i { width: 2rem; height: 2rem; font-size: 1rem; }
.textlink {
  display: inline-flex; align-items: center; min-height: 3.3rem; padding-inline: 0.9rem;
  color: var(--ink); font-weight: 600; font-size: 1rem; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.35em;
  text-decoration-color: rgba(20, 20, 20, 0.3);
  transition: text-decoration-color 0.4s var(--ease);
}
.textlink:hover { text-decoration-color: currentColor; }

/* ---------- nav: floating island ---------- */
.nav {
  position: fixed; z-index: 40; top: calc(var(--inset) + 0.75rem); left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 2rem);
  display: flex; align-items: center; gap: 2rem;
  padding: 0.4rem 0.4rem 0.4rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 30px -12px rgba(30, 20, 15, 0.3);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a {
  text-decoration: none; font-size: 0.9375rem; font-weight: 500; color: var(--muted); white-space: nowrap;
  transition: color 0.4s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
@media (max-width: 1023px) { .nav { gap: 1.25rem; } .nav__links { gap: 1.1rem; } }
@media (max-width: 767px) {
  .nav { width: calc(100% - 2rem); justify-content: space-between; gap: 1rem; }
  .nav__links { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- panels: inset, rounded, full-colour parallax photographs ---------- */
.plate {
  position: relative; z-index: 0;
  overflow: clip;
  margin-inline: var(--inset);
  border-radius: var(--r);
  min-height: calc(100dvh - 2 * var(--inset));
  display: grid;
  color: #fff;
  view-timeline: --plate block;
}
.plate__img {
  position: absolute; left: 0; top: -14%;
  width: 100%; height: 128%;
  object-fit: cover;
  z-index: -2;
}
.plate::before { /* scrim keeps type readable over any photograph */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--scrim), 0.35) 0%, rgba(var(--scrim), 0.05) 40%, rgba(var(--scrim), 0.75) 100%);
}
.plate__body { position: relative; z-index: 2; align-self: end; padding-block: 7rem clamp(2.5rem, 6vw, 5rem); }
.plate .display em { color: var(--red-bright); }
.plate .lede { color: rgba(255, 255, 255, 0.9); }

@keyframes drift { from { transform: translate3d(0, -10%, 0); } to { transform: translate3d(0, 10%, 0); } }
@keyframes floaty { from { transform: translate3d(0, var(--shift, 40px), 0); } to { transform: translate3d(0, calc(var(--shift, 40px) * -1), 0); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .plate__img { animation: drift linear both; animation-timeline: --plate; will-change: transform; }
    .float { animation: floaty linear both; animation-timeline: view(); }
  }
}

/* ---------- hero ---------- */
.hero { margin-top: var(--inset); }
.hero::before { background: linear-gradient(90deg, rgba(var(--scrim), 0.7) 0%, rgba(var(--scrim), 0.15) 65%), linear-gradient(180deg, rgba(var(--scrim), 0.3) 0%, rgba(var(--scrim), 0) 35%, rgba(var(--scrim), 0.7) 100%); }
.hero h1 { font-size: clamp(3.2rem, 8.6vw, 7.75rem); max-width: 11ch; line-height: 0.96; }
.hero .lede { margin-top: 1.5rem; font-size: clamp(1.05rem, 1.4vw, 1.3rem); max-width: 44ch; }
.hero__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.hero .textlink { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
@media (prefers-reduced-motion: no-preference) {
  .hero .plate__body > * { animation: rise 1.1s var(--ease) both; }
  .hero .plate__body > :nth-child(2) { animation-delay: 0.12s; }
  .hero .plate__body > :nth-child(3) { animation-delay: 0.24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(2.5rem); filter: blur(8px); } }
}

/* ---------- trim: a thin red double rule with the mark at its centre, between flat sections ---------- */
.trim {
  display: flex; align-items: center; gap: 1.1rem;
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto;
  color: var(--red);
}
.trim::before, .trim::after { content: ""; flex: 1; height: 5px; border-block: 1px solid currentColor; opacity: 0.85; }
.trim svg { width: 22px; height: 22px; flex: none; }

/* ---------- statement ---------- */
.statement { padding-block: clamp(6rem, 13vw, 11rem); }
.statement p {
  font-size: clamp(1.9rem, 4.4vw, 4rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.08;
  max-width: 22ch; text-wrap: balance;
}
.statement p span { color: var(--soft); }
.statement p em { font-style: italic; color: var(--red); }

/* ---------- stage: copy scrolls on the left, the photo stays pinned on the right ---------- */
.stage {
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.stage__photos {
  grid-column: 2; grid-row: 1; align-self: start;
  position: sticky; top: 5.5rem;
  height: calc(100dvh - 7rem);
  border-radius: var(--r); overflow: clip;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.stage__photos img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 1.8s var(--ease);
}
.stage__photos img.is-on { opacity: 1; transform: scale(1); }
.stage__copy { grid-column: 1; grid-row: 1; }
.stage .seg { width: auto; margin: 0; min-height: 85dvh; display: grid; align-content: center; padding-block: 4rem; }
.seg__inner { max-width: 34rem; }
.seg__kind { display: inline-flex; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--red-wash); color: var(--red-ink); font-weight: 600; font-size: 0.9375rem; }
.seg h2 { font-size: clamp(2.4rem, 4.8vw, 4.25rem); margin-top: 1.25rem; }
.seg ul { list-style: none; padding: 0; margin: 2.25rem 0 0; display: grid; gap: 1.1rem; }
.seg li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.9rem; align-items: start; color: var(--muted); }
.seg li i { color: var(--red); font-size: 1.35rem; line-height: 1.6rem; margin-top: 0.1rem; }
@media (max-width: 899px) {
  .stage { grid-template-columns: 1fr; gap: 0; }
  .stage__photos { grid-column: 1; grid-row: 1; position: relative; top: auto; height: 42dvh; margin-top: 1rem; }
  .stage__copy { grid-column: 1; grid-row: 2; }
  .stage .seg { min-height: 62dvh; padding-block: 2.5rem; }
}

/* ---------- services: sticky heading, three clusters ---------- */
.services { padding-block: clamp(5rem, 9vw, 8rem); }
.services__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.services__head { position: sticky; top: 7rem; }
.services h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.services .lede { margin-top: 1.25rem; }
.services__list { display: grid; gap: 1rem; }
.cluster {
  padding: clamp(1.4rem, 2.6vw, 2.25rem);
  border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
.cluster h3 { font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-ink); }
.cluster dl { margin: 1.25rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem clamp(1.5rem, 3vw, 3rem); }
.cluster dt { font-weight: 700; font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -0.025em; line-height: 1.15; }
.cluster dd { margin: 0.5rem 0 0; color: var(--muted); max-width: 34ch; }
.cluster dl > div:only-child { grid-column: 1 / -1; }
.cluster dl > div:only-child dt { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.cluster dl > div:only-child dd { max-width: 46ch; }
@media (max-width: 899px) {
  .services__grid { grid-template-columns: 1fr; }
  .services__head { position: static; }
}
@media (max-width: 599px) { .cluster dl { grid-template-columns: 1fr; } }

/* ---------- included: bento, five cells ---------- */
.included { padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 10vw, 9rem); }
.included h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); max-width: 14ch; }
.bento {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(15rem, auto); gap: 1rem;
}
.cell {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem;
}
.cell h3 { font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.03em; line-height: 1.05; }
.cell p { color: var(--muted); max-width: 38ch; }
.cell > i { font-size: 2rem; color: var(--red); margin-bottom: auto; }
.cell--menu { grid-column: span 7; grid-row: span 2; }
.cell--book { grid-column: span 5; background: var(--red); color: var(--on-red); box-shadow: 0 18px 40px -18px rgba(214, 58, 34, 0.55); }
.cell--book p, .cell--book > i { color: rgba(255, 255, 255, 0.92); }
.cell--near { grid-column: span 5; }
.cell--edit { grid-column: span 5; background: var(--ink); color: #fff; }
.cell--edit p { color: rgba(255, 255, 255, 0.72); }
.cell--edit > i { color: var(--red-bright); }
.cell--launch { grid-column: span 7; }
.cell--photo { color: #fff; }
.cell--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.cell--photo:hover img { transform: scale(1.04); }
.cell--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--scrim), 0) 30%, rgba(var(--scrim), 0.7) 72%, rgba(var(--scrim), 0.88) 100%); }
.cell--photo p { color: rgba(255, 255, 255, 0.92); }
@media (max-width: 899px) {
  .bento { grid-template-columns: 1fr; }
  .cell { grid-column: auto !important; grid-row: auto !important; min-height: 15rem; }
  .cell--menu { min-height: 24rem; }
}

/* ---------- process ---------- */
.process { min-height: 115dvh; }
.process::before { background: linear-gradient(180deg, rgba(var(--scrim), 0.7) 0%, rgba(var(--scrim), 0.2) 35%, rgba(var(--scrim), 0.9) 80%); }
.process .plate__body { display: grid; gap: clamp(3rem, 16vh, 12rem); align-self: stretch; align-content: space-between; padding-top: clamp(7rem, 16vh, 11rem); }
.process h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); max-width: 13ch; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); border-top: 1px solid rgba(255, 255, 255, 0.35); padding-top: 1.75rem; }
.steps h3 { font-weight: 700; font-size: clamp(1.6rem, 2.5vw, 2.3rem); letter-spacing: -0.03em; }
.steps h3::before { content: ""; display: block; width: 0.5rem; height: 0.5rem; margin-bottom: 1rem; border-radius: 50%; background: var(--red-bright); }
.steps p { margin-top: 0.6rem; color: rgba(255, 255, 255, 0.86); max-width: 34ch; }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; } }

/* ---------- pricing: three rows in one card, no figures ---------- */
.pricing { padding-block: clamp(6rem, 11vw, 10rem) clamp(4rem, 7vw, 6rem); }
.pricing h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.pricing .lede { margin-top: 1.25rem; }
.plans {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
.plan {
  display: grid; grid-template-columns: 4fr 5fr 3fr; gap: 1rem clamp(1.5rem, 4vw, 4rem); align-items: baseline;
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
}
.plan + .plan { border-top: 1px solid var(--line); }
.plan h3 { font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.05; }
.plan p { color: var(--muted); max-width: 42ch; }
.plan span { justify-self: end; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--red-wash); color: var(--red-ink); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.pricing__cta { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; }
.pricing__cta p { font-weight: 600; font-size: 1.15rem; max-width: 40ch; }
@media (max-width: 767px) {
  .plan { grid-template-columns: 1fr; gap: 0.6rem; }
  .plan span { justify-self: start; }
}

/* ---------- work ---------- */
.work { padding-block: clamp(2rem, 4vw, 3rem) clamp(5rem, 9vw, 8rem); }
.work h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.work .lede { margin-top: 1.25rem; }
.work__grid {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.case { margin: 0; }
.case--lead { grid-column: 1 / -1; }
.case--a { grid-column: 1 / span 6; --shift: 28px; }
.case--b { grid-column: 8 / span 5; margin-top: 7rem; --shift: 64px; }
.shell { padding: 8px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.shell img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: var(--r-in);
  background: var(--bg);
}
/* before / after: two phones scroll together while the stage is pinned (script.js drives the strips) */
.scrollcomp { position: relative; height: 340vh; }
.scrollcomp__stage {
  position: sticky; top: 0; height: 100dvh;
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.scrollcomp__track { display: contents; }
.scrollcomp__copy h3 { font-weight: 800; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.035em; line-height: 1; }
.scrollcomp__sub { margin-top: 0.9rem; color: var(--muted); max-width: 40ch; }
.scrollcomp__stat { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scrollcomp__stat span { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.45rem 1rem; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-weight: 600; color: var(--muted); }
.scrollcomp__stat span:last-child { background: var(--red); color: var(--on-red); }
.scrollcomp__stat b { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.scrollcomp__stat span:first-child b { color: var(--ink); }
.scrollcomp__list { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 0.75rem; max-width: 42ch; }
.scrollcomp__list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; color: var(--ink); }
.scrollcomp__list i { color: var(--red); font-size: 1.2rem; line-height: 1.6rem; }
.scrollcomp__phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(1rem, 3vw, 2.5rem); }
.phone { margin: 0; width: clamp(190px, 17vw, 265px); }
.phone figcaption { margin-bottom: 0.8rem; text-align: center; font-weight: 600; font-size: 0.9375rem; color: var(--muted); }
.phone--after figcaption { color: var(--red-ink); }
.phone__screen {
  position: relative; overflow: hidden;
  aspect-ratio: 390 / 844;
  border: 7px solid var(--ink); border-radius: 36px;
  background: var(--ink);
  box-shadow: var(--shadow), 0 40px 70px -35px rgba(60, 40, 30, 0.45);
}
.phone__strip { will-change: transform; }
.phone__strip img { display: block; width: 100%; height: auto; }
.phone__strip img.phone__last { aspect-ratio: 600 / 272; object-fit: cover; object-position: bottom; }
.phone__end {
  position: absolute; left: 50%; bottom: 1rem; transform: translate(-50%, 0.5rem);
  padding: 0.5rem 0.9rem; border-radius: 999px; white-space: nowrap;
  background: var(--ink); color: #fff; font-size: 0.8125rem; font-weight: 600;
  opacity: 0; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.scrollcomp.is-ended .phone__end { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 899px) {
  .scrollcomp { height: auto; }
  .scrollcomp__stage { position: static; height: auto; display: block; }
  .scrollcomp__track { display: block; height: 300vh; margin-top: 2rem; }
  .scrollcomp__phones { position: sticky; top: 5rem; }
  .phone { width: calc((100vw - 2 * var(--gutter) - 1rem) / 2); max-width: 230px; }
  .phone__end { font-size: 0.6875rem; padding: 0.4rem 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  /* no pinning: each phone scrolls on its own */
  .scrollcomp, .scrollcomp__track { height: auto; }
  .scrollcomp__stage, .scrollcomp__phones { position: static; height: auto; }
  .phone__screen { overflow-y: auto; }
  .phone__end { display: none; }
}
.case figcaption { margin-top: 1.1rem; display: grid; gap: 0.2rem; padding-inline: 0.5rem; }
.case figcaption strong { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.case figcaption span { color: var(--muted); font-size: 0.975rem; max-width: 48ch; }
@media (max-width: 767px) {
  .work__grid { grid-template-columns: 1fr; }
  .case--lead, .case--a, .case--b { grid-column: auto; margin-top: 0; }
  .float { animation: none !important; transform: none !important; }
}

/* ---------- closing panel ---------- */
.closing { min-height: 92dvh; margin-bottom: var(--inset); }
.closing .plate__body { align-self: center; text-align: center; display: grid; justify-items: center; gap: 2rem; padding-block: 7rem; }
.closing::before { background: rgba(var(--scrim), 0.62); }
.closing h2 { font-size: clamp(3rem, 8vw, 7rem); max-width: 12ch; }

/* ---------- lead form: a white card on the closing photo ---------- */
.lead {
  width: min(100%, 46rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
  text-align: left;
}
.lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.field { display: grid; gap: 0.4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--wide { grid-column: 1 / -1; }
.field > span, .field > legend { padding: 0; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.field > legend { margin-bottom: 0.4rem; }
.field small { font-size: inherit; font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(20, 20, 20, 0.16); border-radius: 14px;
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 1rem;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235c5b57' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.field input::placeholder { color: var(--soft); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(20, 20, 20, 0.32); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; border-radius: 14px; background: var(--surface); }
.field [aria-invalid="true"] { border-color: var(--red-ink); }
.field .field__err { font-size: 0.8125rem; color: var(--red-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0.4rem 1.05rem;
  border: 1px solid rgba(20, 20, 20, 0.16); border-radius: 999px;
  font-size: 0.9375rem; color: var(--muted);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.chips label:hover span { border-color: rgba(20, 20, 20, 0.32); color: var(--ink); }
.chips input:checked + span { background: var(--red); border-color: var(--red); color: var(--on-red); }
.chips input:focus-visible + span { outline: 2px solid var(--red-ink); outline-offset: 3px; }
.lead__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead__foot { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.lead__foot .btn[disabled] { opacity: 0.6; cursor: default; }
.lead__status { flex: 1 1 16rem; font-size: 0.9375rem; color: var(--ink); }
.lead__status a { color: inherit; }
@media (max-width: 639px) { .lead__grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { padding-block: 2.5rem 3rem; }
.foot__row { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: center; }
.foot p, .foot a { color: var(--muted); font-size: 0.9375rem; }
.foot .brand { color: var(--ink); }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot nav a { text-decoration: none; transition: color 0.4s var(--ease); }
.foot nav a:hover { color: var(--red-ink); }

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(2.5rem); filter: blur(8px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); transition-delay: var(--d, 0s); }
  .js .rv.is-in { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plate__img { top: 0; height: 100%; }
  .stage__photos img { transition: none; transform: none; }
}
.trim + .stage { padding-top: clamp(2.5rem, 5vw, 4rem); }