/* ==========================================================================
   Vantera — stylesheet
   --------------------------------------------------------------------------
   Order of this file:
     1. Design tokens
     2. Reset and base elements
     3. Layout utilities
     4. Motion (scroll reveals, hover zooms, dropdown openings)
     5. Components (button, brand, nav, pickers, cards, carousel)
     6. Header
     7. Page sections, top to bottom
     8. Footer
     9. Responsive
    10. Reduced motion

   Naming follows BEM: .block, .block__element, .block--variant.
   Change a colour or a size once in section 1 and the whole page follows.

   Three rules worth knowing before editing:
   - Every animated "hidden" state is written under `html.js`. If the scripts
     never run, nothing is hidden. See section 4.
   - Sizes live in tokens, redefined at each breakpoint in section 9. A heading
     therefore never carries its own media query.
   - The accent exists in three shades and they are not interchangeable:
     --accent fills a surface, --accent-deep writes on a light one, and
     --accent-bright writes on a photograph. Section 1 says why.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* --- Palette. These nine lines are the whole colour scheme. ---
     The source template signed itself with a green; this one is turned to
     teal at the same saturation and lightness, so every contrast ratio of the
     original layout is preserved while the signature changes. */
  --accent: #31b5a3; /* fills: buttons, badges, stars, the small arrows */
  --accent-deep: #1f7a6e; /* the same teal, darker: text on white or cloud,
                             and the hover of a filled button.
                             4.78:1 on --cloud, 5.16:1 on white */
  --accent-bright: #62daca; /* the same teal, lit up: text over a photograph
                               and over --ink. 10.78:1 on --ink */
  --accent-soft: #a8e6de; /* pale teal for a tinted surface */

  --ink: #0e1523; /* dark panels, footer, page text */
  --ink-soft: #a2a7ba; /* secondary text on a dark panel */
  --cloud: #f6f6f6; /* the light grey sections */
  --line: #d6d6d6; /* hairlines and links on a dark panel */
  --white: #ffffff;

  /* Derived tints. Declared here, resolved here: a custom property is
     substituted where it is declared, not where it is used. */
  --ink-10: rgba(0, 0, 0, 0.1);
  --on-dark-line: rgba(255, 255, 255, 0.16);

  /* --- Typography --- */
  --font-display: "Syne", "Trebuchet MS", sans-serif; /* headings, eyebrows */
  --font-body: "Space Grotesk", system-ui, -apple-system, sans-serif;

  /* Type scale, measured on the reference. Redefined in section 9. */
  --h1-size: 60px;
  --h1-line: 72px;
  --h2-size: 28px;
  --h2-line: 36.4px;
  --h3-size: 20px; /* step titles, post titles */
  --h3-line: 26px;
  --h4-size: 18px; /* car names, showroom names */
  --h4-line: 23.4px;
  --metric-size: 40px;
  --metric-line: 48px;
  --price-size: 20px;
  --text-size: 18px;
  --text-line: 27px;
  --small-size: 16px;
  --small-line: 24px;
  --micro-size: 14px;
  --micro-line: 21px;

  /* --- Spacing. The same ladder as the reference. --- */
  --shell-max: 1250px;
  --shell-pad: 20px;
  --section-pad: 100px;
  --head-gap: 40px; /* between a section heading and its content */
  --grid-gap: 24px;
  --grid-row-gap: 40px;

  /* --- Shapes --- */
  --radius-panel: 20px; /* dark panels, banners, showroom cards */
  --radius-card: 12px; /* car cards, photographs */
  --radius-inner: 16px; /* a rounded box inside another one */
  --radius-button: 10px;
  --radius-pill: 26px;

  /* --- Header --- */
  --bar-height: 91px;
  --bar-inset: 30px; /* how far the bar floats below the top of the page */
  --bar-pad-x: 40px;

  /* --- Hero --- */
  --hero-pad-top: 500px;
  --hero-pad-bottom: 250px;
  --hero-overlap: 140px; /* how far the dark panel climbs into the photo */

  /* --- Buttons --- */
  --button-pad-y: 16px;
  --button-pad-x: 28px;

  /* --- Motion. Two curves, taken from the reference's own settings. --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* outExpo: the reveals */
  --ease-soft: cubic-bezier(0.45, 0, 0.55, 1); /* easeInOut: opacity */
  --reveal-duration: 500ms;
  --fade-duration: 1000ms;
  --hover-duration: 300ms;
  --reveal-delay: 0ms; /* overridden per block, see section 4 */
}

