/* Busy Season Local. The shell: type, tokens, browser surfaces, and the chrome
   every page on this domain wears.

   It is separate from site.css because the thirteen standalone pages need the
   shell and must NOT get the component library. .panel and .card are design
   system names here and were already something else on editor-demo and
   ai-search-visibility; the shared sheet loads after a page's own rules, so
   handing them all of site.css painted an editor panel in the ink of a band
   and put 1.00:1 labels inside it. The chrome lives here once, so the
   templated site and the standalone pages cannot drift apart.
   The world is painted trade signage: the lettering on a work truck door, the
   panel over a shop, the rocker strip along the bottom of a van. Flat saturated
   panels that run to the trim, hard vinyl edges, an alphabet cut narrow for a
   door and wide for a board, and the measured number set larger than the name,
   the way a phone number outsizes a logo on a tailgate.

   What this replaces: a white bar with a text nav over a 1120px column of
   left-aligned prose, which is a 2009 agency template and read as one.
   Michael, 2026-09-14: "our header and footer seems like a website out of a
   1998 computer ... it looks odd and lacks life and doesnt look like a website
   from 2026 who does website design." */

/* One alphabet, every width and weight, one file. Archivo's variable axes run
   62-125% width and 400-900 weight, which is exactly how a sign shop works:
   the same letterform cut narrow for a narrow panel and wide for a wide one.
   Latin subset, self-hosted, no third-party connection on the critical path. */
@font-face{font-family:'Archivo';src:url('fonts/archivo-core.7f5a6c92.woff2') format('woff2-variations'),
  url('fonts/archivo-core.7f5a6c92.woff2') format('woff2');
  font-weight:400 800;font-stretch:62% 100%;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AE,U+00B0,U+00B7,U+00BC-00BD,U+00BF,U+00CD,U+00D1,U+00ED,U+00F1,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026}
/* The accented Latin the site's own words never use. A business called Jose's
   Auto is spelled with the accent when the visitor types it into the check, so
   the coverage has to exist; it does not have to be downloaded by everyone to
   sit unused. The browser fetches this only if a character from it appears. */
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-ext.06520c74.woff2') format('woff2-variations'),
  url('fonts/archivo-latin-ext.06520c74.woff2') format('woff2');
  font-weight:400 800;font-stretch:62% 100%;font-style:normal;font-display:swap;
  unicode-range:U+000D,U+00A1-00A8,U+00AA-00AD,U+00AF,U+00B1-00B6,U+00B8-00BB,U+00BE,U+00C0-00CC,U+00CE-00D0,U+00D2-00EC,U+00EE-00F0,U+00F2-00FF,U+0102,U+0131,U+0152-0153,U+02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+2009,U+201A,U+201E,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}

