/* ===================================================================
   SEO Services -- Search Signal System (repair pass 5: reduction +
   interaction repair). Scoped entirely to body.bdm-page-seo-services.
   Reuses tokens already defined in pages.css (--bg, --orange, --cyan,
   --container, --font-*). Draft -- pending visual approval.

   This pass is a content and interaction correction, not a redesign:
   the same spine/break/layer/converge/readout language from the prior
   pass is kept, just shortened everywhere and made properly reversible
   (see assets/js/service-seo.js) rather than a one-way reveal.

   No WebGL/canvas/particles/continuous decorative looping. Motion =
   opacity/transform + one CSS custom property (--fill) on .spine,
   continuously recomputed by ONE rAF-throttled scroll handler, plus a
   one-time, non-looping electrical pulse per Search Signal System
   instance, both entirely derived from real measured DOM positions.
   =================================================================== */

body.bdm-page-seo-services {
  position: relative;
  overflow-x: hidden;
}
body.bdm-page-seo-services {
  background-image:
    linear-gradient(rgba(240,237,232,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,237,232,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(1100px 900px at 50% 0%, rgba(0,0,0,.55) 0%, black 72%);
  mask-image: radial-gradient(1100px 900px at 50% 0%, rgba(0,0,0,.55) 0%, black 72%);
}

/* ---- layout ---- */
body.bdm-page-seo-services .disp { width: var(--container); margin: 0 auto; text-align: center; }
body.bdm-page-seo-services .read { width: min(700px, calc(100vw - 40px)); margin: 0 auto; text-align: center; }
body.bdm-page-seo-services .read p { text-align: left; }

body.bdm-page-seo-services section { padding: clamp(54px, 7.2vw, 104px) 0; position: relative; }
body.bdm-page-seo-services section.tight-top { padding-top: clamp(20px, 2.8vw, 34px); }
body.bdm-page-seo-services section.tight-bottom { padding-bottom: clamp(20px, 2.8vw, 34px); }

/* ---- ambient hotspot per zone ---- */
body.bdm-page-seo-services .zone { position: relative; }
body.bdm-page-seo-services .zone::before {
  content: ""; position: absolute; top: -6%; bottom: -6%; left: 0; right: 0; z-index: 0; pointer-events: none;
  opacity: .46; animation: seoBreathe 20s ease-in-out infinite alternate;
}
body.bdm-page-seo-services .zone > * { position: relative; z-index: 1; }
@keyframes seoBreathe { from { opacity: .3; } to { opacity: .58; } }
body.bdm-seo-paused .zone::before { animation-play-state: paused; }

body.bdm-page-seo-services .z-hero::before { background: radial-gradient(760px 480px at 50% 6%, rgba(255,140,0,.09), transparent 64%), radial-gradient(620px 520px at 88% 55%, rgba(46,139,255,.09), transparent 60%); }
body.bdm-page-seo-services .z-diag::before { background: radial-gradient(760px 420px at 50% 15%, rgba(46,139,255,.08), transparent 62%); }
body.bdm-page-seo-services .z-scope::before { background: radial-gradient(780px 560px at 15% 30%, rgba(255,140,0,.07), transparent 62%); }
body.bdm-page-seo-services .z-road::before { background: radial-gradient(900px 1000px at 50% 30%, rgba(255,140,0,.06), transparent 65%), radial-gradient(600px 600px at 50% 88%, rgba(46,139,255,.08), transparent 60%); }
body.bdm-page-seo-services .z-spec::before { background: radial-gradient(640px 380px at 30% 30%, rgba(46,139,255,.1), transparent 60%), radial-gradient(760px 420px at 70% 78%, rgba(46,139,255,.06), transparent 62%); }
body.bdm-page-seo-services .z-fit::before { background: radial-gradient(700px 560px at 50% 40%, rgba(46,139,255,.06), transparent 62%); }
body.bdm-page-seo-services .z-faq::before { background: radial-gradient(600px 420px at 50% 20%, rgba(255,140,0,.06), transparent 60%); }
body.bdm-page-seo-services .z-final::before { background: radial-gradient(920px 560px at 50% 100%, rgba(255,140,0,.17), transparent 62%), radial-gradient(700px 400px at 50% 0%, rgba(46,139,255,.09), transparent 60%); }

/* ---- typography ---- */
body.bdm-page-seo-services .kicker {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 10px; justify-content: center; width: 100%;
}
body.bdm-page-seo-services .kicker::before { content: ""; width: 20px; height: 1px; background: var(--orange); opacity: .6; }
/* No shared ch-based width -- that was capping every H2 to ~380px and
   forcing even short, one-line-worthy headings into a repetitive
   two-line block. Each heading gets the width its own composition
   needs (see per-section overrides below); this is just a generous
   default so a heading nobody has explicitly widened still has room. */
body.bdm-page-seo-services h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  line-height: 1.05; font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 0 0 14px;
  width: min(820px, 92vw); margin-inline: auto; text-wrap: balance;
}
/* Shared line-break utilities: keep a heading on one line whenever the
   words fit, but guarantee a clean, specific two-line split (not an
   arbitrary greedy one) the moment they don't. .ws-glue makes its
   contents an unbreakable unit so the wrap point can only ever land
   immediately before it. .h2-line forces each span onto its own line
   unconditionally, for headings that must always render as two lines
   regardless of available width. */
body.bdm-page-seo-services .ws-glue { white-space: nowrap; }
body.bdm-page-seo-services .h2-line { display: block; }
body.bdm-page-seo-services .lead {
  font-family: var(--font-body); font-weight: 400; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.55;
  color: rgba(240,237,232,.92); max-width: 60ch; margin: 0 auto;
}
body.bdm-page-seo-services p { font-weight: 400; line-height: 1.6; text-wrap: pretty; }

/* ---- HERO ---- */
body.bdm-page-seo-services .hero { padding-top: clamp(6rem, 12vh, 9rem); padding-bottom: clamp(28px, 4vw, 44px); }
body.bdm-page-seo-services .hero-copy { position: relative; z-index: 2; }
body.bdm-page-seo-services .hero .bdmp-crumb { justify-content: center; margin-bottom: 20px; }
body.bdm-page-seo-services .hero .kicker { margin-bottom: 18px; }
/* One line whenever it fits ("SEO BUILT FOR QUALIFIED GROWTH." is a
   normal breakable string at the wrapper level, no forced <br>). The
   "QUALIFIED GROWTH." fragment is glued unbreakable via h1 em's
   white-space:nowrap, so the ONLY place the line can ever wrap is
   right before it -- guaranteeing "SEO BUILT FOR" / "QUALIFIED
   GROWTH." as the fallback rather than an arbitrary greedy split.
   Width is in real px (~900-960px desktop) and only ever bounded by
   the .disp container -- never narrower than the longer line needs. */
body.bdm-page-seo-services h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  line-height: 1.04; font-size: clamp(46px, 6.2vw, 92px); margin: 0 auto 22px;
  /* 960px was sized against the font-size clamp's mid-range value, so it
     comfortably fit the one-line render at ~1440px (font ~89px) but was
     just narrow enough to force a wrap once the clamp reached its own
     92px ceiling at ~1920px+ -- the font kept growing with vw while this
     cap didn't. Widened to fit the clamp's actual maximum, not a value
     that happened to work at one width in between. */
  width: min(1040px, 94vw);
}
body.bdm-page-seo-services h1 em { font-style: normal; color: var(--orange); white-space: nowrap; }
body.bdm-page-seo-services .hero-lead { font-size: clamp(1.06rem, 1.4vw, 1.2rem); color: rgba(240,237,232,.94); max-width: 54ch; margin: 0 auto 14px; line-height: 1.55; }
body.bdm-page-seo-services .hero-diff { font-size: .96rem; color: rgba(240,237,232,.78); max-width: 46ch; margin: 0 auto 26px; line-height: 1.55; }
body.bdm-page-seo-services .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 0; }
body.bdm-page-seo-services .btn-primary,
body.bdm-page-seo-services .btn-ghost { font-size: .78rem; padding: 1rem 2.1rem; }

