/* style.css */
/*
Theme Name: East Africa Safari Guides
Theme URI: https://easguides.travel
Description: Standalone theme for East Africa Safari Guides. Converted from a Foxiz child
  theme 2026-08-12 (FOXIZ FINAL CUTOVER brief) — no parent theme, fully self-contained. See
  eas_child_theme_support() in functions.php for the real add_theme_support() declarations
  this theme now owns directly (previously inherited from Foxiz).
Author: East Africa Safari Guides
Author URI: https://easguides.travel
Version: 2.0.0
*/

/* ════════════════════════════════════════════════════════════
   EAS Body Background Floor (sealed — post-launch bug batch,
   item 6, 2026-07-16 brief)
   No rule anywhere in this theme ever set a background-color on
   <body> or <html> — every page relies entirely on its own inner
   wrapper div (.eas-*-page) to paint a background. Confirmed via
   direct getComputedStyle checks: body resolved to fully
   transparent (rgba(0,0,0,0)) on 6 of 7 sampled templates, one
   resolved to stark white. Any transient gap or margin at the
   top of a page (under the fixed header) or at a section
   boundary near the footer therefore flashes the browser's raw
   white canvas instead of blending with the site's own palette.
   This is a floor only — every page's own wrapper background
   still paints over it in normal layout; this just sets what's
   visible during any moment nothing else has painted yet.
   ════════════════════════════════════════════════════════════ */
body {
    background-color: #FAF7F0;
}

/* ════════════════════════════════════════════════════════════
   EAS Footer Color Standard
   Background: #141414 | Body text: #C8BFA8 | Links: #D4C9B0
   Link hover: #C8A96E | Bottom bar: #0D0D0D / #666666
   ════════════════════════════════════════════════════════════ */

.ekit-template-content-footer {
    background: #141414 !important;
}

.ekit-template-content-footer .elementor-widget-text-editor p,
.ekit-template-content-footer .elementor-widget-text-editor li {
    color: #C8BFA8 !important;
    font-size: 15px !important;
    line-height: 2 !important;
}

.ekit-template-content-footer .elementor-widget-text-editor a {
    color: #D4C9B0 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.ekit-template-content-footer .elementor-widget-text-editor a:hover {
    color: #C8A96E !important;
}

/* ════════════════════════════════════════════════════════════
   EAS Footer Typography Fixes
   Target: ElementsKit footer template ID 18626
   ════════════════════════════════════════════════════════════ */

/* Remove gap between flex children in footer sections */
.ekit-template-content-footer .e-con {
    gap: 0 !important;
}

/* Column internal horizontal padding */
.ekit-template-content-footer .elementor-element > .e-con-inner {
    padding: 0 24px !important;
}

/* Body text — 15px / 2 line-height */
.ekit-template-content-footer .elementor-widget-text-editor p {
    font-size: 15px !important;
    line-height: 2 !important;
    color: #B0A890 !important;
    margin-bottom: 6px !important;
}

/* Column headings — THE JOURNEYS, EXPLORE, BEGIN YOUR JOURNEY, THE COORDINATES */
.ekit-template-content-footer .elementor-widget-heading .elementor-heading-title {
    font-size: 11px !important;
    letter-spacing: 3px !important;
    color: #C8A96E !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #2A2A2A !important;
}

/* Footer nav links */
.ekit-template-content-footer .elementor-widget-text-editor a {
    color: #B0A890 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 2.4 !important;
    display: block !important;
    transition: color 0.2s !important;
}

.ekit-template-content-footer .elementor-widget-text-editor a:hover {
    color: #C8A96E !important;
}

/* START PLANNING button */
.ekit-template-content-footer .elementor-widget-button .elementor-button {
    font-size: 11px !important;
    letter-spacing: 3px !important;
    padding: 14px 28px !important;
    border: 1px solid #C8A96E !important;
    color: #C8A96E !important;
    background: transparent !important;
    margin-top: 16px !important;
}

/* Contact details (paragraphs containing tel/email text) */
.ekit-template-content-footer .elementor-widget-text-editor p:has(a[href*="mailto"]),
.ekit-template-content-footer .elementor-widget-text-editor p:has(a[href*="tel"]) {
    font-size: 14px !important;
    color: #B0A890 !important;
    line-height: 2.2 !important;
}

/* Bottom bar (#111111) text */
.ekit-template-content-footer [style*="111111"] .elementor-widget-text-editor p {
    font-size: 12px !important;
    color: #555 !important;
    line-height: 1.5 !important;
}

/* Bottom bar links — inline, not block */
.ekit-template-content-footer [style*="111111"] .elementor-widget-text-editor a {
    font-size: 12px !important;
    color: #555 !important;
    line-height: 1.5 !important;
    display: inline !important;
}

/* Logo in footer */
.ekit-template-content-footer .elementor-widget-image img {
    max-width: 160px !important;
    margin-bottom: 20px !important;
}

/* Main section top/bottom padding */
.ekit-template-content-footer > .e-con:first-child {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* ════════════════════════════════════════════════════════════
   EAS Header Nav Fixes
   Target: ElementsKit header template ID 18625
   ════════════════════════════════════════════════════════════ */

/* Remove margin/gap between header rows */
.ekit-template-content-header > .e-con {
    margin: 0 !important;
}

/* Nav menu item links */
.ekit-template-content-header .ekit-nav-menu .menu-item > a {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    color: #1A1A1A !important;
    padding: 8px 16px !important;
    text-transform: uppercase !important;
}

/* Nav hover + active state */
.ekit-template-content-header .ekit-nav-menu .menu-item > a:hover,
.ekit-template-content-header .ekit-nav-menu .menu-item.current-menu-item > a {
    color: #C8A96E !important;
}

/* Dropdown panel */
.ekit-template-content-header .ekit-nav-menu .sub-menu {
    border-top: 2px solid #C8A96E !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    min-width: 200px !important;
}

/* Dropdown items */
.ekit-template-content-header .ekit-nav-menu .sub-menu .menu-item > a {
    font-size: 12px !important;
    letter-spacing: 1px !important;
    padding: 12px 20px !important;
    color: #1A1A1A !important;
    border-bottom: 1px solid #F0EDE8 !important;
}

/* BEGIN YOUR JOURNEY button */
.ekit-template-content-header .elementor-widget-button .elementor-button {
    font-size: 10px !important;
    letter-spacing: 3px !important;
    padding: 12px 20px !important;
    background: #1A1A1A !important;
    color: #F0E8D8 !important;
    border: none !important;
}

.ekit-template-content-header .elementor-widget-button .elementor-button:hover {
    background: #C8A96E !important;
    color: #1A1A1A !important;
}

/* Utility bar text */
.ekit-template-content-header .elementor-widget-text-editor p {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* ════════════════════════════════════════════════════════════
   EAS Mega Nav — Journey Cards + Sticky + Mobile Overlay
   ════════════════════════════════════════════════════════════ */

/* Sticky header */
.ekit-template-content-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Nav bar row — zero out vertical gap */
.ekit-template-content-header > .e-con {
    margin: 0 !important;
}

/* Journey Cards mega dropdown — 6-column grid */
.ekit-template-content-header .ekit-nav-menu .menu-item-has-children .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    min-width: 900px !important;
    padding: 24px !important;
    gap: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Sub-menu items as cards */
.ekit-template-content-header .ekit-nav-menu .sub-menu .menu-item {
    border-bottom: none !important;
    text-align: center !important;
    padding: 16px 12px !important;
    border: 1px solid #F0EDE8 !important;
    transition: all 0.25s !important;
}

.ekit-template-content-header .ekit-nav-menu .sub-menu .menu-item:hover {
    border-color: #C8A96E !important;
    background: #FAFAF5 !important;
}

.ekit-template-content-header .ekit-nav-menu .sub-menu .menu-item > a {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    color: #2A2A2A !important;
    text-transform: uppercase !important;
    display: block !important;
    padding: 8px 0 !important;
}

/* ── LOUNGE FORM PAGE 18429 — MINIMAL OVERRIDES ───
   Redesign v2 (LOUNGE-FORM-BEGIN-REDESIGN-BUILD-BRIEF-v1.0.md) — light
   canonical canvas, not the old dark split-screen theme. Field styling is
   now owned entirely by assets/css/lounge-form.css's .eas-lg-input rules;
   the old dark input[type] overrides here were fighting them via
   !important and are removed, not just recolored. */
body.page-id-18429 {
    background: #FAF7F0 !important;
}
body.page-id-18429 #wpadminbar { display:none !important; }
html body.page-id-18429 { margin-top:0 !important; }

/* Zero out Elementor wrapper padding on lounge page */
body.page-id-18429 .e-con,
body.page-id-18429 .e-con-inner,
body.page-id-18429 .elementor-section,
body.page-id-18429 .elementor-container,
body.page-id-18429 .elementor-widget-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.page-id-18429 .e-con {
    min-height: 0 !important;
}
/* ── END LOUNGE FORM MINIMAL OVERRIDES ──────────── */

/* Mobile — full-screen overlay */
@media (max-width: 1024px) {
    .ekit-template-content-header .ekit-nav-menu-collapse {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: #1A1A1A !important;
        z-index: 99999 !important;
        padding: 60px 40px !important;
        overflow-y: auto !important;
    }

    .ekit-template-content-header .ekit-nav-menu-collapse .menu-item > a {
        font-size: 20px !important;
        letter-spacing: 2px !important;
        color: #F0E8D8 !important;
        padding: 20px 0 !important;
        border-bottom: 1px solid #2A2A2A !important;
        display: block !important;
    }
}

/* ════════════════════════════════════════════════════════════
   .eas-intro-grid--asymmetric
   Asymmetric two-column intro layout used on journey pages
   Added: 2026-05-05
   ════════════════════════════════════════════════════════════ */

.eas-intro-grid--asymmetric {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: auto 1fr auto;
    gap: 0;
    min-height: 90vh;
    background: var(--canvas, #F5F0E8);
    position: relative;
    padding: 0;
}

.eas-intro-grid--asymmetric .eyebrow {
    grid-column: 1;
    grid-row: 1;
    padding: 120px 0 0 80px;
    color: var(--amber, #C9963C);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.38em;
    text-transform: uppercase;
}

.eas-intro-grid--asymmetric .title {
    grid-column: 2;
    grid-row: 1 / 3;
    padding: 180px 120px 80px 0;
    display: flex;
    align-items: center;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1.05;
    color: var(--forest, #1A2E1A);
    font-weight: 400;
}

.eas-intro-grid--asymmetric .body {
    grid-column: 1;
    grid-row: 2 / 4;
    padding: 60px 40px 120px 80px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

@media (max-width: 968px) {
    .eas-intro-grid--asymmetric {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        min-height: auto;
        padding: 2rem 1.5rem;
    }

    .eas-intro-grid--asymmetric .eyebrow {
        grid-column: 1;
        grid-row: 1;
        padding: 2rem 0 1rem;
    }

    .eas-intro-grid--asymmetric .title {
        grid-column: 1;
        grid-row: 2;
        padding: 1rem 0;
        font-size: clamp(36px, 8vw, 52px);
    }

    .eas-intro-grid--asymmetric .body {
        grid-column: 1;
        grid-row: 3;
        padding: 1rem 0 2rem;
        max-width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════
   EAS STANDALONE NAV — Shared across all journey page templates
   Loaded via wp_head() on every standalone template (ob_start arch)
   DO NOT remove — required by honeymoon, wellness, and all future pages
   Added: 2026-05-07
   ════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   EAS PRIMARY HEADER
   East Africa Safari Guides
   Child theme owned — zero dependencies
   v1.2 — real images, consolidated, final
═══════════════════════════════════════════════════════════ */

:root {
    --eas-gold:        #B8780A;
    --eas-gold-bright: #D4922E;
    --eas-gold-on-light: #924F08;
    --eas-dark:      #1A1A1A;
    --eas-cream:     #FAFAF5;
    --eas-text:      #2A2A2A;
    --eas-muted:     #888888;
    --eas-border:    #E8E4DE;
    --eas-font-nav:  'Jost', sans-serif;
    --eas-font-head: 'Cormorant Garamond', serif;
    --eas-ease:      cubic-bezier(0.4, 0, 0.2, 1);
    /* Filled primary buttons — site-wide unified 2026-08-05 (Lounge Form
       Revisions v1.1, item 3): pulled verbatim from the real, live
       Final CTA hover state (.eas-comp-final__btn / .eas-comp-final__btn::before
       in css/eas-components.css — resting gold fill, forest slide-in on
       hover, cream label both states). These values are the single
       site-wide source of truth for a primary filled button; .eas-comp-
       final__btn itself is left self-contained per LAW 18 (components may
       not inherit host-page tokens) but is kept byte-identical to these,
       not a coincidence. Previously #C8A96E/#E8C06A/#141414 — a separate,
       never-actually-matching "Final CTA authority" comment that had
       drifted from the real component it named. */
    --eas-btn-bg:           #B8780A;
    --eas-btn-bg-hover:     #2C3424;
    --eas-btn-text:         #FEFDFB;
    --eas-btn-text-hover:   #F4F1E9;
    --eas-btn-border-color: #B8780A;
}

/* ─── RESET ─── */
.eas-header *,
.eas-header *::before,
.eas-header *::after {
    box-sizing: border-box;
}

.eas-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ─── BASE ─── */
.eas-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

/* ─── WP ADMIN BAR COMPENSATION (Departures Final Closeout gap fix) ───
   Real root cause, confirmed logged in as admin, not reproducible logged
   out: WP core adds `margin-top: 32px !important` (46px at <=782px) to
   <html> whenever the admin bar shows, which pushes body/content down
   normally — but .eas-header's position:fixed anchors it to the true
   viewport top regardless of that margin, so it never moves to compensate.
   The header ends up rendering UNDER/behind the admin bar (its own top
   32/46px hidden) while body's content still starts 32/46px lower than the
   header's real bottom edge — a real blank gap the exact height of the
   admin bar, on every page using this fixed header, for any logged-in
   admin/editor. Public visitors are never logged in, so they never saw
   this — but the founder's own QA workflow is always logged in, and this
   was a genuine sitewide gap, not something specific to one template.
   Shifting the header down to sit directly below the admin bar instead of
   behind it closes the gap without touching the body-padding math above. */
body.admin-bar .eas-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .eas-header {
        top: 46px;
    }
}

/* ─── BODY OFFSET — scoped to pages that carry the EAS nav ─── */
body:has(.eas-header) {
    padding-top: 118px; /* utility 38px + nav 80px */
}

/* Full-bleed hero pages — hero extends under transparent nav (LAW 15 + LAW 17) */
body.eas-transparent-hero:has(.eas-header.is-transparent),
body.eas-home-page:has(.eas-header.is-transparent),
body.eas-accommodation-single:has(.eas-header.is-transparent),
body.eas-dest-archive-page:has(.eas-header.is-transparent),
body.eas-journals-archive-page:has(.eas-header.is-transparent),
body.home:has(.eas-header.is-transparent),
body.single:has(.eas-header.is-transparent) {
    padding-top: 0 !important;
}

body:has(.eas-header.is-scrolled) {
    padding-top: 80px; /* utility collapsed — nav only */
}

@media (max-width: 480px) {
    body:has(.eas-header) {
        padding-top: 80px;
    }
}

/* ═══════════════════════════════════════════════
   UTILITY BAR
═══════════════════════════════════════════════ */

.eas-utility-bar,
.eas-top-bar {
    transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
    overflow: hidden;
    max-height: 48px;
}
body.scrolled .eas-utility-bar,
body.scrolled .eas-top-bar {
    opacity: 0;
    max-height: 0;
    height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.eas-utility-bar {
    background: var(--eas-dark);
    height: 38px;
    overflow: hidden;
    transition: height 0.35s var(--eas-ease),
                opacity 0.35s var(--eas-ease);
}

.eas-utility-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eas-utility-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--eas-gold);
}

.eas-utility-left a {
    color: var(--eas-gold-bright);
    text-decoration: none;
    transition: opacity 0.2s;
}

.eas-utility-left a:hover {
    opacity: 0.75;
}

.eas-utility-left span:not(.eas-divider) {
    color: #888;
}

.eas-divider {
    color: #333;
}

.eas-utility-right {
    font-family: var(--eas-font-nav);
    font-size: 10px;
    letter-spacing: 3px;
    color: #777;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   MAIN NAV BAR
═══════════════════════════════════════════════ */

.eas-nav-bar {
    height: 80px;
    background: var(--eas-cream);
    border-bottom: 1px solid var(--eas-border);
    transition: background 0.35s var(--eas-ease),
                border-color 0.35s var(--eas-ease),
                box-shadow 0.35s var(--eas-ease);
}

.eas-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
}

/* ─── LOGO ─── */
.eas-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.eas-logo a {
    display: block;
    line-height: 0;
}

/* 2026-08-06, Lounge Form Revisions v1.7 rollout — enlarged 58px→70px
   (the .eas-nav-bar height is a fixed 80px, baked into LAW 15's
   sitewide body-offset math, so this is the real ceiling without a
   much larger layout change). svg is the real path now
   (eas_render_logo_svg()); img is kept as the selector for its own
   documented missing-file fallback. */
.eas-logo svg,
.eas-logo img {
    display: block;
    height: 70px;
    width: auto;
    max-width: min(260px, 48vw);
    transition: filter 0.35s var(--eas-ease);
}
/* The shared logo asset's tagline fill (.st0, #E8C06A) is tuned for
   dark/photographic contexts (root CLAUDE.md's own token rules). The
   scrolled/panel-open nav states below render it on a light cream
   bar, where that gold read too faint — recolored to the same darker
   gold already used site-wide for text-on-light. Has no visible
   effect in the transparent (dark hero) state, since that state's own
   filter (below) flattens every fill to solid white regardless. */
.eas-logo svg .st0 { fill: var(--eas-gold-on-light); }

/* ─── NAV LISTS ─── */
.eas-nav-left ul,
.eas-nav-right ul {
    display: flex;
    align-items: center;
}

.eas-nav-right ul {
    justify-content: flex-end;
}

/* ─── NAV LINKS ─── */
.eas-nav-link {
    font-family: var(--eas-font-nav);
    font-size: 10.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--eas-text);
    text-decoration: none;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    white-space: nowrap;
    transition: color 0.25s;
}

.eas-nav-link:hover {
    color: var(--eas-gold);
}

.eas-nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--eas-gold);
    transform: scaleX(0);
    transition: transform 0.3s var(--eas-ease);
}

.eas-nav-link:hover::after {
    transform: scaleX(1);
}

.eas-chevron {
    flex-shrink: 0;
    transition: transform 0.3s var(--eas-ease);
}

.eas-nav-item:hover .eas-chevron,
.eas-nav-item:focus-within .eas-chevron {
    transform: rotate(180deg);
}

/* ─── NAV CTA — site-wide ghost default (gold on hover only) ─── */
.eas-header .eas-nav-bar .eas-cta-btn {
    font-family: var(--eas-font-nav);
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--eas-text);
    text-decoration: none;
    padding: 11px 22px;
    border: 1px solid var(--eas-text);
    margin-left: 8px;
    display: inline-block;
    white-space: nowrap;
    background: var(--eas-cream);
    transition: all 0.25s var(--eas-ease);
}

.eas-header .eas-nav-bar .eas-cta-btn:hover {
    background: var(--eas-gold);
    border-color: var(--eas-gold);
    color: #fff;
}

/* Solid nav pages (destinations, offers, etc.) — match nav bar surface */
.eas-header:not(.is-transparent) .eas-nav-bar .eas-cta-btn {
    background: var(--eas-cream);
    color: var(--eas-text);
    border-color: var(--eas-text);
}

/* ═══════════════════════════════════════════════
   CART INDICATOR — persistent, site-wide
   (Closeout Addendum v1.3, item 1) — LAW 11 duplicate
   of the identical block in css/header.css.
═══════════════════════════════════════════════ */
.eas-cart-indicator {
    position: relative;
    display: flex;
    align-items: center;
}

.eas-cart-indicator--mobile {
    display: none;
}

.eas-nav-mobile-actions {
    display: contents;
}

.eas-cart-indicator__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: 2px;
    background: none;
    border: none;
    color: var(--eas-text);
    cursor: pointer;
    transition: color 0.25s;
}

.eas-cart-indicator__toggle:hover {
    color: var(--eas-gold);
}

.eas-cart-indicator__toggle:focus {
    outline: none;
}

.eas-cart-indicator__toggle:focus-visible {
    outline: 2px solid var(--eas-gold);
    outline-offset: 2px;
}

.eas-cart-indicator__count {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: var(--eas-font-nav);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--eas-gold);
    border-radius: 50%;
}

.eas-cart-indicator.has-items .eas-cart-indicator__count {
    display: flex;
}

.eas-cart-indicator__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 300px;
    max-width: calc(100vw - 32px);
    max-height: 360px;
    overflow-y: auto;
    background: var(--eas-cream);
    border: 1px solid var(--eas-border);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.3);
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s var(--eas-ease), transform 0.2s var(--eas-ease), visibility 0.2s;
    z-index: 20;
}

.eas-cart-indicator.is-open .eas-cart-indicator__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.eas-cart-indicator .eas-cart-panel__label,
.eas-cart-indicator .eas-cart-panel__empty {
    margin: 0 0 10px;
}

.eas-header.is-transparent .eas-cart-indicator__toggle {
    color: #fff;
}

.eas-header.is-transparent .eas-cart-indicator__toggle:hover {
    color: var(--eas-gold);
}

.eas-header.is-scrolled .eas-cart-indicator__toggle {
    color: var(--eas-text);
}

/* ═══════════════════════════════════════════════
   TRANSPARENT STATE — homepage hero overlay
═══════════════════════════════════════════════ */

/* Utility bar stays visible in transparent state (matches homepage) */
.eas-header.is-transparent .eas-utility-bar {
    height: 38px;
    min-height: 38px;
    opacity: 1;
    pointer-events: auto;
    overflow: hidden;
    background: #1A1A1A;
}

.eas-header.is-transparent .eas-utility-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 1200px) {
    .eas-header.is-transparent .eas-utility-inner {
        padding: 0 40px;
    }
}

.eas-header.is-transparent .eas-utility-left {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #C8BFA8;
}

.eas-header.is-transparent .eas-utility-left a {
    color: #E8C06A !important;
    font-weight: 400;
}

.eas-header.is-transparent .eas-utility-left span:not(.eas-divider) {
    color: #C8BFA8 !important;
}

.eas-header.is-transparent .eas-utility-right {
    color: #C8BFA8;
    font-size: 11px;
    letter-spacing: 2.5px;
    opacity: 1;
}

.eas-header.is-transparent .eas-divider {
    color: #888888 !important;
}

.eas-header.is-transparent .eas-nav-bar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}

.eas-header.is-transparent .eas-nav-link {
    color: #fff !important;
}

.eas-header.is-transparent .eas-nav-link:hover {
    color: var(--eas-gold) !important;
}

.eas-header.is-transparent .eas-nav-link::after {
    background: rgba(255, 255, 255, 0.6);
}

.eas-header.is-transparent .eas-logo svg,
.eas-header.is-transparent .eas-logo img {
    filter: brightness(0) invert(1);
}

.eas-header.is-transparent .eas-cta-btn {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
}

.eas-header.is-transparent .eas-cta-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #fff !important;
    color: #fff !important;
}

.eas-header.is-transparent .eas-chevron {
    color: #fff;
}

.eas-header.is-transparent .eas-mobile-toggle span {
    background: #fff;
}

/* ─── SCROLLED STATE ─── */
.eas-header.is-scrolled .eas-utility-bar {
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.eas-header.is-scrolled .eas-nav-bar {
    background: var(--eas-cream) !important;
    border-bottom: 1px solid var(--eas-border) !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

.eas-header.is-scrolled .eas-nav-link {
    color: var(--eas-text) !important;
}

.eas-header.is-scrolled .eas-nav-link:hover {
    color: var(--eas-gold) !important;
}

.eas-header.is-scrolled .eas-nav-link::after {
    background: var(--eas-gold);
}

.eas-header.is-scrolled .eas-logo svg,
.eas-header.is-scrolled .eas-logo img {
    filter: none !important;
}

.eas-header.is-scrolled .eas-chevron {
    color: var(--eas-text);
}

.eas-header.is-scrolled .eas-mobile-toggle span {
    background: var(--eas-text);
}

.eas-header.is-scrolled .eas-cta-btn {
    background: var(--eas-cream) !important;
    color: var(--eas-text) !important;
    border-color: var(--eas-text) !important;
}

/* ═══════════════════════════════════════════════
   NAV PANELS — dark translucent floating (CANONICAL v3, §2)
   Safaris by Traveler · The Migration · Destinations · Group Departures
   Mirrors css/header.css. Panels are self-contained (own colours/fonts).
═══════════════════════════════════════════════ */

.eas-header .eas-nav-left ul,
.eas-header .eas-nav-right ul {
    height: 100%;
}

/* Nav items are NOT the positioning context — full-width panels resolve against
   .eas-header (position:fixed) so they span the viewport, flush under the header. */
.eas-nav-item {
    display: flex;
    align-items: center;
    height: 100%;
}

/* ─── LIVE DOT (The Migration) — 10px amber, 9px pulse ring, 2.4s (brief §3) ─── */
.eas-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C9963C;
    display: inline-block;
    flex-shrink: 0;
    animation: eas-live-pulse 2.4s ease-in-out infinite;
}

@keyframes eas-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 150, 60, 0.55); }
    50%      { box-shadow: 0 0 0 9px rgba(201, 150, 60, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .eas-live-dot { animation: none; }
}

/* ═══════════════════════════════════════════════
   PANEL-OPEN STATE (brief §1) — mirror of css/header.css
═══════════════════════════════════════════════ */
.eas-header.panel-open .eas-nav-bar,
.eas-header.is-transparent.panel-open .eas-nav-bar {
    background: var(--eas-cream) !important;
    border-bottom: 1px solid var(--eas-border) !important;
    box-shadow: 0 1px 0 rgba(88, 71, 56, 0.14) !important;
}

.eas-header.panel-open .eas-nav-link,
.eas-header.is-transparent.panel-open .eas-nav-link {
    color: var(--eas-text) !important;
}

.eas-header.panel-open .eas-nav-link:hover,
.eas-header.is-transparent.panel-open .eas-nav-link:hover {
    color: var(--eas-gold) !important;
}

.eas-header.panel-open .eas-nav-link::after {
    background: var(--eas-gold);
}

.eas-header.panel-open .eas-logo svg,
.eas-header.is-transparent.panel-open .eas-logo svg,
.eas-header.panel-open .eas-logo img,
.eas-header.is-transparent.panel-open .eas-logo img {
    filter: none !important;
}

.eas-header.panel-open .eas-chevron,
.eas-header.is-transparent.panel-open .eas-chevron {
    color: var(--eas-text);
}

.eas-header.panel-open .eas-cta-btn,
.eas-header.is-transparent.panel-open .eas-cta-btn {
    background: var(--eas-cream) !important;
    color: var(--eas-text) !important;
    border-color: var(--eas-text) !important;
}

/* ─── BASE PANEL — full-width light parchment, flush under header (PANEL LAW §1) ─── */
.eas-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #F5F0E8;
    border-top: 1px solid rgba(88, 71, 56, 0.16);
    border-bottom: 2px solid var(--eas-gold);
    box-shadow: 0 30px 50px -28px rgba(28, 26, 20, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.22s var(--eas-ease), transform 0.22s var(--eas-ease);
    z-index: 9998;
}

.eas-nav-item:hover > .eas-panel,
.eas-nav-item:focus-within > .eas-panel,
.eas-nav-item.is-open > .eas-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .eas-panel { transition: none; }
}

.eas-panel-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 52px 60px 56px;
}

/* ─── SAFARIS BY TRAVELER — editorial list + one 4:5 crossfade image ─── */
.eas-trav-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 6vw;
    align-items: start;
}

.eas-trav-q {
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eas-gold);
    font-weight: 500;
    margin-bottom: 16px;
}

/* Row sizing fixed 2026-07-15 — built for 4 rows, Friends made a 5th and pushed
   the panel taller than the visible viewport on common laptop screens (row
   bottom edge landed past the fold, confirmed via screenshot at 1366x660
   content height). Font-size + padding trimmed so all 5 rows fit without
   scrolling on realistic viewports, while staying legible and on the same
   parchment/gold editorial language as the Destinations panel. */
.eas-trav-row {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(88, 71, 56, 0.14);
    text-decoration: none;
    transition: border-color 0.2s;
}

.eas-trav-row:hover {
    border-bottom-color: var(--eas-gold);
}

.eas-trav-name {
    font-family: var(--eas-font-head);
    font-weight: 300;
    font-size: 26px;
    line-height: 1.1;
    color: #1C1A14;
    min-width: 155px;
    transition: color 0.2s;
}

.eas-trav-row:hover .eas-trav-name {
    color: var(--eas-gold);
}

.eas-trav-tag {
    font-family: var(--eas-font-nav);
    font-weight: 300;
    font-size: 12.5px;
    line-height: 1.45;
    color: #584738;
}

.eas-trav-img {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 4 / 5;
    max-height: 430px;
    overflow: hidden;
    background: #CEC1A8;
    justify-self: end;
}

.eas-trav-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.eas-trav-face.is-on {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .eas-trav-face { transition: none; }
}

.eas-trav-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 14px 18px;
    background: linear-gradient(transparent, rgba(28, 26, 20, 0.55));
    color: #F5F0E8;
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ─── THE MIGRATION — light, two columns ─── */
.eas-mig-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
    align-items: center;
}

.eas-mig-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eas-gold);
    font-weight: 500;
    margin-bottom: 16px;
}

.eas-mig-line {
    font-family: var(--eas-font-head);
    font-weight: 300;
    font-size: 34px;
    line-height: 1.25;
    color: #1C1A14;
    margin-bottom: 20px;
}

.eas-mig-cta {
    display: inline-block;
    font-family: var(--eas-font-nav);
    font-size: 11.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--eas-gold);
    border-bottom: 1px solid rgba(184, 120, 10, 0.4);
    padding-bottom: 3px;
    transition: color 0.2s, border-color 0.2s;
}

.eas-mig-cta:hover {
    color: #1C1A14;
    border-bottom-color: #1C1A14;
}

.eas-mig-months {
    display: flex;
    border-top: 1px solid rgba(88, 71, 56, 0.16);
    border-bottom: 1px solid rgba(88, 71, 56, 0.16);
}

.eas-mig-months span {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-family: var(--eas-font-nav);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: #B59E7D;
}

.eas-mig-months span.is-now {
    background: var(--eas-gold);
    color: #F5F0E8;
    font-weight: 500;
}

.eas-mig-note {
    font-family: var(--eas-font-nav);
    font-weight: 300;
    font-size: 12.5px;
    line-height: 1.55;
    color: #584738;
    margin: 14px 0 0;
}

/* ─── DESTINATIONS — serif circuits ─── */
.eas-dest-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 30px;
}

.eas-dest-head .t {
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eas-gold);
    font-weight: 500;
}

.eas-dest-head .soon {
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #B59E7D;
}

.eas-dest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
}

.eas-circuit-col h5 {
    font-family: var(--eas-font-head);
    font-weight: 300;
    font-size: 31px;
    line-height: 1.05;
    margin: 0 0 4px;
}

.eas-circuit-col h5 a {
    color: #1C1A14;
    text-decoration: none;
    transition: color 0.15s;
}

.eas-circuit-col h5 a:hover {
    color: var(--eas-gold);
}

.eas-circuit-desc {
    font-family: var(--eas-font-nav);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eas-gold);
    font-weight: 500;
    margin-bottom: 16px;
}

.eas-circuit-parks {
    display: block;
    font-family: var(--eas-font-nav);
    font-weight: 300;
    font-size: 14px;
    color: #584738;
    padding: 6px 0;
    line-height: 1.7;
}

/* Each destination resolves to its own eas_destination permalink (fixed
   2026-07-15) — only linked when a real post exists. */
.eas-circuit-park-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.eas-circuit-park-link:hover {
    color: var(--eas-gold);
}

/* No eas_destination post yet — shown for context, not a fake link. */
.eas-circuit-park-text {
    color: #584738;
    opacity: 0.5;
}

.eas-circuit-park-sep {
    color: #584738;
    opacity: 0.45;
}

/* ═══════════════════════════════════════════════
   MOBILE TOGGLE
═══════════════════════════════════════════════ */

