(hub)
*
(city)
* either on the wrapper itself or on a section inside it. Every .ram-bg::before
* within the wrapper picks up the variable via inheritance.
*
* Assets live in img/truck-accident/, paths are relative from this file.
*
* Naming convention: .truck-page is the foundation pattern. When other
* practice areas adopt this component library, the prefix likely refactors
* to .lh-page or similar.
*/
/* Port shim: the londonharker theme's globals.css sets h1-h6 to var(--ink);
this design relies on band-scoped inheritance. Restore it (early in file so
any explicit heading colors below still win the cascade). */
.truck-page h1, .truck-page h2, .truck-page h3,
.truck-page h4, .truck-page h5, .truck-page h6 { color: inherit; }
/* Fonts: Cormorant Garamond (headings) + Inter (body) — both already
self-hosted via OMGF and used elsewhere on the site. No new font
registration needed. */
/* ============================================
WRAPPER + DESIGN TOKENS
============================================ */
.truck-page {
--navy: #1c252c;
--navy-2: #334553;
--navy-deep: #141b21;
--gold: #c7a87a;
--gold-soft: #d8c19c;
--gold-deep: #a8884f;
--paper: #f7f4ee;
--paper-2: #efe9df;
--ink: #23262b;
--ink-soft: #4a4f57;
--line: rgba(199, 168, 122, .35);
--shadow: 0 18px 50px -20px rgba(20, 27, 33, .45);
--serif: 'Fraunces', Georgia, serif;
--sans: 'Outfit', system-ui, sans-serif;
font-family: var(--sans);
color: var(--ink);
background: var(--paper);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
/* Watermark variant hooks — applied to wrapper or any section inside it */
.truck-page.ram-on-navy,
.truck-page .ram-on-navy { --ram: url("../img/truck-accident/ram-navy.png"); }
.truck-page.ram-on-gold,
.truck-page .ram-on-gold { --ram: url("../img/truck-accident/ram-gold.png"); }
/* Body-level effects — can't be prefixed under .truck-page, scoped via :has() */
html:has(.truck-page) { scroll-behavior: smooth; }
body:has(.truck-page) { overflow-x: hidden; }
/* ============================================
RESETS & TYPOGRAPHY
============================================ */
.truck-page * { margin: 0; padding: 0; box-sizing: border-box; }
.truck-page h1, .truck-page h2, .truck-page h3, .truck-page h4 { font-family: var(--serif); font-weight: 600; line-height: 1.13; letter-spacing: .01em; }
.truck-page a { color: inherit; }
/* ============================================
SHARED ATOMS
============================================ */
.truck-page .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.truck-page .narrow { max-width: 860px; }
.truck-page .eyebrow { font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; color: var(--gold-deep); }
.truck-page .eyebrow.on-navy { color: var(--gold); }
.truck-page .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .04em; text-decoration: none; border-radius: 3px; transition: .25s; cursor: pointer; border: none; font-size: .95rem; }
.truck-page .btn-gold { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: var(--navy-deep); padding: 16px 30px; box-shadow: 0 10px 30px -10px rgba(199, 168, 122, .6); }
.truck-page .btn-gold:hover { transform: translateY(-2px); }
.truck-page .btn-ghost { border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; padding: 14.5px 26px; }
.truck-page .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.truck-page .btn-navy { background: var(--navy-deep); color: #fff; padding: 15px 30px; }
.truck-page .btn-navy:hover { background: #000; transform: translateY(-2px); }
/* Ram watermark helper */
.truck-page .ram-bg { position: relative; overflow: hidden; }
.truck-page .ram-bg::before {
content: "";
position: absolute;
width: min(46vw, 520px);
aspect-ratio: 1;
right: -6%;
top: 50%;
transform: translateY(-50%);
background-image: var(--ram);
background-size: contain;
background-repeat: no-repeat;
opacity: .05;
pointer-events: none;
z-index: 0;
}
.truck-page .ram-bg > * { position: relative; z-index: 1; }
/* Topbar */
.truck-page .topbar { background: var(--navy-deep); border-bottom: 1px solid rgba(199, 168, 122, .2); }
.truck-page .topbar-in { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.truck-page .topbar img { height: 54px; width: auto; display: block; }
.truck-page .topbar .tnums { display: flex; align-items: center; gap: 22px; }
.truck-page .topbar .tnums span { color: rgba(255, 255, 255, .6); font-size: .8rem; letter-spacing: .04em; }
.truck-page .topbar .tnums a { color: var(--gold); font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.truck-page .topbar a.ph { color: var(--gold); font-weight: 700; text-decoration: none; font-size: 1rem; }
/* Hero — shared base */
.truck-page .hero { position: relative; background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-2) 100%); color: #fff; overflow: hidden; }
.truck-page .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(199, 168, 122, .18), transparent 45%); }
.truck-page .hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft), var(--gold)); }
.truck-page .hero .ramwm { position: absolute; right: -4%; bottom: -12%; width: min(40vw, 460px); opacity: .07; z-index: 0; }
.truck-page .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center; padding: 30px 0 70px; }
.truck-page .crumb { position: relative; z-index: 1; font-size: .78rem; color: rgba(255, 255, 255, .6); padding: 22px 0 26px; }
.truck-page .crumb a:hover { color: var(--gold); }
.truck-page .crumb span { color: var(--gold); }
.truck-page .hero h1 { font-size: clamp(2.7rem, 5.5vw, 4.4rem); margin: 8px 0 18px; }
.truck-page .hero h1 em { font-style: normal; color: var(--gold); display: block; }
.truck-page .hero-lede { font-size: 1.18rem; color: rgba(255, 255, 255, .82); max-width: 33em; margin-bottom: 28px; }
.truck-page .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.truck-page .hero-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(199, 168, 122, .3); backdrop-filter: blur(4px); border-radius: 8px; padding: 30px; }
.truck-page .hero-card h3 { color: var(--gold); font-size: 1.4rem; margin-bottom: 6px; }
.truck-page .hero-card p { font-size: .9rem; color: rgba(255, 255, 255, .7); margin-bottom: 20px; }
.truck-page .hstat { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(199, 168, 122, .25); border: 1px solid rgba(199, 168, 122, .25); border-radius: 6px; overflow: hidden; }
.truck-page .hstat div { background: var(--navy); padding: 18px 16px; }
.truck-page .hstat .n { font-family: var(--serif); font-size: 1.85rem; color: var(--gold); font-weight: 700; line-height: 1; }
.truck-page .hstat .l { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-top: 6px; }
/* Sections */
.truck-page section { padding: 80px 0; }
.truck-page .band-navy { background: var(--navy); color: #fff; }
.truck-page .band-navy h2, .truck-page .band-navy h3, .truck-page .band-navy h4 { color: #fff; }
.truck-page .sec-head { max-width: 48em; margin-bottom: 44px; }
.truck-page .sec-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 14px 0 16px; }
.truck-page .sec-head p { font-size: 1.08rem; color: var(--ink-soft); }
.truck-page .band-navy .sec-head p { color: rgba(255, 255, 255, .75); }
.truck-page .prose p { font-size: 1.06rem; color: var(--ink-soft); margin-bottom: 16px; max-width: 60em; }
.truck-page .band-navy .prose p { color: rgba(255, 255, 255, .82); }
.truck-page .lead-link { color: var(--gold-deep); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line); }
.truck-page .band-navy .lead-link { color: var(--gold); }
/* Shared component: causes grid */
.truck-page .causes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.truck-page .cause { background: rgba(255, 255, 255, .04); border: 1px solid rgba(199, 168, 122, .22); border-radius: 7px; padding: 24px; transition: .25s; }
.truck-page .cause:hover { background: rgba(199, 168, 122, .1); border-color: var(--gold); transform: translateY(-3px); }
.truck-page .cause h4 { color: var(--gold); font-size: 1.2rem; margin-bottom: 8px; }
.truck-page .cause p { font-size: .92rem; color: rgba(255, 255, 255, .72); }
.truck-page .cause a { color: var(--gold-soft); font-weight: 600; text-decoration: none; font-size: .86rem; border-bottom: 1px solid rgba(199, 168, 122, .4); }
/* Shared component: liable parties grid */
.truck-page .liable { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.truck-page .lcell { background: #fff; padding: 30px 26px; transition: .25s; }
.truck-page .lcell:hover { background: var(--paper-2); }
.truck-page .lcell h4 { font-size: 1.2rem; margin-bottom: 8px; }
.truck-page .lcell p { font-size: .92rem; color: var(--ink-soft); }
.truck-page .lcell a { color: var(--gold-deep); font-weight: 600; text-decoration: none; font-size: .85rem; }
/* Shared component: FAQ accordion */
.truck-page .faq { max-width: 820px; margin: 0 auto; }
.truck-page .faq details { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.truck-page .faq summary { cursor: pointer; list-style: none; padding: 22px 26px; font-family: var(--serif); font-size: 1.3rem; color: var(--navy); font-weight: 600; display: flex; justify-content: space-between; gap: 20px; }
.truck-page .faq summary::-webkit-details-marker { display: none; }
.truck-page .faq summary::after { content: "+"; font-size: 1.7rem; color: var(--gold-deep); transition: .25s; }
.truck-page .faq details[open] summary::after { transform: rotate(45deg); }
.truck-page .faq details[open] summary { border-bottom: 1px solid var(--line); }
.truck-page .faq .ans { padding: 18px 26px 24px; color: var(--ink-soft); font-size: 1rem; }
/* Shared component: contact form band */
.truck-page .form-band { background: var(--paper-2); }
.truck-page .form-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; }
.truck-page .form-copy h2 { font-size: clamp(2rem, 3.5vw, 2.7rem); margin-bottom: 14px; }
.truck-page .form-copy p { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 24px; }
.truck-page .trust { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.truck-page .trust div { display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--navy); }
.truck-page .trust .dot { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--navy); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: .9rem; }
/* Endnote + mobile callbar */
.truck-page .endnote { background: var(--navy-deep); color: rgba(255, 255, 255, .5); text-align: center; padding: 30px 0; font-size: .82rem; }
.truck-page .endnote img { height: 60px; margin-bottom: 14px; opacity: .9; }
.truck-page .endnote a { color: var(--gold); }
.truck-page .callbar { display: none; }
/* ============================================
HUB-ONLY COMPONENTS
============================================ */
/* E-E-A-T author bar */
.truck-page .eeat { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.truck-page .eeat-in { display: flex; align-items: center; gap: 18px; padding: 16px 0; flex-wrap: wrap; }
.truck-page .eeat .badge { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.truck-page .eeat .badge b { color: var(--navy); }
.truck-page .eeat .chk { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); position: relative; flex: 0 0 auto; }
.truck-page .eeat .chk::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 10px; border-right: 2px solid var(--navy-deep); border-bottom: 2px solid var(--navy-deep); transform: rotate(45deg); }
.truck-page .eeat .sep { width: 1px; height: 26px; background: var(--line); }
.truck-page .eeat a { color: var(--gold-deep); font-weight: 600; text-decoration: none; }
/* Sticky TOC (drives scroll-spy in truck-accident.js) */
.truck-page .toc { background: var(--paper-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; transition: box-shadow .25s, background .25s; }
.truck-page .toc.stuck { box-shadow: 0 8px 24px -12px rgba(20, 27, 33, .35); background: rgba(247, 244, 238, .95); backdrop-filter: blur(8px); }
.truck-page .toc-inner { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 15px 0; font-size: .84rem; font-weight: 600; }
.truck-page .toc-inner a { text-decoration: none; color: var(--ink-soft); padding: 4px 0; border-bottom: 2px solid transparent; transition: .2s; }
.truck-page .toc-inner a:hover, .truck-page .toc-inner a.active { color: var(--navy); border-color: var(--gold); }
.truck-page .toc-inner .toc-label { color: var(--gold-deep); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; align-self: center; }
.truck-page section[id] { scroll-margin-top: 72px; }
/* Triad of intro cards */
.truck-page .triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.truck-page .tcard { position: relative; padding: 34px 28px 30px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); border-top: 3px solid var(--gold); }
.truck-page .tcard .num { font-family: var(--serif); font-size: 3rem; color: var(--paper-2); font-weight: 700; line-height: .7; position: absolute; top: 18px; right: 22px; }
.truck-page .tcard h3 { font-size: 1.45rem; margin-bottom: 10px; }
.truck-page .tcard p { color: var(--ink-soft); font-size: .98rem; }
/* FMCSA regulations + hours-of-service */
.truck-page .regs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
.truck-page .reg { background: rgba(255, 255, 255, .04); border: 1px solid rgba(199, 168, 122, .22); border-radius: 8px; padding: 22px; display: flex; gap: 16px; align-items: flex-start; }
.truck-page .reg .code { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 1.15rem; flex: 0 0 auto; line-height: 1.2; }
.truck-page .reg p { font-size: .92rem; color: rgba(255, 255, 255, .75); margin: 0; }
.truck-page .reg b { color: #fff; }
.truck-page .hos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.truck-page .hos div { background: var(--navy-deep); border: 1px solid rgba(199, 168, 122, .25); border-radius: 8px; padding: 20px 16px; text-align: center; }
.truck-page .hos .n { font-family: var(--serif); font-size: 2.2rem; color: var(--gold); font-weight: 700; line-height: 1; }
.truck-page .hos .l { font-size: .78rem; color: rgba(255, 255, 255, .65); margin-top: 7px; }
/* Statistics grid */
.truck-page .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.truck-page .stat { background: #fff; border-radius: 10px; padding: 28px 22px; box-shadow: var(--shadow); border-bottom: 3px solid var(--gold); text-align: center; }
.truck-page .stat .n { font-family: var(--serif); font-size: 2.6rem; color: var(--navy); font-weight: 700; line-height: 1; }
.truck-page .stat .l { font-size: .9rem; color: var(--ink-soft); margin-top: 8px; }
.truck-page .src { font-size: .8rem; color: var(--ink-soft); margin-top: 22px; font-style: italic; }
.truck-page .src a { color: var(--gold-deep); }
/* Injuries grid */
.truck-page .inj { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.truck-page .icard { background: rgba(255, 255, 255, .04); border: 1px solid rgba(199, 168, 122, .22); border-radius: 8px; padding: 22px; }
.truck-page .icard h4 { color: var(--gold); font-size: 1.1rem; margin-bottom: 7px; }
.truck-page .icard p { font-size: .88rem; color: rgba(255, 255, 255, .72); }
/* Damages split layout */
.truck-page .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.truck-page .checklist { list-style: none; margin-top: 8px; }
.truck-page .checklist li { position: relative; padding: 12px 0 12px 38px; border-bottom: 1px solid rgba(20, 27, 33, .08); font-size: 1rem; color: var(--ink); }
.truck-page .checklist li::before { content: ""; position: absolute; left: 0; top: 14px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); }
.truck-page .checklist li::after { content: ""; position: absolute; left: 6.5px; top: 18px; width: 5px; height: 9px; border-right: 2px solid var(--navy-deep); border-bottom: 2px solid var(--navy-deep); transform: rotate(45deg); }
.truck-page .dmg { background: #fff; border-radius: 8px; padding: 30px; box-shadow: var(--shadow); }
.truck-page .dmg h4 { font-size: 1.25rem; color: var(--navy); margin: 18px 0 8px; display: flex; align-items: center; gap: 10px; }
.truck-page .dmg h4:first-child { margin-top: 0; }
.truck-page .dmg h4 .tag { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--paper-2); color: var(--gold-deep); padding: 4px 9px; border-radius: 20px; }
.truck-page .dmg p { font-size: .95rem; color: var(--ink-soft); }
/* Process steps */
.truck-page .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: s; }
.truck-page .stepc { background: #fff; border-radius: 8px; padding: 24px 20px; box-shadow: var(--shadow); position: relative; }
.truck-page .stepc .sn { font-family: var(--serif); font-size: 1.1rem; color: var(--navy-deep); background: var(--gold); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 14px; }
.truck-page .stepc h4 { font-size: 1.12rem; margin-bottom: 7px; color: var(--navy); }
.truck-page .stepc p { font-size: .86rem; color: var(--ink-soft); }
/* Cities grid */
.truck-page .cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.truck-page .city { position: relative; display: block; text-decoration: none; background: linear-gradient(160deg, var(--navy-2), var(--navy)); border: 1px solid rgba(199, 168, 122, .3); border-radius: 10px; padding: 28px 24px; overflow: hidden; transition: .3s; }
.truck-page .city::after { content: "→"; position: absolute; right: 22px; bottom: 20px; color: var(--gold); font-size: 1.4rem; transition: .3s; }
.truck-page .city:hover { transform: translateY(-4px); border-color: var(--gold); }
.truck-page .city:hover::after { transform: translateX(6px); }
.truck-page .city .place { font-family: var(--serif); font-size: 1.55rem; color: #fff; font-weight: 600; }
.truck-page .city .sub { color: var(--gold); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-top: 4px; }
.truck-page .city p { color: rgba(255, 255, 255, .65); font-size: .86rem; margin-top: 12px; }
/* Related-links cluster */
.truck-page .cluster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.truck-page .chip { display: block; text-decoration: none; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 6px; padding: 18px 20px; transition: .22s; }
.truck-page .chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.truck-page .chip .k { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.truck-page .chip .t { font-family: var(--serif); font-size: 1.12rem; color: var(--navy); margin-top: 4px; line-height: 1.2; }
/* Case results */
.truck-page .results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.truck-page .rcard { background: var(--navy-deep); border: 1px solid rgba(199, 168, 122, .3); border-radius: 10px; padding: 28px; text-align: center; }
.truck-page .rcard .amt { font-family: var(--serif); font-size: 2.4rem; color: var(--gold); font-weight: 700; }
.truck-page .rcard .case { color: rgba(255, 255, 255, .7); font-size: .92rem; margin-top: 6px; }
.truck-page .results-note { font-size: .82rem; color: rgba(255, 255, 255, .5); margin-top: 18px; font-style: italic; }
/* CTA band */
.truck-page .cta-band { background: linear-gradient(135deg, var(--gold-deep), var(--gold)); color: var(--navy-deep); text-align: center; padding: 68px 0; }
.truck-page .cta-band h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; }
.truck-page .cta-band p { font-size: 1.15rem; max-width: 34em; margin: 0 auto 26px; color: rgba(20, 27, 33, .8); }
/* Author bio */
.truck-page .bio { background: #fff; border-radius: 12px; padding: 34px; box-shadow: var(--shadow); display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; border-top: 4px solid var(--gold); }
.truck-page .bio .ph { width: 92px; height: 92px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.truck-page .bio .ph img { width: 74px; height: auto; opacity: .92; }
.truck-page .bio .ph img.headshot { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.truck-page .bio h3 { font-size: 1.5rem; color: var(--navy); margin-bottom: 4px; }
.truck-page .bio .role { color: var(--gold-deep); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.truck-page .bio p { color: var(--ink-soft); font-size: .96rem; }
/* ============================================
CITY-ONLY COMPONENTS
============================================ */
/* Hero office card */
.truck-page .office { background: rgba(255, 255, 255, .05); border: 1px solid rgba(199, 168, 122, .3); border-radius: 10px; padding: 26px; }
.truck-page .office h3 { color: var(--gold); font-size: 1.3rem; margin-bottom: 14px; }
.truck-page .office .row { display: flex; gap: 10px; font-size: .92rem; color: rgba(255, 255, 255, .8); padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.truck-page .office .row:last-child { border: none; }
.truck-page .office .row b { color: #fff; font-weight: 600; flex: 0 0 64px; }
.truck-page .office .call { margin-top: 16px; display: block; text-align: center; background: var(--gold); color: var(--navy-deep); font-weight: 700; padding: 12px; border-radius: 4px; text-decoration: none; }
/* Reviews block in hero (sandy/provo variant — heber/lehi regression resolved here) */
.truck-page .reviews { background: rgba(255, 255, 255, .05); border: 1px solid rgba(199, 168, 122, .3); backdrop-filter: blur(4px); border-radius: 10px; padding: 28px; position: relative; z-index: 1; }
.truck-page .reviews .rtop { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.truck-page .reviews .gmark { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; color: #4285F4; font-size: 1.2rem; flex: 0 0 auto; }
.truck-page .reviews .rstars { font-size: 1.05rem; letter-spacing: 2px; color: var(--gold); line-height: 1; }
.truck-page .reviews .rmeta { font-size: .82rem; color: rgba(255, 255, 255, .7); margin-top: 3px; }
.truck-page .reviews blockquote { margin: 16px 0; font-family: var(--serif); font-size: 1.18rem; line-height: 1.4; color: #fff; font-style: italic; position: relative; padding-left: 18px; border-left: 3px solid var(--gold); }
.truck-page .reviews .qattr { font-size: .82rem; color: var(--gold-soft); font-weight: 600; font-style: normal; margin-top: 8px; font-family: var(--sans); }
.truck-page .reviews .rfacts { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0; font-size: .84rem; color: rgba(255, 255, 255, .75); }
.truck-page .reviews .rfacts b { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gold); margin-bottom: 2px; }
.truck-page .reviews .rlink { display: block; text-align: center; margin-top: 18px; font-size: .84rem; color: var(--gold-soft); text-decoration: none; font-weight: 600; }
.truck-page .reviews .rlink:hover { color: #fff; }
/* Local context band */
.truck-page .local { background: var(--paper); padding: 64px 0; }
.truck-page .local-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.truck-page .local h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 12px 0 16px; }
.truck-page .local p { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 14px; }
.truck-page .roads { background: #fff; border-radius: 10px; padding: 26px; box-shadow: var(--shadow); border-top: 3px solid var(--gold); }
.truck-page .roads h4 { font-size: 1.3rem; margin-bottom: 14px; color: var(--navy); }
.truck-page .roads ul { list-style: none; }
.truck-page .roads li { position: relative; padding: 10px 0 10px 26px; font-size: .96rem; color: var(--ink-soft); border-bottom: 1px solid var(--paper-2); }
.truck-page .roads li:last-child { border: none; }
.truck-page .roads li::before { content: ""; position: absolute; left: 0; top: 16px; width: 9px; height: 9px; background: var(--gold); border-radius: 50%; }
.truck-page .roads li b { color: var(--navy); }
/* Why-us reasons */
.truck-page .reasons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.truck-page .reason { text-align: center; padding: 8px; }
.truck-page .reason .n { font-family: var(--serif); font-size: 2.4rem; color: var(--gold); font-weight: 700; line-height: 1; }
.truck-page .reason h4 { font-size: 1.02rem; margin: 8px 0 6px; color: #fff; }
.truck-page .reason p { font-size: .82rem; color: rgba(255, 255, 255, .66); }
/* Hub callout banner */
.truck-page .hubcta { background: linear-gradient(135deg, var(--gold-deep), var(--gold)); color: var(--navy-deep); border-radius: 14px; padding: 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.truck-page .hubcta h3 { font-size: 1.7rem; margin-bottom: 6px; }
.truck-page .hubcta p { color: rgba(20, 27, 33, .8); font-size: 1rem; max-width: 42em; }
/* Compensation mini */
.truck-page .comp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.truck-page .ccard { background: #fff; border-radius: 10px; padding: 26px; box-shadow: var(--shadow); }
.truck-page .ccard .tag { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.truck-page .ccard h4 { font-size: 1.25rem; color: var(--navy); margin: 6px 0 10px; }
.truck-page .ccard p { font-size: .93rem; color: var(--ink-soft); }
/* Office + map band (sandy/provo) */
.truck-page .officeband { background: var(--paper); padding: 64px 0; }
.truck-page .office-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 42px; align-items: stretch; }
.truck-page .office-info { background: #fff; border-radius: 12px; padding: 32px; box-shadow: var(--shadow); border-top: 3px solid var(--gold); display: flex; flex-direction: column; justify-content: center; }
.truck-page .office-info h3 { font-size: 1.6rem; color: var(--navy); margin-bottom: 18px; }
.truck-page .office-info .line { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--paper-2); font-size: .96rem; color: var(--ink-soft); }
.truck-page .office-info .line:last-of-type { border: none; }
.truck-page .office-info .line b { color: var(--navy); flex: 0 0 84px; font-weight: 600; }
.truck-page .office-info .obtn { margin-top: 18px; display: inline-flex; gap: 10px; }
.truck-page .mapwrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); min-height: 340px; }
.truck-page .mapwrap iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 960px) {
.truck-page .hero-grid, .truck-page .hero-grid.with-img, .truck-page .split, .truck-page .form-grid, .truck-page .local-grid, .truck-page .office-grid { grid-template-columns: 1fr; gap: 38px; }
.truck-page .triad, .truck-page .causes, .truck-page .liable, .truck-page .cities, .truck-page .regs, .truck-page .comp { grid-template-columns: 1fr 1fr; }
.truck-page .cluster, .truck-page .inj, .truck-page .stats { grid-template-columns: 1fr 1fr; }
.truck-page .steps { grid-template-columns: 1fr 1fr 1fr; }
.truck-page .hos { grid-template-columns: 1fr 1fr; }
.truck-page .results { grid-template-columns: 1fr; }
.truck-page .reasons { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.truck-page .hubcta { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 600px) {
.truck-page section, .truck-page .local, .truck-page .officeband { padding: 54px 0; }
.truck-page .triad, .truck-page .causes, .truck-page .liable, .truck-page .cities, .truck-page .cluster, .truck-page .inj, .truck-page .stats, .truck-page .regs, .truck-page .steps, .truck-page .hos, .truck-page .comp, .truck-page .reasons { grid-template-columns: 1fr; }
.truck-page .hstat { grid-template-columns: 1fr 1fr; }
.truck-page .toc, .truck-page .topbar .tnums span { display: none; }
.truck-page .bio { grid-template-columns: 1fr; text-align: center; }
.truck-page .bio .ph { margin: 0 auto; }
.truck-page .callbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--navy); border-top: 2px solid var(--gold); }
.truck-page .callbar a { flex: 1; text-align: center; padding: 15px; text-decoration: none; color: #fff; font-weight: 700; font-size: .95rem; }
.truck-page .callbar a.c { background: var(--gold); color: var(--navy-deep); }
body:has(.truck-page) { padding-bottom: 54px; }
}
/* ============================================
GRAVITY FORMS — dark card inside .form-band
Scoped strictly under .truck-page .form-band so Form 2 renders
normally everywhere else on the site (footer, sidebars, etc).
============================================ */
.truck-page .form-band .form-card-inner {
background: var(--navy);
border-radius: 12px;
padding: 36px 32px;
box-shadow: var(--shadow);
border-top: 4px solid var(--gold);
}
.truck-page .form-band .form-card-inner > h3 {
color: #fff;
font-size: 1.6rem;
margin-bottom: 6px;
}
.truck-page .form-band .form-card-inner > .sub {
color: rgba(255, 255, 255, .6);
font-size: .9rem;
margin-bottom: 22px;
}
.truck-page .form-band .form-card-inner > .disc {
font-size: .74rem;
color: rgba(255, 255, 255, .45);
margin-top: 14px;
text-align: center;
}
.truck-page .form-band .gform_wrapper {
background: transparent;
margin: 0;
}
.truck-page .form-band .gform_wrapper .gform_fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
list-style: none;
margin: 0;
padding: 0;
}
.truck-page .form-band .gform_wrapper .gform_fields > .gfield {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
}
/* Zero margins on label / .ginput_container / description so the
.gfield gap: 6px is the sole vertical-spacing source — keeps paired
fields aligned regardless of GF's per-input-type margin defaults. */
.truck-page .form-band .gform_wrapper .gfield > * {
margin: 0;
}
/* Suppress GF legacy clearfix pseudos on .gf_left_half (::before
display:block) and .gf_right_half (::after display:table). They were
built for float-based half-width layouts but here they pack the flex
column's children asymmetrically, offsetting right-column inputs
~6px above left. Our grid handles column layout — clearfix is dead
weight. Do not remove without re-verifying paired-field alignment. */
.truck-page .form-band .gform_wrapper .gfield::before,
.truck-page .form-band .gform_wrapper .gfield::after {
content: none !important;
display: none !important;
}
.truck-page .form-band .gform_wrapper .gform_fields > .gfield:has(textarea) {
grid-column: 1 / -1;
}
.truck-page .form-band .gform_wrapper .gfield_label {
color: #fff;
font-size: .74rem;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 700;
font-family: var(--sans);
}
.truck-page .form-band .gform_wrapper input[type="text"],
.truck-page .form-band .gform_wrapper input[type="email"],
.truck-page .form-band .gform_wrapper input[type="tel"],
.truck-page .form-band .gform_wrapper textarea {
width: 100%;
background: #fff;
border: 1px solid var(--line);
border-radius: 7px;
padding: 13px 14px;
color: var(--ink);
font-family: var(--sans);
font-size: .95rem;
}
.truck-page .form-band .gform_wrapper input[type="text"]:focus,
.truck-page .form-band .gform_wrapper input[type="email"]:focus,
.truck-page .form-band .gform_wrapper input[type="tel"]:focus,
.truck-page .form-band .gform_wrapper textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(199, 168, 122, .25);
}
.truck-page .form-band .gform_wrapper input::placeholder,
.truck-page .form-band .gform_wrapper textarea::placeholder {
color: rgba(35, 38, 43, .45);
}
/* Force full-width inputs inside the card — overrides GF legacy width
classes (.medium = 50%, .large, etc.) and gf_left_half / gf_right_half
container/field widths and floats that ship with the plugin. */
.truck-page .form-band .gform_wrapper .gfield {
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
.truck-page .form-band .gform_wrapper .gfield .ginput_container,
.truck-page .form-band .gform_wrapper .gfield .ginput_container_text,
.truck-page .form-band .gform_wrapper .gfield .ginput_container_email,
.truck-page .form-band .gform_wrapper .gfield .ginput_container_phone,
.truck-page .form-band .gform_wrapper .gfield .ginput_container_textarea {
width: 100% !important;
max-width: 100% !important;
}
.truck-page .form-band .gform_wrapper .gfield input[type="text"],
.truck-page .form-band .gform_wrapper .gfield input[type="email"],
.truck-page .form-band .gform_wrapper .gfield input[type="tel"],
.truck-page .form-band .gform_wrapper .gfield textarea {
width: 100% !important;
box-sizing: border-box;
}
.truck-page .form-band .gform_wrapper .gform_footer {
margin-top: 18px;
padding: 0;
}
.truck-page .form-band .gform_wrapper .gform_button {
width: 100%;
display: block;
background: linear-gradient(180deg, var(--gold-soft), var(--gold));
color: var(--navy-deep);
padding: 17px;
border: none;
border-radius: 3px;
font-weight: 700;
letter-spacing: .04em;
font-size: .95rem;
font-family: var(--sans);
cursor: pointer;
box-shadow: 0 10px 30px -10px rgba(199, 168, 122, .6);
transition: .25s;
}
.truck-page .form-band .gform_wrapper .gform_button:hover {
transform: translateY(-2px);
}
.truck-page .form-band .gform_wrapper .gfield_required,
.truck-page .form-band .gform_wrapper .validation_message {
color: var(--gold-soft);
}
@media (max-width: 600px) {
.truck-page .form-band .form-card-inner { padding: 28px 22px; }
.truck-page .form-band .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
}