/* menu.css — the desktop site header + mega menu (partials.html "sitehead",
   model server/menu.go, behavior assets/js/menu.js). Lane ace-menu-desktop-1103,
   Ace board S07 items 93-95.

   ── SHARED BREAKPOINT (desktop lane ↔ phone lane ace-menu-phone-1103) ──────
   Both lanes MUST use exactly these two queries. They are complements: every
   viewport matches exactly one. (Written as @custom-media for reading; that
   at-rule is not shipped in any browser yet, so the queries are spelled out
   in full below and in assets/css/menu-mobile.css.)

     @custom-media --mobile-nav  (max-width: 1179px), (orientation: portrait) and (max-width: 1366px);
     @custom-media --desktop-nav (min-width: 1367px), (min-width: 1180px) and (orientation: landscape);

   --mobile-nav  = phones + portrait tablets: the phone lane's bottom bar and
                   sheet; this file hides .mh-nav and .mh-tools.
   --desktop-nav = desktop + landscape tablets (iPad Air 1180x820, iPad Pro
                   1366x1024): this mega menu. Hover intent only for a fine
                   pointer (menu.js); a tablet opens panels by tap.

   Rules of the house that this file keeps:
   · every color is a site.css token (light-dark() pairs) — no theme rules here;
   · no inline styles anywhere (style-src 'self');
   · all motion is opted in under prefers-reduced-motion: no-preference;
   · the header box has a FIXED height: nothing below it ever moves when it
     shrinks, when the theme toggle un-hides, or when search-ui.js runs. */

/* The page growing taller than the viewport adds a scrollbar mid-load; without a
   reserved gutter that narrows the viewport and slides the whole bar sideways
   (measured 15px at 1180 between first paint and settled). */
html { scrollbar-gutter: stable; }

.site-head.mh {
  --mh-h: 76px;        /* the header's box: constant, so no layout shift */
  --mh-h-sm: 60px;     /* the painted bar once scrolled */
  --mh-pad: clamp(16px, 2.4vw, 32px);
  --mh-max: 1440px;
}

/* ── phones + portrait tablets: the phone lane owns navigation ─────────── */
@media (max-width: 1179px), (orientation: portrait) and (max-width: 1366px) {
  .site-head.mh .mh-nav, .site-head.mh .mh-tools { display: none; }
  .site-head.mh .mh-bg { display: none; }
  .site-head.mh .mh-bar { display: flex; align-items: center; padding: 6px var(--pad); }
  .site-head.mh .mh-logo img { height: 40px; }
}

