/* Road Cut Survey (fleet family "road-cut-survey").
   Ported from Dubuque Roadside's Design (site-run/steps/05-design/out/pages/DESIGN.md, "The Road Cut Survey
   Section") and its build (06-build/out/build/site/src/styles/design.css). A page is a geological survey
   section of a road cut: asphalt road bands on top, the shoulder carrying the call, a torn cut-rock edge,
   then rock beds (strata) beside a sticky stratigraphic legend column. Light only; square corners; ruled
   1.5/2/3px asphalt borders; red on the call and nowhere else.
   Fonts: Barlow Condensed 600/700 and Public Sans 400/600/700, latin subset WOFF2 from Fontsource
   (https://fontsource.org), self-hosted under /assets/fonts/, both under the SIL Open Font License,
   Version 1.1 (http://scripts.sil.org/OFL, the URL in the fonts' own name tables):
     Barlow Condensed: Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow)
     Public Sans: Copyright 2015 The Public Sans Project Authors (https://github.com/uswds/public-sans)
   Re-skin a brand with design.vars: the palette and font tokens below; every rule, veil and shade is mixed
   from them. Lithology inks are baked into the SVG patterns (slate at 15-60%, so they read on any light
   ground); a brand may override any --pat-*, --ground-* or --sym-* token too. */

@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/public-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/public-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/public-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:only light;
  /* ground and rock */
  --limestone:#c6c4bc;
  --limestone-lo:#b4b2aa;
  --limestone-hi:#d4d3cc;
  --ochre:#a7834a;
  --ochre-ground:#b8ab92;
  --ochre-bed:#bdb5a6;
  --cut-rock:#8e8c85;
  --slate:#3b4046;
  --slate-ink:#2c3035;
  /* road */
  --asphalt:#1d2023;
  --asphalt-2:#26292d;
  --snow:#f3f4f1;
  --road-text:#d9dad5;
  --answer-text:#e3e4e0;
  /* the one saturated colour: the call only */
  --call:#b3261e;
  --call-hi:#9a1f18;
  --on-call:var(--snow);
  --logo-ground:#fff;
  /* type */
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --text:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* rules, veils and shade, mixed from the tokens above (never a new hue) */
  --rule:color-mix(in srgb,var(--asphalt) 40%,transparent);
  --rule-soft:color-mix(in srgb,var(--asphalt) 30%,transparent);
  --rule-firm:color-mix(in srgb,var(--asphalt) 50%,transparent);
  --rule-light:color-mix(in srgb,var(--snow) 45%,transparent);
  --rule-on-call:color-mix(in srgb,var(--snow) 55%,transparent);
  --veil:color-mix(in srgb,var(--snow) 55%,transparent);
  --veil-dark:color-mix(in srgb,var(--snow) 7%,transparent);
  --shade:color-mix(in srgb,var(--asphalt) 50%,transparent);
  --shade-deep:color-mix(in srgb,var(--asphalt) 85%,transparent);
  --leaf-rule:color-mix(in srgb,var(--asphalt) 13%,transparent);

  /* type scale: the H1 stays the largest display size at every width */
  --fs-body:1.0625rem;
  --fs-lede:1.0625rem;
  --fs-ui:1rem;
  --fs-small:.9375rem;
  --fs-tag:.875rem;
  --fs-nav:1.1875rem;
  --fs-key:1.125rem;
  --fs-what:clamp(1.125rem,1.4vw,1.3125rem);
  --fs-route:1.5rem;
  --fs-call:1.375rem;
  --fs-call-lg:1.5rem;
  --fs-reading:1.5rem;
  --fs-step:1.5rem;
  --fs-dt:1.375rem;
  --fs-faq:clamp(1.3125rem,2vw,1.625rem);
  --fs-line:clamp(1.5rem,2.4vw,2rem);
  --fs-legend:clamp(1.75rem,2.6vw,2.25rem);
  --fs-h2:clamp(2rem,3.6vw,3.25rem);
  --fs-banner:clamp(2.25rem,3.6vw,3.5rem);
  --fs-h1:clamp(2.75rem,4.1vw,4.25rem);

  --gutter:clamp(16px,3vw,40px);
  --bed-x:clamp(16px,4vw,56px);
  --bed-y:clamp(40px,5vw,72px);
  --col-w:252px;
  --strip-h:64px; /* the stuck shoulder strip (desktop) */
  --bar-h:80px; /* the phone call bar */
  --ease:cubic-bezier(.16,1,.3,1);

  /* lithology, full strength: swatches and bed faces only */
  --pat-limestone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 .5H40M0 10.5H40M.5 0V10M20.5 10V20' stroke='%233b4046' stroke-opacity='.42' fill='none'/%3E%3C/svg%3E");
  --pat-dolomite:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 .5H40M0 10.5H40M5 0L1 10.5M25 10.5L21 20' stroke='%23614a24' stroke-opacity='.6' fill='none'/%3E%3C/svg%3E");
  --pat-sandstone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Ccircle cx='3' cy='3' r='1.15' fill='%233b4046' fill-opacity='.5'/%3E%3Ccircle cx='11' cy='10' r='1.15' fill='%233b4046' fill-opacity='.5'/%3E%3C/svg%3E");
  --pat-shale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10'%3E%3Cpath d='M2 2.5H13M16 7.5H26' stroke='%23c6c4bc' stroke-opacity='.4' fill='none'/%3E%3C/svg%3E");
  --pat-mud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10'%3E%3Cpath d='M2 2.5H13M16 7.5H26' stroke='%233b4046' stroke-opacity='.5' fill='none'/%3E%3C/svg%3E");
  --pat-conglomerate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Cellipse cx='6' cy='4.5' rx='3.4' ry='2.3' stroke='%233b4046' stroke-opacity='.55' fill='none'/%3E%3Cellipse cx='18' cy='12' rx='2.6' ry='1.9' stroke='%233b4046' stroke-opacity='.55' fill='none'/%3E%3C/svg%3E");
  --pat-loess:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16'%3E%3Cpath d='M3 1.5V6.5M9 9.5V14.5' stroke='%233b4046' stroke-opacity='.5' fill='none'/%3E%3C/svg%3E");
  --pat-granite:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M5 2V8M2 5H8M15 12V18M12 15H18' stroke='%233b4046' stroke-opacity='.55' fill='none'/%3E%3C/svg%3E");
  --pat-breccia:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20'%3E%3Cpath d='M2.5 8.5L6.5 2.5 10.5 7.5ZM14.5 17.5L20 13 21.5 18.5Z' stroke='%233b4046' stroke-opacity='.55' fill='none' stroke-linejoin='bevel'/%3E%3C/svg%3E");
  --pat-tee:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='20'%3E%3Cpath d='M2 8.5H10M6 8.5V2.5M16 17.5H24M20 17.5V11.5' stroke='%233b4046' stroke-opacity='.6' fill='none'/%3E%3C/svg%3E");
  --pat-silt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cpath d='M2 4.5H12M15.5 4.5H17.5M18 12.5H28M31.5 12.5H32M0 12.5H1.5' stroke='%233b4046' stroke-opacity='.6' fill='none'/%3E%3C/svg%3E");
  --pat-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='20'%3E%3Cpath d='M2 8.5L7 3.5 12 8.5M18 17.5L23 12.5 28 17.5' stroke='%233b4046' stroke-opacity='.6' fill='none'/%3E%3C/svg%3E");
  --pat-clay:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M0 2.5H20M4 6.5H16' stroke='%233b4046' stroke-opacity='.5' fill='none'/%3E%3C/svg%3E");
  /* new layers for the services the Dubuque build never drew */
  --pat-coal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpath d='M0 3.5H24' stroke='%231d2023' stroke-opacity='.6' stroke-width='3'/%3E%3Cpath d='M0 10.5H24' stroke='%231d2023' stroke-opacity='.3'/%3E%3C/svg%3E");
  --pat-salt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16'%3E%3Cpath d='M2.5 2.5H6.5V6.5H2.5ZM12.5 9.5H16.5V13.5H12.5Z' stroke='%233b4046' stroke-opacity='.6' fill='none'/%3E%3C/svg%3E");
  --pat-xbed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cpath d='M0 .5H40M0 11.5H40' stroke='%233b4046' stroke-opacity='.35' fill='none'/%3E%3Cpath d='M3 10L13 2M23 10L33 2' stroke='%233b4046' stroke-opacity='.55' fill='none'/%3E%3C/svg%3E");
  --pat-schist:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M2 4.5L5 2 8 4.5 11 2 14 4.5M15 11.5L18 9 21 11.5 24 9 27 11.5' stroke='%233b4046' stroke-opacity='.55' fill='none' stroke-linejoin='bevel'/%3E%3C/svg%3E");
  /* lithology, ghost strength (15-22%): may sit behind text */
  --ground-limestone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 .5H40M0 10.5H40M.5 0V10M20.5 10V20' stroke='%233b4046' stroke-opacity='.16' fill='none'/%3E%3C/svg%3E");
  --ground-dolomite:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 .5H40M0 10.5H40M5 0L1 10.5M25 10.5L21 20' stroke='%23614a24' stroke-opacity='.22' fill='none'/%3E%3C/svg%3E");
  --ground-shale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10'%3E%3Cpath d='M2 2.5H13M16 7.5H26' stroke='%23c6c4bc' stroke-opacity='.12' fill='none'/%3E%3C/svg%3E");
  --ground-conglomerate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32'%3E%3Cellipse cx='10' cy='8' rx='5' ry='3.4' stroke='%233b4046' stroke-opacity='.15' fill='none'/%3E%3Cellipse cx='34' cy='24' rx='3.8' ry='2.7' stroke='%233b4046' stroke-opacity='.15' fill='none'/%3E%3C/svg%3E");
  --ground-loess:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24'%3E%3Cpath d='M5 2V9M15 14V21' stroke='%233b4046' stroke-opacity='.15' fill='none'/%3E%3C/svg%3E");
  --ground-granite:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M9 4V14M4 9H14M27 22V32M22 27H32' stroke='%233b4046' stroke-opacity='.16' fill='none'/%3E%3C/svg%3E");
  --ground-breccia:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='36'%3E%3Cpath d='M4 15L11 4 18 13ZM27 31L37 23 39.5 33Z' stroke='%233b4046' stroke-opacity='.16' fill='none' stroke-linejoin='bevel'/%3E%3C/svg%3E");
  --ground-tee:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='32'%3E%3Cpath d='M4 13H16M10 13V4M26 28H38M32 28V19' stroke='%233b4046' stroke-opacity='.15' fill='none'/%3E%3C/svg%3E");
  --ground-silt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M3 6.5H18M23 6.5H26M27 18.5H42M46 18.5H48M0 18.5H2' stroke='%233b4046' stroke-opacity='.16' fill='none'/%3E%3C/svg%3E");
  --ground-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32'%3E%3Cpath d='M3 13L10.5 5.5 18 13M27 28L34.5 20.5 42 28' stroke='%233b4046' stroke-opacity='.15' fill='none'/%3E%3C/svg%3E");
  --ground-clay:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='12'%3E%3Cpath d='M0 3.5H30M6 9.5H24' stroke='%233b4046' stroke-opacity='.15' fill='none'/%3E%3C/svg%3E");
  --ground-coal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='22'%3E%3Cpath d='M0 5H36' stroke='%231d2023' stroke-opacity='.12' stroke-width='3'/%3E%3Cpath d='M0 16.5H36' stroke='%231d2023' stroke-opacity='.1'/%3E%3C/svg%3E");
  --ground-salt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28'%3E%3Cpath d='M4.5 4.5H10.5V10.5H4.5ZM20.5 16.5H26.5V22.5H20.5Z' stroke='%233b4046' stroke-opacity='.16' fill='none'/%3E%3C/svg%3E");
  --ground-xbed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='18'%3E%3Cpath d='M0 .5H56M5 15L19 4M33 15L47 4' stroke='%233b4046' stroke-opacity='.15' fill='none'/%3E%3C/svg%3E");
  --ground-schist:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='22'%3E%3Cpath d='M3 6.5L7.5 3 12 6.5 16.5 3 21 6.5M21 17.5L25.5 14 30 17.5 34.5 14 39 17.5' stroke='%233b4046' stroke-opacity='.15' fill='none' stroke-linejoin='bevel'/%3E%3C/svg%3E");
  /* road symbols (field-book leaves): drawn in asphalt ink on snow, not lithology */
  --sym-road4:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M7 3V45M18 3V45M30 3V45M41 3V45' stroke='%231d2023' stroke-width='2.4' fill='none'/%3E%3Cpath d='M12.5 5V12M12.5 20V28M12.5 36V43M35.5 5V12M35.5 20V28M35.5 36V43' stroke='%231d2023' stroke-width='1.5' fill='none'/%3E%3Cpath d='M20.5 8L27.5 14M20.5 20L27.5 26M20.5 32L27.5 38' stroke='%231d2023' stroke-opacity='.45' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  --sym-merge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 3C10 16 20 20 20 28V45M38 3C38 16 28 20 28 28V45' stroke='%231d2023' stroke-width='2.4' fill='none'/%3E%3Cpath d='M24 31V36M24 41V45' stroke='%231d2023' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  --sym-trumpet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M3 12H45' stroke='%231d2023' stroke-width='2.4' fill='none'/%3E%3Cpath d='M24 45V30C24 22 30 15 40 12' stroke='%231d2023' stroke-width='2.4' fill='none'/%3E%3Cpath d='M24 30C24 38 11 38 11 28C11 19 17 13 27 12' stroke='%231d2023' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  --sym-towns:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M13 9L19 19H7ZM35 9L41 19H29ZM24 27L30 37H18Z' fill='%231d2023'/%3E%3Cpath d='M13 19L24 27L35 19' stroke='%231d2023' stroke-opacity='.45' stroke-width='1.2' stroke-dasharray='2 2.5' fill='none'/%3E%3C/svg%3E");
  --sym-helper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='15' stroke='%231d2023' stroke-width='2.2' stroke-dasharray='5 4' fill='none'/%3E%3Cpath d='M24 18V30M18 24H30' stroke='%231d2023' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  --sym-rest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M9 3V45M21 3V45' stroke='%231d2023' stroke-width='2.4' fill='none'/%3E%3Cpath d='M15 5V12M15 20V28M15 36V43' stroke='%231d2023' stroke-width='1.5' fill='none'/%3E%3Cpath d='M21 13C34 13 41 18 41 24S34 35 21 35' stroke='%231d2023' stroke-width='2' fill='none'/%3E%3Cpath d='M28 20H35V28H28Z' fill='%231d2023' fill-opacity='.6'/%3E%3C/svg%3E");
  --sym-closure:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 3V45M38 3V45' stroke='%231d2023' stroke-width='2.4' fill='none'/%3E%3Cpath d='M5 19H43V29H5Z' fill='%23f3f4f1' stroke='%231d2023' stroke-width='2'/%3E%3Cpath d='M10 29L16 19M19 29L25 19M28 29L34 19M37 29L42 21' stroke='%231d2023' stroke-width='2.4' fill='none'/%3E%3C/svg%3E");
  /* the sources' ruled-table mark (Contact's Facts row) */
  --mark-table:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10'%3E%3Cpath d='M0 9.25H44M16.75 0V10' stroke='%231d2023' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  /* bed contacts: wavy (default), jagged; the torn edge where the road cut meets the strata */
  --contact:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Cpath d='M0 5C20 1 40 9 60 5S100 1 120 5' stroke='%231d2023' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  --contact-jag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10'%3E%3Cpath d='M0 6L8 3 15 7 24 2 31 6 40 3 48 6' stroke='%231d2023' stroke-width='1.6' fill='none' stroke-linejoin='bevel'/%3E%3C/svg%3E");
  --torn-edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V6.6L96 13.2 91 7.7 86 15.4 80 8.8 73 14.3 66 6.6 60 15.8 52 8.4 45 14.5 37 7 30 15.4 22 8.8 15 15 8 7.5 3 13.2 0 8.8Z'/%3E%3C/svg%3E");
  --select-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1.5 1.5L7 7l5.5-5.5' stroke='%231d2023' stroke-width='2.2' fill='none'/%3E%3C/svg%3E");
  --graticule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 .5H72M.5 0V72' stroke='%231d2023' stroke-opacity='.22' fill='none'/%3E%3Cpath d='M36 30V42M30 36H42' stroke='%231d2023' stroke-opacity='.5' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  --asphalt-grain:radial-gradient(circle at 20% 30%,color-mix(in srgb,var(--snow) 5%,transparent) 1px,transparent 1.5px) 0 0/7px 7px,radial-gradient(circle at 60% 70%,color-mix(in srgb,var(--asphalt) 70%,transparent) 1px,transparent 1.5px) 0 0/5px 5px;
  --dash:repeating-linear-gradient(90deg,var(--shade-deep) 0 5px,transparent 5px 11px);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--strip-h) + 20px);scrollbar-color:var(--slate) var(--limestone-hi)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (min-width:1024px){html{scroll-padding-bottom:16px}}
