:root {
    --ink: #111111;
    --paper: #ffffff;
    --paper-2: #f7f7f5;
    --paper-3: #efefeb;
    --red: #e8261a;
    --red-deep: #c01f14;
    --gold: #b08a4a;
    --gold-soft: #cba968;
    --line: rgba(17, 17, 17, 0.12);
    --line-light: rgba(255, 255, 255, 0.15);
    --muted: #6b6860;
    --muted-light: rgba(255, 255, 255, 0.64);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans:
        "Inter", "Helvetica Neue", -apple-system,
        BlinkMacSystemFont, sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
#reel,
#keynotes,
#testimonials,
#faq,
#book {
    scroll-margin-top: 80px;
}
body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img {
    max-width: 100%;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}
.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}
:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

/* ===== Topbar ===== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
.brand {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.07em;
}
.brand .seal {
    color: var(--red);
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 22px;
}
.nav-note {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}
.nav-tagline {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.nav-cta {
    font-size: 14px;
    font-weight: 600;
    background: var(--red);
    color: #fff;
    padding: 11px 20px;
    border-radius: 6px;
    transition: background 0.2s;
    letter-spacing: 0.01em;
}
.nav-cta:hover {
    background: var(--red-deep);
}

/* ===== Hero ===== */
.hero {
    border-bottom: 1px solid var(--line);
}
.hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    min-height: 620px;
}
.hero-photo {
    position: relative;
    overflow: hidden;
    background: #0a0a0a;
}
.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.hero-text {
    padding: 72px 0 68px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 22px;
}
.hero h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}
.hero h1 em {
    font-style: italic;
    color: var(--red);
}
.hero-sub {
    font-size: 19px;
    color: var(--muted);
    max-width: 32em;
    margin-bottom: 28px;
    line-height: 1.55;
}
.hero-urgency {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--red-deep);
    background: rgba(232, 38, 26, 0.07);
    padding: 9px 15px;
    border-radius: 2px;
    margin-bottom: 26px;
    width: fit-content;
}
.hero-urgency .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}
.hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.btn-primary {
    background: var(--red);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 17px 32px;
    border-radius: 6px;
    transition:
        background 0.2s,
        transform 0.1s;
    border: none;
    cursor: pointer;
    letter-spacing: 0.01em;
}
.btn-primary:hover {
    background: var(--red-deep);
}
.btn-primary:active {
    transform: translateY(1px);
}
.btn-ghost {
    font-weight: 600;
    font-size: 16px;
    padding: 17px 6px;
    border-bottom: 2px solid var(--ink);
    transition:
        color 0.2s,
        border-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-ghost:hover {
    color: var(--red);
    border-color: var(--red);
}
.hero-note {
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 22px;
}

/* ===== Logo marquee ===== */
.marquee-wrap {
    background: #000;
    padding: 28px 0;
}
.marquee-label {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    margin-bottom: 20px;
}
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 7%,
        #000 93%,
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 7%,
        #000 93%,
        transparent
    );
}
.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 0;
    animation: scroll-left 60s linear infinite;
    animation-play-state: paused;
}
.marquee:hover .marquee-track {
    animation-play-state: paused !important;
}
.marquee-track img {
    height: 46px;
    width: auto;
    margin: 0 36px;
    flex-shrink: 0;
}
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ===== Sections ===== */
section {
    padding: 64px 0;
}
.sec-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 16px;
}
.sec-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(31px, 3.6vw, 46px);
    line-height: 1.06;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
    max-width: 17em;
}
.sec-intro {
    font-size: 18px;
    color: var(--muted);
    max-width: 40em;
    line-height: 1.6;
}

/* ===== Speaker reel ===== */
.reel {
    background: var(--paper-2);
    padding: 64px 0 48px;
}
.reel .wrap {
    max-width: 980px;
}
.reel-frame {
    margin-top: 34px;
    aspect-ratio: 16/9;
    background: var(--ink);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

/* ===== What Drue does differently ===== */
.problem {
    background: var(--paper);
}
.problem-flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
}
.problem-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.problem-side .tag {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.problem-side h2 {
    font-family: var(--serif);
    font-size: clamp(27px, 3.1vw, 37px);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 18px;
}
.problem-side p {
    font-size: 17px;
    color: var(--muted);
    line-height: 1.64;
    margin-bottom: 15px;
}
.problem-photo {
    overflow: hidden;
    min-height: 420px;
}
.problem-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* ===== Why Drue ===== */
.why {
    background: var(--paper-2);
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-top: 36px;
    background: var(--line);
    border: 1px solid var(--line);
}
.why-card {
    background: var(--paper-2);
    padding: 38px 36px;
    position: relative;
}
.why-card-img {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 88px;
    height: 88px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.why-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.why-num {
    font-family: var(--serif);
    font-size: 27px;
    color: var(--red);
    font-weight: 600;
    margin-bottom: 14px;
    font-style: italic;
    padding-right: 104px;
}
.why-card h3 {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 11px;
    line-height: 1.13;
    padding-right: 104px;
}
.why-card p {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.6;
}

/* ===== Featured testimonial ===== */
.feat {
    background: var(--ink);
    color: var(--paper);
    padding: 72px 0;
}
.feat .wrap {
    max-width: 920px;
    text-align: center;
}
.feat .mark {
    font-family: var(--serif);
    font-size: 84px;
    line-height: 0.5;
    color: var(--gold-soft);
    height: 46px;
}
.feat blockquote {
    font-family: var(--serif);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.32;
    font-style: italic;
    margin: 0 0 30px;
    color: #fff;
}
.feat-src {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.feat-src img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.feat-src .info {
    text-align: left;
}
.feat-src .name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
}
.feat-src .role {
    font-size: 13px;
    color: var(--muted-light);
    margin-top: 3px;
}

/* ===== Testimonial grid ===== */
.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 36px;
}
.quote {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    border-radius: 2px;
}
.quote .stars {
    color: #d4a017;
    font-size: 14px;
    letter-spacing: 3px;
    margin-bottom: 16px;
}
.quote p {
    font-size: 16px;
    line-height: 1.55;
    flex: 1;
    margin-bottom: 22px;
    color: var(--ink);
}
.quote-src {
    display: flex;
    align-items: center;
    gap: 12px;
}
.quote-src img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid var(--line);
}
.quote-src .name {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
}
.quote-src .role {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.35;
}

