/* bb-growth-call.css — /growth-call/ only.
   New bb-gc-* classes only. Shared classes (bb-wrap, bb-btn, bb-page-hero,
   bb-page-hero-badge) come from globals.css and bb-pillar.css and are never
   redeclared here. */

/* ---------- Headings ----------
   Astra's global heading rule applies text-transform:capitalize to h1-h6,
   which turns "and" into "And". Every heading class here opts out. */
.bb-gc-h1,
.bb-gc-h2,
.bb-gc-card h3,
.bb-gc-step h3,
.bb-gc-faq-item summary {
  text-transform: none !important;
}

.bb-gc-h1 {
  color: #FFFFFF !important;
  font-size: clamp(1.7rem, 2.45vw, 2.3rem) !important;
  line-height: 1.16 !important;
  font-weight: 800 !important;
  margin: 16px 0 0 !important;
}
.bb-gc-h1 em,
.bb-gc-h2 em {
  color: var(--bb-or);
  font-style: normal;
}

.bb-gc-h2 {
  font-size: clamp(1.6rem, 3vw, 2.15rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
}
.bb-gc-h2--light {
  color: #FFFFFF !important;
}

/* ---------- Hero: wide, scannable, and it points at the calendar ---------- */
.bb-gc-hero {
  padding: 88px 0 30px !important;
  text-align: center;
}
.bb-gc-hero-copy {
  max-width: 1180px;
  margin: 0 auto;
}
.bb-gc-promise {
  margin: 14px auto 0 !important;
  font-size: 1.12rem;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 600;
  max-width: 62ch;
}

/* Three facts across, so the hero reads in one glance instead of stacking */
.bb-gc-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 14px 0 0;
  text-align: left;
}

/* Directional line into the calendar: a real link, so it scrolls on click */
.bb-gc-direct-wrap {
  margin: 26px 0 0 !important;
}

.bb-gc-trustline {
  margin: 22px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.88rem;
  color: #C6CFDA;
  line-height: 1.6;
  display: inline-block;
}
.bb-gc-trustline strong { color: var(--bb-or); font-weight: 700; }

/* ---------- Calendar: its own section, straight after the hero ---------- */
.bb-gc-book {
  scroll-margin-top: 96px;
  background: var(--bb-off);
  padding: 44px 0 72px;
}
/* No wrapper card, no background of our own: Calendly's card is the only card.
   Below roughly 1000px of frame width Calendly drops the three-column layout
   and stacks, so this width is a floor, not a preference. */
.bb-gc-embed {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  /* Fills the 1200px container. Height is explicit, never auto: the iframe is
     height:100%, so an auto container resolves circularly to zero. */
  max-width: none;
  margin: 0 auto;
  height: 720px !important;
}
.bb-gc-embed iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Hides Calendly's "Privacy Policy" link at the foot of the details panel.
   The link is inside a cross-origin iframe and cannot be removed or restyled,
   so this is a patch painted over it in the panel's own white.

   Positioning depends on Calendly centring its card inside the frame. Measured
   in the three-column state: a 1060x716 frame renders a 954x588 card, leaving
   53px either side and a 64px gap top and bottom. The patch is offset to those
   numbers. An earlier attempt anchored to bottom:1px and landed below the card
   because it ignored that 64px gap.

   Gated to widths where the three-column layout is guaranteed. Narrower than
   that Calendly stacks the panel on top and the patch would cover the wrong
   thing, so it is switched off. */
/* RECALIBRATED 2026-08-21 for the widened 1152x720 frame. The old 1060x716
   offsets put the patch above the link and, after the frame grew, left a white
   block floating below the card. Measured by pixel from a 1440px screenshot:
   card occupies x 203..1236, y 152..738 inside the frame, and the link sits
   flush at the card's left edge, clipped by the card's bottom.

   Gated to >=1340px, where the 1200px container is fully expanded so the frame
   is exactly 1152px and this geometry holds. Below that the frame width varies,
   the centred card shifts, and a fixed offset would cover the wrong thing. */