/* ==========================================================================
   2. Reset and base elements
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* <summary> is the one element Chromium leaves in content-box even under a
   universal rule, which shows up as two stray pixels of outline. */
summary {
  box-sizing: border-box;
}

html {
  /* `clip` and not `hidden`: `hidden` would turn the root into a scroll
     container and break any sticky positioning further down the page. */
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-size);
  line-height: var(--text-line);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

/* One focus ring for the whole page. */
:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-button);
  background-color: var(--ink);
  color: var(--white);
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-soft);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   3. Layout utilities
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}

.section {
  padding: var(--section-pad) 0;
}

.section--cloud {
  background-color: var(--cloud);
}

.section--ink {
  background-color: var(--ink);
}

/* The last band before the footer: it only carries its bottom padding, the
   section above it already provides the top one. */
.section--tail {
  padding-top: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}

.section-title--light {
  color: var(--white);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-gap);
  margin-bottom: var(--head-gap);
}

/* A heading paired with a paragraph rather than a button: the paragraph keeps
   the same 370px measure as the rest of the page. */
.section-head--split .showrooms__copy {
  max-width: 370px;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-size);
  line-height: var(--text-line);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
}

/* On a light background the plain accent only reaches 2.5:1. The darker shade
   is not decoration, it is the readable version of the same colour. */
.eyebrow--deep {
  color: var(--accent-deep);
}

/* ==========================================================================
   4. Motion

   The reference plays two families of entrance, and nothing else:
     - a plain 1000ms fade, on the big blocks;
     - a 500ms rise of 50px, staggered by 100ms steps, on the cards.
   Both are reproduced here. What is NOT reproduced is the trigger: the
   reference starts at the first visible pixel, so a block has finished
   appearing before anyone sees it. main.js triggers at 15% up the screen
   instead — see the comment there for why a screen margin and not a
   percentage of the element.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--fade-duration) var(--ease-soft) var(--reveal-delay),
    transform var(--reveal-duration) var(--ease-out) var(--reveal-delay);
}

.js [data-reveal="up"] {
  transform: translateY(50px);
  transition-duration: var(--reveal-duration), var(--reveal-duration);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* The stagger, written in the markup as data-reveal-delay="200". Six values,
   the same six the reference uses. */
[data-reveal-delay="100"] {
  --reveal-delay: 100ms;
}
[data-reveal-delay="200"] {
  --reveal-delay: 200ms;
}
[data-reveal-delay="300"] {
  --reveal-delay: 300ms;
}
[data-reveal-delay="400"] {
  --reveal-delay: 400ms;
}
[data-reveal-delay="500"] {
  --reveal-delay: 500ms;
}
[data-reveal-delay="600"] {
  --reveal-delay: 600ms;
}

/* ==========================================================================
   5. Components
   ========================================================================== */

/* --- Button -------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-pad-y) var(--button-pad-x);
  border-radius: var(--radius-button);
  font-size: var(--small-size);
  line-height: var(--small-line);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--hover-duration) var(--ease-soft),
    color var(--hover-duration) var(--ease-soft);
}

/* Filled teal. The label is ink, not white: white on this teal sits at 2.5:1,
   which the source template shipped and which does not pass. Ink reaches
   7.2:1 on the same fill. */
