/* Horley Car Recovery.

   The grammar is a printed trade document, not a landing page: hairline rules
   and type weight do the organising, not bordered boxes. The previous pass had
   nine different rounded, tinted, 1px-bordered rectangles on the homepage, so
   nothing had hierarchy and every section shouted at the same volume. Rules are
   cheap, boxes are not: a rule separates without enclosing.

   Three standing rules, and everything below follows from them.
   1. Square, not rounded. Radius is 3px and it is for photos and inputs. A
      recovery truck is not a rounded rectangle.
   2. Amber has four jobs and no others: the section marker rule, the phone
      number, the primary button, and the closing band. Every amber-tinted fill
      and amber-dashed pill that was decorating something has gone.
   3. One loud thing per page. The H1 is it. Section headings sit a size below.

   Palette: white page, near-black type, orange accents. Orange has two tokens
   because #F2A007 on white is about 2.2:1 and fails as text: --amber is the
   FILL (buttons, bars, markers) and --amber-ink is the TEXT orange (#B45309,
   about 5:1 on white). Dark and amber bands re-point --amber-ink.

   Motion follows Emil Kowalski's rules: custom ease-out curves rather than the
   weak built-ins, nothing over 250ms, transforms and opacity only, press
   feedback on everything pressable, and no decorative hover lift on things a
   caller passes over constantly.

   Display: Oswald. Body: Inter. Self-hosted, no Google Fonts request. */

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/oswald-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* metric-matched fallbacks, measured with fontTools against these exact files
   (work/font-metrics.md). Nothing shifts when the webfont swaps in. */
@font-face{font-family:'Oswald Fallback';src:local('Arial Narrow'),local('Helvetica Neue Condensed'),local('Liberation Sans Narrow');
  size-adjust:99.62%;ascent-override:119.75%;descent-override:29.01%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica Neue'),local('Roboto'),local('Liberation Sans');
  size-adjust:109.38%;ascent-override:88.57%;descent-override:22.05%;line-gap-override:0%}

/* ---------------------------------------------------------------- tokens */
:root{
  color-scheme:light;
  --amber:#F2A007; --amber-hi:#FFB629; --amber-ink:#B45309;
  --ink:#16130F; --ink-2:#1E1A15; --ink-3:#272117;
  --chev-red:#E8382C; --chev-yellow:#E4E82B;

  --bg:#FFFFFF; --bg-2:#F7F4EF; --panel:#FFFFFF;
  --fg:var(--ink); --fg-2:#3A332A; --fg-3:#6B6155;
  --line:rgba(22,19,15,.16); --line-2:rgba(22,19,15,.08);
  --on-amber:#16130F;
  --wa:#25D366; --on-wa:#062B12;

  --disp:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --body:'Inter','Inter Fallback',system-ui,-apple-system,Arial,sans-serif;
  --wrap:1140px; --r:3px;

  /* The built-in CSS easings are too weak to read as deliberate. These are the
     strong variants: ease-out for anything entering or responding to a press,
     ease-in-out for something moving on screen. ease-in is never used, because
     it holds still at the exact moment the user is watching. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);

  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Crect width='40' height='20' fill='%23E4E82B'/%3E%3Cpath fill='%23E8382C' d='M0 20 20 0 40 20 30 20 20 10 10 20Z M0 0 10 0 0 10Z M40 0 30 0 40 10Z'%3E%3C/path%3E%3C/svg%3E");
}
/* The footer is the one near-black band on the white page. It re-points the
   tokens rather than hard-coding, so anything dropped inside it inherits the
   right colours. */
footer{
  --fg:#FFFFFF; --fg-2:#DDD6CB; --fg-3:#A79E90;
  --amber-ink:var(--amber-hi);
  --line:rgba(255,255,255,.22); --line-2:rgba(255,255,255,.10);
  --bg-2:rgba(255,255,255,.06); --panel:rgba(255,255,255,.06);
  color:var(--fg-2);
}
/* The closing CTA is the one solid orange band on the page: orange ground,
   black type, which is the brand pair stated the other way round. */
.cta-band{
  --fg:#16130F; --fg-2:#2E271E; --fg-3:#4A4136;
  --amber-ink:#16130F;
  --line:rgba(22,19,15,.34); --line-2:rgba(22,19,15,.16);
  --bg-2:rgba(255,255,255,.34); --panel:rgba(255,255,255,.42);
  color:var(--fg-2);
}

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg-2);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-bottom:60px;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;color:var(--fg);font-family:var(--disp);font-weight:700;
  line-height:1.04;letter-spacing:.005em;text-transform:uppercase;text-wrap:balance}
