/* ==========================================================================
   EventAura - luxury theme
   Token driven dark/light colour modes layered on Bootstrap 5.3.
   No component below hardcodes a colour: every value resolves from a token,
   so adding a third mode later is one more selector block.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
    --ea-bg: #0B0C10;
    --ea-bg-alt: #0E1016;
    --ea-surface: #12141C;
    --ea-surface-2: #171A24;
    --ea-text: #F4F4F5;
    --ea-text-muted: #A1A5B0;
    --ea-accent: #C5A059;
    --ea-accent-strong: #D4AF37;
    --ea-accent-text: #D4AF37;
    --ea-accent-soft: rgba(197, 160, 89, .12);
    --ea-border: rgba(197, 160, 89, .18);
    --ea-border-soft: rgba(244, 244, 245, .08);
    --ea-overlay: linear-gradient(180deg, rgba(11, 12, 16, 0) 0%, rgba(11, 12, 16, .55) 45%, rgba(11, 12, 16, .94) 100%);
    --ea-glow: radial-gradient(60rem 40rem at 12% -12%, rgba(197, 160, 89, .16), transparent 62%),
               radial-gradient(52rem 38rem at 108% 6%, rgba(212, 175, 55, .11), transparent 62%);
    --ea-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    --ea-shadow-sm: 0 8px 24px rgba(0, 0, 0, .38);
    --ea-on-accent: #12141C;

    --ea-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --ea-sans: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ea-radius: 1rem;
    --ea-radius-sm: .625rem;
    --ea-ease: cubic-bezier(.22, .61, .36, 1);
}

[data-bs-theme="light"] {
    --ea-bg: #FAF8F4;
    --ea-bg-alt: #F3EFE7;
    --ea-surface: #FFFFFF;
    --ea-surface-2: #F7F4EE;
    --ea-text: #14161C;
    --ea-text-muted: #5A5F6B;
    --ea-accent: #C5A059;
    --ea-accent-strong: #B08D3F;
    /* Champagne on white is only ~2.6:1, so text-weight gold is darkened to
       clear WCAG AA while the bright tone stays on display type and rules. */
    --ea-accent-text: #8A6B2F;
    --ea-accent-soft: rgba(197, 160, 89, .16);
    --ea-border: rgba(20, 22, 28, .10);
    --ea-border-soft: rgba(20, 22, 28, .07);
    --ea-overlay: linear-gradient(180deg, rgba(250, 248, 244, 0) 0%, rgba(250, 248, 244, .35) 40%, rgba(250, 248, 244, .95) 100%);
    --ea-glow: radial-gradient(60rem 40rem at 12% -12%, rgba(197, 160, 89, .18), transparent 62%),
               radial-gradient(52rem 38rem at 108% 6%, rgba(176, 141, 63, .10), transparent 62%);
    --ea-shadow: 0 18px 45px rgba(20, 22, 28, .10);
    --ea-shadow-sm: 0 8px 22px rgba(20, 22, 28, .07);
    --ea-on-accent: #FFFFFF;
}

/* Bootstrap variable bridge so its own components inherit the palette. */
:root,
[data-bs-theme="light"] {
    --bs-body-bg: var(--ea-bg);
    --bs-body-color: var(--ea-text);
    --bs-border-color: var(--ea-border);
    --bs-link-color: var(--ea-accent-text);
    --bs-link-hover-color: var(--ea-accent-strong);
    --bs-primary: var(--ea-accent);
    --bs-emphasis-color: var(--ea-text);
    --bs-secondary-color: var(--ea-text-muted);
    --bs-font-sans-serif: var(--ea-sans);
}

/* --- 2. Base ------------------------------------------------------------ */

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--ea-bg);
    color: var(--ea-text);
    font-family: var(--ea-sans);
    font-size: 1rem;
    line-height: 1.7;
    overflow-x: hidden;
}

/* Only the switcher adds this class, and only for the length of the fade. */
html.ea-theme-transition,
html.ea-theme-transition body,
html.ea-theme-transition .ea-nav,
html.ea-theme-transition .ea-card,
html.ea-theme-transition .ea-surface {
    transition: background-color .32s var(--ea-ease), color .32s var(--ea-ease),
                border-color .32s var(--ea-ease);
}

h1, h2, h3, h4, h5, .ea-serif {
    font-family: var(--ea-serif);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.18;
}

a { text-decoration: none; }
a:hover { color: var(--ea-accent-strong); }

::selection {
    background: var(--ea-accent);
    color: var(--ea-on-accent);
}

:focus-visible {
    outline: 2px solid var(--ea-accent-strong);
    outline-offset: 3px;
    border-radius: 4px;
}

.ea-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: .75rem 1.25rem;
    background: var(--ea-accent);
    color: var(--ea-on-accent);
    font-weight: 600;
}
.ea-skip:focus { left: .5rem; top: .5rem; }

/* --- 3. Utilities ------------------------------------------------------ */

.ea-eyebrow {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--ea-accent-text);
}

.ea-muted { color: var(--ea-text-muted) !important; }
.ea-gold { color: var(--ea-accent-text) !important; }

.ea-display {
    font-family: var(--ea-serif);
    font-size: clamp(2.1rem, 5.2vw, 4.2rem);
    line-height: 1.06;
}

.ea-rule {
    height: 1px;
    width: 96px;
    background: linear-gradient(90deg, var(--ea-accent), transparent);
    border: 0;
    opacity: 1;
}

.ea-rule-center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--ea-accent), transparent); }

.ea-section { padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; }
.ea-section-alt { background: var(--ea-bg-alt); }

.ea-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ea-glow);
    pointer-events: none;
    z-index: 0;
}
.ea-glow > * { position: relative; z-index: 1; }

.ea-surface {
    background: var(--ea-surface);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius);
}

.ea-divider { height: 1px; background: var(--ea-border); border: 0; opacity: 1; }

.ea-icon { flex: none; vertical-align: -.15em; }

/* --- 4. Buttons ------------------------------------------------------- */