body{margin:0;background:var(--limestone);color:var(--asphalt);font-family:var(--text);font-size:var(--fs-body);line-height:1.6;caret-color:var(--call);overflow-x:clip;font-variant-numeric:tabular-nums}
::selection{background:var(--asphalt);color:var(--snow)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.22em}
:focus-visible{outline:3px solid var(--asphalt);outline-offset:3px;box-shadow:0 0 0 6px var(--snow)}
.on-dark :focus-visible{outline-color:var(--snow);box-shadow:0 0 0 6px var(--asphalt)}
/* snow plates keep the dark ring even when they sit on a dark bed */
.quad :focus-visible,.title-plate :focus-visible,.dial :focus-visible,.send-box :focus-visible,.prose ol :focus-visible,.legend :focus-visible,.marks :focus-visible,.sheets :focus-visible,.layers :focus-visible,.pcard :focus-visible,.index :focus-visible{outline-color:var(--asphalt);box-shadow:0 0 0 6px var(--snow)}
h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.95;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
dl,dd{margin:0}
li,dd,dt,small{text-wrap:pretty}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:60;background:var(--snow);color:var(--asphalt);padding:12px 16px;font-weight:700}
.skip:focus{top:12px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.tag{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-tag);line-height:1.2}
.icon{flex:none;width:22px;height:22px}
main{display:block}
main:focus{outline:none}

/* ---------- the call: the one saturated control; label and number wrap as units ---------- */
.call{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:10px 22px 10px 18px;background:var(--call);color:var(--on-call);text-decoration:none;font-family:var(--display);font-weight:700;font-size:var(--fs-call);text-transform:uppercase;letter-spacing:.02em;line-height:1;max-width:100%;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px);transition:background-color .2s var(--ease)}
.call:hover{background:var(--call-hi)}
.call:active{transform:translateY(1px)}
.call .cw{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;min-width:0;overflow:hidden;margin:0 -14px 0 -13px;padding-block:2px}
.call .t,.call .num{margin-left:-1px;padding:0 14px;border-left:1px solid var(--rule-on-call)}
.call .num{font-weight:600;letter-spacing:.06em;white-space:nowrap}
.call:focus-visible{clip-path:none}
.call--lg{font-size:var(--fs-call-lg);min-height:60px}
/* a call that shares the screen with a red one: same shape, road ground */
.call.is-quiet{background:var(--asphalt)}
.call.is-quiet:hover{background:var(--asphalt-2)}

