/* ============================================================================
   ISPM — Custom landing design system
   Loaded after main.css + brand-override.css so these rules win the cascade.
   Transforms the stock BizLand template into a bespoke, brand-led experience.
   ========================================================================== */

:root {
  --kw-teal: #0e6e68;
  --kw-teal-2: #1d9c8f;
  --kw-teal-3: #3ebfae;
  --kw-teal-dark: #0a544f;
  --kw-orange: #f5a623;
  --kw-orange-2: #fdbb55;
  --kw-ink: #071b1a;
  --kw-ink-2: #0c2b28;
  --kw-slate: #475569;
  --kw-line: #e6ece9;
  --kw-soft: #f5f8f7;
  --kw-radius: 18px;
  --kw-shadow: 0 18px 40px -20px rgba(7, 27, 26, 0.35);
  --kw-shadow-lg: 0 30px 60px -25px rgba(7, 27, 26, 0.45);
}

body.index-page {
  --default-color: #26433f;
  --heading-color: #082826;
}

/* Global type polish for the public site */
.index-page h1,
.index-page h2,
.index-page h3 {
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   Section rhythm + custom section titles
   ------------------------------------------------------------------------- */
.index-page section {
  padding: 90px 0;
}

.index-page .section-title {
  padding-bottom: 50px;
  position: relative;
}
.index-page .section-title h2 {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--kw-ink);
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
}
.index-page .section-title h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 68px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kw-teal), var(--kw-orange));
}
.index-page .section-title p,
.index-page .section-title h6 {
  color: var(--kw-slate);
  font-size: 1.02rem;
  margin: 18px auto 0;
  max-width: 620px;
}

.kw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kw-teal);
  background: rgba(14, 110, 104, 0.09);
  border: 1px solid rgba(14, 110, 104, 0.16);
  padding: 6px 14px;
  border-radius: 999px;
}

/* ===========================================================================
   HEADER — solid glassy dark bar (every public page opens on a dark area now,
   so a transparent-then-white header left the dark nav links invisible).
   ========================================================================= */
.index-page .header {
  background-color: rgba(7, 21, 20, 0.72) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 14px 0;
}
.index-page.scrolled .header {
  background-color: rgba(6, 18, 17, 0.94) !important;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
}
.index-page .header .logo img { max-height: 40px; }

@media (min-width: 1200px) {
  .index-page .navmenu a,
  .index-page .navmenu a:focus {
    color: rgba(236, 247, 244, 0.82) !important;
    font-weight: 600;
  }
  .index-page .navmenu li:hover > a,
  .index-page .navmenu .active,
  .index-page .navmenu .active:focus {
    color: var(--kw-orange) !important;
  }
}
.index-page .mobile-nav-toggle { color: #fff !important; }

/* Login button in header — orange so it's the clear primary action on the dark bar */
.index-page .header .btn-getstarted,
.index-page .header .btn-getstarted:focus {
  background: linear-gradient(100deg, var(--kw-orange), var(--kw-orange-2)) !important;
  color: #08201f !important;
  font-weight: 700;
  border-radius: 999px;
  padding: 9px 24px;
  box-shadow: 0 10px 24px -12px rgba(245, 166, 35, 0.7);
}
.index-page .header .btn-getstarted:hover { transform: translateY(-2px); }

/* ===========================================================================
   HERO
   ========================================================================= */
#hero.hero {
  position: relative;
  min-height: 100vh;
  padding: 150px 0 90px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 15% 10%, #0c2b28 0%, #071b1a 55%, #05100f 100%);
  display: flex;
  align-items: center;
}

/* Animated colour mesh */
#hero .hero-mesh {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(38% 38% at 20% 25%, rgba(29, 156, 143, 0.55) 0%, transparent 60%),
    radial-gradient(34% 34% at 82% 30%, rgba(245, 166, 35, 0.30) 0%, transparent 62%),
    radial-gradient(46% 46% at 68% 88%, rgba(14, 110, 104, 0.55) 0%, transparent 60%);
  filter: blur(20px);
  animation: kw-mesh 18s ease-in-out infinite alternate;
}
@keyframes kw-mesh {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}

