@layer legacy, components, system;

@layer components {
/* Final UI contract. Keep repeated components here instead of page-specific files. */
:root {
  --ui-base-size: 16px;
  --ui-helper-size: 13px;
  --ui-font: "CruinnRegular", "Cruinn", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-display-font: "DaMiOne", "Cruinn", Inter, sans-serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--ui-font);
}

/* Use the loaded UI face consistently for small headings on every template.
 * Several page styles inherited the undefined `Cruinn` family, which made the
 * browser substitute a different face and rasterise the first glyph against
 * the line box edge.  Visible overflow preserves the glyph ink without moving
 * the text or changing panel geometry. */
.eyebrow {
  font-family: var(--ui-font);
  overflow: visible;
}

body {
  font-size: var(--ui-base-size);
}

/* The two-column request panel is content-driven. On desktop the form is
 * anchored to the shared lower rail requested in the design; on compact
 * screens the columns stack naturally. Keep this as the only lead alignment
 * contract so legacy page rules cannot alternate between top and bottom. */
.lead:has(> .lead-copy) {
  align-items: end;
  align-content: end;
}

.lead:has(> .lead-copy) > .lead-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: stretch;
  align-content: start;
  gap: var(--site-section-gap, 14px);
  height: auto;
}

.lead:has(> .lead-copy) > .lead-copy > * {
  margin-block: 0;
}

.lead:has(> .lead-copy) > .lead-form {
  align-self: end;
  height: auto;
}

.site-notice {
  position: fixed;
  z-index: 11000;
  left: 50%;
  bottom: var(--site-notice-bottom, max(24px, env(safe-area-inset-bottom)));
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(430px, calc(100vw - 28px));
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)),
    rgba(5, 5, 5, .97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 20px 52px rgba(0, 0, 0, .56);
  color: rgba(244, 244, 241, .96);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .24s ease, transform .24s ease;
}

.site-notice[hidden] {
  display: none;
}

.site-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.site-notice__icon {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}

.site-notice__icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 7px;
  height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.site-notice__copy,
.site-notice__title,
.site-notice__message {
  display: block;
  min-width: 0;
}

.site-notice__copy {
  display: grid;
  align-content: center;
  gap: 2px;
}

.site-notice__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.site-notice__message {
  color: rgba(244, 244, 241, .68);
  font-size: 13px;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .site-notice {
    transition: none;
  }
}

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

/*
 * Shared content-driven panel contract.
 * Text may increase a card's height, but it must never increase its width or
 * overlap the following section.
 */
:where(
  .hero,
  .hero-shell,
  .hero-copy,
  .hero-side,
  .hero-note,
  .hero-metrics,
  .hero-metrics article,
  .trust-compact,
  .trust-compact-grid,
  .trust-compact-card,
  .work-steps,
  .work-steps-grid,
  .work-step-card,
  .lead,
  .lead-copy,
  .lead-form,
  .card,
  .calculator,
  .prose,
  .legal-document,
  .intent-grid,
  .intent-grid > *,
  .footer-card
) {
  min-width: 0;
  max-width: 100%;
  height: auto;
}

:where(
  .hero,
  .hero-note,
  .hero-metrics article,
  .trust-compact,
  .trust-compact-card,
  .work-steps,
  .work-step-card,
  .lead,
  .lead-form,
  .lead-form-head,
  .card,
  .calculator,
  .prose,
  .legal-document,
  .intent-grid > *
) {
  padding: var(--site-panel-padding, 14px);
}

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

:where(
  .hero,
  .hero-note,
  .hero-metrics article,
  .trust-compact-card,
  .work-step-card,
  .lead,
  .card,
  .calculator,
  .prose,
  .legal-document,
  .intent-grid > *,
  .footer-card
) :is(h1, h2, h3, h4, p, strong, span, a, li, dt, dd, label) {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Hover/reveal feedback must not move panels and change perceived gaps. */
:where(
  .hero-note,
  .hero-metrics article,
  .trust-compact-card,
  .work-step-card,
  .card
):hover {
  transform: none;
}

/* Main hero: equal outer padding and content-driven rows. */
.hero.hero-single {
  min-height: 0;
  align-items: stretch;
}

.hero.hero-single .hero-shell {
  width: 100%;
  gap: var(--site-section-gap, 14px);
  align-items: stretch;
}

.hero.hero-single .hero-copy {
  display: flex;
  flex-direction: column;
}

.hero.hero-single .hero-side {
  align-self: end;
  align-content: normal;
  gap: 10px;
  margin-top: auto;
}

.hero.hero-single .hero-note {
  min-height: 156px;
  justify-content: flex-end;
}

.hero.hero-single .hero-metrics article {
  min-height: 126px;
  justify-content: flex-start;
}

.hero.hero-single .hero-note-label {
  margin-bottom: 10px;
}

.hero.hero-single .hero-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.hero.hero-single .hero-metrics article {
  gap: 6px;
}

.hero.hero-single .hero-metrics strong {
  margin-bottom: 4px;
}

.hero.hero-single .hero-metrics strong,
.hero.hero-single .hero-metrics span {
  display: block;
  width: auto;
  max-width: 100%;
  white-space: normal;
}

/* Primary markets use the original two-row grid; retired markets stay absent. */
.hero.hero-single .hero-status-line {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 820px;
}

.hero.hero-single .hero-status-row {
  display: grid;
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}

.hero.hero-single .hero-status-row-countries {
  grid-template-columns: 1.05fr .82fr 1fr 1fr 1fr;
}

.hero.hero-single .hero-status-row-services {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  width: 100%;
  max-width: 560px;
}

.hero.hero-single .hero-status-line span {
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  height: auto;
  padding: 8px 10px;
  font-size: .86rem;
  line-height: 1.15;
  letter-spacing: .06em;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

/* A textarea may grow only downwards and must never overlap an adjacent column. */
textarea,
.lead textarea,
.lead-form textarea {
  display: block;
  max-width: 100%;
  min-width: 0;
  resize: vertical;
}

.lead-turnstile {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.lead-message-field {
  min-width: 0;
  overflow: hidden;
}

.form-validation-tip {
  position: absolute;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 20px);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
    #050505;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 14px 34px rgba(0, 0, 0, .42);
  color: rgba(255, 255, 255, .92);
  font: 500 14px/1.35 var(--ui-font);
  pointer-events: none;
}

.form-validation-tip[hidden] {
  display: none;
}

.form-validation-tip::before {
  content: "";
  position: absolute;
  left: var(--validation-tip-arrow-left, 18px);
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-right: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  background: #050505;
  transform: rotate(45deg);
}

.form-validation-tip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font: 800 16px/1 var(--ui-font);
}

.form-validation-tip__text {
  min-width: 0;
}

/* Browser autofill must preserve the dark visual language. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(244, 244, 241, .94);
  caret-color: #fff;
  box-shadow: 0 0 0 1000px #171717 inset;
  -webkit-box-shadow: 0 0 0 1000px #171717 inset;
  transition: background-color 99999s ease-out 0s;
}

.lead label,
.calculator label,
.lead-form label > span {
  font-family: var(--ui-display-font);
  font-weight: 400;
}

.lead h2 {
  font-family: var(--ui-display-font);
  font-size: clamp(2rem, 3.6vw, 2.88rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .01em;
}

.lead label,
.lead-form label > span {
  color: rgba(244, 244, 241, .82);
  font-size: .95rem;
  line-height: 1.2;
}

input,
select,
textarea,
input::placeholder,
textarea::placeholder,
.helptext,
.consent-note,
.policy-note {
  font-family: var(--ui-font);
}

input::placeholder,
textarea::placeholder {
  color: rgba(244, 244, 241, .46);
  font-size: 1rem;
  font-weight: 400;
}

.helptext {
  font-size: var(--ui-helper-size);
}

.policy-note a,
.policy-consent a,
.consent-note a,
.lead .consent-note a,
.legal-document a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .46);
}

.card > :first-child,
.hero > :first-child,
.prose > :first-child,
.legal-document > :first-child,
.lead > :first-child,
.calculator > :first-child {
  margin-top: 0;
}

.card > :last-child,
.hero > :last-child,
.prose > :last-child,
.legal-document > :last-child,
.lead > :last-child,
.calculator > :last-child {
  margin-bottom: 0;
}

.wrap .card {
  padding: var(--site-panel-padding, 14px);
}

.wrap .context-link-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.wrap .context-link-card strong,
.wrap .context-link-card span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.wrap .context-link-card strong {
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wrap .context-link-card span {
  color: var(--muted, rgba(244, 244, 241, .68));
  line-height: 1.4;
}

.wrap .intent-grid {
  gap: var(--site-section-gap, 14px);
}

/* Decorative arcs stay inside CMS hero panels and cannot widen the page. */
.wrap > .hero {
  overflow: clip;
}

.wrap > .hero::before {
  content: none;
  display: none;
}

.wrap > .hero > p:not(.eyebrow) {
  margin-bottom: var(--site-section-gap, 14px);
}

.wrap > .hero > p:not(.eyebrow) + .button {
  margin-top: 0;
}

.trust-compact-grid,
.work-steps-grid,
.intent-grid {
  align-items: stretch;
  gap: 10px;
}

.trust-compact-card,
.work-step-card,
.intent-grid > * {
  align-self: stretch;
  min-height: 0;
}

.lead-form-head span {
  white-space: normal;
}

/* CMS model catalogue and detail pages. */
.model-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.model-card-media,
.model-hero-media,
.model-related-card img {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  background: #080808;
}

.model-card-media {
  aspect-ratio: 12 / 7;
  margin: 0;
}

.model-card-media img,
.model-hero-media img,
.model-related-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.model-card h3,
.model-card p {
  margin: 0;
}

.model-card-summary {
  color: rgba(255, 255, 255, .72);
  line-height: 1.4;
}

.model-card-specs {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.model-card-specs > div {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  min-width: 0;
}

.model-card-specs dt,
.model-card-specs dd {
  min-width: 0;
  margin: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.model-card-specs dt {
  color: rgba(255, 255, 255, .56);
}

.model-card-specs dd {
  color: rgba(255, 255, 255, .88);
  text-align: right;
}

.model-card .button {
  align-self: flex-start;
  margin-top: auto;
}

.wrap > .model-index-list {
  margin-top: calc(var(--site-section-gap, 14px) * 2);
}

.model-catalog-nav .country-route-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.model-catalog-group {
  scroll-margin-top: 24px;
}

.model-catalog-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.model-catalog-heading > * {
  min-width: 0;
}

.model-catalog-heading h2,
.model-catalog-heading p {
  margin: 0;
}

.model-catalog-heading p {
  margin-top: 10px;
  color: rgba(255, 255, 255, .72);
}

.model-catalog-heading .button {
  flex: 0 0 auto;
}

body[data-page-type="model"] .wrap > .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
  gap: 14px;
  align-items: center;
}

.model-hero-copy {
  min-width: 0;
}

.model-hero-media {
  margin: 0;
}

.model-hero-media img {
  aspect-ratio: 23 / 14;
}

.model-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.model-gallery-thumb {
  flex: 0 0 84px;
  aspect-ratio: 3 / 2;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
  cursor: pointer;
  opacity: .72;
  transition: opacity 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.model-gallery-thumb:hover,
.model-gallery-thumb.is-active {
  opacity: 1;
  border-color: rgba(255, 255, 255, .34);
}

.model-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.model-hero-media figcaption {
  margin: 0;
  padding: 8px 10px;
  color: rgba(244, 244, 241, .55);
  font-size: var(--ui-helper-size);
  line-height: 1.35;
}

.model-related-card {
  display: grid;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.model-related-card img {
  aspect-ratio: 12 / 7;
}

/* The footer below is the only footer geometry used by every route. */
footer.footer.footer-modern {
  width: min(calc(var(--app-vw, 100vw) - 32px), 1240px);
  margin: var(--site-section-gap, 14px) auto 0;
  padding: 0 0 14px;
}

footer.footer.footer-modern .footer-layout.footer-layout-compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 30px;
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(20px);
}

footer.footer.footer-modern .footer-layout > .footer-card,
footer.footer.footer-modern .footer-layout > .footer-card.rates-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 24px;
  background: rgba(0, 0, 0, .18);
}

footer.footer.footer-modern .footer-card h2,
footer.footer.footer-modern .rates-title {
  margin: 0;
  color: rgba(244, 244, 241, .95);
  font-family: var(--ui-display-font);
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
}

footer.footer.footer-modern .footer-contacts,
footer.footer.footer-modern .footer-company {
  gap: 7px;
  justify-content: flex-start;
}

footer.footer.footer-modern .footer-contacts > a,
footer.footer.footer-modern .footer-contacts > span,
footer.footer.footer-modern .footer-company > span {
  color: rgba(244, 244, 241, .72);
  font-family: var(--ui-font);
  font-size: .86rem;
  line-height: 1.4;
}

footer.footer.footer-modern .rates-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

footer.footer.footer-modern .rates-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}

footer.footer.footer-modern .rates-source {
  font-size: .72rem;
  white-space: nowrap;
}

footer.footer.footer-modern .rates-source-block {
  display: grid;
  flex: 1 1 auto;
  align-content: center;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border-radius: 20px;
}

footer.footer.footer-modern .rates-source-warning {
  justify-items: center;
  color: rgba(244, 244, 241, .72);
  font-size: .82rem;
  line-height: 1.4;
  text-align: center;
  overflow: hidden;
}

footer.footer.footer-modern .rates-source-warning span {
  display: block;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

footer.footer.footer-modern .rates-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 8px;
}

footer.footer.footer-modern .rate-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  justify-content: normal;
  min-height: 28px;
  padding: 5px 9px;
  gap: 4px;
  font-family: var(--ui-font);
  font-size: .8rem;
  line-height: 1;
  overflow: hidden;
}