:root{
  /* Ground and ink. Michael kept the palette; what changed is how much of the
     page each colour is allowed to own. */
  --paper:#E7EAE6; --white:#FFFFFF; --ink:#1A2229;
  /* The three keys. Each one owns whole panels now rather than heading a card:
     a colour a reader has seen carrying a service group is a colour that still
     means something when it turns up again in the footer.
     Contrast computed, not judged: paper on slate 7.98, paper on brick 6.19,
     ink on ochre 7.85, paper on ink 13.27.
     The token keeps the name ochre and carries the logo's amber. It was
     #B8891F until 2026-09-28, when the seal went into the header: the bell's
     amber sat directly over an ochre stripe, two golds a few pixels apart, and
     read as a mismatch. Ink on the amber measures 7.85 against the old 5.09. */
  --brick:#A8452F; --ochre:#F4A51C; --slate:#27587A;
  --brick-deep:#8A3524;
  /* Type on a dark ground. DESIGN.md names these three and the stylesheet
     never declared them, so any panel reading them fell back to nothing. */
  --on-dark:rgba(231,234,230,.84);--on-dark-quiet:rgba(231,234,230,.66);
  --on-dark-hair:rgba(231,234,230,.22); --ochre-deep:#946C14;
  /* The one action colour, and nothing else is allowed to be it. */
  --red:#D93B2E; --red-deep:#B32217;
  /* The action red, lifted for the one surface that inverted. When the check
     plate became near-black in C1, the "not found" / "not linked" state was
     still painted in --red-deep, which measures 2.42:1 on ink and disappears.
     That state is the one the honesty layer exists to show, so it is the last
     thing allowed to go quiet. Measured: 6.32:1 on ink. It is only ever used
     on the dark plate; on the paper field the action red is still --red-deep. */
  --red-lift:#FF7A6B;
  /* Both tints are set where they actually pass. Ink at .52 measures 3.4:1 on
     the paper ground, which is under AA at body size, and it was the quiet
     colour on every source note, column head and tag on the site. */
  --ink-70:rgba(26,34,41,.74); --ink-45:rgba(26,34,41,.66); --hair:rgba(26,34,41,.16);
    --sign:'Archivo','Archivo Narrow','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(20px,4vw,56px);
  --wrap:1240px;
  /* Sizes are cut-lettering sizes: a sign is read from across a parking lot.
     They are still nowhere near the 80px h1 that made the old site read as
     zoomed in, because the width axis does the shouting instead of the size. */
  /* DESIGN.md documents the display step as clamp(38px, 6.2vw, 80px) and this
     token had drifted to 7.8vw capped at 120: the hero rendered 112px at 1440
     and 120px at 1920, half again the size of the system it claims to
     implement. Michael, 2026-09-16: "why did our page feel a bit scaled in /
     zoomed in". He rejected an 80px h1 once before as "huge and extremely
     zoomed in", so 80 is the ceiling, not the target, and the floor rises to
     38 so a phone loses nothing.
     2026-09-18, Michael, a third time: "ensure our website doesnt look scaled
     in or zoomed in". Measured: 6.2vw reaches the 80 ceiling at 1290px, so
     every laptop rendered the exact size he had rejected. The ceiling is 64
     now and is reached only at 1920; at 1440 the hero is 63px, inside the
     44 to 60 most sites use. scripts/check_scale.py refuses anything larger
     on the rendered page, so this cannot drift back up unnoticed. */
  --h1:clamp(36px,4.4vw,64px);
  /* A subpage title: smaller than the hero's cut lines, larger than a
     section heading. The hero size is the hero's alone. */
  --h1-page:clamp(30px,3.6vw,54px);
  --h2:clamp(26px,2.7vw,40px);
  --h3:clamp(18px,1.4vw,21px);
  /* The measured end of the ramp. Every number on this site is one of these
     three: a figure (the largest thing on a page), a price, or a reading
     inside a row. They were eighteen separate clamps a pixel or two apart. */
  --fig:clamp(40px,3.8vw,58px);
  --price:clamp(34px,3vw,46px);
  --reading:clamp(24px,2vw,30px);
  /* The wordmark is one size wherever it appears. It was 21px in the rail and
     20px in the footer, which is not a decision, it is two people guessing. */
  --wordmark:21px;
  --lede:clamp(17px,1.1vw,19px);
  --gap:clamp(44px,4.6vw,76px);
  --rail:64px;
  --stripe:4px;
  /* The small end of the ramp, named. It was 16, 15, 14, 13 and a stray 11
     scattered across components: four steps doing three jobs, with the site's
     own sourcing and caveats set smallest of all. 14 folds into note and 11
     into micro, which is also the floor an older reader needs. */
  --fs-small:16px; --fs-note:15px; --fs-label:13px; --fs-micro:12px;
  /* Fallbacks for the tone properties, which .panel overrides per colour. */
  --fg:var(--ink); --body:var(--ink-70); --quiet:var(--ink-45); --edge:var(--hair);
  /* The alarm colour is a tone too. It was hard-coded per component until a
     deep red meant for paper ended up on the inverted plate at 2.42:1. */
  --bad:var(--red-deep);
  /* Browser surfaces that ship with no design system behind them. */
  accent-color:var(--red); caret-color:var(--red);
  scrollbar-color:var(--ink) var(--paper);
}

*{box-sizing:border-box}
/* The hidden attribute loses to any display rule with a class behind it, and
   .entry sets display:flex. So the capture form sat open on the page at rest
   while the DOM property read hidden. This makes the attribute mean what it says. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}

/* scroll-padding-top above clears the sticky header, plus a little air, so an
   anchored heading lands where a reader can see it rather than behind the bar.
   Measured: the bar is 68px on desktop and taller stacked, hence these two. */
