/* =====================================================================
   Crossbridge - Homepage enhancements (full-bleed hero + motion)
   ---------------------------------------------------------------------
   Loaded ONLY by index.html, on top of styles.css. Every rule is scoped
   to `body.home`, so it can never affect the other pages even if linked
   elsewhere. Pairs with home.js.

   What it does:
     1. Turns the header transparent while it sits over the hero, then
        restores the normal solid header once you scroll past it.
     2. Replaces the side-gradient hero with a full-viewport, full-bleed
        image, brand-blue scrim, and the same headline / CTAs / microcopy.
     3. Sets up the "aggressive" motion (entrance + scroll parallax +
        punchier section reveals). Transforms during scroll are applied
        inline by the JS; this file owns the entrance + resting states.
   ===================================================================== */

:root {
  --ease-hero: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------
   1. Transparent header over the hero
   ------------------------------------------------------------------- */
.home .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background 0.3s var(--ease-hero),
    box-shadow 0.3s var(--ease-hero), border-color 0.3s var(--ease-hero),
    backdrop-filter 0.3s var(--ease-hero);
}
/* Soft dark scrim behind the transparent header so the white nav text stays
   legible over the hero. Fades out once the header turns solid on scroll. */
.home .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6, 20, 30, 0.74) 0%,
    rgba(6, 20, 30, 0.42) 60%,
    rgba(6, 20, 30, 0) 100%
  );
  opacity: 1;
  transition: opacity 0.3s var(--ease-hero);
}
.home .site-header.is-scrolled::before { opacity: 0; }
.home .site-header .nav-links a { color: rgba(255, 255, 255, 0.9); }
.home .site-header .nav-links a:hover { color: #fff; }
.home .site-header .nav-links a::after { background: var(--seagull); }
/* Phone number: bold + button-sized so it stands apart from the nav links */
.home .nav-phone {
  font-size: var(--text-medium);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.home .site-header .brand img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s var(--ease-hero);
}
.home .site-header .nav-toggle span { background: #fff; }

/* Restored solid header after scrolling past the hero */
.home .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  box-shadow: var(--shadow-sm);
  border-bottom-color: rgba(6, 10, 12, 0.06);
}
.home .site-header.is-scrolled .nav-links a { color: var(--neutral-darker); }
.home .site-header.is-scrolled .nav-links a:hover { color: var(--blue); }
.home .site-header.is-scrolled .nav-links a::after { background: var(--blue); }
.home .site-header.is-scrolled .brand img { filter: none; }
.home .site-header.is-scrolled .nav-toggle span { background: var(--neutral-darker); }

/* The dropdown panel is white in BOTH header states, so its links must
   stay dark (the transparent-header white rule above would hide them). */
.home .site-header .nav-submenu a { color: var(--neutral-darker); }
.home .site-header .nav-submenu a:hover { color: var(--blue); }
/* Over the hero (header transparent), keep the dropdown frosted + translucent
   for the glass effect; once scrolled it uses the readable near-solid default. */
.home .site-header:not(.is-scrolled) .nav-submenu {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Mobile: the open menu panel is solid white, so its links + phone must be
   dark even while the header bar is transparent over the hero. (The logo
   and hamburger live in the bar and stay white - rules above.) */
@media (max-width: 991px) {
  .home .site-header .nav-links a,
  .home .site-header .nav-submenu a,
  .home .site-header .nav-phone { color: var(--neutral-darker); }
  .home .site-header .nav-links a:hover,
  .home .site-header .nav-submenu a:hover,
  .home .site-header .nav-phone:hover { color: var(--blue); }
}

/* ---------------------------------------------------------------------
   2. Full-bleed hero
   ------------------------------------------------------------------- */
.home .hero-full {
  position: relative;
  z-index: 0;
  min-height: 100vh; /* fallback for browsers without svh (Safari < 15.4) */
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--blue-darkest);
  /* pull up under the transparent (fixed-height) header */
  margin-top: -76px;
  padding-top: 76px;
  will-change: transform;
}

.home .hero-full-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.home .hero-full-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  transform: scale(1.16);
  will-change: transform;
}

