/*
 * ============================================================
 * ENVIRO-SMART — Component Library  (es-components.css)
 * ============================================================
 *
 * QUICK REFERENCE
 * ───────────────────────────────────────────────────────────
 * TOKENS       : Use CSS vars anywhere — var(--gold), var(--green-dark)
 *
 * LAYOUT
 *   .es-section          Padded page section (white bg)
 *   .es-section-alt      Same but off-white bg
 *   .es-section-dark     Dark green bg, light text
 *   .es-wrap             Max-width 1200px centred container
 *   .es-container        Max-width 1040px centred container (text-heavy)
 *   .es-two-col          2-column grid (stacks on mobile)
 *   .es-three-col        3-column grid (stacks on mobile)
 *   .es-four-col         4-column grid (2-col tablet, 1-col mobile)
 *
 * TYPOGRAPHY
 *   .es-eyebrow          Small gold pill label above headings
 *   .es-section-label    Tiny all-caps green label above headings
 *   .es-lead             Larger intro paragraph
 *   .es-highlight        Gold-coloured inline text span
 *
 * BUTTONS
 *   .es-btn              Base button (must add modifier)
 *   .es-btn--primary     Gold filled CTA
 *   .es-btn--secondary   White ghost outline (for dark bgs)
 *   .es-btn--outline     Dark green outline (for light bgs)
 *   .es-btn--sm          Smaller button size
 *
 * CARDS
 *   .es-card             Plain white card, subtle border + shadow
 *   .es-card--problem    Red-topped alert card
 *   .es-card--result     Centred stat card with big number
 *   .es-card--feature    White card for features/benefits (icon + h3 + p)
 *
 * CALLOUTS
 *   .es-callout          Dark green box, gold heading, green text
 *   .es-science-box      Dark green gradient box with numbered steps
 *   .es-highlight-panel  Dark green centred panel, big gold number
 *
 * COMPARISON
 *   .es-comparison       2-col good/bad comparison grid
 *
 * TESTIMONIAL
 *   .es-testimonial      White card with green left border, quote style
 *
 * STATS
 *   .es-stats-row        Flex row of stat bubbles
 *   .es-stat             Individual stat: big gold number + label
 *
 * LISTS
 *   .es-check-list       Checkmark list with icon + strong title + desc
 *
 * MEDIA
 *   .es-video-grid       Auto-fit video embed grid
 *   .es-video-embed      Responsive 16:9 iframe wrapper
 *
 * ───────────────────────────────────────────────────────────
 * ── ADDITIONAL COMPONENTS ──────────────────────────
 *
 * HERO            .es-hero / .es-hero__inner / .es-hero--center / .es-hero--short
 * STEPS           .es-steps / .es-steps--horizontal / .es-step / .es-step__num
 * FAQ             .es-faq / .es-faq__item / .es-faq__q / .es-faq__a  (no JS!)
 * CTA BANNER      .es-cta-banner / .es-cta-banner--gold / .es-btn--lg
 * ICON BOX        .es-icon-box / --bordered / --dark / .es-icon-box__icon
 * NOTICES         .es-notice--success / --warning / --info / --error
 * INFO STRIP      .es-info-strip / .es-info-strip__item  (phone/email/location bar)
 * BADGES          .es-badge / --gold / --dark / --ribbon  (corner ribbon)
 * TABLE           .es-table-wrap / .es-table / tr.es-table--highlight
 * SPLIT           .es-split / .es-split--reverse / .es-split__img / .es-split__text
 *
 * ── MEDIA COMPONENTS ────────────────────────────────────────────
 *
 * YOUTUBE CARD    .es-yt-card / .es-yt-card--light
 *                 .es-yt-card__thumb / __play / __body / __label / __title / __desc
 *                 Thumbnail URL: https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg
 *
 * ARTICLE CARD    .es-article-card / .es-article-card--gold
 *                 .es-article-card__img-wrap / __header / __label / __title / __body / __cta
 *
 * PHOTO GALLERY   .es-gallery / .es-gallery--2col / .es-gallery--4col / .es-gallery--light
 *                 .es-gallery__item  (add data-caption="..." for hover caption + lightbox)
 *                 Lightbox auto-injected by gallery.js — desktop click to expand, mobile tap = nothing
 *
 * ───────────────────────────────────────────────────────────
 * IN GUTENBERG: Add class names in Block → Advanced → CSS class(es)
 * ============================================================
 */


/* ── Design Tokens ───────────────────────────────────────── */
:root {
    --green-dark:   #2a6b1f;
    --green-mid:    #3a8a2a;
    --green-light:  #4caf35;
    --green-bar:    #5cb85c;
    --green-deep:   #1e3d14;
    --gold:         #e8a020;
    --gold-dark:    #c8880e;
    --red:          #c0392b;
    --white:        #ffffff;
    --off-white:    #f8f9f5;
    --gray-light:   #f0f0ec;
    --gray-text:    #444444;
    --dark:         #1a1a1a;
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-pill:  999px;
    --shadow-sm:    0 2px 8px rgba(0,0,0,0.07);
    --shadow-md:    0 4px 20px rgba(0,0,0,0.10);
    --shadow-lg:    0 8px 32px rgba(0,0,0,0.14);
}


/* ── Layout ──────────────────────────────────────────────── */
.es-section {
    padding: 64px 24px;
    background: #ffffff;
}
.es-section-alt {
    padding: 64px 24px;
    background: var(--off-white);
}
.es-section-dark {
    padding: 64px 24px;
    background: var(--green-deep);
    color: #ffffff;
}
.es-section-dark .es-section-label { color: #81c784; }
.es-section-dark h2 { color: #ffffff; }
.es-section-dark .es-lead { color: #a5c8a0; }

.es-wrap {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.es-container {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.es-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
.es-three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
}
.es-four-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .es-four-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .es-section,
    .es-section-alt,
    .es-section-dark { padding: 44px 20px; }
    .es-two-col,
    .es-three-col,
    .es-four-col { grid-template-columns: 1fr; }
}


/* ── Typography ──────────────────────────────────────────── */
.es-eyebrow {
    display: inline-block;
    background: var(--gold);
    color: #1a1a1a;
    padding: 5px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.es-section-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green-mid);
    margin-bottom: 10px;
}
.es-lead {
    font-size: 1.1rem;
    color: #555555;
    line-height: 1.75;
    margin-bottom: 32px;
    max-width: 680px;
}
.es-highlight {
    color: var(--gold);
    font-style: normal;
}
h2 .es-highlight,
h1 .es-highlight { color: var(--green-dark); }


/* ── Buttons ─────────────────────────────────────────────── */
.es-btn {
    display: inline-block;
    padding: 13px 28px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.1s ease;
    line-height: 1.2;
}
.es-btn:hover { transform: translateY(-1px); }

.es-btn--primary {
    background: var(--gold);
    color: #1a1a1a !important;
    border-color: var(--gold);
}
.es-btn--primary:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    color: #1a1a1a !important;
}

.es-btn--secondary {
    background: transparent;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.5);
}
.es-btn--secondary:hover {
    border-color: #ffffff;
    color: #ffffff !important;
}

.es-btn--outline {
    background: transparent;
    color: var(--green-dark) !important;
    border-color: var(--green-dark);
}
.es-btn--outline:hover {
    background: var(--green-dark);
    color: #ffffff !important;
}

.es-btn--sm {
    padding: 8px 18px;
    font-size: 0.875rem;
}

.es-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}


/* ── Cards ───────────────────────────────────────────────── */
.es-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

/* Problem card — red top border */
.es-card--problem {
    border-top: 4px solid var(--red);
}
.es-card--problem h3 { color: var(--red); }
.es-card--problem p { font-size: 0.92rem; color: #666; margin-top: 6px; }

/* Result/stat card */
.es-card--result {
    text-align: center;
}
.es-card--result .es-card-num {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--green-dark);
    line-height: 1;
    margin-bottom: 6px;
}
.es-card--result .es-card-arrow {
    color: var(--green-light);
    font-weight: 700;
}
.es-card--result .es-card-label {
    font-size: 0.85rem;
    color: #777;
    font-weight: 500;
    margin-top: 6px;
}
.es-card--result .es-card-source {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 4px;
    font-style: italic;
}

/* Feature card — icon + heading + copy */
.es-card--feature .es-card-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
    display: block;
}
.es-card--feature h3 {
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 8px;
}
.es-card--feature p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.65;
}

/* Auto-fit result grid */
.es-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 36px 0;
}