.button--accent {
  background-color: var(--accent);
  color: var(--ink);
}

.button--accent:hover {
  background-color: var(--accent-deep);
  color: var(--white);
}

.button--dark {
  padding: 14px var(--button-pad-x);
  background-color: var(--ink);
  color: var(--white);
}

.button--dark:hover {
  background-color: var(--accent-deep);
}

.button--small {
  padding: 10px 22px;
  line-height: 21px;
}

.button--block {
  width: 100%;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  line-height: 21px;
}

/* --- Brand --------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand__mark {
  width: 44px;
  height: 44px;
  flex: none;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  color: var(--white);
}

/* --- Navigation ---------------------------------------------------------- */

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--head-gap);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: var(--small-size);
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  transition: color var(--hover-duration) var(--ease-soft);
}

.nav__link:hover {
  color: var(--accent-bright);
}

.nav__chevron {
  width: 16px;
  height: 16px;
  transition: transform var(--hover-duration) var(--ease-soft);
}

/* The chevron flips a half turn while the panel opens — the same 300ms and
   the same 180° as the reference. */
.nav__item--dropdown.is-open .nav__chevron {
  transform: rotate(-180deg);
}

.nav__item--dropdown {
  position: relative;
}

.nav__panel {
  position: absolute;
  top: calc(100% + 22px);
  left: -24px;
  display: flex;
  gap: var(--head-gap);
  padding: 24px;
  border-radius: var(--radius-inner);
  background-color: var(--white);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--hover-duration) var(--ease-soft),
    transform var(--hover-duration) var(--ease-soft),
    visibility 0s linear var(--hover-duration);
}

.nav__item--dropdown:focus-within .nav__panel,
.nav__item--dropdown.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav__sublist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nav__sublink {
  display: block;
  font-size: var(--small-size);
  line-height: 20px;
  white-space: nowrap;
  color: var(--ink);
  transition: color var(--hover-duration) var(--ease-soft);
}

.nav__sublink:hover {
  color: var(--accent-deep);
}

/* The burger only exists below 992px, see section 9. */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-button);
}

.burger__bar {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--white);
  transition:
    transform 250ms var(--ease-soft),
    opacity 250ms var(--ease-soft);
}

.burger[aria-expanded="true"] .burger__bar:first-child {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bar:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger__bar:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Picker (the three hero filters) -------------------------------------
   A native <details>. It opens on click and on Enter, with or without
   JavaScript; main.js only adds the class that plays the 300ms opening,
   because a closed <details> is removed from rendering and a keyframe would
   never replay after the first time. */

.picker {
  position: relative;
}

.picker__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 58px;
  padding: 8px 20px;
  border-radius: var(--radius-button);
  background-color: var(--white);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.picker__toggle::-webkit-details-marker {
  display: none;
}

.picker__label {
  font-size: var(--text-size);
  line-height: var(--text-line);
}

.picker__chevron {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--hover-duration) var(--ease-soft);
}

.picker[open] .picker__chevron {
  transform: rotate(-180deg);
}

.picker__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 3;
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-button);
  background-color: var(--white);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
}

/* The opening: the panel arrives from 10px below while it fades in, over
   300ms. `.is-open` is set by main.js on the `toggle` event. */
.js .picker[open] .picker__panel {
  opacity: 0;
  transform: translateY(10px);
}

.js .picker[open].is-open .picker__panel {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--hover-duration) var(--ease-soft),
    transform var(--hover-duration) var(--ease-soft);
}

.picker__option {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: var(--small-size);
  line-height: var(--small-line);
  color: var(--ink);
  transition: background-color var(--hover-duration) var(--ease-soft);
}

.picker__option:hover {
  background-color: var(--cloud);
  color: var(--accent-deep);
}

/* --- Car card ------------------------------------------------------------ */

.car {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-card);
  background-color: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.car__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 50px;
}

.car__marque {
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: var(--radius-button);
}

