/* ==========================================================================
   TP DIRECTORY ENGINE — Stylesheet
   ========================================================================== */

/* Scope everything to .tp-directory-wrap */
.tp-directory-wrap { max-width: 1200px; margin: 0 auto; }

/* --- FILTER BAR --- */
.tp-filters {
    display: flex; gap: 12px; flex-wrap: wrap;
    justify-content: center; margin: 0 auto 20px; max-width: 960px;
}
.tp-filters select {
    flex: 1; min-width: 160px; height: 48px;
    background: #F7F9F4; border: 1px solid #C5A065; border-radius: 8px;
    color: #3A5A40; padding: 12px 36px 12px 14px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C5A065' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    cursor: pointer; transition: border-color 0.2s;
    box-sizing: border-box;
}
.tp-filters select:focus { outline: none; border-color: #3A5A40; box-shadow: 0 0 0 2px rgba(58,90,64,0.15); }
.tp-filters select option:disabled { color: #ccc; }
.tp-filters select optgroup { color: #3A5A40; font-weight: 700; font-style: normal; }
.tp-filters select optgroup option { font-weight: 400; padding-left: 8px; }

.tp-reset {
    height: 48px !important; padding: 0 24px !important;
    background: transparent !important; border: 1px solid #C5A065 !important; border-radius: 8px !important;
    color: #C5A065 !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: 0.1em !important; cursor: pointer !important; transition: all 0.3s !important;
}
.tp-reset:hover { background: #3A5A40 !important; border-color: #3A5A40 !important; color: #F7F9F4 !important; }

/* --- CHIPS --- */
.tp-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; margin: 0 auto 12px; max-width: 960px; min-height: 8px;
}
.tp-chip {
    background: #3A5A40; color: #F7F9F4; border: 1px solid #C5A065;
    border-radius: 50px; padding: 6px 16px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(58,90,64,0.15);
}
.tp-chip:hover { background: #C5A065; color: #3A5A40; border-color: #3A5A40; }

/* --- COUNT --- */
.tp-count {
    text-align: center; margin: 12px 0 24px;
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.15em; color: #3A5A40;
}

/* --- GRID --- */
.tp-grid-filtered {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px; padding: 0;
    transition: opacity 0.15s;
}
.tp-grid-filtered.tp-loading { opacity: 0.3; pointer-events: none; }

/* --- CARD --- */
.tp-card {
    display: flex !important; align-items: center !important; gap: 14px !important;
    background: #fff !important; border: 1px solid #E5EADF !important; border-radius: 12px !important;
    padding: 14px !important; text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 4px 10px rgba(58,90,64,0.04) !important;
}
.tp-card:hover {
    border-color: #C5A065 !important; transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(58,90,64,0.12) !important;
}

/* Image */
.tp-card-img {
    width: 72px !important; height: 72px !important; flex-shrink: 0 !important;
    border-radius: 8px !important; overflow: hidden !important;
    background: #F7F9F4 !important;
}
.tp-card-img img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    display: block !important; border-radius: 8px !important;
}

/* Info */
.tp-card-info {
    display: flex !important; flex-direction: column !important; gap: 2px !important;
    min-width: 0 !important;
}
.tp-card-province {
    font-size: 10px !important; font-weight: 700 !important; color: #C5A065 !important;
    text-transform: uppercase !important; letter-spacing: 0.1em !important;
}
.tp-card-name {
    font-size: 17px !important; font-weight: 700 !important; color: #3A5A40 !important;
    line-height: 1.2 !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.tp-card-role {
    display: inline-block !important; margin-top: 4px !important;
    font-size: 11px !important; font-weight: 600 !important; color: #3A5A40 !important;
    background: #fff !important; border: 1px solid #C5A065 !important; border-radius: 50px !important;
    padding: 4px 12px !important; line-height: 1.2 !important;
    white-space: nowrap !important; align-self: flex-start !important;
}

/* Empty state */
.tp-empty {
    grid-column: 1 / -1; text-align: center; color: #999;
    font-size: 15px; padding: 60px 20px;
}

/* --- SPEAKERS --- */
.tp-grid-speakers {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 16px !important;
}
.tp-grid-keynotes { margin-bottom: 32px !important; }
.tp-card-talk { font-size: 13px !important; color: #555 !important; line-height: 1.3 !important; font-style: italic !important; }
.tp-card-location { font-size: 11px !important; color: #888 !important; }

/* Keynote card */
.tp-card-keynote {
    position: relative !important;
    border-color: #C5A065 !important;
    background: linear-gradient(135deg, #FFFDF7 0%, #FFF9ED 100%) !important;
    box-shadow: 0 4px 14px rgba(197,160,101,0.15) !important;
}
.tp-card-keynote:hover {
    box-shadow: 0 12px 28px rgba(197,160,101,0.25) !important;
}
.tp-card-keynote .tp-card-img { width: 88px !important; height: 88px !important; }
.tp-keynote-badge {
    position: absolute !important; top: -1px !important; right: -1px !important;
    background: #C5A065 !important; color: #fff !important;
    font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important;
    padding: 4px 12px !important;
    border-radius: 0 12px 0 8px !important;
}

/* --- VENUES --- */
.tp-venues {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 24px;
}
.tp-venue-card {
    background: #fff; border: 1px solid #E5EADF; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 10px rgba(58,90,64,0.04); transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1);
}
.tp-venue-card:hover { border-color: #C5A065; box-shadow: 0 12px 28px rgba(58,90,64,0.12); }
.tp-venue-img img { width: 100%; height: 220px; object-fit: cover; display: block; }
.tp-venue-body { padding: 20px; }
.tp-venue-name { font-size: 20px; font-weight: 700; color: #3A5A40; margin: 6px 0 8px; }
.tp-venue-name a { color: inherit; text-decoration: none; }
.tp-venue-desc { font-size: 14px; color: #555; line-height: 1.5; margin: 12px 0; }
.tp-venue-link {
    font-size: 12px; font-weight: 700; color: #C5A065; text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.tp-venue-link:hover { color: #3A5A40; }

/* --- LOCATIONS --- */
.tp-loc-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
}
.tp-loc-card {
    display: flex !important; flex-direction: column !important;
    background: #fff !important; border: 1px solid #E5EADF !important; border-radius: 12px !important;
    text-decoration: none !important; overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 4px 10px rgba(58,90,64,0.04) !important;
}
.tp-loc-card:hover {
    border-color: #C5A065 !important; transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(58,90,64,0.12) !important;
}
.tp-loc-card-img img {
    width: 100% !important; height: 200px !important;
    object-fit: cover !important; display: block !important;
}
.tp-loc-card-body {
    padding: 16px !important;
    display: flex !important; flex-direction: column !important; gap: 4px !important;
}
.tp-loc-card-name {
    font-size: 18px !important; font-weight: 700 !important; color: #3A5A40 !important;
    line-height: 1.25 !important;
}
.tp-loc-card-desc {
    font-size: 13px !important; color: #777 !important; line-height: 1.4 !important;
    margin: 6px 0 0 !important; padding: 0 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important; overflow: hidden !important;
}

/* --- ORGANIZATIONS --- */
.tp-org-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 20px !important;
}
.tp-org-card {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    background: #fff !important; border: 1px solid #E5EADF !important; border-radius: 12px !important;
    padding: 20px 14px 16px !important; text-decoration: none !important; text-align: center !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 4px 10px rgba(58,90,64,0.04) !important;
}
.tp-org-card:hover {
    border-color: #C5A065 !important; transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(58,90,64,0.12) !important;
}
.tp-org-card-logo {
    width: 80px !important; height: 80px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin-bottom: 10px !important;
}
.tp-org-card-logo img {
    max-width: 100% !important; max-height: 100% !important;
    object-fit: contain !important; display: block !important;
}
.tp-org-card-body {
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important;
}
.tp-org-card-name {
    font-size: 15px !important; font-weight: 700 !important; color: #3A5A40 !important;
    line-height: 1.25 !important;
}
.tp-org-card .tp-card-role {
    align-self: center !important;
}
.tp-org-card-year {
    font-size: 10px !important; color: #C5A065 !important;
    font-weight: 600 !important; letter-spacing: 0.1em !important;
    text-transform: uppercase !important; margin-top: 2px !important;
}

/* --- MOBILE --- */
@media (max-width: 600px) {
    .tp-filters {
        display: grid !important; grid-template-columns: 1fr 1fr;
        padding: 0 12px; gap: 8px;
    }
    .tp-filters select {
        min-width: 0; height: auto;
        padding: 9px 28px 9px 10px; font-size: 11px;
        background-position: right 8px center;
    }
    .tp-filters select:only-of-type {
        grid-column: 1 / -1;
    }
    .tp-reset {
        grid-column: 1 / -1; width: auto; justify-self: center;
        padding: 9px 40px; height: auto; font-size: 11px;
    }
    .tp-grid-filtered { grid-template-columns: 1fr; padding: 0 12px; }
    .tp-count { font-size: 12px; margin: 8px 0 16px; }
    .tp-chips { gap: 6px; margin-bottom: 8px; }
    .tp-chip { font-size: 10px; padding: 5px 12px; }
    .tp-grid-speakers { grid-template-columns: 1fr !important; }
    .tp-loc-grid { grid-template-columns: 1fr !important; }
    .tp-org-grid { grid-template-columns: 1fr !important; }
    .tp-venues { grid-template-columns: 1fr; }
}


/* ==========================================================================
   DIRECTORY LANDING PAGE ([tp_directory_landing])
   Section wrappers, stats, headings, CTA banner, and "View all" buttons.
   Cards reuse existing .tp-card, .tp-loc-card, .tp-org-card styles.
   ========================================================================== */

.tp-dir-landing { max-width: 100% !important; }
.tp-dir-section--cream { background: #F7F9F4 !important; }
.tp-dir-section--white { background: #FFFFFF !important; }

.tp-dir-section-inner {
    max-width: 1200px !important; margin: 0 auto !important; padding: 44px 0 !important;
}

/* --- Stats bar --- */
.tp-dir-stats-section {
    padding: 8px 0 0 !important; max-width: 520px !important;
    border-top: 1px solid #E5EADF !important;
}
.tp-dir-stats { display: flex !important; justify-content: center !important; gap: 0 !important; }
.tp-dir-stat {
    flex: 1 !important; max-width: 200px !important; text-align: center !important;
    padding: 20px 12px !important; position: relative !important;
}
.tp-dir-stat:not(:last-child)::after {
    content: '' !important; position: absolute !important; right: 0 !important;
    top: 20% !important; height: 60% !important; width: 1px !important; background: #E5EADF !important;
}
.tp-dir-stat-number {
    font-family: 'Lora', serif !important; font-size: 36px !important;
    font-weight: 700 !important; color: #3A5A40 !important;
    line-height: 1.1 !important; margin-bottom: 4px !important;
}
.tp-dir-stat-label {
    font-family: 'Inter', sans-serif !important; font-size: 11px !important;
    font-weight: 700 !important; color: #C5A065 !important;
    text-transform: uppercase !important; letter-spacing: 0.12em !important;
}

/* --- Section text --- */
.tp-dir-kicker {
    display: inline-block !important; font-family: 'Inter', sans-serif !important;
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.14em !important;
    color: #C5A065 !important; margin-bottom: 12px !important; padding: 0 40px !important;
}
.tp-dir-heading {
    font-family: 'Lora', serif !important; font-size: 28px !important;
    font-weight: 700 !important; line-height: 1.3 !important;
    color: #3A5A40 !important; margin-bottom: 12px !important; padding: 0 40px !important;
}
.tp-dir-body {
    font-family: 'Inter', sans-serif !important; font-size: 15px !important;
    font-weight: 400 !important; line-height: 1.7 !important;
    color: #555 !important; max-width: 720px !important;
    margin-bottom: 28px !important; padding: 0 40px !important;
}

/* --- Card grid inset to match text padding --- */
.tp-dir-landing .tp-grid-filtered { padding: 0 40px !important; }

/* Force fixed columns for known card counts (4 locations, 4 orgs) */
.tp-dir-landing .tp-loc-grid,
.tp-dir-landing .tp-org-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 900px) {
    .tp-dir-landing .tp-loc-grid,
    .tp-dir-landing .tp-org-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* --- View all button --- */
.tp-dir-view-all { margin-top: 28px !important; text-align: center !important; }
.tp-dir-view-all-link {
    display: inline-block !important; font-family: 'Inter', sans-serif !important;
    background: #3A5A40 !important; color: #F7F9F4 !important;
    font-size: 13px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.12em !important;
    padding: 12px 32px !important; border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(58, 90, 64, 0.2) !important;
    text-decoration: none !important; transition: all 0.3s ease !important;
}
.tp-dir-view-all-link:hover {
    background: #C5A065 !important; color: #F7F9F4 !important;
    box-shadow: 0 8px 24px rgba(197, 160, 101, 0.3) !important;
}

/* --- CTA Banner --- */
.tp-dir-banner {
    background: #2D3A26 !important;
    border-top: 1px solid #C5A065 !important; border-bottom: 1px solid #C5A065 !important;
}
.tp-dir-banner-inner {
    max-width: 800px !important; margin: 0 auto !important;
    padding: 48px 40px !important; text-align: center !important;
}
.tp-dir-banner-kicker {
    display: inline-block !important; font-family: 'Inter', sans-serif !important;
    font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.16em !important;
    color: #C5A065 !important; margin-bottom: 14px !important;
}
.tp-dir-banner-heading {
    font-family: 'Lora', serif !important; font-size: 26px !important;
    font-weight: 600 !important; line-height: 1.35 !important;
    color: #F7F9F4 !important; margin-bottom: 12px !important;
}
.tp-dir-banner-body {
    font-family: 'Inter', sans-serif !important; font-size: 15px !important;
    font-weight: 400 !important; line-height: 1.7 !important;
    color: rgba(247, 249, 244, 0.65) !important; margin-bottom: 28px !important;
}
.tp-dir-banner-button {
    display: inline-block !important; font-family: 'Inter', sans-serif !important;
    background: #C5A065 !important; color: #F7F9F4 !important;
    font-size: 14px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.12em !important;
    padding: 14px 44px !important; border: none !important;
    border-radius: 8px !important; box-shadow: 0 6px 18px rgba(197, 160, 101, 0.25) !important;
    text-decoration: none !important; transition: all 0.3s ease !important;
}
.tp-dir-banner-button:hover {
    background: #F7F9F4 !important; color: #3A5A40 !important;
    box-shadow: 0 8px 24px rgba(247, 249, 244, 0.3) !important;
}
.tp-dir-banner-hint {
    font-family: 'Inter', sans-serif !important; font-size: 11px !important;
    color: rgba(247, 249, 244, 0.35) !important; margin-top: 12px !important;
}

/* --- Directory landing mobile --- */
@media (max-width: 768px) {
    .tp-dir-section-inner { padding: 36px 0 !important; }
    .tp-dir-kicker, .tp-dir-heading, .tp-dir-body { padding: 0 20px !important; }
    .tp-dir-heading { font-size: 24px !important; }
    .tp-dir-landing .tp-grid-filtered { padding: 0 20px !important; }
    .tp-dir-landing .tp-loc-grid,
    .tp-dir-landing .tp-org-grid { grid-template-columns: 1fr !important; }
    .tp-dir-stats-section { max-width: 340px !important; }
    .tp-dir-stat { padding: 16px 8px !important; }
    .tp-dir-stat-number { font-size: 28px !important; }
    .tp-dir-banner-inner { padding: 36px 20px !important; }
    .tp-dir-banner-heading { font-size: 22px !important; }
}


/* ==========================================================================
   VENUE SHOWCASE CARDS (layout="showcase" on [tp_ipc_venues])
   ========================================================================== */

.tp-venue-showcase-section {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.tp-venue-showcase-heading {
    font-family: 'Lora', serif;
    font-size: 28px;
    font-weight: 600;
    color: #3A5A40;
    margin: 0 0 8px;
}

.tp-venue-showcase-subtitle {
    font-size: 14px;
    color: #888;
    max-width: 540px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.tp-venue-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* --- Individual card --- */

.tp-venue-showcase-card {
    display: block;
    background: #ffffff;
    border: 1px solid #E5EADF;
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tp-venue-showcase-card:hover {
    border-color: #C5A065;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(58, 90, 64, 0.1);
}

/* --- Image --- */

.tp-venue-showcase-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.tp-venue-showcase-duration {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(45, 58, 38, 0.9);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 7px 16px;
    border-radius: 50px;
    backdrop-filter: blur(4px);
}

.tp-venue-showcase-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    display: block;
}

/* --- Card body --- */

.tp-venue-showcase-body {
    padding: 20px 24px 24px;
}

/* --- Event tag pills --- */

.tp-venue-showcase-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 10px;
}

.tp-venue-tag-conference {
    background: #FDF6EC;
    color: #8B6B2F;
    border: 1px solid #E8D5A8;
}

.tp-venue-tag-convergence {
    background: #EDF3EE;
    color: #3A5A40;
    border: 1px solid #C5D6C0;
}

/* --- Province label --- */

.tp-venue-showcase-province {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #C5A065;
    margin-bottom: 4px;
}

/* --- Venue name --- */

.tp-venue-showcase-name {
    font-family: 'Lora', serif;
    font-size: 20px;
    font-weight: 600;
    color: #3A5A40;
    margin: 0 0 8px;
    line-height: 1.3;
}

/* --- Description --- */

.tp-venue-showcase-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 16px;
}

/* --- CTA button --- */

.tp-venue-showcase-cta {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    background: #3A5A40;
    color: #F7F9F4;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 12px 32px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(58, 90, 64, 0.2);
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
}

.tp-venue-showcase-card:hover .tp-venue-showcase-cta {
    background: #C5A065;
    color: #F7F9F4;
    box-shadow: 0 8px 24px rgba(197, 160, 101, 0.3);
}

/* --- Mobile: stack to single column --- */

@media (max-width: 640px) {
    .tp-venue-showcase-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   CONFERENCE SPEAKER CARDS (event="conference" on [tp_ipc_speakers])
   v3.0 redesign — keynote + 2-column regular grid with descriptions.
   All classes prefixed with .tp-conf- to avoid collisions.
   ========================================================================== */

/* --- KEYNOTE CARD --- */

.tp-conf-keynote-wrap {
    margin-bottom: 30px !important;
}

.tp-conf-keynote {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    overflow: hidden !important;
    border: 1px solid rgba(197, 160, 101, 0.58) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #FFFDF7 0%, #FFF9ED 100%) !important;
    box-shadow: 0 12px 30px rgba(197, 160, 101, 0.16) !important;
}

.tp-conf-keynote__badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    padding: 14px 24px !important;
    border: 1px solid rgba(197, 160, 101, 0.7) !important;
    border-top: none !important;
    border-right: none !important;
    border-radius: 0 18px 0 16px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 4px 12px rgba(197, 160, 101, 0.08) !important;
    color: #C5A065 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

.tp-conf-keynote__media {
    grid-row: 1 / span 2 !important;
    padding: 24px 22px !important;
    border-right: 1px solid rgba(197, 160, 101, 0.18) !important;
    background: linear-gradient(145deg, rgba(58, 90, 64, 0.04) 0%, rgba(58, 90, 64, 0.015) 100%) !important;
}

.tp-conf-keynote__intro {
    align-self: end !important;
    padding: 34px 36px 10px 36px !important;
}

.tp-conf-keynote__body {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 36px 32px 36px !important;
}

/* --- SHARED SPEAKER ELEMENT STYLES --- */

.tp-conf-speaker__media {
    overflow: hidden !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #8CA089 0%, #62765F 100%) !important;
}

.tp-conf-speaker__media--square {
    aspect-ratio: 1 / 1 !important;
}

.tp-conf-speaker__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.tp-conf-speaker__location {
    display: block !important;
    margin-bottom: 8px !important;
    color: #C5A065 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.tp-conf-speaker__name {
    margin: 0 !important;
    color: #3A5A40 !important;
    font-family: 'Lora', serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
}

.tp-conf-speaker__name--keynote {
    font-size: 38px !important;
}

.tp-conf-speaker__talk {
    margin: 0 0 12px !important;
    color: #4F5B4D !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-style: italic !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

.tp-conf-speaker__talk--keynote {
    margin-bottom: 14px !important;
    font-size: 18px !important;
}

.tp-conf-speaker__desc {
    margin: 0 !important;
    color: #555555 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
}

.tp-conf-speaker__desc--keynote {
    margin-bottom: 20px !important;
}

.tp-conf-speaker__desc-wrap {
    margin-bottom: 18px !important;
}

.tp-conf-speaker__footer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-top: auto !important;
}

.tp-conf-speaker__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

.tp-conf-speaker__pill {
    display: inline-block !important;
    padding: 6px 14px !important;
    border: 1px solid #C5A065 !important;
    border-radius: 50px !important;
    background: #FFFFFF !important;
    color: #3A5A40 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.tp-conf-speaker__button {
    display: inline-block !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
    background: #3A5A40 !important;
    box-shadow: 0 6px 18px rgba(58, 90, 64, 0.18) !important;
    color: #F7F9F4 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
}

.tp-conf-speaker__button:hover {
    background: #C5A065 !important;
    color: #FFFFFF !important;
}

/* --- REGULAR SPEAKER GRID --- */

.tp-conf-speaker-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

.tp-conf-speaker {
    border: 1px solid #E5EADF !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
    box-shadow: 0 6px 18px rgba(58, 90, 64, 0.05) !important;
}

.tp-conf-speaker__header {
    display: grid !important;
    grid-template-columns: 124px 1fr !important;
    gap: 20px !important;
    align-items: center !important;
    padding: 20px 20px 0 !important;
}

.tp-conf-speaker__body {
    margin-top: 18px !important;
    padding: 16px 20px 20px !important;
    border-top: 1px solid rgba(229, 234, 223, 0.95) !important;
}

/* --- READ MORE / TRUNCATION --- */

.tp-conf-speaker__toggle {
    margin-top: 10px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #3A5A40 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

.tp-conf-speaker__toggle:hover {
    color: #C5A065 !important;
}

[data-collapsible="true"]:not(.is-expanded) .tp-conf-speaker__desc {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
}

/* --- TABLET (≤1060px) --- */

@media (max-width: 1060px) {
    .tp-conf-keynote {
        grid-template-columns: 1fr !important;
    }

    .tp-conf-keynote__media {
        padding-bottom: 20px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(197, 160, 101, 0.18) !important;
    }

    .tp-conf-keynote__media .tp-conf-speaker__media {
        max-width: 280px !important;
        margin: 0 auto !important;
    }

    .tp-conf-keynote__intro {
        padding: 26px 30px 10px !important;
    }

    .tp-conf-keynote__body {
        padding: 0 30px 30px !important;
    }

    .tp-conf-speaker-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --- MOBILE (≤768px) --- */

@media (max-width: 768px) {
    .tp-conf-keynote {
        grid-template-columns: 88px 1fr !important;
        gap: 20px !important;
        align-items: center !important;
        padding: 14px !important;
    }

    .tp-conf-keynote__badge {
        padding: 8px 14px !important;
        font-size: 10px !important;
    }

    .tp-conf-keynote__media {
        grid-row: auto !important;
        align-self: center !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .tp-conf-keynote__media .tp-conf-speaker__media {
        max-width: none !important;
        margin: 0 !important;
    }

    .tp-conf-keynote__intro {
        align-self: center !important;
        padding: 0 !important;
    }

    .tp-conf-keynote__body {
        grid-column: 1 / -1 !important;
        padding: 14px 0 0 !important;
        border-top: 1px solid rgba(197, 160, 101, 0.24) !important;
    }

    .tp-conf-speaker__name--keynote {
        font-size: 22px !important;
        line-height: 1.08 !important;
    }

    .tp-conf-speaker__talk--keynote {
        margin-bottom: 10px !important;
        font-size: 16px !important;
    }

    .tp-conf-speaker__desc--keynote {
        font-size: 13px !important;
        line-height: 1.62 !important;
        margin-bottom: 16px !important;
    }

    .tp-conf-speaker {
        padding: 14px !important;
    }

    .tp-conf-speaker__header {
        grid-template-columns: 88px 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
    }

    .tp-conf-speaker__location {
        margin: 4px 0 4px !important;
    }

    .tp-conf-speaker__name {
        font-size: 20px !important;
    }

    .tp-conf-speaker__body {
        margin-top: 12px !important;
        padding: 12px 0 0 !important;
    }

    .tp-conf-speaker__talk {
        margin-bottom: 10px !important;
        font-size: 15px !important;
    }

    .tp-conf-speaker__desc {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    [data-collapsible="true"]:not(.is-expanded) .tp-conf-speaker__desc {
        -webkit-line-clamp: 3 !important;
    }

    .tp-conf-speaker__meta {
        display: none !important;
    }

    .tp-conf-speaker__button {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 11px !important;
        text-align: center !important;
    }
}


/* ==========================================================================
   IPC16 SPEAKERS TEASER ([tp_ipc_speakers event="conference" layout="teaser"])
   Used on /events/ipc16/ landing page. Compact keynote + 3 recent speakers.
   ========================================================================== */

.tp-ipc-speakers { background: #F7F9F4 !important; }

.tp-ipc-speakers-section {
    max-width: 1200px !important; margin: 0 auto !important;
    padding: 36px 0 40px !important; text-align: center !important;
}

.tp-ipc-speakers-kicker {
    display: inline-block !important;
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.14em !important;
    color: #C5A065 !important; margin-bottom: 14px !important;
}

.tp-ipc-speakers-heading {
    font-family: 'Lora', serif !important; font-size: 28px !important;
    font-weight: 700 !important; color: #3A5A40 !important;
    margin-bottom: 8px !important;
}

.tp-ipc-speakers-sub {
    font-size: 14px !important;
    color: #888 !important;
    margin: 0 auto 32px !important; line-height: 1.6 !important;
}

/* Keynote card reuses .tp-conf-keynote from conference speaker styles above */
.tp-ipc-speakers-section .tp-conf-keynote { text-align: left !important; }

/* --- "Recently Confirmed" label --- */
.tp-ipc-speakers-recently {
    font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.14em !important;
    color: #C5A065 !important; margin-top: 28px !important; margin-bottom: 14px !important;
}

/* --- Regular speaker grid --- */
.tp-ipc-speakers-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important; margin-bottom: 20px !important;
    text-align: left !important;
}

/* Regular speaker cards reuse .tp-card from People directory styles above */

/* --- Note + CTA --- */
.tp-ipc-speakers-note {
    font-size: 13px !important; color: #999 !important;
    font-style: italic !important; margin-bottom: 24px !important;
}

.tp-ipc-speakers-cta {
    display: inline-block !important;
    background: #3A5A40 !important; color: #F7F9F4 !important;
    font-size: 13px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.12em !important;
    padding: 12px 32px !important; border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(58, 90, 64, 0.2) !important;
    text-decoration: none !important; transition: all 0.3s ease !important;
}

.tp-ipc-speakers-cta:hover {
    background: #C5A065 !important; color: #F7F9F4 !important;
    box-shadow: 0 8px 24px rgba(197, 160, 101, 0.3) !important;
}

/* --- Speaker teaser mobile --- */
@media (max-width: 768px) {
    .tp-ipc-speakers-section { padding: 40px 0 !important; }
    .tp-ipc-speakers-heading { font-size: 24px !important; }
    .tp-ipc-speakers-grid { grid-template-columns: 1fr !important; }
}


/* ════════════════════════════════════════════════════════════════════
   HOMEPAGE WIDGETS — CSS for sections that compose the homepage.

   Markup lives in pages/homepage/homepage-*.html files (Elementor HTML
   widgets). All visual properties use !important to beat theme + Elementor
   reset.css, matching the existing plugin convention.

   Variable naming: all colors use the --tp-* prefix to avoid any future
   collision with theme-defined CSS variables. The map's own layout vars
   (--tp-pad-top, --tp-grid-gap-x, etc.) remain unprefixed beyond the --tp-
   they already carry.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --tp-green: #3A5A40;
  --tp-darker-green: #2D3A26;
  --tp-deep-green: #2F472F;
  --tp-gold: #C5A065;
  --tp-gold-bright: #D9B985;
  --tp-cream: #F7F9F4;
  --tp-white: #ffffff;
  --tp-border: #E5EADF;
  --tp-surface: #FBFAF3;
  --tp-parchment: #F2EDDB;
  --tp-text-soft: #55624F;
  --tp-text-muted: #7B8476;
  --tp-map-base: #F7F9F4;
  --tp-map-hover: #FFFFFF;
  --tp-map-active: #C5A065;
  --tp-map-selected: #E5C892;
  --tp-map-stroke: rgba(45, 58, 38, 0.32);
  --tp-map-stroke-active: rgba(247, 249, 244, 0.78);
}


/* === SECTION 1: HERO === */

  .tp-home-hero *, .tp-home-hero *::before, .tp-home-hero *::after {
    box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;
  }

  .tp-home-hero {
    position: relative !important;
    min-height: 440px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 70px 14px 64px !important;
    background:
      url('https://thaipermaculture.org/wp-content/uploads/2026/05/Thailand-permaculture-green-and-gold-hero-desktop.webp') center center / cover no-repeat,
      var(--tp-darker-green) !important;
    border-bottom: 2px solid var(--tp-gold) !important;
    overflow: hidden !important;
  }

  /* Subtle dark vignette so the cream text always reads, no matter where the
     artwork ends up cropping at different viewport widths. */
  .tp-home-hero::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse at center, rgba(45, 58, 38, 0) 30%, rgba(45, 58, 38, 0.55) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .tp-home-hero-inner {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1100px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* IPC kicker strip — small but unmissable */
  .tp-home-hero-ipc {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: var(--tp-gold) !important;
    text-decoration: none !important;
    padding: 10px 22px !important;
    border-radius: 50px !important;
    background: rgba(45, 58, 38, 0.55) !important;
    border: 1px solid rgba(197, 160, 101, 0.5) !important;
    margin-bottom: 32px !important;
    transition: all 0.3s ease !important;
  }

  .tp-home-hero-ipc:hover {
    background: var(--tp-gold) !important;
    color: var(--tp-cream) !important;
    border-color: var(--tp-gold) !important;
  }

  .tp-home-hero-ipc-dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background: var(--tp-gold) !important;
    border-radius: 50% !important;
  }

  .tp-home-hero-ipc:hover .tp-home-hero-ipc-dot {
    background: var(--tp-cream) !important;
  }

  .tp-home-hero-arrow {
    display: inline-block !important;
    transition: transform 0.3s ease !important;
  }

  .tp-home-hero-ipc:hover .tp-home-hero-arrow {
    transform: translateX(3px) !important;
  }

  /* Main heading — single-line, SEO-anchored */
  .tp-home-hero-heading {
    font-family: 'Lora', serif !important;
    font-size: clamp(36px, 5.2vw, 60px) !important;
    font-weight: 700 !important;
    color: var(--tp-cream) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 20px !important;
    white-space: nowrap !important;
  }

  .tp-home-hero-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(15px, 1.3vw, 17px) !important;
    font-weight: 400 !important;
    color: rgba(247, 249, 244, 0.78) !important;
    line-height: 1.6 !important;
    /* No max-width on desktop so subtext stays on one line; mobile media query below adds wrap */
    margin-bottom: 32px !important;
    white-space: nowrap !important;
  }

  /* CTA row */
  .tp-home-hero-ctas {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Primary: Add Listing (gold solid) — the trust-building CTA */
  .tp-home-hero-cta-primary {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    background: var(--tp-gold) !important;
    color: var(--tp-cream) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 16px 38px !important;
    border: 1px solid var(--tp-gold) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 22px rgba(197, 160, 101, 0.34) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }

  .tp-home-hero-cta-primary:hover {
    background: var(--tp-cream) !important;
    color: var(--tp-green) !important;
    border-color: var(--tp-cream) !important;
    box-shadow: 0 10px 26px rgba(247, 249, 244, 0.22) !important;
    transform: translateY(-2px) !important;
  }

  /* Secondary: Explore Directory (cream outline) */
  .tp-home-hero-cta-secondary {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    background: transparent !important;
    color: var(--tp-cream) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 16px 38px !important;
    border: 1px solid rgba(247, 249, 244, 0.55) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }

  .tp-home-hero-cta-secondary:hover {
    background: var(--tp-cream) !important;
    color: var(--tp-green) !important;
    border-color: var(--tp-cream) !important;
    transform: translateY(-2px) !important;
  }

  @media (max-width: 768px) {
    .tp-home-hero {
      /* Fit the visible mobile viewport. svh accounts for the address bar
         (so it doesn't extend behind it on iOS Safari like vh does).
         Floor at 480px so it never collapses on tiny screens. */
      min-height: 480px !important;
      min-height: 90vh !important;
      min-height: 90svh !important;
      padding: 80px 22px 90px !important;
      background:
        url('https://thaipermaculture.org/wp-content/uploads/2026/05/Thailand-permaculture-green-and-gold-hero-mobile.webp') center top / cover no-repeat,
        var(--tp-darker-green) !important;
    }
    .tp-home-hero-ipc { font-size: 10px !important; letter-spacing: 0.14em !important; padding: 9px 16px !important; gap: 10px !important; margin-bottom: 22px !important; }
    .tp-home-hero-heading { font-size: 34px !important; margin-bottom: 14px !important; }
    .tp-home-hero-sub { font-size: 14px !important; margin-bottom: 24px !important; white-space: normal !important; max-width: 360px !important; }
    .tp-home-hero-ctas { width: 100% !important; flex-direction: column !important; }
    .tp-home-hero-cta-primary,
    .tp-home-hero-cta-secondary { width: 100% !important; padding: 15px 20px !important; font-size: 13px !important; }
  }
  @media (max-width: 520px) {
    .tp-home-hero-heading { font-size: 28px !important; }
  }

  @media (max-width: 480px) {
    .tp-home-hero-ipc { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
  }

  /* ── Scroll indicator (mobile only) ── */
  .tp-home-hero-scroll {
    display: none !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 56px !important;
    z-index: 3 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(197, 160, 101, 0.5) !important;
    background: rgba(45, 58, 38, 0.55) !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    animation: tpHeroScrollBounce 2.4s ease-in-out infinite !important;
  }

  .tp-home-hero-scroll svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--tp-gold) !important;
    fill: none !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  @keyframes tpHeroScrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
  }

  @media (max-width: 768px) {
    .tp-home-hero-scroll { display: flex !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    .tp-home-hero-scroll { animation: none !important; }
  }


/* === SECTION 2: IPC SPOTLIGHT === */

  .tp-home-ipc *, .tp-home-ipc *::before, .tp-home-ipc *::after {
    box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;
  }

  .tp-home-ipc { background: var(--tp-cream) !important; }

  .tp-home-ipc-section {
    max-width: 1080px !important; margin: 0 auto !important;
    padding: 72px 40px !important;
  }

  /* IPC16 brand mark — replaces the previous "IPC 16" kicker text. Inline
     SVG paths render in --tp-green via currentColor; a masked gold gradient
     sweeps across the silhouette every 12s for a metallic-glint feel. The
     same logo paths are reused in the IPC16 hero (with gold + white shimmer
     against the dark green hero); here we go green logo + gold shimmer on
     cream. Selectors are scoped to .tp-home-ipc-logo so they can't bleed
     into the IPC16 hero on the events page. */
  .tp-home-ipc-logo {
    display: block !important;
    width: clamp(240px, 32vw, 340px) !important;
    margin: 0 auto 28px !important;
    color: var(--tp-green) !important;
  }
  .tp-home-ipc-logo svg {
    display: block !important; width: 100% !important; height: auto !important;
    overflow: visible !important;
  }
  .tp-home-ipc-logo .logo-shimmer-layer { pointer-events: none !important; }
  .tp-home-ipc-logo .shimmer-sweep {
    animation: tpHomeIpcShimmer 12s linear 1.5s infinite !important;
    will-change: transform !important;
  }
  @keyframes tpHomeIpcShimmer {
    0%   { transform: translateX(-560px); }
    9%   { transform: translateX(2360px); }
    100% { transform: translateX(2360px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tp-home-ipc-logo .logo-shimmer-layer { display: none !important; }
    .tp-home-ipc-logo .shimmer-sweep { animation: none !important; }
  }

  .tp-home-ipc-heading {
    font-family: 'Lora', serif !important;
    font-size: clamp(30px, 3.4vw, 40px) !important;
    font-weight: 700 !important; color: var(--tp-green) !important;
    text-align: center !important; line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 14px !important;
    max-width: 880px !important; margin-left: auto !important; margin-right: auto !important;
  }

  .tp-home-ipc-sub {
    font-family: 'Inter', sans-serif !important; font-size: 15px !important;
    color: #666 !important; text-align: center !important; line-height: 1.65 !important;
    max-width: 620px !important; margin: 0 auto 44px !important;
  }

  .tp-home-ipc-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 24px !important; margin-bottom: 36px !important;
  }

  .tp-home-ipc-card {
    display: block !important; background: var(--tp-white) !important;
    border: 1px solid var(--tp-border) !important; border-radius: 12px !important;
    overflow: hidden !important; text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 4px 10px rgba(58, 90, 64, 0.04) !important;
  }

  .tp-home-ipc-card:hover {
    border-color: var(--tp-gold) !important; transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(58, 90, 64, 0.1) !important;
  }

  .tp-home-ipc-img {
    width: 100% !important; aspect-ratio: 16 / 9 !important;
    overflow: hidden !important; position: relative !important;
  }

  .tp-home-ipc-img img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
  }

  .tp-home-ipc-duration {
    position: absolute !important; top: 14px !important; right: 14px !important;
    background: rgba(45, 58, 38, 0.9) !important; color: var(--tp-white) !important;
    font-size: 12px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.1em !important;
    padding: 6px 14px !important; border-radius: 50px !important;
  }

  .tp-home-ipc-body { padding: 22px 24px 26px !important; }

  /* Top row: dates on left, category pill on right (matches duration pill above) */
  .tp-home-ipc-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
  }

  .tp-home-ipc-when { min-width: 0 !important; }

  /* Pill — sized to match the .tp-home-ipc-duration pill above the image */
  .tp-home-ipc-tag {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    line-height: 1.2 !important;
  }

  .tp-home-ipc-tag--conf {
    background: #FDF6EC !important; color: #8B6B2F !important;
    border: 1px solid #E8D5A8 !important;
  }

  .tp-home-ipc-tag--conv {
    background: #EDF3EE !important; color: var(--tp-green) !important;
    border: 1px solid #C5D6C0 !important;
  }

  .tp-home-ipc-dates {
    font-family: 'Lora', serif !important; font-size: 32px !important;
    font-weight: 700 !important; color: var(--tp-green) !important;
    line-height: 1.05 !important; margin-bottom: 2px !important;
  }

  .tp-home-ipc-dates-label {
    font-family: 'Inter', sans-serif !important; font-size: 10px !important;
    font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: 0.12em !important; color: var(--tp-gold) !important;
  }

  .tp-home-ipc-name {
    font-family: 'Lora', serif !important; font-size: 20px !important;
    font-weight: 600 !important; color: var(--tp-green) !important;
    margin-bottom: 10px !important; line-height: 1.3 !important;
  }

  .tp-home-ipc-desc {
    font-family: 'Inter', sans-serif !important; font-size: 14px !important;
    color: #666 !important; line-height: 1.6 !important;
    margin-bottom: 14px !important;
  }

  .tp-home-ipc-venue {
    display: block !important; font-family: 'Inter', sans-serif !important;
    font-size: 12px !important; color: #999 !important;
  }

  /* CTA below cards */
  .tp-home-ipc-cta-wrap { text-align: center !important; }

  .tp-home-ipc-cta {
    display: inline-block !important; font-family: 'Inter', sans-serif !important;
    background: var(--tp-green) !important; color: var(--tp-cream) !important;
    font-size: 14px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.12em !important;
    padding: 16px 40px !important; border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(58, 90, 64, 0.2) !important;
    text-decoration: none !important; transition: all 0.3s ease !important;
  }

  .tp-home-ipc-cta:hover {
    background: var(--tp-gold) !important; color: var(--tp-cream) !important;
    box-shadow: 0 8px 24px rgba(197, 160, 101, 0.3) !important;
  }

  @media (max-width: 768px) {
    .tp-home-ipc-section { padding: 44px 20px !important; }
    .tp-home-ipc-logo { width: min(200px, 50vw) !important; margin-bottom: 18px !important; }
    .tp-home-ipc-heading { font-size: 24px !important; }
    .tp-home-ipc-sub { font-size: 14px !important; margin-bottom: 24px !important; }
    /* Compact cards: stack but tighter, no description (already on /events/ipc16/) */
    .tp-home-ipc-grid { grid-template-columns: 1fr !important; gap: 14px !important; margin-bottom: 24px !important; }
    .tp-home-ipc-img { aspect-ratio: 16 / 9 !important; }
    .tp-home-ipc-body { padding: 16px 18px 18px !important; }
    .tp-home-ipc-row { margin-bottom: 10px !important; gap: 10px !important; }
    /* Tag stays at 12px on mobile to keep parity with the duration pill above */
    .tp-home-ipc-dates { font-size: 24px !important; }
    .tp-home-ipc-name { font-size: 17px !important; margin-bottom: 8px !important; }
    .tp-home-ipc-desc { display: none !important; }
    .tp-home-ipc-venue { font-size: 11px !important; }
    .tp-home-ipc-cta { width: 100% !important; max-width: 360px !important; padding: 16px 24px !important; }
  }


/* === SECTION 3: PROVINCE MAP === */
  /* ── Palette (CSS variables — no global pollution, just var() values) ── */
  .tp-map-section {
    --green: #3A5A40 !important;
    --deep-green: #2F472F !important;
    --darker-green: #2D3A26 !important;
    --gold: #C5A065 !important;
    --gold-bright: #D9B985 !important;
    --cream: #F7F9F4 !important;
    --white: #ffffff !important;
    --border: #D8E0D2 !important;
    --surface: #FBFAF3 !important;
    --text-soft: #55624F !important;
    --text-muted: #7B8476 !important;
    --map-base: #F7F9F4 !important;
    --map-hover: #FFFFFF !important;
    --map-active: #C5A065 !important;
    --map-selected: #E5C892 !important;
    --map-stroke: rgba(45, 58, 38, 0.32) !important;
    --map-stroke-active: rgba(247, 249, 244, 0.78) !important;
  }

  /* ── Scoped reset (only applies inside .tp-map-section) ── */
  .tp-map-section *,
  .tp-map-section *::before,
  .tp-map-section *::after {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Section wrapper (the dark green stage) ── */
  .tp-map-section {
    position: relative !important;
    width: 100% !important;
    --tp-nav-h: 72px !important;
    --tp-pad-top: clamp(16px, 2.8vh, 32px) !important;
    --tp-pad-bottom: clamp(18px, 3.2vh, 36px) !important;
    --tp-grid-gap-x: clamp(20px, 2.8vw, 42px) !important;
    --tp-grid-gap-y: clamp(10px, 1.6vh, 18px) !important;
    --tp-shell-pad-inline: clamp(24px, 3.8vw, 58px) !important;
    --tp-intro-max: 31rem !important;
    --tp-card-max: 30rem !important;
    --tp-left-track: clamp(320px, 31vw, 30rem) !important;
    --tp-map-track: clamp(300px, 33vw, 34rem) !important;
    --tp-left-track-fit: var(--tp-left-track) !important;
    --tp-map-track-fit: var(--tp-map-track) !important;
    --tp-usable-h: calc(100svh - var(--tp-nav-h) - var(--tp-pad-top) - var(--tp-pad-bottom)) !important;
    --tp-map-max-w: clamp(275px, 26vw, 400px) !important;
    --tp-map-pad-top: clamp(4px, 1vh, 12px) !important;
    --tp-map-pad-bottom: 0px !important;
    --tp-map-shift-x: clamp(0px, 0.8vw, 10px) !important;
    padding: var(--tp-pad-top) 0 var(--tp-pad-bottom) !important;
    overflow: hidden !important;
    background: var(--tp-darker-green) !important;
  }

  /* ── Two-column layout: text left, map right ── */
  .tp-map-grid {
    position: relative !important;
    z-index: 1 !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 var(--tp-shell-pad-inline) !important;
    display: grid !important;
    grid-template-columns: minmax(0, var(--tp-left-track-fit)) minmax(0, var(--tp-map-track-fit)) !important;
    grid-template-areas:
      'intro map'
      'card map' !important;
    align-items: start !important;
    justify-content: center !important;
    column-gap: var(--tp-grid-gap-x) !important;
    row-gap: var(--tp-grid-gap-y) !important;
  }

  /* ── Text column ── */
  .tp-map-text {
    grid-area: intro !important;
    width: min(100%, var(--tp-intro-max)) !important;
    max-width: none !important;
    padding: clamp(6px, 1vh, 12px) 0 0 !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.8s ease, transform 0.8s ease !important;
  }

  .tp-map-section.is-visible .tp-map-text {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .tp-map-kicker {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    color: var(--tp-gold) !important;
    margin-bottom: 16px !important;
  }

  .tp-map-heading {
    font-family: 'Lora', serif !important;
    font-size: clamp(34px, 3.6vw, 48px) !important;
    font-weight: 700 !important;
    color: var(--tp-cream) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 14px !important;
    max-width: 11ch !important;
  }

  .tp-map-subtext {
    font-size: 15px !important;
    color: rgba(247, 249, 244, 0.75) !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
    max-width: 28rem !important;
  }

  /* Active count — stat-style block. Big serif "11 Locations", small Inter
     uppercase "across 8 provinces" below. Updates as user filters/switches tab. */
  .tp-map-active-count {
    margin-top: 22px !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(247, 249, 244, 0.15) !important;
  }

  .tp-map-active-count strong {
    display: block !important;
    font-family: 'Lora', serif !important;
    font-size: clamp(36px, 4.2vw, 54px) !important;
    font-weight: 700 !important;
    color: var(--tp-cream) !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 8px !important;
  }

  .tp-map-active-sub {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    color: rgba(247, 249, 244, 0.6) !important;
  }

  .tp-map-card-wrap {
    grid-area: card !important;
    width: min(100%, var(--tp-card-max)) !important;
    align-self: start !important;
  }

  /* ── Filter card ── */
  .tp-map-filter-card {
    position: relative !important;
    background:
      linear-gradient(180deg, rgba(251, 250, 243, 0.99) 0%, rgba(250, 248, 239, 0.97) 100%) !important;
    border: 1px solid rgba(247, 249, 244, 0.18) !important;
    border-radius: 18px !important;
    padding: 16px 16px 18px !important;
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    overflow: hidden !important;
  }

  .tp-map-filter-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 22px !important;
    right: 22px !important;
    height: 2px !important;
    background: linear-gradient(90deg, rgba(197, 160, 101, 0), rgba(197, 160, 101, 0.62), rgba(197, 160, 101, 0)) !important;
  }

  /* ── Tabs ── */
  .tp-map-tabs {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
    padding: 4px !important;
    background: rgba(248, 246, 238, 0.78) !important;
    border: 1px solid rgba(221, 217, 203, 0.88) !important;
    border-radius: 15px !important;
  }

  .tp-map-tab {
    flex: 1 !important;
    padding: 9px 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    color: var(--tp-green) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
  }

  .tp-map-tab:hover {
    background: rgba(255, 255, 255, 0.66) !important;
    border-color: rgba(197, 160, 101, 0.28) !important;
  }

  .tp-map-tab.is-active {
    background: var(--tp-green) !important;
    border-color: var(--tp-green) !important;
    color: var(--tp-cream) !important;
    box-shadow: 0 6px 14px rgba(58, 90, 64, 0.11) !important;
  }

  .tp-map-tab svg {
    vertical-align: -2px !important;
    margin-right: 2px !important;
  }

  .tp-map-tab-count {
    display: inline-block !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    background: rgba(58, 90, 64, 0.08) !important;
    color: var(--tp-green) !important;
    padding: 1px 5px !important;
    border-radius: 50px !important;
    margin-left: 4px !important;
  }

  .tp-map-tab.is-active .tp-map-tab-count {
    background: rgba(247, 249, 244, 0.2) !important;
    color: var(--tp-cream) !important;
  }

  /* ── Filter panels ── */
  .tp-map-filter-panels {
    /* Tall enough for 6 filter rows + label (Locations panel).
       Keeps People panel (5 rows) at the same height — no layout shift on tab switch. */
    min-height: 290px !important;
  }

  .tp-map-filter-panel {
    display: none !important;
  }

  .tp-map-filter-panel.is-active {
    display: block !important;
  }

  /* ── Filter checklist ── */
  .tp-map-filters {
    margin-bottom: 16px !important;
  }

  .tp-map-filters-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--tp-gold) !important;
    margin-bottom: 10px !important;
  }

  .tp-map-filter {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    margin-bottom: 2px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  .tp-map-filter:hover {
    background: rgba(58, 90, 64, 0.045) !important;
    border-color: rgba(216, 224, 210, 0.88) !important;
    transform: translateX(2px) !important;
  }

  .tp-map-filter:has(input:checked) {
    background: #F0F2E9 !important;
    border-color: rgba(223, 218, 204, 0.95) !important;
    border-left: 3px solid var(--tp-gold) !important;
    padding-left: 7px !important;
  }

  .tp-map-filter input[type="radio"] {
    display: none !important;
  }

  .tp-map-filter-check {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--tp-border) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
  }

  .tp-map-filter-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--tp-green) !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    transition: all 0.15s ease !important;
  }

  .tp-map-filter input:checked ~ .tp-map-filter-check {
    border-color: var(--tp-green) !important;
  }

  .tp-map-filter input:checked ~ .tp-map-filter-check .tp-map-filter-dot {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .tp-map-filter-name {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--tp-green) !important;
    flex: 1 !important;
  }

  .tp-map-filter-count {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #8E9386 !important;
    min-width: 20px !important;
    text-align: right !important;
  }

  .tp-map-filter input:checked ~ .tp-map-filter-count {
    color: var(--tp-green) !important;
    font-weight: 800 !important;
  }

  .tp-map-legend-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #888 !important;
  }

  /* ── CTA (inside text column) ── */
  /* Explore Places — SECONDARY: green outline (sits on the cream filter card) */
  .tp-map-cta {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    background: transparent !important;
    color: var(--tp-green) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 11px 16px !important;
    border: 1px solid var(--tp-green) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
  }

  .tp-map-cta:hover {
    background: var(--tp-green) !important;
    color: var(--tp-cream) !important;
    border-color: var(--tp-green) !important;
    box-shadow: 0 8px 18px rgba(58, 90, 64, 0.22) !important;
    transform: translateY(-1px) !important;
  }

  /* ── CTA row (dual buttons) ── */
  .tp-map-cta-row {
    display: flex !important;
    gap: 10px !important;
  }

  .tp-map-cta-row .tp-map-cta {
    flex: 1 !important;
    text-align: center !important;
    padding: 11px 14px !important;
  }

  /* Add Listing — PRIMARY: gold solid (the trust-building CTA) */
  .tp-map-cta-add {
    flex: 1 !important;
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    background: var(--tp-gold) !important;
    color: var(--tp-cream) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 11px 14px !important;
    border: 1px solid var(--tp-gold) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px rgba(197, 160, 101, 0.28) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    text-align: center !important;
  }

  .tp-map-cta-add:hover {
    background: var(--tp-cream) !important;
    color: var(--tp-green) !important;
    border-color: var(--tp-cream) !important;
    box-shadow: 0 10px 22px rgba(247, 249, 244, 0.18) !important;
    transform: translateY(-1px) !important;
  }

  /* ── Map column ── */
  .tp-map-container {
    grid-area: map !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    min-width: 0 !important;
    align-self: stretch !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: var(--tp-map-pad-top) 0 var(--tp-map-pad-bottom) !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  .tp-map-container svg {
    display: block !important;
    position: relative !important;
    width: var(--tp-map-fit-w, auto) !important;
    height: var(--tp-map-fit-h, calc(100% - var(--tp-map-pad-top) - var(--tp-map-pad-bottom))) !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 auto !important;
    z-index: 1 !important;
    transform: translateX(var(--tp-map-shift-x)) !important;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28)) !important;
  }

  /* ══════════════════════════════════════════
     PROVINCE STATES — filled polygon approach
     Borders = white stroke hiding micro-gaps
     ══════════════════════════════════════════ */

  .tp-map-container .province {
    fill: var(--tp-map-base) !important;
    stroke: var(--tp-map-stroke) !important;
    stroke-width: 1.45 !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke !important;
    transition: fill 0.3s ease, filter 0.3s ease !important;
    cursor: default !important;
    /* Entrance: hidden until revealed */
    opacity: 0 !important;
  }

  .tp-map-section.is-visible .tp-map-container .province {
    opacity: 1 !important;
    transition:
      opacity 0.6s ease var(--draw-delay, 0s),
      fill 0.3s ease,
      filter 0.3s ease !important;
  }

  /* Inactive province hover — subtle darken, no pointer (not clickable) */
  .tp-map-container .province:not(.tp-map-active):hover {
    fill: var(--tp-map-hover) !important;
    cursor: default !important;
  }

  /* Active province (has listings) — gold against the dark green stage */
  .tp-map-container .province.tp-map-active {
    fill: var(--tp-map-active) !important;
    stroke: var(--tp-map-stroke-active) !important;
    stroke-width: 1.6 !important;
    cursor: pointer !important;
  }

  /* Pulse animation when a province activates */
  @keyframes tp-map-pulse {
    0% { filter: brightness(1.4); }
    100% { filter: brightness(1); }
  }

  .tp-map-container .province.tp-map-entering {
    animation: tp-map-pulse 0.4s ease-out var(--enter-delay, 0s) both !important;
  }

  /* Active province hover — bright gold lift */
  .tp-map-container .province.tp-map-active:hover {
    fill: var(--tp-map-selected) !important;
    filter: drop-shadow(0 0 10px rgba(217, 185, 133, 0.55)) !important;
  }

  /* Active province touch-selected — stronger glow */
  .tp-map-container .province.tp-map-selected {
    fill: var(--tp-map-selected) !important;
    filter: drop-shadow(0 0 12px rgba(217, 185, 133, 0.65)) !important;
  }

  /* ── Tooltip ── */
  .tp-map-tooltip {
    position: absolute !important;
    pointer-events: none !important;
    background: rgba(47, 71, 47, 0.97) !important;
    color: var(--tp-cream) !important;
    font-family: 'Inter', sans-serif !important;
    padding: 10px 13px !important;
    border: 1px solid rgba(197, 160, 101, 0.20) !important;
    border-radius: 10px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    white-space: normal !important;
    width: 198px !important;
    z-index: 10 !important;
    box-shadow: 0 8px 18px rgba(45, 58, 38, 0.14) !important;
    transform: translateX(-50%) !important;
    line-height: 1.4 !important;
  }

  .tp-map-tooltip::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: var(--arrow-x, 50%) !important;
    width: 10px !important;
    height: 10px !important;
    background: var(--tp-deep-green) !important;
    border-radius: 2px !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }

  .tp-map-tooltip--flipped::after {
    bottom: auto !important;
    top: -5px !important;
  }

  .tp-map-tooltip-type {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--tp-gold) !important;
    display: block !important;
    margin-bottom: 3px !important;
  }

  .tp-map-tooltip-name {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--tp-cream) !important;
  }

  .tp-map-tooltip-counts {
    display: block !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: rgba(247, 249, 244, 0.68) !important;
    margin-top: 4px !important;
  }

  /* ── Tooltip breakdown rows ── */
  .tp-map-tooltip-divider {
    display: block !important;
    height: 1px !important;
    background: rgba(197, 160, 101, 0.3) !important;
    margin: 8px 0 6px !important;
  }

  .tp-map-tooltip-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 2px 0 !important;
  }

  .tp-map-tooltip-feature {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: rgba(247, 249, 244, 0.66) !important;
  }

  .tp-map-tooltip-num {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--tp-gold) !important;
    flex-shrink: 0 !important;
  }

  /* ══════════════════════════════════════════
     MOBILE-ONLY CONTROLS — hidden on desktop, shown via @media below
     Compact UI: heading + tab pills + native select dropdown + caption
     ══════════════════════════════════════════ */
  .tp-map-mobile-controls,
  .tp-map-mobile-cta-row {
    display: none !important;
  }

  .tp-map-mobile-heading {
    margin-bottom: 18px !important;
    text-align: center !important;
  }

  .tp-map-mobile-kicker {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    color: var(--tp-gold) !important;
    margin-bottom: 6px !important;
  }

  .tp-map-mobile-h2 {
    font-family: 'Lora', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: var(--tp-cream) !important;
  }

  .tp-map-mobile-tabs {
    display: flex !important;
    gap: 6px !important;
    padding: 4px !important;
    background: rgba(247, 249, 244, 0.08) !important;
    border: 1px solid rgba(197, 160, 101, 0.25) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }

  .tp-map-mobile-tab {
    flex: 1 !important;
    padding: 10px 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--tp-cream) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
  }

  .tp-map-mobile-tab.is-active {
    background: var(--tp-gold) !important;
    color: var(--tp-cream) !important;
    box-shadow: 0 4px 10px rgba(197, 160, 101, 0.3) !important;
  }

  .tp-map-mobile-select-wrap {
    position: relative !important;
    margin-bottom: 8px !important;
  }

  .tp-map-mobile-select-wrap::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid var(--tp-gold) !important;
    border-bottom: 2px solid var(--tp-gold) !important;
    transform: translateY(-70%) rotate(45deg) !important;
    pointer-events: none !important;
  }

  .tp-map-mobile-select {
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--tp-cream) !important;
    background: rgba(247, 249, 244, 0.06) !important;
    border: 1px solid rgba(197, 160, 101, 0.5) !important;
    border-radius: 10px !important;
    padding: 12px 38px 12px 14px !important;
    cursor: pointer !important;
  }

  .tp-map-mobile-select option {
    /* Native picker text — keep dark for readability on iOS/Android */
    color: #2D3A26 !important;
    background: #fff !important;
  }

  .tp-map-mobile-caption {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: rgba(247, 249, 244, 0.6) !important;
    text-align: center !important;
  }

  /* Mobile CTA row — sits AFTER the map */
  .tp-map-mobile-cta-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .tp-map-cta-add-mobile {
    display: inline-block !important;
    width: 100% !important;
    font-family: 'Inter', sans-serif !important;
    background: var(--tp-gold) !important;
    color: var(--tp-cream) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 15px 20px !important;
    border: 1px solid var(--tp-gold) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px rgba(197, 160, 101, 0.28) !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
  }

  .tp-map-cta-add-mobile:hover,
  .tp-map-cta-add-mobile:active {
    background: var(--tp-cream) !important;
    color: var(--tp-green) !important;
    border-color: var(--tp-cream) !important;
  }

  /* Mobile secondary CTA — cream outline button on dark green stage,
     mirrors the hero "Explore the Directory" pattern */
  .tp-map-cta-text-link {
    display: inline-block !important;
    width: 100% !important;
    font-family: 'Inter', sans-serif !important;
    background: transparent !important;
    color: var(--tp-cream) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 15px 20px !important;
    border: 1px solid rgba(247, 249, 244, 0.55) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
  }

  .tp-map-cta-text-link:hover,
  .tp-map-cta-text-link:active {
    background: var(--tp-cream) !important;
    color: var(--tp-green) !important;
    border-color: var(--tp-cream) !important;
  }

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    .tp-map-text {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }

    .tp-map-container .province {
      opacity: 1 !important;
      transition: fill 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease !important;
    }
  }

  @media (min-width: 1900px) and (min-height: 980px) {
    .tp-map-section {
      --tp-pad-top: clamp(32px, 4vh, 48px) !important;
      --tp-pad-bottom: clamp(36px, 5.4vh, 64px) !important;
      --tp-grid-gap-x: clamp(44px, 4.8vw, 82px) !important;
      --tp-grid-gap-y: clamp(16px, 2.2vh, 24px) !important;
      --tp-shell-pad-inline: clamp(56px, 6vw, 120px) !important;
      --tp-intro-max: 36rem !important;
      --tp-card-max: 33rem !important;
      --tp-left-track: clamp(31rem, 31vw, 34rem) !important;
      --tp-map-track: clamp(32rem, 34vw, 42rem) !important;
      --tp-map-max-w: clamp(310px, 26vw, 490px) !important;
      --tp-map-pad-top: clamp(10px, 1.2vh, 18px) !important;
      --tp-map-shift-x: clamp(8px, 1vw, 18px) !important;
    }

    .tp-map-heading {
      font-size: clamp(44px, 4.1vw, 60px) !important;
      max-width: 10ch !important;
      margin-bottom: 18px !important;
    }

    .tp-map-subtext {
      font-size: 17px !important;
      line-height: 1.68 !important;
      margin-bottom: 24px !important;
      max-width: 31rem !important;
    }

    .tp-map-active-count {
      margin-top: 28px !important;
      padding-top: 26px !important;
    }
    .tp-map-active-sub {
      font-size: 13px !important;
      letter-spacing: 0.18em !important;
    }

    .tp-map-filter-card {
      padding: 20px 20px 22px !important;
    }

    .tp-map-tabs {
      gap: 8px !important;
      margin-bottom: 22px !important;
      padding: 5px !important;
    }

    .tp-map-tab {
      padding: 11px 8px !important;
      font-size: 11px !important;
    }

    .tp-map-tab-count {
      font-size: 10px !important;
      padding: 2px 7px !important;
      margin-left: 6px !important;
    }

    .tp-map-filter-panels {
      min-height: 380px !important;
    }

    .tp-map-filters {
      margin-bottom: 24px !important;
    }

    .tp-map-filters-label {
      margin-bottom: 14px !important;
    }

    .tp-map-filter {
      padding: 12px 14px !important;
      margin-bottom: 6px !important;
      border-radius: 12px !important;
    }

    .tp-map-filter:has(input:checked) {
      padding-left: 11px !important;
    }

    .tp-map-filter-name {
      font-size: 14px !important;
    }

    .tp-map-filter-count {
      font-size: 12px !important;
    }

    .tp-map-cta,
    .tp-map-cta-add {
      font-size: 13px !important;
    }

    .tp-map-cta-row {
      gap: 14px !important;
    }

    .tp-map-cta-row .tp-map-cta,
    .tp-map-cta-add {
      padding: 15px 18px !important;
    }
  }

  @media (max-width: 1600px) and (min-width: 769px) {
    .tp-map-section {
      --tp-pad-top: clamp(14px, 2.8vh, 24px) !important;
      --tp-pad-bottom: clamp(16px, 3.2vh, 30px) !important;
      --tp-grid-gap-x: clamp(16px, 2.1vw, 26px) !important;
      --tp-grid-gap-y: 12px !important;
      --tp-shell-pad-inline: clamp(26px, 5vw, 80px) !important;
      --tp-intro-max: 28rem !important;
      --tp-card-max: 28rem !important;
      --tp-left-track: clamp(21rem, 28vw, 28rem) !important;
      --tp-map-track: clamp(20rem, 31vw, 30rem) !important;
      --tp-map-max-w: clamp(260px, 30vw, 420px) !important;
    }

    .tp-map-kicker {
      margin-bottom: 10px !important;
    }

    .tp-map-heading {
      font-size: clamp(30px, 2.7vw, 40px) !important;
      max-width: 12ch !important;
      margin-bottom: 10px !important;
    }

    .tp-map-subtext {
      font-size: 14px !important;
      line-height: 1.48 !important;
      margin-bottom: 12px !important;
      max-width: 25rem !important;
    }
  }

  @media (max-width: 1280px) and (min-width: 769px) {
    .tp-map-section {
      --tp-pad-top: 12px !important;
      --tp-pad-bottom: 18px !important;
      --tp-grid-gap-x: 14px !important;
      --tp-grid-gap-y: 10px !important;
      --tp-shell-pad-inline: clamp(22px, 6.5vw, 68px) !important;
      --tp-intro-max: 23rem !important;
      --tp-card-max: 26rem !important;
      --tp-left-track: clamp(18rem, 31vw, 26rem) !important;
      --tp-map-track: clamp(16rem, 30vw, 20rem) !important;
      --tp-map-max-w: clamp(220px, 27vw, 320px) !important;
      --tp-map-pad-top: 0px !important;
      --tp-map-shift-x: 0px !important;
    }

    .tp-map-heading {
      font-size: clamp(26px, 2.5vw, 32px) !important;
      margin-bottom: 8px !important;
    }

    .tp-map-subtext {
      font-size: 12.8px !important;
      line-height: 1.42 !important;
      margin-bottom: 8px !important;
      max-width: 21rem !important;
    }

    .tp-map-active-count {
      margin-top: 18px !important;
      padding-top: 18px !important;
    }
    .tp-map-active-sub {
      font-size: 11px !important;
    }

    .tp-map-filter-card {
      border-radius: 14px !important;
      padding: 12px 12px 14px !important;
    }

    .tp-map-tabs {
      gap: 5px !important;
      margin-bottom: 10px !important;
    }

    .tp-map-tab {
      padding: 7px 4px !important;
      font-size: 9px !important;
    }

    .tp-map-tab-count {
      font-size: 8px !important;
      padding: 1px 4px !important;
    }

    .tp-map-filter-panels {
      min-height: 220px !important;
    }

    .tp-map-filters {
      margin-bottom: 12px !important;
    }

    .tp-map-filters-label {
      margin-bottom: 8px !important;
    }

    .tp-map-filter {
      padding: 6px 7px !important;
      border-radius: 9px !important;
    }

    .tp-map-filter:has(input:checked) {
      padding-left: 6px !important;
    }

    .tp-map-filter-check {
      width: 16px !important;
      height: 16px !important;
      border-width: 1.5px !important;
    }

    .tp-map-filter-dot {
      width: 7px !important;
      height: 7px !important;
    }

    .tp-map-filter-name {
      font-size: 11px !important;
    }

    .tp-map-filter-count {
      font-size: 9.5px !important;
    }

    .tp-map-cta-row {
      gap: 8px !important;
    }

    .tp-map-cta,
    .tp-map-cta-add {
      font-size: 10px !important;
    }

    .tp-map-cta-row .tp-map-cta,
    .tp-map-cta-add {
      padding: 9px 10px !important;
    }
  }

  @media (max-aspect-ratio: 5/3) and (min-width: 769px) {
    .tp-map-section {
      --tp-shell-pad-inline: clamp(20px, 5vw, 56px) !important;
      --tp-grid-gap-x: clamp(14px, 1.8vw, 22px) !important;
      --tp-left-track: clamp(17rem, 33vw, 25rem) !important;
      --tp-map-track: clamp(15rem, 29vw, 20rem) !important;
      --tp-map-max-w: clamp(230px, 26vw, 340px) !important;
      --tp-map-pad-top: 0px !important;
    }
  }

  @media (max-height: 860px) and (min-width: 769px) {
    .tp-map-section {
      --tp-pad-top: 10px !important;
      --tp-pad-bottom: 12px !important;
      --tp-grid-gap-y: 8px !important;
      --tp-map-max-w: clamp(210px, 24vw, 290px) !important;
      --tp-map-pad-top: 0px !important;
    }

    .tp-map-heading {
      font-size: clamp(24px, 2.4vw, 30px) !important;
      margin-bottom: 6px !important;
    }

    .tp-map-subtext {
      font-size: 12px !important;
      line-height: 1.36 !important;
      margin-bottom: 6px !important;
    }

    .tp-map-active-count {
      margin-top: 14px !important;
      padding-top: 14px !important;
    }
    .tp-map-active-sub {
      font-size: 11px !important;
    }

    .tp-map-filter-card {
      padding: 10px 10px 12px !important;
    }

    .tp-map-tabs {
      margin-bottom: 8px !important;
    }

    .tp-map-filter-panels {
      min-height: 200px !important;
    }

    .tp-map-filters {
      margin-bottom: 10px !important;
    }

    .tp-map-filter {
      padding-top: 5px !important;
      padding-bottom: 5px !important;
    }

    .tp-map-cta-row .tp-map-cta,
    .tp-map-cta-add {
      padding: 8px 10px !important;
    }
  }

  @media (max-height: 760px) and (min-width: 769px) {
    .tp-map-section {
      --tp-pad-top: 8px !important;
      --tp-pad-bottom: 10px !important;
      --tp-map-max-w: clamp(190px, 22vw, 250px) !important;
    }

    .tp-map-grid {
      row-gap: 6px !important;
    }

    .tp-map-heading {
      font-size: clamp(22px, 2.1vw, 28px) !important;
    }

    .tp-map-subtext {
      font-size: 11.5px !important;
      line-height: 1.32 !important;
    }

    .tp-map-filter-panels {
      min-height: 188px !important;
    }
  }

  /* ══════════════════════════════════════════
     MOBILE: compact one-screen layout
     Hide desktop UI (intro text, filter card with tabs/radios/CTAs).
     Show mobile-controls (heading + tab pills + native select + caption).
     Map sits in the middle. CTAs sit at bottom (own row, own grid area).
     ══════════════════════════════════════════ */
  @media (max-width: 768px) {
    .tp-map-section {
      padding: 22px 0 26px !important;
      background: var(--tp-darker-green) !important;
    }

    .tp-map-grid {
      grid-template-columns: 1fr !important;
      grid-template-areas:
        'card'
        'map'
        'mobilecta' !important;
      gap: 16px !important;
      padding: 0 16px !important;
    }

    /* Hide desktop UI */
    .tp-map-text { display: none !important; }
    .tp-map-filter-card { display: none !important; }

    /* Show mobile UI */
    .tp-map-mobile-controls { display: block !important; }
    .tp-map-mobile-cta-row {
      display: flex !important;
      grid-area: mobilecta !important;
      width: 100% !important;
      max-width: 420px !important;
      margin: 0 auto !important;
    }

    .tp-map-card-wrap {
      width: 100% !important;
      max-width: 420px !important;
      margin: 0 auto !important;
      grid-area: card !important;
    }

    /* Map: constrain so the section fits in one viewport */
    .tp-map-container {
      width: 100% !important;
      height: auto !important;
      min-height: 280px !important;
      max-height: 360px !important;
      max-width: 240px !important;
      margin: 0 auto !important;
      align-items: center !important;
      grid-area: map !important;
    }

    .tp-map-container svg {
      width: auto !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
      transform: none !important;
      display: block !important;
      margin: 0 auto !important;
    }
  }

  @media (max-width: 480px) {
    .tp-nav-inner { padding: 0 16px; }
    .tp-logo-text { font-size: 17px; }
    .tp-nav-links a { padding: 0 12px; font-size: 12px; }
    .tp-map-mobile-h2 { font-size: 20px; }
    .tp-map-container { min-height: 260px; max-height: 320px; max-width: 200px; }
  }


/* === SECTION 4: STATS STRIP === */
  .tp-home-stats *,
  .tp-home-stats *::before,
  .tp-home-stats *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tp-home-stats {
    background: #F7F9F4 !important;
    border-bottom: 1px solid #E5EADF !important;
  }

  .tp-home-stats-inner {
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 40px 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
  }

  .tp-home-stats-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    /* Force kicker to span its own row above the stats + button row,
       so the button never wraps to a second line */
    flex-basis: 100% !important;
  }

  .tp-home-stats-kicker {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    color: #C5A065 !important;
  }

  .tp-home-stats-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
  }

  .tp-home-stat {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 8px !important;
  }

  .tp-home-stat-num {
    font-family: 'Lora', serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #3A5A40 !important;
    line-height: 1 !important;
  }

  .tp-home-stat-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: #C5A065 !important;
  }

  .tp-home-stats-link {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    background: #3A5A40 !important;
    color: #F7F9F4 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(58, 90, 64, 0.2) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
  }

  .tp-home-stats-link:hover {
    background: #C5A065 !important;
    color: #F7F9F4 !important;
    box-shadow: 0 8px 24px rgba(197, 160, 101, 0.3) !important;
  }

  @media (max-width: 768px) {
    .tp-home-stats-inner {
      padding: 44px 20px !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 20px !important;
    }
    .tp-home-stats-head {
      text-align: center !important;
      align-items: center !important;
    }
    .tp-home-stats-row {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 18px 24px !important;
      align-items: baseline !important;
    }
    .tp-home-stat-num {
      font-size: 26px !important;
    }
    .tp-home-stats-link {
      width: 100% !important;
      text-align: center !important;
      padding: 14px 20px !important;
    }
  }


