/* ============================================================
   Falcon — Homepage redesign overlay  (v2)
   Scoped entirely to body.home-redesign so the design system
   and every other page stay untouched.

   Direction (from client references):
   - Transparent nav floats over a VISIBLE city image
   - Two close gray-blue surface tones — no white anywhere
   - More glass / transparency, tighter vertical rhythm
   - Orange used sparingly: hero rule, primary CTA, eyebrows,
     stat ticks, text-links — nothing else
   - Hero AND footer share the same city-image-with-gradient
   ============================================================ */

body.home-redesign {
  /* Two close, desaturated gray-blue surfaces alternate down the page */
  --hr-slate:   #2a3742;            /* primary blue-gray surface  */
  --hr-navy:    #1d2832;            /* deeper alternate surface   */
  --hr-deep:    #121b22;            /* base / closing             */
  --hr-card:    rgba(255,255,255,0.05);
  --hr-card-hi: rgba(255,255,255,0.085);
  --hr-bd:      rgba(255,255,255,0.10);
  --hr-line:    rgba(255,255,255,0.12);
  --hr-fg:      rgba(255,255,255,0.92);
  --hr-muted:   rgba(255,255,255,0.66);
  --hr-faint:   rgba(255,255,255,0.46);
  background: var(--hr-deep);
}

/* ============================================================
   NAV — transparent, floats over the hero image; glass on scroll
   ============================================================ */
body.home-redesign .site-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0 !important;
  transition: background var(--duration-base) var(--ease-standard),
              backdrop-filter var(--duration-base) var(--ease-standard);
}
body.home-redesign .site-header.scrolled {
  background: rgba(18,27,34,0.80) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
body.home-redesign .site-header .row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.20);
}
/* Start a Search: orange outline + orange text, transparent center */
body.home-redesign .nav-cta {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  letter-spacing: 0.16em;
}
body.home-redesign .nav-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
body.home-redesign .nav-item .menu { background: rgba(18,27,34,0.97); backdrop-filter: blur(14px); }

/* ============================================================
   HERO — content under fixed nav; city image is clearly visible
   so the transparent nav genuinely floats over architecture.
   ============================================================ */
body.home-redesign .hero.hero-image {
  display: flex; flex-direction: column;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(13,20,27,0.26) 0%, rgba(13,20,27,0.18) 46%, rgba(11,17,23,0.50) 100%),
    linear-gradient(90deg, rgba(11,18,24,0.42) 0%, rgba(11,18,24,0.06) 54%, rgba(11,18,24,0) 76%),
    url("../assets/falcon-bg-buildings.png") center 42% / cover no-repeat;
}
body.home-redesign .hero.hero-image::before { display: none; }
body.home-redesign .hero-content {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 132px 0 48px; max-width: none;
}
body.home-redesign .hero h1 { max-width: 800px; }
body.home-redesign .hero-sub { max-width: 600px; }
/* Stats band — inside the hero, over the city image, with its own
   transparent→dark gradient so the figures stay legible. */
body.home-redesign .hero-stats {
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(8,13,18,0) 0%, rgba(8,13,18,0.45) 55%, rgba(8,13,18,0.74) 100%);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 26px 0 30px;
}
body.home-redesign .hero-stats .grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
body.home-redesign .hero h1 {
  font-size: clamp(42px, 5.2vw, 70px);
  letter-spacing: -0.024em;
  margin-bottom: 22px;
}
body.home-redesign .hero-rule { width: 64px; margin-bottom: 24px; }
body.home-redesign .hero-sub { font-size: 17px; max-width: 600px; margin-bottom: 32px; color: rgba(255,255,255,0.82); }
body.home-redesign .hero-cta-row { gap: 24px; margin-bottom: 16px; }
/* keep hero CTA filled — it's the single strongest action on the page */

/* ============================================================
   STATS — glass panel, soft-white numbers, short orange ticks
   (orange retired from the numbers; the tick carries the accent)
   ============================================================ */
/* (legacy stand-alone stats bar removed — stats now live in the hero) */
body.home-redesign .stat-cell {
  position: relative;
  padding-left: 20px;
}
body.home-redesign .stat-cell::after {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 2px; height: 42px; background: var(--accent);
}
/* drop the original between-cell dividers — the ticks replace them */
body.home-redesign .stat-cell + .stat-cell::before { display: none; }
body.home-redesign .stat-cell .num {
  color: var(--hr-fg);
  font-size: 44px;
  margin-bottom: 10px;
}
body.home-redesign .stat-cell .lbl { color: var(--hr-muted); }
body.home-redesign .stats-footnote { color: var(--hr-faint); margin-top: 20px; }

/* ============================================================
   GLOBAL SECTION RHYTHM — tighter, grayish, no white
   ============================================================ */
