/* ==========================================================================
   MICROSS — Industrial Blueprint design layer
   ---------------------------------------------------------------------------
   Loaded last. Overrides site.css + vehicle-catalog.css.
   Direction: engineering-drawing aesthetic for a special-purpose vehicle
   export business. Warm charcoal + safety amber, expanded display type,
   monospaced technical labels, 2px corners, hairline rules instead of
   drop shadows, drafting grid on dark surfaces.

   Palette and contrast ratios are computed, not guessed:
     amber        on ink-700   6.23:1  AA
     amber-soft   on ink-700   8.39:1  AA
     ink-200      on ink-700   8.50:1  AA
     ink-300      on ink-700   5.55:1  AA
     amber-ink    on paper     6.33:1  AA
     ink-500      on paper     6.34:1  AA
     ink-700      on paper    12.63:1  AA
     ink-700      on amber     6.23:1  AA
   Amber text is only used on dark surfaces; on light surfaces the deeper
   amber-ink is used instead (amber-deep is reserved for >=24px / borders).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* surfaces — warm-tinted charcoal, never pure black */
  --bp-ink-900: oklch(16% 0.006 70);
  --bp-ink-800: oklch(21% 0.007 70);
  --bp-ink-700: oklch(27.5% 0.008 70);
  --bp-ink-600: oklch(34% 0.008 70);
  --bp-ink-500: oklch(45% 0.008 72);
  --bp-ink-400: oklch(58% 0.008 72);
  --bp-ink-300: oklch(70% 0.007 74);
  --bp-ink-200: oklch(82% 0.005 74);
  --bp-ink-100: oklch(90% 0.004 74);
  --bp-paper-2: oklch(97.6% 0.003 76);
  --bp-paper: oklch(94.5% 0.004 76);

  /* accent — safety amber, used sparingly (10% rule) */
  --bp-amber: oklch(74% 0.15 65);
  --bp-amber-soft: oklch(82% 0.09 70);
  --bp-amber-deep: oklch(58% 0.145 58);
  --bp-amber-ink: oklch(46% 0.115 52);

  /* type families */
  --bp-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bp-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bp-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* modular scale, ratio 1.25 (major third) on a 1rem base */
  --bp-t-2xs: 0.6875rem;
  --bp-t-xs: 0.75rem;
  --bp-t-sm: 0.875rem;
  --bp-t-base: 1rem;
  --bp-t-md: 1.25rem;
  --bp-t-lg: 1.5625rem;
  --bp-t-xl: 1.9531rem;
  --bp-t-2xl: 2.4414rem;
  --bp-t-3xl: 3.0518rem;
  --bp-t-display: clamp(2.25rem, 1.15rem + 4.9vw, 4.75rem);

  /* 4pt space scale */
  --bp-s-1: 4px;
  --bp-s-2: 8px;
  --bp-s-3: 12px;
  --bp-s-4: 16px;
  --bp-s-6: 24px;
  --bp-s-8: 32px;
  --bp-s-12: 48px;
  --bp-s-16: 64px;
  --bp-s-24: 96px;

  /* drafting grid */
  --bp-grid: 46px;
  --bp-grid-fine: 11.5px;

  /* One corner radius for the whole site. Small controls clamp to half their
     height automatically, so a 16px value reads as a soft card on large
     surfaces and a rounded chip on small ones — without a second value. */
  --bp-radius: 16px;

  /* soft elevation, shared by every card on every page */
  --bp-shadow-rest:
    0 1px 2px color-mix(in oklab, var(--bp-ink-900) 5%, transparent),
    0 4px 12px -6px color-mix(in oklab, var(--bp-ink-900) 12%, transparent);
  --bp-shadow-hover:
    0 2px 4px color-mix(in oklab, var(--bp-ink-900) 6%, transparent),
    0 22px 44px -22px color-mix(in oklab, var(--bp-ink-900) 30%, transparent);

  /* hairlines */
  --bp-rule-on-dark: color-mix(in oklab, white 13%, transparent);
  --bp-rule-on-dark-strong: color-mix(in oklab, white 24%, transparent);
  --bp-rule-on-light: color-mix(in oklab, var(--bp-ink-700) 14%, transparent);
  --bp-rule-on-light-strong: color-mix(in oklab, var(--bp-ink-700) 28%, transparent);

  /* section rhythm — fluid, not a fixed token */
  --bp-section-y: clamp(64px, 5vw + 36px, 128px);

  /* elevation: no soft shadows in this system */
  --bp-stamp: 2px 2px 0 0 var(--bp-amber);

  /* interaction easing (impeccable: exponential ease-out, no bounce) */
  --bp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bp-fast: 140ms;
  --bp-slow: 280ms;
}

/* --------------------------------------------------------------------------
   2. Take over the Webflow colour variables
   Only four primitives carry the whole site palette, so redefining them
   retints every section, card, button and nav in one move.
   -------------------------------------------------------------------------- */

