/* Location pages (written by tools/locs.mjs): the hero drawing, prose sections, the small labels over the FAQ and
   link lists, the link lists, the nine service cards on a city page and the city lists on the hub.

   The hero drawing is an inline flat 2D SVG from tools/locart.mjs (class "la"). Everything in it takes its colour from
   the tokens in css/site.css, so it follows dark mode. Two accent colours per page come in through --a and --b (with
   --ai and --bi for text on them). The ground is a tint of the page; the boards, cards and bars on it stay paper
   in both themes, so their text stays charcoal. Each drawing has a little calm motion: one or two la-* loops, stopped
   under .static (the site's ?static mode) and prefers-reduced-motion. Resting state is the finished picture. */

.loc-art svg {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}

/* ---- ground and shapes */
.la text { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; font-optical-sizing: none; font-variation-settings: 'opsz' 20; }
.la-g2 { fill: var(--bg-3); }
.la-g3 { fill: color-mix(in oklab, var(--c-sand) 22%, var(--bg-2)); }
.la-gd { fill: color-mix(in oklab, var(--ink) 16%, transparent); }
.la-gg { fill: none; stroke: color-mix(in oklab, var(--ink) 9%, transparent); stroke-width: 2; }
.la-gband { fill: color-mix(in oklab, var(--ink) 6%, transparent); }
.la-road { stroke: color-mix(in oklab, var(--ink) 12%, transparent); stroke-width: 26; stroke-linecap: butt; fill: none; }
.la-a, .la-b, .la-at, .la-bt, .la-m, .la-card, .la-board, .la-lane, .la-tray, .la-face, .la-bar-t, .la-post, .la-namebg, .la-edge {
  stroke: var(--c-ink); stroke-width: 3.5; stroke-linejoin: round;
}
.la-a { fill: var(--a); }
.la-b { fill: var(--b); }
.la-at { fill: color-mix(in oklab, var(--a) 34%, var(--board)); }
.la-bt { fill: color-mix(in oklab, var(--b) 38%, var(--board)); }
.la-m { fill: color-mix(in oklab, var(--a) 18%, var(--board)); }
.la-card { fill: color-mix(in oklab, var(--board) 38%, white); }
.la-board { fill: var(--board); }
.la-lane { fill: color-mix(in oklab, var(--a) 12%, var(--board)); }
.la-tray { fill: color-mix(in oklab, var(--c-ink) 28%, var(--board)); }
.la-namebg { fill: var(--board); }
.la-edge2 { stroke: color-mix(in oklab, var(--c-ink) 45%, transparent); stroke-width: 2.5; }
.la-ink { fill: var(--c-ink); }
.la-bar { fill: color-mix(in oklab, var(--c-ink) 52%, var(--board)); stroke: none; }
.la-barl { fill: color-mix(in oklab, var(--c-ink) 24%, var(--board)); stroke: none; }
.la-barw { fill: color-mix(in oklab, var(--ai) 85%, transparent); stroke: none; }
.la-ln { fill: none; stroke: var(--c-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
/* a line drawn straight on the ground, not on a board: --ink flips to cream in dark mode, --c-ink stays dark */
.la-lng { stroke: var(--ink); }
.la-dash { stroke-dasharray: 2 14; }
.la-lnb { fill: none; stroke: var(--b); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.la-lna { fill: none; stroke: var(--a); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.la-gr { stroke: color-mix(in oklab, var(--c-ink) 22%, transparent); stroke-width: 2.5; stroke-dasharray: 3 10; stroke-linecap: round; }
.la-gr2 { stroke: color-mix(in oklab, var(--c-ink) 28%, transparent); stroke-width: 2.5; }
.la-area { fill: color-mix(in oklab, var(--a) 30%, transparent); stroke: none; }
.la-dotp { fill: var(--b); stroke: var(--c-ink); stroke-width: 3.5; }
.la-stroke { stroke: var(--c-ink); stroke-width: 3.5; }
.la-arc { fill: none; }
.la-sa { stroke: var(--a); }
.la-sb { stroke: var(--b); }
.la-sm { stroke: color-mix(in oklab, var(--a) 40%, var(--board)); }
.la-lens { fill: color-mix(in oklab, var(--c-paper) 38%, transparent); stroke: var(--c-ink); stroke-width: 9; }
.la-handle { stroke: var(--c-ink); stroke-width: 16; stroke-linecap: round; }
.la-band { fill: color-mix(in oklab, var(--b) 24%, transparent); stroke: var(--b); stroke-width: 3.5; stroke-dasharray: 10 8; }
.la-cursor { fill: var(--c-paper); stroke: var(--c-ink); stroke-width: 3.5; stroke-linejoin: round; }
.la-gl { fill: none; stroke: var(--ai); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.la-glf { fill: var(--ai); stroke: none; }

/* ---- text */
.la-tx { fill: var(--c-ink); }
.la-txa { fill: var(--ai); }
.la-txb { fill: var(--bi); }
.la-big { letter-spacing: -0.02em; }

/* ---- the sign: paper face, forest top bar, two bark posts */
.la-post { fill: var(--c-bark); }
.la-face { fill: var(--c-paper); }
.la-bar-t { fill: var(--c-forest); }

/* ---- motion: calm loops. Rest is the finished picture; a keyframe set starts and ends at its own pose. */
.la-run, .la-pulse, .la-grow, .la-growx, .la-sweep, .la-in, .la-pop, .la-scan, .la-press, .la-point, .la-rowup, .la-rowdn, .la-bob, .la-draw {
  animation-delay: var(--t, 0s); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: ease-in-out;
  transform-box: fill-box; transform-origin: center;
}
.la-run { transform: translate(calc(var(--dx, 0px) * .5), calc(var(--dy, 0px) * .5)); animation-name: la-run; animation-duration: 4.4s; animation-timing-function: linear; }
.la-pulse { animation-name: la-pulse; animation-duration: 3.6s; }
.la-grow { transform-origin: 50% 100%; animation-name: la-grow; animation-duration: 4.8s; }
.la-growx { transform-origin: 0 50%; animation-name: la-growx; animation-duration: 4.8s; }
.la-sweep { animation-name: la-sweep; animation-duration: 7s; }
.la-in { animation-name: la-in; animation-duration: 8s; }
.la-pop { animation-name: la-pop; animation-duration: 8s; }
.la-scan { animation-name: la-scan; animation-duration: 7s; }
.la-press { animation-name: la-press; animation-duration: 5s; }
.la-point { animation-name: la-point; animation-duration: 5s; }
.la-rowup { animation-name: la-rowup; animation-duration: 7s; }
.la-rowdn { animation-name: la-rowdn; animation-duration: 7s; }
.la-bob { animation-name: la-bob; animation-duration: 5s; }
.la-draw { stroke-dasharray: 1 1.2; stroke-dashoffset: 0; animation-name: la-draw; animation-duration: 6.5s; }
@keyframes la-run { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } }
@keyframes la-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes la-grow { 0%, 100% { transform: scaleY(.84); } 40%, 62% { transform: scaleY(1); } }
@keyframes la-growx { 0%, 100% { transform: scaleX(.8); } 40%, 62% { transform: scaleX(1); } }
@keyframes la-sweep { 0%, 14%, 100% { transform: translate(0, 0); } 42%, 66% { transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
@keyframes la-in { 0%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)); opacity: 0; } 18%, 82% { transform: none; opacity: 1; } 12% { opacity: 1; } }
@keyframes la-pop { 0%, 100% { transform: scale(.8); opacity: 0; } 20%, 82% { transform: scale(1); opacity: 1; } }
@keyframes la-scan { 0%, 100% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 78% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 1; } 90% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
@keyframes la-press { 0%, 58%, 80%, 100% { transform: scale(1); } 68% { transform: scale(.92); } }
@keyframes la-point { 0%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } 22%, 78% { transform: none; opacity: 1; } 50% { transform: translate(-2px, -2px); } }
@keyframes la-rowup { 0%, 12%, 100% { transform: translateY(var(--dy, 0px)); } 40%, 70% { transform: none; } }
@keyframes la-rowdn { 0%, 12%, 100% { transform: translateY(var(--dy, 0px)); } 40%, 70% { transform: none; } }
@keyframes la-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes la-draw { 0% { stroke-dashoffset: 1.2; } 38%, 100% { stroke-dashoffset: 0; } }
.static .la * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .la * { animation: none !important; } }

/* The prose column starts at the same left edge as the hero copy; only its lines stop at 760px. */
.loc-prose > * { max-width: 760px; }
.loc-prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.2; margin-bottom: 18px; }
.loc-prose p { color: var(--muted); font-size: 1.06rem; line-height: 1.7; }
.loc-prose p + p { margin-top: 14px; }
.loc-sec { padding: 64px 0; }

