/* ==========================================================================
   DECOVINK page sections.
   Chrome lives in chrome.css. This file is page content: hero first.
   ========================================================================== */

/* Hero --------------------------------------------------------------------
   Asymmetric by design: copy left, product visual right. The three ordering
   paths must stay above the fold, so on phones the visual moves below them.
   -------------------------------------------------------------------------- */

.dv-hero { background: var(--dv-bg); padding-block: var(--dv-xl) var(--dv-lg); }

.dv-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dv-lg);
  align-items: center;
}

@media (min-width: 1024px) {
  .dv-hero { padding-block: var(--dv-xxl) var(--dv-xl); }
  .dv-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--dv-xl);
  }
}

.dv-hero__copy { min-width: 0; }

.dv-hero__title {
  margin: 0 0 var(--dv-md);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: var(--dv-fw-display);
  text-wrap: balance;
}

/* The third line carries the accent. Display type only, never body copy. */
.dv-hero__title .dv-accent-text { color: var(--dv-accent); display: block; }

.dv-hero__lead {
  margin: 0 0 var(--dv-lg);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--dv-ink-muted);
  max-width: 34em;
}

/* Ordering paths ---------------------------------------------------------- */

.dv-paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dv-sm);
  margin: 0 0 var(--dv-lg);
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .dv-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dv-sm); }
}

.dv-paths__item { min-width: 0; display: flex; }

.dv-path {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 14px 16px;
  background: var(--dv-bg);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-md);
  color: var(--dv-ink);
  text-decoration: none;
  transition: border-color 0.18s var(--dv-ease), background-color 0.18s var(--dv-ease), color 0.18s var(--dv-ease);
}

.dv-path:hover { border-color: var(--dv-ink); color: var(--dv-ink); }

/* Exactly one primary action per view. */
.dv-path--primary {
  background: var(--dv-accent);
  border-color: var(--dv-accent);
  color: var(--dv-accent-ink);
}
.dv-path--primary:hover {
  background: var(--dv-accent-hover);
  border-color: var(--dv-accent-hover);
  color: var(--dv-accent-ink);
}

.dv-path__icon { flex: none; display: inline-flex; color: currentColor; }

.dv-path__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.dv-path__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: var(--dv-fw-bold);
  line-height: 1.2;
}

.dv-path__note {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--dv-ink-muted);
}
.dv-path--primary .dv-path__note { color: rgba(255,255,255,0.82); }

.dv-path__badge {
  flex: none;
  padding: 2px 7px;
  background: var(--dv-surface-alt);
  border-radius: var(--dv-r-pill);
  font-size: 0.625rem;
  font-weight: var(--dv-fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dv-ink-muted);
  white-space: nowrap;
}

.dv-path__arrow {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s var(--dv-ease), transform 0.18s var(--dv-ease);
}
.dv-path:hover .dv-path__arrow,
.dv-path:focus-visible .dv-path__arrow { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .dv-path__arrow { opacity: 1; transform: none; }
}

/* On the narrowest phones the arrow is noise, and the note needs the room. */
@media (max-width: 559px) {
  .dv-path { min-height: 68px; }
  .dv-path__arrow { display: none; }
}

/* Hero assurances --------------------------------------------------------- */

.dv-assure {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dv-md) var(--dv-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dv-assure li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: var(--dv-fw-medium);
  color: var(--dv-ink);
}

.dv-assure .dv-icon {
  flex: none;
  width: 18px; height: 18px;
  padding: 3px;
  background: var(--dv-ink);
  border-radius: var(--dv-r-pill);
  color: #FFFFFF;
  stroke-width: 2.5;
}

/* Hero visual ------------------------------------------------------------- */

.dv-hero__visual { min-width: 0; }

.dv-hero__img {
  width: 100%;
  height: auto;
  border-radius: var(--dv-r-md);
}

/* Declared placeholder, on palette, sized like the real thing so the layout
   does not shift when the photograph arrives. */
.dv-hero__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dv-md);
  aspect-ratio: 16 / 11;
  background: var(--dv-surface-alt);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-md);
  text-align: center;
  padding: var(--dv-lg);
}

.dv-hero__placeholder-mark { width: 88px; height: 88px; opacity: 0.18; }

.dv-hero__placeholder-note {
  font-size: 0.75rem;
  font-weight: var(--dv-fw-medium);
  letter-spacing: 0.02em;
  color: var(--dv-ink-muted);
  max-width: 22em;
}

/* Phones: the ordering paths must stay above the fold, so the visual follows
   the copy rather than sitting between the headline and the cards. */
