/* Final visual standard. Loaded after section styles.
   Brand colours, imagery, content and carousel geometry remain unchanged. */
:root {
  /* Primitives */
  --font-family: 'Montserrat', Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-heading: 700;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  /* Semantic tokens */
  --type-h1: clamp(40px, 4vw, 64px);
  --type-h2: clamp(32px, 3.5vw, 56px);
  --type-h3: 24px;
  --type-modal: clamp(28px, 3vw, 40px);
  --type-body: 16px;
  --type-lead: 18px;
  --type-small: 14px;
  --type-caption: 12px;
  --leading-heading: 1.14;
  --leading-body: 1.6;
  --content-max: 1600px;
  --page-gutter: 48px;
  --section-space: 96px;
  --heading-gap: 48px;
  --column-gap: 64px;
  --radius-card: 24px;
  --radius-control: 12px;
  --radius-round: 50%;
  /* Component tokens */
  --control-height: 56px;
  --card-padding: 24px;
}

body, button, input, select, textarea { font-family: var(--font-family); }
body { font-size: var(--type-body); font-weight: var(--weight-regular); line-height: var(--leading-body); }

/* Same role = same size, weight and tracking, even across different backgrounds. */
h2, .hits-heading h2, .client-reviews h2, .safety h2,
.drive-heading h2, .estimate-feature-copy h2, .handovers-heading h2,
.warranty-copy h2, .questions-heading h2, .closing-cta h2 {
  font-family: var(--font-family);
  font-size: var(--type-h2);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: -.04em;
  text-transform: none;
  text-wrap: balance;
}
.hero h1 {
  font-family: var(--font-family);
  font-size: var(--type-h1);
  font-weight: var(--weight-heading);
  line-height: 1.1;
  letter-spacing: -.04em;
  margin-bottom: var(--space-6);
}
.hit-card h3, .safety-card h3 {
  font-size: var(--type-h3);
  font-weight: var(--weight-heading);
  line-height: 1.25;
  letter-spacing: -.025em;
  text-transform: none;
}
.client-review-author h3, .hero-benefit strong {
  font-size: var(--type-body);
  font-weight: var(--weight-heading);
  line-height: 1.4;
  letter-spacing: -.02em;
}
.hero-lead, .safety-card p, .client-review blockquote,
.warranty-lead, .question-answer p, .questions-heading p,
.dialog-inner > p:not(.eyebrow), .warranty-dialog p, .warranty-dialog li {
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}
.client-reviews-heading p, .estimate-feature-copy > p {
  font-size: var(--type-lead);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}
.hit-meta, .hit-price > span, .warranty-perks, .closing-consent,
.drive-investment span, .hero-benefit-text > span, .car-dialog-copy p {
  font-size: var(--type-small);
  line-height: 1.5;
}
/* User-approved exception: the original catalogue price face. */
.hit-price strong { font-family: 'Manrope', Arial, sans-serif; font-size: var(--type-h3); font-weight: 650; }
.hits-footnote, .client-review-source, .client-review-source a, .client-review-author time, .warranty-note,
.closing-demo-note, .warranty-dialog .warranty-dialog-note, .car-dialog-copy .car-dialog-note, .car-dialog-copy .car-engine-note {
  font-size: var(--type-caption);
  line-height: 1.5;
}