footer.footer.footer-modern .rate-row b {
  font-size: .8rem;
  flex: 0 0 auto;
}

footer.footer.footer-modern .rate-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

footer.footer.footer-modern .rate-delta {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  min-height: 18px;
  padding: 2px 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-family: var(--ui-font);
  font-size: .78rem;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(244, 244, 241, .9);
  white-space: nowrap;
  transform: translateY(-.04em);
}

footer.footer.footer-modern .rate-delta-up {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .105);
  color: #fff;
}

footer.footer.footer-modern .rate-delta-down {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
  color: rgba(244, 244, 241, .72);
}

footer.footer.footer-modern .footer-company {
  align-items: stretch;
  justify-content: flex-start;
  text-align: right;
}

footer.footer.footer-modern .footer-company > * {
  align-self: stretch;
  width: auto;
  max-width: none;
  text-align: right;
}

footer.footer.footer-modern .footer-seo-links {
  margin: 10px auto 0;
}

/* Currency code and symbol have identical optical centering. */
.price-currency-control select {
  padding: 0 34px 0 16px;
  text-align: center;
  text-align-last: center;
  line-height: 1.2;
}

/* Compact calculator geometry shared by the calculator and all embedded copies. */
.calculator-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.calculator-grid .calc-country { grid-column: span 3; }
.calculator-grid .calc-brand { grid-column: span 4; }
.calculator-grid .calc-model { grid-column: span 5; }
.calculator-grid .calc-variant { grid-column: 1 / -1; }
.calculator-grid .calc-year { grid-column: span 3; }
.calculator-grid .calc-engine { grid-column: span 3; }
.calculator-grid .calc-volume { grid-column: span 3; }
.calculator-grid .calc-power { grid-column: span 3; }
.calculator-grid.is-electric .calc-year,
.calculator-grid.is-electric .calc-engine,
.calculator-grid.is-electric .calc-power { grid-column: span 4; }
.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 .button {
  width: 100%;
  min-height: 52px;
  margin: 0;
}

.calculator-disclaimer {
  max-width: none;
  margin: 10px 0 0;
  color: rgba(244, 244, 241, .58);
  font-size: var(--ui-helper-size);
  line-height: 1.45;
}

/* Reuse the full footer lead form in a dedicated calculator dialog. */
html.has-calculator-contact-dialog {
  overflow: hidden;
}

.calculator-contact-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100vw - 28px));
  max-width: 900px;
  max-height: min(88vh, 760px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 24px;
  color: rgba(244, 244, 241, .96);
  background: transparent;
  overflow: visible;
}

.calculator-contact-dialog::backdrop {
  background: rgba(0, 0, 0, .76);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.calculator-contact-dialog__panel {
  position: relative;
  max-height: min(88vh, 760px);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.calculator-contact-dialog__close {
  position: absolute;
  z-index: 2;
  top: -58px;
  right: -58px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: transparent;
  background: rgba(255, 255, 255, .07);
  font-size: 0;
  cursor: pointer;
}

.calculator-contact-dialog__close::before,
.calculator-contact-dialog__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  transform-origin: center;
}

.calculator-contact-dialog__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.calculator-contact-dialog__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.calculator-contact-dialog__close:hover,
.calculator-contact-dialog__close:focus-visible {
  background: rgba(255, 255, 255, .14);
}

.calculator-contact-dialog .lead,
body[data-page-type="calculator"] .calculator-contact-dialog .lead {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 18px;
  border-radius: 22px;
  background: rgba(10, 10, 10, .96);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .58);
}

.calculator-contact-dialog .lead h2 {
  padding-right: 46px;
}

.calculator-contact-dialog .lead form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.calculator-contact-dialog .lead label,
.calculator-contact-dialog .lead input,
.calculator-contact-dialog .lead textarea {
  min-width: 0;
  width: 100%;
}

.calculator-contact-dialog .lead-message-field,
.calculator-contact-dialog .lead-actions,
.calculator-contact-dialog .form-status {
  grid-column: 1 / -1;
}

.calculator-contact-dialog .lead-actions {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, .58fr);
  align-items: center;
  gap: 10px;
}

.calculator-contact-dialog .lead-actions .button {
  width: 100%;
  margin: 0;
}

.calculator-contact-dialog .lead-actions .consent-note {
  margin: 0;
  text-align: left;
}

.calc-field {
  position: relative;
  min-width: 0;
}