@media (max-width: 1023px) {
  .dv-hero__inner { grid-template-columns: 1fr; }
  .dv-hero__visual { order: 2; }
  .dv-hero__copy { order: 1; }
  .dv-hero__placeholder { aspect-ratio: 4 / 3; }
}
/* ==========================================================================
   Hero refinements after the first visual pass.
   ========================================================================== */

/* The copy column carries a headline plus three cards, so it needs more than
   half the row. */
@media (min-width: 1024px) {
  .dv-hero__inner { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
  .dv-hero { padding-block: var(--dv-lg) var(--dv-xl); }
}

/* Three deliberate lines. Each line still wraps on its own if the viewport is
   narrow, so nothing overflows on a phone. */
.dv-hero__line { display: block; }

.dv-hero__title {
  font-size: clamp(2.125rem, 3.4vw, 3.25rem);
  text-wrap: normal;
}

/* Path cards inside a hero column are tighter than standalone ones: the badge
   leaves the title line and sits in the corner so titles stay on one line. */
.dv-hero .dv-path { min-height: 72px; padding: 12px 14px; gap: 10px; }

.dv-hero .dv-path__title { font-size: 0.875rem; }

.dv-hero .dv-path__note { font-size: 0.75rem; }

.dv-path__badge {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  padding: 0;
  font-size: 0.5625rem;
  color: var(--dv-ink-muted);
}

.dv-hero .dv-path__arrow { display: none; }

/* Give the badge room so it never collides with the title. */
.dv-hero .dv-path--has-badge .dv-path__title { padding-right: 56px; }

@media (min-width: 560px) and (max-width: 1023px) {
  .dv-hero .dv-path { min-height: 80px; }
}
/* Badge collision fix. Only a card that actually has a badge reserves room for
   it, so the other two titles keep the full width. */
.dv-path:has(.dv-path__badge) .dv-path__title { padding-right: 64px; }

/* Titles may wrap to two lines in a hero column. Top-align the card so a
   wrapped title reads as deliberate rather than mis-centred. */
.dv-hero .dv-path { align-items: flex-start; }
.dv-hero .dv-path__icon { margin-top: 2px; }
.dv-hero .dv-path__title { align-items: flex-start; line-height: 1.25; }

/* Cards in a row match heights so the group reads as one control. */
.dv-paths { align-items: stretch; }
/* Reserving badge room at the top forced a three-line title. The badge moves to
   the bottom corner, where the short note leaves space, and the title gets the
   full width back. */
.dv-path:has(.dv-path__badge) .dv-path__title { padding-right: 0; }

.dv-path__badge {
  position: absolute;
  top: auto;
  bottom: 10px;
  right: 12px;
  font-size: 0.5625rem;
  font-weight: var(--dv-fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dv-ink-muted);
}

/* Room for the badge under the note. */
.dv-hero .dv-path:has(.dv-path__badge) { padding-bottom: 26px; }
/* ==========================================================================
   Hero on phones.

   The design requires the ordering paths in the first viewport. At 375px the
   34px headline wrapped every line, spending the whole screen on type and
   pushing the cards under the fold, so the floor drops and the padding tightens.
   ========================================================================== */

@media (max-width: 767px) {
  .dv-hero { padding-block: var(--dv-lg) var(--dv-lg); }

  /* 30px keeps "Premium Transfers." on one line at 375px. */
  .dv-hero__title { font-size: clamp(1.75rem, 8vw, 2.25rem); }

  .dv-hero__lead {
    margin-bottom: var(--dv-md);
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .dv-hero .dv-path { min-height: 60px; padding: 10px 14px; }
  .dv-hero .dv-path:has(.dv-path__badge) { padding-bottom: 10px; }

  /* With one card per row there is width for the badge back on the title line. */
  .dv-path__badge { position: static; margin-left: auto; }

  .dv-paths { gap: 6px; margin-bottom: var(--dv-md); }

  .dv-assure { gap: var(--dv-sm) var(--dv-md); }
  .dv-assure li { font-size: 0.8125rem; }
}
/* Trust bar ---------------------------------------------------------------
   Five facts on the light surface. Below desktop it becomes a two column grid
   rather than a five high stack.
   -------------------------------------------------------------------------- */

.dv-trustband { background: var(--dv-surface); border-block: 1px solid var(--dv-line); }

.dv-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dv-md) var(--dv-lg);
  margin: 0;
  padding-block: var(--dv-lg);
  list-style: none;
}

@media (min-width: 640px) { .dv-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dv-trust { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--dv-lg); } }

.dv-trust__item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }

.dv-trust__icon { flex: none; color: var(--dv-accent); margin-top: 1px; }