/* The H1 is the only thing on the page allowed to be loud. Section headings sit
   a clear size below it, so a page reads as one headline and its sections
   rather than seven headlines in a row. */
h1{font-size:clamp(28px,5.6vw,48px);margin-bottom:10px}
h2{font-size:clamp(23px,3.1vw,32px);margin-bottom:14px}
h3{font-size:18px;letter-spacing:.02em}
p{margin:0 0 15px;text-wrap:pretty}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
.sec{padding:52px 0}
.lede{font-size:18px;max-width:60ch;color:var(--fg-2)}

/* Verified customer quotations, matching the site's simple ruled sections. */
.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:28px}
.review-quote{margin:0;border-top:1px solid var(--fg-3);padding-top:22px;min-width:0}
.review-quote blockquote{margin:0 0 22px;font-size:20px;line-height:1.5;color:var(--fg)}
.review-quote figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:15px}
.review-quote figcaption span{color:var(--fg-3)}
.review-quote a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:640px){.review-grid{grid-template-columns:1fr;gap:28px}}

/* The section marker. One repeated device instead of a different coloured
   label per section: a short amber rule, then the label in quiet grey. The
   amber lives in the rule, so the label stops competing with the phone number
   and the buttons for the same colour. */
.eyebrow{font-family:var(--body);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:12px;color:var(--fg-3);margin:0 0 10px}
.eyebrow::before{content:"";display:block;width:34px;height:3px;
  background:var(--amber);margin:0 0 14px}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:300;background:var(--amber);color:var(--on-amber);
  padding:10px 16px;border-radius:var(--r);font-weight:700}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:3px solid var(--amber);outline-offset:2px;border-radius:2px}
[id]{scroll-margin-top:24px}
.goldlink{color:var(--amber-ink);font-weight:600;
  border-bottom:1px solid var(--amber-ink);padding-bottom:1px}

/* ---------------------------------------------------------------- chevrons */
.chevband{height:14px;background-image:var(--chev);background-size:28px 14px;
  background-repeat:repeat-x;background-position:center}
.chev-head{height:8px;background-size:16px 8px}

/* ---------------------------------------------------------------- header */
header{position:relative;z-index:60;background:var(--ink)}
.nav{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{margin-right:auto;display:flex;align-items:center}
.wordmark{display:block;font-family:var(--disp);line-height:.9;text-transform:uppercase}
.wordmark b{display:block;font-size:24px;font-weight:700;letter-spacing:.03em;color:#fff}
.wordmark i{display:block;font-style:normal;font-size:11.5px;font-weight:500;
  letter-spacing:.26em;color:var(--amber)}
/* the lockup is a wide raster, so height drives it and width follows */
.logo{height:48px;width:auto}
.navlinks{display:none;font-weight:600;font-size:14.5px;color:#D8D2C8}
.hamb{background:none;border:0;padding:10px;cursor:pointer;margin-right:-10px}
.hamb span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px;
  transition:transform .22s var(--ease-out),opacity .12s linear}
.nav-open .hamb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .hamb span:nth-child(2){opacity:0}
.nav-open .hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-open .navlinks{display:flex;position:absolute;left:0;right:0;top:100%;
  flex-direction:column;gap:0;background:var(--ink);
  border-bottom:3px solid var(--amber);padding:6px 18px 14px}
.nav-open .navlinks a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);
  min-height:48px;display:flex;align-items:center;color:#fff}
/* The panel slides down from the bar it belongs to rather than appearing.
   Wrapped in @supports because it needs allow-discrete to animate out of
   display:none; without it the panel simply snaps, which is fine. */
@supports (transition-behavior:allow-discrete){
  .navlinks{transform-origin:top center}
  .nav-open .navlinks{
    transition:transform .2s var(--ease-out),opacity .2s var(--ease-out);
    transform:translateY(0);opacity:1}
  @starting-style{
    .nav-open .navlinks{transform:translateY(-8px);opacity:0}
  }
}

/* header pill: live text, never artwork */
/* 44px, not 40. This is the phone number in the header and it is the single
   most-tapped thing on the site, hit one-handed by somebody standing next to a
   broken car. 40px was under the 44px minimum and it cost nothing to fix. */
.pill{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 13px;
  border-radius:var(--r);background:var(--amber);color:var(--on-amber);font-weight:700;
  font-size:14.5px;white-space:nowrap;
  transition:transform .16s var(--ease-out),background .16s var(--ease-out)}
.pill svg{width:15px;height:15px;flex:none}
.pill:active{transform:scale(.97)}
.pill.is-pending{background:transparent;color:var(--amber);
  border:1.5px dashed var(--amber)}
.pill.is-pending:active{transform:none}

/* ---------------------------------------------------------------- buttons */
/* No hover lift. A caller passes over these constantly and a button that jumps
   away from the cursor is decoration, not feedback. The feedback that earns its
   place is the press: scale down on :active, fast, on every pressable thing. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:700;font-size:16px;letter-spacing:.01em;
  min-height:52px;padding:13px 22px;border-radius:var(--r);border:2px solid transparent;
  cursor:pointer;
  transition:transform .16s var(--ease-out),background-color .16s var(--ease-out),
             color .16s var(--ease-out),border-color .16s var(--ease-out)}
.btn svg{width:19px;height:19px;flex:none}
.btn-lg{font-size:17px;min-height:56px}
.btn-amber{background:var(--amber);color:var(--on-amber)}
.btn-wa{background:var(--wa);color:var(--on-wa)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(22,19,15,.38)}
.btn.is-pending{background:transparent;color:var(--amber-ink);
  border:2px dashed var(--amber-ink);cursor:default}
@media (hover:hover) and (pointer:fine){
  .btn-amber:hover{background:var(--amber-hi)}
  .btn-wa:hover{background:#1FBE59}
  .btn-ghost:hover{border-color:var(--ink);background:rgba(22,19,15,.05)}
}
.btn:active{transform:scale(.97)}
.btn.is-pending:active{transform:none}
.cta-row{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.cta-row .btn{width:100%}

/* ---------------------------------------------------------------- hero */
/* Picture alongside the copy rather than behind it, so nothing sits on top of a
   photograph and no scrim is needed to keep type legible. */
.hero{position:relative;background:var(--bg);overflow:hidden;
  border-bottom:1px solid var(--line-2)}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;
  padding-top:32px;padding-bottom:34px}
