/* ═══════════════════════════════════════════════════════════════
   LEVIS VISION — COMPONENTS
   Reusable parts only. Page-specific layout lives in sections.css.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ LOGO ═════════════════════════════════════════════════════
   A typographic reproduction of the official lockup: LEVIS in
   light wide tracking, a rule, VISION in black. Always Archivo —
   the logo is a fixed asset and never switches to the Hebrew face.
   Scales from a single --logo-size.                              */
.logo {
  --logo-size: 1rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--logo-size) * 0.28);
  font-family: 'Archivo', system-ui, sans-serif;
  line-height: 1;
  color: var(--fg-primary);
  direction: ltr;               /* the lockup never mirrors */
  unicode-bidi: isolate;
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.logo:hover { opacity: 0.72; }
/* When the lockup is a link it must also clear the tap minimum. */
a.logo { justify-content: center; min-block-size: var(--tap-min); }

.logo-levis {
  font-size: var(--logo-size);
  font-weight: var(--w-light);
  letter-spacing: var(--track-brand);
  /* tracking adds trailing space; pull it back so the optical
     centre matches VISION below */
  text-indent: var(--track-brand);
}

.logo-rule {
  inline-size: 100%;
  block-size: max(1px, calc(var(--logo-size) * 0.05));
  background: currentColor;
}

.logo-vision {
  font-size: calc(var(--logo-size) * 1.42);
  font-weight: var(--w-black);
  letter-spacing: 0.01em;
}

/* Horizontal variant — LEVIS | VISION, for tight bars */
.logo-h {
  flex-direction: row;
  align-items: baseline;
  gap: calc(var(--logo-size) * 0.5);
}
.logo-h .logo-rule {
  inline-size: max(1px, calc(var(--logo-size) * 0.05));
  block-size: calc(var(--logo-size) * 1.15);
  align-self: center;
}
.logo-h .logo-levis { text-indent: 0; }

/* ═══ NAVIGATION ═══════════════════════════════════════════════ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--gutter);
  background: transparent;
  transition: background var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  border-block-end: 1px solid transparent;
}

/* Solid once the hero is behind us */
.nav[data-stuck="true"] {
  background: rgba(10, 11, 12, 0.82);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border-block-end-color: var(--line-subtle);
}

/* Hides on scroll-down, returns on scroll-up */
.nav[data-hidden="true"] { transform: translateY(-101%); }

.nav-brand { --logo-size: 0.75rem; flex: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.75rem);
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Clears the 44px minimum target without changing how the row
     looks — the extra height is padding around the same text. */
  min-block-size: var(--tap-min);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: var(--w-med);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-secondary);
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  /* Underline grows from the reading-start edge in both
     directions, so it feels native in RTL and LTR alike. */
  transform-origin: var(--origin-start, left);
  transition: transform var(--dur-base) var(--ease-out);
}
[dir="rtl"] .nav-link::after { --origin-start: right; }

.nav-link:hover,
.nav-link:focus-visible { color: var(--fg-primary); }
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }

.nav-link[aria-current="page"] { color: var(--fg-primary); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); opacity: 0.4; }

.nav-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

/* ── icon button (sound, a11y, menu, lang) ─────────────────── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  color: var(--fg-secondary);
  border: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.icon-btn:hover,
.icon-btn:focus-visible {
  color: var(--fg-primary);
  border-color: var(--line);
}
.icon-btn svg { inline-size: 18px; block-size: 18px; }

/* Language switcher reads as text, not an icon */
.lang-btn {
  inline-size: auto;
  padding-inline: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: var(--w-med);
  letter-spacing: var(--track-label);
  border-color: var(--line-subtle);
}
.lang-btn .lang-active { color: var(--fg-primary); }
.lang-btn .lang-sep { opacity: 0.35; margin-inline: 0.4em; }
.lang-btn .lang-idle { opacity: 0.5; }

/* ── sound toggle: three bars that animate only when ON ────── */
/* Reads as an equaliser at rest — uneven bar heights, not three
   dots. Flat bars of equal height look like an ellipsis and give
   no clue that the control is about sound. */
.sound-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  block-size: 16px;
}
.sound-bars span {
  inline-size: 2px;
  background: currentColor;
  transition: block-size var(--dur-base) var(--ease-out);
}
.sound-bars span:nth-child(1) { block-size: 7px; }
.sound-bars span:nth-child(2) { block-size: 14px; }
.sound-bars span:nth-child(3) { block-size: 9px; }