.eas-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    justify-self: end;
}

.eas-mobile-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--eas-text);
    transition: all 0.3s var(--eas-ease);
}

.eas-mobile-toggle.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.eas-mobile-toggle.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.eas-mobile-toggle.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Burger lines: ink when the drawer is open (over parchment), even on hero pages (§7) */
.eas-mobile-toggle.is-open span {
    background: var(--eas-text) !important;
}

/* ═══════════════════════════════════════════════
   MOBILE DRAWER — light parchment, accordion (brief §7) — mirror of css/header.css
═══════════════════════════════════════════════ */

.eas-mobile-overlay {
    position: fixed;
    inset: 0;
    background: #F5F0E8;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--eas-ease),
                visibility 0.4s var(--eas-ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.eas-mobile-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.eas-mobile-inner {
    padding: 70px 30px 90px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.eas-mobile-close {
    position: fixed;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: #584738;
    font-size: 22px;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    transition: color 0.2s;
    z-index: 100000;
}

.eas-mobile-close:hover {
    color: var(--eas-gold);
}

.eas-mobile-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.eas-m-group {
    border-bottom: 1px solid rgba(88, 71, 56, 0.16);
}

.eas-m-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 2px;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--eas-font-nav);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 400;
    color: #2C3424;
}

.eas-m-plus {
    font-family: var(--eas-font-head);
    font-size: 26px;
    font-weight: 300;
    color: var(--eas-gold);
    line-height: 1;
    width: 20px;
    text-align: center;
    transition: transform 0.25s var(--eas-ease);
}

.eas-m-group.is-open .eas-m-toggle {
    color: var(--eas-gold);
}

.eas-m-group.is-open .eas-m-plus {
    transform: rotate(45deg);
}

.eas-m-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--eas-ease);
}

.eas-m-group.is-open .eas-m-sub {
    max-height: 900px;
}

.eas-m-sub-inner {
    padding: 0 2px 24px;
}

.eas-m-item {
    display: block;
    padding: 11px 0;
    min-height: 44px;
    text-decoration: none;
}

.eas-m-item .t {
    display: block;
    font-family: var(--eas-font-head);
    font-weight: 300;
    font-size: 23px;
    color: #1C1A14;
    line-height: 1.1;
}

.eas-m-item .d {
    display: block;
    font-family: var(--eas-font-nav);
    font-size: 12.5px;
    color: #584738;
    margin-top: 3px;
    line-height: 1.45;
}

.eas-m-mig-live {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--eas-gold);
    font-weight: 500;
    padding-bottom: 12px;
}

.eas-m-soon {
    display: block;
    font-family: var(--eas-font-nav);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #B59E7D;
    padding: 8px 0 0;
}

.eas-m-plain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 2px;
    min-height: 44px;
    font-family: var(--eas-font-nav);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2C3424;
    text-decoration: none;
    border-bottom: 1px solid rgba(88, 71, 56, 0.16);
    transition: color 0.2s;
}

.eas-m-plain:hover {
    color: var(--eas-gold);
}

.eas-header .eas-m-begin {
    display: block;
    text-align: center;
    margin: 30px 2px 0;
    padding: 16px;
    background: var(--eas-gold);
    color: #F5F0E8;
    font-family: var(--eas-font-nav);
    font-size: 12.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.25s;
}

.eas-header .eas-m-begin:hover {
    background: #9A6408;
}

.eas-mobile-footer {
    padding-top: 28px;
    border-top: 1px solid rgba(88, 71, 56, 0.16);
    margin-top: 24px;
}

.eas-mobile-footer p {
    font-family: var(--eas-font-nav);
    font-size: 13px;
    color: #584738;
    letter-spacing: 0.5px;
    margin: 5px 0;
}

.eas-mobile-footer a {
    color: #584738;
    text-decoration: none;
    transition: color 0.2s;
}

.eas-mobile-footer a:hover {
    color: var(--eas-gold);
}

/* ════════════════════════════════════════════════════════════
   EAS FOOTER — footer.php (PHP-owned, zero plugin dependency)
   Background: #141414 | Body text: #B0A890 | Headings: #C8A96E
   Bottom bar: #0D0D0D
   ════════════════════════════════════════════════════════════ */

.eas-footer {
    background: #243022;
    color: #B0A890;
    font-family: var(--eas-font-nav);
}

.eas-footer-main {
    padding: 80px 0;
}

.eas-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 60px;
}

.eas-footer-col {
    display: flex;
    flex-direction: column;
}

.eas-footer-logo {
    max-width: 160px;
    height: auto;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.eas-footer-ethos {
    font-family: var(--eas-font-head);
    font-size: 19px;
    line-height: 1.8;
    color: rgba(237, 229, 214, 0.82);
    font-style: normal;
    margin-bottom: 28px;
}

.eas-footer-coords {
    margin-bottom: 24px;
}

.eas-footer-label {
    display: block;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--eas-gold);
    margin-bottom: 8px;
}

.eas-footer-coords address {
    font-style: normal;
    font-size: 15px;
    color: rgba(237, 229, 214, 0.72);
    line-height: 1.8;
}

.eas-footer-social {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
}

.eas-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #2A2A2A;
    color: #6A6252;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.eas-social-link:hover {
    border-color: var(--eas-gold);
    color: var(--eas-gold);
}

.eas-footer-heading {
    display: block;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--eas-gold);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2A2A2A;
}

.eas-footer-col nav {
    display: flex;
    flex-direction: column;
}

.eas-footer-col nav a {
    font-size: 16px;
    line-height: 2.2;
    color: rgba(237, 229, 214, 0.88);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 400;
}

.eas-footer-col nav a:hover {
    color: #F2EBD9;
}

.eas-footer-contact-text {
    font-family: var(--eas-font-head);
    font-size: 17px;
    line-height: 1.75;
    color: rgba(237, 229, 214, 0.72);
    font-style: normal;
    margin-bottom: 20px;
}

.eas-footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.eas-footer-contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: rgba(237, 229, 214, 0.88);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 400;
}

.eas-footer-contact-link:hover {
    color: #F2EBD9;
}

.eas-footer-contact-link svg {
    flex-shrink: 0;
    color: var(--eas-gold);
}

.eas-footer-cta {
    display: inline-block;
    font-family: var(--eas-font-nav);
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--eas-gold);
    border: 1px solid var(--eas-gold);
    padding: 14px 28px;
    min-height: 44px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, color 0.2s;
}

.eas-footer-cta:hover {
    background: var(--eas-gold);
    color: #141414;
}

.eas-footer-bottom {
    background: #243022;
    border-top: 1px solid rgba(200, 169, 110, 0.18);
    padding: 20px 0;
}

.eas-footer-bottom-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.eas-footer-bottom p {
    font-size: 13px;
    color: rgba(237, 229, 214, 0.72);
    margin: 0;
    line-height: 1.5;
}

.eas-footer-bottom nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eas-footer-bottom nav a {
    font-size: 13px;
    color: rgba(237, 229, 214, 0.72);
    text-decoration: none;
    transition: color 0.2s;
}

.eas-footer-bottom nav a:hover {
    color: var(--eas-gold);
}

.eas-footer-bottom nav span[aria-hidden] {
    color: rgba(200, 169, 110, 0.45);
}

/* Footer responsive */
@media (max-width: 1024px) {
    .eas-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        padding: 0 40px;
    }
    .eas-footer-bottom-inner {
        padding: 0 40px;
    }
}

@media (max-width: 640px) {
    .eas-footer-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 24px;
    }
    .eas-footer-main {
        padding: 60px 0;
    }
    .eas-footer-bottom-inner {
        padding: 0 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .eas-utility-inner,
    .eas-nav-inner {
        padding: 0 40px;
    }

    .eas-nav-link {
        padding: 10px 10px;
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .eas-cta-btn {
        padding: 10px 16px;
        font-size: 9.5px;
    }

    .eas-mega-inner {
        padding: 0 40px;
    }
}

@media (max-width: 1024px) {
    .eas-nav-left,
    .eas-nav-right {
        display: none;
    }

    .eas-mobile-toggle {
        display: flex;
    }

    .eas-nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 20px;
    }

    .eas-logo {
        flex: 1 1 auto;
        justify-content: flex-start;
        min-width: 0;
        padding-left: 4px;
    }

    .eas-logo a {
        display: block;
        padding-left: 8px;
    }

    .eas-logo svg,
    .eas-logo img {
        display: block;
        height: 64px;
        width: auto;
        max-width: min(220px, 56vw);
        object-fit: contain;
        object-position: left center;
    }

    .eas-mobile-toggle {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .eas-utility-inner {
        padding: 0 16px;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        row-gap: 2px;
        column-gap: 10px;
        height: auto;
        min-height: 38px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .eas-utility-left {
        flex-wrap: wrap;
        justify-content: center;
        font-size: 10px;
        letter-spacing: 1px;
        gap: 6px;
    }

    .eas-utility-right {
        flex: 0 0 100%;
        font-size: 8px;
        letter-spacing: 2px;
        line-height: 1.35;
        text-align: center;
    }

    .eas-utility-bar {
        height: auto;
    }
}

/* Cart mobile actions — LAW 11 duplicate of css/header.css's identical
   block, placed after the shared 1024px block above for the same cascade
   reason (its .eas-mobile-toggle override must win at equal specificity). */
@media (max-width: 1024px) {
    .eas-nav-mobile-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .eas-nav-mobile-actions .eas-mobile-toggle {
        margin-left: 0;
    }

    .eas-cart-indicator--mobile {
        display: flex;
        /* Pre-promotion QA fix — LAW 11 duplicate of css/header.css's
           identical fix. See that file for the full root-cause comment:
           removing position:relative here makes .eas-header (position:fixed)
           the panel's containing block, so top:100% always clears the real
           header height (80px-118px, varies by scroll/utility-bar state)
           instead of the 36px toggle box. */
        position: static;
    }

    .eas-cart-indicator--mobile .eas-cart-indicator__panel {
        top: calc(100% + 10px);
        right: 16px;
        left: auto;
        width: min(300px, calc(100vw - 24px));
        z-index: 10000;
        box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.45);
    }
}

@media (max-width: 480px) {
    .eas-utility-bar {
        display: none;
    }

    .eas-mobile-inner {
        padding: 70px 24px 40px;
    }

    .eas-mobile-nav a {
        font-size: 19px;
    }
}

/* ─────────────────────────────────────────────────────────────
   CUSTOM LOGO SIZING — site-wide
───────────────────────────────────────────────────────────── */
.custom-logo-link img.custom-logo {
    height: 52px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    transition: opacity 0.3s;
}
.custom-logo-link:hover img.custom-logo { opacity: 0.85; }
@media (max-width: 768px) {
    .custom-logo-link img.custom-logo { height: 40px; }
}

/* ─────────────────────────────────────────────────────────────
   FOXIZ wp_footer LEAKAGE — login popup + hidden modals
   Foxiz outputs #rb-user-popup-form on every wp_footer() call.
   Standalone LAW 8 templates may not load foxiz/main.css, so
   .mfp-hide never applies and the form renders visible in-flow.
───────────────────────────────────────────────────────────── */
.mfp-hide,
.is-hidden {
    display: none !important;
}

body:has(.eas-header) #rb-user-popup-form,
body:has(.eas-header) .rb-user-popup-form,
body:has(.eas-header) .popup-newsletter {
    display: none !important;
}

/* ═══════════════════════════════════════════════════
   EAS GLOBAL TYPOGRAPHY SYSTEM
   Deployed: July 2026
   Applies Cormorant Garamond + Jost site-wide.
   Uses scoped selectors to avoid breaking Foxiz UI.
   ═══════════════════════════════════════════════════ */

/* All headings — Cormorant Garamond 300 upright (exclude LAW 18 components).

   Migration-only addition, not on real live style.css: every selector below
   also excludes `.eas-st-root` and its descendants. Real WordPress never
   loads this file on the Blog Post template (single.php has its own
   enqueue list — confirmed via a direct fetch of the live <head>, see
   eas-single-post.css's own header comment), so this rule never had a
   chance to compete with eas-single-post.css's real per-element font rules
   there. This app loads style.css globally (needed correctly by every
   other template), so without this exclusion this rule's real, live-correct
   Cormorant-Garamond-for-headings behavior would incorrectly leak onto
   Blog Post's own Playfair-Display/Overpass-Mono/Source-Serif-4 headings —
   confirmed via a live computed-style diff against easguides.travel that
   real Blog Post headings never carry Cormorant Garamond. Scoping it out
   here (rather than fighting it with a counter-rule inside
   BlogPostTemplate.tsx) exactly reproduces the real "this file never
   applies here" behavior with zero specificity-cascade risk anywhere else,
   since `.eas-st-root` doesn't exist on any of the 22+ other page types. */
.eas-child-theme h1:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *),
.eas-child-theme h2:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *),
.eas-child-theme h3:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *),
.eas-child-theme h4:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *),
.eas-child-theme .entry-title:not(.eas-st-root):not(.eas-st-root *),
.eas-child-theme .page-title:not(.eas-st-root):not(.eas-st-root *),
[class*="eas-"] h1:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *),
[class*="eas-"] h2:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *),
[class*="eas-"] h3:not([class*="eas-comp-"]):not(.eas-st-root):not(.eas-st-root *),
.single .entry-title:not(.eas-st-root):not(.eas-st-root *),
.archive .page-title:not(.eas-st-root):not(.eas-st-root *) {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* Body text — Jost 400 (was 300 — BUILD-BRIEF-PHASE-A-B-CALCULATOR-CORE-v1

   A1, 2026-08-14: "Body text minimum weight 400, UI labels/data minimum

   weight 500." This selector list (`[class*="eas-"] p/li/span/label`) is

   the single highest-leverage fix on the whole site — it pattern-matches

   any element inside any custom-built EAS page/component by class-name

   substring, which is why 300-weight Jost showed up across 50+ template

   files without any of them setting it themselves; they all inherit from

   here. `label` split out to its own, higher-weight rule below per the

   brief's separate UI-label floor. Base size left at the existing

   inherited value on desktop (already >=16px on every rebuilt template

   via eas-parity.css's .eas-prose-std/17px or the browser default) —

   the explicit floor below covers the one place a smaller size was

   actually set (the pre-existing mobile block).



   Real bug found and fixed same-day, in the same session: the original

   `span` clause here (`[class*="eas-"] span:not(.rb-)`) has specificity

   (0,2,1) — an attribute selector + a type selector + a :not() clause —

   which is HIGHER than `.eas-eyebrow-std` alone (0,1,0) and even higher

   than two-class component overrides like

   `.eas-comp-hero-image__label--hero.eas-eyebrow-std` (0,2,0). Since

   every UI eyebrow/label on this site is rendered as a `<span>`

   carrying an `eas-` class, this rule was silently winning the cascade

   and forcing every one of them down to 400 — directly undoing this

   session's own eas-parity.css/eas-components.css edits that raised

   `.eas-eyebrow-std` and friends to 500. Caught via a live computed-style

   check (not assumed from the CSS diff), root-caused via a full

   matched-rule cascade dump. Fixed the same way headings above already

   protect LAW-18 components: exclude `.eas-eyebrow-std` and any

   `*-label`/`*__label`-pattern span (stat labels, card labels, pace

   labels, etc. — all genuinely UI-label content per the brief's own

   category, not body prose) from this bucket, so their own

   correctly-higher-weight rules win undisturbed. Bare inline spans

   inside real `<p>`/`<li>` prose are unaffected — they inherit weight

   400 naturally from their already-covered parent, no rule needed.



   Same bug, second instance, caught by the same live-verify pass:

   real "UI label" elements on this site are just as often rendered as

   `<p>` as `<span>` — e.g. page-couple-safari-tanzania.php's own

   `<p class="eas-cp-glance__text eas-stat-label">` — so the

   `[class*="eas-"] p`/`li` clauses below needed the identical

   *-label/__label exclusion, not just the span clause. */

.eas-child-theme .entry-content p:not(.eas-st-root *),

.eas-child-theme .entry-content li:not(.eas-st-root *),

.eas-child-theme .rb-post-excerpt:not(.eas-st-root *),

[class*="eas-"] p:not([class*="-label"]):not([class*="__label"]):not(.eas-st-root *),

[class*="eas-"] li:not([class*="-label"]):not([class*="__label"]):not(.eas-st-root *),

[class*="eas-"] span:not(.rb-):not(.eas-eyebrow-std):not([class*="-label"]):not([class*="__label"]):not(.eas-st-root *) {

    /* Migration-only `:not(.eas-st-root *)` exclusion on every selector
       above — same real reason as the heading rule above this one: real
       WordPress never loads style.css on the Blog Post template at all,
       so this Jost-body-text rule never competes with
       eas-single-post.css's real Overpass-Mono/Source-Serif-4 rules there.
       `.eas-st-root` only exists on this app's Blog Post template, so this
       has zero effect on any other page. */
    font-family: 'Jost', sans-serif !important;

    font-weight: 400;

    line-height: 1.75;

}



/* UI labels/data — weight 500 floor (brief's own, higher, "UI

   labels/data minimum weight 500" line — distinct from plain body copy

   above). Covers real <label> elements; the span-based label/eyebrow

   classes excluded above are governed by their own component/parity

   rules (also raised to 500 this session), not this selector. */

[class*="eas-"] label:not(.eas-st-root *) {

    font-family: 'Jost', sans-serif !important;

    font-weight: 500;

    line-height: 1.75;

}



/* Navigation elements */

.eas-nav a,

.eas-utility-bar,

.eas-utility-bar a,

.eas-utility-bar span {

    font-family: 'Jost', sans-serif !important;

    font-weight: 400;

}

/* Mobile font floor — 40+ audience. Same `.eas-st-root *` exclusion as
   the desktop rules above and for the same real reason (never loaded on
   Blog Post live) — without it, elements like `.eas-st-deck` (a bare
   `<p>`, no `!important` of its own on font-size) would get force-set to
   16px on mobile instead of their real `clamp(15px,1.4vw,19px)` value. */
@media (max-width: 768px) {
    .eas-child-theme .entry-content p:not(.eas-st-root *),
    [class*="eas-"] p:not(.eas-st-root *) {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    .eas-child-theme h1:not([class*="eas-comp-"]):not(.eas-st-root *),
    [class*="eas-"] h1:not([class*="eas-comp-"]):not(.eas-st-root *) { font-size: clamp(32px, 8vw, 48px) !important; }

    .eas-child-theme h2:not([class*="eas-comp-"]):not(.eas-st-root *),
    [class*="eas-"] h2:not([class*="eas-comp-"]):not(.eas-st-root *) { font-size: clamp(26px, 6vw, 38px) !important; }

    .eas-child-theme h3:not([class*="eas-comp-"]):not(.eas-st-root *),
    [class*="eas-"] h3:not([class*="eas-comp-"]):not(.eas-st-root *) { font-size: clamp(20px, 5vw, 28px) !important; }
}

/* ════════════════════════════════════════════════════════════
   EAS FILLED PRIMARY BUTTONS — Final CTA tokens (site-wide)
   Excludes: .eas-header nav CTA (outline), footer START PLANNING,
   hero editorial links (.eas-comp-hero-image__cta, .eas-hero__cta)
════════════════════════════════════════════════════════════ */
.eas-comp-final__btn,
.eas-final__btn,
.btn-p,
.eas-btn-primary,
.eas-btn--primary,
.eas-acc-cta-btn,
.eas-couple-page .eas-cta-btn,
.eas-honeymoon-page .eas-cta-btn,
.eas-solo-page .eas-cta-btn,
.eas-milestone-page .eas-cta-btn,
.eas-wellness-page .eas-cta-btn,
.eas-safari-destinations-page .eas-cta-btn,
.eas-group-departures-page .eas-cta-btn,
.eas-dest-wrap .eas-cta-wrap .eas-cta-btn,
.eas-journals-cta .eas-cta-btn {
    background-color: var(--eas-btn-bg) !important;
    color: var(--eas-btn-text) !important;
    border-color: var(--eas-btn-border-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.eas-comp-final__btn:hover,
.eas-comp-final__btn:focus-visible,
.eas-final__btn:hover,
.eas-final__btn:focus-visible,
.btn-p:hover,
.btn-p:focus-visible,
.eas-btn-primary:hover,
.eas-btn-primary:focus-visible,
.eas-btn--primary:hover,
.eas-btn--primary:focus-visible,
.eas-acc-cta-btn:hover,
.eas-acc-cta-btn:focus-visible,
.eas-couple-page .eas-cta-btn:hover,
.eas-couple-page .eas-cta-btn:focus-visible,
.eas-honeymoon-page .eas-cta-btn:hover,
.eas-honeymoon-page .eas-cta-btn:focus-visible,
.eas-solo-page .eas-cta-btn:hover,
.eas-solo-page .eas-cta-btn:focus-visible,
.eas-milestone-page .eas-cta-btn:hover,
.eas-milestone-page .eas-cta-btn:focus-visible,
.eas-wellness-page .eas-cta-btn:hover,
.eas-wellness-page .eas-cta-btn:focus-visible,
.eas-safari-destinations-page .eas-cta-btn:hover,
.eas-safari-destinations-page .eas-cta-btn:focus-visible,
.eas-group-departures-page .eas-cta-btn:hover,
.eas-group-departures-page .eas-cta-btn:focus-visible,
.eas-dest-wrap .eas-cta-wrap .eas-cta-btn:hover,
.eas-dest-wrap .eas-cta-wrap .eas-cta-btn:focus-visible,
.eas-journals-cta .eas-cta-btn:hover,
.eas-journals-cta .eas-cta-btn:focus-visible {
    background-color: var(--eas-btn-bg-hover) !important;
    color: var(--eas-btn-text-hover) !important;
    border-color: var(--eas-btn-bg-hover) !important;
}

/* ─────────────────────────────────────────────────────────────
   SITE-WIDE ITALIC BAN — founder ruling 2026-07-11 (Task B)
   No text renders slanted anywhere. Belt-and-suspenders alongside the
   source-level upright sweep + slanted font-load removal.
   ───────────────────────────────────────────────────────────── */
em, i, cite, address, var, dfn, q,
[class*="eas-"] em, [class*="eas-"] i, [class*="eas-"] cite {
    font-style: normal;
}

/* header.css */
/* ═══════════════════════════════════════════════════════════
   EAS PRIMARY HEADER
   East Africa Safari Guides
   Child theme owned — zero dependencies
   v1.2 — real images, consolidated, final
═══════════════════════════════════════════════════════════ */

:root {
    --eas-gold:        #B8780A;
    --eas-gold-bright: #D4922E;
    --eas-dark:      #1A1A1A;
    --eas-cream:     #FAFAF5;
    --eas-text:      #2A2A2A;
    --eas-muted:     #888888;
    --eas-border:    #E8E4DE;
    --eas-font-nav:  'Jost', sans-serif;
    --eas-font-head: 'Cormorant Garamond', serif;
    --eas-ease:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── RESET ─── */
.eas-header *,
.eas-header *::before,
.eas-header *::after {
    box-sizing: border-box;
}

.eas-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ─── BASE ─── */
.eas-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

/* ─── BODY OFFSET ─── */
body:has(.eas-header) {
    padding-top: 118px; /* utility 38px + nav 80px */
}

body:has(.eas-header.is-scrolled) {
    padding-top: 80px; /* utility collapsed — nav only */
}

/* Full-bleed hero pages — hero extends under transparent nav */
body.eas-home-page:has(.eas-header.is-transparent),
body.eas-accommodation-single:has(.eas-header.is-transparent),
body.eas-dest-archive-page:has(.eas-header.is-transparent),
body.eas-journals-archive-page:has(.eas-header.is-transparent),
body.home:has(.eas-header.is-transparent),
body.single:has(.eas-header.is-transparent) {
    padding-top: 0 !important;
}

@media (max-width: 480px) {
    body {
        padding-top: 80px;
    }
}

/* ═══════════════════════════════════════════════
   UTILITY BAR
═══════════════════════════════════════════════ */

.eas-utility-bar,
.eas-top-bar {
    transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease, height 0.35s var(--eas-ease);
    overflow: hidden;
    max-height: 48px;
}

body.scrolled .eas-utility-bar,
body.scrolled .eas-top-bar {
    opacity: 0;
    max-height: 0;
    height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.eas-utility-bar {
    background: var(--eas-dark);
    height: 38px;
    overflow: hidden;
}

.eas-utility-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eas-utility-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--eas-gold);
}

.eas-utility-left a {
    color: var(--eas-gold-bright);
    text-decoration: none;
    transition: opacity 0.2s;
}

.eas-utility-left a:hover {
    opacity: 0.75;
}

.eas-utility-left span:not(.eas-divider) {
    color: #888;
}

.eas-divider {
    color: #333;
}

.eas-utility-right {
    font-family: var(--eas-font-nav);
    font-size: 10px;
    letter-spacing: 3px;
    color: #777;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   MAIN NAV BAR
═══════════════════════════════════════════════ */

.eas-nav-bar {
    height: 80px;
    background: var(--eas-cream);
    border-bottom: 1px solid var(--eas-border);
    transition: background 0.35s var(--eas-ease),
                border-color 0.35s var(--eas-ease),
                box-shadow 0.35s var(--eas-ease);
}

.eas-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
}

/* ─── LOGO ─── */
.eas-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.eas-logo a {
    display: block;
    line-height: 0;
}

.eas-logo img {
    height: 58px;
    width: auto;
    max-width: min(260px, 48vw);
    transition: filter 0.35s var(--eas-ease);
}

/* ─── NAV LISTS ─── */
.eas-nav-left ul,
.eas-nav-right ul {
    display: flex;
    align-items: center;
}

.eas-nav-right ul {
    justify-content: flex-end;
}

/* ─── NAV LINKS ─── */
.eas-nav-link {
    font-family: var(--eas-font-nav);
    font-size: 10.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--eas-text);
    text-decoration: none;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    white-space: nowrap;
    transition: color 0.25s;
}

.eas-nav-link:hover {
    color: var(--eas-gold);
}

.eas-nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--eas-gold);
    transform: scaleX(0);
    transition: transform 0.3s var(--eas-ease);
}

.eas-nav-link:hover::after {
    transform: scaleX(1);
}

.eas-chevron {
    flex-shrink: 0;
    transition: transform 0.3s var(--eas-ease);
}

.eas-nav-item:hover .eas-chevron,
.eas-nav-item:focus-within .eas-chevron {
    transform: rotate(180deg);
}

/* ─── NAV CTA — site-wide ghost default (gold on hover only) ─── */
.eas-header .eas-nav-bar .eas-cta-btn {
    font-family: var(--eas-font-nav);
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--eas-text);
    text-decoration: none;
    padding: 11px 22px;
    border: 1px solid var(--eas-text);
    margin-left: 8px;
    display: inline-block;
    white-space: nowrap;
    background: var(--eas-cream);
    transition: all 0.25s var(--eas-ease);
}

.eas-header .eas-nav-bar .eas-cta-btn:hover {
    background: var(--eas-gold);
    border-color: var(--eas-gold);
    color: #fff;
}

/* Solid nav pages (destinations, offers, etc.) — match nav bar surface */
.eas-header:not(.is-transparent) .eas-nav-bar .eas-cta-btn {
    background: var(--eas-cream);
    color: var(--eas-text);
    border-color: var(--eas-text);
}

/* ═══════════════════════════════════════════════
   CART INDICATOR — persistent, site-wide
   (Closeout Addendum v1.3, item 1; promoted to live
   2026-08-10 as part of Part A, Experience launch).
   Two DOM instances (desktop inside .eas-nav-right,
   mobile a sibling of the hamburger) share this one
   set of rules — same pattern already used for the
   mega-panel nav/mobile drawer duplication elsewhere
   in this file.
═══════════════════════════════════════════════ */
.eas-cart-indicator {
    position: relative;
    display: flex;
    align-items: center;
}

.eas-cart-indicator--mobile {
    display: none;
}

/* Wrapper around [cart-mobile][hamburger] — display:contents at desktop
   means it takes no part in .eas-nav-inner's grid layout at all, so both
   children's own default display:none values are what actually govern
   desktop visibility (identical to how .eas-mobile-toggle worked alone,
   pre-cart). Becomes a real flex box only <=1024px, see below. */
.eas-nav-mobile-actions {
    display: contents;
}

.eas-cart-indicator__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: 2px;
    background: none;
    border: none;
    color: var(--eas-text);
    cursor: pointer;
    transition: color 0.25s;
}

.eas-cart-indicator__toggle:hover {
    color: var(--eas-gold);
}

.eas-cart-indicator__toggle:focus {
    outline: none;
}

.eas-cart-indicator__toggle:focus-visible {
    outline: 2px solid var(--eas-gold);
    outline-offset: 2px;
}

.eas-cart-indicator__count {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: var(--eas-font-nav);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--eas-gold);
    border-radius: 50%;
}

.eas-cart-indicator.has-items .eas-cart-indicator__count {
    display: flex;
}

.eas-cart-indicator__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 300px;
    max-width: calc(100vw - 32px);
    max-height: 360px;
    overflow-y: auto;
    background: var(--eas-cream);
    border: 1px solid var(--eas-border);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.3);
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s var(--eas-ease), transform 0.2s var(--eas-ease), visibility 0.2s;
    z-index: 20;
}

.eas-cart-indicator.is-open .eas-cart-indicator__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.eas-cart-indicator .eas-cart-panel__label,
.eas-cart-indicator .eas-cart-panel__empty {
    margin: 0 0 10px;
}

.eas-header.is-transparent .eas-cart-indicator__toggle {
    color: #fff;
}

.eas-header.is-transparent .eas-cart-indicator__toggle:hover {
    color: var(--eas-gold);
}

.eas-header.is-scrolled .eas-cart-indicator__toggle {
    color: var(--eas-text);
}

/* ═══════════════════════════════════════════════
   TRANSPARENT STATE — homepage hero overlay
═══════════════════════════════════════════════ */

/* Utility bar stays visible in transparent state (matches homepage) */
.eas-header.is-transparent .eas-utility-bar {
    height: 38px;
    min-height: 38px;
    opacity: 1;
    pointer-events: auto;
    overflow: hidden;
    background: #1A1A1A;
}

.eas-header.is-transparent .eas-utility-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 1200px) {
    .eas-header.is-transparent .eas-utility-inner {
        padding: 0 40px;
    }
}

.eas-header.is-transparent .eas-utility-left {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #C8BFA8;
}

.eas-header.is-transparent .eas-utility-left a {
    color: #E8C06A !important;
    font-weight: 400;
}

.eas-header.is-transparent .eas-utility-left span:not(.eas-divider) {
    color: #C8BFA8 !important;
}

.eas-header.is-transparent .eas-utility-right {
    color: #C8BFA8;
    font-size: 11px;
    letter-spacing: 2.5px;
    opacity: 1;
}

.eas-header.is-transparent .eas-divider {
    color: #888888 !important;
}

.eas-header.is-transparent .eas-nav-bar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}

.eas-header.is-transparent .eas-nav-link {
    color: #fff !important;
}

.eas-header.is-transparent .eas-nav-link:hover {
    color: var(--eas-gold) !important;
}

.eas-header.is-transparent .eas-nav-link::after {
    background: rgba(255, 255, 255, 0.6);
}

.eas-header.is-transparent .eas-logo img {
    filter: brightness(0) invert(1);
}

.eas-header.is-transparent .eas-cta-btn {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
}

.eas-header.is-transparent .eas-cta-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #fff !important;
    color: #fff !important;
}

.eas-header.is-transparent .eas-chevron {
    color: #fff;
}

.eas-header.is-transparent .eas-mobile-toggle span {
    background: #fff;
}

