:root{
--mde-border-gold:#c99637;
--mde-gold-border-width:2px;
--mde-border-white:rgba(255,255,255,.9);
--mde-white-border-width:2px;
--mde-menu-text:#835915;
--mde-glass-opacity:.68;
--mde-gold-strength:1;
--mde-glass-blur:22px;
--mde-radius:26px;
--mde-safe-zone:95px;
--mde-gold-fade:90px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.mde-body{
min-height:100vh;
font-family:Georgia,"Times New Roman",serif;
color:#5e4937;
background:linear-gradient(180deg,#fffefa 0%,#faf6ed 58%,#f3ead9 100%);
}
.mde-header{
position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:28px;padding:18px 5vw;
background:rgba(255,255,255,.58);backdrop-filter:blur(18px);border-bottom:1px solid rgba(185,138,59,.28)
}
.mde-brand{position:relative;z-index:2;display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.mde-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:var(--mde-gold-border-width) solid var(--mde-border-gold);color:#a57426}
.mde-brand-copy{display:flex;flex-direction:column}.mde-brand-copy strong{font-size:26px;font-style:italic;color:#8d672b}.mde-brand-copy small{font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.mde-nav{position:relative;z-index:3;margin-left:auto;display:flex;gap:24px;align-items:center}
.mde-nav>a,.mde-menu-btn{background:none;border:0;color:#705845;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:12px;padding:12px 4px;cursor:pointer}
.mde-menu-wrap{position:relative}


/* v1.3 RESTORED DROPDOWN TAB CONTAINER */
.mde-dropdown{
    position:absolute;
    top:calc(100% + 14px);
    left:50%;
    width:360px;
    min-height:calc(var(--mde-safe-zone) + 120px);
    overflow:hidden;

    border-radius:var(--mde-radius);
    border:var(--mde-gold-border-width) solid var(--mde-border-gold);
    background:var(--mde-tab-color, rgba(255,255,255,.18));

    box-shadow:
        inset 0 0 0 var(--mde-white-border-width) var(--mde-border-white),
        0 26px 62px rgba(73,48,18,.18);

    transform:translate(-50%,-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    isolation:isolate;
}

.mde-menu-wrap:hover .mde-dropdown,
.mde-menu-wrap:focus-within .mde-dropdown,
.mde-menu-wrap.is-open .mde-dropdown{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}

/* MOVING REFLECTION LAYER — oversized so it can travel without exposing edges */
.mde-reflection-image{
position:absolute;
left:50%;
top:50%;
z-index:1.5;
pointer-events:none;
width:var(--mde-reflection-size,220%);
height:var(--mde-reflection-size,220%);
background-image:var(--mde-reflection-url);
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
opacity:var(--mde-reflection-opacity,.30);
transform:translate(
    calc(-50% + var(--mde-reflect-x,0px)),
    calc(-50% + var(--mde-reflect-y,0px))
);
transition:transform var(--mde-reflection-return,550ms) cubic-bezier(.2,.7,.2,1);
will-change:transform;
}
.mde-reflection-image.is-moving{
transition:transform 70ms linear;
}

/* ORIGINAL PNG MODE */
.mde-sandblast-original{
position:absolute;inset:0;z-index:2;pointer-events:none;
background-image:var(--mde-sand-url);
background-repeat:no-repeat;
background-size:var(--mde-sand-size) auto;
background-position:var(--mde-sand-x) var(--mde-sand-y);
opacity:var(--mde-sand-opacity);
filter:brightness(var(--mde-sand-brightness)) contrast(var(--mde-sand-contrast));
}

/* TINT MODE: PNG ALPHA IS USED AS A MASK, SO BLACK CAN BECOME WHITE/GOLD/ANY COLOUR */
.mde-sandblast-tint{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:var(--mde-sand-color);
opacity:var(--mde-sand-opacity);

-webkit-mask-image:var(--mde-sand-url);
-webkit-mask-repeat:no-repeat;
-webkit-mask-size:var(--mde-sand-size) auto;
-webkit-mask-position:var(--mde-sand-x) var(--mde-sand-y);

mask-image:var(--mde-sand-url);
mask-repeat:no-repeat;
mask-size:var(--mde-sand-size) auto;
mask-position:var(--mde-sand-x) var(--mde-sand-y);
}

.mde-gold-image{
position:absolute;z-index:3;left:0;right:0;bottom:0;height:calc(var(--mde-safe-zone) + var(--mde-gold-fade));
background:url('gold-bottom.png') center bottom/100% 100% no-repeat;opacity:var(--mde-gold-strength);pointer-events:none;
-webkit-mask-image:linear-gradient(to top,#000 0,#000 var(--mde-safe-zone),transparent calc(var(--mde-safe-zone) + var(--mde-gold-fade)));
mask-image:linear-gradient(to top,#000 0,#000 var(--mde-safe-zone),transparent calc(var(--mde-safe-zone) + var(--mde-gold-fade)));
}
.mde-safe-zone{position:absolute;left:0;right:0;bottom:0;height:var(--mde-safe-zone);z-index:4;pointer-events:none}

.mde-dropdown-links{position:relative;z-index:5;padding:10px 0 var(--mde-safe-zone)}
.mde-dropdown-links a{display:flex;justify-content:space-between;align-items:center;min-height:58px;padding:0 24px;color:var(--mde-menu-text);text-decoration:none;text-transform:uppercase;border-bottom:1px solid rgba(134,99,44,.15)}
.mde-dropdown-links b{color:var(--mde-border-gold);font-size:26px}


@media(max-width:900px){
    .mde-header-logo-image{
        width:min(var(--mde-header-logo-width,240px),55vw);
        max-height:70px;
    }

    .mde-hero{
        min-height:max(560px,var(--mde-hero-height,78vh));
    }

    .mde-hero-bg{
        background-size:cover;
    }

    .mde-hero-logo{
        width:min(var(--mde-hero-logo-width,420px),70vw);
        left:50%;
        top:58%;
    }

    .mde-menu-top,
    .mde-child-row{
        grid-template-columns:1fr;
    }
}


/* v1.4 HEADER ALIGNMENT */
.mde-header{
    justify-content:flex-start;
}
.mde-brand{
    margin-right:auto;
}
.mde-nav{
    margin-left:auto;
}


/* v1.5 SAFETY FIX — prevents logo images from taking over the page */
.mde-header{
    min-height:96px;
    max-height:120px;
    overflow:visible;
    padding:12px 5vw !important;
    align-items:center;
}

.mde-brand{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    max-width:320px;
    max-height:88px;
    overflow:hidden;
}

.mde-header-logo-image{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:var(--mde-header-logo-width,210px) !important;
    max-height:78px !important;
    object-fit:contain !important;
    object-position:left center !important;
    transform:translate(var(--mde-header-logo-x,0px),var(--mde-header-logo-y,0px)) !important;
}

.mde-nav{
    margin-left:auto !important;
    flex:0 1 auto;
}

/* Cover area is always its own isolated section */
.mde-hero{
    position:relative !important;
    width:100% !important;
    min-height:var(--mde-hero-height,78vh) !important;
    overflow:hidden !important;
    padding:0 !important;
    margin:0 !important;
    background:#f8f4ec !important;
    isolation:isolate;
}

.mde-hero-bg{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    width:100% !important;
    height:100% !important;
    background-image:var(--mde-hero-bg-url) !important;
    background-repeat:no-repeat !important;
    background-position:var(--mde-hero-bg-x,50%) var(--mde-hero-bg-y,50%) !important;
    background-size:cover !important;
    transform:scale(calc(var(--mde-hero-bg-zoom,100%) / 100)) !important;
    transform-origin:center center !important;
}

.mde-hero-fade{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
}

.mde-hero-logo{
    position:absolute !important;
    z-index:2 !important;
    left:var(--mde-hero-logo-x,78%) !important;
    top:var(--mde-hero-logo-y,50%) !important;
    width:auto !important;
    height:auto !important;
    max-width:min(var(--mde-hero-logo-width,340px),32vw) !important;
    max-height:55% !important;
    object-fit:contain !important;
    transform:translate(-50%,-50%) !important;
    opacity:var(--mde-hero-logo-opacity,1) !important;
    pointer-events:none !important;
}

/* Keep the dropdown styling independent from hero/header images */
.mde-dropdown{
    position:absolute !important;
    overflow:hidden !important;
}
.mde-dropdown img,
.mde-dropdown .mde-reflection-image,
.mde-dropdown .mde-sandblast-original,
.mde-dropdown .mde-sandblast-tint{
    max-width:none !important;
}

/* Prevent accidental horizontal overflow from huge image assets */
html,body,.mde-page-shell{
    max-width:100%;
    overflow-x:hidden !important;
}

@media(max-width:900px){
    .mde-header{
        min-height:82px;
        max-height:none;
    }
    .mde-brand{
        max-width:52vw;
        max-height:70px;
    }
    .mde-header-logo-image{
        max-width:48vw !important;
        max-height:62px !important;
    }
    .mde-hero-logo{
        left:50% !important;
        top:55% !important;
        max-width:min(var(--mde-hero-logo-width,340px),65vw) !important;
        max-height:42% !important;
    }
}


/* v1.6 COVER BACKGROUND FIX */
.mde-hero-bg{
    background-image:var(--mde-hero-bg-url) !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:var(--mde-hero-bg-x,50%) var(--mde-hero-bg-y,50%) !important;
    transform:scale(calc(var(--mde-hero-bg-zoom,100%) / 100)) !important;
}


/* ==========================================================
   v1.7 — FULL VIEWPORT COVER + GLASS HEADER
   ========================================================== */

/* Header now floats ON TOP of the cover */
.mde-header{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:100 !important;
    min-height:104px !important;
    max-height:none !important;
    padding:14px 5vw !important;
    background:var(--mde-header-glass,rgba(255,255,255,.34)) !important;
    backdrop-filter:blur(var(--mde-header-blur,14px)) saturate(135%) !important;
    -webkit-backdrop-filter:blur(var(--mde-header-blur,14px)) saturate(135%) !important;
    border-bottom:1px solid var(--mde-header-border,rgba(212,164,59,.45)) !important;
    overflow:hidden !important;
    isolation:isolate;
}

.mde-header > *:not(.mde-header-reflection){
    position:relative;
    z-index:2;
}

/* Separate oversized moving reflection for the header */
.mde-header-reflection{
    position:absolute;
    left:50%;
    top:50%;
    z-index:1;
    width:var(--mde-header-reflection-size,220%);
    height:var(--mde-header-reflection-size,220%);
    pointer-events:none;

    background-image:var(--mde-header-reflection-url);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-position:center;

    opacity:var(--mde-header-reflection-opacity,.28);
    transform:translate(
        calc(-50% + var(--mde-header-reflect-x,0px)),
        calc(-50% + var(--mde-header-reflect-y,0px))
    );
    transition:transform 500ms cubic-bezier(.2,.7,.2,1);
    will-change:transform;
}

.mde-header-reflection.is-moving{
    transition:transform 70ms linear;
}

/* Hero begins at the very top, behind the header */
.mde-hero{
    position:relative !important;
    width:100% !important;
    height:100vh !important;
    min-height:100vh !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#f8f4ec !important;
    isolation:isolate;
}

/* Actual <img> cover instead of CSS background */
.mde-hero-bg-image{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:var(--mde-hero-bg-x,50%) var(--mde-hero-bg-y,50%) !important;
    transform:scale(var(--mde-hero-scale,1)) !important;
    transform-origin:center center !important;
    display:block !important;
}

/* Disable the old CSS-background layer completely */
.mde-hero-bg{
    display:none !important;
}

/* Fade stays over cover, under logo/header */
.mde-hero-fade{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
}

/* Cover logo stays independent */
.mde-hero-logo{
    z-index:2 !important;
}

/* Page starts at top; do NOT add header-height space above hero */
.mde-page-shell,
.mde-page-shell main{
    margin:0 !important;
    padding:0 !important;
}

/* WordPress admin bar: keep our glass header directly below it when logged in */
body.admin-bar .mde-header{
    top:32px !important;
}
body.admin-bar .mde-hero{
    height:calc(100vh - 32px) !important;
    min-height:calc(100vh - 32px) !important;
}

@media(max-width:782px){
    body.admin-bar .mde-header{
        top:46px !important;
    }
    body.admin-bar .mde-hero{
        height:calc(100vh - 46px) !important;
        min-height:calc(100vh - 46px) !important;
    }
}

@media(max-width:900px){
    .mde-header{
        min-height:88px !important;
        padding:10px 18px !important;
    }
}


/* ==========================================================
   v1.8 — HERO FADE + DROPDOWN STACKING FIX
   ========================================================== */

/* Keep the hero photo behind everything interactive */
.mde-hero,
.mde-hero-bg-image,
.mde-hero-fade,
.mde-hero-logo{
    pointer-events:none;
}

.mde-hero{
    z-index:0 !important;
}

/* Header must sit above the hero */
.mde-header{
    z-index:1000 !important;
    overflow:visible !important;
}

/* Header glass/reflection stays clipped visually without clipping dropdowns */
.mde-header::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
}

/* Navigation and dropdowns always above the cover */
.mde-nav{
    position:relative !important;
    z-index:1100 !important;
}

.mde-nav-item,
.mde-has-dropdown{
    position:relative !important;
    z-index:1101 !important;
}

.mde-dropdown{
    z-index:9999 !important;
}

/* Fade layer: colour at the selected strength, fading away smoothly.
   Defaults visually target about 30% strength. */
.mde-hero-fade{
    display:block !important;
    opacity:1 !important;
    z-index:1 !important;
}

/* Hero logo remains above fade but below header/dropdowns */
.mde-hero-logo{
    z-index:2 !important;
}


/* ==========================================================
   v1.9 — FIXED HEADER / ISOLATED REFLECTION / VISIBLE HERO FADE
   ========================================================== */

/* Header stays one exact size. Opening a dropdown does not resize it. */
.mde-header{
    height:104px !important;
    min-height:104px !important;
    max-height:104px !important;
    padding:0 5vw !important;
    overflow:visible !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-bottom:0 !important;
    display:flex !important;
    align-items:center !important;
}

/* This layer is the ONLY glass background of the header.
   It is clipped to the fixed header height, while dropdowns remain visible. */
.mde-header-glass-layer{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;

    background:var(--mde-header-glass,rgba(255,255,255,.34)) !important;
    backdrop-filter:blur(var(--mde-header-blur,14px)) saturate(135%) !important;
    -webkit-backdrop-filter:blur(var(--mde-header-blur,14px)) saturate(135%) !important;
    border-bottom:1px solid var(--mde-header-border,rgba(212,164,59,.45)) !important;
}

/* Logo and menu sit above the clipped glass layer. */
.mde-header > .mde-brand,
.mde-header > .mde-nav{
    position:relative !important;
    z-index:10 !important;
}

/* Reflection is wide, but only as tall as the header.
   NO vertical movement anymore. */
.mde-header-reflection{
    position:absolute !important;
    left:50% !important;
    top:0 !important;
    width:var(--mde-header-reflection-size,220%) !important;
    height:104px !important;
    z-index:1 !important;
    pointer-events:none !important;

    background-image:var(--mde-header-reflection-url) !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
    background-position:center !important;

    opacity:var(--mde-header-reflection-opacity,.28) !important;
    transform:translateX(calc(-50% + var(--mde-header-reflect-x,0px))) !important;
    transition:transform 500ms cubic-bezier(.2,.7,.2,1) !important;
    will-change:transform;
}

.mde-header-reflection.is-moving{
    transition:transform 70ms linear !important;
}

/* Dropdown is independent of the header glass/reflection. */
.mde-dropdown{
    z-index:99999 !important;
}
.mde-dropdown,
.mde-dropdown *{
    pointer-events:auto;
}

/* The fade is guaranteed to sit visibly above the photograph. */
.mde-hero-fade{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    z-index:4 !important;
    opacity:1 !important;
    pointer-events:none !important;
}

/* Logo above fade; header/dropdowns still above both. */
.mde-hero-logo{
    z-index:5 !important;
}

/* Photo remains the bottom hero layer. */
.mde-hero-bg-image{
    z-index:0 !important;
}

@media(max-width:900px){
    .mde-header{
        height:88px !important;
        min-height:88px !important;
        max-height:88px !important;
        padding:0 18px !important;
    }

    .mde-header-reflection{
        height:88px !important;
    }
}


/* ==========================================================
   v2.0 — TYPOGRAPHY / REFLECTION ABOVE TEXT / EXACT FADE POINTS
   ========================================================== */

.mde-nav > a,
.mde-menu-btn{
    color:var(--mde-header-menu-color,#705845) !important;
    font-size:var(--mde-header-menu-size,14px) !important;
    letter-spacing:var(--mde-header-menu-spacing,1px) !important;
    line-height:1.2 !important;
}

.mde-dropdown-links a,
.mde-dropdown-links a span{
    color:var(--mde-dropdown-text-color,#8a5a12) !important;
    font-size:var(--mde-dropdown-font-size,18px) !important;
}

.mde-header-reflection-clip{
    position:absolute !important;
    inset:0 !important;
    height:104px !important;
    z-index:30 !important;
    overflow:hidden !important;
    pointer-events:none !important;
}

.mde-header-reflection-clip .mde-header-reflection{
    z-index:1 !important;
}

.mde-header > .mde-brand,
.mde-header > .mde-nav{
    z-index:20 !important;
}

.mde-dropdown{
    z-index:99999 !important;
}

.mde-hero-fade{
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
}

@media(max-width:900px){
    .mde-header-reflection-clip{
        height:88px !important;
    }
}


/* ==========================================================
   v2.1 — HEADER CONTENT VISIBILITY + CORRECT FADE DIRECTION
   ========================================================== */

/* Header glass lowest */
.mde-header-glass-layer{
    z-index:0 !important;
}

/* Reflection above glass, but BELOW the wording/logo */
.mde-header-reflection-clip{
    z-index:10 !important;
    pointer-events:none !important;
}

/* Header logo + top menu always readable and clickable */
.mde-header > .mde-brand,
.mde-header > .mde-nav{
    position:relative !important;
    z-index:30 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

/* Make sure actual logo image cannot be washed out by the reflection layer */
.mde-header-logo-image{
    position:relative !important;
    z-index:31 !important;
    opacity:1 !important;
    visibility:visible !important;
}

/* Top menu labels stay above reflection */
.mde-nav > a,
.mde-menu-btn,
.mde-nav a{
    position:relative !important;
    z-index:31 !important;
    opacity:1 !important;
    visibility:visible !important;
}

/* Dropdown must still sit above the whole header stack */
.mde-dropdown{
    z-index:99999 !important;
}

/* Hero fade is below cover logo and well below header/dropdowns */
.mde-hero-fade{
    z-index:4 !important;
}
.mde-hero-logo{
    z-index:5 !important;
}


/* ==========================================================
   v2.2 — CUSTOM FONT ASSIGNMENTS
   ========================================================== */

.mde-nav > a,
.mde-menu-btn,
.mde-nav a{
    font-family:var(--mde-header-menu-font,inherit) !important;
}

.mde-dropdown-links a,
.mde-dropdown-links a span{
    font-family:var(--mde-dropdown-font,inherit) !important;
}


/* ==========================================================
   v2.3 — UNLIMITED MENU ITEMS + NESTED TAB NAVIGATION
   ========================================================== */

.mde-tab-panel{
    position:relative;
    z-index:5;
    padding:10px 0 var(--mde-safe-zone);
}

.mde-tab-link,
.mde-tab-back{
    width:100%;
    min-height:58px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 24px;
    margin:0;
    border:0;
    border-bottom:1px solid rgba(134,99,44,.15);
    background:transparent;
    color:var(--mde-dropdown-text-color,#8a5a12);
    font-family:var(--mde-dropdown-font,inherit);
    font-size:var(--mde-dropdown-font-size,18px);
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
    text-align:left;
}

.mde-tab-link b{
    color:var(--mde-border-gold);
    font-size:26px;
    font-weight:400;
}

.mde-tab-link:hover,
.mde-tab-back:hover{
    background:rgba(255,255,255,.14);
}

.mde-tab-back{
    justify-content:flex-start;
    font-weight:600;
}


/* ==========================================================
   v2.4 — MENU TYPOGRAPHY HEIGHT CONTROLS
   ========================================================== */

/* Desktop top navigation */
.mde-nav > a,
.mde-menu-btn,
.mde-nav a{
    font-size:var(--mde-header-menu-size,14px) !important;
    line-height:var(--mde-header-menu-line,1.05) !important;
    letter-spacing:var(--mde-header-menu-spacing,1px) !important;
}

/* Keep wrapped headings compact instead of stretching the header */
.mde-nav > a,
.mde-menu-btn{
    white-space:normal !important;
    text-align:center;
}

/* Desktop dropdown wording */
.mde-tab-link,
.mde-tab-back,
.mde-dropdown-links a,
.mde-dropdown-links a span{
    font-size:var(--mde-dropdown-font-size,18px) !important;
    line-height:var(--mde-dropdown-line,1.10) !important;
}

/* Mobile gets its OWN sizing and line height */
@media(max-width:900px){
    .mde-nav > a,
    .mde-menu-btn,
    .mde-nav a{
        font-size:var(--mde-header-menu-mobile-size,13px) !important;
        line-height:var(--mde-header-menu-mobile-line,1.05) !important;
    }

    .mde-tab-link,
    .mde-tab-back,
    .mde-dropdown-links a,
    .mde-dropdown-links a span{
        font-size:var(--mde-dropdown-mobile-size,17px) !important;
        line-height:var(--mde-dropdown-mobile-line,1.10) !important;
    }
}




/* ==========================================================
   v2.8 — WHITE LETTER CORE + BRIGHT 50PX GOLD MOUSE GLOW
   ========================================================== */

.mde-mouse-glow{
    position:relative !important;
    isolation:isolate;
}

/* Bright gold halo around the exact cursor/finger point */
.mde-mouse-glow::before{
    content:"";
    position:absolute;
    left:var(--mde-glow-x,50%);
    top:var(--mde-glow-y,50%);
    width:calc(var(--mde-text-glow-radius,50px) * 2);
    height:calc(var(--mde-text-glow-radius,50px) * 2);
    transform:translate(-50%,-50%);
    border-radius:50%;
    pointer-events:none;
    z-index:3;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.98) 0%,
            rgba(255,248,215,.95) 10%,
            rgba(255,220,104,.92) 22%,
            rgba(225,165,37,.78) 42%,
            rgba(196,126,12,.38) 62%,
            rgba(196,126,12,0) 100%
        );

    filter:
        blur(calc(3px + 7px * var(--mde-text-glow-strength,1)))
        drop-shadow(0 0 calc(10px * var(--mde-text-glow-strength,1)) var(--mde-text-glow-color,#d9a42e))
        drop-shadow(0 0 calc(22px * var(--mde-text-glow-strength,1)) var(--mde-text-glow-color,#d9a42e));

    opacity:0;
    transition:opacity .10s ease;
    mix-blend-mode:screen;
}

/* Duplicate of the wording, but only the local section under the mouse becomes white */
.mde-mouse-glow::after{
    content:attr(data-glow-text);
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;

    display:flex;
    align-items:center;
    justify-content:center;

    font:inherit;
    line-height:inherit;
    letter-spacing:inherit;
    text-transform:inherit;
    white-space:inherit;

    color:#fff;
    -webkit-text-fill-color:#fff;

    -webkit-mask-image:
        radial-gradient(
            circle var(--mde-text-glow-radius,50px)
            at var(--mde-glow-x,50%) var(--mde-glow-y,50%),
            #000 0%,
            #000 38%,
            rgba(0,0,0,.85) 55%,
            rgba(0,0,0,0) 100%
        );
    mask-image:
        radial-gradient(
            circle var(--mde-text-glow-radius,50px)
            at var(--mde-glow-x,50%) var(--mde-glow-y,50%),
            #000 0%,
            #000 38%,
            rgba(0,0,0,.85) 55%,
            rgba(0,0,0,0) 100%
        );

    text-shadow:
        0 0 3px #fff,
        0 0 8px #fff7d8,
        0 0 14px var(--mde-text-glow-color,#d9a42e),
        0 0 28px var(--mde-text-glow-color,#d9a42e),
        0 0 42px rgba(217,164,46,.8);

    opacity:0;
    transition:opacity .08s ease;
}

.mde-mouse-glow.mde-glow-active::before,
.mde-mouse-glow.mde-glow-active::after{
    opacity:1;
}

/* Dropdown wording is left aligned */
.mde-tab-link::after,
.mde-tab-back::after,
.mde-dropdown-links > a::after{
    justify-content:flex-start;
    padding-left:24px;
    padding-right:24px;
}

/* Top-menu wording is centred in its own item */
.mde-nav > a::after,
.mde-menu-btn::after{
    justify-content:center;
}

/* Mobile keeps the effect, but uses touch coordinates instead of hover */
@media (hover:none), (pointer:coarse){
    .mde-mouse-glow::before,
    .mde-mouse-glow::after{
        transition:opacity .05s linear;
    }
}


/* ==========================================================
   v3.2 — BASED ON v2.8
   KEEP DROPDOWN/TAB VISUALS UNCHANGED
   FIX ONLY MAIN TITLES + OVAL GLOW
   ========================================================== */

/* ----------------------------------------------------------
   MAIN TITLE ALIGNMENT
   Do NOT alter .mde-dropdown sizing, overflow, gold image,
   sandblast, reflection, or internal tab layout.
   ---------------------------------------------------------- */

.mde-nav{
    display:flex !important;
    align-items:center !important;
}

/* Every main-title wrapper shares the same centre line. */
.mde-nav > a,
.mde-menu-wrap{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:stretch !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
}

/* Dropdown main-title button becomes a stable two-row unit:
   wording centred above, arrow centred below. */
.mde-menu-btn{
    display:grid !important;
    grid-template-rows:minmax(2.1em,auto) 12px !important;
    align-items:center !important;
    justify-items:center !important;
    align-content:center !important;
    gap:2px !important;
    margin:0 !important;
    padding:0 3px !important;
    text-align:center !important;
    vertical-align:middle !important;
}

/* Isolated wording span created by JS.
   One-line and two-line titles now share the same vertical title area. */
.mde-main-title-text{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:2.1em !important;
    max-width:100% !important;
    text-align:center !important;
    font:inherit !important;
    line-height:var(--mde-header-menu-line,1.05) !important;
    letter-spacing:inherit !important;
    text-transform:inherit !important;
    color:inherit !important;
    position:relative !important;
    z-index:3 !important;
}

/* Keep the dropdown chevron in the same row for every main title. */
.mde-menu-btn > span:not(.mde-main-title-text){
    grid-row:2 !important;
    align-self:center !important;
    justify-self:center !important;
    line-height:1 !important;
    margin:0 !important;
    padding:0 !important;
}

/* Normal-link main titles align with dropdown titles. */
.mde-nav > a{
    text-align:center !important;
    justify-content:center !important;
}

/* ----------------------------------------------------------
   OVAL WORD GLOW
   100px across x 50px high.
   Dropdown glow behaviour stays as in v2.8.
   ---------------------------------------------------------- */

.mde-mouse-glow::before{
    width:100px !important;
    height:50px !important;
    border-radius:50% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,1) 0%,
            rgba(255,252,235,.98) 10%,
            rgba(255,232,151,.96) 24%,
            rgba(229,171,43,.86) 43%,
            rgba(202,132,13,.46) 65%,
            rgba(202,132,13,0) 100%
        ) !important;
}

/* White-letter portion follows same oval. */
.mde-mouse-glow::after{
    -webkit-mask-image:
        radial-gradient(
            ellipse 50px 25px
            at var(--mde-glow-x,50%) var(--mde-glow-y,50%),
            #000 0%,
            #000 40%,
            rgba(0,0,0,.88) 60%,
            rgba(0,0,0,0) 100%
        ) !important;
    mask-image:
        radial-gradient(
            ellipse 50px 25px
            at var(--mde-glow-x,50%) var(--mde-glow-y,50%),
            #000 0%,
            #000 40%,
            rgba(0,0,0,.88) 60%,
            rgba(0,0,0,0) 100%
        ) !important;
}

/* Main-title glow duplicate must line up exactly with centred wording. */
.mde-nav > a::after,
.mde-menu-btn::after{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding:0 !important;
}

/* Mobile: same alignment logic; do not touch dropdown/tab artwork. */
@media(max-width:900px){
    .mde-menu-btn{
        grid-template-rows:minmax(2.05em,auto) 11px !important;
        gap:1px !important;
    }

    .mde-main-title-text{
        min-height:2.05em !important;
        line-height:var(--mde-header-menu-mobile-line,1.05) !important;
    }

    .mde-mouse-glow::before{
        width:100px !important;
        height:50px !important;
    }
}


/* ==========================================================
   v3.3 — MAIN TITLE WHITE-GLOW ALIGNMENT ONLY
   ========================================================== */

/* The duplicated white hover wording must occupy ONLY the same
   title row as the real main-title text — not the full button
   including the dropdown arrow row. */
.mde-menu-btn::after{
    top:0 !important;
    bottom:auto !important;
    left:0 !important;
    right:0 !important;
    height:calc(100% - 14px) !important;
    min-height:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 3px !important;
    margin:0 !important;

    line-height:var(--mde-header-menu-line,1.05) !important;
    text-align:center !important;
    transform:none !important;
}

/* Normal main links do not have an arrow row, so their duplicate
   simply fills the same text box. */
.mde-nav > a::after{
    inset:0 !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    line-height:var(--mde-header-menu-line,1.05) !important;
    transform:none !important;
}

/* Ensure the real main-title text and its white duplicate use
   the same vertical metrics. */
.mde-main-title-text{
    line-height:var(--mde-header-menu-line,1.05) !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
}

/* Mobile uses the same fix with the shorter arrow slot. */
@media(max-width:900px){
    .mde-menu-btn::after{
        height:calc(100% - 12px) !important;
        line-height:var(--mde-header-menu-mobile-line,1.05) !important;
    }

    .mde-nav > a::after,
    .mde-main-title-text{
        line-height:var(--mde-header-menu-mobile-line,1.05) !important;
    }
}


/* ==========================================================
   v3.4 — MAIN TITLE GLOW MUST DIE OFF THE WORD
   ========================================================== */

.mde-nav > a:not(.mde-glow-active)::before,
.mde-nav > a:not(.mde-glow-active)::after,
.mde-menu-btn:not(.mde-glow-active)::before,
.mde-menu-btn:not(.mde-glow-active)::after{
    opacity:0 !important;
    visibility:hidden !important;
}

.mde-nav > a.mde-glow-active::before,
.mde-nav > a.mde-glow-active::after,
.mde-menu-btn.mde-glow-active::before,
.mde-menu-btn.mde-glow-active::after{
    visibility:visible !important;
}

/* Keep dropdown/tab glow behavior exactly as before. */


/* ==========================================================
   v3.9 — STABLE WHITE/GOLD GLOW + MOBILE HAMBURGER
   ========================================================== */

/* Glow graphics never become hover targets themselves. */
.mde-mouse-glow::before,
.mde-mouse-glow::after{
    pointer-events:none !important;
}

/* Keep the strong original oval glow, but make the revealed letters
   unmistakably WHITE in the active area. */
.mde-mouse-glow::after{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-shadow:
        0 0 2px #fff,
        0 0 5px #fff,
        0 0 9px rgba(255,250,220,1),
        0 0 16px var(--mde-text-glow-color,#d9a42e),
        0 0 28px var(--mde-text-glow-color,#d9a42e),
        0 0 42px rgba(217,164,46,.88) !important;
}

/* Off the actual word = glow is completely gone. */
.mde-nav > a:not(.mde-glow-active)::before,
.mde-nav > a:not(.mde-glow-active)::after,
.mde-menu-btn:not(.mde-glow-active)::before,
.mde-menu-btn:not(.mde-glow-active)::after{
    opacity:0 !important;
    visibility:hidden !important;
}

/* ----------------------------------------------------------
   MOBILE THREE-LINE MENU
   ---------------------------------------------------------- */

.mde-mobile-menu-toggle{
    display:none;
}

@media(max-width:900px){

    html,body{
        overflow-x:hidden !important;
    }

    .mde-header{
        height:auto !important;
        min-height:82px !important;
        max-height:none !important;
        padding:8px 14px !important;
        display:flex !important;
        align-items:center !important;
        gap:10px !important;
    }

    .mde-brand{
        flex:1 1 auto !important;
        min-width:0 !important;
    }

    .mde-header-logo-image{
        width:min(var(--mde-header-logo-width,240px),68vw) !important;
        max-width:330px !important;
        max-height:66px !important;
        object-fit:contain !important;
    }

    /* 3-line hamburger */
    .mde-mobile-menu-toggle{
        position:relative !important;
        z-index:120000 !important;
        width:46px !important;
        height:42px !important;
        flex:0 0 46px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        padding:0 !important;
        border:1px solid rgba(201,150,55,.65) !important;
        border-radius:12px !important;
        background:rgba(255,255,255,.40) !important;
        backdrop-filter:blur(12px) !important;
        -webkit-backdrop-filter:blur(12px) !important;
        cursor:pointer !important;
    }

    .mde-mobile-menu-toggle span{
        display:block !important;
        width:23px !important;
        height:2px !important;
        border-radius:99px !important;
        background:var(--mde-border-gold,#c99637) !important;
        transition:transform .2s ease, opacity .2s ease !important;
    }

    .mde-mobile-menu-toggle.is-open span:nth-child(1){
        transform:translateY(8px) rotate(45deg) !important;
    }
    .mde-mobile-menu-toggle.is-open span:nth-child(2){
        opacity:0 !important;
    }
    .mde-mobile-menu-toggle.is-open span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg) !important;
    }

    /* Hide the full menu until hamburger opens it. */
    .mde-nav{
        position:absolute !important;
        top:100% !important;
        left:10px !important;
        right:10px !important;
        width:auto !important;
        max-height:calc(100svh - 96px) !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;

        margin:0 !important;
        padding:10px !important;
        display:none !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:6px !important;

        background:rgba(255,255,255,.72) !important;
        border:1px solid rgba(201,150,55,.50) !important;
        border-radius:18px !important;
        box-shadow:0 18px 48px rgba(75,49,18,.18) !important;
        backdrop-filter:blur(20px) saturate(130%) !important;
        -webkit-backdrop-filter:blur(20px) saturate(130%) !important;
        z-index:115000 !important;
    }

    .mde-nav.mde-mobile-open{
        display:flex !important;
    }

    /* Each MAIN TITLE is its own full-width row. */
    .mde-nav > a,
    .mde-menu-wrap{
        position:relative !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        margin:0 !important;
        flex:none !important;
    }

    .mde-nav > a,
    .mde-menu-btn{
        width:100% !important;
        min-height:50px !important;
        height:auto !important;
        padding:10px 14px !important;
        margin:0 !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;

        text-align:left !important;
        white-space:normal !important;
        font-size:var(--mde-header-menu-mobile-size,15px) !important;
        line-height:var(--mde-header-menu-mobile-line,1.10) !important;

        border-bottom:1px solid rgba(134,99,44,.12) !important;
    }

    .mde-main-title-text{
        min-height:0 !important;
        display:inline !important;
        text-align:left !important;
        white-space:normal !important;
    }

    /* On mobile there is no hover word glow. */
    .mde-nav > a::before,
    .mde-nav > a::after,
    .mde-menu-btn::before,
    .mde-menu-btn::after{
        display:none !important;
    }

    /* A main title's glass tab opens directly UNDER that title.
       It is now an accordion, not a wide desktop floating panel. */
    .mde-menu-wrap .mde-dropdown{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:6px 0 8px !important;

        transform:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        display:none !important;

        max-height:min(64svh,680px) !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;

        border-radius:22px !important;
        z-index:1 !important;
    }

    .mde-menu-wrap.is-open > .mde-dropdown{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
    }

    /* Disable desktop hover-opening on mobile. */
    .mde-menu-wrap:hover .mde-dropdown,
    .mde-menu-wrap:focus-within .mde-dropdown{
        display:none !important;
        opacity:0 !important;
        visibility:hidden !important;
    }

    .mde-menu-wrap.is-open:hover > .mde-dropdown,
    .mde-menu-wrap.is-open:focus-within > .mde-dropdown{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
    }

    .mde-tab-link,
    .mde-tab-back,
    .mde-dropdown-links a{
        min-height:54px !important;
        padding:0 18px !important;
        font-size:var(--mde-dropdown-mobile-size,16px) !important;
        line-height:var(--mde-dropdown-mobile-line,1.10) !important;
    }

    /* Hero stays full-screen behind the compact mobile header. */
    .mde-hero{
        width:100% !important;
        min-height:100svh !important;
        height:100svh !important;
        overflow:hidden !important;
    }

    .mde-hero-logo{
        max-width:82vw !important;
        max-height:55svh !important;
        object-fit:contain !important;
    }
}

/* ==========================================================
   v3.9.1 DESKTOP DROPDOWN STABILITY FIX
   - Desktop dropdowns are hover/focus driven, not click-latched.
   - Invisible hover bridge covers the visual gap between title and panel.
   ========================================================== */
@media(min-width:901px){
    .mde-menu-wrap::after{
        content:"";
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        min-width:48px;
        height:18px;
        transform:none;
        background:transparent;
        pointer-events:auto;
    }

    /* .is-open is reserved for the mobile accordion. */
    .mde-menu-wrap.is-open:not(:hover):not(:focus-within) > .mde-dropdown{
        opacity:0;
        visibility:hidden;
        transform:translate(-50%,-8px);
    }
}


/* ==========================================================
   v3.9.2 DROPDOWN OWNERSHIP FIX
   The desktop hover bridge is restricted to each menu item's
   own width so neighbouring menus can never steal hover state.
   ========================================================== */
@media(min-width:901px){
    .mde-menu-wrap{
        isolation:isolate;
    }

    .mde-menu-wrap::after{
        z-index:1;
    }

    .mde-menu-wrap > .mde-dropdown{
        z-index:99999 !important;
    }
}


/* ==========================================================
   v3.9.3 STRICT WORD-HOVER DESKTOP MENU
   No predictive hover area and no invisible bridge.
   The JS adds .mde-desktop-open only after the visible title text
   itself receives mouseenter. The panel can then retain that state.
   ========================================================== */
@media (min-width:901px){
    .mde-menu-wrap::after{
        content:none !important;
        display:none !important;
        pointer-events:none !important;
    }

    /* Neutralise all older :hover / :focus-within / .is-open desktop rules. */
    .mde-menu-wrap > .mde-dropdown,
    .mde-menu-wrap:hover > .mde-dropdown,
    .mde-menu-wrap:focus-within > .mde-dropdown,
    .mde-menu-wrap.is-open > .mde-dropdown{
        opacity:0 !important;
        visibility:hidden !important;
        transform:translate(-50%,-8px) !important;
        pointer-events:none !important;
    }

    /* ONLY the exact menu whose visible title was hovered may open. */
    .mde-menu-wrap.mde-desktop-open > .mde-dropdown{
        opacity:1 !important;
        visibility:visible !important;
        transform:translate(-50%,0) !important;
        pointer-events:auto !important;
    }

    /* Only the letters are the desktop activation target. */
    .mde-menu-btn > .mde-main-title-text{
        pointer-events:auto;
    }
}


/* ==========================================================
   v3.9.8 TOP-TAB + HEADER REFLECTION TRACKING
   Visual glow/reflection follows the full top-tab surface.
   Dropdown opening remains word-hover only in JavaScript.
   ========================================================== */
@media (min-width:901px){
    .mde-nav > a.mde-mouse-glow,
    .mde-menu-btn.mde-mouse-glow{
        overflow:visible;
    }
}


/* ==========================================================
   v3.9.8 POINTER TRACKING STABILITY
   Keep visual effects independent from menu activation hit-boxes.
   ========================================================== */
@media (min-width:901px){
    .mde-nav > a.mde-mouse-glow,
    .mde-menu-btn.mde-mouse-glow{
        pointer-events:auto !important;
    }

    .mde-main-title-text,
    .mde-menu-arrow{
        position:relative;
        z-index:5;
    }
}


/* ==========================================================
   v3.9.9 TRUE TOP-TAB VISUAL TRAVEL
   The JS visual slot can position the glow outside the intrinsic
   word-sized button, so every ancestor must allow it to be seen.
   ========================================================== */
@media (min-width:901px){
    .mde-header,
    .mde-nav,
    .mde-menu-wrap,
    .mde-menu-btn{
        overflow:visible !important;
    }
}
\n\n/* ==========================================================\n   v3.9.12 POINTER-SAFE DROPDOWN LAYERS\n   Decorative layers must never become mouse hit targets.\n   The actual dropdown panel/rows own the interaction geometry.\n   ========================================================== */\n.mde-dropdown > .mde-reflection-image,\n.mde-dropdown > .mde-sandblast-original,\n.mde-dropdown > .mde-sandblast-tint,\n.mde-dropdown > .mde-gold-image,\n.mde-dropdown > .mde-safe-zone{\n    pointer-events:none !important;\n}\n\n.mde-dropdown-links,\n.mde-tab-panel,\n.mde-dropdown-links > a,\n.mde-tab-link,\n.mde-tab-back{\n    pointer-events:auto !important;\n}\n

/* ==========================================================
   v3.9.13 — CHROME-GOLD WORDING + WORD-ONLY HOVER HIGHLIGHT
   Reflection movement is intentionally untouched.
   The old mouse-follow glow is retired because its layered
   pseudo-elements could visually glitch over the glass menu.
   ========================================================== */

/* Hard-disable every legacy glow layer, regardless of older rules. */
.mde-mouse-glow::before,
.mde-mouse-glow::after{
    display:none !important;
    content:none !important;
    opacity:0 !important;
}

/* Readable wording by default. Chrome-gold is now a HOVER treatment only. */
.mde-main-title-text,
.mde-tab-link > span,
.mde-dropdown-links > a > span{
    display:inline-block;
    color:#8b5a16 !important;
    -webkit-text-fill-color:#8b5a16 !important;
    background:none !important;
    text-shadow:none !important;
}

/* Only dropdown/submenu wording gets the small frosted patch on hover.
   Use a pseudo-element so the white patch is BEHIND the word and does not
   get clipped into the letters by background-clip:text. */
.mde-tab-link > span,
.mde-dropdown-links > a > span{
    position:relative;
    z-index:2;
    padding:5px 9px;
    margin-left:-9px;
    border-radius:8px;
}

.mde-tab-link > span::before,
.mde-dropdown-links > a > span::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:8px;
    background:rgba(255,255,255,0);
    box-shadow:none;
    -webkit-backdrop-filter:blur(0);
    backdrop-filter:blur(0);
    transition:background-color .16s ease, box-shadow .16s ease, backdrop-filter .16s ease;
    pointer-events:none;
}

/* Chrome-gold lettering appears ONLY on the item being hovered/focused. */
.mde-tab-link:hover > span,
.mde-tab-link:focus-visible > span,
.mde-dropdown-links > a:hover > span,
.mde-dropdown-links > a:focus-visible > span{
    background-image:linear-gradient(
        180deg,
        #6f4206 0%,
        #b97816 18%,
        #f7d978 36%,
        #fff1aa 47%,
        #c58a22 60%,
        #7b4908 78%,
        #ddb34b 100%
    ) !important;
    background-size:100% 100% !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
}

.mde-tab-link:hover > span::before,
.mde-tab-link:focus-visible > span::before,
.mde-dropdown-links > a:hover > span::before,
.mde-dropdown-links > a:focus-visible > span::before{
    background:rgba(255,255,255,.84);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.82), 0 2px 10px rgba(120,82,20,.08);
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
}

/* Top menu is readable normally too. It does not get the little white patch. */
.mde-main-title-text{
    color:#73502f !important;
    -webkit-text-fill-color:#73502f !important;
}

.mde-menu-btn:hover .mde-main-title-text,
.mde-menu-btn:focus-visible .mde-main-title-text,
.mde-nav > a:hover,
.mde-nav > a:focus-visible{
    background-image:linear-gradient(
        180deg,
        #6f4206 0%,
        #b97816 18%,
        #f7d978 36%,
        #fff1aa 47%,
        #c58a22 60%,
        #7b4908 78%,
        #ddb34b 100%
    ) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
}

/* Older CSS gave the whole row a white hover fill. Remove that so
   the visual cue is ONLY behind the word, as requested. */
.mde-tab-link:hover,
.mde-tab-link:focus-visible,
.mde-tab-back:hover,
.mde-tab-back:focus-visible,
.mde-dropdown-links > a:hover,
.mde-dropdown-links > a:focus-visible{
    background:transparent !important;
}

/* Top menu keeps chrome-gold lettering but no hover patch. */
.mde-nav > a,
.mde-menu-btn{
    text-shadow:none !important;
}

/* Mobile: keep the same clean wording treatment without forcing
   a permanent highlight on touch devices. */
@media (hover:none), (pointer:coarse){
    .mde-tab-link > span,
    .mde-dropdown-links > a > span{
        background-color:transparent;
        box-shadow:none;
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
}

/* ==========================================================
   MDE WEBSITE v1.0 — FINAL HOVER WORD COLOUR OVERRIDE
   Remove every legacy white-letter hover/glow treatment.
   Reflection and menu mechanics are intentionally untouched.
   ========================================================== */

/* Legacy duplicated glow lettering must never render. */
.mde-mouse-glow::after,
.mde-mouse-glow.mde-glow-active::after{
    display:none !important;
    content:none !important;
    opacity:0 !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    text-shadow:none !important;
}

/* Normal wording remains the darker readable gold. */
.mde-main-title-text,
.mde-tab-link > span,
.mde-dropdown-links > a > span{
    color:#8b5a16 !important;
    -webkit-text-fill-color:#8b5a16 !important;
    text-shadow:none !important;
}

/* Hover/focus wording is ALWAYS chrome-gold — never white. */
.mde-menu-btn:hover .mde-main-title-text,
.mde-menu-btn:focus-visible .mde-main-title-text,
.mde-nav > a:hover,
.mde-nav > a:focus-visible,
.mde-tab-link:hover > span,
.mde-tab-link:focus-visible > span,
.mde-dropdown-links > a:hover > span,
.mde-dropdown-links > a:focus-visible > span{
    background-image:linear-gradient(
        180deg,
        #5d3504 0%,
        #9b5d0b 16%,
        #d9a62e 33%,
        #f2cf63 45%,
        #bf7b12 58%,
        #754206 76%,
        #d2a037 100%
    ) !important;
    background-size:100% 100% !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    text-shadow:none !important;
}

/* ==========================================================
   MDE WEBSITE v1.1 — CLEAN CHROME HOVER, NO WHITE WORD PATCH
   Reflection and menu mechanics intentionally untouched.
   ========================================================== */

/* Remove the old frosted/white pill that sat behind hovered wording. */
.mde-tab-link > span::before,
.mde-dropdown-links > a > span::before,
.mde-tab-link:hover > span::before,
.mde-tab-link:focus-visible > span::before,
.mde-dropdown-links > a:hover > span::before,
.mde-dropdown-links > a:focus-visible > span::before{
    content:none !important;
    display:none !important;
    background:none !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
}

/* No hover background on the word container itself. */
.mde-tab-link > span,
.mde-dropdown-links > a > span,
.mde-tab-link:hover > span,
.mde-tab-link:focus-visible > span,
.mde-dropdown-links > a:hover > span,
.mde-dropdown-links > a:focus-visible > span{
    box-shadow:none !important;
    text-shadow:none !important;
}

/* Normal text stays solid and readable. */
.mde-tab-link > span,
.mde-dropdown-links > a > span{
    background-image:none !important;
    color:#8b5a16 !important;
    -webkit-text-fill-color:#8b5a16 !important;
}

/* Hover text only: chrome-gold. No white fill anywhere. */
.mde-tab-link:hover > span,
.mde-tab-link:focus-visible > span,
.mde-dropdown-links > a:hover > span,
.mde-dropdown-links > a:focus-visible > span{
    background-image:linear-gradient(
        180deg,
        #5c3505 0%,
        #9d620d 16%,
        #d9a62e 31%,
        #f4dc83 43%,
        #c68a1c 57%,
        #744307 74%,
        #d7ab3e 100%
    ) !important;
    background-color:transparent !important;
    background-size:100% 100% !important;
    background-repeat:no-repeat !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:#b77a14 !important; /* fallback if clipping is unavailable */
    -webkit-text-fill-color:transparent !important;
    text-shadow:none !important;
}

/* ==========================================================
   MDE WEBSITE v1.2 — FULL INDIVIDUAL ROW HOVER
   Only the hovered dropdown row becomes whiter/frosted.
   Reflection and menu mechanics intentionally untouched.
   ========================================================== */
@media (hover:hover) and (pointer:fine){
    .mde-tab-link:hover,
    .mde-tab-link:focus-visible,
    .mde-dropdown-links > a:hover,
    .mde-dropdown-links > a:focus-visible{
        background:rgba(255,255,255,0.72) !important;
        -webkit-backdrop-filter:blur(7px) saturate(112%) !important;
        backdrop-filter:blur(7px) saturate(112%) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.72),
                   inset 0 -1px 0 rgba(221,184,102,0.16) !important;
    }

    /* Keep the word itself transparent: the ROW owns the hover fill. */
    .mde-tab-link:hover > span,
    .mde-tab-link:focus-visible > span,
    .mde-dropdown-links > a:hover > span,
    .mde-dropdown-links > a:focus-visible > span{
        background-color:transparent !important;
        box-shadow:none !important;
    }
}


/* ==========================================================
   MDE WEBSITE v1.0 — AUTHORITATIVE FULL-ROW HOVER STATE
   .mde-row-hover is assigned from pointer coordinates against
   the row's complete rectangle, so every pixel of the row counts.
   Reflection mechanics are intentionally untouched.
   ========================================================== */
@media (hover:hover) and (pointer:fine){
    .mde-tab-link,
    .mde-tab-back,
    .mde-dropdown-links > a{
        position:relative !important;
        width:100% !important;
        box-sizing:border-box !important;
    }

    .mde-tab-link.mde-row-hover,
    .mde-tab-back.mde-row-hover,
    .mde-dropdown-links > a.mde-row-hover{
        background:rgba(255,255,255,0.72) !important;
        -webkit-backdrop-filter:blur(7px) saturate(112%) !important;
        backdrop-filter:blur(7px) saturate(112%) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.72),
                   inset 0 -1px 0 rgba(221,184,102,0.16) !important;
    }

    .mde-tab-link.mde-row-hover > span,
    .mde-dropdown-links > a.mde-row-hover > span{
        background-image:linear-gradient(
            180deg,
            #5c3505 0%,
            #9d620d 16%,
            #d9a62e 31%,
            #f4dc83 43%,
            #c68a1c 57%,
            #744307 74%,
            #d7ab3e 100%
        ) !important;
        background-color:transparent !important;
        background-size:100% 100% !important;
        background-repeat:no-repeat !important;
        -webkit-background-clip:text !important;
        background-clip:text !important;
        color:#b77a14 !important;
        -webkit-text-fill-color:transparent !important;
        text-shadow:none !important;
    }
}
\n\n/* ==========================================================
   VERSION 1 — BACKEND TYPOGRAPHY CONTROLS
   Visual settings only. Hover, dropdown and reflection mechanics untouched.
   ========================================================== */
@media (min-width:901px){
    /* User-adjustable distance between the main desktop titles. */
    .mde-header > .mde-nav{
        gap:var(--mde-header-menu-gap,18px) !important;
    }

    /* User-adjustable dropdown character spacing. */
    .mde-tab-link,
    .mde-tab-back,
    .mde-dropdown-links > a,
    .mde-dropdown-links > a > span{
        letter-spacing:var(--mde-dropdown-letter-spacing,.5px) !important;
    }
}

/* ==========================================================
   MDE VERSION 1 — FORCED DESKTOP MAIN MENU SPACING
   Authoritative override: ignores saved/admin spacing values.
   Does not alter dropdown, hover, reflection, or mobile mechanics.
   ========================================================== */
@media (min-width:901px){
    .mde-header > .mde-nav{
        display:flex !important;
        flex:0 0 auto !important;
        width:auto !important;
        max-width:none !important;
        justify-content:flex-start !important;
        align-items:center !important;
        gap:6px !important;
        column-gap:6px !important;
        row-gap:0 !important;
        margin-left:auto !important;
    }

    .mde-header > .mde-nav > a,
    .mde-header > .mde-nav > .mde-menu-wrap{
        flex:0 0 auto !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .mde-header > .mde-nav .mde-menu-btn{
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        padding-left:3px !important;
        padding-right:3px !important;
    }
}


/* ==========================================================
   VERSION 1 — MOBILE STACKED GLASS NAVIGATION
   Desktop remains unchanged.
   Mobile flow:
   hamburger -> main menu panel -> selected category panel -> back.
   ========================================================== */
@media (max-width:900px){
    /* Keep the menu attached to the PHONE VIEWPORT, never to the hero/logo. */
    .mde-header > .mde-nav{
        position:fixed !important;
        top:var(--mde-mobile-nav-top,88px) !important;
        left:8px !important;
        right:8px !important;
        width:calc(100vw - 16px) !important;
        max-width:calc(100vw - 16px) !important;
        max-height:calc(100dvh - var(--mde-mobile-nav-top,88px) - 8px) !important;
        box-sizing:border-box !important;
        margin:0 !important;
        padding:8px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        overscroll-behavior:contain !important;
        z-index:2147482000 !important;

        border:1px solid rgba(201,150,55,.72) !important;
        border-radius:22px !important;
        background:rgba(255,255,255,.78) !important;
        box-shadow:0 18px 48px rgba(75,49,18,.20) !important;
        backdrop-filter:blur(20px) saturate(125%) !important;
        -webkit-backdrop-filter:blur(20px) saturate(125%) !important;
    }

    .mde-header > .mde-nav.mde-mobile-open{
        display:flex !important;
    }

    /* First screen: one full-width main category per row. */
    .mde-header > .mde-nav:not(.mde-mobile-subview) > a,
    .mde-header > .mde-nav:not(.mde-mobile-subview) > .mde-menu-wrap{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        flex:0 0 auto !important;
    }

    .mde-header > .mde-nav:not(.mde-mobile-subview) .mde-dropdown{
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
    }

    .mde-header > .mde-nav .mde-menu-btn,
    .mde-header > .mde-nav > a{
        width:100% !important;
        min-height:56px !important;
        box-sizing:border-box !important;
        padding:0 16px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        text-align:left !important;
        white-space:normal !important;
        border-radius:0 !important;
        border-bottom:1px solid rgba(134,99,44,.15) !important;
    }

    /* Second screen: hide every main item except the selected category. */
    .mde-header > .mde-nav.mde-mobile-subview{
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }

    .mde-header > .mde-nav.mde-mobile-subview > a,
    .mde-header > .mde-nav.mde-mobile-subview > .mde-menu-wrap:not(.mde-mobile-active){
        display:none !important;
    }

    .mde-header > .mde-nav.mde-mobile-subview > .mde-menu-wrap.mde-mobile-active{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
    }

    /* The old main title is replaced by the sticky mobile Back header. */
    .mde-header > .mde-nav.mde-mobile-subview > .mde-menu-wrap.mde-mobile-active > .mde-menu-btn{
        display:none !important;
    }

    .mde-header > .mde-nav.mde-mobile-subview > .mde-menu-wrap.mde-mobile-active > .mde-dropdown{
        position:relative !important;
        inset:auto !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        max-height:calc(100dvh - var(--mde-mobile-nav-top,88px) - 8px) !important;
        margin:0 !important;
        box-sizing:border-box !important;
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        transform:none !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        border:1px solid rgba(201,150,55,.78) !important;
        border-radius:22px !important;
        background:var(--mde-tab-bg,rgba(255,255,255,.53)) !important;
        box-shadow:0 18px 48px rgba(75,49,18,.20) !important;
    }

    /* Always-visible Back header for the currently selected main category. */
    .mde-mobile-category-head{
        position:sticky !important;
        top:0 !important;
        z-index:30 !important;
        min-height:56px !important;
        width:100% !important;
        box-sizing:border-box !important;
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr) auto !important;
        align-items:center !important;
        gap:10px !important;
        padding:8px 12px !important;
        border-bottom:1px solid rgba(134,99,44,.18) !important;
        background:rgba(255,255,255,.90) !important;
        backdrop-filter:blur(15px) saturate(120%) !important;
        -webkit-backdrop-filter:blur(15px) saturate(120%) !important;
    }

    .mde-mobile-category-back{
        min-height:38px !important;
        padding:0 12px !important;
        border:1px solid rgba(201,150,55,.55) !important;
        border-radius:10px !important;
        background:rgba(255,255,255,.62) !important;
        color:var(--mde-dropdown-text-color,#8b5a17) !important;
        font:inherit !important;
        cursor:pointer !important;
    }

    .mde-mobile-category-title{
        min-width:0 !important;
        text-align:center !important;
        font-family:var(--mde-dropdown-font,inherit) !important;
        font-size:var(--mde-dropdown-mobile-size,16px) !important;
        line-height:1.1 !important;
        color:var(--mde-dropdown-text-color,#8b5a17) !important;
        white-space:normal !important;
    }

    .mde-mobile-category-spacer{
        width:54px !important;
    }

    /* Every submenu row stays inside the phone width. */
    .mde-header > .mde-nav.mde-mobile-subview .mde-dropdown-links,
    .mde-header > .mde-nav.mde-mobile-subview .mde-tab-panel{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .mde-header > .mde-nav.mde-mobile-subview .mde-tab-link,
    .mde-header > .mde-nav.mde-mobile-subview .mde-tab-back,
    .mde-header > .mde-nav.mde-mobile-subview .mde-dropdown-links > a{
        width:100% !important;
        max-width:100% !important;
        min-height:56px !important;
        box-sizing:border-box !important;
        padding:0 16px !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    /* Mobile does not need animated reflection/glow. Keep reflection static. */
    .mde-header-reflection,
    .mde-reflection-image{
        --mde-header-reflect-x:0px !important;
        --mde-header-reflect-y:0px !important;
        --mde-reflect-x:0px !important;
        --mde-reflect-y:0px !important;
        transition:none !important;
    }

    .mde-mouse-glow::before,
    .mde-mouse-glow::after,
    .mde-glow-active::before,
    .mde-glow-active::after{
        display:none !important;
    }

    /* The hero/logo never participates in mobile menu sizing or hit-testing. */
    .mde-hero,
    .mde-hero-logo{
        z-index:0 !important;
    }
}