@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/zilla-slab-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/source-sans-3-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
/* Manotick.co — the Rideau, mill limestone, and machinery copper.
   Every text pair below is verified at WCAG AA (4.5:1) or better. */
/* Mariner palette. The old scheme was warm limestone and river green — quiet,
   but it read as tentative, and a directory people are meant to trust should not
   look tentative. This is navy: charts, hulls, brass fittings, cold water.
   Every pair below is verified against WCAG AA by tests/contrast.mjs, which
   fails the build rather than trusting anyone's eye. */
:root{
  --ink:#0B2239; --ink-soft:#4A5F75;
  --navy-deep:#071A2C; --navy:#0F3E63; --navy-mid:#17578A;
  --harbour:#8FC1E3; --tint:#E7EFF6;
  --sail:#F4F7FA; --paper:#FFFFFF; --stone:#EDF2F7;
  --brass:#8A6414; --brass-lt:#E0BC6A;
  --signal:#B23A16; --signal-lt:#E08A63;
  /* Two different jobs, two different tokens. --rule is a decorative hairline
     between sections, which WCAG does not hold to a contrast minimum. --edge is
     the boundary of something you can click or type into, which WCAG 1.4.11
     requires to reach 3:1. Using one token for both is how input borders end up
     invisible to anyone with less than perfect sight. */
  --rule:#D4DEE7; --edge:#74899E; --max:72rem;
  /* Secondary text on the navy grounds. Not --harbour: harbour reads as a link,
     and footer body copy that looks clickable is a small lie told 40 times a page. */
  --fog:#AFC2D6; --fog-dim:#93A6BB;
  /* Pale wash of the signal, for the LOCAL badge. */
  --signal-tint:#FAECE6;
  /* Aliases so the mariner names can land without rewriting every rule at once. */
  --river-deep:var(--navy-deep); --river:var(--navy); --river-mid:var(--navy-mid);
  --river-tint:var(--tint); --copper:var(--signal); --copper-lt:var(--signal-lt);
  --brass-text:var(--brass);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Utility classes, not inline styles. A strict CSP blocks style="" attributes,
   and the honeypot field losing its offscreen positioning would render a stray
   visible input on every form — which the spam filter then rejects as a bot. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.mt1{margin-top:1rem}
.pad-lg{padding:4rem 1.25rem}
html{-webkit-text-size-adjust:100%}
body{font:400 1.0625rem/1.65 "Source Sans 3",system-ui,sans-serif;color:var(--ink);background:var(--stone)}
h1,h2,h3,.wordmark{font-family:"Zilla Slab",Georgia,serif;line-height:1.15;font-weight:600}
h1{font-size:clamp(1.9rem,4.5vw,3rem);letter-spacing:-.01em}
h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin:2.4rem 0 .8rem}
a{color:var(--river);text-underline-offset:3px}
a:hover{color:var(--river-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.prose{max-width:44rem}
/* .wrap sets 72rem and .prose 44rem, so "wrap prose" centred a 44rem column while
   the page heading above it sat in a 72rem one — on a 1440px screen the body copy
   started 224px to the right of its own H1. Keep the reading measure, but hang it
   off the same left edge as the heading. */
.wrap.prose{max-width:var(--max)}
.wrap.prose > *{max-width:46rem}
/* One content column, one right edge. The ledger used to sit 96px wider than the
   prose above it, which reads as a mistake rather than as emphasis. Card grids
   below are deliberately wider — they look like a different kind of block, so
   breaking the measure there reads as intent. */
.wrap.prose > .ledger,.wrap.prose > .dirwrap,.wrap.prose > table{max-width:46rem}
.wrap.prose > .guide,.wrap.prose > .cat-grid{max-width:60rem}
/* Pages with a right rail wrap their content in .col-main; the same measure
   rules apply one level down so nothing changes visually below the rail width. */
.wrap.prose > .col-main{max-width:none}
.col-main > *{max-width:46rem}
.col-main > .guide,.col-main > .cat-grid{max-width:60rem}
.prose p{margin:0 0 1.1rem}

/* header */
header.site{background:var(--river-deep);color:var(--paper);border-bottom:1px solid rgba(217,190,126,.22)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.25rem}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;color:var(--paper);text-decoration:none;font-family:"Zilla Slab",Georgia,serif;font-size:1.45rem;font-weight:600;letter-spacing:-.005em;line-height:1}
.wordmark b{color:var(--brass-lt);font-weight:600}
.wordmark .mk-header{flex:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.wordmark:hover .wm-text{text-decoration:underline;text-decoration-color:var(--brass-lt);text-underline-offset:4px}
nav.top{display:flex;gap:.35rem 1rem;flex-wrap:wrap;font-size:.95rem}
/* min 44px tap height: WCAG 2.5.8 / iOS HIG. These were 16-25px. */
nav.top a{color:var(--fog);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 .15rem}
nav.top a:hover{color:var(--paper);text-decoration:underline}

/* ---- home: deliberately quiet. One thing to do. ---- */
.home-hero{position:relative;overflow:hidden;padding:4.2rem 0 3.2rem;text-align:center;color:var(--paper);background:linear-gradient(180deg,var(--navy-deep) 0%,var(--navy) 100%);border-bottom:3px solid var(--brass-lt)}
.home-hero::before{content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;background:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%2764%27 viewBox=%270 0 320 64%27%3E%3Cpath d=%27M0 32c40-18 80-18 120 0s80 18 120 0 60-18 80-9%27 fill=%27none%27 stroke=%27%23E0BC6A%27 stroke-opacity=%27.22%27 stroke-width=%271.4%27/%3E%3Cpath d=%27M0 52c40-18 80-18 120 0s80 18 120 0 60-18 80-9%27 fill=%27none%27 stroke=%27%23E0BC6A%27 stroke-opacity=%27.12%27 stroke-width=%271.4%27/%3E%3C/svg%3E") repeat left bottom/320px 64px;-webkit-mask-image:linear-gradient(180deg,transparent,#000);mask-image:linear-gradient(180deg,transparent,#000)}
.home-hero > .wrap{position:relative}
.millmark{display:block}
.mk-hero{margin:0 auto 1.4rem;width:104px;height:auto}
.mk-header{width:40px;height:40px;margin:0}
.millmark .mk-disc{fill:var(--paper)}
.millmark .mk-ring{fill:none;stroke:var(--brass);stroke-width:2}
.millmark .mk-fig{fill:var(--navy-deep)}
.millmark .mk-cut{fill:var(--paper)}
.millmark .mk-water{stroke:var(--brass);stroke-width:3.4;stroke-linecap:round}
.millmark .mk-tick{stroke:var(--brass);stroke-width:2.4;stroke-linecap:round}
.home-hero .wordmark-lg{font-family:"Zilla Slab",Georgia,serif;font-size:clamp(2.4rem,6vw,3.6rem);font-weight:600;letter-spacing:-.01em;color:var(--paper);line-height:1;margin:0}
/* The wordmark is the brand; the h1 is the promise. Search engines and language
   models both read the h1 as what this page is for, and "Manotick.co" answers
   that with a domain name. The visual hierarchy is unchanged — the h1 sits
   under the mark at subtitle size — but the machine-readable one is now right. */
.home-hero .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt);margin:0 0 1rem}
.home-hero .home-h1{font-family:"Zilla Slab",Georgia,serif;font-weight:600;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.1;letter-spacing:-.012em;color:var(--paper);margin:0 auto;max-width:20ch;text-wrap:balance}
.home-hero .home-h1 em{font-style:normal;color:var(--brass-lt)}
.home-hero .wordmark-lg b{color:var(--brass-lt);font-weight:600}
.home-hero .tag-line{margin-top:.9rem;font-size:1.16rem;color:var(--harbour)}
.home-hero .wordmark-lg b{color:var(--brass-lt)}
/* The two-verb hero. Get is the filled primary; Give is the outlined twin —
   equal size, because the upload IS the product, not a footnote to it. */
.cta-row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.8rem 2rem;border-radius:4px;font-size:1.08rem;font-weight:600;text-decoration:none}
.cta-get{background:var(--paper);color:var(--navy-deep);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.cta-get:hover{background:var(--tint);color:var(--navy-deep)}
.cta-give{border:2px solid var(--brass-lt);color:var(--brass-lt)}
.cta-give:hover{background:rgba(224,188,106,.12);color:var(--brass-lt)}
.cta-sub{margin:1rem auto 0;max-width:34rem;font-size:.95rem;color:var(--fog)}
.searchwrap{max-width:36rem;margin:2.2rem auto 0;position:relative}
.searchwrap input{width:100%;font:400 1.12rem/1.4 "Source Sans 3",system-ui,sans-serif;padding:1.05rem 1.15rem;border:1px solid var(--paper);border-radius:4px;background:var(--paper);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.searchwrap input:focus{box-shadow:0 8px 24px rgba(0,0,0,.34)}
.searchwrap input::placeholder{color:var(--ink-soft)}
.searchwrap input:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
/* The eight most-searched trades, as chips. Previously dot-separated inline
   links with a 21px tap height — the single most-tapped element on the site,
   below the 44px minimum, on the page the whole business funnels through. */
.popular{margin:1.6rem auto 0;max-width:46rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;font-size:.97rem}
.popular a{display:inline-flex;align-items:center;min-height:44px;padding:.45rem .9rem;color:var(--river-deep);background:var(--paper);border:1px solid var(--edge);border-radius:999px;text-decoration:none;line-height:1.2}
.popular a:hover,.popular a:focus-visible{border-color:var(--brass-lt);background:#fff;color:var(--navy)}
.popular .lab{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-lt);width:100%;margin-bottom:.35rem}
.popular.mt1{display:block}

#results{max-width:36rem;margin:1.1rem auto 0;text-align:left}
#results a{display:block;padding:.65rem .95rem;background:var(--paper);border:1px solid var(--edge);border-left:4px solid var(--river);border-radius:3px;margin-bottom:.35rem;text-decoration:none;color:var(--ink)}
#results a:hover,#results a:focus-visible{border-color:var(--river);border-left-color:var(--copper);background:#fff}
#results a b{font-family:"Zilla Slab",serif;font-weight:600}
#results .none{padding:.6rem .9rem;color:var(--ink-soft);font-size:.95rem}

.home-links{max-width:46rem;margin:2.6rem auto 0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.22);display:flex;gap:.2rem 1.4rem;justify-content:center;flex-wrap:wrap;font-size:.98rem}
.home-links .lab{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-lt);width:100%;text-align:center;margin-bottom:.3rem}
.home-links a{color:var(--harbour);text-decoration:none;border-bottom:1px solid transparent;display:inline-flex;align-items:center;min-height:44px}
.home-links a:hover,.home-links a:focus-visible{color:var(--paper);border-bottom-color:var(--brass-lt)}
.home-about-band{background:var(--stone);padding:3.2rem 0 1rem}
.home-news-band{background:var(--sail);padding:2.4rem 0 .6rem;border-top:1px solid var(--rule)}
.home-news-band .lead-form{max-width:46rem;margin:0 auto}
.home-about{max-width:38rem;margin:0 auto;text-align:left}
.home-about h2{color:var(--navy-deep)}
.home-about h2{font-size:1.18rem;margin:0 0 .7rem;color:var(--river-deep)}
.home-about p{font-size:.95rem;color:var(--ink-soft);line-height:1.72;margin:0 0 .85rem}
.home-about p:last-child{margin-bottom:0}
.home-about a{color:var(--river)}

