/* Transport & Logistics Hub — site styles.
   Taken from the approved design file (tlh-homepage_2.html).
   Blue/white, Barlow + Barlow Condensed.

   Only additions below the marked line: honeypot hiding, form error state,
   and the folded-in "Driving with us" note. Nothing in the approved design
   has been restyled. */

:root{
  --bg:#ffffff; --panel:#f3f6fa; --panel2:#e7edf4; --line:#dde3ea; --line2:#cbd6e2;
  --ink:#16222f; --mut:#42536a; --dim:#5b6c80; --faint:#77879a; --ghost:#9aa9ba;
  /* Logo blue family, sampled from the official logo (AJ, 16/09).
     --accent      brand blue, for DECORATION and large display type only.
                   On white it measures 3.50:1 — fine for rules, icons and 28px+
                   headings (AA large = 3:1), NOT for body-sized text.
     --accent-deep the readable member of the same family: 4.61:1 BOTH ways, so it
                   serves white-on-blue (buttons) and blue-on-white (links) alike.
                   Same hue (201.6deg) and saturation as the logo, L 45%->39%.
     --accent-hi   lighter highlight, decoration only.
     --accent-deep-hi darker hover for buttons, 4.89:1. */
  --accent:#1090d8; --accent-hi:#28a0d8;
  --accent-deep:#0e7bb9; --accent-deep-hi:#0d77b2;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Barlow','Helvetica Neue',Arial,sans-serif; font-size:16px; line-height:1.55;}
img{max-width:100%; height:auto;}
h1,h2,h3{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif; margin:0; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance;}
/* Link text uses the DEEP shade: the brand blue itself is 3.50:1 on white and would
   fail AA at body size. Hover goes to the brand blue, which is acceptable because
   hover is a transient state on already-identified text. */
a{color:var(--accent-deep); text-decoration:none;} a:hover{color:var(--accent);}
.wrap{max-width:1180px; margin:0 auto; padding-inline:24px;}
.btn{display:inline-block; background:var(--accent-deep); color:#ffffff; font-weight:600; border-radius:3px; padding:14px 30px; font-size:16px;}
.btn:hover{background:var(--accent-deep-hi); color:#ffffff;}
.kick{display:flex; gap:10px; align-items:center; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600;}
.kick::before{content:""; width:32px; height:4px; background:var(--accent); flex:none;}

header{border-bottom:1px solid var(--line); position:sticky; top:env(safe-area-inset-top,0px); background:var(--bg); z-index:5;}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:18px; flex-wrap:wrap;}
/* .logo is now purely a layout box around the logo IMAGE. The old type styles
   (Barlow Condensed 23px uppercase, with .logo b tinting "Hub") described the text
   wordmark that the real logo replaced — inert once there is no text inside, so they
   are gone rather than left to mislead the next person editing this file. */
.logo{display:flex; align-items:center;}
/* The logo is an IMAGE now. Width-sized per AJ's brief: 210px displayed from a 640px
   native file is ~3x density, so it stays sharp on a retina screen. The intrinsic
   width/height attributes in the markup reserve the right box before the image loads,
   so the header does not jump. Narrow phones step it down so the nav stays one line. */
.logo img{display:block; width:210px; height:auto; max-width:100%;}
footer .logo img{width:170px;}
@media (max-width:560px){ .logo img{width:150px;} footer .logo img{width:140px;} }
/* The nav is a real <ul> now, because the Services item carries a nested list.
   Dropdown on hover AND focus-within, so it opens for keyboard users too — no JS,
   no framework, consistent with the rest of this build. */
.nav-links{font-size:15px; font-weight:500;}
.nav-list{display:flex; gap:26px; align-items:center; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
.nav-list > li{position:relative;}
/* :not(.btn) is LOAD-BEARING. `.nav-links a` is specificity (0,1,1) and `.btn` is
   (0,1,0), so this rule outranked the button's own colour no matter what order they sat
   in — the header "Get a Quote" rendered --mut slate on the solid blue fill, effectively
   unreadable, and had done since the header button existed. Source order cannot fix a
   specificity loss; excluding buttons from the nav-link colour can.

   The hero's Get a Quote was always fine because it sits outside .nav-links, which is
   exactly why the bug looked like a header-only mystery. */
.nav-links a:not(.btn){color:var(--mut);} .nav-links a:not(.btn):hover{color:var(--ink);}
.nav-list .sub{
  list-style:none; margin:0; padding:8px 0; position:absolute; top:100%; left:-14px;
  min-width:232px; background:var(--bg); border:1px solid var(--line2); border-radius:4px;
  box-shadow:0 10px 28px rgba(16,34,47,.13); display:none; z-index:20;
}
.nav-list .sub li{display:block;}
.nav-list .sub a{display:block; padding:9px 18px; white-space:nowrap; color:var(--mut);}
.nav-list .sub a:hover{background:var(--panel); color:var(--ink);}
.has-sub:hover > .sub, .has-sub:focus-within > .sub{display:block;}
/* On a phone there is no hover: the group flattens and the sub-list sits inline,
   which is better than a tap-to-open menu that needs script to close again. */
@media (max-width:700px){
  /* The header SCROLLS AWAY on phones (AJ, 2026-09-17). Sticky, it measured 248px at
     390px wide and 285px at 360px — 29-34% of the screen held permanently, on every
     page, for a menu you need once. Desktop keeps position:sticky, where the same
     header costs one short row and the screen is wide enough to spare it.

     Safe to unstick here specifically because the dropdown above is ALREADY static at
     this width and flattens into the flow: nothing in the header is absolutely
     positioned below 700px, so losing z-index (which only applies to positioned
     elements) leaves nothing that needed to paint above the page. The `top:` on the
     base rule is simply ignored once position is static. */
  header{position:static;}
  .nav-list{gap:14px 18px;}
  .nav-list .sub{position:static; display:flex; flex-wrap:wrap; gap:0 14px; min-width:0;
    border:0; box-shadow:none; padding:0; background:none;}
  .nav-list .sub a{padding:0; font-size:14px; color:var(--dim);}
}
.nav-links .btn{padding:10px 20px; font-size:15px;}

/* ── HERO: photo overlay ──────────────────────────────────────────────────────
   Copy + CTA sit over the DARKENED LEFT of the banner; the prime mover stays
   prominent and unobstructed on the right. Scoped to the hero only — nothing
   below it changes.

   The gradient is OURS, not baked into the file: the supplied -text-left variant
   darkens the left by roughly 20-30% over bright sky and pale concrete, which is
   nowhere near enough for white text. This one runs to 0.82 alpha at the far left
   and is tuned so white body copy clears WCAG AA against the darkest band it
   actually sits on. On narrow screens the gradient becomes near-solid top-to-
   bottom, because there is no "left" to hide in once the layout stacks. */
.hero{position:relative; border-bottom:1px solid var(--line); overflow:hidden; isolation:isolate;}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
          object-position:72% 50%;  /* hold the cab on screen as the box narrows */
          z-index:0;}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(8,20,30,.88) 0%, rgba(8,20,30,.80) 26%,
    rgba(8,20,30,.55) 46%, rgba(8,20,30,.12) 66%, rgba(8,20,30,0) 82%);}
