/* 8 Furlong Consulting — home.css (index.html only)
   Layout only; tokens/shared elements live in global.css, chrome in chrome.css.
   Mobile-first → 768px → 1024px. Serpentine + seam-crossing are desktop-only. */

/* ---- Hero (homepage video hero: poster image is the LCP element; footage layers in at WP.
        Mobile and reduced-motion keep the still — same frame, same brand moment.) ---- */
.home-hero { position: relative; min-height: 86svh; background: var(--navy-soft); overflow: hidden; display: flex; align-items: flex-end; }
.home-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(29,35,39,.55) 0%, rgba(29,35,39,.38) 45%, rgba(29,35,39,.62) 100%); }
.home-hero__content { position: relative; padding: 120px var(--pad-side) 48px; }
.home-hero__line { color: var(--cream); font-size: 16px; line-height: 1.6; margin: 0 0 18px; }
.home-hero h1 { color: var(--white); }
.home-hero__btn { margin-top: 28px; }
.home-hero__pillcard { display: none; }

/* ---- Intro (below the fold; hero copy redistribution per brief §7) ---- */
.home-intro__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.home-intro__lnk { margin-top: 28px; }

/* ---- Pillars (navy band; cards cross the seam into the cream below on desktop) ---- */
.home-pillars { padding: 72px 0 72px; }
.home-pillars__head { text-align: center; max-width: 820px; margin: 0 auto; }
.home-pillars__head p { margin-top: 22px; }
.home-pillars__row { display: grid; gap: 18px; margin-top: 48px; }
.home-pillar { position: relative; display: block; overflow: hidden; border-radius: var(--radius-card); background: var(--navy-soft); min-height: 340px; }
.home-pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-pillar__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29,35,39,.18) 0%, rgba(29,35,39,.85) 100%); transition: background .45s ease-out; }
.home-pillar__vert { display: none; }
.home-pillar__panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 24px 26px; display: flex; flex-direction: column; }
.home-pillar__title { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--white); line-height: 1.15; }
.home-pillar__copy { font-size: 14px; line-height: 1.65; color: #E8E2D8; margin-top: 12px; max-width: 46ch; }
.home-pillar__lnk { color: var(--tan) !important; font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-top: 18px; align-self: flex-start; }

.home-services-lnk { background: var(--cream-ground); padding: 48px var(--pad-side); text-align: center; }

/* ---- Marquee band (navy divider) ---- */
.home-band { background: var(--navy); padding: 22px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.home-band__item { display: inline-flex; align-items: center; flex-shrink: 0; font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--cream); padding: 0 24px; white-space: nowrap; }
.home-band__item i { font-style: normal; color: var(--tan); font-size: 13px; padding-left: 24px; }

/* ---- Why (situation list) ---- */
.home-why__head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.home-why__head p { margin-top: 20px; max-width: 560px; margin-left: auto; margin-right: auto; }
.home-why__list { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; }
.home-why__list li { padding: 24px 0; border-top: 1px solid var(--line-light); text-align: center; }
.home-why__list li:last-child { border-bottom: 1px solid var(--line-light); }
.home-why__list b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--navy); margin-bottom: 8px; }
.home-why__list span { display: block; font-size: 14px; line-height: 1.65; }
.home-why__quote { text-align: center; max-width: 760px; margin: 48px auto 0; }
.home-why__inhouse { text-align: center; max-width: 760px; margin: 26px auto 0; }

/* ---- Approach (meter) ---- */
.home-approach__head { text-align: center; max-width: 760px; margin: 0 auto; }
.home-approach__meter { margin-top: 56px; }
.home-approach__steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 32px; }
.home-approach__steps p { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0; }

/* ---- Results ---- */
.home-results__inner { text-align: center; }
.home-results__stat { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.02em; margin: 8px 0 0; }
.home-results__stat-label { font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--saddle); margin-top: 14px; }
.home-results__body { font-size: 15px; line-height: 1.75; margin: 24px auto; max-width: 620px; }
.home-results__logos { margin-top: 56px; }
.home-results__logo { width: 150px; height: 56px; background: var(--navy); border: 1px solid var(--navy); border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-family: var(--font-label); font-weight: 600; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #B8AE9C; flex-shrink: 0; margin-right: 16px; }

/* ---- Reviews band (six empty placeholder slots; real Google reviews dropped in later) ---- */
.home-reviews { margin-top: 64px; }
.home-reviews__head { text-align: center; margin-bottom: 32px; }
.home-reviews__head h2 { margin-top: 12px; }
.home-reviews__head .num { font-family: var(--font-num); font-weight: 700; letter-spacing: -.01em; }
.home-reviews__band { padding: 4px 0; }
.rv-card { flex-shrink: 0; width: 340px; min-height: 200px; margin-right: 20px; background: var(--white); border: 1px solid var(--line-card); border-radius: var(--radius-card); padding: 24px 24px 26px; display: flex; flex-direction: column; }
.rv-card__stars { display: block; height: 18px; color: var(--tan); font-size: 15px; line-height: 1.2; letter-spacing: 2px; }
.rv-card__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-family: var(--font-label); font-weight: 600; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--saddle); }
.rv-card__more .arr { display: inline-block; transition: transform .18s ease-out; }
.rv-card__more:hover .arr { transform: translateX(3px); }
.rv-card__text { flex: 1; margin: 16px 0 0; font-size: 14px; line-height: 1.7; min-height: 96px; }

