:root {
  --bg: #0D0D0D;
  --panel: #232A1C;
  --line: #3A4030;
  --ink: #FFFFFF;
  --muted: #A6B0A0;
  --acid: #EDEE3E;
  --sage: #C6D2C6;
  --clay: #BF6455;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html.st-locked,
html.st-locked body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

[data-sw-seo] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.st-root {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* --------------------------------------------------------- background system */

/* Three layers behind the stage chrome. `.st-bg` owns the page ground so the
   sprite's `screen` blend has a known dark backdrop to composite against — a
   blend-mode child only blends within its parent stacking context. */
.st-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(237, 238, 62, 0.10), transparent 62%),
    radial-gradient(60% 50% at 92% 8%, rgba(35, 42, 28, 0.85), transparent 66%),
    var(--bg);
}

/* Layer -3: the slow drift. Animating background-position only — no layout, no paint
   of anything above it, so this contributes nothing to CLS. */
.st-bg__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 20% 30%, #14170F 0%, transparent 60%),
    radial-gradient(50% 45% at 80% 70%, #101410 0%, transparent 60%);
  background-size: 200% 200%, 200% 200%;
  animation: st-drift 45s ease-in-out infinite alternate;
  will-change: background-position;
}

@keyframes st-drift {
  from { background-position: 0% 0%, 100% 100%; }
  to   { background-position: 30% 40%, 60% 50%; }
}

/* Layer -2: grain, purely to break up banding in the gradients above. */
.st-bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* Layer -1: the section sprite.
   Hard-anchored outside the 62ch copy column rather than merely "off-axis":
   a bright sprite pixel screens to ~#424242, which would drop --muted body text
   to 4.3:1. Kept clear of the column, sampled contrast stays >= 7:1. */
.st-bg__sprite {
  position: absolute;
  top: 10vh;
  height: 30vh;
  width: auto;
  max-width: 32vw;
  object-fit: contain;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(0.5px);
  transform: translate3d(0, 0, 0);
  transition: opacity 0.6s var(--ease);
  /* The render floor is near-black but not perfectly flat, so `screen` would
     otherwise reveal the sprite's bounding box as a lighter rectangle. Feather
     the edges away instead of relying on the black point alone.
     Sized as a percentage ellipse, not closest-side: these crops range from
     1120x1080 to 1600x850, and closest-side collapses to a tiny circle on the
     wide ones. */
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 35%, transparent 100%);
}

.st-bg__sprite--right { left: calc(50% + 340px); }
.st-bg__sprite--left { right: calc(50% + 340px); }

.st-bg__sprite.is-in {
  opacity: 0.22;
  animation: st-float 24s ease-in-out infinite alternate;
}

@keyframes st-float {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(0, -18px, 0) rotate(1.2deg); }
}

/* ------------------------------------------------------------------ top bar */

.st-topbar {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(12px, 1.8vh, 20px) clamp(18px, 4vw, 40px);
}

.st-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
}

.st-brand__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 19px);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.st-brand__name em { font-style: normal; color: var(--acid); }

/* Trademark notice rides above the baseline at a size that reads as a mark
   rather than a character in the word. */
.st-brand__tm {
  font-size: 0.55em;
  font-weight: 500;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 1px;
}

.st-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 500;
  text-decoration: none;
  padding: 11px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
  white-space: nowrap;
}

.st-btn--primary { background: var(--acid); color: #0D0D0D; }
.st-btn--primary:hover { background: #F5F663; }
.st-btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.st-btn--ghost:hover { border-color: var(--acid); color: var(--acid); }

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

/* ------------------------------------------------------------------ heading */

.st-headzone {
  position: relative;
  z-index: 1;
  flex: 0.9 1 0%;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 clamp(18px, 5vw, 40px) clamp(14px, 2.2vh, 26px);
}

.st-head {
  width: 100%;
  max-width: 62ch;
  text-align: center;
  opacity: 0;
  transform: translateY(calc(var(--dir, 1) * 30px));
}

.st-head.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.st-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acid);
  margin-bottom: 14px;
}
.st-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--acid); }

.st-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 3.1vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.st-body {
  margin: 14px auto 0;
  max-width: 58ch;
  font-size: clamp(0.83rem, 1.05vw, 1rem);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: balance;
}