.hero > .wrap{position:relative; z-index:2;}
.hero-copy{flex:1 1 480px; padding-block:96px; display:flex; flex-direction:column; gap:26px; justify-content:center; max-width:660px;}
.hero-copy h1{font-size:clamp(42px,6vw,74px); line-height:.98; font-weight:700; color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.45);}
.hero-copy h1 b{color:var(--accent-hi); font-weight:700;}  /* lighter member of the family — on dark, not white */
.hero-copy .kick{color:rgba(255,255,255,.82);}
.hero-copy .kick::before{background:var(--accent-hi);}
.hero-copy p{font-size:19px; color:rgba(255,255,255,.92); max-width:560px; margin:0;
  text-shadow:0 1px 10px rgba(0,0,0,.4);}
.hero-cta{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.hero-cta .hero-call{color:rgba(255,255,255,.86);}
.hero-cta .hero-call b{color:#fff;}
/* Both numbers are tel: links sitting ON the hero photo. The global link colour
   (--accent-deep, chosen for dark-on-WHITE) would be unreadable here, so they are
   white with the lighter brand blue on hover. Each name+number is nowrap so a
   number can never break mid-digits; the span itself is allowed to wrap, which is
   what lets the pair drop cleanly under the Get a Quote button on a phone. */
.hero-cta .hero-call a{color:#fff; white-space:nowrap; text-decoration:none;
                       border-bottom:1px solid rgba(255,255,255,.35);}
.hero-cta .hero-call a:hover{color:var(--accent-hi); border-bottom-color:var(--accent-hi);}
@media (max-width:820px){
  .hero-copy{padding-block:64px;}
  .hero::after{background:linear-gradient(175deg,
    rgba(8,20,30,.86) 0%, rgba(8,20,30,.78) 55%, rgba(8,20,30,.62) 100%);}
}
.hero-photo{flex:1 1 380px; min-height:340px; background:var(--panel2); border-left:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ghost); text-align:center;}
.ph-label{font-size:13px; margin-top:10px; letter-spacing:.08em; text-transform:uppercase;}

.trust{display:flex; justify-content:space-between; gap:24px; padding-block:28px; border-bottom:1px solid var(--line); background:var(--panel); flex-wrap:wrap;}
.trust > div{display:flex; flex-direction:column; gap:2px; min-width:150px;}
.trust .big{font-family:'Barlow Condensed',Arial,sans-serif; font-size:28px; font-weight:700; color:var(--accent); text-transform:uppercase;}
.trust .small{font-size:12.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em;}

section{padding-block:80px;}
.sec-h{margin-bottom:38px; display:flex; flex-direction:column; gap:12px;}
.sec-h h2{font-size:clamp(30px,4vw,42px); font-weight:700;}
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;}
/* Photo header on each card. Fixed 16:9 box so all six align on a row regardless
   of source aspect; the derivative is already cropped to 16:9, so object-fit has
   nothing left to butcher. Padding moves to an inner body so the photo can go
   edge-to-edge under the card's rounded top. */
