/* greatcopiers.net stylesheet.

   PALETTE AND LANGUAGE SAMPLED FROM THE VISUAL REFERENCE, 2026-09-13.
   `design/reference/2026-09-12-visual-reference.png` is in the repo. Every value below was read
   out of that file with a pixel sampler, not described from memory, after a written description
   of it turned out to be wrong about the ground, the corners and the label pattern.

   WHAT CHANGED FROM PALETTE B, and why it was not a repaint for its own sake:
     The ground moved from #f4f7fb, a cool grey blue, to #f2f3ee, warm bone. That one value is
     most of what separated our page from the reference.
     The action blue moved from #1d6fe0 to #0a4bdb. Stronger, and it also FIXES a real problem:
     the old blue on the ground measured 4.44, which is large text only, and white on it measured
     4.77. The new one is 6.19 and 6.90.
     `--clay` had been set to the same hex as `--brass`, so palette B was running on one accent
     doing five jobs. It is now the citron the reference uses.

   MEASURED 2026-09-13, every pair the page uses:
     ink #0a1423 on bone #f2f3ee                    16.56
     navy #0a1d32 on bone                           15.25   headings
     muted #4c5a6b on bone / on the wash             6.31 / 5.71
     action #0a4bdb on bone / on white               6.19 / 6.90   links and emphasis
     white on action #0a4bdb                         6.90   button text
     white on navy #0a1d32                          17.01
     #8ab4ff on navy                                 8.14   eyebrows and numbers on dark
     navy on the pale wash #dbe9f9                  13.80
     white over the hero scrim, worst case           9.40   ink at 0.80 over a white video frame

   CITRON #e2d222 IS DECORATION AND NOTHING ELSE. It measures 1.40 on bone. It may be a rule, a
   sticky note or a colour bar. It may never be text, a border that carries meaning, a focus ring
   or a state. If you are about to use it to tell the reader something, use the action blue.

   CORNERS ARE SQUARE. The reference has no rounded card anywhere: photographs sit on the ground
   with square corners and the label sits under them. Radius survives only where the shape is
   genuinely round: the pause button, the step numbers, the map pin.

   If you add a colour, measure it against every ground it sits on and write the number here. */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-normal-latin.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/space-mono-normal-latin.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/caveat-normal-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/inter-normal-latin.woff2') format('woff2')}

:root{
  --bg:#f2f3ee; --paper:#f7f7f5; --card:#ffffff; --sage:#dbe9f9; --secondary:#e8eef7;
  --track:#e3ded1;
  --fg:#0a1d32; --fg-dk:#071526; --muted:#4c5a6b; --line:#d9d4c7; --input:#6a7788;
  --brass:#0a4bdb; --brass-dk:#0a3fb8; --brass-lt:#8ab4ff; --progress:#0a3fb8;
  --clay:#e2d222; --clay-dk:#c9ba17; --accent-fg:#ffffff;
  --cream:#ffffff; --cream-85:#cfd8e4; --cream-70:#a8b6c8;
  --hold:#7a5f1a; --hold-wash:#FBF4DC;
  --disp:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --hand:'Caveat',ui-rounded,cursive;
  --shadow:0 18px 40px -26px rgba(10,29,50,.42);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;
  line-height:1.5;-webkit-font-smoothing:antialiased;font-synthesis:none}
.wrap{max-width:1152px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}
img{max-width:100%;height:auto;display:block}
a{color:var(--fg);text-underline-offset:3px}
a:hover{color:var(--brass-dk)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.035em;margin:0;color:var(--fg)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;z-index:99;background:var(--card);color:var(--fg);
  padding:10px 15px;border-radius:0}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-dk);margin:0}

.hold{font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:var(--hold-wash);color:var(--hold);border:1px dashed #C9AC4E;
  padding:.18em .5em;border-radius:5px;white-space:nowrap}
.prov{border-bottom:2px dotted var(--brass);cursor:help}

.previewbar{background:var(--fg);color:var(--cream);font-size:13px;padding:10px 0;line-height:1.55}
.previewbar b{color:var(--cream)}
.previewbar .prov{color:var(--cream);border-bottom-color:var(--brass)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brass);
  color:var(--cream);font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.2;
  padding:14px 24px;border-radius:0;border:0;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,background-color .15s ease}
.btn:hover{background:var(--fg-dk);color:var(--cream);transform:translateY(-2px)}
.btn.block{display:flex;width:100%}
.btn.brass{background:var(--brass);color:var(--accent-fg);font-size:16px;padding:16px 32px}
.btn.brass:hover{background:var(--brass);color:var(--accent-fg)}
.btn2{display:inline-flex;align-items:center;justify-content:center;background:transparent;
  color:var(--fg);font-size:14px;font-weight:700;line-height:1.2;padding:13px 24px;
  border-radius:0;border:1px solid var(--line);text-decoration:none;
  transition:background-color .15s ease}
.btn2:hover{background:var(--secondary);color:var(--fg)}
.acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:32px}

/* ---- masthead ---- */
header.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding-top:22px;padding-bottom:22px}
.mk{display:flex;align-items:center;flex:none}
.mk img{height:48px;width:auto}
nav.main{display:flex;gap:6px 22px;flex-wrap:nowrap;white-space:nowrap;font-size:14px;font-weight:500}
nav.main a{color:var(--fg);text-decoration:none;padding:6px 0}
nav.main a:hover{color:var(--brass-dk)}
nav.main a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--fg);font-weight:700}
.mast-r{display:flex;align-items:center;gap:20px;flex:none}
.mast-r .where{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.telbtn{display:inline-block;border:1px solid var(--line);border-radius:0;padding:8px 16px;
  font-size:12px;font-weight:700;color:var(--fg);text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease}
.telbtn:hover{background:var(--secondary);color:var(--fg)}
/* measured at 1280px: logo, six links, the tracked line and the phone did not fit on one row */
@media(max-width:1439px){.mast-r .where{display:none}}
@media(max-width:960px){
  header.mast .wrap{display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo r" "nav nav";
    gap:12px 16px;padding-top:16px;padding-bottom:14px}
  .mk{grid-area:logo} .mast-r{grid-area:r} nav.main{grid-area:nav;gap:2px 18px;flex-wrap:wrap}
  .mk img{height:40px}
}

.crumb{font-size:13px;color:var(--muted);padding:6px 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--brass-dk)}
.crumb i{font-style:normal;margin:0 8px}

