/* =========================================================
   Open Road Driving · home-2026b.css (index.html only). Scoped with hm-.
   Composition: hero with a faded photo and sign plates -> proof strip on the "road" -> a route down the page (three steps) ->
   navy price band with number-plate prices -> enquiry call-out.
   ========================================================= */
.hm-hero { position: relative; overflow: clip; padding-block: clamp(32px, 4vw, 72px) clamp(40px, 5vw, 72px); }
.hm-hero__grid { display: grid; gap: var(--s-6); }
.hm-hero__copy { display: grid; gap: var(--s-5); align-content: center; justify-items: start; }
.hm-hero h1 { font-size: var(--t-display); max-width: 11ch; }
.hm-hero .lede { max-width: 34em; }
.hm-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.hm-hero__photo { --fade-t: 0; --fade-r: 0; --fade-x: clamp(24px, 9vw, 120px); --fade-y: clamp(40px, 8vw, 96px); position: relative; margin: 0; aspect-ratio: 4 / 3; max-width: 760px; width: 100%; justify-self: end; }
.hm-hero__photo picture, .hm-hero__photo img { aspect-ratio: 4 / 3; }
.hm-signs { position: absolute; z-index: 2; top: var(--s-4); right: var(--s-4); display: grid; gap: var(--s-2); justify-items: end; padding: var(--s-3) var(--s-4); background: var(--navy); border-radius: var(--r-card); box-shadow: 0 0 0 2px var(--sun) inset; max-width: calc(100% - 2 * var(--s-4)); }
.hm-signs__label { font: 700 var(--t-meta)/1.2 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-dim); margin: 0; }
.hm-signs__plates { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); justify-content: flex-end; margin: 0; padding: 0; list-style: none; }
.hm-hero__photo figcaption { position: absolute; z-index: 2; left: var(--s-4); bottom: var(--s-3); font: 400 var(--t-meta)/1.3 var(--font-text); color: #fff; background: rgba(14, 31, 54, .78); padding: 4px var(--s-3); border-radius: var(--r-control); max-width: calc(100% - 2 * var(--s-4)); }
@media (min-width: 64rem) {
  .hm-hero__grid { grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); gap: var(--s-6); align-items: center; }
  .hm-hero__photo { margin-right: calc(-1 * var(--margin)); max-width: none; width: calc(100% + var(--margin)); }
}

/* proof strip: sits on the road (a yellow centre line) */
.hm-strip { background: var(--surface-2); border-block: 1px solid var(--line-strong); position: relative; }
.hm-strip__list { display: grid; margin: 0; padding: 0; list-style: none; }
.hm-strip__list li { display: grid; gap: 2px; padding: var(--s-5) 0; border-top: 2px dashed var(--line-strong); }
.hm-strip__list li:first-child { border-top: 0; }
.hm-strip__big { font: 800 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.hm-strip__small { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-soft); margin: 0; }
@media (min-width: 48rem) {
  .hm-strip__list { grid-template-columns: repeat(3, 1fr); }
  .hm-strip__list li { padding: var(--s-6) var(--s-6); border-top: 0; border-left: 2px dashed var(--line-strong); }
  .hm-strip__list li:first-child { border-left: 0; padding-left: 0; }
}

/* start: a route, not a card grid */
.hm-start { padding-block: var(--section); }
.hm-start__grid { display: grid; gap: var(--s-7); }
.hm-start__side { display: grid; gap: var(--s-5); align-content: start; }
.hm-start__side .lede { max-width: 30em; }
.hm-start__photo { --fade-size: clamp(28px, 6vw, 72px); max-width: 28rem; aspect-ratio: 4 / 5; margin: 0; }
.hm-start__photo picture, .hm-start__photo img { aspect-ratio: 4 / 5; }
.hm-route { counter-reset: step; margin: 0; padding: 0; list-style: none; display: grid; }
.hm-route li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4) var(--s-5); padding-bottom: var(--s-8); }
.hm-route li:last-child { padding-bottom: 0; }
.hm-route li:not(:last-child)::before { content: ""; position: absolute; left: 26px; top: 64px; bottom: 8px; border-left: 4px dashed var(--line-strong); }
.hm-route__n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 3px var(--navy); color: var(--navy); font: 800 1.625rem/1 var(--font-display); }
.hm-route h3 { font: 800 clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem)/1.02 var(--font-display); letter-spacing: -.03em; margin-bottom: var(--s-3); padding-top: var(--s-1); }
.hm-route p { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-soft); max-width: 32em; }
.hm-start__cta { margin-top: var(--s-7); }
@media (min-width: 64rem) {
  .hm-start__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-9); align-items: start; }
  .hm-start__side { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .hm-route li:nth-child(2) { margin-left: var(--s-7); }
  .hm-route li:nth-child(3) { margin-left: calc(var(--s-7) * 2); }
}

/* prices: navy band, number-plate yellow */
.hm-prices { background: var(--navy); color: #fff; padding-block: var(--section); position: relative; }
.hm-prices__head { display: grid; gap: var(--s-6); margin-bottom: var(--s-8); align-items: center; }
.hm-prices__head .lede { margin-top: var(--s-4); }
.hm-prices__photo { --fade-size: clamp(32px, 6vw, 88px); margin: 0; aspect-ratio: 21 / 9; width: 100%; }
.hm-prices__photo picture, .hm-prices__photo img { aspect-ratio: 21 / 9; }
.hm-rates { display: grid; margin: 0; padding: 0; list-style: none; }
.hm-rate { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6) 0; border-top: 3px dashed var(--navy-edge-soft); }
.hm-rate:first-child { border-top: 0; padding-top: 0; }
.hm-rate__name { font: 700 var(--t-meta)/1.2 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-dim); margin: 0; }
.hm-rate__price { justify-self: start; margin: 0; padding: 0 var(--s-5); border-radius: 12px; background: var(--sun); color: var(--navy); box-shadow: inset 0 0 0 3px var(--sun), inset 0 0 0 5px var(--navy); font: 800 clamp(3.25rem, 2.2rem + 4vw, 5rem)/1.12 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hm-rate__text { color: var(--navy-dim); font-size: var(--t-body); line-height: 1.5; margin: 0; }
.hm-prices__foot { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; }
@media (min-width: 56rem) {
  .hm-prices__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); }
  .hm-rates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-rate { padding: 0 var(--s-6); border-top: 0; border-left: 3px dashed var(--navy-edge-soft); }
  .hm-rate:first-child { padding-left: 0; border-left: 0; }
  .hm-rate:last-child { padding-right: 0; }
}

/* call-out */
.hm-cta { padding-block: var(--section); }
.hm-cta__in { display: grid; gap: var(--s-7); align-items: center; }
.hm-cta__photo { margin: 0; max-width: 22rem; aspect-ratio: 1; }
.hm-cta__photo picture, .hm-cta__photo img { aspect-ratio: 1; }
.hm-cta__copy { display: grid; gap: var(--s-5); justify-items: start; }
.hm-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
@media (min-width: 56rem) {
  .hm-cta__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-9); }
  .hm-cta__photo { max-width: none; }
}

.hm-prices__foot { row-gap: var(--s-2); }