/* Primary-navigation dropdowns, shared by the home page and the service pages.
   Loaded before each page's own stylesheet so page rules can still override. */

[hidden] { display: none !important; }

.nav-item { position: relative; }

.nav-trigger, .nav-links > a { white-space: nowrap; }
.nav-trigger { align-items: center; background: none; border: 0; color: inherit; display: inline-flex; font-family: inherit; font-size: 13px; font-weight: 700; gap: 7px; min-height: 44px; padding: 0; }
.nav-trigger:hover, .nav-item.is-open > .nav-trigger { color: var(--coral); }
.nav-caret { border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; display: block; height: 6px; margin-top: -3px; transform: rotate(45deg); transition: transform .2s ease; width: 6px; }
.nav-item.is-open .nav-caret { margin-top: 2px; transform: rotate(-135deg); }

/* The wrapper's padding bridges the gap between trigger and card, so moving
   the pointer onto the menu never leaves the item and closes it. */
.nav-menu { left: 0; padding-top: 12px; position: absolute; top: 100%; width: max-content; z-index: 60; }
/* Anchoring the wide panel to its own trigger runs it off one edge or the
   other. Span it from the right of the nav row instead, which is inside
   the shell at every desktop width. */
.nav-menu-wide { left: auto; right: 0; }
.nav-menu-inner { background: var(--white, #faf9f5); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 26px 60px rgba(6, 27, 24, .16); max-width: calc(100vw - 32px); padding: 22px; }
.nav-menu-list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-menu-list a { align-items: center; border-radius: 11px; display: flex; min-height: 44px; padding: 9px 12px; transition: background .18s ease; }
.nav-menu-list a:hover { background: var(--paper-2, #ecebe2); }
.nav-menu-list b { font-size: 13px; font-weight: 700; letter-spacing: -.03em; }
.nav-menu-all { align-items: center; border-top: 1px solid var(--line); color: var(--coral); display: flex; font-size: 12px; font-weight: 700; gap: 9px; margin-top: 12px; min-height: 44px; padding: 0 12px; }
.nav-menu-all:hover { gap: 13px; }

.nav-menu-cols { display: grid; gap: 30px; grid-template-columns: 1fr 1fr; }
.nav-col-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; font: 500 9px/1 var(--mono); gap: 10px; justify-content: space-between; letter-spacing: .1em; margin-bottom: 8px; min-height: 40px; text-transform: uppercase; }
.nav-col-head:hover { color: var(--coral); }

@media (min-width: 1101px) {
  .nav-links { position: relative; }
  .nav-item-wide { position: static; }
  .nav-menu { animation: nav-menu-in .18s ease; }
  @keyframes nav-menu-in { from { opacity: 0; transform: translateY(-6px); } }
}

/* Touch layout: the panels expand inline inside the stacked menu. With two
   dropdowns open the nav can outgrow the screen, so it scrolls. */
@media (max-width: 1100px) {
  .nav-links { max-height: calc(100svh - 80px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-trigger { font-size: 15px; justify-content: space-between; padding: 17px 4px; width: 100%; }
  .nav-menu { animation: none; padding: 0 0 14px 10px; position: static; width: auto; }
  .nav-menu-inner { background: none; border: 0; border-radius: 0; box-shadow: none; max-width: none; padding: 0; }
  .nav-menu-cols { gap: 16px; grid-template-columns: 1fr; }
  .nav-menu-list a { padding: 10px 8px; }
  .nav-col-head { min-height: 44px; }
  .nav-menu-all { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu { animation: none; }
  .nav-caret { transition: none; }
}

/* ---- Page transitions ---------------------------------------------------
   Moving between pages was a hard cut, which read as a repaint rather than a
   new page. A cross-document view transition fades the content in with a
   short rise. Both the outgoing and incoming document must opt in, and
   nav.css is the one stylesheet every page loads.

   The header carries its own transition name so it stays anchored while the
   content moves — the chrome holds still, the page changes under it. Browsers without support (Firefox today) simply navigate
   as before. */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }

::view-transition-old(root) { animation: page-leave .16s ease both; }
::view-transition-new(root) { animation: page-enter .34s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes page-leave { to { opacity: 0; } }
@keyframes page-enter { from { opacity: 0; transform: translateY(14px); } }

/* Reduced motion keeps a plain cross-fade and drops the travel. Zeroing the
   animation outright can leave the old snapshot painted, so the duration is
   shortened rather than removed. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation: page-enter-still .18s ease both; }
  ::view-transition-old(root) { animation: page-leave .12s ease both; }
  ::view-transition-old(site-header), ::view-transition-new(site-header) { animation-duration: .12s; }
  @keyframes page-enter-still { from { opacity: 0; } }
}

/* Wide Commercial & Residential panel opens directly under its own trigger
   (centred on it), not pinned to the right edge of the nav. */
@media (min-width: 1101px) {
  .nav-item-wide { position: relative; }
  .nav-menu-wide { left: 50%; right: auto; translate: -50% 0; }
}

/* One combined Services menu: services list + who we work with (2026-11-04) */
@media (min-width: 1101px) { .nav-menu-services { grid-template-columns: 1.1fr 1fr; } }
.nav-menu-spaces a { align-items: flex-start; flex-direction: column; gap: 3px; }
.nav-menu-spaces small { color: var(--muted, #58706c); font-size: 12px; font-weight: 500; line-height: 1.4; }
.nav-menu-spaces li + li { margin-top: 4px; }
/* Services menu: Commercial and Residential side by side, services under each */
.nav-menu-by-space .nav-menu-all-wide { grid-column: 1 / -1; margin-top: 4px; }
.nav-menu-by-space .nav-col-head { font: 800 14px/1 var(--display, "Manrope", sans-serif); letter-spacing: .06em; min-height: 46px; }