/* ============================================
   RESET & BASE — Ohio Ignite LP
   Visual system mirrors the Refinery Documentary LP.
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --gold: #c2a859;
    --gold-bright: #d4b86a;
    --gold-dark: #a68d44;
    --ink: #0c0d10;
    --ink-2: #111215;
    --ink-3: #1a1d21;
    --ink-card: #161a1f;
    --line: rgba(255, 255, 255, 0.08);
    --paper: #f6f3ee;
    --paper-2: #ffffff;
    --text-dark: #1a1d21;
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-muted-dark: rgba(26, 29, 33, 0.65);
    --shadow-card: 0 22px 50px rgba(0, 0, 0, 0.12);
    --shadow-card-hover: 0 30px 60px rgba(0, 0, 0, 0.18);
    --shadow-text: 0 2px 16px rgba(0, 0, 0, 0.55);
    /* Drives .hero h1. The presents eyebrow deliberately does NOT use this —
       at H1 size it wrapped for every host name over ~20 characters. */
    --hero-h1-size: clamp(26px, 3.8vw, 42px);
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    color: var(--text-dark);
    background-color: var(--ink-2);
    line-height: 1.7;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; }

/* ============================================
   LAYOUT
   ============================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }

.section {
    padding: 110px 0;
    background-color: var(--paper);
    color: var(--text-dark);
    position: relative;
}

.section-dark {
    background-color: var(--ink-2);
    color: #ffffff;
    background-image:
        radial-gradient(ellipse at top right, rgba(194, 168, 89, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(194, 168, 89, 0.04) 0%, transparent 50%);
}

.section-heading {
    font-size: clamp(28px, 4.4vw, 50px);
    font-weight: 900;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
    text-align: center;
    line-height: 1.05;
    text-wrap: balance;
    text-transform: uppercase;
}

.section-heading-left { text-align: left; }

.section-subheading {
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.7;
    color: var(--text-muted-dark);
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
    font-weight: 500;
}

.section-dark .section-subheading { color: var(--text-muted); }

/* ============================================
   GOLD UNDERLINE
   ============================================ */
.hl-underline {
    position: relative;
    display: inline;
    color: inherit;
    background-image: linear-gradient(180deg, transparent 65%, rgba(194, 168, 89, 0.55) 65%, rgba(194, 168, 89, 0.55) 92%, transparent 92%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    white-space: nowrap;
}

.section-dark .hl-underline {
    background-image: linear-gradient(180deg, transparent 65%, rgba(194, 168, 89, 0.45) 65%, rgba(194, 168, 89, 0.45) 92%, transparent 92%);
    color: var(--gold-bright);
}

/* ============================================
   EYEBROW + CALLOUT PILL
   ============================================ */
.eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}

.eyebrow-dark { color: var(--gold-dark); }
.eyebrow-gold { color: var(--gold-bright); }
.eyebrow-center { display: block; text-align: center; }

/* Desktop size raised 15px → 19.5px (+30%) on 2026-08-07 at the host's request.
   The gap and the flanking hairlines scale with it so the lockup grows as one
   unit. Verified one line for all 9 host names in cities.js at 780px and up;
   the longest ("Iglesia Menonita de Blumenau Presents", Chihuahua) wraps only in
   a 769–779px band. Mobile is deliberately held at the original 15px below. */
.hero-presents {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18.2px;
    margin: 0 0 16px;
    color: #fff;
    font-size: 19.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.hero-presents::before,
.hero-presents::after {
    content: "";
    flex: 0 0 39px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
}

.callout-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 6px 14px;
    margin-bottom: 14px;
    color: var(--gold-bright);
    background: rgba(194, 168, 89, 0.12);
    border: 1px solid rgba(194, 168, 89, 0.45);
    border-radius: 999px;
}

.callout-pill-gold {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 22px 48px;
    border: 2px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    box-shadow: 0 14px 30px rgba(194, 168, 89, 0.25);
}

.btn-gold {
    background-color: #E93D3D;
    color: #ffffff;
    border-color: #E93D3D;
}

.btn-gold:hover {
    background-color: #d03030;
    border-color: #d03030;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(233, 61, 61, 0.45);
}

.btn-large { font-size: 16px; padding: 26px 64px; }
.btn-xl { font-size: 16px; padding: 24px 56px; }