:root {
  --wf-6774903e-b317-9080-7c50-23e143257396: var(--bp-ink-700); /* accent primary */
  --wf-e963fd4b-7181-10ef-193a-ce7fef8a1957: var(--bp-ink-800); /* darker charcoal */
  --wf-92fbf742-acda-526a-4f26-7e7be2c1fd91: var(--bp-paper);   /* paper */
  --wf-c6ee9ca1-dfcf-6ff2-1226-4eb5ee538959: #ffffff;
  --wf-9f008773-d9f2-aba4-106a-2113a29fc50b: var(--bp-radius);  /* global radius */

  /* Every radius token the theme defines. The export scattered corners across
     a dozen separate primitives (0.25rem, 0.5rem, 0.75rem, 1rem, 2rem,
     100rem), which is why the site rendered 4px, 8px, 12px, 14px and pill
     corners side by side. Pointing them all at one value is the single lever
     that unifies the shape language. */
  --wf-0e7c40a1-3143-1522-358f-a9a82f6f004a: var(--bp-radius);
  --wf-79e484fd-4bfe-3e23-b6da-7a1a00f46c77: var(--bp-radius);
  --wf-08b353d5-ea10-1c07-ec8a-e3a4d5fbca4e: var(--bp-radius);
  --wf-15d8934f-45ff-fcef-41b6-097f0ac8695d: var(--bp-radius);
  --wf-2ad2c1f3-d1a9-1c7a-2586-db649594ea99: var(--bp-radius);
  --wf-40ecbcf7-5aa7-e8f5-46ad-437cc42f8b06: var(--bp-radius);
  --wf-678f8b0e-6c1a-5504-392e-e0c43fa761d4: var(--bp-radius);
  --wf-c0715076-57dc-604c-da4b-8aaa5575d483: var(--bp-radius);
  --wf-da24cbde-773c-697e-d0c8-00e2cf46c2ce: var(--bp-radius);
  --wf-dc2a0baa-b2a8-9ba3-44b6-84963061fdcc: var(--bp-radius);
  --wf-fa907d13-a304-9cdf-9c2b-d7b7cfccb9e1: var(--bp-radius);

  /* Display family: Onest -> Archivo. This single token drives heading_hero,
     heading_primary, heading_tertiary and every heading block in site.css. */
  --wf-3d459a15-1d76-238c-a1dd-fd2790f08a9d: var(--bp-display);
}

/* A few components set a literal 4px / 8px instead of using a token. */
.pricing_tab-button,
.sg_preview-solid-accent,
.sg_preview-outline,
.sg_selector,
.tag,
.sg_tag {
  border-radius: var(--bp-radius);
}

/* --------------------------------------------------------------------------
   3. Base typography
   Archivo (variable width) for anything display-scale, Instrument Sans for
   reading text, IBM Plex Mono for every technical label and figure.
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--bp-body);
  font-kerning: normal;
  font-synthesis-weight: none;
  background-color: var(--bp-paper);
  color: var(--bp-ink-700);
  text-rendering: optimizeLegibility;
}

/* Expanded, tightly-tracked display face — reads as industrial signage. */
.heading_hero,
.heading_primary,
.heading_secondary,
.heading_tertiary,
.heading_small,
h1, h2, h3, h4 {
  font-family: var(--bp-display);
  font-stretch: 112%;
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* The site renders <h1 class="heading_hero">, <h2 class="heading_primary"> and
   plain <h3> inside catalog markup, so weight and tracking are set above and
   only size / measure / spacing are tuned per role here. */

.heading_hero {
  /* Sized for the hero's half-width column so the line breaks land as
     "Special purpose / vehicles, built / to order." rather than one word
     per line. The full-width catalog h1 uses --bp-t-display instead. */
  font-size: clamp(2rem, 1.05rem + 3.2vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--bp-s-6);
}

.heading_primary {
  font-size: clamp(1.65rem, 0.95rem + 2.1vw, var(--bp-t-2xl));
  line-height: 1.05;
  letter-spacing: -0.026em;
  max-width: 32ch;
  margin-bottom: var(--bp-s-4);
}

.heading_secondary {
  font-size: var(--bp-t-lg);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.heading_tertiary {
  font-family: var(--bp-mono);
  font-weight: 600;
  font-size: var(--bp-t-xl);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}

.heading_small {
  font-size: var(--bp-t-base);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Reading text: fixed size, comfortable measure, roomier leading on dark
   (light text on dark reads thinner and needs the extra air). */
.subheading,
.subheading p,
.rich-text p,
.paragraph_large,
p {
  font-family: var(--bp-body);
  font-size: var(--bp-t-base);
  line-height: 1.62;
}

.subheading {
  max-width: 56ch;
  color: var(--bp-ink-500);
  margin-bottom: var(--bp-s-4);
}

.is-inverse .subheading,
.is-accent-primary .subheading,
.on-inverse.subheading,
.on-accent-primary.subheading,
.veh-hero .subheading {
  color: var(--bp-ink-200);
  line-height: 1.7;
}

/* Monospaced eyebrow labels, numbered like drawing callouts. */
body { counter-reset: bp-label; }

.eyebrow {
  counter-increment: bp-label;
  display: inline-flex;
  align-items: center;
  gap: var(--bp-s-2);
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bp-amber-ink);
  margin-bottom: var(--bp-s-4);
}

.eyebrow::before {
  content: counter(bp-label, decimal-leading-zero);
  color: var(--bp-amber-ink);
  opacity: 0.75;
}

.eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.45;
}

.is-inverse .eyebrow,
.is-accent-primary > .container .eyebrow,
.veh-hero .veh-eyebrow {
  color: var(--bp-amber);
}

/* Figures always monospaced + tabular so columns of numbers line up. */
.heading_tertiary,
.quote,
.veh-specs strong,
.veh-stats strong,
.veh-row dd,
.veh-card_model,
.veh-sub {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. Blueprint surfaces
   Dark sections carry a drafting grid; light sections a much finer one.
   Drawn with gradients so nothing extra has to be added to the markup.
   -------------------------------------------------------------------------- */

.section,
.footer {
  padding-top: var(--bp-section-y);
  padding-bottom: var(--bp-section-y);
}

.section.is-accent-primary,
.section.is-inverse,
.nav.is-accent-primary,
.nav.is-inverse,
.footer.is-inverse,
.footer.is-accent-primary {
  background-color: var(--bp-ink-700);
  color: var(--bp-paper);
  background-image:
    linear-gradient(to right, color-mix(in oklab, white 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, white 4.5%, transparent) 1px, transparent 1px);
  background-size: var(--bp-grid) var(--bp-grid);
  background-position: 0 0;
}

.section.is-inverse {
  background-color: var(--bp-ink-800);
}

.section.is-secondary {
  background-color: var(--bp-paper);
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--bp-ink-700) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--bp-ink-700) 4%, transparent) 1px, transparent 1px);
  background-size: var(--bp-grid-fine) var(--bp-grid-fine);
}

.section {
  border-bottom: 1px solid var(--bp-rule-on-light);
}

.section.is-accent-primary,
.section.is-inverse {
  border-bottom-color: var(--bp-rule-on-dark);
}

