/* =============================================================================
   MAI'S PERFORMANCE MOTORS
   Paste into: Elementor > Site Settings > Custom CSS
   (Elementor stores this in the database, so no PHP file is touched and a
   theme update cannot wipe it.)

   Section 0 below neutralises Twenty Twenty-Five and Elementor's own wrappers
   so the design lands exactly as approved. Everything after that is the
   stylesheet from the signed-off mockup, unchanged.
   ========================================================================== */


/* 0. UNDO THE THEME AND THE BUILDER ======================================== */

body.mais,
body.mais.elementor-page {
  margin: 0;
  padding: 0;
  background: var(--ink);
}

/* Twenty Twenty-Five injects layout constraints on every block wrapper. */
body.mais .wp-site-blocks,
body.mais .is-layout-constrained,
body.mais .entry-content {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* The theme header and footer are replaced by ours. */
body.mais > header.wp-block-template-part,
body.mais > footer.wp-block-template-part,
body.mais .wp-block-post-title,
body.mais .skip-link.screen-reader-text {
  display: none !important;
}

/* Elementor wraps every page in these; they must not add width or padding. */
body.mais .elementor,
body.mais .elementor-section-wrap,
body.mais .elementor-container,
body.mais .e-con,
body.mais .e-con-inner,
body.mais .elementor-widget-html,
body.mais .elementor-widget-container {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Our own markup sets every size; stop Elementor's defaults leaking in. */
body.mais .elementor-widget-html p { margin: 0; }

/* The admin bar shifts everything down for logged-in editors only. */
body.mais.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.mais.admin-bar .site-header { top: 46px; }
}




/* 1. TOKENS ================================================================ */

:root {
  /* Black paint, polished metal, white type. The cars bring the colour. */
  --ink:            #101014;
  --ink-2:          #191920;
  --chalk:          #ffffff;
  --bone:           #e7e5e0;
  --smoke:          #a3a3aa;
  --hairline:       rgba(255, 255, 255, .26);
  --hairline-soft:  rgba(255, 255, 255, .14);

  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad-x: clamp(20px, 3.4vw, 60px);
  --pad-y: clamp(18px, 2.1vw, 32px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur:  .32s;

  /* Flipped in RTL so the corner scrim always sits behind the copy. */
  --scrim-x: 0%;
  --start:   left;
}


/* 2. BASE + NO-SCROLL SHELL ================================================ */

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

html {
  min-height: 100%;
  background: var(--ink);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; height: auto; }

/* An author `display` must never beat the hidden attribute. Without this the
   lightbox sits invisibly over the whole page and swallows every click. */
[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }

.site { height: 100%; }

/* index-single-screen.html: the client's original brief — one screen, no scroll. */
.is-single-screen,
.is-single-screen .site { height: 100%; overflow: hidden; overscroll-behavior: none; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* never wider than the screen */
  grid-template-rows: 1fr auto;            /* content, then the stock line */
  height: 100vh;
  height: 100dvh;                /* honours the mobile browser chrome */
  width: 100%;
  overflow: hidden;
}
/* Set by script.js only where 100dvh is unsupported. */
.no-dvh .hero { height: calc(var(--vh, 1vh) * 100); }

/* On the single-screen homepage the header sits inside the hero grid. */
.is-single-screen .hero { grid-template-rows: auto 1fr auto; }


/* 3. HERO VIDEO LAYER ====================================================== */

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* REPLACE LATER: poster frames live in /assets alongside the two videos. */
  background: #000 url('https://slateblue-cassowary-817355.hostingersite.com/wp-content/uploads/2026/09/hero-poster.jpg') center / cover no-repeat;
}

.hero-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Restrained grade: a touch more contrast, a touch less colour. */
  filter: contrast(1.08) saturate(.88) brightness(.9);
  transform: scale(1.01);
  animation: heroDrift 34s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroDrift {
  from { transform: scale(1.01); }
  to   { transform: scale(1.035); }
}

/* One element, four layers: top scrim, bottom scrim, corner scrim, vignette. */
.hero-video__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,4,5,.76) 0%, rgba(4,4,5,.28) 20%, rgba(4,4,5,0) 42%),
    linear-gradient(0deg,   rgba(4,4,5,.92) 0%, rgba(4,4,5,.52) 22%, rgba(4,4,5,.12) 46%, rgba(4,4,5,0) 60%),
    radial-gradient(82% 82% at var(--scrim-x) 100%, rgba(4,4,5,.82) 0%, rgba(4,4,5,0) 70%),
    radial-gradient(132% 104% at 50% 42%, rgba(4,4,5,0) 34%, rgba(4,4,5,.58) 100%);
}


/* 4. HEADER ================================================================ */

.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 10;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 44px);
  padding: var(--pad-y) var(--pad-x);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
}
/* Solid once the film is behind you, so the nav never fights the content. */
.is-scrolled .site-header {
  background: rgba(5, 5, 6, .95);
  border-bottom-color: var(--hairline-soft);
  padding-block: calc(var(--pad-y) * .68);
}
.is-single-screen .site-header { position: relative; z-index: 2; }

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

.brand {
  margin-inline-end: auto;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  text-decoration: none;
  color: var(--chalk);
  opacity: .95;
  transition: opacity .5s var(--ease);
}
.brand:hover { opacity: .68; }

.brand__mark {
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 500;
  font-stretch: 118%;
  letter-spacing: .34em;
  text-transform: uppercase;
  line-height: 1;
}