/* ============================================
   TOP URGENCY BAR
   ============================================ */
.top-bar {
    background-color: var(--ink);
    padding: 11px 0;
    border-bottom: 1px solid rgba(194, 168, 89, 0.25);
    background-image: linear-gradient(180deg, rgba(194, 168, 89, 0.05) 0%, transparent 100%);
    position: relative;
    z-index: 5;
}

.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.top-bar-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #e74c3c;
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    animation: topPulse 2s infinite;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes topPulse {
    0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.top-bar-text {
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.top-bar-text strong {
    color: var(--gold-bright);
    font-weight: 800;
}

.top-bar-cta {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 14px;
    background-color: #E93D3D;
    border: 1px solid #E93D3D;
    border-radius: 2px;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.top-bar-cta:hover {
    background-color: #d03030;
    color: #ffffff;
    border-color: #d03030;
}

/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px 0 40px;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top, rgba(194, 168, 89, 0.14) 0%, transparent 60%),
        linear-gradient(180deg, rgba(12, 13, 16, 0.88) 0%, rgba(12, 13, 16, 0.78) 40%, rgba(12, 13, 16, 0.95) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

.hero-logo {
    width: 60px;
    height: auto;
    margin: 0 auto 18px;
    opacity: 0.95;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.hero h1 {
    font-size: var(--hero-h1-size);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: -0.03em;
    line-height: 1.08;
    text-wrap: balance;
    text-transform: uppercase;
    text-shadow: var(--shadow-text);
}

.hero h1 .hl-underline {
    color: var(--gold-bright);
    background-image: linear-gradient(180deg, transparent 70%, rgba(194, 168, 89, 0.6) 70%, rgba(194, 168, 89, 0.6) 92%, transparent 92%);
}

.hero h1 .hl-underline .punc { color: #ffffff; }

.hero-sub {
    font-size: clamp(14px, 1.5vw, 16px);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.5;
    margin: 0 auto 18px;
    max-width: 640px;
    font-weight: 500;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.step-label {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
    margin: 0 auto 18px;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    display: inline-block;
    padding: 6px 18px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
}

.vsl-wrap {
    max-width: 720px;
    margin: 0 auto 20px;
    border: 2px solid rgba(194, 168, 89, 0.55);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(194, 168, 89, 0.18),
                0 0 60px rgba(194, 168, 89, 0.18);
}

.vsl-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background-color: #000;
}

.vsl-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.hero-cta-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* In the flex hero row the CTA subline ("Events fill fast.") would otherwise
   sit beside the button, vertically centered. Force it onto its own full-width
   line so it stacks centered under the button, as the .cta-note intent says. */
.hero-cta-row .cta-note {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
}

.hero-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.hero-meta strong {
    color: var(--gold-bright);
    font-weight: 800;
    margin-right: 4px;
    font-size: 16px;
}

.meta-divider {
    width: 1px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.25);
}

/* Hero "Hosted by" credit — sharp-cornered gold-outlined box under .hero-meta.
   Only rendered when the city has a `host` value (see hero.ejs). */
.hero-host {
    margin-top: 24px;
    text-align: center;
}

.hero-host span {
    display: inline-block;
    padding: 14px 30px;
    border: 2px solid rgba(194, 168, 89, 0.75);
    background: rgba(194, 168, 89, 0.12);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

/* The host name is the point of the block — it outranks the "Hosted by" label
   by ~9px so the two stop reading as one uniform strip. */
.hero-host b {
    color: var(--gold-bright);
    font-weight: 900;
    font-size: clamp(19px, 2.4vw, 24px);
    letter-spacing: 0.06em;
}

/* Organizer contact, directly under the host credit. Deliberately quiet — it
   is a support affordance, not a CTA, and must not compete with the buy button. */
.hero-contact {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    /* Long addresses (oakwoods.consulting@gmail.com) must not overflow on phones. */
    overflow-wrap: anywhere;
}

.hero-contact strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

.hero-contact a {
    color: var(--gold-bright);
    border-bottom: 1px solid rgba(194, 168, 89, 0.45);
}

.hero-contact a:hover { border-bottom-color: var(--gold-bright); }

/* ============================================
   EDITORIAL COPY (long-form text blocks)
   ============================================ */
.editorial-copy {
    max-width: 680px;
    margin: 0 auto;
}

.editorial-copy p {
    font-size: clamp(16px, 1.7vw, 18px);
    line-height: 1.85;
    margin-bottom: 22px;
    color: var(--text-dark);
    font-weight: 400;
}

.section-dark .editorial-copy p { color: rgba(255, 255, 255, 0.85); }
.editorial-copy p:last-child { margin-bottom: 0; }

.editorial-copy strong {
    color: var(--text-dark);
    font-weight: 700;
}
.section-dark .editorial-copy strong { color: #ffffff; }

.editorial-copy em {
    font-style: italic;
    color: var(--gold-dark);
}
.section-dark .editorial-copy em { color: var(--gold-bright); }

.standout-line {
    font-size: clamp(18px, 2vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: var(--text-dark) !important;
    margin: 28px 0 !important;
    text-align: center;
}

.section-dark .standout-line { color: #ffffff !important; }

.standout-line.standout-gold,
.section-dark .standout-line.standout-gold {
    color: var(--gold-bright) !important;
    font-weight: 800 !important;
}

.callout-emphasis {
    font-size: clamp(17px, 1.85vw, 20px) !important;
    font-weight: 700 !important;
    color: var(--gold-dark) !important;
    line-height: 1.5 !important;
    text-align: center;
    margin: 24px 0 !important;
}

.callout-block {
    background-color: rgba(194, 168, 89, 0.08);
    border-left: 4px solid var(--gold);
    padding: 24px 28px;
    margin: 28px 0;
    border-radius: 0 4px 4px 0;
}

.callout-block p {
    margin-bottom: 0 !important;
    font-size: clamp(16px, 1.7vw, 18px) !important;
    font-weight: 600 !important;
    line-height: 1.65 !important;
    color: var(--text-dark) !important;
}

.section-dark .callout-block {
    background-color: rgba(194, 168, 89, 0.1);
    border-left-color: var(--gold-bright);
}

.section-dark .callout-block p { color: #ffffff !important; }

/* ============================================
   STUCK + GRAVEYARD section centered headings
   ============================================ */
.section-stuck .editorial-copy,
.section-graveyard .editorial-copy { text-align: left; }

.section-stuck .editorial-copy .standout-line,
.section-graveyard .editorial-copy .standout-line { text-align: left; }

/* ============================================
   PILLARS
   ============================================ */
.section-pillars {
    background-color: var(--paper);
    text-align: center;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 26px;
    max-width: 1180px;
    margin: 0 auto;
    text-align: left;
}

.pillar-card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 40px 30px;
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid var(--gold);
    box-shadow: var(--shadow-card);
    position: relative;
}

.pillar-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
}

.pillar-icon {
    width: 78px;
    height: 78px;
    margin-bottom: 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(212, 184, 106, 0.22) 0%, rgba(194, 168, 89, 0.08) 60%, transparent 100%),
        linear-gradient(135deg, #f6f1e2 0%, #ece2c6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 -3px 8px rgba(166, 141, 68, 0.18),
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        0 12px 28px rgba(194, 168, 89, 0.28),
        0 0 0 1px rgba(194, 168, 89, 0.35);
    position: relative;
}

.pillar-icon::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px dashed rgba(194, 168, 89, 0.35);
    pointer-events: none;
}

.pillar-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(58%) sepia(56%) saturate(372%) hue-rotate(11deg) brightness(91%) contrast(85%);
}

.pillar-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px !important;
    line-height: 1 !important;
}

.pillar-card h3 {
    font-size: clamp(17px, 1.7vw, 20px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    color: var(--text-dark);
    text-transform: uppercase;
    text-wrap: balance;
}

.pillar-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-muted-dark);
}

.pillars-foot {
    max-width: 700px;
    margin: 56px auto 0;
    text-align: center;
    font-size: clamp(17px, 1.85vw, 20px);
    font-weight: 700;
    color: var(--gold-dark);
    line-height: 1.5;
}

/* ============================================
   SCRIPTURE BLOCK (anchors the knowing/doing gap)
   ============================================ */
.scripture-block {
    margin: 34px 0;
    padding: 26px 30px;
    border-left: 3px solid var(--gold);
    background: rgba(194, 168, 89, 0.06);
    border-radius: 0 6px 6px 0;
}

.scripture-quote {
    font-size: 20px;
    line-height: 1.55;
    font-style: italic;
    font-weight: 500;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}

.scripture-ref {
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-bright) !important;
    margin-bottom: 0 !important;
}

/* ============================================
   THE SWAP (experience, not a talk)
   ============================================ */
.swap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
}

.swap-card {
    background-color: var(--ink-card);
    border: 1px solid var(--line);
    padding: 30px 28px;
    border-radius: 6px;
    position: relative;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.swap-card:hover {
    border-color: rgba(194, 168, 89, 0.35);
    transform: translateY(-4px);
}

.swap-from {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.swap-card h3 {
    font-size: 19px;
    line-height: 1.35;
    color: #ffffff;
    text-transform: none;
    letter-spacing: -0.01em;
    font-weight: 800;
}

.swap-foot {
    max-width: 720px;
    margin: 46px auto 0;
    text-align: center;
    font-size: 19px;
    line-height: 1.6;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.swap-foot em {
    color: var(--gold-bright);
    font-style: italic;
}

/* ============================================
   NOT-LIST (six things Ignite is not)
   ============================================ */
.notlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
}

.notlist-card {
    background-color: var(--ink-card);
    border: 1px solid var(--line);
    padding: 32px 28px;
    border-radius: 6px;
    position: relative;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.notlist-card:hover {
    border-color: rgba(194, 168, 89, 0.35);
    transform: translateY(-4px);
}

.notlist-no {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 4px 12px;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    margin-bottom: 14px;
}

.notlist-card h3 {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: none;
    letter-spacing: -0.01em;
    font-weight: 800;
}

.notlist-card p {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.65);
}

/* ============================================
   WHO IT'S FOR (signs)
   ============================================ */
.section-whofor {
    background-color: var(--paper);
}

.signs-list {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.signs-list li {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 22px 26px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 4px solid var(--gold);
    border-radius: 4px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.signs-list li:hover {
    transform: translateX(4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.signs-num {
    font-size: 22px;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    width: 38px;
}

.signs-list li p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-dark);
    font-weight: 500;
    margin: 0;
}

.signs-foot {
    max-width: 720px;
    margin: 36px auto 0;
    padding: 22px 26px;
    background: rgba(26, 29, 33, 0.04);
    border-radius: 4px;
    text-align: center;
}

.signs-foot p {
    font-size: 15px;
    color: var(--text-muted-dark);
    line-height: 1.6;
}

.signs-foot strong { color: var(--text-dark); font-weight: 800; }

/* ============================================
   PHOTO STRIP
   ============================================ */
.photo-strip {
    background-color: var(--ink);
    overflow: hidden;
    line-height: 0;
}

.photo-strip img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================
   DETAILS TABLE
   ============================================ */
.section-details {
    position: relative;
    overflow: hidden;
}

.details-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.details-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
}

.details-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 13, 16, 0.82) 0%, rgba(12, 13, 16, 0.92) 100%);
}

.details-content {
    position: relative;
    z-index: 1;
}

.details-table {
    max-width: 680px;
    margin: 32px auto 28px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(194, 168, 89, 0.25);
    border-radius: 6px;
    overflow: hidden;
}

.details-row {
    display: flex;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    align-items: flex-start;
}

.details-row:last-child { border-bottom: none; }

.details-label {
    flex: 0 0 130px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-bright);
    padding-top: 2px;
}

