/**
 * Exploring Mombasa — Sun + Tide MASTER production port
 *
 * Geometry, typography, color and responsive behavior are taken directly
 * from the approved master supplied by the site owner.
 */

#emHeader,
#searchOverlay,
#mobileDrawer{
--navy:#000C32;
    --coral:#FF5A1F;
    --sun-orange:#F28C00;
    --blue:var(--coral); /* compatibility alias: Royal Blue retired from this header */
    --amber:var(--coral); /* use the right-panel orange sitewide */
    --fuchsia:#ED0F81;
    --white:#FFFFFF;
    --warm:#FFF4EA;

    --ink:rgba(0,12,50,.88);
    --text:rgba(0,12,50,.70);
    --muted:rgba(0,12,50,.60);

    --line:rgba(0,12,50,.09);
    --blue-soft:rgba(255,90,31,.055);

    --shadow:0 32px 86px rgba(0,12,50,.16);

    --max:1580px;
    --masthead-h:118px;
    --now-h:38px;
    --header-h:156px;
    --mega-h:396px;

    --ease:cubic-bezier(.22,.72,.24,1);
}

#emHeader *,
#searchOverlay *,
#mobileDrawer *{
    box-sizing:border-box;
}

#emHeader,
#searchOverlay,
#mobileDrawer{
    font-family:"Inter",sans-serif;
    -webkit-font-smoothing:antialiased;
}

#emHeader button,
#emHeader input,
#searchOverlay button,
#searchOverlay input,
#mobileDrawer button,
#mobileDrawer input{
    font:inherit;
}

#emHeader button,
#searchOverlay button,
#mobileDrawer button{
    color:inherit;
    cursor:pointer;
}

#emHeader button,
#emHeader a,
#searchOverlay button,
#searchOverlay a,
#mobileDrawer button,
#mobileDrawer a{
    -webkit-tap-highlight-color:transparent;
}

#emHeader a,
#searchOverlay a,
#mobileDrawer a{
    color:inherit;
    text-decoration:none;
}

#emHeader img,
#emHeader svg,
#searchOverlay img,
#searchOverlay svg,
#mobileDrawer img,
#mobileDrawer svg{
    display:block;
}

#emHeader img,
#searchOverlay img,
#mobileDrawer img{
    max-width:100%;
}

#emHeader :focus-visible,
#searchOverlay :focus-visible,
#mobileDrawer :focus-visible{
    outline:3px solid rgba(255,90,31,.28);
    outline-offset:4px;
}

.em-sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}


/* =========================================================
   HEADER
========================================================= */

.em-header{
    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(255,244,234,.985);

}


/* =========================================================
   MASTHEAD
========================================================= */

.em-masthead{
    position:relative;

    width:min(var(--max),calc(100% - 48px));
    height:var(--masthead-h);

    margin:auto;

    display:grid;
    grid-template-columns:205px minmax(0,1fr) auto;

    gap:18px;
    align-items:stretch;
}


/* =========================================================
   BRAND VOICE
========================================================= */

.em-brand-voice{
    position:absolute;

    z-index:10;

    left:50%;
    top:8px;

    transform:
        translateX(-50%)
        rotate(-1deg);

    font-family:"Caveat",cursive;
    font-size:22.5px;
    font-weight:600;
    line-height:1;

    color:var(--blue);

    white-space:nowrap;
    pointer-events:none;
}

.em-brand-voice::after{
    content:"";

    position:absolute;

    right:-1px;
    bottom:-8px;

    width:60px;
    height:9px;

    border-bottom:2.25px solid var(--amber);
    border-radius:50%;

    opacity:1;
    transform:rotate(-3deg);
}


/* =========================================================
   BRAND
========================================================= */

.em-brand{
    position:relative;

    align-self:center;

    width:max-content;

    display:flex;
    flex-direction:column;

    line-height:.78;

    transform:translateY(8px);
}

.em-brand-rays{
    position:absolute;

    left:2px;
    top:-27px;

    width:58px;
    height:20px;
}

.em-brand-rays path{
    stroke:var(--amber);
    stroke-width:1.15;
    stroke-linecap:round;
}

.em-brand-word{
    display:block;

    font-size:24.5px;
    font-weight:900;

    letter-spacing:-.065em;

    color:var(--navy);
}

.em-brand-meta{
    display:flex;
    align-items:center;

    gap:8px;

    margin-top:10px;

    color:var(--blue);

    font-size:8px;
    font-weight:900;

    letter-spacing:.18em;

    text-transform:uppercase;
}

.em-brand-meta::before{
    content:"";

    width:22px;
    height:1.35px;

    background:var(--amber);
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.em-nav{
    min-width:0;

    display:flex;

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

    gap:1px;

    padding-top:35px;
}

.em-nav-item{
    position:relative;

    min-width:94px;
    height:82px;

    display:flex;
    flex-direction:column;

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

    gap:6px;

    padding:11px 13px 13px;

    border:0;
    background:transparent;

    text-align:center;

    transition:
        transform .18s var(--ease);
}

.em-nav-item[data-menu="things"]{
    min-width:124px;
}

.em-nav-item[data-menu="events"]{
    min-width:110px;
}

.em-nav-item[data-menu="moments"]{
    min-width:126px;
}

.em-nav-item:hover{
    transform:translateY(-1px);
}


/* Fine line icons */

.em-nav-icon{
    width:22px;
    height:22px;

    color:var(--navy);

    stroke-linecap:round;
    stroke-linejoin:round;

    transition:
        color .18s ease,
        transform .18s var(--ease);
}

.em-nav-item:hover .em-nav-icon,
.em-nav-item.is-open .em-nav-icon{
    color:var(--blue);

    transform:translateY(-2px);
}

.em-nav-kicker{
    color:var(--blue);

    font-size:8.25px;
    font-weight:900;
    line-height:1;

    letter-spacing:.115em;

    text-transform:uppercase;
    white-space:nowrap;
}

.em-nav-title{
    position:relative;

    display:block;

    color:var(--navy);

    font-size:12.5px;
    font-weight:900;
    line-height:1;

    letter-spacing:-.025em;

    white-space:nowrap;
}


/* =========================================================
   ACTIVE NAV SIGNATURE
========================================================= */

.em-nav-item::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:5px;

    width:31px;
    height:1.4px;

    border-radius:99px;

    background:var(--blue);

    transform:
        translateX(-50%)
        scaleX(0);

    transition:
        transform .22s var(--ease);
}

.em-nav-item.is-open::after{
    transform:
        translateX(-50%)
        scaleX(1);
}

.em-nav-title::after{
    content:"";

    position:absolute;

    left:calc(50% + 14px);
    bottom:-17px;

    width:4px;
    height:4px;

    border-radius:50%;

    background:var(--amber);

    opacity:0;
    transform:scale(.4);

    transition:
        opacity .18s ease,
        transform .18s ease;
}

.em-nav-item.is-open .em-nav-title::after{
    opacity:1;
    transform:scale(1);
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.em-actions{
    position:relative;

    display:flex;
    align-items:flex-end;

    gap:4px;

    padding-bottom:17px;
}

.em-action{
    position:relative;

    width:43px;
    height:48px;

    display:grid;
    place-items:center;

    padding:0;

    border:0;
    background:transparent;

    color:var(--navy);

    transition:
        color .16s ease,
        transform .16s ease;
}

.em-action:hover{
    color:var(--blue);
    transform:translateY(-2px);
}

.em-action svg{
    width:20px;
    height:20px;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   SAVED
========================================================= */

.em-saved-count{
    position:absolute;

    right:-1px;
    top:2px;

    min-width:17px;
    height:17px;

    display:grid;
    place-items:center;

    padding:0 4px;

    border:2px solid var(--warm);
    border-radius:99px;

    background:var(--blue);
    color:#fff;

    font-size:8px;
    font-weight:900;
}


/* =========================================================
   PROFILE
========================================================= */

.em-profile{
    min-height:49px;

    display:flex;
    align-items:center;

    gap:9px;

    padding:0 1px 0 8px;

    border:0;
    background:transparent;
}

.em-avatar{
    position:relative;

    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    flex-shrink:0;

    border-radius:50%;

    background:var(--navy);
    color:#fff;

    font-size:11px;
    font-weight:900;

    box-shadow:
        0 0 0 2px var(--warm),
        0 0 0 3.5px var(--blue);
}

.em-avatar-dot{
    position:absolute;

    top:-3px;
    right:-3px;

    width:10px;
    height:10px;

    border:2px solid var(--warm);
    border-radius:50%;

    background:var(--fuchsia);

    box-shadow:
        0 2px 7px rgba(237,15,129,.24);
}

.em-profile-copy{
    text-align:left;
}

.em-profile-copy strong{
    display:block;

    color:var(--navy);

    font-size:9px;
    font-weight:900;
    line-height:1;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.em-profile-copy small{
    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:9px;
}


/* =========================================================
   PROFILE MENU
========================================================= */

.em-profile-menu{
    position:absolute;

    z-index:80;

    top:97px;
    right:0;

    width:278px;

    padding:8px;

    background:var(--warm);

    border:1px solid var(--line);
    border-radius:14px;

    box-shadow:var(--shadow);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:
        translateY(7px)
        scale(.985);

    transform-origin:top right;

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .18s var(--ease);
}

.em-profile-menu.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:
        translateY(0)
        scale(1);
}

.em-profile-head{
    padding:12px 11px 13px;

    border-bottom:1px solid var(--line);
}

.em-profile-head strong{
    display:block;

    font-size:14px;
}

.em-profile-head small{
    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:9px;
}

.em-profile-head a{
    display:inline-block;

    margin-top:10px;

    color:var(--blue);

    font-size:8px;
    font-weight:900;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.em-profile-links{
    padding:6px 0;
}

.em-profile-link{
    min-height:37px;

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

    padding:0 9px;

    border-radius:7px;

    color:var(--ink);

    font-size:11px;
    font-weight:700;
}

.em-profile-link:hover{
    background:var(--blue-soft);
}

.em-profile-count{
    min-width:19px;
    height:19px;

    display:grid;
    place-items:center;

    padding:0 5px;

    border-radius:99px;

    background:var(--fuchsia);
    color:#fff;

    font-size:8px;
    font-weight:900;
}

.em-profile-footer{
    padding-top:6px;

    border-top:1px solid var(--line);
}


/* =========================================================
   MOMBASA NOW
   NOW INSIDE THE HEADER AND ABOVE THE MEGA MENU
========================================================= */

.em-now{
    position:relative;

    z-index:40;

    height:var(--now-h);

    background:var(--navy);
    color:#fff;
}

.em-now-inner{
    width:min(var(--max),calc(100% - 48px));
    height:100%;

    margin:auto;

    display:flex;
    align-items:center;

    overflow-x:auto;

    white-space:nowrap;

    scrollbar-width:none;
}

.em-now-inner::-webkit-scrollbar{
    display:none;
}

.em-now-title{
    display:flex;
    align-items:center;

    gap:9px;

    min-width:max-content;

    padding-right:28px;

    color:var(--amber);

    font-size:9px;
    font-weight:900;

    letter-spacing:.15em;

    text-transform:uppercase;
}

.em-now-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--amber);

    box-shadow:
        0 0 0 4px rgba(255,179,0,.13);
}

.em-now-item{
    position:relative;

    min-width:max-content;

    padding:0 27px;

    color:rgba(255,255,255,.66);

    font-size:12px;
}

.em-now-item::before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:1.4px;
    height:10px;

    background:rgba(255,179,0,.42);

    transform:translateY(-50%);
}

.em-now-item strong{
    color:#fff;

    font-weight:900;
}

.em-now-action{
    margin-left:auto;
}

.em-now-action strong{
    color:var(--amber);
}


/* =========================================================
   MEGA MENU
   OPENS BELOW MOMBASA NOW
========================================================= */

.em-mega-wrap{
    position:absolute;

    left:0;
    right:0;
    top:var(--header-h);

    z-index:30;

    pointer-events:none;
}

.em-mega{
    width:min(1390px,calc(100% - 64px));

    /* 396px remains the visual minimum, not a hard crop boundary. */
    height:auto;
    min-height:var(--mega-h);

    /* On unusually short laptop viewports, scroll the dropdown instead
       of cutting content off below the fold. */
    max-height:calc(100dvh - var(--header-h) - 12px);

    margin:auto;

    display:block;

    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;

    background:var(--warm);

    border:1px solid rgba(0,12,50,.07);
    border-top:0;

    border-radius:0 0 18px 18px;

    box-shadow:var(--shadow);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:
        translateY(-8px)
        scale(.995);

    transform-origin:top center;

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .22s var(--ease);
}

.em-mega.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:
        translateY(0)
        scale(1);
}


.em-mega-panel{
    width:100%;

    /* Let the tallest of intro / menu content / feature panel determine
       the actual dropdown height. */
    height:auto;
    min-height:var(--mega-h);

    display:grid;

    grid-template-columns:
        270px
        minmax(0,1fr)
        340px;
}

.em-mega-panel[hidden]{
    display:none!important;
}


/* =========================================================
   LEFT EDITORIAL PANEL
========================================================= */

.em-mega-intro{
    position:relative;

    padding:38px 31px 32px;

    border-right:1px solid rgba(0,12,50,.07);
}


/*
   Deliberately no giant amber circle here.
   The feature-window arch owns that signature.
*/

.em-mega-eyebrow{
    display:flex;
    align-items:center;

    gap:8px;

    width:max-content;

    color:var(--blue);

    font-size:8.5px;
    font-weight:900;

    letter-spacing:.15em;

    text-transform:uppercase;
}

.em-mega-eyebrow::after{
    content:"";

    width:28px;
    height:1.35px;

    background:var(--amber);
}

.em-mega-heading{
    max-width:225px;

    margin:17px 0 0;

    color:var(--navy);

    font-size:38px;
    font-weight:900;
    line-height:.89;

    letter-spacing:-.058em;
}

.em-mega-description{
    max-width:215px;

    margin:20px 0 0;

    color:var(--text);

    font-size:12px;
    line-height:1.6;
}


/* =========================================================
   CENTER DISCOVERY FIELD
========================================================= */

.em-mega-content{
    min-width:0;

    padding:30px 35px 28px;
}

.em-mega-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:24px;

    margin-bottom:17px;
}

.em-mega-label{
    display:flex;
    align-items:center;

    gap:8px;

    color:var(--blue);

    font-size:8.5px;
    font-weight:900;

    letter-spacing:.13em;

    text-transform:uppercase;
}

.em-mega-label svg{
    width:17px;
    height:17px;
}

.em-mega-all{
    display:flex;
    align-items:center;

    gap:7px;

    color:var(--blue);

    font-size:9.5px;
    font-weight:900;
}

.em-mega-all svg{
    width:14px;
    height:14px;

    transition:
        transform .18s ease;
}

.em-mega-all:hover svg{
    transform:translateX(3px);
}


/* =========================================================
   CENTER GRID
========================================================= */

.em-mega-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    column-gap:28px;
    row-gap:6px;
}

.em-mega-item{
    min-height:78px;

    display:grid;

    grid-template-columns:
        62px
        minmax(0,1fr)
        14px;

    align-items:center;

    gap:13px;

    padding:5px 0;

    transition:
        transform .17s var(--ease);
}

.em-mega-item:hover{
    transform:translateX(3px);
}

.em-mega-thumb{
    width:62px;
    height:58px;

    overflow:hidden;

    border-radius:9px;

    background:var(--blue-soft);
}

.em-mega-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .32s var(--ease);
}

.em-mega-item:hover .em-mega-thumb img{
    transform:scale(1.05);
}

.em-mega-copy{
    min-width:0;
}

.em-mega-copy strong{
    display:block;

    color:var(--navy);

    font-size:12.5px;
    font-weight:800;
    line-height:1.1;

    transition:
        color .16s ease;
}

.em-mega-item:hover .em-mega-copy strong{
    color:var(--blue);
}

.em-mega-copy small{
    display:block;

    margin-top:5px;

    color:var(--muted);

    font-size:9.5px;
    line-height:1.35;
}

.em-mega-item > svg{
    width:14px;
    height:14px;

    color:var(--blue);
}


/* Text-only sections */

.em-mega-item.no-image{
    min-height:59px;

    grid-template-columns:
        minmax(0,1fr)
        14px;

    padding:7px 0;

    border-bottom:1px solid var(--line);
}


/* Following relationship state */

.em-mega-item.is-following{
    grid-template-columns:
        minmax(0,1fr)
        auto;
}

.em-following-mark{
    width:18px;
    height:18px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--fuchsia);
    color:#fff;
}

.em-following-mark svg{
    width:10px;
    height:10px;
}


/* =========================================================
   RIGHT FEATURE WINDOW
========================================================= */

.em-feature{
    position:relative;

    /* Grid stretch keeps the blue panel aligned with the other columns,
       while its own content is allowed to increase the parent height. */
    height:auto;
    min-height:100%;
    align-self:stretch;

    display:grid;
    grid-template-rows:178px minmax(min-content,1fr);

    overflow:hidden;

    background:var(--blue);
    color:#fff;
}


/* =========================================================
   LARGE NATURAL IMAGE
========================================================= */

.em-feature-image-link{
    position:relative;

    display:block;

    overflow:hidden;

    background:#F7E9DD;
}

.em-feature-image-link img{
    width:100%;
    height:100%;

    object-fit:cover;

    filter:none;

    transition:
        transform .55s var(--ease);
}

.em-feature:hover .em-feature-image-link img{
    transform:scale(1.025);
}


/*
   Only the final 30px blends into Royal Blue.
   Most of the image is completely natural.
*/

.em-feature-image-link::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:30px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,90,31,0),
            rgba(255,90,31,.18)
        );

    pointer-events:none;
}


/* =========================================================
   FEATURE BODY
========================================================= */

.em-feature-body{
    position:relative;

    min-height:0;

    padding:19px 24px 22px;
}


/* Signature amber arch */

.em-feature-body::after{
    content:"";

    position:absolute;

    right:-101px;
    bottom:-112px;

    width:220px;
    height:220px;

    border:1.3px solid rgba(255,179,0,.82);
    border-radius:50%;

    box-shadow:
        0 0 0 29px rgba(255,179,0,.032);

    pointer-events:none;
}


/* Disclosure / kicker */

.em-feature-meta{
    position:relative;

    z-index:2;

    display:flex;
    align-items:center;

    gap:9px;
}

.em-feature-kicker{
    color:var(--amber);

    font-size:8px;
    font-weight:900;

    letter-spacing:.15em;

    text-transform:uppercase;
}

.em-feature-disclosure{
    display:none;

    padding-left:9px;

    border-left:1px solid rgba(255,255,255,.28);

    color:rgba(255,255,255,.67);

    font-size:7px;
    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;
}

.em-feature[data-type="promoted"]
.em-feature-disclosure{
    display:inline-block;
}


/* Feature title */

.em-feature-title{
    position:relative;

    z-index:2;

    max-width:270px;

    margin:8px 0 0;

    color:#fff;

    font-size:25px;
    font-weight:900;
    line-height:.96;

    letter-spacing:-.045em;
}

.em-feature-title a{
    color:inherit;
}

.em-feature-title a:hover{
    color:var(--amber);
}

.em-feature-copy{
    position:relative;

    z-index:2;

    max-width:255px;

    margin:9px 0 0;

    color:rgba(255,255,255,.73);

    font-size:9.5px;
    line-height:1.45;
}


/* Feature rows */

.em-feature-links{
    position:relative;

    z-index:2;

    margin-top:12px;
}

.em-feature-row{
    min-height:33px;

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

    gap:14px;

    border-top:1px solid rgba(255,255,255,.15);

    color:rgba(255,255,255,.86);

    font-size:9.5px;
    font-weight:600;
}