/* Keep one predictable control inset.  The text-indent workaround previously
   moved the value instead of fixing the inconsistent font substitution. */
.calculator-grid .calc-field > input,
.calculator-grid .calc-field > select,
.calculator-grid .price-currency-control > input {
  padding-left: 20px;
  text-indent: 0;
}

.calculator-grid .calc-field > select {
  padding-right: 42px;
}

/* DaMiOne does not contain a reliable superscript-three glyph on every
   platform.  Keep the unit readable without changing the optical label style. */
.calc-volume label sup {
  display: inline-block;
  margin-left: 1px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .68em;
  font-weight: 700;
  line-height: 0;
  vertical-align: .48em;
}

select,
select option {
  color-scheme: dark;
}

select option {
  color: rgba(244, 244, 241, .94);
  background: #111;
}

/* Unified dropdown caret: visible in the normal state on every page.
   Older rules in site.css add the icon only on hover/focus, so this final
   contract keeps select-like controls visually consistent without geometry
   changes on hover. */
:root {
  --automost-select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M2 2L7 7L12 2' stroke='%23f4f4f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

select,
.header-city select,
body[data-page-type="calculator"] .header-city select,
input.choice-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image:
    var(--automost-select-caret),
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  background-position: right 16px center, 0 0;
  background-repeat: no-repeat, no-repeat;
  background-size: 14px 9px, 100% 100%;
}

select:hover,
select:focus,
select:focus-visible,
.header-city select:hover,
.header-city select:focus,
.header-city select:focus-visible,
body[data-page-type="calculator"] .header-city select:hover,
body[data-page-type="calculator"] .header-city select:focus,
body[data-page-type="calculator"] .header-city select:focus-visible,
input.choice-control:hover,
input.choice-control:focus,
input.choice-control:focus-visible {
  background-image:
    var(--automost-select-caret),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
  background-position: right 16px center, 0 0;
  background-repeat: no-repeat, no-repeat;
  background-size: 14px 9px, 100% 100%;
}

select::-ms-expand {
  display: none;
}

.autocomplete-input {
  padding-right: 42px;
  background-image:
    var(--automost-select-caret),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  background-position: right 16px center, 0 0;
  background-repeat: no-repeat;
  background-size: 14px 9px, auto;
}

.autocomplete-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: grid;
  max-height: 260px;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(8, 8, 8, .98);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .48);
  backdrop-filter: blur(18px);
}

.autocomplete-menu[hidden] {
  display: none;
}

.autocomplete-option {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: rgba(244, 244, 241, .86);
  font: 0.92rem/1.2 var(--ui-font);
  text-align: left;
  cursor: pointer;
  /* Keep vertical drags owned by the scrollable option list on iOS.
     `manipulation` still lets Safari turn the first drag into a button tap. */
  touch-action: pan-y;
}

.autocomplete-option:hover,
.autocomplete-option:focus-visible,
.autocomplete-option.is-active {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  outline: none;
}

/* Buy-car intent cards: compact tile layout with the shared spacing contract. */
.intent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--site-section-gap, 14px);
  align-items: stretch;
  margin: var(--site-section-gap, 14px) 0 0;
}

.intent-grid .card {
  display: flex;
  min-width: 0;
  min-height: 138px;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: var(--site-panel-padding, 14px);
  overflow: hidden;
}

.intent-grid .card h2 {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(25px, 2.35vw, 38px);
  line-height: .98;
  letter-spacing: -.045em;
}

.intent-grid .card p {
  margin: 0;
  max-width: 100%;
  color: rgba(244, 244, 241, .78);
  font-size: var(--ui-base-size);
  line-height: 1.34;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .intent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-catalog-nav .country-route-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .intent-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }

  .intent-grid .card {
    min-height: 0;
    gap: 8px;
  }

  .intent-grid .card h2 {
    font-size: clamp(25px, 9vw, 34px);
  }
}

/* Sitewide spacing audit: one contract for all primary blocks. */
main > * {
  margin-top: 0;
  margin-bottom: 0;
}

main > * + * {
  margin-top: var(--site-section-gap, 14px);
}

:where(
  main > .hero,
  main > .trust-compact,
  main > .work-steps,
  main > .deliveries-showcase,
  main > .lead,
  .wrap > .hero,
  .wrap > .card,
  .wrap > .calculator,
  .wrap > .lead,
  .wrap > .prose,
  .wrap > .legal-document,
  .footer-card
) {
  padding: var(--site-panel-padding, 14px);
}

.hero.hero-single {
  padding: var(--site-panel-padding, 14px);
}

.hero.hero-single .hero-shell {
  gap: var(--site-section-gap, 14px);
}

.hero.hero-single .hero-copy,
.hero.hero-single .hero-side {
  padding: 0;
}

.hero.hero-single .hero-copy > .eyebrow {
  margin: 0 0 var(--site-section-gap, 14px);
}

.hero.hero-single .hero-copy h1 {
  margin-bottom: var(--site-section-gap, 14px);
}

.hero.hero-single .hero-title {
  max-width: none;
}

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

.hero.hero-single .hero-text {
  margin-bottom: 0;
}

.hero.hero-single .hero-status-line {
  margin-top: var(--site-section-gap, 14px);
}

.hero.hero-single .hero-note,
.hero.hero-single .hero-metrics article {
  padding: var(--site-panel-padding, 14px);
}

.hero.hero-single .hero-note-label,
.hero.hero-single .hero-note strong {
  margin-bottom: 10px;
}

.hero.hero-single .hero-metrics strong {
  margin-bottom: 0;
}

.hero.hero-single .hero-note p,
.hero.hero-single .hero-metrics span {
  margin-bottom: 0;
}

.market-ticker {
  margin: 0;
}

main > * + .market-ticker,
main > .market-ticker + * {
  margin-top: var(--site-section-gap, 14px);
}

@media (max-width: 760px) {
  .header {
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: calc(100% - 24px);
    overflow: clip;
  }

  .header .logo-image-link {
    width: 100%;
    min-width: 0;
    max-width: 300px;
  }

  .header .logo-image-link img {
    max-width: 100%;
  }

  .header .header-actions {
    min-width: 0;
    max-width: 100%;
  }

  body[data-page-type="model"] .wrap > .hero {
    grid-template-columns: 1fr;
  }

  .wrap > .model-index-list {
    margin-top: var(--site-section-gap-mobile, 12px);
  }

  .model-catalog-nav .country-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-catalog-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
  }

  .model-catalog-heading .button {
    align-self: flex-start;
  }

  .hero.hero-single .hero-shell,
  .hero.hero-single .hero-metrics {
    grid-template-columns: 1fr;
  }

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

  .hero.hero-single .hero-status-row-services {
    grid-template-columns: 1fr;
  }

  footer.footer.footer-modern .footer-layout.footer-layout-compact {
    grid-template-columns: 1fr;
  }

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

  footer.footer.footer-modern .rates-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  footer.footer.footer-modern .rate-row {
    min-height: 27px;
    padding: 4px 6px;
    gap: 3px;
    font-size: .72rem;
  }

  footer.footer.footer-modern .rate-row b,
  footer.footer.footer-modern .rate-delta {
    font-size: .72rem;
  }

  footer.footer.footer-modern .rate-delta {
    min-height: 17px;
    padding: 2px 4px;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
  }

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

@media (max-width: 340px) {
  footer.footer.footer-modern .rates-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mobile compact contract: no red call backgrounds, even buttons, compact cards. */
.floating-call,
body[data-page-type="calculator"] .floating-call {
  border-color: rgba(255, 255, 255, .24);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .25), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)),
    rgba(7, 7, 7, .86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 18px 42px rgba(0, 0, 0, .38),
    0 0 34px rgba(255, 255, 255, .14);
}

.floating-call:hover,
.floating-call:focus-visible,
body[data-page-type="calculator"] .floating-call:hover,
body[data-page-type="calculator"] .floating-call:focus-visible {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .30), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045)),
    rgba(7, 7, 7, .88);
}

@media (max-width: 980px) {
  .header-actions .phone,
  body[data-page-type="calculator"] .header-actions .phone {
    display: none;
  }
}

@media (max-width: 760px) {
  .hero.hero-single .hero-status-row-countries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero.hero-single .hero-status-row-countries span:first-child {
    display: none;
  }

  .hero.hero-single .hero-status-row-services {
    grid-template-columns: 1fr;
  }

  .hero.hero-single .hero-metrics {
    gap: 10px;
  }

  .hero.hero-single .hero-metrics article {
    min-height: 0;
    padding: 10px 12px;
    gap: 4px;
  }

  .hero.hero-single .hero-metrics strong {
    margin-bottom: 0;
    line-height: 1.04;
  }

  .hero.hero-single .hero-metrics span {
    line-height: 1.26;
  }

  .work-steps-grid {
    gap: 10px;
  }

  .work-step-card {
    min-height: 0;
    padding: 12px 14px;
    gap: 8px;
  }

  .work-step-number {
    margin-bottom: 6px;
  }

  .work-step-card strong {
    margin-bottom: 6px;
    max-width: 100%;
    line-height: 1.02;
  }

  .work-step-card p,
  .work-step-copy-flow {
    max-width: 100%;
    white-space: normal;
    line-height: 1.32;
  }

  .work-step-copy-flow span {
    display: inline;
  }

  .work-step-copy-flow span + span::before {
    content: " ";
  }

  .floating-call,
  body[data-page-type="calculator"] .floating-call {
    border-color: rgba(255, 255, 255, .24);
    background:
      radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .25), transparent 60%),
      linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)),
      rgba(7, 7, 7, .88);
  }

  .header-actions .phone,
  body[data-page-type="calculator"] .header-actions .phone {
    display: none;
  }

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

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

  .calculator-grid .calc-year,
  .calculator-grid .calc-volume,
  .calculator-grid .calc-power {
    grid-column: span 2;
  }

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

  .calculator-grid .calc-import select {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

}

