/* NightShift investor landing · production build of Claude Design V6.
   Mobile-first. Reference frames: 390px (mobile, 6b) and 1440px (desktop, 6a).
   Breakpoints: <768 mobile · 768–1023 tablet · ≥1024 desktop. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #050706;
  --fg: #F2F4F1;
  --fg-2: #C9CFCA;
  --muted: #98A19A;
  --dim: #6f7871;
  --dimmer: #5d655f;
  --line: #1E2320;
  --line-2: #2C332F;
  --teal: #5FD6C4;
  --teal-line: #49A092;
  --teal-hover: #8FE6D9;
  --card: #111412;

  --sans: Archivo, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* side gutter: 20px at 390, never below 16px; safe areas for landscape notches */
  --pad: clamp(16px, 5.13vw, 40px);
  --pad-l: max(var(--pad), env(safe-area-inset-left));
  --pad-r: max(var(--pad), env(safe-area-inset-right));
  --content: 1200px;

  /* fixed section-nav button */
  --nav-size: 44px;
  --nav-top: calc(env(safe-area-inset-top) + 10px);      /* centred on the 64px mobile header row */
  --nav-right: max(16px, calc(env(safe-area-inset-right) + 8px));
  --nav-clear: calc(var(--nav-right) + var(--nav-size) + 16px);
}
@media (min-width: 768px) {
  :root {
    --pad: clamp(40px, 8.33vw, 120px);
    --nav-top: calc(env(safe-area-inset-top) + 26px);    /* centred on the 96px desktop header row */
    --nav-right: max(24px, calc(env(safe-area-inset-right) + 8px));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--teal); }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.only-d { display: none; }
@media (min-width: 768px) {
  .only-d { display: inline; }
  .only-m { display: none; }
}

/* ── Shared section scaffolding ─────────────────────────────── */
.sec {
  padding-block: 72px 80px;
  padding-inline: max(var(--pad-l), (100% - var(--content)) / 2) max(var(--pad-r), (100% - var(--content)) / 2);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.h2 {
  font: 600 32px/1 var(--sans);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--fg);
  text-wrap: balance;
}
.eyebrow {
  font: 500 11px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.eyebrow--teal { color: var(--teal); }

@media (min-width: 768px) {
  .sec { padding-block: clamp(96px, 11.1vw, 160px); }
  .h2 { font-size: clamp(40px, 3.9vw, 56px); }
  .eyebrow { font-size: 12px; }
}

/* ── 1 · Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 760px;
  overflow: hidden;
  background: var(--bg);
}
.hero__wedge {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  pointer-events: none;
}
.hero__wedge--d { display: none; }

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 64px;
  /* keep the header link clear of the fixed nav button (no change ≥1024px, where --pad already exceeds it) */
  padding-inline: var(--pad-l) max(var(--pad-r), var(--nav-clear));
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
.topbar__logo { height: 20px; width: auto; }
.topbar__cta {
  font: 500 13px var(--sans);
  color: var(--fg-2);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line-2);
}
.topbar__cta:hover { color: var(--teal); }

.hero__content {
  position: absolute;
  top: 132px;
  left: var(--pad-l);
  right: var(--pad-r);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.hero__title {
  font: 600 clamp(40px, 12.8vw, 50px)/.92 var(--sans);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--fg);
}
.hero__lead {
  max-width: 620px;
  font: 400 16px/1.55 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
}
.hero__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14px var(--sans);
  color: var(--fg);
}
.hero__arrow { color: var(--teal); }

@media (min-width: 768px) {
  .hero { height: 900px; }
  .hero__wedge--d { display: block; }
  .hero__wedge--m { display: none; }
  .topbar { height: 96px; }
  .topbar__logo { height: 28px; }
  .topbar__cta { font-size: 14px; padding-bottom: 4px; }
  /* Anchored from the bottom so "See what changes" always sits on the wedge arc,
     exactly where V6 places it at 1440 (content top 188px). */
  .hero__content {
    top: auto;
    bottom: 345px;
    gap: 32px;
  }
  .hero__title { font-size: clamp(64px, 7.2vw, 104px); }
  .hero__lead { font-size: 19px; line-height: 1.6; }
  .hero__more { gap: 10px; margin-top: 4px; }
}

/* ── 2 · FOV proof ──────────────────────────────────────────── */
.sec--fov {
  border-top: 0;
  padding-block: 72px 88px;
  padding-inline: 0;
  gap: 20px;
}
.fov-title { margin: 0 var(--pad-r) 8px var(--pad-l); }