/* hero */
.hero{background:linear-gradient(165deg,var(--navy-deep) 0%,var(--navy) 62%,var(--navy-mid) 100%);color:var(--paper);padding:3.5rem 0 3rem;border-bottom:3px solid var(--brass-lt)}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:1rem}
.hero h1{color:var(--paper);max-width:46rem}
.hero p.sub{max-width:40rem;margin-top:1rem;color:var(--harbour);font-size:1.15rem}
.pillars{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:2.25rem}
.pillar{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.20);padding:1.1rem 1.2rem;border-radius:4px;color:var(--paper);text-decoration:none;display:block}
.pillar:hover{background:rgba(255,255,255,.13);color:var(--paper)}
.pillar b{font-family:"Zilla Slab",serif;font-size:1.1rem;display:block;margin-bottom:.3rem}
.pillar span{color:var(--fog);font-size:.95rem}

/* page head band */
.pagehead{padding:2.9rem 0 1.7rem;border-bottom:1px solid var(--rule);background:linear-gradient(180deg,var(--river-tint) 0%,rgba(231,239,246,0) 100%)}
.pagehead h1{color:var(--river-deep)}
.crumbs{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.9rem}
.crumbs a{color:var(--ink-soft);display:inline-block;padding:.62rem .1rem;line-height:1}
main{padding:2rem 0 4rem}
/* The home hero is a full-bleed band that has to meet the header with no seam. */
main:has(> .home-hero){padding-top:0}
main > .home-hero:first-child{margin-top:0}