@media (min-width: 1340px) {
  .bb-gc-embed::after {
    content: "";
    position: absolute;
    left: 59px;
    bottom: 81px;
    width: 92px;
    height: 30px;
    background: #FFFFFF;
    pointer-events: none;
    z-index: 2;
    /* Painted only once there is something underneath to patch. Calendly takes
       a few seconds, and the patch used to appear instantly, so a bare white
       rectangle floated over an empty frame the whole time it loaded. */
    opacity: 0;
  }
  /* Calendly injects its iframe when it initialises, so :has(iframe) ties the
     patch to the real load instead of a guessed timer. The extra delay covers
     the gap between the iframe existing and the card painting inside it.
     Measured: the iframe exists by ~0.7s, well before the card is drawn, so the
     delay is doing the real work. 2.2s is deliberately generous. Appearing late
     just means Calendly's own link shows for another moment; appearing early is
     the actual complaint.
     If :has() is unsupported the patch simply never appears and Calendly's own
     Privacy Policy link shows, which is the safe direction to fail. */
  .bb-gc-embed:has(iframe)::after {
    animation: bbCalPatchIn 260ms ease 2200ms forwards;
  }
}

@keyframes bbCalPatchIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- What we will cover: connected four-step flow ----------
   Per VISUAL-SYSTEM-SPEC section 4: dark surface carried by a dot grid rather
   than left flat, orange accents on charcoal, connected nodes for a sequence. */
.bb-gc-cover {
  position: relative;
  /* `overflow: hidden` makes this a SCROLL CONTAINER, which silently broke the
     step reveal below: animation-timeline: view() resolves against the nearest
     scrollport, so it measured each node inside this section, where the node
     never moves. The timeline froze at 41.9% at every scroll position and the
     animation sat permanently finished.
     `overflow: clip` clips identically but does NOT create a scroll container,
     so view() resolves against the document. `hidden` is kept first as the
     fallback for anything that does not know `clip`; there the reveal simply
     does not run and the nodes stay visible, which is the intended default. */
  overflow: hidden;
  overflow: clip;
  background: #0B121B;
  padding: 96px 0;
}
.bb-gc-grid-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bb-gc-cover-inner {
  position: relative;
  z-index: 1;
}
.bb-gc-cover .bb-gc-h2 {
  margin: 14px 0 44px !important;
}

/* Four nodes on one connecting rail */
.bb-gc-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
/* The rail: sits behind the numbers, aligned to their centre */
.bb-gc-flow::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 106, 0, 0) 0%,
    rgba(255, 106, 0, 0.45) 12%,
    rgba(255, 106, 0, 0.45) 88%,
    rgba(255, 106, 0, 0) 100%);
}
.bb-gc-node {
  position: relative;
  padding-top: 0;
}
.bb-gc-node-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0B121B;
  border: 1px solid rgba(255, 106, 0, 0.55);
  color: var(--bb-or);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.bb-gc-node h3 {
  color: #FFFFFF !important;
  font-size: 1.02rem !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
  text-transform: none !important;
}
.bb-gc-node p {
  color: #AEB8C4 !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
.bb-gc-node strong { color: #E4EAF1; }


/* ---------- FAQ ---------- */
.bb-gc-faq {
  background: #FFFFFF;
  padding: 96px 0;
}
.bb-gc-faq-list {
  margin-top: 28px;
  max-width: 860px;
}

/* 60/40 with a sticky aside, matching the standard FAQ layout in bb-pillar.css.
   This page's FAQ ran as one narrow centred column with the whole right side
   empty and no CTA anywhere in the block, which on a booking page is the one
   place a reader is most likely to decide. The card reuses bb-faq-card and
   friends from bb-pillar.css, already loaded here, so no new card styling. */
.bb-gc-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: 56px; align-items: start; margin-top: 28px;
}
.bb-gc-faq-grid .bb-gc-faq-list { margin-top: 0; max-width: none; }
.bb-gc-faq-aside { min-width: 0; position: sticky; top: 120px; }
@media (max-width: 1024px) {
  /* Stacked, card first: on a phone the promise plus the CTA is more useful
     above ten collapsed questions than below them. */
  .bb-gc-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .bb-gc-faq-aside { position: static; order: -1; }
}
.bb-gc-faq-item {
  border: 1px solid var(--bb-border);
  border-radius: 10px;
  background: #FFFFFF;
  margin-bottom: 12px;
}
.bb-gc-faq-item summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 1rem;
  color: #111827;
  list-style: none;
  position: relative;
  padding-right: 52px;
}
.bb-gc-faq-item summary::-webkit-details-marker { display: none; }
.bb-gc-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: #C24A00;
  line-height: 1;
}
.bb-gc-faq-item[open] summary::after { content: "\2212"; }
.bb-gc-faq-item summary:focus-visible {
  outline: 2px solid var(--bb-or);
  outline-offset: -2px;
}
.bb-gc-faq-a {
  padding: 0 22px 20px;
}
.bb-gc-faq-a p {
  margin: 0 !important;
  color: #4F5B68 !important;
  font-size: 0.96rem !important;
  line-height: 1.7 !important;
}

