/* ===========================================================================
   MAINSTAY main.css
   Consumes tokens.css and nothing else. No colour, size, or duration literal
   belongs in this file. Section rules are nested under the section id so a
   section can be lifted out whole, or deleted, without side effects.
   ======================================================================== */

/* ---------- base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: var(--lh-heading); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.skip-link {
  position: fixed; top: var(--s-3); left: var(--s-3); z-index: var(--z-skip);
  transform: translateY(-160%);
  background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-2);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { transform: none; }

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

/* Anchor jumps and focus moves must clear the sticky header at the top and
   the sticky call bar at the bottom, or the thing you just jumped to is
   sitting underneath a piece of chrome. */
:is(section, main, footer, a, button, summary, details, input, select, textarea, [id]) {
  scroll-margin-top: 5rem;
  scroll-margin-bottom: 6rem;
}

/* ---------- shared roles -------------------------------------------- */
.lane { width: 100%; max-width: var(--lane-max); margin-inline: auto; padding-inline: var(--edge); }

.kicker {
  font-family: var(--font-body);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

/* Section heads: centred between hairlines. */
.plate-head { text-align: center; margin-bottom: var(--s-7); }
.plate-head .kicker {
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  color: var(--muted);
}
.plate-head .kicker::before,
.plate-head .kicker::after {
  content: ""; height: 1px; flex: 1 1 auto; max-width: 6rem;
  background: var(--line-strong); opacity: 0.7;
}
.plate-head .title { margin-top: var(--s-3); }
.plate-head .text { margin: var(--s-4) auto 0; }

.title { font-size: var(--t-h2); letter-spacing: -0.014em; }
.title-s { font-size: var(--t-h3); letter-spacing: -0.008em; }
.text { font-size: var(--t-body); color: var(--muted); max-width: var(--measure); }
.lead { font-size: var(--t-lead); color: var(--muted); max-width: var(--measure); }

.press {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: var(--s-3) var(--s-6);
  background: var(--accent-fill); color: var(--accent-fill-fg);
  border: 1px solid transparent; border-radius: var(--r-2);
  font-weight: 700; font-size: 1.0625rem; text-decoration: none;
  cursor: pointer; text-align: center;
  transition: transform var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out);
}
.press:hover { filter: brightness(1.07); }
.press:active { transform: translateY(1px); }
.press--big { min-height: 56px; font-size: 1.09rem; }
.press--wide { width: 100%; }

.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: var(--s-3) var(--s-5);
  background: transparent; color: var(--fg);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-2);
  font-weight: 650; font-size: 1.0625rem; text-decoration: none;
  cursor: pointer; text-align: center;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.ghost:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }

/* SAMPLE chip and [set your X] bracket: the two honesty marks. */
.sample {
  display: inline-block; vertical-align: middle;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.2em 0.5em; border-radius: var(--r-1);
  background: var(--bg-3); color: var(--fg); border: 1px solid var(--line-strong);
  white-space: nowrap;
}
.bracket {
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  color: var(--muted);
  border-bottom: 1px dashed var(--line-strong);
}
.note { font-size: var(--t-micro); color: var(--muted); }
.note em { font-style: italic; }

/* Reveals. Without JS every reveal is already in its final state. */
html.js .reveal { opacity: 0; transform: translateY(14px); }
html.js .reveal.is-inview {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}

/* ---------- DEMO BAR -------------------------------------------------
   Written by main.js only. With scripts off it never exists, which is why
   the page at rest is a finished single-trade site. It is deliberately not
   site chrome: different ground, different type, a stated label. It is the
   first thing a reseller deletes.                                        */