/* ===== Topics ===== */
.topics {
    background: var(--paper-2);
}

/* ===== More Topics Accordion ===== */
.more-topics {
    background: #fff;
    padding: 72px 0 80px;
}
.more-topics-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.expand-all-btn {
    flex-shrink: 0;
    margin-top: 8px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}
.expand-all-btn:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.topic-category {
    border-top: 1px solid var(--line);
}
.topic-category:last-of-type {
    border-bottom: 1px solid var(--line);
}
.category-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    padding: 22px 0;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.category-toggle:hover .category-label {
    color: var(--red);
}
.category-label {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ink);
    flex: 1;
    transition: color 0.2s;
}
.category-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.category-arrow {
    font-size: 20px;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.2s;
    line-height: 1;
}
.category-toggle.active .category-arrow {
    transform: rotate(90deg);
}
.category-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.category-body.open {
    max-height: 3000px;
}
.category-intro {
    padding: 18px 0 2px 16px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 46em;
}
.mini-topic {
    border-top: 1px solid var(--line-light, rgba(0, 0, 0, 0.07));
}
.mini-topic:first-of-type {
    border-top: none;
}
.mini-topic-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 0 17px 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.mini-topic-head:hover h3 {
    color: var(--red);
}
.mini-for {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--muted);
    text-transform: uppercase;
    flex-shrink: 0;
    min-width: 200px;
}
.mini-topic-head h3 {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
    margin: 0;
    transition: color 0.2s;
    line-height: 1.35;
}
.mini-arrow {
    font-size: 18px;
    color: var(--muted);
    flex-shrink: 0;
    line-height: 1;
    width: 24px;
    text-align: center;
}
.mini-topic-body {
    display: none;
    padding: 0 40px 20px 16px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
}
.mini-topic-body.open {
    display: block;
}
.more-topics-cta {
    margin-top: 48px;
    padding: 36px 40px;
    background: var(--paper-2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.more-topics-cta p {
    margin: 0;
    font-size: 15px;
    color: var(--ink);
    max-width: 520px;
    line-height: 1.55;
}
@media (max-width: 680px) {
    .more-topics-header {
        flex-direction: column;
    }
    .mini-for {
        display: none;
    }
    .more-topics-cta {
        flex-direction: column;
    }
}
.topic-list {
    margin-top: 32px;
    border-top: 1px solid var(--line);
}
.topic {
    border-bottom: 1px solid var(--line);
    padding: 30px 0;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: start;
}
.topic-idx {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--red);
    padding-top: 4px;
}
.topic-head .for {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 7px;
    display: block;
}
.topic-head h3 {
    font-family: var(--serif);
    font-size: 27px;
    font-weight: 600;
    line-height: 1.12;
    color: var(--ink);
}
.topic-blurb {
    font-size: 16px;
    color: var(--muted);
    max-width: 48em;
    overflow: hidden;
    max-height: 0;
    transition:
        max-height 0.35s ease,
        margin 0.35s ease;
    line-height: 1.6;
}
.topic.open .topic-blurb {
    max-height: 220px;
    margin-top: 12px;
}
.topic-toggle {
    font-size: 26px;
    color: var(--red);
    transition: transform 0.3s;
    line-height: 1;
    padding-top: 2px;
}
.topic.open .topic-toggle {
    transform: rotate(45deg);
}

/* ===== Bio ===== */
.bio {
    background: var(--paper);
}
.bio-grid {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 60px;
    align-items: center;
}
.bio-photo-box {
    background: var(--paper-3);
    aspect-ratio: 4/5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    color: var(--muted);
    text-align: center;
    padding: 30px;
    border-radius: 2px;
}
.bio-body h2 {
    font-family: var(--serif);
    font-size: clamp(28px, 3.3vw, 40px);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
}
.bio-body p {
    font-size: 17px;
    color: var(--muted);
    margin-bottom: 16px;
    line-height: 1.62;
}
.bio-body strong {
    color: var(--ink);
    font-weight: 600;
}
.creds {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}
.cred {
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--line);
    padding: 8px 14px;
    border-radius: 2px;
    color: var(--ink);
}

/* ===== FAQ ===== */
.faq {
    background: var(--paper-2);
    padding: 56px 0;
}
.faq-list {
    margin-top: 32px;
    max-width: 50em;
}
.faq-item {
    border-bottom: 1px solid var(--line);
}
.faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    padding: 26px 40px 26px 0;
    position: relative;
    letter-spacing: -0.005em;
}
.faq-q::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 23px;
    font-size: 24px;
    color: var(--red);
    transition: transform 0.3s;
}
.faq-item.open .faq-q::after {
    transform: rotate(45deg);
}
.faq-a {
    font-size: 16.5px;
    color: var(--muted);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    line-height: 1.65;
}
.faq-item.open .faq-a {
    max-height: 360px;
    padding-bottom: 26px;
}