.btn { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }
.btn:focus-visible { box-shadow: none; }

.ea-btn-gold {
    background: linear-gradient(135deg, var(--ea-accent-strong), var(--ea-accent));
    color: var(--ea-on-accent);
    border: 0;
    padding: .72rem 1.6rem;
    box-shadow: 0 10px 26px rgba(197, 160, 89, .22);
}
.ea-btn-gold:hover,
.ea-btn-gold:focus {
    color: var(--ea-on-accent);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.ea-btn-ghost {
    border: 1px solid var(--ea-border);
    color: var(--ea-text);
    background: transparent;
    padding: .72rem 1.6rem;
}
.ea-btn-ghost:hover {
    border-color: var(--ea-accent);
    color: var(--ea-accent-text);
    background: var(--ea-accent-soft);
}

.ea-btn-sm { padding: .42rem 1rem; font-size: .85rem; }

.ea-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--ea-accent-text);
    font-weight: 600;
    font-size: .9rem;
}
.ea-link-arrow .ea-icon { transition: transform .28s var(--ea-ease); }
.ea-link-arrow:hover .ea-icon { transform: translateX(4px); }

/* --- 5. Navigation ---------------------------------------------------- */

.ea-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 1rem 0;
    background: transparent;
    overflow: visible;
    transition: background-color .3s var(--ea-ease), padding .3s var(--ea-ease),
                box-shadow .3s var(--ea-ease), border-color .3s var(--ea-ease);
    border-bottom: 1px solid transparent;
}

.ea-nav > .container {
    position: relative;
    overflow: visible;
}

.ea-nav.is-stuck,
.ea-nav.is-solid {
    padding: .55rem 0;
    background: color-mix(in srgb, var(--ea-bg) 88%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--ea-border);
    box-shadow: var(--ea-shadow-sm);
}

/* color-mix is widely supported now, but keep a solid fallback for old engines. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .ea-nav.is-stuck, .ea-nav.is-solid { background: var(--ea-bg); }
}

.ea-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--ea-text);
    position: relative;
    z-index: 2;
}

.ea-brand:hover { color: var(--ea-text); }

.ea-brand-logo {
    display: block;
    width: auto;
    height: 2.35rem;
    max-width: 9.5rem;
    object-fit: contain;
    transform: scale(1);
    transform-origin: left center;
    transition:
        transform .4s var(--ea-ease),
        filter .4s var(--ea-ease),
        height .4s var(--ea-ease),
        max-width .4s var(--ea-ease);
}

/* Large logo visually overflows the transparent nav at page top */
.ea-nav:not(.is-stuck):not(.is-solid) .ea-brand-logo {
    transform: scale(2.45) translateY(.55rem);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .38));
}

.ea-nav.is-stuck .ea-brand-logo,
.ea-nav.is-solid .ea-brand-logo {
    transform: scale(1) translateY(0);
    filter: none;
}

.ea-brand-logo--footer,
.ea-brand-logo--sidebar,
.ea-brand-logo--auth,
.ea-brand-logo--drawer,
.ea-brand-logo--static {
    height: 2.5rem;
    max-width: 11rem;
    width: auto;
    object-fit: contain;
    transform: none !important;
    filter: none;
}

.ea-brand-logo--footer {
    height: 3rem;
    max-width: 12.5rem;
}

.ea-brand-logo--sidebar {
    height: 2.15rem;
    max-width: 9.5rem;
}

.ea-brand-logo--auth {
    height: 2.75rem;
    max-width: 11rem;
}

.ea-brand-logo--drawer {
    height: 2.25rem;
    max-width: 9rem;
}

.ea-footer .ea-brand,
.ea-sidebar .ea-brand {
    margin-bottom: .35rem;
}

.ea-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--ea-accent);
    color: var(--ea-accent-text);
    font-family: var(--ea-serif);
    font-weight: 700;
    font-size: 1rem;
    flex: none;
    transform-origin: left center;
    transition: transform .35s var(--ea-ease), font-size .35s var(--ea-ease);
}

.ea-brand-text {
    display: flex;
    flex-direction: column;
    transform-origin: left center;
    transition: transform .35s var(--ea-ease);
}

.ea-brand-name {
    font-family: var(--ea-serif);
    font-size: 1.06rem;
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ea-brand-sub {
    display: block;
    font-size: .58rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ea-text-muted);
}

.ea-nav:not(.is-stuck):not(.is-solid) .ea-brand-mark {
    transform: scale(1.35);
}

.ea-nav:not(.is-stuck):not(.is-solid) .ea-brand-text {
    transform: scale(1.18) translateY(.12rem);
}

@media (max-width: 767.98px) {
    .ea-nav:not(.is-stuck):not(.is-solid) .ea-brand-logo {
        transform: scale(1.9) translateY(.4rem);
    }
}

.ea-nav-links { display: flex; align-items: center; gap: .35rem; }

.ea-nav-link {
    position: relative;
    padding: .5rem .85rem;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ea-text);
    opacity: .82;
}
.ea-nav-link::after {
    content: '';
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .25rem;
    height: 1px;
    background: var(--ea-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ea-ease);
}
.ea-nav-link:hover,
.ea-nav-link.active { opacity: 1; color: var(--ea-accent-text); }
.ea-nav-link:hover::after,
.ea-nav-link.active::after { transform: scaleX(1); }

.ea-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--ea-border);
    background: transparent;
    color: var(--ea-text);
    transition: border-color .25s var(--ea-ease), color .25s var(--ea-ease), background-color .25s var(--ea-ease);
}
.ea-icon-btn:hover {
    border-color: var(--ea-accent);
    color: var(--ea-accent-text);
    background: var(--ea-accent-soft);
}