.demobar {
  position: relative; z-index: var(--z-demo);
  background: var(--bg); color: var(--fg);
  border-bottom: 2px solid var(--accent);
  font-family: var(--font-body);
}
.demobar__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  padding-block: var(--s-3);
}
.demobar__mark {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.demobar__mark::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.demobar__say { display: none; font-size: var(--t-micro); color: var(--muted); margin-right: auto; }
/* Wraps at every width. It used to scroll horizontally on narrow screens,
   which hid two of the five trades behind a swipe with no fade, no snap and
   no scrollbar: on a touch device the only affordance was a 20px sliver. */
.demobar__set {
  display: flex; flex-wrap: wrap; gap: var(--s-2); flex: 1 1 100%;
}
.demobar__pick { flex: none; }
@media (min-width: 700px) {
  .demobar__say { display: block; }
  .demobar__set { flex: 0 1 auto; }
}
.demobar__pick {
  min-height: 44px; padding: var(--s-2) var(--s-4);
  background: transparent; color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--t-micro); font-weight: 650; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.demobar__pick:hover { background: var(--bg-2); }
.demobar__pick[aria-pressed="true"] {
  background: var(--accent); color: var(--bg); border-color: var(--accent);
}

/* ---------- SHOPFRONT (header) --------------------------------------- */
.shopfront {
  position: sticky; top: 0; z-index: var(--z-shopfront);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.shopfront__in {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 62px; padding-block: var(--s-2);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.15em; min-height: 44px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 3.3vw, 1.4rem); letter-spacing: -0.02em;
  text-decoration: none; color: var(--fg); margin-right: auto;
  line-height: 1.14; text-wrap: balance;
}
.wordmark b { font-weight: 700; }
.wordmark i { font-style: italic; font-weight: 500; color: var(--accent); }
.shopfront__nav { display: none; }
.shopfront__acts { display: flex; align-items: center; gap: var(--s-3); }
.shopfront__tel {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-2);
  font-weight: 700; font-size: 0.9rem; text-decoration: none; color: var(--fg);
  border-radius: var(--r-2); white-space: nowrap;
}
@media (min-width: 520px) {
  .shopfront__tel { font-size: 1rem; padding: 0 var(--s-3); }
}
.shopfront__tel svg { width: 17px; height: 17px; fill: var(--accent); flex: none; }
.shopfront__tel:hover { background: var(--bg-2); }
.shopfront .press { display: none; }
@media (min-width: 860px) {
  .shopfront__nav {
    display: flex; gap: var(--s-5); margin-right: var(--s-5);
  }
  .shopfront__nav a {
    text-decoration: none; font-size: var(--t-small); font-weight: 600; color: var(--muted);
    padding-block: var(--s-2);
    /* a nav label must never break mid phrase: one wrapped item makes
     the whole row read ragged against its neighbours */
  white-space: nowrap;
}
  .shopfront__nav a:hover { color: var(--fg); }
  .shopfront .press { display: inline-flex; min-height: 46px; padding-inline: var(--s-5); font-size: var(--t-small); white-space: nowrap; }
  .wordmark { margin-right: var(--s-6); }
  .shopfront__acts { margin-left: auto; }
}

/* ---------- CALLBAR (sticky mobile bottom bar) -----------------------
   Two actions, never three, and hidden whenever the form or the footer is on
   screen so it can never sit on top of a submit button or an address.

   position: sticky, not fixed. It is the last element in the body, so it
   pins to the bottom of the viewport while there is page left and settles
   into flow at the end. That means it reserves EXACTLY its own height, at
   any text size, with no body padding to guess at, no layout shift and no
   script: the reservation is the box itself. A fixed bar plus a literal
   74px reservation was right only at a 16px root, and covered the footer
   the moment a visitor raised their default font size.                    */
.callbar {
  position: sticky; bottom: 0; z-index: var(--z-bar);
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgba(22, 26, 29, 0.1);
  transition: transform var(--dur-2) var(--ease-out);
}
/* min-height, never height, and no nowrap or overflow clip: the labels are
   sized in rem, so a locked pixel height cut their descenders off the moment
   the visitor raised the browser's default font size (SC 1.4.4). The two
   flex bases reproduce the old 1.35 / 1 split on one row at a 16px root and
   let the buttons stack full width once the root passes about 19px. */
.callbar a {
  min-height: 52px; font-size: 0.95rem; line-height: 1.15;
  padding-inline: var(--s-2);
}
.callbar .press { flex: 1.35 1 11rem; }
.callbar .ghost { flex: 1 1 7rem; }
/* Transform, so hiding it never releases the space it reserves. */
.callbar.is-away { transform: translateY(115%); }
@media (min-width: 768px), (max-height: 480px) {
  .callbar { display: none; }
}

/* ===========================================================================
   marquee-01: the full-bleed slot, the scrim, the centred stack
   ======================================================================== */
