/* ============================================================
   Future Advisory — homepage build (shell)
   Consumes the design system (styles.css tokens + fonts). Adds only
   build-level layout, the exact homepage type scale, button lift
   micro-interaction, and scroll-reveal base styles.
   ============================================================ */

/* ---- Layout ---- */
.fa-page { background: var(--surface-page); color: var(--text-primary); }

/* 1920px design: 1400 content column + 260 gutters. Gutters collapse
   gracefully on narrower viewports; at 1920 the math yields exactly 1400. */
/* Shared container — the ONE horizontal-padding system for the whole page
   (header, every section, footer). Content caps at 1400px and centres; on
   large screens the leftover becomes side margins automatically. */
.fa-container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 40px;          /* desktop default (< 1440 gutters) */
  box-sizing: border-box;
}
@media (max-width: 1023px) { .fa-container { padding-inline: 24px; } } /* tablet */
@media (max-width: 767px)  { .fa-container { padding-inline: 16px; } } /* mobile */

/* Section vertical rhythm — 120px top padding before content. */
.fa-section { padding-top: 120px; }
.fa-section:last-of-type { padding-bottom: 120px; }

/* ---- Type scale (homepage spec) ---- */
.fa-eyebrow {
  font: var(--fw-halbfett) 16px/1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fa-purple);
}
.fa-h1 {
  margin: 0;
  font: var(--fw-halbfett) 60px/0.9 var(--font-display);
  letter-spacing: -1.8px;
  color: var(--fa-ink);
}
.fa-h2 {
  margin: 0;
  font: var(--fw-halbfett) 53px/1.05 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--fa-ink);
}
.fa-body {
  font: var(--fw-kraftig) 20px/1.4 var(--font-body);
  letter-spacing: -0.4px;
  color: var(--fa-ink);
}

/* ---- Header ---- */
/* Fully transparent at all times — content shows through. Colour of the
   logo, nav and CTA adapts to the section behind it via [data-theme]. */
.fa-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 80px;
  background: transparent;
}
/* Light sections: dark nav ink (default). Dark sections: white nav ink.
   MenuItem colours its text with var(--text-primary), so overriding that
   custom property here recolours the whole nav; the transition on the
   links animates the change smoothly. */
.fa-header[data-theme="light"] { --text-primary: var(--fa-ink); }
.fa-header[data-theme="dark"]  { --text-primary: var(--fa-white); }
.fa-header .fa-nav a {
  transition: color 250ms ease, opacity 200ms var(--ease-standard) !important;
}
/* Bigger dropdown carets — was 8px, now noticeably larger and centred. */
.fa-header .fa-nav a svg { width: 20px; height: 20px; margin-top: 0; }

/* Logo: two inline vector SVG cuts (green/dark + yellow/white) stacked and
   crossfaded by theme via opacity — inline SVG stays crisp at any DPR, and an
   opacity transition recolors reliably (transitioning `fill`/vars did not). */
.fa-logo { position: relative; display: inline-flex; align-items: center; height: 48px; }
.fa-logo__cut { display: inline-flex; align-items: center; height: 48px; transition: opacity 250ms ease; }
.fa-logo__cut svg { display: block; height: 48px; width: auto; }
.fa-logo__cut--dark { position: absolute; left: 0; top: 0; }
.fa-header[data-theme="light"] .fa-logo__cut--light { opacity: 1; }
.fa-header[data-theme="light"] .fa-logo__cut--dark  { opacity: 0; }
.fa-header[data-theme="dark"]  .fa-logo__cut--light { opacity: 0; }
.fa-header[data-theme="dark"]  .fa-logo__cut--dark  { opacity: 1; }
/* Header logo triangle is mint on EVERY section: recolour the dark cut's yellow
   triangle to mint IN THE HEADER ONLY (the shared logo used by the footer /
   pricing table is left untouched). A CSS fill overrides the inline attribute. */
