/* ==========================================================
   Deliverables-Based IT Services  (DBITS)
   page-deliverables-it-services.css  v2.0
   Figma node: 1187:394
   Enqueued only on the DBITS page template.
   ========================================================== */

/* ── Page tokens (scoped so they don't pollute global :root) ── */
.intone-dbits-page {
  --dbits-dark: #1a1e23;
  --dbits-border: #445b78;
  --dbits-navy: #09101d;
  --dbits-mid: #2c3a4b;
  --dbits-light: #f4f6f9;
  --dbits-badge-bg: rgba(0, 178, 255, 0.1);
  --dbits-badge-bdr: #0173c2;
}

.intone-dbits-page *,
.intone-dbits-page *::before,
.intone-dbits-page *::after {
  box-sizing: border-box;
}

/* ── Scroll-reveal on entrance — same fade+slide-up pattern used
   site-wide (see page-erp-crm.css .reveal); this page had none. ── */
@media (scripting: enabled) {
  .intone-dbits-page .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.intone-dbits-page .reveal.in {
  opacity: 1;
  transform: none;
}


/* ═══════════════════════════════════════════════════════════
   HERO  (Figma: 800px white bg, title BLACK at top, sub at bottom)
   ─────────────────────────────────────────────────────────
   Layout (matches Figma node 1187:394):
     Top (y~123px):  DIR logo  +  contract badge (side by side)
     Middle (y~205px): large black title, flex-grows to fill space
     Bottom (~y571px): sub-paragraph  +  two buttons
   After this section: separate .dbits-hero-photo strip (750px)
   ═══════════════════════════════════════════════════════ */
/* ── Breadcrumb — dedicated DBITS position class ──
   Same reasoning as page-legal.css's .intone-breadcrumb--legal-hero:
   standalone so it can be tuned for .dbits-hero without touching (or
   being touched by) every other hero-led page's shared --over-hero.
   breadcrumbs.php emits this instead of --over-hero specifically on
   page-deliverables-it-services.php.
   The `top` here and .dbits-hero's `padding-top` below are ONE formula
   (offset by a constant 60px = the breadcrumb's own ~48px rendered
   height + a 12px gap) so they can never drift out of sync — was
   overlapping the hero title by ~20px at several widths between
   480-960px before this (only the ≤480px breakpoint had ever been
   patched, with an isolated one-off value). */
.intone-breadcrumb--dbits-hero {
  position: absolute;
  top: clamp(70px, 8vw + 30px, 130px);
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
  background: transparent;
}

.dbits-hero {
  background: #fff;
  min-height: clamp(480px, 56vw, 800px);
  padding: clamp(130px, 8vw + 90px, 190px) var(--gutter) 0;
  display: flex;
  flex-direction: column;
}

/* ── DIR logo + badge row (top of hero) ── */
.dbits-hero__top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  flex-shrink: 0;
}

.dbits-dir-logo {
  height: clamp(40px, 5vw, 72px);
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

/* DIR contract badge pill */
.dbits-contract-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dbits-badge-bg);
  border: 1px solid var(--dbits-badge-bdr);
  border-radius: 4px;
  padding: 8px 14px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.36;
  color: #000;
  text-transform: uppercase;
  flex-wrap: wrap;
}

.dbits-contract-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dbits-badge-bdr);
  flex-shrink: 0;
}

.dbits-contract-badge a {
  color: #000;
  text-decoration: underline;
}

.dbits-contract-badge a:hover {
  color: #0173c2;
}