/* Muted state adds a slash across the bars. */
.sound-btn[aria-pressed="false"] .sound-bars { position: relative; }
.sound-btn[aria-pressed="false"] .sound-bars::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline: -3px;
  block-size: 1.5px;
  background: currentColor;
  transform: rotate(-38deg);
  transform-origin: center;
}
.sound-btn[aria-pressed="true"] .sound-bars span {
  animation: soundPulse 1s var(--ease-soft) infinite alternate;
}
.sound-btn[aria-pressed="true"] .sound-bars span:nth-child(2) { animation-delay: 0.18s; }
.sound-btn[aria-pressed="true"] .sound-bars span:nth-child(3) { animation-delay: 0.36s; }
@keyframes soundPulse {
  from { block-size: 4px; }
  to   { block-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sound-btn[aria-pressed="true"] .sound-bars span { animation: none; }
}

/* ── hamburger ─────────────────────────────────────────────── */
.menu-btn { display: none; flex-direction: column; gap: 5px; }
.menu-btn span {
  display: block;
  inline-size: 22px;
  block-size: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-btn  { display: flex; }
}

/* ═══ MOBILE MENU ══════════════════════════════════════════════ */
.menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-10) var(--gutter) var(--sp-8);
  background: var(--ink-1000);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-veil) var(--ease-in-out);
  visibility: hidden;
}
.menu[data-open="true"] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

.menu-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.menu-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 11vw, 4rem);
  font-weight: var(--w-black);
  letter-spacing: var(--track-display);
  line-height: 1.12;
  color: var(--fg-primary);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.menu[data-open="true"] .menu-item {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger — the menu has at most 5 items */
.menu[data-open="true"] .menu-item:nth-child(1) { transition-delay: 0.12s; }
.menu[data-open="true"] .menu-item:nth-child(2) { transition-delay: 0.18s; }
.menu[data-open="true"] .menu-item:nth-child(3) { transition-delay: 0.24s; }
.menu[data-open="true"] .menu-item:nth-child(4) { transition-delay: 0.30s; }
.menu[data-open="true"] .menu-item:nth-child(5) { transition-delay: 0.36s; }

.menu-item:hover { color: var(--fg-muted); }
.menu-num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-med);
  letter-spacing: var(--track-label);
  color: var(--fg-faint);
}

.menu-foot {
  margin-block-start: auto;
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--line-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
  justify-content: space-between;
}

/* ═══ BUTTONS ══════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-block-size: var(--tap-min);
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

/* Wipe fill — grows from the reading-start edge */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill, var(--white));
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform var(--dur-slow) var(--ease-out);
}
[dir="rtl"] .btn::before { --origin-start: right; }
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

.btn-primary {
  background: var(--white);
  color: var(--ink-950);
  --btn-fill: var(--ink-950);
}
.btn-primary::before { transform: scaleX(0); }
.btn-primary:hover,
.btn-primary:focus-visible { color: var(--white); }
.btn-primary:hover::before,
.btn-primary:focus-visible::before { transform: scaleX(1); }
/* Keep the ring readable against the inverted fill */
.btn-primary:focus-visible { outline-color: var(--white); }

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--fg-primary);
  --btn-fill: var(--white);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--ink-950);
  border-color: var(--white);
}

.btn-arrow {
  transition: transform var(--dur-base) var(--ease-out);
  flex: none;
}
/* The arrow points along the reading direction */
[dir="rtl"] .btn-arrow { transform: scaleX(-1); }
.btn:hover .btn-arrow { transform: translateX(4px); }
[dir="rtl"] .btn:hover .btn-arrow { transform: scaleX(-1) translateX(4px); }

/* Text-only link with a growing rule */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--tap-min);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-primary);
  position: relative;
}
.btn-text::after {
  content: '';
  position: absolute;
  inset-block-end: 8px;
  inset-inline: 0;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: var(--origin-start, left);
  transition: transform var(--dur-base) var(--ease-out);
}
[dir="rtl"] .btn-text::after { --origin-start: right; }
.btn-text:hover::after { transform: scaleX(0); }

/* ═══ WORK CARD ════════════════════════════════════════════════
   Poster-first. The <video> is never in the DOM until the card is
   opened — the card shows a still, and hover swaps in a muted
   preview only on devices that genuinely hover.                 */