/* ---------- header: the survey sheet's title block ---------- */
.sheet-head{background:var(--snow);border-bottom:3px solid var(--asphalt)}
.sheet-head .in{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo nav call";align-items:center;gap:6px 24px;padding:8px var(--gutter)}
.logo{display:flex;align-items:center;min-height:46px;max-width:100%;padding:5px 10px;background:var(--logo-ground);border:1.5px solid var(--asphalt);color:var(--asphalt);text-decoration:none}
.sheet-head .logo{grid-area:logo;justify-self:start}
.head-call{grid-area:call}
/* a logo image cropped to its wordmark (images.logo.crop): the visible box is --lw wide */
.logo-crop{--lw:240px;display:block;position:relative;overflow:hidden;width:var(--lw);max-width:100%;height:calc(var(--lw) * var(--ch) / var(--cw) / (var(--ar)))}
.logo-crop img{position:absolute;max-width:none;width:calc(var(--lw) / var(--cw));height:auto;left:calc(var(--lw) * var(--cx) / var(--cw) * -1);top:calc(var(--lw) * var(--cy) / var(--cw) / (var(--ar)) * -1)}
.wm{display:flex;align-items:center;gap:10px;min-width:0}
.wm-mark{flex:none;width:30px;height:30px;border:1.5px solid var(--asphalt);background:repeating-linear-gradient(90deg,var(--snow) 0 4px,transparent 4px 7px) 0 15%/100% 1.5px no-repeat,linear-gradient(180deg,var(--asphalt) 0 34%,var(--limestone) 34% 56%,var(--ochre-ground) 56% 78%,var(--slate) 78%)}
.wm-name{font-family:var(--display);font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:.04em;line-height:1}
.nav{grid-area:nav;min-width:0}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 6px}
.nav a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 12px;font-family:var(--display);font-weight:600;font-size:var(--fs-nav);text-transform:uppercase;letter-spacing:.06em;color:var(--slate);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--asphalt);border-bottom-color:var(--asphalt)}
.head-call .call{min-height:44px;font-size:var(--fs-nav);padding:6px 16px 6px 12px;gap:10px}
.head-call .call .icon{width:18px;height:18px}

/* ---------- the page head: road band, shoulder, from-price reading, photo window ---------- */
.head{display:grid;grid-template-columns:minmax(0,1fr);position:relative;isolation:isolate}
.head>*{min-width:0}
.band{grid-row:1;grid-column:1;position:relative;background:var(--asphalt);color:var(--snow)}
.band::before{content:"";position:absolute;inset:0;background:var(--asphalt-grain);pointer-events:none}
.band>.in{position:relative;z-index:2;max-width:1600px;margin:0 auto;padding:clamp(22px,2.4vw,40px) var(--gutter) clamp(32px,2.8vw,44px)}
.band h1{font-size:var(--fs-h1);max-width:20ch;color:var(--snow)}
.band .lede{margin-top:16px;max-width:58ch;color:var(--road-text);font-size:var(--fs-lede)}
.band .lede p+p{margin-top:.6em}
.band .lede a{color:var(--snow);font-weight:700}
.band--road>.in{min-height:clamp(300px,24vw,380px);display:flex;flex-direction:column;justify-content:flex-end}
.has-window .band--road .text{max-width:min(58%,860px)}
.window{grid-row:1;grid-column:1;justify-self:end;align-self:stretch;width:47%;margin:0;position:relative;z-index:1;overflow:hidden;background:var(--asphalt)}
.window img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 60%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.window figcaption{position:absolute;right:var(--gutter);top:16px;background:var(--snow);color:var(--asphalt);padding:4px 10px}

/* breadcrumbs: survey capitals on the road, triangle marks between */
.crumbs ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;font-family:var(--display);font-weight:600;font-size:var(--fs-ui);text-transform:uppercase;letter-spacing:.08em;line-height:1.2}
.crumbs li{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--road-text)}
.crumbs li+li::before{content:"";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor}
.crumbs a{display:flex;align-items:center;min-height:44px;color:var(--road-text);text-decoration:none;border-bottom:2px solid transparent}
.crumbs a:hover{color:var(--snow);border-bottom-color:var(--snow)}
.crumbs [aria-current]{color:var(--snow)}

/* route and exit plates on the road (exit, stretch and segment pages) */
.signs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.rplate{display:inline-flex;align-items:center;min-height:44px;padding:5px 12px 3px;background:var(--snow);color:var(--asphalt);border:2px solid var(--asphalt);box-shadow:0 0 0 2px var(--snow);font-family:var(--display);font-weight:700;font-size:var(--fs-route);letter-spacing:.04em;line-height:1}
.xplate{display:inline-flex;align-items:stretch;min-height:44px;background:var(--snow);color:var(--asphalt);box-shadow:0 0 0 2px var(--snow);font-family:var(--display);font-weight:700;line-height:1}
.xplate .k{display:flex;align-items:center;padding:0 10px;background:var(--asphalt-2);color:var(--snow);border:2px solid var(--asphalt);border-right:0;font-weight:600;font-size:var(--fs-tag);letter-spacing:.12em;text-transform:uppercase}
.xplate .v{display:flex;align-items:center;padding:5px 14px 3px;border:2px solid var(--asphalt);font-size:var(--fs-route);letter-spacing:.04em}

/* contact: the number read off the road, a quiet ink dial (never red, not a second call) */
.dial{margin-top:24px;padding:0 16px;width:fit-content;max-width:100%;background:var(--snow);color:var(--asphalt);font-family:var(--display)}
.dial dt{padding:8px 0 6px;border-bottom:3px solid var(--asphalt);font-weight:600;font-size:var(--fs-tag);text-transform:uppercase;letter-spacing:.12em;line-height:1.2;color:var(--slate)}
.dial dd{padding:4px 0 6px}
.dial a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:var(--fs-h2);letter-spacing:.06em;line-height:1;color:var(--asphalt);text-decoration:none;overflow-wrap:anywhere}
.dial a:hover,.dial a:focus-visible{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}

/* service and pair heads: the route band, from the car's station to the help, on one road */
.band--route>.in{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,36fr) minmax(0,30fr);grid-template-areas:"a h b";align-items:end;padding-bottom:0}
.band--route .title{grid-area:h;min-width:0;padding:0 clamp(20px,3vw,48px) 26px}
.band--route .line{margin-top:14px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-key);line-height:1.5;color:var(--road-text);--sep:.62em;overflow:hidden}
/* each unit leads with its dot in a --sep box and the row is pulled left by --sep inside the clipped line:
   no line starts or ends with a dot */
.band--route .line .row{display:block;margin-left:calc(-1 * var(--sep))}
.band--route .line .u{display:inline-block;white-space:nowrap}
.band--route .line .dot{display:inline-block;width:var(--sep)}
.band--route .lede{max-width:46ch}
.stations{display:contents;list-style:none}
.station{position:relative;min-width:0}
.station-a{grid-area:a}
.station-b{grid-area:b;font-size:var(--fs-line)}
.station-a figure,.station-a .no-photo{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--slate);border:solid var(--rule-light);border-width:2px 2px 0}
.station-a .no-photo{background:var(--sw)}
.station-a img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.02)}
.station .plate{display:block;width:fit-content;max-width:100%;background:var(--snow);color:var(--asphalt);border:2px solid var(--asphalt);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:.95;text-wrap:balance}
.station-a .plate{position:absolute;left:0;bottom:0;padding:10px 16px 9px;font-size:var(--fs-line);border-width:2px 2px 0 0}
.station-b .plate{position:relative;padding:14px 18px 16px;font-size:1em;border-bottom:0;max-width:14em}
.roadline{position:relative;height:56px;background:var(--asphalt-2);border-top:3px solid var(--snow)}
.roadline .in{position:relative;max-width:1600px;height:100%;margin:0 auto}
.roadline .run{position:absolute;top:50%;height:3px;margin-top:-1px;left:calc(var(--gutter) + (100% - 2 * var(--gutter)) * .17);right:calc(var(--gutter) + (100% - 2 * var(--gutter)) * .30);background:repeating-linear-gradient(90deg,var(--snow) 0 26px,transparent 26px 42px)}
.roadline .run::before{content:"";position:absolute;left:-10px;top:-3.5px;width:10px;height:10px;background:var(--snow)}
.roadline .run .icon{position:absolute;right:-26px;top:-14px;width:30px;height:30px;color:var(--snow)}
/* help comes to the car: the run starts at the right station and points into the car's */
.to-car .roadline .run::before{left:auto;right:-10px}
.to-car .roadline .run .icon{right:auto;left:-26px;transform:scaleX(-1)}

/* town and county heads: the quadrangle sheet on the road */
.band--sheet>.in{padding-bottom:clamp(40px,3.4vw,52px)}
.quad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:auto 1fr;grid-template-areas:"name plate" "lead plate";background:var(--snow);color:var(--asphalt);border:3px solid var(--snow);outline:2px solid var(--asphalt);outline-offset:-7px;padding:5px}
.quad h1{grid-area:name;max-width:none;padding:clamp(20px,2.4vw,32px) clamp(18px,2.4vw,32px) 18px;color:var(--asphalt)}
.quad h1 .pre{display:block;font-size:var(--fs-line);letter-spacing:.04em;line-height:1;color:var(--slate)}
.quad h1 .tn{display:block;margin-top:.14em;font-size:var(--fs-h1);max-width:14ch}
.quad h1.whole{font-size:var(--fs-h1);max-width:16ch}
.quad .lede{grid-area:lead;max-width:none;margin:0 clamp(18px,2.4vw,32px);padding:16px 0 clamp(20px,2.4vw,30px);border-top:3px solid var(--asphalt);color:var(--slate-ink)}
.quad .lede p{max-width:58ch}
.quad .lede a{color:var(--asphalt)}
.quad .plate{grid-area:plate;margin:0;display:flex;flex-direction:column;min-width:0;border-left:2px solid var(--asphalt)}
.quad .plate .ph{position:relative;flex:1 1 auto;overflow:hidden;background:var(--slate)}
.quad .plate .ph::before{content:"";display:block;padding-top:calc(300% / 7)}
.quad .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 60%}
.quad .plate figcaption{display:flex;align-items:center;gap:10px;padding:9px 14px 8px;border-top:2px solid var(--asphalt);background:var(--snow);color:var(--asphalt)}
.quad .plate figcaption::before{content:"";flex:none;width:9px;height:9px;background:var(--asphalt)}
/* no photo: the sheet's graticule, a survey grid with its crosshair marks */
.quad .map{grid-area:plate;min-height:240px;border-left:2px solid var(--asphalt);background:var(--graticule) 0 0/72px 72px,var(--limestone-hi)}