.details-value {
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
}

.details-value em {
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    font-weight: 400;
}

.details-note {
    max-width: 640px;
    margin: 0 auto 32px;
    padding: 18px 24px;
    background: rgba(194, 168, 89, 0.08);
    border-left: 3px solid var(--gold);
    border-radius: 0 4px 4px 0;
}

.details-note p {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

.details-note strong {
    color: var(--gold-bright);
    font-weight: 700;
}

.details-cta { text-align: center; }

.details-map {
    max-width: 680px;
    margin: 0 auto 24px;
    border: 1px solid rgba(194, 168, 89, 0.25);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.details-map iframe {
    display: block;
    width: 100%;
    filter: grayscale(0.15);
}

.details-map-link {
    display: block;
    padding: 12px 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-bright);
    text-align: center;
    text-decoration: none;
    border-top: 1px solid rgba(194, 168, 89, 0.25);
    transition: background 0.2s ease;
}

.details-map-link:hover {
    background: rgba(194, 168, 89, 0.08);
}

/* ============================================
   COACH MATT
   ============================================ */
.section-coach {
    background-color: var(--paper);
}

.coach-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 56px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.coach-image img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
}

.coach-content .section-heading {
    font-size: clamp(26px, 3.4vw, 38px);
    margin-bottom: 24px;
}