/* ---- People (serpentine section: image ↔ copy) ---- */
.home-people__grid { display: grid; gap: 32px; grid-template-areas: "head" "media" "body"; }
.home-people__media { grid-area: media; position: relative; }
.home-people__img { border-radius: var(--radius-card); width: 100%; height: auto; }
.home-people__body { grid-area: body; }
.home-people__body h2 { margin-top: 0; }
.home-people__body p { margin: 20px 0 24px; }

/* ---- Insights ---- */
.home-insights { padding-top: 0; }
.home-insights__head { text-align: center; margin-bottom: 40px; }
.home-insights__grid { display: grid; gap: 24px; max-width: 1240px; margin: 0 auto; }
.home-insights__card { display: block; }
.home-insights__card .ph { display: block; aspect-ratio: 16 / 9; }
.home-insights__card-body { display: block; padding: 22px 22px 24px; }
.home-insights__card-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--navy); margin-top: 10px; line-height: 1.25; }
.home-insights__card-body .lnk { font-size: 10.5px; letter-spacing: .14em; margin-top: 14px; }
.home-insights__all { text-align: center; margin-top: 40px; }

/* ---- Closer ---- */
.home-closer__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.home-closer__inner p { margin: 22px auto 0; max-width: 56ch; }
.home-closer__inner .btn { margin-top: 32px; }
.home-closer__nap { font-size: 13px; color: var(--muted-dark); margin-top: 36px !important; line-height: 1.8; }
.home-closer__nap b { color: var(--muted); font-weight: 600; }
.home-closer__nap a { color: var(--muted-dark); }
.home-closer__nap a:hover { color: var(--white); }

