/* ==========================================================================
   Figbloom landing page — revamped sections
   Scope: hero, services, "why us". Everything else on the homepage still uses
   style.css. Every class is fb-* prefixed and no bare element selectors are
   used, so this file cannot leak into the sections it doesn't own.
   Load AFTER style.css. Widths come from style.css's .container so these
   sections stay flush with the bands above and below them.
   ========================================================================== */

/* Tokens live on :root because the navbar overrides below target the injected
   header, which is not inside a .fb wrapper. */
:root {
  --fb-ink: #14180f;
  --fb-ink-2: #4a5145;
  --fb-ink-3: #5b6157;
  --fb-muted: #8a9182;
  --fb-faint: #c0c4b8;
  --fb-line: #e3e2dc;
  --fb-line-2: #c9ccc2;
  --fb-bg: #fafaf8;
  --fb-green: #2c5322;
  --fb-orange: #ff9400;
  --fb-dark: #101408;
}

/* --- shared bits ---------------------------------------------------------- */

.fb-eyebrow {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fb-muted);
  font-weight: 500;
  margin: 0 0 22px;
}

.fb-title {
  margin: 0;
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 500;
  color: var(--fb-ink);
  text-wrap: balance;
}

.fb-lede {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--fb-ink-2);
  text-wrap: pretty;
}

.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 15px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.fb-btn--orange { background: var(--fb-orange); color: var(--fb-ink); }
.fb-btn--orange:hover { background: #fff; color: var(--fb-ink); }

.fb-btn--onDark { border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.fb-btn--onDark:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

.fb-btn--outline { border-color: var(--fb-line-2); color: var(--fb-ink); background: transparent; }
.fb-btn--outline:hover { border-color: var(--fb-ink); background: #fff; }

.fb-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--fb-ink);
  text-decoration: none;
  transition: color 0.18s ease;
}
.fb-arrow:hover { color: var(--fb-orange); }

/* --- navbar (homepage only) ----------------------------------------------- */
/* components/navbar.html is shared by all six pages, but only the homepage
   links this stylesheet — so these overrides cannot reach the other pages.
   The header goes fixed + transparent so the hero gradient runs to y=0, then
   picks up a solid backdrop once scrolled (.is-scrolled, toggled in index.html).
   Selectors use the direct-child chain header > div > div to hit the main flex
   row and its logo without also matching the mobile drawer's logo. */

.fb-nav header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.fb-nav header > div > div {
  border-bottom: 0;
  min-height: 72px;
  padding-top: 0;
  padding-bottom: 0;
}

/* The wordmark is dark green + orange on transparency, so it goes white over the
   dark hero and back to full colour once the navbar has a light backdrop.
   Height comes from navbar.html's h-12, so there is one source of truth. */
.fb-nav header > div > div > a > img {
  transition: filter 0.25s ease;
}

.fb-nav header:not(.is-scrolled) > div > div > a > img {
  filter: brightness(0) invert(1);
}

/* Hamburger (mobile only in the shared markup) */
.fb-nav header:not(.is-scrolled) > div > div > button { color: #fff; }

.fb-nav header.is-scrolled {
  background: #fafaf8;
  border-bottom-color: var(--fb-line);
}

@media (min-width: 1024px) {
  /* Blur is desktop-only on purpose: backdrop-filter creates a containing block
     for fixed descendants, which would break the mobile drawer and its scrim
     (both position: fixed inside this header). At <1024px the header uses a
     plain solid background instead. */
  .fb-nav header.is-scrolled {
    background: rgba(250, 250, 248, 0.9);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
  }

  /* Light nav text only on desktop — below 1024px the menu is a white drawer. */
  .fb-nav header:not(.is-scrolled) .nav-link { color: rgba(255, 255, 255, 0.78); }
  .fb-nav header:not(.is-scrolled) .nav-link:hover,
  .fb-nav header:not(.is-scrolled) .nav-link.active { color: #fff; }

  /* "Our Company" dropdown. Its light look (bg-white + border-gray-light) comes
     from the Alpine :class binding in navbar.html and is right once the navbar
     has a light backdrop, so only the transparent-over-hero state is overridden
     here. Blur is safe on this element — unlike on the header itself, the panel
     has no position: fixed descendants. */
  .fb-nav header:not(.is-scrolled) .nav-submenu {
    background-color: rgba(16, 20, 8, 0.82);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.45);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
  }

  .fb-nav header:not(.is-scrolled) .nav-submenu .submenu-nav-link {
    color: rgba(255, 255, 255, 0.78);
  }

  .fb-nav header:not(.is-scrolled) .nav-submenu .submenu-nav-link:hover,
  .fb-nav header:not(.is-scrolled) .nav-submenu .submenu-nav-link.active {
    color: #fff;
  }

  /* Phone button: outlined on the hero so the orange hero CTA stays the only
     primary action. Reverts to the shared .btn style once scrolled. */
  .fb-nav header:not(.is-scrolled) .menu .btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #fff;
  }
  .fb-nav header:not(.is-scrolled) .menu .btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
  }

  .fb-nav header.is-scrolled .nav-link { color: var(--fb-ink-2); }
  .fb-nav header.is-scrolled .nav-link:hover,
  .fb-nav header.is-scrolled .nav-link.active { color: var(--fb-ink); }
}

