/* ==========================================================================
   Influex — combined stylesheet (generated)

   Concatenated in dependency order:
     1. Influex Design System/colors_and_type.css   (tokens, fonts)
     2. Influex Design System/ui_kits/website/site.css
     3. styles-sales.css
     4. styles-brandconsult.css                     (overrides sales)

   The @import rules that previously wired these together are removed;
   the Google Fonts @import is hoisted below because CSS requires
   @import to precede all other rules. Montserrat @font-face paths are
   rebased from fonts/ to Influex%20Design%20System/fonts/ since this
   file sits in Homepage/ rather than in the design-system folder.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;700&family=Great+Vibes&display=swap');



/* ==========================================================================
   == 1. colors_and_type.css — tokens, fonts, base typography
   ========================================================================== */

/* ==========================================================================
   Influex Design System — colors_and_type.css
   Drop-in stylesheet. Loads Google Font fallbacks; wire local webfonts in
   fonts/ if licensed copies are available (Montserrat is OFL-licensed and
   already bundled).
   ========================================================================== */

/* Local Montserrat faces (uploaded TTFs) */
@font-face {
    font-family: 'Montserrat'; src: url('Influex%20Design%20System/fonts/Montserrat-Thin.ttf') format('truetype');    font-weight: 100; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'Montserrat'; src: url('Influex%20Design%20System/fonts/Montserrat-Light.ttf') format('truetype');   font-weight: 300; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'Montserrat'; src: url('Influex%20Design%20System/fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'Montserrat'; src: url('Influex%20Design%20System/fonts/Montserrat-Bold.ttf') format('truetype');    font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'Montserrat'; src: url('Influex%20Design%20System/fonts/Montserrat-Black.ttf') format('truetype');   font-weight: 900; font-style: normal; font-display: swap;
}


/* Remaining families (Poppins body, Inter micro, Great Vibes script) pulled from Google Fonts until licensed copies ship */

/* ------------------------------------------------------------------
   Color tokens — base
------------------------------------------------------------------ */
:root {
  /* Obsidian stage */
    --color-obsidian: #000000;
    --color-graphite: #141414;
    --color-graphite-2: #1A1A1A;
  /* Ivory / paper on dark */
    --color-ivory: #FEF7DF;
    --color-ivory-muted: rgba(254, 247, 223, 0.70);
    --color-ivory-dim: rgba(254, 247, 223, 0.45);
  /* Champagne / metal */
    --color-champagne: #ECC777;
    --color-champagne-soft: #FFF2C6;
    --color-champagne-deep: #BD8332;
    --color-rose-copper: #C98A73;
  /* Mauve iridescence */
    --color-mauve: #D693FF;
    --color-mauve-soft: #CCBBFF;
    --color-pearl: #EFE0CC;
  /* Semantic foregrounds */
    --fg-1: var(--color-ivory);
             /* primary text */
    --fg-2: var(--color-ivory-muted);
       /* secondary text */
    --fg-3: var(--color-ivory-dim);
         /* tertiary, captions */
    --fg-accent: var(--color-champagne);
         /* accent text */
    --fg-accent-deep: var(--color-champagne-deep);
  /* Semantic backgrounds */
    --bg-0: var(--color-obsidian);
    --bg-1: var(--color-graphite);
    --bg-2: var(--color-graphite-2);
    --bg-glass: rgba(10, 10, 10, 0.60);
  /* Borders / rules */
    --rule-hairline: rgba(236, 199, 119, 0.60);
    --rule-whisper: rgba(255, 255, 255, 0.12);
    --rule-dashed: rgba(208, 208, 208, 0.30);
  /* Signature gradients */
    --grad-authority: linear-gradient(135deg, #F2E8D8 0%, #D9B97D 38%, #C98A73 68%, #BDA6D8 100%);
    --grad-expression: linear-gradient(90deg, rgba(242,232,216,0.95) 0%, rgba(201,138,115,0.85) 48%, rgba(189,166,216,0.92) 100%);
    --grad-ceremonial: linear-gradient(90deg, rgba(217,185,125,0) 0%, rgba(217,185,125,1) 50%, rgba(189,166,216,0.8) 100%);
    --grad-logo-x: linear-gradient(135deg, #B273C9 0%, #CCBBFF 43%, #E987B3 75%, #F87FA0 100%);
    --grad-logo-x-warm: linear-gradient(135deg, #FF6358 0%, #FFA5AF 43%, #FEE191 77%, #FAAE60 100%);
  /* Shadow / elevation */
    --shadow-0: inset 0 1px 0 rgba(236, 199, 119, 0.12);
    --shadow-1: 0 24px 60px -20px rgba(0, 0, 0, 0.70);
    --shadow-2: 0 60px 120px -40px rgba(0, 0, 0, 0.85),
                           inset 0 1px 0 rgba(236, 199, 119, 0.24);
    --shadow-bloom: 0 0 120px 40px rgba(236, 199, 119, 0.08);
  /* Radii */
    --radius-0: 0px;
    --radius-sm: 2px;
    --radius-pill: 999px;
  /* Spacing scale (8pt) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;
    --space-11: 192px;
  /* Motion */
    --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 180ms;
    --dur-base: 600ms;
    --dur-slow: 900ms;
  /* Typefaces */
    --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Poppins', 'Montserrat', system-ui, sans-serif;
    --font-micro: 'Inter', 'Montserrat', system-ui, sans-serif;
    --font-script: 'Great Vibes', 'Cindoy Script', cursive;
   /* fallback — see caveats */
    --font-secondary-sans: 'Poppins', 'Gilroy', system-ui, sans-serif;
 /* fallback — see caveats */
}


/* ------------------------------------------------------------------
   Base / reset-ish
------------------------------------------------------------------ */
html, body {
    background: var(--bg-0);
    color: var(--fg-1);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    margin: 0;
}

::selection {
    background: var(--color-champagne);
    color: var(--color-obsidian);
}
/* ------------------------------------------------------------------
   Semantic typography
------------------------------------------------------------------ */
h1.display {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(56px, 8vw, 128px);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--fg-1);
    text-wrap: balance;
}

h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5vw, 90px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--fg-1);
    text-wrap: balance;
}

h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(32px, 3.5vw, 60px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--fg-1);
    text-wrap: balance;
}

h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--fg-1);
}

h4 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25;
    color: var(--fg-1);
}

p, .body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    color: var(--fg-2);
    text-wrap: pretty;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.40em;
    text-transform: uppercase;
    color: var(--fg-1);
    background: transparent;
    border: 1.5px solid var(--color-champagne);
    border-radius: var(--radius-pill);
    padding: 16px 40px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-quint),
              color var(--dur-fast) var(--ease-quint),
              transform 80ms var(--ease-quint);
    text-decoration: none;
}

.btn:hover {
    background: rgba(236, 199, 119, 0.12);
}

.btn:active {
    background: rgba(189, 131, 50, 0.25);
    transform: scale(0.98);
}

.btn--primary {
    background: var(--color-champagne);
    color: var(--color-obsidian);
    border-color: var(--color-champagne);
}

.btn--primary:hover {
    background: #fff2c6;
}



/* ==========================================================================
   == 2. site.css — website UI kit
   ========================================================================== */

/* Influex website UI kit — shared styles */

* {
    box-sizing: border-box;
}

body {
    background: #000;
    color: var(--fg-1);
    margin: 0;
    overflow-x: hidden;
}


/* ---------- Nav ---------- */
.ix-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 64px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ix-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.06em;
    text-decoration: none;
    display: inline-flex;
}

.ix-cta-pill {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--fg-1);
    text-decoration: none;
    border: 1.5px solid var(--color-champagne);
    border-radius: 999px;
    padding: 12px 26px;
    background: transparent;
    transition: background 180ms var(--ease-quint);
    cursor: pointer;
}

.ix-cta-pill:hover {
    background: rgba(236,199,119,0.12);
}

@media (max-width: 900px) {
    .ix-nav {
        padding: 18px 24px;
    }
}



/* ==========================================================================
   == 3. styles-sales.css — homepage / sales page
   ========================================================================== */

/* ==========================================================================
   Influex Homepage — page-specific styles
   Tokens + base UI-kit patterns come from the local design system.
   Only new or extended patterns live here.
   ========================================================================== */


/* ------------------------------------------------------------------
   Site-wide paragraph weight — book/regular. Stops any imported
   design-system rule from rendering body copy at a heavier weight.
------------------------------------------------------------------ */
p {
    font-weight: 400;
}


/* ------------------------------------------------------------------
   Nav — fully transparent over hero. A separate fixed scrim element
   (.ix-nav-scrim) supplies the dark gradient so it can spill below the
   nav without fighting the nav's sticky stacking context.
------------------------------------------------------------------ */
.ix-nav {
  /* Fixed (not sticky) so the hero + collage extend all the way up behind
     the nav. Without this the body's black background sits above the hero
     and reads as a solid dark bar — even with a transparent nav. */
position: fixed !important;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent;
  transition: background 320ms ease, backdrop-filter 320ms ease, border-color 320ms ease;
}

.ix-nav.is-scrolled {
background: rgba(0,0,0,0.9) !important;
backdrop-filter: blur(24px) saturate(140%) !important;
-webkit-backdrop-filter: blur(24px) saturate(140%) !important;
border-bottom-color: rgba(255,255,255,0.06);
}

.ix-nav-scrim {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 220px;
pointer-events: none;
z-index: 49;
                     /* just below the nav (z-index 50) */
  /* Top-to-transparent fade. Strong enough at the top to clearly read as a
     darkening behind the logo/links, softly dissolving into the collage. */
background: linear-gradient(180deg,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.72) 20%,
    rgba(0,0,0,0.50) 45%,
    rgba(0,0,0,0.25) 70%,
    rgba(0,0,0,0.08) 88%,
    rgba(0,0,0,0) 100%);
opacity: 1;
transition: opacity 320ms ease;
}


/* ------------------------------------------------------------------
   Polygon buttons — Authority Glow gradient-stroked polygon, truly
   transparent interior so the page shows through the chevron outline.
   Implementation: each button wraps its label in an inline <svg> with a
   stroked polygon that references the shared #ix-grad-auth gradient def.
   vector-effect="non-scaling-stroke" keeps the 1.5px stroke constant
   regardless of button size. Hover fills the polygon via CSS `fill` —
   which overrides the SVG `fill="none"` attribute.
------------------------------------------------------------------ */

/* Neutralize every background / border / radius that the design system
   applies to these classes — the visible shape is 100% the inline SVG. */
.ix-cta-pill,
.btn,
.btn--primary {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-micro);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.42em;
text-transform: uppercase;
color: #FEF7DF;
text-decoration: none;
padding: 18px clamp(36px, 4vw, 56px);
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
cursor: pointer;
transition: color 220ms var(--ease-quint),
              transform 220ms var(--ease-quint);
}

.ix-cta-pill:hover,
.btn:hover,
.btn--primary:hover {
background: transparent !important;
 /* kill site.css gold rectangle wash */
color: var(--color-obsidian, #000);
transform: translateY(-1px);
}

.ix-cta-pill:active,
.btn:active,
.btn--primary:active {
transform: translateY(0) scale(0.985);
}


/* Inline SVG polygon stroke — full-bleed inside the button. The label span
   sits on top at the default stacking order. */
.ix-cta-stroke {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
    /* stroke can sit flush with viewport edges */
z-index: 0;
}

.ix-cta-stroke polygon {
fill: transparent;
transition: fill 220ms var(--ease-quint);
}

.ix-cta-pill:hover .ix-cta-stroke polygon,
.btn:hover .ix-cta-stroke polygon,
.btn--primary:hover .ix-cta-stroke polygon {
fill: url(#ix-grad-auth);
}

.ix-cta-label {
position: relative;
z-index: 1;
white-space: nowrap;
}


/* Filled variant — gold-gradient body by default, dark ink label.
   Used for high-emphasis CTAs (e.g. the hero "Book a Call"). */
.btn--filled .ix-cta-stroke polygon {
fill: url(#ix-grad-auth);
}

.btn--filled,
.btn--filled:hover {
color: #1a1208;
}

.btn--filled:hover .ix-cta-stroke polygon {
filter: brightness(1.08);
}


/* Tighter nav CTA */
.ix-cta-pill {
font-size: 11px;
padding: 14px 32px;
letter-spacing: 0.4em;
}


/* ------------------------------------------------------------------
   Face carousel — full-bleed, auto-scroll with proximity spotlight.
   Center card: full color + scaled up. Rest: grayscale + shrunk.
   Card structure: photo stage (photo + logo) > quote > name.
------------------------------------------------------------------ */
.ix-face-marquee {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
   /* break out of hero container to true edges */
margin-top: 36px;
padding: 24px 0 24px;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  /* Fades in alongside the stats + featured logos. */
opacity: 0;
transform: translateY(16px);
animation: ix-face-marquee-in 1.2s var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)) 5.7s forwards;
}

@keyframes ix-face-marquee-in {
to {
    opacity: 1;
    transform: translateY(0);
}
}

@media (prefers-reduced-motion: reduce) {
    .ix-face-marquee {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

.ix-face-marquee::before,
.ix-face-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12%;
    pointer-events: none;
    z-index: 2;
}

.ix-face-marquee::before {
    left: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.98) 0%, transparent 100%);
}

.ix-face-marquee::after {
    right: 0;
    background: linear-gradient(270deg, rgba(0,0,0,0.98) 0%, transparent 100%);
}

.ix-face-track {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.6vw, 32px);
    width: max-content;
    padding: 60px 0 48px;
        /* vertical room for the scaled-up center card */
    animation: ix-face-scroll 66s linear infinite;
    will-change: transform;
}

.ix-face-marquee:hover .ix-face-track {
    animation-play-state: paused;
}

@keyframes ix-face-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.ix-face-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(220px, 18vw, 280px);
    margin: 0;
    display: flex;
    flex-direction: column;
    transform: scale(0.84);
    transform-origin: center;
    transition: transform 450ms var(--ease-quint);
    z-index: 1;
    cursor: pointer;
    outline: none;
}

.ix-face-card:focus-visible .ix-face-stage {
    box-shadow: inset 0 0 0 1px rgba(236,199,119,0.5),
    0 0 0 3px rgba(236,199,119,0.35);
}


/* Photo stage — dark frame holding portrait + logo overlay */
.ix-face-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: radial-gradient(110% 70% at 50% 0%, #1C1C1C 0%, #0A0A0A 55%, #000 100%);
    box-shadow: inset 0 0 0 1px rgba(236, 199, 119, 0.08),
    0 20px 40px -24px rgba(0,0,0,0.85);
    filter: grayscale(1) brightness(0.58) contrast(0.95);
    transition: filter 450ms var(--ease-quint),
    box-shadow 450ms var(--ease-quint);
}

.ix-face-photo {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    z-index: 1;
}

.ix-face-stage::before {
  /* champagne bloom behind the head — lit only on active card */
    content: "";
    position: absolute;
    left: 50%;
    top: 18%;
    width: 80%;
    height: 60%;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(236,199,119, 0) 0%, transparent 70%);
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
    transition: background 450ms var(--ease-quint);
}

.ix-face-stage::after {
  /* bottom darken so logo reads on gradient floor */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0.92) 100%);
    pointer-events: none;
    z-index: 2;
}

.ix-face-logo {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    max-width: 72%;
    max-height: 18%;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 3;
    opacity: 0.72;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
    transition: opacity 450ms var(--ease-quint);
}

.ix-face-name {
    text-align: center;
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: clamp(10px, 0.8vw, 12px);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--fg-3);
  /* 20px gap above so the name doesn't touch the bottom edge of
     the portrait card. (When testimonials were visible, the
     blockquote provided this breathing room — now that they're
     hidden, we need explicit top margin.) */
    margin-top: 20px;
    padding: 0 8px 8px;
    transition: color 450ms var(--ease-quint);
}

@media (prefers-reduced-motion: reduce) {
    .ix-face-track {
        animation: none;
    }

    .ix-face-card {
        transform: none;
    }

    .ix-face-stage {
        filter: none;
    }
}

@media (max-width: 900px) {
    .ix-face-marquee {
        margin-top: 64px;
        padding: 40px 0 32px;
    }

    .ix-face-track {
        gap: 16px;
        padding: 40px 0 32px;
        animation-duration: 48s;
    }

    .ix-face-card {
        width: clamp(170px, 48vw, 220px);
    }
}

/* Smooth scroll for anchor / programmatic scrolls site-wide. */
html {
    scroll-behavior: smooth;
}

/* Rotating "light" — a small bright spot in a conic gradient that
   travels around the new way card's border every 9s. Built with
   @property + a masked conic gradient so it lives ONLY in the
   1.5px border area (not over the card's interior). Subtle —
   the bright portion is small and faded, just enough to draw the
   eye to the new way card without being flashy. */
@property --ix-compare-glow-angle {
    syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ix-invitation-v2-beams {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
}


/* ------------------------------------------------------------------
   Brand logo (nav + footer use the real PNG)
------------------------------------------------------------------ */
.ix-brand {
    display: inline-flex;
    align-items: center;
}

.ix-brand-logo {
    height: 38px;
    width: auto;
           /* ~20% bigger than the base 32px */
    display: block;
    image-rendering: -webkit-optimize-contrast;
}


/* ============================================================
   NAV — Hamburger + slide-down mobile panel
   Active at < 1200px. Hides the inline nav-links and the
   desktop CTA pill, swaps in a hamburger that opens a panel
   containing the same links + Book Your Call.
============================================================ */
.ix-nav-toggle {
    display: none;
    position: relative;
    width: 36px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    margin-left: auto;
}

@media (max-width: 1199px) {
    .ix-nav-cta-desktop {
        display: none;
    }

    .ix-nav-toggle {
        display: inline-block;
    }
}
/* Extra-narrow phones — pull the brand logo in even further. */
@media (max-width: 480px) {
    .ix-nav {
        padding: 12px 14px;
    }

    .ix-brand-logo {
        height: 22px;
    }

    .ix-nav-toggle {
        width: 32px;
        height: 28px;
    }
}


/* Register the animatable angle property — required for smooth
   interpolation of the conic-gradient rotation. Browsers without
   @property fall back to a static (non-rotating) gold border. */
@property --ix-compare-angle {
    syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


/* Rotating gradient border — two hotspots (champagne + lavender) chase
   each other around the perimeter. Mask-composite carves out the
   interior so only a 1.5px ring of the gradient shows. */
@property --ix-closer-angle {
    syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@media (max-width: 768px) {
  /* ~30% bigger than nav's 22px (rounded) */

}



/* ==========================================================================
   == 4. styles-brandconsult.css — brand consult booking page
   ========================================================================== */

/* ============================================================================
   Brand Consult / Iconic Brand Clarity Session — page-specific styles.
   This file loads AFTER styles-sales.css, which provides the full Influex
   design system: tokens, fonts (self-hosted Montserrat), the .ix-nav, the
   .btn / .ix-cta-pill / .ix-cta-label buttons, and the .ix-face-marquee.
   Everything here is namespaced .bc-* for the booking-page-only sections,
   built on the same tokens so it matches the homepage + Insider pages.
   ============================================================================ */

:root {
  --bc-ink: #05060c;
  --bc-cream: #F4ECDD;
  --bc-cream-ink: #2b2417;
  --bc-hair: rgba(236,199,119,0.26);
  --bc-hair-soft: rgba(236,199,119,0.14);
  --bc-authority: linear-gradient(100deg,#F5EBD9 0%,#ECC777 22%,#F3D9C7 44%,#E6B8D9 58%,#ECC777 78%,#F5EBD9 100%);
}


/* overflow-x: clip (not hidden) prevents a horizontal scrollbar WITHOUT turning
   the body into a scroll container — which would break the letter section's
   position: sticky pin. */
    .bc-page {
        background: var(--bc-ink);
        overflow-x: clip;
    }


/* ---------- shared helpers ---------- */
    .bc-wrap {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 clamp(20px,5vw,48px);
    }

    .bc-wrap--wide {
        max-width: 1320px;
    }

    .bc-eyebrow {
        font-family: var(--font-micro);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.24em;
        font-size: clamp(10px,0.85vw,12.5px);
        color: var(--color-champagne);
        margin: 0 0 clamp(16px,2.2vh,26px);
    }

    .bc-authority-text {
        background-image: var(--bc-authority);
        background-size: 300% 100%;
        background-repeat: repeat;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: bc-sweep 18s linear infinite;
    }

@    keyframes bc-sweep {
        0% { background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bc-authority-text {
        animation: none;
    }
}

.bc-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 900ms var(--ease-quint,cubic-bezier(.22,1,.36,1)), transform 900ms var(--ease-quint,cubic-bezier(.22,1,.36,1));
}

.bc-reveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .bc-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* CTA row spacing (the buttons themselves are the shared .btn / .ix-cta-pill) */
.bc-cta-row {
    margin-top: clamp(28px,4vh,42px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.bc-note {
    font-family: var(--font-micro);
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    margin: 0;
}


/* ============================================================================
   HERO
   ============================================================================ */
.bc-hero {
    position: relative;
    padding: clamp(150px,22vh,210px) 0 clamp(70px,10vh,110px);
    background: radial-gradient(120% 80% at 50% -6%, rgba(236,199,119,0.16) 0%, rgba(236,199,119,0.04) 30%, rgba(5,6,12,0) 62%),
    radial-gradient(90% 60% at 82% 8%, rgba(201,138,115,0.14), rgba(5,6,12,0) 55%),
    linear-gradient(180deg, #0a0c16 0%, #05060c 88%);
    overflow: hidden;
}

.bc-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/brandclaritybg.jpg') center/cover no-repeat;
    opacity: 0.66;
    -webkit-mask-image: radial-gradient(130% 105% at 50% 42%, #000 45%, transparent 100%);
    mask-image: radial-gradient(130% 105% at 50% 42%, #000 45%, transparent 100%);
}

/* legibility scrim over the photo so the hero copy stays crisp */
.bc-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,6,12,0.55) 0%, rgba(5,6,12,0.25) 35%, rgba(5,6,12,0.6) 100%);
}

.bc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(236,199,119,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(236,199,119,0.05) 1px, transparent 1px);
    background-size: 62px 62px;
    opacity: 0.35;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 80%);
    mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 80%);
}

.bc-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.bc-hero-eyebrow {
    font-family: var(--font-micro);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: clamp(12px,1.2vw,16px);
    color: var(--fg-3);
    margin: 0 0 clamp(20px,3vh,32px);
}

/* Two-part title: part 1 big (authority sweep), part 2 smaller. 3–4 lines total. */
.bc-hero-title {
    margin: 0 auto;
    text-wrap: balance;
}

.bc-hero-title-1 {
    display: block;
    max-width: 18ch;
    margin: 0 auto;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.02em;
    font-size: clamp(43.5px,6.73vw,95px);
}

.bc-hero-title-2 {
    display: block;
    margin: clamp(10px,1.6vh,18px) auto 0;
    max-width: 34ch;
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.01em;
    font-size: clamp(24.7px,3.47vw,47.5px);
    color: var(--fg-1);
}

.bc-hero-sub {
    margin: clamp(22px,3vh,32px) auto 0;
    max-width: 58ch;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--fg-2);
    font-size: clamp(13.3px,1.54vw,22.4px);
    line-height: 1.55;
}


/* hero lower — the two boxes are now ONE glass panel split by a gold hairline,
   so they read as a unit without merging. The Tellman zone carries a distinct
   warm-gold tint + corner glow so it stands apart as its own card. */
.bc-hero-duo {
    position: relative;
    z-index: 1;
    margin-top: clamp(48px,7vh,84px);
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    align-items: stretch;
    border: 1px solid var(--bc-hair-soft);
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(236,199,119,0.04), rgba(255,255,255,0.018));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 70px -34px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
}

.bc-duo-left {
    padding: clamp(24px,2.6vw,40px);
    text-align: left;
}

.bc-duo-right {
    padding: clamp(24px,2.6vw,40px);
    text-align: left;
    border-left: 1px solid var(--bc-hair);
    background: radial-gradient(120% 88% at 100% 0%, rgba(236,199,119,0.13), rgba(236,199,119,0.02) 46%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(236,199,119,0.055), rgba(236,199,119,0.008));
}

.bc-hero-lede {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--fg-2);
    font-size: clamp(14px,1.15vw,17px);
    line-height: 1.6;
    margin: 0 0 clamp(20px,2.6vh,28px);
}

.bc-hero-lede b {
    color: var(--color-ivory);
    font-weight: 500;
}

.bc-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(12px,1.3vw,20px);
    border-top: 1px solid var(--bc-hair-soft);
    padding-top: clamp(18px,2.4vh,26px);
}

.bc-stat-k {
    font-family: var(--font-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10.5px;
    color: var(--color-champagne);
    margin: 0 0 7px;
}

.bc-stat-v {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(19px,1.7vw,25px);
    color: var(--color-ivory);
    line-height: 1.05;
}

.bc-stat-v s {
    color: var(--fg-3);
    font-weight: 400;
    font-size: 0.6em;
    margin-right: 5px;
    text-decoration-thickness: 1px;
}

.bc-stat-v em {
    font-style: normal;
    color: var(--color-champagne);
}

.bc-stat-note {
    display: block;
    margin-top: 6px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11.5px;
    color: var(--fg-3);
    line-height: 1.35;
}

.bc-with {
    display: flex;
    flex-direction: column;
}

.bc-with-eyebrow {
    font-family: var(--font-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 10.5px;
    color: var(--fg-3);
    margin: 0 0 16px;
}

.bc-with-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px;
}

.bc-with-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--bc-hair);
    flex: 0 0 auto;
}

.bc-with-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(16px,1.35vw,21px);
    color: var(--color-ivory);
    margin: 0;
}

.bc-with-role {
    font-family: var(--font-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10.5px;
    color: var(--color-champagne);
    margin: 4px 0 0;
}

.bc-with-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(13px,1.1vw,15.5px);
    line-height: 1.5;
    color: var(--fg-2);
    margin: 0;
}

.bc-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 20px;
    border-top: 1px solid var(--bc-hair-soft);
    padding-top: 18px;
}

.bc-metric {
    text-align: center;
}

.bc-metric-n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px,2.2vw,30px);
    line-height: 1;
}

.bc-metric-l {
    font-family: var(--font-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 10px;
    color: var(--fg-3);
    margin-top: 7px;
}


/* ============================================================================
   CLIENT MARQUEE band (label above the shared .ix-face-marquee)
   ============================================================================ */
.bc-clients {
    padding: clamp(40px,7vh,72px) 0 clamp(30px,5vh,52px);
    border-top: 1px solid var(--bc-hair-soft);
    border-bottom: 1px solid var(--bc-hair-soft);
  /* warm champagne glow bleeding down from the top-center + a deeper gold glow
     rising from the bottom-center, so the black band isn't flat. */
  background:
    radial-gradient(46% 64% at 50% -10%, rgba(236,199,119,0.22), rgba(236,199,119,0.06) 40%, transparent 70%),
    radial-gradient(46% 62% at 50% 112%, rgba(201,138,55,0.20), rgba(201,138,55,0.05) 42%, transparent 72%),
    #070810; }

.bc-clients-label { text-align: center; font-family: var(--font-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(13px,1.15vw,16px);
  color: var(--fg-1); margin: 0 0 clamp(8px,1.4vh,14px); }

/* Pull the marquee up under the label: shared styles-sales.css adds a 36px
   margin + a 60px track top-pad meant to clear a scaled-up center card,
   which this page doesn't use — so most of that space is dead gap. */
    .bc-clients .ix-face-marquee { margin-top: 2px;
    padding-top: 6px;
  /* Shared styles-sales.css hides the marquee (opacity:0) then fades it in with
     a 5.7s delay meant to sync with the homepage hero intro. This page has no
     such intro, so show the cards immediately on load. */
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.bc-clients .ix-face-track {
    padding-top: 8px;
}


/* ============================================================================
   SECTION scaffolding
   ============================================================================ */
.bc-section {
    padding: clamp(72px,11vh,140px) 0;
    position: relative;
}

.bc-section--dark {
    background: linear-gradient(180deg,#05060c,#080a14 50%,#05060c);
}

.bc-section-head {
    text-align: center;
    max-width: 42ch;
    margin: 0 auto clamp(40px,6vh,64px);
}

.bc-section-title {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.015em;
    font-size: clamp(28px,3.6vw,50px);
    margin: 0;
}

/* "Here's Exactly What We Cover." — wide enough to stay on one line */
.bc-section-head--wide {
    max-width: 62ch;
}

.bc-section-title--nowrap {
    white-space: nowrap;
    font-size: clamp(22px,3vw,50px);
}


/* ============================================================================
   LETTER (cream)
   ============================================================================ */
/* Dark cinematic stage — the flip card floats on images/letterbg.jpg */
.bc-letter {
    position: relative;
    background: #0a0a0d;
    border-top: 1px solid var(--bc-hair-soft);
    border-bottom: 1px solid var(--bc-hair-soft);
}

/* Fallback (no flip): normal padded band. */
.bc-letter-track {
    padding: clamp(72px,11vh,150px) 0;
}

.bc-letter-stick {
    position: relative;
}

.bc-letter-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/letterbg.jpg') center/cover no-repeat;
}

.bc-letter-wrap {
    position: relative;
    z-index: 1;
    max-width: 1420px;
}


/* ---------- flip stage: Dima (front) flips to Tellman (back) on scroll ---------- */
/* Fallback (no JS / reduced motion / mobile): both cards stack, both readable. */
.bc-flip-inner {
    display: grid;
    gap: clamp(44px,7vh,88px);
}


/* Flip-ready: pin the section, then flip halfway through the scroll track. */
.bc-letter.is-flip-ready .bc-letter-track {
    padding: 0;
    height: 180vh;
}

.bc-letter.is-flip-ready .bc-letter-stick {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.bc-letter.is-flip-ready .bc-flip {
    perspective: 2400px;
    width: 100%;
}

.bc-letter.is-flip-ready .bc-flip-inner {
    display: block;
    position: relative;
    gap: 0;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.66,0,0.34,1);
}

.bc-letter.is-flip-ready .bc-flip-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  /* Safety net: the card's content height is fixed by its (vw-based, not
     vh-based) fonts, while the pin shrinks directly with viewport height —
     on short windows the two tiered breakpoints below should already make it
     fit, but if a viewport is shorter still, scroll internally rather than
     let the sticky container's overflow:hidden silently clip the letter. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* front stays in flow → it alone sets the card height (Dima's letter height).
   back is layered on top at exactly that height; Tellman's copy is tuned to fit. */
.bc-letter.is-flip-ready .bc-flip-front {
    position: relative;
    z-index: 1;
}

.bc-letter.is-flip-ready .bc-flip-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
}

.bc-letter.is-flip-ready .bc-flip.is-flipped .bc-flip-inner {
    transform: rotateY(180deg);
}


/* ---------- the card: portrait left, letter right ---------- */
.bc-letter-card {
    max-width: 1378px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 40%) 1fr;
    align-items: stretch;
    background: linear-gradient(180deg, #FBF5E9 0%, #F1E7D3 100%);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 44px 110px -34px rgba(0,0,0,0.78), 0 8px 30px rgba(0,0,0,0.4);
}

/* gradient-gold rim with brighter "light" glints, via a masked ring */
.bc-letter-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(135deg, #8a5a1e 0%, #ECC777 13%, #FFF4D6 21%, #C98A73 37%,
    #BD8332 51%, #FFF4D6 65%, #ECC777 79%, #8a5a1e 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* left portrait column — full photo with name/title overlaid at the base */
.bc-letter-portrait {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: #1a1206;
}

.bc-letter-portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.bc-letter-portrait-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: clamp(22px,2.6vw,32px) clamp(20px,2.4vw,30px) clamp(18px,2.2vw,26px);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78) 62%);
}

.bc-letter-portrait-cap .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(19px,1.6vw,23px);
    letter-spacing: 0.01em;
    color: #fff;
    margin: 0;
}

.bc-letter-portrait-cap .r {
    font-family: var(--font-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: 11px;
    color: var(--color-champagne);
    margin: 7px 0 0;
}

/* right letter column */
.bc-letter-body {
    align-self: center;
    padding: clamp(30px,3.4vw,52px) clamp(28px,3.4vw,52px);
}

.bc-letter-body p {
    color: var(--bc-cream-ink);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(16px,1.15vw,18.5px);
    line-height: 1.72;
    margin: 0 0 clamp(18px,2.2vh,24px);
}

.bc-letter-body p:last-child {
    margin-bottom: 0;
}

.bc-letter-body b, .bc-letter-body strong {
    font-weight: 600;
    color: #1c1710;
}

/* lead line — bold + ~30% larger than body (used for the letter opener AND
   the "The Person You'll Speak With" heading, so they match) */
.bc-letter-lead {
    font-weight: 700 !important;
    font-size: clamp(21px,1.55vw,24px) !important;
    line-height: 1.45 !important;
    margin-bottom: clamp(20px,2.6vh,28px) !important;
}

.bc-letter-callout {
    position: relative;
    margin: clamp(26px,3.6vh,36px) 0 0;
    padding: clamp(22px,3.2vw,30px) clamp(26px,3.4vw,38px) clamp(22px,3.2vw,30px) clamp(52px,5.4vw,68px);
    border-left: 4px solid var(--color-champagne-deep);
    border-radius: 4px 14px 14px 4px;
    background: linear-gradient(100deg, #EACF97 0%, #E4C588 100%);
}

.bc-callout-mark {
    position: absolute;
    left: clamp(16px,1.8vw,22px);
    top: clamp(4px,1vh,10px);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(46px,5vw,60px);
    color: rgba(140,96,32,0.5);
    line-height: 1;
    pointer-events: none;
}

.bc-letter-callout p {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(17px,1.5vw,21px);
    line-height: 1.5;
    color: #2a2110;
}


/* ---------- dark-blue variant (Tellman / back face) ----------
   Copy is tuned a touch smaller/tighter than the letter so the whole thing
   fits inside Dima's letter height (the flip keeps both faces the same size).
   The lead heading keeps the SAME size as the letter opener. */
.bc-card--dark { background: linear-gradient(180deg, #1a1a1d 0%, #0a0a0c 100%); }

.bc-card--dark .bc-letter-body { padding-top: clamp(26px,3vw,44px); padding-bottom: clamp(26px,3vw,44px); }

.bc-card--dark .bc-letter-body p { color: var(--fg-1); font-size: clamp(15px,1.08vw,17px);
  line-height: 1.62; margin-bottom: clamp(13px,1.6vh,17px); }

.bc-card--dark .bc-letter-body b, .bc-card--dark .bc-letter-body strong { color: #fff; }

.bc-card--dark .bc-letter-lead { color: #fff; margin-bottom: clamp(13px,1.7vh,18px) !important; }

.bc-clarity { text-align: center; font-family: var(--font-display); font-weight: 800;
  letter-spacing: 0.04em; font-size: clamp(40px,4.4vw,66px); line-height: 1; margin: clamp(16px,2.4vh,26px) 0;
  background-image: linear-gradient(120deg,#BD8332,#ECC777 45%,#C98A73 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* ---------- shorter desktop windows (flip pin is only active >=900px wide) ----------
   The card's font sizes are vw-based, so they stay ~750-780px tall regardless
   of viewport height, while the 100vh sticky pin shrinks directly with it —
   on a nominal "1600x900" laptop window (whose actual innerHeight is smaller
   once browser chrome is subtracted) the card ends up touching or clipping
   the pin's edges. Shrink fonts/padding in two tiers so it keeps real
   breathing room as the window gets shorter. */
@media (min-width: 900px) and (max-height: 820px) {
  .bc-letter-body { padding: 44px 48px; }

  .bc-letter-body p { font-size: 17.5px; line-height: 1.68; margin-bottom: 17.5px; }

  .bc-letter-lead { font-size: 23px !important; line-height: 1.43 !important; margin-bottom: 22px !important; }

  .bc-letter-callout { margin-top: 27px; padding: 27px 35px 27px 62px; }

  .bc-callout-mark { font-size: 54px; }

  .bc-letter-callout p { font-size: 20px; }

  .bc-letter-portrait-cap { padding: 27px 30px 22px; }

  .bc-card--dark .bc-letter-body { padding-top: 40px; padding-bottom: 40px; }

  .bc-card--dark .bc-letter-body p { font-size: 16px; line-height: 1.6; margin-bottom: 15.5px; }

  .bc-card--dark .bc-letter-lead { margin-bottom: 17.5px !important; }

  .bc-clarity { font-size: 59px; margin: 20px 0; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .bc-letter-body { padding: 41px 46px; }

  .bc-letter-body p { font-size: 17px; line-height: 1.65; margin-bottom: 16.8px; }

  .bc-letter-lead { font-size: 22.5px !important; line-height: 1.42 !important; margin-bottom: 21px !important; }

  .bc-letter-callout { margin-top: 25px; padding: 25px 33px 25px 59px; }

  .bc-callout-mark { font-size: 51px; }

  .bc-letter-callout p { font-size: 19px; }

  .bc-card--dark .bc-letter-body { padding-top: 37px; padding-bottom: 37px; }

  .bc-card--dark .bc-letter-body p { font-size: 15.5px; line-height: 1.57; margin-bottom: 14.5px; }

  .bc-clarity { font-size: 56px; margin: 18.5px 0; }
}


/* ============================================================================
   GLASS CARDS
   ============================================================================ */
/* two comparison cards — light, equal height, "for you" highlighted vs muted */
.bc-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.2vw,32px); align-items: stretch; }

.bc-card { position: relative; border-radius: 22px; padding: clamp(28px,3vw,48px);
  display: flex; flex-direction: column; }

/* highlighted "This Is For You" — warm cream, gold rim + soft glow */
.bc-card:not(.bc-card--no) { background: linear-gradient(180deg, #FEFBF3 0%, #FBF3E2 100%);
  box-shadow: 0 34px 76px -32px rgba(120,80,20,0.3), 0 0 46px rgba(236,199,119,0.28), 0 6px 20px rgba(0,0,0,0.06); }

.bc-card:not(.bc-card--no)::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, #C79A48, #F0D89A 22%, #FFF7E2 32%, #D8A46A 52%, #C79A48 70%, #FFF7E2 84%, #C79A48);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }

/* muted "This Is Not For You" — flat light grey, understated */
.bc-card--no { background: #f1f0f2; border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 22px 46px -32px rgba(0,0,0,0.16); }

.bc-card-kicker { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 11px; color: var(--color-champagne-deep); margin: 0 0 16px; }

.bc-card--no .bc-card-kicker { color: #a49b8e; }

.bc-card-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px,1.8vw,26px);
  line-height: 1.18; color: #17130c; margin: 0 0 clamp(18px,2.2vh,26px); }

.bc-card--no .bc-card-title { color: #4a453d; }


/* ============================================================================
   WHY IT'S FREE — light section, two tilted floating cards
   ============================================================================ */
.bc-free {
    position: relative;
    padding: clamp(84px,13vh,168px) 0 clamp(90px,14vh,182px);
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.bc-free-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/whyitsfreebg.jpg') center/cover no-repeat;
}

.bc-free .bc-wrap {
    position: relative;
    z-index: 1;
}

/* head */
.bc-free-head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto clamp(40px,6.2vh,66px);
}

.bc-free-eyebrow {
    font-family: var(--font-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    font-size: clamp(11px,0.9vw,13px);
    color: var(--color-champagne-deep);
    margin: 0;
}

.bc-free-rule {
    display: block;
    width: 132px;
    height: 1px;
    margin: 16px auto 22px;
    position: relative;
    background: linear-gradient(90deg, transparent, rgba(189,131,50,0.55), transparent);
}

.bc-free-rule::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 7px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,242,205,0.95), rgba(236,199,119,0) 70%);
}

.bc-free-title {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.015em;
    font-size: clamp(30px,3.9vw,56px);
    margin: 0;
    color: #1a1712;
}

/* "You Get the Clarity." — its own dark-gold → purple gradient (static, no sweep) */
.bc-free-title .bc-authority-text {
    background-image: linear-gradient(100deg, #6f4713 0%, #B98A34 34%, #B379AC 70%, #7A54A4 100%);
    background-size: 100% 100%;
    background-position: 0 0;
    animation: none;
}

/* staggered, overlapping layout */
.bc-free-cards {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    transform: scale(1.1);
    transform-origin: top center;
}

.bc-free-card {
    width: 106%;
}

.bc-free-card--a {
    justify-self: start;
    margin-top: clamp(0px,1vh,16px);
    z-index: 1;
}

.bc-free-card--b {
    justify-self: end;
    margin-top: clamp(64px,10vh,128px);
    z-index: 2;
}

/* reveal: fade up from further below; right card arrives after the left */
.bc-free-card.bc-reveal {
    transform: translateY(72px);
}

.bc-free-card.bc-reveal.is-in {
    transform: none;
}

.bc-free-card--b.bc-reveal {
    transition-delay: 0.34s;
}

/* static 3D tilt — cards angle TOWARD each other (left faces right, right faces left) */
.bc-free-card-in {
    transform-origin: 50% 50%;
}

.bc-free-card--a .bc-free-card-in {
    transform: perspective(1700px) rotateY(15deg) rotateX(6deg);
}

.bc-free-card--b .bc-free-card-in {
    transform: perspective(1700px) rotateY(-15deg) rotateX(6deg);
}

/* the visible card */
.bc-free-card-face {
    position: relative;
    border-radius: 22px;
    padding: clamp(46px,4.4vw,64px) clamp(30px,3vw,48px) clamp(30px,3vw,46px);
    background: linear-gradient(180deg, #FFFDF8 0%, #FBF3E4 100%);
    box-shadow: 0 46px 94px -34px rgba(120,78,20,0.44), 0 0 60px rgba(236,199,119,0.44),
    0 14px 34px rgba(0,0,0,0.12);
}

/* gold icon badge straddling the top-center edge */
.bc-free-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 3;
    color: var(--color-champagne-deep);
    background: linear-gradient(180deg, #FFFDF7 0%, #F6EAD1 100%);
    border: 1.5px solid rgba(189,131,50,0.55);
    box-shadow: 0 10px 22px rgba(120,80,20,0.24);
}

.bc-free-badge svg {
    width: 30px;
    height: 30px;
    display: block;
}

/* gold gradient rim with brighter glints */
.bc-free-card-face::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    background: linear-gradient(135deg, #C79A48 0%, #F0D89A 22%, #FFF7E2 32%, #D8A46A 52%,
    #C79A48 70%, #FFF7E2 84%, #C79A48 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* card text (dark on light) */
.bc-free-card-face .bc-free-kicker {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 12px;
    color: var(--color-champagne-deep);
    margin: 0 0 14px;
}

.bc-free-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px,1.85vw,27px);
    line-height: 1.22;
    color: #1c1810;
    margin: 0 0 15px;
}

.bc-free-card-face p {
    font-family: var(--font-body);
    font-weight: 400;
    color: #4a4234;
    font-size: clamp(15px,1.12vw,17.5px);
    line-height: 1.62;
    margin: 0;
}

/* subtle float once revealed — organic per-card offsets */
@keyframes bc-free-float {
    0%,100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-13px) rotate(0.4deg);
    }
}

.bc-free-card.is-in .bc-free-card-face {
    animation: bc-free-float 6s ease-in-out 1.2s infinite;
}

.bc-free-card--b.is-in .bc-free-card-face {
    animation-duration: 7.2s;
    animation-delay: 1.6s;
}

@media (prefers-reduced-motion: reduce) {
    .bc-free-card-face {
        animation: none !important;
    }
}


/* WHAT WE COVER — orbital: X-logo left, numbered cards right, fits one screen */
.bc-cover2 {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: #050506;
    display: flex;
    border-top: 1px solid var(--bc-hair-soft);
    border-bottom: 1px solid var(--bc-hair-soft);
}

.bc-cover2-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #050506 url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/influexlogocircle.jpg') no-repeat;
    background-size: contain;
    background-position: -15vw center;
    transform-origin: 30% 50%;
    animation: bc-cover2-breathe 6s ease-in-out infinite;
}

@keyframes bc-cover2-breathe {
    0%,100% {
        filter: brightness(1) saturate(1);
        transform: scale(1);
    }

    50% {
        filter: brightness(1.32) saturate(1.35);
        transform: scale(1.035);
    }
}

/* atmosphere — bright gold dust drifting slowly upward near the logo */
.bc-cover2-atmo {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.bc-cover2-atmo span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7e6 0%, rgba(255,225,160,0.95) 35%, rgba(236,199,119,0) 75%);
    box-shadow: 0 0 10px 2px rgba(255,214,140,0.85);
    opacity: 0;
    animation: bc-cover2-drift 14s ease-in-out infinite;
}

.bc-cover2-atmo span:nth-child(1) {
    left: 5%;
    top: 76%;
    animation-delay: 0s;
    animation-duration: 15s;
}

.bc-cover2-atmo span:nth-child(2) {
    left: 15%;
    top: 40%;
    animation-delay: 2.2s;
    animation-duration: 12s;
    width: 4px;
    height: 4px;
}

.bc-cover2-atmo span:nth-child(3) {
    left: 24%;
    top: 82%;
    animation-delay: 4.6s;
    animation-duration: 17s;
    width: 6px;
    height: 6px;
}

.bc-cover2-atmo span:nth-child(4) {
    left: 31%;
    top: 22%;
    animation-delay: 1s;
    animation-duration: 14s;
    width: 4px;
    height: 4px;
}

.bc-cover2-atmo span:nth-child(5) {
    left: 10%;
    top: 10%;
    animation-delay: 6.5s;
    animation-duration: 19s;
    width: 6px;
    height: 6px;
}

.bc-cover2-atmo span:nth-child(6) {
    left: 20%;
    top: 58%;
    animation-delay: 3s;
    animation-duration: 11s;
    width: 4px;
    height: 4px;
}

.bc-cover2-atmo span:nth-child(7) {
    left: 2%;
    top: 32%;
    animation-delay: 8s;
    animation-duration: 16s;
    width: 5px;
    height: 5px;
}

.bc-cover2-atmo span:nth-child(8) {
    left: 28%;
    top: 66%;
    animation-delay: 5.4s;
    animation-duration: 13s;
    width: 3px;
    height: 3px;
}

.bc-cover2-atmo span:nth-child(9) {
    left: 37%;
    top: 48%;
    animation-delay: 2.8s;
    animation-duration: 18s;
    width: 5px;
    height: 5px;
}

.bc-cover2-atmo span:nth-child(10) {
    left: 8%;
    top: 52%;
    animation-delay: 10s;
    animation-duration: 15s;
    width: 3px;
    height: 3px;
}

.bc-cover2-atmo span:nth-child(11) {
    left: 34%;
    top: 78%;
    animation-delay: 0.5s;
    animation-duration: 16.5s;
    width: 4px;
    height: 4px;
}

.bc-cover2-atmo span:nth-child(12) {
    left: 17%;
    top: 18%;
    animation-delay: 7.2s;
    animation-duration: 13.5s;
    width: 6px;
    height: 6px;
}

.bc-cover2-atmo span:nth-child(13) {
    left: 1%;
    top: 60%;
    animation-delay: 11s;
    animation-duration: 14.5s;
    width: 3px;
    height: 3px;
}

.bc-cover2-atmo span:nth-child(14) {
    left: 23%;
    top: 6%;
    animation-delay: 4s;
    animation-duration: 18.5s;
    width: 4px;
    height: 4px;
}

.bc-cover2-atmo span:nth-child(15) {
    left: 39%;
    top: 30%;
    animation-delay: 9.5s;
    animation-duration: 12.5s;
    width: 5px;
    height: 5px;
}

.bc-cover2-atmo span:nth-child(16) {
    left: 12%;
    top: 88%;
    animation-delay: 6s;
    animation-duration: 16s;
    width: 3px;
    height: 3px;
}

@keyframes bc-cover2-drift {
    0% {
        transform: translate(0,0) scale(0.7);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        transform: translate(8px,-52px) scale(1.15);
        opacity: 0.85;
    }

    88% {
        opacity: 0;
    }

    100% {
        transform: translate(-6px,-110px) scale(0.8);
        opacity: 0;
    }
}

/* right-side dust — layered ABOVE the cards (z-index 3 > wrap's 2) so it's
   actually visible over the card column, not hidden behind their backgrounds */
.bc-cover2-atmo--right {
    z-index: 3;
}

.bc-cover2-atmo--right span {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 7px 1.5px rgba(255,214,140,0.7);
}

.bc-cover2-atmo--right span:nth-child(1) {
    left: 40%;
    top: 14%;
    animation-delay: 1.5s;
    animation-duration: 15s;
}

.bc-cover2-atmo--right span:nth-child(2) {
    left: 52%;
    top: 82%;
    animation-delay: 5s;
    animation-duration: 13s;
    width: 2px;
    height: 2px;
}

.bc-cover2-atmo--right span:nth-child(3) {
    left: 63%;
    top: 35%;
    animation-delay: 8.5s;
    animation-duration: 17s;
}

.bc-cover2-atmo--right span:nth-child(4) {
    left: 47%;
    top: 60%;
    animation-delay: 3s;
    animation-duration: 14s;
    width: 2px;
    height: 2px;
}

.bc-cover2-atmo--right span:nth-child(5) {
    left: 75%;
    top: 20%;
    animation-delay: 10s;
    animation-duration: 16s;
}

.bc-cover2-atmo--right span:nth-child(6) {
    left: 58%;
    top: 8%;
    animation-delay: 0s;
    animation-duration: 12.5s;
    width: 2px;
    height: 2px;
}

.bc-cover2-atmo--right span:nth-child(7) {
    left: 83%;
    top: 70%;
    animation-delay: 6.5s;
    animation-duration: 18s;
}

.bc-cover2-atmo--right span:nth-child(8) {
    left: 70%;
    top: 92%;
    animation-delay: 2s;
    animation-duration: 13.5s;
    width: 2px;
    height: 2px;
}

.bc-cover2-atmo--right span:nth-child(9) {
    left: 88%;
    top: 44%;
    animation-delay: 9s;
    animation-duration: 15.5s;
}

.bc-cover2-atmo--right span:nth-child(10) {
    left: 36%;
    top: 48%;
    animation-delay: 4.5s;
    animation-duration: 16.5s;
    width: 2px;
    height: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .bc-cover2-bg {
        animation: none;
    }

    .bc-cover2-atmo {
        display: none;
    }
}

.bc-cover2-links {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bc-cover2-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1780px;
    margin: 0 auto;
    padding: clamp(74px,7vh,114px) clamp(20px,4vw,48px) clamp(44px,7vh,84px);
    display: flex;
    flex-direction: column;
}

.bc-cover2-head {
    text-align: center;
    margin: 0 0 clamp(12px,2.2vh,30px);
    flex: 0 0 auto;
}

/* cards on the right; empty left lets the orbital logo show through */
.bc-cover2-cards {
    margin-left: auto;
    width: min(62%, 840px);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px,1vh,13px);
}

.bc-cover2-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) minmax(0,1.15fr);
    gap: clamp(12px,1.5vw,22px);
    align-items: center;
    padding: clamp(9px,1.3vh,16px) clamp(16px,1.5vw,24px);
    border: 1px solid var(--bc-hair-soft);
    border-radius: 14px;
    background: linear-gradient(100deg, rgba(28,21,9,0.66), rgba(12,10,6,0.5));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 380ms ease, border-color 380ms ease, box-shadow 380ms ease, transform 380ms ease;
}

.bc-cover2-card:hover {
    background: linear-gradient(100deg, rgba(56,42,16,0.82), rgba(24,19,9,0.68));
    border-color: rgba(236,199,119,0.5);
    box-shadow: 0 0 0 1px rgba(236,199,119,0.12), 0 20px 44px -20px rgba(236,199,119,0.4), 0 0 30px rgba(236,199,119,0.16);
    transform: translateX(4px);
}

/* glowing node on the card's left edge (connector endpoint) */
.bc-cover2-card::before { content: ""; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--color-champagne);
  box-shadow: 0 0 9px 1px rgba(236,199,119,0.75); z-index: 3; transition: box-shadow 380ms ease; }

.bc-cover2-card:hover::before { box-shadow: 0 0 16px 4px rgba(236,199,119,0.95); }
@media (prefers-reduced-motion: reduce) { .bc-cover2-card { transition: none; }
}

.bc-cover2-num { font-family: var(--font-display); font-weight: 300; line-height: 1; font-size: clamp(24.9px,2.38vw,40.2px); }

.bc-cover2-k { font-family: var(--font-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.15em; font-size: clamp(8.5px,0.73vw,10.7px); color: var(--color-champagne); margin: 0 0 6px; }

.bc-cover2-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(16.8px,1.35vw,21.8px);
  line-height: 1.22; color: var(--color-ivory); margin: 0; }

.bc-cover2-desc { font-family: var(--font-body); font-weight: 400; color: rgba(254,247,223,0.86);
  font-size: clamp(12.9px,1.02vw,15.8px); line-height: 1.52; margin: 0; }


/* FOR YOU / NOT FOR YOU */
.bc-foryou-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(16px,2vh,22px); }

.bc-foryou-list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  font-family: var(--font-body); font-weight: 400; color: #4a4438; font-size: clamp(14px,1.08vw,16.5px); line-height: 1.55; }

.bc-card--no .bc-foryou-list li { color: #7c766c; }

.bc-tick, .bc-cross { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--font-micro); font-weight: 800; font-size: 12px; margin-top: 1px; color: #fff; }

.bc-tick { background: linear-gradient(180deg, #D9A94A, #BD8332); box-shadow: 0 3px 8px rgba(160,110,30,0.4); }

.bc-cross { background: #2a2620; }

/* footer line lives at the bottom of the muted card */
.bc-foryou-foot { text-align: left; font-family: var(--font-display); font-style: italic;
  font-weight: 400; font-size: clamp(14px,1.15vw,16.5px); color: #8a847b; line-height: 1.5;
  margin: auto 0 0; padding-top: clamp(22px,3.4vh,32px); }


/* ---- IS THIS FOR YOU — light section (pure white + pastel bg) ---- */
.bc-fit { position: relative; background: #ffffff; overflow: hidden; }

.bc-fit-bg { position: absolute; inset: 0; z-index: 0;
  background: url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/whitebgpastel.jpg') center/cover no-repeat; }

.bc-fit .bc-wrap { position: relative; z-index: 1; max-width: 1534px; }

.bc-fit .bc-section-head { max-width: 860px; }

.bc-fit .bc-eyebrow { color: var(--color-champagne-deep); }

.bc-fit .bc-section-title { color: #17130c; }

.bc-fit .bc-section-title .bc-authority-text {
  background-image: linear-gradient(100deg, #6f4713 0%, #B98A34 34%, #B379AC 70%, #7A54A4 100%);
  background-size: 100% 100%; background-position: 0 0; animation: none; }

.bc-fit-sub { text-align: center; max-width: 62ch; margin: clamp(16px,2.4vh,26px) auto 0;
  font-family: var(--font-body); font-weight: 400; color: #6b6152;
  font-size: clamp(15px,1.2vw,18px); line-height: 1.55; }


/* FAQ — gold-bordered cards, active one highlighted; gold glow top & bottom */
.bc-faqsec { position: relative; overflow: hidden; }

.bc-faqsec::before, .bc-faqsec::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: min(1600px, 128%); height: 480px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(184,128,48,0.42) 0%, rgba(150,102,40,0.18) 38%, transparent 70%); }

.bc-faqsec::before { top: -210px; }

.bc-faqsec::after { bottom: -210px; }

.bc-faqsec .bc-wrap { position: relative; z-index: 1; }

.bc-faqsec .bc-section-head { max-width: 900px; }


.bc-faq { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(12px,1.5vh,18px); }

.bc-faq-item { position: relative; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  transition: background 350ms ease; }

/* gold gradient border */
.bc-faq-item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(120deg, rgba(236,199,119,0.55), rgba(189,131,50,0.28) 42%, rgba(236,199,119,0.18) 60%, rgba(201,138,55,0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }

.bc-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: left; background: none; border: 0; cursor: pointer; color: var(--color-ivory);
  padding: clamp(20px,2.4vh,28px) clamp(22px,2.4vw,36px); font-family: var(--font-display); font-weight: 500;
  font-size: clamp(16px,1.4vw,20px); line-height: 1.35; transition: color 300ms ease; }

.bc-faq-q:hover { color: var(--color-champagne); }

/* chevron (points down when closed; flips vertically to point up when open) */
.bc-faq-icon { flex: 0 0 auto; display: block; width: 14px; height: 9px;
  background: var(--color-champagne); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform 350ms var(--ease-quint,ease); }

.bc-faq-a { max-height: 0; overflow: hidden; transition: max-height 500ms var(--ease-quint,ease); }

.bc-faq-a-inner { padding: 0 clamp(22px,2.4vw,36px) clamp(22px,3vh,30px); font-family: var(--font-body); font-weight: 400;
  color: var(--fg-2); font-size: clamp(14px,1.05vw,16px); line-height: 1.7; }

/* active/open — lighter gold background, brighter border + top glow, gold question */
.bc-faq-item.open { background: linear-gradient(180deg, rgba(236,199,119,0.13), rgba(236,199,119,0.035)); }

.bc-faq-item.open::before { background: linear-gradient(120deg, #ECC777, #C98A73 45%, #E9CE97 65%, #BD8332); }

.bc-faq-item.open .bc-faq-q { color: var(--color-champagne); font-weight: 600; }

.bc-faq-item.open .bc-faq-icon { transform: scaleY(-1); }

/* bright glowing line across the top of the active card */
.bc-faq-item.open::after { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1.5px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,238,196,0.95), transparent);
  box-shadow: 0 0 14px 2px rgba(236,199,119,0.55); }


/* TESTIMONIALS */
.bc-tstsec .bc-section-head { max-width: 780px; }

.bc-tstsec .bc-wrap { max-width: 1584px; }
   /* featured cards ~20% wider */
/* featured testimonials — split card: client media left, quote right */
.bc-tst-featured { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2vw,28px); margin-bottom: clamp(34px,5vh,52px); }

.bc-feat { position: relative; display: grid; grid-template-columns: 45% 55%; align-items: stretch; min-height: clamp(340px,36vw,430px);
  border-radius: 18px; overflow: hidden; background: #08080e;
  box-shadow: 0 34px 78px -30px rgba(236,199,119,0.42), 0 12px 34px rgba(0,0,0,0.45); }

/* gold gradient border */
.bc-feat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 5; pointer-events: none;
  background: linear-gradient(135deg, #C79A48, #F0D89A 22%, #FFF7E2 32%, #D8A46A 52%, #C79A48 70%, #FFF7E2 84%, #C79A48);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }

/* LEFT — homepage shot backdrop + big centered portrait + centered logo */
.bc-feat-media { position: relative; overflow: hidden; background: #0c0c12; }

.bc-feat-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0.5; filter: grayscale(0.22) brightness(0.6) contrast(1.02); }

/* light scrim over the homepage screenshot (behind the portrait) */
.bc-feat-media::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,8,14,0.3) 0%, rgba(8,8,14,0.08) 38%, rgba(8,8,14,0.35) 100%); }

.bc-feat-portrait { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  height: 86%; width: auto; max-width: none; object-fit: contain; object-position: bottom center; }

/* strong bottom vignette OVER the portrait + screenshot */
.bc-feat-media::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(6,6,11,0.5) 72%, rgba(6,6,11,0.97) 100%); }

.bc-feat-logo { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(16px,2vh,26px); z-index: 4;
  height: clamp(30px,3vw,44px); width: auto; max-width: 74%; object-fit: contain; }

/* RIGHT — quote, divider, name/role, huge zoomed X watermark (only top-left shows, bottom-right) */
.bc-feat-body { position: relative; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: clamp(24px,3vw,46px); }

.bc-feat-x { position: absolute; z-index: 0; pointer-events: none; opacity: 0.05;
  left: 30%; top: 48%; right: -60%; bottom: -95%;
  background: url('https://www.influex.com/wp-content/themes/genesis-child/Influex%20Design%20System/assets/X-Factor.svg') no-repeat top left / contain; }

.bc-feat-body > :not(.bc-feat-x) { position: relative; z-index: 1; }

.bc-feat-body blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(15px,1.35vw,20px); line-height: 1.5; color: var(--color-ivory); max-width: 34ch; }

.bc-feat-body blockquote b { font-weight: 700; color: #fff; }

/* per-card tuning: raise Joe's portrait, enlarge Matthew's logo +20% */
.bc-feat--joe .bc-feat-portrait { height: 97%; }

.bc-feat--mh .bc-feat-logo { height: clamp(36px,3.6vw,53px); }

.bc-feat-rule { display: block; width: clamp(48px,6vw,72px); height: 1px; margin: clamp(18px,2.6vh,26px) 0 clamp(14px,2vh,18px);
  background: linear-gradient(90deg, transparent, rgba(236,199,119,0.75), transparent); }

.bc-feat-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  font-size: clamp(14px,1.15vw,17px); margin: 0;
  background-image: var(--bc-authority); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.bc-feat-role { font-family: var(--font-micro); font-weight: 500; font-size: clamp(11px,0.9vw,12.5px);
  color: var(--fg-3); margin: 7px 0 0; }

/* ---------- shared hexagon icon (portrait, or blank branded fallback) ---------- */
.bc-hex { --hexclip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: relative; flex: 0 0 auto; width: 38px; height: 42px;
  clip-path: var(--hexclip); background-image: var(--bc-authority); background-size: 200% 100%; }

.bc-hex img { position: absolute; inset: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px);
  clip-path: var(--hexclip); object-fit: cover; object-position: top center; background: #14151d; }


/* ---------- shared gradient name (matches featured testimonial names) ---------- */
.bc-vid-nm, .bc-qn { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1.2;
  background-image: var(--bc-authority); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }


/* ---------- full-bleed testimonial marquees (JS auto-scroll · drag · arrows) ---------- */
.bc-marquee { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }

.bc-marquee--vids { margin-top: clamp(24px,3.2vh,40px); }

.bc-marquee--tst { margin-top: clamp(6px,0.8vw,12px); }

.bc-mtrack { display: flex; align-items: stretch; gap: clamp(12px,0.9vw,16px);
  padding: 12px clamp(8px,0.7vw,12px); overflow-x: auto; overflow-y: hidden; cursor: grab;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); }

.bc-mtrack::-webkit-scrollbar { display: none; }

.bc-mtrack.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }

.bc-mtrack.is-dragging * { pointer-events: none; }


.bc-mnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(12,14,22,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--bc-hair); color: var(--color-champagne); cursor: pointer;
  transition: background 250ms ease, transform 250ms ease, border-color 250ms ease; }

.bc-mnav:hover { background: rgba(22,24,34,0.82); border-color: var(--color-champagne); transform: translateY(-50%) scale(1.06); }

.bc-mnav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.bc-mnav--prev { left: clamp(8px,2.2vw,34px); }

.bc-mnav--next { right: clamp(8px,2.2vw,34px); }


/* ---------- video card: media fills the whole card, glass name overlay ---------- */
.bc-vid { position: relative; flex: 0 0 auto; width: clamp(336px,28vw,408px); aspect-ratio: 16/10;
  border-radius: 16px; overflow: hidden;
  cursor: pointer; background: #0c0e18; display: block; padding: 0; text-align: left;
  transition: box-shadow 300ms ease; }

.bc-vid:hover { box-shadow: 0 22px 50px -26px rgba(236,199,119,0.5); }

/* gold gradient border — matches the featured Matthew/Joe cards */
.bc-vid::after, .bc-quote-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 6; pointer-events: none;
  background: linear-gradient(135deg, #C79A48, #F0D89A 22%, #FFF7E2 32%, #D8A46A 52%, #C79A48 70%, #FFF7E2 84%, #C79A48);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }

.bc-vid-media { position: absolute; inset: 0; overflow: hidden; }

.bc-vid-media .thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.82;
  transition: opacity 400ms ease, transform 700ms var(--ease-quint,ease); }

.bc-vid:hover .bc-vid-media .thumb { opacity: 0.94; transform: scale(1.05); }

.bc-vid-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,12,0.02) 0%, rgba(5,6,12,0.12) 45%, rgba(5,6,12,0.5) 100%); }

.bc-vid-play { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); width: 66px; height: 66px;
  border-radius: 50%; background: rgba(12,14,22,0.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 2px solid rgba(236,199,119,0.85); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4); transition: transform 320ms var(--ease-quint,ease), background 320ms ease; }

.bc-vid:hover .bc-vid-play { transform: translate(-50%,-50%) scale(1.08); background: rgba(12,14,22,0.5); }

.bc-vid-play svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; }

.bc-vid-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 11px; padding: 12px clamp(14px,1vw,18px) 13px;
  background: linear-gradient(180deg, rgba(8,9,14,0) 0%, rgba(8,9,14,0.5) 45%, rgba(8,9,14,0.72) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid rgba(236,199,119,0.22); }

.bc-vid-foot .bc-hex { width: 32px; height: 36px; }

.bc-vid-nm { font-size: 13px; }


/* ---------- text testimonial card ---------- */
.bc-quote-card { position: relative; flex: 0 0 auto; width: clamp(320px,26vw,392px); margin: 0;
  border-radius: 18px; padding: clamp(26px,2vw,32px);
  background: rgba(255,255,255,0.03); display: flex; flex-direction: column;
  transition: box-shadow 300ms ease; }

.bc-quote-card:hover { box-shadow: 0 22px 50px -26px rgba(236,199,119,0.42); }

.bc-qmark { font-family: var(--font-display); font-weight: 700; font-size: 58px; line-height: 0.6; margin-bottom: 6px;
  background-image: var(--bc-authority); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.bc-quote-card blockquote { margin: 0; font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(15px,1.15vw,17px); line-height: 1.55; color: var(--color-ivory); flex: 1; }

.bc-quote-card blockquote b { font-weight: 600; font-style: normal;
  background-image: var(--bc-authority); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.bc-qrule { display: block; height: 1px; margin: clamp(18px,2vw,24px) 0 clamp(16px,1.6vw,20px);
  background: linear-gradient(90deg, rgba(236,199,119,0.6), transparent); }

.bc-qby { display: flex; align-items: center; gap: 13px; }

.bc-qmeta { display: flex; flex-direction: column; gap: 3px; }

.bc-qn { font-size: 13px; }

.bc-qr { font-family: var(--font-micro); font-weight: 500; font-size: 11.5px; color: var(--fg-3);
  text-transform: none; letter-spacing: 0.01em; line-height: 1.3; }


/* ---------- client logo wall (replaces the lone "+ 228 More") ---------- */
.bc-tst-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(24px,3.4vw,56px); max-width: 1160px; margin: clamp(34px,5vh,56px) auto 0; }

.bc-tst-logos img { height: clamp(28px,2.4vw,36px); width: auto; max-width: 170px; object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.62); transition: filter 240ms ease; }

.bc-tst-logos img:hover { filter: brightness(0) invert(1) opacity(1); }

.bc-tst-logos img[alt="Matthew Hussey"] { height: clamp(45px,3.84vw,57.6px); }

.bc-tst-logos .bc-tst-logos-more { font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: clamp(12.5px,1vw,15.5px); white-space: nowrap;
  background-image: var(--bc-authority); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }


/* Video lightbox */
.bc-lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(3,4,9,0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 24px; }

.bc-lightbox.open { display: flex; }

.bc-lightbox-frame { position: relative; width: min(960px, 92vw); aspect-ratio: 16/9; border-radius: 14px;
  border: 1px solid var(--bc-hair); box-shadow: 0 30px 90px rgba(0,0,0,0.7); }

/* clip the rounded video corners on the mount so the frame itself doesn't
   clip the close button that sits just outside its top-right corner */
.bc-lightbox-frame #bcLightboxMount {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 14px;
}

.bc-lightbox-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bc-lightbox-close {
    position: absolute;
    top: -52px;
    right: 0;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--bc-hair);
    background: rgba(20,22,30,0.85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--color-ivory);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 220ms ease, border-color 220ms ease;
}

.bc-lightbox-close:hover {
    background: rgba(236,199,119,0.22);
    border-color: var(--color-champagne);
    color: #fff;
}

@media (max-width: 560px) {
    .bc-lightbox-close {
        top: 0;
        right: 0;
        transform: translate(-8px, 8px);
    }
}


/* CLOSING CTA — copy on the left, Influex desk mockup as the backdrop */
.bc-closer {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: clamp(90px,15vh,180px) 0;
    background: #05060c;
}

.bc-closer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/influexmock.jpg') no-repeat center right / cover;
}

.bc-closer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5,6,12,0.96) 0%, rgba(5,6,12,0.9) 28%, rgba(5,6,12,0.55) 56%, rgba(5,6,12,0.14) 82%, rgba(5,6,12,0) 100%),
    linear-gradient(180deg, rgba(5,6,12,0.6) 0%, rgba(5,6,12,0) 24%, rgba(5,6,12,0) 72%, rgba(5,6,12,0.72) 100%);
}

.bc-closer .bc-wrap {
    position: relative;
    z-index: 2;
    max-width: none;
    padding: 0 clamp(24px,5vw,80px) 0 clamp(56px,15.1vw,218px);
}

.bc-closer-inner {
    max-width: 660px;
}

.bc-closer-title {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.12;
    font-size: clamp(25px,2.9vw,40px);
    letter-spacing: -0.015em;
    max-width: none;
    margin: 0;
}

.bc-closer-title .bc-authority-text {
    font-weight: 700;
    font-size: 1.25em;
}

.bc-closer-sub {
    margin: clamp(18px,3vh,26px) 0 0;
    max-width: 44ch;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--fg-2);
    font-size: clamp(15px,1.25vw,18px);
    line-height: 1.6;
}

.bc-closer .bc-cta-row {
    align-items: flex-start;
}


/* CTA buttons — 20% larger than the shared .btn base (page-scoped) */
.bc-page .btn--filled {
    font-size: 14.4px;
    padding: 21.6px clamp(43px,4.8vw,67px);
}

@media (max-width: 720px) {
  /* closing CTA: graphic becomes a full-width band at the top (in normal
     flow, not an absolute full-bleed backdrop), copy stacks centered below it */
    .bc-closer {
        padding: 0 0 clamp(48px,8vh,72px);
        text-align: center;
    }

    .bc-closer::before {
    /* images/influexmock.jpg has the monitor well right-of-center in the
       frame (the left desk space is used for the desktop left-aligned copy
       layout), so simple background-position math can't reliably center it
       here either — same fix as the orbital circle: a pre-cropped,
       monitor-centered variant, sized to the mobile band's aspect ratio. */
        position: relative;
        inset: auto;
        z-index: 0;
        display: block;
        width: 100%;
        height: clamp(220px,66vw,300px);
        background: linear-gradient(180deg, rgba(5,6,12,0) 55%, rgba(5,6,12,0.94) 100%),
      url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/influexmock-mobile.jpg') no-repeat center / cover;
    }

    .bc-closer::after {
        display: none;
    }

    .bc-closer .bc-wrap {
        padding: clamp(28px,6vw,40px) clamp(24px,6vw,36px) 0;
        max-width: 560px;
        margin: 0 auto;
    }

    .bc-closer-inner {
        max-width: none;
        margin: 0 auto;
    }

    .bc-closer-sub {
        margin-left: auto;
        margin-right: auto;
    }

    .bc-closer .bc-cta-row {
        align-items: center;
    }
}


/* BOOKING FORM */
.bc-book {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(64px,10vh,120px) 0;
    background: #070810;
}

/* animated 3D light-beams backdrop (shared .ix-invitation-v2-beams positioning) */
.bc-book-beams {
    z-index: 0;
}

.bc-book > .bc-wrap {
    position: relative;
    z-index: 1;
}

.bc-book-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 0;
    align-items: stretch;
    border: 1px solid var(--bc-hair);
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(16,16,16,0.63), rgba(10,10,10,0.64));
}

.bc-book-left {
    padding: clamp(32px,3.4vw,52px);
    border-right: 1px solid var(--bc-hair-soft);
}

.bc-book-eyebrow {
    font-family: var(--font-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 11px;
    color: var(--color-champagne);
    margin: 0 0 18px;
}

.bc-book-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px,2.6vw,36px);
    line-height: 1.14;
    margin: 0 0 16px;
}

.bc-book-sub {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--fg-2);
    font-size: clamp(14px,1.05vw,16px);
    line-height: 1.6;
    margin: 0 0 clamp(26px,3.4vh,36px);
}

.bc-book-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bc-book-points li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--fg-2);
    font-size: clamp(13.5px,1vw,15.5px);
    line-height: 1.5;
}

.bc-book-points .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-champagne);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--bc-hair);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.bc-book-right {
    padding: clamp(32px,3.4vw,52px);
}

.bc-field {
    margin-bottom: clamp(16px,2.2vh,22px);
}

.bc-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px,1.6vw,20px);
}

.bc-field label {
    display: block;
    font-family: var(--font-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10.5px;
    color: #fff;
    margin: 0 0 8px;
}

.bc-field label .req {
    color: var(--color-champagne);
}

.bc-field input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.03);
    color: var(--color-ivory);
    font-family: var(--font-body);
    font-size: 15px;
    transition: border-color 260ms ease, background 260ms ease;
}

.bc-field input::placeholder {
    color: rgba(254,247,223,0.32);
}

.bc-field input:focus {
    outline: none;
    border-color: var(--color-champagne);
    background: rgba(236,199,119,0.05);
}

.bc-book-submit {
    margin-top: clamp(8px,1.4vh,14px);
}

.bc-book-submit .btn {
    width: 100%;
}

.bc-book-fine {
    margin-top: 16px;
    text-align: center;
    font-family: var(--font-micro);
    font-size: 11.5px;
    color: var(--fg-3);
    letter-spacing: 0.03em;
}

.bc-book-thanks {
    display: none;
    text-align: center;
    padding: clamp(30px,5vh,54px) 10px;
}

.bc-book-thanks.show {
    display: block;
}

.bc-book-thanks h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(22px,2.4vw,30px);
    color: var(--color-ivory);
    margin: 0 0 12px;
}

.bc-book-thanks p {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--fg-2);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}


/* ============================================================================
   REGISTER PAGE (BrandConsult-Register.html) — reuses .bc-book form + beams
   ============================================================================ */
/* textarea + select share the input styling; add the pieces inputs don't have */
.bc-field textarea, .bc-field select {
  width: 100%; padding: 14px 16px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03); color: var(--color-ivory); font-family: var(--font-body); font-size: 15px;
  transition: border-color 260ms ease, background 260ms ease; }

.bc-field textarea { line-height: 1.55; resize: vertical; min-height: 92px; }

.bc-field textarea::placeholder { color: rgba(254,247,223,0.32); }

.bc-field textarea:focus, .bc-field select:focus { outline: none; border-color: var(--color-champagne); background: rgba(236,199,119,0.05); }

.bc-field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ECC777' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; }

.bc-field select:invalid { color: rgba(254,247,223,0.32); }
   /* placeholder-option state */