#marquee-01 {
  --stage-h: min(68svh, 640px);

  & .marquee__stage {
    position: relative; isolation: isolate; overflow: clip;
    min-height: calc(var(--stage-h) - 62px);
    display: grid; place-items: center;
    background: var(--bg);
    padding: var(--s-8) 0;
  }

  /* The photograph, when the client has one. Absolutely positioned inside a
     min-height box, so it cannot shift layout before, during or after load. */
  & .marquee__media {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    object-position: var(--focal, 50% 42%);
  }

  /* The designed treatment, for the client who has no photograph on day one.
     It switches itself off the moment a .marquee__media element is added:
     that one line of markup is the entire change. */
  & .marquee__stage:not(:has(.marquee__media))::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"),
      radial-gradient(78% 60% at 74% 16%, color-mix(in srgb, var(--accent) 17%, transparent) 0%, rgba(0,0,0,0) 62%),
      radial-gradient(72% 58% at 16% 34%, #2c3138 0%, rgba(0,0,0,0) 66%),
      radial-gradient(96% 72% at 50% 108%, #0b0e10 0%, rgba(0,0,0,0) 70%),
      linear-gradient(168deg, #1b2024 0%, #14181b 54%, #0c0f11 100%);
    background-size: 150px 150px, auto, auto, auto, auto;
    background-blend-mode: overlay, normal, normal, normal, normal;
  }
  & .marquee__stage:not(:has(.marquee__media))::after {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: repeating-linear-gradient(101deg,
      color-mix(in srgb, var(--fg) 6%, transparent) 0 1px, transparent 1px 36px);
    -webkit-mask-image: radial-gradient(70% 58% at 70% 20%, #000 0%, rgba(0,0,0,0) 74%);
    mask-image: radial-gradient(70% 58% at 70% 20%, #000 0%, rgba(0,0,0,0) 74%);
  }

  /* The scrim. base .34 under a symmetric vertical easing whose weakest point
     anywhere inside 8%-92% is a_eff .660, and the copy block is measured to
     sit inside that band at every breakpoint. Do not touch these numbers
     without re-running the measurement described on /styleguide. */
  & .marquee__scrim {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(to bottom,
        hsl(0 0% 0% / .300)  0%,
        hsl(0 0% 0% / .485)  8%,
        hsl(0 0% 0% / .545) 26%,
        hsl(0 0% 0% / .565) 50%,
        hsl(0 0% 0% / .545) 74%,
        hsl(0 0% 0% / .485) 92%,
        hsl(0 0% 0% / .300) 100%),
      hsl(0 0% 0% / var(--scrim-base));
  }

  & .marquee__copy {
    position: relative; text-align: center;
    max-width: 40rem; margin-inline: auto;
    padding-inline: var(--edge);
    color: var(--fg);
  }
  & .marquee__kicker { color: var(--fg); opacity: 0.94; }
  & h1 {
    font-size: var(--t-display); line-height: var(--lh-display);
    letter-spacing: var(--track-display); font-weight: 650;
    color: var(--fg); margin-top: var(--s-4);
    text-wrap: balance; max-width: 17ch; margin-inline: auto;
    @media (min-width: 760px) { max-width: 22ch; }
  }
  & h1 i { font-style: italic; font-weight: 500; color: var(--accent); }
  & h1 .bracket { font-style: normal; font-weight: inherit; color: inherit; border-bottom: 0; opacity: 0.82; }
  & .marquee__promise {
    color: var(--fg); font-size: var(--t-lead);
    margin: var(--s-4) auto 0; max-width: 34ch;
  }
  & .marquee__acts {
    display: flex; flex-direction: column; gap: var(--s-3);
    margin-top: var(--s-6);
  }
  & .marquee__acts .ghost { min-height: 52px; }
  & .marquee__acts .ghost b { font-weight: 700; }

  /* the trade strip: three chips, on a solid ground so the numbers are exact */
  & .trade-strip {
    background: var(--bg-2); color: var(--fg);
    border-top: 1px solid var(--line);
  }
  & .trade-strip ul {
    display: grid; gap: var(--s-3);
    padding-block: var(--s-5);
  }
  & .trade-strip li {
    display: flex; align-items: flex-start; gap: var(--s-3);
    font-size: var(--t-small); color: var(--fg);
  }
  & .trade-strip svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: var(--accent); }
  & .trade-strip .bracket { color: var(--muted); border-bottom-color: var(--line-strong); }

  @media (min-width: 720px) {
    & .marquee__acts { flex-direction: row; justify-content: center; }
    & .marquee__acts > * { flex: 0 1 auto; min-width: 14rem; }
    & .trade-strip ul { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); padding-block: var(--s-6); }
  }
}

/* ===========================================================================
   offer-grid-02: the service cards
   ======================================================================== */
#offer-grid-02 {
  padding-block: var(--section-pad);
  background: var(--bg);

  & .offer-grid {
    display: grid; gap: var(--s-5);
    grid-template-columns: 1fr;
  }
  & .offer {
    display: flex; flex-direction: column;
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--r-3); overflow: hidden;
    transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  }
  & .offer:hover { box-shadow: var(--shadow-1); border-color: var(--line-strong); }

  /* photograph slot. With no photograph it is a designed plate carrying the
     offer's numeral. Adding <img class="offer__photo"> replaces it. */
  & .offer__slot {
    /* No photograph is the NORMAL state, not a gap waiting to be filled, so it
       is a short index band rather than a 16:9 well standing empty. A real
       photograph re-opens it to 16:9 in the rule below. */
    position: relative; overflow: hidden;
    min-height: 2.9rem;
    padding-inline: var(--s-5);
    background: linear-gradient(155deg, var(--bg-3) 0%, var(--bg-2) 100%);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: var(--s-3);
  }
  & .offer__slot::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--line-strong), transparent);
  }
  & .offer__slot:has(.offer__photo) {
    aspect-ratio: 16 / 9; min-height: 0; padding-inline: 0;
    display: grid; place-items: center;
  }
  & .offer__slot:has(.offer__photo)::after { content: none; }
  & .offer__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  & .offer__slot:has(.offer__photo) .offer__num { display: none; }
  & .offer__num {
    font-family: var(--font-display); font-style: italic; font-weight: 600;
    font-size: 1.15rem; line-height: 1;
    letter-spacing: 0.02em;
    color: var(--accent);
    user-select: none; flex: none;
  }
  & .offer__slot:has(.offer__photo) .offer__num { font-size: 3.6rem; }
  & .offer__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
  & .offer__name { font-size: 1.22rem; }
  & .offer__ticket {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2);
    font-family: var(--font-display); font-weight: 600; font-size: 1.32rem;
    color: var(--accent);
  }
  & .offer__tlabel {
    display: block; width: 100%;
    font-family: var(--font-body); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
    margin-bottom: -0.15rem;
  }
  & .offer__line { color: var(--muted); font-size: var(--t-small); flex: 1; }
  & .offer__go {
    align-self: flex-start; min-height: 48px; padding-inline: var(--s-5);
    font-size: var(--t-small);
  }
  & .ticket-note {
    margin-top: var(--s-5);
    padding: var(--s-4) var(--s-5);
    background: var(--bg-2); border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-2);
    font-size: var(--t-small); color: var(--muted);
  }
  @media (min-width: 620px) { & .offer-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 980px) { & .offer-grid { grid-template-columns: repeat(3, 1fr); } }
}