/* Faint grid overlay */
#hero .hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(75% 75% at 50% 40%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 75% at 50% 40%, #000 0%, transparent 100%);
}

#hero .container { position: relative; z-index: 2; }

#hero .hero-copy h1 {
  color: #fff;
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 800;
  line-height: 1.08;
  margin: 20px 0 18px;
}
#hero .hero-copy h1 .grad {
  background: linear-gradient(100deg, var(--kw-teal-3), var(--kw-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--kw-teal-3); /* fallback */
}
#hero .hero-copy p {
  color: rgba(230, 245, 242, 0.82);
  font-size: 1.12rem;
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 30px;
}

#hero .hero-eyebrow {
  color: var(--kw-teal-3);
  background: rgba(62, 191, 174, 0.12);
  border: 1px solid rgba(62, 191, 174, 0.28);
}
#hero .hero-eyebrow .pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kw-orange);
  box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.6);
  animation: kw-pulse-dot 1.8s infinite;
}
@keyframes kw-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(245, 166, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.btn-hero-primary,
.btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-hero-primary {
  color: #08201f;
  background: linear-gradient(100deg, var(--kw-orange), var(--kw-orange-2));
  box-shadow: 0 14px 30px -12px rgba(245, 166, 35, 0.7);
}
.btn-hero-primary:hover { transform: translateY(-3px); color: #08201f; box-shadow: 0 20px 38px -12px rgba(245, 166, 35, 0.85); }
.btn-hero-ghost {
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
}
.btn-hero-ghost:hover { transform: translateY(-3px); color: #fff; border-color: var(--kw-teal-3); background: rgba(62, 191, 174, 0.12); }

.hero-trust { display: flex; flex-wrap: wrap; gap: 22px; }
.hero-trust .item {
  display: flex; align-items: center; gap: 9px;
  color: rgba(230, 245, 242, 0.72);
  font-size: 0.9rem; font-weight: 600;
}
.hero-trust .item i { color: var(--kw-teal-3); font-size: 1.05rem; }

/* Hero visual — pulsing signal rings + floating glass cards */
.hero-visual {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signal-hub {
  position: relative;
  width: 150px; height: 150px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--kw-teal-2), var(--kw-teal-dark));
  box-shadow: 0 0 60px rgba(29, 156, 143, 0.5), inset 0 2px 10px rgba(255,255,255,0.15);
  z-index: 3;
}
.signal-hub i { font-size: 3.4rem; color: #fff; }
.signal-ring {
  position: absolute;
  top: 50%; left: 50%;
  border: 1.5px solid rgba(62, 191, 174, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: kw-ring 3.2s ease-out infinite;
}
.signal-ring.r1 { width: 150px; height: 150px; animation-delay: 0s; }
.signal-ring.r2 { width: 150px; height: 150px; animation-delay: 1.05s; }
.signal-ring.r3 { width: 150px; height: 150px; animation-delay: 2.1s; }
@keyframes kw-ring {
  0%   { width: 150px; height: 150px; opacity: 0.9; }
  100% { width: 460px; height: 460px; opacity: 0; }
}

.glass-card {
  position: absolute;
  z-index: 4;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.6);
  color: #fff;
  animation: kw-float 5s ease-in-out infinite;
}
.glass-card .label { font-size: 0.72rem; color: rgba(230,245,242,0.7); text-transform: uppercase; letter-spacing: 0.08em; }
.glass-card .value { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.glass-card .value small { font-size: 0.8rem; font-weight: 600; opacity: 0.8; }
.glass-card.gc-1 { top: 8%; left: 2%; animation-delay: 0s; }
.glass-card.gc-2 { top: 20%; right: 0%; animation-delay: 1.2s; }
.glass-card.gc-3 { bottom: 8%; left: 8%; animation-delay: 0.6s; }
.glass-card .value .dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#22c55e; margin-right:6px; box-shadow:0 0 10px #22c55e; }
@keyframes kw-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ===========================================================================
   ABOUT (homepage intro)
   ========================================================================= */
#about.about .content h3 { color: var(--kw-teal); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
#about.about .content h2 { color: var(--kw-ink); font-weight: 800; font-size: 2.1rem; margin: 8px 0 16px; }
#about.about .content p { color: var(--kw-slate); line-height: 1.75; }
#about.about img { box-shadow: var(--kw-shadow-lg); }
.btn-read-more,
.index-page .btn-read-more {
  background: var(--kw-teal) !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-weight: 700;
}
.btn-read-more:hover { background: var(--kw-teal-dark) !important; }

/* ===========================================================================
   FEATURES ("Our Values")
   ========================================================================= */
.values .feature-card {
  border: 1px solid var(--kw-line) !important;
  background: #fff !important;
  border-radius: var(--kw-radius) !important;
  padding: 30px 26px !important;
  box-shadow: 0 6px 20px -14px rgba(7,27,26,0.3) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  height: 100%;
}
.values .feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--kw-shadow) !important;
  border-color: rgba(14,110,104,0.35) !important;
}
.values .feature-icon {
  width: 66px; height: 66px;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(14,110,104,0.12), rgba(245,166,35,0.14));
  color: var(--kw-teal);
  margin-bottom: 18px;
}
.values .feature-icon i { font-size: 1.7rem; color: var(--kw-teal); }
.values .feature-card h3 { font-size: 1.18rem; font-weight: 700; color: var(--kw-ink); margin-bottom: 10px; }
.values .feature-card p { color: var(--kw-slate); font-size: 0.95rem; line-height: 1.65; white-space: pre-line; }

/* ===========================================================================
   STATS band
   ========================================================================= */
#stats.stats {
  background: linear-gradient(120deg, var(--kw-ink), var(--kw-ink-2));
  padding: 64px 0;
}
#stats .stats-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--kw-radius);
  padding: 26px 22px;
  gap: 16px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