.fa-header .fa-logo__cut--dark svg path[fill="#FBEB4F"] { fill: #50DDA4; }
/* Non-blending logo copy — sits OUTSIDE the blended header (see the blend block
   below, where it is shown and the in-header logo is hidden). Positioned exactly
   over the original logo so the swap is seamless. Wordmark colour follows the
   section theme via the existing scroll-listener (which sets data-theme). */
.fa-header__logo-cover {
  position: fixed; top: 0; left: 40px; z-index: 101;
  height: 80px; display: none; align-items: center;
  color: #050E1E;                 /* navy wordmark — light sections */
  text-decoration: none;
  transition: color 0.25s ease;   /* smooth recolour, no flicker */
}
.fa-header__logo-cover[data-theme="dark"] { color: #FFFFFF; }   /* white — dark / navy / purple */
.fa-header__logo-cover svg { display: block; height: 48px; width: auto; }
/* Footer lockup — the provided white SVG, sized to the 195×48 viewBox height. */
.fa-logo--footer { height: 52px; }
.fa-logo--footer svg { display: block; height: 52px; width: auto; }
/* Full-width header: spans the whole viewport (NOT the 1400px .fa-container).
   Logo pinned 40px from the left edge; the "Book a call" button sits flush
   against the right edge (0px). */
.fa-header__inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-left: 40px;
  padding-right: 0;
}
.fa-nav { display: flex; align-items: center; gap: 20px; }

/* ---- White overlay copy, masked to the hero-tile rectangles behind the header ----
   Pinned over the live header; only the pixels the JS mask reveals are painted,
   so glyphs sitting over a photo turn white while the rest stay ink. Inert: it
   never receives pointer events, and its Book-a-call button is hidden (a solid
   button is already legible over any backdrop). */
.fa-header__inner--overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.fa-header__inner--overlay .fa-btn-lift { visibility: hidden; }

/* ---- Blend-mode fallback (desktop ≥1200) ----
   Sections that clash with the header opt in with data-header-blend="true"; the
   existing scroll-listener then adds .header--blend. mix-blend-mode MUST sit on
   the fixed .fa-header itself — content inside the fixed header is isolated by
   its own stacking context and would blend against the transparent header box,
   not the page. So the whole header (logo + nav) difference-blends against
   whatever scrolls behind it, staying legible on navy / purple / white alike. */
@media (min-width: 1200px) {
  .fa-header.header--blend { mix-blend-mode: difference; }
  /* difference inverts the backdrop, so the blended source must be LIGHT to read
     on ANY background. Force the header's white rendering under blend — nav via
     --text-primary, logo via its light-on-dark cut — regardless of the section's
     light/dark theme. The scroll-listener theme logic is untouched; this only
     governs how the blended layer paints. On the dark blend sections the content
     is already white, so it's a no-op there; on the light ones (hero, proof) it
     is what keeps the inverted nav legible instead of washing out on white. */
  .fa-header.header--blend { --text-primary: var(--fa-white); }
  .fa-header.header--blend .fa-logo__cut--light { opacity: 0; }
  .fa-header.header--blend .fa-logo__cut--dark  { opacity: 1; }
  /* Pull the logo OUT of the blend: hide the in-header copy (kept only for
     layout) and show the fixed, non-blending .fa-header__logo-cover in its
     place. Only the logo is exempt — the nav keeps blending. */
  .fa-header.header--blend .fa-logo { visibility: hidden; }
  .fa-header__logo-cover.is-on { display: flex; }
  /* The solid mint "Book a call" button must never invert. It stays in the flow
     (so nav keeps its position) but gets covered by this non-blended copy, which
     lives OUTSIDE .fa-header. Visual only — clicks fall through to the real one. */
  .fa-header__cta-cover {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 101;              /* above the header (z-index 100) */
    height: 80px;
    display: none;
    align-items: center;
    pointer-events: none;      /* let clicks/hover reach the real button below */
  }
  .fa-header__cta-cover.is-on { display: flex; }
  .fa-header__cta-cover .fa-btn { background: #50DDA4 !important; color: #050E1E !important; }
}
/* Mobile/tablet: no blend, cover never shows — header unchanged. */
@media (max-width: 1199px) { .fa-header__cta-cover, .fa-header__logo-cover { display: none !important; } }

/* ---- Button hover — no lift; smooth colour change, theme-aware ---- */
/* .fa-btn-lift is legacy (kept on call sites); it must NOT move the button. */
.fa-btn-lift, .fa-btn {
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, opacity 200ms ease !important;
}
.fa-btn-lift:hover, .fa-btn:hover { transform: none !important; }

/* Primary (mint default) — hover recolours by the section it sits in.
   !important overrides the component's inline base background/colour. */
.fa-btn--primary:hover { background: #FBEB4F !important; color: #050E1E !important; opacity: 1 !important; } /* default = light */
[data-header-theme="light"] .fa-btn--primary:hover { background: #FBEB4F !important; color: #050E1E !important; }
[data-header-theme="dark"]  .fa-btn--primary:hover { background: #5939F5 !important; color: #FBEB4F !important; }

/* Outline buttons fill to the opposite contrast (variant already encodes theme). */
.fa-btn--outline:hover { background: #050E1E !important; color: #FFFFFF !important; }
.fa-btn--outline-on-dark:hover { background: #FFFFFF !important; color: #050E1E !important; }

/* Yellow buttons: no explicit colour rule in the brief — keep visible with a
   subtle dim (never a lift, never invisible on the purple final-CTA panel). */
.fa-btn--yellow:hover { opacity: 0.88 !important; }

/* ---- Footer ---- */
.fa-footer { background: var(--fa-ink); color: var(--fa-white); padding: 40px 0 40px; overflow: hidden; }
.fa-footer a { color: var(--fa-white); text-decoration: none; }
.fa-divider { height: 1px; background: var(--fa-white-10); border: 0; margin: 0; }
.fa-footer .fa-divider { background: rgba(255,255,255,0.1); }
.fa-foot-link { transition: opacity 150ms ease; }
.fa-foot-link:hover { opacity: 0.6; }
.fa-footer__wordmark {
  font: var(--fw-halbfett) clamp(64px, 15.6vw, 300px)/0.8 var(--font-display);
  letter-spacing: -0.05em;
  color: var(--fa-white);
  white-space: nowrap;
  line-height: 0.8;
}
.fa-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font: var(--fw-buch) 16px/1.4 var(--font-body);
  color: var(--fa-white);
}
.fa-input::placeholder { color: var(--fa-white-60); }

/* ---- Section placeholders (shell scaffolding — replaced in later steps) ---- */
.fa-placeholder {
  border: 1px dashed var(--divider-on-light);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fa-ink);
  opacity: 0.4;
  font: var(--fw-kraftig) 14px/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Hero ---- */
.fa-hero {
  position: relative;
  min-height: 100vh;      /* fallback for browsers without svh */
  min-height: 100svh;     /* always fill the viewport; grows if content is taller */
  overflow: hidden;
  contain: paint;         /* clip composited tiles too — orbit sets will-change:transform,
                             which lifts tiles to their own layer that plain overflow:hidden
                             fails to clip in Chromium (they bled over the trust bar). */
  display: grid;
  place-items: center;
}
/* Full-width orbit stage (1000px tall, centred). Tile CENTRES are computed by JS
   as a function of viewport width — they fan outward on wide screens and stay
   clear of the centred text; the hero's overflow:hidden clips any bleed. */
.fa-hero__stage {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1000px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}
.fa-hero__tile {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 0;               /* sharp corners — match Figma */
  opacity: 0;                     /* JS fades each tile in on load */
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fa-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* fill the square, crop nicely */
  display: block;
  pointer-events: none;
}
.fa-hero__inner { position: relative; z-index: 2; }
.fa-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin: 0 auto;
}
.fa-hero__text .fa-h1,
.fa-hero__text .fa-body { margin-left: auto; margin-right: auto; }
.fa-hero__text .fa-body { margin-top: 0; }
.fa-hero__cta { display: flex; gap: 12px; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) { .fa-hero__tile { opacity: 1; } }

/* Tighter hero on smaller screens — the fixed 1400-wide orbit largely clips
   out, so keep the centred text framed without a tall empty box. */
/* Hero fills the viewport at every width (min-height:100svh on .fa-hero above);
   no fixed px height, so it never collapses shorter than the screen. */

/* ≤768: stack the hero — text block on top (clean, nothing behind it), then the
   six image tiles as a scroll-orbited ring BELOW, in their own zone. The stage
   becomes an in-flow block; JS sizes its height and places/animates the ring. */
@media (max-width: 1199px) {
  .fa-hero {
    display: block;
    height: 100vh;           /* fallback */
    height: 100svh;          /* exactly one screen — the ring's bleed is clipped, never adds height */
    padding-top: 104px;      /* tablet: 72px fixed-header + 32px above eyebrow (mobile overridden to 92px below) */
    overflow: hidden;
  }
  .fa-hero__inner { position: relative; z-index: 2; width: 100%; }
  /* stage fills the hero and is ABSOLUTE, so the ring never contributes to the
     hero's height; JS centres the ring below the text and the bottom bleed clips. */
  .fa-hero__stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    z-index: 1;
  }
}

/* ---- Scroll reveal (see reveal.js) ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fa-btn-lift:hover { transform: none; }
}

/* ---- Trust bar (full-width purple band) ---- */
.fa-trustbar {
  background: var(--fa-purple);   /* #5939F5, spans full viewport width */
  padding: 12px 0;
}
.fa-trustbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.fa-trustbar__item {
  font: var(--fw-halbfett) 16px/1 var(--font-body);   /* Epilogue SemiBold → Plus Jakarta Sans (DS substitution) */
  letter-spacing: -0.16px;
  color: var(--fa-yellow);        /* #FBEB4F */
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .fa-trustbar__row { justify-content: center; }
}

/* ---- Social proof / logos (dark section) ---- */
.fa-social {
  background: var(--fa-ink);       /* #050E1E */
  padding: 120px 0;
  box-sizing: border-box;
}
.fa-social__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.fa-social__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;                     /* rating sits ~32px below the heading */
  text-align: center;
}
.fa-social__title {
  margin: 0;
  max-width: 1400px;             /* full content width → wraps to 2 lines like Figma */
  font: var(--fw-halbfett) 48px/1.1 var(--font-display);
  letter-spacing: -1.44px;
  color: var(--fa-white);
}
.fa-social__rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: var(--fw-kraftig) 18px/1 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--fa-white);
}
.fa-social__score { font-weight: var(--fw-halbfett); }
.fa-social__muted { opacity: 0.6; }
.fa-social__rating .fa-star { display: block; flex-shrink: 0; }
.fa-social__cta { display: flex; justify-content: center; }

/* Logo marquee — continuous left drift; hover pauses the whole track and
   lifts the hovered logo to full opacity. transform/opacity only. */
.fa-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.fa-marquee__track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: fa-marquee-scroll var(--fa-marquee-dur, 40s) linear infinite;
  animation-play-state: paused;          /* stays paused until the marquee reveals (step 2) */
  will-change: transform;
}
.fa-marquee.is-visible .fa-marquee__track { animation-play-state: running; }
.fa-marquee.is-visible:hover .fa-marquee__track { animation-play-state: paused; }
@keyframes fa-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--fa-marquee-shift, -50%)); }
}
.fa-logo-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  opacity: 0.6;                  /* default */
  transition: opacity 200ms ease;
}
.fa-marquee__track .fa-logo-item:hover { opacity: 1; }
/* Each logo is masked from its PNG alpha and filled solid white, so mixed
   source colours all render as uniform white on the dark ground. */