@media (max-width:1240px){html{scroll-padding-top:128px}}
@media (max-width:760px){html{scroll-padding-top:120px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sign);font-size:17px;font-weight:400;font-stretch:100%;
  line-height:1.58;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

/* The stencil label. Small, tracked, cut narrow: a part number on a plate, a
   column head on a rate sheet. It is never a kicker above a heading. */
.lab{font-family:var(--sign);font-weight:700;font-stretch:86%;font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);display:block}/* ---------- browser surfaces ----------
   The parts nobody draws still carry the design. These ship as browser defaults
   that belong to no design system, and theming them is the cheapest signal that
   a page was built rather than assembled. */
::selection{background:var(--ochre);color:var(--ink)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--paper)}
:where(a,button,input,summary):focus-visible{outline:3px solid var(--red);
  outline-offset:2px}
.panel :where(a,button,input):focus-visible{outline-color:var(--ochre)}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:from-font}

/* Scoped to the chrome. A bare .wrap rule would reach inside the eight
   standalone pages that already have one at their own measure. */
.siteheader>.wrap,.rocker>.wrap,footer>.wrap,footer .base{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);width:100%}
/* ---------- the action ----------
   One colour, one job. A block, not a button: hard edges, cut lettering,
   nothing rounded. Red is the visitor's own action and nothing else on the
   site is allowed to be it. */
/* Deep red, not the bright one. White on #D93B2E measures 4.55:1, which a
   15px label does not clear once the panel's own link colour wins the cascade;
   white on #B32217 measures 6.65:1 and has room. .panel a is (0,1,1) and .go
   is (0,1,0), so every button inside a painted panel was being repainted in
   the panel's link colour and the CTA button failed at 3.75:1. */
a.go,button.go,.panel a.go,.go{display:inline-flex;align-items:center;
  justify-content:center;
  text-decoration:none;font-family:var(--sign);font-weight:800;font-stretch:88%;
  font-size:var(--fs-note);letter-spacing:.09em;text-transform:uppercase;
  background:var(--red-deep);color:#fff;border:0;padding:0 26px;cursor:pointer;
  min-height:52px;white-space:nowrap;border-radius:0;
  transition:background .14s linear}
a.go:hover,button.go:hover,.panel a.go:hover,.go:hover{background:#8E1A11;color:#fff}
.go[disabled]{opacity:.6;cursor:progress}
/* ---------- header: the door panel ----------
   Full bleed to the trim, painted ink, the wordmark cut into it, and the action
   block running the bar's whole height with no padding around it, the way a
   panel is bolted to a door rather than floated on it. */
/* C1, approved 2026-09-14: the page is ONE continuous paper field, so the rail
   stops being a painted band. It keeps its shape (wordmark left, nav right, the
   action block flush to the trim and to the top) and loses its ground. The only
   thing that breaks the field up here is the red action and the ochre tick. */
.siteheader{background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:40;
  border-bottom:var(--stripe) solid var(--ochre)}
.siteheader .wrap{display:flex;align-items:stretch;justify-content:space-between;
  gap:0 clamp(20px,2.4vw,30px);min-height:var(--rail);overflow-x:clip;
  max-width:none;padding-right:0;
  padding-left:max(var(--pad),calc((100% - var(--wrap))/2 + var(--pad)))}
/* The seal, reversed out of the door panel: white ring and name, amber bell.
   40px tall is 232 wide, the width the lettered caps it replaced took (225), so
   the bar's measured fit from 1280 to 1440 is unchanged. Before 2026-09-28 the
   name was lettered here in caps with LOCAL on a paper plate. */
.siteheader .home{display:flex;align-items:center;text-decoration:none;flex:none}
.siteheader .home img,footer .fw img{display:block;height:40px;width:auto}
.siteheader nav{display:flex;align-items:center;margin-inline-start:auto}
.siteheader nav > ul{display:flex;flex-wrap:nowrap;gap:0 clamp(18px,2.1vw,30px);
  list-style:none;margin:0;padding:0}
/* white-space, because nowrap on the list only stopped the ITEMS wrapping. The
   labels still broke inside their own cells, so at 1200 the bar read "BY /
   TRADE" and "HOW SCORING / WORKS" over two lines while the row count still
   measured 1 and reported the header clean. A label is a label or it is not. */
.siteheader nav > ul > li > a{font-family:var(--sign);font-weight:700;font-stretch:88%;
  font-size:var(--fs-label);letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--on-dark);white-space:nowrap;
  display:flex;align-items:center;min-height:44px;
  border-bottom:2px solid transparent}