/* ===========================================================================
   standing-03: why this shop
   ======================================================================== */
#standing-03 {
  padding-block: var(--section-pad);
  background: var(--bg);

  & .standing-set { display: grid; gap: var(--s-6); }
  & .standing { display: flex; flex-direction: column; gap: var(--s-3); }
  & .standing__mark {
    font-family: var(--font-display); font-size: 0.95rem; font-weight: 700;
    letter-spacing: 0.02em; color: var(--accent);
    display: flex; align-items: center; gap: var(--s-3);
  }
  & .standing__mark::after { content: ""; height: 1px; flex: 1; background: var(--line); }
  & .standing p { color: var(--muted); }
  @media (min-width: 760px) { & .standing-set { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
}

/* ===========================================================================
   steps-04: how it actually goes
   ======================================================================== */
#steps-04 {
  padding-block: var(--section-pad);
  background: var(--bg-2);
  border-block: 1px solid var(--line);

  & .steps { display: grid; gap: var(--s-6); counter-reset: step; }
  & .step { position: relative; padding-left: 3.4rem; counter-increment: step; }
  & .step::before {
    content: counter(step);
    position: absolute; left: 0; top: -0.1rem;
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent-fill); color: var(--accent-fill-fg);
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  }
  & .step h3 { font-size: var(--t-h3); }
  & .step p { color: var(--muted); margin-top: var(--s-2); font-size: var(--t-small); }
  @media (min-width: 760px) { & .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
}

/* ===========================================================================
   proof-05: sample words + the credential slots
   ======================================================================== */