.em-feature-row strong{
    display:flex;
    align-items:center;

    gap:4px;

    color:#fff;

    font-size:9px;
    font-weight:800;
}

.em-feature-row svg{
    width:11px;
    height:11px;
}


/* Feature CTA */

.em-feature-cta{
    position:relative;

    z-index:2;

    display:inline-flex;
    align-items:center;

    gap:9px;

    margin-top:14px;

    color:var(--amber);

    font-size:10px;
    font-weight:900;
}

.em-feature-cta svg{
    width:14px;
    height:14px;

    transition:
        transform .18s ease;
}

.em-feature-cta:hover svg{
    transform:translateX(3px);
}


/* =========================================================
   SEARCH DIALOG
========================================================= */

.em-search{
    position:fixed;

    inset:0;

    z-index:5000;

    overflow:hidden;

    background:var(--warm);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .20s ease,
        visibility .20s ease;
}

.em-search.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.em-search::after{
    content:"";

    position:absolute;

    right:-175px;
    top:-185px;

    width:370px;
    height:370px;

    border:1.5px solid rgba(255,179,0,.17);
    border-radius:50%;

    box-shadow:
        0 0 0 26px rgba(255,179,0,.04);
}

.em-search-top{
    position:relative;

    z-index:2;

    width:min(var(--max),calc(100% - 56px));
    height:78px;

    margin:auto;

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

    border-bottom:1px solid var(--line);
}

.em-search-brand{
    display:flex;
    flex-direction:column;

    font-size:12px;
    font-weight:900;
    line-height:.8;

    letter-spacing:-.04em;
}

.em-search-close{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border:0;
    background:transparent;
}

.em-search-close svg{
    width:18px;
    height:18px;
}

.em-search-content{
    position:relative;

    z-index:2;

    width:min(980px,calc(100% - 56px));

    margin:8vh auto 0;
}

.em-search-kicker{
    display:flex;
    align-items:center;

    gap:9px;

    width:max-content;

    color:var(--blue);

    font-size:9px;
    font-weight:900;

    letter-spacing:.16em;

    text-transform:uppercase;
}

.em-search-kicker::after{
    content:"";

    width:29px;
    height:1.4px;

    background:var(--amber);
}

.em-search-content h2{
    max-width:760px;

    margin:11px 0 36px;

    color:var(--navy);

    font-size:clamp(48px,7vw,88px);
    font-weight:900;
    line-height:.88;

    letter-spacing:-.07em;
}

.em-search-field{
    min-height:74px;

    display:flex;
    align-items:center;

    gap:15px;

    border-bottom:1.5px solid var(--navy);
}

.em-search-field svg{
    width:25px;
    height:25px;

    color:var(--blue);
}

.em-search-field input{
    width:100%;

    border:0;
    outline:0;

    background:transparent;

    color:var(--navy);

    font-size:21px;
}

.em-search-field input::placeholder{
    color:var(--muted);
}

.em-search-suggestions{
    display:flex;
    flex-wrap:wrap;

    gap:12px 27px;

    margin-top:26px;
}

.em-search-suggestions a{
    padding-bottom:4px;

    border-bottom:1px solid var(--line);

    color:var(--ink);

    font-size:11px;
    font-weight:700;
}

.em-search-suggestions a:hover{
    color:var(--blue);

    border-color:var(--blue);
}


/* =========================================================
   MOBILE BASE
========================================================= */

.em-mobile-trigger,
.em-mobile-drawer{
    display:none;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1240px){

    .em-masthead{
        grid-template-columns:
            175px
            minmax(0,1fr)
            auto;
    }

    .em-nav-item{
        min-width:79px;

        padding-left:8px;
        padding-right:8px;
    }

    .em-nav-item[data-menu="things"]{
        min-width:105px;
    }

    .em-nav-item[data-menu="events"]{
        min-width:95px;
    }

    .em-nav-item[data-menu="moments"]{
        min-width:105px;
    }

    .em-nav-kicker{
        display:none;
    }

    .em-mega-panel{
        grid-template-columns:
            235px
            minmax(0,1fr)
            300px;
    }

    .em-mega-content{
        padding-left:25px;
        padding-right:25px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:1080px){

    :root{
        --masthead-h:70px;
        --now-h:38px;
        --header-h:108px;
    }

    .em-masthead{
        width:100%;
        height:70px;

        grid-template-columns:
            44px
            minmax(0,1fr)
            auto;

        align-items:center;

        padding:0 14px;

        gap:10px;
    }

    .em-brand-voice{
        display:none;
    }

    .em-mobile-trigger{
        display:grid;
    }

    .em-nav,
    .em-mega-wrap{
        display:none;
    }

    .em-brand{
        justify-self:center;

        transform:none;
    }

    .em-brand-rays,
    .em-brand-meta{
        display:none;
    }

    .em-brand-word{
        font-size:16px;
    }

    .em-actions{
        align-items:center;

        padding:0;
    }

    .desktop-saved,
    .em-profile-copy{
        display:none;
    }

    .em-profile{
        padding:0;
    }

    .em-avatar{
        width:34px;
        height:34px;
    }

    .em-profile-menu{
        display:none;
    }


    /* NOW */

    .em-now-inner{
        width:100%;

        padding:0 14px;
    }

    .em-now-title{
        padding-right:18px;
    }

    .em-now-item{
        padding:0 18px;

        font-size:10px;
    }

    .em-now-action{
        margin-left:0;
    }


    /* =====================================================
       MOBILE DRAWER
    ===================================================== */

    .em-mobile-drawer{
        position:fixed;

        inset:0;

        z-index:6000;

        display:block;

        overflow:hidden;
        overscroll-behavior:contain;

        background:var(--warm);

        transform:translateX(-100%);

        transition:
            transform .30s var(--ease);
    }

    .em-mobile-drawer.is-open{
        transform:translateX(0);
    }

    .em-mobile-drawer::after{
        content:"";

        position:absolute;

        right:-94px;
        top:120px;

        width:190px;
        height:190px;

        border:1.4px solid rgba(255,179,0,.16);
        border-radius:50%;

        pointer-events:none;
    }

    .em-mobile-top{
        position:relative;

        z-index:2;

        height:70px;

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

        padding:
            0
            max(18px, env(safe-area-inset-right))
            0
            max(18px, env(safe-area-inset-left));

        border-bottom:1px solid var(--line);
    }

    .em-mobile-close{
        width:40px;
        height:40px;

        display:grid;
        place-items:center;

        border:0;
        background:transparent;
    }

    .em-mobile-close svg{
        width:18px;
        height:18px;
    }

    .em-mobile-body{
        position:relative;

        z-index:2;

        height:calc(100vh - 70px);
        height:calc(100dvh - 70px);

        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;

        padding:
            22px
            max(20px, env(safe-area-inset-right))
            max(58px, calc(58px + env(safe-area-inset-bottom)))
            max(20px, env(safe-area-inset-left));
    }


    /* Mobile search */

    .em-mobile-search{
        width:100%;
        min-height:62px;

        display:flex;
        align-items:center;

        gap:11px;

        margin-bottom:32px;

        padding:0;

        border:0;
        border-bottom:1.5px solid var(--navy);

        background:transparent;

        text-align:left;
    }

    .em-mobile-search svg{
        width:20px;
        height:20px;

        color:var(--blue);
    }

    .em-mobile-search-copy{
        flex:1;
    }

    .em-mobile-search-copy strong{
        display:block;

        font-size:13px;
    }

    .em-mobile-search-copy small{
        display:block;

        margin-top:4px;

        color:var(--muted);

        font-size:9px;
        line-height:1.4;
    }


    /* Mobile intro */

    .em-mobile-overline{
        display:flex;
        align-items:center;

        gap:8px;

        width:max-content;

        margin-bottom:8px;

        color:var(--blue);

        font-size:8px;
        font-weight:900;

        letter-spacing:.17em;

        text-transform:uppercase;
    }

    .em-mobile-overline::after{
        content:"";

        width:25px;
        height:1.35px;

        background:var(--amber);
    }

    .em-mobile-title{
        margin:0 0 31px;

        color:var(--navy);

        font-size:45px;
        font-weight:900;
        line-height:.88;

        letter-spacing:-.06em;
    }


    /* =====================================================
       MOBILE NAVIGATION
    ===================================================== */

    .em-mobile-navigation{
        border-top:1px solid var(--line);
    }

    .em-mobile-section{
        border-bottom:1px solid var(--line);
    }

    .em-mobile-section-button{
        width:100%;
        min-height:82px;

        display:grid;

        grid-template-columns:
            31px
            minmax(0,1fr)
            21px;

        align-items:center;

        gap:13px;

        padding:0;

        border:0;
        background:transparent;

        text-align:left;
    }

    .em-mobile-section-icon{
        width:28px;
        height:28px;

        color:var(--navy);
    }

    .em-mobile-section-icon svg{
        width:100%;
        height:100%;
    }

    .em-mobile-section-copy{
        display:flex;
        flex-direction:column;

        gap:5px;
    }

    .em-mobile-section-kicker{
        color:var(--blue);

        font-size:7px;
        font-weight:900;

        letter-spacing:.14em;

        text-transform:uppercase;
    }

    .em-mobile-section-title{
        color:var(--navy);

        font-size:23px;
        font-weight:900;
        line-height:1;

        letter-spacing:-.04em;
    }

    .em-mobile-toggle{
        position:relative;

        width:20px;
        height:20px;
    }

    .em-mobile-toggle::before,
    .em-mobile-toggle::after{
        content:"";

        position:absolute;

        left:50%;
        top:50%;

        width:14px;
        height:1.4px;

        background:var(--blue);

        transform:
            translate(-50%,-50%);

        transition:
            transform .18s ease;
    }

    .em-mobile-toggle::after{
        transform:
            translate(-50%,-50%)
            rotate(90deg);
    }

    .em-mobile-section.is-open
    .em-mobile-toggle::after{
        transform:
            translate(-50%,-50%);
    }


    /* Submenu */

    .em-mobile-submenu{
        display:grid;

        grid-template-rows:0fr;

        transition:
            grid-template-rows .24s var(--ease);
    }

    .em-mobile-section.is-open
    .em-mobile-submenu{
        grid-template-rows:1fr;
    }

    .em-mobile-submenu-inner{
        overflow:hidden;
    }

    .em-mobile-links{
        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:0 18px;

        padding:
            0
            0
            23px
            44px;
    }

    .em-mobile-links a{
        min-height:40px;

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

        gap:8px;

        border-bottom:1px solid var(--line);

        color:var(--ink);

        font-size:11px;
        font-weight:700;
    }

    .em-mobile-links a:hover{
        color:var(--blue);
    }

    .em-mobile-relationship-mark{
        width:17px;
        height:17px;

        display:grid;
        place-items:center;

        flex-shrink:0;

        border-radius:50%;

        background:var(--fuchsia);
        color:#fff;
    }

    .em-mobile-relationship-mark svg{
        width:9px;
        height:9px;
    }

    .em-mobile-cta{
        grid-column:1/-1;

        width:max-content;

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

        gap:7px;

        margin-top:10px;

        border:0!important;

        color:var(--blue)!important;

        font-weight:900!important;
    }

    .em-mobile-cta svg{
        width:14px;
        height:14px;
    }


    /* =====================================================
       MOBILE ACCOUNT
    ===================================================== */

    .em-mobile-account{
        margin-top:36px;

        padding-top:24px;

        border-top:1.5px solid var(--navy);
    }

    .em-mobile-label{
        display:block;

        margin-bottom:13px;

        color:var(--muted);

        font-size:8px;
        font-weight:900;

        letter-spacing:.15em;

        text-transform:uppercase;
    }

    .em-mobile-user{
        display:flex;
        align-items:center;

        gap:12px;

        margin-bottom:14px;
    }

    .em-mobile-user strong{
        display:block;

        font-size:13px;
    }

    .em-mobile-user small{
        display:block;

        margin-top:3px;

        color:var(--muted);

        font-size:9px;
    }

    .em-mobile-account-links{
        display:grid;
    }

    .em-mobile-account-links a{
        min-height:40px;

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

        gap:12px;

        border-bottom:1px solid var(--line);

        color:var(--ink);

        font-size:11px;
        font-weight:700;
    }

    .em-mobile-account-links svg{
        width:13px;
        height:13px;

        color:var(--blue);
    }

    .em-mobile-number{
        font-size:10px;
        font-weight:900;

        color:var(--blue);
    }

    .em-mobile-notification{
        min-width:19px;
        height:19px;

        display:grid;
        place-items:center;

        padding:0 5px;

        border-radius:99px;

        background:var(--fuchsia);
        color:#fff;

        font-size:8px;
        font-weight:900;
    }


    /* =====================================================
       BUSINESS
    ===================================================== */

    .em-mobile-secondary{
        margin-top:29px;

        padding-top:22px;

        border-top:1px solid var(--line);
    }

    .em-mobile-secondary a{
        min-height:36px;

        display:flex;
        align-items:center;

        width:max-content;

        color:var(--ink);

        font-size:11px;
        font-weight:750;
    }


    /* =====================================================
       SOCIALS
    ===================================================== */

    .em-mobile-social{
        margin-top:30px;

        padding-top:22px;

        border-top:1px solid var(--line);
    }

    .em-mobile-social-links{
        display:flex;
        align-items:center;

        gap:18px;
    }

    .em-mobile-social-links a{
        width:32px;
        height:32px;

        display:grid;
        place-items:center;

        color:var(--navy);

        transition:
            color .16s ease,
            transform .16s ease;
    }

    .em-mobile-social-links a:hover{
        color:var(--blue);

        transform:translateY(-2px);
    }

    .em-mobile-social-links svg{
        width:19px;
        height:19px;
    }


    /* Search mobile */

    .em-search-top{
        width:100%;
        height:70px;

        padding:0 18px;
    }

    .em-search-content{
        width:calc(100% - 40px);

        margin:50px auto 0;
    }

    .em-search-content h2{
        font-size:46px;
    }

    .em-search-field input{
        font-size:16px;
    }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    #emHeader *,
    #emHeader *::before,
    #emHeader *::after,
    #searchOverlay *,
    #searchOverlay *::before,
    #searchOverlay *::after,
    #mobileDrawer *,
    #mobileDrawer *::before,
    #mobileDrawer *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }

}

/* =========================================================
   WORDPRESS PRODUCTION ADAPTATIONS
   Do not alter the approved visual geometry.
========================================================= */

/* Keep the sticky masthead below the WordPress admin bar when logged in. */
@media(min-width:783px){
    body.admin-bar #emHeader.em-header{top:32px;}
}
@media(max-width:782px){
    body.admin-bar #emHeader.em-header{top:46px;}
}

/* Logged-out account state: same invisible-control language as the master. */
.em-signin{
    min-height:49px;
    display:inline-flex;
    align-items:center;
    padding:0 1px 0 8px;
    border:0;
    background:transparent;
    color:var(--navy);
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}
.em-signin:hover{color:var(--blue);}

.em-mobile-signin{
    min-height:40px;
    display:flex;
    align-items:center;
    width:max-content;
    padding:0;
    border:0;
    background:transparent;
    color:var(--blue);
    font-size:12px;
    font-weight:900;
}

/* Saved count uses the warm interaction accent; notifications/relationship remain Fuchsia. */
.em-saved-count:empty,
.em-profile-count:empty,
.em-mobile-number:empty,
.em-mobile-notification:empty{display:none;}

/* Hidden dialogs and submenus must also be non-interactive to AT/keyboard. */
#searchOverlay[inert],
#mobileDrawer[inert],
.em-mobile-submenu[inert]{
    pointer-events:none;
}

/* Prevent old Traveler header selectors from participating in layout. */
#emHeader.em-header{
    width:100%;
    margin:0;
    padding:0;
    border:0;
}

/* Search form must not inherit Traveler form-control decoration. */
#searchOverlay .em-search-form,
#searchOverlay .em-search-field,
#searchOverlay #searchInput{
    box-shadow:none;
}
#searchOverlay #searchInput{
    min-height:60px;
    padding:0;
    border-radius:0;
}

/* The master breakpoint is 1080px. */
@media(max-width:1080px){
    #emHeader,
    #searchOverlay,
    #mobileDrawer{
        --masthead-h:70px;
        --now-h:38px;
        --header-h:108px;
    }
}

/* =========================================================
   MASTER POLISH 01
   Confidence pass only — no architecture changes.
========================================================= */

@media(min-width:1241px){

    /* Give the brand slightly more authority without increasing header height. */
    .em-brand{
        transform:translateY(7px);
    }

    .em-brand-word{
        font-size:24.5px;
    }

    .em-brand-meta{
        margin-top:9px;
        font-size:8.25px;
    }

    /* Keep the handwritten voice, but let the brand lead. */
    .em-brand-voice{
        font-size:22.5px;
        opacity:.94;
    }

    /* The micro-kickers should read as information, not decoration. */
    .em-nav-kicker{
        font-size:8.25px;
        letter-spacing:.105em;
    }

    /* Slightly firmer right-side endpoint, still completely unboxed. */
    .em-actions{
        gap:6px;
    }

    .em-action{
        width:44px;
        height:48px;
    }

    .em-action svg{
        width:21px;
        height:21px;
    }

    .em-signin{
        padding-left:11px;
        padding-right:2px;
        font-size:11.75px;
        letter-spacing:-.01em;
    }

    .em-profile{
        gap:10px;
        padding-left:9px;
    }

    .em-profile-copy strong{
        font-size:9.5px;
    }

    .em-profile-copy small{
        font-size:9.5px;
    }

    /* MOMBASA NOW should read as useful intelligence, not fine print. */
    .em-now-title{
        font-size:9.5px;
    }

    .em-now-item{
        font-size:12px;
    }
}

/* The master already hides kickers on the tablet tightening breakpoint.
   Keep the remaining live-data text comfortably readable there. */
@media(min-width:1081px) and (max-width:1240px){
    .em-now-item{
        font-size:11.5px;
    }
}

/* Mobile remains compact, with only a small readability lift in the rail. */
@media(max-width:1080px){
    .em-now-title{
        font-size:9px;
    }

    .em-now-item{
        font-size:10.5px;
    }
}

/* =========================================================
   TECHNICAL PRODUCTION PASS 01
   SEO / accessibility / performance only.
========================================================= */

/* Keyboard skip link. */
.em-skip-link{
    position:fixed;
    left:16px;
    top:12px;
    z-index:100000;

    transform:translateY(-170%);

    padding:11px 14px;

    border-radius:5px;

    background:var(--navy);
    color:#fff!important;

    font-size:12px;
    font-weight:800;

    transition:transform .16s ease;
}

.em-skip-link:focus{
    transform:translateY(0);
}

/* Quiet persistent current-section cue, separate from temporary open state. */
.em-nav-item.is-current:not(.is-open) .em-nav-icon,
.em-nav-item.is-current:not(.is-open) .em-nav-title{
    color:var(--blue);
}

/* Ensure visually secondary small text still meets normal-text contrast. */
.em-mega-copy small,
.em-profile-copy small,
.em-profile-head small,
.em-mobile-search-copy small,
.em-mobile-user small,
.em-mobile-label,
.em-search-field input::placeholder{
    color:var(--muted);
}

/* Amber remains the spark, not tiny low-contrast text on Royal Blue. */
.em-feature-kicker{
    color:#fff;
}

.em-feature-kicker::after{
    content:"";

    display:inline-block;

    width:18px;
    height:1.5px;

    margin-left:7px;
    vertical-align:middle;

    background:var(--amber);
}

.em-feature-copy{
    color:#fff;
}

.em-feature-row{
    color:#fff;
}

.em-feature-cta{
    color:#fff;
}

.em-feature-cta svg{
    color:var(--amber);
}

/* White numerals on Fuchsia are just under AA at this size; Navy passes. */
.em-profile-count,
.em-mobile-notification{
    color:var(--navy);
}