.footer {
  border-top: 1px solid var(--bp-rule-on-dark);
  border-bottom: 0;
}

/* A thin amber "registration" bar at the top of the dark hero. */
.section.is-accent-primary {
  border-top: 3px solid var(--bp-amber);
}

/* --------------------------------------------------------------------------
   5. Navigation — sticky, hairline underside, mono links with an amber
   underline that slides in from the left.
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--bp-ink-700);
  border-bottom: 1px solid var(--bp-rule-on-dark);
  backdrop-filter: none;
}

.nav_container {
  padding-top: var(--bp-s-2);
  padding-bottom: var(--bp-s-2);
}

/* A 44px button plus padding made the sticky bar 101px tall, which eats too
   much of every viewport. Nav controls are sized down; the 44px minimum is
   restored for the mobile menu button below. */
.nav .button {
  min-height: 36px;
  padding: var(--bp-s-2) var(--bp-s-4);
}

.nav_logo img,
.nav_logo svg {
  height: 28px;
  width: auto;
}

.nav_link {
  position: relative;
  border-radius: var(--bp-radius);
  font-family: var(--bp-mono);
  font-size: var(--bp-t-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bp-ink-200);
  padding: var(--bp-s-2) var(--bp-s-3);
  transition: color var(--bp-fast) var(--bp-ease);
}

.nav_link::after {
  content: "";
  position: absolute;
  left: var(--bp-s-3);
  right: var(--bp-s-3);
  bottom: 2px;
  height: 2px;
  background-color: var(--bp-amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--bp-slow) var(--bp-ease);
}

.nav_link:hover,
.nav_link:focus-visible {
  color: #fff;
  background-color: transparent;
}

.nav_link:hover::after,
.nav_link:focus-visible::after {
  transform: scaleX(1);
}

.nav_link.is-current {
  color: var(--bp-amber);
}

.nav_link.is-current::after {
  transform: scaleX(1);
}

/* The mobile hamburger is the only navigation on small screens, yet the
   theme paints it ink-on-ink. Force it to the light end of the scale. */
.nav_mobile-menu-button {
  padding: var(--bp-s-3);
  /* Negative margin only vertically: the -8px left originally pulled the button
     under the CTA. */
  margin: calc(-1 * var(--bp-s-3)) 0 calc(-1 * var(--bp-s-3)) var(--bp-s-2);
  color: var(--bp-paper);
}

.nav_mobile-menu-button .icon,
.nav_mobile-menu-button .icon.on-accent-primary,
.nav_mobile-menu-button svg {
  color: var(--bp-paper);
  stroke: currentColor;
}

.nav_mobile-menu-button .icon svg *,
.nav_mobile-menu-button svg * {
  stroke: currentColor;
}

.nav_mobile-menu-button:hover .icon,
.nav_mobile-menu-button:focus-visible .icon {
  color: var(--bp-amber);
}

/* A site.css mobile rule turns every .button-group into a full-width stretched
   column, which also stretches the top-bar CTA into a slab beside the
   hamburger. The nav's own group stays inline. */
@media screen and (max-width: 767px) {
  .nav .button-group {
    width: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   6. Buttons — squared, monospaced, uppercase. Primary is a stamped amber
   plate; secondary is a hairline outline. No pills, no soft shadow.
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-s-2);
  min-height: 44px;
  padding: var(--bp-s-3) var(--bp-s-6);
  border-radius: var(--bp-radius);
  border: 1px solid transparent;
  background-color: var(--bp-amber);
  background-image: none;
  color: var(--bp-ink-900);
  box-shadow: none;
  font-family: var(--bp-mono);
  font-size: var(--bp-t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color var(--bp-fast) var(--bp-ease),
    border-color var(--bp-fast) var(--bp-ease),
    color var(--bp-fast) var(--bp-ease),
    transform var(--bp-fast) var(--bp-ease);
}

.button_label {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.button:hover {
  background-color: var(--bp-amber-soft);
  border-color: var(--bp-amber-soft);
  color: var(--bp-ink-900);
  transform: translate(-1px, -1px);
}

.button:active {
  background-color: var(--bp-amber-deep);
  border-color: var(--bp-amber-deep);
  color: #fff;
  box-shadow: none;
  transform: translate(0, 0);
}

/* Primary button on both dark and light surfaces. The stock theme paints
   these translucent white with charcoal text, which fails contrast on the
   charcoal ground, so they are pinned back to the amber plate. */
.button.on-accent-primary,
.button.on-accent-secondary,
.button.on-accent-tertiary,
.button.is-inverse {
  background-color: var(--bp-amber);
  background-image: none;
  border-color: var(--bp-amber);
  color: var(--bp-ink-900);
  box-shadow: none;
}

.button.on-accent-primary:hover,
.button.on-accent-secondary:hover,
.button.on-accent-tertiary:hover,
.button.is-inverse:hover {
  background-color: var(--bp-amber-soft);
  border-color: var(--bp-amber-soft);
  color: var(--bp-ink-900);
}

.button.on-accent-primary:active,
.button.on-accent-secondary:active,
.button.on-accent-tertiary:active,
.button.is-inverse:active {
  background-color: var(--bp-amber-deep);
  border-color: var(--bp-amber-deep);
  color: #fff;
}

/* Secondary: outline only. Ink outline on light, light outline on dark. */
.button.is-secondary {
  background-color: transparent;
  background-image: none;
  border-color: var(--bp-rule-on-light-strong);
  color: var(--bp-ink-700);
  box-shadow: none;
}

.button.is-secondary:hover,
.button.is-secondary:active {
  background-color: var(--bp-ink-700);
  border-color: var(--bp-ink-700);
  color: var(--bp-paper);
  box-shadow: none;
}

.button.is-secondary.on-accent-primary,
.button.is-secondary.on-inverse,
.button.is-secondary.on-accent-secondary {
  background-color: transparent;
  border-color: var(--bp-rule-on-dark-strong);
  color: var(--bp-paper);
}

.button.is-secondary.on-accent-primary:hover,
.button.is-secondary.on-inverse:hover,
.button.is-secondary.on-accent-secondary:hover {
  background-color: var(--bp-amber);
  border-color: var(--bp-amber);
  color: var(--bp-ink-900);
}

.text-link {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-sm);
  letter-spacing: 0.02em;
  color: var(--bp-ink-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  transition: color var(--bp-fast) var(--bp-ease),
    text-decoration-color var(--bp-fast) var(--bp-ease);
}

.text-link:hover {
  color: var(--bp-amber-ink);
  text-decoration-color: currentColor;
}

.text-link.is-inverse,
.is-inverse .text-link,
.is-accent-primary .text-link {
  color: var(--bp-paper);
}

.text-link.is-inverse:hover,
.is-inverse .text-link:hover {
  color: var(--bp-amber);
}

/* --------------------------------------------------------------------------
   7. Hero
   Stat blocks become technical data plates: hairline separated, monospaced
   figures in amber, uppercase labels. The frosted-glass cards are replaced
   with solid surfaces (backdrop blur is noise, not craft).
   -------------------------------------------------------------------------- */

.section.is-accent-primary > .container {
  padding-top: var(--bp-s-16);
}

.hero-block_offset-right {
  margin-top: var(--bp-s-8);
}

.image-ratio_4x3,
.image-ratio_3x2,
.veh-card_media,
.veh-gallery_main,
.image-ratio_auto {
  border-radius: var(--bp-radius);
  background-color: var(--bp-ink-100);
}

/* Placeholder tone follows the surface it sits on so lazy-loaded frames
   read as quiet rather than as solid black slabs. */
.section.is-accent-primary .image-ratio_4x3,
.section.is-accent-primary .image-ratio_3x2,
.section.is-inverse .image-ratio_4x3,
.section.is-inverse .image-ratio_3x2,
.veh-card_media,
.veh-gallery_main {
  background-color: var(--bp-ink-600);
}

.image-ratio_4x3 img,
.image-ratio_3x2 img {
  filter: saturate(0.92) contrast(1.04);
}

/* Anchor the hero photograph with drawing-sheet crop marks. */
.image-ratio_4x3 {
  position: relative;
  outline: 1px solid var(--bp-rule-on-dark-strong);
  outline-offset: -1px;
}

.image-ratio_4x3::before,
.image-ratio_4x3::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--bp-amber);
  border-style: solid;
  z-index: 3;
  pointer-events: none;
}