#stats .stats-item:hover { transform: translateY(-6px); border-color: rgba(62,191,174,0.4); }
#stats .stats-item i { font-size: 2.2rem !important; }
#stats .stats-item span { color: #fff !important; }
#stats .stats-item p { color: rgba(230,245,242,0.65) !important; margin: 0; font-weight: 500; }

/* ===========================================================================
   SERVICES
   ========================================================================= */
.services .service-item {
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-radius);
  padding: 34px 28px;
  background: #fff;
  box-shadow: 0 6px 20px -14px rgba(7,27,26,0.3);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  height: 100%;
  overflow: hidden;
}
.services .service-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--kw-teal), var(--kw-orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.services .service-item:hover { transform: translateY(-8px); box-shadow: var(--kw-shadow); }
.services .service-item:hover::before { transform: scaleX(1); }
.services .service-item .icon { color: var(--kw-teal) !important; }
.services .service-item h3 { font-size: 1.2rem; font-weight: 700; }
.services .service-item h3 a, .services .service-item h3 { color: var(--kw-ink); }
.services .service-item p { color: var(--kw-slate); font-size: 0.95rem; line-height: 1.65; }
.services .service-item .read-more { color: var(--kw-teal); font-weight: 700; }
.services .service-item .read-more i { transition: transform 0.3s ease; }
.services .service-item:hover .read-more i { transform: translateX(5px); }

/* ===========================================================================
   PRICING
   ========================================================================= */
.pricing .pricing-tem {
  border: 1px solid var(--kw-line);
  border-radius: 22px;
  padding: 38px 28px;
  background: #fff;
  text-align: center;
  box-shadow: 0 10px 30px -20px rgba(7,27,26,0.4);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  height: 100%;
  position: relative;
}
.pricing .pricing-tem:hover {
  transform: translateY(-10px);
  box-shadow: var(--kw-shadow-lg);
  border-color: rgba(14,110,104,0.4);
}
.pricing .pricing-tem h3 { color: var(--kw-ink) !important; font-weight: 700; font-size: 1.3rem; }
.pricing .pricing-tem .price {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--kw-teal);
  margin: 8px 0 6px;
}
.pricing .pricing-tem .price sup { font-size: 1.2rem; top: -0.7rem; }
.pricing .pricing-tem .price span { font-size: 0.95rem; font-weight: 600; color: var(--kw-slate); }
.pricing .pricing-tem .icon {
  width: 64px; height: 64px;
  margin: 8px auto 18px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(14,110,104,0.12), rgba(245,166,35,0.14));
}
.pricing .pricing-tem .icon i { font-size: 1.7rem; color: var(--kw-teal) !important; margin: 0; }
.pricing .pricing-tem ul { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; }
.pricing .pricing-tem ul li {
  padding: 9px 0 9px 28px;
  position: relative;
  color: var(--kw-slate);
  border-bottom: 1px dashed var(--kw-line);
  font-size: 0.94rem;
}
.pricing .pricing-tem ul li::before {
  content: "\2713";
  position: absolute; left: 0; top: 9px;
  color: var(--kw-teal);
  font-weight: 800;
}
.pricing .pricing-tem .btn-buy {
  display: inline-block;
  width: 100%;
  padding: 13px 0;
  border-radius: 999px;
  background: var(--kw-teal);
  color: #fff;
  font-weight: 700;
  transition: background 0.3s ease, transform 0.3s ease;
}
.pricing .pricing-tem:hover .btn-buy { background: var(--kw-orange); color: #08201f; }

/* Popular plan (2nd card) */
.pricing .col-lg-3:nth-child(2) .pricing-tem {
  border: 2px solid var(--kw-teal);
  box-shadow: var(--kw-shadow-lg);
}
.pricing .col-lg-3:nth-child(2) .pricing-tem::after {
  content: "MOST POPULAR";
  position: absolute;
  top: 16px; right: -34px;
  transform: rotate(45deg);
  background: var(--kw-orange);
  color: #08201f;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 40px;
}

/* ===========================================================================
   TESTIMONIALS
   ========================================================================= */
#testimonials.testimonials { background: var(--kw-soft); }
#testimonials .testimonial-item {
  background: #fff;
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-radius);
  padding: 30px 28px;
  box-shadow: 0 10px 30px -22px rgba(7,27,26,0.4);
  height: 100%;
}
#testimonials .stars i { color: var(--kw-orange); }
#testimonials .testimonial-item p { color: var(--kw-slate); font-style: italic; line-height: 1.7; }
#testimonials .testimonial-item .profile img {
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(14,110,104,0.15);
}
#testimonials .testimonial-item .profile h3 { color: var(--kw-ink); font-weight: 700; font-size: 1.05rem; margin-top: 10px; }
#testimonials .testimonial-item .profile h4 { color: var(--kw-teal); font-size: 0.85rem; }