@media (max-width: 560px) {
  .calculator-grid .calc-year,
  .calculator-grid .calc-volume,
  .calculator-grid .calc-power {
    grid-column: 1 / -1;
  }

  .calculator-contact-dialog {
    width: calc(100vw - 40px);
    max-height: 92dvh;
    border-radius: 20px;
  }

  .calculator-contact-dialog__panel {
    max-height: 92dvh;
    overflow: visible;
  }

  .calculator-contact-dialog__close {
    top: -50px;
    right: -20px;
    width: 36px;
    height: 36px;
  }

  .calculator-contact-dialog .lead,
  body[data-page-type="calculator"] .calculator-contact-dialog .lead {
    max-height: 92dvh;
    padding: 14px;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .calculator-contact-dialog .lead form,
  .calculator-contact-dialog .lead-actions {
    grid-template-columns: 1fr;
  }

  .calculator-contact-dialog .lead-actions .consent-note {
    text-align: center;
  }
}

.model-facts-note {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .58);
  font-size: var(--ui-helper-size, 13px);
  line-height: 1.45;
}

.model-case-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  gap: 10px;
  justify-content: start;
}

.delivery-proof-card {
  min-width: 0;
  padding: 14px;
}

.delivery-proof-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  margin-bottom: 10px;
  border-radius: 16px;
  object-fit: cover;
}

.delivery-proof-card h3,
.delivery-proof-card p {
  overflow-wrap: anywhere;
}

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