.car__name {
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  font-weight: 700;
}

.car__tags {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--small-size);
  line-height: var(--small-line);
  color: var(--ink);
}

/* The dot between two tags is drawn, not typed: no character to translate. */
.car__tags span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: var(--ink);
  vertical-align: middle;
}

/* The photograph zooms 5% under the pointer, in 300ms — the reference's own
   figure. The frame clips it, so nothing ever leaves the card. */
.car__photo {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 16 / 9;
}

.car__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hover-duration) var(--ease-soft);
}

.car__photo:hover img,
.car__photo:focus-visible img {
  transform: scale(1.05);
}

.car__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px;
  border-radius: var(--radius-panel);
  background-color: var(--ink);
  color: var(--white);
}

.specs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 5px;
}

.spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--small-size);
  line-height: var(--small-line);
}

.spec img {
  width: 28px;
  height: 28px;
}

.car__price {
  padding: 0 10px;
  font-size: var(--price-size);
  line-height: var(--text-line);
}

/* --- Review card and its track -------------------------------------------
   A scroll-snap track: it slides, it swipes and it takes the arrow keys with
   no JavaScript. The two buttons and the spoken position are the layer on
   top, added in main.js. */

.reviews__viewport {
  position: relative;
}

.reviews__track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Room for the focus ring of the card that is snapped into place. */
  padding: 4px;
  margin: -4px;
}

.reviews__track::-webkit-scrollbar {
  display: none;
}

.review {
  flex: none;
  width: 400px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 25px 32px;
  border-radius: var(--radius-inner);
  background-color: var(--white);
  color: var(--ink);
}

.review__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.review__stars {
  display: flex;
  gap: 0;
}

.review__stars img {
  width: 24px;
  height: 24px;
}

.review__quote {
  width: 40px;
  height: 40px;
}

.review__text {
  margin-bottom: 30px;
}

.review__author {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: auto;
}

.review__face {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.review__name {
  font-size: var(--text-size);
  line-height: var(--text-line);
}

.review__source {
  font-size: var(--small-size);
  line-height: var(--small-line);
  color: #616066;
}

.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-card);
  background-color: var(--accent);
  color: var(--ink);
  transition: background-color var(--hover-duration) var(--ease-soft);
}

.arrow svg {
  width: 24px;
  height: 24px;
}

.arrow:hover {
  background-color: var(--accent-bright);
}

.arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

.reviews__arrows {
  display: flex;
  gap: 10px;
}

/* --- Showroom card ------------------------------------------------------- */

.place {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-panel);
  background-color: var(--white);
}

.place__photo {
  overflow: hidden;
  border-radius: var(--radius-inner);
  aspect-ratio: 25 / 18;
}

.place__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hover-duration) var(--ease-soft);
}

.place:hover .place__photo img {
  transform: scale(1.05);
}

.place__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: var(--radius-inner);
  background-color: var(--ink);
  color: var(--white);
}

.place__name {
  font-size: var(--h4-size);
  line-height: var(--text-line);
  font-weight: 700;
}

.place__address {
  color: var(--ink-soft);
}

/* --- Post card ----------------------------------------------------------- */

.post {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.post__photo {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  margin-bottom: 14px;
  aspect-ratio: 3 / 2;
}

.post__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hover-duration) var(--ease-soft);
}

.post:hover .post__photo img {
  transform: scale(1.05);
}

.post__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 16px;
  border-radius: var(--radius-button);
  background-color: var(--white);
  font-size: var(--small-size);
  line-height: var(--small-line);
  color: var(--ink);
}

.post__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--small-size);
  line-height: var(--text-line);
}

.post__meta span:first-child {
  font-weight: 700;
}

.post__meta span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: var(--ink);
  vertical-align: middle;
}

.post__title {
  margin-bottom: 12px;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  font-weight: 500;
}