/* ── desktop + landscape tablets ───────────────────────────────────────── */
@media (min-width: 1367px), (min-width: 1180px) and (orientation: landscape) {
  /* The sticky box is transparent and click-through; the painted bar is
     .mh-bg, which is what shrinks. */
  .site-head.mh { height: var(--mh-h); background: none; border: 0; backdrop-filter: none; pointer-events: none; }
  .site-head.mh .mh-bg { position: absolute; inset: 0 0 auto; height: var(--mh-h); anchor-name: --mh;
    background: var(--head-bg); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
  .site-head.mh .mh-bar { position: relative; display: flex; align-items: center; gap: 20px; height: var(--mh-h);
    max-width: var(--mh-max); margin: 0 auto; padding: 0 var(--mh-pad); }
  .site-head.mh .mh-bar > * { pointer-events: auto; }
  /* Streaming parse: under a slow CPU the parser can yield mid-bar and paint
     "Products" alone (measured at 6x). The bar stays invisible until its LAST
     child, Free Quote, exists, so the first frame that shows it is the final one. */
  .site-head.mh .mh-bar:not(:has(.mh-quote)) { visibility: hidden; }
  .site-head.mh .mh-logo { flex: none; transform-origin: left center; }
  .site-head.mh .mh-logo img { height: 48px; width: auto; }

  /* top items: a link to the hub + a separate chevron button */
  .mh-nav { flex: 1 1 auto; min-width: 0; }
  .mh-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .mh-item { display: flex; align-items: center; margin: 0; border-radius: 8px; }
  .mh-top { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px 0 10px;
    color: var(--fg); font-weight: 500; font-size: 15px; white-space: nowrap; }
  .mh-top:hover, .mh-top[data-section=current], .mh-top[aria-current=page],
  .mh-item:has(.mh-open[aria-expanded=true]) .mh-top { color: var(--gold-hi); text-decoration: none; }
  .mh-open { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-height: 44px;
    margin: 0; padding: 0 6px 0 2px; border: 0; background: none; color: var(--fg-muted); cursor: pointer; border-radius: 6px; }
  .mh-open:hover, .mh-open[aria-expanded=true] { color: var(--gold-hi); }
  .mh-open .mi { --mi-size: 14px; rotate: 90deg; transition: rotate .18s ease; } /* the sprite chevron points right */
  .mh-open[aria-expanded=true] .mi { rotate: -90deg; }
  .mh-top:focus-visible, .mh-open:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 6px; }
  .mh-top[data-section=current] { box-shadow: inset 0 -2px 0 var(--gold); }

  /* tools: search · theme · Call (number) · Free Quote */
  .mh-tools { display: flex; align-items: center; gap: 10px; flex: none; }
  .mh-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--fg); font-weight: 600; font-size: 15px;
    white-space: nowrap; font-variant-numeric: tabular-nums; }
  .mh-call:hover { border-color: var(--gold); color: var(--gold-hi); text-decoration: none; }
  .mh-call:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .mh-call .mi { --mi-size: 18px; --mi-color: var(--gold); }
  .mh-quote { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
  .mh-quote:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  /* The theme toggle is [hidden] until sitenav.js wires it: keep its slot so
     un-hiding it never shifts the buttons beside it. */
  .site-head.mh .themetoggle[hidden] { display: inline-flex; visibility: hidden; }

  /* ── search: folded to its icon FROM THE FIRST PAINT (Q11) ──────────────
     The fold used to be applied by search-ui.js adding .srch-compact after
     first paint, so the full-width box painted and then collapsed. These
     rules key on the element, not on that class, so the server HTML already
     paints the final layout; .srch-compact (still added by the script)
     changes nothing visible. Selectors carry .site-head.mh + .srch-head so
     they outrank search.css's .srch-compact rules in both states. */
  .site-head.mh search.srch-head { position: relative; display: block; flex: none; width: 46px; min-width: 0; }
  .site-head.mh search.srch-head form { width: 46px; height: 46px; min-height: 46px; border-color: var(--border-strong); }
  .site-head.mh search.srch-head:not(.is-open) form :is(input, .srch-mic, label) {
    position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
  .site-head.mh search.srch-head:not(.is-open) form button[type="submit"] { width: 44px; color: var(--fg); }
  /* Open: the field grows LEFT over the nav, so Call and Free Quote stay visible (Q4). */
  .site-head.mh search.srch-head.is-open form { position: absolute; z-index: 62; top: 50%; right: 0; left: auto;
    transform: translateY(-50%); width: min(36rem, 46vw); height: 46px; background: var(--surface); box-shadow: var(--shadow-pop); }
  .site-head.mh search.srch-head .srch-pop, .site-head.mh search.srch-head .srch-voice-status {
    left: auto; right: 0; top: calc(50% + 30px); width: min(36rem, 46vw); }
}

/* No script: the folded icon could not open, so show the real form as a
   full-width row under the bar, and lay every tab pane out in flow. This is
   the ONLY place the full-width form exists. */
@media (scripting: none) and (min-width: 1180px) {
  .site-head.mh { height: auto; }
  .site-head.mh .mh-bg { height: 100%; }
  .site-head.mh .mh-bar { flex-wrap: wrap; height: auto; min-height: var(--mh-h); row-gap: 6px; padding-block: 8px; }
  .site-head.mh search.srch-head { order: 10; flex: 1 0 100%; width: auto; }
  .site-head.mh search.srch-head form { width: auto; }
  .site-head.mh search.srch-head:not(.is-open) form :is(input, label) {
    position: static; width: auto; height: 44px; padding: 0 4px 0 12px; opacity: 1; pointer-events: auto; overflow: visible; clip-path: none; flex: 1 1 auto; }
  .site-head.mh .themetoggle[hidden] { display: none; }
}
@media (scripting: none) {
  .mm-tabs { display: none; }
  .mm-pane[hidden] { display: block; }
  .mm-finder-q, .mm-finder-n { display: none; }
}

/* The panels sit after the bar inside the click-through header box. */
.site-head.mh .mm-panels { display: contents; pointer-events: auto; }

/* ── the mega panel ─────────────────────────────────────────────────────
   popover=auto: top layer, light dismiss, Esc. Full width, under the painted
   bar (anchored to .mh-bg where anchor positioning exists, so it follows the
   shrink; a fixed 76px top otherwise). */
.mm { position: fixed; inset: auto 0 auto 0; top: 76px; width: 100%; max-width: none; height: auto;
  max-height: calc(100dvh - 88px); margin: 0; padding: 0; overflow: auto; overscroll-behavior: contain;
  border: 0; border-block: 1px solid var(--border); background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow-pop); }