/* --- hero ----------------------------------------------------------------- */

/* Shared background field for the hero AND the metrics counters. Because both
   bands live inside this one element the gradient is painted once and runs
   across both, so there is no second green to colour-match. The glow and grid
   anchors are in px rather than % so they stay pinned near the top of the page
   as the container grows taller. */
.fb-top {
  position: relative;
  overflow: hidden;
  background: var(--fb-dark);
}

.fb-top__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
  display: block;
  filter: grayscale(0.65) contrast(1.06) brightness(0.72);
}

.fb-top__layer { position: absolute; inset: 0; pointer-events: none; }

.fb-top__layer--wash {
  background: linear-gradient(
    96deg,
    #101408 0%,
    rgba(16, 20, 8, 0.96) 34%,
    rgba(22, 40, 17, 0.78) 62%,
    rgba(44, 83, 34, 0.42) 100%
  );
}
.fb-top__layer--glow {
  background: radial-gradient(720px 460px at 88% 90px, rgba(255, 148, 0, 0.22), transparent 66%);
}
/* Both bands sit above the background layers. */
.fb-hero,
.fb-metrics { position: relative; }

.fb-hero__inner { position: relative; }

/* Extra top padding clears the fixed, transparent navbar that overlays the hero.
   min-height fills the viewport so the metrics counters below start off-screen
   and only appear once scrolled. It's min-height, not height, so short/landscape
   viewports grow instead of clipping the content. svh (small viewport height)
   keeps mobile browser chrome from pushing the counters into view; the plain vh
   line above is the fallback for browsers without svh. */
.fb-hero__grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 72px;
  align-items: center;
  padding: 148px 0 96px;
  min-height: 100vh;
  min-height: 100svh;
}

.fb-hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}
.fb-hero__tick {
  width: 26px;
  height: 1px;
  background: var(--fb-orange);
  display: block;
  flex-shrink: 0;
}
.fb-hero__place {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  font-weight: 500;
}