/* ─── SCROLLED STATE ─── */
.eas-header.is-scrolled .eas-utility-bar {
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.eas-header.is-scrolled .eas-nav-bar {
    background: var(--eas-cream) !important;
    border-bottom: 1px solid var(--eas-border) !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

.eas-header.is-scrolled .eas-nav-link {
    color: var(--eas-text) !important;
}

.eas-header.is-scrolled .eas-nav-link:hover {
    color: var(--eas-gold) !important;
}

.eas-header.is-scrolled .eas-nav-link::after {
    background: var(--eas-gold);
}

.eas-header.is-scrolled .eas-logo img {
    filter: none !important;
}

.eas-header.is-scrolled .eas-chevron {
    color: var(--eas-text);
}

.eas-header.is-scrolled .eas-mobile-toggle span {
    background: var(--eas-text);
}

.eas-header.is-scrolled .eas-cta-btn {
    background: var(--eas-cream) !important;
    color: var(--eas-text) !important;
    border-color: var(--eas-text) !important;
}

/* ═══════════════════════════════════════════════
   PANEL-OPEN STATE (brief §1)
   Header is solid parchment while any panel is open, so panel + header read as
   one surface over the transparent hero. Chained with .is-transparent to beat
   the transparent-state !important rules by specificity.
═══════════════════════════════════════════════ */
.eas-header.panel-open .eas-nav-bar,
.eas-header.is-transparent.panel-open .eas-nav-bar {
    background: var(--eas-cream) !important;
    border-bottom: 1px solid var(--eas-border) !important;
    box-shadow: 0 1px 0 rgba(88, 71, 56, 0.14) !important;
}

.eas-header.panel-open .eas-nav-link,
.eas-header.is-transparent.panel-open .eas-nav-link {
    color: var(--eas-text) !important;
}

.eas-header.panel-open .eas-nav-link:hover,
.eas-header.is-transparent.panel-open .eas-nav-link:hover {
    color: var(--eas-gold) !important;
}

.eas-header.panel-open .eas-nav-link::after {
    background: var(--eas-gold);
}

.eas-header.panel-open .eas-logo img,
.eas-header.is-transparent.panel-open .eas-logo img {
    filter: none !important;
}

.eas-header.panel-open .eas-chevron,
.eas-header.is-transparent.panel-open .eas-chevron {
    color: var(--eas-text);
}

.eas-header.panel-open .eas-cta-btn,
.eas-header.is-transparent.panel-open .eas-cta-btn {
    background: var(--eas-cream) !important;
    color: var(--eas-text) !important;
    border-color: var(--eas-text) !important;
}

/* ═══════════════════════════════════════════════
   NAV PANELS — full-width light parchment (PANEL LAW, brief §1)
   Safaris by Traveler · The Migration · Destinations · Group Departures
   Panels are self-contained (own colours/fonts) — independent of header state.
═══════════════════════════════════════════════ */

/* Nav items span the full nav-bar height so hover reaches the panel (no dead gap) */
.eas-header .eas-nav-left ul,
.eas-header .eas-nav-right ul {
    height: 100%;
}

/* Nav items are NOT the positioning context — full-width panels resolve against
   .eas-header (position:fixed) so they span the viewport, flush under the header. */
.eas-nav-item {
    display: flex;
    align-items: center;
    height: 100%;
}

/* ─── LIVE DOT (The Migration) — 10px amber, 9px pulse ring, 2.4s (brief §3) ─── */
.eas-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C9963C;
    display: inline-block;
    flex-shrink: 0;
    animation: eas-live-pulse 2.4s ease-in-out infinite;
}

@keyframes eas-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 150, 60, 0.55); }
    50%      { box-shadow: 0 0 0 9px rgba(201, 150, 60, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .eas-live-dot { animation: none; }
}

/* ─── BASE PANEL — full-width light parchment, flush under header (PANEL LAW §1) ─── */
.eas-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #F5F0E8;
    border-top: 1px solid rgba(88, 71, 56, 0.16);
    border-bottom: 2px solid var(--eas-gold);
    box-shadow: 0 30px 50px -28px rgba(28, 26, 20, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.22s var(--eas-ease), transform 0.22s var(--eas-ease);
    z-index: 9998;
}

.eas-nav-item:hover > .eas-panel,
.eas-nav-item:focus-within > .eas-panel,
.eas-nav-item.is-open > .eas-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .eas-panel { transition: none; }
}

.eas-panel-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 52px 60px 56px;
}

/* ─── SAFARIS BY TRAVELER — editorial list + one 4:5 crossfade image ─── */
.eas-trav-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 6vw;
    align-items: start;
}

.eas-trav-q {
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eas-gold);
    font-weight: 500;
    margin-bottom: 16px;
}

/* Row sizing fixed 2026-07-15 — built for 4 rows, Friends made a 5th and pushed
   the panel taller than the visible viewport on common laptop screens (row
   bottom edge landed past the fold, confirmed via screenshot at 1366x660
   content height). Font-size + padding trimmed so all 5 rows fit without
   scrolling on realistic viewports, while staying legible and on the same
   parchment/gold editorial language as the Destinations panel. */
.eas-trav-row {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(88, 71, 56, 0.14);
    text-decoration: none;
    transition: border-color 0.2s;
}

.eas-trav-row:hover {
    border-bottom-color: var(--eas-gold);
}

.eas-trav-name {
    font-family: var(--eas-font-head);
    font-weight: 300;
    font-size: 26px;
    line-height: 1.1;
    color: #1C1A14;
    min-width: 155px;
    transition: color 0.2s;
}

.eas-trav-row:hover .eas-trav-name {
    color: var(--eas-gold);
}

.eas-trav-tag {
    font-family: var(--eas-font-nav);
    font-weight: 300;
    font-size: 12.5px;
    line-height: 1.45;
    color: #584738;
}

.eas-trav-img {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 4 / 5;
    max-height: 430px;
    overflow: hidden;
    background: #CEC1A8;
    justify-self: end;
}

.eas-trav-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.eas-trav-face.is-on {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .eas-trav-face { transition: none; }
}

.eas-trav-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 14px 18px;
    background: linear-gradient(transparent, rgba(28, 26, 20, 0.55));
    color: #F5F0E8;
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ─── THE MIGRATION — light, two columns ─── */
.eas-mig-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
    align-items: center;
}

.eas-mig-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eas-gold);
    font-weight: 500;
    margin-bottom: 16px;
}

.eas-mig-line {
    font-family: var(--eas-font-head);
    font-weight: 300;
    font-size: 34px;
    line-height: 1.25;
    color: #1C1A14;
    margin-bottom: 20px;
}

.eas-mig-cta {
    display: inline-block;
    font-family: var(--eas-font-nav);
    font-size: 11.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--eas-gold);
    border-bottom: 1px solid rgba(184, 120, 10, 0.4);
    padding-bottom: 3px;
    transition: color 0.2s, border-color 0.2s;
}

.eas-mig-cta:hover {
    color: #1C1A14;
    border-bottom-color: #1C1A14;
}

.eas-mig-months {
    display: flex;
    border-top: 1px solid rgba(88, 71, 56, 0.16);
    border-bottom: 1px solid rgba(88, 71, 56, 0.16);
}

.eas-mig-months span {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-family: var(--eas-font-nav);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: #B59E7D;
}

.eas-mig-months span.is-now {
    background: var(--eas-gold);
    color: #F5F0E8;
    font-weight: 500;
}

.eas-mig-note {
    font-family: var(--eas-font-nav);
    font-weight: 300;
    font-size: 12.5px;
    line-height: 1.55;
    color: #584738;
    margin: 14px 0 0;
}

/* ─── DESTINATIONS — serif circuits ─── */
.eas-dest-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 30px;
}

.eas-dest-head .t {
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eas-gold);
    font-weight: 500;
}

.eas-dest-head .soon {
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #B59E7D;
}

.eas-dest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
}

.eas-circuit-col h5 {
    font-family: var(--eas-font-head);
    font-weight: 300;
    font-size: 31px;
    line-height: 1.05;
    margin: 0 0 4px;
}

.eas-circuit-col h5 a {
    color: #1C1A14;
    text-decoration: none;
    transition: color 0.15s;
}

.eas-circuit-col h5 a:hover {
    color: var(--eas-gold);
}

.eas-circuit-desc {
    font-family: var(--eas-font-nav);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eas-gold);
    font-weight: 500;
    margin-bottom: 16px;
}

.eas-circuit-parks {
    display: block;
    font-family: var(--eas-font-nav);
    font-weight: 300;
    font-size: 14px;
    color: #584738;
    padding: 6px 0;
    line-height: 1.7;
}

/* Each destination resolves to its own eas_destination permalink (fixed
   2026-07-15) — only linked when a real post exists. */
.eas-circuit-park-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.eas-circuit-park-link:hover {
    color: var(--eas-gold);
}

/* No eas_destination post yet — shown for context, not a fake link. */
.eas-circuit-park-text {
    color: #584738;
    opacity: 0.5;
}

.eas-circuit-park-sep {
    color: #584738;
    opacity: 0.45;
}

/* ═══════════════════════════════════════════════
   MOBILE TOGGLE
═══════════════════════════════════════════════ */

.eas-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    justify-self: end;
}

.eas-mobile-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--eas-text);
    transition: all 0.3s var(--eas-ease);
}

.eas-mobile-toggle.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.eas-mobile-toggle.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.eas-mobile-toggle.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Burger lines: ink when the drawer is open (over parchment), even on hero pages (§7) */
.eas-mobile-toggle.is-open span {
    background: var(--eas-text) !important;
}

/* ═══════════════════════════════════════════════
   MOBILE DRAWER — light parchment, accordion (brief §7)
═══════════════════════════════════════════════ */

.eas-mobile-overlay {
    position: fixed;
    inset: 0;
    background: #F5F0E8;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--eas-ease),
                visibility 0.4s var(--eas-ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.eas-mobile-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.eas-mobile-inner {
    padding: 70px 30px 90px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.eas-mobile-close {
    position: fixed;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: #584738;
    font-size: 22px;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    transition: color 0.2s;
    z-index: 100000;
}

.eas-mobile-close:hover {
    color: var(--eas-gold);
}

.eas-mobile-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Accordion group */
.eas-m-group {
    border-bottom: 1px solid rgba(88, 71, 56, 0.16);
}

.eas-m-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 2px;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--eas-font-nav);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 400;
    color: #2C3424;
}

.eas-m-plus {
    font-family: var(--eas-font-head);
    font-size: 26px;
    font-weight: 300;
    color: var(--eas-gold);
    line-height: 1;
    width: 20px;
    text-align: center;
    transition: transform 0.25s var(--eas-ease);
}

.eas-m-group.is-open .eas-m-toggle {
    color: var(--eas-gold);
}

.eas-m-group.is-open .eas-m-plus {
    transform: rotate(45deg);
}

.eas-m-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--eas-ease);
}

.eas-m-group.is-open .eas-m-sub {
    max-height: 900px;
}

.eas-m-sub-inner {
    padding: 0 2px 24px;
}

.eas-m-item {
    display: block;
    padding: 11px 0;
    min-height: 44px;
    text-decoration: none;
}

.eas-m-item .t {
    display: block;
    font-family: var(--eas-font-head);
    font-weight: 300;
    font-size: 23px;
    color: #1C1A14;
    line-height: 1.1;
}

.eas-m-item .d {
    display: block;
    font-family: var(--eas-font-nav);
    font-size: 12.5px;
    color: #584738;
    margin-top: 3px;
    line-height: 1.45;
}

.eas-m-mig-live {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--eas-font-nav);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--eas-gold);
    font-weight: 500;
    padding-bottom: 12px;
}

.eas-m-soon {
    display: block;
    font-family: var(--eas-font-nav);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #B59E7D;
    padding: 8px 0 0;
}

.eas-m-plain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 2px;
    min-height: 44px;
    font-family: var(--eas-font-nav);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2C3424;
    text-decoration: none;
    border-bottom: 1px solid rgba(88, 71, 56, 0.16);
    transition: color 0.2s;
}

.eas-m-plain:hover {
    color: var(--eas-gold);
}

.eas-header .eas-m-begin {
    display: block;
    text-align: center;
    margin: 30px 2px 0;
    padding: 16px;
    background: var(--eas-gold);
    color: #F5F0E8;
    font-family: var(--eas-font-nav);
    font-size: 12.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.25s;
}

.eas-header .eas-m-begin:hover {
    background: #9A6408;
}

.eas-mobile-footer {
    padding-top: 28px;
    border-top: 1px solid rgba(88, 71, 56, 0.16);
    margin-top: 24px;
}

.eas-mobile-footer p {
    font-family: var(--eas-font-nav);
    font-size: 13px;
    color: #584738;
    letter-spacing: 0.5px;
    margin: 5px 0;
}

.eas-mobile-footer a {
    color: #584738;
    text-decoration: none;
    transition: color 0.2s;
}

.eas-mobile-footer a:hover {
    color: var(--eas-gold);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .eas-utility-inner,
    .eas-nav-inner {
        padding: 0 40px;
    }

    .eas-nav-link {
        padding: 10px 10px;
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .eas-cta-btn {
        padding: 10px 16px;
        font-size: 9.5px;
    }
}

@media (max-width: 1024px) {
    .eas-nav-left,
    .eas-nav-right {
        display: none;
    }

    .eas-mobile-toggle {
        display: flex;
    }

    .eas-nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 20px;
    }

    .eas-logo {
        flex: 1 1 auto;
        justify-content: flex-start;
        min-width: 0;
        padding-left: 4px;
    }

    .eas-logo a {
        display: block;
        padding-left: 8px;
    }

    .eas-logo img {
        height: 54px;
        width: auto;
        max-width: min(220px, 56vw);
        object-fit: contain;
        object-position: left center;
    }

    .eas-mobile-toggle {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .eas-utility-inner {
        padding: 0 16px;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        row-gap: 2px;
        column-gap: 10px;
        height: auto;
        min-height: 38px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .eas-utility-left {
        flex-wrap: wrap;
        justify-content: center;
        font-size: 10px;
        letter-spacing: 1px;
        gap: 6px;
    }

    .eas-utility-right {
        flex: 0 0 100%;
        font-size: 8px;
        letter-spacing: 2px;
        line-height: 1.35;
        text-align: center;
    }

    .eas-utility-bar {
        height: auto;
    }
}

/* Cart mobile actions — placed after the shared 1024px block above so its
   .eas-mobile-toggle override (wrapper now owns the right-pin auto margin,
   not the button itself) wins the cascade at equal specificity. Base
   (desktop) state is display:contents (declared alongside the rest of the
   cart-indicator base rules above) — this block only handles <=1024px.
   Promoted to live 2026-08-10 as part of Part A, Experience launch. */
@media (max-width: 1024px) {
    .eas-nav-mobile-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .eas-nav-mobile-actions .eas-mobile-toggle {
        margin-left: 0;
    }

    .eas-cart-indicator--mobile {
        display: flex;
        /* Pre-promotion QA fix — was position:relative (inherited from the
           base .eas-cart-indicator rule), making this 36px-tall wrapper the
           panel's containing block. top:calc(100% + 12px) then measured from
           THIS box, not the real header (80px-118px depending on scroll /
           utility-bar state) — the panel always started ~10px inside the
           header, overlapping the logo/tagline text underneath it (same
           cream-on-cream color, so it read as a garbled overlap rather than
           two obviously separate panels). Removing position here makes
           .eas-header (position:fixed) the panel's containing block instead,
           so top:100% always clears the REAL header height in every state,
           with no hardcoded pixel guess. */
        position: static;
    }

    .eas-cart-indicator--mobile .eas-cart-indicator__panel {
        top: calc(100% + 10px);
        right: 16px;
        left: auto;
        width: min(300px, calc(100vw - 24px));
        z-index: 10000;
        box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.45);
    }
}

@media (max-width: 480px) {
    .eas-utility-bar {
        display: none;
    }

    .eas-mobile-inner {
        padding: 70px 22px 80px;
    }

    .eas-m-item .t {
        font-size: 21px;
    }
}


/* ═══════════════════════════════════════════════
   UI-1 HEADER BEHAVIOUR (one rule set, every page type)
   - transparent over a full-bleed hero with a soft top shade, solid after 24px of scroll
     (threshold lives in header.js), always solid on pages with no hero (header starts is-scrolled)
   - solid while the mobile menu is open
   - body offset depends only on the page type, never on the scroll state, so nothing shifts
═══════════════════════════════════════════════ */

/* Soft shade behind the white nav text while transparent; fades out as the header turns solid */
.eas-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200px;
    background: linear-gradient(to bottom, rgba(6, 5, 4, 0.64) 0%, rgba(6, 5, 4, 0.62) 40%, rgba(6, 5, 4, 0.58) 60%, rgba(6, 5, 4, 0.34) 74%, rgba(6, 5, 4, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s var(--eas-ease);
    pointer-events: none;
    z-index: -1;
}
.eas-header.is-transparent:not(.panel-open)::before {
    opacity: 1;
}

/* Mobile menu open: solid, dark text, same as the open desktop panel */
.eas-header:has(.eas-mobile-toggle.is-open)::before {
    opacity: 0 !important;
}
.eas-header:has(.eas-mobile-toggle.is-open) .eas-nav-bar {
    background: var(--eas-cream) !important;
    border-bottom: 1px solid var(--eas-border) !important;
    box-shadow: none !important;
}
.eas-header:has(.eas-mobile-toggle.is-open) .eas-logo img {
    filter: none !important;
}
.eas-header:has(.eas-mobile-toggle.is-open) .eas-mobile-toggle span {
    background: var(--eas-text) !important;
}
.eas-header:has(.eas-mobile-toggle.is-open) .eas-cart-indicator__toggle {
    color: var(--eas-text) !important;
}

/* Body offset: decided by the page type only. A page with a transparent hero starts under the header;
   every other page starts below the 80px bar. The scroll state never changes the offset (no layout shift). */
body:has(.eas-header),
body:has(.eas-header.is-scrolled),
body:has(.eas-header.is-transparent) {
    padding-top: 80px;
}
body.eas-transparent-hero:not(.eas-no-transparent-header):has(.eas-header) {
    padding-top: 0 !important;
}


/* ═══════════════════════════════════════════════
   UI-1 SHARED GUTTER SCALE: header, sections and footer all read --eas-gutter.
   24px up to 640px, 40px from 641px, 80px from 1200px.
═══════════════════════════════════════════════ */
:root { --eas-gutter: 24px; }
@media (min-width: 641px) { :root { --eas-gutter: 40px; } }
@media (min-width: 1200px) { :root { --eas-gutter: 80px; } }

.eas-nav-inner,
.eas-header .eas-nav-inner {
    max-width: calc(1280px + 2 * var(--eas-gutter));
    padding-left: var(--eas-gutter);
    padding-right: var(--eas-gutter);
}
.eas-utility-inner,
.eas-header.is-transparent .eas-utility-inner {
    max-width: calc(1280px + 2 * var(--eas-gutter));
    padding-left: var(--eas-gutter);
    padding-right: var(--eas-gutter);
}
@media (max-width: 1024px) {
    /* logo left edge and menu-bar right edge sit on the same gutter */
    .eas-logo { padding-left: 0; }
    .eas-logo a { padding-left: 0; }
    .eas-mobile-toggle { margin-right: -8px; }
}

/* UI-1: utility bar on tablets. The 1024px rules above stacked the phone line and the tagline on two rows inside a
   fixed 38px bar, so the text collided at 768. One row from 721 to 1024; below 721 the decorative tagline is dropped
   (the bar is already hidden under 481). The phrase itself is unchanged. */
@media (min-width: 481px) and (max-width: 1024px) {
    .eas-utility-bar,
    .eas-header.is-transparent .eas-utility-bar { height: 38px; min-height: 38px; }
    .eas-utility-inner,
    .eas-header.is-transparent .eas-utility-inner {
        flex-wrap: nowrap; justify-content: space-between; height: 100%; min-height: 0; padding-top: 0; padding-bottom: 0;
    }
    .eas-utility-left { flex-wrap: nowrap; white-space: nowrap; font-size: 11px; letter-spacing: 1.5px; justify-content: flex-start; }
    .eas-utility-right { flex: 0 0 auto; white-space: nowrap; font-size: 10px; letter-spacing: 2.5px; line-height: 1; text-align: right; }
}
@media (min-width: 481px) and (max-width: 720px) {
    .eas-utility-right { display: none; }
    .eas-utility-inner, .eas-header.is-transparent .eas-utility-inner { justify-content: center; }
}

/* footer.css */
/* ═══════════════════════════════════════════════════════════
   EAS FOOTER — REDESIGN (footer-redesign-mockup.html)
   East Africa Safari Guides · child-theme owned · zero page-builder dependency
   Authority file (LAW 17/18). Renders eas-footer.php from eas_get_site_map().
   Tokens: forest #2C3424 · gold #B8780A · amber #C9963C · tobacco #B59E7D
           char #584738 · cream #FEFDFB · off-white #F4F1E9
═══════════════════════════════════════════════════════════ */

.eas-footer {
    background: #2C3424;
    color: #F4F1E9;
    font-family: var(--eas-font-nav, 'Jost', sans-serif);
    font-style: normal;
}

.eas-footer *,
.eas-footer *::before,
.eas-footer *::after {
    box-sizing: border-box;
    font-style: normal;
}

/* ─── TOP — BRAND + 3 COLUMNS ─── */
.eas-footer-top {
    max-width: 1300px;
    margin: 0 auto;
    padding: 76px 60px 56px;
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.9fr 1.1fr;
    gap: 48px;
    border-bottom: 1px solid rgba(244, 241, 233, 0.12);
}

/* ─── BRAND ─── */
.eas-fbrand-logo {
    display: inline-block;
    line-height: 0;
}

.eas-fbrand-logo {
    min-height: 44px;
}

/* Footer logo is inline SVG (no intrinsic size): give it a width, and recolour for the dark footer. */
.eas-fbrand-logo svg {
    display: block;
    width: 195px;
    max-width: 100%;
    height: auto;
}
.eas-fbrand-logo svg .st1 { fill: #F4F1E9; }
.eas-fbrand-logo svg .st0 { fill: #C9963C; }

.eas-fbrand-logo img {
    width: 150px;
    height: auto;
    filter: brightness(0) saturate(100%) invert(86%) sepia(12%) saturate(300%) hue-rotate(5deg) brightness(90%);
}

.eas-fbrand-statement {
    font-family: var(--eas-font-head, 'Cormorant Garamond', serif);
    font-size: 18px;
    line-height: 1.75;
    color: rgba(244, 241, 233, 0.72);
    max-width: 34ch;
    margin: 12px 0 22px;
}

.eas-fbrand-coords {
    font-style: normal;
    margin: 0;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.06em;
    color: rgba(244, 241, 233, 0.55);
}

/* ─── SOCIAL ─── */
.eas-fbrand-social {
    display: flex;
    gap: 14px;
    margin-top: 24px;
}

.eas-fbrand-social a {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(244, 241, 233, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(244, 241, 233, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.eas-fbrand-social a svg {
    display: block;
}

.eas-fbrand-social a:hover,
.eas-fbrand-social a:focus-visible {
    border-color: #C9963C;
    color: #1C1A14;
    background: #C9963C;
}

/* ─── COLUMNS (SAFARIS BY TRAVELER / EXPLORE) ─── */
.eas-fcol {
    display: flex;
    flex-direction: column;
}

.eas-fcol-h {
    font-family: var(--eas-font-nav, 'Jost', sans-serif);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #E8C06A;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(244, 241, 233, 0.14);
}

.eas-fcol nav {
    display: flex;
    flex-direction: column;
}

.eas-fcol nav a {
    display: block;
    font-family: var(--eas-font-nav, 'Jost', sans-serif);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    padding: 6px 0;
    text-decoration: none;
    color: rgba(244, 241, 233, 0.78);
    position: relative;
    transition: color 0.15s;
}

.eas-fcol nav a:hover,
.eas-fcol nav a:focus-visible {
    color: #F4F1E9;
}

/* ─── SPEAK TO US — heading outside, frosted-glass card inside, TrustIndex
   standalone below (reverted to this structure per the explicit follow-up
   brief — the previous flat opaque parchment card was wrong). The card is a
   genuinely translucent parchment tint over the dark footer with a real
   backdrop blur — "frosted glass," not a light box — so its text stays
   light (the surface is still fundamentally dark, just softened/lifted),
   matching how frosted panels are already done elsewhere in this theme
   (honeymoon pillar badges: light tint + blur + dark text works there only
   because THAT tint sits over a photo at ~90% opacity, near-opaque; this
   card is meant to read as glass, so it stays translucent and keeps light
   text for contrast against the dark forest showing through it). */
.eas-fconvert-wrap {
    display: flex;
    flex-direction: column;
}

.eas-fconvert {
    display: flex;
    flex-direction: column;
    background: rgba(244, 241, 233, 0.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(244, 241, 233, 0.22);
    border-radius: 4px;
    padding: 22px 22px;
    width: 100%;
}

.eas-fconvert-trustindex {
    margin-top: 20px;
}

.eas-fconvert-contact {
    font-size: 14px;
    color: #F4F1E9;
    line-height: 1.6;
    margin: 0 0 6px;
}

.eas-fconvert-contact a {
    color: #F4F1E9;
    text-decoration: none;
}

.eas-fconvert-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #E8C06A;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin-top: 4px;
    transition: border-color 0.3s ease;
}

.eas-fconvert-whatsapp:hover,
.eas-fconvert-whatsapp:focus-visible {
    border-color: #E8C06A;
}

.eas-fconvert-note {
    font-size: 11.5px;
    color: rgba(244, 241, 233, 0.6);
    margin: 18px 0 0;
}

/* ─── NEWSLETTER (inside the glass card) ─── */
.eas-fconvert-newsletter {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(244, 241, 233, 0.18);
}

.eas-fconvert-newsletter-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: rgba(244, 241, 233, 0.72);
    margin: 0 0 12px;
    line-height: 1.5;
}

.eas-fconvert-newsletter-form {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(244, 241, 233, 0.32);
    max-width: 280px;
    transition: border-color 0.3s ease;
}

.eas-fconvert-newsletter-form:focus-within {
    border-color: #E8C06A;
}

.eas-fconvert-newsletter-form input {
    background: transparent;
    border: none;
    outline: none;
    color: #F4F1E9;
    font-family: var(--eas-font-nav, 'Jost', sans-serif);
    font-size: 13px;
    padding: 10px 0;
    flex: 1;
    min-width: 0;
}

.eas-fconvert-newsletter-form button {
    background: none;
    border: none;
    color: #E8C06A;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 4px;
    min-width: 44px;
    min-height: 44px;
    transition: transform 0.3s ease;
}

.eas-fconvert-newsletter-form button:hover {
    transform: translateX(3px);
}

/* ─── BOTTOM BAR ─── */
.eas-footer-legal-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 26px 60px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: rgba(244, 241, 233, 0.5);
}

.eas-footer-legal-inner nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.eas-footer-legal a {
    color: rgba(244, 241, 233, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.eas-footer-legal a:hover,
.eas-footer-legal a:focus-visible {
    color: #C9963C;
}

.eas-footer-legal-sep {
    color: rgba(201, 150, 60, 0.45);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
    .eas-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 44px;
        padding: 56px 40px;
    }

    .eas-fbrand {
        grid-column: 1 / -1;
    }

    .eas-footer-legal-inner {
        padding: 22px 40px;
    }
}

@media (max-width: 640px) {
    .eas-footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 48px 24px;
    }

    .eas-footer-legal-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 22px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eas-footer,
    .eas-footer * {
        transition: none !important;
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   LAW 17/18 — FOOTER SELF-DEFENSE
   Page-level inline styles cannot recolor footer text or links.
═══════════════════════════════════════════════════════════ */
.eas-footer,
.eas-footer * {
    color: inherit;
}

.eas-footer a,
.eas-footer a:link,
.eas-footer a:visited,
.eas-footer .eas-fcol nav a,
.eas-footer .eas-fcol nav a:link,
.eas-footer .eas-fcol nav a:visited,
.eas-footer .eas-footer-legal a {
    color: rgba(244, 241, 233, 0.78) !important;
}

.eas-footer .eas-fcol nav a:hover,
.eas-footer .eas-footer-legal a:hover {
    color: #C9963C !important;
}

.eas-footer .eas-fcol-h {
    color: #E8C06A !important;
}

.eas-footer .eas-fbrand-statement,
.eas-footer .eas-fbrand-coords,
.eas-footer .eas-footer-copy,
.eas-footer .eas-footer-legal-inner {
    color: rgba(244, 241, 233, 0.62) !important;
}

.eas-footer .eas-fconvert-contact,
.eas-footer .eas-fconvert-contact a,
.eas-footer .eas-fconvert-contact a:link,
.eas-footer .eas-fconvert-contact a:visited {
    color: #F4F1E9 !important;
}

.eas-footer .eas-fconvert-whatsapp,
.eas-footer .eas-fconvert-whatsapp:link,
.eas-footer .eas-fconvert-whatsapp:visited {
    color: #E8C06A !important;
}

.eas-footer .eas-fconvert-note {
    color: rgba(244, 241, 233, 0.6) !important;
}

/* Newsletter label — the one footer text element proven to break when a
   page's own markup nests the footer inside a colored wrapper (see the
   homepage's .eas-home-page unclosed-div fix, same investigation). Guarded
   explicitly so it can never again fall through to an inherited color. */
.eas-footer .eas-fconvert-newsletter-label {
    color: rgba(244, 241, 233, 0.72) !important;
}

.eas-footer .eas-fconvert-newsletter-form input,
.eas-footer .eas-fconvert-newsletter-form input:focus {
    color: #F4F1E9 !important;
    background: transparent !important;
}

.eas-footer .eas-fconvert-newsletter-form input::placeholder {
    color: rgba(244, 241, 233, 0.5) !important;
    opacity: 1 !important;
}

/* TrustIndex's own "Top Rated Service" link (.ti-widget, injected by their
   loader script — now a standalone sibling of .eas-fconvert, directly on
   the dark footer). The widget ships its own opaque white card background
   regardless of what it sits on, so its internal link still needs a dark
   color — this is the exact rule that was overriding it with our light
   footer-link color, which is invisible on the widget's own white backing. */
.eas-footer .eas-fconvert-wrap .ti-widget a {
    color: #1C1A14 !important;
}

/* ── Lead system Phase 2a (staging): Safari Updates newsletter form + TrustIndex moved to the brand column ── */
.eas-footer .eas-fconvert-note { padding-bottom: 18px; border-bottom: 1px solid rgba(250,247,240,0.16); margin-bottom: 18px; }
.eas-fnl { margin: 0; }
.eas-fnl-eyebrow { font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #D5AA5C; font-weight: 600; margin: 0 0 8px; }
.eas-fnl-line { font-size: 15px; line-height: 1.6; color: rgba(250,247,240,0.88); margin: 0 0 14px; }
.eas-fnl-input { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid rgba(250,247,240,0.45); background: rgba(250,247,240,0.06); color: #FAF7F0; font: inherit; font-size: 15px; margin: 0 0 10px; border-radius: 0; }
.eas-fnl-input::placeholder { color: rgba(250,247,240,0.75); opacity: 1; }
.eas-fnl-input:focus { outline: 2px solid #D5AA5C; outline-offset: 1px; }
.eas-fnl-input.is-invalid { border-color: #F0B4A0; }
.eas-fnl-error { font-size: 13.5px; color: #F0B4A0; margin: -2px 0 10px; }
.eas-fnl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.eas-fnl-btn { display: block; width: 100%; box-sizing: border-box; background: #FAF7F0; color: #2C3424; border: 1px solid #FAF7F0; text-align: center; padding: 13px; font: inherit; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; margin: 4px 0 10px; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.eas-fnl-btn:hover, .eas-fnl-btn:focus-visible { background: #D5AA5C; border-color: #D5AA5C; color: #1C1A14; }
.eas-fnl-btn[disabled] { opacity: 0.6; cursor: default; }
.eas-fnl-consent { font-size: 12.5px; line-height: 1.55; color: rgba(250,247,240,0.72); margin: 0; }
.eas-fnl-thanks { font-family: 'Cormorant Garamond', serif; font-size: 24px; line-height: 1.3; color: #FAF7F0; margin: 0; }
.eas-fnl [hidden] { display: none !important; }
/* TrustIndex now sits under the social icons. The loader adds the widget as a sibling after its container (118px tall on the live domain),
   so the wrapper reserves that height and the footer does not jump when the widget appears. */
.eas-fti-wrap { margin-top: 30px; max-width: 340px; min-height: 124px; }
.eas-fti-wrap .eas-fconvert-trustindex { margin-top: 0; }


/* UI-1: footer on the shared gutter scale */
.eas-footer-top { padding-left: var(--eas-gutter); padding-right: var(--eas-gutter); }
.eas-footer-legal-inner { padding-left: var(--eas-gutter); padding-right: var(--eas-gutter); }
.eas-footer-top, .eas-footer-legal-inner { max-width: calc(1280px + 2 * var(--eas-gutter)); }

/* eas-parity.css */
/**
 * LAW 20 — Homepage Parity Kit
 * Display typography extracted verbatim from page-home.php inline CSS.
 * Do not re-implement these values in page or component CSS.
 */

:root {
  --eas-parity-display: clamp(64px, 8.5vw, 112px);
  --eas-parity-h2: clamp(32px, 4vw, 52px);
  /* 2026-08-14 A1 typography fix — raised to the calculator mockup's own
     --char value (Mockups/safari-quotation-calculator-mockup-v2.html),
     the brief's explicit contrast reference (was #584738, noticeably
     lighter against --canvas/--parchment). */
  --eas-parity-char: #3A2F22;
  --eas-parity-ink: #1C1A14;
  --eas-parity-gold-on-light: #924F08;
  --eas-parity-gold: #B8780A;
  --eas-parity-amber: #C9963C;
  --eas-parity-hero-cream: #F2EDEA;
  --eas-parity-hero-gold: #E8C06A;
  --eas-parity-cream-dim: rgba(241, 234, 218, 0.72);
}

/* ─── Hero H1 — page-home.php .eas-hero__headline + desktop + weight overrides ─── */
.eas-h1-hero {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: var(--eas-parity-display);
  line-height: 0.94;
  color: var(--eas-parity-hero-cream);
  margin-bottom: 40px;
  font-style: normal;
}

.eas-h1-hero em {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 400;
  color: var(--eas-parity-hero-gold);
}

/* Homepage .eas-hero__waiting — gold second line on dark hero scrim */
.eas-h1-hero-accent {
  display: block;
  padding-left: 0;
  color: var(--eas-parity-hero-gold);
  font-style: normal;
  font-weight: 400;
}

@media (min-width: 769px) {
  .eas-h1-hero {
    line-height: 0.88;
  }

  .eas-h1-hero-accent {
    margin-top: -0.14em;
    line-height: 0.88 !important;
  }
}

@media (max-width: 768px) {
  .eas-h1-hero {
    font-size: clamp(42px, 10vw, 64px);
    line-height: 1.05;
  }

  .eas-h1-hero-accent {
    margin-top: -0.06em;
    line-height: 1.05 !important;
  }
}

/* ─── Section H2 — page-home.php --h2 / .eas-platinum__headline ─── */
.eas-h2-std {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: var(--eas-parity-h2);
  color: var(--eas-parity-ink);
  line-height: 1.15;
  font-style: normal;
}

.eas-h2-std--dark {
  color: #F5F1EA;
}

.eas-h2-std em,
.eas-h2-std .eas-pillar-em {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 300;
  color: var(--eas-parity-gold);
}

.eas-h2-std--dark em,
.eas-h2-std--dark .eas-pillar-em {
  color: var(--eas-parity-amber);
}

/* ─── Section eyebrow — Jost 500 13px (homepage section-label authority) ───
   2026-08-14 A1: weight raised 400->500 — brief's "UI labels/data minimum
   weight 500" line; an eyebrow is a label, not body prose. */
.eas-eyebrow-std {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--eas-parity-gold-on-light);
  line-height: 1.55;
  display: block;
}

.eas-eyebrow-std--dark {
  color: var(--eas-parity-cream-dim);
}

/* ─── Stat pair — caption labels, not headline scale ─── */
.eas-stat-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 300;
  color: var(--eas-parity-char);
  line-height: 1;
}

.eas-stat-label {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--eas-parity-char);
  line-height: 1.55;
  max-width: 24ch;
  text-transform: none;
  margin-top: 0.6rem;
}

/* ─── Body prose — page-home.php .eas-luxury__body @ 17px mobile floor ───
   2026-08-14 A1: weight raised 300->400 (brief's body-text floor; this is
   the actual paragraph-reading text every rebuilt pillar/archive page
   uses via this one class, so this single edit reaches all of them). */
.eas-prose-std {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.9;
  color: var(--eas-parity-char);
}

.eas-prose-std--dark {
  color: var(--eas-parity-cream-dim);
}

@media (max-width: 768px) {
  .eas-eyebrow-std {
    font-size: 13px;
    letter-spacing: 0.28em;
  }

  .eas-stat-label {
    font-size: 13px;
    letter-spacing: 0.12em;
  }
}

/* ─── Review card — page-home.php .review-card / .review-text carousel typography ─── */
.eas-review-platform {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(88, 71, 56, 0.75);
  text-transform: uppercase;
  font-style: normal;
}

.eas-review-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 76px;
  color: rgba(184, 120, 10, 0.15);
  line-height: 0.8;
  font-style: normal;
  display: block;
}

/* Reviews Carousel v2 (2026-08-10) — the spotlight card is genuinely wider
   (up to 600px) than the old v1 grid column (~1/3 of a 1440px row); sized
   up slightly to match without becoming a wall of text. */
.eas-review-text {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.75;
  color: var(--eas-parity-char);
}

.eas-review-author {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--eas-parity-char);
  font-style: normal;
}

.eas-review-journey {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
          letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eas-parity-gold);
  font-style: normal;
}

@media (max-width: 768px) {
  .eas-comp-reviews .eas-review-text {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  .eas-comp-reviews .eas-review-platform {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }

  .eas-comp-reviews .eas-review-author {
    font-size: 14px !important;
  }

  .eas-comp-reviews .eas-review-journey {
    font-size: 13px !important;
            letter-spacing: 0.06em !important;
  }
}


/* UI-1: review card labels (platform and journey): sentence case, 13px, weight 500, no tracking. */
.eas-review-platform,
.eas-review-journey,
.eas-comp-reviews .eas-review-platform,
.eas-comp-reviews .eas-review-journey {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* eas-components.css */
/**
 * EAS shared page components — LAW 18 self-contained (zero host inheritance).
 * Fonts: Cormorant Garamond, Jost, Playfair Display italic only.
 */

/* ─── IMAGE HERO (homepage scale — luxury magazine editorial) ─── */
.eas-comp-hero-image {
  --eas-hero-display: clamp(64px, 8.5vw, 112px);
  --eas-hero-sub: clamp(16px, 1.8vw, 19px);
  position: relative;
  /* min-height (not a fixed height) so a long real headline (Itineraries/
     Departures titles are AI/human-authored and uncapped in length, unlike
     the short pillar taglines this component was designed against) grows
     the section instead of overflowing it — with height:100vh + overflow:
     hidden, long content used to silently clip below the fold (eyebrow/CTA
     invisible without scrolling past the hero). Photo/scrim/grain layers are
     position:absolute; inset:0, so they still stretch to fill whatever
     height the section ends up at. */
  min-height: max(720px, 100vh);
  overflow: hidden;
  background-color: #14120C;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}

.eas-comp-hero-image__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #14120C;
  z-index: 1;
  transform: scale(1.05);
  animation: eas-comp-hero-kenburns 22s ease-out forwards;
  will-change: transform;
}

@keyframes eas-comp-hero-kenburns {
  from { transform: scale(1.05); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .eas-comp-hero-image__bg {
    animation: none;
    transform: scale(1);
  }
}

/* Uniform photo mute — tames blown highlights without flattening warmth */
.eas-comp-hero-image__veil {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.28);
  z-index: 2;
  pointer-events: none;
}

/* Editorial scrim: left vignette + bottom lift (Condé Nast stack) */
.eas-comp-hero-image__gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(6, 5, 4, 0.82) 0%,
      rgba(6, 5, 4, 0.58) 28%,
      rgba(6, 5, 4, 0.22) 52%,
      rgba(6, 5, 4, 0.06) 68%,
      transparent 82%
    ),
    linear-gradient(
      to top,
      rgba(6, 5, 4, 0.92) 0%,
      rgba(6, 5, 4, 0.52) 32%,
      rgba(6, 5, 4, 0.14) 62%,
      transparent 78%
    );
  z-index: 3;
  pointer-events: none;
}

/* Lightweight film grain — editorial print texture */
.eas-comp-hero-image__grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.eas-comp-hero-image--deep-scrim .eas-comp-hero-image__veil {
  background: rgba(6, 5, 4, 0.38);
}

.eas-comp-hero-image--deep-scrim .eas-comp-hero-image__gradient {
  background:
    linear-gradient(
      105deg,
      rgba(4, 3, 2, 0.9) 0%,
      rgba(4, 3, 2, 0.68) 30%,
      rgba(4, 3, 2, 0.28) 54%,
      rgba(4, 3, 2, 0.08) 70%,
      transparent 84%
    ),
    linear-gradient(
      to top,
      rgba(4, 3, 2, 0.96) 0%,
      rgba(4, 3, 2, 0.62) 36%,
      rgba(4, 3, 2, 0.16) 72%,
      transparent 100%
    );
}

.eas-comp-hero-image__content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 780px;
  padding: 0 80px 120px;
  isolation: isolate;
}

/* Desktop: homepage Pass 7/8 grid — eyebrow below nav, copy anchored bottom-left */
@media (min-width: 769px) {
  .eas-comp-hero-image {
    display: grid;
    grid-template-rows: 220px 1fr auto;
    grid-template-columns: minmax(0, 1fr);
    align-content: stretch;
  }

  .eas-comp-hero-image__label {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    align-self: end;
    justify-self: start;
    padding-left: 80px;
    padding-top: 24px;
    margin-bottom: 0;
    z-index: 5;
  }

  .eas-comp-hero-image__content {
    grid-row: 3;
    grid-column: 1;
    position: relative;
    width: 100%;
    max-width: none;
    margin: 48px 0 0;
    padding: 0 80px 120px;
  }

  .eas-comp-hero-image__headline {
    margin-top: 0;
    max-width: 700px;
    width: fit-content;
  }

  .eas-comp-hero-image__sub {
    max-width: 440px;
  }

  /* No eyebrow: nav spacer row + copy anchored bottom (homepage grid lock) */
  .eas-comp-hero-image--no-eyebrow {
    display: grid;
    grid-template-rows: 118px 1fr auto;
    grid-template-columns: minmax(0, 1fr);
    align-content: stretch;
  }

  .eas-comp-hero-image--no-eyebrow .eas-comp-hero-image__content {
    grid-row: 3;
    grid-column: 1;
    margin: 0;
  }
}

.eas-comp-hero-image__content::before {
  content: '';
  position: absolute;
  inset: -64px -56px -80px -40px;
  background: radial-gradient(
    ellipse 130% 100% at 0% 100%,
    rgba(4, 3, 2, 0.68) 0%,
    rgba(4, 3, 2, 0.32) 44%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
}

.eas-comp-hero-image__headline {
  margin-bottom: 40px;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.32);
}

/* Real-data hero badge (Departures Final Closeout, Part 1) — a considered,
   pillar-hero-confidence chip, not a bolted-on urgency banner. Generic:
   any real short string, currently used for the departure scarcity signal. */
.eas-comp-hero-image__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E8C06A;
  background: rgba(20, 18, 12, 0.42);
  border: 1px solid rgba(232, 192, 106, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 999px;
  margin-bottom: 26px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.eas-comp-hero-image__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E8C06A;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(232, 192, 106, 0.7);
}

@media (max-width: 640px) {
  .eas-comp-hero-image__badge {
    font-size: 10px;
    padding: 8px 16px;
    margin-bottom: 18px;
  }
}

/* Real-data hero stat row (Workflow D, 2026-08-02) — Duration/Party size/
   Price-from style facts below the subline. Backward-compatible optional
   prop; renders nothing on every existing caller that omits $stats. */
.eas-comp-hero-image__stats {
  display: flex;
  gap: 32px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}

.eas-comp-hero-image__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eas-comp-hero-image__stat-label {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E8C06A;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.eas-comp-hero-image__stat-value {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #FEFDFB;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
  .eas-comp-hero-image__stats {
    gap: 20px;
    margin-bottom: 24px;
  }
  .eas-comp-hero-image__stat-value {
    font-size: 13px;
  }
}

/* Hero eyebrow — page-home.php .eas-hero__eyebrow (dark scrim; not section eas-eyebrow-std) */
.eas-comp-hero-image__label--hero {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: #E8C06A !important;
  margin-bottom: 32px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.eas-comp-hero-image__label--hero.eas-eyebrow-std {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.48em;
  color: #E8C06A !important;
}

.eas-comp-hero-image__label-rule {
  width: 40px;
  height: 1px;
  background-color: rgba(232, 192, 106, 0.92);
  flex-shrink: 0;
  display: inline-block;
}

.eas-comp-hero-image__sub {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: var(--eas-hero-sub);
  letter-spacing: 0.04em;
  line-height: 1.72;
  color: rgba(254, 253, 251, 0.82) !important;
  max-width: 420px;
  margin-bottom: 60px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.32);
}

.eas-comp-hero-image__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #E8C06A !important;
  border-bottom: 1px solid rgba(232, 192, 106, 0.42);
  padding-bottom: 6px;
  text-decoration: none;
  transition: color 0.35s ease, border-color 0.35s ease, gap 0.35s ease, opacity 0.35s ease;
}

.eas-comp-hero-image__cta:hover,
.eas-comp-hero-image__cta:focus-visible {
  color: #F5D078 !important;
  border-color: rgba(245, 208, 120, 0.72);
  gap: 20px;
  opacity: 1;
}

/* ─── PLATINUM ITINERARY CARDS V2 — full-bleed editorial (LAW 18) ─── */
.eas-comp-itinerary {
  background-color: #F1EADA;
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 40px;
}

/* LAW 20 section labels — parity values + self-defense vs style.css [class*="eas-"] p */
.eas-comp-itinerary__label.eas-eyebrow-std,
.eas-comp-experience__label.eas-eyebrow-std,
.eas-comp-reviews__label.eas-eyebrow-std {
  font-family: 'Jost', sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #924F08;
  line-height: 1.55;
  font-style: normal;
}

/* Section label layout only */
.eas-comp-itinerary__label {
  margin-bottom: 14px;
}

.eas-comp-itinerary__head {
  margin-bottom: 16px;
}

.eas-comp-itinerary__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.04;
  color: #1A0F06;
  margin-bottom: 0;
}

.eas-comp-itinerary__title em,
.eas-comp-itinerary__title-em {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 400;
  color: #C9963C;
}

.eas-comp-itinerary__intro {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(26, 15, 6, 0.72);
  max-width: 52ch;
  margin-bottom: 64px;
}

.eas-comp-itinerary__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.eas-comp-itinerary__card {
  position: relative;
  display: block;
  text-decoration: none;
  aspect-ratio: 3 / 4.3;
  background-color: #14100A;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  color: inherit;
}

.eas-comp-itinerary__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(26, 15, 6, 0.28);
}

.eas-comp-itinerary__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #14100A;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eas-comp-itinerary__card:hover .eas-comp-itinerary__img {
  transform: scale(1.05);
}

.eas-comp-itinerary__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.2) 0%, rgba(20, 16, 10, 0.08) 30%, rgba(20, 16, 10, 0.58) 55%, rgba(20, 16, 10, 0.96) 82%, #14100A 100%);
}

.eas-comp-itinerary__frame {
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(201, 150, 60, 0.32);
  pointer-events: none;
  transition: border-color 0.6s ease;
}

.eas-comp-itinerary__card:hover .eas-comp-itinerary__frame {
  border-color: rgba(201, 150, 60, 0.5);
}

.eas-comp-itinerary__badge {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 2;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: #F7F1E3;
  background-color: rgba(20, 16, 10, 0.44);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 241, 227, 0.38);
  padding: 7px 13px;
}

.eas-comp-itinerary__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 30px 26px;
}