/* Theme switcher: both glyphs are stacked and cross-faded. */
.ea-theme-toggle { position: relative; overflow: hidden; }
.ea-theme-toggle .ea-icon {
    position: absolute;
    transition: opacity .3s var(--ea-ease), transform .4s var(--ea-ease);
}
.ea-theme-toggle .ea-theme-sun { opacity: 0; transform: rotate(-45deg) scale(.6); }
.ea-theme-toggle .ea-theme-moon { opacity: 1; transform: none; }
[data-bs-theme="light"] .ea-theme-toggle .ea-theme-sun { opacity: 1; transform: none; }
[data-bs-theme="light"] .ea-theme-toggle .ea-theme-moon { opacity: 0; transform: rotate(45deg) scale(.6); }

/* --- 6. Offcanvas drawers -------------------------------------------- */

.offcanvas {
    background: var(--ea-surface);
    color: var(--ea-text);
    border-left: 1px solid var(--ea-border) !important;
    border-right: 1px solid var(--ea-border) !important;
}
.offcanvas-header { border-bottom: 1px solid var(--ea-border); }
.offcanvas-title { font-family: var(--ea-serif); }
.offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
[data-bs-theme="light"] .offcanvas .btn-close { filter: none; }

.ea-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .95rem .25rem;
    border-bottom: 1px solid var(--ea-border-soft);
    color: var(--ea-text);
    font-family: var(--ea-serif);
    font-size: 1.15rem;
}
.ea-drawer-link:hover { color: var(--ea-accent-text); padding-left: .6rem; transition: padding .25s var(--ea-ease); }

/* --- 7. Hero ---------------------------------------------------------- */

.ea-hero {
    position: relative;
    min-height: clamp(38rem, 92vh, 54rem);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--ea-bg);
}

.ea-hero-media {
    position: absolute;
    inset: -3%;
    width: 106%;
    height: 106%;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    filter: blur(7px) saturate(1.08) brightness(.88);
    animation: ea-hero-drift 28s ease-in-out infinite alternate;
    will-change: transform;
}

/* Soft readable veil kept sharp so copy stays crisp over the blur. */
.ea-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--ea-overlay);
}

/* No hero photograph configured: fall back to a composed gradient. */
.ea-hero-fallback {
    background:
        radial-gradient(38rem 30rem at 78% 18%, rgba(197, 160, 89, .28), transparent 65%),
        radial-gradient(46rem 34rem at 12% 88%, rgba(212, 175, 55, .16), transparent 62%),
        linear-gradient(145deg, var(--ea-bg) 0%, var(--ea-bg-alt) 55%, var(--ea-surface) 100%);
}

@keyframes ea-hero-drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to { transform: scale(1.14) translate3d(0, -2%, 0); }
}

/* Rising fairy lights + soft bokeh orbs */
.ea-hero-bokeh {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: screen;
}

.ea-hero-lights {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.ea-fairy {
    --left: 50%;
    --delay: 0s;
    --dur: 3s;
    --drift: 0vw;
    --size: 1;
    position: absolute;
    left: var(--left);
    bottom: -8%;
    width: calc(5px * var(--size));
    height: calc(5px * var(--size));
    border-radius: 50%;
    background: #fff8e7;
    box-shadow:
        0 0 5px 1px rgba(255, 236, 190, .95),
        0 0 14px 5px rgba(212, 175, 55, .55),
        0 0 32px 10px rgba(197, 160, 89, .28);
    opacity: 0;
    animation: ea-fairy-rise var(--dur) linear infinite;
    animation-delay: var(--delay);
    will-change: transform, opacity;
}

@keyframes ea-fairy-rise {
    0% {
        transform: translate3d(0, 0, 0) scale(.35);
        opacity: 0;
    }
    8% {
        opacity: .95;
    }
    55% {
        opacity: .75;
    }
    100% {
        transform: translate3d(var(--drift), -118vh, 0) scale(1.15);
        opacity: 0;
    }
}

.ea-bokeh {
    --left: 50%;
    --delay: 0s;
    --dur: 42s;
    --drift: 0vw;
    --size: 8rem;
    position: absolute;
    left: var(--left);
    bottom: -12%;
    width: var(--size);
    height: var(--size);
    margin-left: calc(var(--size) / -2);
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 40%,
            rgba(255, 248, 230, .95) 0%,
            rgba(255, 220, 150, .55) 28%,
            rgba(212, 175, 55, .28) 52%,
            transparent 72%);
    filter: blur(16px);
    opacity: 0;
    animation: ea-bokeh-rise var(--dur) linear infinite;
    animation-delay: var(--delay);
    will-change: transform, opacity;
}

@keyframes ea-bokeh-rise {
    0% {
        transform: translate3d(0, 10vh, 0) scale(.7);
        opacity: 0;
    }
    12% {
        opacity: .85;
    }
    55% {
        opacity: .65;
    }
    100% {
        transform: translate3d(var(--drift), -120vh, 0) scale(1.35);
        opacity: 0;
    }
}

[data-bs-theme="light"] .ea-hero-media {
    filter: blur(6px) saturate(1.05) brightness(1.02);
}

[data-bs-theme="light"] .ea-hero-bokeh {
    mix-blend-mode: normal;
}

[data-bs-theme="light"] .ea-bokeh {
    background:
        radial-gradient(circle at 42% 40%,
            rgba(255, 255, 255, .95) 0%,
            rgba(245, 220, 160, .55) 30%,
            rgba(197, 160, 89, .25) 55%,
            transparent 72%);
}

[data-bs-theme="light"] .ea-fairy {
    background: #fff;
    box-shadow:
        0 0 4px 1px rgba(255, 255, 255, .9),
        0 0 14px 5px rgba(197, 160, 89, .45),
        0 0 30px 10px rgba(212, 175, 55, .18);
}

.ea-hero-inner { position: relative; z-index: 3; padding: 8rem 0 5rem; }

.ea-hero h1 {
    font-size: clamp(2.6rem, 8vw, 5.6rem);
    line-height: .98;
    margin-bottom: 1.25rem;
}

.ea-hero-lead {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--ea-text-muted);
    max-width: 34rem;
}