.svc{border:1px solid var(--line2); border-radius:4px; background:var(--panel); display:flex; flex-direction:column; overflow:hidden;}
/* STANDING POLICY (AJ, 2026-09-16): the vehicle must be FULLY in frame — cab,
   tray/trailer, wheels, ground line. Sacrifice sky, never the truck — and never the
   WIDTH. That means container height is chosen PER SLOT, never one ratio forced
   across sources of different shapes: forcing 4:5 onto the five landscape cards made
   the pipeline centre-trim 290px off each side, which is precisely the blind crop the
   rule exists to prevent.
   Baseline 16:9 suits the five landscape sources at full width. */
.svc-photo{aspect-ratio:16/9; width:100%; display:block; overflow:hidden; background:var(--panel2); border-bottom:1px solid var(--line);}
/* The --tall variant is gone: tlh-r2-02 (the portrait crane lift that needed it) was
   replaced by a landscape low-loader shot that fits the 16:9 baseline with the whole rig
   in frame. All six cards are uniform height again — the taller card was always a
   concession to one awkward source, not a design goal. (That low-loader shot is now
   tlh-r2-11, a 1672x941 original; it superseded the 680px tlh-r2-10 on 17/09. Named by
   slot rather than by file here, so the next photo swap does not strand this comment.) */
/* Depot line: one wording, two lengths, swapped by width rather than re-assembled. */
.depot-short{display:none;}
@media (max-width:560px){ .depot-long{display:none;} .depot-short{display:inline;} }
.svc-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.svc-body{padding:24px 26px 26px; display:flex; flex-direction:column; gap:11px;}
.svc:hover{border-color:var(--accent);}
.svc h3{font-size:21px;}
.svc p{font-size:15px; color:var(--dim); margin:0;}
.svc svg{width:28px; height:28px; stroke:var(--accent); fill:none; stroke-width:1.8;}

/* Band: the source is a 2079x756 panorama (2.75:1). The old fixed 340px height
   with object-fit:cover would have thrown away the top and bottom of a picture
   whose whole point is its length — a strip of sky and tarmac. Honour the native
   ratio instead and let height follow width. */
.band-photo{aspect-ratio:2079/756; background:var(--panel2); border-block:1px solid var(--line); overflow:hidden;}
/* .gallery / .g-tile rules intentionally removed with the gallery section —
   see the reinstatement note in content/index.html. */
