/* Busy Season Local. The design system, once, instead of pasted into every
   page. Authority is DESIGN.md; this file is its implementation. */

/* Self-hosted variable fonts. Two files, Latin subset, no third-party connection on the
   critical path. Identical files to the Google CDN's; self-hosting is delivery, not design. */
@font-face{font-family:'Antonio';src:url('fonts/antonio.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Signika Negative';src:url('fonts/signika-negative.woff2') format('woff2');
  font-weight:300 600;font-style:normal;font-display:swap}
:root{
  --ground:#E7EAE6; --white:#FFFFFF; --ink:#1A2229;
  /* The keyed fills, at the weight a map actually prints them. These are
     structure now, not decoration: each one owns a service group and heads its
     band, so colour means something a reader can look up in the legend.
     Contrast computed, not judged: white on brick 5.90, white on slate 7.60,
     ink on ochre 5.09. */
  --brick:#A8452F; --ochre:#B8891F; --slate:#27587A;
  --brick-pale:#E8836B; --ochre-pale:#E8C24A; --slate-pale:#6FA8C7;
  --red:#D93B2E; --red-deep:#B32217;
  --ink-70:rgba(26,34,41,.70); --ink-45:rgba(26,34,41,.45); --hair:rgba(26,34,41,.16);
  --display:'Antonio',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --body:'Signika Negative','Segoe UI',system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,4vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;margin:0;text-wrap:balance;letter-spacing:.01em}
a{color:inherit}
.lab{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70)}
.num{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--pad)}
/* ---------- hero ---------- */
.hero{position:relative;width:100%;aspect-ratio:1536/1024;min-height:560px;overflow:hidden;background:var(--ground)}
.entry label{display:block;margin-bottom:6px}
.entry{display:flex;flex-direction:column;gap:8px}
.entry .row{display:flex;gap:8px}
#biz{flex:1;min-width:0;font-family:var(--display);font-weight:400;font-size:clamp(15px,1.2vw,20px);
  padding:10px 12px;border:1px solid var(--ink);background:var(--white);color:var(--ink);border-radius:0}
#biz:focus{outline:3px solid var(--slate-pale);outline-offset:1px}
.go{display:inline-block;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:clamp(13px,1.05vw,15px);letter-spacing:.1em;
  text-transform:uppercase;background:var(--red);color:#fff;border:0;padding:10px 16px;cursor:pointer;
  min-height:44px;white-space:nowrap}
.go:hover{background:var(--red-deep)}
.go:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.card{border-top:1px solid var(--ink);margin-top:2px}
.card .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:clamp(6px,.75vw,11px) 0;border-bottom:1px solid var(--hair);opacity:.55;transition:opacity .25s}
.card .r.on{opacity:1}
.card .k{font-family:var(--display);font-weight:600;font-size:clamp(12px,.95vw,15px);letter-spacing:.09em;text-transform:uppercase}
.card .v{font-family:var(--display);font-weight:400;font-size:clamp(12px,1vw,15px);
  font-variant-numeric:tabular-nums;color:var(--ink-70);text-align:right}
.card .v.bad{color:var(--red-deep);font-weight:600}
.card .v.none{color:var(--ink-45)}
.samp{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);
  font-family:var(--display);font-weight:600;margin-top:auto}
/* sheet title block, modernised: town + today, no ornament */
.titleblock{position:absolute;left:84%;top:3%;width:14%;text-align:right}
/* pins */
.pin{position:absolute;transform:translate(-50%,-100%);opacity:0;transition:opacity .3s}
@keyframes drop{from{transform:translate(-50%,-160%);opacity:0}to{transform:translate(-50%,-100%);opacity:1}}
/* ---------- sections ---------- */
section{padding-block:clamp(44px,6vw,86px)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:10px}
/* A plain <h1> in a section had no size and no bottom margin, so it inherited a
   browser default of 34px while the h2 below it rendered at 52, and it touched
   the paragraph underneath. The page's own headline was the smallest heading on
   the page, on five live pages, since the rebuild. Measured, not guessed:
   h1 34 / h2 51.84 / gap to lede 0 on every subpage. The hero keeps its own
   size, because .lede-hero h1 and .split h1 are more specific than this. */