/* Right-side photoreal scenes + morphing metallic wire */
.ea-hero-stage {
    position: relative;
    z-index: 1;
    width: min(100%, 26rem);
    aspect-ratio: 1;
    margin-inline: auto;
    isolation: isolate;
    pointer-events: none;
}

.ea-hero-stage-glow {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 45%,
            rgba(255, 236, 190, .42) 0%,
            rgba(212, 175, 55, .16) 38%,
            transparent 70%);
    filter: blur(14px);
    animation: ea-stage-breathe 8s ease-in-out infinite;
}

.ea-hero-wire-ring {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, .22);
    box-shadow:
        inset 0 0 40px rgba(212, 175, 55, .06),
        0 0 0 1px rgba(212, 175, 55, .05);
    animation: ea-wire-ring-pulse 8s ease-in-out infinite;
}

.ea-hero-wire-stage {
    position: absolute;
    inset: 9%;
    display: grid;
    place-items: center;
    align-content: center;
}

.ea-hero-photo-stack {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    background: rgba(8, 9, 12, .55);
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, .45),
        0 18px 40px rgba(0, 0, 0, .35);
}

.ea-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.06);
    filter: blur(8px) saturate(.9);
    transition:
        opacity .85s var(--ea-ease),
        transform 1.1s var(--ea-ease),
        filter .85s var(--ea-ease);
}

.ea-hero-photo.is-active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1.05);
    z-index: 1;
}

.ea-hero-stage.is-morphing .ea-hero-photo.is-active {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(10px) saturate(.8);
}

.ea-hero-photo-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 42%,
            transparent 34%,
            rgba(11, 12, 16, .28) 68%,
            rgba(11, 12, 16, .72) 100%);
}

.ea-hero-embers {
    position: absolute;
    inset: 18% 22% 28%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.ea-hero-ember {
    position: absolute;
    bottom: 8%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffcf6b;
    box-shadow: 0 0 8px 2px rgba(255, 140, 40, .85);
    animation: ea-ember-rise 2.4s linear infinite;
    opacity: 0;
}

.ea-hero-wire-svg {
    position: relative;
    z-index: 4;
    width: min(100%, 17.5rem);
    height: auto;
    overflow: visible;
    transition: opacity .55s var(--ea-ease);
}

.ea-hero-stage.is-holding .ea-hero-wire-svg { opacity: .2; }
.ea-hero-stage.is-morphing .ea-hero-wire-svg { opacity: 1; }

.ea-hero-wire-path {
    stroke-width: 2.35;
    opacity: .95;
}

.ea-hero-wire-trail {
    stroke: rgba(255, 236, 190, .42);
    stroke-width: 4;
    opacity: .5;
}

@keyframes ea-stage-breathe {
    0%, 100% { transform: scale(1); opacity: .88; }
    50% { transform: scale(1.06); opacity: 1; }
}

@keyframes ea-wire-ring-pulse {
    0%, 100% { transform: scale(1); opacity: .7; }
    50% { transform: scale(1.03); opacity: 1; }
}

@keyframes ea-ember-rise {
    0% {
        transform: translate3d(0, 10px, 0) scale(.6);
        opacity: 0;
    }
    15% { opacity: 1; }
    100% {
        transform: translate3d(var(--drift, 0), -110px, 0) scale(.2);
        opacity: 0;
    }
}

[data-bs-theme="light"] .ea-hero-stage-glow {
    background:
        radial-gradient(circle at 50% 45%,
            rgba(255, 255, 255, .78) 0%,
            rgba(212, 175, 55, .18) 40%,
            transparent 70%);
}

[data-bs-theme="light"] .ea-hero-photo-stack {
    background: rgba(255, 255, 255, .45);
    box-shadow:
        inset 0 0 30px rgba(255, 255, 255, .25),
        0 16px 36px rgba(20, 22, 28, .12);
}

[data-bs-theme="light"] .ea-hero-photo-shade {
    background:
        radial-gradient(circle at 50% 42%,
            transparent 36%,
            rgba(250, 248, 244, .2) 70%,
            rgba(250, 248, 244, .62) 100%);
}

[data-bs-theme="light"] .ea-hero-wire-ring {
    border-color: rgba(197, 160, 89, .28);
}

@media (max-width: 991.98px) {
    .ea-hero-stage {
        width: min(72vw, 18rem);
        margin-top: 1.25rem;
        margin-bottom: 2.5rem;
    }

    .ea-hero-wire-svg { width: min(100%, 14rem); }
}

.ea-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    z-index: 3;
    font-size: .62rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--ea-text-muted);
    display: grid;
    justify-items: center;
    gap: .5rem;
}
.ea-scroll-hint span.ea-scroll-line {
    width: 1px;
    height: 42px;
    background: linear-gradient(180deg, var(--ea-accent), transparent);
    animation: ea-scroll 2.4s ease-in-out infinite;
}
@keyframes ea-scroll {
    0%, 100% { opacity: .35; transform: scaleY(.6); }
    50% { opacity: 1; transform: scaleY(1); }
}

/* --- 8. Cards --------------------------------------------------------- */

.ea-card {
    position: relative;
    background: var(--ea-surface);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius);
    overflow: hidden;
    height: 100%;
    transition: transform .4s var(--ea-ease), border-color .4s var(--ea-ease), box-shadow .4s var(--ea-ease);
}
.ea-card:hover {
    transform: translateY(-6px);
    border-color: var(--ea-accent);
    box-shadow: var(--ea-shadow);
}

.ea-card-body { padding: 1.6rem; }

.ea-service-card { padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: .9rem; }
.ea-service-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--ea-accent-text);
    background: var(--ea-accent-soft);
    border: 1px solid var(--ea-border);
}
.ea-service-card h3 { font-size: 1.3rem; margin: 0; }

/* Media frame with blur-up placeholder */
.ea-frame {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--ea-surface-2);
    aspect-ratio: 4 / 5;
}
.ea-frame-wide { aspect-ratio: 16 / 10; }
.ea-frame-video { aspect-ratio: 16 / 9; }
.ea-frame-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.ea-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s var(--ea-ease), opacity .5s ease;
}
.ea-card:hover .ea-frame img,
.ea-frame:hover img { transform: scale(1.06); }

