/* base.css - Knightcott Tyres. Phone first (390), composed again at 700 and 1100.
   Motion lives behind two classes: .hero-anim / .motion (set in the head when the phone allows motion) and .mr
   (motion.js running). Without them - JS off or reduced motion - every word and photo is there, still and whole. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 12px; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 15.5px/1.55 var(--f-text); font-kerning: normal;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
main { overflow-x: clip; }   /* anything sliding in from the side never widens a phone's layout (clip keeps the pins sticky) */
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.04; margin: 0; letter-spacing: -.012em; text-wrap: balance; }
h2 { font-size: 27px; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.15; }
p { margin: 0; }
p + p { margin-top: .7em; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 12px 16px; font-weight: 600; }
.skip-link:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--pad), 1280px); margin-inline: auto; }
@media (min-width: 700px) { body { font-size: 16.5px; } h2 { font-size: 36px; } h3 { font-size: 23px; } }
@media (min-width: 1100px) { body { font-size: 17px; } h2 { font-size: clamp(2.5rem, 3.1vw, 3.1rem); } h3 { font-size: 26px; } }

/* ---------- small parts ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  font: 700 14px/1.2 var(--f-display); letter-spacing: .02em; color: var(--red);
}
.eyebrow::before {   /* the logo's tapered speed line: yellow over red, thin end trailing */
  content: ""; flex: 0 0 auto; width: 38px; height: 7px;
  background: linear-gradient(to bottom, var(--yellow) 0 50%, var(--red) 50% 100%);
  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%);
  transform-origin: right center;
}
.eyebrow--dark { color: var(--yellow); }
@media (min-width: 1100px) { .eyebrow { font-size: 15px; margin-bottom: 16px; } .eyebrow::before { width: 52px; height: 8px; } }

.cap { font-size: 13px; line-height: 1.4; color: var(--ink-soft); margin-top: 8px; }
.cap--chip { display: inline-block; margin: 0; padding: 7px 11px; background: rgba(11, 20, 34, .84); color: #fff; font-size: 12.5px; }

.btn {
  --c: var(--red); --t: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 0; cursor: pointer; text-decoration: none;
  font: 700 16px/1 var(--f-display); letter-spacing: .01em; color: var(--t); background: var(--c);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background-color .2s, transform .2s var(--ease);
}
.btn svg { flex: 0 0 auto; }
.btn:hover { background: var(--red-d); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--yellow); }
.btn--big { min-height: 56px; font-size: 17px; padding: 0 26px; }
.btn--navy { --c: var(--navy); }
.btn--navy:hover { background: var(--navy-d); }
.btn--line { --c: transparent; --t: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn--line:hover { background: var(--silver); }
.btn--line:focus-visible { box-shadow: inset 0 0 0 3px var(--red); }

.txtlink {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--red);
}
.txtlink--dark { color: #fff; text-decoration-color: var(--yellow); }
.txtlink:hover { text-decoration-thickness: 3px; }

.go {   /* a panel's ask: the line under it fills on hover */
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 14px;
  font: 700 16px/1 var(--f-display); color: var(--red); text-decoration: none; border-bottom: 2px solid currentColor;
}
.go::after { content: ""; width: 9px; height: 9px; border-top: 2.5px solid; border-right: 2.5px solid; transform: rotate(45deg); transition: transform .25s var(--ease); }
.go:hover::after { transform: translateX(4px) rotate(45deg); }

.js-only { display: none; }
.js .js-only { display: flex; }

/* ---------- header: the logo on its own white bar ---------- */
.hdr { position: relative; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.hdr__bar { position: relative; display: flex; align-items: center; gap: 8px; height: var(--hdr-h); padding-inline: var(--pad); max-width: 1440px; margin-inline: auto; }
.brand { display: block; margin-right: auto; padding: 6px 0; }
.brand img { height: 42px; width: auto; }
.hdr__call, .hdr__nav { display: none; }
.callbtn, .burger {
  display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
}
.callbtn { background: var(--red); color: #fff; }
.callbtn:hover { background: var(--red-d); }
.burger { background: var(--silver); }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2.5px; background: var(--navy); border-radius: 2px; position: relative; transition: transform .25s var(--ease), background-color .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6.5px; }
.burger span::after { top: 6.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6.5px) rotate(-45deg); }
.menu { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 3px solid var(--red); padding: 8px var(--pad) 20px; box-shadow: 0 18px 30px -18px rgba(19, 33, 58, .35); }
.menu ul { display: grid; }
.menu li a { display: flex; align-items: center; min-height: 52px; font: 700 20px/1 var(--f-display); color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
.menu__call { margin-top: 16px; width: 100%; }
@media (min-width: 700px) { .brand img { height: 48px; } }
@media (min-width: 1100px) {
  .brand img { height: 56px; }
  .callbtn, .burger, .menu { display: none !important; }
  .hdr__call { display: inline-flex; position: absolute; left: 50%; transform: translateX(-50%); min-height: 48px; font-size: 15.5px; padding: 0 20px; }
  .hdr__nav { display: block; margin-left: auto; }
  .hdr__nav ul { display: flex; gap: 2px; }
  .hdr__nav a { display: flex; align-items: center; min-height: 48px; padding: 0 11px; font: 600 15px/1 var(--f-display); color: var(--navy); text-decoration: none; position: relative; }
  .hdr__nav a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 8px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
  .hdr__nav a:hover::after { transform: scaleX(1); }
}
@media (min-width: 1100px) and (max-width: 1279px) { .hdr__call { left: 44%; } .hdr__nav a { padding: 0 8px; font-size: 14px; } }

/* ---------- 1. rolling: the hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--deep); color: #fff; isolation: isolate; }
.hero__media { position: absolute; left: 0; right: 0; top: 0; height: 54svh; min-height: 400px; max-height: 500px; z-index: -1; overflow: hidden; }
.hero__drift { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 86% 50%; }
.hero__media::after {   /* clear over the van and the tractor, dark behind the heading */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--scrim-clear) 0%, var(--scrim-clear) 44%, rgba(19, 33, 58, .74) 64%, rgba(19, 33, 58, .86) 82%, var(--deep) 100%);
}
.hero__in { padding: calc(min(max(54svh, 400px), 500px) - 176px) var(--pad) 0; }
.hero__h1 { font-size: 31px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 14px; }
.hero__h1 .ln { display: block; }
.hero__h1 .ln > span { display: inline-block; }
.hero__lede { max-width: 34em; color: var(--on-dark-soft); }
.hero__lede strong { color: var(--yellow); font-weight: 700; }
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 18px; }
.hero__strip { padding: 18px var(--pad) 26px; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font: 600 15px/1.3 var(--f-display); color: #fff; }
.rating__stars {   /* the stars fill as the 5.0 counts up (--fill, set by motion.js; whole without it) */
  letter-spacing: 2px; font-size: 15px; color: var(--yellow);
  background: linear-gradient(90deg, var(--yellow) var(--fill, 100%), rgba(255, 255, 255, .26) var(--fill, 100%));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rating__n { font-size: 19px; font-weight: 800; color: var(--yellow); font-variant-numeric: tabular-nums; }
.rating__dot { color: var(--on-dark-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; text-decoration: none;
  font: 600 15px/1 var(--f-display); color: #fff; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: box-shadow .2s, background-color .2s, color .2s;
}
.chip:hover { box-shadow: inset 0 0 0 2px var(--yellow); }
.chip--new { color: var(--deep); background: var(--yellow); box-shadow: none; }
.chip--new:hover { background: var(--yellow-l); box-shadow: none; }
.chip:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--yellow); }
.chip--new:focus-visible { box-shadow: inset 0 0 0 3px var(--deep); }
@media (max-width: 699px) {   /* the five sit in one row the thumb can swipe, the last peeking in at the edge */
  .hero__strip { padding: 14px var(--pad) 22px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--pad)); padding: 0 var(--pad); gap: 6px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips li { flex: 0 0 auto; }
  .chip { padding: 0 12px; font-size: 14.5px; white-space: nowrap; }
}