/* Brand-blue scrim: heavier on the left where the copy sits, plus a
   soft bottom fade so the scroll cue and section seam read cleanly. */
.home .hero-full-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      90deg,
      rgba(9, 42, 63, 0.94) 0%,
      rgba(12, 56, 84, 0.8) 34%,
      rgba(12, 56, 84, 0.42) 62%,
      rgba(12, 56, 84, 0.12) 100%
    ),
    linear-gradient(
      0deg,
      rgba(6, 20, 30, 0.6) 0%,
      rgba(6, 20, 30, 0) 42%
    );
}

.home .hero-full .container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.home .hero-full-inner {
  max-width: 44rem;
  padding-block: 3rem;
  will-change: transform, opacity;
}

.home .hero-kicker {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--text-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seagull);
  margin-bottom: 1.25rem;
}
.home .hero-full-inner h1 {
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 1.02;
  color: #fff;
  margin-bottom: 1.5rem;
}
.home .hero-full-inner h1 .accent { color: var(--seagull); }
.home .hero-full-inner .lead {
  max-width: 36rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.9);
}

/* reuse .hero-cta / .hero-microcopy from styles.css (already white-friendly) */

/* ---------------------------------------------------------------------
   Scroll cue
   ------------------------------------------------------------------- */
.home .hero-scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.home .hero-scroll-cue:hover { color: #fff; }
.home .hero-scroll-cue svg {
  width: 22px;
  height: 22px;
  animation: cbb-cue-bob 1.9s var(--ease-hero) infinite;
}
@keyframes cbb-cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* Sections after the hero must paint over it during the parallax
   "curtain". They're already opaque; lift their stacking level so the
   overlap is drawn on top. */
.home .hero-full ~ section {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------
   3. Motion - entrance (resting states; scroll transforms live in JS)
   ------------------------------------------------------------------- */
/* Hero background zoom settles in on load */
.home.hero-ready .hero-full-bg img {
  transform: scale(1);
  transition: transform 2.1s var(--ease-hero);
}

/* Hero copy rises + fades in, staggered top-to-bottom */
.home .hero-anim {
  opacity: 0;
  transform: translateY(34px);
}
.home.hero-ready .hero-anim {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease-hero), transform 0.9s var(--ease-hero);
}
.home.hero-ready .hero-full-inner .hero-anim:nth-child(1) { transition-delay: 0.15s; }
.home.hero-ready .hero-full-inner .hero-anim:nth-child(2) { transition-delay: 0.27s; }
.home.hero-ready .hero-full-inner .hero-anim:nth-child(3) { transition-delay: 0.39s; }
.home.hero-ready .hero-full-inner .hero-anim:nth-child(4) { transition-delay: 0.51s; }
.home.hero-ready .hero-full-inner .hero-anim:nth-child(5) { transition-delay: 0.63s; }
.home.hero-ready .hero-scroll-cue { transition-delay: 0.9s; }

/* ---------------------------------------------------------------------
   Section reveals - same clean rise as the live site, just a little more
   presence: bigger travel + a longer, smoother throw. No blur, no scale.
   ------------------------------------------------------------------- */
.home .reveal.is-visible {
  animation: cbb-reveal-rise 1s var(--ease-expo) var(--reveal-delay, 0ms) backwards;
}
@keyframes cbb-reveal-rise {
  from {
    opacity: 0;
    transform: translateY(44px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Per-item cascade for the 10 process steps + the confidentiality list.
   (These override the default rise for those specific elements - must
   come after the .reveal rule above.) */
/* Deal Journey steps: cascade in when their PARENT CARD reveals.
   Keyed to `.phase-group.is-visible` (which the scroll observer sets
   reliably on each card) rather than observing each tiny <li> - that
   per-item detection was flaky near the fold. Each step slides in from
   the left and its number badge pops, staggered within the card. */
.home .pg-steps li { opacity: 0; }
.home .phase-group.is-visible .pg-steps li:nth-child(1) { --step-d: 0.30s; }
.home .phase-group.is-visible .pg-steps li:nth-child(2) { --step-d: 0.45s; }
.home .phase-group.is-visible .pg-steps li:nth-child(3) { --step-d: 0.60s; }
.home .phase-group.is-visible .pg-steps li {
  animation: cbb-step-in 0.65s var(--ease-expo) var(--step-d, 0s) both;
}
@keyframes cbb-step-in {
  from { opacity: 0; transform: translateX(-38px); }
  to { opacity: 1; transform: none; }
}
.home .phase-group.is-visible .pg-steps li .pg-num {
  animation: cbb-num-pop 0.55s var(--ease-hero) var(--step-d, 0s) both;
}
@keyframes cbb-num-pop {
  0% { opacity: 0; transform: scale(0.2); }
  65% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

/* Confidentiality lock badge pops in */
.home .lock-pop.is-visible {
  animation: cbb-lock-pop 0.75s var(--ease-hero) backwards;
}
@keyframes cbb-lock-pop {
  0% { opacity: 0; transform: scale(0.55) rotate(-8deg); }
  60% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------
   Testimonials - single-item side-scroll carousel
   ------------------------------------------------------------------- */
.home .tcar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  max-width: 62rem;
  margin-inline: auto;
}
.home .tcar-viewport { overflow: hidden; }
.home .tcar-track {
  display: flex;
  transition: transform 0.6s var(--ease-hero);
  will-change: transform;
}
.home .tcar-track .testimonial-card {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  padding: 2.75rem;
}
.home .tcar-track .testimonial-card blockquote {
  font-size: var(--text-large);
  line-height: 1.55;
}
.home .tcar-track .testimonial-card .stars svg { width: 22px; height: 22px; }

.home .tcar-arrow {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(6, 10, 12, 0.15);
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-dark);
  cursor: pointer;
  transition: background 0.2s var(--ease-hero), color 0.2s var(--ease-hero),
    box-shadow 0.2s var(--ease-hero), transform 0.2s var(--ease-hero);
}
.home .tcar-arrow:hover {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.home .tcar-arrow svg { width: 22px; height: 22px; }

.home .tcar-dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
}
.home .tcar-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(12, 56, 84, 0.22);
  cursor: pointer;
  transition: background 0.25s var(--ease-hero), width 0.25s var(--ease-hero),
    border-radius 0.25s var(--ease-hero);
}
.home .tcar-dot:hover { background: rgba(12, 56, 84, 0.4); }
.home .tcar-dot.is-active {
  background: var(--blue);
  width: 26px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------
   Footer logo - enlarged on this page (44px base → +50% → +25% more)
   ------------------------------------------------------------------- */
.home .brand-footer img { height: 82px; }

/* ---------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------- */
@media (max-width: 991px) {
  .home .hero-full-bg img { object-position: center; }
  .home .hero-full-scrim {
    background: linear-gradient(
        180deg,
        rgba(9, 42, 63, 0.72),
        rgba(9, 42, 63, 0.9)
      ),
      linear-gradient(90deg, var(--blue-darkest), rgba(12, 56, 84, 0.4));
  }
  .home .hero-full-inner { max-width: none; }
  .home .tcar { gap: 0.5rem; }
  .home .tcar-arrow { width: 2.4rem; height: 2.4rem; }
  .home .tcar-arrow svg { width: 18px; height: 18px; }
  .home .tcar-track .testimonial-card { padding: 1.75rem; }
}

/* ---------------------------------------------------------------------
   Reduced motion - everything resting, no entrance/parallax/reveal
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home .hero-full-bg img { transform: scale(1.02) !important; transition: none !important; }
  .home .hero-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .home .hero-scroll-cue svg { animation: none !important; }
  .home .reveal.is-visible { animation: none !important; }
  .home .tcar-track { transition: none !important; }
  .home .pg-steps li { opacity: 1 !important; animation: none !important; }
  .home .pg-num { animation: none !important; }
  .home .hero-full,
  .home .hero-full-inner { transform: none !important; opacity: 1 !important; }
}


/* =====================================================================
   Tailored sale process (#approach) - full-bleed split
   Copy on the left half; photo bleeds in from the right edge.
   The image already carries clean negative space on the left, so a soft
   white scrim guarantees the copy stays legible where they overlap.
   ------------------------------------------------------------------- */
.home .tailored-band {
  position: relative;
  overflow: hidden;
  background: var(--white);
}
.home .tailored-photo {
  position: absolute;
  inset: 0;
  background: url("assets/images/tailored-review.jpg") right center / cover no-repeat;
  z-index: 0;
}
@media (min-width: 992px) {
  .home .tailored-photo { background-size: auto 116%; background-position: right center; }
}
.home .tailored-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--white) 0%,
    var(--white) 32%,
    rgba(255, 255, 255, 0.6) 46%,
    rgba(255, 255, 255, 0) 64%
  );
}
.home .tailored-band .container { position: relative; z-index: 1; }
.home .tailored-content { max-width: 40rem; }
.home .tailored-content h2 { margin-bottom: 1.25rem; }
.home .tailored-content .lead { margin-bottom: 1.75rem; }

@media (max-width: 991px) {
  .home .tailored-photo { background-position: right center; }
  .home .tailored-photo::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.94)),
      linear-gradient(90deg, var(--white), rgba(255, 255, 255, 0.45));
  }
  .home .tailored-content { max-width: none; }
}