.coach-cta {
    margin-top: 28px;
}

.coach-feature-photo {
    max-width: 1100px;
    margin: 56px auto 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    background-color: var(--ink);
}

.coach-feature-photo img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

.coach-feature-photo figcaption {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted-dark);
    padding: 16px 20px;
    background-color: #ffffff;
    border-top: 3px solid var(--gold);
}

@media (max-width: 880px) {
    .coach-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .coach-image { max-width: 320px; margin: 0 auto; }
    .coach-content .section-heading { text-align: center; }
    .coach-cta { text-align: center; }
    .coach-feature-photo { margin-top: 40px; }
    .coach-feature-photo img { aspect-ratio: 4 / 3; }
    .coach-feature-photo figcaption { font-size: 11px; padding: 14px 16px; }
}

/* ============================================
   SECTION CTA (graveyard etc.)
   ============================================ */
.section-cta {
    text-align: center;
    margin-top: 36px;
}

/* ============================================
   SOCIAL PROOF (VSL + GOOGLE REVIEWS)
   ============================================ */
.section-proof {
    background-color: var(--paper);
    text-align: center;
}

.proof-video {
    max-width: 880px;
    margin: 32px auto 56px;
}

.proof-video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background-color: #000;
    border: 2px solid rgba(194, 168, 89, 0.55);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18),
                0 0 0 1px rgba(194, 168, 89, 0.18);
}