.siteheader nav > ul > li > a:hover{color:var(--paper);border-bottom-color:var(--ochre)}
.siteheader nav > ul > li > a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--ochre)}
.siteheader .actions{display:flex;align-items:stretch;gap:0 clamp(14px,1.6vw,22px);white-space:nowrap}
.siteheader .tel{display:flex;align-items:center;font-family:var(--sign);
  font-weight:800;font-stretch:84%;font-size:var(--wordmark);letter-spacing:.01em;
  text-decoration:none;color:var(--paper);font-variant-numeric:tabular-nums}
.siteheader .tel:hover{color:var(--ochre)}
.siteheader .go{min-height:0;align-self:stretch;padding-inline:24px;font-size:var(--fs-label)}
/* ---------- the services menu ----------
   A panel bolted under the door, painted the same ink, opened by a click and
   closed by Escape, a second click or a click anywhere else. Never by hover:
   on a phone hover does not exist and a hover menu is a link you cannot use. */
.siteheader li.hasmenu{position:static;display:flex}
.menubtn{appearance:none;background:none;border:0;cursor:pointer;padding:0;
  display:flex;align-items:center;gap:7px;min-height:44px;
  font-family:var(--sign);font-weight:700;font-stretch:88%;font-size:var(--fs-label);
  letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark);
  white-space:nowrap;border-bottom:2px solid transparent}
.menubtn:hover,.menubtn[aria-expanded="true"]{color:var(--paper);border-bottom-color:var(--ochre)}
.menubtn[aria-current="page"]{color:var(--paper);border-bottom-color:var(--ochre)}
/* The caret is drawn, not a glyph, so it cannot fall back to a different face. */
.menubtn span{width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .16s ease}
.menubtn[aria-expanded="true"] span{transform:translateY(1px) rotate(225deg)}
.menu{position:absolute;left:0;right:0;top:100%;background:var(--ink);
  border-top:var(--stripe) solid var(--ochre);
  box-shadow:0 18px 40px rgba(26,34,41,.28);z-index:60}
.menu[hidden]{display:none}
.menuwrap{max-width:var(--wrap);margin-inline:auto;padding:clamp(24px,2.6vw,38px) var(--pad);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,44px)}
.menucol .menuhead{display:block;font-family:var(--sign);font-weight:800;font-stretch:84%;
  font-size:var(--fs-note);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ochre);text-decoration:none;padding-bottom:10px;
  border-bottom:2px solid var(--on-dark-hair)}
.menucol .menuhead:hover{color:var(--paper)}
.menucol > p{margin:10px 0 12px;font-size:var(--fs-note);color:var(--on-dark-quiet)}
.menucol ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.menucol li{margin:0}
.menucol li a{display:flex;align-items:center;min-height:44px;
  padding:10px 10px 10px 12px;font-size:var(--fs-small);
  line-height:1.35;color:var(--on-dark);text-decoration:none;
  border-left:3px solid transparent;
  transition:color .12s linear,border-color .12s linear,background .12s linear}
.menucol li a:hover{color:var(--paper);border-left-color:var(--ochre);
  background:rgba(231,234,230,.06)}
.menufoot{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px 30px;
  margin-top:4px;padding-top:16px;border-top:1px solid var(--on-dark-hair)}
.menufoot a{font-family:var(--sign);font-weight:800;font-stretch:86%;
  font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ochre);text-decoration:none}