/* THE SIGNATURE: rate ledger */
.ledger{margin:1.8rem 0 2.2rem;background:var(--paper);border:1.5px solid var(--river-deep);border-radius:4px;overflow:hidden;box-shadow:5px 5px 0 rgba(7,26,44,.14)}
.ledger-cap{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.75rem 1rem;background:linear-gradient(180deg,var(--navy-deep),var(--navy));color:var(--paper);font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--brass-lt)}
.ledger-cap .stamp{color:var(--brass-lt);white-space:nowrap}
.ledger table{width:100%;border-collapse:collapse;font-family:"IBM Plex Mono",monospace;font-size:.92rem}
.ledger td{padding:.65rem 1rem;border-top:1px solid var(--rule);vertical-align:top}
.ledger tr:first-child td{border-top:0}
.ledger tbody tr:nth-child(even) td,.ledger tr:nth-child(even) td{background:rgba(231,239,246,.55)}
.ledger td:last-child{text-align:right;white-space:nowrap;font-weight:600;color:var(--copper);font-variant-numeric:tabular-nums}
.ledger-note{padding:.8rem 1rem;font-size:.86rem;color:var(--ink-soft);border-top:1px dashed var(--rule);background:var(--sail)}
.ledger-note b{color:var(--ink)}
/* unverified ledgers must not look checked */
.ledger-stale{border-style:dashed;border-color:var(--brass)}
.ledger-stale .ledger-cap{border-bottom:2px dashed var(--signal-lt)}
.ledger-cap .stamp.stale{color:var(--signal-lt);border:1px solid var(--signal-lt);padding:.12rem .45rem;border-radius:2px}
.ledger caption{text-align:left;padding:.7rem 1rem;font-size:.82rem;color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.ledger thead th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:.5rem 1rem;border-bottom:1px solid var(--rule);font-weight:500}
.ledger thead th:last-child{text-align:right}
.ledger tbody th{font-weight:400;text-align:left}
.ledger .table-hint{display:none;font-size:.78rem;color:var(--ink-soft);padding:.4rem 1rem 0;margin:0}
@media (max-width:34rem){.ledger .table-hint{display:block}}
.ledger-draft{border-style:dashed;border-color:var(--ink-soft);box-shadow:5px 5px 0 rgba(74,95,117,.14)}
/* The draft cap used to go slate, which greyed out the site's signature element on
   every one of the 34 service pages — the ledgers are all unverified at launch, so
   "draft" was reading as "disabled" sitewide. The dashed body border and the brass
   UNVERIFIED stamp already say the figures are not confirmed; the cap does not need
   to say it a third time by looking switched off. */
.ledger-draft .ledger-cap{border-bottom:2px dashed var(--brass-lt)}
.ledger-cap .stamp.draft{color:var(--brass-lt);border:1px solid rgba(217,190,126,.55);padding:.12rem .45rem;border-radius:2px}

/* provider listings + badges */
.provider{background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:.9rem 1.1rem;margin-bottom:.55rem}
.provider .pname{font-family:"Zilla Slab",serif;font-size:1.08rem;font-weight:600;color:var(--ink)}
.provider .pmeta{font-size:.9rem;color:var(--ink-soft);margin-top:.2rem}
.provider .pmeta a{color:var(--river)}
/* Provider name and phone are the primary actions on a money page. As plain
   inline links they were 20px tall — under the 44px minimum, on mobile, on the
   element the whole business depends on. */
