/* ==========================================================================
   Vertical Systems: site menu (site/css/site-menu.css)
   --------------------------------------------------------------------------
   One menu for every width. Load after home.css. Markup lives in
   site/index.html (the bar trigger and <dialog id="site-menu">); behaviour
   lives in site/js/site-menu.js.

   Desktop (861px and up) is three plates side by side:
     index    bone     the five sections set large, a ruler with one orange tick
     list     paper    the active section's links, numbered because they are a list
     preview  olive    a small live drawing and the focused link's detail
   The preview plate appears from 1180px. Between 861 and 1179 the menu is
   the index and the list only.

   Phones (860px and below) get one full-screen sheet: sections as
   accordions, rows of at least 48px, and the booking strip pinned to the
   bottom.

   State classes, all set by site-menu.js:
     .smenu.is-pre        hidden start state, no transitions
     .smenu.is-open       visible, open timings
     .smenu.is-closing    hidden again, close timings
     html.smenu-lock      page scroll locked, scrollbar width compensated
     html.smenu-sink      page planes recede to 0.97 under the scrim
     html.smenu-rise      page planes return, close timings
   With no state class the menu is simply visible, so an invoker-command
   open with scripts off still shows a working menu.
   ========================================================================== */

:root {
  --smenu-wipe: cubic-bezier(0.32, 0.72, 0, 1);      /* open: fast start, long settle */
  --smenu-wipe-out: cubic-bezier(0.77, 0, 0.175, 1); /* close */
  --smenu-d-open: 620ms;
  --smenu-d-close: 360ms;
  --smenu-scale: 0.97;
}

/* ------------------------------------------------------------ the trigger -- */
/* home.css hides .bar__menu above 860px. The menu now serves every width. */
.bar__menu.smenu-trigger {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-width: 6.25rem; justify-content: center;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out),
              transform 100ms var(--sc-ease-out);
}
.bar__menu.smenu-trigger:hover { border-color: var(--sc-ink); }

/* Two short rules that cross into an X on the close button. A real control
   icon, drawn in CSS so it inherits the text colour. */
.smenu-glyph {
  position: relative; display: inline-block; flex: none;
  width: 0.95rem; height: 0.7rem;
}
.smenu-glyph > span {
  position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px;
  background: currentColor;
  transition: transform 260ms var(--sc-ease-out);
}
.smenu-glyph > span:first-child { top: 0.12rem; }
.smenu-glyph > span:last-child  { bottom: 0.12rem; }
.smenu-glyph--x > span:first-child { transform: translateY(0.1rem) rotate(45deg); }
.smenu-glyph--x > span:last-child  { transform: translateY(-0.1rem) rotate(-45deg); }
.smenu.is-pre .smenu-glyph--x > span { transform: none; }

/* Phones: the label alone, at the button's original size, so the bar's
   wordmark keeps its line beside "Book a call". */
@media (max-width: 860px) {
  .bar__menu.smenu-trigger { min-width: 0; }
  .bar__menu.smenu-trigger .smenu-glyph { display: none; }
}

/* Direct links stay in the bar while they fit beside the CTA and the menu
   button. Below that width the menu carries them. */
@media (max-width: 1080px) {
  .bar__nav { display: none; }
}

/* ----------------------------------------------------- page behind (lock) -- */
html.smenu-lock { overflow: hidden; }
html.smenu-lock body { padding-right: var(--smenu-sbw, 0px); }
html.smenu-lock .bar { right: var(--smenu-sbw, 0px); }

[data-smenu-plane] {
  transition: transform var(--smenu-d-open) var(--smenu-wipe);
  will-change: transform;
}
.bar[data-smenu-plane] {
  transition: background-color 200ms var(--sc-ease-out),
              box-shadow 200ms var(--sc-ease-out),
              transform var(--smenu-d-open) var(--smenu-wipe);
}
html.smenu-sink [data-smenu-plane] { transform: scale(var(--smenu-scale)); }
html.smenu-rise [data-smenu-plane] {
  transition-duration: 200ms, 200ms, var(--smenu-d-close);
  transition-timing-function: var(--sc-ease-out), var(--sc-ease-out), var(--smenu-wipe-out);
}
html.smenu-rise main[data-smenu-plane],
html.smenu-rise .foot[data-smenu-plane] {
  transition-duration: var(--smenu-d-close);
  transition-timing-function: var(--smenu-wipe-out);
}