/* legal, thank-you, 404 and about heads: a snow title plate on a short road */
.band--plate>.in{padding-bottom:clamp(34px,3vw,44px)}
.title-plate{display:grid;grid-template-columns:auto minmax(0,auto);align-items:stretch;width:fit-content;max-width:100%;background:var(--snow);color:var(--asphalt);border:3px solid var(--snow);outline:2px solid var(--asphalt);outline-offset:-7px;padding:5px}
.title-plate .tp{padding:16px 24px;min-width:0}
.title-plate h1{color:var(--asphalt);max-width:20ch}
.title-plate .field{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px 24px;border-left:1.5px solid var(--asphalt);min-width:0}
.title-plate .field dt{font-family:var(--display);font-weight:600;font-size:var(--fs-tag);text-transform:uppercase;letter-spacing:.12em;line-height:1.2;color:var(--slate)}
.title-plate .field dd{font-family:var(--display);font-weight:700;font-size:var(--fs-key);text-transform:uppercase;letter-spacing:.06em;line-height:1.15;color:var(--asphalt)}
.title-plate--sheet{width:auto;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.title-plate--sheet .tp{padding:clamp(20px,2.4vw,32px)}
.title-plate--sheet h1{max-width:24ch}
.title-plate--sheet .lede{margin-top:16px;max-width:56ch;color:var(--slate-ink)}
.title-plate--sheet .lede a{color:var(--asphalt)}
.title-plate--sheet .field{background:var(--ground-granite),var(--limestone-hi)}
.title-plate--sheet .field dd{font-size:var(--fs-legend);line-height:1}
.band--plate .title-plate+.lede{margin-top:18px}
.has-window .band--plate .title-plate{max-width:min(100%,52%)}

/* cost head: a short road band, the H1 beside the lede */
.band--head .ph-grid{display:grid;grid-template-columns:minmax(0,auto) minmax(0,64ch);gap:18px clamp(32px,6vw,96px);align-items:end;justify-content:start}
.band--head .ph-grid .lede{margin-top:0;max-width:64ch}

/* the shoulder: the call at road level, straddling the road's snow edge line */
.shoulder{position:relative;z-index:3;background:var(--asphalt-2);color:var(--snow);border-top:5px solid var(--snow)}
.shoulder::after{content:"";position:absolute;left:0;right:0;top:4px;height:10px;background:var(--dash);pointer-events:none}
.shoulder .in{position:relative;max-width:1600px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px 28px;padding:12px var(--gutter) 16px}
.shoulder .call,.lane .call{box-shadow:0 8px 16px -6px var(--shade-deep);position:relative;z-index:1}
.shoulder .call{margin-top:-30px}
.shoulder .call:focus-visible,.lane .call:focus-visible{outline:3px solid var(--snow);outline-offset:3px;box-shadow:0 0 0 6px var(--asphalt)}
.shoulder .say{display:grid;gap:4px;padding-top:6px;min-width:0}
.shoulder .l247{font-weight:600;color:var(--snow);max-width:62ch;line-height:1.45}
.shoulder .ask{color:var(--road-text);font-size:var(--fs-small);max-width:62ch;line-height:1.45}

/* the from-price reading: a ledger plate under the shoulder, then the price note word for word */
.reading{font-family:var(--display);text-transform:uppercase;font-variant-numeric:tabular-nums}
.reading dt{font-weight:600;font-size:var(--fs-tag);text-transform:uppercase;letter-spacing:.12em;line-height:1.2;color:var(--slate)}
.reading dd{font-weight:700;font-size:var(--fs-reading);letter-spacing:.06em;line-height:1.05;color:var(--asphalt);overflow-wrap:anywhere}
.reading .k{font-weight:600;font-size:var(--fs-tag);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-right:4px}
.brief{position:relative;background:var(--asphalt-2);color:var(--snow)}
.brief .in{max-width:1600px;margin:0 auto;padding:2px var(--gutter) 22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.reading--brief{display:grid;grid-template-columns:repeat(4,minmax(0,auto));background:var(--snow);color:var(--asphalt);border-top:3px solid var(--asphalt);box-shadow:0 0 0 2px var(--snow)}
.reading--brief>div{display:flex;flex-direction:column;gap:6px;padding:9px 16px 10px;border-left:1px dotted var(--rule-firm);min-width:0}
.reading--brief>div:first-child{border-left:0}
.reading--brief dd{white-space:nowrap}
.price-note{max-width:62ch;margin-top:14px;padding-top:10px;border-top:1.5px solid var(--rule-firm);font-size:var(--fs-small);line-height:1.45;color:var(--slate-ink)}
.brief .price-note{flex:1 1 22rem;margin:0;padding:0;border:0;color:var(--road-text)}
.checked{margin-top:8px;font-family:var(--display);font-weight:600;font-size:var(--fs-tag);text-transform:uppercase;letter-spacing:.12em;line-height:1.3;color:var(--slate)}

/* ---------- the cut: torn edge, legend column and strata ---------- */
.cut-edge{height:22px;background:var(--limestone);position:relative}
.cut-edge::before{content:"";position:absolute;inset:0;background:var(--cut-rock);-webkit-mask:var(--torn-edge) 0 0/100% 100% no-repeat;mask:var(--torn-edge) 0 0/100% 100% no-repeat}
.cut{position:relative;max-width:1600px;margin:0 auto;display:grid;grid-template-columns:var(--col-w) minmax(0,1fr)}
.cut--one{grid-template-columns:minmax(0,1fr)}
.strata{min-width:0;border-left:2px solid var(--asphalt)}
.cut--one .strata{border-left:0}
.bed{position:relative;padding:var(--bed-y) var(--bed-x);background:var(--ground,none),var(--bed,var(--limestone))}
.bed h2{font-size:var(--fs-h2)}
/* contacts: every bed's top edge is the boundary with the bed above; dark beds invert it */
.strata>.bed+.bed::before{content:"";position:absolute;left:0;right:0;top:-5px;height:10px;background:var(--contact) 0 0/120px 10px repeat-x;z-index:1}
.strata>.bed.on-dark::before{filter:invert(1)}
.strata>.bed.L-flat::before{top:-1px;height:2px;background:var(--asphalt)}
.strata>.bed.L-winch::before,.t-problem .strata>.bed+.bed::before{background:var(--contact-jag) 0 0/48px 10px repeat-x}

/* the stratigraphic column: the in-page section navigation, one swatch row per bed */
.column{position:sticky;top:calc(var(--strip-h) + 18px);align-self:start;max-height:calc(100vh - var(--strip-h) - 36px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:10px 10px 24px clamp(16px,2vw,28px);z-index:5}
.column ol{position:relative;list-style:none;margin:0;padding:0;border-left:2px solid var(--asphalt)}
.column ol::before{content:"";position:absolute;top:0;bottom:0;left:-11px;width:7px;background:repeating-linear-gradient(180deg,var(--asphalt) 0 1.5px,transparent 1.5px 11px);opacity:.55;pointer-events:none}
.column li{position:relative}
.column a{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:stretch;min-height:44px;text-decoration:none;color:var(--slate)}
.column a .sw{border-right:2px solid var(--asphalt);border-bottom:1px solid var(--rule-firm);background:var(--sw,var(--limestone-hi))}
.column a .lb{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 12px;font-family:var(--display);font-weight:600;font-size:var(--fs-ui);text-transform:uppercase;letter-spacing:.08em;line-height:1.2;border-bottom:1px dotted var(--rule)}
.column li.svc .lb{font-size:var(--fs-nav);color:var(--asphalt);font-weight:700;letter-spacing:.05em}
.column a:hover .lb{background:var(--veil)}
/* every row reserves the pointer's space, so marking a row never re-wraps its label */
.column a .lb::after{content:"";flex:none;margin-left:auto;border:6px solid transparent;border-left:8px solid transparent;border-right:0}
.column a[aria-current="location"] .lb{background:var(--asphalt);color:var(--snow)}
.column a[aria-current="location"] .lb::after{border-left-color:var(--snow)}
.column .sw.no{display:flex;align-items:center;justify-content:center;background:var(--snow);font-family:var(--display);font-weight:700;font-size:var(--fs-key);line-height:1;color:var(--asphalt)}
.column--index .lb{color:var(--asphalt);font-size:var(--fs-key);letter-spacing:.06em}
@media (min-width:1024px) and (pointer:fine) and (not (any-pointer:coarse)){
  .column a{min-height:29px}
  .column li.svc a,.column--index a{min-height:44px}
}

/* ---------- layers: a bed's ground (--bed), ghost lithology (--ground) and full swatch (--sw) ----------
   Service rock colours belong to their layer only; page-owned layers sit on neutral grounds. */
.L-tow{--bed:var(--limestone);--ground:var(--ground-limestone);--sw:var(--limestone) var(--pat-limestone)}
.L-jump{--bed:var(--ochre-bed);--ground:var(--ground-dolomite);--sw:var(--ochre-ground) var(--pat-dolomite)}
.L-flat{--bed:var(--limestone-hi);--ground:none;--sw:var(--limestone-hi) var(--pat-sandstone)}
.L-lock{--bed:var(--slate);--ground:var(--ground-shale);--sw:var(--slate) var(--pat-shale)}
.L-winch{--bed:var(--limestone-lo);--ground:none;--sw:linear-gradient(var(--snow) 0 38%,var(--asphalt) 38% calc(38% + 2px),transparent calc(38% + 2px)),var(--pat-mud),var(--limestone-lo)}
.L-tires{--bed:var(--limestone-hi);--ground:var(--ground-xbed);--sw:var(--limestone-hi) var(--pat-xbed)}
.L-battery{--bed:var(--limestone);--ground:var(--ground-salt);--sw:var(--snow) var(--pat-salt)}
.L-fuel{--bed:var(--limestone-lo);--ground:var(--ground-coal);--sw:var(--limestone-lo) var(--pat-coal)}
.L-mech{--bed:var(--limestone-hi);--ground:var(--ground-schist);--sw:var(--limestone-hi) var(--pat-schist)}
.L-call{--bed:var(--limestone);--ground:var(--ground-conglomerate);--sw:var(--snow) var(--pat-conglomerate)}
.L-where{--bed:var(--limestone);--ground:var(--ground-loess);--sw:var(--limestone) var(--pat-loess)}
.L-faq{--bed:var(--slate-ink);--ground:var(--ground-shale);--sw:var(--slate-ink) var(--pat-shale)}
.L-card{--bed:var(--limestone);--ground:none;--sw:linear-gradient(180deg,var(--limestone) 0 20%,var(--ochre-ground) 20% 40%,var(--limestone-hi) 40% 60%,var(--slate) 60% 80%,var(--limestone-lo) 80%)}
.L-src{--bed:var(--limestone-lo);--ground:none;--sw:var(--snow) var(--mark-table) 0 0/44px 10px}
.L-helper{--bed:var(--limestone-hi);--ground:none;--sw:var(--snow) var(--sym-helper) center/72% auto no-repeat}
.L-p1{--bed:var(--limestone-hi);--ground:var(--ground-granite);--sw:var(--limestone-hi) var(--pat-granite)}
.L-p2{--bed:var(--limestone);--ground:var(--ground-silt);--sw:var(--limestone) var(--pat-silt)}
.L-p3{--bed:var(--limestone-lo);--ground:var(--ground-breccia);--sw:var(--limestone-lo) var(--pat-breccia)}
.L-p4{--bed:var(--limestone-hi);--ground:var(--ground-tee);--sw:var(--snow) var(--pat-tee)}
.L-p5{--bed:var(--limestone);--ground:var(--ground-chevron);--sw:var(--limestone) var(--pat-chevron)}
.L-p6{--bed:var(--limestone-lo);--ground:var(--ground-clay);--sw:var(--snow) var(--pat-clay)}
/* the field book's entries all lie in the where-we-cover layer (loess); their swatch is the road symbol */
.L-road4{--sym:var(--sym-road4)}
.L-merge{--sym:var(--sym-merge)}
.L-trumpet{--sym:var(--sym-trumpet)}
.L-towns{--sym:var(--sym-towns)}
.L-rest{--sym:var(--sym-rest)}
.L-closure{--sym:var(--sym-closure)}
.L-road4,.L-merge,.L-trumpet,.L-towns,.L-rest,.L-closure{--bed:var(--limestone);--ground:var(--ground-loess);--sw:var(--snow) var(--sym) center/72% auto no-repeat}
.entry.L-helper{--bed:var(--limestone);--ground:var(--ground-loess);--sym:var(--sym-helper)}
.bed.on-dark{color:var(--snow)}

/* ---------- reading text inside a bed ---------- */
.prose{max-width:64ch}
.prose>*+*{margin-top:1em}
.prose h3{font-size:var(--fs-dt);letter-spacing:.03em;line-height:1.05;margin-top:1.5em}
.prose h4{font-family:var(--display);font-weight:700;font-size:var(--fs-key);text-transform:uppercase;letter-spacing:.06em;line-height:1.1;margin-top:1.4em}
.prose h3+*,.prose h4+*{margin-top:.6em}
.prose strong{font-weight:700}
.prose a{font-weight:600}
.prose a[rel~="nofollow"]{font-family:var(--display);font-weight:600;font-size:.86em;text-transform:uppercase;letter-spacing:.06em;text-decoration-style:dotted;text-decoration-thickness:1.5px}
.tel{font-weight:700;white-space:nowrap;text-decoration-thickness:2px}
.prose ul{list-style:none;padding:0}
.prose ul>li{position:relative;padding:6px 0 6px 22px;border-top:1px dotted var(--rule)}
.prose ul>li:first-child{border-top:0}
.prose ul>li::before{content:"";position:absolute;left:2px;top:calc(6px + .58em);width:8px;height:8px;background:currentColor}
.on-dark .prose ul>li{border-top-color:var(--rule-light)}
/* numbered lists: the town sheet's numbered notes, a ruled snow list with reversed numerals */
.prose ol{list-style:none;padding:0;counter-reset:n;max-width:820px;background:var(--snow);border:2px solid var(--asphalt);color:var(--slate-ink)}
.prose ol>li{counter-increment:n;position:relative;min-height:calc(2rem + 28px);padding:13px 18px 14px calc(14px + 2rem + 16px);line-height:1.5}
.prose ol>li+li{border-top:1.5px solid var(--asphalt)}
.prose ol>li::before{content:counter(n);position:absolute;left:14px;top:13px;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:var(--asphalt);color:var(--snow);font-family:var(--display);font-weight:700;font-size:var(--fs-key);line-height:1}
.prose ol a{color:var(--asphalt)}
/* a list of page links: survey triangles, the whole row the link (the one bare list of places) */
.prose ul.marks{max-width:720px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));overflow:hidden;background:var(--snow);border:2px solid var(--asphalt);font-family:var(--display);font-weight:700;font-size:var(--fs-key);text-transform:uppercase;letter-spacing:.08em;line-height:1.1}
.prose ul.marks>li{padding:0;margin:-1.5px -1.5px 0 0;border-top:1.5px solid var(--rule-firm);border-right:1.5px solid var(--rule-firm)}
.prose ul.marks>li::before{content:none}
.prose ul.marks a{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 14px;color:var(--asphalt);text-decoration:none;font-weight:700}
.prose ul.marks a::before{content:"";flex:none;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid var(--asphalt)}
.prose ul.marks a:hover{background:var(--limestone-hi);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em}
.prose ul.marks a:focus-visible{outline-offset:-3px;box-shadow:inset 0 0 0 6px var(--snow)}

/* section beds: the survey sheet's heading in the margin, the matter beside it (from 1280px) */
.bed.sheet>h2{font-size:var(--fs-legend);width:fit-content;max-width:100%;padding:14px 20px 0 0;border-top:3px solid currentColor}
.bed.sheet>h2+.prose{margin-top:22px}

/* key takeaways: the survey's summary plate, a ruled snow sheet on a bare ground, one benchmark per line */
.L-sum{--bed:var(--limestone-hi);--ground:none;--sw:var(--snow) linear-gradient(180deg,transparent 0 30%,var(--asphalt) 30% calc(30% + 2px),transparent calc(30% + 2px) 62%,var(--asphalt) 62% calc(62% + 2px),transparent calc(62% + 2px))}
.bed.sum{padding-block:clamp(22px,3vw,36px)}
.sum-plate{max-width:820px;background:var(--snow);border:3px solid var(--asphalt);color:var(--slate-ink)}
.bed .sum-plate>h2{padding:10px 18px 8px;border-bottom:3px solid var(--asphalt);font-size:var(--fs-dt);letter-spacing:.06em;line-height:1.1;text-transform:uppercase}
.sum-body .takeaways{list-style:none;margin:0;padding:0}
.sum-body .takeaways>li{position:relative;padding:10px 18px 10px 44px;line-height:1.45;overflow-wrap:break-word}
.sum-body .takeaways>li+li{border-top:1.5px solid var(--rule-firm)}
.sum-body .takeaways>li::before{content:"";position:absolute;left:18px;top:calc(10px + .38em);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid var(--asphalt)}
.sum-body a{font-weight:600;color:var(--asphalt)}

/* the call layer: an ordered list there is the confirm-first sequence (swatch per step, the last ruled heavier) */
.L-call .prose ol{counter-reset:none;max-width:46rem}
.L-call .prose ol>li{counter-increment:none;padding:22px 18px 20px 62px;font-weight:600;font-size:var(--fs-what);line-height:1.4;color:var(--asphalt);min-height:72px}
.L-call .prose ol>li+li{border-top:1px solid var(--rule-firm)}
.L-call .prose ol>li::before{content:"";left:0;top:0;bottom:0;width:44px;height:auto;border-right:2px solid var(--asphalt);background:var(--limestone) var(--pat-limestone)}
.L-call .prose ol>li:first-child::before{background:var(--asphalt) linear-gradient(transparent 46%,var(--snow) 46% 54%,transparent 54%)}
.L-call .prose ol>li:nth-child(2):nth-last-child(n+3)::before{background:repeating-linear-gradient(90deg,var(--snow) 0 7px,transparent 7px 13px) 3px 50%/100% 4px no-repeat,var(--asphalt-2)}
.L-call .prose ol>li:last-child:not(:first-child){border-top:4px solid var(--asphalt);background:var(--limestone-hi)}
.L-call .prose ol>li:last-child:not(:first-child)::before{background:var(--ochre-ground) var(--pat-dolomite)}

/* service strata: the layer's face (full-strength lithology) beside the body, on the layer's own ground */
.stratum{--face-w:clamp(56px,7vw,104px);display:grid;grid-template-columns:var(--face-w) minmax(0,1fr);padding:0}
.stratum .face{background:var(--sw);border-right:2px solid var(--asphalt)}
.stratum .body{padding:var(--bed-y) var(--bed-x);min-width:0}
.stratum h2{font-size:var(--fs-legend)}
.stratum--desc h2+.prose{margin-top:18px}
.stratum--desc .prose{font-size:var(--fs-body)}
.stratum--desc .prose>p:first-child{font-size:var(--fs-what);line-height:1.5}
.strata>.stratum:first-child::before{content:none}
.stratum--price .body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px clamp(28px,4vw,64px);align-items:start}
.stratum--price .inc p{margin-top:16px;max-width:52ch;font-size:var(--fs-what);line-height:1.5}
.stratum--price .side{border-top:3px solid currentColor;padding-top:14px;max-width:52ch}
.stratum--price .reading{border:solid var(--asphalt);border-width:1.5px 0;background:var(--limestone)}
.stratum--price .reading>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 16px;padding:12px 14px}
.on-dark .price-note{color:var(--answer-text);border-top-color:var(--rule-light)}
.on-dark .checked{color:var(--road-text)}