.menufoot a:hover{color:var(--paper)}
@media (max-width:1240px){
  /* Stacked chrome: the panel is part of the bar rather than hanging off it.
     It keeps the page gutter, because type running to the trim is the one thing
     a reader notices immediately, and it scrolls inside itself rather than
     running past the fold with no way back to the bar. */
  .menu{position:static;box-shadow:none;border-top:0;
    border-bottom:var(--stripe) solid var(--ochre);
    max-height:calc(100dvh - 210px);overflow-y:auto;overscroll-behavior:contain}
  .menuwrap{grid-template-columns:1fr;padding-inline:var(--pad);gap:18px}
  .siteheader li.hasmenu{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){
  .menubtn span,.menucol li a{transition:none}
}

/* ---------- footer: the tailgate ----------
   The rocker strip carries where we work and how to reach us, then the ink
   panel carries the links, then the name is cut across the bottom at the size
   it is on a tailgate. A wordmark over two columns of 13px links is what the
   old one was, and it is the shape every template footer has. */
/* Was a full-width ochre band. In one field it is a ruled row. */
.rocker{background:var(--ochre);color:var(--ink);border-top:0}
.rocker .wrap{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:10px 26px;padding-block:15px;
  font-family:var(--sign);font-weight:800;font-stretch:84%;font-size:var(--fs-note);
  letter-spacing:.13em;text-transform:uppercase}
.rocker a{color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.rocker a:hover{text-decoration:underline;text-decoration-thickness:2px}

/* Three of these clamps used to reach their ceiling at or below laptop width:
   4.6vw/66px maxed at 1435, 4vw/58px at 1450, 2.2vw/30px at 1364. CLAUDE.md
   names that exact shape as the cause of every oversized-page incident here,
   because a ceiling hit at 1435 IS the size every laptop renders. Re-cut so
   each reaches its max near 1920, which also gives Michael the smaller footer
   he asked for: 66px of top padding becomes 40px at 1440. */
footer{background:var(--ink);color:var(--on-dark);
  padding-block:clamp(32px,2.8vw,54px) 0;overflow:hidden;border-top:0}
footer .cols{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;
  gap:clamp(26px,3vw,54px)}
footer .brand p{margin:10px 0 0;font-size:var(--fs-small);max-width:32ch;color:var(--on-dark)}
footer .brand .tel{display:inline-block;margin-top:14px;font-family:var(--sign);
  font-weight:800;font-stretch:82%;font-size:var(--h3);
  letter-spacing:.01em;color:var(--paper);text-decoration:none;
  font-variant-numeric:tabular-nums}
footer .brand .tel:hover{color:var(--ochre)}
/* What fills the brand cell. Same size and rhythm as the link columns beside
   it so the four cells read as one row rather than as a block and three lists. */
footer .reach{list-style:none;margin:18px 0 0;padding:0}
footer .reach li{margin-bottom:10px;font-size:var(--fs-note);color:var(--on-dark)}
footer .fw{display:inline-flex;text-decoration:none}
footer .lab{color:var(--on-dark-quiet);margin-bottom:14px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px;font-size:var(--fs-note)}
footer a{color:var(--on-dark);text-decoration:none}
footer a:hover{color:var(--paper);text-decoration:underline;
  text-decoration-color:var(--ochre);text-decoration-thickness:2px}
/* The name, cut across the tailgate, on the same column as everything above it.
   It used to sit on the page gutter while the footer's columns, its rule and its
   legal line all sat on the 1240 content column, so the largest thing on the
   page was the one thing on a different grid: 56 against 156 at 1440, and 56
   against 396 at 1920, where it ran 340px wider on each side. Michael chose to
   pull it in, 2026-09-22.

   Sized from the column and not from the viewport, which is the other half of
   the fix: at 11.1vw the lettering kept growing after the column it sits over
   had stopped at 1240, so the wider the screen the worse the mismatch looked.
   It now stops growing where the column stops. */
footer .tailgate{margin-top:clamp(22px,2.1vw,40px);
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  container-type:inline-size;width:100%;overflow:hidden}

/* The logo's own lettering, run to the column, the way a name is cut across a
   tailgate. It was the name set in capitals at 70% width with LOCAL on a paper
   plate, the look Michael rejected on 2026-09-27 as a campaign sign; the seal
   picked the next day carries the name in title case, and the tailgate follows
   it. An image sized from its box, so no font-size can outgrow the column. */
footer .tailgate img{display:block;width:100%;height:auto}
/* The rule was border-top on this box, and the box is the padding box: at 1440
   it ran 100 to 1340 while every word under it started at 156 and every column
   above it started at 156, so the one line in the footer whose job is to
   separate two things overhung both of them by a gutter on each side. Michael,
   2026-09-22: "why isnt the footer fully alligned here". Drawn inside the
   padding instead, so it spans exactly what the columns above it span, at
   every width: the box is padded by --pad and the rule is inset by the same. */
footer .base{display:flex;flex-wrap:wrap;gap:8px 28px;
  margin-top:clamp(14px,1.4vw,26px);padding-top:16px;padding-bottom:24px;
  border-top:0;position:relative;font-size:var(--fs-label);
  color:var(--on-dark-quiet);max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--pad);width:100%}
/* Absolute, so it is out of flow and never becomes a flex item of the row. */
footer .base::before{content:"";position:absolute;top:0;
  left:var(--pad);right:var(--pad);height:1px;background:var(--on-dark-hair)}
/* Privacy and Terms live here now rather than eighteen links down a column
   headed "How it works", which is not where anybody looks for them. */
footer .base a{color:var(--on-dark-quiet);text-decoration:none}
footer .base a:hover{color:var(--paper);text-decoration:underline;
  text-decoration-color:var(--ochre);text-decoration-thickness:2px}

/* ---------- sticky action bar, phone only ---------- */
.bar{display:none}

/* ---------- chrome, responsive ---------- */
/* Three numbers have been in this line and each one was set by a defect, so
   they are all kept. 1240 first, the wrap width. At 1181 the one-row bar needed
   1203px and the page scrolled sideways by 22: the wordmark, five labels, the
   number and the action block do not fit beside each other below the content
   column they sit in. Measured at every width from 320 to 1600.

   Raised 1240 -> 1320 on 2026-09-21. Michael, on a desktop: "the header is
   being cut of im seeing top right request a site revie on all pages". The
   first measurement looked for SIDEWAYS SCROLL and found it at 1203, but this
   row also carries overflow-x:clip, so between 1241 and about 1300 the action
   block ran past the trim and was silently cut instead of scrolling. Measured
   again by reading the right edge: 1241 renders "REQUEST A SITE REVI", 1260
   "REQUEST A SITE REVIE", and the W only clears the edge at 1300. 1280 is one
   of the most common desktop widths there is. The clip hid the defect from the
   check that set the breakpoint. */
/* Wrapping at 1320 fixed the clip and bought a second defect. A wrapped row
   pushes the wordmark to one trim and the number and the action block to the
   other, so 1280 rendered a 600px hole across the middle of the bar with the
   nav abandoned on a row of its own underneath. Michael, 2026-09-22: "the
   phone number and request a site review have a empty gap".

   So the bar stays on ONE row down to 1180 and pays for it out of the nav,
   which drops to the micro step and a tighter gap. Measured by reading the
   action block's right edge against the viewport at every width from 768 up:
   1180 lands it exactly on the trim, 1100 runs 54px past. Below that the bar
   is a two-tier masthead: the name and the ask on the upper tier, the nav set
   across the full width of the lower one, so neither tier carries a hole.

   And the upper number is 1400, not 1320, because the same reading found the
   1320 fix had left the defect intact one breakpoint over. Above 1320 the nav
   sprang back to the label step and the full-size row needs 1338px, so the
   action block was cut on every width from 1321 to 1369: at 1330 by 13px, at
   1360 by 3, clear only at 1370. 1366 is one of the most common laptop widths
   there is. check_scale carries the right check and reads 1440, 1280 and 390,
   none of which is inside that band, so it had been reporting "headers uncut"
   on a width it could not see. It reads 1366 now too. */
@media (max-width:1400px){
  .siteheader .wrap{gap:0 20px}
  .siteheader nav > ul{gap:0 18px}
  .siteheader nav > ul > li > a,.siteheader .menubtn{font-size:var(--fs-micro);
    letter-spacing:.07em}
  .siteheader .actions{gap:0 16px}
  .siteheader .go{padding-inline:18px}
}
@media (max-width:1180px){
  .siteheader .wrap{flex-wrap:wrap;padding-right:var(--pad);
    padding-block:12px;gap:10px 22px;align-items:center}
  .siteheader nav{order:3;flex:1 1 100%;margin-inline-start:0}
  /* Set across the tier, not clumped at its left end. Left-aligned it left
     800px of empty ink beside it, which is the upper tier's own hole one row
     down. */
  .siteheader nav > ul{flex-wrap:wrap;justify-content:space-between;
    width:100%;gap:0 22px}
  .siteheader nav > ul > li > a,.siteheader .menubtn{min-height:38px}
  .siteheader .actions{margin-inline-start:auto}
  .siteheader .go{min-height:44px}
}
/* The footer keeps its own breakpoint. The header moved up to 1180 because the
   nav wrapped there; the three footer columns still fit at 1180 and only need
   collapsing at 1000, and one number should not silently drag the other. */
@media (max-width:1000px){
  footer .cols{grid-template-columns:1fr 1fr}
  footer .brand{grid-column:1 / -1}
}
@media (max-width:760px){
  body{padding-bottom:64px}
  .siteheader .tel,.siteheader .actions{display:none}
  .siteheader .wrap{padding-block:10px;gap:8px}
  /* Four labels, one of them "How scoring works", do not fit across 390px at a
     readable size, and wrapping them is what made the rail 200px tall before
     the page began. So the nav is one strip that runs to the trim and scrolls,
     with the ground faded at the right edge so the cut reads as "there is more"
     rather than as a label chopped off by the gutter. */
  .siteheader nav{order:3;flex:1 1 100%;overflow-x:auto;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to right,var(--ink) calc(100% - 34px),transparent);
    mask-image:linear-gradient(to right,var(--ink) calc(100% - 34px),transparent)}
  .siteheader nav::-webkit-scrollbar{display:none}
  .siteheader nav > ul{flex-wrap:nowrap;gap:0 12px;padding-right:2px}
  .siteheader nav > ul > li > a,.siteheader .menubtn{white-space:nowrap;min-height:34px;
    font-size:var(--fs-micro);letter-spacing:.045em}
  .rocker .wrap{font-size:var(--fs-micro);letter-spacing:.1em}
  /* The bar carries a Call button only when there is a number to call. A button
     labelled Call that scrolls to a form is a button lying about what it does. */
  .bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;
    bottom:0;z-index:50;background:var(--ink);
    border-top:var(--stripe) solid var(--ochre)}
  .bar a{display:flex;align-items:center;justify-content:center;min-height:60px;
    color:var(--paper);text-decoration:none;font-family:var(--sign);
    font-weight:800;font-stretch:86%;font-size:var(--fs-note);letter-spacing:.11em;
    text-transform:uppercase}
  .bar a.primary{background:var(--red);color:#fff}
}