.fov {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #000;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* vertical swipes and pinch stay with the browser; horizontal drags come to JS */
  touch-action: pan-y pinch-zoom;
  outline: none;
  --pvs-o: 1;
  --ns-o: 1;
}
.js .fov { cursor: ew-resize; }
.fov__layer { position: absolute; inset: 0; pointer-events: none; }
.fov__layer--pvs {
  background: #000;
  overflow: hidden;
  clip-path: inset(0 calc((100 - var(--pos)) * 1%) 0 0);
}
.fov__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
/* V6 alignment calibration (overlay-checked): +28px / −6px at native 1774px. */
.fov__img--pvs { transform: translate(1.58%, -0.68%); }

.fov__label {
  position: absolute;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fov__label--pvs { left: 14px; opacity: var(--pvs-o); }
.fov__label--ns { right: 14px; text-align: right; opacity: var(--ns-o); }
.fov__sys {
  font: 500 10px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fov__label--pvs .fov__sys { color: var(--muted); }
.fov__label--ns .fov__sys { color: var(--teal); }
.fov__deg { font: 600 16px var(--sans); color: var(--fg); }

.fov__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pos) * 1%);
  width: 1px;
  background: var(--fg);
  pointer-events: none;
}
.fov__grip {
  position: absolute;
  top: 50%;
  left: clamp(22px, calc(var(--pos) * 1%), calc(100% - 22px));
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--fg);
  background: var(--bg);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 400 15px var(--sans);
  color: var(--fg);
  pointer-events: none;
  transition: box-shadow .15s;
}
.js .fov__grip { display: flex; }
.fov:focus-visible .fov__grip { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--teal); }
.fov:focus-visible { box-shadow: inset 0 0 0 2px var(--teal); }

/* ── Touch devices: native range input as the FOV control (experiment) ──
   main.js adds .fov--native on coarse-pointer devices. The range is invisible:
   a 96px band centred vertically, 64px wider than the frame (32px each side,
   clipped by .fov) so the native thumb centre sits exactly on the divider.
   Above and below the band the image is plain page-scroll area. */
.fov__range { display: none; }
.fov--native { touch-action: auto; cursor: auto; }
.fov--native .fov__range {
  display: block;
  position: absolute;
  top: 50%;
  left: -32px;
  width: calc(100% + 64px);
  height: 96px;
  margin: -48px 0 0;
  padding: 0;
  background: transparent;
  opacity: 0;              /* invisible, still hit-testable and focusable */
  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
  -webkit-tap-highlight-color: transparent;
}
.fov--native .fov__range::-webkit-slider-runnable-track { height: 96px; background: transparent; border: 0; }
.fov--native .fov__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 96px;
  margin-top: 0;
  background: transparent;
  border: 0;
}
.fov--native .fov__range::-moz-range-track { height: 96px; background: transparent; border: 0; }
.fov--native .fov__range::-moz-range-thumb { width: 64px; height: 96px; background: transparent; border: 0; border-radius: 0; }
.fov--native:has(.fov__range:focus-visible) .fov__grip { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--teal); }