.cookie-banner {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: min(520px, calc(100vw - 36px));
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% -24%, rgba(255, 255, 255, .14), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    rgba(8, 8, 8, .92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 24px 70px rgba(0, 0, 0, .52);
  color: rgba(255, 255, 255, .78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.cookie-banner-title {
  margin: 0;
  color: #fff;
  font-family: "DaMiOne", "Cruinn", Inter, sans-serif;
  font-size: clamp(21px, 1.7vw, 25px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.cookie-banner-text {
  max-width: 470px;
  margin: 0;
  font-size: var(--ui-helper-size, 13px);
  line-height: 1.45;
}

.cookie-policy-trigger {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .58);
  text-underline-offset: .18em;
}

.cookie-policy-trigger:hover,
.cookie-policy-trigger:focus-visible {
  color: #fff;
  text-decoration-color: #fff;
}

.cookie-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.cookie-choice {
  width: 168px;
  min-width: 152px;
  min-height: 46px;
  padding-inline: 18px;
  font-family: "DaMiOne", "Cruinn", Inter, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 28px rgba(0, 0, 0, .24);
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.cookie-choice:hover,
.cookie-choice:focus-visible {
  transform: none;
}

.cookie-choice.button-secondary {
  border-color: rgba(255, 255, 255, .2);
  background: linear-gradient(180deg, rgba(255, 255,255, .075), rgba(255, 255, 255, .025));
  color: rgba(255, 255, 255, .9);
}

.cookie-choice.button-secondary:hover,
.cookie-choice.button-secondary:focus-visible {
  border-color: rgba(255, 255, 255, .36);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .045));
  color: #fff;
}

.cookie-choice.button-primary {
  border-color: rgba(255, 255, 255, .72);
  background: linear-gradient(180deg, #fff, #e9e9e5);
  color: #090909;
  box-shadow: inset 0 1px 0 #fff, 0 14px 32px rgba(255, 255, 255, .1);
}

.cookie-choice.button-primary:hover,
.cookie-choice.button-primary:focus-visible {
  border-color: #fff;
  background: #fff;
  color: #000;
  box-shadow: inset 0 1px 0 #fff, 0 16px 36px rgba(255, 255, 255, .16);
}

.footer-cookie-settings {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.country-route-panel {
  display: grid;
  gap: 14px;
  margin: 0 0 var(--site-section-gap, 14px);
  padding: var(--site-panel-padding, 14px);
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: clamp(24px, 3vw, 34px);
  background:
    radial-gradient(circle at 84% 78%, rgba(255, 255, 255, .055), transparent 0 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .012)),
    rgba(6, 6, 6, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 58px rgba(0, 0, 0, .34);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.country-route-panel h1,
.country-route-panel p {
  margin: 0;
}

.country-route-panel > p:not(.eyebrow) {
  max-width: 980px;
  color: rgba(255, 255, 255, .76);
  line-height: 1.42;
}

.country-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.country-route-card {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
    rgba(6, 6, 6, .36);
  color: inherit;
  text-decoration: none;
  align-content: start;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.country-route-card:hover,
.country-route-card:focus-visible {
  border-color: rgba(255, 255, 255, .28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .028)),
    rgba(6, 6, 6, .46);
}

.country-route-card span {
  font-family: var(--brand-font, inherit);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
}

.country-route-card small {
  color: rgba(255, 255, 255, .68);
  line-height: 1.32;
}

@media (max-width: 680px) {
  .cookie-banner {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    transform: none;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 20px;
  }

  .cookie-actions {
    width: 100%;
  }

  .cookie-choice {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
  }

  .country-route-panel {
    gap: 12px;
    margin-bottom: var(--site-section-gap-mobile, 12px);
    padding: var(--site-panel-padding, 14px);
  }

  .country-route-grid {
    grid-template-columns: 1fr;
  }

  .country-route-card {
    min-height: auto;
  }
}

/* Calculator header has more route buttons than the landing page.
   Keep the same visual language, but compress optical spacing so desktop
   and tablet widths do not collide with the logo or city selector. */
@media (min-width: 981px) {
  body[data-page-type="calculator"] .header {
    grid-template-columns: minmax(212px, 292px) minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
  }

  body[data-page-type="calculator"] .header .logo-image-link {
    width: min(292px, 18.6vw);
    min-width: 212px;
  }

  body[data-page-type="calculator"] .header .logo-image-link img {
    width: 100%;
    height: auto;
  }

  body[data-page-type="calculator"] .header nav {
    justify-content: end;
    gap: 7px;
    min-width: 0;
  }

  body[data-page-type="calculator"] .header nav a {
    min-height: 40px;
    padding-inline: 12px;
    font-size: clamp(13.5px, .88vw, 15.5px);
    white-space: nowrap;
  }

  body[data-page-type="calculator"] .header-actions {
    min-width: 124px;
  }

  body[data-page-type="calculator"] .header-city select {
    min-width: 124px;
    min-height: 40px;
    padding-left: 16px;
    padding-right: 38px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .03);
    color: rgba(244, 244, 241, .86);
    font-size: clamp(13.5px, .88vw, 15.5px);
    font-weight: 400;
    box-shadow: none;
  }
}

@media (min-width: 981px) and (max-width: 1320px) {
  body[data-page-type="calculator"] .header {
    grid-template-columns: minmax(190px, 236px) minmax(0, 1fr) auto;
    gap: 8px;
  }

  body[data-page-type="calculator"] .header .logo-image-link {
    width: min(236px, 17vw);
    min-width: 190px;
  }

  body[data-page-type="calculator"] .header nav {
    gap: 5px;
  }

  body[data-page-type="calculator"] .header nav a {
    min-height: 38px;
    padding-inline: 9px;
    font-size: 13.5px;
  }

  body[data-page-type="calculator"] .header-city select {
    min-width: 116px;
    min-height: 38px;
    font-size: 13.5px;
    padding-left: 14px;
    padding-right: 36px;
  }
}

body[data-page-type="calculator"] .header-city select:hover,
body[data-page-type="calculator"] .header-city select:focus,
body[data-page-type="calculator"] .header-city select:focus-visible {
  border-color: rgba(255, 255, 255, .18);
  background-color: rgba(255, 255, 255, .06);
  color: rgba(244, 244, 241, .95);
}

/* Shared header geometry: home and CMS pages must not jump between routes. */
.topbar,
.header,
body[data-page-type="calculator"] .header {
  width: min(calc(100% - 32px), 1240px);
  max-width: calc(100% - 32px);
  min-height: 0;
  margin: 16px auto 0;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo nav actions";
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
  border: 1px solid var(--border, rgba(255, 255, 255, .10));
  border-radius: 999px;
  background: rgba(10, 10, 10, .72);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.topbar {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "brand nav";
}

.header,
body[data-page-type="calculator"] .header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo nav actions";
}

.topbar .brand-logo,
.header .logo-image-link,
body[data-page-type="calculator"] .header .logo-image-link {
  width: clamp(218px, 20vw, 300px);
  min-width: 0;
  min-height: 0;
  padding: 4px 14px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)),
    rgba(7, 7, 7, .7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 12px 32px rgba(0, 0, 0, .22);
}

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

.header .logo-image-link,
body[data-page-type="calculator"] .header .logo-image-link {
  grid-area: logo;
}

.topbar .brand-logo-image,
.header .logo-image-link img,
body[data-page-type="calculator"] .header .logo-image-link img {
  width: min(100%, 270px);
  max-width: 100%;
  max-height: none;
  height: auto;
}

.topbar .nav,
.header nav,
body[data-page-type="calculator"] .header nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: end;
  align-self: center;
  gap: clamp(8px, .9vw, 12px);
  min-width: 0;
}

.topbar .nav a,
.header nav a,
body[data-page-type="calculator"] .header nav a,
.header-city select,
body[data-page-type="calculator"] .header-city select {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .03);
  color: rgba(244, 244, 241, .8);
  font-family: var(--ui-font);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none;
}

.topbar .nav a,
.header nav a,
body[data-page-type="calculator"] .header nav a {
  padding: 0 12px;
}

.header-city select,
body[data-page-type="calculator"] .header-city select {
  min-width: 116px;
  padding: 0 40px 0 16px;
  text-align: left;
  text-align-last: left;
  background-color: rgba(255, 255, 255, .03);
}

.topbar .nav a:hover,
.topbar .nav a:focus-visible,
.header nav a:hover,
.header nav a:focus-visible,
body[data-page-type="calculator"] .header nav a:hover,
body[data-page-type="calculator"] .header nav a:focus-visible,
.header-city select:hover,
.header-city select:focus-visible,
body[data-page-type="calculator"] .header-city select:hover,
body[data-page-type="calculator"] .header-city select:focus-visible {
  border-color: rgba(255, 255, 255, .18);
  background-color: rgba(255, 255, 255, .06);
  color: rgba(244, 244, 241, .95);
}

@media (min-width: 981px) {
  .header nav,
  body[data-page-type="calculator"] .header nav {
    gap: clamp(6px, .55vw, 10px);
  }

  .header nav a,
  body[data-page-type="calculator"] .header nav a {
    padding-inline: clamp(8px, .6vw, 11px);
    font-size: clamp(13px, .88vw, 15px);
  }

  .header-city select,
  body[data-page-type="calculator"] .header-city select {
    min-width: 104px;
    padding-inline: 14px 34px;
    font-size: clamp(13px, .88vw, 15px);
  }
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand menu"
      "nav nav";
    align-items: center;
    gap: 10px;
    width: min(calc(100% - 32px), 1240px);
    min-height: 0;
  }

  .header,
  body[data-page-type="calculator"] .header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo menu"
      "nav nav";
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    width: min(calc(100% - 32px), 1240px);
    min-height: 0;
  }

  .topbar.menu-open,
  .header.menu-open,
  body[data-page-type="calculator"] .header.menu-open {
    border-radius: 28px;
    row-gap: 10px;
  }

  .topbar .brand-logo {
    width: clamp(188px, 62vw, 218px);
    max-width: 100%;
  }

  .topbar .brand-logo-image {
    width: min(100%, 220px);
  }

  .header .logo-image-link,
  body[data-page-type="calculator"] .header .logo-image-link {
    width: clamp(176px, 52vw, 206px);
    min-height: 62px;
    padding: 6px 14px;
    max-width: 100%;
  }

  .header .logo-image-link img,
  body[data-page-type="calculator"] .header .logo-image-link img {
    width: min(100%, 180px);
  }

  .header .menu-toggle,
  body[data-page-type="calculator"] .header .menu-toggle {
    position: relative;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    gap: 6px;
  }

  .header .menu-toggle span,
  body[data-page-type="calculator"] .header .menu-toggle span {
    width: 20px;
    height: 2px;
    transform-origin: center;
  }

  .header.menu-open .menu-toggle span:first-child,
  body[data-page-type="calculator"] .header.menu-open .menu-toggle span:first-child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .header.menu-open .menu-toggle span:last-child,
  body[data-page-type="calculator"] .header.menu-open .menu-toggle span:last-child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .topbar .nav,
  .header nav,
  body[data-page-type="calculator"] .header nav {
    display: none;
    grid-area: nav;
    width: 100%;
    min-width: 0;
    height: auto;
    padding-top: 0;
    gap: 8px;
  }

  .topbar.menu-open .nav,
  .header.menu-open nav,
  body[data-page-type="calculator"] .header.menu-open nav {
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .topbar .nav a,
  .header nav a,
  body[data-page-type="calculator"] .header nav a {
    width: 100%;
    justify-content: flex-start;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 16px;
    white-space: normal;
    font-size: 15px;
  }

  .header-actions,
  body[data-page-type="calculator"] .header-actions {
    display: none;
  }

  .header-actions .phone,
  body[data-page-type="calculator"] .header-actions .phone {
    display: none;
  }

  .header-city,
  .header-city select,
  body[data-page-type="calculator"] .header-city,
  body[data-page-type="calculator"] .header-city select {
    min-width: 0;
    width: auto;
    max-width: 112px;
  }

  .header-city select,
  body[data-page-type="calculator"] .header-city select {
    min-width: 92px;
    max-width: 112px;
    min-height: 42px;
    padding-inline: 13px 32px;
    font-size: 13px;
  }

  body[data-page-type="calculator"] .header {
    column-gap: 8px;
    row-gap: 0;
  }

  body[data-page-type="calculator"] .header nav a {
    min-height: 40px;
    padding-inline: 14px;
  }
}

/*
 * Final page rhythm guard.
 * Loaded after site.css: keep non-home CMS pages on the agreed spacing contract:
 * 14px between desktop sections, 14px panel padding, 10px tight control gap,
 * 12px section gap on mobile.
 */
:where(body:not([data-page-type="home"])) .wrap {
  display: flow-root;
  padding-bottom: 0;
}

:where(body:not([data-page-type="home"])) .wrap > .breadcrumbs {
  margin: 0 0 var(--site-section-gap, 14px);
}

:where(body:not([data-page-type="home"])) .wrap > :is(
  .hero,
  .card,
  .calculator,
  .lead,
  .prose,
  .legal-document,
  section,
  article
) {
  margin-top: 0;
  margin-bottom: 0;
}

:where(body:not([data-page-type="home"])) .wrap > :is(
  .hero,
  .card,
  .calculator,
  .lead,
  .prose,
  .legal-document,
  section,
  article
) + :is(
  .hero,
  .card,
  .calculator,
  .lead,
  .prose,
  .legal-document,
  section,
  article
) {
  margin-top: var(--site-section-gap, 14px);
}

:where(body:not([data-page-type="home"])) .wrap > :is(
  .hero,
  .card,
  .calculator,
  .lead,
  .prose,
  .legal-document
) {
  padding: var(--site-panel-padding, 14px);
}

:where(body:not([data-page-type="home"])) .wrap > :is(.hero, .card, .prose, .legal-document) > :first-child {
  margin-top: 0;
}

:where(body:not([data-page-type="home"])) .wrap > :is(.hero, .card, .prose, .legal-document) > :last-child {
  margin-bottom: 0;
}

:where(body:not([data-page-type="home"])) .wrap > .hero > .eyebrow {
  margin: 0 0 var(--site-control-gap, 10px);
}

:where(body:not([data-page-type="home"])) .wrap > .hero > h1 {
  margin: 0 0 var(--site-section-gap, 14px);
}

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

:where(body[data-page-type="legal"]) .legal-document :is(p, ul, ol) {
  margin-top: 0;
  margin-bottom: var(--site-control-gap, 10px);
}

:where(body[data-page-type="legal"]) .legal-document :is(h2, h3) {
  margin-top: var(--site-section-gap, 14px);
  margin-bottom: var(--site-control-gap, 10px);
}

:where(body[data-page-type="legal"]) .legal-document > :first-child {
  margin-top: 0;
}

:where(body[data-page-type="legal"]) .legal-document > :last-child {
  margin-bottom: 0;
}

:where(body[data-page-type="legal"]) .legal-divider {
  margin: var(--site-section-gap, 14px) 0;
}

@media (max-width: 760px) {
  :where(body:not([data-page-type="home"])) .wrap > .breadcrumbs {
    margin-bottom: var(--site-section-gap-mobile, 12px);
  }

  :where(body:not([data-page-type="home"])) .wrap > :is(
    .hero,
    .card,
    .calculator,
    .lead,
    .prose,
    .legal-document,
    section,
    article
  ) + :is(
    .hero,
    .card,
    .calculator,
    .lead,
    .prose,
    .legal-document,
    section,
    article
  ) {
    margin-top: var(--site-section-gap-mobile, 12px);
  }
}

/*
 * Authoritative mobile header contract.
 * The landing page uses `.topbar`; CMS/calculator pages use `.header`.
 * Keep geometry here so repeated headers do not drift between pages.
 */
@media (max-width: 760px) {
  :root {
    --mobile-header-width: min(calc(100% - 32px), 1240px);
    --mobile-header-margin-top: 12px;
    --mobile-header-padding-y: 12px;
    --mobile-header-padding-x: 14px;
    --mobile-header-radius: 26px;
    --mobile-header-gap: 10px;
    --mobile-logo-box-width: clamp(176px, 52vw, 206px);
    --mobile-logo-box-min-height: 62px;
    --mobile-logo-box-padding-y: 6px;
    --mobile-logo-box-padding-x: 14px;
    --mobile-logo-image-width: min(100%, 180px);
    --mobile-menu-size: 50px;
    --mobile-menu-line-width: 20px;
    --mobile-menu-line-height: 2px;
  }

  .topbar,
  .header,
  body[data-page-type="calculator"] .header {
    position: relative;
    top: auto;
    width: var(--mobile-header-width);
    max-width: calc(100% - 32px);
    min-height: 0;
    margin: var(--mobile-header-margin-top) auto 0;
    padding: var(--mobile-header-padding-y) var(--mobile-header-padding-x);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: stretch;
    column-gap: var(--mobile-header-gap);
    row-gap: 0;
    border-radius: var(--mobile-header-radius);
    overflow: clip;
  }

  .topbar {
    grid-template-areas:
      "brand menu"
      "nav nav";
  }

  .header,
  body[data-page-type="calculator"] .header {
    grid-template-areas:
      "logo menu"
      "nav nav";
  }

  .topbar.menu-open,
  .header.menu-open,
  body[data-page-type="calculator"] .header.menu-open {
    row-gap: var(--mobile-header-gap);
    border-radius: calc(var(--mobile-header-radius) + 2px);
    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;
  }

  .topbar .brand-logo,
  .header .logo-image-link,
  body[data-page-type="calculator"] .header .logo-image-link {
    width: var(--mobile-logo-box-width);
    max-width: 100%;
    min-width: 0;
    min-height: var(--mobile-logo-box-min-height);
    height: auto;
    padding: var(--mobile-logo-box-padding-y) var(--mobile-logo-box-padding-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: start;
  }

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

  .header .logo-image-link,
  body[data-page-type="calculator"] .header .logo-image-link {
    grid-area: logo;
  }

  .topbar .brand-logo-image,
  .header .logo-image-link img,
  body[data-page-type="calculator"] .header .logo-image-link img {
    display: block;
    width: var(--mobile-logo-image-width);
    max-width: 100%;
    max-height: 48px;
    height: auto;
    object-fit: contain;
    transform: none;
  }

  .topbar .menu-toggle,
  .header .menu-toggle,
  body[data-page-type="calculator"] .header .menu-toggle {
    grid-area: menu;
    position: relative;
    display: inline-flex;
    width: var(--mobile-menu-size);
    height: var(--mobile-menu-size);
    min-width: var(--mobile-menu-size);
    min-height: var(--mobile-menu-size);
    flex: 0 0 var(--mobile-menu-size);
    align-self: center;
    justify-self: end;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border-radius: 999px;
  }

  .topbar .menu-toggle span,
  .header .menu-toggle span,
  body[data-page-type="calculator"] .header .menu-toggle span {
    display: block;
    width: var(--mobile-menu-line-width);
    height: var(--mobile-menu-line-height);
    border-radius: 999px;
    transform-origin: center;
  }

  .topbar.menu-open .menu-toggle span:first-child,
  .header.menu-open .menu-toggle span:first-child,
  body[data-page-type="calculator"] .header.menu-open .menu-toggle span:first-child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .topbar.menu-open .menu-toggle span:last-child,
  .header.menu-open .menu-toggle span:last-child,
  body[data-page-type="calculator"] .header.menu-open .menu-toggle span:last-child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .topbar .nav,
  .header nav,
  body[data-page-type="calculator"] .header nav {
    display: none;
    grid-area: nav;
    width: 100%;
    min-width: 0;
    height: auto;
    padding-top: 0;
    gap: 8px;
  }

  .topbar.menu-open .nav,
  .header.menu-open nav,
  body[data-page-type="calculator"] .header.menu-open nav {
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .header-actions,
  body[data-page-type="calculator"] .header-actions {
    display: none;
  }
}

@media (max-width: 390px) {
  :root {
    --mobile-header-width: min(calc(100% - 20px), 1240px);
    --mobile-header-padding-y: 10px;
    --mobile-header-padding-x: 12px;
    --mobile-header-radius: 22px;
    --mobile-logo-box-width: clamp(166px, 62vw, 196px);
    --mobile-logo-box-min-height: 58px;
    --mobile-logo-box-padding-x: 12px;
    --mobile-logo-image-width: min(100%, 170px);
    --mobile-menu-size: 48px;
  }

  .topbar,
  .header,
  body[data-page-type="calculator"] .header {
    max-width: calc(100% - 20px);
  }
}

/*
 * Mobile page-width and text-wrap contract.
 * Headers and primary blocks share one visual width; readable words must not
 * be split letter-by-letter. If text is tight, typography scales down a little
 * and panels grow vertically.
 */
@media (max-width: 760px) {
  :root {
    --mobile-page-width: min(calc(100% - 20px), 1240px);
    --mobile-text-title-tight: clamp(1.1rem, 6vw, 1.72rem);
    --mobile-text-body-tight: clamp(.86rem, 3.65vw, 1rem);
  }

  .topbar,
  .header,
  body[data-page-type="calculator"] .header,
  main,
  footer.footer.footer-modern {
    width: var(--mobile-page-width);
    max-width: var(--mobile-page-width);
    margin-inline: auto;
  }

  main {
    min-width: 0;
  }

  .wrap {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
  }

  :where(
    body,
    main,
    .wrap,
    .topbar,
    .header,
    .hero,
    .hero-note,
    .hero-metrics article,
    .trust-compact-card,
    .work-step-card,
    .lead,
    .lead-copy,
    .lead-form,
    .lead-form-head,
    .card,
    .calculator,
    .prose,
    .legal-document,
    .intent-grid > *,
    .delivery-card,
    .delivery-meta,
    .footer-card,
    .footer-links
  ) :is(h1, h2, h3, h4, p, strong, span, a, li, label, button) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
  }

  :where(
    .work-step-card strong,
    .lead-copy h2,
    .lead-form-head strong,
    .card h1,
    .card h2,
    .hero h1,
    .prose h1,
    .prose h2
  ) {
    font-size: var(--mobile-text-title-tight);
    line-height: 1.02;
  }

  .work-steps-grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
  }

  .work-step-card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    /* Let the card follow its text. A fixed mobile height created empty
       panels on short cards and clipped longer translations. */
    min-height: 0;
  }

  .work-step-card strong {
    white-space: normal;
    text-wrap: auto;
    font-size: clamp(.92rem, 3.95vw, 1.12rem);
  }

  .work-step-card p,
  .work-step-copy-flow {
    align-self: start;
    font-size: var(--mobile-text-body-tight);
  }

  .lead-copy h2 {
    text-wrap: balance;
  }

  h1,
  h2,
  h3,
  .work-step-card strong,
  .lead-copy h2,
  .lead-form-head strong,
  .button,
  button {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }
}