@media (max-width:389px){
  /* Measured at 320 and 360: the strip overflowed by 66px and 26px, and at 320
     it pushed the whole page into a horizontal scroll. It wraps instead. */
  .siteheader nav{overflow-x:visible;-webkit-mask-image:none;mask-image:none;
    margin-inline:0;padding-inline:0}
  .siteheader nav > ul{flex-wrap:wrap;gap:2px 14px}
}

/* ---------- the chat launcher and the action bar ----------
   Both are fixed to the bottom of the phone viewport, so the launcher landed
   on top of the CALL button and took a 52x38 bite out of it, right where a
   right thumb lands. Measured with elementFromPoint at the centre-right of
   CALL: it returned the chat button on all nine pages that load chat.js.
   The launcher lifts above the bar; nothing else moves. */
@media (max-width:760px){
  #ec-btn{bottom:calc(64px + 14px)!important}
  /* This is the rule that actually sizes the panel on a phone: it carries
     !important, so the widget's own stylesheet cannot override it and two
     files were quietly disagreeing about the same box. calc(100vh - 200px)
     alone gave 644px on a 844px phone, which is 76 percent of the screen.
     Capped, so a tall phone gets a widget rather than a takeover. */
  #ec-panel{bottom:calc(64px + 76px)!important;
    max-height:min(calc(100vh - 200px),440px)!important}
}

