/* ============================================================================
   Brock's Pressure Washing — site.css
   tokens · base · structure · nav · buttons · forms · footer
   ----------------------------------------------------------------------------
   Hand-maintained. Not generated, not synced. The polish layer that carries
   the wash edge, the service cards and the overlay is css/site-polish.css.

   THE IDEA: a pressure washer sells one thing — the boundary between filthy
   and clean. Every photograph in this archive is literally a single file with
   that boundary inside it. So the boundary is the design: it is the hero, it
   cuts every service card, and it is the only ornament on the page.

   Everything else is deliberately quiet. There are no rounded boxes, no drop
   shadows and no bordered panels here; sections are separated by hairlines and
   by the photographs themselves. The pale card-on-card stacking that this file
   used to describe is what made the page read as a template.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1 · TOKENS
   Hexes are the client's and do not change. What changed is that each one now
   has exactly ONE job, and the page's working ground is white rather than a
   run of alternating off-white slabs.
   ------------------------------------------------------------------------ */
:root {
  /* Structure. Banner, footer, card plates, the overlay panel. */
  --mw-navy:        #1A416B;
  --mw-navy-deep:   #143356;
  --mw-navy-soft:   #2c558a;

  /* BEFORE. The colour of the dirty half: the wash edge, the BEFORE tag, the
     call band, and the primary action on any light ground.
     9.16:1 on white — safe for text. */
  --mw-burgundy:      #7B2233;
  --mw-burgundy-deep: #5E1926;
  --mw-burgundy-tint: #F6E9EC;

  /* Signal, on navy grounds ONLY. Gold is 1.94:1 on off-white, so it is a
     fill and a rule on dark, never a text colour on light. */
  --mw-gold:        #D4AF1A;
  --mw-gold-strong: #b08e0d;

  /* Grounds. */
  --mw-white: #FFFFFF;
  --mw-off:   #F4F5F7;   /* demoted: form fields and the thumbnail rail only */
  --mw-rule:  #E1E3E8;
  --mw-rule-strong: #C9CDD4;

  /* Text. --mw-ink-soft is 4.87:1 on white; do not lighten it. */
  --mw-ink:       #222222;
  --mw-ink-muted: #5b6166;
  --mw-ink-soft:  #666B70;

  /* Legacy aliases kept so nothing that still names them breaks. */
  --mw-flag-red:  var(--mw-burgundy);
  --mw-flag-blue: var(--mw-navy);

  /* Type. System faces only: this site ships no webfont and no CDN, and a
     client site is the wrong place to start carrying a font binary. */
  --mw-display: Impact, "Arial Black", "Franklin Gothic Bold", "Liberation Sans Narrow", system-ui, sans-serif;
  --mw-body:    Helvetica, "Helvetica Neue", Arial, "Liberation Sans", system-ui, -apple-system, sans-serif;
  --mw-mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Layout. */
  --mw-shell:   min(1180px, 100% - 2 * clamp(1rem, 4vw, 2rem));
  --mw-measure: 62ch;

  /* Geometry. Sharp — this is signage, not software. The only radius on the
     site is the avatar, which is a circle by nature. */
  --mw-r: 0;

  /* The wash edge, shared by the hero, the cards and the overlay. */
  --mw-edge-w: 3px;
  --mw-skew: 12%;
}

/* ---------------------------------------------------------------------------
   2 · BASE
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mw-white);
  color: var(--mw-ink);
  font-family: var(--mw-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }

a { color: var(--mw-burgundy); text-underline-offset: 2px; }
a:hover { color: var(--mw-burgundy-deep); }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* One focus treatment for the whole site. Gold on dark, burgundy on light —
   both clear the 3:1 non-text contrast floor against their own ground. */
:focus-visible {
  outline: 3px solid var(--mw-burgundy);
  outline-offset: 2px;
}
.mw-banner :focus-visible,
.mw-footer :focus-visible,
.mw-callband :focus-visible,
.mw-nav-drawer :focus-visible,
.mw-overlay :focus-visible,
.mw-card :focus-visible {
  outline-color: var(--mw-gold);
}

.mw-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--mw-gold);
  color: #1a1a1a;
  font: 700 0.875rem/1 var(--mw-body);
  padding: 0.85rem 1.15rem;
}
.mw-skip:focus { left: 0; }

.mw-shell { width: var(--mw-shell); margin-inline: auto; }

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