@media (max-width: 390px) {
  :root {
    --mobile-page-width: min(calc(100% - 20px), 1240px);
    --mobile-text-title-tight: clamp(1rem, 5.45vw, 1.42rem);
    --mobile-text-body-tight: clamp(.82rem, 3.45vw, .94rem);
  }

  .work-step-card { min-height: 0; }
}

/* Partners landing page: follows the shared 14/10/12 spacing contract. */
body[data-page-type="partners"] .wrap {
  display: grid;
  gap: 14px;
  max-width: min(1240px, calc(100% - 32px));
  overflow-x: clip;
}

body[data-page-type="partners"] .breadcrumbs {
  margin-bottom: 0;
}

body[data-page-type="partners"] :is(.partner-panel, .partner-inner-card, .partner-lead .lead) {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: clamp(22px, 2.2vw, 34px);
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.075), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012)),
    rgba(0, 0, 0, .30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 20px 56px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}

.partner-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.partner-hero-copy {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.partner-hero-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.partner-hero-copy > *,
.partner-hero-card > *,
.partner-section > *,
.partner-format-card > * {
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.partner-hero-copy .eyebrow,
.partner-section .eyebrow,
.partner-prose .eyebrow {
  margin: 0;
}

.partner-hero-copy h1,
.partner-section h2,
.partner-prose h2 {
  margin: 0;
  text-wrap: balance;
}

.partner-hero-copy h1 {
  font-size: clamp(2rem, 3.45vw, 3.35rem);
  line-height: 1.02;
  min-width: 0;
}

.partner-hero-copy p,
.partner-section p,
.partner-prose p,
.partner-prose li,
.partner-format-card p,
.partner-hero-card p,
.partner-hero-card strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

.partner-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.partner-hero-actions .button {
  min-width: 0;
  max-width: 100%;
  width: min(100%, 286px);
  white-space: normal;
  text-align: center;
}

.partner-hero-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

.partner-card-kicker,
.partner-format-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.72);
}

