/* Talon Towing β Guardian terminal template, refined. Mobile-first. One file. */
/* ===========================================================================
EUROSTILE β ACTIVE since 2026-10-01 (04-web-bay-2). Kit `fpz4xig`.
Guardian's brand standards (GFS_Brand_Standards_0326.pdf p.15, filed at
Talon/assets-from-gfs-20260923-markup/) name Eurostile as the brand's PRIMARY
typeface and Montserrat as the SECONDARY face for body copy. This closes
Markup pin #55 (Hannah O'Shea: the display face is wrong).
THERE IS NO @import HERE, BY DESIGN. An @import nested inside this stylesheet
is render-blocking one level deep β runbook A6 says load the kit by
with preconnect instead. The kit is enqueued in functions.php (handle
`talon-typekit`, enqueued BEFORE `talon`) and the two preconnects are added
through `wp_resource_hints`. The old commented-out
`@import url("https://use.typekit.net/pkc5pgn.css");` line that lived here has
been DELETED outright, not re-commented β two gates in a row had to correct the
record about whether it was live, and a line that is not there cannot be
misread a third time.
π΄ KIT ID CHANGED, AND THE NEW KIT IS SMALLER. Every Talon document before
today says the kit is `pkc5pgn` (8 faces: eurostile 400/700/800/900 roman +
italic, the kit live on guardianfleetservice.com). Mary Skinner sent
`fpz4xig` on 2026-10-01 14:34 ET as the kit for this site; it was published
the same day at 18:20:52 UTC and carries FOUR faces only β 400 and 700,
roman + italic. There is no 800 and no 900, so Eurostile Black Italic β the
face the brand book names for headlines β IS NOT IN THIS KIT. Flagged to GFS.
This theme asks for 600 and 700 only, both of which resolve to eurostile 700
under CSS font matching, so nothing here is synthetically bolded.
FALLBACK CHAIN (unchanged below, and deliberate): eurostile β 'Chakra Petch'
(self-hosted, preloaded in header.php, SIL OFL) β 'Arial Narrow' β Arial β
sans-serif. If Adobe is slow, blocked or down the page renders Chakra Petch
and is still correct. NOTE: Adobe serves its own faces with `font-display:auto`,
which is block-then-swap β that setting lives in GFS's Adobe web project, not
in our CSS, and `swap` is the one thing to ask them to change.
=========================================================================== */
/* Fonts β self-hosted (assets/fonts/, SIL OFL, latin subsets). Chakra Petch = the squared display face in Guardian's own theme
file; Montserrat = the template's body face, one variable file for every weight. Nothing loads from Google Fonts. */
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/chakra-petch-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat-var.woff2') format('woff2'); }
/* ---------------------------------------------------------------------------
BRAND COLOUR β sourced from GFS_Brand_Standards_0326.pdf, "BRAND COLORS / PRINT".
The book's six: Guardian Red #DB202E (PMS 1795 C) Β· Fleet Red #ED2127 (PMS Red
032 C) Β· Black #000000 Β· Steel Gray #3D3C38 Β· Highway Gray #7F8080 Β· White.
There is NO navy in the book; the old --navy #1b2740 and --red #b8232f were
off-palette inventions. Closes Markup pins #4 and #38, which are one instruction.
The Talon logo's own artwork measures #EC1F28 / #828181 / #3E3E39 β i.e. Fleet
Red, Highway Gray and Steel Gray within 3 RGB points β so the mark now belongs.
TWO DELIBERATE DEVIATIONS, both measured, both to keep WCAG AA:
1. Fleet Red #ED2127 is NOT the workhorse. Against white it measures 4.33:1 β
failing AA (4.5) both as link text and as a button fill under white label
text. Guardian Red #DB202E measures 4.93:1 and passes in both roles, so it
carries the interactive work. Fleet Red is kept as --red-bright for large
graphic use only; do not put small text on it or in it.
2. Highway Gray #7F8080 is NOT used for body copy β 3.96:1 on white, a fail.
It is kept as --gray for rules, dividers and decorative marks; --muted is a
neutral-warm tone in the same family that measures 6.72:1.
Band separation check: old --inkβ--navy was 1.27:1; new BlackβSteel Gray is
1.90:1, so the stats strip reads MORE distinct from the hero, not flatter.
--------------------------------------------------------------------------- */
:root {
/* book colours, exact */
--gfs-guardian-red: #db202e;
--gfs-fleet-red: #ed2127;
--gfs-black: #000000;
--gfs-steel-gray: #3d3c38;
--gfs-highway-gray: #7f8080;
--ink: #000000; /* Black (book) β header, hero, footer, CTA */
--ink-2: #1c1c1a; /* derived step BlackβSteel Gray, neutral-warm */
--ink-3: #2b2a27; /* derived step BlackβSteel Gray, neutral-warm */
--band: #3d3c38; /* Steel Gray (book) β stats strip + the Guardian band */
--red: #db202e; /* Guardian Red (book) β links, buttons, call bar. 4.93:1 */
--red-2: #ba1b27; /* derived hover: Guardian Red β15%. 6.41:1. Book has no hover tone */
--red-bright: #ed2127; /* Fleet Red (book) β LARGE graphic use only, see note above */
--red-light: #f69093; /* tint of Fleet Red for on-dark accents. 9.33:1 on Black */
--gray: #7f8080; /* Highway Gray (book) β rules and decoration, NOT body text */
--paper: #f7f7f5; /* neutral-warm paper, was blue-tinted #f4f5f7. Lifted from #f4f4f2 on 2026-09-23:
measured on the rendered pages, Guardian Red link text on #f4f4f2 came to 4.48:1 β
two hundredths under AA, on 9 links across 9 pages. At #f7f7f5 it is 4.60:1 and the
band is still a visible 1.073:1 step down from white. Fixed at the token so links
stay ONE colour everywhere rather than shifting per section. */
--line: #e4e3e0; /* neutral-warm rule, was blue-tinted #e3e6ea */
--line-dark: rgba(255, 255, 255, 0.12);
--text: #3d3c38; /* Steel Gray (book) β body copy. 11.04:1 on white */
--muted: #5c5c58; /* neutral-warm secondary copy. 6.72:1 on white, 6.10:1 on paper */
--white: #ffffff;
--font-display-gfs: eurostile, 'Chakra Petch', 'Arial Narrow', Arial, sans-serif; /* ACTIVE 2026-10-01 β kit fpz4xig; see the header note */
--font-display-fallback: 'Chakra Petch', 'Arial Narrow', Arial, sans-serif; /* the pre-2026-10-01 stack, kept for a one-line revert */
--font-display: var(--font-display-gfs);
--font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--wrap: 1200px;
--gutter: 20px;
--sec: 48px;
--radius: 8px;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 12px 32px -18px rgba(0, 0, 0, 0.25);
--hdr-h: 68px;
}
@media (min-width: 720px) {
:root { --gutter: 32px; --sec: 64px; --hdr-h: 84px; }
}
@media (min-width: 1024px) {
:root { --sec: 72px; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--text);
background: var(--white);
padding-bottom: 60px; /* mobile call bar */
}
@media (min-width: 720px) { body { font-size: 17px; } }
@media (min-width: 900px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; margin: 0 0 0.5em; color: var(--ink); letter-spacing: 0.005em; }
h1 { font-size: clamp(1.9rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sec { padding: var(--sec) 0; }
.sec--paper { background: var(--paper); }
.sec--ink { background: var(--ink); color: rgba(255, 255, 255, 0.86); }
.sec--ink h2, .sec--ink h3 { color: var(--white); }
.sec--band { background: var(--band); color: var(--white); }
.sec__head { max-width: 760px; margin-bottom: 28px; }
.sec__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin: 0 0 0.6em; }
.sec--ink .kicker, .sec--band .kicker { color: var(--red-light); }
.lead { font-size: 1.05em; color: var(--muted); }
.sec--ink .lead { color: rgba(255, 255, 255, 0.72); }
.skip { position: absolute; left: -999px; top: 0; background: var(--red); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; flex: none; }
/* Buttons β the phone is the button. */
.btn {
display: inline-flex; align-items: center; gap: 10px; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase;
padding: 14px 22px; border-radius: 6px; border: 2px solid transparent; line-height: 1.1; cursor: pointer; text-decoration: none;
transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover, .btn:focus-visible { text-decoration: none; transform: translateY(-1px); }
.btn--call { background: var(--red); color: #fff; box-shadow: 0 6px 18px -8px rgba(219, 32, 46, 0.8); }
.btn--call:hover { background: var(--red-2); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--lg { font-size: 1.1rem; padding: 18px 28px; }
.btn .ico { width: 1.2em; height: 1.2em; }
/* Top strip */
.topstrip { background: var(--ink-2); color: rgba(255, 255, 255, 0.78); font-size: 0.78rem; }
.topstrip__in { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 30px; }
.topstrip__area { margin: 0; display: none; align-items: center; gap: 6px; }
.topstrip__sep { opacity: 0.45; }
.topstrip__247 { color: #fff; font-weight: 600; }
.topstrip__gfs { color: #fff; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; white-space: nowrap; }
@media (min-width: 720px) {
.topstrip__in { justify-content: space-between; }
.topstrip__area { display: inline-flex; }
}
/* Header β the brand is GFS's wide lockup (PNG rendered from the vector sheet since 2026-09-22, reversed for the dark bar) with the service-area line under it.
Lockup ratio 6.2:1, so its height is budgeted per breakpoint against the nav + phone button (measured in the render). */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--ink); color: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
.hdr__in { display: flex; align-items: center; gap: 12px; min-height: var(--hdr-h); }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; color: #fff; text-decoration: none; margin-right: auto; min-width: 0; padding: 6px 0; }
.brand:hover { text-decoration: none; }
.brand__logo { height: 32px; width: 198.2px; max-width: none; } /* 2026-09-22 (Foreman G3 H1): explicit width per tier at the mark's true 700/113 = 6.195:1. Before, img max-width:100% let the .brand column (sized by the service-area line) clamp the lockup to 289.5 Γ 56 at β₯ 1200 β and the row only "fit" because of that clamp: the bar is capped at 1136 px inner (--wrap 1200) at EVERY width β₯ 1200, and 347 + 7 nav items + the phone button never fit in it. Budgets below: β₯ 1200 β 52-px lockup + 0.82-rem nav (β 1107 of 1136); 1024β1199 β 36-px lockup, area line hidden, 0.78-rem nav (β 919 of 960 at 1024). .brand is flex:none from 1024 so nothing clamps silently again β an overflow shows in the header proof (build/qc-header-r2.py). */
.brand__area { display: none; font-size: 0.7rem; color: rgba(255, 255, 255, 0.68); line-height: 1.2; white-space: nowrap; }
@media (min-width: 480px) { .brand__logo { height: 34px; width: 210.6px; } }
@media (min-width: 720px) { .brand__logo { height: 46px; width: 285px; } .brand__area { display: block; font-size: 0.74rem; } }
@media (min-width: 1024px) { .brand__logo { height: 52px; width: 322.1px; } .brand { flex: none; } .brand__area { font-size: 0.72rem; } }
/* Markup pin #33 (Anaya Walker): "Add some space between text and phone number?" β the pin sits on
the header call button, which ran straight up against the last nav item. */
.hdr__call { padding: 10px 12px; margin-left: 18px; }
@media (min-width: 1024px) { .hdr__call { margin-left: 26px; } }
.hdr__call-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
/* 0.9.1 (Foreman gate 09-27 D2): no opacity. At 0.85 it rendered #fadee0 on Guardian Red = 3.88:1; plain white is 4.93:1. */
.hdr__call-label { font-size: 0.62rem; letter-spacing: 0.12em; }
.hdr__call-num { font-size: 0.95rem; white-space: nowrap; }
@media (max-width: 1023px) { .hdr__call-label { display: none; } .hdr__call { padding: 11px 12px; } .hdr__call .ico { width: 1.1em; height: 1.1em; } }
@media (max-width: 479px) { .hdr__call-text { display: none; } .hdr__call { padding: 12px; } .hdr__call .ico { width: 1.3em; height: 1.3em; } }
@media (min-width: 720px) { .hdr__call { padding: 10px 16px; } .hdr__call-num { font-size: 1.05rem; } }
.navtoggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; cursor: pointer; order: 3; }
.navtoggle span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hdr__call { order: 2; }
.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ink-2); border-top: 1px solid var(--line-dark); padding: 8px var(--gutter) 16px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4); }
.nav.is-open { display: block; }
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list > li { border-bottom: 1px solid var(--line-dark); position: relative; }
.nav__list a { display: block; padding: 13px 0; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; }
.nav__list a:hover { text-decoration: none; color: var(--red-light); }
.has-sub > a { padding-right: 48px; }
.sub-toggle { position: absolute; right: 0; top: 6px; width: 40px; height: 40px; background: transparent; border: 0; color: #fff; cursor: pointer; }
.sub-toggle .ico { transform: rotate(90deg); transition: transform 0.2s ease; }
.sub-toggle[aria-expanded="true"] .ico { transform: rotate(-90deg); }
.sub { list-style: none; margin: 0; padding: 0 0 8px 12px; display: none; }
.has-sub.is-open > .sub { display: block; }
.sub a { font-size: 0.92rem; padding: 9px 0; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.sub__all a { color: var(--red-light); }
.nav__mobile-extra { padding-top: 12px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); }
.nav__mobile-extra p { margin: 0 0 4px; }
.nav__gfs { color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
@media (min-width: 1024px) {
.navtoggle { display: none; }
.nav { display: block; position: static; background: transparent; border: 0; padding: 0; box-shadow: none; order: 1; }
.nav__list { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.nav__list > li { border: 0; flex: none; }
.nav__home { display: none; } /* the lockup is the home link on desktop */
.nav__list a { padding: 10px 11px; font-size: 0.86rem; }
.nav__list a[aria-current="page"] { color: var(--red-light); }
.has-sub > a { padding-right: 26px; }
.sub-toggle { right: 2px; top: 4px; width: 26px; height: 32px; pointer-events: none; }
.sub-toggle .ico { width: 0.8em; height: 0.8em; }
.sub { display: none; position: absolute; left: 0; top: 100%; min-width: 260px; background: var(--ink-2); padding: 8px 0; border-radius: 0 0 8px 8px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4); border-top: 3px solid var(--red); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.is-open > .sub { display: block; }
.sub a { padding: 9px 16px; }
.sub a:hover { background: rgba(255, 255, 255, 0.06); }
.nav__mobile-extra { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
/* seven nav items (FAQ joined 2026-09-22) + a 36-px lockup + the compact phone button on one row in 960β1135 px of bar
(measured 2026-09-22: 223 + 12 + 499 + 12 + 173 = 919 at 1024). The service-area line is hidden here β the top strip
already carries "Two terminals: North Port & Sarasota" from 720 px up; it returns under the lockup at 1200. */
.nav__list { flex-wrap: nowrap; white-space: nowrap; }
.nav__list a { padding: 10px 6px; font-size: 0.78rem; }
.hdr__call { padding: 11px 10px; }
.hdr__call-label { display: none; }
.hdr__call-num { font-size: 0.95rem; }
.brand__logo { height: 36px; width: 223px; }
.brand__area { display: none; }
}
@media (min-width: 1200px) {
/* one desktop tier: the bar is 1136 px inner at every width from 1200 up (--wrap 1200), so 338 (area line) + 12 + 548 (nav)
+ 12 + 197 (phone button with its label) = 1107 β measured 2026-09-22 with the self-hosted faces, so it does not drift. */
.nav__list { flex-wrap: nowrap; white-space: nowrap; }
.nav__list a { padding: 10px 8px; font-size: 0.82rem; }
}
/* Hero β colour photo, one dominant CTA, ~72vh so the stats strip peeks. */
.hero { position: relative; display: flex; align-items: flex-end; min-height: min(72vh, 640px); color: #fff; overflow: hidden; background: var(--ink); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* ---------------------------------------------------------------------------
HERO SCRIM β DEFECT D1, Foreman gate 2026-09-24. Hero text failed AA over the
photographs on 14 of 17 pages; on mobile the home eyebrow was 100% below AA
(mean 2.21:1) and 37.8% of the H1's glyph pixels sat under the 3.0:1 large-text
floor where the headline crosses the white truck cab.
Root cause: the scrim was weakest at the TOP of the hero, and that is exactly
where the eyebrow and the breadcrumb sit. The pin-#56 fix strengthened the band
lower down β which does pass β and never re-measured the top.
These stops were not guessed. Each was chosen by compositing the real photo
through object-fit:cover with the candidate gradient and measuring contrast at
GLYPH pixels only (Range.getClientRects), the same method 02 Foreman gates with;
the harness reproduces his published figures within ~0.1. The lightest gradient
that clears every element with margin was taken, not the darkest that works.
Mobile and desktop genuinely differ and the split is not decorative: at 375px the
copy spans the whole hero (0.02-1.0 of its height) so there is no clean photo band
to protect, while at 1440px the top 31% is photo only and stays bright at 0.20.
The desktop gradient measured on mobile leaves the eyebrow 100% below AA.
Scoped with :not(.hero--sub) so sub-page heroes keep their own ramp regardless of
source order.
--------------------------------------------------------------------------- */
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 16, 0.50) 0%, rgba(10, 12, 16, 0.58) 25%, rgba(10, 12, 16, 0.70) 50%, rgba(10, 12, 16, 0.90) 100%); }
/* desktop: copy starts at 0.31 down, so the top of the photograph stays bright */
@media (min-width: 720px) {
.hero:not(.hero--sub)::after { background: linear-gradient(180deg, rgba(10, 12, 16, 0.20) 0%, rgba(10, 12, 16, 0.30) 18%, rgba(10, 12, 16, 0.62) 30%, rgba(10, 12, 16, 0.70) 50%, rgba(10, 12, 16, 0.90) 100%); }
}
.hero__in { position: relative; z-index: 1; padding-top: 48px; padding-bottom: 36px; }
/* Markup pin #34 (Anaya Walker): "Should this be bolder or something to be more legible?" β the pin
sits on this eyebrow. Was 600 weight at 85% white over a photo; now 700 at full white with a shadow. */
.hero__sub { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.82rem; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); margin: 0 0 12px; }
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.62); margin-bottom: 14px; }
.hero__tag { font-size: 1.05rem; max-width: 46ch; color: rgba(255, 255, 255, 0.9); margin-bottom: 22px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 479px) { .hero__cta .btn--lg { width: 100%; font-size: 1rem; padding: 16px 18px; } } /* 0.12.1: whole-button nowrap removed; at 320-360 the label overflowed its own padding. span.tel-num keeps the number whole; "Call dispatch" wraps above it, as in the CTA band */
@media (min-width: 720px) { .hero { min-height: min(75vh, 680px); } .hero__in { padding-bottom: 48px; } .hero h1 { max-width: 18ch; } .hero__img { object-position: 50% 45%; } }
/* Markup pin #56 (Hannah O'Shea, /services/): "The font is hard to read on this background."
Measured on the rendered page 2026-09-23: behind the sub-hero copy the raw photo averages
L=0.235 with peaks at 1.0 (blown sky), which puts white body copy near 3.7:1 and worse over the
highlights. The full hero's scrim is tuned for a 640-px image; the sub-hero is 260-340 px, so the
text lands where that gradient is still weak. Stronger scrim + a shadow for the local peaks.
Applies to every sub-page hero, not just the one she pinned. */
.hero--sub { min-height: 260px; align-items: flex-end; }
/* Sub-page heroes are only 260-340px tall and the breadcrumb sits at 0.12-0.18 down,
where the old 0.30-at-top ramp gave ~0.40 alpha β 100% of crumb glyphs below AA on
13 pages. No clean-photo band worth protecting in a 293px strip, so one ramp, both widths. */
/* 0.9.1 (Foreman gate 09-27 D5): top stop 0.55 -> 0.60, same ink, the 30% and 100% stops unchanged. Glyph-pixel crumb worst
4.55 -> 5.27:1 over 64 loads (16 sub-pages x 1440/390 x 2), 0 of 178,528 px below AA; with #fff alone it was 4.72. */
.hero--sub::after { background: linear-gradient(180deg, rgba(10, 12, 16, 0.60) 0%, rgba(10, 12, 16, 0.62) 30%, rgba(10, 12, 16, 0.88) 100%); }
.hero--sub .hero__tag, .hero--sub .crumb { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
.hero--sub .hero__in { padding-top: 32px; padding-bottom: 26px; }
.hero--sub h1 { max-width: 22ch; font-size: clamp(1.7rem, 4.2vw, 2.8rem); }
@media (min-width: 720px) { .hero--sub { min-height: 340px; } }
/* 0.9.1 (Foreman gate 09-27 D5): #fff, was rgba(255,255,255,.95). Every crumb near the line was the 95% current-page text or
separator; the links were already #fff. Same white, no alpha, so no palette change. */
.crumb { font-size: 0.8rem; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); margin-bottom: 10px; }
.crumb a { color: #fff; }
/* Stats strip */
.stats { background: var(--band); color: #fff; }
.stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.stat { padding: 18px 12px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
/* Markup pin #36 β icons on the stats strip, the one block in that stretch without them. */
.stat__i { color: var(--red-light); margin-bottom: 6px; line-height: 0; }
.stat__i .ico { width: 22px; height: 22px; margin: 0 auto; }
@media (min-width: 720px) { .stat__i .ico { width: 24px; height: 24px; } }
.stat:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.1); }
.stat__v { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: #fff; }
.stat__l { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-top: 6px; }
@media (min-width: 720px) {
.stats__grid { grid-template-columns: repeat(4, 1fr); }
.stat { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, 0.1); padding: 22px 16px; }
.stat:last-child { border-right: 0; }
.stat__v { font-size: 2.2rem; }
}
/* Two-column intro */
.split { display: grid; gap: 28px; align-items: center; }
.split__img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; }
.split__img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr 1fr; gap: 48px; } .split--rev .split__img { order: 2; } }
/* Service cards β kept from the mock-up, smaller and more efficient. */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card:hover, .card:focus-visible { text-decoration: none; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 20px 40px -20px rgba(0, 0, 0, 0.35); }
.card__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.15; color: var(--ink); margin: 0; }
.card__title .ico { color: var(--red); width: 1.25em; height: 1.25em; }
.card__short { font-size: 0.82rem; color: var(--muted); margin: 0; display: none; }
.card__more { margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 560px) { .card__short { display: block; } .card__body { padding: 14px 16px 16px; } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .card__title { font-size: 1.12rem; } .card__short { font-size: 0.9rem; } }
/* Markup pin #49 β one "tow truck near me" lead above the service card deck. */
.services__near { margin: 0 0 20px; max-width: 62ch; }
/* Terminals */
.terminals { display: grid; gap: 16px; }
.terminal { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.terminal__body { padding: 18px 18px 6px; }
.terminal__body h3 { color: #fff; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.terminal__body h3 .ico { color: var(--red-light); }
.terminal__addr { font-style: normal; color: rgba(255, 255, 255, 0.85); margin: 0 0 10px; line-height: 1.5; }
.terminal__meta { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }
.terminal__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.terminal__btns .btn { padding: 10px 14px; font-size: 0.82rem; }
.map { display: block; width: 100%; height: 200px; border: 0; filter: saturate(0.85); }
@media (min-width: 720px) { .terminals { grid-template-columns: 1fr 1fr; gap: 24px; } .map { height: 230px; } }
.counties { margin: 24px 0 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.72); }
.counties strong { color: #fff; }
/* Reviews */
.reviews { display: grid; gap: 14px; }
.review { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.review__stars { color: #e8a317; display: flex; gap: 2px; }
.review__stars .ico { width: 1em; height: 1em; fill: currentColor; stroke: none; }
.review__text { margin: 0; font-size: 0.95rem; }
.review__meta { font-size: 0.8rem; color: var(--muted); margin: 0; }
.review__meta strong { color: var(--ink); }
@media (min-width: 720px) { .reviews { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.reviews__links { margin: 22px 0 0; font-size: 0.9rem; text-align: center; }
/* CTA band */
.cta { position: relative; color: #fff; overflow: hidden; background: var(--ink); text-align: center; }
.cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0.55; }
.cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 17, 21, 0.55), rgba(15, 17, 21, 0.85)); }
.cta__in { position: relative; z-index: 1; padding: calc(var(--sec) + 8px) var(--gutter); max-width: 760px; margin: 0 auto; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, 0.85); max-width: 52ch; margin-left: auto; margin-right: auto; }
/* Sub-page layout */
.layout { display: grid; gap: 32px; }
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1em; }
.prose li { margin-bottom: 0.35em; }
.prose figure { margin: 1.4em 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.prose figcaption { font-size: 0.8rem; color: var(--muted); padding: 8px 12px; background: var(--paper); }
.aside { display: flex; flex-direction: column; gap: 16px; }
.panel { background: var(--paper); border-radius: var(--radius); padding: 18px; }
.panel--dark { background: var(--ink); color: rgba(255, 255, 255, 0.85); }
.panel--dark h3 { color: #fff; }
.panel h3 { margin-bottom: 8px; font-size: 1.05rem; }
.panel p { margin: 0 0 8px; font-size: 0.92rem; }
.panel .btn { width: 100%; }
.panel__list { list-style: none; margin: 0; padding: 0; }
.panel__list li { border-top: 1px solid var(--line); }
.panel__list li:first-child { border-top: 0; }
.panel__list a { display: block; padding: 8px 0; color: var(--ink); font-weight: 600; font-size: 0.92rem; }
.panel__list a[aria-current] { color: var(--red); }
@media (min-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; } .aside { position: sticky; top: calc(var(--hdr-h) + 16px); } }
/* Contact */
.dispatch { display: grid; gap: 16px; }
.dispatch__card { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.dispatch__card h2 { color: #fff; margin: 0; }
.dispatch__phone { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 6vw, 2.6rem); color: #fff; line-height: 1; }
.dispatch__hours { font-size: 0.92rem; color: rgba(255, 255, 255, 0.75); margin: 0; }
.dispatch__side { background: var(--paper); border-radius: var(--radius); padding: 24px; }
.dispatch__side h3 { margin-bottom: 6px; }
.dispatch__side p { margin: 0 0 10px; font-size: 0.95rem; }
@media (min-width: 900px) { .dispatch { grid-template-columns: 1.2fr 1fr; gap: 24px; } }
/* Footer */
.ftr { background: var(--ink); color: rgba(255, 255, 255, 0.78); padding: 40px 0 28px; font-size: 0.9rem; }
.ftr a { color: #fff; }
.ftr__top { display: grid; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line-dark); margin-bottom: 28px; }
.ftr__brand img { height: 118px; width: auto; }
.ftr__gfs { margin: 12px 0 4px; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }
.ftr__tag { margin: 0; color: rgba(255, 255, 255, 0.6); font-style: italic; }
.ftr__dispatch-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--red-light); margin: 0 0 4px; }
.ftr__phone { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: #fff; line-height: 1.1; display: inline-block; margin-bottom: 8px; }
.ftr__hours { margin: 0; color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; }
.ftr__cols { display: grid; gap: 24px; }
.ftr__h { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.ftr__addr { font-style: normal; margin: 0 0 14px; line-height: 1.5; }
.ftr__addr strong { color: #fff; }
.ftr__list { list-style: none; margin: 0; padding: 0; }
.ftr__list li { margin-bottom: 6px; }
.ftr__social { margin: 14px 0 8px; }
.ftr__social a { display: inline-flex; align-items: center; gap: 6px; }
.ftr__pay { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); margin: 0; }
/* Accepted-card marks (Markup pin #146) β white chips so the set reads on the light
contact panel and on the black footer alike; Discover's wordmark is near-black. */
.paymarks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; vertical-align: middle; }
.paymark {
height: 24px; width: auto; display: block;
background: #fff; border-radius: 4px; padding: 3px 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.paymarks__txt { font-size: 0.8rem; color: inherit; opacity: 0.85; }
.ftr__pay .paymarks { margin-top: 6px; }
@media (min-width: 720px) { .paymark { height: 26px; } }
.ftr__bottom { border-top: 1px solid var(--line-dark); margin-top: 28px; padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.ftr__bottom p { margin: 0; }
@media (min-width: 720px) { .ftr__top { grid-template-columns: 1fr auto; align-items: end; } .ftr__cols { grid-template-columns: 1.2fr 1fr 1fr; } }
/* Mobile call bar */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--red); color: #fff; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; padding: 14px 16px; box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.3); }
.callbar:hover { text-decoration: none; background: var(--red-2); }
.callbar strong { font-size: 1.05rem; }
@media (min-width: 900px) { .callbar { display: none; } }
/* Inquiry form β HubSpot embed when the form ID is set, native fallback (posts nowhere) until then. */
.form { display: grid; gap: 14px; max-width: 720px; }
.form__grid { display: grid; gap: 14px; }
.form__row { display: flex; flex-direction: column; gap: 6px; }
.form label { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.form input, .form select, .form textarea { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid #cfd4da; border-radius: 6px; background: #fff; color: var(--text); width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.form textarea { resize: vertical; min-height: 120px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form__hint { font-size: 0.9rem; color: var(--muted); }
.form .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.form .btn[disabled]:hover { transform: none; }
.form__note { background: #fff7db; border: 1px solid #f0d77c; border-radius: 6px; padding: 10px 12px; font-size: 0.85rem; color: #6a5200; margin: 0; }
.hsform { min-height: 320px; }
@media (min-width: 600px) { .form__grid { grid-template-columns: 1fr 1fr; } }
/* Forms page β download cards */
.forms { display: grid; gap: 16px; }
.formcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: calc(var(--hdr-h) + 16px); }
.formcard h3 { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 1.1rem; }
.formcard h3 .ico { color: var(--red); flex: none; margin-top: 0.15em; }
.formcard p { margin: 0; font-size: 0.92rem; color: var(--muted); }
.formcard__dl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.formcard__dl .btn { padding: 10px 14px; font-size: 0.8rem; flex-direction: column; gap: 2px; align-items: flex-start; }
.formcard__dl small { font-family: var(--font-body); font-weight: 500; font-size: 0.68rem; letter-spacing: 0; text-transform: none; opacity: 0.75; }
.btn--outline { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
@media (min-width: 900px) { .forms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
/* Fleet-at-work gallery (services index) */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gallery__item { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: var(--ink-3); }
.gallery__item a { display: block; height: 100%; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.gallery__item a:hover img, .gallery__item a:focus-visible img { transform: scale(1.035); }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Utilities */
.u-center { text-align: center; }
.mt-24 { margin-top: 24px; }
.mt-12 { margin-top: 12px; }
.mb-28 { margin-bottom: 28px; }
.grid-2 { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 24px; } }
/* Checklist (About: what we do Β· 404: routes) */
.checklist { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.checklist li { position: relative; padding-left: 28px; }
.checklist li > .ico { position: absolute; left: 0; top: 0.35em; color: var(--red); width: 1.15em; height: 1.15em; }
.checklist a { font-weight: 600; color: var(--ink); }
.checklist a:hover { color: var(--red); }
/* Captioned figure */
.figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #fff; align-self: start; }
.figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.figure figcaption { font-size: 0.82rem; color: var(--muted); padding: 10px 14px; }
/* Guardian band (About) */
.gfs__in { max-width: 720px; margin: 0 auto; text-align: center; }
.gfs__in h2 { color: #fff; }
.gfs__in p { color: rgba(255, 255, 255, 0.85); max-width: 56ch; margin-left: auto; margin-right: auto; }
/* All reviews (About) */
.reviews-all { display: grid; gap: 32px; }
.reviews-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.reviews-group__head h3 { margin: 0; display: flex; align-items: center; gap: 6px; }
.reviews-group__head h3 .ico { color: var(--red); }
.reviews-group__count { font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; color: var(--muted); }
.reviews-group__head > a { font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.reviews--list { grid-template-columns: 1fr; }
.review__meta a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); }
.review__meta a:hover { color: var(--red); }
@media (min-width: 720px) { .reviews--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Counties (Service Area) */
.counties-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.county { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; color: var(--ink); box-shadow: var(--shadow); }
.county .ico { color: var(--red); width: 1.3em; height: 1.3em; }
.county small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
@media (min-width: 720px) { .counties-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) { .counties-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.panel__list small { display: block; font-weight: 400; color: var(--muted); font-size: 0.8rem; padding-bottom: 8px; }
/* Apply (Careers) */
.apply__btn { flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
/* 0.9.1 (Foreman gate 09-27 D2): no opacity, same defect as the header label (3.88:1 at 0.85; plain white 4.93:1). */
.apply__btn small { font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; letter-spacing: 0; text-transform: none; }
.prose .callout { background: var(--paper); border-left: 4px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; margin: 1.2em 0; }
.prose .callout p:last-child { margin-bottom: 0; }
/* Legal pages */
.prose h2 + p { margin-top: 0; }
.prose .effective { font-size: 0.9rem; color: var(--muted); }
/* Accessibility pass (Foreman QC 2026-09-10 H2) */
.u-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.topstrip a:focus-visible, .hdr a:focus-visible, .hdr button:focus-visible, .ftr a:focus-visible, .sec--ink a:focus-visible, .sec--band a:focus-visible, .cta a:focus-visible, .dispatch__card a:focus-visible, .panel--dark a:focus-visible, .callbar:focus-visible, .hero a:focus-visible { outline-color: #fff; }
.prose a:not(.btn), .lead a:not(.btn), .panel p a:not(.btn), .review__meta a, .reviews__links a, .terminal__meta a, .counties a, .checklist a, .ftr__addr a, .form__hint a, .hero__tag a, .dispatch__side a, .dispatch__hours a, .formcard p a, .figure a, .form-pending a { text-decoration: underline; text-underline-offset: 0.15em; }
.link-light { color: #fff; text-decoration: underline; text-underline-offset: 0.15em; }
.mt-24 a:not(.btn) { text-decoration: underline; text-underline-offset: 0.15em; } /* 2026-09-22 (Foreman G3 L1): the /faq/ cross-link and the forms link on the storage page sit outside .prose */
.dispatch__card .kicker { color: var(--red-light); }
.topstrip__gfs, .crumb a, .ftr__bottom a, .ftr__list a, .ftr__addr a, .ftr__social a, .reviews__links a, .reviews-group__head > a { display: inline-block; padding: 4px 0; min-height: 24px; }
.crumb { line-height: 1.2; }
.review__stars { color: #b8740c; }
.form-pending { background: var(--paper); }
.form-pending h3 { display: flex; align-items: center; gap: 8px; }
.form-pending h3 .ico { color: var(--red); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
/* HubSpot inquiry form (portal 22650670): HubSpot paints its iframe into .hs-form-frame; keep it inside the column and give it room. */
.hsform { max-width: 720px; }
.hsform .hs-form-frame { min-height: 120px; }
.hsform iframe { max-width: 100% !important; }
/* The commercial line on Contact β Guardian's corporate-account form. */
/* Markup pin #31 β the commercial callout is now its own panel in the contact aside
(page-templates/contact.php), above the "Need it now?" box, as Mary asked. The old
.lead--commercial inline treatment it replaces is gone; no template references it. */
.panel--corp { border: 1px solid var(--line); }
.panel--corp h3 { display: flex; align-items: flex-start; gap: 8px; }
.panel--corp h3 .ico { width: 1.25em; height: 1.25em; color: var(--red); flex: none; margin-top: 0.05em; }
.panel--corp .btn { width: 100%; }
.panel--corp .btn .ico { width: 1em; height: 1em; }
/* Birdeye reviews widget beneath the ten Google reviews (About & Reviews). Sized by its own script; nothing else here. */
.birdeye { margin-top: 32px; }
/* ---- 2026-09-22 Β· FAQ page + Secure Vehicle Storage page (0.5.0) ------------------------------------------------------- */
/* FAQ accordion (page-templates/faq.php, storage.php) β the collapsed question list on Guardian's Chubs pages, as native
/: no JS, keyboard + screen-reader native, first item open. The red disc is the plus / minus. */
.faq { display: grid; gap: 10px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); scroll-margin-top: calc(var(--hdr-h) + 16px); }
.sec--paper .faq__item { border-color: transparent; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.faq__q:hover h3, .faq__item[open] > .faq__q h3 { color: var(--red); }
.faq__ico { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--red); }
.faq__ico::before, .faq__ico::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 1px; transform: translate(-50%, -50%); transition: transform 0.2s ease; }
.faq__ico::before { width: 12px; height: 2px; }
.faq__ico::after { width: 2px; height: 12px; }
.faq__item[open] > .faq__q .faq__ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__a { padding: 0 18px 18px; max-width: 68ch; }
.faq__a p:last-child { margin-bottom: 0; }
.faq-group + .faq-group { margin-top: 44px; }
.faq-group .sec__head { margin-bottom: 18px; }
@media (min-width: 720px) { .faq__q { padding: 18px 22px; } .faq__q h3 { font-size: 1.15rem; } .faq__a { padding: 0 22px 22px; } }
/* Storage page β the intro band (Chubs: "Need to know where your vehicle was towed?") on ink, one call, one anchor. */
.intro__in { max-width: 780px; }
.intro__in h2 { color: #fff; max-width: 22ch; }
.intro__in .lead { color: rgba(255, 255, 255, 0.8); max-width: 60ch; }
.intro .hero__cta { margin-top: 6px; }
.split .checklist { margin-top: 4px; }
/* Seven service cards since vehicle storage joined (home + services index): the odd card sits centred on desktop and runs
full-width as a photo-left row on phones instead of hanging alone in the grid. Six-card grids (service pages) are untouched. */
@media (min-width: 900px) { .cards > .card:nth-child(7):last-child { grid-column: 2; } }
@media (max-width: 899px) {
.cards > .card:nth-child(7):last-child { grid-column: 1 / -1; flex-direction: row; }
.cards > .card:nth-child(7):last-child .card__img { width: 44%; flex: none; aspect-ratio: auto; }
.cards > .card:nth-child(7):last-child .card__short { display: block; }
}
/* ---- 2026-09-22 Β· Foreman G3 re-verify (0.5.3) ---------------------------------------------------------------------- */
/* M5 β the Services caret: the desktop tier rules (.nav__list a { padding: 10px 8px } / 10px 6px) come after .has-sub > a
{ padding-right: 26px } at equal specificity and collapsed the 26-px slot the .sub-toggle sits in (text ran 12β14 px under
the icon). Re-asserted here, after every tier, with one more class of specificity. */
@media (min-width: 1024px) { .nav__list .has-sub > a { padding-right: 26px; } }
/* M4 β mobile menu reach (pre-existing since 0.4.0): the panel is absolute inside the sticky header and grew past the
viewport with the Services sub open (876 px at 390 Γ 844; Contact Us under the 55-px call bar; unreachable at 390 Γ 660).
Now it scrolls inside itself: viewport minus the 30-px top strip, the header and the call bar. */
@media (max-width: 1023px) {
.nav { max-height: calc(100vh - var(--hdr-h) - 85px); max-height: calc(100dvh - var(--hdr-h) - 85px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}
/* ---- 2026-09-27 Β· Markup round 2 (0.9.0) β 03-0 Studious, anchors read off the board's own pin data ------------------- */
/* #35 (Anaya Walker): "Make sure the text in these sections are centered in their box" β horizontally they already were; a
label that wraps to two lines (Terminals: North Port & Sarasota, at the 2-up and 1024-1199 tiers) left its neighbours
top-aligned. Each stat now centres its icon, value and label on both axes, so every box reads centred at every width. */
.stat { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* #132 (Hannah O'Shea, /forms/): "Expand to be the same length as the boxes. Seems like it stops early." β the intro ran at
the 720-px prose measure above a full-width row of form cards. */
.prose--wide { max-width: none; }
/* Q5 (Mary Skinner, 2026-09-25): the counties line is followed by the cities line β county, then city. */
.counties + .counties { margin-top: 8px; }
.mt-40 { margin-top: 40px; }
/* ---- 2026-09-27 Β· Foreman gate fixes (0.9.1) β 03-0 Studious -------------------------------------------------------------- */
/* D1 Β· stats band, pin #35 (Anaya Walker, GFS): "Make sure the text in these sections are centered in their box". 0.9.0 centred
each stat on both axes, so a box whose label wrapped rode its icon and number HIGHER than its neighbours: 9 px at 1440,
27 px at 768-900 (Foreman, reproduced here to the pixel). Now:
- every label in a row gets the same height: a subgrid gives each row one icon track, one value track and one label track,
sized to the tallest item in that row, at ANY width (incl. the 3-line label at 720 and 320). Without subgrid, a 2-line
reserve on every label does the same job for every width where no label runs to 3 lines;
- "Since 2012" never wraps: nowrap, sized to the box (cqi of the grid's content box). 4-up: 3.7cqi = 24.3 px at 720 (text
94% of the box), 30.9 px at 900, the 2.2rem cap from ~1015 up, so 1024+ is unchanged. 2-up: 7.6cqi = 21.3 px at 320 (94%),
26.6 px at 390, the 1.7rem cap from ~400 up. Every value in a row shares one size, so the row stays level. */
.stat__l { line-height: 1.6; min-height: 3.2em; }
@supports (container-type: inline-size) {
.stats__grid { container-type: inline-size; }
.stat__v { white-space: nowrap; font-size: min(1.7rem, 7.6cqi); }
@media (min-width: 720px) { .stat__v { font-size: min(2.2rem, 3.7cqi); } }
}
@supports (grid-template-rows: subgrid) {
.stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; align-items: start; }
.stat__i { grid-row: 1; }
.stat__v { grid-row: 2; }
.stat__l { grid-row: 3; min-height: 0; }
}
/* D4 Β· /contact/ Forms panel, "All forms and downloads": an inline link ~22 px tall (Lighthouse target-size). 44-px tap target. */
.panel__more { margin: 4px 0 0; }
.panel__more a { display: inline-flex; align-items: center; min-height: 44px; }
/* ---- 2026-10-05 Β· MarkUp round 2, Mary Skinner (0.12.0) β 03-0 Studious ----------------------------------------------------- */
/* #1 "Add a little breathing room btwn the logo and the tabs". The brand's auto margin already pushes the nav right; with FAQ out
of the nav (#16) the freed ~35-43 px lands in that gap. This sets a floor under it so it cannot close at the narrowest desktop
width: logo edge to the first tab is never less than 12 (flex gap) + 28 px. */
@media (min-width: 1024px) { .hdr__in .nav { margin-left: 28px; } }
/* #6 "Truncate the review copy after the 3rd line." The three-review strip only (home, /contact/); /about/'s full list is not
clamped. Visual clamp: the whole quote stays in the DOM. */
.reviews--clamp .review__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* #7 the CTA band line is Mary's sentence, shown as she wrote it rather than in the kicker's tracked capitals. */
.cta__line { text-transform: none; letter-spacing: 0.01em; font-size: 0.95rem; }
/* #8 (footer) + #23 (/contact/ Follow Talon) "Use social media icons only" / "Use Icons rather than the words": icon-only links,
44 px tap targets, label carried by aria-label + title. */
.social-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); text-decoration: none; }
.social-icons a:hover { border-color: var(--red-light); color: var(--red-light); text-decoration: none; }
.social-icons .ico { width: 20px; height: 20px; }
.ftr__social.social-icons { margin: 14px 0 8px; }
.social-icons--light a { color: var(--ink); border-color: var(--line); background: #fff; }
.social-icons--light a:hover { color: var(--red); border-color: var(--red); }
.dispatch__side .social-icons { margin: 4px 0 0; }
/* #12 "Center the logo to the copy 'A Guardian Fleet Service Company'": the lockup and that line share a shrink-to-fit column,
so the logo centres on the line's width. The tag line under it keeps its left edge. */
.ftr__lockup { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; }
.ftr__lockup .ftr__gfs { text-align: center; }
/* #13 (/services/) "Fix the break in copy here." and #19 (terminals block) "Flix the break in this copy line.": both leads were
capped (62ch / 760 px) and broke mid-phrase. Uncapped, each holds one line from ~1000 px up; below that, balanced wrapping
keeps a lone word or phrase off the last line. */
.services__near { max-width: none; text-wrap: balance; }
.sec__head--wide { max-width: none; }
.sec__head--wide .lead { text-wrap: balance; }
/* #24 the payment list reads "Credit Card, Debit Card, Cash" β plain inline text so the commas sit tight against each word. */
.paymarks { display: inline; }
/* #16/#17 the FAQ block on the home page: same accordion as /faq/ had, held to a reading width. */
.faq-home { max-width: 860px; }
/* #20-#22 consequence, same card: with the kicker and the hours line gone, the card (stretched to the side panel's height from
900 px up) left its two remaining lines at the top over empty black. Centred vertically; nothing else on the card changes. */
@media (min-width: 900px) { .dispatch__card { justify-content: center; } }
/* #24 the commas take the payment words' own size and tone. */
.paymarks__sep { font-size: 0.8rem; opacity: 0.85; }
/* #16/#17 /faq/ β /#faq lands the section's top edge at 0, under the sticky header (68 / 84 px), which hid the kicker behind it.
Same fix the theme already uses for .faq__item and .formcard anchors. */
#faq { scroll-margin-top: var(--hdr-h); }
/* ===========================================================================
0.12.1-20261006 - Foreman gate on 0.12.0 (2026-10-06 09:23), the pre-production list.
(1) MUST: the dispatch number never breaks across lines. span.tel-num wraps every rendered
number (functions.php talon_tel / talon_tel_text). On phones the CTA band's button takes
the hero button's phone treatment (full width, 1rem, 16/18 padding): the whole label sits on
one line from 375 px up; at 320-360 "Call dispatch" wraps above the whole number (span.btn__txt).
The band's kicker line, heading and paragraph are untouched.
Number-only tel links in page content (the seeded prose) get the same rule.
(2) Hero lines and leads: hyphenated compounds are one unit (span.nowrap) and the last two
words are joined (functions.php talon_typeset). Hero lines, leads and h1-h3 are balanced,
so none ends on a one-word or short last line: the treatment Mary's pins #13 and #19 got
in 0.12.0 (.services__near, .sec__head--wide .lead), now on every one. Headings get the
CSS only, no added markup (several h3s are flex containers).
=========================================================================== */
.tel-num, .nowrap { white-space: nowrap; }
a[href^="tel:"]:not(.btn):not(.callbar):not(.hdr__call) { white-space: nowrap; }
.hero__tag, .lead, h1, h2, h3 { text-wrap: balance; }
@media (max-width: 479px) { .cta .btn--lg { width: 100%; font-size: 1rem; padding: 16px 18px; } }