/* SolutionsAI Bold — visual reskin (dark editorial) override layer
   Loaded after style.css; overrides palette, typography, and accents
   to match the "Bold" design while preserving the existing HTML structure
   (Engagement Ladder, Compounding Loop, FAQ, mid-market positioning). */

:root {
  --bold-bg:        #0A0E16;
  --bold-bg-2:      #0C111C;
  --bold-bg-3:      #06080E;
  --bold-accent:    #3D8BFF;
  --bold-text:      #ffffff;
  --bold-text-dim:  rgba(255,255,255,0.6);
  --bold-text-mute: rgba(255,255,255,0.4);
  --bold-text-fade: rgba(255,255,255,0.3);
  --bold-text-fnt:  rgba(255,255,255,0.18);
  --bold-border:    rgba(255,255,255,0.1);
  --bold-border-2:  rgba(255,255,255,0.18);
  --font-mono:      'JetBrains Mono','SF Mono','Menlo','Consolas',monospace;
  /* fold our new accent into existing tokens so any --blue user inherits the new colour */
  --blue:           #3D8BFF;
  --blue-light:     #5FA3FF;
  --dark:           #0A0E16;
  --dark-mid:       #0C111C;
  --dark-deep:      #06080E;
}

html, body { background: var(--bold-bg) !important; color: var(--bold-text); overflow-x: hidden; }
*::selection { background: var(--bold-accent); color: var(--bold-bg); }

/* let pointer events pass THROUGH the hero text so the globe canvas behind catches
   them across its full visible area (was previously dead on the left half). interactive
   children opt back in below. */
.hero-content { pointer-events: none; }
.hero-content a,
.hero-content button,
.hero-content input,
.hero-content textarea,
.hero-content select,
.hero-content #bold-search,
.hero-content .hero-btns,
.hero-content .hero-btns a { pointer-events: auto; }

/* hide the existing scroll-background canvas — it's a glow effect that fights the flat dark palette */
.scroll-bg, .scroll-bg__canvas, .scroll-bg__tint, .scroll-bg__dimmer { display: none !important; }