.partner-card-kicker {
  width: max-content;
  height: auto;
  min-width: 46px;
  min-height: 34px;
  padding: 6px 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.partner-format-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.partner-hero-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.25vw, 2.35rem);
  line-height: .98;
  text-wrap: pretty;
}

.partner-hero-card p {
  max-width: min(100%, 1080px);
  line-height: 1.42;
}

.partner-section {
  display: grid;
  gap: 14px;
}

.section-head {
  display: grid;
  gap: 10px;
  align-content: start;
  max-width: 100%;
  min-width: 0;
}

.section-head > * {
  min-width: 0;
  margin: 0;
}

.partner-audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.partner-audience-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    rgba(0,0,0,.34);
  color: rgba(255,255,255,.88);
  text-align: center;
  white-space: normal;
}

.partner-format-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.partner-format-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 10px;
}

.partner-format-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.32vw, 1.48rem);
  line-height: 1;
  text-wrap: balance;
}

.partner-format-card p {
  margin: 0;
  align-self: start;
}

.partner-info-section {
  display: grid;
  gap: 14px;
  align-content: start;
  grid-auto-rows: auto;
}

.partner-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  grid-auto-rows: minmax(min-content, 1fr);
}

.partner-info-card {
  display: grid;
  align-content: start;
  align-self: stretch;
  gap: 10px;
  min-height: 0;
  height: auto;
}

.partner-info-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.32vw, 1.48rem);
  line-height: 1;
}

.partner-info-card :is(p, ul) {
  margin: 0;
  line-height: 1.35;
}

.partner-info-card ul {
  padding-left: 1.1em;
}

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

.partner-prose > * {
  margin: 0;
  min-width: 0;
}

.partner-prose :is(ul, ol) {
  padding-left: 1.1em;
}

.partner-lead {
  scroll-margin-top: 24px;
}

.partner-lead .lead form {
  align-items: start;
}

@media (max-width: 900px) {
  .partner-hero {
    grid-template-columns: 1fr;
  }

  .partner-hero-title-row {
    grid-template-columns: 1fr;
  }

  .partner-hero-actions {
    justify-content: stretch;
  }

  .partner-hero-actions .button {
    width: 100%;
  }

  .partner-format-grid,
  .partner-info-grid,
  .partner-prose {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-page-type="partners"] {
    overflow-x: hidden;
  }

  body[data-page-type="partners"] *,
  body[data-page-type="partners"] *::before,
  body[data-page-type="partners"] *::after {
    box-sizing: border-box;
    max-width: 100%;
  }

  body[data-page-type="partners"] .wrap {
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  body[data-page-type="partners"] :is(.partner-panel, .partner-inner-card, .partner-lead .lead) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    padding: 12px;
  }

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

  .partner-section {
    gap: 12px;
  }

  .partner-hero-copy,
  .partner-hero-card,
  .partner-section,
  .partner-format-card,
  .partner-info-card,
  .partner-lead,
  .partner-lead .lead,
  .partner-lead .lead form {
    min-width: 0;
    max-width: 100%;
  }

  .partner-hero-copy h1,
  .partner-section h2 {
    font-size: clamp(1.45rem, 7.4vw, 2rem);
    line-height: 1.02;
  }

  .partner-hero-copy p,
  .partner-section p,
  .partner-format-card p,
  .partner-info-card :is(p, li),
  .partner-hero-card :is(strong, p) {
    font-size: clamp(.92rem, 3.7vw, 1rem);
    line-height: 1.38;
  }

  .partner-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .partner-audience-grid span {
    min-height: 38px;
    padding: 8px 10px;
    font-size: clamp(.82rem, 3.3vw, .95rem);
    overflow-wrap: break-word;
  }

  .partner-hero-actions .button {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .partner-audience-grid {
    grid-template-columns: 1fr;
  }
}

/* Final header/page-width guard after feature-specific blocks. */
body:not([data-page-type="home"]) .header,
body[data-page-type="calculator"] .header,
body:not([data-page-type="home"]) .wrap {
  width: min(1240px, calc(100% - 32px));
  max-width: min(1240px, calc(100% - 32px));
}

@media (min-width: 981px) {
  body:not([data-page-type="home"]) .header,
  body[data-page-type="calculator"] .header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(8px, .75vw, 12px);
    padding-inline: clamp(12px, 1.2vw, 16px);
  }

  body:not([data-page-type="home"]) .header .logo-image-link,
  body[data-page-type="calculator"] .header .logo-image-link {
    width: clamp(204px, 18vw, 246px);
    padding-inline: clamp(8px, .9vw, 12px);
  }

  body:not([data-page-type="home"]) .header .logo-image-link img,
  body[data-page-type="calculator"] .header .logo-image-link img {
    width: min(100%, 236px);
  }

  body:not([data-page-type="home"]) .header nav,
  body[data-page-type="calculator"] .header nav {
    gap: clamp(5px, .45vw, 8px);
    justify-content: end;
  }

  body:not([data-page-type="home"]) .header nav a,
  body[data-page-type="calculator"] .header nav a,
  body:not([data-page-type="home"]) .header-city select,
  body[data-page-type="calculator"] .header-city select {
    min-height: 40px;
    font-size: clamp(12.5px, .78vw, 14px);
  }

  body:not([data-page-type="home"]) .header nav a,
  body[data-page-type="calculator"] .header nav a {
    padding-inline: clamp(7px, .52vw, 10px);
  }

  body:not([data-page-type="home"]) .header-city select,
  body[data-page-type="calculator"] .header-city select {
    min-width: 98px;
    padding-inline: 12px 32px;
  }
}

/*
 * Authoritative shell-width lock.
 * The landing page uses 1240px as the visual shell. Keep every repeated
 * header and every primary CMS/Django page wrapper on the same rail so routes
 * do not visually jump when navigating between pages.
 */
:root {
  --automost-shell-width: min(1240px, calc(100% - 32px));
  --automost-shell-width-mobile: min(1240px, calc(100% - 20px));
}

.topbar,
.header,
body[data-page-type="calculator"] .header,
body:not([data-page-type="home"]) .wrap,
body[data-page-type="partners"] .wrap {
  width: var(--automost-shell-width);
  max-width: var(--automost-shell-width);
  margin-inline: auto;
}

@media (max-width: 760px) {
  .topbar,
  .header,
  body[data-page-type="calculator"] .header,
  body:not([data-page-type="home"]) .wrap,
  body[data-page-type="partners"] .wrap {
    width: var(--automost-shell-width-mobile);
    max-width: var(--automost-shell-width-mobile);
  }
}

@media (max-width: 760px) {
  body:not([data-page-type="home"]) .header,
  body[data-page-type="calculator"] .header,
  body:not([data-page-type="home"]) .wrap {
    width: min(calc(100% - 20px), 1240px);
    max-width: min(calc(100% - 20px), 1240px);
  }

  .partner-hero-copy h1,
  .partner-section h2,
  .partner-info-card h3 {
    overflow-wrap: normal;
    word-break: normal;
  }
}

/*
 * Site-wide final UI contract.
 * Keep the same visual rails and header proportions on home, calculator,
 * partners and every CMS page. Buttons may compress; the shell must not jump.
 */
.topbar,
.header,
body[data-page-type="calculator"] .header {
  width: var(--automost-shell-width);
  max-width: var(--automost-shell-width);
  margin: 16px auto 0;
  padding: 12px 18px;
  min-height: 117px;
  align-items: center;
}

.header,
body[data-page-type="calculator"] .header {
  grid-template-columns: 269px minmax(0, 1fr) auto;
}

body:not([data-page-type="home"]) main > .wrap,
body[data-page-type="partners"] main > .wrap,
body:not([data-page-type="home"]) .wrap {
  width: var(--automost-shell-width);
  max-width: var(--automost-shell-width);
  margin-inline: auto;
}

.topbar .brand-logo,
.header .logo-image-link,
body[data-page-type="calculator"] .header .logo-image-link {
  width: 269px;
  max-width: 269px;
  padding: 4px 14px;
  flex: 0 0 269px;
}

.topbar .brand-logo-image,
.header .logo-image-link img,
body[data-page-type="calculator"] .header .logo-image-link img {
  width: min(100%, 270px);
  max-width: 100%;
  height: auto;
}

.topbar .nav,
.header nav,
body[data-page-type="calculator"] .header nav {
  gap: clamp(5px, .55vw, 10px);
  min-width: 0;
}

.topbar .nav a,
.header nav a,
body[data-page-type="calculator"] .header nav a,
.header-city select,
body[data-page-type="calculator"] .header-city select {
  min-height: 42px;
  font-size: clamp(11.5px, .76vw, 15px);
  line-height: 1;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, .03);
}

.topbar .nav a,
.header nav a,
body[data-page-type="calculator"] .header nav a {
  padding-inline: clamp(7px, .58vw, 12px);
}

.header-actions {
  gap: clamp(5px, .55vw, 10px);
  min-width: 0;
}

.header-city select,
body[data-page-type="calculator"] .header-city select {
  min-width: 104px;
  padding-inline: 13px 34px;
}