h1{font-size:clamp(34px,4.4vw,62px);line-height:.98;margin-bottom:clamp(12px,1.6vw,20px)}
h2{font-size:clamp(30px,3.6vw,52px);margin-bottom:14px}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--ink-70);max-width:62ch;margin:0 0 26px}
.proof{background:var(--white);border-block:1px solid var(--hair)}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(18px,2.4vw,40px)}
.fig .n{font-family:var(--display);font-weight:700;font-size:clamp(46px,5.4vw,78px);line-height:.92;
  font-variant-numeric:tabular-nums}
.fig .c{font-size:15px;color:var(--ink-70);margin-top:6px;max-width:24ch}
.src{margin-top:26px;font-size:13px;color:var(--ink-45);max-width:70ch}
table{width:100%;border-collapse:collapse;font-size:15px}
.tw{overflow-x:auto}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);white-space:nowrap}
th{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-70)}
td.n{font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:700;font-size:17px}
.bar{height:9px;background:var(--slate);display:block;min-width:2px}
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(18px,2.4vw,34px)}
.group{border-top:3px solid var(--ink);padding-top:16px}
.group:nth-child(1){border-color:var(--brick)}
.group:nth-child(2){border-color:var(--ochre)}
.group:nth-child(3){border-color:var(--slate)}
.group h3{font-size:clamp(22px,2vw,29px);text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px}
.group p{margin:0 0 12px;color:var(--ink-70);font-size:15px}
.group .cnt{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-45)}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2vw,28px)}
.price{background:var(--white);border:1px solid var(--hair);padding:22px}
.price .p{font-family:var(--display);font-weight:700;font-size:clamp(34px,3.4vw,46px);
  font-variant-numeric:tabular-nums;line-height:1}
.price .w{font-size:15px;color:var(--ink-70);margin-top:8px}
.note{background:var(--ink);color:var(--ground)}
.note h2{color:var(--white)}
.note .lede{color:rgba(231,234,230,.78)}
.note ul{margin:0;padding-left:20px;color:rgba(231,234,230,.78);font-size:15px;max-width:64ch}
.note li{margin-bottom:7px}
footer{background:var(--white);border-top:1px solid var(--hair);padding-block:34px;font-size:15px}
footer .fw{font-family:var(--display);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.045em}
footer p{color:var(--ink-70);margin:6px 0 0;max-width:52ch}
/* sticky mobile action bar */
.bar{display:none}
@media (max-width:860px){
  .hero{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column-reverse}
  body{padding-bottom:68px}
  .bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--ink);border-top:1px solid rgba(255,255,255,.14)}
  .bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;
    color:var(--ground);text-decoration:none;font-family:var(--display);font-weight:600;
    font-size:15px;letter-spacing:.1em;text-transform:uppercase}
  .bar a.primary{background:var(--red);color:#fff}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* ---------- the sheet, extended below the fold ----------
   The map stopped at the fold and everything under it was a card grid, which is
   why the page read as a tool with a template bolted on. What carries the page
   now is the grammar the map is drawn in: ruled structure, a legend where a
   swatch means something, keyed bands, and one red that is still only ever the
   visitor's own pin and the one action. */

/* Hero: type leads, the sheet frames it, the map is a plate at the side. */
.lede-hero{background:var(--ground);border-bottom:1px solid var(--hair)}
.lede-hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(44px,7vw,96px)}
.lede-hero h1{font-size:clamp(34px,6vw,78px);line-height:.94;letter-spacing:-.005em;
  margin-bottom:clamp(14px,1.6vw,22px)}
