/* Fonts: assets/fonts/heavy/fonts.css, self-hosted (R72, 3.14.0). */

/* ══════════════════════════════════════════════════════════════════════════
   SKIN — "HEAVY EQUIPMENT" / JOB SITE            body.dp-skin--heavy

   Industrial, utilitarian. Deep graphite ground, machined-plate panels, one
   bold colour: safety yellow. Hard edges, thick rules, condensed stencil
   display type, tabular figures, mechanical 0.12s linear motion.

     ground   #081a23    panel   #12232d    recessed #04141d   raised #172933
     rule     #21333d    rule-2  #2c3e49    steel    #40535e
     yellow   #F2B705    dark    #C28F03    bright   #FFC71A
     text     #f1f7fa    soft    #c8cdd0    muted    #88939a   ink   #071821

   Type: Oswald for display and UI (uppercased), Barlow for running text,
   Barlow Semi Condensed for figures. Oswald sets narrow, so display sizes are
   pitched up ~10%; Barlow's x-height sits ~6% under the stock system sans, so
   running text goes up a step. The Reserve button is orange (#E8791F) so the transaction
   colour never collides with the safety-yellow primary.

   SCOPE AND CASCADE
   Every declaration is scoped to body.dp-skin--heavy, so this file is inert on
   any other skin. It is enqueued by dp_enqueue_skin() (it was once printed inline at wp_head
   priority 21 — immediately after the wizard's colour block at priority 20).

   That colour block stamps seventeen custom properties (--dp-accent*, --dp-cta*,
   --dp-reserve*) with !important on `:root, :root body`. A skin therefore never
   owns those seventeen: the values declared for them below are this direction's
   intent and the fallback if the block is filtered off, but on a live site the
   site owner's choice wins. Everything DERIVED from them is restated here with
   an explicit value or with a fresh var() reference, which is what makes the
   direction land either way — and, where the reference is deliberate, lets the
   owner's colour flow through into the skin rather than being ignored.

   WHY EVERY TOKEN IS RESTATED
   :root's derived tokens (--dp-*-soft, every color-mix(), every
   `1px solid var(--dp-border)`) are substituted against :root's OWN values at
   computed-value time. Re-pointing a primitive on <body> cannot reach them.
   So all 1578 declarations in style.css's :root are re-declared here; the
   var() forms that survive now resolve against this block's own values.

   PAINT ONLY
   Nothing below 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.
   ══════════════════════════════════════════════════════════════════════════ */