/* ---------- skip link ----------
   Off-screen until focused, then a painted block at the top left. Without it a
   keyboard visitor re-walks all seven header stops on every page. */
.skip{position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--red-deep);color:#fff;padding:14px 22px;
  font-family:var(--sign);font-weight:800;font-stretch:86%;font-size:var(--fs-note);
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}

/* ---------- touch targets ----------
   Measured 2026-09-14 with sitebuilder.measure across 23 pages at 390: 184
   targets under the 44px floor, and 146 of them were these six elements in the
   chrome, repeated on every page. The phone number alone accounted for 36.

   Keyed on pointer:coarse, not on width, so a mouse keeps the tight rows the
   painted-panel world wants and a thumb gets a target it can hit. The nav strip
   is the one that earns a note: its 34px was a deliberate trade, because four
   labels wrapping made the rail 200px tall before the page began. It stays one
   scrolling strip and keeps its type size; only the hit area grows, and the
   rail's own padding comes down to pay for most of it. */
@media (pointer:coarse){
  .siteheader .wrap{padding-block:6px}
  .siteheader nav > ul > li > a,.siteheader .menubtn{min-height:44px}
  /* The wordmark is already 225px wide, so it is not a target anyone misses.
     It takes its 44px as padding rather than height, because min-height here
     costs 11px of a sticky header on every phone page and buys nothing. */
  .siteheader .home{padding-block:6px;margin-block:-6px}

  /* Negative margins on a wrapping flex line did not hold the strip flat, so
     the strip pays for the target out of its own padding instead: 2 + 44 + 2
     against the 15 + 19 + 15 it had. */
  .rocker .wrap{padding-block:2px;row-gap:0}
  .rocker a{display:inline-flex;align-items:center;min-height:44px}

  footer .brand .tel{display:inline-flex;align-items:center;min-height:44px}
  footer .cols li{margin-bottom:0}
  footer .cols li a{display:inline-flex;align-items:center;min-height:44px}
  footer .base a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- the next step ----------
   For a visitor from a post, on a phone, with about thirty seconds: text us
   the web address, check the Google listing, or call, in that order. Here and
   not in site.css because who-ai-recommends is one of the standalone pages and
   carries the same block. The quick row sits under the answer; the full block
   repeats it after the answer with the homepage's check as an ink plate, the
   same plate the homepage uses, so the check reads as the same tool. */
.nextquick{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  margin-top:clamp(18px,2vw,26px)}
.nextquick .go{padding-inline:22px}
.nextlink{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--sign);font-weight:700;font-stretch:92%;font-size:var(--fs-small);
  color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:4px;font-variant-numeric:tabular-nums}