.brand__locale {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--smoke);
  line-height: 1;
}

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

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.1vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: 7px;
  color: var(--bone);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  font-stretch: 104%;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .8;
  transition: opacity var(--dur) var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--start);
  transition: transform .3s var(--ease);
}
.nav-link:hover,
.nav-link:focus-visible { opacity: 1; }
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }

/* --- Utilities: language + phone ------------------------------------------ */

.header-utilities {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
}
.header-utilities::before {
  content: '';
  width: 1px;
  height: 11px;
  background: var(--hairline);
}

.language-switcher { display: flex; align-items: center; gap: 7px; }

.lang-option {
  appearance: none;
  margin: 0;
  padding: 3px 1px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--smoke);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lang-option:hover { color: var(--bone); }
.lang-option.is-active {
  color: var(--chalk);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6);
}

.lang-sep,
.utility-sep {
  width: 1px;
  height: 9px;
  background: var(--hairline-soft);
}
.utility-sep { height: 11px; background: var(--hairline); }

.site-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--chalk);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .03em;
  white-space: nowrap;
  transition: opacity var(--dur) var(--ease);
}
.site-phone:hover { opacity: .74; }
.site-phone__icon { flex: none; opacity: .55; transition: opacity var(--dur) var(--ease); }
.site-phone:hover .site-phone__icon { opacity: 1; }
/* Keep the number reading left-to-right in every language. */
.site-phone__number { direction: ltr; unicode-bidi: isolate; }


/* 5. HERO CONTENT ========================================================== */

.hero-content {
  position: relative;
  z-index: 2;
  min-width: 0;
  align-self: end;
  max-width: min(780px, 56vw);
  padding: 0 var(--pad-x) clamp(20px, 2.6vw, 40px);
}

.hero-eyebrow {
  margin: 0 0 clamp(13px, 1.5vw, 20px);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--smoke);
}

.hero-title {
  margin: 0;
  font-size: clamp(2.2rem, 4.35vw, 4.1rem);
  font-weight: 500;
  font-stretch: 112%;
  line-height: .95;
  letter-spacing: -.004em;
  text-transform: uppercase;
  color: var(--chalk);
  text-wrap: balance;
}
.hero-title__line { display: block; overflow: hidden; }
.hero-title__line > span { display: block; }

.hero-lede {
  margin: clamp(15px, 1.7vw, 24px) 0 0;
  max-width: 36ch;
  font-size: clamp(.95rem, 1.06vw, 1.08rem);
  line-height: 1.6;
  color: var(--bone);
  opacity: .7;
}
.hero-lede span { display: block; }

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(22px, 2.5vw, 34px);
  padding-block: 0 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  color: var(--chalk);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  font-stretch: 104%;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: border-color var(--dur) var(--ease);
}
.hero-cta:hover,
.hero-cta:focus-visible { border-bottom-color: var(--chalk); }
.hero-cta__arrow {
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.hero-cta:hover .hero-cta__arrow,
.hero-cta:focus-visible .hero-cta__arrow { transform: translateX(5px); }


/* 6. STOCK LINE ============================================================ */

.stock-ticker {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 24px);
  padding: 11px var(--pad-x);
  background: linear-gradient(0deg, rgba(4,4,5,.5), rgba(4,4,5,0));
}
/* The only rule on the page — drawn in on load. */
.stock-ticker::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--hairline-soft);
  transform: scaleX(0);
  transform-origin: var(--start);
}

.stock-ticker__label {
  flex: none;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--smoke);
}

.stock-ticker__viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 93%, transparent);
}

.stock-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: tickerScroll 62s linear infinite;
}
.stock-ticker:hover .stock-ticker__track,
.stock-ticker:focus-within .stock-ticker__track { animation-play-state: paused; }

@keyframes tickerScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.stock-item { display: flex; align-items: center; }
.stock-item::after {
  content: '';
  width: 1px;
  height: 9px;
  background: var(--hairline-soft);
}

