/*
Theme Name: Devin Alexander
Theme URI: https://devinalexander.com
Author: Devin Alexander, Inc.
Description: Custom theme for devinalexander.com, ported from the locked static HTML design (Brand Relaunch, July 2026).
Version: 0.1.0
Text Domain: devin-alexander
*/

    /* ============================================================
       DEVIN ALEXANDER — Homepage v3
       Fonts: Gothic I (logo only) · Playfair Display (headlines) · Inter (body/nav/labels)
       Brand: Red #cc092f · Blue #4392de · White #ffffff
       NO GRAY BACKGROUNDS. NO MUTED TONES. THIN LINES ONLY.
    ============================================================ */
    @font-face {
      font-family: 'Gothic I';
      src: url('Devin Brand Fonts/GOTHICI.TTF') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --red:     #cc092f;
      --red-dk:  #a8061f;
      --blue:    #4392de;
      --blue-dk: #2d73b8;
      --white:   #ffffff;
      --body:    #1d2d44;
      --border:  rgba(67,146,222,0.13);
      --rule:    rgba(204,9,47,0.12);
      --navy:    #0d1b2e;
    }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--white);
      color: var(--body);
      -webkit-font-smoothing: antialiased;
    }

    /* ── UTILITIES ─────────────────────────────────────────────── */
    .eyebrow {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 12px; font-weight: 600;
      letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--blue); margin-bottom: 16px;
    }
    .red-rule { width: 44px; height: 2px; background: var(--red); margin: 20px 0 28px; }
    .red-rule.center { margin: 20px auto 28px; }
    .section-divider {
      width: 100%; height: 1px;
      background: var(--border);
      border: none; margin: 0;
    }
    .btn-red {
      display: inline-block; padding: 12px 30px;
      background: var(--red); color: var(--white);
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
      text-transform: uppercase; text-decoration: none;
      border: 2px solid var(--red); transition: all 0.25s;
      white-space: nowrap;
    }
    .btn-red:hover { background: var(--red-dk); border-color: var(--red-dk); }
    .btn-outline {
      display: inline-block; padding: 11px 26px;
      background: transparent; color: var(--body);
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 600; letter-spacing: 2px;
      text-transform: uppercase; text-decoration: none;
      border: 1.5px solid rgba(29,45,68,0.22); transition: all 0.25s;
      white-space: nowrap;
    }
    .btn-outline:hover { border-color: var(--red); color: var(--red); }
    .arrow-link {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: var(--blue);
      text-decoration: none; display: inline-flex;
      align-items: center; gap: 10px; transition: gap 0.2s;
    }
    .arrow-link::after { content: '→'; }
    .arrow-link:hover { gap: 16px; color: var(--red); }

    /* ── NAV ─────────────────────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 300;
      height: 86px; background: rgba(255,255,255,0.97);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center;
      justify-content: space-between; padding: 0 52px;
    }
    .nav-logo { display: flex; flex-direction: column; align-items: center; text-decoration: none; gap: 5px; }
    .nav-logo img { height: 62px; width: auto; display: block; }
    .nav-logo-tagline {
      font-family: 'Inter', sans-serif;
      font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
      text-transform: uppercase; color: #ffffff;
      background: var(--blue);
      padding: 4px 12px;
      white-space: nowrap;
      display: inline-block;
    }
    .nav-links {
      display: flex; align-items: center; gap: 28px; list-style: none;
    }
    .nav-links a {
      font-family: 'Inter', sans-serif;
      font-size: 11px; font-weight: 600; letter-spacing: 1.8px;
      text-transform: uppercase; color: var(--red);
      text-decoration: none; transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--body); }
    .nav-right { display: flex; align-items: center; gap: 18px; }
    .nav-social { display: flex; align-items: center; gap: 10px; }
    .nav-social a {
      color: var(--body); opacity: 0.4; transition: opacity 0.2s, color 0.2s;
      display: flex; align-items: center;
    }
    .nav-social a:hover { opacity: 1; color: var(--red); }
    .nav-cta {
      background: var(--red); color: var(--white) !important;
      padding: 10px 22px;
      font-family: 'Inter', sans-serif;
      font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.8px;
      text-transform: uppercase; text-decoration: none;
      transition: background 0.2s; white-space: nowrap;
    }
    .nav-cta:hover { background: var(--red-dk) !important; }
    .nav-links-mobile-cta { display: none; }
    .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 24px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; }
    .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--red); transition: transform 0.25s, opacity 0.25s; }
    nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
    nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── 1. HERO ─────────────────────────────────────────────── */
    .hero {
      min-height: 60vh; padding-top: 86px;
      display: grid; grid-template-columns: 48% 52%;
      background: var(--white);
    }
    .hero-left {
      padding: 28px 80px 28px 52px;
      display: flex; flex-direction: column; justify-content: center;
      order: 2;
    }
    .hero-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 600; letter-spacing: 3px;
      text-transform: uppercase; color: var(--blue);
      display: flex; align-items: center; gap: 14px; margin-bottom: 30px;
    }
    .hero-eyebrow::before {
      content: ''; width: 30px; height: 1.5px; background: var(--blue);
    }
    .hero-h1 {
      font-family: 'Gothic I', 'Playfair Display', serif;
      font-size: clamp(50px, 5.8vw, 84px);
      font-weight: normal; line-height: 1.0;
      color: var(--red); margin-bottom: 6px;
    }
    .hero-h1-sub {
      font-family: 'Playfair Display', serif;
      font-size: clamp(22px, 2.4vw, 36px);
      font-weight: 400; font-style: italic;
      line-height: 1.35; color: var(--blue);
      display: block; margin-bottom: 10px;
      letter-spacing: 0.5px;
    }
    .hero-definition {
      font-family: 'Inter', sans-serif;
      font-size: 12px; font-style: italic; font-weight: 400;
      color: var(--blue); opacity: 0.75;
      margin-bottom: 24px; letter-spacing: 0.2px;
    }
    .hero-bio {
      font-family: 'Inter', sans-serif;
      font-size: 16px; font-weight: 400; line-height: 1.8;
      color: var(--body); max-width: 480px; margin-bottom: 28px;
    }
    .hero-bio strong { font-weight: 700; color: var(--red); }
    .hero-stat-row {
      display: flex; gap: 36px; margin-bottom: 32px; padding: 18px 0;
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .hero-stat-num {
      font-family: 'Playfair Display', serif;
      font-size: 28px; font-weight: 700; color: var(--red);
      line-height: 1;
    }
    .hero-stat-label {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 600; letter-spacing: 2px;
      text-transform: uppercase; color: var(--blue); margin-top: 6px;
    }
    .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
    .hero-right {
      position: relative; background: var(--white);
      overflow: hidden; order: 1;
    }
    .hero-right img {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center 12%;
      display: block;
    }

    /* ── PATH BUTTONS ────────────────────────────────────────── */
    .path-compact {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 10px 52px;
      display: flex; align-items: center; justify-content: center;
      gap: 10px; flex-wrap: wrap;
    }
    .path-btn {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
      text-transform: uppercase; text-decoration: none;
      padding: 9px 20px;
      border: 1.5px solid var(--blue); color: var(--blue);
      transition: all 0.2s; white-space: nowrap;
    }
    .path-btn:hover { background: var(--blue); color: var(--white); }
    .path-btn.path-red { border-color: var(--red); color: var(--red); }
    .path-btn.path-red:hover { background: var(--red); color: var(--white); }
    /* ── SPEAKING ONE-SHEET ───────────────────────────────────── */
    .industry-tag {
      font-family: 'Inter', sans-serif;
      font-size: 9px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: var(--blue);
      border: 1px solid var(--border); padding: 6px 14px;
    }
    .format-block {
      display: flex; justify-content: center; gap: 0;
      border: 1px solid var(--border); margin-bottom: 44px;
      max-width: 540px; margin-left: auto; margin-right: auto;
    }
    .format-item {
      flex: 1; text-align: center; padding: 18px 16px;
      border-right: 1px solid var(--border);
    }
    .format-item:last-child { border-right: none; }
    .format-icon { font-size: 18px; margin-bottom: 6px; }
    .format-title {
      font-family: 'Playfair Display', serif;
      font-size: 13px; font-weight: 700; color: var(--red); margin-bottom: 2px;
    }
    .format-desc {
      font-family: 'Inter', sans-serif;
      font-size: 9px; font-weight: 600; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--blue); opacity: 0.6;
    }
    .client-logos-row {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 16px 28px; margin-bottom: 44px;
    }
    .client-logo-item {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: var(--body); opacity: 0.28;
      transition: opacity 0.2s;
    }
    .client-logo-item:hover { opacity: 0.6; }

    /* ── 2. MEDIA BAR ─────────────────────────────────────────── */
    .media-bar {
      background: var(--red);
      padding: 20px 0; overflow: hidden; min-height: 60px;
    }
    .media-bar-label {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: var(--white); opacity: 0.85;
      text-align: center; margin-bottom: 16px;
    }
    .scroll-track {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    }
    .scroll-inner {
      display: flex; gap: 18px; align-items: center;
      width: max-content;
      animation: scroll-logos 45s linear infinite; white-space: nowrap;
    }
    .scroll-inner:hover { animation-play-state: paused; }
    @keyframes scroll-logos {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .logo-item {
      height: 40px; padding: 0 14px;
      display: flex; align-items: center; justify-content: center;
      opacity: 0.78; transition: opacity 0.3s, transform 0.3s;
      flex-shrink: 0;
    }
    .logo-item:hover { opacity: 1; transform: translateY(-2px); }
    .logo-img {
      height: 26px; width: auto; max-width: 120px;
      object-fit: contain; display: block; filter: brightness(0) invert(1);
    }

    /* ── AWARDS TICKER ────────────────────────────────────────── */
    .awards-ticker-wrap {
      background: var(--red); padding: 16px 0; overflow: hidden;
    }
    .awards-ticker-track {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    }
    .awards-ticker-inner {
      display: flex; align-items: center; gap: 28px; white-space: nowrap;
      width: max-content;
      animation: scroll-ticker 55s linear infinite;
    }
    .awards-ticker-inner:hover { animation-play-state: paused; }
    @keyframes scroll-ticker {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .ticker-item {
      font-family: 'Inter', sans-serif;
      font-size: 15px; letter-spacing: 0.3px; color: rgba(255,255,255,0.85);
      font-weight: 400; white-space: nowrap;
    }
    .ticker-bold { font-weight: 700; color: #fff; }
    .ticker-dot { color: rgba(255,255,255,0.35); font-size: 7px; flex-shrink: 0; }

    /* ── 3. MIRROR SECTION ────────────────────────────────────── */
    .mirror-outer {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 64px 0 32px;
    }
    .mirror-inner {
      max-width: 1400px; margin: 0 auto;
      padding: 0 80px;
      display: grid; grid-template-columns: 1fr 44%; gap: 72px;
      align-items: center;
    }
    .mirror-photo {
      position: relative; overflow: hidden;
      aspect-ratio: 4/5; background: #e8eef5;
      max-height: 560px;
    }
    .mirror-photo img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: top center;
      display: block;
    }

    /* ── OFFERS GRID ──────────────────────────────────────────── */
    /* ── PATH TILES (inside Mirror section) ──────────────────── */
    .mirror-paths-wrap {
      max-width: 1400px; margin: 32px auto 0;
      padding: 0 80px;
    }
    .mirror-paths {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 18px; background: transparent;
    }
    .path-tile {
      background: var(--white);
      padding: 28px 22px 24px;
      display: flex; flex-direction: column;
      text-decoration: none;
      border: 2px solid var(--red);
      transition: background 0.2s, border-color 0.2s;
    }
    .path-tile:hover { background: #ffffff; border-color: var(--red-dk); }
    .path-tile-label {
      font-family: 'Inter', sans-serif;
      font-size: 12px; font-weight: 700; letter-spacing: 1.8px;
      text-transform: uppercase; color: var(--blue);
      margin-bottom: 10px;
    }
    .path-tile-sub {
      font-family: 'Inter', sans-serif;
      font-size: 7.5px; font-weight: 500; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--body); opacity: 0.38;
      margin-top: -6px; margin-bottom: 10px;
    }
    .path-tile-title {
      font-family: 'Playfair Display', serif;
      font-size: 16px; font-weight: 700; color: var(--red);
      line-height: 1.4; flex: 1; margin-bottom: 18px;
    }
    .path-tile-cta {
      display: inline-block;
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--white);
      background: var(--red);
      padding: 10px 18px;
      align-self: flex-start;
      transition: background 0.2s;
    }
    .path-tile:hover .path-tile-cta { background: var(--red-dk); }
    .mirror-headline {
      font-family: 'Playfair Display', serif;
      font-size: clamp(32px, 3.2vw, 50px); font-weight: 700;
      color: var(--red); line-height: 1.2; margin-bottom: 28px;
    }
    .mirror-headline em { font-style: italic; color: var(--blue); }
    .mirror-body {
      font-family: 'Inter', sans-serif;
      font-size: 16px; line-height: 1.9; font-weight: 400; color: var(--body);
      margin-bottom: 28px;
    }
    .mirror-body strong { font-weight: 700; color: var(--red); }
    .mirror-identities {
      display: flex; flex-direction: column; gap: 14px;
      margin-bottom: 32px;
    }
    .mirror-identity {
      font-family: 'Inter', sans-serif;
      font-size: 13px; font-weight: 500; color: var(--body);
      display: flex; align-items: flex-start; gap: 12px;
      line-height: 1.55;
    }
    .mirror-identity::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: var(--red); flex-shrink: 0; margin-top: 7px;
    }
    .mirror-photo-col {
      position: relative;
    }
    .mirror-photo-pair {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .mirror-photo-item {
      position: relative; overflow: hidden;
      aspect-ratio: 3/4;
      background: #e8eef5;
      border: 1px solid var(--border);
    }
    .mirror-photo-item img {
      width: 100%; height: 100%; object-fit: cover;
      display: block;
    }
    .mirror-photo-label {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 8px 12px; text-align: center;
    }
    .mirror-photo-label span {
      font-family: 'Inter', sans-serif;
      font-size: 9px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: white;
    }

    /* ── 4. CELEBRITY STRIP ───────────────────────────────────── */
    .celeb-strip {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 44px 0;
    }
    .celeb-strip-header {
      text-align: center; margin-bottom: 36px; padding: 0 52px;
    }
    .celeb-strip-label {
      font-family: 'Playfair Display', serif;
      font-size: 22px; font-weight: 700; letter-spacing: 0.3px;
      color: var(--red); opacity: 1;
      display: block; margin-bottom: 6px;
    }
    .celeb-scroll-track {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    }
    .celeb-scroll-inner {
      display: flex; gap: 20px; align-items: flex-start;
      width: max-content;
      animation: scroll-logos 20s linear infinite;
      white-space: nowrap; padding: 0 20px;
    }
    .celeb-scroll-inner:hover { animation-play-state: paused; }
    .celeb-item {
      display: inline-flex; flex-direction: column;
      align-items: center; gap: 10px; flex-shrink: 0;
    }
    .celeb-photo {
      width: 160px; height: 200px;
      border: 1px solid var(--border);
      overflow: hidden; position: relative;
      background: #f0f4f8;
    }
    .celeb-photo img {
      width: 100%; height: 100%; object-fit: cover;
      object-position: top center;
      display: block; filter: grayscale(0.1);
      transition: filter 0.3s, transform 0.3s;
    }
    .celeb-item:hover .celeb-photo img { filter: grayscale(0); transform: scale(1.04); }
    .celeb-name {
      font-family: 'Inter', sans-serif;
      font-size: 9px; font-weight: 600; letter-spacing: 2px;
      text-transform: uppercase; color: var(--blue); opacity: 0.65;
      text-align: center; white-space: normal; max-width: 160px;
    }

    /* ── 5. SPEAKING TEASER ───────────────────────────────────── */
    .speaking-outer {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 40px 80px;
    }
    .speaking-inner {
      max-width: 1100px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
      align-items: center;
    }
    .speaking-h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(30px, 3.2vw, 50px); font-weight: 700;
      color: var(--red); line-height: 1.1; margin-bottom: 20px;
    }
    .speaking-h2 em { font-style: italic; color: var(--red); }
    .speaking-sub {
      font-family: 'Inter', sans-serif;
      font-size: 16px; font-weight: 400; color: var(--body);
      line-height: 1.8; margin-bottom: 28px; max-width: 440px;
    }
    .speaking-stats {
      display: flex; gap: 40px; margin-bottom: 32px; padding: 20px 0;
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .speaking-stat-num {
      font-family: 'Playfair Display', serif;
      font-size: 38px; font-weight: 700; color: var(--red); line-height: 1;
    }
    .speaking-stat-label {
      font-family: 'Inter', sans-serif;
      font-size: 9px; font-weight: 600; letter-spacing: 2px;
      text-transform: uppercase; color: var(--blue); opacity: 0.7; margin-top: 4px;
    }
    .speaking-talks {
      display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px;
    }
    .speaking-talk {
      font-family: 'Inter', sans-serif;
      font-size: 12px; font-weight: 600; color: var(--body);
      display: flex; align-items: center; gap: 10px;
      letter-spacing: 0.3px;
    }
    .speaking-talk::before {
      content: ''; width: 20px; height: 1.5px; background: var(--red);
      flex-shrink: 0;
    }
    .speaking-photo {
      aspect-ratio: 3/4;
      background: #edf1f7;
      border: 1px solid var(--border);
      position: relative;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      overflow: hidden;
    }
    .speaking-photo img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .speaking-photo-ph {
      text-align: center; padding: 32px;
    }
    .speaking-photo-ph-icon { font-size: 40px; opacity: 0.15; margin-bottom: 16px; }
    .speaking-photo-ph-text {
      font-family: 'Inter', sans-serif;
      font-size: 9px; font-weight: 600; letter-spacing: 2px;
      text-transform: uppercase; color: var(--blue); opacity: 0.4;
    }
    .speaking-testimonial {
      margin-top: 28px; padding: 24px 28px;
      border-left: 3px solid var(--red);
      background: var(--white);
    }
    .speaking-testimonial-text {
      font-family: 'Playfair Display', serif;
      font-size: 14px; font-style: italic; font-weight: 400;
      color: var(--body); line-height: 1.7; margin-bottom: 12px;
    }
    .speaking-testimonial-source {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--blue);
    }

    /* ── 6. BOOKS SECTION ─────────────────────────────────────── */
    .books-outer {
      position: relative;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 44px 80px;
    }
    .books-header {
      text-align: center; max-width: 680px; margin: 0 auto 20px;
    }
    .books-h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(36px, 3.8vw, 54px); font-weight: 700;
      color: var(--red); line-height: 1.1; margin-bottom: 10px;
    }
    .books-sub {
      font-family: 'Inter', sans-serif;
      font-size: 15px; font-weight: 400; color: var(--body); line-height: 1.7;
    }
    .books-shop-link { text-align: center; margin-bottom: 20px; }

    /* Fan Carousel */
    .carousel-container {
      position: relative; width: 100%; max-width: 1000px;
      margin: 0 auto; height: 420px;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .carousel-viewport {
      position: relative; width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
    }
    .book-slide {
      position: absolute;
      width: 200px; height: 300px;
      transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      cursor: pointer;
      overflow: visible;
      background: transparent;
    }
    .book-slide img {
      width: 100%; height: 100%;
      object-fit: contain;
      display: block;
      transition: filter 0.45s;
    }
    .book-cover-ph {
      width: 100%; height: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 20px 16px; text-align: center;
    }
    .book-cover-ph-title {
      font-family: 'Playfair Display', serif;
      font-size: 14px; font-weight: 700;
      color: white; line-height: 1.3;
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .book-slide.pos-center {
      transform: translateX(0) scale(1) rotate(0deg); z-index: 10;
    }
    .book-slide.pos-center img { filter: drop-shadow(0 24px 48px rgba(0,0,0,0.28)); }
    .book-slide.pos-left1 {
      transform: translateX(-200px) scale(0.82) rotate(-5deg); z-index: 7; opacity: 0.9;
    }
    .book-slide.pos-left2 {
      transform: translateX(-370px) scale(0.65) rotate(-10deg); z-index: 5; opacity: 0.75;
    }
    .book-slide.pos-left3 {
      transform: translateX(-500px) scale(0.52) rotate(-14deg); z-index: 3; opacity: 0.5;
    }
    .book-slide.pos-right1 {
      transform: translateX(200px) scale(0.82) rotate(5deg); z-index: 7; opacity: 0.9;
    }
    .book-slide.pos-right2 {
      transform: translateX(370px) scale(0.65) rotate(10deg); z-index: 5; opacity: 0.75;
    }
    .book-slide.pos-right3 {
      transform: translateX(500px) scale(0.52) rotate(14deg); z-index: 3; opacity: 0.5;
    }
    .book-slide.pos-hidden {
      transform: translateX(620px) scale(0.4) rotate(18deg); z-index: 1; opacity: 0; pointer-events: none;
    }
    .carousel-btn {
      position: absolute; top: 50%; z-index: 20;
      transform: translateY(-50%);
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--white); border: 1.5px solid var(--border);
      color: var(--body); font-size: 18px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08); transition: all 0.2s;
    }
    .carousel-btn:hover { border-color: var(--red); color: var(--red); }
    .carousel-prev { left: 0; }
    .carousel-next { right: 0; }
    .book-info {
      text-align: center; margin-top: 44px; min-height: 64px;
    }
    .book-info-title {
      font-family: 'Playfair Display', serif;
      font-size: 20px; font-weight: 700; color: var(--red);
      margin-bottom: 6px; transition: all 0.3s;
    }
    .book-info-pub {
      font-family: 'Inter', sans-serif;
      font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
      color: var(--blue); font-weight: 600; opacity: 0.7;
    }

    /* ── 7. MOMENTUM MAP CTA ──────────────────────────────────── */
    .vision-outer {
      background: var(--white);
      border-bottom: 1px solid var(--border);
    }
    .vision-inner {
      display: grid; grid-template-columns: 0.8fr 1.2fr;
      max-width: 1200px; margin: 0 auto;
      align-items: stretch;
      padding: 0 60px;
    }
    .vision-left {
      padding: 80px 60px;
      border-right: 1px solid var(--border);
      display: flex; flex-direction: column; justify-content: center;
    }
    .vision-left-h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(26px, 2.6vw, 38px); font-weight: 700;
      color: var(--red); line-height: 1.2; margin-bottom: 20px;
    }
    .vision-left-h2 em { font-style: italic; color: var(--blue); }
    .vision-body {
      font-family: 'Inter', sans-serif;
      font-size: 15px; font-weight: 400; color: var(--body);
      line-height: 1.85; margin-bottom: 28px;
    }
    .vision-bullets {
      display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px;
    }
    .vision-bullet {
      font-family: 'Inter', sans-serif;
      font-size: 13px; font-weight: 500; color: var(--body);
      display: flex; align-items: flex-start; gap: 10px; line-height: 1.5;
    }
    .vision-bullet::before {
      content: '✦'; color: var(--red); font-size: 9px; flex-shrink: 0; margin-top: 3px;
    }
    .vision-right {
      padding: 48px 44px;
      display: flex; flex-direction: column; justify-content: center;
      background: var(--blue-wash);
      border-radius: 10px;
      margin: 40px 0;
    }
    .vision-form-label {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 600; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--blue); opacity: 0.7; margin-bottom: 16px;
    }
    .vision-form-title {
      font-family: 'Playfair Display', serif;
      font-size: 30px; font-weight: 700; color: var(--red);
      line-height: 1.2; margin-bottom: 28px;
    }
    .vision-form { display: flex; flex-direction: column; gap: 12px; }
    .vision-form input {
      padding: 14px 18px; border: 1.5px solid var(--border);
      font-family: 'Inter', sans-serif; font-size: 14px;
      color: var(--body); outline: none; transition: border-color 0.2s;
      background: var(--white);
    }
    .vision-form input:focus { border-color: var(--red); }
    .vision-form input::placeholder { color: #99aabc; }
    .vision-form .btn-red {
      text-align: center; border: none; cursor: pointer; width: 100%;
      padding: 14px;
    }
    .vision-disclaimer {
      font-family: 'Inter', sans-serif;
      font-size: 10px; color: #99aabc; margin-top: 12px; line-height: 1.5;
    }

    /* ── FOOTER ───────────────────────────────────────────────── */
    footer {
      background: var(--red); padding: 64px 80px 40px;
    }
    .footer-top {
      display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 48px; margin-bottom: 48px;
    }
    .footer-logo img {
      height: 60px; width: auto; margin-bottom: 16px;
      opacity: 1;
    }
    .footer-tagline {
      font-family: 'Inter', sans-serif;
      font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
      color: rgba(255,255,255,0.4); margin-bottom: 24px;
    }
    .footer-social { display: flex; gap: 12px; }
    .footer-social a {
      color: rgba(255,255,255,0.4); transition: color 0.2s;
      display: flex; align-items: center;
    }
    .footer-social a:hover { color: var(--white); }
    .footer-col-title {
      font-family: 'Inter', sans-serif;
      font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
      text-transform: uppercase; color: rgba(255,255,255,0.35);
      margin-bottom: 18px;
    }
    .footer-links { display: flex; flex-direction: column; gap: 10px; }
    .footer-links a {
      font-family: 'Inter', sans-serif;
      font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.55);
      text-decoration: none; transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--white); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 28px; display: flex;
      justify-content: space-between; align-items: center;
    }
    .footer-copy {
      font-family: 'Inter', sans-serif;
      font-size: 11px; color: rgba(255,255,255,0.3); font-weight: 400;
    }
    .footer-bottom-links { display: flex; gap: 24px; }
    .footer-bottom-links a {
      font-family: 'Inter', sans-serif;
      font-size: 10px; color: rgba(255,255,255,0.3);
      text-decoration: none; letter-spacing: 1px; transition: color 0.2s;
    }
    .footer-bottom-links a:hover { color: rgba(255,255,255,0.65); }


    /* ── COURSE WAITLIST STRIP ─────────────────────────────────── */
    /* ── COURSE FEATURE SECTION ──────────────────────────── */
    .course-feature {
      display: grid; grid-template-columns: 55% 45%;
      min-height: 480px; overflow: hidden;
    }
    .course-feature-photo {
      position: relative; overflow: hidden;
    }
    .course-feature-photo img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center 20%;
      display: block;
    }
    .course-feature-content {
      background: var(--red);
      padding: 64px 56px;
      display: flex; flex-direction: column; justify-content: center;
    }
    .course-feature-eyebrow {
      font-family: 'Inter', sans-serif; font-size: 9px;
      font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
      color: rgba(255,255,255,0.6); margin-bottom: 16px;
    }
    .course-feature-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(26px,2.4vw,38px); font-weight: 700;
      color: var(--white); line-height: 1.15; margin-bottom: 20px;
    }
    .course-feature-sub {
      font-family: 'Inter', sans-serif; font-size: 14px;
      line-height: 1.75; color: rgba(255,255,255,0.85);
      margin-bottom: 32px;
    }
    .course-feature-cta {
      display: inline-block; padding: 14px 32px;
      background: var(--white); color: var(--red);
      font-family: 'Inter', sans-serif; font-size: 10px;
      font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
      text-decoration: none; align-self: flex-start;
      transition: background 0.2s;
    }
    .course-feature-cta:hover { background: rgba(255,255,255,0.88); }
    @media (max-width: 768px) {
      .course-feature { grid-template-columns: 1fr; }
      .course-feature-photo { min-height: 300px; }
      .course-feature-content { padding: 48px 28px; }
    }

    /* ── NEWSLETTER HERO ───────────────────────────────────────── */
    .newsletter-hero {
      display: grid; grid-template-columns: 0.75fr 1.25fr;
      min-height: 560px; background: var(--white);
      border-top: 1px solid var(--border);
    }
    .newsletter-hero-photo {
      overflow: hidden; position: relative;
    }
    .newsletter-hero-photo img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: top center;
      display: block;
    }
    .newsletter-hero-content {
      padding: 72px 64px; display: flex;
      flex-direction: column; justify-content: center;
      background: var(--white);
    }
    .newsletter-hero-eyebrow {
      font-family: 'Inter', sans-serif; font-size: 12px;
      font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--blue); margin-bottom: 18px;
    }
    .newsletter-hero-h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(28px,3vw,44px); font-weight: 700;
      color: var(--blue); line-height: 1.2; margin-bottom: 16px;
    }
    .newsletter-hero-h2 em { font-style: italic; color: var(--red); }
    .newsletter-hero-sub {
      font-family: 'Inter', sans-serif; font-size: 14px;
      line-height: 1.7; color: var(--body); opacity: 0.72;
      margin-bottom: 32px;
    }
    .newsletter-hero-form {
      display: flex; flex-direction: column; gap: 12px;
      max-width: 100%;
    }
    .newsletter-hero-form input {
      font-family: 'Inter', sans-serif; font-size: 13px;
      padding: 13px 16px; border: 1.5px solid var(--border);
      color: var(--body); background: var(--white); outline: none;
      transition: border-color 0.2s;
    }
    .newsletter-hero-form input:focus { border-color: var(--red); }
    .newsletter-hero-form input::placeholder { color: #99aabc; }
    .newsletter-hero-disclaimer {
      font-family: 'Inter', sans-serif; font-size: 10px;
      color: var(--body); opacity: 0.35; margin-top: 8px;
      font-style: italic;
    }
    /* ── ADA ─────────────────────────────────────────────────── */
    .skip-link {
      position: absolute; top: -100px; left: 16px; z-index: 9999;
      background: var(--red); color: var(--white);
      padding: 12px 24px; font-family: 'Inter', sans-serif;
      font-size: 14px; font-weight: 700;
      text-decoration: none; transition: top 0.2s;
    }
    .skip-link:focus { top: 0; }
    :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

    /* ── STICKY SOCIAL ───────────────────────────────────────── */
    .social-sidebar {
      position: fixed; left: 20px; top: 50%;
      transform: translateY(-50%); z-index: 200;
      display: flex; flex-direction: column; gap: 10px;
    }
    .social-sidebar a {
      width: 36px; height: 36px;
      background: var(--blue); border: 1px solid var(--blue);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--white); opacity: 0.7;
      transition: all 0.2s;
      text-decoration: none;
    }
    .social-sidebar a:hover {
      opacity: 1; background: var(--red); border-color: var(--red);
      transform: scale(1.1);
    }

    /* ── BOOK COVER COLORS (for text-only fallbacks) ─────────── */
    .bc-1 { background: linear-gradient(135deg, #cc092f 0%, #8b0620 100%); }
    .bc-2 { background: linear-gradient(135deg, #1a4a8a 0%, #0d2d5e 100%); }
    .bc-3 { background: linear-gradient(135deg, #2d5a1b 0%, #1a3a10 100%); }
    .bc-4 { background: linear-gradient(135deg, #8b4513 0%, #5c2d0a 100%); }
    .bc-5 { background: linear-gradient(135deg, #4a1a6e 0%, #2d0f44 100%); }
    .bc-6 { background: linear-gradient(135deg, #1a6e5a 0%, #0f4438 100%); }
    .bc-7 { background: linear-gradient(135deg, #8b1a1a 0%, #5c0f0f 100%); }
    .bc-8 { background: linear-gradient(135deg, #1a4a6e 0%, #0f2d44 100%); }
    .bc-9 { background: linear-gradient(135deg, #6e4a1a 0%, #44300f 100%); }
    .bc-10 { background: linear-gradient(135deg, #2d6e1a 0%, #1a440f 100%); }

    /* ══════════════════════════════════════════════════
       RESPONSIVE — MOBILE (≤ 768px)
    ══════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* Nav */
      nav[role="navigation"] { padding: 0 16px; height: 70px; }
      .nav-toggle { display: flex; }
      .nav-links {
        display: none;
        position: absolute; top: 70px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--white); border-bottom: 1px solid var(--border);
        box-shadow: 0 12px 24px rgba(0,0,0,0.10);
        padding: 8px 0; z-index: 500;
      }
      nav.nav-open .nav-links { display: flex; }
      .nav-links li { width: 100%; }
      .nav-links a { display: block; padding: 14px 24px; }
      .nav-links .nav-subnav { display: block; position: static; box-shadow: none; border: none; background: #f8fafd; min-width: 0; }
      .nav-links .nav-subnav li a { padding: 10px 24px 10px 36px; }
      .nav-right { display: none; }
      .nav-links-mobile-cta { display: block; margin-top: 8px; padding: 0 24px; }
      .nav-links-mobile-cta a { background: var(--red); color: var(--white); text-align: center; padding: 13px; }
      .nav-links-mobile-cta a:hover { background: var(--red-dk); }

          /* Hero */
          .hero { grid-template-columns: 1fr; padding-top: 70px; }
          .hero-left { order: 1; max-width: 100%; text-align: center; padding: 32px 24px; }
          .hero-right { order: 2; max-width: 100%; min-height: 320px; }
          .hero-stat-row, .hero-btns { justify-content: center; }

          /* Path tiles — 2×2 grid */
          .mirror-paths-wrap { padding: 0 20px; margin: 24px auto 0; }
          .mirror-paths { grid-template-columns: repeat(2, 1fr); gap: 12px; }
          .path-tile { padding: 20px 16px 18px; }
          .path-tile-title { font-size: 14px; }

          /* Mirror section */
          .mirror-inner { grid-template-columns: 1fr; padding: 48px 24px; gap: 32px; }

          /* Hide floating social rail on mobile (footer social covers it) */
          .social-sidebar { display: none; }

          /* Speaking section */
          .speaking-outer { padding: 48px 24px; }
          .speaking-inner { grid-template-columns: 1fr; gap: 32px; }
          .mq-aifit-grid { grid-template-columns: 1fr !important; }
          .mq-aifit-grid > div:first-child { min-height: 260px !important; }
          .mq-aifit-grid > div:last-child { padding: 28px 22px !important; }
          .mq-speakquotes-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
          .mq-pullquotes-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
          .mq-pullquotes-grid > div:nth-child(2) { display: none !important; }
          .mq-pullquotes-grid > div:first-child { padding: 0 0 24px 0 !important; border-bottom: 1px solid var(--border); }
          .mq-pullquotes-grid > div:last-child { padding: 0 !important; }

          /* Books */
          .books-outer { padding: 48px 20px; }

          /* Momentum Map */
          .vision-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px; }
    
          /* Newsletter hero */
          .newsletter-hero { grid-template-columns: 1fr; }
          .newsletter-hero-photo { height: 300px; }
          .newsletter-hero-content { padding: 48px 24px; }
          .newsletter-hero-form { max-width: 100%; }
    
          /* Footer */
          footer { padding: 48px 24px 32px; }
          .footer-top { grid-template-columns: 1fr; gap: 32px; }
          .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
          .footer-bottom-links { flex-wrap: wrap; justify-content: center; }
    }

    @media (max-width: 480px) {
      /* Path tiles — single column on very small phones */
      .mirror-paths { grid-template-columns: 1fr; }
    }


  
/* NAV DROPDOWN */
.nav-links > li { position:relative; }
.nav-subnav { display:none; position:absolute; top:calc(100% + 1px); left:0; background:var(--white); border:1px solid var(--border); min-width:170px; list-style:none; z-index:400; box-shadow:0 6px 20px rgba(67,146,222,0.10); }
.nav-subnav li a { display:block; padding:11px 16px; font-size:11px; font-weight:500; color:var(--body); white-space:nowrap; transition:color 0.2s; }
.nav-subnav li a:hover { color:var(--red); }
.nav-links > li:hover .nav-subnav { display:block; }