.lede-hero .sub{font-size:clamp(17px,1.6vw,24px);color:var(--ink-70);
  max-width:34ch;margin:0 0 clamp(18px,2.4vw,30px)}
/* Legend: a swatch, a figure, and what it counts. A map legend is exactly the
   shape a proof band wants, and it replaces four stat tiles in a row. */
.legend-band{background:var(--white);border-block:1px solid var(--hair)}
.key{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(16px,2.2vw,32px);margin-top:clamp(18px,2.4vw,28px)}
.key .row{display:flex;gap:12px;align-items:flex-start;
  border-top:2px solid var(--ink);padding-top:12px}
.key .sw{width:16px;height:16px;flex:none;margin-top:6px}
.key .n{font-family:var(--display);font-weight:700;
  font-size:clamp(34px,4vw,52px);line-height:.9;font-variant-numeric:tabular-nums}
.key .c{font-size:15px;color:var(--ink-70);margin-top:4px;max-width:24ch}
/* A keyed band: the group owns the colour, and the colour is in the legend. */
.keyed{color:var(--white)}
.keyed h2,.keyed h3{color:var(--white)}
.keyed .eyebrow{color:rgba(255,255,255,.72)}
.keyed p{color:rgba(255,255,255,.82)}
.keyed.brick{background:var(--brick)}
.keyed.slate{background:var(--slate)}
.keyed.ochre{background:var(--ochre);color:var(--ink)}
.keyed.ochre h2,.keyed.ochre h3{color:var(--ink)}
.keyed.ochre .eyebrow{color:rgba(26,34,41,.66)}
.keyed.ochre p{color:rgba(26,34,41,.80)}
.keyed .rule{border:0;border-top:1px solid rgba(255,255,255,.28);margin:clamp(18px,2.4vw,28px) 0}
.keyed.ochre .rule{border-top-color:rgba(26,34,41,.24)}
/* Services inside a keyed band: ruled rows, not boxes. */
.ruled{display:grid;gap:0}
.ruled .item{border-top:1px solid rgba(255,255,255,.28);
  padding-block:clamp(14px,1.8vw,22px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(12px,2vw,32px)}
.keyed.ochre .ruled .item{border-top-color:rgba(26,34,41,.24)}
.ruled .item h3{font-size:clamp(20px,1.8vw,29px)}
.ruled .item p{margin:0;font-size:17px}
/* Prices as a ruled sheet, not three boxes in a row. */
.rates{width:100%;border-collapse:collapse;margin-top:clamp(16px,2vw,26px)}
.rates th{text-align:left;font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-70);
  border-bottom:2px solid var(--ink);padding:0 12px 10px 0}
.rates td{border-bottom:1px solid var(--hair);padding:clamp(12px,1.4vw,18px) 12px clamp(12px,1.4vw,18px) 0;
  vertical-align:baseline}
.rates td.p{font-family:var(--display);font-weight:700;
  font-size:clamp(24px,2.4vw,34px);white-space:nowrap;font-variant-numeric:tabular-nums}
.rates td.w{color:var(--ink-70);font-size:17px}
.rates tr.lead td{border-bottom-width:2px;border-bottom-color:var(--ink)}
@media (max-width:860px){
  .lede-hero .wrap{grid-template-columns:1fr;gap:24px}
  .ruled .item{grid-template-columns:1fr;gap:6px}
  .rates td.w{font-size:15px}
}
/* The check card. It used to be the absolutely positioned panel floating over a
   full-bleed map; now it sits in its own band, in flow, beside nothing. */
.checkcard{background:var(--white);border:1px solid var(--ink);
  padding:clamp(18px,2.4vw,32px);max-width:560px;
  display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(18px,2.4vw,28px)}