.hero-photo{border-radius:var(--r);overflow:hidden}
.hero-photo img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}

/* ---- Photo-background hero (Furkan, 28 Aug, pointing at two Croydon sites)
   The picture goes behind the copy instead of beside it. Three things this has
   to get right, in order of how badly they bite:

   1. Contrast. A photograph is not a background colour, and white type over a
      bright sky is unreadable. The scrim is what makes the type legal, so it
      is not optional and it is not decoration.
   2. Colour tokens. Custom properties resolve where they are DECLARED, so the
      light body colour leaks straight onto a dark band unless the band sets
      its own. That cost real time on the footer already. Everything dark here
      states its colour outright.
   3. --amber-ink is the TEXT orange and it is a dark brown, chosen for
      contrast on white. On a dark photograph it disappears. Dark bands
      re-point it to the bright fill amber, same as .cta-band does.

   .is-photo only lands when the photograph exists (see @@HERO_MOD@@), so an
   emptied slot falls back to the plain light hero rather than to white type
   on white. */
.hero.is-photo{border-bottom:0;background:var(--ink);color:#fff;isolation:isolate}
.hero.is-photo .hero-bg{position:absolute;inset:0;z-index:0}
.hero.is-photo .hero-bg img{width:100%;height:100%;object-fit:cover;
  object-position:50% 42%}

/* Mobile scrim is a flat wash top to bottom, because the copy runs the full
   width and there is no clear side to protect. */
.hero.is-photo .hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,11,10,.80) 0%,rgba(12,11,10,.74) 55%,
    rgba(12,11,10,.86) 100%)}

.hero.is-photo .wrap{position:relative;z-index:1;grid-template-columns:1fr;
  padding-top:44px;padding-bottom:48px}