.fa-logo-item__mark {
  display: block;
  background-color: var(--fa-white);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

@media (prefers-reduced-motion: reduce) {
  .fa-marquee__track { animation: none; }
}

/* ---- Our services (bento) ---- */
.fa-services { background: #F6F6F6; padding: 120px 0; }
.fa-services__wrap { display: flex; flex-direction: column; gap: 60px; }
.fa-services__title {
  margin: 0;
  font: var(--fw-halbfett) 48px/1.1 var(--font-display);
  letter-spacing: -1.44px;
  color: var(--fa-ink);
}
.fa-bento { display: flex; flex-direction: column; gap: 20px; }
.fa-bento__row { display: flex; gap: 20px; align-items: stretch; }
/* Row 1: A ~808 + B ~572 (proportional so it scales); Row 2: three equal. */
.fa-bento__row--1 > .fa-svc-card:first-child { flex: 808 1 0; }
.fa-bento__row--1 > .fa-svc-card:last-child  { flex: 572 1 0; }
.fa-bento__row--2 > .fa-svc-card { flex: 1 1 0; }

.fa-svc-card {
  position: relative;
  min-width: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  min-height: 520px;
}
.fa-bento__row--2 > .fa-svc-card { min-height: 480px; }
/* Black border on hover — removed per brief. */

.fa-svc-card__illo { width: 300px; height: 300px; max-width: 100%; overflow: hidden; flex-shrink: 0; }
/* Single image per card; JS swaps src static ↔ GIF, so only one image ever shows. */
.fa-svc-illo {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.fa-svc-card__title {
  margin: 0;
  font: var(--fw-kraftig) 28px/1.1 var(--font-display);
  letter-spacing: -0.84px;
  color: var(--fa-ink);
}
.fa-svc-card__desc {
  margin: 0;
  font: 500 16px/1.4 "Epilogue", var(--font-body);
  letter-spacing: -0.16px;
  color: var(--fa-ink);
  max-width: 620px;
}
.fa-svc-learn { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.fa-svc-learn__label {
  font: var(--fw-halbfett) 16px/1 var(--font-display);
  letter-spacing: -0.16px;
  color: var(--fa-ink);
}
.fa-svc-learn__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px;
  border-radius: 9999px;
  color: var(--fa-ink);
  background: transparent;
  transition: background 200ms ease, color 200ms ease;
}
.fa-svc-learn__icon { display: block; transition: transform 200ms ease; }
.fa-svc-card:hover .fa-svc-learn__btn { background: var(--fa-ink); color: var(--fa-white); }
/* No nudge in the circle — keep the arrow perfectly centered (flex centering + equal 8px padding above). */

.fa-services__cta { display: flex; justify-content: center; }

/* Mascot: single <img> per card, src swapped static ↔ GIF on hover (JS). */
@media (max-width: 900px) {
  .fa-bento__row { flex-direction: column; }
  .fa-svc-card, .fa-bento__row--2 > .fa-svc-card { min-height: 0; }
  .fa-services__title { font-size: 34px; }
}
@media (max-width: 767px) {
  .fa-social__title { font-size: 30px; }
}

/* ---- Problem & pricing (flat dark section) ---- */
.fa-pp {
  background: #050E1E;   /* flat near-black — no stripes */
  padding: 120px 0;
}
.fa-pp__wrap {
  display: flex;
  flex-direction: column;
  gap: 120px;
  align-items: center;
}
.fa-pp__title {
  margin: 0;
  font: var(--fw-halbfett) 48px/1.1 var(--font-display);
  letter-spacing: -1.44px;
  color: var(--fa-white);
  text-align: center;
  text-wrap: balance;
}
.fa-pp__table { width: 100%; display: flex; flex-direction: column; }
.fa-pp__colhead {
  font: 500 20px/1 var(--font-body);   /* Epilogue Medium */
  letter-spacing: -0.03em;
  color: var(--fa-white);
  text-align: center;
}

/* Pricing teaser — flat yellow, no stripes */
.fa-pp__pricing {
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
  background: #FBEB4F;
  padding: 60px 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.fa-pp__pricing-title {
  margin: 0;
  font: var(--fw-halbfett) 40px/1.1 var(--font-display);
  color: #050E1E;
  text-align: center;
}
.fa-pp__price {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  padding: 30px 0;
}
.fa-pp__price-hl {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 537px;
  max-width: 100%;
  color: #FDF68F;               /* lighter-yellow highlighter stroke */
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}
.fa-pp__price-hl svg { display: block; width: 100%; height: auto; }
.fa-pp__price-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 600;             /* Epilogue SemiBold */
  color: #050E1E;
  letter-spacing: -0.05em;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.fa-pp__from { font-size: 20px; }
.fa-pp__amt  { font-size: 80px; line-height: 1; }
.fa-pp__per  { font-size: 20px; }
.fa-pp__price-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  background: transparent;
  box-shadow: inset 0 0 0 1px #050E1E;   /* 1px ink, square corners */
  border: 0;
  border-radius: 0;
  color: #050E1E;
  font: var(--fw-halbfett) 18px/1 var(--font-display);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.fa-pp__price-btn:hover {
  background: #050E1E;
  color: #FFFFFF;
}

@media (max-width: 900px) {
  .fa-pp { padding: 72px 0; }
  .fa-pp__wrap { gap: 72px; }
  .fa-pp__title { font-size: 32px; letter-spacing: -0.96px; }
  .fa-pp__pricing { padding: 48px 24px; }
  .fa-pp__amt { font-size: 56px; }
}

/* ---- Industries (flat #F2F2F2, no stripes) ---- */
.fa-ind { background: #F2F2F2; padding: 120px 0; }
.fa-ind__wrap { display: flex; flex-direction: column; gap: 60px; }
.fa-ind__title {
  margin: 0;
  font: var(--fw-halbfett) 48px/1.1 var(--font-display);
  letter-spacing: -1.44px;
  color: var(--fa-ink);
}
.fa-ind__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.fa-ind__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--fa-white);
}
.fa-ind__head { display: flex; gap: 40px; padding: 32px; align-items: flex-start; }
.fa-ind__ctitle {
  margin: 0;
  width: 250px;
  flex-shrink: 0;
  font: var(--fw-halbfett) 28px/1.1 var(--font-display);
  letter-spacing: -0.56px;
  color: var(--fa-white);
}
.fa-ind__col { display: flex; flex-direction: column; gap: 24px; flex: 1; min-width: 0; }
.fa-ind__desc {
  margin: 0;
  font: 500 16px/1.4 "Epilogue", var(--font-body);
  letter-spacing: -0.16px;
  color: var(--fa-white);
}
.fa-ind__learn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 16px/1 "Epilogue", var(--font-body);
  letter-spacing: -0.16px;
  color: var(--fa-white);
  text-decoration: none;
  align-self: flex-start;
}
.fa-ind__learn-icon { display: block; }
/* Arrow wrapped in a circle that fills WHITE on card hover (dark arrow inside),
   so it reads on the purple/near-black card. Same size/centering as the
   service-card chevron. */
.fa-ind__learn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px;
  border-radius: 9999px;
  color: var(--fa-white);
  background: transparent;
  transition: background 200ms ease, color 200ms ease;
}
.fa-ind__card:hover .fa-ind__learn-btn { background: var(--fa-white); color: var(--fa-ink); }
.fa-ind__media {
  width: 100%;
  margin-top: auto;
}
.fa-ind__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* New-card placeholder media (client photo drops in later; the ~300px band
   height comes from the existing image's 2070×900 aspect). */
.fa-ind__ph {
  width: 100%;
  aspect-ratio: 2070 / 900;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: repeating-linear-gradient(45deg, rgba(5,14,30,0.05) 0 14px, rgba(5,14,30,0.10) 14px 28px);
  outline: 1px dashed rgba(5,14,30,0.35);
  outline-offset: -1px;
}
.fa-ind__ph-label {
  max-width: 260px;
  font: var(--fw-kraftig) 14px/1.35 var(--font-body);
  letter-spacing: -0.01em;
  color: rgba(5,14,30,0.6);
}
/* Light-ground cards (mint / yellow) → ink text + icons instead of white. */
.fa-ind__card--ink,
.fa-ind__card--ink .fa-ind__ctitle,
.fa-ind__card--ink .fa-ind__desc,
.fa-ind__card--ink .fa-ind__learn,
.fa-ind__card--ink .fa-ind__learn-btn { color: var(--fa-ink); }
.fa-ind__card--ink:hover .fa-ind__learn-btn { background: var(--fa-ink); color: var(--fa-white); }
/* "View all industries" button row */
.fa-ind__cta { display: flex; justify-content: center; }

@media (max-width: 900px) {
  .fa-ind { padding: 72px 0; }
  .fa-ind__title { font-size: 32px; letter-spacing: -0.96px; }
  .fa-ind__row { grid-template-columns: 1fr; }
  .fa-ind__head { flex-direction: column; gap: 16px; }
  .fa-ind__ctitle { width: auto; }
}

/* ---- Proof / case studies (white) ---- */
.fa-proof { background: var(--fa-white); padding: 120px 0; }
.fa-proof__wrap { display: flex; flex-direction: column; gap: 60px; }
.fa-proof__title {
  margin: 0;
  text-align: center;
  font: var(--fw-halbfett) 48px/1.1 var(--font-display);
  letter-spacing: -1.44px;
  color: var(--fa-ink);
}

/* Featured testimonial band */
.fa-proof__feature {
  display: flex;
  gap: 80px;
  align-items: center;
  background: #50DDA4;
  padding: 40px;
  box-sizing: border-box;
}
.fa-proof__content {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.fa-proof__eyebrow {
  margin: 0;
  font: 500 16px/1.4 var(--font-display);
  letter-spacing: -0.16px;
  color: #5939F5;
}
.fa-proof__lower { display: flex; flex-direction: column; gap: 32px; }
.fa-proof__quote {
  margin: 0;
  font: 400 24px/1.4 var(--font-display);
  letter-spacing: -0.24px;
  color: var(--fa-ink);
}
.fa-proof__attrib { display: flex; align-items: center; gap: 20px; }
.fa-proof__clogo { display: block; height: 42px; width: auto; object-fit: contain; }
.fa-proof__divider { width: 1px; height: 40px; background: var(--fa-ink); opacity: 0.25; flex-shrink: 0; }
.fa-proof__name-block { display: flex; flex-direction: column; }
.fa-proof__name { font: 500 20px/1.3 "Epilogue", var(--font-body); color: var(--fa-ink); }
.fa-proof__role { font: 500 14px/1.3 "Epilogue", var(--font-body); color: var(--fa-ink); }
.fa-proof__nav { display: flex; gap: 10px; }
.fa-proof__navbtn {
  width: 36px;
  height: 36px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fa-ink);
  color: var(--fa-white);
  border: none;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.fa-proof__navbtn:disabled { opacity: 0.35; cursor: default; }
.fa-proof__navbtn svg { display: block; }
.fa-proof__media {
  position: relative;
  width: 532px;
  height: 400px;
  flex-shrink: 0;
  overflow: hidden;
}
.fa-proof__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fa-proof__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: #FBEB4F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}
.fa-proof__play:hover { transform: translate(-50%, -50%) scale(1.06); background: #FBEB4F; }
.fa-proof__play svg { display: block; margin-left: 4px; }

/* Case-study cards */
.fa-proof__cards { display: flex; gap: 60px; align-items: stretch; }
.fa-proof__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-decoration: none;
}
.fa-proof__thumb { width: 100%; height: 300px; overflow: hidden; }
.fa-proof__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.fa-proof__card:hover .fa-proof__thumb img { transform: scale(1.04); }
.fa-proof__ctext { display: flex; flex-direction: column; gap: 20px; }
.fa-proof__ctitle {
  margin: 0;
  font: var(--fw-halbfett) 24px/1.4 var(--font-display);
  letter-spacing: -0.24px;
  color: var(--fa-ink);
}
.fa-proof__cdesc {
  margin: 0;
  font: 400 16px/1.4 "Epilogue", var(--font-body);
  letter-spacing: -0.16px;
  color: var(--fa-ink);
}
.fa-proof__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--fw-halbfett) 16px/1 var(--font-display);
  letter-spacing: -0.16px;
  color: var(--fa-ink);
}
/* Arrow wrapped in a circle that fills black on card hover — same as the
   service-card "Learn more" chevron. */
.fa-proof__cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px;
  border-radius: 9999px;
  color: var(--fa-ink);
  background: transparent;
  transition: background 200ms ease, color 200ms ease;
}
.fa-proof__cta-btn svg { display: block; }
.fa-proof__card:hover .fa-proof__cta-btn { background: var(--fa-ink); color: var(--fa-white); }

