/* =========================================================
   MOTORMOOLAH — HERO
   Sections: Reset/base · Typography · Header · Hero · Background ·
   Trustpilot · Headline · Valuation card · Registration input ·
   Mileage · CTA · Keychain · USP row · Responsive · Reduced motion
   ========================================================= */

/* ---------- Reset and base ---------- */
:root {
  --brand-blue: #2541BB;
  --brand-navy: #1E2B62;
  --brand-yellow: #FCCD0B;
  --brand-white: #FFFFFF;
  --deep: #0b1550;
  --ink: #101f70;
  --text-muted: #6f7ba8;
  --border-radius: 22px;
  --container-width: 1220px;
  --gutter: clamp(16px, 2.4vw, 24px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-weight: 400; background: var(--deep); color: #fff; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand-yellow); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 3px; }

/* ---------- Typography ---------- */
/* Poppins Bold: headings + buttons · Medium: labels · Regular: supporting */

/* ---------- Hero shell ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(100svh, 640px);
  display: flex; flex-direction: column;
  /* Layer 1: background gradient */
  background:
    radial-gradient(55% 60% at 50% 45%, rgba(18, 36, 150, .55) 0%, rgba(18, 36, 150, 0) 70%),
    radial-gradient(50% 60% at 82% 28%, #3150d6 0%, rgba(49, 80, 214, 0) 65%),
    radial-gradient(60% 70% at 0% 100%, var(--deep) 0%, rgba(11, 21, 80, 0) 60%),
    linear-gradient(170deg, var(--brand-blue) 0%, #1a2f9a 45%, var(--brand-navy) 100%);
}
.hero__inner {
  position: relative; z-index: 3; flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding-top: clamp(78px, 6.6vw, 112px);
  padding-bottom: clamp(20px, 2.4vw, 36px);
}

/* ---------- Background: cars + overlays ---------- */
.bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.js .bg { opacity: 0; transition: opacity 1s ease; }
.js.loaded .bg { opacity: 1; }
/* Motormoolah icon (white) as large, soft watermarks framing the hero */
.bg-mark { position: absolute; width: min(52vw, 860px); height: auto; opacity: .09; }
.bg-mark--l { left: -16vw; top: 18%; transform: rotate(-12deg); }
.bg-mark--r { right: -16vw; top: 30%; transform: rotate(12deg) scaleX(-1); }
.bg-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(48% 55% at 50% 52%, rgba(10, 20, 100, .78) 0%, rgba(10, 20, 100, 0) 100%),
    linear-gradient(180deg, rgba(14, 28, 120, .35) 0%, rgba(8, 16, 78, .55) 100%);
}
.bg-glow {
  position: absolute; width: 60vw; aspect-ratio: 1; left: -14vw; top: -20vw; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 80px rgba(255, 255, 255, .012);
}

/* ---------- Header ---------- */
.header { position: relative; z-index: 10; padding-top: clamp(14px, 1.6vw, 24px); position: absolute; inset: 0 0 auto 0; }
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; }
.brand { flex: none; display: block; }
.brand img { width: clamp(150px, 13.2vw, 220px); height: auto;  }
.nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 46px); }
.nav a { position: relative; font-weight: 400; font-size: clamp(13.5px, 1vw, 16px); padding: 8px 0; color: #fff; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--brand-yellow); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.header__actions { display: flex; align-items: center; gap: 12px; }
.icon-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); transition: background .25s, transform .25s var(--ease); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.btn-yellow { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 12px; background: var(--brand-yellow); color: var(--ink); font-weight: 600; font-size: clamp(14px, 1.05vw, 16.5px); white-space: nowrap; transition: transform .25s var(--ease), background .25s, box-shadow .25s; }
.btn-yellow svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn-yellow:hover { background: #ffd92e; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .25); }
.btn-yellow:hover svg { transform: translateX(3px); }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); place-content: center; gap: 5px; }
.menu-btn i { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { position: absolute; z-index: 9; inset: 0; padding: 100px 24px 32px; background: rgba(11, 21, 80, .97); display: flex; flex-direction: column; opacity: 0; transition: opacity .3s; }
.mobile-menu[hidden] { display: none; }
.mobile-menu.open { opacity: 1; }
.mobile-menu a { font-weight: 600; font-size: 26px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mobile-menu a:hover { color: var(--brand-yellow); }

/* ---------- Entrance animation (opacity + transform only) ---------- */
.js .anim { opacity: 0; transform: translateY(18px); }
.js.loaded .anim { opacity: 1; transform: none; transition: opacity .8s ease var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }

/* ---------- Trustpilot badge ---------- */
.trust { display: flex; justify-content: center; margin: clamp(12px, 1.2vw, 18px) auto 0; width: fit-content; max-width: 100%; color: var(--ink); align-items: center; gap: clamp(8px, .8vw, 12px); height: clamp(36px, 2.6vw, 44px); padding: 0 clamp(14px, 1.1vw, 18px); border-radius: 999px; font-size: clamp(12px, .95vw, 15.5px); font-weight: 500; white-space: nowrap;
  background: #f4f6fb; border: 1px solid #e1e6f2; align-items: center; gap: clamp(8px, .8vw, 12px); }
.trust b { font-weight: 600; }
.trust__score { font-weight: 600; }
.trust__count { padding-left: clamp(8px, .8vw, 12px); border-left: 1px solid #cfd6e8; }
.trust__logo { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.trust__logo svg { width: 1.2em; height: 1.2em; }
.stars { display: inline-flex; gap: 2px; }
.stars i { position: relative; width: clamp(16px, 1.2vw, 20px); aspect-ratio: 1; background: #00b67a; display: block; }
.stars i.half { background: linear-gradient(90deg, #00b67a 50%, #6f7ba8 50%); }
.stars i::after { content: ""; position: absolute; inset: 14%; background: #fff; clip-path: polygon(50% 0, 62% 36%, 100% 36%, 69% 58%, 80% 94%, 50% 72%, 20% 94%, 31% 58%, 0 36%, 38% 36%); }

/* ---------- Headline ---------- */
.headline { margin-top: clamp(10px, 1.1vw, 18px); text-align: center; font-weight: 600; font-size: clamp(2.35rem, 5.45vw, 6rem); line-height: .98; letter-spacing: -.035em; }
.headline .line { display: block; color: #fff; text-shadow: 0 6px 30px rgba(5, 12, 70, .35); }
.headline .line--y { color: var(--brand-yellow); }

/* ---------- Valuation card ---------- */
.card-wrap { position: relative; width: clamp(0px, 45.6vw, 762px); min-width: min(100%, 520px); margin-top: clamp(14px, 1.4vw, 22px); }
.card { background: #fff; color: var(--ink); border-radius: clamp(18px, 1.6vw, 26px); padding: clamp(18px, 2.6vw, 44px); box-shadow: 0 30px 70px rgba(4, 10, 70, .45), 0 6px 18px rgba(4, 10, 70, .2); }
.card__title { font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.75rem); letter-spacing: -.03em; line-height: 1.2; color: var(--ink); margin-bottom: clamp(12px, 1.2vw, 20px); }

/* ---------- Registration plate ---------- */
.plate { position: relative; display: flex; height: clamp(60px, 5.8vw, 98px); border: 3px solid var(--brand-navy); border-radius: clamp(10px, .9vw, 14px); overflow: hidden; background: #ffd400; box-shadow: 0 0 0 0 rgba(37, 65, 187, 0); transition: box-shadow .25s; }
.plate:focus-within { box-shadow: 0 0 0 4px rgba(37, 65, 187, .35); }
.plate__uk { flex: none; width: clamp(54px, 4.6vw, 78px); background: var(--brand-blue); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 700; font-size: clamp(11px, .9vw, 15px); }
.plate__uk svg { width: clamp(20px, 1.7vw, 28px); height: auto; }
.plate__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; padding: 0 clamp(14px, 1.6vw, 26px); font-weight: 600; font-size: clamp(1.7rem, 3.3vw, 3.4rem); letter-spacing: .06em; text-transform: uppercase; color: #111; caret-color: #111; }
.plate__ghost { position: absolute; left: clamp(54px, 4.6vw, 78px); top: 0; bottom: 0; padding-left: clamp(14px, 1.6vw, 26px); display: flex; align-items: center; pointer-events: none; font-weight: 600; font-size: clamp(1.7rem, 3.3vw, 3.4rem); letter-spacing: .06em; color: rgba(30, 43, 98, .38); white-space: pre; }
.plate__ghost::after { content: ""; width: 3px; height: .95em; margin-left: 4px; background: #111; animation: blink 1s steps(1) infinite; }
.plate__ghost.is-hidden { display: none; }
.plate.has-error { border-color: #c4162a; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Mileage ---------- */
.field { display: flex; align-items: center; gap: 14px; margin-top: clamp(10px, 1vw, 16px); height: clamp(50px, 4vw, 66px); padding: 0 clamp(16px, 1.6vw, 28px); border-radius: 14px; background: #f4f6fb; border: 1.5px solid #e1e6f2; color: var(--text-muted); transition: border-color .2s, box-shadow .2s, background .2s; }
.field svg { width: 22px; height: 22px; flex: none; }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-weight: 500; font-size: clamp(1rem, 1.3vw, 1.3rem); color: var(--ink); }
.field input::placeholder { color: var(--text-muted); opacity: 1; }
.field:focus-within { border-color: var(--brand-blue); background: #fff; box-shadow: 0 0 0 4px rgba(37, 65, 187, .15); }

.form-error { min-height: 0; margin-top: 0; font-size: .875rem; font-weight: 500; color: #c4162a; }
.form-error:not(:empty) { margin-top: 10px; }

/* ---------- CTA ---------- */
.cta { width: 100%; margin-top: clamp(10px, 1vw, 16px); height: clamp(54px, 4.4vw, 74px); padding: 0 clamp(8px, .6vw, 10px) 0 clamp(14px, 1.4vw, 24px); display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 14px; color: #fff; font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.75rem); letter-spacing: -.02em; background: linear-gradient(180deg, #1a2fa8, #0f1f80); box-shadow: 0 10px 22px rgba(15, 31, 128, .35); transition: transform .25s var(--ease), box-shadow .25s; }
.cta > span:first-child { flex: 1; text-align: center; padding-left: clamp(40px, 3.4vw, 58px); }
.cta__go { width: clamp(40px, 3.4vw, 58px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: var(--brand-yellow); color: var(--ink); }
.cta__go svg { width: 45%; transition: transform .25s var(--ease); }
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(15, 31, 128, .45); }
.cta:hover .cta__go svg { transform: translateX(4px); }
.cta:active { transform: translateY(0); }
.microcopy { margin-top: clamp(8px, .8vw, 12px); text-align: center; font-size: clamp(.8rem, 1vw, 1rem); color: var(--text-muted); }
.microcopy b { margin: 0 .35em; }

/* ---------- Keychain (layer 5) ---------- */
/* Ring is threaded through the punched hole: the hole centre (--hx, --hy from the card corner) lines up with the inside of the ring */
/* KEYCHAIN ANCHOR — tweak here.
   --hx/--hy : hole centre measured from the card's top-right corner (must match .punch left/top below)
   --ax/--ay : where the ring meets the hole INSIDE the PNG, as % of the image (the point that sits on the hole)
   PNG path   : the three <img src="assets/keychain-figma.webp"> tags in index.html */
.keys { --hx: 25px; --hy: 38px; --ax: 27.8%; --ay: 14.7%; position: absolute; z-index: 5; pointer-events: none; width: 49%; left: calc(100% - var(--hx)); top: var(--hy); translate: calc(var(--ax) * -1) calc(var(--ay) * -1); }
.keys__drop, .keys__swing { transform-origin: var(--ax) var(--ay); }
.keys__drop { rotate: -15deg; }
.card { position: relative; z-index: 2; }
/* metal eyelet set into the card corner; the keyring passes through it */
.punch { position: absolute; z-index: 4; left: calc(100% - 22px); top: 32px; width: clamp(18px, 1.5vw, 25px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: #1d43c3; border: 2px solid #fff;
  box-shadow: inset 0 2px 5px rgba(3, 8, 60, .55), 0 2px 6px rgba(4, 10, 70, .35), 0 0 0 1px rgba(150, 160, 190, .5); }
.keys__swing { position: relative; }
.keys img { position: relative; width: 100%; height: auto; /* directional shadow (light from top-left) + tight ambient occlusion */
  filter: drop-shadow(9px 14px 12px rgba(3, 8, 60, .38)) drop-shadow(1px 2px 2px rgba(0, 0, 0, .45)); }
/* soft contact shadow cast by the fob onto the white card */
.keys__swing::before { content: ""; position: absolute; left: 68%; top: 22%; width: 34%; height: 52%; border-radius: 40% 40% 50% 50%; transform: translate(12%, 6%) rotate(-12deg);
  background: radial-gradient(closest-side, rgba(15, 25, 90, .5), rgba(15, 25, 90, 0)); filter: blur(10px); }
.js .keys__drop { opacity: 0; transform: translateY(-18px) rotate(-4deg); }
.js.loaded .keys__drop { animation: keysDrop 1.5s var(--ease) 1s forwards; }
.js.loaded .keys__swing { animation: keysIdle 3s ease-in-out 2.6s infinite alternate; }
/* drop ~18px, swing once or twice, settle into a near-imperceptible idle; leans slightly forward (perspective) */
@keyframes keysDrop {
  0%   { opacity: 0; transform: translateY(-18px) rotate(-4deg); }
  25%  { opacity: 1; transform: translateY(5px) rotate(3deg); }
  50%  { transform: translateY(0) rotate(-2.2deg); }
  72%  { transform: rotate(1.2deg); }
  88%  { transform: rotate(-.5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes keysIdle { from { transform: perspective(900px) rotateY(-5deg) rotate(-3deg); } to { transform: perspective(900px) rotateY(-5deg) rotate(3deg); } }

/* ---------- USP row: its own card, endless auto-scroll ---------- */
.usps-wrap { width: 100%; margin-top: auto; padding-top: clamp(24px, 2.4vw, 40px); }
.usps-card { overflow: hidden; border-radius: clamp(16px, 1.5vw, 24px); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 14px 40px rgba(4, 10, 70, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.usps { display: flex; width: max-content; padding: clamp(16px, 1.5vw, 24px) 0; animation: uspScroll 28s linear infinite; }
.usps-card:hover .usps { animation-play-state: paused; }
.usps li { flex: none; display: flex; align-items: center; gap: clamp(10px, 1vw, 18px); padding: 0 clamp(28px, 4vw, 72px); }
.usps .ic { flex: none; width: clamp(44px, 3.6vw, 62px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .05); }
.usps .ic svg { width: 42%; overflow: visible; }
.usps .l, .usps .a { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.usps .l { stroke: #fff; }
.usps .a { stroke: var(--brand-yellow); }
.usps .tx { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.usps b { font-weight: 500; font-size: clamp(1.15rem, 1.6vw, 1.65rem); line-height: 1.15; letter-spacing: -.02em; }
.usps .tx span { font-weight: 400; font-size: clamp(.78rem, 1vw, 1.05rem); color: rgba(255, 255, 255, .85); }
@keyframes uspSlide {   /* 8 slides = 2 identical sets of 4; each step is 12.5% of the track */
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-12.5%); }
  50%, 70% { transform: translateX(-25%); }
  75%, 95% { transform: translateX(-37.5%); }
  100% { transform: translateX(-50%); }
}
@keyframes uspScroll { to { transform: translateX(-50%); } }   /* track holds two identical sets */

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 1023px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .card-wrap { width: min(560px, 100% - 140px); }
  .keys { width: 57%; }
  .headline { font-size: clamp(2.6rem, 8vw, 4.6rem); }
}

/* Mobile */
@media (max-width: 699px) {
  .header__bar { height: 56px; }
  .brand img { width: 150px; }
  .btn-yellow { display: none; }          /* no persistent "Value my car" on mobile */
  .icon-btn { width: 44px; height: 44px; }
  .menu-btn { width: 44px; height: 44px; }
  .hero__inner { padding-top: 84px; }
  .trust { height: 34px; gap: 7px; padding: 0 12px; font-size: 11.5px; }
  .trust__label { display: none; }
  .trust__count { border: 0; padding-left: 0; }
  .stars i { width: 15px; }
  .headline { font-size: clamp(2.2rem, 11.4vw, 3.4rem); margin-top: clamp(34px, 6svh, 56px); }
  /* card stretches to fill the screen; its contents are larger and spread evenly, so no dead space */
  .card-wrap { width: 100%; min-width: 0; margin-top: 20px; flex: 1; display: flex; flex-direction: column; }
  .card { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; padding: 24px 18px; }
  .card__title { font-size: 1.55rem; margin-bottom: 0; }
  .plate { height: 100px; }
  .plate__input, .plate__ghost { font-size: 2.7rem; }
  .form-error:empty { display: none; }
  .microcopy { font-size: .9rem; margin-top: 0; }
  .trust { margin-top: 0; height: 44px; font-size: 13px; }
  .trust .stars i { width: 17px; }
  .cta { height: 84px; font-size: 1.4rem; margin-top: 0; }
  .keys, .punch { display: none; }          /* no keychain or hole on phones */
  .bg-mark { width: 110vw; opacity: .08; }
  .bg-mark--l { left: -55vw; top: 30%; }
  .bg-mark--r { right: -55vw; top: 58%; }

  /* one USP at a time, centred in its card, sliding endlessly */
  .usps li:nth-child(1) { order: 2; } .usps li:nth-child(2) { order: 1; } .usps li:nth-child(3) { order: 3; } .usps li:nth-child(4) { order: 4; } .usps li:nth-child(5) { order: 6; } .usps li:nth-child(6) { order: 5; } .usps li:nth-child(7) { order: 7; } .usps li:nth-child(8) { order: 8; }   /* customers + faces slide first */
  .usps-card { container-type: inline-size; -webkit-mask-image: none; mask-image: none; }
  .usps { animation: uspSlide 14s ease-in-out infinite; }
  .usps li { width: 100cqw; justify-content: center; padding: 0 16px; }
  .usps .ic { width: 48px; }
  .usps b { font-size: 1.35rem; }
  .usps .tx span { font-size: .95rem; }
}
@media (max-width: 359px) {
  .headline { font-size: 2rem; }
  .brand img { width: 130px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .usps-card { overflow-x: auto; }
  .js .anim, .js .bg, .js .keys__drop { opacity: 1; transform: none; }
  .plate__ghost::after { animation: none; }
}

/* ---------- Keychain ring passes through the eyelet (front/back split) ---------- */
.keys--back { z-index: 3; }   /* above the card, but clipped so it only shows INSIDE the hole */
.keys--back img { filter: none; -webkit-clip-path: circle(4.6% at var(--ax) var(--ay)); clip-path: circle(4.6% at var(--ax) var(--ay)); }
.keys--back .keys__swing::before { display: none; }
.keys--front img { -webkit-clip-path: polygon(0 12%, calc(var(--ax) + .5%) 12%, calc(var(--ax) + .5%) 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 12%, calc(var(--ax) + .5%) 12%, calc(var(--ax) + .5%) 0, 100% 0, 100% 100%, 0 100%); }

/* ---------- USPs: static four-up row on tablet/desktop (marquee/slider is mobile only) ---------- */
@media (min-width: 700px) {
  .usps-card { -webkit-mask-image: none; mask-image: none; }
  .usps { width: 100%; animation: none; justify-content: space-around; }
  .usps li { padding: 0 clamp(10px, 1.5vw, 28px); }
  .usps li[aria-hidden="true"] { display: none; }   /* JS-made duplicates only exist for the loop */
}
@media (min-width: 700px) and (max-width: 1023px) {
  .usps { flex-wrap: wrap; row-gap: 18px; }
  .usps li { flex: 0 0 50%; justify-content: center; }
  .usps li[aria-hidden="true"] { display: none; }
}

/* Shadow the keys cast on the white card: clipped to the card, follows the swing, falls down-left */
.keys-shadow { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: clamp(18px, 1.6vw, 26px); }
.keys--shade .keys__swing::before { display: none; }
.keys--shade img { filter: brightness(0) blur(7px); opacity: .3; transform: translate(-16px, 12px); -webkit-clip-path: none; clip-path: none; }
.punch { box-shadow: inset 0 2px 5px rgba(3, 8, 60, .6), 0 3px 10px rgba(4, 10, 70, .45), 0 0 0 1px rgba(150, 160, 190, .5); }

/* small dark contact shadow where the ring meets the hole (on the card only, via the clipped shade layer) */
.keys--shade .keys__swing::after { content: ""; position: absolute; left: var(--ax); top: var(--ay); width: 14%; aspect-ratio: 1; translate: -40% -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 18, 80, .45), transparent); filter: blur(3px); }

/* ---------- Ring threaded through the card hole ----------
   Hole = real cutout on the card (.punch). Back copy of the keys sits above the card but is clipped to the hole,
   so the ring is seen inside it; the front copy has the ring's left end removed so the ring seems to run behind the card. */
.punch { display: block; left: calc(100% - 25px); top: 38px; width: clamp(18px, 1.5vw, 25px); border: 0; background: #2a4fd0;
  box-shadow: inset 0 2px 5px rgba(3, 8, 70, .65), 0 0 0 1px rgba(20, 30, 110, .18); }
.keys--back { z-index: 3; }
.keys--back img { filter: none; -webkit-clip-path: circle(3.4% at var(--ax) var(--ay)); clip-path: circle(3.4% at var(--ax) var(--ay)); }
.keys--back .keys__swing::before { display: none; }
/* Front copy: the ring is cut away only inside the hole's circle (mask), so it seems to enter the hole itself.
   Circle centre/radius are in the PNG's own pixels (422x558): cx=145 cy=82 r=17 — edit with --ax/--ay if the PNG changes. */
.keys--front img { -webkit-clip-path: none; clip-path: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 422 558'%3E%3Cpath fill-rule='evenodd' d='M0 0H422V558H0Z M128 82a17 17 0 1 0 34 0a17 17 0 1 0-34 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 422 558'%3E%3Cpath fill-rule='evenodd' d='M0 0H422V558H0Z M128 82a17 17 0 1 0 34 0a17 17 0 1 0-34 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* Keychain shadows removed */
.keys-shadow { display: none; }
.keys img { filter: none; }
.keys__swing::before, .keys__swing::after { display: none; }

/* Hole comes only from the keychain PNG (its blue dot): no CSS hole, no back layer, no mask */
.punch { display: none; }
.keys--front img { -webkit-mask: none; mask: none; -webkit-clip-path: none; clip-path: none; }

/* ---------- Match the live site: navbar fonts/sizes + registration-plate font ---------- */
@font-face { font-family: "Charles Wright"; src: url(assets/fonts/CharlesWright-Bold.otf) format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

/* UK plate lettering (typed text + animated "ENTER REG") */
.plate__input, .plate__ghost { font-family: "Charles Wright", var(--font); font-weight: 700; letter-spacing: .06em; font-size: clamp(30px, 2.8vw, 46px); padding-top: .08em; }
.plate__uk { font: 700 13px/1 var(--font); }

/* Desktop navbar — same type and sizes as the live site */
@media (min-width: 1024px) {
  .brand img { width: 168px; }
  .header__bar { height: 64px; }
  .nav { gap: 2px; }
  .nav a { font: 500 14.5px "Inter", "Helvetica Neue", Arial, sans-serif; padding: 10px 16px; }
  .nav a::after { left: 16px; right: 16px; bottom: 5px; }
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .btn-yellow { height: 46px; padding: 0 16px 0 18px; border-radius: 12px; font: 600 14.5px var(--font); letter-spacing: -.01em; }
  .btn-yellow svg { width: 15px; height: 15px; }
}
@media (max-width: 699px) { .plate__input, .plate__ghost { font-size: 34px; } }

/* ---------- Logo: inline vector animated part by part on hover (from the live site) ---------- */
.brand .lg { width: clamp(150px, 13.2vw, 220px); height: auto; display: block; overflow: visible; }
@media (min-width: 1024px) { .brand .lg { width: 168px; } }
.lg path { transform-box: fill-box; transform-origin: center; }
.lg .lg-car, .lg .lg-wheel, .lg .lg-bar, .lg .lg-l { will-change: transform; }
.brand:hover .lg .lg-car, .brand:focus-visible .lg .lg-car { animation: lgDrive .7s cubic-bezier(.3, 1.4, .5, 1); }
.brand:hover .lg .lg-wheel, .brand:focus-visible .lg .lg-wheel { animation: lgWheel .7s cubic-bezier(.3, 1.4, .5, 1); }
.brand:hover .lg .lg-bar, .brand:focus-visible .lg .lg-bar { animation: lgBar .55s cubic-bezier(.2, .9, .3, 1); }
.brand:hover .lg .lg-l, .brand:focus-visible .lg .lg-l { animation: lgHop .42s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 24ms) both; }
@keyframes lgDrive { 0% { transform: none; } 45% { transform: translateX(9%); } 100% { transform: none; } }
@keyframes lgWheel { 0% { transform: none; } 45% { transform: translateX(28%) rotate(300deg); } 100% { transform: rotate(360deg); } }
@keyframes lgBar { 0% { transform: scaleX(1); } 30% { transform: translateX(-14%) scaleX(.7); } 100% { transform: none; } }
@keyframes lgHop { 0%, 100% { transform: none; } 45% { transform: translateY(-14%); } }
@media (prefers-reduced-motion: reduce) { .brand .lg * { animation: none !important; } }

/* ---------- Nav look (matches live site) + centred card title ---------- */
.card__title { text-align: center; }
.header .container { max-width: 1390px; }
.nav a { color: rgba(255, 255, 255, .78); transition: color .2s ease; }
.nav a:hover, .nav a:focus-visible { color: #fff; }
.icon-btn { border: 1px solid rgba(255, 255, 255, .16); background: transparent; }
.icon-btn:hover { background: rgba(255, 255, 255, .1); }
.btn-yellow { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); }
.btn-yellow:hover { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08), 0 10px 22px rgba(0, 0, 0, .25); }

/* Centre the registration text (typed text and the animated ENTER REG) */
.plate__input { text-align: center; }
.plate__ghost { right: 0; justify-content: center; padding-left: 0; }
/* the blinking caret must not count toward centring, so the letters themselves sit in the middle of the yellow */
.plate__ghost::after { margin-right: -7px; }
.plate__ghost { padding-left: .06em; }   /* cancel the trailing letter-spacing so glyphs are optically centred */
/* nudge the registration text a little left (placeholder and typed text together) */
.plate__ghost { padding-right: 16px; }
.plate__input { padding-left: 0; padding-right: 16px; }

/* USP row on tablet/desktop: items may shrink and wrap their label, so nothing is ever cut off */
@media (min-width: 700px) {
  .usps { gap: 0; padding-inline: clamp(6px, 1vw, 18px); }
  .usps li { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 clamp(6px, .8vw, 16px); }
  .usps .tx { white-space: normal; min-width: 0; }
  .usps .ic { flex: none; }
}

/* scroll-driven sway (set from script.js); pivots on the hole like the idle swing */
.keys { rotate: var(--sway, 0deg); transform-origin: var(--ax) var(--ay); }

/* Headline variants: laptop/desktop breaks as "Get your motor's / worth in Moolah!" with "motor's" and "in Moolah!" in yellow */
.h-desk { display: none; }
@media (min-width: 1024px) {
  .h-mob { display: none; }
  .h-desk { display: inline; }
  .headline .line--y { color: #fff; }
  .headline .hl { color: var(--brand-yellow); }
}

/* form + keychain moved down a little (desktop/tablet; they share .card-wrap) */
@media (min-width: 700px) { .card-wrap { margin-top: calc(clamp(14px, 1.4vw, 22px) + 10px); } }

/* "in" stays white everywhere; only "Moolah!" is yellow */
.headline .line--y { color: #fff; }
.headline .hl { color: var(--brand-yellow); }

/* card title: two lines on phones; Trustpilot badge: two centred lines with the logo */
.trust__br { display: none; }
@media (max-width: 699px) {
  .mline { display: block; }
  .trust { flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 6px; height: auto; padding: 10px 16px; border-radius: 18px; text-align: center; font-size: 13px; }
  .trust__label { display: inline; }
  .trust__br { display: block; flex-basis: 100%; height: 0; }
  .trust__count { border: 0; padding-left: 0; }
  .trust__logo { display: inline-flex; font-size: 14px; }
  .trust__logo svg { width: 1.35em; height: 1.35em; }
  .trust::after { content: none; }
}

/* CTA label on one line on phones */
@media (max-width: 699px) {
  .cta > span:first-child { padding-left: 0; white-space: nowrap; }
  .cta { font-size: clamp(1rem, 4.8vw, 1.3rem); }
}

/* Trustpilot: one inline pill on desktop; on phones two stacked navy bars (rating row, reviews row) */
.trust__row { display: contents; }
@media (max-width: 699px) {
  .trust { display: grid; gap: 6px; width: 100%; height: auto; padding: 0; background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .trust__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; border-radius: 14px; background: #1c2f8f; color: #fff; font-size: 13px; }
  .trust__label { display: inline; }
  .trust__count { border: 0; padding: 0; font-size: 13.5px; }
  .trust__score { font-weight: 600; }
  .trust__logo { font-size: 16px; font-weight: 700; gap: 6px; }
  .trust__logo svg { width: 1.4em; height: 1.4em; }
  .trust .stars i { width: 20px; }
}

/* Real Trustpilot logo; phones keep the original light pill (two centred lines inside it) */
.trust__logo img { height: 1.3em; width: auto; display: block; }
.trust__logo { font-size: 15px; }
@media (max-width: 699px) {
  .trust { display: flex; flex-direction: column; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin-inline: auto; padding: 10px 16px; background: #f4f6fb; border: 1px solid #e1e6f2; border-radius: 18px; }
  .trust__row { background: none; padding: 0; border-radius: 0; color: var(--ink); justify-content: center; gap: 10px; }
  .trust__logo { font-size: 15px; }
  .trust__logo img { height: 20px; }
}

/* Headline on every screen size: "Get your motor's" / "worth in Moolah!" (two lines) */
.h-mob { display: none; }
.h-desk { display: inline; }
@media (max-width: 699px) { .headline { font-size: clamp(1.9rem, 9.2vw, 3rem); } }

/* Phones: three lines "Get your / motor's worth / in Moolah!"; larger screens: two lines */
@media (max-width: 699px) {
  .h-mob { display: inline; }
  .h-desk { display: none; }
  .headline { font-size: clamp(2rem, 10.8vw, 3.3rem); }
}

/* ---------- Heading shine: a soft highlight sweeps across the heading text every few seconds ----------
   Each heading sets --base (its normal colour) and --shine (the highlight colour). */
.headline .line, .headline .hl, .card__title {
  --base: #fff; --shine: #bccbff;
  background-image: linear-gradient(105deg, transparent 38%, var(--shine) 50%, transparent 62%), linear-gradient(var(--base), var(--base));
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  animation: headShine 6s ease-in-out 2s infinite;
}
.headline .hl { --base: var(--brand-yellow); --shine: #fff6bf; }
.card__title { --base: var(--ink); --shine: #7d94ff; }
.headline .line--y { --base: #fff; }
.headline .line:nth-child(2) { animation-delay: 2.3s; }
@keyframes headShine { 0% { background-position: 160% 0, 0 0; } 35%, 100% { background-position: -60% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .headline .line, .headline .hl, .card__title { animation: none; }
}

/* Phones: no extra white space above/below the card content; spare height goes between the items instead */
@media (max-width: 699px) {
  .card { justify-content: space-between; padding-top: 18px; padding-bottom: 16px; }
}

/* Laptop/desktop: spread headline, form and USP card evenly through the hero height, so a shorter laptop screen
   looks like the desktop one (no big gap between the form and the USP card) */
@media (min-width: 700px) {
  .hero__inner { justify-content: space-evenly; padding-top: clamp(78px, 7vw, 112px); }
  .usps-wrap { margin-top: 0; padding-top: 0; }
  .headline { margin-top: 0; }
  .card-wrap { margin-top: 0; }
}

/* Phones: compact form with even, small gaps; spare screen height is shared between headline, form and USP card */
@media (max-width: 699px) {
  .hero__inner { justify-content: space-evenly; }
  .card-wrap { flex: none; margin-top: 0; }
  .card { flex: none; justify-content: flex-start; gap: 14px; padding: 18px 16px 16px; }
  .card__title { font-size: 1.25rem; }
  .plate { height: 78px; }
  .plate__input, .plate__ghost { font-size: 32px; }
  .cta { height: 64px; margin-top: 0; }
  .microcopy { margin-top: -4px; }
  .trust { margin-top: 0; }
  .usps-wrap { margin-top: 0; padding-top: 0; }
}

/* Phones: slightly larger headline */
@media (max-width: 699px) { .headline { font-size: clamp(2.1rem, 12vw, 3.6rem); } }
@media (max-width: 699px) { .headline { font-size: clamp(2.2rem, 13.2vw, 3.9rem); } }

/* Phones: Trustpilot pill as wide as the CTA button */
@media (max-width: 699px) { .trust { width: 100%; max-width: none; } }

/* Card title: plain text again (shine stays on the main headline only) */
.card__title { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--ink); animation: none; }

/* Trustpilot pill: full CTA width and the same corner radius as the CTA */
.trust { width: 100%; max-width: none; border-radius: 14px; }

/* Laptop/desktop: registration text exactly centred in the yellow area */
@media (min-width: 700px) {
  .plate__ghost { padding-right: 0; }
  .plate__input { padding-right: 0; }
}

/* Trustpilot logo: its wordmark sits low inside the SVG; lift it so it lines up with the text beside it */
.trust__logo img { transform: translateY(-1.5px); }
@media (max-width: 699px) { .trust__logo img { transform: translateY(-2px); } }
.trust__logo img { transform: translateY(-4px); }
@media (max-width: 699px) { .trust__logo img { transform: translateY(-4px); } }

/* Placeholder: the full word "ENTER REG" is laid out invisibly and centred; the typed letters sit at its left edge,
   so the word stays put while it types out (instead of re-centring letter by letter) */
.plate__ghost::after { content: none; }
.g-wrap { position: relative; display: inline-block; white-space: pre; }
.g-size { visibility: hidden; }
.g-type { position: absolute; left: 0; top: 0; white-space: pre; }
.g-type::after { content: ""; display: inline-block; width: 3px; height: .95em; margin-left: 4px; vertical-align: -.1em; background: #111; animation: blink 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .g-type::after { animation: none; } }

/* Fine-tune: --reg-nudge shifts the registration text sideways (positive = right). Placeholder and typed text use the same value. */
.plate { --reg-nudge: 2px; }
.g-wrap { translate: var(--reg-nudge) 0; }
.plate__input { padding-left: calc(var(--reg-nudge) * 2); }

/* Trustpilot: official star icon (icon-only) + the word as text, centred on the same line as the rest */
.trust__logo { display: inline-flex; align-items: center; gap: 5px; line-height: 1; font-weight: 600; color: var(--ink); }
.trust__logo img { height: 1.2em; width: auto; transform: none; }
.trust__logo b { font-weight: 600; line-height: 1; }
@media (max-width: 699px) { .trust__logo img { height: 1.2em; transform: none; } }
/* optical alignment: the star + word sit ~1.5px low next to the other items (Poppins glyphs sit below the box centre) */
.trust__logo { translate: 0 -1.5px; }

/* "Trustpilot" word: same size and line box as "1,500+ reviews", so both sit on one baseline */
.trust__logo, .trust__logo b { font-size: 1em; line-height: inherit; translate: none; }
.trust__logo { font-size: inherit; }
.trust__logo img { height: 1.25em; }

/* Registration text: from your latest screenshot it sat ~5px right of centre, so nudge it back left */
.plate { --reg-nudge: -3px; }
.plate__input { padding-left: 0; text-indent: calc(var(--reg-nudge) * 2); }
.plate { --reg-nudge: -6px; }

/* Big screens: guaranteed breathing room. On shorter laptop windows the "space-evenly" gaps used to shrink to nothing,
   so the headline sat right on the white card. These minimum gaps keep it airy; extra height is still shared evenly. */
@media (min-width: 700px) {
  .hero__inner { gap: clamp(32px, 5vh, 64px); padding-bottom: clamp(32px, 5vh, 56px); }
}
@media (min-width: 700px) { .hero__inner { padding-top: clamp(104px, 9vw, 136px); } }

/* ---------- Keychain motion (same behaviour as the reference site, using the supplied image) ----------
   1) drops in on load and settles on the rest pose   2) otherwise stays still
   3) hover (mouse) or tap (touch): one slow, small shuffle that starts and ends on the rest pose */
.js.loaded .keys__swing { animation: none; }
.keys__swing { pointer-events: auto; cursor: default; }
.js.loaded .keys__swing.is-shuffling { animation: keysShuffle 2.6s cubic-bezier(.45, .05, .35, 1) 1; }
@keyframes keysShuffle {
  0%   { transform: none; }
  16%  { transform: translate(-2px, 1px) rotate(-4deg); }
  38%  { transform: translate(2px, 0) rotate(3.2deg); }
  58%  { transform: translate(-1px, 1px) rotate(-2deg); }
  78%  { transform: rotate(1deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .js.loaded .keys__swing.is-shuffling { animation: none; } }

/* ---------- Keychain: frame-by-frame sequence (smoothed with in-between frames) ----------
   The frames include the card's corner hole, so the card's top-right corner is lined up with the frame:
   the frame is scaled so its card-corner radius equals the card's radius (card radius = 3.41% of its width). */
.card-wrap { container-type: inline-size; }
@media (min-width: 700px) { .card { border-radius: 3.41cqw; } }
.keys { --ax: 25.7%; --ay: 12.1%; left: 100%; top: 0; width: 51.3%; translate: -32.4% -0.52%; }
.keys__drop { rotate: 0deg; }
.js .keys__drop { opacity: 0; transform: none; }
.js.loaded .keys__drop { animation: kcFade .7s ease .5s forwards; }
@keyframes kcFade { to { opacity: 1; } }
.keys__swing { position: relative; pointer-events: none; }
.js.loaded .keys__swing { animation: none; }
.kc-rest { display: block; width: 100%; height: auto; }
.kc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: auto; }
.keys.is-ready .kc-canvas { display: block; }
.keys.is-ready .kc-rest { visibility: hidden; }
.keys.is-hot .kc-canvas { cursor: pointer; }
@media (min-width: 700px) and (max-width: 1023px) { .keys { width: 51.3%; } }
@media (prefers-reduced-motion: reduce) { .js .keys__drop { opacity: 1; animation: none; } }
/* Keychain placement: only the hole matters (the frame's own card tab is removed), so pin the hole 30px in from the card's right edge and 44px down,
   and size the frame so the taxi doesn't cover the form (hole sits at 25.7% / 12.06% of the frame). */
.keys { left: calc(100% - 30px); top: 44px; width: 42.6%; translate: -25.7% -12.06%; }
@media (min-width: 700px) and (max-width: 1023px) { .keys { width: 42.6%; } }
.keys { width: 37.9%; }
@media (min-width: 700px) and (max-width: 1023px) { .keys { width: 37.9%; } }

/* the keychain keeps swinging on its own; it no longer needs the pointer, so clicks pass through to the form beneath it */
.kc-canvas { pointer-events: none; }

/* Exact alignment for the updated 12 frames (crop 1201x1153): the card's right edge is 387px from the frame's left edge, the card top 6px down,
   and the hole centre at (306,139). One frame pixel = 37.9cqw / 1201 = 0.031557cqw, so the ring emerges from behind the real card edge. */
.keys { --ax: 25.48%; --ay: 12.06%; left: calc(100% - 12.213cqw); top: -0.189cqw; width: 37.9cqw; translate: none; }
@media (min-width: 700px) and (max-width: 1023px) { .keys { width: 37.9cqw; } }