.eas-comp-itinerary__parks {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #EFCB84;
  margin-bottom: 12px;
  line-height: 1.7;
}

.eas-comp-itinerary__parks span {
  color: rgba(239, 203, 132, 0.6);
  padding: 0 6px;
}

.eas-comp-itinerary__card-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.08;
  color: #F7F1E3;
  margin-bottom: 12px;
}

.eas-comp-itinerary__excerpt {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 300;
  font-size: 17.5px;
  line-height: 1.55;
  color: rgba(247, 241, 227, 0.92);
  margin-bottom: 20px;
  background-color: rgba(20, 16, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 14px;
  border: none;
}

.eas-comp-itinerary__ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  border-top: 1px solid rgba(201, 150, 60, 0.5);
  padding-top: 12px;
  margin-bottom: 10px;
}

.eas-comp-itinerary__ledger dt {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(247, 241, 227, 0.75);
  margin-bottom: 5px;
}

.eas-comp-itinerary__ledger dd {
  font-family: 'Jost', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: #F7F1E3;
  letter-spacing: 0.02em;
  margin: 0;
}

.eas-comp-itinerary__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.eas-comp-itinerary__pricetag {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px 7px;
  background-color: rgba(20, 16, 10, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 150, 60, 0.44);
  padding: 4px 9px 5px;
  flex-shrink: 0;
}

.eas-comp-itinerary__pricetag-label {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(247, 241, 227, 0.75);
  white-space: nowrap;
}

.eas-comp-itinerary__pricetag-value {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1;
  color: #E8C06A;
  letter-spacing: 0.01em;
}

.eas-comp-itinerary__cta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(247, 241, 227, 0.5);
  padding-bottom: 0;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 0.35s ease;
}

.eas-comp-itinerary__card:hover .eas-comp-itinerary__cta {
  color: rgba(247, 241, 227, 0.82);
}

.eas-comp-itinerary__arrow {
  display: inline-block;
  transition: transform 0.45s ease;
}

.eas-comp-itinerary__card:hover .eas-comp-itinerary__arrow {
  transform: translateX(7px);
}

/* ─── SIGNATURE ITINERARY CARD — position 1, pillar-wide (LAW 18) ─── */
.eas-comp-itinerary__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eas-comp-itinerary__card--signature {
  transform: scale(1.03);
  z-index: 2;
  box-shadow:
    0 18px 40px rgba(26, 15, 6, 0.32),
    0 0 0 1px rgba(201, 150, 60, 0.22),
    0 0 48px rgba(184, 120, 10, 0.18);
}

.eas-comp-itinerary__card--signature:hover {
  transform: scale(1.03) translateY(-8px);
  box-shadow:
    0 32px 72px rgba(26, 15, 6, 0.38),
    0 0 0 1px rgba(201, 150, 60, 0.38),
    0 0 64px rgba(184, 120, 10, 0.28);
}

.eas-comp-itinerary__card--signature .eas-comp-itinerary__frame {
  border-color: rgba(201, 150, 60, 0.55);
}

.eas-comp-itinerary__crown {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.eas-comp-itinerary__crown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(250, 247, 240, 0.94);
  border: 1px solid rgba(201, 150, 60, 0.55);
  color: #C9963C;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(26, 15, 6, 0.22);
}

.eas-comp-itinerary__crown-label {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 241, 227, 0.88);
  white-space: nowrap;
}

.eas-comp-itinerary__sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(232, 215, 180, 0.16) 50%, transparent 65%);
  transition: opacity 0.35s ease;
}

.eas-comp-itinerary__card--signature.is-sheen-active .eas-comp-itinerary__sheen {
  opacity: 1;
}

.eas-comp-itinerary__client-quote {
  margin: 0 0 1rem;
  padding: 0;
  border: none;
}

.eas-comp-itinerary__client-quote-text {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(247, 241, 227, 0.92);
  margin: 0 0 0.55rem;
  font-style: normal;
}

.eas-comp-itinerary__client-quote-author {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 150, 60, 0.82);
  font-style: normal;
}

.eas-comp-itinerary__ledger--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .eas-comp-itinerary__card--signature {
    order: -1;
    transform: none;
    scale: none;
  }

  .eas-comp-itinerary__card--signature:hover {
    transform: translateY(-6px);
  }

  .eas-comp-itinerary__ledger--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .eas-comp-itinerary__card--signature,
  .eas-comp-itinerary__card--signature:hover,
  .eas-comp-itinerary__tilt {
    transform: none !important;
    transition: none !important;
  }
}

/* ─── EXPERIENCE CARDS V3 — split editorial (LAW 18/19) ─── */
.eas-comp-experience {
  background-color: #FAF7F0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 0 3.5rem;
}

/* Section label layout only */
.eas-comp-experience__label {
  margin-bottom: 14px;
}

.eas-comp-experience__head {
  margin-bottom: 16px;
}

.eas-comp-experience__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.04;
  color: #1A0F06;
  margin-bottom: 0;
}

.eas-comp-experience__title-accent {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 300;
  color: #924F08;
}

.eas-comp-experience__intro {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(26, 15, 6, 0.72);
  max-width: 52ch;
  margin-bottom: 3rem;
}

.eas-comp-experience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.eas-comp-experience__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background-color: #F2EBD9;
  border: 1px solid rgba(184, 120, 10, 0.22);
  overflow: hidden;
  color: #1A0F06;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eas-comp-experience__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(26, 15, 6, 0.12);
}

.eas-comp-experience__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #1A0F06;
}

.eas-comp-experience__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #1A0F06;
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eas-comp-experience__card:hover .eas-comp-experience__img {
  transform: scale(1.04);
}

.eas-comp-experience__frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(232, 192, 106, 0.38);
  pointer-events: none;
  transition: border-color 0.55s ease;
}

.eas-comp-experience__card:hover .eas-comp-experience__frame {
  border-color: rgba(232, 192, 106, 0.58);
}

.eas-comp-experience__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: #F7F1E3;
  background-color: rgba(20, 16, 10, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 241, 227, 0.32);
  padding: 7px 12px;
}

.eas-comp-experience__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.35rem 1.4rem 1.5rem;
  background-color: #F2EBD9;
}

.eas-comp-experience__eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  color: #924F08;
  margin-bottom: 0.55rem;
}

.eas-comp-experience__card-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.12;
  color: #1A0F06;
  margin-bottom: 0.65rem;
}

.eas-comp-experience__desc {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(26, 15, 6, 0.78);
  margin-bottom: 1.15rem;
  flex: 1 1 auto;
}

.eas-comp-experience__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  border-top: 1px solid rgba(146, 79, 8, 0.28);
  padding-top: 1rem;
  margin-top: auto;
}

.eas-comp-experience__pricetag {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 2px solid #924F08;
  padding-left: 12px;
}

.eas-comp-experience__pricetag-label {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: rgba(26, 15, 6, 0.7);
}

.eas-comp-experience__pricetag-value {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: #924F08;
}

.eas-comp-experience__pricetag-value--sm {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.eas-comp-experience__pricetag-value small {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(26, 15, 6, 0.62);
  margin-left: 6px;
  vertical-align: 2px;
}

.eas-comp-experience__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #924F08;
  border: 1px solid rgba(146, 79, 8, 0.45);
  padding: 11px 16px;
  min-height: 44px;
  background-color: rgba(250, 247, 240, 0.55);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.eas-comp-experience__card:hover .eas-comp-experience__cta {
  background-color: #924F08;
  border-color: #924F08;
  color: #FAF7F0;
}

.eas-comp-experience__arrow {
  display: inline-block;
  transition: transform 0.4s ease;
}

.eas-comp-experience__card:hover .eas-comp-experience__arrow {
  transform: translateX(5px);
}

@media (min-width: 600px) {
  .eas-comp-experience__foot {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
  }

  .eas-comp-experience__cta {
    flex-shrink: 0;
    align-self: flex-end;
  }
}

@media (max-width: 1100px) {
  .eas-comp-experience__grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eas-comp-itinerary__card,
  .eas-comp-itinerary__img,
  .eas-comp-itinerary__arrow,
  .eas-comp-experience__card,
  .eas-comp-experience__img,
  .eas-comp-experience__arrow,
  .eas-comp-experience__cta {
    transition: none;
  }

  .eas-comp-itinerary__card:hover,
  .eas-comp-experience__card:hover {
    transform: none;
  }

  .eas-comp-itinerary__card:hover .eas-comp-itinerary__img,
  .eas-comp-experience__card:hover .eas-comp-experience__img {
    transform: none;
  }
}

@media (max-width: 980px) {
  .eas-comp-itinerary__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }

  .eas-comp-itinerary__card {
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 640px) {
  .eas-comp-experience__panel {
    padding: 1rem 1.25rem 1.1rem;
  }

  .eas-comp-experience__desc {
    margin-bottom: 0.75rem;
    line-height: 1.62;
  }

  .eas-comp-experience__foot {
    gap: 10px;
    padding-top: 0.75rem;
    margin-top: 0;
  }

  .eas-comp-experience__pricetag {
    padding-left: 10px;
  }

  .eas-comp-experience__pricetag-value {
    font-size: 20px;
  }

  .eas-comp-experience__pricetag-value--sm {
    font-size: 13px;
  }

  .eas-comp-experience__cta {
    align-self: stretch;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    border-radius: 0;
    padding: 12px 14px;
  }
}

@media (max-width: 768px) {
  .eas-comp-experience {
    padding: 2rem 0 2.5rem;
  }

  .eas-comp-experience__panel {
    padding: 1.15rem 1.15rem 1.25rem;
  }

  .eas-comp-experience__eyebrow {
    font-size: 10px;
    margin-bottom: 0.45rem;
  }

  .eas-comp-experience__card-title {
    font-size: clamp(22px, 5.4vw, 26px);
    margin-bottom: 0.5rem;
  }

  .eas-comp-experience__desc {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 1rem;
  }

  .eas-comp-experience__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 0.85rem;
  }

  .eas-comp-experience__pricetag-value {
    font-size: 22px;
  }

  .eas-comp-experience__pricetag-value--sm {
    font-size: 14px;
  }

  .eas-comp-experience__cta {
    align-self: stretch;
    width: 100%;
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .eas-comp-itinerary__body {
    padding: 0 22px 18px;
  }

  .eas-comp-itinerary__ledger {
    gap: 10px;
    padding-top: 10px;
    margin-bottom: 8px;
  }

  .eas-comp-itinerary__foot {
    align-items: center;
    gap: 8px;
  }

  .eas-comp-itinerary__pricetag {
    gap: 4px 5px;
    padding: 3px 7px 4px;
    min-width: 0;
    flex: 0 1 auto;
  }

  .eas-comp-itinerary__pricetag-label {
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  .eas-comp-itinerary__pricetag-value {
    font-size: 16px;
  }

  .eas-comp-itinerary__cta {
    font-size: 8px;
    gap: 4px;
    letter-spacing: 0.12em;
  }
}

/* ─── REVIEWS ─── */
.eas-comp-reviews {
  background-color: #FAF7F0;
  padding: 72px 80px 48px;
}

.eas-comp-reviews__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 48px;
}

.eas-comp-reviews__rule {
  width: 40px;
  height: 1px;
  background-color: #B8780A;
  margin-bottom: 20px;
}

/* Section label layout only */
.eas-comp-reviews__label {
  margin-bottom: 0;
}

.eas-comp-reviews__headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(32px, 3.5vw, 48px);
  color: #584738;
  line-height: 1.15;
  margin-top: 16px;
}

.eas-comp-reviews__score-wrap {
  text-align: right;
  flex-shrink: 0;
}

.eas-comp-reviews__score {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(56px, 6vw, 80px);
  color: #584738;
  line-height: 1;
}

.eas-comp-reviews__headline.eas-h2-std {
  color: #584738;
}

.eas-comp-reviews__score-label,
.eas-comp-reviews__count {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #584738;
  text-transform: uppercase;
}

.eas-comp-reviews__dots {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin: 10px 0;
}

.eas-comp-reviews__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #B8780A;
  display: inline-block;
}

.eas-comp-reviews__pills {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
}

.eas-comp-reviews__pills span {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #584738;
  border: 1px solid rgba(88, 71, 56, 0.3);
  padding: 7px 16px;
}

/* Reviews Carousel v2 (2026-08-10, same-day founder correction) — single-
   card spotlight with peeking neighbors, replacing the v1 3-per-row grid
   (each card was squeezed to ~1/3 width, reading as a narrow, elongated,
   "technically broken" column rather than a luxurious feature). Prev/next
   buttons sit either side of the masked viewport. */
/* Real mobile bug, caught only by a real screenshot: prev/next as flex
   siblings of the viewport ate ~128px of a 390px-wide screen, so the
   card's own vw-relative width (sized against the FULL window, not its
   now-narrower flex container) overflowed underneath the buttons and
   read as the arrows cutting into the card's own text. Fixed by taking
   the buttons out of flex flow entirely — floated absolutely over the
   track's own peek-inset padding (real empty space there already,
   showing only a faded neighbor card edge), so the viewport always gets
   the full carousel width to size its vw-relative card against. */
.eas-comp-reviews__carousel {
  position: relative;
  margin-bottom: 32px;
}

.eas-comp-reviews__video-card {
  position: relative;
  margin-bottom: 56px;
  border-radius: 4px;
  overflow: hidden;
}

.eas-comp-reviews__video-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 40px;
  width: 48px;
  height: 2px;
  background: linear-gradient(to right, #B8780A, #C9963C);
  z-index: 3;
}

.eas-comp-reviews__video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #1C1A14;
  overflow: hidden;
}

.eas-comp-reviews__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eas-comp-reviews__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 26, 20, 0.85) 0%, rgba(28, 26, 20, 0.3) 50%, rgba(28, 26, 20, 0.15) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.4s ease;
}

.eas-comp-reviews__video-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.eas-comp-reviews__video-play {
  width: 72px;
  height: 72px;
  border: 2px solid rgba(184, 120, 10, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: border-color 0.3s ease, transform 0.3s ease;
  background-color: rgba(28, 26, 20, 0.4);
  backdrop-filter: blur(4px);
}

.eas-comp-reviews__video-overlay:hover .eas-comp-reviews__video-play {
  border-color: #B8780A;
  transform: scale(1.08);
}

.eas-comp-reviews__video-play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #F1EADA;
  margin-left: 4px;
}

.eas-comp-reviews__video-caption {
  text-align: center;
}

.eas-comp-reviews__video-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(232, 192, 106, 0.95);
  margin-bottom: 8px;
}

.eas-comp-reviews__video-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
  color: rgba(254, 253, 251, 0.85);
}

.eas-comp-reviews__video-meta {
  background-color: #FEFDFB;
  padding: 16px 40px;
  border-top: 1px solid rgba(88, 71, 56, 0.08);
}

.eas-comp-reviews__video-verified {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(26, 15, 6, 0.82);
}

/* Masks the track so only the active card + genuine slivers of its
   neighbors show — the real "one and a half" breathing-room effect, not
   a JS-simulated one. Horizontal padding is what reveals the peek: the
   track's own content is wider than the viewport, so the inset creates
   real, visible neighbor edges on both sides at rest. */
.eas-comp-reviews__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.eas-comp-reviews__viewport::-webkit-scrollbar {
  display: none;
}

.eas-comp-reviews__track {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 4px 14vw;
}

.eas-comp-reviews__card {
  flex: 0 0 min(600px, 74vw);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  background-color: #FEFDFB;
  border: 0.5px solid rgba(88, 71, 56, 0.12);
  padding: 56px 60px;
  position: relative;
  opacity: 0.32;
  transform: scale(0.93);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.eas-comp-reviews__card.is-active {
  opacity: 1;
  transform: scale(1);
}

/* No-JS fallback only — scoped to :not([data-js-ready]) so this can never
   outrank the real, JS-driven `.is-active` state at equal specificity once
   the script has actually run (JS sets data-js-ready on the track before
   calling setActive()). Without this scoping, the fallback and `.is-active`
   would tie in specificity and whichever was later in source order would
   always win, permanently pinning card 1 regardless of navigation. */
.eas-comp-reviews__track:not([data-js-ready]) .eas-comp-reviews__card:first-child {
  opacity: 1;
  transform: scale(1);
}

.eas-comp-reviews__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 60px;
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, #B8780A, #C9963C);
}

.eas-comp-reviews__card p {
  margin-top: 0;
  margin-bottom: 0;
}

.eas-comp-reviews__platform {
  margin-bottom: 22px;
}

.eas-comp-reviews__quote-mark {
  margin-bottom: 8px;
}

.eas-comp-reviews__text {
  margin-bottom: 36px;
  flex: 1;
}

.eas-comp-reviews__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  border-top: 1px solid rgba(88, 71, 56, 0.1);
  padding-top: 24px;
  margin-top: auto;
}

.eas-comp-reviews__author {
  margin-bottom: 6px;
}

.eas-comp-reviews__rating {
  display: flex;
  gap: 4px;
}

.eas-comp-reviews__pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #C9963C;
  display: inline-block;
}