.hero.is-photo h1{color:#fff}
.hero.is-photo .hero-lede{color:rgba(255,255,255,.86)}
.hero.is-photo .hero-badge{color:rgba(255,255,255,.70)}
.hero.is-photo .bignum a,.hero.is-photo .bignum .pending{color:var(--amber)}
.hero.is-photo .bignum .pending{border-color:var(--amber)}
.hero.is-photo .bignum-sub{color:rgba(255,255,255,.70)}
/* The ghost button is an ink outline on white by default and vanishes here. */
.hero.is-photo .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
@media (hover:hover) and (pointer:fine){
  .hero.is-photo .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
}

/* The name of the business, set as a marker line rather than a pill. It is a
   label, and a label that looks tappable is a label that gets tapped. */
.hero-badge{display:block;margin:0 0 14px;font-family:var(--body);font-weight:700;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.hero-badge::before{content:"";display:block;width:34px;height:3px;
  background:var(--amber);margin:0 0 14px}
.hero-lede{font-size:17px;color:var(--fg-2);max-width:54ch;margin:0 0 4px}

/* the number IS the hero */
.bignum{margin:20px 0 2px}
.bignum a,.bignum .pending{font-family:var(--disp);font-weight:700;line-height:1;
  letter-spacing:.01em;font-size:clamp(32px,8vw,54px);color:var(--amber-ink);
  display:inline-block;transition:color .16s var(--ease-out)}
.bignum a:active{color:var(--amber-hi)}
.bignum .pending{font-size:clamp(22px,5.5vw,34px);border:2px dashed var(--amber-ink);
  border-radius:var(--r);padding:8px 14px}
.bignum-sub{font-size:14px;color:var(--fg-3);margin:6px 0 0;font-weight:600}

/* What he does and where he goes, readable in the hero without a scroll. The
   arrows used to sit in filled amber discs, which is the badge-on-everything
   habit; they are now plain marks and the rule under each row does the
   separating. */
.hero-lists{display:grid;grid-template-columns:1fr;gap:6px 26px;margin:24px 0 0}
.alist{list-style:none;margin:0;padding:0}
.alist li{margin:0;border-bottom:1px solid var(--line-2)}
.alist li:last-child{border-bottom:0}
.alist li>a{display:flex;align-items:center;gap:10px;min-height:40px;
  color:var(--fg);font-weight:600;font-size:15.5px}
.alist .arr{width:12px;height:12px;flex:none;color:var(--amber-ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .18s var(--ease-out)}
.alist .arr svg{width:12px;height:12px}
.alist a:active .arr{transform:translateX(2px)}
@media (hover:hover) and (pointer:fine){
  .alist a:hover{color:var(--amber-ink)}
  .alist a:hover .arr{transform:translateX(2px)}
}
.alist-head{font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;
  color:var(--fg-3);font-size:13px;margin:14px 0 4px}

/* ---------------------------------------------------------------- facts */
/* Was a row of pill badges with a coloured square in each. Five true statements
   do not need five pills: they are a list, so they are set as one, with a rule
   between rows and a single amber mark. */
.chiprow{list-style:none;margin:24px 0 0;padding:0;
  border-top:1px solid var(--line)}
.chiprow{max-width:74ch}
.chiprow li{position:relative;padding:11px 0 11px 22px;
  border-bottom:1px solid var(--line-2);font-size:15px;
  font-weight:600;color:var(--fg-2)}
.chiprow li::before{content:"";position:absolute;left:0;top:19px;
  width:8px;height:8px;background:var(--amber)}

/* ---------------------------------------------------------------- locate */
/* Two ways in, side by side, split by a rule rather than boxed twice inside an
   already-tinted band. */
.locate{background:var(--bg-2);border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2)}
.locate .wrap{padding-top:46px;padding-bottom:50px}
.loc-grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:24px;
  border-top:1px solid var(--line)}
/* min-width:0 is load-bearing. A grid item defaults to min-width:auto, which
   lets it grow to its own min-content and burst out of its track. The postcode
   input carries an intrinsic width of about 236px from the default size=20, so
   at 320px this card measured 326px inside a 284px track and the Find button
   was cut in half. body{overflow-x:hidden} meant it clipped silently instead of
   scrolling, which is why it survived to here. */
.loc-card{padding:22px 0;border-bottom:1px solid var(--line);min-width:0}
.loc-card h3{margin-bottom:8px}
.loc-card p{font-size:14.5px;color:var(--fg-3);margin-bottom:14px}
/* Shown only by the <noscript> rule in head.html. See locate_panel(). */
.loc-nojs{display:none;margin-top:22px;padding:20px;border-left:4px solid var(--amber);
  background:var(--bg)}
.loc-nojs p{margin:0 0 14px}
/* Guide attribution. Quiet: it is provenance, not a headline. */
.byline{font-size:14.5px;color:var(--fg-3);margin:14px 0 0}
.byline time{white-space:nowrap}
.bio{border-left:3px solid var(--line);padding:2px 0 2px 18px;margin:0}
.bio h2{font-size:19px;margin-bottom:8px}
.bio p{margin-bottom:10px}
.loc-form{display:flex;gap:8px}
.loc-pc{flex:1;width:100%;min-width:0;min-height:52px;padding:10px 14px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--bg);color:var(--fg);
  font:600 17px var(--body);letter-spacing:.06em;text-transform:uppercase;
  transition:border-color .16s var(--ease-out)}