/* ---------- Fallback door: quiet text link, never competing with the calendar ---------- */
.bb-gc-fallback {
  background: #FFFFFF;
  padding: 40px 0;
  border-top: 1px solid var(--bb-border);
}
.bb-gc-fallback-p {
  margin: 0 !important;
  font-size: 0.95rem;
  color: #4F5B68;
  text-align: center;
}
.bb-gc-fallback-p a {
  color: #C24A00;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .bb-gc-promise { max-width: none; }
}
@media (max-width: 900px) {
  .bb-gc-facts { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 1024px) {
  .bb-gc-flow { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
  .bb-gc-flow::before { display: none; }
}
@media (max-width: 620px) {
  .bb-gc-flow { grid-template-columns: 1fr; }
  .bb-gc-node:not(:last-child)::after { display: none; }
}
@media (max-width: 700px) {
  .bb-gc-cover, .bb-gc-faq { padding: 60px 0; }
  .bb-gc-hero { padding: 84px 0 36px !important; }
  .bb-gc-book { padding: 28px 0 48px; }
  .bb-gc-embed { height: 1000px !important; }
  .bb-gc-hero { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-gc-faq-item,
  .bb-gc-direct,
  .bb-gc-arrow { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   SOFT SIGNAL, PROOF, FOUNDER   (added 2026-08-21)
   #FF6A00 measures 2.87:1 on white and fails AA, so every orange
   on these light grounds is #BA4700, verified 5.26:1 on #FFFFFF
   and 5.02:1 on the founder's #FFF8F2.
═══════════════════════════════════════════════════════════ */

/* Calendly renders its own internal top padding and its left panel is taller
   than the default embed height, which clipped the description mid-sentence.
   Height is set here; the internal padding is a Calendly-side setting. */

.bb-gc-soft {
  max-width: 760px; margin: 24px auto 0; text-align: center;
  font-size: 0.9375rem; line-height: 1.7; color: #4F5B68;
}
.bb-gc-soft strong { color: #111827; font-weight: 600; }

.bb-gc-proof { padding: 96px 0; background: #FFFFFF; }
.bb-gc-proof .bb-gc-h2 { margin: 14px 0 40px; }
.bb-gc-quotes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
/* Declared scoped: bb-quote-block is not a bb-pillar component, and a page
   file must not claim a shared name. */
.bb-gc-proof .bb-quote-block {
  margin: 0 !important; padding: 0 0 0 20px !important;
  border-left: 3px solid var(--bb-or) !important;
  border-radius: 0 !important; background: none !important;
}
.bb-gc-proof .bb-quote-block p {
  font-size: 1rem !important; line-height: 1.7 !important;
  color: #111827 !important; font-style: italic; margin: 0 0 12px !important;
}
.bb-gc-proof .bb-quote-block cite {
  display: block; font-style: normal; font-size: 0.8125rem;
  font-weight: 600; color: #4F5B68; line-height: 1.5;
}

.bb-gc-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; margin: 56px 0 0; padding: 32px 0 0;
  border-top: 1px solid var(--bb-border);
}
.bb-gc-stat { min-width: 0; text-align: center; }
.bb-gc-stat-n {
  display: block; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800;
  color: #BA4700; line-height: 1.15; letter-spacing: -0.01em;
}
.bb-gc-stat-l {
  display: block; margin: 10px auto 0; max-width: 30ch;
  font-size: 0.875rem; line-height: 1.55; color: #4F5B68;
}

.bb-gc-founder { padding: 96px 0; background: #FFF8F2; }
.bb-gc-founder-inner {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px; align-items: start;
}
.bb-gc-founder-frame {
  position: relative; background: #FFFFFF;
  border: 2px solid rgba(255,106,0,0.25); border-radius: 14px;
  aspect-ratio: 4 / 5; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.bb-gc-founder-frame .bb-img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
  /* The photo is 1890x2560 (0.738), taller than this 4:5 frame, so cover
     discards ~8% of its height. Centred, that took ~4% off the top and cut into
     the head. Anchoring to the top puts the whole crop at the bottom, where it
     only trims the chest. */
  object-position: center top !important;
}
/* Belt and braces: a raw <img> pasted in without the bb-img class still sits
   above the placeholder wash rather than under it. */
.bb-gc-founder-frame img { position: relative; z-index: 1; }
/* The shared placeholder bakes in a dark rectangle, which reads as a grey slab
   on this white frame. Paint the light variant at 40% instead and hide the
   unset image; a real photo covers it with no CSS change. */
.bb-gc-founder-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.4;
  background: #FFFFFF url("https://www.blazebytesolutions.com/wp-content/themes/astra-child/img/bb-slot-placeholder-light.svg") center / auto 34% no-repeat;
}
.bb-gc-founder-frame .bb-img { position: relative; z-index: 1; }
.bb-gc-founder-frame .bb-img--placeholder { visibility: hidden; }
.bb-gc-founder-copy { max-width: 620px; }
.bb-gc-founder-name {
  font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 800; color: var(--bb-or);
  line-height: 1.1; margin: 14px 0 6px; text-transform: none !important;
}
.bb-gc-founder-role {
  font-size: 1.125rem; font-weight: 600; color: #0A0E14; margin: 0 0 24px;
}
.bb-gc-founder-quote {
  margin: 0 0 24px !important; padding: 0 0 0 20px !important;
  border-left: 2px solid var(--bb-or) !important;
  border-radius: 0 !important; background: none !important;
}
.bb-gc-founder-quote p {
  font-size: 1.125rem !important; line-height: 1.6 !important;
  font-style: italic; color: #111827 !important; margin: 0 !important;
}
.bb-gc-founder-bio {
  font-size: 1rem !important; line-height: 1.7 !important; color: #374151 !important; margin: 0 0 18px !important;
}
.bb-gc-founder-agency {
  font-size: 0.9375rem !important; line-height: 1.7 !important; color: #6B7280 !important; margin: 0 0 22px !important;
}
.bb-gc-founder-creds {
  font-size: 0.875rem !important; color: #374151 !important; margin: 0 0 26px !important; line-height: 1.6;
}
.bb-gc-founder-creds strong { color: #BA4700; font-weight: 700; }
.bb-gc-founder-cta { margin: 0 !important; }

/* Secondary but legible: was small grey text reading as disabled. */
.bb-gc-fallback-p { font-size: 1rem !important; color: #4F5B68 !important; }
.bb-gc-fallback-p a {
  color: #BA4700 !important; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1024px) {
  .bb-gc-quotes, .bb-gc-stats { grid-template-columns: 1fr; }
  .bb-gc-founder-inner { grid-template-columns: 1fr; gap: 32px; }
  .bb-gc-founder-frame { max-width: 260px; }
}
@media (max-width: 700px) {
  .bb-gc-proof, .bb-gc-founder { padding: 56px 0; }
  .bb-gc-stats { margin-top: 40px; gap: 28px; }
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT PASS 2026-08-21
   Appended after the existing media queries, so every responsive
   rule this block overrides is re-declared at the foot.
═══════════════════════════════════════════════════════════ */

/* 1. Calendar: the page's purpose, sized like it.
   min-height is 720 rather than 780. Calendly renders a fixed ~592px card
   plus ~122px of its own top padding, so anything above ~715px is empty
   white inside the iframe. 780 was creating the blank block beneath it. */
.bb-gc-book { padding: 40px 0 96px; }
.bb-gc-book .bb-wrap { max-width: 1200px; }
.bb-gc-soft { margin-top: 32px !important; }

/* 3. Hero */
.bb-gc-hero { padding: 88px 0 40px !important; }
.bb-gc-h1 { font-size: clamp(2.5rem, 5vw, 3.5rem) !important; }
.bb-gc-promise { font-size: 1.125rem !important; max-width: 640px !important; margin: 18px auto 0 !important; }
.bb-gc-trustline { margin: 32px 0 0 !important; font-size: 0.875rem !important; }

/* 4. Proof */
.bb-gc-proof { padding: 96px 0; }
/* The heading was sitting straight on top of the quote columns. */
.bb-gc-proof .bb-gc-h2 { margin: 16px 0 56px !important; }
.bb-gc-proof .bb-label { margin-bottom: 4px; }
.bb-gc-quotes { gap: 40px; align-items: stretch; }
.bb-gc-proof .bb-quote-block {
  display: flex; flex-direction: column;
  padding: 0 0 0 20px !important;
  border-left: 3px solid #BA4700 !important;
}
.bb-gc-proof .bb-quote-block p { font-size: 1.0625rem !important; line-height: 1.6 !important; margin: 0 !important; }
.bb-gc-proof .bb-quote-block cite { margin-top: 12px; font-size: 0.875rem; color: #6B7280; }
.bb-gc-stats { margin: 64px 0 0; padding: 0; border-top: none; gap: 48px; }
.bb-gc-stat-n { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 700; color: #BA4700; }
.bb-gc-stat-l { font-size: 0.875rem; color: #6B7280; max-width: 220px; }

/* 5. Understated return path to the calendar. */
.bb-gc-proof-cta { margin: 48px 0 0 !important; text-align: center; }
.bb-gc-ghost {
  display: inline-block; padding: 12px 26px;
  border: 1px solid rgba(186,71,0,0.4); border-radius: 8px;
  color: #BA4700 !important; font-weight: 600; font-size: 0.9375rem;
  text-decoration: none !important;
  transition: background 200ms ease, border-color 200ms ease;
}
.bb-gc-ghost:hover { background: rgba(255,106,0,0.07); border-color: #BA4700; }
.bb-gc-ghost:focus-visible { outline: 2px solid #BA4700; outline-offset: 3px; }

/* 6. Cover: the card treatment was reverted. rgba(255,255,255,0.03) panels on
   #0B121B read as dark-on-dark and lost the numbered nodes. Back to the
   connected flow, with the connector carrying real brand orange instead of a
   1px 45% wash that barely registered. */
.bb-gc-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
/* The single spanning line is off. Percentage endpoints cannot be made to land
   on the node centres reliably: measured, both a 12% and a half-column calc
   overshot by ~125px because the numeral is not centred in its column. Each
   node now draws its own segment to the next one instead, anchored to the
   numeral's real width, so there is no stub past the last node at any width. */
.bb-gc-flow::before { display: none; }
.bb-gc-node:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  top: 20px; left: 52px; right: -22px; height: 2px; border-radius: 2px;
  background: rgba(255,106,0,0.40);
}
/* Hierarchy, not decoration. Four identical 2px orange rings plus three solid
   orange bars gave every step the same weight, so the eye had no entry point and
   the accent stopped meaning anything. Step 01 is now filled and acts as the
   anchor, 02 to 04 are quiet outlines, the connector is thinner and lower
   opacity so it reads as a thread rather than competing bars, and the heading is
   the loudest thing in each column. */
.bb-gc-node-num {
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(255,106,0,0.35);
  color: #FF6A00; font-weight: 700; font-size: 0.82rem;
  box-shadow: 0 0 0 6px #0B121B;
}
.bb-gc-node:first-child .bb-gc-node-num {
  background: #FF6A00; border-color: #FF6A00; color: #0B121B; font-weight: 800;
}
.bb-gc-node { position: relative; }
.bb-gc-node h3 {
  font-size: 1.125rem !important; font-weight: 600 !important;
  margin-top: 20px !important; letter-spacing: -0.01em;
}
.bb-gc-node p { font-size: 0.9375rem !important; color: #A8AFBA !important; line-height: 1.65 !important; }
/* "On the call": stepped reveal, 01 to 02 to 03 to 04.
   Was scroll-driven, which was the wrong mechanism: a scroll timeline SCRUBS,
   so it is bound to where the page is and never plays as a sequence. Scroll
   fast and all four resolve at once; stop halfway and it freezes halfway.
   Now time-based, triggered once when the row enters view. The trigger lives in
   bb-growth-call.js, already enqueued here and already excluded from WP Rocket
   defer, delay and minify, so no new script and no new exclusions.
   The hidden start state applies ONLY under .is-armed, which only that script
   adds. If the JS is blocked or the browser has no IntersectionObserver, the
   class never lands and all four nodes render normally: the animation is an
   enhancement on a visible default, never a precondition for content.
   Each connector draws left to right after its node lands and before the next
   arrives, which is what makes it read as 01 leading to 02. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bbGcNodeRise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes bbGcLineDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  .bb-gc-flow.is-armed .bb-gc-node { opacity: 0; }
  .bb-gc-flow.is-armed .bb-gc-node::after { transform: scaleX(0); transform-origin: left center; }
  .bb-gc-flow.is-armed.is-revealed .bb-gc-node {
    animation: bbGcNodeRise 480ms cubic-bezier(.2,.7,.2,1) both;
  }
  .bb-gc-flow.is-armed.is-revealed .bb-gc-node::after {
    animation: bbGcLineDraw 280ms cubic-bezier(.2,.7,.2,1) both;
  }
  .bb-gc-flow.is-armed.is-revealed .bb-gc-node:nth-child(1)        { animation-delay: 0ms; }
  .bb-gc-flow.is-armed.is-revealed .bb-gc-node:nth-child(1)::after { animation-delay: 300ms; }
  .bb-gc-flow.is-armed.is-revealed .bb-gc-node:nth-child(2)        { animation-delay: 420ms; }
  .bb-gc-flow.is-armed.is-revealed .bb-gc-node:nth-child(2)::after { animation-delay: 720ms; }
  .bb-gc-flow.is-armed.is-revealed .bb-gc-node:nth-child(3)        { animation-delay: 840ms; }
  .bb-gc-flow.is-armed.is-revealed .bb-gc-node:nth-child(3)::after { animation-delay: 1140ms; }
  .bb-gc-flow.is-armed.is-revealed .bb-gc-node:nth-child(4)        { animation-delay: 1260ms; }
}

/* 7. Founder frame fills its column and tracks the long text column. */
.bb-gc-founder-inner { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
.bb-gc-founder-media { align-self: start; position: sticky; top: 120px; }
.bb-gc-founder-frame { width: 100%; max-width: none; aspect-ratio: 4 / 5; }
.bb-gc-founder-cap {
  display: block; margin-top: 12px; text-align: center;
  font-size: 0.8125rem; color: #6B7280; line-height: 1.5;
}

/* 9. Page ends on the booking action, not the weaker offer. */
.bb-gc-final { background: #0B121B; padding: 88px 0; text-align: center; }
.bb-gc-final-h2 {
  color: #FFFFFF !important; font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  margin: 0 0 14px !important; text-transform: none !important;
}
.bb-gc-final-p {
  color: #C6CFDA !important; font-size: 1.0625rem !important;
  line-height: 1.7 !important; max-width: 680px; margin: 0 auto 28px !important;
}
.bb-gc-final-cta { margin: 0 !important; }
/* Quiet secondary: the ready buyer keeps a zero-scroll path to the calendar
   without competing with the primary commercial action. */
.bb-gc-final-alt { margin: 18px 0 0 !important; }
.bb-gc-final-alt a {
  color: #C6CFDA !important; font-size: 0.9375rem; text-decoration: underline;
  text-underline-offset: 3px;
}
.bb-gc-final-alt a:hover { color: #FFFFFF !important; }
.bb-gc-fallback { padding: 28px 0 40px; border-top: none; }
.bb-gc-fallback-p { font-size: 0.875rem !important; color: #6B7280 !important; text-align: center; }
.bb-gc-fallback-p a { color: #BA4700 !important; font-weight: 600; }

/* FAQ */
.bb-gc-faq { padding: 96px 0; }
/* Was 800px, which was right for a single centred column of questions.
   The FAQ is now a 60/40 grid with an aside, and 800px squeezed that to
   418px of questions beside a 278px card. 1200px matches .bb-gc-book. */
.bb-gc-faq .bb-wrap { max-width: 1200px; }
.bb-gc-faq-sub { font-size: 0.9375rem !important; color: #6B7280 !important; margin: 10px 0 32px !important; }

/* ── responsive, re-declared because this block follows the originals ── */
@media (max-width: 1024px) {
  .bb-gc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 26px; }
  .bb-gc-node:not(:last-child)::after { display: none; }
  .bb-gc-founder-inner { grid-template-columns: 1fr; }
  .bb-gc-founder-media { position: static; max-width: 280px; }
  .bb-gc-quotes, .bb-gc-stats { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .bb-gc-flow { grid-template-columns: 1fr; }
  .bb-gc-node:not(:last-child)::after { display: none; }
  .bb-gc-hero { padding: 64px 0 48px !important; }
  .bb-gc-book { padding: 48px 0 56px; }
  .bb-gc-proof, .bb-gc-faq, .bb-gc-final { padding: 56px 0; }
  .bb-gc-quotes { gap: 32px; }
  .bb-gc-stats { margin-top: 48px; gap: 32px; }
}

/* Same three corrections as the homepage founder block: the placeholder wash
   must not paint behind a real photo, the biography carries a little more
   weight, and the opening quote hangs into the rule's padding. */
.bb-gc-founder-frame::before { display: none; }
.bb-gc-founder-frame:has(.bb-img--placeholder)::before { display: block; }
.bb-gc-founder-bio { font-weight: 500 !important; }
.bb-gc-founder-quote { border-left-width: 3px !important; }
.bb-gc-founder-quote p { text-indent: -0.42em; }
.bb-gc-founder-cap { font-size: 0.875rem; font-weight: 600; color: #4B5563; }


/* FAQ answer links. The growth-call FAQ is its own component (.bb-gc-faq-*), so it
   never inherited .bb-faq-a a from bb-pillar.css and its links rendered #FF6A00,
   which is 2.9:1 on the white FAQ ground and fails AA. Matches the canonical rule. */
.bb-gc-faq-a a { color: #C24A00 !important; font-weight: 600 !important; text-decoration: none !important; }
.bb-gc-faq-a a:hover { text-decoration: underline !important; }