body.home-redesign .section-dark,
body.home-redesign .section-light,
body.home-redesign .section-deep,
body.home-redesign .versus-section,
body.home-redesign .logos-section {
  padding: clamp(46px, 5vw, 68px) 0;
}
body.home-redesign .section-sub { margin-bottom: 30px; color: var(--hr-muted); }
body.home-redesign .section-title { margin-bottom: 16px; font-size: clamp(28px, 3.1vw, 42px); }
body.home-redesign .section-eyebrow { margin-bottom: 16px; }

/* Alternating surfaces, addressed by their unique screen labels */
body.home-redesign [data-screen-label="Problem"]      { background: var(--hr-slate); }
body.home-redesign [data-screen-label="STRIKE"]       { background: var(--hr-navy); }
body.home-redesign [data-screen-label="Them vs Us"]   { background: var(--hr-slate); }
body.home-redesign [data-screen-label="Platform"]     { background: var(--hr-navy); }
body.home-redesign [data-screen-label="Clients"]      { background: var(--hr-slate); color: var(--hr-fg); }
body.home-redesign [data-screen-label="Testimonials"] { background: var(--hr-navy); }
/* "In Their Words" — black beanstalk repeating pattern (not the city image) */
body.home-redesign .testimonials-block.section-deep::before {
  background:
    linear-gradient(180deg, rgba(18,27,34,0.60) 0%, rgba(14,22,28,0.70) 100%),
    url("../assets/beanstalk-dark.png") repeat;
  background-size: auto, 300px 300px;
  filter: none;
}

/* ============================================================
   PROBLEM — tighter rows
   ============================================================ */
body.home-redesign .problem-row { padding: 22px 0; gap: 48px; border-top-color: var(--hr-line); }
body.home-redesign .problem-row:last-of-type { border-bottom-color: var(--hr-line); }
body.home-redesign .problem-body { font-size: 16px; color: rgba(255,255,255,0.8); }
body.home-redesign .problem-coda { margin-top: 34px; padding-top: 26px; font-size: 21px; }

/* ============================================================
   STRIKE (sequence default) — tighter editorial rows, white letters
   ============================================================ */