.loc-pc:focus{border-color:var(--amber-ink)}
.loc-pc::placeholder{color:var(--fg-3);text-transform:none;letter-spacing:0}
.loc-list{margin-top:10px;display:grid;gap:6px}
.loc-addr{display:block;width:100%;text-align:left;padding:12px 14px;min-height:48px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  color:var(--fg);font:600 15px var(--body);cursor:pointer;
  transition:transform .16s var(--ease-out),border-color .16s var(--ease-out)}
.loc-addr:active{transform:scale(.99);border-color:var(--amber-ink)}
/* The answer, when it lands, is the one thing in this band that gets a solid
   edge: it is new information arriving and it should read that way. */
.loc-result{margin-top:22px;padding:20px;border-left:4px solid var(--amber);
  background:var(--bg)}
.loc-result .btn{width:100%;margin-top:12px}
.loc-found{font-size:17px;color:var(--fg)}
.loc-found b{color:var(--amber-ink)}
.loc-wait,.loc-err,.loc-note{font-size:14.5px;color:var(--fg-2)}
.loc-err{color:#B3261E}
.loc-coords{margin-top:10px;font-size:13.5px}
.loc-coords a{color:var(--amber-ink);border-bottom:1px dotted var(--amber-ink)}

/* ---------------------------------------------------------------- cards */
/* A photograph, a name and a line. No frame, no tint, no shadow, and no lift on
   hover: the picture is the card. What marks a hover is an amber rule drawing
   itself across the foot of the photo, left to right, which costs one transform
   and reads as a deliberate mark rather than a floating box. */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;margin-top:26px}
.card{display:block;background:none;border:0;border-radius:0}
.card-img{aspect-ratio:16/10;background:var(--bg-2);position:relative;
  border-radius:var(--r);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--amber);transform:scaleX(0);transform-origin:left center;
  transition:transform .22s var(--ease-out)}
.card-body{padding:12px 0 0}
.card h3{font-size:16.5px;margin-bottom:4px}
.card p{font-size:13.5px;color:var(--fg-3);margin:0}
@media (hover:hover) and (pointer:fine){
  .card:hover .card-img::after{transform:scaleX(1)}
  .card:hover h3{color:var(--amber-ink)}
}
.card:active .card-img::after{transform:scaleX(1)}

/* Seven services in a three column grid leaves a hole in the last row. Rather
   than let it break where it falls, the service most people ring about takes
   the full width as a feature and the remaining six sit in two clean rows of
   three: 3 / 1+1+1 / 1+1+1. Every row fills, and because each row is uniform
   the titles under the photographs all sit on the same line. */
.grid-svc>.card:first-child{grid-column:1 / -1}
.grid-svc>.card:first-child .card-img{aspect-ratio:2/1}

/* Text-only cards, used by the blog index and the related strip. With the frame
   gone they need something to sit on, so they take a rule across the top. */
.card-text{border-top:2px solid var(--ink);padding-top:14px}
.card-text .card-body{padding:0}
.card-text h3{font-size:18px;line-height:1.15;margin-bottom:7px}
.card-text p{font-size:14.5px}
@media (hover:hover) and (pointer:fine){
  .card-text:hover h3{color:var(--amber-ink)}
}

/* The form surface. The one place a panel still earns a background, because a
   form needs an edge to sit inside. */
.panel{padding:22px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2)}

/* compact slot placard inside a card */
.card-slot{position:absolute;inset:0;display:flex;flex-direction:column;gap:2px;
  align-items:center;justify-content:center;text-align:center;padding:10px;
  border:2px dashed var(--amber);background:rgba(242,160,7,.10)}
.card-slot b{font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;
  color:var(--amber-ink);font-size:11px}
