/* ==========================================================
   Deliverables-Based IT Services  (DBITS)
   page-deliverables-it-services-v2.css  v1.0
   Figma node: 1187:394
   LIVE as of 2026-09-17 — enqueued on page-deliverables-it-services-v2.php,
   assigned to the public page (ID 40). Built and reviewed first on a
   noindex test page (ID 1458), then promoted. See that template file's
   header for the fuller history; page-deliverables-it-services.css (no
   "-v2") was the pre-redesign original — DELETED 2026-09-17, backed up
   outside the webroot at
   private/deleted-file-backups/2026-09-17-dbits-v1/ if ever needed.

   Typography/responsiveness/visual redesign pass, 2026-09-16/17. Every
   fixed (non-fluid) font-size that had no sitewide justification was
   converted to a clamp() matching the convention already used by sibling
   pages (card/body copy: clamp(14px,1.4vw,16px), small support text:
   clamp(13px,1.3vw,15px) — see page-cybersecurity.css
   .cy-change-card__body, page-public-sector-industries.css
   .psec-plain-card__body). HERO and most of WARRANTIES were kept
   intentionally close to the original (user-approved as-is); most other
   sections changed for real layout/UX reasons — see the comment above
   each changed rule.
   ========================================================== */

/* ── 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);
  /* Was clamp(14px, 7vw, 40px) — the 7vw rate hits its 40px ceiling at any
     viewport ≥571px, so this full-sentence label ("Application
     Development, Modernization, Upgrade...") rendered at heading-weight
     size on every screen from a phone up to 4K. Rebalanced to an actual
     subhead scale that still reads as a fluid label, not a second H2. */
  font-size: clamp(16px, 1.9vw, 24px);
  font-weight: 700;
  line-height: 1.36;
  /* 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;
  /* REAL BUG, confirmed by rendered screenshot: every card variant set
     justify-content:space-between individually (now removed from each —
     see below) for a box that only ever has 2 children (title, body).
     With 2 children, space-between pins the title to the top and the
     body to the very bottom of the 277px box — fine when body copy is
     long enough to reach the bottom on its own, but on any card with
     shorter copy (e.g. "Agile Implementation & Delivery Framework") it
     opened a large dead gap between title and body. flex-start lets the
     body sit directly under the title (separated by the existing 16px
     gap) regardless of copy length. */
  justify-content: flex-start;
  transition: transform 0.25s;
}

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

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

/* Deliberately no white-on-gold override here (that line used to be
   commented out for a reason): the title inherits the page's dark ink,
   which is the correct contrast pairing for a gold background — white
   text on gold fails contrast and was never actually shipped. */

.dbits-card--light {
  background: #f4f6f9;
  /* Was "1px solid e3e9f2" — missing the leading #, an invalid color the
     browser silently drops, so this card has been rendering with NO
     border at all despite the declaration looking present. */
  border: 1px solid #e3e9f2;
}

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

/* Was background:#f4f6f9 (identical to --light) with its distinguishing
   rules commented out below — so 4 of the page's 6 service cards
   rendered visually indistinguishable from each other, and only the one
   gold card carried any accent. Restored using the exact navy token this
   page already defines (--dbits-navy) and the same white/rgba-white
   pairing the original (disabled) rules specified. */
.dbits-card--dark {
  background: var(--dbits-navy, #09101d);
  border: none;
}

.dbits-card--dark .dbits-card__title {
  color: #fff;
}

.dbits-card--dark .dbits-card__body {
  color: rgba(255, 255, 255, 0.82);
}

.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: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
  /* color: rgba(255,255,255,0.85); */
}


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

/* "Project and Program Management" is this section's opening heading —
   the same role "SERVICES" plays for the section above — but it was
   sharing .dbits-services__label with an unrelated descriptive SENTENCE
   ("Application Development, Modernization, Upgrade..."), so fixing that
   label's oversized clamp() also shrank this heading down to
   subhead-sized text with nothing to mark it as a section opener. Its
   own class, sized and weighted to actually read as a heading, with a
   gold rule underneath mirroring .dbits-services__divider so both
   section openers use the same visual language. */
.dbits-panels__heading {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  color: #09101d;
  margin: 0 0 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ds-gold, #f6b43f);
}

