/* ============================================================
   familyVO.com  ▸  site.css
   Master stylesheet — design tokens, base type, navigation,
   face area, footer, responsive.
   ------------------------------------------------------------
   Author: SuperNinja Complex Plus
   Brand:  CrossTimber Studios / familyVO.com
   ============================================================ */

/* ----------- 1. FONTS -------------------------------------- */
@font-face {
    font-family: 'Rise of Kingdom';
    src: url('/08fonts/Rise_of_Kingdom.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ----------- 2. DESIGN TOKENS ------------------------------ */
:root {
    /* Brand colors (per StartHere.docx) */
    --c-blue-light: #aedaf1;     /* outlines, accents, headers */
    --c-blue-dark:  #0e4ccc;     /* h-tag titles */
    --c-orange:     #f3531b;     /* prices, discounts, CTAs */
    --c-charcoal:   #2a2a2a;
    --c-shadow:     rgba(0,0,0,.4);
    --c-white:      #ffffff;
    --c-offwhite:   #fafbfd;
    --c-text:       #1a1a2e;
    --c-muted:      #707085;
    --c-border:     #e6ecf2;

    /* Layout */
    --nav-height:        160px;
    --nav-line-top:      80px;     /* distance from top of nav to deco line */
    --container-max:     1240px;
    --container-radius:  40px;
    --container-shadow:  0 0 40px var(--c-shadow);

    /* Typography */
    --font-h:    'Rise of Kingdom', 'Cinzel', Georgia, serif;
    --font-body: 'Verdana', Geneva, Tahoma, sans-serif;

    /* Z-index scale */
    --z-nav:        1000;
    --z-face:       100;     /* below nav, above body */
    --z-face-arrow: 1100;    /* above nav per FACE_AREA spec */
    --z-modal:      10000;
    --z-modal-top:  10001;
}

/* ----------- 3. RESET / BASE ------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: var(--c-blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2 {
    font-family: var(--font-h);
    color: var(--c-blue-dark);
    font-weight: normal;
    letter-spacing: 0.5px;
    line-height: 1.15;
    margin: 0 0 .4em 0;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2.0rem; }
h3, h4, h5, h6 {
    font-family: var(--font-body);
    color: var(--c-blue-dark);
    font-weight: 700;
    margin: 0 0 .4em 0;
}
h3 { font-size: 1.35rem; }
h4 { font-size: 1.10rem; }

p { margin: 0 0 1em 0; }
.price, .discount-text { color: var(--c-orange); font-weight: 700; }

/* ----------- 4. NAVIGATION HEADER -------------------------- */
.site-nav {
    position: relative;
    height: var(--nav-height);
    background: var(--c-white);
    box-shadow: 0 30px 30px -25px rgba(0,0,0,.35);
    z-index: var(--z-nav);
    overflow: visible;
}

/* The decorative blue horizontal line at 80px from top, behind elements */
.site-nav::before {
    content: '';
    position: absolute;
    top: var(--nav-line-top);
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(174,218,241,0) 0%,
        var(--c-blue-light) 8%,
        var(--c-blue-light) 92%,
        rgba(174,218,241,0) 100%);
    box-shadow: 0 1px 0 var(--c-blue-light);    /* soft 1px shadow */
    z-index: 1;                                  /* BEHIND nav content */
    pointer-events: none;
}

.site-nav__inner {
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 30px;
    position: relative;
    z-index: 2;          /* ABOVE the deco line */
}

/* Logo: 300x160 container (300x125 video + 300x125 PNG layered) */
.site-nav__logo {
    width: 300px;
    height: 160px;
    position: relative;
    flex: 0 0 300px;
    display: block;
    /* slide-in animation: 5s total (3s base + 2s extra per John's request) */
    animation: logo-slide-in 5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes logo-slide-in {
    0%   { transform: translateX(-120vw); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}
.site-nav__logo-bg,
.site-nav__logo-fg {
    position: absolute;
    left: 0;
    top: 17.5px;       /* (160 - 125) / 2 */
    width: 300px;
    height: 125px;
    object-fit: contain;
}
.site-nav__logo-bg {
    pointer-events: none;
}
.site-nav__logo-fg {
    z-index: 2;
}

/* Calc CTA button
   build #9: renamed "Get a Quote" → "Instant Quote". Font switched to Rise
   of Kingdom (var(--font-h)), font enlarged, internal padding reduced so the
   text grows WITHIN roughly the same button footprint. */
.site-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;                                /* was 10 — tighter */
    padding: 8px 18px;                       /* was 14px 24px — less internal pad */
    background: linear-gradient(135deg, var(--c-orange), #ff7f3f);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-family: var(--font-h);              /* build #9: Rise of Kingdom */
    font-size: 1.5rem;                       /* build #9: was 1rem — larger */
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(243,83,27,.35);
    transition: transform .18s, box-shadow .18s;
    white-space: nowrap;
}
.site-nav__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(243,83,27,.45);
    text-decoration: none;
    color: #fff;
}
.site-nav__cta-icon { font-size: 1.2em; }

/* Round 5: Stack the Instant Quote button with a Free Custom Audition
   text-link directly beneath it (desktop header). */
.site-nav__cta-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.site-nav__cta-sub {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-blue-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1.2;
    transition: color .15s ease;
    white-space: nowrap;
}
.site-nav__cta-sub:hover,
.site-nav__cta-sub:focus {
    color: var(--c-orange);
    text-decoration: underline;
}

/* Pulldowns */
.nav-menu { position: relative; }
.nav-menu__toggle {
    background: var(--c-white);
    border: 2px solid var(--c-blue-light);
    border-radius: 12px;
    padding: 10px 18px;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--c-blue-dark);
    cursor: pointer;
    font-size: .95rem;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.nav-menu__toggle:hover {
    background: #f0f7fc;
    border-color: var(--c-blue-dark);
}
.nav-menu__toggle::after {
    content: ' ▾';
    font-size: .8em;
    color: var(--c-muted);
}

.nav-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 260px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(0,0,0,.18);
    padding: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
    z-index: var(--z-nav);
}
.nav-menu.is-open .nav-menu__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-menu__panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--c-text);
    font-size: .95rem;
    text-decoration: none;
}
.nav-menu__panel a:hover {
    background: #f0f7fc;
    color: var(--c-blue-dark);
}
.nav-menu__panel .menu-divider {
    height: 1px;
    margin: 6px 8px;
    background: var(--c-border);
}
.nav-menu__icon {
    width: 22px;
    text-align: center;
    color: var(--c-blue-dark);
}

/* build #7: panels marked --no-icons hide any leftover .nav-menu__icon spans
   (used on the Voiceover Specialties pulldown — icons stay on the demo player only). */
.nav-menu__panel--no-icons .nav-menu__icon { display: none; }

/* Mobile-only "MORE" combined nav */
.site-nav__more { display: none; }

/* build #6: nav-menu desktop/mobile gates */
.nav-menu--mobile-only { display: none; }            /* hidden on desktop by default */

/* ----------- 5. FACE AREA ---------------------------------- */
/* Strip of actor portraits, top 100px hidden behind nav.
   build #10: container enlarged to 290px so BOTH the slid-down image
   (+50px) AND the lowered name labels fit fully inside the box. This lets
   us safely use overflow-x:auto on the strip (browsers force overflow-y to
   match, but with everything inside the box, nothing gets clipped). */
.face-area {
    position: relative;
    height: 290px;                         /* 100 hidden + 190 visible (image 200 - 100 hidden + label region) — still room for slide */
    margin-top: -100px;                    /* hide top 100px behind nav */
    z-index: var(--z-face);
    overflow: visible;
    background: transparent;
}
.face-strip {
    display: flex;
    gap: 0;
    justify-content: space-evenly;
    align-items: flex-start;
    padding: 0;
    height: 100%;
    /* build #10: restored overflow-x:auto for narrow-viewport horizontal
       scroll. Vertical clipping no longer matters because the strip is now
       290px tall — both slide-down (image + 50) and the lowered label
       (anchored INSIDE the box via top:) fit fully inside. */
    overflow-x: auto;
    overflow-y: visible;                   /* hint — browsers treat as auto when x is auto, that's fine now */
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.face-strip::-webkit-scrollbar { display: none; }

.face-actor {
    position: relative;
    flex: 0 0 150px;
    width: 150px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    text-align: center;
}
.face-actor__img {
    width: 150px;
    height: 200px;
    object-fit: cover;
    object-position: center top;
    transform-origin: center center;
    transform: rotate(0deg) translateY(0);
    filter: saturate(0.1);
    -webkit-filter: saturate(0.1);
    /* build #4: slide reduced from 2s → 1s; filter unchanged at 1s */
    transition: transform 1s ease-in-out, filter 1s ease-in-out, -webkit-filter 1s ease-in-out;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;                   /* clicks go to the button parent */
    /* build #5: ensure slid-down images appear ABOVE the main container
       (which sits as a later sibling and would otherwise paint over them) */
    position: relative;
    z-index: 2;
}
.face-actor.is-rotating .face-actor__img {
    /* wiggle animation — slightly longer */
    transition: transform 2s ease-in-out, filter 1s ease-in-out, -webkit-filter 1s ease-in-out;
}
/* build #4: full color only on hover OR the SELECTED actor.
   Other (non-selected) actors stay desaturated/grey. */
.face-actor:hover .face-actor__img,
.face-actor.is-hovering .face-actor__img,
.face-actor.is-selected .face-actor__img {
    filter: saturate(1);
    -webkit-filter: saturate(1);
}
/* Slide-down + slide values per build #7 */
.face-actor.is-hovering .face-actor__img {
    transform: rotate(0deg) translateY(50px);   /* build #7: slide 50px (was 75) */
}

.face-actor__label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* build #10: anchor by top: from inside the 290px face-actor box.
       Image is 200px tall (y=0..200), so top:208 puts the label ~8px below
       the image bottom — and on slide-down (image translates +50 to y=50..250)
       the label still sits at y=208 in the 290 box, untouched. */
    top: 208px;
    bottom: auto;
    width: 170px;
    text-align: center;
    pointer-events: none;
    /* build #10: NO transition by default. On mouseleave, opacity snaps back
       to 1 with no delay/fade. The fade-OUT on hover keeps its 1s via the
       .is-hovering rule below. */
    transition: none;
    line-height: 1.05;
    /* build #9: extra bottom padding so descenders (qgpj) in titles aren't clipped */
    padding-bottom: 6px;
    /* build #7: stack the label ABOVE the image so the names are visible at rest. */
    z-index: 3;
}
.face-actor__name {
    font-family: var(--font-h);
    font-size: 1.1rem;
    color: var(--c-blue-dark);
    display: block;
    /* build #9: bold + soft white glow so names stay readable on any backdrop */
    font-weight: 700;
    text-shadow:
        0 0 4px #fff,
        0 0 8px #fff,
        0 0 12px rgba(255,255,255,0.85);
}
.face-actor__title {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 700;
    font-size: .8rem;
    color: var(--c-muted);
    text-transform: lowercase;
    display: block;
}
/* build #10: hover applies the fade-out transition (1s) + opacity 0.
   On mouseleave, .is-hovering is removed → default rule (transition:none)
   takes over → opacity snaps back to 1 instantly. .is-returning is no
   longer needed for hide-during-slide (the slide is now < the fade was);
   keep the rule below as a no-op safety net for any legacy class adds. */
.face-actor.is-hovering .face-actor__label,
.face-actor:hover .face-actor__label {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.face-actor.is-returning .face-actor__label { opacity: 1; }

/* Selected indicator: build #10 — the solid orange under-bar is REMOVED.
   The dotted SVG curve (drawn from face → player by face-area.js) is the
   only visual selection cue, plus the actor's NAME turns orange. */
.face-actor.is-selected .face-actor__name {
    color: var(--c-orange);
}

/* Connector S-curve from selected face to player (desktop only).
   build #6: pushed BEHIND everything (z-index 0) so it never hides the title. */
.face-connector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;          /* below .main-container (z=1) — full body underlay */
}

/* Scroll arrows for narrow viewports */
.face-arrow {
    position: absolute;
    top: 60%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(14,76,204,.7);
    color: #fff;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-face-arrow);
    transition: background .15s, transform .15s;
}
.face-arrow:hover { background: var(--c-blue-dark); transform: scale(1.05); }
.face-arrow--left  { left: 6px; }
.face-arrow--right { right: 6px; }
.face-arrow.is-visible { display: flex; }

/* Mobile: hide face strip, show actor dropdown */
.face-mobile {
    display: none;
    padding: 14px 16px;
    background: var(--c-white);
}
.face-mobile select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--c-blue-light);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--c-text);
    background: var(--c-white);
    cursor: pointer;
}

/* ----------- 6. CONTENT CONTAINERS ------------------------- */
.main-container {
    max-width: var(--container-max);
    margin: 60px auto 40px;
    background: var(--c-white);
    border: 2px solid var(--c-white);
    border-radius: var(--container-radius);
    box-shadow: var(--container-shadow);
    overflow: hidden;
    /* build #5: ensure face-area (with z-index 100 + slid images) renders on top */
    position: relative;
    z-index: 1;
}