/* ------------------------------------------------------------- the dialog -- */
.smenu {
  --smenu-bar-h: var(--vs-bar-h, 4rem);
  /* Up to 1499px the menu keeps the bar's grid, and site-menu.js pins the
     brand and the close button to the bar's own brand and menu button. From
     1500px the menu takes a wider grid of its own (see below). */
  --smenu-maxw: var(--sc-maxw, 82rem);
  --smenu-edge-l: max(var(--sc-gutter), calc((100vw - var(--smenu-maxw)) / 2 + var(--sc-gutter)));
  --smenu-edge-r: var(--smenu-edge-l);
  --smenu-pad: clamp(1.5rem, 2.6vw, 2.5rem);
  --smenu-top: calc(var(--smenu-bar-h) + clamp(1.5rem, 4vh, 3.25rem));

  --smenu-plate: var(--vs-plate-3, #4E5446);
  --smenu-plate-ink: var(--sc-surface, #F8F7F2);
  --smenu-plate-soft: var(--vs-olive-soft, #D3D6C9);
  --smenu-plate-line: rgba(248, 247, 242, 0.16);
  --smenu-plate-line-strong: rgba(248, 247, 242, 0.34);
  /* The accent's light stop for the olive plate: one hue, two lightnesses.
     #DF5F0A is 2.2:1 on olive; this stop is 3.3:1. */
  --smenu-plate-accent: #FF8A3D;

  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--sc-ink);
  overflow: hidden; overscroll-behavior: contain;
}
.smenu:focus { outline: none; }
.smenu::backdrop {
  background: color-mix(in oklab, var(--vs-plate-3, #4E5446) 58%, transparent);
  opacity: 0;
  transition: opacity 420ms var(--sc-ease-out);
}
.smenu.is-open::backdrop { opacity: 1; }
.smenu.is-closing::backdrop { opacity: 0; transition-duration: var(--smenu-d-close); }
/* Scripts off: the menu opened by the invoker command, with no state class.
   The plates are opaque, so the backdrop only shows while they wipe. */

.smenu-vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Columns come from the type they hold: the index is as wide as its longest
   section name, the list as wide as its longest link name, and the preview
   takes the rest. All three plates keep to the bar's content edges. */
.smenu__frame {
  --smenu-rail: clamp(2.25rem, 0.85rem + 2.45vw, 3.05rem);
  --smenu-name: clamp(1.125rem, 0.8rem + 0.6vw, 1.375rem);
  --smenu-col-index: calc(var(--smenu-edge-l) + 5rem + var(--smenu-rail) * 5.85);
  --smenu-col-list: calc(var(--smenu-name) * 15.8 + 3.75rem + 2 * var(--smenu-pad));
  position: relative; height: 100%;
  display: grid;
  grid-template-columns: var(--smenu-col-index) var(--smenu-col-list) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}

/* The plates. Each one wipes on its own clip. */
.smenu__zone { position: relative; min-height: 0; }
.smenu__zone--index { grid-column: 1; grid-row: 1; background: var(--sc-canvas); }
.smenu__zone--list {
  grid-column: 2; grid-row: 1;
  background: var(--sc-surface);
  box-shadow: inset 1px 0 0 var(--vs-line);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.smenu__zone--preview {
  grid-column: 3; grid-row: 1 / 3;
  background: var(--smenu-plate); color: var(--smenu-plate-ink);
}
.smenu__foot { grid-column: 1 / 3; grid-row: 2; }

/* The head rule, drawn across the two light plates at bar height. */
.smenu__zone--index::before,
.smenu__zone--list::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--smenu-bar-h);
  height: 1px; background: var(--vs-line); pointer-events: none;
}
/* The list plate scrolls on short screens, so its head strip is sticky and
   opaque: rows pass under it, never through the close button. */
.smenu__zone--list::before {
  position: sticky; z-index: 2; top: 0; display: block;
  height: var(--smenu-bar-h); margin-bottom: calc(-1 * var(--smenu-bar-h));
  background: var(--sc-surface);
  box-shadow: inset 0 -1px 0 var(--vs-line), inset 1px 0 0 var(--vs-line);
}

/* ------------------------------------------------------------ head items -- */
/* The logo lockup (.vs-logo in home.css) at the bar's brand position. */
.smenu__brand {
  position: absolute; top: 0; left: var(--smenu-edge-l);
  height: var(--smenu-bar-h);
}
.smenu__brand:focus-visible { outline-offset: 4px; }

.smenu__close {
  position: absolute; z-index: 5;
  top: var(--smenu-close-top, calc((var(--smenu-bar-h) - var(--smenu-close-h, 2.75rem)) / 2));
  right: var(--smenu-close-right, var(--smenu-edge-r));
  height: var(--smenu-close-h, 2.75rem);
  min-width: var(--smenu-close-w, 6.25rem);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0 0.875rem;
  background: transparent; color: var(--sc-ink);
  border: 1px solid var(--vs-line-strong); border-radius: var(--vs-r, 6px);
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight, 600);
  font-size: var(--sc-t-sm); line-height: 1; cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out),
              opacity 240ms var(--sc-ease-out) 160ms,
              transform 100ms var(--sc-ease-out);
}
.smenu__close:hover { background: var(--sc-canvas); border-color: var(--sc-ink); }
.smenu__close:active { transform: translateY(1px); }
.smenu.is-pre .smenu__close,
.smenu.is-closing .smenu__close { opacity: 0; transition-delay: 0ms; }

/* ------------------------------------------------------- index (desktop) -- */
.smenu__rail {
  position: relative;
  margin: var(--smenu-top) var(--smenu-pad) 0 var(--smenu-edge-l);
  padding-left: 1.75rem;
  display: grid; justify-items: start;
}
/* The ruler: one hairline, a small tick per section, the orange tick on the
   active one. */
.smenu__rail::before {
  content: ""; position: absolute; left: 0; top: 0.3em; bottom: 0.3em;
  width: 1px; background: var(--vs-line-strong);
  font-size: var(--smenu-rail);
}
.smenu__tab {
  position: relative;
  display: inline-flex; align-items: flex-start;
  margin: 0; padding: 0.075em 0.1em 0.075em 0;
  background: none; border: 0; border-radius: 4px;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight, 600);
  font-size: var(--smenu-rail); line-height: 1.02;
  letter-spacing: -0.034em; text-align: left; white-space: nowrap;
  color: var(--sc-ink-soft); cursor: pointer;
  transition: color 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out);
}
.smenu__tab::before {
  content: ""; position: absolute; left: -1.75rem; top: 50%;
  width: 0.5rem; height: 1px; background: var(--vs-line-strong);
}
.smenu__tab[aria-selected="true"] { color: var(--sc-ink); }
.smenu__tab:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .smenu__tab:hover { color: var(--sc-ink); }
}
.smenu__tick {
  position: absolute; left: 0; top: 0;
  width: 1.125rem; height: 3px; margin-top: -1.5px;
  background: var(--sc-accent);
  transform: translateY(var(--smenu-tick-y, 0px));
  transition: transform 280ms var(--sc-ease-out);
}

