/* ============================================================================
   Search Local Business — "The Map Layer"
   A cartographic design system: survey paper, hairline grid, coordinate ticks,
   registration marks and the logo's pin as the recurring marker.
   Written mobile-first. Every block is designed at 375px, then widened.
   ========================================================================= */

/* ---- Fonts. Self-hosted Metropolis — the actual typeface of the logo, so the
   wordmark and the headings are the same voice. Public domain (UNLICENSE). --- */
@font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-ExtraBold.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Black.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  /* Survey-paper palette. Red and ink are sampled from the logo artwork. */
  --paper:#F7F5F2;
  --paper-2:#FFFFFF;
  --sunk:#EFEAE3;
  --ink:#1A1919;
  --ink-2:#403B38;
  --muted:#6B6560;
  --rule:#E2DCD3;
  --rule-2:#D3CBC0;
  --red:#AD3533;
  --red-ink:#8E2A28;
  --red-tint:#F6E9E8;

  --grid:rgba(26,25,25,.045);      /* map grid hairline */
  --contour:rgba(26,25,25,.10);

  --font:Metropolis,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --pad:clamp(1.25rem,5vw,2rem);   /* gutter */
  --wide:76rem;                    /* max content width */
  --narrow:44rem;                  /* prose measure */
  --r:2px;                         /* the system is drafting-table square */
  --tap:44px;                      /* minimum tap target */
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#141312; --paper-2:#1C1A19; --sunk:#100F0E;
    --ink:#F2EEE9; --ink-2:#CFC8C1; --muted:#9A928B;
    --rule:#2E2B29; --rule-2:#3D3936;
    --red:#D8524F; --red-ink:#E8706D; --red-tint:#2A1918;
    --grid:rgba(242,238,233,.05);
    --contour:rgba(242,238,233,.09);
  }
}

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--font);
  font-size:1.0625rem;           /* 17px — never below 16 */
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;             /* belt-and-braces against 375px overflow */
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:var(--r)}
::selection{background:var(--red);color:#fff}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--paper);padding:.85rem 1.25rem;font-weight:600;
}
.skip:focus{left:0}

/* ---- Layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:var(--narrow)}
/* When .narrow sits on the container itself it would centre the whole block,
   which reads as a jump away from the left-aligned heroes and section heads.
   Keep the container at full width and constrain the measure on its children
   instead, so prose starts on the same line as everything above it. */
.wrap.narrow{max-width:var(--wide)}
.wrap.narrow>*{max-width:var(--narrow)}
section{padding-block:clamp(3.5rem,9vw,6.5rem)}
.sec-sunk{background:var(--sunk)}
/* There is exactly one inverted-section class, and it is .band (below).
   An earlier .sec-ink redefined --ink on the same element that read
   `background:var(--ink)` — the override fed back into that declaration, so
   the section rendered in the PAGE colour while its children stayed
   light-on-light. The headline and the ghost button were invisible and the
   blank headline held the layout open. Never redefine a token a rule reads. */

/* The map grid. A hairline graticule behind the page — the single most
   recognisable piece of the system. Kept very faint so text stays AA. */
.grid-bg{position:relative;isolation:isolate}
.grid-bg::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:clamp(48px,9vw,88px) clamp(48px,9vw,88px);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
}

/* ---- Type ---------------------------------------------------------------- */
h1,h2,h3,h4{font-weight:900;line-height:1.02;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(2.4rem,8.4vw,4.6rem)}
h2{font-size:clamp(1.85rem,5.4vw,3.1rem);line-height:1.05}
h3{font-size:clamp(1.2rem,3vw,1.55rem);line-height:1.15;letter-spacing:-.014em}
h4{font-size:1.0625rem;font-weight:800;letter-spacing:-.01em}
p{text-wrap:pretty}
.lede{font-size:clamp(1.09rem,2.4vw,1.3rem);line-height:1.55;color:var(--ink-2)}
.sub{color:var(--muted)}
strong{font-weight:700}

/* The coordinate tick — mono, letterspaced, red. Used as an eyebrow everywhere.
   Reads as a map label, and gives every section a machine-readable-looking
   caption without any actual clutter. */
.tick{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  display:flex;align-items:center;gap:.6rem;
}
.tick::before{
  content:'';flex:none;width:1.4rem;height:1px;background:var(--red);opacity:.55;
}
.tick-plain::before{display:none}

/* ---- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:var(--tap);padding:.8rem 1.4rem;
  font-weight:700;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;border:1.5px solid transparent;border-radius:var(--r);
  cursor:pointer;transition:transform .12s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-ink);border-color:var(--red-ink)}
/* A filled button is white-on-red in every context. Nav, drawer and footer
   link rules are more specific than .btn-primary on their own, so without
   this a button dropped into one of them inherits that context's link colour
   and renders dark text on red. */
