
/* ── MICRO REGISTER, RAISED TO HEAVY'S RUNG (3.7.3) ──────────────────────────
   Every token at or below 15px that this skin set BELOW the heavy skin has been
   raised to heavy's value. 87 tokens disagreed across the three skins and the
   pattern was one-directional: modern and classic sat 1-4px under heavy on the
   same register — labels, footer headings, stat captions, spec rows, roles,
   pills. Nothing here was lowered; a token already at or above heavy's value
   was left alone.

   AND THE GAP IS WIDER THAN THE NUMBERS SAY. Measured from the rendered fonts:
   Barlow (heavy) has a 51% x-height, IBM Plex Sans and Lato have 45%. Barlow
   therefore looks LARGER at the same px, and to match heavy's 15px optically
   these two skins would need 17px, not 15px. Matching the number closes most
   of the gap, not all of it — a further +2px on this register is the change
   that would make the three skins actually look alike, and it is a separate
   decision because it makes modern and classic visibly larger than heavy in
   the stylesheet. ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   SKIN — "MIDNIGHT & BRONZE"                            body.dp-skin--modern
   The modern (cars) skin, DealerPro 3.2.0. Generated from a build script.

   THE IDEA
     Pure black is cold and, at scale, cheap. A deep blue-black ground plus one
     warm metal is the oldest luxury pairing there is. The tension is the
     point: every SURFACE is cool, every ACTION is warm, and body text is
     never warm.

   ─────────────────────────────────────────────────────────────────────────
   1. THE ONE RULE:  THE OWNER'S COLOUR IS FOR THINGS YOU CLICK.
   ─────────────────────────────────────────────────────────────────────────
   Warm means actionable. Buttons, the header call pill, the active nav item,
   the CTA banner, focus rings, ghost borders, link hovers, card arrows and
   the quick-view trigger take the owner's accent. Figures, prices, section
   kickers, column heads, captions, step numbers, stats and the rules under
   headings are COOL (#f4f6fb / #c8d0e0 / #9da8bc / #838da1) and stay cool on
   every site. A price that is the same colour as the button beside it is not
   a signal, and that is what the previous skin did.

   Two colours are deliberately NOT the accent, because they mean something
   of their own:
     • RESERVE  takes --dp-reserve (its own wizard setting, default #fbbf24).
                It is the highest-intent control on the site and it must not
                look like the phone number. Measured: black ink on the plate,
                11.72:1, and identical under every accent colour.
     • RATINGS  take #E8A33C, the functional amber. A rating carries its own
                meaning and must never read as clickable. 8.03:1.

   ─────────────────────────────────────────────────────────────────────────
   2. HOW THIS SKIN FOLLOWS THE COLOUR SETTINGS
   ─────────────────────────────────────────────────────────────────────────
   functions.php prints an inline <style> at wp_head priority 20 that stamps
   SEVENTEEN --dp-accent* / --dp-cta* / --dp-reserve* properties with
   !important on `:root, :root body`. This file is enqueued (dp_enqueue_skin,
   wp_enqueue_scripts priority 20) and everything in it is scoped to
   body.dp-skin--modern, which that !important beats. SO THIS SKIN CANNOT OWN
   THOSE SEVENTEEN, and it does not try to.

   Instead it READS them. Everywhere this skin wants the owner's colour it
   writes var(--dp-accent) / var(--dp-cta) / var(--dp-reserve). !important
   decides which declaration wins for a property; it does not force a var()
   reference to its fallback. So the owner's wizard colour resolves normally
   inside this file, and changing the colour in DealerPro > Settings > Colors
   repaints every action on the site. Verified on five owner colours by
   reading getComputedStyle in a live page.

   The values declared for those seventeen in the token block below are this
   direction's INTENT and its fallback only. On any real site the wizard's
   block wins and they never take effect. They matter if the wizard block is
   ever absent.

   Where rgba() was needed with the owner's colour, this file uses
   color-mix(in srgb, var(--dp-accent) N%, transparent) — rgba() cannot take a
   hex variable, color-mix can, and the two are equivalent.

   ─────────────────────────────────────────────────────────────────────────
   3. THE ONE THING A SKIN CANNOT FIX — READ THIS BEFORE CHANGING COLOURS
   ─────────────────────────────────────────────────────────────────────────
   The ink on a coloured button is --dp-accent-fg, which functions.php
   computes with dp_contrast_text(): black when the colour's relative
   luminance is above 0.45, white otherwise. That threshold is in the wrong
   place. White ink only reaches 4.5:1 when luminance <= 0.1833 and black ink
   only when luminance >= 0.1750, so any accent whose luminance falls in
   0.1833 < L <= 0.45 is given white ink and lands just under AA.

   Measured: #E3BA90 (L 0.535) and #ffffff (L 1.000) are clean everywhere.
   A mid-saturation green such as #2E8B57 (L 0.197) tops out at 4.25:1 on its
   own plates — legible, but 0.25 under the AA floor for normal text. A very
   dark accent such as #1B3A5C (L 0.040) is fine for ink contrast but its
   plate barely separates from the dark hero photograph.

   This skin CANNOT correct that, because --dp-accent-fg carries !important
   from the wizard. Correcting it means changing the 0.45 in
   dp_contrast_text() in functions.php, which would change the button ink on
   every existing site whose stored colour sits in that band, so it is a
   deliberate decision and not a styling fix. Light accent colours are safe;
   mid-tone ones are legible but marginal.

   ─────────────────────────────────────────────────────────────────────────
   4. THE PALETTE
   ─────────────────────────────────────────────────────────────────────────
   GROUND    a six-rung blue-violet black, not neutral black.
               #06070d  wells, footer, photography beds
               #0a0c15  the page
               #0f1220  inputs, the bottom of a card
               #161a28  the top of a card
               #1c2133  elevated panels, dialogs, forms
               #232941  hover
             Cards differ from the page by a real step instead of 4%, and each
             carries a top-lighter gradient plus a 5% champagne wash across
             its first 22% — a card reads as a lit surface. Those three warm
             washes (--dp-card-bg 0.05, --dp-wrapper-bg 0.055,
             --dp-statsband-bg 0.07) are the ONE place warmth does not follow
             the setting: at that alpha they read as light, not as a hue, and
             they are the warm/cool tension the direction is built on. On a
             green or navy site they stay warm. This is deliberate.

   METAL     #E3BA90 champagne bronze (lit #f0d6b6, deep #c79a62) — the seed
             dp_industry_default_colors() now gives 'modern'. Black ink on it
             measures 11.69:1.
             Separation from heavy's safety yellow #F2B705, measured:
               #E3BA90   HSL H 30.4  S 59.7%  L 72.7%   CIELAB L* 78.1 C* 28.3
               #F2B705   HSL H 45.1  S 96.0%  L 48.4%   CIELAB L* 77.7 C* 80.1
             14.7 degrees of hue apart; heavy's chroma is 2.8x this one's.
             CIEDE2000 between them is 16.53 — far above the ~5 at which two
             colours stop being confusable. Heavy's is a fluorescent sign
             colour at maximum chroma; this is a pale, low-chroma metal.

   INK       re-derived for the lifted ground, deliberately COOL:
             #f4f6fb / #c8d0e0 / #9da8bc / #838da1. The faint rung moved UP
             from #767e88: on a #161a28 card the old value measures 4.39:1 and
             fails AA. The new one measures 5.40:1.

   GLASS     the header, the mobile drawer, the lightbox, the quick-view
             backdrop, the back-to-top and the photo-count chip take
             backdrop-filter. The shipped skin had none. Where backdrop-filter
             is unsupported an @supports block near the end of this file makes
             the header and drawer nearly opaque instead — the fallback is
             meant to be dimmer than the glass, never more transparent.
             The sticky bar could NOT be glassed: the base stylesheet gives it
             no backdrop-filter hook, so it takes a tint and a hairline only.

   ELEVATION 46 shadow tokens were the literal string `none`. The property
             declarations were already there (71 of them in style.css and the
             templates); only the values were missing. They now carry a four-
             step ladder, and metal-filled controls carry a champagne-tinted
             one. Nothing new was declared to achieve it.

   RADIUS    the seven primitives moved from 0 to 8/10/12/14/16/24/999px.
             56 component tokens follow them; --dp-radius-full finally makes
             the twelve things that expected a pill into pills.

   MOTION    340ms on cubic-bezier(.22,.61,.36,1), up from 140ms, and every
             retempoed transition gained `box-shadow`.

   ─────────────────────────────────────────────────────────────────────────
   5. PAINT ONLY — THE CONTRACT THIS FILE IS HELD TO
   ─────────────────────────────────────────────────────────────────────────
   Nothing here moves, resizes or respaces a box. No display, position, inset,
   float, z-index, transform, width/height, min/max, aspect-ratio, margin,
   padding, gap, overflow, grid-*, flex-*, order, align/justify/place,
   columns, visibility, background-attachment, or `content` on a pseudo-
   element the base does not already declare. Every selector is scoped to
   body.dp-skin--modern, so this file is inert on any other skin.

   AND NOT ONE TEXT METRIC. font-size, letter-spacing and line-height are
   allowed by the contract, but they change text metrics, metrics re-wrap
   lines, and a re-wrapped line changes a box's height — a layout move by the
   back door. Verified mechanically against the 3.1.1 skin: 639 metric
   declarations in each file and ZERO differences, across font-size,
   letter-spacing, word-spacing, line-height, font-family, font-weight,
   font-stretch, font-variant-numeric, font-feature-settings, text-transform,
   white-space, text-indent and tab-size. Rendered proof: 5 pages x 2
   viewports against the 3.1.1 skin, 0 geometry differences outside the two
   containers that draw a RANDOM listing on every page load.
   KEEP IT THAT WAY. Do not introduce one.

   The functional red (#ff5a52 / #c62b24 / #ff8c86 / #ffb5b0) is frozen: an
   error is not brand expression.

   ─────────────────────────────────────────────────────────────────────────
   6. EDITING THIS FILE BY HAND
   ─────────────────────────────────────────────────────────────────────────
   Almost everything is a custom property in the big block below; change the
   token, not the rule. The element-level rules at the end (sections 10 and
   11) exist only where the BASE stylesheet or a template paints a colour
   directly with no token behind it — those are the places a token cannot
   reach. If you want less warmth, change the accent in
   DealerPro > Settings > Colors; you do not need to touch this file.
   ═══════════════════════════════════════════════════════════════════════════ */