/* ---------- the price card (hub and cost): one ruled row per service layer ---------- */
.prices h2{font-size:var(--fs-legend)}
.pcard{margin-top:24px;max-width:1180px;background:var(--snow);border:3px solid var(--asphalt)}
.pcard table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pcard thead th{padding:10px 16px;text-align:left;border-bottom:3px solid var(--asphalt);font-family:var(--display);font-weight:600;font-size:var(--fs-tag);text-transform:uppercase;letter-spacing:.12em;line-height:1.2;color:var(--slate)}
.pcard thead th:first-child{padding-left:60px}
.pcard tbody tr+tr>*{border-top:1.5px solid var(--asphalt)}
.pcard tbody th{position:relative;padding:8px 16px 8px 60px;text-align:left;font-family:var(--display);font-weight:700;font-size:var(--fs-step);text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.pcard tbody th::before{content:"";position:absolute;left:0;top:0;bottom:0;width:44px;border-right:2px solid var(--asphalt);background:var(--sw)}
.pcard tbody th a,.pcard tbody th span{display:inline-flex;align-items:center;min-height:44px;color:var(--asphalt)}
.pcard tbody th a{text-decoration:none}
.pcard tbody th a:hover{text-decoration:underline;text-decoration-thickness:2px}
.pcard td{padding:8px 16px;border-left:1.5px solid var(--asphalt);vertical-align:middle;font-size:var(--fs-ui);line-height:1.4;color:var(--slate-ink)}
.pcard td.rd{background:var(--limestone);font-family:var(--display);text-transform:uppercase;color:var(--asphalt);white-space:nowrap}
.pcard .rd .k{font-weight:600;font-size:var(--fs-tag);text-transform:uppercase;letter-spacing:.12em;color:var(--slate);margin-right:8px}
.pcard .rd b{font-weight:700;font-size:var(--fs-reading);letter-spacing:.06em}
.prices>.price-note{margin-top:16px}

/* ---------- questions ---------- */
.faq .list{margin-top:28px;max-width:900px;border-top:2px solid var(--snow)}
.faq details{border-bottom:1px solid var(--rule-light);background:var(--slate-ink)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:60px;padding:14px 16px;transition:background-color .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--display);font-weight:600;font-size:var(--fs-faq);text-transform:none;line-height:1.15;letter-spacing:.01em;text-wrap:pretty}
.faq summary .icon{transition:transform .3s var(--ease)}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq summary:hover{background:var(--veil-dark)}
.faq .ans{padding:0 16px 20px;max-width:60ch;color:var(--answer-text)}
.faq .ans>*+*{margin-top:.8em}
.faq .ans a{font-weight:700;color:var(--snow)}