a.btn-primary,a.btn-primary:hover,a.btn-primary:focus,a.btn-primary:visited,
button.btn-primary,.btn-primary{color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* Text link with the pin-red underline that thickens on hover. */
.link{
  color:var(--ink);text-decoration:none;font-weight:600;
  box-shadow:inset 0 -2px 0 var(--red);
  transition:box-shadow .15s ease,color .15s ease;
}
.link:hover{box-shadow:inset 0 -1.2em 0 var(--red-tint);color:var(--red-ink)}

/* ---- Header -------------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--rule);
}
.hdr-in{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none;padding-block:.5rem}
.brand svg,.brand img{width:132px;height:auto}
@media (prefers-color-scheme:dark){.brand img{filter:invert(1) hue-rotate(180deg) saturate(1.2)}}

.nav{display:none;margin-left:auto;align-items:center;gap:.35rem}
.nav a:not(.btn){
  text-decoration:none;font-weight:600;font-size:.95rem;
  padding:.6rem .8rem;border-radius:var(--r);color:var(--ink-2);
  min-height:var(--tap);display:inline-flex;align-items:center;
}
.nav a:not(.btn):hover{color:var(--ink);background:var(--sunk)}
.nav a:not(.btn)[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
.nav .btn{margin-left:.5rem;padding-inline:1.1rem}
.hdr-tel{
  display:none;align-items:center;gap:.45rem;margin-left:auto;
  font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.02em;
  text-decoration:none;color:var(--ink);min-height:var(--tap);
}
.hdr-tel:hover{color:var(--red)}

.burger{
  margin-left:auto;width:var(--tap);height:var(--tap);
  display:grid;place-content:center;gap:5px;
  background:none;border:1px solid var(--rule-2);border-radius:var(--r);cursor:pointer;
}
.burger span{display:block;width:19px;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{
  display:none;border-top:1px solid var(--rule);background:var(--paper);
  padding:.75rem var(--pad) 1.5rem;
}
.drawer.open{display:block}
.drawer a:not(.btn){
  display:flex;align-items:center;min-height:52px;
  text-decoration:none;font-weight:700;font-size:1.05rem;
  border-bottom:1px solid var(--rule);
}
.drawer a:not(.btn):last-of-type{border-bottom:0}
.drawer .btn{width:100%;margin-top:1rem}
.drawer-tel{
  display:flex;align-items:center;gap:.5rem;margin-top:.75rem;
  font-family:var(--mono);font-size:.9rem;font-weight:600;
  text-decoration:none;min-height:var(--tap);color:var(--red);
}

@media (min-width:62rem){
  .burger,.drawer{display:none!important}
  .nav{display:flex}
  .hdr-tel{display:inline-flex;margin-left:1rem;order:3}
  .nav{margin-left:auto;order:2}
}

/* ---- Hero ---------------------------------------------------------------- */
.hero{position:relative;padding-block:clamp(3rem,10vw,6rem) clamp(3rem,8vw,5rem);overflow:hidden}
.hero-in{position:relative;z-index:2}
.hero h1{margin-block:1.1rem .9rem}
.hero .lede{max-width:38ch}
.hero .btn-row{margin-top:1.9rem}
.hero-note{
  margin-top:1.1rem;font-size:.9rem;color:var(--muted);max-width:44ch;
}
/* Contour lines — decorative topography behind the hero, hidden from AT.
   Absolutely positioned, so it is explicitly re-checked at 375px: it is
   clipped by .hero{overflow:hidden} and faded out under the text. */
.contour{
  position:absolute;z-index:1;pointer-events:none;
  top:50%;left:50%;width:min(1100px,175%);translate:-50% -50%;
  color:var(--contour);opacity:.9;
}
@media (min-width:62rem){
  .contour{left:auto;right:-6%;width:720px;translate:0 -50%}
}

/* The pin marker, lifted from the logo geometry. */
.pin{flex:none;display:inline-block;vertical-align:-.12em;width:1em;height:1em;color:var(--red)}

/* ---- Cards / grid -------------------------------------------------------- */
.grid{display:grid;gap:1rem}
@media (min-width:40rem){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:56rem){.grid-3{grid-template-columns:repeat(3,1fr)}}

.card{
  position:relative;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(1.25rem,3.4vw,1.75rem);
  transition:border-color .18s ease,transform .18s ease;
}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.98rem}
a.card{text-decoration:none;display:block}
a.card:hover{border-color:var(--rule-2);transform:translateY(-2px)}
a.card:hover h3{color:var(--red)}