/* Common outer edges and section rhythm. Full-bleed galleries stay full-bleed. */
.hits-shell, .client-reviews-shell, .safety-shell, .drive-shell,
.estimate-feature-shell, .handovers-heading, .warranty-layout,
.questions-layout, .closing-layout, .site-footer .shell {
  width: min(calc(100% - var(--page-gutter) * 2), var(--content-max));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.hits-section, .client-reviews, .safety, .test-drive, .estimate-feature,
.handovers, .warranty-section, .questions-section, .closing-cta {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}
.test-drive { min-height: 0; }
/* Requested compact spacing around the guarantee composition. */
.warranty-section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.hits-heading, .client-reviews-heading, .handovers-heading {
  gap: var(--space-8);
  margin-bottom: var(--heading-gap);
}
.hits-heading { align-items: flex-start; }
.hits-heading h2 { white-space: normal; flex: 1; min-width: 0; }
.hits-tools { flex-shrink: 0; }
.safety h2 { max-width: 1050px; margin: 0 auto var(--heading-gap); }
.client-reviews-heading p, .questions-heading p { margin-top: var(--space-6); }
.estimate-feature-shell, .warranty-layout, .questions-layout, .closing-layout {
  gap: var(--column-gap);
}
.estimate-feature-copy h2 { max-width: none; }
.estimate-feature-copy > p, .warranty-lead { margin: var(--space-6) 0 var(--space-8); }
.closing-form { width: 100%; max-width: 640px; justify-self: end; }
.closing-field { margin-bottom: var(--space-6); }
.closing-field > label { margin-bottom: var(--space-2); }
.closing-consents { margin: var(--space-6) 0; }
.closing-form .closing-demo-note { margin-top: var(--space-4); }
.site-footer { padding: var(--space-12) 0; }

/* Cards: related content uses the same internal padding and interval scale. */
.hits-grid, .hits-page { --catalog-gap: 24px; row-gap: var(--space-8); }
.hit-card h3 { margin: var(--space-4) 0 var(--space-2); }
.hit-price { margin-top: auto; padding-top: var(--space-3); margin-bottom: var(--space-4); flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.hits-footnote { margin-top: var(--space-6); padding-top: var(--space-4); }
.client-review-body { padding: var(--card-padding); }
.client-review blockquote { margin: var(--space-6) 0; }
.safety-grid { gap: var(--space-6); }
.safety-card { min-height: 0; padding: var(--card-padding); }
.safety-card h3 { min-height: 2.5em; }
.safety-art { margin: var(--space-6) 0; padding: var(--space-3); }
.safety-card p { margin: 0; }
.drive-heading h2 { gap: var(--column-gap); }
.drive-heading h2 > span, .drive-heading h2 > em { max-width: none; }
.drive-heading .keep-together { white-space: nowrap; }
.drive-stage { margin-top: var(--space-6); }
.drive-footer { gap: var(--space-8); }
.warranty-coverage { padding: var(--space-6) 0; gap: var(--space-4); }
.warranty-coverage strong { font-size: 32px; font-weight: var(--weight-heading); }
.warranty-perks { margin: var(--space-6) 0 var(--space-8); gap: var(--space-4) var(--space-6); }
.questions-list summary { padding-top: var(--space-6); padding-bottom: var(--space-6); font-size: var(--type-lead); font-weight: var(--weight-medium); }
.question-answer { padding-bottom: var(--space-6); }
.handovers { --handover-gap: 24px; }
.handovers-heading h2 { max-width: 1250px; }

/* One control language. Circular icon controls and avatars are intentional. */
.button, .site-header > .button, .hero-actions .button, .drive-cta,
.estimate-feature-cta, .estimate-document-action, .warranty-button,
.closing-submit, .hit-details, .car-calculate, .handovers-motion {
  border-radius: var(--radius-control);
  font-family: var(--font-family);
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.button, .hero-actions .button, .drive-cta, .estimate-feature-cta,
.estimate-document-action, .warranty-button, .closing-submit, .car-calculate {
  min-height: var(--control-height);
  height: auto;
  padding: var(--space-4) var(--space-6);
  gap: var(--space-6);
}
.site-header > .button { min-height: 44px; padding: var(--space-3) var(--space-4); }
.hit-details, .handovers-motion { min-height: 48px; padding: var(--space-3) var(--space-4); }
.closing-field > input, .lead-dialog input, .lead-dialog select {
  min-height: var(--control-height);
  height: auto;
  border-radius: var(--radius-control);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  padding: var(--space-4);
}
.site-header .menu-toggle, .site-header .mobile-nav, .hit-price strong,
.client-review-score, .photo-count, .closing-feedback, .hero-benefit-icon {
  border-radius: var(--radius-control);
}
.hit-image-button, .client-review, .safety-card, .estimate-document,
.handover-photo, .hero-benefits, .lead-dialog, .car-dialog,
.estimate-dialog, .handovers-dialog, .warranty-dialog {
  border-radius: var(--radius-card);
}
.safety-art, .handovers-dialog > img { border-radius: var(--radius-control); }
.dialog-close, .handovers-dialog-close { border-radius: var(--radius-round); }

/* Secondary surfaces follow the same scale, not oversized display headings. */
.dialog-inner h2, .car-dialog-copy h2, .estimate-dialog h2, .warranty-dialog h2 {
  font-size: var(--type-modal);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: -.04em;
  text-transform: none;
}
.warranty-dialog h3, .estimate-dialog-section-title {
  font-size: 20px;
  font-weight: var(--weight-heading);
  line-height: 1.3;
  text-transform: none;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.estimate-document h3 { font-size: var(--type-modal); line-height: var(--leading-heading); font-weight: var(--weight-heading); letter-spacing: -.04em; }
.estimate-document { padding: var(--space-8); }
.warranty-dialog-inner, .dialog-inner { padding: var(--space-12); }
.car-dialog-copy, .estimate-dialog-head, .estimate-dialog-body { padding: var(--space-8); }
.warranty-kicker { font-size: var(--type-caption); font-weight: var(--weight-medium); letter-spacing: .04em; }
.site-header .desktop-nav a, .footer-brand small { font-weight: var(--weight-medium); }
.drive-investment strong, .estimate-document-main p, .estimate-dialog-label,
.estimate-dialog-detail-grid .estimate-dialog-subtotal, .footer-brand, .client-photo-empty > span { font-weight: var(--weight-heading); }
.drive-models span, .client-photo-empty > small { text-transform: none; }

/* Hero is a scroll-linked composition, but uses the same container edges. */
.site-header { left: max(var(--page-gutter), calc((100% - var(--content-max)) / 2)); right: max(var(--page-gutter), calc((100% - var(--content-max)) / 2)); }
.hero-copy, .hero .image-disclaimer { left: max(var(--page-gutter), calc((100% - var(--content-max)) / 2)); }
.hero-benefits { left: max(var(--page-gutter), calc((100% - var(--content-max)) / 2)); right: max(var(--page-gutter), calc((100% - var(--content-max)) / 2)); }
.hero-copy { max-width: min(740px, calc(100% - var(--page-gutter) * 2)); }
.hero-actions { gap: var(--space-6); }
.hero-lead { margin-bottom: var(--space-8); }
.hero-proof { margin-top: var(--space-8); }

@media (max-width: 1100px) {
  :root { --page-gutter: 32px; --section-space: 80px; --column-gap: 48px; }
  .hits-heading { flex-wrap: wrap; }
  .hits-heading h2 { flex-basis: 100%; }
  .client-reviews-heading { align-items: flex-start; }
}
@media (min-width: 641px) and (max-width: 1200px) {
  .safety-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root {
    --page-gutter: 20px;
    --section-space: 64px;
    --heading-gap: 32px;
    --column-gap: 32px;
    --type-h1: clamp(28px, 7.4vw, 40px);
    --type-h2: clamp(30px, 7.7vw, 36px);
    --type-h3: 20px;
    --type-lead: 16px;
  }
  .hero h1 span, .hero h1 em { white-space: normal; }
  .hero-benefits { padding: var(--space-6); }
  .hero-actions { gap: var(--space-4); }
  .hero-lead, .hero-proof { margin-bottom: var(--space-6); }
  .hero-proof { margin-top: var(--space-6); }
  .site-header > .button { font-size: 12px; padding: var(--space-3); }
  .site-header .brand img { width: 132px; }
  .site-header .menu-toggle { flex-basis: 44px; height: 44px; }
  .hits-tools { flex-wrap: wrap; gap: var(--space-4); width: 100%; }
  .safety-card h3 { min-height: 0; }
  .safety-art { margin: var(--space-6) 0; }
  .drive-stage { margin-top: var(--space-6); }
  .drive-footer { gap: var(--space-6); }
  .warranty-coverage strong { font-size: 28px; }
  .warranty-section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .warranty-perks { grid-template-columns: 1fr; font-size: var(--type-small); }
  .closing-form { max-width: none; }
  .estimate-document, .warranty-dialog-inner, .dialog-inner,
  .car-dialog-copy, .estimate-dialog-head, .estimate-dialog-body { padding: var(--space-6); }
  .handovers { --handover-gap: 16px; }
}
/* Short screens need the same hierarchy at a compact scale, without CTA overlap. */
@media (max-height: 800px) {
  .hero h1 { font-size: clamp(28px, 3.3vw, 44px); margin-bottom: var(--space-4); }
  .hero-lead { margin-bottom: var(--space-6); }
  .hero-proof { margin-top: var(--space-6); }
}
@media (max-width: 700px) and (max-height: 800px) {
  .hero h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .hero-lead { font-size: var(--type-small); }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .hero-actions .button { width: auto; min-width: 240px; }
}