@supports (top: anchor(bottom)) {
  .mm { position-anchor: --mh; top: anchor(bottom, 76px); }
}
.mm-in { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr) 19rem; grid-template-areas: "tabs body side" "foot foot foot";
  gap: 20px 32px; max-width: var(--mh-max, 1440px); margin: 0 auto; padding: 22px var(--mh-pad, 32px) 18px; }
.mm-in:not(:has(> .mm-tabs)) { grid-template-columns: minmax(0, 1fr) 19rem; grid-template-areas: "body side" "foot foot"; }
@media (max-width: 1279px) { .mm-in { grid-template-columns: 13rem minmax(0, 1fr) 16rem; gap: 18px 24px; } }

/* left tabs */
.mm-tabs { grid-area: tabs; display: flex; flex-direction: column; gap: 2px; padding-right: 12px; border-right: 1px solid var(--border); }
.mm-tab { display: flex; align-items: center; gap: 10px; min-height: 44px; width: 100%; margin: 0; padding: 8px 12px;
  border: 0; border-radius: 8px; background: none; color: var(--fg); font: inherit; font-size: 15px; font-weight: 500;
  text-align: left; cursor: pointer; position: relative; text-decoration: none; }
.mm-tab:hover { background: var(--surface-hover); }
.mm-tab[data-active] { background: var(--tint-gold); color: var(--gold-hi); }
.mm-tab[data-active]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--gold); }
.mm-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.mm-hub { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; padding: 8px 12px;
  color: var(--gold); font-size: 14px; font-weight: 600; }
.mm-hub .mi { --mi-size: 16px; }

/* body */
.mm-body { grid-area: body; min-width: 0; }
.mm-pane[hidden] { display: none; }
.mm-pane-h { margin: 0 0 4px; font-size: 1.05rem; font-weight: 650; color: var(--fg); }
.mm-in:has(> .mm-tabs) .mm-pane-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mm-blurb { margin: 0 0 14px; color: var(--fg-muted); font-size: .92rem; }
.mm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 8px 24px; }
.mm-h { margin: 0 0 4px; padding: 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-subtle); }
.mm-h a { color: inherit; }
.mm-h a:hover { color: var(--gold-hi); }
.mm-links { list-style: none; margin: 0 0 8px; padding: 0; }
.mm-links li { margin: 0; break-inside: avoid; }
/* a lone column (By material, a single services list) flows into two */
.mm-col:only-child .mm-links { columns: 2 12rem; column-gap: 24px; }
.mm-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 7px; color: var(--fg); font-size: 15px; line-height: 1.25; }
.mm-link:hover, .mm-link:focus-visible { background: var(--surface-hover); color: var(--gold-hi); text-decoration: none; }
.mm-link:focus-visible, .mm-chip:focus-visible, .mm-tile:focus-visible, .mm-more:focus-visible, .mm-hub:focus-visible,
.mm-promo-a:focus-visible, .mm-trust a:focus-visible, .mm-tel:focus-visible, .mm-towns a:focus-visible, .mm-h a:focus-visible {
  outline: 2px solid var(--gold); outline-offset: -2px; }