.card-slot code{font-size:10.5px;color:var(--fg-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all}

/* full-size slot placard (page heroes) */
.slot{display:flex;flex-direction:column;gap:4px;justify-content:center;
  min-height:150px;padding:18px;border:2px dashed var(--amber);border-radius:var(--r);
  background:rgba(242,160,7,.10);color:var(--fg-2);width:100%;margin:0;
  aspect-ratio:4/3;position:relative;z-index:2}
.slot b{font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;
  color:var(--amber-ink);font-size:14px}
.slot code{font-size:12.5px;color:var(--fg-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------------------------------------------------------------- pins (404) */
.pin{padding:11px 16px;border:1px solid var(--line);border-radius:var(--r);
  font-weight:600;font-size:15px;min-height:44px;display:inline-flex;align-items:center;
  transition:border-color .16s var(--ease-out),color .16s var(--ease-out),
             transform .16s var(--ease-out)}
.pins{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@media (hover:hover) and (pointer:fine){
  .pin:hover{border-color:var(--ink);color:var(--amber-ink)}
}
.pin:active{transform:scale(.97)}

/* ---------------------------------------------------------------- xyz token */
.xyz{display:inline-block;padding:0 7px;border:1.5px dashed var(--amber-ink);border-radius:2px;
  color:var(--amber-ink);font-weight:700;font-size:.92em;letter-spacing:.08em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------------------------------------------------------------- why us */
.why{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.why-photo{border-radius:var(--r);overflow:hidden}

/* ---------------------------------------------------------------- crumbs, faq */
.crumbs{font-size:13.5px;color:var(--fg-3);padding:13px 0;border-bottom:1px solid var(--line-2)}
.crumbs .sep{margin:0 8px}
.faqs{margin-top:24px;border-top:2px solid var(--ink)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 40px 16px 0;position:relative;
  font-weight:700;color:var(--fg);font-size:16.5px;
  transition:color .16s var(--ease-out)}
.faq summary::-webkit-details-marker{display:none}
/* One mark that rotates, rather than a plus swapped for a minus. Swapping the
   glyph is two objects crossing over; rotating one is the same object moving,
   which is what actually happened. */
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:2px;
  background:var(--amber-ink);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:8px;top:50%;width:13px;height:2px;
  background:var(--amber-ink);transform:translateY(-50%) rotate(90deg);
  transition:transform .2s var(--ease-out)}
.faq[open] summary::before{transform:translateY(-50%) rotate(0deg)}
@media (hover:hover) and (pointer:fine){
  .faq summary:hover{color:var(--amber-ink)}
}
.faq-a{padding:0 0 18px;color:var(--fg-2);max-width:70ch}
/* The answer grows into place where the browser can interpolate to auto. Where
   it cannot, it simply appears, which is the pre-existing behaviour. */
@supports (interpolate-size:allow-keywords){
  html{interpolate-size:allow-keywords}
  .faq::details-content{block-size:0;overflow:hidden;opacity:0;
    transition:block-size .22s var(--ease-out),opacity .18s var(--ease-out),
               content-visibility .22s allow-discrete}
  .faq[open]::details-content{block-size:auto;opacity:1}
}

/* ---------------------------------------------------------------- cta band */
/* The closing band used to run copy down the left and leave the right half of a
   solid orange strip empty. The number fills it, which is the same move the
   hero makes and the thing a caller actually needs at the foot of the page. */
.cta-band{background:var(--amber)}
.cta-band .wrap{padding-top:48px;padding-bottom:52px;
  display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.cta-band p{max-width:52ch}
.cta-band .bignum a,.cta-band .bignum .pending{color:var(--ink)}
.cta-band .bignum-sub{color:#4A4136}
.cta-band .bignum .pending{border-color:var(--ink)}
/* an amber button on an amber band is invisible, so the roles swap here */
.cta-band .btn-amber{background:var(--ink);color:#fff}
.cta-band .btn-ghost{background:rgba(255,255,255,.30);color:var(--ink);
  border-color:rgba(22,19,15,.45)}
@media (hover:hover) and (pointer:fine){
  .cta-band .btn-amber:hover{background:#000}
  .cta-band .btn-ghost:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
}

/* ---------------------------------------------------------------- footer */
footer{background:var(--ink);color:#B9B1A5;padding:46px 0 26px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:26px}
.foot-brand .wordmark b{font-size:22px}
.foot-blurb{margin:12px 0 14px;color:#9F978B;max-width:38ch;font-size:14.5px}
.foot-col h3{font-size:13px;letter-spacing:.16em;color:var(--amber);margin-bottom:10px}
.foot-col a{display:block;padding:6px 0;color:#B9B1A5;min-height:32px;
  transition:color .16s var(--ease-out)}
.foot-col a:hover{color:#fff}
.nap{font-size:14.5px}
.nap-line{display:flex;align-items:flex-start;gap:9px;margin:0 0 8px}
.nap-line svg{width:15px;height:15px;color:var(--amber);flex:none;margin-top:4px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;color:#8B8377}

/* ---------------------------------------------------------------- mobile bar */
.mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
  box-shadow:0 -6px 20px rgba(0,0,0,.28)}
.mb-call,.mb-loc{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:58px;font:700 16px var(--body);border:0;cursor:pointer;
  transition:transform .16s var(--ease-out)}
.mb-call{background:var(--amber);color:var(--on-amber)}
.mb-call.is-pending{background:var(--ink);color:var(--amber);border-top:2px dashed var(--amber)}
.mb-loc{background:var(--ink-3);color:#fff;border-top:2px solid var(--amber)}
.mb-call:active,.mb-loc:active{transform:scale(.98)}
.mb-call svg,.mb-loc svg{width:19px;height:19px}

/* ---------------------------------------------------------------- 404 */
.notfound{text-align:center;padding:64px 0 40px}
.notfound .code{font-family:var(--disp);font-size:clamp(80px,20vw,160px);line-height:.85;
  color:var(--amber-ink);margin:0 0 14px}
.notfound .eyebrow::before{margin-left:auto;margin-right:auto}
.cta-center{align-items:center}

/* ---------------------------------------------------------------- desktop */
@media (min-width:781px){
  body{padding-bottom:0}
  .mbar{display:none}
  .sec{padding:72px 0}
  .wrap{padding:0 22px}
  .navlinks{display:flex;gap:22px}
  .navlinks a{padding:6px 1px;border-bottom:2px solid transparent;
    transition:color .16s var(--ease-out),border-color .16s var(--ease-out)}
  .navlinks a:hover,.navlinks a.on{color:#fff;border-color:var(--amber)}
  .hamb{display:none}
  .nav{min-height:74px;gap:24px}
  .logo{height:58px}
  .hero .wrap{padding-top:48px;padding-bottom:54px;max-width:var(--wrap)}
  .hero.is-photo .wrap{padding-top:96px;padding-bottom:104px}
  .hero.is-photo .hero-copy{max-width:660px}
  /* Left to right now: the copy sits left, so the photograph keeps its right
     side. The vertical pass underneath stops the top of the picture washing
     out against the near-black header. */
  .hero.is-photo .hero-bg::after{
    background:linear-gradient(90deg,rgba(12,11,10,.92) 0%,rgba(12,11,10,.84) 44%,
      rgba(12,11,10,.36) 74%,rgba(12,11,10,.22) 100%),
      linear-gradient(180deg,rgba(12,11,10,.45) 0%,rgba(12,11,10,0) 38%)}
  .hero-copy{max-width:640px}
  .cta-row{flex-direction:row;flex-wrap:wrap;margin-top:22px}
  .cta-row .btn{width:auto}
  .hero-lede{font-size:18.5px}
  .hero-lists{grid-template-columns:1fr 1fr;gap:4px 56px;margin-top:30px}
  .alist-head{margin-top:0}
  .loc-grid{grid-template-columns:1fr 1fr;column-gap:40px;align-items:start}
  .loc-card{padding:24px 0}
  .loc-card:first-child{padding-right:40px;border-right:1px solid var(--line)}
  .loc-result .btn{width:auto}
  .grid{grid-template-columns:repeat(4,1fr);gap:28px 22px}
  .grid-svc{grid-template-columns:repeat(3,1fr)}
  .grid-svc>.card:first-child{margin-bottom:6px}
  .grid-svc>.card:first-child .card-img{aspect-ratio:3/1}
  .grid-svc>.card:first-child h3{font-size:24px}
  .grid-svc>.card:first-child p{font-size:15.5px}
  .card h3{font-size:18px}
  .card p{font-size:14px}
  .why{grid-template-columns:360px 1fr;gap:40px}
  .cta-band .wrap{grid-template-columns:1.15fr .85fr;gap:48px}
  .cta-band .cta-num{justify-self:end;text-align:right}
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
  .foot-col a{padding:5px 0;min-height:0}
  h1{font-size:clamp(32px,3.7vw,54px)}
}
@media (min-width:960px){
  .hero .wrap{grid-template-columns:1.06fr .94fr;gap:48px;
    padding-top:56px;padding-bottom:62px}
  .hero-photo img{aspect-ratio:5/4}
  .slot{aspect-ratio:5/4}
}

/* Reduced motion means less movement, not none. Colour and opacity still
   change, because those carry meaning: what goes is anything that travels. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
  .btn,.pill,.mb-call,.mb-loc,.loc-addr,.pin{transition:background-color .16s linear,
    color .16s linear,border-color .16s linear}
  .btn:active,.pill:active,.mb-call:active,.mb-loc:active,.pin:active,
  .loc-addr:active{transform:none}
  .card-img::after{transition:opacity .16s linear;transform:scaleX(1);opacity:0}
  .card:hover .card-img::after,.card:active .card-img::after{opacity:1}
  .alist .arr,.faq summary::before{transition:none}
  .nav-open .navlinks{transition:opacity .16s linear;transform:none}
  .faq::details-content{transition:opacity .16s linear}
}

/* ---------------------------------------------------------------- prose */
/* Long-form pages: service, area, guide and blog. Body copy is capped at a
   readable measure, because .wrap alone is 1140px and a full-width paragraph
   is unreadable on a laptop.

   The cap goes on the children, not on .wrap itself. Putting it on the wrap
   narrowed the whole column and, because .wrap is centred, shunted every prose
   section inwards while the grids and FAQ sections stayed put. The page then
   had two different left edges down its length. */
.prose>*{max-width:68ch}
.prose>h2{margin-top:44px}
.prose>h3{margin:32px 0 8px}
.prose>h2:first-child,.prose>h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 15px;padding-left:21px}
.prose li{margin-bottom:7px}
.prose a{color:var(--amber-ink);font-weight:600}
.prose a:hover{text-decoration:underline}
.ticks{list-style:none;padding:0}
.ticks li{position:relative;padding-left:24px}
.ticks li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;
  background:var(--amber)}
.callout{margin:26px 0;padding:2px 0 2px 20px;border-left:4px solid var(--amber);
  background:none;border-radius:0}
.callout h3{margin-bottom:6px}
.callout p{max-width:64ch}
.callout p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- steps */
/* Three numbered boxes became three numbered columns. The numeral is set as
   type in the display face rather than dropped into a coloured badge, and a
   rule across the top of each does the separating a border used to do. */
.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;
  border-bottom:1px solid var(--line)}
.steps li{position:relative;padding:18px 0 22px;border-top:1px solid var(--line)}
.steps li:first-child{border-top:2px solid var(--ink)}
.step-n{display:block;font:700 34px/1 var(--disp);color:var(--amber-ink);
  margin-bottom:10px;letter-spacing:.02em}
.steps h3{margin-bottom:6px}
.steps p{margin:0;font-size:15.5px;color:var(--fg-3);max-width:44ch}
.coverage{margin-top:28px;font-size:15px;color:var(--fg-3);max-width:72ch}

@media (min-width:781px){
  .steps{grid-template-columns:repeat(3,1fr);column-gap:32px;border-bottom:0}
  .steps li{border-top:2px solid var(--ink);padding-top:16px}
  .steps li:first-child{border-top:2px solid var(--ink)}
}

/* Sixteen town names, set as names rather than sixteen pills. */
.townlist{list-style:none;margin:14px 0;padding:0;display:flex;flex-wrap:wrap;
  gap:4px 0;font-size:15px;color:var(--fg-2)}
.townlist li{display:inline-flex;align-items:center}
.townlist li:not(:last-child)::after{content:"";width:4px;height:4px;
  background:var(--amber);margin:0 12px}

/* ---------------------------------------------------------------- quote form */
.qform .field{display:block;margin:0 0 14px}
.qform label{display:block;font-weight:700;color:var(--fg);font-size:14.5px;margin-bottom:6px}
.qform input{width:100%;min-height:50px;padding:0 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg);color:var(--fg);
  font:16px var(--body);transition:border-color .16s var(--ease-out)}
.qform input:focus{border-color:var(--amber-ink)}
.qform input::placeholder{color:var(--fg-3);opacity:.7}
.qform .hp{position:absolute;left:-9999px}

/* Keep descriptive emergency/transport actions usable on narrow phones. */
.mb-call,.mb-loc{min-width:0;padding:10px 12px;text-align:center;line-height:1.25}
.mb-call svg,.mb-loc svg{flex-shrink:0}
.analytics-settings{font:inherit;color:inherit;background:none;border:0;text-decoration:underline;cursor:pointer;padding:8px}
.analytics-choice{position:fixed;z-index:100;bottom:80px;left:18px;right:18px;max-width:540px;
  padding:20px;background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:0 6px 30px #0005;
  max-height:calc(100dvh - 108px);overflow:auto}
.analytics-choice[hidden]{display:none}
.analytics-choice h2{color:var(--ink);font-size:26px;margin:0 0 10px}
.analytics-choice p{font-size:14px;line-height:1.5;margin:8px 0}
.analytics-choice a{color:var(--ink);text-decoration:underline}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.consent-actions button{flex:1;min-height:44px;padding:10px;background:var(--amber);color:var(--ink);
  border:1px solid var(--ink);font:700 14px var(--body);cursor:pointer}
@media(min-width:781px){.analytics-choice{bottom:24px;left:24px}}