body.bdm-page-seo-services .hero-copy > * {
  opacity: 0; transform: translateY(12px); animation: seoReveal .6s cubic-bezier(.2,.7,.2,1) forwards;
}
body.bdm-page-seo-services .hero-copy > *:nth-child(1) { animation-delay: .04s; }
body.bdm-page-seo-services .hero-copy > *:nth-child(2) { animation-delay: .1s; }
body.bdm-page-seo-services .hero-copy > *:nth-child(3) { animation-delay: .16s; }
body.bdm-page-seo-services .hero-copy > *:nth-child(4) { animation-delay: .22s; }
body.bdm-page-seo-services .hero-copy > *:nth-child(5) { animation-delay: .28s; }
@keyframes seoReveal { to { opacity: 1; transform: none; } }

body.bdm-page-seo-services .hero-continues {
  display: block; width: 1px; height: 30px; margin: 34px auto 0;
  background: linear-gradient(180deg, rgba(88,201,255,.5), transparent);
}

/* ================= SEARCH SIGNAL SYSTEM (hero + final, identical
   behavior both times) =================
   Initial state: dim electrical indicators, no glow at all -- not
   pre-lit bulbs. A one-time pulse (JS-driven, positions measured from
   the real DOM) travels the track; a node lights only once the pulse
   physically reaches its x-position. The four supporting signals settle
   cyan; Qualified Demand settles orange, tying the system's outcome to
   the brand's action color. */