.main-row-title {
    height: 110px;
    /* Round 20: drop to 95% alpha so the orange S-curve SVG behind
       (z-index:0) shows through the title strip. */
    background: rgba(184, 219, 255, .92) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.main-row-title h1 { margin: 0; font-size: 2.4rem; }

.main-row-content {
    display: flex;
    align-items: stretch;
    gap: 0;
    /* Round 20: 95% alpha white so the SVG bleeds through into the
       body area too. */
    background: rgba(255, 255, 255, .92) !important;
    position: relative;
    z-index: 1;
}
/* build #6: 3-column layout (25 / 30 / 45) — desktop only */
.actor-section {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.voiceprofile-section {
    flex: 0 0 30%;                          /* build #6: was 35 */
    max-width: 30%;
    padding: 30px 24px;
    border-left: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
}
.player-section {
    flex: 0 0 45%;                          /* build #6: was 40 */
    max-width: 45%;
    /* build #11: per directive, restore the column padding so the player
       does NOT sit edge-to-edge in its column. The internal padding INSIDE
       .demo-player has been removed (in player.css) so the orange dp-header
       now sits flush against the 4px blue border. */
    padding: 30px 10px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-left: 1px solid var(--c-border);
}
/* build #6: player fills its column and gets a 4pt dark-blue frame to draw
   the eye.
   build #10: moved padding off .player-section onto here is unnecessary —
   the demo-player has no internal pad of its own, the dp-header sits flush
   against the border, and the rounded corners + border are the only frame. */
.player-section .demo-player {
    width: 100%;
    margin: 0;
    border: 4px solid var(--c-blue-dark);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(14, 76, 204, 0.18);
    overflow: hidden;                     /* build #11: clip the orange dp-header to the rounded frame */
}

/* Voice Profile (column 2) */
.voiceprofile-heading {
    font-family: var(--font-h);
    color: var(--c-blue-dark);
    font-size: 1.5rem;
    margin: 0 0 14px;
    border-bottom: 2px solid var(--c-blue-light);
    padding-bottom: 6px;
}

/* build #13: structured 5-category profile (Genders/Age Range, Tone & Emotion,
   Texture & Quality, Pitch & Range, Pace & Style). Rendered as a definition
   list with the category label above the value (regular body weight).
   Categories with no data are skipped in JS.
   build #14: category labels switched orange → dark blue; dashed border
   between categories and bullets removed for a cleaner unified column. */
.voiceprofile-categories {
    margin: 0 0 14px;
    padding: 0;
}
.voiceprofile-categories dt {
    font-family: var(--font-h);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--c-blue-dark);
    margin-top: 6px;
}
.voiceprofile-categories dt:first-child { margin-top: 0; }
.voiceprofile-categories dd {
    margin: 1px 0 0;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--c-text);
}
.voiceprofile-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.voiceprofile-list li {
    position: relative;
    padding: 6px 0 6px 22px;
    color: var(--c-text);
    font-size: 0.95rem;
    line-height: 1.45;
}
.voiceprofile-list li::before {
    content: '◆';
    position: absolute;
    left: 0; top: 6px;
    color: var(--c-orange);
    font-size: 0.78rem;
}
.voiceprofile-signature {
    font-family: 'Arial Narrow', 'Roboto Condensed', 'Liberation Sans Narrow', Arial, sans-serif;
    font-stretch: condensed;
    font-size: 0.92rem;
    color: var(--c-muted);
    line-height: 1.4;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--c-border);
}

/* build #11/16: Main Video Demo lived here as .voiceprofile-video.
   In build #16 it became its own self-contained widget (.main-demo)
   with full controls. See player.css → "MAIN DEMO WIDGET" block.
   These legacy rules are kept harmless as no-ops. */
.voiceprofile-video { margin-top: 8px; }
.voiceprofile-video__heading { display: none; }

/* Actor section: portrait + bio
   build #9: shortbio is now a SIBLING of the photo wrap (not nested inside),
   so the photo's aspect-ratio box no longer clips the bio. The bio's own
   auto-height grows the .actor-section column, which (because main-row-content
   uses align-items:stretch) grows the whole row, which pushes "Hire One. Or
   all of us." down naturally. The visual overlap with the bottom of the photo
   is achieved with a NEGATIVE top margin on .shortbio-overlay. */
.actor-portrait-wrap {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 2/3;
    border-radius: 20px;
    overflow: hidden;                        /* keep the photo's rounded corners crisp */
    background: #eef3f8;
}
.actor-portrait-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 20px;
}
.shortbio-overlay {
    position: relative;                      /* in flow — grows the column */
    width: 100%;
    max-width: 400px;
    margin: -75px auto 0;                    /* build #8/9: 75px overlap upward */
    height: auto;                            /* expand for any text */
    padding: 18px;
    background: rgba(255, 255, 255, 0.90);   /* build #12: 90% opacity */
    color: var(--c-text);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(14, 76, 204, 0.12);
    z-index: 2;                              /* sit over the photo's bottom slice */
}
.shortbio-overlay h3 {
    font-family: var(--font-h);
    color: var(--c-blue-dark);
    font-size: 1.6rem;
    font-weight: normal;
    margin: 0 0 6px 0;
}
.shortbio-overlay p {
    font-size: .82rem;
    line-height: 1.4;
    margin: 0 0 8px 0;
}
.shortbio-overlay .read-more {
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-orange);
}

.shortbio-mobile { display: none; }