/* DIR logo inside badge (right of "Active") */
.dbits-contract-badge__logo {
  height: clamp(24px, 2.5vw, 36px);
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Title: BLACK text on white bg (NOT clip-text) ── */
/* Override the white/clip-text defaults from home-hero__title */
.intone-dbits-page .home-hero__title,
.intone-dbits-page .home-hero__title.is-clip-text {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background-image: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  margin: 0 0 auto;
  /* flex item: pushes sub-row to the bottom */
  flex-shrink: 0;
}

/* ── Sub-text + buttons (bottom of hero) ── */
.dbits-hero__sub {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 56px 0 clamp(48px, 5vw, 80px);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.dbits-hero__text {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(15px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.36;
  color: #000;
  /* text-transform: uppercase; */
  margin: 0;
  max-width: 691px;
  flex: 1;
}

.dbits-hero__text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ds-gold, #f6b43f);
  text-underline-offset: 2px;
  transition: text-decoration-thickness 0.2s ease;
}

.dbits-hero__text a:hover {
  text-decoration-thickness: 3px;
}

.dbits-hero__buttons {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.btn-dbits-outline {
  background: #fff;
  border: 1px solid #09101d;
  padding: 12px 24px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  color: #09101d;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.btn-dbits-outline:hover {
  background: #f4f6f9;
  text-decoration: none;
  color: #09101d;
}

.btn-dbits-dark {
  background: #262626;
  border: none;
  padding: 12px 24px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 0.2s;
}

.btn-dbits-dark:hover {
  background: #3a3a3a;
  text-decoration: none;
  color: #fff;
}

/* ── Photo strip — SEPARATE section below the hero ──
   Figma: left:44px, w:1352px, h:750px (→ responsive scaling)  */
.dbits-hero-photo {
  padding: 0 var(--gutter);
}

.dbits-hero-photo__inner {
  width: 100%;
  height: clamp(220px, 50vw, 750px);
  overflow: hidden;
  background: #1e2e4c;
}

.dbits-hero-photo__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ═══════════════════════════════════════════════════════════
   DARK SERVICES SECTION
   ═══════════════════════════════════════════════════════ */
.dbits-services {
  /* background: #000; */
  padding: 100px var(--gutter);
}

.dbits-services__heading {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 700;
  line-height: normal;
  /* color: #fff; */
  text-transform: uppercase;
  margin: 0 0 48px;
}

.dbits-services__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  margin: 0 0 32px;
}

.dbits-services__label {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(14px, 7vw, 40px);
  font-weight: 700;
  line-height: normal;
  /* color: var(--ds-gold, #f6b43f); */
  /* text-transform: uppercase; */
  margin: 0 0 40px;
}

/* Service card grid */
.dbits-cards-row {
  display: grid;
  gap: 24px;
  margin-bottom: 24px;
}

.dbits-cards-row--3 {
  grid-template-columns: repeat(3, 1fr);
}

.dbits-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 277px;
  transition: transform 0.25s;
}

.dbits-card:hover {
  transform: translateY(-3px);
}

.dbits-card--gold {
  background: var(--ds-gold, #f6b43f);
  justify-content: space-between;
}

/* .dbits-card--gold .dbits-card__title { color: #fff; } */

.dbits-card--light {
  background: #f4f6f9;
  border: 1px solid e3e9f2;
  justify-content: space-between;
}

.dbits-card--light .dbits-card__title {
  color: #09101d;
}

.dbits-card--dark {
  background: #f4f6f9;
  border: 1px solid #e3e9f2;
  justify-content: space-between;
}

/* .dbits-card--dark .dbits-card__title { color: #fff; } */
/* .dbits-card--dark .dbits-card__body  { color: rgba(255,255,255,0.85); } */

.dbits-card__title {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.36;
  text-transform: uppercase;
  margin: 0;
}

.dbits-card__body {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.36;
  margin: 0;
  /* color: rgba(255,255,255,0.85); */
}


/* ═══════════════════════════════════════════════════════════
   PROJECT MANAGEMENT INFO PANELS
   ═══════════════════════════════════════════════════════ */
.dbits-panels {
  padding: 60px var(--gutter);
}

.dbits-panel {
  background: #f4f6f9;
  padding: 44px;
  margin-bottom: 24px;
}

.dbits-panel:last-child {
  margin-bottom: 0;
}

.dbits-panel__title {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.36;
  color: #09101d;
  /* text-transform: uppercase; */
  margin: 0 0 24px;
}

.dbits-panel__body {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.36;
  color: #596068;
  margin: 0 0 12px;
}

.dbits-panel__body:last-child {
  margin-bottom: 0;
}

.dbits-panel__note {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  font-style: italic;
  color: #555;
  margin: 16px 0 0;
}

/* Bullet list */
.dbits-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dbits-bullet-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.36;
  color: #596068;
}

/* Figma's actual bullet (node 1187:457, "Presence") is a checkmark inside
   a ring, fill #596068 — not a plain filled dot. Exported and inlined as
   the real vector data rather than hand-drawn, per its exact path. */
.dbits-bullet-list li::before {
  content: '';
  width: 16px;
  height: 16px;
  min-width: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.7071 6.70711C12.0976 6.31658 12.0976 5.68342 11.7071 5.29289C11.3166 4.90237 10.6834 4.90237 10.2929 5.29289L7 8.58579L5.70711 7.29289C5.31658 6.90237 4.68342 6.90237 4.29289 7.29289C3.90237 7.68342 3.90237 8.31658 4.29289 8.70711L6.29289 10.7071C6.68342 11.0976 7.31658 11.0976 7.70711 10.7071L11.7071 6.70711ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2Z' fill='%23596068'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Tag chips */
.dbits-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dbits-tag {
  background: #fff;
  border-radius: 4px;
  padding: 5px 12px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.36;
  color: #09101d;
  white-space: nowrap;
  transition: background 0.2s;
}

.dbits-tag:hover {
  background: #e0e3e7;
}


/* ═══════════════════════════════════════════════════════════
   FIVE STEPS  (Figma node 1187:488–492)
   ─────────────────────────────────────────────────────────
   Layout from Figma:
     Left  (flex:1)         "Five Steps" title + subtitle + nav btns
     Right (width:811px)    height:349px, overflow-y:auto — native scroll
   JS role: scroll the viewport by one card height on btn click.
   ═══════════════════════════════════════════════════════ */
.dbits-five-steps {
  display: flex;
  gap: 44px;
  align-items: center;
  /* vertically centred per Figma */
  padding-bottom: 24px;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* LEFT: title block + nav buttons (stacked) */
.dbits-five-steps__left {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dbits-five-steps__label-num {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 700;
  line-height: normal;
  color: #09101d;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

.dbits-five-steps__label-sub {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 700;
  line-height: 1.36;
  color: #09101d;
  margin: 0;
}


/* RIGHT: native-scroll viewport — Figma: w-811px, h-349px, overflow-y:auto */
.dbits-steps-viewport {
  flex: 0 0 811px;
  height: 349px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--ds-gold, #f6b43f) #f4f6f9;
}

.dbits-steps-viewport::-webkit-scrollbar {
  width: 4px;
}

.dbits-steps-viewport::-webkit-scrollbar-track {
  background: #f4f6f9;
}

.dbits-steps-viewport::-webkit-scrollbar-thumb {
  background: var(--ds-gold, #f6b43f);
  border-radius: 2px;
}

/* Track: simple flex column — no transform, native scroll handles position */
.dbits-steps-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Individual step card */
.dbits-step {
  background: #fff;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-left: 4px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dbits-step:hover {
  border-left-color: var(--ds-gold, #f6b43f);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.dbits-step__num {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(56px, 7vw, 128px);
  font-weight: 700;
  line-height: 1;
  color: #ebeef2;
  flex-shrink: 0;
  width: 80px;
  text-align: center;
  margin: 0;
  transition: color 0.2s;
}

.dbits-step:hover .dbits-step__num {
  color: var(--ds-gold, #f6b43f);
}

.dbits-step__body {
  flex: 1;
}

.dbits-step__title {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.36;
  color: #09101d;
  /* text-transform: uppercase; */
  margin: 0 0 8px;
}

.dbits-step__text {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.36;
  color: #2c3a4b;
  margin: 0;
  white-space: pre-line;
}


/* ═══════════════════════════════════════════════════════════
   ABOUT DIR SECTION
   ═══════════════════════════════════════════════════════ */
.dbits-dir {
  display: flex;
  align-items: stretch;
  min-height: 560px;
  overflow: hidden;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  gap: clamp(12px, 2vw, 24px);
}

.dbits-dir__sidebar {
  flex: 0 0 360px;
  background: var(--ds-gold, #f6b43f);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.dbits-dir__sidebar-text {
  transform: rotate(-90deg);
  white-space: nowrap;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 700;
  text-transform: uppercase;
  color: #09101d;
  line-height: normal;
  user-select: none;
}

.dbits-dir__content {
  flex: 1;
  /* background: #09101d; */
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dbits-dir__mission-label {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 42px;
  font-weight: 700;
  line-height: normal;
  /* color: var(--ds-gold, #f6b43f); */
  text-transform: uppercase;
  margin: 0;
}

.dbits-dir__mission-text {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.36;
  /* color: #fff; */
  margin: 0;
}

.dbits-dir__mission-text a {
  color: #09101d;
  text-decoration: underline;
}

.dbits-dir__note {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.36;
  /* color: #a5abb3; */
  margin: 0;
}

.dbits-dir__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 8px;
}

.dbits-dir__panel {
  /* background: #2c3a4b; */
  padding: 24px 32px;
}

.dbits-dir__panel-title {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.36;
  /* color: #fff; */
  margin: 0 0 12px;
}

.dbits-dir__panel-body {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.36;
  /* color: #fff; */
  margin: 0;
}

.dbits-dir__panel-body a {
  color: #09101d;
  text-decoration: underline;
}

.dbits-dir__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dbits-dir__links a {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.36;
  color: #09101d;
  text-decoration: underline;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

.dbits-dir__links a:hover {
  color: var(--ds-gold, #f6b43f);
  text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════
   OBTAIN QUOTES
   Figma node 1187:597
   Layout:
     Left (912/1352 = 67.3%): stacked step cards
       Each step: header band (172px) + full image (581px)
     Right (406/1352 = 30%): gold sidebar "PLACE ORDERS"
   Hover: header band background → gold, image scales 1.04
   ═══════════════════════════════════════════════════════ */
.dbits-quotes {
  padding: 60px var(--gutter);
}

.dbits-quotes__header {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 21px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}

.dbits-quotes__label {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 24px;
  font-weight: 700;
  color: #09101d;
  text-transform: uppercase;
  margin: 0;
}

.dbits-quotes__sub {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: #09101d;
  /* text-transform: uppercase; */
  text-align: right;
  margin: 0;
  max-width: 600px;
}

/* ═══════════════════════════════════════════════════════════
   OBTAIN QUOTES  (Figma node 1187:597)
   ─────────────────────────────────────────────────────────
   Layout from Figma (1352px total):
     Left  (912px = 67.3%):  ONE step visible at a time (753px tall),
                              second step hidden below.
     Right (406px = 30.1%):  Gold sidebar, "PLACE ORDERS" rotated.

   Hover interaction — pure CSS, zero JavaScript:
     Default → Step 1 (header 172px + image 581px) fills the 753px window
     Hover   → inner track slides up 753px, revealing Step 2
     Unhover → slides back to Step 1 (transition eases out)
   ═══════════════════════════════════════════════════════ */

/* Per-step height token: header (172px) + image (clamp 581px) */
.dbits-quotes {
  --step-header-h: 172px;
  --step-image-h: clamp(280px, 43vw, 581px);
  --step-h: calc(var(--step-header-h) + var(--step-image-h));
}

/* Outer layout: left column + right gold sidebar */
.dbits-quotes__component {
  display: flex;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
}

/* LEFT: clipping window — shows exactly ONE step at a time */
.dbits-quotes__steps-col {
  flex: 0 0 67.3%;
  /* 912 / 1352 */
  height: var(--step-h);
  /* clips to one step */
  overflow: hidden;
  cursor: default;
}

/* Inner track: two step cards stacked.
   Transition drives the hover-slide between card 1 and card 2. */
.dbits-quotes__steps-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover: slide track up by exactly one step height → reveals card 2 */
.dbits-quotes__steps-col:hover .dbits-quotes__steps-inner {
  transform: translateY(calc(-1 * var(--step-h)));
}

/* Each step card occupies exactly one viewport height */
.dbits-quotes__step-card {
  flex-shrink: 0;
  height: var(--step-h);
  display: flex;
  flex-direction: column;
}

/* ── Header band (top 172px of each card) ── */
.dbits-quotes__step-header {
  flex: 0 0 var(--step-header-h);
  background: #f4f6f9;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  /* text-transform: uppercase; */
  transition: background 0.35s ease;
  overflow: hidden;
}

/* On hover of the column, both headers get the gold treatment */
.dbits-quotes__steps-col:hover .dbits-quotes__step-header {
  background: var(--ds-gold, #f6b43f);
}

/* Step number — large gold */
.dbits-quotes__step-num {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 700;
  line-height: normal;
  color: var(--ds-gold, #f6b43f);
  flex-shrink: 0;
  margin: 0;
  transition: color 0.35s ease;
}

.dbits-quotes__steps-col:hover .dbits-quotes__step-num {
  color: #000;
}

/* Text group */
.dbits-quotes__step-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dbits-quotes__step-title {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.36;
  color: #09101d;
  margin: 0;
  transition: color 0.35s ease;
}

.dbits-quotes__steps-col:hover .dbits-quotes__step-title {
  color: #000;
}

.dbits-quotes__step-desc {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.36;
  color: #09101d;
  margin: 0;
}

/* ── Full-bleed photo (remaining height below header) ── */
.dbits-quotes__step-image {
  flex: 1;
  /* fills the remaining var(--step-image-h) */
  overflow: hidden;
  background: #d9d9d9;
  position: relative;
}

.dbits-quotes__step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

/* Subtle zoom on the image when hovering the column */
.dbits-quotes__steps-col:hover .dbits-quotes__step-image img {
  transform: scale(1.04);
}

/* RIGHT: gold sidebar "PLACE ORDERS" rotated text */
.dbits-quotes__sidebar {
  flex: 1;
  background: var(--ds-gold, #f6b43f);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  min-height: 400px;
}

.dbits-quotes__sidebar-text {
  transform: rotate(-90deg);
  white-space: nowrap;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 700;
  text-transform: uppercase;
  color: #09101d;
  line-height: normal;
  user-select: none;
  letter-spacing: -0.02em;
}


/* ═══════════════════════════════════════════════════════════
   WARRANTIES ARCH SECTION
   ═══════════════════════════════════════════════════════ */
.dbits-warranties {
  position: relative;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: color;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
  /* Fluid instead of frozen at a flat 750px for every width ≥961px (and
     jumping — not scaling — at each breakpoint below that): one clamp()
     hits the same ~400/560/750px anchor points the old fixed-breakpoint
     values did, but scales continuously between and above them too. */
  min-height: clamp(400px, 58vw, 750px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.dbits-warranties__arch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Same fluid treatment as .dbits-warranties above — was flat 623px
     above 960px, then jumped to 440/360/280 at each breakpoint. */
  height: clamp(280px, 100vh, 623px);
  background: #f4f6f9;
  z-index: 1;
}

.dbits-warranties__content {
  position: relative;
  z-index: 3;
  max-width: 1452px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 80px var(--gutter);
}

.dbits-warranties__title {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(28px, 4.5vw, 64px);
  font-weight: 700;
  line-height: normal;
  /* color: #fff; */
  text-transform: uppercase;
  margin: 0;
}

.dbits-warranties__body {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.36;
  /* color: #fff; */
  margin: 0;
}

.dbits-warranties__body a {
  /* color: #fff; */
  text-decoration: underline;
}

.dbits-warranties__body a:hover {
  color: var(--ds-gold, #f6b43f);
}

.btn-dbits-gold {
  background: var(--ds-dark-900);
  border: none;
  padding: 14px 28px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  align-self: flex-start;
  transition: background 0.2s;
}

.btn-dbits-gold:hover {
  background: #d9960f;
  text-decoration: none;
  color: #fff;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER CONTACT STRIP
   ═══════════════════════════════════════════════════════ */
.dbits-footer-contact {
  background: var(--ds-gold, #f6b43f);
  padding: 40px 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dbits-footer-contact__title {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.36;
  color: #09101d;
  text-transform: uppercase;
  margin: 0;
}

.dbits-footer-contact__details {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.36;
  color: #09101d;
  margin: 0;
}

.dbits-footer-contact__details a {
  color: #09101d;
  text-decoration: none;
}

.dbits-footer-contact__details a:hover {
  text-decoration: underline;
}




/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — comprehensive across all sections
   Breakpoints: 1360 | 1200 | 960 | 768 | 640 | 480
   ═══════════════════════════════════════════════════════ */

/* ── 1360px — Five Steps only ──
   .dbits-steps-viewport is a hard-fixed 811px (flex: 0 0 811px, matching
   Figma's literal measurement) that cannot shrink. Below ~1015px
   (811 + the left column's 160px min-width + the 44px gap) it wraps
   organically via flex-wrap with no rules tuned for that in-between
   state, and even above that — up to ~1360px — the left column gets
   squeezed uncomfortably narrow holding "FIVE STEPS" + its subtitle.
   Stack deliberately (same treatment as the existing ≤960px rule)
   starting from a wide enough point that the fixed-width column
   always has room, instead of leaving an untuned organic-wrap zone. */
@media (max-width: 1360px) {
  .dbits-five-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .dbits-five-steps__left {
    width: 100%;
  }

  .dbits-steps-viewport {
    flex: none;
    width: 100%;
    height: 320px;
  }
}

/* ── 1200px ── */
@media (max-width: 1200px) {
  .dbits-hero {
    padding-left: 44px;
    padding-right: 44px;
  }

  .dbits-hero-photo {
    padding: 0 44px;
  }

  .dbits-services {
    padding: 80px 44px;
  }

  .dbits-panels {
    padding: 56px 44px;
  }

  .dbits-quotes {
    padding: 56px 44px;
  }
}

/* ── 960px — tablet ── */
@media (max-width: 960px) {

  /* Hero — top padding stays the coordinated base-rule clamp(); only
     horizontal padding narrows here (see the .intone-breadcrumb--dbits-hero
     comment near .dbits-hero's base rule) */
  .dbits-hero {
    padding-left: 32px;
    padding-right: 32px;
  }

  .dbits-hero-photo {
    padding: 0 32px;
  }

  .intone-dbits-page .home-hero__title {
    font-size: clamp(48px, 10vw, 100px) !important;
  }

  /* Services */
  .dbits-services {
    padding: 64px 32px;
  }

  .dbits-cards-row--3 {
    grid-template-columns: 1fr 1fr;
  }

  /* Panels */
  .dbits-panels {
    padding: 48px 32px;
  }

  .dbits-panel {
    padding: 36px 32px;
  }

  /* Five Steps — already stacked from 1360px down (see that breakpoint);
     just tighten the viewport height a touch further at this width */
  .dbits-steps-viewport {
    height: 300px;
  }

  /* About DIR */
  .dbits-dir {
    flex-direction: column;
  }

  .dbits-dir__sidebar {
    flex: none;
    height: 100px;
    width: 100%;
  }

  .dbits-dir__sidebar-text {
    transform: none;
    font-size: clamp(28px, 5vw, 48px);
  }

  .dbits-dir__panels {
    grid-template-columns: 1fr;
  }

  .dbits-dir__content {
    padding: 40px 32px;
  }

  /* Obtain Quotes */
  .dbits-quotes {
    padding: 48px 32px;
  }

  .dbits-quotes__component {
    flex-direction: column;
  }

  .dbits-quotes__steps-col {
    flex: none;
    width: 100%;
    /* Disable the hover-only reveal of Step 2 starting here (was only
       disabled below 640px — between 641-960px there's no reliable
       hover on touch devices, so Step 2 "Place Your Order" was
       permanently unreachable). Stack both steps normally instead. */
    height: auto;
    overflow: visible;
  }

  .dbits-quotes__steps-inner {
    transition: none;
    transform: none !important;
  }

  .dbits-quotes__sidebar {
    min-height: 100px;
    width: 100%;
  }

  .dbits-quotes__sidebar-text {
    transform: none;
    font-size: clamp(36px, 6vw, 64px);
  }

  /* Warranties — height/min-height now handled by the fluid clamp()
     on the base rules; only padding needs adjusting per breakpoint */
  .dbits-warranties__content {
    padding: 60px 32px;
  }

  /* Footer contact */
  .dbits-footer-contact {
    padding: 36px 32px 44px;
  }
}

/* ── 768px — large phone ── */
@media (max-width: 768px) {
  .dbits-hero {
    padding-left: 24px;
    padding-right: 24px;
  }

  .dbits-hero-photo {
    padding: 0 24px;
  }

  .intone-dbits-page .home-hero__title {
    font-size: clamp(40px, 11vw, 80px) !important;
  }

  .dbits-hero__sub {
    gap: 28px;
    padding-bottom: 40px;
  }

  .dbits-services {
    padding: 56px 24px;
  }

  .dbits-panels {
    padding: 40px 24px;
  }

  .dbits-quotes {
    padding: 40px 24px;
  }

  .dbits-warranties__content {
    padding: 48px 24px;
  }
}

/* ── 640px — phone ── */
@media (max-width: 640px) {

  /* Hero */
  .dbits-hero {
    padding-left: 20px;
    padding-right: 20px;
    min-height: auto;
  }

  .dbits-hero-photo {
    padding: 0;
  }

  .intone-dbits-page .home-hero__title {
    font-size: clamp(36px, 11vw, 64px) !important;
    line-height: 0.95 !important;
  }

  .dbits-hero__top {
    gap: 10px;
    /* margin-bottom: 24px; */
  }

  .dbits-dir-logo {
    height: clamp(32px, 8vw, 48px);
  }

  .dbits-hero__sub {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 32px;
  }

  .dbits-hero__buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .btn-dbits-outline,
  .btn-dbits-dark {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 14px 20px;
  }

  /* Services */
  .dbits-services {
    padding: 48px 20px;
  }

  .dbits-services__heading {
    font-size: clamp(36px, 9vw, 64px);
    margin-bottom: 32px;
  }

  .dbits-cards-row--3 {
    grid-template-columns: 1fr;
  }

  /* Panels */
  .dbits-panels {
    padding: 32px 20px;
  }

  .dbits-panel {
    padding: 24px 20px;
  }

  .dbits-panel__title {
    font-size: 16px;
  }

  .dbits-five-steps {
    margin-top: 24px;
  }

  .dbits-five-steps__label-num {
    font-size: clamp(32px, 9vw, 52px);
  }

  .dbits-steps-viewport {
    height: 260px;
  }

  .dbits-step {
    padding: 16px;
  }

  .dbits-step__num {
    font-size: clamp(40px, 10vw, 80px);
    width: 56px;
  }

  /* About DIR */
  .dbits-dir__content {
    padding: 28px 20px;
    gap: 16px;
  }

  .dbits-dir__panels {
    margin-top: 16px;
  }

  .dbits-dir__panel {
    padding: 20px;
  }

  .dbits-dir__mission-label {
    font-size: 18px;
  }

  /* Obtain Quotes */
  .dbits-quotes {
    padding: 32px 20px;
  }

  .dbits-quotes__sub {
    font-size: 13px;
    text-align: left;
  }

  .dbits-quotes__step-header {
    height: auto;
    min-height: 120px;
    padding: 16px 20px;
    gap: 16px;
    flex-wrap: wrap;
  }

  .dbits-quotes__step-num {
    font-size: clamp(40px, 10vw, 72px);
  }

  .dbits-quotes__step-title {
    font-size: 18px;
  }

  /* Hover-slide is already disabled from 960px down (see that breakpoint) */

  /* Warranties — height/min-height handled by the fluid clamp() on the
     base rules now; only padding needs adjusting at this width */
  .dbits-warranties__content {
    padding: 40px 20px;
    gap: 24px;
  }

  .dbits-warranties__title {
    font-size: clamp(22px, 7vw, 40px);
  }

  .dbits-warranties__body {
    font-size: 15px;
  }

  .btn-dbits-gold {
    font-size: 18px;
    padding: 12px 20px;
  }

  /* Footer contact */
  .dbits-footer-contact {
    padding: 28px 20px 36px;
  }

  .dbits-footer-contact__title {
    font-size: 17px;
  }

  .dbits-footer-contact__details {
    font-size: 16px;
  }
}

/* ── 480px — small phone ── */
@media (max-width: 480px) {
  .dbits-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .intone-dbits-page .home-hero__title {
    font-size: clamp(28px, 10vw, 48px) !important;
  }

  .dbits-contract-badge {
    font-size: 12px;
    padding: 6px 10px;
    gap: 6px;
  }

  .dbits-contract-badge__logo {
    height: 22px;
  }

  .dbits-services {
    padding: 40px 16px;
  }

  .dbits-panels {
    padding: 28px 16px;
  }

  .dbits-panel {
    padding: 20px 16px;
  }

  .dbits-quotes {
    padding: 28px 16px;
  }

  .dbits-warranties__content {
    padding: 32px 16px;
  }

  .dbits-footer-contact {
    padding: 24px 16px 32px;
  }
}


/* ── Dark mode overrides ─────────────────────────────────── */

/* Hero — white bg */
[data-theme="dark"] .dbits-hero {
  background: var(--t-bg);
}

[data-theme="dark"] .dbits-contract-badge {
  color: var(--t-text);
}

[data-theme="dark"] .dbits-contract-badge a {
  color: var(--t-text);
}

[data-theme="dark"] .intone-dbits-page .home-hero__title,
[data-theme="dark"] .intone-dbits-page .home-hero__title.is-clip-text {
  color: var(--t-text) !important;
  -webkit-text-fill-color: var(--t-text) !important;
}

[data-theme="dark"] .dbits-hero__text {
  color: var(--t-text);
}

[data-theme="dark"] .btn-dbits-outline {
  background: var(--t-bg);
  border-color: var(--t-border-strong);
  color: var(--t-text);
}

[data-theme="dark"] .btn-dbits-outline:hover {
  background: var(--t-surface);
}

/* White cards inside the dark services section */
[data-theme="dark"] .dbits-card--light {
  background: #f4f6f9;
  border-color: 1px solid #e3e9f2;
}

[data-theme="dark"] .dbits-card--light .dbits-card__title {
  color: var(--t-text);
}

/* Info panels */
[data-theme="dark"] .dbits-panel {
  background: var(--t-surface);
}

[data-theme="dark"] .dbits-panel__title,
[data-theme="dark"] .dbits-panel__body,
[data-theme="dark"] .dbits-bullet-list li {
  color: var(--t-text);
}

[data-theme="dark"] .dbits-panel__note {
  color: var(--t-text-muted);
}

[data-theme="dark"] .dbits-tag {
  background: var(--t-surface-raised);
  color: var(--t-text);
}

[data-theme="dark"] .dbits-tag:hover {
  background: var(--t-surface);
}

/* Five Steps */
[data-theme="dark"] .dbits-five-steps__label-num,
[data-theme="dark"] .dbits-five-steps__label-sub {
  color: var(--t-text);
}

[data-theme="dark"] .dbits-steps-viewport {
  scrollbar-color: var(--ds-gold, #f6b43f) var(--t-surface);
}

[data-theme="dark"] .dbits-steps-viewport::-webkit-scrollbar-track {
  background: var(--t-surface);
}

[data-theme="dark"] .dbits-step {
  background: var(--t-surface-raised);
}

[data-theme="dark"] .dbits-step__num {
  color: var(--t-border-strong);
}

[data-theme="dark"] .dbits-step__title {
  color: var(--t-text);
}

[data-theme="dark"] .dbits-step__text {
  color: var(--t-text-muted);
}

/* Obtain Quotes */
[data-theme="dark"] .dbits-quotes__header {
  border-top-color: var(--t-border);
}

[data-theme="dark"] .dbits-quotes__step-header {
  background: var(--t-surface);
}

[data-theme="dark"] .dbits-quotes__step-title,
[data-theme="dark"] .dbits-quotes__step-desc {
  color: var(--t-text);
}