/* ===== Final CTA ===== */
.cta {
    background: var(--ink);
    color: var(--paper);
    padding: 72px 0;
}
.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 66px;
    align-items: start;
}
.cta-left .urgency {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-soft);
    margin-bottom: 22px;
}
.cta-left .urgency .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-soft);
}
.cta-left h2 {
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 600;
    line-height: 1.04;
    margin-bottom: 20px;
}
.cta-left h2 em {
    font-style: italic;
    color: var(--gold-soft);
}
.cta-left p {
    font-size: 18px;
    color: var(--muted-light);
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 30em;
}
.cta-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.cta-points li {
    font-size: 15.5px;
    color: rgba(255, 255, 255, 0.86);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.cta-points li::before {
    content: "✓";
    flex-shrink: 0;
    color: var(--gold-soft);
    font-weight: 700;
}
.bureau-note {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.bureau-note h3 {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}
.bureau-note p {
    font-size: 15.5px;
    color: var(--muted-light);
    line-height: 1.6;
    max-width: 32em;
    margin: 0;
}
.form-card {
    background: var(--paper);
    color: var(--ink);
    padding: 38px 36px;
    border-radius: 2px;
}
.form-card h3 {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 6px;
}
.form-card .form-sub {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 24px;
}
.field {
    margin-bottom: 16px;
}
.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    color: var(--ink);
}
.field input,
.field select,
.field textarea {
    width: 100%;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: #fff;
    transition: border-color 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--red);
}
.field textarea {
    resize: vertical;
    min-height: 70px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.form-submit {
    width: 100%;
    background: var(--red);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 6px;
}
.form-submit:hover {
    background: var(--red-deep);
}
.form-fine {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 14px;
    line-height: 1.5;
    text-align: center;
}

/* ===== Geneva social proof strip ===== */
.geneva-strip {
    position: relative;
    width: 100%;
    max-height: 480px;
    overflow: hidden;
    display: block;
    line-height: 0;
}
.geneva-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    max-height: 480px;
}
.geneva-caption {
    position: absolute;
    bottom: 18px;
    right: 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* ===== CTA with background image ===== */
.cta-has-bg {
    position: relative;
}
.cta-has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.88);
    z-index: 0;
}
.cta-has-bg .wrap {
    position: relative;
    z-index: 1;
}