/* ---------- the lead form, second to the call: ruled snow fields, the quiet send plate (never red) ---------- */
.send-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:24px clamp(28px,4vw,64px);align-items:start}
.send h2{font-size:var(--fs-legend);width:fit-content;max-width:100%;padding:14px 20px 0 0;border-top:3px solid currentColor}
.send-box{border-top:3px solid var(--asphalt);border-bottom:1.5px solid var(--rule-firm);background:var(--snow);padding:20px 16px 22px}
.send-form{display:grid;gap:16px}
.send-form__field{display:flex;flex-direction:column;gap:6px}
.send-form label{font-family:var(--display);font-weight:600;font-size:var(--fs-key);text-transform:uppercase;letter-spacing:.04em;line-height:1.2;color:var(--slate)}
.send-form input,.send-form select,.send-form textarea{width:100%;min-height:48px;padding:10px 12px;border:2px solid var(--asphalt);border-radius:0;background:var(--snow);color:var(--asphalt);font-family:var(--text);font-size:var(--fs-body);line-height:1.4}
.send-form select{-webkit-appearance:none;appearance:none;padding-right:44px;background:var(--select-caret) right 14px center/14px 9px no-repeat,var(--snow)}
.send-form textarea{resize:vertical;min-height:104px}
.send-form input:focus-visible,.send-form select:focus-visible,.send-form textarea:focus-visible{outline:3px solid var(--asphalt);outline-offset:3px;box-shadow:0 0 0 6px var(--snow)}
.send-form__note{font-size:var(--fs-small);line-height:1.45;color:var(--slate-ink)}
.send-form__submit{justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:2px solid var(--asphalt);border-radius:0;background:var(--asphalt);color:var(--snow);font-family:var(--display);font-weight:700;font-size:var(--fs-key);text-transform:uppercase;letter-spacing:.06em;line-height:1;cursor:pointer;transition:background-color .2s var(--ease)}
.send-form__submit:hover{background:var(--asphalt-2)}
.send-form__submit:active{transform:translateY(1px)}

/* ---------- nearby and related: sheets for places, layer rows for the rest ---------- */
.related h2{font-size:var(--fs-legend);width:fit-content;max-width:100%;padding:14px 20px 0 0;border-top:3px solid currentColor}
.related .rel{margin-top:24px;max-width:900px;display:grid;gap:20px}
.sheets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sheets a{position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:100px;padding:18px 54px 18px 20px;background:var(--snow);border:2px solid var(--asphalt);color:var(--asphalt);text-decoration:none}
.sheets a::before{content:"";position:absolute;inset:5px;border:1.5px solid var(--asphalt);pointer-events:none}
.sheets .pre{font-family:var(--display);font-weight:600;font-size:var(--fs-tag);text-transform:uppercase;letter-spacing:.12em;line-height:1.2;color:var(--slate)}
.sheets .tn{font-family:var(--display);font-weight:700;font-size:var(--fs-line);text-transform:uppercase;letter-spacing:.03em;line-height:1}
.sheets .icon{position:absolute;right:20px;top:50%;margin-top:-10px;width:20px;height:20px;transition:transform .25s var(--ease)}
.sheets a:hover{background:var(--limestone-hi)}
.sheets a:hover .tn{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.16em}
.sheets a:hover .icon,.layers a:hover .icon,.index a:hover .icon{transform:translateX(4px)}
.layers{list-style:none;margin:0;padding:0;border:2px solid var(--asphalt);background:var(--snow)}
.layers li+li{border-top:1px solid var(--rule-firm)}
.layers a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:stretch;min-height:60px;color:var(--asphalt);text-decoration:none}
.layers .sw{background:var(--sw);border-right:2px solid var(--asphalt)}
.layers .lk{align-self:center;padding:12px 16px;font-weight:600;font-size:var(--fs-what);line-height:1.35}
.layers .icon{align-self:center;margin-right:16px;width:20px;height:20px;transition:transform .25s var(--ease)}
.layers a:hover{background:var(--limestone-hi)}
.layers a:hover .lk{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em}
.layers a:focus-visible,.sheets a:focus-visible,.index a:focus-visible{outline-offset:-3px;box-shadow:inset 0 0 0 6px var(--snow)}

/* ---------- sources: the sheet's legend table ---------- */
.legend{max-width:1100px;background:var(--snow);border:3px solid var(--asphalt)}
.legend h2{padding:14px 20px;border-bottom:3px solid var(--asphalt);font-size:var(--fs-legend)}
.legend ul{margin:0;padding:0;list-style:none}
.legend li{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);border-top:1.5px solid var(--asphalt)}
.legend li:first-child{border-top:0}
.legend .dt{padding:12px 20px;border-right:1.5px solid var(--asphalt);font-family:var(--display);font-weight:700;font-size:var(--fs-key);text-transform:uppercase;letter-spacing:.04em;line-height:1.2;overflow-wrap:anywhere}
.legend .dt a{display:inline-flex;align-items:center;min-height:32px;color:var(--asphalt)}
.legend .dd{padding:12px 20px;font-size:var(--fs-small);color:var(--slate-ink);font-variant-numeric:tabular-nums}
.legend .checked{margin:0;padding:10px 20px;border-top:3px solid var(--asphalt)}

/* ---------- the field book (roads, stretch, segment, exit): one leaf per section ---------- */
.leaf{max-width:1120px;background:var(--snow);border:3px solid var(--asphalt)}
.entry+.entry{padding-top:clamp(14px,1.6vw,24px)}
.entry:has(+.entry){padding-bottom:clamp(14px,1.6vw,24px)}
.strata>.entry+.entry::before{content:none}
.rh{display:grid;grid-template-columns:clamp(56px,6vw,84px) minmax(0,1fr);border-bottom:3px solid var(--asphalt)}
.rh .sym{min-height:72px;border-right:1.5px solid var(--asphalt);background:var(--snow) var(--sym,var(--sym-road4)) center/66% auto no-repeat}
.rh h2{display:flex;flex-wrap:wrap;align-items:stretch;font-size:var(--fs-legend)}
.rh h2>span{display:flex;align-items:center;padding:14px 20px;min-width:0}
.rh .rt{font-size:var(--fs-h2);letter-spacing:.03em;flex-wrap:wrap;row-gap:8px}
.rh .rt b{white-space:nowrap;font-weight:700;background:var(--snow);border:2px solid var(--asphalt);padding:4px 12px 2px;line-height:1}
.rh .rt i{font-style:normal;margin:0 .35em;font-size:var(--fs-key)}
.rh .rt+.lbl{border-left:1.5px solid var(--asphalt)}
.rh .lbl{flex:1 1 14rem;color:var(--slate-ink)}
.notes{--pad-t:22px;--margin-x:clamp(14px,1.6vw,22px);position:relative;padding:var(--pad-t) clamp(18px,2.4vw,32px) 26px clamp(34px,3.6vw,52px)}
/* the field book's margin: a double rule; plain-paragraph leaves are ruled on the text's 1.6em line grid */
.notes::before{content:"";position:absolute;top:0;bottom:0;left:var(--margin-x);width:5px;border:solid var(--rule);border-width:0 1px;pointer-events:none;z-index:1}
.notes.ruled::after{content:"";position:absolute;top:var(--pad-t);bottom:0;left:calc(var(--margin-x) + 5px);right:0;background:repeating-linear-gradient(180deg,transparent 0 calc(1.6em - 1px),var(--leaf-rule) calc(1.6em - 1px) 1.6em);pointer-events:none;z-index:0}
.notes .prose{position:relative;z-index:1;max-width:62ch;color:var(--slate-ink)}
.notes.ruled .prose>*+*{margin-top:1.6em}
.notes .prose strong{color:var(--asphalt)}

