/* ==========================================================================
CARTREX RENTALS — DESIGN SYSTEM
Locked from concepts/concept-final.html (Concept E base + Concept F cards)
Phase 2 — shared stylesheet for the full site.
========================================================================== */
/* --- 1. TOKENS ----------------------------------------------------------- */
:root {
/* Brand */
--teal: #155263;
--teal-dark: #0d3f4d;
--teal-deep: #082b35;
--teal-tint: #e8f1f3;
--teal-tint-2: #dcebee;
--card-panel: #155263; /* fleet-card image panel — brand teal */
--gold: #ffc93c;
--gold-dark: #dfa71e;
/* Neutrals */
--ink: #14232a;
--ink-soft: #46585f;
--muted: #70828a;
--bg: #ffffff;
--bg-soft: #f5f8f9;
--line: #e1e9eb;
/* Status */
--ok: #1c7a53;
--warn: #9a6b05;
--err: #b3261e;
/* Shape */
--r: 14px;
--r-sm: 8px;
--r-pill: 999px;
/* Type */
--font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: "Inter Tight", Inter, system-ui, sans-serif;
/* Layout */
--wrap: 1240px;
--wrap-narrow: 820px;
--gutter: 24px;
/* Elevation */
--sh-card: 0 1px 6px rgba(8, 43, 53, .07);
--sh-raise: 0 24px 60px rgba(8, 43, 53, .25);
--sh-hero: 0 30px 70px rgba(0, 0, 0, .4);
}
/* --- 2. RESET ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
/* Every ![]()
carries its real pixel width/height so the browser can reserve
the right space before the file arrives (no layout shift). height:auto lets
the height follow once max-width kicks in on a narrow screen — without it
the attribute height sticks and the photo stretches. Rules that set an
explicit height (.logo img, .card-img img, .foot-logo) are more specific
and still win. */
img { height: auto; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--gold); color: var(--teal-deep); padding: 12px 20px; font-weight: 800;
}
.skip-link:focus { left: 0; }
/* --- 3. TYPE ------------------------------------------------------------- */
.display {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
line-height: .96;
letter-spacing: -.015em;
}
h1, h2, h3, h4 { line-height: 1.2; }
.h-xl { font-size: clamp(38px, 5.4vw, 68px); }
.h-lg { font-size: clamp(28px, 4.6vw, 54px); }
.h-md { font-size: clamp(26px, 3.6vw, 40px); }
.h-sm { font-size: clamp(20px, 2.4vw, 26px); }
.lede { font-size: 17px; color: var(--ink-soft); max-width: 60ch; }
.small { font-size: 13.5px; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
/* --- 4. LAYOUT ----------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: 64px 0; }
section.tight { padding: 44px 0; }
section.soft { background: var(--bg-soft); }
section.tintbg { background: var(--teal-tint); }
.sec-head { text-align: center; max-width: 660px; margin: 0 auto 34px; }
.sec-head .display { font-size: clamp(26px, 3.6vw, 40px); color: var(--teal-dark); }
.sec-head .sub { color: var(--muted); margin-top: 8px; font-size: 15px; }
.sec-head.left { text-align: left; margin-left: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.split { display: grid; grid-template-columns: 1fr .95fr; gap: 44px; align-items: center; }
.stack > * + * { margin-top: 14px; }
/* --- 5. BUTTONS ---------------------------------------------------------- */
.btn {
display: inline-block;
font-family: var(--font-display);
font-weight: 800;
padding: 13px 26px;
font-size: 15px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: .02em;
border: 0;
cursor: pointer;
text-align: center;
transition: transform .12s ease, filter .12s ease, background .12s ease, color .12s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn-gold { background: var(--gold); color: var(--teal-deep); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-ink { background: var(--ink); color: var(--gold); }
.btn-line { border: 2px solid var(--teal); color: var(--teal); background: transparent; }
.btn-line:hover { background: var(--teal); color: #fff; }
.btn-line-w { border: 2px solid #ffffff66; color: #fff; background: transparent; }
.btn-line-w:hover { background: #ffffff1a; }
.btn-sm { padding: 9px 16px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-block { display: block; width: 100%; }
/* --- 6. HEADER ----------------------------------------------------------- */
header.site {
background: #fff;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 60;
}
header.site .wrap { display: flex; align-items: center; gap: 28px; height: 74px; }
.logo img { height: 54px; }
nav.main { display: flex; gap: 4px; font-size: 14px; font-weight: 600; }
nav.main a { padding: 9px 14px; border-radius: var(--r-sm); color: var(--ink-soft); }
nav.main a:hover { background: var(--teal-tint); color: var(--teal); }
nav.main a[aria-current="page"] { background: var(--teal-tint); color: var(--teal); }
.head-cta { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.phone { font-size: 14px; font-weight: 700; color: var(--teal); white-space: nowrap; }
.nav-toggle {
display: none; margin-left: auto; background: transparent; border: 2px solid var(--line);
border-radius: var(--r-sm); padding: 8px 12px; font-weight: 800; color: var(--teal); cursor: pointer;
}
.nav-mobile { display: none; border-top: 1px solid var(--line); background: #fff; }
.nav-mobile.is-open { display: block; }
.nav-mobile a {
display: block; padding: 14px var(--gutter); border-bottom: 1px solid var(--line);
font-weight: 700; color: var(--ink-soft);
}
.nav-mobile a:hover { background: var(--teal-tint); color: var(--teal); }
.nav-mobile .m-cta { padding: 16px var(--gutter); display: grid; gap: 10px; }
/* --- 7. HERO ------------------------------------------------------------- */
.hero {
background: var(--teal);
color: #fff;
padding: 64px 0 150px;
position: relative;
overflow: hidden;
}
.hero::after {
content: ""; position: absolute; right: -140px; top: -140px;
width: 460px; height: 460px; border: 44px solid #ffffff12; border-radius: 50%;
}
.hero .wrap { position: relative; z-index: 2; }
.hero-kicker {
display: inline-flex; align-items: center; gap: 10px;
font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
color: var(--gold); margin-bottom: 16px;
}
.hero-kicker::before { content: ""; width: 26px; height: 3px; background: var(--gold); }
.hero h1 { font-size: clamp(38px, 5.4vw, 68px); }
.hero h1 .g { color: var(--gold); }
.hero p.lede { margin-top: 16px; font-size: 17px; color: #ffffffb8; max-width: 46ch; }
.hero-ctas { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hero-img img { border-radius: var(--r); box-shadow: var(--sh-hero); }
/* Compact page hero (interior pages) */
.hero.page { padding: 54px 0 64px; }
.hero.page.with-bar { padding-bottom: 120px; }
.hero.page h1 { font-size: clamp(32px, 4.4vw, 52px); }
.crumbs { font-size: 13px; color: #ffffff8f; margin-bottom: 14px; }
.crumbs a:hover { color: var(--gold); }
.crumbs span { margin: 0 7px; opacity: .5; }
/* --- 8. BOOKING BAR ------------------------------------------------------ */
.bookbar-outer { position: relative; margin-top: -84px; z-index: 20; }
.bookbar {
background: #fff; border-radius: var(--r); box-shadow: var(--sh-raise);
padding: 20px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.1fr auto;
gap: 12px; align-items: end; border-top: 4px solid var(--gold);
}
.bb-field label {
display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.bb-field select, .bb-field input {
width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-sm);
padding: 12px; font-size: 14.5px; background: #fff;
}
.bb-field select:focus, .bb-field input:focus { border-color: var(--teal); outline: none; }
/* --- 9. CATEGORY TILES --------------------------------------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat {
background: var(--teal-tint); border-radius: var(--r); padding: 22px; min-height: 200px;
position: relative; overflow: hidden; display: flex; flex-direction: column;
transition: background .15s ease, transform .15s ease;
}
.cat:hover { background: var(--teal-tint-2); transform: translateY(-4px); }
.cat img { position: absolute; right: -4%; bottom: -2%; width: 60%; }
.cat h3 {
font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
font-size: 20px; color: var(--teal-dark); max-width: 58%; position: relative; z-index: 2;
}
.cat .subcats { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; max-width: 55%; position: relative; z-index: 2; }
.cat .from { margin-top: auto; position: relative; z-index: 2; }
.cat .from b { font-family: var(--font-display); font-weight: 900; font-size: 23px; color: var(--teal); }
.cat .from span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
/* --- 10. FLEET CARDS (Concept F — Gold Punch) ---------------------------- */
.filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.pill {
border: 1.5px solid var(--line); background: #fff; border-radius: var(--r-pill);
padding: 10px 22px; font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pill:hover { border-color: var(--teal); color: var(--teal); }
.pill.on, .pill[aria-selected="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
background: #fff; border: 2px solid var(--ink); display: flex; flex-direction: column;
transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--gold); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px 0; }
.tier { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lic {
font-family: var(--font-display); font-weight: 900; font-size: 11px; letter-spacing: .06em;
padding: 4px 10px; background: var(--teal); color: #fff; text-transform: uppercase; white-space: nowrap;
}
.lic.mr { background: var(--gold); color: var(--ink); }
.lic.hr { background: var(--ink); color: var(--gold); }
/* Fleet-card image panel: brand teal #155263 with the photo sitting on it as
supplied. Fixed height (not aspect-ratio) keeps every box identical across
the 2, 3 and 4-column grids. Transparent-background cutouts exist in
assets/img/fleet/cutout/ if the photos are ever swapped to knock the white
out — see scripts/cutout.ps1 and sample-card-bg.html. */
.card-img {
height: 200px; background: var(--card-panel);
display: grid; place-items: center; padding: 14px 18px;
}
.card-img img { width: 100%; height: 100%; object-fit: contain; }
.card-img.dark { background: var(--card-panel); }
.card-body { padding: 2px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 18px; color: var(--teal-dark); }
.model { font-size: 13px; color: var(--muted); }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { border: 1.5px solid var(--line); padding: 3px 9px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.card-foot { margin-top: auto; padding-top: 12px; border-top: 2px solid var(--ink); display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.price b { font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--teal); }
.price span { display: block; font-size: 11.5px; color: var(--muted); }
.price.tbc b { font-size: 16px; color: var(--ink-soft); }
.card .btn { padding: 9px 16px; font-size: 12.5px; border-radius: var(--r-sm); }
/* --- 11. STATEMENT STRIP ------------------------------------------------- */
.statement { background: var(--gold); padding: 54px 0; text-align: center; }
.statement .display { font-size: clamp(28px, 4.6vw, 54px); color: var(--teal-deep); }
.statement p { margin-top: 10px; font-weight: 600; color: #52400a; }
/* --- 12. SEGMENTS BAND --------------------------------------------------- */
section.segments { background: var(--teal-deep); color: #fff; }
.segments .sec-head .display { color: #fff; }
.segments .sec-head .sub { color: #ffffffa6; }
.seg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.seg {
background: #ffffff0d; border: 1px solid #ffffff1f; border-radius: var(--r);
padding: 22px 18px; transition: background .15s ease;
}
.seg:hover { background: #ffffff1a; }
.seg h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 16px; margin-bottom: 5px; color: var(--gold); }
.seg p { font-size: 12.5px; color: #ffffffa6; }
/* --- 13. OFFERS ---------------------------------------------------------- */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.offer { background: var(--teal-tint); border-radius: var(--r); padding: 26px; }
.offer .pct { font-family: var(--font-display); font-weight: 900; font-size: 52px; color: var(--teal); line-height: 1; }
.offer h3 { font-size: 17px; font-weight: 800; margin: 8px 0 4px; text-transform: uppercase; color: var(--teal-dark); }
.offer p { font-size: 13.5px; color: var(--ink-soft); }
/* --- 14. BLOG ------------------------------------------------------------ */
section.blog { background: var(--bg-soft); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post {
background: #fff; border-radius: var(--r); padding: 22px; box-shadow: var(--sh-card);
transition: transform .15s ease; border-top: 4px solid var(--teal);
display: flex; flex-direction: column;
}
.post:hover { transform: translateY(-3px); }
.post .tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--gold-dark); }
.post h3 { font-size: 17.5px; font-weight: 800; margin: 8px 0 6px; line-height: 1.28; color: var(--teal-dark); }
.post p { font-size: 13.5px; color: var(--muted); }
.post .read { display: inline-block; margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 800; color: var(--teal); }
/* Article body */
.article { padding: 54px 0 72px; }
.article .meta { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.article h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 26px; color: var(--teal-dark); margin: 36px 0 12px; }
.article h3 { font-size: 19px; font-weight: 800; color: var(--teal-dark); margin: 26px 0 8px; }
.article p { margin-bottom: 14px; color: var(--ink-soft); }
.article ul, .article ol { margin: 0 0 16px 20px; color: var(--ink-soft); }
.article li { margin-bottom: 7px; }
.article a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.article strong { color: var(--ink); }
/* --- 15. TABLES ---------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
table.data th, table.data td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
table.data thead th {
background: var(--teal-deep); color: #fff; font-family: var(--font-display); font-weight: 900;
text-transform: uppercase; font-size: 12px; letter-spacing: .07em; border-bottom: 0;
}
table.data tbody tr:hover { background: var(--teal-tint); }
table.data .num { text-align: right; font-weight: 800; color: var(--teal); white-space: nowrap; }
table.data caption { caption-side: bottom; padding-top: 10px; font-size: 12.5px; color: var(--muted); text-align: left; }
/* --- 16. FORMS ----------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px; font-size: 15px; background: #fff;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); outline: none; }
.field .hint { font-size: 12.5px; color: var(--muted); }
.form-note { font-size: 13px; color: var(--muted); margin-top: 14px; }
/* --- 17. PANELS, CALLOUTS, FAQ ------------------------------------------- */
.panel { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); padding: 26px; }
.panel.tint { background: var(--teal-tint); border-color: transparent; }
.panel.edge { border: 2px solid var(--ink); border-radius: 0; }
.panel h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 18px; color: var(--teal-dark); margin-bottom: 8px; }
.callout { display: flex; gap: 14px; border-radius: var(--r); padding: 18px 20px; font-size: 14.5px; }
.callout .ico { font-size: 20px; line-height: 1.2; }
.callout.info { background: var(--teal-tint); color: var(--teal-dark); }
.callout.warn { background: #fff6e0; color: var(--warn); border-left: 4px solid var(--gold); }
.callout.note { background: var(--bg-soft); color: var(--ink-soft); border-left: 4px solid var(--teal); }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
width: 100%; background: transparent; border: 0; text-align: left; cursor: pointer;
padding: 18px 40px 18px 0; font-size: 16px; font-weight: 700; color: var(--teal-dark); position: relative;
}
.faq-q::after {
content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--gold-dark);
}
.faq-item.is-open .faq-q::after { content: "\2013"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-a .inner { padding: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; }
/* --- 18. STEPS / CHOOSER ------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step { position: relative; padding: 26px 22px; background: #fff; border: 2px solid var(--ink); }
.step::before {
counter-increment: step; content: counter(step);
font-family: var(--font-display); font-weight: 900; font-size: 40px; color: var(--gold); line-height: 1;
}
.step h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 17px; color: var(--teal-dark); margin: 6px 0 6px; }
.step p { font-size: 13.5px; color: var(--ink-soft); }
.chooser { display: grid; gap: 14px; }
.q-block { border: 2px solid var(--ink); background: #fff; padding: 22px; }
.q-block > h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 17px; color: var(--teal-dark); margin-bottom: 14px; }
.opts { display: flex; gap: 10px; flex-wrap: wrap; }
.opt {
border: 1.5px solid var(--line); background: #fff; border-radius: var(--r-pill);
padding: 10px 20px; font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
}
.opt:hover { border-color: var(--teal); color: var(--teal); }
.opt.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.result-empty { color: var(--muted); font-size: 14.5px; }
/* --- 19. SPEC LIST ------------------------------------------------------- */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
.specs .row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.specs .k { color: var(--muted); }
.specs .v { font-weight: 700; color: var(--ink); }
/* --- 20. FOOTER ---------------------------------------------------------- */
footer.site { background: var(--teal-deep); color: #a9c4cb; padding: 54px 0 0; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; padding-bottom: 36px; }
footer.site img.foot-logo { height: 44px; margin-bottom: 14px; }
footer.site h4 {
font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
font-size: 13px; letter-spacing: .08em; color: var(--gold); margin-bottom: 12px;
}
footer.site ul { list-style: none; padding: 0; }
footer.site li { margin-bottom: 8px; }
footer.site a:hover { color: #fff; }
footer.site .foot-bottom {
border-top: 1px solid #ffffff1f; padding: 18px 0; display: flex; justify-content: space-between;
gap: 16px; flex-wrap: wrap; font-size: 13px; color: #7fa0aa;
}
.foot-contact strong { color: #fff; display: block; font-size: 16px; }
/* --- 21. UTILITIES ------------------------------------------------------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; } .mt-4 { margin-top: 34px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.flex { display: flex; gap: 12px; flex-wrap: wrap; }
.flex-center { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.badge {
display: inline-block; font-family: var(--font-display); font-weight: 900; font-size: 11px;
letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; background: var(--teal); color: #fff;
}
.badge.gold { background: var(--gold); color: var(--ink); }
.badge.ink { background: var(--ink); color: var(--gold); }
.is-hidden { display: none !important; }
/* --- 22. RESPONSIVE ------------------------------------------------------ */
@media (max-width: 980px) {
.split { grid-template-columns: 1fr; }
.bookbar { grid-template-columns: 1fr 1fr; }
.cat-grid, .grid, .offer-grid, .blog-grid, .grid-3, .grid-4, .steps { grid-template-columns: 1fr 1fr; }
.seg-grid { grid-template-columns: repeat(2, 1fr); }
.foot-grid { grid-template-columns: 1fr 1fr; }
nav.main, .head-cta { display: none; }
.nav-toggle { display: block; }
header.site .wrap { gap: 12px; }
}
@media (max-width: 620px) {
:root { --gutter: 18px; }
section { padding: 48px 0; }
.cat-grid, .grid, .offer-grid, .blog-grid, .bookbar, .grid-2, .grid-3, .grid-4,
.seg-grid, .steps, .form-grid, .specs, .foot-grid { grid-template-columns: 1fr; }
.hero { padding: 44px 0 130px; }
.bookbar-outer { margin-top: -70px; }
.cat img { width: 52%; opacity: .9; }
}
/* --- 23. PRINT ----------------------------------------------------------- */
@media print {
header.site, footer.site, .bookbar-outer, .btn { display: none !important; }
.hero::after { display: none; }
body { color: #000; }
.hero { background: none; color: #000; padding: 0 0 20px; }
.hero h1, .hero .lede { color: #000; }
}
/* --- 24. LEGAL PAGES (terms) --------------------------------------------- */
/* Content markup is carried over verbatim from the Cartrex Rental Terms and
Conditions, so these class names match that document's structure. */
.legal-layout { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: start; }
.legal-toc {
position: sticky; top: 94px; display: flex; flex-direction: column; gap: 2px;
border-left: 2px solid var(--line); padding-left: 4px; max-height: calc(100vh - 130px); overflow-y: auto;
}
.legal-toc a {
display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; font-size: 13px;
font-weight: 600; color: var(--ink-soft); border-radius: var(--r-sm); line-height: 1.35;
}
.legal-toc a:hover { background: var(--teal-tint); color: var(--teal); }
.toc-num {
font-family: var(--font-display); font-weight: 900; font-size: 11px; color: var(--gold-dark);
min-width: 18px; flex-shrink: 0;
}
.legal-body { max-width: 78ch; }
.legal-section { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); scroll-margin-top: 94px; }
.legal-section:last-child { border-bottom: 0; }
.legal-section h2 {
font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
font-size: 24px; color: var(--teal-dark); margin-bottom: 16px; display: flex; gap: 12px; align-items: baseline;
}
.sec-num {
font-size: 15px; color: var(--gold-dark); background: var(--teal-tint);
padding: 4px 10px; border-radius: var(--r-sm); flex-shrink: 0;
}
.legal-sub { font-weight: 800; color: var(--teal); margin: 20px 0 8px; font-size: 15.5px; }
.legal-body p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 10px; }
.legal-body strong { color: var(--ink); }
.legal-list { margin: 0 0 12px 16px; }
.legal-list p { display: flex; gap: 9px; margin-bottom: 7px; }
.legal-list .mark { color: var(--gold-dark); font-weight: 800; flex-shrink: 0; min-width: 26px; }
.legal-list .lvl-a { margin-left: 18px; }
.legal-notice {
background: #fff6e0; border-left: 4px solid var(--gold); border-radius: var(--r-sm);
padding: 14px 18px; margin: 14px 0; font-size: 14px; color: var(--warn);
}
.legal-notice strong { color: var(--warn); }
.legal-meta { font-size: 13.5px; color: #ffffff9c; margin-top: 12px; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0; }
.legal-body table th, .legal-body table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.legal-body table th { background: var(--teal-tint); color: var(--teal-dark); font-weight: 800; }
@media (max-width: 980px) {
.legal-layout { grid-template-columns: 1fr; }
.legal-toc { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; border-left: 0; padding-left: 0; }
.legal-toc a { border: 1px solid var(--line); }
}
/* --- 25. CATEGORY TILES, AVIS-STYLE (fleet landing) ---------------------- */
/* Large 3:2 image, category name, the models inside it, then a View Range
button pinned to the bottom so every tile lines up regardless of list length. */
.vtile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vtile {
background: #fff; border: 2px solid var(--ink); display: flex; flex-direction: column;
transition: transform .15s ease, box-shadow .15s ease;
}
.vtile:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--gold); }
.vtile-img {
aspect-ratio: 3 / 2; background: var(--card-panel);
display: grid; place-items: center; padding: 16px 20px;
}
.vtile-img img { width: 100%; height: 100%; object-fit: contain; }
.vtile-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.vtile-body h3 {
font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
font-size: 22px; color: var(--teal-dark);
}
.vtile-from { font-size: 13px; color: var(--muted); margin-top: 4px; }
.vtile-from b { font-family: var(--font-display); font-weight: 900; font-size: 17px; color: var(--teal); }
.vtile-list { list-style: none; padding: 0; margin: 14px 0 18px; }
.vtile-list li {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-soft);
}
.vtile-list li:last-child { border-bottom: 0; }
.vtile-list .lic { font-size: 10px; padding: 3px 8px; }
.vtile .btn { margin-top: auto; }
@media (max-width: 980px) { .vtile-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .vtile-grid { grid-template-columns: 1fr; } }
/* Vehicle cards match the Avis image proportion too — 3:2 rather than a
short fixed band, so the photos read at the same scale as the tiles. */
.card-img { height: auto; aspect-ratio: 3 / 2; }
/* --- 26. HOME HERO (photographic) ---------------------------------------- */
/* Scoped to .hero.home so the 18 interior page heroes keep the flat teal
panel. The photo sits right, the scrim keeps the left half dark enough
for white display type at any viewport width. */
.hero.home {
background-image:
linear-gradient(100deg,
rgba(8, 43, 53, .93) 0%,
rgba(8, 43, 53, .82) 22%,
rgba(8, 43, 53, .46) 40%,
rgba(8, 43, 53, .13) 56%,
rgba(8, 43, 53, 0) 76%),
url("../img/hero/hero-truck-city.jpg");
background-size: auto, cover;
background-position: center, center right;
background-repeat: no-repeat, no-repeat;
padding: 0 0 150px;
}
.hero.home::after { display: none; }
.hero.home .wrap { padding-top: 46px; }
.hero-copy { max-width: 660px; }
.hero.home h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: .96; letter-spacing: -.015em; }
.hero.home h1 .g { position: relative; display: inline-block; }
.hero.home h1 .g::after {
content: ""; position: absolute; left: 0; right: 0; bottom: .06em;
height: 5px; background: var(--gold); border-radius: 3px;
}
.hero.home p.lede { color: #ffffffcc; max-width: 52ch; }
.hero.home p.lede b { color: #fff; font-weight: 700; }
/* Trust row above the headline */
.hero-trust {
display: flex; flex-wrap: wrap; gap: 10px 34px;
margin-bottom: 30px; padding-bottom: 22px;
border-bottom: 1px solid #ffffff1f;
}
.hero-trust div {
display: flex; align-items: center; gap: 9px;
font-size: 12px; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: #ffffffd0;
}
.hero-trust svg { width: 18px; height: 18px; flex: none; stroke: var(--gold); }
/* Tick list under the lede */
.hero-ticks { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.hero-ticks span {
display: flex; align-items: center; gap: 9px;
font-size: 14px; font-weight: 600; color: #ffffffdb;
}
.hero-ticks span::before {
content: ""; flex: none; width: 19px; height: 19px; border-radius: 50%;
background: var(--gold) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314232a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* Stat strip below the booking bar */
.hero-stats { border-bottom: 1px solid var(--line); }
.hero-stats .wrap {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 20px; padding-top: 30px; padding-bottom: 30px;
}
.hstat { display: flex; align-items: center; gap: 14px; }
.hstat + .hstat { border-left: 1px solid var(--line); padding-left: 22px; }
.hstat svg { width: 30px; height: 30px; flex: none; stroke: var(--teal); }
.hstat b {
display: block; font-family: var(--font-display); font-weight: 900;
font-size: clamp(16px, 1.5vw, 20px); line-height: 1.15; color: var(--teal-dark);
}
.hstat span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 980px) {
.hero.home {
background-image:
linear-gradient(180deg, rgba(8, 43, 53, .93) 0%, rgba(8, 43, 53, .80) 55%, rgba(8, 43, 53, .93) 100%),
url("../img/hero/hero-truck-city-sm.jpg");
background-position: center, center;
}
.hero-stats .wrap { grid-template-columns: 1fr 1fr; }
.hstat:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
.hero.home { padding-bottom: 130px; }
.hero-trust { gap: 8px 20px; }
.hero-trust div { font-size: 11px; }
.hero-stats .wrap { grid-template-columns: 1fr; }
.hstat + .hstat { border-left: 0; padding-left: 0; padding-top: 16px; border-top: 1px solid var(--line); }
}
@media print { .hero.home { background-image: none; } }
/* --- 27. TRADE DEALS ------------------------------------------------------ */
/* Long-hire promo band. Deliberately the only place on the homepage that
still carries a rate, so it has to read as an offer, not a price list. */
.trade-deals { background: var(--teal-deep); color: #fff; position: relative; overflow: hidden; }
.trade-deals::after {
content: ""; position: absolute; left: -120px; bottom: -160px;
width: 420px; height: 420px; border: 40px solid #ffffff0d; border-radius: 50%;
}
.trade-deals .wrap { position: relative; z-index: 2; }
.trade-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.trade-head .display { font-size: clamp(30px, 4.2vw, 46px); color: #fff; }
.trade-head .display .g { color: var(--gold); }
.trade-kicker {
display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.trade-kicker::before { content: ""; width: 26px; height: 3px; background: var(--gold); }
.trade-head p { color: #ffffffb0; font-size: 16px; max-width: 44ch; margin-top: 12px; }
.trade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tdeal {
background: #ffffff0a; border: 1px solid #ffffff1f; border-radius: var(--r);
padding: 24px; display: flex; flex-direction: column; transition: .18s ease;
}
.tdeal:hover { background: #ffffff12; border-color: var(--gold); transform: translateY(-4px); }
.tdeal .tag {
align-self: flex-start; font-family: var(--font-display); font-weight: 900;
font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
background: var(--gold); color: var(--ink); padding: 4px 10px; border-radius: var(--r-sm);
}
.tdeal h3 {
font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
font-size: 20px; color: #fff; margin-top: 16px; line-height: 1.15;
}
.tdeal .tmodel { font-size: 13.5px; color: #ffffff9c; margin-top: 5px; }
.tdeal .tprice { margin-top: 20px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tdeal .tprice b { font-family: var(--font-display); font-weight: 900; font-size: 40px; color: var(--gold); line-height: 1; }
.tdeal .tprice .per { font-size: 13px; color: #ffffffb0; }
.tdeal .twas { font-size: 13px; color: #ffffff70; text-decoration: line-through; }
.tdeal .tsave {
margin-top: 14px; padding-top: 14px; border-top: 1px solid #ffffff1a;
font-size: 13px; font-weight: 600; color: #ffffffcf;
}
.trade-note { margin-top: 26px; font-size: 12px; line-height: 1.6; color: #ffffff85; max-width: 78ch; }
.trade-note strong { color: #ffffffc0; font-weight: 600; }
.trade-cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 980px) { .trade-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .trade-grid { grid-template-columns: 1fr; } }
/* --- 28. NAV DROPDOWN + SEO FOOTER ---------------------------------------- */
/* The seven range pages were previously reachable only from the footer and
fleet.html. This puts them in the header on every page as plain anchors —
CSS-only, no JS, so they are in the DOM for crawlers either way. */
.has-sub { position: relative; }
.has-sub > a { display: inline-flex; align-items: center; gap: 6px; }
.has-sub > a::after {
content: ""; width: 8px; height: 8px; flex: none;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px); transition: transform .16s ease;
}
.has-sub:hover > a::after, .has-sub:focus-within > a::after {
transform: rotate(225deg) translate(-3px, -3px);
}
.subnav {
position: absolute; top: 100%; left: -10px; z-index: 70;
padding-top: 12px; opacity: 0; visibility: hidden;
transform: translateY(-6px); transition: .16s ease;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav {
opacity: 1; visibility: visible; transform: translateY(0);
}
.subnav-inner {
background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold);
border-radius: var(--r); box-shadow: var(--sh-raise);
padding: 10px; width: 330px; display: grid; gap: 2px;
}
.subnav-inner a { display: block; padding: 9px 12px; border-radius: var(--r-sm); }
.subnav-inner a b {
display: block; font-family: var(--font-display); font-weight: 800;
font-size: 14px; color: var(--teal-dark); line-height: 1.25;
}
.subnav-inner a span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.subnav-inner a:hover { background: var(--teal-tint); }
.subnav-inner a:hover b { color: var(--teal); }
.subnav-all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px !important; }
.subnav-all b { color: var(--teal) !important; }
/* Mobile: the range pages sit indented under Fleet */
.nav-mobile a.sub {
padding-left: calc(var(--gutter) + 18px); font-weight: 600; font-size: 14px;
color: var(--muted); background: var(--bg-soft);
}
.nav-mobile a.sub:hover { background: var(--teal-tint); color: var(--teal); }
/* Footer grew from four columns to five, plus a service-area strip */
.foot-grid { grid-template-columns: 1.5fr 1fr 1.15fr 1fr 1.1fr; }
.foot-brand p { max-width: 34ch; }
.foot-inline { color: var(--gold); font-weight: 600; }
.foot-inline:hover { color: #fff; }
footer.site address { font-style: normal; }
.foot-areas { border-top: 1px solid #ffffff1f; padding: 24px 0 4px; }
.foot-areas h4 {
font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
font-size: 13px; letter-spacing: .08em; color: var(--gold); margin-bottom: 10px;
}
.foot-areas p { font-size: 13px; line-height: 1.7; color: #8fb0b9; max-width: 96ch; }
@media (max-width: 1180px) {
nav.main { gap: 0; font-size: 13.5px; }
nav.main a { padding: 9px 10px; }
}
@media (max-width: 1080px) {
.foot-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 980px) {
/* Desktop nav is hidden below this width — the mobile list carries the links */
.subnav { display: none; }
.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
.foot-grid { grid-template-columns: 1fr; }
}
/* --- 29. HERO SLIDER ------------------------------------------------------ */
/* Two hero slides: business (truck) and personal (people mover), so the top of
the homepage speaks to both audiences. Backgrounds are two stacked layers
that crossfade; the copy is stacked in a single grid cell so the section
height is the taller slide and nothing jumps when they swap.
Slide 0 renders fully with JS disabled — the script only adds motion. */
.hero.home { background-image: none; background-color: var(--teal-deep); }
.hero-bg {
position: absolute; inset: 0; z-index: 1;
opacity: 0; transition: opacity .7s ease;
background-size: auto, cover;
background-position: center, center right;
background-repeat: no-repeat, no-repeat;
}
.hero-bg.is-on { opacity: 1; }
.hero-bg[data-hero-bg="0"] {
background-image:
linear-gradient(100deg,
rgba(8, 43, 53, .93) 0%, rgba(8, 43, 53, .82) 22%,
rgba(8, 43, 53, .46) 40%, rgba(8, 43, 53, .13) 56%, rgba(8, 43, 53, 0) 76%),
url("../img/hero/hero-truck-city.jpg");
}
.hero-bg[data-hero-bg="1"] {
background-image:
linear-gradient(100deg,
rgba(8, 43, 53, .93) 0%, rgba(8, 43, 53, .82) 22%,
rgba(8, 43, 53, .46) 40%, rgba(8, 43, 53, .13) 56%, rgba(8, 43, 53, 0) 76%),
url("../img/hero/hero-carnival-city.jpg");
}
.hero-bg[data-hero-bg="2"] {
background-image:
linear-gradient(100deg,
rgba(8, 43, 53, .93) 0%, rgba(8, 43, 53, .82) 22%,
rgba(8, 43, 53, .46) 40%, rgba(8, 43, 53, .13) 56%, rgba(8, 43, 53, 0) 76%),
url("../img/hero/hero-lc300-ocean-road.jpg");
}
/* All slides occupy the same grid cell — height is the tallest of them, so
nothing shifts when they swap. */
.hero-slides { display: grid; }
.hero-slide {
grid-area: 1 / 1;
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.hero-slide.is-on { opacity: 1; visibility: visible; transform: none; }
.hero-dots { display: flex; gap: 10px; margin-top: 28px; }
.hero-dots button {
width: 34px; height: 5px; padding: 0; border: 0; border-radius: var(--r-pill);
background: #ffffff3d; cursor: pointer; transition: background .2s ease, width .2s ease;
}
.hero-dots button:hover { background: #ffffff70; }
.hero-dots button.on { background: var(--gold); width: 52px; }
@media (max-width: 980px) {
.hero-bg { background-position: center, center; }
.hero-bg[data-hero-bg="0"] {
background-image:
linear-gradient(180deg, rgba(8, 43, 53, .93) 0%, rgba(8, 43, 53, .80) 55%, rgba(8, 43, 53, .93) 100%),
url("../img/hero/hero-truck-city-sm.jpg");
}
.hero-bg[data-hero-bg="1"] {
background-image:
linear-gradient(180deg, rgba(8, 43, 53, .93) 0%, rgba(8, 43, 53, .80) 55%, rgba(8, 43, 53, .93) 100%),
url("../img/hero/hero-carnival-city-sm.jpg");
}
.hero-bg[data-hero-bg="2"] {
background-image:
linear-gradient(180deg, rgba(8, 43, 53, .93) 0%, rgba(8, 43, 53, .80) 55%, rgba(8, 43, 53, .93) 100%),
url("../img/hero/hero-lc300-ocean-road-sm.jpg");
}
}
@media print { .hero-bg { display: none; } .hero-dots { display: none; } }
/* --- 30. ENQUIRY FORM STATUS --------------------------------------------- */
/* Honeypot wrapper. Positioned off-screen rather than display:none — some bots
skip fields that are hidden outright, and this one wants to be found. */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The reply line under the submit button. Empty until main.js writes to it, so
it takes up no room on first paint. */
.form-status { grid-column: 1 / -1; margin-top: -2px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status.is-busy { background: #f2f6f7; color: var(--ink-soft); border: 1px solid var(--line); }
.form-status.is-ok { background: #eaf5f0; color: var(--ok); border: 1px solid #bfe3d3; }
.form-status.is-err { background: #fdeeed; color: var(--err); border: 1px solid #f4cbc8; }
.form-status a,
.form-status [data-mailto-fallback] { color: inherit; font-weight: 700; text-decoration: underline; }
.form-status [data-mailto-fallback] { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
/* --- 31. BOOKING BAR NOTE ------------------------------------------------- */
/* Sits under the booking bar. There is one depot, so the pickup select has a
single option — this line is what tells people delivery exists at all, and
that it is priced rather than free. */
.bb-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.bb-note a { color: var(--teal); font-weight: 600; }
/* --- 32. HERO SLIDE HEADING — ONE SIZE ACROSS ALL THREE SLIDES ----------- */
/* Slide 0 (truck) is an ; slides 1 and 2 (Carnival, LC300) are ,
because a page gets exactly one . The size was keyed to the TAG
(`.hero.home h1`), so the truck slide rendered at up to 72px while the other
two fell through to the browser's default h2 and never got a size at all —
the text visibly jumped on every rotation.
Keying on the class instead makes the tag irrelevant, so all three match.
Customer direction 27 Aug 2026: use the Carnival / LC300 size, i.e. the 24px
the h2 slides were already rendering at. To go back to the large treatment,
change the one font-size below to clamp(40px, 5.6vw, 72px). */
.hero.home .hero-slide .display {
font-size: 24px;
line-height: .96;
letter-spacing: -.015em;
}
/* The gold underline swash was h1-only for the same reason. Every slide now
gets it, so the brand device does not appear and vanish as they cycle. */
.hero.home .hero-slide .display .g { position: relative; display: inline-block; }
.hero.home .hero-slide .display .g::after {
content: ""; position: absolute; left: 0; right: 0; bottom: .06em;
height: 5px; background: var(--gold); border-radius: 3px;
}
/* --- 33. HERO PHOTO CLEARS THE BOOKING BAR (DESKTOP) ---------------------- */
/* The booking bar is pulled up over the hero by `margin-top: -84px` (section 8),
and the hero photo was `cover`, so on desktop the bar sat on top of the
vehicle — its wheels and lower body were hidden behind the pickup/return
fields. Reported from a desktop browser; tablet and phone were unaffected.
Why `cover` could not simply be re-anchored: the photos are 1376x768 (16:9)
while the desktop hero box is roughly 2.2:1, so `cover` scales the image to
the hero's WIDTH and crops top and bottom. The vehicle's wheels sit at ~90%
of the image height, which lands at or below the hero's bottom edge at every
common desktop width — so any overlap at all covered it. Nudging
`background-position` cannot fix that: moving the photo up far enough to
clear an 84px bar would crop the vehicle off the bottom instead.
So on desktop the photo is scaled to FIT the height above the bar rather
than to cover the box: `auto calc(100% - 84px)` anchored top right. The
vehicle is then never cropped vertically and always finishes clear of the
bar, at any window width — the calc is relative, so nothing here is tied to
a particular viewport size.
The 84px is the bar's own lift and the two must stay in step: change
`.bookbar-outer { margin-top }` and this value moves with it, or the bar
creeps back over the vehicle.
Left untouched below 981px, where the hero switches to the `-sm` photos with
a vertical scrim and already reads correctly. */
@media (min-width: 981px) {
.hero-bg {
background-size: auto, auto calc(100% - 84px);
background-position: center, right top;
}
}