/* Marquee of bullets above player */
.player-marquee {
    width: 100%;
    background: rgba(174,218,241,.18);
    color: var(--c-blue-dark);
    font-family: Verdana, sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: .92rem;
    padding: 8px 0;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 16px;
    border-radius: 8px;
}
.player-marquee__inner {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 28s linear infinite;
}
.player-marquee__inner span { padding: 0 28px; }
.player-marquee__inner span::before {
    content: '◆';
    color: var(--c-orange);
    margin-right: 10px;
    font-size: .8em;
    vertical-align: middle;
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ----------- 7. CLIENT LOGOS CAROUSEL ---------------------- */
.clients-section {
    max-width: var(--container-max);
    margin: 24px auto;
    padding: 24px 30px 36px;
    text-align: center;
}
.clients-section h2 { font-size: 1.6rem; }
.clients-track {
    display: flex;
    gap: 36px;
    overflow: hidden;
    align-items: center;
    padding: 18px 0;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients-track__inner {
    display: flex;
    gap: 36px;
    animation: clients-scroll 38s linear infinite;
}
/* build #12: tiles are now <figure> with logo image + filename caption.
   build #13: removed the box (background, border, padding, border-radius) —
   logos float free on the page background. */
.clients-track__inner > figure {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 140px;
    max-width: 240px;
}
.clients-track__inner > figure img {
    height: 130px;                       /* uniform display height — source files are 250px */
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}
.clients-track__inner > figure figcaption {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c-muted);
    text-align: center;
    line-height: 1.15;
    max-width: 220px;
    white-space: normal;
}
@keyframes clients-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ----------- 8. ARTICLE / PROSE ---------------------------- */
.article {
    max-width: 980px;
    margin: 24px auto;
    padding: 24px 30px;
    background: var(--c-white);
    border: 2px solid var(--c-white);
    border-radius: var(--container-radius);
    box-shadow: var(--container-shadow);
}
.article h2 { font-size: 1.7rem; margin-bottom: .5em; }
.article h3 { color: var(--c-blue-dark); margin-top: 1.2em; }

/* ----------- 9. FOOTER ------------------------------------- */
.site-footer {
    margin-top: 60px;
    background: var(--c-white);
    color: var(--c-text);
    /* build #10: zero out BOTTOM padding so the new .footer-bottom-band sits
       flush with the bottom of the page (no 24px gap below the gradient). */
    padding: 36px 24px 0;
    text-align: center;
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -8px 30px rgba(0,0,0,.06);
}
.site-footer__inner { max-width: 1100px; margin: 0 auto; }
.site-footer .footer-tag {
    color: var(--c-blue-dark);
    font-family: var(--font-h);
    font-size: 1.2rem;
    margin-bottom: 4px;
}
.site-footer p { margin: 6px 0; color: var(--c-muted); font-size: .9rem; }
.site-footer a { color: var(--c-blue-dark); margin: 0 6px; }
.site-footer .footer-row { margin: 8px 0; }
.site-footer .verse {
    color: var(--c-orange);
    font-style: italic;
    font-size: .85rem;
}

/* ----------- 10. UTILITY ----------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ----------- 11. RESPONSIVE -------------------------------- */
@media (max-width: 1500px) {
    .face-strip {
        justify-content: flex-start;
        gap: 14px;
        padding-left: 30px;
        padding-right: 60px;
    }
}

@media (max-width: 1260px) {
    .main-container {
        margin: 60px auto 40px;            /* build #4: keep ~100px gap to face area (was 0) */
        max-width: 100%;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
    .article { border-radius: 0; max-width: 100%; box-shadow: none; }
}

@media (max-width: 900px) {
    .site-nav__inner { gap: 6px; padding: 0 8px; justify-content: flex-start; flex-wrap: wrap; }
    .site-nav__logo  { transform: scale(.78); transform-origin: left center; flex: 0 0 220px; order: 1; }
    .nav-menu--svc, .nav-menu--more-explicit { display: none; }

    /* build #6/#7: hamburger NOT used — pulldowns visible inline in order
       LOGO • Voiceover Specialties • Actors • FAQ */
    .site-nav__more { display: none; }
    .site-nav__cta  { display: none; }                           /* Get a Quote moves to mobile buttons below face area */
    .site-nav__cta-stack { display: none; }                      /* Round 5: hide the whole CTA stack on mobile */
    /* Round 20: desktop-only "CrossTimber Answers" pulldown now SHOWN on mobile
       (as the FAQ accordion). */
    .nav-menu--desktop-only { display: block; }
    .nav-menu--mobile-only { display: inline-block; }            /* show "Actors" + "FAQ" pulldowns */

    /* Visible mobile pulldowns: build #7 — bigger toggles, set order */
    .site-nav .nav-menu[aria-label="Voiceover Specialties menu"] { order: 2; }
    .site-nav .nav-menu--actors                                  { order: 3; }
    .site-nav .nav-menu--faq                                     { order: 4; }

    .site-nav .nav-menu__toggle {
        font-size: 1.05rem;                                      /* build #7: was .9rem (too small) */
        padding: 12px 14px;
        font-weight: 700;
    }
}

@media (max-width: 760px) {
    :root { --nav-height: 130px; }
    /* Round 19: header now stacks Specialties + Actors below logo,
       so its height must grow naturally with content (not a fixed value). */
    .site-nav { height: auto; min-height: var(--nav-height); }
    .face-area { display: none; }
    .face-mobile { display: block; }

    /* build #9: keep main-row-content as a horizontal flex row so the actor
       photo (30%) sits NEXT TO the voice-profile bullets (70%). The player
       wraps to its own full-width row below. */
    .main-row-content {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .actor-section {
        flex: 0 0 30%;
        max-width: 30%;
        padding: 12px 8px 12px 12px;
    }
    .voiceprofile-section {
        flex: 0 0 70%;
        max-width: 70%;
        padding: 12px 12px 12px 8px;
        border-left: none;
        border-top: none;
    }
    .player-section {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 12px;
        border-left: none;
        border-top: 1px solid var(--c-border);
    }
    .player-section .demo-player { width: 100%; }

    /* Photo: keep its 2:3 aspect ratio so it scales with the 30% column. */
    .actor-portrait-wrap {
        max-width: 100%;
        height: auto;
        aspect-ratio: 2/3;
        max-height: none;
    }
    .actor-portrait-wrap img { height: 100%; }

    /* On mobile, hide the on-image bio (it's not needed; the actor name +
       bullets already do the work). The shortbio-mobile block, if present
       elsewhere, can flow below the row at full width.
       build #11: shortbio-mobile is now a real <section> in the markup
       between the player and the "Hire one" article. Style it to look
       like an info card so the user gets bio context after hearing demos. */
    .shortbio-overlay { display: none; }
    .shortbio-mobile {
        display: block;
        margin: 18px 12px 8px;
        padding: 14px 16px;
        background: #fff;
        border: 1px solid var(--c-border, #e2e8f0);
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,.04);
    }
    .shortbio-mobile h3 {
        font-family: var(--font-h);
        color: var(--c-blue-dark);
        margin: 0 0 6px;
        font-size: 1.3rem;
    }
    .shortbio-mobile .read-more {
        display: inline-block;
        margin-top: 6px;
        color: var(--c-orange);
        font-weight: 700;
        text-decoration: none;
    }
    .shortbio-mobile .read-more:hover { color: #cc3e0e; }

    /* build #9: reduce line-height ~10% to save vertical space. */
    .voiceprofile-list li { line-height: 1.3; }
    .voiceprofile-section p,
    .shortbio-mobile p { line-height: 1.3; }
    .voiceprofile-heading { font-size: 1.2rem; margin-bottom: 8px; }
    .voiceprofile-list li { padding: 4px 0 4px 20px; font-size: 0.88rem; }

    .main-row-title { height: 80px; }
    .main-row-title h1 { font-size: 1.6rem; }
    .site-nav__logo { flex: 0 0 220px; transform: scale(.7); transform-origin: left center; }

    /* build #9: face-actions — swap colors (audition=blue, quote=orange),
       remove the light-blue band bg, and remove the gap between the buttons
       and the Actor Name title strip below.
       build #11: per directive — Audition + Instant Quote buttons sit on a
       WHITE background, separate from the actor-name strip below. The white
       BG is a visual divider that pulls the buttons out of the title strip
       group and pushes them into their own zone. */
    .face-actions {
        background: #fff;
        margin: 0;
        padding: 14px 14px 14px;
        border-bottom: 1px solid var(--c-border, #e2e8f0);
    }
    .face-actions__btn--primary {
        background: var(--c-blue-dark);
        color: #fff;
    }
    .face-actions__btn--primary:hover {
        background: #0a3aa8;
    }
    .face-actions__btn--secondary {
        background: var(--c-orange);
        color: #fff;
    }
    .face-actions__btn--secondary:hover {
        background: #c33d0e;
    }
    /* zero out the spacing between the action buttons block and the next
       section (the "main-row-title" actor name strip). */
    .main-container { margin-top: 0 !important; }
}

/* build #6: medium screens — 2-col reflow at <1100px (col widths updated for 25/30/45) */
@media (max-width: 1100px) and (min-width: 761px) {
    .main-row-content { flex-wrap: wrap; }
    .actor-section { flex: 0 0 35%; max-width: 35%; }
    .voiceprofile-section { flex: 0 0 65%; max-width: 65%; border-left: 1px solid var(--c-border); }
    .player-section {
        flex: 0 0 100%;
        max-width: 100%;
        border-left: none;
        border-top: 1px solid var(--c-border);
        padding: 24px 10px;
    }
    .player-section .demo-player { width: 100%; max-width: 720px; }

    /* build #9: at <1100, save horizontal nav room by shortening
       "CrossTimber Answers" → "Answers" via the data-mobile span swap. */
    .nav-menu--desktop-only .nav-menu__label {
        font-size: 0;
    }
    .nav-menu--desktop-only .nav-menu__label::before {
        content: attr(data-mobile);
        font-size: 0.95rem;
        font-family: inherit;
        font-weight: inherit;
        color: inherit;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .site-nav__logo,
    .player-marquee__inner,
    .clients-track__inner { animation: none; }
    .face-actor__img { transition: none !important; }
}

/* ============================================================
   v3 FIXES — appended per build #3 corrections
   ------------------------------------------------------------
   • Larger actor names (face-actor__label) per "larger names + 5px margins"
   • Title-strip BULLET marquee bottom-aligned (replaces old player-marquee)
   • Footer nav-mirror columns + verse-link styling
   • Tooltip pill ("Just takes a minute!" on Get a Quote)
   • Pulldown gap-elimination (no hover gap, click-only)
   • SHORTBIO read-more, larger heading
   • Photo-button background images for face slots
   • Container expansion guarantees (no clipping)
   ============================================================ */

/* ============================================================
   build #4 ADDITIONS — face-tab, body-name, responsive tweaks
   ============================================================ */

/* Large "Load an Actor's demos" tab — replaces the face-strip ≤900px */
.face-tab {
    display: none;                  /* desktop: hidden */
    margin: 14px 14px 18px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.face-tab__btn {
    width: 100%;
    background: var(--c-blue-dark);
    color: #fff;
    border: none;
    padding: 18px 22px;
    font-family: var(--font-h);
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    letter-spacing: 0.3px;
    text-align: center;
}
.face-tab__btn:hover { background: #0a3aa8; }
.face-tab__arrow {
    font-size: 1rem;
    transition: transform .2s ease;
}
.face-tab__btn[aria-expanded="true"] .face-tab__arrow {
    transform: rotate(180deg);
}
.face-tab__panel {
    background: #fff;
    border-top: 2px solid var(--c-blue-light);
    padding: 8px 0;
    max-height: 60vh;
    overflow-y: auto;
}
.face-tab__panel a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    color: var(--c-text);
    font-size: 1.05rem;
    border-bottom: 1px solid var(--c-offwhite);
    text-decoration: none;
}
.face-tab__panel a:last-child { border-bottom: none; }
.face-tab__panel a:hover { background: var(--c-blue-light); color: var(--c-blue-dark); }

/* build #5: avatars get a 1px border */
.face-tab__panel img.face-tab__avatar,
.face-tab__panel img {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 44px;
    border: 1px solid var(--c-blue-dark);
    background: #fff;
}
.face-tab__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.face-tab__name {
    font-family: var(--font-h);
    font-size: 1.05rem;
    color: var(--c-blue-dark);
    font-weight: 700;
    line-height: 1.2;
}
/* Narrow font for vocal-signature line. Arial Narrow falls back to a
   stretched Arial via font-stretch when the family isn't installed. */
.face-tab__sig {
    font-family: 'Arial Narrow', 'Roboto Condensed', 'Liberation Sans Narrow', Arial, sans-serif;
    font-stretch: condensed;
    font-size: 0.84rem;
    color: var(--c-muted);
    line-height: 1.25;
    white-space: normal;
}

@media (max-width: 900px) {
    .face-area { display: none !important; }   /* hide the strip */
    .face-mobile { display: none; }            /* hide the older <select> */
    /* build #6: face-tab is gone — face-actions buttons render instead */
}

/* --- Larger actor names + spacing (face-area) ---
   build #9: removed `.face-actor__label { bottom: -2px }` override and
   `.face-area { height: 220px }` override so the build-#9 lowered-label
   positioning (-52px + 290px container) actually wins. */
.face-actor__label {
    margin-top: 5px;            /* 5px gap above label per directive */
    line-height: 1.15;
}
.face-actor__name {
    font-size: 1.35rem;          /* up from 1.1rem */
    letter-spacing: 0.3px;
}
.face-actor__title {
    font-size: 0.88rem;          /* up from 0.8rem */
}
.face-area {
    /* build #9: 50px container increase handled in primary rule above; only
       keep the 5px bottom pad here. */
    padding-bottom: 5px;
}

/* Photo-button images (provided by John in photobuttons.zip) replace generic actor crops */
.face-actor__img {
    background: #eef3f8;
}

/* --- Pulldown: kill the visible gap, click-only by default --- */
.nav-menu__panel {
    top: 100%;                   /* flush with toggle, no 8px gap */
    transform: translateX(-50%) translateY(0);
    margin-top: 0;
    /* keep mouse-bridge so cursor can travel from toggle into panel */
}
.nav-menu__panel::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -10px;
    height: 10px;
    background: transparent;     /* invisible bridge */
}
.nav-menu.is-open .nav-menu__panel {
    transform: translateX(-50%) translateY(0);
}
/* Per directive: click-only on the toggle. Hover-open is removed in JS. */

/* --- "Get a Quote" tooltip pill --- */
.fvo-tooltip {
    position: fixed;
    z-index: 12000;
    background: var(--c-blue-dark);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    transform: translate(-50%, calc(-100% - 10px));
    white-space: nowrap;
}
.fvo-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--c-blue-dark);
    border-bottom: 0;
}

/* --- SHORTBIO: full text + larger Read more
   build #9: removed `max-height: 60%; overflow: hidden;` — those clipped
   the bio inside the photo box. Now the bio grows freely (it's a sibling
   of the photo wrap, not nested). */
.shortbio-overlay {
    padding: 18px;
    background: rgba(255, 255, 255, 0.90);   /* build #12: 90% opacity */
    max-height: none;
    overflow: visible;
}
.shortbio-overlay h3 { font-size: 1.7rem; }
.shortbio-overlay p {
    font-size: 0.86rem;
    line-height: 1.45;
    margin-bottom: 6px;
}
.shortbio-overlay .read-more {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-orange);
    text-decoration: underline;
    text-decoration-color: rgba(243,83,27,.5);
}
.shortbio-overlay .read-more:hover { color: #cc3e0e; }

/* --- TITLE-STRIP MARQUEE (light-blue band, bottom-aligned) --- */
.main-row-title {
    height: 110px;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    padding: 18px 24px 0;
}
.main-row-title h1 {
    margin-bottom: 0;
    /* build #4: actor name in body — bumped ~6px taller */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.05;
}
.main-actor-name {
    font-size: 2.8rem;                 /* ~+6px from 2.4rem */
    font-family: var(--font-h);
    color: var(--c-blue-dark);
    line-height: 1;
}
.main-actor-sub {
    /* build #9: switched to Verdana bold italic lowercase — matching the face-area
       sub-titles. Was an italic 600-weight unspecified body font.
       build #11: subtitle now displays actor.vocalSignature which is a long
       sentence (e.g. "Human instrument: Versatile, Expressive, Female 5 to
       95, male 15-25, Specializes in Caricature."). Removed lowercase
       transform, kept smaller font, allow line wrapping. */
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 700;
    color: var(--c-muted);
    margin-top: 4px;
    letter-spacing: 0.2px;
    line-height: 1.25;
    max-width: 100%;
    white-space: normal;
}
.title-marquee {
    position: absolute;
    left: 0; right: 0;
    bottom: 6px;                       /* aligned to bottom of strip */
    height: 28px;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
    display: flex;
    align-items: flex-end;             /* bottom-aligned text inside band */
}
.title-marquee__inner {
    display: inline-block;
    /* build #4: NO padding-left so the duplicated track loops seamlessly */
    padding-left: 0;
    animation: title-marquee 80s linear infinite;
    color: #36454f;                    /* charcoal grey (was blue-dark) */
    font-family: Verdana, sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1;
    will-change: transform;
}
.title-marquee__inner span { padding: 0 22px; display: inline-block; }
.title-marquee__inner span::before {
    content: '◆';
    color: #36454f;                    /* charcoal grey bullets (was orange) */
    margin-right: 8px;
    font-size: 0.72em;
    vertical-align: middle;
}
@keyframes title-marquee {
    0%   { transform: translateX(0); }
    /* content is duplicated → translating -50% loops seamlessly */
    100% { transform: translateX(-50%); }
}

/* The OLD .player-marquee is no longer rendered in markup; keep CSS harmless */

/* --- FOOTER: nav mirror + verse link --- */
.site-footer {
    background: var(--c-offwhite);
    /* build #10: zero out BOTTOM padding so the .footer-bottom-band hugs the
       bottom of the screen with no ~15px gap below it. The band has its own
       internal vertical pad. */
    padding: 28px 24px 0;
    min-height: 150px;
}
.footer-nav-mirror {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 18px;
    text-align: left;
}
.footer-nav-col {
    flex: 0 1 200px;
    min-width: 160px;
}
/* build #6/#8: actors col matches Specialties col layout but has internal 2-col grid */
.footer-nav-col[data-render="actors-flat"] {
    flex: 0 1 240px;
    min-width: 200px;
}
.footer-nav-col h4 {
    font-family: var(--font-h);
    color: var(--c-blue-dark);
    font-size: 1.05rem;
    margin: 0 0 6px 0;
    border-bottom: 1px solid var(--c-blue-light);
    padding-bottom: 4px;
}
.footer-nav-col a {
    display: block;
    font-size: 0.86rem;
    color: var(--c-text);
    padding: 3px 0;
    margin: 0;
}
.footer-nav-col a:hover { color: var(--c-blue-dark); }

/* build #5: footer "Dehnart Actors:" — inline bullet-separated first names */
.footer-actors-inline {
    display: block;
    line-height: 1.7;
    font-size: 0.92rem;
}
.footer-actors-inline a {
    display: inline;
    padding: 0;
    color: var(--c-blue-dark);
    font-weight: 600;
}
.footer-actors-inline a:hover { color: var(--c-orange); text-decoration: underline; }
.footer-actors-sep {
    display: inline;
    color: var(--c-orange);
    margin: 0 4px;
    font-weight: 700;
}

/* build #8: footer Voice Actors — Adults / Children side-by-side sub-columns,
   Specialty (Animals & Creatures) rendered full-width below. */
.footer-actors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}
.footer-actors-subcol {
    margin-bottom: 4px;
}
.footer-actors-subcol--full {
    grid-column: 1 / -1;                  /* spans both subcolumns when used */
}
.footer-actors-subhead {
    font-family: var(--font-h);
    font-size: 0.78rem;
    color: var(--c-orange);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 4px 0 2px;
    font-weight: 700;
}
.footer-actors-subcol a {
    display: block;
    padding: 1px 0;
    font-size: 0.86rem;
    color: #475a6c;
    font-weight: 500;
    /* build #17: dotted underline below actor names + "Animals & Creatures"
       so visitors can see they're clickable links. */
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(71, 90, 108, 0.55);
}
.footer-actors-subcol a:hover {
    color: var(--c-blue-dark);
    text-decoration: underline solid;
    text-decoration-color: currentColor;
}

/* build #7 leftover (kept harmless for any cached markup) */
.footer-actors-grouped { display: block; }
.footer-actors-subgroup { margin-bottom: 8px; }
.footer-actors-subgroup a {
    display: block;
    padding: 1px 0;
    font-size: 0.86rem;
    color: #475a6c;
    font-weight: 500;
}
.footer-actors-subgroup a:hover {
    color: var(--c-blue-dark);
    text-decoration: underline;
}
.site-footer .footer-tag {
    color: var(--c-blue-dark);
    font-family: var(--font-h);
    font-size: 1.4rem;
    margin: 18px 0 8px;
    text-align: center;
}
.site-footer .footer-meta {
    text-align: center;
    color: var(--c-muted);
    font-size: 0.85rem;
}
.site-footer .footer-meta a { color: var(--c-blue-dark); margin: 0 4px; }
.site-footer .footer-meta a.verse { color: var(--c-orange); font-style: italic; }
.site-footer .footer-links {
    text-align: center;
    color: var(--c-muted);
    font-size: 0.85rem;
}
.site-footer .footer-links a { color: var(--c-blue-dark); }

/* --- Container: ensure max-height grows with content --- */
.main-container {
    max-height: none;            /* no clipping */
}
.player-section,
.actor-section {
    height: auto;
    align-items: stretch;
}

/* --- build #4: center actor portrait, shortbio = 90% column width --- */
.actor-section {
    align-items: center;          /* center the portrait wrap horizontally */
}
.actor-portrait-wrap {
    margin: 0 auto;               /* explicit horizontal centering */
}
.shortbio-overlay {
    /* 90% of the available wrap width, centered */
    left: 5%;
    right: 5%;
}

/* --- Mobile: actors pulldown only when face area hidden --- */
@media (max-width: 760px) {
    .face-area { display: none; }
    .face-mobile { display: block; }
    .nav-menu--actors .nav-menu__toggle { display: inline-flex; }
}
@media (min-width: 761px) {
    /* On desktop, keep face-strip; pulldown remains accessible (per spec) */
}

/* --- DP header (actor name above transport)
   build #9: subtitle removed from markup. Header now a solid bar with
   white actor name. Name format: "{firstName} Demos" (set by player.js).
   build #10: header background switched from blue → orange per directive. */
.dp-header {
    text-align: center;
    margin: 0;                                /* build #11: no margin — header reaches the blue border */
    padding: 10px 14px;
    background: var(--c-orange);              /* build #10: was --c-blue-dark */
    border-radius: 0;                         /* build #11: parent clips with overflow:hidden */
    border-bottom: 0;
}
.dp-actor-name {
    font-family: var(--font-h);
    color: #fff;                              /* white on orange */
    font-size: 1.6rem;
    margin: 0;
    line-height: 1.1;
}
.dp-actor-sub {
    /* build #9: subtitle removed from layout — keep the rule for legacy markup,
       but hide it. */
    display: none;
}

/* --- "Play All audio demos" + Next-actor slide-down --- */
/* Round 12: long oval → rounded-corner button.
   Reduced min-width and increased corner radius gives a button-shaped
   look rather than a long pill. */
.dp-btn--playall {
    background: var(--c-blue-dark);
    color: #fff;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.92rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    width: auto;
    min-width: 0;
    height: auto;
    line-height: 1.15;
    white-space: nowrap;
    letter-spacing: 0.2px;
    margin-left: auto;
}
.dp-btn--playall:hover { background: #0a3aa8; }
.demo-player.is-playall .dp-btn--playall { background: var(--c-orange); }

.dp-nextactor {
    overflow: hidden;
    background: var(--c-blue-light);
    border-radius: 10px;
    margin-top: 14px;
    padding: 0 14px;
    max-height: 0;
    transition: max-height 0.5s ease, padding 0.5s ease;
}
.dp-nextactor.is-open {
    padding: 12px 14px;
    max-height: 200px;
}
.dp-nextactor p {
    margin: 0 0 8px;
    color: var(--c-blue-dark);
    font-weight: 700;
    text-align: center;
}
.dp-nextactor__buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* --- Face connector SVG (build #6: dropped behind everything; z-index 0) --- */
.face-connector {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    z-index: 0;                          /* build #6: behind .main-container (z=1) */
    width: 100%;
    height: 0;                           /* JS sets concrete height */
    top: 0; left: 0;
}
.face-connector path {
    fill: none;
    stroke: var(--c-orange);
    stroke-width: 4;                     /* build #6: was 2 */
    stroke-dasharray: 8 5;
    opacity: 0.65;
}
@media (max-width: 1100px) { .face-connector { display: none; } }

/* build #6: connector now fully behind body, so title strip back to fully opaque. */
.main-row-title {
    position: relative;
    z-index: 5;
    background: var(--c-blue-light);       /* opaque again */
}


/* ============================================================
   build #6 — face-actions (mobile-only buttons replacing face-tab)
   ============================================================ */
.face-actions {
    display: none;                          /* hidden on desktop; shown ≤900px */
    gap: 12px;
    padding: 16px 14px;
    background: var(--c-blue-light);
    justify-content: center;
    flex-wrap: wrap;
}
.face-actions__btn {
    flex: 1 1 220px;
    max-width: 360px;
    text-align: center;
    padding: 16px 18px;
    border-radius: 12px;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    line-height: 1.15;
    box-shadow: 0 3px 10px rgba(14, 76, 204, 0.18);
    transition: transform .15s, box-shadow .15s, background .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.face-actions__btn--primary {
    background: var(--c-orange);
    color: #fff;
}
.face-actions__btn--primary:hover {
    background: #c33d0e;
    transform: translateY(-2px);
}
.face-actions__btn--secondary {
    background: var(--c-blue-dark);
    color: #fff;
}
.face-actions__btn--secondary:hover {
    background: #0a3aa8;
    transform: translateY(-2px);
}
.face-actions__icon { font-size: 1.25em; }

@media (max-width: 900px) {
    .face-actions { display: flex; }        /* MOBILE: show the two-button block */
}

/* build #6: hide the old face-tab if any leftover markup is present */
.face-tab { display: none !important; }

/* ============================================================
   build #7 — specialty rollout gating
   ------------------------------------------------------------
   Audiobooks, Animal Vocalizations, Singing aren't ready yet.
   Mark their <a> with .specialty--coming and they collapse to
   nothing (display:none) so they don't disturb spacing. Flip
   this rule off (or remove the class) to launch them.
   ============================================================ */
.specialty--coming { display: none !important; }

/* ============================================================
   build #7 — mobile Actors pulldown rich rendering
   ------------------------------------------------------------
   • Adults / Children / Specialty group headings
   • Face thumbnails 2× the previous size (54px), circular,
     1px blue border
   • Tight padding/line spacing so the menu doesn't get tall
   ============================================================ */
.nav-menu__panel--actors-rich {
    /* override the default pulldown panel sizing on mobile */
    min-width: 240px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px 6px;
}
.nav-actors__head {
    font-family: var(--font-h);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-orange);
    padding: 6px 10px 2px;
    margin-top: 6px;
    border-top: 1px solid var(--c-border);
    font-weight: 700;
}
.nav-actors__head:first-child { border-top: none; margin-top: 0; }
.nav-actors__row {
    display: flex !important;            /* override default panel <a> block */
    align-items: center;
    gap: 12px;
    padding: 4px 10px !important;        /* build #7: tight line spacing */
    text-decoration: none;
    color: var(--c-text);
    border-bottom: none !important;
}
.nav-actors__row:hover {
    background: var(--c-blue-light);
}
.nav-actors__avatar {
    width: 54px;                         /* build #7: 2× the previous ~26px */
    height: 54px;
    border-radius: 50%;                  /* circular */
    border: 1px solid var(--c-blue-dark);/* 1px blue */
    object-fit: cover;
    object-position: center top;
    flex: 0 0 54px;
    background: #eef3f8;
}
.nav-actors__text {
    font-family: var(--font-h);
    font-size: 1.2rem;                   /* Round 16: +20% size */
    font-weight: 700;
    color: var(--c-blue-dark);
    line-height: 1.1;
}

/* build #7: small descriptive subtext inside specialty links */
.nav-menu__panel a small,
.footer-nav-col a small {
    display: block;
    font-size: 0.78em;
    color: var(--c-muted);
    font-weight: 400;
    margin-top: 1px;
    line-height: 1.15;
}

/* build #8: footer column divider (used in "Our Services" between owned-services and CrossTimber sister-services) */
.footer-nav-col__divider {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 8px 0;
    width: 100%;
}

/* build #8: bolden the primary mobile-action button "Free Custom Audition" */
.face-actions__btn--primary {
    font-weight: 800 !important;
    letter-spacing: 0.3px;
}

/* ============================================================
   build #8 — wider Voiceover Specialties dropdown
   ------------------------------------------------------------
   Subtitle <small> renders inline (not block) on the dropdown
   so each item fits on one line. Width opens up to ~440px.
   ============================================================ */
.nav-menu__panel--wide {
    min-width: 440px;
    max-width: 520px;
    white-space: nowrap;
}
.nav-menu__panel--wide a {
    white-space: nowrap;
}
.nav-menu__panel--wide a small {
    display: inline !important;          /* override the build #7 block rule */
    margin-left: 8px;
    margin-top: 0;
    font-size: 0.78em;
    color: var(--c-muted);
    font-weight: 400;
}

/* ============================================================
   build #9 — at the <760px breakpoint, swap pulldown labels using a
   span wrapper (NOT font-size:0 on the whole button — that nuked the
   ::after chevron and made the toggle look like a flat "button").

   HTML pattern:
     <button class="nav-menu__toggle">
       <span class="nav-menu__label" data-mobile="VO Specialties">
         Voiceover Specialties
       </span>
     </button>

   At <760, hide the inner text and inject the data-mobile value via ::before.
   The button + its ::after chevron are untouched, so it still LOOKS and
   BEHAVES like a pulldown.
   ============================================================ */
@media (max-width: 760px) {
    .nav-menu__label {
        font-size: 0;                      /* hide the desktop label text */
    }
    .nav-menu__label::before {
        content: attr(data-mobile);
        font-size: 1rem;                   /* match the toggle's natural size */
        font-family: inherit;
        font-weight: inherit;
        color: inherit;
    }
    /* mobile dropdown: the wide+nowrap rules from desktop would push it past
       the viewport, so override at <761 */
    .nav-menu--specialties .nav-menu__panel--wide {
        min-width: 240px;
        max-width: calc(100vw - 24px);
        white-space: normal;
    }
    .nav-menu--specialties .nav-menu__panel--wide a { white-space: normal; }
    .nav-menu--specialties .nav-menu__panel--wide a small {
        display: block !important;
        margin-left: 0;
    }
}

/* build #8: scrolling bullet marquee removed from markup; hide any leftover */
.title-marquee { display: none !important; }

/* ============================================================
   build #9 — FOOTER bottom band
   "Real voices. Real Family." + meta + legal-links wrapped in a
   subtle horizontal-gradient band with a 1px grey top border. Body
   text inside the band is darker blue; the verse reference stays
   orange.

   build #10 updates:
     • Band moved OUT of .site-footer__inner so it spans the FULL
       screen width.
     • The 24px top margin (gap above the band) ZEROED.
     • familyVO.com link → orange.
     • CrossTimber link removed from legal-links (we don't own
       crosstimber.com, no link to that domain anywhere on the site).
   ============================================================ */
.footer-bottom-band {
    margin: 0 -24px;                            /* build #10: negative side margins
                                                   escape .site-footer's 24px h-padding
                                                   so the band reaches BOTH screen edges */
    padding: 16px 12px 18px;
    border-top: 1px solid #c8cdd2;
    background: linear-gradient(
        to right,
        #d6dadd 0%,
        #ffffff 50%,
        #d6dadd 100%
    );
    width: calc(100% + 48px);                   /* match the negative side margins */
}
.footer-bottom-band__inner {
    /* Keep the TEXT centered + readable on wide screens, even though the
       gradient itself spans edge-to-edge. */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}
.site-footer .footer-bottom-band .footer-tag {
    color: var(--c-blue-dark);                /* keep the headline blue */
    font-family: var(--font-h);
    font-size: 1.4rem;
    margin: 0 0 8px;
    text-align: center;
}
.site-footer .footer-bottom-band .footer-meta,
.site-footer .footer-bottom-band .footer-links {
    color: #1f3a78;                            /* darker blue (was --c-muted grey) */
}
.site-footer .footer-bottom-band .footer-meta a,
.site-footer .footer-bottom-band .footer-links a {
    color: #1f3a78;                            /* darker-blue links inside the band */
}
.site-footer .footer-bottom-band .footer-meta a:hover,
.site-footer .footer-bottom-band .footer-links a:hover {
    color: var(--c-blue-dark);
    text-decoration: underline;
}
.site-footer .footer-bottom-band .footer-meta a.verse {
    color: var(--c-orange);                    /* reference STAYS orange */
    font-style: italic;
}
.site-footer .footer-bottom-band .footer-meta a.footer-brand-link {
    color: var(--c-orange);                    /* build #10: familyVO.com → orange */
    font-weight: 700;
}

/* ============================================================
   build #10 — Fullscreen overlay button on video preview
   ============================================================ */
.dp-video-wrap {
    position: relative;                           /* anchor the overlay button */
}
.dp-video-fs-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 36px;
    height: 36px;
    border: none;
    display: none;                                /* shown only when in video mode */
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: none;                                /* show only when video loaded */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: background .15s, transform .15s;
}
.dp-video-fs-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.06);
}
/* show the overlay button only when the player is in video mode
   build #11: also handle case where the wrap lives outside .demo-player
   (relocated to column 2 — toggles is-video on the wrap itself). */
.demo-player.is-video .dp-video-fs-btn,
.dp-video-wrap.is-video .dp-video-fs-btn {
    display: inline-flex;
}

/* ============================================================
   FOOTER — Bible verse tooltip (Round 2 feedback)
   Replaces the old <a class="verse"> link. The new structure:
     <span class="verse verse--tip" tabindex="0">
       Psalm 19:1-4
       <span class="verse-tooltip">...</span>
     </span>
   ============================================================ */
.site-footer .verse--tip {
    position: relative;
    cursor: help;
    color: var(--c-orange, #f3531b);
    font-style: italic;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 1px;
}
.site-footer .verse--tip:focus { outline: 2px solid var(--c-blue, #aedaf1); outline-offset: 2px; }

.site-footer .verse-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: min(360px, 88vw);
    background: #ffffff;
    color: #1c1c1c;
    border: 1px solid #d6d6d6;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    font-style: normal;
    font-size: 13.5px;
    line-height: 1.55;
    text-align: left;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}
.site-footer .verse-tooltip::after {
    /* arrow pointing down toward the text */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #ffffff;
    filter: drop-shadow(0 1px 0 #d6d6d6);
}
.site-footer .verse--tip:hover .verse-tooltip,
.site-footer .verse--tip:focus .verse-tooltip,
.site-footer .verse--tip:focus-within .verse-tooltip,
.site-footer .verse--tip.is-open .verse-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* Click-driven mode: only `.is-open` opens the tooltip. Hover/focus
   are now decorative-only (cursor change). */
.site-footer .verse--tip:hover .verse-tooltip,
.site-footer .verse--tip:focus .verse-tooltip,
.site-footer .verse--tip:focus-within .verse-tooltip {
    /* Override the rule above when not explicitly opened */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
}
.site-footer .verse--tip.is-open .verse-tooltip {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}
.site-footer .verse-tooltip__text {
    display: block;
    margin-bottom: 6px;
}
.site-footer .verse-tooltip__cite {
    display: block;
    text-align: right;
    color: #666;
    font-size: 12px;
}
.site-footer .verse-voice {
    color: var(--c-orange, #f3531b);
    font-style: normal;
    font-weight: 700;
    background: rgba(243, 83, 27, 0.10);
    padding: 0 3px;
    border-radius: 3px;
}

/* On very small screens, anchor the tooltip to the right side so it doesn't clip */
@media (max-width: 480px) {
    .site-footer .verse-tooltip {
        left: auto;
        right: 0;
        transform: translateY(4px);
        width: 86vw;
    }
    .site-footer .verse--tip:hover .verse-tooltip,
    .site-footer .verse--tip:focus .verse-tooltip,
    .site-footer .verse--tip:focus-within .verse-tooltip {
        transform: translateY(4px);
    }
    .site-footer .verse--tip.is-open .verse-tooltip {
        transform: translateY(0) !important;
    }
    .site-footer .verse-tooltip::after {
        left: auto;
        right: 24px;
        transform: none;
    }
}

/* =============================================================
   ROUND 2 FEEDBACK — Mobile rework (≤760px) and global fixes
   ============================================================= */

/* ---- Global: kill tiny horizontal scroll bug on Chrome Android ---- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;        /* disables horizontal touch scroll */
    -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

/* ---- ALL VERSIONS: Voiceover Clients carousel — allow swipe/scroll ----
   The marquee already auto-scrolls. Make it ALSO swipeable: turn
   overflow-x:hidden → auto, give it pause-on-touch via CSS, and allow
   pointer/touch dragging by exposing scroll-snap natively. */
.clients-track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar (Firefox) */
    scrollbar-width: none;
    /* Hide scrollbar (IE / old Edge) */
    -ms-overflow-style: none;
}
/* Hide scrollbar (WebKit / Blink: Chrome, Safari, new Edge) */
.clients-track::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.clients-track::-webkit-scrollbar-thumb {
    background: transparent;
}
.clients-track:hover .clients-track__inner,
.clients-track:focus-within .clients-track__inner {
    animation-play-state: paused;
}
/* When the user is touching/scrolling the strip, pause the marquee */
.clients-track.is-dragging .clients-track__inner {
    animation-play-state: paused;
}

/* ---- MOBILE (≤760px): header repositioning ---- */
@media (max-width: 760px) {
    body { margin: 0 !important; padding-top: 0 !important; }

    /* Header: no top margin, contained, blue line drawn at logo midline */
    .site-nav {
        margin-top: 0;
        padding-top: 0;
    }
    .site-nav__inner {
        padding: 0 8px !important;
        gap: 8px;
        align-items: center;
        flex-wrap: nowrap;                  /* keep logo + Specialties on ONE row */
    }
    /* Blue decorative line: position it at the vertical CENTER of the logo
       (logo container 160px tall, scaled .7 → 112px, midline ~56px)
       Round 14: HIDE the horizontal blue line at <760 viewports. */
    .site-nav::before {
        display: none;
    }

    /* Logo: pinned top-left, no margins, slightly smaller */
    .site-nav__logo {
        margin-top: 0 !important;
        flex: 0 0 200px;
        transform: scale(.7);
        transform-origin: left top;          /* anchor top-left so no top gap */
    }

    /* Round 19: SHOW the Actors pulldown on mobile, stacked BELOW Specialties.
       (Previously hidden — user wants both pulldowns accessible from header.) */
    .site-nav .nav-menu--actors { display: block !important; }
    /* Round 20: SHOW the FAQ/Answers pulldown on mobile too (third row).
       The white-on-blue inline FAQ button below header is removed in HTML. */
    .site-nav .nav-menu--faq,
    .site-nav .nav-menu--desktop-only { display: block !important; }

    /* Round 20: hide the old FAQ link in the mobile-actions-row
       (it now lives in the header as a pulldown). */
    .mobile-actions-row .ma-btn--faq { display: none !important; }

    /* Round 19: header inner allows wrapping so Specialties + Actors stack
       vertically below the logo on a second row. */
    .site-nav__inner { flex-wrap: wrap !important; }

    /* Specialties pulldown — first stacked row, full width */
    .site-nav .nav-menu[aria-label="Voiceover Specialties menu"] {
        order: 2;
        flex: 1 1 100%;
        margin-left: 0;
        width: 100%;
    }
    /* Actors pulldown — second stacked row, full width, BELOW Specialties */
    .site-nav .nav-menu--actors {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
    }
    /* FAQ/Answers pulldown — third stacked row, full width */
    .site-nav .nav-menu--faq,
    .site-nav .nav-menu--desktop-only {
        order: 4;
        flex: 1 1 100%;
        width: 100%;
    }
    /* Make all three toggles full-width and visually stacked.
       Round 20: white background (no white-on-blue) for FAQ. */
    .site-nav .nav-menu[aria-label="Voiceover Specialties menu"] > .nav-menu__toggle,
    .site-nav .nav-menu--actors > .nav-menu__toggle,
    .site-nav .nav-menu--faq > .nav-menu__toggle,
    .site-nav .nav-menu--desktop-only > .nav-menu__toggle {
        width: 100%;
        text-align: left;
        padding: 12px 14px;
        font-size: 1.05rem;
        font-weight: 700;
        background: #fff;
        color: var(--c-blue-dark);
        border: none;
        border-bottom: 1px solid #e8eef5;
    }
    .site-nav .nav-menu--mobile-only,
    .site-nav .nav-menu--faq { order: 4; }

    /* Round 20: SHOW the desktop "Answers" pulldown on mobile too
       (now serves as the FAQ accordion). Hide hamburger + inline Instant Quote. */
    .site-nav .nav-menu--desktop-only { display: block !important; }
    .site-nav__more { display: none !important; }
    .site-nav__cta  { display: none !important; }

    /* Body content starts immediately under header */
    main, .main-container, .sp-pitch { margin-top: 0 !important; }
}

/* ---- MOBILE: Specialties + Actors as full-width sliding ACCORDION ----
   Round 19: panels flow IN-LINE (position: static) so opening pushes
   page content DOWN rather than overlaying it. */
@media (max-width: 760px) {
    .site-nav .nav-menu {
        position: static;                    /* allow panel to flow normally */
    }
    .site-nav .nav-menu__panel {
        position: static;                    /* Round 19: was absolute — now pushes content down */
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
        max-height: 0;
        overflow: hidden;
        background: #fff;
        border-radius: 0;
        border-top: 2px solid var(--c-blue-light);
        box-shadow: inset 0 4px 6px rgba(0,0,0,0.04);
        transform: none;
        transition: max-height 280ms ease, padding 200ms ease;
        padding: 0 14px;
        display: block;
        opacity: 1;
        pointer-events: none;
    }
    .site-nav .nav-menu.is-open .nav-menu__panel {
        max-height: 70vh;
        padding: 12px 14px;
        pointer-events: auto;
        overflow-y: auto;
    }
    .site-nav .nav-menu__panel a {
        display: block;
        padding: 12px 8px;
        border-bottom: 1px solid #f0f0f0;
        text-decoration: none;
        color: var(--c-blue-dark);
        font-weight: 600;
        font-size: 1rem;
    }
    .site-nav .nav-menu__panel a:last-child { border-bottom: none; }
    .site-nav .nav-menu__panel a:hover,
    .site-nav .nav-menu__panel a:focus { background: #f6faff; }
}

/* ---- MOBILE: Actor pulldown selectors ("See another actor" / "Hear another actor") ---- */
.actor-switcher {
    display: none;                          /* desktop hides; mobile shows */
}
/* Round 14: extend pulldown breakpoint to <900 so it appears whenever
   the face-area is hidden (which already happens at <900). */
@media (max-width: 900px) {
    .actor-switcher {
        display: block;
        margin: 10px 12px;
        position: relative;
    }
    .actor-switcher select {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        padding: 12px 40px 12px 14px;
        border: 2px solid var(--c-blue-light, #aedaf1);
        border-radius: 22px;
        background: #fff;
        color: var(--c-blue-dark, #0e4ccc);
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%230e4ccc' d='M3 5l4 4 4-4z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 14px 14px;
    }
    .actor-switcher--inplayer {
        margin: 0 0 10px;                   /* sits at top of player */
    }
    .actor-switcher select:focus {
        outline: 2px solid var(--c-blue-dark, #0e4ccc);
        outline-offset: 1px;
    }
    /* Round 14: hide the native select once the custom pulldown is built */
    .actor-switcher .actor-pull__sr-select {
        position: absolute !important;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        opacity: 0;
        pointer-events: none;
    }
    /* Round 14: Custom face-icon pulldown for actor switcher */
    .actor-switcher .actor-pull {
        position: relative;
        width: 100%;
    }
    .actor-switcher .actor-pull__trigger {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 10px;
        border: 2px solid var(--c-blue-dark, #0e4ccc);
        background: #fff;
        color: var(--c-blue-dark, #0e4ccc);
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        text-align: left;
        line-height: 1.2;
        min-height: 44px;
    }
    .actor-switcher .actor-pull__trigger:hover { background: #f0f4fc; }
    .actor-switcher .actor-pull__avatar {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #eef1f6;
        background-size: cover;
        background-position: center;
        border: 1px solid #d6dbe6;
    }
    .actor-switcher .actor-pull__label { flex: 1 1 auto; }
    .actor-switcher .actor-pull__chev {
        flex: 0 0 auto;
        font-size: 0.95rem;
        transition: transform .15s;
    }
    .actor-switcher .actor-pull.is-open .actor-pull__chev { transform: rotate(180deg); }
    .actor-switcher .actor-pull__menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid var(--c-blue-dark, #0e4ccc);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(14,42,120,.18);
        z-index: 60;
        padding: 6px 0;
        max-height: 60vh;
        overflow-y: auto;
    }
    .actor-switcher .actor-pull__item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        border: none;
        background: transparent;
        cursor: pointer;
        text-align: left;
        color: #1a2540;
    }
    .actor-switcher .actor-pull__item:hover { background: #f0f4fc; }
    .actor-switcher .actor-pull__item-img {
        flex: 0 0 36px;
        width: 36px; height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid #d6dbe6;
        background: #eef1f6;
    }
    .actor-switcher .actor-pull__item-text {
        display: flex; flex-direction: column;
        line-height: 1.2;
    }
    .actor-switcher .actor-pull__item-text strong {
        color: var(--c-blue-dark, #0e4ccc);
        font-weight: 700;
        font-size: 0.95rem;
    }
    .actor-switcher .actor-pull__item-text small {
        color: #6a7385;
        font-size: 0.78rem;
    }
}

/* ---- MOBILE: Below-header buttons row (Instant Quote / Free Audition / FAQ) ---- */
.mobile-actions-row { display: none; }
@media (max-width: 760px) {
    .mobile-actions-row {
        display: flex;
        gap: 8px;
        padding: 10px 10px 12px;
        background: #fff;
        flex-wrap: nowrap;
    }
    .mobile-actions-row .ma-btn {
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 8px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.95rem;
        line-height: 1.1;
        border: none;
        cursor: pointer;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-actions-row .ma-btn--quote {
        background: var(--c-orange, #f3531b);
        color: #fff;
        font-family: var(--font-h);          /* Rise of Kingdom */
        font-size: 1.05rem;
        flex: 1.2 1 0;                       /* slightly bigger emphasis */
    }
    .mobile-actions-row .ma-btn--audition,
    .mobile-actions-row .ma-btn--faq {
        background: var(--c-blue-dark, #0e4ccc);
        color: #fff;
    }
    /* Round 14: Upgraded FAQ pulldown — white BG with blue outline */
    .mobile-actions-row .ma-faq {
        flex: 1 1 0;
        min-width: 0;
        background: #fff;
        color: var(--c-blue-dark, #0e4ccc);
        border: 2px solid var(--c-blue-dark, #0e4ccc);
        border-radius: 12px;
        padding: 0;
        position: relative;
        overflow: visible;
    }
    .mobile-actions-row .ma-faq[open] { background: #f0f4fc; }
    .mobile-actions-row .ma-faq .ma-faq__summary {
        list-style: none;
        cursor: pointer;
        padding: 10px 8px;
        font-weight: 700;
        font-size: 0.95rem;
        line-height: 1.1;
        text-align: center;
        color: var(--c-blue-dark, #0e4ccc);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .mobile-actions-row .ma-faq .ma-faq__summary::-webkit-details-marker { display: none; }
    .mobile-actions-row .ma-faq .ma-faq__chev {
        font-size: 0.85rem;
        transition: transform .15s;
    }
    .mobile-actions-row .ma-faq[open] .ma-faq__chev { transform: rotate(180deg); }
    .mobile-actions-row .ma-faq__menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid var(--c-blue-dark, #0e4ccc);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(14,42,120,.18);
        z-index: 60;
        padding: 6px 0;
        display: flex;
        flex-direction: column;
    }
    .mobile-actions-row .ma-faq__item {
        display: block;
        padding: 10px 14px;
        color: var(--c-blue-dark, #0e4ccc);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        white-space: normal;
        text-align: left;
    }
    .mobile-actions-row .ma-faq__item:hover,
    .mobile-actions-row .ma-faq__item:active { background: #f0f4fc; }
    .mobile-actions-row .ma-btn:active {
        transform: translateY(1px);
    }

    /* Hide the older face-actions Instant-Quote/Audition pair when the
       new mobile-actions-row is on the page (to avoid duplication). */
    body:has(.mobile-actions-row) .face-actions { display: none; }
}

/* ---- MOBILE: Voice Profile bullets relocated under player ----
   The class .voiceprofile-section--under-player marks the moved copy.
   It receives the 5 voice-quality bullets at top of the bio. */
@media (max-width: 760px) {
    .voiceprofile-section--under-player {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 14px 14px 0;
        border: none !important;
    }
    .voiceprofile-section--under-player .voiceprofile-list {
        margin: 0 0 12px;
    }
    /* Hide the original 5-bullet block on mobile (it has been duplicated below) */
    .voiceprofile-section .voiceprofile-list[data-mobile-relocated] {
        display: none;
    }
}

/* ---- "Hire One. Or All of us" — logo with bg video on top (desktop + mobile) ---- */
/* Round 6: was mobile-only as `.hire-one__logo-mobile`. Renamed to
   `.hire-one__logo` and shown on all viewports per John's request to
   match the header's layered logo (and to be the click target for the
   fun mp3 sequence on the family page). */
.hire-one__logo {
    display: block;
    position: relative;
    width: 280px;
    height: 116px;
    margin: 0 auto 14px;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
    /* Round 14: 1px light blue horizontal line through the middle of the
       logo, full container width. Drawn via ::before that escapes the
       logo's own width using a wide negative inset. */
    z-index: 1;
}
/* The line itself: rendered as a thin band on the parent .article so it
   spans the full container width (logo is centered inside .article). */
.article:has(> .hire-one__logo) {
    position: relative;
}
.article:has(> .hire-one__logo)::before {
    content: '';
    position: absolute;
    /* Vertical center of the logo: padding-top + logo-height/2.
       The .article has natural top padding; the logo is the first child
       with margin-bottom 14, height 116. We aim for ~58px from logo top. */
    top: var(--hire-line-top, 76px);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--c-blue-light, #aedaf1);
    z-index: 0;
    pointer-events: none;
}
.hire-one__logo video,
.hire-one__logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.hire-one__logo video { z-index: 1; }
.hire-one__logo img   { z-index: 2; }

@media (max-width: 760px) {
    .hire-one__logo {
        width: 240px;
        height: 100px;
        margin: 0 auto 12px;
    }
    .article:has(> .hire-one__logo)::before {
        top: var(--hire-line-top-mobile, 68px);
    }
}

/* ---- MOBILE: Footer — VO Specialties + Our Services side-by-side, 60/40 ---- */
@media (max-width: 760px) {
    .footer-nav-mirror {
        display: grid !important;
        grid-template-columns: 1fr;          /* default stacked */
        gap: 18px;
    }
    /* Group the "Voiceover Specialties" + "Our Services" cols into one row.
       Use grid-area placement via nth-child to put them side-by-side. */
    .footer-nav-mirror > .footer-nav-col:nth-child(1) {
        order: 1;                            /* Voice Actors first (full width) */
    }
    .footer-nav-mirror > .footer-nav-col:nth-child(2),
    .footer-nav-mirror > .footer-nav-col:nth-child(3) {
        order: 2;
    }
    .footer-nav-mirror > .footer-nav-col:nth-child(4) {
        order: 3;
    }
    /* The two side-by-side cols share a grid row */
    .footer-nav-mirror > .footer-nav-col:nth-child(2) {
        grid-column: 1 / 2;
    }
    .footer-nav-mirror > .footer-nav-col:nth-child(3) {
        grid-column: 2 / 3;
    }
    .footer-nav-mirror {
        grid-template-columns: 60% 40%;       /* applied for cols 2 & 3 only */
    }
    /* Voice Actors & CT Answers cols span full width */
    .footer-nav-mirror > .footer-nav-col:nth-child(1),
    .footer-nav-mirror > .footer-nav-col:nth-child(4) {
        grid-column: 1 / -1;
    }
    /* Truncate long specialty subtitles if any */
    .footer-nav-col[data-render="actors-flat"] a small,
    .footer-nav-col a small {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .footer-nav-col {
        font-size: 0.92rem;
        padding: 0 4px;
    }
    .footer-nav-col h4 {
        font-size: 1.05rem;
    }
    .footer-nav-col a {
        font-size: 0.88rem;
        padding: 4px 0;
    }
}

/* Round 20 (replaces Round 14 hide rule): SHOW the CrossTimber Answers
   pulldown on mobile as the third stacked accordion (Specialties / Actors / Answers).
   The FAQ link in the mobile-actions-row is hidden separately. */
@media (max-width: 760px) {
    .site-nav .nav-menu--desktop-only {
        display: block !important;
    }
}

/* ====================================================================
 * ROUND 20 — additional mobile / breakpoint rules
 * ==================================================================== */

/* <900: title area height -50% and pulled up to touch the specialty
   scroller above it (no gap). Specialty home only — keyed via
   #mainRowTitle which lives only on home.html. */
@media (max-width: 900px) {
    #mainRowTitle.main-row-title {
        height: 55px !important;             /* -50% from 110px */
        margin-top: 0 !important;
        padding: 0 16px;
    }
    #mainRowTitle.main-row-title h1 {
        font-size: 1.4rem;
        line-height: 1.1;
    }
    /* Pull the entire main-container up to touch the .sp-area above it
       (no gap from .face-connector svg). */
    main.main-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    /* Compress specialty connector svg space at <900 so title hugs strip. */
    .face-connector.specialty-connector {
        height: 0 !important;
        margin: 0 !important;
        display: none;
    }
}

/* <900: hide "See all specialties" line if any remain (defensive — also
   removed from HTML), and visual treatment for the relocated cross-links. */
.sp-crosslinks-section--mobile-relocated {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px dashed #d6dde7;
}

/* Round 20: actor subtitle line under the actor name in main-row-title */
.main-row-title__subtitle {
    margin: 4px 0 0;
    font-size: 1.05rem;
    font-weight: 500;
    font-style: italic;
    color: rgba(8, 22, 56, .72);
    letter-spacing: .3px;
    text-shadow: 0 1px 2px rgba(255,255,255,.4);
}
@media (max-width: 760px) {
    .main-row-title__subtitle { font-size: .9rem; }
}

/* ====================================================================
 * Round 19 Step 6 — Floating sticky "Get a Quote" CTA (orange + Kingdom)
 * with hover tooltip listing the trifecta guarantee (Quality / Speed / Price).
 * Injected globally by /06js/floating-cta.js.
 * ==================================================================== */
.fvo-fab-quote {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9000;
    pointer-events: none;
}
.fvo-fab-quote__btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f3531b 0%, #ff7a18 100%);
    color: #fff;
    font-family: 'Rise of Kingdom', 'Cinzel', Georgia, serif;
    font-size: 1.15rem;
    letter-spacing: .5px;
    text-decoration: none;
    box-shadow:
        0 8px 22px rgba(243, 83, 27, .45),
        0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease;
    border: 2px solid rgba(255, 255, 255, .35);
}
.fvo-fab-quote__btn:hover,
.fvo-fab-quote__btn:focus-visible {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 12px 28px rgba(243, 83, 27, .55),
        0 4px 10px rgba(0, 0, 0, .15);
    color: #fff;
    outline: none;
}
.fvo-fab-quote__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-weight: 800;
    font-size: 1rem;
    font-family: Arial, sans-serif;     /* numeric '$' looks cleaner here */
}

/* Trifecta tooltip — appears above the button on hover/focus */
.fvo-fab-quote__tooltip {
    pointer-events: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: 290px;
    background: #fff;
    color: #0e2557;
    border: 2px solid #f3531b;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    font-family: var(--font-b, system-ui, -apple-system, sans-serif);
    font-size: .92rem;
    line-height: 1.4;
}
.fvo-fab-quote__tooltip::after {
    content: "";
    position: absolute;
    right: 32px;
    bottom: -8px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-right: 2px solid #f3531b;
    border-bottom: 2px solid #f3531b;
    transform: rotate(45deg);
}
.fvo-fab-quote:hover .fvo-fab-quote__tooltip,
.fvo-fab-quote__btn:focus-visible ~ .fvo-fab-quote__tooltip,
.fvo-fab-quote[data-trifecta="open"] .fvo-fab-quote__tooltip {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.fvo-fab-quote__tooltip-title {
    font-family: 'Rise of Kingdom', 'Cinzel', Georgia, serif;
    font-size: 1.05rem;
    color: #f3531b;
    margin-bottom: 8px;
}
.fvo-fab-quote__tooltip-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fvo-fab-quote__tooltip-list li {
    padding: 4px 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.fvo-fab-quote__tooltip-list strong { color: #0e4ccc; }

/* Mobile: smaller, label hidden so it's just a circle button */
@media (max-width: 760px) {
    .fvo-fab-quote {
        right: 14px;
        bottom: 14px;
    }
    .fvo-fab-quote__btn {
        padding: 12px 14px;
        font-size: 1rem;
    }
    .fvo-fab-quote__label { display: none; }
    .fvo-fab-quote__tooltip { width: 240px; }
}

/* ====================================================================
 * Round 19 Step 6 — Free Custom Audition button relocated into the
 * .demo-player (was in header). Sits below the Play All row.
 * ==================================================================== */
.dp-free-audition {
    display: block;
    margin: 12px auto 4px;
    padding: 10px 18px;
    border-radius: 8px;
    background: #fff;
    color: #f3531b;
    border: 2px solid #f3531b;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
.dp-free-audition:hover,
.dp-free-audition:focus-visible {
    background: #f3531b;
    color: #fff;
    transform: translateY(-1px);
    outline: none;
}

/* Header CTA stack: when the sub link has been moved away, the stack
   should center the remaining "Instant Quote" link. */
.site-nav__cta-stack.is-collapsed-no-sub {
    align-items: center;
}

/* ====================================================================
 * Round 22 — user refinements: sticky CTA matches header Instant Quote,
 * player audition CTA matches Play All button and sits below demos.
 * ==================================================================== */
.fvo-fab-quote__btn {
    gap: 8px !important;
    padding: 8px 18px !important;
    border-radius: 14px !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    box-shadow: 0 4px 18px rgba(243,83,27,.35) !important;
}
.fvo-fab-quote__icon { display: none !important; }
@media (max-width: 760px) {
    .fvo-fab-quote__label { display: inline !important; }
    .fvo-fab-quote__btn {
        padding: 8px 14px !important;
        font-size: 1.15rem !important;
    }
}
.fvo-fab-quote__tooltip-title {
    font-family: var(--font-b, system-ui, -apple-system, sans-serif) !important;
    font-weight: 800 !important;
    color: #0e2557 !important;
}
.fvo-fab-quote__tooltip-list li {
    display: block !important;
    padding: 3px 0 !important;
}

.demo-player .dp-free-audition,
.dp-free-audition {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 12px auto 4px !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    border: none !important;
    background: var(--c-blue-dark) !important;
    color: #fff !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
}
.demo-player .dp-free-audition:hover,
.dp-free-audition:hover {
    background: #0a3aa8 !important;
    color: #fff !important;
}

/* ====================================================================
 * Round 22 — Header/menu overhaul.
 * >900: logo left, Specialties / Actors / FAQ-Contact menus, Instant Quote
 * top-right with small bullets. <900 conditional hiding. <720 full-width
 * accordion menu layout with centered logo and unclipped panels.
 * ==================================================================== */
.site-nav__quote-bullets {
    list-style: disc;
    margin: 2px 0 0 0;
    padding: 0 0 0 18px;
    color: #17346d;
    font-size: 10px;
    line-height: 1.08;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
}
.site-nav__cta-stack + .site-nav__quote-bullets,
.site-nav__cta + .site-nav__quote-bullets {
    margin-top: 2px;
}

@media (min-width: 901px) {
    .site-nav__inner {
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
    }
    .site-nav__logo {
        flex: 0 0 auto !important;
        margin-right: auto !important;
    }
    .site-nav .nav-menu--specialties,
    .site-nav .nav-menu--actors,
    .site-nav .nav-menu--answers {
        display: inline-block !important;
        flex: 0 0 auto !important;
    }
    .site-nav .nav-menu__toggle {
        white-space: nowrap !important;
    }
    .site-nav__cta,
    .site-nav__cta-stack {
        flex: 0 0 auto !important;
        margin-left: 6px !important;
    }
    .site-nav__cta-stack {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }
    .site-nav__cta-sub { display: none !important; }
    .site-nav__more { display: none !important; }
}

/* <900: avoid redundant desktop pulldowns when the page's own face/card area
   already performs that role. */
@media (max-width: 900px) and (min-width: 721px) {
    body.fvo-page-home .site-nav .nav-menu--specialties,
    body.fvo-page-specialty .site-nav .nav-menu--specialties {
        display: none !important;
    }
    body.fvo-page-va .site-nav .nav-menu--actors {
        display: none !important;
    }
}

@media (max-width: 720px) {
    /* Hide redundant menus on mobile */
    body.fvo-page-home .site-nav .nav-menu--specialties,
    body.fvo-page-specialty .site-nav .nav-menu--specialties {
        display: none !important;
    }
    body.fvo-page-va .site-nav .nav-menu--actors {
        display: none !important;
    }
    .site-nav {
        overflow: visible !important;
    }
    .site-nav__inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }
    .site-nav__logo {
        align-self: center !important;
        margin: 0 auto !important;
        left: auto !important;
    }
    .site-nav::before {
        display: block !important;
        top: 80px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
    }
    .site-nav .nav-menu--specialties,
    .site-nav .nav-menu--actors,
    .site-nav .nav-menu--answers,
    .site-nav .nav-menu--desktop-only,
    .site-nav .nav-menu--mobile-only {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        order: 20 !important;
        box-sizing: border-box !important;
    }
    .site-nav .nav-menu--specialties { order: 20 !important; }
    .site-nav .nav-menu--actors      { order: 21 !important; }
    .site-nav .nav-menu--answers     { order: 22 !important; }
    .site-nav .nav-menu__toggle {
        width: 100% !important;
        justify-content: center !important;
        border-radius: 0 !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
    }
    .site-nav .nav-menu__label {
        font-size: 0 !important;
    }
    .site-nav .nav-menu__label::before {
        content: attr(data-mobile) !important;
        font-size: 1rem !important;
    }
    .site-nav .nav-menu__panel {
        position: static !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
        border-radius: 0 0 12px 12px !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        overflow: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: none !important;
    }
    .site-nav .nav-menu.is-open .nav-menu__panel {
        display: block !important;
    }
    .site-nav .nav-menu__panel a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        padding: 10px 12px !important;
    }
    .site-nav__cta,
    .site-nav__cta-stack,
    .site-nav__quote-bullets,
    .site-nav__more {
        display: none !important;
    }
}

/* Round 22 tightening: desktop order + prevent duplicate FAQ mobile accordion. */
@media (min-width: 901px) {
    .site-nav__logo              { order: 1 !important; }
    .site-nav .nav-menu--specialties { order: 2 !important; }
    .site-nav .nav-menu--actors      { order: 3 !important; }
    .site-nav .nav-menu--answers     { order: 4 !important; }
    .site-nav__cta,
    .site-nav__cta-stack         { order: 5 !important; }
}
@media (max-width: 720px) {
    .site-nav .nav-menu--mobile-only.nav-menu--faq { display: none !important; }
}

/* ====================================================================
 * Round 23 — HEADER RESCUE OVERRIDES (CSS only)
 * Intent:
 *  - home + /VO/: hide Specialties only in tablet row (760–900),
 *    but show it again as an accordion below 760.
 *  - /VA/: hide Actors in tablet row (760–900), but show it again as
 *    accordion below 760.
 *  - keep FAQ/Contact to the right of Actors in tablet row.
 *  - place tiny bullets directly below Instant Quote button.
 * ==================================================================== */

/* Quote button + tiny bullets: make a self-contained right-side stack. */
@media (min-width: 761px) {
  .site-nav__cta-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .site-nav__cta-stack + .site-nav__quote-bullets,
  .site-nav__cta + .site-nav__quote-bullets {
    display: block !important;
    flex: 0 0 100% !important;
    order: 99 !important;
    width: max-content !important;
    margin: -2px 0 0 auto !important;
    padding-left: 18px !important;
    text-align: left !important;
    justify-self: flex-end !important;
  }
}

/* Tablet header row: logo left; Specialties/Actors/FAQContact/Quote in order. */
@media (max-width: 900px) and (min-width: 761px) {
  .site-nav__inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  .site-nav__logo { order: 1 !important; margin-right: auto !important; }
  .site-nav .nav-menu--specialties { order: 2 !important; }
  .site-nav .nav-menu--actors { order: 3 !important; }
  .site-nav .nav-menu--answers { order: 4 !important; }
  .site-nav__cta,
  .site-nav__cta-stack { order: 5 !important; margin-left: 0 !important; }
  .site-nav__quote-bullets { order: 6 !important; margin-left: auto !important; }

  body.fvo-page-home .site-nav .nav-menu--specialties,
  body.fvo-page-specialty .site-nav .nav-menu--specialties {
    display: none !important;
  }
  body.fvo-page-va .site-nav .nav-menu--actors {
    display: none !important;
  }

  .site-nav .nav-menu--answers { display: inline-block !important; }
  .site-nav .nav-menu--answers .nav-menu__panel {
    left: auto !important;
    right: 0 !important;
    transform: translateY(-6px) !important;
  }
  .site-nav .nav-menu--answers.is-open .nav-menu__panel {
    transform: translateY(0) !important;
  }
}

/* Mobile accordion starts at <760. All three accordion titles centered.
   Specialties returns here even on home + /VO/ pages. Actors returns here
   even on /VA/ pages. */
@media (max-width: 760px) {
  .site-nav { overflow: visible !important; }
  .site-nav__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
  .site-nav__logo {
    order: 1 !important;
    align-self: center !important;
    margin: 0 auto !important;
  }
  .site-nav .nav-menu--specialties,
  body.fvo-page-home .site-nav .nav-menu--specialties,
  body.fvo-page-specialty .site-nav .nav-menu--specialties,
  .site-nav .nav-menu--actors,
  body.fvo-page-va .site-nav .nav-menu--actors,
  .site-nav .nav-menu--answers {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .site-nav .nav-menu--specialties { order: 20 !important; }
  .site-nav .nav-menu--actors { order: 21 !important; }
  .site-nav .nav-menu--answers { order: 22 !important; }

  .site-nav .nav-menu__toggle {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }
  .site-nav .nav-menu__label {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0 !important;
  }
  .site-nav .nav-menu__label::before {
    content: attr(data-mobile) !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 1rem !important;
  }

  .site-nav .nav-menu__panel {
    display: none !important;
    position: static !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    border-radius: 0 0 12px 12px !important;
  }
  .site-nav .nav-menu.is-open .nav-menu__panel { display: block !important; }

  /* Actors accordion: lay actors across, keep divider labels. */
  .site-nav .nav-menu--actors .nav-menu__panel {
    display: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .site-nav .nav-menu--actors.is-open .nav-menu__panel {
    display: grid !important;
  }
  .site-nav .nav-menu--actors .menu-divider,
  .site-nav .nav-menu--actors .nav-menu__divider,
  .site-nav .nav-menu--actors [role="separator"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 6px 0 2px !important;
    text-align: center !important;
  }
  .site-nav .nav-menu--actors .nav-menu__panel a {
    width: auto !important;
    text-align: center !important;
    padding: 8px 6px !important;
    white-space: normal !important;
  }

  .site-nav__cta,
  .site-nav__cta-stack,
  .site-nav__quote-bullets,
  .site-nav__more,
  .site-nav .nav-menu--mobile-only.nav-menu--faq {
    display: none !important;
  }
}

/* Mobile page body: player full-width, crosslinks/browse-specialties below. */
@media (max-width: 760px) {
  .sp-grid,
  .sp-main,
  .sp-layout,
  .sp-row,
  .main-row-content {
    display: block !important;
  }
  .sp-col3,
  .demo-player,
  #player {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }
  .sp-crosslinks-section,
  .sp-crosslinks,
  .sp-crosslink-select,
  .sp-col2 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }
}

/* ====================================================================
 * Round 24 — targeted mobile/header cleanup.
 * ==================================================================== */

/* >900: home + /VO/ pages do not need the Specialties pulldown. */
@media (min-width: 901px) {
  body.fvo-page-home .site-nav .nav-menu--specialties,
  body.fvo-page-specialty .site-nav .nav-menu--specialties,
  body[data-page-home="true"] .site-nav .nav-menu--specialties {
    display: none !important;
  }
}

/* Mobile: remove the large gap between centered logo and first accordion. */
@media (max-width: 760px) {
  .site-nav { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  .site-nav__inner { gap: 0 !important; }
  .site-nav__logo {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .site-nav .nav-menu--specialties {
    margin-top: 0 !important;
  }
}

/* Home <720: prevent clipped What-you-get and Browse Other Specialties. */
@media (max-width: 720px) {
  body.fvo-page-home .sp-col2,
  body[data-page-home="true"] .sp-col2,
  body.fvo-page-home .sp-col2__body,
  body[data-page-home="true"] .sp-col2__body,
  body.fvo-page-home .sp-col2__body ul,
  body[data-page-home="true"] .sp-col2__body ul,
  body.fvo-page-home .sp-col2__body li,
  body[data-page-home="true"] .sp-col2__body li {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }
  body.fvo-page-home .sp-col2__body,
  body[data-page-home="true"] .sp-col2__body {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body.fvo-page-home .sp-col2__body ul,
  body[data-page-home="true"] .sp-col2__body ul {
    padding-left: 20px !important;
  }
  body.fvo-page-home .sp-crosslinks-section,
  body[data-page-home="true"] .sp-crosslinks-section,
  body.fvo-page-home .sp-crosslinks,
  body[data-page-home="true"] .sp-crosslinks {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow: visible !important;
  }
}

/* Reduce the gap between Browse Other Specialties and the family section. */
.sp-crosslinks-section {
  margin-bottom: 18px !important;
  padding-bottom: 8px !important;
}
.fam-section,
.fam-cards,
section[id*="family"],
section[class*="family"] {
  margin-top: 18px !important;
  padding-top: 12px !important;
}

/* Round 24 / Step 8 — Kingdom font on hero H1s. */
.hero h1,
.hero-title,
.home-hero h1,
.main-hero h1,
.sp-hero h1,
.reviews-hero h1,
.about-hero h1,
.contact-hero h1,
.faq-hero h1,
.main-row-title h1:first-child {
  font-family: var(--font-h, 'Rise of Kingdom', 'Cinzel', Georgia, serif) !important;
  letter-spacing: .5px !important;
}


/* ====================================================================
 * Round 25 — final targeted header/mobile layout patch.
 * ==================================================================== */
@media (min-width: 901px) {
  .site-nav__cta-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
    margin-left: 6px !important;
  }
  .site-nav__cta-stack .site-nav__cta {
    margin-left: 0 !important;
  }
  .site-nav__cta-stack .site-nav__quote-bullets {
    display: block !important;
    order: 2 !important;
    width: auto !important;
    max-width: 210px !important;
    margin: 0 !important;
    padding-left: 16px !important;
    text-align: left !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }
}
@media (max-width: 900px) {
  .site-nav__cta-stack,
  .site-nav__cta,
  .site-nav__quote-bullets {
    display: none !important;
  }
}

.site-nav .nav-actor-grid-menu__head {
  font-family: var(--font-h, Georgia, serif) !important;
  font-weight: 800 !important;
  color: #17346d !important;
  text-align: center !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.site-nav .nav-actor-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 5px 3px 7px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #1d2237 !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
  min-width: 0 !important;
}
.site-nav .nav-actor-card:hover,
.site-nav .nav-actor-card:focus-visible {
  background: #eef3ff !important;
  transform: translateY(-1px) !important;
}
.site-nav .nav-actor-circle {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 3px solid #d8dcec !important;
  background: #fff !important;
  display: block !important;
  box-sizing: border-box !important;
}
.site-nav .nav-actor-circle img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.site-nav .nav-actor-name {
  display: block !important;
  color: #1d2237 !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  max-width: 100% !important;
}
.site-nav .nav-actor-badge {
  position: absolute !important;
  top: -2px !important;
  right: 4px !important;
  background: #ffd54f !important;
  color: #5d4400 !important;
  font-size: .58rem !important;
  padding: 1px 4px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .25px !important;
  line-height: 1.2 !important;
  z-index: 2 !important;
}
.site-nav .nav-actor-badge.is-creature {
  background: #6c7188 !important;
  color: #fff !important;
  right: 0 !important;
}
.site-nav .nav-actor-card.is-child .nav-actor-circle { border-color: #ffd54f !important; }
.site-nav .nav-actor-card.is-creature .nav-actor-circle { border-color: #6c7188 !important; }

@media (max-width: 760px) {
  .site-nav .nav-menu--actors .nav-menu__panel.nav-actor-grid-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px 4px !important;
    align-items: start !important;
  }
  .site-nav .nav-menu--actors.is-open .nav-menu__panel.nav-actor-grid-menu {
    display: grid !important;
  }
  .site-nav .nav-menu--actors .nav-actor-grid-menu__head {
    grid-column: 1 / -1 !important;
    margin: 7px 0 0 !important;
    padding: 4px 0 2px !important;
    border-top: 1px solid rgba(23,52,109,.18) !important;
  }
  .site-nav .nav-menu--actors .nav-actor-grid-menu__head:first-child {
    margin-top: 0 !important;
    border-top: 0 !important;
  }
  .site-nav .nav-menu--actors .nav-actor-card {
    width: auto !important;
    padding: 5px 1px 7px !important;
  }
  .site-nav .nav-menu--actors .nav-actor-circle {
    width: 52px !important;
    height: 52px !important;
  }
}
@media (max-width: 420px) {
  .site-nav .nav-menu--actors .nav-menu__panel.nav-actor-grid-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .sp-area,
  .sp-grid,
  .sp-main,
  .sp-layout,
  .sp-row,
  .main-row-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }
  .sp-col3 {
    order: 30 !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
  }
  .sp-col3 .demo-player,
  #player {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
  }
  .sp-crosslinks-section {
    order: 40 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
  }
  .sp-crosslinks,
  .sp-crosslink-select {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}


/* ====================================================================
 * Round 26 — additional image/player/slideshow/bullet constraints.
 * ==================================================================== */

/* Specialty image cap 900px and smaller */
@media (max-width: 900px) {
  .sp-col1 img,
  .sp-grid img,
  .sp-main img,
  .sp-layout img,
  .voiceprofile img {
    max-width: 300px !important;
    height: auto !important;
  }
}

/* Player cap up to 1024px, full-width below 620px */
@media (max-width: 1025px) {
  #player,
  .demo-player,
  .sp-col3 .demo-player {
    max-width: 600px !important;
  }
}
@media (max-width: 620px) {
  #player,
  .demo-player,
  .sp-col3 .demo-player {
    max-width: 100vw !important;
    width: 100vw !important;
    box-sizing: border-box !important;
  }
}

/* What you get bullet clipping 721-760 */
@media (min-width: 721px) and (max-width: 760px) {
  .sp-col2,
  .voiceprofile-body,
  .sp-col2__body ul,
  .sp-col2__body li,
  .voiceprofile ul,
  .voiceprofile li {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    transform: none !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .sp-grid,
  .sp-main,
  .sp-layout,
  .sp-row,
  .main-row-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }
  .sp-col2 {
    order: 20 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
}

/* Slideshow layout: 760-900 to right of What You Get, below 760 its own row */
@media (min-width: 761px) and (max-width: 900px) {
  .sp-main,
  .sp-grid,
  .sp-layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  .sp-col2 {
    flex: 1 1 auto !important;
    max-width: 54% !important;
    margin-right: 12px !important;
  }
  .sp-family-teaser,
  .fam-cards,
  section[id*="family"],
  section[class*="family"],
  .fam-section {
    flex: 1 1 auto !important;
    max-width: 44% !important;
    order: 30 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
  }
}
@media (max-width: 760px) {
  .sp-family-teaser,
  .fam-cards,
  section[id*="family"],
  section[class*="family"],
  .fam-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Remove Get a Free Custom Audition button from below slideshow (header only) */
.dp-free-audition {
  display: none !important;
}

/* ====================================================================
 * Round 27 — targeted cleanup after audit (header, actor menu, tablet layout)
 * ==================================================================== */
@media (min-width: 901px) {
  .site-nav__cta-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
  }
  .site-nav__cta-stack > .site-nav__cta {
    order: 1 !important;
    margin: 0 !important;
  }
  .site-nav__cta-stack > .site-nav__cta-sub {
    display: none !important;
  }
  .site-nav__cta-stack > .site-nav__quote-bullets {
    order: 2 !important;
    display: block !important;
    width: max-content !important;
    max-width: 230px !important;
    margin: 0 !important;
    padding-left: 17px !important;
    text-align: left !important;
    white-space: normal !important;
    align-self: center !important;
  }
}
@media (max-width: 900px) {
  .site-nav__cta-stack,
  .site-nav__cta-stack > .site-nav__cta,
  .site-nav__cta-stack > .site-nav__quote-bullets {
    display: none !important;
  }
}

.site-nav .nav-actor-grid-menu__head { display: none !important; }
.site-nav .nav-menu--actors .nav-menu__panel.nav-actor-grid-menu {
  gap: 6px !important;
  padding: 9px !important;
}
.site-nav .nav-actor-card {
  gap: 2px !important;
  padding: 4px 2px 6px !important;
}
.site-nav .nav-actor-circle {
  width: 52px !important;
  height: 52px !important;
  border: 3px solid var(--actor-color, #d8dcec) !important;
}
.site-nav .nav-actor-card.is-child .nav-actor-circle,
.site-nav .nav-actor-card.is-creature .nav-actor-circle {
  border-color: var(--actor-color, #d8dcec) !important;
}
.site-nav .nav-actor-name {
  font-family: var(--font-h, 'Rise of Kingdom', 'Cinzel', Georgia, serif) !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  line-height: 1.02 !important;
}
.site-nav .nav-actor-badge { display: none !important; }
@media (max-width: 760px) {
  .site-nav .nav-menu--actors .nav-menu__panel.nav-actor-grid-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px 2px !important;
    padding: 8px 6px !important;
  }
  .site-nav .nav-menu--actors .nav-actor-circle {
    width: 48px !important;
    height: 48px !important;
  }
}

/* Mobile accordion animation: no display toggling; closed panels take no flow space. */
@media (max-width: 760px) {
  .site-nav .nav-menu__panel,
  .site-nav .nav-menu--actors .nav-menu__panel,
  .site-nav .nav-menu--actors .nav-menu__panel.nav-actor-grid-menu {
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 1px 0 1px !important;
    pointer-events: none !important;
    transition: max-height .28s ease, opacity .18s ease, padding-top .28s ease, padding-bottom .28s ease, border-width .28s ease !important;
  }
  .site-nav .nav-menu.is-open .nav-menu__panel {
    max-height: 72vh !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-width: 1px !important;
    pointer-events: auto !important;
  }
  .site-nav .nav-menu--actors.is-open .nav-menu__panel.nav-actor-grid-menu {
    display: grid !important;
  }
}

/* Exact specialty/home portrait cap below 900; avoids shrinking unrelated cards/icons. */
@media (max-width: 900px) {
  .sp-col1 .sp-portrait-wrap,
  .sp-col1 .sp-portrait-wrap img,
  .sp-col1 picture,
  .sp-col1 picture > img {
    max-width: 300px !important;
  }
  .sp-col1 .sp-portrait-wrap {
    width: min(300px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .sp-col1 .sp-portrait-wrap img,
  .sp-col1 picture > img {
    width: 100% !important;
    height: auto !important;
  }
}

/* Tablet specialty/home layout repair: do not squeeze family/player sections into side columns. */
@media (min-width: 761px) and (max-width: 899px) {
  .main-row-content {
    display: grid !important;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }
  .main-row-content > .sp-col1 {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 300px !important;
  }
  .main-row-content > .sp-col2 {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  .main-row-content > .sp-col2 .voiceprofile-list,
  .main-row-content > .sp-col2 .sp-col2__body,
  .main-row-content > .sp-col2 ul,
  .main-row-content > .sp-col2 li {
    max-width: none !important;
    box-sizing: border-box !important;
  }
  .main-row-content > .sp-col3 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }
  .main-row-content > .sp-col3 .demo-player,
  .sp-col3 .demo-player,
  #player {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }
  .sp-family-teaser,
  .sp-family-teaser__inner,
  .fam-cards,
  section[class*="family"],
  section[id*="family"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
  }
  .fam-cards__track {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Keep family-card scroller arrows pinned to left/right edges. */
.fam-cards { position: relative !important; }
.fam-cards__nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}
.fam-cards__nav--prev { left: 6px !important; right: auto !important; }
.fam-cards__nav--next { right: 6px !important; left: auto !important; }

/* Connector line remains visible for tablet/desktop, hidden only once specialty cards are gone. */
@media (min-width: 721px) {
  .face-connector,
  .face-connector.specialty-connector,
  .specialty-connector {
    display: block !important;
  }
}
@media (max-width: 720px) {
  .face-connector,
  .face-connector.specialty-connector,
  .specialty-connector {
    display: none !important;
  }
}

/* ====================================================================
 * Round 28 — header gap, blue line, actor layout, body opacity, player fix
 * ==================================================================== */

/* 1. Remove gap between accordion menu and logo at <760 */
@media (max-width: 760px) {
  .site-nav { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  .site-nav__inner { gap: 0 !important; }
  .site-nav__logo { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  .site-nav .nav-menu--specialties { margin-top: 0 !important; }
}

/* 2. Blue line behind logo at <760 (same as <720) */
@media (max-width: 760px) {
  .site-nav::before {
    display: block !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }
}

/* 3. Accordion actor grid: 15px gap, KID/SPECIALTY oval badges */
.site-nav .nav-menu--actors .nav-menu__panel.nav-actor-grid-menu {
  gap: 15px !important;
}
@media (max-width: 760px) {
  .site-nav .nav-menu--actors .nav-menu__panel.nav-actor-grid-menu {
    gap: 15px 10px !important;
  }
}
/* Badge styling: calculator-style ovals */
.site-nav .nav-actor-badge {
  position: absolute !important;
  top: -2px !important;
  right: 4px !important;
  background: #ffd54f !important;
  color: #5d4400 !important;
  font-size: .65rem !important;
  padding: 1px 5px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  line-height: 1.2 !important;
  z-index: 2 !important;
  display: block !important;
}
.site-nav .nav-actor-badge.is-specialty {
  background: #6c7188 !important;
  color: #fff !important;
  right: 0 !important;
}

/* 4. >760 header actor layout: icon left-aligned, full name to right */
@media (min-width: 761px) {
  .site-nav .nav-actor-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 6px !important;
    text-align: left !important;
  }
  .site-nav .nav-actor-circle {
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
  }
  .site-nav .nav-actor-name {
    text-align: left !important;
  }
  .site-nav .nav-actor-fullname { display: inline !important; }
  .site-nav .nav-actor-shortname { display: none !important; }
  .site-nav .nav-actor-badge {
    top: -2px !important;
    right: auto !important;
    left: 40px !important;
  }
}

/* Mobile accordion actors: icon above, short name below (stacked) */
@media (max-width: 760px) {
  .site-nav .nav-actor-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 4px 2px 6px !important;
    text-align: center !important;
  }
  .site-nav .nav-actor-fullname { display: none !important; }
  .site-nav .nav-actor-shortname { display: inline !important; }
  .site-nav .nav-actor-badge {
    top: -2px !important;
    right: 4px !important;
    left: auto !important;
  }
}

/* 5. Body area: white fill to rgba(255,255,255,0.50) */
.main-container,
.main-row-content {
  background: rgba(255, 255, 255, .50) !important;
}
.sp-seo-body {
  background: rgba(255, 255, 255, .50) !important;
}

/* 6. <760 player centered */
@media (max-width: 760px) {
  .sp-col3,
  .main-row-content > .sp-col3 {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }
  .sp-col3 .demo-player,
  #player {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }
}

/* 7. <620 player full-width, no margin/padding clip, no rounded corners */
@media (max-width: 620px) {
  .sp-col3,
  .main-row-content > .sp-col3 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }
  .sp-col3 .demo-player,
  #player {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .sp-col3 .demo-player {
    border-radius: 0 !important;
  }
}

/* ====================================================================
 * Round 29 — unresolved mobile/player/header/VA breakpoint fixes
 * ==================================================================== */

/* Restore actor menu names to short labels only; keep row layout only for desktop without full names. */
.site-nav .nav-actor-fullname,
.site-nav .nav-actor-shortname { display: none !important; }
@media (min-width: 761px) {
  .site-nav .nav-actor-card {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
  }
  .site-nav .nav-actor-name {
    text-align: left !important;
    white-space: nowrap !important;
  }
}

/* /VA desktop/tablet menu rule: Face Area handles actors, so show Specialties instead of Actors above 900. */
@media (min-width: 901px) {
  body.fvo-page-va .site-nav .nav-menu--actors { display: none !important; }
  body.fvo-page-va .site-nav .nav-menu--specialties { display: inline-block !important; }
}

/* Remove broken See/Hear another actor pulldowns on /VA pages. */
body.fvo-page-va .actor-switcher,
body[data-page="actor"] .actor-switcher,
.actor-page-r8 .actor-switcher {
  display: none !important;
}

/* Treat exactly 900px as mobile/tablet, not desktop. */
@media (max-width: 900px) {
  body.fvo-page-va .site-nav .nav-menu--specialties,
  body[data-page="actor"] .site-nav .nav-menu--specialties,
  .actor-page-r8 .site-nav .nav-menu--specialties {
    display: block !important;
  }
}

/* /VA 761-900: keep the >900 actor-page layout instead of the broken intermediate layout. */
@media (min-width: 761px) and (max-width: 900px) {
  body.fvo-page-va .main-row-content,
  body[data-page="actor"] .main-row-content,
  .actor-page-r8 .main-row-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  body.fvo-page-va .actor-section,
  body[data-page="actor"] .actor-section,
  .actor-page-r8 .actor-section {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    width: 30% !important;
    padding: 12px 8px 12px 12px !important;
  }
  body.fvo-page-va .voiceprofile-section,
  body[data-page="actor"] .voiceprofile-section,
  .actor-page-r8 .voiceprofile-section {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    width: 70% !important;
    padding: 12px 12px 12px 8px !important;
    border-left: 1px solid var(--c-border) !important;
  }
  body.fvo-page-va .player-section,
  body[data-page="actor"] .player-section,
  .actor-page-r8 .player-section {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  body.fvo-page-va .player-section .demo-player,
  body[data-page="actor"] .player-section .demo-player,
  .actor-page-r8 .player-section .demo-player {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 720px !important;
  }
}

/* /VA <760: center main actor photo, make Voice Profile full width, center main video/player. */
@media (max-width: 760px) {
  body.fvo-page-va .actor-section,
  body[data-page="actor"] .actor-section,
  .actor-page-r8 .actor-section {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
    display: block !important;
  }
  body.fvo-page-va .actor-section img,
  body[data-page="actor"] .actor-section img,
  .actor-page-r8 .actor-section img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.fvo-page-va .voiceprofile-section,
  body[data-page="actor"] .voiceprofile-section,
  .actor-page-r8 .voiceprofile-section {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    border-left: 0 !important;
    box-sizing: border-box !important;
  }
  body.fvo-page-va .player-section,
  body[data-page="actor"] .player-section,
  .actor-page-r8 .player-section {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  body.fvo-page-va .player-section .demo-player,
  body[data-page="actor"] .player-section .demo-player,
  .actor-page-r8 .player-section .demo-player {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* On /VA, move bottom logo/blue line down 5px and make the line 2px thick. */
body.fvo-page-va .site-footer::before,
body[data-page="actor"] .site-footer::before,
.actor-page-r8 .site-footer::before {
  top: calc(50% + 5px) !important;
  height: 2px !important;
}

/* Mobile home/VO player: true full-width and centered; no parent padding clip. */
@media (max-width: 760px) {
  body.fvo-page-home .sp-col3,
  body.fvo-page-specialty .sp-col3,
  body[data-page-home="true"] .sp-col3 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  body.fvo-page-home .sp-col3 .demo-player,
  body.fvo-page-specialty .sp-col3 .demo-player,
  body[data-page-home="true"] .sp-col3 .demo-player,
  body.fvo-page-home #player,
  body.fvo-page-specialty #player,
  body[data-page-home="true"] #player {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    border-radius: 0 !important;
  }
}

/* ====================================================================
 * Round 30 — mobile header source cleanup (remove logo/menu dead gap)
 * ====================================================================
 * Older mobile rules scaled the logo visually while preserving a large
 * flex-basis/min-height. Let the nav height come from actual content.
 */
@media (max-width: 760px) {
  :root { --nav-height: auto !important; }
  .site-nav {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .site-nav__inner {
    align-items: center !important;
    align-content: flex-start !important;
    gap: 0 6px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .site-nav__logo {
    flex: 0 1 154px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  .site-nav__logo img,
  .site-nav__logo svg {
    display: block !important;
    max-height: 70px !important;
    width: auto !important;
  }
  .site-nav .nav-menu { margin-top: 0 !important; margin-bottom: 0 !important; }
}


/* ====================================================================
 * Follow-up — <761 actor accordion fixed tiles + logo footprint restore
 * ==================================================================== */
@media (max-width: 760px) {
  .site-nav .nav-menu--actors .nav-menu__panel.nav-actor-grid-menu,
  .site-nav .nav-menu--actors.is-open .nav-menu__panel.nav-actor-grid-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }
  .site-nav .nav-menu--actors .nav-actor-card {
    display: block !important;
    flex: 0 0 auto !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    background: transparent !important;
  }
  .site-nav .nav-menu--actors .nav-actor-tile {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 72px !important;
    min-height: 88px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 2px 2px 4px !important;
    gap: 2px !important;
  }
  .site-nav .nav-menu--actors .nav-actor-circle {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }
  .site-nav .nav-menu--actors .nav-actor-name {
    display: block !important;
    width: 100% !important;
    min-height: 18px !important;
    font-size: .78rem !important;
    line-height: 1.02 !important;
    text-align: center !important;
    white-space: normal !important;
  }
  .site-nav .nav-menu--actors .nav-actor-badge {
    position: static !important;
    display: block !important;
    align-self: center !important;
    margin: 0 auto !important;
    font-size: .58rem !important;
    line-height: 1.1 !important;
    padding: 1px 5px !important;
    min-height: 10px !important;
  }
  .site-nav .nav-menu--actors .nav-actor-card:not(.is-child):not(.is-creature) .nav-actor-tile::after {
    content: "";
    display: block;
    height: 12px;
  }

  /* Restore logo media footprint: PNG foreground and video/poster background use same box. */
  .site-nav__logo {
    flex: 0 0 300px !important;
    width: 300px !important;
    height: 160px !important;
    line-height: normal !important;
    transform: none !important;
  }
  .site-nav__logo-bg,
  .site-nav__logo-fg,
  .site-nav__logo img,
  .site-nav__logo video {
    position: absolute !important;
    left: 0 !important;
    top: 17.5px !important;
    width: 300px !important;
    height: 125px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  body.fvo-page-va .site-nav,
  body[data-page="actor"] .site-nav,
  .actor-page-r8 .site-nav {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  body.fvo-page-va .site-nav__inner,
  body[data-page="actor"] .site-nav__inner,
  .actor-page-r8 .site-nav__inner {
    gap: 0 6px !important;
    align-content: flex-start !important;
    padding-bottom: 0 !important;
  }
}