/* Rendered-but-closed mega panels must never be keyboard reachable. */
.em-mega-panel[hidden],
.em-mobile-submenu[inert],
#searchOverlay[inert],
#mobileDrawer[inert]{
    pointer-events:none;
}

/* No visual effect: explicit SEO/analytics hooks. */
[data-em-sponsored="true"]{
    text-decoration:none;
}

/* The mobile navigation is now a real <nav>. */
.em-mobile-navigation{
    display:block;
}

/* At 200% zoom, let the component switch to the compact model before clipping. */
@media(max-width:1080px){
    .em-skip-link{
        left:max(10px, env(safe-area-inset-left));
    }
}

/* =========================================================
   DESTINATIONS — POPULAR PLACES + COUNTY STRUCTURE
   Keeps traveller intent separate from geographic structure.
========================================================= */

/* The destination panel has one extra information layer.
   Give only this panel more room instead of inflating every menu. */
.em-mega[data-open-menu="destinations"]{
    min-height:450px;
}

/* Eight popular places fit comfortably without becoming a giant menu. */
.em-mega-panel[data-panel="destinations"] .em-mega-content{
    padding-top:25px;
    padding-bottom:20px;
}

.em-mega-panel[data-panel="destinations"] .em-mega-head{
    margin-bottom:10px;
}

.em-mega-panel[data-panel="destinations"] .em-mega-grid{
    row-gap:1px;
}

.em-mega-panel[data-panel="destinations"] .em-mega-item{
    min-height:61px;
}

.em-mega-panel[data-panel="destinations"] .em-mega-thumb{
    width:54px;
    height:50px;
    border-radius:8px;
}

.em-mega-panel[data-panel="destinations"] .em-mega-item{
    grid-template-columns:54px minmax(0,1fr) 14px;
    gap:11px;
}

.em-mega-panel[data-panel="destinations"] .em-mega-copy small{
    margin-top:3px;
}

/* Counties are structural links, not competing destination cards. */
.em-county-strip{
    display:flex;
    align-items:center;
    gap:13px;

    margin-top:10px;
    padding-top:11px;

    border-top:1px solid var(--line);
}

.em-county-strip-label{
    flex:0 0 auto;

    color:var(--blue);

    font-size:7.5px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.em-county-links{
    min-width:0;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:5px 12px;
}

.em-county-link{
    position:relative;

    color:rgba(0,12,50,.72);

    font-size:9px;
    font-weight:800;
    line-height:1.2;
}

.em-county-link:not(:last-child)::after{
    content:"";

    position:absolute;
    right:-7px;
    top:50%;

    width:2px;
    height:2px;

    border-radius:50%;

    background:var(--amber);

    transform:translateY(-50%);
}

.em-county-link:hover,
.em-county-link[aria-current="page"]{
    color:var(--blue);
}

/* Prevent the right-side CTA from ever sitting against the crop edge. */
.em-feature-body{
    padding-bottom:26px;
}

.em-feature-cta{
    margin-top:10px;
}

@media(max-width:1240px){
    .em-mega[data-open-menu="destinations"]{
        min-height:448px;
    }

    .em-mega-panel[data-panel="destinations"] .em-mega-content{
        padding-left:23px;
        padding-right:23px;
    }

    .em-county-strip{
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }

    .em-county-links{
        gap:5px 11px;
    }
}

/* =========================================================
   PLAN — TRANSPORT + PRACTICAL TRAVEL
========================================================= */

/* Plan carries more high-intent utility links than the original Guides menu.
   Give it targeted room rather than making every mega panel taller. */
.em-mega[data-open-menu="guides"]{
    min-height:438px;
}

.em-mega-panel[data-panel="guides"] .em-mega-content{
    padding-top:24px;
    padding-bottom:22px;
}

.em-mega-panel[data-panel="guides"] .em-mega-grid{
    row-gap:3px;
}

.em-mega-panel[data-panel="guides"] .em-mega-item.no-image{
    min-height:54px;
    padding:6px 0;
}

.em-mega-panel[data-panel="guides"] .em-mega-copy small{
    margin-top:3px;
}

@media(max-width:1240px){
    .em-mega[data-open-menu="guides"]{
        min-height:440px;
    }
}



/* =========================================================
   MEGA MENU AUTO-HEIGHT FIX 04
   Content-heavy feature panels must never be cropped.
========================================================= */

.em-feature-body{
    display:flex;
    flex-direction:column;

    box-sizing:border-box;

    padding-bottom:28px;
}

.em-feature-links{
    flex:0 0 auto;
}

.em-feature-cta{
    flex:0 0 auto;

    /* CTA remains part of normal document flow, never absolutely pinned
       against a hard menu boundary. */
    margin-top:14px;
    margin-bottom:0;
}

/* If a short desktop viewport forces internal dropdown scrolling,
   make keyboard focus obvious inside the scroll container. */
.em-mega:focus-within{
    scroll-behavior:smooth;
}

/* Mobile never uses the desktop mega menu. */
@media(max-width:1080px){
    .em-mega{
        max-height:none;
        overflow:visible;
        scrollbar-gutter:auto;
    }
}

/* =========================================================
   FEATURE PANEL ISOLATION FIX 05
   Locks the header's right-hand panel to the Sun + Tide design
   so page-specific article/template CSS cannot restyle it.
========================================================= */

#emHeader .em-feature{
    background:#FF5A1F !important;
    color:#FFFFFF !important;

    font-family:Inter,Arial,sans-serif !important;
    font-style:normal !important;
    text-align:left !important;
}

/* Neutralise generic post/page typography rules. */
#emHeader .em-feature p,
#emHeader .em-feature strong,
#emHeader .em-feature small,
#emHeader .em-feature span,
#emHeader .em-feature a{
    font-family:Inter,Arial,sans-serif !important;
    font-style:normal !important;
}

#emHeader .em-feature p{
    text-indent:0 !important;
}

#emHeader .em-feature a,
#emHeader .em-feature a:link,
#emHeader .em-feature a:visited{
    text-decoration:none !important;
}

/* Image */
#emHeader .em-feature .em-feature-image-link{
    background:#F7E9DD !important;
}

#emHeader .em-feature .em-feature-image-link img{
    display:block !important;

    width:100% !important;
    height:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    object-fit:cover !important;
}

/* Kicker */
#emHeader .em-feature .em-feature-kicker{
    color:#FFFFFF !important;

    font-size:8px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    letter-spacing:.15em !important;

    text-transform:uppercase !important;
}

#emHeader .em-feature .em-feature-kicker::after{
    background:#FFB300 !important;
}

/* Disclosure */
#emHeader .em-feature .em-feature-disclosure{
    color:rgba(255,255,255,.78) !important;

    font-size:7px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    letter-spacing:.12em !important;

    text-transform:uppercase !important;
}

/* Title */
#emHeader .em-feature .em-feature-title{
    margin:8px 0 0 !important;

    color:#FFFFFF !important;

    font-size:25px !important;
    font-weight:900 !important;
    line-height:.96 !important;
    letter-spacing:-.045em !important;

    text-transform:none !important;
}

#emHeader .em-feature .em-feature-title a,
#emHeader .em-feature .em-feature-title a:link,
#emHeader .em-feature .em-feature-title a:visited,
#emHeader .em-feature .em-feature-title a:hover,
#emHeader .em-feature .em-feature-title a:focus-visible{
    color:#FFFFFF !important;

    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;

    text-transform:none !important;
}

/* Supporting copy */
#emHeader .em-feature .em-feature-copy{
    margin:9px 0 0 !important;

    color:#FFFFFF !important;

    font-size:9.5px !important;
    font-weight:500 !important;
    line-height:1.45 !important;
    letter-spacing:0 !important;

    text-transform:none !important;
}

/* Utility rows */
#emHeader .em-feature .em-feature-row,
#emHeader .em-feature .em-feature-row:link,
#emHeader .em-feature .em-feature-row:visited,
#emHeader .em-feature .em-feature-row:hover,
#emHeader .em-feature .em-feature-row:focus-visible{
    color:#FFFFFF !important;

    font-size:9.5px !important;
    font-weight:600 !important;
    line-height:1.25 !important;
    letter-spacing:0 !important;

    text-decoration:none !important;
    text-transform:none !important;
}

#emHeader .em-feature .em-feature-row strong{
    color:#FFFFFF !important;

    font-size:9px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
}

/* CTA */
#emHeader .em-feature .em-feature-cta,
#emHeader .em-feature .em-feature-cta:link,
#emHeader .em-feature .em-feature-cta:visited,
#emHeader .em-feature .em-feature-cta:hover,
#emHeader .em-feature .em-feature-cta:focus-visible{
    color:#FFFFFF !important;

    font-size:10px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;

    text-decoration:none !important;
    text-transform:none !important;
}

#emHeader .em-feature .em-feature-cta svg{
    color:#FFB300 !important;
}

/* Protect structural spacing from article CSS. */
#emHeader .em-feature .em-feature-body{
    box-sizing:border-box !important;
}

#emHeader .em-feature .em-feature-meta,
#emHeader .em-feature .em-feature-links{
    box-sizing:border-box !important;
}

/* =========================================================
   FEATURE PANEL STRUCTURE FIX 06
   Fixes two remaining issues visible on content pages:
   - article/template CSS removing the feature-body left padding
   - feature content being clipped by overflow:hidden on the grid item
========================================================= */

/* Let the feature column participate in the mega panel's natural height.
   The outer .em-mega remains the clipping/scroll boundary. */
#emHeader .em-feature{
    height:auto !important;
    min-height:0 !important;
    align-self:stretch !important;

    overflow:visible !important;

    display:grid !important;
    grid-template-rows:178px minmax(min-content,1fr) !important;
}

/* Keep cropping on the image itself, not on the whole feature column. */
#emHeader .em-feature .em-feature-image-link{
    display:block !important;
    overflow:hidden !important;
}

/* This was the visual leak in the screenshot: page CSS was overriding
   the body spacing, causing the title and rows to begin at the blue edge. */
#emHeader .em-feature .em-feature-body{
    position:relative !important;

    min-width:0 !important;
    min-height:auto !important;

    padding:19px 24px 28px !important;
    margin:0 !important;

    overflow:visible !important;

    box-sizing:border-box !important;
}

/* Protect the signature graphic while allowing the real content to grow. */
#emHeader .em-feature .em-feature-body::after{
    right:-101px !important;
    bottom:-112px !important;
}

/* Lock structure as well as typography. */
#emHeader .em-feature .em-feature-meta{
    position:relative !important;

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

    gap:9px !important;

    margin:0 !important;
    padding:0 !important;
}

#emHeader .em-feature .em-feature-title{
    position:relative !important;

    max-width:270px !important;

    margin:8px 0 0 !important;
    padding:0 !important;
}

#emHeader .em-feature .em-feature-copy{
    position:relative !important;

    max-width:255px !important;

    margin:9px 0 0 !important;
    padding:0 !important;
}

#emHeader .em-feature .em-feature-links{
    position:relative !important;

    margin:12px 0 0 !important;
    padding:0 !important;
}

#emHeader .em-feature .em-feature-row{
    min-height:33px !important;

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

    gap:14px !important;

    margin:0 !important;
    padding:0 !important;

    border-top:1px solid rgba(255,255,255,.15) !important;
}

#emHeader .em-feature .em-feature-cta{
    position:relative !important;

    display:inline-flex !important;
    align-items:center !important;

    gap:9px !important;

    margin:14px 0 0 !important;
    padding:0 0 2px !important;
}

/* The blue feature column must always paint to the bottom of the
   grid row even when another column is taller. */
#emHeader .em-mega-panel > .em-feature{
    align-self:stretch !important;
}

/* On short desktop viewports the outer menu may scroll, but its
   feature content is never separately clipped. */
@media(min-width:1081px){
    #emHeader .em-mega-panel{
        align-items:stretch !important;
    }
}

/* =========================================================
   MEGA MENU SCROLL-STATE FIX 07
   The dropdown must always open at its own top edge.
========================================================= */

#emHeader .em-mega{
    /* Do not reserve a visible scrollbar lane when no scrolling is needed. */
    scrollbar-gutter:auto;
    scroll-behavior:auto;
}

/* Keep scrollbars unobtrusive when a genuinely short viewport requires one. */
#emHeader .em-mega{
    scrollbar-width:thin;
}

#emHeader .em-mega::-webkit-scrollbar{
    width:7px;
}

#emHeader .em-mega::-webkit-scrollbar-track{
    background:transparent;
}

#emHeader .em-mega::-webkit-scrollbar-thumb{
    background:rgba(0,12,50,.18);
    border-radius:99px;
}



/* =========================================================
   WARM COAST IDENTITY PASS 08
   Colour hierarchy + Visit London-inspired travelling nav rail.
   Geometry, content, mega-menu structure and scroll-state behaviour remain intact.
========================================================= */

/* Brand colour hierarchy: Navy is ink/structure; Coral is interaction;
   Amber is reserved for live/current/sunlight signals. */
.em-brand-meta{
    color:rgba(0,12,50,.76);
}

/* Desktop navigation: a single 4px rail on each tab physically travels
   from the bottom edge to the top on hover/open/current state. */
@media(min-width:1081px){
    .em-nav-item{
        background-color:transparent;
        background-image:linear-gradient(var(--coral),var(--coral));
        background-repeat:no-repeat;
        background-size:100% 4px;
        background-position:center bottom;

        transition:
            background-position .30s ease-in,
            transform .18s var(--ease);
    }

    .em-nav-item:hover,
    .em-nav-item:focus-visible,
    .em-nav-item.is-open,
    .em-nav-item.is-current{
        background-position:center top;
    }

    /* Retire the old blue underline + amber dot signature. */
    .em-nav-item::after,
    .em-nav-title::after{
        content:none;
    }

    /* Calm default navigation; colour is earned by interaction. */
    .em-nav-kicker{
        color:rgba(0,12,50,.66);
    }

    .em-nav-item:hover .em-nav-kicker,
    .em-nav-item:focus-visible .em-nav-kicker,
    .em-nav-item.is-open .em-nav-kicker,
    .em-nav-item.is-current .em-nav-kicker{
        color:var(--coral);
    }
}

/* Main actions stay quiet until interaction. */
.em-action,
.em-signin{
    color:var(--navy);
}

/* Mega-menu labels use ink; Coral marks interaction rather than colouring
   every piece of supporting metadata. */
.em-mega-label{
    color:var(--navy);
}

.em-mega-label svg{
    color:var(--coral);
}

.em-mega-all{
    color:var(--navy);
    transition:color .16s ease;
}

.em-mega-all:hover,
.em-mega-all:focus-visible{
    color:var(--coral);
}

/* Chevrons remain as affordances, but are quiet at rest and animate warmly. */
.em-mega-item > svg{
    color:rgba(0,12,50,.48);
    transition:
        color .16s ease,
        transform .18s var(--ease);
}

.em-mega-item:hover > svg,
.em-mega-item:focus-visible > svg{
    color:var(--coral);
    transform:translateX(3px);
}

/* Warm neutral image placeholders instead of cool blue-grey. */
.em-mega-thumb,
#emHeader .em-feature .em-feature-image-link{
    background:#F7E9DD;
}

/* The feature window is deliberately warm and energetic rather than Royal Blue. */
#emHeader .em-feature{
    background:var(--coral) !important;
}

/* Keep amber as the live/current spark inside the warm panel. */
#emHeader .em-feature .em-feature-kicker::after,
#emHeader .em-feature .em-feature-cta svg{
    color:var(--amber) !important;
    background:var(--amber) !important;
}

/* The live rail stays Navy, but is slightly shallower and has no decorative
   lower rule: it is a utility layer, not the visual hero. */
.em-now{
    border-bottom:0;
    box-shadow:none;
}

/* Persistent current-section cue now follows the warm interaction language. */
.em-nav-item.is-current:not(.is-open) .em-nav-icon,
.em-nav-item.is-current:not(.is-open) .em-nav-title{
    color:var(--coral);
}

/* County structure and interactive links use Coral only when they need emphasis. */
.em-county-strip-label{
    color:var(--coral);
}

.em-county-link:hover,
.em-county-link[aria-current="page"]{
    color:var(--coral);
}

/* =========================================================
   WARM COAST COMPLETE PASS 09
   Finishes the visual decisions from the header review rather than
   stopping at a colour swap. No information architecture or menu
   behaviour is changed.
========================================================= */

/* Warmer editorial neutrals. Navy remains the authority colour; supporting
   copy and rules no longer carry a cool blue cast. */
#emHeader,
#searchOverlay,
#mobileDrawer{
    --text:#57514C;
    --muted:#706860;
    --line:rgba(91,64,43,.13);
    --blue-soft:rgba(255,90,31,.06);
}

/* Slightly tighten the desktop header without making the navigation cramped. */
@media(min-width:1081px){
    #emHeader,
    #searchOverlay,
    #mobileDrawer{
        --masthead-h:112px;
        --now-h:36px;
        --header-h:148px;
    }

    .em-nav{
        padding-top:31px;
    }

    .em-nav-item{
        height:78px;
        padding-top:9px;
        padding-bottom:11px;
    }

    .em-actions{
        padding-bottom:14px;
    }

    .em-profile-menu{
        top:92px;
    }
}

/* Give the logo more authority through scale, not a taller masthead. */
@media(min-width:1241px){
    .em-brand-word{
        font-size:27px;
    }

    .em-brand-rays{
        width:62px;
        height:21px;
        top:-28px;
    }

    .em-brand-meta{
        margin-top:9px;
        color:rgba(0,12,50,.72);
    }
}

/* Handwritten brand voice is a warm flourish, not another blue navigation cue. */
.em-brand-voice{
    color:var(--coral);
}

/* Keep the descriptive nav kickers, but demote them. The actual destination
   label is the thing users should read first. */
.em-nav-kicker{
    color:rgba(0,12,50,.55);
    font-size:7.75px;
    letter-spacing:.095em;
    transition:color .16s ease;
}

.em-nav-title{
    color:var(--navy);
}

/* The Visit London-inspired rail is the active/open signature. Remove every
   remnant of the former underline/dot system, including inherited content. */
@media(min-width:1081px){
    .em-nav-item::after,
    .em-nav-title::after{
        content:none !important;
        display:none !important;
    }

    .em-nav-item{
        background-image:linear-gradient(var(--coral),var(--coral)) !important;
        background-repeat:no-repeat !important;
        background-size:100% 4px !important;
        background-position:center bottom !important;
    }

    .em-nav-item:hover,
    .em-nav-item:focus-visible,
    .em-nav-item.is-open,
    .em-nav-item.is-current{
        background-position:center top !important;
    }

    .em-nav-item:hover .em-nav-kicker,
    .em-nav-item:focus-visible .em-nav-kicker,
    .em-nav-item.is-open .em-nav-kicker,
    .em-nav-item.is-current .em-nav-kicker,
    .em-nav-item:hover .em-nav-title,
    .em-nav-item:focus-visible .em-nav-title,
    .em-nav-item.is-open .em-nav-title,
    .em-nav-item.is-current .em-nav-title{
        color:var(--coral);
    }
}

/* Coast Moments gets one restrained social cue without turning into a button. */
@media(min-width:1081px){
    .em-nav-item[data-menu="moments"] .em-nav-icon{
        color:var(--coral);
    }
}

/* Header utilities are deliberately quiet at rest. */
.em-action,
.em-signin{
    color:var(--navy);
}

.em-action:hover,
.em-action:focus-visible,
.em-signin:hover,
.em-signin:focus-visible{
    color:var(--coral);
}

/* Account ring is structural at rest and turns warm only through interaction. */
.em-avatar{
    box-shadow:
        0 0 0 2px var(--warm),
        0 0 0 3.5px var(--navy);
    transition:box-shadow .18s ease;
}