body.bdm-page-seo-services .signal-system {
  list-style: none; margin: 36px auto 0; padding: 0; position: relative;
  display: flex; justify-content: space-between; width: min(760px, calc(100vw - 40px));
}
body.bdm-page-seo-services .signal-track {
  position: absolute; left: 6%; right: 6%; top: 7px; height: 2px; z-index: 0;
  background: rgba(120,140,170,.28); overflow: visible;
}
body.bdm-page-seo-services .signal-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--cyan));
  box-shadow: 0 0 8px rgba(88,201,255,.4);
}
body.bdm-page-seo-services .signal-travel {
  position: absolute; top: -5px; left: 0; width: 14px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--orange) 55%, transparent 78%);
  box-shadow: 0 0 14px 3px rgba(255,140,0,.7); opacity: 0; will-change: transform;
}
body.bdm-page-seo-services .signal-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; }
body.bdm-page-seo-services .signal-dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(120,140,170,.55);
  transition: background .38s cubic-bezier(.22,1,.36,1), border-color .38s cubic-bezier(.22,1,.36,1), box-shadow .38s cubic-bezier(.22,1,.36,1);
}
body.bdm-page-seo-services .signal-label {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(240,237,232,.68); text-align: center; max-width: 13ch; line-height: 1.35; transition: color .38s cubic-bezier(.22,1,.36,1);
}
body.bdm-page-seo-services .signal-node.lit .signal-dot { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px rgba(88,201,255,.45); }
body.bdm-page-seo-services .signal-node.lit .signal-label { color: rgba(240,237,232,.9); }
body.bdm-page-seo-services .signal-node.lit:last-child .signal-dot { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 14px rgba(255,140,0,.55); }
body.bdm-page-seo-services .signal-node.lit:last-child .signal-label { color: var(--orange); }