/* ── Callouts ────────────────────────────────────────────── */
.es-callout {
    background: var(--green-dark);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    margin: 32px 0;
}
.es-callout h3 {
    color: var(--gold);
    font-size: 1.3rem;
    margin-bottom: 12px;
}
.es-callout p { color: #c8e6c9; line-height: 1.7; }

.es-science-box {
    background: linear-gradient(135deg, #1b4d13, var(--green-dark));
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 36px;
    margin: 36px 0;
}
.es-science-box h3 {
    color: var(--gold);
    font-size: 1.3rem;
    margin-bottom: 20px;
}
.es-steps { display: flex; flex-direction: column; gap: 14px; }
.es-step { display: flex; gap: 14px; align-items: flex-start; }
.es-step-num {
    background: var(--gold);
    color: #1a1a1a;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.es-step p { color: #c8e6c9; font-size: 0.95rem; line-height: 1.6; }
.es-step p strong { color: #ffffff; }

.es-highlight-panel {
    background: var(--green-dark);
    border-radius: var(--radius-lg);
    padding: 32px;
    color: #ffffff;
    text-align: center;
}
.es-highlight-panel .es-big-num {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 8px;
}
.es-highlight-panel p { color: #c8e6c9; font-size: 0.95rem; }

@media (max-width: 600px) {
    .es-callout,
    .es-science-box { padding: 24px 20px; }
}


/* ── Comparison ──────────────────────────────────────────── */
.es-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid #e0e0e0;
}
.es-comp-side { padding: 28px; }
.es-comp-side--bad  { background: #fdf3f3; border-right: 1px solid #e0e0e0; }
.es-comp-side--good { background: #f2fdf0; }
.es-comp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid;
}
.es-comp-side--bad  .es-comp-header { color: var(--red);        border-color: #f1a0a0; }
.es-comp-side--good .es-comp-header { color: var(--green-dark); border-color: #90c97e; }
.es-comp-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 0.93rem;
}
@media (max-width: 600px) {
    .es-comparison { grid-template-columns: 1fr; }
}


/* ── Testimonial ─────────────────────────────────────────── */
.es-testimonial {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 28px 28px 20px;
    box-shadow: var(--shadow-md);
    border-left: 5px solid var(--green-mid);
    position: relative;
}
.es-testimonial blockquote {
    font-size: 1rem;
    color: #444;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 16px;
}
.es-testimonial blockquote strong { font-style: normal; color: var(--dark); }
.es-testimonial-source {
    font-weight: 700;
    color: var(--green-dark);
    font-size: 0.9rem;
}
.es-testimonial-source span {
    display: block;
    color: #888;
    font-weight: 400;
    font-size: 0.82rem;
}


/* ── Stats row ───────────────────────────────────────────── */
.es-stats-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 48px;
    padding: 28px 0;
}
.es-stat { text-align: center; }
.es-stat-num {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    display: block;
}
.es-stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a5d6a7;
    margin-top: 4px;
    display: block;
}
/* On light backgrounds */
.es-stats-row--light .es-stat-label { color: #666; }


/* ── Check list ──────────────────────────────────────────── */
.es-check-list {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}
.es-check-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #ebebeb;
    font-size: 0.95rem;
}
.es-check-list li:last-child { border-bottom: none; }
.es-check-list .es-li-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.es-check-list .es-li-text strong {
    display: block;
    color: var(--dark);
    margin-bottom: 2px;
    font-size: 0.97rem;
}
.es-check-list .es-li-text { color: #666; font-size: 0.9rem; }


/* ── Video grid ──────────────────────────────────────────── */
.es-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 32px;
}
.es-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    overflow: hidden;
    border-radius: var(--radius-md);
}
.es-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.es-video-label {
    padding: 12px 16px;
    font-size: 0.88rem;
    font-weight: 600;
}
.es-video-label span {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.6;
}


/* ── Divider ─────────────────────────────────────────────── */
.es-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 40px 0;
}
.es-divider--gold { border-color: var(--gold); opacity: 0.4; }


/* ============================================================
   ADDITIONAL COMPONENTS  (appended)
   ============================================================ */


/* ── Hero Section ────────────────────────────────────────── */
/*
 * Usage:
 *   <div class="es-hero" style="background-image:url(your-image.jpg)">
 *     <div class="es-hero__inner">
 *       <span class="es-eyebrow">Eyebrow label</span>
 *       <h1>Big Headline Here</h1>
 *       <p class="es-lead">Supporting copy goes here.</p>
 *       <a href="#" class="es-btn es-btn--primary">Get a Free Quote</a>
 *       <a href="#" class="es-btn es-btn--secondary">Learn More</a>
 *     </div>
 *   </div>
 *
 * Modifiers:
 *   .es-hero--center   Centred text
 *   .es-hero--short    Shorter height (360px)
 */
.es-hero {
    position: relative;
    min-height: 520px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    color: #ffffff;
}
.es-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(26,56,16,0.82) 0%,
        rgba(26,56,16,0.55) 55%,
        rgba(26,56,16,0.25) 100%
    );
}
.es-hero--center::before {
    background: rgba(20,46,12,0.65);
}
.es-hero--short { min-height: 360px; }

.es-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 30px;
    max-width: 620px;
}
.es-hero--center .es-hero__inner {
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
}
.es-hero h1, .es-hero h2 {
    color: #ffffff;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.es-hero .es-lead {
    color: rgba(255,255,255,0.9);
    margin-bottom: 28px;
}
.es-hero .es-btn + .es-btn { margin-left: 12px; }

@media (max-width: 599px) {
    .es-hero { min-height: 420px; }
    .es-hero--short { min-height: 280px; }
    .es-hero .es-btn + .es-btn {
        margin-left: 0;
        margin-top: 10px;
    }
}


/* ── Process Steps (How It Works) ────────────────────────── */
/*
 * Usage:
 *   <ol class="es-steps">
 *     <li class="es-step">
 *       <div class="es-step__num">1</div>
 *       <div class="es-step__body">
 *         <h3>Step Title</h3>
 *         <p>Description of this step.</p>
 *       </div>
 *     </li>
 *   </ol>
 *
 * Modifier:
 *   .es-steps--horizontal   Side-by-side on desktop
 */
.es-steps {
    list-style: none;
    margin: 32px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.es-steps--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
}
.es-steps--horizontal .es-step {
    flex: 1;
    min-width: 180px;
    position: relative;
}
/* Connector line between horizontal steps */
.es-steps--horizontal .es-step + .es-step::before {
    content: '';
    position: absolute;
    top: 22px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--gold);
    opacity: 0.35;
    z-index: 0;
}

.es-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #ebebeb;
}
.es-step:last-child { border-bottom: none; }
.es-steps--horizontal .es-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    border-bottom: none;
}

.es-step__num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--green-dark);
    color: var(--gold);
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gold);
    position: relative;
    z-index: 1;
}
.es-step__body h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-dark);
}
.es-step__body p {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
}
.es-steps--horizontal .es-step__body { text-align: center; }

/* Dark background variant */
.es-section-dark .es-step { border-bottom-color: rgba(255,255,255,0.1); }
.es-section-dark .es-step__body h3 { color: #ffffff; }
.es-section-dark .es-step__body p   { color: rgba(255,255,255,0.7); }
.es-section-dark .es-step__num {
    background: var(--green-deep);
    border-color: var(--gold);
}

@media (max-width: 699px) {
    .es-steps--horizontal { flex-direction: column; }
    .es-steps--horizontal .es-step { align-items: flex-start; text-align: left; flex-direction: row; }
    .es-steps--horizontal .es-step + .es-step::before { display: none; }
    .es-steps--horizontal .es-step__body { text-align: left; }
}


/* ── FAQ Accordion ────────────────────────────────────────── */
/*
 * Usage (JS-free details/summary):
 *   <div class="es-faq">
 *     <details class="es-faq__item">
 *       <summary class="es-faq__q">Question goes here?</summary>
 *       <div class="es-faq__a"><p>Answer text goes here.</p></div>
 *     </details>
 *   </div>
 */
.es-faq {
    margin: 32px 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid #e0e0e0;
}
.es-faq__item {
    border-bottom: 1px solid #e0e0e0;
}
.es-faq__item:last-child { border-bottom: none; }

.es-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.97rem;
    color: var(--green-dark);
    list-style: none;
    user-select: none;
    background: #ffffff;
    transition: background 0.15s ease;
}
.es-faq__q::-webkit-details-marker { display: none; }
.es-faq__q:hover { background: var(--off-white); }

/* Chevron icon */
.es-faq__q::after {
    content: '\203A';
    font-size: 1.4rem;
    line-height: 1;
    color: var(--gold);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    transform: rotate(90deg);
}
details[open] > .es-faq__q::after {
    transform: rotate(270deg);
}
details[open] > .es-faq__q {
    background: var(--off-white);
    color: var(--green-dark);
}

.es-faq__a {
    padding: 0 22px 18px 22px;
    background: var(--off-white);
    font-size: 0.92rem;
    color: #555;
    line-height: 1.65;
}
.es-faq__a p:first-child { margin-top: 0; }
.es-faq__a p:last-child  { margin-bottom: 0; }


/* ── CTA Banner ───────────────────────────────────────────── */
/*
 * Usage:
 *   <div class="es-cta-banner">
 *     <div class="es-cta-banner__inner">
 *       <div class="es-cta-banner__text">
 *         <h2>Ready to get started?</h2>
 *         <p>Get your free no-obligation estimate today.</p>
 *       </div>
 *       <a href="/contact" class="es-btn es-btn--secondary es-btn--lg">Contact Us</a>
 *     </div>
 *   </div>
 *
 * Modifiers:
 *   .es-cta-banner--gold   Gold background instead of dark green
 */
.es-cta-banner {
    background: var(--green-dark);
    border: 4px solid var(--gold);
    padding: 40px 0;
    border-radius: 12px;
}
.es-cta-banner--gold {
    background: var(--gold);
    border-color: var(--green-dark);
}
.es-cta-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.es-cta-banner__text h2 {
    color: var(--gold) !important;
    margin: 0 0 8px;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
}
.es-cta-banner--gold .es-cta-banner__text h2 { color: var(--green-deep); }
.es-cta-banner__text p {
    color: rgba(255,255,255,0.85);
    margin: 0;
    font-size: 1rem;
}
.es-cta-banner--gold .es-cta-banner__text p { color: rgba(30,61,20,0.8); }
.es-btn--lg {
    padding: 14px 34px;
    font-size: 1rem;
}