.em-profile:hover .em-avatar,
.em-profile:focus-visible .em-avatar,
.em-profile[aria-expanded="true"] .em-avatar{
    box-shadow:
        0 0 0 2px var(--warm),
        0 0 0 3.5px var(--coral);
}

/* The saved badge can be warm; it is a true state indicator rather than
   generic decoration. */
.em-saved-count{
    background:var(--coral);
}

/* Live rail: strong Navy anchor, less height, no cool/turquoise lower edge. */
#emHeader .em-now{
    height:var(--now-h);
    border:0 !important;
    border-bottom:0 !important;
    box-shadow:none !important;
}

#emHeader .em-now::before,
#emHeader .em-now::after{
    content:none !important;
    display:none !important;
}

/* Mega-menu colour hierarchy. Editorial eyebrow may carry Coral; functional
   section labels and general links return to Navy until interaction. */
.em-mega-eyebrow{
    color:var(--coral);
}

.em-mega-label,
.em-mega-all{
    color:var(--navy);
}

.em-mega-label svg{
    color:var(--coral);
}

.em-mega-all:hover,
.em-mega-all:focus-visible{
    color:var(--coral);
}

.em-mega-description,
.em-mega-copy small{
    color:var(--muted);
}

/* Move only the chevron, not the entire menu row. This keeps the information
   field calm while preserving a clear directional response. */
.em-mega-item{
    transform:none !important;
}

.em-mega-item:hover,
.em-mega-item:focus-visible{
    transform:none !important;
}

.em-mega-item > svg{
    color:rgba(0,12,50,.46);
    transition:
        color .16s ease,
        transform .18s var(--ease);
}

.em-mega-item:hover > svg,
.em-mega-item:focus-visible > svg{
    color:var(--coral);
    transform:translateX(3px);
}

.em-mega-item:hover .em-mega-copy strong,
.em-mega-item:focus-visible .em-mega-copy strong{
    color:var(--coral);
}

/* Right editorial/current panel keeps its successful architecture but changes
   emotional temperature completely. */
#emHeader .em-feature{
    background:var(--coral) !important;
}

#emHeader .em-feature .em-feature-image-link{
    background:#F7E9DD !important;
}

#emHeader .em-feature .em-feature-image-link::after{
    background:linear-gradient(to bottom,rgba(255,90,31,0),rgba(255,90,31,.18));
}

/* Amber is used as a spark inside the Coral field, not as general body copy. */
#emHeader .em-feature .em-feature-kicker::after,
#emHeader .em-feature .em-feature-cta svg{
    background:var(--amber) !important;
    color:var(--amber) !important;
}

/* Secondary taxonomy is structure, not another accent field. */
.em-county-strip-label{
    color:rgba(0,12,50,.62);
}

.em-county-link:hover,
.em-county-link:focus-visible,
.em-county-link[aria-current="page"]{
    color:var(--coral);
}

/* Search/profile surfaces follow the same hierarchy instead of inheriting the
   old all-blue accent language. */
.em-profile-head a,
.em-search-kicker{
    color:var(--coral);
}

.em-search-field svg{
    color:var(--navy);
}

.em-search-suggestions a:hover,
.em-search-suggestions a:focus-visible{
    color:var(--coral);
    border-color:var(--coral);
}

/* Mobile keeps the warmer identity without turning every control Coral. */
@media(max-width:1080px){
    .em-mobile-toggle::before,
    .em-mobile-toggle::after{
        background:var(--navy);
    }

    .em-mobile-section.is-open .em-mobile-toggle::before,
    .em-mobile-section.is-open .em-mobile-toggle::after{
        background:var(--coral);
    }

    .em-mobile-links a{
        color:var(--navy);
    }

    .em-mobile-links a:hover,
    .em-mobile-links a:focus-visible,
    .em-mobile-cta,
    .em-mobile-signin{
        color:var(--coral) !important;
    }
}


/* =========================================================
   SUNLIT COAST PASS 10
   Warmer atmosphere + calmer colour distribution.
   Keeps the approved mega-menu information architecture and all behaviour.
========================================================= */

/* The atmosphere is warm first; saturation is reserved for moments that earn it. */
#emHeader,
#searchOverlay,
#mobileDrawer{
    --warm:#FFF4EA;
    --coral:#FF5A1F;
    --sun-orange:#F28C00;
    --amber:var(--coral); /* use the right-panel orange sitewide */
    --text:#625850;
    --muted:#786C63;
    --line:rgba(91,64,43,.12);
    --blue-soft:rgba(255,90,31,.055);
}

.em-header{
    background:rgba(255,244,234,.985);
}

/* The handwritten line should feel sunny, not like red correction ink. */
.em-brand-voice{
    color:var(--sun-orange) !important;
}

/* Normal navigation is deliberately calm. No row of saturated orange bars. */
@media(min-width:1081px){
    .em-nav-item{
        background-image:linear-gradient(rgba(0,12,50,.10),rgba(0,12,50,.10)) !important;
        background-repeat:no-repeat !important;
        background-size:100% 1px !important;
        background-position:center bottom !important;
        transition:
            background-position .30s ease-in,
            background-size .18s var(--ease),
            transform .18s var(--ease) !important;
    }

    /* On interaction the same rail becomes a strong 4px orange bar and travels
       from the bottom edge to the top, retaining the Visit London motion idea. */
    .em-nav-item:hover,
    .em-nav-item:focus-visible,
    .em-nav-item.is-open,
    .em-nav-item.is-current{
        background-image:linear-gradient(var(--coral),var(--coral)) !important;
        background-size:100% 4px !important;
        background-position:center top !important;
    }

    .em-nav-item .em-nav-icon,
    .em-nav-item .em-nav-title{
        color:var(--navy);
    }

    .em-nav-item .em-nav-kicker{
        color:rgba(0,12,50,.54);
    }

    .em-nav-item:hover .em-nav-icon,
    .em-nav-item:focus-visible .em-nav-icon,
    .em-nav-item.is-open .em-nav-icon,
    .em-nav-item.is-current .em-nav-icon,
    .em-nav-item:hover .em-nav-title,
    .em-nav-item:focus-visible .em-nav-title,
    .em-nav-item.is-open .em-nav-title,
    .em-nav-item.is-current .em-nav-title,
    .em-nav-item:hover .em-nav-kicker,
    .em-nav-item:focus-visible .em-nav-kicker,
    .em-nav-item.is-open .em-nav-kicker,
    .em-nav-item.is-current .em-nav-kicker{
        color:var(--coral);
    }

    /* Coast Moments is not permanently coloured; interaction carries the accent. */
    .em-nav-item[data-menu="moments"] .em-nav-icon{
        color:var(--navy) !important;
    }

    .em-nav-item[data-menu="moments"]:hover .em-nav-icon,
    .em-nav-item[data-menu="moments"]:focus-visible .em-nav-icon,
    .em-nav-item[data-menu="moments"].is-open .em-nav-icon,
    .em-nav-item[data-menu="moments"].is-current .em-nav-icon{
        color:var(--coral) !important;
    }
}

/* Give the dropdown a genuinely sun-warmed canvas rather than near-white cream. */
.em-mega,
.em-mega-intro,
.em-mega-content{
    background:var(--warm);
}

.em-mega{
    border-color:rgba(91,64,43,.10);
}

.em-mega-intro{
    border-right-color:rgba(91,64,43,.10);
}

/* Orange is the editorial/interactive cue. Amber is reserved for sunlight/live marks. */
.em-mega-eyebrow{
    color:var(--coral);
}

.em-mega-label{
    color:var(--navy);
}

.em-mega-label svg{
    color:var(--sun-orange);
}

.em-mega-all{
    color:var(--navy);
}

.em-mega-all:hover,
.em-mega-all:focus-visible,
.em-mega-item:hover .em-mega-copy strong,
.em-mega-item:focus-visible .em-mega-copy strong,
.em-mega-item:hover > svg,
.em-mega-item:focus-visible > svg{
    color:var(--coral);
}

/* The right feature is still the expressive payoff, but photography now owns
   more of it so the saturated colour does not dominate the whole dropdown. */
#emHeader .em-feature{
    background:var(--coral) !important;
    grid-template-rows:212px minmax(min-content,1fr);
}

#emHeader .em-feature .em-feature-image-link{
    background:#F7E9DD !important;
}

#emHeader .em-feature .em-feature-image-link::after{
    height:24px;
    background:linear-gradient(to bottom,rgba(255,90,31,0),rgba(255,90,31,.14));
}

/* Keep the amber line and arrow, but do not paint the SVG box itself. */
#emHeader .em-feature .em-feature-kicker::after{
    background:var(--amber) !important;
    color:var(--amber) !important;
}

#emHeader .em-feature .em-feature-cta svg{
    color:var(--amber) !important;
    background:transparent !important;
}

/* Slightly reduce the coloured body density while retaining the useful links. */
#emHeader .em-feature .em-feature-body{
    padding-top:17px;
    padding-bottom:18px;
}

#emHeader .em-feature .em-feature-links{
    margin-top:10px;
}

#emHeader .em-feature .em-feature-row{
    min-height:31px;
}

#emHeader .em-feature .em-feature-cta{
    margin-top:12px;
}

/* Live/current signals use amber; the navy rail remains the strong grounding band. */
.em-now-title,
.em-now-action strong{
    color:var(--amber);
}

/* Utility/account controls should not compete with the destination navigation. */
.em-action,
.em-signin,
.em-profile-head a,
.em-search-kicker{
    color:var(--navy);
}

.em-action:hover,
.em-action:focus-visible,
.em-signin:hover,
.em-signin:focus-visible,
.em-profile-head a:hover,
.em-profile-head a:focus-visible{
    color:var(--coral);
}

/* Search/mobile inherit the new warm atmosphere and orange interaction language. */
.em-search,
.em-mobile-drawer,
#mobileDrawer{
    background:var(--warm);
}

@media(max-width:1080px){
    .em-mobile-section.is-open .em-mobile-toggle::before,
    .em-mobile-section.is-open .em-mobile-toggle::after,
    .em-mobile-links a:hover,
    .em-mobile-links a:focus-visible,
    .em-mobile-cta,
    .em-mobile-signin{
        color:var(--coral) !important;
    }
}


/* =========================================================
   SUNLIT COAST PASS 11
   Home entry + quieter brand flourish + refined live rail.
========================================================= */

/* The live-information band stays Navy on purpose: it is the structural
   anchor between the warm masthead and destination content. It is simply
   made a little leaner and the dividers a little quieter. */
@media(min-width:1081px){
    #emHeader,
    #searchOverlay,
    #mobileDrawer{
        --now-h:34px;
        --header-h:146px;
    }

    .em-now-title{
        padding-right:24px;
    }

    .em-now-item{
        padding-left:24px;
        padding-right:24px;
    }

    .em-now-item::before{
        height:8px;
        width:1px;
        background:rgba(255,179,0,.30);
    }
}

/* The handwritten line belongs to the brand, not to What's On. Move it into
   the breathing space beside the logo and make it a small human signature. */
@media(min-width:1241px){
    .em-brand-voice{
        left:210px;
        top:18px;
        transform:rotate(-1.4deg);
        font-size:18px;
        font-weight:600;
        color:var(--sun-orange) !important;
        opacity:.96;
    }

    .em-brand-voice::after{
        right:0;
        bottom:-6px;
        width:44px;
        height:7px;
        border-bottom-width:1.6px;
        border-bottom-color:var(--amber);
        opacity:.92;
        transform:rotate(-4deg);
    }
}

/* Between tablet/compact desktop and the full-width masthead, keep the voice
   centred rather than allowing it to collide with navigation. */
@media(min-width:1081px) and (max-width:1240px){
    .em-brand-voice{
        top:8px;
        font-size:18px;
    }
}

/* Icon-only Home entry. It is intentionally compact and uses the exact same
   1px-rest / 4px-active bottom-to-top travelling rail language as the menu. */
.em-home-link{
    display:none;
}

@media(min-width:1081px){
    .em-home-link{
        position:relative;
        flex:0 0 52px;
        width:52px;
        height:78px;
        align-self:flex-end;

        display:grid;
        place-items:center;

        margin-right:4px;
        padding:0;
        border:0;

        color:var(--navy);
        background-color:transparent;
        background-image:linear-gradient(rgba(0,12,50,.10),rgba(0,12,50,.10));
        background-repeat:no-repeat;
        background-size:100% 1px;
        background-position:center bottom;

        text-decoration:none;

        transition:
            color .18s ease,
            background-position .30s ease-in,
            background-size .18s var(--ease),
            transform .18s var(--ease);
    }

    .em-home-link svg{
        width:21px;
        height:21px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.6;
        stroke-linecap:round;
        stroke-linejoin:round;
        transform:translateY(1px);
        transition:transform .18s var(--ease);
    }

    .em-home-link:hover,
    .em-home-link:focus-visible,
    .em-home-link.is-current{
        color:var(--coral);
        background-image:linear-gradient(var(--coral),var(--coral));
        background-size:100% 4px;
        background-position:center top;
        transform:translateY(-1px);
    }

    .em-home-link:hover svg,
    .em-home-link:focus-visible svg{
        transform:translateY(-1px);
    }

    .em-home-link:focus-visible{
        outline:2px solid var(--coral);
        outline-offset:-4px;
    }
}

/* =========================================================
   SUNLIT COAST PASS 12
   Brand-lockup refinement + Home alignment + nav legibility.
========================================================= */

/* On wide desktop, make the handwritten line feel physically attached to the
   logo rather than occupying a separate strip of header real estate. */
@media(min-width:1241px){
    .em-brand-voice{
        left:188px;
        top:20px;
        transform:rotate(-1.2deg);
        font-size:16.25px;
        font-weight:600;
        line-height:1;
        color:var(--sun-orange) !important;
        opacity:.94;
    }

    .em-brand-voice::after{
        right:2px;
        bottom:-5px;
        width:32px;
        height:6px;
        border-bottom-width:1.45px;
        border-bottom-color:var(--amber);
        opacity:.88;
        transform:rotate(-4deg);
    }
}

/* The tiny upper labels remain, but are now readable enough to feel deliberate
   rather than like metadata noise. Primary titles gain only a fraction of scale. */
@media(min-width:1081px){
    .em-nav-kicker{
        font-size:8.1px;
        letter-spacing:.09em;
        line-height:1.05;
    }

    .em-nav-title{
        font-size:12.9px;
        line-height:1.02;
    }

    .em-nav-item{
        gap:5px;
    }

    /* Home is the first navigation destination, not a floating icon between
       brand and menu. Drop the glyph toward the primary-label zone so its
       visual centre lines up with the destinations users actually click. */
    .em-home-link svg{
        transform:translateY(15px);
    }

    .em-home-link:hover svg,
    .em-home-link:focus-visible svg{
        transform:translateY(13px);
    }
}

/* =========================================================
   SUNLIT COAST PASS 13
   Simplified wordmark — remove added tourism-badge decoration.
========================================================= */

/* The wordmark itself is the brand. The previously added sun rays and
   "KENYA COAST" strapline made the lockup feel like a tourism badge and
   competed with the navigation. Remove both on desktop as well as mobile. */
.em-brand-rays,
.em-brand-meta{
    display:none !important;
}

@media(min-width:1081px){
    .em-brand{
        transform:translateY(1px);
        padding-bottom:10px;
    }

    .em-brand-word{
        font-size:28px;
        line-height:.76;
        letter-spacing:-.068em;
        color:var(--navy);
    }

    /* A single short sunset-orange rule is enough brand punctuation. */
    .em-brand::after{
        content:"";
        display:block;
        width:30px;
        height:3px;
        margin-top:10px;
        border-radius:999px;
        background:var(--coral);
    }
}

/* Keep the human line, but treat it as a signature beside the wordmark,
   not as a third logo component. No swoosh/underline. */
@media(min-width:1241px){
    .em-brand-voice{
        left:176px;
        top:31px;
        transform:rotate(-1deg);
        font-size:15.5px;
        font-weight:600;
        color:var(--sun-orange) !important;
        opacity:.92;
    }

    .em-brand-voice::after{
        display:none !important;
    }
}

@media(min-width:1081px) and (max-width:1240px){
    .em-brand-voice{
        top:12px;
        font-size:16px;
    }

    .em-brand-voice::after{
        display:none !important;
    }
}


/* =========================================================
   SUNLIT COAST PASS 14
   Brand reset — MOMBASA leads.
========================================================= */

/* Remove the handwritten line completely. The brand no longer needs a
   separate tagline/signature in the masthead. */
.em-brand-voice{
    display:none !important;
}

/* Keep the simplified wordmark only: no rays and no location strapline. */
.em-brand-rays,
.em-brand-meta{
    display:none !important;
}

.em-brand-word{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
    width:max-content;
    color:var(--navy) !important;
    letter-spacing:0 !important;
    line-height:1 !important;
}

.em-brand-exploring,
.em-brand-mombasa{
    display:block;
    white-space:nowrap;
}

/* Exploring explains the product; MOMBASA is the remembered brand word. */
.em-brand-exploring{
    font-size:17px;
    font-weight:760;
    line-height:.92;
    letter-spacing:-.035em;
    text-transform:none;
}

.em-brand-mombasa{
    margin-top:2px;
    font-size:35px;
    font-weight:950;
    line-height:.82;
    letter-spacing:-.07em;
}

/* One small sunlight mark, directly under the dominant destination word. */
.em-brand::after{
    content:"" !important;
    display:block !important;
    width:48px !important;
    height:3px !important;
    margin-top:10px !important;
    border-radius:999px;
    background:var(--amber) !important;
}

@media(min-width:1081px){
    .em-brand{
        transform:translateY(0) !important;
        padding-bottom:0 !important;
    }

    .em-brand-word{
        font-size:inherit !important;
    }
}

/* At narrower desktop widths keep the hierarchy but save horizontal room. */
@media(min-width:1081px) and (max-width:1240px){
    .em-brand-exploring{font-size:15px;}
    .em-brand-mombasa{font-size:31px;}
    .em-brand::after{width:42px !important;margin-top:8px !important;}
}

/* Mobile stays compact while retaining the same identity hierarchy. */
@media(max-width:1080px){
    .em-brand-word{
        align-items:flex-start;
    }

    .em-brand-exploring{
        font-size:10px;
        line-height:.95;
    }

    .em-brand-mombasa{
        margin-top:1px;
        font-size:20px;
        line-height:.82;
    }

    .em-brand::after{
        width:28px !important;
        height:2px !important;
        margin-top:6px !important;
    }
}

/* =========================================================
   SUNLIT COAST PASS 15
   Use the approved MOMBASA-led logo artwork as the masthead brand.
========================================================= */

/* The supplied artwork owns the wordmark hierarchy. Do not reconstruct it
   with live type: that produced a materially different logo in Pass 14. */
.em-brand{
    display:block !important;
    flex:0 0 auto;
    width:188px !important;
    height:58px !important;
    padding:0 !important;
    margin:0 !important;
    transform:none !important;
    background-image:url('../assets/exploring-mombasa-wordmark-v30.png') !important;
    background-repeat:no-repeat !important;
    background-position:left center !important;
    background-size:contain !important;
}

.em-brand-word,
.em-brand-rays,
.em-brand-meta,
.em-brand-voice{
    display:none !important;
}

/* Remove every generated decorative mark from earlier wordmark passes.
   The amber rule is already part of the approved artwork. */
.em-brand::before,
.em-brand::after{
    content:none !important;
    display:none !important;
}

@media(min-width:1081px) and (max-width:1240px){
    .em-brand{
        width:166px !important;
        height:52px !important;
    }
}

@media(max-width:1080px){
    .em-brand{
        width:152px !important;
        height:44px !important;
    }
}

/* =========================================================
   SUNLIT COAST PASS 16
   Final masthead precision: stronger approved logo, integrated Home,
   and no permanent floating rail on the homepage.
========================================================= */