/* ================= SHARED RAIL (roadmap) ================= */
body.bdm-page-seo-services .spine { position: relative; --fill: 0; }
body.bdm-page-seo-services .rail {
  position: absolute; left: 14px; width: 2px; z-index: 0;
}
body.bdm-page-seo-services .rail-track { position: absolute; inset: 0; background: rgba(88,201,255,.25); border-radius: 2px; }
body.bdm-page-seo-services .rail-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--fill) * 100%);
  background: linear-gradient(180deg, var(--orange), var(--cyan)); border-radius: 2px;
  box-shadow: 0 0 12px rgba(255,140,0,.55);
}
body.bdm-page-seo-services .rail-head {
  position: absolute; bottom: -6px; left: 50%; width: 13px; height: 13px; transform: translateX(-50%);
  background: radial-gradient(circle, #fff 0%, var(--orange) 55%, transparent 78%);
  border-radius: 50%; box-shadow: 0 0 18px 4px rgba(255,140,0,.7);
  opacity: clamp(0, calc(var(--fill) * 999), 1);
}

body.bdm-page-seo-services .stage {
  position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: 22px;
  align-items: start; padding: 16px 0;
}
body.bdm-page-seo-services .stage:first-child { padding-top: 4px; }
body.bdm-page-seo-services .stage:last-child { padding-bottom: 4px; }
body.bdm-page-seo-services .stage-node {
  grid-column: 1; width: 14px; height: 14px; border: 2px solid rgba(88,201,255,.65); background: var(--bg);
  transform: rotate(45deg); position: relative; z-index: 2; margin-top: 5px;
  transition: border-color .3s ease, background .3s ease, box-shadow .35s ease, transform .3s ease;
}
body.bdm-page-seo-services .stage.is-complete .stage-node { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 6px rgba(255,140,0,.14); }
body.bdm-page-seo-services .stage.is-active .stage-node { box-shadow: 0 0 0 8px rgba(255,140,0,.22), 0 0 20px rgba(255,140,0,.55); transform: rotate(45deg) scale(1.2); }

body.bdm-page-seo-services .stage-body { grid-column: 2; text-align: left; }
body.bdm-page-seo-services .stage-num { font-family: var(--font-display); font-size: 1.2rem; color: var(--orange); line-height: 1; display: block; margin-bottom: 4px; }
body.bdm-page-seo-services .stage-body h3 {
  font-family: var(--font-body); font-weight: 600; font-size: 1.14rem; line-height: 1.3; color: var(--white);
  margin: 0 0 6px; text-align: left;
}
body.bdm-page-seo-services .stage-body p {
  margin: 0; color: rgba(240,237,232,.94); font-size: 1rem; line-height: 1.6;
  max-width: 46ch; text-align: left;
}
body.bdm-page-seo-services .z-road .spine { width: min(600px, calc(100vw - 40px)); margin: 44px auto 0; }
@media (min-width: 901px) {
  body.bdm-page-seo-services .z-road .spine { width: min(680px, calc(100vw - 40px)); }
  body.bdm-page-seo-services .z-road .rail { left: 16px; }
  body.bdm-page-seo-services .z-road .stage { grid-template-columns: 32px 1fr; column-gap: 30px; padding: 18px 0; }
  body.bdm-page-seo-services .z-road .stage-node { margin-top: 6px; }
}

/* ================= DIAGNOSIS: one broken signal trace ================= */
body.bdm-page-seo-services .break-line {
  width: min(900px, calc(100vw - 40px)); margin: 46px auto 0; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px;
}
body.bdm-page-seo-services .break-track {
  position: absolute; top: 6px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(88,201,255,.35), rgba(88,201,255,.1) 92%);
}
body.bdm-page-seo-services .break-item { position: relative; padding-top: 26px; }
body.bdm-page-seo-services .break-spark {
  position: absolute; top: 0; left: 0; width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--orange); box-shadow: 0 0 12px rgba(255,140,0,.6);
}
body.bdm-page-seo-services .break-tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; display: block; text-align: left; }
body.bdm-page-seo-services .break-item p { margin: 0; color: rgba(240,237,232,.92); font-size: 1rem; line-height: 1.6; text-align: left; }
@media (max-width: 900px) {
  body.bdm-page-seo-services .break-line { grid-template-columns: 1fr 1fr; gap: 26px 28px; }
}
@media (max-width: 560px) {
  body.bdm-page-seo-services .break-line { grid-template-columns: 1fr; gap: 22px; }
  body.bdm-page-seo-services .break-track { display: none; }
  body.bdm-page-seo-services .break-item { padding-top: 0; padding-left: 24px; }
  body.bdm-page-seo-services .break-spark { top: 3px; left: 0; }
}

/* ================= SCOPE: four connected layers ================= */
body.bdm-page-seo-services .layer-system { width: min(600px, calc(100vw - 40px)); margin: 46px auto 0; position: relative; padding-left: 34px; display: grid; gap: 28px; }
body.bdm-page-seo-services .layer-system::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 5px; width: 2px;
  background: linear-gradient(180deg, var(--orange), var(--cyan)); border-radius: 2px; opacity: .8;
  box-shadow: 0 0 10px rgba(255,140,0,.35);
}
body.bdm-page-seo-services .layer-row { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; align-items: start; }
body.bdm-page-seo-services .layer-row::before {
  content: ""; position: absolute; top: 6px; left: -34px; width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--orange); box-shadow: 0 0 10px rgba(255,140,0,.55);
}
body.bdm-page-seo-services .layer-num { font-family: var(--font-mono); font-size: .7rem; color: var(--cyan); padding-top: 3px; }
body.bdm-page-seo-services .layer-row h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; line-height: 1.3; color: var(--white); margin: 0 0 6px; text-align: left; }
body.bdm-page-seo-services .layer-row p { margin: 0; color: rgba(240,237,232,.92); font-size: 1rem; line-height: 1.6; text-align: left; max-width: 46ch; }

/* ================= CONVERGENCE ZONE: specialist + measurement as one
   continuous composition, not two stacked slides. Both blocks share the
   zone's single ambient bloom and a physical connector line runs from
   the specialist's "One Specialist" output straight down into the
   measurement heading -- the same orange/cyan thread the rest of the
   page uses, not a section border. ================= */