.image-ratio_4x3::before {
  top: -7px;
  left: -7px;
  border-width: 1px 0 0 1px;
}

.image-ratio_4x3::after {
  bottom: -7px;
  right: -7px;
  border-width: 0 1px 1px 0;
}

/* Data plates */
.card.card_body_small {
  background-color: var(--bp-ink-800);
  background-image: none;
  backdrop-filter: none;
  border: 1px solid var(--bp-rule-on-dark);
  border-radius: var(--bp-radius);
  padding: var(--bp-s-4) var(--bp-s-4) var(--bp-s-3);
  text-align: left;
  color: var(--bp-ink-200);
}

.card.card_body_small .heading_tertiary {
  color: var(--bp-amber);
  font-size: var(--bp-t-2xl);
  margin-bottom: var(--bp-s-1);
}

.card.card_body_small > div:last-child {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bp-ink-200);
}

/* Inline images set inside a heading. The design sizes these with
   `height: 0.8em; aspect-ratio: 16/6`, but the HTML width attribute
   (width="1216") wins over aspect-ratio and the images balloon to full
   page width. Setting width:auto lets the aspect ratio take over, so they
   become small inset plates inside the headline. */
.image_heading-inline-inherit,
.image_heading-inline {
  width: auto;
  max-width: none;
  height: 0.82em;
  border-radius: var(--bp-radius);
  object-fit: cover;
  vertical-align: baseline;
  margin: 0 0.12em;
}

/* --------------------------------------------------------------------------
   8. Brand marquee — wordmarks in expanded display type, amber separators.
   -------------------------------------------------------------------------- */

.marquee {
  padding: var(--bp-s-6) 0;
  border-top: 1px solid var(--bp-rule-on-light);
  border-bottom: 1px solid var(--bp-rule-on-light);
  --bp-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: var(--bp-mask);
}

.marquee_item {
  gap: var(--bp-s-12);
}

.brand-mark {
  font-family: var(--bp-display);
  font-stretch: 118%;
  font-size: var(--bp-t-base);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bp-ink-500);
  opacity: 1;
  padding: 0;
}

.brand-mark::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: var(--bp-s-12);
  vertical-align: middle;
  background-color: var(--bp-amber);
}

/* --------------------------------------------------------------------------
   9. Metrics — a spec strip rather than three floating cards.
   The stock layout boxes each figure in a white card; dropping the chrome
   and keeping only the amber rule lets the drafting grid do the grouping.
   -------------------------------------------------------------------------- */

.section.is-secondary .grid_3-col > div {
  background-color: transparent;
  border: 0;
  border-left: 2px solid var(--bp-amber);
  border-radius: 0;
  padding: var(--bp-s-1) 0 var(--bp-s-1) var(--bp-s-6);
}

.section.is-secondary .heading_hero {
  font-family: var(--bp-display);
  font-stretch: 105%;
  font-size: clamp(2.75rem, 1.6rem + 4vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--bp-ink-700);
  line-height: 0.92;
  margin-bottom: var(--bp-s-2);
}

.section.is-secondary .paragraph_large {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bp-ink-500);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   10. Testimonial
   -------------------------------------------------------------------------- */

.quote {
  font-family: var(--bp-display);
  font-stretch: 105%;
  font-size: var(--bp-t-lg);
  line-height: 1.32;
  letter-spacing: -0.015em;
  /* Inherit so the quote works on light cards as well as dark ones —
     an absolute colour here makes quotes vanish on paper-coloured cards. */
  color: inherit;
  font-weight: 500;
  text-indent: -0.42em;
}

.quote::before {
  content: "\201C";
  color: var(--bp-amber-ink);
}

