/* Opulence 2026 — Base theme styles
 * Full component library (buttons, badges, cards, masthead, etc.) is built in
 * the design-system foundation step. This file establishes the base reset,
 * typography and layout container so the scaffold renders correctly.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--body);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 .5em;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 30px;
}

/* Accessibility helpers */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    white-space: nowrap;
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 12px 20px;
    background: var(--forest-deep);
    color: var(--cream);
}

.skip-link:focus {
    left: 6px;
    top: 6px;
}

/* ---------------------------------------------------------------------------
 * Utility bar
 * Ported from brief/homepage-prototype.html (.util). Tokens: charcoal -> forest-deep.
 * ------------------------------------------------------------------------- */
.util {
    background: var(--forest-deep);
    color: rgba(246, 242, 232, .72);
    font-size: .76rem;
}
.util .wrap {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 40px;
}
.util a {
    color: inherit;
    text-decoration: none;
    transition: color .25s;
}
.util a:hover { color: var(--gold); }
.util .u-hours {
    margin-left: auto;
    font-size: .66rem;
    letter-spacing: .06em;
}
.util .u-soc { display: flex; gap: 14px; }
.util-sep { opacity: .3; }

/* ---------------------------------------------------------------------------
 * Event bar (campaign countdown)
 * Ported from brief/homepage-prototype.html (.eventbar).
 * HI-033: redesigned as a single integrated announcement band that reads as
 * part of the hero rather than a bolted-on strip. Compact height, a thin gold
 * rule tying it to the content below, and session-dismissible.
 * ------------------------------------------------------------------------- */
.eventbar {
    background: var(--forest);
    color: var(--cream);
    border-bottom: 2px solid var(--gold, #C7A24B);
}
.eventbar[hidden] { display: none; }
.eventbar .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 40px;
    flex-wrap: nowrap;
    text-align: center;
}
.eventbar .eb-label {
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gold-2);
}
.eventbar .eb-count,
.eventbar .eb-until {
    font-size: .72rem;
    letter-spacing: .08em;
    font-weight: 500;
}
.eventbar .eb-count b { font-variant-numeric: tabular-nums; }
.eventbar a {
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: .74rem;
    font-weight: 500;
    color: var(--gold-2);
}
.eventbar .eb-dismiss {
    margin-left: 6px;
    background: none;
    border: none;
    color: var(--cream);
    opacity: .6;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    transition: opacity .2s;
}
.eventbar .eb-dismiss:hover,
.eventbar .eb-dismiss:focus-visible { opacity: 1; }

/* ---------------------------------------------------------------------------
 * Promotional modal (campaign popup)
 * Shares the campaign's active state with the event bar and is dismissed for
 * the browsing session. Only rendered when opulence_campaign_is_active().
 * ------------------------------------------------------------------------- */
