/* QI Path — shared dark component kit.
   Linked by every page. Page-specific rules stay inline in each page.

   WHAT BELONGS HERE: anything used by two or more pages — the nav (.nav-*),
   the section kit (.hero-*, .mission-*, .story, .split-*, .section-pad,
   .inner, .section-title, .eyebrow, .btn-*, .watermark*, .site-footer) and
   the body base.

   WHAT DOES NOT: a page's own gradient stops and one-off layout. Those live
   in that page's inline <style> — .about-band, .careers-band, .sol-* and so
   on. Band gradients in particular are per-page by design; see the gradient
   sequence below.

   These names replaced the builder's generated hashes (renderer-hM1n-element-
   ydzY and friends). If you ever paste markup back out of the old builder,
   rename its classes to match the kit rather than adding hashes here. */

/* =========================================================================
   HOMEPAGE PALETTE — values supplied by design.

     #081a2e  dark blue
     #0e3358  brand dark blue — button fills / dark-on-gold text (7.7:1 on gold)
     #091a2d  dark blue, hero variant
     #1285f9  bright blue
     #f1c40f  brand gold                    (existing site color)
     #deb40d  gold hover                    (existing site color)
     #febf04  icon yellow — NOT a brand colour and not referenced in CSS.
              It is the yellow baked into the Icon-*.svg set, recorded here
              only so the near-match against #f1c40f is on the record.
     #a8b8d4  muted body copy on dark
     #dce6f5  card body copy

     rgba(255, 255, 255, 0.14) card border
     rgba(255, 255, 255, 0.05) card fill
     rgba(255, 255, 255, 0.12) hairline rule

   BODY BACKGROUND MUST STAY #fff. It is not merely the overscroll colour:
   every translucent gradient stop below composites against it, so changing
   it silently reprices half the page. Verified against the Canva comp
   (~/Desktop/QI Path Website/Home.png) — see the note on alpha below.

   SECTION GRADIENTS — all 180deg, as supplied by design.

   The design specs are written as "#1285f9 with N% transparency", where N
   is TRANSPARENCY, not opacity: CSS alpha = (100 - N) / 100. So
   "70% transparency" is alpha 0.3, and "5% transparency" is alpha 0.95 —
   nearly solid. Getting this backwards inverts every gradient on the page.

   Confirmed by sampling the comp: its palest pixel and its final pixel are
   both #b8dafd, and blue at alpha 0.30 over white is exactly #b8dafd. The
   hero's last row is #1d89f5, and blue at alpha 0.95 over white is #1d8bf9.

     Menu + Hero     #091a2d -> #091a2d -> #1285f9 @a0.95
     Mission         #1285f9 -> #1285f9 @a0.30

     Why QI Path  ┐  #1285f9 @a0.30 -> #1285f9 -> #081a2e
     What We Prov.┘  one ramp across both, on .band

     Our Clients     #081a2e (flat)
     Closing CTA     #081a2e -> #1285f9 -> #1285f9 @a0.30

   About Us and Careers each run one ramp across their watermark statement and
   both story sections. Those gradients are page-scoped (.about-band /
   .careers-band) because the stops differ; both open on #1e8bf9 to
   meet the hero and land on #081a2e to meet what follows.

   Boundaries are seamless because adjacent stops match: the hero ends at
   near-solid blue where the mission opens on solid blue, and the mission
   ends at @a0.30 where the Why/Provide band opens on @a0.30.
   ========================================================================= */

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background-color: #fff;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media (max-width: 390px) {
  body {
    font-size: 12px;
  }
}

/* =========================================================================
   NAVBAR — copied verbatim from the other pages. Do not edit these rules;
   the dark treatment lives in the HOME DARK override block below so this
   block stays diffable against about-us.html / careers.html / etc.
   (The .nav-link "Home" rules are omitted — that link is
   removed on this page.)
   ========================================================================= */

.nav-fixed {
  top: 0;
  width: 100%;
  z-index: 100;
  position: fixed;
}

.nav-bar {
  display: flex;
  padding: 20px 10px;
  transition: all 0.3s ease;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
}

@media (max-width: 1024px) {
  .nav-bar {
    width: 100%;
    overflow: hidden;
    position: relative;
    flex-flow: column;
    transition: all 0.6s ease;
  }
}

@media (max-width: 428px) {
  .nav-bar {
    padding: 10px;
  }
}

.nav-brand-row {
  display: flex;
  flex-flow: row;
}