/* ===== Footer ===== */
footer {
    background: var(--paper);
    padding: 44px 0 36px;
    border-top: 1px solid var(--line);
}
.foot-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.foot-brand {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
}
.foot-social {
    display: flex;
    gap: 14px;
}
.foot-social-link {
    color: var(--muted);
    transition: color 0.2s;
    display: flex;
    align-items: center;
}
.foot-social-link:hover {
    color: var(--red);
}
.foot-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.foot-nav a {
    font-size: 13.5px;
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.foot-nav a:hover {
    color: var(--red);
}
.foot-mid {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.foot-email-cta {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 14px;
}
.foot-email-cta a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 38, 26, 0.3);
    padding-bottom: 1px;
    transition: border-color 0.2s;
}
.foot-email-cta a:hover {
    border-color: var(--red);
}
.foot-contact {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.foot-contact a {
    color: var(--ink);
    font-weight: 500;
    transition: color 0.2s;
}
.foot-contact a:hover {
    color: var(--red);
}
.foot-dot {
    color: var(--line);
    font-size: 16px;
}
.foot-disclaimer {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
    line-height: 1.5;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.foot-copy {
    font-size: 12px;
    color: var(--muted);
    opacity: 0.7;
}

/* ===== Mobile ===== */

/* ===== Video hero ===== */
/* Slightly shorter , the logo strip now lives above */
.hero-video {
    position: relative;
    /* Cap the height so Googlebot's very tall render viewport
       doesn't balloon the hero and push the centered text far
       down (which made the hero appear empty in Search Console).
       1400px clears every real device, so normal rendering is
       pixel-identical; only ultra-tall viewports are capped. */
    min-height: min(calc(100vh - 72px), 1400px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000 url("/assets/hero.webp") center top / cover
        no-repeat;
}

/* ===== Marquee-top: compact credential strip between topbar and hero ===== */
.marquee-top {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.marquee-top .marquee-label {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: 0.3em;
}
.marquee-top .marquee-track img {
    height: 34px;
    margin: 0 28px;
}
.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.hero-poster {
    position: absolute;
    inset: 0;
    background-image: url("/assets/hero.webp");
    background-size: cover;
    background-position: center top;
    z-index: 0;
}
.hero-video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;
    min-width: 100%;
    height: 56.25vw;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    z-index: 1;
}
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .hero-video-bg iframe {
        display: none;
    }
}
.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        105deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.48) 55%,
        rgba(0, 0, 0, 0.28) 100%
    );
}
.hero-video-content {
    position: relative;
    z-index: 3;
    padding: 120px 0 100px;
    width: 100%;
}
.eyebrow-light {
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.24em;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.hero-video-h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(46px, 6vw, 82px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 26px;
    max-width: 14em;
}
.hero-video-h1 em {
    font-style: italic;
    color: var(--red);
}
.hero-video-sub {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.82);
    max-width: 30em;
    margin-bottom: 30px;
    line-height: 1.5;
}
.hero-urgency-light {
    background: rgba(232, 38, 26, 0.18);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(232, 38, 26, 0.4);
}
.hero-urgency-light .pulse {
    background: #fff;
}
.btn-ghost-light {
    font-weight: 600;
    font-size: 16px;
    padding: 17px 6px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    transition:
        color 0.2s,
        border-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-ghost-light:hover {
    color: var(--red);
    border-color: var(--red);
}
.hero-note-light {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 22px;
}
@media (max-width: 880px) {
    .hero-video {
        /* Cap so Googlebot's tall render viewport doesn't stretch
           the hero to ~2x a phone screen (which made the Search
           Console snapshot look zoomed/spread out). 860px ≈ one
           phone screen and clears every standard iPhone (SE...15 Pro),
           so real phones are unchanged; only the tallest devices
           (Pro Max / tablets in portrait) cap here. */
        min-height: min(100svh, 860px);
    }
    .hero-video-content {
        padding: 80px 0 70px;
    }
    .hero-video-h1 {
        font-size: clamp(40px, 10vw, 58px);
    }
    .hero-video-sub {
        font-size: 17px;
    }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-primary {
        text-align: center;
    }
    .btn-ghost-light {
        text-align: center;
        border-bottom: none;
        border: 1px solid rgba(255, 255, 255, 0.5);
        padding: 15px;
        border-radius: 2px;
        justify-content: center;
    }
}

@media (max-width: 880px) {
    .wrap {
        padding: 0 20px;
    }
    section {
        padding: 44px 0;
    }
    .nav-note {
        display: none;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .hero-text {
        padding: 40px 0 36px;
        order: 1;
    }
    .hero-photo {
        order: 2;
        height: 400px;
    }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-primary {
        text-align: center;
    }
    .btn-ghost {
        text-align: center;
        border-bottom: none;
        border: 1px solid var(--ink);
        padding: 15px;
        border-radius: 2px;
        justify-content: center;
    }
    .marquee-track img {
        height: 34px;
        margin: 0 22px;
    }
    .problem-flex {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .problem-photo {
        min-height: 280px;
        order: 1;
    }
    .problem-side {
        order: 2;
    }
    .why-grid {
        grid-template-columns: 1fr;
    }
    .proof-grid {
        grid-template-columns: 1fr;
    }
    .topic {
        grid-template-columns: 1fr auto;
        gap: 16px;
    }
    .topic-idx {
        display: none;
    }
    .bio-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .cta-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   v2 additions (2026-10-25): new sections and components. Same tokens,
   type and color system as base.css; nothing above is overridden except
   where a rule below says so.
   ===================================================================== */
[hidden] { display: none !important; }
.inline-link { color: var(--red); border-bottom: 1px solid rgba(232, 38, 26, 0.35); }
.inline-link:hover { border-color: var(--red); }
.todo { background: #fff3b0; color: #5a4a00; padding: 1px 5px; border-radius: 2px; font-weight: 600; font-size: 0.92em; font-style: normal; }
#talks, #vision-muscle, #stages, #engagements, #about, #women, #testimonials, #faq, #book, #reel, .kcard, .kit-section { scroll-margin-top: 84px; }

/* ----- Topbar: one line at every width ----- */
.topbar .wrap { gap: 14px; }
.nav-tagline { white-space: nowrap; min-width: 0; }
.nav-cta { white-space: nowrap; flex-shrink: 0; }
.nav-cta .short { display: none; }
@media (max-width: 640px) {
    .topbar .wrap { height: 54px; gap: 10px; padding: 0 16px; }
    .nav-tagline { font-size: 11.5px; letter-spacing: 0; }
    .nav-cta { font-size: 12px; padding: 8px 12px; }
    .nav-cta .long { display: none; }
    .nav-cta .short { display: inline; }
}

/* ----- Hero ----- */
.hero-video-content { padding: 100px 0 84px; }
.hero-video-h1 { margin-bottom: 20px; }
.hero-lead { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; color: #fff; line-height: 1.2; margin-bottom: 12px; max-width: 22em; }
.hero-video-sub { margin-bottom: 14px; }
.hero-cred { font-size: 13px; color: rgba(255, 255, 255, 0.62); letter-spacing: 0.02em; margin-bottom: 28px; max-width: 40em; line-height: 1.5; }
.hero-actions .btn-primary { display: inline-block; }
.hero-who { font-size: 13.5px; color: rgba(255, 255, 255, 0.58); margin-top: 10px; max-width: 46em; line-height: 1.55; }
.hero-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); padding: 7px 12px; border-radius: 2px; margin: -4px 0 24px; }
.hero-static .hero-video-content { padding: 84px 0 72px; }
@media (max-width: 880px) {
    .hero-video-content { padding: 72px 0 60px; }
    .hero-lead { font-size: 21px; }
}

/* ----- Prose sections (Why an artist, Built to anchor, Easy to book) ----- */
.split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.split .sec-title { margin-bottom: 0; }
.prose { font-size: 18px; color: var(--muted); line-height: 1.65; max-width: 40em; }
.prose p + p { margin-top: 16px; }
.prose strong { color: var(--ink); font-weight: 600; }
.why-artist { background: var(--paper); border-top: 1px solid var(--line); }
.anchor-sec { background: var(--paper); border-top: 1px solid var(--line); }
.easy { background: var(--ink); color: var(--paper); }
.easy .sec-eyebrow { color: var(--gold-soft); }
.easy .sec-title { color: #fff; }
.easy .prose { color: rgba(255, 255, 255, 0.8); }
.easy .prose p + p { color: var(--gold-soft); }
@media (max-width: 880px) {
    .split { grid-template-columns: 1fr; gap: 18px; }
    .prose { font-size: 17px; }
}

/* ----- Stages ----- */
.stages { background: var(--ink); color: var(--paper); padding: 72px 0 52px; }
.stages .sec-eyebrow { color: var(--gold-soft); }
.stages .sec-title { color: #fff; max-width: 14em; }
.stage-list { list-style: none; margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; max-width: 1040px; }
.stage-list li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.stage-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 2px; background: var(--gold-soft); }
.stage-list li.upcoming { color: rgba(255, 255, 255, 0.68); }
.marquee-stages { padding: 22px 0 30px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 880px) {
    .stages { padding: 52px 0 40px; }
    .stage-list { grid-template-columns: 1fr; gap: 12px; }
}

/* ----- Recent engagements ----- */
.engagements { background: var(--paper-2); }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.case { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 30px 28px 28px; display: flex; flex-direction: column; }
.case-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 4px 9px; border-radius: 2px; margin-bottom: 16px; width: fit-content; }
.case dl { margin: 0; }
.case dt { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin: 18px 0 5px; }
.case dt:first-child { margin-top: 0; }
.case dd { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0; }
.case dd.response { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.35; }
.case .response-src { display: block; font-family: var(--sans); font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
@media (max-width: 880px) {
    .case-grid { grid-template-columns: 1fr; gap: 16px; }
    .case { padding: 24px 20px; }
}

/* ----- Reel share link ----- */
.reel-share { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14.5px; color: var(--muted); }
.reel-share a { color: var(--ink); font-weight: 600; word-break: break-all; border-bottom: 1px solid var(--line); }
.reel-share a:hover { color: var(--red); border-color: var(--red); }
.copy-btn { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 7px 12px; border-radius: 4px; cursor: pointer; transition: border-color 0.2s; }
.copy-btn:hover { border-color: var(--ink); }

/* ----- Why Drue tweaks ----- */
.why-card p a.inline-link { font-weight: 600; }

/* ----- Keynote cards ----- */
.talks { background: var(--paper); }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 36px; }
.chip { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; color: var(--ink); background: var(--paper-2); transition: all 0.2s; line-height: 1.3; }
.chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.kcard { border: 1px solid var(--line); border-radius: 2px; background: var(--paper); padding: 40px 40px 36px; margin-bottom: 22px; }
.kcard-flagship { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.kcard-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; line-height: 1.4; }
.kcard h3, .kcard .kcard-title { font-family: var(--serif); font-size: clamp(27px, 3vw, 36px); font-weight: 600; line-height: 1.1; margin-bottom: 10px; max-width: 22em; letter-spacing: -0.01em; }
.kcard .title-note { font-size: 14px; color: var(--muted); font-style: italic; margin: -2px 0 10px; }
.kcard-best { font-size: 15px; color: var(--muted); margin-bottom: 22px; line-height: 1.5; max-width: 50em; }
.kcard-best strong { color: var(--ink); font-weight: 600; }
.kcard-para { font-size: 17px; line-height: 1.62; color: var(--ink); max-width: 46em; margin-bottom: 26px; }
.kcard-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 44px; margin-bottom: 24px; }
.kcard-cols.single { grid-template-columns: 1fr; }
.kcard-cols h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.kcard-cols ul { list-style: none; }
.kcard-cols li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.5; color: var(--ink); margin-bottom: 8px; }
.kcard-cols li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; background: var(--red); }
.kcard-cols p { font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.kcard-format { font-size: 13.5px; color: var(--muted); letter-spacing: 0.01em; }
.kcard-format strong { color: var(--ink); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.14em; margin-right: 8px; }
.kcard-cred { font-family: var(--serif); font-style: italic; font-size: 17.5px; color: var(--ink); margin-top: 14px; max-width: 44em; line-height: 1.4; }
.kcard-callout { margin: 22px 0 4px; padding: 14px 18px; border-left: 3px solid var(--gold); background: var(--paper-2); font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 46em; }
.kcard-link { display: inline-block; margin-top: 20px; font-weight: 600; font-size: 15px; border-bottom: 2px solid var(--ink); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
.kcard-link:hover { color: var(--red); border-color: var(--red); }
.talks-line { font-size: 16.5px; color: var(--muted); line-height: 1.6; max-width: 46em; margin-top: 30px; }
.talks-library { display: inline-block; margin-top: 16px; font-family: var(--serif); font-size: 23px; font-weight: 600; border-bottom: 2px solid var(--ink); transition: color 0.2s, border-color 0.2s; }
.talks-library:hover { color: var(--red); border-color: var(--red); }
@media (max-width: 880px) {
    .kcard { padding: 26px 20px 24px; margin-bottom: 16px; }
    .kcard-cols { grid-template-columns: 1fr; gap: 20px; }
    .chip-row { margin: 20px 0 28px; }
}

/* ----- Inline CTA (after cards, after testimonials) ----- */
.cta-inline { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta-inline .btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta-inline .btn-primary { display: inline-block; }
.cta-inline-note { font-size: 13.5px; color: var(--muted); line-height: 1.5; max-width: 40em; }
@media (max-width: 880px) {
    .cta-inline .btns { flex-direction: column; align-items: stretch; width: 100%; }
    .cta-inline .btn-primary, .cta-inline .btn-ghost { text-align: center; }
}

/* ----- The Vision Muscle ----- */
.vision { background: var(--paper-2); border-top: 1px solid var(--line); }
.vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 8px; }
.vision-lead { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.2; margin-bottom: 22px; }
.vision-steps { list-style: none; margin-bottom: 26px; }
.vision-steps li { font-size: 18px; line-height: 1.5; margin-bottom: 8px; color: var(--muted); }
.vision-steps strong { font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--red); margin-right: 8px; }
.vision-copy { font-size: 17px; color: var(--muted); line-height: 1.62; max-width: 36em; }
.vm-diagram { width: 100%; height: auto; display: block; }
.vm-diagram .node { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.vm-diagram .label { font-family: var(--serif); font-size: 27px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.vm-diagram .cap { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--muted); text-anchor: middle; font-weight: 600; }
.vm-diagram .arrow { fill: none; stroke: var(--red); stroke-width: 2.5; }
.vm-diagram .ret { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.vm-diagram .head { fill: var(--red); }
.vm-diagram .head-gold { fill: var(--gold); }
.vm-diagram .ret-label { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--gold); text-anchor: middle; font-weight: 600; }
.vm-v { display: none; }
@media (max-width: 880px) {
    .vision-grid { grid-template-columns: 1fr; gap: 28px; }
    .vm-h { display: none; }
    .vm-v { display: block; max-width: 300px; margin: 0 auto; }
    .vision-steps li { font-size: 17px; }
}

/* ----- Testimonial pairs on audience pages ----- */
.proof-grid.two { grid-template-columns: 1fr 1fr; max-width: 900px; }
@media (max-width: 880px) { .proof-grid.two { grid-template-columns: 1fr; } }

/* ----- Secondary page header (library, kit) ----- */
.page-head { background: var(--paper-2); padding: 56px 0 44px; border-bottom: 1px solid var(--line); }
.page-head .sec-title { margin-bottom: 14px; }
.back-link { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 18px; }
.back-link:hover { color: var(--red); }
.cta-band { background: var(--ink); color: var(--paper); padding: 56px 0; }
.cta-band .sec-title { color: #fff; max-width: 20em; }
.cta-band .cta-inline { margin-top: 20px; }
.cta-band .cta-inline-note { color: rgba(255, 255, 255, 0.7); }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.cta-band .btn-ghost:hover { color: var(--red); border-color: var(--red); }

/* ----- Library ----- */
.library .topics { padding-top: 56px; }
.library .more-topics { padding-top: 24px; }
.library .topic-blurb { max-height: none; margin-top: 10px; }
.library .topic { cursor: default; }
.library .topic-toggle { display: none; }
.library .topic.open .topic-blurb { max-height: none; }

/* ----- Bio ----- */
.bio-body p .inline-link { font-weight: 600; }

/* ----- CTA/form additions ----- */
.cta-kit { margin-top: 26px; }
.cta-left .urgency { display: inline-flex; }

/* ----- iOS Safari zooms the page when a focused input is smaller than 16px; keep form text at 16px on phones ----- */
@media (max-width: 880px) {
    .field input, .field select, .field textarea { font-size: 16px; }
}

/* ===== 2026-10-25 revision: reorder, hero, lead testimonial ===== */
.eyebrow-light .red { color: var(--red); }
.hero-video-h1 { font-size: clamp(40px, 5.2vw, 72px); max-width: 15em; }
.hero-static .hero-video-h1 { font-size: clamp(34px, 4.4vw, 58px); max-width: 18em; }
.hero-video-sub em { font-style: italic; }
.hero-points { list-style: none; margin: 22px 0 12px; max-width: 46em; }
.hero-points li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); margin-bottom: 6px; }
.hero-points li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 2px; background: var(--gold-soft); }
.hero-points strong { color: #fff; font-weight: 600; }
.hero-who a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.45); transition: color 0.2s, border-color 0.2s; }
.hero-who a:hover { color: var(--red); border-color: var(--red); }
.quote-lead { grid-column: span 2; }
.proof { background: var(--paper); }
.talks { background: var(--paper-2); }
.vision { background: var(--paper); }
.easy { background: var(--paper-2); color: var(--ink); border-top: 1px solid var(--line); }
.easy .sec-eyebrow { color: var(--red); }
.easy .sec-title { color: var(--ink); }
.easy .prose { color: var(--muted); }
.easy .prose p + p { color: var(--ink); font-weight: 500; }
.easy .cta-inline { margin-top: 26px; }
.stages { border-top: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 880px) {
    .hero-video-h1 { font-size: clamp(34px, 8.6vw, 46px); }
    .hero-static .hero-video-h1 { font-size: clamp(30px, 7.6vw, 40px); }
    .quote-lead { grid-column: auto; }
    .hero-points li { font-size: 13.5px; }
}