@media (max-width: 1023px) {
  .fa-proof__feature { flex-direction: column; align-items: stretch; gap: 40px; }
  .fa-proof__media { width: 100%; height: 320px; }
}
@media (max-width: 900px) {
  .fa-proof { padding: 72px 0; }
  .fa-proof__title { font-size: 32px; letter-spacing: -0.96px; }
  .fa-proof__cards { flex-direction: column; gap: 40px; }
}

/* ---- Final CTA (split: image cluster | text, purple #5939F5) ---- */
.fa-finalcta {
  background: #5939F5;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.fa-finalcta__half { flex: 0 0 50%; width: 50%; max-width: 50%; min-width: 0; box-sizing: border-box; position: relative; }

/* Left half — playful looping image cluster, fully contained in the 50% */
.fa-finalcta__left {
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 56px;
}
/* Fluid stage keeps the 760×800 Figma geometry as an aspect box; layers are
   positioned by percentage so the whole composition scales to fit the half. */
.fa-finalcta__cluster { position: relative; width: 100%; max-width: 600px; aspect-ratio: 760 / 800; }
.fa-finalcta__layer { position: absolute; opacity: 0; will-change: opacity; }
.fa-finalcta__layer img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Positions as % of the 760×800 stage (exact Figma coords ÷ stage size). */
.fa-finalcta__l1 { /* black block */
  left: 34.21%; top: 45.75%; width: 49.34%; height: 39%;
  background: #050E1E; border-radius: 4px; z-index: 1;
}
.fa-finalcta__l2 { /* yellow accent (Vector 138) */
  left: 61.84%; top: 18.75%; width: 19.74%; height: 28.875%; z-index: 2;
}
.fa-finalcta__l3 { /* large team photo (Subtract mask) */
  left: 39.08%; top: 15.125%; width: 48.16%; height: 66.125%; z-index: 3;
}
.fa-finalcta__l4 { /* small b&w photo */
  left: 46.05%; top: 48%; width: 44.74%; height: 28.375%; z-index: 4;
}

/* Infinite loop (4s): black → yellow → large → small pop in INSTANTLY,
   ~230ms apart; hold ~1.5s; all disappear together; repeat. Opacity only. */
@keyframes fa-cta-l1 { 0%,4.99%{opacity:0} 5%,62.5%{opacity:1} 62.51%,100%{opacity:0} }
@keyframes fa-cta-l2 { 0%,10.74%{opacity:0} 10.75%,62.5%{opacity:1} 62.51%,100%{opacity:0} }
@keyframes fa-cta-l3 { 0%,16.49%{opacity:0} 16.5%,62.5%{opacity:1} 62.51%,100%{opacity:0} }
@keyframes fa-cta-l4 { 0%,22.24%{opacity:0} 22.25%,62.5%{opacity:1} 62.51%,100%{opacity:0} }
.fa-finalcta__l1 { animation: fa-cta-l1 4s linear infinite; }
.fa-finalcta__l2 { animation: fa-cta-l2 4s linear infinite; }
.fa-finalcta__l3 { animation: fa-cta-l3 4s linear infinite; }
.fa-finalcta__l4 { animation: fa-cta-l4 4s linear infinite; }

/* Meet-our-team mint circle — fixed 188px, positioned by JS (transform set
   per animation frame) so its centre eases toward the cursor. Only opacity
   fades via CSS; the cluster loop keeps running behind it. */
.fa-finalcta__team {
  position: absolute; left: 0; top: 0;
  width: 188px; height: 188px; border-radius: 50%;
  background: #50DDA4; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  font: var(--fw-halbfett) 18px/1.1 var(--font-display); letter-spacing: -0.18px;
  color: #050E1E;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 6;
  transform: translate(-50%, -50%);
}
.fa-finalcta__team.is-active { opacity: 1; }

/* Right half — heading / subhead / button */
.fa-finalcta__right {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 24px;
  /* Left 80px from the divider stays; right edge aligns to the 1400px
     container's content edge (viewport-center + 660px), floored at the
     site's 40px desktop gutter on regular desktops. */
  padding: 0 max(40px, calc(50vw - 660px)) 0 80px;
}
.fa-finalcta__title {
  margin: 0;
  font: var(--fw-halbfett) 48px/1.1 var(--font-display);
  letter-spacing: -1.44px;
  color: var(--fa-white);
}
.fa-finalcta__sub {
  margin: 0;
  font: 400 16px/1.4 "Epilogue", var(--font-body);
  letter-spacing: -0.16px;
  color: var(--fa-white);
}
.fa-finalcta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 20px; border: 0; border-radius: 0; cursor: pointer;
  background: #FBEB4F; color: #050E1E;
  font: var(--fw-halbfett) 18px/1 var(--font-display); letter-spacing: -0.18px;
}