/* ===========================================================================
   CLIENTS
   ========================================================================= */
#clients .client-card {
  border: 1px solid var(--kw-line) !important;
  border-radius: var(--kw-radius) !important;
  box-shadow: 0 6px 18px -14px rgba(7,27,26,0.25) !important;
  min-height: 118px;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
}
#clients .client-card:hover {
  box-shadow: var(--kw-shadow) !important;
  border-color: rgba(14,110,104,0.35) !important;
}
#clients .client-image-wrapper,
#clients .client-image-div {
  width: 100%;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Constrain every client logo to a uniform box regardless of its native size
   (this constraint used to live in an inline <style> that got removed). */
#clients .client-image {
  max-height: 56px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
#clients .client-card:hover .client-image { filter: grayscale(0); opacity: 1; }

/* ===========================================================================
   FAQ
   ========================================================================= */
.faq .faq-item {
  background: #fff !important;
  border: 1px solid var(--kw-line) !important;
  border-radius: var(--kw-radius) !important;
  padding: 22px 52px 22px 26px !important;
  margin-bottom: 18px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq .faq-item:hover { border-color: rgba(14,110,104,0.35) !important; box-shadow: var(--kw-shadow); }
.faq .faq-item h3 { font-size: 1.05rem !important; color: var(--kw-ink) !important; font-weight: 700; }
.faq .faq-item .faq-content p { color: var(--kw-slate); line-height: 1.7; }
.faq .faq-item .faq-toggle { color: var(--kw-teal) !important; }
.faq .faq-active { border-color: rgba(14,110,104,0.5) !important; }

/* ===========================================================================
   NEWSLETTER / CTA band
   ========================================================================= */
.footer-newsletter {
  background: radial-gradient(120% 160% at 50% 0%, var(--kw-teal-2) 0%, var(--kw-teal) 45%, var(--kw-teal-dark) 100%);
  padding: 70px 20px !important;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.footer-newsletter h4 { color: #fff !important; font-size: 1.9rem; font-weight: 800; margin-bottom: 22px; }
.footer-newsletter .btn,
.footer-newsletter .btn-primary {
  background: #fff !important;
  background-image: none !important;
  color: var(--kw-teal) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  padding: 14px 34px !important;
  border-radius: 999px !important;
  margin: 0 !important;
  box-shadow: 0 16px 36px -18px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}
.footer-newsletter .btn:hover { transform: translateY(-3px); }

/* ===========================================================================
   PAGE-TITLE header (inner pages) — brand it
   ========================================================================= */
.index-page .page-title .heading {
  background: radial-gradient(120% 140% at 15% 0%, #0c2b28 0%, #071b1a 70%);
  padding: 120px 0 60px;
  border: 0;
}
.index-page .page-title .heading h1 { color: #fff; font-weight: 800; }
.index-page .page-title .heading p { color: rgba(230,245,242,0.8); }
.index-page .page-title nav.breadcrumbs { background: var(--kw-soft); }
.index-page .page-title nav.breadcrumbs ol,
.index-page .page-title nav.breadcrumbs ol a { color: var(--kw-slate); }
.index-page .page-title nav.breadcrumbs ol li.current { color: var(--kw-teal); }

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #hero.hero { padding-top: 130px; min-height: auto; }
  .hero-visual { min-height: 360px; margin-top: 30px; }
  .glass-card.gc-1 { left: 0; }
  .glass-card.gc-2 { right: 0; }
  .index-page section { padding: 64px 0; }
}
@media (max-width: 575px) {
  .index-page .section-title h2 { font-size: 1.8rem; }
  .hero-visual { min-height: 320px; }
  .signal-hub { width: 120px; height: 120px; }
  .signal-hub i { font-size: 2.6rem; }
  .glass-card .value { font-size: 1.1rem; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #hero .hero-mesh,
  .signal-ring,
  .glass-card,
  #hero .hero-eyebrow .pulse-dot { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   MOBILE MENU — no backdrop blur on the header below 1200px
   ---------------------------------------------------------------------------
   An element with a backdrop-filter becomes the containing block for every
   position:fixed descendant, and the template's mobile menu IS a fixed overlay
   inside the header: `.mobile-nav-active .navmenu { position: fixed; inset: 0 }`.
   Confined to the glassy header it measured 390x69 instead of the whole screen,
   its list collapsed to a 20px sliver, and the menu items painted outside it —
   so a tap on a menu item landed on the page heading underneath and nothing
   happened. Every public page, on every phone, since the header was restyled.

   Dropping the blur only while the menu is open was not enough: `.header` has
   `transition: all 0.5s`, so the blur faded out over half a second and the menu
   stayed collapsed for the first ~300ms — long enough for a real tap to miss,
   which is exactly what made it look intermittent.

   So the blur simply does not apply at the widths that use the overlay. The bar
   keeps its translucent dark background; the glass effect stays on desktop,
   where the menu is a plain horizontal row and nothing is fixed inside it.
   ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .index-page .header,
  .index-page.scrolled .header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}