@media(min-width:1241px){
    /* Let the approved artwork carry enough visual authority to balance the
       seven navigation destinations, without increasing masthead height. */
    .em-masthead{
        grid-template-columns:224px minmax(0,1fr) auto;
        gap:14px;
    }

    .em-brand{
        width:214px !important;
        height:66px !important;
    }

    /* Home belongs to the nav family. A narrower hit-area visually tucks it
       into Destinations while remaining comfortably clickable. */
    .em-home-link{
        flex:0 0 42px;
        width:42px;
        margin-right:-2px;
    }

    .em-home-link svg{
        width:20px;
        height:20px;
        transform:translateY(15px);
    }

    .em-home-link:hover svg,
    .em-home-link:focus-visible svg{
        transform:translateY(13px);
    }
}

/* On the homepage the house itself is the current-state cue. Do not leave the
   travelling orange rail parked at the top; the rail should travel only during
   interaction. */
@media(min-width:1081px){
    .em-home-link.is-current:not(:hover):not(:focus-visible){
        color:var(--coral);
        background-image:linear-gradient(rgba(0,12,50,.10),rgba(0,12,50,.10));
        background-size:100% 1px;
        background-position:center bottom;
        transform:none;
    }
}

/* =========================================================
   SUNLIT COAST PASS 17
   Authority masthead: brand first, navigation second.
   The logo now owns a dedicated upper row rather than competing
   horizontally with seven navigation destinations.
========================================================= */

@media(min-width:1081px){
    #emHeader,
    #searchOverlay,
    #mobileDrawer{
        --masthead-h:164px;
        --now-h:34px;
        --header-h:198px;
    }

    /* Two deliberate layers:
       1) centred destination masthead + quiet account/search utilities
       2) full navigation row beneath it. */
    .em-masthead{
        width:min(var(--max),calc(100% - 72px));
        height:var(--masthead-h);
        margin:auto;

        display:grid;
        grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
        grid-template-rows:90px 74px;
        gap:0;
        align-items:stretch;
    }

    /* The approved artwork is the masthead, not a small logo beside the menu. */
    .em-brand{
        grid-column:2;
        grid-row:1;
        justify-self:center;
        align-self:center;

        width:292px !important;
        height:75px !important;
        margin:0 !important;
        transform:none !important;
        background-position:center !important;
    }

    /* Utilities remain available but deliberately subordinate to the brand. */
    .em-actions{
        grid-column:3;
        grid-row:1;
        justify-self:end;
        align-self:stretch;

        height:auto;
        min-width:max-content;
        padding:0;
        gap:4px;

        display:flex;
        align-items:center;
    }

    .em-action{
        height:48px;
    }

    .em-profile{
        min-height:50px;
    }

    /* Because actions now occupy only the brand row, explicitly drop the
       profile menu beneath the complete masthead rather than over the nav. */
    .em-profile-menu{
        top:calc(var(--masthead-h) - 4px);
    }

    /* Navigation receives its own uninterrupted row. This is what gives the
       destination name authority without sacrificing any existing route. */
    .em-nav{
        grid-column:1 / -1;
        grid-row:2;

        width:100%;
        min-width:0;
        height:74px;

        padding:0;
        margin:0;

        align-self:end;
        justify-content:center;
        align-items:flex-end;
        gap:1px;

        border-top:1px solid rgba(0,12,50,.085);
    }

    .em-nav-item{
        height:73px;
        padding:7px 13px 11px;
        gap:5px;
    }

    .em-nav-icon{
        width:21px;
        height:21px;
    }

    .em-nav-kicker{
        font-size:7.8px;
        letter-spacing:.095em;
    }

    .em-nav-title{
        font-size:13px;
    }

    /* Home is now unequivocally the first member of the navigation row. */
    .em-home-link{
        flex:0 0 46px;
        width:46px;
        height:73px;
        margin-right:5px;
        align-self:flex-end;
    }

    .em-home-link svg{
        width:20px;
        height:20px;
        transform:translateY(14px);
    }

    .em-home-link:hover svg,
    .em-home-link:focus-visible svg{
        transform:translateY(12px);
    }
}

/* On large screens, allow MOMBASA to behave like a genuine destination
   masthead. The header becomes more authoritative through scale + isolation,
   not through more decorative colour. */
@media(min-width:1440px){
    .em-brand{
        width:320px !important;
        height:82px !important;
    }
}

/* Compact desktop keeps the same two-level hierarchy while trimming scale. */
@media(min-width:1081px) and (max-width:1240px){
    #emHeader,
    #searchOverlay,
    #mobileDrawer{
        --masthead-h:154px;
        --header-h:188px;
    }

    .em-masthead{
        width:min(var(--max),calc(100% - 40px));
        grid-template-rows:82px 72px;
    }

    .em-brand{
        width:252px !important;
        height:65px !important;
    }

    .em-nav{
        height:72px;
    }

    .em-nav-item,
    .em-home-link{
        height:71px;
    }

    .em-nav-item{
        min-width:88px;
        padding-left:10px;
        padding-right:10px;
    }

    .em-nav-item[data-menu="things"]{min-width:116px;}
    .em-nav-item[data-menu="events"]{min-width:104px;}
    .em-nav-item[data-menu="moments"]{min-width:118px;}

    .em-profile-menu{
        top:calc(var(--masthead-h) - 4px);
    }
}


/* =========================================================
   SUNLIT COAST PASS 18
   REAL AUTHORITY MASTHEAD
   - MOMBASA gets a dedicated brand row
   - utility controls sit quietly on the right
   - navigation becomes a separate, simplified row
   - descriptive micro-kickers are removed on desktop
========================================================= */

/* The JS wrapper is transparent outside desktop so existing responsive
   behavior remains intact. */
.em-authority-top{
    display:contents;
}

@media(min-width:1081px){
    #emHeader.em-authority-v18,
    #emHeader.em-authority-v18 ~ #searchOverlay,
    #emHeader.em-authority-v18 ~ #mobileDrawer{
        --masthead-h:166px;
        --now-h:34px;
        --header-h:200px;
    }

    /* Force a true stacked masthead, independent of the old three-column grid. */
    #emHeader.em-authority-v18 .em-masthead{
        width:min(var(--max),calc(100% - 72px)) !important;
        height:166px !important;
        margin:0 auto !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:0 !important;
        grid-template-columns:none !important;
        grid-template-rows:none !important;
    }

    #emHeader.em-authority-v18 .em-authority-top{
        position:relative;
        flex:0 0 96px;
        width:100%;
        height:96px;
        display:grid !important;
        grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);
        align-items:center;
        border-bottom:1px solid rgba(0,12,50,.075);
    }

    /* The approved artwork becomes a genuine destination masthead. */
    #emHeader.em-authority-v18 .em-authority-top > .em-brand{
        grid-column:2 !important;
        justify-self:center !important;
        align-self:center !important;
        width:360px !important;
        height:92px !important;
        margin:0 !important;
        transform:none !important;
        background-position:center !important;
        background-size:contain !important;
    }

    /* Utility actions remain available but visually subordinate. */
    #emHeader.em-authority-v18 .em-authority-top > .em-actions{
        grid-column:3 !important;
        justify-self:end !important;
        align-self:center !important;
        width:auto !important;
        height:64px !important;
        min-width:max-content;
        margin:0 !important;
        padding:0 !important;
        gap:5px;
        display:flex !important;
        align-items:center !important;
    }

    #emHeader.em-authority-v18 .em-action{
        height:46px;
    }

    #emHeader.em-authority-v18 .em-profile{
        min-height:48px;
    }

    /* Navigation is a second, clean row. The tiny marketing labels are removed;
       users see icon + actual destination only. */
    #emHeader.em-authority-v18 .em-nav{
        position:relative;
        flex:0 0 70px;
        width:100% !important;
        min-width:0 !important;
        height:70px !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        align-items:stretch !important;
        justify-content:center !important;
        gap:2px !important;
        border:0 !important;
    }

    #emHeader.em-authority-v18 .em-nav-kicker{
        display:none !important;
    }

    #emHeader.em-authority-v18 .em-nav-item{
        flex:0 0 auto;
        min-width:106px !important;
        height:70px !important;
        margin:0 !important;
        padding:9px 15px 11px !important;
        gap:7px !important;
        justify-content:center !important;
        align-items:center !important;
        transform:none;
    }

    #emHeader.em-authority-v18 .em-nav-item[data-menu="things"]{min-width:126px !important;}
    #emHeader.em-authority-v18 .em-nav-item[data-menu="events"]{min-width:112px !important;}
    #emHeader.em-authority-v18 .em-nav-item[data-menu="moments"]{min-width:132px !important;}

    #emHeader.em-authority-v18 .em-nav-icon{
        width:23px !important;
        height:23px !important;
    }

    #emHeader.em-authority-v18 .em-nav-title{
        font-size:14px !important;
        font-weight:900 !important;
        line-height:1 !important;
        letter-spacing:-.025em !important;
    }

    #emHeader.em-authority-v18 .em-home-link{
        flex:0 0 50px !important;
        width:50px !important;
        height:70px !important;
        margin:0 6px 0 0 !important;
        align-self:stretch !important;
        place-items:center !important;
    }

    #emHeader.em-authority-v18 .em-home-link svg{
        width:22px !important;
        height:22px !important;
        transform:none !important;
    }

    #emHeader.em-authority-v18 .em-home-link:hover svg,
    #emHeader.em-authority-v18 .em-home-link:focus-visible svg{
        transform:translateY(-2px) !important;
    }

    /* Menus and account disclosure must open beneath both masthead rows. */
    #emHeader.em-authority-v18 .em-profile-menu{
        top:162px !important;
    }
}

@media(min-width:1440px){
    #emHeader.em-authority-v18 .em-authority-top > .em-brand{
        width:390px !important;
        height:96px !important;
    }
}

@media(min-width:1081px) and (max-width:1240px){
    #emHeader.em-authority-v18,
    #emHeader.em-authority-v18 ~ #searchOverlay,
    #emHeader.em-authority-v18 ~ #mobileDrawer{
        --masthead-h:154px;
        --header-h:188px;
    }

    #emHeader.em-authority-v18 .em-masthead{
        width:min(var(--max),calc(100% - 36px)) !important;
        height:154px !important;
    }

    #emHeader.em-authority-v18 .em-authority-top{
        flex-basis:88px;
        height:88px;
        grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);
    }

    #emHeader.em-authority-v18 .em-authority-top > .em-brand{
        width:310px !important;
        height:80px !important;
    }

    #emHeader.em-authority-v18 .em-nav{
        flex-basis:66px;
        height:66px !important;
    }

    #emHeader.em-authority-v18 .em-nav-item,
    #emHeader.em-authority-v18 .em-home-link{
        height:66px !important;
    }

    #emHeader.em-authority-v18 .em-nav-item{
        min-width:92px !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }

    #emHeader.em-authority-v18 .em-nav-item[data-menu="things"]{min-width:116px !important;}
    #emHeader.em-authority-v18 .em-nav-item[data-menu="events"]{min-width:104px !important;}
    #emHeader.em-authority-v18 .em-nav-item[data-menu="moments"]{min-width:120px !important;}
    #emHeader.em-authority-v18 .em-nav-title{font-size:13.2px !important;}
    #emHeader.em-authority-v18 .em-profile-menu{top:150px !important;}
}

/* =========================================================
   SUNLIT COAST PASS 19
   FINAL MASTHEAD REFINEMENT
   - keep the authoritative logo scale
   - tighten the stacked masthead without shrinking the brand
   - remove the unnecessary brand/nav divider
   - push utilities slightly farther right and quiet account copy
========================================================= */

@media(min-width:1081px){
    #emHeader.em-authority-v18,
    #emHeader.em-authority-v18 ~ #searchOverlay,
    #emHeader.em-authority-v18 ~ #mobileDrawer{
        --masthead-h:156px;
        --header-h:190px;
    }

    #emHeader.em-authority-v18 .em-masthead{
        height:156px !important;
    }

    /* Keep the logo's visual scale. The tightening happens in the navigation
       row rather than by shrinking MOMBASA back into a small header mark. */
    #emHeader.em-authority-v18 .em-authority-top{
        flex:0 0 96px;
        height:96px;
        border-bottom:0 !important;
    }

    #emHeader.em-authority-v18 .em-nav{
        flex:0 0 60px;
        height:60px !important;
    }

    #emHeader.em-authority-v18 .em-nav-item{
        height:60px !important;
        padding-top:6px !important;
        padding-bottom:8px !important;
        gap:5px !important;
    }

    #emHeader.em-authority-v18 .em-home-link{
        height:60px !important;
    }

    /* The utility cluster is intentionally peripheral to the masthead. */
    #emHeader.em-authority-v18 .em-authority-top > .em-actions{
        transform:translateX(12px);
    }

    #emHeader.em-authority-v18 .em-profile-copy strong{
        color:rgba(0,12,50,.84);
        font-size:8.5px;
        font-weight:800;
        letter-spacing:.065em;
    }

    #emHeader.em-authority-v18 .em-profile-copy small{
        margin-top:3px;
        color:rgba(87,81,76,.82);
        font-size:8.5px;
    }

    /* Disclosure follows the newly tightened masthead. */
    #emHeader.em-authority-v18 .em-profile-menu{
        top:152px !important;
    }
}

@media(min-width:1081px) and (max-width:1240px){
    #emHeader.em-authority-v18,
    #emHeader.em-authority-v18 ~ #searchOverlay,
    #emHeader.em-authority-v18 ~ #mobileDrawer{
        --masthead-h:146px;
        --header-h:180px;
    }

    #emHeader.em-authority-v18 .em-masthead{
        height:146px !important;
    }

    #emHeader.em-authority-v18 .em-authority-top{
        flex-basis:88px;
        height:88px;
    }

    #emHeader.em-authority-v18 .em-nav{
        flex-basis:58px;
        height:58px !important;
    }

    #emHeader.em-authority-v18 .em-nav-item,
    #emHeader.em-authority-v18 .em-home-link{
        height:58px !important;
    }

    #emHeader.em-authority-v18 .em-authority-top > .em-actions{
        transform:translateX(6px);
    }

    #emHeader.em-authority-v18 .em-profile-menu{
        top:142px !important;
    }
}

/* =========================================================
   SUNLIT COAST PASS 20
   BREATHING SPACE REFINEMENT
   - preserve the authoritative MOMBASA scale
   - restore calm vertical space around the masthead
   - separate brand, navigation and live-information bands
   - no architecture, content or interaction changes
========================================================= */

@media(min-width:1241px){
    #emHeader.em-authority-v18,
    #emHeader.em-authority-v18 ~ #searchOverlay,
    #emHeader.em-authority-v18 ~ #mobileDrawer{
        --masthead-h:180px;
        --header-h:214px;
    }

    #emHeader.em-authority-v18 .em-masthead{
        height:180px !important;
    }

    /* Give the approved artwork real air without reducing its scale. */
    #emHeader.em-authority-v18 .em-authority-top{
        flex:0 0 114px;
        height:114px;
        padding:0 !important;
    }

    /* Navigation remains compact, but no longer presses against either band. */
    #emHeader.em-authority-v18 .em-nav{
        flex:0 0 66px;
        height:66px !important;
        align-items:center !important;
    }

    #emHeader.em-authority-v18 .em-nav-item{
        height:62px !important;
        padding-top:7px !important;
        padding-bottom:9px !important;
        gap:6px !important;
        align-self:center !important;
    }

    #emHeader.em-authority-v18 .em-home-link{
        height:62px !important;
        align-self:center !important;
    }

    /* Account disclosure follows the taller, calmer masthead. */
    #emHeader.em-authority-v18 .em-profile-menu{
        top:176px !important;
    }
}

@media(min-width:1081px) and (max-width:1240px){
    #emHeader.em-authority-v18,
    #emHeader.em-authority-v18 ~ #searchOverlay,
    #emHeader.em-authority-v18 ~ #mobileDrawer{
        --masthead-h:170px;
        --header-h:204px;
    }

    #emHeader.em-authority-v18 .em-masthead{
        height:170px !important;
    }

    #emHeader.em-authority-v18 .em-authority-top{
        flex:0 0 106px;
        height:106px;
    }

    #emHeader.em-authority-v18 .em-nav{
        flex:0 0 64px;
        height:64px !important;
        align-items:center !important;
    }

    #emHeader.em-authority-v18 .em-nav-item,
    #emHeader.em-authority-v18 .em-home-link{
        height:60px !important;
        align-self:center !important;
    }

    #emHeader.em-authority-v18 .em-nav-item{
        padding-top:7px !important;
        padding-bottom:8px !important;
        gap:5px !important;
    }

    #emHeader.em-authority-v18 .em-profile-menu{
        top:166px !important;
    }
}

/* =========================================================
   SUNLIT COAST PASS 21
   QUIETER LIVE UTILITY + PURPOSEFUL HOME CONTROL
   - remove the permanent desktop Mombasa Now band
   - preserve weather/tide/sunset inside a compact Coast Now disclosure
   - turn Home into a deliberate warm navigation control
========================================================= */