.why{background:var(--panel); border-block:1px solid var(--line);}
.why-inner{display:flex; gap:48px; flex-wrap:wrap;}
.why-copy{flex:1 1 380px; display:flex; flex-direction:column; gap:14px;}
.why-copy h2{font-size:clamp(28px,3.5vw,38px);}
.why-copy p{color:var(--dim); margin:0;}
.why-list{flex:1 1 380px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.why-item{display:flex; gap:12px; align-items:flex-start;}
.why-item::before{content:""; width:8px; height:8px; background:var(--accent); margin-top:7px; flex:none;}
.why-item b{color:var(--ink); font-size:16px; display:block;}
.why-item span{font-size:14px; color:var(--dim);}

/* MEET THE TEAM. Three portraits in one row with names underneath (AJ, 17/09 — approved
   wireframe). Borrows the .svc conventions rather than inventing a second card style:
   same var(--line2) hairline, 4px radius, var(--panel2) placeholder ground and 20px
   gutter as .svc-grid.

   THREE ACROSS AT EVERY WIDTH (AJ, 17/09 — revised wireframe). There is deliberately NO
   media query touching this grid: the row must never stack, so the gap and the caption
   type scale with clamp() instead, keeping three faces legible on a 390px phone rather
   than reflowing them into a column. build_check enforces this — it refuses any build
   whose compiled CSS declares .team-grid columns more than once, or inside a @media
   block, because a single stray breakpoint would silently undo the whole design.

   aspect-ratio:3/4 MATCHES the sources (1086x1448) exactly, so object-fit:cover has
   nothing to trim and no head is clipped at any width. <figure> needs margin:0 — the UA
   stylesheet gives it 1em 40px, which would break the grid gutter. */
.team-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:clamp(8px,2.5vw,28px);}
.team-member{margin:0; display:flex; flex-direction:column; gap:12px;}
.team-photo{aspect-ratio:3/4; overflow:hidden; background:var(--panel2);
  border:1px solid var(--line2); border-radius:4px;}
.team-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.team-member figcaption{text-align:center; font-weight:600; color:var(--ink);
  font-size:clamp(11px,1.8vw,18px); line-height:1.25;}

.quote{display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap;}
.quote-copy{flex:1 1 340px; display:flex; flex-direction:column; gap:12px;}
.quote-copy h2{font-size:clamp(28px,3.5vw,40px);}
.quote-copy p{color:var(--dim); margin:0;}
/* Concrete blocks photo in the quote column (AJ, 20/09) — capped so it fills the gap
   beside the form WITHOUT stretching the section, which was the stated requirement.

   Measured at 1440x900 before this rule: the left column is 226px against a 663px form,
   so the gap is 437px — but the photo at full column width renders 526x660 and pushed
   #quote from 823px to 1065px (+242px), making the copy column taller than the form.
   Capping the height lets it scale down proportionally to about 335x420, so the FORM
   still sets the section height and nothing is cropped.

   The alternative — filling the column width — means a landscape crop, and the subject
   runs diagonally (trailer tail bottom-left, prime mover top-right), so any such crop
   cuts the prime mover out of frame and contradicts the approved alt text. Not done.

   width:auto is needed because the global rule is img{max-width:100%; height:auto}: with
   only a max-height the flex layout can hold the width and distort the aspect.

   display:block matches every other image rule in this file (.svc-photo img, .team-photo
   img, .prose-figure img) and is LOAD-BEARING here: an inline <picture> carries a ~7px
   baseline descender beneath it, and with the cap alone the column still measured 670px
   against a 663px form — stretching the section by exactly that phantom gap. Removing the
   cause beat shaving the number.

   Scoped to .quote-copy, so no other image on the site is affected. On phones it is NOT
   quite a no-op: the stacked photo goes from 342x429 to 335x420, which is imperceptible
   but worth stating accurately. */
.quote-copy img{max-height:420px; width:auto; display:block;}
.quote-form{flex:1 1 380px; background:var(--panel); border:1px solid var(--line2); border-radius:4px; padding:28px; display:flex; flex-direction:column; gap:14px;}
.quote-form label{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:600; display:flex; flex-direction:column; gap:6px;}
.quote-form input, .quote-form textarea{background:var(--bg); border:1px solid var(--line2); border-radius:3px; color:var(--ink); font-family:inherit; font-size:15px; padding:12px;}
.quote-form input:focus, .quote-form textarea:focus{outline:2px solid var(--accent); outline-offset:0;}
.contact-line{font-size:15px; color:var(--dim);}
.contact-line b{color:var(--ink);}