.stock-item__link {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  padding-inline: clamp(16px, 1.6vw, 26px);
  color: var(--smoke);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.stock-item__link:hover,
.stock-item__link:focus-visible { color: var(--bone); }

.stock-item__price { color: var(--bone); direction: ltr; unicode-bidi: isolate; }
.stock-item__link:hover .stock-item__price { color: var(--chalk); }

.stock-item.is-sold .stock-item__name  { opacity: .45; }
.stock-item.is-sold .stock-item__price {
  color: var(--smoke);
  letter-spacing: .2em;
  box-shadow: inset 0 -1px 0 var(--hairline-soft);
}

/* Shown only when motion is reduced or autoplay is refused. */
.film-toggle {
  flex: none;
  appearance: none;
  margin: 0;
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: none;
  cursor: pointer;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.film-toggle:hover { color: var(--chalk); border-bottom-color: var(--chalk); }


/* 7. ENTRANCE CHOREOGRAPHY ================================================= */
/* Only applied when JavaScript is present, so the page is never blank without it. */

.js .brand,
.js .nav-item,
.js .header-utilities,
.js .hero-eyebrow,
.js .hero-lede,
.js .hero-cta,
.js .stock-ticker__label,
.js .stock-ticker__viewport,
.js .film-toggle {
  opacity: 0;
  transform: translateY(10px);
}
.js .hero-title__line > span { transform: translateY(104%); }

.is-ready .brand,
.is-ready .nav-item,
.is-ready .header-utilities,
.is-ready .hero-eyebrow,
.is-ready .hero-lede,
.is-ready .hero-cta,
.is-ready .stock-ticker__label,
.is-ready .stock-ticker__viewport,
.is-ready .film-toggle {
  opacity: 1;
  transform: none;
  transition: opacity .85s var(--ease) var(--d, 0s),
              transform .85s var(--ease) var(--d, 0s);
}
.is-ready .hero-title__line > span {
  transform: none;
  transition: transform 1s var(--ease) var(--d, 0s), opacity .22s ease;
}
.is-ready .stock-ticker::before {
  transform: scaleX(1);
  transition: transform 1.1s var(--ease) .95s;
}

.js .brand              { --d: .05s; }
.js .nav-item:nth-child(1) { --d: .13s; }
.js .nav-item:nth-child(2) { --d: .19s; }
.js .nav-item:nth-child(3) { --d: .25s; }
.js .header-utilities   { --d: .31s; }
.js .hero-eyebrow       { --d: .42s; }
.js .hero-title__line:nth-child(1) > span { --d: .48s; }
.js .hero-title__line:nth-child(2) > span { --d: .55s; }
.js .hero-title__line:nth-child(3) > span { --d: .62s; }
.js .hero-lede          { --d: .78s; }
.js .hero-cta           { --d: .86s; }
.js .stock-ticker__label,
.js .stock-ticker__viewport,
.js .film-toggle        { --d: 1.02s; }

/* Copy crossfades on a language change rather than snapping. */
[data-i18n] { transition: opacity .22s ease; }
.lang-switching [data-i18n] { opacity: 0; }

/* The video fades up behind everything as soon as it has frames to show. */
.hero-video__el { opacity: 0; transition: opacity 1.2s ease; }
.video-ready .hero-video__el,
.no-js .hero-video__el { opacity: 1; }


/* 8. RIGHT-TO-LEFT (ARABIC) ================================================ */

[dir="rtl"] { --scrim-x: 100%; --start: right; }

[dir="rtl"] .hero-cta__arrow { transform: scaleX(-1); }
[dir="rtl"] .hero-cta:hover .hero-cta__arrow,
[dir="rtl"] .hero-cta:focus-visible .hero-cta__arrow { transform: scaleX(-1) translateX(5px); }

[dir="rtl"] .stock-ticker__track { animation-name: tickerScrollRtl; }
@keyframes tickerScrollRtl {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(50%, 0, 0); }
}
[dir="rtl"] .stock-ticker__viewport {
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 2.5%, #000 93%, transparent);
          mask-image: linear-gradient(270deg, transparent, #000 2.5%, #000 93%, transparent);
}

/* Archivo carries no Cyrillic and no Arabic, so each of those languages brings
   its own companion face, loaded by script.js only when it is chosen. The Latin
   wordmark, the phone number and the car names never change face. */
html[lang="ar"] .nav-link,
html[lang="ar"] .hero-eyebrow,
html[lang="ar"] .hero-title,
html[lang="ar"] .hero-lede,
html[lang="ar"] .hero-cta,
html[lang="ar"] .stock-ticker__label,
html[lang="ar"] .film-toggle,
html[lang="ar"] .skip-link { font-family: 'IBM Plex Sans Arabic', var(--font-display); }

/* IBM Plex Mono already carries Cyrillic, so the mono micro-labels keep it. */
html[lang="ru"] .nav-link,
html[lang="ru"] .hero-title,
html[lang="ru"] .hero-lede,
html[lang="ru"] .hero-cta,
html[lang="ru"] .skip-link { font-family: 'Manrope', var(--font-display); font-stretch: normal; }
html[lang="ru"] .hero-title { letter-spacing: .005em; }

/* Arabic sets without letter-spacing — spacing breaks the joins — and without
   uppercasing, which does not exist in the script. */
html[lang="ar"] .nav-link,
html[lang="ar"] .hero-eyebrow,
html[lang="ar"] .hero-title,
html[lang="ar"] .hero-cta,
html[lang="ar"] .stock-ticker__label,
html[lang="ar"] .film-toggle,
html[lang="ar"] .skip-link {
  letter-spacing: 0;
  font-stretch: normal;
}
html[lang="ar"] .nav-link,
html[lang="ar"] .hero-eyebrow,
html[lang="ar"] .hero-title,
html[lang="ar"] .hero-cta,
html[lang="ar"] .stock-ticker__label,
html[lang="ar"] .film-toggle,
html[lang="ar"] .skip-link { text-transform: none; }
html[lang="ar"] .hero-title { font-size: clamp(2.1rem, 4.4vw, 4.2rem); line-height: 1.16; }
html[lang="ar"] .hero-lede { line-height: 1.75; }


/* 9. RESPONSIVE ============================================================ */

/* --- Large desktop -------------------------------------------------------- */
@media (min-width: 1600px) {
  .hero-content { max-width: 820px; }
}

/* --- Small desktop / laptop (1366 × 768 and below) ------------------------ */
@media (max-width: 1400px) {
  .hero-title { font-size: clamp(2.2rem, 4.6vw, 4.1rem); }
}

/* --- Tablet (1024 × 1366, 834 × 1194) ------------------------------------- */
@media (max-width: 1024px) {
  .hero-content { max-width: min(700px, 80vw); }
  .nav-list { gap: 22px; }
  .header-utilities { gap: 16px; }
  .site-phone__number { font-size: 11.5px; }
  .hero-title { font-size: clamp(2.4rem, 5.6vw, 3.6rem); }
}

/* --- Mobile: the composition is rebuilt, not shrunk ----------------------- */
@media (max-width: 760px) {
  :root {
    --pad-x: 20px;
    --pad-y: 16px;
    --phone-bar: calc(54px + env(safe-area-inset-bottom, 0px));
  }

  .hero { height: calc(100dvh - var(--phone-bar)); }
  body:not(.is-single-screen) { padding-bottom: var(--phone-bar); }
  .hero-video { background-image: url('https://slateblue-cassowary-817355.hostingersite.com/wp-content/uploads/2026/09/hero-poster-mobile.jpg'); }
  /* A phone should not re-upload a scaled, filtered video texture every frame. */
  .hero-video__el { animation: none; transform: none; will-change: auto; }
  .hero-video__grade {
    background:
      linear-gradient(180deg, rgba(4,4,5,.8) 0%, rgba(4,4,5,.3) 14%, rgba(4,4,5,0) 32%),
      linear-gradient(0deg,   rgba(4,4,5,.93) 0%, rgba(4,4,5,.78) 26%, rgba(4,4,5,.42) 44%, rgba(4,4,5,0) 66%),
      radial-gradient(120% 56% at 50% 100%, rgba(4,4,5,.62) 0%, rgba(4,4,5,0) 72%);
  }

  /* Header becomes two rows: wordmark + language, then the three sections. */
  .site-header {
    flex-wrap: wrap;
    row-gap: 14px;
    column-gap: 12px;
  }
  .header-utilities { order: 2; gap: 0; }
  .js .header-utilities { transform: none; }   /* keeps the fixed phone bar anchored */
  .header-utilities::before,
  .utility-sep { display: none; }
  .site-navigation { order: 3; flex: 1 0 100%; }
  .nav-list { justify-content: space-between; gap: 8px; }
  .nav-link { font-size: 11.5px; letter-spacing: .11em; padding-block: 4px; }
  .brand__mark { font-size: 14px; letter-spacing: .3em; }

  /* Phone number moves to a permanent, thumb-height bar. */
  .site-phone {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 5;
    justify-content: center;
    height: var(--phone-bar);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--ink);
    border-top: 1px solid var(--hairline-soft);
    font-size: 15px;
    letter-spacing: .04em;
  }
  .site-phone__icon { opacity: .8; }

  .hero-content { max-width: none; padding-bottom: 18px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: .2em; margin-bottom: 12px; }
  .hero-title { font-size: clamp(1.85rem, 8.9vw, 2.75rem); line-height: .98; }
  .hero-lede { font-size: 15px; max-width: 30ch; margin-top: 14px; }
  .hero-lede span { display: inline; }
  .hero-cta { margin-top: 20px; gap: 13px; padding-block: 8px 12px; font-size: 11.5px; }

  .stock-ticker { padding: 9px 0 10px; gap: 0; }
  .stock-ticker__label { display: none; }
  .stock-ticker__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .stock-item__link { font-size: 11px; padding-inline: 14px; gap: 9px; }
  .stock-ticker__track { animation-duration: 46s; }
  .film-toggle { margin-inline-end: var(--pad-x); }
}

/* --- Small phones (375 × 812) --------------------------------------------- */
@media (max-width: 380px) {
  .hero-title { font-size: 1.85rem; }
  .nav-link { font-size: 11px; letter-spacing: .08em; }
  .lang-option { font-size: 11.5px; }
}

/* --- Short landscape: keep everything inside the viewport ----------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-title { font-size: clamp(1.6rem, 4.2vh, 2.6rem); }
  .hero-lede { display: none; }
  .hero-eyebrow { margin-bottom: 10px; }
  .hero-cta { margin-top: 16px; }
  .site-header { padding-block: 12px; }
  .stock-ticker { padding-block: 8px; }
}


/* 10. REDUCED MOTION, FOCUS, PRINT ========================================= */

:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .9);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-video__el { animation: none; transform: none; }
  .stock-ticker__track { animation: none; }
  .stock-ticker::before { transform: scaleX(1); }
}