/* ---- hero ---- */
.hero .wrap{padding-top:40px;padding-bottom:64px}
.hero h1{font-size:36px;line-height:1.05}
@media(min-width:640px){.hero h1{font-size:48px}}
@media(min-width:1280px){.hero h1{font-size:60px}}
/* The emphasised half of a headline is the ACTION blue. It was citron for one build on
   2026-09-13 because --clay changed meaning, and citron on bone measures 1.40. The rule at
   the top of this file says citron may never be text; this is the case it was written for. */
h1 em{font-style:normal;color:var(--brass);position:relative;display:inline-block}
h1 .u{position:absolute;left:0;bottom:-8px;width:100%;height:10px;overflow:visible}
h1 .u path{fill:none;stroke:var(--brass);stroke-width:3;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.hero .eyebrow{margin-bottom:16px}
.hero .lede{font-size:16px;line-height:1.625;color:var(--muted);margin:28px 0 0;max-width:32rem}
.hero.solo h1{max-width:17ch}
.hero.solo .lede{max-width:54ch}

/* ---- video hero and the process band ----
   Dustin, 2026-09-12: build it with these videos. Both are generated, from his paid Lovable
   account; `assets/generated/SOURCES.md` says what each shows and that they are not Randy's staff.
   The Paper Pal animation this replaces is retired: Randy, "remind me of the little toaster".

   THE SCRIM IS MEASURED, NOT EYEBALLED. A video frame can be any colour, so the worst case for the
   cream copy is a white frame. Ink at 0.80 over white composites to #434f54, where cream reads
   8.21:1 and the brass-light eyebrow 4.86:1. Below 0.64 cream stops passing, so 0.80 is the floor
   plus room. The right side falls to 0.30 so the picture still reads. ---- */
/* ---- the hero. FULL WIDTH VIDEO, restored 2026-09-13 on Dustin's call after a split version.
   The copy sits over the film on a scrim; the collateral cards sit bottom right on it. ---- */
.vhero{position:relative;isolation:isolate;background:var(--fg);color:#fff;overflow:hidden;
  padding:0}
.vhero .vhero-media{position:absolute;inset:0;z-index:0}
.vhero .vhero-media video{display:block;width:100%;height:100%;object-fit:cover}
.vhero .vhero-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,29,50,.9),rgba(10,29,50,.82) 46%,rgba(10,29,50,.3))}
@media(max-width:900px){.vhero .vhero-scrim{
  background:linear-gradient(180deg,rgba(10,29,50,.88),rgba(10,29,50,.8) 60%,rgba(10,29,50,.6))}}