.checkcard .card{border-top:1px solid var(--ink);margin-top:2px}
.checkcard .capture{border-top:1px solid var(--hair);padding-top:clamp(12px,1.6vw,18px)}
.checkcard .samp{margin-top:4px}
/* ---------- split hero ----------
   The type-led version put a headline on a large empty field with a small map
   floating beside it, which read as gaps rather than composed space. Half the
   hero is the drawing, running to the edge; the other half carries the headline
   and the check together, so the check is above the fold and neither side has a
   dead zone. */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:min(78vh,780px);
  background:var(--ground);border-bottom:1px solid var(--ink)}
.split .col{
  /* the left column lines up with the page's 1200px measure, so the hero is
     full bleed while its text still sits on the same axis as every section */
  padding-left:max(var(--pad),calc((100vw - 1200px) / 2));
  padding-right:clamp(20px,3vw,56px);
  padding-block:clamp(32px,4.5vw,64px);
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(12px,1.6vw,20px);min-width:0}
.split h1{font-size:clamp(34px,4.6vw,78px);line-height:.94;letter-spacing:-.005em}
.split .sub{font-size:clamp(17px,1.4vw,22px);color:var(--ink-70);max-width:32ch;margin:0}
.split .art{position:relative;overflow:hidden;border-left:1px solid var(--ink);min-height:320px}
.split .art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.split .art .tag{position:absolute;left:0;right:0;bottom:0;display:flex;
  justify-content:space-between;gap:12px;background:var(--white);
  border-top:1px solid var(--ink);padding:8px 12px}
.split .checkcard{margin-top:clamp(6px,1vw,12px);max-width:none}
@media (max-width:980px){
  .split{grid-template-columns:1fr;min-height:0}
  .split .art{order:-1;min-height:0;height:260px;border-left:0;
    border-bottom:1px solid var(--ink)}
  .split .col{padding-inline:var(--pad)}
}
/* ---------- the rule, made visible ----------
   The page claims every figure is traceable and the check card proves it by
   refusing one row. Stating that in prose did nothing; showing the three
   treatments beside each other is what makes "cannot check" read as a decision
   rather than as a gap in the product. */
.method{background:var(--white);border-block:1px solid var(--hair)}
.method .two{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(26px,4vw,72px);align-items:start}
.method .lede{margin:0}
.specimen{border:1px solid var(--ink);background:var(--ground)}
.specimen .sr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:10px 16px;align-items:baseline;
  padding:clamp(13px,1.6vw,19px) clamp(14px,1.6vw,20px);
  border-bottom:1px solid var(--hair)}
.specimen .sr:last-child{border-bottom:0}
.specimen .k{font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:.09em;text-transform:uppercase}
.specimen .v{font-family:var(--display);font-weight:400;font-size:16px}
.specimen .v.bad{color:var(--red-deep);font-weight:600}
.specimen .v.none{color:var(--ink-45)}
.specimen .j{font-size:13px;letter-spacing:.06em;color:var(--ink-45);text-align:right}
/* ---------- who drew it ----------
   A printed map carries the cartographer's name in a ruled block. The offer here
   is the same shape: one named person, nobody to be handed to. */
.who{background:var(--ground)}
.cartouche{background:var(--white);border:1px solid var(--ink);max-width:880px;
  padding:clamp(24px,3.4vw,54px)}
.cartouche .lede{margin-bottom:0}
.facts{list-style:none;margin:clamp(20px,2.6vw,30px) 0 0;padding:0;
  border-top:2px solid var(--ink)}
.facts li{border-bottom:1px solid var(--hair);padding:clamp(11px,1.4vw,16px) 0;
  font-size:17px;color:var(--ink-70)}
.sig{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,26px);
  text-transform:uppercase;letter-spacing:.035em;margin:clamp(16px,2vw,24px) 0 0}
