:root {
    /* Semantic theme tokens — overridden per-league by API on page load */
    --tp-primary:    #D4A017;
    --tp-secondary:  #C24E0E;
    --tp-tertiary:   #2E4A2E;
    --tp-dark:       #0E2340;

    /* Aliases kept so existing CSS keeps working */
    --tp-navy:       var(--tp-dark);
    --tp-forest:     var(--tp-tertiary);
    --tp-gold:       var(--tp-primary);
    --tp-orange:     var(--tp-secondary);
    --tp-sand:       #B89A6A;
    --tp-cream:      #EDE6D6;
    --tp-cream-deep: #E0D5BA;
    --tp-white:      #FBF8F1;
  }
  html, body { background: var(--tp-cream); color: var(--tp-navy); font-family: 'Plus Jakarta Sans', sans-serif; margin: 0; padding: 0; }
  body { overflow-x: hidden; }
  ::selection { background: var(--tp-gold); color: var(--tp-navy); }

  .font-display { font-family: 'Anton', sans-serif; letter-spacing: 0.5px; }
  .font-archivo { font-family: 'Archivo Black', sans-serif; }

  .glass-light {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(30px) saturate(1.4);
    -webkit-backdrop-filter: blur(30px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(14, 35, 64, 0.08);
  }
  .card-white {
    background: var(--tp-white);
    border: 1px solid rgba(14, 35, 64, 0.08);
    box-shadow: 0 4px 12px rgba(14, 35, 64, 0.04), 0 12px 32px rgba(14, 35, 64, 0.06);
  }
  .stadium-bg-light {
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 160, 23, 0.10) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 90% 40%, rgba(194, 78, 14, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 0% 70%, rgba(46, 74, 46, 0.06) 0%, transparent 60%),
      var(--tp-cream);
  }
  .canvas-grain {
    background-image: repeating-linear-gradient(45deg, rgba(14, 35, 64, 0.015) 0px, rgba(14, 35, 64, 0.015) 1px, transparent 1px, transparent 6px);
  }
  .number-tick { position: relative; }
  .number-tick::before {
    content: ""; position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
    width: 40px; height: 3px; background: var(--tp-orange); border-radius: 2px;
  }
  @keyframes shine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
  .gold-shine {
    background: linear-gradient(90deg, var(--tp-gold) 0%, #f0c850 50%, var(--tp-gold) 100%);
    background-size: 200% 100%;
    animation: shine 6s linear infinite;
  }
  @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
  .pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
  @keyframes shatter { 0% { transform: scale(0.6); opacity: 0; } 50% { opacity: 1; filter: drop-shadow(0 0 15px var(--tp-gold)); } 100% { transform: scale(1.4); opacity: 0; } }
  .shatter { animation: shatter 0.6s ease forwards; }
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
  @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  .animate-fade-in-up { animation: fade-in-up 0.5s ease-out forwards; }

  /* Slide layering */
  .slide { display: none; opacity: 0; transition: opacity 0.6s ease; }
  .slide.active { display: flex; opacity: 1; }

  /* View switching */
  .view { display: none; }
  .view.active { display: block; }

  /* Modal */
  .modal-root { display: none; }
  .modal-root.open { display: flex; }
  body.modal-open { overflow: hidden; }

  /* FAQ accordion */
  .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 1.5rem; }
  .faq-item.open .faq-body { max-height: 200px; padding: 1rem 1.5rem; }
  .faq-item.open .faq-icon-plus { display: none; }
  .faq-item:not(.open) .faq-icon-minus { display: none; }

  /* Custom select arrow */
  select { appearance: none; -webkit-appearance: none; }

  /* FA icon sizing helpers */
  .fa-icon-lg { font-size: 28px; }
  .fa-icon-xl { font-size: 32px; }

  /* ============== WYSIWYG body styles (.prose-tp) ============== */
  /* Renders module Content HTML from the CMS. Editors can use h2/h3/h4,
     paragraphs, bulleted lists, ordered lists, links, bold/italic, blockquotes,
     plus the brand utility classes documented at the bottom of this block. */
  .prose-tp { color: rgba(14, 35, 64, 0.78); font-size: 0.95rem; line-height: 1.65; }
  .prose-tp > * + * { margin-top: 1rem; }
  .prose-tp h2, .prose-tp h3, .prose-tp h4 {
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tp-navy);
    margin-top: 2.5rem;
  }
  /* H2 carries a gold accent rule (brand guide section header pattern) */
  .prose-tp h2 {
    font-size: 1.25rem;
    position: relative;
    padding-bottom: 0.75rem;
  }
  .prose-tp h2::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 2.5rem;
    height: 2px;
    background: var(--tp-gold);
  }
  .prose-tp h3 { font-size: 1rem; letter-spacing: 0.08em; color: var(--tp-navy); margin-top: 2rem; }
  .prose-tp h4 { font-size: 0.8rem; letter-spacing: 0.12em; color: rgba(14,35,64,0.55); }
  .prose-tp p  { margin: 0; }
  .prose-tp ul, .prose-tp ol { padding-left: 1.25rem; margin: 0; }
  .prose-tp ul { list-style: none; padding-left: 0; }
  .prose-tp ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--tp-navy);
  }
  .prose-tp ul li::before {
    content: "\f00c";              /* FA check */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0; top: 0.15rem;
    color: var(--tp-gold);
    font-size: 0.85rem;
  }
  .prose-tp ol li { margin-top: 0.5rem; }
  .prose-tp a {
    color: var(--tp-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
  }
  .prose-tp a:hover { color: var(--tp-navy); }
  .prose-tp strong { color: var(--tp-navy); }
  .prose-tp blockquote {
    border-left: 3px solid var(--tp-gold);
    padding-left: 1rem;
    font-style: italic;
    color: rgba(14, 35, 64, 0.7);
  }
  .prose-tp img {
    max-width: 100%; height: auto; border-radius: 0.5rem; display: block;
  }
  /* Branded horizontal rule -- gold gradient instead of harsh line */
  .prose-tp hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tp-gold), transparent);
    margin: 2.5rem 0;
  }

  /* ============== BRAND COMPONENT UTILITIES ==============
     Editors can apply these class names inside any .prose-tp content page
     to get the brand-guide visual treatment. See BRAND.md for examples.

     <p class="tp-lead">...</p>                  Opening paragraph
     <p class="tp-kicker">SECTION</p>            Mini eyebrow above h3
     <div class="tp-callout">...</div>           Gold info box
     <div class="tp-callout tp-callout--warn">   Orange warning box
     <div class="tp-callout tp-callout--success"> Forest success box
     <ul class="tp-do">...</ul>                  Green check list
     <ul class="tp-dont">...</ul>                Orange x list
     <span class="tp-pill">tag</span>            Inline pill badge
     <span class="tp-pill tp-pill--gold">        Gold pill
     <div class="tp-stat">                       Big number callout
       <span class="tp-stat-number">25</span>
       <span class="tp-stat-label">YEARS</span>
     </div>                                                                  */

  /* Lead paragraph -- bigger, fuller navy, sets the tone of the page */
  .prose-tp .tp-lead {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--tp-navy);
    line-height: 1.6;
  }

  /* Eyebrow inside prose -- subdivides longer pages without using h2 */
  .prose-tp .tp-kicker {
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tp-gold);
    margin-top: 2rem;
    margin-bottom: 0.25rem;
  }

  /* Callout boxes -- left border accent, tinted background.
     A leading <strong> inside renders as a title bar. */
  .prose-tp .tp-callout {
    background: rgba(212, 160, 23, 0.08);
    border-left: 4px solid var(--tp-gold);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
  }
  .prose-tp .tp-callout > *:first-child { margin-top: 0; }
  .prose-tp .tp-callout > *:last-child { margin-bottom: 0; }
  .prose-tp .tp-callout p { margin-bottom: 0.5rem; }
  .prose-tp .tp-callout strong:first-child {
    display: block;
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--tp-navy);
  }
  .prose-tp .tp-callout--warn {
    border-left-color: var(--tp-orange);
    background: rgba(194, 78, 14, 0.06);
  }
  .prose-tp .tp-callout--success {
    border-left-color: var(--tp-forest);
    background: rgba(46, 74, 46, 0.06);
  }
  .prose-tp .tp-callout--navy {
    border-left-color: var(--tp-navy);
    background: rgba(14, 35, 64, 0.05);
  }

  /* DO / DON'T list variants (style guide section 05 pattern) */
  .prose-tp ul.tp-do li::before {
    content: "\f00c";              /* FA check */
    color: var(--tp-forest);
  }
  .prose-tp ul.tp-dont li::before {
    content: "\f00d";              /* FA x */
    color: var(--tp-orange);
  }

  /* Inline pill badges -- for tags, statuses, version labels in prose */
  .prose-tp .tp-pill {
    display: inline-block;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.18rem 0.6rem;
    border-radius: 100px;
    background: var(--tp-cream);
    color: var(--tp-navy);
    vertical-align: 1px;
    margin: 0 0.15rem;
    font-weight: 400;
  }
  .prose-tp .tp-pill--gold   { background: rgba(212, 160, 23, 0.18); color: #8a6a0e; }
  .prose-tp .tp-pill--orange { background: rgba(194, 78, 14, 0.15); color: var(--tp-orange); }
  .prose-tp .tp-pill--forest { background: rgba(46, 74, 46, 0.15); color: var(--tp-forest); }
  .prose-tp .tp-pill--navy   { background: var(--tp-navy); color: var(--tp-gold); }

  /* Big stat callout -- Anton italic number, archivo label below */
  .prose-tp .tp-stat {
    display: block;
    text-align: center;
    margin: 2rem 0;
  }
  .prose-tp .tp-stat-number {
    font-family: 'Anton', sans-serif;
    font-style: italic;
    font-size: 4rem;
    line-height: 1;
    color: var(--tp-navy);
    display: block;
  }
  .prose-tp .tp-stat-label {
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tp-gold);
    margin-top: 0.6rem;
    display: block;
  }

  /* Two-column row inside prose -- for compact side-by-side info */
  .prose-tp .tp-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
  }
  @media (max-width: 640px) { .prose-tp .tp-cols { grid-template-columns: 1fr; } }
  .prose-tp .tp-cols > div { padding: 1rem 0; }

  /* Signature block -- coach-voice sign-off at end of a page */
  .prose-tp .tp-signoff {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(14, 35, 64, 0.1);
    font-style: italic;
    color: rgba(14, 35, 64, 0.6);
    font-size: 0.9rem;
  }

  /* ============== PAGE TEMPLATES ==============
     Five reusable layout patterns for content pages. Pick one that fits the
     page's purpose -- not every page needs the same template. See BRAND.md
     for guidance on when to use which.

     1. .tp-tmpl-hero       Navy hero block at top of body (audience pages, careers)
     2. .tp-tmpl-split      Two-column "you do this / we do this" grid (markets, sports)
     3. .tp-tmpl-pillar     Big stat anchor + body (about, our-story)
     4. .tp-tmpl-reference  Stripped-back text style (legal, privacy, terms)
     5. .tp-tmpl-persona    Bold persona intro with kicker (audience landing pages) */

  /* ===== TEMPLATE 1: HERO BLOCK ===== */
  /* Navy panel at top of body with offset gold/orange circles, eyebrow
     pill, Anton headline, sub-text. Echoes homepage "How We Show Up". */
  .prose-tp .tp-tmpl-hero {
    position: relative;
    background: var(--tp-navy);
    color: var(--tp-cream);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    margin: -0.5rem 0 2rem 0;
    overflow: hidden;
  }
  .prose-tp .tp-tmpl-hero::before {
    content: '';
    position: absolute;
    right: -80px; bottom: -80px;
    width: 240px; height: 240px;
    background: var(--tp-gold);
    border-radius: 50%;
    opacity: 0.18;
    pointer-events: none;
  }
  .prose-tp .tp-tmpl-hero::after {
    content: '';
    position: absolute;
    right: 80px; top: -60px;
    width: 140px; height: 140px;
    background: var(--tp-orange);
    border-radius: 50%;
    opacity: 0.12;
    pointer-events: none;
  }
  .prose-tp .tp-tmpl-hero > * { position: relative; z-index: 1; }
  .prose-tp .tp-tmpl-hero .eyebrow {
    display: inline-block;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tp-gold);
    margin-bottom: 1rem;
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    background: rgba(212, 160, 23, 0.15);
    border: 1px solid rgba(212, 160, 23, 0.3);
  }
  .prose-tp .tp-tmpl-hero h2 {
    font-family: 'Anton', sans-serif;
    font-style: italic;
    text-transform: uppercase;
    color: var(--tp-cream) !important;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.5px;
    margin: 0 0 1rem 0 !important;
    padding-bottom: 0 !important;
  }
  .prose-tp .tp-tmpl-hero h2::after { display: none; }
  .prose-tp .tp-tmpl-hero h2 .accent { color: var(--tp-gold); }
  .prose-tp .tp-tmpl-hero p {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(237, 230, 214, 0.85);
    margin: 0;
  }
  /* Accent variants - switch the colored circle */
  .prose-tp .tp-tmpl-hero--orange::before { background: var(--tp-orange); }
  .prose-tp .tp-tmpl-hero--orange .eyebrow { background: rgba(194,78,14,0.15); border-color: rgba(194,78,14,0.3); color: var(--tp-orange); }
  .prose-tp .tp-tmpl-hero--orange h2 .accent { color: var(--tp-orange); }
  .prose-tp .tp-tmpl-hero--forest::before { background: var(--tp-forest); }
  .prose-tp .tp-tmpl-hero--forest .eyebrow { background: rgba(46,74,46,0.15); border-color: rgba(46,74,46,0.3); color: var(--tp-cream); }
  .prose-tp .tp-tmpl-hero--cream { background: var(--tp-cream); color: var(--tp-navy); }
  .prose-tp .tp-tmpl-hero--cream h2 { color: var(--tp-navy) !important; }
  .prose-tp .tp-tmpl-hero--cream p { color: rgba(14,35,64,0.7); }

  /* ===== TEMPLATE 2: SPLIT GRID ===== */
  /* Two-column "you do this / we do this" or "do / dont" comparison. */
  .prose-tp .tp-tmpl-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 2rem 0;
  }
  @media (max-width: 640px) { .prose-tp .tp-tmpl-split { grid-template-columns: 1fr; } }
  .prose-tp .tp-tmpl-split > div {
    background: var(--tp-cream);
    border-radius: 16px;
    padding: 1.5rem;
    border-left: 4px solid var(--tp-gold);
  }
  .prose-tp .tp-tmpl-split > div:nth-child(2) { border-left-color: var(--tp-orange); }
  .prose-tp .tp-tmpl-split h3 {
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--tp-gold);
    margin: 0 0 0.75rem 0 !important;
  }
  .prose-tp .tp-tmpl-split > div:nth-child(2) h3 { color: var(--tp-orange); }
  .prose-tp .tp-tmpl-split p,
  .prose-tp .tp-tmpl-split ul { margin: 0; }
  .prose-tp .tp-tmpl-split ul li { margin-top: 0.35rem; font-size: 0.85rem; }

  /* ===== TEMPLATE 3: PILLAR (centered big stat anchor) ===== */
  /* For pages that want a single dominant stat to anchor the story. */
  .prose-tp .tp-tmpl-pillar {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--tp-cream);
    border-radius: 20px;
    margin: 2.5rem 0;
    border-top: 4px solid var(--tp-gold);
  }
  .prose-tp .tp-tmpl-pillar .number {
    display: block;
    font-family: 'Anton', sans-serif;
    font-style: italic;
    font-size: 5rem;
    line-height: 1;
    color: var(--tp-navy);
    margin-bottom: 0.5rem;
  }
  .prose-tp .tp-tmpl-pillar .label {
    display: block;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tp-gold);
    margin-bottom: 1rem;
  }
  .prose-tp .tp-tmpl-pillar p {
    max-width: 32rem;
    margin: 0 auto !important;
    font-size: 1rem;
    color: var(--tp-navy);
  }

  /* ===== TEMPLATE 4: REFERENCE ===== */
  /* Stripped-back, more formal styling for legal/privacy/terms.
     Smaller h2 accent bar, denser line height, table-of-contents friendly.
     Wrap content in <div class="tp-tmpl-reference">...</div> at top of body. */
  .prose-tp .tp-tmpl-reference { font-size: 0.92rem; line-height: 1.7; }
  .prose-tp .tp-tmpl-reference h2 {
    font-size: 1.05rem;
    margin-top: 2rem;
    padding-bottom: 0.5rem;
  }
  .prose-tp .tp-tmpl-reference h2::after { width: 1.5rem; height: 1px; }
  .prose-tp .tp-tmpl-reference ul li::before { color: rgba(14,35,64,0.4); font-size: 0.7rem; }
  /* Table-of-contents block when present */
  .prose-tp .tp-tmpl-reference .tp-toc {
    background: var(--tp-cream);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 2rem 0;
  }
  .prose-tp .tp-tmpl-reference .tp-toc-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--tp-navy);
    margin-bottom: 0.5rem;
  }
  .prose-tp .tp-tmpl-reference .tp-toc ul li::before { content: none; }
  .prose-tp .tp-tmpl-reference .tp-toc ul li { padding-left: 0; font-weight: 500; }
  .prose-tp .tp-tmpl-reference .tp-toc ul li a { font-weight: 600; font-size: 0.85rem; }

  /* ===== TEMPLATE 5: PERSONA INTRO ===== */
  /* Bold opener for audience pages -- big accent stripe, role title,
     persona one-liner. Designed to land hard before the "the job you're
     doing" / "what we handle" / etc body sections. */
  .prose-tp .tp-tmpl-persona {
    position: relative;
    padding: 2rem 2rem 2rem 2.5rem;
    background: var(--tp-cream);
    border-radius: 20px;
    border-left: 8px solid var(--tp-gold);
    margin: 0 0 2rem 0;
  }
  .prose-tp .tp-tmpl-persona .role {
    display: block;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tp-gold);
    margin-bottom: 0.5rem;
  }
  .prose-tp .tp-tmpl-persona .opener {
    font-family: 'Anton', sans-serif;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: 0.5px;
    color: var(--tp-navy);
    margin: 0 0 0.75rem 0;
  }
  .prose-tp .tp-tmpl-persona .punchline {
    font-size: 1rem;
    color: rgba(14, 35, 64, 0.75);
    margin: 0;
  }
  .prose-tp .tp-tmpl-persona--orange { border-left-color: var(--tp-orange); }
  .prose-tp .tp-tmpl-persona--orange .role { color: var(--tp-orange); }
  .prose-tp .tp-tmpl-persona--forest { border-left-color: var(--tp-forest); }
  .prose-tp .tp-tmpl-persona--forest .role { color: var(--tp-forest); }
  .prose-tp .tp-tmpl-persona--navy { border-left-color: var(--tp-navy); }
  .prose-tp .tp-tmpl-persona--navy .role { color: var(--tp-navy); }

  /* Native <details>/<summary> accordions inside body content.
     Used on Careers for job listings, Resources for FAQ-style content,
     anywhere a collapsible card improves scannability. */
  .prose-tp details {
    background: var(--tp-cream);
    border: 1px solid rgba(14, 35, 64, 0.1);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }
  .prose-tp details + details { margin-top: 0.75rem; }
  .prose-tp details[open] {
    border-color: var(--tp-primary);
    box-shadow: 0 4px 20px rgba(14, 35, 64, 0.08);
  }
  .prose-tp details summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.4rem;
    font-family: var(--tp-font-archivo, 'Archivo Black', sans-serif);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tp-navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: background 200ms ease;
  }
  .prose-tp details summary::-webkit-details-marker { display: none; }
  .prose-tp details summary::after {
    content: "+";
    font-size: 1.3rem;
    font-family: ui-sans-serif, system-ui, sans-serif;
    color: var(--tp-primary);
    transition: transform 200ms ease;
    flex-shrink: 0;
  }
  .prose-tp details[open] summary::after { content: "−"; }
  .prose-tp details summary:hover { background: rgba(212, 160, 23, 0.08); }
  .prose-tp details > *:not(summary) {
    padding: 0 1.4rem 1.2rem;
  }
  .prose-tp details > p:not(:first-of-type),
  .prose-tp details > ul,
  .prose-tp details > ol {
    padding-top: 0.5rem;
  }

  /* Hero slide background layers — image repeated, enlarged, blurred behind the slider */
  .slide-bg-layer {
    position: absolute; inset: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    z-index: 0;
  }
  .slide-bg-layer.active { opacity: 1; }
  .slide-bg-layer:not(.active) { opacity: 0; }
  .slide-bg-image {
    position: absolute; inset: -10%;
    background-size: cover;
    background-position: center;
    filter: blur(70px) brightness(1.05) saturate(1.3);
    opacity: 0.2;
    transform: scale(1.2);
  }
  .slide-bg-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(237,230,214,0.25) 0%, rgba(237,230,214,0.5) 100%);
  }

  /* ============== HERO SLIDER STABILITY FIXES ============== */
  /* Image is 16:9, full width of the inner container (max 1600px - padding).
     Arrows sit at the image's vertical center: top of image (8rem from section top)
     + half the image height (width * 9/32). Mobile padding px-4 (2rem total),
     md+ padding px-8 (4rem total). */
  #sliderArrows {
    top: calc(8rem + (100vw - 2rem) * 9 / 32);
  }
  @media (min-width: 768px) {
    #sliderArrows {
      top: calc(8rem + min(100vw - 4rem, 1536px) * 9 / 32);
    }
  }

  /* Floating white card: enforce a min-height so cards stay consistent
     across slides regardless of title/description length. Flex column +
     mt-auto on the button row pins buttons to the bottom on every slide. */
  .slide-card { min-height: 260px; display: flex; flex-direction: column; }
  @media (min-width: 768px) { .slide-card { min-height: 320px; } }
  @media (min-width: 1024px) { .slide-card { min-height: 360px; } }

  /* ============== ANIMATED HEADER (default + scrolled compact state) ============== */
  #site-header {
    top: 1rem;
    transition: top 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .logo-pill { padding: 0.75rem 1.25rem; }
  .nav-pill  { padding: 0.5rem 0.75rem; }
  .brand-logo {
    height: 2rem;
    transition:
      max-width 500ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity   350ms ease,
      height    500ms cubic-bezier(0.4, 0, 0.2, 1),
      margin    500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .brand-logo-wordmark { max-width: 600px; opacity: 1; }
  .brand-logo-icon     { max-width: 0;     opacity: 0; }

  @media (min-width: 768px) {
    .logo-pill { padding: 1.25rem 1.75rem; }
    .nav-pill  { padding: 0.5rem 1.5rem; }
    .brand-logo { height: 3rem; }
  }

  /* Compact (scrolled) state */
  body.scrolled #site-header { top: 0.25rem; }
  body.scrolled .logo-pill   { padding: 0.5rem 1rem; }
  body.scrolled .nav-pill    { padding: 0.3rem 0.75rem; }
  body.scrolled .brand-logo  { height: 1.75rem; }
  body.scrolled .brand-logo-wordmark { max-width: 0;    opacity: 0; }
  body.scrolled .brand-logo-icon     { max-width: 80px; opacity: 1; }

  @media (min-width: 768px) {
    body.scrolled .logo-pill  { padding: 0.65rem 1.1rem; }
    body.scrolled .nav-pill   { padding: 0.4rem 1.25rem; }
    body.scrolled .brand-logo { height: 2.25rem; }
  }

  /* Nav buttons & login button shrink subtly when compact */
  .nav-pill button.login-btn {
    padding: 0.625rem 1.25rem;
    transition: padding 500ms cubic-bezier(0.4, 0, 0.2, 1), font-size 500ms;
  }
  body.scrolled .nav-pill button.login-btn {
    padding: 0.45rem 1rem;
  }

  /* ============== LOGGED-IN USER MENU ============== */
  .user-pill {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.85rem 0.3rem 0.3rem;
    border-radius: 9999px;
    background: var(--tp-white);
    border: 1px solid rgba(14, 35, 64, 0.1);
    transition: all 300ms ease;
    cursor: pointer;
  }
  .user-pill:hover {
    background: var(--tp-cream);
    border-color: rgba(212, 160, 23, 0.4);
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.15);
  }
  .user-avatar {
    width: 1.85rem; height: 1.85rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--tp-gold), #f0c850);
    color: var(--tp-navy);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.8rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 1px rgba(14,35,64,0.06);
  }
  body.scrolled .user-pill { padding: 0.2rem 0.7rem 0.2rem 0.2rem; }
  body.scrolled .user-avatar { width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }

  .user-dropdown {
    position: absolute; top: calc(100% + 0.75rem); right: 0;
    min-width: 240px;
    background: var(--tp-white);
    border: 1px solid rgba(14, 35, 64, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 12px 40px rgba(14, 35, 64, 0.15);
    padding: 0.75rem;
    z-index: 11000;
    opacity: 0; transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .user-dropdown.open {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  .user-dropdown-header {
    padding: 0.75rem 1rem 1rem;
    border-bottom: 1px solid rgba(14, 35, 64, 0.08);
    margin-bottom: 0.5rem;
  }
  .user-dropdown-link {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.65rem 1rem;
    border-radius: 0.6rem;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tp-navy);
    transition: background 150ms ease;
    cursor: pointer;
  }
  .user-dropdown-link:hover { background: var(--tp-cream); }
  .user-dropdown-link.signout { color: var(--tp-orange); margin-top: 0.5rem; border-top: 1px solid rgba(14, 35, 64, 0.08); border-radius: 0; padding-top: 0.85rem; }
  .user-dropdown-link.signout:hover { background: rgba(194, 78, 14, 0.08); }

  /* Welcome toast */
  .welcome-toast {
    position: fixed; top: 1.5rem; left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 12000;
    background: var(--tp-navy);
    color: var(--tp-cream);
    padding: 0.85rem 1.5rem;
    border-radius: 9999px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    box-shadow: 0 12px 32px rgba(14, 35, 64, 0.3);
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; align-items: center; gap: 0.6rem;
  }
  .welcome-toast.show { transform: translateX(-50%) translateY(0); }
  .welcome-toast .dot {
    width: 0.5rem; height: 0.5rem; border-radius: 9999px;
    background: var(--tp-gold);
  }

  /* ============== MEGA-MENU PANEL ==============
     Anchored under the header instead of taking over the whole screen.
     Subtle scrim backdrop + slide-down fade-in for the panel itself. */
  #modalMenu {
    align-items: flex-start;
    justify-content: center;
    padding: 6rem 1rem 2rem;
    background: rgba(14, 35, 64, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  @media (max-width: 768px) {
    #modalMenu { padding: 5rem 0.5rem 1rem; }
  }
  .menu-panel {
    width: 100%;
    max-width: 1400px;
    max-height: calc(100vh - 7rem);
    background: var(--tp-white);
    border: 1px solid rgba(14, 35, 64, 0.08);
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(14, 35, 64, 0.25), 0 0 0 1px rgba(212, 160, 23, 0.15);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 250ms ease, transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  #modalMenu.open .menu-panel {
    opacity: 1;
    transform: translateY(0);
  }
  @media (max-width: 768px) {
    .menu-panel { border-radius: 18px; max-height: calc(100vh - 6rem); }
  }

  /* ============== CALENDLY POPUP OVERRIDES ==============
     Calendly's popup container fights any frame we try to put around it
     (their wrapper is much larger than the visible booking card and the
     card is rendered inside the iframe). Instead of fighting that, we just
     polish the scrim and close button, and let the native card show.
     The "Powered by Calendly" ribbon comes off via account settings:
        Calendly avatar -> Branding -> "Use Calendly branding" off. */
  .calendly-overlay {
    background: rgba(14, 35, 64, 0.55) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  /* Restyle the default close button to match TeamPass buttons */
  .calendly-popup-close {
    background: var(--tp-cream) !important;
    border: 1px solid rgba(14, 35, 64, 0.1) !important;
    border-radius: 9999px !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    box-shadow: 0 4px 12px rgba(14, 35, 64, 0.15) !important;
  }