#proof-05 {
  padding-block: var(--section-pad);
  background: var(--bg);

  & .words { display: grid; gap: var(--s-5); }
  & .word {
    display: flex; flex-direction: column; gap: var(--s-4);
    padding: var(--s-5); background: var(--bg-2);
    border: 1px solid var(--line); border-radius: var(--r-3);
  }
  & .word__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
  & .word__persona {
    font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--accent);
  }
  & .word blockquote { margin: 0; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.42; }
  & .word figcaption { font-size: var(--t-micro); color: var(--muted); margin-top: auto; }

  & .credentials {
    margin-top: var(--s-7);
    display: grid; gap: var(--s-4);
    padding: var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--r-3);
    background: var(--bg-2);
  }
  & .credential { display: flex; flex-direction: column; gap: var(--s-1); }
  & .credential dt { font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  & .credential dd { margin: 0; font-size: var(--t-body); }
  & .proof-note { margin-top: var(--s-4); text-align: center; }
  @media (min-width: 760px) {
    & .words { grid-template-columns: repeat(3, 1fr); }
    & .credentials { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  }
}

/* ===========================================================================
   hours-plate-06: hours, the live chip, address, area
   ======================================================================== */
#hours-plate-06 {
  padding-block: var(--section-pad);
  background: var(--bg); color: var(--fg);

  & .plate { display: grid; gap: var(--s-7); }
  & .hours-now {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
    border: 1px solid var(--line-strong); font-size: var(--t-small); font-weight: 650;
  }
  & .hours-now::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--muted); flex: none;
  }
  & .hours-now[data-state="open"] { border-color: var(--accent); color: var(--accent); }
  & .hours-now[data-state="open"]::before { background: var(--accent); }
  & .hours-now[data-state="shut"] { color: var(--muted); }

  & table { width: 100%; border-collapse: collapse; margin-top: var(--s-5); font-size: var(--t-small); }
  & caption { text-align: left; font-size: var(--t-micro); color: var(--muted); padding-bottom: var(--s-3); }
  & th, & td { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); text-align: left; }
  & th { font-weight: 650; width: 45%; }
  & td { color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }
  & tr[data-today] th, & tr[data-today] td { color: var(--accent); font-weight: 700; }
  & .plate__where dt { font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  & .plate__where dd { margin: var(--s-1) 0 var(--s-5); }
  & .plate__where a {
    color: var(--accent);
    display: inline-flex; align-items: center; min-height: 44px;
  }
  & .plate__where .bracket { color: var(--muted); border-bottom-color: var(--line-strong); }
  @media (min-width: 800px) { & .plate { grid-template-columns: 1.15fr 1fr; gap: var(--s-9); } }
}

/* ===========================================================================
   ask-07: the questions, native details/summary
   ======================================================================== */
#ask-07 {
  padding-block: var(--section-pad);
  background: var(--bg);

  & .asks { max-width: 48rem; margin-inline: auto; border-top: 1px solid var(--line); }
  & details { border-bottom: 1px solid var(--line); }
  & summary {
    display: flex; align-items: flex-start; gap: var(--s-4);
    padding: var(--s-5) 0; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-size: 1.09rem; font-weight: 600;
    min-height: 48px;
  }
  & summary::-webkit-details-marker { display: none; }
  & summary::after {
    content: ""; flex: none; margin-left: auto; margin-top: 0.35em;
    width: 13px; height: 13px;
    border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform var(--dur-2) var(--ease-out);
  }
  & details[open] summary::after { transform: rotate(-135deg); margin-top: 0.6em; }
  & details > p { padding: 0 0 var(--s-5); color: var(--muted); max-width: var(--measure); }
}

/* ===========================================================================
   reach-08: the booking / quote band
   ======================================================================== */
