/* Automotive editorial surfaces. Scoped below the existing hero and inventory. */
.story-section { --story-ink: var(--text-white); --story-copy: var(--text-light); --story-line: var(--ui-field-border); --story-paper: #f2f3ee; }
body.dark-mode .story-section { --story-paper: #14221b; }
body .story-section { padding: 96px 5vw; scroll-margin-top: 65px; }
.story-wrap { max-width: 1280px; margin: auto; }
.story-section .story-title { font-size: clamp(36px,4.2vw,62px); line-height: 1.05; letter-spacing: -.045em; font-weight: 500; color: var(--story-ink); margin: 0; max-width: 760px; text-wrap: balance; }
.story-section .story-lead { max-width: 590px; margin: 24px 0 38px; color: var(--story-copy); font-size: 18px; line-height: 1.6; }
.story-section p { line-height: 1.6; }
.story-section h3 { color: var(--story-ink); font-weight: 500; letter-spacing: -.025em; }
.story-intro .story-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 9%; align-items: center; padding-bottom: 0; }
.story-intro .story-title { max-width: 430px; font-size: clamp(42px,5vw,72px); }
.story-intro .story-lead { max-width: 350px; margin-bottom: 0; }
.story-promises { display: grid; grid-template-columns: 1fr 1fr; gap: 42px 34px; }
.story-promise { padding-left: 0; }
.story-promise h2 { font-size: 21px; line-height: 1.2; margin: 0 0 9px; font-weight: 500; color: var(--story-ink); }
.story-promise p { font-size: 14px; color: var(--story-copy); margin: 0; max-width: 210px; }
body #custom-import.story-section { padding-top: 10px; }
#custom-import .story-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 0 8%; align-items: start; }
.story-process-heading { position: sticky; top: 115px; }
.story-process-heading .story-title { max-width: 420px; }
.story-process-heading > p { font-size: 17px; color: var(--story-copy); max-width: 270px; margin-top: 24px; }
.story-journey { display: grid; gap: 36px; }
.story-stage { display: grid; grid-template-columns: 45px 1fr; column-gap: 22px; padding: 0; }
.story-stage-top { grid-row: 1 / 4; padding-top: 6px; }
.story-number { font-size: 15px; color: var(--ui-accent); font-variant-numeric: tabular-nums; }
.story-stage h3 { font-size: 32px; line-height: 1.1; margin: 0 0 10px; }
.story-stage > p { font-size: 15px; color: var(--story-copy); margin: 0; max-width: 420px; }
.story-stage .story-detail { grid-column: 2; border: 0; }
.story-detail { border-bottom: 1px solid var(--story-line); }
.story-detail summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; padding: 18px 0; font-size: 14px; color: var(--story-ink); font-weight: 500; }
.story-detail summary::-webkit-details-marker { display: none; }
.story-detail summary::after { content: '+'; font-size: 24px; font-weight: 300; line-height: 1; flex-shrink: 0; }
.story-detail[open] > summary::after { content: '−'; }
.story-detail summary:hover { color: var(--ui-accent); }
.story-section :is(a,button,summary):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 5px; }
.story-detail-body { font-size: 14px; line-height: 1.65; color: var(--story-copy); padding: 0 0 22px; }
.story-detail-body ul { padding-left: 18px; margin: 10px 0; }
.story-detail-body li { margin: 7px 0; }
.story-detail-body .step-title { font-size: 18px; margin: 20px 0 10px; }
.story-detail-body :is(.step-description,.step-note,.step-subheading) { font-size: 14px; }
.story-detail-body .step-details { list-style: disc; }
.story-detail-body .step-details li { padding-left: 0; }
.story-detail-body .step-details li::before { display: none; }
#custom-import .story-detail { border: 0; }
.story-inline-facts { grid-column: 2; margin-top: 28px; }
.story-inline-facts > p { font-size: 14px; color: var(--story-copy); margin: 0; }
/* The cutaway is a contained dark illustration plate in either theme. */
body #inspection-services.story-section { padding-top: 30px; padding-bottom: 40px; }
#inspection-services .story-wrap { background: #0a130f; color: #f4f6f0; border-radius: 4px; overflow: hidden; padding: 52px 54px 28px; display: grid; grid-template-columns: .76fr 1.24fr; column-gap: 20px; --story-ink: #f4f6f0; --story-copy: #c8d2ca; --story-line: #35463b; --ui-accent: #b4d0b7; }
#inspection-services .story-title { grid-column: 1; grid-row: 1; max-width: 370px; font-size: clamp(36px,3.8vw,54px); align-self: end; z-index: 1; }
#inspection-services .story-lead { grid-column: 1; grid-row: 2; font-size: 16px; max-width: 290px; margin: 22px 0 55px; z-index: 1; }
.story-inspection-layout { display: contents; }
.story-vehicle-visual { grid-column: 2; grid-row: 1 / 3; margin: -32px -34px 12px -8px; align-self: center; position: relative; }
.story-vehicle-visual img { display: block; width: 100%; height: auto; }
.story-vehicle-visual figcaption { position: absolute; bottom: 4%; right: 5%; font-size: 10px; color: #a9b5ac; }
.story-checks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 0 32px; border-top: 1px solid var(--story-line); }
.story-checks .story-detail summary { font-size: 18px; padding: 23px 0; }
.story-checks .checklist-items { list-style: none; padding: 0; margin: 0; }
.story-checks .checklist-items li { padding: 0; font-size: 13px; color: #c8d2ca; line-height: 1.6; }
.story-checks .checklist-items li::before { display: none; }
.story-report-note { grid-column: 1 / -1; color: #a9b5ac; font-size: 12px; line-height: 1.7; margin: 25px 0 0; max-width: 950px; }
/* Contract payment stages share one continuous bar. */
#financing-payment .story-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 0 8%; }
#financing-payment .story-title { grid-column: 1; grid-row: 1 / 4; max-width: 420px; }
.story-payment-track { display: grid; grid-template-columns: 1fr 1fr; height: 8px; gap: 5px; margin: 8px 0 30px; }
.story-payment-track span:first-child { background: var(--ui-accent); }
.story-payment-track span:last-child { background: var(--story-ink); opacity: .3; }
.story-payment { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.story-payment-line { display: none; }
.story-percentage { font-size: 58px; line-height: 1; letter-spacing: -.04em; font-weight: 400; color: var(--story-ink); }
.story-percentage span { font-size: .5em; }
.story-payment h3 { font-size: 18px; line-height: 1.35; margin: 20px 0 10px; }
.story-payment p { font-size: 14px; color: var(--story-copy); margin: 0; }
.story-payment-terms { grid-column: 2; font-size: 12px; color: var(--story-copy); margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--story-line); }
/* Delivery price panels: visible benefits, clear contrast, no repeated clip-art. */
body #transportation-delivery.story-section { padding-top: 38px; }
#transportation-delivery .story-title { max-width: 900px; }
#transportation-delivery .story-lead { margin-bottom: 42px; }
.story-delivery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; align-items: stretch; }
.story-delivery { --delivery-ink: #17241d; --delivery-copy: #4f6055; --delivery-line: #d5dfd4; --delivery-button: #20372a; --delivery-on-button: #f6faf2; position: relative; display: flex; flex-direction: column; padding: 34px 32px 30px; border-radius: 22px; color: var(--delivery-ink); background: linear-gradient(145deg,#fcfdf9,#eef2eb); border: 1px solid #d2dccf; box-shadow: inset 0 1px 0 #fff,0 12px 36px #1122190a; transition: transform .24s ease,box-shadow .24s ease,border-color .24s ease; }
.story-delivery-preferred { background: linear-gradient(145deg,#f0f6ec,#dce9db); border-color: #bdcdb9; }
.story-delivery-premium { --delivery-ink: #f0f6ed; --delivery-copy: #b9cdbd; --delivery-line: #3b5644; --delivery-button: #d6e9c9; --delivery-on-button: #163020; background: linear-gradient(135deg,#294b36 0%,#142a1e 48%,#0d1b14 100%); border-color: #67866b; box-shadow: inset 0 1px 0 #b5d4b54d,0 18px 44px #0a271526; }
body.dark-mode .story-delivery:not(.story-delivery-premium) { --delivery-ink: #eef3eb; --delivery-copy: #b5c5b8; --delivery-line: #3a4a3e; --delivery-button: #dce7d7; --delivery-on-button: #192c20; background: linear-gradient(145deg,#233228,#17231b); border-color: #405245; box-shadow: inset 0 1px 0 #b5d4b51a,0 12px 36px #0000001f; }
body.dark-mode .story-delivery-preferred { background: linear-gradient(145deg,#2b3e2f,#1a2a1f); }
.story-delivery-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.story-delivery h3 { color: var(--delivery-ink); margin: 0; font-size: 27px; line-height: 1.2; font-weight: 500; letter-spacing: -.025em; }
.story-delivery .story-muted { color: var(--delivery-copy); font-size: 14px; margin: 12px 0 40px; }
.story-delivery-time { color: var(--delivery-ink); font-size: 12px; line-height: 1.4; padding: 7px 11px; border-radius: 100px; border: 1px solid var(--delivery-line); margin: 0; white-space: nowrap; }
.story-delivery-price { display: flex; align-items: baseline; gap: 6px; color: var(--delivery-ink); font-weight: 400; line-height: 1.1; letter-spacing: -.045em; white-space: nowrap; margin: 0; }
.story-price-main { font-size: clamp(32px,3.2vw,46px); }
.story-price-range { font-size: clamp(23px,2.1vw,30px); color: var(--delivery-copy); }
.story-insurance { color: var(--delivery-ink); font-size: 13px; line-height: 1.65; margin: 28px 0 0; padding-top: 25px; border-top: 1px solid var(--delivery-line); min-height: 66px; }
.story-delivery-features { color: var(--delivery-copy); font-size: 14px; line-height: 1.65; margin: 16px 0 34px; }
.story-delivery-features ul { list-style: none; margin: 0; padding: 0; }
.story-delivery-features li { position: relative; padding-left: 24px; margin: 9px 0; }
.story-delivery-features li::before { content: '✓'; position: absolute; left: 0; font-size: 13px; color: var(--delivery-ink); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .story-delivery:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 #ffffff33,0 22px 50px #0a27151c; border-color: #76937a; } }
body .story-button { display: inline-flex; justify-content: center; align-items: center; padding: 15px 24px; min-height: 50px; border: 1px solid var(--ui-action); border-radius: 4px; background: var(--ui-action); color: var(--ui-on-action); font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; line-height: 1.35; box-shadow: none; width: auto; transition: background-color .18s,color .18s,border-color .18s; }
body .story-button:hover { background: var(--ui-action-hover); color: var(--ui-on-action); transform: none; }
body .story-button-secondary { background: transparent; border-color: var(--story-line); color: var(--story-ink); }
body .story-button-secondary:hover { background: var(--ui-success-surface); color: var(--story-ink); }
body .story-delivery .story-button { margin-top: auto; width: 100%; min-height: 52px; border-radius: 11px; background: var(--delivery-button); color: var(--delivery-on-button); border: 1px solid transparent; box-shadow: inset 0 1px 0 #ffffff26; font-weight: 500; }
body .story-delivery .story-button:hover { background: var(--delivery-button); color: var(--delivery-on-button); filter: brightness(1.1); }
body .story-delivery .story-button:focus-visible { outline: 2px solid var(--delivery-ink); outline-offset: 4px; }
/* Contact retains the progressive form, with a clear personal point of contact. */
body #contact.story-section { padding-top: 15px; }
#contact .story-wrap { border-top: 1px solid var(--story-line); padding-top: 68px; }
.story-contact-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.story-contact-heading .story-title { max-width: 640px; }
.story-person { display: flex; flex-direction: column; gap: 8px; padding-bottom: 44px; }
.story-person strong { font-size: 22px; font-weight: 500; }
.story-person span { font-size: 14px; color: var(--story-copy); }
.story-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }
body #contact .import-form-toggle { margin: 0; }
.story-social { display: flex; gap: 25px; margin-top: 35px; flex-wrap: wrap; font-size: 14px; }
.story-social a { color: var(--story-copy); text-underline-offset: 5px; }
.story-social a:hover { color: var(--ui-accent); }
.story-section .import-form-content { margin: 25px 0; max-width: 900px; scroll-margin-top: 100px; }
.story-section .contact-form { border-radius: 4px; }
.story-form-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.story-form-step legend { font-size: 25px; font-weight: 600; margin-bottom: 28px; }
.story-form-step .form-subsection-title { font-size: 18px; }
.story-form-progress { display: none; color: var(--ui-accent); font-size: 12px; font-weight: 600; letter-spacing: .05em; margin-bottom: 20px; }
.story-form-enhanced .story-form-progress { display: block; }
.story-form-navigation { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; }
.story-section [hidden] { display: none !important; }
.story-form-step > p { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
.story-form-step .checkbox-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 1050px) {
 body .story-section { padding: 72px 4vw; }
 .story-intro .story-wrap, #custom-import .story-wrap, #financing-payment .story-wrap { gap: 0 5%; }
 #inspection-services .story-wrap { padding: 40px 35px 26px; }
 .story-checks { gap: 0 22px; }
 .story-checks .story-detail summary { font-size: 16px; }
}
@media (max-width: 760px) {
 body .story-section { padding: 55px 24px; }
 .story-section .story-title { font-size: 40px; }
 .story-section .story-lead { font-size: 16px; }
 .story-intro .story-wrap { grid-template-columns: 1fr; gap: 36px; padding-bottom: 0; }
 .story-intro .story-title { max-width: 350px; font-size: 48px; }
 .story-intro .story-lead { margin-top: 20px; }
 .story-promises { gap: 28px 22px; }
 .story-promise { padding-left: 0; }
 .story-promise h2 { font-size: 18px; }
 .story-promise p { font-size: 13px; }
 #custom-import .story-wrap, #financing-payment .story-wrap { display: block; }
 .story-process-heading { position: static; margin-bottom: 34px; }
 .story-process-heading > p { max-width: none; margin-top: 18px; }
 .story-stage { grid-template-columns: 28px 1fr; column-gap: 15px; padding: 0; }
 .story-stage h3 { font-size: 28px; }
 .story-stage > p { font-size: 14px; }
 body #inspection-services.story-section { padding: 10px 12px 20px; }
 #inspection-services .story-wrap { padding: 30px 23px 25px; display: flex; flex-direction: column; gap: 0; }
 #inspection-services .story-title { font-size: 38px; max-width: 320px; }
 #inspection-services .story-lead { margin: 18px 0 20px; max-width: 360px; font-size: 15px; }
 .story-vehicle-visual { margin: 0 -15px 25px; }
 .story-vehicle-visual figcaption { bottom: 0; right: 5%; font-size: 9px; }
 .story-checks { display: block; }
 .story-checks .story-detail summary { font-size: 18px; padding: 19px 0; }
 .story-report-note { font-size: 12px; margin-top: 22px; }
 .story-payment-track { margin-top: 32px; }
 .story-payment { gap: 25px; }
 .story-percentage { font-size: 54px; }
 .story-payment h3 { font-size: 17px; }
 .story-payment p { font-size: 13px; }
 body #transportation-delivery.story-section { padding-top: 15px; }
 .story-contact-heading { display: block; }
 #contact .story-wrap { padding-top: 45px; }
 .story-person { padding-bottom: 28px; }
 .story-person strong { font-size: 19px; }
 .story-section .contact-form { padding: 25px 18px; }
 .story-form-step .checkbox-grid { grid-template-columns: 1fr; }
 .story-form-step legend { font-size: 23px; }
 .story-form-navigation .story-button { padding: 14px 20px; }
}
@media (prefers-reduced-motion: reduce) { body .story-button { transition: none; } }
.story-vehicle-visual img { mix-blend-mode: lighten; }

@media(max-width:1100px) and (min-width:761px) {
 .story-delivery-grid { gap: 14px; }
 .story-delivery { padding: 28px 23px 24px; }
 .story-delivery-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
 .story-delivery .story-muted { min-height: 45px; margin-bottom: 25px; }
 .story-delivery-price { gap: 4px; }
}
@media(max-width:760px) {
 .story-delivery-grid { grid-template-columns: 1fr; gap: 20px; }
 .story-delivery { padding: 28px 26px 26px; border-radius: 20px; }
 .story-delivery .story-muted { margin-bottom: 32px; }
 .story-price-main { font-size: 40px; }
 .story-price-range { font-size: 27px; }
 .story-insurance { min-height: 0; }
 .story-delivery-features { margin-bottom: 25px; }
}
@media(max-width:360px) { .story-price-main { font-size: 35px; } .story-price-range { font-size: 24px; } .story-delivery h3 { font-size: 24px; } .story-delivery-time { padding: 6px 8px; } }
@media(prefers-reduced-motion:reduce) { .story-delivery { transition: none; } }