/* theflagexpert.com shared styles. Extracted from index.html Sep 9 2026 so the
   subpages inherit one design system instead of copying it four times. */

    /* Self-hosted so no visitor IP is handed to Google. Variable fonts:
       one file per family and style covers every weight the site uses. */
    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: italic;
      font-weight: 300 800;
      font-display: swap;
      src: url('/fonts/plus-jakarta-sans-italic-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: italic;
      font-weight: 300 800;
      font-display: swap;
      src: url('/fonts/plus-jakarta-sans-italic-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: normal;
      font-weight: 300 800;
      font-display: swap;
      src: url('/fonts/plus-jakarta-sans-normal-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: normal;
      font-weight: 300 800;
      font-display: swap;
      src: url('/fonts/plus-jakarta-sans-normal-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url('/fonts/inter-normal-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url('/fonts/inter-normal-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Caveat';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('/fonts/caveat-normal-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Caveat';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('/fonts/caveat-normal-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
  

    :root {
      --black:      #0B0B0B;
      --black-alt:  #111111;
      --black-surf: #1A1A1A;
      --cream:      #F5F3EE;
      --white:      #FFFFFF;
      --text-dark:  #1A1A1A;
      --text-mid:   rgba(26,26,26,0.62);
      --text-low:   rgba(26,26,26,0.62);
      --white-hi:   #FFFFFF;
      --white-mid:  rgba(246,246,244,0.72);
      --white-low:  rgba(246,246,244,0.52);
      --mint:       #3EE87C;
      --mint-hi:    #5AF094;
      --mint-glow:  rgba(62,232,124,0.14);
      --mint-ink:   #248748;   /* mint darkened to clear 4.5:1 on white and cream */
      --mint-dark:  #061009;
      --globe-bg:   #0B1F10;
      --display:    'Plus Jakarta Sans', sans-serif;
      --body:       'Inter', sans-serif;
      --hand:       'Caveat', cursive;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── FORM VALIDATION ── */
    .field-error {
      display: block; margin-top: 0.4rem;
      font-family: var(--display); font-size: 0.775rem; font-weight: 600; color: #C42B1C;
    }
    .form-group input[aria-invalid="true"],
    .form-group textarea[aria-invalid="true"] { border-color: #C42B1C; }
    .form-status { margin-top: 0.9rem; font-size: 0.85rem; font-weight: 600; color: #C42B1C; }
    .form-status:empty { margin-top: 0; }
    .form-privacy { margin-top: 0.9rem; font-size: 0.75rem; color: var(--text-low); }
    .form-privacy a { color: inherit; }

    /* ── SKIP LINK — visible only once it takes focus ── */
    .skip-link {
      position: absolute; left: 1rem; top: -100px; z-index: 500;
      background: var(--mint); color: var(--black);
      font-family: var(--display); font-size: 0.875rem; font-weight: 700;
      padding: 0.7rem 1.1rem; min-height: 44px; display: inline-flex; align-items: center;
      border-radius: 6px; text-decoration: none;
      transition: top 0.15s ease;
    }
    .skip-link:focus { top: 1rem; outline: 3px solid var(--black); outline-offset: 2px; }

    [hidden] { display: none !important; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--body); background: var(--white); color: var(--text-dark); overflow-x: hidden; }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 300;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.25rem 3.5rem;
      background: transparent;
      transition: background 0.4s, backdrop-filter 0.4s, padding 0.3s;
    }
    nav.scrolled { background: rgba(11,11,11,0.92); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.05); }
    .nav-logo { font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; color: var(--white-hi); text-decoration: none; }
    .nav-logo span { color: var(--mint); }
    .nav-links { display: flex; gap: 2rem; align-items: center; }
    .nav-links a { font-family: var(--display); font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; }
    .nav-links a:hover { color: var(--white-hi); }
    .nav-cta { background: var(--mint) !important; color: var(--black) !important; padding: 0.5rem 1.2rem; border-radius: 6px; font-weight: 700 !important; }
    .nav-cta:hover { background: var(--mint-hi) !important; }

    /* ── MOBILE NAV ── */
    .nav-toggle {
      display: none; width: 44px; height: 44px; padding: 0;
      background: none; border: 0; cursor: pointer; align-items: center; justify-content: center;
      margin-left: 0.5rem; border-radius: 8px;
    }
    .nav-toggle:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
    .nav-toggle-bars { display: block; width: 22px; height: 16px; position: relative; }
    .nav-toggle-bars span {
      position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
      background: var(--white-hi); transition: transform 0.28s ease, opacity 0.2s ease, top 0.28s ease;
    }
    .nav-toggle-bars span:nth-child(1) { top: 0; }
    .nav-toggle-bars span:nth-child(2) { top: 7px; }
    .nav-toggle-bars span:nth-child(3) { top: 14px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

    /* Full-bleed overlay rather than a dropdown: one screen, one decision. */
    .mobile-menu {
      display: none; position: fixed; inset: 0; z-index: 299;
      background: var(--black);
      padding: calc(60px + 1.5rem) 1.75rem 2rem;
      overflow-y: auto;
      flex-direction: column; justify-content: center;
    }
    .mobile-menu a {
      display: flex; align-items: center; min-height: 72px;
      font-family: var(--display); font-weight: 700;
      font-size: clamp(1.85rem, 8.6vw, 2.25rem); line-height: 1.1; letter-spacing: -0.028em;
      color: var(--white-hi); text-decoration: none;
      border-top: 1px solid rgba(255,255,255,0.13);
      opacity: 0; transform: translateY(14px);
    }
    .mobile-menu a:first-of-type { border-top: 0; }
    .mobile-menu a:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; border-radius: 4px; }
    .mobile-menu a:active { color: var(--mint); }
    /* Links stagger in behind the panel, top to bottom. */
    .mobile-menu[data-open="true"] a { animation: menuItemIn 0.42s cubic-bezier(0.22,0.8,0.3,1) forwards; }
    .mobile-menu[data-open="true"] a:nth-child(1) { animation-delay: 0.04s; }
    .mobile-menu[data-open="true"] a:nth-child(2) { animation-delay: 0.09s; }
    .mobile-menu[data-open="true"] a:nth-child(3) { animation-delay: 0.14s; }
    .mobile-menu[data-open="true"] a:nth-child(4) { animation-delay: 0.19s; }
    .mobile-menu[data-open="true"] a:nth-child(5) { animation-delay: 0.24s; }
    .mobile-menu[data-open="true"] a:nth-child(6) { animation-delay: 0.30s; }
    @keyframes menuItemIn { to { opacity: 1; transform: translateY(0); } }
    .mobile-menu-cta { color: var(--mint) !important; }
    .mobile-menu-foot {
      margin-top: 3rem; padding-top: 0;
      display: flex; gap: 1.25rem; flex-wrap: wrap;
      font-family: var(--body); font-size: 0.8125rem; color: var(--white-low);
      opacity: 0; animation: menuItemIn 0.4s ease 0.34s forwards;
    }
    .mobile-menu-foot a { font: inherit; color: inherit; padding: 0; min-height: 0; border-top: 0; letter-spacing: 0; opacity: 1; transform: none; animation: none; text-decoration: none; }
    .mobile-menu-foot a:hover { color: var(--white-hi); }
    body.menu-open { overflow: hidden; }
    @media (prefers-reduced-motion: reduce) {
      .mobile-menu a, .mobile-menu-foot { opacity: 1 !important; transform: none !important; animation: none !important; }
    }

    /* ── BUTTONS ── */
    .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.875rem 1.75rem; border-radius: 7px; font-family: var(--display); font-size: 0.9375rem; font-weight: 700; text-decoration: none; cursor: pointer; border: none; transition: transform 0.22s, background 0.22s, border-color 0.22s, box-shadow 0.22s; letter-spacing: -0.01em; }
    .btn-green { background: var(--mint); color: var(--black); }
    .btn-green:hover { background: var(--mint-hi); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(62,232,124,0.35); }
    .btn-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.22); }
    .btn-ghost:hover { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); }

    /* ── PRESS STATES — feedback on pointer-down (Apple HIG 7a) ── */
    .btn:active { transform: scale(0.97); transition: transform 100ms ease-out; }
    .pod-card:active, .yt-card:active, .talk-card:active, .press-card:active, .pub-row:active, .topic-row:active, .cred-card:active, .fi-tile-outer:active {
      transform: scale(0.985); transition: transform 100ms ease-out;
    }
    .nav-cta:active, .pod-link:active, .contact-link:active { transform: scale(0.97); transition: transform 100ms ease-out; }
    .faq-q:active { opacity: 0.7; transition: opacity 100ms ease-out; }

    /* ── FOCUS — keyboard navigation must be trackable (7c) ── */
    :focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; }
    .btn:focus-visible, .nav-cta:focus-visible { outline-offset: 4px; }
    .pod-card:focus-visible, .yt-card:focus-visible, .talk-card:focus-visible, .press-card:focus-visible { outline-offset: 2px; }

    /* ── TRANSPARENCY + CONTRAST FALLBACKS (7i) ── */
    @media (prefers-reduced-transparency: reduce) {
      nav.scrolled { background: var(--black); backdrop-filter: none; }
      .pod-role { background: var(--black); backdrop-filter: none; }
    }
    @media (prefers-contrast: more) {
      nav.scrolled { background: var(--black); border-bottom: 1px solid var(--mint); }
      .pod-role { background: var(--black); backdrop-filter: none; }
    }

    /* ── REDUCED MOTION (7b) ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      html { scroll-behavior: auto; }
      /* keep the opacity reveals, just land them instantly */
      .reveal { opacity: 1; transform: none; }
    }

    /* ── HERO ── */
    .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
    .hero-bg { position: absolute; inset: 0; background: url('/images/hero.jpg') 25% center / cover no-repeat; will-change: transform; }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(6,6,6,0.95) 0%, rgba(6,6,6,0.84) 25%, rgba(6,6,6,0.42) 65%, rgba(6,6,6,0.12) 100%); }
    /* ── DOT BAND — a slow dot plane receding to a horizon, used as a divider ── */
    /* Pulled up tight under the scroll hint; the plane starts just below it. */
    #watch { padding-bottom: 2.25rem; }
    .dot-band {
      position: relative; overflow: hidden;
      height: clamp(170px, 15vw, 230px);
      background: var(--white);
    }
    #dottedSurface {
      position: absolute; inset: 0; width: 100%; height: 100%; display: block;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 99%);
              mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 99%);
    }
    .hero-content { position: relative; z-index: 1; padding: 10rem 3.5rem 6rem; max-width: 660px; }

    .dict-entry { display: flex; align-items: baseline; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
    .dict-word { font-family: var(--display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; color: var(--mint); }
    .dict-sep { color: rgba(255,255,255,0.18); font-size: 0.72rem; }
    .dict-phon { font-size: 0.72rem; color: rgba(255,255,255,0.38); font-style: italic; }
    .dict-pos { font-size: 0.7rem; color: rgba(255,255,255,0.28); font-style: italic; }

    .hero-h1 { font-family: var(--display); font-weight: 800; font-size: clamp(3.2rem, 5.2vw, 5.5rem); line-height: 1.01; letter-spacing: -0.033em; color: var(--white-hi); margin-bottom: 1rem; }
    .hero-annotation {
      font-family: var(--hand); font-size: 0.58em; font-weight: 400;
      color: var(--mint); letter-spacing: 0.01em;
      display: block; margin-top: 0.2em; padding-left: 0.3em;
      opacity: 0.88; transform: rotate(-1.5deg); transform-origin: left;
    }
    /* On light sections the mint annotation needs a darker ink to clear 4.5:1. */
    .sec-white .hero-annotation,
    .sec-cream .hero-annotation { color: var(--mint-ink); opacity: 1; }
    .dict-defs { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.4rem; }
    .dict-defs li { font-size: 0.875rem; color: rgba(255,255,255,0.5); line-height: 1.62; padding-left: 1.4rem; position: relative; }
    .dict-defs li::before { content: attr(data-n) '.'; position: absolute; left: 0; color: var(--mint); font-weight: 700; font-size: 0.74rem; }
    .dict-defs li .dict-see { color: var(--mint); font-weight: 600; }
    .cta-row { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
    .scroll-cue { position: absolute; bottom: 2.25rem; left: 3.5rem; display: flex; align-items: center; gap: 0.6rem; }
    .scroll-cue-line { width: 36px; height: 1px; background: linear-gradient(to right, rgba(62,232,124,0.7), transparent); }
    .scroll-cue-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-low); }

    /* ── CRED STRIP ── */
    .cred-strip { background: var(--cream); border-bottom: 1px solid rgba(26,26,26,0.07); padding: 1.75rem 3.5rem; }
    .cred-label { text-align: center; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); font-family: var(--display); font-weight: 600; margin-bottom: 1.25rem; }
    .cred-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
    .cred-logo-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.6rem; border-right: 1px solid rgba(26,26,26,0.08); opacity: 0.6; transition: opacity 0.25s; }
    .cred-logo-item:last-child { border-right: none; }
    .cred-logo-item:hover { opacity: 1; }
    .cred-logo-img { height: 60px; width: auto; max-width: 100px; object-fit: contain; filter: grayscale(1) opacity(0.65); transition: filter 0.25s; }
    .cred-logo-item:hover .cred-logo-img { filter: none; }
    .cred-badge-row { display: flex; justify-content: center; align-items: center; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid rgba(26,26,26,0.07); }
    .cred-badge-row img { height: 48px; width: auto; opacity: 0.7; transition: opacity 0.25s; }
    .cred-badge-row img:hover { opacity: 1; }
    /* membership badges: shown in full color (earned marks, not understated press logos) */
    .cred-logos-members .cred-logo-item { opacity: 1; }
    .cred-logos-members .cred-logo-img { height: 68px; max-width: 130px; filter: none; opacity: 0.92; }
    .cred-logos-members .cred-logo-item:hover .cred-logo-img { opacity: 1; }
    .cred-logo-text { font-family: var(--display); font-weight: 800; font-size: 0.95rem; color: var(--black); white-space: nowrap; }
    .cred-ted { background: #E62B1E; color: #fff; padding: 0.18rem 0.5rem; border-radius: 3px; font-size: 0.95rem; font-weight: 800; }

    /* ── SECTION UTILS ── */
    .sec { padding: 8.5rem 3.5rem; }
    .sec-cream { background: var(--cream); }
    .sec-white { background: var(--white); }
    .sec-dark { background: var(--black); }
    .sec-dark-alt { background: var(--black-alt); }
    .sec-globe { background: var(--globe-bg); }
    .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); margin-bottom: 1.4rem; }
    .eyebrow::before { content: ''; width: 16px; height: 2px; background: var(--mint); border-radius: 2px; }
    .eyebrow-dark::before { background: var(--text-low); }
    .eyebrow-dark { color: var(--text-low); }
    .sec-h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.06; letter-spacing: -0.025em; margin-bottom: 2.75rem; }

    /* ── ABOUT ── */
    .about-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5.5rem; align-items: start; }
    .about-body p { font-size: 1.05rem; line-height: 1.8; color: var(--text-mid); margin-bottom: 1.25rem; }
    .about-body p strong { color: var(--text-dark); }
    .about-body p em { font-style: italic; }
    .about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; position: sticky; top: 8rem; }
    .about-photo-main { grid-column: 1 / -1; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 16px 48px rgba(0,0,0,0.1); }
    .about-photo-main img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
    .about-photo-sm { border-radius: 10px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
    .about-photo-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cred-cards { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; }
    .cred-card { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.1rem; border-radius: 9px; background: rgba(26,26,26,0.03); border: 1px solid rgba(26,26,26,0.07); transition: border-color 0.2s; }
    .cred-card:hover { border-color: rgba(62,232,124,0.4); }
    .cred-icon { width: 34px; height: 34px; border-radius: 7px; background: var(--mint); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; }
    .cred-main { font-family: var(--display); font-weight: 700; font-size: 0.83rem; color: var(--text-dark); }
    .cred-sub { font-size: 0.72rem; color: var(--text-low); margin-top: 0.1rem; }

    /* ── QUOTE — hero-style bottom treatment ── */
    /* Scroll-stopper: the section is tall, the panel inside it is sticky and
       exactly one viewport, so the quote holds the screen for roughly a screen
       and a half of scrolling. No wheel interception, so keyboard, screen
       readers and the browser's own scrolling are all untouched. */
    .quote-sec { position: relative; height: 240vh; }
    .quote-pin {
      position: sticky; top: 0; height: 100vh; overflow: hidden;
      display: flex; align-items: flex-end;
    }
    .quote-bg { position: absolute; inset: 0; background: url('/images/ted2.jpg') center 20% / cover no-repeat; }
    .quote-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,6,0.92) 0%, rgba(6,6,6,0.55) 30%, rgba(6,6,6,0.1) 100%); }
    .quote-content { position: relative; z-index: 1; max-width: 820px; text-align: left; padding: 4rem 3.5rem 5rem; }
    @media (prefers-reduced-motion: reduce) {
      /* No pin for anyone who has asked for less movement. */
      .quote-sec { height: auto; }
      .quote-pin { position: static; height: auto; min-height: 640px; }
    }
    .quote-content .eyebrow { color: rgba(62,232,124,0.75); }
    .quote-content .eyebrow::before { background: rgba(62,232,124,0.75); }
    .quote-text { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.5vw, 3.1rem); line-height: 1.12; letter-spacing: -0.022em; color: var(--white-hi); margin-bottom: 1.25rem; }
    .quote-text em { font-style: normal; color: var(--mint); }

    /* ── SCROLL FILL — words light up one at a time as the section passes ── */
    [data-scroll-fill] .sf-word {
      color: rgba(255,255,255,0.17);
      transition: color 0.28s ease;
    }
    [data-scroll-fill] .sf-word.lit { color: var(--white-hi); }
    [data-scroll-fill] em .sf-word { color: rgba(62,232,124,0.22); }
    [data-scroll-fill] em .sf-word.lit { color: var(--mint); }
    @media (prefers-reduced-motion: reduce) {
      [data-scroll-fill] .sf-word { color: var(--white-hi); transition: none; }
      [data-scroll-fill] em .sf-word { color: var(--mint); }
    }
    .quote-attr { font-size: 0.8rem; color: rgba(255,255,255,0.38); font-family: var(--display); font-weight: 500; letter-spacing: 0.04em; }

    /* ── FLAG PRINCIPLES ── */
    .flag-sec { background: var(--mint-dark); padding: 8.5rem 3.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; position: relative; overflow: hidden; }
    .flag-sec::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 50%, rgba(62,232,124,0.06), transparent 65%); }
    .flag-text-col { position: relative; z-index: 1; }
    .flag-sec-h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -0.025em; color: var(--white); margin-bottom: 0.5rem; }
    .flag-sec-sub { font-size: 0.875rem; color: var(--white-low); margin-bottom: 2rem; line-height: 1.5; }
    .principles { display: flex; flex-direction: column; gap: 0.9rem; }
    .principle { display: flex; gap: 1rem; align-items: flex-start; }
    .principle-num { font-family: var(--display); font-weight: 800; font-size: 0.7rem; color: var(--mint); background: rgba(62,232,124,0.1); border: 1px solid rgba(62,232,124,0.2); border-radius: 5px; padding: 0.22rem 0.5rem; flex-shrink: 0; margin-top: 0.1rem; letter-spacing: 0.04em; }
    .principle-body { }
    .principle-title { font-family: var(--display); font-weight: 700; font-size: 0.875rem; color: var(--white-hi); }
    .principle-desc { font-size: 0.775rem; color: var(--white-low); margin-top: 0.1rem; line-height: 1.5; }
    .flag-canvas-col { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
    .flag-rig { display: inline-flex; align-items: flex-start; }
    .flag-pole { width: 5px; height: 250px; background: linear-gradient(to bottom, #bbb, #333); border-radius: 3px; flex-shrink: 0; }

    /* ── 3D BOOK ── */
    .pub-layout { display: grid; grid-template-columns: 220px 1fr; gap: 4rem; align-items: start; margin-top: 2.75rem; }
    .pub-book-col { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; position: sticky; top: 8rem; }
    .book-3d {
      width: 190px; height: 250px; position: relative;
      transform-style: preserve-3d;
      transform: perspective(900px) rotateY(-22deg) rotateX(4deg);
      transition: transform 0.12s ease;
      cursor: pointer;
    }
    .book-cover {
      position: absolute; inset: 0;
      background: url('/images/book.jpg') center/cover;
      border-radius: 2px 6px 6px 2px;
      box-shadow: 8px 10px 36px rgba(0,0,0,0.55), inset -3px 0 10px rgba(0,0,0,0.2);
    }
    .book-spine {
      position: absolute; left: -20px; top: 0; width: 20px; height: 100%;
      background: linear-gradient(to right, #0d1a0e, #1a3a1e);
      transform-origin: right center; transform: rotateY(-90deg);
      border-radius: 2px 0 0 2px;
    }
    .book-pages {
      position: absolute; right: -4px; top: 2px; width: 6px; height: calc(100% - 4px);
      background: repeating-linear-gradient(to bottom, #e8e4d8 0px, #e8e4d8 1px, #ccc9b8 1px, #ccc9b8 2px);
      border-radius: 0 1px 1px 0;
    }
    .book-caption { font-family: var(--display); font-size: 0.74rem; font-weight: 600; color: var(--white-low); text-align: center; line-height: 1.5; }
    .pub-stack-col { display: flex; flex-direction: column; gap: 1.1rem; }

    /* ── TALKS — with particle canvas ── */
    .talks-sec { position: relative; overflow: hidden; padding: 8.5rem 3.5rem; background: var(--black); }
    .talks-sec-bg { position: absolute; inset: 0; background: url('/images/ted1.jpg') center/cover no-repeat; opacity: 0.07; filter: blur(2px); }
    .talks-sec-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--black) 0%, rgba(11,11,11,0.88) 50%, var(--black) 100%); }
    #particleCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
    .talks-sec-inner { position: relative; z-index: 1; }
    .talks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 3.5rem; }
    .talk-card { background: rgba(22,22,22,0.98); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.07); text-decoration: none; color: inherit; transition: transform 0.3s, border-color 0.3s; display: block; }
    .talk-card:hover { transform: translateY(-5px); border-color: rgba(62,232,124,0.3); }
    .talk-thumb { height: 170px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
    .talk-thumb-photo { position: absolute; inset: 0; }
    .talk-thumb-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.38; }
    .talk-play { width: 52px; height: 52px; border-radius: 50%; background: var(--mint); display: flex; align-items: center; justify-content: center; color: var(--black); font-size: 1.05rem; z-index: 1; transition: transform 0.2s, box-shadow 0.2s; }
    .talk-card:hover .talk-play { transform: scale(1.1); box-shadow: 0 0 28px rgba(62,232,124,0.45); }
    .talk-badge { position: absolute; top: 0.875rem; left: 0.875rem; z-index: 2; background: rgba(11,11,11,0.88); backdrop-filter: blur(8px); border-radius: 4px; padding: 0.2rem 0.5rem; font-family: var(--display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); }
    .talk-body { padding: 1.35rem; }
    .talk-title { font-family: var(--display); font-weight: 700; font-size: 0.9125rem; line-height: 1.3; color: var(--white-hi); margin-bottom: 0.5rem; }
    .talk-meta { font-size: 0.76rem; color: var(--white-mid); }
    .talk-meta strong { color: var(--mint); font-weight: 600; }

    /* ── PRESS ── */
    .press-lede { font-size: 1.05rem; line-height: 1.78; color: var(--text-mid); max-width: 540px; margin-bottom: 2.75rem; }
    .press-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .press-card { padding: 1.65rem 1.8rem; border-radius: 10px; border: 1px solid rgba(26,26,26,0.08); background: var(--white); text-decoration: none; display: flex; flex-direction: row; align-items: flex-start; gap: 1.1rem; transition: all 0.22s; }
    .press-card:hover { border-color: rgba(62,232,124,0.45); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,0.06); }
    .press-logo-col { width: 110px; flex-shrink: 0; display: flex; align-items: center; padding-top: 0.1rem; }
    .press-outlet-logo { height: 60px; width: auto; max-width: 90px; object-fit: contain; object-position: left; filter: grayscale(1) opacity(0.6); transition: filter 0.25s; }
    .press-card:hover .press-outlet-logo { filter: none; opacity: 1; }
    .press-text-col { flex: 1; min-width: 0; }
    .press-hed { font-size: 0.88rem; color: var(--text-mid); line-height: 1.48; font-style: italic; margin-bottom: 0.45rem; }
    .press-date { font-size: 0.7rem; color: var(--text-low); font-weight: 600; letter-spacing: 0.04em; }
    .press-more { text-align: center; margin-top: 1.75rem; }
    .press-more a { font-family: var(--display); font-size: 0.875rem; font-weight: 600; color: var(--text-low); text-decoration: none; transition: color 0.2s; }
    .press-more a:hover { color: var(--text-dark); }

    /* ── MEDIA CTA ── */
    .media-sec { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; }
    .media-bg { position: absolute; inset: 0; background: url('/images/camera.jpg') center/cover no-repeat; }
    .media-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,6,6,0.95) 35%, rgba(6,6,6,0.55) 68%, rgba(6,6,6,0.22) 100%); }
    .media-content { position: relative; z-index: 1; padding: 6rem 3.5rem; max-width: 600px; }
    .media-tag { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--mint); color: var(--black); padding: 0.28rem 0.7rem; border-radius: 4px; font-family: var(--display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.4rem; }
    .media-sec h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.06; letter-spacing: -0.025em; color: var(--white-hi); margin-bottom: 0.875rem; }
    .media-sec .media-sub { font-size: 1.025rem; color: var(--white-mid); line-height: 1.74; margin-bottom: 1.75rem; }
    .media-bullets { list-style: none; margin-bottom: 2.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
    .media-bullets li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.925rem; color: rgba(246,246,244,0.68); }
    .media-bullets li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }

    /* ── TRAVEL — parallax flag columns ── */
    .travel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
    .travel-h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.024em; color: var(--white); margin-bottom: 1rem; }
    .travel-h2 em { font-style: normal; color: var(--mint); }
    .travel-p { font-size: 1rem; color: var(--white-mid); line-height: 1.76; }
    .fi-tile-outer { flex-shrink: 0; }
    .fi-tile {
      border-radius: 7px; overflow: hidden;
      box-shadow: 0 4px 18px rgba(0,0,0,0.55);
      transition: box-shadow 0.3s, filter 0.25s;
      display: block;
    }
    .fi-tile:hover {
      box-shadow: 0 10px 32px rgba(62,232,124,0.4), 0 4px 10px rgba(0,0,0,0.5);
      filter: brightness(1.1) saturate(1.15);
    }
    .fi-tile img { width: 100%; height: auto; display: block; border-radius: 7px; }
    @keyframes tileFloat {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-6px); }
    }

    /* ── YOUTUBE — horizontal scroll ── */
    .yt-scroll-wrap { position: relative; margin: 3rem -3.5rem 0; padding: 0 3.5rem; }
    .yt-scroll {
      display: flex; gap: 1.25rem;
      overflow-x: auto; scroll-snap-type: x proximity;
      padding-bottom: 1.5rem;
      scrollbar-width: none; -ms-overflow-style: none;
      cursor: grab;
    }
    .yt-scroll:active { cursor: grabbing; }
    .yt-scroll::-webkit-scrollbar { display: none; }
    .yt-card { border-radius: 10px; overflow: hidden; background: var(--white); border: 1px solid rgba(26,26,26,0.07); text-decoration: none; color: inherit; display: block; transition: all 0.3s; flex: 0 0 320px; scroll-snap-align: start; }
    .yt-card:hover { border-color: rgba(62,232,124,0.35); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.08); }
    .yt-thumb { height: 160px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0D2119 0%, #143326 100%); position: relative; overflow: hidden; }
    .yt-thumb-img { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: 0.85; }
    .yt-play { width: 48px; height: 48px; border-radius: 50%; background: #FF0000; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.9rem; transition: transform 0.2s; z-index: 1; position: relative; }
    .yt-card:hover .yt-play { transform: scale(1.12); box-shadow: 0 0 24px rgba(255,0,0,0.4); }
    .yt-body { padding: 1.1rem 1.2rem; }
    .yt-title { font-family: var(--display); font-weight: 700; font-size: 0.875rem; color: var(--text-dark); line-height: 1.42; }
    .yt-series { font-size: 0.7rem; color: var(--text-low); margin-top: 0.3rem; font-weight: 500; letter-spacing: 0.04em; }
    .yt-scroll-hint { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-family: var(--display); font-size: 0.7rem; font-weight: 600; color: var(--text-low); letter-spacing: 0.06em; text-transform: uppercase; }
    .yt-scroll-hint::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, rgba(26,26,26,0.12), transparent); }
    /* the hint inherits dark-on-light colours, which made it invisible inside the dark podcast section */
    .pod-sec .yt-scroll-hint { color: var(--white-low); }
    .pod-sec .yt-scroll-hint::after { background: linear-gradient(to right, rgba(255,255,255,0.16), transparent); }

    /* ── PODCASTS ── */
    .pod-sec { position: relative; overflow: hidden; padding: 8.5rem 3.5rem; background: var(--black); }
    .pod-sec-inner { position: relative; z-index: 1; }
    .pod-scroll-wrap { position: relative; margin: 3rem -3.5rem 0; padding: 0 3.5rem; }
    .pod-scroll { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 1.5rem; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
    .pod-scroll:active { cursor: grabbing; }
    .pod-scroll::-webkit-scrollbar { display: none; }
    .pod-card { border-radius: 12px; overflow: hidden; background: var(--black-surf); border: 1px solid rgba(255,255,255,0.08); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; flex: 0 0 322px; scroll-snap-align: start; cursor: pointer; }
    .pod-card:hover { transform: translateY(-5px); border-color: rgba(62,232,124,0.32); box-shadow: 0 16px 40px rgba(0,0,0,0.42); }
    .pod-cover { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .pod-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
    .pod-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,11,0.9) 0%, rgba(11,11,11,0.12) 58%); }
    .pod-action { position: relative; z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: var(--mint); display: flex; align-items: center; justify-content: center; color: var(--black); font-size: 1.05rem; transition: transform 0.2s, box-shadow 0.2s; }
    .pod-card:hover .pod-action { transform: scale(1.1); box-shadow: 0 0 28px rgba(62,232,124,0.45); }
    .pod-role { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 3; background: rgba(11,11,11,0.82); backdrop-filter: blur(8px); border-radius: 4px; padding: 0.22rem 0.5rem; font-family: var(--display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
    .pod-show { position: absolute; bottom: 0.7rem; left: 0.9rem; right: 0.9rem; z-index: 3; font-family: var(--display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em; color: var(--white-hi); text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
    .pod-body { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
    .pod-title { font-family: var(--display); font-weight: 700; font-size: 0.9rem; line-height: 1.34; color: var(--white-hi); }
    .pod-meta { font-size: 0.7rem; color: var(--white-low); margin-top: 0.45rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
    .pod-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.95rem; }
    .pod-link { font-family: var(--display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; color: var(--white-mid); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09); border-radius: 5px; padding: 0.28rem 0.55rem; text-decoration: none; transition: all 0.2s; }
    .pod-link:hover { color: var(--mint); border-color: rgba(62,232,124,0.4); background: rgba(62,232,124,0.08); }
    /* Flat cover for shows without artwork on file. If the art lands in images/,
       the <img> paints over this; if it 404s the onerror drops it and this shows. */
    .pod-cover-flat { background: radial-gradient(circle at 50% 40%, rgba(62,232,124,0.11), transparent 62%), var(--mint-dark); }

    /* ── PODCAST TOPICS ── */
    .pod-intro { display: grid; grid-template-columns: 1fr 0.85fr; gap: 3rem; align-items: center; margin-top: 1.75rem; }
    .pod-intro-photo img { width: 100%; height: 240px; object-fit: cover; object-position: center 22%; border-radius: 12px; display: block; border: 1px solid rgba(255,255,255,0.08); }
    .pod-topics { margin-top: 3.25rem; }
    .topics-label { font-family: var(--display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mint); margin-bottom: 1.25rem; }
    .topic-stack { display: flex; flex-direction: column; gap: 0.9rem; }
    .topic-item { border-radius: 9px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); transition: border-color 0.25s, background 0.25s; overflow: hidden; }
    .topic-item:hover, .topic-item.open { border-color: rgba(62,232,124,0.3); background: rgba(62,232,124,0.05); }
    .topic-q { display: flex; align-items: center; gap: 1.125rem; width: 100%; padding: 1.05rem 1.35rem; background: none; border: none; text-align: left; cursor: pointer; font-family: inherit; }
    .topic-q:active { transform: scale(0.995); transition: transform 100ms ease-out; }
    .topic-num { font-family: var(--display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: var(--mint); flex-shrink: 0; width: 1.6rem; }
    .topic-title { font-family: var(--display); font-weight: 700; font-size: 0.95rem; line-height: 1.35; color: var(--white-hi); flex: 1; }
    .topic-plus { color: var(--mint); font-size: 1.25rem; font-weight: 300; line-height: 1; flex-shrink: 0; transition: transform 0.3s; }
    .topic-item.open .topic-plus { transform: rotate(45deg); }
    .topic-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
    .topic-line { font-size: 0.88rem; line-height: 1.66; color: var(--white-mid); padding: 0 1.35rem 1.15rem 4.1rem; }

    /* ── PODCAST BOOKING CTA ── */
    .pod-cta { margin-top: 3rem; padding: 2.25rem 2.25rem; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(62,232,124,0.18); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
    .pod-cta-title { font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.022em; color: var(--white-hi); margin-bottom: 0.55rem; }
    .pod-cta-copy { font-size: 0.95rem; line-height: 1.7; color: var(--white-mid); max-width: 34rem; }
    .pod-cta-actions { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; }

    /* ── PUBLICATIONS ── */
    .pub-stack { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2.75rem; }
    .pub-row { display: flex; align-items: center; gap: 1.125rem; padding: 1.55rem 1.75rem; border-radius: 9px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); text-decoration: none; color: inherit; transition: all 0.2s; }
    .pub-row:hover { border-color: rgba(62,232,124,0.32); transform: translateX(4px); }
    .pub-tag { font-family: var(--display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); background: var(--mint-glow); border-radius: 4px; padding: 0.26rem 0.6rem; white-space: nowrap; flex-shrink: 0; }
    .pub-name { font-family: var(--display); font-weight: 700; font-size: 0.9rem; color: var(--white-hi); }
    .pub-detail { font-size: 0.76rem; color: var(--white-mid); margin-top: 0.16rem; }
    .pub-arrow { margin-left: auto; color: var(--white-low); font-size: 1rem; flex-shrink: 0; }

    /* ── CONSULTING ── */
    .consulting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; margin-top: 3rem; }
    .consulting-copy p { font-size: 1.05rem; line-height: 1.8; color: var(--text-mid); margin-bottom: 1.2rem; }
    .services { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 2.25rem; }
    .svc { display: flex; align-items: center; gap: 0.875rem; padding: 0.85rem 1.1rem; border-radius: 8px; background: rgba(62,232,124,0.06); border: 1px solid rgba(62,232,124,0.12); }
    .svc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }
    .svc-txt { font-family: var(--display); font-size: 0.875rem; font-weight: 600; color: var(--text-dark); }
    .flag-svg-col { display: flex; align-items: center; justify-content: center; background: var(--cream); border-radius: 16px; padding: 2.5rem; border: 1px solid rgba(26,26,26,0.06); box-shadow: 0 4px 24px rgba(0,0,0,0.04); }
    #consultingSvg { width: 100%; max-width: 420px; }

    /* ── FAQ ── */
    .faq-wrap { max-width: 760px; margin: 3rem auto 0; }
    .faq-item { border-bottom: 1px solid rgba(255,255,255,0.07); }
    .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 0; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--white-hi); gap: 1rem; transition: color 0.2s; }
    .faq-q:hover { color: var(--mint); }
    .faq-plus { color: var(--mint); font-size: 1.4rem; font-weight: 300; transition: transform 0.3s; flex-shrink: 0; line-height: 1; }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; font-size: 0.9375rem; line-height: 1.77; color: var(--white-mid); padding-bottom: 0; }
    .faq-item.open .faq-a { padding-bottom: 1.4rem; }
    .faq-item.open .faq-plus { transform: rotate(45deg); }

    /* ── CONTACT ── */
    .contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 5.5rem; }
    .contact-left h3 { font-family: var(--display); font-weight: 800; font-size: 1.85rem; letter-spacing: -0.022em; color: var(--text-dark); margin-bottom: 0.7rem; }
    .contact-left p { font-size: 1rem; line-height: 1.74; color: var(--text-mid); margin-bottom: 1.4rem; }
    .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .chip { background: rgba(26,26,26,0.05); border-radius: 20px; padding: 0.36rem 0.9rem; font-family: var(--display); font-size: 0.77rem; font-weight: 600; color: var(--text-dark); border: 1px solid rgba(26,26,26,0.09); }
    .contact-links { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
    .contact-link { display: flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-size: 0.85rem; font-weight: 500; color: var(--text-low); text-decoration: none; transition: color 0.2s; }
    .contact-link:hover { color: var(--text-dark); }
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; font-family: var(--display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-low); margin-bottom: 0.4rem; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.8rem 1rem; border: 1.5px solid rgba(26,26,26,0.12); border-radius: 7px; font-family: var(--body); font-size: 0.9375rem; color: var(--text-dark); background: var(--white); transition: border-color 0.2s; appearance: none; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-glow); }
    .form-group textarea { height: 115px; resize: vertical; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }

    /* ── FOOTER ── */
    footer { background: var(--black); border-top: 1px solid rgba(255,255,255,0.07); padding: 2.5rem 3.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
    .footer-name { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--white-hi); letter-spacing: -0.01em; }
    .footer-name span { color: var(--mint); }
    .footer-links { display: flex; gap: 1.75rem; flex-wrap: wrap; }
    .footer-links a { font-family: var(--display); font-size: 0.8rem; font-weight: 500; color: var(--white-mid); text-decoration: none; transition: color 0.2s; }
    .footer-links a:hover { color: var(--white-hi); }
    .footer-copy { font-size: 0.7rem; color: var(--white-low); font-family: var(--display); }

    /* ── REVEAL ── */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.d1 { transition-delay: 0.1s; } .reveal.d2 { transition-delay: 0.2s; } .reveal.d3 { transition-delay: 0.3s; }
    .reveal.on { opacity: 1; transform: none; }

    /* ── MOBILE ── */
    /* Custom cursor removed Aug 2026. It hid the OS pointer, so a script
       failure left visitors with no pointer at all. Not worth the risk on a
       page whose job is converting producers working on a deadline. */

    /* ── GLOBE CANVAS ── */
    #travel { position: relative; overflow: hidden; min-height: 480px; display: flex; align-items: center; }
    #globeCanvas {
      position: absolute; top: 50%; right: -40px;
      transform: translateY(-50%);
      pointer-events: auto; z-index: 0; opacity: 0.9; cursor: grab;
    }
    .travel-inner { position: relative; z-index: 1; max-width: 520px; }

    /* ── FLAG TICKER ── */
    .flag-ticker-strip {
      background: var(--globe-bg); overflow: hidden;
      padding: 10px 0; border-top: 1px solid rgba(62,232,124,0.08);
      border-bottom: 1px solid rgba(62,232,124,0.08);
    }
    .flag-ticker { display: flex; gap: 8px; align-items: center; will-change: transform; }
    .flag-ticker .fi-tile {
      width: 50px; height: 33px; flex-shrink: 0;
      border-radius: 4px; overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.45);
      opacity: 0.82; transition: opacity 0.2s, transform 0.2s;
    }
    .flag-ticker .fi-tile:hover { opacity: 1; transform: scale(1.15); }
    .flag-ticker .fi-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* ── TED BADGE ── */
    .talk-badge-ted {
      position: absolute; top: 0.875rem; left: 0.875rem; z-index: 2;
      display: inline-flex; align-items: stretch; border-radius: 4px; overflow: hidden;
    }
    .ted-red { background: #E62B1E; color: #fff; font-family: var(--display); font-weight: 900; font-size: 0.8rem; letter-spacing: -0.01em; padding: 0.22rem 0.48rem; }
    .ted-ext { background: rgba(11,11,11,0.88); backdrop-filter: blur(8px); color: rgba(255,255,255,0.72); font-family: var(--display); font-weight: 600; font-size: 0.72rem; padding: 0.22rem 0.38rem; }

    /* ── YOUTUBE THUMBNAILS ── */
    .yt-thumb { position: relative; }
    .yt-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

    /* ── FLAG STATIC — swallowtail gentle breeze ── */
    .flag-parallax-wrap { will-change: transform; transition: transform 0.08s linear; }
    .flag-static {
      width: 300px; height: 186px; object-fit: cover; display: block;
      clip-path: polygon(0 0, 100% 0, 74% 50%, 100% 100%, 0 100%);
      animation: gentleBreeze 7s ease-in-out infinite;
      transform-origin: 0 50%;
    }
    @keyframes gentleBreeze {
      0%, 100% { transform: perspective(600px) rotateY(0deg) scaleY(1); }
      28% { transform: perspective(600px) rotateY(-5deg) scaleY(0.99); }
      62% { transform: perspective(600px) rotateY(4deg) scaleY(1.01); }
    }

    @media (max-width: 900px) { .talks-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 860px) {
      .pod-intro { grid-template-columns: 1fr; gap: 1.75rem; }
      .pod-intro-photo img { height: 200px; }
      .topic-line { padding-left: 1.35rem; }
    }
    @media (max-width: 768px) {
      /* Nav always dark on mobile */
      nav { padding: 1rem 1.25rem; background: rgba(11,11,11,0.97) !important; backdrop-filter: blur(20px); }
      .nav-links { display: none; }
      .nav-toggle { display: inline-flex; }
      .mobile-menu { display: flex; }

      /* Hero: face at top, text at bottom */
      .hero { align-items: flex-end; }
      .hero-bg { background-position: 60% 15%; }
      .hero-overlay { background: linear-gradient(to top, rgba(6,6,6,0.97) 0%, rgba(6,6,6,0.78) 45%, rgba(6,6,6,0.28) 72%, transparent 100%); }
      .hero-content { padding: 2rem 1.5rem 3.5rem; max-width: 100%; }
      .hero-h1 { font-size: clamp(2.5rem, 8vw, 3.2rem); }
      .scroll-cue { display: none; }

      /* Cred strip: 2 columns, readable size */
      .cred-strip { padding: 1.5rem 1rem; }
      .cred-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
      .cred-logo-item { border-right: none !important; border-bottom: 1px solid rgba(26,26,26,0.07); justify-content: center; padding: 0.75rem 1rem; }
      .cred-logo-item:nth-last-child(-n+2) { border-bottom: none; }
      .cred-logo-img { height: 32px; max-width: 140px; }
      .cred-ted { font-size: 1.1rem; }
      .cred-logo-text { font-size: 1.1rem; }

      .sec { padding: 5.5rem 1.5rem; }

      .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .about-photos { position: static; grid-template-columns: 1fr 1fr; }
      .about-photo-main { aspect-ratio: 3/2; }

      .quote-sec { height: 200vh; }
      .quote-content { padding: 3rem 1.5rem 3.5rem; }
      .quote-text { font-size: clamp(1.5rem, 6vw, 2rem); }

      .flag-sec { grid-template-columns: 1fr; gap: 3rem; padding: 5rem 1.5rem; text-align: center; }
      .flag-canvas-col { justify-content: center; }
      .principles { text-align: left; }

      .talks-sec { padding: 6rem 1.5rem; }
      .pod-sec { padding: 6rem 1.5rem; }
      .pod-scroll-wrap { margin: 3rem -1.5rem 0; padding: 0 1.5rem; }
      .talks-grid { grid-template-columns: 1fr; gap: 1rem; }

      /* Two columns, logo stacked over text, so the rail of articles is half
         as long to scroll past. */
      .press-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
      .press-card { flex-direction: column; gap: 0.7rem; padding: 1rem 1rem 1.1rem; }
      .press-logo-col { width: auto; height: 30px; }
      .press-outlet-logo { height: 26px; max-width: 100%; }
      .press-hed { font-size: 0.83rem; line-height: 1.35; }
      .press-date { font-size: 0.68rem; }
      .press-logo-col { width: 130px; flex-shrink: 0; }
      .press-outlet-logo { height: 38px; max-width: 130px; }

      .media-content { padding: 4rem 1.5rem; max-width: 100%; }

      #travel { min-height: 340px; }

      #watch { padding-bottom: 1.5rem; }
      .dot-band { height: 130px; }

      .yt-scroll-wrap { margin: 3rem -1.5rem 0; padding: 0 1.5rem; }

      .pub-layout { grid-template-columns: 1fr; }
      .pub-book-col { position: static; }
      .pub-row { flex-wrap: wrap; }
      .pub-arrow { display: none; }

      .consulting-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .form-row { grid-template-columns: 1fr; }

      footer { flex-direction: column; text-align: center; padding: 2rem 1.25rem; }
      .footer-links { justify-content: center; gap: 1.25rem; }
    }
    @media (max-width: 480px) {
      .hero-h1 { font-size: 2.4rem; }
      .about-photos { grid-template-columns: 1fr; }
      .about-photo-sm:last-child { display: none; }
    }

    /* ── VIDEO LIGHTBOX ── */
    .video-lightbox {
      position: fixed; inset: 0; z-index: 2000;
      display: none; align-items: center; justify-content: center;
      background: rgba(6,6,6,0.92); backdrop-filter: blur(6px);
      padding: 4vw;
    }
    .video-lightbox.open { display: flex; }
    .video-lightbox-inner {
      position: relative; width: 100%; max-width: 960px;
      aspect-ratio: 16/9; background: #000;
      border-radius: 10px; overflow: hidden;
      box-shadow: 0 30px 90px rgba(0,0,0,0.6);
    }
    .video-lightbox-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .video-lightbox-close {
      position: absolute; top: -2.75rem; right: 0;
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
      color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.2s;
    }
    .video-lightbox-close:hover { background: rgba(255,255,255,0.2); }
  
    /* ══ SUBPAGE COMPONENTS ══════════════════════════════════════════════════
       Added Sep 9 2026 for /media, /speaking, /podcasts, /consulting. */

    /* Shorter hero than the homepage: these pages are destinations, not an
       introduction, so the headline sits closer to the top. */
    .sub-hero { min-height: 78vh; }
    .sub-hero .media-content { padding-top: 9rem; padding-bottom: 5rem; max-width: 760px; }
    .sub-hero-h1 {
      font-family: var(--display); font-weight: 800;
      font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1.03; letter-spacing: -0.032em;
      color: var(--white-hi); margin-bottom: 1.5rem;
    }
    .sub-hero .cta-row { margin-top: 2.25rem; }

    /* Horizontal rail. Content that matters to some visitors and not others
       lives past the right edge instead of eating vertical space. */
    .rail-wrap { position: relative; margin: 3rem -3.5rem 0; padding: 0 3.5rem; }
    .rail {
      display: flex; gap: 1.25rem; overflow-x: auto;
      scroll-snap-type: x proximity; padding-bottom: 1.5rem;
      scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
    }
    .rail:active { cursor: grabbing; }
    .rail::-webkit-scrollbar { display: none; }
    .rail > * { scroll-snap-align: start; flex: 0 0 auto; }
    .press-rail .press-card { width: 340px; }

    /* The service list on a dark section */
    .sec-dark .svc, .sec-dark-alt .svc,
    .sec-globe .svc { background: rgba(62,232,124,0.07); border-color: rgba(62,232,124,0.16); }
    .sec-dark .svc-txt, .sec-dark-alt .svc-txt,
    .sec-globe .svc-txt { color: var(--white-mid); }
    .svc-txt strong { color: inherit; font-weight: 800; }
    .sec-dark .svc-txt strong, .sec-dark-alt .svc-txt strong { color: var(--white-hi); }
    .svc { align-items: flex-start; }
    .svc-dot { margin-top: 0.5rem; }
    .svc-txt { line-height: 1.55; }

    @media (max-width: 768px) {
      .sub-hero { min-height: 68vh; }
      .sub-hero .media-content { padding-top: 7rem; padding-bottom: 3rem; }
      .rail-wrap { margin: 2.5rem -1.5rem 0; padding: 0 1.5rem; }
      .press-rail .press-card { width: 250px; }
      /* the two-column press grid rule must not flatten rail cards */
      .press-rail .press-card { flex-direction: column; }
    }

    /* Hero background variants per subpage */
    .sub-hero--stage .media-bg { background-image: url('/images/ted2.jpg'); background-position: center 22%; }
    .sub-hero--mic   .media-bg { background-image: url('/images/on-camera-1200.jpg'); }
    .sub-hero--design .media-bg { background-image: url('/images/ffg3.jpg'); }

    /* Manual line breaks are a desktop typographic choice. On a phone they
       collide with natural wrapping and strand single words. */
    @media (max-width: 768px) { br.br-desk { display: none; } }