.post__link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--small-size);
  line-height: var(--small-line);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.post__link img {
  width: 20px;
  height: 20px;
  transition: transform var(--hover-duration) var(--ease-soft);
}

.post:hover .post__link img {
  transform: translate(3px, -3px);
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
  position: absolute;
  top: var(--bar-inset);
  left: 0;
  right: 0;
  z-index: 20;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-gap);
  min-height: var(--bar-height);
  padding: 20px var(--bar-pad-x);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background-color: var(--ink);
}

/* Inside the bar the filled button has to fit a 91px row. */
.site-header .button {
  padding: 14px var(--button-pad-x);
}

/* The menu carries a copy of the call to action for the collapsed layout;
   above 992px the one in .site-header__actions is the visible one. */
.nav__item--action {
  display: none;
}

/* ==========================================================================
   7. Page sections
   ========================================================================== */

/* --- 1. Hero -------------------------------------------------------------
   Three layers stacked in one property: the fade to white that lets the dark
   panel below overlap the photo, a flat 40% darkening so white type holds,
   and the photograph itself. */

.hero {
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
  margin-bottom: calc(var(--hero-overlap) * -1);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0) 75%, var(--white)),
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("../img/hero-showroom.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--head-gap);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

/* The brand word sits on a photograph, so it takes the lit shade: the plain
   teal drops to 3:1 once the picture is only darkened by 40%. */
.hero__brand {
  color: var(--accent-bright);
}

.filters {
  position: relative;
  z-index: 2;
}

.filters__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-panel);
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
}

.filters__selects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  flex: 1 1 auto;
}

.filters__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 462px;
}

.filters__field {
  width: 100%;
  height: 58px;
  padding: 8px 133px 8px 20px;
  border: 0;
  border-radius: var(--radius-button);
  background-color: var(--cloud);
  font-size: var(--small-size);
}

.filters__submit {
  position: absolute;
  top: 8px;
  right: 9px;
}

/* --- 2. About ------------------------------------------------------------ */

.about__panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  padding: 60px 100px;
  border-radius: var(--radius-panel);
  background-color: var(--ink);
  color: var(--white);
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 455px;
}

/* The eyebrow belongs to its heading, not to the block above it. */
.about__text .eyebrow + .section-title {
  margin-top: -25px;
}

.about__copy {
  color: var(--ink-soft);
}

/* The hairlines between the four figures are the 1px grid gap showing
   through: the cells are opaque, the grid behind them is not. */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--on-dark-line);
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  background-color: var(--ink);
  text-align: center;
}

.metric__value {
  font-size: var(--metric-size);
  line-height: var(--metric-line);
  font-weight: 500;
}

.metric__label {
  font-family: var(--font-display);
  font-size: var(--text-size);
  line-height: var(--text-line);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- 3. Fleet ------------------------------------------------------------ */

.fleet__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-row-gap) var(--grid-gap);
}

/* --- 4. Steps ------------------------------------------------------------ */

.steps__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.steps__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  max-width: 370px;
}

/* The eyebrow and the heading are one block, not two: 28px separates the
   block from the paragraph, not the eyebrow from its own title. */
.steps__intro .eyebrow + .section-title {
  margin-top: -28px;
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.step__icon {
  width: 48px;
  height: 48px;
}

.step__title {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  font-weight: 500;
}

/* The 20px gap belongs between the icon and the text, not inside the text. */
.step__title + .step__copy {
  margin-top: -12px;
}

/* --- 5. Reviews ---------------------------------------------------------- */

/* The arrows sit in the flow of the heading row here, where the reference
   floats them; 22px instead of 40px keeps the section its measured height. */
.reviews .section-head {
  margin-bottom: 22px;
}

/* --- 6. Showrooms -------------------------------------------------------- */

.showrooms__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.showrooms__copy {
  color: var(--ink);
}

/* --- 7. Journal ---------------------------------------------------------- */

.journal__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-row-gap) 26px;
}