/* The FAQ label: section-heading size, but a p, so the page keeps one H2 per section topic. */
.loc-faq-h {
  font-family: var(--f-display); font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 600; line-height: 1.12;
  letter-spacing: -0.005em; color: var(--ink); margin: 0;
}

.loc-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; }

.loc-links { display: grid; grid-template-columns: 2fr 1fr; gap: 32px 48px; margin-bottom: 48px; }
.loc-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.loc-links a {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; font-size: .92rem; background: var(--bg); transition: border-color .2s, color .2s;
}
.loc-links a:hover { border-color: var(--line-2); color: var(--ink); }
.loc-src { font-size: .78rem; color: var(--muted); margin: -24px 0 40px; line-height: 1.6; }
.loc-src a { color: inherit; text-underline-offset: 3px; }

.loc-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.loc-region + .loc-region { margin-top: 56px; }
.loc-region .loc-prose { margin-bottom: 22px; }
.loc-cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.loc-cities a {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg); text-decoration: none; transition: border-color .2s, box-shadow .3s;
}
.loc-cities a:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); box-shadow: var(--shadow); }
.loc-cities b { font-weight: 600; }
.loc-cities span { font-size: .8rem; color: var(--muted); }

@media (max-width: 960px) {
  .loc-svc, .loc-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-links { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .loc-svc, .loc-cities { grid-template-columns: 1fr; }
  .loc-sec { padding: 48px 0; }
}