/* Dot pagination — v2: one dot per real review (mockup's own #rv-dots was
   one per page-of-3; the spotlight layout is one card at a time, so the
   1:1 mapping is the correct equivalent). Wraps rather than overflowing
   when the real review count is large (up to 21 today). Touch target
   sized down from the original 44px spec on purpose — with up to 21 dots
   in a row, full 44px hit boxes overlap too heavily for precise tapping;
   32px is still comfortably above the accessibility floor most guidance
   treats as acceptable for a dense, secondary (not primary) control —
   prev/next remain the real 44px+ primary touch targets. */
.eas-comp-reviews__page-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 480px;
  margin: 8px auto 0;
}

.eas-comp-reviews__page-dot {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: -13px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eas-comp-reviews__page-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(88, 71, 56, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.eas-comp-reviews__page-dot.is-active::before {
  background-color: #B8780A;
  transform: scale(1.35);
}

.eas-comp-reviews__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FEFDFB;
  border: 0.5px solid rgba(88, 71, 56, 0.25);
  color: #584738;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 6px 16px -8px rgba(28, 26, 20, 0.25);
}

.eas-comp-reviews__nav-btn--prev {
  left: 4px;
}

.eas-comp-reviews__nav-btn--next {
  right: 4px;
}

.eas-comp-reviews__nav-btn:hover {
  background-color: #B8780A;
  color: #FEFDFB;
}

.eas-comp-reviews__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background-color: #FEFDFB;
  color: #584738;
}

.eas-comp-reviews .eas-comp-reviews__trust {
  text-align: center;
  margin-top: 48px;
  margin-bottom: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400 !important;
  font-size: 13px;
  line-height: 1.5 !important;
  letter-spacing: 0.14em;
  color: #584738;
  text-transform: uppercase;
}

.eas-comp-reviews__tato {
  /* TATO membership license lapsed 2026-08 (renews next month) — hidden until renewed. Wrapper kept, not deleted, so it can come back with one line. */
  display: none !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0;
  background-color: transparent;
  width: 100%;
}

.eas-comp-reviews__tato-img {
  display: block;
  max-height: 56px;
  height: auto;
  width: auto;
  max-width: 100%;
  opacity: 0.65;
  filter: grayscale(20%);
}

/* Smaller peek inset at tablet/mobile — 14vw of side padding on a narrow
   viewport would leave almost nothing for the card itself; tightening the
   inset keeps a real but modest sliver of the neighbor card visible while
   giving the active card most of the available width. */
@media (max-width: 900px) {
  .eas-comp-reviews {
    padding-left: 32px;
    padding-right: 32px;
  }

  .eas-comp-reviews__track {
    padding: 4px 8vw;
  }

  .eas-comp-reviews__card {
    padding: 44px 40px;
  }
}

@media (max-width: 640px) {
  .eas-comp-reviews__track {
    padding: 4px 13vw;
    gap: 16px;
  }

  /* Real, measured fix (not the original 88vw guess): the 44px absolute
     nav buttons need real room in the peek zone, not the active card's own
     area. 74vw card + 13vw padding on each side leaves ~13vw (≈51px on a
     390px screen) of genuine peek space per edge — enough for the button
     plus a small margin, confirmed via a real before/after screenshot. */
  .eas-comp-reviews__card {
    flex-basis: 74vw;
    padding: 36px 24px;
  }

  .eas-comp-reviews__carousel {
    gap: 8px;
  }

  /* 44px minimum touch target on the arrow controls (mobile minimum). */
  .eas-comp-reviews__nav-btn {
    width: 44px;
    height: 44px;
  }
}

/* ─── FINAL CTA (footer-redesign-mockup.html .final-cta — parchment) ─── */
.eas-comp-final {
  background: linear-gradient(180deg, #F2EBD9 0%, #EDE5CE 65%, #EDE5CE 100%) !important;
  padding: 140px 80px;
  position: relative;
  overflow: hidden;
  color: #1C1A14;
}

.eas-comp-final::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8vw;
  right: 8vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, #B59E7D, transparent);
  opacity: 0.6;
  pointer-events: none;
}

.eas-comp-final__rotated {
  position: absolute;
  right: -72px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-family: 'Jost', sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(88, 71, 56, 0.28);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.eas-comp-final__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.eas-comp-final__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.38em;
  color: #B8780A !important;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.eas-comp-final__eyebrow span:not(.eas-comp-final__eyebrow-rule) {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.38em;
  color: #B8780A;
  text-transform: uppercase;
}

.eas-comp-final__eyebrow-rule {
  width: 28px;
  height: 1px;
  background-color: #B8780A;
  flex-shrink: 0;
}

.eas-comp-final__headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  color: #1C1A14 !important;
  line-height: 1.15;
  font-style: normal;
  margin: 0;
}

.eas-comp-final__headline em {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal !important;
  font-weight: 300;
  color: #B8780A !important;
}

.eas-comp-final__sub {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  color: #B8780A !important;
  margin-top: 8px;
}

.eas-comp-final__action {
  border-left: 1px solid rgba(88, 71, 56, 0.14);
  padding-left: 40px;
}

.eas-comp-final__body {
  font-family: 'Jost', sans-serif !important;
  font-weight: 300;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  line-height: 1.7 !important;
  color: #584738 !important;
  opacity: 0.85;
  margin: 0 0 32px;
}

/* Solid forest fill at rest, gold slide-in on hover — reversed 2026-08-07 per
   direct founder instruction: the resting button color must be the forest
   tone (#2C3424, matches the footer background), not gold — gold is now
   the hover-only accent instead of the other way around. */
.eas-comp-final__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif !important;
  font-weight: 500;
  font-size: 11.5px;
  line-height: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: #2C3424 !important;
  border: 1px solid #2C3424;
  color: #F4F1E9 !important;
  padding: 17px 36px;
  margin-bottom: 20px;
  text-decoration: none;
  transition: color 0.35s ease;
  min-height: 48px;
  width: auto;
  max-width: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.eas-comp-final__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #B8780A;
  transform: translateX(-101%);
  transition: transform 0.35s ease;
  z-index: 0;
}

.eas-comp-final__btn-label {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}

.eas-comp-final__btn:hover::before,
.eas-comp-final__btn:focus-visible::before {
  transform: translateX(0);
}

.eas-comp-final__btn:hover .eas-comp-final__btn-label,
.eas-comp-final__btn:focus-visible .eas-comp-final__btn-label {
  color: #1C1A14;
}

.eas-comp-final__secondary {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(88, 71, 56, 0.55);
  text-transform: uppercase;
  text-decoration: none;
  margin-left: 20px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease;
}

.eas-comp-final__secondary:hover,
.eas-comp-final__secondary:focus-visible {
  color: #584738;
}

@media (prefers-reduced-motion: reduce) {
  .eas-comp-final__btn,
  .eas-comp-final__btn::before,
  .eas-comp-final__btn-label {
    transition: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .eas-comp-final__headline {
    font-size: clamp(36px, 5vw, 52px) !important;
  }
}

@media (max-width: 768px) {
  .eas-comp-hero-image {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* min-height, not a fixed height — see the desktop rule's comment above;
       a long real headline wrapping to several lines at mobile width must
       grow the section, not get clipped below the fold. */
    min-height: 85vh;
    box-sizing: border-box;
  }

  /* Override inline background-position; ken-burns scale clips portrait crop */
  .eas-comp-hero-image__bg {
    background-size: cover !important;
    background-position: 68% 40% !important;
    transform: none !important;
    animation: none !important;
  }

  .eas-comp-hero-image__label {
    position: relative;
    padding: 0 24px;
    margin-bottom: 24px;
    z-index: 5;
    box-sizing: border-box;
    width: 100%;
  }

  .eas-comp-hero-image__content {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 24px 4rem;
    box-sizing: border-box;
    z-index: 5;
  }

  .eas-comp-hero-image__headline,
  .eas-comp-hero-image__sub {
    max-width: 100%;
  }

  /* No eyebrow: transparent nav clearance without compressing bottom copy */
  .eas-comp-hero-image--no-eyebrow {
    padding-top: 118px;
    justify-content: flex-end;
  }

  .eas-comp-hero-image--no-eyebrow .eas-comp-hero-image__content {
    padding: 0 24px 4rem;
    margin: 0;
  }

  .eas-comp-hero-image__headline {
    margin-bottom: 28px;
  }

  .eas-comp-hero-image__sub {
    font-size: 17px;
    font-weight: 300;
    color: rgba(254, 253, 251, 0.82) !important;
    margin-bottom: 44px;
    line-height: 1.68;
  }

  .eas-comp-hero-image__label {
    font-size: 9px;
    letter-spacing: 0.4em;
    margin-bottom: 24px;
    gap: 14px;
  }

  .eas-comp-hero-image__label-rule {
    width: 28px;
  }

  .eas-comp-hero-image__cta {
    font-size: 10px;
    letter-spacing: 0.32em;
    min-height: 44px;
    align-items: center;
  }

  .eas-comp-itinerary,
  .eas-comp-experience,
  .eas-comp-reviews,
  .eas-comp-final {
    padding-left: 24px;
    padding-right: 24px;
  }

  .eas-comp-reviews__header {
    flex-direction: column;
  }

  .eas-comp-reviews__score-wrap {
    text-align: left;
  }

  .eas-comp-reviews__dots,
  .eas-comp-reviews__pills {
    justify-content: flex-start;
  }

  .eas-comp-reviews__score {
    font-size: 64px;
  }

  .eas-comp-reviews__headline {
    font-size: clamp(26px, 7vw, 36px);
  }

  .eas-comp-reviews .eas-comp-reviews__trust {
    font-size: 12px !important;
    letter-spacing: 0.12em;
    line-height: 1.6 !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  .eas-comp-reviews__tato {
    margin-top: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .eas-comp-reviews__tato-img {
    max-height: 48px;
  }

  .eas-comp-reviews__video-meta {
    padding: 12px 24px;
  }

  .eas-comp-reviews__video-verified {
    font-size: 11px;
    letter-spacing: 0.22em;
  }

  .eas-comp-itinerary__excerpt {
    font-size: 15px;
  }

  .eas-comp-final__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .eas-comp-final__action {
    border-left: none;
    padding-left: 0;
  }

  .eas-comp-final__rotated {
    display: none;
  }

  .eas-comp-final {
    padding: 80px 24px;
  }

  .eas-comp-final__headline {
    font-size: clamp(34px, 8vw, 52px) !important;
  }

  .eas-comp-final__body {
    font-size: 16px !important;
  }

  .eas-comp-final__secondary {
    display: block;
    margin-left: 0;
    margin-top: 16px;
    min-height: 44px;
    line-height: 44px;
  }

  .eas-comp-final__btn {
    font-size: 13px;
    padding: 20px 32px;
    min-height: 56px;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
}

/* Tablet no-eyebrow: reserve nav row — flex-end lets tall copy grow into header */
@media (min-width: 641px) and (max-width: 1024px) {
  .eas-comp-hero-image--no-eyebrow {
    display: grid;
    grid-template-rows: 118px 1fr auto;
    grid-template-columns: minmax(0, 1fr);
    align-content: stretch;
    padding-top: 0;
    min-height: max(640px, 100vh);
    box-sizing: border-box;
  }

  .eas-comp-hero-image--no-eyebrow .eas-comp-hero-image__content {
    grid-row: 3;
    grid-column: 1;
    margin: 0;
    padding: 0 40px 100px;
    max-width: none;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .eas-comp-itinerary__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* LAW 18b — hero cascade sovereignty (parity kit owns .eas-h1-hero) */
h1.eas-comp-hero-image__headline.eas-h1-hero {
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.32) !important;
}

/* ─────────────────────────────────────────────────────────────
   OFFER SEAL — shared component (Offers Component System, 2026-08-01)
   Extracted verbatim from offer-badge-spotlight-mockup-v3.html's `.seal`
   block. LAW 18 self-contained: literal hex values, no reliance on any
   host page's :root tokens. Absolutely positioned — the host card element
   only needs position:relative (already true on every card this renders
   inside: .acc-arc-card, .eas-itin-day-card-photo, .eas-dep-day-card-photo).
   ───────────────────────────────────────────────────────────── */
.eas-comp-offerseal {
  position: absolute;
  top: 18px;
  left: -1px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 14px;
  background: linear-gradient(120deg, #C9963C 0%, #B8780A 55%, #924F08 100%);
  box-shadow: 0 6px 16px -4px rgba(146, 79, 8, 0.55), 0 2px 4px rgba(28, 26, 20, 0.2);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.eas-comp-offerseal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 6px solid #924F08;
  border-bottom: 6px solid transparent;
  filter: brightness(0.55);
}
.eas-comp-offerseal__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: #FEFDFB;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.eas-comp-offerseal__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.eas-comp-offerseal__eyebrow {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 250, 238, 0.82);
}
.eas-comp-offerseal__label {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: 0.3px;
  color: #FEFDFB;
  text-shadow: 0 1px 2px rgba(28, 26, 20, 0.25);
}

/* ─────────────────────────────────────────────────────────────
   THE OFFER SPOTLIGHT — shared component (Offers Component System,
   2026-08-01; repositioned + restyled as a card, Offers Refinement v1,
   same day). Was a full-width parchment banner sitting in a locked
   Pricing → Offer → FAQ → Final CTA sequence, disconnected from the
   reservation form. Now a cream card with a 2px gold top rule — the same
   visual language as single-eas_departure.php's `.eas-dep-reserve-card`
   — so the two read as one connected unit wherever the host template
   places this render call directly above its reservation form / booking
   CTA. See CANONICAL-SITE-ARCHITECTURE.md §1.8 for the ratified rule.
   LAW 18 unchanged: every value below is still a literal hex, no reliance
   on any host page's :root tokens.
   ───────────────────────────────────────────────────────────── */
.eas-comp-offerspot {
  background: linear-gradient(180deg, #F2EBD9 0%, #EDE5CE 100%);
  padding: 90px 24px 40px;
}
.eas-comp-offerspot__inner {
  max-width: 680px;
  margin: 0 auto;
}
.eas-comp-offerspot__card {
  background: #FEFDFB;
  border-top: 2px solid #B8780A;
  padding: 56px 56px 52px;
  box-shadow: 0 24px 60px -34px rgba(28, 26, 20, 0.22);
}
.eas-comp-offerspot__head {
  text-align: center;
  margin-bottom: 20px;
}
.eas-comp-offerspot__tag {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #924F08;
  margin-bottom: 10px;
}
.eas-comp-offerspot__h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 29px;
  color: #2C3424;
  margin: 0;
}
.eas-comp-offerspot__intro {
  max-width: 46ch;
  margin: 12px auto 0;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgba(88, 71, 56, 0.72);
}
.eas-comp-offerspot__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 22px auto 34px;
  max-width: 160px;
}
.eas-comp-offerspot__line {
  flex: 1;
  height: 1px;
  background: rgba(184, 120, 10, 0.5);
}
.eas-comp-offerspot__ornament svg {
  width: 9px;
  height: 9px;
  color: #B8780A;
  flex-shrink: 0;
}
.eas-comp-offerspot__stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.eas-comp-offerspot__block {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  padding: 28px 0;
}
.eas-comp-offerspot__block + .eas-comp-offerspot__block {
  border-top: 1px solid rgba(184, 120, 10, 0.5);
}
.eas-comp-offerspot__camp {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #B59E7D;
  padding-top: 5px;
}
.eas-comp-offerspot__camp span {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 18px;
  color: #2C3424;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 7px;
}
.eas-comp-offerspot__headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 25px;
  color: #924F08;
  margin-bottom: 12px;
  line-height: 1.28;
}
.eas-comp-offerspot__body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgba(88, 71, 56, 0.72);
  margin-bottom: 14px;
  line-height: 1.75;
}
.eas-comp-offerspot__avail {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  color: #584738;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eas-comp-offerspot__avail svg {
  width: 13px;
  height: 13px;
  color: #B8780A;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .eas-comp-offerspot__block {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .eas-comp-offerspot {
    padding: 56px 16px 28px;
  }
  .eas-comp-offerspot__card {
    padding: 40px 24px 36px;
  }
}

/* ─────────────────────────────────────────────────────────────
   EXPERIENCE CARD — shared component (Workflow D, 2026-08-02).
   Renders identically on the standalone /experiences/ archive grid and
   wherever an experience is attached (Itinerary day, Departure page,
   Accommodation page) — one component, every host. LAW 18 self-contained:
   literal hex, no reliance on any host page's :root tokens. The offer seal
   (.eas-comp-offerseal, above) attaches inside .eas-exp-card__img, which is
   position:relative for exactly that reason — same convention as every
   other card this seal renders on.
   ───────────────────────────────────────────────────────────── */
.eas-exp-card {
  display: flex;
  flex-direction: column;
  background: #FEFDFB;
  border: 1px solid rgba(88, 71, 56, 0.12);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.eas-exp-card:hover {
  box-shadow: 0 20px 40px -24px rgba(28, 26, 20, 0.28);
  transform: translateY(-2px);
}
.eas-exp-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Fix Addendum v1.1 (Fix 1, 2026-08-02) — "+ Add to Itinerary" replaces the
   old standalone "Reserve" affordance; Experiences attach to a client's
   itinerary via the cart (js/eas-cart.js), never booked on their own. */
.eas-exp-card__add {
  display: block;
  width: 100%;
  padding: 13px 22px;
  background: #B8780A;
  color: #FEFDFB;
  border: none;
  border-top: 1px solid rgba(88, 71, 56, 0.12);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.eas-exp-card__add:hover {
  background: #2C3424;
}
.eas-exp-card__add.is-added {
  background: #4B6B3C;
}
.eas-exp-card__img {
  position: relative;
  height: 190px;
  background-size: cover;
  background-position: center;
  background-color: #2C3424;
  background-image: linear-gradient(120deg, #8a6a3f, #3f4a2e);
}
.eas-exp-card__body {
  padding: 22px;
}
.eas-exp-card__tag {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #924F08;
  margin-bottom: 8px;
}
.eas-exp-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  color: #1C1A14;
  margin: 0 0 10px;
}
.eas-exp-card__context {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.6;
  color: #924F08;
  margin: 0 0 10px;
}
.eas-exp-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  color: rgba(88, 71, 56, 0.72);
  border-top: 1px solid rgba(88, 71, 56, 0.12);
  padding-top: 12px;
  margin-top: 12px;
}
.eas-exp-card__meta-price {
  color: #924F08;
  font-weight: 500;
}

/* Grid wrapper for the archive + any host page's card row — 3-up desktop,
   1-up mobile, same breakpoint convention used throughout this file. */
.eas-exp-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .eas-exp-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .eas-exp-card-grid { grid-template-columns: 1fr; }
}

/* Cart line items — shared shape wherever the real Experience cart renders
   as a list (currently the Departure reservation form). Own namespace,
   LAW 18 self-contained hex, hooked via js/eas-cart.js's
   [data-eas-cart-*] attribute contract, not classes, so a host template's
   own CSS scope (e.g. .eas-dep-page) can still theme the wrapper card. */
.eas-cart-panel {
  background: #F2EBD9;
  border: 1px solid rgba(88, 71, 56, 0.16);
  padding: 20px 22px;
}
.eas-cart-panel__label {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #924F08;
  margin: 0 0 12px;
}
.eas-cart-panel__empty {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  color: rgba(88, 71, 56, 0.65);
  margin: 0;
}
.eas-cart-line-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eas-cart-line {
  /* Pre-promotion QA fix — was a single-row flex (name/price/remove all on
     one line). name had flex:1 with no white-space/overflow handling at
     all, so a real title ("Balloon Safari Over the Serengeti") wrapped
     freely inside that row and collided with the fixed-width price/remove
     siblings mid-word. Now: name gets its own row (clamped to 2 lines with
     ellipsis for anything longer), price sits on its own row underneath,
     remove spans both rows on the right — nothing can collide regardless
     of title length or panel width. */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 2px 10px;
  background: #FEFDFB;
  border: 1px solid rgba(88, 71, 56, 0.12);
  padding: 10px 14px;
}
.eas-cart-line__name {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  color: #1C1A14;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eas-cart-line__price {
  grid-column: 1;
  grid-row: 2;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  color: #924F08;
  white-space: nowrap;
}
.eas-cart-line__remove {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  background: none;
  border: none;
  color: rgba(88, 71, 56, 0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.eas-cart-line__remove:hover {
  color: #B8780A;
}

/* ─── FILTER BAR (ARCHIVES-RENOVATION v1.0 Phase 2, 2026-08-07) ───
   Pill filter, one real implementation shared by Departures and
   Itineraries archives (see partials/components/filter-bar.php docblock).
   NON-STICKY BY DESIGN (2026-08-07 follow-up) — the site's fixed nav
   (LAW 15) already occupies permanent screen height; stacking a second
   sticky element under it compounded to eat too much viewport on every
   scroll. The bar now sits in normal document flow, same as every other
   section on these pages — it scrolls away with the rest of the page
   content instead of pinning under the nav. Do not re-add
   position:sticky here without an explicit request — this was a direct
   founder correction to the Phase 2 (2026-08-07) sticky build. */
.eas-comp-filterbar {
  background: #FEFDFB;
  border-bottom: 1px solid rgba(184, 120, 10, 0.15);
  padding: 1rem 2rem;
  z-index: 40;
}
.eas-comp-filterbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.eas-comp-filterbar__label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #584738;
  white-space: nowrap;
}
.eas-comp-filterbar__sep {
  width: 1px;
  height: 24px;
  background: rgba(88, 71, 56, 0.14);
  margin: 0 0.3rem;
}
.eas-comp-filterbar__pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.eas-comp-filterbar__pill {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  padding: 0.38rem 0.85rem;
  border-radius: 100px;
  border: 1px solid rgba(184, 120, 10, 0.5);
  background: transparent;
  color: #1C1A14;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  line-height: 1;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.eas-comp-filterbar__pill:hover {
  border-color: #B8780A;
  color: #924F08;
}
.eas-comp-filterbar__pill--active {
  background: #2C3424;
  color: #C9963C;
  border-color: #2C3424;
}
.eas-comp-filterbar__count {
  margin-left: auto;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  color: rgba(88, 71, 56, 0.72);
}
.eas-comp-filterbar-hidden {
  display: none !important;
}
@media (max-width: 768px) {
  .eas-comp-filterbar__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .eas-comp-filterbar,
  .eas-comp-filterbar__pill {
    transition: none !important;
  }
}

/* UI-1 treatment B (founder decision 2026-10-20): pillar, itinerary and destination heroes.
   The photo is untouched (no veil, no gradient, no grain; this replaces the Hero-1 .eas-hero-light overlay).
   The text sits on a white card with a rust top line, bottom left (the lead-card family: rust #A85C38, cream card, ink).
   The class .eas-hero-light stays only as the opt-in hook so archives, departures and the other heroes keep their scrim. */
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__veil,
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__gradient,
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__grain,
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__content::before { display: none !important; }
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__content {
  background: #FDFAF6;
  border-top: 4px solid #A85C38;
  box-shadow: 0 6px 24px rgba(30, 26, 21, 0.06);
  box-sizing: border-box;
  max-width: 560px;
  width: calc(100% - 48px);
  margin: 0 0 56px var(--eas-gutter, 80px);
  padding: 32px 36px 36px;
}
/* the eyebrow becomes the top of the same card */
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__label {
  position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  align-self: flex-start; box-sizing: border-box;
  width: 560px; max-width: calc(100% - 48px);
  margin: 0 0 0 var(--eas-gutter, 80px) !important;
  padding: 32px 36px 0 !important;
  background: #FDFAF6; border-top: 4px solid #A85C38;
  color: #A85C38 !important; text-shadow: none !important; letter-spacing: 0.3em;
}
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__label-rule { background: #A85C38 !important; }
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__label + .eas-comp-hero-image__content { border-top: 0; padding-top: 14px; box-shadow: none; }
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__headline,
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__headline * {
  color: #1E1A15 !important; text-shadow: none !important; font-size: clamp(34px, 3.8vw, 54px) !important;
}
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__headline { line-height: 1.04; margin-bottom: 18px; }
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__sub { color: rgba(30, 26, 21, 0.82) !important; text-shadow: none !important; }
.eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__cta { color: #1E1A15 !important; border-color: #1E1A15 !important; text-shadow: none !important; }
@media (min-width: 769px) {
  /* desktop grid: photo on top, eyebrow and copy stacked at the bottom as one card (was: eyebrow in row 1 under the nav) */
  .eas-comp-hero-image.eas-hero-light { grid-template-rows: 1fr auto auto; }
  .eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__label { grid-row: 2; grid-column: 1; align-self: end; justify-self: start; }
  .eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__content { grid-row: 3; grid-column: 1; margin: 0 0 56px var(--eas-gutter, 80px); }
}
@media (max-width: 768px) {
  .eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__content { margin: 0 var(--eas-gutter, 24px) 24px; width: calc(100% - 2 * var(--eas-gutter, 24px)); padding: 20px 22px 26px; }
  .eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__label { margin: 0 0 0 var(--eas-gutter, 24px) !important; width: calc(100% - 2 * var(--eas-gutter, 24px)); max-width: none; padding: 22px 22px 0 !important; letter-spacing: 0.22em; }
  .eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__headline,
  .eas-comp-hero-image.eas-hero-light .eas-comp-hero-image__headline * { font-size: clamp(30px, 8.4vw, 40px) !important; }
}

/* UI-1: the hero photo is an <img> now (was a CSS background). Same box, same cover crop. */
img.eas-comp-hero-image__bg { width: 100%; height: 100%; object-fit: cover; object-position: center; max-width: none; }

/* eas-dyncards.css */
/**
 * Dynamic Itinerary Cards — real, published eas_itinerary posts.
 * Homepage Platinum section + all 5 identity pages (2026-07-24 session).
 *
 * LAW 18 (component self-containment): every rule below defines its own
 * font-family/color/background — zero inheritance from the host page.
 *
 * Deliberately a SEPARATE class namespace (.eas-dyncard*) from
 * .eas-comp-itinerary__* — that older namespace is reused verbatim by the
 * live Offers/Departures archive signature cards (archive-eas_offer.php,
 * archive-eas_departure.php); redesigning it in place would have broken
 * both already-live pages. See functions.php's eas-dyncards enqueue
 * comment for the same note.
 */

.eas-dyncard-section {
  padding: 90px 6vw 100px;
  background: #FAF7F0;
}

.eas-dyncard-section__label {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #924F08;
  text-align: center;
  margin: 0 0 18px;
}

.eas-dyncard-section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 20px;
}

.eas-dyncard-section__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.12;
  color: #1A0F06;
  margin: 0;
}

.eas-dyncard-section__title-em {
  font-style: normal;
  color: #B8780A;
}

.eas-dyncard-section__intro {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(26, 15, 6, 0.72);
  max-width: 640px;
  margin: 18px auto 0;
  text-align: center;
}

.eas-dyncard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1360px;
  margin: 46px auto 0;
}

@media (max-width: 1024px) {
  .eas-dyncard-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .eas-dyncard-grid { grid-template-columns: 1fr; }
}

/* ─── Card ─── */

.eas-dyncard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #1A0F06;
  border: 1px solid rgba(201, 150, 60, 0.28);
  overflow: visible;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.eas-dyncard:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(26, 15, 6, 0.24);
}

.eas-dyncard__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #2C2013;
  overflow: hidden;
}

.eas-dyncard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.02) 55%, rgba(20, 16, 10, 0.5) 100%);
  pointer-events: none;
}

.eas-dyncard__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F7F1E3;
  background-color: rgba(20, 16, 10, 0.44);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 241, 227, 0.38);
  padding: 6px 12px;
}

.eas-dyncard__rule {
  height: 2px;
  background: linear-gradient(90deg, #B8780A, rgba(184, 120, 10, 0.15));
}

.eas-dyncard__text {
  padding: 22px 24px 18px;
}

.eas-dyncard__route {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C9963C;
  margin: 0 0 10px;
}

.eas-dyncard__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.14;
  color: #F7F1E3;
  margin: 0;
}

/* ─── Frosted panel — below the title/route text, never over the photo ─── */

.eas-dyncard__panel {
  margin: 0 24px 24px;
  padding: 16px 18px;
  background-color: rgba(247, 241, 227, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 150, 60, 0.3);
}

.eas-dyncard__pace {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
}

.eas-dyncard__pace-label {
  font-family: 'Jost', sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 241, 227, 0.78);
}

.eas-dyncard__info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(247, 241, 227, 0.5);
  color: rgba(247, 241, 227, 0.75);
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  font-style: italic;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
}

.eas-dyncard__tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  background-color: #1A0F06;
  border: 1px solid rgba(201, 150, 60, 0.4);
  color: rgba(247, 241, 227, 0.92);
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 10px 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 5;
  box-shadow: 0 12px 30px rgba(26, 15, 6, 0.35);
}

.eas-dyncard__info:hover .eas-dyncard__tooltip,
.eas-dyncard__info:focus .eas-dyncard__tooltip,
.eas-dyncard__info:focus-visible .eas-dyncard__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.eas-dyncard__ledger {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid rgba(201, 150, 60, 0.32);
  padding-top: 12px;
  margin-bottom: 14px;
}

.eas-dyncard__ledger-item dt {
  font-family: 'Jost', sans-serif;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 241, 227, 0.6);
  margin: 0 0 4px;
}

.eas-dyncard__ledger-item dd {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 17px;
  color: #E8C06A;
  margin: 0;
}

.eas-dyncard__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 241, 227, 0.55);
  transition: color 0.3s ease;
}

.eas-dyncard:hover .eas-dyncard__foot {
  color: rgba(247, 241, 227, 0.92);
}

.eas-dyncard__arrow {
  display: inline-block;
  transition: transform 0.4s ease;
}

.eas-dyncard:hover .eas-dyncard__arrow {
  transform: translateX(6px);
}

/* ─── Empty state — no fabricated cards, an honest message instead ─── */

.eas-dyncard-empty {
  max-width: 640px;
  margin: 40px auto 0;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: rgba(26, 15, 6, 0.55);
}

/* eas-reveal.css */
/**
 * EAS Scroll Reveal — progressive enhancement
 * No JS: content visible (html:not(.eas-js) override beats inline pillar opacity:0).
 * With JS: eas-reveal.js adds html.eas-js, then IntersectionObserver reveals elements.
 */

html:not(.eas-js) .reveal,
html:not(.eas-js) .eas-reveal,
html:not(.eas-js) .eas-reveal-left {
    opacity: 1 !important;
    transform: none !important;
}