.dbits-panel {
  background: #f4f6f9;
  /* A gold left-rule ties these panels into the same accent language the
     rest of the site already uses for emphasis blocks (gold-bordered
     cards/lists on the industry and service pages) — previously these six
     panels were flat, undifferentiated grey boxes with no accent at all. */
  border-left: 4px solid var(--ds-gold, #f6b43f);
  padding: 44px;
  margin-bottom: 24px;
}

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

/* Six panels in a row previously all wore the exact same grey box
   regardless of content — bullet lists, a single paragraph, tag chips,
   even the embedded Five Steps carousel — which read as monotonous.
   The two pure-paragraph panels ("Project delivery approach and
   framework", "Post-Implementation Review") don't need a full card
   treatment to be understood, so they get a lighter one: no fill, no
   gold rule, just a top hairline — visually distinct from the panels
   that hold a list or an interactive component, and it breaks up the
   run of identical boxes. They also sit side by side on desktop (see
   .dbits-panels__plain-row below) since each is short. */
.dbits-panel--plain {
  background: transparent;
  border-left: none;
  border-top: 1px solid rgba(9, 16, 29, 0.1);
  padding: 32px 0 0;
  margin-bottom: 0;
}

.dbits-panels__plain-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  margin-bottom: 24px;
}

.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: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  line-height: 1.45;
  /* A panel currently spans the full fluid content width — at a typical
     desktop width that's well past 100 characters per line, deep into
     unreadable territory (the readable range tops out around 75-90ch).
     Caps the MEASURE only, not the layout: the panel itself, and any
     list/tag row inside it, still uses the full available width. */
  max-width: 75ch;
  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;
  /* Was 12px total gap under the intro sentence (from .dbits-panel__body's
     own margin-bottom alone) — too tight to read as a deliberate
     title/intro/list hierarchy, closer to the list running straight into
     the paragraph above it. */
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Was display:flex + align-items:center: fine for a guaranteed single
   line, but centers the checkmark against the whole item once text
   wraps to 2 lines (pins it to the vertical middle instead of the first
   line) — inconsistent with the labeled list right below this one in
   the same section, which already uses the position:absolute approach
   for exactly that reason. Unified onto the same mechanism so both
   lists in "Project and Program Management" share one alignment rule
   instead of two different ones. */
.dbits-bullet-list li {
  position: relative;
  padding-left: 24px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  line-height: 1.45;
  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: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 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;
}

/* REDESIGNED 2026-09-17: the previous fix (a fixed label-column + a
   description column) was functionally correct — descriptions lined up
   — but a rigid 2-column grid of label/value pairs reads as a data
   table, not marketing content, especially once a label wraps to 2
   lines and the row heights go uneven. Replaced with a small grid of
   tiles: label stacked directly above its description inside its own
   bordered card, arranged 2-up. Nothing depends on column alignment
   anymore, so wrapping labels are no longer a layout concern at all. */