@media print {
  .hero { height: auto; }
  .hero-video, .stock-ticker { display: none; }
  body { background: #fff; color: #000; overflow: visible; }
}


/* =============================================================================
   11. THE PAGE BELOW THE FILM
   Stock, about, contact, footer. Same restraint as the hero: hairlines instead
   of boxes, one type scale, no rounded cards, no accent colour.
   ========================================================================== */

/* --- Scroll cue: the hero has to admit the page continues ----------------- */

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 58px;
  z-index: 3;
  transform: translateX(-50%);
  display: block;
  padding: 8px 12px;
  opacity: .75;
  transition: opacity var(--dur) var(--ease);
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll__rail {
  display: block;
  position: relative;
  width: 1px;
  height: 34px;
  background: var(--hairline);
  overflow: hidden;
}
.hero-scroll__dot {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 11px;
  background: var(--chalk);
  animation: scrollHint 2.6s var(--ease) infinite;
}
@keyframes scrollHint {
  0%   { transform: translateY(-13px); opacity: 0; }
  22%  { opacity: 1; }
  76%  { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

/* --- Sections ------------------------------------------------------------- */

.section {
  padding: clamp(74px, 8.5vw, 148px) var(--pad-x);
  scroll-margin-top: clamp(78px, 9vh, 104px);
}
.section--about { background: var(--ink-2); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-width: 0;
  gap: 20px 32px;
  padding-bottom: 20px;
  margin-bottom: clamp(30px, 3.6vw, 56px);
  border-bottom: 1px solid var(--hairline-soft);
}

.section__eyebrow {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--smoke);
}

.section__title {
  margin: 0;
  font-size: clamp(1.75rem, 3.3vw, 3rem);
  font-weight: 500;
  font-stretch: 110%;
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--chalk);
  text-wrap: balance;
}

.section__heading { min-width: 0; }
.section__action { justify-self: end; padding-bottom: 4px; }

/* --- Links ---------------------------------------------------------------- */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--chalk);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  font-stretch: 104%;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  transition: border-color var(--dur) var(--ease);
}
.text-link:hover,
.text-link:focus-visible { border-bottom-color: var(--chalk); }
.text-link__arrow { flex: none; transition: transform var(--dur) var(--ease); }
.text-link:hover .text-link__arrow,
.text-link:focus-visible .text-link__arrow,
.button-link:hover .text-link__arrow,
.button-link:focus-visible .text-link__arrow { transform: translateX(5px); }