body.dp-skin--modern {

  /* ── Accent CTA (admin-customisable in the real theme) ── */
  --dp-accent: #e0b795;
  --dp-accent-dark: #c4966e;
  --dp-accent-soft: rgba(224, 183, 149, 0.10);
  --dp-accent-border: rgba(224, 183, 149, 0.30);
  --dp-accent-glow: rgba(224, 183, 149, 0.13);
  --dp-accent-text: #e0b795;
  --dp-accent-fg: #14110b;
  --dp-cta: #e0b795;
  --dp-cta-dark: #c4966e;
  --dp-cta-soft: rgba(224, 183, 149, 0.10);
  --dp-cta-fg: #14110b;

  /* ── Surfaces & text ── */
  --dp-bg: #0a0c15;
  --dp-bg-card: #161a28;
  --dp-bg-card-2: #0f1220;
  --dp-bg-input: #0f1220;
  --dp-text: #f4f6fb;
  --dp-text-soft: #c8d0e0;
  --dp-text-muted: #9da8bc;
  --dp-text-faint: #8b95a9;
  --dp-border: rgba(197, 214, 245, 0.15);
  --dp-border-input: rgba(197, 214, 245, 0.21);

  /* ── Typography ── */
  --dp-font: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dp-font-heading: 'Archivo', 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --dp-font-ui: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dp-font-numeric: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --dp-font-quote: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --dp-font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
  --dp-font-variant-numeric: tabular-nums lining-nums;
  --dp-fw-medium: 400;
  --dp-fw-semibold: 500;
  --dp-fw-bold: 600;
  --dp-fw-extrabold: 700;
  --dp-fw-black: 900;

  /* ── Shell radii motion ── */
  --dp-shell: 1240px;
  --dp-transition: 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-radius: 14px;
  --dp-radius-xs: 8px;
  --dp-radius-sm: 10px;
  --dp-radius-md: 16px;
  --dp-radius-lg: 24px;
  --dp-radius-input: 12px;
  --dp-radius-full: 999px;
  --dp-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.82), 0 2px 8px -4px rgba(0, 0, 0, 0.50);
  --dp-shadow-hover: 0 26px 64px -28px rgba(0, 0, 0, 0.88), 0 8px 20px -12px rgba(0, 0, 0, 0.58);

  /* ── Global chrome ── */
  --dp-skip-bg: var(--dp-accent, #e0b795);
  --dp-skip-fg: var(--dp-accent-fg, #14110b);
  --dp-skip-radius: var(--dp-radius-sm);
  --dp-skip-fs: 13px;
  --dp-skip-fw: var(--dp-fw-bold);
  --dp-focus-ring-w: 2px;
  --dp-focus-ring-w2: 4px;
  --dp-focus-ring-color: #f4f6fb;
  --dp-focus-ring-color2: #05070d;
  --dp-focus-ring: inset 0 0 0 var(--dp-focus-ring-w) var(--dp-focus-ring-color), inset 0 0 0 var(--dp-focus-ring-w2) var(--dp-focus-ring-color2);
  --dp-focus-ring-btn: var(--dp-focus-ring);
  --dp-focus-ring-cta: var(--dp-focus-ring);

  /* ── Header ── */
  --dp-header-bg: rgba(10, 12, 21, 0.78);
  --dp-header-border: 1px solid rgba(197, 214, 245, 0.14);
  --dp-header-blur: blur(20px) saturate(150%);
  --dp-header-logo-color: #f4f6fb;
  --dp-header-logo-fs: 23px;
  --dp-header-logo-fw: var(--dp-fw-black);
  --dp-header-logo-ls: -0.045em;
  --dp-header-link: #9da8bc;
  --dp-header-link-fs: 15px;
  --dp-header-link-fw: var(--dp-fw-semibold);
  --dp-header-link-ls: 0.01em;
  --dp-header-link-radius: var(--dp-radius-sm);
  --dp-header-link-hover: #f4f6fb;
  --dp-header-link-hover-bg: rgba(206, 220, 248, 0.081);
  --dp-header-link-active: var(--dp-accent-fg, #14110b);
  --dp-header-link-active-bg: var(--dp-accent, #e0b795);
  --dp-header-call-bg: linear-gradient(135deg, var(--dp-cta), var(--dp-cta-dark));
  --dp-header-call-fg: var(--dp-cta-fg, #14110b);
  --dp-header-call-fs: 14px;
  --dp-header-call-fw: var(--dp-fw-bold);
  --dp-header-call-ls: -0.01em;
  --dp-header-call-icon: var(--dp-cta-fg, #14110b);
  --dp-header-call-shadow: 0 10px 28px -14px color-mix(in srgb, var(--dp-cta, #e0b795) 42%, transparent), 0 2px 6px -2px rgba(0, 0, 0, 0.55);
  --dp-header-call-shadow-hover: 0 18px 44px -16px color-mix(in srgb, var(--dp-cta, #e0b795) 58%, transparent), 0 4px 12px -5px rgba(0, 0, 0, 0.60);
  --dp-hamburger-bar: #f4f6fb;
  --dp-hamburger-bar-radius: 2px;

  /* ── Mobile drawer ── */
  --dp-mnav-bg: rgba(10, 12, 21, 0.86);
  --dp-mnav-border: 1px solid rgba(197, 214, 245, 0.14);
  --dp-mnav-blur: blur(22px) saturate(150%);
  --dp-mnav-link: #c8d0e0;
  --dp-mnav-link-hover: #f4f6fb;
  --dp-mnav-link-fs: 15px;
  --dp-mnav-link-fw: var(--dp-fw-semibold);
  --dp-mnav-divider: 1px solid rgba(197, 214, 245, 0.10);
  --dp-mnav-call-bg: linear-gradient(135deg, var(--dp-cta), var(--dp-cta-dark));
  --dp-mnav-call-fg: var(--dp-cta-fg, #14110b);
  --dp-mnav-call-shadow: 0 10px 28px -14px color-mix(in srgb, var(--dp-cta, #e0b795) 42%, transparent), 0 2px 6px -2px rgba(0, 0, 0, 0.55);

  /* ── Sticky bar ── */
  --dp-sticky-shadow: 0 -1px 0 rgba(197, 214, 245, 0.12), 0 -20px 44px -22px rgba(0, 0, 0, 0.92);
  --dp-sticky-fg: #f4f6fb;
  --dp-sticky-fs: 15px;
  --dp-sticky-fs-sm: 14px;
  --dp-sticky-fw: var(--dp-fw-bold);
  --dp-sticky-ls: -0.01em;
  --dp-sticky-call-bg: linear-gradient(135deg, var(--dp-cta), var(--dp-cta-dark));
  --dp-sticky-info-bg: #0a0c15;
  --dp-sticky-info-border: 1px solid rgba(197, 214, 245, 0.152);

  /* ── Page wash section rhythm ── */
  --dp-home-wash: #0a0c15;
  --dp-hairline: rgba(197, 214, 245, 0.13);
  --dp-hairline-opacity: 1;

  /* ── Panels ── */
  --dp-card-bg: linear-gradient(180deg, rgba(224, 183, 149, 0.05) 0%, rgba(224, 183, 149, 0) 22%), linear-gradient(180deg, #161a28 0%, #0f1220 100%);
  --dp-card-border: 1px solid var(--dp-border);
  --dp-card-glow: radial-gradient(circle at top, var(--dp-accent-glow), transparent 62%);
  --dp-card-glow-opacity: 0.55;
  --dp-wrapper-bg: linear-gradient(180deg, rgba(224, 183, 149, 0.055) 0%, rgba(224, 183, 149, 0) 26%), linear-gradient(180deg, #1c2133 0%, #0f1220 100%);
  --dp-wrapper-border: 1px solid var(--dp-border);
  --dp-wrapper-glow: radial-gradient(circle at top center, var(--dp-accent-glow), transparent 62%);
  --dp-wrapper-glow-opacity: 0.6;

  /* ── Headings ── */
  --dp-kicker-bg: rgba(200, 208, 224, 0.10);
  --dp-kicker-border: 1px solid rgba(200, 208, 224, 0.28);
  --dp-kicker-color: #f4f6fb;
  --dp-kicker-fs: 11px;
  --dp-kicker-fw: var(--dp-fw-bold);
  --dp-kicker-ls: 0.18em;
  --dp-kicker-transform: uppercase;
  --dp-kicker-radius: var(--dp-radius-sm);
  --dp-title-color: #f4f6fb;
  --dp-title-fs: clamp(40px, 6.4vw, 88px);
  --dp-title-fs-md: clamp(32px, 4.8vw, 54px);
  --dp-title-fs-sm: 38px;
  /* FIX (uniformity audit): the cap was 68px, which above ~1270px rendered
     every section H2 LARGER than this skin's own hero H1 (capped at 66px) —
     the page's biggest heading was 2px smaller than the headings it
     introduces. 54px restores the hierarchy and puts the section title in
     line with heavy (52px) and classic (54px); the hero stays distinctive. */
  --dp-title-fs-section: clamp(34px, 5.2vw, 54px);
  --dp-title-fw: var(--dp-fw-black);
  --dp-title-lh: 0.96;
  --dp-title-lh-sm: 1.0;
  --dp-title-ls: -0.04em;
  --dp-title-ls-md: -0.035em;
  --dp-title-ls-sm: -0.03em;
  --dp-title-accent-color: #c8d0e0;
  --dp-line-bg: rgba(200, 208, 224, 0.30);
  --dp-line-radius: 999px;
  --dp-line-shadow: none;
  --dp-subtitle-color: #9da8bc;
  --dp-subtitle-fs: 18px;
  --dp-subtitle-fs-md: 17px;
  --dp-subtitle-fs-sm: 16px;
  --dp-subtitle-lh: 1.65;
  --dp-subtitle-lh-sm: 1.62;
  --dp-note-color: #8e99ad;
  --dp-note-fs: 13px;
  --dp-note-lh: 1.7;
  --dp-highlight-color: #c8d0e0;
  --dp-highlight-fw: var(--dp-fw-extrabold);

  /* ── Buttons ── */
  --dp-btn-radius: var(--dp-radius-input);
  --dp-btn-fs: 15px;
  --dp-btn-fs-sm: 15px;
  --dp-btn-fw: var(--dp-fw-extrabold);
  --dp-btn-ls: -0.01em;
  --dp-btn-border: none;
  --dp-btn-transition: background .14s cubic-bezier(0.22, 0.61, 0.36, 1), border-color .14s cubic-bezier(0.22, 0.61, 0.36, 1), color .14s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-btn-primary-bg: linear-gradient(135deg, var(--dp-accent), var(--dp-accent-dark));
  --dp-btn-primary-fg: var(--dp-accent-fg, #14110b);
  --dp-btn-primary-shadow: 0 10px 28px -14px color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent), 0 2px 6px -2px rgba(0, 0, 0, 0.55);
  --dp-btn-primary-shadow-hover: 0 18px 44px -16px color-mix(in srgb, var(--dp-accent, #e0b795) 58%, transparent), 0 4px 12px -5px rgba(0, 0, 0, 0.60);
  --dp-btn-cta-bg: #1c2133;
  --dp-btn-cta-fg: #f4f6fb;
  --dp-btn-cta-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.82), 0 2px 8px -4px rgba(0, 0, 0, 0.50);
  --dp-btn-cta-shadow-hover: 0 26px 64px -28px rgba(0, 0, 0, 0.88), 0 8px 20px -12px rgba(0, 0, 0, 0.58);
  --dp-btn-ghost-bg: rgba(10, 12, 21, 0.34);
  --dp-btn-ghost-fg: #f4f6fb;
  --dp-btn-ghost-border: 1px solid rgba(197, 214, 245, 0.26);
  --dp-btn-ghost-blur: blur(8px);
  --dp-btn-ghost-bg-hover: rgba(206, 220, 248, 0.115);
  --dp-btn-ghost-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-btn-shine: transparent;

  /* ── Hero ── */
  /* Opens at 0.80, not 0.66: measured on the composited hero photo the
     lighter scrim left .dp-hero__sub at 4.55:1 on /inventory/ @320 and the
     accent half of the headline at 2.99:1 on / @320 — below and at the
     floor. The 52% stop moves with it so the ramp keeps its shape. */
  --dp-hero-overlay: linear-gradient(180deg, rgba(6, 7, 13, 0.56) 0%, rgba(8, 10, 18, 0.74) 46%, rgba(10, 12, 21, 0.92) 80%, #0a0c15 100%);
  --dp-hero-title-color: #f4f6fb;
  --dp-hero-title-fs: clamp(46px, 6.9vw, 66px);
  --dp-hero-title-fw: var(--dp-fw-black);
  --dp-hero-title-ls: -0.045em;
  --dp-hero-title-lh: 0.94;
  /* #7e8894 measured 2.99–3.06:1 against the photo on six heroes — the 3:1
     large-text floor with no margin, and below it at / @320. Lifted one
     step on the skin's own grey ramp; the scrim change alone was not
     enough to carry an image-dependent margin. */
  --dp-hero-title-span-color: #c8d0e0;
  --dp-hero-sub-color: #c8d0e0;
  --dp-hero-sub-fs: clamp(16px, 1.7vw, 19px);
  --dp-hero-sub-lh: 1.6;
  --dp-hero-pill-bg: rgba(10, 12, 21, 0.30);
  --dp-hero-pill-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-hero-pill-color: #c8d0e0;
  --dp-hero-pill-radius: 999px;
  --dp-hero-pill-fs: 12px;
  --dp-hero-pill-fw: var(--dp-fw-semibold);
  --dp-hero-pill-ls: 0.2em;
  --dp-hero-pill-bg-hover: rgba(206, 220, 248, 0.115);
  --dp-hero-pill-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-hero-reveal: dpHeroReveal .45s cubic-bezier(.2, .8, .2, 1) backwards;
  --dp-hero-zoom: none;

  /* ── Stats band (full-bleed strip) ── */
  --dp-statsband-bg: linear-gradient(180deg, rgba(224, 183, 149, 0.07) 0%, rgba(224, 183, 149, 0) 40%), linear-gradient(180deg, #1c2133 0%, #0a0c15 100%);
  --dp-statsband-border-top: 1px solid rgba(200, 208, 224, 0.20);
  --dp-statsband-border-bottom: 1px solid rgba(200, 208, 224, 0.20);
  --dp-statsband-num-color: #f4f6fb;
  --dp-statsband-num-fs: 54px;
  --dp-statsband-num-fs-sm: 38px;
  --dp-statsband-num-fw: var(--dp-fw-bold);
  --dp-statsband-num-ls: -0.02em;
  --dp-statsband-label-color: #8e99ad;
  --dp-statsband-label-fs: 11px;
  --dp-statsband-label-fw: var(--dp-fw-bold);
  --dp-statsband-label-ls: 0.2em;
  --dp-statsband-label-transform: uppercase;

  /* ── Featured card ── */
  --dp-fcard-bg: #161a28;
  --dp-fcard-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-fcard-radius: var(--dp-radius-md);
  --dp-fcard-media-radius: var(--dp-radius-lg);
  --dp-fcard-transition: border-color .16s cubic-bezier(0.22, 0.61, 0.36, 1), background .16s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-fcard-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-fcard-shadow-hover: 0 26px 64px -28px rgba(0, 0, 0, 0.88), 0 8px 20px -12px rgba(0, 0, 0, 0.58);
  --dp-fcard-img-bg: #06070d;
  --dp-fcard-img-transition: transform .16s linear, box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-fcard-ph-color: #7d8798;
  --dp-fcard-overlay: linear-gradient(180deg, rgba(6, 7, 13, 0) 0%, rgba(6, 7, 13, 0.62) 55%, rgba(6, 7, 13, 0.92) 100%);
  --dp-fcard-badge-radius: var(--dp-radius-md);
  --dp-fcard-badge-fs: 10px;
  --dp-fcard-badge-fw: var(--dp-fw-bold);
  --dp-fcard-badge-ls: 0.16em;
  --dp-fcard-badge-transform: uppercase;
  --dp-fcard-year-bg: transparent;
  --dp-fcard-year-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-fcard-year-color: #c8d0e0;
  --dp-fcard-year-radius: 999px;
  --dp-fcard-year-fs: 12px;
  --dp-fcard-year-fw: var(--dp-fw-semibold);
  --dp-fcard-title-color: #f4f6fb;
  --dp-fcard-title-fs: 21px;
  --dp-fcard-title-fw: var(--dp-fw-extrabold);
  --dp-fcard-title-lh: 1.15;
  --dp-fcard-specs-color: #b5becf;
  --dp-fcard-specs-fs: 12px;
  --dp-fcard-footer-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-fcard-price-color: #f4f6fb;
  --dp-fcard-price-fs: 30px;
  --dp-fcard-price-fw: var(--dp-fw-bold);
  --dp-fcard-arrow-bg: transparent;
  --dp-fcard-arrow-radius: 999px;
  --dp-fcard-arrow-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-fcard-arrow-color: var(--dp-accent, #e0b795);
  --dp-fcard-arrow-transition: background .16s cubic-bezier(0.22, 0.61, 0.36, 1), border-color .16s cubic-bezier(0.22, 0.61, 0.36, 1), color .16s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-fcard-arrow-bg-hover: var(--dp-accent, #e0b795);
  --dp-fcard-arrow-fg-hover: var(--dp-accent-fg, #14110b);

  /* ── Listing badges (six fixed variants + the seventh the base forgot) ── */
  --dp-badge-hot-deal-bg: #c8d0e0;
  --dp-badge-hot-deal-fg: #14110b;
  --dp-badge-just-arrived-bg: #8b95a9;
  --dp-badge-just-arrived-fg: #14110b;
  --dp-badge-featured-bg: #dbe2ee;
  --dp-badge-featured-fg: #14110b;
  --dp-badge-price-drop-bg: #a9c6ea;
  --dp-badge-price-drop-fg: #14110b;
  --dp-badge-pending-sale-bg: rgba(6, 7, 13, 0.82);
  --dp-badge-pending-sale-fg: #c8d0e0;
  --dp-badge-sold-bg: rgba(6, 7, 13, 0.9);
  --dp-badge-sold-fg: #9da8bc;
  /* A listing whose `badge` meta is "Reserved" emits
     .dp-inv-card__badge--reserved, and neither style.css nor the three
     templates that declare the six variants carry a rule for it — the label
     therefore printed bare white on the photograph. Same plate as SOLD, with
     the PENDING label ink, so the unavailable pair reads as one family. */
  --dp-badge-reserved-bg: rgba(6, 7, 13, 0.9);
  --dp-badge-reserved-fg: #f4f6fb;

  /* ── Quick-view trigger ── */
  --dp-qvt-bg: var(--dp-accent, #e0b795);
  --dp-qvt-fg: var(--dp-accent-fg, #14110b);
  --dp-qvt-radius: var(--dp-radius-sm);
  --dp-qvt-fs: 12px;
  --dp-qvt-fw: var(--dp-fw-bold);
  --dp-qvt-ls: 0.16em;
  --dp-qvt-shadow: 0 10px 28px -14px color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent), 0 2px 6px -2px rgba(0, 0, 0, 0.55);
  --dp-qvt-bg-hover: #f4f6fb;
  --dp-qvt-shadow-hover: 0 18px 44px -16px color-mix(in srgb, var(--dp-accent, #e0b795) 58%, transparent), 0 4px 12px -5px rgba(0, 0, 0, 0.60);

  /* ── Stat cards ── */
  --dp-stat-transition: border-color .16s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-stat-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-stat-shadow-hover: 0 26px 64px -28px rgba(0, 0, 0, 0.88), 0 8px 20px -12px rgba(0, 0, 0, 0.58);
  --dp-stat-num-color: #f4f6fb;
  --dp-stat-num-fs: 66px;
  --dp-stat-num-fs-sm: 42px;
  --dp-stat-num-fw: var(--dp-fw-bold);
  --dp-stat-suf-color: #9da8bc;
  --dp-stat-suf-fs: 28px;
  --dp-stat-suf-fs-sm: 20px;
  --dp-stat-suf-fw: var(--dp-fw-medium);
  --dp-stat-label-color: #9da8bc;
  --dp-stat-label-fs: 15px;
  --dp-stat-label-fs-sm: 13px;
  --dp-stat-label-lh-sm: 1.5;

  /* ── Story ── */
  --dp-story-media-bg: #06070d;
  --dp-story-media-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-story-media-radius: var(--dp-radius-lg);
  --dp-story-media-shadow: 0 40px 96px -36px rgba(0, 0, 0, 0.92), 0 12px 28px -16px rgba(0, 0, 0, 0.62);
  --dp-story-quote-bg: transparent;
  --dp-story-quote-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-story-quote-border-left: 3px solid #f4f6fb;
  --dp-story-quote-radius: var(--dp-radius-sm);
  --dp-story-quote-color: #f4f6fb;
  --dp-story-quote-fs: 22px;
  --dp-story-quote-lh: 1.4;
  --dp-story-quote-style: normal;
  --dp-story-quote-fw: var(--dp-fw-extrabold);
  --dp-story-quote-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M7.17 4.73C4.9 5.76 3 7.94 3 10.5v7.75c0 1.24 1 2.25 2.25 2.25h5.5c1.24 0 2.25-1 2.25-2.25v-4.5c0-1.24-1-2.25-2.25-2.25H6.5c-.15-1.73 1.05-3.5 3.17-4.5L7.17 4.73zM17.17 4.73c-2.27 1.03-4.17 3.21-4.17 5.77v7.75c0 1.24 1 2.25 2.25 2.25h5.5c1.24 0 2.25-1 2.25-2.25v-4.5c0-1.24-1-2.25-2.25-2.25H16.5c-.15-1.73 1.05-3.5 3.17-4.5L17.17 4.73z'/%3E%3C/svg%3E");
  --dp-story-feat-color: #f4f6fb;
  --dp-story-feat-fs: 15px;
  --dp-story-feat-fw: var(--dp-fw-semibold);
  --dp-story-feat-icon-bg: transparent;
  --dp-story-feat-icon-radius: 999px;
  --dp-story-feat-icon-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-story-feat-icon-fs: 17px;
  --dp-story-feat-icon-sw: 2.1176;   /* 36 / 17px -> a 1.5px keyline at this size */

  /* ── Feature cards (Why Choose Us) ── */
  --dp-feature-bg: #161a28;
  --dp-feature-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-feature-radius: var(--dp-radius-md);
  --dp-feature-transition: border-color .16s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-feature-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-feature-glow: none;
  --dp-feature-icon-bg: transparent;
  --dp-feature-icon-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-feature-icon-color: #c8d0e0;
  --dp-feature-icon-radius: 999px;
  --dp-feature-icon-fs: 26px;
  --dp-feature-icon-sw: 1.3846;   /* 36 / 26px -> a 1.5px keyline at this size */
  --dp-feature-title-color: #f4f6fb;
  --dp-feature-title-fs: 19px;
  --dp-feature-title-fw: var(--dp-fw-extrabold);
  --dp-feature-text-color: #9da8bc;
  --dp-feature-text-fs: 15px;
  --dp-feature-text-lh: 1.62;

  /* ── Shipping ── */
  --dp-ship-title-fs: clamp(34px, 5.2vw, 64px);
  --dp-ship-sub2-color: #9da8bc;
  --dp-ship-sub2-fs: 15px;
  --dp-ship-sub2-fs-sm: 15px;
  --dp-ship-sub2-lh: 1.68;
  --dp-ship-pill-bg: transparent;
  --dp-ship-pill-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-ship-pill-color: #c8d0e0;
  --dp-ship-pill-radius: 999px;
  --dp-ship-pill-fs: 13px;
  --dp-ship-pill-fw: var(--dp-fw-semibold);
  --dp-ship-pill-transition: border-color .14s cubic-bezier(0.22, 0.61, 0.36, 1), background .14s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-ship-pill-bg-hover: rgba(206, 220, 248, 0.092);
  --dp-ship-pill-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-ship-pill-icon: #9da8bc;
  --dp-ship-counter-color: #f4f6fb;
  --dp-ship-counter-fs: clamp(56px, 8vw, 104px);
  --dp-ship-counter-fs-md: 48px;
  --dp-ship-counter-fw: var(--dp-fw-bold);
  --dp-ship-counter-ls: -0.03em;
  --dp-ship-counter-lbl-color: #9da8bc;
  --dp-ship-counter-lbl-fs: 14px;
  --dp-ship-counter-lbl-fw: var(--dp-fw-bold);
  --dp-ship-step-bg: #161a28;
  --dp-ship-step-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-ship-step-radius: var(--dp-radius-sm);
  --dp-ship-step-transition: border-color .14s cubic-bezier(0.22, 0.61, 0.36, 1), background .14s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-ship-step-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-ship-step-bg-hover: rgba(206, 220, 248, 0.046);
  --dp-ship-step-icon-fs: 24px;
  /* 3.3.0 icon round: the step icon block's height, MEASURED before the
     glyph was swapped, ten renders of the unchanged page in this skin at
     1440x900 and at 390x844 — 33px in every one of the twenty. The block
     had no height of its own: it was the emoji's line box. Pinning it to
     what it already was is what let the emoji be replaced without the
     card below it moving. style.css carries a measured base
     value (42px) for a site that loads no skin file at all; this line
     overrides it for this skin. */
  --dp-ship-step-icon-h: 33px;
  --dp-ship-step-icon-sw: 1.5;   /* 36 / 24px -> a 1.50px keyline at this size */
  --dp-ship-step-title-color: #f4f6fb;
  --dp-ship-step-title-fs: 20px;
  --dp-ship-step-title-fw: var(--dp-fw-extrabold);
  --dp-ship-step-text-color: #9da8bc;
  --dp-ship-step-text-fs: 14px;
  --dp-ship-step-text-lh: 1.68;
  --dp-ship-note-color: #8b95a9;
  --dp-ship-note-fs: 14px;

  /* ── Reviews ── */
  --dp-review-bg: #161a28;
  --dp-review-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-review-radius: var(--dp-radius-md);
  --dp-review-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.82), 0 2px 8px -4px rgba(0, 0, 0, 0.50);
  --dp-review-transition: border-color .16s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-review-glow: none;
  --dp-review-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-review-shadow-hover: 0 26px 64px -28px rgba(0, 0, 0, 0.88), 0 8px 20px -12px rgba(0, 0, 0, 0.58);
  --dp-review-star-color: #E8A33C;
  --dp-review-star-shadow: none;
  --dp-review-text-color: #c8d0e0;
  --dp-review-text-fs: 15px;
  --dp-review-text-lh: 1.62;
  --dp-review-text-style: normal;
  --dp-review-foot-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-review-av-bg: #232941;
  --dp-review-av-radius: 999px;
  --dp-review-av-fg: #f4f6fb;
  --dp-review-av-fs: 13px;
  --dp-review-av-fw: var(--dp-fw-bold);
  --dp-review-name-color: #f4f6fb;
  --dp-review-name-fs: 14px;
  --dp-review-name-fw: var(--dp-fw-extrabold);
  --dp-review-role-color: #9da8bc;
  --dp-review-role-fs: 13px;

  /* ── Contact ── */
  --dp-contact-item-bg: #161a28;
  --dp-contact-item-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-contact-item-radius: var(--dp-radius-md);
  --dp-contact-item-transition: border-color .14s cubic-bezier(0.22, 0.61, 0.36, 1), background .14s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-contact-item-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-contact-item-bg-hover: rgba(206, 220, 248, 0.046);
  --dp-contact-icon-bg: transparent;
  --dp-contact-icon-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-contact-icon-radius: 999px;
  --dp-contact-icon-fs: 18px;
  --dp-contact-icon-sw: 2;   /* 36 / 18px -> a 1.5px keyline at this size */
  --dp-contact-label-color: #9da8bc;
  --dp-contact-label-fs: 11px;
  --dp-contact-label-fw: var(--dp-fw-bold);
  --dp-contact-label-ls: 0.2em;
  --dp-contact-label-transform: uppercase;
  --dp-contact-value-color: #f4f6fb;
  --dp-contact-value-fs: 15px;
  --dp-contact-value-fw: var(--dp-fw-medium);
  --dp-contact-value-hover: #c8d0e0;
  --dp-contact-trust-bg: #161a28;
  --dp-contact-trust-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-contact-trust-radius: var(--dp-radius-md);
  --dp-contact-trust-title-color: #f4f6fb;
  --dp-contact-trust-title-fs: 22px;
  --dp-contact-trust-title-fw: var(--dp-fw-black);
  --dp-contact-trust-pill-bg: transparent;
  --dp-contact-trust-pill-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-contact-trust-pill-color: #c8d0e0;
  --dp-contact-trust-pill-radius: 999px;
  --dp-contact-trust-pill-fs: 12px;
  --dp-contact-trust-pill-fw: var(--dp-fw-semibold);
  --dp-contact-trust-pill-ls: 0.01em;
  --dp-contact-trust-pill-transition: border-color .14s cubic-bezier(0.22, 0.61, 0.36, 1), background .14s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-contact-trust-pill-bg-hover: rgba(206, 220, 248, 0.092);
  --dp-contact-trust-pill-tick: #9da8bc;
  --dp-contact-form-title-color: #f4f6fb;
  --dp-fs-contact-form-title: 26px;
  --dp-contact-form-sub-color: #9da8bc;
  --dp-fs-contact-form-sub: 15px;

  /* ── Forms ── */
  --dp-form-bg: #1c2133;
  --dp-form-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-form-radius: var(--dp-radius-lg);
  --dp-field-bg: #0f1220;
  --dp-field-border: 1px solid rgba(197, 214, 245, 0.168);
  --dp-field-radius: var(--dp-radius-input);
  --dp-field-color: #f4f6fb;
  --dp-field-fs: 15px;
  --dp-field-transition: border-color .14s cubic-bezier(0.22, 0.61, 0.36, 1), background .14s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-field-border-focus: var(--dp-accent, #e0b795);
  --dp-field-bg-focus: #151c2b;
  --dp-label-color: #9da8bc;
  /* style.css paints `.wpcf7-form label` from var(--dp-cf7-label-color,
     var(--dp-accent)) — the accent fallback is what an unskinned 2.9.4
     site renders. Section 12b already overrides that selector by class;
     this token says the same thing through the token channel, so the
     colour survives if that rule is ever refactored away.             */
  --dp-cf7-label-color: var(--dp-label-color);
  --dp-label-fs: 15px;
  --dp-label-fw: var(--dp-fw-bold);
  --dp-label-ls: 0.2em;
  --dp-submit-bg: linear-gradient(135deg, var(--dp-accent), var(--dp-accent-dark));
  --dp-submit-fg: var(--dp-accent-fg, #14110b);
  --dp-submit-radius: var(--dp-radius-input);
  --dp-submit-shadow: 0 10px 28px -14px color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent), 0 2px 6px -2px rgba(0, 0, 0, 0.55);

  /* ── Quick-view modal ── */
  --dp-qv-backdrop: rgba(5, 7, 13, 0.82);
  --dp-qv-backdrop-blur: blur(12px) saturate(120%);
  --dp-qv-dialog-bg: #1c2133;
  --dp-qv-dialog-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-qv-dialog-radius: var(--dp-radius-lg);
  --dp-qv-close-bg: var(--dp-accent, #e0b795);
  --dp-qv-close-radius: 999px;
  --dp-qv-close-fg: var(--dp-accent-fg, #14110b);
  --dp-qv-nav-bg: rgba(10, 12, 21, 0.78);
  --dp-qv-nav-radius: 999px;
  --dp-qv-nav-fg: #f4f6fb;
  --dp-qv-title-color: #f4f6fb;
  --dp-qv-title-fw: var(--dp-fw-black);
  --dp-qv-price-color: #f4f6fb;
  --dp-qv-price-fs: 32px;
  --dp-qv-price-fw: var(--dp-fw-bold);
  --dp-qv-desc-color: #9da8bc;
  --dp-qv-note-color: #8e99ad;
  --dp-qv-counter-bg: rgba(10, 12, 21, 0.80);
  --dp-qv-counter-fg: #f4f6fb;
  /* 3.3.1 - FOUR CORNERS TO TWO. This was `var(--dp-radius-lg)`, one value, so
     all four corners took 24px. At 680px and under the dialog is a BOTTOM
     SHEET: it is flush with the bottom of the window (measured, sheet bottom
     844 of a 844 viewport), so the two bottom corners were rounding against
     nothing and the backdrop showed through the notch - #292b2f in the corner
     against #3d4457 two dozen pixels inside it. Only the top corners round,
     which is what the other two skins already did. */
  --dp-qv-sheet-radius: var(--dp-radius-lg) var(--dp-radius-lg) 0 0;

  /* ── CF7 submit overlay ── */
  --dp-overlay-bg: rgba(5, 7, 13, 0.86);
  --dp-overlay-blur: blur(14px) saturate(120%);
  --dp-overlay-spinner-track: 2px solid rgba(206, 220, 248, 0.207);
  --dp-overlay-spinner-head: var(--dp-accent, #e0b795);
  --dp-overlay-spinner-radius: 50%;
  --dp-overlay-text-color: #c8d0e0;
  --dp-overlay-text-fs: 15px;
  --dp-overlay-text-fw: var(--dp-fw-semibold);
  --dp-overlay-text-ls: 0.02em;
  --dp-overlay-title-color: #f4f6fb;
  --dp-overlay-title-fs: 24px;
  --dp-overlay-title-fs-sm: 20px;
  --dp-overlay-title-fw: var(--dp-fw-black);
  --dp-overlay-msg-color: #9da8bc;
  --dp-overlay-msg-fs: 14px;
  --dp-overlay-msg-fs-sm: 14px;
  --dp-overlay-btn-radius: var(--dp-radius-input);
  --dp-overlay-btn-fs: 15px;
  --dp-overlay-btn-fs-sm: 14px;
  --dp-overlay-btn-fw: var(--dp-fw-bold);
  --dp-overlay-btn-call-bg: linear-gradient(135deg, var(--dp-cta), var(--dp-cta-dark));
  --dp-overlay-btn-call-fg: var(--dp-cta-fg, #14110b);
  --dp-overlay-btn-email-bg: rgba(206, 220, 248, 0.161);
  --dp-overlay-btn-email-fg: #f4f6fb;
  --dp-overlay-close-color: #9da8bc;
  --dp-overlay-close-hover: #f4f6fb;
  --dp-overlay-close-fs: 15px;
  --dp-overlay-close-fw: var(--dp-fw-semibold);
  --dp-overlay-title-ls: -0.03em;
  --dp-overlay-title-lh: 1.17;
  --dp-overlay-msg-lh: 1.41;
  --dp-overlay-btn-hover-filter: brightness(0.86);

  /* ── Footer ── */
  --dp-footer-bg: #06070d;
  --dp-footer-fg: #f4f6fb;
  --dp-footer-border-image: linear-gradient(90deg, rgba(200, 208, 224, 0) 0%, rgba(200, 208, 224, 0.28) 50%, rgba(200, 208, 224, 0) 100%);
  --dp-footer-divider: 1px solid rgba(197, 214, 245, 0.152);
  --dp-footer-divider-sm: 1px solid rgba(197, 214, 245, 0.152);
  --dp-footer-logo-opacity: 1;
  --dp-footer-logo-color: #f4f6fb;
  --dp-footer-logo-fs: 22px;
  --dp-footer-logo-fw: var(--dp-fw-black);
  --dp-footer-desc-color: #9da8bc;
  --dp-footer-desc-fs: 15px;
  --dp-footer-desc-lh: 1.8;
  --dp-footer-title-color: #f4f6fb;
  --dp-footer-title-fs: 14px;
  --dp-footer-title-fw: var(--dp-fw-bold);
  --dp-footer-title-ls: 0.2em;
  --dp-footer-title-border: 1px solid rgba(200, 208, 224, 0.30);
  --dp-footer-link-color: #9da8bc;
  --dp-footer-link-fs: 14px;
  --dp-footer-link-fw: var(--dp-fw-medium);
  --dp-footer-link-hover: #f4f6fb;
  --dp-footer-link-arrow: "→";
  --dp-footer-link-arrow-color: var(--dp-accent, #e0b795);
  --dp-footer-link-arrow-fs: 14px;
  --dp-footer-icon-bg: transparent;
  --dp-footer-icon-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-footer-icon-radius: 999px;
  --dp-footer-icon-fill: #f4f6fb;
  --dp-footer-icon-bg-hover: rgba(206, 220, 248, 0.138);
  --dp-footer-icon-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-footer-contact-color: #c8d0e0;
  --dp-footer-contact-fs: 15px;
  --dp-footer-contact-lh: 1.6;
  --dp-footer-contact-fw: var(--dp-fw-medium);
  --dp-footer-contact-hover: #f4f6fb;
  --dp-footer-bottom-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-footer-copy-color: #8e99ad;
  --dp-footer-copy-fs: 13px;
  --dp-footer-dot-radius: 999px;
  --dp-footer-dot-bg: #838da1;

  /* ── Reveal motion ── */
  --dp-scroll-reveal-transition: all 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-reveal-anim: dpRevealUp 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) backwards, box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-text-xs: 11px;
  --dp-text-sm: 13px;
  --dp-text-base: 15px;
  --dp-text-md: 16px;
  --dp-text-lg: 18px;

  /* ── Button: dark white variants ── */
  /* 3.2.0 HIERARCHY REPAIR — see .dp-btn--dark in style.css.
     This skin had --dp-btn-dark-bg == --dp-btn-cta-bg (#1c2133) and
     --dp-btn-dark-fg == --dp-btn-cta-fg (#f4f6fb), so the listing sidebar's
     "Make Inquiry" and "Call Now" rendered as two identical plates. The CTA
     keeps the plate because it is the higher-intent action; the inquiry
     button becomes the secondary, pointed at THIS SKIN'S OWN ghost family
     (--dp-btn-ghost-bg / --dp-btn-ghost-border, declared a few hundred lines
     above) rather than at a colour invented here, so the skin still has one
     idea of what "quiet" looks like. The keyline is the ghost border's
     colour carried as an inset shadow, because .dp-sl-btn-v2 sets
     `border: none` on the only element that wears this class. */
  --dp-btn-dark-bg: rgba(10, 12, 21, 0.34);
  --dp-btn-dark-fg: #f4f6fb;
  --dp-btn-dark-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-btn-dark-keyline: inset 0 0 0 1px rgba(197, 214, 245, 0.26);
  --dp-btn-dark-bg-hover: rgba(206, 220, 248, 0.115);
  --dp-btn-dark-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-btn-white-bg: #1c2133;
  --dp-btn-white-bg-hover: #232941;
  --dp-btn-white-shadow-hover: 0 18px 44px -16px color-mix(in srgb, var(--dp-accent, #e0b795) 58%, transparent), 0 4px 12px -5px rgba(0, 0, 0, 0.60);

  /* ── Bare CF7 fields (.wpcf7-form, outside .dp-form-wrap) ── */
  --dp-input-color: #f4f6fb;
  --dp-input-placeholder: #8e99ad;
  --dp-input-option-color: #c8d0e0;
  --dp-input-option-empty-color: #8e99ad;
  --dp-input-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--dp-accent, #e0b795) 22%, transparent);
  --dp-input-bg-focus: #151c2b;
  --dp-input-option-bg: #0f1220;
  --dp-input-option-fg: #f4f6fb;
  --dp-input-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(197, 214, 245, 0.364)' stroke-width='1.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  --dp-submit-shadow-hover: 0 18px 44px -16px color-mix(in srgb, var(--dp-accent, #e0b795) 58%, transparent), 0 4px 12px -5px rgba(0, 0, 0, 0.60);
  --dp-invalid-color: #ff8c86;
  --dp-error-bg: rgba(255, 90, 82, 0.1);
  --dp-error-color: #ffb5b0;
  --dp-error-border: 1px solid rgba(255, 90, 82, 0.7);
  --dp-spinner-border-color: color-mix(in srgb, var(--dp-accent-fg, #14110b) 28%, transparent) color-mix(in srgb, var(--dp-accent-fg, #14110b) 28%, transparent) color-mix(in srgb, var(--dp-accent-fg, #14110b) 28%, transparent) var(--dp-accent-fg, #14110b);

  /* ── Testimonial card ── */
  --dp-testimonial-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-testimonial-radius: var(--dp-radius-lg);
  --dp-testimonial-text-color: #c8d0e0;
  --dp-testimonial-foot-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-testimonial-av-radius: 999px;
  --dp-testimonial-av-fg: #f4f6fb;
  --dp-testimonial-name-color: #f4f6fb;
  --dp-testimonial-role-color: #8e99ad;

  /* ── FAQ accordion (.dp-faq-q .dp-faq-a markup) ── */
  --dp-accordion-item-bg: #161a28;
  --dp-accordion-q-color: #f4f6fb;

  /* ── Quick view: parts base.css does not cover ── */
  --dp-qv-close-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-qv-close-bg-hover: color-mix(in srgb, #ffffff 35%, var(--dp-accent, #e0b795));
  --dp-qv-gallery-bg: #06070d;
  --dp-qv-skeleton-bg: linear-gradient(90deg, #0f1220 0%, #232941 50%, #0f1220 100%);
  --dp-qv-badge-radius: var(--dp-radius-full);
  --dp-qv-counter-radius: var(--dp-radius-full);
  --dp-qv-nav-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-qv-nav-bg-hover: rgba(10, 12, 21, 0.90);
  --dp-qv-thumbs-bg: #06070d;
  --dp-qv-thumb-radius: var(--dp-radius-md);
  --dp-qv-scrollbar-color: rgba(197, 214, 245, 0.22) transparent;
  --dp-qv-spec-bg: rgba(206, 220, 248, 0.069);
  --dp-qv-spec-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-qv-spec-radius: var(--dp-radius-full);
  --dp-qv-spec-color: #b5becf;

  /* ── 3.3.1 QUICK VIEW, ON MIDNIGHT & BRONZE'S OWN LADDER ─────────────────
     A REAL SURFACE. The dialog was a flat #1c2133 fill. Everything else
     raised on this skin is built the same way — a light wash over the top
     fifth, then a vertical fall — and --dp-card-bg is that construction
     exactly. The dialog now uses it, one rung lighter than a card because it
     is one layer further forward. The wash is color-mix'd from --dp-accent,
     so it follows the dealer's settings instead of freezing the bronze; at
     4% it is depth, not colour, and it is not the accent doing a job. */
  --dp-qv-dialog-bg:
      linear-gradient(180deg, color-mix(in srgb, var(--dp-accent, #e0b795) 4%, transparent) 0%,
                              color-mix(in srgb, var(--dp-accent, #e0b795) 0%, transparent) 22%),
      linear-gradient(180deg, #1c2133 0%, #12162a 100%);
  /* ELEVATION. --dp-shadow-hover is the deepest rung this skin has and a modal
     sits above every card, so this is that rung carried one step further:
     wider spread, softer falloff, the same two-layer shape. */
  --dp-qv-dialog-shadow:
      0 44px 104px -34px rgba(0, 0, 0, 0.92),
      0 14px 36px -18px rgba(0, 0, 0, 0.64);
  /* THE TOP-EDGE LIGHT LINE, in the skin's cool ink and NOT in bronze. The
     metal is reserved for action — a hairline along the top of a panel is
     decoration, so it takes the same cool rung as --dp-hairline, two steps up
     in opacity because it has to read against the panel's own light wash. */
  --dp-qv-dialog-edge:
      linear-gradient(90deg, transparent 0%, rgba(197, 214, 245, 0.24) 14%,
                             rgba(197, 214, 245, 0.24) 86%, transparent 100%);
  /* NO GLASS ON THE DIALOG, deliberately. The header is glass because the page
     scrolls under it and there is something to see. This dialog sits on a
     backdrop that is already rgba(5,7,13,.82) WITH blur(12px) behind it —
     there is nothing left to blur, and a translucent panel over it would only
     mud the surface the text has to sit on. The glass on this skin's modal is
     on the gallery furniture, where there IS a photograph underneath. */
  --dp-qv-dialog-blur: none;
  --dp-qv-nav-blur: blur(10px) saturate(140%);
  /* MOTION. Was .22s in, .18s out, .28s for the panel, all with a generic
     `ease` no skin could reach. One token, at the theme's own curve. */
  --dp-qv-motion: 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-qv-motion-ms: 300;
  /* The five spec marks are decoration, so they take the cool ink rung this
     skin already uses for its quietest text, one step below the pill's own
     --dp-qv-spec-color. Not the accent: nothing happens when you look at a
     mileage figure. */
  --dp-qv-spec-ic-color: #8e99ad;
  --dp-qv-spec-gap: 7px;

  /* ── Inventory trust strip ── */
  --dp-trust-bg: #161a28;
  --dp-trust-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-trust-pill-color: #9da8bc;

  /* ── Section heading block ── */
  --dp-heading-title-color: #f4f6fb;
  --dp-heading-divider-radius: var(--dp-radius-full);
  --dp-heading-sub-color: #9da8bc;

  /* ── CTA banner ── */
  --dp-cta-banner-radius: var(--dp-radius-lg);
  --dp-cta-banner-shadow: 0 40px 96px -36px rgba(0, 0, 0, 0.92), 0 12px 28px -16px rgba(0, 0, 0, 0.62);
  --dp-cta-banner-btn-bg: var(--dp-accent-fg, #14110b);
  --dp-cta-banner-btn-radius: var(--dp-radius-full);
  --dp-cta-banner-btn-shadow: 0 10px 28px -14px color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent), 0 2px 6px -2px rgba(0, 0, 0, 0.55);
  --dp-cta-banner-btn-shadow-hover: 0 18px 44px -16px color-mix(in srgb, var(--dp-accent, #e0b795) 58%, transparent), 0 4px 12px -5px rgba(0, 0, 0, 0.60);
  --dp-cta-banner-btn-ghost-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.82), 0 2px 8px -4px rgba(0, 0, 0, 0.50);
  --dp-cta-banner-btn-ghost-bg-hover: color-mix(in srgb, var(--dp-accent-fg, #14110b) 12%, transparent);

  /* ── Step card ── */
  --dp-step-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-step-radius: var(--dp-radius-md);
  --dp-step-title-color: #f4f6fb;
  --dp-step-text-color: #9da8bc;
  --dp-step-list-color: #8e99ad;
  --dp-step-num-radius: 999px;

  /* ── FAQ item (.dp-faq-item__q markup) ── */
  --dp-faq-item-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-faq-item-radius: var(--dp-radius-md);
  --dp-faq-q-color: #f4f6fb;
  --dp-faq-a-color: #b5becf;

  /* ── Form wrapper chrome ── */
  --dp-form-title-color: #f4f6fb;
  --dp-form-sub-color: #8e99ad;
  --dp-form-note-color: #8b95a9;
  --dp-form-response-radius: var(--dp-radius-input);
  --dp-form-invalid-color: #ff5a52;

  /* ── Hero ── */
  --dp-hero-note-color: #b5becf;

  /* ── merged from tokens-chrome.css — front-page.php header.php footer.php (chrome) ── */
  --dp-home-hero-sub-color: #c8d0e0;
  --dp-home-hero-pills-color: #b5becf;
  --dp-home-hero-pill-bg: rgba(206, 220, 248, 0.069);
  --dp-home-hero-pill-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-fcard-arrow-border-hover: var(--dp-accent);
  --dp-overlay-close-bg: transparent;
  --dp-footer-logo-opacity-hover: 1;
  --dp-footer-bottom-link-color: #8b95a9;
  --dp-footer-bottom-link-hover: var(--dp-accent);
  --dp-field-invalid-border: #ff5a52;
  --dp-field-invalid-shadow: 0 0 0 3px rgba(255, 90, 82, 0.20);
  --dp-field-error-color: #ff5a52;
  --dp-page-wrapper-bg: #1c2133;
  --dp-page-wrapper-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-page-wrapper-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 38%, transparent);
  --dp-page-subtitle-color: #9da8bc;
  --dp-page-body-color: #b5becf;
  --dp-page-card-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-page-card-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-page-card-title-color: #f4f6fb;
  --dp-page-card-text-color: #9da8bc;
  --dp-page-card-icon-bg: color-mix(in srgb, var(--dp-accent) 8%, transparent);
  --dp-page-card-icon-border: 1px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-page-intro-color: #8e99ad;
  --dp-page-ci-icon-bg: color-mix(in srgb, var(--dp-accent) 8%, transparent);
  --dp-page-ci-label-color: #8b95a9;
  --dp-page-ci-value-color: #f4f6fb;
  --dp-page-trust-item-color: #f4f6fb;
  --dp-faq-item-border-open: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-page-faq-a-color: #9da8bc;
  --dp-abt-check-bg: linear-gradient(180deg, #1c2133 0%, #0f1220 100%);
  --dp-abt-check-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-abt-check-shadow-hover: 0 26px 64px -28px rgba(0, 0, 0, 0.88), 0 8px 20px -12px rgba(0, 0, 0, 0.58);
  --dp-abt-check-icon-bg: color-mix(in srgb, var(--dp-accent) 14%, transparent);
  --dp-abt-check-icon-border: 1px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-abt-check-desc-color: #9da8bc;
  --dp-abt-check-meta-color: #8e99ad;
  --dp-abt-timeline-line-bg: color-mix(in srgb, var(--dp-accent) 20%, transparent);
  --dp-abt-tl-year-radius: 999px;
  --dp-abt-tl-dot-radius: 999px;
  --dp-abt-tl-badge-bg: color-mix(in srgb, var(--dp-accent) 12%, transparent);
  --dp-abt-tl-badge-border: 1px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-abt-tl-text-color: #9da8bc;
  --dp-abt-val-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-abt-val-icon-border: 1px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-abt-val-text-color: #b5becf;
  --dp-shp-line-shadow: none;
  --dp-shp-trailer-list-color: #b5becf;
  --dp-shp-trailer-price-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-shp-trailer-price-strong-color: #f4f6fb;
  --dp-shp-tbl-head-bg: color-mix(in srgb, var(--dp-accent) 8%, transparent);
  --dp-shp-tbl-head-border: 1px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-shp-tbl-td-color: #b5becf;
  --dp-shp-tbl-td-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-shp-tbl-val-color: #f4f6fb;
  --dp-shp-tbl-feat-bg: color-mix(in srgb, var(--dp-accent) 6%, transparent);
  --dp-shp-tbl-feat-border-color: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-shp-tbl-note-color: #8b95a9;
  --dp-shp-step-text-color: #9da8bc;
  --dp-shp-step-num-border: 2px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-shp-trust-badge-bg: #1c2133;
  --dp-shp-trust-badge-border: 1px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);

  /* ── merged from tokens-listing.css — single-listing.php archive-listing.php (listing) ── */
  --dp-error: #c62b24;
  --dp-sl-back-color: #8e99ad;
  --dp-sl-muted: #8e99ad;
  --dp-sl-panel-border: 1px solid #232941;
  --dp-sl-box-divider: 1px solid #232941;
  --dp-sl-srow-divider: 1px solid rgba(197, 214, 245, 0.152);
  --dp-sl-sidebar-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-sl-sidebar-head-radius: var(--dp-radius-xs) var(--dp-radius-xs) 0 0;
  --dp-sl-sidebar-radius: 0 0 var(--dp-radius-xs) var(--dp-radius-xs);
  --dp-sl-ghost-bg: rgba(206, 220, 248, 0.069);
  --dp-sl-ghost-bg-hover: rgba(206, 220, 248, 0.115);
  --dp-sl-ghost-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-sl-ghost-border-sm: 1px solid rgba(197, 214, 245, 0.152);
  --dp-sl-share-color: #9da8bc;
  --dp-sl-share-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 38%, transparent);
  --dp-sl-share-sm-color: #9da8bc;
  --dp-sl-share-sm-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 38%, transparent);
  --dp-sl-share-icon-opacity: 0.7;
  --dp-sl-gal-btn-radius: var(--dp-radius-md);
  --dp-sl-gal-btn-bg: rgba(10, 12, 21, 0.78);
  --dp-sl-gal-btn-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-sl-gal-btn-bg-hover: var(--dp-accent, #e0b795);
  --dp-sl-cnt-bg: rgba(10, 12, 21, 0.80);
  --dp-sl-no-img-color: #7d8798;
  --dp-sl-thumb-radius: var(--dp-radius-md);
  --dp-sl-thumb-border: 2px solid transparent;
  --dp-sl-desc-color: #c8d0e0;
  --dp-sl-specs-toggle-bg: color-mix(in srgb, var(--dp-accent) 8%, transparent);
  --dp-sl-specs-toggle-border: 1px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-sl-specs-toggle-bg-hover: color-mix(in srgb, var(--dp-accent) 16%, transparent);
  --dp-sl-specs-toggle-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-sl-reserve-bg: linear-gradient(135deg, var(--dp-reserve, #e8a33c), var(--dp-reserve-dark, #c9852c));
  --dp-sl-reserve-border: 1px solid color-mix(in srgb,var(--dp-reserve) 50%,transparent);
  --dp-sl-reserve-shadow: 0 10px 28px -14px color-mix(in srgb, var(--dp-reserve, #e8a33c) 42%, transparent), 0 2px 6px -2px rgba(0, 0, 0, 0.55);
  --dp-sl-reserve-shadow-pulse: none;
  --dp-sl-reserve-shadow-hover: 0 18px 44px -16px color-mix(in srgb, var(--dp-reserve, #e8a33c) 58%, transparent), 0 4px 12px -5px rgba(0, 0, 0, 0.60);
  --dp-sl-reserve-icon-bg: rgba(6, 7, 13, 0.22);
  --dp-sl-reserve-arrow-opacity: 0.9;
  --dp-sl-noobl-color: #8b95a9;
  --dp-sl-reserve-sub-color: #8b95a9;
  --dp-sl-inq-icon-bg: color-mix(in srgb,var(--dp-accent) 12%,transparent);
  --dp-sl-inq-icon-border: 1px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-sl-noform-border: 1px dashed rgba(197, 214, 245, 0.152);
  --dp-sl-noform-color: #8b95a9;
  --dp-sl-inq-hours-color-hover: #b5becf;
  --dp-sl-lb-overlay-bg: rgba(5, 7, 13, 0.88);
  --dp-sl-lb-overlay-blur: blur(16px) saturate(120%);
  --dp-sl-lb-btn-radius: var(--dp-radius-input);
  --dp-sl-lb-close-bg: rgba(206, 220, 248, 0.115);
  --dp-sl-lb-close-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-sl-lb-close-bg-hover: rgba(206, 220, 248, 0.161);
  /* The two lightbox arrows are the only lightbox controls laid OVER the
     photograph — the close button sits on the 0.96 overlay. At 6% white they
     were effectively transparent and the white chevron measured 1.4-1.5:1 at
     its worst over a bright frame. They now take the same opaque plate as
     their on-page twins, from the one token that already carries it. */
  --dp-sl-lb-nav-bg: var(--dp-sl-gal-btn-bg);
  --dp-sl-lb-nav-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-sl-lb-nav-bg-hover: var(--dp-accent, #e0b795);
  --dp-sl-lb-nav-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  /* The transparent button over the main photo that opens the lightbox. The
     base gives it `cursor: zoom-in` and nothing else, so on a pointer device
     the photo advertised nothing; these two are its hover paint (section 12). */
  --dp-sl-lb-trigger-bg-hover: rgba(6, 7, 13, 0.22);
  --dp-sl-lb-trigger-ring-hover: inset 0 0 0 1px color-mix(in srgb, var(--dp-accent, #e0b795) 55%, transparent);
  --dp-sl-lb-counter-bg: rgba(6, 7, 13, 0.53);
  --dp-sl-lb-counter-color: #9da8bc;
  --dp-sl-notice-text-color: #9da8bc;
  --dp-sl-sold-overlay-bg: rgba(6, 7, 13, 0.795);
  --dp-sl-sold-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --dp-sl-sold-notice-bg: rgba(255, 90, 82, 0.08);
  --dp-sl-sold-notice-border: 1px solid rgba(255, 90, 82, 0.25);
  --dp-sl-reserved-overlay-bg: rgba(6, 7, 13, 0.742);
  --dp-sl-reserved-bg: #454d5c;
  --dp-sl-reserved-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --dp-sl-reserved-notice-bg: rgba(139, 149, 169, 0.10);
  --dp-sl-reserved-notice-border: 1px solid rgba(125, 135, 152, 0.35);
  --dp-sl-reserved-notice-color: #b5becf;
  --dp-sl-pending-overlay-bg: rgba(6, 7, 13, 0.477);
  --dp-sl-pending-bg: #c8d0e0;
  --dp-sl-pending-fg: #14110b;
  --dp-sl-pending-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --dp-sl-pending-notice-bg: rgba(181, 190, 207, 0.10);
  --dp-sl-pending-notice-border: 1px solid rgba(232, 163, 60, 0.35);
  --dp-sl-pending-notice-color: #b5becf;
  --dp-sl-rel-bg: linear-gradient(180deg, #161a28 0%, #0f1220 100%);
  --dp-sl-rel-shadow-hover: 0 26px 64px -28px rgba(0, 0, 0, 0.88), 0 8px 20px -12px rgba(0, 0, 0, 0.58);
  --dp-inv-features-bg: linear-gradient(180deg, #0f1220 0%, #0a0c15 100%);
  --dp-inv-features-divider: 1px solid rgba(197, 214, 245, 0.152);
  --dp-inv-feat-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-inv-feat-shadow-hover: 0 26px 64px -28px rgba(0, 0, 0, 0.88), 0 8px 20px -12px rgba(0, 0, 0, 0.58);
  --dp-inv-feat-num-border: 1px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-inv-feat-text-color: #9da8bc;
  --dp-inv-search-icon-color: #8b95a9;
  --dp-inv-count-color: #8e99ad;
  --dp-inv-loading-opacity: 0.4;
  --dp-inv-loading-blur: blur(2px);
  --dp-inv-skeleton-radius: var(--dp-radius-md);
  --dp-inv-skeleton-bg: linear-gradient(90deg, #0f1220 0%, #232941 50%, #0f1220 100%);
  --dp-inv-card-scrim: rgba(6, 7, 13, 0);
  --dp-inv-card-scrim-hover: rgba(6, 7, 13, 0.42);
  --dp-inv-photocount-bg: rgba(10, 12, 21, 0.80);
  --dp-inv-photocount-blur: blur(8px) saturate(140%);
  /* 1.4.11 — 0.34 measured 3.03:1 on the card #0a0b0d and only 2.89:1 where the
     same mark sits on true black. 0.42 gives 4.06:1 on #0a0b0d and 3.95:1 on
     #000000, against 7.45:1 for the spec values it separates (--dp-text-muted). */
  --dp-inv-card-dot: #7d8798;
  --dp-inv-empty-color: #9da8bc;
  --dp-inv-showing-color: #8b95a9;
  --dp-inv-page-btn-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-inv-page-btn-bg: rgba(206, 220, 248, 0.069);
  --dp-inv-page-btn-color: #b5becf;
  --dp-inv-page-btn-bg-hover: color-mix(in srgb,var(--dp-accent) 8%,transparent);
  --dp-inv-page-btn-disabled-opacity: 0.35;
  --dp-404-sub-color: #9da8bc;
  --dp-404-or-color: #8b95a9;
  --dp-404-phone-opacity-hover: 0.8;
  --dp-404-links-border-top: 1px solid rgba(197, 214, 245, 0.152);
  --dp-404-links-title-color: #8b95a9;
  --dp-404-link-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-404-link-color: #b5becf;
  --dp-404-link-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-404-link-bg-hover: color-mix(in srgb, var(--dp-accent) 6%, transparent);
  --dp-legal-updated-color: #8b95a9;
  --dp-legal-body-bg: #161a28;
  --dp-legal-body-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-legal-divider: 1px solid rgba(197, 214, 245, 0.152);
  --dp-legal-text-color: #b5becf;
  --dp-ty-panel-bg: #1c2133;
  --dp-ty-panel-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-ty-sub-color: #9da8bc;
  --dp-ty-countdown-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-ty-countdown-label-color: #8b95a9;
  --dp-ty-countdown-unit-color: #8b95a9;
  --dp-ty-countdown-sep-color: #7d8798;
  --dp-ty-countdown-bar-bg: rgba(206, 220, 248, 0.069);
  --dp-ty-countdown-fill-bg: linear-gradient(90deg, #9da8bc, #c8d0e0);
  --dp-ty-feature-text-color: #b5becf;
  --dp-ty-contact-note-color: #8e99ad;
  --dp-ty-contact-item-color: #b5becf;
  --dp-ty-trust-bg: color-mix(in srgb, var(--dp-accent) 7%, transparent);
  --dp-ty-trust-border: 1px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-ty-trust-color: #c8d0e0;
  --dp-ty-trust-bg-hover: color-mix(in srgb, var(--dp-accent) 12%, transparent);
  --dp-ty-trust-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-ty-sec-head-sub-color: #8e99ad;
  --dp-ty-review-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-ty-review-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-ty-review-text-color: #b5becf;
  --dp-ty-review-foot-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-ty-review-role-color: #8b95a9;
  --dp-ty-inv-card-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-ty-inv-card-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-ty-inv-img-bg: #06070d;
  --dp-ty-inv-type-color: #8b95a9;
  --dp-ty-inv-price-call-color: #8e99ad;
  --dp-ty-inv-btn-shadow-hover: 0 18px 44px -16px color-mix(in srgb, var(--dp-accent, #e0b795) 58%, transparent), 0 4px 12px -5px rgba(0, 0, 0, 0.60);
  --dp-btt-panel-bg: rgba(16, 20, 33, 0.72);
  --dp-btt-panel-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-btt-panel-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.82), 0 2px 8px -4px rgba(0, 0, 0, 0.50);
  --dp-btt-panel-blur: blur(16px) saturate(150%);
  --dp-btt-panel-bg-hover: rgba(206, 220, 248, 0.138);
  --dp-btt-panel-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 42%, transparent);
  --dp-btt-panel-shadow-hover: 0 26px 64px -28px rgba(0, 0, 0, 0.88), 0 8px 20px -12px rgba(0, 0, 0, 0.58);
  --dp-bc-color: #8b95a9;
  --dp-bc-link-color: #8e99ad;
  --dp-bc-sep-color: #7d8798;

  /* ── merged from tokens-transaction.css — page-reserve.php (transaction) ── */
  --dp-rv-wrapper-bg: #1c2133;
  --dp-rv-wrapper-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-rv-wrapper-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 38%, transparent);
  --dp-rv-wrapper-glow: radial-gradient(circle, color-mix(in srgb, var(--dp-accent) 14%, transparent), transparent 70%);
  --dp-rv-wrapper-glow-opacity: 0.5;
  --dp-rv-subtitle-color: #8e99ad;
  --dp-rv-sub-color: #8e99ad;
  --dp-rv-step-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-rv-step-active-bg: color-mix(in srgb, var(--dp-accent) 8%, transparent);
  --dp-rv-step-active-border: color-mix(in srgb, var(--dp-accent) 60%, transparent);
  --dp-rv-step-current-border: var(--dp-cta);
  --dp-rv-step-num-radius: 999px;
  --dp-rv-step-num-bg: rgba(206, 220, 248, 0.115);
  --dp-rv-step-num-color: #9da8bc;
  --dp-rv-step-lbl-color: #8b95a9;
  --dp-rv-step-line-bg: rgba(197, 214, 245, 0.112);
  --dp-rv-card-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-rv-card-border-hover: color-mix(in srgb, var(--dp-accent, #e0b795) 38%, transparent);
  --dp-rv-card-shadow-hover: 0 26px 64px -28px rgba(0, 0, 0, 0.88), 0 8px 20px -12px rgba(0, 0, 0, 0.58);
  --dp-rv-card-note-color: #8b95a9;
  --dp-rv-card-img-bg: #06070d;
  --dp-rv-fallback-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-rv-fallback-color: #8e99ad;
  --dp-rv-trust-pill-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-rv-trust-pill-color: #b5becf;
  --dp-rv-form-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-rv-form-shadow: 0 40px 96px -36px rgba(0, 0, 0, 0.92), 0 12px 28px -16px rgba(0, 0, 0, 0.62);
  --dp-rv-form-glow: radial-gradient(circle at top, color-mix(in srgb, var(--dp-cta) 16%, transparent), transparent 68%);
  --dp-rv-form-border-hover: var(--dp-cta);
  --dp-rv-form-head-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-rv-form-icon-radius: 999px;
  --dp-rv-form-icon-bg: #232941;
  --dp-rv-form-icon-fg: #f4f6fb;
  --dp-rv-form-icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --dp-rv-form-sub-color: #8e99ad;
  --dp-rv-form-h3-dot-radius: 999px;
  --dp-rv-form-h3-dot-shadow: none;
  --dp-rv-file-border: 1px dashed rgba(197, 214, 245, 0.152);
  --dp-rv-file-color: #9da8bc;
  --dp-rv-file-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-rv-submit-bg: linear-gradient(135deg, var(--dp-cta), var(--dp-cta-dark));
  --dp-rv-submit-shadow: 0 10px 28px -14px color-mix(in srgb, var(--dp-cta, #e0b795) 42%, transparent), 0 2px 6px -2px rgba(0, 0, 0, 0.55);
  --dp-rv-submit-shadow-hover: 0 18px 44px -16px color-mix(in srgb, var(--dp-cta, #e0b795) 58%, transparent), 0 4px 12px -5px rgba(0, 0, 0, 0.60);
  --dp-rv-review-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-rv-review-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-rv-review-text-color: #b5becf;
  --dp-rv-review-av-bg: #232941;
  --dp-rv-review-role-color: #8b95a9;
  --dp-rv-faq-bg-hover: color-mix(in srgb, var(--dp-accent) 3%, var(--dp-bg-card));
  --dp-rv-faq-border-open: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-rv-faq-bg-open: color-mix(in srgb, var(--dp-accent) 5%, var(--dp-bg-card));
  --dp-rv-faq-a-color: #9da8bc;
  --dp-reserve: #fbbf24;
  --dp-reserve-dark: #e2a60b;
  --dp-reserve-fg: #000000;
  --dp-fw-light: 300;
  --dp-btn-white-fw: var(--dp-fw-black);
  --dp-cf7-label-fs: 11px;
  --dp-cf7-label-fw: var(--dp-fw-extrabold);
  --dp-cf7-label-ls: 0.2em;
  --dp-cf7-label-transform: uppercase;
  --dp-input-fs: 16px;
  --dp-input-lh: 1.41;
  /* 3.2.0 — ONE submit token set. The submit used to be claimed by two
     parallel families, --dp-cf7-submit-* (6) and --dp-submit-* (7),
     overlapping on fg/fs/fw/shadow-hover; which one reached the button was
     decided by a single attribute selector rather than by anyone's
     decision, and four tokens reached it never. The merged set keeps the
     value that ACTUALLY RENDERED in every case, so nothing about the
     button changes. What each name now means is written once, here. */
  --dp-submit-fs: 16px;
  --dp-submit-fw: var(--dp-fw-extrabold);
  --dp-submit-transform: uppercase;
  --dp-submit-ls: -0.01em;
  --dp-invalid-fs: 13px;
  --dp-cf7-response-fs: 15px;
  --dp-cf7-response-fw: var(--dp-fw-semibold);
  --dp-testimonial-stars-fs: 16px;
  --dp-testimonial-stars-ls: 0.28em;
  --dp-testimonial-text-fs: 15px;
  --dp-testimonial-text-lh: 1.6;
  --dp-testimonial-text-fs-sm: 15px;
  --dp-testimonial-av-fs: 14px;
  --dp-testimonial-av-fw: var(--dp-fw-extrabold);
  --dp-testimonial-name-fs: 15px;
  --dp-testimonial-name-fw: var(--dp-fw-extrabold);
  --dp-testimonial-role-fs: 12px;
  --dp-accordion-q-fs: 16px;
  --dp-accordion-q-fw: var(--dp-fw-bold);
  --dp-accordion-icon-fs: 22px;
  --dp-accordion-icon-fw: var(--dp-fw-light);
  --dp-accordion-a-fs: 15px;
  --dp-accordion-a-lh: 1.69;
  --dp-qv-close-modal-fs: 22px;
  --dp-qv-close-lh: 1;
  --dp-qv-badge-fs: 11px;
  --dp-qv-badge-fw: var(--dp-fw-extrabold);
  --dp-qv-badge-transform: uppercase;
  --dp-qv-badge-ls: 0.08em;
  --dp-qv-counter-fs: 13px;
  --dp-qv-counter-fw: var(--dp-fw-bold);
  --dp-qv-counter-ls: -0.01em;
  --dp-qv-nav-fs: 22px;
  --dp-qv-title-modal-fs: 24px;
  --dp-qv-title-lh: 1.2;
  --dp-qv-price-ls: -0.03em;
  --dp-qv-spec-fs: 13px;
  --dp-qv-spec-fw: var(--dp-fw-bold);
  --dp-qv-desc-modal-fs: 14px;
  --dp-qv-desc-modal-lh: 1.65;
  --dp-qv-note-modal-fs: 11px;
  --dp-trust-pill-fs: 13px;
  --dp-trust-pill-fw: var(--dp-fw-bold);
  --dp-trust-pill-ls: -0.01em;
  --dp-trust-pill-fs-sm: 12px;
  --dp-heading-title-fs: clamp(31px,4.48vw,54px);
  --dp-heading-title-fw: var(--dp-fw-black);
  --dp-heading-title-lh: 1.15;
  --dp-heading-title-ls: -0.03em;
  --dp-heading-sub-fs: clamp(18px,2.02vw,20px);
  --dp-heading-sub-lh: 1.6;
  --dp-cta-banner-title-fs: clamp(27px,3.36vw,40px);
  --dp-cta-banner-title-fw: var(--dp-fw-black);
  --dp-cta-banner-title-lh: 1.15;
  --dp-cta-banner-sub-fs: 15px;
  --dp-cta-banner-sub-lh: 1.5;
  --dp-cta-banner-btn-fs: 16px;
  --dp-cta-banner-btn-fw: var(--dp-fw-extrabold);
  --dp-feature-icon-lh: 1;
  --dp-step-title-fs: 19px;
  --dp-step-title-fw: var(--dp-fw-extrabold);
  --dp-step-text-fs: 15px;
  --dp-step-text-lh: 1.55;
  --dp-step-list-fs: 14px;
  --dp-step-list-lh: 1.55;
  --dp-step-list-tick-fw: var(--dp-fw-extrabold);
  --dp-step-num-fs: 22px;
  --dp-step-num-fw: var(--dp-fw-black);
  --dp-faq-q-fs: var(--dp-text-base);
  --dp-faq-q-fw: var(--dp-fw-bold);
  --dp-faq-icon-fs: 22px;
  --dp-faq-icon-fw: var(--dp-fw-light);
  --dp-faq-a-fs: 15px;
  --dp-faq-a-lh: 1.65;
  --dp-form-title-fs: var(--dp-text-lg);
  --dp-form-title-fw: var(--dp-fw-extrabold);
  --dp-form-sub-fs: 15px;
  --dp-form-note-fs: 12px;
  --dp-form-response-fs: 15px;
  --dp-form-invalid-fs: 13px;
  --dp-form-invalid-fw: var(--dp-fw-semibold);
  --dp-hero-note-fs: 15px;
  --dp-hero-note-ls: -0.01em;
  --dp-hero-title-ls-sm: -0.03em;
  --dp-overlay-msg-fw: var(--dp-fw-medium);
  --dp-overlay-btn-lh: 1;
  --dp-mnav-call-fs: 16px;
  --dp-mnav-call-fw: var(--dp-fw-extrabold);
  --dp-footer-bottom-link-fs: 15px;
  --dp-field-error-fs: 13px;
  --dp-field-error-fw: var(--dp-fw-semibold);
  --dp-statsband-num-lh: 1;
  --dp-stat-num-lh: 1;
  --dp-stat-suf-lh: 1;
  --dp-ship-counter-lh: 1;
  --dp-contact-trust-pill-tick-fw: var(--dp-fw-black);
  --dp-home-hero-title-lh: 1.02;
  --dp-home-hero-title-lh-md: 1.02;
  --dp-home-hero-sub-fs: 20px;
  --dp-home-hero-sub-lh: 1.74;
  --dp-home-hero-sub-fs-sm: 17px;
  --dp-home-hero-pills-fs: 15px;
  --dp-home-hero-pills-fw: var(--dp-fw-semibold);
  --dp-home-hero-pills-fs-sm: 13px;
  --dp-sl-share-confirm-inline-fs: 12px;
  --dp-sl-notice-icon-fs: 24px;
  --dp-sl-pending-notice-icon-fs: 22px;
  --dp-sl-share-sm-fs: 12px;
  --dp-sl-share-sm-fw: var(--dp-fw-bold);
  --dp-sl-yr-fs: 14px;
  --dp-sl-stitle-fs: 29px;
  --dp-sl-stitle-fw: var(--dp-fw-black);
  --dp-sl-stitle-lh: 1.15;
  --dp-sl-sprice-fs: 38px;
  --dp-sl-sprice-fw: var(--dp-fw-black);
  --dp-sl-sprice-ls: -0.03em;
  --dp-sl-gal-btn-fs: 24px;
  --dp-sl-cnt-fs: 13px;
  --dp-sl-cnt-fw: 600;
  --dp-sl-no-img-fs: 18px;
  --dp-sl-trust-icon-fs: 20px;
  --dp-sl-trust-title-fs: 15px;
  --dp-sl-trust-title-fw: var(--dp-fw-bold);
  --dp-sl-trust-text-fs: 12px;
  --dp-sl-tab-fs: 14px;
  --dp-sl-tab-fw: var(--dp-fw-extrabold);
  --dp-sl-desc-lh: 1.74;
  --dp-sl-specs-toggle-fs: 13.5px;
  --dp-sl-specs-toggle-fw: var(--dp-fw-extrabold);
  --dp-sl-specs-toggle-ls: -0.01em;
  --dp-sl-slbl-fs: 14px;
  --dp-sl-sval-fs: 15px;
  --dp-sl-sval-fw: var(--dp-fw-bold);
  --dp-sl-reserve-main-fs: 15px;
  --dp-sl-reserve-main-fw: var(--dp-fw-black);
  --dp-sl-reserve-main-lh: 1.2;
  --dp-sl-reserve-main-ls: -0.01em;
  --dp-sl-noobl-fs: 11.5px;
  --dp-sl-reserve-sub-fs: 11.5px;
  --dp-sl-inq-title-fs: 22px;
  --dp-sl-inq-title-fw: var(--dp-fw-black);
  --dp-sl-inq-title-lh: 1.2;
  --dp-sl-inq-sub-fs: 15px;
  --dp-sl-inq-noform-fs: 15px;
  --dp-sl-lb-close-fs: 20px;
  --dp-sl-lb-nav-fs: 28px;
  --dp-sl-lb-counter-fs: 16px;
  --dp-sl-lb-counter-fw: var(--dp-fw-semibold);
  --dp-sl-lb-nav-fs-sm: 22px;
  --dp-sl-sold-fs: 28px;
  --dp-sl-sold-fw: var(--dp-fw-black);
  --dp-sl-sold-ls: 0.28em;
  --dp-sl-sold-transform: uppercase;
  --dp-sl-sold-notice-title-fs: 17px;
  --dp-sl-sold-notice-text-fs: 14px;
  --dp-sl-reserved-fs: 26px;
  --dp-sl-reserved-fw: var(--dp-fw-black);
  --dp-sl-reserved-ls: 0.28em;
  --dp-sl-reserved-transform: uppercase;
  --dp-sl-pending-fs: 26px;
  --dp-sl-pending-fw: var(--dp-fw-black);
  --dp-sl-pending-ls: 0.28em;
  --dp-sl-pending-transform: uppercase;
  --dp-sl-notice-title-fs: 16px;
  --dp-sl-notice-title-fw: var(--dp-fw-extrabold);
  --dp-sl-notice-title-ls: -0.01em;
  --dp-sl-notice-text-fs: 13px;
  --dp-sl-notice-text-lh: 1.41;
  --dp-sl-related-title-fs: clamp(27px,3.36vw,40px);
  --dp-sl-related-title-fw: var(--dp-fw-extrabold);
  --dp-sl-rel-title-fs: 17px;
  --dp-sl-rel-title-fw: var(--dp-fw-bold);
  --dp-sl-rel-title-lh: 1.22;
  --dp-sl-rel-price-fs: 20px;
  --dp-sl-rel-price-fw: var(--dp-fw-black);
  --dp-sl-share-fs: 13px;
  --dp-sl-share-fw: var(--dp-fw-bold);
  --dp-sl-share-ls: -0.01em;
  --dp-sl-share-confirm-fs: 13px;
  --dp-sl-share-confirm-fw: var(--dp-fw-bold);
  --dp-inv-feat-num-fs: 15px;
  --dp-inv-feat-num-fw: var(--dp-fw-black);
  --dp-inv-feat-title-fs: 19px;
  --dp-inv-feat-title-fw: var(--dp-fw-extrabold);
  --dp-inv-feat-text-fs: 15px;
  --dp-inv-feat-text-lh: 1.69;
  --dp-inv-search-fs: 16px;
  --dp-inv-select-fs: 15px;
  --dp-inv-select-fw: var(--dp-fw-semibold);
  --dp-inv-count-fs: 15px;
  --dp-inv-count-fw: var(--dp-fw-medium);
  --dp-inv-photocount-fs: 12px;
  --dp-inv-photocount-fw: var(--dp-fw-bold);
  --dp-inv-photocount-ls: 0.16em;
  --dp-inv-card-year-fs: 12px;
  --dp-inv-card-title-fs: 25px;
  --dp-inv-card-title-ls: -0.03em;
  --dp-inv-card-specs-fs: 13px;
  --dp-inv-card-specs-fw: var(--dp-fw-medium);
  --dp-inv-card-price-fs: 29px;
  --dp-inv-card-price-ls: -0.03em;
  --dp-inv-card-title-fs-sm: 22px;
  --dp-inv-card-price-fs-sm: 25px;
  --dp-inv-empty-icon-fs: 48px;
  /* 3.3.0 icon round: the empty-inventory icon block's height, MEASURED with
     #dpEmpty forced visible (this install has 22 listings, so the state never
     paints on its own) at 1440x900 and at 390x844 in this skin: 64px in both.
     The block had no height of its own — it was the emoji's line box. style.css carries a measured
     base value (63px) for a site that loads no skin file at all; this line
     overrides it for this skin. */
  --dp-inv-empty-icon-h: 64px;
  --dp-inv-empty-icon-sw: 0.75;   /* 36 / 48px -> a 1.50px keyline at this size */
  --dp-inv-empty-title-fs: 27px;
  --dp-inv-empty-title-fw: var(--dp-fw-extrabold);
  --dp-inv-showing-fs: 14px;
  --dp-inv-showing-fw: var(--dp-fw-medium);
  --dp-inv-page-btn-fs: 14px;
  --dp-inv-page-btn-fw: var(--dp-fw-bold);
  --dp-page-title-fs: var(--dp-title-fs-section);
  --dp-page-title-fw: var(--dp-fw-black);
  --dp-page-title-ls: -0.04em;
  --dp-page-title-lh: 1.05;
  --dp-page-title-fs-sm: 31px;
  --dp-page-subtitle-fs: 19px;
  --dp-page-subtitle-lh: 1.69;
  --dp-page-body-fs: var(--dp-text-base);
  --dp-page-body-lh: 1.74;
  --dp-page-card-icon-fs: 36px;
  --dp-page-card-icon-sw: 1;   /* 36 / 36px -> a 1.5px keyline at this size */
  --dp-page-card-title-fs: 19px;
  --dp-page-card-title-fw: var(--dp-feature-title-fw);
  --dp-page-card-text-fs: var(--dp-feature-text-fs);
  --dp-page-card-text-lh: 1.65;
  --dp-page-panel-title-fs: 22px;
  --dp-page-panel-title-fw: var(--dp-fw-extrabold);
  --dp-page-intro-fs: 15px;
  --dp-page-ci-icon-fs: var(--dp-contact-icon-fs);
  --dp-page-ci-icon-sw: var(--dp-contact-icon-sw);   /* follows the contact icon, as its fs does */
  --dp-page-ci-label-fs: var(--dp-text-xs);
  --dp-page-ci-label-fw: var(--dp-fw-bold);
  --dp-page-ci-label-ls: -0.01em;
  --dp-page-ci-label-transform: var(--dp-contact-label-transform);
  --dp-page-ci-value-fs: 16px;
  --dp-page-ci-value-fw: var(--dp-contact-value-fw);
  --dp-page-trust-item-fs: var(--dp-text-sm);
  --dp-page-trust-item-fw: var(--dp-fw-semibold);
  --dp-page-faq-a-fs: 15px;
  --dp-page-faq-a-lh: 1.65;
  --dp-abt-quote-fs: 22px;
  --dp-abt-quote-fw: var(--dp-fw-extrabold);
  --dp-abt-check-icon-fs: 18px;
  --dp-abt-check-icon-sw: 2;   /* 36 / 18px -> a 1.5px keyline at this size */
  --dp-abt-check-icon-fw: var(--dp-fw-black);
  --dp-abt-check-title-fs: var(--dp-text-base);
  --dp-abt-check-title-fw: var(--dp-fw-extrabold);
  --dp-abt-check-desc-fs: 15px;
  --dp-abt-check-desc-lh: 1.5;
  --dp-abt-check-meta-fs: var(--dp-text-sm);
  --dp-abt-check-meta-lh: 1.5;
  --dp-abt-tl-badge-fs: 12px;
  --dp-abt-tl-badge-fw: var(--dp-fw-extrabold);
  --dp-abt-tl-title-fs: var(--dp-text-lg);
  --dp-abt-tl-title-fw: var(--dp-fw-extrabold);
  --dp-abt-tl-text-fs: 15px;
  --dp-abt-tl-text-lh: 1.65;
  --dp-abt-val-icon-fs: 28px;
  --dp-abt-val-icon-sw: 1.2857;   /* 36 / 28px -> a 1.5px keyline at this size */
  --dp-abt-val-icon-lh: 1;
  --dp-abt-val-title-fs: 22px;
  --dp-abt-val-title-fw: var(--dp-fw-extrabold);
  --dp-abt-val-text-fs: var(--dp-text-base);
  --dp-abt-val-text-lh: 1.65;
  --dp-abt-hero-pill-fs-sm: 13px;
  --dp-shp-trailer-list-fs: var(--dp-text-sm);
  --dp-shp-trailer-price-fs: var(--dp-text-sm);
  --dp-shp-trailer-price-fw: var(--dp-fw-semibold);
  --dp-shp-trailer-price-transform: uppercase;
  --dp-shp-trailer-price-ls: 0.2em;
  --dp-shp-trailer-price-strong-fs: var(--dp-text-base);
  --dp-shp-tbl-head-fs: var(--dp-text-xs);
  --dp-shp-tbl-head-fw: var(--dp-fw-extrabold);
  --dp-shp-tbl-head-ls: 0.2em;
  --dp-shp-tbl-head-transform: uppercase;
  --dp-shp-tbl-td-fs: 15px;
  --dp-shp-tbl-val-fw: var(--dp-fw-bold);
  --dp-shp-tbl-tag-fs: 10px;
  --dp-shp-tbl-tag-fw: var(--dp-fw-extrabold);
  --dp-shp-tbl-note-fs: 12px;
  --dp-shp-step-num-fs: 22px;
  --dp-shp-step-num-fw: var(--dp-fw-black);
  --dp-shp-step-title-fs: var(--dp-text-lg);
  --dp-shp-step-title-fw: var(--dp-fw-extrabold);
  --dp-shp-step-text-fs: 15px;
  --dp-shp-step-text-lh: 1.65;
  --dp-shp-trust-badge-fs: var(--dp-text-sm);
  --dp-shp-trust-badge-fw: var(--dp-fw-bold);
  --dp-ty-title-fs: clamp(31px,4.48vw,47px);
  --dp-ty-title-fw: var(--dp-fw-black);
  --dp-ty-title-ls: -0.03em;
  --dp-ty-sub-fs: var(--dp-text-md);
  --dp-ty-sub-lh: 1.69;
  --dp-ty-countdown-label-fs: 12px;
  --dp-ty-countdown-label-fw: var(--dp-fw-bold);
  --dp-ty-countdown-label-ls: 0.2em;
  --dp-ty-countdown-label-transform: uppercase;
  --dp-ty-countdown-val-fs: 40px;
  --dp-ty-countdown-val-fw: var(--dp-fw-black);
  --dp-ty-countdown-val-lh: 1;
  --dp-ty-countdown-unit-fs: var(--dp-text-xs);
  --dp-ty-countdown-unit-fw: var(--dp-fw-semibold);
  --dp-ty-countdown-unit-transform: uppercase;
  --dp-ty-countdown-unit-ls: 0.2em;
  --dp-ty-countdown-sep-fs: 28px;
  --dp-ty-countdown-sep-fw: 400;
  --dp-ty-next-title-fs: var(--dp-text-lg);
  --dp-ty-next-title-fw: var(--dp-fw-extrabold);
  --dp-ty-feature-title-fs: 19px;
  --dp-ty-feature-title-fw: var(--dp-feature-title-fw);
  --dp-ty-feature-text-fs: var(--dp-feature-text-fs);
  --dp-ty-feature-text-lh: var(--dp-feature-text-lh);
  --dp-ty-contact-note-fs: var(--dp-text-sm);
  --dp-ty-contact-item-fs: 15px;
  --dp-ty-contact-item-fw: var(--dp-fw-semibold);
  --dp-ty-trust-fs: 12px;
  --dp-ty-trust-fw: var(--dp-fw-bold);
  --dp-ty-trust-ls: -0.01em;
  --dp-ty-sec-head-title-fs: 27px;
  --dp-ty-sec-head-title-fw: var(--dp-fw-black);
  --dp-ty-sec-head-sub-fs: 16px;
  --dp-ty-review-text-fs: var(--dp-text-sm);
  --dp-ty-review-text-lh: 1.65;
  --dp-ty-review-av-fs: 13px;
  --dp-ty-review-av-fw: var(--dp-review-av-fw);
  --dp-ty-review-name-fs: var(--dp-text-sm);
  --dp-ty-review-role-fs: var(--dp-text-xs);
  --dp-ty-inv-badge-fs: var(--dp-fcard-badge-fs);
  --dp-ty-inv-badge-fw: var(--dp-fcard-badge-fw);
  --dp-ty-inv-type-fs: 10px;
  --dp-ty-inv-type-fw: var(--dp-fw-bold);
  --dp-ty-inv-type-ls: 0.2em;
  --dp-ty-inv-type-transform: uppercase;
  --dp-ty-inv-title-fs: var(--dp-text-md);
  --dp-ty-inv-title-fw: var(--dp-fw-extrabold);
  --dp-ty-inv-price-fs: var(--dp-fcard-price-fs);
  --dp-ty-inv-price-fw: var(--dp-fcard-price-fw);
  --dp-ty-inv-price-lh: 1;
  --dp-ty-inv-price-call-fs: var(--dp-text-md);
  --dp-ty-inv-price-call-fw: var(--dp-fw-bold);
  --dp-ty-inv-price-call-ls: -0.01em;
  --dp-ty-inv-btn-fs: var(--dp-text-sm);
  --dp-ty-inv-btn-fw: var(--dp-fw-extrabold);
  --dp-ty-inv-btn-ls: -0.01em;
  --dp-404-icon-fs: clamp(36px,6vw,64px);
  --dp-404-title-fs: clamp(40px,5.6vw,63px);
  --dp-404-title-fw: var(--dp-fw-black);
  --dp-404-title-ls: -0.03em;
  --dp-404-sub-fs: 17px;
  --dp-404-sub-lh: 1.69;
  --dp-404-or-fs: var(--dp-text-sm);
  --dp-404-phone-fs: 27px;
  --dp-404-phone-fw: var(--dp-fw-black);
  --dp-404-links-title-fs: 16px;
  --dp-404-links-title-fw: var(--dp-fw-extrabold);
  --dp-404-links-title-ls: 0.2em;
  --dp-404-links-title-transform: uppercase;
  --dp-404-link-fs: 15px;
  --dp-404-link-fw: var(--dp-fw-semibold);
  --dp-legal-title-fs: clamp(36px,4.48vw,54px);
  --dp-legal-title-fw: var(--dp-fw-black);
  --dp-legal-title-ls: -0.03em;
  --dp-legal-updated-fs: var(--dp-text-sm);
  --dp-legal-h2-fs: 22px;
  --dp-legal-h2-fw: var(--dp-fw-extrabold);
  --dp-legal-text-fs: var(--dp-text-base);
  --dp-legal-text-lh: 1.74;
  --dp-btt-label-fs: 9px;
  --dp-btt-label-fw: var(--dp-fw-extrabold);
  --dp-btt-label-ls: 0.2em;
  --dp-btt-label-lh: 1;
  --dp-bc-fs: var(--dp-text-sm);
  --dp-rv-kicker-ls: 0.2em;
  --dp-rv-heading-fs: 34px;
  --dp-rv-heading-fw: var(--dp-fw-black);
  --dp-rv-subtitle-fs: var(--dp-text-base);
  --dp-rv-step-num-fs: 15px;
  --dp-rv-step-num-fw: var(--dp-fw-extrabold);
  --dp-rv-step-lbl-fs: var(--dp-text-sm);
  --dp-rv-step-lbl-fw: var(--dp-fw-semibold);
  --dp-rv-title-fs: 40px;
  --dp-rv-title-fw: var(--dp-fw-black);
  --dp-rv-title-ls: -0.03em;
  --dp-rv-sub-fs: 17px;
  --dp-rv-card-title-fs: 24px;
  --dp-rv-card-title-fw: var(--dp-fw-extrabold);
  --dp-rv-card-title-lh: 1.22;
  --dp-rv-card-final-fs: 31px;
  --dp-rv-card-final-fw: var(--dp-fw-black);
  --dp-rv-card-note-fs: var(--dp-text-sm);
  --dp-rv-fallback-fs: var(--dp-text-base);
  --dp-rv-trust-pill-fs: var(--dp-text-sm);
  --dp-rv-trust-pill-fw: var(--dp-fw-bold);
  --dp-rv-trust-pill-ls: -0.01em;
  --dp-rv-trust-pill-icon-fs: 15px;
  --dp-rv-trust-pill-icon-lh: 1;
  --dp-rv-form-title-fs: 31px;
  --dp-rv-form-title-fw: var(--dp-fw-black);
  --dp-rv-form-title-ls: -0.03em;
  --dp-rv-form-sub-fs: var(--dp-text-base);
  --dp-rv-form-sub-lh: 1.5;
  --dp-rv-req-fw: var(--dp-fw-black);
  --dp-rv-form-h3-fs: 20px;
  --dp-rv-form-h3-fw: var(--dp-fw-black);
  --dp-rv-form-h3-ls: -0.03em;
  --dp-rv-file-btn-fw: var(--dp-fw-bold);
  --dp-rv-file-btn-fs: 14px;
  --dp-rv-review-text-fs: 15px;
  --dp-rv-review-av-fs: 15px;
  --dp-rv-faq-q-fs: var(--dp-text-base);
  --dp-rv-faq-q-fw: var(--dp-fw-bold);
  --dp-rv-faq-icon-fs: 22px;
  --dp-rv-faq-icon-fw: 400;
  --dp-rv-faq-a-fs: 15px;
  --dp-rv-faq-a-lh: 1.65;
  --dp-rv-cf7-notice-fs: 15px;
  --dp-rv-title-fs-sm: 31px;
  --dp-rv-heading-fs-sm: 27px;
  --dp-rv-card-title-fs-sm: 22px;
  --dp-rv-card-final-fs-sm: 29px;
  --dp-rv-step-num-fs-sm: 12px;
  --dp-rv-step-lbl-fs-sm: 11.5px;
  --dp-rv-step-lbl-fw-sm: var(--dp-fw-bold);
  --dp-rv-step-lbl-lh-sm: 1.2;
  --dp-rv-trust-pill-fs-xs: 11.5px;
  --dp-rv-trust-pill-icon-fs-xs: 13px;
  --dp-home-featured-empty-color: #8b95a9;
  --dp-home-featured-empty-fs: 15px;
  --dp-home-featured-empty-sub-fs: 15px;
  --dp-ty-next-empty-color: #8e99ad;
  /* 2.98:1 at 0.34 over the gallery plate rgb(5,6,8) — a hair under the 3:1
     floor a meaningful non-text graphic needs. 0.38 is the hairline value the
     rest of this skin already uses and clears it. */
  --dp-sl-noimg-icon-color: #7d8798;
  --dp-con-cf7-notice-fs: 15px;
  --dp-con-cf7-notice-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-con-cf7-notice-color: #8b95a9;
  --dp-shp-cf7-notice-fs: 15px;
  --dp-shp-cf7-notice-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-shp-cf7-notice-color: #8b95a9;
  --dp-rv-cf7-notice-border: 1px solid rgba(197, 214, 245, 0.152);
  --dp-rv-cf7-notice-color: #8b95a9;

  /* The four inline style="" paints style.css now routes through tokens. An
     inline attribute outranks every rule in this file, so before they were
     tokenised these four printed the wizard's own colour (or a hard white)
     whatever the skin did — white on the black plate and on the card: 21:1 and 19.7:1. */
  --dp-cf7-notice-link-color: var(--dp-accent, #e0b795);
  --dp-home-featured-empty-link-color: var(--dp-accent, #e0b795);
  --dp-legal-inline-link-color: var(--dp-accent, #e0b795);
  /* 3.39:1 at 0.38, 3.94:1 at 0.42 — both short of the 4.5:1 the 10-11px
     normal-weight middots need on the #0A0B0D card. 0.50 measures 5.9:1 and
     still reads a step lighter than the 0.38 hairlines above and below the
     spec row, so the separators stay separators. */
  --dp-fcard-specs-sep-color: #7d8798;
  --dp-cf7-ok-bg: #172231;
  --dp-cf7-ok-border: 1px solid color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-testimonial-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-faq-item-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-step-card-border-hover: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  --dp-qv-thumb-border: 2px solid transparent;
  --dp-cta-banner-ghost-bg: transparent;
  --dp-cta-banner-ghost-ink: var(--dp-accent-fg, #14110b);                 /* matches --dp-cta-banner-ghost-color below */
  --dp-cta-banner-ghost-border-color-hover: var(--dp-accent-fg, #14110b);
  --dp-cta-banner-ghost-border: 2px solid color-mix(in srgb, var(--dp-accent-fg, #14110b) 70%, transparent);
  --dp-footer-border-top: 1px solid transparent;

  /* Native control tint (checkbox / radio / select / range / progress). */
  accent-color: var(--dp-skin-accent);
  color-scheme: dark;

  /* ══ 2.9.5 — LABELS ON FILLS THE WIZARD OWNS ══════════════════════════
     style.css now routes 23 declarations that used to read --dp-accent-fg /
     --dp-accent-text / --dp-cta-fg / --dp-reserve-fg through component tokens.
     Those four are inside the wizard's seventeen !important properties, so the
     skin could never re-point them; the component tokens it CAN own. Every
     value below is the ink this skin's own fill wants, and section 10 repaints
     the handful of fills that style.css still hard-codes to a wizard token so
     the pair is this skin's on both sides. Measured ratios are in section 10. */
  --dp-qv-badge-fg: var(--dp-accent-fg, #14110b);
  --dp-inv-card-arrow-fg-hover: var(--dp-accent-fg, #14110b);
  --dp-inv-page-btn-color-active: var(--dp-accent-fg, #14110b);
  --dp-rv-step-num-color-active: var(--dp-accent-fg, #14110b);
  --dp-rv-file-btn-color: var(--dp-accent-fg, #14110b);
  --dp-shp-tbl-tag-color: var(--dp-accent-fg, #14110b);
  --dp-ty-review-av-fg: #f4f6fb;
  --dp-ty-inv-badge-color: var(--dp-accent-fg, #14110b);
  --dp-rv-review-av-fg: #f4f6fb;
  --dp-rv-step-num-color-current: var(--dp-accent-fg, #14110b);
  --dp-rv-submit-fg: var(--dp-cta-fg, #14110b);
  --dp-cta-banner-content-color: var(--dp-accent-fg, #14110b);
  --dp-cta-banner-title-color: var(--dp-accent-fg, #14110b);
  --dp-cta-banner-sub-color: var(--dp-accent-fg, #14110b);
  --dp-cta-banner-ghost-color: var(--dp-accent-fg, #14110b);
  --dp-sl-reserve-color: var(--dp-reserve-fg, #000000);
  --dp-sl-reserve-color-hover: var(--dp-reserve-fg, #000000);
  --dp-shp-trust-badge-color: #c8d0e0;
  --dp-cf7-ok-color: #f4f6fb;

  /* ══════════════════════════════════════════════════════════════════
     SKIN LITERALS, PROMOTED TO TOKENS.
     These values were written directly into this file's element-level
     rules. They are the same values, in the one place this file keeps
     values, so a colour or a type step is changed here and nowhere else.
     --dp-skin-accent / --dp-skin-accent-ink WERE pinned to this direction's
     bronze. That was wrong: the seventeen wizard properties are restamped
     !important on `:root, :root body`, so everything else on the page took
     the owner's colour while these thirteen uses stayed bronze — two action
     colours on one page. They now READ the wizard property and keep the
     bronze only as the fallback for when the wizard block is absent. A
     custom property's fallback is used only when the property is genuinely
     unset, and `!important` on a different rule does not change what
     var() resolves to here, so the owner's colour always wins. Verified by
     reading the computed value in a live page, not by reasoning.
     ══════════════════════════════════════════════════════════════════ */
  --dp-skin-accent: var(--dp-accent, #e0b795);
  --dp-skin-accent-ink: var(--dp-accent-fg, #14110b);
  /* THE INK THE OWNER'S COLOUR MUST NOT BECOME.
     The wizard validates the owner's accent as a FILL: dp_contrast_text()
     picks black or white to sit ON it. Nothing validates it as INK on this
     skin's dark ground, and a mid-tone or dark accent used that way is
     illegible -- #1B3A5C as text on the card measures 1.4:1. Every figure,
     column head, caption and ghost-control LABEL that the base paints with
     `color: var(--dp-accent)` therefore takes this instead. It is the same
     #f4f6fb as --dp-text and the prices, so it joins a rung that already
     exists rather than inventing a colour. */
  --dp-skin-figure-ink: #f4f6fb;
  --dp-skin-hairline: 1px solid rgba(197, 214, 245, 0.17);
  --dp-btn-primary-bg-hover: color-mix(in srgb, #ffffff 35%, var(--dp-accent, #e0b795));
  --dp-card-title-ls: -0.03em;
  --dp-fcard-specs-lh: 2.6;
  --dp-fcard-specs-ls-sm: 0.13em;
  --dp-sl-btn-cta-fs-sm: 14px;
  --dp-sl-btn-cta-ls-xs: 0;
  --dp-ty-contact-item-lh: 26px;
  --dp-ty-contact-item-lh-sm: 44px;
  --dp-year-badge-bg: rgba(200, 208, 224, 0.12);
}

/* ══════════════════════════════════════════════════════════════════════════
   ELEMENT-LEVEL RULES — paint-only, each covering something the token set
   genuinely cannot reach.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. MONO DATA, TO THE FRONT.
      --dp-font-numeric only reaches four elements in the base. Every other
      figure on the page — spec strings, model years, phone numbers, prices,
      the amortisation tables, the countdown, the copyright year — is painted
      with the body font and has no family token. Micro-labels ride along so a
      label and its value read as one instrument line, and tabular figures are
      forced everywhere so columns of numbers actually align. */
body.dp-skin--modern .dp-kicker,
body.dp-skin--modern .dp-rv-kicker,
body.dp-skin--modern .dp-hero__pills span,
body.dp-skin--modern .dp-hero__note,
body.dp-skin--modern .dp-stat__label,
body.dp-skin--modern .dp-home-stat__label,
body.dp-skin--modern .dp-home-stat__suf,
body.dp-skin--modern .dp-home-fcard__badge,
body.dp-skin--modern .dp-home-fcard__year,
body.dp-skin--modern .dp-home-fcard__specs,
body.dp-skin--modern .dp-home-fcard__price,
body.dp-skin--modern .dp-qv-trigger,
body.dp-skin--modern .dp-qv-badge,
body.dp-skin--modern .dp-qv-counter,
body.dp-skin--modern .dp-qv-price,
body.dp-skin--modern .dp-qv-specs,
body.dp-skin--modern .dp-header__call,
body.dp-skin--modern .dp-mobile-nav__call,
body.dp-skin--modern .dp-btn--call,
body.dp-skin--modern .dp-cf7-overlay__btn,
body.dp-skin--modern .dp-home-shipping__counter-lbl,
body.dp-skin--modern .dp-home-shipping__counter-num,
body.dp-skin--modern .dp-home-shipping__note,
body.dp-skin--modern .dp-home-contact__label,
body.dp-skin--modern .dp-home-contact__item a,
body.dp-skin--modern .dp-home-contact__item span,
body.dp-skin--modern .dp-form-wrap label,
body.dp-skin--modern .wpcf7-form label,
body.dp-skin--modern .dp-form-wrap input[type="tel"],
body.dp-skin--modern .dp-footer__col-title,
body.dp-skin--modern .dp-footer__contact-text a,
body.dp-skin--modern .dp-footer__contact-text span,
body.dp-skin--modern .dp-footer__copy,
body.dp-skin--modern .dp-footer__bottom-links a,
body.dp-skin--modern .dp-review__av,
body.dp-skin--modern .dp-review__role,
body.dp-skin--modern .dp-testimonial__role,
body.dp-skin--modern .dp-note,
/* — the templates the mock-up never saw — */
body.dp-skin--modern .dp-inv-card__badge,
body.dp-skin--modern .dp-inv-card__year,
body.dp-skin--modern .dp-inv-card__specs,
body.dp-skin--modern .dp-inv-card__price,
body.dp-skin--modern .dp-inv-card__photocount,
body.dp-skin--modern .dp-inv-count,
body.dp-skin--modern .dp-inv-feat__num,
body.dp-skin--modern .dp-inv-page-btn,
body.dp-skin--modern .dp-inv-trust__pill,
body.dp-skin--modern .dp-sl-yr,
body.dp-skin--modern .dp-sl-sprice,
body.dp-skin--modern .dp-sl-rel-card__price,
body.dp-skin--modern .dp-sl-lb__counter,
body.dp-skin--modern .dp-sl-share__btn,
body.dp-skin--modern .dp-sl-specs-toggle,
body.dp-skin--modern .dp-sl-tab,
body.dp-skin--modern .dp-sl-trust-item span,
body.dp-skin--modern .dp-shp-tbl th,
body.dp-skin--modern .dp-shp-tbl__val,
body.dp-skin--modern .dp-shp-tbl__tag,
body.dp-skin--modern .dp-shp-trailer__price,
body.dp-skin--modern .dp-shp-trust-badge,
body.dp-skin--modern .dp-abt-stat__num,
body.dp-skin--modern .dp-abt-stat__label,
body.dp-skin--modern .dp-abt-tl__year,
body.dp-skin--modern .dp-dash-stat__num,
body.dp-skin--modern .dp-dash-stat__lbl,
body.dp-skin--modern .dp-ty-countdown__val,
body.dp-skin--modern .dp-ty-countdown__unit,
body.dp-skin--modern .dp-ty-countdown__label,
body.dp-skin--modern .dp-ty-inv-card__badge,
body.dp-skin--modern .dp-ty-inv-card__price,
body.dp-skin--modern .dp-ty-trust,
body.dp-skin--modern .dp-rv-card-prices,
body.dp-skin--modern .dp-rv-card-note,
body.dp-skin--modern .dp-rv-step-num,
body.dp-skin--modern .dp-rv-step-lbl,
body.dp-skin--modern .dp-rv-trust-pill,
body.dp-skin--modern .dp-legal-updated,
body.dp-skin--modern .dp-404-links,
body.dp-skin--modern .dp-form-note {
  font-family: var(--dp-font-numeric);
  font-variant-numeric: var(--dp-font-variant-numeric);
}

/* 2. The micro-label register: small uppercase mono, widely tracked. These
      lines have no text-transform token anywhere in the base, and most have no
      letter-spacing token either. The split is strict and it is the page's
      whole grammar: anything that NAMES or MEASURES a thing — a spec chip, a
      caption, a field label, a column head, an attribution, a status badge —
      is uppercase mono. Anything that is a sentence (the shipping and trust
      pills) stays sentence case in the body face, however short. */
body.dp-skin--modern .dp-hero__pills span,
body.dp-skin--modern .dp-home-stat__label,
body.dp-skin--modern .dp-home-fcard__specs,
body.dp-skin--modern .dp-home-shipping__counter-lbl,
body.dp-skin--modern .dp-form-wrap label,
body.dp-skin--modern .wpcf7-form label,
body.dp-skin--modern .dp-footer__col-title,
body.dp-skin--modern .dp-review__role,
body.dp-skin--modern .dp-testimonial__role,
body.dp-skin--modern .dp-inv-card__specs,
body.dp-skin--modern .dp-inv-card__photocount,
body.dp-skin--modern .dp-inv-feat__num,
body.dp-skin--modern .dp-abt-stat__label,
body.dp-skin--modern .dp-dash-stat__lbl,
body.dp-skin--modern .dp-sl-trust-item strong,
body.dp-skin--modern .dp-rv-step-lbl,
body.dp-skin--modern .dp-404-links-title,
body.dp-skin--modern .dp-legal-updated {
  text-transform: uppercase;
  letter-spacing: var(--dp-hero-pill-ls);
}

/* 3. THE SPEC ROW AS A RULED TABLE.
      The spec line is a single text node with inline dot separators, so it
      cannot be columned — but it can be ruled. A hairline above and below,
      plus an open line-height to stand in for the padding a skin may not set,
      turns it into a genuine table row inside every card. The footer rule
      above the price (tokenised) closes the sheet. */
body.dp-skin--modern .dp-home-fcard__specs,
body.dp-skin--modern .dp-inv-card__specs {
  border-top: var(--dp-skin-hairline);
  border-bottom: var(--dp-skin-hairline);
  line-height: var(--dp-fcard-specs-lh);
}

/* 4. Display tracking for the sub-heads. The base tokenises size and weight
      for these but never letter-spacing, and pulling tracking in hard across
      the whole scale — not only on the hero — is the point of the direction. */
body.dp-skin--modern .dp-home-fcard__title,
body.dp-skin--modern .dp-inv-card__title,
body.dp-skin--modern .dp-feature-card h3,
body.dp-skin--modern .dp-feature-card__title,
body.dp-skin--modern .dp-home-shipping__step h3,
body.dp-skin--modern .dp-home-contact__trust h3,
body.dp-skin--modern .dp-home-contact__right h3,
body.dp-skin--modern .dp-qv-title,
body.dp-skin--modern .dp-home-story__quote,
body.dp-skin--modern .dp-abt-story__quote,
body.dp-skin--modern .dp-header__logo-text,
body.dp-skin--modern .dp-footer__logo-text,
body.dp-skin--modern .dp-section-heading__title,
body.dp-skin--modern .dp-section-head__title,
body.dp-skin--modern .dp-abt-title,
body.dp-skin--modern .dp-con-title,
body.dp-skin--modern .dp-shp-title,
body.dp-skin--modern .dp-rv-title,
body.dp-skin--modern .dp-rv-heading,
body.dp-skin--modern .dp-rv-form-title,
body.dp-skin--modern .dp-rv-card-title,
body.dp-skin--modern .dp-ty-title,
body.dp-skin--modern .dp-404-title,
body.dp-skin--modern .dp-legal-title,
body.dp-skin--modern .dp-sl-stitle,
body.dp-skin--modern .dp-sl-inq__title,
body.dp-skin--modern .dp-sl-related__title,
body.dp-skin--modern .dp-abt-check__title,
body.dp-skin--modern .dp-step-card__title,
body.dp-skin--modern .dp-cta-banner__title {
  letter-spacing: var(--dp-card-title-ls);
}

/* 5. Photography: graded cool and hard, kept in full colour. No token exposes
      a filter on the hero plate or on listing imagery.

      An entry that names a WRAPPER rather than the picture grades whatever
      else the wrapper holds. .dp-sl-rel-card__img is exactly that case: the
      related card's <img> AND its badge live inside it, so the grade was
      landing on UI text — the Just-Arrived badge that measures 5.11:1 in the
      archive measured 4.24:1 there, with 100% of the label box under the
      4.5:1 its 10px normal-weight label needs. single-listing.php gives
      that wrapper a real `> img`, so the entry moves onto the image and the
      badge is left alone (measured back to 5.11:1).

      .dp-ty-inv-card__img STAYS on the wrapper, against the audit's advice.
      page-thank-you.php paints that card's photograph as the DIV's own
      `background-image` — there is no <img> to move the grade to, so
      `.dp-ty-inv-card__img img` would have matched nothing and quietly
      dropped the grade from those thumbnails altogether. Its badge is a
      white plate with black ink and measures 16.7:1 even graded, and the
      wrapper is already position:relative (the .dp-ty-inv-card__img rule in
      page-thank-you.php's own <style> block), so the filter is not
      what makes it the badge's containing block and no geometry moves. The
      cost is that one chip paints a value darker than its twin elsewhere,
      which is the smaller of the two defects; the durable fix is a template
      one (put the photo in an <img>) and is written up in the base patch. */
body.dp-skin--modern .dp-hero__bg,
body.dp-skin--modern .dp-home-fcard__img,
body.dp-skin--modern .dp-home-story__media img,
body.dp-skin--modern .dp-qv-main-img,
body.dp-skin--modern .dp-inv-card__img,
body.dp-skin--modern .dp-sl-gallery-main img,
body.dp-skin--modern .dp-sl-lb__img,
body.dp-skin--modern .dp-sl-rel-card__img img,
body.dp-skin--modern .dp-ty-inv-card__img,
body.dp-skin--modern .dp-rv-card-img {
  filter: contrast(1.18) saturate(0.84) brightness(0.9) hue-rotate(-8deg);
}

/* 6. Places one shared token prints the wrong ink.
      • The base gives every .dp-btn one --dp-btn-border, so the outlined
        call/cta variants can only get their rule here.
      • Both sticky-bar halves share one --dp-sticky-fg, so the white "Call"
        half would print white-on-white. */
body.dp-skin--modern .dp-btn--call,
body.dp-skin--modern .dp-btn--cta {
  border: var(--dp-skin-hairline);
}
body.dp-skin--modern .dp-btn--call:hover,
body.dp-skin--modern .dp-btn--cta:hover {
  border-color: var(--dp-skin-accent);
}
body.dp-skin--modern .dp-sticky-btn--call {
  /* .dp-sticky-btn sets `color: var(--dp-sticky-fg) !important`, so this
     override only lands with !important of its own. Without it the label
     stayed #ffffff on the white call half — 1.00:1, invisible. */
  color: var(--dp-skin-accent-ink) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — the ruled spec row
   ──────────────────────────────────────────────────────────────────────────
   The spec row is the one place this skin spends width it did not measure
   for. The base sets it 12px in the body face, flush; this skin makes it a
   ruled table row: IBM Plex Mono, uppercase, 0.2em tracking. Mono fixes every
   glyph at 0.6em and the tracking adds another 0.2em, so each character costs
   8.8px at 11px — the longest string on the featured cards ("11,280 mi · 4WD
   · 10-Speed Auto", 31 characters) measures 272.8px against a column that is
   only 258px wide at 1101px and 232px at 1025px.

   Both levers are used rather than one: 11px → 10px and 0.2em → 0.13em give
   6.0 + 1.3 = 7.3px per character, so the worst string measures 226px inside
   232px. Spending it all on tracking would have meant ~0.03em, which is to
   say no tracking at all; spending it all on size would have meant 9px, below
   the 10px floor the rest of this skin's micro-labels hold.

   The inventory archive card runs the same string in a 3-up grid with the
   same pinch, so it takes the same step.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  body.dp-skin--modern { --dp-fcard-specs-fs: 12px; --dp-inv-card-specs-fs: 13px; }
  body.dp-skin--modern .dp-home-fcard__specs,
  body.dp-skin--modern .dp-inv-card__specs { letter-spacing: var(--dp-fcard-specs-ls-sm); }
}

/* 9 — THE TWO TOKENS THE SKIN IS NOT ALLOWED TO OWN.
      The wizard's colour block stamps --dp-accent-text (always #ffffff) and
      --dp-cta-fg with !important on `:root, :root body`, so a skin can never
      re-point them. Four elements used to need a class-level `color` here
      because they read one of those two straight. style.css now routes every
      one of them through a component token this skin owns
      (--dp-fcard-year-color, --dp-shp-trust-badge-color,
      --dp-cf7-ok-color, --dp-btn-cta-fg), so the rules that stood here are
      gone and the values live in the token block with the rest of the skin.
      The fills they sit on are pinned in section 10. */

/* ══════════════════════════════════════════════════════════════════════════
   10 — FILLS style.css HARD-CODES TO A WIZARD COLOUR

   The wizard block stamps --dp-accent / --dp-cta / --dp-reserve (and their
   -dark, -soft, -fg partners) with !important on `:root, :root body`, so a
   skin can never own those seventeen properties. Several base rules paint a
   FILL straight from one of them while taking the LABEL from a token the
   skin does own — including .dp-btn--primary and the whole CF7 submit
   family, which ignore the --dp-btn-primary-bg / --dp-submit-bg tokens
   :root already declares and inline the accent gradient instead. On a site
   still on the pre-2.9.4 default accent that pair measured 2.54:1.

   Nothing here re-points a wizard property: each rule repaints one
   component background with this skin's own colour, which is a plain
   `background` declaration and is what section 9 has always done for
   `color`. Every pair below is measured against the fill on the same line.
   ══════════════════════════════════════════════════════════════════════════ */

/* 10a — Primary action and the CF7 submit family. style.css inlines
        `linear-gradient(135deg, var(--dp-accent), var(--dp-accent-dark))`
        and then reads --dp-btn-primary-fg / --dp-submit-fg for the label.
        Pointing the fill back at the token the theme already declares makes
        the pair whole. The submit rule carries !important in style.css, so
        the repaint does too. */
body.dp-skin--modern .dp-btn--primary { background: var(--dp-btn-primary-bg); }

/* The base's ONLY hover rule for the primary button is
   `.dp-btn--primary:hover { box-shadow: var(--dp-btn-primary-shadow-hover) }`,
   and this skin sets that token to none because a drop shadow cannot read
   on true black. Measured on a real mouse hover, every painted property of
   the white slab was unchanged — background #ffffff → #ffffff, colour
   rgb(0,0,0) → rgb(0,0,0), border 0px, box-shadow none — so the main call
   to action on every page carried no colour information on hover, alone
   among the buttons (ghost, call and cta all take a white border). The
   slab steps down to --dp-btn-primary-bg-hover instead; #c9ced6 against the
   black label still measures 14.0:1. Paint only. */
body.dp-skin--modern .dp-btn--primary:hover,
body.dp-skin--modern .dp-btn--primary:focus-visible { background: var(--dp-btn-primary-bg-hover); }
body.dp-skin--modern .dp-form-wrap .wpcf7-submit,
body.dp-skin--modern .wpcf7-form input[type="submit"],
body.dp-skin--modern .wpcf7-form input[type="submit"]:hover,
body.dp-skin--modern .wpcf7-form input[type="submit"]:focus,
body.dp-skin--modern .wpcf7-form input[type="submit"]:active,
body.dp-skin--modern .wpcf7-form input[type="submit"]:focus-visible,
body.dp-skin--modern .wpcf7-form button[type="submit"],
body.dp-skin--modern .wpcf7-form button[type="submit"]:hover,
body.dp-skin--modern .wpcf7-form button[type="submit"]:focus,
body.dp-skin--modern .wpcf7-form button[type="submit"]:active,
body.dp-skin--modern .wpcf7-form button[type="submit"]:focus-visible {
  background: var(--dp-submit-bg) !important;
}

/* The same list in header.php ALSO matches a submit that sits inside
   .dp-form-wrap but not inside a form.wpcf7-form — and that copy carries
   `background-color: var(--dp-accent) !important`, a wizard property no skin
   can re-point. The rule above only reaches the .wpcf7-form shape, so without
   the list below such a button keeps the wizard fill while its label still
   comes from --dp-submit-fg, which this skin does own. Leading with
   `body.dp-skin--modern` makes each selector (0,3,2) against header.php's
   (0,2,1), so the repaint wins wherever that mismatch can occur. Paint only:
   the same fill this skin already gives every other submit. */
body.dp-skin--modern .dp-form-wrap input[type="submit"],
body.dp-skin--modern .dp-form-wrap input[type="submit"]:hover,
body.dp-skin--modern .dp-form-wrap input[type="submit"]:focus,
body.dp-skin--modern .dp-form-wrap input[type="submit"]:active,
body.dp-skin--modern .dp-form-wrap input[type="submit"]:focus-visible,
body.dp-skin--modern .dp-form-wrap input[type="submit"]:focus-within,
body.dp-skin--modern .dp-form-wrap button[type="submit"] {
  background: var(--dp-submit-bg) !important;
}

/* 10b — .dp-btn--cta / .dp-btn--call inline the CTA gradient and ignore
        --dp-btn-cta-bg. The rule below puts them back on the token, so the
        skin keeps one CTA plate in one place, and --dp-btn-cta-fg carries
        this skin's label colour. (The .dp-sl-btn-buy rule this clause used
        to name was dead CSS; 3.1.0 removed it.) */
body.dp-skin--modern .dp-btn--cta,
body.dp-skin--modern .dp-btn--call { background: var(--dp-btn-cta-bg); }

/* 10c — The CTA banner paints the wizard CTA gradient with no token at all;
        its title, body, subtitle and ghost button all read --dp-cta-fg. */
body.dp-skin--modern .dp-cta-banner { background: var(--dp-skin-accent); }

/* 10d — .dp-btn--white and .dp-cta-banner__btn hard-code `color: var(--dp-cta)`
        over a fill the skin redefines (--dp-btn-white-bg / --dp-cta-banner-btn-bg).
        There is no token for the label, so it is set at class level. */
body.dp-skin--modern .dp-btn--white,
body.dp-skin--modern .dp-cta-banner__btn { color: var(--dp-skin-accent); }

/* 10e — Chips, badges and pills whose fill is a bare var(--dp-accent) or
        var(--dp-cta). Their labels are the new component tokens above. */
body.dp-skin--modern .dp-qv-badge,
body.dp-skin--modern .dp-inv-card:hover .dp-inv-card__arrow,
body.dp-skin--modern .dp-inv-page-btn--active,
body.dp-skin--modern .dp-rv-step--active .dp-rv-step-num,
body.dp-skin--modern .dp-shp-tbl__tag,
body.dp-skin--modern .dp-ty-inv-card__badge { background: var(--dp-skin-accent); }

/* 10e-ii — THE AVATARS ARE NOT ACTIONS. style.css and
   page-thank-you.php paint an initials disc `background: var(--dp-accent)`,
   so it took the owner's action colour on every site and read as a control.
   It moves to the same cool surface --dp-review-av-bg now carries, and its
   initials to the top ink rung. Colour only. */
body.dp-skin--modern .dp-testimonial__avatar,
body.dp-skin--modern .dp-ty-review__av { background: var(--dp-review-av-bg); }
body.dp-skin--modern .dp-rv-form-wrap .wpcf7-form input[type="file"]::file-selector-button { background: var(--dp-skin-accent); }
body.dp-skin--modern .dp-rv-step--current .dp-rv-step-num { background: var(--dp-skin-accent); }
body.dp-skin--modern .dp-inv-card:hover .dp-inv-card__arrow,
body.dp-skin--modern .dp-inv-page-btn--active { border-color: var(--dp-skin-accent); }

/* The pager's ACTIVE page, hovered. The base prints
   `.dp-inv-page-btn:hover{color:var(--dp-accent)}` at (0,2,0) — which outranks
   the base `.dp-inv-page-btn--active{color:var(--dp-inv-page-btn-color-active)}`
   at (0,1,0) — while this skin pins the active chip's fill above at (0,2,1).
   Hovering the page you are already on therefore printed the wizard accent on
   this skin's fill. Re-state the active label so the fill and the label stay a
   pair in every state. Colour only. */
body.dp-skin--modern .dp-inv-page-btn--active:hover,
body.dp-skin--modern .dp-inv-page-btn--active:focus,
body.dp-skin--modern .dp-inv-page-btn--active:focus-visible {
  color: var(--dp-inv-page-btn-color-active);
}

/* The year chip is the same brass/amber-on-8%-tint pair as the trust
   badges: pinning its fill opaque makes it read the same on a card and
   /* 10e-iii — the rule under a section heading. style.css inlines the
   accent gradient and never reads the --dp-line-bg token :root declares two
   hundred lines above it, so this 4px bar took the owner's ACTION colour on
   every site, six times on the home page alone. It is decoration. Pointing it
   back at its own token puts the value where every other colour lives. */
body.dp-skin--modern .dp-line { background: var(--dp-line-bg); }

on the page instead of tracking whatever is behind it. */
body.dp-skin--modern .dp-sl-yr,
body.dp-skin--modern .dp-inv-card__year { background: var(--dp-year-badge-bg); }

/* 10e-iv — DECORATION THE TEMPLATES PAINT FROM --dp-accent DIRECTLY.

   Every selector below carries a bare `color: var(--dp-accent)` in its own
   template, with no token in between, so on any site it rendered in the
   owner's ACTION colour:
     archive-listing.php   .dp-inv-card__price      (every inventory card)
     single-listing.php    .dp-sl-rel-card__price
     single-listing.php    .dp-sl-sprice            (the listing's price)
     page-thank-you.php    .dp-ty-inv-card__price
     page-reserve.php      .dp-rv-card-final        (the quoted price)
     page-reserve.php      .dp-rv-kicker
     page-reserve.php      .dp-rv-review-stars
     page-reserve.php      .dp-rv-req               (the required marker)
     page-about.php        .dp-abt-story__quote
   A price is the most repeated figure on a dealership site; when it is the
   same colour as the button beside it, neither one is a signal. Each moves
   to the token that already holds this skin's colour for its kind, so all of
   them stay in the token block with everything else. Colour only. */
body.dp-skin--modern .dp-inv-card__price,
body.dp-skin--modern .dp-sl-rel-card__price,
body.dp-skin--modern .dp-sl-sprice,
body.dp-skin--modern .dp-ty-inv-card__price,
body.dp-skin--modern .dp-rv-card-final { color: var(--dp-fcard-price-color); }
body.dp-skin--modern .dp-rv-kicker { color: var(--dp-title-accent-color); }
body.dp-skin--modern .dp-rv-review-stars { color: var(--dp-review-star-color); }
body.dp-skin--modern .dp-rv-req { color: var(--dp-text-faint); }
body.dp-skin--modern .dp-abt-story__quote { color: var(--dp-highlight-color); }
body.dp-skin--modern .dp-abt-story__quote { border-left-color: var(--dp-highlight-color); }

/* 10e-v — THE THANK-YOU PAGE'S FIGURE AND ITS SUCCESS MARK.

   .dp-ty-countdown__val (page-thank-you.php) is `color: var(--dp-accent)`.
   It is 3 large mono figures and, on that page, nothing else competes with
   them -- the same species as the stats-band figures, so it takes the same
   cool rung, and its progress bar follows in the token block above.

   The success tick is worse than a discipline problem. page-thank-you.php
   sets stroke="var(--dp-accent)" as an SVG PRESENTATION ATTRIBUTE on the
   circle and the check path, so the confirmation mark is drawn in the owner's
   action colour on the page's near-black ground. Measured for the navy owner
   (#1B3A5C) against that ground: 1.60:1 -- the tick that tells a customer
   their message was received would be all but invisible. A CSS `stroke`
   declaration outranks a presentation attribute, so it moves to the cool
   icon rung, where it measures 11.9:1 on the same ground. */
body.dp-skin--modern .dp-ty-countdown__val { color: var(--dp-statsband-num-color); }
body.dp-skin--modern .dp-ty-icon svg circle,
body.dp-skin--modern .dp-ty-icon svg path { stroke: var(--dp-feature-icon-color); }

/* 10f — NON-TEXTUAL GLYPHS that paint `color: var(--dp-accent)` on a tint the
        skin owns. The tint stays the owner's colour and so does the glyph, so
        the two can never drift apart. These are shapes, not reading matter:
        an arrow, a chevron, a timeline dot. Their meaning is carried by
        position and outline, so they survive a low-contrast owner colour in a
        way that a line of text does not -- which is why the figures and
        labels that used to sit in this list are in 10g instead. */
body.dp-skin--modern .dp-inv-card__arrow,
body.dp-skin--modern .dp-btt,
body.dp-skin--modern .dp-abt-tl__content::before { color: var(--dp-skin-accent); }

/* 10g — THE ONE RULE THAT MAKES THIS SKIN SAFE FOR ANY SETTING.
        Everything here is painted `color: var(--dp-accent)` by the BASE, in a
        template, with no token behind it -- so on the shipped skin they were
        all whatever the owner picked, read as text, on a near-black page. The
        shipped skin got away with it only because it seeded the accent WHITE.
        The moment the accent becomes a real brand colour they stop being
        readable. Measured on this install with the accent set to #1B3A5C,
        against a 4.5:1 floor: the shipping column heads 1.37:1, the four
        shipping step figures 1.44:1, the trailer price 1.49:1, the listing
        tab and the specs-toggle label 1.60:1, both reserve step labels
        1.63 and 1.68:1, the 404 phone number 1.68:1. All are 12.6-17.6:1
        here, under every accent colour, because they no longer read it.

        None of these is an action. Four are figures, four are captions or
        column heads, two are ghost-control LABELS whose control identity is
        already carried by an accent tint and an accent border, and one is the
        404 page's phone link, which is the one thing on that page a lost
        visitor needs to be able to read.

        This is also the direction's own rule applied consistently: the metal
        is for things you click, and a column head is not a thing you click. */
body.dp-skin--modern .dp-step-card__num,
body.dp-skin--modern .dp-inv-feat__num,
body.dp-skin--modern .dp-sl-tab,
body.dp-skin--modern .dp-shp-tbl th,
body.dp-skin--modern .dp-shp-trailer__price,
body.dp-skin--modern .dp-404-phone,
body.dp-skin--modern .dp-rv-step--active .dp-rv-step-lbl,
body.dp-skin--modern .dp-sl-specs-toggle,
body.dp-skin--modern .dp-sl-specs-toggle:hover,
body.dp-skin--modern .dp-inv-page-btn:not(.dp-inv-page-btn--active):hover,
body.dp-skin--modern .dp-404-links__grid a:hover { color: var(--dp-skin-figure-ink); }

/* The two glyphs just removed from 10f. A tick in an about-page list and the
   enquiry panel's icon are decoration, not controls, so they take the same
   cool rung as every other feature icon rather than the action colour. */
body.dp-skin--modern .dp-abt-check__icon,
body.dp-skin--modern .dp-sl-inq__icon { color: var(--dp-feature-icon-color); }

/* ══════════════════════════════════════════════════════════════════════════
   11 — PAIRS THE SKIN'S OWN REPAINTS BROKE, AND ONE THE BASE CASCADE HIDES

   Plain `color` declarations on components whose fill section 10 already
   repaints to white. Nothing moves or resizes.
   ══════════════════════════════════════════════════════════════════════════ */

/* 11a — the ghost CTA button is transparent, so it sits on the banner plate
        (#ffffff from 10c) rather than on the filled chip. 10d's
        `.dp-cta-banner__btn { color: #ffffff }` is (0,2,1) and outranks
        style.css's (0,1,0) ghost rule, so the label was white on white —
        1.00:1, invisible. #000000 on #ffffff = 21:1. */
body.dp-skin--modern .dp-cta-banner__btn.dp-cta-banner__btn--ghost {
  color: var(--dp-cta-banner-ghost-color);
}

/* 11b — `.dp-mobile-nav a` (0,1,1) outranks `.dp-mobile-nav__call` (0,1,0) in
        header.php, so --dp-mnav-call-fg never won: the pill printed the
        drawer's link grey on its own white plate (#C9CED6 on #ffffff =
        1.58:1, and 1.00:1 on hover). Re-asserted at (0,3,2). */
body.dp-skin--modern .dp-mobile-nav a.dp-mobile-nav__call {
  color: var(--dp-mnav-call-fg);
}


/* 11d — the gallery and lightbox arrows take `color: var(--dp-text)` from
        style.css and only their FILL is tokenised, so the white hover plate
        this skin sets carried a white glyph at 1.00:1. */
body.dp-skin--modern .dp-sl-gal-btn:hover,
body.dp-skin--modern .dp-sl-lb__prev:hover,
body.dp-skin--modern .dp-sl-lb__next:hover {
  color: var(--dp-skin-accent-ink);
}

/* 11e — the about stats band is the one section this skin flips to a white
        plate (--dp-statsband-bg: #ffffff). Its label already moves to
        #46484d, but page-about.php paints the figure straight from
        var(--dp-accent) — a wizard property no skin can re-point — which on
        the pre-2.9.4 default accent measured 2.54:1 at 54px against the 3:1
        large-text floor. Section 10f repaints every other bare-accent glyph;
        this one was missed. */
body.dp-skin--modern .dp-abt-stat__num {
  color: var(--dp-statsband-num-color);
}

/* 11g — header.php's critical-inline block prints AFTER wp_head, so it prints
        after this file, and it ends with `background-color: var(--dp-accent)
        !important` on a list that includes the CF7 "invalid" submit states.
        `form.wpcf7-form.invalid input[type="submit"]` is (0,3,2) — the same
        weight as this skin's own submit rule — so on a tie the later sheet
        won and a failed submission flipped the button back to the wizard's
        plate while the label stayed this skin's. --dp-submit-bg is a flat
        colour here, so background-color restates it exactly; an unskinned
        page never sees these rules. */
body.dp-skin--modern form.wpcf7-form.invalid input[type="submit"],
body.dp-skin--modern form.wpcf7-form.invalid input[type="submit"]:focus,
body.dp-skin--modern form.wpcf7-form.invalid input[type="submit"]:active,
body.dp-skin--modern form.wpcf7-form.invalid button[type="submit"],
body.dp-skin--modern form.wpcf7-form.invalid button[type="submit"]:focus,
body.dp-skin--modern form.wpcf7-form.invalid button[type="submit"]:active {
  background-color: var(--dp-submit-bg) !important;
}

/* 11h — TWO GLYPHS THE BASE PAINTS STRAIGHT FROM --dp-cta.

   --dp-cta is one of the seventeen wizard properties, so this skin cannot
   re-point it, and it is whatever the owner chose. Used as INK on this skin's
   card plate it has the same failure mode as --dp-accent does in 10g: a
   mid-tone or dark CTA colour cannot reach the 4.5:1 floor as text on a dark
   ground, and no mix of --dp-cta with itself can raise it — the token IS the
   ceiling. So each one moves to a colour this skin owns. Colour only.

   • .dp-faq-item__icon — style.css, `color: var(--dp-cta)`. The
     accordion's open/close affordance. --dp-text-soft (#C9CED6) keeps it a
     step below the #FFFFFF question it sits beside: 12.45:1 on #0A0B0D.
   • .dp-rv-step--current .dp-rv-step-lbl — page-reserve.php, which
     paints it `color: var(--dp-cta)`. The reserve wizard's current step. It
     takes --dp-skin-figure-ink, the same #f4f6fb the --active label takes in
     10g, and the ladder against the two pending labels (--dp-text-faint,
     #8b95a9) is what separates them. Both step labels were the owner's
     colour in the first correction, which measured 1.64:1 on a navy site. */
/* 11i — A RATING IS NOT AN ACTION.
   .dp-testimonial__stars (style.css) and .dp-ty-review__stars
   (page-thank-you.php) both print `color: var(--dp-accent)` with no token
   behind them, so five filled stars rendered in the owner's action colour at
   the exact saturation of the primary button. They move to the functional
   amber this theme already owns for price-drop and pending (#E8A33C), which is
   also where --dp-review-star-color now points, so a rating reads as a rating
   on every site and can never be confused for something clickable. */
body.dp-skin--modern .dp-testimonial__stars,
body.dp-skin--modern .dp-ty-review__stars {
  color: var(--dp-review-star-color);
}

/* 11j — NO FADED INK ON AN OWNER-COLOURED PLATE. See the note above the
   build step; this is the skin's own share of the green-owner deficit and it
   is the only part of it a skin can reach. The rest is --dp-accent-fg, which
   the wizard stamps !important. */
body.dp-skin--modern .dp-cta-banner__subtitle,
body.dp-skin--modern .dp-cta-banner__btn--ghost {
  opacity: 1;
}

body.dp-skin--modern .dp-faq-item__icon {
  color: var(--dp-text-soft);
}
body.dp-skin--modern .dp-rv-step--current .dp-rv-step-lbl {
  color: var(--dp-skin-figure-ink);
}

/* ══════════════════════════════════════════════
   GLASS, WHEN THERE IS NO GLASS
   The header and the mobile drawer are translucent because they are blurred:
   backdrop-filter is what turns a 78% wash into frosted glass. Where the
   filter is unsupported (older Safari, compositing disabled, some privacy
   builds) the wash stays translucent and unblurred, and a nav link sitting
   over a light band underneath measured 4.39:1 — under the 4.5:1 floor. The
   fallback is meant to be DIMMER than the glass, never more transparent, so
   here it is made nearly opaque. A browser with backdrop-filter never sees
   this block, so the chosen look is untouched.
   ══════════════════════════════════════════════ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.dp-skin--modern {
    --dp-header-bg: rgba(10, 12, 21, 0.97);
    --dp-mnav-bg: rgba(10, 12, 21, 0.98);
  }
}

/* ══════════════════════════════════════════════
   FONT-WEIGHT RECONCILIATION
   --dp-fw-black is 900 here because the display face is Archivo, which ships
   900. The same token also reaches the figures (IBM Plex Mono) and the body /
   UI register (IBM Plex Sans), and NEITHER of those families ships anything
   above 700 — Google Fonts answers 400 for IBM+Plex+Sans:wght@900. Until the
   base wired --dp-font-numeric / --dp-font-heading these all sat on one
   family and the mismatch was invisible; now that headings really take
   Archivo, every one of these landed on a face the browser had to fake.
   Archivo keeps 900; everything on Plex drops to that family's real maximum.
   ══════════════════════════════════════════════ */
body.dp-skin--modern {
  /* figures — IBM Plex Mono, 100–700 */
  --dp-step-num-fw: 700;
  --dp-shp-step-num-fw: 700;
  --dp-ty-countdown-val-fw: 700;
  --dp-sl-sprice-fw: 700;
  --dp-sl-rel-price-fw: 700;
  --dp-inv-feat-num-fw: 700;
  --dp-rv-card-final-fw: 700;

  /* body / UI register — IBM Plex Sans, 100–700 */
  --dp-header-logo-fw: 700;
  --dp-footer-logo-fw: 700;
  --dp-btn-white-fw: 700;
  --dp-contact-trust-pill-tick-fw: 700;
  --dp-sl-reserve-main-fw: 700;
  --dp-sl-sold-fw: 700;
  --dp-sl-reserved-fw: 700;
  --dp-sl-pending-fw: 700;
  --dp-abt-check-icon-fw: 700;
  --dp-404-phone-fw: 700;
  --dp-rv-req-fw: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   12 — WHAT THE BROWSER AUDIT OF THIS SKIN FOUND
   ──────────────────────────────────────────────────────────────────────────
   Paint only, every selector scoped to body.dp-skin--modern, and every one
   of them measured at the width it was reported at plus its two neighbours.
   Where the defect is really the base's, the same fix is written out for
   style.css in ../base-patches/modern.md; the rules here keep THIS skin
   correct until that merge lands, and they stay correct afterwards.
   ══════════════════════════════════════════════════════════════════════════ */

/* 12a — THE SEVENTH BADGE. archive-listing.php, front-page.php and
         single-listing.php each declare six badge variants; a listing whose
         `badge` meta is "Reserved" (fixture dpfx-reserved) emits a seventh
         class that nothing paints, so the label printed bare white on the
         photograph — pixel-sampled at 2.89:1 at its worst, with a tenth of
         the label box under 4.5:1. The token pair is declared above; this
         rule spends it on all three places the badge is rendered. Colour
         only — the geometry of the badge is untouched. */
body.dp-skin--modern .dp-inv-card__badge--reserved,
body.dp-skin--modern .dp-home-fcard__badge--reserved,
body.dp-skin--modern .dp-sl-rel-card__img .dp-inv-card__badge--reserved {
  background: var(--dp-badge-reserved-bg);
  color: var(--dp-badge-reserved-fg);
}

/* 12b — CF7 FIELD LABELS. style.css hard-codes `color: var(--dp-accent)`
         on `.wpcf7-form label` at (0,2,0). This skin's --dp-label-color only
         reaches `.dp-form-wrap label`, which a real CF7 form (the listing
         inquiry form, and reserve) does not match, so those labels printed
         the wizard's amber — 11px uppercase amber in a direction whose own
         header reserves amber for a price drop and the pending stamp. Not a
         contrast failure (10.8:1); a direction failure. (0,3,0) wins. */
body.dp-skin--modern .wpcf7-form label {
  color: var(--dp-label-color);
}

/* 12c — THE PHOTO IS A BUTTON AND SAID SO ONLY TO A MOUSE CURSOR.
         button#dpLbOpen lies over the main gallery photo and opens the
         lightbox. Measured with real mouse events, base and hover computed
         styles were byte-identical on all five photographed fixtures: the
         only affordance was `cursor: zoom-in` from single-listing.php, which
         does not exist on a touch device. Its focus ring is already correct,
         so this closes the pointer half. Background and box-shadow only —
         an inset ring cannot be clipped by the gallery's overflow and adds
         no geometry. */
body.dp-skin--modern .dp-sl-lb-trigger:hover {
  background: var(--dp-sl-lb-trigger-bg-hover);
  box-shadow: var(--dp-sl-lb-trigger-ring-hover);
}

/* 12d — THE CURRENT PAGE'S NAV ITEM HAD NO HOVER.
         .dp-header__nav a.active is a white slab with a black label and was
         the one nav item whose painted state did not move under the pointer
         (the others go #98A0AA → #FFFFFF on an 8% plate). It takes the same
         step-down the primary button takes, from this skin's own token:
         black on #C9CED6 is 14.0:1. */
body.dp-skin--modern .dp-header__nav a.active:hover {
  background: var(--dp-text-soft);
}

/* 12e — /thank-you/ CONTACT ROW: TAP TARGETS.
         The three chips are flex items with padding:0 and line-height:normal,
         so they measured 105x23 / 185x23 / 189x23 — under the 44px touch
         minimum and one pixel under the 24px floor that applies with any
         pointer. line-height is typography, is on the allowed list, and the
         row is a wrapping flex line with align-items:stretch, so all three
         take the same height and nothing moves sideways.
         The band is max-width:768px, NOT the 767px the sibling skin used:
         page-thank-you.php switches this page to its one-column mobile
         layout at `@media(max-width:768px)`, so a 767px rule leaves exactly
         one width — 768, a real tablet width — in the mobile layout with the
         desktop target height. */
body.dp-skin--modern .dp-ty-contact__item { line-height: var(--dp-ty-contact-item-lh); }
@media (max-width: 768px) {
  body.dp-skin--modern .dp-ty-contact__item { line-height: var(--dp-ty-contact-item-lh-sm); }
}

/* 12f — THE SKIP LINK IS 7PX SHORT OF A TOUCH TARGET.
         164x37 focused, from padding 10px 20px + a 13px face at
         line-height:normal. 10 + 24 + 10 = 44. The band is max-width:960px,
         the width at which style.css turns the mobile sticky bar off —
         i.e. the theme's own definition of "a touch layout" — rather than
         767px, which would leave the 768-960 tablet band short. The link is
         absolutely positioned and off-screen until focused, so growing it
         moves nothing on any page. */
@media (max-width: 960px) {
  body.dp-skin--modern .dp-skip-link { line-height: var(--dp-skip-lh); }
}

/* 12g — "CALL ABOUT SIMILAR CARS" OVER-SUBSCRIBES ITS BUTTON AT 320.
         On an unavailable unit the single CTA measured scrollWidth 223 in a
         220px content box — clipped internally, never pushed onto the page
         (document overflow stayed 0). The base is worse in the sibling skins
         (250/220 and 230/218), so this is inherited width, not modern's
         typography; one step of font-size clears it with room for a longer
         label. 360px, not 359 or 375: the box first fits at 340 and the
         industry copy in this slot is being rewritten, so the step keeps
         headroom across the whole small-phone band and stops before 361. */
/* Band extended 360 -> 399 in the icon pass below. At 361 the step used to
   end and the label sprang back to 15px, which left the content box exactly
   0.55px of slack on /inventory/dpfx-sold/ — the 14px icon survived by half
   a pixel, and one more character of industry copy would have taken it. The
   same 14px carried to 399 gives 12.58px at 361, 26.58 at 375 and 41.58 at
   390. Heavy's relief band moves to the same 399 for the same reason. */
@media (max-width: 399px) {
  body.dp-skin--modern .dp-sl-btns .dp-btn--cta { font-size: var(--dp-sl-btn-cta-fs-sm); }
}

/* 12h — THE PRESSED STATE. Thirteen controls were visually identical under
         :hover and :active — not a 2.1 AA failure, but the buttons that DO
         have one (.dp-btn--primary / --cta / --dark / --ghost release a -2px
         lift) make their absence read as a dead control.

         This used to be `filter: brightness(0.86)`. style.css now presses the
         seven canonical controls with `opacity: var(--dp-pressed-opacity)`,
         and three of the selectors below — .dp-header__call and the two CF7
         submits — are in that list, so the two properties stacked: at 1280 on
         /inventory/dpfx-available-full/ .dp-header__call stepped 2.28x from
         rest to pressed on this skin against 1.55x on heavy, which has no
         second mechanism. Same property, same token now, so the overlap is a
         duplicate rather than a stack and the twelve controls the base does
         not reach press exactly like the ones it does. opacity is on the
         allowed list and changes no geometry. */
body.dp-skin--modern .dp-btt:active,
body.dp-skin--modern .dp-faq-item__q:active,
body.dp-skin--modern .dp-footer__links a:active,
body.dp-skin--modern .dp-footer__bottom-links a:active,
body.dp-skin--modern .dp-header__call:active,
body.dp-skin--modern .dp-header__nav a:active,
body.dp-skin--modern .dp-sl-lb__close:active,
body.dp-skin--modern .dp-sl-lb__prev:active,
body.dp-skin--modern .dp-sl-lb__next:active,
body.dp-skin--modern .dp-sl-rel-card:active,
body.dp-skin--modern .dp-sl-specs-toggle:active,
body.dp-skin--modern .dp-ty-inv-card:active,
body.dp-skin--modern .dp-404-links__grid a:active,
body.dp-skin--modern .wpcf7-form input[type="submit"]:active,
body.dp-skin--modern .wpcf7-form button[type="submit"]:active {
  opacity: var(--dp-pressed-opacity);
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PHONE ICON ON THE SOLD / RESERVED CTA — one band, all three skins
   ──────────────────────────────────────────────────────────────────────────
   .dp-sl-btns > a.dp-btn--cta is inline-flex, gap 10px, padding 0 28px,
   min-height 56px, and .dp-btn is white-space:nowrap. The <svg> carries
   width="14" height="14" but is a flex item at the default flex-shrink:1,
   so when the nowrap label over-subscribes the content box the ICON is what
   gives way — all of it, before a single glyph is clipped. Measured at 320
   on /inventory/dpfx-sold/ the icon rendered at 0.00px on classic, heavy and
   modern alike: not small, gone.

   The bands, measured on this skin's own type, sweeping 320-960 on
   /inventory/dpfx-sold/ and /inventory/dpfx-reserved/:
     classic  sold 320-340, reserved 320-330
     heavy    sold 320-355 AND 361-390, reserved 320-330 and 361
     modern   sold 320-340, reserved never
   Heavy has two bands because its own @media(max-width:360px) step ends and
   the label springs back to 14px/1.6px tracking, which over-subscribes again.

   flex-shrink:0 on the svg is the obvious fix and is not available: flex-* is
   off the paint-only list for a skin, and in style.css it would change what a
   2.9.4 site renders. It is also not the fix you want on its own — it moves
   the loss from the icon to the tail of the label, which is worse copy.

   The label is what consumes the space, and font-size and letter-spacing are
   both paint. So the label takes one step inside a narrow-phone band, sized
   from this skin's measured label width at 320 so the 14px icon never has to
   shrink at all. The button's min-height is 56px and one line of 9.5-11px
   type is nowhere near it, so the height does not move — verified at every
   width in the band on both fixtures.

   ONE band for all three skins, 359px, not three different ones. Each skin
   had its own (classic 480, heavy 360, modern 360) and that disagreement is
   exactly why heavy alone broke a second time at 361-390: its step ended at
   360 and the label sprang back. Heavy's own band is widened to 399 above,
   which closes that second break without touching the other two skins, and
   then 359 is the one band all three need for the deep 320-355 case. It is
   deliberately NOT taken out to 399 for everyone: classic and modern are
   clear from 341 up, and 375 and 390 are the two commonest phone widths —
   shrinking their CTA there would buy nothing. Each skin's pre-existing rule
   stays where it is; it solves label CLIPPING over its own measured band, and
   this rule, being later in the file, wins inside 359.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 359px) {
  body.dp-skin--modern .dp-sl-btns > a.dp-btn--cta {
    font-size: var(--dp-text-xs);
    letter-spacing: var(--dp-sl-btn-cta-ls-xs);
  }
}

/* A checkbox label is not a field label — see style.css. This skin puts
   uppercase and tracking on `.wpcf7-form label` and wins on specificity, so
   the exclusion has to be repeated here at (0,3,2). */
body.dp-skin--modern .wpcf7-form .wpcf7-list-item label {
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--dp-fw-normal, 400);
}