/* === SECTION 5: CONTEXT — TWO MOVEMENTS, ONE EARTH === */

  .tp-home-context *, .tp-home-context *::before, .tp-home-context *::after {
    box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;
  }

  .tp-home-context {
    background: var(--tp-parchment) !important;
  }

  .tp-home-context-section {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 84px 40px !important;
  }

  .tp-home-context-grid {
    display: flex !important;
    gap: 48px !important;
    align-items: center !important;
  }

  /* ── Copy column ── */
  .tp-home-context-copy {
    flex: 0 0 58% !important;
  }

  .tp-home-context-kicker {
    display: inline-block !important;
    margin-bottom: 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: var(--tp-gold) !important;
  }

  .tp-home-context-heading {
    font-family: 'Lora', serif !important;
    font-size: clamp(28px, 3.2vw, 36px) !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.01em !important;
    color: var(--tp-darker-green) !important;
    margin-bottom: 22px !important;
  }

  .tp-home-context-body {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.72 !important;
    color: #4A4A3D !important;
    margin-bottom: 16px !important;
  }

  .tp-home-context-body:last-of-type {
    margin-bottom: 0 !important;
  }

  .tp-home-context-em {
    color: var(--tp-darker-green) !important;
    font-weight: 600 !important;
  }

  /* ── Card (aside) ── */
  .tp-home-context-aside {
    flex: 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #E5EADF !important;
    box-shadow: 0 8px 22px rgba(58, 90, 64, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .tp-home-context-image {
    position: relative !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
    background: #EEF3E8 !important;
  }

  .tp-home-context-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .tp-home-context-facts {
    padding: 22px 24px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    flex: 1 !important;
  }

  .tp-home-context-fact {
    padding-bottom: 14px !important;
    border-bottom: 1px solid #E5EADF !important;
  }

  .tp-home-context-fact.tp-home-context-fact-final {
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  .tp-home-context-fact-label {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--tp-gold) !important;
    margin-bottom: 4px !important;
  }

  .tp-home-context-fact-value {
    display: block !important;
    font-family: 'Lora', serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--tp-green) !important;
  }

  .tp-home-context-fact-sub {
    display: block !important;
    margin-top: 4px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #777 !important;
  }

  .tp-home-context-cta {
    margin-top: 4px !important;
  }

  .tp-home-context-cta a {
    display: inline-block !important;
    width: 100% !important;
    font-family: 'Inter', sans-serif !important;
    background: var(--tp-green) !important;
    color: var(--tp-cream) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(58, 90, 64, 0.2) !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
  }

  .tp-home-context-cta a:hover {
    background: var(--tp-gold) !important;
    color: var(--tp-green) !important;
    box-shadow: 0 8px 24px rgba(197, 160, 101, 0.3) !important;
  }

  @media (max-width: 900px) {
    .tp-home-context-section { padding: 44px 20px !important; }
    .tp-home-context-grid { flex-direction: column !important; gap: 32px !important; }
    .tp-home-context-copy,
    .tp-home-context-aside { flex: 1 1 auto !important; width: 100% !important; }
  }

  @media (max-width: 480px) {
    .tp-home-context-section { padding: 44px 18px !important; }
  }


/* === SECTION 6: BLOG TEASER === */

  .tp-home-blog *, .tp-home-blog *::before, .tp-home-blog *::after {
    box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;
  }

  .tp-home-blog { background: var(--tp-white) !important; }

  .tp-home-blog-section {
    max-width: 1200px !important; margin: 0 auto !important;
    padding: 72px 40px !important;
  }

  .tp-home-blog-head {
    text-align: center !important;
    margin-bottom: 44px !important;
  }

  .tp-home-blog-kicker {
    display: block !important; font-family: 'Inter', sans-serif !important;
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.16em !important;
    color: var(--tp-gold) !important; margin-bottom: 14px !important;
  }

  .tp-home-blog-heading {
    font-family: 'Lora', serif !important; font-size: 32px !important;
    font-weight: 700 !important; color: var(--tp-green) !important;
    line-height: 1.2 !important;
  }

  .tp-home-blog-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin-bottom: 44px !important;
  }

  .tp-home-blog-card {
    display: flex !important; flex-direction: column !important;
    background: var(--tp-white) !important;
    border: 1px solid var(--tp-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 4px 10px rgba(58, 90, 64, 0.04) !important;
  }

  .tp-home-blog-card:hover {
    border-color: var(--tp-gold) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(58, 90, 64, 0.1) !important;
  }

  .tp-home-blog-card-img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
  }

  .tp-home-blog-card-img img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
    transition: transform 0.6s ease !important;
  }

  .tp-home-blog-card:hover .tp-home-blog-card-img img {
    transform: scale(1.04) !important;
  }

  .tp-home-blog-card-body {
    padding: 22px 22px 24px !important;
    display: flex !important; flex-direction: column !important;
    flex: 1 !important;
  }

  /* Author byline reuses .blog-card-author-sig from style.css (avatar +
     uppercase gold name). Pinned to the bottom of the card body via
     margin-top: auto so it lines up across cards even when excerpts wrap
     to different heights. The gold separator line that the shared component
     draws above the byline is suppressed here in favour of a tight 5px gap
     — the homepage card has its own visual rhythm and the line felt heavy. */
  .tp-home-blog-card-body .blog-card-author-sig {
    margin-top: auto !important;
    padding-top: 5px !important;
  }
  .tp-home-blog-card-body .blog-card-author-sig::before {
    display: none !important;
  }

  .tp-home-blog-card-title {
    font-family: 'Lora', serif !important;
    font-size: 19px !important; font-weight: 700 !important;
    color: var(--tp-green) !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  .tp-home-blog-card-excerpt {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.6 !important;
    flex: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* CTA */
  .tp-home-blog-cta-wrap { text-align: center !important; }

  .tp-home-blog-cta {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    background: transparent !important;
    color: var(--tp-green) !important;
    font-size: 13px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.12em !important;
    padding: 14px 32px !important;
    border: 1px solid var(--tp-green) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }

  .tp-home-blog-cta:hover {
    background: var(--tp-green) !important;
    color: var(--tp-cream) !important;
    box-shadow: 0 8px 22px rgba(58, 90, 64, 0.22) !important;
  }

  @media (max-width: 1024px) {
    .tp-home-blog-grid { grid-template-columns: 1fr 1fr !important; }
    .tp-home-blog-card:nth-child(3) { grid-column: span 2 !important; max-width: 560px !important; margin: 0 auto !important; width: 100% !important; }
  }

  @media (max-width: 768px) {
    .tp-home-blog-section { padding: 44px 20px !important; }
    .tp-home-blog-head { margin-bottom: 28px !important; }
    .tp-home-blog-grid { grid-template-columns: 1fr !important; gap: 14px !important; margin-bottom: 28px !important; }
    .tp-home-blog-card:nth-child(3) { grid-column: auto !important; max-width: none !important; }
    .tp-home-blog-heading { font-size: 24px !important; }
    /* Excerpts hidden on mobile — title + author byline are enough for scan-and-tap */
    .tp-home-blog-card-excerpt { display: none !important; }
    .tp-home-blog-card-body { padding: 16px 18px 18px !important; }
    .tp-home-blog-card-title { font-size: 17px !important; margin-bottom: 8px !important; }
    .tp-home-blog-cta { width: 100% !important; max-width: 360px !important; padding: 14px 20px !important; }
  }


/* === SECTION 7: ADD LISTING CTA BANNER === */

  .tp-home-cta *, .tp-home-cta *::before, .tp-home-cta *::after {
    box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;
  }

  .tp-home-cta {
    background: var(--tp-darker-green) !important;
    border-top: 1px solid var(--tp-gold) !important;
    border-bottom: 1px solid var(--tp-gold) !important;
  }

  .tp-home-cta-inner {
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 64px 40px !important;
    text-align: center !important;
  }

  .tp-home-cta-kicker {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: var(--tp-gold) !important;
    margin-bottom: 16px !important;
  }

  .tp-home-cta-heading {
    font-family: 'Lora', serif !important;
    font-size: clamp(26px, 3vw, 32px) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--tp-cream) !important;
    margin-bottom: 14px !important;
    max-width: 22ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .tp-home-cta-body {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: rgba(247, 249, 244, 0.75) !important;
    margin-bottom: 32px !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .tp-home-cta-button {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    background: var(--tp-gold) !important;
    color: var(--tp-cream) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 16px 44px !important;
    border: 1px solid var(--tp-gold) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 22px rgba(197, 160, 101, 0.32) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }

  .tp-home-cta-button:hover {
    background: var(--tp-cream) !important;
    color: var(--tp-green) !important;
    border-color: var(--tp-cream) !important;
    box-shadow: 0 10px 26px rgba(247, 249, 244, 0.18) !important;
    transform: translateY(-2px) !important;
  }

  .tp-home-cta-hint {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: rgba(247, 249, 244, 0.5) !important;
    margin-top: 14px !important;
  }

  @media (max-width: 768px) {
    .tp-home-cta-inner { padding: 44px 20px !important; }
    .tp-home-cta-button { width: 100% !important; max-width: 360px !important; padding: 16px 24px !important; }
  }