/* Registration marks — the little corner crosshairs on a printed map sheet.
   Pure CSS, no extra elements. */
.reg::before,.reg::after{
  content:'';position:absolute;width:9px;height:9px;pointer-events:none;
  border-color:var(--rule-2);border-style:solid;
}
.reg::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.reg::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
a.card:hover.reg::before,a.card:hover.reg::after{border-color:var(--red)}

.card-tick{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;
}
.card-go{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-weight:700;font-size:.9rem;color:var(--red);
}

/* ---- The stack (services as strata) -------------------------------------- */
.stack{border-top:1px solid var(--rule)}
.stratum{
  display:grid;gap:.35rem 1.5rem;
  padding-block:clamp(1.35rem,3.6vw,1.9rem);
  border-bottom:1px solid var(--rule);
  text-decoration:none;position:relative;
  transition:background .18s ease,padding-inline .18s ease;
}
.stratum:hover{background:var(--paper-2)}
.stratum-n{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--red);
  align-self:start;padding-top:.35rem;
}
.stratum h3{transition:color .18s ease}
.stratum:hover h3{color:var(--red)}
.stratum p{color:var(--muted);font-size:.98rem;max-width:60ch}
@media (min-width:52rem){
  .stratum{grid-template-columns:5.5rem minmax(0,15rem) minmax(0,1fr);align-items:baseline}
  .stratum:hover{padding-inline:.9rem}
}

/* ---- Prose --------------------------------------------------------------- */
.prose>*+*{margin-top:1.15rem}
.prose h2{margin-top:2.6rem}
.prose h3{margin-top:2rem}
.prose ul,.prose ol{padding-left:0;list-style:none}
.prose li{position:relative;padding-left:1.6rem;margin-top:.6rem;color:var(--ink-2)}
.prose li::before{
  content:'';position:absolute;left:.15rem;top:.62em;
  width:7px;height:7px;background:var(--red);border-radius:50%;
}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--red);
  background:none;width:auto;height:auto;border-radius:0;top:.28em;left:0;
}
.prose a:not(.btn){color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--red)}
.prose a:not(.btn):hover{color:var(--red-ink)}

/* ---- Deliverables checklist ---------------------------------------------- */
.checks{list-style:none;padding:0;display:grid;gap:.85rem}
.checks li{display:grid;grid-template-columns:1.35rem 1fr;gap:.75rem;align-items:start;color:var(--ink-2)}
.checks svg{width:1.1rem;height:1.1rem;color:var(--red);margin-top:.28em;flex:none}

/* ---- FAQ ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding-block:1.15rem;min-height:var(--tap);
  font-weight:800;font-size:1.05rem;line-height:1.3;
  cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';flex:none;width:12px;height:12px;margin-top:.42em;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--red)}
.faq-a{padding-bottom:1.3rem;color:var(--muted);max-width:68ch}

/* ---- City plates --------------------------------------------------------- */
.plate{
  position:relative;display:block;text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper-2);padding:1.4rem 1.4rem 1.5rem;
  transition:border-color .18s ease,transform .18s ease;
}
.plate:hover{border-color:var(--red);transform:translateY(-2px)}
.plate-coord{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  color:var(--muted);text-transform:uppercase;
}
.plate h3{margin:.55rem 0 .1rem;display:flex;align-items:center;gap:.5rem}
.plate .county{font-family:var(--mono);font-size:.68rem;color:var(--red);letter-spacing:.1em;text-transform:uppercase}
.plate p{margin-top:.7rem;color:var(--muted);font-size:.95rem}

/* ---- Callout / CTA band -------------------------------------------------- */
.band{
  background:var(--ink);color:var(--paper);position:relative;overflow:hidden;
  /* Overrides for descendants only. --ink is deliberately NOT among them: this
     rule's own background reads it, and redefining it here would resolve the
     background to the new value and invert the whole section by accident. */
  --muted:#A69E97;
  --ink-2:#CFC8C1;
  --rule:#332F2D;
  --rule-2:#4A4340;
  --paper-2:#232120;
}
.band .tick{color:var(--red-ink)}
.band h1,.band h2,.band h3,.band h4{color:var(--paper)}
/* Only the band's own copy gets the narrow measure — card paragraphs and the
   trailing trade list must not inherit a 52ch cap or the centred colour. */