.fb-hero__title {
  margin: 0;
  font-size: clamp(38px, 4.7vw, 74px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: #fff;
  text-wrap: balance;
}

.fb-hero__lede {
  margin: 30px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 505px;
  text-wrap: pretty;
}

/* Word that types/deletes through internet / CCTV / AI / software in the
   hero headline (see the fbHeroRotate script, which only ever sets
   textContent). min-width keeps the dot after it from jumping left during
   the brief moment the word is fully deleted. */
.fb-hero__rotate {
  display: inline-block;
  position: relative;
  min-width: 0.6em;
  color: var(--fb-orange);
}
.fb-hero__rotate-dot {
  color: var(--fb-orange);
}

.fb-hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.fb-hero__facts {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 8px;
}

.fb-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.fb-fact__title {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.015em;
}
.fb-fact__desc {
  margin: 5px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
.fb-fact__num {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

/* --- metrics band --------------------------------------------------------- */
/* No background of its own — .fb-top paints the gradient behind both bands.
   A hairline is all that separates the counters from the hero content above. */

.fb-metrics {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Hairline dividers between counters, echoing the hero's facts list. */
@media (min-width: 768px) {
  .fb-metrics .space-y-2 + .space-y-2 {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
}

/* --- services ------------------------------------------------------------- */

/* Warm sand shading to soft green, so the band reads as a tinted panel rather
   than more white page. The white cards sit on top of it for contrast. */
.fb-services {
  padding: 96px 0;
  background: linear-gradient(168deg, #f7f3ea 0%, #f1f4ed 100%);
}

.fb-services__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: end;
  padding-bottom: 48px;
}
.fb-services__head .fb-lede { max-width: 430px; justify-self: end; margin-bottom: 6px; }

.fb-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.fb-service {
  background: #fff;
  border: 1px solid var(--fb-line);
  border-radius: 4px;
  padding: 30px 28px 32px;
  box-shadow:
    0 1px 2px rgba(20, 24, 15, 0.04),
    0 14px 30px -20px rgba(20, 24, 15, 0.18);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* Orange edge is an inset shadow so it animates without shifting layout. */
.fb-service:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 3px 0 0 0 var(--fb-orange),
    0 1px 2px rgba(20, 24, 15, 0.05),
    0 22px 44px -24px rgba(20, 24, 15, 0.28);
}

.fb-service__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

/* Soft green tile behind each icon. */
.fb-service__tile {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(44, 83, 34, 0.08);
  transition: background-color 0.22s ease;
}
.fb-service:hover .fb-service__tile { background: rgba(44, 83, 34, 0.14); }

/* The source SVGs are single-colour near-black, so they're used as an alpha
   mask and painted in brand green — exact colour, no filter approximation.
   The file comes in per-icon via the inline --icon custom property. */
.fb-service__icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--fb-green);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.fb-service__num {
  font-size: 12.5px;
  color: var(--fb-orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.fb-service__name {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--fb-ink);
  line-height: 1.25;
}
.fb-service__desc {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fb-ink-3);
}

/* Sixth cell is the CTA — a solid green block so the section has a real spot of
   brand colour instead of six identical white cards. */
.fb-service--ask {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--fb-green);
  border-color: var(--fb-green);
}
.fb-service--ask .fb-service__desc { color: rgba(255, 255, 255, 0.82); }
.fb-service--ask .fb-arrow { color: var(--fb-orange); }
.fb-service--ask .fb-arrow:hover { color: #fff; }
.fb-service--ask:hover {
  box-shadow:
    inset 3px 0 0 0 var(--fb-orange),
    0 1px 2px rgba(20, 24, 15, 0.05),
    0 22px 44px -24px rgba(20, 24, 15, 0.34);
}
.fb-service--ask .fb-arrow { margin-top: 28px; align-self: flex-start; }

/* --- clients marquee ------------------------------------------------------ */

.fb-clients {
  border-top: 1px solid var(--fb-line);
  border-bottom: 1px solid var(--fb-line);
  background: #fafafa;
  padding: 72px 0 76px;
}

.fb-clients__head { text-align: center; margin-bottom: 42px; }
.fb-clients__head .fb-eyebrow { margin-bottom: 16px; }

.fb-marquee {
  overflow: hidden;
  /* Logos fade in and out at the edges instead of being chopped off. */
  -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%);
}

.fb-marquee__track {
  display: flex;
  width: max-content;
}

/* Gated on the media query rather than html.fb-anim: nothing is hidden here, so
   the marquee needs no JS to be safe and should run even if scripts fail. */
@media (prefers-reduced-motion: no-preference) {
  .fb-marquee__track {
    animation: fb-marquee-scroll 45s linear infinite;
  }
  /* Let people stop it to actually read a logo. */
  .fb-marquee:hover .fb-marquee__track,
  .fb-marquee:focus-within .fb-marquee__track {
    animation-play-state: paused;
  }
}

/* -50% is exactly one row, because the track holds two identical rows. */
@keyframes fb-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.fb-marquee__row {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Trailing space so the seam between the two rows matches the inner gap. */
  padding: 0 20px 0 0;
  margin: 0;
  list-style: none;
}

.fb-marquee__row li {
  flex: 0 0 auto;
  width: 230px;
  height: 128px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--fb-line);
  border-radius: 6px;
  padding: 18px;
}

.fb-marquee__row img {
  max-width: 158px;
  max-height: 62px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.fb-marquee__row li:hover img {
  filter: none;
  opacity: 1;
}

/* --- about band ----------------------------------------------------------- */
/* The old version laid text over a full-bleed photo dimmed by a flat green
   overlay, which muddied the image and left the CTA floating over it. This
   splits the two: copy on a green field, photo in its own frame. */

.fb-about {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background:
    radial-gradient(760px 420px at 94% 4%, rgba(255, 148, 0, 0.15), transparent 68%),
    linear-gradient(152deg, #2f5824 0%, #24451b 46%, #16290f 100%);
}

.fb-about__grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
}

.fb-about__eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fb-orange);
  font-weight: 500;
  margin-bottom: 22px;
}

.fb-about__title {
  margin: 0;
  font-size: clamp(27px, 3.1vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 500;
  color: #fff;
  text-wrap: balance;
}

/* Hairline above the lede replaces the old ~130px padding gap that left the
   headline and paragraph looking disconnected. */
.fb-about__lede {
  margin: 26px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 17px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.76);
  text-wrap: pretty;
}

.fb-about__points {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.fb-about__points li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
}
.fb-about__points li::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 1px;
  background: var(--fb-orange);
  transform: translateY(-5px);
}