/* ----- Topbar tagline: full line on desktop, short proof line on phones ----- */
.nav-tagline .short { display: none; }
@media (max-width: 640px) {
    .nav-tagline .long { display: none; }
    .nav-tagline .short { display: inline; }
}

/* ----- Headings use the full container width; they wrap only when they must, and never leave one word alone ----- */
.sec-title, .stages .sec-title, .cta-band .sec-title, .hero-video-h1, .hero-lead, .kcard h3, .kcard .kcard-title { max-width: none; }
h1, h2, h3 { text-wrap: balance; }
.hero-video-h1 { font-size: clamp(40px, 4.4vw, 62px); }
.hero-static .hero-video-h1 { font-size: clamp(34px, 4vw, 54px); }
.split { display: block; }
.split .sec-title { margin-bottom: 18px; }
.split .prose { max-width: 46em; }
.easy .split .cta-inline { margin-top: 22px; }
@media (max-width: 880px) {
    .hero-video-h1 { font-size: clamp(34px, 8.6vw, 46px); }
    .hero-static .hero-video-h1 { font-size: clamp(30px, 7.6vw, 40px); }
}

/* ----- Reel: full-width container so its title fits on one line; the player grows with it ----- */
.reel .wrap { max-width: 1180px; }

/* ----- Audience pages: unique sections ----- */
.why-now { background: var(--paper-2); }
.why-now .prose { max-width: 46em; }
.case-single .case-grid { grid-template-columns: 1fr; max-width: 760px; margin-top: 26px; }
.cred-band { background: var(--ink); color: rgba(255, 255, 255, 0.84); padding: 34px 0; font-size: 16px; line-height: 1.6; }
.cred-band p { max-width: 60em; }
.faq .cta-inline { margin-top: 34px; }