.dv-trust__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.dv-trust__title { font-size: 0.875rem; font-weight: var(--dv-fw-bold); line-height: 1.25; }

.dv-trust__note { font-size: 0.75rem; line-height: 1.35; color: var(--dv-ink-muted); }

/* Service cards -----------------------------------------------------------
   Five categories. Desktop five across; tablet three; phones a horizontal
   scroll-snap row, which scans far faster than a five high stack.
   -------------------------------------------------------------------------- */

.dv-services {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--dv-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dv-services__item { min-width: 0; display: flex; }

.dv-service {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--dv-bg);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--dv-ink);
  transition: border-color 0.18s var(--dv-ease);
}
.dv-service:hover { border-color: var(--dv-ink); color: var(--dv-ink); }

.dv-service__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--dv-surface-alt);
  overflow: hidden;
}

.dv-service__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dv-service__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.dv-service__placeholder img { width: 44px; height: 44px; opacity: 0.16; }

.dv-service__foot {
  display: flex;
  align-items: center;
  gap: var(--dv-sm);
  padding: 14px;
  border-top: 1px solid var(--dv-line);
}

.dv-service__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.dv-service__title { font-size: 0.9375rem; font-weight: var(--dv-fw-bold); line-height: 1.2; }

.dv-service__note { font-size: 0.75rem; line-height: 1.35; color: var(--dv-ink-muted); }

.dv-service__arrow {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--dv-ink);
  border-radius: var(--dv-r-pill);
  color: #FFFFFF;
  transition: background-color 0.18s var(--dv-ease);
}
.dv-service:hover .dv-service__arrow { background: var(--dv-accent); }

@media (max-width: 1023px) {
  .dv-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .dv-services {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: var(--dv-sm);
    scrollbar-width: thin;
  }
  .dv-services__item { flex: 0 0 70%; scroll-snap-align: start; }
}
/* ==========================================================================
   DV HOW IT WORKS
   Heading left, three numbered steps right. A different layout family from the
   card grid above it, so the page does not read as one repeated pattern.
   ========================================================================== */

.dv-howband { background: var(--dv-bg); }

.dv-how__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dv-lg);
}

@media (min-width: 1024px) {
  .dv-how__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--dv-xl); align-items: start; }
}

.dv-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dv-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

@media (min-width: 640px) { .dv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dv-md); } }

.dv-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num icon" "num title" "num note";
  column-gap: var(--dv-md);
  row-gap: 4px;
  align-content: start;
}

.dv-steps__num {
  grid-area: num;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: var(--dv-accent);
  border-radius: var(--dv-r-pill);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: var(--dv-fw-bold);
  line-height: 1;
}

.dv-steps__icon { grid-area: icon; color: var(--dv-ink); margin-bottom: 2px; }

.dv-steps__title {
  grid-area: title;
  font-size: 1rem;
  font-weight: var(--dv-fw-bold);
  line-height: 1.25;
}

.dv-steps__note {
  grid-area: note;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dv-ink-muted);
  max-width: 26em;
}

/* ==========================================================================
   DV FEATURED PRODUCTS
   ========================================================================== */

.dv-featured__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dv-md);
  margin-bottom: var(--dv-lg);
}

.dv-featband { background: var(--dv-surface); border-block: 1px solid var(--dv-line); }

/* ==========================================================================
   DV WHOLESALE BAND
   The single inverted section on the page, which is what gives it its one
   moment of depth. Photograph sits behind at low opacity, no gradient.
   ========================================================================== */

.dv-wholeband {
  position: relative;
  background: var(--dv-ink);
  overflow: hidden;
}

.dv-wholeband__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.dv-wholeband__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.dv-wholeband > .e-con-inner,
.dv-wholeband > div { position: relative; z-index: 1; }

.dv-whole__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dv-lg);
  align-items: center;
}

@media (min-width: 1024px) {
  .dv-whole__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--dv-xl); }
}

.dv-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dv-md) var(--dv-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dv-benefits__item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }

.dv-benefits__icon { flex: none; color: var(--dv-accent); margin-top: 1px; }

.dv-benefits__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.dv-benefits__title { font-size: 0.875rem; font-weight: var(--dv-fw-bold); line-height: 1.25; color: #FFFFFF; }

.dv-benefits__note { font-size: 0.75rem; line-height: 1.35; color: rgba(255,255,255,0.64); }

/* ==========================================================================
   DV REVIEWS
   ========================================================================== */

.dv-reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dv-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) { .dv-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.dv-review {
  display: flex;
  flex-direction: column;
  gap: var(--dv-md);
  padding: var(--dv-lg);
  background: var(--dv-bg);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-md);
}

