/* ==========================================================================
   BT&T Trade Counter, ported from the approved sign-off v8 preview
   (signoff_preview.html, 10 Oct 2026). Colour tokens and contrast values are
   from signoff.md section 8. Do not use #F25C19 for small text on light
   surfaces (3.32:1); text on orange is always #231F20 (4.91:1).
   ========================================================================== */

/* Fonts: self-hosted variable woff2, Latin subset, SIL OFL 1.1 (see assets/fonts/) */
@font-face {
	font-family: "Big Shoulders Display";
	src: url("../fonts/big-shoulders-display-var-latin.woff2") format("woff2-variations"),
		url("../fonts/big-shoulders-display-var-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Work Sans";
	src: url("../fonts/work-sans-var-latin.woff2") format("woff2-variations"),
		url("../fonts/work-sans-var-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- Colour tokens: light (default) ---------- */
:root {
	color-scheme: light dark;
	--bs: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
	--ws: "Work Sans", Arial, Helvetica, sans-serif;
	--or: #F25C19;
	--ink: #231F20;
	--legb: #231F20;
	--legt: #fff;
	--req: #b3261e;
	--tbxbg: #231F20;
	--page: #e7e4df;
	--paper: #f3f1ed;
	--card: #ffffff;
	--text: #231F20;
	--text2: #4b4843;
	--mut: #5d5a55;
	--line: #d9d5ce;
	--bd: #cfcac2;
	--bd2: #e4e0d9;
	--field: #f0eee9;
	--fieldbd: #8a847b;
	--ph: #6b665f;
	--hero: #231F20;
	--legal: #0b0b0b;
	--focus: #1d3f8f;
	--link: #231F20;
	--shadow: rgba(0, 0, 0, .12);
	--star: #9a6700;
	--okbd: #2e7d32;
}

/* ---------- Dark: OS preference (Auto) ... ---------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--legb: #F25C19;
		--legt: #231F20;
		--req: #ff8a80;
		--tbxbg: #0d0c0b;
		--page: #121110;
		--paper: #1b1a19;
		--card: #262422;
		--text: #ece8e1;
		--text2: #cfc9c0;
		--mut: #b3ada4;
		--line: #3a3734;
		--bd: #45413d;
		--bd2: #34312e;
		--field: #1b1a19;
		--fieldbd: #8f897f;
		--ph: #a29c93;
		--hero: #0d0c0b;
		--legal: #000000;
		--focus: #ffd27a;
		--link: #ece8e1;
		--shadow: rgba(0, 0, 0, .5);
		--star: #f6b300;
		--okbd: #7cc47f;
	}
}
/* ... and the same set when the visitor picks Dark on the switch */
:root[data-theme="dark"] {
	color-scheme: dark;
	--legb: #F25C19;
	--legt: #231F20;
	--req: #ff8a80;
	--tbxbg: #0d0c0b;
	--page: #121110;
	--paper: #1b1a19;
	--card: #262422;
	--text: #ece8e1;
	--text2: #cfc9c0;
	--mut: #b3ada4;
	--line: #3a3734;
	--bd: #45413d;
	--bd2: #34312e;
	--field: #1b1a19;
	--fieldbd: #8f897f;
	--ph: #a29c93;
	--hero: #0d0c0b;
	--legal: #000000;
	--focus: #ffd27a;
	--link: #ece8e1;
	--shadow: rgba(0, 0, 0, .5);
	--star: #f6b300;
	--okbd: #7cc47f;
}
/* Light forced by the switch (the light tokens above apply; just pin the scheme) */
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--ws);
	font-size: 15px;
	line-height: 1.45;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::placeholder { color: var(--ph); opacity: 1; }
main:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.cap { font-family: var(--bs); text-transform: uppercase; }

.screen-reader-text,
.mode-l {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: 8px; top: -60px; z-index: 1000;
	background: var(--card); color: var(--text); padding: 10px 14px; font-weight: 700;
	border: 3px solid var(--focus);
}
.skip-link:focus { top: 8px; }

.ico { display: inline-block; vertical-align: middle; flex: none; }

/* Small uppercase section labels (preview .lbl) */
.lbl {
	font-family: var(--ws);
	font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--mut); margin: 34px 0 10px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: relative; z-index: 100; }
.hdr { background: var(--or); color: #231F20; }
.hdr :focus-visible, .cv :focus-visible { outline-color: #231F20; } /* ring on orange */
.hdr-in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.plate { background: #fff; display: flex; align-items: center; align-self: stretch; margin-right: auto; }
.plate img { height: 68px; width: auto; display: block; }
.hdr .call { display: flex; gap: 26px; align-items: baseline; }
.hdr .call a { color: #231F20; text-decoration: none; white-space: nowrap; }
.hdr .call a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.hdr small { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hdr b { font-family: var(--bs); font-weight: 800; font-size: 24px; margin-left: 8px; }

/* Colour mode switch */
.mode { display: inline-flex; border: 2px solid #231F20; }
.mode-b {
	display: inline-flex; align-items: center; gap: 5px;
	min-height: 36px; padding: 4px 9px; margin: 0;
	background: transparent; color: #231F20; border: 0; border-radius: 0;
	font: 700 12px/1 var(--ws); letter-spacing: .04em; cursor: pointer;
}
.mode-b + .mode-b { border-left: 2px solid #231F20; }
.mode-b .ico { width: 16px; height: 16px; }
.mode-b[aria-pressed="true"] { background: #231F20; color: #fff; }
.no-js .mode { display: none; }
.mob-act { display: none; }

/* Main nav (desktop) */
.nav { background: var(--card); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; }
.nav .menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; flex: 1; }
.nav .menu > li { position: relative; }
.nav .menu a {
	display: block; padding: 14px 10px 12px; color: var(--text); text-decoration: none;
	font-family: var(--bs); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .02em;
	border-bottom: 4px solid transparent;
}
.nav .menu > li:first-child > a { padding-left: 0; }
.nav .menu a:hover { border-bottom-color: var(--or); }
.nav .menu a[aria-current="page"], .nav .menu .current-menu-item > a { border-bottom-color: var(--or); }
.nav .menu .menu-cta { margin-left: auto; }
.nav .menu > .menu-item-has-children > a::after { content: ""; display: inline-block; width: 0; height: 0; margin: 0 0 3px 6px; border: 4px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; }
.nav .menu .menu-cta > a {
	background: var(--or); color: #231F20; border: 0; padding: 9px 18px 8px;
	font-weight: 900; font-size: 20px; margin: 6px 0;
}
.nav .menu .menu-cta > a:hover { background: #ff6a26; }
.nav .menu .menu-cta > a:focus-visible { outline-color: var(--focus); }
.nav .sub-menu {
	display: none; position: absolute; left: 0; top: 100%; min-width: 230px; z-index: 20;
	list-style: none; margin: 0; padding: 6px 0; background: var(--card);
	border: 1px solid var(--bd); border-top: 4px solid var(--or); box-shadow: 0 8px 22px var(--shadow);
}
.nav .sub-menu a { font-size: 17px; padding: 8px 14px; border-bottom: 0; }
.nav .sub-menu a:hover { text-decoration: underline; }
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu { display: block; }
.nav-extra { display: none; }

/* Header + nav, phones and small tablets: the orange bar is the sticky call/text bar */
@media (max-width: 1140px) {
	.js .site-header { position: sticky; top: 0; }
	html.js body.admin-bar .site-header { top: 32px; }
	.hdr-in { padding: 0 6px 0 0; min-height: 56px; gap: 6px; }
	.plate img { height: 56px; }
	.hdr .call, .hdr .mode { display: none; }
	.mob-act { display: flex; align-items: stretch; gap: 2px; align-self: stretch; }
	.mob-b {
		display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
		min-width: 50px; min-height: 48px; padding: 4px 6px; margin: 0;
		background: transparent; color: #231F20; border: 0; border-radius: 0; text-decoration: none;
		font: 700 11px/1.1 var(--ws); letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
	}
	.mob-b .ico { width: 22px; height: 22px; }
	.menu-btn .ico-close { display: none; }
	.menu-btn[aria-expanded="true"] .ico-open { display: none; }
	.menu-btn[aria-expanded="true"] .ico-close { display: inline; }
	.menu-btn[aria-expanded="true"] { background: #231F20; color: #fff; }

	.js .nav { display: none; }
	.js .nav.is-open {
		display: block; position: absolute; left: 0; right: 0; top: 100%;
		max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain;
		border-bottom: 4px solid var(--or); box-shadow: 0 14px 30px var(--shadow);
	}
	.nav-in { display: block; padding-top: 4px; padding-bottom: 18px; }
	.nav .menu { display: block; }
	.nav .menu a, .nav .menu > li:first-child > a {
		padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 22px; min-height: 48px;
	}
	.nav .menu a[aria-current="page"] { border-bottom: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--or); padding-left: 12px; }
	.nav .menu .menu-cta { margin: 14px 0 0; }
	.nav .menu .menu-cta > a { text-align: center; font-size: 24px; padding: 12px; margin: 0; border: 0; }
	.nav .sub-menu { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 0 16px; min-width: 0; background: transparent; }
	.nav .sub-menu a { font-size: 19px; }
	.nav-extra { display: block; margin-top: 16px; }
	.nav-phones { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 14px; }
	.nav-phones a { color: var(--text); text-decoration: none; font-family: var(--bs); font-weight: 800; font-size: 22px; }
	.nav-phones small { font-family: var(--ws); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--mut); }
	.nav-extra .mode { border-color: var(--fieldbd); }
	.nav-extra .mode-b { color: var(--text); min-height: 44px; padding: 4px 14px; font-size: 13px; }
	.nav-extra .mode-b + .mode-b { border-left-color: var(--fieldbd); }
	.nav-extra .mode-b[aria-pressed="true"] { background: var(--text); color: var(--card); }
}
@media (max-width: 782px) { html.js body.admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { html.js body.admin-bar .site-header { top: 0; } }
@media (max-width: 380px) { .plate img { height: 50px; } .mob-b { min-width: 46px; padding: 4px 3px; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { background: var(--hero); color: #f3f1ed; }
.hero-in { padding-top: 46px; padding-bottom: 34px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; }
.kick { color: var(--or); font-weight: 700; letter-spacing: .14em; font-size: 14px; text-transform: uppercase; margin: 0; }
.h1 { font-family: var(--bs); font-weight: 900; font-size: clamp(56px, 8vw, 92px); line-height: .88; margin: 10px 0 18px; text-transform: uppercase; }
.h1 span { color: var(--or); }
.sub { color: #c9c5bd; font-size: 17px; max-width: 560px; margin: 0; }
.addr { margin: 22px 0 0; font-weight: 600; letter-spacing: .12em; font-size: 13px; text-transform: uppercase; }
.stars { margin: 10px 0 0; font-size: 14px; color: #e8e4dc; }
.stars b { color: #f6b300; letter-spacing: 2px; font-weight: 400; }
.gp { background: var(--card); color: var(--text); border-top: 6px solid var(--or); padding: 22px 22px 24px; margin-top: 40px; }
.gp h2 { font-family: var(--bs); font-weight: 900; font-size: 32px; line-height: 1; margin: 0 0 6px; text-transform: uppercase; }
.gp p { margin: 0 0 12px; color: var(--mut); font-size: 14px; }
.qtc { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; padding: 0; list-style: none; }
.qtc a {
	display: inline-flex; align-items: center; min-height: 44px;
	border: 1px solid var(--fieldbd); background: var(--field); color: var(--text); text-decoration: none;
	font-weight: 600; font-size: 13.5px; padding: 7px 13px; border-radius: 999px;
}
.qtc a:hover { border-color: var(--text); }
.btn, a.btn {
	display: block; background: var(--or); color: #231F20; text-decoration: none;
	font-family: var(--bs); font-weight: 900; font-size: 22px; text-transform: uppercase; text-align: center;
	padding: 10px; margin-top: 12px;
}
.btn:hover { background: #ff6a26; }

/* ==========================================================================
   Current deals band (hidden entirely when empty)
   ========================================================================== */
.deals { background: var(--paper); border-bottom: 1px solid var(--line); }
.deals-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding-top: 16px; padding-bottom: 16px; }
.deals-h {
	font-family: var(--bs); font-weight: 900; font-size: 24px; line-height: 1; text-transform: uppercase; margin: 0;
	display: flex; align-items: center; gap: 10px;
}
.deals-h::before { content: ""; width: 8px; height: 26px; background: var(--or); }
.deals-body { color: var(--text2); font-size: 15px; }
.deals-body > :first-child { margin-top: 0; }
.deals-body > :last-child { margin-bottom: 0; }
.deals-body img { max-height: 160px; width: auto; }
.deals-body .deal-title { font-family: var(--bs); font-size: 20px; text-transform: uppercase; margin: 0 0 4px; color: var(--text); }
.deals-all { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ==========================================================================
   Hayman Reese band (C18)
   ========================================================================== */
.hr { background: var(--card); border-top: 6px solid var(--or); border-bottom: 1px solid var(--line); }
.hr-in { padding-top: 24px; padding-bottom: 24px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.hrl { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }
.hrbimg { width: 551px; max-width: 100%; height: auto; display: block; } /* 551x86, never squashed */
.hrtxt { min-width: 0; }
.hrtxt h2 { font-family: var(--bs); font-weight: 900; font-size: 34px; line-height: 1; margin: 0 0 6px; text-transform: uppercase; }
.hrtxt p { margin: 0; color: var(--text2); font-size: 15px; }
.hrcta { text-align: center; }
.hrcta a.b, .tb2c a.b, .cta-r a.b, .map-btn, .btns a.b {
	display: block; background: var(--or); color: #231F20; text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
	font-family: var(--bs); font-weight: 900; text-transform: uppercase;
}
.hrcta a.b { font-size: 23px; padding: 13px 20px; }
.hrcta a.b:hover, .tb2c a.b:hover, .cta-r a.b:hover, .map-btn:hover { background: #ff6a26; }
.hrcta a.t, .tb2c a.t, .cta-r a.t {
	display: block; margin-top: 8px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; font-size: 15px;
}

/* ==========================================================================
   Australian-made† / Lifetime warranty* strip (C24, C25)
   ========================================================================== */
.tbx { background: var(--tbxbg); color: #fff; border-top: 4px solid var(--or); }
.tbx-in { display: grid; grid-template-columns: 1fr 1fr; }
.tbxb { display: flex; align-items: center; gap: 16px; padding: 16px 40px 16px 0; }
.tbxb + .tbxb { border-left: 1px solid #4a4542; padding-left: 40px; padding-right: 0; }
.tbxi {
	flex: none; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--or); color: var(--or);
	font-family: var(--bs); font-weight: 900; font-size: 24px; display: flex; align-items: center; justify-content: center;
}
.tbxh { font-family: var(--bs); font-weight: 900; font-size: 28px; line-height: 1; text-transform: uppercase; color: #fff; margin: 0; }
.tbxh sup { color: var(--or); font-family: var(--ws); font-weight: 700; font-size: 22px; line-height: 0; vertical-align: 10px; margin-left: 3px; }
.tbxb p { margin: 4px 0 0; font-size: 15px; color: #e2ded7; }

/* TAG / BTA panel (C21–C23) */
.tb2 { background: var(--paper); }
.tb2-in { padding-top: 16px; padding-bottom: 16px; display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 22px; align-items: center; }
.tb2h { font-family: var(--bs); font-weight: 900; font-size: 20px; line-height: 1.05; text-transform: uppercase; max-width: 120px; color: var(--text); margin: 0; }
.tb2i { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--bd); padding: 8px 12px 8px 8px; }
.tb2i img { height: 48px; width: auto; display: block; border: 1px solid var(--bd2); }
.tb2i p { margin: 0; font-size: 14px; color: var(--text2); }
.tb2c { text-align: center; }
.tb2c a.b { font-size: 18px; padding: 9px 14px; }
.tb2c a.t { margin-top: 6px; font-size: 13.5px; }

/* Footnotes, verbatim, directly under the panel */
.tbfn { background: var(--paper); padding: 0 0 14px; font-size: 12.5px; color: var(--mut); line-height: 1.45; border-bottom: 1px solid var(--line); }
.tbfn p { margin: 0 0 3px; }
.tbfn sup { font-size: 13px; font-weight: 700; color: var(--text); }

/* ==========================================================================
   Get a price section and the Contact Form 7 form (C26)
   ========================================================================== */
.qf { background: var(--card); border-top: 6px solid var(--or); border-bottom: 1px solid var(--line); scroll-margin-top: 10px; }
.qf-in { padding-top: 26px; padding-bottom: 30px; }
.qfh h2 { font-family: var(--bs); font-weight: 900; font-size: 40px; line-height: 1; margin: 0 0 6px; text-transform: uppercase; color: var(--text); }
.qfh p { margin: 0 0 16px; color: var(--text2); font-size: 16px; }

.qform fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 14px 0 16px; min-width: 0; }
.qform fieldset.hidden-fields-container { border: 0; padding: 0; margin: 0; }
.qform legend { font-family: var(--bs); font-weight: 900; font-size: 22px; text-transform: uppercase; padding: 0 10px 0 0; color: var(--text); }
.qform legend b {
	display: inline-block; background: var(--legb); color: var(--legt); font-size: 16px;
	width: 24px; height: 24px; line-height: 24px; text-align: center; margin-right: 6px; vertical-align: 2px;
}
.qform legend .hint { font-family: var(--ws); font-weight: 500; font-size: 13px; text-transform: none; margin-left: 6px; }
.hint { font-size: 12.5px; color: var(--mut); }

/* Chips: CF7 checkbox with use_label_element */
.chips .wpcf7-form-control-wrap { display: block; }
.chips .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips .wpcf7-list-item { margin: 0; display: block; }
.chips label { position: relative; display: block; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; left: 12px; top: 50%; }
.chips .wpcf7-list-item-label {
	display: inline-flex; align-items: center; min-height: 44px; padding: 8px 15px;
	border: 2px solid var(--fieldbd); background: var(--field); color: var(--text);
	border-radius: 999px; font-weight: 600; font-size: 14.5px; cursor: pointer; user-select: none;
}
.chips label:hover .wpcf7-list-item-label { border-color: var(--text); }
.chips input:checked + .wpcf7-list-item-label { background: var(--or); border-color: var(--or); color: #231F20; }
.chips input:checked + .wpcf7-list-item-label::before { content: "\2713\00a0"; font-weight: 800; }
.chips input:focus-visible + .wpcf7-list-item-label { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Towbar / trailer details: shown only when that chip is ticked (CSS :has(), JS class fallback) */
.tbonly, .tronly { display: none; }
.qform:has(input[name="items[]"][value^="Towbar"]:checked) .tbonly,
.qform.has-towbar .tbonly,
.qform:has(input[name="items[]"][value^="Trailer ("]:checked) .tronly,
.qform.has-trailer .tronly {
	display: block; background: var(--paper); border: 2px solid var(--or); padding: 12px 14px 14px; margin-bottom: 12px;
}
.qform .tbonly legend, .qform .tronly legend { background: var(--paper); padding: 0 8px; }

.g { display: grid; gap: 12px 14px; margin-top: 6px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s2 { grid-column: span 2; }
.s4 { grid-column: 1 / -1; }
.fld { min-width: 0; }
.fld > label, .fld .lb { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; color: var(--text); }
.fld i { color: var(--req); font-style: normal; }
.opt { font-weight: 500; color: var(--mut); }
.qform .wpcf7-form-control-wrap { display: block; }
.qform input[type="text"], .qform input[type="tel"], .qform input[type="email"], .qform input[type="number"], .qform select, .qform textarea {
	width: 100%; font: inherit; font-size: 16px; line-height: 1.3; padding: 10px 12px; margin: 0;
	background: var(--field); color: var(--text); border: 1px solid var(--fieldbd); border-radius: 0;
}
.qform select { padding-right: 8px; min-height: 44px; }
.qform textarea { min-height: 96px; resize: vertical; }
.qform input[type="file"] { font: inherit; font-size: 14px; color: var(--text); max-width: 100%; }
.qform input.rego { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; border: 2px solid var(--text); }
.qform input.rego::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }
.radios .wpcf7-form-control { display: flex; flex-wrap: wrap; gap: 0 16px; padding-top: 2px; }
.radios .wpcf7-list-item { margin: 0; }
.radios label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; margin: 0; min-height: 40px; cursor: pointer; }
.radios input { width: 18px; height: 18px; accent-color: var(--or); margin: 0; }

.sub2 { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.qform .send, .qform input[type="submit"] {
	background: var(--or); color: #231F20; border: 0; border-radius: 0; -webkit-appearance: none; appearance: none;
	font-family: var(--bs); font-weight: 900; font-size: 24px; line-height: 1.1; text-transform: uppercase;
	padding: 13px 26px; cursor: pointer;
}
.qform .send:hover { background: #ff6a26; }
.qform .send:disabled { opacity: .7; cursor: progress; }
.qform .wpcf7-spinner { margin: 0 0 0 4px; flex: none; }
.sub2 .req { font-size: 13px; color: var(--mut); }
.sub2 .req i { color: var(--req); font-style: normal; }

/* CF7 validation and response */
.qform .wpcf7-not-valid-tip { color: var(--req); font-size: 13px; font-weight: 600; margin-top: 4px; display: block; }
.qform .wpcf7-not-valid:not(.wpcf7-checkbox):not(.wpcf7-radio) { border-color: var(--req); border-width: 2px; }
.qform .wpcf7-response-output { margin: 14px 0 0 !important; padding: 10px 14px !important; font-weight: 700; color: var(--text); border-width: 2px !important; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--okbd) !important; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-color: var(--or) !important; }
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: var(--req) !important; }
.qform .wpcf7-turnstile, .qform .wpcf7-recaptcha { margin: 6px 0 12px; }

/* Fallback when CF7 is missing */
.qform-fallback { border-top: 1px solid var(--line); padding-top: 16px; }
.qform-fallback-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-o {
	display: inline-flex; align-items: center; gap: 8px; background: var(--or); color: #231F20; text-decoration: none;
	font-family: var(--bs); font-weight: 900; font-size: 22px; text-transform: uppercase; padding: 10px 18px;
}
.admin-note { background: #fff3a8; color: #3d3300; padding: 8px 12px; border: 1px dashed #c9b23a; font-size: 13px; }

/* ==========================================================================
   What we do (rows), how it works (steps)
   ========================================================================== */
.rows .wrap { padding-top: 30px; padding-bottom: 6px; }
.row { display: grid; grid-template-columns: 1fr 1.2fr; border-top: 1px solid var(--line); padding: 12px 0; align-items: center; gap: 0 20px; }
.row .cap { font-weight: 900; font-size: 34px; line-height: 1.05; margin: 0; }
.row .cap a { color: var(--text); text-decoration: none; }
.row .cap a:hover { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.row-r { display: flex; gap: 14px; align-items: center; }
.row-img { width: 120px; height: auto; flex: none; border: 1px solid var(--bd); }
.row p { margin: 0; color: var(--text2); }

.how .lbl { margin: 22px 0 8px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 0 26px; margin: 0; list-style: none; }
.steps li { background: var(--card); border: 1px solid var(--line); padding: 14px; }
.steps b { font-family: var(--bs); font-weight: 900; font-size: 34px; color: var(--or); display: block; line-height: 1; }
.steps h3 { font-family: var(--bs); font-weight: 800; font-size: 19px; margin: 6px 0 4px; text-transform: uppercase; }
.steps p { margin: 0; font-size: 13.5px; color: var(--text2); }

/* ==========================================================================
   Clearview band (C7, C8): text on orange always #231F20
   ========================================================================== */
.cv { background: var(--or); color: #231F20; }
.cv-in { padding-top: 30px; padding-bottom: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.cv .k { font-weight: 700; letter-spacing: .14em; font-size: 13px; text-transform: uppercase; margin: 0; }
.cv .t { font-family: var(--bs); font-weight: 900; font-size: 56px; line-height: .9; text-transform: uppercase; margin: 6px 0 10px; }
.cv .t a { color: #231F20; text-decoration: none; }
.cv .t a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.cv-p { margin: 0; font-size: 15px; }
.cv figure { margin: 0; }
.cv img { width: 100%; height: auto; display: block; border: 4px solid #fff; }
.cv .cr { font-size: 11px; margin-top: 6px; }

/* ==========================================================================
   Brand strip: baked tiles (white or dark) so they hold up in forced dark
   ========================================================================== */
.brands .wrap { padding-top: 30px; padding-bottom: 36px; }
.brands .lbl { margin-top: 0; }
.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
.tile { border: 1px solid var(--bd); background: #fff; line-height: 0; }
.tile img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews .lbl { margin: 30px 0 12px; }
.revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 0 34px; }
.rv { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--or); padding: 16px 18px; margin: 0; }
.rv .s { color: var(--star); letter-spacing: 2px; font-size: 15px; }
.rv .s-q { color: var(--mut); }
.rv-q { margin: 8px 0 10px; }
.rv-q p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.rv .w { font-size: 13px; color: var(--mut); font-weight: 600; }

/* ==========================================================================
   Contact and hours + click-to-load map
   ========================================================================== */
.contact { background: var(--card); border-top: 6px solid var(--or); }
.contact-in { padding-top: 26px; padding-bottom: 34px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items: stretch; }
.contact .lbl { margin-top: 0; }
.contact-addr { font-family: var(--bs); font-weight: 900; font-size: 30px; line-height: 1; text-transform: uppercase; margin: 0 0 14px; }
.contact-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.contact-list small, .contact-h3 { display: block; font: 700 10px/1.4 var(--ws); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin: 0 0 2px; }
.contact-list a { font-family: var(--bs); font-weight: 800; font-size: 21px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { text-decoration: underline; }
.hrs { margin: 0; font-size: 14px; line-height: 1.6; }
.hrs div { display: flex; }
.hrs dt { width: 84px; flex: none; color: #aaa; }
.hrs dd { margin: 0; }
.hrs-l dt { color: var(--mut); }
.map { position: relative; min-height: 300px; background: var(--paper); border: 1px solid var(--bd); display: flex; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-ph { margin: auto; text-align: center; padding: 24px; }
.map-ph .ico { width: 44px; height: 44px; color: var(--or); }
.map-a { font-weight: 700; margin: 8px 0 12px; }
.map-btn { display: inline-block; font-size: 20px; padding: 10px 22px; }
.map-note { font-size: 12.5px; color: var(--mut); margin: 6px 0 10px; }
.map-open { font-weight: 700; font-size: 14px; text-underline-offset: 3px; }
.no-js .map-btn, .no-js .map-note { display: none; }
.map.is-loaded .map-ph { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--hero); color: #f3f1ed; }
.foot { padding-top: 26px; padding-bottom: 22px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.1fr; gap: 20px; font-size: 14px; }
.flogo { grid-column: 1 / -1; padding: 4px 0 18px; border-bottom: 1px solid #333; margin-bottom: 6px; }
.flogo img { height: 46px; width: auto; display: block; }
.foot small { display: block; font-size: 10px; letter-spacing: .16em; font-weight: 700; color: #aaa; margin-bottom: 4px; text-transform: uppercase; }
.foot small.gap { margin-top: 16px; }
.foot .fb { display: block; font-family: var(--bs); font-weight: 800; font-size: 21px; line-height: 1.1; color: #f3f1ed; text-decoration: none; }
.foot .fb:hover { text-decoration: underline; }
.foot div:nth-child(2) .fb { text-transform: uppercase; }
.foot .fe { overflow-wrap: anywhere; }
.site-footer :focus-visible { outline-color: #ffd27a; }
.flinks { grid-column: 1 / -1; border-top: 1px solid #333; padding-top: 12px; }
.fmenu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fmenu a { color: #e2ded7; font-size: 13.5px; text-underline-offset: 3px; }
.legal { background: var(--legal); color: #9a968f; font-size: 12px; padding: 10px 0; }

/* ==========================================================================
   Inner pages (page.php, index.php, 404.php)
   ========================================================================== */
.page-hero { background: var(--hero); color: #f3f1ed; }
.page-hero .wrap { padding-top: 34px; padding-bottom: 28px; }
.page-h1 { font-family: var(--bs); font-weight: 900; font-size: clamp(40px, 6vw, 64px); line-height: .95; margin: 8px 0 0; text-transform: uppercase; }
.entry-in { padding-top: 30px; padding-bottom: 40px; }
.entry h2, .entry h3 { font-family: var(--bs); font-weight: 900; text-transform: uppercase; line-height: 1.05; }
.entry a { text-underline-offset: 3px; }
.entry .wp-block-button__link { background: var(--or); color: #231F20; border-radius: 0; font-family: var(--bs); font-weight: 900; text-transform: uppercase; font-size: 20px; }
.meta { color: var(--mut); font-size: 13px; margin: 0 0 10px; }
.list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--or); padding: 14px 16px; }
.card img { display: block; margin: -14px -16px 12px; width: calc(100% + 32px); max-width: none; }
.card-h { font-family: var(--bs); font-weight: 900; font-size: 24px; line-height: 1.05; text-transform: uppercase; margin: 0 0 4px; }
.card-h a { color: var(--text); text-decoration: none; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btns a.b { display: inline-block; font-size: 22px; padding: 10px 22px; }
.btns a.b-ghost { background: transparent; color: var(--text); border: 2px solid var(--text); }
.search-form { display: flex; gap: 8px; margin-top: 20px; }
.search-form input[type="search"] { font: inherit; font-size: 16px; padding: 10px 12px; background: var(--field); color: var(--text); border: 1px solid var(--fieldbd); }
.search-form input[type="submit"] { font: 700 15px var(--ws); padding: 10px 16px; background: var(--text); color: var(--card); border: 0; cursor: pointer; }
.nav-links { display: flex; gap: 14px; margin-top: 20px; font-weight: 700; }

.cta-band { background: var(--card); border-top: 6px solid var(--or); border-bottom: 1px solid var(--line); }
.cta-in { padding-top: 24px; padding-bottom: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cta-band h2 { font-family: var(--bs); font-weight: 900; font-size: 32px; line-height: 1; text-transform: uppercase; margin: 0 0 6px; }
.cta-band p { margin: 0; color: var(--text2); }
.cta-r { text-align: center; }
.cta-r a.b { font-size: 23px; padding: 13px 28px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.qf { scroll-margin-top: 66px; }
	.tb2-in { grid-template-columns: 1fr 1fr; }
	.tb2h { grid-column: 1 / -1; max-width: none; }
	.tb2c { grid-column: 1 / -1; }
	.strip { grid-template-columns: repeat(4, 1fr); }
	.foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.hero-in { grid-template-columns: 1fr; gap: 10px; }
	.gp { margin-top: 6px; }
	.hr-in, .cv-in, .contact-in, .cta-in { grid-template-columns: 1fr; }
	.tbx-in { grid-template-columns: 1fr; }
	.tbxb { padding: 14px 0; }
	.tbxb + .tbxb { border-left: 0; border-top: 1px solid #4a4542; padding-left: 0; }
	.steps { grid-template-columns: 1fr 1fr; }
	.revs { grid-template-columns: 1fr; }
	.deals-in { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.wrap { padding-left: 16px; padding-right: 16px; }
	.hdr-in { padding: 0 4px 0 0; }
	.hero-in { padding-top: 26px; padding-bottom: 26px; }
	.h1 { font-size: 60px; }
	.tb2-in { grid-template-columns: 1fr; }
	.qf-in { padding-top: 20px; padding-bottom: 24px; }
	.qfh h2 { font-size: 30px; }
	.g4 { grid-template-columns: 1fr 1fr; }
	.s2, .s4 { grid-column: 1 / -1; }
	.tbonly legend .hint, .tronly legend .hint { display: none; }
	.g4 .fld select { font-size: 15px; padding: 10px 8px; }
	.sub2 { flex-wrap: nowrap; }
	/* Submit clears Podium's 160 px bubble column (signoff.md 5e) */
	.qform .send { flex: 0 0 calc(100% - 170px); font-size: 20px; padding: 13px 10px; }
	.row { grid-template-columns: 1fr; }
	.steps { grid-template-columns: 1fr; }
	.cv .t { font-size: 48px; }
	.strip { grid-template-columns: repeat(2, 1fr); }
	.foot { grid-template-columns: 1fr; }
	.contact-list { grid-template-columns: 1fr; }
	/* Podium's greeting (Toby, 340x160) shows on every page, but steps aside while the
	   Get a price form is on screen so it can't sit over the fields (theme.js sets the class). */
	.btt-form-in-view #podium-prompt { display: none !important; }
}

/* ==========================================================================
   v1.1: inner pages, posts, archives, search, footer additions
   ========================================================================== */
.page-meta { margin: 10px 0 0; color: #c9c5bd; font-size: 14px; }
.page-meta a { color: #f3f1ed; }
.section-nav { background: var(--card); border-bottom: 1px solid var(--line); }
.section-nav .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 10px; padding-bottom: 10px; }
.section-nav-l { font: 700 11px/1.2 var(--ws); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.section-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.section-nav a {
	display: inline-flex; align-items: center; min-height: 36px; padding: 5px 12px; border-radius: 999px;
	border: 1px solid var(--fieldbd); background: var(--field); color: var(--text); text-decoration: none; font-weight: 600; font-size: 13.5px;
}
.section-nav a:hover { border-color: var(--text); }
.section-nav a[aria-current="page"] { background: var(--or); border-color: var(--or); color: #231F20; }

/* Entry content (block editor + builder output + pasted email layouts in posts) */
.entry-in > * { max-width: 820px; }
.entry--builder .entry-in > *, .entry-in > .wpb-content-wrapper, .entry-in > .alignwide, .entry-in > .alignfull, .entry-in > .list,
.entry-in > .wp-block-columns, .entry-in > .wp-block-group.is-wide, .entry-in > .brand-grid, .entry-in > .dept-grid, .entry-in > .map,
.entry-in > .wp-block-table, .entry-in > .contact-split { max-width: none; }
.entry-in { overflow-wrap: break-word; }
.entry img { max-width: 100%; height: auto; }
.entry iframe, .entry video, .entry embed, .entry object { max-width: 100%; }
.entry h2 { font-size: 30px; margin: 1.4em 0 .4em; }
.entry h3 { font-size: 22px; margin: 1.2em 0 .4em; }
.entry h4 { font-family: var(--bs); font-weight: 900; text-transform: uppercase; font-size: 19px; margin: 1em 0 .3em; }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry li { margin: 3px 0; }
.entry table { border-collapse: collapse; max-width: 100%; background: transparent; }
.entry table:not(.has-fixed-layout) { display: block; overflow-x: auto; }
.entry th, .entry td { border: 0; padding: 4px 6px; vertical-align: top; }
.entry .wp-block-table { margin: 1.2em 0; overflow-x: auto; }
.entry .wp-block-table table { display: table; width: 100%; background: var(--card); }
.entry .wp-block-table th, .entry .wp-block-table td { border: 1px solid var(--bd); padding: 8px 10px; text-align: left; font-size: 14px; }
.entry .wp-block-table thead th { background: var(--hero); color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.entry .wp-block-table tbody tr:nth-child(even) td { background: var(--paper); }
.entry .wp-block-image { margin: 1em 0; }
.entry .wp-block-image img { border: 1px solid var(--bd2); }
.entry .wp-block-image figcaption { font-size: 12.5px; color: var(--mut); margin-top: 4px; }
.entry .callout { background: var(--card); border-left: 6px solid var(--or); padding: 12px 16px; margin: 1em 0; }
.entry .callout p { margin: .3em 0; }
.entry-thumb { display: block; margin: 0 0 16px; max-height: 520px; width: auto; }
.entry .wp-block-buttons { margin: 1em 0; }
.entry .wp-block-button__link { padding: 10px 20px; text-decoration: none; }

/* Lists inside content that are not bullet lists */
.entry .dept-grid, .entry .brand-grid, .entry .contact-list { padding-left: 0; }
.entry .one-stop { columns: 3 180px; column-gap: 24px; }
.entry .one-stop li { break-inside: avoid; }

/* Department grids (landing pages) */
.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 1em 0 1.5em; padding: 0; list-style: none; }
.dept-grid li { margin: 0; }
.dept-grid a {
	display: block; height: 100%; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--or);
	padding: 14px 16px; color: var(--text); text-decoration: none;
}
.dept-grid a:hover { border-color: var(--text); border-top-color: var(--or); }
.dept-grid strong { display: block; font-family: var(--bs); font-weight: 900; font-size: 22px; text-transform: uppercase; line-height: 1.05; margin-bottom: 4px; }
.dept-grid span { display: block; font-size: 13.5px; color: var(--text2); }

/* Brands we fit (from the old Trek Hardware page) */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 1em 0 1.5em; padding: 0; list-style: none; }
.brand-grid li { margin: 0; }
.brand-grid a { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 12px; background: #fff; border: 1px solid var(--bd); color: #231F20; text-decoration: none; text-align: center; font-size: 13px; font-weight: 600; }
.brand-grid img { max-height: 70px; width: auto; border: 0 !important; }
/* Supplier logo in page content: white plate so dark-ink logos stay readable in dark mode. */
.entry .wp-block-image.is-logo img { width: 160px; height: auto; padding: 10px; background: #fff; border: 1px solid var(--bd); }

/* Inner-page Get a price button + footnotes */
.price-cta { margin: 1.2em 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.price-cta a.b {
	display: inline-block; background: var(--or); color: #231F20; text-decoration: none;
	font-family: var(--bs); font-weight: 900; font-size: 22px; text-transform: uppercase; padding: 10px 22px;
}
.price-cta a.b:hover { background: #ff6a26; }
.price-cta a.t { font-weight: 700; color: var(--link); text-underline-offset: 3px; }
.fn-block { font-size: 12.5px; color: var(--mut); border-top: 1px solid var(--line); margin-top: 1.5em; padding-top: 8px; }
.fn-block p { margin: 0 0 4px; }
.fn-block sup { font-weight: 700; color: var(--text); font-size: 13px; }

/* Contact page */
.contact-split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items: stretch; margin: 1em 0; }
.contact-card { background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--or); padding: 18px 20px; }
.map-page { min-height: 360px; }

/* Posts list */
.entry-list > * { max-width: none; }
.card .card-img { display: block; margin: -14px -16px 12px; }
.card .card-img img { display: block; width: 100%; height: auto; margin: 0; }
.card-x p { margin: 0 0 8px; font-size: 14px; color: var(--text2); }
.card-more { font-weight: 700; font-size: 14px; text-underline-offset: 3px; }
.archive-desc { margin-bottom: 16px; color: var(--text2); }
.pagination { margin-top: 24px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--fieldbd); background: var(--card); color: var(--text); text-decoration: none; font-weight: 700;
}
.pagination .page-numbers.current { background: var(--or); border-color: var(--or); color: #231F20; }
.post-nav { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 14px; font-weight: 700; }
.post-nav a { text-underline-offset: 3px; }
.post-nav-next { text-align: right; }
.back-blog { margin-top: 14px; font-weight: 700; }
.none { font-size: 16px; }

/* Search form */
.search-form { display: flex; gap: 0; margin: 16px 0; max-width: 520px; }
.search-form input[type="search"] { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px; background: var(--field); color: var(--text); border: 1px solid var(--fieldbd); border-right: 0; border-radius: 0; }
.search-form button { font: 700 15px var(--ws); padding: 10px 16px; background: var(--text); color: var(--card); border: 0; border-radius: 0; cursor: pointer; }
.site-footer .search-form input[type="search"] { background: #1b1a19; color: #f3f1ed; border-color: #8f897f; }
.site-footer .search-form input[type="search"]::placeholder { color: #a29c93; }
.site-footer .search-form button { background: var(--or); color: #231F20; }
.nav-extra .search-form { margin: 14px 0 0; }

/* Footer testimonial */
.ftesti { grid-column: 1 / -1; border-top: 1px solid #333; padding-top: 12px; }
.ftesti p { margin: 0; font-size: 15px; color: #e2ded7; font-style: italic; }
.ftesti .ftesti-w { font-style: normal; color: #aaa; font-size: 13px; margin-top: 4px; }

/* Collapsible "More details" in the form */
.qform details.more { margin-top: 12px; border: 1px dashed var(--fieldbd); background: var(--paper); }
.qform .tbonly details.more, .qform .tronly details.more { background: var(--card); }
.qform details.more > summary {
	cursor: pointer; padding: 10px 12px; min-height: 44px; display: flex; align-items: center; gap: 6px;
	font-weight: 700; font-size: 14px; color: var(--text); list-style: none;
}
.qform details.more > summary::-webkit-details-marker { display: none; }
.qform details.more > summary::before { content: "+"; display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; background: var(--legb); color: var(--legt); font-weight: 800; }
.qform details.more[open] > summary::before { content: "\2212"; }
.qform details.more > .g { padding: 0 12px 12px; margin-top: 0; }

@media (max-width: 760px) {
	.contact-split { grid-template-columns: 1fr; }
	.post-nav { flex-direction: column; }
	.post-nav-next { text-align: left; }
}

/* Print: drop chrome */
@media print {
	.site-header .nav, .mob-act, .mode, .map, #podium-widget, .qf, .shop-b, .shop-strip, .toby { display: none !important; }
	body { background: #fff; color: #000; }
}

/* Old posts pasted from email (classic content only, body class btt-legacy-post):
   neutralise inline text colours and dark span backgrounds that fail contrast (most
   of all in dark mode), and give the pasted orange buttons the signoff's dark text on
   orange. Only background-color is cleared, so inline background images stay. */
.btt-legacy-post .entry [style*="color"], .btt-legacy-post .entry [style*="COLOR"] { color: inherit !important; }
.btt-legacy-post .entry :is(span, font)[style*="background"] { background-color: transparent !important; }
.btt-legacy-post .entry a[style*="background"] { color: #fff !important; }
.btt-legacy-post .entry a[style*="#f36c21"], .btt-legacy-post .entry a[style*="#F36C21"] { color: #231F20 !important; }
/* Dark mode: pasted light boxes (inline background) go transparent so the text stays readable. */
:root[data-theme="dark"] .btt-legacy-post .entry :is(div, p, td, th, table)[style*="background"] { background-color: transparent !important; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .btt-legacy-post .entry :is(div, p, td, th, table)[style*="background"] { background-color: transparent !important; }
}

/* ==========================================================================
   1.2.0 (Addendum 6): Shop online push, Toby "Text us" card, second-hand
   trailer list, photo slots
   ========================================================================== */
/* Shop online: a dark button in the orange bar (desktop) ... */
.shop-b {
	display: inline-flex; align-items: center; gap: 10px; align-self: center;
	background: #231F20; color: #fff; text-decoration: none; padding: 7px 14px 7px 11px; line-height: 1.05;
}
.shop-b .ico { width: 26px; height: 26px; color: var(--or); }
.shop-bt { display: flex; flex-direction: column; }
.shop-bl { font-family: var(--bs); font-weight: 900; font-size: 21px; text-transform: uppercase; letter-spacing: .02em; }
.shop-bu { font-size: 12px; font-weight: 600; color: #f3f1ed; letter-spacing: .02em; }
.shop-b:hover { background: #000; }
.shop-b:hover .shop-bl { text-decoration: underline; text-underline-offset: 3px; }
.hdr .call { gap: 20px; }
/* Desktop colour switch is icon-only to make room (names stay for screen readers and as tooltips). */
.hdr .mode-t {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important;
}
.hdr .mode-b { padding: 4px 8px; }
@media (max-width: 1260px) {
	.hdr b { font-size: 21px; margin-left: 6px; }
	.hdr .call { gap: 14px; }
	.shop-bl { font-size: 19px; }
}
/* ... and a strip under the orange bar on phones and tablets */
.shop-strip { display: none; }
@media (max-width: 1140px) {
	.shop-b { display: none; }
	.shop-strip { display: block; background: var(--card); border-bottom: 1px solid var(--line); }
	.shop-strip-in {
		display: flex; align-items: center; gap: 10px; min-height: 44px; padding-top: 8px; padding-bottom: 8px;
		color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600;
	}
	.shop-strip-in b { font-weight: 800; text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 3px; }
	.shop-strip-in .ico { width: 22px; height: 22px; color: var(--or); }
	.shop-strip-in .ico-arrow { margin-left: auto; width: 20px; height: 20px; color: var(--text); }
	.shop-strip-in:hover span, .shop-strip-in:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
	.shop-strip :focus-visible { outline-offset: -3px; }
}
@media (max-width: 380px) { .shop-strip-in { font-size: 14px; gap: 8px; } }

/* Shop online in the main menu: cart icon, outlined on desktop */
.nav .menu .menu-shop > a::before {
	content: ""; display: inline-block; width: 18px; height: 18px; margin: 0 7px 3px 0; vertical-align: middle;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 3.5h2.6l2.3 10.6a1.2 1.2 0 0 0 1.2.9h8.9a1.2 1.2 0 0 0 1.2-.9l1.8-7.6H6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9.3' cy='19.4' r='1.7'/%3E%3Ccircle cx='17' cy='19.4' r='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 3.5h2.6l2.3 10.6a1.2 1.2 0 0 0 1.2.9h8.9a1.2 1.2 0 0 0 1.2-.9l1.8-7.6H6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9.3' cy='19.4' r='1.7'/%3E%3Ccircle cx='17' cy='19.4' r='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 1141px) {
	.nav .menu .menu-shop > a { box-shadow: inset 0 0 0 2px var(--text); padding: 8px 12px 7px; margin: 6px 6px; border-bottom: 0; }
	.nav .menu .menu-shop > a:hover { background: var(--text); color: var(--card); }
}

/* Toby the Towball "Text us" card (home hero, Contact us, [btt_toby]) */
.toby {
	display: flex; align-items: center; gap: 14px; max-width: 470px;
	background: var(--card); color: var(--text); border: 1px solid var(--bd); border-left: 5px solid var(--or);
	padding: 12px 16px 12px 12px; margin: 18px 0 0;
}
.toby-pic {
	flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: #fff;
	display: flex; justify-content: center; box-shadow: 0 0 0 2px var(--bd);
}
.toby-pic img { width: 62px; height: auto; margin-top: 3px; display: block; max-width: none; }
.toby-q { margin: 0 0 8px; font-weight: 700; font-size: 17px; line-height: 1.25; }
.toby-a { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.toby-b {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px;
	background: var(--or); color: #231F20; text-decoration: none;
	font-family: var(--bs); font-weight: 900; font-size: 21px; text-transform: uppercase;
}
.toby-b .ico { width: 20px; height: 20px; }
.toby-b:hover { background: #ff6a26; }
.toby-n { font-weight: 700; white-space: nowrap; }
.toby-page { margin: 24px 0; }
@media (max-width: 380px) { .toby { gap: 10px; padding-right: 10px; } .toby-pic { width: 64px; height: 64px; } .toby-pic img { width: 52px; } }

/* Second-hand trailers */
.used-empty { font-size: 18px; font-weight: 700; padding: 14px 16px; background: var(--card); border: 1px solid var(--bd); border-left: 5px solid var(--or); }
.used-list { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.used-card { background: var(--card); border: 1px solid var(--bd); display: flex; flex-direction: column; }
.used-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.used-t { padding: 12px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.used-t h3 { margin: 0 0 6px; }
.used-cta { margin: auto 0 0; padding-top: 8px; }
.used-cta a.b {
	display: inline-block; background: var(--or); color: #231F20; text-decoration: none;
	font-family: var(--bs); font-weight: 900; font-size: 20px; text-transform: uppercase; padding: 8px 16px;
}
.used-cta a.b:hover { background: #ff6a26; }

/* Photo slots: a filled slot is a plain figure; an empty one is only shown to editors */
.btt-photo { margin: 18px 0; }
.btt-photo img { display: block; max-width: 100%; height: auto; }
.btt-photo-slot { border: 3px dashed var(--fieldbd); background: var(--paper); padding: 18px; color: var(--text); }
.btt-photo-need b { display: inline-block; background: var(--or); color: #231F20; padding: 1px 6px; margin-right: 6px; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.btt-photo-need small { color: var(--mut); }
.entry ul.used-list { padding-left: 0; margin-left: 0; }
@media (max-width: 380px) { .foot > * { min-width: 0; } .foot .fb { overflow-wrap: anywhere; } }
@media (min-width: 1141px) and (max-width: 1199px) {
	.nav .menu a { padding-left: 8px; padding-right: 8px; }
	.nav .menu .menu-shop > a { margin: 6px 2px; padding: 8px 8px 7px; }
}

/* 1.2.1: rotating reviews, News & Deals filter, editor-only placeholders, trailer cards */
.revs > [hidden], .ftesti-rot > [hidden] { display: none !important; }
.ftesti figure { margin: 0; }
.news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.news-filter a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--fieldbd); border-radius: 999px; color: var(--text); background: var(--card); text-decoration: none; font-weight: 700; font-size: 14px; }
.news-filter a[aria-current="page"] { background: var(--or); border-color: var(--or); color: #231F20; }
.deals-post { display: flex; gap: 14px; align-items: flex-start; }
.deals-post .deals-img { width: 72px; height: 72px; object-fit: cover; flex: none; }
.deals-t { margin: 0 0 4px; font-family: var(--bs); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.deals-t a { color: var(--text); text-decoration: none; }
.deals-t a:hover { text-decoration: underline; }
.btt-todo { border: 3px dashed var(--req); background: var(--paper); padding: 12px 14px; margin: 14px 0; color: var(--text); font-size: 14px; }
.btt-todo b { display: inline-block; background: var(--req); color: var(--card); padding: 1px 6px; margin-right: 6px; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.brand-grid li > span.brand-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 12px; background: #fff; border: 1px solid var(--bd); color: #231F20; text-align: center; font-size: 13px; font-weight: 600; }
.brand-list { columns: 2 220px; }

/* 1.2.3: one headline number (Saima's review), service area, FAQ, brand cards */
.phone-block small { display: block; font: 700 10px/1.4 var(--ws); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin: 0 0 2px; }
.phone-block .pb-main { display: inline-block; font-family: var(--bs); font-weight: 900; font-size: 34px; line-height: 1.05; color: var(--text); text-decoration: none; }
.phone-block .pb-main:hover { text-decoration: underline; }
.phone-block .pb-sec { list-style: none; margin: 8px 0 16px; padding: 0; font-size: 15px; }
.phone-block .pb-sec li { margin: 3px 0; }
.phone-block .pb-sec span { display: inline-block; min-width: 3.6em; color: var(--mut); font-size: 13px; }
.phone-block .pb-sec a { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.entry .phone-block .pb-sec { padding-left: 0; }
.foot { grid-template-columns: 1.2fr 1.4fr 1.1fr; }
.foot .phone-block small { color: #aaa; font-size: 10px; margin-bottom: 4px; }
.foot .phone-block .pb-main { color: #f3f1ed; font-size: 30px; }
.foot .phone-block .pb-sec span { color: #aaa; }
.foot .phone-block .pb-sec a { color: #f3f1ed; }
.svc-area { margin: 12px 0 0; font-size: 14px; }
.svc-area small { display: block; font: 700 10px/1.4 var(--ws); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin: 0 0 2px; }
.foot .svc-area { color: #e2ded7; }
.foot .svc-area small { color: #aaa; }
.foot .btt-todo { background: transparent; color: #f3f1ed; }
.faq { margin: 2em 0 1em; }
.faq-i { border-top: 1px solid var(--line); }
.faq-i:last-child { border-bottom: 1px solid var(--line); }
.faq-i > summary { cursor: pointer; list-style: none; padding: 12px 34px 12px 0; position: relative; font-weight: 700; font-size: 17px; min-height: 44px; }
.faq-i > summary::-webkit-details-marker { display: none; }
.faq-i > summary::after { content: "+"; position: absolute; right: 6px; top: 8px; font: 800 24px/1 var(--bs); color: var(--or); }
.faq-i[open] > summary::after { content: "\2212"; }
.faq-i > p { margin: 0 0 14px; color: var(--text2); }
.brand-cards { margin: 1em 0; }
.brand-group { margin: 0 0 18px; }
.brand-group-h { margin: 0 0 8px; font-size: 20px; }
.brand-group-h a { color: var(--text); text-decoration: none; }
.brand-group-h a:hover { text-decoration: underline; }
.brand-grid .brand-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 64px; padding: 12px; background: #fff; border: 1px solid var(--bd); color: #231F20; text-decoration: none; text-align: center; font-size: 13px; font-weight: 600; }
.brand-grid a.brand-tile:hover { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.brand-grid .brand-tile img { max-height: 54px; width: auto; }
.brand-grid .brand-name { font-family: var(--bs); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .foot { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .foot { grid-template-columns: 1fr; } }
/* 1.2.3: the Home item (Saima's review) needs room: desktop menu one size smaller so it stays on one line */
@media (min-width: 1141px) {
	.nav .menu > li > a { font-size: 16px; padding-left: 6px; padding-right: 6px; }
	.nav .menu > li:first-child > a { padding-left: 0; }
	.nav .menu .menu-shop > a { padding: 8px 9px 7px; margin: 6px 3px; }
	.nav .menu .menu-cta > a { font-size: 19px; padding: 9px 14px 8px; }
}

/* 1.2.3: outbound supplier links shown as plain text (inc/links.php) */
a.unlinked { color: inherit; text-decoration: none; cursor: auto; }
.wp-block-button:has(> a.unlinked) { display: none; }

/* 1.2.4: service-area line (Addendum 7) as a full-width footer row */
.foot .fsvc { grid-column: 1 / -1; }
.foot .fsvc .svc-area { margin: 0; font-size: 13px; line-height: 1.55; color: #cfcac2; max-width: 100ch; }
.svc-page, .svc-home { max-width: 62ch; }
.contact-l .svc-home { margin: 12px 0 18px; }