.band>.wrap>p{color:var(--muted);max-width:52ch}
.band .lede{color:var(--ink-2);max-width:60ch}
.band .card{background:var(--paper-2);border-color:var(--rule)}
.band a.card:hover{border-color:var(--red-ink);transform:translateY(-2px)}
.band a.card:hover h3{color:var(--red-ink)}
.band .card p{color:var(--muted)}
.band .card-tick{color:#8A817A}
.band .checks li{color:var(--ink-2)}
.band .ftr-area{color:#8A817A;max-width:none}
.band .stratum{border-color:var(--rule)}
.band .stratum:hover{background:var(--paper-2)}
.band .stack{border-color:var(--rule)}
.band .btn-ghost{color:var(--paper);border-color:var(--rule-2)}
.band .btn-ghost:hover{border-color:var(--paper);background:transparent}

/* ---- Forms --------------------------------------------------------------- */
.form{display:grid;gap:1rem}
@media (min-width:40rem){.form .half{grid-column:span 1}.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.field{display:grid;gap:.4rem}
.field label{font-weight:700;font-size:.9rem}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;min-height:var(--tap);padding:.7rem .85rem;
  background:var(--paper-2);color:var(--ink);
  border:1.5px solid var(--rule-2);border-radius:var(--r);
  font-size:1rem;   /* ≥16px stops iOS zooming the viewport on focus */
}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);outline-offset:1px}
.form-note{font-size:.85rem;color:var(--muted)}
.form-status{padding:.9rem 1rem;border-radius:var(--r);font-weight:600;font-size:.95rem;display:none}
.form-status.err{display:block;background:var(--red-tint);color:var(--red-ink);border:1px solid var(--red)}
.form-status.ok{display:block;background:var(--sunk);color:var(--ink);border:1px solid var(--rule-2)}

/* ---- Footer -------------------------------------------------------------- */
.ftr{background:var(--sunk);border-top:1px solid var(--rule);padding-block:clamp(2.5rem,6vw,4rem) 1.5rem}
.ftr-top{display:grid;gap:2.25rem}
@media (min-width:52rem){.ftr-top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.ftr-top{grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr}}
.ftr img{width:150px}
@media (prefers-color-scheme:dark){.ftr img{filter:invert(1) hue-rotate(180deg) saturate(1.2)}}
.ftr .ftr-h{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:1rem}
.ftr ul{list-style:none;padding:0;display:grid;gap:.1rem}
.ftr ul a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;color:var(--ink-2);font-size:.95rem}
.ftr ul a:hover{color:var(--red)}
.ftr-blurb{color:var(--muted);font-size:.95rem;margin-top:1rem;max-width:38ch}
.ftr-nap{margin-top:1.25rem;display:grid;gap:.3rem;font-size:.95rem}
.ftr-nap a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;font-weight:600}
.ftr-nap a:hover{color:var(--red)}
.ftr-area{color:var(--muted);font-size:.9rem;line-height:1.75}
.ftr-btm{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:.85rem;color:var(--muted);
}
.ftr-btm a{color:var(--muted)}
.ftr-btm a:hover{color:var(--red)}

/* ---- Sticky mobile call bar ---------------------------------------------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule-2);border-top:1px solid var(--rule-2);
  padding-bottom:env(safe-area-inset-bottom);
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:54px;text-decoration:none;font-weight:700;font-size:.98rem;
}
.callbar .c-tel{background:var(--paper-2);color:var(--ink)}
.callbar .c-cta{background:var(--red);color:#fff}
body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
@media (min-width:62rem){
  .callbar{display:none}
  body{padding-bottom:0}
}

/* ---- Utilities ----------------------------------------------------------- */
.stack-sm>*+*{margin-top:.6rem}
.stack-md>*+*{margin-top:1.15rem}
.stack-lg>*+*{margin-top:2.25rem}
.mt-sm{margin-top:1rem}.mt-md{margin-top:2rem}.mt-lg{margin-top:3rem}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sec-head{max-width:52rem}
.sec-head h2{margin-block:.9rem .8rem}
.crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--red)}
.crumbs span[aria-current]{color:var(--ink)}

/* ---- Tap-target corrections ----------------------------------------------
   Inline links inside a sentence are exempt from the target-size rule, but
   anything that reads as a standalone control is not. These three did not
   clear the minimum on audit. */

/* Breadcrumbs are navigation, not prose — give them a real hit area. */
.crumbs a{display:inline-flex;align-items:center;min-height:26px;padding-inline:.15rem}

/* The phone and email on the contact cards are the primary actions there. */
.card h3 a[href^="tel:"],
.card h3 a[href^="mailto:"]{
  display:inline-flex;align-items:center;min-height:var(--tap);
}

/* Footer credit. */
.ftr-btm a{display:inline-flex;align-items:center;min-height:26px}