/* ---------------------------------------------------------------------- nav */

.st-nav {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 0 12px;
}

.st-nav__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(13, 13, 13, 0.72);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}
.st-nav__inner::-webkit-scrollbar { display: none; }

.st-nav__item {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: clamp(0.84rem, 1vw, 0.98rem);
  font-weight: 500;
  color: var(--muted);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 11px clamp(15px, 1.8vw, 26px);
  border-radius: 999px;
  transition: color 0.2s var(--ease), background 0.3s var(--ease);
  white-space: nowrap;
}
.st-nav__item:hover { color: var(--ink); }
.st-nav__item.is-active { color: #0D0D0D; background: var(--acid); font-weight: 600; }

/* Outbound booking link. Outlined rather than filled so it never reads as the
   active section, which owns the solid-acid pill. */
.st-nav__item--cta {
  display: inline-flex;
  align-items: center;
  color: var(--acid);
  border: 1px solid rgba(237, 238, 62, 0.45);
  text-decoration: none;
  font-weight: 600;
}

.st-nav__item--cta:hover { color: #0D0D0D; background: var(--acid); border-color: var(--acid); }

/* -------------------------------------------------------------------- panel */

/* No padding here — panels are absolutely positioned and would ignore it anyway
   (an abspos child resolves against the padding box). Insets live on .st-panel. */
.st-panelzone {
  position: relative;
  z-index: 1;
  flex: 1.7 1 0%;
  min-height: 0;
}

/* Panels are appended in the order sections are first opened, so DOM order is
   visit order, not section order. Never let paint order fall back to that: the
   open panel carries the higher z-index and everything else is explicitly
   hidden. `visibility` (not opacity alone) is what keeps a closed panel's form
   fields out of the tab order — they are aria-hidden, so they must not be
   focusable either. */
.st-panel {
  position: absolute;
  inset: clamp(14px, 2vh, 24px) clamp(18px, 5vw, 40px) clamp(16px, 2.6vh, 30px);
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--dir, 1) * 46px));
  pointer-events: none;
}

.st-panel.is-in {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: auto;
}

/* Visibility is held back until the fade finishes, so hiding it doesn't cut the
   transition short. */
.st-panel.is-out {
  opacity: 0;
  transform: translateY(calc(var(--dir, 1) * -46px));
  transition: opacity 0.28s ease-in, transform 0.28s ease-in, visibility 0s linear 0.28s;
}

.st-card {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.st-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
}

/* Scrim keeps the overlay copy legible over any frame of the footage. */
.st-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(13, 13, 13, 0.95) 0%, rgba(13, 13, 13, 0.88) 42%, rgba(13, 13, 13, 0.28) 72%, rgba(13, 13, 13, 0) 100%),
    linear-gradient(to top, rgba(13, 13, 13, 0.6) 0%, transparent 42%);
}

.st-overlay {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: clamp(20px, 3.4vw, 46px);
}

.st-overlay__fit {
  width: 100%;
  max-width: 52ch;
  transform-origin: left center;
  will-change: transform;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 22px);
}

.st-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.4vh, 14px);
}

.st-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(0.82rem, 1.05vw, 0.98rem);
  line-height: 1.55;
  color: var(--ink);
}

.st-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acid);
}

.st-head-avatar {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
  margin: 12px auto;
}

.st-head-avatar[hidden] { display: none; }

.st-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.st-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 7px 11px;
  background: rgba(35, 42, 28, 0.6);
}