.card.on-inverse .quote::before,
.card.is-inverse .quote::before,
.is-inverse .card .quote::before {
  color: var(--bp-amber);
}

.avatar,
.avatar img {
  border-radius: var(--bp-radius);
  filter: grayscale(1) contrast(1.05);
}

.author_name {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}

.author_info {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, currentColor 62%, transparent);
}

.card.on-inverse .author_info,
.card.is-inverse .author_info {
  color: var(--bp-ink-300);
}

/* --------------------------------------------------------------------------
   11. Content cards (Popular configurations)
   One card language across the whole site: 16px corners, hairline border plus
   a soft warm shadow, and a small lift on hover. The sharp corner ticks that
   belonged to the earlier all-square look are gone — they fought the rounded
   cards once the radius was unified.
   -------------------------------------------------------------------------- */

.content-block,
.content-block-link,
.veh-card,
.card-link.is-inverse {
  position: relative;
  background-color: var(--bp-paper-2);
  border: 1px solid var(--bp-rule-on-light);
  border-radius: var(--bp-radius);
  box-shadow: var(--bp-shadow-rest);
  overflow: hidden;
  transition:
    border-color var(--bp-fast) var(--bp-ease),
    box-shadow var(--bp-slow) var(--bp-ease),
    transform var(--bp-slow) var(--bp-ease);
}

.content-block-link:hover,
.veh-card:hover,
.card-link.is-inverse:hover {
  border-color: color-mix(in oklab, var(--bp-ink-700) 16%, transparent);
  box-shadow: var(--bp-shadow-hover);
  transform: translateY(-4px);
}

/* Photography inside a card gets the same slow push as the catalog. */
.content-block-link img,
.card-link.is-inverse img {
  transition: transform 620ms var(--bp-ease);
}

.content-block-link:hover img,
.card-link.is-inverse:hover img {
  transform: scale(1.045);
}

.content-block-link::before,
.content-block-link::after,
.veh-card::before,
.veh-card::after {
  content: none;
}

.paragraph_small,
.content-block .paragraph_small {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-ink-500);
}

/* --------------------------------------------------------------------------
   12. Contact list + footer
   -------------------------------------------------------------------------- */

.icon.is-background {
  border-radius: var(--bp-radius);
  background-color: var(--bp-ink-700);
  color: var(--bp-amber);
}

.text-color_secondary {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-ink-500);
}

.is-inverse .text-color_secondary,
.is-accent-primary .text-color_secondary {
  color: var(--bp-ink-300);
}

.footer {
  background-color: var(--bp-ink-900);
}

/* The old footer scattered five cells across three grid rows, so half of it
   was empty. It is now four content columns plus a bottom bar: brand + email,
   the two link groups, and the export desk details. */
.footer_grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 3.4vw, 56px);
  padding-bottom: clamp(44px, 4vw, 68px);
}

.footer_brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bp-s-4);
}

.footer_logo img {
  display: block;
  height: 30px;
  width: auto;
}

.footer_text {
  margin: 0;
  max-width: 40ch;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--bp-ink-400);
}

.footer_mail {
  font-family: var(--bp-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--bp-paper);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in oklab, var(--bp-amber) 55%, transparent);
  transition: color var(--bp-fast) var(--bp-ease),
              border-color var(--bp-fast) var(--bp-ease);
}

.footer_mail:hover {
  color: var(--bp-amber);
  border-color: var(--bp-amber);
}

.footer_col {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-4);
}

.footer_heading {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-amber);
}

.footer_list {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer_list a {
  font-size: 0.9375rem;
  color: var(--bp-ink-200);
  text-decoration: none;
  transition: color var(--bp-fast) var(--bp-ease);
}

.footer_list a:hover {
  color: var(--bp-amber);
}

.footer_list-plain li {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bp-ink-400);
}

.footer_cta {
  align-self: flex-start;
  margin-top: var(--bp-s-1);
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--bp-s-2) var(--bp-s-4);
  border-radius: var(--bp-radius);
  background-color: var(--bp-amber);
  color: var(--bp-ink-900);
  font-family: var(--bp-mono);
  font-size: var(--bp-t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--bp-fast) var(--bp-ease);
}

.footer_cta:hover {
  background-color: var(--bp-amber-soft);
}

.footer_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bp-s-4);
  flex-wrap: wrap;
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--bp-rule-on-dark);
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-ink-400);
}

@media screen and (max-width: 991px) {
  .footer_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bp-s-8);
  }
}

@media screen and (max-width: 767px) {
  .footer_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bp-s-8);
  }

  .footer_text {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */

.input_field {
  border-radius: var(--bp-radius);
  border: 1px solid var(--bp-rule-on-light-strong);
  background-color: #fff;
  color: var(--bp-ink-700);
  font-family: var(--bp-body);
  font-size: var(--bp-t-base);
  min-height: 44px;
  transition: border-color var(--bp-fast) var(--bp-ease);
}

.input_field:hover {
  border-color: var(--bp-ink-600);
}

.input_field:focus {
  border-color: var(--bp-amber-deep);
  outline: 2px solid var(--bp-amber);
  outline-offset: 1px;
}

.input_field::placeholder {
  color: var(--bp-ink-400);
}

.input_label,
.w-form-fail,
.w-form-done {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.input_label {
  color: var(--bp-ink-500);
}

.w-form-done {
  background-color: var(--bp-ink-700);
  color: var(--bp-amber);
  border-radius: var(--bp-radius);
}

.w-form-fail {
  background-color: var(--bp-amber-deep);
  color: #fff;
  border-radius: var(--bp-radius);
}

/* --------------------------------------------------------------------------
   14. Vehicle catalog (vehicle-inventory.html)
   -------------------------------------------------------------------------- */

.veh-wrap {
  max-width: 1240px;
}

.veh-eyebrow,
.veh-hero .veh-eyebrow {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bp-amber);
  opacity: 1;
}

.veh-hero,
.veh-hero.is-compact {
  background-color: var(--bp-ink-700);
  background-image:
    linear-gradient(to right, color-mix(in oklab, white 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, white 4.5%, transparent) 1px, transparent 1px);
  background-size: var(--bp-grid) var(--bp-grid);
  border-top: 3px solid var(--bp-amber);
  padding: clamp(96px, 9vw, 132px) 0 var(--bp-s-12);
}

.veh-h1 {
  font-family: var(--bp-display);
  font-stretch: 112%;
  font-size: var(--bp-t-display);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 0.98;
}

.veh-lead {
  color: var(--bp-ink-200);
  max-width: 54ch;
  line-height: 1.7;
}

/* Spec strip: hairline grid instead of a rounded grey box. */
.veh-stats {
  gap: 1px;
  background-color: var(--bp-rule-on-dark);
  border: 1px solid var(--bp-rule-on-dark);
  border-radius: var(--bp-radius);
}

.veh-stats > div {
  background-color: var(--bp-ink-800);
  padding: var(--bp-s-6) var(--bp-s-6) var(--bp-s-4);
}

.veh-stats strong {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xl);
  font-weight: 600;
  color: var(--bp-amber);
  letter-spacing: -0.02em;
}