@media (max-width:860px){
  .method .two{grid-template-columns:1fr;gap:24px}
  .specimen .sr{grid-template-columns:1fr auto;gap:4px 14px}
  .specimen .j{grid-column:2;text-align:right}
}
/* ---------- the hero, rebuilt around a working check ----------
   The split hero gave half the fold to a drawing of streets that do not exist
   and squeezed the product into a quarter of it. Michael: "it kind of looks
   horrible still." The check is the only thing on the page that is about the
   visitor, so it is the thing the fold is spent on. Dropping the plate also
   takes the 1024x1536 image off the critical path. */
.lede-hero .wrap{display:block;max-width:880px;margin:0 auto;
  padding-block:clamp(40px,6vw,84px)}
.lede-hero h1{font-size:clamp(36px,5.6vw,80px);line-height:.94;
  letter-spacing:-.005em;margin-bottom:clamp(12px,1.6vw,20px);max-width:16ch}
.lede-hero .sub{font-size:clamp(17px,1.5vw,22px);color:var(--ink-70);
  max-width:46ch;margin:0 0 clamp(22px,3vw,34px)}
.lede-hero .checkcard{max-width:none;margin-top:0}
/* Two inputs and the action on one line, stacking at phone width. The button
   matches the input height rather than the text height so the row reads as one
   control instead of three things that happen to be adjacent. */
.fields{display:grid;grid-template-columns:1.25fr 1fr auto;gap:10px;align-items:end}
.fields .f{display:flex;flex-direction:column;gap:6px;min-width:0}
.fields input{width:100%}
/* align-self, not height:100%. Filling the grid row made the button run from
   the label line to the input's baseline, which read as a block beside two
   fields rather than as the third control in one row. */
.fields .go{white-space:nowrap;align-self:end;height:46px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.entry input{font-family:var(--body);font-size:16px;padding:0 12px;height:46px;
  border:1px solid var(--ink);background:var(--white);color:var(--ink);min-width:0}
.entry input:focus-visible{outline:3px solid var(--red);outline-offset:1px}
.go[disabled]{opacity:.55;cursor:progress}
.checkcard .card .r .v{font-variant-numeric:tabular-nums}
.checkcard #state{margin-top:2px;text-transform:none;letter-spacing:0;
  font-size:14px;color:var(--ink-70);max-width:62ch}
@media (max-width:720px){
  .fields{grid-template-columns:1fr;align-items:stretch}
  .fields .go{width:100%;height:52px}
}
/* ---------- per-trade findings ----------
   A measured count, what it is out of, and what it means. The denominator sits
   next to the figure rather than in the sentence, because "104" on its own is a
   number and "104 of 166" is a finding. */
.findings{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,2.6vw,36px);margin-top:clamp(20px,2.6vw,30px)}
.find{border-top:2px solid var(--ink);padding-top:14px}
.find .n{font-family:var(--display);font-weight:700;
  font-size:clamp(42px,4.6vw,64px);line-height:.92;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:10px}
.find .n .of{font-size:15px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-45)}
.find p{margin:8px 0 0;font-size:16px;color:var(--ink-70);max-width:38ch}
/* ---------- the sheet margin: header ----------
   A survey sheet carries one margin, with the title block, the sheet facts and
   the index in it. This was two stacked full-width bars, a dark facts strip on
   a white nav, printing the wordmark twice inside ninety pixels before any
   content began. One ground, hairline tiers, and the red reserved for the one
   thing that is an action. */
.margin{background:var(--ink);color:var(--ground)}
/* Edge to edge, not a centred column. As a 1200px column inside a full width
   dark band, the red Call block stopped short of the screen and left a dark
   strip beside it, and the gap before it read as a cell somebody forgot to
   fill. A margin on a sheet runs to the trim. The title still lines up with the
   page's 1200px measure; the band it sits in does not. */
.margin .sheet{display:flex;align-items:stretch;gap:0;padding:0}
.margin .title{display:flex;flex-direction:column;justify-content:center;gap:3px;
  text-decoration:none;color:inherit;flex:0 0 auto;
  padding:14px 26px 14px max(var(--pad), calc((100vw - 1200px) / 2))}