.smenu__count {
  margin: 0.32em 0 0 0.5rem;
  font-family: var(--vs-font-mono, ui-monospace, monospace);
  font-size: 0.75rem; font-weight: 500; line-height: 1;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  color: var(--sc-ink-soft);
}
.smenu__tab .smenu__count { font-size: max(0.75rem, 0.22em); }

.smenu__legend {
  position: absolute; left: var(--smenu-edge-l); bottom: clamp(1.25rem, 3vh, 2rem);
  margin: 0; max-width: 26ch;
  font-family: var(--vs-font-mono, ui-monospace, monospace);
  font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.01em;
  color: var(--sc-ink-soft);
}
.smenu__legend kbd {
  display: inline-block; padding: 0 0.3em; margin: 0 0.05em;
  font: inherit; color: var(--sc-ink);
  border: 1px solid var(--vs-line-strong); border-radius: 3px;
}
@media (hover: none), (pointer: coarse) { .smenu__legend { display: none; } }

/* ------------------------------------------------------------------ list -- */
.smenu__panels {
  display: grid;
  padding: var(--smenu-top) var(--smenu-pad) var(--smenu-pad);
}
.smenu__panel { grid-area: 1 / 1; min-width: 0; }
.smenu__panel[hidden] { display: none; }
.smenu__lede {
  margin: 0 0 clamp(1rem, 2.4vh, 1.5rem);
  max-width: 34ch;
  font-size: var(--sc-t-base); line-height: 1.45; letter-spacing: -0.005em;
  color: var(--sc-ink-soft); text-wrap: pretty;
}
.smenu__items {
  /* Rules and the current-row fill hang 0.75rem past the text column. */
  list-style: none; margin: 0 -0.75rem; padding: 0;
  border-top: 1px solid var(--vs-line);
}
.smenu__item { border-bottom: 1px solid var(--vs-line); }
.smenu__link {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-areas: "idx name" "idx desc";
  align-items: start;
  padding: clamp(0.65rem, 1.35vh, 0.9rem) 2.25rem clamp(0.65rem, 1.35vh, 0.9rem) 0.75rem;
  border-radius: 4px;
  color: var(--sc-ink); text-decoration: none;
  transition: background-color 160ms var(--sc-ease-out);
}
.smenu__idx {
  grid-area: idx; padding-top: 0.42rem;
  font-family: var(--vs-font-mono, ui-monospace, monospace);
  font-size: 0.75rem; font-weight: 500; line-height: 1;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  color: var(--sc-ink-soft);
  transition: color 160ms var(--sc-ease-out);
}
.smenu__name {
  grid-area: name;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight, 600);
  font-size: var(--smenu-name); line-height: 1.2;
  letter-spacing: -0.018em; text-wrap: balance;
}
.smenu__desc {
  grid-area: desc; margin-top: 0.2rem; max-width: 46ch;
  font-size: 0.9375rem; line-height: 1.45;
  color: var(--sc-ink-soft); text-wrap: pretty;
}
.smenu__arrow {
  position: absolute; right: 0.75rem; top: 50%; margin-top: -0.5rem;
  width: 1rem; height: 1rem;
  color: var(--sc-ink);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 160ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.smenu__link.is-current { background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
.smenu__link.is-current .smenu__idx { color: var(--sc-ink); }
.smenu__link.is-current .smenu__arrow { opacity: 1; transform: none; }
.smenu__link:focus-visible { outline-offset: -2px; }
.smenu__link:active { transform: translateY(1px); }

/* Staggered reveal when a section changes. --i is the row index. */
.smenu__panel.is-in .smenu__lede,
.smenu__panel.is-in .smenu__item {
  animation: smenu-row-in 300ms var(--sc-ease-out) both;
  animation-delay: calc(var(--i, 0) * 34ms);
}
@keyframes smenu-row-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* The accordion headers exist for phones only. */
.smenu__acc { display: none; }

/* ------------------------------------------------------------------ foot -- */
.smenu__foot {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: clamp(1.25rem, 2.2vw, 2rem); row-gap: 0.75rem;
  padding: clamp(1rem, 2.4vh, 1.375rem) var(--smenu-pad) clamp(1rem, 2.4vh, 1.375rem) var(--smenu-edge-l);
  background: var(--sc-canvas);
  box-shadow: inset 0 1px 0 var(--vs-line);
}
.smenu__mail,
.smenu__social a {
  color: var(--sc-ink); font-size: var(--sc-t-sm); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--vs-line-strong);
  text-underline-offset: 0.3em; text-decoration-thickness: 1px;
  padding-block: 0.5rem;
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
.smenu__mail:hover,
.smenu__social a:hover { text-decoration-color: currentColor; }
.smenu__social {
  display: flex; gap: clamp(1rem, 1.8vw, 1.5rem);
  margin: 0 0 0 auto; padding: 0; list-style: none;
}

/* ---------------------------------------------------------------- preview -- */
.smenu__preview {
  height: 100%;
  display: flex; flex-direction: column;
  padding: var(--smenu-top) var(--smenu-edge-r) clamp(1.5rem, 4vh, 2.75rem) var(--smenu-pad);
  min-height: 0;
}
.smenu__screen {
  position: relative; flex: 1 1 auto;
  min-height: 9rem; max-height: 28rem;
  margin-bottom: clamp(1.25rem, 3.2vh, 2rem);
  border: 1px solid var(--smenu-plate-line);
  border-radius: 3px;
}
/* Viewfinder corners: the architect's crosshair, at the plate's scale. */
.smenu__screen::before,
.smenu__screen::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: var(--smenu-plate-line-strong); border-style: solid;
}
.smenu__screen::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.smenu__screen::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.smenu__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.smenu__card { min-height: 0; }
.smenu__card.is-in { animation: smenu-card-in 280ms var(--sc-ease-out) both; }
@keyframes smenu-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.smenu__kicker {
  margin: 0 0 0.6rem;
  font-family: var(--vs-font-mono, ui-monospace, monospace);
  font-size: 0.75rem; font-weight: 500; line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--smenu-plate-soft);
}
.smenu__p-name {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight, 600);
  font-size: clamp(1.5rem, 1rem + 1vw, 2.05rem); line-height: 1.06;
  letter-spacing: -0.028em; text-wrap: balance;
}
.smenu__p-detail {
  margin: 0.7rem 0 0; max-width: 40ch;
  font-size: 0.9375rem; line-height: 1.5;
  color: var(--smenu-plate-soft); text-wrap: pretty;
}
.smenu__proof {
  margin: clamp(1rem, 2.6vh, 1.5rem) 0 0; padding-top: clamp(0.9rem, 2.2vh, 1.25rem);
  border-top: 1px solid var(--smenu-plate-line);
}
.smenu__proof[hidden] { display: none; }
.smenu__proof blockquote { margin: 0; }
.smenu__proof-text {
  margin: 0; max-width: 36ch;
  font-size: 1rem; line-height: 1.45; letter-spacing: -0.005em;
  color: var(--smenu-plate-ink); text-wrap: pretty;
}
.smenu__proof[data-kind="stat"] .smenu__proof-text {
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight, 600);
  font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.smenu__proof figcaption {
  margin-top: 0.55rem;
  font-family: var(--vs-font-mono, ui-monospace, monospace);
  font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.02em;
  color: var(--smenu-plate-soft);
}