.promo-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.promo-modal[hidden] { display: none; }
.promo-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 16, 12, .6);
    animation: promoFade .25s ease;
}
.promo-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: var(--forest);
    color: var(--cream);
    border: 1px solid var(--gold, #C7A24B);
    border-radius: var(--radius);
    padding: 40px 34px 34px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
    animation: promoPop .3s ease;
    overflow: hidden;
}
.promo-modal__image {
    display: block;
    width: calc(100% + 68px);
    height: auto;
    margin: -40px -34px 22px;
    object-fit: cover;
    aspect-ratio: 2 / 1;
    border-bottom: 1px solid var(--gold, #C7A24B);
}
.promo-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--cream);
    opacity: .65;
    padding: 4px 8px;
    min-height: 44px;
    min-width: 44px;
    transition: opacity .2s;
}
.promo-modal__close:hover,
.promo-modal__close:focus-visible { opacity: 1; }
.promo-modal__eyebrow {
    display: inline-block;
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold-2);
    margin-bottom: 10px;
}
.promo-modal__title {
    font-size: 1.5rem;
    margin: 0 0 12px;
    color: var(--cream);
    line-height: 1.2;
}
.promo-modal__intro {
    margin: 0 0 14px;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--cream);
    opacity: .9;
}
.promo-modal__intro strong { color: var(--gold-2); }
.promo-modal__deadline {
    margin: 0 0 18px;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gold-2);
}
.promo-modal__code {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px dashed var(--gold, #C7A24B);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, .15);
}
.promo-modal__code-label {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .8;
}
.promo-modal__code-value {
    font-family: var(--body);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--gold-2);
}
.promo-modal__copy {
    border: 1px solid var(--gold, #C7A24B);
    background: none;
    color: var(--gold-2);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .2s, color .2s;
}
.promo-modal__copy:hover,
.promo-modal__copy.is-copied {
    background: var(--gold, #C7A24B);
    color: var(--forest-deep, #14211a);
}
.promo-modal__cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}
body.promo-modal-open { overflow: hidden; }
@keyframes promoFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes promoPop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .promo-modal__overlay,
    .promo-modal__dialog { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Header / primary navigation
 * Ported from brief/homepage-prototype.html (.header / .nav / .drop-menu).
 * Prototype tokens mapped: --charcoal -> --forest-deep, --charcoal-2 -> --forest.
 * ------------------------------------------------------------------------- */
.header {
    position: sticky;
    top: 0;
    z-index: 150;
    background: rgba(246, 242, 232, .94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-soft);
    transition: transform .3s ease, box-shadow .3s ease;
}
/* HI-064: once the page is scrolled the header condenses so the primary nav
   and the gold Free Survey action stay available without dominating the
   viewport. A subtle shadow lifts it off the content beneath. */
.header.is-condensed {
    box-shadow: 0 6px 24px rgba(20, 38, 27, .10);
}
.header.is-condensed > .wrap {
    height: 60px;
}
.header.is-condensed .custom-logo {
    height: 42px;
}
/* HI-064: suppress the sticky header while the enquiry form is in view so it
   never obscures the field the visitor is completing. Falls back to visible
   if the observer never fires. */
.header.is-hidden {
    transform: translateY(-100%);
}
.header > .wrap {
    display: flex;
    align-items: center;
    height: 78px;
    gap: 30px;
    max-width: none;
    padding: 0 40px;
    justify-content: center;
    transition: height .3s ease;
}

.logo {
    flex: 0 0 auto;
    font-family: var(--display);
    font-size: 1.6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.logo a { text-decoration: none; }
.logo small {
    display: block;
    font-family: var(--body);
    font-size: .5rem;
    letter-spacing: .32em;
    color: var(--muted);
    margin-top: -4px;
    text-align: center;
}
.logo .custom-logo-link { display: inline-block; line-height: 0; }
.logo .custom-logo {
    display: block;
    width: auto;
    max-width: none;
    height: 62px;
}

/* Primary nav */
.nav {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(14px, 1.8vw, 26px);
    margin-left: 14px;
    list-style: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.nav > li { position: relative; flex: 0 0 auto; }
.nav a {
    font-size: .82rem;
    letter-spacing: .02em;
    color: var(--forest);
    padding: 6px 0;
    cursor: pointer;
    position: relative;
    transition: color .25s;
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
}
.nav > li:hover > a,
.nav a:hover { color: var(--gold-text); }
/* HI-059: visible keyboard focus indicator. --forest (#2F5234) on the cream
   header gives ~7:1, comfortably above the 3:1 WCAG 2.2 minimum for UI
   indicators. scroll-margin keeps a focused item clear of the sticky header. */
.nav a:focus-visible,
.nav .sub-menu a:focus-visible {
    outline: 2px solid var(--forest);
    outline-offset: 2px;
    border-radius: 2px;
    scroll-margin-top: 90px;
}

/* Free Home Survey action item (HI-030 / HI-031). Gold-accented so it reads
   as an action rather than another destination, and always sits last. */
.nav > li.nav-survey > a {
    color: var(--forest);
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid var(--gold-deep);
    border-radius: 2px;
    background: var(--gold, #C7A24B);
}
.nav > li.nav-survey:hover > a,
.nav > li.nav-survey > a:hover,
.nav > li.nav-survey > a:focus {
    color: #fff;
    background: var(--gold-deep);
}

/* Dropdowns (WordPress .sub-menu) */
.nav .sub-menu {
    position: absolute;
    top: 100%;
    left: -20px;
    background: var(--cream);
    border: 1px solid var(--line);
    padding: 18px 22px;
    min-width: 240px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: .28s var(--ease);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .12);
    z-index: 60;
}
.nav > li.menu-item-has-children:hover > .sub-menu,
.nav > li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}
/* HI-059: Escape collapses the dropdown; suppress the :focus-within reveal
   briefly while focus returns to the parent so it does not immediately reopen. */
.nav > li.menu-item-has-children.is-collapsing:focus-within > .sub-menu,
.nav > li.menu-item-has-children.is-collapsing:focus-within > .sub-menu .sub-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
}
.nav .sub-menu a {
    font-size: .82rem;
    color: var(--forest);
    padding: 5px 0;
    display: block;
}

/* Third level: rendered inline as an indented list under its parent item,
   rather than a separate absolutely-positioned flyout. Reliable inside the
   mega grid and avoids hover-timing gaps.
   NOTE: it must inherit the closed dropdown's hidden state so it cannot
   receive hover events while the parent menu is collapsed. It is revealed
   together with the top-level dropdown below. */
.nav .sub-menu .sub-menu {
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    margin: 2px 0 6px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    box-shadow: none;
    transition: none;
}
/* Reveal the nested third level only while the top-level parent is open. */
.nav > li.menu-item-has-children:hover > .sub-menu .sub-menu,
.nav > li.menu-item-has-children:focus-within > .sub-menu .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.nav .sub-menu .sub-menu a {
    font-size: .78rem;
    color: var(--muted);
    padding: 3px 0;
}
.nav .sub-menu .sub-menu a:hover {
    color: var(--gold-text);
}
/* The parent of a third level keeps its own label emphasised. */
.nav .sub-menu li.menu-item-has-children > a {
    font-weight: 600;
}

/* Non-clickable group heading inside a dropdown (custom walker: nav-heading) */
.nav .sub-menu .nav-heading-item {
    margin: 0;
    padding: 0;
}
.nav .sub-menu .nav-heading-item + .nav-heading-item,
.nav .sub-menu li + .nav-heading-item {
    margin-top: 12px;
}
.nav .sub-menu h5.nav-heading {
    margin: 0 0 4px;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Mega dropdown: one column per top-level category (parent flagged nav-mega).
   The sub-menu is a flat list of <h5> headings each followed by sibling link
   <li>s. CSS multi-column layout flows the list into columns, and a forced
   column break before every heading keeps each category (and its links)
   together in its own column so the menu stays wide-and-short instead of one
   very tall stack. */
.nav-list > li.nav-mega > .sub-menu {
    display: block;
    column-gap: 34px;
    column-width: 175px;
    width: min(92vw, 940px);
    max-width: 92vw;
}
/* Each top-level heading starts a fresh column; its following links flow
   beneath it within the same column. */
.nav > li.nav-mega > .sub-menu > .nav-heading-item {
    break-before: column;
    -webkit-column-break-before: always;
    break-inside: avoid;
}
/* The first heading must not force an empty leading column. */
.nav > li.nav-mega > .sub-menu > .nav-heading-item:first-child {
    break-before: avoid;
    -webkit-column-break-before: avoid;
}
/* Reset the flat-grid spacing; columns provide the separation now. */
.nav > li.nav-mega > .sub-menu > .nav-heading-item ~ .nav-heading-item {
    margin-top: 0;
}
/* Keep individual links from splitting across a column boundary. */
.nav > li.nav-mega > .sub-menu > li {
    break-inside: avoid;
}
/* Nested layout: a heading that owns its own third-level list is a whole
   group, so let each group occupy a single column instead of spanning. */
.nav > li.nav-mega > .sub-menu > .nav-heading-item:has(> .sub-menu) {
    margin-top: 0;
}
.nav > li.nav-mega > .sub-menu > .nav-heading-item:has(> .sub-menu) .sub-menu {
    border-left: 0;
    padding-left: 0;
}

/* Nested-category mega layout: the "Products" dropdown is a real nested menu
   (each direct child is a category li.menu-item-has-children that owns a
   third-level .sub-menu). Flow those category groups into balanced columns and
   keep each group intact so the menu is wide-and-short rather than one very
   tall stack. */
.nav-list > li.nav-mega > .sub-menu > li.menu-item-has-children {
    position: relative;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 6px;
    display: inline-block;
    width: 100%;
}
/* The category's own link acts as the column heading. */
.nav-list > li.nav-mega > .sub-menu > li.menu-item-has-children > a {
    display: block;
    padding: 6px 26px 6px 0;
    margin-bottom: 0;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}
.nav-list > li.nav-mega > .sub-menu > li.menu-item-has-children > a:hover {
    color: var(--gold-text);
}
/* Chevron accordion toggle injected next to each category heading. */
.nav-list > li.nav-mega .mega-acc__toggle {
    position: absolute;
    top: 2px;
    right: 0;
    width: 22px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    transition: color .2s var(--ease);
}
.nav-list > li.nav-mega .mega-acc__toggle:hover {
    color: var(--gold-text);
}
.nav-list > li.nav-mega .mega-acc__toggle svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s var(--ease);
}
.nav-list > li.nav-mega li.menu-item-has-children.is-open > .mega-acc__toggle svg {
    transform: rotate(180deg);
}
/* Third-level list inside each mega column: collapsed by default (accordion). */
.nav-list > li.nav-mega > .sub-menu > li.menu-item-has-children > .sub-menu {
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    border-left: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s var(--ease);
}
.nav-list > li.nav-mega > .sub-menu > li.menu-item-has-children.is-open > .sub-menu {
    max-height: 640px;
}
.nav-list > li.nav-mega > .sub-menu > li.menu-item-has-children > .sub-menu a {
    font-size: .8rem;
    color: var(--forest);
    padding: 3px 20px 3px 0;
}
.nav-list > li.nav-mega > .sub-menu > li.menu-item-has-children > .sub-menu a:hover {
    color: var(--gold-text);
    background: var(--cream-2);
}

/* Header actions */
.header-cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--forest-deep);
    display: flex;
    padding: 6px;
    position: relative;
    text-decoration: none;
}
.icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}
.header-cart__count {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--burgundy);
    color: var(--cream);
    font-size: .58rem;
    line-height: 16px;
    text-align: center;
    font-weight: 500;
}
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
}
.burger span {
    width: 24px;
    height: 2px;
    background: var(--forest-deep);
    transition: .3s;
}