.ea-frame-lqip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px);
    transform: scale(1.1);
    transition: opacity .5s ease;
}
.ea-frame img.is-loaded + .ea-frame-lqip,
.ea-frame.is-loaded .ea-frame-lqip { opacity: 0; }

.ea-frame-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.4rem;
    background: var(--ea-overlay);
    color: var(--ea-text);
}

.ea-album-count {
    position: absolute;
    top: .85rem;
    right: .85rem;
    z-index: 2;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
}

.ea-album-open {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ea-accent-text);
    opacity: .92;
}

.ea-badge {
    display: inline-block;
    padding: .22rem .7rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: var(--ea-accent-soft);
    color: var(--ea-accent-text);
    border: 1px solid var(--ea-border);
}

/* --- 9. Portfolio filter --------------------------------------------- */

.ea-filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ea-filter-btn {
    padding: .45rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--ea-border);
    background: transparent;
    color: var(--ea-text-muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: all .28s var(--ea-ease);
}
.ea-filter-btn:hover { color: var(--ea-accent-text); border-color: var(--ea-accent); }
.ea-filter-btn.active {
    background: linear-gradient(135deg, var(--ea-accent-strong), var(--ea-accent));
    color: var(--ea-on-accent);
    border-color: transparent;
}

.ea-grid-item { transition: opacity .35s var(--ea-ease), transform .35s var(--ea-ease); }
.ea-grid-item.is-hidden { display: none; }

/* --- 10. Stats and promise ------------------------------------------- */

.ea-stat { text-align: center; }
.ea-stat-value {
    font-family: var(--ea-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--ea-accent-text);
    line-height: 1;
}
.ea-stat-label {
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ea-text-muted);
}

.ea-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.ea-check-list li { display: flex; gap: .75rem; align-items: flex-start; }
.ea-check-list .ea-icon { color: var(--ea-accent-text); margin-top: .3rem; }

/* --- 11. Testimonials ------------------------------------------------ */

.ea-quote-card {
    background: var(--ea-surface);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius);
    padding: 2.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.ea-quote-mark { color: var(--ea-accent); opacity: .55; }
.ea-quote-text {
    font-family: var(--ea-serif);
    font-size: 1.2rem;
    line-height: 1.55;
    font-style: italic;
}
.ea-stars { display: inline-flex; gap: .15rem; color: var(--ea-accent-strong); }
.ea-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ea-accent-soft);
    color: var(--ea-accent-text);
    border: 1px solid var(--ea-border);
    font-weight: 700;
    font-size: .82rem;
    flex: none;
}

.carousel-indicators [data-bs-target] {
    width: 28px;
    height: 2px;
    background: var(--ea-border);
    opacity: 1;
    border: 0;
}
.carousel-indicators .active { background: var(--ea-accent-strong); }

/* --- 12. CTA band ---------------------------------------------------- */

.ea-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(40rem 24rem at 20% 0%, rgba(197, 160, 89, .18), transparent 60%),
        var(--ea-bg-alt);
    border-top: 1px solid var(--ea-border);
    border-bottom: 1px solid var(--ea-border);
}

/* --- 13. Footer ------------------------------------------------------ */

.ea-footer {
    background: var(--ea-surface);
    border-top: 1px solid var(--ea-border);
    padding: 4rem 0 2rem;
}
.ea-footer h6 {
    font-size: .7rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ea-accent-text);
    margin-bottom: 1.1rem;
}
.ea-footer a { color: var(--ea-text-muted); font-size: .92rem; }
.ea-footer a:hover { color: var(--ea-accent-text); }
.ea-footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.ea-footer-list button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--ea-text-muted);
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
}
.ea-footer-list button:hover { color: var(--ea-accent-text); }

.ea-made-by {
    font-size: .8rem;
    letter-spacing: .02em;
    text-decoration: none;
}
.ea-made-by:hover { color: var(--ea-accent-text); }
.ea-made-heart {
    color: var(--ea-accent);
    margin: 0 .15em;
}

.ea-social { display: flex; gap: .5rem; }
.ea-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--ea-border);
    color: var(--ea-text-muted);
}
.ea-social a:hover {
    color: var(--ea-on-accent);
    background: var(--ea-accent);
    border-color: transparent;
}

/* --- 14. Forms ------------------------------------------------------- */

.form-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ea-text-muted);
    margin-bottom: .4rem;
}

.form-control,
.form-select {
    background: var(--ea-surface-2);
    border: 1px solid var(--ea-border);
    color: var(--ea-text);
    border-radius: var(--ea-radius-sm);
    padding: .7rem .95rem;
}
.form-control:focus,
.form-select:focus {
    background: var(--ea-surface-2);
    border-color: var(--ea-accent);
    color: var(--ea-text);
    box-shadow: 0 0 0 .2rem var(--ea-accent-soft);
}
.form-control::placeholder { color: var(--ea-text-muted); opacity: .75; }
.form-text { color: var(--ea-text-muted); font-size: .8rem; }

.form-check-input { background-color: var(--ea-surface-2); border-color: var(--ea-border); }
.form-check-input:checked { background-color: var(--ea-accent); border-color: var(--ea-accent); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 .2rem var(--ea-accent-soft); }

/* Honeypot decoys: pushed out of sight without display:none, which the more
   careful bots treat as a signal to skip the field. */
.ea-decoy {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

.ea-captcha-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ea-captcha-img {
    border-radius: var(--ea-radius-sm);
    border: 1px solid var(--ea-border);
    background: var(--ea-surface-2);
}
.ea-captcha-refresh {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--ea-border);
    background: transparent;
    color: var(--ea-accent-text);
    display: grid;
    place-items: center;
}
.ea-captcha-refresh:hover { background: var(--ea-accent-soft); }
.ea-captcha-row .form-control { flex: 1 1 8rem; min-width: 8rem; }