/* =====================================================================
   About Crossbridge (#intro) - bridge photo bleeds from the left,
   copy sits on the right half. Mirrors the Tailored split for alternation.
   Photo is flipped so the pylon anchors the visible left; the scrim is a
   separate (unflipped) layer that fades the image into the copy on the right.
   ------------------------------------------------------------------- */
.home .about-split { position: relative; overflow: hidden; }
.home .about-split-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/images/about-hero-bridge.jpg") center center / cover no-repeat;
  transform: scaleX(-1);
}
.home .about-split-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(250, 250, 252, 0) 0%,
    rgba(250, 250, 252, 0.2) 30%,
    var(--gray-lighter) 56%,
    var(--gray-lighter) 100%
  );
}
.home .about-split .container { position: relative; z-index: 1; }
.home .about-split-content { max-width: 38rem; margin-left: auto; }
.home .about-split-content h2 { margin-bottom: 1.25rem; }
.home .about-split-content .lead { margin-bottom: 2rem; }

@media (max-width: 991px) {
  .home .about-split-scrim {
    background: linear-gradient(180deg, rgba(250, 250, 252, 0.86), rgba(250, 250, 252, 0.93)),
      linear-gradient(90deg, rgba(250, 250, 252, 0.35), var(--gray-lighter));
  }
  .home .about-split-content { max-width: none; }
}

