/* ============================================================
   N2n Integrity: AI-First Folio
   Voice: precision with warmth. Authority without performance.
   Type: Cormorant Garamond (display) · Montserrat (body/labels)
   Palette: noir · deep navy · navy · gold (accent only) · cream · ivory
   Gold is scarce: one deliberate gold moment per section.
   ============================================================ */

:root {
  /* palette */
  --noir: #0b0c0f;
  --deep-navy: #0c1626;
  --navy: #16283e;
  --navy-2: #1d3350;
  --cream: #f2ede2;
  --ivory: #fbf9f3;

  --gold: #c2a25a;
  --gold-soft: #d9c188;
  --gold-deep: #9a7c3e;

  /* text */
  --ink: #14171d;               /* text on light */
  --ink-soft: #4c515b;          /* muted on light */
  --paper-muted: rgba(11, 12, 15, 0.58);
  --on-dark: #eef1f5;           /* text on dark */
  --on-dark-soft: rgba(238, 241, 245, 0.64);

  /* lines */
  --line-light: rgba(11, 12, 15, 0.12);
  --line-dark: rgba(238, 241, 245, 0.14);
  --line-gold: rgba(194, 162, 90, 0.55);

  /* surfaces on dark */
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);

  --radius: 6px;
  --radius-lg: 12px;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --measure: 60ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* contain the full-bleed marketing marquee */
}

img, svg, iframe { max-width: 100%; display: block; }

::selection { background: var(--gold); color: var(--noir); }

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

section { padding: clamp(84px, 12vw, 156px) 0; position: relative; }
section[id] { scroll-margin-top: 84px; } /* clears the sticky nav on anchor jumps */

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

h1 { font-size: clamp(2.9rem, 7.2vw, 6rem); line-height: 1.02; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.15; }

p { max-width: var(--measure); }

.gold-word { color: var(--gold); font-style: italic; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
}
.on-dark .eyebrow, .dark .eyebrow { color: var(--on-dark-soft); }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 34em;
  font-weight: 400;
}
.dark .lede { color: var(--on-dark-soft); }

.legend-intro {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 22px;
  margin-bottom: 4px;
}
.dark .legend-intro { color: var(--on-dark-soft); }

.section-head { max-width: 780px; margin-bottom: clamp(48px, 6vw, 84px); }
.section-head .eyebrow { margin-bottom: 26px; }
.section-head h2 { margin-bottom: 22px; }

/* dark section base */
.dark { background: var(--deep-navy); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3 { color: var(--ivory); }
.noir { background: var(--noir); color: var(--on-dark); }
.noir h1, .noir h2, .noir h3 { color: var(--ivory); }

/* ======================================================
   NAV
   ====================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 12, 15, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ivory);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.wordmark .n { color: var(--ivory); }
.wordmark .to { color: var(--gold); font-style: italic; padding: 0 1px; }
.nav-links {
  display: flex;
  gap: 34px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav-links a { color: var(--on-dark-soft); transition: color 0.25s ease; }
.nav-links a:hover { color: var(--ivory); }
.nav-home {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.25s ease;
}
.nav-home:hover { color: var(--gold); }
.nav-home .arrow { font-style: normal; }

/* ======================================================
   HERO
   ====================================================== */

.hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 0;
}
.hero::before {
  /* subtle architectural light: deliberate shadow, natural light */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(194, 162, 90, 0.10), transparent 55%),
    radial-gradient(80% 70% at 12% 100%, rgba(29, 51, 80, 0.55), transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero .eyebrow { margin-bottom: 40px; }
.hero h1 {
  max-width: 17ch;
  margin-bottom: 0;
}
.hero h1 .line { display: block; }
.hero-support {
  margin-top: 40px;
  max-width: 42ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: var(--on-dark-soft);
}

/* ======================================================
   SYSTEMS ARCHITECTURE (primary)
   ====================================================== */

.systems { background: var(--noir); color: var(--on-dark); }
.systems h2, .systems h3 { color: var(--ivory); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--on-dark-soft);
}
.legend span { display: inline-flex; align-items: center; gap: 9px; }
.legend .glyph {
  font-family: var(--font-body);
  color: var(--gold);
  font-weight: 600;
  width: 18px; text-align: center;
}