.margin .wm{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.6vw,23px);
  letter-spacing:.05em;text-transform:uppercase;line-height:1}
.margin .sub{font-size:12px;line-height:1.3;color:rgba(231,234,230,.62);max-width:34ch}
.margin .title:focus-visible{outline:3px solid var(--red);outline-offset:2px}
/* The sheet facts, set as a definition list because that is what they are:
   a label and a reading, the shape the check card uses further down. */
.margin .facts{display:flex;gap:0;margin:0;flex:1 1 auto;
  border-left:1px solid rgba(231,234,230,.18)}
.margin .facts > div{padding:14px 22px;display:flex;flex-direction:column;
  justify-content:center;gap:3px;border-right:1px solid rgba(231,234,230,.18);
  flex:1 1 0;min-width:0}
.margin .facts dt{font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(231,234,230,.5)}
.margin .facts dd{margin:0;font-size:13px;line-height:1.25;white-space:nowrap}
.margin .ring{display:flex;flex-direction:column;justify-content:center;gap:2px;
  background:var(--red);color:#fff;text-decoration:none;flex:0 0 auto;
  padding:14px max(var(--pad), calc((100vw - 1200px) / 2)) 14px 22px}
.margin .ring:hover{background:var(--red-deep)}
.margin .ring:focus-visible{outline:3px solid var(--ground);outline-offset:-6px}
.margin .ring .lab{font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.margin .ring .no{font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:.02em;white-space:nowrap}
/* The index strip. Ruled off the tier above it rather than floated beside it. */
/* A ruled, graduated edge, the way a drawing is trimmed. Gradient rather than an
   image, so it costs no request and redraws at any width. */
.ticks{height:9px;background:
  repeating-linear-gradient(90deg,
    rgba(231,234,230,.30) 0 1px, transparent 1px 12px);
  border-top:1px solid rgba(231,234,230,.18)}

.index{border-top:1px solid rgba(231,234,230,.18)}
.index .wrap{padding-inline:max(var(--pad), calc((100vw - 1200px) / 2))}
.index ul{display:flex;flex-wrap:wrap;gap:0 34px;list-style:none;margin:0;padding:0}
.index a{display:inline-block;font-family:var(--display);font-weight:600;font-size:14px;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  color:rgba(231,234,230,.72);padding:11px 0;border-bottom:3px solid transparent}
.index a:hover{color:var(--ground)}
.index a[aria-current="page"]{color:var(--ground);border-bottom-color:var(--red)}
.index a:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
@media (max-width:920px){
  .margin .sheet{flex-wrap:wrap}
  .margin .title{flex:1 1 100%;padding-right:0}
  /* At phone width the readings scroll instead of sharing the row: flex:1 1 0
     is right on a wide band and squeezes three readings into each other on a
     narrow one, which is how "412 businesses, 27 towns" ended up touching
     "September 2026" with the first cell bled off the left edge. */
  .margin .facts{flex:1 1 100%;border-left:0;border-top:1px solid rgba(231,234,230,.18);
    overflow-x:auto;scrollbar-width:none;
    padding-left:var(--pad);scroll-padding-left:var(--pad)}
  .margin .facts::-webkit-scrollbar{display:none}
  .margin .facts > div{flex:0 0 auto;padding-inline:18px}
  .margin .facts > div:first-child{padding-left:0}
  .margin .facts > div:last-child{border-right:0;padding-right:var(--pad)}
  /* The sticky bar at the bottom carries Call on every screen and follows the
     reader down the page, which is worth more than a second Call button that
     scrolls away. Two of them is a hundred pixels of header saying the same
     thing twice, so on a phone the header keeps the facts and drops the CTA. */
  .margin .ring{display:none}
  .index ul{gap:0 22px}
  .index a{font-size:13px}
}
/* ---------- the sheet margin: footer ----------
   A printed map puts the legend, the scale, the date and the cartographer in the
   lower margin. Same job a footer has, and a better shape than a wordmark above
   two columns of links. */
footer{background:var(--white);border-top:1px solid var(--ink);padding-block:0}
footer .lower{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:0;
  border-bottom:1px solid var(--hair)}
footer .cell{padding:clamp(24px,3vw,40px) clamp(16px,2vw,28px);
  border-left:1px solid var(--hair)}
footer .cell:first-child{padding-left:0;border-left:0}
footer .cell .lab{margin-bottom:12px;color:var(--ink-45)}
footer .fw{font-family:var(--display);font-weight:700;font-size:clamp(21px,2vw,27px);
  text-transform:uppercase;letter-spacing:.045em;line-height:1}
footer .brand p{color:var(--ink-70);margin:8px 0 0;max-width:32ch;font-size:15px}
footer .brand .call a{font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:.02em;text-decoration:none}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px;font-size:15px}
footer .cell a{color:var(--ink-70);text-decoration:none}
footer .cell a:hover{color:var(--ink);text-decoration:underline}
footer .keycell .lab{margin-bottom:12px}
footer .keys li{display:flex;align-items:center;gap:9px;color:var(--ink-70)}
footer .keys .sw{width:14px;height:14px;flex:none}
/* The scale bar: what the sheet was drawn from, and when. */
/* The scale bar. On a map this is the element that tells you what the drawing is
   worth, and the alternating segments are the convention. Here the graduations
   carry the counts the rest of the site renders from, so it is a scale in the
   literal sense rather than a decoration shaped like one. */
