/* MediaJack Systems: site styles. The sign system.
   Customers follow signs, so the site is built from the American road-sign system: highway-green guide signs,
   white regulatory plates, hi-vis panels, asphalt and aluminium posts. One family, Overpass (drawn from Highway
   Gothic). Green is a surface, hi-vis means "do this", and everything between the signs is quiet. */

@font-face {
  font-family: "Overpass";
  src: url("/assets/fonts/overpass-var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
/* Stand-ins with Overpass's measurements, so nothing moves when the real font arrives. */
@font-face {
  font-family: "Overpass Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Roboto");
  font-weight: 400 600;
  size-adjust: 101.2%; ascent-override: 87.3%; descent-override: 37.9%; line-gap-override: 0%;
}
@font-face {
  font-family: "Overpass Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Neue Bold"), local("Roboto Bold");
  font-weight: 700 900;
  size-adjust: 100%; ascent-override: 88.3%; descent-override: 38.3%; line-gap-override: 0%;
}

:root {
  --guide: #00674a;        /* highway green: sign plates (white on it is 6.9:1) */
  --guide-deep: #00503a;   /* green, hovered and pressed */
  --hivis: #d6ee00;        /* fluorescent yellow-green: the action. Always with black text (16:1) */
  --ink: #000000;          /* sign paint: text, legends, plate borders */
  --asphalt: #1c1d1f;      /* the road, the night section, the footer */
  --paper: #ffffff;
  --overcast: #eceeed;     /* the sky and alternate sections */
  --aluminum: #b9bfc1;     /* posts and hairlines, never text */
  --ink-muted: #33383a;    /* secondary text on light grounds (10:1 on overcast) */
  --work: #f58220;         /* construction orange: the work-zone sign only */
  --stop: #b3202b;         /* errors, always with words */
  --lane: #f4f4f2;         /* road paint */
  --post: linear-gradient(90deg, #9aa1a4, #d5d9da 45%, #a5abae);

  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(3.5rem, 9vw, 6.5rem);
  --line: 2.5px;           /* the black line on plates and inputs */
}
@media (color-gamut: p3) { :root { --hivis: color(display-p3 .85 .94 .08); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.55 "Overpass", "Overpass Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-kerning: normal;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p + p { margin-top: 1em; }
p, li, dd { text-wrap: pretty; }                                 /* no single word left hanging on a last line */
strong, b { font-weight: 800; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover, a:not([class]):focus-visible { background: var(--hivis); color: #000; }
a[href^="tel:"] { white-space: nowrap; }                        /* a phone number never breaks across two lines */
:focus-visible { outline: 3px solid #000; outline-offset: 3px; border-radius: 2px; }
.sign :focus-visible, .board :focus-visible, .night :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

h1, h2, h3 { font-weight: 800; line-height: 1.08; text-wrap: balance; }
h2 { font-weight: 900; font-size: clamp(2.1rem, 7vw, 4rem); line-height: 1; letter-spacing: -.012em; }
h3 { font-size: 1.3rem; line-height: 1.15; }
.lede { font-size: clamp(1.15rem, 2.2vw, 1.3rem); line-height: 1.45; max-width: 32em; }
.nb { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; }
.arrow { fill: currentColor; flex: none; }

.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 50; background: #000; color: #fff; padding: .75rem 1rem; font-weight: 800; border-radius: 8px; }
.skip-link:focus { top: .6rem; outline-color: var(--hivis); }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------------------------------------------------------------- plates: the buttons */
.plate {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .62em 1.15em .5em; border: 0; border-radius: 8px;
  background: #fff; color: #000; box-shadow: inset 0 0 0 var(--line) #000;
  font: inherit; font-weight: 800; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer;
}
.plate:hover { background: var(--hivis); color: #000; }
.plate--hivis { background: var(--hivis); }
.plate--hivis:hover { background: #000; color: var(--hivis); }
.plate--ink { background: #000; color: #fff; box-shadow: none; }
.plate--ink:hover { background: #fff; color: #000; box-shadow: inset 0 0 0 var(--line) #000; }
.plate:active { transform: translateY(1px); }
.plate--post { min-height: 3.5rem; border-radius: 10px; font-size: 1.15rem; box-shadow: inset 0 0 0 3px #000, 0 0 0 4px #fff; }
.plate--post:hover { box-shadow: inset 0 0 0 3px #000, 0 0 0 4px #fff; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--aluminum); }
.site-header .wrap { display: flex; align-items: center; gap: .6rem; min-height: 4rem; }
.brand { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; margin-right: auto; color: #000; text-decoration: none; }
a.brand:hover { background: none; }
.brand svg { width: 44px; height: 44px; flex: none; }
.brand__name { font-weight: 800; font-size: 1.2rem; line-height: 1; letter-spacing: .005em; padding-top: .12em; }
.brand__name span { display: block; margin-top: .22em; font-size: .74em; font-weight: 500; letter-spacing: .02em; }
.mark-ground { fill: var(--hivis); }
.site-header .plate { min-height: 2.75rem; padding-inline: .95em; }
.nav-toggle { min-width: 4.6rem; }
.site-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; background: #fff; border-bottom: var(--line) solid #000; }
.site-nav.open { display: block; }
.site-nav ul { list-style: none; margin: 0 auto; padding: .25rem 0 .75rem; width: min(100% - 2 * var(--gutter), var(--max)); }
.site-nav li + li { border-top: 1px solid var(--aluminum); }
.site-nav a { display: block; padding: .95rem 0 .8rem; font-size: 1.5rem; font-weight: 800; line-height: 1.1; text-decoration: none; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .22em; }
.header-phone { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .62em .95em .5em; border-radius: 8px; background: var(--hivis); box-shadow: inset 0 0 0 var(--line) #000; font-weight: 800; line-height: 1.15; text-decoration: none; }
.header-phone:hover { background: #000; color: var(--hivis); }
.header-phone:active { transform: translateY(1px); }
.header-phone__num, .header-cta { display: none; }
/* One hi-vis thing on the first screen. On the home page that is the band at the foot of the sign, so the header's
   hi-vis plate (Call on phones, Free check-up on wide screens) starts as a quiet white plate and turns hi-vis once the
   reader has scrolled about a screen. CSS only; where scroll timelines are missing, or motion is not wanted, it is
   hi-vis all the time. Hover drops the animation, so the plate still answers the pointer. */
@keyframes wake { from { background-color: #fff; } to { background-color: var(--hivis); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body:has(.sign--hero) .header-cta { animation: wake step-end both; animation-timeline: scroll(root block); animation-range: 0 85vh; }
    body:has(.sign--hero) .header-cta:hover { animation: none; }
    @media (max-width: 939px) {
      body:has(.sign--hero) .header-phone { animation: wake step-end both; animation-timeline: scroll(root block); animation-range: 0 85vh; }
      body:has(.sign--hero) .header-phone:hover { animation: none; }
    }
  }
}
@media (max-width: 359px) {
  .brand svg { width: 38px; height: 38px; }
  .brand__name { font-size: 1.05rem; }
  .site-header .wrap { gap: .4rem; }
  .site-header .plate, .header-phone { padding-inline: .7em; }
  .nav-toggle { min-width: 0; }
}
@media (max-width: 939px) and (scripting: none) {                 /* no JavaScript: the menu is simply there */
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle { display: none; }
  .site-nav { display: block; position: static; order: 5; flex-basis: 100%; border-bottom: 0; }
  .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.4rem; width: auto; padding: 0 0 .5rem; }
  .site-nav li + li { border-top: 0; }
  .site-nav a { padding: .7rem 0 .55rem; font-size: 1.125rem; }
}
@media (min-width: 940px) {
  .site-header .wrap { gap: 1.5rem; min-height: 4.75rem; }
  .brand svg { width: 48px; height: 48px; }
  .nav-toggle { display: none; }
  .site-nav { position: static; display: block; border: 0; background: none; }
  .site-nav ul { display: flex; gap: 1.6rem; width: auto; margin: 0; padding: 0; }
  .site-nav li + li { border-top: 0; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .25em .1em 0; font-size: 1.0625rem; font-weight: 600; }
  .header-phone { padding: .25em .1em 0; background: none; box-shadow: none; border-radius: 0; font-weight: 700; }
  .header-phone:hover { background: var(--hivis); color: #000; }
  .header-phone:active { transform: none; }
  .header-phone__verb { display: none; }
  .header-phone__num { display: inline; }
  .header-cta { display: inline-flex; }
}

/* ---------------------------------------------------------------- the guide sign */
/* Green plate, one thin white line set in from the edge. --inset is where the line sits, --frame its width, --r its
   radius and --gap the green between the line and the hi-vis band at the foot of a sign. */
.sign { --inset: 6px; --frame: 2px; --r: 12px; --gap: 4px; position: relative; isolation: isolate; background: var(--guide); color: #fff; border-radius: 18px; }
.sign::before { content: ""; position: absolute; inset: var(--inset); z-index: 1; border: var(--frame) solid #fff; border-radius: var(--r); pointer-events: none; }
.sign a:not(.panel) { text-decoration-thickness: 2px; }
.sign h1, .sign h2 { font-weight: 800; letter-spacing: 0; }
.sign__line { font-weight: 600; font-size: clamp(1.1rem, 2.1vw, 1.4rem); line-height: 1.36; max-width: 33em; text-wrap: balance; }
.sign__arrow { display: none; }
/* the exit tab: on a sign that stands on a ground it sits on the top edge */
.sign__tab {
  position: absolute; right: 22px; bottom: calc(100% - 1px); margin: 0; padding: 14px 16px 10px;
  background: var(--guide); border-radius: 11px 11px 3px 3px;
  font-weight: 700; font-size: .9375rem; line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
.sign__tab::before { content: ""; position: absolute; inset: 5px; border: 2px solid #fff; border-radius: 6px 6px 1px 1px; }
/* the hi-vis band at the foot of a sign, inside the line: what to do next, like the yellow EXIT ONLY panel.
   One band, one or two links; a thin black rule divides two. */
.sign__face { padding: 30px 26px 0; }
.sign__exits {
  --off: calc(var(--inset) + var(--frame) + var(--gap));
  position: relative; z-index: 2; display: grid; margin: 22px var(--off) var(--off);
  background: var(--hivis); color: #000; border-radius: calc(var(--r) - var(--frame) - var(--gap));
}
.panel {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 15px 18px 11px 20px; border-radius: inherit; color: #000;
  font-weight: 800; font-size: clamp(1.2rem, 5.2vw, 1.4rem); line-height: 1.08; text-decoration: none;
}
.panel + .panel { border-radius: 0; }
.panel + .panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: #000; }   /* the thin black rule between two */
.panel:hover { background: none; }
.panel:hover > span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .16em; }
.panel:active > * { transform: translateY(1px); }
.sign .panel:focus-visible { outline: 3px solid #000; outline-offset: -7px; border-radius: 9px; }
.panel .arrow { width: 30px; height: 30px; transform: rotate(135deg); margin-top: -3px; }
.panel:active .arrow { transform: translateY(1px) rotate(135deg); }
@media (max-width: 359px) { .sign__face { padding-inline: 21px; } }
@media (min-width: 700px) {
  .sign { --inset: 7px; --frame: 3px; --r: 15px; --gap: 5px; border-radius: 22px; }
  .sign__tab { right: 30px; padding: 15px 18px 11px; font-size: 1rem; }
  .sign__face { padding: 46px 52px 0; }
  .sign__exits { grid-template-columns: minmax(0, 1fr) auto; margin-top: 28px; }
  .panel { min-height: 72px; padding: 20px 26px 16px 30px; font-size: clamp(1.3rem, 2.7vw, 1.75rem); }
  .panel + .panel { padding-inline: clamp(26px, 3.4vw, 44px); }
  .panel + .panel::before { inset: 0 auto 0 0; width: 2px; height: auto; }
  .panel .arrow { width: 38px; height: 38px; }
}

/* the sign as the screen: full-bleed green under the header, framed by the one thin white line. The home page's
   first screen and every inner page's head. Its tab becomes a small outlined plaque inside the line. */
.sign--bleed { --inset: 10px; --r: 16px; --gutter: 28px; --col: var(--gutter); border-radius: 0; }
.sign--bleed .sign__tab { position: static; justify-self: start; align-self: start; width: max-content; padding: 9px 12px 6px; background: none; border: 2px solid #fff; border-radius: 8px; }
.sign--bleed .sign__tab::before { content: none; }
.sign--bleed .panel { padding-inline: calc(var(--col) - var(--off)); }      /* the band's words stand on the page's column */
@media (max-width: 359px) { .sign--bleed { --gutter: 24px; } }
@media (min-width: 700px) {
  .sign--bleed { --inset: 16px; --r: 24px; --gap: 6px; --gutter: 40px; --col: max(var(--gutter), (100vw - var(--max)) / 2); }
  .sign--bleed .sign__tab { padding: 10px 14px 7px; }
  /* from tablet width the home page's plaque sits in the frame's top right corner, as far from the line as on a phone;
     inner pages follow once there is room beside the heading */
  .sign--hero .sign__tab { position: absolute; z-index: 2; top: calc(var(--inset) + var(--frame) + 16px); right: calc(var(--inset) + var(--frame) + 16px); }
  .sign--bleed .panel:first-child:not(:last-child) { padding-right: 30px; }
  .sign--bleed .panel + .panel { padding-left: clamp(26px, 3.4vw, 44px); }
}
@supports (width: 1cqw) {                                         /* measured from the sign, not the window, so a scrollbar changes nothing */
  .sign--bleed { container-type: inline-size; }
  @media (min-width: 700px) { .sign--bleed > * { --col: max(var(--gutter), (100cqw - var(--max)) / 2); } }
}

/* headlights: signs are retroreflective, so they shine back at the light that finds them */
.shine { position: absolute; inset: 0; z-index: 3; border-radius: inherit; overflow: hidden; pointer-events: none; }
.shine::before { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .28) 50%, transparent 58%); transform: translateX(-72%); }
@keyframes sweep { from { transform: translateX(-72%); } to { transform: translateX(72%); } }
@media (prefers-reduced-motion: no-preference) {
  .sign--hero .shine::before { animation: sweep 1.5s .45s cubic-bezier(.3, .1, .2, 1) both; will-change: transform; }
  .sign.is-lit .shine::before { animation: sweep 1.5s .15s cubic-bezier(.3, .1, .2, 1) both; }
  .plate, .panel > *, .blade, .header-phone { transition: transform .08s; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .shine::after { content: ""; position: absolute; inset: 0; background: radial-gradient(340px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, .2), transparent 70%); }
}

/* posts: only the 404 sign still stands on them, off the route */
.stand { position: relative; }
.posts { position: absolute; inset: 40px 0 0; pointer-events: none; }
.posts::before, .posts::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14px; background: var(--post); }
.posts::before { left: 15%; }
.posts::after { right: 15%; }
.stand > .sign, .stand > .plate { z-index: 1; }
.stand > .plate { position: relative; }
@media (min-width: 1000px) { .posts::before { left: 17%; } .posts::after { right: 17%; } }

/* ---------------------------------------------------------------- the first screen: the screen is the sign */
/* The green fills the screen under the header, edge to edge. Its two destinations are as large as the page's column
   allows (Overpass 800 "Marketing" is 4.78em wide) and stand on their rule; the hi-vis band runs along the foot. */
.hero { background: #fff; }
.sign--hero {
  display: flex; flex-direction: column;
  min-height: min(880px, 205vw, 100vh - 4rem - 1px);
  min-height: min(880px, 205vw, 100svh - 4rem - 1px);
}
.hero__face {
  --big: calc((100vw - 2 * var(--gutter)) / 4.8);
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; column-gap: 10px;
  padding-top: calc(var(--inset) + 16px);
}
.hero__face .sign__tab { grid-area: 1 / 1 / 2 / -1; }
.sign--hero h1 { grid-area: 2 / 1 / 3 / -1; align-self: end; padding-block: 20px 16px; font-size: var(--big); line-height: .95; letter-spacing: -.012em; text-wrap: nowrap; }   /* the legend stands on its rule */
.hero__big, .hero__for { display: block; }
.hero__big { margin-left: -.047em; }                             /* the M's side bearing: its stem stands on the rule's end */
.hero__for { margin-top: .22em; font-size: .5em; font-weight: 700; line-height: 1; letter-spacing: 0; }
.sign--hero .sign__line { grid-area: 3 / 1 / 4 / -1; padding-top: 13px; border-top: 3px solid #fff; max-width: none; font-size: clamp(1.15rem, 1.62vw, 1.45rem); text-wrap: pretty; }
.sign--hero .sign__exits { margin-top: 20px; }
/* On a phone tall enough to leave green above the legend, the arrow takes it: top right, the plaque top left, the
   words lower left of the arrow, as on a real guide sign. It grows with the screen, so the field has no dead band. */
@media (max-width: 699px) and (min-height: 700px) {
  .sign--hero .sign__arrow { display: block; grid-area: 1 / 1 / 2 / -1; justify-self: end; width: clamp(72px, 100vh - 650px, min(52vw, 160vw - 390px)); width: clamp(72px, 100svh - 650px, min(52vw, 160vw - 390px)); height: auto; margin: 1px -1px 0 0; }
}
@media (min-width: 700px) {
  .sign--hero { min-height: min(880px, 82vw, 100vh - 4.75rem - 1px); min-height: min(880px, 82vw, 100svh - 4.75rem - 1px); }
  .hero__face {
    --big: clamp(5.25rem, min(15.3vw - 3px, (100vh - 23.75rem) / 2.65), 11.875rem);
    grid-template-rows: 1fr auto auto; padding-top: calc(var(--inset) + clamp(40px, 6vh, 56px));
  }
  .sign--hero h1 { padding-block: 0 .18em; }
  .hero__big { font-weight: 700; }                                /* at this size the lighter cut reads as sign lettering, not as weight */
  .hero__for { font-size: max(1.75rem, .27em); margin-top: .3em; }
  /* the arrow stands beside the two words, centred between the first one's top and the second one's baseline */
  .sign--hero .sign__arrow { display: block; grid-area: 2 / 2; justify-self: end; align-self: start; width: calc(var(--big) * 1.645 - 60px); height: auto; margin-top: calc(var(--big) * .03 + 30px); }
  .sign--hero .sign__line { padding-top: 18px; }
  .sign--hero .sign__exits { margin-top: clamp(24px, 4.4vh, 44px); }
}
@supports (height: 1svh) { @media (min-width: 700px) { .hero__face { --big: clamp(5.25rem, min(15.3vw - 3px, (100svh - 23.75rem) / 2.65), 11.875rem); } } }
@media (min-width: 1000px) {
  .sign--hero .sign__line { padding-top: 21px; border-top-width: 4px; }
  .sign--hero .panel { min-height: 84px; font-size: clamp(1.6rem, 2.2vw, 2rem); }
  .sign--hero .panel .arrow { width: 44px; height: 44px; }
}

/* under the sign: the standfirst, who you deal with, and where */
.intro { display: grid; gap: 2.25rem; padding-block: clamp(2.5rem, 6vw, 4.75rem) var(--section); }
.hero-lede { font-size: clamp(1.3rem, 2.5vw, 1.6rem); line-height: 1.36; max-width: 34em; text-wrap: pretty; }
.byline { display: flex; align-items: center; gap: 18px; }
.byline__plate { flex: none; width: 128px; }
.byline picture { position: relative; display: block; padding: 7px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px #9aa1a4; }
.byline picture::after { content: ""; position: absolute; inset: 3.5px; border: 3px solid #000; border-radius: 7px; }
.byline img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3.5px; }
.byline .blade { display: block; min-height: 0; margin-top: 6px; padding: 10px 11px 7px; border-radius: 7px; text-align: center; }
.byline .blade::before { inset: 3px; border-width: 2px; border-radius: 4.5px; }
.byline .blade__name, .byline .blade__tag { display: block; }
.byline .blade__name { font-size: 1rem; line-height: 1.05; }
.byline .blade__tag { margin-top: 3px; font-size: .9375rem; line-height: 1; }
.byline p { font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.3rem); line-height: 1.36; max-width: 13.5em; text-wrap: balance; }
.distance { list-style: none; margin: 0; padding: 20px 26px 18px; }
.distance li { padding: 15px 0 12px; line-height: 1.1; }
.distance li + li { border-top: 2px solid #fff; }
.distance strong, .distance span { display: block; }
.distance strong { font-weight: 800; font-size: 1.5rem; }
.distance span { margin-top: 4px; font-weight: 600; font-size: 1.2rem; }
@media (min-width: 700px) {                                       /* a distance sign: the place on the left, how on the right */
  .distance { padding: 26px 34px 24px; }
  .distance li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 20px 0 16px; white-space: nowrap; }
  .distance li + li { border-top-width: 3px; }
  .distance strong { font-size: clamp(1.4rem, 2.05vw, 1.75rem); }
  .distance span { margin: 0; font-size: clamp(1.15rem, 1.55vw, 1.3rem); }
}
@media (min-width: 1100px) {
  .intro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
  .intro__where { grid-column: 2; grid-row: 1 / span 2; margin-top: .45rem; }
  .distance { padding: 28px 38px 26px; }
  .distance li { padding: 27px 0 22px; }
}

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--section); }
.section--overcast { background: var(--overcast); }
.section--ruled { border-top: 1px solid var(--aluminum); }
h2 + .lede { margin-top: 1rem; }
.section-head { margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section-head h2 { max-width: 17ch; }
.section-head h2 .line { display: block; }
.section-head .brandline { max-width: none; font-size: 12vw; line-height: .98; }   /* the brand line, at poster size: three lines on a phone, two from 480px */
@media (min-width: 480px) { .section-head .brandline { font-size: clamp(2.4rem, 6.5vw, 5.5rem); } .brandline .line { white-space: nowrap; } }
.split > .section-head { margin-bottom: 0; }
.section-head p { margin-top: .85rem; font-size: clamp(1.15rem, 2.2vw, 1.3rem); line-height: 1.45; color: var(--ink-muted); max-width: 32em; }
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 899px) {                                       /* About on a phone: the story first, the photo after it */
  .split--story > div:first-child { display: contents; }
  .split--story .prose { order: 1; }
  .split--story .portrait { order: 2; margin-top: 0; }
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split h2 { font-size: clamp(2.1rem, 5.2vw, 4rem); }
}

/* ---------------------------------------------------------------- price plates: white regulatory signs */
.limits { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.limit { display: grid; gap: 12px; justify-items: center; align-content: start; text-align: center; }
.limit__plate {
  container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 272px; aspect-ratio: 4 / 5; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px #9aa1a4;
}
.limit__plate::before { content: ""; position: absolute; inset: 5px; border: 4.5px solid #000; border-radius: 9.5px; }
/* The legend fills the plate like a real speed-limit sign. Every plate has the same three rows from the top (label,
   numeral, sub-label), sized from the plate's own width (100cqw), so the numerals in a row share one baseline whether
   or not a plate has a sub-label. The numeral stands on an invisible strut, so a smaller numeral ("$1,500") keeps the
   same baseline. The dollar sign is set at 55% and raised to the numeral's top, which lets the numeral grow: the
   widest, "$500", takes 80% of the width inside the black border (19px of edge and border). */
.limit__top { display: grid; place-items: center; width: min-content; height: 2.4rem; margin-top: 2.1rem; font-weight: 800; font-size: 1rem; line-height: 1.04; letter-spacing: .03em; text-transform: uppercase; }
.limit__num { margin-top: .25rem; font-weight: 900; font-size: 3.4rem; line-height: 0; letter-spacing: -.02em; white-space: nowrap; }
.limit__num::before { content: ""; display: inline-block; height: 3.7rem; }
.limit__cur { display: inline-block; margin-right: .05em; font-size: .55em; letter-spacing: 0; vertical-align: .5em; }
.limit__unit { margin-top: .55rem; font-weight: 800; font-size: 1rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
@supports (width: 1cqw) {
  .limit__top { height: 24cqw; margin-top: 23cqw; font-size: max(.9375rem, 11cqw); }
  .limit__num { margin-top: 0; font-size: calc((100cqw - 19px) * .359); }
  .limit__num::before { height: 43cqw; }
  .limit--long .limit__num { font-size: calc((100cqw - 19px) * .283); }
  .limit__unit { margin-top: 5.6cqw; font-size: max(.9375rem, 9.5cqw); }
}
.limit__note { font-size: 1rem; line-height: 1.36; max-width: 14.5em; color: var(--ink-muted); text-wrap: balance; }
.limits-also { margin-top: clamp(1.75rem, 4vw, 2.5rem); max-width: 30em; font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.3rem); line-height: 1.4; }
.limits-more { margin-top: 1rem; }
.more { display: inline-block; padding-block: .7rem; margin-block: -.7rem; font-weight: 700; }
@media (min-width: 760px) {
  .limits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .limits--pair { grid-template-columns: repeat(2, minmax(0, 236px)); }
}

/* ---------------------------------------------------------------- street blades on a post: the six services */
.fingerpost { position: relative; list-style: none; margin: 0; padding: 20px 0 0; display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.fingerpost::before { content: ""; position: absolute; left: 17px; top: 0; bottom: -34px; width: 8px; background: linear-gradient(90deg, #b3b9bc, #e4e7e8 45%, #bcc2c4); border-radius: 4px 4px 0 0; }
.way { position: relative; display: grid; gap: 14px; }
.blade {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  min-height: 74px; padding: 15px 16px 12px 20px; background: var(--guide); color: #fff; border-radius: 9px; text-decoration: none;
}
.blade::before { content: ""; position: absolute; inset: 4px; border: 2px solid #fff; border-radius: 5.5px; pointer-events: none; }
.fingerpost .blade { max-width: 480px; }
a.blade:hover { background: var(--guide-deep); color: #fff; }
a.blade:active { transform: translateY(1px); }
.blade__name { font-size: clamp(1.25rem, 5vw, 1.6rem); font-weight: 800; line-height: 1.08; letter-spacing: 0; }
.blade__tag { grid-column: 1; margin-top: 5px; font-size: .9375rem; font-weight: 700; line-height: 1.1; letter-spacing: .07em; text-transform: uppercase; }
.blade .arrow { grid-column: 2; grid-row: 1 / span 2; width: 32px; height: 32px; margin-top: -3px; transform: rotate(90deg); }
.way__body { padding-left: 44px; }
.way__what { font-weight: 600; font-size: 1.125rem; line-height: 1.42; max-width: 36em; }
.ticks { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 5px; color: var(--ink-muted); }
.ticks li { position: relative; padding-left: 20px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .66em; width: 10px; height: 3px; background: #000; }
.ticks a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; color: #000; }
@media (max-width: 699px) { .fingerpost .ticks { display: none; } }
@media (min-width: 900px) {
  .way { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 3.75rem); align-items: start; }
  .way__body { padding: 4px 0 0; }
  .ticks { display: block; columns: 2; column-gap: 2.25rem; }
  .ticks li { break-inside: avoid; margin-bottom: 5px; }
}

/* ---------------------------------------------------------------- work zone: real jobs, with their numbers */
.section-head .zone { position: relative; isolation: isolate; display: grid; place-items: center; width: 112px; height: 112px; margin: 0 0 18px -8px; color: #000; }
.zone::before { content: ""; position: absolute; inset: 14.65%; z-index: -1; background: var(--work); border-radius: 9px; transform: rotate(45deg); box-shadow: inset 0 0 0 4px var(--work), inset 0 0 0 7px #000; }
.zone span { width: min-content; padding-top: .2em; font-weight: 800; font-size: .9375rem; line-height: 1.04; letter-spacing: .02em; text-align: center; text-transform: uppercase; }
.jobs { list-style: none; padding: 0; display: grid; gap: clamp(2.25rem, 5vw, 3.25rem) clamp(1.75rem, 4vw, 3rem); }
.job { display: grid; gap: 22px; align-content: start; }
.job__body { border-top: 4px solid #000; padding-top: 15px; }
.job__num { font-weight: 900; font-size: clamp(2rem, 8vw, 3rem); line-height: 1; letter-spacing: -.01em; }
.job__label { margin-top: 5px; font-weight: 700; line-height: 1.3; }
.job__facts { margin-top: 14px; display: grid; gap: 3px; }
.job__facts div { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .5rem; align-items: baseline; }
.job__facts dt { font-size: .9375rem; color: var(--ink-muted); }
.job__facts dd { font-weight: 600; line-height: 1.35; }
.job__detail { margin-top: 12px; color: var(--ink-muted); max-width: 34em; }
.shot { margin: 0; }
.shot__frame { position: relative; padding-bottom: 8%; }
.shot img { width: 100%; height: auto; }
.shot__desk { display: block; width: 88%; }
.shot__desk img { border-radius: 10px; box-shadow: 0 0 0 3px #000; }
.shot__phone { position: absolute; right: 3px; bottom: 3px; width: 24%; }
.shot__phone img { border-radius: 13px; box-shadow: 0 0 0 3px #000, 0 0 0 8px var(--overcast); }
.shot figcaption { margin-top: 16px; font-size: .9375rem; color: var(--ink-muted); }
.work-also { margin-top: clamp(2rem, 5vw, 3rem); max-width: 34em; color: var(--ink-muted); }
@media (min-width: 900px) {
  .work-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 34px; align-items: center; }
  .section-head .zone { width: 148px; height: 148px; margin: 0 0 0 -10px; }
  .zone::before { border-radius: 11px; box-shadow: inset 0 0 0 5px var(--work), inset 0 0 0 9px #000; }
  .zone span { font-size: 1.2rem; }
  .jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .job--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
  .job--lead .job__num { font-size: clamp(3rem, 4.6vw, 3.9rem); }
}

/* ---------------------------------------------------------------- what a client said */
.quote blockquote p { position: relative; max-width: 21ch; font-weight: 800; font-size: clamp(1.9rem, 6.6vw, 4.6rem); line-height: 1.07; letter-spacing: -.008em; text-wrap: balance; }
.quote blockquote p::before { content: "\201C"; position: absolute; right: 100%; margin-right: .03em; }
.quote blockquote p::after { content: "\201D"; }
.quote__who { margin-top: 1.4rem; }
.quote__list { list-style: none; padding: 0; display: grid; gap: var(--section); }
@media (max-width: 479px) { .quote blockquote p::before { position: static; margin: 0; } }

/* ---------------------------------------------------------------- the hi-vis band: the free check-up */
.band { background: var(--hivis); color: #000; }
.band a:not(.plate):hover { background: #000; color: var(--hivis); }
.band h2 { max-width: 13ch; font-size: clamp(2.3rem, 8.4vw, 4.6rem); line-height: .98; }
.band .lede { margin-top: 18px; font-weight: 500; }
.band .plate--white { background: transparent; box-shadow: inset 0 0 0 3px #000; }
.band .plate--white:hover { background: #fff; }
.band__maker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
.band__maker > .actions { margin-top: 0; }
.band__maker > .looks { margin-top: .9rem; }
.looks h3 { font-size: 1.125rem; font-weight: 800; padding-bottom: 12px; }
.looks ul { list-style: none; padding: 0; }
.looks li { border-top: 3px solid #000; padding: 13px 0 11px; font-weight: 700; font-size: 1.2rem; line-height: 1.25; text-wrap: balance; }

/* your business on the sign: the two fields draw a guide sign as you type. Its legend is sized from the sign's own
   width (100cqw) and steps down by class for long names, so the sign keeps one size whatever is typed. */
.maker { display: grid; gap: .9rem; }
.maker .field label { font-weight: 800; }
.maker .field input { border-width: 3px; }
.maker__stage { padding-top: 39px; }                              /* room for the exit tab */
.maker__sign { container-type: inline-size; max-width: 620px; margin-inline: auto; }
.maker__sign .sign__tab { max-width: calc(100% - 44px); overflow: hidden; text-overflow: ellipsis; }
.maker__face { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 1.6rem 1.6rem 1.4rem; }
.maker__legend { grid-column: 1 / -1; display: flex; align-items: flex-end; height: 6.4rem; padding-bottom: .7rem; border-bottom: 3px solid #fff; }
.maker__name { width: 100%; font-weight: 800; font-size: 2.7rem; line-height: 1; letter-spacing: -.012em; }
.maker__name.is-m { font-size: 1.9rem; }
.maker__name.is-s { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 1.35rem; line-height: 1.1; letter-spacing: 0; overflow-wrap: anywhere; }
.maker__next { font-weight: 700; font-size: 1.3rem; line-height: 1; }
.maker__face .arrow { width: 2.6rem; height: 2.6rem; margin-top: .7rem; }
@supports (width: 1cqw) {
  .maker__face { padding: 7cqw 8cqw 6.6cqw; }
  .maker__legend { height: 32cqw; padding-bottom: 3.4cqw; border-bottom-width: max(3px, .7cqw); }
  .maker__name { font-size: 13.6cqw; }
  .maker__name.is-m { font-size: 9.3cqw; }
  .maker__name.is-s { font-size: 6.5cqw; }
  .maker__next { font-size: 6.4cqw; padding-bottom: 1.6cqw; }
  .maker__face .arrow { width: 13cqw; height: 13cqw; margin-top: 3.4cqw; }
}
@media (scripting: none) { .maker, .maker__stage { display: none; } }   /* without JavaScript the band is the offer and its two buttons */
@media (min-width: 700px) {
  .maker { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .maker__stage { padding-top: 42px; }
  .band__maker .looks ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); }
}
@media (min-width: 900px) {
  .band__maker { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); grid-template-areas: "say stage" "maker stage" "actions stage" "looks looks"; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .band__say { grid-area: say; }
  .band h2 { font-size: min(4.6rem, 4.55vw); }
  .maker { grid-area: maker; }
  .maker__stage { grid-area: stage; align-self: center; }
  .band__maker > .actions { grid-area: actions; }
  .band__maker > .looks { grid-area: looks; margin-top: clamp(1.75rem, 4vw, 3rem); }
  .band__maker .looks ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (scripting: none) {
  .band__maker { grid-template-areas: "say looks" "actions looks"; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; }
  .band__maker > .looks { margin-top: 0; }
  .band__maker .looks ul { display: block; }
}

/* ---------------------------------------------------------------- mile markers along one route: the steps */
.route { position: relative; list-style: none; margin: 0; padding: 0; counter-reset: mile; display: grid; gap: 30px; }
.route li { position: relative; counter-increment: mile; min-height: 72px; padding-left: 78px; }
.route li::before {
  content: counter(mile); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 56px; height: 72px; padding-top: .14em;
  background: var(--guide); color: #fff; border-radius: 9px; box-shadow: inset 0 0 0 3px var(--guide), inset 0 0 0 6px #fff;
  font-weight: 900; font-size: 2.2rem; line-height: 1;
}
.route li:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 70px; bottom: -32px; width: 6px; background: var(--asphalt); }
.route h3 { padding-top: 5px; }
.route p { margin-top: 6px; color: var(--ink-muted); max-width: 30em; }
@media (min-width: 900px) {
  .route { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
  .route::before { content: ""; position: absolute; left: 0; right: 0; top: 72px; height: 6px; background: var(--asphalt); border-radius: 3px; }   /* the plates stand on the line */
  .route li { padding: 104px 0 0; }
  .route li:not(:last-child)::after { content: none; }
  .route h3 { padding-top: 0; }
}

/* ---------------------------------------------------------------- who you'd be working with */
.portrait { margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; max-width: 340px; }
.portrait picture { position: relative; display: block; padding: 9px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px #9aa1a4; }
.portrait picture::after { content: ""; position: absolute; inset: 5px; border: 4.5px solid #000; border-radius: 9.5px; }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 5px; }
.portrait .blade { margin-top: 8px; min-height: 0; display: block; padding: 14px 20px 12px; }
.portrait .blade__name, .portrait .blade__tag { display: block; }
.prose p, .prose ul { max-width: 34em; }
.prose h2 { margin: 2.25rem 0 .7rem; font-weight: 800; font-size: 1.6rem; line-height: 1.12; letter-spacing: 0; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 2.25rem 0 .7rem; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: .4rem; }
.prose p + ul, .prose ul + p { margin-top: 1em; }
.prose > :first-child { margin-top: 0; }

/* ---------------------------------------------------------------- questions */
.faq { border-top: 4px solid #000; }
.faq details { border-bottom: 1px solid var(--aluminum); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 0 1rem; cursor: pointer; list-style: none; font-weight: 800; font-size: 1.25rem; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 18px; height: 18px; margin-bottom: .15em; background: linear-gradient(#000, #000) center / 100% 3px no-repeat, linear-gradient(#000, #000) center / 3px 100% no-repeat; }
.faq details[open] summary::after { background: linear-gradient(#000, #000) center / 100% 3px no-repeat; }
.faq summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.faq details > div { padding: 0 2.5rem 1.35rem 0; max-width: 36em; color: var(--ink-muted); }
.faq details > div a { color: #000; }

/* ---------------------------------------------------------------- night: the closing sign */
.night { position: relative; overflow: hidden; background: var(--asphalt); color: #fff; padding-bottom: 0; }
.night::before { content: ""; position: absolute; left: 50%; top: 4%; width: min(1500px, 190%); height: 86%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 255, 255, .085), transparent); pointer-events: none; }
.lanes { position: relative; height: 10px; margin-top: 34px; background: repeating-linear-gradient(90deg, var(--lane) 0 54px, transparent 54px 108px); }
.night__stand { max-width: 880px; margin-top: clamp(3.25rem, 8vw, 5.5rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); display: grid; justify-items: center; }
.sign--night { width: 100%; box-shadow: 0 0 90px rgba(60, 230, 160, .26), 0 0 26px rgba(60, 230, 160, .2); }
.sign--night.is-dim { box-shadow: 0 0 0 rgba(60, 230, 160, 0); }
.sign--night h2 { max-width: 15ch; font-size: clamp(2.1rem, 7vw, 4rem); line-height: 1.02; }
.sign--night .sign__line { margin-top: 14px; }
.night__plates { position: relative; z-index: 1; display: grid; gap: 14px; width: min(100%, 420px); margin-top: 18px; }
.night .plate--post { box-shadow: inset 0 0 0 3px #000; }
.night .plate--post:hover { box-shadow: inset 0 0 0 3px #000; }
@media (prefers-reduced-motion: no-preference) { .sign--night { transition: box-shadow 1.1s ease-out; } }
@media (min-width: 700px) {
  .night__plates { display: flex; justify-content: center; width: auto; gap: 16px; margin-top: 22px; }
}

/* ---------------------------------------------------------------- footer, on asphalt */
.site-footer { background: var(--asphalt); color: #d3d7d8; font-size: 1rem; }
.site-footer::before { content: ""; display: block; height: 3px; background: var(--lane); }
.site-footer .wrap { display: grid; gap: 2.25rem; padding-block: clamp(2.5rem, 6vw, 3.75rem) 2rem; }
.site-footer h2 { margin-bottom: .5rem; color: #fff; font-size: 1.0625rem; font-weight: 800; line-height: 1.2; letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #fff; }
.site-footer a:hover { color: #000; }
.brand--dark { color: #fff; margin: 0 0 1rem; }
.site-footer__about p:last-child { max-width: 24em; }
.site-footer .legal { margin: 0; padding-top: 1.25rem; border-top: 1px solid #4a4e51; }
@media (min-width: 700px) {
  .site-footer .wrap { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
  .site-footer .legal { grid-column: 1 / -1; }
  .site-footer li a { min-height: 2.25rem; }
}

/* ---------------------------------------------------------------- inner pages: the same sign, as tall as its words */
.sign--page > .wrap { display: grid; padding-block: calc(var(--inset) + 16px) calc(var(--inset) + 24px); }
.sign--page.sign--panel > .wrap { padding-bottom: 0; }
.sign--page .sign__tab { margin-bottom: 20px; }
.sign--page h1 { max-width: 17ch; font-size: clamp(2.1rem, 9.4vw, 3.9rem); line-height: 1; padding-bottom: 16px; border-bottom: 3px solid #fff; }
.sign--page .sign__line { margin-top: 15px; max-width: 40em; text-wrap: pretty; }
@media (min-width: 700px) {
  .sign--page > .wrap { padding-block: calc(var(--inset) + 26px) calc(var(--inset) + 38px); }
  .sign--page .sign__tab { margin-bottom: 26px; }
  .sign--page h1 { max-width: 20ch; padding-bottom: 22px; }
  .sign--page .sign__line { margin-top: 20px; }
}
@media (min-width: 1000px) {                                      /* room beside the heading: the plaque goes to the frame's top right corner */
  .sign--page > .wrap { padding-top: calc(var(--inset) + 52px); }
  .sign--page:not(.sign--panel) > .wrap { padding-bottom: calc(var(--inset) + 50px); }
  .sign--page .sign__tab { position: absolute; z-index: 2; top: calc(var(--inset) + var(--frame) + 16px); right: calc(var(--inset) + var(--frame) + 16px); margin: 0; }
}
/* the 404 sign is off the route: a boxed sign on two posts */
.detour { background: var(--overcast); padding-top: 56px; }
.detour > .wrap { padding-bottom: 36px; display: grid; }
.sign--detour h1 { max-width: 17ch; font-size: clamp(2.1rem, 9.4vw, 3.9rem); line-height: 1; padding-bottom: 16px; border-bottom: 3px solid #fff; }
.sign--detour .sign__line { margin-top: 15px; max-width: 40em; }
.detour .plate--post { justify-self: center; width: min(100%, 420px); margin-top: 16px; }
@media (min-width: 700px) {
  .detour { padding-top: 64px; }
  .detour > .wrap { padding-bottom: 44px; }
  .sign--detour h1 { padding-bottom: 22px; }
  .sign--detour .sign__line { margin-top: 20px; }
  .detour .plate--post { width: auto; padding-inline: 1.3em; margin-top: 20px; }
}

/* facts in pairs: what you get, what you can hold me to */
.pairs { display: grid; border-top: 4px solid #000; }
.pairs > div { padding: 1.1rem 0 1.15rem; border-bottom: 1px solid var(--aluminum); }
.pairs dt { font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.pairs dd { margin-top: .3rem; color: var(--ink-muted); max-width: 34em; }
.pairs dd a { color: #000; }
.kinds { list-style: none; padding: 0; display: grid; gap: 1.75rem clamp(1.5rem, 3vw, 2.25rem); }
.kinds li { border-top: 4px solid #000; padding-top: .9rem; }
.kinds p { margin-top: .45rem; color: var(--ink-muted); }
@media (min-width: 600px) { .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* services page: each service under its blade */
.service { display: grid; gap: 1.5rem; padding-block: clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--aluminum); scroll-margin-top: 5.5rem; }
.service:last-child { border-bottom: 0; }
.service .blade { display: block; min-height: 0; padding: 16px 20px 13px; }
.service .blade__name { font-size: clamp(1.4rem, 5.4vw, 1.8rem); }
.service .blade__tag { display: block; }
.service__what { margin-top: 1rem; font-weight: 600; font-size: 1.2rem; line-height: 1.42; max-width: 30em; }
.service .pairs { border-top: 0; gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.service .pairs > div { padding: .15rem 0 1.1rem; border-bottom: 0; }
.service .pairs dt { font-size: 1.125rem; }
.shorts { list-style: none; padding: 0; display: grid; gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.shorts li { padding: .15rem 0 1.1rem; font-weight: 800; font-size: 1.125rem; line-height: 1.2; text-wrap: balance; }
.service__proof { margin-top: .35rem; color: var(--ink-muted); max-width: 34em; }
@media (min-width: 900px) {
  .service { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 3.75rem); align-items: start; }
  .service .pairs { display: block; columns: 2; column-gap: clamp(1.5rem, 3vw, 2.5rem); padding-top: .4rem; }
  .service .pairs > div { break-inside: avoid; }
  .shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: .4rem; }
}

/* the price board: a green distance sign, service on the left, price on the right */
.board { display: grid; padding: 30px 26px 26px; }
.board table { width: 100%; border-collapse: collapse; }
.board caption { padding-bottom: 14px; border-bottom: 3px solid #fff; text-align: left; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.board caption strong { display: block; font-size: clamp(1.6rem, 5.4vw, 2.2rem); line-height: 1.05; }
.board th, .board td { padding: 15px 0 0; vertical-align: top; font-size: clamp(1.15rem, 3.9vw, 1.45rem); line-height: 1.16; }
.board tbody tr:first-child th, .board tbody tr:first-child td { padding-top: 18px; }
.board tbody th { padding-right: 18px; text-align: left; font-weight: 600; }
.board td { text-align: right; font-weight: 800; white-space: nowrap; }
.board table + table { margin-top: 34px; }
.board__also { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; margin-top: 26px; padding-top: 18px; border-top: 3px solid #fff; font-size: clamp(1.15rem, 3.9vw, 1.45rem); line-height: 1.16; }
.board__also span { font-weight: 600; }
.price-note { margin-top: clamp(1.5rem, 4vw, 2.25rem); max-width: 33em; font-size: clamp(1.15rem, 2.2vw, 1.3rem); line-height: 1.45; }
.price-note + .price-note { margin-top: .8em; font-weight: 600; }
@media (min-width: 900px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 50px 56px 48px; }
  .board table + table { margin-top: 0; }
  .board tbody th { height: calc(2.32em + 15px); }                 /* every row two lines high, so the two halves line up */
  .board tbody tr:first-child th { height: calc(2.32em + 18px); }
  .board table:first-child { border-right: 3px solid #fff; }
  .board table:first-child caption, .board table:first-child th { padding-left: 0; }
  .board table:first-child td, .board table:first-child caption { padding-right: 44px; }
  .board table + table caption, .board table + table tbody th { padding-left: 44px; }
  .board caption { caption-side: top; }
  .board__also { grid-column: 1 / -1; margin-top: 30px; padding-top: 22px; }
}
.packages { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.package > p { margin: .4rem 0 1.5rem; color: var(--ink-muted); }
.package h3 { font-size: 1.6rem; line-height: 1.1; }
@media (min-width: 900px) { .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* contact */
.contact-list { list-style: none; padding: 0; display: grid; gap: 1.4rem; }
h2 + .contact-list { margin-top: 1.75rem; }
.contact-list .label { display: block; font-size: 1rem; color: var(--ink-muted); }
.contact-list a, .contact-list .value { font-weight: 800; font-size: clamp(1.3rem, 5vw, 1.6rem); line-height: 1.2; overflow-wrap: anywhere; }
.contact-list a { display: inline-block; padding-block: .6rem; margin-block: -.35rem; }
.copy-btn { margin-top: .7rem; }
.status { min-height: 1.5em; margin-top: .45rem; font-size: 1rem; color: var(--ink-muted); }

/* ---------------------------------------------------------------- the message form */
.form-wrap { border-top: 4px solid #000; padding-top: 1.1rem; scroll-margin-top: 6.5rem; }
.form-wrap h2 { font-size: clamp(1.75rem, 5vw, 2.2rem); line-height: 1.05; }
.form-wrap .lede { margin-top: .6rem; font-size: 1.125rem; color: var(--ink-muted); }
.form { margin-top: 1.6rem; display: grid; gap: 1.1rem; }
.form[hidden], .form-fallback[hidden] { display: none; }
.field label { display: block; margin-bottom: .3rem; font-weight: 700; }
.optional { font-weight: 400; color: var(--ink-muted); }
.field input, .field textarea { display: block; width: 100%; min-height: 3.25rem; padding: .7rem .8rem .55rem; border: var(--line) solid #000; border-radius: 8px; background: #fff; color: #000; font: inherit; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid #000; outline-offset: 2px; border-radius: 8px; }
.field [aria-invalid="true"] { border-color: var(--stop); box-shadow: inset 0 0 0 1.5px var(--stop); }
.field-error { margin-top: .4rem; color: var(--stop); font-weight: 700; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .plate { justify-self: start; min-height: 3.5rem; padding-inline: 1.4em; font-size: 1.15rem; }
.form .plate[disabled] { opacity: .55; cursor: default; }
.form-note { font-size: 1rem; color: var(--ink-muted); max-width: 36em; }
.form-note a { color: #000; }
.form-status { min-height: 1.5em; font-weight: 700; }
.form-status[data-state="error"] { color: var(--stop); }
.form-status[data-state="ok"] { position: relative; justify-self: start; padding: 18px 22px 15px; background: var(--guide); color: #fff; border-radius: 12px; font-weight: 700; line-height: 1.35; max-width: 27em; text-wrap: balance; }
.form-status[data-state="ok"]::before { content: ""; position: absolute; inset: 4px; border: 3px solid #fff; border-radius: 8.5px; }
.form-fallback { margin-top: 1.1rem; }
.form-fallback p { max-width: 32em; }

/* ---------------------------------------------------------------- the eight-question self-check */
.selfcheck fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.selfcheck ol { list-style: none; padding: 0; margin: 0; border-top: 4px solid #000; max-width: 48rem; }
.selfcheck li { border-bottom: 1px solid #9aa1a4; }
.selfcheck label { display: grid; grid-template-columns: 1.85rem minmax(0, 1fr); gap: .95rem; align-items: start; padding: 1rem 0 .9rem; font-weight: 700; line-height: 1.4; cursor: pointer; }
.selfcheck input { appearance: none; -webkit-appearance: none; width: 1.85rem; height: 1.85rem; margin: -.1rem 0 0; border: var(--line) solid #000; border-radius: 6px; background: #fff; cursor: pointer; }
.selfcheck input:checked { background: var(--hivis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3.6'/%3E%3C/svg%3E") center / 100% no-repeat; }
@media (forced-colors: active) { .selfcheck input { appearance: auto; -webkit-appearance: auto; } }
.selfcheck .fix { margin: -.3rem 0 1rem 2.8rem; color: var(--ink-muted); max-width: 32em; }
.selfcheck.js .fix { display: none; }
.selfcheck.js.is-live li:not(.is-yes) .fix { display: block; }
.selfcheck-result { margin-top: 1.6rem; font-size: 1.25rem; font-weight: 800; line-height: 1.3; max-width: 30em; text-wrap: balance; }

@media (max-width: 479px) { .actions .plate, .form .plate { width: 100%; } }
@media print {
  .site-header, .night, .site-footer, .posts, .form-wrap, .selfcheck, .maker, .maker__stage { display: none; }
  body { font-size: 12pt; }
}