/* ============ Tablet ============ */
@media (min-width: 768px) {
  .home-hero { min-height: 92svh; }
  .home-hero__content { padding-bottom: 56px; }
  .home-pillars__row { grid-template-columns: 1fr 1fr; }
  .home-approach__steps { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .home-results__stat { font-size: 100px; }
  .home-insights__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ Desktop ============ */
@media (min-width: 1024px) {
  .home-hero { min-height: 100vh; }
  .home-hero__content { padding: 0; position: absolute; left: var(--pad-side); bottom: 64px; right: 560px; }
  .home-hero__line { font-size: 18px; margin-bottom: 22px; }
  .home-hero__btn { margin-top: 32px; }
  .home-hero__pillcard {
    display: flex; flex-direction: column; gap: 11px;
    position: absolute; right: var(--pad-side); bottom: 64px; width: 420px;
    background: rgba(29,35,39,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(245,237,230,.14); border-radius: var(--radius-card);
    padding: 26px 28px;
  }
  .home-hero__pillcard-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--white); margin: 0 0 5px; }
  .home-hero__pillcard .lnk { color: var(--muted); align-self: flex-start; }

  /* Pillars: hover-expand row, cards crossing the seam into the cream section below */
  /* The pillar row runs the full viewport width, side padding only (John's
     approved reference, 2026-09-07). The head keeps its own 820px measure.
     The row hangs 90px into the cream section below, so this section is
     lifted above it: .reveal.in leaves a translateY(0) in place, which makes
     every revealed section a stacking context that would otherwise paint
     over the overhang. */
  .home-pillars { padding: 110px 0 0; position: relative; z-index: 1; }
  .home-pillars .wrap { max-width: none; }
  .home-pillars__row { display: flex; gap: 18px; height: 560px; margin-top: 70px; transform: translateY(90px); }
  .home-pillar { flex: 1 1 0; min-width: 0; min-height: 0; transition: flex-grow .5s var(--ease); }
  .home-pillar__scrim { background: rgba(29,35,39,.62); }
  .home-pillar__vert {
    display: block; position: absolute; left: 24px; bottom: 26px;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--font-display); font-weight: 600; font-size: 23px; color: var(--white);
    white-space: nowrap; opacity: 1; transition: opacity .3s ease-out;
  }
  .home-pillar__panel { padding: 30px 32px 34px; opacity: 0; transform: translateY(16px); transition: opacity .4s ease-out .15s, transform .4s ease-out .15s; }
  .home-pillar__title { font-size: 27px; }
  .home-pillar:hover, .home-pillar:focus-visible { flex-grow: 2.6; }
  .home-pillar:hover .home-pillar__scrim, .home-pillar:focus-visible .home-pillar__scrim { background: linear-gradient(180deg, rgba(29,35,39,.18) 0%, rgba(29,35,39,.85) 100%); }
  .home-pillar:hover .home-pillar__vert, .home-pillar:focus-visible .home-pillar__vert { opacity: 0; }
  .home-pillar:hover .home-pillar__panel, .home-pillar:focus-visible .home-pillar__panel { opacity: 1; transform: translateY(0); }
  .home-services-lnk { padding-top: 200px; padding-bottom: 60px; }

  .home-band { padding: 22px 0; }
  .home-band__item { font-size: 22px; padding: 0 28px; }
  .home-band__item i { padding-left: 28px; }

  .home-approach__meter { margin-top: 80px; }
  .home-approach__steps { grid-template-columns: repeat(5, 1fr); gap: 36px; margin-top: 48px; }

  .home-results__stat { font-size: 140px; }
  .home-results__logos { margin-top: 80px; }
  .home-results__logo { width: 180px; height: 64px; font-size: 9.5px; margin-right: 20px; }

  /* People: serpentine — image left, copy right; offset frame plate */
  .home-people__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; grid-template-areas: "media body"; }
  .home-people__media::after { content: ""; position: absolute; left: -14px; bottom: -14px; right: 34px; top: 34px; border: 1px solid #D8C9AE; border-radius: var(--radius-card); z-index: -1; }

  .home-insights__head { margin-bottom: 56px; }
  .home-insights__card-body { padding: 24px 24px 26px; }
  .home-insights__card-title { font-size: 21px; }
  .home-insights__all { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-pillar, .home-pillar__scrim, .home-pillar__vert, .home-pillar__panel { transition: none; }
}

/* Hero video. site.js injects <video class="hero-video"> into [data-hero-video] once the page
   is interactive - desktop 1024px+ only, never under reduced motion, never on mobile. It is
   appended last, so the layer order must be explicit or the video paints over the scrim and
   the headline. The still stays underneath as the poster and as the no-JS / mobile state. */
.home-hero__media { z-index: 0; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1; opacity: 0; transition: opacity .8s ease-out;
}
.home-hero.video-ready .hero-video { opacity: 1; }
.home-hero__scrim { z-index: 2; }
.home-hero__content { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .hero-video { transition: none; } }
/* The still is the video's own first frame as of 2026-09-09, so the footage simply
   fades in over an identical picture. The old .has-video rule hid the still the moment
   the script ran, which left the hero blank until the video was decodable - fine on a
   desktop connection, several seconds of empty navy on a phone. */

/* Client logo tiles. The set is mixed: some marks are dark, five are white-on-transparent,
   so a single tile color cannot carry all of them. Light marks get a navy tile. */
.home-results__logo img { max-width: 82%; max-height: 74%; width: auto; height: auto; object-fit: contain; display: block; }
/* Every tile is navy as of 2026-09-08 (John): a uniform plate, so the four
   white-on-transparent marks stop being the odd ones out. --dark is retired. */


/* ---- Mobile + tablet hero: landscape band (John, 2026-09-09) ----
   The footage is 16:9. Cover-cropping it into the tall hero showed about a third of the
   frame on a phone, so below the desktop breakpoint the media keeps its own 16:9 band and
   the copy sits under it on navy. Desktop keeps the overlay: there the copy is off to the
   left with the pillcard right, so it never covers the shot. */
@media (max-width: 1023px) {
  .home-hero { display: block; min-height: 0; }
  .home-hero__media {
    position: relative; inset: auto; display: block;
    width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  }
  .hero-video {
    position: absolute; top: 0; left: 0; right: 0; bottom: auto;
    width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  }
  .home-hero__scrim {
    bottom: auto; aspect-ratio: 16 / 9;
    background: linear-gradient(180deg, rgba(29,35,39,.26) 0%, rgba(29,35,39,.06) 50%, rgba(29,35,39,.40) 100%);
  }
  .home-hero__content { padding: 34px var(--pad-side) 46px; background: var(--navy); }
}