/* ---------------------------------------------------------------------------
 * Mobile menu
 * ------------------------------------------------------------------------- */
.mobile-menu { display: none; }
.mm-close {
    position: absolute;
    top: 22px;
    right: 26px;
    background: none;
    border: none;
    color: var(--cream);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}
.mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
body.menu-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
 * Footer
 * Ported from brief/homepage-prototype.html (.footer / .footer-grid).
 * ------------------------------------------------------------------------- */
.footer {
    background: #16281D;
    color: rgba(246, 242, 232, .65);
    padding: 70px 0 34px;
    font-size: .86rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 44px;
}
.footer h4 {
    font-family: var(--body);
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
    font-weight: 500;
}
.footer a {
    display: block;
    color: rgba(246, 242, 232, .6);
    margin-bottom: 9px;
    transition: color .25s;
    text-decoration: none;
}
.footer a:hover { color: var(--gold); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col--sister li { margin-bottom: 14px; }
.footer-col--sister a { margin-bottom: 2px; }
.footer-col__desc {
    display: block;
    font-size: .72rem;
    line-height: 1.5;
    color: rgba(246, 242, 232, .4);
    font-weight: 300;
}
.footer-logo {
    font-family: var(--display);
    font-size: 1.55rem;
    letter-spacing: .14em;
    color: var(--cream);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.footer-seo {
    font-size: .82rem;
    color: rgba(246, 242, 232, .45);
    max-width: 44ch;
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 18px;
}
.footer-badges {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Accreditation logos (HI-043) */
.accreditations {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.accreditation {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}
.accreditation__logo {
    display: block;
    width: auto;
    object-fit: contain;
}
.accreditation__id {
    font-family: var(--body);
    font-size: .6rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}
/* Compact first-screen row */
.accreditations--compact {
    gap: 26px;
    justify-content: center;
    padding: 22px 20px 4px;
}
.accreditations--compact .accreditation__logo--hetas { height: 44px; }
.accreditations--compact .accreditation__logo--rtb { height: 52px; }
/* Fuller footer treatment on the dark footer background */
.accreditations--full {
    gap: 16px;
}
.accreditations--full .accreditation {
    background: var(--cream);
    border-radius: 4px;
    padding: 12px 14px;
}
.accreditations--full .accreditation__logo--hetas { height: 48px; }
.accreditations--full .accreditation__logo--rtb { height: 60px; }
.accreditations--full .accreditation__id { color: #6B6459; }
.footer-legal {
    border-top: 1px solid rgba(246, 242, 232, .12);
    padding-top: 22px;
    font-size: .64rem;
    letter-spacing: .05em;
    color: rgba(246, 242, 232, .4);
    line-height: 1.9;
}
.footer-legal .fl-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-legal .fl-row--statutory {
    margin-top: 8px;
    opacity: .82;
}

/* Footer contact block (HI-006) */
.footer-contact {
    font-style: normal;
    font-size: .82rem;
    line-height: 1.7;
    color: rgba(246, 242, 232, .55);
    margin-bottom: 16px;
}
.footer-contact__line { display: block; margin-bottom: 6px; }
.footer-contact__link {
    display: block;
    color: rgba(246, 242, 232, .7);
    text-decoration: none;
    margin-bottom: 2px;
    transition: color .25s;
}
.footer-contact__link:hover,
.footer-contact__link:focus-visible { color: var(--gold); }
.footer-hours {
    font-size: .8rem;
    line-height: 1.7;
    color: rgba(246, 242, 232, .5);
    margin-bottom: 16px;
}
.footer-hours span { display: block; }
.footer-hours__label {
    color: var(--gold);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .6rem;
    margin-bottom: 4px;
}
.footer-social {
    display: flex;
    gap: 18px;
    margin-bottom: 18px;
}
.footer-social a {
    color: rgba(246, 242, 232, .7);
    text-decoration: none;
    font-size: .82rem;
    transition: color .25s;
}
.footer-social a:hover,
.footer-social a:focus-visible { color: var(--gold); }

/* ---------------------------------------------------------------------------
 * Responsive chrome
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .nav { display: none; }
    .header-survey { display: none; }
    .burger { display: flex; }

    .header > .wrap { padding: 0 24px; }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        background: var(--forest-deep);
        z-index: 400;
        padding: 80px 30px;
        gap: 4px;
        overflow-y: auto;
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease;
    }
    .mobile-menu.open {
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-menu .mobile-menu__list {
        display: flex;
        flex-direction: column;
        transform: translateY(-16px);
        transition: transform .32s var(--ease, ease);
    }
    .mobile-menu.open .mobile-menu__list { transform: translateY(0); }
    .mobile-menu a {
        display: block;
        width: 100%;
        color: var(--cream);
        font-family: var(--display);
        font-size: 1.5rem;
        padding: 12px 0;
        border-bottom: 1px solid rgba(246, 242, 232, .1);
        text-decoration: none;
    }

    /* HI-032: accordion tree. A parent row is a flex line whose link stays
       independently tappable, with a separate expand toggle to its right.
       Flex-wrap keeps the link + toggle on one line while the sub-menu wraps
       onto its own full-width line, so the toggle only spans the link height. */
    .mobile-menu__tree .menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .mobile-menu__tree .menu-item-has-children > a {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    .mm-sub-toggle {
        flex: 0 0 auto;
        width: 48px;
        min-height: 48px; /* 44px+ touch target */
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--cream);
        cursor: pointer;
        padding: 0;
    }
    .mm-sub-toggle svg { width: 18px; height: 18px; transition: transform .25s ease; }
    .mm-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
    .mm-sub-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

    /* Collapsed by default; expanded when the parent row carries .is-open. */
    .mobile-menu__tree .sub-menu {
        flex: 0 0 100%;
        list-style: none;
        margin: 0;
        padding: 0 0 0 16px;
        display: none;
    }
    .mobile-menu__tree .menu-item.is-open > .sub-menu { display: block; }
    .mobile-menu__tree .sub-menu a {
        font-family: var(--body);
        font-size: 1.05rem;
        opacity: .9;
    }
    .mobile-menu__tree .sub-menu .sub-menu a { font-size: .98rem; opacity: .8; }

    /* Free Home Survey remains the visually distinct action item on mobile. */
    .mobile-menu__survey .nav-survey a {
        color: var(--forest);
        background: var(--gold, #C7A24B);
        font-family: var(--display);
        text-align: center;
        border-radius: 3px;
        border-bottom: none;
        margin-bottom: 10px;
        padding: 10px;
    }

    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .footer-grid { grid-template-columns: 1fr; }
    .util .u-hours,
    .util .u-links { display: none; }
    .util .u-soc { margin-left: auto; }

    /* Footer accordions: collapse Shop / Services / Sister Sites into
       tap-to-open panels on mobile to cut page height. The heading acts as the
       toggle row with a chevron; the list is hidden until .is-open. */
    .footer-col[data-accordion] {
        border-top: 1px solid rgba(246, 242, 232, .12);
        padding: 4px 0;
    }
    .footer-col[data-accordion] h4 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        margin-bottom: 0;
        padding: 14px 2px;
        user-select: none;
    }
    .footer-col[data-accordion] h4::after {
        content: "";
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--gold);
        border-bottom: 2px solid var(--gold);
        transform: rotate(45deg);
        transition: transform .3s var(--ease);
        margin-right: 4px;
        flex: 0 0 auto;
    }
    .footer-col[data-accordion].is-open h4::after {
        transform: rotate(-135deg);
    }
    .footer-col[data-accordion] > ul,
    .footer-col[data-accordion] > .menu,
    .footer-col[data-accordion] ul.menu {
        display: none;
        padding-bottom: 10px;
    }
    .footer-col[data-accordion].is-open > ul,
    .footer-col[data-accordion].is-open > .menu,
    .footer-col[data-accordion].is-open ul.menu {
        display: block;
    }

    /* HI-033: keep the announcement band tight on mobile. Drop the countdown
       and the label, leaving a single quiet line + closing date + link so the
       hero headline reaches the first screen sooner. */
    .eventbar .wrap { gap: 10px; height: 36px; }
    .eventbar .eb-label,
    .eventbar .eb-count { display: none; }
    .eventbar .eb-until,
    .eventbar a { font-size: .68rem; }
}

.site-main {
    padding: 48px 0;
}

/* HI-039: sticky mobile action bar */
.mobile-cta-bar { display: none; }
@media (max-width: 860px) {
    .mobile-cta-bar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        position: fixed;
        left: 0; right: 0;
        /* Reveal by animating `bottom` rather than `transform`: a fixed
         * element with a non-none transform is anchored to the layout
         * viewport on many mobile browsers, so it drifts by the collapsing
         * URL-bar height and leaves a gap once the toolbar retracts. */
        bottom: -160px;
        z-index: 900;
        background: var(--ink, #1c1a17);
        padding-bottom: env(safe-area-inset-bottom);
        transition: bottom .25s ease;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
    }
    .mobile-cta-bar.is-visible { bottom: 0; }
    .mobile-cta-bar__item {
        display: flex; align-items: center; justify-content: center;
        min-height: 60px; text-decoration: none;
        color: #f6f2e8; font-size: .82rem; letter-spacing: .03em;
        border-left: 1px solid rgba(255, 255, 255, .08);
    }
    .mobile-cta-bar__item:first-child { border-left: 0; }
    .mobile-cta-bar__survey { background: var(--gold, #b4762a); color: #1c1a17; font-weight: 600; }
    .mobile-cta-bar__item:hover,
    .mobile-cta-bar__item:active { background: var(--gold, #b4762a); color: #1c1a17; }
    .mobile-cta-bar__item:focus { outline: 2px solid var(--gold, #b4762a); outline-offset: -2px; }
    /* Keep page content clear of the bar when it is shown */
    body { scroll-padding-bottom: 60px; }

    .header > .wrap {
        gap: 10px;
    }
}

/* ===== Search popup ===== */
.search-popup {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: flex-start; justify-content: center;
    opacity: 0; transition: opacity .28s ease; pointer-events: none;
}
.search-popup.open { opacity: 1; pointer-events: auto; }
.search-popup__overlay {
    position: absolute; inset: 0; background: rgba(20, 18, 15, .58);
    backdrop-filter: blur(2px);
}
.search-popup__panel {
    position: relative; width: min(760px, 92vw); margin-top: 14vh;
    background: var(--forest-deep); color: var(--cream);
    padding: 44px 48px 48px; border-top: 3px solid var(--gold);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
    transform: translateY(-16px); transition: transform .32s var(--ease, ease);
}
.search-popup.open .search-popup__panel { transform: translateY(0); }
.search-popup__close {
    position: absolute; top: 14px; right: 18px; background: none; border: 0;
    color: rgba(246, 242, 232, .7); font-size: 1.9rem; line-height: 1; cursor: pointer;
    transition: color .2s ease;
}
.search-popup__close:hover { color: var(--gold-2); }
.search-popup__eyebrow {
    display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold-2); margin-bottom: 14px;
}
.search-popup__form { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid rgba(246, 242, 232, .28); }
.search-popup__input {
    flex: 1; background: none; border: 0; color: var(--cream);
    font-family: var(--display); font-size: clamp(1.3rem, 3vw, 1.9rem);
    padding: 10px 4px; min-width: 0;
}
.search-popup__input::placeholder { color: rgba(246, 242, 232, .5); }
.search-popup__input:focus { outline: none; }
.search-popup__submit {
    display: inline-flex; align-items: center; gap: 8px; background: none; border: 0;
    color: var(--gold-2); cursor: pointer; font-size: .74rem; letter-spacing: .1em;
    text-transform: uppercase; padding: 0 6px; transition: color .2s ease;
}
.search-popup__submit:hover { color: var(--cream); }
.search-popup__submit svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
body.search-open { overflow: hidden; }

@media (max-width: 560px) {
    .search-popup__panel { margin-top: 0; min-height: 100%; width: 100%; padding: 70px 24px 40px; }
    .search-popup__submit span { display: none; }
}