/* Shared blue-and-white rhythm across every FleetFix page. */
:root {
  --layout-gap: clamp(24px, 3vw, 40px);
  --section-space: clamp(40px, 4vw, 56px);
  --card-space: 28px;
  --surface: #f5f8fc;
}
.container { width: min(1360px, calc(100% - 64px)); }
body { font-size: 1.1875rem; line-height: 1.6; }
h2 { font-size: clamp(2.25rem, 3.5vw, 3.25rem); line-height: 1.12; }
h3 { font-size: 1.5rem; line-height: 1.3; }
.eyebrow { margin-bottom: 16px; letter-spacing: .08em; }
.utility-inner { padding-block: 0; }
.utility-address { min-height: 44px; }
.header-inner { min-height: 104px; padding-block: 12px; gap: 12px 24px; }
.brand { width: 184px; }
.primary-nav { font-size: 1.125rem; gap: 8px 24px; }
.primary-nav a { min-height: 48px; padding-block: 8px; }
.header-call { min-height: 64px; padding: 12px 20px; }
.header-call-copy > span { font-size: 1.375rem; }
.header-call svg { width: 20px; height: 20px; }
.button { min-height: 56px; padding: 14px 20px; font-size: 1.125rem; gap: 12px; }
.text-link { font-size: 1.125rem; }
.hero-inner, .service-page-hero .hero-inner, .about-hero-inner {
  padding-block: var(--section-space); gap: var(--layout-gap);
}
.hero h1, .service-page-hero h1, .about-hero h1 {
  font-size: clamp(2.75rem, 4vw, 4rem); line-height: 1.08;
}
.hero-positioning { color: var(--blue); font-size: clamp(1.5rem, 2.3vw, 2.125rem); line-height: 1.25; letter-spacing: 0; }
.hero-description, .about-intro { max-width: none; margin-top: 20px; font-size: 1.25rem; line-height: 1.6; }
.hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.hero-rating { margin-top: 20px; gap: 8px 12px; font-size: 1rem; }
.hero-photo img, .service-page-hero .hero-photo img, .about-photo img { aspect-ratio: 3 / 2; }
.hero-photo figcaption, .about-photo figcaption { margin: 0; padding: 12px 16px; background: var(--surface); color: var(--muted); font-size: .875rem; }
.about-photo { border-radius: 6px; overflow: hidden; }
.about-photo img { border-radius: 0; }
.hero-bottom { background: var(--surface); border-bottom: 1px solid var(--line); }
.hero-bottom-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 16px; }
.hero-bottom-inner > * { font-size: 1rem; }
.section-space, .fleet-section, .visit-section, .about-promise { padding-block: var(--section-space); }
.section-heading { display: flex; flex-direction: column; gap: 12px; text-align: center; margin-bottom: 28px; }
.section-heading .eyebrow { margin-bottom: 12px; }
.section-intro { max-width: 48rem; font-size: 1.1875rem; }
.service-grid { gap: 24px; grid-auto-rows: auto; }
.service-card, .experience-grid article { padding: var(--card-space); background: var(--paper); border-radius: 4px; }
.service-card-top { min-height: 3.75rem; margin-bottom: 12px; }
.service-card > p, .experience-grid p { font-size: 1.125rem; }
.service-card-link { font-size: 1.125rem; padding-top: 20px; }
.makes-note { margin-top: 24px; color: var(--muted); text-align: center; font-size: 1.0625rem; text-wrap: balance; }
.supporting-services { margin-top: 24px; padding-top: 24px; gap: 20px 32px; }
.supporting-services p { margin-top: 8px; font-size: 1.125rem; }
.fleet-layout, .parts-layout, .review-layout, .visit-layout { gap: var(--layout-gap); align-items: center; }
.fleet-visual { width: 100%; min-width: 0; aspect-ratio: 4 / 3; align-self: stretch; }
.fleet-copy > p:not(.eyebrow):not(.fleet-footnote) { margin-block: 20px; font-size: 1.1875rem; }
.warranty-benefits { gap: 24px; margin-bottom: 16px; padding-block: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.warranty-benefit strong { font-size: 1.125rem; }
.warranty-benefit span { margin-top: 4px; }
.warranty-note, .fleet-footnote { font-size: .9375rem; }
.fleet-actions { gap: 16px 24px; }
.parts-details, .review-content, .visit-details, .automation-details, .fleet-coverage { padding: var(--card-space); border-radius: 4px; }
.parts-details dl { margin: 24px 0 0; }
.parts-details dl > div { padding-block: 16px; }
.parts-details dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.review-slides { min-height: 0; }
.review-text { font-size: 1.375rem; }
.review-controls { padding-top: 16px; margin-top: 24px; }
.review-control { border-radius: 4px; }
.visit-contact-options { gap: 16px 24px; }
.phone-large { font-size: 1.65rem; }
.visit-lead > p:not(.eyebrow) { margin-top: 24px; }
.visit-details { gap: 24px; }
.visit-hours { padding-top: 24px; }
.site-footer { padding-block: 24px; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.footer-brand { width: 160px; }
.footer-links { justify-content: center; gap: 8px 24px; }
.service-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-block: 16px; }
.service-index a { min-height: 56px; padding: 8px; }
.service-details { padding-block: 16px; }
.service-detail, .service-detail:last-child { padding-block: 28px; }
.service-detail h2 { font-size: clamp(2rem, 2.7vw, 2.5rem); }
.experience-grid { gap: 24px; }
.automation-details dl > div + div { margin-top: 24px; padding-top: 0; border-top: 0; }
.automation-details dt { font-size: 1.125rem; }
.automation-details dd { margin-top: 8px; font-size: 1.125rem; }
.about-story-layout { display: flex; flex-direction: column; gap: 24px; max-width: 800px; }
.about-story-heading { width: 100%; text-align: left; }
.about-story-heading h2 { max-width: 26ch; font-size: clamp(1.875rem, 2.5vw, 2.25rem); line-height: 1.2; }
.about-byline { margin-top: 16px; }
.about-letter { max-width: none; font-size: 1.1875rem; line-height: 1.7; }
.about-letter .about-opening { font-size: 1.25rem; }
.about-promise h2 { font-size: clamp(2.25rem, 3.5vw, 3.25rem); }
.faq-hero { padding-block: var(--section-space) 24px; text-align: center; }
.faq-hero h1 { font-size: clamp(2.75rem, 4vw, 4rem); }
.faq-groups { max-width: 880px; }
.faq-group + .faq-group { margin-top: 28px; }
.faq-group .service-faq summary { padding: 16px; font-size: 1.1875rem; }
.faq-group .service-faq details p { padding: 0 16px 24px; }
@media (min-width: 75rem) {
  .header-inner { grid-template-columns: minmax(184px, 1fr) auto minmax(208px, 1fr); }
  .primary-nav { grid-column: auto; grid-row: auto; display: flex; border-top: 0; padding-top: 0; }
}
@media (max-width: 74.999rem) {
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
  .service-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .hero-inner, .about-hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero-copy, .about-hero-inner > div { width: 100%; max-width: 42rem; margin-inline: auto; }
  .hero-description, .about-intro { margin-inline: auto; }
  .hero-actions { max-width: 36rem; margin-inline: auto; }
  .hero-rating { justify-content: center; }
  .hero-photo img, .service-page-hero .hero-photo img, .about-photo img { aspect-ratio: 2 / 1; }
  .fleet-layout, .parts-layout, .review-layout, .visit-layout, .about-promise-inner, .questions-layout { grid-template-columns: minmax(0, 1fr); }
  .fleet-visual { aspect-ratio: 2 / 1; }
  .fleet-copy, .parts-copy, .review-heading, .visit-lead { text-align: center; }
  .fleet-copy > p, .parts-copy > p, .visit-lead > p { margin-inline: auto; }
  .fleet-actions, .visit-contact-options { justify-content: center; }
  .warranty-note { margin-inline: auto; }
  .fleet-offer .service-grid { grid-template-columns: minmax(0, 1fr); }
  .fleet-offer .service-card-top { min-height: 0; }
  .experience-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 37.5rem) {
  :root { --layout-gap: 24px; --section-space: 36px; --card-space: 24px; }
  .container { width: calc(100% - 40px); }
  .utility-inner { padding-block: 8px; }
  .utility-address-copy { font-size: .8125rem; }
  .utility-hours { font-size: .8125rem; }
  .header-inner { gap: 8px; padding-block: 8px; }
  .brand { width: 144px; }
  .header-call { padding: 12px; }
  .header-call-copy > span { font-size: 1.0625rem; }
  .header-call-copy small { font-size: .8125rem; }
  .primary-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; font-size: 1.125rem; }
  .hero h1, .service-page-hero h1, .about-hero h1, .faq-hero h1 { font-size: clamp(2.125rem, 8.8vw, 3rem); }
  .hero-positioning { font-size: 1.5rem; }
  .hero-photo img, .service-page-hero .hero-photo img, .about-photo img, .fleet-visual { aspect-ratio: 4 / 3; }
  .hero-actions { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero-bottom-inner { grid-template-columns: minmax(0, 1fr); padding-block: 16px; }
  .hero-bottom-inner > * { min-height: 0; padding: 8px; }
  .hero-bottom-inner > * + * { border-left: 0; }
  .section-heading { margin-bottom: 24px; }
  .service-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 16px; }
  .service-card-top { min-height: 0; }
  .supporting-services { align-items: center; text-align: center; }
  .warranty-benefits { gap: 16px; }
  .service-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-detail, .service-detail:last-child { padding-block: 24px; }
  .about-promise-inner { gap: 24px; }
  .site-footer { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .footer-brand { width: 144px; }
  .mobile-actions { box-shadow: none; }
}
@media (max-width: 22rem) {
  .container { width: calc(100% - 32px); }
  .brand { width: 124px; }
  .header-call { padding: 10px; }
  .header-call-copy > span { font-size: 1rem; }
  .warranty-benefits { grid-template-columns: minmax(0, 1fr); }
}
.hero-actions-single { grid-template-columns: minmax(0, 1fr); max-width: 20rem; }
.visit-lead > .repair-form-option { margin-top: 24px; font-size: 1rem; }
.repair-form-option .text-link { display: inline; padding: 0; margin-left: 4px; line-height: 1.8; }
.contact-email { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; margin-top: 8px; font-size: 1.125rem; line-height: 1.5; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; }
.fleet-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@font-face { font-family: 'Yellowtail'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/yellowtail-regular.ttf') format('truetype'); }
.slogan-finest { font-family: 'Yellowtail', cursive; font-size: 1.2em; font-weight: 400; font-style: normal; font-synthesis: none; letter-spacing: 0; margin-inline: .04em .18em; padding-right: .06em; }
.slogan-ending { white-space: nowrap; }
.hero-positioning { text-wrap: balance; }

/* Readable type for the supporting content, not just the headlines. */
.eyebrow { font-size: 1rem; }
.hero-positioning { font-size: clamp(1.5rem, 2.3vw, 2.125rem); }
.header-call-copy small, .utility-inner, .utility-hours { font-size: 1rem; }
.parts-details dt, .parts-details dd, .visit-hours dl > div, .fleet-value-copy > p:not(.eyebrow), .about-promise-copy > p, .service-detail-copy ul, .service-faq details p, .automation-learn p, .fleet-service-note p { font-size: 1.125rem; }
.service-detail, .questions-layout { gap: var(--layout-gap); }
.service-index a, .footer-links a { font-size: 1.125rem; }
.supporting-services h3, .experience-grid h3 { font-size: 1.5rem; }
.profile-link, .warranty-note, .fleet-footnote, .automation-note, .rating-date { font-size: 1rem; }
.footer-inner > p { font-size: 1.25rem; line-height: 1.5; }
.footer-inner > p > span:last-child { font-size: 1rem; }
.footer-inner > p .slogan-ending { font-size: inherit; }
.faq-group h2 { margin-bottom: 16px; }
.about-letter p + p { margin-top: 20px; }
@media (max-width: 37.5rem) {
  .hero-positioning { font-size: 1.5rem; }
  .hero-description, .about-intro { font-size: 1.1875rem; }
  .header-call-copy small, .utility-hours, .utility-address-copy { font-size: .875rem; }
  .primary-nav a { min-height: 44px; }
  .contact-email { font-size: 1rem; }
  .footer-inner > p { font-size: 1.125rem; }
}

/* A clear home for performance work and custom builds. */
.upgrades-feature { background: var(--surface); border-block: 1px solid var(--line); }
.upgrades-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gap); align-items: center; }
.upgrades-layout > * { min-width: 0; }
.upgrades-copy > p:not(.eyebrow) { margin-top: 20px; font-size: 1.1875rem; color: var(--muted); }
.upgrades-copy > .text-link { margin-top: 20px; }
.upgrade-brands { padding: var(--card-space); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.upgrade-brands > .eyebrow { color: var(--blue); }
.upgrade-brand-list { margin: 0; padding: 0; list-style: none; }
.upgrade-brand-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.upgrade-brand-list strong { font-family: var(--display); font-size: 1.875rem; line-height: 1.2; }
.upgrade-brand-list span { color: var(--muted); font-size: 1rem; text-align: right; }
.upgrade-brand-note { margin-top: 20px; font-size: 1.0625rem; line-height: 1.5; color: var(--muted); }
.upgrades-detail { border-bottom: 1px solid var(--line); }
.upgrades-detail .upgrade-brands { background: var(--surface); }
.build-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gap); margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.build-options p { margin-top: 12px; color: var(--muted); font-size: 1.1875rem; }
.build-conversation { display: flex; align-items: center; justify-content: space-between; gap: var(--layout-gap); margin-top: 28px; padding: var(--card-space); background: var(--surface); }
.build-conversation > div { max-width: 44rem; }
.build-conversation p { margin-top: 8px; font-size: 1.125rem; color: var(--muted); }
.build-conversation .button { flex-shrink: 0; }
.fleet-coverage > .fleet-service-note { border-top: 0; margin-top: 0; padding-top: 0; }
@media (max-width: 60rem) {
  .upgrades-layout { grid-template-columns: minmax(0, 1fr); }
  .upgrades-copy { max-width: 42rem; margin-inline: auto; text-align: center; }
  .upgrade-brands { width: 100%; max-width: 42rem; margin-inline: auto; }
  .build-conversation { flex-direction: column; text-align: center; }
}
@media (max-width: 37.5rem) {
  .build-options { grid-template-columns: minmax(0, 1fr); }
  .upgrade-brand-list li { align-items: flex-start; flex-direction: column; gap: 4px; }
  .upgrade-brand-list span { text-align: left; }
  .build-conversation .button { width: 100%; }
}