/* --- 15. Alerts, toasts, modals ------------------------------------- */

.toast-container { z-index: 1100; }
.toast {
    background: var(--ea-surface);
    border: 1px solid var(--ea-border);
    color: var(--ea-text);
    border-radius: var(--ea-radius-sm);
    box-shadow: var(--ea-shadow);
}
.toast.ea-toast-success { border-left: 3px solid #3fae7d; }
.toast.ea-toast-error { border-left: 3px solid #e06a6a; }
.toast.ea-toast-info { border-left: 3px solid var(--ea-accent); }

.alert {
    border-radius: var(--ea-radius-sm);
    border: 1px solid var(--ea-border);
    background: var(--ea-surface-2);
    color: var(--ea-text);
}
.alert-success { border-left: 3px solid #3fae7d; }
.alert-danger { border-left: 3px solid #e06a6a; }
.alert-warning { border-left: 3px solid var(--ea-accent); }

.modal-content {
    background: var(--ea-surface);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius);
    color: var(--ea-text);
}
.modal-header, .modal-footer { border-color: var(--ea-border); }
.modal-title { font-family: var(--ea-serif); }
.modal .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
[data-bs-theme="light"] .modal .btn-close { filter: none; }

.ea-dialog .modal-body {
    font-size: .95rem;
    line-height: 1.5;
}
.ea-dialog .btn-danger {
    background: #c24b4b;
    border-color: #c24b4b;
    color: #fff;
}
.ea-dialog .btn-danger:hover {
    background: #a93f3f;
    border-color: #a93f3f;
    color: #fff;
}

/* Lightbox */
.ea-lightbox-img {
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--ea-radius-sm);
}
.ea-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--ea-border);
    background: var(--ea-surface);
    color: var(--ea-text);
    z-index: 3;
}
.ea-lightbox-prev { left: .5rem; }
.ea-lightbox-next { right: .5rem; }

/* --- 16. Blog -------------------------------------------------------- */

.ea-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    font-size: .82rem;
    color: var(--ea-text-muted);
}
.ea-post-meta span { display: inline-flex; align-items: center; gap: .35rem; }

.ea-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--ea-accent), var(--ea-accent-strong));
    z-index: 1040;
    transition: width .1s linear;
}

.ea-prose { font-size: 1.06rem; line-height: 1.85; color: var(--ea-text); }
.ea-prose > * + * { margin-top: 1.25rem; }
.ea-prose h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-top: 2.75rem;
    padding-top: .5rem;
    scroll-margin-top: 6rem;
}
.ea-prose h3 {
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    margin-top: 2rem;
    scroll-margin-top: 6rem;
}
.ea-prose a { color: var(--ea-accent-text); border-bottom: 1px solid var(--ea-border); }
.ea-prose a:hover { border-bottom-color: var(--ea-accent); }
.ea-prose ul, .ea-prose ol { padding-left: 1.35rem; display: grid; gap: .55rem; }
.ea-prose li::marker { color: var(--ea-accent); }
.ea-prose blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 2px solid var(--ea-accent);
    background: var(--ea-surface-2);
    border-radius: 0 var(--ea-radius-sm) var(--ea-radius-sm) 0;
    font-family: var(--ea-serif);
    font-size: 1.15rem;
    font-style: italic;
}
.ea-prose img { max-width: 100%; height: auto; border-radius: var(--ea-radius-sm); }
.ea-prose pre {
    background: var(--ea-surface-2);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    padding: 1rem 1.15rem;
    overflow-x: auto;
}
.ea-prose code {
    font-size: .9em;
    color: var(--ea-accent-text);
    background: var(--ea-accent-soft);
    padding: .12rem .38rem;
    border-radius: 4px;
}
.ea-prose pre code { background: none; padding: 0; color: var(--ea-text); }
.ea-prose table { width: 100%; border-collapse: collapse; }
.ea-prose th, .ea-prose td { border: 1px solid var(--ea-border); padding: .6rem .8rem; }

.ea-toc {
    position: sticky;
    top: 6.5rem;
    padding: 1.35rem;
    background: var(--ea-surface);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius);
}
.ea-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.ea-toc a { color: var(--ea-text-muted); font-size: .88rem; }
.ea-toc a:hover, .ea-toc a.is-active { color: var(--ea-accent-text); }
.ea-toc .is-sub { padding-left: .9rem; font-size: .82rem; }

/* Share controls: plain links, no third-party widgets. */
.ea-share { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.ea-share a, .ea-share button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--ea-border);
    background: transparent;
    color: var(--ea-text-muted);
    transition: all .25s var(--ea-ease);
}
.ea-share a:hover, .ea-share button:hover {
    color: var(--ea-on-accent);
    background: var(--ea-accent);
    border-color: transparent;
    transform: translateY(-2px);
}
.ea-share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ea-article-hero { position: relative; padding: 8.5rem 0 3.5rem; }
.ea-article-cover {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.ea-article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.92);
}
.ea-article-cover-shade {
    position: absolute;
    inset: 0;
    background: var(--ea-overlay);
    background-color: color-mix(in srgb, var(--ea-bg) 42%, transparent);
}
.ea-article-hero-inner { position: relative; z-index: 1; max-width: 52rem; }
.ea-article-hero .ea-display { max-width: 16ch; }
.ea-lead { font-size: 1.15rem; color: var(--ea-text-muted); max-width: 40rem; }

.ea-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .65rem;
    align-items: center;
}
.ea-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
}
.ea-pagination a {
    min-width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--ea-border);
    border-radius: 8px;
    color: var(--ea-text-muted);
    font-size: .9rem;
}
.ea-pagination a.is-active,
.ea-pagination a:hover {
    color: var(--ea-on-accent);
    background: var(--ea-accent);
    border-color: transparent;
}

