/* page layouts shared by the concept pages */
section{position:relative}
h2.d,h2.sd{font-size:clamp(30px,3.6vw,46px)}
.strip .light{color:#fff}
.sec-h h2.sd{max-width:22ch}
.sec{padding:96px 0}
.sec.gray{background:var(--concrete)}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:44px}
.sec-h > div{max-width:640px}
.sec-h h2{margin-top:14px}
.sec-h p{margin-top:14px;color:var(--dim);font-size:18px}

/* hero */
.hero{background:var(--char);color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,22,23,.92) 0%,rgba(25,22,23,.78) 34%,rgba(25,22,23,.12) 62%,rgba(25,22,23,0) 100%)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:60px;align-items:center;padding-top:72px;padding-bottom:72px;min-height:640px}
.hero h1{font-size:clamp(40px,4.6vw,62px);max-width:13ch;margin:16px 0 20px}
.hero .lbl{color:rgba(255,255,255,.75)}
.hero .sub{font-size:19px;max-width:44ch;color:rgba(255,255,255,.88)}
.hero .stats{display:flex;gap:34px;margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.25);flex-wrap:wrap}
.hero .quote{color:var(--ink)}
.hero-pic{display:none}

/* trust band */
.trust{background:var(--ink);color:#fff;padding:34px 0}
.trust .wrap{display:grid;grid-template-columns:auto 1fr;gap:28px 56px;align-items:center}
.trust .logos img{height:44px;width:auto}
.trust ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--display);font-weight:700;font-size:15px;color:rgba(255,255,255,.9)}
.trust .lbl{grid-column:1/-1;margin-bottom:-12px}

/* services */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{display:flex;flex-direction:column;text-decoration:none}
.card .ring{aspect-ratio:4/5}
.card h3{font-size:26px;margin:22px 0 8px}
.card p{color:var(--dim);font-size:16px;margin-bottom:14px}

/* visit steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.steps li{padding:26px 24px 10px 0}
.steps li + li{padding-left:24px;border-left:1px solid var(--rule)}
.steps .mono{color:var(--red)}
.steps h3{font-size:21px;margin:12px 0 8px}
.steps p{font-size:16px;color:var(--dim)}

/* dealers */
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:center}
.split .ring{aspect-ratio:16/10}
.split h2{margin:14px 0 18px}
.split p + p{margin-top:12px}
.split .btns{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}

/* reviews */
.rv{display:grid;grid-template-columns:320px minmax(0,1fr);gap:64px;align-items:start}
.rv .score .ctr{display:flex;width:max-content;font-size:64px;margin:16px 0 12px}
.rv .score p{color:var(--dim);margin-bottom:24px}

/* history */
.hist{background:var(--char);padding:96px 0}
.hist .split{align-items:start}
.hist .ring{aspect-ratio:4/3}
.hist .lead{color:rgba(255,255,255,.82);font-size:18px;max-width:46ch;margin-bottom:30px}

/* visit */
.visit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.visit .ring{aspect-ratio:16/10}
.hours{width:100%;border-collapse:collapse;margin:22px 0 28px;font-family:var(--mono);font-size:15px}
.hours td{padding:11px 0;border-bottom:1px solid var(--rule)}
.hours td + td{text-align:right}
.visit address{font-style:normal;font-size:20px;font-family:var(--display);font-weight:700;margin-top:14px}

/* closing: the sky from the badge, down to the sun on the horizon */
.foot{background:var(--skyband);position:relative;overflow:hidden;color:var(--ink)}
.foot .sun{position:absolute;left:50%;bottom:-150px;width:300px;height:300px;margin-left:-150px;border-radius:50%;background:radial-gradient(circle,#F2C45A 0 52%,#E1AD35 53% 70%,rgba(225,173,53,.35) 71% 100%)}
.foot-in{position:relative;padding:80px 0 190px;display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:40px}
.foot h2{font-size:clamp(28px,3vw,40px);margin-bottom:22px;max-width:14ch}
.foot h4{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.foot ul{list-style:none}
.foot li{padding:4px 0;font-size:16px}
.foot a{text-decoration:none}
.legal{background:var(--ink);color:rgba(255,255,255,.7);font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.legal .wrap{display:flex;justify-content:space-between;gap:20px;padding-top:18px;padding-bottom:18px;flex-wrap:wrap}

@media (max-width:1100px){
  .hero-in{grid-template-columns:minmax(0,1fr) 380px;gap:36px}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  /* a car behind the first screen: photo at the top, fading into the shop grey under the headline */
  .hero .bg{bottom:auto;height:300px}
  .hero .bg img{object-position:28% 45%}
  .hero .bg::after{background:linear-gradient(180deg,rgba(25,22,23,.05) 0%,rgba(25,22,23,.25) 45%,rgba(43,42,41,.96) 88%,#2B2A29 100%)}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:150px;padding-bottom:0;min-height:0}
  .hero h1{font-size:34px;margin:0;max-width:16ch;text-shadow:0 2px 14px rgba(0,0,0,.45)}
  .hero .lbl,.hero .sub,.hero-pic{display:none}
  .hero .stats{order:3;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;margin:4px 0 0;gap:12px;padding:22px 0 30px}
  .hero .stat .ctr{font-size:22px}
  .hero .stat span:last-child{font-size:10px;letter-spacing:.05em}
  .hero .quote .win-b > h2,.hero .quote .win-b > p{display:none}
  .hero .quote .win-b{padding:16px 16px 18px}
  .hero .quote{order:1}
  .hero-txt{display:contents}
  .trust .wrap{grid-template-columns:1fr}
  .sec,.hist{padding:64px 0}
  .sec-h{flex-direction:column;align-items:flex-start;margin-bottom:30px}
  .svcs{grid-template-columns:1fr;gap:40px}
  .card .ring{aspect-ratio:4/3}
  .steps{grid-template-columns:1fr}
  .steps li,.steps li + li{padding:20px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .split,.rv,.visit{grid-template-columns:1fr;gap:34px}
  .split .btns,.visit .btns{flex-direction:column;gap:12px}
  .split .btns .btn,.visit .btns .btn{width:100%}
  .rv .score .ctr{font-size:48px}
  .hours{font-size:14px}
  .visit address{font-size:18px}
  /* footer: keep the page margins, two link columns side by side, smaller sun */
  .foot-in{grid-template-columns:1fr 1fr;gap:30px 20px;padding:56px 18px 150px}
  .foot-in > div:first-child{grid-column:1/-1}
  .foot-in > div:last-child{grid-column:1/-1}
  .foot-in > div:first-child img{width:88px!important;height:88px!important;margin-bottom:18px!important}
  .foot h2{font-size:28px;max-width:none}
  .foot .btn{width:100%}
  .foot .sun{width:200px;height:200px;margin-left:-100px;bottom:-100px}
  .legal .wrap{flex-direction:column;gap:6px}
}