.vhero .vhero-copy{position:relative;z-index:1;padding-top:78px;padding-bottom:86px}
@media(max-width:640px){.vhero .vhero-copy{padding-top:52px;padding-bottom:60px}}
.hero-kick{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;margin:0 0 18px}
.vhero h1{color:#fff;font-size:40px;line-height:.98;max-width:14ch;letter-spacing:-.035em;margin:0}
@media(min-width:640px){.vhero h1{font-size:56px}}
@media(min-width:1280px){.vhero h1{font-size:64px}}
.vhero h1 em{color:#8ab4ff}
.vhero h1 .u{display:none}
.vhero .lede{color:#cfd8e4;font-size:17px;line-height:1.55;margin:22px 0 0;max-width:33rem}
.vhero .acts{margin-top:28px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.vhero .btn2{color:#fff;border-color:transparent;background:none;padding-left:0;
  text-decoration:none}
.vhero .btn2:hover{background:none;color:#8ab4ff}
.hero-foot{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#cfd8e4;margin:34px 0 0;padding-top:20px;position:relative}
.hero-foot::before{content:"";position:absolute;top:0;left:0;width:38px;height:3px;
  background:var(--clay)}
.vhero .note{z-index:2}
.note-a{right:200px;bottom:40px;width:150px;transform:rotate(-6deg);font-size:14px}
.note-a b{font-size:21px}
.note-b{right:40px;bottom:76px;width:146px;transform:rotate(3.5deg);font-size:22px}
.note-b .cmyk{margin-top:14px}
.note-b .regmark{position:absolute;top:10px;right:10px;color:#14161a;width:20px;height:20px}
@media(max-width:1180px){.note-a{display:none}.note-b{right:28px;bottom:28px;width:128px;
  font-size:18px}.note-b .cmyk{height:34px;width:74px}}
@media(max-width:900px){.note-b{display:none}}
.vhero :focus-visible{outline-color:var(--brass)}

[data-video]{position:relative}
[data-video] .vt-on{display:none}
[data-video][data-playing="1"] .vt-on{display:inline}
[data-video][data-playing="1"] .vt-off{display:none}
.vtoggle{position:absolute;right:16px;bottom:16px;z-index:2;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(14,25,41,.6);color:var(--cream);font-size:14px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;
  transition:background-color .15s ease}
.vtoggle:hover{background:rgba(14,25,41,.85)}
.vtoggle:focus-visible{outline:2px solid var(--brass-lt);outline-offset:3px}

/* ---- how a service call runs. SIDE BY SIDE 2026-09-13, was 1127px stacked. ---- */
.process{background:var(--fg);color:var(--cream)}
.proc-in{display:grid;gap:32px;align-items:center}
@media(min-width:960px){.proc-in{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:52px}}
.process h2{color:var(--cream);margin:0;font-size:34px;line-height:1.02;letter-spacing:-.032em;
  max-width:11ch}
@media(min-width:960px){.process h2{font-size:42px}}
.process h2::after{display:none}
.proc-t .kick{margin-top:20px}
.steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:22px;counter-reset:none}
.steps li{display:flex;gap:18px;align-items:flex-start}
.steps .n{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--cream);flex:none;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.34);border-radius:50%;
  display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.steps h3{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.015em;
  margin:9px 0 0;color:var(--cream)}
.steps p{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--cream-85);max-width:34rem}
.proc-art{position:relative}
.process-video{position:relative;overflow:hidden;background:#000;aspect-ratio:16/10}
.process-video video{display:block;width:100%;height:100%;object-fit:cover}
/* the test page card. It sits on the repair film beside step 03, which is the step that says
   "Test pages run, quality checked, handed back working." */
.note-c{right:-14px;bottom:-26px;width:168px;transform:rotate(4deg);z-index:2;padding:16px 18px}
.note-c b{font-size:19px;letter-spacing:-.005em}
.note-c .cmyk{margin-top:12px;height:38px;width:100%}
.note-c .lines{margin-top:10px;line-height:1.95;font-size:8.5px}
@media(max-width:959px){.note-c{width:134px;right:8px;bottom:-18px;padding:13px 14px}
  .note-c b{font-size:16px}.note-c .cmyk{height:28px}.note-c .lines{font-size:7.5px}}
@media(max-width:560px){.note-c{display:none}}


/* ---- the strip: the reference's promises band ---- */
/* ---- the value strip. NAVY, 2026-09-13. Its own docstring in generate.py has said
   "three checkable statements on navy" since it was written; it has been painting pale grey
   blue, so it vanished between two pale sections instead of anchoring them. ---- */
.strip{padding:0;background:var(--fg);color:var(--cream)}
.strip .wrap{display:grid;gap:0;padding-top:0;padding-bottom:0}
@media(min-width:860px){.strip .wrap{grid-template-columns:repeat(3,1fr)}}
.strip .wrap>div{display:flex;gap:14px;align-items:center;padding:26px 0 26px 28px;
  border-left:1px solid rgba(255,255,255,.16)}
.strip .wrap>div:first-child{padding-left:0;border-left:0}
@media(max-width:859px){.strip .wrap>div{padding:18px 0;border-left:0;
  border-top:1px solid rgba(255,255,255,.16)}
  .strip .wrap>div:first-child{border-top:0}}
.strip .ic{width:30px;height:30px;flex:none;color:var(--cream);margin-top:0;stroke-width:1.4}
.strip .n{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;
  margin:0;color:var(--cream)}
.strip .t{margin:3px 0 0;font-size:13.5px;color:var(--cream-85);line-height:1.45}
.strip .t b{font-weight:400;color:var(--cream-85)}


/* ---- what needs fixing: a label and an icon where a paragraph used to be ---- */
/* ---- what needs fixing. NO CARDS, 2026-09-13: the reference puts the photograph straight
   on the ground with square corners and the label under it. ---- */
.headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:30px}
.headrow h2,.headrow h3{margin:0}
.headrow h2::after,.headrow h3::after{display:none}
.headrow .kick{padding-bottom:6px}
@media(max-width:600px){.headrow{gap:14px}.headrow .kick.right{text-align:left}
  .headrow .kick.right::after{margin-left:0}}
.fault-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}
@media(min-width:760px){.fault-list{grid-template-columns:repeat(3,1fr)}}
.fault-list a{display:block;text-decoration:none;color:inherit}
.fault-fr{position:relative;display:block;overflow:hidden}
.fault-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  background:var(--sage)}
@media(max-width:759px){.fault-img{aspect-ratio:16/9}}
.fault-t{display:block;font-family:var(--disp);font-weight:700;font-size:19px;
  letter-spacing:-.015em;margin-top:16px;color:var(--fg)}
.fault-list a:hover .fault-t{color:var(--brass)}
.fault-b{display:block;margin-top:4px;font-size:14px;color:var(--muted)}

/* ---- where we work: the service area schematic, written on 2026-09-08 and never used until now ---- */
.area{display:grid;gap:24px;align-items:start}
@media(min-width:900px){.area{grid-template-columns:minmax(260px,340px) 1fr;gap:36px}}
.svcmap{width:100%;height:auto;background:var(--card);border:1px solid var(--line);border-radius:0;
  padding:14px}
.svcmap .band{fill:var(--sage)}
.svcmap .band-2{fill:var(--secondary)}
.svcmap .cty{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  fill:var(--brass-dk)}
.svcmap .town{font-family:var(--sans);font-size:12px;fill:var(--muted)}
.svcmap .home{fill:var(--brass)}
.svcmap .homelabel{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--fg)}

/* ---- sections ---- */
section{padding:64px 0}
section.tight{padding:40px 0}
@media(max-width:640px){section{padding:48px 0}}
.s-ground{background:var(--bg)}
.s-sage{background:var(--sage);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2.sec{font-size:30px;line-height:1.15;margin:0 0 12px;max-width:36rem}
h2.sec::after{content:"";display:block;width:40px;height:3px;background:var(--clay);
  margin-top:14px}
.center h2.sec::after{margin-left:auto;margin-right:auto}
.reviews h2::after{content:"";display:block;width:40px;height:3px;
  background:var(--brass-lt);margin-top:16px}
@media(min-width:640px){h2.sec{font-size:36px}}
.sec-sub{color:var(--muted);margin:0 0 36px;font-size:16px;line-height:1.625;max-width:62ch}
.center{text-align:center;max-width:44rem;margin:0 auto}
.center h2.sec,.center .sec-sub,.center .prose{margin-left:auto;margin-right:auto}

.prose{font-size:16px;line-height:1.7;color:var(--fg);max-width:66ch}
.prose>*:first-child{margin-top:0}
.prose h3{font-size:22px;margin:32px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose b,.prose strong{font-weight:700}
.ed{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,66ch);gap:20px 56px;align-items:start}
@media(max-width:900px){.ed{grid-template-columns:1fr;gap:8px}}

/* ---- cards: the reference's bento ---- */
.cards{display:grid;gap:16px}
/* Four cards as of 2026-09-11. A lead card spanning three rows left most of it empty, measured in
   the 1280px render, so the lead runs full width with its call panel beside the text and the
   other three sit in a row beneath it. */
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}
  .card.lead{grid-column:1/-1;flex-direction:row;align-items:center;gap:40px}
  .card.lead>div:first-child{flex:1}
  .card.lead .inset{margin-top:0;flex:0 0 340px}}