@media (max-width: 1024px) {
  .nav-brand-row {
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
}

.nav-brand {
  display: flex;
  padding: 10px;
  align-items: center;
}

@media (max-width: 1024px) {
  .nav-brand {
    flex: 1 1 auto;
  }
}

.nav-logo-link {
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}

.nav-logo {
  height: 35px;
}

@media (max-width: 428px) {
  .nav-logo {
    height: 24px;
  }
}

@media (max-width: 1024px) {
  .nav-toggle-area {
    height: 40px;
    display: flex;
    padding: 0 10px;
    position: relative;
    align-items: center;
    justify-content: flex-end;
  }
}

@media (max-width: 1024px) {
  .nav-toggle {
    top: 0;
    right: 0;
    width: 100%;
    cursor: pointer;
    height: 100%;
    display: block;
    position: absolute;
  }
}

.nav-hamburger {
  width: 30px;
  height: 0;
  display: none;
  position: relative;
}

@media (max-width: 1024px) {
  .nav-hamburger {
    top: -10px;
    display: block;
    pointer-events: none;
  }
}

/* The three hamburger bars. Identical apart from their vertical offset, so
   the shared body lives here and :nth-child places them. #hamburger.is-active
   further down transforms 1 and 3 into the X and hides 2 — that rule targets
   the same :nth-child positions, so the DOM order of these three spans is
   load-bearing. */
.nav-line {
  left: 0;
  color: #232e37;
  width: 100%;
  height: 2px;
  display: block;
  opacity: 1;
  position: absolute;
  background: #232e37;
  transition: all 0.3s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  border-radius: 5px;
}

.nav-line:nth-child(1) {
  top: 0;
}

.nav-line:nth-child(2) {
  top: 10px;
}

.nav-line:nth-child(3) {
  top: 20px;
}

@media (max-width: 1024px) {
  .nav-line {
    background-color: #072253;
  }
}

.nav-panel {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 1024px) {
  .nav-panel {
    width: 100%;
    opacity: 0;
    max-height: 0;
    transition: all 0.6s ease;
    visibility: hidden;
    align-items: flex-start;
    justify-content: center;
  }
}

@media (max-width: 428px) {
  .nav-panel {
    height: 100dvh;
    font-size: 24px;
  }
}

.nav-links {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: end;
}

@media (max-width: 1024px) {
  .nav-links {
    gap: 20px;
    padding: 20px;
    flex-flow: column;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
  }
}

@media (max-width: 428px) {
  .nav-links {
    height: 100%;
    align-items: stretch;
    justify-content: space-evenly;
  }
}

.nav-link {
  color: #232e37;
  margin: 0 1em;
  padding: 0.5em;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  text-decoration: none;
}

.nav-link:hover {
  color: #0185ff;
}

.nav-cta-wrap {
  margin: 0 0.5em;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 1024px) {
  .nav-cta-wrap {
    width: 100%;
    margin: 0.5em;
    flex-flow: row wrap;
    justify-content: space-around;
  }
}

@media (max-width: 428px) {
  .nav-cta-wrap {
    margin: 0.5em 0.5em 2em;
  }
}

.nav-cta-inner {
  margin: 0;
  padding: 0;
}

.nav-cta {
  color: #232e37;
  border: 2px solid #f1c40f;
  display: inline-block;
  /* Match the site's other buttons (.btn-gold / .btn-ghost) in both type and
     padding, not the smaller .nav-link menu copy — this is a full-size button. */
  padding: 0.8em 1.5em;
  font-size: 0.9em;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.7px;
  text-decoration: none;
  background-color: #f1c40f;
}

@media (max-width: 768px) {
  .nav-cta {
    font-size: 0.75em;
  }
}

.nav-cta:hover {
  border: 2px solid #deb40d;
  background-color: #deb40d;
}

/* =========================================================================
   HOME DARK: navbar overrides
   Must stay AFTER the copied nav rules above so the .nav-line colour wins
   inside the 1024px media query.
   ========================================================================= */

.nav-dark {
  background-color: transparent;
}

#navbar.nav-dark.scrolled {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(8, 26, 46, 0.72);
}

#navbar.nav-dark.is-active {
  background-color: #081a2e;
}

.nav-dark .nav-link {
  color: #fff;
}

.nav-dark .nav-link:hover {
  color: #f1c40f;
}

.nav-dark .nav-line {
  background: #fff;
  background-color: #fff;
}