@media (prefers-reduced-motion: reduce) {
  .fa-finalcta__layer { opacity: 1 !important; animation: none !important; }
}
@media (max-width: 1023px) {
  .fa-finalcta__right { padding: 0 24px 0 80px; }   /* tablet: right 24px */
}
@media (max-width: 900px) {
  .fa-finalcta { flex-direction: column; min-height: 0; }
  .fa-finalcta__left { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.1); min-height: 480px; padding: 40px; }
  .fa-finalcta__right { padding: 72px 24px; }
  .fa-finalcta__title { font-size: 32px; letter-spacing: -0.96px; }
}
@media (max-width: 767px) {
  .fa-finalcta__right { padding: 72px 16px; }       /* mobile: 16px */
}

/* ============================================================
   RESPONSIVE — tablet (768–1439) + mobile (<768). Desktop (≥1440) is
   the untouched base above. The two ranges are mutually exclusive and
   are appended last, so they win over the older per-section queries.
   ============================================================ */

/* ---------------- Tablet: 768–1439 ---------------- */
@media (min-width: 600px) and (max-width: 1199px) {
  .fa-container { padding-inline: 40px; }

  /* vertical rhythm 120 → 80 */
  .fa-section { padding-top: 80px; }
  .fa-services, .fa-ind, .fa-pp, .fa-proof { padding-top: 80px; padding-bottom: 80px; }
  .fa-social { padding: 80px 0; }

  /* type scale (letter-spacing eased with the size) */
  .fa-h1 { font-size: 48px; letter-spacing: -1.2px; }
  .fa-h2,
  .fa-services__title, .fa-social__title, .fa-pp__title,
  .fa-ind__title, .fa-proof__title, .fa-finalcta__title { font-size: 36px; letter-spacing: -1px; }

  /* services bento → 2 columns */
  .fa-services__wrap { gap: 40px; }
  .fa-bento__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .fa-svc-card, .fa-bento__row--2 > .fa-svc-card { min-height: 0; }

  /* proof: featured stacks, 3 cards → 2 columns */
  .fa-proof__feature { flex-direction: column; align-items: stretch; gap: 40px; }
  .fa-proof__media { width: 100%; height: 320px; }
  .fa-proof__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

  /* final CTA: keep the 50/50 row (override the old ≤900 stacking for 768–900) */
  .fa-finalcta { flex-direction: row; padding: 0; }
  .fa-finalcta__half { flex: 0 0 50%; width: 50%; max-width: 50%; }
  .fa-finalcta__left { border-right: 1px solid rgba(255,255,255,0.1); border-bottom: 0; min-height: 0; padding: 48px; }
  .fa-finalcta__right { padding: 0 40px 0 56px; }
}