#reach-08 {
  padding-block: var(--section-pad);
  background: var(--bg-2);
  border-top: 1px solid var(--line);

  /* min-width:0 on the grid children: without it the service select's
     intrinsic width (its longest option plus the arrow padding) sets the
     column floor and pushes the whole band 26px wide at 320. */
  & .reach { display: grid; gap: var(--s-7); }
  & .reach > * { min-width: 0; }
  & .reach__say .title { text-align: left; }
  & .reach__say .text { margin-top: var(--s-3); }
  & .reach__ways { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
  & .reach__ways .press { justify-content: flex-start; }
  & .reach__promise {
    margin-top: var(--s-5); padding: var(--s-4);
    border-left: 3px solid var(--accent); background: var(--bg);
    border-radius: 0 var(--r-2) var(--r-2) 0;
    font-size: var(--t-small);
  }

  & form { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-5); }
  & .ask-field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
  & label, & legend { font-weight: 650; font-size: var(--t-small); }
  & .hint { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-micro); }
  & input[type="text"], & input[type="tel"], & select, & textarea {
    width: 100%; min-height: 50px; padding: var(--s-3) var(--s-4);
    font-size: 16px; /* below 16px iOS Safari zooms on focus and the page jumps */
    background: var(--bg-2); color: var(--fg);
    border: 1.5px solid var(--line-strong); border-radius: var(--r-2);
  }
  & textarea { min-height: 84px; resize: vertical; }
  & select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
    padding-right: var(--s-7); min-width: 0; text-overflow: ellipsis;
  }
  & .is-wrong input, & .is-wrong select { border-color: #a4231c; }
  & .field-err { color: #a4231c; font-size: var(--t-micro); font-weight: 650; }

  & .when { border: 0; padding: 0; margin: 0 0 var(--s-5); }
  & .when__set { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
  & .when__set label {
    display: flex; align-items: center; gap: var(--s-2);
    min-height: 48px; padding: var(--s-2) var(--s-3);
    border: 1.5px solid var(--line-strong); border-radius: var(--r-2);
    background: var(--bg-2); cursor: pointer; font-weight: 500;
  }
  & .when__set input { accent-color: var(--accent); width: 20px; height: 20px; flex: none; }
  & .when__set label:has(input:checked) { border-color: var(--accent); background: var(--bg); }
  & .when__set label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

  & .pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  & .fixbox {
    margin-bottom: var(--s-5); padding: var(--s-4);
    border: 1.5px solid #a4231c; border-radius: var(--r-2); background: var(--bg-2);
  }
  & .fixbox h3 { font-family: var(--font-body); font-size: var(--t-small); }
  & .fixbox ul { margin-top: var(--s-2); list-style: disc; padding-left: var(--s-5); }
  & .fixbox a { color: #a4231c; }

  & .nojs-note {
    display: none; margin-top: var(--s-4); padding: var(--s-4);
    border: 1px solid var(--line-strong); border-radius: var(--r-2);
    background: var(--bg-2); font-size: var(--t-small);
  }
  & .nojs-note a { font-weight: 700; }
  & .form-status { margin-top: var(--s-4); font-size: var(--t-small); }
  & .fallback { margin-top: var(--s-4); }
  & .fallback textarea { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 14px; min-height: 132px; }
  & .draft-say { margin-top: var(--s-3); }

  @media (min-width: 880px) { & .reach { grid-template-columns: 0.85fr 1fr; gap: var(--s-8); align-items: start; } }
}
html:not(.js) #reach-08 .nojs-note { display: block; }
html:not(.js) #reach-08 .draft-say { display: none; }

/* ===========================================================================
   foot
   ======================================================================== */
.foot {
  background: var(--bg); color: var(--fg);
  padding-block: var(--section-pad) var(--s-7);

  & .foot__top { display: grid; gap: var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
  & .foot__nap address { font-style: normal; margin-top: var(--s-3); line-height: 1.7; }
  & .foot__nap a {
    color: var(--accent); font-weight: 650;
    display: inline-flex; align-items: center; min-height: 44px;
  }
  & h2 { font-size: var(--t-h3); }
  & dt { font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  & dd { margin: var(--s-1) 0 var(--s-4); }
  & .foot__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
  /* Utility links are still thumb targets. min-width as well as min-height,
     because "Hours" is only 40.5px wide and would otherwise miss on one axis. */
  & .foot__links a {
    color: var(--fg); font-size: var(--t-small);
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  }
  & .foot__base {
    display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between;
    padding-top: var(--s-5); font-size: var(--t-micro); color: var(--muted);
  }
  & .foot__base a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  @media (min-width: 760px) { & .foot__top { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s-7); } }
}

/* ---------- reduced motion: replacement, not shortening --------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .callbar { transition: none; }
  #ask-07 summary::after { transition: none; }
  .press, .ghost, .offer { transition: none; }
}

/* ---------- print ------------------------------------------------------ */
@media print {
  .demobar, .callbar, .shopfront__nav, .skip-link, #reach-08 form, .marquee__scrim { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; }
  #marquee-01 .marquee__stage { min-height: 0; background: #fff; padding: 0; }
  #marquee-01 h1, #marquee-01 .marquee__promise, #marquee-01 .marquee__kicker { color: #000; }
  #hours-plate-06, .foot { background: #fff; color: #000; }
  #ask-07 details { display: block; }
  #ask-07 details > p { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}