/* Desktop-only layout: links sit immediately left of the logo instead of
   being pushed right, with the CTA alone on the far right. Scoped to
   min-width 1025px because these selectors are more specific than the
   copied `@media (max-width: 1024px)` rules and would otherwise break the
   stacked mobile menu. */
@media (min-width: 1025px) {
  .nav-dark .nav-panel {
    flex: 1 1 auto;
  }

  .nav-dark .nav-links {
    width: 100%;
    justify-content: flex-start;
  }

  .nav-dark .nav-cta-wrap {
    margin-left: auto;
  }
}

.nav-dark .nav-link {
  font-size: 0.875em;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* =========================================================================
   HOME DARK: shared tokens
   Used by three or more sections each — defined once here.
   ========================================================================= */

/* SUB-PIXEL SEAM FIX.
   Section heights land on fractional pixels (em padding, vh padding, and a
   14/12px root font-size), so adjacent section backgrounds don't quite meet
   and a hairline of the white body shows through — worst on mobile, where
   device pixel ratios differ. Each band is pulled 1px into the next so the
   following section's background covers the gap.
   This only works because every following edge is OPAQUE: the mission and
   band gradients open on pre-composited solids (#1e8bf9 / #4da4fa) rather
   than translucent stops, which would otherwise double-composite over that
   1px and leave a visible line instead of a seam. */
.hero,
.mission,
.band,
.clients
/*.cta */ {
  margin-bottom: -1px;
}

.section-pad {
  width: 100%;
  padding: 80px 5%;
}

@media (max-width: 768px) {
  .section-pad {
    padding: 60px 5%;
  }
}

.inner {
  margin: 0 auto;
  max-width: 1200px;
}

.eyebrow {
  color: #f1c40f;
  display: block;
  font-size: 1.25em;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-title {
  color: #fff;
  font-size: 2.75em;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  line-height: 118%;
  letter-spacing: -1px;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2em;
  }
}

.muted {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 150%;
  font-size: 1.25em;
  position: relative;
  top: 1em;
}

.img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

.btn-row {
  gap: 1em;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

@media (max-width: 428px) {
  .btn-row {
    flex-flow: column;
    align-items: stretch;
  }
}

.btn-gold {
  color: #0e3358;
  border: 2px solid #f1c40f;
  display: inline-block;
  padding: 0.8em 1.5em;
  font-size: 0.9em;
  text-align: center;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.7px;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #f1c40f;
}

/* Hover resolves to the ghost button's resting state: dark fill, gold text and
   gold border. Border stays 2px (the ghost's is 1px + padding compensation) so
   the button doesn't change size on hover. */
.btn-gold:hover {
  color: #f1c40f;
  border: 2px solid #f1c40f;
  background-color: #0e3358;
}

/* Dark fill, gold text, hairline gold border — per the comp, which uses a
   1px border here against the gold button's 2px. The padding adds that 1px
   back so the two render at identical heights side by side. */
.btn-ghost {
  color: #f1c40f;
  border: 1px solid #f1c40f;
  display: inline-block;
  padding: calc(0.8em + 1px) calc(1.5em + 1px);
  font-size: 0.9em;
  text-align: center;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.7px;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #0e3358;
}

.btn-ghost:hover {
  color: #0e3358;
  background-color: #f1c40f;
}

/* Faint "Q" watermark, used by the mission band and the closing CTA band.
   Source PNG is already white with an alpha channel, so this is a plain
   background image at low opacity — no mask, no vendor prefixes.
   Sized in px on purpose: it is decorative art and should not compound
   with the 16 -> 14 -> 12px body font-size steps.
   The host section MUST set `position: relative; overflow: hidden` or this
   box overflows the document and creates a horizontal scrollbar. */
.watermark {
  top: 50%;
  left: 50%;
  width: 50%;
  height: 100%;
  opacity: 0.07;
  z-index: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-image: url('/assets/logomark-white.png');
  background-repeat: no-repeat;
  pointer-events: none;
  background-position: center;
}

/* Right-aligned variant. Hangs slightly off the right edge, which the host
   section's `overflow: hidden` crops. */
.watermark-right {
  left: auto;
  right: -140px;
  transform: translate(0, -50%);
}

@media (max-width: 768px) {
  .watermark {
    width: 560px;
    height: 560px;
    opacity: 0.06;
  }

  .watermark-right {
    right: -100px;
  }
}

@media (max-width: 428px) {
  .watermark {
    width: 380px;
    height: 380px;
  }

  .watermark-right {
    right: -70px;
  }
}

/* The Icon-*.svg set ships already coloured, so these are plain <img> —
   no mask, no tint. (Their exports carried two opaque white background
   rects, which were stripped; re-exports need the same treatment or the
   icons render as white squares on the dark section.) */
.pillar-icon {
  width: 3.5em;
  height: 3.5em;
  display: block;
}

/* =========================================================================
   SECTION 2 — HERO
   ========================================================================= */

/* Not width-limited: the hero image runs flush to the right edge, so only
   the left side gets padding. */
.hero {
  width: 100%;
  padding: 9em 5% 6em;
  background: linear-gradient(180deg, #091a2d 0%, #091a2d 75%, rgba(18, 133, 249, 0.95) 100%);
}

@media (max-width: 768px) {
  .hero {
    padding: 8em 5% 4em;
  }
}

/* Deliberately NOT capped at 1200px like the other sections — the hero runs
   the full width of the viewport, held in only by the section's 5% padding. */
.hero-inner {
  gap: 4%;
  display: flex;
  flex-flow: row;
  align-items: center;
}

@media (max-width: 768px) {
  .hero-inner {
    gap: 3em;
    flex-flow: column;
  }
}

/* 1/3 text, 2/3 image. The two bases plus the 4% gap total 100%. */
.hero-copy {
  gap: 1.5em;
  flex: 1 1 45%;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

@media (max-width: 428px) {
  .hero-copy {
    align-items: stretch;
  }
}

.hero-title {
  color: #fff;
  font-size: 4em;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  line-height: 118%;
  letter-spacing: -2px;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5em;
    letter-spacing: -1px;
  }
}

.hero-lede {
  color: #fff;
  font-size: 1.3em;
  max-width: 600px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

.hero-media {
  flex: 1 1 55%;
}

/* The homepage hero art (hero-both-9.24.webp) is a transparent cut-out, so by default a
   hero image gets no shadow or radius — both would apply to the bounding box
   rather than the artwork, drawing a rectangle around empty space. */
.hero-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Full-bleed photo hero (About Us, Careers). The page supplies the image as
   background-image in its inline <style>; the image has its navy fade baked
   in on the left, so the copy sits straight on it with no overlay.
   Desktop anchors left-top: the dark side stays behind the text and cover's
   vertical crop comes off the bottom, keeping the subject's head in frame.
   Mobile re-centres to keep the subject in view. The solid colour shows while
   the image loads. Must stay AFTER .hero, whose background shorthand would
   otherwise reset position/size. */
.hero-photo {
  display: flex;
  min-height: 720px;
  align-items: center;
  background-color: #091a2d;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left top;
}

.hero-photo .hero-inner {
  width: 100%;
}

/* max-width, not a flex-basis: below 768px .hero-inner stacks into a column,
   where a basis would become a height. */
.hero-photo .hero-copy {
  flex: 0 1 auto;
  max-width: 620px;
}

@media (max-width: 768px) {
  .hero-photo {
    min-height: 560px;
    background-position: center center;
  }
}

/* =========================================================================
   SECTION 3 — MISSION STATEMENT
   ========================================================================= */

.mission {
  width: 100%;
  padding: 25vh 5%;
  overflow: hidden;
  position: relative;
  /* BOTH ends are pre-composited opaque solids. #1e8bf9 (blue @a0.95 over
     white) opens the section so it overlaps the hero; #4da4fa (blue @a0.75
     over white) closes it. The closing stop used to be the translucent
     rgba(...,0.75): identical in colour, but a translucent edge meeting the
     band's opaque #4da4fa top left a faint 1px line of mismatch on some
     screens. Opaque-to-opaque removes it. */
  background: linear-gradient(180deg, #1e8bf9, #1285f9, #4da4fa);
}

@media (max-width: 768px) {
  .mission {
    padding: 120px 5%;
  }
}

.mission-inner {
  margin: 0 auto;
  z-index: 1;
  position: relative;
  max-width: 1200px;
  text-align: center;
}

.mission-text {
  color: #fff;
  font-size: 2.75em;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  line-height: 135%;
  letter-spacing: -1px;
}

@media (max-width: 768px) {
  .mission-text {
    font-size: 1.85em;
    letter-spacing: -0.5px;
  }
}

/* =========================================================================
   SECTION 4 — WHY QI PATH
   ========================================================================= */

/* "Why QI Path" and "What We Provide" share ONE gradient spanning both
   sections, so it lives on the wrapper and the two sections stay
   transparent. Do not give either section its own background.
   NOTE: the homepage overrides this (and .hero / .mission) with its slow
   top-of-page ramp — see the HOMEPAGE GRADIENT FLOW block in index.html. */
.band {
  width: 100%;
  /* First stop is #4da4fa, the pre-composited value of blue @a0.75 over the
     white body — see the note on .mission. */
  background: linear-gradient(180deg, #4da4fa, #1285f9, #081a2e);
}

/* =========================================================================
   STORY SECTIONS — used by About Us and Careers
   ========================================================================= */

/* Those pages follow the same shape: a watermark statement and two
   two-column story sections riding ONE gradient carried by a page-scoped
   wrapper (.about-band / .careers-band — the stops differ per
   page, so they stay inline). The sections themselves must stay transparent. */

/* Drops the gradient .mission paints for the homepage, where
   that section owns its own background. The position/overflow on the base
   rule must survive — the Q watermark overflows the document without it. */
.mission-plain {
  background: none;
}

/* The story sections take the same generous vertical rhythm as the watermark
   statement above them, not the tighter .section-pad padding. */
.story {
  width: 100%;
  /* Eyebrow story sections sit tighter than the 25vh watermark statement. */
  padding: 20vh 5%;
}

@media (max-width: 768px) {
  .story {
    padding: 120px 5%;
  }
}

/* Full-bleed photo band that breaks up the story sections from what follows
   (the closing CTA on About, the opportunities grid on Careers). Opaque, so
   it needs no gradient matching; -1px pulls the next section up to cover the
   fractional bottom row, same seam trick as the gradient bands. */
.break-band {
  width: 100%;
  margin-bottom: -1px;
  line-height: 0;
}

.break-img {
  display: block;
  width: 100%;
  height: 48vh;
  min-height: 320px;
  max-height: 620px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .break-img {
    height: 300px;
    min-height: 0;
  }
}

/* Two-column story section: heading (with eyebrow) beside body copy. The
   heading block is first in the DOM in BOTH the normal and flipped variants —
   the flip is purely visual — so the mobile stack always leads with the
   heading. */
.split {
  gap: 4%;
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-flow: row;
  align-items: flex-start;
}

/* Heading sits on the right. Re-declared inside the 768px query below rather
   than left to source order. */
.split-flip {
  flex-flow: row-reverse;
}

.split-head {
  gap: 0.75em;
  flex: 1 1 32%;
  min-width: 0;
  display: flex;
  flex-flow: column;
}

.split-body {
  gap: 1em;
  flex: 1 1 64%;
  min-width: 0;
  display: flex;
  flex-flow: column;
}

/* Not .muted: that rule carries a `top: 1em` nudge for the
   homepage's baseline-aligned why-head, which is wrong for a stacked pair of
   paragraphs. */
.split-body p {
  color: #fff;
  margin: 0;
  font-size: 1.75em;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 150%;
}

@media (max-width: 768px) {
  /* At 1.75em the body copy lands within a couple of px of the 2em h2 once
     the root font-size steps down, which flattens the hierarchy. */
  .split-body p {
    font-size: 1.35em;
  }

  .split,
  .split-flip {
    gap: 1.5em;
    flex-flow: column;
  }
}

.why-head {
  gap: 4%;
  display: flex;
  flex-flow: row;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .why-head {
    gap: 1.5em;
    flex-flow: column;
    align-items: flex-start;
  }
}

.why-head-left {
  gap: 0.75em;
  flex: 1 1 52%;
  display: flex;
  flex-flow: column;
}

.why-head-right {
  flex: 1 1 44%;
}

.pillars {
  gap: 2.5em;
  display: grid;
  margin-top: 4em;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .pillars {
    gap: 2em;
    margin-top: 3em;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 428px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

.pillar {
  gap: 0.75em;
  display: flex;
  flex-flow: column;
}

/* Brand gold. These headings sit directly under the Icon-*.svg set, which ships
   in #febf04 — close enough to read as the same colour at icon scale. If the
   icons are ever re-exported far from this hue, revisit whether the headings
   should track them instead. */
.pillar-title {
  color: #f1c40f;
  font-size: 1.5em;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  line-height: 130%;
}

.pillar-text {
  color: #fff;
  font-size: 1em;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 155%;
}

/* =========================================================================
   SECTION 8 — CLOSING CTA
   ========================================================================= */

.cta {
  width: 100%;
  padding: 160px 5%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #081a2e, #1285f9, rgba(18, 133, 249, 0.3));
}

@media (max-width: 768px) {
  .cta {
    padding: 100px 5%;
  }
}

.cta-inner {
  max-width: 1200px;
  gap: 2em;
  margin: 0 auto;
  display: flex;
  z-index: 1;
  position: relative;
  flex-flow: column;
  align-items: flex-start;
}

@media (max-width: 428px) {
  .cta-inner {
    align-items: stretch;
  }
}

.cta-title {
  color: #fff;
  font-size: 3.5em;
  max-width: 800px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: -1.5px;
}

@media (max-width: 768px) {
  .cta-title {
    font-size: 2.25em;
    letter-spacing: -1px;
  }
}

/* =========================================================================
   FOOTER — slim copyright banner. The sticky header carries navigation on
   this page, so the full link footer used by the other pages is dropped.
   ========================================================================= */

.site-footer {
  color: #666;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  padding: 0.5em;
  font-size: 1em;
  align-items: center;
  font-family: 'Inter', sans-serif;
  justify-content: flex-end;
  background-color: rgba(18, 133, 249, 0.3);
}

/* =========================================================================
   SCROLL REVEAL
   Driven by qip-reveal.js. Opt an element in with
   data-reveal="left|right|up|fade"; it starts hidden and offset, and gets
   .is-revealed the first time it scrolls into view.

   The hidden state is gated behind .reveal-on, which the script adds to
   <html> only after confirming it can both observe and animate. A visitor
   with JS off, without IntersectionObserver, or with prefers-reduced-motion
   set never matches these selectors and simply sees the finished page — the
   one failure mode worth engineering against here is content stuck at
   opacity 0 with nothing left to un-hide it.
   ========================================================================= */

.reveal-on [data-reveal] {
  opacity: 0;
  transition:
    opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-on [data-reveal='left'] {
  transform: translateX(-40px);
}

.reveal-on [data-reveal='right'] {
  transform: translateX(40px);
}

.reveal-on [data-reveal='up'] {
  transform: translateY(40px);
}

/* data-reveal="fade" matches no transform rule, so it fades in place. */

.reveal-on [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Sideways reveals become vertical below the desktop breakpoint, for two
   reasons. The sections hold their content in with 5% padding, which drops
   under the 40px offset around 800px wide and would let a revealing element
   push a horizontal scrollbar. And once a row has stacked into one column
   there is no longer a left or right for anything to arrive from. */
@media (max-width: 1024px) {
  .reveal-on [data-reveal='left'],
  .reveal-on [data-reveal='right'] {
    transform: translateY(30px);
  }
}

/* Stagger. Children of a .reveal-stagger container step 0.24s apart. Each
   child is still observed on its own, so the delay counts from the moment
   that child enters view, not the container.
   Kept proportional to the 1.4s duration above — against a fade that long, a
   step much shorter than this stops reading as a stagger at all. */
.reveal-on .reveal-stagger > [data-reveal]:nth-child(2) {
  transition-delay: 0.24s;
}

.reveal-on .reveal-stagger > [data-reveal]:nth-child(3) {
  transition-delay: 0.48s;
}

.reveal-on .reveal-stagger > [data-reveal]:nth-child(4) {
  transition-delay: 0.72s;
}

/* Stacked, the columns already arrive one at a time, so a delay on top of
   that reads as lag rather than rhythm. */
/* :nth-child(n) matches every child, but it's there for specificity: the
   per-item delay rules above carry :nth-child(), so a plain
   `.reveal-stagger > [data-reveal]` reset lost to them and never applied. */
@media (max-width: 768px) {
  .reveal-on .reveal-stagger > [data-reveal]:nth-child(n) {
    transition-delay: 0s;
  }
}

/* Nav interaction states — previously inline in each page's <body> after the
   nav markup. The nav <script> that toggles these classes stays inline. */
#navbar {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

#navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.active-link:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

#nav-links.is-active {
  visibility: visible;
  opacity: 1;
  max-height: 100vh;
}

#navbar.is-active {
  background-color: #fff;
  height: auto;
}

#hamburger.is-active {
  transition: all 0.3s ease-in-out;
  transition-delay: 0.6s;
  transform: translateX(12px) rotate(45deg);
}

#hamburger.is-active .nav-line:nth-child(2) {
  width: 0px;
}

#hamburger.is-active .nav-line:nth-child(1),
#hamburger.is-active .nav-line:nth-child(3) {
  transition-delay: 0.3s;
}

#hamburger.is-active .nav-line:nth-child(1) {
  transform: translateY(15px);
}

#hamburger.is-active .nav-line:nth-child(3) {
  transform: translateY(-5px) rotate(90deg);
}