.card {
  position: relative;
  display: block;
  inline-size: 100%;
  overflow: hidden;
  background: var(--bg-card);
  cursor: pointer;
  isolation: isolate;
  /* Reserves exact space from the measured ratio → no CLS */
  aspect-ratio: var(--ratio, 16 / 9);
}

.card-media {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-cine) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
  /* The site's palette is strictly monochrome, but the work itself
     is full colour. Resting cards are desaturated so the grid reads
     as one surface and no stray hue competes with the identity;
     colour returns on interaction, which makes it feel earned. */
  filter: grayscale(1) contrast(1.06);
}
.card:hover .card-media,
.card:focus-visible .card-media {
  transform: scale(1.05);
  filter: grayscale(0) contrast(1);
}

/* The hover-preview video sits above the poster once it can play */
.card-preview {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
/* The preview only ever appears on hover, so it carries full colour
   to match the poster underneath it at that moment. */
.card[data-preview="playing"] .card-preview { opacity: 1; }

.card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 6, 7, 0.88) 0%,
    rgba(5, 6, 7, 0.30) 42%,
    rgba(5, 6, 7, 0.05) 70%
  );
  opacity: 0.9;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.card:hover .card-scrim { opacity: 1; }

.card-body {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--sp-5);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: var(--w-bold);
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  color: var(--white);
  text-wrap: balance;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-250);
}

/* Play affordance — also the hit indicator on touch */
.card-play {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--white);
  background: rgba(10, 11, 12, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.card:hover .card-play {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink-950);
  transform: scale(1.06);
}
.card-play svg { inline-size: 13px; block-size: 13px; }
/* The triangle points along the reading direction */
[dir="rtl"] .card-play svg { transform: scaleX(-1); }

/* ── THE CURRENT OFFER ───────────────────────────────────────
   One card at a time carries this. A ring, a badge and a larger
   span lift it out of the grid; the poster stays desaturated like
   every other card so the page still reads as one surface. */
.card-feature {
  box-shadow: 0 0 0 2px var(--white), var(--shadow-lg);
}
.card-feature:hover {
  box-shadow: 0 0 0 3px var(--white), var(--shadow-lg);
}

.card-badge {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  z-index: 3;
  padding: 0.4rem var(--sp-3);
  background: var(--white);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1;
}

/* Thin rule that draws across the top on hover */
.card-rule {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform var(--dur-slow) var(--ease-out);
}
[dir="rtl"] .card-rule { --origin-start: right; }
.card:hover .card-rule,
.card:focus-visible .card-rule { transform: scaleX(1); }

/* ═══ FILTER BAR ═══════════════════════════════════════════════ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.filter {
  min-block-size: var(--tap-min);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: var(--w-med);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--line-subtle);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.filter:hover { color: var(--fg-primary); border-color: var(--line); }
.filter[aria-pressed="true"] {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink-950);
}
.filter-count {
  margin-inline-start: var(--sp-2);
  opacity: 0.55;
  font-size: var(--t-micro);
}

/* ═══ PROJECT VIEWER ═══════════════════════════════════════════ */
.viewer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(5, 6, 7, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out),
              visibility var(--dur-slow);
}
.viewer[data-open="true"] { opacity: 1; visibility: visible; }

.viewer-frame {
  inline-size: 100%;
  max-inline-size: min(1400px, 100%);
  max-block-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transform: scale(0.97);
  transition: transform var(--dur-slow) var(--ease-out);
}
.viewer[data-open="true"] .viewer-frame { transform: scale(1); }

.viewer-stage {
  position: relative;
  inline-size: 100%;
  background: #000;
  /* Caps height so a 9:16 clip cannot exceed the viewport */
  max-block-size: min(74vh, 900px);
  aspect-ratio: var(--ratio, 16 / 9);
  margin-inline: auto;
}
.viewer-stage video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  background: #000;
}

.viewer-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.viewer-title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-black);
  letter-spacing: var(--track-display);
  line-height: 1.1;
}

.viewer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-block-start: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Prev/next and close are the viewer's primary controls and are
   used one-handed on a phone, so they run slightly above the 44px
   floor rather than sitting exactly on it. */
.viewer-nav { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.viewer .icon-btn {
  inline-size: 48px; block-size: 48px;
  min-inline-size: 48px; min-block-size: 48px;
  border-color: var(--line-subtle);
}
.viewer .icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.viewer-close {
  position: fixed;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--gutter);
  z-index: 2;
}