/* ---------- legal: numbered clauses on plain limestone, straight contacts ---------- */
.clause{display:grid;grid-template-columns:2.75rem minmax(0,60ch);justify-content:center;column-gap:clamp(18px,2.4vw,32px);align-items:start;padding-block:clamp(32px,3.6vw,52px);background:var(--limestone)}
.strata>.clause+.clause::before{top:-1px;height:2px;background:var(--asphalt)}
.clause .no{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-top:-.25rem;background:var(--snow);border:2px solid var(--asphalt);font-family:var(--display);font-weight:700;font-size:var(--fs-route);line-height:1}
.clause h2{font-size:var(--fs-legend);line-height:1}
.clause h2+.prose{margin-top:14px}
.clause .prose a{font-weight:600}
.t-privacy .strata,.t-terms .strata{border-bottom:2px solid var(--asphalt)}

/* ---------- pages index (404, thank-you): the book's index leaf ---------- */
.pages .leaf .key{padding:12px 20px;border-bottom:3px solid var(--asphalt);font-size:var(--fs-legend)}
.index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}
.index li{border-top:1.5px solid var(--rule-firm);border-right:1.5px solid var(--rule-firm);margin:-1.5px -1.5px 0 0}
.index a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:8px 18px;font-family:var(--display);font-weight:700;font-size:var(--fs-key);text-transform:uppercase;letter-spacing:.06em;line-height:1.1;color:var(--asphalt);text-decoration:none}
.index a .icon{width:18px;height:18px;transition:transform .25s var(--ease)}
.index a:hover{background:var(--limestone-hi)}

/* ---------- the lower road: the closing call banner ---------- */
.lower-road{position:relative;background:var(--asphalt);color:var(--snow);padding:clamp(44px,5vw,72px) var(--bed-x) 0;border-top:3px solid var(--slate)}
.lower-road::after{content:"";position:absolute;inset:0;background:var(--asphalt-grain);pointer-events:none}
.lower-road h2{position:relative;z-index:1;font-size:var(--fs-banner);max-width:18ch}
.lower-road p{position:relative;z-index:1;margin-top:18px;max-width:52ch;color:var(--road-text)}
.lower-road .lane{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;margin:40px calc(-1 * var(--bed-x)) 0;padding:0 var(--bed-x) 24px;border-top:5px solid var(--snow);background:var(--asphalt-2)}
.lower-road .lane::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--dash);pointer-events:none}
.lower-road .lane .call{margin-top:-30px}

