/* ============================================================
   website-v18/v18.css — handoff batch 2026-09-26
   (DESIGN.md / STYLE.md / COPY.md approved master)
   Loads LAST (after website-v17/v17.css).
   ============================================================ */

/* ---------- What We Do: category color identities ---------- */
/* taller cards: the art top + full back services need more than the v17 3/5 (440px) */
.wwd-card { aspect-ratio: auto; min-height: 525px; }
.wwd-card--blue   { --wwd: #4aa8ff; --wwd-rgb: 74, 168, 255; }
.wwd-card--green  { --wwd: #3ecf8e; --wwd-rgb: 62, 207, 142; }
.wwd-card--orange { --wwd: #fb8b1e; --wwd-rgb: 251, 139, 30; }
.wwd-card--purple { --wwd: #a78bfa; --wwd-rgb: 167, 139, 250; }

.wwd-card .wwd-card__face {
  border-color: rgba(var(--wwd-rgb), 0.38);
  box-shadow: 0 0 30px -10px rgba(var(--wwd-rgb), 0.35);
}
.wwd-card:hover .wwd-card__face,
.wwd-card:focus-visible .wwd-card__face {
  border-color: rgba(var(--wwd-rgb), 0.75);
  box-shadow: 0 0 0 1px rgba(var(--wwd-rgb), 0.18), 0 0 34px rgba(var(--wwd-rgb), 0.22);
}

/* ---------- front: flush artwork, then title/summary/lines ---------- */
.wwd-card__face--front { padding: 0; }
.wwd-card__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 369 / 288;
  flex: 0 0 auto;
  overflow: hidden;
}
.wwd-card__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.wwd-card__face--front .wwd-card__cat,
.wwd-card__face--front .wwd-card__summary,
.wwd-card__face--front .wwd-card__lines,
.wwd-card__face--front .wwd-card__hint {
  padding-left: 18px;
  padding-right: 18px;
}
.wwd-card__face--front .wwd-card__cat { margin-top: 16px; font-size: 18px; }
.wwd-card__face--front .wwd-card__summary {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
  font-size: 13.5px;
}
.wwd-card__face--front .wwd-card__lines {
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: 58px;
  border-top: 1px solid var(--line);
  gap: 10px;
}
.wwd-card__face--front .wwd-card__arrow { bottom: 16px; }
/* line rows: colored icon chip + label */
.wwd-card__face--front .wwd-card__lines > span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.wwd-card__face--front .wwd-card__lines > span::before { content: none; }
.wwd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: rgba(var(--wwd-rgb), 0.16);
  border: 1px solid rgba(var(--wwd-rgb), 0.35);
  color: var(--wwd);
}
.wwd-chip svg { width: 15px; height: 15px; }

/* colored arrow control, bottom center (approved master) */
.wwd-card__face--front .wwd-card__arrow {
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border-color: rgba(var(--wwd-rgb), 0.55);
  color: var(--wwd);
}
.wwd-card:hover .wwd-card__arrow {
  background: rgba(var(--wwd-rgb), 0.14);
  border-color: var(--wwd);
  color: var(--wwd);
}

/* ---------- back: same color identity, chip-headed services ---------- */
.wwd-card__back-title { color: var(--wwd); }
.wwd-card__return { color: var(--wwd); border-color: rgba(var(--wwd-rgb), 0.45); }
.wwd-card__svc { gap: 3px; padding: 10px 0; margin: 0; }
.wwd-card__back-head { margin-bottom: 0; }
.wwd-card__svc > span { font-size: 12.5px; }
.wwd-svc-head { display: flex; align-items: center; gap: 10px; }
.wwd-svc-head .wwd-chip { width: 24px; height: 24px; }
.wwd-svc-head .wwd-chip svg { width: 13px; height: 13px; }
.wwd-card__cta { color: var(--wwd); border-top-color: rgba(var(--wwd-rgb), 0.3); }

/* RBS section CTA: hero__actions centers by default (hero-only rule);
   the RBS text column is left-aligned, so its button aligns with it. */
.rbs .hero__actions { justify-content: flex-start; }

/* mobile: the RBS CTA reads better under the book than under the body copy.
   display:contents flattens the text column so the book can be ordered between it. */
@media (max-width: 700px) {
  .rbs__grid { display: flex; flex-direction: column; }
  .rbs__grid > div:first-child { display: contents; }
  .rbs .eyebrow { order: 1; align-self: flex-start; }
  .rbs h2 { order: 2; }
  .rbs .rbs__body { order: 3; }
  .rbs .book { order: 4; margin-top: 28px; }
  .rbs .hero__actions { order: 5; margin-top: 24px !important; }
}

/* ---------- Systems Lab teaser: centered, centerpiece dominant ---------- */
.lab .lab__wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* children use the full wrap width: the h2 must not shrink-wrap or the sentence wraps mid-phrase */
  text-align: center;
}
/* site.css caps .lab h2 at max-width:12ch (old left-column layout) — that forces
   the sentence to wrap mid-phrase. Release the cap; the <br> owns the break now. */
.lab .lab__wrap h2 { max-width: none; }
.lab .lab__wrap .eyebrow { letter-spacing: 0.3em; }
.lab .lab__wrap .lede { max-width: 62ch; width: 100%; margin: 6px auto 0; color: var(--ink-2); }
.lab__centerpiece {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 20px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(96, 165, 250, 0.28);
}
.lab .lab__cta { margin-top: 18px; display: flex; justify-content: center; }
.btn--light {
  background: #eef4fb;
  color: #0b1026;
  border: 1px solid #eef4fb;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.btn--light:hover {
  background: #ffffff;
  color: #0b1026;
  box-shadow: 0 6px 26px rgba(148, 197, 255, 0.35);
}

/* ---------- FAQ: bigger intentional heading + atmosphere ---------- */
.faq .faq__head { position: relative; text-align: left; margin-top: -14px; }
.faq .faq__head + .faq__cards { margin-top: 30px; }
.faq .faq-heading {
  font-size: clamp(38px, 5.2vw, 56px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(224, 247, 255, 0.95) 0%, rgba(148, 214, 245, 0.9) 38%, rgba(56, 152, 205, 0.85) 70%, rgba(23, 98, 148, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.faq .faq__head::before {
  content: "";
  position: absolute;
  left: -26px;
  top: -18px;
  width: 230px;
  height: 100px;
  background: radial-gradient(closest-side, rgba(94, 200, 255, 0.16), transparent 75%);
  filter: blur(6px);
  pointer-events: none;
}

/* ---------- Founders page (editorial, executive) ---------- */
.founders-main { padding-top: 64px; }
.founders-eyebrow {
  color: var(--teal, #5eead4);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.founders-h1 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 650;
  line-height: 1.12;
  margin: 0 0 46px;
  color: var(--ink, #eaf2f8);
}
.founder {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
  padding: 44px 28px;
  border-radius: var(--radius, 14px);
  border: 1px solid transparent;
  transition: background-color 250ms ease, border-color 250ms ease, transform 250ms ease;
  margin-bottom: 26px;
}
.founder:hover {
  background: rgba(94, 200, 255, 0.045);
  border-color: rgba(94, 200, 255, 0.16);
}
a.founder-link { display: block; text-decoration: none; color: inherit; }
.founder__bio h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 650;
  margin: 0 0 14px;
  color: var(--ink, #eaf2f8);
}
.founder__bio p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2, #b9c6d0);
  margin: 0;
  max-width: 58ch;
}
.founder__portrait { position: relative; margin: 0; }
.founder__portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius, 14px);
  filter: grayscale(1) contrast(1.06);
  border: 1px solid rgba(148, 197, 255, 0.14);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}
.founder--shant .founder__portrait { order: -1; }
/* Shant portrait pending approved asset: monogram panel, same B&W treatment */
.founder__portrait--pending {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius, 14px);
  border: 1px solid rgba(148, 197, 255, 0.14);
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(120, 130, 145, 0.28), transparent 70%),
    linear-gradient(160deg, #2a2f38 0%, #14171d 55%, #0c0e12 100%);
  filter: grayscale(1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}
.founder__portrait--pending span {
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #9aa4af;
}

@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; gap: 22px; padding: 30px 4px; }
  .founder--shant .founder__portrait { order: 0; }
}

@media (max-width: 1100px) {
  .wwd-card { min-height: 595px; }
}
@media (max-width: 700px) {
  .wwd-card { min-height: 565px; }
  /* NO 3D on phones: perspective + preserve-3d + backface-visibility misrender
     the artwork inside flip faces on real devices (image drifts right+down,
     worse per card down the page). Same tap interaction, cross-fade instead. */
  .wwd-card { perspective: none; }
  .wwd-card__inner { transform-style: flat; transition: opacity 0.4s ease; }
  .wwd-card.is-flipped .wwd-card__inner { transform: none; }
  .wwd-card__face--front { transition: opacity 0.4s ease, visibility 0.4s ease, border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
  .wwd-card__face--back {
    transform: none;
    backface-visibility: visible;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, border-color 200ms var(--ease), box-shadow 200ms var(--ease);
  }
  .wwd-card.is-flipped .wwd-card__face--back { opacity: 1; visibility: visible; }
  .wwd-card.is-flipped .wwd-card__face--front { opacity: 0; visibility: hidden; }
}
/* isolate each artwork into its own compositing layer so the card's
   perspective/preserve-3d snapping can't shift it */
.wwd-card__art img { transform: translateZ(0); }
/* ---------- Large-display scaling (2026-10-02): fluid container + type >=1600px ---------- */
@media (min-width: 999999px) {
  .wrap {
    max-width: min(calc(1180px + (100vw - 1600px) * 0.85), 1800px);
  }
  .hero h1 {
    font-size: min(calc(70px + (100vw - 1600px) * 0.03), 118px);
    max-width: none;
  }
  .hero__summary {
    font-size: min(calc(18px + (100vw - 1600px) * 0.0075), 24px);
    max-width: 76ch;
  }
  .btn {
    font-size: min(calc(16px + (100vw - 1600px) * 0.006), 21px);
  }
  .rbs h2 { font-size: min(calc(54px + (100vw - 1600px) * 0.022), 92px); }
  .wwd h2 { font-size: min(calc(48px + (100vw - 1600px) * 0.02), 82px); }
  .lab h2 { font-size: min(calc(54px + (100vw - 1600px) * 0.022), 92px); }
  .faq .faq-heading { font-size: min(calc(56px + (100vw - 1600px) * 0.022), 94px); }
  .final-cta h2 { font-size: min(calc(54px + (100vw - 1600px) * 0.022), 92px); }
  .lede { font-size: min(calc(18px + (100vw - 1600px) * 0.005), 21px); }
  .faq-card__q {
    max-width: 44ch;
    font-size: min(calc(17px + (100vw - 1600px) * 0.004), 20px);
  }
  .founders-h1 { font-size: min(calc(58px + (100vw - 1600px) * 0.022), 96px); }
  .page-head h1 { font-size: min(calc(58px + (100vw - 1600px) * 0.022), 96px); }
}
/* ---------- 2026-10-03: hero fills the viewport + taller flip cards at >=1600px ---------- */
@media (min-width: 999999px) {
  /* hero was content-height (920px) on tall screens, starfield stopped mid-screen;
     92vh restores the proportion the 200%-scaling layout had */
  .hero { min-height: 92vh; }
  /* wider cards grow the aspect-ratio art (409px wide -> 319px tall), overflowing
     the 525px card by ~64px; 640px fits art + text on every card */
  .wwd-card { min-height: 640px; }
}

/* Sticky-nav fix (2026-10-03): site.css body{overflow-x:hidden} + the html overflow-x:clip
   rule above stop body overflow from propagating to the viewport, which turns body into a
   scroll container and kills position:sticky for the shared header (it scrolled away).
   overflow-x:clip clips without creating a scroll container, so sticky works again. */
body { overflow-x: clip; }

/* ==================================================================
   Site-wide typography default (2026-10-04): the founders-page font
   styles become the site default. Geist replaces Inter (via --sans and
   body), and display headings take the founders light-weight treatment
   (300 + tight tracking). Explicit selectors only: the comic masthead
   (Oswald), booking (Poppins) and results (Source Serif 4) keep their
   own faces. Loaded by every frame page; the v18 copy wins where both
   load (identical rules).
   ================================================================== */
:root { --sans: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body { font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
#hero-h, .dest-h1, .legal h1, .founders-h1, .page-head h1 {
  font-weight: 300;
  letter-spacing: -0.03em;
}
.wwd h2, .rbs h2, .lab .lab__wrap h2, .brain h2, .final-cta h2 {
  font-weight: 300;
  letter-spacing: -0.025em;
}
.faq .faq-heading {
  font-weight: 300;
  letter-spacing: -0.025em;
}

/* Addendum (2026-10-04): lab.css scopes body.lab-body (0,1,1) which beats the
   plain body rule above regardless of load order, and the lab page's own hero
   heading needs the same founders treatment. */
body.lab-body { font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.lab-hero h1 { font-weight: 300; letter-spacing: -0.03em; }

/* Addendum 2 (2026-10-04): the brain page's h1 carries an inline font-size only,
   so give it the same founders light treatment as the other sub-page h1s. */
#brain-h { font-weight: 300; letter-spacing: -0.03em; }

/* Addendum 3 (2026-10-04): the founders heading COLOR treatment site-wide.
   .accent-teal is the site's highlight-span convention (hero, wwd, lab, final
   CTA, brain); it now renders the founders gradient (pale #CFE9F5 -> teal
   #3FDCC7) instead of solid teal. Headings on light surfaces keep plain ink. */
.accent-teal {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #CFE9F5 0%, #3FDCC7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  /* flat render: the hero's readability shadow paints through the transparent
     gradient glyphs and reads as embossed */
  text-shadow: none;
}

/* Hero readability (2026-10-04): the gradient line needs its drop shadow back,
   but text-shadow paints THROUGH background-clip:text transparency (the emboss
   artifact). filter:drop-shadow shadows the rendered pixels instead, so the
   shadow sits behind the gradient glyphs like a normal drop shadow. */
#hero-h .accent-teal { filter: drop-shadow(4px 6px 6px #000); }

/* Systems Lab poster panel (2026-10-04): the animated factory SVG is the section
   canvas at full content width — heading centered top-inside, CTA centered
   bottom-inside, whole panel one link to /systems-lab/. */
.lab-panel { display: block; position: relative; margin-top: 2px; text-decoration: none; color: inherit; border-radius: 20px; }
.lab-panel__title { position: absolute; top: 7%; left: 24px; right: 24px; margin: 0; text-align: center; pointer-events: none; z-index: 2; }
.lab-panel__cta { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); pointer-events: none; white-space: nowrap; z-index: 2; transition: box-shadow .3s ease; }
.lab-panel:hover .lab__centerpiece,
.lab-panel:focus-visible .lab__centerpiece {
  /* panel glow: a bit more than the heading's 18px title glow */
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(96, 165, 250, 0.28), 0 0 95px -8px rgba(63, 220, 199, 0.6);
}
.lab-panel:hover .lab-panel__cta,
.lab-panel:focus-visible .lab-panel__cta {
  box-shadow: 0 0 34px rgba(63, 220, 199, 0.65), 0 0 70px -6px rgba(63, 220, 199, 0.4);
}
.lab-panel .lab__centerpiece { transition: box-shadow .3s ease; }
@keyframes labTitleBounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
  55% { transform: translateY(0); }
  75% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
.lab-panel:hover .lab-panel__title,
.lab-panel:focus-visible .lab-panel__title {
  filter: drop-shadow(0 0 18px rgba(63, 220, 199, .5));
  animation: labTitleBounce .75s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .lab-panel:hover .lab-panel__title, .lab-panel:focus-visible .lab-panel__title { animation: none; }
}
.lab-panel:focus-visible { outline: 2px solid #2DD4BF; outline-offset: 4px; }

/* Mobile (2026-10-04): the poster-panel overlays are desktop-only — on phones the
   heading sits above the SVG and the CTA below it, in normal flow. */
@media (max-width: 760px) {
  .lab-panel { text-align: center; }
  .lab-panel__title { position: static; padding: 0 8px; margin-bottom: 22px; }
  .lab-panel__cta { position: static; transform: none; display: flex; align-items: center; justify-content: center; width: fit-content; margin: 18px auto 0; }
}

/* ================================================================
   Proportional viewport zoom (2026-10-04): new scale point at 1080px.
   At >=1080px the page lays out at its 1080 design width and zooms
   proportionally with the real viewport (2160 -> 2x, 3240 -> 3x).
   calc(100vw/1080px) divides a length by a length -> a plain number,
   which is what zoom requires. The superseded >=1600px fluid widen
   blocks are renamed to min-width: 999999px so they can never match
   (their (100vw - 1600px) terms would compute negative inside the
   zoomed context and their fixed px type would double-scale).
   ================================================================ */
@media (min-width: 1600px) {
  /* scale point 1600 (2026-10-04 revision): 1080 zoomed too aggressively and the
     over-zoom wedge broke the fit; below 1600 keeps the base layout, above it the
     page zooms proportionally (2496 -> 1.56x, 3440 -> 2.15x). overflow-x: clip
     absorbs the classic-scrollbar wedge (100vw includes the scrollbar, the layout
     width does not). */
  html { zoom: calc(100vw / 1600px); overflow-x: clip; }
}

/* ==================================================================
   CANONICAL BUTTON SYSTEM (2026-10-06) — user directive: buttons
   site-wide (including the global header) squared and matching the
   founders closing "Let's Build" button (.fv19-btn-outline: 4px
   corners, 1px teal border, transparent fill, uppercase, wide
   tracking, teal hover tint). Hue identities keep their accent.
   Advisor round applied: white focus ring, dark backing for hero
   buttons over the bright sun art.
   ================================================================== */
.btn,
.nav__cta {
  border-radius: 4px;
  background: transparent;
  border: 1px solid #3FDCC7;
  color: #F2F5F8;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  min-height: 54px;
  padding: 0 36px;
  box-shadow: none;
  gap: 14px;
}
.btn:hover,
.nav__cta:hover {
  background-color: rgba(63, 220, 199, 0.12);
  color: #FFFFFF;
  transform: none;
  box-shadow: none;
}
.btn--burgundy { border-color: #E5384F; }
.btn--burgundy:hover { background-color: rgba(229, 56, 79, 0.14); }
.btn--ghost,
.btn--light { border-color: #3FDCC7; }
.btn--tbd { border-style: dashed; }
.nav__cta { min-height: 42px; padding: 0 24px; font-size: 12px; letter-spacing: 0.22em; }
.btn:focus-visible,
.nav__cta:focus-visible { outline: 2px solid #F2F5F8; outline-offset: 2px; }
/* Homepage hero buttons sit over the bright sun art: translucent dark backing */
.hero__actions .btn { background-color: rgba(5, 11, 22, 0.4); }
.hero__actions .btn:hover { background-color: rgba(13, 34, 46, 0.62); }

/* 2026-10-06: primary buttons are SOLID teal again (user directive: the hero
   "Show Me What I'm Missing" keeps the site's original teal fill; the squared
   4px corners stay). Hero-specific rules beat the hero dark-backing rule. */
.btn--primary {
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-2) 100%);
  border-color: transparent;
  color: #032b28;
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--teal-2) 0%, var(--teal) 100%);
  color: #032b28;
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -14px rgba(94, 234, 212, 0.75);
}
.hero__actions .btn--primary { background: linear-gradient(180deg, var(--teal) 0%, var(--teal-2) 100%); }
.hero__actions .btn--primary:hover { background: linear-gradient(180deg, var(--teal-2) 0%, var(--teal) 100%); }

/* ==================================================================
   HEADER CONSISTENCY (2026-10-06, user directive): nav links match the
   Let's Build button's font treatment exactly; every header control
   outline squared to 4px (nav pills, Explore dropdown, mobile menu).
   ================================================================== */
.nav__link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 4px;
}
.dropdown__menu { border-radius: 4px; }
.dropdown__menu a { border-radius: 4px; }
.mobile-menu-toggle { border-radius: 4px; }
.mobile-menu { border-radius: 4px; }
.mobile-menu a { border-radius: 4px; }

.mobile-menu:not([hidden]) { border-radius: 4px; }

/* Advisor round: mobile menu panel fully opaque (0.98 let light page
   headlines bleed through behind the items). */
.mobile-menu:not([hidden]) { background: rgba(8, 20, 26, 1); }

/* ==================================================================
   MOBILE FOOTER (2026-10-06, user directive: more appealing on mobile):
   centered column layout, comfortable tap targets, separators hidden,
   the copyright on its own quiet line. Specificity-boosted selectors
   (.footer .footer__row) so no page-local sheet can override.
   ================================================================== */
@media (max-width: 700px) {
  .footer { padding-block: 46px 42px; }
  .footer .footer__row {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .footer .footer__links {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .footer .footer__links .sep { display: none; }
  .footer .footer__links a {
    padding: 11px 18px;
    font-size: 13px;
    letter-spacing: 0.22em;
    color: var(--ink-2);
  }
  .footer .footer__links a:hover { color: var(--ink); }
  .footer .footer__links span:not(.sep) {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-3);
  }
}


/* ---------- 2026-10-06: global scale-down ~18% on non-mobile displays (user directive) ---------- */
@media (min-width: 701px) {
  body { zoom: 0.82; }
  /* viewport-unit sections must still fill the real viewport: vh does not compensate for zoom */
  .hero { min-height: calc(min(92vh, 860px) / 0.82); }
}