@media (max-width: 699px) {
    .es-cta-banner__inner { flex-direction: column; text-align: center; }
}


/* ── Icon Box (Services / Features) ─────────────────────── */
/*
 * Usage:
 *   <div class="es-three-col">
 *     <div class="es-icon-box">
 *       <div class="es-icon-box__icon">
 *         <!-- SVG or emoji or text icon -->
 *         <svg ...></svg>
 *       </div>
 *       <h3>Service Name</h3>
 *       <p>Short description of this service or feature.</p>
 *       <a href="#" class="es-icon-box__link">Learn more &rsaquo;</a>
 *     </div>
 *   </div>
 *
 * Modifiers:
 *   .es-icon-box--bordered   Adds a border + hover lift
 *   .es-icon-box--dark       Dark green bg, light text
 */
.es-icon-box {
    padding: 24px 20px;
    text-align: center;
}
.es-icon-box--bordered {
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: #ffffff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.es-icon-box--bordered:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.es-icon-box--dark {
    background: var(--green-dark);
    border-radius: var(--radius-md);
    color: #ffffff;
}

.es-icon-box__icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    background: var(--off-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border: 2px solid var(--green-bar);
    color: var(--green-dark);
}
.es-icon-box--dark .es-icon-box__icon {
    background: var(--green-deep);
    border-color: var(--gold);
    color: var(--gold);
}
.es-icon-box svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}
.es-icon-box h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--green-dark);
}
.es-icon-box--dark h3 { color: var(--gold); }
.es-icon-box p {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 14px;
}
.es-icon-box--dark p { color: rgba(255,255,255,0.75); }
.es-icon-box__link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--green-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
    transition: color 0.15s ease;
}
.es-icon-box--dark .es-icon-box__link { color: var(--gold); }
.es-icon-box__link:hover { color: var(--gold); }


/* ── Notice / Alert Banners ──────────────────────────────── */
/*
 * Usage:
 *   <div class="es-notice es-notice--success">
 *     <strong>Done!</strong> Your message was sent successfully.
 *   </div>
 *
 * Types: --success  --warning  --info  --error
 */
.es-notice {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    border-left: 4px solid currentColor;
    margin: 16px 0;
}
.es-notice--success { background: #edf7ed; color: #2e7d32; }
.es-notice--warning { background: #fff8e1; color: #e65100; }
.es-notice--info    { background: #e3f2fd; color: #0277bd; }
.es-notice--error   { background: #fdecea; color: #c62828; }


/* ── Contact Info Strip ───────────────────────────────────── */
/*
 * Usage:
 *   <div class="es-info-strip">
 *     <a href="tel:5877473753" class="es-info-strip__item">
 *       <span class="es-info-strip__icon">📞</span>
 *       <span>(587) 747-3753</span>
 *     </a>
 *     <a href="mailto:info@envirosmartinc.com" class="es-info-strip__item">
 *       <span class="es-info-strip__icon">✉</span>
 *       <span>info@envirosmartinc.com</span>
 *     </a>
 *     <span class="es-info-strip__item">
 *       <span class="es-info-strip__icon">📍</span>
 *       <span>Alberta, Canada</span>
 *     </span>
 *   </div>
 */
.es-info-strip {
    background: var(--green-deep);
    border-bottom: 3px solid var(--gold);
    padding: 12px 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    justify-content: center;
    align-items: center;
}
.es-info-strip__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.85);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}
.es-info-strip__item:hover { color: var(--gold); }
.es-info-strip__icon { font-size: 1rem; }


/* ── Badge / Ribbon ───────────────────────────────────────── */
/*
 * Usage: Add .es-badge--ribbon to a parent with position:relative
 *   <div class="es-card" style="position:relative">
 *     <span class="es-badge">New</span>
 *     <span class="es-badge es-badge--gold">Popular</span>
 *     ...
 *   </div>
 */
.es-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--green-light);
    color: #ffffff;
}
.es-badge--gold    { background: var(--gold); color: #ffffff; }
.es-badge--dark    { background: var(--green-deep); color: #ffffff; }
.es-badge--outline { background: transparent; border: 1px solid var(--green-dark); color: var(--green-dark); }

/* Corner ribbon */
.es-badge--ribbon {
    position: absolute;
    top: 14px;
    right: -6px;
    border-radius: 3px 3px 3px 0;
    padding: 4px 12px;
    font-size: 0.7rem;
}
.es-badge--ribbon::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 0;
    border-style: solid;
    border-width: 0 6px 6px 0;
    border-color: transparent var(--gold-dark) transparent transparent;
}
.es-badge--gold.es-badge--ribbon::after {
    border-color: transparent var(--gold-dark) transparent transparent;
}


/* ── Styled Table ─────────────────────────────────────────── */
/*
 * Usage:
 *   <div class="es-table-wrap">
 *     <table class="es-table">
 *       <thead><tr><th>Col 1</th><th>Col 2</th></tr></thead>
 *       <tbody><tr><td>Data</td><td>Data</td></tr></tbody>
 *     </table>
 *   </div>
 */
.es-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin: 24px 0;
}
.es-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: #ffffff;
}
.es-table th {
    background: var(--green-dark);
    color: #ffffff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.es-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.es-table th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
.es-table td {
    padding: 11px 16px;
    border-bottom: 1px solid #ebebeb;
    color: #444;
    vertical-align: middle;
}
.es-table tr:last-child td { border-bottom: none; }
.es-table tbody tr:hover { background: var(--off-white); }
.es-table tbody tr:nth-child(even) { background: #fafaf8; }
.es-table tbody tr:nth-child(even):hover { background: var(--off-white); }

/* Highlight a row */
.es-table tr.es-table--highlight td {
    background: #fffbf0;
    font-weight: 600;
    color: var(--green-dark);
}


/* ── Image + Text split ───────────────────────────────────── */
/*
 * Usage:
 *   <div class="es-split">
 *     <div class="es-split__img">
 *       <img src="..." alt="...">
 *     </div>
 *     <div class="es-split__text">
 *       <span class="es-eyebrow">Label</span>
 *       <h2>Heading</h2>
 *       <p>Body copy.</p>
 *       <a href="#" class="es-btn es-btn--primary">CTA</a>
 *     </div>
 *   </div>
 *
 * Modifier:
 *   .es-split--reverse   Image on the right
 */
.es-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin: 40px 0;
}
.es-split--reverse { direction: rtl; }
.es-split--reverse > * { direction: ltr; }
.es-split__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: block;
}
.es-split__text h2 {
    margin-top: 0;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--green-dark);
    font-weight: 800;
}
.es-split__text p { color: #555; line-height: 1.7; }

@media (max-width: 799px) {
    .es-split, .es-split--reverse { grid-template-columns: 1fr; gap: 28px; direction: ltr; }
    .es-split__img { order: -1; }
}


/* ── Portrait Carousel (WordPress wrapper) ───────────────── */
/*
 * Shortcode: [es_carousel prev_peek="true" slider_peek="true" framed="false"]
 * JSON slide array goes between the open/close tags:
 *   [
 *     {"title":"Video Title","caption":"Short description","video":"https://...mp4","poster":"https://...jpg"},
 *     {"title":"Video 2","caption":"Description","video":"https://...mp4"}
 *   ]
 *
 * Options:
 *   prev_peek="true"    Show previous card peeking left
 *   slider_peek="true"  Overlapping slider peek mode
 *   framed="true"       Framed variant (card with visible border)
 *
 * Tip: Wrap in .es-section / .es-section-dark for background
 */
.es-carousel-section {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 0 32px;
}

/* Full-bleed dark section with carousel */
.es-section-dark .es-carousel-section {
    max-width: 100%;
    padding: 32px 0 48px;
}


/* ── Mini Player (WordPress usage) ───────────────────────── */
/*
 * The miniplayer script auto-initialises on any <video data-miniplayer>.
 * Use a Custom HTML block in Gutenberg.
 *
 * BASIC (loops when in view, pauses when scrolled out):
 *   <div class="es-mini-player">
 *     <video data-miniplayer autoplay muted playsinline loop
 *            src="https://your-cdn.com/video.mp4"
 *            poster="https://your-cdn.com/poster.jpg">
 *     </video>
 *   </div>
 *
 * WITH PLAYLIST + CAPTIONS + AUDIO TOGGLE:
 *   <div class="es-mini-player">
 *     <video data-miniplayer muted playsinline
 *            data-playlist="https://.../clip1.mp4|https://.../clip2.mp4"
 *            data-captions="https://.../clip1.srt|https://.../clip2.srt"
 *            poster="https://.../poster.jpg">
 *     </video>
 *     <div class="mini-player-captions"></div>
 *     <button type="button" data-miniplayer-audio aria-pressed="false">MUTED</button>
 *   </div>
 *
 * Attributes on <video>:
 *   data-miniplayer         Required — activates the script
 *   data-playlist="a|b|c"  Pipe-separated video URLs (plays in sequence)
 *   data-captions="a|b|c"  Matching .srt file URLs (optional)
 *   data-loop="true"        Loop single video (not used with playlist)
 *   muted                   Start muted (recommended for autoplay)
 *   poster="url"            Thumbnail shown before play
 */
.es-mini-player {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
}
.es-mini-player video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Caption overlay */
.mini-player-captions {
    position: absolute;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    padding: 8px 14px;
    background: rgba(5,8,6,0.72);
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.45;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 160ms ease;
    pointer-events: none;
    z-index: 4;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mini-player-captions.is-visible { opacity: 1; }

/* Audio toggle button */
[data-miniplayer-audio] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    padding: 6px 12px;
    background: rgba(14,22,16,0.52);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.15s ease;
}
[data-miniplayer-audio]:hover { background: rgba(20,30,23,0.72); }

/* Restart overlay button */
.mini-player-restart {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
    padding: 12px 22px;
    background: rgba(14,22,16,0.65);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
}
.is-ended .mini-player-restart { display: inline-flex; align-items: center; gap: 8px; }

/* Portrait variant */
.es-mini-player--portrait {
    aspect-ratio: 9 / 16;
    max-width: 320px;
}

/* Grid of mini players */
.es-mini-player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 24px 0;
}