.nextlink:hover{text-decoration-color:var(--red)}

.nextstep{border-top:var(--stripe) solid var(--ochre)}
.nextways{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,3.4vw,64px);align-items:start}
.nexttext{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.nexttext p{margin:0;font-size:var(--fs-small);color:var(--ink-70);max-width:44ch}
.nexttext p a{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;
  text-decoration-thickness:2px}
.nextcheck{background:var(--ink);color:var(--paper);padding:clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column;gap:14px;margin:0}
.nextcheck h3{margin:0;color:var(--paper);font-family:var(--sign);font-weight:700;
  font-stretch:92%;font-size:var(--h3);line-height:1.16;text-transform:uppercase}
.nextcheck .lab{color:var(--on-dark);margin-bottom:7px}
.nextfields{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;
  gap:10px;align-items:end}
.nextfields input{width:100%;height:50px;padding:0 13px;border:2px solid var(--paper);
  border-radius:0;background:var(--white);color:var(--ink);font-family:var(--sign);
  font-weight:600;font-stretch:94%;font-size:16px;min-width:0}
.nextfields input::placeholder{color:var(--ink-45);font-weight:400}
.nextfields .go{height:50px;min-height:50px;padding-inline:24px}
.nextcheck :where(input,button):focus-visible{outline:3px solid var(--ochre);outline-offset:2px}
.nextout{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--on-dark-hair);
  display:flex;flex-direction:column;gap:6px;font-size:var(--fs-small);line-height:1.45;
  color:var(--on-dark)}
.nextout li.bad{color:var(--red-lift);font-weight:600}

@media (max-width:760px){
  .nextquick{flex-direction:column;align-items:stretch;gap:2px}
  .nextquick .go{width:100%;margin-bottom:6px}
  .nextways{grid-template-columns:1fr}
  .nexttext .go{width:100%}
  .nextfields{grid-template-columns:1fr}
  .nextfields .go{width:100%;height:54px;min-height:54px}
}