/* ----- Booking section redesign (2026-10-25): anchor on the form card, lean left column, kit button after the form ----- */
#book-section { scroll-margin-top: 84px; }
.cta-grid { grid-template-rows: auto auto; }
.cta-grid .cta-left { grid-column: 1; grid-row: 1; }
.cta-grid .cta-form-col { grid-column: 2; grid-row: 1 / span 2; }
.cta-grid .cta-kit { grid-column: 1; grid-row: 2; margin-top: 0; align-self: start; }
.cta-left p { margin-bottom: 0; }
.problem-photo img { aspect-ratio: 900 / 824; }
.geneva-strip img { aspect-ratio: 1600 / 568; }
@media (max-width: 880px) {
    .cta-grid { grid-template-rows: none; }
    .cta-grid .cta-left, .cta-grid .cta-form-col, .cta-grid .cta-kit { grid-column: auto; grid-row: auto; }
    .cta-grid .cta-kit { margin-top: 6px; }
    .geneva-strip img { aspect-ratio: 1600 / 568; }
}

/* ----- Anchor jumps are instant. Smooth scrolling over a page this long never completed in Chrome
   and undershot in other browsers while lazy images loaded; instant jumps land on the target every time. ----- */
html { scroll-behavior: auto; }

/* ----- How an Artist Leads AI Transformation: lede, red phrases, proof row ----- */
.why-artist .lede { font-family: var(--serif); font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; margin: 4px 0 22px; max-width: 34em; }
.why-artist .lede em { font-style: italic; color: var(--red); }
.why-artist .prose { max-width: 46em; }
.why-artist .prose p { margin: 0; }
.hl { color: var(--red); font-weight: 600; }
.proof-row { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 36px; margin: 26px 0 24px; max-width: 1000px; }
.proof-row li { border-top: 2px solid var(--ink); padding-top: 14px; }
.proof-row strong { display: block; font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.1; margin-bottom: 6px; }
.proof-row span { font-size: 15px; color: var(--muted); line-height: 1.5; }
@media (max-width: 880px) {
    .proof-row { grid-template-columns: 1fr; gap: 14px; margin: 22px 0 20px; }
    .proof-row li { border-top-width: 1px; padding-top: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .proof-row strong { font-size: 22px; margin: 0; }
}

/* ----- How an Artist: text beside a stage photo ----- */
.artist-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: stretch; margin-top: 4px; }
.artist-photo { margin: 0; position: relative; min-height: 440px; border-radius: 2px; overflow: hidden; background: var(--ink); }
.artist-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% top; }
.artist-grid .proof-row { max-width: none; gap: 20px 24px; }
.artist-grid .proof-row strong { font-size: 22px; }
@media (max-width: 880px) {
    /* minmax(0, 1fr) keeps the photo's intrinsic width from widening the column; the img stays absolute inside the 3:2 box */
    .artist-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .artist-grid > * { min-width: 0; }
    .artist-photo { order: -1; min-height: 0; aspect-ratio: 3 / 2; }
}