.dbits-bullet-list--labeled {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* An odd count (5) would strand the last tile alone at half-width in a
   plain 2-column grid — instead it closes the list as a full-width row,
   which reads as a deliberate ending rather than a leftover. */
.dbits-bullet-list--labeled li:last-child {
  grid-column: 1 / -1;
}

.dbits-bullet-list--labeled li {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid rgba(9, 16, 29, 0.08);
  padding: 22px 22px 22px 48px;
}

.dbits-bullet-list--labeled li::before {
  left: 22px;
  top: 24px;
}

.dbits-bullet-list__label {
  display: block;
  font-weight: 700;
  color: #09101d;
  margin-bottom: 6px;
}

.dbits-bullet-list__desc {
  display: block;
  color: inherit;
}

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

/* Gold-outlined pill instead of a flat white square — a white chip on the
   panel's #f4f6f9 background read as almost no chip at all (near-zero
   contrast), and matched none of the accent language used everywhere
   else on this page. Pill/outline chips also match the sitewide
   convention for a tag/keyword row (e.g. the Public Sector industries
   page's .psec-pills). */
.dbits-tag {
  background: transparent;
  border: 1px solid var(--ds-gold, #f6b43f);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 500;
  line-height: 1.36;
  color: #09101d;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.dbits-tag:hover {
  background: var(--ds-gold, #f6b43f);
  color: #09101d;
}


/* ═══════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════ */
/* A static bullet list and an interactive scrolling carousel were
   sitting in the same box with only a margin-top between them — two
   visually unrelated components with no boundary, reading as an
   afterthought rather than a deliberate module. A top hairline + more
   breathing room mark it as its own distinct piece within the panel. */
.dbits-five-steps {
  display: flex;
  gap: 44px;
  align-items: center;
  /* vertically centred per Figma */
  padding: 32px 0 24px;
  flex-wrap: wrap;
  margin-top: 32px;
  border-top: 1px solid rgba(9, 16, 29, 0.1);
}

/* 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;
  /* Was a fixed width:80px — at the clamp's 128px ceiling a single digit
     glyph can exceed 80px and bleed into the title/body text next to it.
     1.2em tracks this element's own font-size clamp, so the box always
     fits the glyph at every viewport instead of only the smaller ones. */
  width: 1.2em;
  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: clamp(15px, 1.5vw, 17px);
  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: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  line-height: 1.45;
  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);
  /* Was a flat 42px with a single hard jump to 18px at the 640px
     breakpoint (see the removed override below) — scaled continuously
     instead, and the floor is raised to 24px since 18px read too small
     for a heading-weight label. */
  font-size: clamp(24px, 3.2vw, 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: clamp(14px, 1.4vw, 16px);
  font-weight: 600;
  line-height: 1.45;
  /* 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: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.36;
  /* color: #fff; */
  margin: 0 0 12px;
  /* Small gold rule above the title — the same accent marker now used
     for the Panels section and the Obtain Quotes header, so "Resources"
     and "Contract Information" read as designed sub-sections instead of
     two unmarked paragraphs sitting side by side. */
  position: relative;
  padding-top: 16px;
}

.dbits-dir__panel-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--ds-gold, #f6b43f);
}

.dbits-dir__panel-body {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  line-height: 1.45;
  /* 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: clamp(14px, 1.4vw, 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 {
  /* Gold, not a barely-visible 15%-black hairline — ties the section
     opener into the same accent rule used above the panels/services. */
  border-top: 2px solid var(--ds-gold, #f6b43f);
  padding-top: 20px;
  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: clamp(20px, 2.2vw, 28px);
  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: clamp(13px, 1.4vw, 16px);
  font-weight: 600;
  color: #09101d;
  /* text-transform: uppercase; */
  text-align: left;
  margin: 0;
  max-width: 600px;
}

/* The contract number reads as one identifier, not four separately
   breakable words — without this, a hyphenated string like this is a
   valid line-break point for the browser, so it could split mid-code
   ("DIR-CPO-" / "6074") right when the column narrows enough to need it
   most. */
.dbits-quotes__sub-nowrap {
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   OBTAIN QUOTES  (Figma node 1187:597) — REDESIGNED 2026-09-16,
   hover-reveal restored 2026-09-16 (follow-up)
   ─────────────────────────────────────────────────────────
   V1 (live page): ONE step visible at a time behind a hover-only
   "clipping window" — Step 2 was only reachable by hovering, with zero
   visual cue that hovering revealed anything, so most desktop visitors
   never saw it, and it broke differently on touch (see the removed
   .dbits-quotes__steps-col/__steps-inner/__sidebar rules this replaced).
   First redesign pass: made both steps permanently visible as plain
   cards — fixed the hidden-content bug, but lost the interactive/hover
   feel entirely.
   THIS pass keeps both steps ALWAYS visible (never re-introduces the
   hidden-content bug) while bringing the animation back: hovering a
   card grows it and flips its header gold (the ORIGINAL design's hover
   treatment, now applied additively instead of via clip+slide) while
   its sibling recedes — via :has(), so each card also still fully
   supports its own independent :hover with no JS. :has() has no
   fallback path here on purpose: an unsupported browser just keeps
   both cards at their default 50/50 width with the (still real, still
   working) per-card hover feedback below — a fine degradation, not a
   broken one.
   ═══════════════════════════════════════════════════════ */
.dbits-quotes__component {
  display: flex;
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}

.dbits-quotes__step-card {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #f4f6f9;
  transition: flex-basis 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s ease, box-shadow 0.3s ease, opacity 0.4s ease;
}

.dbits-quotes__step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

/* The "reveal one another" interaction: hovering either card grows it
   and dims/narrows its sibling — nothing is ever hidden, just
   re-emphasized, which is what makes this safe to combine with "both
   steps always visible." */
.dbits-quotes__component:has(.dbits-quotes__step-card:hover) .dbits-quotes__step-card {
  flex-basis: 42%;
  opacity: 0.82;
}

.dbits-quotes__component:has(.dbits-quotes__step-card:hover) .dbits-quotes__step-card:hover {
  flex-basis: 58%;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dbits-quotes__step-card {
    transition: box-shadow 0.2s ease;
  }
}

.dbits-quotes__step-header {
  /* Extra bottom padding (32px, vs. 28px elsewhere) — the description
     text was sitting right against the image edge with no visible
     breathing room, most noticeable on phones. */
  padding: 28px 24px 32px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: background 0.4s ease;
}

/* Header flips gold on hover — the original design's signature
   treatment, restored, but now layered on top of content that was
   already visible rather than replacing hidden content with it. */
.dbits-quotes__step-card:hover .dbits-quotes__step-header {
  background: var(--ds-gold, #f6b43f);
}

.dbits-quotes__step-num {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: var(--ds-gold, #f6b43f);
  flex-shrink: 0;
  margin: 0;
  transition: color 0.35s ease;
}

.dbits-quotes__step-card:hover .dbits-quotes__step-num {
  color: #09101d;
}

.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, 22px);
  font-weight: 600;
  line-height: 1.36;
  color: #09101d;
  margin: 0;
}

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

.dbits-quotes__step-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d9d9d9;
}

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

/* Receding sibling's photo dims slightly too — same "spotlight, don't
   hide" idea as the flex-basis/opacity shift above. */
.dbits-quotes__component:has(.dbits-quotes__step-card:hover) .dbits-quotes__step-card:not(:hover) .dbits-quotes__step-image img {
  filter: saturate(0.75) brightness(0.94);
}

.dbits-quotes__step-card:hover .dbits-quotes__step-image img {
  transform: scale(1.04);
}


/* ═══════════════════════════════════════════════════════════
   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;
}


/* ═══════════════════════════════════════════════════════════
   DIR NAVIGATION DISCLAIMER  (added 2026-09-17)
   Plain small-print band, not a warning/alert treatment — this is a
   routine compliance note, not something meant to alarm a visitor.
   ═══════════════════════════════════════════════════════ */
.dbits-disclaimer {
  background: #f4f6f9;
  padding: 20px var(--gutter);
  text-align: center;
}

.dbits-disclaimer__text {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #596068;
  margin: 0;
  max-width: 90ch;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════
   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: clamp(17px, 1.7vw, 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: clamp(15px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  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;
  }

  /* 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;
  }

  /* Stacked instead of side by side below tablet width. The grow/recede
     hover effect is a side-by-side comparison, so it's switched off here
     (flex-basis has nothing meaningful to animate in a single column) —
     each card keeps its own lift/gold-header/image-zoom hover feedback,
     which works fine stacked. */
  .dbits-quotes__component {
    flex-direction: column;
  }

  .dbits-quotes__component:has(.dbits-quotes__step-card:hover) .dbits-quotes__step-card {
    flex-basis: auto;
    opacity: 1;
  }

  .dbits-quotes__component:has(.dbits-quotes__step-card:hover) .dbits-quotes__step-card:not(:hover) .dbits-quotes__step-image img {
    filter: none;
  }

  /* 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;
  }

  .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 {
    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--plain {
    padding: 24px 0 0;
  }

  .dbits-panels__plain-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

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

  /* One tile per row below tablet width — two 260px-ish tiles side by
     side gets cramped on a phone. */
  .dbits-bullet-list--labeled {
    grid-template-columns: 1fr;
  }

  .dbits-bullet-list--labeled li {
    padding: 18px 18px 18px 44px;
  }

  .dbits-bullet-list--labeled li::before {
    left: 18px;
    top: 20px;
  }

  .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 override removed — the base rule's
     clamp(24px, 3.2vw, 42px) now covers this width continuously (was a
     flat 18px jump, below even the clamp's new floor). */

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

  /* dbits-quotes__sub text-align override removed — the base rule is
     left-aligned now, no breakpoint-specific value needed. */

  /* Same gap as the base rule, scaled for a phone: more bottom padding
     than top/sides so the description never sits flush against the
     image (the reported "no breathing space" — most visible here). */
  .dbits-quotes__step-header {
    padding: 20px 20px 28px;
    gap: 16px;
  }

  /* dbits-quotes__step-num/__step-title font-size overrides removed —
     both base rules are already fluid clamp()s tuned for the redesigned
     card (see the OBTAIN QUOTES section above); no breakpoint-specific
     value is needed. */

  /* 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/__details font-size overrides removed —
     both base rules are now fluid clamp()s that already reach their floor
     at this width. */
}

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

  .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);
}

/* Light cards keep their light treatment even in site dark mode (they're
   a deliberate light accent against the section, not a themed surface) */
[data-theme="dark"] .dbits-card--light {
  background: #f4f6f9;
  border-color: #e3e9f2;
}

/* Navy cards need a MORE visible border in dark mode than the light-mode
   value gave them — --t-border-strong (rgba(255,255,255,0.14)) flattened
   over --dbits-navy computes to only ~1.5:1 against the card fill, barely
   readable as a border. A flat, brighter rgba reads clearly as a border
   without needing to match any specific token. */
[data-theme="dark"] .dbits-card--dark {
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* REAL BUG, confirmed by the adversarial CSS review, and pre-existing on
   the LIVE page too (inherited unchanged, not introduced by this pass):
   this rule set the title to var(--t-text), which in dark mode resolves
   to #f4f6f9 — the EXACT same value as the card's own background two
   rules up (deliberately kept light in dark mode). That's invisible
   text, ~1:1 contrast. Since the card's background never goes dark here,
   its title shouldn't either — matches the light-mode color instead. */
[data-theme="dark"] .dbits-card--light .dbits-card__title {
  color: #09101d;
}

[data-theme="dark"] .dbits-panels__heading {
  color: var(--t-text);
  border-bottom-color: var(--ds-gold, #f6b43f);
}

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

/* Overrides the rule above for the plain variant — stays borderless/
   fill-less in dark mode too, just with a theme-appropriate hairline
   instead of the light-mode rgba(9,16,29,...) one. */
[data-theme="dark"] .dbits-panel--plain {
  background: transparent;
  border-top-color: var(--t-border);
}

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

/* .dbits-bullet-list__label sets its own hardcoded #09101d (does not
   inherit), so it needs its own dark-mode override or it stays
   dark-ink-on-dark-surface. */
[data-theme="dark"] .dbits-bullet-list__label {
  color: var(--t-text);
}

/* The redesigned tile card is hardcoded white/light-border — needs its
   own dark-mode surface, same convention as .dbits-panel's own
   background swap just above. */
[data-theme="dark"] .dbits-bullet-list--labeled li {
  background: var(--t-surface-raised);
  border-color: var(--t-border);
}

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

/* Stays an outline pill in dark mode too (was a filled chip here before
   the base rule became an outline pill) — the gold border already reads
   fine against a dark surface, no need to fill it. */
[data-theme="dark"] .dbits-tag {
  color: var(--t-text);
}

[data-theme="dark"] .dbits-tag:hover {
  color: #09101d;
}

/* Five Steps */
[data-theme="dark"] .dbits-five-steps {
  border-top-color: var(--t-border);
}

[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 */
/* dbits-quotes__header dark-mode border override removed — the header
   rule is gold now, not a theme-dependent grey hairline, so no
   dark-mode variant is needed. */

/* The redesigned card puts its background on .step-card itself (the
   header no longer has its own separate fill — see the OBTAIN QUOTES
   section above), so THIS is the rule that needs the dark-mode
   background now, not .step-header. Without it, the card would stay
   light #f4f6f9 in dark mode while the title/desc text below switched
   to var(--t-text) (light in dark mode) — invisible text, same bug
   class just fixed on .dbits-card--light. */
[data-theme="dark"] .dbits-quotes__step-card {
  background: var(--t-surface);
}

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

/* DIR navigation disclaimer */
[data-theme="dark"] .dbits-disclaimer {
  background: var(--t-surface);
}

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