.fb-about__cta { margin-top: 34px; }

.fb-about__media {
  position: relative;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.62);
}
.fb-about__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 42%;
}

/* Scrim only at the base, so the photo stays bright but the caption is legible. */
.fb-about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 56%, rgba(11, 18, 7, 0.74) 100%);
}

.fb-about__caption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 1;
  display: grid;
  gap: 3px;
}
.fb-about__caption-label {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fb-orange);
}
.fb-about__caption-value {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}

/* --- why us --------------------------------------------------------------- */

/* Background is set explicitly so the 1px card grid-gap hairlines read as
   lines rather than as a seam against the body colour. */
.fb-why { padding: 96px 0; background: var(--fb-bg); }

.fb-why__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.fb-why__copy .fb-btn { margin-top: 34px; }

.fb-why__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--fb-line);
}

.fb-why__card { background: var(--fb-bg); padding: 34px 30px 34px 0; }
.fb-why__card:nth-child(even) { padding: 34px 0 34px 30px; }
.fb-why__card:nth-child(3),
.fb-why__card:nth-child(4) { padding-bottom: 0; }

.fb-why__num {
  font-size: 12.5px;
  color: var(--fb-orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.fb-why__name {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fb-ink);
  line-height: 1.3;
}
.fb-why__desc {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--fb-ink-3);
}

/* ==========================================================================
   Responsive — the source design was desktop-only, these are additions.
   ========================================================================== */