/* ----- How an Artist: PwC Madrid photo, equal columns so the backdrop title stays in frame ----- */
.artist-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
.artist-photo { min-height: 460px; }
.artist-photo img { object-position: 56% center; }
.artist-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 18px 14px; text-align: right; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); }
.artist-grid .proof-row { gap: 16px 18px; }
.artist-grid .proof-row strong { font-size: 20px; }
@media (max-width: 880px) {
    .artist-grid { gap: 20px; }
    .artist-photo img { object-position: center; }
    .artist-photo figcaption { font-size: 10px; padding: 28px 12px 10px; }
}

/* ----- Mobile override for the section photo, last so it wins the cascade over the desktop rules above ----- */
@media (max-width: 880px) {
    .artist-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .artist-photo { min-height: 0; aspect-ratio: 3 / 2; }
}

/* ----- Panoramic stage band (PwC Madrid) ----- */
.pano-strip, .pano-strip img { max-height: 580px; }
.pano-strip img { aspect-ratio: 2400 / 861; object-position: center 45%; }
@media (max-width: 880px) {
    .pano-strip img { height: 230px; aspect-ratio: auto; object-position: 50% 45%; }
}

/* ----- Testimonials (2026-10-27): featured quote above a clean 3x2 grid, stars retired, larger bylines, red italic em in the title ----- */
.proof .sec-title em { font-style: italic; color: var(--red); }
.quote-feat { margin: 10px 0 40px; padding: 0 0 40px; border-bottom: 1px solid var(--line); }
.quote-feat blockquote { margin: 0; max-width: 30em; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(26px, 2.9vw, 34px); line-height: 1.32; color: var(--ink); }
.quote-feat .quote-src { margin-top: 26px; gap: 16px; }
.quote-feat .quote-src .role { font-size: 13px; line-height: 1.4; margin-top: 3px; }
.quote-feat + .proof-grid { margin-top: 0; }
.quote .stars { display: none; }
.quote-src { gap: 14px; }
.quote-src img { width: 56px; height: 56px; }
.quote-src .name { font-size: 15px; letter-spacing: 0.02em; }
.quote-src .role { font-size: 12.5px; }
@media (max-width: 880px) {
    .quote-feat { margin: 6px 0 32px; padding-bottom: 32px; }
    .quote-feat blockquote { font-size: 24px; }
}

/* ----- Photo strips on wide screens (2026-10-27): a strip never upscales its photo or shows only a slice of it.
   Each strip caps at the photo's own width, centered on a ground that matches its neighbors (paper-2 between
   light sections, black between the dark bands), and the caption stays on the photo. ----- */