@media (min-width: 1500px) {
  .smenu { --smenu-maxw: min(100vw - 8rem, 104rem); }
  .smenu__frame {
    --smenu-rail: clamp(3.05rem, 1rem + 2vw, 3.75rem);
    --smenu-name: clamp(1.375rem, 0.9rem + 0.5vw, 1.5rem);
  }
}

/* On the plate, the close button takes the plate's ink. */
@media (min-width: 1180px) {
  .smenu__close {
    color: var(--smenu-plate-ink); border-color: var(--smenu-plate-line-strong);
  }
  .smenu__close:hover {
    background: rgba(248, 247, 242, 0.08); border-color: var(--smenu-plate-ink);
  }
  .smenu__close:focus-visible { outline-color: var(--smenu-plate-accent); }
}

/* -------------------------------------------------------- open and close -- */
/* Plates wipe top to bottom, 60ms apart; close runs the other way. */
.smenu.is-pre [data-smenu-zone],
.smenu.is-closing [data-smenu-zone] { clip-path: inset(0 0 100% 0); }
.smenu.is-open [data-smenu-zone] {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--smenu-d-open) var(--smenu-wipe);
  transition-delay: calc(var(--z, 0) * 60ms);
}
.smenu.is-closing [data-smenu-zone] {
  transition: clip-path var(--smenu-d-close) var(--smenu-wipe-out);
  transition-delay: calc((3 - var(--z, 0)) * 40ms);
}
.smenu.is-pre [data-smenu-zone] { transition: none; }

