:root {

  --dp-font-heading : "myriadpro-regular", "Roboto", Arial, sans-serif;
  --dp-font-body    : "myriadpro-regular", "Roboto", Arial, sans-serif;

  /* Brand colors — do not change */
  --dp-red   : #e51937;
  --dp-dark  : #1c1c1c;
  --dp-white : #ffffff;
  --dp-text  : #888888;

  /* Diagonal slant depth */
  --dp-slant : 8%;
}


/* =============================================================
   WRAPPER
   ============================================================= */

.dp-page {
  font-family : var(--dp-font-body);
  color       : var(--dp-text);
  max-width   : 100%;
}


/* =============================================================
   INTRO PARAGRAPH
   ============================================================= */

.dp-intro {
  max-width  : 820px;
  margin     : 40px auto;
  padding    : 0 24px;
  text-align : center;
  font-size  : 1.05rem;
  line-height: 1.75;
}


/* =============================================================
   FEATURE BANNERS
   Desktop : image + colored content side-by-side with diagonal slice
   Mobile  : text block on top, image below, no diagonal
   ============================================================= */

.dp-banner {
  display       : flex;
 /*  height        : 150px; */
  overflow      : hidden;
  margin-bottom : 4px;
}

/* ── image half ── */
.dp-banner__img {
  flex     : 0 0 46%;
  overflow : hidden;
  position : relative;
}
.dp-banner__img img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
}

/* ── content: image LEFT · colored block RIGHT (angled left edge) ── */
.dp-banner__content--right {
  flex        : 0 0 62%;
  margin-left : -8%;
  clip-path   : polygon(var(--dp-slant) 0, 100% 0, 100% 100%, 0 100%);
  display     : flex;
  flex-direction : column;
  justify-content: center;
  padding     : 20px 50px 20px 90px;
  color       : var(--dp-white);
  position    : relative;
  z-index     : 1;
}

/* ── content: colored block LEFT · image RIGHT (angled right edge) ── */
.dp-banner__content--left {
  flex         : 0 0 62%;
  margin-right : -8%;
  clip-path    : polygon(0 0, 100% 0, calc(100% - var(--dp-slant)) 100%, 0 100%);
  display      : flex;
  flex-direction : column;
  justify-content: center;
  padding      : 20px 90px 20px 50px;
  color        : var(--dp-white);
  position     : relative;
  z-index      : 1;
}

/* ── color modifiers ── */
.dp-banner__content--red  { background: var(--dp-red);  }
.dp-banner__content--dark { background: var(--dp-dark); text-align: right; }

/* ── text inside banners ── */
.dp-banner__title {
  font-family   : var(--dp-font-heading);
  font-size     : 1.8rem;
  font-weight   : 900;
  margin-bottom : 7px;
  line-height   : 1.2;
}

.dp-banner__subtitle {
  font-size   : 1.3rem;
  opacity     : 0.93;
}
.dp-banner__subtitle .sep {
  margin  : 0 5px;
  opacity : 0.6;
}


/* =============================================================
   LOGO GRID — Extensive Inventory of Premium Brands
   ============================================================= */

.dp-logos {
  padding    : 42px 24px 48px;
  text-align : center;
}

.dp-logos__heading {
  font-family   : var(--dp-font-heading);
  color         : var(--dp-red);
  font-size     : 1.65rem;
  font-weight   : 600;
  margin-bottom : 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dp-logos__grid {
  display         : flex;
  flex-wrap       : wrap;
  justify-content : center;
  max-width       : 840px;
  margin          : 0 auto;
}

.dp-logos__item {
  flex            : 0 0 12.5%; /* 8 per row */
  display         : flex;
  align-items     : center;
  justify-content : center;
  padding         : 10px 6px;
}

.dp-logos__item img {
  max-width  : 80px;
  max-height : 30px;
  object-fit : contain;
  display    : block;
}


/* =============================================================
   CTA SECTION
   ============================================================= */

.dp-cta {
  padding    : 55px 24px 65px;
  text-align : center;
  background : var(--dp-white);
}

.dp-cta p {
  font-size   : 1.3rem;
  color       : var(--dp-text);
  margin-bottom: 4px;
}

.dp-cta__buttons {
  display         : flex;
  gap             : 14px;
  justify-content : center;
  margin-top      : 22px;
  flex-wrap       : wrap;
}

.dp-btn {
  font-family    : var(--dp-font-heading);
  font-size      : 0.88rem;
  font-weight    : 800;
  letter-spacing : 0.1em;
  padding        : 13px 32px;
  text-decoration: none;
  display        : inline-block;
  text-transform : uppercase;
  cursor         : pointer;
  border         : 2px solid var(--dp-red);
  transition     : background 0.2s, color 0.2s;
  line-height: 1.1em;
}

.dp-btn--primary,
.dp-btn--primary:link,
.dp-btn--primary:visited {
  background : var(--dp-red);
  color      : var(--dp-white) !important;
}
.dp-btn--primary:hover { background: #c2102c; border-color: #c2102c; }

.dp-btn--outline {
  background : transparent;
  color      : var(--dp-red);
}
.dp-btn--outline:hover { background: var(--dp-red); color: var(--dp-white); }


/* =============================================================
   RESPONSIVE — TABLET
   ============================================================= */

@media (max-width: 768px) {
  .dp-banner                    { height: 130px; }
  .dp-banner__title             { font-size: 1.2rem; }
  .dp-banner__subtitle          { font-size: 0.74rem; }
  .dp-banner__content--right    { padding: 16px 30px 16px 70px; }
  .dp-banner__content--left     { padding: 16px 70px 16px 30px; }
}


/* =============================================================
   RESPONSIVE — MOBILE  ≤ 560px
   Text block stacks ON TOP · image below · no diagonal
   ============================================================= */

@media (max-width: 560px) {

  .dp-banner {
    flex-direction : column;
    height         : auto;
  }

  /* Text always on top */
  .dp-banner__content--right,
  .dp-banner__content--left {
    flex      : none;
    width     : 100%;
    order     : 1;
    margin    : 0;
    clip-path : none;
    padding   : 22px 24px;
    text-align: center;
  }

  /* Image always below */
  .dp-banner__img {
    flex   : none;
    width  : 100%;
    height : 180px;
    order  : 2;
  }

  .dp-banner__title    { font-size: 1.25rem; }
  .dp-banner__subtitle { font-size: 0.78rem; }

  /* Logos: 4 per row on mobile */
  .dp-logos__item { flex: 0 0 25%; }

  .dp-cta__buttons       { flex-direction: column; align-items: center; }
  .dp-btn                { width: 240px; text-align: center; }
}

/* Extra-small: 2 logos per row */
@media (max-width: 360px) {
  .dp-logos__item { flex: 0 0 50%; }
}