.geneva-strip { max-height: none; background: var(--paper-2); }
.geneva-strip img { max-height: none; height: auto; max-width: 1600px; margin: 0 auto; }
.geneva-strip .geneva-caption { right: max(24px, calc((100% - 1600px) / 2 + 24px)); }
.pano-strip, .pano-strip img { max-height: none; }
.pano-strip img { max-width: 1620px; }
.pano-strip .geneva-caption { right: max(24px, calc((100% - 1620px) / 2 + 24px)); }
.strip-dark { background: #000; }
/* The dark split (What Drue does differently) caps at the same width, centered on ink, so its photo never outgrows a wide window. */
.problem { background: var(--ink); }
.problem-flex { max-width: 1600px; margin: 0 auto; }
@media (max-width: 880px) {
    .pano-strip img { height: 230px; max-width: none; }
}

/* ----- Keynote card with a portrait (2026-10-27 experiment, the women's leadership card): copy left, photo column right ----- */
.kcard-split { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; }
.kcard-split .kcard-body { padding: 40px 40px 36px; min-width: 0; }
.kcard-photo { margin: 0; position: relative; overflow: hidden; background: var(--paper-3); }
.kcard-photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) {
    .kcard-split { grid-template-columns: minmax(0, 1fr); }
    .kcard-split .kcard-body { padding: 26px 20px 24px; }
    .kcard-photo { order: -1; aspect-ratio: 1 / 1; }
}

/* ----- Audience, in their own words (2026-10-27): attendee quotes after the case studies; no headshots, serif pull quotes over ink rules ----- */
.audience { background: var(--paper); border-top: 1px solid var(--line); }
.audience .sec-title em { font-style: italic; color: var(--red); }
.aud-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; margin-top: 30px; }
.aud-quote { margin: 0; border-top: 2px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; }
.aud-quote blockquote { flex: 1; margin: 0 0 14px; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--ink); }
.aud-quote figcaption.quote-src { margin-top: 2px; }
.aud-initials { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-3); border: 1px solid var(--line); font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: 0.02em; color: var(--muted); }
@media (max-width: 880px) {
    .aud-grid { grid-template-columns: 1fr; gap: 22px; }
    .aud-quote { border-top-width: 1px; padding-top: 14px; }
}

/* ----- Built to anchor your program (2026-10-28): full-width serif statement, red italic highlights on the three roles ----- */
.anchor-sec .split { display: block; }
.anchor-sec .sec-title { margin-bottom: 24px; }
.anchor-sec .prose { max-width: none; }
.anchor-sec .prose p { font-family: var(--serif); font-weight: 600; font-size: clamp(23px, 2.35vw, 30px); line-height: 1.32; letter-spacing: -0.005em; color: var(--ink); }
.anchor-sec .prose em { font-style: italic; color: var(--red); }
@media (max-width: 880px) {
    .anchor-sec .sec-title { margin-bottom: 16px; }
}

/* ----- Case study cards (2026-10-28): client logo replaces the Client row ----- */
.case-logo { display: flex; align-items: center; height: 44px; box-sizing: content-box; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.case-logo img { width: auto; display: block; }

/* ----- Easy to book (2026-10-28): copy left, backstage photo right ----- */
.easy-split { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: stretch; }
.easy-text { min-width: 0; align-self: start; }  /* photo top sits level with the h2, never the intro text (Drue's rule) */
.easy-text .sec-title { margin-bottom: 18px; }
.easy-text .prose { max-width: 40em; }
.easy .easy-text .cta-inline { margin-top: 22px; }
.easy-photo { margin: 0; position: relative; overflow: hidden; min-height: 400px; border-radius: 2px; background: var(--paper-3); }
.easy-photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) {
    .easy-split { grid-template-columns: 1fr; gap: 24px; }
    .easy-photo { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
}

/* ----- Where she has spoken (2026-10-28): title + venue index left, Milken photo level with the title ----- */
.stages { padding-bottom: 84px; }
.stages-split { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 64px; align-items: start; }
.stages-text { min-width: 0; }
.stages-text .sec-title { max-width: none; margin-bottom: 22px; }
.stages-split .stage-list { margin-top: 0; display: block; max-width: none; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.stages-split .stage-list li { padding: 13px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); display: flex; flex-direction: column; gap: 3px; }
.stages-split .stage-list li::before { display: none; }
.stages-split .stage-list .venue { font-size: 16.5px; line-height: 1.4; color: #fff; }
.stages-split .stage-list .role { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); line-height: 1.5; }
.stages-split .stage-list li.upcoming .venue { color: rgba(255, 255, 255, 0.72); }
.stages-photo { margin: 44px 0 0; }  /* eyebrow height + title offset: photo top level with the h2 */
.stages-photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.stages-photo figcaption { margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
@media (max-width: 880px) {
    .stages { padding-bottom: 56px; }
    .stages-split { grid-template-columns: 1fr; gap: 24px; }
    .stages-photo { order: -1; margin-top: 0; }
    .stages-text .sec-title { margin-bottom: 18px; }
}

/* ----- Why Drue (2026-10-28, option B): the photo is a full-height column flush to the card edge; phone shows it above the text ----- */
.why-card { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 200px; }
.why-card-text { padding: 38px 36px 40px; min-width: 0; }
.why-card-img { position: relative; top: auto; right: auto; width: auto; height: auto; border-radius: 0; overflow: hidden; }
.why-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-num, .why-card h3 { padding-right: 0; }
@media (max-width: 880px) {
    .why-card { grid-template-columns: 1fr; }
    .why-card-img { order: -1; aspect-ratio: 3 / 2; }
    .why-card-text { padding: 26px 24px 32px; }
}

/* ----- Speaker bio and AV rider links (2026-10-29): the download line beside each primary CTA, replacing the retired kit page button ----- */
.kit-links { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.4; white-space: nowrap; }
.kit-links a { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: color 0.2s, border-color 0.2s; }
.kit-links a:hover { color: var(--red); border-color: var(--red); }
.kit-links .sep { color: var(--muted); font-weight: 400; margin: 0 8px; }
.kit-links.light, .cta-band .kit-links { color: #fff; }
.kit-links.light a, .cta-band .kit-links a { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.kit-links.light a:hover, .cta-band .kit-links a:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.kit-links.light .sep, .cta-band .kit-links .sep { color: rgba(255, 255, 255, 0.5); }
.cta-kit .kit-links { margin-top: 2px; }