body.bdm-page-seo-services .convergence-zone { width: min(1000px, calc(100vw - 40px)); margin: 0 auto; }
body.bdm-page-seo-services .convergence-visual { margin: 0 auto 40px; max-width: 420px; }
body.bdm-page-seo-services .convergence-text { max-width: 56ch; margin: 0 auto; text-align: center; }
body.bdm-page-seo-services .specialist-block h2 { width: auto; max-width: 480px; margin-inline: auto; text-align: center; }
body.bdm-page-seo-services .specialist-block p { text-align: left; max-width: none; margin: 0; font-size: 1.02rem; color: rgba(240,237,232,.94); line-height: 1.6; }
body.bdm-page-seo-services .converge { margin: 0 auto; max-width: 420px; }
body.bdm-page-seo-services .converge-in { display: flex; justify-content: space-between; gap: 12px; }
body.bdm-page-seo-services .converge-in span {
  flex: 1; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cyan); text-align: center; padding-bottom: 12px; border-bottom: 2px solid rgba(88,201,255,.4);
}
body.bdm-page-seo-services .converge-lines { position: relative; height: 34px; }
body.bdm-page-seo-services .converge-lines::before {
  content: ""; position: absolute; top: 0; left: 16.5%; right: 16.5%; height: 20px;
  border-left: 1px solid rgba(88,201,255,.4); border-right: 1px solid rgba(88,201,255,.4); border-top: 1px solid rgba(88,201,255,.4);
}
body.bdm-page-seo-services .converge-lines::after {
  content: ""; position: absolute; top: 20px; left: 50%; width: 1px; height: 14px; background: var(--orange);
  box-shadow: 0 0 8px rgba(255,140,0,.5); transform: translateX(-50%);
}
body.bdm-page-seo-services .converge-out {
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .3px; color: var(--orange);
  text-shadow: 0 0 20px rgba(255,140,0,.4); text-transform: uppercase;
}
@media (max-width: 640px) {
  body.bdm-page-seo-services .converge-in { flex-direction: column; gap: 10px; }
  body.bdm-page-seo-services .converge-in span { border-bottom: 0; border-left: 2px solid rgba(88,201,255,.4); padding: 4px 0 4px 12px; text-align: left; }
  body.bdm-page-seo-services .converge-lines { display: none; }
}

/* Specialist and measurement now share one text column (see
   .convergence-text) with a plain top border standing in for the old
   vertical connector line -- that device suited the previous
   single-column stacked composition but doesn't fit a two-column
   layout at desktop. */