/* ---------- footer: the survey sheet's title block ---------- */
.sheet-foot{background:var(--limestone);padding:28px var(--gutter)}
.title-block{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;background:var(--snow);border:3px solid var(--asphalt)}
.title-block>*{padding:16px 20px;min-width:0}
.title-block .tb-logo{display:flex;align-items:center;border-right:1.5px solid var(--asphalt)}
.title-block .tb-area{display:flex;flex-direction:column;justify-content:center;gap:6px;border-right:1.5px solid var(--asphalt);color:var(--slate-ink);font-size:var(--fs-small)}
.title-block .tb-call{display:flex;align-items:center}
.title-block .tb-call .call{justify-content:center}
.title-block .tb-copy{grid-column:1/-1;border-top:1.5px solid var(--asphalt);padding-block:12px}
.title-block small{color:var(--slate);font-size:var(--fs-small)}
.tb-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 10px}
.tb-nav a{display:flex;align-items:center;min-height:44px;padding:0 8px 0 0;font-family:var(--display);font-weight:600;font-size:var(--fs-key);text-transform:uppercase;letter-spacing:.06em;color:var(--slate);text-decoration:none}
.tb-nav a:hover,.tb-nav a[aria-current="page"]{color:var(--asphalt);text-decoration:underline;text-decoration-thickness:2px}
/* the title block's service index: a full-width row of ruled cells, each a survey benchmark and its page */
.title-block .tb-svc{grid-column:1/-1;border-top:1.5px solid var(--asphalt);padding-block:12px 16px}
.tb-svc__h{margin:0 0 8px;font-family:var(--display);font-weight:600;font-size:var(--fs-tag);text-transform:uppercase;letter-spacing:.12em;line-height:1.2;color:var(--slate)}
.tb-svc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));overflow:hidden;border:1.5px solid var(--asphalt)}
.tb-svc li{margin:-1.5px -1.5px 0 0;border-top:1.5px solid var(--rule-firm);border-right:1.5px solid var(--rule-firm)}
.tb-svc a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px;font-family:var(--display);font-weight:700;font-size:var(--fs-key);text-transform:uppercase;letter-spacing:.06em;line-height:1.1;color:var(--asphalt);text-decoration:none}
.tb-svc a::before{content:"";flex:none;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--asphalt)}
.tb-svc a:hover,.tb-svc a[aria-current="page"]{background:var(--limestone-hi);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.tb-svc a:focus-visible{outline-offset:-3px;box-shadow:inset 0 0 0 6px var(--snow)}

/* ---------- the call bar: the bottom bar on phones, the stuck shoulder strip on desktop.
   With JS it shows only while no other red call is on screen; without JS it stays on phones. ---------- */
.callbar{display:none}
.callbar .call:focus-visible{outline:3px solid var(--snow);outline-offset:3px;box-shadow:0 0 0 6px var(--asphalt)}
@media (min-width:1024px){
  .js .callbar{display:flex;position:fixed;left:0;right:0;top:0;z-index:40;align-items:center;gap:22px;min-height:var(--strip-h);padding:4px max(var(--gutter),calc((100% - 1600px) / 2 + var(--gutter)));background:var(--asphalt-2);color:var(--snow);border-top:3px solid var(--snow);box-shadow:0 6px 14px -6px var(--shade);transform:translateY(-110%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s}
  .js.bar-on .callbar{transform:none;visibility:visible;transition:transform .3s var(--ease),visibility 0s linear 0s}
  .callbar .cb-line{font-weight:600;max-width:62ch;line-height:1.4}
}

/* ---------- responsive ---------- */
@media (max-width:1279px){
  .send-in{grid-template-columns:minmax(0,1fr)}
  .send-box{max-width:560px}
  .stratum--price .body{grid-template-columns:minmax(0,1fr)}
  .index{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1280px){
  .bed.sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:20px clamp(28px,4vw,64px);align-items:start}
  .bed.sheet>h2{width:auto;padding-right:0}
  .bed.sheet>h2+.prose{margin-top:0}
  .bed.sheet.no-h{display:block}
  .stratum--desc .body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px clamp(28px,4vw,64px);align-items:start}
  .stratum--desc h2+.prose{margin-top:0}
}
@media (max-width:1023px){
  :root{--strip-h:0px}
  /* header: the logo and the quiet call share the first row, the nav runs below */
  .sheet-head .in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo call" "nav nav"}
  .nav ul{justify-content:flex-start}
  html{scroll-padding-top:64px;scroll-padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px)}
  body{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
  /* the photo follows the call on phones and tablets */
  .band--road>.in{min-height:0}
  .has-window .band--road .text{max-width:none}
  .has-window .band--plate .title-plate{max-width:100%}
  .window{grid-row:auto;justify-self:stretch;width:auto}
  .window img{position:static;aspect-ratio:16/9;height:auto;-webkit-mask-image:none;mask-image:none}
  .window figcaption{right:16px;top:auto;bottom:12px}
  .band--route>.in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"h h" "a b";row-gap:20px}
  .band--route .title{padding:0 0 4px}
  .roadline .run{left:calc(var(--gutter) + (100% - 2 * var(--gutter)) * .25);right:calc(var(--gutter) + (100% - 2 * var(--gutter)) * .5 - clamp(20px,3vw,40px))}
  .station-b{--pad-b:clamp(20px,3vw,40px);padding-left:var(--pad-b)}
  /* the sheet stacks name, lede (it carries the tap-to-call number), then the photo plate */
  .quad{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"name" "lead" "plate"}
  .quad h1 .tn{max-width:none}
  .quad .plate{border-left:0;border-top:2px solid var(--asphalt)}
  .quad .map{display:none}
  .band--head .ph-grid{grid-template-columns:minmax(0,1fr)}
  .cut{grid-template-columns:minmax(0,1fr)}
  .strata{border-left:0}
  /* the column becomes a sticky strip at the top: 48px rows, 18px swatches, edge fades when rows lie off-screen */
  .column{position:sticky;top:0;z-index:15;max-height:none;overflow:visible;padding:0;background:var(--snow);border-bottom:2px solid var(--asphalt);box-shadow:0 6px 12px -8px var(--shade)}
  .column ol{display:flex;overflow-x:auto;border-left:0;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:36px}
  .column ol::before{display:none}
  .column ol::-webkit-scrollbar{display:none}
  .column::before,.column::after{content:"";position:absolute;top:0;bottom:0;width:36px;z-index:1;pointer-events:none;opacity:0;transition:opacity .2s var(--ease)}
  .column::before{left:0;background:linear-gradient(270deg,transparent,var(--snow) 85%)}
  .column::after{right:0;background:linear-gradient(90deg,transparent,var(--snow) 85%)}
  .column.has-less::before,.column.has-more::after{opacity:1}
  .column li{flex:none;scroll-snap-align:start}
  .column a{position:relative;grid-template-columns:18px auto;min-height:48px}
  .column a .sw{border-right:1.5px solid var(--asphalt);border-bottom:0}
  .column .sw.no{font-size:var(--fs-tag)}
  .column--index a{grid-template-columns:28px auto}
  .column a .lb,.column li.svc .lb,.column--index .lb{font-size:var(--fs-small);padding:0 12px 0 8px;border-bottom:0;border-right:1px solid var(--rule-soft);white-space:nowrap;letter-spacing:.06em}
  .column a .lb::after{display:none}
  .column a:focus-visible{outline:3px solid var(--asphalt);outline-offset:-3px;box-shadow:none}
  .column a:focus-visible::after{content:"";position:absolute;inset:3px;border:2px solid var(--snow);pointer-events:none}
  .stratum{--face-w:clamp(32px,8vw,64px)}
  .title-block{grid-template-columns:minmax(0,1fr)}
  .title-block .tb-logo,.title-block .tb-area{border-right:0;border-bottom:1.5px solid var(--asphalt)}
  .title-block .tb-copy{grid-column:auto}
  /* the phone call bar */
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:8px;min-height:var(--bar-h);padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--asphalt);border-top:3px solid var(--snow);container:callbar/inline-size;transition:transform .3s var(--ease),visibility 0s linear 0s}
  .callbar .call{flex:1 1 auto;width:auto;min-width:0;justify-content:center;min-height:60px;padding-block:6px;clip-path:none;font-size:min(1.5rem,30px)}
  .callbar .call .cw{flex-wrap:nowrap}
  .callbar .cb-line{display:none}
  .js .callbar{transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s}
  .js.bar-on .callbar{transform:none;visibility:visible;transition:transform .3s var(--ease),visibility 0s linear 0s}
}
@media (max-width:1023px) and (pointer:fine){
  .column ol{scrollbar-width:thin;scrollbar-color:var(--slate) var(--limestone-hi)}
  .column ol::-webkit-scrollbar{display:block;height:6px}
  .column ol::-webkit-scrollbar-track{background:var(--limestone-hi)}
  .column ol::-webkit-scrollbar-thumb{background:var(--slate)}
}
/* a narrow bar (phones, large text): the label drops visually, the number stays */
@container callbar (max-width:29rem){
  .callbar .call{font-size:min(1.25rem,30px);padding-inline:12px;gap:10px}
  .callbar .call .t{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .callbar .call .num{border-left:0}
}
@media (min-width:761px) and (max-width:1023px){
  .nav a{padding:0 8px;letter-spacing:.04em}
}
@media (max-width:760px){
  :root{--fs-call:1.25rem;--fs-call-lg:1.25rem;--fs-route:1.25rem;--fs-lede:1rem;--fs-h1:clamp(2.375rem,10.5vw,2.75rem)}
  .sheet-head .in{gap:4px 12px;padding:6px 16px 4px}
  .logo{min-height:44px;padding:4px 8px;min-width:0}
  .wm{gap:8px}
  .wm-mark{width:24px;height:24px}
  .wm-name{font-size:1.1875rem;overflow-wrap:break-word}
  .logo-crop{--lw:184px}
  .head-call .call{padding:6px 12px;gap:8px;font-size:var(--fs-ui);clip-path:none}
  .head-call .call .t{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .head-call .call .num{border-left:0}
  .nav ul{gap:0 4px}
  .nav a{min-height:40px;padding:0 6px;font-size:var(--fs-small);letter-spacing:.03em}
  .crumbs ol{margin-bottom:10px;font-size:var(--fs-small)}
  .crumbs li,.crumbs a{min-height:36px}
  .shoulder .in{grid-template-columns:minmax(0,1fr);gap:10px;padding-bottom:16px}
  .shoulder .call{margin-top:-28px;width:100%;justify-content:center;min-height:64px;clip-path:none}
  .shoulder .say{padding-top:0}
  .brief .in{padding-bottom:18px;gap:10px}
  .reading--brief{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .reading--brief>div{padding:8px 12px 9px}
  .reading--brief>div:nth-child(odd){border-left:0}
  .reading--brief>div:nth-child(n+3){border-top:1px dotted var(--rule-firm)}
  .reading--brief dd{white-space:normal}
  .band--route>.in{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "a" "b";row-gap:0;padding-top:20px}
  .band--route .title{padding:0 0 18px}
  .station-a .plate{font-size:var(--fs-key);padding:8px 12px 7px}
  /* the stations stack: the road turns down between them, one chevron gives the direction */
  .station-b::before{content:"";display:block;width:44px;height:52px;margin-left:22px;background:var(--asphalt-2) repeating-linear-gradient(180deg,var(--snow) 0 10px,transparent 10px 18px) 50% 0/2px 100% no-repeat;border:solid var(--snow);border-width:0 2px}
  .station-b::after{content:"";position:absolute;top:34px;left:calc(var(--pad-b) + 38.5px);width:11px;height:11px;border:solid var(--snow);border-width:0 3px 3px 0;transform:rotate(45deg)}
  .to-car .station-b::after{top:10px;transform:rotate(225deg)}
  .station-b .plate{padding:12px 14px 14px}
  .roadline{height:22px}
  .roadline .run{display:none}
  .quad h1{padding:16px 14px}
  .quad h1 .pre{font-size:var(--fs-route)}
  .quad .lede{margin:0 14px;padding:16px 0 20px}
  .quad .plate .ph::before{padding-top:30%}
  .title-plate{grid-template-columns:minmax(0,1fr);width:100%}
  .title-plate .tp,.title-plate .field{padding:12px 16px}
  .title-plate .field{border-left:0;border-top:1.5px solid var(--asphalt)}
  .signs{gap:8px;margin-bottom:14px}
  .column a{min-height:44px}
  .sheets{grid-template-columns:minmax(0,1fr);gap:10px}
  .sheets a{min-height:76px;padding:14px 48px 14px 18px}
  .layers .lk{padding:10px 12px}
  .layers .icon{margin-right:12px}
  .legend li{grid-template-columns:minmax(0,1fr)}
  .legend .dt{border-right:0;padding-bottom:2px}
  .legend .dd{padding-top:0}
  .legend h2,.legend .dt,.legend .dd,.legend .checked{padding-left:14px;padding-right:14px}
  .pcard thead th:first-child{padding-left:30px}
  .pcard tbody th{padding:8px 10px 8px 30px;font-size:var(--fs-key)}
  .pcard tbody th::before{width:18px;border-right-width:1.5px}
  .pcard td{padding:8px 10px}
  .pcard .rd .k{display:block;margin:0 0 2px}
  .pcard td.rd{white-space:normal}
  .pcard .rd b{font-size:var(--fs-route)}
  /* a wide card (extra columns) stacks each service into ruled rows with the column names as keys */
  .pcard--wide thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pcard--wide table,.pcard--wide tbody,.pcard--wide tr,.pcard--wide th,.pcard--wide td{display:block}
  .pcard--wide tbody tr+tr{border-top:1.5px solid var(--asphalt)}
  .pcard--wide tbody tr+tr>*{border-top:0}
  .pcard--wide td{border-left:0;padding-left:30px}
  .pcard--wide td::before{content:attr(data-label);display:block;font-family:var(--display);font-weight:600;font-size:var(--fs-tag);text-transform:uppercase;letter-spacing:.12em;color:var(--slate)}
  .pcard--wide td.rd::before{content:none}
  .rh .sym{min-height:60px}
  .rh h2>span{padding:12px 14px}
  .rh .rt b{padding:4px 8px 2px}
  .rh .rt+.lbl{border-left:0;border-top:1.5px solid var(--asphalt);flex-basis:100%}
  .notes{--pad-t:18px;--margin-x:12px;padding:18px 16px 22px 30px}
  .clause{grid-template-columns:2.25rem minmax(0,1fr);justify-content:stretch;column-gap:14px}
  .clause .no{width:2.25rem;height:2.25rem;margin-top:-.125rem;font-size:var(--fs-key)}
  .index{grid-template-columns:minmax(0,1fr)}
  .index li{border-right:0;margin-right:0}
  .lower-road .lane{flex-direction:column;align-items:stretch;gap:12px}
  .lower-road .lane .call,.title-block .tb-call .call{width:100%;justify-content:center;clip-path:none}
  .sheet-foot{padding:20px 12px}
  .prose ol>li{padding:12px 12px 13px calc(10px + 1.75rem + 12px)}
  .prose ol>li::before{left:10px;top:12px;width:1.75rem;height:1.75rem}
  .L-call .prose ol>li{padding:12px 12px 12px 56px}
}
@media (max-width:420px){
  .logo-crop{--lw:140px}
}
@media (max-width:400px){
  .call{padding-left:14px;padding-right:14px;gap:10px}
}

@media print{
  .callbar,.column,.skip{display:none!important}
  .cut{grid-template-columns:minmax(0,1fr)}
  .strata{border-left:0}
}

/* ---------- reduced motion and forced colors ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .callbar,.js.bar-on .callbar{transform:none!important;transition-property:opacity,visibility!important;transition-duration:.2s,0s!important}
  .js .callbar{opacity:0}
  .js.bar-on .callbar{opacity:1}
}
@media (forced-colors:active){
  .call{border:2px solid ButtonText}
  .column a[aria-current="location"] .lb{outline:3px solid Highlight;outline-offset:-3px}
  .column a .sw,.column a .lb::after,.stratum .face,.pcard tbody th::before,.layers .sw,.rh .sym,.L-call .prose ol>li::before{forced-color-adjust:none}
  .column a[aria-current="location"] .lb::after{border-left-color:Highlight}
  .nav a{border-bottom-color:Canvas}
  .nav a[aria-current="page"]{border-bottom-color:Highlight}
  .quad,.title-plate{outline-color:CanvasText}
  .roadline .run{background:CanvasText}
  .roadline .run .icon{color:CanvasText}
  .station .plate,.rplate,.xplate .v,.rh .rt b{border-color:CanvasText}
  .send-form input,.send-form select,.send-form textarea,.send-form__submit{border-color:ButtonText}
  .send-form__submit{background:ButtonFace;color:ButtonText}
}

/* Sources fold (2026-11-08): closed by default, opens on tap */
.src-fold>summary{display:list-item;list-style:disclosure-closed inside;cursor:pointer;font-weight:700}
.src-fold[open]>summary{list-style-type:disclosure-open;margin-bottom:.5em}
.src-fold>summary::-webkit-details-marker{display:revert}