/* ---------------- Mobile: <768 ---------------- */
@media (max-width: 599px) {
  .fa-container { padding-inline: 16px; }

  /* vertical rhythm 120 → 60 */
  .fa-section { padding-top: 60px; }
  .fa-services, .fa-ind, .fa-pp, .fa-proof { padding-top: 60px; padding-bottom: 60px; }
  .fa-social { padding: 60px 0; }

  /* type scale */
  .fa-h1 { font-size: 40px; letter-spacing: -1px; }
  .fa-h2,
  .fa-services__title, .fa-social__title, .fa-pp__title,
  .fa-ind__title, .fa-proof__title, .fa-finalcta__title { font-size: 28px; letter-spacing: -0.8px; }
  .fa-svc-card__title { font-size: 24px; letter-spacing: -0.5px; }
  .fa-body { font-size: 18px; }

  /* trust bar → horizontal scroll, 12px */
  .fa-trustbar__row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 40px;
    -webkit-overflow-scrolling: touch;
  }
  .fa-trustbar__item { font-size: 12px; }

  /* logos marquee → tighter gaps */
  .fa-social__wrap { gap: 40px; }
  .fa-marquee__track { gap: 48px; }

  /* services bento → 1 column, tighter cards, smaller illustration */
  .fa-services__wrap { gap: 32px; }
  .fa-bento { gap: 20px; }
  .fa-bento__row { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .fa-svc-card, .fa-bento__row--2 > .fa-svc-card { min-height: 0; padding: 20px; }
  .fa-svc-card__illo { width: 240px; height: 240px; }

  /* industries → 1 column */
  .fa-ind__wrap { gap: 40px; }
  .fa-ind__row { grid-template-columns: 1fr; }
  .fa-ind__head { flex-direction: column; gap: 16px; }
  .fa-ind__ctitle { width: auto; }

  /* proof → 1 column */
  .fa-proof__wrap { gap: 40px; }
  .fa-proof__feature { flex-direction: column; align-items: stretch; gap: 32px; padding: 24px; }
  .fa-proof__media { width: 100%; height: 260px; }
  .fa-proof__cards { display: grid; grid-template-columns: 1fr; gap: 40px; }

  /* problem & pricing → tighter */
  .fa-pp__wrap { gap: 56px; }
  .fa-pp__pricing { padding: 40px 20px; }
  .fa-pp__amt { font-size: 56px; }

  /* final CTA → stack (text on top, image below) */
  .fa-finalcta { flex-direction: column; min-height: 0; padding: 60px 0; }
  .fa-finalcta__half { flex: 1 1 auto; width: 100%; max-width: 100%; }
  .fa-finalcta__left { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.1); min-height: 420px; padding: 40px; order: 2; }
  .fa-finalcta__right { padding: 0 16px 40px; order: 1; }

  /* footer → columns stack (flex-wrap already collapses them; force column) */
  .fa-footer .fa-container > .reveal { flex-direction: column; align-items: flex-start; }

  /* buttons → smaller padding + 16px text (override the DS Button inline padding) */
  .fa-btn-lift, .fa-finalcta__btn, .fa-finalcta__btn2, .fa-pp__price-btn {
    padding: 12px 16px !important;
    font-size: 16px !important;
  }
}