/* --- 8. Banners ---------------------------------------------------------- */

.banners__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  padding: 80px 60px;
  border-radius: var(--radius-panel);
}

.banner--ink {
  background-color: var(--ink);
  color: var(--white);
}

.banner--cloud {
  background-color: var(--cloud);
}

.banner__title {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: 700;
  text-transform: uppercase;
}

.banner--ink .banner__copy {
  color: var(--ink-soft);
}

/* The 30px gap is between the text block and the button; the copy follows its
   own title at 8px. */
.banner__title + .banner__copy {
  margin-top: -22px;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer {
  padding-top: var(--section-pad);
  background-color: var(--ink);
  color: var(--white);
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--head-gap);
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 484px;
}

.site-footer__blurb {
  color: var(--white);
}

.newsletter {
  width: 484px;
  max-width: 100%;
}

.newsletter__title {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: var(--text-size);
  line-height: var(--text-line);
  font-weight: 700;
  text-transform: uppercase;
}

.newsletter__row {
  position: relative;
  display: flex;
  align-items: center;
}

.newsletter__field {
  width: 100%;
  height: 58px;
  padding: 8px 133px 8px 20px;
  border: 0;
  border-radius: var(--radius-button);
  background-color: var(--white);
  color: var(--ink);
  font-size: var(--small-size);
}

.newsletter__row .button {
  position: absolute;
  top: 8px;
  right: 9px;
}

.site-footer__middle {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}

.site-footer__heading {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: var(--text-size);
  line-height: var(--text-line);
  font-weight: 700;
  text-transform: uppercase;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.site-footer__links a {
  font-size: var(--micro-size);
  line-height: var(--micro-line);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--line);
  transition: color var(--hover-duration) var(--ease-soft);
}

.site-footer__links a:hover {
  color: var(--accent-bright);
}

.hours {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}

.hours li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  font-size: var(--micro-size);
  line-height: var(--micro-line);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--line);
}

.socials {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.socials a {
  display: inline-flex;
  transition: opacity var(--hover-duration) var(--ease-soft);
}

.socials a:hover {
  opacity: 0.6;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 0;
  font-size: var(--small-size);
  line-height: var(--text-line);
}

/* ==========================================================================
   9. Responsive

   Only the tokens and the grids change. No heading owns a media query: its
   size comes from the scale redefined at the top of each block.
   ========================================================================== */

@media (max-width: 991px) {
  :root {
    --h1-size: 46px;
    --h1-line: 55.2px;
    --hero-pad-top: 400px;
    --bar-inset: 20px;
  }

  /* Menu collapses into the burger. The collapsed state is written under
     `html.js` only: without scripts the links stay stacked and reachable. */
  .burger {
    display: flex;
  }

  .site-header__bar {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .site-header__actions {
    display: none;
  }

  .nav__item--action {
    display: block;
  }

  .nav {
    order: 3;
    width: 100%;
  }

  .js .nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms var(--ease-soft);
  }

  .js .nav.is-open {
    max-height: 620px;
  }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 0 8px;
  }

  .nav__item--dropdown {
    width: 100%;
  }

  /* On a narrow screen the panel drops into the flow instead of floating. */
  .nav__panel {
    position: static;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    padding: 16px;
    box-shadow: none;
  }

  .hero__title {
    max-width: 800px;
    margin: 0 auto;
  }

  .filters__inner {
    flex-wrap: wrap;
  }

  .filters__search {
    flex: 1 1 100%;
  }

  .about__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 50px;
  }

  .about__text {
    max-width: none;
  }

  /* Below 992px the four figures leave their hairline grid and stack in a
     single left-aligned column, the way the reference does. */
  .metrics {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    background-color: transparent;
  }

  .metric {
    align-items: flex-start;
    padding: 0;
    text-align: left;
  }

  .fleet__grid,
  .journal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
    justify-items: center;
  }

  .steps__intro {
    align-items: center;
    max-width: 500px;
    text-align: center;
  }

  .showrooms__grid {
    gap: var(--grid-gap);
  }

  .section-head--split {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Stacked under its heading, the paragraph has the whole row: keeping the
     370px measure would push it to three lines for nothing. */
  .section-head--split .showrooms__copy {
    max-width: none;
  }

  .banners__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__top {
    flex-direction: column;
    align-items: stretch;
    gap: var(--head-gap);
  }

  .site-footer__middle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px 20px;
  }

  .site-footer__bottom {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  :root {
    --h1-size: 34px;
    --h1-line: 40.8px;
    --h2-size: 24px;
    --h2-line: 31.2px;
    --section-pad: 80px;
    --hero-pad-bottom: 180px;
    --hero-overlap: 100px;
    --bar-height: 78px;
    --bar-pad-x: 24px;
    --radius-panel: 16px;
  }

  .site-header__bar {
    border-radius: var(--radius-inner);
  }

  .hero {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0) 75%, var(--white)),
      linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../img/hero-mobile.webp");
  }

  .hero__inner {
    gap: 30px;
  }

  .filters__selects {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .filters__inner {
    gap: 12px;
  }

  .picker__toggle {
    height: 52px;
  }

  .filters__field {
    height: 52px;
  }

  .filters__submit {
    top: 5px;
  }

  .about__panel {
    padding: 40px;
  }

  /* The posts keep two columns down to 480px; only the car cards and the
     showrooms, which are much taller, go to one. */
  .fleet__grid,
  .showrooms__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .step {
    gap: 16px;
  }

  .car__panel {
    padding: 22px;
    gap: 20px;
  }

  .banner {
    padding: 60px 40px;
  }
}