/* =====================================================================
   Credentials ribbon - accreditation logos on white chips
   The four marks (IBBA, Master CBI, CM&AP, RECO) differ in colour and
   shape, so each sits on a uniform white chip. Badges and wordmarks get
   different heights so they read as optically balanced.
   ------------------------------------------------------------------- */
/* =====================================================================
   Accreditations - static strip of four cards (logo above label)
   ------------------------------------------------------------------- */
/* Accreditations now live at the foot of "Why Crossbridge" as validation */
.home .cred-block { margin-top: 3.5rem; }
.home .cred-block-label {
  display: block;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--text-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.75rem;
}
.home .cred-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.home .cred-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.1rem;
  min-height: 190px;
  padding: 1.75rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(6, 10, 12, 0.08);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.home .cred-card img {
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
.home .cred-card.is-badge img { height: 84px; } /* circular badges: Master CBI, CM&AP */
/* Master CBI art only fills ~78% of its frame; scale up to match CM&AP's ring. */
.home .cred-card.is-badge img[src*="master-cbi"] { height: 108px; }
.home .cred-card.is-mark img { height: 46px; }  /* wide wordmark: IBBA */
.home .cred-card.is-mark img[src*="reco"] { height: 80px; } /* RECO bumped +75% */
.home .cred-cap {
  max-width: 100%;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--blue-darker);
}
@media (max-width: 991px) {
  .home .cred-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .home .cred-grid { grid-template-columns: 1fr; }
}