/* =====================================================================
   Dark hero — service pages only (body.neon-dark-hero, see inc/hero.php).
   Loaded after the page stylesheet. Markup: section.dhero, built by the theme
   from the page's original .hero + .media-block.
   Breakpoints follow the theme: base = 768–1199, then ≥1200 and ≤767.
   ===================================================================== */

/* ---------- NAV: same markup, dark palette ----------
   The nav rules use the page tokens, so swapping them inside .nav recolours
   links, borders, the logo dot, the dropdown and the mobile menu panel. */
body.neon-dark-hero .nav{
  --black:#FFFFFF;
  --white:#0A0A0A;
  --gray-3:#242424;
  --gray-4:#1A1A1A;
  background:#0A0A0A;
  color:#FFFFFF;
  /* keep the nav (and its SEO Audit dropdown) above the hero, which is its own stacking context */
  position:relative;
  z-index:60;
}

/* ---------- HERO ---------- */
.dhero{
  --dh-bg:#0A0A0A;
  --dh-fg:#FFFFFF;
  --dh-line:#242424;     /* strip rule */
  --dh-line-hi:#333333;  /* column dividers */
  --dh-mute:#A0A0A0;     /* sub text, fact captions */
  --dh-soft:#D4D4D4;     /* strip items */
  --dh-title-mute:#5E5E5E;
  --dh-dot:#5E5E5E;
  --dh-btn:#333333;
  --dh-btn-hover:#444444;
  --dh-wave:rgba(255,255,255,.09);
  --dh-axis:670px;       /* x of the next section's title: caps on service pages */

  position:relative;
  isolation:isolate;
  display:flex;flex-direction:column;
  padding:80px var(--pad) 0;
  background:var(--dh-bg);
  color:var(--dh-fg);
  /* full-bleed black past the 1440 column, without horizontal overflow.
     The top inset reaches up behind the nav, so on screens wider than 1440
     the nav row is black edge to edge too (the nav sits above, z-index 60). */
  box-shadow:0 0 0 100vmax var(--dh-bg);
  clip-path:inset(-120px -100vmax 0 -100vmax);
}
.dhero__waves{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}

.dhero__title{
  margin:0;
  max-width:880px;
  font-family:'Instrument Sans',sans-serif;
  font-weight:600;
  font-size:clamp(40px,4.6vw,66px);
  line-height:1.04;
  letter-spacing:-.032em;
  text-wrap:balance;
}
.dhero__title span{color:var(--dh-title-mute)}

.dhero__bottom{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:16px;row-gap:40px;
  align-items:stretch;
  padding:56px 0 64px;
}
.dhero__col{border-left:1px solid var(--dh-line-hi);padding-left:24px;min-width:0}
.dhero__col--text{grid-column:1 / 7}
.dhero__facts{grid-column:7 / 13;margin:0;list-style:none}
.dhero__bottom--nofacts .dhero__col--text{grid-column:1 / -1}
.dhero__cta{grid-column:1 / -1;order:3}

.dhero__text{
  margin:0;max-width:none;
  font-size:16px;line-height:1.65;
  color:var(--dh-mute);
}
.dhero__facts li{
  list-style:none;margin:0;padding:0;
  font-size:16px;line-height:1.65;
  color:var(--dh-mute);
}
.dhero__facts li + li{margin-top:4px}
.dhero__facts b{font-family:'Instrument Sans',sans-serif;font-weight:600;color:var(--dh-fg)}

.dhero__btn{
  display:inline-flex;align-items:center;
  height:52px;padding:0 28px;
  background:var(--dh-btn);color:var(--dh-fg);
  font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  transition:background .2s ease;
}
.dhero__btn:hover{background:var(--dh-btn-hover)}
.dhero__btn:focus-visible{outline:2px solid var(--dh-fg);outline-offset:3px}

.dhero__strip{
  margin:auto 0 0;list-style:none;
  border-top:1px solid var(--dh-line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px 16px;
  padding:24px 0 28px;
}
.dhero__strip li{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:12px;min-width:0;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:11px;line-height:1.3;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--dh-soft);
}
.dhero__strip li::before{content:"";flex:0 0 4px;width:4px;height:4px;border-radius:50%;background:var(--dh-dot)}

/* homepage: the Services title below starts at 664px */
body.neon-dark-hero--front .dhero{--dh-axis:664px}

/* Gap from the hero to the first section = 140px, same as the homepage (.dirs margin-top).
   Service pages space .caps with padding, audit pages with margin; phones already use 148px. */
@media (min-width:768px){
  body.neon-dark-hero--service-seo .dhero + .caps,
  body.neon-dark-hero--service-design .dhero + .caps,
  body.neon-dark-hero--service-development .dhero + .caps{padding-top:140px}
  body.neon-dark-hero--audit .dhero + .caps,
  body.neon-dark-hero--audit-seo .dhero + .caps{margin-top:140px}
}

/* ---------- ≥1200: desktop ---------- */
@media (min-width:1200px){
  /* height comes from content: the gap above the strip is the same on every page,
     whether the title takes two lines or three */
  .dhero{padding-top:104px}
  /* text column's divider sits on --dh-axis, same x as the first section's title below */
  .dhero__bottom{
    grid-template-columns:calc(var(--dh-axis) - var(--pad)) minmax(0,1fr) minmax(0,1fr);
    column-gap:0;row-gap:0;
    padding:56px 0 104px;
  }
  .dhero__cta{grid-column:1;order:0;justify-self:end;align-self:start;padding-right:48px}
  .dhero__col--text{grid-column:2;padding-right:40px}
  .dhero__facts{grid-column:3}
  .dhero__bottom--nofacts .dhero__col--text{grid-column:2 / 4}
  /* every point on one line, equal gaps between points */
  .dhero__strip{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:24px;row-gap:16px}
  .dhero__strip li{white-space:nowrap}
  .dhero__strip--few{justify-content:flex-start;column-gap:56px}
}

/* ---------- ≤767: phone ---------- */
@media (max-width:767px){
  .dhero{padding-top:56px}
  .dhero__title{font-size:38px;line-height:1.08}
  .dhero__bottom{padding:40px 0 48px;row-gap:28px}
  .dhero__col--text,.dhero__facts{grid-column:1 / -1}
  .dhero__text,.dhero__facts li{font-size:15px}
  .dhero__strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}