/* ═══ FORM ═════════════════════════════════════════════════════ */
.form { inline-size: 100%; }

/* ── Prominent single-step lead form ────────────────────────────
   The page's whole purpose is this form, so it is given a raised
   panel, a headline of its own and a full-width submit rather than
   reading as a quiet block of inputs. */
.form-bold {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}

.form-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: var(--w-black);
  letter-spacing: var(--track-display);
  line-height: 1.1;
}
.form-sub {
  margin-block: var(--sp-3) var(--sp-7);
  color: var(--fg-muted);
  font-size: var(--t-sm);
}

/* Phone and email share a row on anything wider than a phone —
   both are short, and pairing them shortens the form visually. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* The "(optional)" marker — quiet, so required fields read first. */
.opt {
  margin-inline-start: 0.5em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-faint);
}

.form-bold .field input { font-size: 1.125rem; }

.btn-lg {
  inline-size: 100%;
  padding-block: var(--sp-5);
  font-size: var(--t-body);
}

.form-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-end: var(--sp-7);
}
.form-progress-track {
  flex: 1;
  block-size: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.form-progress-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--white);
  inline-size: var(--progress, 33%);
  transition: inline-size var(--dur-slow) var(--ease-out);
}
.form-progress-label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  color: var(--fg-muted);
  white-space: nowrap;
}

.form-step { display: none; }
.form-step[data-active="true"] { display: block; animation: stepIn var(--dur-slow) var(--ease-out) both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .form-step[data-active="true"] { animation: none; }
}

.form-q {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-black);
  letter-spacing: var(--track-display);
  line-height: 1.15;
  margin-block-end: var(--sp-2);
}
.form-q-sub { color: var(--fg-muted); font-size: var(--t-sm); margin-block-end: var(--sp-6); }

.field { margin-block-end: var(--sp-5); }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-med);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-block-end: var(--sp-2);
}
.field .req { color: var(--fg-secondary); margin-inline-start: 0.25em; }

.field input,
.field textarea,
.field select {
  inline-size: 100%;
  min-block-size: var(--tap-min);
  padding: var(--sp-3) 0;
  font-size: var(--t-body-lg);
  font-weight: var(--w-light);
  color: var(--fg-primary);
  border-block-end: 1px solid var(--line);
  background: transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.field textarea { resize: vertical; min-block-size: 7rem; line-height: 1.7; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-block-end-color: var(--white);
}
/* Keyboard users still get the ring, offset so it reads as a
   box around the whole field rather than the text baseline */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 4px;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--fg-faint); }

/* Error state — never colour alone; an icon and text carry it */
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-block-end-color: var(--white); }
.field-error {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
  font-size: var(--t-sm);
  color: var(--fg-primary);
}
.field[data-invalid="true"] .field-error { display: flex; }
.field-error svg { inline-size: 14px; block-size: 14px; flex: none; }

/* Chip multi-select for "what do you want to create" */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  min-block-size: var(--tap-min);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-secondary);
  border: 1px solid var(--line);
  transition: all var(--dur-base) var(--ease-out);
}
.chip:hover { border-color: var(--line-strong); color: var(--fg-primary); }
.chip[aria-pressed="true"] {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink-950);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-7);
  flex-wrap: wrap;
}

/* Error summary — focus lands here on failed submit */
.form-errors {
  display: none;
  padding: var(--sp-4) var(--sp-5);
  margin-block-end: var(--sp-5);
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
}
.form-errors[data-show="true"] { display: block; }
.form-errors h3 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-block-end: var(--sp-2);
}
.form-errors ul { display: flex; flex-direction: column; gap: var(--sp-1); }
.form-errors a { font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 3px; }

/* Success panel */
.form-success { display: none; text-align: center; padding-block: var(--sp-8); }
.form-success[data-show="true"] { display: block; animation: stepIn var(--dur-slow) var(--ease-out) both; }
.form-success-mark {
  inline-size: 56px; block-size: 56px;
  margin: 0 auto var(--sp-5);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
}

/* Honeypot — visually gone, never announced, never focusable */
.hp {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  opacity: 0; pointer-events: none;
}