/* ───── NAV (frosted-glass; readable over ANY section) ───── */
.site-nav {
  background: rgba(10,14,22,0.65) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25) !important;
  mix-blend-mode: normal !important;
}
.site-nav.scrolled {
  background: rgba(10,14,22,0.82) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
.nav-inner { padding: 8px 0; }
.nav-link { font-family: var(--font-mono) !important; font-size: 13px !important; color: #fff !important; text-transform: lowercase; letter-spacing: 0.02em; }
.nav-link:hover { color: var(--bold-accent) !important; }
:root[data-theme="light"] .site-nav {
  background: rgba(255,255,255,0.72) !important;
  border-bottom-color: rgba(10,14,22,0.08) !important;
  box-shadow: 0 8px 30px rgba(10,14,22,0.06) !important;
}
:root[data-theme="light"] .site-nav.scrolled {
  background: rgba(255,255,255,0.88) !important;
  border-bottom-color: rgba(10,14,22,0.12) !important;
}
:root[data-theme="light"] .nav-link { color: var(--bold-text) !important; }
/* nav + footer logos swapped via bold.js based on theme; no filter hack */
.nav-cta, .btn--primary {
  background: var(--bold-accent) !important;
  color: var(--bold-bg) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}
.nav-cta:hover, .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(61,139,255,0.35); }
.theme-toggle { color: #fff !important; mix-blend-mode: normal; }

/* ───── HERO ───── */
.hero {
  background: var(--bold-bg) !important;
  min-height: 100vh;
  /* push content below the fixed nav so the hero label isn't clipped */
  padding-top: clamp(110px, 14vh, 150px) !important;
}
#hero-canvas { opacity: 0.4 !important; }
.hero-label {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  color: var(--bold-accent) !important;
  text-transform: none !important;
  display: inline-block;
}
.hero-label::before { content: "✦ "; margin-right: 4px; }
.hero-heading {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(2.8rem, 6.2vw, 7rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}
.hero-heading .word { color: #fff !important; }
.hero-heading .word--accent { color: var(--bold-accent) !important; }
.hero-sub { color: var(--bold-text-dim) !important; max-width: 42ch; font-size: 1.02rem; line-height: 1.6; }
.hero-btns .btn--ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid var(--bold-border-2) !important;
  border-radius: 999px !important;
}
.hero-btns .btn--ghost:hover { border-color: var(--bold-accent) !important; color: var(--bold-accent) !important; }
.hero-scroll-indicator, .scroll-arrow { color: var(--bold-text-mute) !important; font-family: var(--font-mono); font-size: 12px; }

/* ───── SECTION LABELS (all numbered "001 / ..." badges) ───── */
.section-label,
.section-label--blue,
.section-label--dim {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  color: var(--bold-accent) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
.section-label--dim { color: var(--bold-text-mute) !important; }

/* ───── SECTION HEADINGS (h2) ───── */
.section-heading {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* ───── TRUST + TECH MARQUEE (logo + name) ───── */
.trust, .trust-inner { background: var(--bold-bg) !important; }
.trust { border-top: 1px solid var(--bold-border); border-bottom: 1px solid var(--bold-border); }
.tech-marquee { padding: 26px 0; background: transparent !important; }
.tech-track { gap: 0 !important; align-items: center !important; }
.tech-pill {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--bold-text) !important;
  -webkit-text-stroke: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 28px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  white-space: nowrap;
}
.tech-pill + .tech-pill::before {
  content: "✦";
  position: absolute;
  left: -6px;
  color: var(--bold-accent);
  font-size: 0.7em;
  top: 50%;
  transform: translateY(-50%);
}
.tech-pill-icon {
  width: clamp(20px, 2.2vw, 28px);
  height: clamp(20px, 2.2vw, 28px);
  object-fit: contain;
  display: inline-block;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
:root[data-theme="light"] .tech-pill-icon { filter: brightness(0); opacity: 0.85; }
.tech-pill-name { line-height: 1; }

/* ───── BIG-NUMBER STATS ───── */
.stats-row { gap: 30px; }
.stat-item { padding-top: 22px; border-top: 1px solid var(--bold-border-2) !important; }
.stat-num {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(3rem, 6vw, 5rem) !important;
  line-height: 0.95 !important;
  color: #fff !important;
}
.stat-item:nth-child(2) .stat-num { color: var(--bold-accent) !important; }
.stat-label { color: var(--bold-text-mute) !important; font-size: 0.9rem; max-width: 22ch; margin-top: 14px; }

/* ───── SERVICES (10 cards — kept, restyled) ───── */
.services { background: var(--bold-bg) !important; }
.services-grid { gap: 1px !important; background: var(--bold-border); border: 1px solid var(--bold-border); }
.svc-card {
  background: var(--bold-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 30px 24px !important;
  transition: background 0.35s ease, padding 0.35s ease !important;
}
.svc-card:hover {
  background: linear-gradient(180deg, rgba(61,139,255,0.10), rgba(61,139,255,0.02)) !important;
}
.svc-title { color: #fff !important; font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em !important; }
.svc-desc { color: var(--bold-text-dim) !important; }
.svc-sub ul, .svc-sub li { color: var(--bold-text-mute) !important; }
.svc-sub li::before { color: var(--bold-accent) !important; }

/* ───── ENGAGE LADDER + METHODOLOGY LOOP (reused .steps-row) ───── */
.engage, .methodology { background: var(--bold-bg) !important; }
.steps-row { background: transparent !important; }
.step { background: transparent !important; padding: 24px 0 !important; border-top: 1px solid var(--bold-border-2); }
.step:hover { background: linear-gradient(90deg, rgba(61,139,255,0.07), transparent) !important; }
.step-num {
  color: var(--bold-accent) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
}
.step-title {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.step-desc { color: var(--bold-text-dim) !important; }
.loop-return .section-label { color: var(--bold-accent) !important; }
.contact-body { color: var(--bold-text-dim) !important; }

/* ───── FAQ ───── */
.faq { background: var(--bold-bg-2) !important; }
.faq-list { color: #fff; }
.faq-item { border-top-color: var(--bold-border-2) !important; }
.faq-q { color: #fff !important; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: "+"; float: right; color: var(--bold-accent); font-size: 1.4rem; line-height: 1; }
details[open] .faq-q::after { content: "−"; }
.faq-a { color: var(--bold-text-dim) !important; }

/* ───── IMPACT ───── */
.impact { background: var(--bold-bg-2) !important; border-top: 1px solid var(--bold-border); }
.impact-card { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--bold-border) !important; }
.impact-industry { color: var(--bold-accent) !important; font-family: var(--font-mono) !important; font-size: 12px !important; letter-spacing: 0.05em; text-transform: uppercase; }
.impact-quote { color: var(--bold-text-dim) !important; }
.impact-saving { color: #fff !important; font-weight: 700; }
.benchmark-strip { background: transparent !important; gap: 30px; }
.benchmark { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--bold-border) !important; padding: 22px; border-top: 1px solid var(--bold-border-2) !important; }
.benchmark-val { color: var(--bold-accent) !important; font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important; font-size: clamp(2.2rem, 5vw, 4rem) !important; line-height: 0.95 !important; }
.benchmark-label { color: var(--bold-text-mute) !important; max-width: 22ch; }

/* ───── CONTACT ───── */
.contact { background: var(--bold-bg) !important; }
.contact-info .contact-body, .contact-info .section-heading { color: #fff !important; }
.contact-info .contact-body { color: var(--bold-text-dim) !important; }
.form-field, .form-textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bold-border) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
/* native <option> elements use OS styling by default and ignore the parent's
   color/bg — set them explicitly so the dropdown is readable in dark mode */
.form-field option,
select.form-field option {
  background: var(--bold-bg) !important;
  color: var(--bold-text) !important;
}
:root[data-theme="light"] .form-field option,
:root[data-theme="light"] select.form-field option {
  background: #ffffff !important;
  color: var(--bold-text) !important;
}
.form-field:focus, .form-textarea:focus { border-color: var(--bold-accent) !important; outline: none; }
.form-field::placeholder, .form-textarea::placeholder { color: var(--bold-text-mute) !important; }
.form-alt { color: var(--bold-text-mute) !important; }
.form-alt a { color: var(--bold-accent) !important; }
.btn--calendly { background: var(--bold-accent) !important; color: var(--bold-bg) !important; border-radius: 999px !important; padding: 16px 30px !important; font-weight: 700 !important; }

/* ───── FINAL CTA ───── */
.final-cta { background: var(--bold-bg) !important; border-top: 1px solid var(--bold-border); position: relative; overflow: hidden; }
.cta-glow { background: radial-gradient(circle, rgba(61,139,255,0.18), transparent 64%) !important; }
.cta-heading {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(2rem, 6.2vw, 5.4rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}
.cta-sub { color: var(--bold-text-mute) !important; font-family: var(--font-mono); font-size: 13px; }
.btn--cta { background: var(--bold-accent) !important; color: var(--bold-bg) !important; border-radius: 999px !important; padding: 18px 34px !important; font-weight: 700 !important; }
.btn--cta:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(61,139,255,0.4); }

/* ───── FOOTER ───── */
.site-footer { background: var(--bold-bg) !important; border-top: 1px solid var(--bold-border); padding: 56px 34px 40px; }
.footer-copy { color: var(--bold-text-fade) !important; font-family: var(--font-mono) !important; font-size: 12px !important; }
.footer-links a { color: var(--bold-text-mute) !important; font-size: 14px; }
.footer-links a:hover { color: var(--bold-accent) !important; }

/* ───── DIVIDERS ───── */
.divider { border-color: var(--bold-border) !important; background: transparent !important; height: 1px; }

/* ───── LIGHT-THEME OVERRIDE (toggled via html[data-theme="light"] by app.js) ───── */
:root[data-theme="light"] {
  /* softer off-white palette — less harsh than pure #fff */
  --bold-bg: #EBEEF3;
  --bold-bg-2: #E2E6ED;
  --bold-bg-3: #D8DDE6;
  --bold-text: #0A0E16;
  --bold-text-dim: rgba(10,14,22,0.7);
  --bold-text-mute: rgba(10,14,22,0.5);
  --bold-text-fade: rgba(10,14,22,0.4);
  --bold-text-fnt: rgba(10,14,22,0.18);
  --bold-border: rgba(10,14,22,0.1);
  --bold-border-2: rgba(10,14,22,0.16);
}
:root[data-theme="light"] *::selection { background: var(--bold-accent); color: #fff; }
:root[data-theme="light"] .tech-pill { -webkit-text-stroke: 1px rgba(10,14,22,0.4); }
:root[data-theme="light"] .site-nav { mix-blend-mode: normal; }
:root[data-theme="light"] .nav-link { color: var(--bold-text) !important; }
:root[data-theme="light"] .theme-toggle { color: var(--bold-text) !important; }
:root[data-theme="light"] .hero-heading { color: var(--bold-text) !important; }
:root[data-theme="light"] .hero-heading .word { color: var(--bold-text) !important; }
:root[data-theme="light"] .hero-heading .word.word--accent { color: var(--bold-accent) !important; }
:root[data-theme="light"] .section-heading { color: var(--bold-text) !important; }
:root[data-theme="light"] .svc-row-title,
:root[data-theme="light"] .step-title,
:root[data-theme="light"] .stat-num,
:root[data-theme="light"] .stat-item:nth-child(2) .stat-num,
:root[data-theme="light"] .svc-title,
:root[data-theme="light"] .impact-saving,
:root[data-theme="light"] .faq-q,
:root[data-theme="light"] .cta-heading { color: var(--bold-text) !important; }
:root[data-theme="light"] .stat-item:nth-child(2) .stat-num { color: var(--bold-accent) !important; }
:root[data-theme="light"] .svc-row { border-top-color: var(--bold-border-2); }
:root[data-theme="light"] .svc-row:last-child { border-bottom-color: var(--bold-border-2); }
:root[data-theme="light"] .step { border-top-color: var(--bold-border-2); }
:root[data-theme="light"] .faq-item { border-color: var(--bold-border-2) !important; }
:root[data-theme="light"] .impact-card,
:root[data-theme="light"] .benchmark { background: rgba(10,14,22,0.03) !important; border-color: var(--bold-border) !important; }
:root[data-theme="light"] .form-field,
:root[data-theme="light"] .form-textarea { background: rgba(10,14,22,0.04) !important; border-color: var(--bold-border) !important; color: var(--bold-text) !important; }
:root[data-theme="light"] .form-field::placeholder,
:root[data-theme="light"] .form-textarea::placeholder { color: var(--bold-text-mute) !important; }
:root[data-theme="light"] .bold-search-chips button { color: var(--bold-text); background: rgba(10,14,22,0.04); border-color: var(--bold-border); }
:root[data-theme="light"] .footer-copy { color: var(--bold-text-fade) !important; }
:root[data-theme="light"] .nav-link:hover { color: var(--bold-accent) !important; }

/* ───── BOLD GLOBE (hero canvas) ───── */
@keyframes bold-glb-pulse { 0%,100% { opacity: 0.45; transform: scale(0.96); } 50% { opacity: 0.85; transform: scale(1.05); } }
#bold-globe {
  position: absolute;
  top: 8%;
  right: -6%;
  width: 600px;
  height: 600px;
  max-width: 72vw;
  z-index: 0;
  pointer-events: auto;
  opacity: 0;
  animation: rise 1.2s ease both;
  animation-delay: 0.2s;
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
#bold-globe .bold-globe-glow {
  position: absolute;
  top: 10%; left: 10%;
  width: 80%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,139,255,0.22) 0%, rgba(37,99,176,0.08) 48%, transparent 70%);
  filter: blur(4px);
  animation: bold-glb-pulse 7s ease-in-out infinite;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
#bold-globe canvas { position: relative; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#bold-globe canvas:active { cursor: grabbing; }
@media (max-width: 900px) {
  #bold-globe { width: 380px; height: 380px; right: -18%; top: 4%; opacity: 0.6; }
}

/* hero needs to layer content above globe; overflow VISIBLE so the search-pill
   response can grow past 100vh without being clipped (horizontal scroll is
   guarded by html/body overflow-x:hidden above). */
.hero { position: relative; overflow: visible; }
.hero-content { position: relative; z-index: 2; }
/* prevent following sections from visually overlapping the hero — make every
   non-hero section paint on its own opaque background and live in normal flow */
.trust, .services, .engage, .methodology, .faq, .impact, .contact, .final-cta, .site-footer { position: relative; z-index: 1; }

/* ───── SEARCH PILL ───── */
@keyframes bold-sp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bold-sp-dot { 0%,80%,100% { transform: scale(0.55); opacity: 0.35; } 40% { transform: scale(1); opacity: 1; } }
#bold-search { width: 100%; max-width: 560px; font-family: 'Open Sans', system-ui, sans-serif; margin-top: 28px; }
.bold-search-capsule {
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid rgba(11,17,32,0.06);
  padding: 8px 8px 8px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 14px 40px rgba(11,17,32,0.30), 0 2px 6px rgba(11,17,32,0.20);
}
.bold-search-icon { flex: 0 0 auto; }
.bold-search-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 16px;
  color: #0B1120;
  letter-spacing: 0.01em;
}
.bold-search-submit {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: none;
  background: var(--bold-bg);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.bold-search-submit:hover { background: var(--bold-accent); transform: translateY(-1px); }
.bold-search-chips { display: none; flex-wrap: wrap; gap: 9px; margin-top: 16px; animation: bold-sp-rise 0.32s ease; }
.bold-search-chips button {
  font-family: inherit; font-size: 13px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.bold-search-chips button:hover { border-color: var(--bold-accent); color: var(--bold-accent); background: rgba(61,139,255,0.06); }
.bold-search-response {
  display: none;
  margin-top: 14px;
  text-align: left;
  background: #FFFFFF;
  border: 1px solid rgba(11,17,32,0.06);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 14px 40px rgba(11,17,32,0.30);
  animation: bold-sp-rise 0.35s ease;
  max-height: min(54vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bold-search-response::-webkit-scrollbar { width: 6px; }
.bold-search-response::-webkit-scrollbar-thumb { background: rgba(11,17,32,0.2); border-radius: 3px; }
.bold-search-response-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.bold-search-response-brand span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bold-accent);
}
.bold-search-thinking { display: none; align-items: center; gap: 6px; padding: 4px 0 6px; }
.bold-search-thinking span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bold-accent);
  animation: bold-sp-dot 1.2s ease-in-out infinite;
}
.bold-search-thinking span:nth-child(2) { animation-delay: 0.15s; }
.bold-search-thinking span:nth-child(3) { animation-delay: 0.3s; }
.bold-search-answer { display: none; }
.bold-search-answer-text { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 1.7; color: #374151; }
.bold-search-answer-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.bold-search-answer-cta a {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 14px;
  text-decoration: none; color: #fff;
  background: var(--bold-accent);
  padding: 11px 20px;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}
.bold-search-answer-cta a:hover { opacity: 0.88; }
.bold-search-reset {
  font-family: 'Open Sans', sans-serif; font-size: 13px;
  color: #6B7280; background: none; border: none; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ───── SERVICES — NUMBERED ROWS WITH EXPANDING SUB-MENU ───── */
.services-grid.services-grid--rows { display: block !important; gap: 0 !important; background: transparent !important; border: none !important; }
.svc-details {
  display: block;
  border-top: 1px solid var(--bold-border-2);
}
.svc-details:last-child {
  border-bottom: 1px solid var(--bold-border-2);
}
.svc-row {
  display: flex; align-items: center; gap: 24px;
  padding: 30px 6px;
  text-decoration: none;
  transition: padding-left 0.35s ease, background 0.35s ease;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.svc-row::-webkit-details-marker { display: none; }
.svc-row::marker { content: ''; }
.svc-row:hover,
.svc-details[open] > .svc-row { padding-left: 22px; background: linear-gradient(90deg, rgba(61,139,255,0.10), transparent); }
.svc-row-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--bold-accent);
  flex: 0 0 auto;
}
.svc-row-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  color: #fff;
  flex: 1 1 auto;
}
.svc-row-tags {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  flex: 0 0 auto;
}
.svc-row-arrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--bold-accent);
  flex: 0 0 auto;
  display: inline-block;
  transition: transform 0.35s ease;
}
.svc-details[open] > .svc-row .svc-row-arrow { transform: rotate(45deg); }
/* expanding sub-menu panel */
.svc-row-detail {
  padding: 4px 6px 32px 64px;
  font-family: 'Open Sans', sans-serif;
  animation: svc-fade-in 0.35s ease;
  max-width: 880px;
}
@keyframes svc-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.svc-row-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bold-text-dim);
  margin: 0 0 22px;
}
.svc-row-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 28px;
}
.svc-row-list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--bold-text-mute);
}
.svc-row-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--bold-accent);
  font-size: 11px;
}
.svc-row-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--bold-accent);
  text-decoration: none;
  border: 1px solid var(--bold-border-2);
  padding: 9px 18px;
  border-radius: 999px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.svc-row-cta:hover {
  background: rgba(61,139,255,0.10);
  border-color: var(--bold-accent);
}
@media (max-width: 900px) {
  .svc-row { flex-wrap: wrap; gap: 8px; }
  .svc-row-tags { width: 100%; order: 4; }
  .svc-row-title { flex: 1 1 auto; }
  .svc-row-detail { padding-left: 12px; padding-right: 12px; }
  .svc-row-list { grid-template-columns: 1fr; gap: 8px; }
}