.fov-caption {
  margin: 8px var(--pad-r) 0 var(--pad-l);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fov-caption__main { font: 400 17px/1.45 var(--sans); color: var(--fg-2); }
.fov-caption__note { font: 500 10px/1.5 var(--mono); letter-spacing: .02em; color: var(--dim); }

@media (min-width: 768px) {
  .sec--fov {
    padding-block: clamp(80px, 8.33vw, 120px) clamp(96px, 11.1vw, 160px);
    padding-inline: max(var(--pad-l), (100% - var(--content)) / 2) max(var(--pad-r), (100% - var(--content)) / 2);
    gap: 48px;
  }
  .fov-title { margin: 0; text-align: center; }
  .fov__label { top: 28px; bottom: auto; gap: 6px; }
  .fov__label--pvs { left: 32px; }
  .fov__label--ns { right: 32px; }
  .fov__sys { font-size: 11px; }
  .fov__deg { font-size: 26px; }
  .fov__grip { width: 44px; height: 44px; }
  .fov-caption { margin: 0; align-items: center; gap: 14px; text-align: center; }
  .fov-caption__main { font-size: 20px; line-height: normal; }
  .fov-caption__note { font-size: 11px; line-height: normal; }
}

/* ── 3 · Problem / Solution ─────────────────────────────────── */
.sec--ps { padding-bottom: 88px; }
.ps { display: flex; flex-direction: column; gap: 56px; }
.ps__col { display: flex; flex-direction: column; gap: 20px; }
.ps__media { display: flex; align-items: center; justify-content: center; }
.ps__col--legacy .ps__media { height: 190px; }
.ps__col--ns .ps__media { height: 130px; }
.ps__img--legacy {
  height: 180px;
  width: auto;
  filter: grayscale(1) brightness(.62) contrast(.9);
}
.ps__img--ns { width: 330px; }
.ps__lead { font: 500 21px/1.3 var(--sans); color: var(--muted); text-wrap: pretty; }
.ps__col--ns .ps__lead { color: var(--fg); }
.ps__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font: 400 15px/1.4 var(--sans);
  color: var(--muted);
}
.ps__list li:last-child { border-bottom: 1px solid var(--line); }
.ps__list svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--dimmer); stroke-width: 1.3;
}
.ps__col--ns .ps__list li { color: var(--fg); }
.ps__col--ns .ps__list svg { stroke: var(--teal); }
.ps__divider { display: flex; align-items: center; gap: 12px; color: var(--teal); font: 400 18px var(--sans); }
.ps__divider::before, .ps__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (min-width: 768px) {
  .sec--ps { padding-block: clamp(80px, 8.33vw, 120px) clamp(96px, 11.1vw, 160px); }
  .ps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: clamp(40px, 5.56vw, 80px);
  }
  .ps__col { gap: 36px; }
  .ps__col--legacy .ps__media, .ps__col--ns .ps__media { height: clamp(220px, 20.8vw, 300px); }
  .ps__img--legacy { height: clamp(210px, 20.1vw, 290px); }
  .ps__img--ns { width: min(520px, 100%); }
  .ps__lead { min-height: 68px; font-size: clamp(22px, 1.8vw, 26px); }
  .ps__list li {
    grid-template-columns: 24px 1fr;
    gap: 18px;
    padding: 20px 0;
    font-size: clamp(15px, 1.18vw, 17px);
  }
  .ps__list svg { width: 24px; height: 24px; stroke-width: 1.25; }
  .ps__divider { background: var(--line); }
  .ps__divider::before, .ps__divider::after, .ps__divider span { display: none; }
}

/* ── 4 · Economics ──────────────────────────────────────────── */
.sec--econ { gap: 40px; }
.econ { display: flex; flex-direction: column; gap: 40px; }
.econ__item { display: flex; flex-direction: column; gap: 16px; }
.econ__num {
  font: 300 clamp(96px, 33.8vw, 132px)/.85 var(--sans);
  letter-spacing: -.05em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.econ__tilde { color: var(--dimmer); transition: opacity .4s; }
.econ.is-counting .econ__tilde { opacity: 0; }
.econ__text { display: flex; flex-direction: column; gap: 16px; }
.econ__label {
  font: 600 16px var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg);
}
.econ__sub { font: 400 14px/1.45 var(--sans); color: var(--muted); }
.econ__rule { height: 1px; background: var(--line); }

@media (min-width: 768px) {
  .sec--econ { gap: clamp(64px, 6.67vw, 96px); }
  .econ {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: clamp(40px, 6.67vw, 96px);
  }
  .econ__item { gap: 28px; }
  .econ__num { font-size: min(200px, 13.9vw); }
  .econ__text { gap: 10px; }
  .econ__label { font-size: clamp(16px, 1.39vw, 20px); }
  .econ__sub { font-size: 16px; line-height: normal; }
  .econ__rule { height: auto; }
}