.dv-review__quote { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--dv-ink); }

.dv-review__who { margin: 0; display: flex; flex-direction: column; gap: 2px; }

.dv-review__name { font-size: 0.875rem; font-weight: var(--dv-fw-bold); }

.dv-review__detail { font-size: 0.75rem; color: var(--dv-ink-muted); }

.dv-admin-note--light {
  color: var(--dv-ink-muted);
  background: var(--dv-surface-alt);
  border-color: var(--dv-line);
}

/* Section heading shared by the lower sections. */
.dv-sec-head { margin: 0 0 var(--dv-md); }
.dv-sec-sub { margin: 0 0 var(--dv-lg); color: var(--dv-ink-muted); max-width: 34em; }
/* ==========================================================================
   DV ELEMENTOR BUTTON
   Elementor's button widget carries its own look. Rather than styling it inside
   the widget, where a colour would end up hardcoded in page data, it inherits
   the theme button here.
   ========================================================================== */

.dv-btn-wrap .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dv-sm);
  min-height: 48px;
  padding: 0 24px;
  background: var(--dv-accent);
  border: 1px solid transparent;
  border-radius: var(--dv-r-sm);
  color: var(--dv-accent-ink);
  font-family: var(--dv-font);
  font-size: 0.9375rem;
  font-weight: var(--dv-fw-bold);
  line-height: 1;
  text-decoration: none;
  fill: currentColor;
  transition: background-color 0.18s var(--dv-ease);
}

.dv-btn-wrap .elementor-button:hover,
.dv-btn-wrap .elementor-button:focus {
  background: var(--dv-accent-hover);
  color: var(--dv-accent-ink);
}

.dv-btn-wrap .elementor-button-content-wrapper { gap: var(--dv-sm); }

/* Wholesale band background layer. The photograph URL is printed inline by the
   theme because the uploads path differs between staging and production. */
.dv-wholeband { isolation: isolate; }
.dv-wholeband > * { position: relative; z-index: 1; }
/* Wholesale band background photograph, behind the carbon ground. */
.dv-wholeband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../../../../uploads/2026/09/decovink-wholesale-trade-printing-warehouse-819x1024.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.20;
  pointer-events: none;
}

/* ==========================================================================
   DV INVERTED SECTION FIXES

   Elementor paints heading widgets with its own global primary colour, which
   is carbon, and that rule outweighs the theme's .dv-invert h2. On the dark
   band the result was a near black heading on a dark photograph. These rules
   restore the inverted treatment without putting any colour into page data.
   ========================================================================== */

.dv-invert .elementor-widget-heading .elementor-heading-title,
.dv-invert .elementor-widget-text-editor,
.dv-invert .elementor-widget-text-editor p { color: #FFFFFF; }

.dv-invert .dv-lead,
.dv-invert .elementor-widget-text-editor p { color: rgba(255, 255, 255, 0.76); }

.dv-invert .dv-eyebrow--muted { color: rgba(255, 255, 255, 0.62); }

/* The photograph was reading as a full strength image behind white text.
   Dropped to a texture so the copy is unambiguously legible. A flat knock
   back, not a gradient scrim, which the design does not allow. */
.dv-wholeband::before { opacity: 0.12; }

/* ==========================================================================
   DV EMPTY SECTIONS

   Featured products and reviews are wired to real data. Until that data
   exists they would render as a heading over blank space, which reads as
   broken. The shortcode emits a marker for visitors only, so the section
   collapses for them and stays visible to admins with its notice.
   ========================================================================== */

.dv-section:has(.dv-empty) { display: none; }
/* DV WHOLEBAND FRAMING
   The source photograph is portrait, so cover crops it to a narrow central
   slice dominated by a close up printed box. Framing higher shows the racking
   and floor depth instead, which reads as scale rather than as a logo repeat
   sitting behind the copy. */
.dv-wholeband::before {
  opacity: 0.10;
  background-position: center 22%;
}
/* DV BENEFITS ODD LAST
   With an odd number of benefits the final cell would sit alone against an
   empty one. Spanning it keeps the block square. */
.dv-benefits__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ==========================================================================
   DV TRUST BAR V2

   Icon above centred text, per the supplied reference. The previous icon left
   arrangement misaligned the whole row whenever one title wrapped to two
   lines, which is exactly what happened to "Canada-Wide Shipping".
   ========================================================================== */

.dv-trustband { background: var(--dv-bg); }

.dv-trust { padding-block: var(--dv-xl); gap: var(--dv-lg) var(--dv-md); }

.dv-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.dv-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin: 0;
  color: inherit;
}