/* ---------------------------------------------------------------------------
   3 · THE ICON PRIMITIVE
   Icons come from a leaflet in the shared pool, declared in this site's
   shared_resources manifest:
     /assets/icons/0000-00-00.artifact-icon.brocks_pressure_washing.surfaces.svg

   COLOUR CONTRACT: Chromium puts an external <use> behind a shadow boundary
   that this stylesheet cannot cross — setting `fill` or `stroke` here does
   NOTHING. `currentColor` does resolve, against the host element's `color`.
   So every symbol is fill="currentColor" and every rule below sets `color`.
   Verified in headless Chromium; see the sprite's own header comment.
   ------------------------------------------------------------------------ */
.mw-ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  display: inline-block;
  vertical-align: -0.25em;
  /* fill: … would do nothing here. Set `color` on this element instead. */
}
.mw-ico--sm { width: 1em;    height: 1em; }
.mw-ico--lg { width: 2rem;   height: 2rem; }
.mw-ico--xl { width: 5.5rem; height: 5.5rem; }

/* ---------------------------------------------------------------------------
   4 · SECTIONS
   A section is introduced by a single hairline and a heading. The old
   kicker-dash-title triplet is gone: it appeared eight times on one page,
   which is exactly what made every section look like the same component.
   ------------------------------------------------------------------------ */
.mw-section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.mw-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

.mw-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  border-top: 2px solid var(--mw-navy);
  padding-top: 0.9rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.mw-head__title {
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mw-navy);
  max-width: 22ch;
}
.mw-head__aside {
  font-family: var(--mw-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mw-ink-soft);
}

/* The mono label. It carries real job data — surface, town, month, parsed
   from the archive's own filenames — so it is information, not styling. */
.mw-meta {
  font-family: var(--mw-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mw-ink-soft);
}

.mw-prose { max-width: var(--mw-measure); color: var(--mw-ink-muted); }
.mw-prose strong { color: var(--mw-ink); }

/* ---------------------------------------------------------------------------
   5 · BANNER
   ------------------------------------------------------------------------ */
.mw-banner {
  background: var(--mw-navy);
  color: var(--mw-white);
  border-bottom: 4px solid var(--mw-gold);
}
.mw-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: clamp(0.85rem, 2vw, 1.35rem);
}
.mw-banner__left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.mw-banner__brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.mw-banner__mark {
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  background: var(--mw-white) center/86% no-repeat
    url("/assets/images/0000-00-00.artifact-image.brocks_pressure_washing.brand-mark.avif");
  box-shadow: 0 0 0 2px var(--mw-gold);
}
.mw-banner__name {
  display: block;   /* the tagline belongs under the name, not beside it */
  font-family: var(--mw-display);
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.mw-banner__tag {
  font-family: var(--mw-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mw-gold);
  margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
   6 · THE TWO LINES
   Two service areas, two numbers, always shown together and always labelled.
   There is no geolocation in this stack, so the site never guesses which one
   a visitor wants — it names both. One component, used in six places.
   ------------------------------------------------------------------------ */
.mw-lines { display: flex; gap: 0.35rem 1.75rem; flex-wrap: wrap; }
.mw-lines--stack { flex-direction: column; gap: 0.75rem; }

.mw-lines__one { display: flex; flex-direction: column; min-width: 0; }
.mw-lines__where {
  font-family: var(--mw-mono);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mw-ink-soft);
}
.mw-lines__num {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--mw-burgundy);
  text-decoration: none;
  white-space: nowrap;
}
.mw-lines__num:hover { text-decoration: underline; }
.mw-lines__sms {
  font-family: var(--mw-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mw-ink-soft);
  text-decoration: none;
}
.mw-lines__sms:hover { color: var(--mw-burgundy); text-decoration: underline; }

/* On any navy or burgundy ground the pair flips to white + gold: burgundy is
   1.04:1 on navy and must never appear there. */
.mw-banner .mw-lines__where,
.mw-footer .mw-lines__where,
.mw-callband .mw-lines__where,
.mw-overlay .mw-lines__where { color: var(--mw-gold); }
.mw-banner .mw-lines__num,
.mw-footer .mw-lines__num,
.mw-callband .mw-lines__num,
.mw-overlay .mw-lines__num { color: var(--mw-white); }
.mw-banner .mw-lines__sms,
.mw-callband .mw-lines__sms { color: rgba(255, 255, 255, 0.82); }
.mw-banner .mw-lines__sms:hover,
.mw-callband .mw-lines__sms:hover { color: var(--mw-white); }