/* ═══ FOOTER ═══════════════════════════════════════════════════ */
.footer {
  border-block-start: 1px solid var(--line-subtle);
  padding-block: var(--sp-8) var(--sp-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-5);
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand .logo { --logo-size: 1.05rem; align-items: flex-start; }
.footer-tagline {
  margin-block-start: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.footer-h {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-med);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-block-end: var(--sp-4);
}
/* Footer links are a primary way in on a phone, so each one is a
   full 44px target. The gap goes to zero because the padding now
   provides the separation. */
.footer-list { display: flex; flex-direction: column; }
.footer-list a {
  display: flex;
  align-items: center;
  min-block-size: var(--tap-min);
  font-size: var(--t-sm);
  color: var(--fg-secondary);
}
.footer-list a:hover { color: var(--fg-primary); }

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line-subtle);
  font-size: var(--t-micro);
  font-family: var(--font-mono);
  letter-spacing: var(--track-label);
  color: var(--fg-faint);
}
/* The only link down here still needs a real target. */
.footer-bar a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  color: var(--fg-secondary);
}
.footer-bar a:hover { color: var(--fg-primary); }

/* ═══ ACCESSIBILITY PANEL ══════════════════════════════════════ */
.a11y-fab {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-start: var(--sp-5);
  z-index: var(--z-sticky);
  inline-size: 48px; block-size: 48px;
  display: grid; place-items: center;
  background: var(--ink-850);
  border: 1px solid var(--line);
  /* The glyph carries the recognised accessibility blue; the tile
     stays in the monochrome system like every other control. */
  color: var(--a11y-blue);
  box-shadow: var(--shadow-md);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.a11y-fab:hover { background: var(--ink-800); border-color: var(--line-strong); }

/* High contrast drops the blue for maximum legibility. */
:root[data-contrast="high"] .a11y-fab { color: var(--white); }

.a11y-panel {
  position: fixed;
  inset-block-end: calc(var(--sp-5) + 58px);
  inset-inline-start: var(--sp-5);
  z-index: var(--z-sticky);
  inline-size: min(300px, calc(100vw - 2 * var(--sp-5)));
  padding: var(--sp-5);
  background: var(--ink-900);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.a11y-panel[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

.a11y-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-block-start: 1px solid var(--line-subtle);
}
.a11y-row:first-of-type { border-block-start: none; }
.a11y-label { font-size: var(--t-sm); color: var(--fg-secondary); }

/* The accessibility controls are the last place that should have
   cramped targets — all of them clear 44px. */
.a11y-steps { display: flex; gap: var(--sp-1); }
.a11y-step {
  inline-size: var(--tap-min); block-size: var(--tap-min);
  min-inline-size: var(--tap-min); min-block-size: var(--tap-min);
  display: grid; place-items: center;
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--t-micro);
}
.a11y-step[aria-pressed="true"] { background: var(--white); color: var(--ink-950); border-color: var(--white); }

/* The hit area is a full 44px tall; the visible track is drawn
   inside it at 26px so the control still reads as a small switch
   without shrinking the thing a finger has to land on. */
.switch {
  inline-size: 46px; min-inline-size: 46px;
  block-size: var(--tap-min); min-block-size: var(--tap-min);
  border: none;
  position: relative;
  display: grid;
  place-items: center;
}
.switch::before {
  content: '';
  inline-size: 46px;
  block-size: 26px;
  border: 1px solid var(--line-strong);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.switch::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 4px;
  margin-block-start: -9px;
  inline-size: 18px; block-size: 18px;
  background: var(--fg-secondary);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.switch[aria-pressed="true"]::before { background: var(--white); border-color: var(--white); }
.switch[aria-pressed="true"]::after { background: var(--ink-950); transform: translateX(20px); }
[dir="rtl"] .switch[aria-pressed="true"]::after { transform: translateX(-20px); }

/* Underline-links accessibility preference */
:root[data-underline="true"] a:not(.btn):not(.logo):not(.card) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Text-size preference scales the root, so every rem follows */
:root[data-textsize="1"] { font-size: 106%; }
:root[data-textsize="2"] { font-size: 112%; }

/* ═══ SOCIAL RAIL ══════════════════════════════════════════════ */
.social-rail {
  position: fixed;
  inset-inline-end: var(--sp-5);
  inset-block-end: var(--sp-5);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.social-rail a {
  inline-size: 48px; block-size: 48px;
  display: grid; place-items: center;
  background: var(--ink-850);
  border: 1px solid var(--line-subtle);
  color: var(--fg-secondary);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-base) var(--ease-out);
}
.social-rail a:hover {
  color: var(--ink-950);
  background: var(--white);
  border-color: var(--white);
}
.social-rail svg { inline-size: 18px; block-size: 18px; }

@media (max-width: 700px) {
  .social-rail { flex-direction: row; inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4); }
  .social-rail a { inline-size: 44px; block-size: 44px; }
  .a11y-fab { inline-size: 44px; block-size: 44px; inset-block-end: var(--sp-4); inset-inline-start: var(--sp-4); }
  .a11y-panel { inset-block-end: calc(var(--sp-4) + 52px); inset-inline-start: var(--sp-4); }
}

/* ═══ SCROLL PROGRESS ══════════════════════════════════════════ */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: calc(var(--z-nav) + 1);
  block-size: 2px;
  background: transparent;
  pointer-events: none;
}
.progress-fill {
  block-size: 100%;
  inline-size: 0%;
  background: var(--white);
  opacity: 0.85;
  transform-origin: var(--origin-start, left);
}
[dir="rtl"] .progress-fill { margin-inline-start: auto; }