/* ── 5 · Traction ───────────────────────────────────────────── */
.sec--traction { gap: 28px; }
.traction { display: flex; flex-direction: column; gap: 10px; }
.proof {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1.5px solid var(--teal-line);
  border-radius: 3px;
  font: 400 16px/1.35 var(--sans);
  color: var(--fg);
}
.proof svg {
  flex: none;
  width: 22px; height: 22px;
  fill: none; stroke: var(--teal); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.proof span { text-wrap: pretty; }

@media (min-width: 768px) {
  .sec--traction { gap: 64px; }
  .traction {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;            /* every box takes the height of the tallest */
    gap: 16px;
  }
  .proof {
    min-height: 152px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
    font-size: clamp(18px, 1.32vw, 19px);
  }
  .proof svg { width: 24px; height: 24px; }
}
@media (min-width: 1024px) {
  .traction { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 6 · Opportunity ────────────────────────────────────────── */
.sec--opp { gap: 32px; }
.opp { display: flex; flex-direction: column; gap: 32px; }
.opp__major { order: -1; display: flex; flex-direction: column; gap: 14px; }
.opp__big {
  font: 300 clamp(88px, 28.7vw, 180px)/.85 var(--sans);
  letter-spacing: -.05em;
  color: var(--fg);
  white-space: nowrap;
}
.opp__bigcap { font: 500 17px var(--sans); color: var(--fg); }
.opp__bigtag { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.opp__minor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.opp__stat { display: flex; flex-direction: column; gap: 8px; }
.opp__num { font: 400 36px/1 var(--sans); letter-spacing: -.03em; color: var(--muted); }
.opp__cap { font: 400 13px/1.4 var(--sans); color: var(--dim); }

@media (min-width: 1024px) {
  .sec--opp { gap: clamp(64px, 5.56vw, 80px); }
  .opp {
    display: grid;
    grid-template-columns: clamp(260px, 25vw, 360px) minmax(0, 1fr);
    gap: clamp(64px, 8.33vw, 120px);
    align-items: end;
  }
  .opp__major { order: 0; gap: 20px; padding-bottom: 28px; }
  .opp__big { font-size: min(240px, 16.6vw); line-height: .82; }
  .opp__bigcap { font-size: 22px; }
  .opp__bigtag { font-size: 13px; }
  .opp__minor { display: flex; flex-direction: column; gap: 0; border-top: 0; padding-top: 0; }
  .opp__stat { gap: 10px; padding: 28px 0; border-top: 1px solid var(--line); }
  .opp__stat:last-child { border-bottom: 1px solid var(--line); }
  .opp__num { font-size: clamp(44px, 3.9vw, 56px); }
  .opp__cap { font-size: 15px; line-height: 1.3; }
  .opp__tag { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
}

/* ── 7 · Founders ───────────────────────────────────────────── */
/* Mobile (V6 6b): a row of three portraits, then a stacked list.
   One markup for both layouts: .founder uses display:contents on mobile. */
.sec--founders { gap: 28px; }
.founders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 10px;
}
.founder { display: contents; }
.founder__photo {
  grid-row: 1;
  aspect-ratio: 480 / 470;
  background: var(--card);
  overflow: hidden;
  margin-bottom: 28px;
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.founder__info {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.founder--3 .founder__info { border-bottom: 1px solid var(--line); }
.founder__name { font: 600 17px var(--sans); color: var(--fg); }
.founder__role {
  font: 500 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  text-align: right;
}
.founder__bio { grid-column: 1 / -1; font: 400 14px/1.4 var(--sans); color: var(--muted); }

@media (max-width: 359px) {
  .founder__info { grid-template-columns: 1fr; }
  .founder__role { text-align: left; }
}

@media (min-width: 768px) {
  .sec--founders { gap: 64px; }
  .founders { column-gap: clamp(24px, 2.78vw, 40px); }
  .founder { display: flex; flex-direction: column; gap: 22px; }
  .founder__photo { margin: 0; }
  .founder__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 0;
  }
  .founder--3 .founder__info { border: 0; }
  .founder__name { font-size: clamp(19px, 1.53vw, 22px); }
  .founder__role { font-size: 11px; letter-spacing: .14em; text-align: left; }
  .founder__bio { font-size: 15px; line-height: 1.45; }
}

/* ── 8 · Close / CTA ────────────────────────────────────────── */
.close { border-top: 1px solid var(--line); }
.close__inner {
  padding: 112px var(--pad-r) 96px var(--pad-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.close__logo { height: 36px; width: auto; }
.close__actions {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.cta {
  align-self: stretch;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  font: 600 14px var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--bg);
  background: var(--teal);
  border-radius: 999px;
  transition: background .2s;
}
.cta:hover, .cta:focus-visible { color: var(--bg); background: var(--teal-hover); }
.cta:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 999px; }
.cta__arrow { transition: transform .2s; }
.cta:hover .cta__arrow, .cta:focus-visible .cta__arrow { transform: translateX(4px); }

@media (max-width: 359px) {
  .cta { padding: 0 16px; gap: 10px; font-size: 13px; letter-spacing: .06em; }
}

.close__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font: 400 15px var(--sans);
}
.close__contact a { padding: 2px 0; }
.close__email { color: var(--fg-2); }
.close__phone { color: var(--muted); }
.close__dot { display: none; color: #3a413c; }

.legal {
  padding: 18px var(--pad-r) max(18px, env(safe-area-inset-bottom)) var(--pad-l);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font: 400 11px var(--sans);
  color: var(--dimmer);
}

@media (min-width: 768px) {
  .close__inner {
    padding-block: clamp(140px, 13.9vw, 200px) clamp(120px, 12.5vw, 180px);
    gap: 56px;
  }
  .close__logo { height: 48px; }
  .close__actions { align-self: center; gap: 24px; }
  .cta {
    align-self: center;
    height: 62px;
    gap: 14px;
    padding: 0 44px;
    font-size: 15px;
  }
  .close__contact { flex-direction: row; gap: 12px; }
  .close__dot { display: inline; }
  .legal {
    padding-block: 24px max(24px, env(safe-area-inset-bottom));
    padding-inline: max(var(--pad-l), (100% - var(--content)) / 2) max(var(--pad-r), (100% - var(--content)) / 2);
    font-size: 12px;
  }
}

/* ── Subtle first-view fade-ins. Only active while JS is running: the inline
   head script drops .reveal-on after 3s if main.js never arrived. ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease-out, transform .6s ease-out; }
  .reveal-on .reveal.is-in { opacity: 1; transform: none; }
}

/* ── Section navigation (fixed hamburger + right drawer) ─────── */
.navbtn {
  position: fixed;
  top: var(--nav-top);
  right: var(--nav-right);
  z-index: 50;
  width: var(--nav-size);
  height: var(--nav-size);
  padding: 0;
  display: none;                 /* shown when it can work: popover support or JS */
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, color .2s;
}
@supports selector(:popover-open) { .navbtn { display: flex; } }
.js .navbtn { display: flex; }
.navbtn:hover, .navbtn[aria-expanded="true"] { color: var(--teal); border-color: var(--teal-line); }
.navbtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.navbtn__bars { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.navbtn__bars span { display: block; height: 1.5px; background: currentColor; }

.drawer {
  /* reset popover UA styles */
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  padding: calc(var(--nav-top) + var(--nav-size) + 24px) var(--nav-right) max(32px, env(safe-area-inset-bottom)) 28px;
  width: min(82vw, 340px);
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--fg);
  border: 0;
  border-left: 1px solid var(--line-2);
  z-index: 60;
  display: none;
  flex-direction: column;
}
@supports selector(:popover-open) { .drawer:popover-open { display: flex; } }
.drawer.is-open { display: flex; }
.drawer::backdrop { background: rgba(5, 7, 6, .6); }
.nav-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(5, 7, 6, .6); }
.nav-scrim[hidden] { display: none; }
@media (min-width: 768px) {
  .drawer { width: 300px; padding-left: 36px; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports selector(:popover-open) { .drawer:popover-open { animation: drawer-in .22s ease-out; } }
  .drawer.is-open { animation: drawer-in .22s ease-out; }
  .drawer::backdrop { animation: scrim-in .22s ease-out; }
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

.drawer__close {
  position: absolute;
  top: var(--nav-top);
  right: var(--nav-right);
  width: var(--nav-size);
  height: var(--nav-size);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.drawer__close:hover { color: var(--teal); border-color: var(--teal-line); }
.drawer__close:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.drawer__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.drawer__list { display: flex; flex-direction: column; }
.drawer__list li { border-top: 1px solid var(--line); }
.drawer__list li:last-child { border-bottom: 1px solid var(--line); }
.drawer__list a {
  position: relative;
  display: block;
  padding: 15px 0 15px 18px;
  font: 600 13px var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.drawer__list a::before {           /* small teal marker for the section in view */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1.5px;
  background: var(--teal);
  opacity: 0;
  transition: opacity .2s;
}
.drawer__list a:hover { color: var(--teal); }
.drawer__list a[aria-current] { color: var(--teal); }
.drawer__list a[aria-current]::before { opacity: 1; }
.drawer__list a:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 2px; }

/* Scroll lock while the drawer is open (position:fixed keeps iOS from scrolling behind it). */
html.nav-open, html.nav-open body { overscroll-behavior: none; }
/* Sections receive programmatic focus after menu navigation (for screen readers); no ring. */
#top:focus, main > section:focus, #contact:focus { outline: none; }

/* Scroll-depth sentinels for analytics (main.js): 1px, invisible, positioned against <body>. */
body { position: relative; }
.depth-sentinel { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }