/* =============================================================================
   THE BRO COACH(R) PODCAST - DESIGN SYSTEM
   Real talk. Clear moves. Purpose-driven masculinity.

   Structurally identical to the Man-UP! Life Coaching design system (same
   tokens, same component contracts, same breakpoints) so both sites behave the
   same way and fixes port across. Only the LOOK differs, and only in the token
   block below: Barlow / Barlow Condensed instead of Montserrat / Inter /
   Norwester, and pure black instead of #121212.

   Palette + type were read out of the live WordPress theme's compiled CSS
   (themes/yootheme/css/theme.css) rather than eyeballed, so these are the
   real brocoach.com values:
       #fff x170   #000 x94   #c84141 x81   #9c9c9c x37   #262626 x21
       'Barlow Condensed' x46 (headings)    'Barlow' x18 (body)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   FONTS
   Barlow + Barlow Condensed are both Google Fonts, loaded via <link> in each
   page head, so there are no self-hosted @font-face declarations here. (MULC
   self-hosts Norwester/Kollektif/Chivo; Bro Coach needs none of them.)
   ----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES (Design Tokens)
   ----------------------------------------------------------------------------- */
:root {
    /* === COLORS === */

    /* Primary - Brick Red (Action, Power, Urgency)
       Note: brocoach.com uses #c84141; MULC uses #C84140. One step apart in the
       blue channel, i.e. the same red to the eye. Kept at the Bro Coach value
       so this file is faithful to its own site. */
    --color-primary: #c84141;
    --color-primary-dark: #a83838;      /* real hover from theme.css (x8) */
    --color-primary-darker: #a63030;    /* real active  from theme.css (x4) */
    --color-primary-light: #ba3636;     /* real variant from theme.css (x2) */
    --color-primary-alpha-15: rgba(200, 65, 65, 0.15);
    --color-primary-alpha-40: rgba(200, 65, 65, 0.4);

    /* Backgrounds - Dark Theme (Bro Coach runs true black, not MULC's #121212) */
    --color-bg-primary: #000000;
    --color-bg-secondary: #121212;
    --color-bg-tertiary: #1a1a1a;
    --color-bg-elevated: #262626;       /* real panel grey from theme.css (x21) */

    /* Light surfaces - Bro Coach inverts some sections to near-white */
    --color-surface-light: #fafafa;     /* theme.css x20 */
    --color-surface-light-alt: #f1f1f1; /* theme.css x28 */

    /* Text */
    --color-text-primary: #ffffff;
    --color-text-secondary: #c2c2c2;
    --color-text-muted: #9c9c9c;        /* real muted grey from theme.css (x37) */
    --color-text-subtle: #666666;
    --color-text-on-light: #262626;     /* body copy inside light sections */

    /* Accents */
    /* --color-accent is referenced by .process-step__icon svg in components.css
       but was never defined in the MULC source this was ported from. Because
       `stroke` is an inherited property, an unresolvable var() with no fallback
       falls back to `none`, which renders those icons invisible. Defined here as
       the brand red so they actually show up. (Same latent bug still exists in
       MULC's live components.css - worth fixing there too.) */
    --color-accent: var(--color-primary);
    --color-success: #22c55e;
    --color-success-alpha-20: rgba(34, 197, 94, 0.2);
    --color-warning: #f59e0b;
    --color-error: #c84141;

    /* Borders */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(255, 255, 255, 0.12);

    /* === TYPOGRAPHY === */

    /* Font Families - Barlow family throughout, matching brocoach.com.
       Condensed carries every display/heading/nav role (it is the dominant face
       in theme.css at 46 uses); regular Barlow carries body copy. */
    --font-primary: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Barlow Condensed', 'Barlow', Impact, sans-serif;
    --font-heading: 'Barlow Condensed', 'Barlow', -apple-system, sans-serif;
    --font-nav: 'Barlow Condensed', 'Barlow', -apple-system, sans-serif;
    --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Sizes - Fluid Typography */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.8125rem;    /* 13px */
    --text-base: 0.9375rem;  /* 15px */
    --text-md: 1.0625rem;    /* 17px */
    --text-lg: 1.25rem;      /* 20px */
    --text-xl: 1.375rem;     /* 22px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: clamp(1.625rem, 3.5vw, 2.375rem);  /* 26-38px */
    --text-4xl: clamp(2rem, 4vw, 3rem);            /* 32-48px */
    --text-5xl: clamp(2.5rem, 5vw, 4rem);          /* 40-64px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-heading: 1.1;   /* brocoach.com sets 1.1 on every heading level */
    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.7;

    /* Letter Spacing */
    --tracking-tight: -1px;
    --tracking-normal: 0;
    --tracking-wide: 1px;
    --tracking-wider: 2px;

    /* === SPACING === */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */

    /* === LAYOUT === */
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-wide: 1400px;
    --container-padding: 60px;
    --container-padding-mobile: 25px;

    /* === BORDERS === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* === SHADOWS === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-primary: 0 8px 24px rgba(200, 65, 65, 0.35);
    --shadow-primary-hover: 0 12px 32px rgba(200, 65, 65, 0.45);

    /* === BRO COACH SIGNATURE ACCENT ===
       brocoach.com marks headings with a short thick red rule rather than a
       full-width divider. Straight out of theme.css:
           width:100px; border-top:10px solid #c84141
       Exposed as tokens so .heading-rule (below) and any section can reuse it. */
    --rule-width: 100px;
    --rule-thickness: 10px;

    /* === TRANSITIONS === */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    /* === Z-INDEX === */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-tooltip: 400;
}

/* -----------------------------------------------------------------------------
   RESET & BASE STYLES
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-loose);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    overflow-x: hidden;
}

/* -----------------------------------------------------------------------------
   TYPOGRAPHY
   ----------------------------------------------------------------------------- */

/* Headings: Barlow Condensed 600, uppercase, tight 1.1 leading throughout.
   Taken verbatim from brocoach.com's compiled theme.css, which sets every level
   identically apart from size:
       h1 40.8px | h2 34px | h3 28px | h4 22px | h5 18px | h6 15px
   Two things to keep in mind if you touch this:
     1. Weight MUST be 600, not 400. MULC's h1 ran at 400 because Norwester is
        heavy at its single weight; Barlow Condensed at 400 reads far too thin.
     2. Only 500 and 600 are loaded, so don't reference 700 or it will synthesise
        a fake bold. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);      /* 600 */
    line-height: var(--leading-heading);    /* 1.1 */
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-normal);
}

/* h1 keeps the fluid clamp so hero headlines still scale on mobile; the Bro
   Coach fixed 40.8px is the desktop end of that range. */
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

/* The signature Bro Coach heading rule: a short, thick red bar. Add
   .heading-rule to any heading to get it. */
.heading-rule::after {
    content: "";
    display: block;
    width: var(--rule-width);
    max-width: 100%;
    border-top: var(--rule-thickness) solid var(--color-primary);
    margin-top: var(--space-4);
}

.heading-rule--center::after {
    margin-left: auto;
    margin-right: auto;
}

p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

p:last-child {
    margin-bottom: 0;
}

strong {
    color: var(--color-text-primary);
    font-weight: var(--font-bold);
}

em.highlight {
    color: var(--color-primary);
    font-style: normal;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-light);
}

/* -----------------------------------------------------------------------------
   LAYOUT UTILITIES
   ----------------------------------------------------------------------------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.container--wide {
    max-width: var(--container-wide);
}

.section {
    padding: var(--space-20) 0;
}

.section--lg {
    padding: var(--space-24) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-5);
    line-height: var(--leading-snug);
}

.section-subtitle {
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Grid utilities */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* -----------------------------------------------------------------------------
   COMPONENT: BUTTONS
   ----------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    text-decoration: none;
    padding: var(--space-5) var(--space-10);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-primary);
}

.btn--primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-hover);
    color: var(--color-text-primary);
}

.btn--secondary {
    background: transparent;
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
}

.btn--secondary:hover {
    border-color: var(--color-text-primary);
    color: var(--color-text-primary);
}

.btn--lg {
    padding: var(--space-5) var(--space-12);
    font-size: var(--text-base);
}

.btn__subtext {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    text-transform: none;
    letter-spacing: var(--tracking-normal);
    margin-top: var(--space-2);
    opacity: 0.9;
}

/* -----------------------------------------------------------------------------
   COMPONENT: CARDS
   ----------------------------------------------------------------------------- */
.card {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card--bordered-left {
    border-top: none;
    border-left: 4px solid var(--color-primary);
}

.card--success {
    border-color: var(--color-success);
}

.card--warning {
    border-color: var(--color-warning);
}

.card--error {
    border-color: var(--color-error);
}

.card__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.card__text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* -----------------------------------------------------------------------------
   COMPONENT: BADGES & TAGS
   ----------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.badge--primary {
    background: var(--color-primary-alpha-15);
    border: 1px solid var(--color-primary-alpha-40);
    color: var(--color-primary);
}

.badge--success {
    background: var(--color-success-alpha-20);
    color: var(--color-success);
}

/* -----------------------------------------------------------------------------
   COMPONENT: TRUST INDICATORS
   ----------------------------------------------------------------------------- */
.trust-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.trust-badge__icon {
    color: var(--color-success);
}

.trust-indicators {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

.trust-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

/* -----------------------------------------------------------------------------
   COMPONENT: TESTIMONIALS
   ----------------------------------------------------------------------------- */
.testimonial {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.testimonial:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.testimonial__header {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.testimonial__avatar {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 3px solid var(--color-primary);
    flex-shrink: 0;
}

.testimonial__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.testimonial__name {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-1);
}

.testimonial__title {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.testimonial__label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-2);
}

.testimonial__label--before { color: var(--color-error); }
.testimonial__label--learned { color: var(--color-warning); }
.testimonial__label--after { color: var(--color-success); }

.testimonial__text {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-style: italic;
    line-height: var(--leading-normal);
}

/* -----------------------------------------------------------------------------
   COMPONENT: NAVIGATION
   ----------------------------------------------------------------------------- */
.nav {
    position: fixed;
    top: 36px; /* Below announcement bar (6px padding + 22px content + 6px padding + 2px buffer) */
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: rgba(18, 18, 18, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 3px solid var(--color-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 20px 0;
}

/* Light streak/glint animation on nav bottom border */
.nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 20%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: navBorderShimmer 16s linear infinite;
    pointer-events: none;
}

@keyframes navBorderShimmer {
    0%, 70% {
        left: -20%;
    }
    100% {
        left: 100%;
    }
}

.nav__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-6);
    min-height: 60px;
}

.nav__logo {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    text-decoration: none;
}

/* The Bro Coach logo is a wide wordmark (1854x375, ~4.94:1), not MULC's squarer
   lockup. MULC's 90px would render it 445px wide and crowd the nav, so it runs
   shorter here: 52px tall => ~257px wide. If you swap the logo file, recheck
   this against the new aspect ratio. */
.nav__logo img {
    height: 52px;
    width: auto;
}

.nav__logo span {
    color: var(--color-primary);
}

.nav__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    list-style: none;
}

.nav__links > li {
    display: flex;
    align-items: center;
}

.nav__link {
    display: flex;
    align-items: center;
    color: var(--color-text-secondary);
    font-family: var(--font-nav);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.nav__link:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.nav__link--active {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.nav__cta {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
    white-space: nowrap;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: navCtaGlow 2s infinite;
}

.nav__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(207, 92, 90, 0.4);
    animation: none;
}

@keyframes navCtaGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(207, 92, 90, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(207, 92, 90, 0); }
}

.nav__cta span {
    display: inline;
}

/* Desktop shows "Schedule Free Session", mobile shows "FREE SESSION" stacked */
.nav__cta-desktop {
    display: inline;
}

.nav__cta-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .nav__cta-mobile {
        display: flex !important;
        flex-direction: column;
        line-height: 1.1;
    }
}

.nav__cta span:first-child::after {
    content: ' ';
}

/* Nav dropdown menus */
.nav__item {
    position: relative;
}

.nav__link--dropdown {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.nav__link--dropdown::after {
    content: '';
    border: solid var(--color-text-secondary);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.nav__item:hover .nav__link--dropdown::after {
    border-color: var(--color-text-primary);
}

.nav__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    min-width: 220px;
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: calc(var(--z-sticky) + 10);
}

.nav__item:hover .nav__dropdown {
    opacity: 1;
    visibility: visible;
}

.nav__dropdown-link {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
    font-family: var(--font-nav);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.nav__dropdown-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
}

/* Mobile nav toggle */
.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    transition: all var(--transition-fast);
}

/* Gold gradient divider bar between nav and body - hidden by default */
.nav-divider {
    display: none;
}

/* -----------------------------------------------------------------------------
   COMPONENT: FOOTER
   ----------------------------------------------------------------------------- */
.footer {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    padding: var(--space-16) 0 var(--space-8);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.footer__brand {
    max-width: 300px;
}

.footer__logo {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-4);
}

.footer__logo span {
    color: var(--color-primary);
}

.footer__tagline {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 400 !important;
}

.footer__heading {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-5);
    color: var(--color-text-primary);
}

.footer__links {
    list-style: none;
}

.footer__links li {
    margin-bottom: var(--space-3);
}

.footer__links a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 400 !important;
    transition: color var(--transition-fast);
}

.footer__links a:hover {
    color: var(--color-text-primary);
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.footer__copyright {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 400 !important;
}

.footer__legal {
    display: flex;
    gap: var(--space-6);
}

.footer__legal a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 400;
}

.footer__socials {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.footer__social-link svg {
    width: 18px;
    height: 18px;
    fill: var(--color-text-muted);
    transition: fill 0.2s ease;
}

.footer__social-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.footer__social-link:hover svg {
    fill: #1a1a1a;
}

/* -----------------------------------------------------------------------------
   COMPONENT: ANNOUNCEMENT BAR
   ----------------------------------------------------------------------------- */
.announcement-bar {
    background: linear-gradient(90deg, #1a1a1a 0%, #252525 50%, #1a1a1a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px var(--space-4);
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-sticky) + 1);
}

.announcement-bar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.announcement-bar__socials {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.announcement-bar__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.announcement-bar__social-link:hover {
    color: var(--color-text-primary);
}

.announcement-bar__social-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.announcement-bar__social-link:hover svg {
    opacity: 1;
}

@media (max-width: 768px) {
    .announcement-bar__social-link {
        width: 20px;
        height: 20px;
    }

    .announcement-bar__social-link svg {
        width: 20px;
        height: 20px;
    }
}

/* Global fix: prevent content from hiding behind fixed nav + announcement bar.
   Total fixed header height: ~130px (36px announcement + ~94px nav).
   Apply min padding-top to the first content element after the nav placeholder.
   Uses :where() for zero specificity so page-level styles can override. */
:where(#header-placeholder + main),
:where(#header-placeholder + section),
:where(#header-placeholder + div:not(#page-header-placeholder)) {
    padding-top: 180px;
}

/* Adjust nav position when announcement bar is present */
body:has(.announcement-bar) .nav {
    top: 34px;
}

@media (max-width: 768px) {
    body:has(.announcement-bar) .nav {
        top: 32px;
    }
}

/* -----------------------------------------------------------------------------
   COMPONENT: FLOATING BADGE
   ----------------------------------------------------------------------------- */
.floating-badge {
    position: fixed;
    bottom: var(--space-6);
    left: var(--space-6);
    z-index: var(--z-sticky);
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.floating-badge:hover {
    transform: scale(1.05);
}

.floating-badge img {
    width: 188px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

@media (max-width: 768px) {
    .floating-badge {
        bottom: var(--space-4);
        left: var(--space-4);
    }

    .floating-badge img {
        width: 131px;
    }
}

/* -----------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        text-align: center;
    }

    .footer__brand {
        grid-column: 1 / -1;
        margin: 0 auto var(--space-4);
    }

    .footer__column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer__links {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    .footer__legal {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: var(--container-padding-mobile);
    }

    .section {
        padding: var(--space-16) 0;
    }

    .grid-cols-2,
    .grid-cols-3 {
        grid-template-columns: 1fr;
    }

    .trust-badges {
        flex-direction: column;
        gap: var(--space-3);
        align-items: center;
    }

    .trust-indicators {
        gap: var(--space-4);
    }

    /* =============================================
       MOBILE NAVIGATION
       HTML order: logo, toggle, links, cta
       Visual order: toggle (left), logo (center), cta (right)
       ============================================= */

    .nav__inner {
        display: grid;
        grid-template-areas: "toggle logo cta";
        grid-template-columns: 60px 1fr 60px;
        align-items: center;
        padding: var(--space-2) 0;
        min-height: 76px;
    }

    /* Hamburger - LEFT */
    .nav__toggle {
        grid-area: toggle;
        display: flex;
        justify-self: start;
        width: 44px;
        height: 44px;
    }

    .nav__toggle span,
    .nav__toggle span::before,
    .nav__toggle span::after {
        height: 3px;
    }

    /* Logo - CENTER */
    .nav__logo {
        grid-area: logo;
        justify-self: center;
    }

    .nav__logo img {
        height: 38px !important;   /* ~188px wide at the wordmark's 4.94:1 */
        max-height: 38px !important;
    }

    /* Book Now - RIGHT */
    .nav__cta {
        grid-area: cta;
        justify-self: end;
        padding: 10px 12px !important;
        font-size: 0.65rem !important;
        line-height: 1.2;
        text-align: center;
        display: flex !important;
        flex-direction: column;
        white-space: normal;
        font-weight: 700;
        letter-spacing: 0.05em;
    }

    .nav__cta span {
        display: block;
    }

    .nav__cta span:first-child::after {
        content: none;
    }

    /* Mobile: hide "Schedule Free Session" - mobile text handled above */
    .nav__cta-desktop {
        display: none !important;
    }

    /* Hidden nav links (mobile dropdown) */
    .nav__links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--color-bg-secondary);
        padding: var(--space-6);
        gap: var(--space-4);
        border-bottom: 1px solid var(--color-border);
        z-index: 9999;
        pointer-events: auto;
        /* Scroll the menu itself when its contents run past the fold.
           The nav stack above is ~140px (36px announcement bar + ~100px
           fixed nav). Cap height to the remaining viewport and scroll
           internally; overscroll-behavior: contain stops the swipe from
           chaining through to the page body behind the open menu. */
        max-height: calc(100vh - 140px);
        max-height: calc(100dvh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .nav__links > li:last-child {
        position: static;
    }

    /* Make nav items stack vertically so dropdowns push content down */
    .nav__links > li {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .nav__item {
        width: 100%;
    }

    .nav__links > li > .nav__link,
    .nav__links .nav__link {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }

    .nav__links--open {
        display: flex;
        pointer-events: auto;
    }

    .nav__links a {
        pointer-events: auto;
    }

    /* Hide floating badge on mobile */
    .floating-badge {
        display: none;
    }

    /* Mobile dropdowns */
    .nav__dropdown {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: var(--color-bg-tertiary);
        border: none;
        border-radius: var(--radius-sm);
        min-width: 100%;
        margin-top: var(--space-2);
        box-shadow: none;
        display: none;
        pointer-events: auto;
    }

    .nav__item--open .nav__dropdown {
        display: block;
    }

    .nav__dropdown-link {
        padding: var(--space-4) var(--space-5);
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
        pointer-events: auto;
        position: relative;
        z-index: 1000;
    }

    .nav__link--dropdown {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    }

    .nav__link--dropdown::after {
        margin-left: auto;
    }

    .footer {
        padding: var(--space-10) 0 var(--space-6);
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        text-align: center;
        margin-bottom: var(--space-6);
    }

    .footer__brand {
        margin: 0 auto;
    }

    /* Hide Company and Resources columns on mobile - accessible via nav */
    .footer__column:not(:last-child) {
        display: none;
    }

    /* Keep Connect/social column visible and centered */
    .footer__column:last-child {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer__column:last-child .footer__heading {
        display: none;
    }

    .footer__socials {
        justify-content: center;
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    .footer__legal {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .btn--lg {
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-sm);
    }
}

/* -----------------------------------------------------------------------------
   ACCESSIBILITY - Skip Link & Focus Styles
   ----------------------------------------------------------------------------- */

/* Skip Link - Hidden until focused (screen reader accessible) */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    font-weight: var(--font-semibold);
    z-index: 10000;
}

.skip-link:focus {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    padding: var(--space-3) var(--space-6);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border-radius: var(--radius-md);
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Focus-Visible Styles - Keyboard Focus Only */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove default focus outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Button focus styling */
.btn:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--color-primary-alpha-40);
}

/* Nav link focus */
.nav__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}