html.eas-js .reveal:not(.visible),
html.eas-js .eas-reveal:not(.in) {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

html.eas-js .eas-reveal-left:not(.visible) {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

html.eas-js .reveal.visible,
html.eas-js .eas-reveal.in,
html.eas-js .eas-reveal-left.visible {
    opacity: 1;
    transform: translateY(0);
}

html.eas-js .eas-reveal-left.visible {
    transform: translateX(0);
}

/* eas-icons.css */
/**
 * EAS luxury travel icons — gold/ink line art for pillar feature cards.
 * LAW 18: self-contained color on .eas-icon (no inheritance from page wrappers).
 */

.eas-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 1.5rem;
  color: #B8780A;
  flex-shrink: 0;
}

.eas-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eas-icon--sm {
  width: 28px;
  height: 28px;
  margin-bottom: 0;
}

.eas-icon--inline {
  margin-bottom: 0;
}

/* Family protocol grid */
.eas-family-page .pi .eas-icon {
  margin-bottom: 1.5rem;
}

/* Honeymoon activity cards */
.eas-honeymoon-page .eas-activity .eas-icon {
  margin-bottom: 1rem;
}

/* Solo activity grid */
.eas-solo-page .eas-act-item .eas-icon {
  margin-bottom: 1.2rem;
}

/* Milestone experience list — icon in left column */
.eas-milestone-page .eas-experience-list .eas-icon {
  margin-bottom: 0;
  margin-top: 0.15rem;
}

/* Wellness operations feature grid */
.eas-wellness-page .eas-ops-feature .eas-icon {
  margin-bottom: 1rem;
}

/* eas-pillar-prose.css */
/**
 * Pillar pull-quote — Foxiz eviction + brand typography (LAW 18b).
 * Authority: .eas-pillar-quote named class only. No bare blockquote rules.
 */

/* ─── Pillar scroll contract (LAW 17) ───
   Page wrapper must NOT be a scroll container — only html/body scroll.
   overflow-x: hidden on a wrapper forces overflow-y: auto (CSS spec),
   which creates the double-scrollbar bug on pillar pages.

   This bug has resurfaced three times (offers/departures/accommodation,
   then the homepage) because each fix only allow-listed the one class that
   broke that time — the real cause was never actually removed from the
   places that don't need it. Going forward: (1) remove overflow-x:hidden
   at its declaration site whenever it's found (it's boilerplate copied
   template-to-template — every page audited so far turned out not to
   depend on it for real horizontal clipping, since components that
   genuinely need to clip already have their own scoped overflow:hidden).
   (2) ALSO list the wrapper class here as a backstop, so if the property
   is ever reintroduced on one of these six classes before anyone notices,
   it's neutralized automatically instead of shipping a third recurrence.
   Any NEW page wrapper that turns up with this property must be added to
   BOTH — removed at its source AND added to this list — not just patched
   in whichever file the bug report happened to point at.
────────────────────────────────────────────────────────────────────── */
.eas-couple-page,
.eas-honeymoon-page,
.eas-family-page,
.eas-solo-page,
.eas-milestone-page,
.eas-wellness-page,
.eas-friends-page,
.eas-home-page,
.eas-offers-archive-page,
.eas-departures-archive-page,
.eas-accommodation-archive-page,
.eas-acc-single {
    overflow: visible !important;
    min-height: 0;
}

/* ─── Brand pull quote ─── */
.eas-couple-page .eas-pillar-quote,
.eas-honeymoon-page .eas-pillar-quote,
.eas-family-page .eas-pillar-quote,
.eas-solo-page .eas-pillar-quote,
.eas-milestone-page .eas-pillar-quote,
.eas-wellness-page .eas-pillar-quote,
.eas-couple-page .eas-pull-quote blockquote,
.eas-honeymoon-page .eas-pull-quote blockquote,
.eas-family-page .eas-pull-quote blockquote,
.eas-solo-page .eas-pull-quote blockquote,
.eas-milestone-page .eas-pull-quote blockquote,
.eas-wellness-page .eas-pull-quote blockquote {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
    font-weight: 300 !important;
    font-style: normal !important;
    color: #1A0F06 !important;
    line-height: 1.55 !important;
    text-align: center;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    quotes: none !important;
    position: relative;
    max-width: 820px;
}

.eas-couple-page .eas-pillar-quote .eas-pillar-em,
.eas-honeymoon-page .eas-pillar-quote .eas-pillar-em,
.eas-family-page .eas-pillar-quote .eas-pillar-em,
.eas-solo-page .eas-pillar-quote .eas-pillar-em,
.eas-milestone-page .eas-pillar-quote .eas-pillar-em,
.eas-wellness-page .eas-pillar-quote .eas-pillar-em,
.eas-couple-page .eas-pillar-quote em,
.eas-honeymoon-page .eas-pillar-quote em,
.eas-family-page .eas-pillar-quote em,
.eas-solo-page .eas-pillar-quote em,
.eas-milestone-page .eas-pillar-quote em,
.eas-wellness-page .eas-pillar-quote em {
    font-style: normal !important;
    color: #B8780A !important;
}

/* ─── Foxiz pseudo-glyphs, icons, tinted boxes — permanent removal ─── */
.eas-couple-page blockquote.eas-pillar-quote::before,
.eas-couple-page blockquote.eas-pillar-quote::after,
.eas-honeymoon-page blockquote.eas-pillar-quote::before,
.eas-honeymoon-page blockquote.eas-pillar-quote::after,
.eas-family-page blockquote.eas-pillar-quote::before,
.eas-family-page blockquote.eas-pillar-quote::after,
.eas-solo-page blockquote.eas-pillar-quote::before,
.eas-solo-page blockquote.eas-pillar-quote::after,
.eas-milestone-page blockquote.eas-pillar-quote::before,
.eas-milestone-page blockquote.eas-pillar-quote::after,
.eas-wellness-page blockquote.eas-pillar-quote::before,
.eas-wellness-page blockquote.eas-pillar-quote::after,
.eas-couple-page .eas-pull-quote blockquote::before,
.eas-couple-page .eas-pull-quote blockquote::after,
.eas-honeymoon-page .eas-pull-quote blockquote::before,
.eas-honeymoon-page .eas-pull-quote blockquote::after,
.eas-family-page .eas-pull-quote blockquote::before,
.eas-family-page .eas-pull-quote blockquote::after,
.eas-solo-page .eas-pull-quote blockquote::before,
.eas-solo-page .eas-pull-quote blockquote::after,
.eas-milestone-page .eas-pull-quote blockquote::before,
.eas-milestone-page .eas-pull-quote blockquote::after,
.eas-wellness-page .eas-pull-quote blockquote::before,
.eas-wellness-page .eas-pull-quote blockquote::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: transparent !important;
    opacity: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.eas-couple-page .rb-quote-icon,
.eas-honeymoon-page .rb-quote-icon,
.eas-family-page .rb-quote-icon,
.eas-solo-page .rb-quote-icon,
.eas-milestone-page .rb-quote-icon,
.eas-wellness-page .rb-quote-icon,
.eas-couple-page .rb-pullquote-icon,
.eas-honeymoon-page .rb-pullquote-icon,
.eas-family-page .rb-pullquote-icon,
.eas-solo-page .rb-pullquote-icon,
.eas-milestone-page .rb-pullquote-icon,
.eas-wellness-page .rb-pullquote-icon,
.eas-couple-page .foxiz-pullquote,
.eas-honeymoon-page .foxiz-pullquote,
.eas-family-page .foxiz-pullquote,
.eas-solo-page .foxiz-pullquote,
.eas-milestone-page .foxiz-pullquote,
.eas-wellness-page .foxiz-pullquote {
    display: none !important;
}

/* Pull-quote wrapper — parchment only, no Foxiz panel */
.eas-couple-page .eas-pull-quote,
.eas-honeymoon-page .eas-pull-quote,
.eas-honeymoon-page .eas-pull-quote-wrap,
.eas-family-page .eas-pull-quote,
.eas-solo-page .eas-pull-quote,
.eas-milestone-page .eas-pull-quote,
.eas-wellness-page .eas-pull-quote,
.eas-wellness-page .eas-pull-quote-wrap {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ─── Shell link baseline — Foxiz dequeued on pillars, UA defaults bleed ─── */
.eas-couple-page a,
.eas-honeymoon-page a,
.eas-family-page a,
.eas-solo-page a,
.eas-milestone-page a,
.eas-wellness-page a {
    color: inherit;
    text-decoration: none;
}

.eas-couple-page a.eas-pillar-link,
.eas-honeymoon-page a.eas-pillar-link,
.eas-family-page a.eas-pillar-link,
.eas-solo-page a.eas-pillar-link,
.eas-milestone-page a.eas-pillar-link,
.eas-wellness-page a.eas-pillar-link {
    color: #B8780A;
    text-decoration: none;
}

.eas-couple-page a.eas-pillar-link:hover,
.eas-honeymoon-page a.eas-pillar-link:hover,
.eas-family-page a.eas-pillar-link:hover,
.eas-solo-page a.eas-pillar-link:hover,
.eas-milestone-page a.eas-pillar-link:hover,
.eas-wellness-page a.eas-pillar-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Legacy inline itinerary cards (family s-experience) — anchor wraps card body */
.eas-family-page a.itinerary-card,
.eas-family-page a.itinerary-card:hover,
.eas-family-page a.itinerary-card:focus,
.eas-family-page a.itinerary-card:visited {
    text-decoration: none;
    color: inherit;
}

.eas-family-page a.itinerary-card .eas-pillar-h3,
.eas-family-page a.itinerary-card p,
.eas-family-page a.itinerary-card span {
    text-decoration: none;
}

/* ─── Dark section typography (LAW 18b) — cream headings on forest/deep/ink ─── */
.eas-section--dark .eas-pillar-h2,
.eas-section--dark .eas-pillar-h3,
.eas-section--dark .eas-pillar-h4,
.s-investment .eas-pillar-h2,
.s-manifesto .eas-pillar-h2,
.s-cta .eas-pillar-h2 {
    color: #F1EADA !important;
}

.eas-section--dark .eas-pillar-h2 .eas-pillar-em,
.eas-section--dark .eas-pillar-h3 .eas-pillar-em,
.eas-section--dark .eas-pillar-h4 .eas-pillar-em,
.s-investment .eas-pillar-h2 .eas-pillar-em,
.s-manifesto .eas-pillar-h2 .eas-pillar-em,
.s-cta .eas-pillar-h2 .eas-pillar-em {
    color: #C9963C !important;
    font-style: normal !important;
}

.eas-section--dark .eas-pillar-label,
.eas-section--dark .eas-label,
.eas-section--dark .eyebrow,
.s-investment .eas-pillar-label,
.s-investment .eas-label,
.s-investment .eyebrow,
.s-manifesto .eas-pillar-label,
.s-manifesto .eas-label,
.s-manifesto .eyebrow,
.s-cta .eas-pillar-label,
.s-cta .eas-label,
.s-cta .eyebrow {
    color: rgba(201, 150, 60, 0.85) !important;
}

/* Optional modifier — single heading on any dark host */
.eas-pillar-h2--light,
.eas-pillar-h3--light,
.eas-pillar-h4--light {
    color: #F1EADA !important;
}

.eas-pillar-h2--light .eas-pillar-em,
.eas-pillar-h3--light .eas-pillar-em,
.eas-pillar-h4--light .eas-pillar-em {
    color: #C9963C !important;
    font-style: normal !important;
}

/* ─── Stat cards + section eyebrows — LAW 20 parity kit (eas-parity.css) ─── */

/* Dark sections — reassert cream/gold labels after light parchment override */
.eas-section--dark .eas-pillar-label,
.eas-section--dark .eas-label,
.eas-section--dark .eas-eyebrow,
.eas-section--dark .eyebrow,
.s-investment .eas-pillar-label,
.s-investment .eas-label,
.s-investment .eas-eyebrow,
.s-investment .eyebrow,
.s-manifesto .eas-pillar-label,
.s-manifesto .eas-label,
.s-manifesto .eas-eyebrow,
.s-manifesto .eyebrow,
.s-cta .eas-pillar-label,
.s-cta .eas-label,
.s-cta .eas-eyebrow,
.s-cta .eyebrow {
    color: rgba(201, 150, 60, 0.85) !important;
}

/* eas-single-post.css */
/* ───────────────────────────────────────────────────────────────────────
   EAS SINGLE POST — THE FIELD JOURNAL
   Template:  eas-single-post-field-journal-v3  →  single.php
   Namespace: .eas-st-  (every class — zero collision with WP/Foxiz)
   Version:   3.0 Production · May 2026

   BULLETPROOF CSS STRATEGY (three layers):
   1. Namespace .eas-st-  — plugins cannot target unknown classes
   2. .eas-st-root scope  — specificity 0-2-0 walls out WP/Foxiz 0-1-0
   3. Surgical reset on p/h/a/ul inside root — kills inherited corruption
   !important used on 3 structural properties only (marked inline)

   DUAL-MODE SLOT PATTERN (PHP → Studio):
   Every dynamic value has a comment block showing:
     WP:     PHP template tag for single.php
     STUDIO: window.easStudio.data key for Streamlit shim
     FIELD:  data-eas-field attribute read by eas-studio-shim.js
   Placeholder content = real copy for browser preview

   MOOD SYSTEM:
   data-mood on .eas-st-root — CSS variable overrides per journey type
   dawn (default) | intimate | landmark | expedition | editorial

   LAYOUT ALTERNATES:
   data-layout on .eas-st-root — structural variants
   document (default) | cinematic
─────────────────────────────────────────────────────────────────────── */

/* ── CSS CUSTOM PROPERTIES — :root level, safe globally ──────────────── */
:root {
  --eas-parchment:  #F6F1E9;
  --eas-linen:      #EDE7DB;
  --eas-paper:      #FDFAF6;
  --eas-ink:        #1E1A15;
  --eas-ink-2:      #3D3630;
  --eas-ink-3:      #6B6258;
  --eas-ink-4:      #9E9690;
  --eas-clay:       #A85C38;
  --eas-clay-lt:    #C47450;
  --eas-clay-dm:    #7A3E22;
  --eas-clay-xs:    rgba(168,92,56,.07);
  --eas-clay-sm:    rgba(168,92,56,.15);
  --eas-clay-md:    rgba(168,92,56,.32);
  --eas-sage:       #4A5E44;
  --eas-rule:       rgba(30,26,21,.10);
  --eas-rule-2:     rgba(30,26,21,.055);
  --eas-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  /* Mood tokens — overridden per data-mood */
  --eas-bg:         var(--eas-parchment);
  --eas-accent:     var(--eas-clay);
  --eas-accent-xs:  var(--eas-clay-xs);
  --eas-accent-md:  var(--eas-clay-md);
}

/* ── MOOD OVERRIDES ───────────────────────────────────────────────────── */
.eas-st-root[data-mood="intimate"]   { --eas-bg:#FBF6EF; --eas-accent:#B56040; --eas-accent-xs:rgba(181,96,64,.07); --eas-accent-md:rgba(181,96,64,.30); }
.eas-st-root[data-mood="landmark"]   { --eas-bg:#F2EDE3; --eas-accent:#7A3E22; --eas-accent-xs:rgba(122,62,34,.07); --eas-accent-md:rgba(122,62,34,.28); }
.eas-st-root[data-mood="expedition"] { --eas-bg:#EDE8DC; --eas-accent:#4A5E44; --eas-accent-xs:rgba(74,94,68,.07);  --eas-accent-md:rgba(74,94,68,.28);  }
.eas-st-root[data-mood="editorial"]  { --eas-bg:#F9F5EE; --eas-accent:#8B4A28; --eas-accent-xs:rgba(139,74,40,.06); --eas-accent-md:rgba(139,74,40,.26); }

/* ── SURGICAL RESET — kills Foxiz + WP core typography ──────────────── */
.eas-st-root,.eas-st-root *,.eas-st-root *::before,.eas-st-root *::after { box-sizing:border-box; }
.eas-st-root p,
.eas-st-root h1,.eas-st-root h2,.eas-st-root h3,.eas-st-root h4,
.eas-st-root ul,.eas-st-root ol,.eas-st-root li,
.eas-st-root blockquote,.eas-st-root figure,.eas-st-root figcaption { margin:0; padding:0; font-size:inherit; font-weight:inherit; line-height:inherit; color:inherit; font-family:inherit; }
.eas-st-root a { text-decoration:none; color:inherit; }
.eas-st-root img { display:block; max-width:100%; }

/* ── ROOT ─────────────────────────────────────────────────────────────── */
.eas-st-root {
  background: var(--eas-bg);
  color: var(--eas-ink);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px; line-height: 1.86; font-weight: 300;
  overflow-x: hidden !important; /* structural */
}

/* ── READING BAR ──────────────────────────────────────────────────── */
.eas-st-rbar {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--eas-clay);
  z-index: 9999; pointer-events: none;
  transition: width .07s linear;
}

/* ── NAVIGATION ────────────────────────────────────────────────────── */
.eas-st-nav {
  position: fixed !important;
  top: 0; left: 0; right: 0; z-index: 1000; height: 64px;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 48px;
  background: rgba(246,241,233,.97);
  border-bottom: 1px solid var(--eas-rule);
  backdrop-filter: blur(8px);
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.eas-st-nav-left { display:flex; align-items:center; gap:28px; }
.eas-st-nav-left a, .eas-st-nav-right a {
  font-family:'Overpass Mono',monospace;
  font-size:9px; letter-spacing:2px; text-transform:uppercase;
  color:var(--eas-ink-3); font-weight:400; transition:color .3s ease;
}
.eas-st-nav-left a:hover, .eas-st-nav-right a:hover { color:var(--eas-ink); }
.eas-st-nav-center {
  font-family:'Playfair Display',serif;
  font-size:13px; font-weight:400; letter-spacing:.5px;
  color:var(--eas-ink); text-align:center; white-space:nowrap;
  transition: color .3s ease;
}
.eas-st-nav-right { display:flex; align-items:center; justify-content:flex-end; gap:24px; }
.eas-st-nav-begin {
  font-family:'Overpass Mono',monospace !important;
  font-size:9px !important; letter-spacing:2px; text-transform:uppercase;
  font-weight:400 !important; color:var(--eas-paper) !important;
  background:var(--eas-ink) !important; padding:9px 22px; transition:background .22s, border-color .3s ease;
}
.eas-st-nav-begin:hover { background:var(--eas-clay) !important; }

/* ── Nav transparency — over hero image on load, solid after 80px scroll ── */
.eas-st-nav:not(.eas-st-nav--solid) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
}
.eas-st-nav:not(.eas-st-nav--solid) .eas-st-nav-left a,
.eas-st-nav:not(.eas-st-nav--solid) .eas-st-nav-right a {
  color: var(--eas-paper) !important;
}
.eas-st-nav:not(.eas-st-nav--solid) .eas-st-nav-center {
  color: var(--eas-paper) !important;
}
.eas-st-nav:not(.eas-st-nav--solid) .eas-st-nav-begin {
  background: transparent !important;
  color: var(--eas-paper) !important;
  border: 1px solid rgba(253,250,246,.50) !important;
}

/* ── ZONE 1: EDITORIAL MASTHEAD ────────────────────────────────────── */
.eas-st-masthead { margin-top:0; background:var(--eas-paper); border-bottom:1px solid var(--eas-rule); padding:0 48px; position:relative; }

.eas-st-issue-strip { display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--eas-rule-2); }
.eas-st-issue-left { display:flex; align-items:center; gap:28px; }
.eas-st-issue-num { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--eas-accent); }
.eas-st-issue-sep { width:1px; height:14px; background:var(--eas-rule); flex-shrink:0; }
.eas-st-issue-cat { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--eas-ink-3); }
.eas-st-issue-right { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:1.5px; color:var(--eas-ink-4); }

.eas-st-title-block { padding:56px 0 0; position:relative; overflow:hidden; }
.eas-st-title-wm { position:absolute; top:-0.05em; right:-0.08em; font-family:'Playfair Display',serif; font-size:18vw; font-weight:900; line-height:1; color:rgba(30,26,21,0.008); pointer-events:none; user-select:none; letter-spacing:-.05em; }
.eas-st-kicker { display:flex; align-items:center; gap:16px; margin-bottom:32px; position:relative; z-index:1; }
.eas-st-kicker-line { width:40px; height:1px; background:var(--eas-accent); }
.eas-st-kicker-text { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--eas-accent); }
.eas-st-root .eas-st-h1 { font-family:'Playfair Display',serif !important; font-size:clamp(54px,7.5vw,108px) !important; font-weight:700 !important; line-height:.92 !important; color:var(--eas-ink) !important; letter-spacing:-.03em; max-width:880px; position:relative; z-index:1; margin-bottom:0; }
.eas-st-root .eas-st-h1 em { font-style:normal !important; font-weight:400 !important; color:var(--eas-accent) !important; }
.eas-st-deck-bar { display:grid !important; grid-template-columns:1fr 340px; gap:48px; align-items:end; padding:40px 0 52px; border-top:1px solid var(--eas-rule); margin-top:40px; position:relative; z-index:1; }
.eas-st-deck { font-family:'Source Serif 4',serif; font-size:clamp(15px,1.4vw,19px); font-weight:300; font-style:normal; color:var(--eas-ink-2); line-height:1.65; }
.eas-st-title-meta { display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
.eas-st-meta-author-row { display:flex; align-items:center; gap:14px; justify-content:flex-end; }
.eas-st-meta-avatar { width:42px; height:42px; border:1px solid var(--eas-accent-md); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:14px; color:var(--eas-accent); background:var(--eas-accent-xs); flex-shrink:0; }
.eas-st-meta-name { font-family:'Source Serif 4',serif; font-size:14px; color:var(--eas-ink); font-weight:500; text-align:right; }
.eas-st-meta-role { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--eas-accent); text-align:right; }
.eas-st-meta-details { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:1px; color:var(--eas-ink-4); text-align:right; line-height:1.8; }

/* ── ZONE 2: PHOTO BAND ────────────────────────────────────────────── */
.eas-st-photo-band { margin-top:0; position:relative; height:clamp(360px,48vw,580px); overflow:hidden !important; }
.eas-st-photo-sky { position:absolute; inset:0; }
/* Real uploaded photos are progressive JPEGs and paint in visible passes
   -- this is normal browser decode behavior, not a bug. A pure-CSS
   fade-in (no JS/state, nothing that can get stuck) softens the pop-in
   once the browser starts painting, without ever risking the hero
   staying blank -- see HeroPhotoBand.tsx's own docblock for the fuller
   history of why this is deliberately CSS-only. */
.eas-st-photo-sky-fade { animation: eas-st-photo-fade-in .6s ease both; }
@keyframes eas-st-photo-fade-in { from { opacity:.55; } to { opacity:1; } }
.eas-st-photo-flora { position:absolute; bottom:0; left:0; right:0; }
.eas-st-photo-veil { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 42%,rgba(246,241,233,.14) 74%,rgba(246,241,233,.52) 100%); }
.eas-st-photo-caption-bar { background:var(--eas-linen); border-bottom:1px solid var(--eas-rule); padding:15px 48px; display:flex; align-items:center; justify-content:space-between; }
.eas-st-pcap-text { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:1.5px; color:var(--eas-ink-3); }
.eas-st-pcap-share { display:flex; gap:12px; }
.eas-st-pcap-link { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--eas-ink-4); padding:4px 12px; border:1px solid var(--eas-rule); cursor:pointer; transition:color .18s, border-color .18s; }
.eas-st-pcap-link:hover { color:var(--eas-accent); border-color:var(--eas-accent-md); }

/* ── ZONE 3: THREE-COLUMN MAGAZINE BODY ─────────────────────────────── */
.eas-st-magazine-body { display:grid !important; grid-template-columns:148px 1fr 272px; max-width:1280px; margin:0 auto; padding:0 48px; align-items:start; min-height:100vh; }
/* FIXED (blog-engine-final-fixes brief, real bug found during Part C
   verification, not in the original brief's named items): BlogPostTemplate.tsx's
   own `.eas-st-margin-col` chapter nav only renders when a post has at least
   one real `<h2 id="...">` (buildChapterNav()'s own real requirement) -- a
   post whose H2s have no `id` attribute (confirmed live: "The 11-Day
   Threshold" has 7 real H2s, zero with an id) renders with only 2 of the 3
   grid children present. With no explicit grid-column on any of them, CSS
   Grid's own auto-placement algorithm fills the FIRST defined track (148px)
   with whichever child comes first in the DOM -- `.eas-st-copy`, the main
   body text -- squeezing the entire article into a 148px-wide column. At
   that width, nearly every real word is wider than the column, so the
   browser wraps after almost every word: a real post rendered at 80,058px
   tall instead of a normal page height, confirmed live via a direct
   getBoundingClientRect() check (copyWidth: 148 instead of the real 764px
   grid track) and reproduced at a completely ordinary 1440x900 viewport,
   not an edge case. `.eas-st-sidebar` shifted into the 764px track as a
   result, which is why it visually read as "wider," not missing.

   Real fix: pin each of the three possible children to its own real grid
   column explicitly, so CSS Grid auto-placement is never consulted at all
   -- the layout is correct whether 2 or 3 of them are actually present. */
.eas-st-margin-col { grid-column: 1; }
.eas-st-copy { grid-column: 2; }
.eas-st-sidebar { grid-column: 3; }

/* ── Margin notes column ─────────────────────────────────────────── */
.eas-st-margin-col { padding-top:72px; padding-right:32px; position:sticky !important; top:80px; }
.eas-st-margin-col::after { content:''; position:absolute; top:72px; right:0; bottom:0; width:1px; background:linear-gradient(to bottom,var(--eas-rule-2),var(--eas-rule) 30%,var(--eas-rule) 70%,transparent); }
.eas-st-m-vol { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--eas-ink-4); writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg); margin-bottom:28px; display:block; }
.eas-st-mc-line { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-top:1px solid var(--eas-rule-2); cursor:pointer; transition:border-color .18s; }
.eas-st-mc-line:hover { border-top-color:var(--eas-accent); }
.eas-st-mc-n { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:1px; color:var(--eas-ink-4); padding-top:2px; flex-shrink:0; min-width:14px; }
.eas-st-mc-line.active .eas-st-mc-n { color:var(--eas-accent); }
.eas-st-mc-label { font-family:'Source Serif 4',serif; font-size:11px; color:var(--eas-ink-3); line-height:1.45; font-style:normal; }
.eas-st-mc-line.active .eas-st-mc-label { color:var(--eas-ink); }

/* ── Article copy ─────────────────────────────────────────────────── */
.eas-st-copy { padding:72px 56px 88px; border-right:1px solid var(--eas-rule-2); }
.eas-st-root .eas-st-copy p { color:var(--eas-ink) !important; font-size:18px !important; line-height:1.9; margin-bottom:28px; font-weight:300 !important; font-family:'Source Serif 4',serif !important; text-align:justify; }
.eas-st-dropcap::first-letter { font-family:'Playfair Display',serif; float:left; font-size:7em; line-height:.72; font-weight:400; font-style:normal; color:var(--eas-accent); padding-right:8px; padding-top:6px; }
.eas-st-s-head { display:flex; align-items:baseline; gap:20px; margin:68px 0 28px; padding-bottom:16px; border-bottom:1px solid var(--eas-rule); }
.eas-st-s-num { font-family:'Playfair Display',serif; font-size:11px; font-style:normal; color:var(--eas-accent); flex-shrink:0; }
.eas-st-s-title { font-family:'Playfair Display',serif; font-size:29px; font-weight:500; color:var(--eas-ink); line-height:1.15; letter-spacing:-.02em; }
.eas-st-s-rule { flex:1; height:1px; background:var(--eas-rule); margin-bottom:4px; }
.eas-st-eyebrow { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--eas-accent); margin:44px 0 14px; display:block; }

.eas-st-pull-quote { margin:72px -56px; padding:64px 56px; background:var(--eas-linen); position:relative; text-align:center; overflow:hidden; }
.eas-st-pull-quote::before { content:'\201C'; position:absolute; top:-40px; left:50%; transform:translateX(-50%); font-family:'Playfair Display',serif; font-size:24rem; font-weight:900; line-height:1; opacity:.035; color:var(--eas-accent); pointer-events:none; }
.eas-st-pull-quote blockquote { font-family:'Playfair Display',serif; font-size:clamp(21px,2.8vw,36px); font-weight:400; font-style:normal; color:var(--eas-ink); line-height:1.35; letter-spacing:-.01em; max-width:760px; margin:0 auto 28px; position:relative; z-index:1; }
.eas-st-pull-cite { display:block; font-style:normal; font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--eas-accent); position:relative; z-index:1; }

.eas-st-field-note { display:grid !important; grid-template-columns:3px 1fr; gap:0; margin:48px 0; overflow:hidden; }
.eas-st-fn-rule { background:var(--eas-accent); }
.eas-st-fn-body { padding:20px 24px; background:var(--eas-accent-xs); border:1px solid var(--eas-clay-sm); border-left:none; }
.eas-st-fn-label { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--eas-accent); margin-bottom:8px; display:block; }
.eas-st-fn-text { font-family:'Source Serif 4',serif; font-size:15px; color:var(--eas-ink-2); line-height:1.72; font-style:normal; margin:0; }

.eas-st-mid-image { margin:60px -56px; position:relative; }
.eas-st-mid-canvas { width:100%; height:300px; overflow:hidden; position:relative; }
.eas-st-mid-footer { padding:15px 56px; display:flex; align-items:baseline; gap:16px; background:var(--eas-linen); border-top:1px solid var(--eas-rule); }
.eas-st-mid-num { font-family:'Playfair Display',serif; font-size:11px; font-style:normal; color:var(--eas-accent); flex-shrink:0; }
.eas-st-mid-cap { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:1.2px; color:var(--eas-ink-3); line-height:1.6; }

.eas-st-clay-rule { height:1px; border:none; background:linear-gradient(to right,transparent,var(--eas-clay-sm) 20%,var(--eas-clay-md) 50%,var(--eas-clay-sm) 80%,transparent); margin:52px 0; }

.eas-st-tags { margin-top:56px; padding-top:32px; border-top:1px solid var(--eas-rule); }
.eas-st-tags-label { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--eas-ink-4); margin-bottom:14px; display:block; }
.eas-st-tags-wrap { display:flex; flex-wrap:wrap; gap:8px; }
.eas-st-tag { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:6px 14px; border:1px solid var(--eas-rule); color:var(--eas-ink-3); cursor:pointer; transition:color .18s,border-color .18s,background .18s; }
.eas-st-tag:hover,.eas-st-tag.eas-st-tag-hi { color:var(--eas-accent); border-color:var(--eas-accent-md); background:var(--eas-accent-xs); }

/* ── SIDEBAR — 8 components ───────────────────────────────────────── */
.eas-st-sidebar { padding:72px 0 72px 36px; position:sticky !important; top:80px; align-self:start; }

/* Universal sidebar component label */
.eas-st-sb-label { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:3px; text-transform:uppercase; color:var(--eas-ink-4); display:block; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--eas-rule); }

/* Universal link style for sidebar */
.eas-st-sb-link { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--eas-accent); display:inline-flex; align-items:center; gap:8px; transition:gap .18s; }
.eas-st-sb-link:hover { gap:14px; }

/* C1: Journey Match Card */
.eas-st-sb-journey { border-top:3px solid var(--eas-accent); background:var(--eas-paper); padding:22px; margin-bottom:3px; }
.eas-st-jc-type { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:2.5px; text-transform:uppercase; color:var(--eas-accent); margin-bottom:10px; }
.eas-st-jc-title { font-family:'Playfair Display',serif; font-size:18px; font-weight:500; color:var(--eas-ink); line-height:1.22; margin-bottom:10px; letter-spacing:-.01em; }
.eas-st-jc-body { font-family:'Source Serif 4',serif; font-size:13px; color:var(--eas-ink-3); line-height:1.7; margin-bottom:18px; font-style:normal; }

/* C2: Itinerary Match — "The route in this journal" */
.eas-st-sb-itinerary { background:var(--eas-paper); border:1px solid var(--eas-rule); border-left:2px solid var(--eas-accent-md); padding:20px 22px; margin-bottom:3px; }
.eas-st-sbi-name { font-family:'Playfair Display',serif; font-size:16px; font-weight:500; color:var(--eas-ink); letter-spacing:-.01em; margin-bottom:12px; line-height:1.2; }
.eas-st-sbi-stops { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:14px; }
.eas-st-sbi-stop { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:1px; color:var(--eas-ink-3); }
.eas-st-sbi-arr { font-family:'Overpass Mono',monospace; font-size:8px; color:var(--eas-accent-md); margin:0 2px; }
.eas-st-sbi-nights { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:1.5px; color:var(--eas-ink-4); margin-bottom:14px; }

/* C3: Departure Intelligence — scarcity grounded in capacity */
.eas-st-sb-departure { background:var(--eas-linen); padding:20px 22px; margin-bottom:3px; }
.eas-st-sbd-next { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.eas-st-sbd-month { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--eas-ink); letter-spacing:-.02em; }
.eas-st-sbd-slots { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:1px; color:var(--eas-clay); text-align:right; line-height:1.5; }
.eas-st-sbd-circuit { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:1.5px; color:var(--eas-ink-3); margin-bottom:14px; }
.eas-st-sbd-divider { height:1px; background:var(--eas-rule); margin:14px 0; }
/* Offers — framed as insider intelligence, not a sale */
.eas-st-sbd-offer-kicker { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--eas-accent); display:block; margin-bottom:6px; }
.eas-st-sbd-offer-text { font-family:'Source Serif 4',serif; font-size:13px; font-style:normal; color:var(--eas-ink-2); line-height:1.6; margin-bottom:14px; display:block; }

/* C4: Seasonal Signal */
.eas-st-sb-season { background:var(--eas-paper); border:1px solid var(--eas-rule); padding:20px 22px; margin-bottom:3px; }
.eas-st-season-bar { height:4px; background:var(--eas-rule); position:relative; margin:10px 0 8px; border-radius:2px; }
.eas-st-season-peak { position:absolute; height:100%; background:var(--eas-accent); border-radius:2px; left:50%; width:25%; }
.eas-st-season-now { position:absolute; top:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:var(--eas-ink); border:2px solid var(--eas-paper); left:34%; }
.eas-st-season-meta { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:1px; color:var(--eas-ink-3); line-height:1.7; }
.eas-st-season-meta strong { color:var(--eas-accent); font-weight:400; }