.dv-ficon { display: block; }

.dv-trust__body { align-items: center; text-align: center; gap: 3px; }

.dv-trust__title { font-size: 0.9375rem; font-weight: var(--dv-fw-bold); line-height: 1.25; }

.dv-trust__note { font-size: 0.8125rem; line-height: 1.4; color: var(--dv-ink-muted); }

@media (max-width: 639px) {
  .dv-trust { padding-block: var(--dv-lg); }
  .dv-trust__icon { height: 40px; }
  .dv-ficon { width: 36px; height: 36px; }
  .dv-trust__title { font-size: 0.875rem; }
  .dv-trust__note { font-size: 0.75rem; }
}
/* ==========================================================================
   DV TRUST ARTWORK

   The supplied icons have different aspect ratios: the truck is 309x142 and
   the gem is 162x182. Sizing by width would make the truck tower over the gem,
   so they are constrained by height with width left free, which lines them up
   on a common optical baseline. Larger than the drawn set was, because these
   carry more internal detail and the reference shows them with real presence.
   ========================================================================== */

.dv-trust__icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 64px;
  margin-bottom: 4px;
}

.dv-trust__art {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  display: block;
}

@media (min-width: 1024px) {
  .dv-trust__icon { height: 72px; }
  .dv-trust__art { max-height: 72px; }
  .dv-trust { padding-block: var(--dv-xxl); gap: var(--dv-lg) var(--dv-lg); }
}

@media (max-width: 639px) {
  .dv-trust__icon { height: 52px; }
  .dv-trust__art { max-height: 52px; }
}

/* Benefits on a light background ---------------------------------------- */
/* The base component is white-on-carbon for the homepage band. On a light
   section that white was invisible, so this variant swaps to ink tokens.
   It also steps the type up a size, because here the list sits under a
   full section headline rather than inside a compact band. */
.dv-benefits--light .dv-benefits__title { color: var(--dv-ink); font-size: 1rem; }
.dv-benefits--light .dv-benefits__note  { color: var(--dv-ink-muted); font-size: 0.875rem; }
.dv-benefits--light .dv-benefits__icon  { margin-top: 2px; }

/* Ordering routes with card images ---------------------------------------- */
/* Opt-in via [dv_order_paths images="yes"]. The image runs full bleed across
   the top of the card (the negative margin cancels the card's 16px side
   padding) and the card clips it to its rounded corners. The existing
   icon / title / note row wraps underneath unchanged. */
.dv-paths--media .dv-path {
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0;
  overflow: hidden;
}
.dv-paths--media .dv-path__media {
  display: block;
  flex: 0 0 calc(100% + 32px);
  margin: 0 -16px 12px;
  background: #fff;
  border-bottom: 1px solid var(--dv-line);
  overflow: hidden;
}
.dv-paths--media .dv-path--primary .dv-path__media { border-bottom-color: transparent; }
.dv-paths--media .dv-path__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.35s var(--dv-ease);
}
.dv-paths--media .dv-path:hover .dv-path__media img,
.dv-paths--media .dv-path:focus-visible .dv-path__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .dv-paths--media .dv-path__media img { transition: none; }
  .dv-paths--media .dv-path:hover .dv-path__media img { transform: none; }
}

/* Tight trust strip ------------------------------------------------------- */
/* The trust bar carried two stacked paddings: the section's own 96px plus
   the list's 96px, so 126px of icons sat in a 512px band. The tight variant
   drops the section padding and keeps a modest inset inside the border.
   Opt-in per page so the homepage strip is unchanged. */
.dv-section.dv-trustband--tight { padding-block: 0; }
.dv-trustband--tight .dv-trust { padding-block: 32px; }
@media (max-width: 639px) {
  .dv-trustband--tight .dv-trust { padding-block: 24px; }
}

/* Inline video ------------------------------------------------------------ */
/* Full width of the wrap, so its edges line up with the content blocks below.
   aspect-ratio reserves the space before any bytes arrive (preload="none"),
   so nothing shifts when the poster or the clip loads. */
.dv-video {
  margin: var(--dv-lg) 0 0;
}
.dv-video__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #161616;
  border-radius: var(--dv-r-md);
  object-fit: cover;
}
.dv-video__caption {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--dv-ink-muted);
}

/* Small inline video: sits above a heading inside a column. */
.dv-video--small { margin: 0 0 20px; max-width: 420px; }
.dv-video--small .dv-video__media { border-radius: var(--dv-r-sm); }
.dv-video--small:not(:first-child) { margin-top: 24px; }