/* ============================================================
   MEDIA COMPONENTS  (YouTube Cards, Article Cards, Gallery)
   ============================================================ */


/* ── YouTube Video Card ───────────────────────────────────── */
/*
 * A linked card showing a YouTube thumbnail + play overlay.
 * Clicking opens the YouTube URL (no embed — better for perf).
 *
 * Usage:
 *   <a href="https://youtu.be/VIDEO_ID" class="es-yt-card" target="_blank">
 *     <div class="es-yt-card__thumb">
 *       <img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="Video title">
 *       <span class="es-yt-card__play" aria-hidden="true"></span>
 *     </div>
 *     <div class="es-yt-card__body">
 *       <span class="es-yt-card__label">Case Study</span>
 *       <h3 class="es-yt-card__title">Viking Colony — Full Transformation</h3>
 *       <p class="es-yt-card__desc">7 barns, failing hot water heat, and what happened next.</p>
 *     </div>
 *   </a>
 *
 * Thumbnail URL shortcut (no API key needed):
 *   https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg   (480x360)
 *   https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg (1280x720, may 404)
 *
 * Grid: wrap in .es-three-col or .es-two-col
 * Dark section: works on .es-section-dark backgrounds
 */
.es-yt-card {
    display: flex;
    flex-direction: column;
    background: #1e3322;
    border: 1px solid #3a5a3a;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(0,0,0,0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    color: inherit;
}
.es-yt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.38);
    border-color: #6aaa6a;
    text-decoration: none;
}

.es-yt-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111;
    overflow: hidden;
    flex-shrink: 0;
}
.es-yt-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    display: block;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.es-yt-card:hover .es-yt-card__thumb img {
    opacity: 1;
    transform: scale(1.03);
}

/* Play button circle */
.es-yt-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.es-yt-card__play::before {
    content: '';
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 4px 18px rgba(0,0,0,0.38);
    transition: transform 0.18s ease, background 0.18s ease;
}
.es-yt-card__play::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #1e3322;
    margin-left: 4px;
    transition: border-color 0.18s ease;
}
.es-yt-card:hover .es-yt-card__play::before {
    transform: scale(1.1);
    background: var(--gold);
}
.es-yt-card:hover .es-yt-card__play::after {
    border-color: transparent transparent transparent #ffffff;
}

.es-yt-card__body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.es-yt-card__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--green-bar);
    display: block;
    margin-bottom: 6px;
}
.es-yt-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
    line-height: 1.35;
}
.es-yt-card__desc {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.62);
    line-height: 1.55;
    margin: 0;
}

/* Light background variant */
.es-yt-card--light {
    background: #ffffff;
    border-color: #e0e0e0;
    box-shadow: var(--shadow-sm);
}
.es-yt-card--light .es-yt-card__label { color: var(--green-dark); }
.es-yt-card--light .es-yt-card__title { color: var(--green-deep); }
.es-yt-card--light .es-yt-card__desc  { color: #666; }
.es-yt-card--light .es-yt-card__play::after { border-color: transparent transparent transparent var(--green-dark); }
.es-yt-card--light:hover { border-color: var(--green-bar); }


/* ── Article / Blog Card ──────────────────────────────────── */
/*
 * Matches the "FULL ARTICLE" card style visible in the poultry landing page.
 * White card, image on top, green header bar with label + title,
 * excerpt body, and a CTA link button.
 *
 * Usage:
 *   <div class="es-article-card">
 *     <a href="/your-article/" class="es-article-card__img-wrap">
 *       <img src="..." alt="Article image">
 *     </a>
 *     <div class="es-article-card__header">
 *       <span class="es-article-card__label">Full Article</span>
 *       <h3 class="es-article-card__title">Reflect-O-Ray: Everything Heating</h3>
 *     </div>
 *     <div class="es-article-card__body">
 *       <p>Excerpt text goes here...</p>
 *       <a href="/your-article/" class="es-article-card__cta">Read the full article &rarr;</a>
 *     </div>
 *   </div>
 *
 * Grid: wrap two cards in .es-two-col, or use standalone
 * Modifier:
 *   .es-article-card--gold   Gold header bar instead of green
 */
.es-article-card {
    background: #ffffff;
    border: 2px solid var(--green-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0,0,0,0.09);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.es-article-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.es-article-card__img-wrap {
    display: block;
    overflow: hidden;
    flex-shrink: 0;
}
.es-article-card__img-wrap img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.22s ease;
}
.es-article-card:hover .es-article-card__img-wrap img {
    transform: scale(1.03);
}

.es-article-card__header {
    background: var(--green-dark);
    padding: 14px 20px;
    flex-shrink: 0;
}
.es-article-card--gold .es-article-card__header { background: var(--gold); }

.es-article-card__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a5d6a7;
    margin-bottom: 4px;
}
.es-article-card--gold .es-article-card__label { color: rgba(255,255,255,0.75); }

.es-article-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
}

.es-article-card__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 14px;
}
.es-article-card__body p {
    color: #444;
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.es-article-card__cta {
    display: inline-block;
    background: var(--green-dark);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    align-self: flex-start;
    transition: background 0.15s ease;
}
.es-article-card__cta:hover {
    background: var(--green-mid);
    text-decoration: none;
}
.es-article-card--gold .es-article-card__cta { background: var(--gold); }
.es-article-card--gold .es-article-card__cta:hover { background: var(--gold-dark); }


/* ── Photo Gallery + Lightbox ─────────────────────────────── */
/*
 * Grid of photos with hover caption overlay.
 * Desktop: click opens full-size lightbox (via gallery.js, auto-loaded).
 * Mobile: lightbox disabled — tap does nothing, grid still looks great.
 *
 * Usage:
 *   <div class="es-gallery">
 *     <div class="es-gallery__item" data-caption="Caption text here">
 *       <img src="photo1.jpg" alt="Alt text / fallback caption">
 *     </div>
 *     <div class="es-gallery__item" data-caption="Another caption">
 *       <img src="photo2.jpg" alt="...">
 *     </div>
 *     <!-- add as many as you like -->
 *   </div>
 *
 * Modifiers on .es-gallery:
 *   .es-gallery--2col   Force 2 columns
 *   .es-gallery--4col   Force 4 columns
 *   (default: auto-fit min 220px)
 *
 * The lightbox HTML is injected by gallery.js — no extra markup needed.
 */
.es-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 24px;
}
.es-gallery--2col { grid-template-columns: repeat(2, 1fr); }
.es-gallery--4col { grid-template-columns: repeat(4, 1fr); }

.es-gallery__item {
    position: relative;
    background: #1e3322;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #3a5a3a;
    aspect-ratio: 4 / 3;
}
.es-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Desktop: hover lift + caption fade-in + zoom cursor */
@media (min-width: 781px) {
    .es-gallery__item {
        cursor: zoom-in;
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .es-gallery__item::after {
        content: attr(data-caption);
        position: absolute;
        inset: auto 0 0 0;
        padding: 44px 14px 14px;
        background: linear-gradient(to top,
            rgba(6,10,6,0.9)   0%,
            rgba(6,10,6,0.62) 45%,
            rgba(6,10,6,0)   100%);
        color: #f5fbf5;
        font-size: 0.85rem;
        line-height: 1.4;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.18s ease, transform 0.18s ease;
        pointer-events: none;
    }
    .es-gallery__item:hover {
        transform: translateY(-2px);
        border-color: #7daf7d;
        box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    }
    .es-gallery__item:hover::after {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Light border variant (for white section backgrounds) */
.es-gallery--light .es-gallery__item {
    background: #f0f0ec;
    border-color: #d0d0c8;
}

/* ── Lightbox (injected by gallery.js) ──────────────────── */
.es-gallery-lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px;
    background: rgba(8,13,8,0.88);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 9000;
}
.es-gallery-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}
.es-gallery-lightbox__dialog {
    position: relative;
    width: min(1100px, 92vw);
    max-height: 88vh;
    border-radius: 14px;
    overflow: hidden;
    background: #182618;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.es-gallery-lightbox__dialog img {
    display: block;
    width: 100%;
    max-height: calc(88vh - 58px);
    object-fit: contain;
    background: #0d150d;
}
.es-gallery-lightbox__caption {
    padding: 14px 18px;
    font-size: 0.9rem;
    color: #d4e7d4;
    background: rgba(16,28,16,0.96);
    min-height: 44px;
}
.es-gallery-lightbox__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    z-index: 1;
}
.es-gallery-lightbox__close:hover { background: rgba(255,255,255,0.28); }