.mm-link[aria-current=page] { background: var(--tint-gold-strong); }
.mm-l { min-width: 0; overflow-wrap: anywhere; }
.mm-n { margin-left: auto; padding-left: 8px; color: var(--fg-subtle); font-size: .78rem; font-variant-numeric: tabular-nums; }
.mm-ext { margin-left: auto; color: var(--fg-subtle); font-size: .72rem; }
.mm-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; padding: 0 10px; color: var(--gold); font-weight: 600; font-size: 14px; }
.mm-more .mi { --mi-size: 16px; }

/* color chips (filtered search, Q5) — swatches are classes, never style="" */
.mm-chipset { margin: 8px 0 12px; }
.mm-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0 10px; }
.mm-chips li { margin: 0; }
.mm-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 8px;
  border: 1px solid var(--border-strong); border-radius: 999px; color: var(--fg); font-size: 14px; }
.mm-chip:hover { border-color: var(--gold); color: var(--gold-hi); text-decoration: none; }
.mm-chip .mm-n { margin-left: 0; padding-left: 0; }
.mm-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: linear-gradient(135deg, #d9d4ca, #7b746a); }
.mm-chip--white .mm-dot { background: #F6F4EF; }
.mm-chip--cream .mm-dot, .mm-chip--beige .mm-dot { background: #E7DCC6; }
.mm-chip--gray .mm-dot, .mm-chip--grey .mm-dot { background: #9A9894; }
.mm-chip--black .mm-dot { background: #1D1C1A; }
.mm-chip--brown .mm-dot { background: #6E4E35; }
.mm-chip--gold .mm-dot, .mm-chip--yellow .mm-dot { background: #C9A24E; }
.mm-chip--blue .mm-dot { background: #4D6780; }
.mm-chip--green .mm-dot { background: #5D7258; }
.mm-chip--red .mm-dot { background: #8E3B2E; }
.mm-chip--silver .mm-dot { background: linear-gradient(135deg, #EDEDED, #A6A6A6); }

/* tiles: featured slabs, Projects + Videos */
.mm-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 6px 0 8px; padding: 0 10px; }
.mm-tiles li { margin: 0; }
.mm-tile { display: flex; flex-direction: column; gap: 4px; color: var(--fg); border-radius: 8px; }
.mm-tile:hover { text-decoration: none; color: var(--gold-hi); }
.mm-tile-media { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 8px;
  background: var(--surface-sunk); border: 1px solid var(--border); color: var(--gold); }
.mm-tile-media picture, .mm-tile-media img { display: block; width: 100%; height: 100%; }
.mm-tile-media img { object-fit: cover; }
.mm-tile-t { font-size: 14px; font-weight: 600; line-height: 1.25; }
.mm-tile-n { font-size: 12px; color: var(--fg-subtle); }

/* town finder (Q23) */
.mm-finder { margin: 10px 0 4px; padding: 0 10px; }
.mm-finder .mm-h { display: block; padding: 0; margin-bottom: 6px; }
.mm-finder-q { width: min(100%, 22rem); height: 44px; padding: 0 12px; border: 1px solid var(--field-border); border-radius: var(--radius);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 16px; }
.mm-finder-q:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.mm-finder-n { margin: 6px 0; font-size: .8rem; color: var(--fg-subtle); }
.mm-towns { columns: 4 9rem; column-gap: 16px; list-style: none; margin: 0; padding: 0; max-height: 12.5rem; overflow: auto;
  overscroll-behavior: contain; content-visibility: auto; contain-intrinsic-size: auto 12.5rem; }
.mm-towns li { margin: 0; break-inside: avoid; }
.mm-towns li[hidden] { display: none; }
.mm-towns a { display: block; padding: 4px 6px; border-radius: 5px; color: var(--fg-muted); font-size: 14px; }
.mm-towns a:hover { color: var(--gold-hi); background: var(--surface-hover); text-decoration: none; }

/* right: the image stage (menu-media.css / menu_media.go menuStage) + promo */
.mm-side .mm-stage { --mm-ratio: 4 / 3; --mm-radius: 10px; }
.mm-side { grid-area: side; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mm-promo { padding: 16px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); }
.mm-promo--offer { border-color: var(--gold); background: var(--tint-gold); }
.mm-eyebrow { margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); }
.mm-promo-t { margin: 0 0 6px; font-size: 1.1rem; font-weight: 650; line-height: 1.25; }
.mm-promo-b { margin: 0 0 10px; color: var(--fg-muted); font-size: .9rem; line-height: 1.4; }
.mm-promo-a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--gold); font-weight: 600; font-size: 14px; }
.mm-promo-a .mi { --mi-size: 16px; }

/* foot: trust line + Quote / Contact / Call row (Q21, Q24) */
.mm-tiles:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 14rem)); }
.mm-foot { grid-area: foot; position: sticky; bottom: 0; z-index: 1; padding-bottom: 12px; background: var(--surface); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  padding-top: 14px; border-top: 1px solid var(--border); }
.mm-trust { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 0; }
.mm-trust li { margin: 0; }
.mm-trust a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--fg-muted); font-size: 13.5px; }
.mm-trust a:hover { color: var(--gold-hi); text-decoration: none; }
.mm-trust .mi { --mi-size: 16px; --mi-color: var(--gold); }
.mm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mm-acts .btn { min-height: 44px; display: inline-flex; align-items: center; }
.mm-tel { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.mm-tel .mi { --mi-size: 18px; --mi-color: var(--gold); }


/* ── motion (Q7, Q29): all opted in; reduce → instant/plain ─────────────── */
@media (prefers-reduced-motion: no-preference) {
  .mm { opacity: 0; translate: 0 -8px;
    transition: opacity .2s ease, translate .22s ease, overlay .22s allow-discrete, display .22s allow-discrete; }
  .mm:popover-open { opacity: 1; translate: 0 0; }
  @starting-style { .mm:popover-open { opacity: 0; translate: 0 -8px; } }

  .mm-tile-media img { transition: scale .6s ease; }
  .mm-tile:hover .mm-tile-media img, .mm-tile:focus-visible .mm-tile-media img { scale: 1.06; }
  .mm-pane:not([hidden]) { animation: mm-pane .22s ease both; }
}
@keyframes mm-pane { from { opacity: 0; translate: 6px 0; } to { opacity: 1; translate: 0 0; } }

/* ── sticky shrink (Q4): scroll-driven, transforms + the painted bar only ──
   The header BOX stays var(--mh-h) tall; only .mh-bg's height and the bar's
   translate/scale change, so nothing below it moves. Browsers without
   scroll-driven animations get the same end state from menu.js toggling
   .is-scrolled (with a transition) — the only JS in the shrink. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1367px), (prefers-reduced-motion: no-preference) and (min-width: 1180px) and (orientation: landscape) {
  @supports (animation-timeline: scroll()) {
    .site-head.mh .mh-bg { animation: mh-bg linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    .site-head.mh .mh-bar { animation: mh-bar linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    .site-head.mh .mh-logo { animation: mh-logo linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  }
  .site-head.mh.mh-js-shrink .mh-bg { transition: height .2s ease, box-shadow .2s ease; }
  .site-head.mh.mh-js-shrink .mh-bar, .site-head.mh.mh-js-shrink .mh-logo { transition: translate .2s ease, scale .2s ease; }
  .site-head.mh.mh-js-shrink.is-scrolled .mh-bg { height: var(--mh-h-sm); box-shadow: var(--shadow); }
  .site-head.mh.mh-js-shrink.is-scrolled .mh-bar { translate: 0 -8px; }
  .site-head.mh.mh-js-shrink.is-scrolled .mh-logo { scale: .78; }
}
@keyframes mh-bg { to { height: var(--mh-h-sm); box-shadow: var(--shadow); } }
@keyframes mh-bar { to { translate: 0 -8px; } }
@keyframes mh-logo { to { scale: .78; } }

/* icons come from the media lane (assets/css/menu-icons.css); here only the
   "go" arrow, which is the sprite chevron (it points right). */
.mi-go { --mi-size: 15px; } /* the sprite chevron already points right */
.mh-open .mi, .mm-hub .mi, .mm-more .mi, .mm-promo-a .mi { --mi-color: currentColor; }

@media (forced-colors: active) {
  .mm { border: 1px solid CanvasText; }
  .mm-tab[data-active] { outline: 2px solid Highlight; }
  .mi { stroke: CanvasText; }
}