/* Inside the plates, type rises a short way as its plate opens. */
.smenu.is-pre .smenu__tab,
.smenu.is-pre .smenu__panel:not([hidden]) .smenu__lede,
.smenu.is-pre .smenu__panel:not([hidden]) .smenu__item,
.smenu.is-pre .smenu__card,
.smenu.is-pre .smenu__screen { opacity: 0; transform: translateY(18px); }
.smenu.is-pre .smenu__tick { opacity: 0; }
.smenu.is-open .smenu__tab {
  transition: color 180ms var(--sc-ease-out),
              opacity 420ms var(--sc-ease-out), transform 620ms var(--smenu-wipe);
  transition-delay: 0ms, calc(90ms + var(--i, 0) * 45ms), calc(90ms + var(--i, 0) * 45ms);
}
.smenu.is-open .smenu__tick { transition: transform 280ms var(--sc-ease-out), opacity 300ms var(--sc-ease-out) 380ms; }
.smenu.is-open .smenu__panel .smenu__lede,
.smenu.is-open .smenu__panel .smenu__item {
  transition: opacity 420ms var(--sc-ease-out), transform 620ms var(--smenu-wipe);
  transition-delay: calc(150ms + var(--i, 0) * 36ms);
}
.smenu.is-open .smenu__screen,
.smenu.is-open .smenu__card {
  transition: opacity 460ms var(--sc-ease-out), transform 660ms var(--smenu-wipe);
  transition-delay: 220ms;
}
.smenu.is-open .smenu__card { transition-delay: 280ms; }