footer{border-top:1px solid var(--line); padding-block:36px 48px; display:flex; justify-content:space-between; gap:24px; font-size:14px; color:var(--faint); flex-wrap:wrap;}
.f-brand{display:flex; flex-direction:column; gap:6px;}
/* footer .logo img carries the sizing now; font-size did nothing once the wordmark
   became an image. */
.f-links{display:flex; gap:28px; flex-wrap:wrap;}
.f-links a{color:var(--faint);} .f-links a:hover{color:var(--ink);}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }

/* ============ ADDITIONS (not in the approved design) ============ */

/* Honeypot. Moved off-screen rather than display:none - bots skip
   display:none fields, which defeats the point. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* Form failure message - only shown when the relay cannot be reached. */
.q-error{
  margin:0; padding:12px 14px; border-radius:3px;
  background:#fdecec; border:1px solid #e0b4b4; border-left-width:4px;
  color:#8c2f2f; font-size:14px;
}

/* "Driving with us" - the folded-in Join Us copy. */
.join-note{padding-top:6px; border-top:1px solid var(--line2); font-size:15px;}
.join-note b{color:var(--ink);}

/* The [hidden] attribute must beat the author display rules below, or the form
   stays visible next to the "Request received" panel after submitting. */
[hidden]{display:none !important;}

/* Photos filling the approved design's image slots. The slot boxes keep their
   original dimensions; the images cover them so nothing is letterboxed. */
.band-photo{padding:0; overflow:hidden;}
.band-photo img{width:100%; height:100%; object-fit:cover; display:block;}
/* Built for builders: supporting image alongside the existing copy. The section
   is already a two-column flex (.why-inner), so this drops into the existing
   structure as a third flex child rather than forcing a redesign. */
.why-photo{flex:1 1 320px; align-self:flex-start; border:1px solid var(--line2); border-radius:4px; overflow:hidden; background:var(--panel2);}
/* NO hard-coded ratio here. The container must follow the IMAGE, per standing policy:
   this box carried aspect-ratio:3/2 from the builders crop's first incarnation, and once
   that crop was re-anchored to 16:9 the mismatch made object-fit:cover silently re-crop
   the very truck the re-anchor existed to save — invisible to every file-level check,
   because the derivative on disk was correct and only the RENDER was wrong.
   height:auto lets the img's own width/height attributes set the box. */
.why-photo img{width:100%; height:auto; display:block;}