.button-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(26px, 3vw, 38px);
  padding: 16px 26px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--chalk);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  font-stretch: 104%;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.button-link:hover,
.button-link:focus-visible {
  border-color: var(--chalk);
  background: rgba(255, 255, 255, .05);
}

.plain-link {
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--hairline-soft);
  transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plain-link:hover { color: var(--chalk); box-shadow: inset 0 -1px 0 var(--chalk); }

/* --- Stock: photo and price, nothing else -------------------------------- */

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 1.8vw, 30px);
  row-gap: clamp(34px, 3.4vw, 58px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vehicle-card__link { display: block; text-decoration: none; color: inherit; }

.vehicle-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0d0d10;
}
.vehicle-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Shown in full, true colour at all times (client request). Hover keeps a
     gentle zoom, but no longer changes the colour. */
  filter: contrast(1.02) saturate(1) brightness(1);
  transform: scale(1.001);
  transition: transform 1s var(--ease), filter .7s var(--ease);
}
.vehicle-card__link:hover .vehicle-card__media img,
.vehicle-card__link:focus-visible .vehicle-card__media img {
  transform: scale(1.045);
  filter: contrast(1.02) saturate(1) brightness(1);
}

.vehicle-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
  transition: border-color var(--dur) var(--ease);
}
.vehicle-card__link:hover .vehicle-card__foot { border-top-color: var(--hairline); }

.vehicle-card__name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bone);
  transition: color var(--dur) var(--ease);
}
.vehicle-card__link:hover .vehicle-card__name { color: var(--chalk); }

.vehicle-card__price {
  flex: none;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--chalk);
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- About ---------------------------------------------------------------- */

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 88px);
  align-items: center;
}

.about-media { margin: 0; }
.about-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: contrast(1.06) saturate(.6) brightness(.82);
}

.about-para {
  max-width: 52ch;
  margin: 0 0 16px;
  font-size: clamp(.92rem, 1.05vw, 1.02rem);
  line-height: 1.68;
  color: var(--bone);
  opacity: .72;
}
.about-para:last-of-type { margin-bottom: 0; }

.fact-list { margin: clamp(28px, 3.2vw, 46px) 0 0; }

.fact {
  display: grid;
  grid-template-columns: minmax(0, 16ch) minmax(0, 1fr);
  gap: 8px 24px;
  padding: 15px 0;
  border-top: 1px solid var(--hairline-soft);
}
.fact:last-child { border-bottom: 1px solid var(--hairline-soft); }

.fact__term {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--chalk);
}
.fact__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--smoke);
}

/* --- Contact -------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: start;
}

.contact-phone {
  display: inline-block;
  margin-top: 6px;
  font-size: clamp(1.75rem, 4.2vw, 3.4rem);
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -.015em;
  line-height: 1.05;
  color: var(--chalk);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  transition: opacity var(--dur) var(--ease);
}
.contact-phone:hover { opacity: .72; }

.contact-note {
  max-width: 46ch;
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: 15px;
  line-height: 1.68;
  color: var(--smoke);
}

.contact-details { margin: 0; }
/* A Latin postal address keeps its own reading order in every language. */
.address { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .address { text-align: right; }
.contact-details .fact:first-child { border-top: 1px solid var(--hairline-soft); }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  padding: clamp(26px, 3vw, 40px) var(--pad-x) clamp(34px, 4vw, 54px);
  border-top: 1px solid var(--hairline-soft);
}
.site-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px 40px;
  flex-wrap: wrap;
}
.brand--footer .brand__mark { font-size: 14px; }
.site-footer__legal {
  margin: clamp(24px, 2.6vw, 36px) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(160, 160, 166, .85);
}

/* Agency credit: a quiet line under the legal bar, as on the other Digital
   Heroes builds — styled to sit within this footer, not shout. */
.site-footer__credit {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(160, 160, 166, .5);
}
.site-footer__credit a {
  color: rgba(160, 160, 166, .8);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-soft);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible { color: var(--chalk); border-bottom-color: var(--chalk); }

/* --- Reveal on scroll ----------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}


/* 12. RESPONSIVE — the page below the film ================================= */

@media (max-width: 1024px) {
  .about-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 36px; }
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 44px; }
}

@media (max-width: 900px) {
  .vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-layout,
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .about-media { order: 2; }
  .about-media img { aspect-ratio: 16 / 10; }
  .contact-details { margin-top: 8px; }
}