.veh-stats span {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bp-ink-200);
}

.veh-catalog,
.veh-blocks {
  background-color: var(--bp-paper);
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--bp-ink-700) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--bp-ink-700) 4%, transparent) 1px, transparent 1px);
  background-size: var(--bp-grid-fine) var(--bp-grid-fine);
}

/* Filter controls: squared, monospaced, with an amber active state. */
.veh-tab,
.veh-chip {
  border-radius: var(--bp-radius);
  border: 1px solid var(--bp-rule-on-light-strong);
  background-color: transparent;
  color: var(--bp-ink-500);
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  min-height: 40px;
  padding: var(--bp-s-2) var(--bp-s-4);
  transition:
    background-color var(--bp-fast) var(--bp-ease),
    border-color var(--bp-fast) var(--bp-ease),
    color var(--bp-fast) var(--bp-ease);
}

.veh-tab:hover,
.veh-chip:hover {
  border-color: var(--bp-ink-700);
  color: var(--bp-ink-700);
}

.veh-tab.is-active,
.veh-chip.is-active {
  background-color: var(--bp-ink-700);
  border-color: var(--bp-ink-700);
  color: var(--bp-paper);
}

.veh-tab em,
.veh-chip em {
  color: var(--bp-amber);
  opacity: 1;
  font-style: normal;
}

.veh-tab.is-active em {
  color: var(--bp-amber);
}

.veh-search input {
  border-radius: var(--bp-radius);
  border: 1px solid var(--bp-rule-on-light-strong);
  background-color: #fff;
  font-family: var(--bp-body);
  min-height: 40px;
  color: var(--bp-ink-700);
}

.veh-search input::placeholder {
  color: var(--bp-ink-400);
}

.veh-search input:focus {
  border-color: var(--bp-amber-deep);
  outline: 2px solid var(--bp-amber);
  outline-offset: 1px;
}

.veh-count,
.veh-empty {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bp-ink-500);
}

/* Vehicle cards — a specification plate per model. */
.veh-grid {
  gap: var(--bp-s-6);
}

.veh-card {
  background-color: #fff;
  border: 1px solid var(--bp-rule-on-light);
  border-radius: var(--bp-radius);
}

.veh-card_media {
  border-radius: 0;
  aspect-ratio: 4 / 3;
  background-color: var(--bp-ink-700);
}

.veh-card_media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in oklab, var(--bp-ink-900) 62%, transparent), transparent 58%);
  pointer-events: none;
}

.veh-card_cat {
  left: 12px;
  top: 12px;
  border-radius: var(--bp-radius);
  background-color: var(--bp-amber);
  color: var(--bp-ink-900);
  font-family: var(--bp-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 13px;
}

.veh-card_body {
  padding: clamp(20px, 1.5vw, 24px);
  gap: 13px;
}

.veh-card_title {
  font-family: var(--bp-display);
  font-stretch: 100%;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.018em;
  color: var(--bp-ink-700);
  /* Reserve two lines so cards whose name wraps to one line keep the same
     y for the tag and spec blocks as their two-line row-mates. */
  min-height: 2.52em;
}

/* The model code is the one genuinely machine-readable field on the card, so
   it stays monospaced while everything else reads as running text. */
.veh-card_model,
.veh-sub {
  font-family: var(--bp-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--bp-ink-400);
}

.veh-tags {
  gap: 6px;
}

.veh-tag {
  border: 0;
  border-radius: var(--bp-radius);
  background-color: color-mix(in oklab, var(--bp-ink-700) 6%, transparent);
  color: var(--bp-ink-500);
  font-family: var(--bp-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 4px 11px;
}

.veh-specs {
  gap: 12px 16px;
  padding-top: 15px;
  border-top: 1px solid var(--bp-rule-on-light);
}

.veh-spec {
  gap: 3px;
}

.veh-spec span {
  font-family: var(--bp-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bp-ink-400);
}

.veh-spec strong {
  font-family: var(--bp-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--bp-ink-700);
  font-variant-numeric: tabular-nums;
}

.veh-card_more {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
  font-family: var(--bp-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bp-ink-700);
  opacity: 1;
  transition: color var(--bp-fast) var(--bp-ease),
              transform var(--bp-slow) var(--bp-ease);
}

.veh-card:hover .veh-card_more {
  color: var(--bp-amber-ink);
  transform: translateX(4px);
}

/* CTA band + buttons */
.veh-cta {
  background-color: var(--bp-ink-700);
  background-image:
    linear-gradient(to right, color-mix(in oklab, white 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, white 4.5%, transparent) 1px, transparent 1px);
  background-size: var(--bp-grid) var(--bp-grid);
  color: var(--bp-paper);
  padding: var(--bp-section-y) 0;
}

.veh-cta h2 {
  font-family: var(--bp-display);
  font-stretch: 112%;
  font-size: var(--bp-t-2xl);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--bp-paper);
}

.veh-cta p {
  color: var(--bp-ink-200);
  line-height: 1.7;
}

.veh-btn {
  border-radius: var(--bp-radius);
  background-color: var(--bp-amber);
  color: var(--bp-ink-900);
  font-family: var(--bp-mono);
  font-size: var(--bp-t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--bp-s-3) var(--bp-s-6);
  min-height: 44px;
  transition: background-color var(--bp-fast) var(--bp-ease);
}

.veh-btn:hover {
  background-color: var(--bp-amber-soft);
  color: var(--bp-ink-900);
}

/* Ghost buttons appear on light surfaces (detail pages) as well as inside the
   dark CTA band, so the default is the light-surface treatment and the dark
   context is opted into explicitly — a white outline on white is invisible. */
.veh-btn.is-ghost {
  background-color: transparent;
  border: 1px solid var(--bp-rule-on-light-strong);
  color: var(--bp-ink-700);
}

.veh-btn.is-ghost:hover {
  background-color: var(--bp-ink-700);
  border-color: var(--bp-ink-700);
  color: var(--bp-paper);
}

.veh-cta .veh-btn.is-ghost,
.is-inverse .veh-btn.is-ghost,
.veh-hero .veh-btn.is-ghost {
  border-color: var(--bp-rule-on-dark-strong);
  color: var(--bp-paper);
}

.veh-cta .veh-btn.is-ghost:hover,
.is-inverse .veh-btn.is-ghost:hover,
.veh-hero .veh-btn.is-ghost:hover {
  background-color: var(--bp-amber);
  border-color: var(--bp-amber);
  color: var(--bp-ink-900);
}

/* --------------------------------------------------------------------------
   15. Vehicle detail pages
   -------------------------------------------------------------------------- */

.veh-crumb {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bp-ink-300);
}