.provider .pname a,.provider .tel a,.provider .pmeta a{display:inline-flex;align-items:center;min-height:44px;padding:.1rem 0}
.badges{display:inline-flex;gap:.35rem;flex-wrap:wrap;vertical-align:middle;margin-left:.5rem}
.badge{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;padding:.18rem .45rem;border-radius:2px;border:1px solid;white-space:nowrap;font-weight:500}
.badge-local{color:var(--signal);border-color:var(--signal);background:var(--signal-tint)}
.badge-indep{color:var(--river-deep);border-color:var(--river);background:var(--river-tint)}
.badge-chain{color:var(--ink-soft);border-color:var(--edge);background:var(--stone)}
.badge-24{color:var(--signal);border-color:var(--signal);background:var(--paper);font-weight:700}
.badge-ah{color:var(--brass);border-color:var(--brass);background:var(--paper)}
/* 404 quick links — the chip shape from the hero, on a light ground */
.nf-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 1.6rem}
.nf-links .chip{background:var(--paper);border:1px solid var(--edge);color:var(--navy-deep);border-radius:999px;padding:.55rem 1rem;text-decoration:none;font-size:.95rem;display:inline-flex;align-items:center;min-height:44px}
.nf-links .chip:hover{background:var(--navy);border-color:var(--navy);color:var(--paper)}
/* on-page contents — only rendered on pages long enough to need it */
.toc{margin:1.8rem 0 2.4rem;padding:1.1rem 1.35rem 1.2rem;background:var(--sail);border:1px solid var(--rule);border-left:4px solid var(--brass);border-radius:4px}
.toc h2{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .5rem;font-weight:500}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;columns:2;column-gap:2rem}
.toc li{counter-increment:toc;break-inside:avoid;margin:0}
.toc li a{display:block;padding:.42rem 0;color:var(--navy);text-decoration:none;font-size:.95rem;line-height:1.35}
.toc li a::before{content:counter(toc,decimal-leading-zero);font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--brass);margin-right:.55rem}
.toc li a:hover{text-decoration:underline}
@media (max-width:44rem){.toc ol{columns:1}}
/* Jumping to a section must not park the heading under the sticky-free header
   with no breathing room, and must not animate for anyone who asked it not to. */
:target{scroll-margin-top:1.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.book-when{font-size:.95rem;background:var(--tint);border-left:4px solid var(--brass);padding:.75rem 1rem;border-radius:0 4px 4px 0;max-width:46rem;margin:0 0 1.4rem;color:var(--ink)}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.btn-row .call-btn{margin-top:0}
/* .call-btn is defined later in the sheet, so this variant needs the compound
   selector to win the cascade regardless of declaration order. */
.call-btn.btn-email{background:var(--paper);color:var(--navy);border:2px solid var(--navy);box-shadow:none}
.call-btn.btn-email:hover{background:var(--tint)}
.mini-btn{display:inline-flex;align-items:center;min-height:40px;margin-top:.45rem;padding:.35rem .9rem;border:1.5px solid var(--navy);border-radius:3px;color:var(--navy);text-decoration:none;font-size:.9rem;font-weight:600}
.mini-btn:hover{background:var(--navy);color:var(--paper)}
.safety-notice{display:block;background:var(--signal-tint);border-left:4px solid var(--signal);padding:.85rem 1.1rem;border-radius:0 4px 4px 0;margin-bottom:1rem;font-weight:600;color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy-deep);color:var(--paper);padding:.8rem 1.2rem;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.indep-line{font-size:.78rem;color:var(--fog-dim);margin-top:.9rem;max-width:52rem;line-height:1.5}
.updated-line{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--ink-soft);border-bottom:1px solid var(--rule);padding-bottom:.7rem;margin-bottom:1.4rem}
.pending{background:var(--signal-tint);border-bottom:1px dashed var(--signal);color:var(--signal);padding:.05rem .25rem}
.consent{margin:1rem 0 .2rem;font-size:.9rem;line-height:1.45}
.consent label{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
/* 24px: the WCAG 2.5.8 floor. The label is the real target, but a 20px box
   reads as fiddly on a phone and the whole point of the form is a phone. */
.consent input[type=checkbox]{margin-top:.15rem;width:24px;height:24px;flex:0 0 24px;accent-color:var(--navy)}
.feat-why{font-size:.85rem;color:var(--ink-soft);margin:.7rem 0 0}
.dir-note{font-size:.85rem;color:var(--ink-soft);margin:1rem 0 0;padding-top:.7rem;border-top:1px solid var(--rule);max-width:46rem}
.feat-why a{color:var(--ink-soft)}
.prov-intro{font-size:.95rem;color:var(--ink-soft);max-width:46rem;margin:.2rem 0 1rem}
.prov-intro a{display:inline-block;padding:.45rem 0;line-height:1.3}
.badge-key{font-size:.82rem;color:var(--ink-soft);margin:.9rem 0 0;padding-top:.7rem;border-top:1px dashed var(--rule);max-width:46rem}
.badge-key .badge{margin-right:.3rem}

/* listings */
.listings{margin:2.2rem 0}
.featured{background:linear-gradient(180deg,var(--river-tint),var(--paper) 55%);border:1.5px solid var(--river);border-left:6px solid var(--river);border-radius:4px;padding:1.35rem 1.45rem;margin-bottom:1rem}
.featured .tag{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--river);margin-bottom:.4rem}
.featured h2{font-size:1.25rem;margin:0 0 .35rem;font-weight:600}
.call-btn{display:inline-block;background:var(--river);color:var(--paper);text-decoration:none;font-weight:600;padding:.7rem 1.35rem;border-radius:3px;margin-top:.6rem;box-shadow:0 1px 0 rgba(7,26,44,.28)}
.call-btn:hover{background:var(--river-mid);color:var(--paper)}
.prov-h{font-size:1.15rem!important;margin:1.8rem 0 .7rem!important}
.provider .tel{font-family:"IBM Plex Mono",monospace;font-size:.88rem;color:var(--copper)}
.pdisclosure{margin-top:.5rem;padding-top:.45rem;border-top:1px dashed var(--rule);font-size:.83rem;color:var(--ink-soft)}
.pdisclosure b{color:var(--copper)}
.slot-open{border-style:dashed;border-color:var(--brass);border-left-style:solid;border-left-color:var(--brass)}
.slot-open .tag{color:var(--brass-text)}

