/* Approved service-page hero and responsive layout. */
.sd_hero { position:relative; min-height:800px; overflow:hidden; background:#031326; color:#fff; }
.sd_heroImage { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--sd-photo-position,70% center); }
.sd_heroShade { position:absolute; inset:0; background:linear-gradient(90deg,#021225f5 0%,#021225dd 32%,#02122578 53%,#02122510 82%),linear-gradient(0deg,#021225 0%,#021225d9 13%,#02122500 57%); }
.sd_heroInner { position:relative; z-index:2; width:min(1240px,calc(100% - 48px)); min-height:800px; margin:auto; padding:145px 0 28px; display:flex; flex-direction:column; align-items:stretch; }
.sd_heroCopy { width:min(760px,76%); }
.sd_eyebrow { margin:0 0 20px; color:#7cbfff; font-size:10px; font-weight:800; letter-spacing:2.3px; line-height:1.5; }
.sd_hero h1 { margin:0; font-size:clamp(42px,5.2vw,68px); font-weight:700; line-height:1.01; letter-spacing:-2.5px; text-shadow:0 3px 20px #0005; }
.sd_hero h1 span { display:block; }
.sd_hero h1 .sd_accent { color:#1765ff; margin-top:5px; }
.mobile-truck-repair .sd_hero h1 { font-size:clamp(36px,4.5vw,60px); letter-spacing:-2px; white-space:nowrap; }
.sd_supportingHeading { margin:15px 0 0; color:#5590ff; font-size:clamp(22px,2.4vw,30px); font-weight:700; line-height:1.2; letter-spacing:-.65px; }
.sd_heroBody { max-width:515px; margin:24px 0 0; color:#e0e8f2; font-size:16px; font-weight:500; line-height:1.65; text-shadow:0 2px 12px #0006; }
.sd_request { width:min(960px,90%); margin:47px auto 0; }
.sd_reassurance { margin:0 0 16px; color:#e6effb; text-align:center; font-size:14px; font-weight:600; line-height:1.5; }
.sd_request .hero-cta { width:100%; margin:0; }
.sd_request .gps-cta { min-height:88px; font-size:clamp(24px,3vw,38px); }
.sd_request .microcopy { margin-top:14px; font-size:12px; }
.sd_benefits { width:100%; margin:29px 0 0; padding-top:22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #ffffff20; }
.sd_benefits article { padding:0 22px; text-align:center; border-right:1px solid #ffffff24; }
.sd_benefits article:last-child { border-right:0; }
.sd_benefits .marketing-icon { width:31px; height:31px; color:#2777ff; }
.sd_benefits h2 { margin:9px 0 7px; color:#fff; font-size:12px; line-height:1.3; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.sd_benefits p { max-width:225px; margin:0 auto; color:#bdccde; font-size:12px; line-height:1.5; }
.desktop-nav a:first-child { border-bottom-color:transparent; }
.desktop-nav a:nth-child(2) { border-bottom-color:#1c6cff; }
.sp_serviceSection { padding:46px 0 40px; }
.sp_serviceIntro { margin-bottom:24px; max-width:790px; }
.sp_serviceIntro h2 { margin-bottom:12px; font-size:11px; letter-spacing:1.8px; }
.sp_sectionLead { margin-bottom:12px; font-size:clamp(25px,2.6vw,34px); line-height:1.18; letter-spacing:-1px; }
.sp_sectionBody { max-width:660px; color:#52667e; font-size:15px; line-height:1.6; }
.sp_serviceGrid { gap:14px; }
.sp_balancedCardGrid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.sp_balancedCardGrid article, .sp_balancedCardGrid article:nth-child(4), .sp_balancedCardGrid article:nth-child(5) { grid-column:auto; }
.sp_serviceGrid article { display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0; min-height:180px; padding:23px 19px; border:1px solid #dce5ef; border-radius:12px; background:#fff; box-shadow:0 8px 24px #03132605; }
.sp_serviceGrid article > div { min-width:0; width:100%; }
.sp_serviceGrid .marketing-icon { width:36px; height:36px; margin-bottom:16px; color:#1765ff; }
.sp_serviceGrid h3 { color:#102e50; font-size:14px; font-weight:700; line-height:1.3; }
.sp_serviceGrid p { margin-top:9px; color:#63758b; font-size:12px; line-height:1.55; }
@media (max-width:1000px) {
  .sd_heroInner { width:calc(100% - 40px); padding-top:137px; }
  .sd_heroCopy { width:min(710px,82%); }
  .sd_hero h1 { font-size:55px; }
  .mobile-truck-repair .sd_hero h1 { font-size:clamp(34px,4.5vw,46px); }
  .sd_heroBody { max-width:470px; }
  .sd_benefits article { padding-inline:13px; }
  .sp_serviceGrid { gap:10px; }
  .sp_serviceGrid article { padding:20px 15px; }
}
@media (min-width:701px) and (max-width:900px) {
  .sd_heroCopy { padding-top:25px; }
  .sd_hero h1 { font-size:49px; }
  .sd_request { width:95%; }
  .sp_balancedCardGrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sd_benefits h2 { font-size:11px; letter-spacing:0; }
}
@media (max-width:700px) {
  .sd_hero { min-height:0; }
  .sd_heroImage { top:120px; height:450px; object-position:var(--sd-photo-position-mobile,74% center); }
  .sd_heroShade { background:linear-gradient(180deg,#021225 0,#021225d9 20%,#02122530 45%,#021225 70%),linear-gradient(90deg,#021225d9,#02122570 60%,#02122530); }
  .sd_heroInner { width:100%; min-height:0; padding:160px 22px 30px; }
  .sd_heroCopy { width:100%; }
  .sd_eyebrow { margin-bottom:18px; font-size:10px; letter-spacing:1.25px; line-height:1.55; }
  .sd_hero h1, .mobile-truck-repair .sd_hero h1 { max-width:100%; font-size:clamp(34px,9.2vw,46px); white-space:normal; line-height:1.03; letter-spacing:-1.55px; }
  .sd_supportingHeading { margin-top:14px; font-size:23px; line-height:1.2; }
  .sd_heroBody { max-width:370px; margin-top:20px; font-size:14px; line-height:1.65; }
  .sd_request { width:100%; margin-top:35px; }
  .sd_reassurance { margin-bottom:14px; padding-inline:8px; font-size:12px; font-weight:600; }
  .sd_request .gps-cta { min-height:62px; padding-inline:15px; font-size:17px; letter-spacing:-.3px; }
  .sd_request .gps-cta-content { gap:10px; }
  .sd_request .gps-pin { width:27px; height:30px; flex-basis:27px; }
  .sd_request .microcopy { max-width:290px; margin:12px auto 0; font-size:10px; line-height:1.5; }
  .sd_request .microcopy .marketing-icon { width:12px; height:12px; }
  .sd_benefits { margin-top:27px; padding-top:23px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 16px; }
  .sd_benefits article { padding:0; border:0; }
  .sd_benefits .marketing-icon { width:27px; height:27px; }
  .sd_benefits h2 { margin-top:8px; font-size:11px; letter-spacing:.35px; }
  .sd_benefits p { max-width:180px; font-size:11px; line-height:1.5; }
  .sp_serviceSection { width:100%; padding:32px 20px 28px; }
  .sp_serviceIntro h2 { font-size:10px; letter-spacing:1.4px; }
  .sp_sectionLead { font-size:27px; line-height:1.18; letter-spacing:-.8px; }
  .sp_sectionBody { font-size:14px; }
  .sp_serviceGrid, .sp_balancedCardGrid, .sp_fourCardGrid, .sp_fiveCardGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .sp_serviceGrid article { min-height:174px; padding:19px 15px; }
  .sp_serviceGrid article:last-child:nth-child(odd) { grid-column:1/-1; min-height:150px; }
}
@media (max-width:360px) {
  .sd_heroInner { padding-inline:16px; }
  .sd_hero h1, .mobile-truck-repair .sd_hero h1 { font-size:32px; letter-spacing:-1.3px; }
  .sd_heroBody { font-size:13px; }
  .sd_request .gps-cta { padding-inline:10px; font-size:15px; }
  .sd_request .gps-cta-content { gap:8px; }
  .sd_request .gps-pin { width:24px; height:27px; flex-basis:24px; }
  .sd_benefits p { font-size:11px; }
  .sp_serviceSection { padding-inline:16px; }
}

.mobile-truck-repair .sd_hero { --sd-photo-position:70% center; --sd-photo-position-mobile:75% center; }

.commercial-tire-service .sd_hero { --sd-photo-position:71% center; --sd-photo-position-mobile:76% center; }

.commercial-roadside-service .sd_hero { --sd-photo-position:73% center; --sd-photo-position-mobile:76% center; }

.bus-rv-roadside-service .sd_hero { --sd-photo-position:70% center; --sd-photo-position-mobile:72% center; }

/* Keep the mobile truck repair title on one line at phone widths. */
@media (max-width:700px) {
  .mobile-truck-repair .sd_hero h1 { font-size:clamp(23px,6.8vw,40px); white-space:nowrap; letter-spacing:-.03em; }
}
