/* Container Drayage, compact content layout (drayage2 mockup). Page-scoped: every rule hangs off a .dr-* class.
   Hero, section padding and H2 come from the site defaults (whisk-freight.css), same as Transloading, Sprinter and Truckload.
   Backgrounds white / #EEF3FA only; colours #003DA5 and #FF6720; flat fills only, no shading effects. */

/* Sections: site padding; alternate band colour only */
.content-section.dr-alt{background:#EEF3FA}
.dr-sec[id],.dr-mc[id]{scroll-margin-top:90px}
.dr-sec .dr-h2{font-family:'Oswald',sans-serif;font-size:clamp(32px,3.5vw,48px);font-weight:700;line-height:1.05;text-transform:uppercase;color:var(--navy);margin:0 0 24px}  /* = .service-content h2 in whisk-freight.css (Transloading, Sprinter, Truckload) */
.dr-head{max-width:70ch;margin-bottom:20px}
.dr-head p,.dr-sec p{line-height:1.55;font-size:16px;color:var(--navy)}
.dr-head p{margin:0}
.dr-sec a{color:#003DA5}
.dr-more{display:flex;flex-wrap:wrap;gap:4px 24px;margin:14px 0 0}
.dr-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Overview: regions | zone map */
.dr-glance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:32px;align-items:start}
.dr-lanes{list-style:none;margin:0;padding:0}
.dr-lanes li{padding:10px 0 10px 14px;border-left:3px solid #003DA5;margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--navy)}
.dr-lanes strong{display:block;font:600 16px Oswald,sans-serif;letter-spacing:.03em;color:#003DA5}
.dr-zone{margin:0}
.dr-zone .zone-map{margin:0}
.dr-zone .zone-map-svg .zm-d,.dr-zone .zm-ctx{display:none}
.dr-zone .zone-map-svg .zm-m{display:inline}
.dr-zone .zm-state{font-size:30px}.dr-zone .zm-region{font-size:24px}
.dr-zone .zm-city{font-size:27px;stroke-width:6px}.dr-zone .zm-callout{font-size:28px}
.dr-zone .zone-map-svg .zm-pin{font-size:24px}.dr-zone .zm-pinlabel{font-size:24px}
.dr-cap{font-size:13.5px!important;line-height:1.45!important;color:#34415A!important;margin:8px 0 0}

/* Collapsible panels: open on desktop, collapsed on phones by JS, all open with JS off */
.dr-mc>summary{list-style:none;cursor:default;min-height:24px}
.dr-mc>summary::-webkit-details-marker{display:none}
.dr-mc>summary h3{margin:0}
.dr-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.dr-dir{background:#fff;border:1px solid #D3DCE9;border-top:4px solid #003DA5;padding:14px 22px 4px}
.dr-dir+.dr-dir{border-top-color:#FF6720}
.dr-dir>summary h3{font:700 20px Oswald,sans-serif;color:#003DA5;letter-spacing:.02em;margin-bottom:8px}
.dr-steps{list-style:none;counter-reset:dr;margin:0;padding:0}
.dr-steps li{counter-increment:dr;position:relative;padding:7px 0 7px 40px;border-top:1px solid #D3DCE9}
.dr-steps li::before{content:counter(dr);position:absolute;left:0;top:8px;width:26px;height:26px;border:2px solid #003DA5;border-radius:50%;font:700 13px/22px Oswald,sans-serif;text-align:center;color:#003DA5;box-sizing:border-box}
.dr-dir+.dr-dir .dr-steps li::before{border-color:#FF6720}
.dr-steps h4{font:600 15.5px Oswald,sans-serif;letter-spacing:.03em;color:#003DA5;margin:0 0 2px}
.dr-steps p{margin:0;font-size:14.5px!important;line-height:1.45}

/* Terminal map: the terminals page figure as is, styled by css/ports.css (.pt-mapwide, .pt-fig, .pt-mapscroll); no rules here */

/* FAQ: two columns */
.dr-faq{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.dr-fq{border-top:1px solid #C9D4E5;padding:14px 0}
.dr-fq>summary h3{font:600 17px/1.3 Oswald,sans-serif;color:#003DA5;letter-spacing:.02em}
.dr-fq p{margin:6px 0 0;font-size:15px!important;max-width:70ch}

/* What we need to quote */
.dr-quote h3{font:700 20px Oswald,sans-serif;color:#003DA5;letter-spacing:.02em;margin:18px 0 0}
.dr-quote .dr-need{columns:1;margin:0}
.dr-quote .dr-need li{break-inside:avoid;padding-top:10px;padding-bottom:10px;font-size:15px}
.dr-need-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 48px;align-items:start}
.dr-need-col{min-width:0}

@media (max-width:700px){
 .dr-glance,.dr-2,.dr-faq,.dr-need-cols{grid-template-columns:1fr}
 .dr-need-cols{gap:0}
 .dr-2{gap:12px}
 .dr-mc>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
 .dr-mc>summary::after{content:'+';flex:none;font:400 28px/1 'IBM Plex Sans',sans-serif;color:#003DA5}
 .dr-mc[open]>summary::after{content:'\2212'}
 .dr-dir{padding:6px 16px}
 .dr-dir>summary h3{margin:0;font-size:18px}
 .dr-dir[open]{padding-bottom:10px}
 .dr-fq{padding:4px 0}
 .dr-fq>summary h3{font-size:16px}
 .dr-fq p{margin-bottom:10px}
 .dr-quote .dr-need{columns:1}
}

.dr-dir .dr-more{margin-top:4px}