.card{background:var(--card);border:1px solid var(--line);border-radius:0;padding:28px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .eyebrow{display:block}
.card h3{font-size:24px;line-height:1.33;margin:12px 0 0}
.card p{margin:12px 0 0;font-size:14px;line-height:1.625;color:var(--muted)}
.card .go{display:inline-block;margin-top:18px;font-size:14px;font-weight:700;color:var(--fg);
  text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:2px;
  text-underline-offset:5px}
.card .go::after{content:" \2192"}
.card .go:hover{color:var(--brass-dk)}
.card .inset{margin-top:32px;background:var(--secondary);border-radius:0;padding:20px}
.card .inset .big{font-family:var(--disp);font-size:18px;margin:0 0 16px;color:var(--fg)}

/* the old centred brand chips were replaced 2026-09-13 by the tracked line below */

.counties{display:grid;gap:16px}
@media(min-width:768px){.counties{grid-template-columns:repeat(3,1fr)}}
.county{background:var(--card);border:1px solid var(--line);border-radius:0;padding:28px}
.county h3{font-size:20px}
.county p{margin:12px 0 0;font-size:14px;line-height:1.9;color:var(--muted)}
.county a{color:var(--fg)}
.county a:hover{color:var(--brass-dk)}

/* ---- reviews: the trust band. Dustin: "make it playful and scrollable".
   Each review is a printout fresh off the machine: tractor-feed holes along the top, a slight
   tilt that straightens on hover or focus, and a brass stamp for the two word review that is
   also Randy's surname. Scrolls sideways with snap; the arrow buttons appear only once the
   script runs, so the band still works as a plain scroller without it.
   Contrast, measured 2026-09-11: cream on teal 9.65; brass-lt eyebrow on teal 5.40; card text
   fg on card 9.65; source label and stars brass-dk on card 5.57 (the lighter #9c6f10 measured
   4.34 on the built page and failed as text); stamp text
   #1e3841 on brass 5.26. The holes and the quote mark are decoration. ---- */
.reviews{background:var(--fg);color:var(--cream);padding:72px 0 56px;overflow:hidden}
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.reviews .eyebrow{color:var(--brass-lt)}
.reviews h2{color:var(--cream);font-size:30px;line-height:1.12;margin:12px 0 0}
@media(min-width:640px){.reviews h2{font-size:42px}}
.rv-sub{color:var(--cream-85);margin:12px 0 0;font-size:15px;line-height:1.6;max-width:34rem}
.rv-nav{display:flex;gap:10px;flex:none}
.rv-nav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:transparent;color:var(--cream);font-size:19px;cursor:pointer;
  transition:background-color .15s ease}
.rv-nav button:hover:not(:disabled){background:var(--cream);color:var(--fg)}
.rv-nav button:disabled{opacity:.35;cursor:default}
.reviews :focus-visible{outline:2px solid var(--brass-lt);outline-offset:3px}
@media(max-width:640px){.rv-nav{display:none}}
.rv-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,332px);gap:22px;
  align-items:start;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:40px max(32px,calc((100% - 1088px) / 2)) 36px;
  scroll-padding-inline:max(32px,calc((100% - 1088px) / 2));
  scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
@media(max-width:640px){.rv-track{grid-auto-columns:80%;padding-left:20px;padding-right:20px;
  scroll-padding-inline:20px}}
.rv{position:relative;margin:0;background:var(--card);color:var(--fg);scroll-snap-align:start;
  border-radius:4px 4px 18px 18px;padding:36px 24px 22px;
  box-shadow:0 22px 34px -22px rgba(0,0,0,.6);transform:rotate(-1.2deg);
  transition:transform .2s ease}
.rv:nth-child(2n){transform:rotate(.9deg) translateY(12px)}
.rv:nth-child(3n){transform:rotate(-.4deg) translateY(4px)}
.rv.rv-stamp{background:var(--brass);color:var(--accent-fg);transform:rotate(2.2deg) translateY(6px)}
.rv:hover,.rv:focus-within{transform:rotate(0) translateY(-4px)}
.rv::before{content:"";position:absolute;left:14px;right:14px;top:12px;height:8px;
  background:radial-gradient(circle,var(--line) 0 2.6px,transparent 3.2px) 0 0/18px 8px repeat-x}
.rv-mark{position:absolute;right:16px;top:14px;font-family:var(--disp);font-size:60px;line-height:.8;
  color:var(--brass)}
.rv-stars{margin:0 0 10px;color:var(--brass-dk);letter-spacing:3px;font-size:15px;line-height:1}
.rv blockquote{margin:0}
.rv blockquote p{margin:0;font-family:var(--disp);font-size:18px;line-height:1.5}
.rv details{margin-top:14px;font-size:14px;color:var(--muted)}
.rv summary{cursor:pointer;font-weight:700;color:var(--fg);text-decoration:underline;
  text-decoration-color:var(--brass);text-decoration-thickness:2px;text-underline-offset:4px}