@media (max-width: 1080px) {
  .fb-hero__grid { grid-template-columns: 1fr; gap: 52px; padding: 124px 0 72px; }
  .fb-hero__lede { max-width: 560px; }

  .fb-services,
  .fb-why { padding: 76px 0; }

  .fb-services__head { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .fb-services__head .fb-lede { justify-self: start; max-width: 560px; margin-bottom: 0; }

  .fb-why__grid { grid-template-columns: 1fr; gap: 44px; }

  .fb-about { padding: 76px 0; }
  /* Photo first on narrow screens would push the copy too far down, so the
     copy stays on top and the image follows. */
  .fb-about__grid { grid-template-columns: 1fr; gap: 44px; }
  .fb-about__media { max-width: 620px; }
}

@media (max-width: 900px) {
  /* Cards are uniform now, so only the column count changes. */
  .fb-services__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .fb-hero__grid { padding: 108px 0 56px; gap: 44px; }
  .fb-hero__kicker { margin-bottom: 22px; }
  .fb-hero__place { font-size: 11.5px; letter-spacing: 0.1em; }
  .fb-hero__lede { font-size: 17px; margin-top: 22px; }
  .fb-hero__actions { margin-top: 32px; }
  .fb-hero__actions .fb-btn { width: 100%; }
  .fb-fact { padding: 18px 0; }

  .fb-services,
  .fb-why { padding: 60px 0; }

  .fb-services__head { padding-bottom: 36px; }

  .fb-services__grid { grid-template-columns: 1fr; gap: 16px; }
  .fb-service { padding: 26px 22px 28px; }

  .fb-clients { padding: 52px 0 56px; }
  .fb-clients__head { margin-bottom: 30px; }
  .fb-marquee__row { gap: 14px; padding-right: 14px; }
  .fb-marquee__row li { width: 170px; height: 98px; padding: 14px; }
  .fb-marquee__row img { max-width: 120px; max-height: 46px; }

  .fb-about { padding: 60px 0; }
  .fb-about__grid { gap: 34px; }
  .fb-about__lede { font-size: 16px; margin-top: 22px; padding-top: 22px; }
  .fb-about__points { margin-top: 24px; }
  .fb-about__cta { margin-top: 28px; width: 100%; }
  .fb-about__caption { left: 16px; bottom: 14px; }

  .fb-why__cards { grid-template-columns: 1fr; }
  .fb-why__card,
  .fb-why__card:nth-child(even) { padding: 28px 0; }
  .fb-why__card:nth-child(1) { padding-top: 0; }
  .fb-why__card:nth-child(3) { padding-bottom: 28px; }
  .fb-why__card:last-child { padding-bottom: 0; }
}

/* ==========================================================================
   Motion
   Everything here is gated behind html.fb-anim, which an inline <head> script
   adds only when JS runs AND the visitor hasn't asked for reduced motion.
   That gate is the fail-safe: with no class, nothing is ever hidden, so a JS
   error or an old browser degrades to plain visible content rather than a
   blank page. Gating in CSS (rather than adding classes from JS after load)
   also means no flash of unstyled content.
   ========================================================================== */

@keyframes fb-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- hero entrance (on load) ---------------------------------------------- */

html.fb-anim .fb-hero__kicker,
html.fb-anim .fb-hero__title,
html.fb-anim .fb-hero__lede,
html.fb-anim .fb-hero__actions,
html.fb-anim .fb-hero__facts .fb-fact {
  animation: fb-rise 0.68s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

html.fb-anim .fb-hero__kicker { animation-delay: 0.04s; }
html.fb-anim .fb-hero__title { animation-delay: 0.12s; }
html.fb-anim .fb-hero__lede { animation-delay: 0.24s; }
html.fb-anim .fb-hero__actions { animation-delay: 0.34s; }

/* The 01 / 02 / 03 facts come in one after another, in order. */
html.fb-anim .fb-hero__facts .fb-fact:nth-child(1) { animation-delay: 0.46s; }
html.fb-anim .fb-hero__facts .fb-fact:nth-child(2) { animation-delay: 0.62s; }
html.fb-anim .fb-hero__facts .fb-fact:nth-child(3) { animation-delay: 0.78s; }

/* The rule above the first fact would otherwise be visible while the rows are
   still hidden, so it fades in with them. */
html.fb-anim .fb-hero__facts {
  animation: fb-rise 0.68s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.4s;
}

/* --- scroll reveals ------------------------------------------------------- */
/* The JS observer adds .is-in when the element scrolls into view. Selectors
   are kept in one list here and mirrored in index.html's observer script. */

html.fb-anim .fb-services__head > *,
html.fb-anim .fb-service,
html.fb-anim .fb-why__copy,
html.fb-anim .fb-why__card,
html.fb-anim .fb-about__copy,
html.fb-anim .fb-about__media {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.fb-anim .fb-services__head > *.is-in,
html.fb-anim .fb-service.is-in,
html.fb-anim .fb-why__copy.is-in,
html.fb-anim .fb-why__card.is-in,
html.fb-anim .fb-about__copy.is-in,
html.fb-anim .fb-about__media.is-in {
  opacity: 1;
  transform: none;
}

/* Photo trails the copy slightly so the panel assembles left-to-right. */
html.fb-anim .fb-about__media { transition-delay: 0.12s; }

/* Cards stagger across the row so the grid assembles rather than snapping in.
   transform must be re-declared: .fb-service:hover sets translateY(-3px), and
   without this the lift would fight the reveal transform. */
html.fb-anim .fb-service:nth-child(3n + 2) { transition-delay: 0.08s; }
html.fb-anim .fb-service:nth-child(3n) { transition-delay: 0.16s; }
html.fb-anim .fb-service.is-in:hover { transform: translateY(-3px); }

html.fb-anim .fb-why__card:nth-child(2) { transition-delay: 0.07s; }
html.fb-anim .fb-why__card:nth-child(3) { transition-delay: 0.14s; }
html.fb-anim .fb-why__card:nth-child(4) { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .fb *,
  .fb *::before,
  .fb *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}