/* ============================================================
   Genesis Core Systems — Stylesheet
   Restrained enterprise fintech aesthetic
   Brand: navy + orange (sampled from logo)
   ============================================================ */

:root {
  /* Color scheme v2 — cooler, more "tech-forward fintech." Brand navy + orange
     (sampled from the logo) untouched. Backgrounds, text-mutes, and borders
     shifted from warm cream/brown toward cool off-white/blue-gray for a
     Stripe/Linear-style read. Easy to revert: swap to the values in the
     `/* warm original */` comments below. */
  --bg: #fafbfd;              /* cool off-white (warm original: #fbfaf7) */
  --bg-elev: #ffffff;
  --bg-soft: #eff2f7;          /* cool tinted (warm original: #f4f1ea) */
  --bg-dark: #080d22;          /* deeper, blacker navy (warm original: #0d1330) */

  --fg: #0f1530;               /* near-black with navy hint (warm original: #0d1330) */
  --fg-muted: #4a5366;          /* slightly cooler (warm original: #4a5266) */
  --fg-faint: #8c93a3;          /* cool-toned faint (warm original: #8a8f9f) */

  --brand: #131A40;            /* deeper navy (logo original: #1B265F) */
  --brand-2: #2F4DAB;          /* royal blue from logo — unchanged */
  --orange: #F47A1F;           /* primary accent — orange from logo — unchanged */
  --orange-deep: #E63E2C;      /* deep red-orange — unchanged */
  --orange-light: #FDEFDB;     /* soft orange tint (warm original: #FDEBD8) */

  --border: #E1E5EE;           /* cool light gray (warm original: #e8e3d8) */
  --border-strong: #C8CFDB;    /* cool gray (warm original: #d4cdbe) */

  --maxw: 1180px;
  --radius: 6px;
  --radius-lg: 12px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Manrope", var(--font);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Hide the native scrollbar — we render our own rail on the right edge. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* Suppress native scrollbar on WebKit so the custom rail is the only one shown. */
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ------------------------------------------------------------
   Custom scroll rail. A fixed vertical track on the right edge
   with a thumb sized to the viewport-to-document ratio and
   positioned in proportion to scrollY. Driven by --scroll-pos
   and --scroll-thumb-h from script.js.
   ------------------------------------------------------------ */
.scroll-rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 22px;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.scroll-rail.ready { opacity: 1; }
.scroll-rail .scroll-rail-track {
  position: absolute;
  top: 14px;
  bottom: 14px;
  right: 0;
  width: 22px;
  border-radius: 2px;
  pointer-events: auto;
  cursor: pointer;
}
.scroll-rail .scroll-rail-track::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: 9px;
  width: 4px;
  background: rgba(27, 38, 95, 0.12);
  border-radius: 2px;
  transition: background .2s var(--ease);
}
.scroll-rail:hover .scroll-rail-track::before { background: rgba(27, 38, 95, 0.20); }
.scroll-rail .scroll-rail-thumb {
  position: absolute;
  right: 5px;
  width: 12px;
  height: var(--scroll-thumb-h, 80px);
  top: var(--scroll-pos, 0px);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 60%, var(--orange) 100%);
  border-radius: 999px;
  box-shadow: 0 2px 14px rgba(27, 38, 95, 0.25);
  pointer-events: auto;
  cursor: grab;
  transition: width .15s var(--ease), right .15s var(--ease), box-shadow .15s var(--ease);
  /* No transitions on top/height — drag must feel instant. */
}
.scroll-rail:hover .scroll-rail-thumb,
.scroll-rail.dragging .scroll-rail-thumb {
  width: 14px;
  right: 4px;
  box-shadow: 0 3px 18px rgba(27, 38, 95, 0.35);
}
.scroll-rail .scroll-rail-thumb,
.scroll-rail .scroll-rail-track {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.scroll-rail.dragging .scroll-rail-thumb { cursor: grabbing; transition: none; }
/* While dragging, kill the document smooth-scroll behavior so the thumb tracks
   the cursor instantly. We toggle this with .is-rail-dragging on <html>. */
html.is-rail-dragging { scroll-behavior: auto; }
html.is-rail-dragging body { -webkit-user-select: none; user-select: none; }

/* Over the cinema hero, brighten the rail so it reads on dark video. */
body.page-home:not(.is-scrolled) .scroll-rail .scroll-rail-track::before {
  background: rgba(255, 255, 255, 0.22);
}
body.page-home:not(.is-scrolled) .scroll-rail .scroll-rail-thumb {
  background: linear-gradient(180deg, #ffffff 0%, var(--orange) 100%);
  box-shadow: 0 2px 18px rgba(244, 122, 31, 0.45);
}

@media (max-width: 680px) {
  /* On touch devices, hide the custom rail — native gesture scroll is the right UX. */
  .scroll-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-rail { transition: none; }
  .scroll-rail .scroll-rail-thumb { transition: none; }
}

img, svg { max-width: 100%; display: block; }
a {
  color: var(--orange);
  text-decoration: none;
  transition: color .15s var(--ease);
}
a:hover { color: var(--orange-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 0 0 0.5em;
  color: var(--brand);
}

h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
}
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 1em; color: var(--fg-muted); }
.lead {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 60ch;
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

section { padding: clamp(4rem, 8vw, 7rem) 0; }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 247, 0.85);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}

/* Transparent header over the cinema hero on the homepage (top of page only). */
body.page-home:not(.is-scrolled) .site-header {
  background: linear-gradient(180deg, rgba(7,9,28,0.55) 0%, rgba(7,9,28,0) 100%);
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-home:not(.is-scrolled) .site-header .brand {
  color: white;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
body.page-home:not(.is-scrolled) .site-header .brand-mark {
  width: 46px;
  height: 46px;
}
body.page-home:not(.is-scrolled) .nav { height: 86px; }
.site-header .brand,
.site-header .brand-mark,
.site-header.nav { transition: font-size .25s var(--ease), width .25s var(--ease), height .25s var(--ease); }
body.page-home:not(.is-scrolled) .site-header .nav-links a { color: rgba(255,255,255,0.85); }
body.page-home:not(.is-scrolled) .site-header .nav-links a:hover,
body.page-home:not(.is-scrolled) .site-header .nav-links a.active { color: white; }
body.page-home:not(.is-scrolled) .site-header .nav-cta .btn-primary { background: var(--orange); color: white; }
body.page-home:not(.is-scrolled) .site-header .nav-toggle { color: white; border-color: rgba(255,255,255,0.3); }

/* When the mobile menu is open over the cinema hero, swap the transparent
   header for a solid one and force the links/brand back to dark ink. Without
   this, opening the menu at the very top of the homepage rendered the dropdown
   as white links on a white panel — i.e. a "blank, empty" menu — until the
   user scrolled a little and the .is-scrolled state kicked in. Placed after the
   :not(.is-scrolled) rules above so it wins on equal specificity. */
body.nav-open .site-header {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--border);
}
body.page-home.nav-open .site-header .brand { color: var(--brand); }
body.page-home.nav-open .site-header .nav-links a { color: var(--fg-muted); }
body.page-home.nav-open .site-header .nav-links a:hover,
body.page-home.nav-open .site-header .nav-links a.active { color: var(--brand); }
body.page-home.nav-open .site-header .nav-toggle { color: var(--brand); border-color: var(--border); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--brand);
  letter-spacing: -0.015em;
  text-decoration: none;
}
.brand:hover { color: var(--brand); }
.brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  position: relative;
  display: inline-block;
}
.brand-mark svg { width: 100%; height: 100%; }
.brand-mark-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius);
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 0.94rem;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav-links a:hover { color: var(--brand); background: transparent; }
.nav-links a.active { color: var(--brand); }
.nav-cta { margin-left: 0.5rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  cursor: pointer;
  color: var(--brand);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.82rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.97rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s var(--ease);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn-primary {
  background: var(--orange);
  color: white;
}
.btn-primary:hover {
  background: var(--orange-deep);
  color: white;
}
.btn-ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: var(--bg-soft);
  border-color: var(--brand);
}
.btn-text {
  color: var(--orange);
  background: transparent;
  padding: 0.4rem 0;
}
.btn-text:hover {
  color: var(--orange-deep);
  background: transparent;
}
.btn-lg { padding: 0.95rem 1.6rem; font-size: 1.02rem; }

/* Arrow that nudges on hover */
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem);
}
.hero-art {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 680px;
  height: 680px;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4rem;
  align-items: center;
}
.eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.4rem;
}
.hero h1 {
  margin-bottom: 1.4rem;
}
.hero .lead {
  font-size: 1.22rem;
  color: var(--fg-muted);
  margin-bottom: 2.2rem;
  max-width: 50ch;
}
.hero-actions {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Decorative logo art for hero */
.hero-logo-art {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   Sections
   ============================================================ */
.section-head {
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.center .lead { margin-inline: auto; }

/* Two-column split (collapses on mobile) */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.split-row.center { align-items: center; }
.split-row.tight { gap: 3rem; }
.split-row.wide-left { grid-template-columns: 1.1fr 0.9fr; }
.split-row.wide-right { grid-template-columns: 0.9fr 1.1fr; }

/* Stacked list card */
.stack-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.stack-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  align-items: start;
}
.stack-card .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--orange);
  letter-spacing: 0.05em;
}
.stack-card h4 {
  font-size: 1.05rem;
  color: var(--brand);
  margin-bottom: 0.4rem;
}
.stack-card p { margin: 0; font-size: 0.95rem; }

/* Inline contact card list (used in dark CTA band) */
.contact-card-list {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.7;
}
.contact-card-list > div {
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.contact-card-list > div:last-child { border-bottom: none; }
.contact-card-list dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.3rem;
  font-weight: 600;
}
.contact-card-list dd { margin: 0; }
.contact-card-list a, .contact-card-list span.val { color: white; font-weight: 700; }

/* ============================================================
   Three-column features (no icons, just type)
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 2.5rem 3rem;
}
.feature-item h3 {
  font-size: 1.15rem;
  color: var(--brand);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.feature-item h3::before {
  content: "";
  display: inline-block;
  width: 24px; height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}
.feature-item p {
  font-size: 0.98rem;
  margin: 0;
}

/* ============================================================
   Numbered list (used in solutions/services)
   ============================================================ */
.numbered {
  display: grid;
  gap: 0;
}
.numbered-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 2.5rem;
  padding: 2.8rem 0;
  border-top: 1px solid var(--border);
  align-items: start;
}
.numbered-item:last-child { border-bottom: 1px solid var(--border); }
.numbered-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--orange);
  letter-spacing: 0.05em;
  padding-top: 0.4rem;
}
.numbered-body h3 {
  font-size: 1.6rem;
  margin-bottom: 0.85rem;
  font-weight: 700;
}
.numbered-body p {
  font-size: 1.02rem;
  max-width: 60ch;
}
.numbered-body ul {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 2rem;
}
.numbered-body ul li {
  padding-left: 1.3rem;
  position: relative;
  color: var(--fg-muted);
  font-size: 0.95rem;
}
.numbered-body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 2px;
  background: var(--orange);
}

/* ============================================================
   Big quote / pull statement
   ============================================================ */
.pullquote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.35;
  color: var(--brand);
  letter-spacing: -0.018em;
  max-width: 28ch;
}
.pullquote .accent { color: var(--orange); }

/* ============================================================
   Dark CTA section
   ============================================================ */
.cta-band {
  background: var(--bg-dark);
  color: white;
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.cta-band h2 { color: white; }
.cta-band p { color: rgba(255,255,255,0.78); max-width: 56ch; margin-bottom: 2.2rem; }
.cta-band .btn-ghost {
  color: white;
  border-color: rgba(255,255,255,0.25);
}
.cta-band .btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
}

/* ============================================================
   Backed-by band
   Thin trust band, sits below the hero. Centered on desktop, stacks
   on mobile. Brand-colored wordmark on a neutral background — reads
   as an actual disclosure, not a "logo soup."
   ============================================================ */
.backers {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(1.3rem, 2.4vw, 1.8rem) 0;
}
.backers .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
}
.backers-label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 600;
}
.backers-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  filter: grayscale(0%);
  opacity: 0.85;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.backers-logo:hover { opacity: 1; transform: translateY(-1px); }
.backers-logo img { display: block; max-height: clamp(28px, 3.5vw, 38px); width: auto; }
.backers-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  color: #007CC3;
  letter-spacing: -0.03em;
  line-height: 1;
}
.backers-wordmark sup {
  font-size: 0.45em;
  vertical-align: super;
  margin-left: 0.1em;
  color: var(--fg-faint);
  font-weight: 600;
}
@media (max-width: 540px) {
  .backers .container { flex-direction: column; gap: 0.65rem; }
}

/* ============================================================
   Page header (interior pages)
   ============================================================ */
.page-head {
  padding: clamp(4rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4rem);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.page-head h1 { margin-bottom: 1.2rem; max-width: 18ch; }
.page-head .lead { max-width: 56ch; }

/* About — asymmetric grid with a thin orange accent rule on the left edge.
   Heading lives in a tall left column; the lead drops into a narrower right
   column separated by a hairline rule. Reads as a manifesto opener instead
   of a brochure cover. */
.page-head-about {
  padding-top: clamp(5rem, 9vw, 7rem);
  padding-bottom: clamp(3.5rem, 6vw, 5rem);
}
.page-head-about .page-head-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
  position: relative;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
.page-head-about .page-head-about-grid::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange) 60%, transparent 100%);
  border-radius: 1px;
}
.page-head-about h1 {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  max-width: 20ch;
  margin-bottom: 0;
  line-height: 1.08;
}
.page-head-about .lead {
  font-size: 1.05rem;
  align-self: end;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--border);
  margin-bottom: 0.2rem;
}
@media (max-width: 800px) {
  .page-head-about .page-head-about-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-left: 1rem;
  }
  .page-head-about .lead { border-left: none; padding-left: 0; }
}

/* Articles — editorial masthead. A two-up meta row at the top with the
   section label on the left and an orange "Issue No." marker on the right,
   under a hairline divider. Visually reads like a journal cover. */
.page-head-editorial { padding-bottom: clamp(3rem, 5vw, 4rem); }
.page-head-editorial .editorial-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.1rem;
  margin-bottom: clamp(2rem, 3.5vw, 2.8rem);
  border-bottom: 1px solid var(--border);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 600;
}
.page-head-editorial .editorial-meta-accent { color: var(--orange); }
.page-head-editorial h1 {
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  max-width: 22ch;
  margin-bottom: 1.4rem;
  line-height: 1.06;
}
.page-head-editorial .lead {
  max-width: 60ch;
  font-size: 1.12rem;
}


/* FAQ page header — split layout. Heading on the left, a row of jump
   chips on the right that anchor down to specific FAQ items. Distinct
   from every other page-head and functional: visitors can skip straight
   to the topic they're actually here for. */
.page-head-faq .page-head-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}
.page-head-faq .page-head-faq-intro h1 { max-width: 16ch; }
.page-head-faq .page-head-faq-intro .lead { max-width: 48ch; }
.page-head-faq .faq-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: end;
  justify-content: flex-start;
}
.page-head-faq .faq-jumps-label {
  display: block;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.5rem;
}
.page-head-faq .faq-jumps a {
  display: inline-block;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg);
  background: var(--bg-elev);
  text-decoration: none;
  transition: border-color .15s var(--ease), color .15s var(--ease),
              background .15s var(--ease), transform .15s var(--ease);
}
.page-head-faq .faq-jumps a:hover {
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-1px);
}

/* When a FAQ item is the jump target, pulse-highlight it so the visitor
   can see where they landed, then fade back to neutral. A short-lived
   tint + left edge indicator + summary tint that all decay over ~2.4s. */
@keyframes faq-target-pulse {
  0% {
    background-color: rgba(244, 122, 31, 0.16);
    box-shadow: inset 3px 0 0 var(--orange);
  }
  20% {
    background-color: rgba(244, 122, 31, 0.18);
    box-shadow: inset 3px 0 0 var(--orange);
  }
  100% {
    background-color: transparent;
    box-shadow: inset 0 0 0 transparent;
  }
}
.faq-item.is-jump-target,
.faq-item:target {
  animation: faq-target-pulse 2.4s var(--ease) 0.15s 1 both;
  border-top-color: var(--orange);
  scroll-margin-top: 100px; /* keeps native :target scroll clear of sticky header */
}
.faq-item.is-jump-target summary,
.faq-item:target summary {
  color: var(--orange-deep);
  transition: color .3s var(--ease);
}

@media (max-width: 800px) {
  .page-head-faq .page-head-faq-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  /* Bigger tap targets on touch — chips need ~44px to feel right with a finger. */
  .page-head-faq .faq-jumps a {
    padding: 0.75rem 1.15rem;
    font-size: 0.95rem;
  }
}

/* ============================================================
   Article cards (used on articles page)
   ============================================================ */
.articles-grid {
  display: grid;
  /* min(320px, 100%): a fixed 320px minimum track overflows the container on
     narrow phones (e.g. 360px screen − 48px padding = 312px available) and
     causes sideways page scroll. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 2rem;
}
.article-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.article-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
}
.article-thumb {
  aspect-ratio: 16 / 10;
  background: var(--brand);
  position: relative;
  overflow: hidden;
}
.article-thumb svg { width: 70%; height: 70%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.9; }
.article-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-body { padding: 1.5rem 1.7rem 1.8rem; }
.article-meta {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.article-body h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}
.article-body p {
  font-size: 0.94rem;
  margin-bottom: 1rem;
}
.article-card a.read-more {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--orange);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  border-top: 1px solid var(--border);
  padding: 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer;
  padding: 1.5rem 0;
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--brand);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--orange);
  font-weight: 400;
  line-height: 1;
  transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body {
  padding: 0 0 1.5rem;
  color: var(--fg-muted);
  max-width: 65ch;
}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
}
.contact-info h2 { font-size: 2rem; margin-bottom: 1rem; }
.contact-info > p { margin-bottom: 2rem; }
.contact-info dl {
  margin: 0;
  display: grid;
  gap: 1.5rem;
}
.contact-info dl > div {
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}
.contact-info dl > div:last-child { border-bottom: 1px solid var(--border); }
.contact-info dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--fg-faint);
  margin-bottom: 0.35rem;
}
.contact-info dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--brand);
}
.contact-info dd a { color: var(--brand); }
.contact-info dd a:hover { color: var(--orange); }

.contact-form {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
}
.field { margin-bottom: 1.2rem; }
.field label {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--brand);
  letter-spacing: 0.01em;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: white;
  color: var(--fg);
  font: inherit;
  font-size: 0.97rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(244, 122, 31, 0.18);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note {
  font-size: 0.82rem;
  color: var(--fg-faint);
  margin-top: 1rem;
}
.success-msg,
.error-msg {
  display: none;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.success-msg {
  background: var(--orange-light);
  color: var(--orange-deep);
}
.error-msg {
  background: #fdecec;
  color: #9a1b1b;
}
.error-msg a { color: inherit; text-decoration: underline; }
.success-msg.show,
.error-msg.show { display: block; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--bg-dark);
  color: rgba(255,255,255,0.7);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-grid .brand {
  color: white;
  margin-bottom: 1.2rem;
}
.footer-grid .brand:hover { color: white; }
.footer-blurb {
  color: rgba(255,255,255,0.65);
  font-size: 0.95rem;
  max-width: 32ch;
  margin-bottom: 1.5rem;
}
.footer-grid h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1.1rem;
  font-weight: 600;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.6rem; }
.footer-grid a {
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
}
.footer-grid a:hover { color: var(--orange); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}
.socials { display: flex; gap: 0.5rem; }
.socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  transition: all .15s var(--ease);
}
.socials a:hover {
  color: white;
  border-color: var(--orange);
  background: var(--orange);
}

/* ============================================================
   Reveal animation. Default: gentle rise. Numbered items: alternating swipe.
   ============================================================ */
/* .reveal default state is VISIBLE — so content above the fold paints in its
   final position on first frame, with no fade-in delay. JS adds .reveal-pending
   to elements that are below the fold on load (which the user can't see yet);
   the IntersectionObserver removes that class as they scroll into view, and
   the transition then runs as you'd expect. This is the fix for the "blank
   bottom on page open" issue — the pullquote section is just below the hero,
   so most viewports show its top edge on load; it used to sit at opacity 0
   for ~1s before fading in. Now it's just visible. */
.reveal {
  transition: opacity .9s var(--ease), transform .95s var(--ease);
  will-change: opacity, transform;
}
.reveal.reveal-pending {
  opacity: 0;
  transform: translateY(36px);
}
.reveal.visible { opacity: 1; transform: none; }

/* Numbered items: parent is the .reveal target; rows rise gently in sequence.
   No alternating left/right — the list is being read top-to-bottom, so the
   eye should travel down, not zig-zag. */
.numbered.reveal { opacity: 1; transform: none; transition: none; }
.numbered.reveal .numbered-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .95s var(--ease);
  will-change: opacity, transform;
}
.numbered.reveal.visible .numbered-item { opacity: 1; transform: none; }
.numbered.reveal.visible .numbered-item:nth-child(1) { transition-delay: .00s; }
.numbered.reveal.visible .numbered-item:nth-child(2) { transition-delay: .07s; }
.numbered.reveal.visible .numbered-item:nth-child(3) { transition-delay: .14s; }
.numbered.reveal.visible .numbered-item:nth-child(4) { transition-delay: .21s; }
.numbered.reveal.visible .numbered-item:nth-child(5) { transition-delay: .28s; }

/* Feature-grid cards stagger from below with a small scale-up. */
.feature-grid.reveal .feature-item,
.articles-grid.reveal .article-card {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity .8s var(--ease), transform .85s var(--ease);
}
.feature-grid.reveal.visible .feature-item,
.articles-grid.reveal.visible .article-card { opacity: 1; transform: none; }
.feature-grid.reveal.visible .feature-item:nth-child(2),
.articles-grid.reveal.visible .article-card:nth-child(2) { transition-delay: .08s; }
.feature-grid.reveal.visible .feature-item:nth-child(3),
.articles-grid.reveal.visible .article-card:nth-child(3) { transition-delay: .16s; }
.feature-grid.reveal.visible .feature-item:nth-child(4),
.articles-grid.reveal.visible .article-card:nth-child(4) { transition-delay: .24s; }

/* ============================================================
   Misc
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: white;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; color: white; }

::selection { background: var(--orange); color: white; }

/* ============================================================
   Keyboard focus rings.
   Banks audit accessibility before procurement. A consistent, visible
   focus indicator on every interactive element matters for both WCAG
   2.4.7 (focus visible) and 2.4.11 (focus appearance).
   Uses :focus-visible so mouse clicks don't show the ring.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 4px; }
.faq-jumps a:focus-visible,
.nav-links a:focus-visible { outline-offset: 4px; }
/* Form fields already have a stronger focus state via box-shadow; suppress
   the outline there to avoid double-rings. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline: none; }

/* ============================================================
   Subtle component polish on the new cool palette.
   ============================================================ */
.btn-primary {
  box-shadow: 0 1px 0 rgba(13, 19, 48, 0.04);
}
.btn-primary:hover {
  box-shadow: 0 4px 16px -4px rgba(244, 122, 31, 0.4);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  transition: background .18s var(--ease), border-color .18s var(--ease),
              transform .15s var(--ease);
}
.btn-ghost:hover { transform: translateY(-1px); }

.article-card {
  box-shadow: 0 1px 0 rgba(13, 19, 48, 0.02);
}
.article-card:hover {
  box-shadow: 0 12px 28px -12px rgba(13, 19, 48, 0.18);
}
.stack-card {
  transition: transform .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease);
}
.stack-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 28px -16px rgba(13, 19, 48, 0.18);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-art { display: none; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .numbered-item { grid-template-columns: 1fr; gap: 0.5rem; padding: 2rem 0; }
  .numbered-num { padding-top: 0; }
  .numbered-body ul { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .split-row,
  .split-row.wide-left,
  .split-row.wide-right { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* The full nav row (brand + six links + Contact button) needs roughly 1000px
   of width. Below that — tablets, landscape phones — the links and brand fight
   for space and the brand name wraps onto two lines. So the hamburger takes
   over at 1000px, not 680px. */
@media (max-width: 1000px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .nav-links {
    position: absolute;
    /* Anchor to the actual bottom of the header. At the top of the homepage the
       header is 86px tall (not 70px), so a hardcoded top:70px left the dropdown
       overlapping the header. top:100% follows whatever height it currently is. */
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem;
    gap: 0;
    transform: translateY(-130%);
    /* When closed, the panel must be fully unpainted — not just translated
       offscreen. translateY alone parked the white panel ~40px above the
       viewport, and iOS rubber-band overscroll (pulling down past the top of
       the page) revealed it as a floating white box. visibility flips to
       hidden after the slide-up transition finishes, so the closing animation
       still shows; pointer-events/visibility also stop the hidden links from
       being tappable or tabbable. */
    visibility: hidden;
    pointer-events: none;
    transition: transform .25s var(--ease), visibility 0s linear .25s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  }
  .nav-links.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform .25s var(--ease);
  }
  .nav-links a { padding: 0.85rem; border-radius: var(--radius); }
  .nav-cta { margin: 0.5rem 0 0; }
  .nav-cta a { width: 100%; justify-content: center; }
}

@media (max-width: 680px) {
  /* Keep the brand on ONE line on phones. The top-of-homepage state enlarged
     it to 1.5rem text + 46px mark, which pushed "Genesis Core Systems" onto
     two lines next to the hamburger. On phones, both header states now share
     one compact size that provably fits down to 320px-wide screens — only the
     colors change on scroll, so there's no size-jump either. */
  .site-header .nav { gap: 1rem; }
  .site-header .brand,
  body.page-home:not(.is-scrolled) .site-header .brand {
    font-size: clamp(0.9rem, 4.4vw, 1.05rem);
    white-space: nowrap;
    gap: 0.6rem;
  }
  body.page-home:not(.is-scrolled) .site-header .brand-mark {
    width: 36px;
    height: 36px;
  }
  body.page-home:not(.is-scrolled) .nav { height: 70px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 1.6rem 1.25rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ============================================================
   Go light on mobile / touch.
   Phones get the content in its final position with the heavy reveal,
   word-stagger, and illustration motion switched off. The per-element
   fade/slide is cheap on desktop but stacks up into visible jank while
   touch-scrolling on lower-power GPUs — which is what makes the page
   feel laggy on a phone. Content simply appears, scrolling stays smooth.
   (The scroll-driven parallax + custom scroll rail are already gated off
   in JS for these devices.)
   ============================================================ */
@media (max-width: 800px), (pointer: coarse) {
  .reveal,
  .reveal.reveal-pending,
  .reveal.visible { opacity: 1 !important; transform: none !important; }
  .numbered.reveal .numbered-item,
  .feature-grid.reveal .feature-item,
  .articles-grid.reveal .article-card,
  .stack-list .stack-card,
  .illustration-frame {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .section-head h2 .word,
  .page-head h1 .word,
  .hero-cinema h1 .word,
  .cta-band h2 .word,
  .pullquote .word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Eyebrow underline: show it already drawn instead of animating its width. */
  .section-head .eyebrow::after,
  .page-head .eyebrow::after,
  .split-row .eyebrow::after { width: 28px; transition: none !important; }
}

/* ============================================================
   Scroll-triggered word stagger on big headings.
   Each <span class="word"> rises and fades in, sequenced left-to-right.
   ============================================================ */
.section-head h2 .word,
.page-head h1 .word,
.hero-cinema h1 .word,
.cta-band h2 .word,
.pullquote .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
/* These overrides must match or beat the specificity of the initial-state
   selectors above — otherwise (0,2,1) beats (0,2,0) and the headings stay
   permanently invisible (which is exactly the page-head h1 bug). */
.section-head h2.words-in .word,
.page-head h1.words-in .word,
.hero-cinema h1.words-in .word,
.cta-band h2.words-in .word,
.pullquote.words-in .word { opacity: 1; transform: none; }
.words-in .word:nth-child(1)  { transition-delay: .00s; }
.words-in .word:nth-child(3)  { transition-delay: .06s; }
.words-in .word:nth-child(5)  { transition-delay: .12s; }
.words-in .word:nth-child(7)  { transition-delay: .18s; }
.words-in .word:nth-child(9)  { transition-delay: .24s; }
.words-in .word:nth-child(11) { transition-delay: .30s; }
.words-in .word:nth-child(13) { transition-delay: .36s; }
.words-in .word:nth-child(15) { transition-delay: .42s; }
.words-in .word:nth-child(17) { transition-delay: .48s; }
.words-in .word:nth-child(19) { transition-delay: .54s; }
.words-in .word:nth-child(21) { transition-delay: .60s; }

/* Eyebrow gets a draw-in underline accent on reveal. */
.section-head .eyebrow,
.page-head .eyebrow,
.split-row .eyebrow {
  position: relative;
}
.section-head .eyebrow::after,
.page-head .eyebrow::after,
.split-row .eyebrow::after {
  content: "";
  display: block;
  margin-top: 0.55rem;
  height: 2px;
  width: 0;
  background: var(--orange);
  transition: width .9s var(--ease) .15s;
}
.reveal.visible .eyebrow::after,
.section-head.visible .eyebrow::after,
.page-head .eyebrow::after { width: 28px; }
.split-row.visible .eyebrow::after { width: 28px; }

/* Illustration frame: settles in with a soft scale + lift. */
.illustration-frame {
  opacity: 0;
  transform: translateY(20px) scale(.97);
  transition: opacity .9s var(--ease), transform 1s var(--ease);
}
.split-row.visible .illustration-frame,
.reveal.visible .illustration-frame { opacity: 1; transform: none; }

/* Stack-list cards stagger up. */
.stack-list .stack-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .75s var(--ease);
}
.split-row.visible .stack-list .stack-card:nth-child(1),
.reveal.visible .stack-list .stack-card:nth-child(1) { opacity: 1; transform: none; transition-delay: .05s; }
.split-row.visible .stack-list .stack-card:nth-child(2),
.reveal.visible .stack-list .stack-card:nth-child(2) { opacity: 1; transform: none; transition-delay: .15s; }
.split-row.visible .stack-list .stack-card:nth-child(3),
.reveal.visible .stack-list .stack-card:nth-child(3) { opacity: 1; transform: none; transition-delay: .25s; }
.split-row.visible .stack-list .stack-card:nth-child(4),
.reveal.visible .stack-list .stack-card:nth-child(4) { opacity: 1; transform: none; transition-delay: .35s; }

/* Hero parallax: the JS sets translate3d() on .hero-skyline. We just hint the
   GPU and prevent layout repaints. */
.hero-cinema .hero-skyline { will-change: transform; }

/* Page-head parallax: the interior heading rises subtly as the user scrolls
   away from the top, giving the page a sense of depth. JS sets the variable. */
.page-head .container {
  transform: translate3d(0, var(--page-head-shift, 0px), 0);
  opacity: var(--page-head-fade, 1);
  will-change: transform, opacity;
}

/* Hero content drifts up + fades as the user scrolls past the hero, so the
   cinema crossover into the next section feels intentional. */
.hero-cinema .hero-content {
  transform: translate3d(0, var(--hero-shift, 0px), 0);
  opacity: var(--hero-fade, 1);
  will-change: transform, opacity;
}

/* ============================================================
   Scroll-tied effects (reversible by construction — JS recomputes
   values from each element's current viewport position every frame).

   Two variables are written per element:
   --p     linear 0..1 progress across the viewport
            (0 = top just touched bottom of viewport, 1 = bottom just
             left the top of viewport). Good for parallax-style drift.
   --focus center-peaked 0..1, falling to 0 at the viewport edges.
            Good for "active row" highlights.
   ============================================================ */

/* Illustration card: drifts vertically by ~30px range as you scroll past
   the section. Pure linear parallax, no rotation, no scale — the figure
   stays calm, the motion stays subtle. */
.split-row.visible .illustration-frame[data-scroll-tie],
.reveal.visible .illustration-frame[data-scroll-tie] {
  transform: translateY(calc((0.5 - var(--p, 0.5)) * 36px));
  transition: opacity .9s var(--ease);
}

/* Partnership "collaborative environment" block — slides horizontally as the
   reader scrolls through the section. Enters from the right, sits centered
   at the section's vertical midpoint, then continues out to the left as you
   pass it. Continuous and reversible because --p is recomputed every frame
   from the element's current viewport position. The parent section has
   overflow:hidden so the content cleanly clips at the edges instead of
   pushing the horizontal scrollbar. */
.partnership-slide[data-scroll-tie] {
  will-change: transform;
  transform: translate3d(calc((0.5 - var(--p, 0.5)) * 180px), 0, 0);
}
@media (max-width: 800px), (pointer: coarse) {
  /* Mobile: scroll-tied JS is gated off. Pin to centered. */
  .partnership-slide[data-scroll-tie] { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .partnership-slide[data-scroll-tie] { transform: none; }
}

/* Solutions list rows: number tag brightens to brand orange when the row
   crosses viewport center, fades back as it leaves. */
.numbered-item[data-scroll-tie] {
  --focus: 0;
}
.numbered-item[data-scroll-tie] .numbered-num {
  color: color-mix(in srgb, var(--fg-faint) calc((1 - var(--focus)) * 100%), var(--orange));
  transition: none;
}
/* Fallback for browsers without color-mix(): brighten via opacity-of-orange. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .numbered-item[data-scroll-tie] .numbered-num {
    color: var(--orange);
    opacity: calc(0.45 + var(--focus) * 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .numbered-item[data-scroll-tie] .numbered-num { color: var(--orange); opacity: 1; }
}
/* Mobile: the JS that drives --focus is gated off (touch scroll + per-frame
   transforms = jank). Number tags stay static orange instead of scroll-tied. */
@media (max-width: 800px), (pointer: coarse) {
  .numbered-item[data-scroll-tie] .numbered-num { color: var(--orange); opacity: 1; }
  .illustration-frame[data-scroll-tie] { transform: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .word { opacity: 1 !important; transform: none !important; }
  .illustration-frame { opacity: 1 !important; transform: none !important; }
  .stack-list .stack-card { opacity: 1 !important; transform: none !important; }
  .hero-cinema .hero-skyline { transform: none !important; }
}

/* ============================================================
   Cinematic NYC skyline hero
   ============================================================ */
.hero-cinema {
  position: relative;
  overflow: hidden;
  min-height: clamp(620px, 88vh, 880px);
  padding: 0;
  color: white;
  isolation: isolate;
  background: #07091c;
}
.hero-cinema .hero-skyline {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* The skyline + video are purely decorative. Make the whole layer ignore
     pointer/touch input so a finger drag (or tap) over it scrolls the page
     instead of landing on the <video> — touching a video element on mobile
     can otherwise pause/flicker it or hijack the scroll. */
  pointer-events: none;
  /* Compositor hints. The JS sets translate3d() on this element once per
     animation frame; everything below should keep it on one stable GPU
     layer, so the video doesn't get re-composited each scroll tick (which
     is what was causing the occasional flicker). */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  contain: paint;
}
.hero-cinema .hero-skyline img,
.hero-cinema .hero-skyline video {
  position: absolute;
  /* Oversize the video via width/height (not transform: scale) so the source
     MP4's baked-in letterbox bars get clipped by .hero-skyline's overflow:
     hidden. Avoiding a nested transform on the video element keeps it on a
     single stable composited layer with its parent. */
  top: -6%;
  left: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  /* Never let the video itself capture a tap/long-press (no play/pause UI,
     no context menu, no scroll capture). It's a background, not a player. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Force the video onto its own GPU layer so the parent's parallax transform
     just shifts the layer rather than triggering per-frame video repaints. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hero-cinema .hero-skyline iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  min-width: 177.78vh;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero-cinema .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Decorative gradient — also transparent to input, so the only things in the
     hero that respond to touch are the actual buttons/links in .hero-content. */
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 38%, rgba(27,38,95,0.32) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(7,9,28,0.55) 0%, rgba(7,9,28,0.15) 38%, rgba(7,9,28,0.65) 100%);
}
.hero-cinema .hero-content { z-index: 2; }
.hero-cinema .hero-meta { z-index: 4; }
.hero-cinema .hero-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  /* Bottom padding is reduced — the meta bar (~64px) now occupies the bottom
     of the section, so the title block needs less of its own clearance. */
  padding: clamp(6rem, 12vw, 9rem) 0 clamp(7rem, 11vw, 9rem);
}
.hero-cinema .hero-content .container { width: 100%; }
.hero-cinema .eyebrow {
  color: #FFB774;
  letter-spacing: 0.18em;
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  margin-bottom: 1.6rem;
}
.hero-cinema h1 {
  color: white;
  max-width: 18ch;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.05;
  text-shadow: 0 4px 28px rgba(0,0,0,0.35);
}
.hero-cinema .lead {
  color: rgba(255,255,255,0.86);
  max-width: 60ch;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.hero-cinema .hero-actions .btn-text {
  color: white;
}
.hero-cinema .hero-actions .btn-text:hover { color: var(--orange); }
/* Full-width solid bar at the bottom of the cinema hero. Acts as the
   intentional bottom edge — the parallax can shift the video upward without
   exposing anything, because the bar is what the viewer sees as the "floor"
   of the hero. */
.hero-cinema .hero-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: clamp(56px, 6.5vw, 72px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  max-width: none;
  margin: 0;
  background: #07091c;
}
/* A single thin orange accent line at the top of the bar, brightest in the
   middle and fading at the edges. Replaces the old left/right gradient
   "lines" that were flex-grow filler between two centered labels. */
.hero-cinema .hero-meta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(244, 122, 31, 0) 0%,
    rgba(244, 122, 31, 0.55) 28%,
    rgba(244, 122, 31, 0.85) 50%,
    rgba(244, 122, 31, 0.55) 72%,
    rgba(244, 122, 31, 0) 100%
  );
  pointer-events: none;
}
.hero-cinema .hero-meta::after { content: none; }
.hero-cinema .hero-meta > span {
  position: relative;
  white-space: nowrap;
}
.hero-cinema .hero-meta > span:first-of-type {
  color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 680px) {
  /* On phones, a frosted (backdrop-filter) sticky header has to re-blur the
     moving page — including the hero video — on every scroll frame, which is a
     classic source of scroll stutter/glitching on mobile GPUs. Use a solid
     surface instead; it looks the same but composites for free. (The
     transparent-at-top and menu-open states keep their own higher-specificity
     backgrounds.) */
  .site-header {
    background: rgba(251, 250, 247, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero-cinema { min-height: 560px; }
  /* On mobile the parallax is disabled, so drop the GPU-compositing hints that
     made the hero render blank until a scroll forced a repaint. Also give the
     layer a solid dark fallback so it's never white while the video loads. */
  .hero-cinema .hero-skyline {
    will-change: auto;
    contain: none;
    transform: none;
    background: #07091c;
  }
  .hero-cinema .hero-skyline img,
  .hero-cinema .hero-skyline video {
    transform: none;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
  .hero-cinema .hero-meta {
    height: 52px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    gap: 0.75rem;
    padding: 0 1.1rem;
  }
}

@media (max-width: 540px) {
  /* The two nowrap labels don't fit side by side on a phone — the right one
     was clipping mid-word ("…NEW YOR"). Stack them centered instead. */
  .hero-cinema .hero-meta {
    height: auto;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.8rem 1rem 0.9rem;
    text-align: center;
  }
}

/* Mobile & touch: the video still plays here. We paint the poster still as the
   skyline background underneath it so that, until the first video frame decodes
   (or if a data-saver device blocks autoplay), the visitor sees the real NYC
   footage rather than a white/blank box — which, combined with the menu's
   white-on-white links, is what used to make the top of the page look empty. */
@media (max-width: 900px), (pointer: coarse) {
  .hero-cinema .hero-skyline {
    background: #07091c url("hero-poster-city.jpg") center bottom / cover no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cinema .hero-skyline iframe { display: none; }
  .hero-cinema { background: linear-gradient(135deg, #0d1330 0%, #1B265F 60%, #2F4DAB 100%); }
}

/* ============================================================
   Long-form article / legal pages (Privacy, Terms)
   ============================================================ */
.prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--fg);
}
.prose h2 {
  font-size: 1.55rem;
  margin: 2.4rem 0 0.9rem;
  color: var(--brand);
}
.prose h3 {
  font-size: 1.18rem;
  margin: 1.8rem 0 0.6rem;
  color: var(--brand);
}
.prose p { color: var(--fg); margin: 0 0 1.1em; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2rem; color: var(--fg); }
.prose li { margin: 0.35rem 0; }
.prose strong { color: var(--brand); }
.prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.prose .meta-row {
  font-size: 0.88rem;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.2rem;
  margin-bottom: 2rem;
  letter-spacing: 0.03em;
}
.prose blockquote {
  border-left: 3px solid var(--orange);
  margin: 1.6rem 0;
  padding: 0.3rem 0 0.3rem 1.2rem;
  color: var(--fg-muted);
  font-style: italic;
}

/* Footer micro-links row */
.footer-microlinks {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--fg-faint);
}
.footer-microlinks a { color: rgba(255,255,255,0.6); }
.footer-microlinks a:hover { color: var(--orange); }

/* Illustration frame for the "core system you can count on" section */
.illustration-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Dark brand panel — the looping Genesis animation fills it edge to edge. */
  background: #07091c;
  padding: 0;
  box-shadow: 0 30px 70px -30px rgba(27, 38, 95, 0.35);
}
.illustration-frame img,
.illustration-frame video {
  width: 100%;
  height: auto;
  display: block;
}
/* The GENESIS animation is decorative — ignore touch so scrolling over it
   never grabs the video or shows playback UI. */
.illustration-frame video {
  pointer-events: none;
  -webkit-touch-callout: none;
}

/* Footer "any questions" tagline, matching the original site footer */
.footer-help {
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
  margin: 0.5rem 0 1.2rem;
}
.footer-help a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-help a:hover { color: var(--orange-deep); }