/* Careers uses the same readable rhythm and contact details. */
.careers-values { background: var(--surface); border-block: 1px solid var(--line); }
.careers-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--layout-gap); }
.careers-values-grid p { margin-top: 12px; font-size: 1.1875rem; color: var(--muted); }
.careers-apply-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gap); align-items: center; }
.careers-apply-layout > div { min-width: 0; }
.careers-apply-layout p { margin-top: 20px; color: var(--muted); }
.careers-apply-layout p a { text-decoration: underline; text-underline-offset: 4px; }
.application-details { padding: var(--card-space); border: 1px solid var(--line); background: var(--surface); border-radius: 4px; }
.application-details ul { margin-block: 16px 24px; padding-left: 22px; color: var(--muted); font-size: 1.125rem; }
.application-details li + li { margin-top: 8px; }
.application-button { width: 100%; }
.application-details .application-help { font-size: 1rem; line-height: 1.5; margin-top: 16px; }
.application-details .contact-email { font-size: 1rem; }
@media (max-width: 60rem) {
  .careers-values-grid, .careers-apply-layout { grid-template-columns: minmax(0, 1fr); }
  .careers-values-grid article { max-width: 42rem; margin-inline: auto; width: 100%; }
  .careers-apply-layout { max-width: 42rem; }
}
@media (max-width: 37.5rem) {
  .primary-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; }
  .primary-nav a { flex: 1 0 calc(25% - 8px); }
}

