/* BoostYourCampaign - Home v3 (desktop). Loaded AFTER byc-home-v2.css.
   Same copy + structure as v2; bolder, darker background rhythm.
   Rhythm: HERO(dark) - Stats(light) - O'Leary(dark) - Work(light) -
   Process(dark) - Guarantee(light) - Services(dark) - Press(light) -
   Reviews(light) - Final(dark) - Footer(light). */

/* ============================================================
   HERO -> full-bleed dark band (the "in your face" open)
   ============================================================ */
/* shared continuous dark backdrop spanning banner + nav + hero,
   pinned to the viewport so the bloom, dot-grid and gradient line up
   seamlessly across all three (no flat-bar-over-textured-hero seam) */
.dx-nav,
.dx-hero {
  background:
    radial-gradient(1100px 720px at 16% 0%, rgba(255,138,76,0.13), transparent 58%),
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(180deg, #0d1b35 0%, var(--navy) 720px);
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: auto, 26px 26px, auto;
}
.dx-hero {
  color: var(--on-dark);
  max-width: none;
  margin: 0;
  padding: 60px 0 96px;
  position: relative;
  overflow: hidden;
}
.dx-hero::before {
  content: '';
  display: none;
}
.dx-hero-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 56px;
  position: relative;
  z-index: 1;
}
.dx-hero .dx-h1 { color: #fff; }
.dx-hero .dx-lede { color: var(--on-dark-2); }
.dx-hero .dx-pill {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.dx-hero .dx .dx-primary,
.dx-hero .dx-primary { background: #fff; color: var(--navy); }
.dx-hero .dx-primary:hover { background: var(--orange); color: #fff; }
.dx-hero .dx-secondary { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
.dx-hero .dx-trust { border-top-color: var(--line-d); }
.dx-hero .dx-trust .text { color: var(--on-dark-2); }
.dx-hero .dx-trust .text strong { color: #fff; }
.dx-hero .dx-trust .avs > * { border-color: var(--navy); }
.dx-hero .dx-trust-sep { background: var(--line-d); }
.dx-hero .dx-trust .quick { color: var(--on-dark-muted); }
.dx-hero .dx-trust .quick strong { color: #fff; }
/* mosaic tiles stay white -> high contrast on the dark hero */
.dx-hero .dx-mtile { box-shadow: 0 18px 50px rgba(0,0,0,0.45); }
/* kill the cream radial glow box behind the mosaic - reads as a weird line on dark */
.dx-hero .dx-hero-mosaic::before { display: none; }

/* ============================================================
   STATS -> dark, continuous with the hero + O'Leary so the
   opening reads as ONE dark act (no thin light flicker between).
   Process stays light for a smooth light middle.
   ============================================================ */
.dx-stats { background: var(--navy); border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.dx-stats-row > .item:not(:last-child) { border-right-color: var(--line-d); }
.dx-stats-row .lbl { color: #fff; }
.dx-stats-row .desc { color: var(--on-dark-2); }

/* ============================================================
   Light bands keep their cream/white treatment from v2.
   Reinforce seams between dark and light sections.
   ============================================================ */
/* O'Leary follows dark stats with no seam; the color change into the
   light Work section is its own separator. */

/* ============================================================
   NAV + top banner -> dark, so the menu sits flush with the
   dark hero instead of leaving a light seam.
   ============================================================ */
.dx-nav { border-bottom: 0; transition: box-shadow .25s ease; }
/* once scrolled off the hero, drop the texture/bloom and become a clean
   solid-navy sticky bar so it reads correctly over the light sections */
.dx-nav.dx-nav-scrolled {
  background: var(--navy);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}
.dx-nav-top { border-bottom-color: var(--line-d); }
.dx-nav-top .left .since { color: var(--on-dark-2); }
.dx-nav-top .left strong { color: #fff; }
.dx-nav-top .left .stars-mini + span { color: var(--on-dark-2); }
.dx-nav-top .right .offices { color: #fff; }
.dx-nav-top .right .lang { color: var(--on-dark-2); }
.dx-nav .dx-logo, .dx-nav .dx-logo span { color: #fff; }
.dx-nav-links a { color: var(--on-dark-2); }
.dx-nav-links a:hover { color: var(--orange); }
.dx .dx-nav-cta { background: #fff; color: var(--navy); }
.dx .dx-nav-cta:hover { background: var(--orange); color: #fff; }


/* ===== Mobile (v3 dark hero) - loads last so these win the cascade ===== */
@media (max-width: 900px) {
  /* background-attachment: fixed is janky/broken on mobile - use scroll */
  .dx-nav, .dx-hero { background-attachment: scroll; }
  .dx-hero { padding: 26px 0 40px; }
  /* the real overflow fix: the hero grid kept 56px side gutters from v3 */
  .dx-hero-grid { padding-left: 18px !important; padding-right: 18px !important; grid-template-columns: 1fr; gap: 32px; }
  /* dark mobile drawer + white burger to match the dark nav */
  .dx-burger { color: #fff; }
  .dx-nav-drawer.open { background: var(--navy); border-bottom: 1px solid var(--line-d); }
  .dx-nav-drawer a { color: #fff; border-bottom-color: var(--line-d); }
  .dx-nav-drawer a.cta { color: var(--amber); }
}