/* ------------------------------------------------------ mid widths: two -- */
@media (max-width: 1179px) {
  .smenu__frame { grid-template-columns: var(--smenu-col-index) minmax(0, 1fr); }
  .smenu__zone--preview { display: none; }
  .smenu__foot { padding-right: var(--smenu-edge-r); }
}

/* ------------------------------------------------------------ phones -- */
@media (max-width: 860px) {
  .smenu { height: 100dvh; }
  .smenu__frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--smenu-bar-h) minmax(0, 1fr) auto;
  }
  .smenu__zone--index { grid-column: 1; grid-row: 1; }
  .smenu__zone--index::before { display: none; }
  .smenu__zone--list {
    grid-column: 1; grid-row: 2;
    background: var(--sc-canvas); box-shadow: inset 0 1px 0 var(--vs-line);
  }
  .smenu__zone--list::before { display: none; }
  .smenu__rail, .smenu__legend { display: none; }
  .smenu__foot { grid-column: 1; grid-row: 3; }

  .smenu__brand { font-size: 1rem; }

  .smenu__panels { display: block; padding: 0 var(--sc-gutter) var(--sc-5); }
  .smenu__panel { padding: 0.25rem 0 0.75rem; border-bottom: 1px solid var(--vs-line); }

  .smenu__acc {
    display: block; margin: 0;
    font-size: inherit; font-weight: inherit;
    border-bottom: 1px solid var(--vs-line);
  }
  .smenu__acc-btn {
    position: relative;
    display: flex; align-items: center; width: 100%;
    min-height: 4rem; margin: 0; padding: 0.5rem 0 0.5rem 1.4rem;
    background: none; border: 0; border-radius: 4px;
    font-family: var(--sc-font-display); font-weight: var(--vs-display-weight, 600);
    font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2rem); line-height: 1.05;
    letter-spacing: -0.03em; text-align: left;
    color: var(--sc-ink); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .smenu__acc-btn::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 0; height: 3px; margin-top: -1px; background: var(--sc-accent);
    transition: width 200ms var(--sc-ease-out), height 200ms var(--sc-ease-out), background-color 200ms var(--sc-ease-out);
  }
  .smenu__acc-btn[aria-expanded="true"]::before { width: 0.875rem; }
  .smenu__acc-btn:focus-visible { outline-offset: -2px; }
  .smenu__acc-btn .smenu__count { align-self: center; position: relative; top: -0.7rem; }
  .smenu__acc-icon {
    position: relative; flex: none; margin-left: auto;
    width: 1.5rem; height: 1.5rem;
  }
  .smenu__acc-icon::before,
  .smenu__acc-icon::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 0.875rem; height: 1.5px; margin: -0.75px 0 0 -0.4375rem;
    background: currentColor; border-radius: 1px;
    transition: transform 220ms var(--sc-ease-out);
  }
  .smenu__acc-icon::after { transform: rotate(90deg); }
  .smenu__acc-btn[aria-expanded="true"] .smenu__acc-icon::after { transform: rotate(0deg); }

  .smenu__lede { margin: 0 0 0.75rem; font-size: var(--sc-t-sm); }
  .smenu__items { border-top: 0; margin: 0; }
  .smenu__item:last-child { border-bottom: 0; }
  .smenu__link {
    grid-template-columns: 2rem minmax(0, 1fr);
    margin: 0; padding: 0.8rem 1.75rem 0.8rem 0; min-height: 3rem;
  }
  .smenu__name { font-size: 1.125rem; }
  .smenu__desc { font-size: var(--sc-t-sm); }
  .smenu__arrow { right: 0.25rem; opacity: 0.55; transform: none; width: 0.875rem; height: 0.875rem; margin-top: -0.4375rem; }
  .smenu__link.is-current { background: none; }
  .smenu__link:active { background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
  .smenu__panel.is-in .smenu__item { animation-duration: 260ms; }

  .smenu__foot {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem; row-gap: 0.25rem;
    padding: 0.875rem var(--sc-gutter) calc(0.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: inset 0 1px 0 var(--vs-line), 0 -10px 24px -18px rgba(40, 42, 30, 0.35);
  }
  .smenu__cta { grid-column: 1 / -1; width: 100%; height: 3rem; }
  .smenu__mail { justify-self: start; min-height: 2.75rem; display: inline-flex; align-items: center; }
  .smenu__social { margin: 0; gap: 1.25rem; }
  .smenu__social a { min-height: 2.75rem; display: inline-flex; align-items: center; }
}
@media (max-width: 380px) {
  .smenu__mail { font-size: 0.8125rem; }
  .smenu__social { gap: 1rem; }
}

/* -------------------------------------------------------- reduced motion -- */
/* Fewer and gentler: one fade, no wipes, no rise, the page does not move. */
@media (prefers-reduced-motion: reduce) {
  .smenu.is-pre [data-smenu-zone],
  .smenu.is-closing [data-smenu-zone],
  .smenu.is-open [data-smenu-zone] { clip-path: none; transition: none; }
  .smenu.is-pre .smenu__frame,
  .smenu.is-closing .smenu__frame { opacity: 0; }
  .smenu.is-open .smenu__frame { opacity: 1; transition: opacity 200ms var(--sc-ease-out); }
  .smenu.is-closing .smenu__frame { transition: opacity 160ms var(--sc-ease-out); }
  .smenu.is-pre .smenu__tab,
  .smenu.is-pre .smenu__panel:not([hidden]) .smenu__lede,
  .smenu.is-pre .smenu__panel:not([hidden]) .smenu__item,
  .smenu.is-pre .smenu__card,
  .smenu.is-pre .smenu__screen { opacity: 1; transform: none; }
  .smenu.is-open .smenu__tab,
  .smenu.is-open .smenu__panel .smenu__lede,
  .smenu.is-open .smenu__panel .smenu__item,
  .smenu.is-open .smenu__screen,
  .smenu.is-open .smenu__card { transition: color 120ms linear; }
  .smenu__panel.is-in .smenu__lede,
  .smenu__panel.is-in .smenu__item { animation: smenu-fade 160ms linear both; animation-delay: 0ms; }
  .smenu__card.is-in { animation: smenu-fade 160ms linear both; }
  @keyframes smenu-fade { from { opacity: 0; } to { opacity: 1; } }
  .smenu__tick, .smenu__tab, .smenu__arrow, .smenu-glyph > span { transition: none; }
  .smenu__arrow { transform: none; }
  html.smenu-sink [data-smenu-plane] { transform: none; }
  [data-smenu-plane] { transition: none; will-change: auto; }
  .smenu::backdrop { transition-duration: 200ms; }
}