button[data-email-action] { font-family: inherit; cursor: pointer; }
button.contact-email { background: transparent; color: var(--ink); border: 0; padding: 0; font-weight: 600; text-decoration: underline; }
button.application-button { border: 0; }
.mobile-actions button[data-email-action] { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; font-size: 1rem; font-weight: 700; line-height: 1.3; border: 0; border-radius: 4px; color: var(--ink); background: var(--accent); }

/* Phone, text and email stay together as one clear contact point. */
.contact-panel { margin-top: 24px; padding: 24px; background: var(--ink); color: var(--paper); border-radius: 6px; text-align: center; }
.contact-panel > .contact-panel-label { margin: 0 0 4px; font-size: 1rem; line-height: 1.4; color: var(--on-dark); }
.contact-panel .phone-large { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; margin: 0; color: var(--paper); font-size: clamp(1.75rem, 3vw, 2rem); line-height: 1.25; }
.contact-panel-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.contact-panel-actions .button { min-width: 0; width: 100%; border: 0; font-size: 1.125rem; }
.contact-panel :is(a,button):focus-visible { outline-color: var(--accent); }
/* Five real business-profile photos in a calm, fixed-size gallery. */
.shop-slides { display: grid; aspect-ratio: 3 / 2; overflow: hidden; }
.shop-slide { grid-area: 1 / 1; min-width: 0; min-height: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.shop-slide.is-active { opacity: 1; visibility: visible; }
.hero-photo .shop-slide img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.shop-gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 12px 6px 16px; background: var(--surface); }
.shop-gallery-controls[hidden] { display: none; }
.gallery-count { font-size: 1rem; font-weight: 600; color: var(--muted); }
.gallery-buttons { display: flex; align-items: center; gap: 6px; }
.gallery-buttons button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); font: 600 1.75rem/1 var(--body); cursor: pointer; }
.gallery-buttons button:hover { background: var(--accent); }
.gallery-buttons .gallery-toggle { min-width: 72px; padding-inline: 12px; font-size: 1rem; }
@media (max-width: 60rem) { .shop-slides { aspect-ratio: 2 / 1; } }
@media (max-width: 37.5rem) { .shop-slides { aspect-ratio: 4 / 3; } .contact-panel { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .shop-slide { transition: none; } }

.interstate-hero { margin-top: 20px; color: var(--blue); font-size: 1.125rem; line-height: 1.5; }
.interstate-location { margin: 16px 0 8px; font-size: 1.125rem; line-height: 1.5; color: var(--muted); }
.interstate-location strong { color: var(--ink); }

/* Advanced alignment gets a clear, readable feature of its own. */
.alignment-detail { background: var(--surface); border-bottom: 1px solid var(--line); }
.alignment-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--layout-gap); }
.alignment-intro > div { min-width: 0; }
.alignment-intro > div > p:not(.eyebrow) { margin-top: 20px; font-size: 1.1875rem; color: var(--muted); }
.alignment-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--layout-gap); margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.alignment-benefits h3, .alignment-next h3 { font-size: 1.5rem; }
.alignment-benefits p, .alignment-next p { margin-top: 12px; font-size: 1.125rem; color: var(--muted); }
.alignment-next, .alignment-feature { display: flex; align-items: center; justify-content: space-between; gap: var(--layout-gap); }
.alignment-next { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.alignment-next > div { max-width: 46rem; }
.alignment-next .button, .alignment-feature .button { flex-shrink: 0; }
.alignment-feature { margin-top: 28px; padding: var(--card-space); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.alignment-feature > div { max-width: 46rem; }
.alignment-feature h3 { font-size: clamp(1.75rem, 2.4vw, 2rem); line-height: 1.25; }
.alignment-feature p:not(.eyebrow) { margin-top: 16px; font-size: 1.125rem; color: var(--muted); }
@media (max-width: 60rem) {
  .alignment-intro, .alignment-benefits { grid-template-columns: minmax(0, 1fr); }
  .alignment-intro > div, .alignment-benefits > article { width: 100%; max-width: 42rem; margin-inline: auto; }
  .alignment-intro > div:first-child { text-align: center; }
  .alignment-next, .alignment-feature { flex-direction: column; text-align: center; }
}
@media (max-width: 37.5rem) {
  .alignment-next .button, .alignment-feature .button { width: 100%; }
}

/* Authentic partner marks, with equal spacing and clear outbound links. */
.upgrade-brand-list li { display: block; padding: 0; }
.upgrade-brand-list li > a { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 20px; padding: 12px 0; min-height: 108px; border-radius: 4px; }
.upgrade-brand-list li > a:hover > span:last-child { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.upgrade-brand-list .brand-logo-stage { display: flex; align-items: center; justify-content: center; width: 168px; height: 92px; padding: 8px; background: #fff; border-radius: 3px; }
.upgrade-brand-list .brand-logo-stage img { display: block; max-width: 100%; width: auto; height: auto; max-height: 76px; object-fit: contain; }
.upgrade-brand-list .brand-logo-dieselr { background: var(--ink); }
.upgrade-brand-list li > a > span:last-child { text-align: left; font-size: 1.0625rem; }
.upgrade-brand-list b { font-weight: 400; white-space: nowrap; }
@media (max-width: 37.5rem) {
  .upgrade-brand-list li > a { grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }
  .upgrade-brand-list .brand-logo-stage { width: 140px; }
}
@media (max-width: 22rem) {
  .upgrade-brand-list li > a { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .upgrade-brand-list .brand-logo-stage { width: 112px; height: 80px; }
  .upgrade-brand-list li > a > span:last-child { font-size: 1rem; }
}

.alignment-intro .text-link { margin-top: 20px; }
.alignment-photo { margin: 0; min-width: 0; }
.alignment-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.alignment-photo figcaption { margin-top: 10px; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.upgrade-brand-list img[src$="pdi-diesel-logo.png"] { max-height: 92px; }
@media (max-width: 60rem) { .alignment-photo { width: 100%; max-width: 42rem; margin-inline: auto; } }

/* Address, highway access and hours share one compact row. */
.utility-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: calc(100% - 64px); max-width: none; gap: 24px; padding-block: 0; }
.utility-address { justify-self: start; }
.utility-address-copy { flex-wrap: nowrap; }
.utility-hours { justify-self: end; margin-left: 0; white-space: nowrap; }
.utility-interstate { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 1rem; line-height: 1.4; white-space: nowrap; }
.utility-interstate strong { color: var(--paper); font-weight: 700; }
.utility-route::before { content: '·'; margin-right: 8px; }
@media (max-width: 64rem) {
  .utility-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
  .utility-address-copy { flex-direction: column; gap: 0; }
  .utility-hours > span, .utility-hours b { display: block; }
  .utility-hours b { margin-left: 0; }
  .utility-hours { text-align: right; }
  .utility-route { display: none; }
}
@media (max-width: 37.5rem) {
  .utility-inner { width: calc(100% - 32px); gap: 8px; padding-block: 4px; }
  .utility-address svg, .utility-zip { display: none; }
  .utility-address-copy, .utility-hours, .utility-interstate { font-size: .875rem; }
  .utility-address-copy > span { white-space: nowrap; }
  .utility-interstate strong > span { display: block; }
}

@media (max-width: 22rem) {
  .primary-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
  .primary-nav a { white-space: nowrap; }
  .primary-nav a:last-child { grid-column: 1 / -1; }
}

.about-story-heading .eyebrow { margin-bottom: 8px; }
.about-signoff { margin-top: 24px; }
.about-signoff .about-signature { margin: 0; padding-top: 0; }
.about-signoff .about-signature-role { margin-top: 6px; font-size: 1.125rem; line-height: 1.5; color: var(--muted); }

/* Keep the family photograph intact within its portrait framing. */
.about-family-photo { width: 100%; max-width: 440px; justify-self: center; }
.about-family-photo img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 60rem) { .about-family-photo { margin-inline: auto; } }

.about-family-frame { width: 100%; aspect-ratio: 768 / 950; overflow: hidden; }
.about-family-frame img { width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; object-position: top; }

.about-family-photo .family-memorial { display: block; margin-top: 4px; font-size: .875rem; font-style: italic; line-height: 1.5; }

/* A quiet remembrance at the end of every page. */
.footer-inner > .footer-memorial { margin: 0; font-size: .875rem; font-style: italic; line-height: 1.5; color: var(--muted); }

/* Small, consistent symbols beside the footer company name. */
.footer-inner > p .footer-copyright { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; font-size: 1rem; }
.footer-inner > p .footer-copyright span { font-size: inherit; }
.footer-company, .footer-symbols { display: inline-flex; align-items: center; }
.footer-company { gap: 10px; white-space: nowrap; }
.footer-symbols { gap: 8px; flex: none; }
.footer-symbols img { display: block; flex: none; object-fit: contain; }
.footer-location { white-space: nowrap; }