.bc-field select option { color: #12131a; background: #f5efe2; }


/* ---------- intro ---------- */
.bcr-intro { position: relative; z-index: 2; overflow: visible; text-align: center;
  padding: clamp(122px,16vh,172px) 0 0;
  background: #05060c; }

.bcr-intro-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: #05060c url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/spotlightbg.jpg') center top / cover no-repeat; }

.bcr-intro-bg::after { content: ""; position: absolute; inset: 0;
  /* flat ~50% dark knockdown (spotlight was too bright) + a bottom-heavy vignette */
  background:
    linear-gradient(0deg, rgba(5,6,12,0.5), rgba(5,6,12,0.5)),
    linear-gradient(180deg, rgba(5,6,12,0.45) 0%, rgba(5,6,12,0) 28%, rgba(5,6,12,0.14) 62%, rgba(5,6,12,0.9) 100%); }

.bcr-intro-inner { position: relative; z-index: 1; max-width: 1000px; }

.bcr-step { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 clamp(22px,3vh,30px);
  font-family: var(--font-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 11px; color: var(--fg-2); padding: 8px 18px; border-radius: 999px; border: 1px solid var(--bc-hair);
  background: linear-gradient(180deg, rgba(236,199,119,0.08), rgba(236,199,119,0.02)); }

.bcr-step b { font-weight: 700; color: var(--color-champagne); }

.bcr-intro-title { font-family: var(--font-display); font-weight: 500; line-height: 1.14; letter-spacing: -0.015em;
  font-size: clamp(27px,3.6vw,46px); margin: 0 auto; max-width: none; color: var(--color-ivory); }

.bcr-intro-title .bc-authority-text { font-weight: 700; }

.bcr-intro-sub { margin: clamp(18px,2.6vh,24px) auto 0; max-width: none; font-family: var(--font-body);
  font-weight: 400; color: var(--fg-2); font-size: clamp(15px,1.2vw,18px); line-height: 1.6; }

.bcr-warn { margin: clamp(20px,2.8vh,28px) auto 0; max-width: none; font-family: var(--font-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; font-size: clamp(10px,0.82vw,11.5px); line-height: 1.6;
  color: var(--color-champagne); }
/* sub + warning stay on a single line on desktop; wrap only on small screens */
@media (min-width: 720px) { .bcr-intro-sub, .bcr-warn { white-space: nowrap; }
}


/* ---------- reassurance band — solid cream, flush at the hero base ---------- */
.bcr-note-glass { position: relative; z-index: 1; width: 100%; margin: clamp(56px,8vh,88px) 0 0;
  padding: clamp(30px,3.7vw,46px) 0;
  background: var(--bc-cream); }

.bcr-note-glass .bc-wrap { max-width: 1020px; }

.bcr-note-glass p { margin: 0; font-family: var(--font-body); font-weight: 400; color: var(--bc-cream-ink);
  font-size: clamp(14px,1.08vw,16.5px); line-height: 1.62; text-align: center; }

.bcr-note-glass b { font-weight: 700; color: #100d06; }

/* solid cream triangle tail, pointing down into the form below */
.bcr-note-glass::after { content: ""; position: absolute; left: 50%; bottom: -18px; z-index: 1;
  transform: translateX(-50%); width: 0; height: 0;
  border-left: 18px solid transparent; border-right: 18px solid transparent;
  border-top: 18px solid var(--bc-cream); }


/* ---------- form section tweaks ---------- */
.bcr-form .bc-book-grid { grid-template-columns: 0.92fr 1.08fr; }

.bcr-host { display: flex; align-items: center; gap: 14px; margin: clamp(24px,3vh,30px) 0 clamp(22px,2.8vh,28px);
  padding: 14px 16px; border: 1px solid var(--bc-hair-soft); border-radius: 14px;
  background: linear-gradient(180deg, rgba(236,199,119,0.06), rgba(255,255,255,0.015)); }

.bcr-host-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center top;
  border: 1px solid var(--bc-hair); flex: 0 0 auto; }

.bcr-host-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 13.5px; color: var(--color-ivory); margin: 0; }

.bcr-host-role { font-family: var(--font-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; color: var(--color-champagne); margin: 5px 0 0; }

.bcr-testimony { margin: clamp(24px,3.2vh,32px) 0 0; padding: clamp(18px,2.2vw,24px);
  border: 1px solid var(--bc-hair-soft); border-left: 3px solid var(--color-champagne-deep); border-radius: 4px 14px 14px 4px;
  background: rgba(236,199,119,0.045); }

.bcr-testimony-tag { font-family: var(--font-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 10px; color: var(--color-champagne); margin: 0 0 12px; }

.bcr-testimony blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(14px,1.1vw,16px); line-height: 1.5; color: var(--color-ivory); }

.bcr-testimony figcaption { margin: 12px 0 0; font-family: var(--font-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 10.5px; color: var(--fg-3); }


/* ---------- step 2 — calendar ---------- */
.bcr-cal { position: relative; overflow: hidden; background: #05060c; padding: clamp(64px,10vh,116px) 0;
  border-top: 1px solid var(--bc-hair-soft); }

/* large corner spotlights — top-right and bottom-left */
.bcr-cal::before, .bcr-cal::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(1100px,85vw); height: min(1100px,85vw); border-radius: 50%; }

.bcr-cal::before { top: -30%; right: -18%;
  background: radial-gradient(closest-side, rgba(236,199,119,0.42), rgba(236,199,119,0.13) 42%, transparent 72%); }

.bcr-cal::after { bottom: -30%; left: -18%;
  background: radial-gradient(closest-side, rgba(201,138,55,0.38), rgba(201,138,55,0.11) 42%, transparent 72%); }

.bcr-cal > .bc-wrap { position: relative; z-index: 1; }

.bcr-cal .bc-section-title { font-size: clamp(24px,3vw,42px); }

.bcr-cal-sub { margin: clamp(16px,2.4vh,22px) auto 0; max-width: 60ch; font-family: var(--font-body);
  font-weight: 400; color: var(--fg-2); font-size: clamp(14px,1.15vw,17px); line-height: 1.6; }

/* .bcr-sched is now the OUTER gold-bordered frame — its own padding is the
   visible gap between the gradient rim and the white card (.bcr-sched-inner)
   sitting inside it, instead of the rim sitting flush on the card's own edge. */
.bcr-sched {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(14px,1.8vw,20px);
    border-radius: 26px;
    background: linear-gradient(165deg, rgba(236,199,119,0.1), rgba(236,199,119,0.02));
    box-shadow: 0 40px 90px -34px rgba(0,0,0,0.7), 0 0 50px rgba(236,199,119,0.18);
}

/* gradient-gold rim (flat border-color can't render a gradient, so mask a padded pseudo-layer instead) */
.bcr-sched::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; z-index: 5; pointer-events: none;
  background: linear-gradient(135deg, #8a5a1e 0%, #ECC777 13%, #FFF4D6 21%, #C98A73 37%,
    #BD8332 51%, #FFF4D6 65%, #ECC777 79%, #8a5a1e 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }

.bcr-sched-inner { border-radius: 16px; overflow: hidden; background: #fdfdfb; }

.bcr-sched-head { padding: clamp(26px,3.5vw,35px) clamp(26px,3.5vw,38px); border-bottom: 1px solid rgba(0,0,0,0.08); }

.bcr-sched-head h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px,1.7vw,22px);
  color: #16130c; margin: 0 0 16px; }

.bcr-sched-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.bcr-sched-meta li { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 400;
  font-size: 14px; color: #5b5442; }

.bcr-sched-meta svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: #9a7d3c; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }

.bcr-sched-body { padding: clamp(26px,3.5vw,35px) clamp(26px,3.5vw,38px) clamp(28px,3.5vw,38px); }

.bcr-sched-label { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #16130c; margin: 0 0 18px; }

.bcr-sched-cols { display: grid; grid-template-columns: 1fr 168px; gap: clamp(18px,2.4vw,30px); align-items: start; }

.bcr-calw-month { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 14px; }

.bcr-calw-month span { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #16130c; }

.bcr-calw-month button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12);
  background: #fff; color: #6a5f47; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background 200ms ease; }

.bcr-calw-month button:hover { background: #f3ecdc; }

.bcr-calw-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin: 0 0 6px; }

.bcr-calw-dow span { text-align: center; font-family: var(--font-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 10.5px; color: #9a917c; }

.bcr-calw-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }

.bcr-day { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-body); font-size: 13.5px; }

.bcr-day--empty { visibility: hidden; }

.bcr-calw-slots { display: flex; flex-direction: column; gap: 10px; }

.bcr-slot { padding: 13px 10px; border-radius: 9px; border: 1px solid #2f66d6; background: #fff;
  color: #2f66d6; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; cursor: pointer;
  transition: background 180ms ease, color 180ms ease; }

.bcr-slot:hover { background: #2f66d6; color: #fff; }

.bcr-calw-tz { display: flex; align-items: center; gap: 9px; margin: clamp(20px,2.6vw,26px) 0 0;
  padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.08);
  font-family: var(--font-body); font-size: 13px; color: #5b5442; }

.bcr-calw-tz svg { width: 16px; height: 16px; fill: none; stroke: #9a7d3c; stroke-width: 1.6; }

.bcr-cal-fine { margin: clamp(26px,4vh,36px) auto 0; max-width: 62ch; text-align: center; font-family: var(--font-micro);
  font-size: 12px; letter-spacing: 0.02em; color: var(--fg-3); line-height: 1.6; }

.bcr-cal-fine a { color: var(--color-champagne); text-decoration: none; }

.bcr-cal-fine a:hover { text-decoration: underline; }
@media (max-width: 680px) {
  .bcr-form .bc-book-grid { grid-template-columns: 1fr; }

  .bcr-sched-cols { grid-template-columns: 1fr; }

  .bcr-calw-slots { flex-direction: row; flex-wrap: wrap; }

  .bcr-calw-slots .bcr-slot { flex: 1 1 46%; }
}


/* ---------- hero ---------- */
.tq-hero { position: relative; overflow: hidden; text-align: center;
  padding: clamp(120px,16vh,168px) 0 clamp(102px,15.3vh,170px); background: #05060c; }

.tq-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: #05060c url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/spotlightbg2.jpg') center / cover no-repeat; }

.tq-hero-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,12,0.35) 0%, rgba(5,6,12,0.08) 28%, rgba(5,6,12,0.28) 60%, rgba(5,6,12,0.72) 82%, rgba(5,6,12,0.98) 100%); }

.tq-hero-inner { position: relative; z-index: 1; max-width: 980px; }

.tq-check-img { display: block; height: clamp(88px,9.8vw,120px); width: auto; margin: 0 auto clamp(18px,2.6vh,26px);
  transform-origin: center; will-change: transform, filter;
  filter: drop-shadow(0 0 14px rgba(233,199,125,0.5)) drop-shadow(0 0 36px rgba(201,138,55,0.32));
  animation: tq-check-glow 3.2s ease-in-out infinite; }

@keyframes tq-check-glow {
  0%, 100% { transform: scale(1);
    filter: drop-shadow(0 0 11px rgba(233,199,125,0.4)) drop-shadow(0 0 26px rgba(201,138,55,0.24)); }
  50% { transform: scale(1.05);
    filter: drop-shadow(0 0 24px rgba(233,199,125,0.8)) drop-shadow(0 0 60px rgba(201,138,55,0.52)); }
}
@media (prefers-reduced-motion: reduce) { .tq-check-img { animation: none; }
}

.tq-eyebrow { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: -0.015em;
  font-size: clamp(44px,6.1vw,78px); line-height: 1.05; margin: 0 0 clamp(8px,1.4vh,14px); color: var(--color-champagne); }

.tq-hero-title { font-family: var(--font-display); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em;
  font-size: clamp(19px,2.3vw,32px); margin: 0 auto; color: #fff; }
@media (min-width: 720px) { .tq-hero-title { white-space: nowrap; }
}

.tq-hero-title .bc-authority-text { font-weight: 700; }

.tq-hero-sub { margin: clamp(18px,2.6vh,24px) auto 0; max-width: 52ch; font-family: var(--font-body);
  font-weight: 400; color: var(--fg-2); font-size: clamp(15px,1.2vw,18px); line-height: 1.6; }


/* ---------- host card (Tellman) — cream + dark variants ---------- */
.tq-host { display: flex; align-items: center; gap: 14px; padding: 0 0 clamp(20px,2.6vh,26px);
  border-bottom: 1px solid rgba(120,90,30,0.18); margin: 0 0 clamp(26px,3.4vh,34px); }

.tq-host-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center top;
  border: 1px solid rgba(120,90,30,0.35); flex: 0 0 auto; }

.tq-host-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 13.5px; color: #1b160d; margin: 0; }

.tq-host-role { font-family: var(--font-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 10px; color: #9a7423; margin: 6px 0 0; }

.tq-host--dark { border-bottom-color: var(--bc-hair-soft); }

.tq-host--dark .tq-host-photo { border-color: var(--bc-hair); }

.tq-host--dark .tq-host-name { color: var(--color-ivory); }

.tq-host--dark .tq-host-role { color: var(--color-champagne); }


/* ---------- cream letter (dark portrait card floats on cream) ---------- */
.tq-letter { position: relative; background: var(--bc-cream); padding: clamp(56px,9vh,100px) 0; }

.tq-letter-bg { display: none; }

.tq-letter-wrap { position: relative; z-index: 1; }

.tq-letter-card { max-width: 1120px; }

.tq-letter-body p { margin: 0 0 clamp(18px,2.4vh,24px); font-family: var(--font-body); font-weight: 400;
  color: var(--bc-cream-ink); font-size: clamp(15px,1.12vw,17px); line-height: 1.72; }

.tq-letter-body p:last-child { margin-bottom: 0; }


/* ---------- dark "before your call" steps ---------- */
.tq-steps { position: relative; overflow: hidden; background: #05060c; padding: clamp(66px,10vh,120px) 0; }

.tq-steps-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #05060c url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/softradialbg.jpg') center / cover no-repeat; }

.tq-steps-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,12,0.42) 0%, rgba(5,6,12,0.14) 34%, rgba(5,6,12,0.22) 70%, rgba(5,6,12,0.6) 100%); }

.tq-steps > .bc-wrap { position: relative; z-index: 1; }

.tq-steps-eyebrow { font-family: var(--font-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.28em;
  font-size: clamp(11px,0.9vw,13px); color: var(--color-champagne); margin: 0 0 18px; text-align: center; }

.tq-steps .tq-steps-title { color: #fff; }

.tq-steplist { max-width: 940px; margin: clamp(42px,6vh,66px) auto 0; list-style: none; padding: 0; }

.tq-step { position: relative; display: grid; grid-template-columns: clamp(72px,8vw,128px) 1fr;
  gap: clamp(22px,3vw,52px); align-items: start; padding: clamp(30px,4.4vh,48px) 0; }

.tq-step:first-child { padding-top: 0; }

.tq-step + .tq-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(236,199,119,0.30) 16%, rgba(236,199,119,0.30) 84%, transparent 100%); }

.tq-step-n { font-family: var(--font-display); font-weight: 300; line-height: 0.86;
  font-size: clamp(44px,5.2vw,72px); letter-spacing: 0.02em;
  background-image: var(--bc-authority); background-size: 300% 100%; background-repeat: repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: bc-sweep 18s linear infinite; }

.tq-step-c h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px,1.55vw,22px);
  color: #fff; margin: 0 0 11px; line-height: 1.25; }

.tq-step-c > p { font-family: var(--font-body); font-weight: 400; color: rgba(244,236,221,0.66);
  font-size: clamp(14.5px,1.08vw,16px); line-height: 1.66; margin: 0; }

.tq-subq { list-style: none; margin: clamp(18px,2.4vh,24px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.tq-subq li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }

.tq-subq-b { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(236,199,119,0.55);
  background: rgba(236,199,119,0.08); color: var(--color-champagne); font-family: var(--font-display); font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; }

.tq-subq li > span:last-child { font-family: var(--font-body); color: rgba(244,236,221,0.62); font-size: clamp(14px,1.02vw,15.5px); line-height: 1.58; }


/* ---------- white portfolio ---------- */
.tq-portfolio { position: relative; overflow: hidden; background: #fff; padding: clamp(60px,9vh,110px) 0; text-align: center; }

.tq-portfolio-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/whyiconicbg.jpg') center / cover no-repeat; opacity: 0.05; }

.tq-portfolio-inner { position: relative; z-index: 1; max-width: 860px; }

.tq-portfolio-eyebrow { font-family: var(--font-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.26em;
  font-size: clamp(11px,0.9vw,13px); color: var(--color-champagne-deep); margin: 0 0 18px; }

.tq-portfolio-title { font-family: var(--font-display); font-weight: 500; line-height: 1.16; letter-spacing: -0.01em;
  font-size: clamp(25px,2.8vw,36px); color: #1a1610; margin: 0 auto; max-width: none; }

.tq-portfolio-title .bc-authority-text { font-weight: 700;
  background-image: linear-gradient(92deg, #6f460f 0%, #a9791f 20%, #E0B45B 42%, #915f14 60%, #CE9D3E 80%, #6f460f 100%); }

.tq-portfolio-sub { margin: clamp(18px,2.6vh,24px) auto 0; max-width: 58ch; font-family: var(--font-body);
  font-weight: 400; color: #5b5142; font-size: clamp(14.5px,1.12vw,16.5px); line-height: 1.66; }

.tq-portfolio-btn { margin-top: clamp(28px,4vh,40px); }

.tq-portfolio-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(7px,1.1vh,12px) clamp(24px,3.4vw,52px); margin: clamp(30px,4.5vh,52px) auto 0; }

.tq-portfolio-logos img { max-height: clamp(26px,2.4vw,32px); max-width: clamp(112px,12vw,142px);
  width: auto; height: auto; object-fit: contain; filter: brightness(0); opacity: 0.5; }

.tq-portfolio-logos img.tq-logo-lg { max-height: clamp(30px,2.76vw,37px); max-width: clamp(129px,13.8vw,163px); }

.tq-portfolio-logos .tq-more { flex-basis: 100%; margin-top: 0;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: clamp(11px,0.9vw,13px); color: #b08a3a; white-space: nowrap; }


/* ---------- dark closing ---------- */
.tq-closing { position: relative; overflow: hidden; background: #05060c; padding: clamp(60px,9vh,110px) 0;
  border-top: 1px solid var(--bc-hair-soft); }

.tq-closing-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 48% at 50% -3%, rgba(233,199,125,0.24) 0%, rgba(233,199,125,0.07) 42%, rgba(5,6,12,0) 72%),
    radial-gradient(28% 24% at 50% 0%, rgba(255,244,214,0.18) 0%, rgba(5,6,12,0) 60%); }

.tq-closing > .bc-wrap { position: relative; z-index: 1; }

.tq-closing-box { position: relative; max-width: 760px; margin: 0 auto; border-radius: 22px; background: transparent;
  padding: clamp(34px,4.6vw,60px) clamp(30px,4.4vw,56px) clamp(30px,4vw,48px); }

.tq-closing-box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(140deg, #8a5a1e 0%, #ECC777 16%, #FFF4D6 26%, #C98A73 44%, #BD8332 60%, #FFF4D6 74%, #ECC777 86%, #8a5a1e 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }

.tq-letter-body--dark p { color: var(--fg-2); }

.tq-letter-body--dark p:first-child { color: var(--color-ivory); font-weight: 600; }

.tq-closing .tq-host { margin: clamp(30px,4vh,40px) 0 0; padding: clamp(24px,3vh,30px) 0 0;
  border-bottom: 0; border-top: 1px solid var(--bc-hair-soft); }

.tq-closing .tq-host-name { text-transform: none; letter-spacing: 0; font-size: 15px; }
@media (max-width: 680px) {
  .tq-step { grid-template-columns: auto 1fr; gap: 16px; }

  .tq-step-n { font-size: 28px; }
}


/* FOOTER */
.bc-footer { text-align: center; padding: clamp(40px,6vh,64px) 0; background: #000; }

.bc-footer-logo { height: 38px; width: auto; display: block; margin: 0 auto clamp(16px,2.4vh,24px); }

.bc-footer p { font-family: var(--font-micro); font-weight: 500; letter-spacing: 0.06em; font-size: 12.5px; color: var(--fg-3); margin: 0; }

.bc-footer b { color: var(--color-champagne); font-weight: 600; }
/* RESPONSIVE */
@media (max-width: 960px) {
  .bc-hero-duo { grid-template-columns: 1fr; }

  .bc-duo-right { border-left: 0; border-top: 1px solid var(--bc-hair); }

  .bc-tst-featured { grid-template-columns: 1fr; }

  .bc-feat { grid-template-columns: 1fr; }

  .bc-feat-media { min-height: clamp(280px,60vw,360px); }

  .bc-book-grid { grid-template-columns: 1fr; }

  .bc-book-left { border-right: 0; border-bottom: 1px solid var(--bc-hair-soft); }

  /* letter card stacks: portrait becomes a banner above the letter */
  .bc-letter-card { grid-template-columns: 1fr; }

  .bc-letter-portrait { min-height: clamp(300px,52vw,420px); }

  .bc-letter-portrait img { object-position: center 22%; }

  /* why-it's-free cards stack, flatten the tilt, drop the overlap */
.bc-free {
    padding-bottom: clamp(84px,13vh,168px);
}
  /* no stagger → symmetric padding */
.bc-free-cards {
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: 520px;
}

.bc-free-card {
    width: 100%;
}

.bc-free-card--a, .bc-free-card--b {
    justify-self: stretch;
    margin-top: 0;
}

.bc-free-card--b.bc-reveal {
    transition-delay: 0.22s;
}

.bc-free-card--a .bc-free-card-in, .bc-free-card--b .bc-free-card-in {
    transform: none;
}

  /* what-we-cover: drop the orbital split — cards go full width, logo fades behind */
.bc-cover2 {
    min-height: 0;
}

.bc-cover2-links {
    display: none;
}

.bc-cover2-atmo--right {
    display: none;
}

.bc-cover2-card::before {
    display: none;
}

.bc-cover2-bg {
    opacity: 0.28;
    background-position: center top;
}

.bc-cover2-cards {
    width: 100%;
    margin-left: 0;
}

.bc-cover2-card {
    grid-template-columns: auto 1fr;
    grid-template-areas: "num body" "num desc";
    column-gap: 16px;
    row-gap: 6px;
    align-items: start;
}

.bc-cover2-num {
    grid-area: num;
    align-self: start;
}

.bc-cover2-body {
    grid-area: body;
}

.bc-cover2-desc {
    grid-area: desc;
}
}
/* Below the flip threshold (JS enables the pin only at >=900px), the letter
   section is a plain stacked band. Its background image lives inside the padded
   track, so the track's top/bottom padding rendered as bare dark ("cut"
   background). Move that padding onto the stage the image actually covers. */
@media (max-width: 899px) {
  .bc-letter-track { padding: 0; }

  .bc-letter-stick { padding: clamp(56px,9vh,104px) 0; }

  /* The letterbg texture used to stretch across BOTH stacked cards (Dima's
     letter + Tellman's card below), which "cover"-scaled it to a much taller
     box and made it read as over-zoomed. Confine it to just Dima's card —
     height is set by JS to match that card's actual rendered height (see
     the flip-section script) — then fade to the section's base dark color
     so it blends cleanly into Tellman's card instead of hard-cutting. */
  .bc-letter-bg { inset: auto; top: 0; left: 0; right: 0;
    height: var(--bc-letter-bg-h, 62vh);
    background: linear-gradient(180deg, rgba(10,10,13,0) 62%, rgba(10,10,13,0.98) 100%),
      url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/letterbg.jpg') center/cover no-repeat; }
}
@media (max-width: 680px) {
  .bc-section-title--nowrap { white-space: normal; }

  .bc-cards-2 { grid-template-columns: 1fr; }

  .bc-field-row { grid-template-columns: 1fr; }

  .bc-metrics { gap: 4px; }

  /* pull the hero copy up — the nav-to-copy gap was too tall on phones */
  .bc-hero { padding-top: clamp(94px,13vh,116px); }

  /* the enlarged CTA overflows on phones — make it full-width of the copy
     container instead, with a moderate label size */
  .bc-page .btn--filled { font-size: 12px; letter-spacing: 0.18em; padding: 17px 18px; }

  .bc-cta-row .btn--filled { width: 100%; }

  /* trim the dead space under the trusted-by marquee before the letter band */
  .bc-clients { padding-bottom: clamp(10px,2vh,18px); }

  .bc-clients .ix-face-track { padding-bottom: 16px; }

  /* client logo wall — the desktop clamp floors (28px / 45px) are too big on
     phones and wrap the row to 5 lines; shrink and tighten the gap */
  .bc-tst-logos { gap: 16px 22px; margin-top: 26px; }

  .bc-tst-logos img { height: 17px; max-width: 100px; }

  .bc-tst-logos img[alt="Matthew Hussey"] { height: 26px; }

  /* what-we-cover: show the orbital graphic as a distinct band centered at the
     top, then push the copy down so it stays visible above the cards.
     images/influexlogocircle.jpg has the circle off-center in its frame (the
     right-hand black space is used for the desktop split layout), so centering
     it here with background-position math doesn't hold at every width — swap
     in a square, pre-cropped variant where the circle sits dead-center. */
.bc-cover2-bg {
    opacity: 0.95;
    background-image: url('https://www.influex.com/wp-content/themes/genesis-child/GHL/images/influexlogocircle-centered.jpg');
    background-size: clamp(200px,56vw,244px) auto;
    background-position: center 8px;
}

.bc-cover2-wrap {
    padding-top: clamp(224px,62vw,272px);
}

  /* keep Duration · Investment · Availability on one horizontal row */
.bc-stats {
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
}

.bc-stat-k {
    font-size: 10px;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.bc-stat-v {
    font-size: 19px;
}

.bc-stat-v s {
    font-size: 0.55em;
    margin-right: 3px;
}

.bc-stat-note {
    font-size: 11.5px;
    margin-top: 5px;
}
}


/* ---------- v3: nav trimmed to logo + Book a Call only ----------
   The shared .ix-nav-cta-desktop is hidden on mobile (it hands off to the
   hamburger, which this page no longer has). Keep it visible at all sizes. */
.bc-nav-cta {
    display: inline-flex !important;
}


/* ---------- nav is NOT sticky on this page ----------
   Shared styles-sales.css pins the nav (and its scrim) with position:fixed so
   the hero runs up behind it. Here we want the logo + Book a Call bar to scroll
   away with the page, so re-anchor both to the document top with absolute. */
.bc-page .ix-nav {
    position: absolute !important;
}

.bc-page .ix-nav-scrim {
    position: absolute;
}


/* ---------- nav stays fully transparent, never darkens on scroll ----------
   Shared styles-sales.css adds a solid dark background + blur via
   .ix-nav.is-scrolled (JS toggles this class after ~40px of scroll), plus a
   .ix-nav-scrim gradient meant to darken the collage behind the homepage
   nav. Neither reads as "transparent" here — kill both on this page. */
.bc-page .ix-nav.is-scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
}

.bc-page .ix-nav-scrim {
    display: none !important;
}