/* C5: Guide Profile */
.eas-st-sb-guide { background:var(--eas-paper); border:1px solid var(--eas-rule); padding:20px 22px; margin-bottom:3px; }
.eas-st-guide-row { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.eas-st-guide-avatar { width:40px; height:40px; border:1px solid var(--eas-accent-md); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:13px; font-style:normal; color:var(--eas-accent); background:var(--eas-accent-xs); flex-shrink:0; }
.eas-st-guide-name { font-family:'Playfair Display',serif; font-size:15px; font-weight:500; color:var(--eas-ink); }
.eas-st-guide-spec { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--eas-accent); }
.eas-st-guide-note { font-family:'Source Serif 4',serif; font-size:12px; font-style:normal; color:var(--eas-ink-3); line-height:1.65; margin-bottom:12px; }

/* C6: Price Anchor */
.eas-st-sb-price { background:var(--eas-linen); padding:20px 22px; margin-bottom:3px; }
.eas-st-price-from { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--eas-ink-4); margin-bottom:6px; }
.eas-st-price-figure { font-family:'Playfair Display',serif; font-size:2.1rem; font-weight:700; color:var(--eas-ink); line-height:1; margin-bottom:4px; letter-spacing:-.02em; }
.eas-st-price-sub { font-family:'Source Serif 4',serif; font-size:12px; font-style:normal; color:var(--eas-ink-3); line-height:1.55; margin-bottom:16px; }
.eas-st-price-btn { display:block; text-align:center; font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:2.5px; text-transform:uppercase; background:var(--eas-ink); color:var(--eas-parchment); padding:12px 16px; transition:background .22s; }
.eas-st-price-btn:hover { background:var(--eas-accent); }

/* C7: Trust Signal (shortcode wrapper) */
.eas-st-sb-trust { background:var(--eas-paper); border:1px solid var(--eas-rule); padding:20px 22px; margin-bottom:3px; }
.eas-st-trust-quote { font-family:'Source Serif 4',serif; font-size:13px; font-style:normal; color:var(--eas-ink-2); line-height:1.65; margin-bottom:8px; }
.eas-st-trust-who { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:1px; color:var(--eas-ink-4); }

/* C8: Scroll-triggered Intent CTA */
.eas-st-sb-intent { padding:22px 0 0; border-top:1px solid var(--eas-rule); margin-top:4px; opacity:0; transform:translateY(8px); transition:opacity .5s var(--eas-ease),transform .5s var(--eas-ease); pointer-events:none; }
.eas-st-sb-intent.eas-st-visible { opacity:1; transform:none; pointer-events:auto; }
.eas-st-intent-copy { font-family:'Playfair Display',serif; font-size:15px; font-weight:400; font-style:normal; color:var(--eas-ink); line-height:1.42; margin-bottom:12px; }
.eas-st-intent-note { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:1.5px; color:var(--eas-ink-4); margin-bottom:14px; line-height:1.6; }
.eas-st-intent-btn { display:block; text-align:center; font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:2.5px; text-transform:uppercase; border:1px solid var(--eas-ink); color:var(--eas-ink); padding:12px 16px; transition:all .22s var(--eas-ease); }
.eas-st-intent-btn:hover { background:var(--eas-accent); border-color:var(--eas-accent); color:var(--eas-paper); }

/* ── ZONE 4: AUTHOR BAND ─────────────────────────────────────────── */
.eas-st-author-band { background:var(--eas-linen); border-top:1px solid var(--eas-rule); border-bottom:1px solid var(--eas-rule); }
.eas-st-author-inner { max-width:1280px; margin:0 auto; padding:64px 48px; display:grid !important; grid-template-columns:148px 1fr 272px; align-items:center; }
.eas-st-author-left { padding-right:32px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.eas-st-author-lbl { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:3px; text-transform:uppercase; color:var(--eas-accent); }
.eas-st-author-av { width:72px; height:72px; border:1px solid var(--eas-accent-md); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:22px; font-style:normal; color:var(--eas-accent); background:var(--eas-accent-xs); }
.eas-st-author-body { padding:0 56px 0 0; border-right:1px solid var(--eas-rule); }
.eas-st-author-name { font-family:'Playfair Display',serif; font-size:24px; font-weight:400; font-style:normal; color:var(--eas-ink); margin-bottom:4px; }
.eas-st-author-role { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--eas-accent); margin-bottom:16px; }
.eas-st-author-bio { font-family:'Source Serif 4',serif; font-size:14px; font-weight:300; color:var(--eas-ink-2); line-height:1.82; }
.eas-st-author-right { padding-left:48px; }
.eas-st-author-qte { font-family:'Playfair Display',serif; font-size:16px; font-style:normal; font-weight:400; color:var(--eas-ink-2); line-height:1.55; border-left:2px solid var(--eas-accent); padding-left:20px; }

/* ── ZONE 5: RELATED — editorial card grid ────────────────────────── */
.eas-st-related-section { background:var(--eas-parchment); border-bottom:1px solid var(--eas-rule); }
.eas-st-related-inner { max-width:1280px; margin:0 auto; padding:80px 48px; }
.eas-st-sec-head { display:flex; align-items:center; gap:24px; margin-bottom:48px; }
.eas-st-sec-cap { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:3px; text-transform:uppercase; color:var(--eas-ink-4); white-space:nowrap; }
.eas-st-sec-rule { flex:1; height:1px; background:var(--eas-rule); }

.eas-st-related-grid { display:grid !important; grid-template-columns:repeat(3,1fr); gap:2px; }
.eas-st-rcard { background:var(--eas-paper); display:flex; flex-direction:column; overflow:hidden; cursor:pointer; border-top:2px solid transparent; transition:border-top-color .28s var(--eas-ease); }
.eas-st-rcard:hover { border-top-color:var(--eas-accent); }
.eas-st-rcard-img { height:218px; position:relative; overflow:hidden; flex-shrink:0; }
.eas-st-rcard-img-bg { position:absolute; inset:0; transition:transform .45s var(--eas-ease); }
.eas-st-rcard:hover .eas-st-rcard-img-bg { transform:scale(1.05); }
.eas-st-rcard-kicker { display:flex; align-items:center; justify-content:space-between; padding:14px 24px 0; }
.eas-st-rcard-cat { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:2.5px; text-transform:uppercase; color:var(--eas-accent); }
.eas-st-rcard-meta { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:.5px; color:var(--eas-ink-4); display:flex; align-items:center; gap:8px; }
.eas-st-rcard-meta-dot { color:var(--eas-rule); }
.eas-st-rcard-body { padding:16px 24px 28px; flex:1; display:flex; flex-direction:column; }
.eas-st-rcard-title { font-family:'Playfair Display',serif; font-size:20px; font-weight:500; color:var(--eas-ink); line-height:1.22; letter-spacing:-.01em; flex:1; margin-bottom:12px; transition:color .18s; }
.eas-st-rcard:hover .eas-st-rcard-title { color:var(--eas-accent); }
.eas-st-rcard-deck { font-family:'Source Serif 4',serif; font-size:13px; font-style:normal; color:var(--eas-ink-3); line-height:1.65; margin-bottom:16px; }
.eas-st-rcard-authority { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--eas-rule-2); }
.eas-st-rcard-read { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:1px; color:var(--eas-ink-4); }
.eas-st-rcard-arrow { font-family:'Overpass Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--eas-accent); opacity:0; transform:translateX(-8px); transition:opacity .2s,transform .2s; display:inline-flex; align-items:center; gap:6px; }
.eas-st-rcard:hover .eas-st-rcard-arrow { opacity:1; transform:none; }

/* ── ZONE 6: FOOTER CTA ──────────────────────────────────────────── */
.eas-st-footer-cta { background:var(--eas-parchment); padding:110px 48px; position:relative; }
.eas-st-fcta-ghost { display:none; }
.eas-st-fcta-inner { max-width:820px; position:relative; z-index:1; }
.eas-st-root .eas-st-fcta-pre { font-family:'Overpass Mono',monospace !important; font-size:9px !important; letter-spacing:4px; text-transform:uppercase; color:var(--eas-accent) !important; margin-bottom:28px; display:flex; align-items:center; gap:16px; }
.eas-st-root .eas-st-fcta-pre::after { content:''; flex:1; height:1px; background:var(--eas-clay-sm); max-width:120px; }
.eas-st-root .eas-st-fcta-title { font-family:'Playfair Display',serif !important; font-size:clamp(42px,6vw,84px) !important; font-weight:700 !important; line-height:.92 !important; color:var(--eas-ink) !important; letter-spacing:-.04em; margin-bottom:32px; }
.eas-st-root .eas-st-fcta-title em { font-style:normal !important; font-weight:400 !important; color:var(--eas-accent) !important; }
.eas-st-root .eas-st-fcta-body { font-family:'Source Serif 4',serif !important; font-size:17px !important; font-weight:300 !important; font-style:normal !important; color:var(--eas-ink-2) !important; max-width:520px; line-height:1.72; margin-bottom:48px; }
.eas-st-fcta-actions { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.eas-st-fcta-btn { font-family:'Overpass Mono',monospace; font-size:10px; letter-spacing:3px; text-transform:uppercase; background:var(--eas-ink); color:var(--eas-paper) !important; padding:18px 52px; border:2px solid var(--eas-ink); transition:all .25s var(--eas-ease); }
.eas-st-fcta-btn:hover { background:var(--eas-accent); border-color:var(--eas-accent); }
.eas-st-root .eas-st-fcta-ghost-btn { font-family:'Source Serif 4',serif !important; font-size:14px !important; font-style:normal !important; color:var(--eas-ink-3) !important; border-bottom:1px solid var(--eas-rule); padding-bottom:2px; transition:color .2s; }
.eas-st-root .eas-st-fcta-ghost-btn:hover { color:var(--eas-accent) !important; }
.eas-st-root .eas-st-fcta-note { margin-top:18px; font-family:'Overpass Mono',monospace !important; font-size:8px !important; letter-spacing:1.5px; color:var(--eas-ink-4) !important; }

/* ── Footer bar ────────────────────────────────────────────────────── */
.eas-st-fbar { background:var(--eas-ink); padding:22px 48px; display:flex; align-items:center; justify-content:space-between; }
.eas-st-fbar-logo { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(246,241,233,.32); }
.eas-st-fbar-links { display:flex; gap:28px; }
.eas-st-fbar-links a { font-family:'Overpass Mono',monospace; font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(246,241,233,.22); transition:color .18s; }
.eas-st-fbar-links a:hover { color:rgba(246,241,233,.6); }

/* ── Foxiz visual header suppression on single posts ─────────────── */
.single .site-header,
.single .rb-header,
.single #masthead,
.single .eas-progress-bar { display:none !important; }

/* ─────────────────────────────────────────────────────────────────────
   EAS SINGLE POST — CSS PATCH · May 2026
───────────────────────────────────────────────────────────────────── */

/* ── FIX 1: Watermark — fully hidden on live site ────────────────── */
.eas-st-root .eas-st-title-wm {
    display: none !important;
}

/* ── FIX 2: Foxiz visual header + footer CSS suppression ─────────── */
.single .rb-header,
.single #site-header,
.single .rb-site-header,
.single .foxiz-header,
.single #rb-header,
.single [class*="rb-header"],
.single [id*="foxiz-header"] {
    display: none !important;
}
.single .rb-footer,
.single #site-footer,
.single .rb-site-footer,
.single .foxiz-footer,
.single #rb-footer,
.single [class*="rb-footer"],
.single [id*="foxiz-footer"] {
    display: none !important;
}
.single #wpadminbar { display: block !important; }

/* ── FIX 3: Body text justify ────────────────────────────────────── */
.eas-st-root .eas-st-copy p,
.eas-st-root .eas-st-copy > p {
    text-align: justify !important;
    text-justify: inter-word;
}

/* ── FIX 4: Margin column z-index — prevents vertical text bleed ── */
.eas-st-root .eas-st-magazine-body {
    position: relative;
}
.eas-st-root .eas-st-margin-col {
    z-index: 0 !important;
    position: sticky !important;
    top: 80px;
    align-self: start;
}
.eas-st-root .eas-st-copy {
    position: relative;
    z-index: 1;
}
.eas-st-root .eas-st-sidebar {
    z-index: 0;
    position: sticky !important;
    top: 80px;
    align-self: start;
}

/* ── FIX 5: Foxiz TOC block residual layout removal ─────────────── */
.eas-st-root .rb-toc,
.eas-st-root .foxiz-toc,
.eas-st-root [class*="rb-toc"],
.eas-st-root [class*="foxiz-toc"] {
    display: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   EAS SINGLE POST — MOBILE RESPONSIVE BREAKPOINTS · May 2026
   APPEND to END of eas-single-post.css — do not modify rules above
────────────────────────────────────────────────────────────────────────── */

/* ── 1024px: collapse margin column, adjust grids ─────────────────────── */
@media (max-width: 1024px) {

  /* ZONE 5 — Margin column hidden */
  .eas-st-margin-col {
    display: none !important;
  }

  /* Magazine body: content + sidebar only */
  .eas-st-magazine-body {
    grid-template-columns: 1fr 248px !important;
    padding: 0 32px !important;
  }

  /* Author band: avatar + body, no quote column */
  .eas-st-author-inner {
    grid-template-columns: 100px 1fr !important;
    padding: 48px 32px !important;
  }
  .eas-st-author-right { display: none !important; }
  .eas-st-author-body  { border-right: none !important; padding-right: 0 !important; }
}

/* ── 768px: full mobile — single column, reduced padding ──────────────── */
@media (max-width: 768px) {

  /* ZONE 1 — Nav: brand left, Begin right, left links hidden */
  .eas-st-nav {
    grid-template-columns: 1fr auto !important;
    padding: 0 20px !important;
    height: 56px !important;
  }
  .eas-st-nav-left { display: none !important; }
  .eas-st-nav-center {
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
    text-align: left !important;
  }
  .eas-st-nav-right { gap: 12px !important; }
  .eas-st-nav-right a:not(.eas-st-nav-begin) { display: none !important; }

  /* ZONE 2 — Magazine: single column, no sidebar */
  .eas-st-magazine-body {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
  }
  .eas-st-margin-col { display: none !important; }
  .eas-st-sidebar    { display: none !important; }

  /* ZONE 3 — Masthead */
  .eas-st-masthead { padding: 24px 20px !important; }
  .eas-st-issue-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 14px 0 !important;
  }
  .eas-st-title-block { padding: 32px 0 0 !important; }
  .eas-st-root .eas-st-h1 {
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
  }
  .eas-st-deck-bar {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px 0 36px !important;
  }
  .eas-st-deck { font-size: 1rem !important; }
  .eas-st-title-meta { align-items: flex-start !important; }
  .eas-st-meta-author-row { justify-content: flex-start !important; }
  .eas-st-meta-name, .eas-st-meta-role, .eas-st-meta-details { text-align: left !important; }

  /* ZONE 4 — Photo band */
  .eas-st-photo-band {
    height: clamp(240px, 56vw, 360px) !important;
    margin-top: 0 !important;
  }
  .eas-st-photo-caption-bar {
    padding: 10px 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* ZONE 6 — Body copy */
  .eas-st-copy {
    padding: 48px 20px 64px !important;
    border-right: none !important;
  }
  .eas-st-root .eas-st-copy p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }
  .eas-st-pull-quote  { margin: 40px 0 !important; padding: 40px 20px !important; }
  .eas-st-field-note  { margin: 32px 0 !important; }
  .eas-st-mid-image   { margin: 40px 0 !important; }
  .eas-st-mid-canvas  { height: 220px !important; }

  /* ZONE 7 — Footer CTA */
  .eas-st-footer-cta { padding: 48px 24px !important; }
  .eas-st-root .eas-st-fcta-title {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }
  .eas-st-fcta-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .eas-st-fcta-btn {
    text-align: center !important;
    padding: 16px 24px !important;
  }

  /* Author band mobile */
  .eas-st-author-inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 40px 20px !important;
  }
  .eas-st-author-left  { flex-direction: row !important; align-items: center !important; padding-right: 0 !important; }
  .eas-st-author-body  { padding: 0 !important; border-right: none !important; }
  .eas-st-author-right { display: none !important; }

  /* Related grid mobile */
  .eas-st-related-inner { padding: 48px 20px !important; }
  .eas-st-related-grid  { grid-template-columns: 1fr !important; }

  /* Footer bar mobile */
  .eas-st-fbar {
    flex-direction: column !important;
    gap: 14px !important;
    padding: 20px !important;
    text-align: center !important;
  }
  .eas-st-fbar-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }
}

/* BLOG-EDITOR-ROUND-2 Stage 1: elements the new editor writes. Scoped to classes the editor adds, so existing posts
   (which never carry these classes) render exactly as before. */
.eas-st-copy mark.eas-hl { background: rgba(184,120,10,.25); color: inherit; padding: 0 2px; }
.eas-st-copy blockquote.eas-pull-quote { margin: 56px 0; padding: 48px 40px; background: var(--eas-linen); text-align: center; border: 0; font-family: 'Playfair Display', serif; font-style: normal; color: var(--eas-ink); }
.eas-st-root .eas-st-copy blockquote.eas-pull-quote p { font-family: 'Playfair Display', serif !important; font-size: clamp(21px, 2.6vw, 32px) !important; line-height: 1.35 !important; font-weight: 400 !important; text-align: center !important; margin: 0 0 12px !important; color: var(--eas-ink) !important; letter-spacing: -.01em; }
.eas-st-root .eas-st-copy blockquote.eas-pull-quote p:last-child { margin-bottom: 0 !important; }

/* BLOG-EDITOR-ROUND-2 stage 2: video block (built by BlogPostTemplate from a provider and id, responsive 16:9). */
.eas-st-copy figure.eas-video { margin: 40px 0; }
.eas-st-copy figure.eas-video .eas-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1C1A14; }
.eas-st-copy figure.eas-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.eas-st-copy figure.eas-video figcaption { font-size: 14px; color: var(--eas-ink-soft, rgba(26,15,6,.6)); margin-top: 10px; }

/* eas-single-post-seal.css */
/* ─────────────────────────────────────────────────────────────────────
   EAS SINGLE POST — FINAL SEAL PATCH
   APPEND to END of eas-single-post.css — do not replace anything
   Fixes: sticky sidebar, intent CTA overlay, header/footer, TOC
───────────────────────────────────────────────────────────────────── */


/* ── FIX 1: STICKY SIDEBAR ROOT CAUSE ───────────────────────────────────
   overflow-x:hidden on a parent creates a formatting context that kills
   position:sticky in every browser. Switch to overflow-x:clip which
   clips overflow visually without creating a formatting context.
   This is the single fix that unlocks sticky for margin col + sidebar.
───────────────────────────────────────────────────────────────────────── */
.eas-st-root {
    overflow-x: clip !important; /* replaces hidden — sticky now works */
}

/* Sidebar sticky — correct top values for both admin-bar states */
.eas-st-root .eas-st-sidebar {
    position: sticky !important;
    top: 76px;           /* our nav height */
    align-self: start !important;
    overflow-y: visible;
    max-height: none;
}
.admin-bar .eas-st-root .eas-st-sidebar {
    top: 108px;          /* nav + WP admin bar (32px) */
}

/* Margin column sticky — same offsets */
.eas-st-root .eas-st-margin-col {
    position: sticky !important;
    top: 76px;
    align-self: start !important;
}
.admin-bar .eas-st-root .eas-st-margin-col {
    top: 108px;
}

/* Magazine body must not clip children */
.eas-st-root .eas-st-magazine-body {
    overflow: visible !important;
}


/* ── FIX 2: INTENT CTA — in-sidebar card, always relative ───────────────
   Sits inside sticky sidebar. Animates in at 55% scroll depth.
   Dismissible via × button — state persisted in sessionStorage.
───────────────────────────────────────────────────────────────────────── */
.eas-st-sb-intent {
    position: relative !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
    background: var(--eas-paper) !important;
    border: 1px solid var(--eas-rule) !important;
    border-top: 3px solid var(--eas-accent) !important;
    box-shadow: 0 12px 40px rgba(30,26,21,.16) !important;
    padding: 22px 22px 20px !important;
    margin-top: 24px !important;
    bottom: auto !important;
    right: auto !important;
    z-index: auto !important;
}
.eas-st-sb-intent.eas-st-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}
.eas-st-sb-intent.eas-st-dismissed {
    display: none !important;
}
.eas-st-sb-intent-close {
    position: absolute;
    top: 10px; right: 14px;
    font-size: 16px;
    color: var(--eas-ink-4);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}


/* ── FIX 3: SUPPRESS FOXIZ HEADER + FOOTER ONLY ─────────────────────────
   Targets Foxiz/rb-* elements only. #eas-header and #eas-footer are the
   EAS custom nav/footer loaded via get_header()/get_footer() in single.php
   and must render — they are intentionally excluded from this list.
───────────────────────────────────────────────────────────────────────── */
.single #rb-header,
.single .rb-header,
.single #rb-footer,
.single .rb-footer,
.single .site-header,
.single .site-footer,
.single #foxiz-header,
.single #foxiz-footer,
.single [class*="rb-header"],
.single [class*="rb-footer"] {
    display: none !important;
}
/* Always keep WP admin bar */
.single #wpadminbar { display: flex !important; }


/* ── FIX 4: TOC CSS SUPPRESSION ─────────────────────────────────────────
   Belt-and-braces alongside the PHP content filter in functions.php.
   Catches any TOC block that survives the PHP strip.
───────────────────────────────────────────────────────────────────────── */
.eas-st-root .rb-toc,
.eas-st-root .foxiz-toc,
.eas-st-root .wp-block-foxiz-toc,
.eas-st-root [class*="rb-toc"],
.eas-st-root [class*="foxiz-toc"] {
    display: none !important;
}


/* ── FIX 5: NAV TOP OFFSET FOR ADMIN BAR ────────────────────────────────
   Our fixed nav sits at top:0. When admin bar present it needs offset.
───────────────────────────────────────────────────────────────────────── */
.admin-bar .eas-st-nav {
    top: 32px !important;
}


/* ── FIX 6: WATERMARK — FULLY REMOVED ───────────────────────────────────
   Real post images have dark areas where any opacity is visible.
───────────────────────────────────────────────────────────────────────── */
.eas-st-root .eas-st-title-wm {
    display: none !important;
}


/* ── FIX 7: BODY TEXT JUSTIFY (redundant belt-and-braces) ───────────────
───────────────────────────────────────────────────────────────────────── */
.eas-st-root .eas-st-copy p,
.eas-st-root .eas-st-copy > p {
    text-align: justify !important;
    text-justify: inter-word;
}


/* ── FIX 8: GUTENBERG CONTENT HEADING TYPOGRAPHY ────────────────────────
   eas-single-post.css surgical reset (line 66) sets font-weight:inherit
   on all h1–h4 inside .eas-st-root. The root has font-weight:300, so
   every Gutenberg h2/h3/h4 inside .eas-st-copy renders at 300 — identical
   to body text. These rules restore editorial weight for article headings.
───────────────────────────────────────────────────────────────────────── */
.eas-st-copy h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem) !important;
    font-weight: 600 !important;
    color: var(--eas-ink) !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em;
    margin-top: 56px !important;
    margin-bottom: 20px !important;
}
.eas-st-copy h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.15rem, 2.1vw, 1.6rem) !important;
    font-weight: 500 !important;
    color: var(--eas-ink) !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em;
    margin-top: 40px !important;
    margin-bottom: 16px !important;
}
.eas-st-copy h4 {
    font-family: 'Overpass Mono', monospace !important;
    font-size: .75rem !important;
    font-weight: 400 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--eas-accent) !important;
    margin-top: 32px !important;
    margin-bottom: 12px !important;
}


/* ── FIX 9: POST CONTENT IMAGES — RESPONSIVE HEIGHT FIX ─────────────────
   Gutenberg adds width/height HTML attributes (e.g. width="1200" height="800")
   to all images for CLS prevention. eas-single-post.css has max-width:100%
   but no height:auto. On mobile, max-width caps the rendered width, but the
   HTML height attribute forces the full pixel height → image squishes to tiny.
   height:auto overrides the HTML attribute and lets the image scale naturally.
───────────────────────────────────────────────────────────────────────── */
.eas-st-root img {
    max-width: 100% !important;
    height: auto !important;
}
.eas-st-copy figure,
.eas-st-copy .wp-block-image {
    max-width: 100% !important;
}
.eas-st-copy figure img,
.eas-st-copy .wp-block-image img {
    width: 100% !important;
    height: auto !important;
}


/* ── FIX 11: TRANSPARENT HEADER OVER HERO — belt-and-braces ─────────────
   header.js adds is-transparent on body.single before first paint.
   body:has(.eas-header.is-transparent) removes padding-top in style.css.
   This rule is belt-and-braces for browsers with weak :has() support.
───────────────────────────────────────────────────────────────────────── */
body.single {
    padding-top: 0 !important;
}


/* ── FIX 1 (SESSION 2026-05-14): ADMIN BAR PUSHES #EAS-HEADER DOWN ──────
   WordPress adds margin-top:32px to <html> when logged in. The global
   #eas-header is position:fixed at top:0. Offset it down by the admin
   bar height so it still overlaps the hero for logged-in preview.
   Real visitors (logged out) are unaffected.
───────────────────────────────────────────────────────────────────────── */
body.admin-bar.single #eas-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar.single #eas-header {
        top: 46px; /* WP admin bar is 46px on mobile */
    }
}


/* ── FIX 3 (SESSION 2026-05-14): MOBILE FONT SIZE BELOW PHOTO BAND ───────
   Mobile rules in eas-single-post.css set deck + body copy to 1rem (16px).
   Luxury brand minimum: 17px. Seal override applied here.
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .eas-st-copy p,
    .eas-st-deck {
        font-size: 17px !important;
        line-height: 1.75 !important;
    }
}


/* ── FIX 4 (SESSION 2026-05-14): ACACIA SILHOUETTE CSS BELT-AND-BRACES ───
   SVG removed from single.php (primary fix). This CSS rule is a fallback
   in case the element is re-introduced without updating single.php.
───────────────────────────────────────────────────────────────────────── */
.eas-st-photo-flora {
    display: none !important;
}


/* FIX 5 (logo clip on mobile) removed 2026-10-13: it forced .eas-logo img to height:auto !important, which collapses the SVG logo (no intrinsic size) to 0x0 at <=768px. header.css/style.css size the logo. */


/* ── FIX 6 (SESSION 2026-05-14): RELATED POST TITLE WEIGHT ───────────────
   Root font-weight:300 can bleed into .eas-st-rcard-title via cascade.
   Force explicit Playfair weight on title and confirm excerpt stays light.
───────────────────────────────────────────────────────────────────────── */
.eas-st-related-section .eas-st-rcard-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 600 !important;
}
.eas-st-related-section .eas-st-rcard-deck {
    font-weight: 300 !important;
    font-size: 14px !important;
}


/* ── FIX 7 (SESSION 2026-05-14): SIDEBAR VISIBLE ON MOBILE ───────────────
   Base CSS hides sidebar at 768px. Journey CTA and departure cards are
   conversion elements — they must stack below content on mobile.
   position:static removes sticky so it flows normally in single-column grid.
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .eas-st-root .eas-st-sidebar {
        display: block !important;
        width: 100% !important;
        margin-top: 48px !important;
        padding: 0 20px 64px !important;
        position: static !important;
    }
}

/* eas-single-post-v2.css */
/* ────────────────────────────────────────────────────────────────────
   EAS SINGLE POST — v2 (blog-engine-final-fixes-v2 brief, Part A;
   revised by the "GENUINELY FINAL ROUND" brief, Parts A/B/C/D)

   Full design replacement for the old magazine-masthead template.
   Built to Mockups/blog-template-v2.html, with one disclosed
   substitution: the mockup's own <link> loads Fraunces + Manrope, but
   this app's real, currently-requested Google Fonts (confirmed in
   layout.tsx's own GOOGLE_FONTS_URL comment) are Cormorant Garamond +
   Jost only -- the exact same "a font referenced in CSS that was never
   actually loaded silently falls back to a generic font" bug this
   project's own BlogPostTemplate.tsx docblock already documents for
   Playfair Display. Rather than repeat that bug, or widen the site-wide
   font request for one template, this file uses the real, already-
   loaded pair: Cormorant Garamond standing in for Fraunces' display
   role, Jost standing in for Manrope's body role.

   GENUINELY FINAL ROUND (this revision) corrects the scope of the prior
   round's "replace the design" instruction: the macro layout (hero band,
   share row, 3-column body grid, Related-before-Author order, Final CTA
   presence) stays the v2 mockup's own structure -- but every COMPONENT's
   visual styling (sidebar module cards, Related Posts cards, the Final
   CTA block and button) is reverted to the REAL values extracted from
   the original WordPress template, `eas-single-post.css` (still loaded
   site-wide, `.eas-st-*` namespace, 652 lines, read in full this round --
   every property value cited in this file's own comments below is a
   real, confirmed value from that file, not a guess). Font-SIZE is the
   one property deliberately NOT carried over verbatim everywhere: this
   session's own sealed Phase-1 rule (16px minimum for flowing body/
   prose text, 13px minimum for short labels/meta/buttons, no
   exceptions) overrides the real original's own much smaller caption
   scale (that file used 8-12px extensively for labels and even some
   sentence-level sidebar copy) -- every non-size property (font-family,
   letter-spacing, text-transform, color, border, background, padding,
   corner radius) is carried over verbatim; only font-size is raised to
   whichever floor applies. See this round's own completion report for
   the full element-by-element audit of what was below the floor and is
   now fixed.

   All classes stay namespaced `eas-stv2-*` -- the old eas-single-post.css
   / eas-single-post-seal.css files are left in place (harmless, scoped
   to the old `eas-st-*` prefix, which this template no longer uses
   anywhere in its own class names, only as the real *source of values*
   documented in these comments).
───────────────────────────────────────────────────────────────────── */