@media (max-width: 479px) {
  :root {
    --h1-size: 32px;
    --h1-line: 38.4px;
    --h2-size: 20px;
    --h2-line: 26px;
    --h3-size: 18px;
    --h3-line: 23.4px;
    --h4-size: 16px;
    --h4-line: 20.8px;
    --metric-size: 32px;
    --metric-line: 38.4px;
    --price-size: 18px;
    --text-size: 16px;
    --text-line: 24px;
    --small-size: 14px;
    --small-line: 21px;
    --hero-pad-top: 300px;
    --shell-pad: 16px;
    --bar-height: 72px;
    --bar-pad-x: 20px;
    --bar-inset: 16px;
    --section-pad: 80px;
  }

  /* The search button leaves the field and takes a row of its own: 415px is
     not enough for a label and a button side by side. */
  .filters__search {
    flex-wrap: wrap;
  }

  .filters__field {
    padding-right: 20px;
  }

  .filters__submit {
    position: static;
    width: 100%;
    height: 52px;
  }

  .about__panel {
    padding: 25px;
  }

  .about__text {
    gap: 20px;
  }

  .about__text .eyebrow + .section-title {
    margin-top: -20px;
  }

  .journal__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
  }

  .car__panel {
    padding: 10px;
    gap: 14px;
  }

  .place {
    padding: 10px;
    gap: 10px;
  }

  .place__panel {
    padding: 14px;
  }

  .car {
    padding: 10px;
  }

  .banner {
    align-items: stretch;
    padding: 40px 25px;
  }

  .banner .button {
    width: 100%;
  }

  .site-footer__middle {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .review {
    width: min(400px, calc(100vw - 2 * var(--shell-pad)));
    padding: 20px 24px;
  }

  .newsletter__field {
    padding-right: 20px;
  }

  .newsletter__row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .newsletter__row .button {
    position: static;
    width: 100%;
    height: 52px;
  }
}

/* ==========================================================================
   10. Reduced motion

   Delays are movement spread over time, so they go to zero too. Without that
   line a block would still appear 600ms late, which is exactly the thing the
   setting asks us not to do.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}