/* ---------------------------------------------------------------------------
   7 · NAV DRAWER
   This site is two pages. The drawer used to list thirteen destinations,
   nine of which were overlays on the page you were already looking at — it
   advertised pages that do not exist. It now names the two real pages and
   the one action.
   ------------------------------------------------------------------------ */
/* The toggle sits IN the banner, not floating over the page. Fixed at the
   top-left it covered the brand mark on a phone and hovered over the hero
   photograph at every width, for no benefit — the drawer holds three links. */
.mw-nav-toggle {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--mw-white);
  cursor: pointer;
}
.mw-nav-toggle:hover { background: var(--mw-white); color: var(--mw-navy); border-color: var(--mw-white); }

/* Class names here are the ones js/nav-drawer.js already sets — that script is
   shared, proven and deliberately left untouched. */
.mw-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(20, 51, 86, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
.mw-nav-overlay.nav-overlay--open { opacity: 1; }
.mw-nav-overlay[hidden] { display: none; }

.mw-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 140;
  width: min(20rem, 84vw);
  padding: 1.5rem 1.35rem;
  background: var(--mw-navy);
  color: var(--mw-white);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transform: translateX(-100%);
  /* visibility, not just transform: a drawer that is only translated keeps
     every link inside it in the tab order. */
  visibility: hidden;
  transition: transform 0.22s ease-out, visibility 0s linear 0.22s;
}
.mw-nav-drawer.nav-drawer--open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.22s ease-out, visibility 0s;
}
.mw-nav-drawer__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--mw-white);
  cursor: pointer;
}
.mw-nav-drawer__close:hover { color: var(--mw-gold); }
.mw-nav-drawer__brand {
  font-family: var(--mw-display);
  text-transform: uppercase;
  font-size: 1.25rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  padding-right: 2.5rem;
  margin-bottom: 1.25rem;
}
.mw-nav-drawer__nav { display: flex; flex-direction: column; }
.mw-nav-drawer__nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0;
  color: var(--mw-white);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.mw-nav-drawer__nav a:hover { color: var(--mw-gold); }