.veh-crumb a {
  color: var(--bp-ink-200);
}

.veh-crumb a:hover {
  color: var(--bp-amber);
}

.veh-crumb em {
  color: var(--bp-amber);
}

.veh-detail {
  background-color: #fff;
}

.veh-gallery_main {
  border-radius: var(--bp-radius);
  border: 1px solid var(--bp-rule-on-light);
  background-color: var(--bp-paper);
}

.veh-thumb {
  border-radius: var(--bp-radius);
  border: 2px solid transparent;
  opacity: 0.5;
}

.veh-thumb:hover,
.veh-thumb.is-active {
  border-color: var(--bp-amber-deep);
  opacity: 1;
}

.veh-badge {
  border-radius: var(--bp-radius);
  background-color: var(--bp-ink-700);
  color: var(--bp-amber);
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--bp-s-1) var(--bp-s-3);
}

.veh-info h1 {
  font-family: var(--bp-display);
  font-stretch: 112%;
  font-size: clamp(1.75rem, 1rem + 2.2vw, var(--bp-t-2xl));
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.04;
  color: var(--bp-ink-700);
}

/* Spec table reads as a drawing title block: mono keys, hairline rows. */
.veh-table {
  border-top: 2px solid var(--bp-ink-700);
}

.veh-row {
  grid-template-columns: 148px 1fr;
  gap: var(--bp-s-4);
  padding: var(--bp-s-3) 0;
  border-bottom: 1px solid var(--bp-rule-on-light);
}

.veh-row dt {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bp-ink-400);
}

.veh-row dd {
  font-family: var(--bp-mono);
  font-size: var(--bp-t-sm);
  font-weight: 500;
  color: var(--bp-ink-700);
}

.veh-block {
  max-width: 76ch;
  padding-left: var(--bp-s-6);
  border-left: 2px solid var(--bp-amber);
  margin-bottom: var(--bp-s-8);
}

.veh-block h3 {
  font-family: var(--bp-display);
  font-stretch: 105%;
  font-size: var(--bp-t-md);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--bp-ink-700);
  margin-bottom: var(--bp-s-2);
}

.veh-block p {
  font-family: var(--bp-body);
  font-size: var(--bp-t-base);
  line-height: 1.75;
  color: var(--bp-ink-500);
  white-space: pre-wrap;
}

.veh-related {
  background-color: #fff;
}

.veh-related h2 {
  font-family: var(--bp-display);
  font-stretch: 112%;
  font-size: var(--bp-t-xl);
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--bp-ink-700);
}

/* Homepage "Featured vehicles" band (added on top of the design source). */
.veh-featured {
  background-color: var(--bp-paper-2);
  padding: var(--bp-section-y) 0;
}

.veh-sec-head {
  align-items: flex-end;
  padding-bottom: var(--bp-s-4);
  margin-bottom: var(--bp-s-8);
  border-bottom: 1px solid var(--bp-rule-on-light);
}

.veh-sec-head h2 {
  font-family: var(--bp-display);
  font-stretch: 112%;
  font-size: clamp(1.6rem, 0.95rem + 2vw, var(--bp-t-2xl));
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: var(--bp-ink-700);
}

.veh-sec-head .veh-eyebrow {
  color: var(--bp-amber-ink);
}

/* --------------------------------------------------------------------------
   16. Focus, selection, scrollbar
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--bp-amber);
  outline-offset: 2px;
}

::selection {
  background-color: var(--bp-amber);
  color: var(--bp-ink-900);
}

* {
  scrollbar-color: var(--bp-ink-600) var(--bp-paper);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background-color: var(--bp-paper);
}

::-webkit-scrollbar-thumb {
  background-color: var(--bp-ink-600);
  border: 2px solid var(--bp-paper);
  border-radius: var(--bp-radius);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--bp-ink-700);
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  :root {
    --bp-section-y: clamp(56px, 6vw + 24px, 80px);
  }

  .heading_hero,
  .veh-h1 {
    letter-spacing: -0.026em;
  }

  /* Mobile nav panel drops out of the slide-in pattern: solid sheet. */
  .nav_menu {
    background-color: var(--bp-ink-800);
    border-bottom: 1px solid var(--bp-rule-on-dark);
    border-radius: 0;
    padding: var(--bp-s-4);
  }

  .nav_menu-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav_menu-list-item {
    border-bottom: 1px solid var(--bp-rule-on-dark);
  }

  .nav_link {
    padding: var(--bp-s-4) 0;
    font-size: var(--bp-t-sm);
  }

  .nav_link::after {
    left: 0;
    right: auto;
    width: 28px;
    bottom: 0;
  }

  .section.is-secondary .grid_3-col > div {
    border-left-width: 2px;
  }

  .veh-detail_grid {
    grid-template-columns: 1fr;
    gap: var(--bp-s-8);
  }

  .veh-gallery_main {
    margin-top: 0;
  }

  .veh-info {
    padding-top: 0;
  }
}