/* ═══ PAGE VEIL (transitions) ══════════════════════════════════ */
.veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  background: var(--ink-1000);
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-veil) var(--ease-in-out);
}
/* Retracts upward on load, closes downward on navigate */
.veil[data-state="open"]    { clip-path: inset(0 0 100% 0); }
.veil[data-state="closing"] { clip-path: inset(0 0 0 0); pointer-events: all; }

.veil-logo {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  --logo-size: 1.5rem;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.veil[data-state="closed"] .veil-logo { opacity: 1; }

/* ═══ CUSTOM CURSOR (fine pointers only) ═══════════════════════ */
.cursor {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--z-cursor);
  inline-size: 8px; block-size: 8px;
  border-radius: 50%;
  background: var(--white);
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
  opacity: 0;
  will-change: transform;
}
.cursor[data-active="true"] { opacity: 1; }
.cursor[data-mode="hover"] { inline-size: 44px; block-size: 44px; }
.cursor[data-mode="view"]  { inline-size: 72px; block-size: 72px; mix-blend-mode: normal; background: var(--white); }

.cursor-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-950);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.cursor[data-mode="view"] .cursor-label { opacity: 1; }

/* Only enable on real pointers with hover; never on touch */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
}

/* ═══ MARQUEE ══════════════════════════════════════════════════ */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-subtle);
  padding-block: var(--sp-4);
  /* Marquee content is decorative repetition; it is aria-hidden
     in the markup and always runs LTR regardless of page dir. */
  direction: ltr;
}
.marquee-track {
  display: flex;
  gap: var(--sp-6);
  inline-size: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 2.1rem);
  font-weight: var(--w-black);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}
.marquee-dot { inline-size: 5px; block-size: 5px; background: var(--fg-faint); flex: none; }

/* ═══ TOAST ════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  inset-block-end: var(--sp-6);
  inset-inline-start: 50%;
  z-index: var(--z-modal);
  padding: var(--sp-4) var(--sp-6);
  background: var(--white);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 220%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.toast[data-show="true"] { transform: translate(-50%, 0); }

/* ═══ WELCOME POPUP ════════════════════════════════════════════ */
.pop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(5, 6, 7, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.pop[data-open="true"] { opacity: 1; }

.pop-card {
  position: relative;
  inline-size: 100%;
  max-inline-size: 520px;
  padding: clamp(2rem, 5vw, 3.25rem);
  background: var(--ink-900);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  transform: translateY(16px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-out);
}
.pop[data-open="true"] .pop-card { transform: none; }

.pop-close {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-end: var(--sp-2);
  color: var(--fg-muted);
}
.pop-close:hover { color: var(--fg-primary); }

.pop-logo { --logo-size: 0.8rem; margin-block-end: var(--sp-2); }

.pop-title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-black);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.pop-body {
  color: var(--fg-secondary);
  font-weight: var(--w-light);
  line-height: var(--leading-body);
  max-inline-size: 42ch;
}

.pop-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
  inline-size: 100%;
}
.pop-actions .btn { inline-size: 100%; }
.pop-dismiss { color: var(--fg-muted); font-size: var(--t-micro); }
.pop-dismiss::after { content: none; }
.pop-dismiss:hover { color: var(--fg-primary); }

@media (prefers-reduced-motion: reduce) {
  .pop, .pop-card { transition: none; }
  .pop-card { transform: none; }
}