body.bdm-page-seo-services .measurement-block { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
/* Wide enough to keep "MEASURE WHAT MOVES THE BUSINESS." on one line at
   desktop/tablet -- the generic h2 default (820px) was cutting it close
   given this string's length; the .lead paragraph below still
   self-limits via its own max-width regardless of this wider column. */
body.bdm-page-seo-services .measurement-block h2 { width: auto; max-width: none; margin-inline: auto; text-align: center; font-size: clamp(1.9rem, 3vw, 2.5rem); }
body.bdm-page-seo-services .measurement-block .lead { text-align: left; margin: 0; max-width: none; }
body.bdm-page-seo-services .z-spec .readout-row { width: auto; margin: 24px 0 0; justify-content: flex-start; }

@media (min-width: 901px) {
  body.bdm-page-seo-services .z-spec .convergence-zone {
    display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 56px; align-items: center;
  }
  body.bdm-page-seo-services .z-spec .convergence-visual { margin: 0; max-width: none; }
  body.bdm-page-seo-services .z-spec .convergence-text { max-width: 52ch; margin: 0; text-align: left; }
  body.bdm-page-seo-services .z-spec h2 { text-align: left; margin-inline: 0; }
  body.bdm-page-seo-services .z-spec .converge { max-width: 380px; }
}

/* ================= MEASUREMENT: one compact connected readout ================= */
body.bdm-page-seo-services .readout-row {
  width: min(880px, calc(100vw - 40px)); margin: 30px auto 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
body.bdm-page-seo-services .readout-chip {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(240,237,232,.86); padding: 16px 22px; border-right: 1px solid var(--line-soft);
}
body.bdm-page-seo-services .readout-chip:last-child { border-right: 0; }
@media (max-width: 700px) {
  body.bdm-page-seo-services .readout-chip { border-right: 0; border-bottom: 1px solid var(--line-soft); width: 100%; text-align: left; }
  body.bdm-page-seo-services .readout-chip:last-child { border-bottom: 0; }
}

/* ================= FIT ================= */
body.bdm-page-seo-services .fit-grid {
  width: min(880px, calc(100vw - 40px)); margin: 44px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; align-items: start;
}
body.bdm-page-seo-services .fit-col-head { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(240,237,232,.8); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }
body.bdm-page-seo-services .fit-col.yes .fit-col-head { color: var(--orange); }
body.bdm-page-seo-services .fit-list { text-align: left; display: grid; gap: 10px; }
body.bdm-page-seo-services .fit-row { display: flex; gap: 12px; align-items: flex-start; }
body.bdm-page-seo-services .fit-mark { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; transform: rotate(45deg); }
body.bdm-page-seo-services .fit-row.yes .fit-mark { background: var(--orange); }
body.bdm-page-seo-services .fit-row.no .fit-mark { background: transparent; border: 1px solid rgba(88,201,255,.65); }
body.bdm-page-seo-services .fit-row p { margin: 0; color: rgba(240,237,232,.94); font-size: 1rem; line-height: 1.6; text-align: left; }
@media (max-width: 720px) {
  body.bdm-page-seo-services .fit-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ================= FAQ ================= */
body.bdm-page-seo-services .faq-list { width: min(700px, calc(100vw - 40px)); margin: 36px auto 0; text-align: left; }
body.bdm-page-seo-services .faq-item { border-bottom: 1px solid var(--line-soft); }
body.bdm-page-seo-services .faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--white);
  padding: 15px 40px 15px 4px; position: relative; min-height: 44px; display: flex; align-items: center;
  transition: color .18s ease;
}
body.bdm-page-seo-services .faq-q:hover { color: var(--orange); }
body.bdm-page-seo-services .faq-q::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px;
  border-right: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease, border-color .18s ease;
}
body.bdm-page-seo-services .faq-item.is-open .faq-q::after { transform: translateY(-30%) rotate(225deg); border-color: var(--orange); }
body.bdm-page-seo-services .faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
body.bdm-page-seo-services .faq-item.is-open .faq-a-wrap { grid-template-rows: 1fr; }
body.bdm-page-seo-services .faq-a-inner { overflow: hidden; }
body.bdm-page-seo-services .faq-a-inner p { margin: 0 4px 15px; color: rgba(240,237,232,.86); max-width: 66ch; font-size: .96rem; line-height: 1.55; }

/* ================= CLOSING SIGNAL: three plain links, no cards ================= */
body.bdm-page-seo-services .closing-signal { width: min(700px, calc(100vw - 40px)); margin: 0 auto 30px; text-align: center; }
body.bdm-page-seo-services .closing-signal-row {
  display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft);
}
body.bdm-page-seo-services .closing-signal-row a {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(240,237,232,.78);
}
body.bdm-page-seo-services .closing-signal-row a:hover { color: var(--orange); }

/* ================= FINAL CTA ================= */
body.bdm-page-seo-services .z-final .lead { margin-bottom: 26px; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  body.bdm-page-seo-services h1 { font-size: clamp(38px, 9.5vw, 52px); }
  /* Single row at every width, never wrapped -- the pulse position is
     measured in JS from each dot's real x-offset along .signal-track,
     so a wrapped multi-row layout (or a hidden track) breaks that math
     entirely: confirmed live, a fresh mobile load never lit a single
     node. Shrink dots/labels/gaps instead of changing the geometry. */
  body.bdm-page-seo-services .signal-system { width: calc(100vw - 24px); }
  body.bdm-page-seo-services .signal-track { left: 4%; right: 4%; }
  body.bdm-page-seo-services .signal-dot { width: 11px; height: 11px; }
  body.bdm-page-seo-services .signal-label { font-size: .58rem; max-width: 8ch; }
}
@media (max-width: 420px) {
  body.bdm-page-seo-services h1 { font-size: clamp(34px, 10vw, 44px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.bdm-page-seo-services .zone::before { animation: none; opacity: .38; }
  body.bdm-page-seo-services .hero-copy > * { animation: none; opacity: 1; transform: none; }
  body.bdm-page-seo-services .signal-travel { display: none; }
  body.bdm-page-seo-services .stage-node { border-color: var(--orange) !important; background: var(--orange) !important; transform: rotate(45deg) !important; transition: none; }
  body.bdm-page-seo-services .rail-fill { height: 100% !important; transition: none; }
  body.bdm-page-seo-services .rail-head { opacity: 1 !important; }
  body.bdm-page-seo-services .stage-gutter::after { height: 100% !important; transition: none; }
  body.bdm-page-seo-services .faq-a-wrap { transition: none; }
}