@media (max-width: 760px) {
  .section { padding-block: clamp(58px, 13vw, 84px); }
  .section__head { grid-template-columns: minmax(0, 1fr); }
  .section__action { justify-self: start; }
  .vehicle-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .vehicle-card__media { aspect-ratio: 3 / 2; }
  .fact { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hero-scroll { bottom: 46px; }
  .site-footer__row { align-items: flex-start; flex-direction: column; gap: 18px; }
  .footer-navigation .nav-list { gap: 18px; flex-wrap: wrap; }
}

/* Cyrillic and Arabic companions apply to the new copy as well. */
html[lang="ru"] .section__title,
html[lang="ru"] .about-para,
html[lang="ru"] .contact-note,
html[lang="ru"] .fact__term,
html[lang="ru"] .fact__desc,
html[lang="ru"] .text-link,
html[lang="ru"] .button-link,
html[lang="ru"] .vehicle-card__name { font-family: 'Manrope', var(--font-display); font-stretch: normal; }

html[lang="ar"] .section__title,
html[lang="ar"] .about-para,
html[lang="ar"] .contact-note,
html[lang="ar"] .fact__term,
html[lang="ar"] .fact__desc,
html[lang="ar"] .text-link,
html[lang="ar"] .button-link,
html[lang="ar"] .site-footer__legal { font-family: 'IBM Plex Sans Arabic', var(--font-display); }
html[lang="ar"] .section__title,
html[lang="ar"] .section__eyebrow,
html[lang="ar"] .fact__term,
html[lang="ar"] .text-link,
html[lang="ar"] .button-link,
html[lang="ar"] .site-footer__legal { letter-spacing: 0; text-transform: none; font-stretch: normal; }
html[lang="ar"] .section__title { line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .hero-scroll__dot { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
}


/* =============================================================================
   13. INNER PAGES — stock, vehicle, about, contact
   The homepage is the only page that does not scroll. Everything here shares
   the hero's vocabulary: hairlines, one type scale, no boxes, no accent.
   ========================================================================== */

/* No film behind the header on these pages, so it starts solid. */
.page .site-header {
  background: rgba(5, 5, 6, .95);
  border-bottom-color: var(--hairline-soft);
}

.page-head {
  padding: clamp(112px, 14vh, 184px) var(--pad-x) clamp(30px, 3.6vw, 52px);
  border-bottom: 1px solid var(--hairline-soft);
}
.page-head__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 40px;
}

.page-title {
  margin: 0;
  font-size: clamp(1.95rem, 4.2vw, 3.6rem);
  font-weight: 500;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--chalk);
  text-wrap: balance;
}

/* Optical alignment: the stock title starts with an "A", whose empty triangular
   top-left makes the word read as indented under the "Current stock" eyebrow
   above it. A hair of negative indent lines the two up to the eye. */
.page-title[data-i18n="stock.pageTitle"] { text-indent: -.045em; }

.page-lede {
  margin: clamp(16px, 1.9vw, 24px) 0 0;
  max-width: 54ch;
  font-size: clamp(.92rem, 1.05vw, 1.02rem);
  line-height: 1.65;
  color: var(--bone);
  opacity: .72;
}

.page-count {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--smoke);
  white-space: nowrap;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--smoke);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.back-link:hover { color: var(--chalk); }
.back-link__arrow { transition: transform var(--dur) var(--ease); }
.back-link:hover .back-link__arrow { transform: translateX(-4px); }
[dir="rtl"] .back-link__arrow { transform: scaleX(-1); }
[dir="rtl"] .back-link:hover .back-link__arrow { transform: scaleX(-1) translateX(-4px); }

/* --- Sold cars ------------------------------------------------------------ */

.vehicle-card__media { position: relative; }

.vehicle-card__tag {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 5px 9px;
  background: rgba(5, 5, 6, .78);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
}

.vehicle-card.is-sold .vehicle-card__media img { filter: contrast(1.05) saturate(.16) brightness(.6); }
.vehicle-card.is-sold .vehicle-card__link:hover .vehicle-card__media img {
  filter: contrast(1.05) saturate(.3) brightness(.7);
  transform: scale(1.012);
}
.vehicle-card.is-sold .vehicle-card__price { color: var(--smoke); letter-spacing: .18em; }

.stock-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
  margin-top: clamp(38px, 4.5vw, 68px);
  padding-top: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid var(--hairline-soft);
}
.stock-note__text { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.65; color: var(--smoke); }

/* --- Vehicle page --------------------------------------------------------- */

.vehicle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
}

/* One scroll-snap track: it swipes on a phone with no JavaScript at all, and
   the thumbnails below drive it on a desktop. */
.gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #0d0d10;
}
.gallery__track::-webkit-scrollbar { display: none; }

.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  aspect-ratio: 3 / 2;
}
.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(1) brightness(1);
}

.gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.gallery__thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  opacity: .42;
  transition: opacity var(--dur) var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: .75; }
.gallery__thumb.is-active { opacity: 1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); }

.vehicle-aside { position: sticky; top: clamp(96px, 12vh, 128px); }

.vehicle-price {
  margin: 4px 0 0;
  font-size: clamp(1.55rem, 2.8vw, 2.3rem);
  font-weight: 500;
  font-stretch: 110%;
  letter-spacing: -.01em;
  color: var(--chalk);
  direction: ltr;
  unicode-bidi: isolate;
}
.vehicle-status {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--smoke);
}

.spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: clamp(24px, 3vw, 38px) 0 0;
}
.spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline-soft);
}
.spec__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--smoke);
}
.spec__value { font-size: 16px; color: var(--bone); text-align: end; }

.vehicle-copy { margin: clamp(28px, 3.4vw, 46px) 0 0; }
.vehicle-copy p {
  max-width: 62ch;
  margin: 0 0 15px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--bone);
  opacity: .74;
}
.vehicle-copy p:last-child { margin-bottom: 0; }

/* --- Contact form: rules, not boxes -------------------------------------- */

.form { display: grid; gap: clamp(22px, 2.6vw, 32px); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 32px); }

.field {
  padding: 15px 16px 0;
  background: rgba(255, 255, 255, .045);
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field:focus-within {
  background: rgba(255, 255, 255, .08);
  border-bottom-color: var(--chalk);
}

.field__label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
}

.field__control {
  display: block;
  width: 100%;
  padding: 0 0 15px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--chalk);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.5;
}
.field__control:focus { outline: none; }
.field__control::placeholder { color: rgba(143, 143, 148, .55); }
textarea.field__control { resize: vertical; min-height: 124px; }

select.field__control {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--smoke) 50%),
                    linear-gradient(135deg, var(--smoke) 50%, transparent 50%);
  background-position: calc(100% - 9px) calc(50% - 4px), calc(100% - 4px) calc(50% - 4px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 22px;
}
select.field__control option { background: var(--ink-2); color: var(--bone); }

.form__submit {
  justify-self: start;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
}

.form__status {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--bone);
}
.form__status[hidden] { display: none; }

/* --- Shared closing band -------------------------------------------------- */

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
  padding: clamp(54px, 6.5vw, 104px) var(--pad-x);
  border-top: 1px solid var(--hairline-soft);
}
.cta-band__title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 500;
  font-stretch: 110%;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--chalk);
}
.cta-band .button-link { margin-top: 0; }


/* 14. RESPONSIVE — inner pages ============================================= */

@media (max-width: 1024px) {
  .vehicle-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .vehicle-aside { position: static; }
}

@media (max-width: 760px) {
  .page-head { padding-top: clamp(104px, 20vh, 136px); }
  .page-head__row { grid-template-columns: minmax(0, 1fr); }
  .page-count { justify-self: start; }
  .gallery__thumbs {
    grid-auto-columns: 30%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .gallery__thumbs::-webkit-scrollbar { display: none; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

html[lang="ru"] .page-title,
html[lang="ru"] .page-lede,
html[lang="ru"] .cta-band__title,
html[lang="ru"] .field__control,
html[lang="ru"] .vehicle-copy p,
html[lang="ru"] .stock-note__text { font-family: 'Manrope', var(--font-display); font-stretch: normal; }

html[lang="ar"] .page-title,
html[lang="ar"] .page-lede,
html[lang="ar"] .cta-band__title,
html[lang="ar"] .field__control,
html[lang="ar"] .field__label,
html[lang="ar"] .spec__label,
html[lang="ar"] .page-count,
html[lang="ar"] .back-link,
html[lang="ar"] .vehicle-copy p,
html[lang="ar"] .stock-note__text { font-family: 'IBM Plex Sans Arabic', var(--font-display); }
html[lang="ar"] .page-title,
html[lang="ar"] .field__label,
html[lang="ar"] .spec__label,
html[lang="ar"] .page-count,
html[lang="ar"] .back-link,
html[lang="ar"] .vehicle-card__tag { letter-spacing: 0; text-transform: none; font-stretch: normal; }
html[lang="ar"] .page-title { line-height: 1.28; }

/* Second about block mirrors the first so the page has a rhythm. */
.about-layout--reverse .about-media { order: 2; }

/* =============================================================================
   15. WHITE, USED TWICE
   The theme stays dark. White is spent on exactly two things: telling you which
   page you are on, and the single action that matters most on that page. One
   filled button per page, never two — the secondary action keeps the outline.
   ========================================================================== */

.nav-link[aria-current="page"] { opacity: 1; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.button-link--primary {
  border-color: var(--chalk);
  background: var(--chalk);
  color: var(--ink);
}
.button-link--primary:hover,
.button-link--primary:focus-visible {
  border-color: var(--bone);
  background: var(--bone);
  color: var(--ink);
}

/* --- About: the three steps ------------------------------------------------
   Numbered because it is genuinely a sequence, not for decoration. */

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 46px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step { padding-top: 20px; border-top: 1px solid var(--hairline); }
.step__num {
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--smoke);
}
.step__title {
  margin: 0 0 11px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--chalk);
}
.step__desc {
  margin: 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--smoke);
}

@media (max-width: 900px) {
  .step-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step { padding-block: 20px; }
  .step__num { margin-bottom: 12px; }
  .step__desc { max-width: 52ch; }
}

html[lang="ru"] .step__title,
html[lang="ru"] .step__desc { font-family: 'Manrope', var(--font-display); font-stretch: normal; }
html[lang="ar"] .step__title,
html[lang="ar"] .step__desc { font-family: 'IBM Plex Sans Arabic', var(--font-display); }

/* --- Enlarge a photograph -------------------------------------------------
   Promised in the proposal: swipeable on mobile, click to enlarge on desktop. */

.gallery__track--zoomable .gallery__slide { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
  padding: clamp(16px, 4vw, 56px);
  background: rgba(3, 3, 4, .96);
  animation: lightboxIn .28s var(--ease);
}
@keyframes lightboxIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox__stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-width: 0;
  height: 100%;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: contrast(1.02) saturate(1);
}