.st-note {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.st-ctarow {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

/* ----------------------------------------------------------- contact panel */

/* A panel carrying adopted markup instead of footage. Same card shell as every
   other section — border, radius, panel ground — but it scrolls internally
   rather than being scaled by fitOverlay, because shrinking a form shrinks its
   tap targets along with it. */
.st-card--doc {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.st-form {
  display: flex;
  gap: clamp(22px, 3vw, 44px);
  /* Vertical padding tracks viewport height, not width: on a short laptop the
     card has ~300px to hold the form and every pixel of chrome comes out of it. */
  padding: clamp(16px, 2.4vh, 32px) clamp(18px, 2.5vw, 32px);
  align-items: flex-start;
}

.st-form__terms {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 20px);
  min-width: 0;
}

.st-form__lede {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(0.82rem, 1.05vw, 0.98rem);
  line-height: 1.6;
  color: var(--ink);
}

.st-form__fields {
  flex: 0 0 clamp(280px, 38%, 420px);
  min-width: 0;
}

.st-form__form {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.st-field {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--ink);
  background: rgba(13, 13, 13, 0.55);
  /* --line is the right weight for a divider but only reaches 1.38:1 against the
     card behind it, and WCAG 1.4.11 wants 3:1 for the boundary of a control you
     have to find and click. Same token as the body copy, dialled back to the
     lightest mix that still clears 3:1. Browsers without color-mix fall back to
     the solid value, which is lighter still — never worse. */
  border: 1px solid var(--muted);
  border-color: color-mix(in srgb, var(--muted) 58%, transparent);
  border-radius: 3px;
  padding: 12px 14px;
  /* Native select chrome renders the closed control in the platform's own
     colours on Windows, which breaks straight through the palette. */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s var(--ease);
}

.st-field::placeholder { color: var(--muted); opacity: 1; }
.st-field:hover { border-color: var(--sage); }
.st-field:focus { border-color: var(--acid); outline: none; }
.st-field:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

/* Selects need room for the chevron; drawn in --muted so no new colour enters. */
select.st-field {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23A6B0A0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* The dropdown list itself is painted by the OS, which defaults to a light
   popup; name the ground explicitly so the options stay on-brand. */
select.st-field option { background: var(--bg); color: var(--ink); }

.st-form__submit {
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  margin-top: 2px;
}

.st-form__fine {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------------------------------------ footer */

.st-footer {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: clamp(10px, 1.4vh, 16px) clamp(18px, 5vw, 40px) clamp(12px, 1.8vh, 18px);
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
}

.st-footer p { margin: 0; }
.st-footer__id { color: var(--ink); }
.st-footer__id strong { font-family: var(--display); font-weight: 600; }

/* Pinned to the footer's top-right rather than placed in the flow: the stage is a
   locked viewport, so a row that added height would take it straight out of the
   panel below — and the mobile form is already tuned to the pixel to clear the
   card fold. The footer copy is three lines tall and the icons are one, so the
   corner is free. */
.st-social {
  position: absolute;
  top: clamp(10px, 1.4vh, 16px);
  right: clamp(18px, 5vw, 40px);
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sized as a tap target rather than to the glyph — the icon inside is 14-15px. */
.st-social__link {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--sage);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.st-social__link:hover {
  color: var(--acid);
  border-color: var(--acid);
  background: rgba(237, 238, 62, 0.07);
}

.st-social__link svg { display: block; }

.st-footer__links a {
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.st-footer__links a:hover { color: var(--acid); }
.st-footer__links span { padding: 0 4px; }

.st-footer__legal {
  font-size: 0.7rem;
  line-height: 1.45;
  margin-top: 6px !important;
  max-width: 118ch;
}

/* Expanded and label-less by default: on a desktop these are simply two more
   lines of footer copy, not a control. The summary only appears where the
   stage collapses the block. */
.st-footer__more > summary {
  display: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 7px;
  padding: 3px 0;
  list-style: none;
}
.st-footer__more > summary::-webkit-details-marker { display: none; }
.st-footer__more > summary:hover { color: var(--acid); }
.st-footer__more > summary::after {
  content: ' +';
  color: var(--muted);
}
.st-footer__more[open] > summary::after { content: ' –'; }

/* ------------------------------------------------------------ document page */

/* /privacy. Not a stage: an ordinary scrolling document that borrows the stage's
   header, footer, palette and type so it reads as the same site. `st-locked` is
   applied by the stage script only, so this page scrolls normally. */
.st-doc-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.st-doc {
  flex: 1 0 auto;
  width: 100%;
  max-width: 70ch;
  margin: 0 auto;
  padding: clamp(18px, 3vh, 34px) clamp(18px, 5vw, 40px) clamp(40px, 7vh, 72px);
}

.st-doc h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.st-doc__meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acid);
  margin: 12px 0 0;
}

.st-doc h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: clamp(28px, 4vh, 40px) 0 0;
}

.st-doc p {
  margin: 12px 0 0;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.65;
  color: var(--muted);
}

.st-doc a {
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.st-doc a:hover { color: var(--acid); }

.st-doc-page .st-footer { flex: 0 0 auto; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  /* Sized to its copy rather than to a share of the column. A fixed fraction was
     fine while the stage owned the whole viewport, but the footer now takes ~94px
     off the bottom, and a three-line title overflowed its box upward (the zone is
     bottom-aligned) straight through the top bar. The panel zone absorbs the
     difference instead — it already scales its own copy to fit. */
  .st-headzone { flex: 0 0 auto; padding-bottom: clamp(10px, 1.6vh, 18px); }

  /* Now that the zone is sized to its copy, every pixel it saves goes straight to
     the panel below it, so the head block runs tighter here than on a desktop. */
  .st-eyebrow { margin-bottom: 9px; }
  .st-title { line-height: 1.06; }
  .st-body { margin-top: 10px; font-size: 0.8rem; line-height: 1.45; }
  .st-scrim {
    background:
      linear-gradient(to top, rgba(13, 13, 13, 0.95) 0%, rgba(13, 13, 13, 0.82) 46%, rgba(13, 13, 13, 0.25) 100%);
  }
  .st-overlay { align-items: flex-end; padding: clamp(16px, 4vw, 24px); }
  .st-overlay__fit { max-width: none; transform-origin: bottom left; }
  .st-btn { padding: 10px 16px; font-size: 12px; }

  /* Stacked, and the form goes first: it is the reason the panel exists, and the
     card is short enough here that anything above the form would push the fields
     out of view. The pricing terms follow it. */
  .st-form { flex-direction: column; gap: 18px; }
  .st-form__fields { order: 1; flex: 1 1 auto; width: 100%; }
  .st-form__terms { order: 2; }
  .st-form__submit { padding: 13px 18px; font-size: 13px; }

  /* 16px keeps iOS from zooming the viewport on field focus; the tighter box and
     gap are what let all four fields plus the submit button clear the card fold
     on a 667px-tall phone. Fields stay 43px and the button 44px, both well above
     the 24px WCAG 2.2 target-size floor. */
  .st-field { font-size: 16px; padding: 10px 13px; }
  .st-form__form { gap: 8px; }

  /* The legal block is five lines of boilerplate; at phone widths it would eat
     the stage, so it tightens and collapses rather than pushing the panel out
     of the fold. */
  .st-footer { font-size: 0.7rem; line-height: 1.4; padding-top: 8px; padding-bottom: 10px; }

  /* The copy runs nearly full width here, so the icons move down to the one short
     line in the footer — the collapsed "Legal & trademarks" summary — and still
     cost no height. Expanding that block is the exception: the corner fills with
     legal text, so the row rejoins the flow underneath it. */
  .st-social { top: auto; bottom: 10px; gap: 7px; }
  .st-footer__more[open] + .st-social {
    position: static;
    margin-top: 9px;
  }
  .st-social__link { width: 28px; height: 28px; }

  .st-footer__legal { font-size: 0.66rem; line-height: 1.4; margin-top: 4px !important; }
  .st-footer__more > summary { display: block; }
}

/* Below ~350px the summary text and the icon row would meet in the middle of that
   shared line. Tightening the row buys back the clearance rather than dropping it
   to a line of its own, which on the shortest screens is where height is scarcest.
   25px still clears the 24px WCAG 2.2 target-size floor. */
@media (max-width: 350px) {
  .st-social { gap: 5px; }
  .st-social__link { width: 25px; height: 25px; }
}

/* Below ~1024px the copy column spans the viewport and there is no gutter left
   that clears it, so the sprite is dropped rather than run under the text and
   break the 7:1 contrast floor. The base gradient and grain still carry the
   texture at every width. */
@media (max-width: 1024px) {
  .st-bg__sprite { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .st-head,
  .st-panel {
    transition: none !important;
    transform: none !important;
  }

  /* Only the heading is safe to force opaque — it is a single reused element.
     Panels are stacked, so forcing opacity on all of them paints every visited
     panel at once and the newest one wins, which left the stage showing a
     section other than the selected one. Let is-in/is-out drive them; the
     killed transition above is already enough to remove the motion. */
  .st-head { opacity: 1 !important; }

  .st-bg__base,
  .st-bg__sprite,
  .st-bg__sprite.is-in {
    animation: none !important;
  }

  .st-bg__sprite { transition: none !important; }
}