@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;
    top: 50%;
    left: 50%;
    display: block;
    box-sizing: border-box;
    width: max-content;
    min-width: 0;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(244, 244, 241, .18);
    font-size: clamp(5.4rem, 9vw, 9rem);
    padding: 0;
    line-height: .74;
    letter-spacing: -.08em;
    text-align: center;
    transform: translate(-50%, -50%);
    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);
  }

  .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);
    }

    .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: 7px 8px;
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* 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: 5px 9px;
      font-size: clamp(.72rem, 3.5vw, .88rem);
      scroll-snap-align: start;
    }

    .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;
    }
  }
}