@media (max-width: 780px) {
    .es-gallery-lightbox { display: none; }
    .es-gallery--2col,
    .es-gallery--4col { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   ARTICLE / LONG-FORM PROSE
   ------------------------------------------------------------
   Reusable building blocks for editorial blog posts and field
   notes. Use inside a <!-- wp:html --> Custom HTML block.

   USAGE
   ─────────────────────────────────────────────────────────
   <div class="es-prose-wrap">
     <p>Body paragraph...</p>

     <span class="es-kicker">Section Label</span>
     <h2>Section Heading</h2>
     <p>...</p>

     <div class="es-pull-quote">A standout line worth pausing on.</div>

     <div class="es-pull-quote es-pull-quote--dual">
       <span>First parallel statement.</span>
       <span>Second parallel statement.</span>
     </div>

     <div class="es-figure-placeholder">
       <span class="fig-label">Figure 1 — placeholder</span>
       <span class="fig-title">Diagram title.</span> Body description...
       <div class="fig-caption">Caption: "..."</div>
     </div>

     <span class="es-section-break">• • •</span>

     <div class="es-end-card">
       <span class="end-tagline">Brand line moment.</span>
       <p>Closing thought in lighter type.</p>
     </div>

     <p class="es-disclaimer">Small muted disclaimer text.</p>
   </div>

   COMPANION
   ─────────────────────────────────────────────────────────
   .es-video-pending  — Goes inside .es-video-embed as a
                        before-iframe placeholder. Drop the
                        iframe in to replace.
   ============================================================ */

/* ── Prose container ─────────────────────────────────────── */
.es-prose-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 24px 48px;
}
.es-prose-wrap p {
    font-size: 1.06rem;
    line-height: 1.78;
    color: #2a2a2a;
    margin: 0 0 1.25em;
}
.es-prose-wrap p:first-child { margin-top: 8px; }
.es-prose-wrap h2 {
    color: var(--green-dark);
    font-size: 1.95rem;
    line-height: 1.22;
    margin: 8px 0 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.es-prose-wrap a {
    color: var(--green-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(42,107,31,0.35);
    transition: border-color .15s;
}
.es-prose-wrap a:hover { border-bottom-color: var(--green-dark); }

/* ── Kicker (small-caps gold label above headings) ──────── */
.es-kicker {
    display: block;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin: 56px 0 8px;
}

/* ── Pull quotes (gold left border, italic) ─────────────── */
.es-pull-quote {
    border-left: 4px solid var(--gold);
    padding: 20px 0 20px 28px;
    margin: 40px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.55rem;
    line-height: 1.45;
    color: var(--dark);
}
.es-pull-quote--dual {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    font-size: 1.4rem;
}
.es-pull-quote--dual span:first-child {
    padding-bottom: 16px;
    border-bottom: 1px dashed #c8b88a;
}

/* ── Figure placeholders (dashed cream box) ─────────────── */
.es-figure-placeholder {
    margin: 40px -40px;
    border: 2px dashed #c8b88a;
    background: #f8f5ec;
    border-radius: 8px;
    padding: 28px 32px 24px;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #5a4f30;
}
.es-figure-placeholder .fig-label {
    display: block;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}
.es-figure-placeholder .fig-title { color: var(--dark); font-weight: 700; }
.es-figure-placeholder .fig-caption {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #c8b88a;
    font-style: italic;
    font-size: 0.88rem;
    color: #6a5d3a;
}

/* ── Video placeholder (lives inside .es-video-embed) ───── */
.es-video-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #c8e6c9;
    font-style: italic;
    font-size: 0.92rem;
    padding: 16px;
    text-align: center;
}
.es-video-pending strong {
    display: block;
    color: var(--gold);
    font-style: normal;
    letter-spacing: 1.5px;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ── End card (dark band, gold tagline — brand-line moment) */
.es-end-card {
    background: var(--green-deep, #1e3d14);
    border-radius: 12px;
    padding: 52px 40px;
    margin: 64px -20px 24px;
    text-align: center;
}
.es-end-card .end-tagline {
    display: block;
    font-size: clamp(1.75rem, 3.5vw, 2.3rem);
    font-weight: 800;
    color: var(--gold);
    line-height: 1.22;
    margin-bottom: 16px;
}
.es-end-card p {
    color: #c8e6c9;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

/* ── Disclaimer (small muted italic, top border) ────────── */
.es-disclaimer {
    font-size: 0.82rem;
    color: #8a8a8a;
    line-height: 1.6;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid #ececec;
    font-style: italic;
}

/* ── Section break (rhetorical pause • • •) ─────────────── */
.es-section-break {
    display: block;
    text-align: center;
    margin: 56px 0 48px;
    color: var(--gold);
    letter-spacing: 16px;
    font-size: 1.1rem;
}

@media (max-width: 720px) {
    .es-figure-placeholder,
    .es-end-card { margin-left: 0; margin-right: 0; }
    .es-pull-quote { font-size: 1.35rem; }
    .es-pull-quote--dual { font-size: 1.2rem; }
}


/* ============================================================
   SECTION TYPOGRAPHY — landing-page h2/h3 defaults
   ------------------------------------------------------------
   Matches the original landing.css h2/h3 treatment so that long-
   form landing/article pages get strong, on-brand headings without
   needing inline styles on every <h2>. Existing pages with inline
   styles (color, font-size, font-weight) are unaffected — inline
   wins on specificity.
   ============================================================ */
.es-section:not(.es-section-dark) h2,
.es-section-alt h2 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    color: var(--dark);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}
.es-section:not(.es-section-dark) h2 em,
.es-section-alt h2 em {
    font-style: normal;
    color: var(--green-dark);
}
.es-section:not(.es-section-dark) h3,
.es-section-alt h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
}


/* ============================================================
   FINAL CTA — full-bleed dark-green closing band
   ------------------------------------------------------------
   The end-of-page brand-line CTA. Vertically centred, gold accent
   on the headline tail (use <em> inside <h2>), supportive copy in
   muted green, then two stacked-on-mobile buttons. Matches the
   original landing.css .final-cta pattern.

   USAGE
   ─────────────────────────────────────────────────────────
   <section class="es-final-cta">
     <h2>Ready to see what this looks like<br><em>in your barn?</em></h2>
     <p class="es-final-cta__sub">Free layout consultations across…</p>
     <div class="es-final-cta__buttons">
       <a href="tel:..." class="es-final-cta__btn es-final-cta__btn--gold">📞 (587) 747-3753</a>
       <a href="/poultry/" class="es-final-cta__btn es-final-cta__btn--outline">See Poultry Page →</a>
     </div>
   </section>
   ============================================================ */
.es-final-cta {
    background: linear-gradient(135deg, #1b4d13, #2a6b1f);
    color: #fff;
    padding: 70px 24px;
    text-align: center;
}
.es-final-cta h2 {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: 16px;
    font-weight: 800;
    line-height: 1.2;
}
.es-final-cta h2 em { color: var(--gold); font-style: normal; }
.es-final-cta__sub {
    color: #a5d6a7;
    font-size: 1.1rem;
    max-width: 580px;
    margin: 0 auto 36px;
    line-height: 1.65;
}
.es-final-cta__buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.es-final-cta__btn {
    padding: 18px 36px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.1s;
}
.es-final-cta__btn:hover { transform: translateY(-2px); }
.es-final-cta__btn--gold {
    background: var(--gold);
    color: #1a1a1a;
}
.es-final-cta__btn--outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.6);
    color: #fff;
}
.es-final-cta__btn--outline:hover { border-color: #fff; }


/* ============================================================
   FIELD-NOTE HERO — dark-green banner with gold pill
   ------------------------------------------------------------
   The opener for Reflect-O-Ray Field Notes (and similar long-
   form pieces). Big white headline with gold non-italic <em>
   tail, light-green deck. Pill is centred (a small fix from
   the original landing.css version where it sat flush-left).

   USAGE
   ─────────────────────────────────────────────────────────
   <section class="es-fieldnote-hero">
     <div class="es-fieldnote-hero__inner">
       <span class="es-fieldnote-hero__pill">Reflect-O-Ray Field Notes — No. 01</span>
       <h1>How Heat Actually Moves.<br><em>Why the same BTUs do very different things, depending on the system.</em></h1>
       <p class="es-fieldnote-hero__sub">A plain-talk explainer…</p>
     </div>
   </section>
   ============================================================ */
.es-fieldnote-hero {
    background: linear-gradient(135deg, #1b4d13 0%, #2a6b1f 50%, #1e5518 100%);
    color: #fff;
    padding: 72px 24px 64px;
    text-align: center;
}
.es-fieldnote-hero__inner {
    max-width: 920px;
    margin: 0 auto;
}
.es-fieldnote-hero__pill {
    background: var(--gold);
    color: #1a1a1a;
    display: inline-block;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.es-fieldnote-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.es-fieldnote-hero h1 em {
    font-style: normal;
    color: var(--gold);
}
.es-fieldnote-hero__sub {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    color: #c8e6c9;
    line-height: 1.65;
    max-width: 680px;
    margin: 0 auto;
}


/* ============================================================
   FIELD NOTE PATTERN LIBRARY
   ------------------------------------------------------------
   Reusable patterns for Reflect-O-Ray Field Notes (long-form
   editorial pieces with diagrams). All originally lived in the
   inline <style> block of post #110 ("How Heat Actually Moves");
   promoted here so future field notes can use them without
   re-pasting the CSS.

   PATTERNS
   ─────────────────────────────────────────────────────────
   .fn-card / .fn-card-head / .fn-title / .fn-tag /
       .fn-card-svg / .fn-card-body / .fn-card-foot (.cold/.warm)
       — Cream paper card with dark green header for explainer diagrams.

   .three-ways      3-column grid of .fn-cards (stacks on mobile).
   .barn-compare    2-column grid for side-by-side diagrams.

   .brooding-band   Full-bleed dark band for emotional weight.
                    Contains .brood-panels (.brood-panel /
                    .brood-panel-head / .brood-panel-svg /
                    .brood-panel-foot .cold/.warm).

   .field-note      Gold-bordered "from the field" callout.
   .field-note--light       Cream variant for cream backgrounds.
   .field-note--standalone  Centred max-width 760px.

   .compare-table   Comparison spec table with cold/warm cell tints.

   .bottom-line     Dark inline callout with gold tagline + body.

   .outcomes-band   Off-white strip of .outcome-card items
                    (icon + title + body). Auto-fits to 4/2/1 cols.

   .fan-airflow-*   Animated heat-zone ellipses in the hot-water
                    SVG diagram (faint/medium/strong opacities,
                    pulsing keyframes, respects prefers-reduced-motion).
   ============================================================ */

  /* ─── PAGE-SPECIFIC OVERRIDES ─── */
  /* These only style the diagrams + content unique to this page; everything
     else inherits from landing.css for site-wide consistency. */

  /* The Field-Notes diagram panel — cream paper card with dark header */
  .fn-card {
    background: var(--off-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e3ddc8;
  }
  .fn-card-head {
    background: var(--green-deep);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  .fn-card-head .fn-title {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .fn-card-head .fn-tag {
    font-size: 0.72rem;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .fn-card-svg {
    background: #f5efe2;
    padding: 24px 20px 12px;
  }
  .fn-card-svg svg { width: 100%; height: auto; display: block; }
  .fn-card-body {
    padding: 20px 24px;
    color: var(--gray-text);
    font-size: 0.97rem;
    line-height: 1.7;
  }
  .fn-card-body strong { color: var(--green-dark); font-weight: 700; }
  .fn-card-foot {
    border-top: 1px dashed #c8b88a;
    padding: 14px 24px 20px;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 600;
  }
  .fn-card-foot.cold { color: var(--red); }
  .fn-card-foot.warm { color: var(--green-dark); }

  /* "Three Ways" grid */
  .three-ways {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
  }
  @media (max-width: 860px) { .three-ways { grid-template-columns: 1fr; } }

  /* Side-by-side barn comparison */
  .barn-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 32px;
  }
  @media (max-width: 860px) { .barn-compare { grid-template-columns: 1fr; } }

  /* Brooding section: dark band with two stacked panels for stark contrast */
  .brooding-band {
    background: var(--dark);
    color: #fff;
    padding: 64px 24px;
  }
  .brooding-band .es-container { max-width: 1040px; margin: 0 auto; }
  .brooding-band .es-section-label { color: var(--gold); }
  .brooding-band h2 { color: #fff; }
  .brooding-band h2 em { color: var(--gold); }
  .brooding-band .es-lead { color: #d8d8d2; }
  .brood-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
  }
  @media (max-width: 860px) { .brood-panels { grid-template-columns: 1fr; } }
  .brood-panel {
    background: var(--off-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  }
  .brood-panel-head {
    background: #fff;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e3ddc8;
  }
  .brood-panel-head .panel-title {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .brood-panel-head .panel-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray-text);
  }
  .brood-panel-svg { background: #f5efe2; padding: 16px; }
  .brood-panel-svg svg { width: 100%; height: auto; display: block; }
  .brood-panel-foot {
    padding: 14px 20px;
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 600;
    text-align: center;
  }
  .brood-panel-foot.cold {
    background: #fbe9e7;
    color: var(--red);
  }
  .brood-panel-foot.warm {
    background: #e8f3e2;
    color: var(--green-dark);
  }
  .field-note {
    background: rgba(232,160,32,0.08);
    border-left: 4px solid var(--gold);
    padding: 18px 22px;
    border-radius: 0 8px 8px 0;
    margin-top: 32px;
  }
  .field-note .fn-label {
    font-size: 0.7rem;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .field-note p {
    color: #d8d8d2;
    font-size: 0.97rem;
    line-height: 1.7;
    margin: 0;
  }
  .field-note--light { background: #fdf6e6; }
  .field-note--light p { color: var(--gray-text); }
  .field-note--standalone { max-width: 760px; margin: 0 auto; }

  /* Comparison table */
  .compare-table-wrap { margin-top: 28px; overflow-x: auto; }
  .compare-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
  .compare-table th, .compare-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid #ececec;
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .compare-table thead th {
    background: var(--off-white);
    color: var(--dark);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .compare-table thead th.cold { color: var(--red); }
  .compare-table thead th.warm { color: var(--green-dark); }
  .compare-table tbody tr:last-child td { border-bottom: none; }
  .compare-table td:first-child {
    font-weight: 700;
    color: var(--dark);
    background: var(--off-white);
    width: 24%;
  }
  .compare-table td.cold { color: #8b3a32; }
  .compare-table td.warm { color: var(--green-dark); }

  /* Bottom-line inline callout */
  .bottom-line {
    background: var(--dark);
    color: #fff;
    border-radius: 12px;
    padding: 36px 40px;
    margin-top: 40px;
    text-align: center;
  }
  .bottom-line .bl-kicker {
    display: block;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .bottom-line .bl-tagline {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--gold);
    margin-bottom: 12px;
    line-height: 1.25;
  }
  .bottom-line p {
    color: #c8e6c9;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
  }

  /* "What actually changes in the barn" outcome strip */
  .outcomes-band { background: var(--off-white); padding: 56px 24px 64px; }
  .outcomes-band__title {
    text-align: center;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--dark);
    margin: 0 auto 32px;
  }
  .outcomes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
  }
  @media (max-width: 860px) { .outcomes-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .outcomes-grid { grid-template-columns: 1fr; } }
  .outcome-card {
    background: #fff;
    border-top: 3px solid var(--gold);
    padding: 18px 18px 22px;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }
  .outcome-card__icon {
    font-size: 1.5rem;
    color: var(--green-deep);
    line-height: 1;
    margin-bottom: 8px;
  }
  .outcome-card__title {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--dark);
    margin: 0 0 8px;
    line-height: 1.25;
  }
  .outcome-card__body {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--gray-text);
    margin: 0;
  }

  /* Animated fan blades for hot water diagram */
  .fan-airflow-faint  { opacity: 0.10; animation: pulseFaint  3s ease-in-out infinite; }
  .fan-airflow-medium { opacity: 0.18; animation: pulseMed    3s ease-in-out infinite; }
  .fan-airflow-strong { opacity: 0.30; animation: pulseStrong 3s ease-in-out infinite; }
  @keyframes pulseFaint  { 0%,100% { opacity: 0.08; } 50% { opacity: 0.14; } }
  @keyframes pulseMed    { 0%,100% { opacity: 0.16; } 50% { opacity: 0.22; } }
  @keyframes pulseStrong { 0%,100% { opacity: 0.26; } 50% { opacity: 0.34; } }
  @media (prefers-reduced-motion: reduce) {
    .fan-airflow-faint, .fan-airflow-medium, .fan-airflow-strong { animation: none; }
  }

/* ── Snapshot summary (newspaper-clipping TL;DR) ────────── */
.es-snapshot {
    margin: 16px 0 32px;
    border: 2px dashed #c8b88a;
    background: #f8f5ec;
    border-radius: 8px;
    padding: 24px 28px 22px;
    font-size: 1rem;
    line-height: 1.65;
    color: #4a4030;
    position: relative;
}
.es-snapshot__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #c8b88a;
}
.es-snapshot__title {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--green-deep);
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.es-snapshot__label {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
}
.es-snapshot p {
    margin: 0 0 10px;
    font-family: Georgia, 'Times New Roman', serif;
}
.es-snapshot p:last-child {
    margin-bottom: 0;
}
.es-snapshot__footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #c8b88a;
    font-style: italic;
    font-size: 0.92rem;
    color: #6a5d3a;
}
@media (max-width: 720px) {
    .es-snapshot { padding: 20px 22px 18px; }
    .es-snapshot__title { font-size: 1.2rem; }
}

/* ── Live figures (real illustration replaces placeholder) */
.fn-figure {
    margin: 40px -40px;
    padding: 0;
}
.fn-figure img,
.fn-figure svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid #c8b88a;
    background: #f8f5ec;
    box-sizing: border-box;
}
.fn-figure figcaption {
    margin-top: 14px;
    padding: 14px 18px;
    border: 1px dashed #c8b88a;
    border-radius: 6px;
    background: #f8f5ec;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #5a4f30;
}
.fn-figure figcaption .fig-label {
    display: block;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}
.fn-figure figcaption .fig-title {
    color: var(--dark);
    font-weight: 700;
}
@media (max-width: 720px) {
    .fn-figure { margin: 32px 0; }
    .fn-figure figcaption { padding: 12px 14px; font-size: 0.9rem; }
}

/* ── Figure size shrink (~30% smaller) + zoom affordance ── */
.fn-figure {
    margin: 40px auto;
    max-width: 70%;
}
.fn-figure img,
.fn-figure svg {
    cursor: zoom-in;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (min-width: 781px) {
    .fn-figure img:hover,
    .fn-figure svg:hover {
        transform: scale(1.015);
        box-shadow: 0 8px 24px rgba(30, 61, 20, 0.18);
    }
}
@media (max-width: 720px) {
    .fn-figure { max-width: 100%; margin: 32px 0; }
    .fn-figure img,
    .fn-figure svg { cursor: default; }
}

/* ── Snapshot v2: clipping header (meta + full title) ─── */
.es-snapshot__head {
    display: block; /* override the earlier flex layout */
    padding-bottom: 16px;
}
.es-snapshot__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}
.es-snapshot__sep {
    color: #c8b88a;
    font-weight: 400;
}
.es-snapshot__date {
    color: #6a5d3a;
    letter-spacing: 1.5px;
}
.es-snapshot__title {
    /* override: not all-caps, slightly larger, headline feel */
    display: block;
    margin: 0 0 6px;
    font-family: 'Bitter', Georgia, serif;
    font-weight: 800;
    font-size: 1.65rem;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: var(--green-deep);
}
.es-snapshot__label {
    display: inline-block;
    margin-top: 2px;
}
@media (max-width: 720px) {
    .es-snapshot__title { font-size: 1.3rem; }
    .es-snapshot__meta { font-size: 0.65rem; letter-spacing: 1.5px; }
}

/* ── Snapshot v3: corner pill + jump link ───────────────── */
.es-snapshot { position: relative; }

.es-snapshot__pill {
    position: absolute;
    top: -14px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    background: var(--green-deep, #1e3d14);
    color: var(--gold, #e8a020);
    border: 2px solid var(--gold, #e8a020);
    border-radius: 999px;
    font-family: 'Bitter', Georgia, serif;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(30, 61, 20, 0.18);
    z-index: 1;
    transform: rotate(-1.5deg); /* slight tilt like a stamp */
}

.es-snapshot__footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #c8b88a;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.es-snapshot__footer-text {
    font-style: italic;
    font-size: 0.92rem;
    color: #6a5d3a;
    font-family: Georgia, 'Times New Roman', serif;
}
.es-snapshot__jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    color: var(--green-deep, #1e3d14);
    border: 1.5px solid var(--green-deep, #1e3d14);
    border-radius: 999px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.es-snapshot__jump:hover,
.es-snapshot__jump:focus {
    background: var(--green-deep, #1e3d14);
    color: var(--gold, #e8a020);
    text-decoration: none;
}
.es-snapshot__jump span { font-size: 0.95rem; }

@media (max-width: 720px) {
    .es-snapshot__pill {
        top: -12px;
        right: 14px;
        padding: 6px 14px;
        font-size: 0.72rem;
        letter-spacing: 2px;
    }
    .es-snapshot__footer { gap: 10px; }
    .es-snapshot__footer-text { font-size: 0.88rem; }
    .es-snapshot__jump { font-size: 0.72rem; padding: 6px 12px; }
}

/* Smooth-scroll for the in-page anchor */
html { scroll-behavior: smooth; }
#article-start { scroll-margin-top: 80px; }

/* ── Snapshot v4: two-part SUMMARY | TL;DR pill ─────────── */
.es-snapshot__pill {
    /* override earlier flex props with explicit two-part layout */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
}
.es-snapshot__pill-a,
.es-snapshot__pill-b {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-size: 0.82rem;
}
.es-snapshot__pill-sep {
    color: var(--gold, #e8a020);
    opacity: 0.55;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1;
}

/* ── Restore plain italic footer text (no flex row anymore) ── */
.es-snapshot__footer-text {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #c8b88a;
    font-style: italic;
    font-size: 0.92rem;
    color: #6a5d3a;
    font-family: Georgia, 'Times New Roman', serif;
}

/* ── Standalone "Read full article" jump row ──────────────── */
.es-jump-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 24px 0 28px;
    position: relative;
}
.es-jump-row::before,
.es-jump-row::after {
    content: "";
    flex: 1;
    height: 1px;
    border-top: 1px dashed #c8b88a;
}
.es-jump-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: var(--green-deep, #1e3d14);
    color: var(--gold, #e8a020);
    border: 2px solid var(--green-deep, #1e3d14);
    border-radius: 999px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(30, 61, 20, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.es-jump-link:hover,
.es-jump-link:focus {
    background: var(--gold, #e8a020);
    color: var(--green-deep, #1e3d14);
    border-color: var(--gold, #e8a020);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(30, 61, 20, 0.22);
}
.es-jump-link span { font-size: 1rem; }

@media (max-width: 720px) {
    .es-snapshot__pill { padding: 6px 12px; gap: 6px; }
    .es-snapshot__pill-a,
    .es-snapshot__pill-b { font-size: 0.7rem; letter-spacing: 2px; }
    .es-jump-row { margin: 20px 0 22px; }
    .es-jump-link { font-size: 0.75rem; padding: 8px 16px; letter-spacing: 1.2px; }
}

/* ── Snapshot v5: pill LEFT, CTA RIGHT corner, meta center ── */

/* 1) Pill moves to top-LEFT corner (tilt the other way for asymmetry) */
.es-snapshot__pill {
    left: 18px;
    right: auto;
    transform: rotate(-1.5deg);
}

/* 2) Meta line centered (was left-aligned) */
.es-snapshot__meta {
    justify-content: center;
}

/* 3) Snapshot title also centered for cohesion with the centered meta */
.es-snapshot__title {
    text-align: center;
}

/* 4) New CTA pinned to top-RIGHT corner of the snapshot.
      Defaults to GOLD bg / deep-green text so it's readable at rest;
      hover inverts. !important on color/text-decoration to defeat
      the theme's generic anchor color rule that was bleeding through. */
.es-snapshot__cta {
    position: absolute;
    top: -16px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--gold, #e8a020) !important;
    color: var(--green-deep, #1e3d14) !important;
    border: 2px solid var(--green-deep, #1e3d14);
    border-radius: 999px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(30, 61, 20, 0.18);
    z-index: 1;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.es-snapshot__cta:hover,
.es-snapshot__cta:focus {
    background: var(--green-deep, #1e3d14) !important;
    color: var(--gold, #e8a020) !important;
    border-color: var(--gold, #e8a020);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(30, 61, 20, 0.22);
}
.es-snapshot__cta span { font-size: 0.95rem; }

/* 5) Bump top padding on the snapshot so the corner badges
      don't crowd the meta line on mobile */
.es-snapshot { padding-top: 30px; }

/* 6) Kill the now-removed standalone jump row (defensive) */
.es-jump-row { display: none !important; }

@media (max-width: 720px) {
    /* On narrow screens, the two corner badges can collide;
       drop the CTA below the pill instead of overhanging. */
    .es-snapshot { padding-top: 28px; }
    .es-snapshot__pill { left: 12px; top: -12px; padding: 5px 10px; }
    .es-snapshot__pill-a,
    .es-snapshot__pill-b { font-size: 0.62rem; letter-spacing: 1.5px; }
    .es-snapshot__cta {
        position: static;
        display: inline-flex;
        margin: 14px auto 0;
        font-size: 0.72rem;
        padding: 8px 14px;
        letter-spacing: 1.4px;
    }
    /* Show the CTA centered on its own row at the top of the head */
    .es-snapshot__head { padding-top: 4px; }
}

/* ── Self-hosted <video> inside .es-video-embed ─────────── */
.es-video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* ============================================================
   Mini-player — vertical autoplay-muted video card
   Ported from /reflect-o-ray landing pages.
   Default: 9:16 vertical. Add .mini-player-frame--landscape
   for 16:9. Auto-pauses out of view, captions optional via
   data-captions, playlist optional via data-playlist (pipe
   separator). All behavior in /js/miniplayer.js.
   ============================================================ */
.mini-player-card {
    margin: 0;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f4f8f1 0%, #ebf4e7 100%);
    border: 1px solid #d9e7d2;
    box-shadow: 0 14px 34px rgba(22, 45, 18, 0.12);
}
.mini-player-frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--mini-player-ratio, 9 / 16);
    border-radius: 14px;
    overflow: hidden;
    background: #0d120d;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
.mini-player-frame--landscape {
    --mini-player-ratio: 16 / 9;
}
.mini-player-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    background: #101510;
}
.mini-player-audio-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.42);
    background: rgba(14, 20, 16, 0.34);
    color: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 8px 18px rgba(0,0,0,0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.mini-player-audio-toggle:hover,
.mini-player-audio-toggle:focus-visible {
    background: rgba(20, 28, 22, 0.5);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      0 10px 22px rgba(0,0,0,0.28);
}
.mini-player-restart {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 140px;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 999px;
    background: rgba(14, 20, 16, 0.34);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.24),
      0 14px 30px rgba(0,0,0,0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.mini-player-restart::before {
    content: "↻";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.mini-player-frame.is-ended .mini-player-restart {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
.mini-player-restart:hover,
.mini-player-restart:focus-visible {
    background: rgba(20, 28, 22, 0.5);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      0 18px 36px rgba(0,0,0,0.32);
}
.mini-player-captions {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 92%;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(5, 9, 6, 0.72);
    color: #fff;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.45;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 160ms ease;
    pointer-events: none;
}
.mini-player-captions.is-visible {
    opacity: 1;
}
.mini-player-caption {
    margin-top: 12px;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #56714c;
    text-align: center;
}

@media (max-width: 700px) {
    .mini-player-card { padding: 12px; border-radius: 16px; }
    .mini-player-frame { border-radius: 12px; }
    .mini-player-audio-toggle { top: 10px; right: 10px; font-size: 0.68rem; padding: 7px 10px; }
    .mini-player-restart { min-width: 124px; padding: 12px 16px; font-size: 0.72rem; }
    .mini-player-restart::before { width: 30px; height: 30px; font-size: 1rem; }
    .mini-player-captions { width: calc(100% - 20px); bottom: 10px; font-size: 0.78rem; padding: 6px 9px; }
}

/* ── Mini-player play/pause chip (top-left, mirrors mute on right) */
.mini-player-playpause-toggle {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.42);
    background: rgba(14, 20, 16, 0.34);
    color: #fff;
    border-radius: 999px;
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 8px 18px rgba(0,0,0,0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.mini-player-playpause-toggle:hover,
.mini-player-playpause-toggle:focus-visible {
    background: rgba(20, 28, 22, 0.5);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      0 10px 22px rgba(0,0,0,0.28);
}
/* Make the whole video click-to-toggle */
.mini-player-video { cursor: pointer; }

@media (max-width: 700px) {
    .mini-player-playpause-toggle { top: 10px; left: 10px; width: 34px; height: 34px; font-size: 0.88rem; }
}

/* ── Mini-player v2: paused state overlay + expand button ── */

/* Big centered play overlay shown when video is paused */
.mini-player-frame::after {
    content: "▶";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 1;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 20, 16, 0.55);
    color: #fff;
    border-radius: 50%;
    font-size: 1.7rem;
    padding-left: 6px; /* optical centering of the play glyph */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 14px 30px rgba(0,0,0,0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    opacity: 1;
    transition: opacity 180ms ease, transform 180ms ease;
}
/* Hide the overlay while playing */
.mini-player-frame.is-playing::after {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
}
/* Hide both the overlay and ended-state UI from each other */
.mini-player-frame.is-ended::after { opacity: 0; }

/* Expand-to-fullscreen button (bottom-right) */
.mini-player-expand-toggle {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.42);
    background: rgba(14, 20, 16, 0.34);
    border-radius: 999px;
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 8px 18px rgba(0,0,0,0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.mini-player-expand-toggle img {
    width: 18px;
    height: 18px;
    display: block;
    filter: invert(1) brightness(1.1);
}
.mini-player-expand-toggle:hover,
.mini-player-expand-toggle:focus-visible {
    background: rgba(20, 28, 22, 0.5);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      0 10px 22px rgba(0,0,0,0.28);
}

/* Paired video container — constrains side-by-side videos to a comfortable size */
.es-mini-player-pair {
    max-width: 720px;
    margin: 32px auto;
}
.es-mini-player-pair .wp-block-column {
    min-width: 0;
}
.es-mini-player-pair .mini-player-card {
    max-width: 340px;
    margin: 0 auto;
}

@media (max-width: 700px) {
    .mini-player-frame::after { width: 60px; height: 60px; font-size: 1.4rem; }
    .mini-player-expand-toggle { bottom: 10px; right: 10px; width: 34px; height: 34px; }
    .mini-player-expand-toggle img { width: 16px; height: 16px; }
    .es-mini-player-pair .mini-player-card { max-width: 100%; }
}

/* ============================================================
   Topic-card mobile collapse (≤760px)
   Desktop is untouched — these rules only fire on mobile,
   matching the breakpoint where lanes stack to 1-column.
   ============================================================ */
@media (max-width: 760px) {
    /* The header is the tap target — give it the cue */
    .es-topic-card[aria-expanded] .es-topic-card__header {
        cursor: pointer;
        position: relative;
        user-select: none;
        padding-right: 56px; /* room for chevron */
    }
    /* Chevron in the top-right corner of the header */
    .es-topic-card[aria-expanded] .es-topic-card__header::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 8px;
        width: 36px;
        height: 36px;
        margin-top: -18px;
        border-radius: 50%;
        background: var(--off-white, #f5efe2);
        border: 1.5px solid var(--green-deep, #1e3d14);
        box-shadow: 0 2px 6px rgba(30, 61, 20, 0.12);
        transition: transform 220ms ease, background 180ms ease;
    }
    /* The chevron glyph itself */
    .es-topic-card[aria-expanded] .es-topic-card__header::before {
        content: "▼";
        position: absolute;
        top: 50%;
        right: 8px;
        width: 36px;
        height: 36px;
        margin-top: -18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: var(--green-deep, #1e3d14);
        font-weight: 700;
        line-height: 1;
        z-index: 1;
        transition: transform 220ms ease;
        pointer-events: none;
    }
    /* Rotate when expanded */
    .es-topic-card[aria-expanded="true"] .es-topic-card__header::before {
        transform: rotate(180deg);
    }
    .es-topic-card[aria-expanded="true"] .es-topic-card__header::after {
        background: var(--green-deep, #1e3d14);
    }
    .es-topic-card[aria-expanded="true"] .es-topic-card__header::before {
        color: var(--gold, #e8a020);
    }
    /* Hover/focus on header */
    .es-topic-card[aria-expanded] .es-topic-card__header:hover::after,
    .es-topic-card[aria-expanded] .es-topic-card__header:focus-visible::after {
        background: var(--gold, #e8a020);
        border-color: var(--gold, #e8a020);
    }
    .es-topic-card[aria-expanded] .es-topic-card__header:hover::before,
    .es-topic-card[aria-expanded] .es-topic-card__header:focus-visible::before {
        color: #fff;
    }

    /* Hide everything except the header when collapsed */
    .es-topic-card[aria-expanded="false"] > *:not(.es-topic-card__header) {
        display: none;
    }

    /* When expanded, smooth reveal */
    .es-topic-card[aria-expanded="true"] {
        animation: tcExpand 240ms ease-out;
    }
    @keyframes tcExpand {
        from { transform: translateY(-2px); }
        to   { transform: translateY(0); }
    }

    /* Tighter header on mobile collapsed cards — single row read */
    .es-topic-card[aria-expanded] .es-topic-card__header {
        margin-bottom: 0;
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .es-topic-card[aria-expanded="false"] {
        margin-bottom: 0; /* let cards stack tight when all closed */
    }

    @media (prefers-reduced-motion: reduce) {
        .es-topic-card[aria-expanded] .es-topic-card__header::after,
        .es-topic-card[aria-expanded] .es-topic-card__header::before {
            transition: none;
        }
        .es-topic-card[aria-expanded="true"] { animation: none; }
    }
}

/* ── Lightbox light-background variant ──────────────────────
   Auto-applied for SVG sources (transparent illustrations
   that need a bright backdrop to read). Opt in for any other
   image with data-lightbox-bg="light" on the <img> or its
   <figure>. Opt out with data-lightbox-bg="dark" on an SVG.
   ────────────────────────────────────────────────────────── */
.es-gallery-lightbox.is-light-bg .es-gallery-lightbox__dialog img {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}
@media (max-width: 720px) {
    .es-gallery-lightbox.is-light-bg .es-gallery-lightbox__dialog img {
        padding: 14px;
    }
}

/* ── Diagram expand modal ──────────────────────────────────── */
.es-diagram-card {
    position: relative;
}
.es-diagram-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 14, 11, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.es-diagram-modal.is-open {
    display: flex;
}
.es-diagram-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 100%;
    max-height: 88vh;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 28px 68px rgba(0, 0, 0, 0.5);
}
.es-diagram-modal__frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}
.es-diagram-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(14, 20, 16, 0.78);
    color: #fff;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
    transition: background 160ms ease;
}
.es-diagram-modal__close:hover,
.es-diagram-modal__close:focus-visible {
    background: var(--gold, #e8a020);
    color: var(--green-deep, #1e3d14);
}
@media (max-width: 720px) {
    .es-diagram-modal { padding: 16px; }
    .es-diagram-modal__dialog { max-height: 92vh; border-radius: 10px; }
}

/* Trim the inline diagram height a touch — it was running too tall on home */
.es-diagram-card iframe {
    max-height: 540px;
}

/* ── Diagram modal v2 — scrollable iframe + bigger close ── */
.es-diagram-modal__close {
    width: 56px;
    height: 56px;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    padding: 0;
    line-height: 1;
}
.es-diagram-modal__close::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    /* explicit centered × via gradient lines so glyph metrics don't matter */
    background:
        linear-gradient(45deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%) center / 22px 22px no-repeat,
        linear-gradient(-45deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%) center / 22px 22px no-repeat;
}
.es-diagram-modal__close { font-size: 0; } /* hide the &times; text since we draw the X */

/* Allow iframe to scroll its own content if it overflows the dialog */
.es-diagram-modal__frame {
    overflow: auto;
}