@media(min-width:1081px){
    /* The masthead has enough authority now; a fourth full-width band is no
       longer necessary. Keep the server-rendered rail in the DOM as the data
       source, but remove it visually on desktop. */
    #emHeader.em-authority-v18 .em-now{
        display:none !important;
    }

    #emHeader.em-authority-v18,
    #emHeader.em-authority-v18 ~ #searchOverlay,
    #emHeader.em-authority-v18 ~ #mobileDrawer{
        --now-h:0px;
        --header-h:var(--masthead-h);
    }

    /* Home becomes a compact, intentional control rather than an orphaned
       outline icon. It does not use the travelling rail; the filled surface
       gives it its own clear role as the navigation starting point. */
    #emHeader.em-authority-v18 .em-home-link{
        flex:0 0 46px !important;
        width:46px !important;
        height:46px !important;
        margin:0 10px 0 0 !important;
        align-self:center !important;
        place-items:center !important;

        border:1px solid rgba(255,90,31,.18) !important;
        border-radius:12px !important;
        background:rgba(255,90,31,.075) !important;
        color:var(--navy) !important;
        box-shadow:none !important;

        transition:
            color .18s var(--ease),
            background-color .18s var(--ease),
            border-color .18s var(--ease),
            transform .18s var(--ease) !important;
    }

    #emHeader.em-authority-v18 .em-home-link svg{
        width:20px !important;
        height:20px !important;
        stroke-width:1.75 !important;
        transform:none !important;
    }

    #emHeader.em-authority-v18 .em-home-link:hover,
    #emHeader.em-authority-v18 .em-home-link:focus-visible{
        background:var(--sun-orange) !important;
        border-color:var(--sun-orange) !important;
        color:#fff !important;
        transform:translateY(-1px) !important;
    }

    #emHeader.em-authority-v18 .em-home-link.is-current:not(:hover):not(:focus-visible){
        background:rgba(255,90,31,.12) !important;
        border-color:rgba(255,90,31,.42) !important;
        color:var(--sun-orange) !important;
        transform:none !important;
    }

    #emHeader.em-authority-v18 .em-home-link:focus-visible{
        outline:2px solid rgba(255,90,31,.35) !important;
        outline-offset:3px !important;
    }

    /* Compact Coast Now lives at the end of navigation. It is present but not
       permanently shouting; amber is reserved for the live/current cue. */
    #emHeader.em-authority-v18 .em-coast-now-trigger{
        flex:0 0 auto;
        align-self:center;
        height:42px;
        margin-left:12px;
        padding:0 13px;

        display:inline-flex;
        align-items:center;
        gap:8px;

        border:1px solid rgba(0,12,50,.12);
        border-radius:12px;
        background:rgba(255,255,255,.50);
        color:var(--navy);

        font:inherit;
        font-size:12px;
        font-weight:900;
        line-height:1;
        white-space:nowrap;
        cursor:pointer;

        transition:
            background-color .18s var(--ease),
            border-color .18s var(--ease),
            color .18s var(--ease),
            transform .18s var(--ease);
    }

    #emHeader.em-authority-v18 .em-coast-now-trigger:hover,
    #emHeader.em-authority-v18 .em-coast-now-trigger:focus-visible,
    #emHeader.em-authority-v18 .em-coast-now-trigger.is-open{
        border-color:rgba(255,90,31,.34);
        background:#fff;
        color:var(--sun-orange);
        transform:translateY(-1px);
    }

    #emHeader.em-authority-v18 .em-coast-now-trigger:focus-visible{
        outline:2px solid rgba(255,90,31,.25);
        outline-offset:2px;
    }

    #emHeader.em-authority-v18 .em-coast-now-trigger svg{
        width:14px;
        height:14px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.7;
        stroke-linecap:round;
        stroke-linejoin:round;
        transition:transform .18s var(--ease);
    }

    #emHeader.em-authority-v18 .em-coast-now-trigger.is-open svg{
        transform:rotate(180deg);
    }

    #emHeader.em-authority-v18 .em-coast-now-dot{
        flex:0 0 auto;
        width:7px;
        height:7px;
        border-radius:50%;
        background:var(--amber);
        box-shadow:0 0 0 3px rgba(255,179,0,.13);
    }

    #emHeader.em-authority-v18 .em-coast-now-panel{
        position:absolute;
        right:0;
        top:calc(100% - 2px);
        z-index:70;

        width:min(360px,calc(100vw - 72px));
        padding:18px;

        border:1px solid rgba(0,12,50,.10);
        border-radius:0 0 16px 16px;
        background:#fff;
        color:var(--navy);
        box-shadow:0 18px 40px rgba(0,12,50,.12);
    }

    #emHeader.em-authority-v18 .em-coast-now-panel[hidden]{
        display:none !important;
    }

    #emHeader.em-authority-v18 .em-coast-now-head{
        display:flex;
        align-items:center;
        gap:9px;
        padding-bottom:13px;
        border-bottom:1px solid rgba(0,12,50,.08);
    }

    #emHeader.em-authority-v18 .em-coast-now-head strong{
        font-size:13px;
        font-weight:950;
        letter-spacing:.01em;
        text-transform:none;
    }

    #emHeader.em-authority-v18 .em-coast-now-metrics{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:0;
        padding:14px 0 13px;
    }

    #emHeader.em-authority-v18 .em-coast-now-metric{
        min-width:0;
        padding:0 12px;
        border-left:1px solid rgba(0,12,50,.08);
    }

    #emHeader.em-authority-v18 .em-coast-now-metric:first-child{
        padding-left:0;
        border-left:0;
    }

    #emHeader.em-authority-v18 .em-coast-now-metric:last-child{
        padding-right:0;
    }

    #emHeader.em-authority-v18 .em-coast-now-metric span{
        display:block;
        margin-bottom:5px;
        color:rgba(87,81,76,.78);
        font-size:9px;
        font-weight:800;
        letter-spacing:.08em;
        text-transform:uppercase;
    }

    #emHeader.em-authority-v18 .em-coast-now-metric strong{
        display:block;
        min-width:0;
        color:var(--navy);
        font-size:12px;
        font-weight:900;
        line-height:1.25;
        overflow-wrap:anywhere;
    }

    #emHeader.em-authority-v18 .em-coast-now-action{
        min-height:38px;
        padding:0 12px;

        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        border-radius:9px;
        background:rgba(255,179,0,.13);
        color:var(--navy);

        font-size:11px;
        font-weight:900;
        text-decoration:none;
    }

    #emHeader.em-authority-v18 a.em-coast-now-action:hover,
    #emHeader.em-authority-v18 a.em-coast-now-action:focus-visible{
        background:rgba(255,90,31,.10);
        color:var(--sun-orange);
    }

    #emHeader.em-authority-v18 .em-coast-now-action.is-static{
        justify-content:flex-start;
    }

    /* With the live rail removed, menus open directly beneath navigation. */
    #emHeader.em-authority-v18 .em-mega-wrap{
        top:var(--masthead-h) !important;
    }
}

@media(min-width:1081px) and (max-width:1240px){
    #emHeader.em-authority-v18 .em-coast-now-trigger{
        margin-left:6px;
        padding:0 10px;
        font-size:11px;
    }

    #emHeader.em-authority-v18 .em-coast-now-trigger span:nth-child(2){
        display:none;
    }

    #emHeader.em-authority-v18 .em-coast-now-trigger svg{
        display:none;
    }
}

/* =========================================================
   SUNLIT COAST PASS 22
   SLIM LEFT-ALIGNED COAST NOW RAIL
   - restore the live rail as a 30px utility strip
   - show only: Coast Now · temperature · tide · sunset
   - remove the right-side event/promo message
   - keep the masthead and navigation architecture unchanged
========================================================= */

@media(min-width:1081px){
    #emHeader.em-authority-v18,
    #emHeader.em-authority-v18 ~ #searchOverlay,
    #emHeader.em-authority-v18 ~ #mobileDrawer{
        --now-h:30px;
    }

    #emHeader.em-authority-v18 .em-now{
        display:block !important;
        height:30px !important;
        min-height:30px !important;
        background:var(--navy) !important;
        color:#fff !important;
    }

    #emHeader.em-authority-v18 .em-now-inner{
        width:min(var(--max),calc(100% - 48px));
        height:30px;
        margin:0 auto;
        justify-content:flex-start;
        gap:0;
        overflow:hidden;
    }

    #emHeader.em-authority-v18 .em-now-title{
        gap:8px;
        padding:0 18px 0 0;
        color:var(--amber);
        font-size:9px;
        font-weight:950;
        letter-spacing:.12em;
        line-height:1;
    }

    #emHeader.em-authority-v18 .em-now-dot{
        width:7px;
        height:7px;
        box-shadow:0 0 0 3px rgba(255,179,0,.12);
    }

    #emHeader.em-authority-v18 .em-now-item{
        padding:0 17px;
        color:rgba(255,255,255,.78);
        font-size:11px;
        font-weight:700;
        line-height:1;
    }

    #emHeader.em-authority-v18 .em-now-item strong{
        color:#fff;
        font-weight:900;
    }

    #emHeader.em-authority-v18 .em-now-item::before{
        height:9px;
        background:rgba(255,179,0,.30);
    }

    #emHeader.em-authority-v18 .em-now-action{
        display:none !important;
    }

    /* Pass 21's popup utility is intentionally retired. */
    #emHeader.em-authority-v18 .em-coast-now-trigger,
    #emHeader.em-authority-v18 .em-coast-now-panel{
        display:none !important;
    }

    #emHeader.em-authority-v18 .em-mega-wrap{
        top:var(--header-h) !important;
    }
}

@media(min-width:1241px){
    #emHeader.em-authority-v18,
    #emHeader.em-authority-v18 ~ #searchOverlay,
    #emHeader.em-authority-v18 ~ #mobileDrawer{
        --masthead-h:180px;
        --header-h:210px;
    }

    #emHeader.em-authority-v18 .em-profile-menu{
        top:176px !important;
    }
}

@media(min-width:1081px) and (max-width:1240px){
    #emHeader.em-authority-v18,
    #emHeader.em-authority-v18 ~ #searchOverlay,
    #emHeader.em-authority-v18 ~ #mobileDrawer{
        --masthead-h:170px;
        --header-h:200px;
    }

    #emHeader.em-authority-v18 .em-profile-menu{
        top:166px !important;
    }
}


/* =========================================================
   SUNLIT COAST PASS 24
   TRUE COMPACT COAST NOW TAB
   - the live utility itself is compact, not a full-width band
   - it sits flush left beneath navigation and overlays the page edge
   - the rest of the page rises directly beneath the navigation
   - desktop only; mobile remains unchanged
========================================================= */

@media (min-width:1081px){
    #emHeader.em-authority-v18,
    #emHeader.em-authority-v18 ~ #searchOverlay,
    #emHeader.em-authority-v18 ~ #mobileDrawer{
        --now-h:0px;
        --header-h:var(--masthead-h);
    }

    #emHeader.em-authority-v18 .em-now{
        position:absolute !important;
        top:var(--masthead-h) !important;
        left:0 !important;
        right:auto !important;
        z-index:20 !important;

        display:block !important;
        width:max-content !important;
        max-width:calc(100% - 24px) !important;
        height:30px !important;
        min-height:30px !important;
        margin:0 !important;

        background:var(--navy) !important;
        color:#fff !important;
        border:0 !important;
        border-radius:0 0 9px 0 !important;
        box-shadow:none !important;
        overflow:hidden !important;
    }

    #emHeader.em-authority-v18 .em-now::before,
    #emHeader.em-authority-v18 .em-now::after{
        content:none !important;
        display:none !important;
    }

    #emHeader.em-authority-v18 .em-now-inner{
        width:max-content !important;
        max-width:100% !important;
        height:30px !important;
        margin:0 !important;
        padding:0 16px 0 24px !important;

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

        background:transparent !important;
        overflow:hidden !important;
    }

    #emHeader.em-authority-v18 .em-now-title{
        gap:8px !important;
        padding:0 14px 0 0 !important;
        color:var(--amber) !important;
        font-size:9px !important;
        font-weight:950 !important;
        letter-spacing:.11em !important;
        line-height:1 !important;
    }

    #emHeader.em-authority-v18 .em-now-dot{
        width:7px !important;
        height:7px !important;
        flex:0 0 7px !important;
        box-shadow:0 0 0 3px rgba(255,179,0,.12) !important;
    }

    #emHeader.em-authority-v18 .em-now-item{
        min-width:max-content !important;
        padding:0 13px !important;
        color:rgba(255,255,255,.80) !important;
        font-size:11px !important;
        font-weight:700 !important;
        line-height:1 !important;
    }

    #emHeader.em-authority-v18 .em-now-item strong{
        color:#fff !important;
        font-weight:900 !important;
    }

    #emHeader.em-authority-v18 .em-now-item::before{
        left:0 !important;
        width:1px !important;
        height:9px !important;
        background:rgba(255,179,0,.34) !important;
    }

    #emHeader.em-authority-v18 .em-now-item:last-of-type{
        padding-right:0 !important;
    }

    #emHeader.em-authority-v18 .em-now-action,
    #emHeader.em-authority-v18 .em-coast-now-trigger,
    #emHeader.em-authority-v18 .em-coast-now-panel{
        display:none !important;
    }

    /* Mega menus own the layer above the small live tab when open. */
    #emHeader.em-authority-v18 .em-mega-wrap{
        top:var(--masthead-h) !important;
        z-index:30 !important;
    }
}

/* =========================================================
   SUNLIT COAST PASS 25
   RESTRAINED NAVIGATION FLOOR
   - simplify Home back to a quiet icon-only navigation entry
   - add one continuous orange navigation floor across the menu
   - keep the existing bottom-to-top travelling rail on interaction
   - preserve the compact Coast Now tab from Pass 24
========================================================= */

@media (min-width:1081px){
    /* One deliberate floor gives the entire navigation row a single visual
       foundation. This is structural, not a row of individual underlines. */
    #emHeader.em-authority-v18 .em-nav{
        position:relative !important;
        isolation:isolate;
        overflow:visible !important;
    }

    #emHeader.em-authority-v18 .em-nav::after{
        content:"";
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        z-index:0;
        height:3px;
        background:var(--coral);
        pointer-events:none;
    }

    /* Menu items sit above the continuous floor. At rest they do not carry
       their own mini underline. On interaction, a 4px rail rises from the
       shared floor to the top edge using the Visit London motion principle. */
    #emHeader.em-authority-v18 .em-nav-item{
        position:relative !important;
        z-index:1;
        background-color:transparent !important;
        background-image:linear-gradient(transparent,transparent) !important;
        background-repeat:no-repeat !important;
        background-size:100% 4px !important;
        background-position:center bottom !important;
        transition:
            color .18s var(--ease),
            background-position .30s ease-in,
            transform .18s var(--ease) !important;
    }

    #emHeader.em-authority-v18 .em-nav-item:hover,
    #emHeader.em-authority-v18 .em-nav-item:focus-visible,
    #emHeader.em-authority-v18 .em-nav-item.is-open,
    #emHeader.em-authority-v18 .em-nav-item.is-current{
        background-image:linear-gradient(var(--coral),var(--coral)) !important;
        background-size:100% 4px !important;
        background-position:center top !important;
    }

    /* Home should read as the first route in the same navigation family — not
       as a button or app control. Generous hit area, plain icon, no box. */
    #emHeader.em-authority-v18 .em-home-link{
        position:relative !important;
        z-index:1;
        flex:0 0 58px !important;
        width:58px !important;
        height:62px !important;
        margin:0 12px 0 0 !important;
        padding:0 !important;
        align-self:center !important;
        display:grid !important;
        place-items:center !important;

        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        outline-offset:3px;
        color:var(--navy) !important;
        background-color:transparent !important;
        background-image:linear-gradient(transparent,transparent) !important;
        background-repeat:no-repeat !important;
        background-size:100% 4px !important;
        background-position:center bottom !important;
        transform:none !important;

        transition:
            color .18s var(--ease),
            background-position .30s ease-in,
            transform .18s var(--ease) !important;
    }

    #emHeader.em-authority-v18 .em-home-link svg{
        width:21px !important;
        height:21px !important;
        stroke-width:1.65 !important;
        color:inherit !important;
        transform:none !important;
        transition:color .18s var(--ease), transform .18s var(--ease) !important;
    }

    #emHeader.em-authority-v18 .em-home-link:hover,
    #emHeader.em-authority-v18 .em-home-link:focus-visible{
        color:var(--coral) !important;
        background-color:transparent !important;
        border-color:transparent !important;
        background-image:linear-gradient(var(--coral),var(--coral)) !important;
        background-size:100% 4px !important;
        background-position:center top !important;
        transform:none !important;
    }

    #emHeader.em-authority-v18 .em-home-link:hover svg,
    #emHeader.em-authority-v18 .em-home-link:focus-visible svg{
        transform:translateY(-1px) !important;
    }

    /* Homepage state stays quiet like Visit London's Home icon. The continuous
       floor already identifies the navigation row, so no permanent orange box
       or parked top rail is needed. */
    #emHeader.em-authority-v18 .em-home-link.is-current:not(:hover):not(:focus-visible){
        color:var(--navy) !important;
        background-color:transparent !important;
        border:0 !important;
        background-image:linear-gradient(transparent,transparent) !important;
        background-size:100% 4px !important;
        background-position:center bottom !important;
        transform:none !important;
    }

    #emHeader.em-authority-v18 .em-home-link:focus-visible{
        outline:2px solid rgba(255,90,31,.34) !important;
    }

    /* Give the primary routes slightly more horizontal territory now that the
       navigation has been visually simplified. */
    #emHeader.em-authority-v18 .em-nav-item{
        margin-left:3px !important;
        margin-right:3px !important;
    }
}

@media (min-width:1081px) and (max-width:1240px){
    #emHeader.em-authority-v18 .em-home-link{
        flex-basis:52px !important;
        width:52px !important;
        height:60px !important;
        margin-right:7px !important;
    }

    #emHeader.em-authority-v18 .em-nav-item{
        margin-left:1px !important;
        margin-right:1px !important;
    }
}

/* =========================================================
   PASS 26 — EXACT TRAVELLING 4PX NAV RAIL
   Reproduces the Visit London mechanism itself:
   one 4px background stripe per navigation tab, always 4px thick,
   moving only by background-position from bottom -> top.
========================================================= */
@media (min-width:1081px){
    /* Remove Pass 25's separate shared floor. It caused the apparent
       thinning because the shared 3px line remained at the bottom while
       the item's 4px rail moved away. */
    #emHeader.em-authority-v18 .em-nav::after{
        content:none !important;
        display:none !important;
    }

    #emHeader.em-authority-v18 .em-nav{
        gap:0 !important;
    }

    /* The stripe exists in the normal state and never changes thickness. */
    #emHeader.em-authority-v18 .em-nav-item,
    #emHeader.em-authority-v18 .em-home-link{
        margin-left:0 !important;
        margin-right:0 !important;
        background-color:transparent !important;
        background-image:linear-gradient(var(--amber),var(--amber)) !important;
        background-repeat:no-repeat !important;
        background-size:100% 4px !important;
        background-position:center bottom !important;
        transition:
            background-position .30s ease-in,
            color .18s var(--ease) !important;
    }

    /* Hover / focus / open / current changes POSITION only. The rail stays 4px. */
    #emHeader.em-authority-v18 .em-nav-item:hover,
    #emHeader.em-authority-v18 .em-nav-item:focus-visible,
    #emHeader.em-authority-v18 .em-nav-item.is-open,
    #emHeader.em-authority-v18 .em-nav-item.is-current,
    #emHeader.em-authority-v18 .em-home-link:hover,
    #emHeader.em-authority-v18 .em-home-link:focus-visible,
    #emHeader.em-authority-v18 .em-home-link.is-current{
        background-image:linear-gradient(var(--amber),var(--amber)) !important;
        background-size:100% 4px !important;
        background-position:center top !important;
        transform:none !important;
    }

    /* Keep the navigation itself still so the travelling rail is the motion. */
    #emHeader.em-authority-v18 .em-nav-item:hover,
    #emHeader.em-authority-v18 .em-nav-item:focus-visible,
    #emHeader.em-authority-v18 .em-nav-item.is-open,
    #emHeader.em-authority-v18 .em-nav-item.is-current{
        transform:none !important;
    }

    /* Override the earlier quiet-home current-state rule from Pass 25. */
    #emHeader.em-authority-v18 .em-home-link.is-current:not(:hover):not(:focus-visible){
        color:var(--navy) !important;
        background-color:transparent !important;
        background-image:linear-gradient(var(--amber),var(--amber)) !important;
        background-size:100% 4px !important;
        background-position:center top !important;
        transform:none !important;
    }
}