@media (min-width: 700px) {
  .hero__media { height: 54svh; max-height: 560px; }
  .hero__img { object-position: 88% 62%; }
  .hero__media::after { background: linear-gradient(to bottom, var(--scrim-clear) 0%, var(--scrim-clear) 42%, rgba(19, 33, 58, .74) 74%, var(--deep) 100%); }
  .hero__in { padding-top: calc(min(54svh, 560px) - 110px); }
  .hero__h1 { font-size: 46px; }
  .hero__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-bottom: 36px; }
  .hero__strip .chips { margin-top: 0; }
}
@media (min-width: 1100px) {
  .hero { min-height: min(calc(100svh - var(--hdr-h)), 880px); display: grid; grid-template-rows: 1fr auto; }
  .hero__media { left: 30%; height: auto; bottom: 0; max-height: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%); mask-image: linear-gradient(to right, transparent 0, #000 24%); }
  .hero__img { object-position: 80% 58%; }
  .hero__media::after { background: linear-gradient(to bottom, var(--scrim-clear) 0 62%, rgba(19, 33, 58, .7) 88%, rgba(19, 33, 58, .9) 100%); }
  .hero__in { align-self: center; width: min(46%, 620px); padding: 64px 0 40px var(--pad); }
  .hero__h1 { font-size: clamp(3.1rem, 4.5vw, 4.4rem); margin-bottom: 22px; }
  .hero__lede { font-size: 18.5px; max-width: 24em; }
  .hero__acts { margin-top: 28px; gap: 8px 26px; }
  .hero__strip { padding: 22px var(--pad) 34px; border-top: 1px solid var(--line-dark); background: linear-gradient(to right, var(--deep) 0 30%, rgba(19, 33, 58, .55)); }
  .rating { font-size: 16px; }
  .rating__n { font-size: 22px; }
}

/* the opening: the photo drifts in, the three phrases come in from the left */
.hero-anim .hero__drift { animation: drift 2.8s var(--ease) both; }
.hero-anim .hero__h1 .ln > span { animation: slideL .62s var(--ease) both; }
.hero-anim .hero__h1 .ln:nth-child(1) > span { animation-delay: .12s; }
.hero-anim .hero__h1 .ln:nth-child(2) > span { animation-delay: .27s; }
.hero-anim .hero__h1 .ln:nth-child(3) > span { animation-delay: .42s; }
.hero-anim .hero__eyebrow { animation: slideL .5s var(--ease) both; }
.hero-anim .hero__eyebrow::before { animation: grow .7s var(--ease) .1s both; }
.hero-anim .hero__lede { animation: slideL .55s var(--ease) .55s both; }
.hero-anim .hero__acts { animation: slideL .55s var(--ease) .66s both; }
.hero-anim .rating { animation: slideL .55s var(--ease) .76s both; }
.hero-anim .chips li { animation: slideL .5s var(--ease) both; }
.hero-anim .chips li:nth-child(1) { animation-delay: .84s; }
.hero-anim .chips li:nth-child(2) { animation-delay: .9s; }
.hero-anim .chips li:nth-child(3) { animation-delay: .96s; }
.hero-anim .chips li:nth-child(4) { animation-delay: 1.02s; }
.hero-anim .chips li:nth-child(5) { animation-delay: 1.08s; }
@keyframes drift { from { transform: scale(1.0) translateX(-1.5%); } to { transform: scale(1.07) translateX(0); } }
@keyframes slideL { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mr .hero__media { transform: translate3d(0, calc(var(--hp, 0) * 70px), 0); }

/* ---------- 2. what: the vehicle chooser ---------- */
.what { padding: var(--sec) 0; }
.what__lede { color: var(--ink-soft); margin-top: 10px; }
.what__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.tab {
  position: relative; display: flex; align-items: center; min-height: 52px; padding: 0 14px; text-decoration: none;
  font: 700 17px/1 var(--f-display); color: var(--navy); background: var(--silver);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background-color .25s, color .25s;
}
.tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.tab:hover { background: #e3e8ef; }
.tab[aria-selected="true"] { background: var(--navy); color: #fff; }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--red); }
.what__panels { margin-top: 22px; }
.panel + .panel { margin-top: 36px; }
.panel__ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--silver);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.panel__ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--alloy img { object-position: 50% 66%; }
.ph--racks img { object-position: 50% 45%; }
.ph--haulage img { object-position: 50% 62%; }
.ph--case img { object-position: 50% 58%; }
.panel__fig { position: relative; }
.panel__fig .cap { position: absolute; left: 0; bottom: 0; max-width: calc(100% - 24px); margin: 0; padding: 7px 11px; background: rgba(11, 20, 34, .84); color: #fff; font-size: 12.5px; }
.panel__txt { margin-top: 16px; }
.panel__txt h3 { margin-bottom: 10px; }
.panel__txt p { color: var(--ink-soft); }
/* with the script: one panel at a time, all four kept in one cell so nothing jumps */
.js .what__panels { display: grid; }
.js .panel { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.js .panel.is-on { visibility: visible; }
.js .panel.is-on .panel__ph { animation: hub .8s var(--ease) both; }
.js .panel.is-on .panel__txt > * { animation: fromSide .55s var(--ease) both; }
.js .panel.is-on .panel__txt > :nth-child(2) { animation-delay: .06s; }
.js .panel.is-on .panel__txt > :nth-child(3) { animation-delay: .12s; }
.js .panel.is-on .panel__txt > :nth-child(4) { animation-delay: .18s; }
.js .panel.is-on .cap { animation: fromSide .45s var(--ease) .72s both; }   /* after the photo has settled on its hub */
@keyframes hub {   /* a wheel going onto its hub: a quarter turn that settles flat */
  0% { clip-path: circle(16% at 50% 50%); transform: rotate(-90deg) scale(.82); }
  55% { clip-path: circle(46% at 50% 50%); transform: rotate(-14deg) scale(.97); }
  100% { clip-path: circle(72% at 50% 50%); transform: none; }
}
@keyframes fromSide { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 36px)); } to { opacity: 1; transform: none; } }
@media (max-width: 699px) {   /* the four tabs on one row, a wide photo */
  .what__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .tab { flex: 1 1 auto; justify-content: center; min-height: 48px; padding: 0 9px; font-size: 15px; }
  .tab::after { left: 9px; right: 9px; bottom: 7px; }
  .what__panels { margin-top: 12px; }
  .panel__ph { aspect-ratio: 16 / 9; }
  .panel__txt { margin-top: 12px; }
  .go { margin-top: 10px; }
}
@media (min-width: 700px) {
  .what__tabs { grid-template-columns: repeat(4, 1fr); }
  .panel { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; }
  .panel__ph { aspect-ratio: 4 / 5; }
  .panel__txt { margin-top: 0; }
}
@media (min-width: 1100px) {
  .what__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: center; }
  .what__tabs { grid-template-columns: 1fr; gap: 0; margin-top: 36px; border-top: 1px solid var(--line); }
  .tab { min-height: 74px; font-size: 30px; background: transparent; clip-path: none; border-bottom: 1px solid var(--line); padding: 0 0 0 4px; transition: color .25s, padding .35s var(--ease); }
  .tab::after { left: 0; right: auto; width: 6px; top: 18px; bottom: 18px; height: auto; background: var(--red); transform: scaleY(0); transform-origin: center; }
  .tab:hover { background: transparent; color: var(--red); }
  .tab[aria-selected="true"] { background: transparent; color: var(--red); padding-left: 24px; }
  .tab[aria-selected="true"]::after { transform: scaleY(1); }
  .what__panels { margin-top: 0; }
  .panel { grid-template-columns: 1fr 1fr; gap: 48px; }
  .panel__txt h3 { font-size: 30px; margin-bottom: 16px; }
  .panel__txt p { font-size: 18px; }
}

/* ---------- 3. out: the mobile service ---------- */
.out { padding: var(--sec) 0; background: var(--silver); overflow: hidden; }
.out__head p { color: var(--ink-soft); }
.out__head h2 { margin-bottom: 12px; }
.out__ba { margin-top: 24px; }
.ba { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--line); touch-action: pan-y; user-select: none; -webkit-user-select: none;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.ba__after, .ba__before { position: absolute; inset: 0; }
.ba__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; pointer-events: none; -webkit-user-drag: none; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba__lab { position: absolute; top: 12px; padding: 6px 10px; font: 700 13px/1 var(--f-display); letter-spacing: .03em; background: rgba(11, 20, 34, .84); color: #fff; }
.ba__lab--before { left: 12px; }
.ba__lab--after { right: 12px; background: var(--yellow); color: var(--deep); }
.ba__hint { position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; background: rgba(11, 20, 34, .84); color: #fff; font: 600 13px/1 var(--f-display); white-space: nowrap; transition: opacity .4s; }
.ba.is-used .ba__hint { opacity: 0; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 0; z-index: 2; cursor: ew-resize; }
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 20, 34, .25); }
.ba__knob {   /* the handle is a tyre: tread round the edge, a red hub, the van's chevrons */
  position: absolute; top: 50%; left: 0; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: repeating-conic-gradient(#1b2b44 0 9deg, #3b5a85 9deg 18deg);
  box-shadow: 0 6px 18px rgba(11, 20, 34, .4);
  display: grid; place-items: center;
}
.ba__knob::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #c9d2de; box-shadow: inset 0 0 0 2px #fff; }
.ba__knob::after { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--red); }
.ba__knob i { position: relative; z-index: 1; width: 22px; height: 12px; background:
  linear-gradient(135deg, transparent 45%, #fff 45% 62%, transparent 62%) 0 0 / 50% 50% no-repeat,
  linear-gradient(45deg, transparent 38%, #fff 38% 55%, transparent 55%) 0 100% / 50% 50% no-repeat,
  linear-gradient(225deg, transparent 45%, #fff 45% 62%, transparent 62%) 100% 0 / 50% 50% no-repeat,
  linear-gradient(-45deg, transparent 38%, #fff 38% 55%, transparent 55%) 100% 100% / 50% 50% no-repeat; }
.ba__handle:focus-visible { outline: none; }
.ba__handle:focus-visible .ba__knob { box-shadow: 0 0 0 4px var(--yellow), 0 6px 18px rgba(11, 20, 34, .4); }
/* without the script the pair sits side by side, each whole */
html:not(.js) .ba { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: transparent; }
html:not(.js) .ba__after, html:not(.js) .ba__before { position: relative; aspect-ratio: 3 / 4; clip-path: none; }
html:not(.js) .ba__before { order: -1; }
html:not(.js) .ba__hint { display: none; }

.out__road { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.out__frame { aspect-ratio: 1 / 1; overflow: hidden; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.out__frame img { width: 100%; height: 100%; object-fit: cover; }
.out__ph--in .out__frame img { object-position: 50% 55%; }
.out__ph--field .out__frame img { object-position: 38% 62%; }
.mr .out__ph--field { transform: translate3d(calc(var(--drive, 0) * 78%), 0, 0); }
.mr .out__ph--in { transform: translate3d(calc(var(--drive, 0) * 22%), 0, 0); }
.out__ask { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--line); }
.out__ask p { font: 700 19px/1.3 var(--f-display); color: var(--navy); margin-bottom: 16px; }
@media (max-width: 699px) {
  .out__ba { margin-top: 20px; }
  .ba { aspect-ratio: 4 / 3; }
  .out__road { margin-top: 12px; }
  .out__frame { aspect-ratio: 4 / 3; }
  .out__ask { margin-top: 14px; padding-top: 0; border-top: 0; }
  .out__ask p { font-size: 18px; margin-bottom: 14px; }
}
@media (min-width: 700px) {
  .out__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; grid-template-areas: "head ba" "road ba" "ask ba"; align-items: start; }
  .out__head { grid-area: head; }
  .out__ba { grid-area: ba; margin-top: 0; }
  .ba { aspect-ratio: 4 / 5; }
  .out__road { grid-area: road; margin-top: 28px; }
  .out__ask { grid-area: ask; }
}
@media (min-width: 1100px) {
  .out__grid { grid-template-columns: 5fr 6fr; gap: 0 72px; }
  .out__head h2 { margin-bottom: 20px; }
  .out__head p { font-size: 18px; }
  .out__road { gap: 18px; margin-top: 40px; }
  .out__ask { margin-top: 36px; padding-top: 30px; }
  .out__ask p { font-size: 23px; }
}

/* ---------- 4. centre: the lights come on (signature) ---------- */
.centre { background: var(--night); color: #fff; }
.centre__stage { position: relative; }
.centre__room { position: relative; }
.room { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.room__img { width: 100%; height: 100%; object-fit: cover; }
.room__dark, .room__sign, .room__bloom { display: none; }
.room__cap { position: absolute; left: var(--pad); bottom: 14px; }
.centre__copy { padding: 26px var(--pad) 0; }
.centre__copy h2 { margin-bottom: 10px; }
.centre__addr { color: var(--on-dark-soft); }
.centre__walk { padding: 18px var(--pad) var(--sec); }
.centre__lede { color: var(--on-dark-soft); }
.rack { margin-top: 20px; }
.rack__track { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.frame__ph { aspect-ratio: 3 / 4; overflow: hidden; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.frame__ph img { width: 100%; height: 100%; object-fit: cover; }
.frame .cap { color: var(--on-dark-soft); }
.rack__bar { display: none; }
.centre__go { margin-top: 14px; }
@media (min-width: 700px) {
  .centre__stage { display: grid; grid-template-columns: 1fr 1fr; }
  .centre__room { grid-row: 1 / span 2; grid-column: 2; }
  .room { height: 100%; aspect-ratio: auto; min-height: 640px; }
  .centre__copy { grid-column: 1; padding: var(--sec) var(--pad) 0; }
  .centre__walk { grid-column: 1; }
  .rack__track { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .centre__copy h2 { font-size: clamp(2.6rem, 3.4vw, 3.4rem); margin-bottom: 14px; }
  .centre__addr, .centre__lede { font-size: 18px; }
  .rack__track { grid-template-columns: repeat(4, 1fr); }
}

/* pinned: the stage holds the screen while the thumb turns the lights on and walks the racks */
.motion.mr .centre__track { height: calc(100svh + 3000px); }
.motion.mr .centre__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: block; }
.motion.mr .centre__room { position: absolute; inset: 0; container-type: size; overflow: hidden; }
.motion.mr .room { position: absolute; top: 50%; left: 76%; height: max(100cqh, 133.4cqw); width: auto; min-height: 0; aspect-ratio: 3 / 4;
  transform: translate(-76%, -50%) scale(calc(1.06 - var(--lit, 0) * .06)); }
.motion.mr .room__dark, .motion.mr .room__sign, .motion.mr .room__bloom { display: block; }
/* the dark room is one even layer; the sign itself (the same photo, cut to the sign's own board) sits over it and
   flickers on, and its glow is a soft blur of the tubes' own red and yellow spilling onto the wall */
.room__dark { position: absolute; inset: 0; background: var(--night); opacity: calc(.94 * (1 - var(--lit, 0))); }
.room__sign { position: absolute; inset: 0; opacity: 0;
  background: var(--sign, none) center / 100% 100% no-repeat;   /* --sign: the room photo's own file (motion.js) */
  clip-path: polygon(57.6% 25.6%, 88% 32.4%, 83.6% 40%, 56% 31.8%); }
.room__bloom { position: absolute; left: 71.5%; top: 32.6%; width: 44%; aspect-ratio: 3 / 1; transform: translate(-50%, -50%) rotate(17deg);
  background: radial-gradient(ellipse 50% 46% at 52% 38%, rgba(255, 46, 74, .62), rgba(255, 46, 74, 0) 100%),
              radial-gradient(ellipse 30% 40% at 40% 70%, rgba(250, 189, 61, .55), rgba(250, 189, 61, 0) 100%);
  filter: blur(14px); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
/* the sign flickers on at a threshold; the room's lights follow the thumb (--lit), so any held position looks the same */
.sign-on .room__sign { opacity: 1; animation: neon .7s steps(1, end) both; }
.sign-on .room__bloom { opacity: calc(1 - var(--lit, 0) * .7); animation: neonBloom .7s steps(1, end) backwards; }
@keyframes neon { 0% { opacity: 0; } 12% { opacity: 1; } 22% { opacity: .15; } 30% { opacity: 1; } 44% { opacity: .4; } 52%, 100% { opacity: 1; } }
@keyframes neonBloom { 0% { opacity: 0; } 12% { opacity: 1; } 22% { opacity: .15; } 30% { opacity: 1; } 44% { opacity: .4; } 52%, 100% { opacity: 1; } }
.motion.mr .room__cap { top: 18px; bottom: auto; opacity: 0; transform: translateX(-12px); transition: opacity .3s, transform .4s var(--ease); }
.motion.mr .lights-on .room__cap { opacity: 1; transform: none; }   /* once the lights are up, whole (never half-faded over the room) */
.motion.mr .centre__copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px var(--pad) 34px;
  background: linear-gradient(to bottom, rgba(11, 20, 34, 0), rgba(11, 20, 34, .82) 34%, rgba(11, 20, 34, .94)); }
.motion.mr .centre__walk { position: absolute; left: 0; right: 0; bottom: 0; height: 57%; padding: 22px var(--pad) 20px; background: var(--night);
  display: flex; flex-direction: column; transform: translate3d(0, calc((1 - var(--b, 0)) * 101%), 0); }
.motion.mr .centre__walk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(to bottom, var(--yellow) 0 50%, var(--red) 50% 100%); }
.motion.mr .centre__lede { font-size: 15px; line-height: 1.45; }
.motion.mr .rack { position: relative; margin-top: 16px; overflow: hidden; flex: 1 1 auto; }
.motion.mr .rack__track { display: flex; gap: 14px; transform: translate3d(calc(var(--walk, 0) * -1 * (var(--fw) + 14px)), 0, 0); --fw: 164px; }
.motion.mr .frame { flex: 0 0 var(--fw); opacity: .4; transform: scale(.9); transform-origin: left bottom; transition: opacity .4s, transform .5s var(--ease); }
.motion.mr .frame.is-on { opacity: 1; transform: none; }
.motion.mr .frame .cap { opacity: 0; transition: opacity .35s; }
.motion.mr .frame.is-on .cap { opacity: 1; }
.motion.mr .rack__bar { display: block; position: relative; height: 4px; margin-top: 2px; background: var(--navy-l); }
.motion.mr .rack__pos { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: var(--yellow); transform: translate3d(calc(var(--walk, 0) * 100%), 0, 0); }
.motion.mr .centre__go { margin-top: 6px; }
@media (max-width: 699px) {   /* the phone's call bar sits over the stage's foot: everything held clears it */
  .motion.mr .room { transform: translate(var(--rx, 0px), var(--ry, 0px)) translate(-76%, -50%) scale(var(--rk, calc(1.06 - var(--lit, 0) * .06))); }
  .motion.mr .centre__copy { padding-bottom: 72px; }
  .motion.mr .centre__walk { height: 58%; padding: 18px var(--pad) 64px; }
  .motion.mr .centre__lede { font-size: 14.5px; line-height: 1.42; }
  .motion.mr .rack { container-type: size; margin-top: 14px; }
  .motion.mr .rack__track { --fw: clamp(150px, min(80cqw, (100cqh - 50px) * 1.333), 330px); }
  .motion.mr .frame__ph { aspect-ratio: 4 / 3; }
  .motion.mr .frame { transform: scale(.94); }
  .motion.mr .frame.is-on { transform: none; }
  .motion.mr .frame .cap { font-size: 13px; }
}
@media (min-width: 700px) {
  .motion.mr .centre__room { left: 50%; }
  .motion.mr .room { left: 70%; transform: translate(-70%, -50%) scale(calc(1.06 - var(--lit, 0) * .06)); }
  .motion.mr .centre__copy { right: 50%; top: 0; bottom: auto; padding: 64px var(--pad) 0; background: none; }
  .motion.mr .centre__walk { right: 50%; height: auto; top: 46%; padding: 0 var(--pad) 40px; transform: translate3d(0, calc((1 - var(--b, 0)) * 40px), 0); opacity: var(--b, 0); }
  .motion.mr .centre__walk::before { display: none; }
  .motion.mr .rack__track { --fw: 176px; }
}
@media (min-width: 1100px) {
  .motion.mr .centre__copy { padding-top: 12vh; }
  .motion.mr .centre__walk { top: 47%; }
  .motion.mr .rack__track { --fw: 196px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .motion.mr .centre__copy { padding-top: 56px; }
  .motion.mr .centre__copy h2 { font-size: 2.6rem; }
  .motion.mr .rack__track { --fw: 168px; }
}

/* ---------- 5. alignment ---------- */
.align { background: #fff; }
.align__copy { padding: var(--sec) var(--pad) 26px; }
.align__copy h2 { margin-bottom: 12px; }
.align__copy p { color: var(--ink-soft); }
.align__when { color: var(--ink) !important; font-weight: 600; padding-left: 14px; border-left: 3px solid var(--red); }
.align__copy .btn { margin-top: 18px; }
.align__bay { position: relative; overflow: hidden; padding: 28px var(--pad) 56px; background: var(--navy); }
.align__bg { position: absolute; inset: 0; }
.align__photo { position: absolute; inset: -12% 0; }
.align__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }
.align__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(19, 33, 58, .35), rgba(19, 33, 58, .55)); }
.align__bg .cap { position: absolute; left: var(--pad); bottom: 14px; z-index: 1; }
.mr .align__photo { transform: translate3d(0, calc((.5 - var(--ap, 0)) * 16%), 0) scale(1.04); }
.mr .dial { translate: 0 calc((.5 - var(--ap, 0)) * 44px); }   /* the card moves at its own pace over the bay */
.dial { position: relative; z-index: 1; margin-inline: auto; width: min(100%, 320px); padding: 16px 16px 14px; background: #fff;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: 0 20px 40px rgba(11, 20, 34, .35); }
.dial__svg { width: 100%; max-width: 220px; height: auto; margin-inline: auto; overflow: visible; }
.dial__ref { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .55; }
.dial__body { fill: var(--silver); stroke: var(--navy); stroke-width: 3; }
.dial__cabin { fill: none; stroke: var(--navy); stroke-width: 2; opacity: .5; }
.dial__axle { stroke: var(--navy); stroke-width: 2; opacity: .35; }
.dial__wheel, .fw__tyre { fill: var(--navy); }
.fw { transform-box: fill-box; transform-origin: center; }
.fw__case { stroke: var(--navy); stroke-width: 6; stroke-linecap: round; }
.fw__line { stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; transition: stroke .35s; }
/* still (no script, or reduced motion): both states drawn, the toed-out wheels as red ghosts */
.fw--ghost.fw--l { transform: rotate(-11deg); }
.fw--ghost.fw--r { transform: rotate(11deg); }
.fw--ghost .fw__tyre { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 4 3; }
.fw--ghost .fw__case { display: none; }
.fw--ghost .fw__line { stroke: var(--red); stroke-width: 2.5; }
.dial__tags { display: flex; justify-content: center; gap: 18px; margin-top: 10px; font: 700 15px/1.2 var(--f-display); color: var(--navy); }
.tag { display: inline-flex; align-items: center; gap: 8px; }
.tag::before { content: ""; width: 20px; height: 4px; background: var(--red); }
.tag--in::before { background: var(--yellow); box-shadow: 0 0 0 1.5px var(--navy); }
/* moving: one set of wheels, turned by the thumb */
.motion.mr .fw--ghost { display: none; }
.motion.mr .fw--live.fw--l { transform: rotate(calc(var(--toe, 11) * -1deg)); }
.motion.mr .fw--live.fw--r { transform: rotate(calc(var(--toe, 11) * 1deg)); }
.motion.mr .fw--live .fw__line { stroke: var(--red); }
.motion.mr .is-in-line .fw--live .fw__line { stroke: var(--yellow); }
.motion.mr .dial__tags { display: grid; justify-items: center; font-size: 18px; }
.motion.mr .tag { grid-area: 1 / 1; transition: opacity .3s, transform .35s var(--ease); }
.motion.mr .tag--in { opacity: 0; transform: translateY(8px); }
.motion.mr .is-in-line .tag--out { opacity: 0; transform: translateY(-8px); }
.motion.mr .is-in-line .tag--in { opacity: 1; transform: none; }
.motion.mr .align__track { height: calc(100svh + 1150px); }
.motion.mr .align__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.motion.mr .align__copy { flex: 0 0 auto; padding-top: 30px; padding-bottom: 18px; }
.motion.mr .align__copy p { font-size: 14.5px; line-height: 1.45; }
.motion.mr .align__copy p + p { margin-top: .5em; }
.motion.mr .align__copy .btn { margin-top: 12px; }
.motion.mr .align__bay { flex: 1 1 auto; display: grid; place-items: center; padding-top: 18px; padding-bottom: 48px; }
.motion.mr .dial { width: min(100%, 300px); padding-top: 12px; }
.motion.mr .dial__svg { max-width: min(200px, 26svh); }
@media (max-width: 1099px) { .motion.mr .align__bg .cap { top: 14px; bottom: auto; } }   /* clear of the call rail */
@media (max-width: 699px) {   /* the dial sizes to the room left between the caption and the rail */
  .motion.mr .align__bay { padding-top: 52px; padding-bottom: 80px; container-type: size; }
  .motion.mr .dial__svg { max-width: clamp(104px, (100cqh - 72px) * .8, 200px); }
}
@media (min-width: 700px) {
  .align__stage { display: grid; grid-template-columns: 1fr 1fr; }
  .align__copy { align-self: center; padding: var(--sec) var(--pad); }
  .align__bay { display: grid; place-items: center; min-height: 620px; }
  .motion.mr .align__stage { display: grid; }
  .motion.mr .align__copy { align-self: center; padding: 40px var(--pad); }
  .motion.mr .align__copy p { font-size: 16px; line-height: 1.5; }
  .motion.mr .dial { width: min(80%, 360px); }
  .motion.mr .dial__svg { max-width: min(250px, 40svh); }
}
@media (min-width: 1100px) {
  .align__copy { padding-left: max(var(--pad), calc((100vw - 1280px) / 2)); padding-right: 64px; }
  .motion.mr .align__copy { padding-left: max(var(--pad), calc((100vw - 1280px) / 2)); padding-right: 64px; }
  .align__copy h2 { margin-bottom: 18px; }
  .motion.mr .align__copy p { font-size: 17.5px; }
  .motion.mr .dial { width: 400px; padding: 26px 26px 20px; }
  .motion.mr .dial__svg { max-width: min(270px, 44svh); }
}

/* ---------- 6. visit: the road to the centre ---------- */
.visit { padding: var(--sec) 0; }
.visit__head { margin-bottom: 18px; }
.road { position: relative; }
.road::before {  /* the road line down the left edge */
  content: ""; position: absolute; left: 13px; top: 10px; bottom: 26px; width: 3px;
  background: repeating-linear-gradient(to bottom, var(--navy) 0 10px, transparent 10px 18px); opacity: .35;
}
.road__q { position: relative; padding-left: 44px; }
.road__q::before {   /* the stop on the road */
  content: ""; position: absolute; left: 6px; top: 15px; width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 3px var(--navy); transition: box-shadow .3s;
}
.road__q[open]::before { box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 9px var(--yellow); }
.road__q[open]::after {   /* the line drawn on to the next stop */
  content: ""; position: absolute; left: 13px; top: 36px; bottom: -14px; width: 3px; background: var(--red); transform-origin: top;
}
.road__q:last-child[open]::after { bottom: 8px; }
.road__q + .road__q { margin-top: 2px; }
.road__q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 0; }
.road__q summary::-webkit-details-marker { display: none; }
.road__q summary h3 { font-size: 18.5px; color: var(--navy); }
.road__q summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 6px; border-right: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red); transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--ease); }
.road__q[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.road__q summary:focus-visible { outline-offset: 2px; }
.road__a { padding: 2px 0 16px; color: var(--ink-soft); }
.road__addr { color: var(--ink); font-weight: 700; }
.motion .road__q[open]::after { animation: drawDown .65s var(--ease) both; }
.motion .road__q[open] .road__a { animation: typeOn .5s steps(18, end) both; }
@keyframes drawDown { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes typeOn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.visit__van { margin-top: 22px; }
.visit__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--silver);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.visit__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.mr .visit__img { width: 124%; max-width: none; left: -12%; transform: translate3d(calc(var(--van, 0) * 9%), 0, 0); }
.visit__addr { margin-top: 12px; font: 700 19px/1.3 var(--f-display); color: var(--navy); }
.visit__map { margin-top: 10px; }
.visit__van { position: relative; }
.visit__van .cap { position: absolute; left: 0; top: 0; z-index: 1; margin: 0; padding: 7px 11px; background: rgba(11, 20, 34, .84); color: #fff; font-size: 12.5px; }
@media (max-width: 699px) {
  .visit__head { margin-bottom: 10px; }
  .road__a { padding-bottom: 8px; }
  .visit__van { margin-top: 16px; }
  .visit__frame { aspect-ratio: 16 / 9; }
  .visit__addr { margin-top: 10px; font-size: 18px; }
  .visit__map { margin-top: 6px; }
}
@media (min-width: 700px) {
  .visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; grid-template-areas: "head head" "road van"; align-items: start; }
  .visit__head { grid-area: head; }
  .road { grid-area: road; }
  .visit__van { grid-area: van; margin-top: 4px; }
}
@media (min-width: 1100px) {
  .visit__grid { grid-template-columns: 6fr 5fr; gap: 0 80px; grid-template-areas: "head van" "road van"; }
  .visit__head { margin-bottom: 26px; }
  .road__q summary h3 { font-size: 22px; }
  .road__q summary { min-height: 60px; }
  .road__q::before { top: 21px; }
  .road__q[open]::after { top: 42px; }
  .road__a { font-size: 17.5px; }
  .visit__van { position: sticky; top: 24px; }
}

/* ---------- 7. ask: the smart form ---------- */
.ask { padding: var(--sec) 0; background: var(--navy); color: #fff; }
.ask__lede { color: var(--on-dark-soft); margin-top: 12px; }
.ask__ring { color: #fff; font-weight: 600; }
.ask__head .btn { margin-top: 16px; }
.ask__card { margin-top: 24px; background: #fff; color: var(--ink); padding: 20px 18px 18px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.steps { margin: 0; }
.steps__top { align-items: center; gap: 14px; margin-bottom: 14px; }
.steps__count { flex: 0 0 auto; font: 700 13px/1 var(--f-display); color: var(--ink-soft); letter-spacing: .02em; }
.tread { position: relative; flex: 1 1 auto; height: 10px; overflow: hidden; background: repeating-linear-gradient(-60deg, #e6eaf0 0 6px, #d5dbe3 6px 9px); }
.tread__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--prog, .25)); transition: transform .6s var(--ease);
  background: repeating-linear-gradient(-60deg, var(--red) 0 6px, var(--red-d) 6px 9px); }
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step + .step { margin-top: 22px; }
.step__q { padding: 0; margin-bottom: 12px; font: 800 21px/1.15 var(--f-display); color: var(--navy); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tiles--one { grid-template-columns: 1fr; }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile span {
  display: flex; align-items: center; min-height: 56px; padding: 10px 14px; line-height: 1.2;
  font: 700 16px/1.2 var(--f-display); color: var(--navy); background: var(--silver);
  box-shadow: inset 0 0 0 2px var(--line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: box-shadow .2s, background-color .2s, color .2s;
}
.tile span::after { content: ""; margin-left: auto; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); background: #fff; transition: box-shadow .2s; }
.tile:hover span { box-shadow: inset 0 0 0 2px var(--navy-l); }
.tile input:checked + span { background: var(--red-tint); color: var(--red-d); box-shadow: inset 0 0 0 2.5px var(--red); }
.tile input:checked + span::after { box-shadow: inset 0 0 0 5px var(--red); }
.tile input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--navy); }
.tile--wide { grid-column: 1 / -1; }
.field { display: block; margin-top: 12px; }
.field:first-of-type { margin-top: 0; }
.field__l { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.field input { width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 0; background: #fff; font: 500 17px/1.3 var(--f-text); color: var(--ink); }
.field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(39, 65, 99, .18); }
.step__note { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }
.step__err { margin-top: 10px; font-weight: 700; color: var(--red-d); }
.steps__send { margin-top: 16px; width: 100%; }
.steps__nav { justify-content: space-between; gap: 10px; margin-top: 16px; }
.steps__nav .btn { min-width: 112px; }
.steps__done { padding: 6px 2px; }
.steps__done p { font: 700 19px/1.35 var(--f-display); color: var(--navy); }
.steps__done p + p { font: 500 16px/1.5 var(--f-text); color: var(--ink-soft); margin-top: 10px; }
.steps__done a { color: var(--red-d); font-weight: 700; }
/* with the script: one question at a time, the deck keeps its height */
.js .steps__deck { display: grid; }
.js .step { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.js .step.is-on { visibility: visible; }
.js .step.is-on .step__q { animation: fromSide .4s var(--ease) both; }
.js .step.is-on .tile, .js .step.is-on .field, .js .step.is-on .step__note, .js .step.is-on .steps__send { animation: riseIn .45s var(--ease) both; }
.js .step.is-on .tile:nth-child(2), .js .step.is-on .field:nth-of-type(2) { animation-delay: .05s; }
.js .step.is-on .tile:nth-child(3) { animation-delay: .1s; }
.js .step.is-on .tile:nth-child(4) { animation-delay: .15s; }
.js .step.is-on .tile:nth-child(5) { animation-delay: .2s; }
.js .step[data-step="4"] .steps__send { display: none; }
.js .steps.at-last .steps__next { display: none; }
.js .steps.at-last .step[data-step="4"] .steps__send { display: inline-flex; }
.js .steps.at-first .steps__back { visibility: hidden; }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 699px) {
  .ask__card { margin-top: 16px; }
  .ask__head .btn { margin-top: 12px; }
  .tile span { min-height: 50px; }
}
@media (min-width: 700px) {
  .ask__card { padding: 28px 28px 24px; }
  .step__q { font-size: 24px; }
}
@media (min-width: 1100px) {
  .ask__grid { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: center; }
  .ask__card { margin-top: 0; padding: 36px 36px 30px; }
  .ask__lede, .ask__ring { font-size: 18px; }
  .tile span { min-height: 62px; font-size: 17px; }
}

/* ---------- footer, rail, consent ---------- */
.foot { position: relative; background: var(--silver); color: var(--ink); padding: 40px 0 28px; }
.foot::before {  /* the van's checker skirt */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: repeating-conic-gradient(var(--navy) 0 25%, #fff 0 50%) 0 0 / 20px 20px; opacity: .9;
}
.foot__in { width: min(100% - 2 * var(--pad), 1280px); margin-inline: auto; display: grid; gap: 16px; justify-items: start; }
.foot__brand { display: block; background: #fff; padding: 12px 16px; }
.foot__brand img { height: 48px; width: auto; }
.foot__addr { font-weight: 600; color: var(--navy); }
.foot__social { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.foot__social a, .foot__legal a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--red); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 14px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 8px; width: 100%; }
.foot__legal a { font-weight: 500; text-decoration-color: var(--line); }
@media (max-width: 1099px) {   /* the plate and the address side by side, the rest beneath */
  .foot { padding: 28px 0 12px; }
  .foot__in { grid-template-columns: auto 1fr; align-items: center; gap: 14px 16px; }
  .foot__brand { padding: 8px 10px; }
  .foot__brand img { height: 40px; }
  .foot__addr { font-size: 14px; line-height: 1.45; }
  .foot__call, .foot__social, .foot__legal { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .foot__in { grid-template-columns: auto 1fr auto; align-items: center; gap: 20px 40px; }
  .foot__addr { grid-column: 2; }
  .foot__call { grid-column: 3; grid-row: 1; }
  .foot__social { grid-column: 2 / -1; }
  .foot__legal { grid-column: 1 / -1; }
}

.rail {
  position: fixed; z-index: 30; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%);
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; text-decoration: none; white-space: nowrap;
  font: 700 16px/1 var(--f-display); color: #fff; background: var(--red);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .4s var(--ease);
}
.rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--yellow); }
.rail.show { transform: translate(-50%, 0); }
.rail:hover { background: var(--red-d); }
@media (max-width: 1099px) {
  .rail { left: 0; right: 0; bottom: 0; justify-content: center; min-height: 0; height: calc(52px + env(safe-area-inset-bottom)); padding: 0 20px env(safe-area-inset-bottom);
    clip-path: none; transform: translateY(105%); box-shadow: 0 -8px 24px rgba(11, 20, 34, .18); }
  .rail::after { top: 0; bottom: auto; height: 3px; }
  .rail.show { transform: none; }
  .rail.show.tuck { transform: translateY(105%); }
}
@media (min-width: 1100px) { .rail { left: auto; right: 28px; transform: translate(0, 140%); } .rail.show { transform: none; } }

.consent { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; max-width: 520px; padding: 16px 18px; background: #fff; color: var(--ink);
  border-top: 4px solid var(--navy); box-shadow: 0 16px 40px rgba(11, 20, 34, .3); font-size: 14px; }
.consent__actions { display: flex; gap: 10px; margin-top: 12px; }
.consent__actions button { flex: 1; min-height: 46px; border: 0; cursor: pointer; font: 700 15px/1 var(--f-display); background: var(--navy); color: #fff; }
.consent__actions button + button { background: var(--silver); color: var(--navy); }

/* the enquiry form's trap field: never seen (FORM_MARKUP.html) */
.md-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important;
         overflow: hidden !important; opacity: 0 !important; clip-path: inset(50%) !important;
         pointer-events: none !important; }

/* ---------- arrivals as the thumb reaches each section ---------- */
.mr [data-rv] { transition: opacity .5s var(--ease), transform .6s var(--ease), clip-path .8s var(--ease); }
.mr [data-rv="fade"]:not(.in) { opacity: 0; transform: translateX(-18px); }
.mr [data-rv="rise"]:not(.in) { clip-path: inset(0 0 100% 0); transform: translateY(.45em); }
.mr [data-rv="rise"].in { clip-path: inset(0 0 -10% 0); }
.mr [data-rv="wipe"]:not(.in) { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%, 0 100%, 0 0); }   /* six points, as the chamfer it opens to */
.mr [data-rv="wipe"].in { transition-duration: .3s, .3s, 1s; }
.mr [data-rv="list"] > * { transition: opacity .45s var(--ease), transform .5s var(--ease); }
.mr [data-rv="list"]:not(.in) > * { opacity: 0; transform: translateY(14px); }
.mr [data-rv="list"].in > :nth-child(2) { transition-delay: .06s; }
.mr [data-rv="list"].in > :nth-child(3) { transition-delay: .12s; }
.mr [data-rv="list"].in > :nth-child(4) { transition-delay: .18s; }
.mr [data-rv="road"] { transition: none; }
.mr [data-rv="road"]::before { transform-origin: top; transition: transform 1.1s var(--ease); }
.mr [data-rv="road"]:not(.in)::before { transform: scaleY(0); }
.mr [data-rv="road"] .road__q { transition: opacity .45s var(--ease), transform .5s var(--ease); }
.mr [data-rv="road"]:not(.in) .road__q { opacity: 0; transform: translateX(-16px); }
.mr [data-rv="road"].in .road__q:nth-child(2) { transition-delay: .1s; }
.mr [data-rv="road"].in .road__q:nth-child(3) { transition-delay: .2s; }
.mr [data-rv="road"].in .road__q:nth-child(4) { transition-delay: .3s; }
.mr .out__road .out__frame, .mr .visit__frame { transition: clip-path .9s var(--ease); }
.mr [data-rv="deal"] { transform-origin: 50% 100%; transition: opacity .5s var(--ease), transform .8s var(--ease); }
.mr [data-rv="deal"]:not(.in) { opacity: 0; transform: perspective(900px) rotateX(14deg) translateY(48px); }
.mr [data-rv="deal"]:not(.in) .step.is-on .tile, .mr [data-rv="deal"]:not(.in) .step.is-on .step__q { animation: none; opacity: 0; }
.mr [data-rv="deal"].in .step[data-step="1"].is-on .tile { animation-duration: .55s; }
.mr [data-rv="deal"]:not(.in) .tread__fill { transform: scaleX(0); }
.mr [data-rv="deal"] .tread__fill { transition-delay: .35s; }
/* depth: a layer that moves at its own speed against the one around it (motion.js sets --dy / --dpy from the scroll) */
.mr [data-depth] { translate: 0 calc(var(--dy, 0) * 1px); }
.mr [data-depth-img] img { scale: 1.14; translate: 0 calc(var(--dpy, 0) * -10%); }
.mr .out__road:not(.in) .out__frame { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%, 0 100%, 0 0); }
.mr .visit__van:not(.in) .visit__frame { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%, 0 100%, 0 0); }
.mr .visit__van .cap { transition: opacity .4s .5s; }
.mr .visit__van:not(.in) .cap { opacity: 0; }

/* ---------- legal pages share the sheet ---------- */
.legal-page { padding: 48px 0 64px; }
.legal-page .wrap { max-width: 760px; }
.legal-page h1 { font-size: 34px; margin-bottom: 20px; color: var(--navy); }
.legal-page h2 { font-size: 22px; margin: 30px 0 10px; color: var(--navy); }
.legal-page p, .legal-page li { color: var(--ink); }
.legal-page a { color: var(--red-d); font-weight: 600; }
.page-404 main section { padding: 64px 0; }
.page-404 h1 { font-size: 34px; margin-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.js .panel.is-on.still .panel__ph, .js .panel.is-on.still .panel__txt > *, .js .panel.is-on.still .cap { animation: none; }