.lightbox__close,
.lightbox__nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--hairline-soft);
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { color: var(--chalk); border-color: var(--chalk); }
.lightbox__close {
  position: absolute;
  top: clamp(14px, 3vw, 32px);
  inset-inline-end: clamp(14px, 3vw, 32px);
}
[dir="rtl"] .lightbox__nav svg { transform: scaleX(-1); }

.lightbox__count {
  position: absolute;
  bottom: clamp(14px, 3vw, 32px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--smoke);
  direction: ltr;
}

@media (max-width: 760px) {
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox { padding: 56px 12px 64px; }
}

/* --- Move on to the next car ---------------------------------------------- */

.vehicle-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline-soft);
  border-block: 1px solid var(--hairline-soft);
}
.vehicle-pager__link {
  display: block;
  padding: clamp(24px, 3vw, 40px) var(--pad-x);
  background: var(--ink);
  color: var(--bone);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.vehicle-pager__link:hover { background: var(--ink-2); }
.vehicle-pager__link--next { text-align: end; }

.vehicle-pager__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.vehicle-pager__link--next .vehicle-pager__label { justify-content: flex-end; }
[dir="rtl"] .vehicle-pager__label svg { transform: scaleX(-1); }

.vehicle-pager__name {
  display: block;
  margin-top: 12px;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 500;
  font-stretch: 106%;
  letter-spacing: -.01em;
  color: var(--chalk);
}

@media (max-width: 700px) {
  .vehicle-pager { grid-template-columns: minmax(0, 1fr); }
  .vehicle-pager__link--next { text-align: start; }
  .vehicle-pager__link--next .vehicle-pager__label { justify-content: flex-start; }
}

html[lang="ru"] .vehicle-pager__name { font-family: 'Manrope', var(--font-display); font-stretch: normal; }
html[lang="ar"] .vehicle-pager__name { font-family: 'IBM Plex Sans Arabic', var(--font-display); font-stretch: normal; }

/* --- Form errors, said next to the field that has the problem ------------- */

.field--error { border-bottom-color: rgba(255, 255, 255, .75); }
.field__error {
  display: block;
  padding: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--chalk);
}

/* The supplied lockup, used at full width in the footer. */
.brand__logo {
  display: block;
  width: clamp(150px, 15vw, 196px);
  height: auto;
  opacity: .92;
  transition: opacity .5s var(--ease);
}
.brand--footer:hover .brand__logo { opacity: 1; }


/* =============================================================================
   NATIVE ELEMENTOR WIDGET SHIM
   Lets a page be built from native Elementor widgets (Heading, Text, Image,
   Button) that carry the site's own classes, while looking identical to the
   hand-built markup. Only affects widgets on .mais pages; HTML-widget pages are
   untouched. The custom class sits on the widget wrapper; the inner element
   inherits type so our .page-title/.section__title/etc. rules win.
   ========================================================================== */
body.mais .elementor-widget:not(.elementor-widget-html) { margin-block: 0; }
body.mais .elementor-widget > .elementor-widget-container { margin: 0; padding: 0; }
body.mais .elementor-widget-heading .elementor-heading-title,
body.mais .elementor-widget-text-editor .elementor-widget-container,
body.mais .elementor-widget-text-editor p {
  font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
  text-transform: inherit; margin: 0;
}
body.mais .elementor-widget-button .elementor-button {
  background: none; border: 0; border-radius: 0; padding: 0; font: inherit; color: inherit;
}
body.mais .elementor-widget-image { line-height: 0; }
body.mais .elementor-widget-image img { display: block; }
/* Elementor containers that carry our layout classes must honour our layout,
   not Elementor's flex defaults. */
body.mais .e-con.about-layout, body.mais .e-con.page-head__row,
body.mais .e-con.fact-list, body.mais .e-con.step-grid,
body.mais .e-con.section__head { display: revert; }


/* =============================================================================
   TINGE OF WHITE  (client request, Sep 2026)
   Keeps the dark theme but lifts it: brighter dividers/muted text (tokens above)
   and a faint light frame inset around every page, so the black feels less heavy.
   ========================================================================== */
/* A touch more life in the body copy and section grounds. */
.section--about { background: var(--ink-2); }
.about-para, .contact-note, .fact__desc, .vehicle-copy p, .stock-note__text { color: #b9b9bf; }

/* --- Stock brand filter (client request) ---------------------------------- */
.stock-filter { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(26px, 3vw, 44px); }
.stock-filter__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--smoke);
}
.stock-filter__select {
  appearance: none; -webkit-appearance: none;
  background-color: transparent; color: var(--bone);
  border: 1px solid var(--hairline); border-radius: 2px;
  font: inherit; font-size: 13px; letter-spacing: .02em;
  padding: 9px 36px 9px 14px; cursor: pointer;
  transition: border-color var(--dur) var(--ease);
  background-image: linear-gradient(45deg, transparent 50%, var(--smoke) 50%),
                    linear-gradient(135deg, var(--smoke) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.stock-filter__select:hover, .stock-filter__select:focus { border-color: var(--chalk); outline: none; }
.stock-filter__select option { background: var(--ink-2); color: var(--bone); }
.vehicle-card[hidden] { display: none; }
[dir="rtl"] .stock-filter__select {
  padding: 9px 14px 9px 36px;
  background-position: 16px 50%, 11px 50%;
}