.rv details p{margin:10px 0 0;line-height:1.6}
.rv figcaption{margin-top:18px;display:flex;flex-direction:column;gap:3px}
.rv figcaption b{font-size:14px}
.rv figcaption span{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-dk)}
.rv-stamp::before{display:none}
.rv-stamp blockquote p{font-size:46px;line-height:1;letter-spacing:-.03em;margin-top:6px}
.rv-stamp .rv-stars,.rv-stamp figcaption span{color:var(--accent-fg)}
.rv-note{margin:16px 0 0;font-size:14px;line-height:1.5}

/* ---- closing panel ---- */
section.cta{padding:0}
.cta-in{display:grid;background:var(--brass);color:#fff}
@media(min-width:900px){.cta-in{grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  align-items:stretch;min-height:392px}}
/* The copy column used to be max-width 640 AND margin-left auto AND a page-margin padding, so
   the three stacked and left about 444px of usable width inside a 741px column. The heading broke
   to three lines and the blue below it read as a hole. Dustin: "too heavily right aligned ...
   leaving a lot of empty blue space on the left." One inset now, matching the page margin. */
.cta-t{padding:48px 32px 52px;width:100%;display:flex;flex-direction:column;justify-content:center}
@media(min-width:900px){.cta-t{padding:60px 56px 60px 32px}}
@media(min-width:1216px){.cta-t{padding-left:calc((100vw - 1152px) / 2 + 32px)}}
@media(max-width:640px){.cta-t{padding:40px 20px 44px}}
/* 13ch held this to three short lines inside a column wide enough for two */
.cta-t h2{color:#fff;font-size:32px;line-height:1.02;letter-spacing:-.032em;margin:0;
  max-width:17ch}
@media(min-width:640px){.cta-t h2{font-size:44px}}
.cta-t h2::after{display:none}
.cta-t .acts{margin-top:26px}
.cta-t .btn-w{background:#fff;color:var(--brass)}
.cta-t .btn-w:hover{background:var(--bg);color:var(--brass-dk)}
.cta-t p{color:#dfe8ff;font-size:14px;line-height:1.6;max-width:30rem;margin:20px 0 0}
.cta-t p a{color:#fff}
.cta-t .kick{margin-top:28px;color:#cddaff}
.cta-t .kick::after{background:rgba(255,255,255,.5)}
.cta-art{position:relative;min-height:230px;background:var(--fg)}
.cta-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta :focus-visible{outline-color:#fff}
/* the brand line: names, tracked, under the micro label */
/* no max-width: at 46rem this wrapped to two lines on desktop for no reason */
.brand-sub{margin:0 0 22px;font-size:15px;line-height:1.55;color:var(--muted)}
.brands{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 28px;
  font-family:var(--disp);font-weight:500;font-size:18px;letter-spacing:-.012em;color:var(--fg)}
.brands li{padding:6px 0;position:relative}
.brands li+li::before{content:"";position:absolute;left:-15px;top:50%;width:3px;height:3px;
  background:var(--clay);transform:translateY(-50%)}
@media(max-width:560px){.brands{gap:0 18px;font-size:16px}
  .brands li+li::before{left:-10px}}
.cta-panel .prov{border-bottom-color:var(--brass)}

/* ---- support page: remote support card, its dialog, and the driver links ---- */
.remote-card{background:var(--card);border:1px solid var(--line);border-radius:0;padding:28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.remote-card .sec-sub{margin-bottom:0}
.remote-dialog{border:0;border-radius:0;padding:28px;max-width:28rem;width:calc(100% - 40px);
  background:var(--card);color:var(--fg);box-shadow:var(--shadow)}
.remote-dialog::backdrop{background:rgba(30,56,65,.55)}
.remote-dialog h2{font-size:26px;margin:0 0 10px}
.remote-dialog p{margin:0 0 12px;line-height:1.6;color:var(--muted)}
.remote-dialog .acts{margin-top:20px}
.drivers{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.drivers a{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);
  border-radius:0;padding:16px 18px;text-decoration:none;color:var(--fg);min-height:44px;
  transition:transform .15s ease,box-shadow .15s ease}
.drivers a:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--fg)}
.drivers b{font-family:var(--disp);font-weight:400;font-size:20px}
.drivers span{font-size:13px;color:var(--muted)}
.drivers em{font-style:normal}

/* ---- records and the form ---- */
.sheet{background:var(--card);border:1px solid var(--line);border-radius:0;overflow:hidden}
.sheet .sh{padding:16px 22px;border-bottom:1px solid var(--line);background:var(--sage);
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-dk);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sheet dl{margin:0;display:grid;grid-template-columns:auto 1fr}
@media(max-width:600px){.sheet dl{grid-template-columns:1fr}}
.sheet dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:14px 26px 14px 22px;border-bottom:1px solid var(--line);white-space:nowrap}
.sheet dd{margin:0;padding:14px 22px;border-bottom:1px solid var(--line);font-size:15px}
@media(max-width:600px){.sheet dt{border-bottom:0;padding-bottom:0}.sheet dd{padding-top:4px}}

.form{background:var(--card);border:1px solid var(--line);border-radius:0;padding:28px}
.form .row{margin-bottom:16px}
.form label{display:block;font-size:14px;font-weight:700;color:var(--fg);margin-bottom:7px}
.form input,.form textarea{width:100%;font-family:inherit;font-size:16px;padding:12px 14px;
  border:1px solid var(--input);border-radius:0;background:var(--bg);color:var(--fg)}
.form input:focus,.form textarea:focus{outline:2px solid var(--fg);outline-offset:1px;
  background:var(--card)}
.form .hint{font-size:14px;color:var(--muted);margin:10px 0 0;line-height:1.6}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form .two{grid-template-columns:1fr}}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

figure.ph{margin:26px 0 0;max-width:450px}
figure.ph img{width:100%;border:1px solid var(--line);border-radius:0}
figure.ph figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.5}

/* ---- footer, on teal, where the cream logo lives ---- */
footer{background:var(--fg);color:var(--cream-85);padding:56px 0 32px;font-size:14px}
/* The SBE logo has black lettering, which vanishes on teal. It is never recoloured (Chase: keep the
   brand consistent with the machine stickers), so in the footer it sits on its own white plate. */
footer .fmk{display:inline-block;background:#fff;border-radius:0;padding:10px 14px}
footer .fmk img{height:40px;width:auto}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-top:36px}
@media(max-width:900px){footer .cols{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:540px){footer .cols{grid-template-columns:1fr;gap:24px}}
footer h3{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-lt);margin:0 0 12px}
footer a{color:var(--cream-85);text-decoration:none;display:block;padding:3px 0}
footer a:hover{color:var(--cream);text-decoration:underline}
footer :focus-visible{outline-color:var(--brass-lt)}
footer .nap{line-height:1.8}
footer .nap .biz{font-family:var(--disp);color:var(--cream);font-size:20px;display:block;margin-bottom:8px}
footer .nap a{display:inline}
footer .tenure{display:inline-block;margin-top:10px;font-size:13px;color:var(--cream-70)}
footer .prov{border-bottom-color:var(--brass)}
footer .legal{border-top:1px solid rgba(255,255,255,.2);margin-top:36px;padding-top:20px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;display:flex;gap:10px 24px;flex-wrap:wrap}
footer .legal a{display:inline;color:var(--cream-70)}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .btn:hover,.card:hover{transform:none}
}

/* ================================================================================
   THE COLLATERAL KIT, 2026-09-13.
   The reference's signature is print production ephemera: tilted cream cards with marker
   handwriting, CMYK colour bars, a registration mark, a yellow sticky note. Dustin, asked
   whether to copy it: "that may be your miss here ... the thing that separates this site
   visually ... the pop". It is not decoration borrowed from somewhere else. These are the
   artefacts a copier makes and a copier company handles all day, which is why they belong
   here and would not belong on another client's site.
   Every piece of it is aria-hidden. None of it carries information a reader needs.
   ================================================================================ */

/* tracked capital micro label, with the citron rule under it. The reference puts this at the
   RIGHT of a heading row, not above the heading the way our eyebrow did. */
.kick{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0;line-height:1.55}
.kick::after{content:"";display:block;width:38px;height:3px;background:var(--clay);margin-top:10px}
.kick.on-dark{color:var(--cream-85)}
.kick.right{text-align:right}
.kick.right::after{margin-left:auto}

/* a tilted card of company collateral. Cream stock, a marker hand, a hairline shadow. */
.note{position:absolute;background:#f6f4ec;color:#14161a;padding:16px 18px 18px;font-weight:700;
  box-shadow:0 16px 34px -18px rgba(10,20,35,.55);font-family:var(--hand);line-height:1.15;
  border:1px solid rgba(20,22,26,.08)}
.note b{display:block;font-family:var(--disp);font-weight:700;letter-spacing:-.01em;
  text-transform:uppercase;line-height:.98}
.note .rule{display:block;height:3px;background:var(--clay);width:44px;margin-top:12px}
.note .lines{display:block;margin-top:10px;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:#5d6470;line-height:2.1}

/* the CMYK strip. Cyan magenta yellow black, the four toners in the machine. */
.cmyk{display:flex;gap:4px;height:44px;width:96px}
.cmyk i{flex:1;display:block}
.cmyk i:nth-child(1){background:#12a5e0}
.cmyk i:nth-child(2){background:#e8368f}
.cmyk i:nth-child(3){background:var(--clay)}
.cmyk i:nth-child(4){background:#14161a}
.cmyk.tall{height:72px;width:110px}

/* registration mark, the crosshair on a press sheet */
.regmark{width:26px;height:26px;opacity:.5}

/* the navy square arrow, sitting on the bottom right corner of a photograph */
.gobtn{position:absolute;right:0;bottom:0;width:46px;height:46px;background:var(--fg);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;
  line-height:1;transition:background .15s}
a:hover>.gobtn,a:focus-visible>.gobtn{background:var(--brass)}


/* the NE arrow on a link, with air before it */
.ne{margin-left:.4em;font-size:.86em;display:inline-block}

/* ---- the offer row, 2026-09-13. Blue promo, two machine panels, a slim bar. ---- */
.offer-row{display:grid;gap:16px}
@media(min-width:980px){.offer-row{grid-template-columns:minmax(0,56fr) minmax(0,44fr)}}
.promo{background:var(--brass);color:#fff;display:grid;align-items:stretch;overflow:hidden}
@media(min-width:640px){.promo{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}}
.promo-t{padding:32px 30px 34px;display:flex;flex-direction:column;justify-content:center}
.promo-t h3{font-family:var(--disp);font-weight:700;font-size:31px;line-height:1;
  letter-spacing:-.03em;margin:0;color:#fff}
.promo-t .rule{display:block;width:38px;height:3px;background:var(--clay);margin:18px 0 0}
.promo-t p{margin:16px 0 0;font-size:15px;line-height:1.5;color:#e2ebff;max-width:26rem}
.promo-t .btn-w{margin-top:24px;align-self:flex-start;background:#fff;color:var(--brass)}
.promo-t .btn-w:hover{background:var(--bg);color:var(--brass-dk)}
.promo-art{position:relative;min-height:230px}
.promo-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sticky{position:absolute;right:14px;top:22px;background:var(--clay);color:#14161a;
  padding:10px 12px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;line-height:1.9;transform:rotate(-2.5deg);
  box-shadow:0 10px 22px -14px rgba(10,20,35,.6)}
.oitems{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.oitem{background:var(--sage);color:var(--fg);text-decoration:none;display:flex;
  flex-direction:column;padding:24px 22px 0;position:relative;overflow:hidden;min-height:230px}
.oitem h3{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1;
  letter-spacing:-.03em;margin:0}
.oitem p{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.oitem-fr{position:relative;display:block;margin:auto -22px 0;padding:0 22px}
.oitem-fr img{display:block;width:78%;margin:0 auto;height:auto}
.oitem:hover h3{color:var(--brass)}
@media(max-width:520px){.oitems{grid-template-columns:1fr}}
/* the slim bar */
.tbar{margin-top:16px;background:var(--secondary);display:flex;align-items:center;gap:20px;
  text-decoration:none;color:var(--fg);padding-right:26px;overflow:hidden}
.tbar img{width:150px;height:75px;object-fit:cover;flex:none}
.tbar-t{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.015em;flex:1}
.tbar:hover .tbar-t{color:var(--brass)}
.tbar .kick{margin:0;flex:none}
.tbar .kick::after{display:none}
@media(max-width:720px){.tbar{padding:0 18px 16px;flex-wrap:wrap;gap:12px}
  .tbar img{width:110px;height:56px;margin-left:-18px}
  .tbar-t{font-size:15px;flex:1 1 auto}.tbar .kick{flex:1 1 100%}}

/* ---- the promise: his own sentence broken into what actually happens. FULL WIDTH, third
   rebuild 2026-09-14. The clipboard photograph is gone: it was stock, it was not about copiers,
   and the half empty bone column beside it made the band read as a picture looking for a
   caption. ---- */
.promise .headrow{margin-bottom:34px}
.beats{list-style:none;margin:0;padding:0;display:grid;gap:26px}
@media(min-width:820px){.beats{grid-template-columns:repeat(3,1fr);gap:0}}
.beats li{padding-top:20px;border-top:2px solid var(--fg)}
@media(min-width:820px){.beats li{padding:20px 34px 0 0}
  .beats li+li{padding-left:34px;border-left:1px solid var(--line)}}
@media(max-width:819px){.beats li{border-top-width:1px;border-top-color:var(--line)}
  .beats li:first-child{border-top:2px solid var(--fg)}}
.beats .bn{display:block;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.18em;color:var(--brass);margin-bottom:12px}
.beats h3{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.02em;margin:0;
  color:var(--fg)}
.beats p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--muted);max-width:30rem}
/* On a phone the three stacked beats ran the band to 690px, worse than the 524px the split
   version had been tightened to. Same content, less air. */
@media(max-width:819px){.beats{gap:0}
  .beats li{padding:14px 0}
  .beats .bn{margin-bottom:6px;font-size:10px}
  .beats h3{font-size:18px}
  .beats p{font-size:14px;margin-top:4px}}
@media(max-width:640px){.promise .headrow{margin-bottom:22px}}

/* ---- where we work. A real map that bleeds, 2026-09-13. Second pass: the first one tinted the
   served counties, had no lakes, and sat in a bordered column with the county names repeated
   beside it. ---- */
.area-s{padding:0;overflow:hidden}
.area{display:grid;align-items:center}
@media(min-width:980px){.area{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}}
.area-t{padding:56px 0}
@media(max-width:979px){.area-t{padding:48px 0 28px}}
.area-wrap{max-width:calc((1152px - 64px) * .38 + 32px);margin-right:0}
@media(max-width:1215px){.area-wrap{max-width:none}}
@media(min-width:1216px){.area-wrap{margin-left:auto;padding-right:40px}}
.area-t h2.sec{margin:0 0 18px;font-size:31px;line-height:1.04;letter-spacing:-.032em;max-width:12ch}
@media(min-width:760px){.area-t h2.sec{font-size:38px}}
.area-t h2.sec::after{display:none}
.area-lede{margin:0 0 26px;font-size:17px;line-height:1.55;color:var(--muted);max-width:26rem}
.area-t .kick{margin-top:26px}
.area-map{position:relative;min-height:300px}
@media(max-width:979px){.area-map{margin:0 -20px}}
.pmap{width:100%;height:auto;display:block}
.pmap .w8r{fill:#9ecff5}
.pmap .ld{fill:var(--bg);stroke:#d5cfc0;stroke-width:.9;stroke-linejoin:round}
.pmap .dot{fill:var(--fg)}
.pmap .pin{fill:var(--brass)}
.pmap .pin-h{fill:#fff}
.pmap .city{font-family:var(--sans);font-size:16px;font-weight:700;fill:var(--fg)}
.pmap .cty{font-family:var(--disp);font-size:17px;font-weight:700;fill:var(--fg);
  letter-spacing:-.015em}
.pmap .mono{font-family:var(--mono);font-size:10px;font-weight:700;fill:var(--muted);
  letter-spacing:.13em}
.pmap .lead{stroke:#b9b2a0;stroke-width:1}
/* the county list inside the area band: stacked rows, not three squeezed cards */
.area-t .county a:hover{color:var(--brass);border-bottom-color:var(--brass)}
/* the footer's closing line, 2026-09-13: the reference ends on a tracked caps tagline */
footer .legal{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap}
footer .legal-l{display:flex;gap:26px;flex-wrap:wrap}
footer .legal .kick{margin:0;color:var(--cream-70)}
footer .legal .kick::after{margin-left:auto;background:rgba(255,255,255,.42)}
@media(max-width:640px){footer .legal{align-items:flex-start}
  footer .legal .kick::after{margin-left:0}}

/* section headings, sized up 2026-09-13: the reference sets them large and heavy */
.headrow h2{font-family:var(--disp);font-weight:700;font-size:31px;line-height:1.04;
  letter-spacing:-.032em;color:var(--fg);max-width:20ch}
@media(min-width:760px){.headrow h2{font-size:38px}}
/* the reviews band joins the heading pattern. It was the last section still putting a blue
   eyebrow above the heading, which made it the odd one out once everything else moved. */
.reviews .rv-head{align-items:flex-end}
.reviews h2{font-size:31px;line-height:1.04;letter-spacing:-.032em;margin:0}
@media(min-width:760px){.reviews h2{font-size:38px}}
.reviews h2::after{display:none}
.reviews .rv-sub{margin-top:14px}
.rv-kick{align-self:flex-end}
@media(max-width:720px){.rv-kick{display:none}}

/* the cities as one wrapped line beside the map, 2026-09-13 */
.cityline{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 22px;max-width:26rem}
.cityline li{position:relative;padding:5px 0}
.cityline li+li::before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;
  background:var(--clay);transform:translateY(-50%)}
.cityline a{color:var(--muted);text-decoration:none;font-size:15px;
  border-bottom:1px solid var(--line)}
.cityline a:hover{color:var(--brass-dk);border-bottom-color:var(--brass)}

/* ---- the manufacturer marks, 2026-09-13, widened and put into full colour 2026-09-14.
   Nominative use; see assets/brand-marks/SOURCES.md.
   IN COLOUR ON DUSTIN'S CALL. The reference's own bar is black. To go back to one ink, add
   `filter:grayscale(1) contrast(1.35)` to `.logorow li` and nothing else changes. ---- */
/* seven across, so thirteen marks fall 7 and 6 rather than 6, 6 and a single orphan */
.logorow{list-style:none;margin:0;padding:26px 0;display:grid;align-items:center;
  grid-template-columns:repeat(7,1fr);gap:30px 22px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logorow li{display:flex;align-items:center;justify-content:center;min-height:42px}
.logorow .mk{display:block;width:auto;max-width:100%;height:26px}
/* optically matched, not one number: a stacked mark needs more height than a line of type */
.mk-konica-minolta .mk{height:42px}
.mk-hp .mk{height:38px}
.mk-oki .mk{height:32px}
.mk-ricoh .mk{height:26px}
.mk-brother .mk{height:22px}
.mk-kyocera .mk{height:21px}
.mk-canon .mk{height:20px}
.mk-xerox .mk{height:21px}
.mk-lexmark .mk{height:20px}
.mk-toshiba .mk{height:19px}
.mk-sharp .mk{height:17px}
.mk-hitachi .mk{height:17px}
.logorow-tail{margin:22px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.logorow-tail a{color:var(--brass);font-weight:600}
@media(max-width:900px){.logorow{grid-template-columns:repeat(5,1fr);gap:26px 18px}}
@media(max-width:560px){.logorow{grid-template-columns:repeat(3,1fr);gap:22px 16px;padding:22px 0}
  .logorow .mk{height:20px}.mk-konica-minolta .mk{height:34px}.mk-hp .mk{height:30px}
  .mk-oki .mk{height:25px}.mk-ricoh .mk{height:21px}
  .mk-brother .mk{height:17px}.mk-kyocera .mk{height:16px}.mk-canon .mk{height:15px}
  .mk-xerox .mk{height:16px}.mk-lexmark .mk{height:15px}.mk-toshiba .mk{height:14px}
  .mk-sharp .mk{height:13px}.mk-hitachi .mk{height:13px}}

/* the accessible name behind each manufacturer mark. The SVG is aria-hidden, so without this a
   screen reader reaches a list of six empty items. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
/* the image credit on /facts/. Small, but it has to actually reach a reader: a licence that
   requires attribution is not satisfied by a note in the repo. */
.credits{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.credits h2{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.credits h2::after{display:none}
.credits p{font-size:13px;color:var(--muted);margin:0}

/* ---- phone vertical space, 2026-09-14. Dustin on both of these: "take up less vertical space
   on mobile". Measured before and after, at 390px, in the section-shot probe. ---- */
@media(max-width:640px){
  /* where we work: 753px, of which the city links wrapped to four rows. */
  .area-t{padding:36px 0 22px}
  .area-t h2.sec{font-size:27px;margin-bottom:14px}
  .area-lede{margin-bottom:18px;font-size:15px}
  .cityline{gap:0 18px;max-width:none}
  .cityline li{padding:3px 0}
  .cityline a{font-size:14px}
  .area-t .kick{margin-top:18px}
  .area-map{min-height:0}
}
/* the map's city labels are links now: they need to look like it on hover and focus */
.pmap .cl{cursor:pointer}
.pmap .cl:hover .city,.pmap .cl:focus-visible .city{fill:var(--brass)}
.pmap .cl:hover .dot{fill:var(--brass)}
.pmap .cl:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---- our credit in the client's footer, 2026-09-14. Replaces "A more productive tomorrow",
   which was a slogan that said nothing. The mark is the real one from narrowsweb.com, copied
   rather than redrawn. ---- */
/* `footer .legal a` sets display:inline and outranks `footer .nwc`, and as a flex item that
   blockifies to display:block, so align-items:center here was doing nothing and the mark sat
   on the text baseline. a.nwc outranks it. */
footer .legal a.nwc{display:inline-flex;align-items:center;gap:9px;color:var(--cream-70);
  text-decoration:none;padding:4px 0}
footer .legal a.nwc svg{width:26px;height:auto;flex:none}
/* the lockup, as narrowsweb.com sets it: mono, tracked, with WEB picked out in the magenta.
   MEASURED: the brand magenta #D81E7F is 3.57 on this navy, which clears the 3:1 for the mark's
   stroke and does NOT clear 4.5 for 10px type. The TEXT therefore uses #E8579B, the same hue
   lightened, at 5.08. The mark keeps the real colour.
   `footer .legal` sets text-transform:uppercase for the small print, which was uppercasing our
   own name as well; the lockup opts out. */
footer .nwc .lo{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:none}
footer .nwc .lo b{color:#E8579B;font-weight:700}
footer .nwc:hover{color:#fff;text-decoration:none}