/* ===== ≤768: header hamburger + trust-bar auto-marquee ===== */
.fa-hamburger {
  display: none;                 /* desktop: hidden (nav shown instead) */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);    /* inherits the header's light/dark theme ink */
  cursor: pointer;
}
.fa-hamburger svg { display: block; }
.fa-trustbar__track { display: contents; }         /* desktop: transparent — items lay out in the row (unchanged) */
.fa-trustbar__item--dup { display: none; }         /* duplicate set only used for the mobile marquee loop */
@keyframes fa-trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }            /* each item owns a 40px right margin → −50% = one full set → seamless */
}
@media (max-width: 1199px) {
  /* header: logo (left, ~32px) + connected mint Book-a-call + yellow hamburger, flush to the right edge */
  .fa-header { height: 52px; }
  .fa-header__inner { height: 52px; padding-left: 16px; padding-right: 0; gap: 0; justify-content: flex-start; }
  .fa-logo { margin-right: auto; height: 32px; }
  .fa-logo__cut, .fa-logo__cut svg { height: 32px; }
  .fa-nav { display: none; }
  .fa-header .fa-btn-lift {
    height: 52px !important;
    padding: 0 20px !important;
    font: var(--fw-halbfett) 16px/1 var(--font-display) !important;
    background: #50DDA4 !important;
    color: #050E1E !important;
    border-radius: 0 !important;
  }
  .fa-hamburger { display: inline-flex; height: 52px; aspect-ratio: 1 / 1; width: auto; padding: 0; background: #FBEB4F; color: #050E1E; }
  .fa-hamburger svg { width: 24px; height: 24px; }
  /* trust bar: seamless auto-scrolling marquee (duplicated items) */
  .fa-trustbar__row { overflow: hidden; justify-content: flex-start; }
  .fa-trustbar__track { display: flex; flex-wrap: nowrap; width: max-content; animation: fa-trust-marquee 22s linear infinite; will-change: transform; }
  .fa-trustbar__item { font-size: 12px; margin-right: 40px; }
  .fa-trustbar__item--dup { display: inline-block; }
  /* rating → centred 2-line stack: (score + star) on line 1, reviewers on line 2 */
  .fa-social__rating { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
  .fa-social__rating .fa-star { transform: translateY(-3px); }   /* nudge up to optically centre with the text */
  .fa-social__score { font: 600 18px/1.2 "Epilogue", var(--font-body); }
  .fa-social__muted { flex-basis: 100%; text-align: center; font: 400 18px/1.2 "Epilogue", var(--font-body); opacity: 0.6; }
}

/* Per-breakpoint header sizes */
@media (max-width: 599px) {
  .fa-header, .fa-header__inner { height: 60px; }
  .fa-logo, .fa-logo__cut, .fa-logo__cut svg { height: 36px; }
  .fa-header .fa-btn-lift { height: 60px !important; font-size: 16px !important; }
  .fa-hamburger { height: 60px; }
  .fa-hamburger svg { width: 24px; height: 24px; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .fa-header, .fa-header__inner { height: 72px; }
  .fa-logo, .fa-logo__cut, .fa-logo__cut svg { height: 40px; }
  .fa-header .fa-btn-lift { height: 72px !important; font-size: 18px !important; }
  .fa-hamburger { height: 72px; }
  .fa-hamburger svg { width: 28px; height: 28px; }
}

/* ============================================================
   TYPOGRAPHY SCALE — one clamp-based system, applied last so it
   supersedes every earlier fixed / per-breakpoint font-size. Each
   clamp maxes out at the current DESKTOP size (desktop unchanged)
   and scales fluidly to a readable minimum, holding the hierarchy
   H1 > H2 > H3 > body > small at every width. Letter-spacing is in
   em so it eases proportionally with the size; line-heights are left
   to the base rules.
   ============================================================ */
.fa-h1 { font-size: clamp(34px, 5vw + 1rem, 60px); letter-spacing: -0.03em; }
.fa-h2,
.fa-services__title, .fa-social__title, .fa-pp__title,
.fa-ind__title, .fa-proof__title, .fa-finalcta__title {
  font-size: clamp(30px, 3.5vw + 1rem, 48px);
  letter-spacing: -0.03em;
}
.fa-svc-card__title, .fa-ind__ctitle { font-size: clamp(22px, 1.5vw + 1rem, 28px); letter-spacing: -0.025em; }
.fa-proof__quote { font-size: clamp(18px, 1vw + 0.8rem, 24px); letter-spacing: -0.01em; }
.fa-body { font-size: clamp(16px, 1vw + 0.9rem, 20px); letter-spacing: -0.02em; }
.fa-svc-card__desc, .fa-ind__desc, .fa-proof__cdesc { font-size: 16px; letter-spacing: -0.01em; }
.fa-trustbar__item { font-size: clamp(12px, 1.2vw + 0.3rem, 16px); }
.fa-proof__role { font-size: clamp(12px, 0.4vw + 0.6rem, 14px); }

/* Desktop (≥1200) trust bar: the 4 items share one row via space-between.
   Between 1200px and ~1326px the content column is too narrow to hold all four
   at 16px, so they used to wrap onto a second line. Force a single line and
   shrink the font to fit instead — full 16px once they fit (~1326px+), easing
   down to ~14px at the 1200px desktop floor. Placed after the global type
   scale above so it wins on desktop; scoped min-width:1200 so the ≤1199
   marquee (tablet + mobile) and large desktop are untouched. */
@media (min-width: 1200px) {
  .fa-trustbar__row { flex-wrap: nowrap; }
  .fa-trustbar__item { font-size: clamp(14px, 1.38vw - 2.3px, 16px); white-space: nowrap; }
}

/* ===== Problem/Pricing comparison table → CSS grid on ≤1199 (desktop keeps ComparisonRow) ===== */
.fa-pp__grid { display: none; }
@media (max-width: 1199px) {
  .fa-pp__table--desktop { display: none; }
  .fa-pp__grid {
    display: grid;
    grid-template-columns: minmax(120px, 1.4fr) 1fr 1fr;
    width: 100%;
    color: var(--fa-white);
  }
  .fa-pp__gcell {
    display: flex; align-items: center; justify-content: center;
    min-height: 68px; padding: 14px 8px; box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .fa-pp__glabel { justify-content: flex-start; text-align: left; font: 500 14px/1.3 "Epilogue", var(--font-body); letter-spacing: -0.48px; }
  .fa-pp__gfa { background: #5A3AF5; }               /* continuous purple band down column 3 */
  .fa-pp__badge { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .fa-pp__badge--no { background: var(--badge-no); color: var(--fa-white); }
  .fa-pp__badge--yes { background: var(--badge-yes); color: var(--fa-ink); }
  .fa-pp__badge svg { width: 14px; height: 14px; display: block; }
  .fa-pp__grid .fa-pp__colhead { font: 500 16px/1 "Epilogue", var(--font-body); color: var(--fa-white); text-align: center; }
  .fa-pp__pricing { padding: 40px 24px; }
  .fa-pp__pricing-title { font-size: 24px; }
  .fa-pp__amt { font-size: 60px; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .fa-pp__grid { grid-template-columns: minmax(200px, 1.4fr) 1fr 1fr; }
  .fa-pp__glabel { font-size: 18px; }
  .fa-pp__gcell { min-height: 76px; }
  .fa-pp__badge { width: 28px; height: 28px; }
  .fa-pp__badge svg { width: 16px; height: 16px; }
  .fa-pp__pricing { padding: 48px 60px; }
  .fa-pp__pricing-title { font-size: 32px; }
  .fa-pp__amt { font-size: 72px; }
}
@media (prefers-reduced-motion: reduce) { .fa-trustbar__track { animation: none; } }

/* Comparison-table FA logo — self-contained header logo copy (see PP_LOGO_SVG
   in app.jsx): white wordmark + yellow triangle on the purple column. Static. */
.fa-pp__glogo svg { height: 32px; width: auto; display: block; }
@media (max-width: 1199px) { .fa-pp__glogo svg { height: 26px; } }
@media (max-width: 599px) { .fa-pp__glogo svg { height: 22px; } }

/* Industry cards: tighter text-block padding on mobile + tablet (32 → 20) */
@media (max-width: 1199px) { .fa-ind__head { padding: 20px; } }

/* Case-study cards: tighter image↔text gap on small screens (40 → 16 mobile / 24 tablet) */
@media (max-width: 599px) { .fa-proof__card { gap: 16px; } }
@media (min-width: 600px) and (max-width: 1199px) { .fa-proof__card { gap: 24px; } }

/* Case-study cards → horizontal snap carousel on ≤1199 (desktop keeps 3-across) */
.fa-proof__dots { display: none; justify-content: center; gap: 8px; margin-top: 24px; }
.fa-proof__dot {
  width: 8px; height: 8px; border: 0; padding: 0; border-radius: 999px;
  background: rgba(5, 14, 30, 0.22); cursor: pointer;
  transition: background 200ms ease, width 200ms ease;
}
.fa-proof__dot.is-active { background: #5939F5; width: 22px; }
@media (max-width: 1199px) {
  .fa-proof__cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fa-proof__cards::-webkit-scrollbar { display: none; }
  .fa-proof__card { flex: 0 0 85%; scroll-snap-align: start; }
  .fa-proof__dots { display: flex; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .fa-proof__card { flex-basis: 58%; }
}

/* ============================================================
   FINAL CTA — mobile + tablet refinements (desktop ≥1200 unchanged)
   1. enlarge image / cut side padding
   2. hide cursor-follow circular "Meet our team" (touch can't use it)
   3. show a normal tappable mint "Meet our team" beside "Book a call"
   ============================================================ */
.fa-finalcta__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fa-finalcta__btn2 { display: none; }   /* desktop: only the cursor circle */

@media (max-width: 1199px) {
  /* 2 — kill the cursor-following circle on touch */
  .fa-finalcta__team { display: none !important; }
  /* 3 — real tappable secondary CTA (mint fill, dark text), matches btn sizing */
  .fa-finalcta__btn2 {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 20px; border: 0; border-radius: 0; cursor: pointer;
    background: #50DDA4; color: #050E1E;
    font: var(--fw-halbfett) 18px/1 var(--font-display); letter-spacing: -0.18px;
    transition: opacity 150ms ease;
  }
  .fa-finalcta__btn2:hover { opacity: 0.88; }
}

/* 1 — image: less side padding + larger cluster */
@media (max-width: 599px) {
  .fa-finalcta__left { padding: 40px 12px 0; }
  .fa-finalcta__cluster { max-width: 520px; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .fa-finalcta__left { padding: 40px 20px; }
  .fa-finalcta__cluster { max-width: 620px; }
}

/* Center the collage as ONE unit. Layers sit right-of-centre in the 760×800
   stage (union spans 34.21%→90.79%, centre 62.5%), so the group leans right.
   Shift the whole cluster left 12.5% of its width → visible group centred with
   equal L/R padding. Empty left region of the box slides under the padding
   (transparent, so nothing visible is clipped). ≤1199 only; desktop untouched. */
@media (max-width: 1199px) {
  .fa-finalcta__cluster { transform: translateX(-12.5%); }
}

/* Footer link columns: on mobile + tablet, stack vertically at NATURAL (content)
   height with a uniform 40px gap. Otherwise the inline flex:1 1 160px/200px
   becomes a VERTICAL flex-basis when the row is stacked into a column — forcing
   every group ≥160px tall, so the short "Resources" group (Blog, Podcast) leaves
   a big empty block above "Contact info". flex:0 0 auto removes that. Desktop
   (≥1200) keeps the inline row layout untouched. */
@media (max-width: 1199px) {
  .fa-foot-cols {
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 40px !important;
  }
  .fa-foot-cols > * { flex: 0 0 auto !important; }
}

/* Footer acknowledgement + certifications row: split the two gap axes so a
   large value can NEVER apply vertically. Row-gap (vertical, used when the
   columns stack below 1200px) is always 40px; only the horizontal column-gap
   widens to 200px on desktop where the two columns sit side by side. */
.fa-foot-ack { row-gap: 40px !important; column-gap: 40px !important; }
@media (min-width: 1200px) {
  .fa-foot-ack { column-gap: 200px !important; }
}

/* "Our certifications" on mobile + tablet: heading left-aligned, logos in a
   left-aligned 2-per-row grid (row1 Xero+CPA, row2 Trace+A2X — source order).
   Each logo is bounded to its cell (max-width + max-height, object-fit contain)
   so nothing overflows and aspect ratios are preserved; centred in its cell.
   Desktop (≥1200) keeps the inline flex row untouched. */
@media (max-width: 1199px) {
  .fa-foot-certs {
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
  }
  .fa-foot-certs > span { flex: 0 0 auto !important; text-align: left !important; }
  .fa-foot-certs__grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
  }
  .fa-foot-certs__grid img {
    height: 52px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block;
  }
}

/* ===== Hero spacing — mobile/tablet (desktop ≥1200 unchanged) =====
   1) Top padding = fixed-header height + 32px visible above the eyebrow.
      Tablet 72+32=104px is set in the ≤1199 hero block; mobile 60+32=92px here.
   2) Text-block → buttons gap = 24px: .fa-hero__text is a flex column already
      spacing children 24px apart, but .fa-hero__cta adds an extra 16px margin-top
      (40px total). Drop that extra so the gap is exactly the 24px flex gap.
   3) Buttons → highest ring tile stays 32px via the ring JS (textBottom + 32),
      which re-reads the text height — it tracks these changes automatically. */
@media (max-width: 599px) { .fa-hero { padding-top: 92px; } }
@media (max-width: 1199px) { .fa-hero__cta { margin-top: -4px; } }