.proof-video-frame > span,
.proof-video-frame .wistia_embed {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.proof-reviews {
    max-width: 1080px;
    margin: 0 auto;
}

/* ============================================
   OBJECTION SECTION
   ============================================ */
.section-objection {
    position: relative;
    overflow: hidden;
}

.objection-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.objection-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.objection-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 13, 16, 0.82) 0%, rgba(12, 13, 16, 0.92) 100%);
}

.objection-content {
    position: relative;
    z-index: 1;
}

.objection-cta {
    text-align: center;
    margin-top: 32px;
}

/* ============================================
   EMBEDDED CHECKOUT SECTION
   ============================================ */
.section-embedded-checkout {
    position: relative;
    overflow: hidden;
    padding: 100px 0 90px;
    text-align: center;
    color: #ffffff;
}

.section-embedded-checkout .final-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.section-embedded-checkout .final-cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-embedded-checkout .final-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 13, 16, 0.92) 0%, rgba(12, 13, 16, 0.90) 40%, rgba(12, 13, 16, 0.96) 100%);
}

.embedded-checkout-content {
    position: relative;
    z-index: 1;
}

.section-embedded-checkout .section-heading { color: #ffffff; }

.section-embedded-checkout .final-sub {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto 32px;
    max-width: 600px;
}

.embed-checkout-card {
    background-color: #ffffff;
    color: #1c1919;
    border-radius: 14px;
    max-width: 620px;
    margin: 12px auto 32px;
    text-align: left;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(194, 168, 89, 0.25);
    overflow: hidden;
}

.embed-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #1c1919 0%, #2a2523 100%);
    color: #ffffff;
    border-bottom: 3px solid var(--gold);
}

.embed-summary-name {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
}

.embed-summary-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
}

.embed-summary-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.embed-summary-amount {
    font-size: 32px;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -0.02em;
}

.embed-summary-note {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
}

.embed-step {
    padding: 26px 28px;
    border-bottom: 1px solid #f0efeb;
}

.embed-step:last-of-type { border-bottom: none; }