body[data-page-type="partners"] :is(.partner-panel, .partner-inner-card, .partner-lead .lead),
body[data-page-type="partners"] :is(.partner-section, .partner-info-section, .partner-hero-copy, .partner-hero-card, .section-head) {
  gap: 14px;
}

body[data-page-type="partners"] :is(.partner-format-grid, .partner-info-grid, .partner-audience-grid) {
  gap: 10px;
}

@media (max-width: 1140px) and (min-width: 981px) {
  .header,
  body[data-page-type="calculator"] .header {
    grid-template-columns: clamp(210px, 20vw, 248px) minmax(0, 1fr) auto;
  }

  .topbar .brand-logo,
  .header .logo-image-link,
  body[data-page-type="calculator"] .header .logo-image-link {
    width: clamp(210px, 20vw, 248px);
    max-width: clamp(210px, 20vw, 248px);
    flex-basis: clamp(210px, 20vw, 248px);
  }

  .topbar .brand-logo-image,
  .header .logo-image-link img,
  body[data-page-type="calculator"] .header .logo-image-link img {
    width: min(100%, 232px);
  }

  .topbar .nav a,
  .header nav a,
  body[data-page-type="calculator"] .header nav a,
  .header-city select,
  body[data-page-type="calculator"] .header-city select {
    min-height: 40px;
    font-size: clamp(11.5px, .82vw, 13px);
  }
}

@media (max-width: 760px) {
  body:not([data-page-type="home"]) main > .wrap,
  body[data-page-type="partners"] main > .wrap,
  body:not([data-page-type="home"]) .wrap {
    width: var(--automost-shell-width-mobile);
    max-width: var(--automost-shell-width-mobile);
  }

  .topbar,
  .header,
  body[data-page-type="calculator"] .header {
    /* Keep the same mobile header geometry for the landing, calculator
       and CMS routes.  The values are defined by the authoritative
       mobile-header contract above. */
    width: var(--mobile-header-width);
    max-width: calc(100% - 32px);
    min-height: 0;
    padding: var(--mobile-header-padding-y) var(--mobile-header-padding-x);
  }

  .topbar .brand-logo,
  .header .logo-image-link,
  body[data-page-type="calculator"] .header .logo-image-link {
    width: var(--mobile-logo-box-width);
    max-width: 100%;
    min-height: var(--mobile-logo-box-min-height);
    padding: var(--mobile-logo-box-padding-y) var(--mobile-logo-box-padding-x);
  }

  .topbar .brand-logo-image,
  .header .logo-image-link img,
  body[data-page-type="calculator"] .header .logo-image-link img {
    width: var(--mobile-logo-image-width);
  }

  body[data-page-type="partners"] :is(.partner-panel, .partner-inner-card, .partner-lead .lead),
  body[data-page-type="partners"] :is(.partner-section, .partner-info-section, .partner-hero-copy, .partner-hero-card, .section-head) {
    gap: 12px;
  }

  .partner-hero-actions {
    justify-content: stretch;
  }

  /* Let compact screens use the entire content rail. The landing uses
   * individual spans for desktop composition; keeping them as blocks on a
   * phone produced artificial lines even when the words would fit. */
  .hero.hero-single .hero-title span {
    display: inline;
    white-space: normal;
  }

  .hero.hero-single .hero-copy,
  .hero.hero-single .hero-title,
  .hero.hero-single .hero-text,
  .lead .lead-copy,
  .lead .lead-copy :is(h1, h2, h3, p),
  .trust-head,
  .work-steps-head,
  .deliveries-head {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .hero.hero-single .hero-copy h1 {
    max-width: none;
    font-size: clamp(1.72rem, 8.35vw, 2.3rem);
    line-height: .93;
    text-wrap: pretty;
  }

  .lead .lead-copy h2,
  .trust-head h2,
  .work-steps-head h2,
  .deliveries-head h2 {
    max-width: none;
    text-wrap: pretty;
  }

  .hero.hero-single .hero-text,
  .lead .lead-copy p {
    text-wrap: pretty;
  }
}

/* Keep the same mobile header rail on CMS routes as on the landing and
 * calculator. This deliberately matches the specificity of the earlier
 * non-home rule, so a page-specific wrapper cannot make the header jump. */
@media (max-width: 760px) {
  body:not([data-page-type="home"]) .header,
  body[data-page-type="calculator"] .header {
    width: var(--mobile-header-width);
    max-width: calc(100% - 32px);
    margin: 16px auto 0;
  }
}

/* A two-column main panel does not have enough room for readable copy on
 * phones or portrait tablets.  Keep the full panel width for each content
 * group instead of narrowing a text column and forcing avoidable lines. */
@media (max-width: 980px) {
  .hero.hero-single,
  .lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead:has(> .lead-copy) {
    align-items: start;
    align-content: start;
  }

  .lead:has(> .lead-copy) > .lead-copy,
  .lead:has(> .lead-copy) > .lead-form {
    align-self: start;
  }

  .hero.hero-single > .hero-shell,
  .hero.hero-single .hero-copy,
  .lead > .lead-copy,
  .lead > .lead-form {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .hero.hero-single .hero-title,
  .lead .lead-copy h2,
  .lead .lead-copy p {
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }
}

/* Equal-specificity override for earlier non-home header compression rules. */
@media (min-width: 1141px) {
  body:not([data-page-type="home"]) .header,
  body[data-page-type="calculator"] .header {
    grid-template-columns: 269px minmax(0, 1fr) auto;
    padding: 12px 18px;
    min-height: 117px;
  }

  body:not([data-page-type="home"]) .header .logo-image-link,
  body[data-page-type="calculator"] .header .logo-image-link {
    width: 269px;
    max-width: 269px;
    padding: 4px 14px;
    flex: 0 0 269px;
  }

  body:not([data-page-type="home"]) .header .logo-image-link img,
  body[data-page-type="calculator"] .header .logo-image-link img {
    width: min(100%, 270px);
    max-width: 100%;
  }

  body:not([data-page-type="home"]) .header nav,
  body[data-page-type="calculator"] .header nav {
    gap: clamp(4px, .46vw, 8px);
  }

  body:not([data-page-type="home"]) .header nav a,
  body[data-page-type="calculator"] .header nav a {
    padding-inline: clamp(6px, .46vw, 10px);
    font-size: clamp(11.2px, .72vw, 14px);
  }
}

/*
 * Final shared shell alignment.
 * A few older content templates intentionally limited `.prose` to a reading
 * column. That made otherwise primary panels start on the same rail but end
 * earlier than the hero, calculator and cards. Primary page blocks now share
 * the exact shell width on every CMS route; inner content keeps its own
 * typography and may wrap naturally.
 *
 * This is deliberately a single, shared override instead of page-specific
 * width patches, so navigation between home, calculator, city and model pages
 * cannot make the visual rails or mobile menu control jump.
 */
:where(body:not([data-page-type="home"])) .wrap > :is(
  .hero,
  .card,
  .calculator,
  .lead,
  .prose,
  .legal-document,
  .model-index-list,
  section,
  article
) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
}

/* The header is one component rendered by two templates (`.topbar` on home
 * and `.header` elsewhere). Keep the outer rail, logo box and menu centre
 * identical at every responsive breakpoint. */
.topbar,
.header,
body[data-page-type="calculator"] .header {
  box-sizing: border-box;
}

@media (max-width: 980px) {
  .topbar .menu-toggle,
  .header .menu-toggle,
  body[data-page-type="calculator"] .header .menu-toggle {
    grid-area: menu;
    align-self: center;
    justify-self: end;
    margin: 0;
    transform: none;
  }

  .topbar,
  .header,
  body[data-page-type="calculator"] .header {
    grid-template-columns: minmax(0, 1fr) 50px;
    grid-template-areas:
      "logo menu"
      "nav nav";
    column-gap: 8px;
    row-gap: 0;
    padding: 10px 12px;
  }

  .topbar {
    grid-template-areas:
      "brand menu"
      "nav nav";
  }

  .topbar .menu-toggle,
  .header .menu-toggle,
  body[data-page-type="calculator"] .header .menu-toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}

/* One mobile shell for the header and every primary content panel.
 * CMS pages previously had both a `main` and a nested `.wrap` gutter, while
 * the header had only one gutter. Keep a single 16px edge on every route. */
@media (max-width: 760px) {
  main {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    min-width: 0;
    margin-inline: auto;
  }

  body:not([data-page-type="home"]) main > .wrap,
  body:not([data-page-type="home"]) .wrap,
  main > .wrap,
  main .wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
  }

  .topbar .brand-logo,
  .header .logo-image-link,
  body[data-page-type="calculator"] .header .logo-image-link {
    width: clamp(176px, 52vw, 206px);
    min-height: 62px;
    padding: 6px 14px;
  }

  .topbar .brand-logo-image,
  .header .logo-image-link img,
  body[data-page-type="calculator"] .header .logo-image-link img {
    width: min(100%, 180px);
  }

  .topbar .menu-toggle,
  .header .menu-toggle,
  body[data-page-type="calculator"] .header .menu-toggle {
    position: relative;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    margin: 0;
    transform: none;
  }
}

}