/* FAQ */
.faq details{background:var(--paper);border:1px solid var(--rule);border-radius:3px;margin-bottom:.6rem;padding:.9rem 1.1rem}
.faq summary{font-weight:600;cursor:pointer;font-family:"Zilla Slab",serif;font-size:1.05rem}
.faq details p{margin-top:.6rem;color:var(--ink-soft)}

/* form */
.lead-form{background:var(--paper);border:1.5px solid var(--river-deep);border-radius:4px;padding:1.5rem;margin-top:2rem;box-shadow:5px 5px 0 rgba(7,26,44,.14)}
.lead-form h2{font-size:1.25rem;margin:0 0 .8rem}
.lead-form label{display:block;font-size:.85rem;font-weight:600;margin:.8rem 0 .25rem}
.lead-form input,.lead-form textarea,.lead-form select{width:100%;padding:.6rem .7rem;border:1px solid var(--ink-soft);border-radius:3px;font:inherit;background:#fff}
.lead-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.lead-form button{background:var(--copper);color:#fff;border:0;font:600 1rem "Source Sans 3",sans-serif;padding:.8rem 1.6rem;border-radius:3px;margin-top:1rem;cursor:pointer}
.lead-form button:hover{background:#8E2E11}
.form-msg{margin-top:.8rem;font-size:.95rem}
.form-intro{font-size:.95rem;color:var(--ink-soft);margin-bottom:.2rem;max-width:46rem}
.email-capture{border-color:var(--river);box-shadow:5px 5px 0 rgba(15,62,99,.16)}
.email-capture p{font-size:.95rem;color:var(--ink-soft);max-width:46rem}
.email-capture button{background:var(--river)}
.email-capture button:hover{background:var(--river-deep)}
.fineprint{font-size:.82rem!important;color:var(--ink-soft);margin-top:.9rem}
/* sources: the site asks to be cited, so it cites */
.prose a[href^="http"]{text-decoration:underline;text-underline-offset:3px}
.sources{margin:2rem 0 0;padding:1.05rem 1.25rem;background:var(--river-tint);border:1px solid var(--rule);border-radius:4px;font-size:.9rem}
.sources h2{font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem;font-weight:500}
.sources ul{margin:0;padding-left:1.1rem;color:var(--ink-soft)}
.sources li{margin-bottom:.25rem}
/* Stacked links in a list are targets, not prose: WCAG 2.5.8's inline-in-a-sentence
   exemption does not cover them. 21px -> 40px. */
.sources li a{display:inline-block;padding:.45rem 0;line-height:1.3}

/* local directory tables (medical page) — a citable format, not decoration */
.dir-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.dir-scroll:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.dir{width:100%;min-width:34rem;border-collapse:collapse;margin:1.1rem 0 1.6rem;background:var(--paper);border:1px solid var(--rule);border-radius:3px;overflow:hidden;font-size:.95rem}
.dir caption{caption-side:top;text-align:left;font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:0 0 .45rem}
.dir th{background:var(--river-deep);color:var(--paper);text-align:left;padding:.5rem .8rem;font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.dir td{padding:.55rem .8rem;border-top:1px solid var(--rule);vertical-align:top}
.dir td:first-child{font-weight:600}
.dir .muted{font-weight:400;color:var(--ink-soft);font-size:.9em}
.dir td.tel{white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:.88rem;color:var(--copper)}
.dir tbody tr:nth-child(even) td{background:rgba(231,239,246,.55)}
/* Every printed number is dialable. In a table cell the number is the whole cell,
   so the link fills it and clears the 24px target minimum on its own; in running
   prose a 44px block would tear the line spacing apart, so it gets vertical
   padding and a solid underline instead, which is what makes it read as tappable. */
.dir td.tel a.phone{display:block;padding:.2rem 0;color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a[href^="tel:"]{white-space:nowrap}
a.phone{white-space:nowrap;color:var(--copper);font-variant-numeric:tabular-nums;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;padding:.25rem .05rem}
a.phone:hover,a.phone:focus-visible{color:var(--river-deep);background:var(--sand)}
@media (max-width:40rem){.dir{font-size:.86rem}.dir td,.dir th{padding:.45rem .5rem}}

/* directory grid */
/* [hidden] is only a default of display:none, and any explicit display in a
   later rule beats it. .cat-card is display:block, so the filter was hiding
   cards from the accessibility tree while leaving them on screen — the worst of
   both. This makes the attribute mean what everyone assumes it means. */
[hidden]{display:none !important}
.cat-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));margin:1.8rem 0}
.cat-card{background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:1.1rem 1.2rem;text-decoration:none;color:var(--ink);display:block}
.cat-card:hover{border-color:var(--river);color:var(--ink)}
.cat-card b{font-family:"Zilla Slab",serif;font-size:1.12rem;display:block;color:var(--river-deep)}
.cat-card:hover{box-shadow:3px 3px 0 rgba(7,26,44,.11)}
.cat-card span{font-size:.9rem;color:var(--ink-soft)}

/* Village guide index — grouped so fourteen pages read as a menu, not a wall. */
.guide{margin:2rem 0 1rem}
.guide-group{margin-bottom:2rem}
.guide-group h2{font-size:1.05rem;margin:0 0 .8rem;padding-bottom:.4rem;border-bottom:1px solid var(--rule);color:var(--river-deep)}
.guide-cards{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.guide-card{display:block;padding:.85rem 1rem;background:var(--paper);border:1px solid var(--edge);border-left:4px solid var(--river);border-radius:3px;text-decoration:none;color:var(--ink);min-height:44px}
.guide-card:hover,.guide-card:focus-visible{border-color:var(--river);border-left-color:var(--copper);background:#fff}
.guide-card b{font-family:"Zilla Slab",serif;font-weight:600;font-size:1.05rem;display:block;color:var(--river-deep)}
.guide-card span{font-size:.9rem;color:var(--ink-soft);display:block;margin-top:.15rem}

/* Emergency block. Deliberately the only place on the site that uses the signal
   colour as a ground: it has to win against a page of navy cards without being
   mistaken for an ad, so it is a bordered band rather than a filled panel. */
.emerg{margin:0 0 1.6rem}
.emerg h2{font-size:1.1rem;margin:0 0 .35rem;color:var(--signal);letter-spacing:.01em}
.emerg-more{margin:1rem 0 0;font-size:.95rem}
.dir.emerg-t th[scope=row]{background:none;color:var(--ink);text-align:left;font-family:inherit;font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;padding:.55rem .8rem;border-top:1px solid var(--rule);vertical-align:top;min-width:12rem}
.emerg-t{min-width:38rem}
.emerg-lede{font-size:.93rem;color:var(--ink-soft);margin:0 0 .9rem;max-width:62ch}
.emerg-grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
/* Five cards, and auto-fit wraps them 4+1 at desktop width, which reads as one
   card being less important than the rest. Pin the row once there is room. */
@media (min-width:56rem){.emerg-grid{grid-template-columns:repeat(5,1fr)}}
.emerg-card{display:block;min-height:44px;padding:.75rem .9rem;background:var(--paper);border:1px solid var(--edge);border-top:3px solid var(--signal);border-radius:3px;text-decoration:none;color:var(--ink)}
.emerg-card:hover,.emerg-card:focus-visible{background:var(--signal-tint);border-color:var(--signal)}
.emerg-card b{display:block;font-family:"Zilla Slab",serif;font-weight:600;font-size:1rem;color:var(--signal)}
.emerg-card span{display:block;font-size:.84rem;color:var(--ink-soft);margin-top:.1rem}
.home-emerg-band{background:var(--sail);padding:2.2rem 0 1.4rem;border-bottom:1px solid var(--rule)}

/* Directory: groups and filter */
.cat-group{margin:0 0 2.2rem}
.cat-group h2{font-size:1.05rem;margin:0 0 .3rem;padding-bottom:.4rem;border-bottom:1px solid var(--rule);color:var(--river-deep)}
.cat-group-note{font-size:.9rem;color:var(--ink-soft);margin:0}
.cat-group .cat-grid{margin:.9rem 0 0}
/* Comparison block. Deliberately not a card: it is the page's argument, so it
   gets a brass rule and open ground rather than a box that reads as an ad. */
/* /prices/ — 34 small tables, so they have to read as a reference, not 34 cards.
   Two columns, the caption doing the work of a heading, and the money column in
   the mono face so ranges line up down the page. */
.price-group{margin:0 0 2.4rem}
.price-group h2{margin:0 0 .3rem;padding-bottom:.4rem;border-bottom:1px solid var(--rule)}
.price-group .dir-scroll{margin:1rem 0 0}
.price-t{min-width:22rem}
.dir.price-t caption{caption-side:top;text-align:left;letter-spacing:0;text-transform:none;font-family:"Zilla Slab",serif;font-weight:600;font-size:1.02rem;color:var(--river-deep);padding:.1rem 0 .45rem}
.dir.price-t caption a{font-family:"Source Sans 3",sans-serif;font-weight:400;font-size:.86rem;letter-spacing:0;text-transform:none}
.dir.price-t tbody tr:nth-child(even) th{background:rgba(231,239,246,.55)}
.dir.price-t th[scope=row]{background:none;color:var(--ink);text-align:left;font-family:inherit;font-size:.94rem;font-weight:400;letter-spacing:0;text-transform:none;padding:.5rem .75rem;border-top:1px solid var(--rule);vertical-align:top}
.dir.price-t td.n{text-align:right;white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:.88rem;font-variant-numeric:tabular-nums;color:var(--copper)}
.prices-stamp{background:var(--sail);border-left:4px solid var(--brass);padding:.9rem 1.1rem;font-size:.95rem}
.compare{margin:2.4rem 0 1.6rem;padding-top:1.4rem;border-top:3px solid var(--brass-lt)}
.compare h2{margin:0 0 .6rem}
.compare-a{font-size:1.02rem;line-height:1.6;margin:0 0 1.1rem;max-width:64ch}
.compare-a b{color:var(--river-deep)}
.compare-t{min-width:40rem}
.compare-t th[scope=row]{font-family:"Zilla Slab",serif;font-weight:600;font-size:1rem;color:var(--river-deep);text-align:left;background:none;letter-spacing:0;text-transform:none;padding:.6rem .8rem;border-top:1px solid var(--rule);vertical-align:top;min-width:11rem}
.compare-t th[scope=row] a{color:var(--river-deep)}
.compare-t td:last-child{min-width:18rem}
.compare .fineprint{margin-top:.6rem}
/* Track record line, verified reviews, and the inline call/text forms */
.track{margin:.2rem 0 .5rem;font-size:.86rem;color:var(--ink-soft);font-family:"IBM Plex Mono",monospace;letter-spacing:.01em}
.track b{color:var(--river-deep);font-weight:600}
.track .stat{display:inline}
.reviews{list-style:none;margin:.6rem 0 0;padding:0;font-size:.92rem}
.reviews li{padding:.45rem 0;border-top:1px solid var(--rule)}
.reviews .score{color:var(--brass);letter-spacing:.05em}
.reviews .score .dim{color:var(--rule)}
.reviews .rdate{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--ink-soft);margin-left:.4rem}
.reviews .rtext{display:block;margin-top:.15rem}
.reviews .rreply{display:block;margin-top:.25rem;padding-left:.7rem;border-left:2px solid var(--rule);color:var(--ink-soft);font-size:.88rem}
.btn-row.small{gap:.5rem;margin-top:.5rem}
details.cf{display:inline-block;vertical-align:top}
details.cf > summary{list-style:none;cursor:pointer;display:inline-flex}
details.cf > summary::-webkit-details-marker{display:none}
details.cf[open] > summary{opacity:.85}
.cf-form{margin:.6rem 0 .4rem;padding:.9rem 1rem;background:var(--sail);border:1px solid var(--edge);border-radius:3px;max-width:34rem}
.cf-form label{display:block;font-weight:600;font-size:.9rem;margin:.5rem 0 .2rem}
.cf-form input[type=tel],.cf-form input[type=text],.cf-form textarea{width:100%;min-height:44px;padding:.55rem .7rem;border:1px solid var(--edge);border-radius:3px;font-size:1rem;background:var(--paper);color:var(--ink)}
.cf-form .consent{font-size:.86rem;margin:.7rem 0 .5rem}
.cf-form button{min-height:44px;padding:.6rem 1.1rem;background:var(--river);color:var(--paper);border:0;border-radius:3px;font-weight:600;font-size:1rem;cursor:pointer}
.cf-form button:hover,.cf-form button:focus-visible{background:var(--river-deep)}
.btn-text{background:var(--paper);color:var(--river-deep);border:2px solid var(--river)}
/* "Why we'd call them" — the profile disclosure on a card */
details.why{margin:.7rem 0 .2rem;border-top:1px solid var(--rule);padding-top:.5rem}
details.why > summary{cursor:pointer;font-weight:600;color:var(--river-deep);list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:baseline;min-height:32px}
details.why > summary::-webkit-details-marker{display:none}
details.why > summary::before{content:"+";display:inline-block;width:1.1rem;font-family:"IBM Plex Mono",monospace;color:var(--brass)}
details.why[open] > summary::before{content:"–"}
.why-sub{font-weight:400;font-size:.84rem;color:var(--ink-soft)}
.why-body{padding:.5rem 0 .2rem 1.1rem;font-size:.94rem}
.why-body p{margin:0 0 .5rem}
.why-known{font-size:1rem;color:var(--ink)}
.why-facts{color:var(--ink-soft)}
.why-h{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);margin-right:.35rem}
.why-notes{margin:.2rem 0 .6rem;padding-left:1.1rem}
.why-notes li{margin:.15rem 0}
.why-src{font-size:.82rem;color:var(--ink-soft)}
.featured details.why{border-top-color:rgba(255,255,255,.25)}
.dirfilter{margin:1.6rem 0 .4rem}
.dirfilter label{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-family:"IBM Plex Mono",monospace;margin-bottom:.35rem}
.dirfilter input{width:100%;max-width:28rem;min-height:44px;padding:.6rem .8rem;border:1px solid var(--edge);border-radius:3px;font-size:1rem;background:var(--paper);color:var(--ink)}
.dirfilter input:focus-visible{outline:2px solid var(--river);outline-offset:1px}
/* Who answers tonight — playbook pages */
.call-now{margin:2.2rem 0 1.6rem;padding:1.2rem 1.3rem 1rem;background:var(--paper);border:1px solid var(--edge);border-top:4px solid var(--signal);border-radius:3px}
.call-now h2{margin:0 0 .4rem;color:var(--signal)}
.call-now-lede{font-size:.93rem;color:var(--ink-soft);margin:0 0 1rem}
.call-list{list-style:none;margin:0;padding:0}
.call-list li{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;padding:.75rem 0;border-top:1px solid var(--rule)}
.call-who{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.call-who b{font-family:"Zilla Slab",serif;font-size:1.08rem;color:var(--river-deep)}
.call-tier{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.call-list .call-btn{margin:0;flex:none}
.jump{white-space:nowrap;font-weight:600}
@media (max-width:40rem){.call-list li{flex-direction:column;align-items:stretch}.call-list .call-btn{width:100%;text-align:center}}
.dirfilter-none{font-size:.95rem;color:var(--ink-soft);margin:.8rem 0 0}

/* footer */
footer.site{background:var(--navy-deep);color:var(--fog);margin-top:2rem;padding:2.6rem 0;font-size:.92rem;border-top:3px solid var(--brass-lt)}
footer.site a{color:var(--harbour)}
/* Footer link stacks are <br>-separated, which gives a 21px tap height. */
footer.site .cols p a{display:inline-block;padding:.42rem 0;line-height:1.25}
footer.site .cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
footer.site h2{color:var(--paper);font-family:"Zilla Slab",serif;font-size:1.05rem;margin:0 0 .6rem}
.updated{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--fog-dim);margin-top:1.6rem}
.updated a{display:inline-block;padding:.62rem .1rem;line-height:1}

@media (prefers-reduced-motion:no-preference){
  .pillar,.cat-card,.call-btn{transition:background .15s,border-color .15s}
}
/* Desktop right rail. Below 64rem the page is a single column and the rail's
   own TOC is hidden (the inline one serves); above it the inline TOC hides and
   the rail carries navigation, the quote CTA and the first call, sticky. */
.rail{display:none}
@media (min-width:64rem){
  .wrap.prose.has-rail{display:grid;grid-template-columns:minmax(0,46rem) 17rem;column-gap:3.5rem;align-items:start}
  .wrap.prose.has-rail > .col-main{max-width:46rem;min-width:0}
  .wrap.prose.has-rail > .rail{display:block;position:sticky;top:1.1rem;max-width:none;max-height:calc(100vh - 2.2rem);overflow:auto;padding-bottom:1rem}
  .has-rail .col-main > .toc{display:none}
  .rail .toc{margin:1.8rem 0 1.2rem}
  .rail .toc ol{columns:1}
  .rail .toc li a{padding:.32rem 0;font-size:.9rem}
}
.rail-card{background:var(--paper);border:1.5px solid var(--river-deep);border-radius:4px;padding:1rem 1.1rem 1.1rem;margin:0 0 1rem;box-shadow:4px 4px 0 rgba(7,26,44,.12)}
.rail-card .tag{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass);margin:0 0 .35rem}
.rail-card h2{font-size:1.08rem;margin:0 0 .35rem;line-height:1.25}
.rail-card p{font-size:.9rem;margin:.3rem 0 .6rem;color:var(--ink-soft)}
.rail-card .call-btn,.rail-card .mini-btn{display:block;text-align:center;margin-top:.5rem;width:100%;box-sizing:border-box}
.rail-card .mini-btn{min-height:42px;justify-content:center}
.rail-card .btn-quote{display:block;text-align:center;background:var(--brass);color:var(--paper);text-decoration:none;font-weight:600;padding:.7rem 1rem;border-radius:3px;box-shadow:0 1px 0 rgba(7,26,44,.28)}
.rail-card .btn-quote:hover{background:#6f500f}
/* Mobile sticky call bar on service pages: the two actions a phone user came
   for, always a thumb away. Hidden once the quote form itself is on screen. */
.callbar{display:none}
@media (max-width:48rem){
  .callbar{display:flex;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom));background:var(--river-deep);border-top:2px solid var(--brass-lt);box-shadow:0 -4px 14px rgba(7,26,44,.25)}
  .callbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;text-decoration:none;border-radius:3px;font-weight:600;font-size:.95rem;line-height:1.15;padding:.35rem .5rem}
  .callbar a small{font-weight:400;font-size:.72rem;opacity:.85;font-family:"IBM Plex Mono",monospace;letter-spacing:.04em}
  .callbar .cb-call{background:var(--paper);color:var(--river-deep)}
  .callbar .cb-quote{background:transparent;color:var(--paper);border:1.5px solid var(--brass-lt)}
  body.has-callbar{padding-bottom:5.2rem}
  body.has-callbar.callbar-hidden .callbar{transform:translateY(110%);transition:transform .25s}
}
@media (max-width:40rem){
  header.site .wrap{flex-direction:column;gap:.4rem}
  /* Five nav items at .95rem wrap 4 + 1 on a 390px screen, which strands
     "Contact" alone on its own line. Tightening the tracking and the gap fits all
     five on one row down to 360px without dropping below the 44px tap height. */
  nav.top{gap:0 .9rem;font-size:.9rem;width:100vw;margin:0 -1.25rem;padding:0 1.25rem;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav.top::-webkit-scrollbar{display:none}
  nav.top a{white-space:nowrap;flex:none;min-height:40px}
  header.site .wrap{gap:0;padding-top:.45rem;padding-bottom:0}
  .pagehead{padding:1.7rem 0 1.2rem}
  .ledger td{padding:.55rem .7rem;font-size:.85rem}
}

/* v24 additions: illustrative figures, map buttons, listing/event mailto lines. */
.pic{margin:1.2rem 0 1.6rem;max-width:46rem}
.pic img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--rule);background:var(--tint)}
.pic figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:.45rem;line-height:1.45}
.dir-add{font-size:.95rem;line-height:1.55;margin:0 0 1.2rem;padding:.75rem .9rem;border-left:3px solid var(--navy);background:var(--sail);max-width:46rem}
.btn-map{font-variant-numeric:tabular-nums}

/* v26: directory map, business pages */
.mapsec{margin:1.6rem 0 2rem}
.mapbar{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;margin:.6rem 0 .7rem;font-size:.9rem}
.mapbar select{font:inherit;font-size:.9rem;padding:.35rem .5rem;border:1px solid var(--rule);border-radius:4px;background:#fff;max-width:100%}
.mapbar button{font:inherit;font-size:.85rem;padding:.35rem .6rem;border:1px solid var(--rule);border-radius:4px;background:var(--sail);cursor:pointer}
#bizmap{height:520px;max-height:70vh;border:1px solid var(--rule);border-radius:4px;background:var(--tint)}
.leaflet-popup-content{font-size:.9rem;line-height:1.45}
.leaflet-popup-content a{color:var(--navy)}
.also li{margin:.25rem 0}
@media (max-width:600px){#bizmap{height:60vh}}

/* v32: AI-image disclosure as a small muted tag, not a sentence */
.pic figcaption .ai-note{display:inline-block;font-size:.68em;line-height:1.3;opacity:.58;letter-spacing:.02em;text-transform:uppercase;vertical-align:.08em;white-space:nowrap}