.embed-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.embed-step-title {
    font-size: 13px;
    font-weight: 800;
    color: #1c1919;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

.embed-methods {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

.embed-method-chip {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
    padding: 4px 9px;
    background-color: #f0f0f0;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.embed-stripe-mount {
    min-height: 200px;
    border: 1.5px dashed #d5d2ca;
    border-radius: 8px;
    background-color: #fafaf7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.embed-stripe-placeholder { text-align: center; max-width: 340px; }

.embed-stripe-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(194, 168, 89, 0.12);
    border-radius: 50%;
    color: var(--gold);
}

.embed-stripe-title {
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #1c1919;
}

.embed-trust {
    background-color: #f9f8f4;
    padding: 18px 28px;
    border-top: 1px solid #f0efeb;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.embed-trust-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #666;
    line-height: 1.55;
}

.embed-trust-line svg {
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 2px;
}

.embed-trust-line strong { color: #1c1919; font-weight: 700; }

.hero-scarcity {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    margin-top: 8px;
}

/* ============================================
   FAQ
   ============================================ */
.section-faq {
    background-color: var(--paper);
}

.section-faq .section-heading { margin-bottom: 36px; }

.faq-list {
    max-width: 740px;
    margin: 0 auto;
}

.faq-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark);
    position: relative;
    padding-right: 60px;
    transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--gold);
    font-weight: 400;
    transition: transform 0.25s ease;
    line-height: 1;
}

.faq-item[open] summary::after {
    content: '−';
    transform: translateY(-50%) rotate(180deg);
}

.faq-item:hover summary { color: var(--gold-dark); }

.faq-body { padding: 0 26px 22px; }

.faq-body p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-muted-dark);
}

/* ============================================
   FINAL CTA
   ============================================ */
.section-final-cta {
    position: relative;
    overflow: hidden;
    padding: 120px 0 110px;
    text-align: center;
    color: #ffffff;
}

.section-final-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.section-final-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-final-cta .container-narrow {
    position: relative;
    z-index: 1;
}