.mw-nav-drawer__nav a[aria-current="page"] { color: var(--mw-gold); }
.mw-nav-drawer__foot { margin-top: auto; padding-top: 1.25rem; }
.mw-nav-drawer__signin {
  display: block;
  text-align: center;
  padding: 0.7rem 1rem;
  border: 2px solid var(--mw-gold);
  color: var(--mw-gold);
  text-decoration: none;
  font-family: var(--mw-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mw-nav-drawer__signin:hover { background: var(--mw-gold); color: var(--mw-navy-deep); }

/* ---------------------------------------------------------------------------
   8 · BUTTONS — square, heavy, no shadow, no lift.
   ------------------------------------------------------------------------ */
.mw-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  border: 2px solid var(--mw-navy);
  background: var(--mw-navy);
  color: var(--mw-white);
  font: 700 0.9375rem/1.1 var(--mw-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mw-btn:hover { background: var(--mw-navy-deep); border-color: var(--mw-navy-deep); color: var(--mw-white); }

/* The primary action on a light ground is burgundy — the accent needs area,
   and this is the largest piece of it on the page. */
.mw-btn--wash {
  background: var(--mw-burgundy);
  border-color: var(--mw-burgundy);
  color: var(--mw-white);
}
.mw-btn--wash:hover { background: var(--mw-burgundy-deep); border-color: var(--mw-burgundy-deep); color: var(--mw-white); }

/* On burgundy and navy grounds the action flips to gold. */
.mw-btn--gold {
  background: var(--mw-gold);
  border-color: var(--mw-gold);
  color: #1a1a1a;
}
.mw-btn--gold:hover { background: var(--mw-gold-strong); border-color: var(--mw-gold-strong); color: #1a1a1a; }

.mw-btn--ghost { background: transparent; border-color: var(--mw-navy); color: var(--mw-navy); }
.mw-btn--ghost:hover { background: var(--mw-navy); color: var(--mw-white); }

.mw-btn--onDark { background: transparent; border-color: var(--mw-white); color: var(--mw-white); }
.mw-btn--onDark:hover { background: var(--mw-white); color: var(--mw-navy); }

.mw-btn--lg { padding: 1rem 1.75rem; font-size: 1rem; }
.mw-btn--block { display: flex; justify-content: center; width: 100%; }

/* ---------------------------------------------------------------------------
   9 · FORMS
   ------------------------------------------------------------------------ */
.mw-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.mw-form-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.mw-form-field--full { grid-column: 1 / -1; }
.mw-form-field > span {
  font-family: var(--mw-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mw-ink-muted);
}
.mw-form-field--req > span::after {
  content: " *";
  color: var(--mw-burgundy);
  font-weight: 700;
}
.mw-form-field input,
.mw-form-field select,
.mw-form-field textarea {
  font: 400 1rem/1.4 var(--mw-body);
  color: var(--mw-ink);
  background: var(--mw-white);
  border: 2px solid var(--mw-rule-strong);
  border-radius: var(--mw-r);
  padding: 0.7rem 0.8rem;
  width: 100%;
}
.mw-form-field textarea { resize: vertical; min-height: 7rem; }
.mw-form-field input:focus-visible,
.mw-form-field select:focus-visible,
.mw-form-field textarea:focus-visible {
  outline: 3px solid var(--mw-burgundy);
  outline-offset: 1px;
  border-color: var(--mw-burgundy);
}
.mw-form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.mw-form-note { margin: 0; font-size: 0.8125rem; color: var(--mw-ink-soft); }

/* Status messages from connect.js. */
.mw-form-status { margin-top: 1rem; padding: 0.85rem 1rem; font-size: 0.9375rem; border-left: 4px solid; }
.mw-form-status--ok  { background: #EAF1E7; border-color: #2f6b2f; color: #1f4a1f; }
.mw-form-status--err { background: var(--mw-burgundy-tint); border-color: var(--mw-burgundy); color: var(--mw-burgundy-deep); }

@media (max-width: 620px) {
  .mw-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   10 · FOOTER
   ------------------------------------------------------------------------ */
.mw-footer {
  background: var(--mw-navy-deep);
  color: var(--mw-white);
  border-top: 4px solid var(--mw-gold);
  padding-block: clamp(2.25rem, 5vw, 3.25rem) 1.5rem;
}
.mw-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
}
.mw-footer__brand {
  font-family: var(--mw-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.02;
  display: block;
}
.mw-footer__tag {
  font-family: var(--mw-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mw-gold);
  margin-top: 0.5rem;
  display: block;
}
.mw-footer__label {
  font-family: var(--mw-mono);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mw-gold);
  margin-bottom: 0.4rem;
}
.mw-footer__line { display: block; color: var(--mw-white); text-decoration: none; margin-bottom: 0.3rem; }
a.mw-footer__line:hover { color: var(--mw-gold); text-decoration: underline; }
.mw-footer__line--small { font-size: 0.8125rem; }
.mw-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.78);
}
.mw-footer__production { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.mw-footer__production:hover { color: var(--mw-gold); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   11 · STICKY CALL BAR — phones only.
   This business converts on a call or a text; on a phone the number was
   otherwise only reachable at the very top and the very bottom.
   ------------------------------------------------------------------------ */
.mw-callbar { display: none; }

@media (max-width: 780px) {
  .mw-callbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--mw-navy-deep);
    border-top: 3px solid var(--mw-gold);
  }
  .mw-callbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 0.5rem;
    color: var(--mw-white);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9375rem;
  }
  .mw-callbar a + a { border-left: 1px solid rgba(255, 255, 255, 0.22); }
  .mw-callbar .mw-ico { color: var(--mw-gold); }
  .mw-callbar small {
    display: block;
    font-family: var(--mw-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mw-gold);
    font-weight: 400;
  }
  /* Clear the bar so the footer's last line is never trapped under it. */
  body { padding-bottom: 4.25rem; }
}

/* ---------------------------------------------------------------------------
   12 · MOTION
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mw-nav-drawer { transition: none; }
}

/* ---------------------------------------------------------------------------
   13 · PRINT — a quote request should print as a usable page.
   ------------------------------------------------------------------------ */
@media print {
  .mw-nav-toggle, .mw-nav-drawer, .mw-nav-overlay, .mw-callbar, .mw-overlay { display: none !important; }
  body { padding-bottom: 0; }
  .mw-banner, .mw-footer, .mw-callband { background: #fff !important; color: #000 !important; }
}