body.dp-skin--heavy {
  /* R39 (3.8.22) — TYPE ROLES. The size of each role in this skin; style.css
     points the matching component tokens at these in a body{} block, so a
     component no longer restates its size here. Sizes that were identical to
     the base were dropped from this file outright (the base value inherits). */
  --dp-fs-support: 16px;   /* D6 (3.8.23) */
  --dp-fs-title-sm: 22px;
  --dp-fs-title-xs: 19px;
  --dp-fs-quote: 16px;
  --dp-fs-control: 17px;
  --dp-fs-meta: 14px;
  --dp-fs-caption: 13px;
  --dp-fs-tag: 14px;
  --dp-fs-note-title: 15px;
  --dp-fs-title-md: 26px;
  --dp-fs-title-compact: 33px;   /* R42 */
  --dp-fs-title-lg: 31px;

  /* ── Accent CTA (admin-customisable in the real theme) ── */
  --dp-accent: #F2B705;
  --dp-accent-dark: #C28F03;
  --dp-accent-soft: rgba(242, 183, 5, 0.10);
  --dp-accent-border: rgba(242, 183, 5, 0.42);
  --dp-accent-glow: rgba(242, 183, 5, 0.12);
  --dp-accent-text: #F2B705;
  --dp-accent-fg: #071821;
  --dp-cta: #F2B705;
  --dp-cta-dark: #C28F03;
  --dp-cta-soft: rgba(242, 183, 5, 0.10);
  --dp-cta-fg: #071821;

  /* ── Surfaces & text ── */
  --dp-bg: #081a23;
  --dp-bg-card: #12232d;
  --dp-bg-card-2: #04141d;
  --dp-bg-input: #04141d;
  --dp-text: #f1f7fa;
  --dp-text-soft: #c8cdd0;
  --dp-text-muted: #88939a;
  /* R46 (3.8.22) — TEXT THAT IS READ takes ONE ink: #a5b1b8 in 3.8.22 (7.4-8.5:1, then this
     skin's menu ink), #c8cdd0 since 3.9.0 (see the end of this file): card copy, notes, subtitles, form intros, footer copy
     and links, 23 roles in all. #88939a stays for what is NOT read as prose —
     placeholders, the select arrow, rules, badge grounds, labels, the
     breadcrumb (whose order depends on it) and reviewer roles. The same card
     paragraph used to be three different greys on three pages. */
  --dp-text-faint: #7e8990;   /* sole consumer is .dp-inv-search input::placeholder;
                                 #677278 measured 3.79:1 on --dp-field-bg #04141d */
  --dp-border: #21333d;
  /* 1.4.11 — every form field (reserve, contact, the footer forms, the 404)
     takes its border from here through --dp-field-border. #2c3e49 measured 1.45:1 on the
     form panel #12232d and 1.69:1 on the field fill #04141d: the box that
     tells you where to type was invisible. #6a757b is the raised steel the
     ghost button and the inventory card dot already use — 3.41:1 on #12232d,
     3.96:1 on #04141d, 3.57:1 on the transaction panel #0d1f29. */
  --dp-control-border: #79848a;   /* R31: one control border, 4.2-4.9:1 */
  --dp-input-border-hover: #a0acb3;

  /* ── Typography ── */
  --dp-font: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --dp-font-heading: 'Oswald', 'Barlow Semi Condensed', 'Arial Narrow', Impact, sans-serif;
  --dp-font-ui: 'Oswald', 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif;
  --dp-font-numeric: 'Barlow Semi Condensed', 'Barlow', 'Arial Narrow', Arial, sans-serif;
  --dp-font-quote: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --dp-font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
  --dp-font-variant-numeric: tabular-nums lining-nums;
  --dp-fw-medium: 500;
  --dp-fw-semibold: 600;
  --dp-fw-bold: 600;
  --dp-fw-extrabold: 700;
  --dp-fw-black: 700;

  /* ── Shell radii motion ── */
  --dp-shell: 1240px;
  --dp-transition: 0.12s linear;
  --dp-radius: 3px;
  --dp-radius-xs: 0px;
  --dp-radius-sm: 2px;
  --dp-radius-md: 2px;
  --dp-radius-lg: 3px;
  --dp-radius-input: 0px;
  --dp-radius-full: 2px;
  --dp-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  --dp-shadow-hover: 0 5px 0 rgba(0, 0, 0, 0.62);

  /* ── Global chrome ── */
  --dp-skip-bg: var(--dp-skin-accent);
  --dp-skip-fg: var(--dp-skin-accent-ink);
  --dp-skip-radius: 0;
  --dp-skip-fs: 13px;
  --dp-skip-fw: 700;
  --dp-focus-ring-w: 2px;
  --dp-focus-ring-w2: 4px;
  --dp-focus-ring-color: #f1f7fa;
  --dp-focus-ring-color2: #010f17;
  --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: #04141d;
  --dp-header-border: 2px solid #21333d;
  --dp-header-blur: none;
  --dp-header-logo-color: #f1f7fa;
  --dp-header-logo-fs: 23px;
  --dp-header-logo-fw: 700;
  --dp-header-logo-ls: 1.4px;
  --dp-header-link: #a5b1b8;
  --dp-header-link-fs: 15px;
  --dp-header-link-fw: 500;
  --dp-header-link-ls: 1.2px;
  --dp-header-link-radius: 0px;
  --dp-header-link-hover: #f1f7fa;
  --dp-header-link-hover-bg: #172933;
  --dp-header-link-active: var(--dp-skin-accent-ink);
  --dp-header-link-active-bg: var(--dp-skin-accent);
  --dp-header-call-bg: var(--dp-skin-accent);
  --dp-header-call-fg: var(--dp-skin-accent-ink);
  --dp-header-call-fw: 600;
  --dp-header-call-ls: 1.2px;
  --dp-header-call-icon: var(--dp-skin-accent-ink); /* 3.8.21: follows the pill's fill, as its label does */
  --dp-header-call-shadow: inset 0 -3px 0 rgba(7, 24, 33, 0.28);
  --dp-header-call-shadow-hover: inset 0 -3px 0 rgba(7, 24, 33, 0.50);
  --dp-hamburger-bar: var(--dp-skin-accent);
  --dp-hamburger-bar-radius: 0px;

  /* ── Mobile drawer ── */
  --dp-mnav-bg: #04141d;
  --dp-mnav-border: 2px solid #21333d;
  --dp-mnav-blur: none;
  --dp-mnav-link: #c8cdd0;
  --dp-mnav-link-hover: var(--dp-skin-accent-text);
  --dp-mnav-link-fw: 500;
  --dp-mnav-divider: 1px solid #172933;
  --dp-mnav-call-bg: var(--dp-skin-accent);
  --dp-mnav-call-fg: var(--dp-skin-accent-ink);
  --dp-mnav-call-shadow: inset 0 -3px 0 rgba(7, 24, 33, 0.28);
  --dp-mnav-scrim: rgba(0, 0, 0, 0.6);

  /* ── Sticky bar ── */
  --dp-sticky-shadow: 0 -2px 0 #21333d;
  --dp-sticky-fg: #f1f7fa;
  --dp-sticky-fs: 15px;
  --dp-sticky-fs-sm: 14px;
  --dp-sticky-fw: 600;
  --dp-sticky-ls: 1.4px;
  --dp-sticky-call-bg: var(--dp-skin-accent);
  --dp-sticky-info-bg: #12232d;
  /* 1.4.11 — the info half of the sticky bar is the one control on the bar
     with no colour of its own: its fill #12232d sits on the bar's #04141d at
     1.19:1, so the rule IS the button. #21333d measured 1.23:1 on that fill.
     #6a757b is 3.41:1 on #12232d and 3.64:1 on the bar's hover plate. */
  --dp-sticky-info-border: 2px solid #6a757b;

  /* ── Page wash section rhythm ── */
  --dp-home-wash: repeating-linear-gradient(90deg, rgba(136, 147, 154, 0.05) 0 1px, transparent 1px 72px), linear-gradient(180deg, #081a23 0%, #081a23 100%);
  --dp-hairline: repeating-linear-gradient(90deg, #88939a 0 2px, transparent 2px 9px);
  --dp-hairline-opacity: 0.38;

  /* ── Panels ── */
  --dp-card-bg: #12232d;
  --dp-card-border: 2px solid #21333d;
  --dp-card-glow: linear-gradient(180deg, rgba(241, 247, 250, 0.04) 0%, transparent 38%);
  --dp-band-bg: #0d1f29;   /* R48: a full-width section band — between the page (#081a23) and the card plate (#12232d), so a card stays a plate on it */
  --dp-wrapper-bg: #12232d;
  --dp-wrapper-border: 2px solid #21333d;
  --dp-wrapper-glow: linear-gradient(180deg, rgba(241, 247, 250, 0.04) 0%, transparent 38%);

  /* ── Headings ── */
  --dp-kicker-bg: linear-gradient(90deg, #88939a 0 9px, #081a23 9px);
  --dp-kicker-border: 2px solid #21333d;
  --dp-kicker-color: #f1f7fa;
  --dp-kicker-fw: 600;
  --dp-kicker-ls: 2.6px;
  --dp-kicker-transform: uppercase;
  --dp-kicker-radius: 0px;
  --dp-title-color: #f1f7fa;
  --dp-title-fs: clamp(38px, 5.4vw, 66px);
  --dp-title-fs-md: clamp(26px, 3.8vw, 42px);
  --dp-title-fs-sm: 32px;
  --dp-title-fs-section: clamp(30px, 4vw, 52px);   /* 3.8.22: was clamp(30px, 4.4vw, 52px) — at 768-1024 a section title outgrew the page hero H1 (45-53px under a 43px H1); the cap and the phone size are unchanged */
  --dp-title-fw: 700;
  --dp-title-lh: 1.04;
  --dp-title-lh-sm: 1.08;
  --dp-title-ls: 0.4px;
  --dp-title-ls-md: 0.4px;
  --dp-title-ls-sm: 0.3px;
  --dp-title-accent-color: #c8cdd0;
  --dp-line-bg: repeating-linear-gradient(135deg, var(--dp-skin-accent) 0 7px, #071821 7px 10px);
  --dp-line-radius: 0px;
  --dp-line-shadow: none;
  --dp-subtitle-color: #c8cdd0;
  --dp-subtitle-fs: 19px;
  --dp-subtitle-fs-md: 18px;
  --dp-subtitle-fs-sm: 16px;
  --dp-subtitle-lh: 1.7;
  --dp-subtitle-lh-sm: 1.65;
  --dp-note-color: #c8cdd0;
  --dp-note-fs: 13px;
  --dp-note-lh: 1.6;
  --dp-highlight-color: #f1f7fa;
  --dp-highlight-fw: 700;

  /* ── Buttons ── */
  --dp-btn-radius: 0px;
  --dp-btn-fw: 600;
  --dp-btn-ls: 1.6px;
  --dp-btn-border: 2px solid var(--dp-skin-accent);
  --dp-btn-transition: box-shadow .12s linear, background .12s linear, border-color .12s linear, color .12s linear, transform .12s linear;
  --dp-btn-primary-bg: var(--dp-skin-accent);
  --dp-btn-primary-fg: var(--dp-skin-accent-ink);
  --dp-btn-primary-shadow: inset 0 -3px 0 rgba(7, 24, 33, 0.28);
  --dp-btn-primary-shadow-hover: inset 0 -3px 0 rgba(7, 24, 33, 0.52);
  --dp-btn-cta-bg: #172933;
  --dp-btn-cta-fg: var(--dp-skin-accent-text);
  --dp-btn-cta-shadow: 0 3px 0 #010f17;
  --dp-btn-cta-shadow-hover: 0 5px 0 #010f17;
  --dp-btn-ghost-bg: #12232d;
  --dp-btn-ghost-fg: #f1f7fa;
  /* WCAG 1.4.11 — steel #40535e measured 2.01:1 on this button's own fill
     #12232d and 2.42:1 on the darkest ground behind it, rgb(1, 15, 24). The
     rule is already 2px, so it is the colour that had to move, not the weight:
     #6a757b measures 3.41:1 on #12232d, 3.17:1 on the hover fill #172933,
     3.76:1 on ground #081a23, 3.96:1 on recessed #04141d and 4.11:1 on
     rgb(1, 15, 24). Skin-local — the shared steel #40535e is untouched. */
  --dp-btn-ghost-border: 2px solid #6a757b;
  --dp-btn-ghost-blur: none;
  --dp-btn-ghost-bg-hover: #172933;
  --dp-btn-ghost-border-hover: var(--dp-skin-accent);
  --dp-btn-shine: linear-gradient(120deg, transparent, rgba(250, 255, 255, 0.16), transparent);

  /* ── Hero ── */
  --dp-hero-overlay: linear-gradient(180deg, rgba(4, 20, 29, 0.68) 0%, rgba(4, 20, 29, 0.86) 62%, rgba(8, 26, 35, 0.96) 100%);
  --dp-hero-title-color: #f1f7fa;
  --dp-hero-title-fs: clamp(42px, 5.6vw, 78px);
  --dp-hero-title-fw: 700;
  --dp-hero-title-ls: 0.5px;
  --dp-hero-title-lh: 1.0;
  --dp-hero-title-span-color: #c8cdd0;
  --dp-hero-sub-color: #c8cdd0;
  --dp-hero-sub-fs: clamp(17px, 1.7vw, 21px);
  --dp-hero-sub-lh: 1.65;
  --dp-hero-pill-bg: rgba(4, 20, 29, 0.72);
  /* 1.4.11 — the pill's own scrim clamps its backdrop to #04141d…#0a1c26 over
     the hero plate, where the shared steel #40535e measured 2.17:1. The pill
     is a bordered chip with a hover state and no fill of its own beyond that
     scrim, so the rule is the chip. #6a757b measures 3.68:1 at the lightest
     sampled backdrop and 3.96:1 at the darkest. */
  --dp-hero-pill-border: 2px solid #6a757b;
  --dp-hero-pill-color: #e3e8ec;
  --dp-hero-pill-radius: 0px;
  --dp-hero-pill-fs: 12px;
  --dp-hero-pill-fw: 600;
  --dp-hero-pill-ls: 1.4px;
  --dp-hero-zoom: dpHeroZoom 10s linear forwards;

  /* ── Stats band (full-bleed strip) ── */
  --dp-statsband-bg: #04141d;
  --dp-statsband-border-top: 2px solid #21333d;
  --dp-statsband-border-bottom: 2px solid #21333d;
  --dp-statsband-num-color: #f1f7fa;
  --dp-statsband-num-fs: 46px;
  --dp-statsband-num-fs-sm: 36px;
  --dp-statsband-num-fw: 700;
  --dp-statsband-num-ls: 0px;
  --dp-statsband-label-color: #88939a;
  --dp-statsband-label-fw: 600;
  --dp-statsband-label-ls: 1.8px;
  --dp-statsband-label-transform: uppercase;

  /* ── Featured card ── */
  --dp-fcard-border: 2px solid #21333d;
  --dp-fcard-radius: 3px;
  --dp-fcard-media-radius: 0px;
  --dp-fcard-border-hover: var(--dp-skin-accent);
  --dp-fcard-shadow-hover: 0 5px 0 rgba(0, 0, 0, 0.62);
  --dp-fcard-ph-color: #808b91;
  --dp-fcard-overlay: linear-gradient(180deg, transparent 46%, rgba(4, 20, 29, 0.86) 100%);
  --dp-fcard-badge-radius: 0px;
  --dp-fcard-badge-fw: 700;
  --dp-fcard-badge-ls: 1.6px;
  --dp-fcard-badge-transform: uppercase;
  --dp-fcard-year-border: 2px solid #21333d;
  --dp-fcard-year-color: #c8cdd0;
  --dp-fcard-year-radius: 0px;
  --dp-fcard-year-fw: 600;
  --dp-fcard-title-color: #f1f7fa;
  --dp-fcard-title-fw: 600;
  --dp-fcard-title-lh: 1.15;
  --dp-fcard-footer-border: 2px solid #21333d;
  --dp-fcard-price-color: #f1f7fa;
  --dp-fcard-price-fw: 700;
  --dp-fcard-arrow-radius: 2px;
  --dp-fcard-arrow-border: 2px solid #21333d;

  /* ── Listing badges (seven fixed variants) ──
     The badge <select> in inc/industry.php offers seven statuses, but :root
     only ever declared six token pairs: "Reserved" had none, anywhere in the
     theme, so .dp-inv-card__badge--reserved painted no chip at all and its
     10px/700 label sat straight on the listing photograph (glyph-core
     contrast measured 3.05:1 at 1024 and 3.72:1 at 1440 on /inventory/,
     with 44% / 12% of glyph pixels under the 4.5:1 this size needs — the
     exact value swings with whatever photo the card happens to carry).
     The pair below closes that gap for this skin; the same pair belongs in
     style.css so the other two skins inherit it (see base-patches/heavy.md).
     #5c676d is this skin's own RESERVED overlay stamp (--dp-sl-reserved-bg),
     so the chip and the stamp read as one mark. */
  --dp-badge-hot-deal-bg: #B3321F;
  --dp-badge-hot-deal-fg: #f1f7fa;
  --dp-badge-just-arrived-bg: #88939a;
  --dp-badge-just-arrived-fg: #071821;
  --dp-badge-featured-bg: #f1f7fa;
  --dp-badge-featured-fg: #071821;
  --dp-badge-price-drop-bg: #04141d;
  --dp-badge-price-drop-fg: #f1f7fa;
  --dp-badge-pending-sale-bg: #C7CDD3;
  --dp-badge-pending-sale-fg: #14161A;
  --dp-badge-sold-bg: #4A5159;
  --dp-badge-sold-fg: #F5F6F7;
  --dp-badge-reserved-bg: #5B6675;
  --dp-badge-reserved-fg: #F5F6F7;

  /* ── Quick-view trigger ── */
  --dp-qvt-bg: var(--dp-skin-accent);
  --dp-qvt-fg: var(--dp-skin-accent-ink);
  --dp-qvt-radius: 0px;
  --dp-qvt-fs: 12px;
  --dp-qvt-fw: 600;
  --dp-qvt-ls: 1.6px;
  --dp-qvt-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  --dp-qvt-bg-hover: var(--dp-accent-hover, #FFC71A);
  --dp-qvt-shadow-hover: 0 5px 0 rgba(0, 0, 0, 0.6);

  /* ── Stat cards ── */

  /* ── Story ── */
  --dp-story-media-bg: #04141d;
  --dp-story-media-border: 2px solid #21333d;
  --dp-story-media-radius: 3px;
  --dp-story-media-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  --dp-story-quote-bg: #04141d;
  --dp-story-quote-border: 2px solid #21333d;
  --dp-story-quote-border-left: 6px solid #41545f;
  --dp-story-quote-radius: 0px;
  --dp-story-quote-color: #f1f7fa;
  --dp-story-quote-fs: 19px;
  --dp-story-quote-lh: 1.5;
  --dp-story-quote-style: normal;
  --dp-story-quote-fw: 600;
  --dp-story-quote-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F2B705'%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: #e3e8ec;
  --dp-story-feat-fs: 15px;
  --dp-story-feat-fw: 600;
  --dp-story-feat-icon-bg: #04141d;
  --dp-story-feat-icon-radius: 0px;
  --dp-story-feat-icon-border: 2px solid #21333d;
  --dp-story-feat-icon-sw: 2;   /* 36 / 18px -> a 1.5px keyline at this size */

  /* ── Feature cards (Why Choose Us) ── */
  --dp-feature-bg: #12232d;
  --dp-feature-border: 2px solid #21333d;
  --dp-feature-radius: 2px;
  --dp-feature-transition: border-color .12s linear, transform .12s linear;
  --dp-feature-glow: linear-gradient(180deg, rgba(241, 247, 250, 0.04) 0%, transparent 38%);
  --dp-feature-icon-bg: #04141d;
  --dp-feature-icon-border: 2px solid #21333d;
  /* 3.2.0 repair — was #F2B705, the safety yellow. A colour emoji ignores
     `color`, so this token painted nothing until the emoji became an SVG; the
     conversion then printed 19 decorative feature marks and the 4 about-page
     ticks in the ACTION colour. #c8cdd0 is this skin's own --dp-text-soft, the
     cool rung one step under --dp-text. */
  --dp-feature-icon-color: #c8cdd0;
  --dp-feature-icon-radius: 0px;
  --dp-feature-icon-fs: 34px;
  --dp-feature-icon-sw: 1.0588;   /* 36 / 34px -> a 1.5px keyline at this size */
  --dp-feature-title-color: #f1f7fa;
  --dp-feature-title-fw: 600;
  --dp-feature-text-color: #c8cdd0;
  --dp-feature-text-lh: 1.65;

  /* ── Shipping ── */
  --dp-ship-sub2-color: #c8cdd0;
  --dp-ship-sub2-fs: 17px;
  --dp-ship-sub2-fs-sm: 16px;
  --dp-ship-sub2-lh: 1.7;
  --dp-ship-pill-bg: #04141d;
  --dp-ship-pill-border: 2px solid #21333d;
  --dp-ship-pill-color: #e3e8ec;
  --dp-ship-pill-radius: 0px;
  --dp-ship-pill-fs: 12px;
  --dp-ship-pill-fw: 600;
  --dp-ship-pill-transition: background .12s linear, border-color .12s linear;
  --dp-ship-pill-icon: #c8cdd0;
  --dp-ship-counter-color: #f1f7fa;
  --dp-ship-counter-fs: clamp(58px, 7.6vw, 88px);
  --dp-ship-counter-fs-md: 58px;
  --dp-ship-counter-fw: 700;
  --dp-ship-counter-ls: -1px;
  --dp-ship-counter-lbl-color: #88939a;
  --dp-ship-counter-lbl-fs: 14px;
  --dp-ship-counter-lbl-fw: 500;
  --dp-ship-step-bg: #04141d;
  --dp-ship-step-border: 2px solid #21333d;
  --dp-ship-step-radius: 2px;
  --dp-ship-step-transition: background .12s linear, border-color .12s linear, transform .12s linear;
  --dp-ship-step-icon-fs: 30px;
  /* 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 — 39px 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: 39px;
  --dp-ship-step-icon-sw: 1.2;   /* 36 / 30px -> a 1.50px keyline at this size */
  --dp-ship-step-title-color: #f1f7fa;
  --dp-ship-step-title-fs: 23px;
  --dp-ship-step-title-fw: 600;
  --dp-ship-step-text-color: #c8cdd0;
  --dp-ship-step-text-fs: 16px;
  --dp-ship-step-text-lh: 1.7;
  --dp-ship-note-color: #c8cdd0;

  /* ── Reviews ── */
  --dp-review-bg: #12232d;
  --dp-review-border: 2px solid #21333d;
  --dp-review-radius: 3px;
  --dp-review-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  --dp-review-transition: border-color .12s linear, box-shadow .12s linear, transform .12s linear;
  --dp-review-star-color: #c8cdd0;
  --dp-review-text-color: #c8cdd0;
  --dp-review-text-fs: 16px;
  --dp-review-text-lh: 1.65;
  --dp-review-text-style: normal;
  --dp-review-foot-border: 2px solid #21333d;
  --dp-review-av-bg: #172933;
  --dp-review-av-radius: 2px;
  --dp-review-av-fg: #f1f7fa;
  --dp-review-av-fw: 700;
  --dp-review-name-color: #f1f7fa;
  --dp-review-name-fw: 700;
  --dp-review-role-color: #88939a;

  /* ── Contact ── */
  --dp-contact-item-bg: #04141d;
  --dp-contact-item-border: 2px solid #21333d;
  --dp-contact-item-radius: 2px;
  --dp-contact-item-transition: background .12s linear, border-color .12s linear, transform .12s linear;
  --dp-contact-icon-bg: #081a23;
  --dp-contact-icon-border: 2px solid #21333d;
  --dp-contact-icon-radius: 0px;
  --dp-contact-icon-fs: 22px;
  --dp-contact-icon-sw: 1.6364;   /* 36 / 22px -> a 1.5px keyline at this size */
  --dp-contact-label-color: #c8cdd0;
  --dp-contact-label-fw: 700;
  --dp-contact-label-ls: 1.8px;
  --dp-contact-label-transform: uppercase;
  --dp-contact-value-color: #f1f7fa;
  --dp-contact-value-fs: 17px;
  --dp-contact-value-fw: 600;
  --dp-contact-value-hover: var(--dp-skin-accent-text);
  --dp-contact-trust-bg: #04141d;
  --dp-contact-trust-border: 2px solid #21333d;
  --dp-contact-trust-radius: 2px;
  --dp-contact-trust-title-color: #f1f7fa;
  --dp-contact-trust-title-fs: 22px;
  --dp-contact-trust-title-fw: 700;
  --dp-contact-trust-pill-bg: #081a23;
  --dp-contact-trust-pill-border: 2px solid #21333d;
  --dp-contact-trust-pill-color: #e3e8ec;
  --dp-contact-trust-pill-radius: 0px;
  --dp-contact-trust-pill-fs: 12px;
  --dp-contact-trust-pill-fw: 600;
  --dp-contact-trust-pill-ls: 0.6px;
  --dp-contact-trust-pill-transition: background .12s linear, transform .12s linear;
  --dp-contact-trust-pill-tick: #c8cdd0;
  --dp-contact-form-title-color: #f1f7fa;
  --dp-fs-contact-form-title: 31px;
  --dp-contact-form-sub-color: #c8cdd0;
  --dp-fs-contact-form-sub: 17px;

  /* ── Forms ── */
  --dp-form-bg: #12232d;
  --dp-form-border: 2px solid #21333d;
  --dp-form-radius: 2px;
  --dp-field-bg: #04141d;
  --dp-field-border: var(--dp-field-border-w) solid var(--dp-control-border);
  --dp-field-border-w: 2px;
  --dp-field-radius: 0px;
  --dp-field-color: #f1f7fa;
  --dp-field-transition: border-color .12s linear, background .12s linear;
  --dp-field-border-focus: var(--dp-skin-accent);
  --dp-field-bg-focus: #010f17;
  --dp-label-color: #88939a;
  /* 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. This skin has no class rule on that selector, so
     without this token its CF7 labels would print the wizard amber while
     its .dp-form-wrap labels printed --dp-label-color: two label colours
     on one skin. Declared at body scope so the alias resolves here.     */
  --dp-cf7-label-color: var(--dp-label-color);
  --dp-label-fw: 700;
  --dp-label-ls: 1.6px;
  --dp-submit-bg: var(--dp-skin-accent);
  --dp-submit-fg: var(--dp-skin-accent-ink);
  --dp-submit-radius: 0px;
  --dp-submit-shadow: inset 0 -3px 0 rgba(7, 24, 33, 0.28);

  /* ── Quick-view modal ── */
  --dp-qv-backdrop: rgba(0, 13, 22, 0.88);
  --dp-qv-backdrop-blur: none;
  --dp-qv-dialog-bg: #12232d;
  --dp-qv-dialog-border: 2px solid #21333d;
  --dp-qv-dialog-radius: 3px;
  --dp-qv-close-bg: #04141d;
  --dp-qv-close-radius: 0px;
  --dp-qv-close-fg: var(--dp-skin-accent-text);
  --dp-qv-nav-bg: #04141d;
  --dp-qv-nav-radius: 0px;
  --dp-qv-nav-fg: var(--dp-skin-accent-text);
  --dp-qv-title-color: #f1f7fa;
  --dp-qv-title-fw: 700;
  --dp-qv-price-color: #f1f7fa;
  --dp-qv-price-fs: 29px;
  --dp-qv-price-fw: 700;
  --dp-qv-desc-color: #c8cdd0;
  --dp-qv-note-color: #838e95;
  --dp-qv-counter-bg: rgba(4, 20, 29, 0.9);
  --dp-qv-counter-fg: #f1f7fa;
  --dp-qv-sheet-radius: 0px;

  /* ── CF7 submit overlay ── */
  --dp-overlay-bg: rgba(0, 13, 22, 0.86);
  --dp-overlay-blur: none;
  --dp-overlay-spinner-track: 4px solid #21333d;
  --dp-overlay-spinner-head: var(--dp-skin-accent);
  --dp-overlay-spinner-radius: 0px;
  --dp-overlay-text-color: #f1f7fa;
  --dp-overlay-text-fs: 18px;
  --dp-overlay-text-fw: 600;
  --dp-overlay-text-ls: 1.4px;
  --dp-overlay-title-color: #f1f7fa;
  --dp-overlay-title-fs: 23px;
  --dp-overlay-title-fs-sm: 20px;
  --dp-overlay-title-fw: 700;
  --dp-overlay-msg-color: #c8cdd0;
  --dp-overlay-msg-fs: 16px;
  --dp-overlay-btn-radius: 0px;
  --dp-overlay-btn-fw: 600;
  --dp-overlay-btn-call-bg: var(--dp-skin-accent);
  --dp-overlay-btn-call-fg: var(--dp-skin-accent-ink);
  --dp-overlay-btn-email-bg: #172933;
  --dp-overlay-btn-email-fg: var(--dp-skin-accent-text);
  --dp-overlay-close-color: #88939a;
  --dp-overlay-close-hover: #f1f7fa;
  --dp-overlay-close-fw: var(--dp-fw-semibold);
  --dp-overlay-title-ls: 0.6px;
  --dp-overlay-title-lh: 1.17;
  --dp-overlay-msg-lh: 1.41;
  --dp-overlay-btn-hover-filter: brightness(1.12);

  /* ── Footer ── */
  --dp-footer-bg: #04141d;
  --dp-footer-fg: #f1f7fa;
  --dp-footer-border-image: repeating-linear-gradient(90deg, #41545f 0 14px, transparent 14px 24px) 1;
  --dp-footer-divider: 1px solid #172933;
  --dp-footer-divider-sm: 1px solid #172933;
  --dp-footer-logo-opacity: 1;
  --dp-footer-logo-color: #f1f7fa;
  --dp-footer-logo-fs: 24px;
  --dp-footer-logo-fw: 700;
  --dp-footer-desc-color: #c8cdd0;
  --dp-footer-desc-lh: 1.75;
  --dp-footer-title-color: #f1f7fa;
  --dp-footer-title-fs: 14px;
  --dp-footer-title-fw: 600;
  --dp-footer-title-ls: 2px;
  --dp-footer-title-border: 3px solid #41545f;
  --dp-footer-link-color: #c8cdd0;
  --dp-footer-link-fs: 14px;
  --dp-footer-link-fw: 500;
  --dp-footer-link-hover: #f1f7fa;
  --dp-footer-link-arrow: "→";
  --dp-footer-link-arrow-color: var(--dp-skin-accent-text);
  --dp-footer-icon-bg: #081a23;
  --dp-footer-icon-border: 2px solid #21333d;
  --dp-footer-icon-radius: 0px;
  --dp-footer-icon-fill: #c8cdd0;
  --dp-footer-icon-bg-hover: #172933;
  --dp-footer-icon-border-hover: #41545f;
  --dp-footer-contact-color: #c8cdd0;
  --dp-footer-contact-lh: 1.45;
  --dp-footer-contact-fw: 500;
  --dp-footer-contact-hover: var(--dp-skin-accent-text);
  --dp-footer-bottom-border: 2px solid #21333d;
  --dp-footer-copy-color: #88939a;
  --dp-footer-copy-fs: 13px;
  --dp-footer-dot-radius: 0px;
  --dp-footer-dot-bg: #88939a;

  /* ── Reveal motion ── */
  --dp-text-xs: 11px;
  --dp-text-sm: 13px;
  --dp-text-base: 15px;
  --dp-text-md: 16px;
  --dp-text-lg: 18px;

  /* ── Button: dark white variants ── */
  --dp-btn-dark-bg: #04141d;
  --dp-btn-dark-fg: #f1f7fa;
  --dp-btn-dark-border: 2px solid #40535e;
  --dp-btn-dark-bg-hover: #172933;
  --dp-btn-dark-border-hover: var(--dp-skin-accent);

  /* ── Disabled controls ──
     The theme declares no :disabled treatment beyond two component-local
     opacities (.dp-inv-select, .dp-inv-page-btn), so a CF7 submit that
     Contact Form 7 disables for the length of a submission stayed fully
     live-looking: forcing disabled=true changed 0.0000 of the button's
     pixels, the only difference being a cursor nobody sees on touch.
     These two tokens carry the fallback treatment applied at the end of
     this file; the same pair belongs in style.css (base-patches/heavy.md). */
  --dp-disabled-opacity: 0.55;
  --dp-disabled-grayscale: 0.35;

  /* ── Bare CF7 fields (.wpcf7-form, outside .dp-form-wrap) ── */
  --dp-input-placeholder: #88939a;
  --dp-input-option-color: #e3e8ec;
  --dp-input-option-empty-color: #88939a;
  --dp-input-shadow-focus: 0 3px 0 rgba(0, 0, 0, 0.55);
  --dp-input-option-bg: #12232d;
  --dp-input-option-fg: #f1f7fa;
  --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='%2388939a' stroke-width='2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  --dp-submit-shadow-hover: inset 0 -3px 0 rgba(7, 24, 33, 0.52);
  --dp-error-bg: rgba(196, 69, 44, 0.1);
  --dp-error-color: #F0A897;
  --dp-error-border: 1px solid rgba(196, 69, 44, 0.2);
  --dp-spinner-border-color: color-mix(in srgb, var(--dp-skin-accent-ink) 32%, transparent) color-mix(in srgb, var(--dp-skin-accent-ink) 32%, transparent) color-mix(in srgb, var(--dp-skin-accent-ink) 32%, transparent) var(--dp-skin-accent-ink);

  /* ── Testimonial card ── */
  --dp-testimonial-border: 1px solid #172933;
  --dp-testimonial-radius: var(--dp-radius-lg);
  --dp-testimonial-text-color: #e3e8ec;
  --dp-testimonial-foot-border: 1px solid #172933;
  --dp-testimonial-av-radius: 2px;
  --dp-testimonial-name-color: #f1f7fa;
  --dp-testimonial-role-color: #88939a;

  /* ── FAQ accordion (.dp-faq-q .dp-faq-a markup) ── */

  /* ── Quick view: parts base.css does not cover ── */
  --dp-qv-close-border: 1px solid #2c3e49;
  --dp-qv-close-bg-hover: #2c3e49;
  --dp-qv-gallery-bg: #04141d;
  --dp-qv-skeleton-bg: linear-gradient(90deg, #12232d 25%, #21333d 50%, #12232d 75%);
  --dp-qv-badge-radius: var(--dp-radius-full);
  --dp-qv-counter-radius: var(--dp-radius-full);
  --dp-qv-nav-border: 1px solid #2c3e49;
  --dp-qv-nav-bg-hover: rgba(4, 20, 29, 0.82);
  --dp-qv-thumbs-bg: #04141d;
  --dp-qv-thumb-radius: 2px;
  --dp-qv-scrollbar-color: #40535e transparent;
  --dp-qv-spec-bg: #172933;
  --dp-qv-spec-border: 1px solid #21333d;
  --dp-qv-spec-radius: var(--dp-radius-full);
  --dp-qv-spec-color: #c8cdd0;

  /* ── 3.3.1 QUICK VIEW, HARD AND INDUSTRIAL ──────────────────────────────
     THE SURFACE STAYS FLAT AND THAT IS THE POINT. #12232d is --dp-card-bg
     exactly; on this skin a raised thing is a plate, not a gradient, so the
     dialog is given the plate and the elevation is done with the edge and the
     shadow instead. Restated here rather than left implicit so the three
     skins read the same way in this block. */
  --dp-qv-dialog-bg: #12232d;
  /* ELEVATION, THE HEAVY WAY. --dp-shadow on this skin is `0 3px 0` — a hard
     offset with NO BLUR, a plate sitting proud of what is under it. A modal
     gets the same shape at modal scale, plus a hairline ring so the plate has
     an edge where it overhangs a photograph. Nothing here is soft, because
     nothing else on this skin is. */
  --dp-qv-dialog-shadow:
      0 10px 0 rgba(0, 0, 0, 0.62),
      0 0 0 1px rgba(0, 0, 0, 0.55);
  /* THE TOP EDGE, in this skin's own hairline — the 2-on-7 dashed rule that
     runs under its section headings. The other two skins draw a continuous
     line here; heavy's rule is stencilled, and that is its signature, so it is
     the one that belongs on the top edge of its panel. */
  --dp-qv-dialog-edge: repeating-linear-gradient(90deg, #88939a 0 2px, transparent 2px 9px);
  /* NO GLASS, ANYWHERE ON THIS SKIN. --dp-header-blur is `none` here and
     --dp-mnav-blur is `none`: heavy has never had a blurred surface and is not
     getting its first one in a modal. --dp-qv-backdrop-blur is already `none`
     for the same reason. */
  --dp-qv-dialog-blur: none;
  --dp-qv-nav-blur: none;
  /* MOTION. --dp-transition is 0.12s LINEAR on this skin and that is its
     character — no ease-in, no overshoot, it moves and it stops. 120ms on a
     surface that covers the window is a flicker rather than a transition, so
     the duration goes to the 300ms the theme asks for while the CURVE stays
     linear. That is the industrial reading of "eased 300ms": the time is the
     theme's, the shape is the skin's. */
  --dp-qv-motion: 0.3s linear;
  --dp-qv-motion-ms: 300;
  /* Decoration rung: the same dim ink as --dp-qv-desc-color, one step under
     the pill's --dp-qv-spec-color. The amber is for the price and the buttons,
     which is where something happens. */
  --dp-qv-spec-ic-color: #88939a;
  --dp-qv-spec-gap: 7px;

  /* ── Inventory trust strip ── */
  --dp-trust-bg: #0d1f29;
  --dp-trust-border: 1px solid #172933;
  --dp-trust-pill-color: #abb7be;

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

  /* ── CTA banner ── */
  --dp-cta-banner-radius: var(--dp-radius-lg);
  --dp-cta-banner-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  --dp-cta-banner-btn-bg: #071821;
  --dp-cta-banner-btn-radius: var(--dp-radius-full);
  --dp-cta-banner-btn-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  --dp-cta-banner-btn-shadow-hover: 0 5px 0 rgba(0, 0, 0, 0.55);
  --dp-cta-banner-btn-ghost-shadow: inset 0 -3px 0 rgba(7, 24, 33, 0.28);
  --dp-cta-banner-btn-ghost-bg-hover: rgba(7, 24, 33, 0.16);

  /* ── Step card ── */
  --dp-step-border: 1px solid #172933;
  --dp-step-radius: var(--dp-radius-md);
  --dp-step-title-color: #f1f7fa;
  --dp-step-text-color: #c8cdd0;
  --dp-step-list-color: #c8cdd0;
  --dp-step-num-radius: 2px;

  /* ── FAQ item (.dp-faq-item__q markup) ── */
  --dp-faq-item-border: 1px solid #21333d;
  --dp-faq-item-radius: 2px;
  --dp-faq-q-color: #f1f7fa;
  --dp-faq-a-color: #c8cdd0;

  /* ── Form wrapper chrome ── */
  --dp-form-title-color: #f1f7fa;
  --dp-form-sub-color: #c8cdd0;
  --dp-form-note-color: #c8cdd0;
  --dp-form-response-radius: var(--dp-radius-input);
  --dp-form-invalid-color: #E8836F;

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

  /* ── merged from tokens-chrome.css — front-page.php header.php footer.php (chrome) ── */
  --dp-home-hero-sub-color: #e3e8ec;
  --dp-home-hero-pills-color: #c8cdd0;
  --dp-home-hero-pill-bg: #172933;
  --dp-home-hero-pill-border: 1px solid #21333d;
  --dp-overlay-close-bg: transparent;
  --dp-footer-logo-opacity-hover: 1;
  --dp-footer-bottom-link-color: #88939a;
  --dp-footer-bottom-link-hover: var(--dp-accent);
  --dp-page-wrapper-bg: #0d1f29;
  --dp-page-wrapper-border: 1px solid #172933;
  --dp-page-subtitle-color: #c8cdd0;
  --dp-page-body-color: #c8cdd0;
  --dp-page-card-border: 1px solid #172933;
  --dp-page-card-border-hover: color-mix(in srgb, #f1f7fa 11%, transparent);
  --dp-page-card-title-color: #f1f7fa;
  --dp-page-card-text-color: #c8cdd0;
  --dp-page-card-icon-bg: color-mix(in srgb, #f1f7fa 4%, transparent);
  --dp-page-card-icon-border: 1px solid color-mix(in srgb, #f1f7fa 8%, transparent);
  --dp-page-intro-color: #c8cdd0;
  --dp-page-ci-icon-bg: color-mix(in srgb, #f1f7fa 4%, transparent);
  --dp-page-ci-label-color: #88939a;
  --dp-page-ci-value-color: #f1f7fa;
  --dp-page-trust-item-color: #c8cdd0;
  --dp-abt-check-bg: linear-gradient(180deg,var(--dp-bg-card),var(--dp-bg-card-2));
  --dp-abt-check-icon-bg: color-mix(in srgb, #f1f7fa 7%, transparent);
  --dp-abt-check-icon-border: 1px solid color-mix(in srgb, #f1f7fa 14%, transparent);
  --dp-abt-check-desc-color: #c8cdd0;
  --dp-abt-check-meta-color: #c8cdd0;
  --dp-abt-timeline-line-bg: color-mix(in srgb, #f1f7fa 10%, transparent);
  --dp-abt-tl-year-radius: 2px;
  --dp-abt-tl-dot-radius: 0px;
  --dp-abt-tl-badge-bg: color-mix(in srgb, #f1f7fa 6%, transparent);
  --dp-abt-tl-badge-border: 1px solid color-mix(in srgb, #f1f7fa 12%, transparent);
  --dp-abt-tl-text-color: #c8cdd0;
  --dp-abt-val-icon-border: 1px solid color-mix(in srgb, #f1f7fa 9%, transparent);
  --dp-abt-val-text-color: #c8cdd0;
  --dp-shp-line-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  --dp-shp-trailer-list-color: #c8cdd0;
  --dp-shp-trailer-price-border: 1px solid #21333d;
  --dp-shp-trailer-price-strong-color: #f1f7fa;
  --dp-shp-tbl-head-bg: color-mix(in srgb, #f1f7fa 4%, transparent);
  /* 1.4.11 — the rule under the column heads separates the heads from the
     data. Since R30 it is steel, not yellow; a 28% white wash measured
     2.43:1 on the panel. #7b868d is the breadcrumb separator's steel and
     clears 3:1 on every ground this table paints, a step brighter than the
     row rules below so the head still reads as the head. */
  --dp-shp-tbl-head-border: 1px solid #7b868d;
  --dp-shp-tbl-td-color: #c8cdd0;
  /* 1.4.11 — the row rules. #172933 measured 1.13:1 on the panel #0d1f29
     and 1.19:1 on the ground: the rows ran together. #6a757b is 3.57:1 and
     3.76:1 and stays a hairline, so the table gains a rule, not a grid. */
  --dp-shp-tbl-td-border: 1px solid #6a757b;
  --dp-shp-tbl-val-color: #f1f7fa;
  --dp-shp-tbl-feat-bg: color-mix(in srgb, #f1f7fa 3%, transparent);
  /* 1.4.11 — the featured row's own rules. Since R30 the row's tint is a 3%
     white wash, not yellow, and a 28% white rule measured 2.42:1 on it. The
     row rules' own #6a757b is above 3:1 there too. */
  --dp-shp-tbl-feat-border-color: #6a757b;
  --dp-shp-tbl-note-color: #c8cdd0;
  --dp-shp-step-text-color: #c8cdd0;
  --dp-shp-step-num-border: 2px solid color-mix(in srgb, #f1f7fa 15%, transparent);
  --dp-shp-trust-badge-bg: #172933;
  --dp-shp-trust-badge-border: 1px solid color-mix(in srgb, #f1f7fa 11%, transparent);

  /* ── merged from tokens-listing.css — single-listing.php archive-listing.php (listing) ── */
  --dp-error: #C4452C;
  --dp-sl-back-color: #98a3aa;
  --dp-sl-muted: #c8cdd0;
  --dp-sl-panel-border: 1px solid #172933;
  --dp-sl-box-divider: 1px solid #172933;
  --dp-sl-srow-divider: 1px solid #172933;
  --dp-sl-sidebar-border: 1px solid #21333d;
  --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: #172933;
  --dp-sl-ghost-bg-hover: #21333d;
  --dp-sl-ghost-border: 1px solid #21333d;
  --dp-sl-ghost-border-sm: 1px solid #21333d;
  --dp-sl-share-color: #abb7be;
  --dp-sl-share-border-hover: var(--dp-skin-accent);
  --dp-sl-share-sm-color: #98a3aa;
  --dp-sl-share-sm-border-hover: var(--dp-skin-accent);
  --dp-sl-share-icon-opacity: 0.7;
  --dp-sl-gal-btn-radius: 2px;
  --dp-sl-gal-btn-bg: rgba(4, 20, 29, 0.82);
  --dp-sl-gal-btn-border: 2px solid #40535e;
  --dp-sl-gal-btn-bg-hover: var(--dp-skin-accent);
  --dp-sl-cnt-bg: rgba(4, 20, 29, 0.86);
  --dp-sl-no-img-color: #79848b;
  --dp-sl-thumb-radius: 2px;
  --dp-sl-thumb-border: 2px solid transparent;
  --dp-sl-desc-color: #c8cdd0;
  /* 3.8.16: a neutral hairline, not an accent tint — see the block at the
     foot of this file. */
  --dp-sl-specs-toggle-bg: transparent;
  --dp-sl-specs-toggle-border: 1px solid color-mix(in srgb, var(--dp-text) 22%, transparent);
  --dp-sl-specs-toggle-bg-hover: color-mix(in srgb, var(--dp-text) 7%, transparent);
  --dp-sl-specs-toggle-border-hover: 1px solid color-mix(in srgb, var(--dp-text) 38%, transparent);
  --dp-sl-reserve-bg: var(--dp-buynow-bg, var(--dp-skin-accent));
  --dp-rv-panel-border: #747f86;
  --dp-sl-reserve-border: 0;
  /* An inset lip, not an outer shadow: the arrow-end clip-path discards
     anything drawn outside the plate. On a stamped tag a pressed edge is
     the honest reading of depth anyway. */
  /* A wash down the top 58% and a 1px light line on the very edge: formed
     metal, lit from above. Ink is #071821, so a white wash only raises contrast. */
  --dp-sl-reserve-surface: var(--dp-surface-wash, linear-gradient(180deg, rgba(250, 255, 255,0.13), rgba(250, 255, 255,0) 58%));
  --dp-sl-reserve-shadow: inset 0 1px 0 rgba(250, 255, 255,0.22), inset 0 -3px 0 rgba(7, 24, 33,0.26);
  /* The wipe tints AWAY from this skin's ink, so contrast rises as it
     passes. --dp-sheen carries the dealer-aware version when a colour
     has been chosen; the literal is the right direction for this skin. */
  /* NOT var(--dp-sheen): that token is derived from the ACCENT's ink, and
     this skin paints the plate from its own literal, whose ink runs the
     other way. Deriving the wipe from the wrong colour measured 9.29:1
     dropping to 4.54:1 as it passed. The skin knows its own ink; it
     states its own wipe. */
  --dp-sl-reserve-shine: linear-gradient(90deg, transparent, rgba(250, 255, 255,0.26), transparent);

  --dp-sl-reserve-shadow-hover: inset 0 1px 0 rgba(250, 255, 255,0.28), inset 0 -4px 0 rgba(7, 24, 33,0.34);
  --dp-sl-buynow-save-color: var(--dp-buynow-fg, var(--dp-skin-accent-ink));
  --dp-sl-buynow-save-ls: 0.1px;
  --dp-sl-reserve-transition: background-color .15s linear, box-shadow .15s linear;
  --dp-sl-reserve-shadow-active: inset 0 0 0 2px rgba(7, 24, 33,.42);
  --dp-sl-reserve-bg-active: var(--dp-buynow-bg-active, var(--dp-accent-dark, #D49C04));
  --dp-sl-reserve-bg-hover: var(--dp-buynow-bg-hover, var(--dp-accent-hover, #FFC61A));
  --dp-sl-reserve-radius: 0;
  --dp-sl-noobl-color: #c8cdd0;
  --dp-sl-reserve-sub-color: #c8cdd0;
  --dp-sl-inq-icon-bg: color-mix(in srgb, #f1f7fa 6%, transparent);
  --dp-sl-inq-icon-border: 1px solid color-mix(in srgb, #f1f7fa 11%, transparent);
  --dp-sl-noform-border: 1px dashed #21333d;
  --dp-sl-noform-color: #c8cdd0;
  --dp-sl-inq-hours-color-hover: #c8cdd0;
  --dp-sl-lb-overlay-bg: rgba(4, 20, 29, 0.92);
  --dp-sl-lb-overlay-blur: none;
  --dp-sl-lb-btn-radius: 2px;
  --dp-sl-lb-close-bg: #21333d;
  --dp-sl-lb-close-border: 1px solid #2c3e49;
  --dp-sl-lb-close-bg-hover: #2c3e49;
  --dp-sl-lb-nav-bg: #172933;
  --dp-sl-lb-nav-border: 1px solid #21333d;
  --dp-sl-lb-nav-bg-hover: var(--dp-skin-accent);
  --dp-sl-lb-nav-border-hover: var(--dp-skin-accent);
  --dp-sl-lb-counter-bg: rgba(4, 20, 29, 0.5);
  --dp-sl-lb-counter-color: #98a3aa;
  --dp-sl-notice-text-color: #c8cdd0;
  --dp-sl-sold-overlay-bg: rgba(16, 18, 21, 0.75);
  --dp-sl-sold-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  --dp-sl-sold-notice-bg: rgba(196, 69, 44, 0.08);
  --dp-sl-sold-notice-border: 1px solid rgba(196, 69, 44, 0.25);
  --dp-sl-reserved-overlay-bg: rgba(16, 18, 21, 0.7);
  --dp-sl-reserved-bg: #5B6675;
  --dp-sl-reserved-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  --dp-sl-reserved-notice-bg: rgba(110, 106, 140, 0.1);
  --dp-sl-reserved-notice-border: 1px solid rgba(110, 106, 140, 0.35);
  --dp-sl-reserved-notice-color: #A3AEBD;
  --dp-sl-pending-overlay-bg: rgba(16, 18, 21, 0.45);
  --dp-sl-pending-bg: #C7CDD3;
  --dp-sl-pending-fg: #14161A;
  --dp-sl-pending-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  --dp-sl-pending-notice-bg: rgba(245, 246, 247, 0.06);
  --dp-sl-pending-notice-border: 1px solid rgba(245, 246, 247, 0.30);
  --dp-sl-pending-notice-color: #F5F6F7;
  --dp-inv-features-bg: linear-gradient(180deg,var(--dp-bg) 0%,var(--dp-bg) 100%);
  --dp-inv-features-divider: 1px solid #172933;
  --dp-inv-feat-border-hover: color-mix(in srgb, #f1f7fa 10%, transparent);
  --dp-inv-feat-shadow-hover: 0 5px 0 rgba(0, 0, 0, 0.62);
  --dp-inv-feat-num-border: 1px solid color-mix(in srgb, #f1f7fa 10%, transparent);
  --dp-inv-feat-text-color: #c8cdd0;
  --dp-inv-search-icon-color: #88939a;
  --dp-inv-count-color: #88939a;
  --dp-inv-skeleton-radius: 0px;
  --dp-inv-skeleton-bg: linear-gradient(90deg,#12232d 0%,#21333d 50%,#12232d 100%);
  --dp-inv-card-scrim: rgba(4, 20, 29, 0);
  --dp-inv-card-scrim-hover: rgba(4, 20, 29, 0.5);
  --dp-inv-photocount-bg: rgba(4, 20, 29, 0.62);
  --dp-inspected-bg: rgba(4, 20, 29, 0.82);
  --dp-inspected-fg: #faffff;
  --dp-inspected-radius: 0px;
  --dp-inspected-fw: 700;
  --dp-inspected-ls: 1.6px;
  --dp-inspected-transform: uppercase;
  --dp-inv-photocount-blur: none;
  /* 1.4.11 — steel #40535e measured 2.01:1 on the card #12232d. #6a757b is
     3.41:1 there, against 5.12:1 for the values it separates (--dp-text-muted).
     Same steel
     the ghost-button rule moved to, so the two marks stay one family. */
  --dp-inv-card-dot: #808b92;
  --dp-inv-empty-color: #c8cdd0;
  --dp-inv-page-btn-border: 1px solid #21333d;
  --dp-inv-page-btn-bg: #172933;
  --dp-inv-page-btn-color: #abb7be;
  --dp-inv-page-btn-bg-hover: color-mix(in srgb,var(--dp-accent) 8%,transparent);
  --dp-inv-page-btn-disabled-opacity: 0.55;
  --dp-404-sub-color: #c8cdd0;
  --dp-404-or-color: #88939a;
  --dp-404-phone-opacity-hover: 0.8;
  --dp-404-links-border-top: 1px solid #172933;
  --dp-404-links-title-color: #88939a;
  --dp-404-link-border: 1px solid #172933;
  --dp-404-link-color: #abb7be;
  --dp-404-link-border-hover: color-mix(in srgb, var(--dp-accent) 30%, transparent);
  --dp-404-link-bg-hover: color-mix(in srgb, var(--dp-accent) 6%, transparent);
  --dp-legal-updated-color: #88939a;
  --dp-legal-body-bg: #0d1f29;
  --dp-legal-body-border: 1px solid #172933;
  --dp-legal-divider: 1px solid #172933;
  --dp-legal-text-color: #c8cdd0;
  --dp-ty-panel-bg: #0d1f29;
  --dp-ty-panel-border: 1px solid #172933;
  --dp-ty-sub-color: #c8cdd0;
  --dp-ty-countdown-border: 1px solid #172933;
  --dp-ty-countdown-label-color: #88939a;
  --dp-ty-countdown-unit-color: #88939a;
  --dp-ty-countdown-sep-color: #6d787e;
  --dp-ty-countdown-bar-bg: #172933;
  --dp-ty-countdown-fill-bg: #88939a;
  --dp-ty-feature-text-color: #c8cdd0;
  --dp-ty-contact-note-color: #c8cdd0;
  --dp-ty-contact-item-color: #c8cdd0;
  --dp-ty-trust-bg: color-mix(in srgb, #f1f7fa 4%, transparent);
  --dp-ty-trust-border: 1px solid color-mix(in srgb, #f1f7fa 10%, transparent);
  --dp-ty-trust-color: #e3e8ec;
  --dp-ty-sec-head-sub-color: #c8cdd0;
  --dp-btt-panel-bg: #04141d;
  --dp-btt-panel-border: 2px solid var(--dp-skin-accent);
  --dp-btt-panel-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  --dp-btt-panel-blur: none;
  --dp-btt-panel-bg-hover: #172933;
  --dp-btt-panel-border-hover: var(--dp-accent-hover, #FFC71A);
  --dp-btt-panel-shadow-hover: 0 5px 0 rgba(0, 0, 0, 0.62);
  --dp-bc-color: #88939a;
  --dp-bc-link-color: #98a3aa;
  /* 1.4.3 — the crumb separator divides one crumb from the next, so 3:1 is
     the threshold it has to clear as a mark; but it is painted as a text
     glyph, so it is taken to 4.5:1 and the stricter reading is satisfied too.
     #40535e measured 2.21:1 on the ground #081a23. #7b868d is 4.76:1 there
     and still sits under the current crumb #88939a (5.65:1) and the crumb
     link #98a3aa (6.89:1), so the separator stays the quietest mark in the
     trail — subordinate to both of the things it divides. */
  --dp-bc-sep-color: #7b868d;

  /* ── merged from tokens-transaction.css — page-reserve.php (transaction) ── */
  /* 1.4.11 — the calculator's live inputs. #2c3e49 measured 1.52:1 on the
     transaction panel #0d1f29. Same raised steel as every other field. */
  /* (The calculator table these notes described was retired with the
     transaction page; its rules now live only in the shipping table above.) */
  --dp-rv-subtitle-color: #c8cdd0;
  --dp-rv-sub-color: #c8cdd0;
  --dp-rv-step-num-radius: 2px;
  --dp-rv-step-num-bg: #04141d;
  --dp-rv-step-num-color: #88939a;
  --dp-rv-step-lbl-color: #88939a;
  --dp-rv-step-line-bg: #21333d;
  --dp-rv-card-note-color: #c8cdd0;
  --dp-rv-card-img-bg: #04141d;
  --dp-rv-fallback-border: 1px solid #21333d;
  --dp-rv-fallback-color: #c8cdd0;
  --dp-rv-trust-pill-border: 1px solid #21333d;
  --dp-rv-trust-pill-color: #c8cdd0;
  --dp-rv-form-border: 1px solid #21333d;
  --dp-rv-form-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  --dp-rv-form-head-border: 1px solid #172933;
  --dp-rv-form-icon-radius: 0px;
  --dp-rv-form-icon-shadow: inset 0 -3px 0 rgba(7, 24, 33, 0.28);
  --dp-rv-form-sub-color: #c8cdd0;
  --dp-rv-form-h3-dot-radius: 0px;
  /* 1.4.11 — the ID-upload dropzone. #2c3e49 measured 1.45:1 on the form
     panel; the dashed rule is the whole affordance. */
  --dp-rv-file-color: #98a3aa;
  /* 1.4.11 — the dropzone's hover border is the fields' own hover steel
     (R31), so the upload box hovers exactly like every other field. */
  --dp-rv-submit-bg: var(--dp-skin-accent);
  --dp-rv-submit-shadow: inset 0 -3px 0 rgba(7, 24, 33, 0.28);
  --dp-rv-submit-shadow-hover: inset 0 -3px 0 rgba(7, 24, 33, 0.52);
  --dp-rv-faq-bg-hover: color-mix(in srgb, #f1f7fa 3%, var(--dp-bg-card));
  --dp-rv-faq-border-open: color-mix(in srgb, #f1f7fa 18%, transparent);
  --dp-rv-faq-bg-open: color-mix(in srgb, #f1f7fa 4%, var(--dp-bg-card));
  --dp-reserve: #E8791F;
  --dp-reserve-dark: #C25E14;
  --dp-reserve-fg: var(--dp-skin-accent-ink);
  --dp-fw-light: 300;
  --dp-cf7-label-fw: var(--dp-fw-extrabold);
  --dp-cf7-label-ls: 1.4px;
  --dp-cf7-label-transform: uppercase;
  --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. */
  /* 3.8.19: one button voice — submit and banner read the .dp-btn tokens */
  --dp-submit-fs: var(--dp-btn-fs);
  --dp-submit-fw: var(--dp-btn-fw);
  --dp-submit-transform: uppercase;
  --dp-submit-ls: var(--dp-btn-ls);
  --dp-cf7-response-fw: var(--dp-fw-semibold);
  --dp-testimonial-stars-ls: 3px;
  --dp-testimonial-text-lh: 1.6;
  --dp-testimonial-av-fw: var(--dp-fw-extrabold);
  --dp-testimonial-name-fw: var(--dp-fw-extrabold);
  --dp-qv-close-modal-fs: 23px;
  --dp-qv-close-lh: 1;
  --dp-qv-badge-fw: var(--dp-fw-extrabold);
  --dp-qv-badge-transform: uppercase;
  --dp-qv-badge-ls: 0.108em;
  --dp-qv-counter-fs: 13px;
  --dp-qv-counter-fw: var(--dp-fw-bold);
  --dp-qv-counter-ls: 0.7px;
  --dp-qv-nav-fs: 23px;
  --dp-qv-title-modal-fs: 23px;
  --dp-qv-title-lh: 1.2;
  --dp-qv-price-ls: 0.3px;
  --dp-qv-spec-fw: var(--dp-fw-bold);
  --dp-qv-desc-modal-lh: 1.65;
  --dp-trust-pill-fw: var(--dp-fw-bold);
  --dp-trust-pill-ls: 0.3px;
  --dp-heading-title-fs: clamp(31px,4.4vw,53px);
  --dp-heading-title-fw: var(--dp-fw-black);
  --dp-heading-title-lh: 1.15;
  --dp-heading-title-ls: 0.4px;
  --dp-heading-sub-fs: clamp(18px,1.98vw,20px);
  --dp-heading-sub-lh: 1.6;
  --dp-cta-banner-title-fs: clamp(26px,3.3vw,40px);
  --dp-cta-banner-title-fw: var(--dp-fw-black);
  --dp-cta-banner-title-lh: 1.15;
  --dp-cta-banner-sub-lh: 1.5;
  /* 3.8.19: one button voice — submit and banner read the .dp-btn tokens */
  --dp-cta-banner-btn-fs: var(--dp-btn-fs);
  --dp-cta-banner-btn-fw: var(--dp-btn-fw);
  --dp-feature-icon-lh: 1;
  --dp-step-title-fw: var(--dp-fw-extrabold);
  --dp-step-text-lh: 1.55;
  --dp-step-list-lh: 1.55;
  --dp-step-list-tick-fw: var(--dp-fw-extrabold);
  --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-fw: var(--dp-fw-light);
  --dp-faq-a-lh: 1.65;
  --dp-form-title-fs: var(--dp-text-lg);
  --dp-form-title-fw: var(--dp-fw-extrabold);
  --dp-hero-note-ls: 0.4px;
  --dp-hero-title-ls-sm: 0.4px;
  --dp-overlay-msg-fw: var(--dp-fw-medium);
  --dp-overlay-btn-lh: 1;
  --dp-mnav-call-fw: var(--dp-fw-extrabold);
  --dp-statsband-num-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: 16px;
  --dp-home-hero-pills-fw: var(--dp-fw-semibold);
  --dp-home-hero-pills-fs-sm: 13px;
  --dp-sl-share-sm-fw: var(--dp-fw-bold);
  --dp-sl-stitle-fs: 29px;
  --dp-sl-stitle-fw: var(--dp-fw-black);
  --dp-sl-stitle-lh: 1.15;
  --dp-sl-sprice-fs: 37px;
  --dp-sl-sprice-fw: var(--dp-fw-black);
  --dp-sl-sprice-ls: 0.4px;
  --dp-sl-gal-btn-fs: 25px;
  --dp-sl-cnt-fw: var(--dp-fw-semibold);
  --dp-sl-trust-title-fw: var(--dp-fw-bold);
  --dp-sl-tab-fw: var(--dp-fw-extrabold);
  --dp-sl-desc-lh: 1.74;
  --dp-sl-specs-toggle-fw: var(--dp-fw-extrabold);
  --dp-sl-specs-toggle-ls: 1.4px;
  --dp-sl-sval-fw: var(--dp-fw-bold);
  --dp-sl-reserve-main-fs: 18px;
  --dp-sl-buynow-save-fs: 16px;
  --dp-sl-buynow-save-fw: 600;
  --dp-sl-buynow-save-lh: 1.35;
  --dp-sl-reserve-main-fw: 700;   /* D25 (3.8.23): 800 was the only Barlow 800 on the site — one font file for one label */
  --dp-sl-reserve-main-lh: 1.2;
  --dp-sl-reserve-main-ls: 0.2px;
  --dp-sl-inq-title-fw: var(--dp-fw-black);
  --dp-sl-inq-title-lh: 1.2;
  --dp-sl-lb-close-fs: 21px;
  --dp-sl-lb-nav-fs: 30px;
  --dp-sl-lb-counter-fw: var(--dp-fw-semibold);
  --dp-sl-lb-nav-fs-sm: 23px;
  --dp-sl-sold-fs: 30px;
  --dp-sl-sold-fw: var(--dp-fw-black);
  --dp-sl-sold-ls: 6px;
  --dp-sl-sold-transform: uppercase;
  --dp-sl-sold-notice-title-fs: 16px;
  --dp-sl-reserved-fs: 28px;
  --dp-sl-reserved-fw: var(--dp-fw-black);
  --dp-sl-reserved-ls: 5px;
  --dp-sl-reserved-transform: uppercase;
  --dp-sl-pending-fs: 28px;
  --dp-sl-pending-fw: var(--dp-fw-black);
  --dp-sl-pending-ls: 5px;
  --dp-sl-pending-transform: uppercase;
  --dp-sl-notice-title-fw: var(--dp-fw-extrabold);
  --dp-sl-notice-title-ls: 0.4px;
  --dp-sl-notice-text-fs: 13px;
  --dp-sl-notice-text-lh: 1.41;
  --dp-sl-related-title-fw: var(--dp-fw-extrabold);
  --dp-sl-share-fw: var(--dp-fw-bold);
  --dp-sl-share-ls: 0.3px;
  --dp-sl-share-confirm-fw: var(--dp-fw-bold);
  --dp-inv-feat-num-fw: var(--dp-fw-black);
  --dp-inv-feat-title-fw: var(--dp-fw-extrabold);
  --dp-inv-feat-text-lh: 1.69;
  --dp-inv-select-fw: var(--dp-fw-semibold);
  --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.4px;
  --dp-inv-card-title-fs: 24px;
  --dp-inv-card-title-ls: 0.3px;
  --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.3px;
  --dp-inv-card-price-fs-sm: 24px;
  /* 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: 63px 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: 63px;
  --dp-inv-empty-icon-sw: 0.75;   /* 36 / 48px -> a 1.50px keyline at this size */
  --dp-inv-empty-title-fs: 26px;
  --dp-inv-empty-title-fw: var(--dp-fw-extrabold);
  --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.4px;
  --dp-page-title-lh: 1.05;
  --dp-page-subtitle-lh: 1.69;
  --dp-page-body-lh: 1.74;
  --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-fw: var(--dp-fw-extrabold);
  --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.7px;
  --dp-page-ci-label-transform: var(--dp-contact-label-transform);
  --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-abt-quote-fw: var(--dp-fw-extrabold);
  --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-lh: 1.5;
  --dp-abt-check-meta-fs: var(--dp-text-sm);
  --dp-abt-check-meta-lh: 1.5;
  --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-lh: 1.65;
  --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-fw: var(--dp-fw-extrabold);
  --dp-abt-val-text-fs: var(--dp-text-base);
  --dp-abt-val-text-lh: 1.65;
  --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: 1.4px;
  --dp-shp-trailer-price-strong-fs: var(--dp-text-base);
  --dp-shp-tbl-head-fw: var(--dp-fw-extrabold);
  --dp-shp-tbl-head-ls: 2px;
  --dp-shp-tbl-head-transform: uppercase;
  --dp-shp-tbl-val-fw: var(--dp-fw-bold);
  --dp-shp-tbl-tag-fw: var(--dp-fw-extrabold);
  --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-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.4vw,46px);
  --dp-ty-title-fw: var(--dp-fw-black);
  --dp-ty-title-ls: 0.4px;
  --dp-ty-sub-fs: var(--dp-text-md);
  --dp-ty-sub-lh: 1.69;
  --dp-ty-countdown-label-fw: var(--dp-fw-bold);
  --dp-ty-countdown-label-ls: 1.4px;
  --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-fw: var(--dp-fw-semibold);
  --dp-ty-countdown-unit-transform: uppercase;
  --dp-ty-countdown-unit-ls: 1.4px;
  --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-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-fw: var(--dp-fw-semibold);
  --dp-ty-trust-fw: var(--dp-fw-bold);
  --dp-ty-trust-ls: 0.3px;
  --dp-ty-sec-head-title-fw: var(--dp-fw-black);
  --dp-404-title-fs: clamp(40px,5.5vw,62px);
  --dp-404-title-fw: var(--dp-fw-black);
  --dp-404-title-ls: 0.4px;
  --dp-404-sub-fs: 18px;
  --dp-404-sub-lh: 1.69;
  --dp-404-or-fs: var(--dp-text-sm);
  --dp-404-phone-fw: var(--dp-fw-black);
  --dp-404-links-title-fw: var(--dp-fw-extrabold);
  --dp-404-links-title-ls: 1.4px;
  --dp-404-links-title-transform: uppercase;
  --dp-404-link-fw: var(--dp-fw-semibold);
  --dp-legal-title-fs: clamp(35px,4.4vw,53px);
  --dp-legal-title-fw: var(--dp-fw-black);
  --dp-legal-title-ls: 0.4px;
  --dp-legal-updated-fs: var(--dp-text-sm);
  --dp-legal-h2-fw: var(--dp-fw-extrabold);
  --dp-legal-text-lh: 1.74;
  --dp-btt-label-fw: var(--dp-fw-extrabold);
  --dp-btt-label-ls: 1.6px;
  --dp-btt-label-lh: 1;
  --dp-bc-fs: var(--dp-text-sm);
  --dp-rv-heading-fw: var(--dp-fw-black);
  --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.3px;
  --dp-rv-sub-fs: 18px;
  --dp-rv-card-title-fs: 23px;
  --dp-rv-card-title-fw: var(--dp-fw-extrabold);
  --dp-rv-card-title-lh: 1.22;
  --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.3px;
  --dp-rv-trust-pill-icon-lh: 1;
  --dp-rv-form-title-fw: var(--dp-fw-black);
  --dp-rv-form-title-ls: 0.3px;
  --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.3px;
  --dp-rv-file-btn-fw: var(--dp-fw-bold);
  --dp-rv-card-final-fs-sm: 29px;
  --dp-rv-step-num-fs-sm: 12px;
  --dp-rv-step-lbl-fw-sm: var(--dp-fw-bold);
  --dp-rv-step-lbl-lh-sm: 1.2;
  --dp-home-featured-empty-color: #c8cdd0;
  --dp-ty-next-empty-color: #c8cdd0;
  --dp-sl-noimg-icon-color: #40535e;
  --dp-con-cf7-notice-border: 1px solid #21333d;
  --dp-con-cf7-notice-color: #c8cdd0;
  --dp-shp-cf7-notice-border: 1px solid #21333d;
  --dp-shp-cf7-notice-color: #c8cdd0;
  --dp-rv-cf7-notice-border: 1px solid #21333d;
  --dp-rv-cf7-notice-color: #c8cdd0;

  /* 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 — safety yellow on the plate and on the card: 9.8:1 and 8.9:1. */
  --dp-cf7-notice-link-color: var(--dp-skin-accent-text);
  --dp-home-featured-empty-link-color: var(--dp-skin-accent-text);
  --dp-legal-inline-link-color: var(--dp-skin-accent-text);
  /* 2.14:1 at 0.30 on #12232d. 0.48 lands on 3.41:1 — the same weight as
     --dp-fcard-dot / --dp-inv-card-dot above. */
  --dp-cf7-ok-bg: #172933;
  --dp-cf7-ok-border: 1px solid color-mix(in srgb, #f1f7fa 12%, transparent);
  --dp-qv-thumb-border: 2px solid transparent;
  --dp-cta-banner-ghost-bg: transparent;
  --dp-cta-banner-ghost-ink: var(--dp-skin-accent-ink);                 /* matches --dp-cta-banner-ghost-color below */
  --dp-cta-banner-ghost-border-color-hover: var(--dp-skin-accent-ink);
  --dp-cta-banner-ghost-border: 2px solid rgba(7, 24, 33, 0.70);
  --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-inv-card-arrow-fg-hover: var(--dp-skin-accent-ink);
  --dp-inv-page-btn-color-active: var(--dp-skin-accent-ink);
  --dp-rv-file-btn-color: var(--dp-skin-accent-ink);
  --dp-rv-submit-fg: var(--dp-skin-accent-ink);
  --dp-cta-banner-content-color: var(--dp-skin-accent-ink);
  --dp-cta-banner-title-color: var(--dp-skin-accent-ink);
  --dp-cta-banner-sub-color: var(--dp-skin-accent-ink);
  --dp-cta-banner-ghost-color: var(--dp-skin-accent-ink);
  --dp-sl-reserve-color: var(--dp-buynow-fg, var(--dp-skin-accent-ink));
  --dp-shp-trust-badge-color: #c8cdd0;
  --dp-cf7-ok-color: #f1f7fa;

  /* ══════════════════════════════════════════════════════════════════
     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 used to be pinned to yellow so the wizard could not
     repaint the skin. That left two action colours on any site whose owner
     picked another one (the controls in theirs, these in yellow). Since R30
     it reads the wizard colour, and the yellow is only its fallback.
     ══════════════════════════════════════════════════════════════════ */
  /* R30 (3.8.21, client decision D1): ONE action colour, taken from settings.
     These read the wizard property and keep safety yellow only as the
     fallback, exactly as modern has since 3.2.0 — so a dealer who picks
     another colour gets that colour on every control, not yellow beside it. */
  --dp-skin-accent: var(--dp-accent, #F2B705);
  --dp-skin-accent-ink: var(--dp-accent-fg, #071821);
  /* The accent as LETTERING (links, hovers, ghost labels): the owner's colour
     where it reads on this ground, ink where it does not (functions.php). */
  --dp-skin-accent-text: var(--dp-accent-on-dark, #F2B705);
  /* R30: what is NOT pressable is ink. Figures (prices, stats, years, the
     countdown), decor (stars, icons, ticks), rules and small plates
     (avatars, tags, badges, step numbers) read these instead of the accent.
     The hazard-stripe line (--dp-line-bg) is the one signature kept. */
  --dp-figure-ink: #f1f7fa;
  --dp-decor-ink: #c8cdd0;
  --dp-decor-line: #41545f;
  --dp-plate-bg: #172933;
  --dp-plate-fg: #f1f7fa;
  --dp-plate-border: #30424d;
  --dp-skin-micro-ls: 0.07em;
  --dp-field-ls: 0.2px;
  --dp-ship-actions-btn-fs-md: 14px;
  --dp-ship-actions-btn-ls-md: 1.4px;
  --dp-sl-btn-cta-ls-xs: 0;
  --dp-sl-btn-v2-ls-md: 0.8px;
  --dp-sl-btn-v2-ls-sm: 1px;
  --dp-sl-btns-ls-xs: 0.6px;
  --dp-ty-contact-item-lh: 26px;
  --dp-ty-contact-item-lh-sm: 44px;
  --dp-year-badge-bg: #172933;
}

/* ══════════════════════════════════════════════════════════════════════════
   ELEMENT-LEVEL PAINT RULES
   Only what a token cannot reach. Nothing below changes a box.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 — Stencil case. The base exposes letter-spacing tokens for these but no
       text-transform token, and condensed uppercase is the whole voice. */
body.dp-skin--heavy .dp-title,
body.dp-skin--heavy .dp-title--section,
body.dp-skin--heavy .dp-hero__title,
body.dp-skin--heavy .dp-header__logo-text,
body.dp-skin--heavy .dp-footer__logo-text,
body.dp-skin--heavy .dp-footer__col-title,
body.dp-skin--heavy .dp-header__nav a,
body.dp-skin--heavy .dp-mobile-nav a,
body.dp-skin--heavy .dp-btn,
body.dp-skin--heavy .dp-sticky-btn,
body.dp-skin--heavy .dp-qv-trigger,
body.dp-skin--heavy .wpcf7-submit,
body.dp-skin--heavy .dp-feature-card h3,
body.dp-skin--heavy .dp-step-card h3,
body.dp-skin--heavy .dp-shp-trailer h3,
body.dp-skin--heavy .dp-feature-card__title,
body.dp-skin--heavy .dp-home-shipping__step h3,
body.dp-skin--heavy .dp-home-contact__trust h3,
body.dp-skin--heavy .dp-home-contact__right h3,
body.dp-skin--heavy .dp-qv-title,
body.dp-skin--heavy .dp-cf7-overlay__error-title,
body.dp-skin--heavy .dp-cf7-overlay__btn,
body.dp-skin--heavy .dp-review__name,
body.dp-skin--heavy .dp-testimonial__name,
/* — the templates the mock-up never saw — */
body.dp-skin--heavy .dp-section-heading__title,
body.dp-skin--heavy .dp-section-head__title,
body.dp-skin--heavy .dp-abt-title,
body.dp-skin--heavy .dp-con-title,
body.dp-skin--heavy .dp-shp-title,
body.dp-skin--heavy .dp-rv-title,
body.dp-skin--heavy .dp-rv-heading,
body.dp-skin--heavy .dp-ty-sec-head h2,
body.dp-skin--heavy .dp-rv-form-title,
body.dp-skin--heavy .dp-ty-title,
body.dp-skin--heavy .dp-404-title,
body.dp-skin--heavy .dp-legal-title,
body.dp-skin--heavy .dp-sl-stitle,
body.dp-skin--heavy .dp-sl-inq__title,
body.dp-skin--heavy .dp-sl-related__title,
body.dp-skin--heavy .dp-inv-card__title,
body.dp-skin--heavy .dp-abt-check__title,
body.dp-skin--heavy .dp-step-card__title,
body.dp-skin--heavy .dp-cta-banner__title,
body.dp-skin--heavy .dp-sl-btn-v2,
body.dp-skin--heavy .dp-sl-tab,
body.dp-skin--heavy .dp-sl-share__btn,
body.dp-skin--heavy .dp-sl-specs-toggle,
body.dp-skin--heavy .dp-inv-page-btn,
body.dp-skin--heavy .dp-cta-banner__btn {
  text-transform: uppercase;
}

/* 2 — Column heads, field labels and short chips: uppercase plus the tracking
       the base never tokenised for them.
       3.8.19: caps are for LABELS. The multi-word pills and badges ("Full specs
       on every unit", "Free Hauling USA & Canada", "USA & Canada delivery
       support") and the Contact reassurance cards left this list — the cards
       had been caught whole, so four 103-124 character paragraphs were set in
       spaced capitals. Their titles keep the caps (h3 below); the sentences
       read as sentences. 33.6% of all letters on heavy's home were capitals. */
body.dp-skin--heavy .dp-form-wrap label,
body.dp-skin--heavy .wpcf7-form label,
body.dp-skin--heavy .dp-ty-trust,
body.dp-skin--heavy .dp-con-trust-card h3,
body.dp-skin--heavy .dp-sl-trust-item strong,
body.dp-skin--heavy .dp-abt-stat__label,
body.dp-skin--heavy .dp-dash-stat__lbl,
body.dp-skin--heavy .dp-ty-countdown__label,
body.dp-skin--heavy .dp-rv-step-lbl {
  text-transform: uppercase;
  letter-spacing: var(--dp-skin-micro-ls);
}

/* The sentence-length micro text, in sentence case with a touch of tracking. */
body.dp-skin--heavy .dp-hero__pills span,
body.dp-skin--heavy .dp-home-shipping__pills span,
body.dp-skin--heavy .dp-home-contact__trust-pill,
body.dp-skin--heavy .dp-home-story__feat,
body.dp-skin--heavy .dp-inv-trust__pill,
body.dp-skin--heavy .dp-rv-trust-pill,
body.dp-skin--heavy .dp-shp-trust-badge,
body.dp-skin--heavy .dp-con-trust-card p {
  text-transform: none;
  letter-spacing: .01em;
}

/* 3 — Typed content must stay readable: the UI face is a condensed display
       type, so every input is pulled back to the body face. */
body.dp-skin--heavy .dp-form-wrap input:not([type="submit"]):not([type="button"]),
body.dp-skin--heavy .dp-form-wrap select,
body.dp-skin--heavy .dp-form-wrap textarea,
body.dp-skin--heavy .wpcf7-form input:not([type="submit"]):not([type="button"]),
body.dp-skin--heavy .wpcf7-form select,
body.dp-skin--heavy .wpcf7-form textarea,
body.dp-skin--heavy .dp-inv-search input,
body.dp-skin--heavy .dp-inv-select {
  font-family: var(--dp-font);
  letter-spacing: var(--dp-field-ls);
  text-transform: none;
}

/* 4 — Figures that align in columns but were never wired to the numeric
       tokens by the base. */
body.dp-skin--heavy .dp-qv-price,
body.dp-skin--heavy .dp-home-shipping__counter-num,
body.dp-skin--heavy .dp-inv-card__specs,
body.dp-skin--heavy .dp-inv-card__price,
body.dp-skin--heavy .dp-inv-card__year,
body.dp-skin--heavy .dp-sl-sprice,
body.dp-skin--heavy .dp-shp-tbl td,
body.dp-skin--heavy .dp-ty-countdown__val,
body.dp-skin--heavy .dp-rv-card-prices,
body.dp-skin--heavy .dp-abt-stat__num,
body.dp-skin--heavy .dp-dash-stat__num,
body.dp-skin--heavy .dp-abt-tl__year {
  font-family: var(--dp-font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
}

/* 5 — Photography graded high-contrast, desaturated, warm cast. No token
       exists for image treatment. */
/* D27 (3.8.23, client decision): PRODUCT PHOTOS IN THEIR REAL COLOURS.
   This skin used to grade every photograph — cards, gallery, lightbox, Quick
   View, related and thank-you cards, the hero plates. A buyer judging a used
   machine's paint and wear needs the photo as taken, so the grade is gone
   from all of them. Only the home story photograph, which is mood and not
   merchandise, keeps a light version of it (no hue shift). */
body.dp-skin--heavy .dp-home-story__media img {
  filter: contrast(1.08) saturate(0.85) sepia(0.07);
}

/* 6 — Machined chamfer on the primary actions. Cut corners are geometry the
       radius tokens cannot express. The matching shadows were moved inset in
       the token block, because clip-path discards an outer box-shadow. */
body.dp-skin--heavy .dp-btn--primary,
body.dp-skin--heavy .wpcf7-submit,
body.dp-skin--heavy .dp-header__call,
body.dp-skin--heavy .dp-mobile-nav__call {
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

/* 6a — The Buy Now control leaves that family. 2.9.4 took two 9px bites out of
        opposite corners; this changes the plate's outline instead: a full-height
        arrow end, the idiom of a stamped directional tag on equipment placards.
        The point intrudes 18px at mid-height and 0 at top and bottom; the text
        column stops 30px from the right edge, so nothing clips at either width
        or either discount state. `clip-path: none` is the one-line revert. */
body.dp-skin--heavy .dp-sl-reserve {
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}

/* 6b — The back-to-top joins that family. It is 52px square, so the cut is
        8px rather than 9px. (The duplicate .dp-back-to-top implementation was
        removed from the base theme; only its now-dangling selector went with
        it here. Nothing this file paints changed.) */
body.dp-skin--heavy .dp-btt {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* 7 — The sticky bar shares one foreground token across both halves; the
       yellow half needs ink. */
body.dp-skin--heavy .dp-sticky-btn--call {
  /* .dp-sticky-btn sets `color: var(--dp-sticky-fg) !important`, so this
     needs !important to land at all (it was #f1f7fa on #F2B705 — 1.68:1).
     --dp-skin-accent-ink, not var(--dp-accent-fg): the amber fill is this
     skin's own --dp-sticky-call-bg, while --dp-accent-fg is one of the
     wizard's 17 and is #faffff on any site with a dark accent. */
  color: var(--dp-skin-accent-ink) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — typography only
   ══════════════════════════════════════════════════════════════════════════ */

/* The Shipping action row is a nowrap flex row with a 16px gap. Under the
   stock system sans it measured 761.8px against the 768px the row has at a
   900px viewport. Oswald's 1.6px tracking over 64 uppercase characters adds
   ~100px of pure letter-spacing and wrapped the third button onto a second
   line. The row steps down to the size this skin already uses below 768px
   (--dp-btn-fs-sm, 14px) with tracking scaled to match — 1.4px at 14px is
   0.100em against 1.6px at 15px's 0.107em, so the tracked-out industrial
   voice is intact. Measured 746.7px against 768px, one row, 21px clear. */
@media (min-width: 768px) and (max-width: 960px) {
  body.dp-skin--heavy .dp-home-shipping__actions .dp-btn {
    font-size: var(--dp-ship-actions-btn-fs-md);
    letter-spacing: var(--dp-ship-actions-btn-ls-md);
  }
}

/* The single-listing sidebar action stack and the inventory pager carry the
   same tracked caps in a much narrower measure. Below the two-column break
   they close up rather than wrap. */
@media (max-width: 960px) {
  body.dp-skin--heavy .dp-sl-btn-v2,
  body.dp-skin--heavy .dp-inv-page-btn {
    letter-spacing: var(--dp-sl-btn-v2-ls-sm);
  }
}

/* …and the band above stopped exactly one pixel short of the range that
   actually needed it. At 901px .dp-sl-top becomes `1fr 360px`, the sidebar
   .dp-sl-btn-row splits that 360px in two and "Make Inquiry" drops from a
   408px button to a 154px one; at 15px Oswald with 1.6px tracking the label
   measures 158px, so 4px of it sat outside its content box and ate 4.2px
   of the 16px right padding. (The label does not quite touch the border,
   as the audit read it: measured, its right edge stops 11.8px short of
   that border — but the padding is no longer whole and any overflow:hidden
   in the chain is one copy change away from clipping it.) Measured:
   900 = 0 over (408px button), 901–1100 = 4 over (154px), 1101+ = 0 over
   (174px). Tracking down to 1px — the step the ≤900 band takes — still
   leaves 1.22px over, so this band goes to 0.8px, which clears it outright
   (label 106.4px → 97.9px, both paddings whole, scrollWidth = clientWidth)
   and is indistinguishable from 1px at 15px. Its "Call Now" partner takes
   the same step so the pair stays one row of type. The pager is deliberately
   NOT in this band: it never overflowed here, and widening its band would
   change tracking on a control that has no defect. */
@media (min-width: 961px) and (max-width:1023.98px) {
  body.dp-skin--heavy .dp-sl-btn-v2 {
    letter-spacing: var(--dp-sl-btn-v2-ls-md);
  }
}

/* The sold / reserved sidebar drops the two-up row for one full-width CTA
   whose label is a whole sentence — "Call about availability", or whatever
   copy single.sold.btn carries. At 320px that button is 218px wide inside
   28px of side padding, and Oswald's 1.6px tracking over ~23 uppercased
   characters pushed the label 10px (sold) and 16px (reserved) past the
   padding box, clipped, both side paddings consumed. Only 320 fails: at
   360 the button is 258px and the same label fits. Tracking alone would
   clear it by ~7px, which is too little headroom for copy that is still
   being rewritten, so the label also takes the 13px step this skin already
   uses for its smallest UI type. Measured at 320 after: 10 -> 0 and
   16 -> 0 over, with 66px of slack for longer copy; 340, 360, 361, 375, 414
   and 480 all unchanged at 0 over. The child combinator matters: the
   two-up "Make Inquiry" / "Call Now" pair on an AVAILABLE listing sits a
   level deeper, in .dp-sl-btn-row, and never overflowed at 320 — a
   descendant selector would have restyled two controls that have no
   defect, so only the full-width direct child is touched. */
/* Band extended 360 -> 399 in the icon pass below. At 361 this step used to
   end and the label sprang back to 14px/1.6px, which over-subscribed the
   content box again and crushed the phone icon to 0.00px at 361 and 375 and
   to 8.80px at 390 on /inventory/dpfx-sold/. 13px/0.6px fits the whole band:
   measured 14.00px icon and 0 overflow at 361, 375, 390 and 399, and 0 at
   400 where the step ends. The label sizes are otherwise untouched. */
@media (max-width: 399px) {
  body.dp-skin--heavy .dp-sl-btns > .dp-btn {
    font-size: var(--dp-text-sm);
    letter-spacing: var(--dp-sl-btns-ls-xs);
  }
}

/* 9 — THE TWO TOKENS THE SKIN IS NOT ALLOWED TO OWN.
      The wizard's colour block stamps --dp-accent-text (always #faffff) 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--heavy .dp-btn--primary { background: var(--dp-btn-primary-bg); }
body.dp-skin--heavy .dp-form-wrap .wpcf7-submit,
body.dp-skin--heavy .wpcf7-form input[type="submit"],
body.dp-skin--heavy .wpcf7-form input[type="submit"]:focus,
body.dp-skin--heavy .wpcf7-form input[type="submit"]:active,
body.dp-skin--heavy .wpcf7-form input[type="submit"]:focus-visible,
body.dp-skin--heavy .wpcf7-form button[type="submit"],
body.dp-skin--heavy .wpcf7-form button[type="submit"]:focus,
body.dp-skin--heavy .wpcf7-form button[type="submit"]:active,
body.dp-skin--heavy .wpcf7-form button[type="submit"]:focus-visible {
  background: var(--dp-submit-bg) !important;
}
@media (hover:hover) and (pointer:fine) {
body.dp-skin--heavy .wpcf7-form input[type="submit"]:hover,
body.dp-skin--heavy .wpcf7-form button[type="submit"]:hover {
  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--heavy` 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--heavy .dp-form-wrap input[type="submit"],
body.dp-skin--heavy .dp-form-wrap input[type="submit"]:focus,
body.dp-skin--heavy .dp-form-wrap input[type="submit"]:active,
body.dp-skin--heavy .dp-form-wrap input[type="submit"]:focus-visible,
body.dp-skin--heavy .dp-form-wrap input[type="submit"]:focus-within,
body.dp-skin--heavy .dp-form-wrap button[type="submit"] {
  background: var(--dp-submit-bg) !important;
}
@media (hover:hover) and (pointer:fine) {
body.dp-skin--heavy .dp-form-wrap input[type="submit"]:hover {
  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--heavy .dp-btn--cta,
body.dp-skin--heavy .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--heavy .dp-cta-banner { background: var(--dp-skin-accent); }

/* 10d — .dp-cta-banner__btn hard-codes `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--heavy .dp-cta-banner__btn { color: var(--dp-skin-accent-text); }

/* 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. */
/* R30: only the controls keep the fill. The badge, avatars, table tag and
   completed step numbers are plates now (--dp-plate-bg, set above). */
body.dp-skin--heavy .dp-inv-page-btn--active { background: var(--dp-skin-accent); }
@media (hover:hover) and (pointer:fine) {
body.dp-skin--heavy .dp-inv-card:hover .dp-inv-card__arrow { background: var(--dp-skin-accent); }
}
body.dp-skin--heavy .dp-rv-step--active .dp-rv-step-num { background: var(--dp-plate-bg); color: var(--dp-plate-fg); }
body.dp-skin--heavy .dp-rv-form-wrap .wpcf7-form input[type="file"]::file-selector-button { background: var(--dp-skin-accent); }
/* 3.8.2: the current step is marked by INK, WEIGHT AND A BORDER, never by
   hue. It is not a control — nobody can press it — so under the colour rule
   it does not get the action colour, and the accent it used to carry measured
   2.58:1 at 13px, the worst contrast on the page. */
body.dp-skin--heavy .dp-rv-step--current .dp-rv-step-num { background: var(--dp-text); color: var(--dp-bg); }
body.dp-skin--heavy .dp-inv-page-btn--active { border-color: var(--dp-skin-accent); }
@media (hover:hover) and (pointer:fine) {
body.dp-skin--heavy .dp-inv-card:hover .dp-inv-card__arrow { 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--heavy .dp-inv-page-btn--active:focus,
body.dp-skin--heavy .dp-inv-page-btn--active:focus-visible {
  color: var(--dp-inv-page-btn-color-active);
}
@media (hover:hover) and (pointer:fine) {
body.dp-skin--heavy .dp-inv-page-btn--active:hover {
  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
   on the page instead of tracking whatever is behind it. */
body.dp-skin--heavy .dp-sl-yr,
body.dp-skin--heavy .dp-inv-card__year { background: var(--dp-year-badge-bg); }

/* 10f — Icons and figures that paint `color: var(--dp-accent)` on a tint the
        skin owns. The tint stays the owner's colour; only the glyph moves to
        this skin's accent so the two can never drift apart. */
/* :not(--active) — the pager's active page already carries the fill from
   10e, and a bare .dp-inv-page-btn:hover outranks it, which would print the
   skin accent on the skin accent. */
/* 3.2.0 repair — `body.dp-skin--heavy .dp-abt-check__icon` WAS LISTED HERE and
   has been taken out of this list, not moved inside it. The four about-page
   ticks are decoration, not controls, so they must not take the action colour;
   with this selector gone the base rule in page-about.php applies and they take
   --dp-feature-icon-color, the cool rung, exactly as the modern skin already
   does. Every other selector in this list is a figure, an arrow or a hover
   state — all of them controls or emphasis — and none of them changed. */
/* 3.8.21 (R30 follow-up): the step numbers, the feature figures, the card
   arrow at rest, the timeline dots and the inquiry envelope left this list —
   they are figures and icons, and take the base's --dp-figure-ink /
   --dp-decor-ink like their twins elsewhere. What stays is a control. */
body.dp-skin--heavy .dp-btt,
body.dp-skin--heavy .dp-sl-specs-toggle { color: var(--dp-skin-accent-text); }
@media (hover:hover) and (pointer:fine) {
body.dp-skin--heavy .dp-inv-page-btn:not(.dp-inv-page-btn--active):hover,
body.dp-skin--heavy .dp-sl-specs-toggle:hover,
body.dp-skin--heavy .dp-404-links__grid a:hover { color: var(--dp-skin-accent-text); }
}

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

   Plain `color` declarations on components whose fill this file already
   repaints to the yellow plate. Nothing moves or resizes.
   ══════════════════════════════════════════════════════════════════════════ */

/* 10f-ii — the thank-you confirmation mark: page-thank-you.php strokes it
        with var(--dp-accent) as a presentation attribute. Ink, as on
        classic (12c) — R30: it is a figure, not a control. */
body.dp-skin--heavy .dp-ty-icon svg circle,
body.dp-skin--heavy .dp-ty-icon svg path {
  stroke: var(--dp-figure-ink);
}

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

/* 11b — retired in R27: header.php now gives the call pill (0,2,1), so its
        own --dp-mnav-call-fg wins without a patch here. */

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

/* 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--heavy form.wpcf7-form.invalid input[type="submit"],
body.dp-skin--heavy form.wpcf7-form.invalid input[type="submit"]:focus,
body.dp-skin--heavy form.wpcf7-form.invalid input[type="submit"]:active,
body.dp-skin--heavy form.wpcf7-form.invalid button[type="submit"],
body.dp-skin--heavy form.wpcf7-form.invalid button[type="submit"]:focus,
body.dp-skin--heavy form.wpcf7-form.invalid button[type="submit"]:active {
  background-color: var(--dp-submit-bg) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   12 — MARKS PAINTED STRAIGHT FROM --dp-cta, AND ONE THE UA STILL OWNS

   On this install the wizard block leaves --dp-accent alone but does stamp
   --dp-cta (here #CC470E) with !important on `:root, :root body`, so the two
   components that read it directly printed the owner's transaction colour on
   this skin's panels rather than the skin's own. Both measured under 4.5:1
   against the fill they actually sit on. Section 9 already sets out why a
   skin cannot re-point --dp-cta itself; as in 11a–11d, the answer is a plain
   `color` on the component. Colour only — nothing here moves a box.
   ══════════════════════════════════════════════════════════════════════════ */

/* 12a — the FAQ disclosure "+". style.css and four of the five templates that
        print it read `color: var(--dp-cta)`, which measured #CC470E on the
        card #12232d = 3.44:1 for a 22px 300-weight glyph — under the 4.5:1
        this size and weight need. page-reserve.php is the exception: it reads
        var(--dp-accent) and already paints this skin's yellow. Pinning the
        glyph to that same yellow makes all five FAQ blocks one mark at
        8.88:1 on the card and 10.32:1 on the recessed panel. The template
        rules are (0,1,0); this is (0,2,1). */
body.dp-skin--heavy .dp-faq-item__icon {
  color: var(--dp-decor-ink);   /* R30: the mark is decor; 12.3:1 on the card */
}

/* 12b — the reserve progress rail. `.dp-rv-step--current .dp-rv-step-lbl`
        reads var(--dp-cta) at (0,2,0), so the label of the step you are on
        printed #CC470E on the step's own tinted plate (#11232c) = 3.48:1,
        under the 4.5:1 an 11.5px 600-weight label needs. 10e already pins
        this step's number chip to #F2B705, so the label joins it: 8.99:1 on
        that plate, and the same yellow the --active steps already carry from
        var(--dp-accent), which is what 10e made them anyway. (0,3,1). */
body.dp-skin--heavy .dp-rv-step--current .dp-rv-step-lbl {
  color: var(--dp-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   13 — THREE GAPS IN THE BASE THE SKIN CAN CLOSE WITH PAINT

   Each of these is a base-theme omission rather than a skin decision: a
   token pair that was never declared, a focus ring that cannot reach the
   pixels it needs, and a disabled state nobody styled. All three are fixed
   here so this skin is correct today, and written up in
   base-patches/heavy.md so the same fix can land once in style.css for all
   three skins. Colour, box-shadow, opacity, filter and cursor only —
   nothing below moves, resizes or respaces a box.
   ══════════════════════════════════════════════════════════════════════════ */

/* 13a — the seventh badge. "Reserved" is one of the seven statuses the badge
        field offers, and the only one with no token pair and no rule: the
        chip never painted, so a 10px/700 label sat on bare photography and
        its contrast was whatever the photo happened to give (glyph-core
        minimum 3.05:1 at 1024, 3.72:1 at 1440, 44% and 12% of glyph pixels
        under 4.5:1). Three call sites print the class — the archive card,
        the home featured card and the related-listings card — and all three
        are covered. No !important: header.php stamps the other four
        variants, this one it never knew about, so (0,2,0) lands unopposed. */
body.dp-skin--heavy .dp-inv-card__badge--reserved {
  background: var(--dp-badge-reserved-bg);
  color: var(--dp-badge-reserved-fg);
}

/* 13b — the focus ring for the two image links.
        .dp-inv-card__img-link and .dp-home-fcard__img-link are keyboard
        stops with no visible indicator at all: forcing :focus-visible
        changed 0.0000 of the card's pixels at 375 and at 1280 on both card
        types. The ring IS computed on them — the base's --dp-focus-ring is
        inset — but their only child, .dp-*-card__img-wrap, fills the link
        edge to edge with an opaque background plus the photo and paints
        over it, while .dp-inv-card__media / .dp-home-fcard__media are
        overflow:hidden and would clip an outset one. (Injecting a 6px
        outline on the link proved it: nothing rendered at either offset.)
        So the ring goes on the CARD, which is neither overpainted by that
        child nor clipped by those ancestors, via :has() on the link's own
        :focus-visible — the indicator still appears if and only if that
        link has keyboard focus, and the sibling body-link keeps its own.
        box-shadow only; the card's resting shadow is `none` on this skin,
        so nothing is displaced. */
/*      MERGE NOTE (base-patch merge pass): the base now closes this in
        style.css, on .dp-inv-card__img-wrap::after / .dp-home-fcard__overlay
        -- two boxes the base already declares above the photo -- reading
        var(--dp-focus-ring), which this skin already tints to
        #f1f7fa / #010f17. Heavy's own card ring is therefore redundant, and
        left in place it painted a SECOND ring outside the card on top of the
        base's. Removed here, together with the outset token it consumed. */

/* 13c — a disabled control that looks disabled. Contact Form 7 disables the
        submit for the length of a submission and the theme styles nothing
        for the attribute — only for the .wpcf7-submit--loading CLASS it also
        adds. Measured: disabled=true changed 0.0000 pixels on the contact
        form and the listing inquiry form at 375 and
        1280, the sole difference being cursor: not-allowed, which does not
        exist on touch. Opacity plus a light desaturation reads on every fill
        this skin uses — the yellow CTA, the orange Reserve button, the dark buttons
        — so it needs no per-component colour.
        The two controls that already carry their own disabled treatment are
        excluded by name. This is not belt-and-braces: .dp-inv-page-btn:disabled
        is (0,2,0) in archive-listing.php against (0,2,2) here, so without the
        exclusion this rule would quietly relight the theme's deliberately
        faint 0.35 pager arrow to 0.55 — a design change nobody asked for.
        Measured with the exclusion: the disabled pager button is back to
        opacity 0.35 / filter none, and the submits still take 0.55. */
body.dp-skin--heavy :is(button, input, select, textarea):disabled:not(.dp-inv-page-btn, .dp-inv-select),
body.dp-skin--heavy [aria-disabled="true"]:not(.dp-inv-page-btn, .dp-inv-select) {
  opacity: var(--dp-disabled-opacity);
  filter: grayscale(var(--dp-disabled-grayscale));
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════════════════
   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--heavy .dp-sl-btns > a.dp-btn--cta {
    font-size: var(--dp-text-xs);
    letter-spacing: var(--dp-sl-btn-cta-ls-xs);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   /thank-you/ CONTACT ROW: TAP TARGETS — the finding this skin declined
   ──────────────────────────────────────────────────────────────────────────
   a.dp-ty-contact__item is a phone link, a mailto link and a span sitting in
   a wrapping flex row with padding:0 and line-height:normal. On this skin the
   chip's face is 15px, so the control measured 25px tall at EVERY width,
   320 included — 19px under the 44px touch minimum and 1px over the 24px
   floor that applies with any pointer. Classic and modern both fixed this;
   this skin held the finding for sign-off, so the theme shipped three skins
   with three different answers to one control: modern 44px to 768 and 26px
   above, classic 44px only to 767, heavy 25px everywhere.

   Settled on modern's answer, and the same rule is now in all three files at
   the same breakpoint. 768, not 767: page-thank-you.php switches this
   page to its one-column mobile layout at `@media (max-width: 768px)`, so a
   767px rule leaves 768 — a real tablet width — in the mobile layout with the
   desktop target height.

   line-height is typography and on the allowed list; a skin may not grow a
   box with padding. The row is a wrapping flex line at align-items:stretch,
   so all three chips take the same height whichever one is addressed and
   nothing moves sideways. Measured on this skin: 25px -> 44px at 320, 375,
   414, 600, 767 and 768, and 25px -> 26px from 769 up, which is the 1px the
   sibling skins already carry to clear the 24px pointer floor.
   ══════════════════════════════════════════════════════════════════════════ */
body.dp-skin--heavy .dp-ty-contact__item { line-height: var(--dp-ty-contact-item-lh); }
@media (max-width:767px), (pointer: coarse) {
  body.dp-skin--heavy .dp-ty-contact__item { line-height: var(--dp-ty-contact-item-lh-sm); }
}

/* 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--heavy .wpcf7-form .wpcf7-list-item label {
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--dp-fw-normal, 400);
}

/* The Call half of the listing bar lost its accent GROUND in 3.8.15 so the Buy
   Now plate beside it is the only filled colour there. 3.8.15 then inked the
   label in the accent, which only works for a light accent: an oxblood owner
   colour measured 1.69:1. Since 3.8.19 it takes the bar's neutral ink, the
   same as Request Info (heavy 14.92, modern 18.04, classic 15.73:1). */
body.dp-skin--heavy .dp-sticky-bar--buy .dp-sticky-btn--call,
body.dp-skin--heavy .dp-sticky-bar--quiet .dp-sticky-btn--call {
  color: var(--dp-sticky-fg) !important;
}

/* ═══════════════════════════════════════════════════════════════
   THE SIDEBAR SPENDS ITS ACCENT ONCE (3.8.16)

   Rendered at 1440 this column held THREE objects in the identical hue —
   "Show all N details" (text and chevron), "Call Now" (text and icon) and the
   Buy Now plate, all measured rgb(242,183,5) on heavy. The page's primary
   action was the fourth yellow thing a visitor's eye met, counting the header
   phone button, rather than the one. Salience is area times contrast against
   the GROUND, and a colour repeated four times is not a ground any more.

   So the two secondaries take neutral ink. Nothing else about them moves:
   same size, same position, same border, same hover. They lose only the
   competition. Measured after: each still clears AA comfortably, and the
   plate is the single chromatic object in its column.
   ═══════════════════════════════════════════════════════════════ */
body.dp-skin--heavy .dp-sl-specs-toggle {
  color: var(--dp-text);
}
@media (hover:hover) and (pointer:fine) {
body.dp-skin--heavy .dp-sl-specs-toggle:hover {
  color: var(--dp-text);
}
}
body.dp-skin--heavy .dp-sl-btns .dp-btn--cta {
  --dp-btn-cta-fg: var(--dp-text);
}

/* Heading leading (3.8.19). Read by the base h1-h4 rules; headings that set
   their own line-height keep it. */
body.dp-skin--heavy { --dp-heading-lh: 1.08; }

/* D25 (3.8.23): the Buy Now countdown was the only Barlow Semi Condensed 900
   on the site; at 700 it shares the file every other figure already loads. */
body.dp-skin--heavy .dp-rv-panel__foot strong { font-weight: 700; }

/* D29 (3.8.23, client decision): THE CTA BANNER IS A CLOSING PANEL, NOT A
   YELLOW FIELD. It was the largest coloured surface on four pages (248,000px²
   at 1440), painted in the action colour. It becomes this skin's raised steel
   plate — the dark ground, a 2px steel rule and the hard 3px drop the cards
   use — and only its main button carries the yellow, as on classic. */
body.dp-skin--heavy {
  --dp-cta-banner-content-color: #c8cdd0;
  --dp-cta-banner-title-color: #f1f7fa;
  --dp-cta-banner-sub-color: #c8cdd0;
  --dp-cta-banner-ghost-color: #f1f7fa;
  --dp-cta-banner-ghost-ink: #f1f7fa;
  --dp-cta-banner-ghost-border: 2px solid #79848a;
  --dp-cta-banner-ghost-border-color-hover: #f1f7fa;
  --dp-cta-banner-btn-ghost-bg-hover: rgba(241, 247, 250, 0.08);
  --dp-cta-banner-btn-ghost-shadow: none;
  --dp-cta-banner-btn-bg: var(--dp-skin-accent);
}
body.dp-skin--heavy .dp-cta-banner {
  background: #04141d;
  border: 2px solid #6a757b;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
body.dp-skin--heavy .dp-cta-banner .dp-cta-banner__btn:not(.dp-cta-banner__btn--ghost) {
  color: var(--dp-skin-accent-ink);
  /* An owner colour too dark to read on this panel (--dp-accent-on-dark falls
     back to the light ink then) gets a 2px light keyline, so the main button
     still stands off the panel (3:1); with a light accent the keyline is the
     fill colour itself and invisible. */
  box-shadow: inset 0 0 0 2px var(--dp-accent-on-dark, transparent), 0 3px 0 rgba(0, 0, 0, 0.45);
}

/* ══════════════════════════════════════════════════════════════════════════
   3.9.0 — EMPHASIS (client decision, 2026-10-19)
   "The price is white and does not stand out": the site read like a
   black-and-white newspaper. Prices and the stats figures now carry the
   action colour as TEXT (--dp-skin-accent-text: the owner's accent where it
   reads at 4.5:1 on the darkest card, the light ink where it does not), and
   the card no longer repeats the Buy Now saving — the listing's own
   Buy Now plate carries it. This reverses, for
   these figures only, the 3.8.21 rule that kept saturated colour on clickable
   things; buttons remain the only coloured FILLS.
   ══════════════════════════════════════════════════════════════════════════ */
body.dp-skin--heavy {
  --dp-price-ink: var(--dp-skin-accent-text);
  --dp-key-ink: var(--dp-text);          /* key terms in body copy: full ink over the reading grey */
  --dp-stat-ink: var(--dp-skin-accent-text);
  --dp-fcard-price-color: var(--dp-price-ink);
  --dp-qv-price-color: var(--dp-price-ink);
  --dp-shp-trailer-price-strong-color: var(--dp-price-ink);
  --dp-statsband-num-color: var(--dp-stat-ink);
  --dp-ship-counter-color: var(--dp-stat-ink);
}

/* 3.9.0 — EASY READING (client, 2026-10-19: "easy to read and understand for
   a buyer"). ONE reading ink again, a step brighter: every token of text that
   is read as prose (the R46 #a5b1b8 tier, and the #abb7be and #98a3aa tiers
   that had drifted from it) is #c8cdd0, the skin's --dp-text-soft — 11.1:1 on the page.
   That includes the Quick View excerpt and the empty-inventory message.
   Interface text that is NOT read (menu, breadcrumb, share, counters, the
   file control, the hero note) keeps its quieter value.
   The hierarchy is kept by WEIGHT now: the conditions inside a paragraph are
   set bold in full ink (.dp-key, dp_emph()), the headings stay the brightest
   and largest thing in their block. */

/* ══════════════════════════════════════════════════════════════════════════
   R44 (3.11.0): ONE FILLED BUTTON IN THE LISTING COLUMN. Buy Now is the plate;
   every other control beside it - Make Inquiry, Call Now, Share and the specs
   toggle - is the same level-2 outline: no fill, a 1px keyline in the field
   border token (--dp-control-border, the R31 hairline that already clears 3:1
   on this skin's card), full reading ink. The keyline is a box-shadow on the
   two .dp-sl-btn-v2 buttons (their border is none) and the border colour on
   the other two, so no box moves. :not(:focus-visible) leaves the keyboard
   ring to the focus rules.
   ══════════════════════════════════════════════════════════════════════════ */
body.dp-skin--heavy .dp-sl-btns .dp-sl-btn-v2.dp-btn {
  background: transparent;
  border-color: transparent;
  color: var(--dp-text);
}
body.dp-skin--heavy .dp-sl-btns .dp-sl-btn-v2.dp-btn:not(:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--dp-control-border);
}
body.dp-skin--heavy .dp-sl-share__btn,
body.dp-skin--heavy .dp-sl-specs-toggle {
  background: transparent;
  border-color: var(--dp-control-border);
  color: var(--dp-text);
}
@media (hover:hover) and (pointer:fine) {
  body.dp-skin--heavy .dp-sl-btns .dp-sl-btn-v2.dp-btn:hover,
  body.dp-skin--heavy .dp-sl-share__btn:hover,
  body.dp-skin--heavy .dp-sl-specs-toggle:hover {
    background: color-mix(in srgb, var(--dp-text) 6%, transparent);
    color: var(--dp-text);
  }
  body.dp-skin--heavy .dp-sl-btns .dp-sl-btn-v2.dp-btn:hover:not(:focus-visible) {
    box-shadow: inset 0 0 0 1px var(--dp-text);
  }
  body.dp-skin--heavy .dp-sl-share__btn:hover,
  body.dp-skin--heavy .dp-sl-specs-toggle:hover {
    border-color: var(--dp-text);
  }
}

/* Brand palette #002b3e (engine 6) */
body.dp-skin--heavy{--dp-band-bg:#05202d;--dp-statsband-bg:#01141f;--dp-footer-bg:#01141f;}