body.home-redesign .strike-sequence .seq-row { padding: 22px 0; border-top-color: var(--hr-line); }
body.home-redesign .strike-sequence .seq-row:last-child { border-bottom-color: var(--hr-line); }
body.home-redesign .strike-sequence .seq-letter { font-size: 52px; color: rgba(255,255,255,0.9); }
body.home-redesign .strike-sequence .seq-desc { font-size: 15.5px; color: rgba(255,255,255,0.78); }
/* grid + marquee variants, should the tweak switch to them */
body.home-redesign .strike-card { min-height: 0; padding: 30px 26px 34px; background: var(--hr-card); border-color: var(--hr-bd); }
body.home-redesign .strike-card:hover { background: var(--hr-card-hi); }
body.home-redesign .strike-letter { color: rgba(255,255,255,0.9); }
body.home-redesign .strike-marquee, body.home-redesign .strike-marquee-list .ml-letter { color: #fff; }
body.home-redesign .strike-marquee .dot { color: var(--accent); }

/* ============================================================
   VERSUS — tighter, hairlines softened
   ============================================================ */
body.home-redesign .versus-them, body.home-redesign .versus-us { padding-top: 24px; padding-bottom: 24px; font-size: 15.5px; }
body.home-redesign .versus-row { border-top-color: var(--hr-line); }
body.home-redesign .versus-row:last-child { border-bottom-color: var(--hr-line); }

/* ============================================================
   PLATFORM — translucent glass cards
   ============================================================ */
body.home-redesign .platform-grid { gap: 26px; }
body.home-redesign .platform-card {
  background: var(--hr-card);
  border: 1px solid var(--hr-bd);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 38px 34px;
}
body.home-redesign .platform-name { font-size: 36px; margin-bottom: 16px; }
body.home-redesign .platform-desc { font-size: 15px; margin-bottom: 26px; }
body.home-redesign .platform-stat .v { color: var(--hr-fg); }       /* retire orange on the numbers */
body.home-redesign .platform-stat .l { color: var(--hr-muted); }
body.home-redesign .platform-stats { padding-top: 24px; border-top-color: var(--hr-line); }

/* ============================================================
   CLIENT LOGOS — gray-blue slate, translucent cells (was white)
   ============================================================ */
body.home-redesign .logos-section { color: var(--hr-fg); }
body.home-redesign .logos-section .section-title.light-bg { color: #fff; }
body.home-redesign .logos-grid {
  border-top-color: var(--hr-bd);
  border-left-color: var(--hr-bd);
  margin-top: 32px;
}
body.home-redesign .logo-cell {
  border-right-color: var(--hr-bd);
  border-bottom-color: var(--hr-bd);
  height: 98px;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.025);
  opacity: 1;
}
body.home-redesign .logo-cell:hover { background: rgba(255,255,255,0.06); color: #fff; }
body.home-redesign .logo-cell .sub { color: var(--hr-faint); }

/* ============================================================
   TESTIMONIALS (stack default) — tighter
   ============================================================ */
body.home-redesign .t-stack { border-top-color: var(--hr-line); margin-top: 22px; }
body.home-redesign .t-stack-item { padding: 36px 0; border-bottom-color: var(--hr-line); }
body.home-redesign .t-stack-item blockquote { font-size: clamp(20px, 2vw, 26px); }
body.home-redesign .testimonial { background: var(--hr-card); border-color: var(--hr-bd); }

/* ============================================================
   CLOSING BLOCK — footer CTA + site footer share the city image,
   exactly like the hero. The city must read THROUGH the wash.
   ============================================================ */
body.home-redesign .closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* CTA panel: solid navy→deep gradient (matches every other page) */
body.home-redesign .closing .footer-cta {
  background: linear-gradient(180deg, var(--hr-navy) 0%, var(--hr-deep) 100%);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: clamp(56px, 6vw, 84px) 0;
}
/* no orange handshake line before the CTA */
body.home-redesign .closing .footer-cta::before { display: none; }
/* Footer: the only block carrying the city image */
body.home-redesign .closing .site-footer {
  background:
    linear-gradient(180deg, rgba(11,18,24,0.55) 0%, rgba(11,18,24,0.70) 42%, rgba(10,16,22,0.90) 100%),
    url("../assets/falcon-bg-buildings.png") center 36% / cover no-repeat;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: clamp(48px, 5vw, 70px) 0 36px;
  margin-top: 0;
}
body.home-redesign .closing .footer-grid { padding-top: 38px; border-top: 1px solid rgba(255,255,255,0.14); }
body.home-redesign .closing .footer-meta { border-top-color: rgba(255,255,255,0.14); }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 980px) {
  body.home-redesign .site-header { position: sticky; background: rgba(18,27,34,0.92) !important; backdrop-filter: blur(12px); }
  body.home-redesign .hero-content { padding: 56px 0 52px; }
  body.home-redesign .problem-row { gap: 14px; padding: 20px 0; }
  body.home-redesign .stat-cell { padding-left: 16px; }
}

/* ============================================================
   SITE-WIDE REDESIGN — INNER PAGES
   (Why Falcon, How We Work, Track Record, Placement History,
   Contact, Solutions). Applied via body.home-redesign.inner.
   Goals, matching the homepage:
   - City image behind EVERY page hero
   - No white anywhere — two close gray-blue surfaces alternate
   - The beanstalk texture marks the focal / closing section
   - Glass cards, tighter rhythm, orange used sparingly
   The homepage (body.home-redesign, no .inner) is untouched.
   ============================================================ */

/* ---------- HERO — city image behind every page title ---------- */
body.home-redesign.inner .subhero {
  position: relative;
  min-height: 62vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 168px 0 76px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(13,20,27,0.30) 0%, rgba(13,20,27,0.20) 44%, rgba(12,18,24,0.66) 100%),
    linear-gradient(90deg, rgba(11,18,24,0.48) 0%, rgba(11,18,24,0.10) 56%, rgba(11,18,24,0) 80%),
    url("../assets/falcon-bg-buildings.png") center 38% / cover no-repeat !important;
}
body.home-redesign.inner .subhero::before { display: none; }
body.home-redesign.inner .subhero h1 { max-width: 940px; letter-spacing: -0.024em; }
body.home-redesign.inner .subhero .sub { color: rgba(255,255,255,0.84); max-width: 720px; }
/* discretion note (placement history) reads as a glass chip over the image */
body.home-redesign.inner .subhero .discretion-note {
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ---------- TWO-TONE ALTERNATION across content sections ---------- */
/* Guaranteed alternation regardless of each page's section classes. */
body.home-redesign.inner section:nth-of-type(odd)  { background: var(--hr-slate); }
body.home-redesign.inner section:nth-of-type(even) { background: var(--hr-navy); }

/* Chrome / special sections opt out of the alternation. */
/* Closing CTA — solid navy→deep gradient on EVERY page (the look from
   Why Falcon). Always reads distinct from a beanstalk focal section
   above it and the city-image footer below it. */
body.home-redesign.inner .footer-cta,
body.home-redesign.inner .placement-footer-cta {
  background: linear-gradient(180deg, var(--hr-navy) 0%, var(--hr-deep) 100%) !important;
  background-size: auto !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
}
body.home-redesign.inner .footer-cta::before,
body.home-redesign.inner .placement-footer-cta::before { display: none; }
body.home-redesign.inner .site-footer {
  background:
    linear-gradient(180deg, rgba(11,18,24,0.55) 0%, rgba(11,18,24,0.72) 42%, rgba(10,16,22,0.92) 100%),
    url("../assets/falcon-bg-buildings.png") center 36% / cover no-repeat !important;
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* Beanstalk-textured focal section (opt-in via .bg-beanstalk) */
body.home-redesign.inner .bg-beanstalk {
  background:
    linear-gradient(180deg, rgba(20,30,38,0.55) 0%, rgba(16,25,32,0.64) 100%),
    url("../assets/beanstalk-dark.png") repeat !important;
  background-size: auto, 300px 300px !important;
}

/* The closing CTA uses a solid navy→deep gradient on every page (rule
   above), so it always reads distinct from the beanstalk focal section
   above it. */

/* ---------- KILL EVERY WHITE SURFACE ---------- */
/* (section bg already handled by the alternation; here we flip the
   formerly dark-on-white text back to light.) */
body.home-redesign .section-light,
body.home-redesign .difference-section.alt { color: var(--hr-fg); }
body.home-redesign .section-light .section-sub,
body.home-redesign .section-light .narrative p,
body.home-redesign .section-light .narrative .lead-para,
body.home-redesign .section-light .faq-a-inner p,
body.home-redesign .difference-section.alt .col-body,
body.home-redesign .editorial-split.alt .rhs p,
body.home-redesign .editorial-split.alt .spec-list li { color: var(--hr-muted); }
body.home-redesign .difference-section.alt .col.us .col-body,
body.home-redesign .section-light .faq-q { color: var(--hr-fg); }
body.home-redesign .section-title.light-bg,
body.home-redesign .difference-section.alt .difference-title,
body.home-redesign .editorial-split.alt .lhs h2 { color: #fff !important; }
body.home-redesign .difference-section.alt .difference-num { color: rgba(255,255,255,0.16); }
body.home-redesign .difference-section.alt .col-label { color: var(--hr-faint); }
body.home-redesign .difference-section.alt .col.us .col-label { color: var(--accent); }
body.home-redesign .editorial-split.alt .spec-list li { border-top-color: var(--hr-line); }
/* CFO thesis stats were navy-on-white — force light on the dark surface */
body.home-redesign .section-light .platform-stat .v { color: var(--hr-fg) !important; }
body.home-redesign .section-light .platform-stat .l { color: var(--hr-muted) !important; }

/* ---------- GLASS CARDS across inner pages ---------- */
body.home-redesign .gated-cta,
body.home-redesign .methodology-callout,
body.home-redesign .form-card,
body.home-redesign .fn-link,
body.home-redesign .principle,
body.home-redesign .difference-section .col.what,
body.home-redesign .difference-section.alt .col.what {
  background: var(--hr-card);
  border-color: var(--hr-bd);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.home-redesign .section-deep .principle { background: var(--hr-card); }
body.home-redesign .principle:hover,
body.home-redesign .fn-link:hover { background: var(--hr-card-hi); }
body.home-redesign .principles-grid { border-top-color: var(--hr-bd); border-left-color: var(--hr-bd); }
body.home-redesign .principle { border-right-color: var(--hr-bd); border-bottom-color: var(--hr-bd); }

/* ---------- PLACEMENT HISTORY ---------- */
body.home-redesign.inner .placements-section { background: var(--hr-slate) !important; }
body.home-redesign .placement-grid { background: var(--hr-bd); border-color: var(--hr-bd); }
body.home-redesign .placement-card { background: var(--hr-card); }
body.home-redesign .placement-card:hover { background: var(--hr-card-hi); }
body.home-redesign .placement-card .sector-pill { background: rgba(255,255,255,0.07); }
/* sticky filter bar — glass, sits just under the fixed nav */
body.home-redesign.inner .filter-section {
  background: rgba(18,27,34,0.82) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top-color: var(--hr-bd); border-bottom-color: var(--hr-bd);
  top: 58px;
}
body.home-redesign .filter-field select,
body.home-redesign .filter-field input { background: rgba(255,255,255,0.04); border-color: var(--hr-bd); }

/* ---------- TRACK RECORD — retire orange on the big stat numbers ---------- */
body.home-redesign .bignum .v,
body.home-redesign .methodology-callout .big { color: var(--hr-fg); }

/* ---------- CONTACT — glass form + harmonized inputs ---------- */
body.home-redesign .form-field input,
body.home-redesign .form-field select,
body.home-redesign .form-field textarea {
  background: rgba(255,255,255,0.04);
  border-color: var(--hr-bd);
}
body.home-redesign .form-field input:focus,
body.home-redesign .form-field select:focus,
body.home-redesign .form-field textarea:focus { border-color: var(--accent); }

/* ---------- INNER MOBILE ---------- */
@media (max-width: 980px) {
  body.home-redesign.inner .subhero { padding: 120px 0 56px; min-height: 0; }
  body.home-redesign.inner .filter-section { top: 0; }
}