.section-final-cta .section-heading { color: #ffffff; }

.final-sub {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    margin: 0 auto 32px;
    max-width: 620px;
}

.final-disclaimer {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Supporting line under a CTA button (e.g. free events: "Events fill fast.").
   Gold reads on both the light coach section and the dark CTA sections. */
.cta-note {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.final-logo {
    width: 56px;
    margin: 36px auto 0;
    opacity: 0.7;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background-color: var(--ink);
    padding: 32px 0;
    border-top: 1px solid var(--line);
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease;
}

.footer-links a:hover { color: var(--gold-bright); }

/* ============================================
   STICKY MOBILE CTA
   ============================================ */
.sticky-cta {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 100;
    padding: 18px 20px;
    background: #E93D3D;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    display: none;
}

.sticky-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 768px) {
    .sticky-cta { display: block; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .section { padding: 80px 0; }
    .section-heading { font-size: clamp(22px, 5.8vw, 30px); margin-bottom: 20px; }
    .section-subheading { margin-bottom: 36px; }
    /* Mobile hero — simpler BG (mirrors KSP 2-day funnel): drop the photo, use a dark base + soft gold radial. */
    .hero {
        padding: 14px 0 48px;
        background: radial-gradient(ellipse 100% 70% at 50% -5%, rgba(194, 168, 89, 0.14) 0%, transparent 55%), #1c1919;
    }
    .hero .hero-bg { display: none; }
    :root { --hero-h1-size: clamp(22px, 6vw, 30px); }
    .btn { padding: 18px 32px; font-size: 13px; }
    .btn-large { padding: 22px 44px; font-size: 14px; }
    /* Keep the CTA label on one line — the longest is "Reserve My Spot · $49.99".
       Tighter side padding plus a vw-scaled size so it still fits on ~360px phones. */
    .btn-xl {
        padding: 22px 20px;
        font-size: clamp(12px, 3.6vw, 14px);
        white-space: nowrap;
    }
    .top-bar { padding: 10px 0; }
    .top-bar-text { font-size: 12px; }
    .top-bar-cta { font-size: 10px; padding: 4px 10px; }
    .editorial-copy p { font-size: 16px; line-height: 1.75; }
    .standout-line { font-size: 18px !important; margin: 22px 0 !important; }
    .signs-list li { padding: 18px 20px; gap: 16px; }
    .signs-num { font-size: 20px; width: 32px; }
    .signs-list li p { font-size: 15px; }
    .details-row { flex-direction: column; gap: 4px; padding: 16px 20px; }
    .details-label { flex: 0 0 auto; font-size: 11px; }
    .details-value { font-size: 14px; }
    .embed-summary { padding: 20px 22px; }
    .embed-summary-name { font-size: 15px; }
    .embed-summary-amount { font-size: 28px; }
    .embed-step { padding: 22px 22px; }
    .embed-trust { padding: 16px 22px; }
    .vsl-wrap { margin-bottom: 22px; }
    /* Hold the presents eyebrow at its original 15px on phones. The +30% desktop
       bump must NOT reach mobile: host names are long ("Warwick Hope Church
       Presents" is 28 uppercase chars against ~342px of usable width), and this
       line already occupies two lines at 15px. Measured at 19.5px it becomes
       three lines on 360px and 390px phones, pushing the pill, headline and
       video further below the fold. */
    .hero-presents { font-size: 15px; gap: 14px; }
    .hero-presents::before,
    .hero-presents::after { flex: 0 0 30px; }
    .hero-meta { gap: 14px; font-size: 12px; }
    /* Ease the pill down a step so the longest church names stay on two lines. */
    .hero-host span { padding: 12px 20px; font-size: 13px; letter-spacing: 0.1em; }
    .hero-host b { font-size: 17px; }
    .hero-contact { font-size: 12px; }
    .meta-divider { display: none; }
    .pillars-grid { gap: 18px; }
    .pillar-card { padding: 32px 24px; }
    .notlist-card { padding: 24px 22px; }
    .swap-card { padding: 24px 22px; }
    .swap-card h3 { font-size: 17px; }
    .swap-foot { font-size: 17px; margin-top: 34px; }
    .scripture-block { padding: 22px 22px; margin: 28px 0; }
    .scripture-quote { font-size: 17px; }
    .section-final-cta { padding: 80px 0 70px; }
    .final-logo { margin-top: 28px; }
    .site-footer .container { justify-content: center; text-align: center; }
}

/* ============================================
   SOLD-OUT BADGE + WAITLIST MODAL (DFW)
   ============================================ */
.sold-out-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.2em 0.7em;
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--gold-bright);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: middle;
}

.waitlist-modal {
    width: min(92vw, 460px);
    /* The site reset zeroes <dialog> margin, which kills the UA modal
       centering — restore it explicitly. max-height keeps a tall form
       scrollable on short viewports instead of overflowing off-screen. */
    margin: auto;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 0;
    border: 1px solid var(--gold);
    border-radius: 14px;
    background: var(--ink-card);
    color: var(--paper);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.waitlist-modal::backdrop { background: rgba(0, 0, 0, 0.7); }
.waitlist-modal__close-row { display: flex; justify-content: flex-end; margin: 0; }
.waitlist-modal__close {
    background: none; border: none; color: var(--paper);
    font-size: 1.6rem; line-height: 1; padding: 0.6rem 0.9rem; cursor: pointer;
    min-width: 44px; min-height: 44px;
}
.waitlist-success:focus { outline: none; }
.waitlist-modal__body { padding: 0 1.75rem 1.9rem; }
.waitlist-modal__title { margin: 0 0 0.4rem; font-size: 1.5rem; color: var(--paper); }
.waitlist-modal__sub { margin: 0 0 1.25rem; color: rgba(255, 255, 255, 0.72); }
.waitlist-form { display: flex; flex-direction: column; gap: 0.7rem; }
/* display:flex above would override the [hidden] attribute's display:none,
   leaving the form visible after a successful submit — re-assert the hide. */
.waitlist-form[hidden] { display: none; }
.waitlist-form__row { display: flex; gap: 0.7rem; }
.waitlist-form__row input { flex: 1 1 0; min-width: 0; }
.waitlist-form input {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: var(--ink);
    color: var(--paper);
    font-size: 1rem;
}
.waitlist-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.waitlist-form__submit { margin-top: 0.4rem; }
.waitlist-form__submit:disabled { opacity: 0.6; cursor: progress; }
.waitlist-form__error { color: #ff8a8a; margin: 0.3rem 0 0; font-size: 0.9rem; }

/* Terms & Conditions consent — minimal inline checkbox (rendered only when
   the city has a termsUrl). Sits just above the submit button. */
.waitlist-consent { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.1rem; }
.waitlist-consent input { margin-top: 0.15rem; width: 16px; height: 16px; accent-color: var(--gold); flex: none; }
.waitlist-consent span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.62); line-height: 1.5; }
.waitlist-consent__link { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.waitlist-success__title { font-size: 1.25rem; font-weight: 700; color: var(--gold-bright); margin: 0 0 0.4rem; }