.ea-comment-avatar {
    flex: 0 0 2.6rem;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ea-accent-soft, rgba(197,160,89,.16));
    color: var(--ea-accent-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.ea-comment-list > .ea-comment:last-child { border-bottom: 0; }

.ea-tag-pill {
    display: inline-block;
    padding: .3rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--ea-border);
    color: var(--ea-text-muted);
    font-size: .76rem;
}
.ea-tag-pill:hover { color: var(--ea-accent-text); border-color: var(--ea-accent); }

/* Comments */
.ea-comment {
    display: flex;
    gap: 1rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--ea-border-soft);
}
.ea-comment-replies { margin-left: 3.4rem; border-left: 1px solid var(--ea-border-soft); padding-left: 1.25rem; }
.ea-comment-author { font-weight: 700; font-size: .95rem; }
.ea-comment-body { font-size: .96rem; }
.ea-comment-staff {
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ea-accent-text);
    border: 1px solid var(--ea-border);
    border-radius: 999px;
    padding: .1rem .5rem;
}

.pagination { --bs-pagination-bg: transparent; }
.page-link {
    background: transparent;
    border: 1px solid var(--ea-border);
    color: var(--ea-text);
    margin: 0 .15rem;
    border-radius: 8px !important;
}
.page-link:hover { background: var(--ea-accent-soft); color: var(--ea-accent-text); border-color: var(--ea-accent); }
.page-item.active .page-link {
    background: var(--ea-accent);
    border-color: var(--ea-accent);
    color: var(--ea-on-accent);
}
.page-item.disabled .page-link { opacity: .4; }

/* --- 17. Admin shell ------------------------------------------------- */

.ea-admin { min-height: 100vh; background: var(--ea-bg); }

.ea-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    background: var(--ea-surface);
    border-right: 1px solid var(--ea-border);
    padding: 1.25rem 1rem;
    overflow-y: auto;
    z-index: 1035;
    transition: transform .3s var(--ea-ease);
}

.ea-sidebar-group {
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ea-text-muted);
    margin: 1.4rem .65rem .5rem;
}

.ea-sidebar-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border-radius: var(--ea-radius-sm);
    color: var(--ea-text);
    font-size: .9rem;
    font-weight: 500;
    opacity: .82;
}
.ea-sidebar-link:hover { background: var(--ea-surface-2); opacity: 1; }
.ea-sidebar-link.active {
    background: var(--ea-accent-soft);
    color: var(--ea-accent-text);
    opacity: 1;
    box-shadow: inset 2px 0 0 var(--ea-accent);
}
.ea-sidebar-link .ea-icon { color: currentColor; }
.ea-sidebar-count {
    margin-left: auto;
    background: var(--ea-accent);
    color: var(--ea-on-accent);
    font-size: .66rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 999px;
}

.ea-admin-main { margin-left: 260px; min-width: 0; }

.ea-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.5rem;
    background: color-mix(in srgb, var(--ea-bg) 90%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ea-border);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .ea-topbar { background: var(--ea-bg); }
}

.ea-admin-body { padding: 1.75rem 1.5rem 4rem; }

.ea-stat-card {
    background: var(--ea-surface);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius);
    padding: 1.35rem;
    height: 100%;
    color: inherit;
    transition: border-color .2s var(--ea-ease), box-shadow .2s var(--ea-ease);
}
a.ea-stat-card:hover {
    border-color: var(--ea-accent);
    color: inherit;
}
.ea-stat-card.is-active {
    border-color: var(--ea-accent);
    box-shadow: 0 0 0 1px var(--ea-accent);
}
.ea-stat-card .ea-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--ea-accent-soft);
    color: var(--ea-accent-text);
    margin-bottom: .9rem;
}
.ea-stat-card h3 { font-size: 1.9rem; margin: 0; color: var(--ea-text); }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ea-text);
    --bs-table-border-color: var(--ea-border);
    --bs-table-hover-bg: var(--ea-surface-2);
    --bs-table-hover-color: var(--ea-text);
    --bs-table-striped-bg: var(--ea-surface-2);
    --bs-table-striped-color: var(--ea-text);
}
.table > thead {
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ea-text-muted);
}
.table > :not(caption) > * > * { padding: .8rem .75rem; }

