@layer legacy, components, system;

/*
 * AutoMost layout system
 * ----------------------
 * This is the only public stylesheet allowed to define page rails, section
 * rhythm, panel geometry and responsive column changes. Page styles own
 * colours and unique artwork; they must not redefine this geometry.
 */
@layer system {
  :root {
    --layout-max: 1240px;
    --layout-gutter: clamp(16px, 3vw, 40px);
    --layout-section-gap: 14px;
    --layout-panel-padding: 14px;
    --layout-grid-gap: 10px;
    --layout-control-gap: 10px;
    --layout-panel-radius: 28px;
    --layout-card-radius: 20px;
    --layout-control-height: 48px;
    --layout-reading-width: 76ch;
    --layout-header-logo: 269px;

    /* Backwards-compatible aliases used by CMS-editable components. */
    --site-section-gap: var(--layout-section-gap);
    --site-panel-padding: var(--layout-panel-padding);
    --site-control-gap: var(--layout-control-gap);
  }

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

  html {
    min-width: 320px;
    overflow-x: clip;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-width: 320px;
    overflow-x: clip;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  img,
  video {
    height: auto;
  }

  button,
  input,
  select,
  textarea {
    max-width: 100%;
    font: inherit;
  }

  :where(h1, h2, h3, h4, p, ul, ol, dl, figure) {
    min-width: 0;
    max-width: 100%;
  }

  :where(h1, h2, h3, h4) {
    margin-block: 0;
    line-height: 1;
    text-wrap: balance;
    overflow: visible;
  }

  /* The ordinal is decorative context, not a separate content row. */
  .work-step-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
    min-width: 0;
    min-height: 0;
    padding: 14px;
    gap: 8px;
    overflow: hidden;
  }

  .work-step-card > :not(.work-step-number, .anchor-target) {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  .work-step-card > .anchor-target {
    position: absolute;
    inset: 0 auto auto 0;
    width: 0;
    height: 0;
  }

  .work-step-card .work-step-number {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(244, 244, 241, .24);
    font-size: clamp(5.4rem, 9vw, 9rem);
    font-variant-numeric: tabular-nums;
    padding: .12em 0 0;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    transform: none;
    pointer-events: none;
    user-select: none;
  }

  .work-step-card strong {
    margin-bottom: 0;
  }

  /* The company name belongs to the logo and SEO metadata, not to every
     visible eyebrow where it duplicates the page heading. */
  .hero .eyebrow::after {
    content: none;
  }

  /* Preserve the custom fonts' negative left ink bearing without shifting layout. */
  :where(h1, h2, h3, h4, .eyebrow, .section-kicker, .section-label) {
    margin-inline-start: -.14em;
    padding-inline-start: .14em;
    overflow: visible;
  }

  :where(p, li, dt, dd, label, summary, a, button, span, strong) {
    overflow-wrap: break-word;
    word-break: normal;
  }

  :where(p, li, dt, dd) {
    text-wrap: pretty;
  }

  :where(p, ul, ol, dl, figure) {
    margin-block: 0;
  }

  /* One outer rail for the landing, CMS header, page content and footer. */
  :where(.page-shell, .topbar, .header, main, .wrap, footer.footer) {
    min-width: 0;
    max-width: 100%;
  }

  .topbar,
  .header,
  .page-shell > main,
  body:not([data-page-type="home"]) main > .wrap,
  footer.footer {
    width: min(var(--layout-max), calc(100% - 2 * var(--layout-gutter)));
    margin-inline: auto;
  }

  /* Shared header markup; only the link set differs between home and CMS pages. */
  .site-header {
    display: grid;
    grid-template-columns: minmax(220px, var(--layout-header-logo)) minmax(0, 1fr) auto;
    grid-template-areas: "logo nav actions";
    align-items: center;
    gap: var(--layout-control-gap);
    padding: var(--layout-panel-padding);
    /* Match the page panels instead of using a pill-shaped outer shell. */
    border-radius: var(--layout-panel-radius);
  }

  .site-header.topbar {
    grid-template-columns: minmax(220px, var(--layout-header-logo)) minmax(0, 1fr);
    grid-template-areas: "logo nav";
  }

  .site-logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    max-width: var(--layout-header-logo);
    /* Keep the transparent logo artwork clear of its own visible border. */
    padding: 5px 14px;
  }

  .site-logo-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .site-nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--layout-control-gap);
    min-width: 0;
  }

  .site-header .header-actions {
    grid-area: actions;
    min-width: 0;
  }

  body:not([data-page-type="home"]) main {
    width: 100%;
    margin: 0;
  }

  .page-shell > main,
  .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--layout-section-gap);
  }

  .wrap {
    padding-block: var(--layout-section-gap);
  }

  .page-shell > main > *,
  .wrap > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  /* Panels grow with content. Text never has to escape a fixed box. */
  :where(
    .layout-section,
    .hero,
    .trust-compact,
    .work-steps,
    .broker-home,
    .deliveries-showcase,
    .lead,
    .lead-form,
    .calculator,
    .card,
    .prose,
    .legal-document,
    .footer-card,
    .footer-panel
  ) {
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    height: auto;
  }

  :where(
    .layout-section,
    .hero,
    .trust-compact,
    .work-steps,
    .broker-home,
    .deliveries-showcase,
    .lead,
    .calculator,
    .card,
    .prose,
    .legal-document,
    .footer-card,
    .footer-panel
  ) {
    padding: var(--layout-panel-padding);
  }

  /* Every CMS content block uses the same content-driven vertical stack. */
  :where(.layout-section, .prose, .calculator) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: var(--layout-control-gap);
  }

  :where(.layout-section, .prose, .calculator) > * {
    min-width: 0;
    max-width: 100%;
    margin-block: 0;
  }

  /* The delivery gallery belongs to the trust panel and must not create a
     second set of horizontal panel gutters inside it. */
  .trust-compact > .deliveries-showcase {
    padding: var(--layout-panel-padding) 0 0;
  }

  :where(
    .hero-copy,
    .hero-side,
    .hero-note,
    .hero-metrics > *,
    .trust-compact-card,
    .work-step-card,
    .broker-home-copy,
    .broker-home-grid > *,
    .lead-copy,
    .lead-form,
    .calculator-grid > *,
    .features > *,
    .intent-grid > *,
    .footer-layout > *,
    .footer-messenger-row
  ) {
    min-width: 0;
    max-width: 100%;
  }

  :where(
    .hero-copy,
    .hero-side,
    .hero-note,
    .hero-metrics > *,
    .trust-compact-card,
    .work-step-card,
    .broker-home-copy,
    .broker-home-grid > *,
    .lead-copy,
    .lead-form,
    .calculator-grid > *,
    .features > *,
    .intent-grid > *,
    .footer-layout > *
  ) > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Reusable grids use equal tracks and one predictable gap. */
  :where(
    .features,
    .intent-grid,
    .trust-compact-grid,
    .work-steps-grid,
    .broker-home-grid,
    .hero-metrics,
    .footer-layout,
    .footer-modern-grid,
    .footer-modern-grid-compact
  ) {
    min-width: 0;
    max-width: 100%;
    gap: var(--layout-grid-gap);
    align-items: stretch;
  }

  .features,
  .intent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .buy-intent-grid {
    display: flex;
    flex-wrap: nowrap;
  }

  .buy-intent-grid .card {
    display: grid;
    flex: 1 1 auto;
    place-items: center;
    text-align: center;
  }

  .buy-intent-grid h2 {
    font-size: clamp(.9rem, 1.25vw, 1.08rem);
    line-height: 1.1;
    white-space: nowrap;
  }

  .features.powertrain-selection-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--layout-grid-gap);
  }

  .powertrain-selection-card {
    display: grid;
    min-width: 0;
    align-items: center;
  }

  /* The same complete deliveries component is used on home and country pages. */
  .deliveries-showcase-shared {
    display: grid;
    gap: var(--layout-control-gap);
  }

  .deliveries-showcase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--layout-section-gap);
  }

  .deliveries-showcase-head :where(h2, p) { margin: 0; }
  .deliveries-controls { display: flex; gap: var(--layout-control-gap); }

  .deliveries-nav {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: inherit;
    cursor: pointer;
  }

  .deliveries-track {
    --delivery-gap: 10px;
    --delivery-card-width: calc((100% - 30px) / 4);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--delivery-card-width);
    align-items: stretch;
    gap: var(--delivery-gap);
    overflow-x: auto;
    padding: 0 0 4px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .deliveries-track::-webkit-scrollbar { display: none; }

  .delivery-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--layout-card-radius);
    background: rgba(255, 255, 255, .025);
    scroll-snap-align: start;
    cursor: zoom-in;
  }

  .delivery-photo {
    position: relative;
    display: flex;
    align-items: end;
    width: 100%;
    height: 220px;
    padding: 0;
    background: #111 center / cover no-repeat;
  }

  .delivery-photo span,
  .delivery-meta p { display: none; }

  .delivery-meta {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 12px 14px 14px;
  }

  .delivery-meta strong,
  .delivery-meta :where(span, a) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .delivery-meta :where(span, a) {
    color: rgba(245, 245, 242, .68);
    text-decoration: none;
  }

  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 4, 4, .88);
    backdrop-filter: blur(18px);
  }

  .lightbox[hidden] { display: none; }

  .lightbox-dialog {
    position: relative;
    width: min(100%, 1100px);
    max-height: calc(100dvh - 48px);
    padding: 66px 18px 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    background: rgba(9, 9, 9, .94);
  }

  .lightbox-media {
    position: relative;
    width: fit-content;
    max-width: 100%;
    max-height: calc(100dvh - 132px);
    margin: 0 auto;
    touch-action: pan-y;
  }

  .lightbox-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100dvh - 132px);
    margin: 0 auto;
    border-radius: 20px;
    object-fit: contain;
  }

  .lightbox-close,
  .lightbox-nav {
    position: absolute;
    z-index: 4;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(18, 18, 18, .88);
    color: inherit;
  }

  .lightbox-close { top: 12px; right: 18px; }
  .lightbox-nav { top: 50%; width: 64px; height: 64px; transform: translateY(-50%); }
  .lightbox-nav-prev { left: 26px; }
  .lightbox-nav-next { right: 26px; }

  .lightbox-caption {
    position: absolute;
    left: 18px;
    bottom: 22px;
    display: grid;
    gap: 3px;
    max-width: calc(100% - 36px);
    padding: 9px 12px;
    border-radius: 14px;
    background: rgba(8, 8, 8, .68);
    pointer-events: none;
  }

  .lightbox-caption :where(strong, span) { margin: 0; }
  .lightbox-counter:empty { display: none; }

  .delivery-city-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: var(--layout-grid-gap);
    overflow: visible;
  }

  .delivery-city-list > li {
    flex: 1 1 max(112px, calc(9ch + 28px));
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    text-align: center;
    white-space: nowrap;
  }

  .buy-page-prose {
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sectioned-prose {
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .sectioned-prose.buy-page-prose {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sectioned-prose > :is(.prose-section, section) {
    display: grid;
    align-content: start;
    gap: var(--layout-control-gap);
    min-width: 0;
    padding: var(--layout-panel-padding);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--layout-card-radius);
    background: rgba(255, 255, 255, .025);
  }

  body:not([data-page-type="home"]) .features > :is(.card, article) {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--layout-control-gap);
  }

  body:not([data-page-type="home"]) .features > :is(.card, article) > :where(.button, a.button):last-child {
    align-self: stretch;
    width: 100%;
    margin-top: auto;
    margin-bottom: 0;
  }

  .topic-case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .features.topic-model-grid {
    display: flex;
    flex-wrap: wrap;
  }

  .topic-model-card {
    flex: 1 1 230px;
    justify-content: center;
    min-height: 88px;
    color: inherit;
    text-decoration: none;
  }

  .topic-model-card > * {
    margin: 0;
  }

  .topic-model-card h3 {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.08;
  }

  .topic-model-card p {
    color: rgba(245, 245, 242, .68);
  }

  .topic-model-threshold {
    width: 100%;
    color: rgba(245, 245, 242, .74);
    font-size: .84em;
    line-height: 1.28;
  }

  .topic-model-card--preferred .topic-model-threshold {
    color: rgba(255, 255, 255, .96);
  }

  .delivery-proof-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 6px;
    margin: -4px 0 10px;
  }

  .delivery-proof-card .delivery-proof-thumbs img {
    width: 100%;
    aspect-ratio: 3 / 2;
    margin: 0;
    border-radius: 10px;
    object-fit: cover;
  }

  .sectioned-prose > :is(.prose-section, section) > * {
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  .sectioned-prose > :is(.prose-section, section) h2 {
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.12;
  }

  .sectioned-prose:not(.buy-page-prose) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

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

  .calculator-guide-card {
    display: grid;
    align-content: start;
    gap: var(--layout-control-gap);
    min-width: 0;
    padding: var(--layout-panel-padding);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--layout-card-radius);
    background: rgba(255, 255, 255, .025);
  }

  .calculator-guide-card > * {
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  .calculator-topic-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--layout-control-gap);
  }

  .calculator-topic-nav a {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: inherit;
    text-align: center;
    text-decoration: none;
  }

  .buy-page-prose > section {
    display: grid;
    align-content: start;
    gap: var(--layout-control-gap);
    min-width: 0;
    padding: var(--layout-panel-padding);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--layout-card-radius);
    background: rgba(255, 255, 255, .025);
  }

  .buy-page-prose > section > * {
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  .buy-page-prose h2 {
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
    line-height: 1.12;
  }

  .hero-status-line,
  .hero-status-row-services {
    width: 100%;
    max-width: none;
  }

  .hero-status-row-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero.hero-single .hero-status-line .home-route-link,
  .work-route-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--muted-strong);
    font-family: "DaMiOne", "Cruinn", "Inter", sans-serif;
    font-size: .86rem;
    line-height: 1.15;
    letter-spacing: .06em;
    text-align: center;
    text-decoration: none;
    text-wrap: balance;
  }

  .work-route-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--layout-control-gap);
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin-top: var(--layout-section-gap);
  }

  /* Keep the route controls separate from the final work card at every
     breakpoint. Generic mobile margin resets must not collapse this gap. */
  .work-steps > .work-route-links {
    margin-top: var(--layout-section-gap);
  }

  .work-route-links a {
    box-sizing: border-box;
    font-family: "CruinnRegular", "Cruinn", "Inter", sans-serif;
    font-size: clamp(.72rem, 1.2vw, .86rem);
    letter-spacing: .02em;
  }

  .features > *,
  .intent-grid > *,
  .trust-compact-grid > *,
  .work-steps-grid > *,
  .broker-home-grid > *,
  .footer-layout > * {
    align-self: stretch;
    height: auto;
  }

  /* Repeated content uses a stack instead of individual margins. */
  :where(
    .hero-copy,
    .hero-note,
    .trust-head,
    .trust-compact-card,
    .work-steps-head,
    .work-step-card,
    .broker-home-copy,
    .lead-copy,
    .lead-form,
    .calculator,
    .card,
    .prose,
    .legal-document,
    .footer-card,
    .footer-panel
  ) {
    row-gap: var(--layout-control-gap);
  }

  :where(
    .hero-copy,
    .hero-note,
    .trust-compact-card,
    .work-step-card,
    .broker-home-copy,
    .lead-copy,
    .lead-form,
    .card,
    .footer-card,
    .footer-panel
  ) > :first-child {
    margin-top: 0;
  }

  :where(
    .hero-copy,
    .hero-note,
    .trust-compact-card,
    .work-step-card,
    .broker-home-copy,
    .lead-copy,
    .lead-form,
    .card,
    .footer-card,
    .footer-panel
  ) > :last-child {
    margin-bottom: 0;
  }

  /* Shared two-column blocks use equal rails and the same bottom baseline. */
  .lead {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: var(--layout-section-gap);
  }

  .lead-copy {
    align-self: stretch;
    align-content: start;
  }

  .lead-form {
    align-self: end;
  }

  /* CMS pages use the shared lead include without the landing page's
     explanatory column. Keep its heading above a full-width form; otherwise
     the generic two-column lead grid squeezes every field into one half. */
  .lead-standard {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
  }

  .lead-standard > h2,
  .lead-standard > form {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .lead-standard > form {
    align-self: start;
  }

  .hero-shell {
    min-width: 0;
    gap: var(--layout-section-gap);
  }

  /* The landing heading scales from the width of its own grid column, not the
     viewport. Longer CMS text therefore grows the panel instead of crossing
     into the adjacent note and metric cards. */
  body[data-page-type="home"] .hero-copy {
    container-type: inline-size;
  }

  @media (min-width: 1101px) {
    body[data-page-type="home"] .hero.hero-single .hero-title {
      font-size: clamp(2.7rem, 9.2cqi, 4.4rem);
    }

    body[data-page-type="home"] .hero.hero-single .hero-title span {
      max-width: 100%;
    }
  }

  @media (min-width: 981px) and (max-width: 1180px) {
    body[data-page-type="home"] .hero-shell {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Controls keep their optical centre but text may wrap when required. */
  :where(.button, button, input, select) {
    min-height: var(--layout-control-height);
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), select) {
    text-indent: .18em;
  }

  :where(.button, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    color: rgba(250, 250, 248, .98);
    font-synthesis: none;
    text-shadow: none;
    filter: none;
    text-rendering: geometricPrecision;
  }

  /*
   * Optical, not merely geometric, centring for the site's display font.
   * ui-interactions.js wraps only direct text nodes, so icons keep their own
   * exact 50/50 geometry and the control box never moves or changes height.
   */
  .control-label-optical {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    line-height: inherit;
    text-align: inherit;
    white-space: inherit;
    /* Cruinn's painted glyphs sit about 3 px above the middle of a 48–50 px
       control. Move the label only; the button box and its hit area stay put. */
    transform: translateY(clamp(3px, .2em, 4px));
    pointer-events: none;
  }

  /* The lead submit uses DaMiOne, whose painted box sits higher than Cruinn.
     Its flex item needs a 5 px optical correction to meet the button axis. */
  .button-submit > .control-label-optical {
    transform: translateY(5px);
  }

  :where(.deliveries-nav, .model-card-gallery-nav, .lightbox-close, .lightbox-nav) .control-label-optical {
    font-family: Arial, Helvetica, sans-serif;
    transform: translateY(1px);
  }

  /* Light primary actions need dark text. This belongs to the shared system
     layer because the generic system-layer button colour otherwise overrides
     component styles loaded from the legacy layer. Keep Safari's disabled
     control rendering from replacing the text fill as well. */
  :where(.button-primary) {
    color: #0c0c0c;
    -webkit-text-fill-color: #0c0c0c;
  }

  .menu-toggle {
    display: none;
  }

  textarea {
    min-height: 112px;
    height: auto;
    resize: vertical;
  }

  :where(.form-grid, .calculator-grid, .lead form) {
    min-width: 0;
    gap: var(--layout-grid-gap);
  }

  /* One predictable calculator rhythm: equal-width fields on each row. */
  .calculator-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .calculator-grid :where(.calc-country, .calc-brand, .calc-model) {
    grid-column: span 4;
  }

  .calculator-grid .calc-variant {
    grid-column: 1 / -1;
  }

  .calculator-grid :where(.calc-year, .calc-engine, .calc-volume, .calc-power) {
    grid-column: span 3;
  }

  .calculator-grid .calc-price {
    grid-column: span 6;
  }

  .calculator-grid .calc-import {
    grid-column: span 4;
  }

  .calculator-grid .calc-submit {
    grid-column: span 2;
    align-self: end;
  }

  .calculator-grid .calc-submit :where(button, .button) {
    width: 100%;
  }

  :where(.form-status, .form-note, .field-note):empty {
    display: none;
  }

  /* Motion may change opacity/colour, never the occupied geometry. */
  .reveal {
    transform: none;
  }

  :where(
    .card,
    .hero-note,
    .hero-metrics > *,
    .trust-compact-card,
    .work-step-card,
    .footer-card,
    .footer-panel
  ):hover {
    transform: none;
  }

  /* Footer columns and icon rows are identical on every template. */
  footer.footer .footer-layout,
  footer.footer .footer-layout-compact,
  footer.footer .footer-modern-grid,
  footer.footer .footer-modern-grid-compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--layout-grid-gap);
  }

  footer.footer .footer-layout > *,
  footer.footer .footer-layout-compact > *,
  footer.footer .footer-modern-grid > *,
  footer.footer .footer-modern-grid-compact > * {
    min-width: 0;
    height: 100%;
  }

  footer.footer .footer-messengers {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    gap: 6px;
    width: 100%;
  }

  footer.footer .footer-messenger-row {
    display: contents;
  }

  footer.footer .footer-messenger-button {
    flex: 0 1 38px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
  }

  @media (max-width: 980px) {
    :root {
      --layout-gutter: 16px;
    }

    .lead,
    .hero.hero-single,
    .hero-shell,
    body[data-page-type="model"] .wrap > .hero {
      grid-template-columns: minmax(0, 1fr);
    }

    .hero-status-row-services {
      grid-template-columns: minmax(0, 1fr);
    }

    .hero-status-row-countries {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-status-row-countries span:first-child {
      display: inline-flex;
    }

    .hero-status-row-countries span:last-child {
      grid-column: 1 / -1;
    }

    .hero-status-row-countries > :last-child {
      grid-column: 1 / -1;
    }

    .work-route-links {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: var(--layout-mobile-section-gap);
    }

    .lead-copy,
    .lead-form {
      width: 100%;
      align-self: start;
    }

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

    .features.topic-model-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buy-intent-grid,
    .buy-page-prose {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .calculator-guide-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .features.powertrain-selection-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    footer.footer .footer-layout,
    footer.footer .footer-layout-compact,
    footer.footer .footer-modern-grid,
    footer.footer .footer-modern-grid-compact {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Body copy uses the complete content width of its panel at every
     breakpoint. Headings keep their established type scale and wrapping. */
  :where(
    .hero > p:not(.eyebrow),
    .layout-section > p,
    .model-catalog-heading p,
    .sectioned-prose :is(.prose-section, section) > :is(p, ul, ol, dl),
    .features > .card > p,
    .calculator-guide-card > :is(p, ul, ol),
    .model-facts > :is(p, dl),
    .lead-copy > p,
    details > p
  ) {
    width: 100%;
    inline-size: 100%;
    max-width: none;
    max-inline-size: none;
    justify-self: stretch;
    margin-inline: 0;
  }

  @media (max-width: 760px) {
    :root {
      --layout-section-gap: 12px;
      --layout-panel-radius: 22px;
      --layout-card-radius: 18px;
      --layout-control-height: 46px;
    }

    .topbar,
    .header,
    .page-shell > main,
    body:not([data-page-type="home"]) main > .wrap,
    footer.footer {
      width: calc(100% - 32px);
    }

    .site-header.header {
      grid-template-columns: minmax(0, 1fr) 50px;
      grid-template-areas:
        "logo menu"
        "actions actions"
        "nav nav";
      column-gap: 8px;
      row-gap: 0;
      padding: 10px 12px;
    }

    .site-header.topbar {
      grid-template-columns: minmax(0, 1fr) 50px;
      grid-template-areas:
        "brand menu"
        "nav nav";
      column-gap: 8px;
      row-gap: 0;
      padding: 10px 12px;
    }

    .site-header.topbar .site-logo {
      grid-area: brand;
    }

    .site-header.menu-open {
      z-index: 60;
      overflow: visible;
      isolation: isolate;
      background: #080808;
      backdrop-filter: none;
      box-shadow: 0 18px 42px rgba(0, 0, 0, .72);
      transition-property: transform, opacity, border-color, box-shadow;
    }

    .site-header.menu-open + .floating-call {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .menu-toggle {
      display: inline-flex;
    }

    .site-header .site-nav {
      display: none;
      grid-area: nav;
      grid-column: 1 / -1;
      grid-template-columns: minmax(0, 1fr);
      justify-items: stretch;
      justify-self: stretch;
      align-self: stretch;
      min-width: 100%;
      max-width: 100%;
      width: 100%;
    }

    .site-header.menu-open .site-nav {
      display: grid;
    }

    .site-header .site-nav a {
      width: 100%;
      text-align: center;
    }

    .trust-compact > .deliveries-showcase {
      padding: var(--layout-section-gap) 0 0;
    }

    .features.powertrain-selection-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .deliveries-showcase-head {
      display: block;
    }

    .deliveries-controls {
      display: none;
    }

    .deliveries-head h2 {
      font-size: clamp(1.28rem, 6vw, 1.55rem);
      line-height: .96;
    }

    .deliveries-track {
      --delivery-gap: 8px;
      --delivery-card-width: calc((100% - var(--delivery-gap)) / 2);
      touch-action: pan-x pan-y;
    }

    .delivery-photo {
      height: clamp(170px, 46vw, 210px);
      padding: 0;
    }

    .delivery-photo::before {
      content: none;
    }

    .lightbox {
      padding: 12px;
    }

    .lightbox-dialog {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      width: 100%;
      max-height: calc(100dvh - 24px);
      padding: 12px;
      border-radius: 20px;
    }

    .lightbox-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-height: 44px;
      margin-bottom: 8px;
    }

    .lightbox-close {
      position: static;
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
    }

    .lightbox-nav {
      display: none;
    }

    .lightbox-media,
    .lightbox-image {
      max-height: calc(100dvh - 100px);
    }

    .features,
    .intent-grid,
    .trust-compact-grid,
    .work-steps-grid,
    .broker-home-grid,
    .hero-metrics {
      grid-template-columns: minmax(0, 1fr);
    }

    /* DaMiOne numerals have a wider right side-bearing on narrow screens.
       The full-card layer stays geometrically centred; this compensates only
       the visible numeral ink. */
    .work-step-card .work-step-number {
      padding-inline-start: .08em;
    }

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

    .buy-intent-grid h2 {
      white-space: normal;
    }

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

    .sectioned-prose,
    .calculator-guide-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .topic-case-grid,
    .features.topic-model-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topic-model-card {
      flex-basis: 145px;
    }

    :where(.hero-title, .hero h1, .calculator h1, .lead-copy h2) {
      width: 100%;
      max-width: none;
      white-space: normal;
      text-wrap: pretty;
    }

    .lead-copy h2 {
      font-size: clamp(1.55rem, 7.6vw, 2rem);
      line-height: .98;
    }

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

    .calculator-grid :where(
      .calc-country,
      .calc-brand,
      .calc-model,
      .calc-variant,
      .calc-year,
      .calc-engine,
      .calc-volume,
      .calc-power,
      .calc-price,
      .calc-import,
      .calc-submit
    ) {
      grid-column: 1 / -1;
    }

    .breadcrumbs {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
    }
  }

  @media (hover: none), (pointer: coarse) {
    footer.footer .footer-messenger-button:hover,
    footer.footer .footer-messenger-button:focus,
    footer.footer .footer-messenger-button:focus-visible {
      border-color: rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .07);
      box-shadow: none;
      transform: none;
    }

    footer.footer .footer-messenger-button:hover .messenger-icon,
    footer.footer .footer-messenger-button:focus .messenger-icon,
    footer.footer .footer-messenger-button:focus-visible .messenger-icon {
      color: rgba(244, 244, 241, .92);
      filter: none;
    }

    footer.footer .footer-messenger-button.is-flashing .messenger-icon {
      animation: messenger-icon-flash 360ms ease-out;
    }
  }

  @media (max-width: 360px) {
    .topic-case-grid,
    .features.topic-model-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .topic-model-card {
      flex-basis: 100%;
    }
  }

  @keyframes messenger-icon-flash {
    0% { filter: none; transform: scale(1); }
    42% { filter: drop-shadow(0 0 11px currentColor); transform: scale(1.16); }
    100% { filter: none; transform: scale(1); }
  }

  /* Authoritative content-page template contract. Mixed legacy/CMS markup is
     normalised by `sectioned_prose`; these rules keep every resulting block on
     the same rails and rhythm instead of relying on page-specific patches. */
  body {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }

  body :where(
    p,
    li,
    dt,
    dd,
    label,
    summary,
    .breadcrumbs,
    .button
  ) {
    -webkit-font-smoothing: auto;
    text-shadow: none;
    filter: none;
  }

  body:not([data-page-type="home"]) .breadcrumbs {
    overflow: visible;
    padding-inline-start: .18em;
  }

  body:not([data-page-type="home"]) .wrap > .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: var(--layout-section-gap);
  }

  body:not([data-page-type="home"]) .wrap > .hero > :where(.eyebrow, h1, p, .button) {
    margin-block: 0;
  }

  body:not([data-page-type="home"]) .wrap > .hero > .button {
    margin-top: 2px;
    justify-self: start;
  }

  /* Transparent grouping sections must not create a second horizontal rail. */
  body:not([data-page-type="home"]) .wrap > .layout-section:not(.card):not(.country-route-panel),
  body:not([data-page-type="home"]) .wrap > .sectioned-prose {
    padding-inline: 0;
  }

  /* Catalog and model-page photography is documentary content: show the whole frame. */
  .model-card-media img,
  .model-related-card img,
  .delivery-proof-card > img,
  .delivery-proof-thumbs img,
  .model-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Model cards use every photo attached to the model or its real deliveries. */
  .model-card-gallery {
    position: relative;
  }

  .model-card-gallery-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .model-card-gallery-track::-webkit-scrollbar {
    display: none;
  }

  .model-card-gallery-slide {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .model-card-gallery-nav {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(8, 8, 8, .86);
    font-size: .75rem;
    line-height: 1;
    transform: translateY(-50%);
  }

  .model-card-gallery-prev { left: 8px; }
  .model-card-gallery-next { right: 8px; }

  .model-card-gallery-counter {
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(8, 8, 8, .82);
    color: rgba(250, 250, 248, .92);
    font-size: .68rem;
    line-height: 1;
    pointer-events: none;
  }

  .model-hero-media[data-model-gallery] .model-hero-image {
    cursor: grab;
    touch-action: pan-y;
  }

  .delivery-city-scroller {
    min-width: 0;
    width: 100%;
  }

  .delivery-city-nav {
    display: none;
  }

  .model-hero-media > img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(70vh, 800px);
    margin-inline: auto;
    object-fit: contain;
    object-position: center;
  }

  .delivery-photo {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .buy-intent-grid .card,
  .powertrain-selection-card {
    min-height: var(--layout-control-height);
    padding: 10px 14px;
  }

  .buy-intent-grid h2,
  .powertrain-selection-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    margin: 0;
    text-align: center;
    line-height: 1.12;
  }

  .buy-intent-grid > .card,
  .features.powertrain-selection-grid > .powertrain-selection-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
  }

  .model-catalog-nav .country-route-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--layout-grid-gap);
    width: 100%;
  }

  .model-catalog-nav .country-route-card {
    display: grid;
    min-width: 0;
    min-height: var(--layout-control-height);
    place-items: center;
    padding: 10px 16px;
    text-align: center;
  }

  .model-catalog-nav .country-route-card span {
    width: 100%;
    text-align: center;
  }

  .delivery-city-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--layout-grid-gap);
  }

  .delivery-city-list > li {
    display: grid;
    min-width: 0;
    min-height: 38px;
    place-items: center;
    padding: 0;
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .delivery-city-list > li > a {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    place-items: center;
    padding: 7px 8px;
    color: inherit;
    line-height: inherit;
    text-align: center;
    text-decoration: none;
  }

  /* Six tracks produce three stable card columns. An incomplete final row
     keeps normal card width instead of enlarging one photo across the panel. */
  body:not([data-page-type="home"]) .features:not(.topic-model-grid):not(.powertrain-selection-grid),
  .sectioned-prose:not(.buy-page-prose) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
  }

  body:not([data-page-type="home"]) .features:not(.topic-model-grid):not(.powertrain-selection-grid) > *,
  .sectioned-prose:not(.buy-page-prose) > .prose-section {
    grid-column: span 2;
  }

  /* Model cards must never inherit the balancing rules used by prose cards. */
  body:not([data-page-type="home"]) .features:not(.topic-model-grid):not(.powertrain-selection-grid) > .model-card {
    grid-column: span 2;
    width: auto;
    max-width: 100%;
  }

  .sectioned-prose:not(.buy-page-prose) > .prose-section:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }

  .sectioned-prose:not(.buy-page-prose) > .prose-section:nth-last-child(2):nth-child(3n + 1),
  .sectioned-prose:not(.buy-page-prose) > .prose-section:last-child:nth-child(3n + 2) {
    grid-column: span 3;
  }

  .sectioned-prose:not(.buy-page-prose) > .prose-section {
    width: 100%;
    min-width: 0;
    height: 100%;
  }

  .sectioned-prose:not(.buy-page-prose) > .prose-section--wide {
    grid-column: span 2;
  }

  .sectioned-prose:not(.buy-page-prose) > .prose-section:nth-last-child(2):nth-child(3n + 1) {
    grid-column: span 3;
  }

  .sectioned-prose:not(.buy-page-prose) > .prose-section:last-child:not(.prose-section--wide) {
    grid-column: span 2;
  }

  .sectioned-prose:not(.buy-page-prose) > .prose-section:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }

  .sectioned-prose:not(.buy-page-prose) > .prose-section:last-child:nth-child(3n + 2) {
    grid-column: span 3;
  }

  .sectioned-prose > .prose-section > :where(h2, h3) + :where(p, ul, ol) {
    margin-top: 0;
  }

  .model-facts {
    display: grid;
    align-content: start;
    gap: var(--layout-control-gap);
  }

  .model-facts > :where(h2, dl, p) {
    margin: 0;
  }

  .layout-section > :where(h2, h3) + :where(p, ul, ol),
  .model-catalog-heading :where(h2, h3) + p {
    margin-top: 0;
  }

  .calculator-grid .calc-submit {
    align-self: stretch;
    display: grid;
    place-items: center;
    padding-top: 1.2em;
  }

  .calculator-grid .calc-submit .button {
    margin: 0;
  }

  .calculator-disclaimer {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin: 0;
    padding-block: 8px 2px;
    line-height: 1.35;
  }

  @media (max-width: 980px) {
    .delivery-city-list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body:not([data-page-type="home"]) .features:not(.topic-model-grid):not(.powertrain-selection-grid) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not([data-page-type="home"]) .features:not(.topic-model-grid):not(.powertrain-selection-grid) > *:nth-child(n):nth-child(n):nth-child(n) {
      grid-column: auto;
    }

    body:not([data-page-type="home"]) .features:not(.topic-model-grid):not(.powertrain-selection-grid) > .model-card {
      grid-column: auto;
    }

    .sectioned-prose:not(.buy-page-prose) {
      grid-template-columns: minmax(0, 1fr);
    }

    .sectioned-prose:not(.buy-page-prose) > .prose-section:nth-child(n):nth-child(n):nth-child(n),
    .sectioned-prose:not(.buy-page-prose) > .prose-section--wide:nth-child(n):nth-child(n):nth-child(n) {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 760px) {
    html.intro-active:not(.intro-revealing) body > :not(.intro-logo-screen) {
      visibility: hidden;
    }

    html.mobile-menu-open,
    html.mobile-menu-open body {
      overflow: hidden;
    }

    .site-header.menu-open,
    body[data-page-type="calculator"] .site-header.menu-open {
      position: fixed;
      inset: 12px 10px auto;
      z-index: 1000;
      width: calc(100% - 20px);
      max-width: calc(100% - 20px);
      max-height: calc(100dvh - 24px);
      margin: 0;
      overflow-x: hidden;
      overflow-y: auto;
      background: #080808;
      box-shadow: 0 18px 42px rgba(0, 0, 0, .72);
      overscroll-behavior: contain;
    }

    .site-header.menu-open::before {
      content: "";
      position: fixed;
      inset: -100vmax;
      z-index: -1;
      background: #050505;
      pointer-events: none;
    }

    .site-header.menu-open::after {
      content: none;
    }

    .site-header.menu-open .site-nav,
    .site-header.menu-open .site-nav a {
      background: #0b0b0b;
    }

    .hero .eyebrow::after {
      content: none;
    }

    body[data-page-type="home"] .hero h1,
    .hero.hero-single h1 {
      width: 100%;
      max-width: 100%;
      font-size: clamp(1.85rem, 9vw, 2.45rem);
      line-height: .98;
      text-wrap: balance;
    }

    .hero.hero-single .hero-title span {
      white-space: nowrap;
    }

    :where(.button, button, .buy-intent-grid h2, .powertrain-selection-card h3) {
      text-align: center;
      text-wrap: balance;
    }

    .buy-intent-grid h2,
    .powertrain-selection-card h3,
    .country-route-card span {
      margin-inline: 0;
      padding-inline: 0;
    }

    .sectioned-prose > :is(.prose-section, section) {
      padding: 16px 18px;
    }

    .sectioned-prose > :is(.prose-section, section),
    .sectioned-prose > :is(.prose-section, section) > * {
      text-align: left;
    }

    /* Footer metadata remains a single service row on mobile. */
    footer.footer.footer-modern .rates-card-head {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      text-align: left;
    }

    footer.footer.footer-modern .rates-title {
      min-width: 0;
      font-size: .8rem;
      white-space: nowrap;
    }

    footer.footer.footer-modern .rates-source {
      flex: 0 0 auto;
      margin-left: auto;
      font-size: .66rem;
      line-height: 1.2;
      text-align: right;
      white-space: nowrap;
    }

    footer.footer.footer-modern .footer-company,
    footer.footer.footer-modern .footer-company > * {
      align-items: flex-start;
      text-align: left;
    }

    footer.footer.footer-modern .footer-company h2 {
      font-size: .8rem;
    }

    footer.footer.footer-modern .footer-company > span {
      font-size: .72rem;
      line-height: 1.35;
    }

    .calculator-disclaimer {
      display: block;
      width: 100%;
      min-height: 0;
      padding: 0;
      font-size: clamp(10px, 2.8vw, 11.5px);
      line-height: 1.32;
      text-align: left;
      text-wrap: balance;
    }

    body:not([data-page-type="home"]) .breadcrumbs {
      overflow-x: auto;
    }

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

    .calculator-grid > .calc-field {
      grid-column: 1 / -1;
      width: 100%;
      min-width: 0;
    }

    .calculator-grid .calc-field > :where(input, select),
    .calculator-grid .price-currency-control {
      width: 100%;
      min-width: 0;
    }

    .sectioned-prose.buy-page-prose {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    .sectioned-prose.buy-page-prose > .prose-section {
      grid-column: 1 / -1;
      width: 100%;
      min-width: 0;
    }

    .calculator-grid .calc-submit {
      padding-top: 0;
    }

    .calculator-grid .calc-submit .button {
      width: 100%;
    }
  }

  /* Fixed overscan avoids dynamic-viewport rounding during Safari toolbar
     changes. Unlike 100lvh, opposing insets keep every edge covered without
     depending on which viewport unit the browser resolves for that frame. */
  html.intro-active,
  html.intro-active body {
    overflow: hidden;
    background: #020202;
  }

  html.intro-active .intro-logo-screen {
    inset: -32px;
    width: auto;
    height: auto;
    min-height: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
    box-shadow: 0 0 0 100vmax #020202;
  }

  @media (max-width: 520px) {
    body:not([data-page-type="home"]) .features:not(.topic-model-grid):not(.powertrain-selection-grid) {
      grid-template-columns: minmax(0, 1fr);
    }

    .delivery-city-scroller {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) 30px;
      align-items: stretch;
      gap: 6px;
    }

    .delivery-city-nav {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      min-width: 30px;
      min-height: 76px;
      height: auto;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 15px;
      background: rgba(255, 255, 255, .045);
      font-size: .7rem;
      line-height: 1;
    }

    .delivery-city-list {
      grid-column: 2;
      grid-row: 1;
      grid-auto-flow: column;
      grid-template-columns: none;
      grid-template-rows: repeat(2, minmax(34px, auto));
      grid-auto-columns: calc((100% - var(--layout-grid-gap)) / 2);
      justify-content: start;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 4px;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pan-y;
    }

    .delivery-city-prev { grid-column: 1; grid-row: 1; }
    .delivery-city-next { grid-column: 3; grid-row: 1; }

    .delivery-city-list::-webkit-scrollbar {
      display: none;
    }

    .delivery-city-list > li {
      min-height: 34px;
      padding: 0;
      font-size: clamp(.72rem, 3.5vw, .88rem);
      scroll-snap-align: start;
    }

    .delivery-city-list > li > a {
      min-height: 34px;
      padding: 5px 9px;
    }

    .model-catalog-nav .country-route-grid {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      gap: 6px;
    }

    .model-catalog-nav .country-route-card {
      min-width: 0;
      padding-inline: 6px;
    }

    .model-catalog-nav .country-route-card span {
      font-size: clamp(.78rem, 4.2vw, 1rem);
      white-space: nowrap;
    }
  }

  /* Final shared mobile component contract. These are component-level rules:
     every CMS route uses the same header, breadcrumbs, market selector,
     city scroller and filter controls. */
  @media (max-width: 760px) {
    html.mobile-menu-open,
    html.mobile-menu-open body {
      overflow-x: clip;
      overflow-y: auto;
    }

    .site-header.menu-open,
    body[data-page-type="calculator"] .site-header.menu-open {
      position: relative;
      inset: auto;
      z-index: 60;
      width: calc(100% - 32px);
      max-width: calc(100% - 32px);
      max-height: none;
      margin: 16px auto 0;
      overflow: clip;
      row-gap: 12px;
    }

    .site-header.menu-open::before,
    .site-header.menu-open::after {
      content: none;
    }

    .site-header.menu-open .site-nav {
      position: static;
      clear: both;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, .12);
    }

    body:not([data-page-type="home"]) .breadcrumbs {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 2px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    body:not([data-page-type="home"]) .breadcrumbs::-webkit-scrollbar {
      display: none;
    }

    body:not([data-page-type="home"]) .breadcrumbs ol {
      display: flex;
      flex-wrap: nowrap;
      width: max-content;
      min-width: 100%;
    }

    body:not([data-page-type="home"]) .breadcrumbs li,
    body:not([data-page-type="home"]) .breadcrumbs a,
    body:not([data-page-type="home"]) .breadcrumbs span {
      flex: 0 0 auto;
      min-width: max-content;
      white-space: nowrap;
      word-break: normal;
      overflow-wrap: normal;
    }

  }

  @media (max-width: 520px) {
    .delivery-city-nav {
      position: relative;
      align-self: stretch;
      height: 100%;
      min-height: 100%;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      appearance: none;
      overflow: visible;
    }

    /* Keep the city block compact while making each invisible tap target twice
       as tall. The controls no longer read as borders around the city list. */
    .delivery-city-nav::before {
      content: "";
      position: absolute;
      inset-block: -50%;
      inset-inline: 0;
    }

    .delivery-city-nav > span {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      display: grid;
      place-items: center;
      margin: 0;
      color: rgba(255, 255, 255, .96);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1.08rem;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.16em;
      text-shadow: 0 1px 0 #fff, 0 0 9px rgba(255, 255, 255, .38);
      transform: translate(-50%, -50%) scaleY(2.25);
      transform-origin: center;
      pointer-events: none;
    }
  }

  /* Delivery routes retain a readable font size. Only labels that actually
     overflow receive a gentle, reversible marquee from ui-interactions.js. */
  .delivery-meta > :is(.delivery-route-link, span).delivery-route-marquee {
    display: block;
    min-width: 0;
    padding-inline: 4px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .delivery-route-marquee-text {
    display: inline-block;
    min-width: max-content;
    transform: translateX(0);
  }

  .delivery-route-marquee.is-overflowing .delivery-route-marquee-text {
    animation: delivery-route-marquee var(--delivery-route-duration, 5s) ease-in-out 1s infinite alternate;
    will-change: transform;
  }

  .delivery-route-marquee.is-overflowing:is(:hover, :focus-visible) .delivery-route-marquee-text {
    animation-play-state: paused;
  }

  @keyframes delivery-route-marquee {
    0%, 14% { transform: translateX(0); }
    86%, 100% { transform: translateX(calc(-1 * var(--delivery-route-shift, 0px))); }
  }

  /* The model header uses the available desktop width as a real composition:
     useful copy on the left and a contained, uncropped gallery on the right. */
  .model-hero-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: clamp(300px, 42vw, 520px);
    min-width: 0;
    overflow: hidden;
    border-radius: calc(var(--layout-card-radius) - 4px);
    background: #080808;
    isolation: isolate;
  }

  .model-hero-stage > .model-hero-backdrop {
    position: absolute;
    inset: -24px;
    z-index: -1;
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    max-width: none;
    object-fit: cover;
    opacity: .22;
    filter: blur(18px) saturate(.82);
    transform: scale(1.04);
  }

  .model-hero-stage > .model-hero-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .model-hero-media {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-self: stretch;
    min-width: 0;
    padding: 10px;
    gap: 10px;
  }

  .model-hero-media .model-gallery-thumbs {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  @media (min-width: 761px) {
    body[data-page-type="model"] .wrap > .hero {
      display: grid;
      grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
      align-items: stretch;
      gap: var(--layout-section-gap);
    }

    body[data-page-type="model"] .wrap > .hero > .model-hero-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      min-width: 0;
      padding: clamp(6px, 1.2vw, 18px);
    }
  }

  @media (max-width: 760px) {
    body[data-page-type="model"] .wrap > .hero {
      grid-template-columns: minmax(0, 1fr);
    }

    .model-hero-stage {
      height: clamp(280px, 92vw, 400px);
    }

    /* The mobile navigation is a wide popover. It does not participate in
       header layout, so opening it cannot enlarge or move the header. */
    .site-header.menu-open,
    body[data-page-type="calculator"] .site-header.menu-open {
      position: relative;
      inset: auto;
      width: calc(100% - 32px);
      max-width: calc(100% - 32px);
      max-height: none;
      margin: 16px auto 0;
      overflow: visible;
      row-gap: 0;
      transform: none;
    }

    .site-header .site-nav,
    body[data-page-type="calculator"] .site-header .site-nav {
      position: absolute;
      grid-area: auto;
      grid-column: auto;
      grid-row: auto;
      top: calc(100% + 8px);
      right: 0;
      left: auto;
      z-index: 1002;
      display: grid;
      width: min(420px, calc(100vw - 32px));
      min-width: 0;
      max-width: calc(100vw - 32px);
      max-height: calc(100dvh - 120px);
      margin: 0;
      padding: 8px;
      gap: 6px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--layout-card-radius);
      background: rgba(8, 8, 8, .97);
      box-shadow: 0 18px 42px rgba(0, 0, 0, .72);
      backdrop-filter: blur(18px);
      overflow-x: hidden;
      overflow-y: auto;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-8px) scale(.96, .86);
      transform-origin: top right;
      clip-path: inset(0 0 100% 0 round var(--layout-card-radius));
      transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(.2, .8, .2, 1),
        clip-path 220ms cubic-bezier(.2, .8, .2, 1),
        visibility 0s linear 220ms;
    }

    .site-header.menu-open .site-nav,
    body[data-page-type="calculator"] .site-header.menu-open .site-nav {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      left: auto;
      width: min(420px, calc(100vw - 32px));
      min-width: 0;
      max-width: calc(100vw - 32px);
      margin: 0;
      padding: 8px;
      border-top: 1px solid rgba(255, 255, 255, .16);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
      clip-path: inset(0 0 0 0 round var(--layout-card-radius));
      transition-delay: 0s;
    }

    .site-header .site-nav a,
    body[data-page-type="calculator"] .site-header .site-nav a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 0;
      padding: 10px 12px;
      font-family: var(--ui-font);
      font-size: .88rem;
      font-weight: 400;
      line-height: 1.1;
      text-align: center;
      white-space: normal;
    }

    /* Compact mobile footer rhythm. Desktop spacing remains unchanged. */
    footer.footer.footer-modern .footer-contacts,
    footer.footer.footer-modern .footer-company,
    footer.footer.footer-modern .rates-card {
      row-gap: 5px;
    }

    footer.footer.footer-modern .footer-contacts > :is(a, span) {
      font-size: .8rem;
      line-height: 1.25;
    }

    footer.footer.footer-modern .footer-company > span {
      font-size: .68rem;
      line-height: 1.25;
    }

    footer.footer.footer-modern .footer-seo-links {
      gap: 5px 10px;
      margin-top: 5px;
    }

    footer.footer.footer-modern .footer-seo-links > a {
      font-size: .75rem;
      line-height: 1.2;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header .site-nav,
    body[data-page-type="calculator"] .site-header .site-nav {
      transition: none;
    }

    .delivery-route-marquee.is-overflowing .delivery-route-marquee-text {
      animation: none;
      will-change: auto;
    }
  }
}