/**
 * 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;
    --blue:#0064F9;
    --amber:#FFB300;
    --fuchsia:#ED0F81;
    --white:#FFFFFF;
    --warm:#FFFDF7;

    --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(0,100,249,.055);

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

    --max:1580px;
    --masthead-h:118px;
    --now-h:42px;
    --header-h:160px;
    --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(0,100,249,.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,253,247,.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:#e8eef5;
}

.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(0,100,249,0),
            rgba(0,100,249,.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 remains Blue; 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:#0064F9 !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:#E8EEF5 !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;
}