/*
CHANGE LOG
File: static/css/driver-cost-review.css
Purpose: Layout for https://prohrhq.com/peo/driver-cost-review/<USDOT>, on top of Truck Stop Light's base and
         accordions (static/css/truck-stop-light.css, static/css/iplan-thesis-cards.css) and the site's .ph-table.
How it works: loaded only by templates/driver-cost-review.html. Hero = photo with the headline on its left (sky) side,
         away from the tractor; at 900 px and narrower the headline sits under the photo. .dcr-split = picture beside
         text, sides alternating (--flip); one column at 760 px and narrower. Colors and fonts are the site tokens
         from static/css/prohrhq_public.css. The breadcrumb trail is hidden here (a one-carrier briefing). Since 2026-11-01
         the page has the site's top bar and its phone Menu button.
Version History:
2026-11-03 v2.6 - Hero "Prepared for" line (.dcr-for): gold rule, label, carrier name in the site serif, 1rem of air
                  above the headline (Michael).
2026-11-01 v2.5 - Phone Menu button shown again: the page now has the site's top bar (Michael: one header everywhere).
2026-10-31 v2.4 - Question 1's fleet-size risk chart (shared from the PEO risk page): full width, the site's sans font
                  as on that page; the question heading sits closer above it (.dcr-q).
2026-10-31 v2.3 - Text runs the full page width like the hero and picture sections (Michael, Playwright check:
                  "the text doesn't take up the width that it should"): .dcr-why, .dcr-close and .dcr-cta lose their
                  46rem/44rem caps and paragraphs lose the shared base's 62ch/110ch caps; on phones the base's 32 px
                  side padding is dropped so the column uses the screen (was 286 of 390 px).
2026-10-31 v2.2 - .dcr-pic--story: the PEO page's watercolors keep their full picture (no crop) in the phone-call
                  version of the briefing.
2026-10-30 v2.1 - Work order v2: why-we-contacted-you block, chart under the cost section, closing Paychex section;
                  oversized 17.3% figure and hero booking button removed.
2026-10-30 v2.0 - Redesign (Michael: start with the hero photo, read like a regular web page): hero with headline,
                  alternating picture-and-text sections, large 17.3% figure, booking button as the main action.
2026-10-30 v1.1 - Phones: picture caption under the picture (v1 layout, replaced by v2.0).
2026-10-30 v1.0 - Created.
*/
.ph-breadcrumbs{ display:none; }   /* 2026-11-01: the site menu is back here, so the phone Menu button shows again (was hidden with the breadcrumbs) */
.dcr-page .thesis-story{ max-width:1100px; }
.dcr-page h1, .dcr-page h2{ font-family:var(--font-sans); color:var(--color-navy-deep); }

/* hero */
.dcr-hero{ position:relative; margin:0 0 2.5rem; border-radius:var(--radius); overflow:hidden; }
.dcr-hero-img{ display:block; width:100%; height:auto; }
.dcr-hero-text{ position:absolute; inset:0 auto 0 0; width:56%; padding:2.2rem 2.4rem; display:flex; flex-direction:column;
  justify-content:center; color:#fff;
  background:linear-gradient(to right, rgba(20,33,61,.92) 0%, rgba(20,33,61,.78) 60%, rgba(20,33,61,0) 100%); }