/* =========================================================
   PASS 27 — VISIT LONDON HOVER STATE
   - the resting rail is 4px across the navigation
   - while one route is hovered/open/focused, that route keeps a 4px rail
     and moves it to the top; every other route quiets to a 1px floor
   - Home remains plain at rest and fills only on hover
   - mega menu drops from the navigation on desktop hover
========================================================= */
@media (min-width:1081px){
    /* Normal state: every route contributes the same confident 4px floor. */
    #emHeader.em-authority-v18 .em-nav-item,
    #emHeader.em-authority-v18 .em-home-link{
        background-repeat:no-repeat !important;
        background-position:center bottom !important;
        background-size:100% 4px !important;
        transition:
            background-position .30s ease-in,
            background-size .18s ease,
            background-color .18s ease,
            color .18s var(--ease) !important;
    }

    #emHeader.em-authority-v18 .em-nav-item{
        background-image:linear-gradient(var(--amber),var(--amber)) !important;
    }

    /* During an interaction, the rest of the rail becomes a hairline. */
    #emHeader.em-authority-v18 .em-nav:has(.em-nav-item:hover) .em-nav-item:not(:hover),
    #emHeader.em-authority-v18 .em-nav:has(.em-nav-item:focus-visible) .em-nav-item:not(:focus-visible),
    #emHeader.em-authority-v18 .em-nav:has(.em-nav-item.is-open) .em-nav-item:not(.is-open),
    #emHeader.em-authority-v18 .em-nav:has(.em-home-link:hover) .em-nav-item,
    #emHeader.em-authority-v18 .em-nav:has(.em-home-link:focus-visible) .em-nav-item{
        background-size:100% 1px !important;
        background-position:center bottom !important;
    }

    /* The active route retains the full 4px stripe and moves only its
       background position from bottom to top. */
    #emHeader.em-authority-v18 .em-nav-item:hover,
    #emHeader.em-authority-v18 .em-nav-item:focus-visible,
    #emHeader.em-authority-v18 .em-nav-item.is-open{
        background-size:100% 4px !important;
        background-position:center top !important;
    }

    /* A merely current page must not look hovered. Keep its rail at the floor
       until it is actually interacted with/opened. */
    #emHeader.em-authority-v18 .em-nav-item.is-current:not(:hover):not(:focus-visible):not(.is-open){
        background-size:100% 4px !important;
        background-position:center bottom !important;
    }

    /* Home is deliberately different: quiet icon at rest, warm filled tile
       only while hovered. No permanent homepage fill/current treatment. */
    #emHeader.em-authority-v18 .em-home-link,
    #emHeader.em-authority-v18 .em-home-link.is-current,
    #emHeader.em-authority-v18 .em-home-link.is-current:not(:hover):not(:focus-visible){
        color:var(--navy) !important;
        background-color:transparent !important;
        background-image:linear-gradient(var(--amber),var(--amber)) !important;
        background-size:100% 4px !important;
        background-position:center bottom !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
    }

    #emHeader.em-authority-v18 .em-home-link:hover{
        color:var(--navy) !important;
        background-color:var(--amber) !important;
        background-image:none !important;
        border-radius:4px !important;
    }

    #emHeader.em-authority-v18 .em-home-link:focus-visible{
        color:var(--navy) !important;
        background-color:transparent !important;
        background-image:linear-gradient(var(--amber),var(--amber)) !important;
        background-size:100% 4px !important;
        background-position:center top !important;
        outline:2px solid rgba(255,179,0,.48) !important;
        border-radius:2px !important;
    }

    #emHeader.em-authority-v18 .em-home-link:hover svg,
    #emHeader.em-authority-v18 .em-home-link:focus-visible svg{
        transform:none !important;
    }

    /* Make the dropdown read as dropping from the rail rather than fading in
       as a floating card. */
    #emHeader .em-mega{
        transform:translateY(-11px) scale(1) !important;
        transform-origin:top center !important;
        transition:
            opacity .16s ease,
            visibility .16s ease,
            transform .24s cubic-bezier(.22,.61,.36,1) !important;
    }

    #emHeader .em-mega.is-open{
        transform:translateY(0) scale(1) !important;
    }
}


/* =========================================================
   PASS 28 — HOME FILL IS HOVER-ONLY
   Home may participate in the rail, but the tile itself must never remain
   filled because it is current, focused or clicked. Only a real pointer hover
   gets the amber surface.
========================================================= */
@media (min-width:1081px){
    #emHeader.em-authority-v18 .em-home-link,
    #emHeader.em-authority-v18 .em-home-link.is-current,
    #emHeader.em-authority-v18 .em-home-link:focus,
    #emHeader.em-authority-v18 .em-home-link:focus-visible,
    #emHeader.em-authority-v18 .em-home-link:active{
        color:var(--navy) !important;
        background-color:transparent !important;
        background-image:linear-gradient(var(--amber),var(--amber)) !important;
        background-repeat:no-repeat !important;
        background-size:100% 4px !important;
        background-position:center bottom !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
    }

    /* When another route is active, Home quiets with the rest of the floor. */
    #emHeader.em-authority-v18 .em-nav:has(.em-nav-item:hover) .em-home-link:not(:hover),
    #emHeader.em-authority-v18 .em-nav:has(.em-nav-item:focus-visible) .em-home-link:not(:focus-visible),
    #emHeader.em-authority-v18 .em-nav:has(.em-nav-item.is-open) .em-home-link{
        background-size:100% 1px !important;
        background-position:center bottom !important;
    }

    #emHeader.em-authority-v18 .em-home-link:focus-visible{
        outline:2px solid rgba(255,179,0,.48) !important;
        outline-offset:3px !important;
    }
}

@media (min-width:1081px) and (hover:hover) and (pointer:fine){
    #emHeader.em-authority-v18 .em-home-link:hover{
        color:var(--navy) !important;
        background-color:var(--amber) !important;
        background-image:none !important;
        border-radius:4px !important;
        outline:0 !important;
    }
}

/* =========================================================
   PASS 29 — PURE WORDMARK
   Brand refinement only:
   - approved logo asset now has no amber underline
   - Exploring remains optically left-aligned with MOMBASA
   - no replacement decoration is added; amber belongs to interaction/UI
========================================================= */


/* =========================================================
   PASS 30 — WORDMARK CACHE RESET + GRID-ALIGNED COAST NOW
   - use a uniquely named pure wordmark asset so an older cached logo
     cannot keep serving the retired amber underline
   - align the compact Coast Now tab to the masthead/content grid
========================================================= */

@media (min-width:1241px){
    #emHeader.em-authority-v18 .em-now{
        left:max(36px, calc((100vw - var(--max)) / 2)) !important;
        border-radius:0 0 9px 9px !important;
    }
}

@media (min-width:1081px) and (max-width:1240px){
    #emHeader.em-authority-v18 .em-now{
        left:18px !important;
        border-radius:0 0 9px 9px !important;
    }
}

/* =========================================================
   PASS 31 — MOBILE HEADER + ACCOUNT REFINEMENT
   Mobile only. Preserve the approved “Where next?” navigation exactly.
   - one reliable 60px masthead: full wordmark + avatar + menu trigger
   - one concise 30px Coast Now rail; no weekend promo overflow
   - neutralise inherited sticky/transform states that caused the masthead
     to disappear and then re-enter over the hero
   - compact My Coast and Work with us sections below the navigation
========================================================= */
@media(max-width:1080px){
    #emHeader,
    #searchOverlay,
    #mobileDrawer{
        --masthead-h:60px !important;
        --now-h:30px !important;
        --header-h:90px !important;
    }

    /* One header, one sticky state. Never animate/translate the whole masthead. */
    #emHeader.em-header,
    #emHeader.em-authority-v18{
        position:sticky !important;
        top:0 !important;
        z-index:5000 !important;
        width:100% !important;
        height:auto !important;
        min-height:90px !important;
        max-height:none !important;
        margin:0 !important;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        translate:none !important;
        overflow:visible !important;
        transition:none !important;
        background:rgba(255,244,234,.985) !important;
    }

    body.admin-bar #emHeader.em-header,
    body.admin-bar #emHeader.em-authority-v18{
        top:46px !important;
    }

    /* The desktop authority wrapper becomes transparent on mobile, then the
       actual children are deliberately assigned to the three mobile columns. */
    #emHeader.em-authority-v18 .em-authority-top{
        display:contents !important;
    }

    #emHeader.em-authority-v18 .em-masthead,
    #emHeader .em-masthead{
        position:relative !important;
        width:100% !important;
        height:60px !important;
        min-height:60px !important;
        margin:0 !important;
        padding:0 12px !important;

        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto 42px !important;
        grid-template-rows:60px !important;
        align-items:center !important;
        gap:9px !important;

        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        overflow:visible !important;
    }

    /* Full, readable wordmark — no clipping at the left edge. */
    #emHeader.em-authority-v18 .em-brand,
    #emHeader .em-brand{
        grid-column:1 !important;
        grid-row:1 !important;
        justify-self:start !important;
        align-self:center !important;

        width:146px !important;
        height:38px !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;

        background-position:left center !important;
        background-size:contain !important;
        transform:none !important;
    }

    /* Mobile masthead utility is intentionally just identity + menu.
       Search remains available inside the drawer. */
    #emHeader.em-authority-v18 .em-actions,
    #emHeader .em-actions{
        grid-column:2 !important;
        grid-row:1 !important;
        justify-self:end !important;
        align-self:center !important;
        min-width:0 !important;
        height:44px !important;
        padding:0 !important;
        gap:0 !important;
        transform:none !important;
    }

    #emHeader .em-actions > .em-action,
    #emHeader .desktop-saved,
    #emHeader .em-profile-copy{
        display:none !important;
    }

    #emHeader .em-profile,
    #emHeader .em-signin{
        min-height:40px !important;
        padding:0 !important;
        margin:0 !important;
    }

    #emHeader .em-avatar{
        width:34px !important;
        height:34px !important;
    }

    #emHeader #mobileOpen,
    #emHeader .em-mobile-trigger{
        grid-column:3 !important;
        grid-row:1 !important;
        justify-self:end !important;
        align-self:center !important;

        width:42px !important;
        height:42px !important;
        min-width:42px !important;
        min-height:42px !important;
        margin:0 !important;
        padding:0 !important;

        display:grid !important;
        place-items:center !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        color:var(--navy) !important;
        box-shadow:none !important;
        transform:none !important;
    }

    #emHeader #mobileOpen svg,
    #emHeader .em-mobile-trigger svg{
        width:21px !important;
        height:21px !important;
    }

    /* Coast Now is information, not a second mobile navigation bar. */
    #emHeader.em-authority-v18 .em-now,
    #emHeader .em-now{
        position:relative !important;
        inset:auto !important;
        z-index:2 !important;

        display:block !important;
        width:100% !important;
        max-width:none !important;
        height:30px !important;
        min-height:30px !important;
        margin:0 !important;

        border:0 !important;
        border-radius:0 !important;
        background:var(--navy) !important;
        color:#fff !important;
        box-shadow:none !important;
        overflow:hidden !important;
        transform:none !important;
    }

    #emHeader .em-now-inner{
        width:100% !important;
        max-width:none !important;
        height:30px !important;
        margin:0 !important;
        padding:0 12px !important;

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

        overflow-x:auto !important;
        overflow-y:hidden !important;
        scrollbar-width:none !important;
        -webkit-overflow-scrolling:touch;
        white-space:nowrap !important;
    }

    #emHeader .em-now-inner::-webkit-scrollbar{
        display:none !important;
    }

    #emHeader .em-now-title{
        flex:0 0 auto !important;
        gap:7px !important;
        padding:0 13px 0 0 !important;
        color:var(--amber) !important;
        font-size:8.5px !important;
        font-weight:950 !important;
        letter-spacing:.105em !important;
        line-height:1 !important;
    }

    #emHeader .em-now-dot{
        width:7px !important;
        height:7px !important;
        flex:0 0 auto !important;
    }

    #emHeader .em-now-item{
        flex:0 0 auto !important;
        padding:0 13px !important;
        color:rgba(255,255,255,.78) !important;
        font-size:10px !important;
        font-weight:700 !important;
        line-height:1 !important;
        white-space:nowrap !important;
    }

    #emHeader .em-now-item strong{
        color:#fff !important;
        font-weight:900 !important;
    }

    #emHeader .em-now-item::before{
        height:9px !important;
        background:rgba(255,179,0,.30) !important;
    }

    #emHeader .em-now-action{
        display:none !important;
    }

    /* Drawer stays a true viewport layer. Only the lower utility sections are
       compacted; the approved Where next? intro + navigation are untouched. */
    #mobileDrawer,
    .em-mobile-drawer{
        position:fixed !important;
        inset:0 !important;
        width:100% !important;
        height:100dvh !important;
        max-height:100dvh !important;
        overflow:hidden !important;
    }

    #mobileDrawer .em-mobile-top{
        height:60px !important;
        padding-left:max(16px,env(safe-area-inset-left)) !important;
        padding-right:max(12px,env(safe-area-inset-right)) !important;
    }

    #mobileDrawer .em-mobile-body{
        height:calc(100dvh - 60px) !important;
        padding-bottom:max(40px,calc(34px + env(safe-area-inset-bottom))) !important;
    }

    #mobileDrawer .em-mobile-account{
        margin-top:27px !important;
        padding-top:20px !important;
    }

    #mobileDrawer .em-mobile-account .em-mobile-label{
        margin-bottom:11px !important;
    }

    #mobileDrawer .em-mobile-user{
        margin-bottom:12px !important;
    }

    #mobileDrawer .em-mobile-account-links{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        column-gap:16px !important;
    }

    #mobileDrawer .em-mobile-account-links a{
        min-width:0 !important;
        min-height:44px !important;
        gap:8px !important;
        font-size:11px !important;
    }

    #mobileDrawer .em-mobile-account-links svg{
        width:11px !important;
        height:11px !important;
        color:var(--coral) !important;
    }

    #mobileDrawer .em-mobile-secondary{
        margin-top:24px !important;
        padding-top:18px !important;

        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        column-gap:16px !important;
    }

    #mobileDrawer .em-mobile-secondary .em-mobile-label{
        grid-column:1 / -1 !important;
        margin-bottom:8px !important;
    }

    #mobileDrawer .em-mobile-secondary a{
        width:auto !important;
        min-height:42px !important;
        border-bottom:1px solid var(--line) !important;
        font-size:11px !important;
    }

    #mobileDrawer .em-mobile-social{
        margin-top:22px !important;
        padding-top:18px !important;
    }
}

@media(max-width:600px){
    /* WordPress stops fixing the admin bar on many narrow screens. Do not
       preserve a ghost 46px sticky offset after it scrolls away. */
    body.admin-bar #emHeader.em-header,
    body.admin-bar #emHeader.em-authority-v18{
        top:0 !important;
    }
}

@media(max-width:360px){
    #emHeader.em-authority-v18 .em-brand,
    #emHeader .em-brand{
        width:134px !important;
        height:35px !important;
    }

    #emHeader.em-authority-v18 .em-masthead,
    #emHeader .em-masthead{
        padding-left:10px !important;
        padding-right:8px !important;
        gap:6px !important;
    }

    #emHeader .em-now-title{
        padding-right:10px !important;
    }

    #emHeader .em-now-item{
        padding-left:10px !important;
        padding-right:10px !important;
    }
}

/* =========================================================
   MOBILE PASS 32 — COLLAPSIBLE MY COAST + WORK WITH US
   Preserve the approved Where next? navigation exactly as-is.
========================================================= */
@media(max-width:1080px){
    #mobileDrawer.em-mobile-v32 .em-mobile-account{
        margin-top:27px !important;
        padding-top:20px !important;
        border-top:1.5px solid var(--navy) !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-utility-toggle{
        width:100% !important;
        min-height:48px !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
        color:var(--ink) !important;
        font:inherit !important;
        text-align:left !important;
        cursor:pointer !important;
        appearance:none !important;
        -webkit-appearance:none !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 34px !important;
        align-items:center !important;
        gap:12px !important;
        padding-bottom:12px !important;
        border-bottom:1px solid var(--line) !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle-copy{
        min-width:0 !important;
        display:block !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-label{
        display:block !important;
        margin:0 0 11px !important;
        color:var(--muted) !important;
        font-size:8px !important;
        font-weight:900 !important;
        letter-spacing:.15em !important;
        text-transform:uppercase !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-user{
        margin:0 !important;
        pointer-events:none !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-user strong{
        font-size:13px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-user small{
        margin-top:3px !important;
        font-size:9px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-utility-symbol{
        width:34px !important;
        height:34px !important;
        display:grid !important;
        place-items:center !important;
        justify-self:end !important;
        align-self:center !important;
        color:var(--navy) !important;
        font-size:24px !important;
        font-weight:300 !important;
        line-height:1 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-utility-toggle:focus-visible{
        outline:2px solid var(--coral) !important;
        outline-offset:4px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-links[hidden],
    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-links[hidden]{
        display:none !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-links{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        column-gap:16px !important;
        padding-top:7px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-links a{
        min-height:43px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary{
        display:block !important;
        margin-top:16px !important;
        padding-top:0 !important;
        border-top:0 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-toggle{
        min-height:54px !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 34px !important;
        align-items:center !important;
        gap:12px !important;
        border-bottom:1px solid var(--line) !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-toggle-title{
        color:var(--muted) !important;
        font-size:8px !important;
        font-weight:900 !important;
        letter-spacing:.15em !important;
        text-transform:uppercase !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-links{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        column-gap:16px !important;
        padding-top:6px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-links a{
        width:auto !important;
        min-height:43px !important;
        border-bottom:1px solid var(--line) !important;
        font-size:11px !important;
    }

    /* The social footer can now sit closer because the utility groups collapse. */
    #mobileDrawer.em-mobile-v32 .em-mobile-social{
        margin-top:18px !important;
        padding-top:18px !important;
    }
}


/* =========================================================
   MOBILE PASS 33 — COAST NOW MICRO-RAIL REFINEMENT
   Keep the useful live data, but make it scan like a polished
   coastal status rail rather than a news/finance ticker.
========================================================= */
@media(max-width:1080px){
    #emHeader.em-authority-v18 .em-now,
    #emHeader .em-now{
        height:28px !important;
        min-height:28px !important;
    }

    #emHeader .em-now-inner{
        height:28px !important;
        padding:0 13px !important;
    }

    #emHeader .em-now-title{
        gap:7px !important;
        padding:0 15px 0 0 !important;
        font-size:8.5px !important;
        letter-spacing:.10em !important;
    }

    #emHeader .em-now-dot{
        width:7px !important;
        height:7px !important;
        box-shadow:0 0 0 3px rgba(255,179,0,.11) !important;
    }

    #emHeader .em-now-item{
        padding:0 15px !important;
        color:rgba(255,255,255,.58) !important;
        font-size:9.5px !important;
        font-weight:650 !important;
        letter-spacing:.005em !important;
    }

    #emHeader .em-now-item strong{
        color:#fff !important;
        font-weight:850 !important;
    }

    #emHeader .em-now-metric-label{
        color:rgba(255,255,255,.58) !important;
        font-weight:650 !important;
    }

    #emHeader .em-now-item::before{
        width:1px !important;
        height:8px !important;
        background:rgba(255,255,255,.16) !important;
    }
}

@media(max-width:360px){
    #emHeader .em-now-inner{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    #emHeader .em-now-title{
        padding-right:12px !important;
    }

    #emHeader .em-now-item{
        padding-left:12px !important;
        padding-right:12px !important;
    }
}

/* =========================================================
   MOBILE PASS 34 — INTEGRATED COAST NOW
   Demote Coast Now beneath the brand by removing the dark band.
   Keep the data useful, quiet and on the same warm masthead canvas.
========================================================= */
@media(max-width:1080px){
    #emHeader.em-authority-v18 .em-now,
    #emHeader .em-now{
        height:26px !important;
        min-height:26px !important;
        background:var(--warm) !important;
        color:var(--navy) !important;
        border-top:1px solid rgba(0,12,50,.07) !important;
        border-bottom:0 !important;
        box-shadow:none !important;
    }

    #emHeader .em-now-inner{
        height:26px !important;
        padding:0 14px !important;
        background:transparent !important;
    }

    #emHeader .em-now-title{
        gap:6px !important;
        padding:0 13px 0 0 !important;
        color:rgba(0,12,50,.68) !important;
        font-size:8px !important;
        font-weight:900 !important;
        letter-spacing:.105em !important;
    }

    #emHeader .em-now-dot{
        width:6px !important;
        height:6px !important;
        background:var(--amber) !important;
        box-shadow:0 0 0 2px rgba(255,179,0,.12) !important;
    }

    #emHeader .em-now-item{
        padding:0 13px !important;
        color:rgba(0,12,50,.48) !important;
        font-size:9px !important;
        font-weight:650 !important;
        letter-spacing:0 !important;
    }

    #emHeader .em-now-item strong{
        color:rgba(0,12,50,.82) !important;
        font-weight:850 !important;
    }

    #emHeader .em-now-metric-label{
        color:rgba(0,12,50,.48) !important;
        font-weight:650 !important;
    }

    #emHeader .em-now-item::before{
        width:1px !important;
        height:7px !important;
        background:rgba(0,12,50,.12) !important;
    }
}

@media(max-width:360px){
    #emHeader .em-now-inner{
        padding-left:11px !important;
        padding-right:11px !important;
    }

    #emHeader .em-now-title{
        padding-right:11px !important;
    }

    #emHeader .em-now-item{
        padding-left:11px !important;
        padding-right:11px !important;
    }
}