/* Skip link for keyboard users. */
.skip{position:absolute; left:-9999px; background:var(--accent-deep); color:#fff; padding:10px 16px; z-index:100;}

/* ── Service pages ────────────────────────────────────────────────────────────
   Extends the approved homepage language — same tokens, same type, no new design
   system. Only the page furniture the homepage never needed. */

/* Breadcrumb sits above the hero, on white, so it uses ordinary link colours. */
.crumb{max-width:1180px; margin:0 auto; padding:14px 24px 0; font-size:13px; color:var(--faint);}
.crumb a{color:var(--accent-deep);}
.crumb span[aria-hidden]{margin:0 6px; color:var(--ghost);}

/* A service hero is shorter than the homepage's — it introduces one service rather
   than carrying the whole brand statement. Same photo + gradient treatment, so the
   measured white-text contrast from the homepage applies unchanged. */
.hero--page .hero-copy{padding-block:62px; max-width:620px;}
.hero--page .hero-copy h1{font-size:clamp(34px,4.6vw,54px);}
.hero--page .hero-copy p{font-size:18px;}
/* Service heroes need a STRONGER left ramp than the homepage. Measured, not assumed:
   the homepage banner gives white text 6.02:1 on the headline and 7.13:1 on body copy,
   but these are different photographs and three of them are brighter where the copy
   sits — steel 4.34:1, interstate 4.37:1, oversize 4.31:1, all short of the 4.5:1 that
   the 18px lede needs (the bold h1 only needs 3.0, so it passed throughout).
   Raising the ramp fixes it in one place rather than re-grading six images, and the
   truck stays unobstructed on the right because the extra density is all left of 46%. */
.hero--page::after{
  background:linear-gradient(100deg,
    rgba(8,20,30,.93) 0%, rgba(8,20,30,.88) 26%,
    rgba(8,20,30,.66) 46%, rgba(8,20,30,.16) 66%, rgba(8,20,30,0) 82%);
}
@media (max-width:820px){
  .hero--page::after{background:linear-gradient(175deg,
    rgba(8,20,30,.90) 0%, rgba(8,20,30,.84) 55%, rgba(8,20,30,.68) 100%);}
}

/* Body copy. Measured column width — long lines are the main readability failure
   on a text page, and the homepage never had a prose block to constrain. */
.prose{max-width:820px; padding-block:54px 64px;}
.prose h2{font-size:clamp(23px,2.6vw,30px); margin:34px 0 12px;}
.prose h2:first-of-type{margin-top:0;}
.prose p{color:var(--dim); margin:0 0 16px; font-size:17px;}
.prose-figure{margin:30px 0; }
.prose-figure img{width:100%; height:auto; display:block; border:1px solid var(--line2); border-radius:4px;}
.prose-figure figcaption{font-size:13px; color:var(--faint); margin-top:9px;}
/* Fleet & capacity spec lists REUSE .why-list/.why-item from the homepage rather than
   introducing a second list style — same accent square, same label/value pairing. The grid
   (auto-fit minmax(220px,1fr)) stands on its own outside .why-inner and drops to a single
   column well before 390px. Only the margins are new: .why-list carries none of its own
   because on the homepage its flex parent supplies the spacing. */
.prose .why-list{margin:20px 0 28px;}

/* Flat (photo-less) page header, used by /about/. Every supplied landscape photo large
   enough for a 100vw hero is already the hero of another page, and the two that are not
   are natively 1086w and 680w — tlh-r2-09 is PORTRAIT (1086x1448), so its 16:9 crop
   cannot go wider without upscaling, which this repo does not do. A flat header is
   honest; a soft, stretched photograph is not. Same .hero-copy type as every other
   header, so nothing new is introduced visually. ::after is suppressed because it exists
   to darken a photograph and there is no photograph here. */
.hero--flat{background:var(--ink);}
.hero--flat::after{display:none;}
.prose-cta{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:34px;
  padding-top:26px; border-top:1px solid var(--line);}
.prose-cta span{color:var(--mut); font-size:15px;}

/* 404. Branded, and deliberately a list of real destinations rather than a dead end. */
.notfound{padding-block:70px 80px;}
.notfound h1{font-size:clamp(30px,4vw,44px); margin:6px 0 14px;}
.notfound-links{list-style:none; padding:0; margin:22px 0 0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px 22px;}
.notfound-links a{display:block; padding:11px 14px; border:1px solid var(--line2);
  border-radius:4px; background:var(--panel); color:var(--accent-deep);}
.notfound-links a:hover{border-color:var(--accent); background:var(--panel2);}

/* Card headings became links when the six cards started pointing at these pages.
   Inherit the heading colour so the card doesn't suddenly read as a link farm. */
.svc h3 a{color:inherit;}
.svc h3 a:hover{color:var(--accent-deep);}
.skip:focus{left:8px; top:8px;}

/* "Common questions" blocks. Plain h3 + p, always visible (no accordion), because the
   FAQPage schema is BUILT from this markup and Google wants the answers on the page.
   build.py requires exactly one <p> after each <h3> inside <div class="faq">. */
.faq{margin-top:34px; padding-top:26px; border-top:1px solid var(--line);}
.faq h3{font-size:20px; color:var(--ink); margin:22px 0 6px;}
.faq h2 + h3{margin-top:4px;}

/* Footer "What we carry" row: its own full-width line under the brand and links. */
.f-carry{flex-basis:100%; gap:8px 22px; padding-top:14px; border-top:1px solid var(--line);}
.f-carry span{color:var(--mut); font-weight:600;}

/* Google Ads privacy line: hidden while site.json ads_note is empty. */
.ads-note:empty { display: none; }