.ea-panel {
    background: var(--ea-surface);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius);
    overflow: hidden;
}
.ea-panel-head {
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--ea-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.ea-panel-body { padding: 1.35rem; }

/* Keep long URLs / code samples inside panels */
.ea-break-box {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ea-inline-code {
    display: inline;
    padding: .1rem .35rem;
    border-radius: .25rem;
    background: var(--ea-surface-2);
    border: 1px solid var(--ea-border-soft);
    font-size: .85em;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ea-code-block {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: .75rem .9rem;
    border-radius: var(--ea-radius-sm);
    background: var(--ea-surface-2);
    border: 1px solid var(--ea-border-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow-x: auto;
}
.min-w-0 { min-width: 0; }

.dropdown-menu {
    background: var(--ea-surface);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    box-shadow: var(--ea-shadow);
}
.dropdown-item { color: var(--ea-text); }
.dropdown-item:hover { background: var(--ea-surface-2); color: var(--ea-accent-text); }
.dropdown-divider { border-color: var(--ea-border); }

.nav-tabs { border-bottom-color: var(--ea-border); }
.nav-tabs .nav-link { color: var(--ea-text-muted); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover { color: var(--ea-accent-text); border-bottom-color: var(--ea-border); }
.nav-tabs .nav-link.active {
    color: var(--ea-accent-text);
    background: transparent;
    border-bottom-color: var(--ea-accent);
}

.ea-leads-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1rem;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ea-leads-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.ea-leads-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--ea-border);
    background: var(--ea-surface);
    color: var(--ea-text-muted);
    font-size: .78rem;
    text-decoration: none;
    transition: border-color .2s var(--ea-ease), color .2s var(--ea-ease), background .2s var(--ea-ease);
}

.ea-leads-chip strong {
    color: var(--ea-text);
    font-weight: 600;
}

.ea-leads-chip:hover,
.ea-leads-chip.is-active {
    border-color: var(--ea-accent);
    color: var(--ea-accent-text);
    background: var(--ea-accent-soft);
}

.ea-leads-filters .ea-panel-body {
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.ea-panel > summary.ea-panel-head::-webkit-details-marker { display: none; }
.ea-panel > summary.ea-panel-head::marker { content: ''; }

/* --- 18. Kanban ------------------------------------------------------ */

.ea-kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(17rem, 1fr);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x proximity;
}

.ea-kanban-col {
    background: var(--ea-surface);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius);
    display: flex;
    flex-direction: column;
    min-height: 16rem;
    scroll-snap-align: start;
    transition: border-color .2s var(--ea-ease), background-color .2s var(--ea-ease);
}
.ea-kanban-col.is-drop-target {
    border-color: var(--ea-accent);
    background: var(--ea-accent-soft);
}
.ea-kanban-head {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--ea-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}
.ea-kanban-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ea-text-muted);
}
.ea-kanban-hint {
    display: block;
    margin-top: .25rem;
    font-size: .68rem;
    line-height: 1.35;
    color: var(--ea-text-muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    max-width: 12rem;
}
.ea-kanban-list { padding: .75rem; display: grid; gap: .65rem; flex: 1; align-content: start; }

.ea-lead-card {
    background: var(--ea-surface-2);
    border: 1px solid var(--ea-border-soft);
    border-radius: var(--ea-radius-sm);
    padding: .85rem;
    cursor: grab;
}
.ea-lead-card:active { cursor: grabbing; }
.ea-lead-card.is-dragging { opacity: .45; }
.ea-lead-card:hover { border-color: var(--ea-accent); }
.ea-lead-name { font-weight: 700; font-size: .92rem; }
.ea-lead-meta { font-size: .76rem; color: var(--ea-text-muted); }

/* On fine pointers (mouse), drag is the primary move action — hide the noisy select. */
@media (hover: hover) and (pointer: fine) {
    .ea-lead-stage-label,
    .ea-lead-stage-select {
        display: none;
    }
}

/* --- 19. Portal ------------------------------------------------------ */

.ea-countdown { display: flex; gap: .75rem; flex-wrap: wrap; }
.ea-countdown-unit {
    min-width: 4.5rem;
    padding: .9rem .5rem;
    text-align: center;
    background: var(--ea-surface-2);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
}
.ea-countdown-value {
    display: block;
    font-family: var(--ea-serif);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--ea-accent-text);
}
.ea-countdown-label {
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ea-text-muted);
}

.progress { background: var(--ea-surface-2); border-radius: 999px; height: .55rem; }
.progress-bar { background: linear-gradient(90deg, var(--ea-accent), var(--ea-accent-strong)); }

.ea-rating-input { display: flex; gap: .35rem; }
.ea-rating-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.ea-rating-input label { cursor: pointer; color: var(--ea-border); transition: color .2s ease; }
.ea-rating-input label.is-on { color: var(--ea-accent-strong); }

/* --- 20. Markdown editor -------------------------------------------- */

.ea-editor { border: 1px solid var(--ea-border); border-radius: var(--ea-radius); overflow: hidden; }
.ea-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .5rem;
    background: var(--ea-surface-2);
    border-bottom: 1px solid var(--ea-border);
}
.ea-editor-toolbar button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--ea-text-muted);
    border-radius: 6px;
    padding: .3rem .55rem;
    font-size: .8rem;
    font-weight: 600;
}
.ea-editor-toolbar button:hover { color: var(--ea-accent-text); border-color: var(--ea-border); }
.ea-editor-panes { display: grid; grid-template-columns: 1fr; }
.ea-editor-panes.is-split { grid-template-columns: 1fr 1fr; }
.ea-editor textarea {
    border: 0;
    border-radius: 0;
    min-height: 28rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92rem;
    line-height: 1.7;
    resize: vertical;
}
.ea-editor textarea:focus { box-shadow: none; }
.ea-editor-preview {
    padding: 1.25rem;
    border-left: 1px solid var(--ea-border);
    overflow-y: auto;
    max-height: 34rem;
}
.ea-editor-drop { outline: 2px dashed var(--ea-accent); outline-offset: -6px; }

/* --- 21. Responsive -------------------------------------------------- */

@media (max-width: 991.98px) {
    .ea-sidebar { transform: translateX(-100%); }
    .ea-sidebar.is-open { transform: none; box-shadow: var(--ea-shadow); }
    .ea-admin-main { margin-left: 0; }
    .ea-editor-panes.is-split { grid-template-columns: 1fr; }
    .ea-editor-preview { border-left: 0; border-top: 1px solid var(--ea-border); }
}

@media (max-width: 767.98px) {
    .ea-hero { min-height: 90vh; }
    .ea-hero-inner { padding: 7rem 0 4rem; }
    .ea-comment-replies { margin-left: 1.25rem; }
    .ea-quote-text { font-size: 1.08rem; }
    .ea-admin-body { padding: 1.25rem 1rem 3rem; }
    .ea-topbar { padding: .75rem 1rem; }
}

/* --- 22. Motion and print ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .ea-hero-media {
        animation: none;
        transform: scale(1.06);
        filter: blur(4px) saturate(1.04) brightness(.9);
    }
    .ea-fairy,
    .ea-bokeh,
    .ea-hero-bokeh { display: none; }
    .ea-hero-wire-ring,
    .ea-hero-stage-glow { animation: none !important; }
}

@media print {
    .ea-nav, .ea-footer, .ea-share, .ea-progress, .offcanvas, .ea-sidebar, .ea-topbar { display: none !important; }
    body { background: #fff; color: #000; }
    .ea-admin-main { margin-left: 0; }
}

/* Reveal-on-scroll, applied by app.js only when JS is available. */
.ea-reveal { opacity: 0; transform: translateY(18px); }
.ea-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity .7s var(--ea-ease), transform .7s var(--ea-ease);
}