@media screen and (max-width: 767px) {
  body.nav-drawer-open {
    overflow: hidden;
  }

  body.nav-drawer-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(12, 13, 12, .58);
    backdrop-filter: blur(2px);
  }

  .nav {
    z-index: 100;
  }

  .nav_menu {
    position: fixed !important;
    z-index: 101;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    display: block !important;
    width: min(84vw, 340px);
    height: 100dvh;
    margin: 0;
    padding: 92px 24px 28px;
    overflow-y: auto;
    background: var(--bp-ink-800);
    border-left: 1px solid var(--bp-rule-on-dark);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .24);
    transform: translateX(105%);
    transition: transform 280ms cubic-bezier(.22, .8, .24, 1);
    visibility: hidden;
    pointer-events: none;
  }

  .nav_menu.w--open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .nav_menu-list {
    gap: 0;
  }

  .nav_menu-list-item {
    border-bottom: 1px solid var(--bp-rule-on-dark);
  }

  .nav_menu .nav_link {
    display: block;
    padding: 18px 0;
    font-size: 1rem;
  }

  .nav_mobile-menu-button {
    position: relative;
    z-index: 102;
  }

  :root {
    --bp-grid: 34px;
    --bp-grid-fine: 10px;
  }

  .heading_tertiary {
    font-size: var(--bp-t-lg);
  }

  .card.card_body_small .heading_tertiary {
    font-size: var(--bp-t-xl);
  }

  .quote {
    font-size: var(--bp-t-md);
  }

  .veh-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .veh-row {
    grid-template-columns: 1fr;
    gap: var(--bp-s-1);
    padding-bottom: var(--bp-s-3);
  }

  .veh-block {
    padding-left: var(--bp-s-4);
  }

  /* Keep marquee readable rather than hiding it on small screens. */
  .brand-mark {
    font-size: var(--bp-t-sm);
  }

  .brand-mark::after {
    margin-left: var(--bp-s-8);
  }

  /* Mobile hero: keep the fleet image and metrics in a readable vertical flow. */
  .section.is-accent-primary > .container > .grid_2-col {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bp-s-8);
  }

  .section.is-accent-primary .header {
    margin-bottom: 0;
  }

  .section.is-accent-primary .button-group {
    width: 100%;
    gap: var(--bp-s-3);
  }

  .section.is-accent-primary .button-group .ix-link-wrapper,
  .section.is-accent-primary .button-group .button {
    width: 100%;
  }

  .hero-block_offset-right {
    width: 100%;
    min-width: 0;
  }

  .hero-block_offset-right .grid_9-col {
    display: flex;
    flex-direction: column;
    gap: var(--bp-s-4);
  }

  .hero-block_offset-right .grid_9-col > .grid-item-manual {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
  }

  .hero-block_offset-right .grid_2-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bp-s-2);
  }

  .hero-block_offset-right .card.card_body_small {
    min-height: 92px;
    padding: var(--bp-s-4) var(--bp-s-3);
  }

  .veh-tabs {
    max-width: 100%;
  }

  .veh-search,
  .veh-search input {
    width: 100%;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   18. Motion preferences + print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .nav_link::after {
    transform: scaleX(1);
  }
}

@media print {
  .nav,
  .marquee,
  .veh-toolbar {
    display: none;
  }

  .section,
  .footer,
  .veh-hero,
  .veh-catalog,
  .veh-cta {
    background-image: none !important;
    background-color: #fff !important;
    color: #000 !important;
  }
}
.whatsapp-float {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #167d46;
  color: #fff;
  font: 600 14px/1.2 'Instrument Sans', sans-serif;
  text-decoration: none;
  box-shadow: 0 4px 18px rgb(0 0 0 / 20%);
  transition: background .2s, transform .2s;
}
.whatsapp-float:hover { background: #106137; transform: translateY(-2px); }
.whatsapp-float.email-float {
  bottom: calc(80px + env(safe-area-inset-bottom));
  min-width: 140px;
  justify-content: center;
  background: #292d32;
}
.whatsapp-float.email-float:hover { background: #41474f; }
.whatsapp-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.veh-actions .veh-btn.is-whatsapp { background: #167d46; border-color: #167d46; color: #fff; }
.footer_mail { overflow-wrap: anywhere; }
.contact-business-email { overflow-wrap: anywhere; }
.veh-thumbs { flex-wrap: wrap; }
.veh-gallery { min-width: 0; }
.contact-qr {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 36px 24px 24px;
  border: 1px solid #dedbd5;
  border-radius: 16px;
  background: #fff;
  color: #292d32;
  text-align: center;
  overflow: auto;
}
.contact-qr::backdrop { background: rgb(0 0 0 / 55%); }
.contact-qr h2 { margin: 0 0 10px; font: 600 24px/1.25 'Instrument Sans', sans-serif; }
.contact-qr p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.contact-qr img { display: block; width: min(240px, 100%); height: auto; margin: 8px auto 12px; }
.contact-qr .contact-qr-number { font-weight: 600; }
.contact-qr-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; background: transparent; color: #292d32; font-size: 28px; cursor: pointer; }
.contact-qr-direct { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; background: #167d46; color: #fff; font-weight: 600; text-decoration: none; }
.contact-qr-direct:hover { background: #106137; }
body:has(.contact-qr[open]) { overflow: hidden; }
@media (max-width: 767px) {
  .whatsapp-float { right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  .whatsapp-float.email-float { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .footer { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
  body.nav-drawer-open .whatsapp-float { visibility: hidden; }
}