/* home-lift.css (auto-repair, 5 Nov 2026): the home page below the kit hero.
   Colours come from the site's own tokens (--paper, --surface, --ink, --rule, --accent), so the dark theme and the light theme both hold.
   Variety per section: photo-led claim band, timeline with the rail, full-bleed photo mosaic, ticket, coupon, five-column process,
   index list beside a picture banner, quiet reviews band, full-bleed two-up shop photos. */

/* 1. the claim band under the hero: a picture on the right, the line large on the left */
.offerbar{background:var(--surface);border-bottom:1px solid var(--rule)}
.offerbar__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(2rem,5vw,4.5rem);align-content:center;align-items:center;padding-block:clamp(2.25rem,5vw,4rem)}
.offerbar__tag{grid-column:1;justify-self:start;margin-bottom:1rem;font-size:.6875rem}
.offerbar__msg{grid-column:1;flex:none;font-size:clamp(1.2rem,1rem + 1vw,1.7rem);line-height:1.35;color:var(--ink-2)}
.offerbar__msg b{color:var(--ink);font-weight:700;display:block;margin-bottom:.4rem;font-family:var(--f-display);letter-spacing:-.015em}
.offerbar__in .photo--inline{grid-column:2;grid-row:1/span 3;margin:0;border-radius:.4rem}
.offerbar__in .photo--inline img{height:clamp(240px,28vw,400px)}
.offerbar__go{grid-column:1;justify-self:start;margin-top:1.4rem;font-size:.75rem}
@media (max-width:48rem){
  .offerbar__in{grid-template-columns:minmax(0,1fr)}
  .offerbar__in .photo--inline{grid-column:1;grid-row:auto;order:-1;margin-bottom:1.4rem}
  .offerbar__go{display:inline-block;margin-top:1.2rem;padding:.9rem 0;min-height:44px}
}

/* 2. after the keys: four photographs edge to edge, the middle two narrower */
.lifeband .lifegrid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.35fr;gap:3px;margin:1.6rem calc(50% - 50vw) 0;width:100vw;max-width:100vw}
.lifeband .lifegrid .photo{border:0;border-radius:0}
.lifeband .lifegrid .photo img{aspect-ratio:auto;height:clamp(260px,30vw,440px);width:100%}
@media (max-width:48rem){
  .lifeband .lifegrid{grid-template-columns:1fr 1fr}
  .lifeband .lifegrid .photo img{height:clamp(180px,48vw,280px)}
}

/* the rail becomes a row of facts above the heading in the flat sections */
.ar-flat .bay{display:block}
.ar-flat .rail{border:0;padding:0;margin:0 0 1.75rem}
.ar-flat .rail dl{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;grid-auto-columns:max-content;gap:.15rem clamp(1.5rem,4vw,3rem);align-items:start}
.ar-flat .rail dt{grid-row:1}
.ar-flat .rail dd{grid-row:2;margin:0}
@media (max-width:40rem){.ar-flat .rail dl{grid-auto-flow:row;grid-template-rows:none;grid-auto-columns:auto;gap:1rem}.ar-flat .rail dt,.ar-flat .rail dd{grid-row:auto}}

/* 3. the repair order: prose beside the document, picture underneath runs wide */
.ar-ticket .photo--inline{margin:2.5rem calc(50% - 50vw) 0;border-radius:0;border-inline:0}
.ar-ticket .photo--inline img{height:clamp(220px,32vw,460px);object-position:50% 40%}

/* 4. five steps across, a ruled line on top of each */
.ar-steps .steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(1rem,2vw,1.75rem)}
.ar-steps .step{display:block;border-top:2px solid var(--accent);padding:1.1rem 0 0}
.ar-steps .step:first-child{padding-top:1.1rem}
.ar-steps .step__n{display:block;font-size:2.4rem;line-height:1;margin-bottom:.8rem;color:var(--accent)}
.ar-steps .step__n::after{display:none}
.ar-steps .step h3{font-size:1.125rem}
.ar-steps .step p{font-size:.9375rem}
.ar-steps .photo--inline{margin:2.75rem calc(50% - 50vw) 0;border-radius:0;border-inline:0}
.ar-steps .photo--inline img{height:clamp(240px,34vw,480px);object-position:50% 35%}
@media (max-width:64rem){.ar-steps .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem clamp(1rem,3vw,2rem)}}
@media (max-width:36rem){.ar-steps .steps{grid-template-columns:minmax(0,1fr)}}

/* 5. services: the picture is a wide banner, the fourteen are an index in two columns */
.ar-svc .photo--inline{margin:0 calc(50% - 50vw) 2.5rem;border-radius:0;border-inline:0}
.ar-svc .photo--inline img{height:clamp(220px,30vw,420px);object-position:50% 55%}
.ar-svc .svc{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,4rem);background:none;border:0;border-radius:0;overflow:visible}
.ar-svc .svc a{background:none;border-top:1px solid var(--rule);padding:1.2rem 0}
.ar-svc .svc a:hover{background:var(--surface-2)}
@media (max-width:48rem){.ar-svc .svc{grid-template-columns:minmax(0,1fr)}}

/* 6. reviews: a quiet band, the widget slot sits inline */
.ar-rev{background:var(--surface-2)}
.ar-rev .sec__hd h2{font-size:var(--step-2)}
.ar-rev .mount{background:var(--surface);align-items:flex-start;text-align:left}

/* 7. the shop: two pictures edge to edge, words on a bottom sheen */
.ar-shop .shots{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:0 calc(50% - 50vw);width:100vw;max-width:100vw;border:0;background:none}
.ar-shop .shot{position:relative;background:#000}
.ar-shop .shot img{aspect-ratio:auto;height:clamp(280px,36vw,520px)}
.ar-shop .shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:3.5rem clamp(1.25rem,4vw,3rem) 1.4rem;color:#e9edf0;background:linear-gradient(0deg,rgba(6,8,10,.88) 0%,rgba(6,8,10,.5) 55%,rgba(6,8,10,0) 100%);font-size:.9375rem}
.ar-shop .shot figcaption b{color:#fff;font-size:1.15rem;font-family:var(--f-display)}
@media (max-width:48rem){.ar-shop .shots{grid-template-columns:minmax(0,1fr)}}

/* customer quotes: three plain voices under an accent rule, no cards */
.ar-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1.5rem,3vw,2.5rem);margin-top:.5rem}
.ar-quote{margin:0;border-top:2px solid var(--accent);padding:1.25rem 0 0;display:flex;flex-direction:column;gap:1rem}
.ar-quote blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.ar-quote p{margin:0}
.ar-quote figcaption{margin-top:auto;font-size:.875rem;color:var(--ink-2)}
.ar-quote figcaption b{color:var(--ink);margin-right:.5rem}
@media (max-width:56rem){.ar-quotes{grid-template-columns:minmax(0,1fr);gap:1.75rem}}