.dcr-hero h1{ margin:.3rem 0 .8rem; font-size:clamp(1.7rem,2.6vw,2.5rem); line-height:1.12; color:#fff; }
.dcr-kicker{ margin:0; font-family:var(--font-sans); font-size:.8rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.8); }
/* 2026-11-03: the carrier the page was prepared for, set like a dedication on a report cover. */
.dcr-for{ margin:1.1rem 0 1rem; }
.dcr-for::before{ content:""; display:block; width:2.75rem; height:2px; margin:0 0 .7rem; background:#f3dfa6; }
.dcr-for-label{ display:block; font-family:var(--font-sans); font-size:.78rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#f3dfa6; }
.dcr-for-name{ display:block; margin-top:.2rem; font-family:var(--font-serif); font-size:clamp(1.6rem,2.5vw,2.25rem);
  font-weight:600; line-height:1.1; color:#f3dfa6; }
.dcr-sub{ margin:0 0 1.2rem; font-size:1.08rem; line-height:1.5; max-width:34ch; }

/* picture beside text */
.dcr-split{ display:grid; grid-template-columns:1fr 1fr; gap:2.2rem; align-items:center; margin:0 0 1.2rem; }
.dcr-split--flip .dcr-pic{ order:2; }
.dcr-pic{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); }
.dcr-pic--cost{ object-position:62% 50%; }
.dcr-pic--review{ object-position:30% 50%; }
.dcr-pic--fleet{ object-position:62% 50%; }
.dcr-pic--story{ aspect-ratio:auto; object-fit:contain; }
.dcr-text h2{ margin:.2rem 0 .7rem; font-size:clamp(1.35rem,2vw,1.8rem); line-height:1.2; }
.dcr-text p{ margin:0 0 .8rem; line-height:1.55; }
.dcr-eyebrow{ font-family:var(--font-sans); font-size:.78rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--color-green); }
.dcr-src{ font-size:.92rem; color:var(--color-text-mute); }
.dcr-src a{ display:inline-block; margin-top:.3rem; }
.dcr-acc{ margin:0 0 2.6rem; }
.dcr-text .dcr-acc{ margin:.4rem 0 0; }
.dcr-svg{ display:block; width:100%; height:auto; margin:.6rem 0 1rem; font-family:var(--font-sans); }
.dcr-svg--tall{ display:none; }
.dcr-facts, .dcr-compare{ width:100%; border-collapse:collapse; margin:0 0 .8rem; }
.dcr-facts th, .dcr-compare th{ width:36%; font-family:var(--font-sans); font-weight:600; color:var(--color-navy-deep);
  vertical-align:top; }

/* why we contacted you, chart, closing */
.dcr-why{ margin:0 0 2.6rem; }
.tsl-page.dcr-page p, .tsl-page.dcr-page section p{ max-width:none !important; }
.dcr-why.dcr-q{ margin:0 0 1.2rem; }
.dcr-chart svg.hv5-chart{ display:block; width:100%; height:auto; font-family:var(--font-sans, Arial, sans-serif); }
.dcr-why h2, .dcr-close h2{ margin:0 0 .6rem; font-size:clamp(1.35rem,2vw,1.8rem); }
.dcr-why p, .dcr-close p{ line-height:1.6; }
.dcr-chart{ margin:.4rem 0 .8rem; }
.dcr-close{ margin:2.6rem 0 0; }
/* comparison band and closing invitation */
.dcr-band{ margin:2.6rem 0 0; padding:2rem 2.2rem; background:var(--color-bg-warm); border-radius:var(--radius); }
.dcr-band h2{ margin:0 0 1rem; font-size:clamp(1.35rem,2vw,1.8rem); }
.dcr-cta{ margin:2.4rem 0 1rem; text-align:center; }
.dcr-cta h2{ margin:0 0 .5rem; font-size:clamp(1.5rem,2.4vw,2.1rem); }
.dcr-cta .btnrow{ justify-content:center; margin:1.2rem 0; }
.dcr-cta .btn.solid{ padding:.9rem 1.8rem; font-size:1.1rem; }

@media (max-width:900px){
  .dcr-hero{ background:var(--color-navy-deep); }
  .dcr-hero-text{ position:static; width:auto; padding:1.4rem 1.2rem 1.6rem; background:none; }
}
@media (max-width:760px){
  .tsl-page.dcr-page{ padding-left:0; padding-right:0; }
  .dcr-split{ grid-template-columns:1fr; gap:1rem; margin-bottom:1.4rem; }
  .dcr-split--flip .dcr-pic{ order:0; }
  .dcr-band{ padding:1.4rem 1.1rem; }
}
@media (max-width:640px){
  .dcr-svg--wide{ display:none; }
  .dcr-svg--tall{ display:block; }
  .dcr-facts th, .dcr-compare th{ width:42%; }
}