footer .scalebar{padding-block:18px 22px}
footer .scalebar .rule{display:flex;height:10px;border:1px solid var(--ink);
  max-width:420px}
footer .scalebar .rule i{flex:1}
footer .scalebar .rule i:nth-child(odd){background:var(--ink)}
footer .scalebar dl{display:flex;flex-wrap:wrap;gap:10px 34px;margin:10px 0 0}
footer .scalebar dl > div{display:flex;align-items:baseline;gap:8px}
footer .scalebar dt{font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
footer .scalebar dd{margin:0;font-family:var(--display);font-weight:700;
  font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media (max-width:920px){
  footer .lower{grid-template-columns:1fr 1fr}
  footer .cell.brand{grid-column:1 / -1;border-left:0;padding-left:0}
  footer .cell:nth-child(2){padding-left:0;border-left:0}
  footer .scalebar dl{gap:8px 22px}
}
/* ---------- the offer, in three cards ----------
   This was three full-width keyed bands carrying all twelve services as ruled
   rows: 1,726 pixels of homepage to say what three lines say, and a quiet
   reversal of a decision from 2026-07-12 that the twelve names live on the
   services page. The keyed colour survives as the swatch, so the band colours
   downstream and the footer legend still mean the same three things. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,2vw,26px);margin-top:clamp(18px,2.4vw,28px)}
.card-link{display:flex;flex-direction:column;gap:8px;text-decoration:none;
  color:inherit;background:var(--white);border:1px solid var(--ink);
  padding:clamp(18px,2.2vw,26px);transition:transform .15s ease}
.card-link .sw{display:block;width:44px;height:8px}
.card-link.brick .sw{background:var(--brick)}
.card-link.ochre .sw{background:var(--ochre)}
.card-link.slate .sw{background:var(--slate)}
.card-link h3{font-size:clamp(20px,1.9vw,26px);margin-top:4px}
.card-link p{margin:0;color:var(--ink-70);font-size:16px}
.card-link .more{margin-top:auto;padding-top:10px;font-family:var(--display);
  font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-45)}
.card-link:hover{transform:translateY(-2px)}
.card-link:hover .more{color:var(--red-deep)}
.card-link:focus-visible{outline:3px solid var(--red);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.card-link:hover{transform:none}}


/* ---------- questions ----------
   The faq macro has been on local-seo, services and the med spa page since they
   shipped, and .faq has never had a single rule: a bare <dl> with the browser's
   default indent, answers hanging off the left of the questions. Ruled rows,
   like everything else that pairs a label with a reading on this site. */
/* The measure is set on the list, not on the answers. Constraining each dd to
   70ch made every rule stop where its paragraph stopped, so the borders came out
   ragged at different widths down the page. */
.faq{margin:clamp(18px,2.4vw,28px) 0 0;border-top:2px solid var(--ink);max-width:78ch}
.faq dt{font-family:var(--display);font-weight:700;
  font-size:clamp(19px,1.7vw,25px);line-height:1.12;
  padding:clamp(16px,2vw,24px) 0 0}
.faq dd{margin:8px 0 0;padding:0 0 clamp(16px,2vw,24px);
  border-bottom:1px solid var(--hair);color:var(--ink-70);
  font-size:17px;line-height:1.6}


/* ---------- numbered steps ----------
   The macro emits an <ol> with its own "Step 1" label inside each item, and
   .steps had no rule, so the browser's list marker printed alongside it: every
   step read "1. STEP 1". Live on local-seo since it shipped and inherited by
   all three trade pages. The label is the numbering; the marker goes. */
.steps{list-style:none;margin:clamp(18px,2.4vw,28px) 0 0;padding:0;
  display:grid;gap:0;border-top:2px solid var(--ink);counter-reset:none}
.steps li{border-bottom:1px solid var(--hair);padding:clamp(16px,2vw,24px) 0;
  display:grid;grid-template-columns:120px 1fr;gap:4px clamp(16px,2vw,28px);
  align-items:baseline}
.steps .lab{grid-row:span 2;color:var(--ink-45)}
.steps h3{font-size:clamp(19px,1.7vw,25px);line-height:1.12}
.steps p{margin:6px 0 0;color:var(--ink-70);font-size:17px;max-width:62ch}
@media (max-width:720px){
  .steps li{grid-template-columns:1fr;gap:6px}
  .steps .lab{grid-row:auto}
}

/* .offer is a plain section band; the cards inside carry the styling. Named so
   the section can be targeted without reaching for a tag selector. */
.offer{background:var(--ground)}


/* ---------- the one moment ----------
   A row that has not been measured yet sits back; a row that just landed steps
   forward. The whole sequence is under 800ms and it is the only motion on the
   site, because a page that fades and slides every section as you scroll is the
   thing that reads as generated. prefers-reduced-motion turns the transition
   off, and the script fills every row at once when it is set, so the sequence
   never becomes a delay for somebody who asked not to have one. */
.checkcard .card .r{opacity:.38;transition:opacity .28s ease}
.checkcard .card .r.on{opacity:1}
.checkcard .card .r .v{display:inline-block;
  transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .28s ease}
.checkcard .card .r:not(.on) .v{transform:translateY(3px);opacity:.5}
.checkcard .capture{animation:settle .3s cubic-bezier(.16,1,.3,1)}
@keyframes settle{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .checkcard .card .r,
  .checkcard .card .r .v{transition:none}
  .checkcard .card .r:not(.on) .v{transform:none}
  .checkcard .capture{animation:none}
}


/* A defined package, as ruled lines rather than bullets, because the list IS the
   contract and a reader is checking it item by item. */
.facts-list{list-style:none;margin:clamp(18px,2.4vw,28px) 0 0;padding:0;
  border-top:2px solid var(--ink);max-width:74ch}
.facts-list li{border-bottom:1px solid var(--hair);padding:clamp(11px,1.4vw,16px) 0;
  font-size:17px;color:var(--ink-70)}
.card-link .price-line{font-family:var(--display);font-weight:700;
  font-size:clamp(24px,2.4vw,32px);color:var(--ink);margin:2px 0 6px;
  font-variant-numeric:tabular-nums}