/* EXPERIMENT (white post body). Revert = delete the next line (the var() fallbacks are the old cream values). */
.eas-stv2-root { --post-body-bg: #FFFFFF; --post-card-bg: #F6F0E4; }
.eas-stv2-root {
  background: #FAF7F0;
  color: #1C1A14;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
}
.eas-stv2-root * { box-sizing: border-box; }
.eas-stv2-disp { font-family: 'Cormorant Garamond', serif; }

/* ── HERO ───────────────────────────────────────────────────────── *
 * Part A, GENUINELY FINAL ROUND -- real, confirmed bug: the old
 * gradient (80% -> 10% -> transparent, with the 10% stop already
 * reached by the 50% mark) left the bottom third of the photo almost
 * fully exposed, exactly where the title/byline sit (hero uses
 * align-items:flex-end) -- illegible against a bright real photo
 * (confirmed against a real hippo/daylight-water hero image). Fixed
 * with a steeper, darker curve that stays near-opaque through the
 * bottom ~25% (where text actually sits) and only starts clearing
 * past the 65% mark, plus a real text-shadow on every hero text
 * element as a second, independent legibility layer -- so the text
 * stays readable even on an unusually bright/high-key photo the
 * gradient alone might not fully neutralize. */
.eas-stv2-hero {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.eas-stv2-hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
}
.eas-stv2-hero-photo-fade { animation: eas-stv2-hero-fade-in .6s ease both; }
@keyframes eas-stv2-hero-fade-in { from { opacity: .55; } to { opacity: 1; } }
.eas-stv2-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(8,6,3,0.95) 0%,
    rgba(8,6,3,0.90) 20%,
    rgba(8,6,3,0.68) 40%,
    rgba(8,6,3,0.32) 62%,
    rgba(8,6,3,0.06) 85%,
    rgba(8,6,3,0) 100%
  );
}
.eas-stv2-hero-inner {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  padding: 48px clamp(24px, 7vw, 100px) 40px;
  width: 100%;
}
.eas-stv2-kicker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.eas-stv2-kicker-line { width: 26px; height: 1px; background: #D98A4A; }
.eas-stv2-kicker-text {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #E8B87A;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.65);
}
.eas-stv2-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.1;
  margin: 0 0 14px;
  max-width: 880px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 6px 22px rgba(0,0,0,0.4);
  /* REAL, CONFIRMED FIX -- a global base rule (`h1, h2, h3, h4 {
     color: var(--ink) }`, no !important, but a DIRECT declaration on the
     element, which always beats an INHERITED value regardless of
     specificity) was silently overriding the white color this hero text
     needs to inherit from `.eas-stv2-hero-inner`, rendering the main
     title in dark ink against the hero photo -- a real legibility
     regression directly working against this round's own Part A goal,
     found only by checking the live computed color on staging, not
     visible from a screenshot alone at every photo brightness. Declaring
     color explicitly here (a class selector, (0,1,0)) beats the global
     rule's type-only selector (0,0,1) outright, no !important needed. */
  color: #FFFFFF;
}
.eas-stv2-h1-em { color: #E8B87A; font-style: normal; }
.eas-stv2-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  flex-wrap: wrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.eas-stv2-avatar {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  text-shadow: none;
}
.eas-stv2-byline-dot { opacity: 0.6; }

/* ── SHARE ROW ──────────────────────────────────────────────────── */
.eas-stv2-share {
  display: flex;
  gap: 10px;
  padding: 14px clamp(24px, 7vw, 100px);
  background: #F2EBD9;
}
/* Explicit font-family override -- without this, the OLD eas-single-
   post.css's own unscoped `.eas-st-pcap-link` rule (still loaded site-
   wide, scoped by class name only, not by any ancestor) would still win
   on that one property and silently fall back to a never-loaded
   'Overpass Mono' -- every OTHER property here already beats it on
   specificity (2 classes vs. 1), font-family was the one gap. */
.eas-stv2-share .eas-st-pcap-link {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid rgba(28,26,20,0.15);
  border-radius: 6px;
  cursor: pointer;
  color: #1C1A14;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: border-color .2s, background .2s;
}
.eas-stv2-share .eas-st-pcap-link:hover {
  border-color: #B8780A;
  background: rgba(184,120,10,0.06);
}

/* ── BODY GRID ──────────────────────────────────────────────────── *
 * Part C, GENUINELY FINAL ROUND -- real, recovered target: the
 * original WordPress template's own `.eas-st-magazine-body` used
 * `max-width:1280px; grid-template-columns:148px 1fr 272px;
 * padding:0 48px` with NO grid gap -- spacing came entirely from each
 * child column's own internal padding instead
   (`.eas-st-margin-col{padding-right:32px}`,
    `.eas-st-copy{padding:72px 56px 88px}`,
    `.eas-st-sidebar{padding:72px 0 72px 36px}`).
 * At >=1376px viewport this produces a real ~764px center grid track,
 * and (after `.eas-st-copy`'s own 56px+56px internal padding) a real
 * ~652px actual text measure -- the genuine original reading-column
 * width, well above this file's prior ~510px. Reproduced here exactly:
 * same 148/1fr/272 columns, same zero grid-gap, same per-column
 * padding values, carried over verbatim. */
.eas-stv2-body {
  background: var(--post-body-bg, transparent); box-shadow: 0 0 0 100vmax var(--post-body-bg, transparent); clip-path: inset(0 -100vmax);
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px clamp(20px, 6vw, 48px) 88px;
  display: grid;
  grid-template-columns: 176px 1fr 272px;
  gap: 0;
  align-items: start;
}
/* REAL, CONFIRMED BUG FIX -- found via Playwright, not guessed:
   ChapterNav.tsx returns null (renders nothing) whenever a post has no
   real <h2 id="..."> headings -- true for any short/un-chaptered post,
   confirmed live on a real test post. Grid columns were being claimed by
   DOM order, not identity: with the TOC absent, .eas-stv2-copy (the
   article) fell into the 148px column meant for the TOC -- crushing the
   entire article to one word per line -- and .eas-stv2-sidebar expanded
   into the 1fr column meant for the article, rendering 2.6x too wide.
   This is what read as "the sidebar is broken": the sidebar itself was
   fine, it was occupying the wrong grid cell. Fixed by giving all three
   regions an explicit column, independent of whether the TOC renders. */
.eas-stv2-toc { grid-column: 1; }
.eas-stv2-copy { grid-column: 2; }
.eas-stv2-sidebar { grid-column: 3; align-self: stretch; }
/* Below 1240px the left chapter list cannot fit beside the article and the sidebar: hide the list, never the article. */
@media (max-width: 1239px) {
  .eas-stv2-body { grid-template-columns: 1fr 272px; }
  .eas-stv2-toc { display: none; }
  .eas-stv2-copy { grid-column: 1; }
  .eas-stv2-sidebar { grid-column: 2; }
}
@media (max-width: 980px) {
  .eas-stv2-body { grid-template-columns: 1fr; padding: 32px clamp(20px, 6vw, 48px) 56px; }
  .eas-stv2-toc { display: none; }
  .eas-stv2-toc, .eas-stv2-copy, .eas-stv2-sidebar { grid-column: 1; }
}

.eas-stv2-toc {
  font-size: 13px;
  color: rgba(28,26,20,0.72); /* 6.9:1 on white */
  position: sticky;
  top: 104px; /* clears the 80px fixed header */
  align-self: start;
  padding-right: 24px;
  border-right: 1px solid rgba(28,26,20,0.10);
}
.eas-stv2-toc-label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(28,26,20,0.65); /* 5.4:1 on white, 5.1:1 on cream */
  margin-bottom: 10px;
}
.eas-stv2-toc-list { display: flex; flex-direction: column; gap: 9px; }
.eas-stv2-toc-item {
  color: inherit;
  text-decoration: none;
  display: flex;
  gap: 8px;
  transition: color .2s, padding-left .2s;
}
.eas-stv2-toc-item:hover { color: #B8780A; }
.eas-stv2-toc-num { color: rgba(28,26,20,0.65); font-variant-numeric: tabular-nums; }
/* Part B, GENUINELY FINAL ROUND -- real, NEW addition: a scroll-spy
   active-state highlight on the chapter nav. Never specified in the
   original mockup or the WordPress template -- this is new work, not a
   reversion. Driven by ChapterNav.tsx's own real IntersectionObserver;
   this class is toggled client-side as the reader scrolls. */
.eas-stv2-toc-item--active {
  color: #A25834;
  font-weight: 500;
  position: relative;
  padding-left: 10px;
}
.eas-stv2-toc-item--active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 3px;
  bottom: 3px;
  width: 2px;
  background: #A85C38;
}
.eas-stv2-toc-item--active .eas-stv2-toc-num { color: #A25834; }

.eas-stv2-copy {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(28,26,20,0.85);
  min-width: 0;
  padding: 0 56px;
  border-right: 1px solid rgba(28,26,20,0.08);
}
.eas-stv2-copy p { margin: 0 0 18px; }
.eas-stv2-copy h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 26px;
  margin: 36px 0 16px;
  color: #1C1A14;
}
.eas-stv2-copy blockquote {
  /* REAL, CONFIRMED FIX -- this project has a sealed, founder-ruled
     site-wide "no slanted text anywhere" constraint ("SITE-WIDE ITALIC
     BAN", style.css, 2026-07-11). Its own CSS selector only targets
     `em/i/cite/address/var/dfn/q` directly, so a bare `<blockquote>`
     with its own inline `font-style` isn't technically caught by that
     rule's selector -- but using italic here would still violate the
     rule's actual intent, found only by reading style.css's own
     docblock while sweeping for other site-wide collisions, not
     something the original request named. Removed; the left accent
     border + serif display font + muted color already carry the
     "editorial quote" character without slanting the text. */
  border-left: 3px solid #B8780A;
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-style: normal;
  color: #584738;
}
/* Images on the post are never rounded -- direct founder instruction,
   this session. Applies to every photo on the template, not just this
   one: see the matching fixes below on .eas-stv2-avatar and
   .eas-stv2-author-avatar (both circular placeholder bubbles standing
   in for a real photo slot) and the already-sharp .eas-stv2-rcard-img/
   .eas-stv2-sb-guide-avatar, which needed no change. */
.eas-stv2-copy img { max-width: 100%; border-radius: 0; height: auto; }

.eas-stv2-tags { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.eas-stv2-tags-label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(28,26,20,0.4);
  margin-right: 4px;
}
.eas-stv2-tag {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(28,26,20,0.06);
  color: rgba(28,26,20,0.65);
}

/* ── SIDEBAR MODULES ────────────────────────────────────────────── *
 * Part D.1, GENUINELY FINAL ROUND -- real, confirmed reversion: the
 * prior round's generic rounded-corner card (`border-radius:10px`,
 * plain `rgba(28,26,20,0.08)` hairline, no background) is replaced with
 * the real original's editorial block treatment -- sharp corners
 * (the original never uses border-radius on ANY sidebar module), a real
 * paper background (`--eas-paper` #FDFAF6, confirmed, vs. the prior
 * transparent card), a real hairline border (`--eas-rule`
 * rgba(30,26,21,.10)), and a real accent-colored edge marker (either a
 * top or left border in `--eas-accent`/`--eas-accent-md`, clay #A85C38
 * -- confirmed on `.eas-st-sb-journey` [top, 3px] and
 * `.eas-st-sb-itinerary` [left, 2px]) -- applied per real module type
 * via modifier classes BlogPostTemplate.tsx now passes in (see that
 * file's own comment on this). Card "title" text is the real editorial
 * headline treatment the original used for these (`.eas-st-jc-title`
 * 18px, `.eas-st-sbi-name` 16px, `.eas-st-guide-name` 15px -- all
 * Cormorant-style serif display headlines, never a small sans-serif
 * label as the prior round had it). */
.eas-stv2-sidebar { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-left: 36px; }
.eas-stv2-sb-card {
  padding: 20px 22px;
  background: var(--post-card-bg, #FDFAF6);
  border: 1px solid rgba(30,26,21,0.10);
}
.eas-stv2-sb-card--journey { border-top: 3px solid #A85C38; }
.eas-stv2-sb-card--itinerary { border-left: 2px solid rgba(168,92,56,0.32); }
.eas-stv2-sb-card--price { background: #EDE7DB; }
.eas-stv2-sb-card--departure { background: #EDE4D4; }
/* Real eyebrow label, confirmed against part-f2-ORIGINAL-wp-sidebar-
   mid.png -- every module in the real original sidebar carries a small-
   caps kicker ABOVE its own title/body ("SAFARI JOURNEY", "NEXT
   DEPARTURES", "SHORT RAINS ADVANTAGE", "BEST TIME TO TRAVEL"), not just
   a bare title as the prior round had it. Two real colors confirmed in
   that screenshot: a muted ink-brown for plain data/utility modules
   (Next Departures, Best Time to Travel) and the same clay accent as the
   card's own top/left border for editorial modules introducing prose
   (Safari Journey, Short Rains Advantage) -- the --accent modifier below
   is that second variant. 13px floor per this file's own sitewide label
   minimum (Part C), not the smaller size the real screenshot renders at. */
.eas-stv2-sb-label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28,26,20,0.45);
  margin-bottom: 8px;
}
.eas-stv2-sb-label--accent { color: #A25834; } /* rust text, 4.65:1 on the cream card (was #A85C38, 4.35:1) */
.eas-stv2-sb-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #1C1A14;
}
.eas-stv2-sb-guide-row { display: flex; gap: 10px; align-items: center; }
.eas-stv2-sb-guide-avatar {
  width: 44px; height: 44px; border-radius: 0;
  background: rgba(28,26,20,0.08);
  border: 1px solid rgba(168,92,56,0.32);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: rgba(28,26,20,0.72); flex-shrink: 0;
  object-fit: cover;
}
.eas-stv2-sb-guide-name { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 500; }
.eas-stv2-sb-guide-sub { font-size: 13px; color: rgba(28,26,20,0.5); }
.eas-stv2-sb-link {
  font-size: 13px; color: #A25834; text-decoration: none;
  display: inline-flex; margin-top: 8px;
}
.eas-stv2-sb-link:hover { text-decoration: underline; }
.eas-stv2-sb-body { font-size: 16px; line-height: 1.6; color: rgba(28,26,20,0.75); }
.eas-stv2-sb-quote {
  /* Site-wide "no slanted text anywhere" rule (style.css, 2026-07-11) --
     see the matching note on .eas-stv2-copy blockquote above. The real
     literal curly-quote marks already wrapping this text in JSX
     (&ldquo;...&rdquo;) plus the serif display font carry the "this is a
     quote" signal without italicizing it. */
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: normal;
  color: rgba(28,26,20,0.8);
  line-height: 1.4;
  margin: 0 0 8px;
}
.eas-stv2-sb-price-figure { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 500; margin: 2px 0; }
.eas-stv2-sb-price-sub { font-size: 13px; color: rgba(28,26,20,0.5); }
.eas-stv2-sb-price-btn {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 500;
  font-family: 'Jost', sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  background: #1C1A14; color: #FAF7F0; padding: 12px 16px; border-radius: 0; text-decoration: none;
  border: 2px solid #1C1A14;
}
.eas-stv2-sb-price-btn:hover { background: #2C3424; border-color: #2C3424; }
.eas-stv2-sb-season-bar { position: relative; height: 4px; background: rgba(28,26,20,0.08); border-radius: 2px; margin: 8px 0; }
.eas-stv2-sb-season-peak { position: absolute; top: 0; bottom: 0; background: rgba(168,92,56,0.4); border-radius: 2px; }
.eas-stv2-sb-season-now { position: absolute; top: -2px; width: 2px; height: 8px; background: #1C1A14; }
.eas-stv2-sb-departure-next { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0; }
.eas-stv2-sb-departure-month { font-family: 'Cormorant Garamond', serif; font-size: 20px; }
.eas-stv2-sb-departure-slots { font-size: 13px; color: rgba(28,26,20,0.5); text-align: right; }
.eas-stv2-sb-divider { height: 1px; background: rgba(28,26,20,0.08); margin: 10px 0; }

/* Scroll-triggered intent CTA -- CORRECTED AGAIN, this session: direct
   founder feedback confirmed the plain-hairline-divider treatment from
   the prior round (a literal copy of eas-single-post.css:323-329, which
   assumed this always sits directly below an already-boxed module in
   the same column) reads as un-styled/orphaned next to its sibling
   cards, since -- per the real, confirmed Payload-API finding logged in
   this file's history -- 0 of 117 real posts have any other module
   active, so this card is routinely the ONLY thing in the sidebar, with
   no "fellow card" above it to visually explain the bare hairline. Given
   the same paper-card box every sibling module already uses
   (`.eas-st-sb-journey`/`-itinerary`/`-departure`/`-season`/`-guide`/
   `-price`/`-trust`, all `background:var(--eas-paper)` or
   `--eas-linen`, `border`, `padding:20-22px`, confirmed in
   eas-single-post.css), so it now reads as one more card in the same
   family, not a different kind of element. The real original's own
   324px-era lesson is kept exactly where it still applies: the text
   itself stays the real original's values -- `.eas-st-intent-copy` is
   `font-weight:400` (NOT 500, the mismatch this round's feedback
   caught), Cormorant Garamond in this rebuild (Playfair Display is the
   OLD template's font, not used anywhere here), 13px label floor on the
   note/button (the real original's 8px is below this file's own Part C
   sweep floor). margin-top removed -- `.eas-stv2-sidebar`'s own flex
   `gap:14px` already spaces every card consistently, a second margin
   here would just double it. */
.eas-stv2-sb-intent {
  position: relative;
  padding: 20px 22px;
  background: #FDFAF6;
  border: 1px solid rgba(30,26,21,0.10);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.eas-stv2-sb-intent.eas-stv2-visible { opacity: 1; transform: none; pointer-events: auto; }
.eas-stv2-sb-intent-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: rgba(28,26,20,0.4); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px;
}
/* font-style: normal -- site-wide "no slanted text anywhere" rule
   (style.css, 2026-07-11), same as the two quote fixes above.
   `:not(.eas-stv2-sb-intent-note)` -- REAL, CAUGHT-BY-VERIFICATION fix:
   without it, this element+class selector's specificity (0,1,1) beats
   the plain single-class `.eas-stv2-sb-intent-note` rule below (0,1,0)
   regardless of source order, so the note <p> was silently inheriting
   this rule's 18px/serif/dark-ink values instead of its own 13px/Jost/
   muted ones -- confirmed via live computed-style inspection, not
   visible from a plain screenshot (the two text blocks sit close enough
   in tone that the wrong-size/wrong-font substitution didn't jump out
   until measured). */
.eas-stv2-sb-intent p:not(.eas-stv2-sb-intent-note) {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 400; line-height: 1.4;
  color: #1C1A14; margin: 0 24px 12px 0; font-style: normal;
}
.eas-stv2-sb-intent-note {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(28,26,20,0.5); margin-bottom: 14px; font-style: normal !important;
}
.eas-stv2-sb-intent-btn {
  display: block; text-align: center;
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: #1C1A14; padding: 14px 16px; border-radius: 0;
  border: 1px solid #1C1A14; text-decoration: none;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.eas-stv2-sb-intent-btn:hover { background: #A85C38; border-color: #A85C38; color: #FDFAF6; }

/* ── RELATED POSTS (rendered before Author Bio, Part D.2) ────────── *
 * Real, confirmed reversion: the original `.eas-st-related-grid` was a
 * flat 3-column grid with only a 2px gap (near edge-to-edge); each real
 * `.eas-st-rcard` had sharp corners, a 218px-tall image (vs. this
 * template's prior 110px), and revealed a real clay-colored top border
 * on hover (`border-top-color: var(--eas-accent)`) instead of a lift/
 * shadow. Card title used a real 20px serif headline, not a 12px
 * sans-serif label. */
.eas-stv2-related {
  padding: 40px clamp(24px, 7vw, 100px);
  background: var(--post-body-bg, #F2EBD9);
}
.eas-stv2-related-head { font-size: 22px; margin-bottom: 16px; }
.eas-stv2-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 14px;
}
@media (max-width: 780px) {
  .eas-stv2-related-grid { grid-template-columns: 1fr; gap: 16px; }
}
.eas-stv2-rcard {
  background: var(--post-card-bg, #FDFAF6);
  border-radius: 0;
  border-top: 2px solid transparent;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-top-color .28s ease;
}
.eas-stv2-rcard:hover { border-top-color: #A85C38; }
.eas-stv2-rcard-img {
  height: 218px;
  background: rgba(28,26,20,0.08);
  background-size: cover;
  background-position: center;
}
.eas-stv2-rcard-body { padding: 18px 16px; }
.eas-stv2-rcard-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.25;
}
.eas-stv2-rcard-meta { font-size: 13px; color: rgba(28,26,20,0.7); }

/* ── AUTHOR BIO (now after Related Posts) ───────────────────────── */
.eas-stv2-author {
  padding: 32px clamp(24px, 7vw, 100px);
  display: flex;
  gap: 16px;
  align-items: center;
}
.eas-stv2-author-avatar {
  width: 52px; height: 52px; border-radius: 0;
  background: rgba(28,26,20,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: rgba(28,26,20,0.72); flex-shrink: 0;
}
.eas-stv2-author-name { font-size: 13px; font-weight: 500; }
.eas-stv2-author-bio { font-size: 16px; line-height: 1.6; color: rgba(28,26,20,0.65); max-width: 700px; margin: 2px 0 0; }

/* ── FINAL CTA ────────────────────────────────────────────────────── *
 * CORRECTED, this session, for real this time: `PillarFinalCTA`/
 * `.btn-primary` (the previous round's source) is dead code -- grepped
 * the whole repo, it is defined in PillarPrimitives.tsx but imported
 * nowhere. The REAL, currently-live, sitewide Final CTA is the shared
 * `.eas-comp-final` family in eas-components.css (loaded globally via
 * layout.tsx -- already present on this page, no new stylesheet link
 * needed), used verbatim by Homepage.tsx ("Section 9 -- Final CTA, real
 * verbatim"), DestinationSingle.tsx, and DepartureSingle.tsx. No local
 * `.eas-stv2-cta*` CSS exists anymore for this reason -- the JSX below
 * now renders the real shared markup/classes directly
 * (`.eas-comp-final`/`__rotated`/`__grid`/`__eyebrow`/`__headline`/
 * `__sub`/`__action`/`__body`/`__btn`/`__btn-label`/`__secondary`),
 * exactly as DestinationSingle.tsx's own `FinalCta()` does, so this is
 * pixel-identical to every other page's closing section by construction,
 * not a re-derivation that can drift out of sync again. */

/* ── REAL, CONFIRMED FIX, corrected after a real specificity miscalc
   caught by live re-verification (the first attempt below this comment
   in git history still lost): a site-wide brand-font rule in style.css
   forces Jost on every <p>/<li>/<span> under any eas-* ancestor outside
   the OLD template's `.eas-st-root`, via THREE separate comma-joined
   branches with DIFFERENT specificities -- found only by inspecting the
   real CSSOM on the live deployed staging site, not visible from reading
   source:
     p/li branch: `[class*="eas-"] p:not([class*="-label"])
       :not([class*="__label"]):not(.eas-st-root *)` -- 3 `:not()`
       clauses -> specificity (0,4,1).
     span branch: `[class*="eas-"] span:not(.rb-):not(.eas-eyebrow-std)
       :not([class*="-label"]):not([class*="__label"]):not(.eas-st-root *)`
       -- 5 `:not()` clauses (two more than the p/li branch: `:not(.rb-)`
       and `:not(.eas-eyebrow-std)`) -> specificity (0,6,1), NOT (0,4,1).
   The first fix attempt here used the p/li branch's lower specificity
   for BOTH span-target fixes (h1-em, departure-month) and genuinely
   still lost in the real browser -- caught by re-querying the live
   CSSOM after deploying, not assumed fixed from the file diff alone.
   Corrected by using each element's REAL full ancestor chain (every
   real class between `.eas-stv2-root` and the target, several classes
   more than strictly needed, as real safety margin) plus `html body`
   prefixes for a small amount of real, truthful extra margin --
   deliberately not an exact tie with the site-wide rule's specificity,
   to avoid depending on source-order tie-break behavior at all. */
html body .eas-stv2-root .eas-stv2-hero .eas-stv2-hero-inner .eas-stv2-h1.eas-stv2-disp .eas-stv2-h1-em {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
html body .eas-stv2-root .eas-stv2-body .eas-stv2-sidebar .eas-stv2-sb-card .eas-stv2-sb-quote {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
html body .eas-stv2-root .eas-stv2-body .eas-stv2-sidebar .eas-stv2-sb-card .eas-stv2-sb-departure-next .eas-stv2-sb-departure-month.eas-stv2-disp {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
/* Same real site-wide Jost-forcing rule, a FOURTH instance -- caught by
   re-querying the live CSSOM on the real deployed intent card after
   this session's own font-weight fix, not assumed correct from the
   source diff. `.eas-stv2-sb-intent` carries "eas-" and its <p> child
   has neither a `-label`/`__label` class nor a `.eas-st-root` ancestor,
   so the site-wide rule's `!important` still won despite this file's
   own (non-!important) font-family declaration -- font-weight:400 held
   correctly since the site-wide rule doesn't touch that property, which
   is exactly why this one slipped past a plain visual check.
   `:not(.eas-stv2-sb-intent-note)` -- a second real bug caught in the
   SAME re-verification pass: without it, this override's own higher
   specificity would force Cormorant Garamond onto the note line too
   (which must stay Jost, matching its own base rule below), the exact
   same element+class-beats-single-class mistake just fixed on the base
   rule -- excluded here for the identical reason. */
html body .eas-stv2-root .eas-stv2-body .eas-stv2-sidebar .eas-stv2-sb-intent p:not(.eas-stv2-sb-intent-note) {
  font-family: 'Cormorant Garamond', serif !important;
}

/* ── REAL, CONFIRMED FIX (a second, distinct site-wide rule, found in the
   same live-CSSOM sweep as the one above): style.css also carries a
   heading-weight rule -- `[class*="eas-"] h1/h2/h3:not([class*="eas-
   comp-"]):not(.eas-st-root):not(.eas-st-root *) { ... font-weight: 300
   !important; ... }`, specificity (0,4,1) -- that silently forced this
   hero H1 down to font-weight 300 regardless of the 500 this rule
   explicitly asked for (and, before the color fix above this block, ALSO
   silently forced the H1's color to the global page-body ink tone instead
   of the white `.eas-stv2-hero-inner` means to supply, confirmed via the
   same live computed-style check -- not a hypothesis). Its font-family/
   font-style values happen to already match this rule's own intent (both
   Cormorant Garamond / normal), so only font-weight needed a targeted
   override here; its letter-spacing/line-height values differ only
   trivially (-0.01em / 1.15 vs this rule's 1.1) and are left as-is. */
html body .eas-stv2-root .eas-stv2-hero .eas-stv2-hero-inner .eas-stv2-h1.eas-stv2-disp {
  font-weight: 500 !important;
}

/* BLOG-EDITOR-ROUND-2 phase D fix: elements the new editor writes. Scoped to classes the editor adds, so existing posts
   (which never carry these classes) render exactly as before. */
.eas-stv2-copy mark.eas-hl { background: rgba(184,120,10,.25); color: inherit; padding: 0 2px; }
.eas-stv2-copy blockquote.eas-pull-quote { margin: 44px 0; padding: 40px 36px; background: #F4F1E9; border: 0; text-align: center; font-family: 'Cormorant Garamond', serif; font-style: normal; color: #1C1A14; }
.eas-stv2-copy blockquote.eas-pull-quote p { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; font-weight: 500; margin: 0 0 12px; color: #1C1A14; text-align: center !important; hyphens: none; }
.eas-stv2-copy blockquote.eas-pull-quote p:last-child { margin-bottom: 0; }

/* Tables in post bodies scroll inside their own box on phones and never widen the page. */
.eas-stv2-copy { min-width: 0; }
@media (max-width: 780px) {
  .eas-stv2-copy table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 2026-10-13 phone/tablet gutter: the 56px column padding was stacking on the 6vw body padding (79px a side at 390px, a 230px text column).
   At <=980px the body is one column, so the copy takes the body's own gutter (clamp(20px,6vw,48px), the same 23px the pillar pages use). */
@media (max-width: 980px) {
  .eas-stv2-copy { padding-left: 0; padding-right: 0; border-right: 0; }
  .eas-stv2-copy img, .eas-stv2-copy figure, .eas-stv2-copy iframe, .eas-stv2-copy video, .eas-stv2-copy .eas-video { max-width: 100%; }
  .eas-stv2-copy img { height: auto; }
  .eas-stv2-copy figure { margin-left: 0; margin-right: 0; }
}

/* eas-justify.css */
/* DEPARTURES-ITINERARY-EDITORS Part F: justified long-form text, not forced.
   - Only long paragraphs (blog body, itinerary overview and day narrative, departure About and day narrative,
     experience overview). Never headings, cards, captions, chips, tables or lists.
   - Only when the column is wide enough: left-aligned at 640px and below.
   - Never force the last line (text-align-last stays normal). hyphens: auto needs lang="en" on <html> (set in layout).
   - text-wrap: pretty where supported. A paragraph that still shows wide gaps can be left-aligned by adding
     the class eas-left to it. */
@media (min-width: 641px) {
  .eas-stv2-copy p,
  .eas-itin-page .eas-itin-overview-text,
  .eas-itin-page .eas-itin-day-text,
  .dp-about p,
  .dp-page .dp-day-text,
  .eas-justify {
    text-align: justify;
    text-justify: inter-word;
    text-align-last: auto;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
  }
  .eas-left { text-align: left !important; hyphens: manual; }
}
@media (max-width: 640px) {
  .eas-stv2-copy p,
  .eas-itin-page .eas-itin-overview-text,
  .eas-itin-page .eas-itin-day-text,
  .dp-about p,
  .dp-page .dp-day-text,
  .eas-justify {
    text-align: left;
    text-align-last: auto;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

/* cards-upgrade.css */
/* Card upgrade (site feedback brief, Phase 3). Source: Mockups/cards-upgrade.html.
   The itinerary card and the departure card share this one structure (.eas-uc). The platinum card keeps its own
   file of rules inside PlatinumCards.tsx. Loaded after every other stylesheet (see LIVE_CSS_FILES in layout.tsx). */

/* Lining numerals everywhere, so 11 reads 11 and not II in Cormorant. Jost and Manrope already draw lining figures,
   so nothing else changes. Inherited: an element that sets its own font-variant-numeric (tabular figures) keeps it. */
html { font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }

.eas-uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.eas-uc { display: block; background: #FFFFFF; border: 1px solid rgba(28,26,20,0.12); color: #1C1A14; text-decoration: none; overflow: hidden; }
.eas-uc *, .eas-uc { box-sizing: border-box; }

/* the photo is clear: the one small tag or chip is the only thing on it */
.eas-uc__img { position: relative; height: 230px; overflow: hidden; background: linear-gradient(160deg, #3F4F35 0%, #6B5A3E 100%); }
.eas-uc__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.eas-uc:hover .eas-uc__photo { transform: scale(1.04); }
.eas-uc__letter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 72px; color: rgba(250,247,240,0.55); }

.eas-uc__tag { position: absolute; top: 16px; left: 16px; z-index: 1; background: #FAF7F0; color: #1C1A14; font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 12px; }
.eas-uc__chip { position: absolute; top: 16px; right: 16px; z-index: 1; font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 12px; font-weight: 500; }
.eas-uc__chip--open { background: rgba(15,110,86,0.9); color: #FFFFFF; }
.eas-uc__chip--limited { background: #B8780A; color: #1C1A14; }
.eas-uc__chip--sold, .eas-uc__chip--closed { background: rgba(153,60,29,0.92); color: #FFFFFF; }

.eas-uc__body { padding: 22px 24px 24px; }
.eas-uc__eyebrow { font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #924F08; margin: 0 0 8px; }
.eas-uc__title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 28px; line-height: 1.15; color: #1C1A14; margin: 0 0 8px; }
.eas-uc__route { font-family: 'Jost', sans-serif; font-size: 15px; line-height: 1.5; color: rgba(28,26,20,0.62); margin: 0 0 18px; }
.eas-uc__date { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 26px; line-height: 1.1; color: #1C1A14; margin: 10px 0 0; }
.eas-uc__more { font-family: 'Jost', sans-serif; font-size: 14px; color: rgba(28,26,20,0.55); margin: 2px 0 16px; }
.eas-uc__date + .eas-uc__facts { margin-top: 16px; }
.eas-uc__more + .eas-uc__facts { margin-top: 0; }

.eas-uc__facts { display: flex; flex-wrap: wrap; gap: 14px 30px; border-top: 1px solid rgba(28,26,20,0.12); padding-top: 14px; }
.eas-uc__lbl { font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(28,26,20,0.5); }
.eas-uc__val { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 26px; line-height: 1.1; color: #1C1A14; margin-top: 2px; }

.eas-uc__link { display: inline-block; margin-top: 18px; font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: #1C1A14; border-bottom: 1px solid #1C1A14; padding-bottom: 2px; transition: color 0.2s ease, border-color 0.2s ease; }
.eas-uc:hover .eas-uc__link, .eas-uc:focus-visible .eas-uc__link { color: #924F08; border-color: #924F08; }

@media (max-width: 1100px) { .eas-uc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .eas-uc-grid { grid-template-columns: 1fr; gap: 20px; }
  .eas-uc__img { height: 220px; }
  .eas-uc__title { font-size: 26px; }
}

/* Homepage featured departure card (HTML built in src/lib/homeAvailabilityRender.ts): its layout is unchanged; the seat
   badge takes the same colours as the departure card's chip. */
.eas-departure-card .eas-offer-card__badge--open { background: rgba(15,110,86,0.9); color: #FFFFFF; }
.eas-departure-card .eas-offer-card__badge--limited { background: #B8780A; color: #1C1A14; }
.eas-departure-card .eas-offer-card__badge--sold, .eas-departure-card .eas-offer-card__badge--closed { background: rgba(153,60,29,0.92); color: #FFFFFF; }

/* A word value such as "Price on request" stays on one line in the homepage card's narrow From cell. */
.eas-departure-card .eas-offer-card__meta-v--text { white-space: nowrap; font-size: 17px; }

/* lead-card-family.css */
/* Lead card family (lead system phase 2b): one set of tokens for every card that asks a visitor for details.
   Rust line 4px, cream card, ink text. Members: .dp-reserve (departure Reserve card and mobile sheet),
   .dp-confirm-card, .eas-dl (itinerary, departure and article downloads), .eas-contact-card (contact form).
   The pop-up (phase 2d) uses the same tokens. Styles only: no words, fields or logic live here. */
:root {
  --lc-rust: #A85C38;
  --lc-card: #FDFAF6;
  --lc-ink: #1E1A15;
  --lc-close: #9E9690;
  --lc-edge: rgba(30,26,21,0.08);
  --lc-shadow: 0 6px 24px rgba(30,26,21,0.06);
}