.band-label {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin: clamp(44px, 6vw, 72px) 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-dark);
}
.band-label:first-of-type { margin-top: 0; }

.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
/* systems: 1 -> 2 -> 3 columns, feature tiles span 2 only once 3 cols exist.
   align-items: start keeps an expanding card from stretching its row-mates,
   so opening one tile moves only that tile. */
.systems-grid { align-items: start; }
@media (min-width: 640px) {
  .systems-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .systems-grid { grid-template-columns: repeat(3, 1fr); }
}
/* live builds: flexible track that flows 1 -> 2 -> 4 without lone cells */
.web-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---- shared tile shell ---- */
.tile {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.tile:hover { border-color: var(--line-gold); background: var(--surface-2); }

/* ---- website tile (opens live site) ---- */
.web-tile { display: flex; flex-direction: column; }
.browser {
  background: #0f1420;
  border-bottom: 1px solid var(--line-dark);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
}
.browser-bar .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.browser-url {
  margin-left: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--on-dark-soft);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  padding: 4px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shot {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  object-position: top center;
  background:
    linear-gradient(140deg, #12203a, #0c1626 60%);
}
/* CSS fallback when no screenshot */
.shot-fallback {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark-soft);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  letter-spacing: 0.02em;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(194,162,90,.10), transparent 60%),
    linear-gradient(140deg, #12203a, #0a1220 70%);
}
.web-foot {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.web-foot .marker {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.web-foot h3 { color: var(--ivory); }
.web-foot p { font-size: 0.92rem; color: var(--on-dark-soft); margin-top: 2px; }
.web-foot .visit {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.web-tile:hover .visit { color: var(--gold-soft); }
.badge-progress {
  align-self: flex-start;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  border: 1px solid var(--line-dark);
  border-radius: 99px;
  padding: 3px 10px;
}

/* ---- system tile (click to expand) ---- */
.sys-tile { grid-column: span 1; }
.sys-head {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sys-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.sys-marker {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.sys-tile.in-dev .sys-marker { color: var(--on-dark-soft); }
.dev-badge {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  border: 1px solid var(--line-gold);
  border-radius: 99px;
  padding: 3px 9px;
  white-space: nowrap;
}
.sys-head h3 { color: var(--ivory); }
.sys-oneline {
  font-size: 0.92rem;
  color: var(--on-dark-soft);
  max-width: 40ch;
}
.expand-ind {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.expand-ind .pm {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.3s ease;
}
.sys-tile.open .expand-ind .pm { transform: rotate(45deg); }
.sys-tile.open { border-color: var(--line-gold); background: var(--surface-2); }

/* An open card claims the full row width (grid-column: 1 / -1), so it never
   shares a row with another card: nothing is forced to stretch to match it,
   and its panel can never overlap a card below, since nothing shares its row
   while it's open.

   The panel itself does not animate its own height at all -- it snaps to its
   real, final size in the single layout pass the class toggle causes, which
   is the point: animating height (or grid-template-rows, or max-height) is a
   layout property, so the browser must recompute the position of every
   element after it on EVERY frame of that animation, which is what actually
   caused the choppiness -- a full-page reflow running for half a second, not
   just a wrong final position. Doing the layout change once instead of once
   per frame removes that cost entirely.

   What still needs to look smooth is handled in JS with the FLIP technique:
   the elements the layout jump displaces (later cards, everything after the
   Systems section) are caught in their old position with an inverse
   transform the instant the jump happens, then eased to zero. transform and
   the opacity fade below are compositor-only, so nothing here forces layout
   after the initial toggle. */
.sys-tile.open { grid-column: 1 / -1; }
.sys-detail { height: 0; overflow: hidden; }
.sys-tile.open .sys-detail { height: auto; }
.sys-detail-inner {
  min-height: 0;
  padding: 4px 24px 28px;
  border-top: 1px solid var(--line-dark);
  margin-top: 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sys-tile.open .sys-detail-inner { opacity: 1; transition-delay: 0.08s; }
.sys-detail-inner .row { padding-top: 18px; }
.sys-detail-inner .k {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.sys-detail-inner .v { font-size: 0.95rem; color: var(--on-dark-soft); max-width: 52ch; }
.fn-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 2px 0 0;
}
.fn-chips li {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  border: 1px solid var(--line-dark);
  border-radius: 99px;
  padding: 5px 13px;
}

/* embedded live template inside a system detail */
.embed-frame {
  margin-top: 22px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0f1420;
}
.embed-frame .browser-bar { border-bottom: 1px solid var(--line-dark); }
.embed-frame iframe {
  width: 100%;
  height: 440px;
  border: 0;
  background: #fff;
}
.embed-open {
  padding: 14px 18px;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  gap: 8px;
  border-top: 1px solid var(--line-dark);
}

/* feature system tiles span two columns once the 3-col grid is active */
@media (min-width: 1000px) {
  .sys-tile.feature { grid-column: span 2; }
}

/* ======================================================
   LIVE BUILDS: TABS + MARKETING MOTION GALLERY
   ====================================================== */

.lb-tabs { display: flex; gap: 8px; margin-bottom: 28px; }
.lb-tab {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: 99px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.lb-tab:hover { color: var(--ivory); border-color: var(--line-gold); }
.lb-tab.is-active { color: var(--noir); background: var(--gold); border-color: var(--gold); }
.lb-tab:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.lb-panel[hidden] { display: none; }

.mkt-intro {
  color: var(--on-dark-soft);
  max-width: 62ch;
  margin-bottom: 30px;
  font-size: 1rem;
}
.mkt-hint { color: var(--gold-soft); white-space: nowrap; }

/* full-bleed marquee so rows drift to the page edges */
.mkt-gallery {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50vw);
  padding: 4px 0;
}
.mkt-row { overflow: hidden; position: relative; }
.mkt-row::before, .mkt-row::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.mkt-row::before { left: 0; background: linear-gradient(90deg, var(--noir), transparent); }
.mkt-row::after { right: 0; background: linear-gradient(270deg, var(--noir), transparent); }

.mkt-track { display: flex; gap: 18px; width: max-content; will-change: transform; padding: 0 9px; }

.mkt-tile {
  position: relative;
  height: 210px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: var(--surface);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
.mkt-tile.r-port { width: 156px; }
.mkt-tile.r-sq   { width: 214px; }
.mkt-tile.r-land { width: 330px; }
.mkt-tile:hover { transform: scale(1.055); border-color: var(--line-gold); z-index: 3; }

.mkt-media { position: absolute; inset: 0; }
.mkt-media img,
.mkt-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* video tiles: a small marker so a clip reads as a clip before you hover */
.vid-flag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(11, 12, 15, 0.62);
  border: 1px solid var(--line-gold);
  border-radius: 99px;
  padding: 3px 9px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.3s ease;
}
.mkt-tile.is-video:hover .vid-flag { opacity: 0; }
/* placeholder look until a real image is added */
.mkt-tile:not(.has-img) .mkt-media {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(194, 162, 90, 0.12), transparent 55%),
    linear-gradient(150deg, var(--navy-2), var(--noir) 78%);
}
.mkt-tile:not(.has-img) .mkt-media::after {
  content: attr(data-word);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: rgba(238, 241, 245, 0.34);
}
.mkt-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  margin: 0;
  padding: 14px 13px 11px;
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(0deg, rgba(11, 12, 15, 0.9), transparent);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mkt-tile:hover .mkt-cap { opacity: 1; transform: none; }
.mkt-cap .cat { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); }
.mkt-cap .ttl { font-size: 0.8rem; color: var(--ivory); }

.mkt-note { margin-top: 24px; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--on-dark-soft); }

@media (max-width: 560px) {
  .mkt-tile { height: 150px; }
  .mkt-tile.r-port { width: 112px; }
  .mkt-tile.r-sq   { width: 158px; }
  .mkt-tile.r-land { width: 240px; }
}

/* reduced motion: no drift, static wrapped rows, no edge fades */
@media (prefers-reduced-motion: reduce) {
  .mkt-gallery { width: auto; left: auto; transform: none; }
  .mkt-track { transform: none !important; flex-wrap: wrap; width: auto; padding: 0; }
  .mkt-row { overflow: visible; }
  .mkt-row::before, .mkt-row::after { display: none; }
}

/* ======================================================
   THE ALIGNMENT METHOD (light editorial)
   ====================================================== */

.method { background: var(--cream); }
.method-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.method-intro h2 { margin-bottom: 24px; }
.method-intro .pull {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
  margin: 34px 0 0;
  padding-left: 22px;
  border-left: 2px solid var(--gold);
  max-width: 24ch;
}
.principles { display: flex; flex-direction: column; }
.principle {
  padding: 28px 0;
  border-top: 1px solid var(--line-light);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
}
.principle:last-child { border-bottom: 1px solid var(--line-light); }
.principle .idx {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--gold-deep);
  line-height: 1;
  padding-top: 4px;
}
.principle h3 { margin-bottom: 8px; }
.principle p { font-size: 0.98rem; color: var(--ink-soft); }

/* ======================================================
   ABOUT
   ====================================================== */

.about { background: var(--deep-navy); color: var(--on-dark); }
.about h2, .about h3 { color: var(--ivory); }
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.about-aside .eyebrow { margin-bottom: 26px; }
.about-aside h2 { margin-bottom: 0; }
.about-aside .kicker {
  margin-top: 30px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gold-soft);
  max-width: 18ch;
  line-height: 1.35;
}
.about-aside .portrait {
  margin: 40px 0 0;
  max-width: 380px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.6);
}
.about-aside .portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 54% 18%;
  filter: saturate(0.94) contrast(1.03);
}
.about-body p { color: var(--on-dark-soft); margin-bottom: 22px; font-size: 1.02rem; }
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { color: var(--ivory); font-weight: 500; }
.about-body .lead {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-style: normal;
  line-height: 1.32;
  color: var(--ivory);
  max-width: 24ch;
  margin-bottom: 30px;
}

/* ======================================================
   CLOSING CTA
   ====================================================== */

.closing { background: var(--noir); color: var(--on-dark); text-align: center; }
.closing h2 { color: var(--ivory); margin: 0 auto 30px; max-width: 30ch; }
.closing .eyebrow { justify-content: center; }
.closing .eyebrow { margin-bottom: 30px; }
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--noir);
  background: var(--gold);
  padding: 18px 34px;
  border-radius: 99px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.cta-link:hover { background: var(--gold-soft); transform: translateY(-1px); }
.closing .sub {
  margin: 26px auto 0;
  color: var(--on-dark-soft);
  font-size: 0.94rem;
}

/* ======================================================
   FOOTER
   ====================================================== */

.footer { background: var(--noir); color: var(--on-dark-soft); padding: 40px 0 56px; border-top: 1px solid var(--line-dark); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.footer .wordmark { font-size: 1.15rem; }
.footer-links { display: flex; gap: 26px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-links a { color: var(--on-dark-soft); transition: color 0.25s ease; }
.footer-links a:hover { color: var(--gold); }
.footer .fine { width: 100%; margin-top: 8px; font-size: 0.74rem; color: rgba(238,241,245,0.4); }

/* ======================================================
   REVEAL
   ====================================================== */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .method-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .method-intro .pull { margin-top: 30px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .hero { min-height: 84vh; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ======================================================
   MOTION SAFETY
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* delays are zeroed too: a stripped duration with a delay left in place would
     still hold content invisible before it appears */
  * {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* system detail toggled via [hidden] fallback still works */
}