:is(body.dark-mode, html[data-theme="dark"] body) {
  color: #c4cede;
  background:
    radial-gradient(circle at 12% 10%, rgba(159, 194, 255, 0.16), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(93, 113, 194, 0.18), transparent 28%),
    radial-gradient(circle at 72% 84%, rgba(159, 194, 255, 0.08), transparent 32%),
    linear-gradient(180deg, #030f18 0%, #08131f 42%, #091523 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body)::before {
  background-image:
    linear-gradient(rgba(159, 194, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 194, 255, 0.03) 1px, transparent 1px),
    linear-gradient(
      90deg,
      transparent 0,
      transparent calc(50% - 1px),
      rgba(159, 194, 255, 0.09) 50%,
      transparent calc(50% + 1px),
      transparent 100%
    );
  opacity: 0.22;
}

:is(body.dark-mode, html[data-theme="dark"] body)::after {
  opacity: 0.14;
}

:is(body.dark-mode, html[data-theme="dark"] body) .site-header::before {
  background: rgba(3, 15, 24, 0.92);
  border-color: rgba(159, 194, 255, 0.08);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:is(body.dark-mode, html[data-theme="dark"] body) .site-header.is-scrolled::before,
:is(body.dark-mode, html[data-theme="dark"] body) .site-header.menu-open::before {
  background: rgba(4, 13, 22, 0.98);
  border-color: rgba(159, 194, 255, 0.12);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:is(body.dark-mode, html[data-theme="dark"] body) .site-header .brand-logo {
  filter: brightness(0) invert(1);
}

:is(body.dark-mode, html[data-theme="dark"] body) .nav-links {
  background: rgba(10, 21, 34, 0.94);
  border-color: rgba(159, 194, 255, 0.12);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

:is(body.dark-mode, html[data-theme="dark"] body) .nav-links a {
  color: #d7e0ee;
}

:is(body.dark-mode, html[data-theme="dark"] body) .nav-links a:hover {
  color: #ffffff;
  background: rgba(93, 113, 194, 0.18);
}

:is(body.dark-mode, html[data-theme="dark"] body) .nav-links a[aria-current="page"] {
  color: #ffffff;
  background: linear-gradient(135deg, #5d71c2 0%, #586cbd 100%);
  box-shadow: 0 12px 28px rgba(88, 108, 189, 0.3);
}

:is(body.dark-mode, html[data-theme="dark"] body) .dark-mode-toggle {
  background: rgba(10, 21, 34, 0.9);
  border-color: rgba(159, 194, 255, 0.14);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

:is(body.dark-mode, html[data-theme="dark"] body) .dark-mode-toggle .dm-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
  color: #d7e0ee;
}

:is(body.dark-mode, html[data-theme="dark"] body) .dark-mode-toggle .dm-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: #d7e0ee;
}

:is(body.dark-mode, html[data-theme="dark"] body) .menu-toggle {
  background: rgba(10, 21, 34, 0.9);
  border-color: rgba(159, 194, 255, 0.14);
  color: #eef3fb;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

:is(body.dark-mode, html[data-theme="dark"] body) .btn-secondary,
:is(body.dark-mode, html[data-theme="dark"] body) .btn-ghost {
  color: #eef3fb;
  background: rgba(10, 21, 34, 0.84);
  border-color: rgba(159, 194, 255, 0.14);
}

:is(body.dark-mode, html[data-theme="dark"] body) :is(.page-about .about-story-hero .btn-secondary, .page-work .work-cta-section .btn-secondary) {
  color: #eef3fb;
  background: rgba(10, 21, 34, 0.92);
  border-color: rgba(159, 194, 255, 0.16);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

:is(body.dark-mode, html[data-theme="dark"] body) .page-about .about-story-hero .btn-primary {
  color: #0b1f3a;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(120, 167, 255, 0.12),
    0 0 42px rgba(95, 203, 255, 0.16),
    0 18px 40px rgba(0, 0, 0, 0.28);
}

:is(body.dark-mode, html[data-theme="dark"] body) .page-about .about-story-hero .btn-primary:hover {
  color: #062140;
  box-shadow:
    0 0 0 1px rgba(120, 167, 255, 0.18),
    0 0 52px rgba(95, 203, 255, 0.22),
    0 20px 44px rgba(0, 0, 0, 0.3);
}

:is(body.dark-mode, html[data-theme="dark"] body) :is(.page-about .about-story-hero .btn-secondary:hover, .page-work .work-cta-section .btn-secondary:hover) {
  color: #ffffff;
  background: rgba(14, 27, 43, 0.98);
  border-color: rgba(120, 167, 255, 0.28);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(120, 167, 255, 0.08);
}

:is(body.dark-mode, html[data-theme="dark"] body) .section + .section {
  border-top-color: rgba(159, 194, 255, 0.08);
}

:is(body.dark-mode, html[data-theme="dark"] body) .site-footer {
  background: linear-gradient(180deg, #08131f 0%, #0b1724 100%);
  border-top-color: rgba(159, 194, 255, 0.12);
}

:is(body.dark-mode, html[data-theme="dark"] body) .site-footer .brand-logo {
  filter: brightness(0) invert(1);
}

:is(body.dark-mode, html[data-theme="dark"] body) .footer-brand p,
:is(body.dark-mode, html[data-theme="dark"] body) .footer-links,
:is(body.dark-mode, html[data-theme="dark"] body) .footer-links a,
:is(body.dark-mode, html[data-theme="dark"] body) .footer-bottom {
  color: rgba(223, 233, 248, 0.72);
}

:is(body.dark-mode, html[data-theme="dark"] body) .footer-links a:hover {
  color: #ffffff;
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .hero-homepage {
  background: linear-gradient(180deg, #07111d 0%, #0a1624 72%, #0a1522 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .hero-homepage::after {
  background: linear-gradient(180deg, rgba(10, 21, 34, 0) 0%, rgba(10, 21, 34, 0.94) 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .hero-home-greeting {
  color: #9fc2ff;
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .hero-homepage h1,
:is(body.dark-mode, html[data-theme="dark"] body).homepage .recent-sites-heading,
:is(body.dark-mode, html[data-theme="dark"] body).homepage .site-card-title,
:is(body.dark-mode, html[data-theme="dark"] body) .contact-copy h2 {
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .hero-home-subcopy p,
:is(body.dark-mode, html[data-theme="dark"] body) .contact-copy p {
  color: #c4cede;
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .hero-social-link,
:is(body.dark-mode, html[data-theme="dark"] body) .contact-social-link {
  background: rgba(10, 21, 34, 0.84);
  border-color: rgba(159, 194, 255, 0.2);
  color: #dfe9ff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .hero-home-actions .btn-ghost,
:is(body.dark-mode, html[data-theme="dark"] body) .contact-social-link:hover {
  background: rgba(15, 28, 44, 0.96);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .hero-home-visual::before {
  background: linear-gradient(180deg, #1e2f58 0%, #101c34 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .hero-home-skill {
  background: rgba(10, 18, 32, 0.45);
  border-color: rgba(120, 167, 255, 0.18);
  color: #dce6f5;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(120, 167, 255, 0.08);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .site-card-img,
:is(body.dark-mode, html[data-theme="dark"] body) .contact-form {
  background: #101927;
  border-color: rgba(159, 194, 255, 0.14);
  color: #dce6f5;
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .homepage-feat-cards,
:is(body.dark-mode, html[data-theme="dark"] body).homepage .recent-sites,
:is(body.dark-mode, html[data-theme="dark"] body) .contact-section {
  background: linear-gradient(180deg, #08131f 0%, #0d1725 100%);
}


:is(body.dark-mode, html[data-theme="dark"] body).page-services :is(.services-intro-section, .services-start-section),
:is(body.dark-mode, html[data-theme="dark"] body).page-work .work-cta-section,
:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .cs-bottom-cta-section,
:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-page-cta-section {
  background: linear-gradient(180deg, #0d1726 0%, #102033 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-services :is(.services-detail-section, .services-fit-section, .services-custom-code-section),
:is(body.dark-mode, html[data-theme="dark"] body).page-work .portfolio-section,
:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .cs-pricing-section,
:is(body.dark-mode, html[data-theme="dark"] body).page-about :is(.about-process-section, .about-quote-section) {
  background: linear-gradient(180deg, #08131f 0%, #0d1725 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .cs-banner-wave svg path {
  fill: #08131f;
}

:is(body.dark-mode, html[data-theme="dark"] body) :is(.services-benefit-card, .portfolio-card, .cs-item, .contact-card, .quote-panel, .about-story-badge, .about-story-fact, .about-process-meta-card, .about-process-step) {
  background: #101927;
  border-color: rgba(159, 194, 255, 0.14);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
}

:is(body.dark-mode, html[data-theme="dark"] body) :is(.services-benefit-card h3, .portfolio-card-title, .cs-pricing-title, .cs-package, .cs-price, .about-story-badge-name, .about-story-fact strong, .about-process-intro h2, .about-process-step-copy h3, .about-quote-copy h2, .work-hero-copy h1, .work-cta-inner h2) {
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body) :is(.services-benefit-card p, .portfolio-card-category, .portfolio-card-link, .cs-li, .cs-duration, .about-story-badge-role, .about-story-fact p, .about-process-intro > p, .about-process-meta-card p, .about-process-step-copy p:last-child, .about-quote-copy > p, .work-hero-copy p, .work-cta-inner p) {
  color: #c4cede;
}

:is(body.dark-mode, html[data-theme="dark"] body) :is(.contact-form input, .contact-form textarea, .quote-form input, .quote-form select, .quote-form textarea) {
  background: #172232;
  border-color: rgba(159, 194, 255, 0.16);
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body) :is(.contact-form input::placeholder, .contact-form textarea::placeholder, .quote-form textarea::placeholder) {
  color: #8f9db2;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-story-callout {
  background: rgba(14, 26, 42, 0.72);
  border-color: rgba(159, 194, 255, 0.16);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-story-callout h2,
:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-page-cta h2 {
  color: #ffffff;
}

/* ============================================================
   Design Enhancement System — Dark Mode Phases 4, 5, 7, 9, 10
   ============================================================ */

/* --- Phase 4: Nav neon glow --------------------------- */
:is(body.dark-mode, html[data-theme="dark"] body) .site-header::before {
  border-bottom-color: rgba(120, 167, 255, 0.12);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(120, 167, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

:is(body.dark-mode, html[data-theme="dark"] body) .site-header.is-scrolled::before {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(120, 167, 255, 0.18);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(120, 167, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* --- Phase 5: Card neon hover ------------------------- */
:is(body.dark-mode, html[data-theme="dark"] body) :is(.services-benefit-card, .portfolio-card, .cs-item, .feat-card) {
  transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
}

:is(body.dark-mode, html[data-theme="dark"] body) :is(.services-benefit-card, .portfolio-card, .cs-item, .feat-card):hover {
  border-color: rgba(120, 167, 255, 0.32);
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.28),
    0 0 32px rgba(120, 167, 255, 0.1),
    inset 0 1px 0 rgba(120, 167, 255, 0.06);
  transform: translateY(-2px);
}

:is(body.dark-mode, html[data-theme="dark"] body) .loc-benefit {
  transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
}

:is(body.dark-mode, html[data-theme="dark"] body) .loc-benefit:hover {
  border-color: rgba(120, 167, 255, 0.3);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), 0 0 24px rgba(120, 167, 255, 0.09);
  transform: translateY(-2px);
}

/* --- Phase 7: CTA band neon treatment ----------------- */
:is(body.dark-mode, html[data-theme="dark"] body).page-work .work-cta-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 167, 255, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #0d1726 0%, #102033 100%);
  border-top: 1px solid rgba(120, 167, 255, 0.14);
  border-bottom: 1px solid rgba(120, 167, 255, 0.08);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-page-cta-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 167, 255, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #0d1726 0%, #102033 100%);
  border-top: 1px solid rgba(120, 167, 255, 0.14);
  border-bottom: 1px solid rgba(120, 167, 255, 0.08);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-services :is(.services-intro-section, .services-start-section) {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(120, 167, 255, 0.05) 0%, transparent 55%),
    linear-gradient(180deg, #0d1726 0%, #102033 100%);
}

/* --- Phase 9: Extended dark mode element coverage ----- */

/* About page sections not previously covered */
:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-story-callout {
  background: rgba(8, 14, 26, 0.88);
  border-color: rgba(120, 167, 255, 0.14);
}

/* Dark mode wave fill — heroes transition to dark section below */
:is(body.dark-mode, html[data-theme="dark"] body).page-services .service-page-hero .cs-banner-wave svg path,
:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-story-hero .cs-banner-wave svg path,
:is(body.dark-mode, html[data-theme="dark"] body).page-work .cs-banner .cs-banner-wave svg path {
  fill: #08131f;
}

/* Services detail sections - extended */
:is(body.dark-mode, html[data-theme="dark"] body).page-services .services-benefit-card,
:is(body.dark-mode, html[data-theme="dark"] body).page-services .services-benefit-icon {
  background: rgba(12, 19, 32, 0.88);
}

/* Location pages - full dark coverage */
:is(body.dark-mode, html[data-theme="dark"] body).page-location {
  background:
    radial-gradient(circle at 10% 20%, rgba(120, 167, 255, 0.1), transparent 30%),
    linear-gradient(180deg, #06101b 0%, #091523 100%);
  color: #c4cede;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location h1,
:is(body.dark-mode, html[data-theme="dark"] body).page-location h2,
:is(body.dark-mode, html[data-theme="dark"] body).page-location h3,
:is(body.dark-mode, html[data-theme="dark"] body).page-location h4 {
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .eyebrow,
:is(body.dark-mode, html[data-theme="dark"] body).page-location .mini-label {
  color: #78a7ff;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-banner {
  background:
    radial-gradient(circle at 10% 20%, rgba(120, 167, 255, 0.14), transparent 26%),
    radial-gradient(circle at 90% 6%, rgba(93, 113, 194, 0.18), transparent 30%),
    linear-gradient(180deg, #06101b 0%, #091523 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location :is(.loc-banner h1, .loc-banner .eyebrow) {
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-banner p {
  color: #c4cede;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-benefit {
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(7, 13, 24, 0.94));
  border-color: rgba(120, 167, 255, 0.14);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-benefit::before {
  background: linear-gradient(90deg, #43b7ff 0%, #8fdcff 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-benefit::after {
  background: radial-gradient(circle, rgba(67, 183, 255, 0.14) 0%, transparent 72%);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-benefit:hover {
  border-color: rgba(67, 183, 255, 0.26);
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-benefit h3,
:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-split h2,
:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-cta-band h2 {
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-compare-card {
  background: rgba(8, 14, 24, 0.92);
  border-color: rgba(120, 167, 255, 0.16);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-compare-row {
  border-bottom-color: rgba(120, 167, 255, 0.1);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-compare-label,
:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-compare-row span:first-child {
  color: rgba(196, 206, 222, 0.7);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-list li {
  color: #c4cede;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-list li::before {
  background: #bfe7ff;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-benefit p,
:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-split-copy > p,
:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-cta-band p,
:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-banner-lead {
  color: #c4cede;
}

:is(body.dark-mode, html[data-theme="dark"] body) .loc-compare-bad {
  color: #ff8080;
}

:is(body.dark-mode, html[data-theme="dark"] body) .loc-compare-good {
  color: #72e0a0;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-cta-band {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 167, 255, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0a1520 0%, #0d1a2a 100%);
  border-top-color: rgba(120, 167, 255, 0.18);
  border-bottom-color: rgba(120, 167, 255, 0.1);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-other-grid a {
  background: rgba(10, 16, 28, 0.8);
  border-color: rgba(120, 167, 255, 0.16);
  color: #c4cede;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .loc-other-grid a:hover {
  border-color: rgba(120, 167, 255, 0.4);
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .site-header::before {
  background: rgba(3, 12, 22, 0.82);
  border-color: rgba(120, 167, 255, 0.1);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .site-header.is-scrolled::before {
  background: rgba(4, 13, 22, 0.94);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .nav-links {
  background: rgba(10, 21, 34, 0.78);
  border-color: rgba(120, 167, 255, 0.12);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .nav-links a {
  color: #d7e0ee;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-location .brand-logo {
  filter: brightness(0) invert(1);
}

/* --- Phase 10: Typography glow in dark mode ----------- */
:is(body.dark-mode, html[data-theme="dark"] body) .eyebrow {
  text-shadow: 0 0 14px rgba(120, 167, 255, 0.38);
}

:is(body.dark-mode, html[data-theme="dark"] body) :is(.page-services, .page-work, .page-pricing, .page-about, .page-location) h1 {
  text-shadow: 0 2px 32px rgba(120, 167, 255, 0.1);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .hero-homepage h1 {
  text-shadow: 0 2px 48px rgba(120, 167, 255, 0.14);
}

/* Gradient h1 on dark hero sections */
:is(body.dark-mode, html[data-theme="dark"] body) .page-services .services-offer-copy h1,
:is(body.dark-mode, html[data-theme="dark"] body) .page-about .about-story-copy h1,
:is(body.dark-mode, html[data-theme="dark"] body) .page-work .work-hero-copy h1 {
  background: linear-gradient(135deg, #ffffff 15%, #d4e8ff 55%, #78a7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* Dropdown nav — dark mode */
@media (min-width: 1025px) {
  :is(body.dark-mode, html[data-theme="dark"] body) .nav-dropdown-menu {
    background: rgba(4, 13, 22, 0.97);
    border-color: rgba(120, 167, 255, 0.16);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(120, 167, 255, 0.06);
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .nav-dropdown-menu a {
    color: #c4cede;
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .nav-dropdown-menu a:hover {
    background: rgba(120, 167, 255, 0.1);
    color: #eef3fb;
  }
}

@media (max-width: 1024px) {
  :is(body.dark-mode, html[data-theme="dark"] body) .site-nav {
    background: rgba(4, 13, 22, 0.96);
    border-color: rgba(159, 194, 255, 0.12);
    box-shadow: 0 28px 50px rgba(0, 0, 0, 0.34);
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .nav-links {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .nav-mobile-actions {
    border-top-color: rgba(159, 194, 255, 0.12);
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .nav-dropdown-menu {
    border-left-color: rgba(120, 167, 255, 0.22);
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .nav-dropdown-menu a {
    color: #c4cede;
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .nav-dropdown-menu a:hover {
    color: #eef3fb;
    background: rgba(120, 167, 255, 0.08);
  }
}

/* Services/About true dark-mode surfaces */
:is(body.dark-mode, html[data-theme="dark"] body).page-services .service-page-hero,
:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-story-hero,
:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-section {
  background: linear-gradient(180deg, #08131f 0%, #0d1725 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-story-portrait-card {
  background:
    radial-gradient(circle at 50% 20%, rgba(120, 167, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(7, 17, 29, 0.98), rgba(10, 20, 32, 0.96));
  border-color: rgba(159, 194, 255, 0.16);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(120, 167, 255, 0.04);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-services :is(.services-intro-section, .services-detail-section, .services-fit-section, .services-custom-code-section, .services-start-section),
:is(body.dark-mode, html[data-theme="dark"] body).page-about :is(.about-process-section, .about-page-cta-section, .about-quote-section) {
  background: linear-gradient(180deg, #08131f 0%, #091523 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-about #quote {
  background: linear-gradient(180deg, #08131f 0%, #091523 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .cs-pricing-section::before {
  content: none;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-services .cs-banner-wave svg path,
:is(body.dark-mode, html[data-theme="dark"] body).page-about .cs-banner-wave svg path,
:is(body.dark-mode, html[data-theme="dark"] body).page-contact .cs-banner-wave svg path {
  fill: #08131f;
}

/* --- Oak Harbor-style dark banner universe for shared title bands --- */
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner {
  background:
    linear-gradient(135deg, #071126 0%, #08131f 52%, #10323a 100%);
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner::before {
  background:
    radial-gradient(circle at 82% 18%, rgba(67, 183, 255, 0.12) 0%, transparent 28%),
    linear-gradient(180deg, rgba(2, 10, 22, 0.12) 0%, rgba(2, 10, 22, 0.02) 100%);
  z-index: 0;
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner .container,
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-title,
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-sub {
  position: relative;
  z-index: 2;
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-title {
  color: #fafbfc;
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-sub {
  color: rgba(250, 251, 252, 0.82);
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-wave {
  z-index: 2;
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-wave path {
  fill: #08131f;
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-universe {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-universe-1 {
  width: 100%;
  height: 100%;
  top: 0;
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-universe-2 {
  width: 100%;
  height: 70%;
  left: -20%;
  top: 0;
  transform: scaleY(-1);
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-universe-3 {
  width: 100%;
  height: 70%;
  left: -10%;
  top: 20%;
  transform: scaleX(-1);
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star {
  position: absolute;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.5;
  animation: cs-banner-star-flicker 6s ease-in-out infinite;
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-universe-2 .cs-banner-star:nth-child(3) {
  top: -10% !important;
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-universe-2 .cs-banner-star:nth-child(4) {
  top: -15% !important;
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-1 { top: 2%; left: 25%; animation-duration: 6s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-2 { top: 1.3%; left: 48%; animation-duration: 4s; animation-delay: 0.5s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-3 { top: 20%; left: 36%; animation-duration: 8s; animation-delay: 1s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-4 { top: 17%; left: 5%; animation-duration: 7s; animation-delay: 0.8s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-5 { top: 11%; right: 19%; animation-duration: 8s; animation-delay: 0.2s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-6 { top: 4%; right: 24%; animation-duration: 3s; animation-delay: 0.9s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-7 { top: 3%; left: 29%; animation-duration: 5s; animation-delay: 1.2s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-8 { top: 18%; left: 56%; animation-duration: 7s; animation-delay: 0.4s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-9 { top: 31%; left: 57%; animation-duration: 4s; animation-delay: 0.1s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-10 { top: 27%; left: 12%; animation-duration: 4s; animation-delay: 0.2s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-11 { top: 7%; right: 31%; animation-duration: 3s; animation-delay: 1.4s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-12 { top: 35%; right: 12%; animation-duration: 4.5s; animation-delay: 1.1s; }
:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-star-13 { top: 12%; right: 25%; animation-duration: 3.3s; animation-delay: 0.7s; }

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-shooting-star {
  position: absolute;
  top: -23.59%;
  right: 50%;
  width: 1px;
  height: 70px;
  background: #fff;
  transform: rotate(-33deg);
  animation: cs-banner-shooting-star 9s ease-in infinite;
  animation-delay: 1s;
}

:is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-shooting-star-2 {
  top: -23.59%;
  right: 50%;
  animation: cs-banner-shooting-star-2 10s ease-in infinite;
  animation-delay: 1.5s;
}

@keyframes cs-banner-star-flicker {
  0% { opacity: 0.2; }
  50% { opacity: 0.8; }
  100% { opacity: 0.2; }
}

@keyframes cs-banner-shooting-star {
  0% {
    top: -13.59%;
    right: 60%;
    opacity: 1;
  }

  2% {
    top: 100%;
    right: 0%;
    opacity: 0;
  }

  86%, 100% {
    opacity: 0;
  }
}

@keyframes cs-banner-shooting-star-2 {
  0% {
    top: -23.59%;
    right: 50%;
    opacity: 1;
  }

  2% {
    top: 100%;
    right: -17%;
    opacity: 0;
  }

  86%, 100% {
    opacity: 0;
  }
}

@media (min-width: 64rem) {
  :is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-universe-1 {
    width: 100%;
    height: 50%;
    left: -18.75rem;
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-universe-2 {
    width: 100%;
    height: 40%;
    left: 0;
    top: 30%;
    transform: scaleX(-1);
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-universe-3 {
    width: 100%;
    height: 50%;
    left: 10%;
    top: 0;
    transform: scaleY(-1);
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .cs-banner-shooting-star {
    transform: rotate(-75deg);
  }
}

/* --- Shared shell refresh finale: rail glow, ambient stars, CTA glow, pricing emphasis --- */
:is(body.dark-mode, html[data-theme="dark"] body).ambient-ready .starfield {
  opacity: 1;
}

:is(body.dark-mode, html[data-theme="dark"] body).ambient-ready .bg-glow-one {
  opacity: 0.18;
}

:is(body.dark-mode, html[data-theme="dark"] body).ambient-ready .bg-glow-two {
  opacity: 0.26;
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage :is(.starfield, .bg-glow) {
  display: block;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) {
  --rail-link-soft: rgba(240, 244, 251, 0.9);
  --rail-link: #ffffff;
  --rail-link-active: #60caff;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header::before {
  background: linear-gradient(90deg, rgba(3, 11, 20, 0.95) 0%, rgba(5, 14, 24, 0.98) 58%, rgba(7, 28, 36, 0.96) 100%);
  border-bottom-color: rgba(120, 167, 255, 0.16);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.38),
    0 0 42px rgba(120, 167, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .nav-shell {
  background: linear-gradient(90deg, rgba(5, 12, 22, 0.96) 0%, rgba(6, 15, 26, 0.94) 58%, rgba(9, 28, 36, 0.92) 100%);
  border-color: rgba(120, 167, 255, 0.18);
  box-shadow:
    0 0 0 1px rgba(120, 167, 255, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.42),
    0 0 36px rgba(95, 203, 255, 0.08);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header.is-scrolled .nav-shell,
:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header.menu-open .nav-shell {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header .brand::before {
  opacity: 1;
  background: radial-gradient(circle at 38% 52%, rgba(109, 216, 255, 0.24) 0%, transparent 62%);
  filter: blur(16px);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header .brand-after-dark {
  color: #98dcff;
  opacity: 1;
  transform: translateY(0) scale(1);
  text-shadow:
    0 0 12px rgba(98, 210, 255, 0.62),
    0 0 30px rgba(98, 210, 255, 0.28);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header .brand-logo {
  filter: drop-shadow(0 0 18px rgba(120, 167, 255, 0.12));
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .nav-links a {
  color: var(--rail-link-soft);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .nav-links a:hover {
  color: var(--rail-link);
  background: transparent;
  text-shadow: 0 0 18px rgba(120, 167, 255, 0.22);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .nav-links a[aria-current="page"] {
  color: var(--rail-link-active);
  text-shadow: 0 0 18px rgba(96, 202, 255, 0.28);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .header-cta {
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  border-color: rgba(255, 255, 255, 0.72);
  color: #0d2747;
  box-shadow:
    0 0 0 1px rgba(120, 167, 255, 0.12),
    0 0 42px rgba(95, 203, 255, 0.16),
    0 18px 40px rgba(0, 0, 0, 0.28);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .dark-mode-toggle {
  background: rgba(5, 14, 24, 0.92);
  border-color: rgba(120, 167, 255, 0.26);
  box-shadow:
    inset 0 0 0 1px rgba(120, 167, 255, 0.08),
    0 0 34px rgba(95, 203, 255, 0.12);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .dark-mode-toggle .dm-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: #ffd166;
  filter: drop-shadow(0 0 12px rgba(255, 209, 102, 0.48));
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .dark-mode-toggle .dm-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.55);
}

:is(body.dark-mode, html[data-theme="dark"] body) .btn-primary {
  box-shadow:
    0 0 0 1px rgba(120, 167, 255, 0.18),
    0 0 34px rgba(120, 167, 255, 0.14),
    0 20px 42px rgba(0, 0, 0, 0.32);
}

:is(body.dark-mode, html[data-theme="dark"] body) .btn-primary:hover {
  box-shadow:
    0 0 0 1px rgba(120, 167, 255, 0.24),
    0 0 44px rgba(120, 167, 255, 0.18),
    0 22px 46px rgba(0, 0, 0, 0.34);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .cs-item.cs-popular {
  border-color: rgba(120, 167, 255, 0.62);
  box-shadow:
    0 0 0 1px rgba(120, 167, 255, 0.18),
    0 0 58px rgba(120, 167, 255, 0.16),
    0 24px 56px rgba(0, 0, 0, 0.36);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .cs-item.cs-popular .cs-popular-badge {
  box-shadow: 0 0 24px rgba(120, 167, 255, 0.26);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-card {
  background: linear-gradient(180deg, rgba(6, 13, 23, 0.98), rgba(4, 10, 18, 0.96));
  border-color: rgba(120, 167, 255, 0.16);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(120, 167, 255, 0.04);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-card-icon {
  position: relative;
  overflow: hidden;
  background: rgba(10, 40, 72, 0.9);
  box-shadow: inset 0 1px 0 rgba(120, 167, 255, 0.08);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-card-icon svg {
  transition:
    opacity 0.34s ease,
    transform 0.34s ease;
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-card-icon::before,
:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-card-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
  transition:
    opacity 0.34s ease,
    transform 0.34s ease;
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-card-icon::before {
  width: 3.65rem;
  height: 3.65rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 34%, #ffffff 0 44%, #eef6ff 45% 74%, #d6e1ef 75% 100%);
  box-shadow:
    inset -0.55rem -0.55rem 0 rgba(182, 194, 214, 0.22),
    0 0 26px rgba(120, 167, 255, 0.28);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-card-icon::after {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: rgba(197, 205, 219, 0.94);
  box-shadow:
    0.78rem -0.68rem 0 0.08rem rgba(197, 205, 219, 0.82),
    -0.76rem 0.92rem 0 0.12rem rgba(197, 205, 219, 0.76),
    0.92rem 0.96rem 0 0 rgba(197, 205, 219, 0.74),
    -0.96rem -0.18rem 0 -0.02rem rgba(197, 205, 219, 0.7);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-card:hover .feat-card-icon {
  background: transparent;
  box-shadow: none;
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-card:hover .feat-card-icon svg {
  opacity: 0;
  transform: scale(0.24) rotate(28deg);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-card:hover .feat-card-icon::before,
:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-card:hover .feat-card-icon::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* --- Dark-mode corrections: services/work surfaces and about form parity --- */
:is(body.dark-mode, html[data-theme="dark"] body).page-services .services-offer-card,
:is(body.dark-mode, html[data-theme="dark"] body).page-work .work-cta-inner,
:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-quote-section .quote-panel,
:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-form-panel {
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(6, 12, 20, 0.98));
  border-color: rgba(120, 167, 255, 0.18);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(120, 167, 255, 0.04);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-services :is(.services-offer-card .mini-label, .services-offer-eyebrow),
:is(body.dark-mode, html[data-theme="dark"] body).page-work .work-cta-section .eyebrow,
:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-quote-section .quote-panel .mini-label,
:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-form-panel .mini-label {
  color: #78a7ff;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-services :is(.services-offer-price, .services-offer-list li),
:is(body.dark-mode, html[data-theme="dark"] body).page-work .work-cta-inner h2,
:is(body.dark-mode, html[data-theme="dark"] body).page-about .about-quote-section .quote-panel .panel-title,
:is(body.dark-mode, html[data-theme="dark"] body).page-about .quote-form .field span,
:is(body.dark-mode, html[data-theme="dark"] body).page-contact :is(.contact-page-form-panel .panel-title, .contact-page-field span, .contact-page-method-value, .contact-page-method-value a) {
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-services :is(.services-offer-price span, .services-offer-card-copy, .services-offer-card-note),
:is(body.dark-mode, html[data-theme="dark"] body).page-work .work-cta-inner p,
:is(body.dark-mode, html[data-theme="dark"] body).page-about :is(.form-note, .form-status),
:is(body.dark-mode, html[data-theme="dark"] body).page-contact :is(.contact-page-copy > p, .contact-page-form-intro, .contact-page-note, .contact-page-form-status, .contact-page-method-label) {
  color: #c4cede;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-services .services-offer-list li::before {
  color: #78a7ff;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-about .quote-form :is(input, select, textarea) {
  background: #172232;
  border-color: rgba(159, 194, 255, 0.16);
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-field :is(input, textarea) {
  background: #172232;
  border-color: rgba(159, 194, 255, 0.16);
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-about .quote-form :is(input, select, textarea)::placeholder {
  color: #8f9db2;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-field :is(input, textarea)::placeholder {
  color: #8f9db2;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-about .quote-form :is(input, select, textarea):focus {
  border-color: rgba(120, 167, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(120, 167, 255, 0.12);
  background: #1b2738;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-field :is(input, textarea):focus {
  border-color: rgba(120, 167, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(120, 167, 255, 0.12);
  background: #1b2738;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-about .form-note a {
  color: #bfe7ff;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-note a {
  color: #bfe7ff;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-section::before,
:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-section::after {
  content: none;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-copy h1 {
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-method {
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.96), rgba(5, 10, 18, 0.98));
  border-color: rgba(120, 167, 255, 0.16);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(120, 167, 255, 0.04);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-contact .contact-page-method-icon {
  background: linear-gradient(180deg, #102746, #0c1d34);
  box-shadow: 0 14px 30px rgba(8, 31, 59, 0.38);
}

/* --- Inspiration pass: stronger proof framing for home, work, and pricing --- */
:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-cards-intro-copy h2,
:is(body.dark-mode, html[data-theme="dark"] body).page-work .portfolio-intro-copy h2 {
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-cards-intro-copy p:last-child,
:is(body.dark-mode, html[data-theme="dark"] body).page-work .portfolio-intro-copy p:last-child,
:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-summary-card p,
:is(body.dark-mode, html[data-theme="dark"] body).page-work .portfolio-proof-card span,
:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .pricing-decision-card p:last-child {
  color: #c4cede;
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .reviews-google-badge {
  background: rgba(8, 20, 38, 0.6);
  border-color: rgba(151, 191, 255, 0.18);
  box-shadow:
    0 14px 30px rgba(4, 12, 24, 0.3),
    inset 0 1px 0 rgba(190, 224, 255, 0.06);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .reviews-google-badge span {
  color: rgba(238, 244, 252, 0.86);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .reviews-overall {
  background: rgba(120, 167, 255, 0.08);
  border-color: rgba(151, 191, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(214, 231, 255, 0.06);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-summary-card,
:is(body.dark-mode, html[data-theme="dark"] body).page-work .portfolio-proof-card,
:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .pricing-decision-card {
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.96), rgba(5, 10, 18, 0.98));
  border-color: rgba(120, 167, 255, 0.16);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(120, 167, 255, 0.04);
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .feat-summary-value,
:is(body.dark-mode, html[data-theme="dark"] body).page-work .portfolio-proof-card strong,
:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .pricing-decision-label {
  color: #78a7ff;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .pricing-decision-card h3 {
  color: #eef3fb;
}

:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .pricing-decision-card.is-featured {
  background: linear-gradient(180deg, rgba(11, 25, 44, 0.98), rgba(8, 16, 30, 0.98));
  border-color: rgba(120, 167, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(120, 167, 255, 0.14),
    0 0 48px rgba(120, 167, 255, 0.12),
    0 24px 52px rgba(0, 0, 0, 0.32);
}

:is(body.dark-mode, html[data-theme="dark"] body).page-pricing .pricing-decision-badge {
  background: rgba(120, 167, 255, 0.18);
  color: #eef6ff;
  box-shadow: 0 0 24px rgba(120, 167, 255, 0.12);
}

/* --- Header cleanup pass: dark-mode rail, dropdown polish, logo script --- */
:is(body.dark-mode, html[data-theme="dark"] body).homepage :is(.site-header.is-scrolled, .site-header.menu-open) {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .nav-links,
:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header.is-scrolled .nav-links,
:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header.menu-open .nav-links {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .nav-links a[aria-current="page"],
:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header.is-scrolled .nav-links a[aria-current="page"],
:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header.menu-open .nav-links a[aria-current="page"] {
  color: #ffffff;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 0 18px rgba(96, 202, 255, 0.22);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header .brand-after-dark {
  color: #9fe3ff;
  text-shadow:
    0 0 10px rgba(98, 210, 255, 0.56),
    0 0 24px rgba(98, 210, 255, 0.22);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .dark-mode-toggle {
  border: 0 !important;
  box-shadow:
    0 0 28px rgba(95, 203, 255, 0.1),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

@media (min-width: 1025px) {
  :is(body.dark-mode, html[data-theme="dark"] body) .nav-dropdown-menu {
    background: linear-gradient(180deg, rgba(6, 15, 26, 0.985), rgba(4, 12, 21, 0.985));
    border-color: rgba(120, 167, 255, 0.14);
    box-shadow:
      0 24px 58px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(120, 167, 255, 0.05);
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .nav-dropdown-menu a {
    color: #eef3fb;
  }

  :is(body.dark-mode, html[data-theme="dark"] body) .nav-dropdown-menu a:hover {
    background: #f6f2ea;
    color: #091523;
  }
}

:is(body.dark-mode, html[data-theme="dark"] body).homepage .hero-homepage::after {
  z-index: 1;
}

/* --- Header cleanup finale: responsive After Dark lockup glow --- */
:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header .brand-after-dark {
  color: #a9ebff;
  text-shadow:
    0 0 5px rgba(123, 225, 255, 0.85),
    0 0 14px rgba(98, 210, 255, 0.56),
    0 0 28px rgba(98, 210, 255, 0.24);
}

/* --- Oak Harbor rail duplicate: dark mode --- */
:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header]::before {
  background:
    linear-gradient(90deg, rgba(3, 11, 20, 0.97) 0%, rgba(5, 14, 24, 0.98) 58%, rgba(7, 28, 36, 0.96) 100%);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.38),
    0 0 42px rgba(120, 167, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .brand::before {
  content: "" !important;
  position: absolute;
  left: -0.6rem;
  right: -0.6rem;
  top: -0.1rem;
  bottom: -0.75rem;
  background: radial-gradient(circle at 54% 60%, rgba(67, 183, 255, 0.22) 0%, rgba(67, 183, 255, 0.08) 38%, transparent 68%) !important;
  filter: blur(12px);
  opacity: 1;
  pointer-events: none;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .brand-after-dark {
  display: flex;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .brand-after-dark span {
  color: #646464;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .brand-logo {
  filter: drop-shadow(0 0 18px rgba(120, 167, 255, 0.12)) !important;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .nav-links > li > a,
:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .nav-dropdown-trigger {
  color: #fafbfc;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .nav-links > li > a:hover,
:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .nav-dropdown-trigger:hover,
:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .nav-item-has-dropdown:focus-within > .nav-dropdown-trigger {
  color: #ffffff;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] :is(.nav-links > li > a[aria-current="page"], .nav-dropdown-trigger[aria-current="page"]) {
  color: #43b7ff !important;
  text-shadow: none !important;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .nav-dropdown-arrow {
  color: #ffffff;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .header-cta {
  background: linear-gradient(45deg, #cecece 0%, #ffffff 100%);
  color: #001f3f;
  box-shadow:
    rgba(67, 183, 255, 0.2) 0 0 24px,
    rgba(67, 183, 255, 0.2) 0 0 39px,
    rgba(67, 183, 255, 0.2) 0 0 60px;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .header-cta:hover {
  box-shadow:
    rgba(67, 183, 255, 0.2) 0 0 24px,
    rgba(67, 183, 255, 0.2) 0 0 39px,
    rgba(67, 183, 255, 0.2) 0 0 54px,
    rgba(67, 183, 255, 0.2) 0 0 74px;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .dark-mode-toggle {
  color: #ffd166;
  background: transparent !important;
  box-shadow: none !important;
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .dark-mode-toggle .dm-sun {
  opacity: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 12px rgba(255, 209, 102, 0.48));
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .dark-mode-toggle .dm-moon {
  opacity: 0;
  transform: translate(-50%, -150%);
}

@media (min-width: 1024px) {
  :is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .nav-dropdown-menu {
    background: #06111a;
    border-bottom-color: #43b7ff;
    box-shadow: rgba(0, 0, 0, 0.45) 0 18px 36px;
  }

  :is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .nav-dropdown-menu a {
    color: #fafbfc;
  }

  :is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .nav-dropdown-menu a:hover {
    background: #f6f2ea;
    color: #091523;
    box-shadow: none;
  }
}

@media (max-width: 1023px) {
  :is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .site-nav {
    background: #06111a !important;
    box-shadow:
      rgba(67, 183, 255, 0.2) 0 0 24px,
      inset rgba(67, 183, 255, 0.16) 0 0 34px,
      rgba(0, 0, 0, 0.4) 0 18px 38px;
  }

  :is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .nav-dropdown-menu {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
  }

  :is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .menu-toggle {
    background-color: #fafbfc;
    box-shadow:
      rgba(67, 183, 255, 0.2) 0 0 44px,
      inset rgba(67, 183, 255, 0.2) 0 0 30px,
      rgba(67, 183, 255, 0.2) 0 0 55px,
      rgba(67, 183, 255, 0.4) 0 0 75px;
  }

  :is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .menu-toggle .menu-line {
    background-color: #06111a;
  }
}

/* --- Final rail state tuning: glowing top rail and flatter scrolled rail --- */
:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header]::before {
  border: 1px solid rgba(120, 167, 255, 0.16);
  background:
    linear-gradient(90deg, rgba(3, 11, 20, 0.98) 0%, rgba(5, 14, 24, 0.985) 58%, rgba(7, 28, 36, 0.97) 100%);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(120, 167, 255, 0.05),
    0 0 30px rgba(95, 203, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:is(body.dark-mode, html[data-theme="dark"] body):is(.homepage, .page-services, .page-work, .page-pricing, .page-about, .page-location) .site-header[data-header] .nav-shell {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:is(body.dark-mode, html[data-theme="dark"] body).scroll .site-header[data-header]::before,
:is(body.dark-mode, html[data-theme="dark"] body) .site-header[data-header].is-scrolled::before {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: rgba(120, 167, 255, 0.12);
  background:
    linear-gradient(90deg, rgba(4, 12, 21, 0.985) 0%, rgba(6, 16, 26, 0.985) 60%, rgba(7, 24, 32, 0.975) 100%);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
}