/* =========================================================
   MOBILE PASS 35 — FINAL DRAWER POLISH
   Preserve the approved Where next? composition.
   Improve interaction, close affordance and narrow-screen resilience only.
========================================================= */
@media(max-width:1080px){
    html.em-overlay-locked,
    html.em-overlay-locked body{
        overflow:hidden !important;
        overscroll-behavior:none !important;
    }

    /* The drawer masthead never scrolls away; only .em-mobile-body scrolls. */
    #mobileDrawer .em-mobile-top{
        position:relative !important;
        z-index:5 !important;
        flex:0 0 60px !important;
        background:var(--warm) !important;
    }

    #mobileDrawer .em-mobile-body{
        overscroll-behavior:contain !important;
    }

    #mobileDrawer .em-mobile-close{
        width:44px !important;
        height:44px !important;
        display:grid !important;
        place-items:center !important;
        color:var(--navy) !important;
        border:0 !important;
        border-radius:50% !important;
        background:transparent !important;
        cursor:pointer !important;
    }

    #mobileDrawer .em-mobile-close:hover{
        background:rgba(255,90,31,.08) !important;
    }

    #mobileDrawer .em-mobile-close:focus-visible{
        outline:2px solid var(--coral) !important;
        outline-offset:2px !important;
    }

    #mobileDrawer .em-mobile-close .em-mobile-close-x{
        width:22px !important;
        height:22px !important;
        display:block !important;
    }

    /* The whole row is the touch target; + / − is only the state cue. */
    #mobileDrawer .em-mobile-section-button,
    #mobileDrawer .em-mobile-utility-toggle{
        touch-action:manipulation !important;
        cursor:pointer !important;
    }

    #mobileDrawer .em-mobile-social .em-mobile-label{
        letter-spacing:.15em !important;
    }
}

@media(max-width:360px){
    /* On the narrowest screens the live dot can carry the “now” cue so the
       useful values never get squeezed merely to preserve the label. */
    #emHeader .em-now-title-text{
        display:none !important;
    }

    #emHeader .em-now-title{
        padding-right:7px !important;
    }

    #emHeader .em-now-item{
        padding-left:9px !important;
        padding-right:9px !important;
    }
}

/* =========================================================
   DESKTOP PASS 36 — NAVIGATION-ONLY STICKY STATE
   Only the primary navigation remains visible after the masthead scrolls away.
   Brand, account/search utilities and Coast Now continue to scroll normally.
========================================================= */
@media(min-width:1081px){
    /* Retire the old whole-header sticky behaviour on desktop only. */
    #emHeader.em-header.em-nav-only-sticky-ready,
    #emHeader.em-authority-v18.em-nav-only-sticky-ready{
        position:relative !important;
        top:auto !important;
    }

    #emHeader.em-nav-only-sticky-ready .em-nav-sticky-sentinel{
        flex:0 0 0 !important;
        width:0 !important;
        height:0 !important;
        min-width:0 !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        overflow:hidden !important;
        pointer-events:none !important;
    }

    /* Same navigation, same size and styling — only its positioning changes. */
    #emHeader.em-nav-only-sticky-ready.em-nav-is-stuck .em-nav{
        position:fixed !important;
        top:var(--em-nav-sticky-top,0px) !important;
        left:var(--em-nav-sticky-left,0px) !important;
        width:var(--em-nav-sticky-width,auto) !important;
        height:var(--em-nav-sticky-height,auto) !important;
        z-index:5001 !important;
        margin:0 !important;
        background:rgba(255,244,234,.985) !important;
    }

    /* Keep existing mega-menu behaviour attached to the sticky nav. */
    #emHeader.em-nav-only-sticky-ready.em-nav-is-stuck .em-mega-wrap{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        top:calc(var(--em-nav-sticky-top,0px) + var(--em-nav-sticky-height,0px)) !important;
    }
}

\n\n/* =========================================================\n   RESTORED 5.0.1 — COAST NOW REMOVED\n   The live Coast Now rail is intentionally absent on every viewport.\n   Reset the mobile header dimensions so removing the 30px rail does not\n   leave a blank strip beneath the masthead.\n========================================================= */\n#emHeader .em-now,\n#emHeader.em-authority-v18 .em-now,\n#emHeader .em-coast-now-trigger,\n#emHeader .em-coast-now-panel{\n    display:none !important;\n}\n\n@media(max-width:1080px){\n    #emHeader,\n    #searchOverlay,\n    #mobileDrawer{\n        --now-h:0px !important;\n        --header-h:60px !important;\n    }\n\n    #emHeader.em-header,\n    #emHeader.em-authority-v18{\n        min-height:60px !important;\n    }\n}\n
/* =========================================================
   v5.0.2 refinements
   - lighten icon weight across desktop and mobile
   - replace amber/yellow accents with the right-panel coral orange
========================================================= */
#emHeader .em-nav-icon,
#emHeader .em-action svg,
#emHeader .em-home-link svg,
#searchOverlay .em-search-close svg,
#searchOverlay .em-search-field svg,
#mobileDrawer .em-mobile-close svg,
#mobileDrawer .em-mobile-search svg,
#mobileDrawer .em-mobile-section-icon svg,
#mobileDrawer .em-mobile-account-links svg,
#mobileDrawer .em-mobile-social-links svg,
#mobileDrawer .em-mobile-cta svg{
    stroke-width:1.35 !important;
}

#emHeader .em-nav-icon{
    width:20px;
    height:20px;
}

#emHeader .em-action svg,
#emHeader .em-home-link svg{
    width:19px !important;
    height:19px !important;
}

#mobileDrawer .em-mobile-section-icon svg,
#mobileDrawer .em-mobile-search svg,
#mobileDrawer .em-mobile-close svg{
    width:18px;
    height:18px;
}


/* =========================================================
   v5.0.4 — clean header only
   - Traveler utility bar removed completely
   - legacy Traveler header fragments remain suppressed
   - all Pass 36 navigation icons explicitly restored
========================================================= */

.em-legacy-traveler-hidden{
    display:none !important;
}

/* Traveler and page-builder styles can contain broad SVG rules.
   Force every primary navigation icon back into the layout. */
#emHeader.em-authority-v18 .em-nav-item > svg.em-nav-icon,
#emHeader .em-nav-item > svg.em-nav-icon{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 auto !important;
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    max-width:20px !important;
    max-height:20px !important;
    color:var(--navy) !important;
    stroke:currentColor !important;
    stroke-width:1.35 !important;
    fill:none !important;
    overflow:visible !important;
    pointer-events:none !important;
}

#emHeader.em-authority-v18 .em-nav-item:hover > svg.em-nav-icon,
#emHeader.em-authority-v18 .em-nav-item:focus-visible > svg.em-nav-icon,
#emHeader.em-authority-v18 .em-nav-item.is-open > svg.em-nav-icon{
    color:var(--coral) !important;
}

/* Keep the Home icon visible at the same fine-line weight. */
#emHeader.em-authority-v18 .em-home-link svg,
#emHeader .em-home-link svg{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    stroke:currentColor !important;
    stroke-width:1.35 !important;
    fill:none !important;
}

/* Keep action icons consistent with the navigation icon weight. */
#emHeader .em-action svg{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    stroke:currentColor !important;
    stroke-width:1.35 !important;
    fill:none !important;
}

/* =========================================================
   v5.0.5 — MOBILE DRAWER UTILITY INTEGRATION
   Make My Coast + Work With Us read as part of the same menu,
   then finish with one compact social footer.
========================================================= */
@media(max-width:1080px){
    /* The final primary navigation row already supplies the separator.
       Do not start a second visual component underneath it. */
    #mobileDrawer.em-mobile-v32 .em-mobile-account{
        margin-top:0 !important;
        padding-top:0 !important;
        border-top:0 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle{
        min-height:68px !important;
        grid-template-columns:minmax(0,1fr) 26px !important;
        gap:10px !important;
        padding:10px 0 !important;
        border-bottom:1px solid var(--line) !important;
    }

    /* Turn the old label + profile stack into one coherent utility row:
       avatar | My Coast / Sally + identity | + */
    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle-copy{
        display:grid !important;
        grid-template-columns:36px minmax(0,1fr) !important;
        grid-template-rows:auto auto !important;
        column-gap:12px !important;
        row-gap:3px !important;
        align-items:center !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-label{
        grid-column:2 !important;
        grid-row:1 !important;
        margin:0 !important;
        color:var(--navy) !important;
        font-size:12px !important;
        font-weight:850 !important;
        line-height:1.1 !important;
        letter-spacing:-.015em !important;
        text-transform:none !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-user{
        display:contents !important;
        margin:0 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-avatar{
        grid-column:1 !important;
        grid-row:1 / 3 !important;
        width:34px !important;
        height:34px !important;
        font-size:10px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-user > span:last-child{
        grid-column:2 !important;
        grid-row:2 !important;
        min-width:0 !important;
        display:flex !important;
        align-items:baseline !important;
        gap:5px !important;
        white-space:nowrap !important;
        overflow:hidden !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-user strong{
        flex:0 0 auto !important;
        color:var(--ink) !important;
        font-size:10.5px !important;
        font-weight:750 !important;
        line-height:1.2 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-user small{
        min-width:0 !important;
        margin:0 !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        color:var(--muted) !important;
        font-size:9px !important;
        line-height:1.2 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-utility-symbol{
        width:26px !important;
        height:26px !important;
        font-size:21px !important;
        font-weight:300 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-links{
        padding:4px 0 8px !important;
        column-gap:14px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-links a{
        min-height:40px !important;
    }

    /* Work With Us is a normal accordion row, not a floating subsection. */
    #mobileDrawer.em-mobile-v32 .em-mobile-secondary{
        margin-top:0 !important;
        padding-top:0 !important;
        border-top:0 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-toggle{
        min-height:54px !important;
        grid-template-columns:minmax(0,1fr) 26px !important;
        gap:10px !important;
        padding:0 !important;
        border-bottom:1px solid var(--line) !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-toggle-title{
        color:var(--navy) !important;
        font-size:11.5px !important;
        font-weight:800 !important;
        line-height:1.2 !important;
        letter-spacing:-.01em !important;
        text-transform:none !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-links{
        padding:4px 0 8px !important;
        column-gap:14px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-links a{
        min-height:40px !important;
    }

    /* Follow Us is the drawer footer: one label, one compact icon row. */
    #mobileDrawer.em-mobile-v32 .em-mobile-social{
        margin-top:0 !important;
        padding:16px 0 4px !important;
        border-top:0 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social .em-mobile-label{
        margin:0 0 8px !important;
        color:var(--muted) !important;
        font-size:7.75px !important;
        font-weight:900 !important;
        line-height:1 !important;
        letter-spacing:.14em !important;
        text-transform:uppercase !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links{
        gap:10px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a{
        width:30px !important;
        height:30px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links svg{
        width:17px !important;
        height:17px !important;
        stroke-width:1.35 !important;
    }
}


/* =========================================================
   v5.0.6 — MOBILE LOWER NAV HIERARCHY FIX
   My Coast + Work With Us use the same visual hierarchy as
   Things to Do / Food & Drink / Plan / Read.
========================================================= */
@media(max-width:1080px){

    /* MY COAST: same 82px navigation rhythm as the main drawer rows. */
    #mobileDrawer.em-mobile-v32 .em-mobile-account{
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle{
        width:100% !important;
        min-height:82px !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 21px !important;
        align-items:center !important;
        gap:13px !important;
        padding:0 !important;
        border:0 !important;
        border-bottom:1px solid var(--line) !important;
        background:transparent !important;
        text-align:left !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle-copy{
        min-width:0 !important;
        display:grid !important;
        grid-template-columns:31px minmax(0,1fr) !important;
        grid-template-rows:auto auto !important;
        column-gap:13px !important;
        row-gap:4px !important;
        align-items:center !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-avatar{
        grid-column:1 !important;
        grid-row:1 / 3 !important;
        width:38px !important;
        height:38px !important;
        margin-left:-4px !important;
        font-size:10px !important;
        line-height:1 !important;
        border-width:2px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-label{
        grid-column:2 !important;
        grid-row:1 !important;
        margin:0 !important;
        color:var(--navy) !important;
        font-size:23px !important;
        font-weight:900 !important;
        line-height:1 !important;
        letter-spacing:-.04em !important;
        text-transform:none !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-user{
        display:contents !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-user > span:last-child{
        grid-column:2 !important;
        grid-row:2 !important;
        min-width:0 !important;
        display:flex !important;
        align-items:baseline !important;
        gap:5px !important;
        overflow:hidden !important;
        white-space:nowrap !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-user strong{
        flex:0 0 auto !important;
        color:var(--ink) !important;
        font-size:10.5px !important;
        font-weight:750 !important;
        line-height:1.1 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-toggle .em-mobile-user small{
        min-width:0 !important;
        margin:0 !important;
        color:var(--muted) !important;
        font-size:9px !important;
        line-height:1.1 !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    /* Use the exact same + / − visual weight and right alignment. */
    #mobileDrawer.em-mobile-v32 .em-mobile-utility-symbol{
        position:relative !important;
        width:20px !important;
        height:20px !important;
        display:grid !important;
        place-items:center !important;
        color:var(--navy) !important;
        font-size:21px !important;
        font-weight:300 !important;
        line-height:1 !important;
    }

    /* WORK WITH US: promote it to a full primary-style navigation row. */
    #mobileDrawer.em-mobile-v32 .em-mobile-secondary{
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-toggle{
        width:100% !important;
        min-height:82px !important;
        display:grid !important;
        grid-template-columns:31px minmax(0,1fr) 21px !important;
        align-items:center !important;
        gap:13px !important;
        padding:0 !important;
        border:0 !important;
        border-bottom:1px solid var(--line) !important;
        background:transparent !important;
        text-align:left !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-icon{
        width:28px !important;
        height:28px !important;
        display:grid !important;
        place-items:center !important;
        color:var(--navy) !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-icon svg{
        display:block !important;
        width:100% !important;
        height:100% !important;
        fill:none !important;
        stroke:currentColor !important;
        stroke-width:1.35 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-toggle-title{
        color:var(--navy) !important;
        font-size:23px !important;
        font-weight:900 !important;
        line-height:1 !important;
        letter-spacing:-.04em !important;
        text-transform:none !important;
    }

    /* Expanded content sits beneath the promoted row, not inside a tiny module. */
    #mobileDrawer.em-mobile-v32 .em-mobile-account-links,
    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-links{
        padding:7px 0 10px 44px !important;
        border-bottom:1px solid var(--line) !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-account-links a,
    #mobileDrawer.em-mobile-v32 .em-mobile-secondary-links a{
        min-height:44px !important;
    }

    /* FOLLOW US is the only true footer element. */
    #mobileDrawer.em-mobile-v32 .em-mobile-social{
        margin:0 !important;
        padding:18px 0 8px !important;
        border:0 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social .em-mobile-label{
        margin:0 0 10px !important;
        color:var(--muted) !important;
        font-size:8px !important;
        font-weight:900 !important;
        line-height:1 !important;
        letter-spacing:.15em !important;
        text-transform:uppercase !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links{
        gap:12px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a{
        width:30px !important;
        height:30px !important;
    }
}


/* =========================================================
   v5.0.7 — MOBILE SOCIAL FOOTER
   Make Follow us feel intentional and integrated:
   one compact row, stronger label, contained social controls.
========================================================= */
@media(max-width:1080px){

    #mobileDrawer.em-mobile-v32 .em-mobile-social{
        min-height:70px !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:18px !important;
        border:0 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social .em-mobile-label{
        margin:0 !important;
        color:var(--navy) !important;
        font-size:13px !important;
        font-weight:800 !important;
        line-height:1 !important;
        letter-spacing:-.01em !important;
        text-transform:none !important;
        white-space:nowrap !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links{
        margin-left:auto !important;
        display:flex !important;
        align-items:center !important;
        gap:9px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a{
        width:36px !important;
        height:36px !important;
        display:grid !important;
        place-items:center !important;
        border:1px solid rgba(0,12,50,.16) !important;
        border-radius:50% !important;
        background:transparent !important;
        color:var(--navy) !important;
        transform:none !important;
        transition:
            color .16s ease,
            border-color .16s ease,
            background-color .16s ease !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a:hover,
    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a:focus-visible{
        color:var(--coral) !important;
        border-color:var(--coral) !important;
        background:rgba(255,90,31,.045) !important;
        transform:none !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links svg{
        display:block !important;
        width:17px !important;
        height:17px !important;
        stroke:currentColor !important;
        stroke-width:1.35 !important;
        fill:none !important;
    }
}


/* =========================================================
   v5.0.8 — MOBILE SOCIAL CARDS
   Three distinct network buttons: Instagram, Facebook, Pinterest.
========================================================= */
@media(max-width:1080px){

    #mobileDrawer.em-mobile-v32 .em-mobile-social{
        min-height:auto !important;
        display:block !important;
        padding:18px 0 10px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social .em-mobile-label{
        display:block !important;
        margin:0 0 12px !important;
        color:var(--navy) !important;
        font-size:13px !important;
        font-weight:850 !important;
        line-height:1 !important;
        letter-spacing:-.015em !important;
        text-transform:none !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links{
        width:100% !important;
        margin:0 !important;
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a{
        width:auto !important;
        min-width:0 !important;
        height:54px !important;
        padding:0 9px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:8px !important;
        border:1px solid rgba(0,12,50,.11) !important;
        border-radius:10px !important;
        background:rgba(255,255,255,.34) !important;
        color:var(--navy) !important;
        box-shadow:none !important;
        transform:none !important;
        overflow:hidden !important;
        transition:
            border-color .16s ease,
            background-color .16s ease,
            color .16s ease !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a::before{
        content:"" !important;
        position:absolute !important;
        left:0 !important;
        top:0 !important;
        bottom:0 !important;
        width:3px !important;
        background:var(--coral) !important;
        opacity:.9 !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a{
        position:relative !important;
    }

    #mobileDrawer.em-mobile-v32 .em-social-mark{
        width:27px !important;
        height:27px !important;
        flex:0 0 27px !important;
        display:grid !important;
        place-items:center !important;
        border-radius:8px !important;
        background:rgba(255,90,31,.08) !important;
        color:var(--coral) !important;
    }

    #mobileDrawer.em-mobile-v32 .em-social-mark svg{
        width:16px !important;
        height:16px !important;
        display:block !important;
        overflow:visible !important;
        stroke:currentColor !important;
        stroke-width:1.55 !important;
        fill:none !important;
    }

    #mobileDrawer.em-mobile-v32 [data-social="facebook"] .em-social-mark svg,
    #mobileDrawer.em-mobile-v32 [data-social="pinterest"] .em-social-mark svg{
        fill:currentColor !important;
        stroke:none !important;
    }

    #mobileDrawer.em-mobile-v32 .em-social-name{
        min-width:0 !important;
        display:block !important;
        color:var(--navy) !important;
        font-size:9.5px !important;
        font-weight:800 !important;
        line-height:1 !important;
        letter-spacing:-.01em !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a:hover,
    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a:focus-visible{
        border-color:rgba(255,90,31,.42) !important;
        background:rgba(255,90,31,.055) !important;
        color:var(--coral) !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a[aria-disabled="true"]{
        opacity:.58 !important;
        cursor:default !important;
    }
}

@media(max-width:390px){
    #mobileDrawer.em-mobile-v32 .em-mobile-social-links{
        gap:6px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-mobile-social-links a{
        height:50px !important;
        padding:0 7px !important;
        gap:6px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-social-mark{
        width:25px !important;
        height:25px !important;
        flex-basis:25px !important;
    }

    #mobileDrawer.em-mobile-v32 .em-social-name{
        font-size:8.7px !important;
    }
}