/*
Theme Name: NetLayers v3
Theme URI: https://netlayers.ca
Author: NetLayers Inc.
Description: Professional telecommunications theme — internet, phone, TV, data centre, web solutions.
Version: 3.3.40
License: GNU General Public License v2 or later
Text Domain: netlayers
*/

/* =========================================================
   DESIGN TOKENS — TekSavvy-inspired clean ISP palette
   ========================================================= */
:root {
  /* Blues */
  --nl-blue-900: #0b1f3a;
  --nl-blue-800: #0f2d54;
  --nl-blue-700: #154a87;
  --nl-blue-600: #1a5fb4;
  --nl-blue-500: #2172cc;
  --nl-blue-400: #4a90d9;
  --nl-blue-300: #82b8ed;
  --nl-blue-200: #bdd7f4;
  --nl-blue-100: #deeaf9;
  --nl-blue-50:  #f0f6fd;

  /* Accent */
  --nl-accent:   #e8520a;   /* TekSavvy-like warm orange accent */
  --nl-accent-light: #fff3ee;
  --nl-green:    #16a34a;
  --nl-teal:     #0891b2;

  /* Grays */
  --nl-gray-900: #111827;
  --nl-gray-800: #1f2937;
  --nl-gray-700: #374151;
  --nl-gray-600: #4b5563;
  --nl-gray-500: #6b7280;
  --nl-gray-400: #9ca3af;
  --nl-gray-300: #d1d5db;
  --nl-gray-200: #e5e7eb;
  --nl-gray-100: #f3f4f6;
  --nl-gray-50:  #f9fafb;
  --nl-white:    #ffffff;

  /* Typography */
  --nl-font: 'Inter', system-ui, -apple-system, sans-serif;
  --nl-font-size-base: 16px;

  /* Radii */
  --nl-radius-sm:  4px;
  --nl-radius-md:  8px;
  --nl-radius-lg:  12px;
  --nl-radius-xl:  16px;
  --nl-radius-2xl: 24px;
  --nl-radius-full: 9999px;

  /* Shadows */
  --nl-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --nl-shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --nl-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --nl-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --nl-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  --nl-shadow-card: 0 2px 12px rgba(11,31,58,0.08);

  /* Transitions */
  --nl-transition: 0.2s ease;
  --nl-transition-slow: 0.35s ease;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--nl-font-size-base); scroll-behavior: smooth; }
body {
  font-family: var(--nl-font);
  color: var(--nl-gray-800);
  background: var(--nl-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--nl-blue-600); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; color: var(--nl-gray-900); }
p { line-height: 1.7; color: var(--nl-gray-600); }

/* =========================================================
   LAYOUT
   ========================================================= */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container--wide { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section--sm { padding: 3rem 0; }
.section--lg { padding: 7rem 0; }
.section--light { background: var(--nl-gray-50); }
.section--blue-light { background: var(--nl-blue-50); }
.section--dark { background: var(--nl-blue-900); }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.section-label {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--nl-blue-600);
  margin-bottom: 0.75rem;
}
.section-label--accent { color: var(--nl-accent); }
.section-label--light { color: var(--nl-blue-300); }
.section-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--nl-gray-900); margin-bottom: 1rem; }
.section-title--light { color: var(--nl-white); }
.section-desc { font-size: 1.0625rem; color: var(--nl-gray-600); max-width: 640px; margin: 0 auto; }
.section-desc--light { color: rgba(255,255,255,0.75); }
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header--left { text-align: left; }
.section-header--left .section-desc { margin: 0; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.625rem; border-radius: var(--nl-radius-md);
  font-size: 0.9375rem; font-weight: 600; line-height: 1;
  transition: all var(--nl-transition); border: 2px solid transparent;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn--primary { background: var(--nl-blue-600); color: #fff; border-color: var(--nl-blue-600); }
.btn--primary:hover { background: var(--nl-blue-700); border-color: var(--nl-blue-700); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,95,180,0.35); }
.btn--accent { background: var(--nl-accent); color: #fff; border-color: var(--nl-accent); }
.btn--accent:hover { background: #c94308; border-color: #c94308; color: #fff; transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--nl-blue-600); border-color: var(--nl-blue-600); }
.btn--outline:hover { background: var(--nl-blue-600); color: #fff; }
.btn--white { background: #fff; color: var(--nl-blue-700); border-color: #fff; }
.btn--white:hover { background: var(--nl-blue-50); color: var(--nl-blue-800); }
.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--outline-white:hover { background: rgba(255,255,255,0.15); border-color: #fff; color: #fff; }
.btn--ghost { background: transparent; color: var(--nl-gray-700); border-color: var(--nl-gray-300); }
.btn--ghost:hover { border-color: var(--nl-blue-400); color: var(--nl-blue-600); }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn--lg { padding: 1rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; justify-content: center; }

/* =========================================================
   TOPBAR
   ========================================================= */
.site-topbar {
  background: var(--nl-blue-900);
  color: rgba(255,255,255,0.8);
  font-size: 0.8125rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.85rem; flex-wrap: wrap;
}
.topbar-contact { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar-contact a {
  display: flex; align-items: center; gap: 0.4rem;
  color: rgba(255,255,255,0.8); transition: color var(--nl-transition);
}
.topbar-contact a:hover { color: #fff; }
.topbar-contact svg { width: 0.875rem; height: 0.875rem; opacity: 0.7; }
.topbar-contact a { white-space: nowrap; }
.topbar-contact--inline {
  gap: 0.9rem;
  padding: 0 0.15rem;
}
.topbar-contact--inline a {
  font-size: 0.8rem;
}
.topbar-contact--inline a + a {
  position: relative;
  padding-left: 0.95rem;
}
.topbar-contact--inline a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.18);
  transform: translateY(-50%);
}
.topbar-links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar-links a { color: rgba(255,255,255,0.7); transition: color var(--nl-transition); font-size: 0.8rem; }
.topbar-links a:hover { color: #fff; }
.topbar-links .btn--sm { padding: 0.3rem 0.875rem; font-size: 0.75rem; background: var(--nl-blue-600); color: #fff; border: none; border-radius: var(--nl-radius-sm); }


.site-topbar__left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 0 0 auto;
}
.section-switcher,
.mobile-section-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
}
.section-switcher__link,
.mobile-section-switcher__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  transition: all var(--nl-transition);
}
.section-switcher__link:hover,
.mobile-section-switcher__link:hover {
  color: #fff;
}
.section-switcher__link.is-active,
.mobile-section-switcher__link.is-active {
  background: #fff;
  color: var(--nl-blue-900);
  box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}
.topbar-links__account {
  background: var(--nl-blue-600);
  color: #fff !important;
  padding: 0.3rem 0.875rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  background: var(--nl-white);
  border-bottom: 1px solid var(--nl-gray-200);
  position: sticky; top: 0; z-index: 500;
  transition: box-shadow var(--nl-transition);
}
.site-header.is-scrolled { box-shadow: 0 2px 20px rgba(11,31,58,0.12); }
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0; height: 100px;
}

/* Logo */
.site-logo {
  display: flex; align-items: center; gap: 0.75rem;
  flex-shrink: 0; text-decoration: none;
}
.site-logo__img { height: 100px; width: auto; object-fit: contain; display: block; }
.custom-logo { height: 100px; width: auto; display: block; }
.site-logo__mark {
  width: 38px; height: 38px; border-radius: var(--nl-radius-md);
  background: var(--nl-blue-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.875rem; letter-spacing: -0.03em;
}
.site-logo__text { font-size: 1.125rem; font-weight: 800; color: var(--nl-blue-900); line-height: 1.1; }
.site-logo__sub { font-size: 0.6875rem; color: var(--nl-gray-500); font-weight: 500; }

/* Primary Nav */
.primary-nav { flex: 0 0 44%; display: flex; justify-content: center; min-width: 0; }
.nav-menu { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0 1.1rem; height: 100px;
  font-size: 0.9rem; font-weight: 600; color: var(--nl-gray-700);
  transition: color var(--nl-transition); white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.nav-link:hover, .nav-item--has-mega:hover > .nav-link { color: var(--nl-blue-600); border-bottom-color: var(--nl-blue-600); }
.caret { font-size: 0.6rem; opacity: 0.6; transition: transform var(--nl-transition); }
.nav-item--has-mega:hover .caret, .nav-item--has-mega.is-open .caret { transform: rotate(180deg); }

/* Mega Dropdown */
.nav-mega {
  position: absolute; top: calc(100% + 1px); left: 0;
  background: var(--nl-white);
  border: 1px solid var(--nl-gray-200);
  border-radius: 0 0 var(--nl-radius-lg) var(--nl-radius-lg);
  box-shadow: 0 12px 40px rgba(11,31,58,0.14);
  padding: 1.5rem; min-width: 260px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all 0.2s ease; pointer-events: none; z-index: 600;
}
.nav-mega--wide { display: flex; gap: 0; min-width: 700px; padding: 0; }
.nav-item--has-mega:hover .nav-mega, .nav-item--has-mega.is-open .nav-mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-mega__group { padding: 1.5rem; flex: 1; }
.nav-mega__group--shaded { background: var(--nl-gray-50); border-radius: 0 0 var(--nl-radius-lg) 0; }
.nav-mega__title {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--nl-blue-500);
  padding: 0 0.5rem; margin-bottom: 0.625rem; margin-top: 0.25rem;
}

/* Mega Links with large icons */
.mega-link {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.625rem 0.625rem; border-radius: var(--nl-radius-md);
  text-decoration: none; color: var(--nl-gray-800);
  transition: all var(--nl-transition); margin-bottom: 0.125rem;
}
.mega-link:hover { background: var(--nl-blue-50); color: var(--nl-blue-700); }
.mega-link__icon-svg {
  width: 2.625rem; height: 2.625rem; flex-shrink: 0;
  background: var(--nl-blue-50); border-radius: var(--nl-radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--nl-blue-600); border: 1px solid var(--nl-blue-100);
  transition: all var(--nl-transition);
}
.mega-link__icon-svg svg { width: 1.25rem; height: 1.25rem; }
.mega-link:hover .mega-link__icon-svg { background: var(--nl-blue-600); color: #fff; border-color: var(--nl-blue-600); }
.mega-link__text { display: flex; flex-direction: column; }
.mega-link__text strong { font-size: 0.875rem; font-weight: 700; color: var(--nl-gray-900); line-height: 1.2; }
.mega-link__text small { font-size: 0.75rem; color: var(--nl-gray-500); margin-top: 0.125rem; line-height: 1.3; }
.mega-link:hover .mega-link__text strong { color: var(--nl-blue-700); }


.nav-menu--section {
  gap: 0.15rem;
}
.nav-link.is-current,
.nav-item.current-menu-item > .nav-link,
.nav-item.current_page_item > .nav-link {
  color: var(--nl-blue-600);
  border-bottom-color: var(--nl-blue-600);
}
.nav-mega--section {
  min-width: 640px;
  padding: 0;
  overflow: hidden;
}
.nav-mega__section-header {
  padding: 1.1rem 1.5rem;
  background: linear-gradient(135deg, var(--nl-blue-900) 0%, var(--nl-blue-700) 100%);
  color: #fff;
}
.nav-mega__section-header p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}
.nav-mega__section-header span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.78);
}
.nav-mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 1rem;
}
.mobile-section-switcher {
  width: 100%;
  justify-content: space-between;
  margin-bottom: 0.7rem;
  background: var(--nl-gray-50);
  border-color: var(--nl-gray-200);
}
.mobile-section-switcher__link {
  flex: 1;
  color: var(--nl-gray-600);
}
.mobile-section-switcher__link.is-active {
  color: var(--nl-blue-900);
}

/* Promo block inside mega */
.nav-mega__promo {
  margin-top: 1rem; padding: 1.25rem;
  background: linear-gradient(135deg, var(--nl-blue-800) 0%, var(--nl-blue-600) 100%);
  border-radius: var(--nl-radius-lg); color: #fff; text-align: center;
}
.nav-mega__promo-icon { margin: 0 auto 0.625rem; color: rgba(255,255,255,0.9); }
.nav-mega__promo-title { font-size: 0.875rem; font-weight: 800; margin-bottom: 0.375rem; }
.nav-mega__promo-text { font-size: 0.775rem; opacity: 0.8; line-height: 1.5; margin-bottom: 0.75rem; }
.nav-mega__promo-link { display: inline-block; font-size: 0.775rem; font-weight: 700;
  color: #fff; border: 1.5px solid rgba(255,255,255,0.5);
  padding: 0.325rem 0.875rem; border-radius: 999px; transition: all var(--nl-transition); }
.nav-mega__promo-link:hover { background: rgba(255,255,255,0.2); border-color: #fff; }

/* Nav CTA */
.nav-cta { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; }
.nav-cta .btn--sm { padding: 0.5rem 1.125rem; font-size: 0.8125rem; border-radius: var(--nl-radius-md); }

/* Mobile Nav Toggle */
.mobile-nav-toggle {
  display: none; background: none; border: none; padding: 0.5rem;
  color: var(--nl-gray-700); cursor: pointer;
}
.hamburger { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.hamburger span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: all var(--nl-transition); }
.mobile-nav-toggle.is-active .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle.is-active .hamburger span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.is-active .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav Drawer */
.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 700; }
.mobile-nav-overlay.is-visible { display: block; }
.mobile-nav-drawer {
  position: fixed; top: 0; right: -100%; width: min(360px, 90vw); height: 100vh;
  background: var(--nl-white); z-index: 800; overflow-y: auto;
  transition: right var(--nl-transition-slow); box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
.mobile-nav-drawer.is-open { right: 0; }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--nl-gray-100); }
.mobile-nav-close { background: none; border: none; font-size: 1.5rem; color: var(--nl-gray-600); cursor: pointer; padding: 0.25rem; }
.mobile-nav-body { padding: 1rem 1.5rem; }
.mobile-nav-item { border-bottom: 1px solid var(--nl-gray-100); }
.mobile-nav-item a { display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 0; font-weight: 600; color: var(--nl-gray-800); font-size: 0.9375rem; }
.mobile-nav-parent-toggle { background: none; border: none; padding: 0.875rem 0;
  font-weight: 600; color: var(--nl-gray-800); font-size: 0.9375rem; width: 100%;
  text-align: left; display: flex; justify-content: space-between; cursor: pointer; }
.mobile-nav-submenu { padding-left: 1rem; }
.mobile-nav-submenu a { font-size: 0.875rem; font-weight: 500; color: var(--nl-gray-600); padding: 0.6rem 0; }
.mobile-nav-footer { padding: 1.5rem; border-top: 1px solid var(--nl-gray-100); display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }

/* =========================================================
   HERO SECTIONS
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(70px, 10vw, 120px) 0 clamp(70px, 10vw, 120px);
  color: var(--nl-white);
}
.hero::after { display: none; }
.hero__bg-icon {
  position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
  pointer-events: none; z-index: 0; opacity: 0.05;
}
.hero__bg-icon svg { width: 500px; height: 500px; }
.hero__content { position: relative; z-index: 2; max-width: 720px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9); padding: 0.4rem 1rem;
  border-radius: var(--nl-radius-full); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.04em; margin-bottom: 1.5rem;
}
.hero__title { font-size: clamp(2.25rem, 5.5vw, 3.75rem); font-weight: 900; line-height: 1.08; margin-bottom: 1rem; color: #fff; }
.hero__title span { color: var(--nl-blue-300); }
.hero__title span.accent { color: #ffcc44; }
.hero__lead { font-size: clamp(1rem, 2vw, 1.175rem); color: rgba(255,255,255,0.82); line-height: 1.7; margin-bottom: 2.25rem; max-width: 580px; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.hero-service-showcase {
  position: relative;
  margin-bottom: 3rem;
  max-width: 620px;
}
.hero-service-showcase__track {
  position: relative;
  min-height: 178px;
}
.hero-service-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.5rem 1.6rem;
  border-radius: 22px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 24px 60px rgba(4, 18, 35, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
}
.hero-service-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hero-service-card__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: var(--nl-radius-full);
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-service-card__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  font-weight: 900;
  line-height: 1.05;
}
.hero-service-card__tagline {
  margin: 0;
  color: rgba(255,255,255,0.84);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 32rem;
}
.hero-service-showcase__nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  padding-left: 0.25rem;
}
.hero-service-showcase__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  transition: transform 0.35s ease, background-color 0.35s ease, width 0.35s ease;
}
.hero-service-showcase__dot.is-active {
  width: 2rem;
  background: #fff;
}
.hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.15); transition: opacity 0.28s ease, transform 0.28s ease; }
.hero__stats.is-updating { opacity: 0.32; transform: translateY(8px); }
.hero__stat { min-width: 0; }
.hero__stat-value { font-size: 2rem; font-weight: 900; color: #fff; line-height: 1.05; }
.hero__stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.65); margin-top: 0.35rem; font-weight: 500; line-height: 1.45; }

/* Hero colour variants */
.hero--main       { background: linear-gradient(135deg, #0b1f3a 0%, #154a87 55%, #2172cc 100%); }
.hero--residential { background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fb4 100%); }
.hero--business   { background: linear-gradient(135deg, #0b1f3a 0%, #0d2a50 55%, #0e3f7c 100%); }

/* ── Residential hero split layout (text left, photo right) ── */
.hero__split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-top: calc(-1 * clamp(70px, 10vw, 120px));
  margin-bottom: calc(-1 * clamp(80px, 11vw, 130px));
  min-height: calc(clamp(70px, 10vw, 120px) + clamp(300px, 32vw, 400px) + clamp(80px, 11vw, 130px));
}
.hero__split .hero__content {
  flex: 1 1 52%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px, 10vw, 120px) clamp(1.5rem, 3vw, 3rem) clamp(80px, 11vw, 130px) clamp(1.5rem, 5vw, 4rem);
  max-width: none;
}
.hero__photo {
  flex: 0 0 48%;
  position: relative;
  overflow: hidden;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.hero__photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(11,31,58,.4) 0%, rgba(11,31,58,.05) 40%, transparent 100%);
  z-index: 1;
}
@media (max-width: 900px) {
  .hero__split { flex-direction: column; min-height: unset; }
  .hero__split .hero__content { padding: clamp(70px, 10vw, 120px) 1.5rem clamp(80px, 11vw, 130px); }
  .hero__photo { display: none; }
}

/* Page Hero (inner pages) */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 7vw, 88px) 0 clamp(48px, 7vw, 88px);
  color: var(--nl-white);
}
.page-hero__bg-icon {
  position: absolute; right: 2%; top: 50%; transform: translateY(-50%);
  pointer-events: none; z-index: 0; opacity: 0.07; color: #fff;
}
.page-hero__bg-icon svg { width: 340px; height: 340px; }
.page-hero__content { position: relative; z-index: 1; }
.page-hero__title { font-size: clamp(1.875rem, 4.5vw, 3rem); font-weight: 900; color: #fff; margin-bottom: 0.7rem; }
.page-hero__subtitle { font-size: 1.0625rem; color: rgba(255,255,255,0.8); max-width: 560px; line-height: 1.7; }
.page-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* Page hero colour per section */
.page-hero--internet   { background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 60%, #1a5fb4 100%); }
.page-hero--phone      { background: linear-gradient(135deg, #0b1f3a 0%, #164e63 60%, #0e7490 100%); }
.page-hero--tv         { background: linear-gradient(135deg, #0b1f3a 0%, #2d1b69 60%, #4c1d95 100%); }
.page-hero--datacentre { background: linear-gradient(135deg, #0b1f3a 0%, #1a3a5c 60%, #1a5fb4 100%); }
.page-hero--web        { background: linear-gradient(135deg, #0b1f3a 0%, #14532d 60%, #166534 100%); }
.page-hero--about      { background: linear-gradient(135deg, #0b1f3a 0%, #1c2e4a 60%, #1a5fb4 100%); }
.page-hero--contact    { background: linear-gradient(135deg, #0b1f3a 0%, #1c2e4a 60%, #1a5fb4 100%); }
.page-hero--bundles    { background: linear-gradient(135deg, #0b1f3a 0%, #3b1f0e 60%, #c2410c 100%); }
.page-hero--support    { background: linear-gradient(135deg, #0b1f3a 0%, #1c2e4a 60%, #1a5fb4 100%); }

/* Breadcrumbs */
.breadcrumbs { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.8125rem; color: rgba(255,255,255,0.6); }
.breadcrumbs a { color: rgba(255,255,255,0.6); transition: color var(--nl-transition); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs span[aria-current] { color: rgba(255,255,255,0.9); }

/* =========================================================
   TRUST BAR
   ========================================================= */
.trust-bar { background: var(--nl-white); border-top: 1px solid var(--nl-gray-100); border-bottom: 1px solid var(--nl-gray-100); padding: 1.1rem 0; }
.trust-bar__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.55rem;
  flex-wrap: nowrap;
}
.trust-bar__divider {
  width: 1px;
  height: auto;
  min-height: 56px;
  background: linear-gradient(to bottom, transparent 0%, rgba(12, 42, 84, 0.10) 18%, rgba(12, 42, 84, 0.16) 50%, rgba(12, 42, 84, 0.10) 82%, transparent 100%);
  flex-shrink: 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 1rem;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 14px;
}
.trust-item__icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: var(--nl-blue-50, #e8f1fb);
  color: var(--nl-blue-600, #1a5fb4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-item__icon svg {
  width: 18px;
  height: 18px;
}
.trust-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
}
.trust-item__label {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--nl-gray-900);
  white-space: nowrap;
  line-height: 1.18;
  letter-spacing: -0.012em;
}
.trust-item__sub {
  font-size: 0.76rem;
  color: var(--nl-gray-500);
  white-space: normal;
  line-height: 1.28;
  font-weight: 500;
  display: block;
  max-width: 100%;
}

@media (min-width: 1181px) and (max-width: 1320px) {
  .trust-bar { padding: 1rem 0; }
  .trust-bar__inner { gap: 0.4rem; }
  .trust-item {
    padding: 0.5rem 0.8rem;
    gap: 0.7rem;
  }

  .trust-item__label {
    font-size: 0.84rem;
  }

  .trust-item__sub {
    font-size: 0.7rem;
  }
}

@media (max-width: 1180px) {
  .trust-bar__inner {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .trust-bar__divider { display: none; }
  .trust-item { flex: 0 0 auto; padding: 0.55rem 0.85rem; }
}

@media (max-width: 640px) {
  .trust-bar__inner { justify-content: flex-start; }
  .trust-item { width: 100%; padding: 0.55rem 0.35rem; }
}

/* =========================================================
   SERVICE CARDS
   ========================================================= */
.service-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 960px) { .service-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .service-cards-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--nl-white);
  border: 1.5px solid var(--nl-gray-200);
  border-radius: var(--nl-radius-xl);
  padding: 0 1.875rem 1.875rem;
  display: flex; flex-direction: column;
  transition: all var(--nl-transition-slow);
  position: relative; overflow: hidden;
}
.service-card > :not(.service-card__icon-wrap) {
  padding-left: 0;
  padding-right: 0;
}
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--nl-blue-600); opacity: 0; transition: opacity var(--nl-transition);
}
.service-card:hover { box-shadow: var(--nl-shadow-xl); border-color: var(--nl-blue-200); transform: translateY(-5px); }
.service-card:hover::before { opacity: 1; }
.service-card--accent::before { background: var(--nl-accent); }
.service-card--teal::before { background: var(--nl-teal); }

.service-card__icon-wrap {
  width: calc(100% + 3.75rem);
  margin: 0 -1.875rem 1.5rem;
  border-radius: calc(var(--nl-radius-xl) - 2px) calc(var(--nl-radius-xl) - 2px) 0 0;
  background: #eef5ff;
  display: flex; flex-direction: column; align-items: stretch; justify-content: stretch;
  color: var(--nl-blue-700);
  border: 0;
  transition: all var(--nl-transition);
  overflow: hidden;
  min-height: 12rem;
  position: relative;
}
.service-card__icon-wrap .card-photo {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  height: 100%;
  overflow: hidden;
}
.service-card__icon-wrap .card-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
  border-radius: 0;
}
.service-card__icon-wrap svg { display: none; }
.service-card:hover .service-card__icon-wrap { border-color: var(--nl-blue-400); box-shadow: none; }
.service-card--accent .service-card__icon-wrap,
.service-card__icon-wrap--orange { border-color: #ffd7bf; }
.service-card--accent:hover .service-card__icon-wrap,
.service-card:hover .service-card__icon-wrap--orange { border-color: var(--nl-accent); box-shadow: none; }
.service-card__icon-wrap--teal { border-color: #c9eaf4; }
.service-card:hover .service-card__icon-wrap--teal { border-color: var(--nl-teal); box-shadow: none; }
.service-card__icon-wrap--slate { border-color: #d8e0ea; }
.service-card:hover .service-card__icon-wrap--slate { border-color: #35516f; box-shadow: none; }

.service-card__title { font-size: 1.15rem; font-weight: 800; color: var(--nl-gray-900); margin-bottom: 0.625rem; }
.service-card__desc { font-size: 0.9rem; color: var(--nl-gray-600); line-height: 1.65; flex: 1; margin-bottom: 1.5rem; }
.service-card__features { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.service-card__features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--nl-gray-700); padding: 0.3rem 0; border-bottom: 1px solid var(--nl-gray-50); }
.service-card__features li svg { width: 0.9rem; height: 0.9rem; color: var(--nl-green); flex-shrink: 0; margin-top: 0.2rem; }
.service-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.9rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  background: var(--nl-blue-700);
  border: 1px solid var(--nl-blue-700);
  border-radius: 999px;
  margin-top: auto;
  text-align: center;
  box-shadow: 0 10px 24px rgba(10, 44, 92, 0.14);
  transition: background var(--nl-transition), border-color var(--nl-transition), transform var(--nl-transition), box-shadow var(--nl-transition), gap var(--nl-transition);
}
.service-card__link svg { flex-shrink: 0; }
.service-card__link:hover {
  color: #fff;
  background: var(--nl-blue-800);
  border-color: var(--nl-blue-800);
  gap: 0.7rem;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(10, 44, 92, 0.18);
}

/* =========================================================
   FEATURE ITEMS (icon + text row)
   ========================================================= */
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.feature-list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: var(--nl-gray-700); line-height: 1.5; }
.feature-list li svg { width: 1rem; height: 1rem; color: var(--nl-green); flex-shrink: 0; margin-top: 0.2rem; }

/* Large feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .feature-grid { grid-template-columns: 1fr; } }

.feature-item { text-align: center; padding: 2rem 1.25rem; }
.feature-item__icon {
  width: 5rem; height: 5rem; margin: 0 auto 1.25rem;
  background: var(--nl-blue-50); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--nl-blue-600); border: 2px solid var(--nl-blue-100);
}
.feature-item__icon svg { width: 2.25rem; height: 2.25rem; }
.feature-item__title { font-size: 1rem; font-weight: 700; color: var(--nl-gray-900); margin-bottom: 0.5rem; }
.feature-item__text { font-size: 0.875rem; color: var(--nl-gray-600); line-height: 1.65; }

/* Dark feature items */
.feature-item--dark .feature-item__icon { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: var(--nl-blue-300); }
.feature-item--dark .feature-item__title { color: #fff; }
.feature-item--dark .feature-item__text { color: rgba(255,255,255,0.68); }

/* =========================================================
   CONTENT SPLIT
   ========================================================= */
.content-split { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.content-split--reverse .content-split__visual { order: -1; }
@media (max-width: 900px) { .content-split { grid-template-columns: 1fr; gap: 3rem; } .content-split--reverse .content-split__visual { order: 0; } }
.content-split__text h2 { font-size: clamp(1.75rem, 3.5vw, 2.375rem); font-weight: 800; margin-bottom: 1rem; }
.content-split__text p { margin-bottom: 1rem; font-size: 0.9375rem; line-height: 1.75; }
.content-split__visual { position: relative; }
.content-split__visual--icon { display: flex; align-items: center; justify-content: center; }
.big-feature-icon {
  width: 280px; height: 280px; border-radius: 50%;
  background: var(--nl-blue-50); display: flex; align-items: center; justify-content: center;
  color: var(--nl-blue-500); border: 2px solid var(--nl-blue-100);
}
.big-feature-icon svg { width: 160px; height: 160px; }

/* Service image */
.service-image-wrap {
  border-radius: var(--nl-radius-xl); overflow: hidden;
  box-shadow: var(--nl-shadow-xl); aspect-ratio: 4/3;
  background: var(--nl-blue-50);
  display: flex; align-items: center; justify-content: center;
}
.service-image-wrap svg { width: 60%; height: 60%; color: var(--nl-blue-200); }

/* =========================================================
   PLAN CARDS
   ========================================================= */
.plan-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .plan-cards-grid { grid-template-columns: 1fr; } }

.plan-card {
  background: var(--nl-white); border: 2px solid var(--nl-gray-200);
  border-radius: var(--nl-radius-xl); padding: 2rem 1.875rem;
  position: relative; display: flex; flex-direction: column;
  transition: all var(--nl-transition);
}
.plan-card:hover { box-shadow: var(--nl-shadow-lg); }
.plan-card--featured { border-color: var(--nl-blue-600); box-shadow: var(--nl-shadow-lg); }
.plan-card__badge {
  position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%);
  background: var(--nl-blue-600); color: #fff; font-size: 0.72rem; font-weight: 800;
  padding: 0.25rem 1rem; border-radius: 999px; white-space: nowrap; letter-spacing: 0.04em;
}
.plan-card__badge--accent { background: var(--nl-accent); }
.plan-card__name { font-size: 1rem; font-weight: 700; color: var(--nl-gray-700); margin-bottom: 0.375rem; }
.plan-card__price { font-size: 2.5rem; font-weight: 900; color: var(--nl-gray-900); line-height: 1; margin-bottom: 0.25rem; }
.plan-card__price sup { font-size: 1.25rem; vertical-align: super; }
.plan-card__price span { font-size: 1rem; font-weight: 500; color: var(--nl-gray-500); }
.plan-card__period { font-size: 0.8rem; color: var(--nl-gray-500); margin-bottom: 1.5rem; }
.plan-card__divider { border: none; border-top: 1px solid var(--nl-gray-100); margin: 1.25rem 0; }
.plan-card__features { list-style: none; padding: 0; margin: 0 0 1.75rem; flex: 1; }
.plan-card__features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--nl-gray-700); padding: 0.4rem 0; }
.plan-card__features li svg { width: 0.9rem; height: 0.9rem; color: var(--nl-green); flex-shrink: 0; margin-top: 0.15rem; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band { background: linear-gradient(135deg, var(--nl-blue-900) 0%, var(--nl-blue-700) 100%); padding: 1.8rem 0; margin-top: 1.25rem; }
.cta-band--accent { background: linear-gradient(135deg, #7c2d12 0%, var(--nl-accent) 100%); }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.75rem 2rem; }
.cta-band__text { max-width: 42rem; }
.cta-band__title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: #fff; margin-bottom: 0.35rem; line-height: 1.1; }
.cta-band__subtitle { color: rgba(255,255,255,0.86); font-size: 1.0625rem; margin: 0; }
.cta-band__meta { color: rgba(255,255,255,0.66); font-size: 0.9rem; margin-top: 0.45rem; }
.cta-band__actions { display: flex; gap: 0.9rem; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.cta-band__actions .btn { min-height: 2.7rem; padding: 0.78rem 1.35rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.7rem; white-space: nowrap; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--nl-blue-900); color: rgba(255,255,255,1); }
.footer-main { padding: 2.15rem 0 1.85rem; }
.footer-grid { display: grid; grid-template-columns: 1.42fr 1.05fr 1.05fr 1fr 1.12fr; gap: 2.25rem; align-items: start; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand__logo { margin-bottom: 0.7rem; }
.footer-brand__logo img, .footer-brand__logo-img { height: 116px; width: auto; opacity: 1; display: block; }
.footer-brand p { font-size: 0.845rem; line-height: 1.72; max-width: 285px; margin-bottom: 0; color: rgba(255,255,255,0.82); }
.footer-contact-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.footer-contact-list li a { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.865rem; line-height: 1.45; color: rgba(255,255,255,0.9); transition: color var(--nl-transition); }
.footer-contact-list li a:hover { color: #fff; }
.footer-contact-list li svg { width: 0.92rem; height: 0.92rem; flex-shrink: 0; opacity: 0.92; margin-top: 0.16rem; }
.footer-col__title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 0.95rem; }
.footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.footer-links a { font-size: 0.865rem; color: rgba(255,255,255,0.9); transition: color var(--nl-transition); }
.footer-links a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding: 1.15rem 0 1.35rem; }
.footer-bottom__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-bottom__copy { font-size: 0.8125rem; color: rgba(255,255,255,0.82); }
.footer-bottom__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-bottom__links a { font-size: 0.8rem; color: rgba(255,255,255,0.88); transition: color var(--nl-transition); }
.footer-bottom__links a:hover { color: rgba(255,255,255,0.8); }

/* =========================================================
   COMPARE TABLE
   ========================================================= */
.compare-table-wrap { overflow-x: auto; border-radius: var(--nl-radius-xl); box-shadow: var(--nl-shadow-md); border: 1px solid var(--nl-gray-200); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--nl-white); }
.compare-table thead tr { background: var(--nl-blue-900); color: #fff; }
.compare-table th { padding: 1.125rem 1.25rem; text-align: center; font-weight: 700; font-size: 0.875rem; }
.compare-table th:first-child { text-align: left; }
.compare-table td { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--nl-gray-100); text-align: center; }
.compare-table td:first-child { text-align: left; font-weight: 600; color: var(--nl-gray-800); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:hover td { background: var(--nl-blue-50); }
.compare-table__us { background: rgba(26,95,180,0.04); }
.compare-win { color: var(--nl-blue-600); font-weight: 700; }
.compare-table__them { color: var(--nl-gray-500); }

/* =========================================================
   ACCORDION
   ========================================================= */
.accordion { display: flex; flex-direction: column; gap: 0; }
.accordion-item { border-bottom: 1px solid var(--nl-gray-200); }
.accordion-trigger {
  width: 100%; background: none; border: none; text-align: left;
  padding: 1.125rem 0; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; cursor: pointer;
  font-size: 0.9375rem; font-weight: 600; color: var(--nl-gray-900);
  transition: color var(--nl-transition);
}
.accordion-trigger:hover { color: var(--nl-blue-600); }
.accordion-icon { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--nl-blue-50); border: 1.5px solid var(--nl-blue-200); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--nl-blue-600); flex-shrink: 0; font-weight: 700; transition: all var(--nl-transition); }
.accordion-item.is-open .accordion-icon { background: var(--nl-blue-600); color: #fff; border-color: var(--nl-blue-600); }
.accordion-panel { padding: 0 0 1.25rem; }
.accordion-panel p { font-size: 0.9375rem; color: var(--nl-gray-600); line-height: 1.7; }

/* =========================================================
   CONTACT FORM
   ========================================================= */
.contact-form { background: var(--nl-white); padding: 2.5rem; border-radius: var(--nl-radius-xl); box-shadow: var(--nl-shadow-card); border: 1px solid var(--nl-gray-100); }
.form-row { display: flex; gap: 1.25rem; }
.form-row--2col > * { flex: 1; }
@media (max-width: 600px) { .form-row { flex-direction: column; gap: 0; } }
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--nl-gray-800); margin-bottom: 0.4rem; }
.required { color: #dc2626; }
.form-input {
  width: 100%; padding: 0.725rem 1rem; border: 1.5px solid var(--nl-gray-300);
  border-radius: var(--nl-radius-md); font-size: 0.9375rem; color: var(--nl-gray-900);
  background: var(--nl-white); transition: border-color var(--nl-transition); font-family: inherit;
}
.form-input:focus { outline: none; border-color: var(--nl-blue-500); box-shadow: 0 0 0 3px rgba(26,95,180,0.1); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' stroke='%230b1f3a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1rem; padding-right: 2.5rem; cursor: pointer; }
.form-textarea { min-height: 130px; resize: vertical; }
.form-error { display: none; color: #dc2626; font-size: 0.8125rem; margin-top: 0.25rem; }
.form-error:not(:empty) { display: block; }
.checkbox-label { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.875rem; color: var(--nl-gray-600); cursor: pointer; line-height: 1.5; }
.checkbox-label input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; accent-color: var(--nl-blue-600); cursor: pointer; }
.form-status { padding: 1rem 1.25rem; border-radius: var(--nl-radius-md); margin-bottom: 1rem; font-size: 0.9375rem; display: none; }
.form-status:not(:empty) { display: block; }
.form-status--success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.form-status--error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.btn-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; margin-left: 0.5rem; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 4rem; }
@media (max-width: 900px) { .contact-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .contact-info-grid { grid-template-columns: 1fr; } }
.contact-info-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem 1.5rem; text-align: center; transition: all var(--nl-transition); }
.contact-info-card:hover { box-shadow: var(--nl-shadow-md); border-color: var(--nl-blue-300); transform: translateY(-3px); }
.contact-info-card__icon { width: 3.25rem; height: 3.25rem; background: var(--nl-blue-50); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--nl-blue-600); border: 1.5px solid var(--nl-blue-100); }
.contact-info-card__icon svg { width: 1.375rem; height: 1.375rem; }
.contact-info-card__label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nl-blue-500); margin-bottom: 0.5rem; }
.contact-info-card__value { font-size: 1rem; font-weight: 700; color: var(--nl-blue-900); display: block; margin-bottom: 0.375rem; line-height: 1.4; }
a.contact-info-card__value:hover { color: var(--nl-blue-600); }
.contact-info-card__note { font-size: 0.8rem; color: var(--nl-gray-500); line-height: 1.5; margin: 0; }
.contact-layout { display: grid; grid-template-columns: 1fr 340px; gap: 4rem; align-items: start; }
@media (max-width: 1024px) { .contact-layout { grid-template-columns: 1fr; gap: 3rem; } }
.contact-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-sidebar-card { background: var(--nl-blue-50); border: 1px solid var(--nl-blue-100); border-radius: var(--nl-radius-lg); padding: 1.75rem; }
.contact-sidebar-card h3 { font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 1rem; }
.hours-list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.hours-list li { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--nl-blue-100); font-size: 0.875rem; }
.hours-list li:last-child { border-bottom: none; }
.quick-links { list-style: none; padding: 0; }
.quick-links li { margin-bottom: 0.5rem; }
.quick-links a { font-size: 0.9rem; color: var(--nl-blue-600); font-weight: 600; }
.quick-links a:hover { color: var(--nl-blue-800); }
.contact-map-section { height: 360px; background: linear-gradient(135deg, var(--nl-blue-800) 0%, var(--nl-blue-600) 100%); display: flex; align-items: center; justify-content: center; }
.contact-map-overlay { text-align: center; color: #fff; }
.contact-map-overlay p { font-size: 1.0625rem; margin-bottom: 1.5rem; opacity: 0.88; }

/* =========================================================
   SUPPORT PAGE
   ========================================================= */
.support-search-bar { display: flex; max-width: 560px; margin: 1.75rem auto 0; }
.support-search-input { flex: 1; padding: 0.75rem 1.1rem; border: none; border-radius: var(--nl-radius-md) 0 0 var(--nl-radius-md); font-size: 1rem; font-family: inherit; }
.support-search-input:focus { outline: none; }
.support-search-btn { padding: 0.75rem 1.1rem; background: var(--nl-accent); color: #fff; border: none; border-radius: 0 var(--nl-radius-md) var(--nl-radius-md) 0; cursor: pointer; }
.support-ribbon { background: var(--nl-blue-50); border-bottom: 1px solid var(--nl-blue-100); padding: 0.75rem 0; }
.support-ribbon__inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.875rem; }
.support-ribbon__label { font-weight: 700; color: var(--nl-blue-900); }
.support-ribbon__link { color: var(--nl-blue-600); font-weight: 600; display: flex; align-items: center; gap: 0.375rem; }
.support-ribbon__sep { color: var(--nl-gray-300); }
.support-ribbon__badge { background: var(--nl-blue-600); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.625rem; border-radius: 999px; }
.support-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .support-category-grid { grid-template-columns: repeat(2, 1fr); } }
.support-category-card { display: flex; flex-direction: column; background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem 1.5rem; text-decoration: none; color: inherit; transition: all var(--nl-transition); }
.support-category-card:hover { box-shadow: var(--nl-shadow-lg); border-color: var(--nl-blue-400); transform: translateY(-4px); }
.support-category-card__icon { width: 3rem; height: 3rem; background: var(--nl-blue-50); border-radius: var(--nl-radius-md); display: flex; align-items: center; justify-content: center; color: var(--nl-blue-600); margin-bottom: 1rem; border: 1px solid var(--nl-blue-100); }
.support-category-card__icon svg { width: 1.5rem; height: 1.5rem; }
.support-category-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--nl-gray-900); }
.support-category-card p { font-size: 0.85rem; color: var(--nl-gray-500); flex: 1; margin-bottom: 1rem; line-height: 1.6; }
.support-category-card__arrow { font-size: 1rem; color: var(--nl-blue-500); font-weight: 700; }

/* Guide Tabs */
.guides-tabs, .bundle-tabs { margin-top: 2.5rem; }
.guides-tab-nav, .bundle-tab-nav { display: flex; gap: 0.375rem; border-bottom: 2px solid var(--nl-gray-200); margin-bottom: 2rem; }
.guide-tab, .bundle-tab { padding: 0.625rem 1.25rem; background: none; border: none; font-size: 0.9375rem; font-weight: 600; color: var(--nl-gray-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--nl-transition); }
.guide-tab:hover, .bundle-tab:hover { color: var(--nl-blue-600); }
.guide-tab.active, .bundle-tab.active { color: var(--nl-blue-600); border-bottom-color: var(--nl-blue-600); }
.guide-panel, .bundle-tab-panel { }
.guide-list { display: flex; flex-direction: column; }
.guide-item { display: flex; align-items: center; gap: 1.25rem; padding: 1.125rem 0; border-bottom: 1px solid var(--nl-gray-100); }
.guide-item:last-child { border-bottom: none; }
.guide-item__icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; background: var(--nl-blue-50); border-radius: var(--nl-radius-md); display: flex; align-items: center; justify-content: center; color: var(--nl-blue-600); }
.guide-item__icon svg { width: 1.1rem; height: 1.1rem; }
.guide-item__content { flex: 1; }
.guide-item__content h4 { font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.2rem; color: var(--nl-gray-900); }
.guide-item__content p { font-size: 0.8125rem; color: var(--nl-gray-500); margin: 0; }
.guide-item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; flex-shrink: 0; }
.guide-time { font-size: 0.75rem; color: var(--nl-gray-400); display: flex; align-items: center; gap: 0.3rem; }
.guide-btn { font-size: 0.8125rem; font-weight: 700; color: var(--nl-blue-600); }
.guide-btn:hover { color: var(--nl-blue-800); }

/* FAQ */
.faq-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
@media (max-width: 900px) { .faq-categories { grid-template-columns: 1fr; } }
.faq-category__title { display: flex; align-items: center; gap: 0.625rem; font-size: 1rem; font-weight: 700; color: var(--nl-blue-800); margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--nl-blue-100); }
.faq-category__title svg { width: 1.125rem; height: 1.125rem; }

/* Troubleshoot */
.troubleshoot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; margin-bottom: 3rem; }
@media (max-width: 768px) { .troubleshoot-grid { grid-template-columns: 1fr; } }
.troubleshoot-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem; }
.troubleshoot-card__header { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.troubleshoot-card__icon { width: 2.5rem; height: 2.5rem; background: var(--nl-blue-50); border-radius: var(--nl-radius-md); display: flex; align-items: center; justify-content: center; color: var(--nl-blue-600); }
.troubleshoot-card__icon svg { width: 1.25rem; height: 1.25rem; }
.troubleshoot-card__header h3 { font-size: 1rem; font-weight: 700; color: var(--nl-gray-900); }
.troubleshoot-steps { padding-left: 1.25rem; margin: 0; }
.troubleshoot-steps li { font-size: 0.875rem; color: var(--nl-gray-700); padding: 0.3rem 0; line-height: 1.6; }
.troubleshoot-cta { text-align: center; padding: 2.5rem; background: var(--nl-blue-50); border-radius: var(--nl-radius-xl); border: 1px solid var(--nl-blue-100); }
.troubleshoot-cta p { font-size: 1.0625rem; color: var(--nl-blue-900); margin-bottom: 1rem; font-weight: 600; }
.troubleshoot-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Downloads */
.downloads-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 768px) { .downloads-grid { grid-template-columns: 1fr; } }
.download-item { display: flex; align-items: center; gap: 1rem; padding: 1.125rem 1.25rem; background: var(--nl-white); border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-lg); transition: all var(--nl-transition); }
.download-item:hover { box-shadow: var(--nl-shadow-sm); border-color: var(--nl-blue-200); }
.download-item__icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; background: var(--nl-blue-50); border-radius: var(--nl-radius-md); display: flex; align-items: center; justify-content: center; color: var(--nl-blue-600); }
.download-item__icon svg { width: 1rem; height: 1rem; }
.download-item__content { flex: 1; }
.download-item__cat { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nl-blue-400); margin-bottom: 0.15rem; }
.download-item__content h4 { font-size: 0.875rem; font-weight: 600; color: var(--nl-gray-900); margin: 0 0 0.15rem; }
.download-item__meta { font-size: 0.75rem; color: var(--nl-gray-400); }
.download-item__btn { width: 2rem; height: 2rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--nl-blue-500); border-radius: 50%; transition: all var(--nl-transition); }
.download-item__btn:hover { background: var(--nl-blue-50); color: var(--nl-blue-700); }
.download-item__btn svg { width: 1rem; height: 1rem; }

/* Cancellation box */
.cancellation-info-box { background: var(--nl-blue-50); border: 1px solid var(--nl-blue-100); border-radius: var(--nl-radius-xl); padding: 2rem; }
.cancellation-info-box h4 { font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-800); margin-bottom: 0.5rem; }
.cancellation-info-box p { font-size: 0.875rem; color: var(--nl-gray-700); margin-bottom: 1rem; line-height: 1.6; }
.cancellation-info-box hr { border: none; border-top: 1px solid var(--nl-blue-200); margin: 1rem 0; }

/* =========================================================
   BUNDLES PAGE
   ========================================================= */
.bundle-benefits-bar { background: var(--nl-blue-700); color: #fff; padding: 1rem 0; }
.bundle-benefits-bar__inner { display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.bundle-benefit { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.bundle-benefit svg { width: 1rem; height: 1rem; opacity: 0.85; }
.bundle-tab-intro { font-size: 1rem; color: var(--nl-gray-600); margin-bottom: 2.5rem; }
.bundle-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.bundle-plan-grid--double { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto; }
@media (max-width: 900px) { .bundle-plan-grid, .bundle-plan-grid--double { grid-template-columns: 1fr; } }
.bundle-plan-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem; position: relative; display: flex; flex-direction: column; transition: all var(--nl-transition); }
.bundle-plan-card:hover { box-shadow: var(--nl-shadow-lg); border-color: var(--nl-blue-300); }
.bundle-plan-card--featured { border-color: var(--nl-blue-600); box-shadow: var(--nl-shadow-md); }
.bundle-plan-card__badge { position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%); background: var(--nl-blue-600); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 0.25rem 1rem; border-radius: 999px; white-space: nowrap; }
.bundle-plan-card__badge--gold { background: #d97706; }
.bundle-plan-card__header { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--nl-gray-100); }
.bundle-plan-card__header h3 { font-size: 1.2rem; font-weight: 800; color: var(--nl-gray-900); margin-bottom: 0.4rem; }
.bundle-plan-card__header p { font-size: 0.875rem; color: var(--nl-gray-600); line-height: 1.6; margin: 0; }
.bundle-plan-card__includes { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.bundle-plan-card__includes li { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.4rem 0; font-size: 0.875rem; color: var(--nl-gray-700); border-bottom: 1px solid var(--nl-gray-50); }
.bundle-plan-card__includes li svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; color: var(--nl-blue-500); margin-top: 0.15rem; }
.bundle-plan-card__note { font-size: 0.75rem; color: var(--nl-gray-400); text-align: center; margin-top: 0.75rem; }
.btn--block { width: 100%; justify-content: center; }
.biz-bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .biz-bundle-grid { grid-template-columns: 1fr; } }
.biz-bundle-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--nl-radius-xl); padding: 2.5rem 2rem; color: #fff; position: relative; transition: all var(--nl-transition); }
.biz-bundle-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); }
.biz-bundle-card--featured { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); }
.biz-bundle-card__badge { position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%); background: var(--nl-blue-400); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 0.25rem 1rem; border-radius: 999px; }
.biz-bundle-card__icon { width: 2.75rem; height: 2.75rem; background: rgba(255,255,255,0.12); border-radius: var(--nl-radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.biz-bundle-card__icon svg { width: 1.25rem; height: 1.25rem; }
.biz-bundle-card h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.625rem; }
.biz-bundle-card > p { font-size: 0.875rem; opacity: 0.8; line-height: 1.6; margin-bottom: 1.5rem; }
.biz-bundle-card__list { list-style: none; padding: 0; margin: 0 0 2rem; }
.biz-bundle-card__list li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.375rem 0; font-size: 0.875rem; opacity: 0.88; border-bottom: 1px solid rgba(255,255,255,0.07); }
.biz-bundle-card__list li svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--nl-blue-300); margin-top: 0.15rem; }
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .promo-grid { grid-template-columns: 1fr; } }
.promo-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2.5rem 2rem; text-align: center; position: relative; }
.promo-card__ribbon { position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%); background: #059669; color: #fff; font-size: 0.72rem; font-weight: 800; padding: 0.25rem 1rem; border-radius: 999px; }
.promo-card__icon { width: 3rem; height: 3rem; background: var(--nl-blue-50); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--nl-blue-600); }
.promo-card__icon svg { width: 1.5rem; height: 1.5rem; }
.promo-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--nl-gray-900); margin-bottom: 0.625rem; }
.promo-card > p { font-size: 0.875rem; color: var(--nl-gray-600); line-height: 1.7; margin-bottom: 0.75rem; }
.promo-card__terms { font-size: 0.75rem !important; color: var(--nl-gray-400) !important; margin-bottom: 1.5rem !important; }
.custom-bundle-cta { display: grid; grid-template-columns: 1fr 360px; gap: 5rem; align-items: center; }
@media (max-width: 1024px) { .custom-bundle-cta { grid-template-columns: 1fr; gap: 3rem; } }
.custom-bundle-cta h2 { font-size: 2rem; font-weight: 800; color: var(--nl-gray-900); margin-bottom: 1rem; }
.custom-bundle-cta p { font-size: 1rem; color: var(--nl-gray-600); line-height: 1.7; margin-bottom: 1rem; }
.custom-bundle-cta__points { list-style: none; padding: 0; margin: 0 0 2rem; }
.custom-bundle-cta__points li { display: flex; align-items: center; gap: 0.625rem; padding: 0.35rem 0; font-size: 0.9rem; color: var(--nl-gray-700); }
.custom-bundle-cta__points li svg { width: 1rem; height: 1rem; color: var(--nl-blue-500); }
.custom-bundle-cta__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.bundle-builder-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem; box-shadow: var(--nl-shadow-lg); }
.bundle-builder-card h4 { font-size: 1rem; font-weight: 800; color: var(--nl-blue-900); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--nl-gray-100); }
.bundle-builder-service { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0; border-bottom: 1px solid var(--nl-gray-100); }
.bundle-builder-service svg { width: 1.1rem; height: 1.1rem; color: var(--nl-blue-500); }
.bundle-builder-service span:nth-child(2) { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--nl-blue-900); }
.toggle-switch { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track { position: absolute; inset: 0; background: var(--nl-gray-300); border-radius: 999px; cursor: not-allowed; }
.toggle-track::before { content: ''; position: absolute; width: 1.1rem; height: 1.1rem; background: #fff; border-radius: 50%; top: 50%; left: 0.2rem; transform: translateY(-50%); transition: transform var(--nl-transition); }
.toggle-switch input:checked + .toggle-track { background: var(--nl-blue-600); }
.toggle-switch input:checked + .toggle-track::before { transform: translate(1.25rem, -50%); }
.bundle-builder-cta { margin-top: 1.5rem; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.value-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem; text-align: center; transition: all var(--nl-transition); }
.value-card:hover { box-shadow: var(--nl-shadow-md); border-color: var(--nl-blue-200); }
.value-card__icon { font-size: 2.25rem; margin-bottom: 1rem; }
.value-card__title { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.value-card__text { font-size: 0.875rem; color: var(--nl-gray-600); line-height: 1.6; }

/* =========================================================
   RESIDENTIAL / BUSINESS HOMEPAGES
   ========================================================= */
.res-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 900px) { .res-services-grid { grid-template-columns: 1fr; } }
.res-service-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 0 2rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; transition: all var(--nl-transition); overflow: hidden; }
.res-service-card > :not(.res-service-card__icon) {
  padding-left: 0;
  padding-right: 0;
}
.res-service-card:hover { box-shadow: var(--nl-shadow-xl); transform: translateY(-6px); border-color: var(--nl-blue-200); }
.res-service-card--internet { border-top: 4px solid var(--nl-blue-600); }
.res-service-card--phone { border-top: 4px solid var(--nl-teal); }
.res-service-card--tv { border-top: 4px solid #6366f1; }
.res-service-card__icon {
  color: var(--nl-blue-600);
  width: calc(100% + 4rem);
  margin: 0 -2rem 0.25rem;
  border-radius: calc(var(--nl-radius-xl) - 2px) calc(var(--nl-radius-xl) - 2px) 0 0;
  overflow: hidden;
  border: 0;
  background: #f8fbff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 11rem;
  position: relative;
}
.res-service-card__icon .card-photo {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
}
.res-service-card__icon .card-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  border-radius: 0;
}
.res-service-card__icon svg { display: none; }
.res-service-card h3 { font-size: 1.3rem; font-weight: 800; color: var(--nl-gray-900); margin: 0; }
.res-service-card p { font-size: 0.9375rem; color: var(--nl-gray-600); line-height: 1.7; margin: 0; }
.res-service-card__features { list-style: none; padding: 0; margin: 0; flex: 1; }
.res-service-card__features li { font-size: 0.875rem; color: var(--nl-gray-700); padding: 0.3rem 0; border-bottom: 1px solid var(--nl-gray-50); }
.bundle-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: end; }
@media (max-width: 768px) { .bundle-highlights { grid-template-columns: 1fr; align-items: stretch; } }
.bundle-highlight-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 0; text-align: center; position: relative; transition: all var(--nl-transition); overflow: hidden; min-height: 260px; display: flex; flex-direction: column; }
.bundle-highlight-card:hover { box-shadow: var(--nl-shadow-lg); transform: translateY(-4px); }
.bundle-highlight-card--featured { border-color: var(--nl-blue-600); box-shadow: var(--nl-shadow-md); transform: translateY(-18px); }
.bundle-highlight-card--featured:hover { transform: translateY(-22px); }
@media (max-width: 768px) { .bundle-highlight-card--featured, .bundle-highlight-card--featured:hover { transform: translateY(0); } }
.bundle-highlight-card__badge { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); background: var(--nl-blue-600); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 0.25rem 1rem; border-radius: 999px; z-index: 3; white-space: nowrap; }
.bundle-highlight-card__icons { font-size: 2rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.bundle-highlight-card h3 { font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 100%; pointer-events: none; }
.bundle-highlight-card p { font-size: 0.875rem; color: var(--nl-gray-600); margin-bottom: 1.5rem; line-height: 1.6; padding: 0 1.5rem; }
.bundle-highlight-card .btn { margin-bottom: 1.75rem; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
.why-card { text-align: center; padding: 2rem 1.5rem; }
.why-card__icon { width: 4.5rem; height: 4.5rem; background: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--nl-blue-300); border: 1.5px solid rgba(255,255,255,0.1); }
.why-card__icon svg { width: 2rem; height: 2rem; }
.why-card h3 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.why-card p { font-size: 0.875rem; color: rgba(255,255,255,0.65); line-height: 1.7; margin: 0; }
.biz-home-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .biz-home-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px) { .biz-home-services-grid { grid-template-columns: 1fr; } }
.biz-home-service-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem 1.75rem; transition: all var(--nl-transition); }
.biz-home-service-card:hover { box-shadow: var(--nl-shadow-lg); border-color: var(--nl-blue-300); transform: translateY(-4px); }
.biz-home-service-card__icon { color: var(--nl-blue-600); margin-bottom: 1rem; }
.biz-home-service-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--nl-gray-900); margin-bottom: 0.5rem; }
.biz-home-service-card p { font-size: 0.875rem; color: var(--nl-gray-600); line-height: 1.6; margin-bottom: 1rem; }
.biz-home-service-card__link { font-weight: 700; color: var(--nl-blue-600); font-size: 0.9rem; }
.biz-home-service-card__link:hover { color: var(--nl-blue-800); }

/* =========================================================
   BACK TO TOP
   ========================================================= */
#back-to-top { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 900; width: 2.75rem; height: 2.75rem; background: var(--nl-blue-600); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--nl-shadow-lg); opacity: 0; transform: translateY(12px); pointer-events: none; transition: all 0.3s ease; font-size: 1.1rem; }
#back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#back-to-top:hover { background: var(--nl-blue-800); transform: translateY(-2px); }


@media (max-width: 1100px) {
  .site-topbar__inner {
    align-items: flex-start;
  }
  .site-topbar__left {
    width: 100%;
    justify-content: space-between;
  }
  .topbar-contact {
    gap: 0.85rem;
  }
}
@media (max-width: 768px) {
  .site-topbar {
    padding: 0.7rem 0;
  }
  .site-topbar__left,
  .site-topbar__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .section-switcher {
    width: 100%;
    justify-content: space-between;
  }
  .section-switcher__link {
    flex: 1;
    min-width: 0;
  }
  .topbar-contact,
  .topbar-links {
    justify-content: space-between;
  }
  .topbar-contact a,
  .topbar-links a {
    font-size: 0.76rem;
  }
  .nav-cta .btn--ghost {
    display: none;
  }
}
@media (max-width: 640px) {
  .topbar-contact,
  .topbar-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .site-header__inner {
    height: 100px;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .primary-nav { display: none; }
  .mobile-nav-toggle { display: block; }
  .nav-cta { margin-left: auto; }
}
@media (max-width: 768px) {
  .section { padding: 3.5rem 0; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
  .hero-service-showcase__track { min-height: 190px; }
  .hero-service-card { padding: 1.35rem 1.25rem; }
  .cta-band__inner { grid-template-columns: 1fr; text-align: center; }
  .cta-band__text { max-width: none; }
  .cta-band__actions { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; }
  .hero__stats { grid-template-columns: 1fr; }
  .hero-service-showcase { max-width: 100%; }
  .hero-service-showcase__track { min-height: 210px; }
  .page-hero__actions { flex-direction: column; }
}

/* =========================================================
   LOGO
   ========================================================= */
.site-logo__img { height: 100px; width: auto; object-fit: contain; display: block; }
.custom-logo { height: 100px; width: auto; display: block; }

/* nl_icon helper fallback */
.nl-icon { display: inline-flex; align-items: center; justify-content: center; }
.nl-icon svg { width: 1em; height: 1em; }

/* Path cards hover */
.path-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(11,31,58,0.35); }

/* Mobile nav parent item */
.mobile-nav-item--parent { border-bottom: 1px solid var(--nl-gray-100); }


/* =========================================================
   HEADER REFINEMENT + BELL-STYLE NAV LAYER
   ========================================================= */
.site-topbar {
  position: relative;
  z-index: 520;
}
.site-topbar__inner {
  min-height: 36px;
  justify-content: flex-start;
}
.topbar-links {
  gap: 0.75rem;
  margin-left: 1.35rem;
  justify-content: flex-start;
}
.toolbar-dropdown {
  position: relative;
}
.toolbar-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 36px;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  transition: all var(--nl-transition);
}
.toolbar-dropdown__toggle:hover,
.toolbar-dropdown.is-open .toolbar-dropdown__toggle {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
}
.toolbar-dropdown__label {
  color: rgba(255,255,255,0.82);
  font-weight: 600;
}
.toolbar-dropdown__value {
  color: #fff;
}
.toolbar-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 80px;
  padding: 0.25rem;
  border-radius: 10px;
  border: 1px solid var(--nl-gray-200);
  background: #fff;
  box-shadow: 0 12px 28px rgba(11,31,58,0.13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--nl-transition);
}
.toolbar-dropdown.is-open .toolbar-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.toolbar-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.38rem 0.7rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nl-gray-800);
  background: transparent;
}
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item,
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item:visited {
  color: var(--nl-gray-800);
}
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item:hover,
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item:focus-visible,
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item.is-active,
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item.is-active:visited {
  background: var(--nl-blue-50);
  color: var(--nl-blue-700);
}

.site-header {
  z-index: 510;
}
.site-header__inner {
  height: 100px;
  min-height: 100px;
  gap: 1.25rem;
}
.site-logo__img,
.custom-logo {
  height: 74px;
  max-height: 74px;
  width: auto;
}
.primary-nav {
  justify-content: center;
  margin-left: -96px;
}
.nav-menu--section {
  gap: 0.1rem;
}
.nav-link {
  height: 94px;
  padding: 0 1rem;
  font-size: 0.95rem;
}
.nav-link--button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  font: inherit;
}

.nav-menu--section > .nav-item:last-child > .nav-link {
  transform: translateY(1px);
}
.nav-link--button:focus-visible,
.toolbar-dropdown__toggle:focus-visible,
.services-category:focus-visible,
.mobile-nav-parent-toggle:focus-visible {
  outline: 2px solid var(--nl-blue-500);
  outline-offset: 2px;
}

.nav-mega--services {
  width: 820px;
  padding: 0;
  overflow: hidden;
  border-top: 3px solid var(--nl-blue-600);
  border-radius: 0 0 20px 20px;
}
.services-mega {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  min-height: 400px;
}
.services-mega__sidebar {
  background: #f4f8ff;
  border-right: 1px solid rgba(178,194,214,0.35);
  padding: 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}
.services-mega__sidebar-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nl-blue-500);
  padding: 0 0.5rem 0.4rem;
  margin-bottom: 0.1rem;
}
.services-category {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  color: var(--nl-gray-800);
  cursor: pointer;
  transition: all 0.18s ease;
}
.services-category:hover,
.services-category.is-active {
  background: #fff;
  border-color: rgba(178,194,214,0.6);
  box-shadow: 0 4px 16px rgba(11,31,58,0.07);
}
.services-category__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.services-category:hover .services-category__icon,
.services-category.is-active .services-category__icon {
  transform: scale(1.06);
}
.services-category__icon svg {
  width: 21px;
  height: 21px;
}
.services-category[data-service-group="internet"] .services-category__icon {
  background: linear-gradient(135deg, #1e6fd9 0%, #185db5 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(30,111,217,0.30);
}
.services-category[data-service-group="phone"] .services-category__icon,
.services-category[data-service-group="voice"] .services-category__icon {
  background: linear-gradient(135deg, #0e9f82 0%, #0b8a6e 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(14,159,130,0.28);
}
.services-category[data-service-group="tv"] .services-category__icon {
  background: linear-gradient(135deg, #7c3aed 0%, #6028cc 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124,58,237,0.28);
}
.services-category[data-service-group="bundles"] .services-category__icon {
  background: linear-gradient(135deg, #e07b1a 0%, #c46613 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(224,123,26,0.28);
}
.services-category[data-service-group="data-centre"] .services-category__icon {
  background: linear-gradient(135deg, #1a5fb4 0%, #144d96 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(26,95,180,0.28);
}
.services-category[data-service-group="web-solutions"] .services-category__icon {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(8,145,178,0.26);
}
.services-category__text {
  display: flex;
  flex-direction: column;
}
.services-category__text strong {
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--nl-gray-900);
}
.services-category__text small {
  margin-top: 0.18rem;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--nl-gray-500);
}
.services-mega__panels {
  position: relative;
  padding: 1.25rem 1.4rem 1.25rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.services-panel {
  display: none;
  flex-direction: column;
  height: 100%;
}
.services-panel.is-active {
  display: flex;
}
.services-panel__header {
  padding-bottom: 0.85rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(178,194,214,0.4);
}
.services-panel__header p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--nl-blue-900);
}
.services-panel__header span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.79rem;
  color: var(--nl-gray-500);
}
.services-panel__submenu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  flex: 1;
}
.services-panel__submenu a {
  min-height: 88px;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(178,194,214,0.45);
  background: #fafcff;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
}
.services-panel__submenu a:hover {
  border-color: var(--nl-blue-300);
  background: #fff;
  box-shadow: 0 6px 20px rgba(11,31,58,0.08);
  transform: translateY(-2px);
}
.services-panel__submenu-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--nl-gray-900);
}
.services-panel__submenu-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nl-blue-500);
  flex-shrink: 0;
}
.services-panel__submenu small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--nl-gray-500);
}
.services-panel__promo {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: linear-gradient(90deg, #eef5ff 0%, #f4f0ff 100%);
  border: 1px solid rgba(178,194,214,0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}
.services-panel__promo-text {
  font-size: 0.78rem;
  color: var(--nl-blue-800);
  font-weight: 600;
}
.services-panel__promo-text span {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--nl-gray-500);
  margin-top: 0.1rem;
}
.services-panel__promo-link {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--nl-blue-600);
  white-space: nowrap;
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--nl-blue-300);
  transition: all 0.15s ease;
}
.services-panel__promo-link:hover {
  background: var(--nl-blue-600);
  color: #fff;
  border-color: var(--nl-blue-600);
}
.nav-cta { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; }
.nav-cta .btn--sm { padding: 0.5rem 1.125rem; font-size: 0.8125rem; border-radius: var(--nl-radius-md); }

/* Mobile Nav Toggle */
.mobile-nav-toggle {
  display: none; background: none; border: none; padding: 0.5rem;
  color: var(--nl-gray-700); cursor: pointer;
}
.hamburger { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.hamburger span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: all var(--nl-transition); }
.mobile-nav-toggle.is-active .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle.is-active .hamburger span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.is-active .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav Drawer */
.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 700; }
.mobile-nav-overlay.is-visible { display: block; }
.mobile-nav-drawer {
  position: fixed; top: 0; right: -100%; width: min(360px, 90vw); height: 100vh;
  background: var(--nl-white); z-index: 800; overflow-y: auto;
  transition: right var(--nl-transition-slow); box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
.mobile-nav-drawer.is-open { right: 0; }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--nl-gray-100); }
.mobile-nav-close { background: none; border: none; font-size: 1.5rem; color: var(--nl-gray-600); cursor: pointer; padding: 0.25rem; }
.mobile-nav-body { padding: 1rem 1.5rem; }
.mobile-nav-item { border-bottom: 1px solid var(--nl-gray-100); }
.mobile-nav-item a { display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 0; font-weight: 600; color: var(--nl-gray-800); font-size: 0.9375rem; }
.mobile-nav-parent-toggle { background: none; border: none; padding: 0.875rem 0;
  font-weight: 600; color: var(--nl-gray-800); font-size: 0.9375rem; width: 100%;
  text-align: left; display: flex; justify-content: space-between; cursor: pointer; }
.mobile-nav-submenu { padding-left: 1rem; }
.mobile-nav-submenu a { font-size: 0.875rem; font-weight: 500; color: var(--nl-gray-600); padding: 0.6rem 0; }
.mobile-nav-footer { padding: 1.5rem; border-top: 1px solid var(--nl-gray-100); display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }

/* =========================================================
   HERO SECTIONS
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(70px, 10vw, 120px) 0 clamp(70px, 10vw, 120px);
  color: var(--nl-white);
}
.hero::after { display: none; }
.hero__bg-icon {
  position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
  pointer-events: none; z-index: 0; opacity: 0.05;
}
.hero__bg-icon svg { width: 500px; height: 500px; }
.hero__content { position: relative; z-index: 2; max-width: 720px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9); padding: 0.4rem 1rem;
  border-radius: var(--nl-radius-full); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.04em; margin-bottom: 1.5rem;
}
.hero__title { font-size: clamp(2.25rem, 5.5vw, 3.75rem); font-weight: 900; line-height: 1.08; margin-bottom: 1rem; color: #fff; }
.hero__title span { color: var(--nl-blue-300); }
.hero__title span.accent { color: #ffcc44; }
.hero__lead { font-size: clamp(1rem, 2vw, 1.175rem); color: rgba(255,255,255,0.82); line-height: 1.7; margin-bottom: 2.25rem; max-width: 580px; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.hero-service-showcase {
  position: relative;
  margin-bottom: 3rem;
  max-width: 620px;
}
.hero-service-showcase__track {
  position: relative;
  min-height: 178px;
}
.hero-service-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.5rem 1.6rem;
  border-radius: 22px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 24px 60px rgba(4, 18, 35, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
}
.hero-service-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hero-service-card__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: var(--nl-radius-full);
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-service-card__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  font-weight: 900;
  line-height: 1.05;
}
.hero-service-card__tagline {
  margin: 0;
  color: rgba(255,255,255,0.84);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 32rem;
}
.hero-service-showcase__nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  padding-left: 0.25rem;
}
.hero-service-showcase__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  transition: transform 0.35s ease, background-color 0.35s ease, width 0.35s ease;
}
.hero-service-showcase__dot.is-active {
  width: 2rem;
  background: #fff;
}
.hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.15); transition: opacity 0.28s ease, transform 0.28s ease; }
.hero__stats.is-updating { opacity: 0.32; transform: translateY(8px); }
.hero__stat { min-width: 0; }
.hero__stat-value { font-size: 2rem; font-weight: 900; color: #fff; line-height: 1.05; }
.hero__stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.65); margin-top: 0.35rem; font-weight: 500; line-height: 1.45; }

/* Hero colour variants */
.hero--main       { background: linear-gradient(135deg, #0b1f3a 0%, #154a87 55%, #2172cc 100%); }
.hero--residential { background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fb4 100%); }
.hero--business   { background: linear-gradient(135deg, #0b1f3a 0%, #0d2a50 55%, #0e3f7c 100%); }

/* Page Hero (inner pages) */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 7vw, 88px) 0 clamp(48px, 7vw, 88px);
  color: var(--nl-white);
}
.page-hero__bg-icon {
  position: absolute; right: 2%; top: 50%; transform: translateY(-50%);
  pointer-events: none; z-index: 0; opacity: 0.07; color: #fff;
}
.page-hero__bg-icon svg { width: 340px; height: 340px; }
.page-hero__content { position: relative; z-index: 1; }
.page-hero__title { font-size: clamp(1.875rem, 4.5vw, 3rem); font-weight: 900; color: #fff; margin-bottom: 0.7rem; }
.page-hero__subtitle { font-size: 1.0625rem; color: rgba(255,255,255,0.8); max-width: 560px; line-height: 1.7; }
.page-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* Page hero colour per section */
.page-hero--internet   { background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 60%, #1a5fb4 100%); }
.page-hero--phone      { background: linear-gradient(135deg, #0b1f3a 0%, #164e63 60%, #0e7490 100%); }
.page-hero--tv         { background: linear-gradient(135deg, #0b1f3a 0%, #2d1b69 60%, #4c1d95 100%); }
.page-hero--datacentre { background: linear-gradient(135deg, #0b1f3a 0%, #1a3a5c 60%, #1a5fb4 100%); }
.page-hero--web        { background: linear-gradient(135deg, #0b1f3a 0%, #14532d 60%, #166534 100%); }
.page-hero--about      { background: linear-gradient(135deg, #0b1f3a 0%, #1c2e4a 60%, #1a5fb4 100%); }
.page-hero--contact    { background: linear-gradient(135deg, #0b1f3a 0%, #1c2e4a 60%, #1a5fb4 100%); }
.page-hero--bundles    { background: linear-gradient(135deg, #0b1f3a 0%, #3b1f0e 60%, #c2410c 100%); }
.page-hero--support    { background: linear-gradient(135deg, #0b1f3a 0%, #1c2e4a 60%, #1a5fb4 100%); }

/* Breadcrumbs */
.breadcrumbs { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.8125rem; color: rgba(255,255,255,0.6); }
.breadcrumbs a { color: rgba(255,255,255,0.6); transition: color var(--nl-transition); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs span[aria-current] { color: rgba(255,255,255,0.9); }

/* =========================================================
   TRUST BAR
   ========================================================= */
.trust-bar { background: var(--nl-white); border-top: 1px solid var(--nl-gray-100); border-bottom: 1px solid var(--nl-gray-100); padding: 1.1rem 0; }
.trust-bar__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.55rem;
  flex-wrap: nowrap;
}
.trust-bar__divider {
  width: 1px;
  height: auto;
  min-height: 56px;
  background: linear-gradient(to bottom, transparent 0%, rgba(12, 42, 84, 0.10) 18%, rgba(12, 42, 84, 0.16) 50%, rgba(12, 42, 84, 0.10) 82%, transparent 100%);
  flex-shrink: 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 1rem;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 14px;
}
.trust-item__icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: var(--nl-blue-50, #e8f1fb);
  color: var(--nl-blue-600, #1a5fb4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-item__icon svg {
  width: 18px;
  height: 18px;
}
.trust-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
}
.trust-item__label {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--nl-gray-900);
  white-space: nowrap;
  line-height: 1.18;
  letter-spacing: -0.012em;
}
.trust-item__sub {
  font-size: 0.76rem;
  color: var(--nl-gray-500);
  white-space: normal;
  line-height: 1.28;
  font-weight: 500;
  display: block;
  max-width: 100%;
}

@media (min-width: 1181px) and (max-width: 1320px) {
  .trust-bar { padding: 1rem 0; }
  .trust-bar__inner { gap: 0.4rem; }
  .trust-item {
    padding: 0.5rem 0.8rem;
    gap: 0.7rem;
  }

  .trust-item__label {
    font-size: 0.84rem;
  }

  .trust-item__sub {
    font-size: 0.7rem;
  }
}

@media (max-width: 1180px) {
  .trust-bar__inner {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .trust-bar__divider { display: none; }
  .trust-item { flex: 0 0 auto; padding: 0.55rem 0.85rem; }
}

@media (max-width: 640px) {
  .trust-bar__inner { justify-content: flex-start; }
  .trust-item { width: 100%; padding: 0.55rem 0.35rem; }
}

/* =========================================================
   SERVICE CARDS
   ========================================================= */
.service-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 960px) { .service-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .service-cards-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--nl-white);
  border: 1.5px solid var(--nl-gray-200);
  border-radius: var(--nl-radius-xl);
  padding: 0 1.875rem 1.875rem;
  display: flex; flex-direction: column;
  transition: all var(--nl-transition-slow);
  position: relative; overflow: hidden;
}
.service-card > :not(.service-card__icon-wrap) {
  padding-left: 0;
  padding-right: 0;
}
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--nl-blue-600); opacity: 0; transition: opacity var(--nl-transition);
}
.service-card:hover { box-shadow: var(--nl-shadow-xl); border-color: var(--nl-blue-200); transform: translateY(-5px); }
.service-card:hover::before { opacity: 1; }
.service-card--accent::before { background: var(--nl-accent); }
.service-card--teal::before { background: var(--nl-teal); }

.service-card__icon-wrap {
  width: calc(100% + 3.75rem);
  margin: 0 -1.875rem 1.5rem;
  border-radius: calc(var(--nl-radius-xl) - 2px) calc(var(--nl-radius-xl) - 2px) 0 0;
  background: #eef5ff;
  display: flex; flex-direction: column; align-items: stretch; justify-content: stretch;
  color: var(--nl-blue-700);
  border: 0;
  transition: all var(--nl-transition);
  overflow: hidden;
  min-height: 12rem;
  position: relative;
}
.service-card__icon-wrap .card-photo {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  height: 100%;
  overflow: hidden;
}
.service-card__icon-wrap .card-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
  border-radius: 0;
}
.service-card__icon-wrap svg { display: none; }
.service-card:hover .service-card__icon-wrap { border-color: var(--nl-blue-400); box-shadow: none; }
.service-card--accent .service-card__icon-wrap,
.service-card__icon-wrap--orange { border-color: #ffd7bf; }
.service-card--accent:hover .service-card__icon-wrap,
.service-card:hover .service-card__icon-wrap--orange { border-color: var(--nl-accent); box-shadow: none; }
.service-card__icon-wrap--teal { border-color: #c9eaf4; }
.service-card:hover .service-card__icon-wrap--teal { border-color: var(--nl-teal); box-shadow: none; }
.service-card__icon-wrap--slate { border-color: #d8e0ea; }
.service-card:hover .service-card__icon-wrap--slate { border-color: #35516f; box-shadow: none; }

.service-card__title { font-size: 1.15rem; font-weight: 800; color: var(--nl-gray-900); margin-bottom: 0.625rem; }
.service-card__desc { font-size: 0.9rem; color: var(--nl-gray-600); line-height: 1.65; flex: 1; margin-bottom: 1.5rem; }
.service-card__features { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.service-card__features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--nl-gray-700); padding: 0.3rem 0; border-bottom: 1px solid var(--nl-gray-50); }
.service-card__features li svg { width: 0.9rem; height: 0.9rem; color: var(--nl-green); flex-shrink: 0; margin-top: 0.2rem; }
.service-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.9rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  background: var(--nl-blue-700);
  border: 1px solid var(--nl-blue-700);
  border-radius: 999px;
  margin-top: auto;
  text-align: center;
  box-shadow: 0 10px 24px rgba(10, 44, 92, 0.14);
  transition: background var(--nl-transition), border-color var(--nl-transition), transform var(--nl-transition), box-shadow var(--nl-transition), gap var(--nl-transition);
}
.service-card__link svg { flex-shrink: 0; }
.service-card__link:hover {
  color: #fff;
  background: var(--nl-blue-800);
  border-color: var(--nl-blue-800);
  gap: 0.7rem;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(10, 44, 92, 0.18);
}

/* =========================================================
   FEATURE ITEMS (icon + text row)
   ========================================================= */
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.feature-list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: var(--nl-gray-700); line-height: 1.5; }
.feature-list li svg { width: 1rem; height: 1rem; color: var(--nl-green); flex-shrink: 0; margin-top: 0.2rem; }

/* Large feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .feature-grid { grid-template-columns: 1fr; } }

.feature-item { text-align: center; padding: 2rem 1.25rem; }
.feature-item__icon {
  width: 5rem; height: 5rem; margin: 0 auto 1.25rem;
  background: var(--nl-blue-50); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--nl-blue-600); border: 2px solid var(--nl-blue-100);
}
.feature-item__icon svg { width: 2.25rem; height: 2.25rem; }
.feature-item__title { font-size: 1rem; font-weight: 700; color: var(--nl-gray-900); margin-bottom: 0.5rem; }
.feature-item__text { font-size: 0.875rem; color: var(--nl-gray-600); line-height: 1.65; }

/* Dark feature items */
.feature-item--dark .feature-item__icon { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: var(--nl-blue-300); }
.feature-item--dark .feature-item__title { color: #fff; }
.feature-item--dark .feature-item__text { color: rgba(255,255,255,0.68); }

/* =========================================================
   CONTENT SPLIT
   ========================================================= */
.content-split { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.content-split--reverse .content-split__visual { order: -1; }
@media (max-width: 900px) { .content-split { grid-template-columns: 1fr; gap: 3rem; } .content-split--reverse .content-split__visual { order: 0; } }
.content-split__text h2 { font-size: clamp(1.75rem, 3.5vw, 2.375rem); font-weight: 800; margin-bottom: 1rem; }
.content-split__text p { margin-bottom: 1rem; font-size: 0.9375rem; line-height: 1.75; }
.content-split__visual { position: relative; }
.content-split__visual--icon { display: flex; align-items: center; justify-content: center; }
.big-feature-icon {
  width: 280px; height: 280px; border-radius: 50%;
  background: var(--nl-blue-50); display: flex; align-items: center; justify-content: center;
  color: var(--nl-blue-500); border: 2px solid var(--nl-blue-100);
}
.big-feature-icon svg { width: 160px; height: 160px; }

/* Service image */
.service-image-wrap {
  border-radius: var(--nl-radius-xl); overflow: hidden;
  box-shadow: var(--nl-shadow-xl); aspect-ratio: 4/3;
  background: var(--nl-blue-50);
  display: flex; align-items: center; justify-content: center;
}
.service-image-wrap svg { width: 60%; height: 60%; color: var(--nl-blue-200); }

/* =========================================================
   PLAN CARDS
   ========================================================= */
.plan-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .plan-cards-grid { grid-template-columns: 1fr; } }

.plan-card {
  background: var(--nl-white); border: 2px solid var(--nl-gray-200);
  border-radius: var(--nl-radius-xl); padding: 2rem 1.875rem;
  position: relative; display: flex; flex-direction: column;
  transition: all var(--nl-transition);
}
.plan-card:hover { box-shadow: var(--nl-shadow-lg); }
.plan-card--featured { border-color: var(--nl-blue-600); box-shadow: var(--nl-shadow-lg); }
.plan-card__badge {
  position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%);
  background: var(--nl-blue-600); color: #fff; font-size: 0.72rem; font-weight: 800;
  padding: 0.25rem 1rem; border-radius: 999px; white-space: nowrap; letter-spacing: 0.04em;
}
.plan-card__badge--accent { background: var(--nl-accent); }
.plan-card__name { font-size: 1rem; font-weight: 700; color: var(--nl-gray-700); margin-bottom: 0.375rem; }
.plan-card__price { font-size: 2.5rem; font-weight: 900; color: var(--nl-gray-900); line-height: 1; margin-bottom: 0.25rem; }
.plan-card__price sup { font-size: 1.25rem; vertical-align: super; }
.plan-card__price span { font-size: 1rem; font-weight: 500; color: var(--nl-gray-500); }
.plan-card__period { font-size: 0.8rem; color: var(--nl-gray-500); margin-bottom: 1.5rem; }
.plan-card__divider { border: none; border-top: 1px solid var(--nl-gray-100); margin: 1.25rem 0; }
.plan-card__features { list-style: none; padding: 0; margin: 0 0 1.75rem; flex: 1; }
.plan-card__features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--nl-gray-700); padding: 0.4rem 0; }
.plan-card__features li svg { width: 0.9rem; height: 0.9rem; color: var(--nl-green); flex-shrink: 0; margin-top: 0.15rem; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band { background: linear-gradient(135deg, var(--nl-blue-900) 0%, var(--nl-blue-700) 100%); padding: 1.8rem 0; margin-top: 1.25rem; }
.cta-band--accent { background: linear-gradient(135deg, #7c2d12 0%, var(--nl-accent) 100%); }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.75rem 2rem; }
.cta-band__text { max-width: 42rem; }
.cta-band__title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: #fff; margin-bottom: 0.35rem; line-height: 1.1; }
.cta-band__subtitle { color: rgba(255,255,255,0.86); font-size: 1.0625rem; margin: 0; }
.cta-band__meta { color: rgba(255,255,255,0.66); font-size: 0.9rem; margin-top: 0.45rem; }
.cta-band__actions { display: flex; gap: 0.9rem; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.cta-band__actions .btn { min-height: 2.7rem; padding: 0.78rem 1.35rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.7rem; white-space: nowrap; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--nl-blue-900); color: rgba(255,255,255,1); }
.footer-main { padding: 2.15rem 0 1.85rem; }
.footer-grid { display: grid; grid-template-columns: 1.42fr 1.05fr 1.05fr 1fr 1.12fr; gap: 2.25rem; align-items: start; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand__logo { margin-bottom: 0.7rem; }
.footer-brand__logo img, .footer-brand__logo-img { height: 116px; width: auto; opacity: 1; display: block; }
.footer-brand p { font-size: 0.845rem; line-height: 1.72; max-width: 285px; margin-bottom: 0; color: rgba(255,255,255,0.82); }
.footer-contact-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.footer-contact-list li a { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.865rem; line-height: 1.45; color: rgba(255,255,255,0.9); transition: color var(--nl-transition); }
.footer-contact-list li a:hover { color: #fff; }
.footer-contact-list li svg { width: 0.92rem; height: 0.92rem; flex-shrink: 0; opacity: 0.92; margin-top: 0.16rem; }
.footer-col__title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 0.95rem; }
.footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.footer-links a { font-size: 0.865rem; color: rgba(255,255,255,0.9); transition: color var(--nl-transition); }
.footer-links a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding: 1.15rem 0 1.35rem; }
.footer-bottom__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-bottom__copy { font-size: 0.8125rem; color: rgba(255,255,255,0.82); }
.footer-bottom__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-bottom__links a { font-size: 0.8rem; color: rgba(255,255,255,0.88); transition: color var(--nl-transition); }
.footer-bottom__links a:hover { color: rgba(255,255,255,0.8); }

/* =========================================================
   COMPARE TABLE
   ========================================================= */
.compare-table-wrap { overflow-x: auto; border-radius: var(--nl-radius-xl); box-shadow: var(--nl-shadow-md); border: 1px solid var(--nl-gray-200); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--nl-white); }
.compare-table thead tr { background: var(--nl-blue-900); color: #fff; }
.compare-table th { padding: 1.125rem 1.25rem; text-align: center; font-weight: 700; font-size: 0.875rem; }
.compare-table th:first-child { text-align: left; }
.compare-table td { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--nl-gray-100); text-align: center; }
.compare-table td:first-child { text-align: left; font-weight: 600; color: var(--nl-gray-800); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:hover td { background: var(--nl-blue-50); }
.compare-table__us { background: rgba(26,95,180,0.04); }
.compare-win { color: var(--nl-blue-600); font-weight: 700; }
.compare-table__them { color: var(--nl-gray-500); }

/* =========================================================
   ACCORDION
   ========================================================= */
.accordion { display: flex; flex-direction: column; gap: 0; }
.accordion-item { border-bottom: 1px solid var(--nl-gray-200); }
.accordion-trigger {
  width: 100%; background: none; border: none; text-align: left;
  padding: 1.125rem 0; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; cursor: pointer;
  font-size: 0.9375rem; font-weight: 600; color: var(--nl-gray-900);
  transition: color var(--nl-transition);
}
.accordion-trigger:hover { color: var(--nl-blue-600); }
.accordion-icon { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--nl-blue-50); border: 1.5px solid var(--nl-blue-200); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--nl-blue-600); flex-shrink: 0; font-weight: 700; transition: all var(--nl-transition); }
.accordion-item.is-open .accordion-icon { background: var(--nl-blue-600); color: #fff; border-color: var(--nl-blue-600); }
.accordion-panel { padding: 0 0 1.25rem; }
.accordion-panel p { font-size: 0.9375rem; color: var(--nl-gray-600); line-height: 1.7; }

/* =========================================================
   CONTACT FORM
   ========================================================= */
.contact-form { background: var(--nl-white); padding: 2.5rem; border-radius: var(--nl-radius-xl); box-shadow: var(--nl-shadow-card); border: 1px solid var(--nl-gray-100); }
.form-row { display: flex; gap: 1.25rem; }
.form-row--2col > * { flex: 1; }
@media (max-width: 600px) { .form-row { flex-direction: column; gap: 0; } }
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--nl-gray-800); margin-bottom: 0.4rem; }
.required { color: #dc2626; }
.form-input {
  width: 100%; padding: 0.725rem 1rem; border: 1.5px solid var(--nl-gray-300);
  border-radius: var(--nl-radius-md); font-size: 0.9375rem; color: var(--nl-gray-900);
  background: var(--nl-white); transition: border-color var(--nl-transition); font-family: inherit;
}
.form-input:focus { outline: none; border-color: var(--nl-blue-500); box-shadow: 0 0 0 3px rgba(26,95,180,0.1); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' stroke='%230b1f3a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1rem; padding-right: 2.5rem; cursor: pointer; }
.form-textarea { min-height: 130px; resize: vertical; }
.form-error { display: none; color: #dc2626; font-size: 0.8125rem; margin-top: 0.25rem; }
.form-error:not(:empty) { display: block; }
.checkbox-label { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.875rem; color: var(--nl-gray-600); cursor: pointer; line-height: 1.5; }
.checkbox-label input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; accent-color: var(--nl-blue-600); cursor: pointer; }
.form-status { padding: 1rem 1.25rem; border-radius: var(--nl-radius-md); margin-bottom: 1rem; font-size: 0.9375rem; display: none; }
.form-status:not(:empty) { display: block; }
.form-status--success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.form-status--error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.btn-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; margin-left: 0.5rem; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 4rem; }
@media (max-width: 900px) { .contact-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .contact-info-grid { grid-template-columns: 1fr; } }
.contact-info-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem 1.5rem; text-align: center; transition: all var(--nl-transition); }
.contact-info-card:hover { box-shadow: var(--nl-shadow-md); border-color: var(--nl-blue-300); transform: translateY(-3px); }
.contact-info-card__icon { width: 3.25rem; height: 3.25rem; background: var(--nl-blue-50); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--nl-blue-600); border: 1.5px solid var(--nl-blue-100); }
.contact-info-card__icon svg { width: 1.375rem; height: 1.375rem; }
.contact-info-card__label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nl-blue-500); margin-bottom: 0.5rem; }
.contact-info-card__value { font-size: 1rem; font-weight: 700; color: var(--nl-blue-900); display: block; margin-bottom: 0.375rem; line-height: 1.4; }
a.contact-info-card__value:hover { color: var(--nl-blue-600); }
.contact-info-card__note { font-size: 0.8rem; color: var(--nl-gray-500); line-height: 1.5; margin: 0; }
.contact-layout { display: grid; grid-template-columns: 1fr 340px; gap: 4rem; align-items: start; }
@media (max-width: 1024px) { .contact-layout { grid-template-columns: 1fr; gap: 3rem; } }
.contact-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-sidebar-card { background: var(--nl-blue-50); border: 1px solid var(--nl-blue-100); border-radius: var(--nl-radius-lg); padding: 1.75rem; }
.contact-sidebar-card h3 { font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 1rem; }
.hours-list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.hours-list li { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--nl-blue-100); font-size: 0.875rem; }
.hours-list li:last-child { border-bottom: none; }
.quick-links { list-style: none; padding: 0; }
.quick-links li { margin-bottom: 0.5rem; }
.quick-links a { font-size: 0.9rem; color: var(--nl-blue-600); font-weight: 600; }
.quick-links a:hover { color: var(--nl-blue-800); }
.contact-map-section { height: 360px; background: linear-gradient(135deg, var(--nl-blue-800) 0%, var(--nl-blue-600) 100%); display: flex; align-items: center; justify-content: center; }
.contact-map-overlay { text-align: center; color: #fff; }
.contact-map-overlay p { font-size: 1.0625rem; margin-bottom: 1.5rem; opacity: 0.88; }

/* =========================================================
   SUPPORT PAGE
   ========================================================= */
.support-search-bar { display: flex; max-width: 560px; margin: 1.75rem auto 0; }
.support-search-input { flex: 1; padding: 0.75rem 1.1rem; border: none; border-radius: var(--nl-radius-md) 0 0 var(--nl-radius-md); font-size: 1rem; font-family: inherit; }
.support-search-input:focus { outline: none; }
.support-search-btn { padding: 0.75rem 1.1rem; background: var(--nl-accent); color: #fff; border: none; border-radius: 0 var(--nl-radius-md) var(--nl-radius-md) 0; cursor: pointer; }
.support-ribbon { background: var(--nl-blue-50); border-bottom: 1px solid var(--nl-blue-100); padding: 0.75rem 0; }
.support-ribbon__inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.875rem; }
.support-ribbon__label { font-weight: 700; color: var(--nl-blue-900); }
.support-ribbon__link { color: var(--nl-blue-600); font-weight: 600; display: flex; align-items: center; gap: 0.375rem; }
.support-ribbon__sep { color: var(--nl-gray-300); }
.support-ribbon__badge { background: var(--nl-blue-600); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.625rem; border-radius: 999px; }
.support-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .support-category-grid { grid-template-columns: repeat(2, 1fr); } }
.support-category-card { display: flex; flex-direction: column; background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem 1.5rem; text-decoration: none; color: inherit; transition: all var(--nl-transition); }
.support-category-card:hover { box-shadow: var(--nl-shadow-lg); border-color: var(--nl-blue-400); transform: translateY(-4px); }
.support-category-card__icon { width: 3rem; height: 3rem; background: var(--nl-blue-50); border-radius: var(--nl-radius-md); display: flex; align-items: center; justify-content: center; color: var(--nl-blue-600); margin-bottom: 1rem; border: 1px solid var(--nl-blue-100); }
.support-category-card__icon svg { width: 1.5rem; height: 1.5rem; }
.support-category-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--nl-gray-900); }
.support-category-card p { font-size: 0.85rem; color: var(--nl-gray-500); flex: 1; margin-bottom: 1rem; line-height: 1.6; }
.support-category-card__arrow { font-size: 1rem; color: var(--nl-blue-500); font-weight: 700; }

/* Guide Tabs */
.guides-tabs, .bundle-tabs { margin-top: 2.5rem; }
.guides-tab-nav, .bundle-tab-nav { display: flex; gap: 0.375rem; border-bottom: 2px solid var(--nl-gray-200); margin-bottom: 2rem; }
.guide-tab, .bundle-tab { padding: 0.625rem 1.25rem; background: none; border: none; font-size: 0.9375rem; font-weight: 600; color: var(--nl-gray-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--nl-transition); }
.guide-tab:hover, .bundle-tab:hover { color: var(--nl-blue-600); }
.guide-tab.active, .bundle-tab.active { color: var(--nl-blue-600); border-bottom-color: var(--nl-blue-600); }
.guide-panel, .bundle-tab-panel { }
.guide-list { display: flex; flex-direction: column; }
.guide-item { display: flex; align-items: center; gap: 1.25rem; padding: 1.125rem 0; border-bottom: 1px solid var(--nl-gray-100); }
.guide-item:last-child { border-bottom: none; }
.guide-item__icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; background: var(--nl-blue-50); border-radius: var(--nl-radius-md); display: flex; align-items: center; justify-content: center; color: var(--nl-blue-600); }
.guide-item__icon svg { width: 1.1rem; height: 1.1rem; }
.guide-item__content { flex: 1; }
.guide-item__content h4 { font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.2rem; color: var(--nl-gray-900); }
.guide-item__content p { font-size: 0.8125rem; color: var(--nl-gray-500); margin: 0; }
.guide-item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; flex-shrink: 0; }
.guide-time { font-size: 0.75rem; color: var(--nl-gray-400); display: flex; align-items: center; gap: 0.3rem; }
.guide-btn { font-size: 0.8125rem; font-weight: 700; color: var(--nl-blue-600); }
.guide-btn:hover { color: var(--nl-blue-800); }

/* FAQ */
.faq-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
@media (max-width: 900px) { .faq-categories { grid-template-columns: 1fr; } }
.faq-category__title { display: flex; align-items: center; gap: 0.625rem; font-size: 1rem; font-weight: 700; color: var(--nl-blue-800); margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--nl-blue-100); }
.faq-category__title svg { width: 1.125rem; height: 1.125rem; }

/* Troubleshoot */
.troubleshoot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; margin-bottom: 3rem; }
@media (max-width: 768px) { .troubleshoot-grid { grid-template-columns: 1fr; } }
.troubleshoot-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem; }
.troubleshoot-card__header { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.troubleshoot-card__icon { width: 2.5rem; height: 2.5rem; background: var(--nl-blue-50); border-radius: var(--nl-radius-md); display: flex; align-items: center; justify-content: center; color: var(--nl-blue-600); }
.troubleshoot-card__icon svg { width: 1.25rem; height: 1.25rem; }
.troubleshoot-card__header h3 { font-size: 1rem; font-weight: 700; color: var(--nl-gray-900); }
.troubleshoot-steps { padding-left: 1.25rem; margin: 0; }
.troubleshoot-steps li { font-size: 0.875rem; color: var(--nl-gray-700); padding: 0.3rem 0; line-height: 1.6; }
.troubleshoot-cta { text-align: center; padding: 2.5rem; background: var(--nl-blue-50); border-radius: var(--nl-radius-xl); border: 1px solid var(--nl-blue-100); }
.troubleshoot-cta p { font-size: 1.0625rem; color: var(--nl-blue-900); margin-bottom: 1rem; font-weight: 600; }
.troubleshoot-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Downloads */
.downloads-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 768px) { .downloads-grid { grid-template-columns: 1fr; } }
.download-item { display: flex; align-items: center; gap: 1rem; padding: 1.125rem 1.25rem; background: var(--nl-white); border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-lg); transition: all var(--nl-transition); }
.download-item:hover { box-shadow: var(--nl-shadow-sm); border-color: var(--nl-blue-200); }
.download-item__icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; background: var(--nl-blue-50); border-radius: var(--nl-radius-md); display: flex; align-items: center; justify-content: center; color: var(--nl-blue-600); }
.download-item__icon svg { width: 1rem; height: 1rem; }
.download-item__content { flex: 1; }
.download-item__cat { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nl-blue-400); margin-bottom: 0.15rem; }
.download-item__content h4 { font-size: 0.875rem; font-weight: 600; color: var(--nl-gray-900); margin: 0 0 0.15rem; }
.download-item__meta { font-size: 0.75rem; color: var(--nl-gray-400); }
.download-item__btn { width: 2rem; height: 2rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--nl-blue-500); border-radius: 50%; transition: all var(--nl-transition); }
.download-item__btn:hover { background: var(--nl-blue-50); color: var(--nl-blue-700); }
.download-item__btn svg { width: 1rem; height: 1rem; }

/* Cancellation box */
.cancellation-info-box { background: var(--nl-blue-50); border: 1px solid var(--nl-blue-100); border-radius: var(--nl-radius-xl); padding: 2rem; }
.cancellation-info-box h4 { font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-800); margin-bottom: 0.5rem; }
.cancellation-info-box p { font-size: 0.875rem; color: var(--nl-gray-700); margin-bottom: 1rem; line-height: 1.6; }
.cancellation-info-box hr { border: none; border-top: 1px solid var(--nl-blue-200); margin: 1rem 0; }

/* =========================================================
   BUNDLES PAGE
   ========================================================= */
.bundle-benefits-bar { background: var(--nl-blue-700); color: #fff; padding: 1rem 0; }
.bundle-benefits-bar__inner { display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.bundle-benefit { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.bundle-benefit svg { width: 1rem; height: 1rem; opacity: 0.85; }
.bundle-tab-intro { font-size: 1rem; color: var(--nl-gray-600); margin-bottom: 2.5rem; }
.bundle-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.bundle-plan-grid--double { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto; }
@media (max-width: 900px) { .bundle-plan-grid, .bundle-plan-grid--double { grid-template-columns: 1fr; } }
.bundle-plan-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem; position: relative; display: flex; flex-direction: column; transition: all var(--nl-transition); }
.bundle-plan-card:hover { box-shadow: var(--nl-shadow-lg); border-color: var(--nl-blue-300); }
.bundle-plan-card--featured { border-color: var(--nl-blue-600); box-shadow: var(--nl-shadow-md); }
.bundle-plan-card__badge { position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%); background: var(--nl-blue-600); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 0.25rem 1rem; border-radius: 999px; white-space: nowrap; }
.bundle-plan-card__badge--gold { background: #d97706; }
.bundle-plan-card__header { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--nl-gray-100); }
.bundle-plan-card__header h3 { font-size: 1.2rem; font-weight: 800; color: var(--nl-gray-900); margin-bottom: 0.4rem; }
.bundle-plan-card__header p { font-size: 0.875rem; color: var(--nl-gray-600); line-height: 1.6; margin: 0; }
.bundle-plan-card__includes { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.bundle-plan-card__includes li { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.4rem 0; font-size: 0.875rem; color: var(--nl-gray-700); border-bottom: 1px solid var(--nl-gray-50); }
.bundle-plan-card__includes li svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; color: var(--nl-blue-500); margin-top: 0.15rem; }
.bundle-plan-card__note { font-size: 0.75rem; color: var(--nl-gray-400); text-align: center; margin-top: 0.75rem; }
.btn--block { width: 100%; justify-content: center; }
.biz-bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .biz-bundle-grid { grid-template-columns: 1fr; } }
.biz-bundle-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--nl-radius-xl); padding: 2.5rem 2rem; color: #fff; position: relative; transition: all var(--nl-transition); }
.biz-bundle-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); }
.biz-bundle-card--featured { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); }
.biz-bundle-card__badge { position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%); background: var(--nl-blue-400); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 0.25rem 1rem; border-radius: 999px; }
.biz-bundle-card__icon { width: 2.75rem; height: 2.75rem; background: rgba(255,255,255,0.12); border-radius: var(--nl-radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.biz-bundle-card__icon svg { width: 1.25rem; height: 1.25rem; }
.biz-bundle-card h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.625rem; }
.biz-bundle-card > p { font-size: 0.875rem; opacity: 0.8; line-height: 1.6; margin-bottom: 1.5rem; }
.biz-bundle-card__list { list-style: none; padding: 0; margin: 0 0 2rem; }
.biz-bundle-card__list li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.375rem 0; font-size: 0.875rem; opacity: 0.88; border-bottom: 1px solid rgba(255,255,255,0.07); }
.biz-bundle-card__list li svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--nl-blue-300); margin-top: 0.15rem; }
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .promo-grid { grid-template-columns: 1fr; } }
.promo-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2.5rem 2rem; text-align: center; position: relative; }
.promo-card__ribbon { position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%); background: #059669; color: #fff; font-size: 0.72rem; font-weight: 800; padding: 0.25rem 1rem; border-radius: 999px; }
.promo-card__icon { width: 3rem; height: 3rem; background: var(--nl-blue-50); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--nl-blue-600); }
.promo-card__icon svg { width: 1.5rem; height: 1.5rem; }
.promo-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--nl-gray-900); margin-bottom: 0.625rem; }
.promo-card > p { font-size: 0.875rem; color: var(--nl-gray-600); line-height: 1.7; margin-bottom: 0.75rem; }
.promo-card__terms { font-size: 0.75rem !important; color: var(--nl-gray-400) !important; margin-bottom: 1.5rem !important; }
.custom-bundle-cta { display: grid; grid-template-columns: 1fr 360px; gap: 5rem; align-items: center; }
@media (max-width: 1024px) { .custom-bundle-cta { grid-template-columns: 1fr; gap: 3rem; } }
.custom-bundle-cta h2 { font-size: 2rem; font-weight: 800; color: var(--nl-gray-900); margin-bottom: 1rem; }
.custom-bundle-cta p { font-size: 1rem; color: var(--nl-gray-600); line-height: 1.7; margin-bottom: 1rem; }
.custom-bundle-cta__points { list-style: none; padding: 0; margin: 0 0 2rem; }
.custom-bundle-cta__points li { display: flex; align-items: center; gap: 0.625rem; padding: 0.35rem 0; font-size: 0.9rem; color: var(--nl-gray-700); }
.custom-bundle-cta__points li svg { width: 1rem; height: 1rem; color: var(--nl-blue-500); }
.custom-bundle-cta__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.bundle-builder-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem; box-shadow: var(--nl-shadow-lg); }
.bundle-builder-card h4 { font-size: 1rem; font-weight: 800; color: var(--nl-blue-900); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--nl-gray-100); }
.bundle-builder-service { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0; border-bottom: 1px solid var(--nl-gray-100); }
.bundle-builder-service svg { width: 1.1rem; height: 1.1rem; color: var(--nl-blue-500); }
.bundle-builder-service span:nth-child(2) { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--nl-blue-900); }
.toggle-switch { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track { position: absolute; inset: 0; background: var(--nl-gray-300); border-radius: 999px; cursor: not-allowed; }
.toggle-track::before { content: ''; position: absolute; width: 1.1rem; height: 1.1rem; background: #fff; border-radius: 50%; top: 50%; left: 0.2rem; transform: translateY(-50%); transition: transform var(--nl-transition); }
.toggle-switch input:checked + .toggle-track { background: var(--nl-blue-600); }
.toggle-switch input:checked + .toggle-track::before { transform: translate(1.25rem, -50%); }
.bundle-builder-cta { margin-top: 1.5rem; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.value-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem; text-align: center; transition: all var(--nl-transition); }
.value-card:hover { box-shadow: var(--nl-shadow-md); border-color: var(--nl-blue-200); }
.value-card__icon { font-size: 2.25rem; margin-bottom: 1rem; }
.value-card__title { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.value-card__text { font-size: 0.875rem; color: var(--nl-gray-600); line-height: 1.6; }

/* =========================================================
   RESIDENTIAL / BUSINESS HOMEPAGES
   ========================================================= */
.res-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 900px) { .res-services-grid { grid-template-columns: 1fr; } }
.res-service-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 0 2rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; transition: all var(--nl-transition); overflow: hidden; }
.res-service-card > :not(.res-service-card__icon) {
  padding-left: 0;
  padding-right: 0;
}
.res-service-card:hover { box-shadow: var(--nl-shadow-xl); transform: translateY(-6px); border-color: var(--nl-blue-200); }
.res-service-card--internet { border-top: 4px solid var(--nl-blue-600); }
.res-service-card--phone { border-top: 4px solid var(--nl-teal); }
.res-service-card--tv { border-top: 4px solid #6366f1; }
.res-service-card__icon {
  color: var(--nl-blue-600);
  width: calc(100% + 4rem);
  margin: 0 -2rem 0.25rem;
  border-radius: calc(var(--nl-radius-xl) - 2px) calc(var(--nl-radius-xl) - 2px) 0 0;
  overflow: hidden;
  border: 0;
  background: #f8fbff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 11rem;
  position: relative;
}
.res-service-card__icon .card-photo {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
}
.res-service-card__icon .card-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  border-radius: 0;
}
.res-service-card__icon svg { display: none; }
.res-service-card h3 { font-size: 1.3rem; font-weight: 800; color: var(--nl-gray-900); margin: 0; }
.res-service-card p { font-size: 0.9375rem; color: var(--nl-gray-600); line-height: 1.7; margin: 0; }
.res-service-card__features { list-style: none; padding: 0; margin: 0; flex: 1; }
.res-service-card__features li { font-size: 0.875rem; color: var(--nl-gray-700); padding: 0.3rem 0; border-bottom: 1px solid var(--nl-gray-50); }
.bundle-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: end; }
@media (max-width: 768px) { .bundle-highlights { grid-template-columns: 1fr; align-items: stretch; } }
.bundle-highlight-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 0; text-align: center; position: relative; transition: all var(--nl-transition); overflow: hidden; min-height: 260px; display: flex; flex-direction: column; }
.bundle-highlight-card:hover { box-shadow: var(--nl-shadow-lg); transform: translateY(-4px); }
.bundle-highlight-card--featured { border-color: var(--nl-blue-600); box-shadow: var(--nl-shadow-md); transform: translateY(-18px); }
.bundle-highlight-card--featured:hover { transform: translateY(-22px); }
@media (max-width: 768px) { .bundle-highlight-card--featured, .bundle-highlight-card--featured:hover { transform: translateY(0); } }
.bundle-highlight-card__badge { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); background: var(--nl-blue-600); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 0.25rem 1rem; border-radius: 999px; z-index: 3; white-space: nowrap; }
.bundle-highlight-card__icons { font-size: 2rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.bundle-highlight-card h3 { font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 100%; pointer-events: none; }
.bundle-highlight-card p { font-size: 0.875rem; color: var(--nl-gray-600); margin-bottom: 1.5rem; line-height: 1.6; padding: 0 1.5rem; }
.bundle-highlight-card .btn { margin-bottom: 1.75rem; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
.why-card { text-align: center; padding: 2rem 1.5rem; }
.why-card__icon { width: 4.5rem; height: 4.5rem; background: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--nl-blue-300); border: 1.5px solid rgba(255,255,255,0.1); }
.why-card__icon svg { width: 2rem; height: 2rem; }
.why-card h3 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.why-card p { font-size: 0.875rem; color: rgba(255,255,255,0.65); line-height: 1.7; margin: 0; }
.biz-home-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .biz-home-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px) { .biz-home-services-grid { grid-template-columns: 1fr; } }
.biz-home-service-card { background: var(--nl-white); border: 1.5px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem 1.75rem; transition: all var(--nl-transition); }
.biz-home-service-card:hover { box-shadow: var(--nl-shadow-lg); border-color: var(--nl-blue-300); transform: translateY(-4px); }
.biz-home-service-card__icon { color: var(--nl-blue-600); margin-bottom: 1rem; }
.biz-home-service-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--nl-gray-900); margin-bottom: 0.5rem; }
.biz-home-service-card p { font-size: 0.875rem; color: var(--nl-gray-600); line-height: 1.6; margin-bottom: 1rem; }
.biz-home-service-card__link { font-weight: 700; color: var(--nl-blue-600); font-size: 0.9rem; }
.biz-home-service-card__link:hover { color: var(--nl-blue-800); }

/* =========================================================
   BACK TO TOP
   ========================================================= */
#back-to-top { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 900; width: 2.75rem; height: 2.75rem; background: var(--nl-blue-600); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--nl-shadow-lg); opacity: 0; transform: translateY(12px); pointer-events: none; transition: all 0.3s ease; font-size: 1.1rem; }
#back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#back-to-top:hover { background: var(--nl-blue-800); transform: translateY(-2px); }


@media (max-width: 1100px) {
  .site-topbar__inner {
    align-items: flex-start;
  }
  .site-topbar__left {
    width: 100%;
    justify-content: space-between;
  }
  .topbar-contact {
    gap: 0.85rem;
  }
}
@media (max-width: 768px) {
  .site-topbar {
    padding: 0.7rem 0;
  }
  .site-topbar__left,
  .site-topbar__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .section-switcher {
    width: 100%;
    justify-content: space-between;
  }
  .section-switcher__link {
    flex: 1;
    min-width: 0;
  }
  .topbar-contact,
  .topbar-links {
    justify-content: space-between;
  }
  .topbar-contact a,
  .topbar-links a {
    font-size: 0.76rem;
  }
  .nav-cta .btn--ghost {
    display: none;
  }
}
@media (max-width: 640px) {
  .topbar-contact,
  .topbar-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .site-header__inner {
    height: 100px;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .primary-nav { display: none; }
  .mobile-nav-toggle { display: block; }
  .nav-cta { margin-left: auto; }
}
@media (max-width: 768px) {
  .section { padding: 3.5rem 0; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
  .hero-service-showcase__track { min-height: 190px; }
  .hero-service-card { padding: 1.35rem 1.25rem; }
  .cta-band__inner { grid-template-columns: 1fr; text-align: center; }
  .cta-band__text { max-width: none; }
  .cta-band__actions { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; }
  .hero__stats { grid-template-columns: 1fr; }
  .hero-service-showcase { max-width: 100%; }
  .hero-service-showcase__track { min-height: 210px; }
  .page-hero__actions { flex-direction: column; }
}

/* =========================================================
   LOGO
   ========================================================= */
.site-logo__img { height: 100px; width: auto; object-fit: contain; display: block; }
.custom-logo { height: 100px; width: auto; display: block; }

/* nl_icon helper fallback */
.nl-icon { display: inline-flex; align-items: center; justify-content: center; }
.nl-icon svg { width: 1em; height: 1em; }

/* Path cards hover */
.path-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(11,31,58,0.35); }

/* Mobile nav parent item */
.mobile-nav-item--parent { border-bottom: 1px solid var(--nl-gray-100); }


/* =========================================================
   HEADER REFINEMENT + BELL-STYLE NAV LAYER
   ========================================================= */
.site-topbar {
  position: relative;
  z-index: 520;
}
.site-topbar__inner {
  min-height: 36px;
  justify-content: flex-start;
}
.topbar-links {
  gap: 0.75rem;
  margin-left: 1.35rem;
  justify-content: flex-start;
}
.toolbar-dropdown {
  position: relative;
}
.toolbar-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 36px;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  transition: all var(--nl-transition);
}
.toolbar-dropdown__toggle:hover,
.toolbar-dropdown.is-open .toolbar-dropdown__toggle {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
}
.toolbar-dropdown__label {
  color: rgba(255,255,255,0.82);
  font-weight: 600;
}
.toolbar-dropdown__value {
  color: #fff;
}
.toolbar-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 80px;
  padding: 0.25rem;
  border-radius: 10px;
  border: 1px solid var(--nl-gray-200);
  background: #fff;
  box-shadow: 0 12px 28px rgba(11,31,58,0.13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--nl-transition);
}
.toolbar-dropdown.is-open .toolbar-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.toolbar-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.38rem 0.7rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nl-gray-800);
  background: transparent;
}
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item,
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item:visited {
  color: var(--nl-gray-800);
}
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item:hover,
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item:focus-visible,
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item.is-active,
.topbar-links .toolbar-dropdown__menu .toolbar-dropdown__item.is-active:visited {
  background: var(--nl-blue-50);
  color: var(--nl-blue-700);
}

.site-header {
  z-index: 510;
}
.site-header__inner {
  height: 100px;
  min-height: 100px;
  gap: 1.25rem;
}
.site-logo__img,
.custom-logo {
  height: 74px;
  max-height: 74px;
  width: auto;
}
.primary-nav {
  justify-content: center;
  margin-left: -96px;
}
.nav-menu--section {
  gap: 0.1rem;
}
.nav-link {
  height: 94px;
  padding: 0 1rem;
  font-size: 0.95rem;
}
.nav-link--button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  font: inherit;
}

.nav-menu--section > .nav-item:last-child > .nav-link {
  transform: translateY(1px);
}
.nav-link--button:focus-visible,
.toolbar-dropdown__toggle:focus-visible,
.services-category:focus-visible,
.mobile-nav-parent-toggle:focus-visible {
  outline: 2px solid var(--nl-blue-500);
  outline-offset: 2px;
}
.nav-mega--services {
  width: 820px;
  padding: 0;
  overflow: hidden;
  border-top: 3px solid var(--nl-blue-600);
  border-radius: 0 0 20px 20px;
}
.services-mega {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  min-height: 400px;
}
.services-mega__sidebar {
  background: #f4f8ff;
  border-right: 1px solid rgba(178,194,214,0.35);
  padding: 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}
.services-mega__sidebar-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nl-blue-500);
  padding: 0 0.5rem 0.4rem;
  margin-bottom: 0.1rem;
}
.services-category {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  color: var(--nl-gray-800);
  cursor: pointer;
  transition: all 0.18s ease;
}
.services-category:hover,
.services-category.is-active {
  background: #fff;
  border-color: rgba(178,194,214,0.6);
  box-shadow: 0 4px 16px rgba(11,31,58,0.07);
}
.services-category__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.services-category:hover .services-category__icon,
.services-category.is-active .services-category__icon {
  transform: scale(1.06);
}
.services-category__icon svg {
  width: 21px;
  height: 21px;
}
.services-category[data-service-group="internet"] .services-category__icon {
  background: linear-gradient(135deg, #1e6fd9 0%, #185db5 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(30,111,217,0.30);
}
.services-category[data-service-group="phone"] .services-category__icon,
.services-category[data-service-group="voice"] .services-category__icon {
  background: linear-gradient(135deg, #0e9f82 0%, #0b8a6e 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(14,159,130,0.28);
}
.services-category[data-service-group="tv"] .services-category__icon {
  background: linear-gradient(135deg, #7c3aed 0%, #6028cc 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124,58,237,0.28);
}
.services-category[data-service-group="bundles"] .services-category__icon {
  background: linear-gradient(135deg, #e07b1a 0%, #c46613 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(224,123,26,0.28);
}
.services-category[data-service-group="data-centre"] .services-category__icon {
  background: linear-gradient(135deg, #1a5fb4 0%, #144d96 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(26,95,180,0.28);
}
.services-category[data-service-group="web-solutions"] .services-category__icon {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(8,145,178,0.26);
}
.services-category__text {
  display: flex;
  flex-direction: column;
}
.services-category__text strong {
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--nl-gray-900);
}
.services-category__text small {
  margin-top: 0.18rem;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--nl-gray-500);
}
.services-mega__panels {
  position: relative;
  padding: 1.25rem 1.4rem 1.25rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.services-panel {
  display: none;
  flex-direction: column;
  height: 100%;
}
.services-panel.is-active {
  display: flex;
}
.services-panel__header {
  padding-bottom: 0.85rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(178,194,214,0.4);
}
.services-panel__header p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--nl-blue-900);
}
.services-panel__header span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.79rem;
  color: var(--nl-gray-500);
}
.services-panel__submenu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  flex: 1;
}
.services-panel__submenu a {
  min-height: 88px;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(178,194,214,0.45);
  background: #fafcff;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
}
.services-panel__submenu a:hover {
  border-color: var(--nl-blue-300);
  background: #fff;
  box-shadow: 0 6px 20px rgba(11,31,58,0.08);
  transform: translateY(-2px);
}
.services-panel__submenu-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--nl-gray-900);
}
.services-panel__submenu-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nl-blue-500);
  flex-shrink: 0;
}
.services-panel__submenu small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--nl-gray-500);
}
.services-panel__promo {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: linear-gradient(90deg, #eef5ff 0%, #f4f0ff 100%);
  border: 1px solid rgba(178,194,214,0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}
.services-panel__promo-text {
  font-size: 0.78rem;
  color: var(--nl-blue-800);
  font-weight: 600;
}
.services-panel__promo-text span {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--nl-gray-500);
  margin-top: 0.1rem;
}
.services-panel__promo-link {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--nl-blue-600);
  white-space: nowrap;
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--nl-blue-300);
  transition: all 0.15s ease;
}
.services-panel__promo-link:hover {
  background: var(--nl-blue-600);
  color: #fff;
  border-color: var(--nl-blue-600);
}
.nav-cta {
  gap: 0.75rem;
}
.nav-cta .btn--sm {
  min-height: 44px;
  padding-inline: 1.1rem;
}
.mobile-nav-logo {
  height: 52px;
  width: auto;
}
.mobile-nav-phone {
  text-align: center;
  font-size: 0.9rem;
  color: var(--nl-blue-600);
  font-weight: 700;
}
.mobile-nav-submenu-group + .mobile-nav-submenu-group {
  margin-top: 0.85rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--nl-gray-100);
}
.mobile-nav-submenu-heading {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nl-blue-600);
  margin-bottom: 0.35rem;
}

@media (max-width: 1180px) {
  .primary-nav {
    margin-left: -48px;
  }
  .nav-mega--services {
    width: 700px;
  }
}

@media (max-width: 1100px) {
  .primary-nav {
    margin-left: 0;
  }
  .topbar-links {
    width: 100%;
    justify-content: flex-end;
  }
  .services-panel__submenu {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .site-topbar__left,
  .site-topbar__inner {
    gap: 0.8rem;
  }
  .topbar-links {
    width: 100%;
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
  }
  .topbar-contact--inline {
    width: 100%;
    justify-content: flex-start;
    padding: 0.15rem 0;
  }
  .topbar-contact--inline a + a {
    padding-left: 0.8rem;
  }
  .toolbar-dropdown,
  .toolbar-dropdown__toggle {
    width: 100%;
  }
  .toolbar-dropdown__toggle {
    justify-content: space-between;
  }
  .toolbar-dropdown__menu {
    position: static;
    min-width: 0;
    margin-top: 0.55rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none;
    border-radius: 14px;
  }
  .toolbar-dropdown.is-open .toolbar-dropdown__menu {
    display: block;
  }
  .site-header__inner {
    height: 100px;
    min-height: 100px;
  }
  .site-logo__img,
  .custom-logo {
    height: 66px;
    max-height: 66px;
  }
}


/* =========================================================
   HEADER UPDATE: compact locale selectors + support dropdown
   ========================================================= */
.topbar-links {
  gap: 0.55rem;
}
.topbar-contact--inline {
  order: 1;
  gap: 0.75rem;
}
.topbar-contact--inline a {
  font-size: 0.78rem;
}
.topbar-contact--inline a + a {
  padding-left: 0.85rem;
}
.toolbar-dropdown {
  order: 2;
}
.toolbar-dropdown__toggle {
  min-height: 30px;
  padding: 0.32rem 0.58rem;
  gap: 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.toolbar-dropdown__value {
  font-size: 0.72rem;
  font-weight: 800;
}
.toolbar-dropdown__menu--compact {
  min-width: 88px;
  padding: 0.35rem;
}
.toolbar-dropdown__item--compact {
  justify-content: center;
  padding: 0.52rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.nav-mega--simple {
  min-width: 220px;
  padding: 0.4rem;
  left: 0;
}

/* ── Rich dropdown (About Us & Support) ── */
.nav-mega--rich {
  min-width: 340px;
  padding: 0;
  left: 0;
  overflow: hidden;
  border-top: 3px solid var(--nl-blue-600);
  border-radius: 0 0 20px 20px;
}
.rich-dropdown {
  display: flex;
  flex-direction: column;
}
.rich-dropdown__header {
  padding: 1rem 1.25rem 0.85rem;
  border-bottom: 1px solid rgba(178,194,214,0.35);
  background: #f4f8ff;
}
.rich-dropdown__header-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nl-blue-500);
  margin-bottom: 0.2rem;
}
.rich-dropdown__header-desc {
  display: block;
  font-size: 0.79rem;
  color: var(--nl-gray-500);
  line-height: 1.4;
}
.rich-dropdown__items {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.6rem;
  background: #fff;
}
.rich-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.75rem;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.18s ease;
}
.rich-dropdown__item:hover {
  background: #f4f8ff;
  border-color: rgba(178,194,214,0.5);
  box-shadow: 0 3px 12px rgba(11,31,58,0.06);
}
.rich-dropdown__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.rich-dropdown__item:hover .rich-dropdown__icon {
  transform: scale(1.07);
}
.rich-dropdown__icon svg {
  width: 19px;
  height: 19px;
}

/* Icon colors per item */
.rich-dropdown__item--blue .rich-dropdown__icon {
  background: linear-gradient(135deg, #1e6fd9 0%, #185db5 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(30,111,217,0.28);
}
.rich-dropdown__item--teal .rich-dropdown__icon {
  background: linear-gradient(135deg, #0e9f82 0%, #0b8a6e 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(14,159,130,0.26);
}
.rich-dropdown__item--purple .rich-dropdown__icon {
  background: linear-gradient(135deg, #7c3aed 0%, #6028cc 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(124,58,237,0.26);
}
.rich-dropdown__item--orange .rich-dropdown__icon {
  background: linear-gradient(135deg, #e07b1a 0%, #c46613 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(224,123,26,0.26);
}
.rich-dropdown__item--red .rich-dropdown__icon {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(220,38,38,0.24);
}

.rich-dropdown__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.rich-dropdown__text strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nl-gray-900);
  line-height: 1.2;
}
.rich-dropdown__text small {
  font-size: 0.75rem;
  color: var(--nl-gray-500);
  line-height: 1.4;
}

/* Footer CTA strip */
.rich-dropdown__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1.25rem;
  background: linear-gradient(90deg, #eef5ff 0%, #f4f0ff 100%);
  border-top: 1px solid rgba(178,194,214,0.35);
}
.rich-dropdown__footer-text {
  font-size: 0.74rem;
  color: var(--nl-blue-800);
  font-weight: 500;
  line-height: 1.4;
}
.rich-dropdown__footer-link {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--nl-blue-600);
  white-space: nowrap;
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--nl-blue-300);
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.rich-dropdown__footer-link:hover {
  background: var(--nl-blue-600);
  color: #fff;
  border-color: var(--nl-blue-600);
}

/* Keep old simple-dropdown styles intact for any other uses */
.simple-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.simple-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--nl-gray-800);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all var(--nl-transition);
  letter-spacing: 0.01em;
}
.simple-dropdown-menu a:hover,
.simple-dropdown-menu a:focus-visible {
  background: var(--nl-blue-50);
  color: var(--nl-blue-700);
  border-color: var(--nl-blue-100);
  box-shadow: none;
}
.simple-dropdown-menu__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nl-blue-600);
  color: #fff;
  flex-shrink: 0;
}
.simple-dropdown-menu__icon svg {
  width: 15px;
  height: 15px;
}
.simple-dropdown-menu__label {
  display: block;
  white-space: nowrap;
  line-height: 1.2;
  color: var(--nl-gray-900);
}

.nav-cta {
  gap: 0;
}

@media (max-width: 1100px) {
  .topbar-links {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .topbar-links {
    flex-direction: column;
    align-items: stretch;
  }
  .topbar-contact--inline {
    order: 0;
    justify-content: flex-start;
  }
  .toolbar-dropdown {
    order: 0;
  }
  .toolbar-dropdown__toggle {
    min-height: 38px;
    font-size: 0.82rem;
  }
  .toolbar-dropdown__value {
    font-size: 0.82rem;
  }
  .toolbar-dropdown__item--compact {
    justify-content: flex-start;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
  }
}


/* =========================================================
   HEADER REFINEMENT: nav-like locale menus + about dropdown
   ========================================================= */
.topbar-links {
  align-items: center;
}
.topbar-contact--inline {
  gap: 0.85rem;
}
.toolbar-dropdown__menu--compact {
  min-width: unset;
  width: max-content;
  padding: 0.25rem;
}
.toolbar-dropdown__menu--navlike {
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(11,31,58,0.14);
}
.toolbar-dropdown__item--compact {
  justify-content: flex-start;
  padding: 0.38rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border-radius: 8px;
}
.toolbar-dropdown__item--navlike {
  min-width: 100%;
}
.nav-item--simple-dropdown {
  position: relative;
}
.nav-item--simple-dropdown .nav-link--button.is-current {
  color: var(--nl-blue-700);
}
.nav-item--simple-dropdown .nav-link--button.is-current::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 26px;
  height: 2px;
  border-radius: 999px;
  background: var(--nl-blue-600);
}
.nav-item--simple-dropdown .nav-mega--simple {
  min-width: 220px;
  padding: 0.4rem;
}
.simple-dropdown-menu a {
  white-space: nowrap;
}
@media (max-width: 768px) {
  .toolbar-dropdown__menu--compact {
    width: 100%;
  }
  .toolbar-dropdown__item--compact {
    justify-content: flex-start;
  }
}

/* =========================================================
   HEADER SCALE TUNE: normalize desktop sizing at 100% zoom
   ========================================================= */
@media (min-width: 769px) {
  .site-header__inner {
    height: 100px;
    min-height: 100px;
    gap: 0.85rem;
  }

  .site-logo__img,
  .custom-logo {
    height: 100px;
    max-height: 100px;
  }

  .primary-nav {
    margin-left: -72px;
  }

  .nav-link {
    height: 84px;
    padding: 0 0.82rem;
    font-size: 0.89rem;
  }

  .nav-item--simple-dropdown .nav-link--button.is-current::after {
    left: 0.82rem;
    right: 0.82rem;
    bottom: 22px;
  }

  .nav-mega--services {
    width: 720px;
  }

  .services-mega {
    grid-template-columns: 270px minmax(0, 1fr);
    min-height: 360px;
  }

  .services-mega__sidebar {
    padding: 0.85rem;
    gap: 0.38rem;
  }

  .services-category {
    gap: 0.75rem;
    padding: 0.82rem 0.9rem;
    border-radius: 16px;
  }

  .services-category__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .services-category__icon svg {
    width: 19px;
    height: 19px;
  }

  .services-category__text strong {
    font-size: 0.91rem;
  }

  .services-category__text small {
    font-size: 0.72rem;
  }

  .services-mega__panels {
    padding: 1.1rem 1.1rem 1rem;
  }

  .services-panel__header {
    padding-bottom: 0.8rem;
    margin-bottom: 0.72rem;
  }

  .services-panel__header p {
    font-size: 1.02rem;
  }

  .services-panel__header span {
    font-size: 0.76rem;
  }

  .services-panel__submenu {
    gap: 0.6rem;
  }

  .services-panel__submenu a {
    min-height: 96px;
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
  }

  .services-panel__submenu-title {
    font-size: 0.9rem;
  }

  .services-panel__submenu small {
    margin-top: 0.35rem;
    font-size: 0.73rem;
    line-height: 1.45;
  }

  .nav-item--simple-dropdown .nav-mega--simple {
    min-width: 210px;
    padding: 0.35rem;
  }

  .simple-dropdown-menu a {
    gap: 0.6rem;
    padding: 0.52rem 0.65rem;
    border-radius: 9px;
    font-size: 0.8rem;
  }

  .simple-dropdown-menu__icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .simple-dropdown-menu__icon svg {
    width: 14px;
    height: 14px;
  }

  .simple-dropdown-menu__label {
    font-size: 0.86rem;
  }

  .nav-cta .btn--sm {
    min-height: 40px;
    padding-inline: 1rem;
  }

  .topbar-contact--inline a {
    font-size: 0.75rem;
  }

  .toolbar-dropdown__toggle {
    min-height: 28px;
    padding: 0.28rem 0.52rem;
    font-size: 0.68rem;
  }

  .toolbar-dropdown__value {
    font-size: 0.7rem;
  }

  .toolbar-dropdown__item--compact {
    padding: 0.68rem 0.82rem;
    font-size: 0.76rem;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .primary-nav {
    margin-left: -36px;
  }

  .nav-mega--services {
    width: 680px;
  }
}


/* =========================================================
   HOME SELF-SERVE PORTAL HUB
   ========================================================= */
.section--portal-hub {
  padding-top: clamp(1.35rem, 2.4vw, 2.1rem);
  padding-bottom: clamp(1.45rem, 2.6vw, 2.2rem);
}

.res-feature-hub {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 300px;
  gap: clamp(1.8rem, 2vw, 2.45rem);
  align-items: center;
}

.res-feature-hub__title {
  font-family: 'Oswald', var(--nl-font);
  font-size: clamp(1.9rem, 3vw, 3.1rem);
  line-height: 0.94;
  letter-spacing: -0.018em;
  font-weight: 500;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
}

.portal-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  background: rgba(13, 42, 80, 0.06);
  border: 1px solid rgba(160, 182, 206, 0.45);
  color: var(--nl-dark, #0b1f3a);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.res-feature-hub__desc {
  font-size: 1rem;
  line-height: 1.68;
  color: var(--nl-gray-700);
  max-width: 19.5rem;
}

.res-feature-hub__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.95rem;
}

.btn--portal {
  min-width: 260px;
  justify-content: center;
  background: var(--nl-dark, #0b1f3a);
  color: #fff;
  border-color: var(--nl-dark, #0b1f3a);
  box-shadow: none;
}

.btn--portal:hover {
  background: var(--nl-blue, #1a3f7a);
  border-color: var(--nl-blue, #1a3f7a);
  color: #fff;
  transform: translateY(-1px);
}

.res-feature-hub__signup {
  margin-top: 0.7rem;
  font-size: 0.98rem;
  color: var(--nl-gray-900);
  white-space: nowrap;
}

.res-feature-hub__signup a {
  color: var(--nl-gray-900);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.res-feature-hub__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.05rem;
}

.res-feature-card {
  position: relative;
  min-height: 184px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--nl-white);
  border: 1px solid rgba(178, 194, 214, 0.55);
  border-radius: 1.35rem;
  padding: 1.2rem 1.08rem 1rem;
  box-shadow: 0 8px 22px rgba(11, 31, 58, 0.05);
  transition: transform var(--nl-transition), box-shadow var(--nl-transition), border-color var(--nl-transition);
}

.res-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(11, 31, 58, 0.09);
  border-color: rgba(106, 137, 175, 0.58);
  color: inherit;
}

.res-feature-card__icon {
  width: 3.1rem;
  height: 3.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--nl-blue-50);
  color: var(--nl-blue-600);
  border: 1px solid var(--nl-blue-100);
}

.res-feature-card__icon svg,
.res-feature-card__arrow svg {
  width: 1.5rem;
  height: 1.5rem;
}

.res-feature-card__title {
  display: block;
  max-width: 12ch;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
  color: #111;
}

.res-feature-card__title--single {
  max-width: none;
  white-space: nowrap;
  font-size: 0.95rem;
}

.res-feature-card__title--wrap {
  max-width: 9ch;
  white-space: normal;
  font-size: 0.95rem;
}

.res-feature-card__arrow {
  align-self: flex-end;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(13, 42, 80, 0.06);
  border: 1px solid rgba(178, 194, 214, 0.75);
  color: var(--nl-blue, #1a4fa0);
  box-shadow: 0 2px 8px rgba(11,31,58,0.05);
  transition: transform var(--nl-transition), color var(--nl-transition), background var(--nl-transition), border-color var(--nl-transition), box-shadow var(--nl-transition);
}

.res-feature-card__arrow svg {
  width: 1rem;
  height: 1rem;
}

.res-feature-card:hover .res-feature-card__arrow {
  transform: translateX(3px);
  color: var(--nl-dark, #0b1f3a);
  background: rgba(13, 42, 80, 0.1);
  border-color: rgba(106, 137, 175, 0.85);
  box-shadow: 0 6px 16px rgba(11,31,58,0.08);
}

.res-feature-hub__visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 360px;
  overflow: visible;
}

.res-feature-hub__visual--portal {
  justify-content: flex-start;
}

.res-feature-portal-figure {
  width: 100%;
  max-width: 520px;
  transform: translateX(14px);
}

.res-feature-portal-figure svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 28px rgba(26, 95, 180, 0.08));
}

.res-feature-portal-figure--duo {
  max-width: 540px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.75rem;
}

.res-feature-portal-illustration {
  flex: 0 0 50%;
  max-width: 260px;
}

.res-feature-portal-photo {
  flex: 0 0 44%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.res-feature-portal-photo img {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  object-fit: contain;
}

.res-feature-portal-photo--solo {
  width: 370px;
  max-width: none;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-left: 0;
  transform: translateX(10px);
}

.res-feature-portal-photo--solo img {
  width: 370px;
  max-width: none;
  filter: drop-shadow(0 14px 26px rgba(11, 31, 58, 0.08));
}

@media (max-width: 1180px) {
  .res-feature-hub {
    grid-template-columns: 1fr;
  }

  .res-feature-hub__intro {
    max-width: 720px;
  }

  .portal-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  background: rgba(13, 42, 80, 0.06);
  border: 1px solid rgba(160, 182, 206, 0.45);
  color: var(--nl-dark, #0b1f3a);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.res-feature-hub__desc {
    max-width: 32rem;
  }

  .res-feature-hub__actions {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 1rem;
  }

  .res-feature-hub__visual {
    min-height: 0;
    justify-content: flex-start;
  }

  .res-feature-portal-photo--solo {
    width: 100%;
    max-width: 320px;
    transform: none;
  }

  .res-feature-portal-photo--solo img {
    width: 100%;
    max-width: 320px;
  }

  .res-feature-portal-figure {
    transform: none;
  }

  .res-feature-portal-figure--duo {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .res-feature-hub__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .res-feature-portal-figure--duo {
    align-items: center;
    gap: 0.5rem;
  }
}

@media (max-width: 560px) {
  .res-feature-hub__title {
    font-size: clamp(2rem, 12vw, 3rem);
    line-height: 0.98;
  }

  .res-feature-hub__cards {
    grid-template-columns: 1fr;
  }

  .res-feature-card {
    min-height: 150px;
  }

  .res-feature-portal-figure--duo {
    flex-direction: column;
    align-items: center;
  }

  .res-feature-portal-illustration,
  .res-feature-portal-photo,
  .res-feature-portal-photo--solo {
    flex: 0 0 auto;
    width: 100%;
    max-width: 250px;
  }

  .res-feature-hub__actions {
    align-items: stretch;
  }

  .res-feature-hub__signup {
    white-space: normal;
  }

  .btn--portal {
    min-width: 0;
    width: 100%;
  }
}

/* =========================================================
   DESKTOP NORMALIZATION PASS: balanced sizing at browser zoom 100%
   ========================================================= */
@media (min-width: 1024px) {
  html {
    font-size: 15px;
  }

  .container {
    max-width: 1180px;
  }

  .container--wide {
    max-width: 1360px;
  }

  .section {
    padding: 4.35rem 0;
  }

  .section--sm {
    padding: 2.6rem 0;
  }

  .section--lg {
    padding: 6rem 0;
  }

  .site-topbar {
    padding: 0.4rem 0;
  }

  .site-topbar__inner {
    min-height: 36px;
  }

  .topbar-contact--inline {
    gap: 0.72rem;
  }

  .topbar-contact--inline a {
    font-size: 0.72rem;
  }

  .topbar-contact--inline a + a {
    padding-left: 0.72rem;
  }

  .toolbar-dropdown__toggle {
    min-height: 26px;
    padding: 0.22rem 0.46rem;
    font-size: 0.64rem;
  }

  .toolbar-dropdown__value {
    font-size: 0.66rem;
  }

  .toolbar-dropdown__item--compact {
    padding: 0.62rem 0.75rem;
    font-size: 0.72rem;
  }

  .site-header__inner {
    height: 100px;
    min-height: 100px;
    gap: 0.85rem;
  }

  .site-logo__img,
  .custom-logo {
    height: 56px;
    max-height: 56px;
  }

  .primary-nav {
    margin-left: -52px;
  }

  .nav-menu--section {
    gap: 0;
  }

  .nav-link {
    height: 76px;
    padding: 0 0.72rem;
    font-size: 0.84rem;
  }

  .nav-item--simple-dropdown .nav-link--button.is-current::after {
    left: 0.72rem;
    right: 0.72rem;
    bottom: 20px;
  }

  .nav-mega--services {
    width: 670px;
  }

  .services-mega {
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 338px;
  }

  .services-mega__sidebar {
    padding: 0.78rem;
    gap: 0.4rem;
  }

  .services-category {
    gap: 0.68rem;
    padding: 0.74rem 0.82rem;
    border-radius: 14px;
  }

  .services-category__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .services-category__icon svg {
    width: 17px;
    height: 17px;
  }

  .services-category__text strong {
    font-size: 0.86rem;
  }

  .services-category__text small {
    font-size: 0.68rem;
  }

  .services-mega__panels {
    padding: 0.95rem 0.95rem 0.9rem;
  }

  .services-panel__header {
    padding-bottom: 0.7rem;
    margin-bottom: 0.65rem;
  }

  .services-panel__header p {
    font-size: 0.96rem;
  }

  .services-panel__header span {
    font-size: 0.72rem;
  }

  .services-panel__submenu {
    gap: 0.52rem;
  }

  .services-panel__submenu a {
    min-height: 88px;
    padding: 0.78rem 0.82rem;
    border-radius: 14px;
  }

  .services-panel__submenu-title {
    font-size: 0.85rem;
  }

  .services-panel__submenu small {
    margin-top: 0.28rem;
    font-size: 0.69rem;
    line-height: 1.38;
  }

  .nav-item--simple-dropdown .nav-mega--simple {
    min-width: 200px;
    padding: 0.3rem;
  }

  .simple-dropdown-menu a {
    gap: 0.55rem;
    padding: 0.48rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
  }

  .simple-dropdown-menu__icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
  }

  .simple-dropdown-menu__icon svg {
    width: 13px;
    height: 13px;
  }

  .simple-dropdown-menu__label {
    font-size: 0.81rem;
  }

  .nav-cta .btn--sm {
    min-height: 36px;
    padding-inline: 0.9rem;
    font-size: 0.79rem;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .primary-nav {
    margin-left: -18px;
  }

  .nav-mega--services {
    width: 630px;
  }
}


/* ==========================================================================
   FULL-PAGE HERO SLIDESHOW (fp-hero)
   Replaces the embedded .hero block on the home page template.
   All other pages are unaffected — this class is only used in template-home.php
   ========================================================================== */

/* ── Container ── */
.fp-hero {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: calc(var(--fp-hero-vh, 100vh) - 212px);
  max-height: 580px;
  min-height: 390px;
  overflow: hidden;
  margin: 0 auto;
}
.fp-hero::after {
  display: none;
}

/* ── Each slide ── */
.fp-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  color: #fff;
  /* Default gradient — overridden per-slide below */
  background: linear-gradient(135deg, #0b1f3a 0%, #154a87 55%, #2172cc 100%);
  /* Transition: incoming slide fades + slides in from right */
  opacity: 0;
  visibility: hidden;
  transform: translateX(60px);
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.7s;
  will-change: opacity, transform;
}

/* Outgoing slide slides to left */
.fp-hero__slide.is-leaving {
  opacity: 0;
  transform: translateX(-60px);
  visibility: hidden;
}

.fp-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Per-slide colour themes */
.fp-hero__slide--internet { background: linear-gradient(135deg, #0b1f3a 0%, #154a87 55%, #2172cc 100%); }
.fp-hero__slide--phone    { background: linear-gradient(135deg, #0b1f3a 0%, #0d3065 55%, #1861b8 100%); }
.fp-hero__slide--tv       { background: linear-gradient(135deg, #0b1f3a 0%, #0e2e5c 55%, #155ba0 100%); }
.fp-hero__slide--wifi     { background: linear-gradient(135deg, #081829 0%, #0a3060 55%, #0f52a0 100%); }

/* ── Decorative background icon ── */
.fp-hero__slide-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.fp-hero__bg-icon {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: min(55vw, 700px);
  height: min(55vw, 700px);
  opacity: 0.045;
  color: #fff;
}

/* ── Slide content wrapper ── */
.fp-hero__slide-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Badge / eyebrow above title */
.fp-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9);
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.7rem;
  width: fit-content;
}

/* Main heading */
.fp-hero__title {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.07;
  color: #fff;
  margin: 0 0 0.8rem;
  max-width: 780px;
}

.fp-hero__title span {
  color: #7eb8f7;
}

/* Lead paragraph */
.fp-hero__lead {
  font-size: clamp(0.875rem, 1.5vw, 1.05rem);
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 0 1rem;
}

/* Service label chip */
.fp-hero__service-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 1.1rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: fit-content;
  margin-bottom: 0.7rem;
}

.fp-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.fp-hero__service-name {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
}

.fp-hero__service-tagline {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
}

/* Stats row */
.fp-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  max-width: 680px;
}

.fp-hero__stat-value {
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
}

.fp-hero__stat-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.3rem;
  font-weight: 500;
  line-height: 1.45;
}

/* ── Arrow buttons ── */
.fp-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.fp-hero__arrow:hover,
.fp-hero__arrow:focus-visible {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.6);
  outline: none;
}

.fp-hero__arrow:active {
  transform: translateY(-50%) scale(0.93);
}

.fp-hero__arrow--prev { left: clamp(1rem, 3vw, 2.5rem); }
.fp-hero__arrow--next { right: clamp(1rem, 3vw, 2.5rem); }

/* ── Dot navigation ── */
.fp-hero__dots {
  position: absolute;
  bottom: 1.15rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fp-hero__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 0;
  transition: width 0.35s ease, background-color 0.35s ease;
}

.fp-hero__dot.is-active {
  width: 2rem;
  background: #fff;
}

/* ── Scroll hint ── */
.fp-hero__scroll-hint {
  position: absolute;
  bottom: 1.15rem;
  right: clamp(1rem, 3vw, 2.5rem);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: fp-bounce 2s ease-in-out infinite;
}

@keyframes fp-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .fp-hero__slide {
    transition: opacity 0.3s ease, visibility 0.3s;
    transform: none !important;
  }
  .fp-hero__scroll-hint { animation: none; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .fp-hero {
    height: auto;
    min-height: calc(100svh - 100px);
  }

  .fp-hero__slide {
    /* On mobile, slides stack and min-height is used */
    position: relative;
    min-height: calc(100svh - 100px);
    transform: none;
  }

  .fp-hero__slide:not(.is-active) {
    display: none;
  }

  .fp-hero__slide.is-leaving {
    display: none;
  }

  .fp-hero__bg-icon {
    width: 80vw;
    height: 80vw;
    opacity: 0.03;
  }

  .fp-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fp-hero__arrow {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 540px) {
  .fp-hero__arrow--prev { left: 0.75rem; }
  .fp-hero__arrow--next { right: 0.75rem; }

  .fp-hero__stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
  }

  .fp-hero__service-label { width: 100%; }
}

/* ── fp-hero CTA buttons ── */
.fp-hero__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.fp-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.fp-hero__btn--primary {
  background: #fff;
  color: var(--nl-blue-800, #0b1f3a);
  border: 2px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.fp-hero__btn--primary:hover,
.fp-hero__btn--primary:focus-visible {
  background: var(--nl-blue-50, #e8f1fb);
  border-color: var(--nl-blue-50, #e8f1fb);
  color: var(--nl-blue-800, #0b1f3a);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

.fp-hero__btn--outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.55);
}

.fp-hero__btn--outline:hover,
.fp-hero__btn--outline:focus-visible {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.9);
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 540px) {
  .fp-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
    margin-top: 1.5rem;
  }
  .fp-hero__btn {
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================================================
   FP-HERO SPLIT-SCREEN PHOTO LAYOUT
   Overrides the original single-column slide layout with a two-column
   split: blue gradient content left, photo panel right with diagonal blend.
   ========================================================================== */

/* Make each slide a flex row */
.fp-hero__slide {
  flex-direction: row;
  align-items: stretch;
}

/* ── Left content panel ── */
.fp-hero__slide-content {
  position: relative;
  z-index: 2;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-right: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-left: clamp(3.75rem, 6vw, 5.5rem);
  overflow-y: auto;
  overflow-x: hidden;
  background: inherit;
  justify-content: flex-start;
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

/* ── Right photo panel ── */
.fp-hero__slide-photo {
  position: relative;
  flex: 0 0 50%;
  overflow: hidden;
}

.fp-hero__slide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  display: block;
}

/* Diagonal blend overlay — creates the seamless merge from gradient into photo */
.fp-hero__photo-blend {
  display: none;
}

/* Per-slide colour variables for the blend */
.fp-hero__slide--internet { --fp-slide-color: #154a87; }
.fp-hero__slide--phone    { --fp-slide-color: #0d3065; }
.fp-hero__slide--tv       { --fp-slide-color: #0e2e5c; }
.fp-hero__slide--wifi     { --fp-slide-color: #0a3060; }

/* Bottom gradient removed — clean photo */
.fp-hero__slide-photo::after {
  display: none;
}

/* Remove the old bg-icon approach (no longer needed) */
.fp-hero__slide-bg { display: none; }

/* ── Slide transition: keep existing translate logic ── */
.fp-hero__slide {
  transform: translateX(60px);
}
.fp-hero__slide.is-active {
  transform: translateX(0);
}
.fp-hero__slide.is-leaving {
  transform: translateX(-60px);
}

/* ── Scroll hint — keep on the left side ── */
.fp-hero__scroll-hint {
  left: clamp(1.25rem, 5vw, 3rem);
  right: auto;
  color: rgba(255,255,255,0.45);
}

/* ── Arrows — push outside the photo ── */
.fp-hero__arrow--prev { left: 1rem; }
.fp-hero__arrow--next { right: 1rem; }

/* ── Responsive: stack vertically on tablet/mobile ── */
@media (max-width: 900px) {
  .fp-hero__slide {
    flex-direction: column;
  }

  .fp-hero__slide-content {
    flex: 0 0 auto;
    padding: 2.5rem 1.5rem 1.5rem;
  }

  .fp-hero__slide-photo {
    flex: 1;
    min-height: 240px;
    max-height: 320px;
  }

  .fp-hero__slide-photo img {
    object-position: center 20%;
  }

  .fp-hero__photo-blend {
    background: linear-gradient(
      180deg,
      var(--fp-slide-color, #0f3d7a) 0%,
      rgba(11,31,58,0.5) 30%,
      transparent 60%
    );
  }

  .fp-hero__scroll-hint { display: none; }
}

@media (max-width: 540px) {
  .fp-hero__slide-content {
    padding: 2rem 1.25rem 1.25rem;
  }
  .fp-hero__slide-photo {
    min-height: 200px;
    max-height: 260px;
  }
}

/* =========================================================
   HEADER TWEAK: Rogers-style compact locale selectors
   ========================================================= */
.site-topbar .topbar-links {
  gap: 0.75rem;
}

.site-topbar .toolbar-dropdown {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.site-topbar .toolbar-dropdown__toggle {
  min-height: 0;
  min-width: 0;
  padding: 0;
  gap: 0.28rem;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  color: rgba(255,255,255,0.92);
}

.site-topbar .toolbar-dropdown__toggle:hover,
.site-topbar .toolbar-dropdown.is-open .toolbar-dropdown__toggle {
  background: transparent;
  border-color: transparent;
  color: #fff;
}

.site-topbar .toolbar-dropdown__value {
  font-size: 0.82rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}

.site-topbar .toolbar-dropdown__toggle .caret {
  font-size: 0.56rem;
  opacity: 0.9;
  transform: translateY(-1px);
}

.site-topbar .toolbar-dropdown__menu--compact {
  min-width: 74px;
  width: auto;
  margin-top: 0.55rem;
  padding: 0.35rem;
  border-radius: 8px;
}

.site-topbar .toolbar-dropdown__item--compact {
  padding: 0.42rem 0.7rem;
  font-size: 0.76rem;
  line-height: 1.1;
  justify-content: center;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .site-topbar .topbar-links {
    gap: 0.5rem;
  }

  .site-topbar .toolbar-dropdown__toggle {
    min-height: 32px;
    min-width: 56px;
    padding: 0.34rem 0.66rem;
  }

  .site-topbar .toolbar-dropdown__value {
    font-size: 0.76rem;
  }

  .site-topbar .toolbar-dropdown__item--compact {
    justify-content: flex-start;
    font-size: 0.8rem;
    padding: 0.55rem 0.72rem;
  }
}


/* =========================================================
   TOPBAR + FOOTER TWEAKS: tighter topbar grouping and footer cleanup
   ========================================================= */
@media (min-width: 1101px) {
  .site-topbar__inner {
    justify-content: flex-end;
  }

  .site-topbar__left {
    margin-right: 0.7rem;
  }

  .site-topbar .topbar-links {
    margin-left: 0;
  }
}

.site-footer .footer-grid {
  grid-template-columns: 1.42fr 0.95fr 0.95fr 1fr 1.08fr;
}

.site-footer .footer-bottom__links {
  gap: 0.75rem;
}

.site-footer .footer-bottom__links a {
  display: inline-flex;
  align-items: center;
}

.site-footer .footer-bottom__links a + a::before {
  content: '|';
  margin-right: 0.75rem;
  color: rgba(255,255,255,0.45);
}

@media (max-width: 900px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   TOPBAR ALIGNMENT FIX: switcher left, contact cluster right
   ========================================================= */
@media (min-width: 1101px) {
  .site-topbar__inner {
    justify-content: space-between;
  }

  .site-topbar__left {
    margin-right: 0;
  }

  .site-topbar .topbar-links {
    margin-left: 0;
  }
}

/* =========================================================
   TOPBAR + HEADER POSITION TUNE: switcher slightly right, account under phone
   ========================================================= */
@media (min-width: 1101px) {
  .site-topbar__left {
    margin-left: 7mm;
  }

  .site-header__inner {
    justify-content: flex-start;
  }

  .nav-cta {
    margin-left: auto;
  }
}


/* =========================================================
   USER REQUEST TWEAKS: thinner switcher, tighter intros
   ========================================================= */
@media (min-width: 1101px) {
  .section-switcher,
  .mobile-section-switcher {
    padding: 0.15rem;
  }

  .section-switcher__link,
  .mobile-section-switcher__link {
    min-width: 108px;
    padding: 0.26rem 0.85rem;
    font-size: 0.77rem;
  }
}

.section--services-intro {
  padding-top: 2.2rem;
  padding-bottom: 4.5rem;
}

.section--commitment {
  padding-top: 3rem;
}

.section-header--tight {
  margin-bottom: 2.5rem;
}

.section-header--services-intro .section-title,
.section-header--commitment .section-title {
  margin-top: 0;
}


/* =========================================================
   USER REQUEST TWEAKS: slimmer topbar, tighter path + commitment spacing
   ========================================================= */
.site-topbar {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

@media (min-width: 1101px) {
  .section-switcher,
  .mobile-section-switcher {
    padding: 0.12rem;
  }

  .section-switcher__link,
  .mobile-section-switcher__link {
    min-width: 108px;
    padding: 0.2rem 0.85rem;
    font-size: 0.76rem;
  }

  .topbar-contact--inline a,
  .topbar-links a,
  .toolbar-dropdown__toggle {
    font-size: 0.78rem;
  }
}

.section--commitment {
  padding-top: 2.25rem;
  padding-bottom: 2.35rem;
}

.section-header--commitment {
  margin-bottom: 1.35rem;
}

.section--commitment .section-title {
  margin-bottom: 0.75rem;
}

.section--commitment .section-desc {
  max-width: 720px;
}

.feature-grid--commitment {
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.section--commitment .feature-item {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.feature-item--commitment {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 1.4rem 1.1rem 1.25rem;
  box-shadow: 0 10px 24px rgba(3, 13, 28, 0.18);
}


.feature-item--commitment {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.feature-item--commitment:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(3, 13, 28, 0.26);
  border-color: rgba(130, 192, 255, 0.28);
  background: rgba(255,255,255,0.06);
}

.commitment-stat__value--small {
  font-size: 1rem;
}
.feature-item--commitment .feature-item__icon {
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 0.7rem;
  border-width: 2px;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.11);
}

.feature-item--commitment .feature-item__icon svg {
  width: 2rem;
  height: 2rem;
}

.feature-item--commitment .feature-item__title {
  margin-bottom: 0.45rem;
}

.feature-item--commitment .feature-item__text {
  max-width: 18rem;
  margin: 0 auto;
  line-height: 1.55;
}

.commitment-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.commitment-stat {
  text-align: center;
  padding: 0.95rem 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.commitment-stat__value {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
}

.commitment-stat__label {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.62);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 900px) {
  .feature-grid--commitment {
    gap: 0.85rem;
  }

  .commitment-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .commitment-stats {
    grid-template-columns: 1fr;
  }
}

.section--path-choice {
  padding-top: 1.75rem;
  padding-bottom: 4.25rem;
}

.section--path-choice .section-header {
  margin-bottom: 1.75rem;
}

/* ==========================================================================
   NEED EXTRA HARDWARE — 3-column feature cards
   ========================================================================== */

.section--hardware {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.section--hardware .section-header {
  margin-bottom: 2rem;
}

.hardware-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.hardware-card {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  box-shadow: 0 2px 12px rgba(11,31,58,0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hardware-card:hover {
  box-shadow: 0 8px 28px rgba(11,31,58,0.12);
  transform: translateY(-3px);
}

.hardware-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--nl-blue-50, #e8f1fb);
  color: var(--nl-blue-600, #1a5fb4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hardware-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--nl-gray-900);
  margin: 0;
  line-height: 1.3;
}

.hardware-card__desc {
  font-size: 0.9rem;
  color: var(--nl-gray-600);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.hardware-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--nl-blue-600, #1a5fb4);
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.2s ease, color 0.2s ease;
}

.hardware-card__link:hover {
  color: var(--nl-blue-800, #0b1f3a);
  gap: 0.5rem;
}

@media (max-width: 900px) {
  .hardware-cards { grid-template-columns: 1fr; gap: 1rem; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .hardware-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   FOOTER — Connect With Us social column
   ========================================================================== */

.footer-social-col__desc {
  font-size: 0.77rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
  margin-bottom: 0.8rem;
  max-width: 205px;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.footer-social-icons a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.footer-social-icons a:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}

/* Business hero matches residential full-width sizing */
.fp-hero__slide--business { background: linear-gradient(135deg, #0b1f3a 0%, #0d2a50 55%, #0e3f7c 100%); --fp-slide-color: #0d2a50; }
.fp-hero__slide--voice { background: linear-gradient(135deg, #0b1f3a 0%, #10335f 55%, #1c5eaa 100%); --fp-slide-color: #10335f; }
.fp-hero__slide--data { background: linear-gradient(135deg, #081829 0%, #0f2f57 55%, #1a5fb4 100%); --fp-slide-color: #0f2f57; }
.fp-hero__slide--web { background: linear-gradient(135deg, #0b1f3a 0%, #123c70 55%, #2b76d2 100%); --fp-slide-color: #123c70; }

.fp-hero--business .fp-hero__slide-content { justify-content: center; }
.fp-hero--business .fp-hero__slide-photo img { object-position: center center; }
.fp-hero--business .fp-hero__slide--data .fp-hero__slide-photo img { object-position: center center; }
.fp-hero--business .fp-hero__slide--web .fp-hero__slide-photo img { object-position: center center; }


/* Business text-only slideshow */
.fp-hero--business-textonly .fp-hero__slide { background: linear-gradient(135deg, #0b1f3a 0%, #0d2a50 58%, #0e3f7c 100%); --fp-slide-color: #0d2a50; }
.fp-hero--business-textonly .fp-hero__slide-content {
  flex: 1 1 100%;
  max-width: 100%;
  padding-right: clamp(1.5rem, 5vw, 4rem);
  justify-content: center;
}
.fp-hero--business-textonly .fp-hero__slide-inner { max-width: 760px; }
.fp-hero--business-textonly .fp-hero__slide-photo { display:none !important; }
.fp-hero--business-textonly .fp-hero__service-label { max-width: 560px; }
.fp-hero--business-textonly .fp-hero__stats { max-width: 760px; }
.fp-hero--business-textonly .fp-hero__actions { max-width: 760px; }
.fp-hero--business-textonly .fp-hero__arrow--prev { left: 1rem; }
.fp-hero--business-textonly .fp-hero__arrow--next { right: 1rem; }
.fp-hero--business-textonly .fp-hero__scroll-hint { left: clamp(1.25rem, 5vw, 3rem); right:auto; }
.fp-hero--business-textonly .fp-hero__slide--business { --fp-slide-color: #0d2a50; }
.fp-hero--business-textonly .fp-hero__slide--voice { --fp-slide-color: #10335f; }
.fp-hero--business-textonly .fp-hero__slide--tv { --fp-slide-color: #113966; }
.fp-hero--business-textonly .fp-hero__slide--data { --fp-slide-color: #0f2f57; }
.fp-hero--business-textonly .fp-hero__slide--web { --fp-slide-color: #123c70; }
@media (max-width: 900px) {
  .fp-hero--business-textonly .fp-hero__slide-content { padding-right: 1.5rem; }
}

/* ============================================================
   CLIENT SELF-SERVE PORTAL CTA SECTION
   ============================================================ */
.section--portal-cta {
  background: var(--nl-bg, #f0f4f8);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.portal-cta {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 300px;
  align-items: center;
  gap: clamp(1.8rem, 2vw, 2.45rem);
}

.portal-cta__content {
  max-width: 270px;
  min-width: 0;
}

/* LEFT: Text content */
.portal-cta__title {
  font-size: clamp(1.55rem, 2.7vw, 2.2rem);
  font-weight: 900;
  line-height: 0.94;
  color: var(--nl-dark, #0b1f3a);
  text-transform: uppercase;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

.portal-cta__desc {
  font-size: 0.9rem;
  color: var(--nl-text-muted, #4a5568);
  line-height: 1.58;
  margin: 0 0 1.4rem;
  max-width: 250px;
}

.portal-cta__btn {
  display: inline-block;
  background: var(--nl-dark, #0b1f3a);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.75rem 1.4rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
  margin-bottom: 0.9rem;
}

.portal-cta__btn:hover {
  background: var(--nl-blue, #1a3f7a);
  transform: translateY(-1px);
}

.portal-cta__register {
  font-size: 0.82rem;
  color: var(--nl-text-muted, #4a5568);
  margin: 0;
}

.portal-cta__register-link {
  color: var(--nl-dark, #0b1f3a);
  font-weight: 700;
  text-decoration: underline;
}

/* CENTER: 2x3 grid of cards */
.portal-cta__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 1.1rem;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.portal-cta__card {
  background: #fff;
  border-radius: 18px;
  padding: 1.6rem 1.4rem 3rem;
  border: 1px solid rgba(178, 194, 214, 0.45);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 2px 12px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  position: relative;
  min-height: 178px;
}

.portal-cta__card:hover {
  box-shadow: 0 10px 22px rgba(11,31,58,0.08);
  transform: translateY(-2px);
  border-color: rgba(106, 137, 175, 0.58);
}

.portal-cta__card-icon {
  width: 48px;
  height: 48px;
  background: rgba(13, 42, 80, 0.07);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nl-blue, #1a4fa0);
  flex-shrink: 0;
}

.portal-cta__card-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nl-dark, #0b1f3a);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  padding-right: 2.5rem;
}

.portal-cta__card-label--narrow {
  white-space: normal;
  max-width: 9ch;
  padding-right: 0;
}

.portal-cta__card-arrow {
  position: absolute;
  right: 1rem;
  bottom: 0.95rem;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: rgba(13, 42, 80, 0.06);
  border: 1px solid rgba(178, 194, 214, 0.75);
  color: var(--nl-blue, #1a4fa0);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
  box-shadow: 0 2px 8px rgba(11,31,58,0.05);
}

.portal-cta__card-arrow svg {
  width: 1rem;
  height: 1rem;
}

.portal-cta__card-arrow:hover {
  color: var(--nl-dark, #0b1f3a);
  transform: translateX(3px);
  background: rgba(13, 42, 80, 0.1);
  border-color: rgba(106, 137, 175, 0.85);
  box-shadow: 0 6px 16px rgba(11,31,58,0.08);
}

/* RIGHT: image */
.portal-cta__image {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: center;
  margin-top: -0.25rem;
  margin-left: 0.75rem;
  overflow: visible;
  transform: none;
}

.portal-cta__image img {
  width: 470px;
  max-width: none;
  height: auto;
  object-fit: contain;
  display: block;
  transform: translateX(70px) translateY(-10px);
  filter: drop-shadow(0 14px 26px rgba(11, 31, 58, 0.10));
}

/* Responsive */
@media (max-width: 1180px) {
  .portal-cta {
    grid-template-columns: 1fr;
  }
  .portal-cta__content {
    max-width: 720px;
  }
  .portal-cta__image {
    display: none;
  }
  .portal-cta__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .portal-cta {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .portal-cta__image {
    display: none;
  }
}

@media (max-width: 640px) {
  .portal-cta {
    grid-template-columns: 1fr;
  }
  .portal-cta__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .portal-cta__desc {
    max-width: 100%;
  }
}

/* ============================================================
   BUSINESS HERO — SPLIT LAYOUT (icon left, content right)
   ============================================================ */
.fp-hero__slide-inner--split {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1200px;
  padding-left: clamp(2rem, 8vw, 8rem);
}

.fp-hero__slide-icon {
  flex-shrink: 0;
  width: clamp(120px, 16vw, 200px);
  height: clamp(120px, 16vw, 200px);
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}

.fp-hero__slide-icon svg {
  width: 55%;
  height: 55%;
  color: rgba(255,255,255,0.88);
  stroke-width: 1.1;
}

.fp-hero__slide-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Override business-textonly slide-inner for the split layout */
.fp-hero--business-textonly .fp-hero__slide-inner--split {
  max-width: 1200px;
  padding-right: clamp(1.5rem, 4vw, 3rem);
}

.fp-hero--business-textonly .fp-hero__slide-inner--split .fp-hero__service-label { max-width: 520px; }
.fp-hero--business-textonly .fp-hero__slide-inner--split .fp-hero__stats { max-width: 680px; }
.fp-hero--business-textonly .fp-hero__slide-inner--split .fp-hero__actions { max-width: 680px; }

@media (max-width: 900px) {
  .fp-hero__slide-inner--split {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1.5rem;
    gap: 1.5rem;
  }
  .fp-hero__slide-icon {
    width: 80px;
    height: 80px;
    border-radius: 18px;
  }
}

/* Brand logo inside business hero slides */
.fp-hero__brand-logo {
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 0.7rem;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Business hero cleanup: remove extra visual weight after logo removal */
.fp-hero--business .fp-hero__slide-content {
  justify-content: flex-start;
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 767px) {
  .res-service-card { padding: 0 1.5rem 1.5rem; }
  .res-service-card__icon {
    width: calc(100% + 3rem);
    margin: 0 -1.5rem 0.25rem;
    min-height: 9.5rem;
  }
  .service-card { padding: 0 1.5rem 1.5rem; }
  .service-card__icon-wrap {
    width: calc(100% + 3rem);
    margin: 0 -1.5rem 1.25rem;
    min-height: 10rem;
  }
}


/* ========================================================================== 
   HARDWARE PROMO CARDS 
   ========================================================================== */
/* ============================================================
   HARDWARE HERO — full-bleed photo + 3 white overlay cards
   ============================================================ */
.section--hardware-hero {
  position: relative;
  width: min(calc(100% - 3rem), 1200px);
  margin: 0 auto 1.1rem;
  border-radius: 28px;
  background-size: 108% auto;
  background-position: center 84%;
  background-repeat: no-repeat;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(11, 31, 58, 0.12);
}
.hardware-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(4, 14, 32, 0.10) 0%,
      rgba(4, 14, 32, 0.18) 30%,
      rgba(4, 14, 32, 0.28) 66%,
      rgba(4, 14, 32, 0.36) 100%
    ),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 40%);
  z-index: 1;
}
.hardware-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 0.4rem;
  padding-bottom: 3.45rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}
.hardware-hero__heading {
  text-align: left;
  max-width: 620px;
}
.hardware-hero__eyebrow {
  display: inline-block;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.8rem;
  border: 1px solid rgba(255,255,255,0.22);
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
}
.hardware-hero__title {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  margin-bottom: 0.7rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.hardware-hero__desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.80);
  line-height: 1.55;
  max-width: 520px;
}
.hardware-hero__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 980px;
}

@media (min-width: 1200px) {
  .section--hardware-hero {
    background-size: 110% auto;
    background-position: center 86%;
  }
}

/* Individual cards */
.hw-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.18);
  border-top: 3px solid rgba(255,255,255,0.30);
  border-radius: 20px;
  padding: 1.45rem 1.28rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-decoration: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 10px 26px rgba(3, 13, 30, 0.14);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hw-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.20);
  text-decoration: none;
}

/* Colored top border per service */
.hw-card--blue  { border-top-color: #4a9eff; }
.hw-card--teal  { border-top-color: #2dd4b0; }
.hw-card--purple { border-top-color: #a78bfa; }

/* Colored icon background per service */
.hw-card--blue .hw-card__icon {
  background: linear-gradient(135deg, #1e6fd9 0%, #185db5 100%);
  box-shadow: 0 4px 14px rgba(30,111,217,0.35);
}
.hw-card--teal .hw-card__icon {
  background: linear-gradient(135deg, #0e9f82 0%, #0b8a6e 100%);
  box-shadow: 0 4px 14px rgba(14,159,130,0.32);
}
.hw-card--purple .hw-card__icon {
  background: linear-gradient(135deg, #7c3aed 0%, #6028cc 100%);
  box-shadow: 0 4px 14px rgba(124,58,237,0.32);
}

.hw-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.hw-card:hover .hw-card__icon {
  transform: scale(1.08);
}
.hw-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}
.hw-card__title {
  font-size: 1.04rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.hw-card__desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0;
  flex: 1;
}
.hw-card__btn {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  padding: 0.4rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.08);
  letter-spacing: 0.02em;
  transition: all 0.18s ease;
  align-self: flex-start;
}
.hw-card:hover .hw-card__btn {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .section--hardware-hero {
    width: calc(100% - 1.5rem);
    margin-bottom: 1rem;
    border-radius: 20px;
    background-size: cover;
    background-position: center center;
  }
  .hardware-hero__cards {
    grid-template-columns: 1fr;
  }
  .hardware-hero__inner {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .hardware-hero__heading {
    text-align: center;
    max-width: 100%;
  }
  .hardware-hero__desc {
    max-width: 100%;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .hardware-hero__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* Business footer split into two grouped columns */
.footer-business-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 2.75rem;
  align-items: start;
}

.footer-col__title--ghost {
  opacity: 0;
  pointer-events: none;
}


.footer-business-groups .footer-links li {
  line-height: 1.45;
}

@media (max-width: 991px) {
  .footer-business-groups {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-col__title--ghost {
    display: none;
  }
}


/* Hardware bundle cards with photos */
.bundle-highlight-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  z-index: 1;
}

.bundle-highlight-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.5) 100%);
  z-index: 1;
}

.bundle-highlight-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bundle-highlight-card--featured .bundle-highlight-card__photo {
  max-width: none;
  height: 100%;
}


/* =========================================================
   HEADER TWEAK: Rogers-style locale dropdown menus
   ========================================================= */
.site-topbar .toolbar-dropdown__menu--compact {
  min-width: 92px;
  margin-top: 0.42rem;
  padding: 0.25rem 0;
  border-radius: 0;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.site-topbar .toolbar-dropdown__item--compact {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0.62rem 0.9rem;
  border-radius: 0;
  color: #111827;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.15;
  background: transparent;
}

.site-topbar .toolbar-dropdown__menu .toolbar-dropdown__item--compact:hover,
.site-topbar .toolbar-dropdown__menu .toolbar-dropdown__item--compact:focus-visible {
  background: #f3f4f6;
  color: #111827;
}

.site-topbar .toolbar-dropdown__menu .toolbar-dropdown__item--compact.is-active,
.site-topbar .toolbar-dropdown__menu .toolbar-dropdown__item--compact.is-active:visited {
  background: #f9fafb;
  color: #111827;
  font-weight: 700;
}

.site-topbar .toolbar-dropdown__menu .toolbar-dropdown__item--compact + .toolbar-dropdown__item--compact {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* =========================================================
   USER REQUEST: refine Residential / Business switcher typography only
   ========================================================= */
.site-topbar .section-switcher__link,
.site-topbar .mobile-section-switcher__link {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.82rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1101px) {
  .site-topbar .section-switcher__link,
  .site-topbar .mobile-section-switcher__link {
    font-size: 0.82rem;
  }
}

/* ===== Services dropdown: compact card style (restored) ===== */
.nav-mega--services {
  width: 820px !important;
  border-radius: 0 0 20px 20px !important;
  box-shadow: 0 12px 40px rgba(11,31,58,0.12) !important;
}
.services-mega {
  grid-template-columns: 250px minmax(0,1fr) !important;
  min-height: 0 !important;
}
.services-mega__sidebar {
  background: #f6f9fe !important;
  padding: 1.15rem 0.9rem !important;
  gap: 0.2rem !important;
}
.services-category {
  align-items: flex-start !important;
  gap: 0.75rem !important;
  padding: 0.72rem 0.7rem !important;
  border: 0 !important;
  border-radius: 12px !important;
}
.services-category:hover,
.services-category.is-active {
  background: #fff !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(178,194,214,0.48) !important;
}
.services-category__icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.services-category__icon svg {
  width: 18px !important;
  height: 18px !important;
}
.services-mega__panels {
  padding: 1.2rem 1.3rem 1.05rem !important;
  height: auto !important;
}
.services-panel {
  height: auto !important;
}
.services-panel__submenu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 0.6rem !important;
  flex: 0 0 auto !important;
  align-content: start !important;
  height: auto !important;
}
.services-panel__submenu a {
  min-height: 80px !important;
  max-height: 100px !important;
  padding: 0.9rem 1rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(178,194,214,0.45) !important;
  background: #fafcff !important;
  transition: all 0.18s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: start !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}
.services-panel__submenu a:hover {
  border-color: var(--nl-blue-300) !important;
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(11,31,58,0.08) !important;
  transform: translateY(-2px) !important;
  padding-left: 1rem !important;
}
.services-panel__submenu-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-size: 0.93rem !important;
  font-weight: 700 !important;
  color: var(--nl-gray-900) !important;
}
.services-panel__submenu-title::after {
  display: none !important;
}
.services-panel__submenu small {
  padding-left: 0 !important;
  margin-top: 0.35rem !important;
  font-size: 0.75rem !important;
}
.services-panel__promo {
  display: flex !important;
  margin-top: 1rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, #eef5ff 0%, #f4f0ff 100%) !important;
  border: 1px solid rgba(178,194,214,0.4) !important;
  flex-shrink: 0 !important;
}

/* ===== Customer Reviews Section ===== */
.section--reviews {
  background: #f8faff;
  padding: 4.5rem 0;
  border-top: 1px solid rgba(178,194,214,0.3);
  border-bottom: 1px solid rgba(178,194,214,0.3);
}
.section--reviews .section-header { text-align: center; margin-bottom: 0; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.review-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.75rem;
  border: 1px solid rgba(178,194,214,0.4);
  box-shadow: 0 4px 20px rgba(11,31,58,0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(11,31,58,0.11);
}
.review-stars {
  font-size: 1.15rem;
  color: #f59e0b;
  letter-spacing: 3px;
  line-height: 1;
}
.review-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
  flex: 1;
  font-style: italic;
  quotes: "\201C" "\201D";
}
.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 1rem;
  border-top: 1px solid rgba(178,194,214,0.35);
}
.review-author__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e6fd9 0%, #185db5 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(30,111,217,0.3);
}
.review-author__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-author__info strong {
  font-size: 0.85rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}
.review-author__info span {
  font-size: 0.71rem;
  color: #6b7280;
}
.review-google-badge {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.85;
}
@media (max-width: 960px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .reviews-grid { grid-template-columns: 1fr; gap: 1rem; }
}


/* =========================================================
   ABOUT US PAGE — ENHANCED
   ========================================================= */

/* ── Hero ─────────────────────────────────────────────── */
.about-page-hero {
  padding: clamp(40px, 5vw, 72px) 0;
  margin: 0 auto;
  width: min(1400px, calc(100% - 3rem));
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.about-page-hero .container { position: relative; z-index: 1; }

.about-page-hero__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 420px);
  gap: 2.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.about-page-hero__content { max-width: 760px; }

.about-page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.1rem;
  backdrop-filter: blur(4px);
}
.about-page-hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  display: inline-block;
}

.about-page-hero__lead {
  max-width: 44rem;
  color: rgba(255,255,255,0.88);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-top: 0.9rem;
}

.about-page-hero__art {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 240px;
}
.about-page-hero__art img {
  width: min(100%, 360px);
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 36px rgba(7,21,43,0.22));
  transition: transform 0.4s ease;
}
.about-page-hero__art img:hover {
  transform: translateY(-4px) scale(1.02);
}

/* ── Quick-nav bar ─────────────────────────────────────── */
.about-page-nav {
  background: #fff;
  border-bottom: 1px solid var(--nl-gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(11,31,58,0.06);
}
.about-page-nav__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem 0;
}
.about-page-nav__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--nl-gray-200);
  border-radius: 0.875rem;
  background: var(--nl-gray-50);
  text-decoration: none;
  transition: transform var(--nl-transition), box-shadow var(--nl-transition), border-color var(--nl-transition), background var(--nl-transition);
}
.about-page-nav__item:hover {
  color: inherit;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(26,95,180,0.12);
  border-color: var(--nl-blue-300);
  background: var(--nl-blue-50);
}
.about-page-nav__label {
  font-weight: 800;
  color: var(--nl-blue-900);
  font-size: 0.93rem;
}
.about-page-nav__desc {
  color: var(--nl-gray-500);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ── Sections ─────────────────────────────────────────── */
.about-page-section { padding: 5rem 0; }
.about-page-section--alt { background: var(--nl-gray-50); }

.about-page-section__center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}
.about-page-section__split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 2.5rem;
  align-items: stretch;
}
.about-page-section__split--tight {
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 2.5rem;
  align-items: start;
  display: grid;
}

/* ── Typography helpers ────────────────────────────────── */
.about-page-copy { max-width: 700px; }
.about-page-kicker {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--nl-blue-600);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  position: relative;
  padding-bottom: 0.4rem;
}
.about-page-kicker::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2rem;
  height: 2px;
  border-radius: 1px;
  background: var(--nl-blue-400);
}
.about-page-heading {
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  line-height: 1.08;
  margin-bottom: 1rem;
  color: var(--nl-blue-900);
  letter-spacing: -0.02em;
}
.about-page-intro {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--nl-gray-600);
  margin-bottom: 0;
}
.about-page-copy p,
.about-page-section__intro p,
.about-page-card p,
.about-page-highlight-card p,
.about-page-partner-panel p {
  color: var(--nl-gray-600);
  line-height: 1.8;
  font-size: 0.98rem;
}
.about-page-copy p + p,
.about-page-card p + p,
.about-page-partner-panel p + p { margin-top: 0.95rem; }

/* ── Cards (shared base) ───────────────────────────────── */
.about-page-highlight-card,
.about-page-list-card,
.about-page-card,
.about-page-partner-panel {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: 1.25rem;
  box-shadow: 0 2px 14px rgba(11,31,58,0.07);
  transition: box-shadow var(--nl-transition), transform var(--nl-transition);
}
.about-page-highlight-card:hover,
.about-page-card:hover,
.about-page-feature:hover,
.about-page-service-card:hover {
  box-shadow: 0 8px 28px rgba(11,31,58,0.12);
  transform: translateY(-3px);
}

/* ── Company Overview — Panel ──────────────────────────── */
.about-page-panel {
  background: linear-gradient(145deg, var(--nl-blue-50) 0%, #fff 60%);
  border: 1px solid var(--nl-blue-100);
  border-radius: 1.5rem;
  padding: 2.25rem;
  box-shadow: 0 4px 20px rgba(26,95,180,0.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.about-page-panel__icon {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--nl-blue-600), var(--nl-blue-400));
  font-size: 1.65rem;
  box-shadow: 0 4px 12px rgba(26,95,180,0.25);
}
.about-page-panel h3 {
  font-size: 1.3rem;
  color: var(--nl-blue-900);
  margin: 0;
}
.about-page-panel p {
  color: var(--nl-gray-600);
  font-size: 0.97rem;
  line-height: 1.75;
  margin: 0;
}

/* ── Stats ─────────────────────────────────────────────── */
.about-page-stats {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.about-page-stat {
  padding: 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(160deg, var(--nl-blue-50), #fff);
  border: 1px solid var(--nl-blue-100);
  text-align: center;
  transition: box-shadow var(--nl-transition), transform var(--nl-transition);
}
.about-page-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(26,95,180,0.12);
}
.about-page-stat strong {
  display: block;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  color: var(--nl-blue-600);
  margin-bottom: 0.35rem;
  letter-spacing: -0.02em;
}
.about-page-stat span {
  font-size: 0.8rem;
  color: var(--nl-gray-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Feature grid (Why NetLayers) ──────────────────────── */
.about-page-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.about-page-feature {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 2px 10px rgba(11,31,58,0.06);
  transition: box-shadow var(--nl-transition), transform var(--nl-transition), border-color var(--nl-transition);
}
.about-page-feature:hover {
  border-color: var(--nl-blue-200);
}
.about-page-feature__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--nl-blue-50), var(--nl-blue-100));
  border: 1px solid var(--nl-blue-100);
  font-size: 1.4rem;
  margin-bottom: 1rem;
  transition: transform 0.25s ease;
}
.about-page-feature:hover .about-page-feature__icon {
  transform: scale(1.1) rotate(-3deg);
}
.about-page-feature h3 {
  font-size: 1.05rem;
  color: var(--nl-blue-900);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}
.about-page-feature p {
  color: var(--nl-gray-500);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

/* ── Mission & Vision dual cards ──────────────────────── */
.about-page-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.about-page-card {
  padding: 2.25rem;
  border-top: 4px solid var(--nl-blue-600);
  border-radius: 1.25rem;
  position: relative;
  overflow: hidden;
}
.about-page-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--nl-blue-50) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.about-page-card:hover::before { opacity: 1; }
.about-page-card--vision {
  border-top-color: var(--nl-teal);
}
.about-page-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--nl-blue-50), var(--nl-blue-100));
  border: 1px solid var(--nl-blue-100);
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
}
.about-page-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
  color: var(--nl-blue-900);
}

/* ── Services snapshot grid ────────────────────────────── */
.about-page-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.about-page-service-card {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: 0 2px 10px rgba(11,31,58,0.06);
  border-left: 4px solid var(--nl-blue-500);
  transition: box-shadow var(--nl-transition), transform var(--nl-transition), border-left-color var(--nl-transition);
}
.about-page-service-card:hover {
  border-left-color: var(--nl-blue-700);
  box-shadow: 0 8px 24px rgba(11,31,58,0.11);
  transform: translateY(-3px);
}
.about-page-service-card h3 {
  font-size: 1.05rem;
  color: var(--nl-blue-900);
  margin-bottom: 0.55rem;
  line-height: 1.3;
}
.about-page-service-card p {
  color: var(--nl-gray-500);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

/* ── Careers ───────────────────────────────────────────── */
.about-page-careers {
  background: linear-gradient(160deg, var(--nl-blue-50) 0%, #fff 100%);
  border: 1px solid var(--nl-blue-100);
  border-radius: 1.5rem;
  padding: 2.25rem;
}
.about-page-careers h3 {
  font-size: 1.15rem;
  color: var(--nl-blue-900);
  margin-bottom: 1.25rem;
}
.about-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.about-page-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--nl-blue-100);
}
.about-page-list li:last-child { border-bottom: none; }
.about-page-list li::before {
  content: "✓";
  color: var(--nl-blue-600);
  font-weight: 900;
  font-size: 0.9rem;
  margin-top: 0.1rem;
  grid-row: 1 / 3;
}
.about-page-list strong {
  color: var(--nl-blue-900);
  font-size: 0.95rem;
  display: block;
}
.about-page-list span {
  color: var(--nl-gray-500);
  font-size: 0.87rem;
  line-height: 1.6;
  grid-column: 2;
}

/* ── Partners box ──────────────────────────────────────── */
.about-page-partner-box {
  max-width: 680px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--nl-blue-50), #fff);
  border: 1px solid var(--nl-blue-100);
  border-radius: 1.5rem;
  padding: 2.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(26,95,180,0.07);
}
.about-page-partner-box p {
  color: var(--nl-gray-600);
  font-size: 0.98rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* ── CTA strip ─────────────────────────────────────────── */
.about-page-cta {
  margin-top: 0;
}
.about-page-cta__box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2.25rem 2.5rem;
  border-radius: 1.5rem;
}
.about-page-cta__box h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: 0.5rem;
  color: inherit;
}
.about-page-cta__box p {
  opacity: 0.88;
  max-width: 520px;
  line-height: 1.7;
  font-size: 0.97rem;
}
.about-page-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  white-space: nowrap;
}

/* ── Misc helpers ──────────────────────────────────────── */
.about-page-section__intro { max-width: 720px; margin-bottom: 2rem; }
.about-page-section__intro--center { margin-left: auto; margin-right: auto; text-align: center; }
.about-page-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 1.5rem; }
.about-page-actions--center { justify-content: center; }
.about-page-partner-panel { max-width: 760px; margin: 0 auto; padding: 2rem; text-align: center; }
.about-page-highlight-card {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
}
.about-page-highlight-card__icon,
.about-page-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nl-blue-50);
  border: 1px solid var(--nl-blue-100);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.about-page-highlight-card h3,
.about-page-list-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
  color: var(--nl-blue-900);
}
.about-page-list-card { padding: 2rem; }
.about-page-grid { display: grid; gap: 1.25rem; }
.about-page-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-page-feature-list { display: flex; flex-direction: column; gap: 1rem; }
.about-page-feature-list li { display: grid; gap: 0.25rem; padding: 0.95rem 0; border-bottom: 1px solid var(--nl-gray-200); }
.about-page-feature-list li:last-child { border-bottom: 0; }
.about-page-feature-list strong { color: var(--nl-blue-900); font-size: 0.98rem; }
.about-page-feature-list span { color: var(--nl-gray-600); line-height: 1.7; font-size: 0.92rem; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .about-page-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-page-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .about-page-nav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-page-section__split,
  .about-page-section__split--tight,
  .about-page-cta__box {
    grid-template-columns: 1fr;
  }
  .about-page-hero__wrap {
    grid-template-columns: 1fr;
  }
  .about-page-hero__art { display: none; }
  .about-page-dual-grid { grid-template-columns: 1fr; }
  .about-page-cta__actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .about-page-nav__grid,
  .about-page-dual-grid,
  .about-page-stats,
  .about-page-feature-grid,
  .about-page-service-grid {
    grid-template-columns: 1fr;
  }
  .about-page-section { padding: 3.5rem 0; }
  .about-page-heading { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .about-page-card,
  .about-page-list-card,
  .about-page-highlight-card,
  .about-page-partner-panel,
  .about-page-panel,
  .about-page-careers { padding: 1.5rem; }
  .about-page-cta__box { padding: 1.75rem; }
  .about-page-hero__lead { font-size: 0.97rem; }
}

/* About Us hero cleanup: remove extra decorative background artwork */
.page-hero--about .page-hero__bg-icon {
  display: none !important;
}

/* ================================================================
   ABOUT US HERO — cleaned up, defers to template-about.php styles
================================================================ */
/* No overrides needed — all hero styles are in template-about.php */
/* ================================================================ */

/* ================================================================
   ABOUT US — Company Overview section spacing fix
   Reduces excess whitespace, balances the two-column layout
================================================================ */

/* Tighter section padding overall */
.about-page-section {
  padding: 3rem 0 !important;
}

/* The split grid: give both columns equal weight so the left
   doesn't feel so wide and empty */
.about-page-section__split {
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
  align-items: center !important;
}

/* Cap the copy column so text doesn't stretch too wide */
.about-page-copy {
  max-width: 480px !important;
}

/* Tighten paragraph spacing inside copy */
.about-page-copy p {
  font-size: 0.95rem !important;
  line-height: 1.75 !important;
  margin-bottom: 0.85rem !important;
}

/* Panel: remove excess internal padding */
.about-page-panel {
  padding: 1.75rem !important;
}

/* Stats row: tighter */
.about-page-stats {
  margin-top: 1.25rem !important;
  gap: 0.75rem !important;
}

.about-page-stat {
  padding: 0.9rem 0.75rem !important;
}

/* ================================================================ */

/* ================================================================
   ABOUT US — CTA strip: match the site-wide blue cta-band style
================================================================ */
.about-page-cta {
  background: linear-gradient(135deg, var(--nl-blue-900) 0%, var(--nl-blue-700) 100%) !important;
  padding: 1.8rem 0 !important;
}

/* Make sure all text and buttons are white/visible on dark bg */
.about-page-cta .about-page-cta__box h2 {
  color: #fff !important;
}
.about-page-cta .about-page-cta__box p {
  color: rgba(255,255,255,0.86) !important;
}
.about-page-cta .btn--primary {
  background: #fff !important;
  color: var(--nl-blue-900) !important;
  border-color: #fff !important;
}
.about-page-cta .btn--primary:hover {
  background: rgba(255,255,255,0.9) !important;
}
.about-page-cta .btn--outline,
.about-page-cta .btn--light {
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
  background: transparent !important;
}
.about-page-cta .btn--outline:hover,
.about-page-cta .btn--light:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: #fff !important;
}
/* ================================================================ */

/* ================================================================
   ABOUT US — CTA strip: reduce top/bottom padding
================================================================ */
.about-page-cta {
  padding: 1.25rem 0 !important;
}
.about-page-cta__box {
  gap: 1rem !important;
}
.about-page-cta__box h2 {
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  margin-bottom: 0.25rem !important;
}
.about-page-cta__box p {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}
/* ================================================================ */

/* ================================================================
   ABOUT US — CTA strip: trim top/bottom padding only, text unchanged
================================================================ */
.about-page-cta {
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}
/* ================================================================ */

/* ================================================================
   ABOUT US — CTA strip: cut padding further, revert text sizes
================================================================ */
.about-page-cta {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
/* Revert any text size changes from previous edits */
.about-page-cta__box h2 {
  font-size: revert !important;
  margin-bottom: revert !important;
}
.about-page-cta__box p {
  font-size: revert !important;
  line-height: revert !important;
}
/* ================================================================ */

/* ================================================================
   About Us quick-nav — scroll-spy active state
================================================================ */
.about-page-nav__item.is-active {
  background: var(--nl-blue-600) !important;
  border-color: var(--nl-blue-600) !important;
  color: #fff !important;
}

.about-page-nav__item.is-active .about-page-nav__label {
  color: #fff !important;
}

.about-page-nav__item.is-active .about-page-nav__desc {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Remove the hover underline trick when already active */
.about-page-nav__item.is-active::after {
  transform: scaleX(0) !important;
}

/* Smooth transition in/out */
.about-page-nav__item {
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
/* ================================================================ */

/* ================================================================
   About Us — Service cards: icon styling
================================================================ */
.about-page-service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--nl-blue-50);
  border: 1px solid var(--nl-blue-100);
  color: var(--nl-blue-600);
  margin-bottom: 1rem;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.about-page-service-card:hover .about-page-service-card__icon {
  background: var(--nl-blue-100);
  color: var(--nl-blue-700);
}
/* ================================================================ */

/* ================================================================
   About Us — Mission & Vision cards: distinct coloured styling
================================================================ */

/* --- Mission card: blue --- */
.about-page-card--mission {
  background: linear-gradient(160deg, #eef5ff 0%, #fff 60%) !important;
  border: 1px solid #c3d9f8 !important;
  border-left: 4px solid var(--nl-blue-600) !important;
  border-radius: 1.25rem !important;
}

.about-page-card--mission h3 {
  color: var(--nl-blue-800) !important;
}

.about-page-card--mission .about-page-card__icon {
  background: #daeaf9 !important;
  border-color: #b8d5f5 !important;
}

/* --- Vision card: teal/cyan --- */
.about-page-card--vision {
  background: linear-gradient(160deg, #e8f9f7 0%, #fff 60%) !important;
  border: 1px solid #b2e4dd !important;
  border-left: 4px solid #0e9e8a !important;
  border-radius: 1.25rem !important;
}

.about-page-card--vision h3 {
  color: #0a6b5e !important;
}

.about-page-card--vision .about-page-card__icon {
  background: #c8f0eb !important;
  border-color: #9de3da !important;
}

/* Keep hover lift consistent for both */
.about-page-card--mission:hover,
.about-page-card--vision:hover {
  box-shadow: 0 10px 32px rgba(11,31,58,0.11) !important;
  transform: translateY(-4px) !important;
}
/* ================================================================ */

/* ================================================================
   About Us — Remove kicker underline + tighten section top spacing
================================================================ */

/* Remove the blue underline beneath kicker labels */
.about-page-kicker::after {
  display: none !important;
}

.about-page-kicker {
  padding-bottom: 0 !important;
}

/* Pull each section up */
.about-page-section {
  padding-top: 2rem !important;
}

/* Tighten the centre header block margin too */
.about-page-section__center {
  margin-bottom: 1.75rem !important;
}
/* ================================================================ */

/* ================================================================
   ABOUT US HERO — Responsive (mobile)
================================================================ */
@media (max-width: 900px) {
  .about-page-hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .about-page-hero__photo {
    display: none;
  }
}
/* ================================================================ */

/* ================================================================
   ABOUT US — Fix eyebrow pill width in hero
================================================================ */
.about-page-hero__eyebrow {
  display: inline-flex !important;
  width: auto !important;
  max-width: fit-content !important;
  align-self: flex-start !important;
}
/* ================================================================ */

/* ================================================================
   ABOUT US — Partner box heading
================================================================ */
.about-page-partner-box h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--nl-blue-900);
  margin-bottom: 0.6rem;
}
/* ================================================================ */

/* ================================================================
   ABOUT US — Careers: fill left column
================================================================ */
.about-page-careers__note {
  font-size: 0.93rem;
  color: var(--nl-gray-600);
  line-height: 1.65;
  margin-bottom: 1.25rem !important;
}

.about-page-careers__apply {
  background: var(--nl-blue-50);
  border: 1px solid var(--nl-blue-100);
  border-left: 3px solid var(--nl-blue-500);
  border-radius: 0.75rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
}

.about-page-careers__apply-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nl-blue-600);
  margin-bottom: 0.3rem;
}

.about-page-careers__apply p {
  font-size: 0.92rem;
  color: var(--nl-gray-700);
  margin: 0;
  line-height: 1.5;
}

.about-page-careers__apply a {
  color: var(--nl-blue-600);
  font-weight: 600;
  text-decoration: none;
}

.about-page-careers__apply a:hover {
  text-decoration: underline;
}
/* ================================================================ */


/* CONTACT PAGE MAP SECTION */
.contact-map-section {
  padding: 0 0 5rem;
  height: auto;
  background: transparent;
  display: block;
}
.contact-map-card {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  gap: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--nl-gray-200);
  box-shadow: var(--nl-shadow-lg);
}
.contact-map-embed {
  min-height: 380px;
  background: var(--nl-gray-100);
}
.contact-map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
}
.contact-map-details {
  padding: 2.5rem;
  background: linear-gradient(135deg, var(--nl-blue-800) 0%, var(--nl-blue-600) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-map-details .section-label,
.contact-map-details .section-title,
.contact-map-address,
.contact-map-note {
  color: #fff;
}
.contact-map-details .section-title {
  margin-bottom: 1rem;
}
.contact-map-address {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 0.9rem;
}
.contact-map-note {
  font-size: 0.95rem;
  line-height: 1.7;
  opacity: 0.92;
  margin: 0 0 1.5rem;
}
@media (max-width: 991px) {
  .contact-map-card {
    grid-template-columns: 1fr;
  }
  .contact-map-embed,
  .contact-map-embed iframe {
    min-height: 320px;
  }
}

/* =========================================================
   CONTACT PAGE ADDITIONS — sidebar cards, details list,
   social links, map info list  (v2.2 patch)
   ========================================================= */

/* Sidebar cards */
.contact-sidebar-card {
  background: var(--nl-white);
  border: 1.5px solid var(--nl-gray-200);
  border-radius: var(--nl-radius-xl);
  padding: 1.75rem;
  transition: box-shadow var(--nl-transition), border-color var(--nl-transition);
}
.contact-sidebar-card:hover {
  box-shadow: var(--nl-shadow-md);
  border-color: var(--nl-blue-200);
}
.contact-sidebar-card h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--nl-blue-900);
  margin-bottom: 1rem;
}
.contact-sidebar-card p {
  font-size: 0.85rem;
  color: var(--nl-gray-500);
  line-height: 1.65;
  margin: 0 0 0.75rem;
}
.contact-hours-card { border-left: 4px solid var(--nl-blue-500); }
.contact-details-card { border-left: 4px solid var(--nl-accent); }
.hours-note { font-size: 0.8rem; color: var(--nl-gray-500); line-height: 1.6; margin-top: 0.75rem; }

/* Direct contact list */
.contact-details-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.contact-details-list li { display: grid; grid-template-columns: 58px 1fr; gap: 0.5rem; font-size: 0.875rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--nl-gray-100); }
.contact-details-list li:last-child { border-bottom: none; padding-bottom: 0; }
.contact-details-list__label { font-weight: 700; color: var(--nl-gray-500); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0.1rem; }
.contact-details-list__value { color: var(--nl-blue-900); font-weight: 600; line-height: 1.5; }
a.contact-details-list__value:hover { color: var(--nl-blue-600); }

/* Social links */
.social-links { display: flex; gap: 0.75rem; margin-top: 0.25rem; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--nl-radius-md); border: 1.5px solid var(--nl-gray-200); color: var(--nl-gray-600); transition: background var(--nl-transition), border-color var(--nl-transition), color var(--nl-transition), transform var(--nl-transition); }
.social-link:hover { transform: translateY(-2px); }
.social-link--facebook:hover { background: #e8f0fe; border-color: #1877f2; color: #1877f2; }
.social-link--linkedin:hover { background: #e9f4fb; border-color: #0a66c2; color: #0a66c2; }

/* Map info list */
.contact-map-info-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.contact-map-info-list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: rgba(255,255,255,0.9); line-height: 1.55; }
.contact-map-info-list li svg { flex-shrink: 0; margin-top: 0.2rem; opacity: 0.85; }
.contact-map-info-list a { color: rgba(255,255,255,0.9); font-weight: 600; transition: color var(--nl-transition); }
.contact-map-info-list a:hover { color: #fff; }

/* Sidebar gap */
.contact-sidebar { gap: 1.25rem; }

/* =========================================================
   CONTACT MAP SECTION — layout fix (overrides legacy rules)
   ========================================================= */
.contact-map-section {
  padding: 0 0 5rem !important;
  height: auto !important;
  background: transparent !important;
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
}
.contact-map-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr) !important;
  gap: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(11,31,58,0.18) !important;
  border: none !important;
  min-height: 460px !important;
}
.contact-map-embed {
  position: relative !important;
  min-height: 460px !important;
  height: 100% !important;
  background: var(--nl-gray-100) !important;
}
.contact-map-embed iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 460px !important;
  display: block !important;
  border: 0 !important;
}
.contact-map-details {
  padding: 3rem 2.5rem !important;
  background: linear-gradient(160deg, #0b1f3a 0%, #1a5fb4 100%) !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
}
.contact-map-details .section-label {
  color: rgba(255,255,255,0.7) !important;
  letter-spacing: 0.12em !important;
}
.contact-map-details .section-title {
  color: #fff !important;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  margin-bottom: 1.5rem !important;
}
.contact-map-info-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}
.contact-map-info-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  font-size: 0.9375rem !important;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1.6 !important;
}
.contact-map-info-list li svg {
  flex-shrink: 0 !important;
  margin-top: 0.2rem !important;
  opacity: 0.8 !important;
}
.contact-map-info-list a {
  color: rgba(255,255,255,0.92) !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}
.contact-map-info-list a:hover { color: #fff !important; }
.contact-map-note {
  font-size: 0.875rem !important;
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.65 !important;
  margin: 0 0 1.75rem !important;
}
.contact-map-details .btn--white {
  align-self: flex-start !important;
  background: #fff !important;
  color: var(--nl-blue-800) !important;
  border-color: #fff !important;
  font-weight: 700 !important;
  padding: 0.8rem 1.5rem !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
  text-decoration: none !important;
}
.contact-map-details .btn--white:hover {
  background: #e8f0ff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
  color: var(--nl-blue-900) !important;
}
/* Responsive */
@media (max-width: 900px) {
  .contact-map-card {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
  }
  .contact-map-embed,
  .contact-map-embed iframe {
    position: relative !important;
    min-height: 320px !important;
    height: 320px !important;
  }
}
/* ========================================================= */

/* =====================================================
   NL MAP SECTION — fresh class names, zero conflicts
   ===================================================== */
.nl-map-section {
  padding: 0 0 5rem;
}
.nl-map-wrap {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 480px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(11,31,58,0.16);
}
.nl-map-iframe-col {
  position: relative;
  min-height: 480px;
}
.nl-map-iframe-col iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.nl-map-info-col {
  background: linear-gradient(160deg, #0b2244 0%, #1a5fb4 100%);
  padding: 3rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nl-map-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.6rem;
}
.nl-map-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.75rem;
  line-height: 1.2;
}
.nl-map-details {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nl-map-details li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255,255,255,0.92);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.nl-map-details li svg {
  flex-shrink: 0;
  margin-top: 0.18rem;
  color: rgba(255,255,255,0.7);
}
.nl-map-details a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.nl-map-details a:hover {
  opacity: 0.8;
}
.nl-map-note {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin: 0 0 1.75rem;
}
.nl-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  color: #0b2244;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  border: 2px solid #ffffff;
}
.nl-map-btn:hover {
  background: #dbeafe;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  color: #0b2244;
}
@media (max-width: 900px) {
  .nl-map-wrap {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .nl-map-iframe-col {
    min-height: 300px;
    height: 300px;
  }
  .nl-map-info-col {
    padding: 2rem 1.5rem;
  }
}
/* ===================================================== */

/* =====================================================
   NL CONTACT DETAIL LIST — sidebar direct contact
   Clean label / value rows with proper spacing
   ===================================================== */
.nl-contact-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nl-contact-detail-list li {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--nl-blue-100);
}
.nl-contact-detail-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.nl-detail-label {
  flex-shrink: 0;
  width: 72px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nl-blue-500);
  padding-top: 0.1rem;
}
.nl-detail-value {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nl-blue-900);
  line-height: 1.5;
  text-decoration: none;
}
a.nl-detail-value:hover {
  color: var(--nl-blue-600);
}

/* =====================================================
   NL MAP SECTION — fresh classes, zero legacy conflicts
   ===================================================== */
.nl-map-section {
  padding: 0 0 5rem;
  display: block;
}
.nl-map-wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  min-height: 460px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(11,31,58,0.15);
}
.nl-map-iframe-col {
  position: relative;
  min-height: 460px;
}
.nl-map-iframe-col iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}
.nl-map-info-col {
  background: linear-gradient(160deg, #0b2244 0%, #1658a8 100%);
  padding: 3rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.nl-map-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.5rem;
}
.nl-map-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.nl-map-address {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: rgba(255,255,255,0.92);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.nl-map-address svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: rgba(255,255,255,0.6);
}
.nl-map-note {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin: 0 0 1.75rem;
}
.nl-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  color: #0b2244;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  align-self: flex-start;
  border: 2px solid #ffffff;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nl-map-btn:hover {
  background: #dbeafe;
  color: #0b2244;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
@media (max-width: 900px) {
  .nl-map-wrap {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .nl-map-iframe-col {
    height: 300px;
    min-height: 300px;
  }
  .nl-map-info-col {
    padding: 2rem 1.5rem;
  }
}
/* ===================================================== */

/* =====================================================
   CONTACT SIDEBAR — align to top of form, gap fix
   ===================================================== */
.contact-layout {
  align-items: start !important;
}
.contact-sidebar {
  position: sticky;
  top: 2rem;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

/* Direct contact list — icon + value, no labels */
.nl-contact-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nl-contact-detail-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--nl-blue-100);
  color: var(--nl-blue-900);
}
.nl-contact-detail-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.nl-contact-detail-list li svg {
  flex-shrink: 0;
  color: var(--nl-blue-500);
}
.nl-detail-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nl-blue-900);
  text-decoration: none;
  line-height: 1.4;
}
a.nl-detail-value:hover {
  color: var(--nl-blue-600);
}
/* ===================================================== */

/* =====================================================
   CONTACT SIDEBAR — push down to align with form box
   The heading above the form is approx 130px tall,
   so we offset the sidebar by the same amount.
   ===================================================== */
.contact-sidebar {
  padding-top: 130px !important;
}
@media (max-width: 1024px) {
  .contact-sidebar {
    padding-top: 0 !important;
  }
}
/* ===================================================== */

/* Push sidebar down further to align with form box top edge */
.contact-sidebar {
  padding-top: 195px !important;
}
@media (max-width: 1024px) {
  .contact-sidebar {
    padding-top: 0 !important;
  }
}

/* Align sidebar with "How Can We Help?" heading — corrected offset */
.contact-sidebar {
  padding-top: 0 !important;
}

/* Align sidebar cards with top of the white form box */
.contact-sidebar {
  padding-top: 80px !important;
}
@media (max-width: 1024px) {
  .contact-sidebar {
    padding-top: 0 !important;
  }
}

/* Final sidebar alignment adjustment */
.contact-sidebar {
  padding-top: 145px !important;
}
@media (max-width: 1024px) {
  .contact-sidebar {
    padding-top: 0 !important;
  }
}

/* =====================================================
   CONTACT INFO CARDS — more spacious + hover animation
   ===================================================== */
.contact-info-card {
  padding: 2.5rem 1.75rem !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  cursor: default;
}
.contact-info-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(26,95,180,0.15) !important;
  border-color: var(--nl-blue-400) !important;
}
.contact-info-card__icon {
  width: 3.75rem !important;
  height: 3.75rem !important;
  margin-bottom: 1.25rem !important;
}
.contact-info-card__icon svg {
  width: 1.6rem !important;
  height: 1.6rem !important;
}
.contact-info-card__label {
  font-size: 0.7rem !important;
  margin-bottom: 0.6rem !important;
}
.contact-info-card__value {
  font-size: 1.0625rem !important;
  margin-bottom: 0.5rem !important;
}
.contact-info-card__note {
  font-size: 0.825rem !important;
}
/* ===================================================== */

/* Remove excess whitespace below contact info cards */
.contact-info-grid {
  margin-bottom: 0 !important;
}

/* Contact hero — text only, centred, no photo */
.contact-page-hero__inner { display: block !important; }
.contact-page-hero__content {
  flex: unset !important;
  padding: 0 !important;
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}
.contact-page-hero__lead {
  max-width: 100% !important;
  margin-bottom: 0 !important;
}
.contact-page-hero__actions { display: none !important; }
.contact-page-hero__photo { display: none !important; }

/* Contact hero — more height, curve sits lower */
.contact-page-hero {
  padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 120px) !important;
}
.contact-page-hero::after {
  height: 90px !important;
}

/* Contact hero — more padding bottom only */
.contact-page-hero {
  padding-bottom: clamp(120px, 14vw, 160px) !important;
}

/* Contact hero — reduce top padding only */
.contact-page-hero {
  padding-top: 30px !important;
}

/* Contact hero — fine tuned top and bottom */
.contact-page-hero {
  padding-top: 55px !important;
  padding-bottom: clamp(120px, 14vw, 160px) !important;
}

/* Contact hero — top padding nudge */
.contact-page-hero {
  padding-top: 70px !important;
}

/* Reduce white gap between hero curve and info cards */
.contact-info-grid {
  padding-top: 0 !important;
}
.section.section--light {
  padding-top: 1.5rem !important;
}


/* RESIDENTIAL INTERNET REDESIGN */
.residential-internet-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  width: min(1400px, calc(100% - 3rem));
  margin: 0 auto;
  border-radius: 0;
}
.residential-internet-hero::after { display: none; }
.residential-internet-hero .container {
  position: relative;
  z-index: 1;
}
.res-int-hero {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  min-height: 560px;
  margin-top: calc(-1 * clamp(48px, 6vw, 72px));
  margin-bottom: calc(-1 * clamp(84px, 9vw, 112px));
}
.res-int-hero__content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 3rem);
}
.res-int-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.res-int-hero__content .page-hero__title {
  max-width: 680px;
}
.res-int-hero__content .page-hero__subtitle {
  max-width: 560px;
}
.res-int-hero__visual {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  margin-right: calc(-1 * clamp(5rem, 12vw, 9rem));
}
.res-int-hero__image-wrap {
  position: relative;
  overflow: hidden;
  width: calc(100% + clamp(5rem, 12vw, 9rem));
  min-height: 100%;
  border-radius: 0;
  box-shadow: none;
  border: none;
}
.res-int-hero__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,31,58,.42) 0%, rgba(11,31,58,.12) 38%, rgba(11,31,58,0) 70%);
  pointer-events: none;
}
.res-int-hero__image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.res-int-hero__image-badge {
  display: none !important;
}

.res-int-benefits {
  background: #fff;
  border-bottom: 1px solid var(--nl-gray-100);
}
.res-int-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.2rem 0;
}
.res-int-benefit {
  background: var(--nl-gray-50);
  border: 1px solid var(--nl-gray-200);
  border-radius: 1rem;
  padding: 1rem 1rem 0.95rem;
}
.res-int-benefit strong {
  display: block;
  color: var(--nl-blue-900);
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.res-int-benefit span {
  display: block;
  color: var(--nl-gray-600);
  font-size: 0.84rem;
  line-height: 1.55;
}
.res-int-subnav {
  background: #fff;
  border-bottom: 1px solid var(--nl-gray-100);
  position: sticky;
  top: 0;
  z-index: 90;
}
.res-int-subnav__inner {
  display: flex;
  gap: 1.35rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0;
}
.res-int-subnav__inner a:not(.btn) {
  color: var(--nl-gray-600);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}
.res-int-subnav__inner a:not(.btn):hover {
  color: var(--nl-blue-600);
}
.res-int-subnav__inner a:not(.btn).is-active {
  color: var(--nl-blue-600);
}

.res-int-section {
  padding: clamp(2rem, 3vw, 3rem) 0;
}
.res-int-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 430px);
  gap: 2rem;
  align-items: center;
}
.res-int-split--reverse {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1.1fr);
}
.res-int-copy__lead {
  text-align: left;
  max-width: none;
  margin: 0 0 1rem;
}
.res-int-copy p {
  color: var(--nl-gray-600);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.res-int-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.res-int-checklist {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0;
  display: grid;
  gap: 0.7rem;
}
.res-int-checklist li {
  position: relative;
  padding-left: 1.65rem;
  color: var(--nl-gray-700);
  font-size: 0.95rem;
  line-height: 1.6;
}
.res-int-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.02rem;
  color: var(--nl-blue-600);
  font-weight: 800;
}
.res-int-card-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.res-int-summary-card {
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 60%, #1a5fb4 100%);
  border-radius: 1.5rem;
  padding: 2rem;
  color: #fff;
  box-shadow: 0 16px 36px rgba(11,31,58,0.14);
}
.res-int-summary-card__value {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.res-int-summary-card__label {
  font-size: 0.84rem;
  opacity: 0.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.55rem;
}
.res-int-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.res-int-summary-tile {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--nl-shadow-xs);
}
.res-int-summary-tile strong {
  display: block;
  color: var(--nl-blue-900);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}
.res-int-summary-tile span {
  color: var(--nl-gray-600);
  font-size: 0.82rem;
}
.res-int-visual-card {
  background: #fff;
  border: 1px solid var(--nl-blue-100);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: var(--nl-shadow-card);
}
.res-int-visual-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: linear-gradient(135deg,#0f3d7a,#1a5fb4);
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.res-int-visual-card h3 {
  color: var(--nl-blue-900);
  font-size: 1.25rem;
  margin-bottom: 0.65rem;
}
.res-int-visual-card p {
  color: var(--nl-gray-600);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.res-int-mini-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
.res-int-mini-list li {
  color: var(--nl-gray-700);
  font-size: 0.92rem;
  padding-left: 1.4rem;
  position: relative;
}
.res-int-mini-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--nl-blue-600);
  font-weight: 900;
}
.res-int-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2rem;
}
.res-int-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.res-int-feature-card {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--nl-shadow-xs);
}
.res-int-feature-card h3 {
  color: var(--nl-blue-900);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.res-int-feature-card p {
  color: var(--nl-gray-600);
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
}
.res-int-hardware-card {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border: 1px solid var(--nl-blue-100);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: var(--nl-shadow-card);
  display: grid;
  gap: 0.8rem;
}
.res-int-hardware-card__row {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: 1rem;
  padding: 1rem 1rem 0.95rem;
}
.res-int-hardware-card__row strong {
  display: block;
  color: var(--nl-blue-900);
  margin-bottom: 0.2rem;
}
.res-int-hardware-card__row span {
  color: var(--nl-gray-600);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .res-int-hero,
  .res-int-split,
  .res-int-split--reverse {
    display: grid;
    grid-template-columns: 1fr;
  }
  .res-int-feature-grid,
  .res-int-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .res-int-hero {
    min-height: auto;
    margin-top: 0;
    margin-bottom: 0;
  }
  .res-int-hero__content {
    padding: clamp(40px, 5vw, 56px) 0 2rem;
  }
  .res-int-hero__visual {
    width: 100%;
    flex-basis: auto;
  }
  .res-int-hero__image-wrap,
  .res-int-hero__image {
    min-height: 340px;
  }
}
@media (max-width: 700px) {
  .residential-internet-hero {
    width: min(1400px, calc(100% - 1.5rem));
    padding-bottom: 84px;
  }
  .res-int-feature-grid,
  .res-int-benefits__grid,
  .res-int-summary-grid {
    grid-template-columns: 1fr;
  }
  .res-int-subnav__inner {
    gap: 0.9rem;
  }
  .res-int-hero__content {
    padding: 36px 0 1.8rem;
  }
  .res-int-hero__image-wrap,
  .res-int-hero__image {
    min-height: 280px;
  }
}


@media (max-width: 1100px) {
  .res-int-hero__visual {
    margin-right: 0;
  }
  .res-int-hero {
    min-height: auto;
  }
  .res-int-hero__content {
    padding: clamp(44px, 6vw, 60px) 0 2rem;
  }
}


@media (max-width: 1100px) {
  .res-int-hero__visual {
    margin-right: 0 !important;
    flex-basis: auto !important;
  }
  .res-int-hero__image-wrap {
    width: 100% !important;
  }
}

/* =========================================================
   RESIDENTIAL INTERNET — benefit cards & stat panel
   (template-internet.php redesign)
   ========================================================= */

/* 2×2 benefit card grid (replaces plain checklist) */
.res-int-benefit-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1.5rem 0 1.75rem;
}
.res-int-benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--nl-gray-50);
  border: 1px solid var(--nl-gray-200);
  border-radius: var(--nl-radius-lg);
  padding: 1rem;
}
.res-int-benefit-card__icon {
  width: 2.125rem;
  height: 2.125rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--nl-blue-50);
  color: var(--nl-blue-600);
  border: 1px solid var(--nl-blue-100);
}
.res-int-benefit-card__title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nl-blue-900);
  margin-bottom: 0.2rem;
}
.res-int-benefit-card__sub {
  display: block;
  font-size: 0.8rem;
  color: var(--nl-gray-600);
  line-height: 1.5;
}

/* Unified stat panel */
.res-int-stat-panel {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: var(--nl-radius-xl);
  overflow: hidden;
  box-shadow: var(--nl-shadow-card);
}
.res-int-stat-panel__header {
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 60%, #1a5fb4 100%);
  padding: 1.75rem 1.75rem 1.5rem;
  color: #fff;
}
.res-int-stat-panel__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.5rem;
}
.res-int-stat-panel__speed {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
}
.res-int-stat-panel__unit {
  font-size: 1.25rem;
  font-weight: 700;
  opacity: 0.75;
  margin-left: 0.2rem;
}
.res-int-stat-panel__tag {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
}

/* 2×2 stat grid with hairline dividers */
.res-int-stat-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--nl-gray-100);
}
.res-int-stat-panel__cell {
  padding: 1.1rem 1.4rem;
  border-right: 1px solid var(--nl-gray-100);
  border-bottom: 1px solid var(--nl-gray-100);
}
.res-int-stat-panel__cell:nth-child(even) {
  border-right: none;
}
.res-int-stat-panel__cell:nth-child(3),
.res-int-stat-panel__cell:nth-child(4) {
  border-bottom: none;
}
.res-int-stat-panel__cell strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--nl-blue-900);
  line-height: 1.1;
  margin-bottom: 0.2rem;
}
.res-int-stat-panel__cell span {
  font-size: 0.78rem;
  color: var(--nl-gray-500);
  line-height: 1.4;
}

/* Feature list inside panel */
.res-int-stat-panel__features {
  list-style: none;
  padding: 1.1rem 1.5rem;
  margin: 0;
  display: grid;
  gap: 0.625rem;
  border-top: 1px solid var(--nl-gray-100);
}
.res-int-stat-panel__features li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--nl-gray-700);
  line-height: 1.5;
}
.res-int-stat-panel__features li svg {
  color: var(--nl-green);
  flex-shrink: 0;
}

/* Footer note */
.res-int-stat-panel__footer {
  border-top: 1px solid var(--nl-gray-100);
  padding: 0.875rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--nl-gray-500);
  text-align: center;
}
.res-int-stat-panel__footer a {
  color: var(--nl-blue-600);
  font-weight: 600;
  text-decoration: none;
}
.res-int-stat-panel__footer a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 600px) {
  .res-int-benefit-cards {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   RURAL INTERNET — photo stack + coverage card
   (template-internet.php redesign)
   ========================================================= */

/* Left column: photo stacked above coverage card */
.res-int-rural-left {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Photo */
.res-int-rural-photo {
  border-radius: var(--nl-radius-xl);
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--nl-gray-100);
}
.res-int-rural-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Coverage card wrapper */
.res-int-coverage-card {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: var(--nl-radius-xl);
  overflow: hidden;
  box-shadow: var(--nl-shadow-card);
}

/* Signal bar map */
.res-int-coverage-card__map {
  padding: 1.25rem 1.375rem 1rem;
}
.res-int-coverage-card__map-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nl-gray-400);
  margin-bottom: 0.875rem;
}
.res-int-coverage-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}
.res-int-coverage-row:last-child {
  margin-bottom: 0;
}
.res-int-coverage-row__label {
  font-size: 0.78rem;
  color: var(--nl-gray-600);
  width: 5rem;
  flex-shrink: 0;
}
.res-int-coverage-row__bar-wrap {
  flex: 1;
  height: 7px;
  background: var(--nl-gray-100);
  border-radius: 999px;
  overflow: hidden;
}
.res-int-coverage-row__bar {
  height: 100%;
  border-radius: 999px;
}
.res-int-coverage-row__bar--full {
  width: 100%;
  background: var(--nl-green);
}
.res-int-coverage-row__bar--high {
  width: 82%;
  background: var(--nl-green);
}
.res-int-coverage-row__bar--mid {
  width: 58%;
  background: var(--nl-blue-400);
}
.res-int-coverage-row__val {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nl-gray-500);
  width: 4.5rem;
  text-align: right;
  flex-shrink: 0;
}

/* 2-cell stat row */
.res-int-coverage-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--nl-gray-100);
}
.res-int-coverage-card__stat {
  padding: 0.875rem 1.125rem;
  border-right: 1px solid var(--nl-gray-100);
}
.res-int-coverage-card__stat:last-child {
  border-right: none;
}
.res-int-coverage-card__stat strong {
  display: block;
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--nl-blue-900);
  line-height: 1.1;
  margin-bottom: 0.2rem;
}
.res-int-coverage-card__stat span {
  font-size: 0.75rem;
  color: var(--nl-gray-500);
}

/* Footer note */
.res-int-coverage-card__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-top: 1px solid var(--nl-gray-100);
  font-size: 0.78rem;
  color: var(--nl-gray-500);
}
.res-int-coverage-card__note-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nl-green);
  flex-shrink: 0;
}

/* Responsive: stack on mobile */
@media (max-width: 900px) {
  .res-int-rural-left {
    width: 100%;
  }
  .res-int-rural-photo {
    aspect-ratio: 16 / 7;
  }
}

/* =========================================================
   HARDWARE — minimal icon cards + included panel
   (template-internet.php redesign)
   ========================================================= */

/* 2×2 icon-only cards */
.res-int-hw-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1.5rem 0 1.75rem;
}
.res-int-hw-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: var(--nl-radius-lg);
  padding: 0.875rem 1rem;
}
.res-int-hw-card__icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--nl-blue-50);
  color: var(--nl-blue-600);
  border: 1px solid var(--nl-blue-100);
}
.res-int-hw-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nl-blue-900);
}

/* What's included panel */
.res-int-hw-panel {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: var(--nl-radius-xl);
  overflow: hidden;
  box-shadow: var(--nl-shadow-card);
  align-self: center;
}
.res-int-hw-panel__header {
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 60%, #1a5fb4 100%);
  padding: 1.5rem 1.75rem;
}
.res-int-hw-panel__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.35rem;
}
.res-int-hw-panel__value {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}
.res-int-hw-panel__rows {
  display: grid;
}
.res-int-hw-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.375rem;
  border-bottom: 1px solid var(--nl-gray-100);
}
.res-int-hw-panel__row:last-child {
  border-bottom: none;
}
.res-int-hw-panel__row-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nl-gray-800);
}
.res-int-hw-panel__row-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--nl-green-dark, #166534);
  background: #dcfce7;
  padding: 0.2rem 0.625rem;
  border-radius: 999px;
}
.res-int-hw-panel__row-badge--blue {
  color: var(--nl-blue-700);
  background: var(--nl-blue-50);
}

/* Responsive */
@media (max-width: 600px) {
  .res-int-hw-cards {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HERO STAT ROW + BENEFIT ICON
   ========================================================= */

/* Stat row inside hero */
.res-int-hero__stats {
  display: flex;
  gap: 2rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.res-int-hero__stat-value {
  font-size: 1.625rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.res-int-hero__stat-value span {
  font-size: 0.875rem;
  font-weight: 600;
  opacity: 0.65;
  margin-left: 0.15rem;
}
.res-int-hero__stat-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.3rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Button fix — make outline-white lighter */
.residential-internet-hero .btn--outline-white {
  border-color: rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.9);
}
.residential-internet-hero .btn--white {
  background: rgba(255,255,255,0.92);
  color: var(--nl-blue-900);
}

/* Icon inside benefit cards */
.res-int-benefit__icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--nl-blue-50);
  color: var(--nl-blue-600);
  border: 1px solid var(--nl-blue-100);
  margin-bottom: 0.625rem;
}

/* Responsive: hide stats on very small screens */
@media (max-width: 480px) {
  .res-int-hero__stats {
    gap: 1.25rem;
  }
  .res-int-hero__stat-value {
    font-size: 1.25rem;
  }
}

/* =========================================================
   BUSINESS INTERNET PAGE — full design system
   (template-business-internet.php)
   ========================================================= */

.biz-int-hero {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  min-height: 390px;
  max-height: 580px;
  overflow: hidden;
  margin: 0;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%);
  max-width: 1400px;
  margin: 0 auto;
}
.biz-int-hero__content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 3rem);
}
.biz-int-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.biz-int-hero__visual {
  flex: 0 0 48%;
  position: relative;
  overflow: hidden;
}
.biz-int-hero__image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.biz-int-hero__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,31,58,.42) 0%, rgba(11,31,58,.12) 38%, rgba(11,31,58,0) 70%);
  pointer-events: none;
}
.biz-int-hero__image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.biz-int-hero__stats {
  display: flex;
  gap: 2rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.biz-int-hero__stat-value {
  font-size: 1.625rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.biz-int-hero__stat-value span {
  font-size: 0.875rem;
  font-weight: 600;
  opacity: 0.65;
  margin-left: 0.15rem;
}
.biz-int-hero__stat-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.3rem;
  font-weight: 500;
}
.biz-int-hero-wrap .btn--outline-white {
  border-color: rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.9);
}
.biz-int-hero-wrap .btn--white {
  background: rgba(255,255,255,0.92);
  color: var(--nl-blue-900);
}
.biz-int-benefits {
  background: #fff;
  border-bottom: 1px solid var(--nl-gray-100);
}
.biz-int-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.2rem 0;
}
.biz-int-benefit {
  background: var(--nl-gray-50);
  border: 1px solid var(--nl-gray-200);
  border-radius: 1rem;
  padding: 1rem;
}
.biz-int-benefit__icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--nl-blue-50);
  color: var(--nl-blue-600);
  border: 1px solid var(--nl-blue-100);
  margin-bottom: 0.625rem;
}
.biz-int-benefit strong { display: block; color: var(--nl-blue-900); font-size: 0.95rem; margin-bottom: 0.25rem; }
.biz-int-benefit span { display: block; color: var(--nl-gray-600); font-size: 0.84rem; line-height: 1.55; }
.biz-int-subnav { background: #fff; border-bottom: 1px solid var(--nl-gray-100); position: sticky; top: 0; z-index: 90; }
.biz-int-subnav__inner { display: flex; gap: 1.35rem; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0.75rem 0; }
.biz-int-subnav__inner a:not(.btn) { color: var(--nl-gray-600); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: color 0.15s ease; }
.biz-int-subnav__inner a:not(.btn):hover,
.biz-int-subnav__inner a:not(.btn).is-active { color: var(--nl-blue-600); }
.biz-int-section { padding: clamp(2rem, 3vw, 3rem) 0; }
.biz-int-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 430px); gap: 2rem; align-items: center; }
.biz-int-split--reverse { grid-template-columns: minmax(280px, 340px) minmax(0, 1.1fr); }
.biz-int-copy__lead { text-align: left; max-width: none; margin: 0 0 1rem; }
.biz-int-copy p { color: var(--nl-gray-600); line-height: 1.8; margin-bottom: 1rem; }
.biz-int-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.5rem; }
.biz-int-feature-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.5rem 0 1.75rem; }
.biz-int-feature-card { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--nl-gray-50); border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-lg); padding: 1rem; }
.biz-int-feature-card__icon { width: 2.125rem; height: 2.125rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: var(--nl-blue-50); color: var(--nl-blue-600); border: 1px solid var(--nl-blue-100); }
.biz-int-feature-card__title { display: block; font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.2rem; }
.biz-int-feature-card__sub { display: block; font-size: 0.8rem; color: var(--nl-gray-600); line-height: 1.5; }
.biz-int-stat-panel { background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); overflow: hidden; box-shadow: var(--nl-shadow-card); }
.biz-int-stat-panel__header { background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 60%, #1a5fb4 100%); padding: 1.75rem 1.75rem 1.5rem; color: #fff; }
.biz-int-stat-panel__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 0.5rem; }
.biz-int-stat-panel__speed { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.biz-int-stat-panel__unit { font-size: 1.25rem; font-weight: 700; opacity: 0.75; margin-left: 0.2rem; }
.biz-int-stat-panel__tag { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-top: 0.5rem; }
.biz-int-stat-panel__grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--nl-gray-100); }
.biz-int-stat-panel__cell { padding: 1.1rem 1.4rem; border-right: 1px solid var(--nl-gray-100); border-bottom: 1px solid var(--nl-gray-100); }
.biz-int-stat-panel__cell:nth-child(even) { border-right: none; }
.biz-int-stat-panel__cell:nth-child(3), .biz-int-stat-panel__cell:nth-child(4) { border-bottom: none; }
.biz-int-stat-panel__cell strong { display: block; font-size: 1.5rem; font-weight: 900; color: var(--nl-blue-900); line-height: 1.1; margin-bottom: 0.2rem; }
.biz-int-stat-panel__cell span { font-size: 0.78rem; color: var(--nl-gray-500); }
.biz-int-stat-panel__features { list-style: none; padding: 1.1rem 1.5rem; margin: 0; display: grid; gap: 0.625rem; border-top: 1px solid var(--nl-gray-100); }
.biz-int-stat-panel__features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; color: var(--nl-gray-700); }
.biz-int-stat-panel__features li svg { color: var(--nl-green); flex-shrink: 0; }
.biz-int-stat-panel__footer { border-top: 1px solid var(--nl-gray-100); padding: 0.875rem 1.5rem; font-size: 0.8125rem; color: var(--nl-gray-500); text-align: center; }
.biz-int-stat-panel__footer a { color: var(--nl-blue-600); font-weight: 600; text-decoration: none; }
.biz-int-wifi-right { display: flex; flex-direction: column; gap: 0.875rem; }
.biz-int-wifi-photo { border-radius: var(--nl-radius-xl); overflow: hidden; width: 100%; aspect-ratio: 4 / 5; max-height: 420px; background: var(--nl-gray-100); }
.biz-int-wifi-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.biz-int-wifi-note { background: var(--nl-blue-50); border: 1px solid var(--nl-blue-100); border-radius: var(--nl-radius-lg); padding: 1rem 1.125rem; }
.biz-int-wifi-note__title { display: block; font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.25rem; }
.biz-int-wifi-note__text { display: block; font-size: 0.8125rem; color: var(--nl-blue-700); line-height: 1.6; }
.biz-int-wifi-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.5rem 0 1.75rem; }
.biz-int-wifi-card { display: flex; align-items: flex-start; gap: 0.75rem; background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-lg); padding: 1rem; }
.biz-int-wifi-card__icon { width: 2.125rem; height: 2.125rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: var(--nl-blue-50); color: var(--nl-blue-600); border: 1px solid var(--nl-blue-100); }
.biz-int-wifi-card__title { display: block; font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.2rem; }
.biz-int-wifi-card__text { display: block; font-size: 0.8rem; color: var(--nl-gray-600); line-height: 1.55; }
.biz-int-hw-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.5rem 0 1.75rem; }
.biz-int-hw-card { display: flex; align-items: center; gap: 0.75rem; background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-lg); padding: 0.875rem 1rem; }
.biz-int-hw-card__icon { width: 2rem; height: 2rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: var(--nl-blue-50); color: var(--nl-blue-600); border: 1px solid var(--nl-blue-100); }
.biz-int-hw-card__title { font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); }
.biz-int-hw-panel { background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); overflow: hidden; box-shadow: var(--nl-shadow-card); align-self: center; }
.biz-int-hw-panel__header { background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 60%, #1a5fb4 100%); padding: 1.5rem 1.75rem; }
.biz-int-hw-panel__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 0.35rem; }
.biz-int-hw-panel__value { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.biz-int-hw-panel__rows { display: grid; }
.biz-int-hw-panel__row { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.375rem; border-bottom: 1px solid var(--nl-gray-100); }
.biz-int-hw-panel__row:last-child { border-bottom: none; }
.biz-int-hw-panel__row-label { font-size: 0.9rem; font-weight: 600; color: var(--nl-gray-800); }
.biz-int-hw-panel__row-badge { font-size: 0.75rem; font-weight: 700; color: #166534; background: #dcfce7; padding: 0.2rem 0.625rem; border-radius: 999px; }
.biz-int-hw-panel__row-badge--blue { color: var(--nl-blue-700); background: var(--nl-blue-50); }
.biz-int-ha-panel { background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); overflow: hidden; box-shadow: var(--nl-shadow-card); }
.biz-int-ha-panel__header { background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 60%, #1a5fb4 100%); padding: 1.75rem; color: #fff; }
.biz-int-ha-panel__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 0.4rem; }
.biz-int-ha-panel__title { font-size: 1.75rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.03em; }
.biz-int-ha-panel__sub { font-size: 0.875rem; color: rgba(255,255,255,0.6); margin-top: 0.35rem; }
.biz-int-ha-cards { display: grid; gap: 0; }
.biz-int-ha-card { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1.125rem 1.375rem; border-bottom: 1px solid var(--nl-gray-100); }
.biz-int-ha-card:last-child { border-bottom: none; }
.biz-int-ha-card__icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: var(--nl-blue-50); color: var(--nl-blue-600); border: 1px solid var(--nl-blue-100); margin-top: 0.1rem; }
.biz-int-ha-card__title { display: block; font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.25rem; }
.biz-int-ha-card__text { display: block; font-size: 0.82rem; color: var(--nl-gray-600); line-height: 1.6; }
.biz-int-checklist { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: 0.7rem; }
.biz-int-checklist li { position: relative; padding-left: 1.65rem; color: var(--nl-gray-700); font-size: 0.95rem; line-height: 1.6; }
.biz-int-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0.02rem; color: var(--nl-blue-600); font-weight: 800; }
@media (max-width: 900px) {
  .biz-int-hero, .biz-int-split, .biz-int-split--reverse { display: grid; grid-template-columns: 1fr; }
  .biz-int-hero { min-height: auto; margin-top: 0; margin-bottom: 0; }
  .biz-int-hero__content { padding: clamp(40px, 5vw, 56px) 0 2rem; }
  .biz-int-hero__visual { width: 100%; flex-basis: auto; margin-right: 0 !important; }
  .biz-int-hero__image-wrap { width: 100% !important; min-height: 280px; }
  .biz-int-wifi-right { width: 100%; }
  .biz-int-wifi-photo { aspect-ratio: 16 / 7; }
  .biz-int-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .biz-int-feature-cards, .biz-int-wifi-cards, .biz-int-hw-cards { grid-template-columns: 1fr; }
  .biz-int-benefits__grid { grid-template-columns: 1fr; }
  .biz-int-hero__stats { gap: 1.25rem; }
  .biz-int-subnav__inner { gap: 0.9rem; }
}


/* =========================================================
   BUSINESS INTERNET PAGE
   ========================================================= */
.biz-int-hero { display: flex; flex-direction: row; align-items: stretch; position: relative; min-height: 560px; margin-top: calc(-1 * clamp(48px, 6vw, 72px)); margin-bottom: calc(-1 * clamp(84px, 9vw, 112px)); }
.biz-int-hero__content { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; padding: clamp(68px,8vw,96px) clamp(1.5rem,3vw,2.75rem) clamp(92px,10vw,120px) clamp(1.5rem,5vw,4rem); }
.biz-int-hero__eyebrow { display: inline-flex; align-items: center; width: fit-content; padding: 0.45rem 0.85rem; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); color: #fff; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; }
.biz-int-hero__visual { flex: 0 0 50%; position: relative; overflow: hidden; display: flex; margin-right: calc(-1 * clamp(5rem,12vw,9rem)); }
.biz-int-hero__image-wrap { position: relative; overflow: hidden; width: calc(100% + clamp(5rem,12vw,9rem)); min-height: 100%; }
.biz-int-hero__image-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(11,31,58,.42) 0%, rgba(11,31,58,.12) 38%, rgba(11,31,58,0) 70%); pointer-events: none; }
.biz-int-hero__image { width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: center; display: block; }
.biz-int-hero__stats { display: flex; gap: 2rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.12); }
.biz-int-hero__stat-value { font-size: 1.625rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.03em; }
.biz-int-hero__stat-value span { font-size: 0.875rem; font-weight: 600; opacity: 0.65; margin-left: 0.15rem; }
.biz-int-hero__stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 0.3rem; font-weight: 500; }
.biz-int-hero-wrap .btn--outline-white { border-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.9); }
.biz-int-hero-wrap .btn--white { background: rgba(255,255,255,0.92); color: var(--nl-blue-900); }
.biz-int-benefits { background: #fff; border-bottom: 1px solid var(--nl-gray-100); }
.biz-int-benefits__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; padding: 1.2rem 0; }
.biz-int-benefit { background: var(--nl-gray-50); border: 1px solid var(--nl-gray-200); border-radius: 1rem; padding: 1rem; }
.biz-int-benefit__icon { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: var(--nl-blue-50); color: var(--nl-blue-600); border: 1px solid var(--nl-blue-100); margin-bottom: 0.625rem; }
.biz-int-benefit strong { display: block; color: var(--nl-blue-900); font-size: 0.95rem; margin-bottom: 0.25rem; }
.biz-int-benefit span { display: block; color: var(--nl-gray-600); font-size: 0.84rem; line-height: 1.55; }
.biz-int-subnav { background: #fff; border-bottom: 1px solid var(--nl-gray-100); position: sticky; top: 0; z-index: 90; }
.biz-int-subnav__inner { display: flex; gap: 1.35rem; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0.75rem 0; }
.biz-int-subnav__inner a:not(.btn) { color: var(--nl-gray-600); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: color 0.15s ease; }
.biz-int-subnav__inner a:not(.btn):hover, .biz-int-subnav__inner a:not(.btn).is-active { color: var(--nl-blue-600); }
.biz-int-section { padding: clamp(2rem,3vw,3rem) 0; }
.biz-int-split { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,430px); gap: 2rem; align-items: center; }
.biz-int-split--reverse { grid-template-columns: minmax(280px,340px) minmax(0,1.1fr); }
.biz-int-copy__lead { text-align: left; max-width: none; margin: 0 0 1rem; }
.biz-int-copy p { color: var(--nl-gray-600); line-height: 1.8; margin-bottom: 1rem; }
.biz-int-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.5rem; }
.biz-int-feature-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.5rem 0 1.75rem; }
.biz-int-feature-card { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--nl-gray-50); border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-lg); padding: 1rem; }
.biz-int-feature-card__icon { width: 2.125rem; height: 2.125rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: var(--nl-blue-50); color: var(--nl-blue-600); border: 1px solid var(--nl-blue-100); }
.biz-int-feature-card__title { display: block; font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.2rem; }
.biz-int-feature-card__sub { display: block; font-size: 0.8rem; color: var(--nl-gray-600); line-height: 1.5; }
.biz-int-stat-panel { background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); overflow: hidden; box-shadow: var(--nl-shadow-card); }
.biz-int-stat-panel__header { background: linear-gradient(135deg,#0b1f3a 0%,#0f3d7a 60%,#1a5fb4 100%); padding: 1.75rem 1.75rem 1.5rem; color: #fff; }
.biz-int-stat-panel__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 0.5rem; }
.biz-int-stat-panel__speed { font-size: clamp(2.4rem,4vw,3.2rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.biz-int-stat-panel__unit { font-size: 1.25rem; font-weight: 700; opacity: 0.75; margin-left: 0.2rem; }
.biz-int-stat-panel__tag { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-top: 0.5rem; }
.biz-int-stat-panel__grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--nl-gray-100); }
.biz-int-stat-panel__cell { padding: 1.1rem 1.4rem; border-right: 1px solid var(--nl-gray-100); border-bottom: 1px solid var(--nl-gray-100); }
.biz-int-stat-panel__cell:nth-child(even) { border-right: none; }
.biz-int-stat-panel__cell:nth-child(3), .biz-int-stat-panel__cell:nth-child(4) { border-bottom: none; }
.biz-int-stat-panel__cell strong { display: block; font-size: 1.5rem; font-weight: 900; color: var(--nl-blue-900); line-height: 1.1; margin-bottom: 0.2rem; }
.biz-int-stat-panel__cell span { font-size: 0.78rem; color: var(--nl-gray-500); }
.biz-int-stat-panel__features { list-style: none; padding: 1.1rem 1.5rem; margin: 0; display: grid; gap: 0.625rem; border-top: 1px solid var(--nl-gray-100); }
.biz-int-stat-panel__features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; color: var(--nl-gray-700); }
.biz-int-stat-panel__features li svg { color: var(--nl-green); flex-shrink: 0; }
.biz-int-stat-panel__footer { border-top: 1px solid var(--nl-gray-100); padding: 0.875rem 1.5rem; font-size: 0.8125rem; color: var(--nl-gray-500); text-align: center; }
.biz-int-stat-panel__footer a { color: var(--nl-blue-600); font-weight: 600; text-decoration: none; }
.biz-int-wifi-right { display: flex; flex-direction: column; gap: 0.875rem; }
.biz-int-wifi-photo { border-radius: var(--nl-radius-xl); overflow: hidden; width: 100%; aspect-ratio: 4/5; max-height: 420px; background: var(--nl-gray-100); }
.biz-int-wifi-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.biz-int-wifi-note { background: var(--nl-blue-50); border: 1px solid var(--nl-blue-100); border-radius: var(--nl-radius-lg); padding: 1rem 1.125rem; }
.biz-int-wifi-note__title { display: block; font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.25rem; }
.biz-int-wifi-note__text { display: block; font-size: 0.8125rem; color: var(--nl-blue-700); line-height: 1.6; }
.biz-int-wifi-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.5rem 0 1.75rem; }
.biz-int-wifi-card { display: flex; align-items: flex-start; gap: 0.75rem; background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-lg); padding: 1rem; }
.biz-int-wifi-card__icon { width: 2.125rem; height: 2.125rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: var(--nl-blue-50); color: var(--nl-blue-600); border: 1px solid var(--nl-blue-100); }
.biz-int-wifi-card__title { display: block; font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.2rem; }
.biz-int-wifi-card__text { display: block; font-size: 0.8rem; color: var(--nl-gray-600); line-height: 1.55; }
.biz-int-hw-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.5rem 0 1.75rem; }
.biz-int-hw-card { display: flex; align-items: center; gap: 0.75rem; background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-lg); padding: 0.875rem 1rem; }
.biz-int-hw-card__icon { width: 2rem; height: 2rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: var(--nl-blue-50); color: var(--nl-blue-600); border: 1px solid var(--nl-blue-100); }
.biz-int-hw-card__title { font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); }
.biz-int-hw-panel { background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); overflow: hidden; box-shadow: var(--nl-shadow-card); align-self: center; }
.biz-int-hw-panel__header { background: linear-gradient(135deg,#0b1f3a 0%,#0f3d7a 60%,#1a5fb4 100%); padding: 1.5rem 1.75rem; }
.biz-int-hw-panel__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 0.35rem; }
.biz-int-hw-panel__value { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.biz-int-hw-panel__rows { display: grid; }
.biz-int-hw-panel__row { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.375rem; border-bottom: 1px solid var(--nl-gray-100); }
.biz-int-hw-panel__row:last-child { border-bottom: none; }
.biz-int-hw-panel__row-label { font-size: 0.9rem; font-weight: 600; color: var(--nl-gray-800); }
.biz-int-hw-panel__row-badge { font-size: 0.75rem; font-weight: 700; color: #166534; background: #dcfce7; padding: 0.2rem 0.625rem; border-radius: 999px; }
.biz-int-hw-panel__row-badge--blue { color: var(--nl-blue-700); background: var(--nl-blue-50); }
.biz-int-ha-panel { background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); overflow: hidden; box-shadow: var(--nl-shadow-card); }
.biz-int-ha-panel__header { background: linear-gradient(135deg,#0b1f3a 0%,#0f3d7a 60%,#1a5fb4 100%); padding: 1.75rem; color: #fff; }
.biz-int-ha-panel__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 0.4rem; }
.biz-int-ha-panel__title { font-size: 1.75rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.03em; }
.biz-int-ha-panel__sub { font-size: 0.875rem; color: rgba(255,255,255,0.6); margin-top: 0.35rem; }
.biz-int-ha-cards { display: grid; gap: 0; }
.biz-int-ha-card { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1.125rem 1.375rem; border-bottom: 1px solid var(--nl-gray-100); }
.biz-int-ha-card:last-child { border-bottom: none; }
.biz-int-ha-card__icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: var(--nl-blue-50); color: var(--nl-blue-600); border: 1px solid var(--nl-blue-100); margin-top: 0.1rem; }
.biz-int-ha-card__title { display: block; font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.25rem; }
.biz-int-ha-card__text { display: block; font-size: 0.82rem; color: var(--nl-gray-600); line-height: 1.6; }
.biz-int-checklist { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: 0.7rem; }
.biz-int-checklist li { position: relative; padding-left: 1.65rem; color: var(--nl-gray-700); font-size: 0.95rem; line-height: 1.6; }
.biz-int-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0.02rem; color: var(--nl-blue-600); font-weight: 800; }
@media (max-width: 900px) {
  .biz-int-hero, .biz-int-split, .biz-int-split--reverse { display: grid; grid-template-columns: 1fr; }
  .biz-int-hero { min-height: auto; margin-top: 0; margin-bottom: 0; }
  .biz-int-hero__content { padding: clamp(40px,5vw,56px) 0 2rem; }
  .biz-int-hero__visual { width: 100%; flex-basis: auto; margin-right: 0 !important; }
  .biz-int-hero__image-wrap { width: 100% !important; min-height: 280px; }
  .biz-int-wifi-right { width: 100%; }
  .biz-int-wifi-photo { aspect-ratio: 16/7; }
  .biz-int-benefits__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .biz-int-feature-cards, .biz-int-wifi-cards, .biz-int-hw-cards { grid-template-columns: 1fr; }
  .biz-int-benefits__grid { grid-template-columns: 1fr; }
  .biz-int-hero__stats { gap: 1.25rem; }
  .biz-int-subnav__inner { gap: 0.9rem; }
}

/* Wi-Fi photo — transparent PNG, larger, centre-top position */
.biz-int-wifi-photo {
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  aspect-ratio: 3 / 4 !important;
  max-height: 520px !important;
}
.biz-int-wifi-photo img {
  object-fit: contain !important;
  object-position: 50% 20% !important;
}

/* =========================================================
   ABOUT HERO — stat row + button fix
   ========================================================= */
.about-page-hero {
  width: min(1400px, calc(100% - 3rem)) !important;
  margin: 0 auto !important;
}
.about-page-hero__inner {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 480px !important;
}
.about-page-hero__content .btn--white {
  background: rgba(255,255,255,0.92);
  color: var(--nl-blue-900);
  border-color: #fff;
}
.about-page-hero__content .btn--outline-white {
  border-color: rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.9);
}
.about-hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.about-hero-stat-value {
  font-size: 1.625rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.about-hero-stat__value {
  font-size: 1.625rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.about-hero-stat__value span {
  font-size: 0.875rem;
  font-weight: 600;
  opacity: 0.65;
  margin-left: 0.15rem;
}
.about-hero-stat__label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.3rem;
  font-weight: 500;
}

/* =========================================================
   SUPPORT HERO — full width, no curve
   ========================================================= */
.support-hero {
  width: min(1400px, calc(100% - 3rem)) !important;
  margin: 0 auto !important;
}

/* =========================================================
   RESIDENTIAL INTERNET V2 — focused hero + page redesign
   Scoped to template-res-internet.php only
   ========================================================= */

.res-int-v2-hero {
  padding: clamp(0.75rem, 1.6vw, 1.2rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}

.res-int-v2-hero__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  align-items: stretch;
  background: linear-gradient(135deg, #0d356b 0%, #0b2f62 48%, #0a2954 100%);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(10, 41, 84, 0.14);
}

.res-int-v2-hero__content {
  padding: clamp(1.5rem, 3vw, 2.35rem) clamp(1.5rem, 3.2vw, 2.6rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.res-int-v2-hero__eyebrow,
.res-int-v2-section-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.res-int-v2-section-label {
  background: var(--nl-blue-50);
  border-color: var(--nl-blue-100);
  color: var(--nl-blue-700);
}

.res-int-v2-hero__title {
  margin: 1.1rem 0 0.9rem;
  color: #fff;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.res-int-v2-hero__subtitle {
  max-width: 640px;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin: 0;
}

.res-int-v2-hero__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.res-int-v2-hero .btn--outline-white {
  border-color: rgba(255,255,255,0.55);
  color: rgba(255,255,255,0.96);
}

.res-int-v2-hero .btn--white {
  background: rgba(255,255,255,0.96);
  color: var(--nl-blue-900);
}

.res-int-v2-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.res-int-v2-hero__stat strong {
  display: block;
  color: #fff;
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.35rem;
}

.res-int-v2-hero__stat strong span {
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.75;
  letter-spacing: 0;
}

.res-int-v2-hero__stat > span {
  display: block;
  color: rgba(255,255,255,0.7);
  font-size: 0.82rem;
  line-height: 1.4;
}

.res-int-v2-hero__visual {
  min-height: 380px;
}

.res-int-v2-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  object-position: center;
}

.res-int-v2-overview {
  padding-top: clamp(2.5rem, 4vw, 4rem);
}

.res-int-v2-overview__grid,
.res-int-v2-lifestyle__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 380px);
  gap: 1.5rem;
  align-items: start;
}

.res-int-v2-overview__copy p,
.res-int-v2-lifestyle__text {
  color: var(--nl-gray-600);
  line-height: 1.8;
}

.res-int-v2-overview__lead {
  font-size: 1.03rem;
  color: var(--nl-gray-700);
}

.res-int-v2-overview__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.res-int-v2-info-card {
  background: #fff;
  border: 1px solid var(--nl-blue-100);
  border-radius: 1.5rem;
  box-shadow: var(--nl-shadow-card);
  overflow: hidden;
}

.res-int-v2-info-card__top {
  padding: 1.5rem;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--nl-gray-100);
}

.res-int-v2-info-card__eyebrow {
  display: block;
  color: var(--nl-blue-700);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.res-int-v2-info-card h3 {
  font-size: 1.35rem;
  color: var(--nl-blue-900);
  margin: 0 0 0.5rem;
}

.res-int-v2-info-card__top p {
  color: var(--nl-gray-600);
  margin: 0;
  line-height: 1.7;
}

.res-int-v2-info-card__list {
  list-style: none;
  margin: 0;
  padding: 1.25rem 1.5rem 1.35rem;
  display: grid;
  gap: 0.85rem;
}

.res-int-v2-info-card__list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--nl-gray-700);
  line-height: 1.6;
}

.res-int-v2-info-card__list li::before,
.res-int-v2-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--nl-blue-600);
  font-weight: 800;
}

.res-int-v2-section-head {
  max-width: 760px;
  text-align: center;
  margin: 0 auto 2rem;
}

.res-int-v2-section-head .res-int-v2-section-label {
  margin: 0 auto 0.9rem;
}

.res-int-v2-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.res-int-v2-feature-card {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--nl-shadow-xs);
}

.res-int-v2-feature-card__icon {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: var(--nl-blue-50);
  color: var(--nl-blue-600);
  border: 1px solid var(--nl-blue-100);
  margin-bottom: 1rem;
}

.res-int-v2-feature-card h3 {
  font-size: 1rem;
  color: var(--nl-blue-900);
  margin: 0 0 0.5rem;
}

.res-int-v2-feature-card p {
  color: var(--nl-gray-600);
  margin: 0;
  line-height: 1.75;
  font-size: 0.92rem;
}

.res-int-v2-checklist {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: 0.75rem;
}

.res-int-v2-checklist li {
  position: relative;
  padding-left: 1.45rem;
  color: var(--nl-gray-700);
  line-height: 1.7;
}

.res-int-v2-lifestyle__panel {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border: 1px solid var(--nl-blue-100);
  border-radius: 1.5rem;
  box-shadow: var(--nl-shadow-card);
  overflow: hidden;
}

.res-int-v2-lifestyle__panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--nl-gray-100);
}

.res-int-v2-lifestyle__panel-row:last-child {
  border-bottom: none;
}

.res-int-v2-lifestyle__panel-row span {
  color: var(--nl-gray-600);
  font-weight: 600;
}

.res-int-v2-lifestyle__panel-row strong {
  color: var(--nl-blue-900);
  font-size: 1.05rem;
  font-weight: 800;
}

.res-int-v2-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.res-int-v2-usecase-card {
  background: #fff;
  border: 1px solid var(--nl-gray-200);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--nl-shadow-xs);
}

.res-int-v2-usecase-card h3 {
  color: var(--nl-blue-900);
  font-size: 1.05rem;
  margin: 0 0 0.55rem;
}

.res-int-v2-usecase-card p {
  color: var(--nl-gray-600);
  margin: 0;
  line-height: 1.75;
  font-size: 0.93rem;
}

.res-int-v2-cta {
  margin-top: 0.5rem;
}

@media (max-width: 1100px) {
  .res-int-v2-hero__wrap,
  .res-int-v2-overview__grid,
  .res-int-v2-lifestyle__grid {
    grid-template-columns: 1fr;
  }

  .res-int-v2-hero__visual,
  .res-int-v2-hero__image {
    min-height: 320px;
  }

  .res-int-v2-feature-grid,
  .res-int-v2-usecase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .res-int-v2-hero__content {
    padding: 1.75rem 1.25rem;
  }

  .res-int-v2-hero__stats,
  .res-int-v2-feature-grid,
  .res-int-v2-usecase-grid {
    grid-template-columns: 1fr 1fr;
  }

  .res-int-v2-hero__title {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
}

@media (max-width: 520px) {
  .res-int-v2-hero__stats,
  .res-int-v2-feature-grid,
  .res-int-v2-usecase-grid {
    grid-template-columns: 1fr;
  }

  .res-int-v2-hero__actions,
  .res-int-v2-overview__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .res-int-v2-hero__visual,
  .res-int-v2-hero__image {
    min-height: 250px;
  }
}

/* =========================================================
   RESIDENTIAL INTERNET — TekSavvy-inspired service page
   scoped to template-res-internet.php only
   ========================================================= */

.res-int-ts-hero {
  background: #f6f7f9;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2rem, 4vw, 3rem);
}

.res-int-ts-hero__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.res-int-ts-hero__content {
  max-width: 620px;
}

.res-int-ts-hero__eyebrow,
.res-int-ts-section-label,
.res-int-ts-cta-band__label {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.res-int-ts-hero__eyebrow {
  color: var(--nl-blue-700);
  background: rgba(26, 95, 180, 0.08);
  border: 1px solid rgba(26, 95, 180, 0.14);
}

.res-int-ts-section-label {
  color: var(--nl-blue-700);
  background: var(--nl-blue-50);
  border: 1px solid var(--nl-blue-100);
}

.res-int-ts-hero__title,
.res-int-ts-section-title {
  color: #121826;
  letter-spacing: -0.045em;
}

.res-int-ts-hero__title {
  font-size: clamp(2.4rem, 5.4vw, 4.3rem);
  line-height: 1.02;
  margin: 1rem 0 1rem;
  max-width: 620px;
}

.res-int-ts-hero__subtitle,
.res-int-ts-section-text {
  color: #3f4a5a;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.75;
}

.res-int-ts-hero__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

.res-int-ts-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.res-int-ts-hero__chips span {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 0.95rem;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 999px;
  color: #1f2a3a;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.04);
}

.res-int-ts-hero__visual {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.res-int-ts-hero__shape {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.res-int-ts-hero__shape--one {
  width: 360px;
  height: 260px;
  background: rgba(40, 196, 218, 0.12);
  right: 0.75rem;
  top: 2.25rem;
}

.res-int-ts-hero__shape--two {
  width: 190px;
  height: 190px;
  background: rgba(26, 95, 180, 0.08);
  left: 1rem;
  bottom: 0.5rem;
}

.res-int-ts-hero__image-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.12);
  background: #fff;
}

.res-int-ts-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}

.res-int-ts-intro {
  padding: clamp(2.8rem, 5vw, 4rem) 0 2rem;
}

.res-int-ts-intro__head {
  max-width: 860px;
  margin: 0 auto 2rem;
  text-align: center;
}

.res-int-ts-section-title {
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.08;
  margin: 0.95rem 0 0.9rem;
}

.res-int-ts-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.res-int-ts-plan-card {
  position: relative;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.05);
}

.res-int-ts-plan-card--featured {
  border-color: rgba(26, 95, 180, 0.26);
  transform: translateY(-8px);
  box-shadow: 0 18px 38px rgba(26, 95, 180, 0.10);
}

.res-int-ts-plan-card__badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: #4fd2d6;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
}

.res-int-ts-plan-card__tag {
  display: inline-flex;
  color: var(--nl-blue-700);
  background: var(--nl-blue-50);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.res-int-ts-plan-card h3 {
  color: #121826;
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 0 0 0.7rem;
}

.res-int-ts-plan-card p {
  color: #4b5565;
  line-height: 1.7;
  margin: 0;
}

.res-int-ts-plan-card__list,
.res-int-ts-service-card__list {
  list-style: none;
  padding: 0;
  margin: 1.15rem 0 0;
  display: grid;
  gap: 0.7rem;
}

.res-int-ts-plan-card__list li,
.res-int-ts-service-card__list li {
  position: relative;
  padding-left: 1.35rem;
  color: #243041;
  font-weight: 600;
}

.res-int-ts-plan-card__list li::before,
.res-int-ts-service-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1a5fb4;
  font-weight: 800;
}

.res-int-ts-benefits {
  padding-top: 2.25rem;
}

.res-int-ts-benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 380px);
  gap: 1.4rem;
  align-items: start;
}

.res-int-ts-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}

.res-int-ts-feature-card {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 1.2rem;
  padding: 1.15rem 1.1rem;
}

.res-int-ts-feature-card strong {
  display: block;
  color: #121826;
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.res-int-ts-feature-card span {
  display: block;
  color: #4b5565;
  line-height: 1.65;
  font-size: 0.92rem;
}

.res-int-ts-service-card {
  background: linear-gradient(180deg, #0f3d7a 0%, #0b2f62 100%);
  color: #fff;
  border-radius: 1.6rem;
  padding: 1.6rem;
  box-shadow: 0 18px 36px rgba(11, 47, 98, 0.16);
}

.res-int-ts-service-card__label {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.7rem;
}

.res-int-ts-service-card__speed {
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.res-int-ts-service-card__speed span {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.8;
}

.res-int-ts-service-card__text {
  margin: 1rem 0 0;
  color: rgba(255,255,255,0.86);
  line-height: 1.8;
}

.res-int-ts-service-card__list li {
  color: #fff;
  font-weight: 600;
}

.res-int-ts-service-card__list li::before {
  color: #7fd9ff;
}

.res-int-ts-cta-band {
  padding: 0 0 3rem;
}

.res-int-ts-cta-band__inner {
  background: linear-gradient(135deg, #0d356b 0%, #0b2f62 100%);
  color: #fff;
  border-radius: 1.8rem;
  padding: 1.8rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.res-int-ts-cta-band__label {
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 0.8rem;
}

.res-int-ts-cta-band__inner h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 620px;
}

.res-int-ts-cta-band__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .res-int-ts-hero__wrap,
  .res-int-ts-benefits__grid {
    grid-template-columns: 1fr;
  }

  .res-int-ts-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .res-int-ts-hero__visual,
  .res-int-ts-hero__image {
    min-height: 340px;
  }

  .res-int-ts-cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 700px) {
  .res-int-ts-plan-grid,
  .res-int-ts-feature-grid {
    grid-template-columns: 1fr;
  }

  .res-int-ts-plan-card--featured {
    transform: none;
  }

  .res-int-ts-hero__actions,
  .res-int-ts-cta-band__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .res-int-ts-hero__visual,
  .res-int-ts-hero__image {
    min-height: 280px;
  }

  .res-int-ts-hero__chips {
    gap: 0.6rem;
  }
}

/* =========================================================
   RESIDENTIAL INTERNET B2 — card-driven subpage redesign
   ========================================================= */

.res-int-b-hero {
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(3.5rem, 5.5vw, 5.5rem);
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%);
}

.res-int-b-hero__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.88fr);
  gap: clamp(1.25rem, 2vw, 1.9rem);
  align-items: center;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.res-int-b-hero__content {
  padding: 0.15rem 0;
}

.res-int-b-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: #eaf2ff;
  border: 1px solid #c8daf7;
  color: #0f4c9a;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.res-int-b-label--hero {
  margin-bottom: 0.75rem;
}

.res-int-b-label--dark {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
}

.res-int-b-hero__title,
.res-int-b-title {
  color: #101828;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.res-int-b-hero__title {
  font-size: clamp(2.35rem, 4.2vw, 3.95rem);
  max-width: 610px;
  margin: 0;
}

.res-int-b-hero__text,
.res-int-b-text {
  color: #475467;
  font-size: 1.02rem;
  line-height: 1.75;
}

.res-int-b-hero__text {
  max-width: 560px;
  margin: 0.95rem 0 0;
}

.res-int-b-hero__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.15rem;
}

.res-int-b-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.res-int-b-hero__chips span {
  background: #fff;
  border: 1px solid #d9e2f1;
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  color: #1d2939;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.04);
}

.res-int-b-hero__visual {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.res-int-b-hero__blob {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.res-int-b-hero__blob--one {
  width: 70%;
  height: 64%;
  right: 0.25rem;
  top: 1rem;
  background: rgba(26, 95, 180, 0.10);
}

.res-int-b-hero__blob--two {
  width: 180px;
  height: 180px;
  left: 0.35rem;
  bottom: 0.25rem;
  background: rgba(79, 210, 214, 0.15);
}

.res-int-b-hero__image-card {
  position: relative;
  width: min(100%, 455px);
  border-radius: 1.45rem;
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(16, 24, 40, 0.10);
  background: #fff;
}

.res-int-b-hero__image {
  display: block;
  width: 100%;
  min-height: 300px;
  max-height: 340px;
  height: 100%;
  object-fit: cover;
}

.res-int-b-usecases {
  padding: clamp(2.75rem, 5vw, 4rem) 0 2.5rem;
}

.res-int-b-usecases__head {
  max-width: 820px;
  margin: 0 auto 2rem;
  text-align: center;
}

.res-int-b-title {
  font-size: clamp(2.05rem, 4.5vw, 3.35rem);
  margin: 0.95rem 0 0.95rem;
}

.res-int-b-text {
  margin: 0;
}

.res-int-b-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.res-int-b-card {
  position: relative;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 1.6rem;
  padding: 1.5rem;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.05);
}

.res-int-b-card--featured {
  transform: translateY(-10px);
  border-color: #69ccd2;
  box-shadow: 0 18px 36px rgba(79, 210, 214, 0.18);
}

.res-int-b-card__badge {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  background: #4fd2d6;
  color: #fff;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.res-int-b-card__icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #0f4c9a;
  background: #eef5ff;
  border: 1px solid #dce8fb;
  margin-bottom: 1rem;
}

.res-int-b-card__tag {
  display: inline-block;
  color: #0f4c9a;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.res-int-b-card h3 {
  color: #101828;
  font-size: 1.55rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
}

.res-int-b-card p {
  color: #475467;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.res-int-b-card ul,
.res-int-b-promo__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.res-int-b-card li {
  position: relative;
  padding-left: 1.3rem;
  color: #243041;
  font-weight: 600;
}

.res-int-b-card li::before,
.res-int-b-feature::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1a5fb4;
  font-weight: 800;
}

.res-int-b-promo {
  padding: 0 0 2.5rem;
}

.res-int-b-promo__inner {
  background: linear-gradient(135deg, #0f4c9a 0%, #0b2f62 100%);
  color: #fff;
  border-radius: 1.75rem;
  padding: 1.8rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.res-int-b-promo__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 0.7rem;
}

.res-int-b-promo h2 {
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin: 0;
  max-width: 720px;
}

.res-int-b-promo p {
  color: rgba(255,255,255,0.86);
  line-height: 1.7;
  margin: 0.7rem 0 0;
  max-width: 620px;
}

.res-int-b-included {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

.res-int-b-included__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 1.4rem;
  align-items: start;
}

.res-int-b-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.res-int-b-feature {
  position: relative;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 1.3rem;
  padding: 1.2rem 1.15rem 1.15rem 2.2rem;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.04);
}

.res-int-b-feature strong {
  display: block;
  color: #101828;
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.res-int-b-feature span {
  display: block;
  color: #475467;
  line-height: 1.65;
  font-size: 0.92rem;
}

.res-int-b-final-cta {
  padding: 0 0 3rem;
}

.res-int-b-final-cta__inner {
  background: #101828;
  color: #fff;
  border-radius: 1.75rem;
  padding: 1.8rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.res-int-b-final-cta__title {
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin: 0.8rem 0 0;
  max-width: 620px;
}

.res-int-b-final-cta__actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .res-int-b-hero__wrap,
  .res-int-b-included__grid,
  .res-int-b-promo__inner,
  .res-int-b-final-cta__inner {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .res-int-b-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .res-int-b-hero__visual {
    min-height: 285px;
    width: 100%;
  }

  .res-int-b-hero__image {
    min-height: 285px;
    max-height: 320px;
  }
}

@media (max-width: 760px) {
  .res-int-b-card-grid,
  .res-int-b-feature-grid {
    grid-template-columns: 1fr;
  }

  .res-int-b-card--featured {
    transform: none;
  }

  .res-int-b-hero__actions,
  .res-int-b-final-cta__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .res-int-b-hero__title {
    font-size: clamp(2rem, 10vw, 2.85rem);
  }

  .res-int-b-hero__text,
  .res-int-b-text {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .res-int-b-hero__visual,
  .res-int-b-hero__image {
    min-height: 220px;
  }
}


/* Residential Internet cards clickable */
.res-int-b-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.res-int-b-card-link:focus {
  outline: none;
}

.res-int-b-card-link .res-int-b-card {
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.res-int-b-card-link:hover .res-int-b-card,
.res-int-b-card-link:focus-visible .res-int-b-card {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(16, 24, 40, 0.1);
  border-color: #b7c9e6;
}

.res-int-b-card-link:hover .res-int-b-card--featured,
.res-int-b-card-link:focus-visible .res-int-b-card--featured {
  transform: translateY(-14px);
  border-color: #69ccd2;
  box-shadow: 0 22px 40px rgba(79, 210, 214, 0.22);
}

/* =========================================================
   Residential Internet hero refresh — bounded themed panel
   ========================================================= */
.res-int-b-hero {
  padding: clamp(1rem, 1.8vw, 1.6rem) 0 clamp(1.6rem, 2.8vw, 2.35rem);
}

.res-int-b-hero__wrap {
  position: relative;
  overflow: hidden;
  background: none;
  border-radius: 0;
  padding: 0;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
  box-shadow: none;
}

.res-int-b-hero__wrap::before,
.res-int-b-hero__wrap::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.res-int-b-hero__wrap::before {
  width: 360px;
  height: 360px;
  right: -120px;
  top: -110px;
  background: rgba(255, 255, 255, 0.06);
}

.res-int-b-hero__wrap::after {
  width: 220px;
  height: 220px;
  left: -75px;
  bottom: -95px;
  background: rgba(79, 210, 214, 0.16);
}

.res-int-b-hero__content,
.res-int-b-hero__visual {
  position: relative;
  z-index: 1;
}

.res-int-b-hero .res-int-b-label--hero {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
}

.res-int-b-hero__title {
  color: #fff;
  font-size: clamp(2.25rem, 4vw, 3.85rem);
  max-width: 560px;
}

.res-int-b-hero__text {
  color: rgba(255, 255, 255, 0.86);
  max-width: 560px;
}

.res-int-b-hero .btn--primary {
  background: #ffffff;
  color: #0f4c9a;
  border-color: #ffffff;
}

.res-int-b-hero .btn--primary:hover,
.res-int-b-hero .btn--primary:focus-visible {
  background: #edf4ff;
  border-color: #edf4ff;
  color: #0b2f62;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.res-int-b-hero .btn--outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.58);
}

.res-int-b-hero .btn--outline:hover,
.res-int-b-hero .btn--outline:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: #ffffff;
}

.res-int-b-hero__chips span {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: none;
}

.res-int-b-hero__visual {
  min-height: 290px;
  justify-content: flex-end;
}

.res-int-b-hero__blob--one {
  width: 66%;
  height: 72%;
  right: -0.8rem;
  top: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
}

.res-int-b-hero__blob--two {
  width: 170px;
  height: 170px;
  left: 0.6rem;
  bottom: -0.65rem;
  background: rgba(79, 210, 214, 0.2);
}

.res-int-b-hero__image-card {
  width: min(100%, 470px);
  border-radius: 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.res-int-b-hero__image {
  min-height: 290px;
  max-height: 320px;
}

@media (max-width: 1100px) {
  .res-int-b-hero__wrap {
    padding: 1.6rem;
  }

  .res-int-b-hero__visual {
    width: 100%;
    justify-content: center;
  }

  .res-int-b-hero__image-card {
    width: min(100%, 520px);
  }
}

@media (max-width: 760px) {
  .res-int-b-hero__wrap {
    border-radius: 0;
    padding: 1.3rem;
  }

  .res-int-b-hero__title {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .res-int-b-hero__image {
    min-height: 225px;
    max-height: 255px;
  }

  .res-int-b-hero__chips {
    gap: 0.55rem;
  }
}

/* =========================================================
   Residential Internet hero polish — tighter spacing, full photo
   ========================================================= */
.res-int-b-hero {
  margin-top: -1px;
  padding-top: 0;
  padding-bottom: clamp(1.6rem, 2.8vw, 2.4rem);
}

.res-int-b-hero .container {
  padding-top: 0;
}

.res-int-b-hero__wrap {
  align-items: stretch;
  min-height: 520px;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.res-int-b-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.35rem, 1vw, 0.85rem) clamp(1.1rem, 1.8vw, 1.6rem) clamp(0.35rem, 1vw, 0.85rem) 0;
}

.res-int-b-hero__title {
  font-size: clamp(2.45rem, 4vw, 3.85rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
  max-width: 560px;
  margin: 0;
}

.res-int-b-hero__text {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.72;
  max-width: 545px;
  margin-top: 1.15rem;
}

.res-int-b-hero__actions {
  margin-top: 1.35rem;
}

.res-int-b-hero__chips {
  margin-top: 1.15rem;
}

.res-int-b-hero__chips span {
  font-size: 0.93rem;
  padding: 0.62rem 0.95rem;
  font-weight: 700;
}

.res-int-b-hero__visual {
  min-height: 100%;
  height: 100%;
  align-self: stretch;
  justify-content: stretch;
  padding-left: clamp(1rem, 1.8vw, 1.7rem);
}

.res-int-b-hero__blob--one {
  width: 58%;
  height: 65%;
  right: -0.4rem;
  top: 0;
}

.res-int-b-hero__blob--two {
  width: 180px;
  height: 180px;
  left: 0.4rem;
  bottom: -0.75rem;
}

.res-int-b-hero__image-card {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  border-radius: 1.7rem;
}

.res-int-b-hero__image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1100px) {
  .res-int-b-hero__wrap {
    min-height: auto;
    gap: 1.35rem;
  }

  .res-int-b-hero__visual {
    padding-left: 0;
    min-height: 320px;
  }

  .res-int-b-hero__image-card {
    min-height: 320px;
  }

  .res-int-b-hero__image {
    min-height: 320px;
  }
}

@media (max-width: 760px) {
  .res-int-b-hero {
    padding-bottom: 1.8rem;
  }

  .res-int-b-hero__wrap {
    border-radius: 0;
    padding: 1.15rem;
    gap: 1rem;
  }

  .res-int-b-hero__content {
    padding: 0;
  }

  .res-int-b-hero__title {
    font-size: clamp(2rem, 9.8vw, 2.85rem);
    line-height: 0.98;
  }

  .res-int-b-hero__text {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .res-int-b-hero__visual,
  .res-int-b-hero__image-card,
  .res-int-b-hero__image {
    min-height: 230px;
  }

  .res-int-b-hero__chips span {
    font-size: 0.87rem;
  }
}

/* =========================================================
   Residential Internet hero final polish — image flush right
   ========================================================= */
.res-int-b-hero {
  margin-top: -1px;
  padding-top: 0;
  padding-bottom: clamp(1.5rem, 2.6vw, 2.2rem);
}

.res-int-b-hero .container {
  padding-top: 0;
}

.res-int-b-hero__wrap {
  align-items: stretch;
  min-height: 500px;
  gap: 0;
  padding: 0;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.02fr) minmax(350px, 0.98fr);
}

.res-int-b-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.1rem, 3.2vw, 2.85rem) clamp(2rem, 3vw, 2.7rem) clamp(2rem, 3vw, 2.55rem);
}

.res-int-b-hero__title {
  font-size: clamp(2.25rem, 3.75vw, 3.45rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  max-width: 540px;
  margin: 0;
}

.res-int-b-hero__text {
  max-width: 520px;
  margin-top: 1rem;
  font-size: clamp(0.98rem, 1.15vw, 1.05rem);
  line-height: 1.7;
}

.res-int-b-label--hero {
  margin-bottom: 0.9rem;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
}

.res-int-b-hero__actions {
  margin-top: 1.25rem;
  gap: 0.8rem;
}

.res-int-b-hero__chips {
  margin-top: 1rem;
  gap: 0.65rem;
}

.res-int-b-hero__chips span {
  padding: 0.58rem 0.9rem;
  font-size: 0.89rem;
  font-weight: 700;
}

.res-int-b-hero__visual {
  min-height: 100%;
  height: 100%;
  align-self: stretch;
  justify-content: stretch;
  padding-left: 0;
}

.res-int-b-hero__blob--one {
  width: 58%;
  height: 64%;
  right: -0.35rem;
  top: 0;
}

.res-int-b-hero__blob--two {
  width: 170px;
  height: 170px;
  left: -0.4rem;
  bottom: -0.8rem;
}

.res-int-b-hero__image-card {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: none;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.res-int-b-hero__image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: none;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1100px) {
  .res-int-b-hero__wrap {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .res-int-b-hero__content {
    padding: 1.7rem 1.6rem 1.2rem;
  }

  .res-int-b-hero__visual {
    min-height: 320px;
  }

  .res-int-b-hero__image-card,
  .res-int-b-hero__image {
    min-height: 320px;
  }
}

@media (max-width: 760px) {
  .res-int-b-hero__wrap {
    border-radius: 0;
  }

  .res-int-b-hero__content {
    padding: 1.35rem 1.15rem 1rem;
  }

  .res-int-b-hero__title {
    font-size: clamp(1.95rem, 9vw, 2.7rem);
    line-height: 1;
  }

  .res-int-b-hero__text {
    font-size: 0.96rem;
    line-height: 1.62;
  }

  .res-int-b-hero__visual,
  .res-int-b-hero__image-card,
  .res-int-b-hero__image {
    min-height: 230px;
  }

  .res-int-b-hero__chips span {
    font-size: 0.84rem;
  }
}


/* =========================================================
   RESIDENTIAL RURAL INTERNET — TekSavvy-inspired redesign
   ========================================================= */
.rural-ts-hero {
  padding: 0 !important;
  background: #f4f6fb !important;
}
.rural-ts-hero__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  align-items: center;
  gap: 2.2rem;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%);
  border: none;
  border-radius: 1.75rem;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  box-shadow: 0 18px 38px rgba(15, 36, 70, 0.2);
  overflow: hidden;
  position: relative;
}
.rural-ts-hero__eyebrow,
.rural-ts-section-label {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: #edf3fb;
  border: 1px solid #d7e4f5;
  color: #0f3d7a;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rural-ts-hero__title {
  margin: 1.05rem 0 1rem;
  font-size: clamp(2.25rem, 5vw, 4.2rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  font-weight: 900;
  color: #121826;
}
.rural-ts-hero__title span {
  color: #0f3d7a;
}
.rural-ts-hero__text {
  max-width: 40rem;
  margin: 0;
  color: #475467;
  font-size: 1.02rem;
  line-height: 1.8;
}
.rural-ts-hero__actions {
  display: flex;
  gap: 0.95rem;
  margin-top: 1.55rem;
  flex-wrap: wrap;
}
.rural-ts-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.35rem;
}
.rural-ts-hero__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: #f7f9fc;
  border: 1px solid #e3e8ef;
  color: #1d2939;
  font-size: 0.92rem;
  font-weight: 700;
}
.rural-ts-hero__visual {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rural-ts-hero__blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(0px);
}
.rural-ts-hero__blob--one {
  width: 74%;
  height: 74%;
  background: rgba(15, 61, 122, 0.08);
  top: 12%;
  right: 4%;
}
.rural-ts-hero__blob--two {
  width: 38%;
  height: 38%;
  background: rgba(49, 191, 192, 0.14);
  bottom: 8%;
  left: 8%;
}
.rural-ts-hero__image-card {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  min-height: 400px;
  border-radius: 1.8rem;
  overflow: hidden;
  background: linear-gradient(180deg, #eef3f9 0%, #f8fafc 100%);
  box-shadow: 0 22px 48px rgba(15, 36, 70, 0.12);
}
.rural-ts-hero__image {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.rural-ts-features {
  padding: 0 0 2.5rem;
  background: #f6f8fb;
}
.rural-ts-features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.rural-ts-feature-card {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 1.4rem;
  padding: 1.6rem;
  box-shadow: 0 12px 30px rgba(15, 36, 70, 0.05);
}
.rural-ts-feature-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.rural-ts-feature-card__icon--orange { background: #fff1e8; color: var(--nl-blue-600, #1a5fb4); }
.rural-ts-feature-card__icon--blue { background: #eaf1ff; color: #2563eb; }
.rural-ts-feature-card__icon--red { background: #fdecec; color: #dc2626; }
.rural-ts-feature-card h3 {
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #121826;
  margin: 0 0 0.7rem;
}
.rural-ts-feature-card p,
.rural-ts-overview__content p,
.rural-ts-step-card p,
.rural-ts-section-heading p {
  margin: 0;
  color: #475467;
  line-height: 1.8;
}
.rural-ts-overview {
  padding: 1rem 0 2.8rem;
}
.rural-ts-overview__grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 2rem;
}
.rural-ts-overview__visual {
  border-radius: 1.8rem;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f7fb 0%, #edf2f8 100%);
  min-height: 430px;
  border: 1px solid #e6ebf2;
  box-shadow: 0 18px 36px rgba(15, 36, 70, 0.08);
}
.rural-ts-overview__visual img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.rural-ts-overview__content h2,
.rural-ts-section-heading h2 {
  margin: 1rem 0 0.85rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 900;
  color: #121826;
}
.rural-ts-checklist {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.8rem;
}
.rural-ts-checklist li {
  position: relative;
  padding-left: 1.8rem;
  color: #1d2939;
  font-weight: 600;
  line-height: 1.6;
}
.rural-ts-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: #54c5d0;
  box-shadow: 0 0 0 6px rgba(84, 197, 208, 0.15);
}
.rural-ts-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}
.rural-ts-metric {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 1rem;
  padding: 1rem 1.05rem;
}
.rural-ts-metric strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 900;
  color: #54c5d0;
  margin-bottom: 0.35rem;
}
.rural-ts-metric span {
  color: #667085;
  font-size: 0.9rem;
  font-weight: 600;
}
.rural-ts-overview__actions {
  margin-top: 1.5rem;
}
.section--muted {
  background: #f6f8fb;
}
.rural-ts-steps {
  padding: 3rem 0;
}
.rural-ts-section-heading {
  max-width: 42rem;
  margin: 0 auto 1.8rem;
  text-align: center;
}
.rural-ts-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.rural-ts-step-card {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 1.35rem;
  padding: 1.5rem;
  box-shadow: 0 12px 28px rgba(15, 36, 70, 0.05);
}
.rural-ts-step-card__num {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: #54c5d0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 1rem;
}
.rural-ts-step-card h3 {
  margin: 0 0 0.65rem;
  font-size: 1.2rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #121826;
}
@media (max-width: 1100px) {
  .rural-ts-hero__wrap,
  .rural-ts-overview__grid,
  .rural-ts-features__grid,
  .rural-ts-steps__grid {
    grid-template-columns: 1fr;
  }
  .rural-ts-hero__visual,
  .rural-ts-hero__image-card,
  .rural-ts-overview__visual,
  .rural-ts-overview__visual img {
    min-height: 320px;
  }
}
@media (max-width: 700px) {
  .rural-ts-hero {
    padding-top: 1rem;
  }
  .rural-ts-hero__wrap {
    padding: 1.2rem;
    border-radius: 1.3rem;
  }
  .rural-ts-hero__actions,
  .rural-ts-metrics {
    grid-template-columns: 1fr;
  }
  .rural-ts-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .rural-ts-hero__chips {
    gap: 0.6rem;
  }
  .rural-ts-hero__chips span {
    font-size: 0.86rem;
    min-height: 2.35rem;
  }
}


/* Rural hero cutout photo integration */
.rural-ts-hero__visual {
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 470px;
}
.rural-ts-hero__image-card {
  width: min(100%, 520px);
  min-height: auto;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.rural-ts-hero__image {
  min-height: auto;
  height: auto;
  max-height: 470px;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 16px 24px rgba(15, 36, 70, 0.08));
}
@media (max-width: 1100px) {
  .rural-ts-hero__visual {
    justify-content: center;
    min-height: 320px;
  }
  .rural-ts-hero__image-card {
    width: min(100%, 420px);
  }
  .rural-ts-hero__image {
    max-height: 320px;
  }
}

/* Rural hero spacing fix - pull hero up to sit directly under header */
.rural-ts-hero {
  margin-top: -1px;
  padding-top: 0;
}

.rural-ts-hero .container {
  padding-top: 0;
}

/* =========================================================
   RURAL INTERNET IMPROVEMENTS — clearer hierarchy, better rural identity
   ========================================================= */
.rural-ts-hero {
  padding: 0 0 1.7rem;
  background: linear-gradient(180deg, #eef4fb 0%, #f6f8fb 100%);
}

.rural-ts-hero__wrap {
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: 1.4rem;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%);
  border: none;
  box-shadow: 0 18px 42px rgba(15, 36, 70, 0.2);
  padding: clamp(1.35rem, 2.2vw, 1.95rem) clamp(1.55rem, 2.4vw, 2.2rem);
}

.rural-ts-hero__content {
  padding-right: 0.2rem;
}

.rural-ts-hero__title {
  color: #fff;
  margin: 0.85rem 0 0.9rem;
  font-size: clamp(2.2rem, 4.6vw, 3.95rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.rural-ts-hero__text {
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.72;
}

.rural-ts-hero__actions {
  margin-top: 1.25rem;
}

.rural-ts-hero__chips {
  gap: 0.68rem;
  margin-top: 1rem;
}

.rural-ts-hero__chips span {
  min-height: 2.45rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.88rem;
}

.rural-ts-hero__visual {
  min-height: 390px;
  align-self: stretch;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at 66% 28%, rgba(18, 61, 124, 0.08), rgba(18, 61, 124, 0.08) 28%, transparent 29%),
    linear-gradient(180deg, #f7f9fd 0%, #eef3f8 100%);
  border: 1px solid #e3e8ef;
}

.rural-ts-hero__signal-set {
  position: absolute;
  right: 4.8rem;
  top: 3.5rem;
  width: 180px;
  height: 180px;
  z-index: 1;
}

.rural-ts-hero__signal-set span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(15, 61, 122, 0.18);
}

.rural-ts-hero__signal-set span:nth-child(2) {
  inset: 18px;
}

.rural-ts-hero__signal-set span:nth-child(3) {
  inset: 36px;
}

.rural-ts-hero__hill {
  position: absolute;
  bottom: -4%;
  border-radius: 50% 50% 0 0;
  z-index: 0;
}

.rural-ts-hero__hill--back {
  left: -2%;
  width: 55%;
  height: 34%;
  background: linear-gradient(180deg, rgba(164, 207, 182, 0.45) 0%, rgba(132, 188, 154, 0.52) 100%);
}

.rural-ts-hero__hill--front {
  right: -5%;
  width: 48%;
  height: 26%;
  background: linear-gradient(180deg, rgba(83, 153, 118, 0.3) 0%, rgba(61, 132, 96, 0.42) 100%);
}

.rural-ts-hero__glow {
  position: absolute;
  left: 6%;
  bottom: 14%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(79, 210, 214, 0.18);
  filter: blur(4px);
}

.rural-ts-hero__person {
  position: absolute;
  right: 2.2rem;
  bottom: 0;
  width: min(72%, 420px);
  max-width: 100%;
  height: auto;
  display: block;
  z-index: 2;
}

.rural-ts-section-heading--compact {
  max-width: 46rem;
  margin-bottom: 1.25rem;
}

.rural-ts-section-heading--compact h2 {
  font-size: clamp(1.7rem, 3.3vw, 2.45rem);
}

.rural-ts-section-heading--compact p {
  font-size: 0.96rem;
}

.rural-ts-features {
  padding: 0 0 2rem;
}

.rural-ts-features__grid {
  gap: 1.1rem;
}

.rural-ts-feature-card {
  position: relative;
  padding: 1.35rem 1.3rem 1.25rem;
  border-radius: 1.25rem;
}

.rural-ts-feature-card--featured {
  background: #54c5d0;
  border-color: #54c5d0;
  box-shadow: 0 18px 34px rgba(84, 197, 208, 0.25);
  transform: translateY(-6px);
}

.rural-ts-feature-card__badge {
  position: absolute;
  top: -0.72rem;
  left: 1.2rem;
  padding: 0.35rem 0.7rem;
  background: #3aabb6;
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rural-ts-feature-card__meta {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #667085;
  margin-bottom: 0.6rem;
}

.rural-ts-feature-card__icon {
  width: 2.7rem;
  height: 2.7rem;
  font-size: 1rem;
  margin-bottom: 0.9rem;
}

.rural-ts-feature-card h3 {
  font-size: 1.22rem;
  line-height: 1.12;
  margin-bottom: 0.55rem;
}

.rural-ts-overview {
  padding: 0.55rem 0 2.55rem;
}

.rural-ts-overview__grid {
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: 1.55rem;
  align-items: start;
}

.rural-ts-overview__visual-stack {
  display: grid;
  gap: 0.95rem;
}

.rural-ts-overview__visual {
  min-height: 360px;
  border-radius: 1.55rem;
}

.rural-ts-overview__visual img {
  min-height: 360px;
}

.rural-ts-overview__service-card {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  box-shadow: 0 12px 28px rgba(15, 36, 70, 0.05);
  padding: 1.1rem 1.1rem 1rem;
}

.rural-ts-overview__service-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #667085;
  margin-bottom: 0.8rem;
}

.rural-ts-overview__service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 0.9rem;
}

.rural-ts-overview__service-grid strong {
  display: block;
  color: #121826;
  font-size: 0.98rem;
  margin-bottom: 0.22rem;
}

.rural-ts-overview__service-grid span {
  display: block;
  color: #667085;
  font-size: 0.84rem;
  line-height: 1.5;
}

.rural-ts-overview__content h2,
.rural-ts-section-heading h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.8rem);
}

.rural-ts-overview__content p,
.rural-ts-step-card p,
.rural-ts-feature-card p,
.rural-ts-section-heading p {
  font-size: 0.98rem;
}

.rural-ts-checklist {
  margin-top: 1.05rem;
  gap: 0.68rem;
}

.rural-ts-metrics {
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.rural-ts-metric {
  padding: 0.92rem 1rem;
}

.rural-ts-overview__actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.rural-ts-steps {
  padding: 2.7rem 0;
}

.rural-ts-step-card {
  padding: 1.35rem;
}

@media (max-width: 1100px) {
  .rural-ts-hero__wrap,
  .rural-ts-overview__grid,
  .rural-ts-features__grid,
  .rural-ts-steps__grid {
    grid-template-columns: 1fr;
  }

  .rural-ts-hero__visual {
    min-height: 320px;
  }

  .rural-ts-hero__person {
    right: 1.2rem;
    width: min(62%, 360px);
  }

  .rural-ts-overview__visual,
  .rural-ts-overview__visual img {
    min-height: 320px;
  }
}

@media (max-width: 700px) {
  .rural-ts-hero__wrap {
    padding: 1.1rem;
  }

  .rural-ts-hero__title {
    font-size: clamp(2rem, 10vw, 2.95rem);
  }

  .rural-ts-hero__actions,
  .rural-ts-overview__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .rural-ts-feature-card--featured {
    transform: none;
  }

  .rural-ts-overview__service-grid,
  .rural-ts-metrics {
    grid-template-columns: 1fr;
  }

  .rural-ts-hero__visual {
    min-height: 280px;
  }

  .rural-ts-hero__person {
    width: min(72%, 300px);
    right: 0.8rem;
  }

  .rural-ts-hero__signal-set {
    right: 1.2rem;
    top: 1.4rem;
    width: 120px;
    height: 120px;
  }
}


/* Rural hero cleanup: remove photo box and decorative background */
.rural-ts-hero__visual {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  min-height: 390px;
  align-self: stretch;
  justify-content: flex-end;
}

.rural-ts-hero__signal-set,
.rural-ts-hero__hill,
.rural-ts-hero__glow,
.rural-ts-hero__image-card {
  display: none !important;
}

.rural-ts-hero__person {
  position: absolute;
  right: 0.25rem;
  bottom: 0;
  width: min(78%, 455px);
  max-width: 100%;
  height: auto;
  display: block;
  z-index: 2;
  filter: none;
}

@media (max-width: 1100px) {
  .rural-ts-hero__visual {
    min-height: 320px;
    width: 100%;
  }

  .rural-ts-hero__person {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 340px);
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .rural-ts-hero__visual {
    min-height: 250px;
  }

  .rural-ts-hero__person {
    width: min(100%, 280px);
  }
}

/* Rural page spacing refinement */
.rural-ts-features {
  padding: 2rem 0 4.5rem;
}

.rural-ts-section-heading--compact {
  margin-bottom: 2rem;
}

.rural-ts-overview {
  padding: 1.8rem 0 2.9rem;
}

@media (max-width: 1100px) {
  .rural-ts-features {
    padding: 1.5rem 0 3.5rem;
  }

  .rural-ts-overview {
    padding: 1.4rem 0 2.5rem;
  }
}

@media (max-width: 767px) {
  .rural-ts-features {
    padding: 1.1rem 0 2.75rem;
  }

  .rural-ts-section-heading--compact {
    margin-bottom: 1.5rem;
  }

  .rural-ts-overview {
    padding: 1rem 0 2.2rem;
  }
}

/* Rural overview section refresh with illustration-based layout */
.rural-ts-overview--illustrated {
  padding: 2.2rem 0 3rem;
}

.rural-ts-overview-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 2.25rem;
  align-items: center;
  background: linear-gradient(180deg, #f9fbfe 0%, #ffffff 100%);
  border: 1px solid #dbe5f0;
  border-radius: 1.75rem;
  padding: 2rem;
  overflow: hidden;
}

.rural-ts-overview-v2__media {
  align-self: end;
}

.rural-ts-overview-v2__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.rural-ts-overview-v2__content {
  max-width: 36rem;
}

.rural-ts-overview-v2__content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0.65rem 0 1rem;
}

.rural-ts-overview-v2__content p {
  font-size: 1rem;
  line-height: 1.75;
  color: #3f5573;
  margin-bottom: 1.2rem;
}

.rural-ts-checklist--compact {
  margin-top: 0;
  margin-bottom: 1.45rem;
}

.rural-ts-checklist--compact li {
  font-size: 1rem;
}

.rural-ts-metrics--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
  margin-bottom: 1.3rem;
}

.rural-ts-overview__actions--tight {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .rural-ts-overview-v2 {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 1.5rem;
  }

  .rural-ts-overview-v2__content {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .rural-ts-overview--illustrated {
    padding: 1.6rem 0 2.25rem;
  }

  .rural-ts-overview-v2 {
    border-radius: 1.3rem;
    padding: 1.15rem;
  }

  .rural-ts-metrics--compact {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   RESIDENTIAL INTERNET — included section CTA buttons
   ========================================================= */
.res-int-b-included__actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}


/* =========================================================
   RURAL SCENE SECTION — illustration blended into background
   ========================================================= */
.rural-scene-section {
  position: relative;
  overflow: hidden;
  background: #cfe8f5;
  padding: 3.5rem 0 0;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}
.rural-scene-section__bg {
  position: absolute;
  bottom: 0;
  left: -1%;
  width: 54%;
  max-width: 720px;
  pointer-events: none;
  z-index: 1;
  line-height: 0;
}
.rural-scene-section__bg img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.rural-scene-section__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  min-height: 460px;
  padding-bottom: 3.5rem;
  flex: 1;
}
.rural-scene-section__spacer { /* intentionally empty */ }
.rural-scene-section__content { max-width: 36rem; }
.rural-scene-section__content h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #121826;
  margin: 0 0 1rem;
}
.rural-scene-section__content p {
  font-size: 1rem;
  line-height: 1.75;
  color: #2a3d55;
  margin-bottom: 1.2rem;
}
@media (max-width: 1100px) {
  .rural-scene-section { padding-bottom: 0; min-height: auto; }
  .rural-scene-section__inner { grid-template-columns: 1fr; min-height: auto; padding-bottom: 1.5rem; }
  .rural-scene-section__spacer { display: none; }
  .rural-scene-section__content { max-width: none; }
  .rural-scene-section__bg { position: relative; bottom: auto; left: auto; width: 100%; max-width: 100%; margin-top: 1.5rem; }
}
@media (max-width: 700px) {
  .rural-scene-section { padding-top: 2rem; }
  .rural-scene-section__content h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}


/* =========================================================
   RESIDENTIAL HARDWARE PAGE
   ========================================================= */
.res-hw-cards-section { padding: 3.5rem 0 2.5rem; }
.res-hw-heading { text-align: center; max-width: 600px; margin: 0 auto 2.5rem; }
.res-hw-heading__sub { color: #475467; font-size: 1rem; line-height: 1.75; margin: 0.75rem 0 0; }
.res-hw-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.res-hw-card { position: relative; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.25rem; padding: 1.6rem 1.35rem 1.4rem; transition: box-shadow 0.18s, transform 0.18s; }
.res-hw-card:hover { box-shadow: 0 12px 28px rgba(15,36,70,0.09); transform: translateY(-2px); }
.res-hw-card--featured { background: #54c5d0; border-color: #54c5d0; }
.res-hw-card--featured h3, .res-hw-card--featured p { color: #fff; }
.res-hw-card--featured p { opacity: 0.9; }
.res-hw-card__badge { position: absolute; top: -0.65rem; left: 1.35rem; background: #145bb0; color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.7rem; border-radius: 999px; }
.res-hw-card__icon { width: 2.5rem; height: 2.5rem; border-radius: 0.7rem; background: rgba(84,197,208,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; color: #54c5d0; }
.res-hw-card--featured .res-hw-card__icon { background: rgba(255,255,255,0.2); color: #fff; }
.res-hw-card h3 { font-size: 1rem; font-weight: 800; color: #121826; margin: 0 0 0.5rem; line-height: 1.25; }
.res-hw-card p { font-size: 0.9rem; color: #475467; line-height: 1.65; margin: 0; }
.res-hw-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: #fff; border: 1px solid #dbe5f0; border-radius: 1.75rem; overflow: hidden; }
.res-hw-split__media { min-height: 400px; background: #f0f4f8; display: flex; align-items: stretch; justify-content: center; padding: 0; overflow:hidden; }
.res-hw-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.res-hw-split__content { padding: 2.5rem; }
.res-hw-split__content h2 { font-size: clamp(1.4rem,2.5vw,1.9rem); font-weight: 900; color: #121826; line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 1rem; }
.res-hw-split__content p { font-size: 0.98rem; color: #475467; line-height: 1.75; margin-bottom: 1.5rem; }
.res-hw-includes { border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; margin-bottom: 0.5rem; }
.res-hw-include-row { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.1rem; border-bottom: 1px solid #e2e8f0; background: #fff; }
.res-hw-include-row:last-child { border-bottom: none; }
.res-hw-include-row:nth-child(even) { background: #f8fafc; }
.res-hw-include-row__label { font-size: 0.93rem; font-weight: 600; color: #1d2939; }
.res-hw-include-row__badge { font-size: 0.78rem; font-weight: 800; padding: 0.2rem 0.75rem; border-radius: 999px; background: #eef2f8; color: #0f3d7a; }
.res-hw-include-row__badge--green { background: rgba(84,197,208,0.12); color: #1a9aaa; }
.res-hw-include-row__badge--blue  { background: #dbeafe; color: #1a4fd6; }
@media (max-width: 1100px) { .res-hw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .res-hw-split { grid-template-columns: 1fr; } .res-hw-split__media { min-height: 260px; } .res-hw-split__content { padding: 2rem; } }
@media (max-width: 700px) { .res-hw-cards { grid-template-columns: 1fr; } .res-hw-cards-section { padding: 2.5rem 0 2rem; } .res-hw-split__content { padding: 1.5rem; } }


/* =========================================================
   HOME PHONE PAGE
   ========================================================= */

/* Hero blob accents — warm teal for phone */
.res-phone-hero .res-int-b-hero__blob--one {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
}
.res-phone-hero .res-int-b-hero__blob--two {
  background: radial-gradient(circle, rgba(26, 111, 212, 0.12) 0%, transparent 70%);
}

/* Intro split */
.res-phone-intro { padding: 4rem 0; }

.res-phone-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.res-phone-intro__content h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  color: #121826;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin: 0 0 1rem;
}

.res-phone-intro__content p {
  font-size: 1rem;
  color: #475467;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.res-phone-intro__actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* Included panel */
.res-phone-includes {
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 36, 70, 0.06);
}

.res-phone-includes__header {
  background: #0f3d7a;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
}

.res-phone-includes__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.res-phone-includes__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid #f0f4f8;
  font-size: 0.93rem;
  font-weight: 600;
  color: #1d2939;
  line-height: 1.5;
}

.res-phone-includes__list li:last-child { border-bottom: none; }

.res-phone-includes__list li svg {
  flex-shrink: 0;
  margin-top: 0.22rem;
  color: #1a6fd4;
}

/* Feature cards section */
.res-phone-features { padding: 4rem 0; }

.res-phone-features__heading {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 2.5rem;
}

.res-phone-features__heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin: 0 0 0.75rem;
}

.res-phone-features__heading p {
  font-size: 1rem;
  color: #475467;
  line-height: 1.7;
  margin: 0;
}

/* 3-column feature cards */
.res-phone-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.res-phone-feature-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.35rem;
  padding: 1.75rem 1.5rem 1.5rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.res-phone-feature-card:hover {
  box-shadow: 0 12px 32px rgba(15, 36, 70, 0.09);
  transform: translateY(-2px);
}

.res-phone-feature-card--featured {
  background: #54c5d0;
  border-color: #54c5d0;
}

.res-phone-feature-card--featured h3,
.res-phone-feature-card--featured p { color: #fff; }
.res-phone-feature-card--featured p { opacity: 0.9; }

.res-phone-feature-card__badge {
  position: absolute;
  top: -0.7rem;
  left: 1.5rem;
  background: #3aabb6;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
}

.res-phone-feature-card__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.75rem;
  background: rgba(84,197,208,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #54c5d0;
}

.res-phone-feature-card--featured .res-phone-feature-card__icon {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.res-phone-feature-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #121826;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.res-phone-feature-card p {
  font-size: 0.92rem;
  color: #475467;
  line-height: 1.65;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .res-phone-intro__grid { grid-template-columns: 1fr; gap: 2rem; }
  .res-phone-feature-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .res-phone-intro { padding: 2.5rem 0; }
  .res-phone-features { padding: 2.5rem 0; }
  .res-phone-feature-grid { grid-template-columns: 1fr; }
  .res-phone-intro__actions { flex-direction: column; }
}


/* =========================================================
   FEATURED CARD COLOUR — teal across all pages
   ========================================================= */

/* Home phone */
.res-phone-feature-card--featured {
  background: #54c5d0 !important;
  border-color: #54c5d0 !important;
}
.res-phone-feature-card__badge { background: #3aabb6 !important; }

/* Wi-Fi coverage */
.wifi-cov-card--featured {
  background: #54c5d0 !important;
  border-color: #54c5d0 !important;
}
.wifi-cov-card__badge { background: #3aabb6 !important; }

/* Hardware */
.res-hw-card--featured {
  background: #54c5d0 !important;
  border-color: #54c5d0 !important;
}
.res-hw-card__badge { background: #3aabb6 !important; }


/* =========================================================
   HOME PHONE — globe image in intro section
   ========================================================= */

/* Match section bg to the image's light grey blob background */
.res-phone-intro {
  background: #f2f3f5;
}

.res-phone-intro__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.res-phone-intro__visual img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  /* mix-blend-mode removes the light grey image background
     so the blobs blend seamlessly into the section background */
  mix-blend-mode: multiply;
}

@media (max-width: 1024px) {
  .res-phone-intro__visual img {
    max-width: 360px;
    margin: 0 auto;
  }
}


/* Globe image — transparent PNG, no blend mode needed */
.res-phone-intro {
  background: #fff !important;
}
.res-phone-intro__visual img {
  mix-blend-mode: normal !important;
}


/* =========================================================
   SUBPAGE HEADINGS — match home residential / home business
   font style: Inter 900, tight letter-spacing, home-page feel
   ========================================================= */

/* Hero H1s on all subpages */
.res-int-b-hero__title,
.rural-ts-hero__title,
.res-wifi-hero .res-int-b-hero__title,
.res-hw-hero .res-int-b-hero__title,
.res-phone-hero .res-int-b-hero__title,
.res-phone-hw-hero .res-int-b-hero__title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

/* Section H2s on all subpages */
.res-int-b-title,
.rural-ts-section-heading h2,
.rural-scene-section__content h2,
.wifi-cov-heading .res-int-b-title,
.wifi-cov-split__content h2,
.res-hw-heading .res-int-b-title,
.res-hw-split__content h2,
.res-phone-intro__content h2,
.res-phone-features__heading h2,
.res-phone-hw-hero .res-int-b-hero__title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

/* Card H3s */
.res-int-b-card h3,
.rural-ts-feature-card h3,
.rural-ts-step-card h3,
.wifi-cov-card h3,
.res-hw-card h3,
.res-phone-feature-card h3 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
}


/* =========================================================
   RESIDENTIAL TV PAGE
   ========================================================= */

.res-tv-hero .res-int-b-hero__blob--one {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
}
.res-tv-hero .res-int-b-hero__blob--two {
  background: radial-gradient(circle, rgba(15, 61, 122, 0.12) 0%, transparent 70%);
}

.res-tv-cards-section { padding: 3.5rem 0 2.5rem; }

.res-tv-heading { text-align: center; max-width: 600px; margin: 0 auto 2.5rem; }
.res-tv-heading__sub { color: #475467; font-size: 1rem; line-height: 1.75; margin: 0.75rem 0 0; }

.res-tv-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.res-tv-card {
  position: relative;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1.35rem;
  padding: 1.75rem 1.5rem 1.5rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.res-tv-card:hover {
  box-shadow: 0 12px 32px rgba(15,36,70,0.09);
  transform: translateY(-2px);
}

.res-tv-card--featured {
  background: #0e9f8e;
  border-color: #0e9f8e;
}

.res-tv-card--featured h3,
.res-tv-card--featured p { color: #fff; }
.res-tv-card--featured p { opacity: 0.9; }

.res-tv-card__badge {
  position: absolute;
  top: -0.7rem;
  left: 1.5rem;
  background: #0b7d6f;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
}

.res-tv-card__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.75rem;
  background: rgba(15,61,122,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #0f3d7a;
}

.res-tv-card--featured .res-tv-card__icon {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.res-tv-card h3 { font-size: 1.1rem; font-weight: 800; color: #121826; margin: 0 0 0.55rem; line-height: 1.25; letter-spacing: -0.025em; }
.res-tv-card p { font-size: 0.95rem; color: #475467; line-height: 1.65; margin: 0; }

.res-tv-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 1.75rem;
  overflow: hidden;
}

.res-tv-split__media { min-height: 380px; }
.res-tv-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.res-tv-split__content { padding: 2.5rem; }
.res-tv-split__content h2 { font-size: clamp(1.4rem,2.5vw,1.9rem); font-weight: 900; color: #121826; line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 1rem; }
.res-tv-split__content p { font-size: 0.98rem; color: #475467; line-height: 1.75; margin-bottom: 1.25rem; }

@media (max-width: 1024px) {
  .res-tv-cards { grid-template-columns: 1fr 1fr; }
  .res-tv-split { grid-template-columns: 1fr; }
  .res-tv-split__media { min-height: 240px; }
  .res-tv-split__content { padding: 2rem; }
}

@media (max-width: 700px) {
  .res-tv-cards { grid-template-columns: 1fr; }
  .res-tv-cards-section { padding: 2.5rem 0 2rem; }
  .res-tv-split__content { padding: 1.5rem; }
}


/* =========================================================
   RESIDENTIAL TV PAGE — cinematic dark design
   ========================================================= */

/* ---- HERO ---- */
.tv-hero {
  position: relative;
  min-height: 580px;
  background: #06090f;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 5rem 0 4rem;
}

/* Scrolling mosaic tracks */
.tv-hero__mosaic {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0;
  overflow: hidden;
  opacity: 0.18;
}

.tv-hero__mosaic-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
}

.tv-hero__mosaic-track--1 { animation: tvScroll 40s linear infinite; }
.tv-hero__mosaic-track--2 { animation: tvScroll 55s linear infinite reverse; }
.tv-hero__mosaic-track--3 { animation: tvScroll 45s linear infinite; }

@keyframes tvScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tv-tile {
  flex-shrink: 0;
  height: 110px;
  min-width: 160px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  gap: 0.5rem;
  letter-spacing: 0.01em;
}

.tv-tile--movies    { background: linear-gradient(135deg, #1a1a2e, #16213e); border: 1px solid rgba(99,102,241,0.3); }
.tv-tile--sports    { background: linear-gradient(135deg, #0d1f0d, #1a3a1a); border: 1px solid rgba(34,197,94,0.3); }
.tv-tile--news      { background: linear-gradient(135deg, #1e1205, #3d2411); border: 1px solid rgba(251,146,60,0.3); }
.tv-tile--docs      { background: linear-gradient(135deg, #0f1923, #1a2d3d); border: 1px solid rgba(56,189,248,0.3); }
.tv-tile--kids      { background: linear-gradient(135deg, #1f0a2e, #2d1040); border: 1px solid rgba(192,132,252,0.3); }
.tv-tile--drama     { background: linear-gradient(135deg, #1a0a0a, #3d1515); border: 1px solid rgba(239,68,68,0.3); }
.tv-tile--comedy    { background: linear-gradient(135deg, #1a1505, #3d3011); border: 1px solid rgba(250,204,21,0.3); }
.tv-tile--lifestyle { background: linear-gradient(135deg, #0a1a14, #143d2a); border: 1px solid rgba(52,211,153,0.3); }
.tv-tile--music     { background: linear-gradient(135deg, #1a0520, #3d1040); border: 1px solid rgba(232,121,249,0.3); }
.tv-tile--hd        { background: linear-gradient(135deg, #050a1a, #0f1f3d); border: 1px solid rgba(96,165,250,0.3); }
.tv-tile--ondemand  { background: linear-gradient(135deg, #1a0505, #3d1010); border: 1px solid rgba(248,113,113,0.3); }
.tv-tile--canadian  { background: linear-gradient(135deg, #1a0505, #3d1010); border: 1px solid rgba(239,68,68,0.5); }
.tv-tile--thriller  { background: linear-gradient(135deg, #0a0a0a, #1a1a1a); border: 1px solid rgba(156,163,175,0.3); }
.tv-tile--sports2   { background: linear-gradient(135deg, #0d1f0d, #1a3a1a); border: 1px solid rgba(74,222,128,0.3); }
.tv-tile--family    { background: linear-gradient(135deg, #1f1205, #3d2a0a); border: 1px solid rgba(251,191,36,0.3); }
.tv-tile--nature    { background: linear-gradient(135deg, #0a1a0a, #143d14); border: 1px solid rgba(34,197,94,0.4); }
.tv-tile--local     { background: linear-gradient(135deg, #050f1a, #0f2040); border: 1px solid rgba(59,130,246,0.4); }
.tv-tile--premium   { background: linear-gradient(135deg, #1a1505, #403510); border: 1px solid rgba(250,204,21,0.5); }

/* Dark gradient over mosaic */
.tv-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #06090f 0%,
    #06090f 38%,
    rgba(6,9,15,0.75) 65%,
    rgba(6,9,15,0.4) 100%
  );
  z-index: 1;
}

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

.tv-hero__content { max-width: 580px; }

.tv-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.tv-hero__badge-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #ef4444;
  animation: tvPulse 2s ease-in-out infinite;
}

@keyframes tvPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

.tv-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 1.1rem;
}

.tv-hero__title span { color: var(--nl-blue-600, #1a5fb4); }

.tv-hero__text {
  font-size: 1.12rem;
  line-height: 1.68;
  color: rgba(255,255,255,0.72);
  margin-bottom: 1.75rem;
  max-width: 480px;
}

.tv-hero__actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.tv-btn-primary {
  background: var(--nl-blue-600, #1a5fb4);
  color: #fff !important;
  border: 2px solid var(--nl-blue-600, #1a5fb4);
  font-weight: 700;
  padding: 0.75rem 1.75rem;
  border-radius: 0.6rem;
  transition: background 0.18s, transform 0.15s;
  font-size: 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.tv-btn-primary:hover { background: var(--nl-blue-700, #0f3d7a); border-color: var(--nl-blue-700, #0f3d7a); transform: translateY(-1px); }

.tv-btn-ghost {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.35);
  font-weight: 700;
  padding: 0.75rem 1.75rem;
  border-radius: 0.6rem;
  transition: border-color 0.18s;
  font-size: 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.tv-btn-ghost:hover { border-color: rgba(255,255,255,0.7); }

.tv-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tv-hero__chips span {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.8);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
}

/* ---- STATS BAR ---- */
.tv-stats-section {
  background: #0f1420;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0;
}

.tv-stats-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 0;
}

.tv-stat {
  flex: 1;
  text-align: center;
  padding: 0.25rem 0.5rem;
}

.tv-stat strong {
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--nl-blue-600, #1a5fb4);
  line-height: 1;
  letter-spacing: -0.03em;
}

.tv-stat span {
  display: block;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  margin-top: 0.22rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tv-stat-divider {
  width: 1px;
  height: 2.2rem;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* ---- GENRE CARDS ---- */
.tv-genres-section {
  background: #0a0d14;
  padding: 4rem 0;
}

.tv-genres-heading {
  text-align: center;
  margin-bottom: 2.5rem;
}

.tv-genres-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  margin: 0 0 0.65rem;
}

.tv-genres-heading p {
  color: rgba(255,255,255,0.55);
  font-size: 1rem;
  margin: 0;
}

.tv-genres-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.tv-genre-card {
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.2s, border-color 0.2s;
  cursor: default;
}

.tv-genre-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.2);
}

.tv-genre-card--movies   { background: linear-gradient(135deg, #1a1a2e 0%, #12122a 100%); }
.tv-genre-card--sports   { background: linear-gradient(135deg, #0d2010 0%, #091808 100%); }
.tv-genre-card--news     { background: linear-gradient(135deg, #1e1508 0%, #160f04 100%); }
.tv-genre-card--shows    { background: linear-gradient(135deg, #1a0a2a 0%, #12061e 100%); }
.tv-genre-card--kids     { background: linear-gradient(135deg, #1a1205 0%, #140e02 100%); }
.tv-genre-card--ondemand { background: linear-gradient(135deg, #0a1520 0%, #060f18 100%); }

.tv-genre-card__icon {
  font-size: 2rem;
  margin-bottom: 0.9rem;
  display: block;
}

.tv-genre-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.tv-genre-card p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0;
}

/* ---- PLANS SECTION ---- */
.tv-plans-section {
  background: #f6f8fb;
  padding: 4.5rem 0;
}

.tv-plans-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.tv-plans-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.tv-plans-content p {
  font-size: 1rem;
  color: #475467;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.tv-plans-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.75rem;
  display: grid;
  gap: 0.65rem;
}

.tv-plans-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.96rem;
  font-weight: 600;
  color: #1d2939;
}

.tv-plans-list li svg {
  flex-shrink: 0;
  margin-top: 0.28rem;
  color: #0e9f8e;
}

.tv-plans-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.tv-plans-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tv-plans-visual img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 1.25rem;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 1024px) {
  .tv-genres-grid { grid-template-columns: 1fr 1fr; }
  .tv-plans-inner { grid-template-columns: 1fr; gap: 2rem; }
  .tv-plans-visual { display: none; }
}

@media (max-width: 768px) {
  .tv-hero { padding: 4rem 0 3rem; min-height: auto; }
  .tv-hero__title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .tv-hero__actions { flex-direction: column; }
  .tv-stats-grid { flex-wrap: wrap; gap: 0.5rem; padding: 1rem 0; }
  .tv-stat { flex: 0 0 calc(50% - 0.25rem); }
  .tv-stat-divider { display: none; }
  .tv-genres-grid { grid-template-columns: 1fr; }
  .tv-genres-section { padding: 2.5rem 0; }
  .tv-plans-section { padding: 2.5rem 0; }
}


/* =========================================================
   RURAL SCENE SECTION — fix illustration positioning
   ========================================================= */

.rural-scene-section {
  position: relative;
  overflow: hidden;
  background: #cfe8f5;
  padding: 4rem 0 0;
  min-height: 520px;
}

/* Illustration fills the entire left half, anchored to bottom */
.rural-scene-section__bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: flex-end;
}

.rural-scene-section__bg img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  /* Ensure image fills the column and bleeds to the bottom */
  object-fit: contain;
  object-position: left bottom;
}

.rural-scene-section__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  min-height: 480px;
  padding-bottom: 4rem;
}

.rural-scene-section__spacer { /* left column — illustration shows through */ }

.rural-scene-section__content {
  max-width: 38rem;
}

.rural-scene-section__content h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #121826;
  margin: 0 0 1rem;
}

.rural-scene-section__content p {
  font-size: 1rem;
  line-height: 1.75;
  color: #2a3d55;
  margin-bottom: 1.2rem;
}

@media (max-width: 1100px) {
  .rural-scene-section {
    padding-bottom: 0;
    min-height: auto;
  }

  .rural-scene-section__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 1.5rem;
  }

  .rural-scene-section__spacer { display: none; }
  .rural-scene-section__content { max-width: none; }

  /* On tablet/mobile: illustration flows below content */
  .rural-scene-section__bg {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 1.5rem;
  }

  .rural-scene-section__bg img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
  }
}

@media (max-width: 700px) {
  .rural-scene-section { padding-top: 2rem; }
  .rural-scene-section__content h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}


/* Rural illustration — background pre-filled, no blend mode needed */
.rural-scene-section__bg img {
  mix-blend-mode: normal !important;
}

/* =========================================================
   RURAL INTERNET — FIXED COVERAGE / ILLUSTRATION SECTION
   ========================================================= */
.rural-scene-section {
  position: relative;
  overflow: visible;
  background: #eaf6fd;
  padding: 4rem 0;
  min-height: auto;
  display: block;
}

.rural-scene-section__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  min-height: auto;
  padding-bottom: 0;
}

.rural-scene-section__media {
  min-width: 0;
}

.rural-scene-section__image-wrap {
  background: linear-gradient(180deg, #f8fcff 0%, #dceef8 100%);
  border: 1px solid #c6d9e7;
  border-radius: 1.75rem;
  padding: 0.9rem;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.08);
}

.rural-scene-section__image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.1rem;
}

.rural-scene-section__content {
  max-width: 40rem;
}

.rural-scene-section__content .rural-ts-section-label {
  margin-bottom: 1rem;
}

.rural-scene-section__content h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.rural-scene-section__content p {
  margin-bottom: 1.25rem;
}

.rural-scene-section .rural-ts-checklist {
  margin-bottom: 1.5rem;
}

.rural-scene-section .rural-ts-metrics {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
  .rural-scene-section {
    padding: 3rem 0;
  }

  .rural-scene-section__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .rural-scene-section__content {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .rural-scene-section {
    padding: 2.25rem 0;
  }

  .rural-scene-section__image-wrap {
    border-radius: 1.25rem;
    padding: 0.65rem;
  }

  .rural-scene-section__image-wrap img {
    border-radius: 0.95rem;
  }
}

/* =========================================================
   GLOBAL CTA BAND GAP FIX
   Removes the thin white strip above CTA bands across pages.
   ========================================================= */
.cta-band {
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* If a previous section ends right before the CTA, keep it flush */
section + .cta-band,
.section + .cta-band,
main .cta-band {
  margin-top: 0 !important;
}


/* =========================================================
   RESIDENTIAL TV — TekSavvy-inspired layout
   ========================================================= */

/* ---- HERO ---- */
.tv-hero {
  position: relative;
  min-height: 600px;
  background: #06090f;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Poster mosaic grid */
.tv-hero__mosaic {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  overflow: hidden;
  opacity: 0.55;
}

.tv-hero__row {
  display: flex;
  gap: 6px;
  flex: 1;
  width: max-content;
}

.tv-hero__row--1 { animation: tvRow 50s linear infinite; }
.tv-hero__row--2 { animation: tvRow 65s linear infinite reverse; }
.tv-hero__row--3 { animation: tvRow 55s linear infinite; }

@keyframes tvRow {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tv-poster {
  flex-shrink: 0;
  width: 140px;
  height: 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.06);
}

.tv-poster__emoji { display:none; }
.tv-poster__label { font-size: 0.85rem; font-weight: 800; color: rgba(255,255,255,0.85); letter-spacing: 0.08em; text-transform: uppercase; }

/* Gradient: dark on left, fades out on right — just like TekSavvy */
.tv-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #06090f 0%,
    #06090f 30%,
    rgba(6,9,15,0.85) 50%,
    rgba(6,9,15,0.2) 80%,
    rgba(6,9,15,0.4) 100%
  );
  z-index: 1;
}

.tv-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.tv-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 5rem 0;
}

/* Left: content */
.tv-hero__content { max-width: 540px; }

.tv-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.tv-hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #ef4444;
  animation: tvPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes tvPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.tv-hero__title {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.tv-hero__title span { color: var(--nl-blue-600, #1a5fb4); }

.tv-hero__desc {
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.7);
  margin-bottom: 1.75rem;
  max-width: 460px;
}

.tv-hero__actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.tv-btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--nl-blue-600, #1a5fb4);
  color: #fff !important;
  border: 2px solid var(--nl-blue-600, #1a5fb4);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.72rem 1.75rem;
  border-radius: 0.55rem;
  text-decoration: none;
  transition: background 0.18s, transform 0.15s;
}

.tv-btn-primary:hover { background: var(--nl-blue-700, #0f3d7a); border-color: var(--nl-blue-700, #0f3d7a); transform: translateY(-1px); }

.tv-btn-ghost {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.4);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.72rem 1.75rem;
  border-radius: 0.55rem;
  text-decoration: none;
  transition: border-color 0.18s;
}

.tv-btn-ghost:hover { border-color: rgba(255,255,255,0.8); }

.tv-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tv-hero__chips span {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.26rem 0.8rem;
  border-radius: 999px;
}

/* Right: TV mockup visual */
.tv-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tv-mockup {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.tv-mockup__screen {
  background: #0a0d15;
  border: 3px solid rgba(255,255,255,0.12);
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16/10;
  position: relative;
}

.tv-mockup__screen-inner {
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #0f1a2e 0%, #1a0d2e 50%, #0d1a0f 100%);
}

.tv-mockup__playing {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--nl-blue-600, #1a5fb4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tv-mockup__genres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tv-mockup__genre-tag {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 0.3rem;
}

.tv-mockup__title-area { margin-top: auto; }

.tv-mockup__show-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--nl-blue-600, #1a5fb4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}

.tv-mockup__show-name {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.tv-mockup__show-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  margin-top: 0.3rem;
}

.tv-mockup__badge {
  position: absolute;
  top: -0.8rem;
  right: -0.8rem;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--nl-blue-600, #1a5fb4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(249,115,22,0.4);
}

.tv-mockup__badge span {
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}


/* ---- STATS BAR ---- */
.tv-stats-bar {
  background: #0f1420;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.tv-stats-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 0;
}

.tv-stat-item { flex: 1; text-align: center; }

.tv-stat-item strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--nl-blue-600, #1a5fb4);
  line-height: 1;
  letter-spacing: -0.03em;
}

.tv-stat-item span {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}

.tv-stat-sep {
  width: 1px;
  height: 2rem;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}


/* ---- PACKAGES ---- */
.tv-packages-section {
  background: #f6f8fb;
  padding: 4.5rem 0;
}

.tv-packages-heading {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 2.5rem;
}

.tv-packages-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 0.65rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.tv-packages-heading p { color: #475467; font-size: 1rem; margin: 0; }

.tv-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.tv-package-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 2rem 1.75rem;
  position: relative;
  transition: box-shadow 0.18s, transform 0.18s;
}

.tv-package-card:hover { box-shadow: 0 12px 32px rgba(15,36,70,0.09); transform: translateY(-2px); }

.tv-package-card--featured {
  background: linear-gradient(145deg, #0f3d7a 0%, #1a5fad 100%);
  border-color: #0f3d7a;
}

.tv-package-card__badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--nl-blue-600, #1a5fb4);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.22rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.tv-package-card__icon { font-size: 2rem; margin-bottom: 1rem; display: block; }

.tv-package-card h3 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.03em;
  margin: 0 0 0.65rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.tv-package-card--featured h3 { color: #fff; }

.tv-package-card p { font-size: 0.92rem; color: #475467; line-height: 1.65; margin-bottom: 1rem; }
.tv-package-card--featured p { color: rgba(255,255,255,0.8); }

.tv-package-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.45rem;
}

.tv-package-card__list li {
  font-size: 0.88rem;
  font-weight: 600;
  color: #344054;
  padding-left: 1.1rem;
  position: relative;
}

.tv-package-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #0e9f8e;
  font-weight: 900;
}

.tv-package-card--featured .tv-package-card__list li { color: rgba(255,255,255,0.85); }
.tv-package-card--featured .tv-package-card__list li::before { color: #7dd3c8; }

.tv-package-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.7rem 1.5rem;
  background: #0f3d7a;
  color: #fff !important;
  border-radius: 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.18s;
}

.tv-package-card__cta:hover { background: #0a2d5e; }

.tv-package-card__cta--white {
  background: #fff;
  color: #0f3d7a !important;
}

.tv-package-card__cta--white:hover { background: #e8f2ff; }


/* ---- FEATURES STRIP ---- */
.tv-features-strip {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 2.5rem 0;
}

.tv-features-strip__grid {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.tv-features-strip__item {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
}

.tv-features-strip__icon { font-size: 1.75rem; margin-bottom: 0.5rem; }

.tv-features-strip__item h4 {
  font-size: 0.9rem;
  font-weight: 800;
  color: #121826;
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}

.tv-features-strip__item p { font-size: 0.8rem; color: #667085; margin: 0; line-height: 1.5; }


/* ---- DETAIL SECTION ---- */
.tv-detail-section { padding: 4.5rem 0; background: #f6f8fb; }

.tv-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.tv-detail-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.tv-detail-content p { font-size: 1rem; color: #475467; line-height: 1.75; margin-bottom: 1rem; }

.tv-detail-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.75rem;
  display: grid;
  gap: 0.65rem;
}

.tv-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.96rem;
  font-weight: 600;
  color: #1d2939;
}

.tv-detail-list li svg { flex-shrink: 0; margin-top: 0.28rem; color: #54c5d0; }

.tv-detail-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }

.tv-detail-visual img {
  width: 100%;
  border-radius: 1.25rem;
  object-fit: cover;
}


/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .tv-hero__inner { grid-template-columns: 1fr; padding: 4rem 0 3rem; }
  .tv-hero__visual { display: none; }
  .tv-packages-grid { grid-template-columns: 1fr 1fr; }
  .tv-detail-inner { grid-template-columns: 1fr; gap: 2rem; }
  .tv-detail-visual { display: none; }
}

@media (max-width: 768px) {
  .tv-hero { min-height: auto; }
  .tv-hero__title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .tv-hero__actions { flex-direction: column; }
  .tv-stats-inner { flex-wrap: wrap; gap: 0.5rem; padding: 1rem 0; }
  .tv-stat-item { flex: 0 0 calc(50% - 0.25rem); }
  .tv-stat-sep { display: none; }
  .tv-packages-grid { grid-template-columns: 1fr; }
  .tv-features-strip__grid { flex-wrap: wrap; }
  .tv-features-strip__item { flex: 0 0 calc(50% - 0.5rem); }
  .tv-detail-section { padding: 2.5rem 0; }
  .tv-packages-section { padding: 2.5rem 0; }
}


/* TV hero mosaic — slightly more visible tiles */
.tv-hero__mosaic {
  opacity: 0.35 !important;
}

.tv-poster {
  border: 1px solid rgba(255,255,255,0.12) !important;
}


/* =========================================================
   TV HARDWARE & SOFTWARE PAGE
   ========================================================= */

.res-tv-hw-hero .res-int-b-hero__blob--one {
  background: radial-gradient(circle, rgba(249,115,22,0.14) 0%, transparent 70%);
}
.res-tv-hw-hero .res-int-b-hero__blob--two {
  background: radial-gradient(circle, rgba(15,61,122,0.12) 0%, transparent 70%);
}

.res-tv-hw-cards-section { padding: 3.5rem 0 2.5rem; }

.res-tv-hw-heading { text-align: center; max-width: 600px; margin: 0 auto 2.5rem; }
.res-tv-hw-heading__sub { color: #475467; font-size: 1rem; line-height: 1.75; margin: 0.75rem 0 0; }

.res-tv-hw-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.res-tv-hw-card {
  position: relative;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1.35rem;
  padding: 1.75rem 1.5rem 1.5rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.res-tv-hw-card:hover {
  box-shadow: 0 12px 32px rgba(15,36,70,0.09);
  transform: translateY(-2px);
}

.res-tv-hw-card--featured {
  background: #54c5d0;
  border-color: #54c5d0;
}

.res-tv-hw-card--featured h3,
.res-tv-hw-card--featured p { color: #fff; }
.res-tv-hw-card--featured p { opacity: 0.9; }

.res-tv-hw-card__badge {
  position: absolute;
  top: -0.7rem;
  left: 1.5rem;
  background: #0b7d6f;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
}

.res-tv-hw-card__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.75rem;
  background: rgba(84,197,208,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #54c5d0;
}

.res-tv-hw-card--featured .res-tv-hw-card__icon {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.res-tv-hw-card h3 { font-size: 1.1rem; font-weight: 800; color: #121826; margin: 0 0 0.55rem; line-height: 1.25; letter-spacing: -0.025em; }
.res-tv-hw-card p { font-size: 0.95rem; color: #475467; line-height: 1.65; margin: 0; }

.res-tv-hw-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 1.75rem;
  overflow: hidden;
}

.res-tv-hw-split__media { min-height: 380px; background: #f0f4f8; display: flex; align-items: stretch; justify-content: center; padding: 0; overflow:hidden; }
.res-tv-hw-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }

.res-tv-hw-split__content { padding: 2.5rem; }
.res-tv-hw-split__content h2 { font-size: clamp(1.4rem,2.5vw,1.9rem); font-weight: 900; color: #121826; line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 1rem; font-family: 'Inter', system-ui, sans-serif; }
.res-tv-hw-split__content p { font-size: 0.98rem; color: #475467; line-height: 1.75; margin-bottom: 1.5rem; }

@media (max-width: 1024px) {
  .res-tv-hw-cards { grid-template-columns: 1fr 1fr; }
  .res-tv-hw-split { grid-template-columns: 1fr; }
  .res-tv-hw-split__media { min-height: 240px; }
  .res-tv-hw-split__content { padding: 2rem; }
}

@media (max-width: 700px) {
  .res-tv-hw-cards { grid-template-columns: 1fr; }
  .res-tv-hw-cards-section { padding: 2.5rem 0 2rem; }
  .res-tv-hw-split__content { padding: 1.5rem; }
}


/* =========================================================
   BUNDLES & PROMOTIONS PAGE
   ========================================================= */

/* Hero */
.bundles-hero {
  background: #f4f6fb;
  padding: 0;
  overflow: visible;
  position: relative;
}

.bundles-hero__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%);
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

.bundles-hero__content {
  flex: 0 0 52%;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bundles-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #a8c8f0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.bundles-hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--nl-blue-600, #1a5fb4);
  animation: tvPulse 2s ease-in-out infinite;
}

.bundles-hero__title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.bundles-hero__title span { color: #ffcc44; }

.bundles-hero__text {
  font-size: 1.05rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1.75rem;
  max-width: 480px;
}

.bundles-hero__actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.bundles-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bundles-hero__chips span {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.26rem 0.8rem;
  border-radius: 999px;
}

.bundles-hero__visual {
  flex: 0 0 48%;
  position: relative;
  overflow: hidden;
}

.bundles-hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 0;
  max-width: none;
}

/* Benefits bar */
.bundles-bar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.bundles-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  gap: 0;
}

.bundles-bar__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1d2939;
}

.bundles-bar__item svg { color: #0f3d7a; flex-shrink: 0; }

.bundles-bar__sep {
  width: 1px;
  height: 1.8rem;
  background: #e2e8f0;
  flex-shrink: 0;
}

/* Plans section */
.bundles-plans-section {
  padding: 4.5rem 0;
  background: #f6f8fb;
}

.bundles-plans-heading {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 2.5rem;
}

.bundles-plans-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 0.65rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.bundles-plans-heading p { color: #475467; font-size: 1rem; margin: 0; }

.bundles-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.bundle-plan-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 2rem 1.75rem;
  position: relative;
  transition: box-shadow 0.18s, transform 0.18s;
}

.bundle-plan-card:hover { box-shadow: 0 12px 32px rgba(15,36,70,0.09); transform: translateY(-2px); }

.bundle-plan-card--featured {
  background: linear-gradient(145deg, #0f3d7a 0%, #1a5fad 100%);
  border-color: #0f3d7a;
  transform: scale(1.03);
  box-shadow: 0 20px 48px rgba(15,61,122,0.25);
}

.bundle-plan-card--featured:hover { transform: scale(1.03) translateY(-2px); }

.bundle-plan-card__badge {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--nl-blue-600, #1a5fb4);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.22rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.bundle-plan-card__icons {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.bundle-plan-card__plus {
  font-size: 1.1rem;
  font-weight: 900;
  color: #54c5d0;
}

.bundle-plan-card--featured .bundle-plan-card__plus { color: #7dd3c8; }

.bundle-plan-card__header h3 {
  font-size: 1.3rem;
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.bundle-plan-card--featured .bundle-plan-card__header h3 { color: #fff; }

.bundle-plan-card__header p { font-size: 0.9rem; color: #475467; line-height: 1.6; margin-bottom: 1.25rem; }
.bundle-plan-card--featured .bundle-plan-card__header p { color: rgba(255,255,255,0.75); }

.bundle-plan-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.55rem;
  border-top: 1px solid #f0f4f8;
  padding-top: 1.25rem;
}

.bundle-plan-card--featured .bundle-plan-card__list { border-color: rgba(255,255,255,0.15); }

.bundle-plan-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1d2939;
  line-height: 1.5;
}

.bundle-plan-card__list li svg { flex-shrink: 0; margin-top: 0.22rem; color: #54c5d0; }
.bundle-plan-card--featured .bundle-plan-card__list li { color: rgba(255,255,255,0.9); }
.bundle-plan-card--featured .bundle-plan-card__list li svg { color: #7dd3c8; }

.bundle-plan-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: #0f3d7a;
  color: #fff !important;
  border-radius: 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.18s;
}

.bundle-plan-card__cta:hover { background: #0a2d5e; }

.bundle-plan-card__cta--white {
  background: #fff;
  color: #0f3d7a !important;
}

.bundle-plan-card__cta--white:hover { background: #e8f2ff; }

/* Why bundle */
.bundles-why-section {
  padding: 4.5rem 0;
  background: #fff;
}

.bundles-why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.bundles-why-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.bundles-why-content p { font-size: 1rem; color: #475467; line-height: 1.75; margin-bottom: 1rem; }

.bundles-why-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 1.75rem; }

.bundles-why-features {
  display: grid;
  gap: 1.25rem;
}

.bundles-why-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: #f6f9fc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #54c5d0;
  border-radius: 1rem;
}

.bundles-why-feature__icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }

.bundles-why-feature h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #121826;
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}

.bundles-why-feature p { font-size: 0.87rem; color: #475467; margin: 0; line-height: 1.55; }

/* Promo callout */
.bundles-promo-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, var(--nl-blue-600, #1a5fb4) 0%, var(--nl-blue-700, #0f3d7a) 100%);
}

.bundles-promo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.bundles-promo__tag {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}

.bundles-promo-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  margin: 0 0 0.65rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.bundles-promo-text p { color: rgba(255,255,255,0.85); font-size: 1rem; line-height: 1.65; margin: 0; max-width: 520px; }

.bundles-promo-action { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; flex-shrink: 0; }

.bundles-promo-btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--nl-blue-600, #1a5fb4) !important;
  font-weight: 800;
  font-size: 1rem;
  padding: 0.85rem 2rem;
  border-radius: 0.6rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.bundles-promo-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }

.bundles-promo-sub { color: rgba(255,255,255,0.85); font-size: 0.85rem; margin: 0; text-align: center; }

/* Responsive */
@media (max-width: 1024px) {
  .bundles-hero__inner { grid-template-columns: 1fr; }
  .bundles-hero__visual { display: none; }
  .bundles-plans-grid { grid-template-columns: 1fr; }
  .bundle-plan-card--featured { transform: none; }
  .bundle-plan-card--featured:hover { transform: translateY(-2px); }
  .bundles-why-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .bundles-bar__inner { flex-wrap: wrap; gap: 0.75rem; padding: 1rem 0; justify-content: center; }
  .bundles-bar__sep { display: none; }
  .bundles-bar__item { flex: 0 0 calc(50% - 0.375rem); justify-content: flex-start; }
}

@media (max-width: 700px) {
  .bundles-hero { padding: 3rem 0 2.5rem; }
  .bundles-hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .bundles-hero__actions { flex-direction: column; }
  .bundles-plans-section { padding: 2.5rem 0; }
  .bundles-why-section { padding: 2.5rem 0; }
  .bundles-promo-section { padding: 2.5rem 0; }
  .bundles-promo-inner { flex-direction: column; text-align: center; }
  .bundles-promo-text p { max-width: none; }
}


/* =========================================================
   ABOUT — COMPANY OVERVIEW PAGE
   ========================================================= */

/* Hero — compact style to match Residential/Business service heroes */
.about-co-hero {
  position: relative;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 58%, #1a5fb4 100%);
  padding: clamp(28px, 3vw, 42px) 0 clamp(30px, 3vw, 44px);
  overflow: hidden;
}

.about-co-hero::before {
  content: "";
  position: absolute;
  width: 26rem;
  height: 26rem;
  right: -9rem;
  top: -12rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.about-co-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,0.08), transparent 26%),
    linear-gradient(90deg, rgba(11,31,58,0.26), rgba(11,31,58,0));
  pointer-events: none;
}

.about-co-hero .container {
  position: relative;
  z-index: 1;
}

.about-co-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: clamp(360px, 35vw, 430px);
  position: relative;
}

.about-co-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 2.8vw, 38px) 0;
  position: relative;
  z-index: 2;
}

.about-co-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

.about-co-hero__title {
  font-size: clamp(1.95rem, 3.25vw, 2.8rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 0.85rem;
  font-family: 'Inter', system-ui, sans-serif;
  max-width: 650px;
}

.about-co-hero__text {
  font-size: clamp(0.95rem, 1.05vw, 1.02rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin: 0;
  max-width: 570px;
}

.about-co-hero__actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

.about-co-hero .btn {
  padding: 0.78rem 1.35rem;
  min-height: auto;
  font-size: 0.93rem;
}

.about-co-hero .btn--white {
  background: rgba(255,255,255,0.92);
  color: var(--nl-blue-900);
  border-color: #fff;
}

.about-co-hero .btn--outline-white {
  border-color: rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.92);
  background: transparent;
}

.about-co-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.05rem, 2.2vw, 1.65rem);
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.about-co-hero__stat strong {
  display: block;
  font-size: clamp(1.25rem, 1.8vw, 1.45rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}

.about-co-hero__stat strong span {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.65;
  margin-left: 0.15rem;
}

.about-co-hero__stat p {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.58);
  margin: 0.25rem 0 0;
  font-weight: 500;
}

.about-co-hero__visual {
  position: relative;
  align-self: center;
  overflow: hidden;
  display: flex;
  min-height: 330px;
  height: min(100%, 390px);
  border-radius: 0;
  box-shadow: 0 18px 42px rgba(2, 18, 40, 0.18);
}

.about-co-hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,31,58,.32) 0%, rgba(11,31,58,.08) 46%, rgba(11,31,58,0) 78%);
  pointer-events: none;
}

.about-co-hero__visual img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Legacy stats strip hidden because stats now live inside the hero */
.about-co-stats { display: none; }

/* Who we are */
.about-co-who {
  padding: 4.5rem 0;
  background: #fff;
}

.about-co-who__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.about-co-who__content h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.about-co-who__content p {
  font-size: 1rem;
  color: #475467;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.about-co-who__mission {
  font-size: 1.05rem !important;
  font-weight: 700;
  color: #0f3d7a !important;
  border-left: 3px solid #0e9f8e;
  padding-left: 1rem;
  margin-top: 1.5rem !important;
}

.about-co-pillars { display: grid; gap: 1.1rem; }

.about-co-pillar {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: #f6f9fc;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  transition: box-shadow 0.18s;
}

.about-co-pillar:hover { box-shadow: 0 6px 20px rgba(15,36,70,0.07); }

.about-co-pillar__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  background: rgba(15,61,122,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f3d7a;
  flex-shrink: 0;
}

.about-co-pillar h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #121826;
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}

.about-co-pillar p {
  font-size: 0.87rem;
  color: #475467;
  margin: 0;
  line-height: 1.55;
}

/* Values */
.about-co-values { padding: 4.5rem 0; }

.about-co-values-heading {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 2.5rem;
}

.about-co-values-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  margin: 0 0 0.65rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.about-co-values-heading p { color: #475467; font-size: 1rem; margin: 0; }

.about-co-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.about-co-value-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.35rem;
  padding: 2rem 1.75rem;
  position: relative;
  transition: box-shadow 0.18s, transform 0.18s;
}

.about-co-value-card:hover { box-shadow: 0 12px 32px rgba(15,36,70,0.09); transform: translateY(-2px); }

.about-co-value-card--featured {
  background: #0f3d7a;
  border-color: #0f3d7a;
}

.about-co-value-card__num {
  font-size: 2.5rem;
  font-weight: 900;
  color: rgba(15,61,122,0.1);
  line-height: 1;
  margin-bottom: 0.75rem;
  letter-spacing: -0.04em;
  font-family: 'Inter', system-ui, sans-serif;
}

.about-co-value-card--featured .about-co-value-card__num { color: rgba(255,255,255,0.15); }

.about-co-value-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #121826;
  margin: 0 0 0.6rem;
  letter-spacing: -0.025em;
  font-family: 'Inter', system-ui, sans-serif;
}

.about-co-value-card--featured h3 { color: #fff; }

.about-co-value-card p { font-size: 0.93rem; color: #475467; line-height: 1.65; margin: 0; }
.about-co-value-card--featured p { color: rgba(255,255,255,0.8); }

/* Responsive */
@media (max-width: 1024px) {
  .about-co-hero__inner { grid-template-columns: 1fr; min-height: auto; }
  .about-co-hero__content { padding: clamp(34px, 5vw, 52px) 0; }
  .about-co-hero__visual { display: none; }
  .about-co-who__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-co-values-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .about-co-hero { padding: 2.35rem 0; }
  .about-co-hero__title { font-size: clamp(1.85rem, 8vw, 2.45rem); }
  .about-co-hero__actions { flex-direction: column; }
  .about-co-hero__actions .btn { width: 100%; justify-content: center; }
  .about-co-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .about-co-values-grid { grid-template-columns: 1fr; }
  .about-co-who { padding: 2.5rem 0; }
  .about-co-values { padding: 2.5rem 0; }
}


/* =========================================================
   COMPANY OVERVIEW — Customer Reviews
   ========================================================= */

.about-co-reviews { padding: 4.5rem 0; }

.about-co-reviews__heading {
  text-align: center;
  margin-bottom: 2.5rem;
}

.about-co-reviews__heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  margin: 0 0 0.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.about-co-reviews__heading p {
  font-size: 0.95rem;
  color: #667085;
  margin: 0;
}

.about-co-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.about-co-review-card {
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.75rem;
  border: 1px solid rgba(178,194,214,0.4);
  box-shadow: 0 4px 20px rgba(11,31,58,0.07);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.about-co-review-card:hover {
  box-shadow: 0 12px 32px rgba(11,31,58,0.12);
  transform: translateY(-2px);
}

.about-co-review-card__stars {
  font-size: 1.1rem;
  color: #f59e0b;
  letter-spacing: 2px;
}

.about-co-review-card p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
  flex: 1;
  font-style: italic;
}

.about-co-review-card__author {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(178,194,214,0.35);
}

.about-co-review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e6fd9, #185db5);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-co-review-card__info {
  flex: 1;
}

.about-co-review-card__info strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #111827;
}

.about-co-review-card__info span {
  font-size: 0.71rem;
  color: #6b7280;
}

@media (max-width: 900px) {
  .about-co-reviews__grid { grid-template-columns: 1fr; }
  .about-co-reviews { padding: 2.5rem 0; }
}


/* =========================================================
   ABOUT — MISSION & VISION PAGE
   ========================================================= */

/* Hero - compact boxed size matched to Technology Partners/Careers */
.mv-hero {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 1200px;
  height: clamp(380px, 42vw, 460px);
  min-height: 360px;
  max-height: 460px;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  background: #06090f;
  padding: 0;
}

.mv-hero .container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mv-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.mv-hero__orb--1 {
  width: 500px; height: 500px;
  background: rgba(15,61,122,0.35);
  top: -200px; left: -100px;
}

.mv-hero__orb--2 {
  width: 400px; height: 400px;
  background: rgba(82,198,207,0.22);
  bottom: -150px; right: -50px;
}

.mv-hero__orb--3 {
  width: 300px; height: 300px;
  background: rgba(249,115,22,0.12);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.mv-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) 1.5rem;
}

.mv-hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #a8c8f0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.mv-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.mv-hero__title span { color: #52c6cf; }

.mv-hero__text {
  font-size: 1.1rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.68);
  max-width: 580px;
  margin: 0 auto;
}

/* Mission & Vision cards */
.mv-split-section {
  padding: 4.5rem 0;
  background: #f6f8fb;
}

.mv-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.mv-card {
  background: #fff;
  border-radius: 1.75rem;
  padding: 2.5rem;
  border: 1px solid #e2e8f0;
  transition: box-shadow 0.18s;
}

.mv-card:hover { box-shadow: 0 16px 40px rgba(15,36,70,0.1); }

.mv-card--vision {
  background: linear-gradient(145deg, #0f3d7a 0%, #1a5fad 100%);
  border-color: #0f3d7a;
}

.mv-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  background: rgba(15,61,122,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f3d7a;
  margin-bottom: 1.25rem;
}

.mv-card--vision .mv-card__icon {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.mv-card__tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #52c6cf;
  margin-bottom: 0.65rem;
}

.mv-card--vision .mv-card__tag { color: #52c6cf; }

.mv-card h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.mv-card--vision h2 { color: #fff; }

.mv-card p {
  font-size: 0.96rem;
  color: #475467;
  line-height: 1.75;
  margin-bottom: 0.85rem;
}

.mv-card p:last-of-type { margin-bottom: 1.5rem; }
.mv-card--vision p { color: rgba(255,255,255,0.78); }

.mv-card__pillars {
  display: grid;
  gap: 0.5rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 1.25rem;
}

.mv-card--vision .mv-card__pillars { border-color: rgba(255,255,255,0.15); }

.mv-card__pillar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #344054;
}

.mv-card--vision .mv-card__pillar { color: rgba(255,255,255,0.85); }
.mv-card__pillar svg { color: #52c6cf; flex-shrink: 0; }
.mv-card--vision .mv-card__pillar svg { color: #52c6cf; }

/* Values */
.mv-values-section {
  padding: 4.5rem 0;
  background: #fff;
}

.mv-values-heading {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 2.5rem;
}

.mv-values-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  margin: 0 0 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.mv-values-heading p { color: #475467; font-size: 1rem; margin: 0; }

.mv-values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

.mv-value {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 1.75rem 1.4rem;
  position: relative;
  transition: box-shadow 0.18s, transform 0.18s;
}

.mv-value:hover { box-shadow: 0 12px 28px rgba(15,36,70,0.09); transform: translateY(-2px); }

.mv-value--featured {
  background: #52c6cf;
  border-color: #52c6cf;
}

.mv-value__num {
  font-size: 2.2rem;
  font-weight: 900;
  color: rgba(15,61,122,0.08);
  line-height: 1;
  margin-bottom: 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.04em;
}

.mv-value--featured .mv-value__num { color: rgba(255,255,255,0.15); }

.mv-value__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.65rem;
  background: rgba(15,61,122,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f3d7a;
  margin-bottom: 0.8rem;
}

.mv-value--featured .mv-value__icon { background: rgba(255,255,255,0.2); color: #fff; }

.mv-value h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #121826;
  margin: 0 0 0.45rem;
  letter-spacing: -0.02em;
  font-family: 'Inter', system-ui, sans-serif;
}

.mv-value--featured h3 { color: #fff; }

.mv-value p { font-size: 0.87rem; color: #475467; line-height: 1.6; margin: 0; }
.mv-value--featured p { color: rgba(255,255,255,0.85); }

/* Future banner */
.mv-future-section {
  padding: 4.25rem 0;
  background: linear-gradient(180deg, #f7fbff 0%, #eef6fb 100%);
  border-top: 1px solid rgba(14, 45, 84, 0.08);
  border-bottom: 1px solid rgba(14, 45, 84, 0.08);
}

.mv-future-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.mv-future-kicker {
  display: inline-flex;
  align-items: center;
  color: #52c6cf;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.mv-future-content h2 {
  font-size: clamp(1.9rem, 3vw, 2.55rem);
  font-weight: 900;
  color: #071b35;
  letter-spacing: -0.045em;
  line-height: 1.08;
  margin: 0 0 1rem;
  max-width: 680px;
  font-family: 'Inter', system-ui, sans-serif;
}

.mv-future-content p {
  font-size: 1.02rem;
  color: #30445f;
  line-height: 1.75;
  margin: 0;
  max-width: 690px;
}

.mv-future-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  flex-shrink: 0;
}

.mv-future-stat {
  text-align: left;
  background: #fff;
  border: 1px solid rgba(14, 45, 84, 0.1);
  border-radius: 1.15rem;
  padding: 1rem 1.15rem;
  box-shadow: 0 14px 32px rgba(10, 37, 64, 0.06);
}

.mv-future-stat strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 900;
  color: #52c6cf;
  line-height: 1;
  letter-spacing: -0.04em;
  font-family: 'Inter', system-ui, sans-serif;
}

.mv-future-stat strong span { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; }
.mv-future-stat > span { display: block; font-size: 0.76rem; color: #5d7088; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.35rem; }

/* Responsive */
@media (max-width: 1024px) {
  .mv-split-grid { grid-template-columns: 1fr; }
  .mv-values-grid { grid-template-columns: 1fr 1fr; }
  .mv-future-inner { grid-template-columns: 1fr; gap: 2rem; }
  .mv-future-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

@media (max-width: 700px) {
  .mv-hero {
    height: auto;
    min-height: 390px;
    max-height: none;
  }
  .mv-hero .container { min-height: 390px; }
  .mv-hero__inner { padding: 3rem 1.5rem; }
  .mv-hero__title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .mv-values-grid { grid-template-columns: 1fr; }
  .mv-split-section { padding: 2.5rem 0; }
  .mv-values-section { padding: 2.5rem 0; }
  .mv-future-section { padding: 2.5rem 0; }
  .mv-future-stats { grid-template-columns: 1fr; gap: 0.9rem; }
}


/* =========================================================
   ABOUT — CAREERS PAGE
   ========================================================= */

/* Hero - compact Careers version matched to Technology Partners hero size */
.careers-hero {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 1200px;
  height: clamp(380px, 42vw, 460px);
  min-height: 360px;
  max-height: 460px;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 60%, #1a5fad 100%);
  padding: 0;
}

.careers-hero > .container {
  height: 100%;
}

.careers-hero__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: clamp(2.4rem, 4vw, 3.4rem) clamp(3.5rem, 5.5vw, 5.5rem);
}

.careers-hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #a8c8f0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.careers-hero__title {
  font-size: clamp(2.75rem, 4.8vw, 4.35rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 1.1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.careers-hero__title span { color: #52c6cf; }

.careers-hero__text {
  font-size: 1.12rem;
  line-height: 1.68;
  color: rgba(255,255,255,0.82);
  margin-bottom: 0;
  max-width: 560px;
}

.careers-hero__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }

.careers-hero .btn--outline {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}

.careers-hero .btn--outline:hover {
  background: rgba(255,255,255,0.14);
  border-color: #fff;
  color: #fff;
}


/* Hide removed Careers hero controls if stale markup is cached */
.careers-hero__eyebrow,
.careers-hero__actions {
  display: none;
}

/* Floating cards visual */
.careers-hero__visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 540px;
  width: 100%;
}

.careers-hero__card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 1rem;
  padding: 1.25rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  backdrop-filter: blur(8px);
  transition: background 0.18s;
}

.careers-hero__card:hover { background: rgba(255,255,255,0.12); }

.careers-hero__card span { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }
.careers-hero__card strong { display: block; font-size: 0.95rem; font-weight: 700; color: #fff; }
.careers-hero__card p { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin: 0.1rem 0 0; }

/* Why work with us */
.careers-why-section {
  padding: 4.5rem 0;
  background: #f6f8fb;
}

.careers-why-heading {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 2.5rem;
}

.careers-why-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  margin: 0 0 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.careers-why-heading p { color: #475467; font-size: 1rem; margin: 0; }

.careers-why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

.careers-why-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.35rem;
  padding: 1.75rem 1.5rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.careers-why-card:hover { box-shadow: 0 12px 32px rgba(15,36,70,0.09); transform: translateY(-2px); }

.careers-why-card--featured {
  background: #52c6cf;
  border-color: #52c6cf;
}

.careers-why-card--featured h3,
.careers-why-card--featured p { color: #fff; }
.careers-why-card--featured p { opacity: 0.9; }

.careers-why-card__badge {
  position: absolute;
  top: -0.7rem;
  left: 1.4rem;
  background: #3fb5bf;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
}

.careers-why-card__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.75rem;
  background: rgba(15,61,122,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f3d7a;
  margin-bottom: 1rem;
}

.careers-why-card--featured .careers-why-card__icon {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.careers-why-card h3 { font-size: 1.05rem; font-weight: 800; color: #121826; margin: 0 0 0.5rem; letter-spacing: -0.02em; font-family: 'Inter', system-ui, sans-serif; }
.careers-why-card p { font-size: 0.9rem; color: #475467; line-height: 1.65; margin: 0; }

/* Open roles */
.careers-roles-section {
  padding: 4.5rem 0;
  background: #fff;
}

.careers-roles-heading {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 2.5rem;
}

.careers-roles-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  margin: 0 0 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.careers-roles-heading p { color: #475467; font-size: 1rem; margin: 0; }

.careers-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.careers-role-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1.35rem;
  padding: 1.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.careers-role-card:hover { box-shadow: 0 12px 32px rgba(15,36,70,0.09); transform: translateY(-2px); }

.careers-role-card--featured {
  background: linear-gradient(145deg, #0f3d7a 0%, #1a5fad 100%);
  border-color: #0f3d7a;
}

.careers-role-card--open {
  background: #effbfc;
  border: 2px dashed #52c6cf;
}

.careers-role-card__hot {
  position: absolute;
  top: -0.7rem;
  left: 1.5rem;
  background: var(--nl-blue-600, #1a5fb4);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
}

.careers-role-card__dept {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #52c6cf;
}

.careers-role-card--featured .careers-role-card__dept { color: #52c6cf; }

.careers-role-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #121826;
  margin: 0;
  letter-spacing: -0.02em;
  font-family: 'Inter', system-ui, sans-serif;
}

.careers-role-card--featured h3 { color: #fff; }

.careers-role-card > p {
  font-size: 0.9rem;
  color: #475467;
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.careers-role-card--featured > p { color: rgba(255,255,255,0.78); }

.careers-role-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.careers-role-card__tags span {
  background: rgba(15,61,122,0.07);
  color: #0f3d7a;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
}

.careers-role-card--featured .careers-role-card__tags span {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
}

.careers-role-card__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.7rem 1.25rem;
  background: #0f3d7a;
  color: #fff !important;
  border-radius: 0.6rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: 0.5rem;
  transition: background 0.18s;
}

.careers-role-card__apply:hover { background: #0a2d5e; }

.careers-role-card__apply--white {
  background: #fff;
  color: #0f3d7a !important;
}

.careers-role-card__apply--white:hover { background: #e8f2ff; }

.careers-role-card--open .careers-role-card__apply {
  background: #52c6cf;
}

.careers-role-card--open .careers-role-card__apply:hover { background: #3fb5bf; }

/* How to apply */
.careers-apply-section {
  padding: 4.5rem 0;
  background: #f6f8fb;
}

.careers-apply-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.careers-apply-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.careers-apply-content > p {
  font-size: 1rem;
  color: #475467;
  line-height: 1.75;
  margin-bottom: 0;
}

.careers-apply-content > p a {
  color: #0f3d7a;
  font-weight: 700;
  text-decoration: none;
}

.careers-apply-content > p a:hover { text-decoration: underline; }

.careers-apply-steps {
  display: grid;
  gap: 1.1rem;
}

.careers-apply-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.careers-apply-step__num {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #0f3d7a;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Inter', system-ui, sans-serif;
}

.careers-apply-step strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #121826;
  margin-bottom: 0.2rem;
}

.careers-apply-step p { font-size: 0.87rem; color: #475467; margin: 0; line-height: 1.55; }

/* Apply CTA card */
.careers-apply-cta-card {
  background: #0f3d7a;
  border-radius: 1.75rem;
  padding: 2.5rem;
  text-align: center;
}

.careers-apply-cta-card__icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }

.careers-apply-cta-card h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0 0 0.65rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.careers-apply-cta-card > p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.careers-apply-cta-card__btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #0f3d7a !important;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.75rem 1.75rem;
  border-radius: 0.6rem;
  text-decoration: none;
  transition: background 0.18s;
}

.careers-apply-cta-card__btn:hover { background: #e8f2ff; }

.careers-apply-cta-card__note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.85rem !important;
  margin-bottom: 0 !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .careers-why-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .careers-hero {
    height: auto;
    max-height: none;
    min-height: 360px;
  }

  .careers-hero__inner {
    grid-template-columns: 1fr;
    padding: 3rem 2rem;
  }

  .careers-hero__visual { display: none; }
  .careers-roles-grid { grid-template-columns: 1fr 1fr; }
  .careers-apply-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 700px) {
  .careers-hero {
    min-height: 340px;
  }

  .careers-hero__inner {
    padding: 2.75rem 1.5rem;
  }

  .careers-hero__title { font-size: clamp(2.2rem, 9vw, 3rem); }
  .careers-hero__actions { flex-direction: column; }
  .careers-why-grid { grid-template-columns: 1fr; }
  .careers-roles-grid { grid-template-columns: 1fr; }
  .careers-why-section, .careers-roles-section, .careers-apply-section { padding: 2.5rem 0; }
}


/* =========================================================
   ABOUT — TECHNOLOGY PARTNERS PAGE
   ========================================================= */

/* Hero - compact version matched to Careers hero height */
.partners-hero {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 1200px;
  height: clamp(380px, 42vw, 460px);
  min-height: 360px;
  max-height: 460px;
  margin: 0 auto;
  overflow: hidden;
  background: #06090f;
  padding: 0;
}

.partners-hero > .container {
  height: 100%;
}

.partners-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.partners-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.partners-hero__orb--1 {
  width: 500px; height: 500px;
  background: rgba(15,61,122,0.4);
  top: -200px; left: -100px;
}

.partners-hero__orb--2 {
  width: 350px; height: 350px;
  background: rgba(82,198,207,0.22);
  bottom: -100px; right: 10%;
}

.partners-hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: clamp(2.4rem, 4vw, 3.4rem) clamp(3.5rem, 5.5vw, 5.5rem);
}

.partners-hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #a8c8f0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.partners-hero__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 1.1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.partners-hero__title span { color: #52c6cf; }

.partners-hero__text {
  font-size: 1.05rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.75);
  margin-bottom: 1.75rem;
  max-width: 460px;
}

.partners-hero__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* Network orbit visual */
.partners-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners-hero__network {
  position: relative;
  width: 260px;
  height: 260px;
}

.partners-hero__center-node {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.partners-hero__orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.15);
  animation: partnerOrbit 20s linear infinite;
}

@keyframes partnerOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.partners-hero__orbit-node {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  top: 50%; left: 50%;
  transform-origin: 0 0;
  transform: rotate(var(--angle)) translateX(105px) translateY(-50%) rotate(calc(-1 * var(--angle)));
}

/* Why partner cards */
.partners-why-section {
  padding: 4.5rem 0;
  background: #f6f8fb;
}

.partners-why-heading {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 2.5rem;
}

.partners-why-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  margin: 0 0 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.partners-why-heading p { color: #475467; font-size: 1rem; margin: 0; }

.partners-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.partners-why-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.35rem;
  padding: 1.75rem 1.5rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.partners-why-card:hover { box-shadow: 0 12px 32px rgba(15,36,70,0.09); transform: translateY(-2px); }

.partners-why-card--featured {
  background: #52c6cf;
  border-color: #52c6cf;
}

.partners-why-card--featured h3,
.partners-why-card--featured p { color: #fff; }
.partners-why-card--featured p { opacity: 0.9; }

.partners-why-card__badge {
  position: absolute;
  top: -0.7rem; left: 1.5rem;
  background: #2faeb8;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
}

.partners-why-card__icon {
  width: 2.6rem; height: 2.6rem;
  border-radius: 0.75rem;
  background: rgba(15,61,122,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #0f3d7a;
  margin-bottom: 1rem;
}

.partners-why-card--featured .partners-why-card__icon { background: rgba(255,255,255,0.2); color: #fff; }

.partners-why-card h3 { font-size: 1.05rem; font-weight: 800; color: #121826; margin: 0 0 0.5rem; letter-spacing: -0.02em; font-family: 'Inter', system-ui, sans-serif; }
.partners-why-card p { font-size: 0.9rem; color: #475467; line-height: 1.65; margin: 0; }

/* Partner logos grid */
.partners-grid-section {
  padding: 4.5rem 0;
  background: #fff;
}

.partners-grid-heading {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 3rem;
}

.partners-grid-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  margin: 0 0 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.partners-grid-heading p { color: #475467; font-size: 1rem; margin: 0; }

.partners-category { margin-bottom: 2.5rem; }

.partners-category__label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f3d7a;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
}

.partners-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.partners-logo-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  transition: box-shadow 0.18s, transform 0.18s;
  text-align: center;
}

.partners-logo-card:hover { box-shadow: 0 8px 24px rgba(15,36,70,0.08); transform: translateY(-2px); }

.partners-logo-card__placeholder { font-size: 2rem; line-height: 1; }

.partners-logo-card span {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475467;
}

.partners-logo-card--add {
  border: 2px dashed #cbd5e1;
  background: transparent;
}

.partners-logo-card__plus {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: 2px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #94a3b8;
  font-weight: 700;
}

.partners-grid-note {
  text-align: center;
  font-size: 0.85rem;
  color: #94a3b8;
  font-style: italic;
  margin-top: 1rem;
}

/* Let's work together */
.partners-collab-section {
  padding: 4.5rem 0;
  background: #f6f8fb;
}

.partners-collab-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.partners-collab__tag {
  display: inline-block;
  background: rgba(82,198,207,0.12);
  color: #52c6cf;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.partners-collab-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.partners-collab-content > p {
  font-size: 1rem;
  color: #475467;
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

.partners-collab-steps { display: grid; gap: 1.1rem; }

.partners-collab-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.partners-collab-step__num {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: #52c6cf;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Inter', system-ui, sans-serif;
}

.partners-collab-step strong { display: block; font-size: 0.95rem; font-weight: 800; color: #121826; margin-bottom: 0.2rem; }
.partners-collab-step p { font-size: 0.87rem; color: #475467; margin: 0; line-height: 1.55; }

/* CTA card */
.partners-collab-cta {
  background: linear-gradient(145deg, #0f3d7a 0%, #1a5fad 100%);
  border-radius: 1.75rem;
  padding: 2.5rem;
  text-align: center;
}

.partners-collab-cta__icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }

.partners-collab-cta h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0 0 0.65rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.partners-collab-cta > p { font-size: 0.95rem; color: rgba(255,255,255,0.75); line-height: 1.65; margin-bottom: 1.5rem; }

.partners-collab-cta__btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #0f3d7a !important;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.75rem 1.75rem;
  border-radius: 0.6rem;
  text-decoration: none;
  transition: background 0.18s;
}

.partners-collab-cta__btn:hover { background: #e8f2ff; }

.partners-collab-cta__divider {
  color: rgba(255,255,255,0.4);
  font-size: 0.82rem;
  margin: 0.85rem 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.partners-collab-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s;
}

.partners-collab-cta__phone:hover { color: #fff !important; }

/* Responsive */
@media (max-width: 1024px) {
  .partners-hero__inner { grid-template-columns: 1fr; }
  .partners-hero__visual { display: none; }
  .partners-why-grid { grid-template-columns: 1fr 1fr; }
  .partners-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partners-collab-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 700px) {
  .partners-hero {
    height: auto;
    min-height: 340px;
    max-height: none;
    padding: 0;
  }
  .partners-hero > .container { height: auto; }
  .partners-hero__inner {
    height: auto;
    padding: 2.75rem 1.5rem;
  }
  .partners-hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .partners-hero__actions { flex-direction: column; }
  .partners-why-grid { grid-template-columns: 1fr; }
  .partners-logo-grid { grid-template-columns: 1fr 1fr; }
  .partners-why-section, .partners-grid-section, .partners-collab-section { padding: 2.5rem 0; }
}


/* =========================================================
   SUPPORT — INSTALLATION GUIDES PAGE
   ========================================================= */

/* Hero — compact */
.support-inst-hero {
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 60%, #1a5fad 100%);
  padding: 3.5rem 0 3rem;
}

.support-inst-hero__inner { max-width: 680px; }

.support-inst-hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #a8c8f0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.support-inst-hero__title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0 0 0.85rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.support-inst-hero__text {
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.78);
  margin-bottom: 1.5rem;
  max-width: 520px;
}

/* Search bar */
.support-inst-hero__search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0.65rem;
  padding: 0.7rem 1rem;
  max-width: 460px;
  color: rgba(255,255,255,0.5);
}

.support-inst-hero__search input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.95rem;
  width: 100%;
}

.support-inst-hero__search input::placeholder { color: rgba(255,255,255,0.45); }

/* Guide cards */
.support-inst-guides {
  padding: 3.5rem 0;
  background: #f6f8fb;
}

.support-inst-guides__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.support-inst-guide-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.support-inst-guide-card--featured {
  background: #0f3d7a;
  border-color: #0f3d7a;
  box-shadow: 0 16px 40px rgba(15,61,122,0.2);
}

.support-inst-guide-card__icon {
  width: 3rem; height: 3rem;
  border-radius: 0.85rem;
  background: rgba(15,61,122,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #0f3d7a;
  margin-bottom: 1.1rem;
}

.support-inst-guide-card--featured .support-inst-guide-card__icon {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.support-inst-guide-card h2 {
  font-size: 1.25rem;
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.03em;
  margin: 0 0 0.45rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.support-inst-guide-card--featured h2 { color: #fff; }

.support-inst-guide-card > p {
  font-size: 0.9rem;
  color: #475467;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.support-inst-guide-card--featured > p { color: rgba(255,255,255,0.72); }

/* Steps list */
.support-inst-guide-card__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 1rem;
  border-top: 1px solid #f0f4f8;
  padding-top: 1.25rem;
}

.support-inst-guide-card--featured .support-inst-guide-card__steps {
  border-color: rgba(255,255,255,0.12);
}

.support-inst-guide-card__steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.support-inst-guide-card__step-num {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: rgba(15,61,122,0.08);
  color: #0f3d7a;
  font-size: 0.78rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.support-inst-guide-card--featured .support-inst-guide-card__step-num {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.support-inst-guide-card__steps strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #121826;
  margin-bottom: 0.15rem;
}

.support-inst-guide-card__steps p {
  font-size: 0.83rem;
  color: #667085;
  margin: 0;
  line-height: 1.55;
}

.support-inst-guide-card--featured .support-inst-guide-card__steps strong { color: #fff; }
.support-inst-guide-card--featured .support-inst-guide-card__steps p { color: rgba(255,255,255,0.6); }

.support-inst-guide-card__help {
  font-size: 0.83rem;
  font-weight: 700;
  color: #0f3d7a;
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
  transition: opacity 0.15s;
}

.support-inst-guide-card__help:hover { opacity: 0.7; }
.support-inst-guide-card--featured .support-inst-guide-card__help { color: rgba(255,255,255,0.7); }

/* Help strip */
.support-inst-help-strip {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 2rem 0;
}

.support-inst-help-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.support-inst-help-strip h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #121826;
  margin: 0 0 0.25rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.support-inst-help-strip p {
  font-size: 0.9rem;
  color: #475467;
  margin: 0;
}

.support-inst-help-strip__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.support-inst-help-strip__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .support-inst-guides__grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .support-inst-hero { padding: 2.5rem 0 2rem; }
  .support-inst-guides { padding: 2.5rem 0; }
  .support-inst-help-strip__inner { flex-direction: column; align-items: flex-start; }
  .support-inst-help-strip__actions { flex-direction: column; width: 100%; }
}


/* =========================================================
   SUPPORT — FAQs PAGE
   ========================================================= */

/* Hero — reuses support-inst-hero styles, minor overrides */
.faq-hero {
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 60%, #1a5fad 100%);
  padding: 3.5rem 0 3rem;
}

.faq-hero__inner { max-width: 680px; }

.faq-hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #a8c8f0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.faq-hero__title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0 0 0.85rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.faq-hero__text {
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.78);
  margin-bottom: 1.5rem;
  max-width: 520px;
}

.faq-hero__search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0.65rem;
  padding: 0.7rem 1rem;
  max-width: 460px;
  color: rgba(255,255,255,0.5);
}

.faq-hero__search input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.95rem;
  width: 100%;
}

.faq-hero__search input::placeholder { color: rgba(255,255,255,0.45); }

/* Body */
.faq-body {
  padding: 3rem 0 4rem;
  background: #f6f8fb;
}

/* Category tabs */
.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.faq-tab {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #475467;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', system-ui, sans-serif;
}

.faq-tab:hover { border-color: #0f3d7a; color: #0f3d7a; }

.faq-tab--active {
  background: #0f3d7a;
  border-color: #0f3d7a;
  color: #fff;
}

/* FAQ accordion list */
.faq-list {
  display: grid;
  gap: 0.6rem;
  max-width: 860px;
}

.faq-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
  transition: box-shadow 0.18s;
}

.faq-item:hover { box-shadow: 0 4px 16px rgba(15,36,70,0.07); }
.faq-item--open { box-shadow: 0 6px 24px rgba(15,36,70,0.1); border-color: #c7d8f0; }

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.97rem;
  font-weight: 700;
  color: #121826;
  font-family: 'Inter', system-ui, sans-serif;
  transition: color 0.15s;
}

.faq-item__question:hover { color: #0f3d7a; }
.faq-item--open .faq-item__question { color: #0f3d7a; }

.faq-item__chevron {
  flex-shrink: 0;
  color: #94a3b8;
  transition: transform 0.22s ease;
}

.faq-item--open .faq-item__chevron {
  transform: rotate(180deg);
  color: #0f3d7a;
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, padding 0.22s ease;
  padding: 0 1.4rem;
}

.faq-item--open .faq-item__answer {
  max-height: 400px;
  padding: 0 1.4rem 1.25rem;
}

.faq-item__answer p {
  font-size: 0.93rem;
  color: #475467;
  line-height: 1.72;
  margin: 0;
  border-top: 1px solid #f0f4f8;
  padding-top: 1rem;
}

/* No results */
.faq-no-results {
  padding: 2rem;
  text-align: center;
  background: #fff;
  border-radius: 1rem;
  border: 1px dashed #cbd5e1;
}

.faq-no-results p {
  font-size: 0.95rem;
  color: #667085;
  margin: 0;
}

.faq-no-results a { color: #0f3d7a; font-weight: 700; }

/* Responsive */
@media (max-width: 700px) {
  .faq-hero { padding: 2.5rem 0 2rem; }
  .faq-body { padding: 2rem 0 3rem; }
  .faq-tabs { gap: 0.4rem; }
  .faq-tab { font-size: 0.8rem; padding: 0.38rem 0.9rem; }
}


/* =========================================================
   SUPPORT — TROUBLESHOOTING PAGE
   ========================================================= */

.ts-body {
  padding: 3.5rem 0;
  background: #f6f8fb;
}

.ts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.ts-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ts-card--featured {
  background: #0f3d7a;
  border-color: #0f3d7a;
  box-shadow: 0 16px 40px rgba(15,61,122,0.2);
}

.ts-card--open {
  background: #f0faf8;
  border: 2px dashed #0e9f8e;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.ts-card__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.ts-card__icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(15,61,122,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #0f3d7a;
  flex-shrink: 0;
}

.ts-card--featured .ts-card__icon {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.ts-card__service {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0e9f8e;
  margin-bottom: 0.2rem;
}

.ts-card--featured .ts-card__service { color: #7dd3c8; }

.ts-card__title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #121826;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-family: 'Inter', system-ui, sans-serif;
}

.ts-card--featured .ts-card__title { color: #fff; }

/* Steps */
.ts-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem;
  border-top: 1px solid #f0f4f8;
  padding-top: 1.1rem;
}

.ts-card--featured .ts-steps { border-color: rgba(255,255,255,0.12); }

.ts-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.ts-step-num {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: rgba(15,61,122,0.08);
  color: #0f3d7a;
  font-size: 0.75rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.ts-card--featured .ts-step-num {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.ts-steps strong {
  display: block;
  font-size: 0.87rem;
  font-weight: 700;
  color: #121826;
  margin-bottom: 0.12rem;
}

.ts-steps p {
  font-size: 0.82rem;
  color: #667085;
  margin: 0;
  line-height: 1.55;
}

.ts-card--featured .ts-steps strong { color: #fff; }
.ts-card--featured .ts-steps p { color: rgba(255,255,255,0.6); }

/* Footer link */
.ts-card__footer {
  font-size: 0.82rem;
  color: #667085;
  border-top: 1px solid #f0f4f8;
  padding-top: 0.85rem;
  margin-top: auto;
}

.ts-card__footer a {
  color: #0f3d7a;
  font-weight: 700;
  text-decoration: none;
}

.ts-card__footer a:hover { text-decoration: underline; }
.ts-card--featured .ts-card__footer { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.5); }
.ts-card--featured .ts-card__footer a { color: rgba(255,255,255,0.85); }

/* Open card */
.ts-card__open-text {
  font-size: 0.95rem;
  color: #475467;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.ts-card__open-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.ts-card__open-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .ts-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .ts-grid { grid-template-columns: 1fr; }
  .ts-body { padding: 2.5rem 0; }
}

/* =========================================================
   COMPANY OVERVIEW HERO — match Residential Internet hero size/width
   Mirrors the bounded panel sizing from .res-int-b-hero.
   ========================================================= */
.about-co-hero {
  background: transparent !important;
  margin-top: -1px !important;
  padding-top: 0 !important;
  padding-bottom: clamp(1.5rem, 2.6vw, 2.2rem) !important;
  overflow: visible !important;
}

.about-co-hero::before,
.about-co-hero::after {
  display: none !important;
}

.about-co-hero .container {
  position: relative;
  z-index: 1;
  padding-top: 0 !important;
}

.about-co-hero__inner {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(350px, 0.98fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-height: 500px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 2rem !important;
  background: linear-gradient(135deg, #0b1f3a 0%, #10335f 58%, #1a5fb4 100%) !important;
  box-shadow: 0 18px 40px rgba(11, 31, 58, 0.14) !important;
}

.about-co-hero__inner::before,
.about-co-hero__inner::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}

.about-co-hero__inner::before {
  width: 360px;
  height: 360px;
  right: -120px;
  top: -110px;
  background: rgba(255, 255, 255, 0.06);
}

.about-co-hero__inner::after {
  width: 220px;
  height: 220px;
  left: -75px;
  bottom: -95px;
  background: rgba(79, 210, 214, 0.16);
}

.about-co-hero__content,
.about-co-hero__visual {
  position: relative !important;
  z-index: 1 !important;
}

.about-co-hero__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(2.1rem, 3.2vw, 2.85rem) clamp(2rem, 3vw, 2.7rem) clamp(2rem, 3vw, 2.55rem) !important;
}

.about-co-hero__eyebrow {
  margin-bottom: 0.9rem !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.07em !important;
}

.about-co-hero__title {
  font-size: clamp(2.25rem, 3.75vw, 3.45rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
  max-width: 540px !important;
  margin: 0 !important;
}

.about-co-hero__text {
  max-width: 520px !important;
  margin-top: 1rem !important;
  font-size: clamp(0.98rem, 1.15vw, 1.05rem) !important;
  line-height: 1.7 !important;
}

.about-co-hero__actions {
  margin-top: 1.25rem !important;
  gap: 0.8rem !important;
}

.about-co-hero__stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  margin-top: 1.25rem !important;
  padding-top: 1.1rem !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
}

.about-co-hero__stat strong {
  font-size: 1.625rem !important;
}

.about-co-hero__stat strong span {
  font-size: 0.875rem !important;
}

.about-co-hero__stat p {
  font-size: 0.72rem !important;
  margin-top: 0.3rem !important;
}

.about-co-hero__visual {
  align-self: stretch !important;
  display: flex !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.about-co-hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,31,58,.42) 0%, rgba(11,31,58,.12) 38%, rgba(11,31,58,0) 70%) !important;
  pointer-events: none;
}

.about-co-hero__visual img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 1100px) {
  .about-co-hero__inner {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }

  .about-co-hero__content {
    padding: 1.7rem 1.6rem 1.2rem !important;
  }

  .about-co-hero__visual {
    display: flex !important;
    min-height: 320px !important;
    height: auto !important;
  }

  .about-co-hero__visual img {
    min-height: 320px !important;
  }
}

@media (max-width: 760px) {
  .about-co-hero {
    padding: 0 0 1.8rem !important;
  }

  .about-co-hero__inner {
    border-radius: 1.35rem !important;
  }

  .about-co-hero__content {
    padding: 1.35rem 1.15rem 1rem !important;
  }

  .about-co-hero__title {
    font-size: clamp(1.95rem, 9vw, 2.7rem) !important;
    line-height: 1 !important;
  }

  .about-co-hero__text {
    font-size: 0.96rem !important;
    line-height: 1.62 !important;
  }

  .about-co-hero__visual,
  .about-co-hero__visual img {
    min-height: 230px !important;
  }

  .about-co-hero__stats {
    gap: 1.25rem !important;
    grid-template-columns: none !important;
  }

  .about-co-hero__stat strong {
    font-size: 1.35rem !important;
  }
}

/* =========================================================
   COMPANY OVERVIEW HERO — matched to Residential/Business homepage hero
   Scoped to template-about-company.php only.
   ========================================================= */
.about-co-fp-hero {
  width: 100%;
  max-width: 1400px;
  height: calc(var(--fp-hero-vh, 100vh) - 212px);
  max-height: 580px;
  min-height: 390px;
  margin: 0 auto;
  border-radius: 0;
  overflow: hidden;
}

.about-co-fp-hero .fp-hero__slide {
  background: linear-gradient(135deg, #0b1f3a 0%, #0d2a50 55%, #0e3f7c 100%);
}

.about-co-fp-hero .fp-hero__slide-content {
  justify-content: flex-start;
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.about-co-fp-hero .fp-hero__badge {
  margin-bottom: 0.85rem;
}

.about-co-fp-hero .fp-hero__lead {
  max-width: 590px;
}

.about-co-fp-hero .fp-hero__slide-photo img {
  object-position: center center;
}

@media (max-width: 900px) {
  .about-co-fp-hero {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .about-co-fp-hero .fp-hero__slide {
    min-height: 0;
  }
}


/* =========================================================
   COMPANY OVERVIEW — Final polish pass
   Keeps this scoped to template-about-company.php only.
   ========================================================= */
.about-co-fp-hero {
  margin-bottom: 0;
}

.about-co-fp-hero .fp-hero__slide-content {
  justify-content: center;
  padding-top: clamp(1.75rem, 3vw, 2.65rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.65rem);
}

.about-co-fp-hero .fp-hero__badge {
  margin-bottom: 0.8rem;
}

.about-co-fp-hero .fp-hero__title {
  max-width: 660px;
  font-size: clamp(2.15rem, 3.55vw, 3.55rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  margin-bottom: 0.95rem;
}

.about-co-fp-hero .fp-hero__title span {
  display: block;
}

.about-co-fp-hero .fp-hero__lead {
  max-width: 610px;
  margin-bottom: 1.25rem;
}

.about-co-fp-hero .fp-hero__actions {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.about-co-fp-hero .fp-hero__stats {
  margin-top: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.14);
}

.about-co-fp-hero .fp-hero__slide-photo::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right, rgba(11,31,58,0.24) 0%, rgba(11,31,58,0.08) 38%, rgba(11,31,58,0) 72%);
}

.about-co-fp-hero .fp-hero__slide-photo img {
  object-position: center 35%;
}

.about-co-trust-strip {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  background: #fff;
  border-bottom: 1px solid #e6edf5;
  box-shadow: 0 10px 28px rgba(11,31,58,0.045);
}

.about-co-trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 1rem clamp(1.25rem, 4vw, 3rem);
}

.about-co-trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 1rem;
  border-right: 1px solid #e6edf5;
  min-width: 0;
}

.about-co-trust-item:first-child {
  padding-left: 0;
}

.about-co-trust-item:last-child {
  border-right: 0;
  padding-right: 0;
}

.about-co-trust-item__icon {
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  color: #1565c0;
  background: #eef6ff;
}

.about-co-trust-item__icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.about-co-trust-item strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 900;
  color: #0b1f3a;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.about-co-trust-item em {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.74rem;
  font-style: normal;
  color: #667085;
  line-height: 1.25;
}

.about-co-who {
  padding-top: 4.75rem;
}

.about-co-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #1565c0;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.about-co-section-eyebrow::before {
  content: "";
  width: 1.65rem;
  height: 2px;
  border-radius: 999px;
  background: #0e9f8e;
}

.about-co-who__content h2 {
  margin-bottom: 1.1rem;
}

.about-co-who__content p {
  max-width: 620px;
}

.about-co-who__pillars {
  padding-top: 0.15rem;
}

.about-co-pillar {
  border-color: #dbe7f3;
  background: #f8fbff;
}

@media (max-width: 1100px) {
  .about-co-trust-strip__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.35rem;
  }

  .about-co-trust-item {
    border-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  .about-co-fp-hero .fp-hero__slide-content {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .about-co-fp-hero .fp-hero__title span {
    display: inline;
  }
}

@media (max-width: 700px) {
  .about-co-fp-hero .fp-hero__title {
    font-size: clamp(1.9rem, 9vw, 2.65rem);
  }

  .about-co-trust-strip__inner {
    grid-template-columns: 1fr;
    padding: 1rem 1.25rem;
  }

  .about-co-trust-item {
    padding: 0.55rem 0;
    border-bottom: 1px solid #e6edf5;
  }

  .about-co-trust-item:last-child {
    border-bottom: 0;
  }

  .about-co-who {
    padding-top: 3rem;
  }
}

/* =========================================================
   COMPANY OVERVIEW — Clean hero spacing override
   Removes overcrowding from the About Company hero only.
   ========================================================= */
.about-co-fp-hero .fp-hero__slide-content {
  overflow: hidden !important;
  justify-content: center !important;
  padding-top: clamp(2rem, 3vw, 3rem) !important;
  padding-bottom: clamp(2rem, 3vw, 3rem) !important;
}

.about-co-fp-hero .fp-hero__title {
  max-width: 650px !important;
  font-size: clamp(2.15rem, 3.15vw, 3.1rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 1rem !important;
}

.about-co-fp-hero .fp-hero__title span {
  display: block !important;
}

.about-co-fp-hero .fp-hero__lead {
  max-width: 610px !important;
  font-size: 1rem !important;
  line-height: 1.62 !important;
  margin-bottom: 1.35rem !important;
}

.about-co-fp-hero .fp-hero__actions {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.about-co-fp-hero .fp-hero__stats {
  display: none !important;
}

.about-co-fp-hero .fp-hero__slide-photo {
  position: relative !important;
}

.about-co-fp-hero .fp-hero__slide-photo img {
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 900px) {
  .about-co-fp-hero .fp-hero__slide-content {
    overflow: visible !important;
  }

  .about-co-fp-hero .fp-hero__title {
    font-size: clamp(2rem, 7vw, 2.85rem) !important;
  }

  .about-co-fp-hero .fp-hero__title span {
    display: inline !important;
  }
}


/* =========================================================
   COMPANY OVERVIEW — matched compact hero size
   Matches Careers / Technology Partners / Mission hero sizing.
   ========================================================= */
.about-co-fp-hero {
  width: calc(100% - 2rem) !important;
  max-width: 1200px !important;
  height: clamp(380px, 42vw, 460px) !important;
  min-height: 360px !important;
  max-height: 460px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

.about-co-fp-hero .fp-hero__slide {
  min-height: 100% !important;
  height: 100% !important;
}

.about-co-fp-hero .fp-hero__slide-content {
  justify-content: center !important;
  overflow: hidden !important;
  padding-top: clamp(2.25rem, 3.5vw, 3.25rem) !important;
  padding-bottom: clamp(2.25rem, 3.5vw, 3.25rem) !important;
}

.about-co-fp-hero .fp-hero__title {
  font-size: clamp(2.05rem, 3vw, 3rem) !important;
  line-height: 1.08 !important;
  margin-bottom: 1rem !important;
}

.about-co-fp-hero .fp-hero__lead {
  max-width: 610px !important;
  margin-bottom: 0 !important;
}

.about-co-fp-hero .fp-hero__actions {
  display: none !important;
}

.about-co-trust-strip {
  width: calc(100% - 2rem) !important;
  max-width: 1200px !important;
}

@media (max-width: 900px) {
  .about-co-fp-hero {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .about-co-fp-hero .fp-hero__slide {
    height: auto !important;
  }

  .about-co-trust-strip {
    width: 100% !important;
  }
}


/* =========================================================
   SUPPORT — CANCELLATION & RETURN EQUIPMENT PAGE
   ========================================================= */

.cancel-body {
  padding: 3.5rem 0;
  background: #f6f8fb;
}

.cancel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.cancel-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cancel-card--featured {
  background: #0f3d7a;
  border-color: #0f3d7a;
  box-shadow: 0 16px 40px rgba(15,61,122,0.2);
}

.cancel-card__icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(15,61,122,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #0f3d7a;
}

.cancel-card--featured .cancel-card__icon {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.cancel-card h2 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #121826;
  margin: 0;
  letter-spacing: -0.03em;
  font-family: 'Inter', system-ui, sans-serif;
}

.cancel-card--featured h2 { color: #fff; }

.cancel-card > p {
  font-size: 0.92rem;
  color: #475467;
  line-height: 1.7;
  margin: 0;
}

.cancel-card--featured > p { color: rgba(255,255,255,0.75); }

/* Steps */
.cancel-steps { display: grid; gap: 1rem; }

.cancel-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.cancel-step__num {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: #0f3d7a;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Inter', system-ui, sans-serif;
}

.cancel-step strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #121826;
  margin-bottom: 0.15rem;
}

.cancel-step p {
  font-size: 0.82rem;
  color: #667085;
  margin: 0;
  line-height: 1.55;
}

.cancel-step p a {
  color: #0f3d7a;
  font-weight: 700;
  text-decoration: none;
}

.cancel-step p a:hover { text-decoration: underline; }

/* Equipment list */
.cancel-equipment-list {
  display: grid;
  gap: 0.55rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 1rem;
}

.cancel-equipment-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}

.cancel-equipment-item svg { color: #7dd3c8; flex-shrink: 0; }

/* Notice box */
.cancel-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
}

.cancel-notice svg { color: #fcd34d; flex-shrink: 0; margin-top: 0.1rem; }

.cancel-notice p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  margin: 0;
  line-height: 1.55;
}

/* Info rows */
.cancel-info-rows { display: grid; gap: 0; border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; }

.cancel-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.cancel-info-row:last-child { border-bottom: none; }
.cancel-info-row:nth-child(even) { background: #f8fafc; }

.cancel-info-row__label { font-size: 0.88rem; font-weight: 600; color: #1d2939; }

.cancel-info-row__badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  background: #eef2f8;
  color: #0f3d7a;
}

.cancel-info-row__badge--green { background: #e6f7f0; color: #0a7a4a; }
.cancel-info-row__badge--blue  { background: #dbeafe; color: #1a4fd6; }

/* Responsive */
@media (max-width: 1024px) {
  .cancel-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .cancel-grid { grid-template-columns: 1fr; }
  .cancel-body { padding: 2.5rem 0; }
}


/* =========================================================
   SUPPORT — DOWNLOADS PAGE
   ========================================================= */

.dl-body {
  padding: 3.5rem 0;
  background: #f6f8fb;
}

/* Category block */
.dl-category {
  margin-bottom: 2.5rem;
}

.dl-category__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0;
}

.dl-category__icon {
  width: 2.2rem; height: 2.2rem;
  border-radius: 0.6rem;
  background: rgba(15,61,122,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #0f3d7a;
  flex-shrink: 0;
}

.dl-category__header h2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #121826;
  margin: 0;
  letter-spacing: -0.025em;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Items grid */
.dl-items-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

/* Single download item */
.dl-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.dl-item:hover { box-shadow: 0 6px 20px rgba(15,36,70,0.08); transform: translateY(-1px); }

.dl-item__icon {
  width: 2.4rem; height: 2.4rem;
  border-radius: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.dl-item__icon--blue   { background: #dbeafe; color: #1d4ed8; }
.dl-item__icon--teal   { background: #ccfbf1; color: #0f766e; }
.dl-item__icon--orange { background: #ffedd5; color: #c2410c; }
.dl-item__icon--red    { background: #fee2e2; color: #b91c1c; }
.dl-item__icon--green  { background: #dcfce7; color: #15803d; }

.dl-item__info {
  flex: 1;
  min-width: 0;
}

.dl-item__info strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #121826;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-item__info span {
  display: block;
  font-size: 0.78rem;
  color: #667085;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.dl-item__meta {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
}

.dl-item__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #0f3d7a;
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

.dl-item__btn:hover { background: #0a2d5e; }

/* Not found box */
.dl-not-found {
  text-align: center;
  background: #fff;
  border: 2px dashed #cbd5e1;
  border-radius: 1.25rem;
  padding: 2.5rem;
  margin-top: 1rem;
}

.dl-not-found__icon { font-size: 2.2rem; margin-bottom: 0.75rem; display: block; }

.dl-not-found h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #121826;
  margin: 0 0 0.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.dl-not-found p { font-size: 0.93rem; color: #475467; margin: 0; line-height: 1.65; }
.dl-not-found a { color: #0f3d7a; font-weight: 700; text-decoration: none; }
.dl-not-found a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 1024px) {
  .dl-items-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .dl-items-grid { grid-template-columns: 1fr; }
  .dl-body { padding: 2.5rem 0; }
  .dl-item { flex-wrap: wrap; }
  .dl-item__btn { width: 100%; justify-content: center; }
}


/* =========================================================
   SUPPORT HERO — centred layout fix
   ========================================================= */

.support-inst-hero__inner {
  max-width: 680px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.support-inst-hero__text {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.support-inst-hero__search {
  max-width: 460px !important;
  margin: 0 auto !important;
}


/* =========================================================
   INSTALLATION GUIDES HERO — professional refresh
   ========================================================= */

.support-inst-hero {
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%) !important;
  padding: 4.5rem 0 4rem !important;
  position: relative;
  overflow: hidden;
}

/* Decorative orbs — same style as other pages */
.support-inst-hero::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,159,142,0.18) 0%, transparent 70%);
  top: -200px; right: -100px;
  pointer-events: none;
}

.support-inst-hero::after {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,0.1) 0%, transparent 70%);
  bottom: -150px; left: 10%;
  pointer-events: none;
}

/* Centred inner content */
.support-inst-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 640px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Eyebrow pill */
.support-inst-hero__eyebrow {
  display: inline-block !important;
  margin-bottom: 1.1rem !important;
}

/* Title */
.support-inst-hero__title {
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Text */
.support-inst-hero__text {
  max-width: 500px !important;
  margin: 0 auto 1.75rem !important;
  font-size: 1.05rem !important;
}

/* Search bar — bigger, more prominent */
.support-inst-hero__search {
  max-width: 500px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  border-radius: 0.75rem !important;
  padding: 0.85rem 1.25rem !important;
  font-size: 1rem !important;
  transition: background 0.18s, border-color 0.18s;
}

.support-inst-hero__search:focus-within {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.45) !important;
}

.support-inst-hero__search input {
  font-size: 0.98rem !important;
}

/* Three quick-access chips below search */
.support-inst-hero__quick {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.support-inst-hero__quick span {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  cursor: default;
}


/* =========================================================
   SUPPORT HERO — contained box style matching other pages
   ========================================================= */

/* Reset the full-bleed overrides */
.support-inst-hero {
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%);
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(3.5rem, 5.5vw, 5.5rem);
  overflow: hidden;
}

.support-inst-hero::before,
.support-inst-hero::after { display: none !important; }

/* The contained card — same as res-int-b-hero__wrap */
.support-inst-hero__box {
  background: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  position: relative;
  overflow: visible;
}

/* Subtle orb accents inside the box */


/* Content sits above the orbs */
.support-inst-hero__box > * { position: relative; z-index: 2; }

.support-inst-hero__eyebrow {
  display: inline-block !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #a8c8f0 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 0.28rem 0.85rem !important;
  border-radius: 999px !important;
  margin-bottom: 1.1rem !important;
  text-transform: none !important;
}

.support-inst-hero__title {
  font-size: clamp(1.9rem, 4vw, 2.9rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  color: #fff !important;
  margin: 0 0 0.9rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

.support-inst-hero__text {
  font-size: 1rem !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,0.78) !important;
  max-width: 500px !important;
  margin: 0 auto 1.75rem !important;
}

.support-inst-hero__search {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  border-radius: 0.7rem !important;
  padding: 0.82rem 1.1rem !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  color: rgba(255,255,255,0.5) !important;
  transition: background 0.18s, border-color 0.18s !important;
}

.support-inst-hero__search:focus-within {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

.support-inst-hero__search input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  width: 100% !important;
}

.support-inst-hero__search input::placeholder { color: rgba(255,255,255,0.45) !important; }

@media (max-width: 700px) {
  .support-inst-hero__box { padding: 2.5rem 1.25rem 2rem; border-radius: 1rem; }
  .support-inst-hero__title { font-size: clamp(1.7rem, 7vw, 2.3rem) !important; }
}


/* Quick-access chips in installation hero */
.support-inst-hero__chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.support-inst-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.88) !important;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.38rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s;
}

.support-inst-hero__chip:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.4);
  color: #fff !important;
}


/* =========================================================
   FAQ PAGE — sidebar + accordion layout
   ========================================================= */

.faq-body {
  padding: 3rem 0 4rem;
  background: #f6f8fb;
}

/* Two-column layout: sidebar left, accordion right */
.faq-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
}

/* Sidebar */
.faq-sidebar {
  position: sticky;
  top: 2rem;
}

.faq-sidebar__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.65rem;
}

.faq-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}

.faq-sidebar__btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475467;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  font-family: 'Inter', system-ui, sans-serif;
}

.faq-sidebar__btn:hover { border-color: #0f3d7a; color: #0f3d7a; background: #f0f6ff; }

.faq-sidebar__btn--active {
  background: #0f3d7a;
  border-color: #0f3d7a;
  color: #fff;
}

.faq-sidebar__btn--active svg { opacity: 0.85; }

.faq-sidebar__count {
  margin-left: auto;
  background: rgba(15,61,122,0.08);
  color: #0f3d7a;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.faq-sidebar__btn--active .faq-sidebar__count {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* Sidebar contact card */
.faq-sidebar__contact {
  background: linear-gradient(145deg, #0f3d7a 0%, #1a5fad 100%);
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
}

.faq-sidebar__contact-icon { font-size: 1.5rem; margin-bottom: 0.5rem; display: block; }

.faq-sidebar__contact strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.2rem;
}

.faq-sidebar__contact p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  margin: 0 0 0.85rem;
}

.faq-sidebar__contact-btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #0f3d7a !important;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.45rem 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.15s;
}

.faq-sidebar__contact-btn:hover { background: #e8f2ff; }

/* Main FAQ list */
.faq-main { min-width: 0; }

.faq-list { display: grid; gap: 0.55rem; }

.faq-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
  transition: box-shadow 0.18s;
}

.faq-item:hover { box-shadow: 0 4px 16px rgba(15,36,70,0.07); }
.faq-item--open { box-shadow: 0 6px 24px rgba(15,36,70,0.1); border-color: #c7d8f0; }

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.97rem;
  font-weight: 700;
  color: #121826;
  font-family: 'Inter', system-ui, sans-serif;
  transition: color 0.15s;
}

.faq-item__question:hover { color: #0f3d7a; }
.faq-item--open .faq-item__question { color: #0f3d7a; }

.faq-item__chevron {
  flex-shrink: 0;
  color: #94a3b8;
  transition: transform 0.22s ease;
}

.faq-item--open .faq-item__chevron { transform: rotate(180deg); color: #0f3d7a; }

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, padding 0.22s ease;
  padding: 0 1.4rem;
}

.faq-item--open .faq-item__answer {
  max-height: 400px;
  padding: 0 1.4rem 1.25rem;
}

.faq-item__answer p {
  font-size: 0.93rem;
  color: #475467;
  line-height: 1.72;
  margin: 0;
  border-top: 1px solid #f0f4f8;
  padding-top: 1rem;
}

/* No results */
.faq-no-results {
  padding: 2rem;
  text-align: center;
  background: #fff;
  border-radius: 1rem;
  border: 1px dashed #cbd5e1;
}

.faq-no-results p { font-size: 0.95rem; color: #667085; margin: 0; }
.faq-no-results a { color: #0f3d7a; font-weight: 700; }

/* Chip click cursor */
.faq-chip { cursor: pointer !important; }

/* Responsive */
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-sidebar { position: static; }
  .faq-sidebar__nav { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
  .faq-sidebar__btn { flex: 0 0 auto; width: auto; }
  .faq-sidebar__contact { display: none; }
}

@media (max-width: 700px) {
  .faq-body { padding: 2rem 0 3rem; }
}


/* FAQ item category tag — shows on "All" view */
.faq-item__question::before {
  content: attr(data-tag);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(15,61,122,0.07);
  color: #0f3d7a;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: auto;
  display: none; /* shown via JS when "All" is active */
}


/* Category accent borders on FAQ items */
.faq-item[data-category="internet"] { border-left: 3px solid #1a6fd4; }
.faq-item[data-category="phone"]    { border-left: 3px solid #0e9f8e; }
.faq-item[data-category="tv"]       { border-left: 3px solid var(--nl-blue-600, #1a5fb4); }
.faq-item[data-category="billing"]  { border-left: 3px solid #8b5cf6; }
.faq-item[data-category="technical"]{ border-left: 3px solid #ef4444; }

/* Bump version to bust CSS cache */


/* =========================================================
   TROUBLESHOOTING PAGE — using #54c5d0 (Inc. accent colour)
   ========================================================= */

/* Quick tip banner */
.ts-tip-banner {
  background: #f0fcfd;
  border-bottom: 1px solid #b2e8ed;
  padding: 0.85rem 0;
}

.ts-tip-banner__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ts-tip-banner__icon {
  color: #54c5d0;
  flex-shrink: 0;
}

.ts-tip-banner__inner p {
  font-size: 0.9rem;
  color: #1d2939;
  margin: 0;
  line-height: 1.5;
}

/* Body */
.ts-body {
  padding: 3rem 0;
  background: #f6f8fb;
}

.ts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

/* Cards */
.ts-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Featured card uses Inc. colour as accent */
.ts-card--featured {
  background: #0f3d7a;
  border-color: #0f3d7a;
  box-shadow: 0 16px 40px rgba(15,61,122,0.2);
}

/* Open/contact card — dark with photo */
.ts-card--open {
  background: #0a2540;
  border-color: #0a2540;
  padding: 0;
  overflow: hidden;
}

.ts-card__open-photo {
  height: 160px;
  overflow: hidden;
  background: #0f3d7a;
}

.ts-card__open-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ts-card__open-body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ts-card__open-body p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
  margin: 0;
}

.ts-card__open-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.ts-card__open-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

/* Card header */
.ts-card__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.ts-card__icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(84,197,208,0.1);
  display: flex; align-items: center; justify-content: center;
  color: #54c5d0;
  flex-shrink: 0;
}

.ts-card--featured .ts-card__icon {
  background: rgba(84,197,208,0.15);
  color: #54c5d0;
}

.ts-card__service {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #54c5d0;
  margin-bottom: 0.2rem;
}

.ts-card__title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #121826;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-family: 'Inter', system-ui, sans-serif;
}

.ts-card--featured .ts-card__title { color: #fff; }

/* Steps */
.ts-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem;
  border-top: 1px solid #f0f4f8;
  padding-top: 1.1rem;
}

.ts-card--featured .ts-steps { border-color: rgba(255,255,255,0.12); }

.ts-steps li { display: flex; align-items: flex-start; gap: 0.85rem; }

.ts-step-num {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: rgba(84,197,208,0.12);
  color: #54c5d0;
  font-size: 0.75rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.ts-card--featured .ts-step-num {
  background: rgba(84,197,208,0.2);
  color: #54c5d0;
}

.ts-steps strong { display: block; font-size: 0.87rem; font-weight: 700; color: #121826; margin-bottom: 0.12rem; }
.ts-steps p { font-size: 0.82rem; color: #667085; margin: 0; line-height: 1.55; }
.ts-card--featured .ts-steps strong { color: #fff; }
.ts-card--featured .ts-steps p { color: rgba(255,255,255,0.6); }

/* Footer */
.ts-card__footer {
  font-size: 0.82rem;
  color: #667085;
  border-top: 1px solid #f0f4f8;
  padding-top: 0.85rem;
  margin-top: auto;
}

.ts-card__footer a { color: #0f3d7a; font-weight: 700; text-decoration: none; }
.ts-card__footer a:hover { text-decoration: underline; }
.ts-card--featured .ts-card__footer { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.5); }
.ts-card--featured .ts-card__footer a { color: #54c5d0; }

/* Responsive */
@media (max-width: 1024px) { .ts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .ts-grid { grid-template-columns: 1fr; } .ts-body { padding: 2.5rem 0; } }


/* =========================================================
   CANCELLATION PAGE — hero + #54c5d0 accents
   ========================================================= */

/* Hero — split layout with photo right */
.cancel-hero-section {
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%);
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(3.5rem, 5.5vw, 5.5rem);
}

.cancel-hero-box {
  background: none;
  border-radius: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 280px;
  position: relative;
}

.cancel-hero-box::before {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84,197,208,0.15) 0%, transparent 70%);
  top: -120px; left: -60px;
  pointer-events: none;
}

.cancel-hero-box__content {
  padding: 3rem 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.cancel-hero-box__content .support-inst-hero__eyebrow {
  text-align: left !important;
  margin-left: 0 !important;
}

.cancel-hero-box__content .support-inst-hero__title {
  text-align: left !important;
  margin-left: 0 !important;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem) !important;
}

.cancel-hero-box__content .support-inst-hero__text {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* Chips row */
.cancel-hero-box__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.cancel-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(84,197,208,0.12);
  border: 1px solid rgba(84,197,208,0.3);
  color: #54c5d0;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
}

.cancel-hero-chip svg { color: #54c5d0; flex-shrink: 0; }

/* Photo right side */
.cancel-hero-box__photo {
  overflow: hidden;
}

.cancel-hero-box__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cards */
.cancel-body {
  padding: 3rem 0;
  background: #f6f8fb;
}

.cancel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.cancel-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cancel-card--featured {
  background: #0f3d7a;
  border-color: #0f3d7a;
  box-shadow: 0 16px 40px rgba(15,61,122,0.2);
}

.cancel-card__icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(84,197,208,0.1);
  display: flex; align-items: center; justify-content: center;
  color: #54c5d0;
}

.cancel-card--featured .cancel-card__icon {
  background: rgba(84,197,208,0.15);
  color: #54c5d0;
}

.cancel-card h2 {
  font-size: 1.15rem;
  font-weight: 900;
  color: #121826;
  margin: 0;
  letter-spacing: -0.025em;
  font-family: 'Inter', system-ui, sans-serif;
}

.cancel-card--featured h2 { color: #fff; }

.cancel-card > p { font-size: 0.92rem; color: #475467; line-height: 1.7; margin: 0; }
.cancel-card--featured > p { color: rgba(255,255,255,0.75); }

/* Steps */
.cancel-steps { display: grid; gap: 1rem; }

.cancel-step { display: flex; align-items: flex-start; gap: 0.85rem; }

.cancel-step__num {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: rgba(84,197,208,0.12);
  color: #54c5d0;
  font-size: 0.78rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Inter', system-ui, sans-serif;
}

.cancel-step strong { display: block; font-size: 0.88rem; font-weight: 700; color: #121826; margin-bottom: 0.15rem; }
.cancel-step p { font-size: 0.82rem; color: #667085; margin: 0; line-height: 1.55; }
.cancel-step p a { color: #54c5d0; font-weight: 700; text-decoration: none; }
.cancel-step p a:hover { text-decoration: underline; }

/* Equipment list */
.cancel-equipment-list {
  display: grid;
  gap: 0.55rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 1rem;
}

.cancel-equipment-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}

.cancel-equipment-item svg { color: #54c5d0; flex-shrink: 0; }

/* Notice */
.cancel-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: rgba(84,197,208,0.1);
  border: 1px solid rgba(84,197,208,0.25);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
}

.cancel-notice svg { color: #54c5d0; flex-shrink: 0; margin-top: 0.1rem; }
.cancel-notice p { font-size: 0.85rem; color: rgba(255,255,255,0.85); margin: 0; line-height: 1.55; }

/* Info rows */
.cancel-info-rows { border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; }

.cancel-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.cancel-info-row:last-child { border-bottom: none; }
.cancel-info-row:nth-child(even) { background: #f8fafc; }
.cancel-info-row__label { font-size: 0.88rem; font-weight: 600; color: #1d2939; }

.cancel-info-row__badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: #eef2f8;
  color: #0f3d7a;
}

/* Use Inc. colour for confirmed badges */
.cancel-info-row__badge--cyan { background: rgba(84,197,208,0.12); color: #1a9aaa; }
.cancel-info-row__badge--blue { background: #dbeafe; color: #1a4fd6; }

/* Responsive */
@media (max-width: 1024px) {
  .cancel-hero-box { grid-template-columns: 1fr; }
  .cancel-hero-box__photo { height: 220px; }
  .cancel-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .cancel-grid { grid-template-columns: 1fr; }
  .cancel-body { padding: 2.5rem 0; }
  .cancel-hero-box__content { padding: 2rem 1.5rem; }
}


/* =========================================================
   DOWNLOADS PAGE — using #54c5d0 (Inc. accent colour)
   ========================================================= */

.dl-body {
  padding: 3.5rem 0;
  background: #f6f8fb;
}

.dl-category { margin-bottom: 2.5rem; }

.dl-category__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0;
}

.dl-category__icon {
  width: 2.2rem; height: 2.2rem;
  border-radius: 0.6rem;
  background: rgba(84,197,208,0.1);
  display: flex; align-items: center; justify-content: center;
  color: #54c5d0;
  flex-shrink: 0;
}

.dl-category__header h2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #121826;
  margin: 0;
  letter-spacing: -0.025em;
  font-family: 'Inter', system-ui, sans-serif;
}

.dl-items-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.dl-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.dl-item:hover { box-shadow: 0 6px 20px rgba(15,36,70,0.08); transform: translateY(-1px); }

.dl-item__icon {
  width: 2.4rem; height: 2.4rem;
  border-radius: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Use Inc. colour for the cyan icon type */
.dl-item__icon--cyan { background: rgba(84,197,208,0.12); color: #54c5d0; }
.dl-item__icon--blue  { background: #dbeafe; color: #1d4ed8; }
.dl-item__icon--red   { background: #fee2e2; color: #b91c1c; }
.dl-item__icon--green { background: #dcfce7; color: #15803d; }

.dl-item__info { flex: 1; min-width: 0; }

.dl-item__info strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #121826;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-item__info span {
  display: block;
  font-size: 0.78rem;
  color: #667085;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.dl-item__meta { font-size: 0.72rem; color: #94a3b8; font-weight: 600; }

.dl-item__btn {
  display: inline-flex;
  align-items: center;
  background: #54c5d0;
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

.dl-item__btn:hover { background: #3db0bc; }

/* Not found box */
.dl-not-found {
  text-align: center;
  background: #fff;
  border: 2px dashed rgba(84,197,208,0.4);
  border-radius: 1.25rem;
  padding: 2.5rem;
  margin-top: 1rem;
}

.dl-not-found__icon { font-size: 2.2rem; margin-bottom: 0.75rem; display: block; }

.dl-not-found h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #121826;
  margin: 0 0 0.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.dl-not-found p { font-size: 0.93rem; color: #475467; margin: 0; line-height: 1.65; }
.dl-not-found a { color: #54c5d0; font-weight: 700; text-decoration: none; }
.dl-not-found a:hover { text-decoration: underline; }

@media (max-width: 1024px) { .dl-items-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .dl-items-grid { grid-template-columns: 1fr; }
  .dl-body { padding: 2.5rem 0; }
  .dl-item { flex-wrap: wrap; }
  .dl-item__btn { width: 100%; justify-content: center; }
}


/* =========================================================
   CONTACT HERO — force split layout + show photo
   ========================================================= */

.contact-page-hero .container {
  max-width: var(--nl-container, 1200px);
}

.contact-page-hero__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 2rem !important;
  text-align: left !important;
}

.contact-page-hero__content {
  flex: none !important;
  text-align: left !important;
}

.contact-page-hero h1 {
  text-align: left !important;
}

.contact-page-hero__lead {
  text-align: left !important;
}

.contact-page-hero__visual {
  display: flex !important;
  position: relative !important;
  align-items: flex-end !important;
  justify-content: center !important;
  min-height: 320px !important;
}

.contact-page-hero__photo {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
}

.contact-page-hero__photo img {
  width: 100% !important;
  max-height: 420px !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  display: block !important;
}

@media (max-width: 900px) {
  .contact-page-hero__inner {
    grid-template-columns: 1fr !important;
  }
  .contact-page-hero__visual { display: none !important; }
}


/* CONTACT HERO — ensure image renders over blobs */
.contact-page-hero__photo img {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-height: 420px !important;
  object-fit: contain !important;
}

.contact-page-hero__blob,
.contact-page-hero__blob-2 {
  z-index: 1 !important;
}


/* =========================================================
   COMPANY OVERVIEW — #54c5d0 Inc. colour accents
   ========================================================= */

/* Stats strip */
.about-co-stats {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.about-co-stats__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 0;
}

.about-co-stat { flex: 1; text-align: center; }

.about-co-stat strong {
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  color: #54c5d0;
  line-height: 1;
  letter-spacing: -0.03em;
  font-family: 'Inter', system-ui, sans-serif;
}

.about-co-stat strong span { font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.about-co-stat > span { display: block; font-size: 0.78rem; color: #667085; font-weight: 600; margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.05em; }
.about-co-stat-sep { width: 1px; height: 2.2rem; background: #e2e8f0; flex-shrink: 0; }

/* Section eyebrow */
.about-co-section-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #54c5d0;
  margin-bottom: 0.65rem;
}

/* Who we are */
.about-co-who { padding: 4.5rem 0; background: #fff; }

.about-co-who__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.about-co-who__content h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.about-co-who__content p { font-size: 1rem; color: #475467; line-height: 1.75; margin-bottom: 1rem; }

.about-co-who__mission {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f3d7a !important;
  border-left: 3px solid #54c5d0;
  padding-left: 1rem;
  margin-top: 1.5rem !important;
}

.about-co-pillars { display: grid; gap: 1.1rem; }

.about-co-pillar {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: #f6f9fc;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  transition: box-shadow 0.18s;
}

.about-co-pillar:hover { box-shadow: 0 6px 20px rgba(15,36,70,0.07); }

.about-co-pillar__icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.65rem;
  background: rgba(84,197,208,0.1);
  display: flex; align-items: center; justify-content: center;
  color: #54c5d0;
  flex-shrink: 0;
}

.about-co-pillar h3 { font-size: 0.95rem; font-weight: 800; color: #121826; margin: 0 0 0.3rem; letter-spacing: -0.01em; }
.about-co-pillar p { font-size: 0.87rem; color: #475467; margin: 0; line-height: 1.55; }

/* Values */
.about-co-values { padding: 4.5rem 0; }

.about-co-values-heading { text-align: center; max-width: 520px; margin: 0 auto 2.5rem; }

.about-co-values-heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  margin: 0 0 0.65rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.about-co-values-heading p { color: #475467; font-size: 1rem; margin: 0; }

.about-co-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.about-co-value-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.35rem;
  padding: 2rem 1.75rem;
  position: relative;
  transition: box-shadow 0.18s, transform 0.18s;
}

.about-co-value-card:hover { box-shadow: 0 12px 32px rgba(15,36,70,0.09); transform: translateY(-2px); }

.about-co-value-card--featured { background: #0f3d7a; border-color: #0f3d7a; }

.about-co-value-card__num {
  font-size: 2.5rem;
  font-weight: 900;
  color: rgba(84,197,208,0.15);
  line-height: 1;
  margin-bottom: 0.75rem;
  letter-spacing: -0.04em;
  font-family: 'Inter', system-ui, sans-serif;
}

.about-co-value-card--featured .about-co-value-card__num { color: rgba(84,197,208,0.25); }

.about-co-value-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #121826;
  margin: 0 0 0.6rem;
  letter-spacing: -0.025em;
  font-family: 'Inter', system-ui, sans-serif;
}

.about-co-value-card--featured h3 { color: #fff; }
.about-co-value-card p { font-size: 0.93rem; color: #475467; line-height: 1.65; margin: 0; }
.about-co-value-card--featured p { color: rgba(255,255,255,0.8); }

/* Reviews */
.about-co-reviews { padding: 4.5rem 0; }

.about-co-reviews__heading { text-align: center; margin-bottom: 2.5rem; }

.about-co-reviews__heading h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #121826;
  letter-spacing: -0.04em;
  margin: 0 0 0.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.about-co-reviews__heading p { font-size: 0.95rem; color: #667085; margin: 0; }

.about-co-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.about-co-review-card {
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.75rem;
  border: 1px solid rgba(178,194,214,0.4);
  box-shadow: 0 4px 20px rgba(11,31,58,0.07);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.about-co-review-card:hover { box-shadow: 0 12px 32px rgba(11,31,58,0.12); transform: translateY(-2px); }

.about-co-review-card__stars { font-size: 1.1rem; color: #f59e0b; letter-spacing: 2px; }

.about-co-review-card p { font-size: 0.88rem; line-height: 1.7; color: #4b5563; margin: 0; flex: 1; font-style: italic; }

.about-co-review-card__author {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(178,194,214,0.35);
}

.about-co-review-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #54c5d0, #0f3d7a);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.about-co-review-card__info { flex: 1; }
.about-co-review-card__info strong { display: block; font-size: 0.85rem; font-weight: 700; color: #111827; }
.about-co-review-card__info span { font-size: 0.71rem; color: #6b7280; }

/* Responsive */
@media (max-width: 1024px) {
  .about-co-who__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-co-values-grid { grid-template-columns: 1fr 1fr; }
  .about-co-stats__inner { flex-wrap: wrap; gap: 0.5rem; }
  .about-co-stat { flex: 0 0 calc(50% - 0.25rem); }
  .about-co-stat-sep { display: none; }
}

@media (max-width: 700px) {
  .about-co-values-grid { grid-template-columns: 1fr; }
  .about-co-reviews__grid { grid-template-columns: 1fr; }
  .about-co-who { padding: 2.5rem 0; }
  .about-co-values { padding: 2.5rem 0; }
  .about-co-reviews { padding: 2.5rem 0; }
}




/* =========================================================
   WI-FI COVERAGE PAGE — full CSS restore
   ========================================================= */

.wifi-cov-section { padding: 3.5rem 0 2.5rem; }

.wifi-cov-heading { text-align: center; max-width: 620px; margin: 0 auto 2.5rem; }
.wifi-cov-heading__sub { color: #475467; font-size: 1rem; line-height: 1.75; margin: 0.75rem 0 0; }

.wifi-cov-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.wifi-cov-card {
  position: relative;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1.35rem;
  padding: 1.75rem 1.5rem 1.5rem;
  transition: box-shadow 0.18s, transform 0.18s;
}

.wifi-cov-card:hover {
  box-shadow: 0 12px 32px rgba(15,36,70,0.09);
  transform: translateY(-2px);
}

.wifi-cov-card--featured {
  background: #54c5d0;
  border-color: #54c5d0;
}

.wifi-cov-card--featured h3,
.wifi-cov-card--featured p { color: #fff; }
.wifi-cov-card--featured p { opacity: 0.9; }

.wifi-cov-card__badge {
  position: absolute;
  top: -0.7rem;
  left: 1.5rem;
  background: #3aabb6;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
}

.wifi-cov-card__icon {
  width: 2.6rem; height: 2.6rem;
  border-radius: 0.75rem;
  background: rgba(84,197,208,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #54c5d0;
}

.wifi-cov-card--featured .wifi-cov-card__icon {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.wifi-cov-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #121826;
  margin: 0 0 0.55rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-family: 'Inter', system-ui, sans-serif;
}

.wifi-cov-card p {
  font-size: 0.95rem;
  color: #475467;
  line-height: 1.65;
  margin: 0;
}

/* Split section */
.wifi-cov-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 1.75rem;
  overflow: hidden;
}

.wifi-cov-split__media { min-height: 380px; }
.wifi-cov-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wifi-cov-split__content { padding: 2.5rem; }
.wifi-cov-split__content h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  color: #121826;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.wifi-cov-split__content p { font-size: 0.98rem; color: #475467; line-height: 1.75; margin-bottom: 1.25rem; }

.wifi-cov-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.wifi-cov-checklist li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.96rem; font-weight: 600; color: #1d2939; line-height: 1.55; }
.wifi-cov-checklist li svg { flex-shrink: 0; margin-top: 0.28rem; color: #54c5d0; }

@media (max-width: 1024px) {
  .wifi-cov-cards { grid-template-columns: 1fr 1fr; }
  .wifi-cov-split { grid-template-columns: 1fr; }
  .wifi-cov-split__media { min-height: 240px; }
  .wifi-cov-split__content { padding: 2rem; }
}

@media (max-width: 700px) {
  .wifi-cov-cards { grid-template-columns: 1fr; }
  .wifi-cov-section { padding: 2.5rem 0 2rem; }
  .wifi-cov-split__content { padding: 1.5rem; }
}


/* Rural featured card — white text on #54c5d0 background */
.rural-ts-feature-card--featured h3,
.rural-ts-feature-card--featured p,
.rural-ts-feature-card--featured .rural-ts-feature-card__meta {
  color: #fff !important;
}

.rural-ts-feature-card--featured p { opacity: 0.92 !important; }

.rural-ts-feature-card--featured .rural-ts-feature-card__icon {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}


/* Rural hero — white text on dark blue background */
.rural-ts-hero__wrap .rural-ts-hero__title {
  color: #fff !important;
}

.rural-ts-hero__wrap .rural-ts-hero__title span {
  color: #54c5d0 !important;
}

.rural-ts-hero__wrap .rural-ts-hero__text {
  color: rgba(255,255,255,0.78) !important;
}

.rural-ts-hero__wrap .rural-ts-hero__eyebrow {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #a8c8f0 !important;
}

.rural-ts-hero__wrap .rural-ts-hero__chips span {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.88) !important;
}

/* Fix btn--outline on dark background */
.rural-ts-hero__wrap .btn--outline {
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
}

.rural-ts-hero__wrap .btn--outline:hover {
  border-color: #fff !important;
}


/* Hardware hero — add breathing room from header matching other pages */
.res-hw-hero {
  padding-top: 1.8rem !important;
  padding-bottom: 2rem !important;
}


/* Phone Hardware hero — breathing room from header */
.res-phone-hw-hero {
  padding-top: 1.8rem !important;
  padding-bottom: 2rem !important;
}


/* Cyan badge variant using Inc. colour */
.res-hw-include-row__badge--cyan {
  background: rgba(84,197,208,0.12);
  color: #1a9aaa;
}


/* TV Hardware hero — breathing room from header */
.res-tv-hw-hero--spaced {
  padding-top: 1.8rem !important;
  padding-bottom: 2rem !important;
}


/* =========================================================
   FULL-BLEED HERO — white text on all hero sections
   ========================================================= */

/* res-int-b-hero text colours */
.res-int-b-hero__title { color: #fff !important; }
.res-int-b-hero__text { color: rgba(255,255,255,0.82) !important; }
.res-int-b-hero__chips span {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.88) !important;
}
.res-int-b-hero .btn--outline {
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
}
.res-int-b-hero .btn--outline:hover {
  border-color: #fff !important;
}

/* Support hero text */
.support-inst-hero__eyebrow {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #a8c8f0 !important;
}
.support-inst-hero__title { color: #fff !important; }
.support-inst-hero__text { color: rgba(255,255,255,0.78) !important; }
.support-inst-hero__search {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
}
.support-inst-hero__search input { color: #fff !important; }
.support-inst-hero__chip {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.88) !important;
}

/* Cancel hero text */
.cancel-hero-section .support-inst-hero__eyebrow,
.cancel-hero-section .support-inst-hero__title,
.cancel-hero-section .support-inst-hero__text { color: #fff !important; }
.cancel-hero-box__content .support-inst-hero__title { color: #fff !important; }

/* Hero padding overrides — remove old spacing rules */
.res-hw-hero { padding-top: 0 !important; padding-bottom: 0 !important; }
.res-phone-hw-hero { padding-top: 0 !important; padding-bottom: 0 !important; }
.res-tv-hw-hero--spaced { padding-top: 0 !important; padding-bottom: 0 !important; }


/* =========================================================
   GLOBAL — res-int-b-hero full-bleed override
   ========================================================= */
.res-int-b-hero__wrap {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   GLOBAL FORCE — res-int-b-hero contained max-width hero
   Matches the residential home hero style: centred, max-width, sharp edges
   ========================================================= */
.res-int-b-hero {
  background: #f4f6fb !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

.res-int-b-hero__wrap {
  max-width: 1400px !important;
  margin: 0 auto !important;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 30px rgba(11,31,58,0.15) !important;
  overflow: hidden !important;
  align-items: stretch !important;
}


/* =========================================================
   HERO IMAGE — flush to right/top/bottom like home page
   ========================================================= */
/* Hero image — flush to top/right/bottom of wrap */
.res-int-b-hero__wrap {
  overflow: hidden !important;
}

.res-int-b-hero__visual {
  position: relative !important;
  margin: calc(-1 * clamp(1.75rem, 3vw, 2.5rem)) 0 -8rem 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
  min-height: 340px !important;
}

.res-int-b-hero__image-card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

.res-int-b-hero__image {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.res-int-b-hero__blob { display: none !important; }

@media (max-width: 768px) {
  .res-int-b-hero__visual { min-height: 220px !important; }
}

/* =========================================================
   RURAL + TV HARDWARE HERO — match other service pages exactly
   ========================================================= */
.rural-ts-hero {
  background: #f4f6fb !important;
  padding: 0 !important;
}

.rural-ts-hero__wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: 0 8px 30px rgba(11,31,58,0.15) !important;
  overflow: hidden !important;
}

.res-tv-hw-hero {
  background: #f4f6fb !important;
  padding: 0 !important;
}

.res-tv-hw-hero .res-int-b-hero__wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: 0 8px 30px rgba(11,31,58,0.15) !important;
  overflow: hidden !important;
}


/* Rural hero visual — same as home hero photo */
.rural-ts-hero__visual {
  position: relative !important;
  flex: 0 0 50% !important;
  overflow: hidden !important;
  margin: 0 !important;
  align-self: stretch !important;
}

.rural-ts-hero__visual .rural-ts-hero__person {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 16% !important;
  display: block !important;
}

.rural-ts-hero__wrap {
  display: flex !important;
  align-items: stretch !important;
}


/* =========================================================
   FINAL HERO FIX — make right-side hero photos flush to edges
   Applies to Residential Internet, Rural Internet, Wi-Fi Coverage,
   Residential Hardware, Home Phone, Phone Hardware, and TV Hardware
   ========================================================= */
.res-int-b-hero .container,
.rural-ts-hero .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.res-int-b-hero__wrap {
  gap: 0 !important;
  align-items: stretch !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr) !important;
  overflow: hidden !important;
}

.res-int-b-hero__content {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.res-int-b-hero__visual {
  position: relative !important;
  display: block !important;
  align-self: stretch !important;
  min-height: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.res-int-b-hero__image-card {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

.res-int-b-hero__image {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.rural-ts-hero__wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.rural-ts-hero__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.rural-ts-hero__visual {
  position: relative !important;
  display: block !important;
  flex: none !important;
  min-height: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
}

.rural-ts-hero__visual .rural-ts-hero__person {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

@media (max-width: 1100px) {
  .res-int-b-hero__wrap,
  .rural-ts-hero__wrap {
    grid-template-columns: 1fr !important;
  }

  .res-int-b-hero__visual,
  .rural-ts-hero__visual {
    min-height: 320px !important;
  }

  .res-int-b-hero__image-card,
  .res-int-b-hero__image,
  .rural-ts-hero__visual .rural-ts-hero__person {
    min-height: 320px !important;
  }
}

@media (max-width: 760px) {
  .res-int-b-hero__visual,
  .rural-ts-hero__visual {
    min-height: 240px !important;
  }

  .res-int-b-hero__image-card,
  .res-int-b-hero__image,
  .rural-ts-hero__visual .rural-ts-hero__person {
    min-height: 240px !important;
  }
}


/* Business Internet hero — override page-hero styles */
.biz-int-hero-wrap {
  background: #f4f6fb !important;
  padding: 0 !important;
  min-height: unset !important;
}

.biz-int-hero-wrap .biz-int-hero {
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%) !important;
}

/* =========================================================
   BUSINESS INTERNET HERO — force match other service pages
   ========================================================= */
.biz-int-hero-wrap {
  background: #f4f6fb !important;
  padding: 0 !important;
}

.biz-int-hero {
  max-width: 1400px !important;
  margin: 0 auto !important;
  min-height: 390px !important;
  max-height: 580px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  position: relative !important;
}

/* Remove top white gap */
.biz-int-hero-wrap + * {
  margin-top: 0 !important;
}

.biz-int-hero__content {
  flex: 0 0 52% !important;
  padding: clamp(2rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.biz-int-hero__visual {
  flex: 0 0 48% !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.biz-int-hero__image-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.biz-int-hero__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Remove page-hero styles that may be overriding */
.biz-int-hero-wrap.page-hero,
.page-hero.biz-int-hero-wrap {
  min-height: unset !important;
  padding: 0 !important;
  background: #f4f6fb !important;
}


/* =========================================================
   BUSINESS PHONE PAGE — unique alternating block layout
   ========================================================= */

/* Intro card */
.biz-phone-intro {
  padding: 3rem 0;
  background: #f6f8fb;
}

.biz-phone-intro__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%);
  border-radius: 1.5rem;
  padding: 2.5rem 3rem;
  align-items: start;
}

.biz-phone-intro__text h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.biz-phone-intro__text p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  margin-bottom: 0.85rem;
}

.biz-phone-intro__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  padding-top: 0.5rem;
}

.biz-phone-intro__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
}

.biz-phone-intro__feature svg { color: #54c5d0; flex-shrink: 0; }

/* Alternating blocks */
.biz-phone-section { padding: 3.5rem 0; background: #fff; }

.biz-phone-block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid #f0f4f8;
}

.biz-phone-block:last-child { border-bottom: none; }

.biz-phone-block--alt {
  grid-template-columns: auto 1fr;
}

.biz-phone-block__num {
  font-size: 3rem;
  font-weight: 900;
  color: rgba(84,197,208,0.15);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.biz-phone-block__content h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #121826;
  letter-spacing: -0.025em;
  margin: 0 0 0.75rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.biz-phone-block__content p {
  font-size: 0.97rem;
  color: #475467;
  line-height: 1.75;
  margin: 0;
}

.biz-phone-block__icon {
  width: 100px; height: 100px;
  border-radius: 1.25rem;
  background: rgba(84,197,208,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #54c5d0;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .biz-phone-intro__card { grid-template-columns: 1fr; }
  .biz-phone-block { grid-template-columns: 1fr; }
  .biz-phone-block--alt { grid-template-columns: 1fr; }
  .biz-phone-block__icon { display: none; }
  .biz-phone-intro { padding: 2rem 0; }
  .biz-phone-section { padding: 2.5rem 0; }
}

/* =========================================================
   BUSINESS PHONE HARDWARE PAGE  (template-business-phone-hardware)
   ========================================================= */

/* Hero */
.bph-hero { background: var(--nl-blue-900); color: #fff; overflow: hidden; }
.bph-hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; gap: 0; }
.bph-hero__content { display: flex; flex-direction: column; justify-content: center; padding: 4rem 3rem 4rem 0; }
.bph-hero__eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nl-accent); margin-bottom: 1rem; display: block; }
.bph-hero__title { font-size: clamp(1.9rem, 3.5vw, 2.75rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin-bottom: 1.25rem; }
.bph-hero__desc { font-size: 1.05rem; color: rgba(255,255,255,0.75); line-height: 1.7; margin-bottom: 2rem; max-width: 500px; }
.bph-hero__actions { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-bottom: 2rem; }
.bph-hero__trust { display: flex; flex-direction: column; gap: 0.5rem; }
.bph-hero__trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.7); }
.bph-hero__trust-item svg { color: var(--nl-accent); flex-shrink: 0; }
.bph-hero__visual { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--nl-blue-800) 0%, var(--nl-blue-700) 100%); }
.bph-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; }
.bph-hero__badge { position: absolute; bottom: 1.5rem; left: 1.5rem; background: rgba(11,31,58,0.85); backdrop-filter: blur(6px); color: #fff; font-size: 0.8rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: var(--nl-radius-full); display: flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(255,255,255,0.15); }
.bph-hero__badge svg { color: var(--nl-accent); }

/* Feature strip */
.bph-strip { background: #fff; border-bottom: 1px solid var(--nl-gray-200); }
.bph-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.bph-strip__item { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 2rem; border-right: 1px solid var(--nl-gray-200); }
.bph-strip__item:last-child { border-right: none; }
.bph-strip__icon { width: 44px; height: 44px; border-radius: var(--nl-radius-md); background: var(--nl-blue-50); color: var(--nl-blue-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bph-strip__label { font-size: 0.75rem; color: var(--nl-gray-500); font-weight: 500; }
.bph-strip__value { font-size: 0.95rem; font-weight: 700; color: var(--nl-blue-900); }

/* Overview section */
.bph-overview__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.bph-overview__text p { color: var(--nl-gray-600); line-height: 1.8; margin-bottom: 1rem; }
.section-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nl-accent); display: block; margin-bottom: 0.75rem; }
.section-eyebrow--light { color: rgba(255,255,255,0.6); }
.section-title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; color: var(--nl-blue-900); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 1.25rem; }

/* Feature cards */
.bph-overview__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bph-feat-card { display: flex; align-items: flex-start; gap: 1rem; background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-lg); padding: 1.25rem; transition: box-shadow 0.2s, border-color 0.2s; }
.bph-feat-card:hover { box-shadow: var(--nl-shadow-md); border-color: var(--nl-blue-200); }
.bph-feat-card__icon { width: 40px; height: 40px; border-radius: var(--nl-radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bph-feat-card__icon--blue { background: var(--nl-blue-50); color: var(--nl-blue-600); }
.bph-feat-card__icon--orange { background: var(--nl-accent-light); color: var(--nl-accent); }
.bph-feat-card__title { font-size: 0.9rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.25rem; }
.bph-feat-card__desc { font-size: 0.82rem; color: var(--nl-gray-500); line-height: 1.5; }

/* Durability section */
.bph-durability { background: linear-gradient(135deg, var(--nl-blue-900) 0%, var(--nl-blue-700) 100%); color: #fff; padding: 5rem 0; overflow: hidden; }
.bph-durability__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: center; }
.bph-durability__visual { display: flex; align-items: center; justify-content: center; }
.bph-durability__img { max-width: 320px; width: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4)); }
.bph-durability__content h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #fff; margin-bottom: 1.25rem; }
.bph-durability__content p { color: rgba(255,255,255,0.75); line-height: 1.8; margin-bottom: 2rem; }
.bph-durability__checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.bph-durability__check { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9rem; color: rgba(255,255,255,0.85); font-weight: 500; }
.bph-durability__check svg { color: var(--nl-accent); flex-shrink: 0; }

/* Use cases */
.bph-usecases__head { text-align: center; margin-bottom: 3rem; }
.bph-usecases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.bph-usecase-card { background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 2rem 1.75rem; text-align: center; transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; }
.bph-usecase-card:hover { box-shadow: var(--nl-shadow-lg); transform: translateY(-3px); border-color: var(--nl-blue-200); }
.bph-usecase-card__icon { width: 64px; height: 64px; border-radius: var(--nl-radius-lg); background: var(--nl-blue-50); color: var(--nl-blue-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; border: 1px solid var(--nl-blue-100); }
.bph-usecase-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.625rem; }
.bph-usecase-card p { font-size: 0.9rem; color: var(--nl-gray-500); line-height: 1.65; }

/* Responsive */
@media (max-width: 1024px) {
  .bph-hero__inner { grid-template-columns: 1fr; min-height: auto; }
  .bph-hero__content { padding: 3.5rem 0 2rem; }
  .bph-hero__visual { height: 340px; }
  .bph-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .bph-strip__item:nth-child(2) { border-right: none; }
  .bph-overview__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .bph-durability__inner { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .bph-durability__checklist { justify-items: start; display: inline-grid; }
}
@media (max-width: 768px) {
  .bph-strip__grid { grid-template-columns: 1fr 1fr; }
  .bph-strip__item { padding: 1.25rem; }
  .bph-overview__cards { grid-template-columns: 1fr; }
  .bph-usecases__grid { grid-template-columns: 1fr; }
  .bph-durability__checklist { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .bph-strip__grid { grid-template-columns: 1fr; }
  .bph-strip__item { border-right: none; border-bottom: 1px solid var(--nl-gray-200); }
  .bph-strip__item:last-child { border-bottom: none; }
}

/* =========================================================
   BUSINESS PHONE SOFTWARE PAGE  (template-business-phone-software)
   ========================================================= */

/* Shared eyebrow */
.bps-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: block; margin-bottom: 0.875rem; }
.bps-eyebrow--dark { color: var(--nl-accent); }

/* Hero */
.bps-hero { background: linear-gradient(135deg, var(--nl-blue-900) 0%, #0d2d5e 60%, var(--nl-blue-700) 100%); padding: 5rem 0 4rem; overflow: hidden; }
.bps-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.bps-hero__title { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin-bottom: 1.25rem; }
.bps-hero__desc { font-size: 1.05rem; color: rgba(255,255,255,0.72); line-height: 1.75; margin-bottom: 2rem; }
.bps-hero__actions { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-bottom: 2rem; }
.bps-hero__platforms { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.bps-platform-tag { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.875rem; border-radius: var(--nl-radius-full); border: 1px solid rgba(255,255,255,0.15); }

/* Hero visual — browser-style frame */
.bps-hero__visual { position: relative; }
.bps-hero__screen { background: var(--nl-blue-800); border-radius: var(--nl-radius-xl); overflow: hidden; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 32px 64px rgba(0,0,0,0.4); }
.bps-hero__screen-bar { background: rgba(255,255,255,0.06); padding: 0.6rem 1rem; display: flex; gap: 6px; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.08); }
.bps-hero__screen-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.bps-hero__screen-img { width: 100%; display: block; object-fit: cover; max-height: 320px; }
.bps-hero__float-card { position: absolute; background: #fff; border-radius: var(--nl-radius-lg); padding: 0.625rem 1rem; font-size: 0.8rem; font-weight: 600; color: var(--nl-blue-900); display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2); white-space: nowrap; }
.bps-hero__float-card svg { color: var(--nl-accent); flex-shrink: 0; }
.bps-hero__float-card--top { top: -1rem; right: -1rem; }
.bps-hero__float-card--bottom { bottom: 1.5rem; left: -1.5rem; }

/* Capabilities grid */
.bps-caps__head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.bps-caps__head h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; color: var(--nl-blue-900); letter-spacing: -0.02em; margin-bottom: 0.875rem; }
.bps-caps__head p { color: var(--nl-gray-500); line-height: 1.7; }
.bps-caps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.bps-cap-item { background: #fff; border: 1px solid var(--nl-gray-200); border-radius: var(--nl-radius-xl); padding: 1.75rem 1.5rem; transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; }
.bps-cap-item:hover { box-shadow: 0 8px 32px rgba(26,95,180,0.1); transform: translateY(-3px); border-color: var(--nl-blue-200); }
.bps-cap-item__icon { width: 52px; height: 52px; border-radius: var(--nl-radius-md); background: var(--nl-blue-50); color: var(--nl-blue-600); display: flex; align-items: center; justify-content: center; margin-bottom: 1.125rem; border: 1px solid var(--nl-blue-100); }
.bps-cap-item h3 { font-size: 0.975rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.5rem; }
.bps-cap-item p { font-size: 0.875rem; color: var(--nl-gray-500); line-height: 1.65; }

/* Scale section */
.bps-scale { background: var(--nl-blue-900); padding: 5rem 0; }
.bps-scale__inner { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 4rem; align-items: start; }
.bps-scale__divider { background: rgba(255,255,255,0.12); align-self: stretch; }
.bps-scale__panel-icon { width: 56px; height: 56px; border-radius: var(--nl-radius-lg); background: rgba(26,95,180,0.35); color: var(--nl-blue-300); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; border: 1px solid rgba(26,95,180,0.4); }
.bps-scale__panel h3 { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 0.875rem; letter-spacing: -0.01em; }
.bps-scale__panel p { color: rgba(255,255,255,0.68); line-height: 1.75; margin-bottom: 1.5rem; }
.bps-scale__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.bps-scale__list li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9rem; color: rgba(255,255,255,0.8); font-weight: 500; }
.bps-scale__list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--nl-accent); flex-shrink: 0; }

/* Workflow steps */
.bps-workflow__head { text-align: center; margin-bottom: 3rem; }
.bps-workflow__head h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; color: var(--nl-blue-900); letter-spacing: -0.02em; }
.bps-workflow__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.bps-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1.5rem; position: relative; }
.bps-step__num { width: 48px; height: 48px; border-radius: 50%; background: var(--nl-blue-600); color: #fff; font-size: 1rem; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 1; flex-shrink: 0; box-shadow: 0 4px 12px rgba(26,95,180,0.35); }
.bps-step__line { position: absolute; top: 24px; left: calc(50% + 24px); right: calc(-50% + 24px); height: 2px; background: var(--nl-blue-200); z-index: 0; }
.bps-step__line--last { display: none; }
.bps-step__body { margin-top: 1.25rem; }
.bps-step__body h4 { font-size: 0.975rem; font-weight: 700; color: var(--nl-blue-900); margin-bottom: 0.5rem; }
.bps-step__body p { font-size: 0.85rem; color: var(--nl-gray-500); line-height: 1.65; }

/* Responsive */
@media (max-width: 1024px) {
  .bps-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .bps-hero__float-card--top { top: 0.5rem; right: 0.5rem; }
  .bps-hero__float-card--bottom { bottom: 1rem; left: 0.5rem; }
  .bps-caps__grid { grid-template-columns: repeat(2, 1fr); }
  .bps-scale__inner { grid-template-columns: 1fr; gap: 3rem; }
  .bps-scale__divider { display: none; }
  .bps-workflow__steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .bps-step__line { display: none; }
}
@media (max-width: 640px) {
  .bps-caps__grid { grid-template-columns: 1fr; }
  .bps-workflow__steps { grid-template-columns: 1fr; }
  .bps-hero__float-card { display: none; }
}


/* =========================================================
   RESIDENTIAL TV HERO — lighter professional treatment
   ========================================================= */
.tv-hero {
  background:
    radial-gradient(circle at 72% 35%, rgba(88, 207, 212, 0.20), transparent 24rem),
    linear-gradient(135deg, #f7fbff 0%, #eef6fb 52%, #ffffff 100%) !important;
  color: var(--nl-gray-900, #111827);
}

/* Make the moving poster/mosaic background visible without making the hero dark */
.tv-hero__mosaic {
  opacity: 1 !important;
  filter: none;
}

.tv-poster,
.tv-tile {
  opacity: 1;
  border-color: rgba(255,255,255, 0.08) !important;
  box-shadow: none;
}

.tv-poster__label,
.tv-tile {
  color: rgba(255,255,255,0.85) !important;
}

.tv-hero__overlay {
  background:
    linear-gradient(
      to right,
      rgba(5,15,35,1) 0%,
      rgba(5,15,35,1) 42%,
      rgba(5,15,35,0.85) 52%,
      rgba(5,15,35,0.3) 68%,
      rgba(5,15,35,0.0) 80%
    );
}
/* Use NetLayers blue typography instead of white-on-dark */
.tv-hero__eyebrow,
.tv-hero__badge {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15, 61, 122, 0.16) !important;
  color: var(--nl-blue-700, #0f3d7a) !important;
  box-shadow: 0 10px 24px rgba(8, 42, 89, 0.06);
}

.tv-hero__dot,
.tv-hero__badge-dot {
  background: #58cfd4 !important;
}

.tv-hero__title {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
}

.tv-hero__title span {
  color: #60a5fa !important;
}

.tv-hero__desc,
.tv-hero__text {
  color: var(--nl-gray-600, #4b5563) !important;
}

.tv-btn-primary {
  background: var(--nl-blue-600, #1a5fb4) !important;
  border-color: var(--nl-blue-600, #1a5fb4) !important;
  color: #ffffff !important;
}

.tv-btn-primary:hover {
  background: var(--nl-blue-700, #0f3d7a) !important;
  border-color: var(--nl-blue-700, #0f3d7a) !important;
}

.tv-btn-ghost {
  background: rgba(255,255,255,0.65) !important;
  color: var(--nl-blue-700, #0f3d7a) !important;
  border-color: rgba(15, 61, 122, 0.28) !important;
}

.tv-btn-ghost:hover {
  border-color: rgba(15, 61, 122, 0.52) !important;
  background: #ffffff !important;
}

.tv-hero__chips span {
  background: rgba(255,255,255,0.76) !important;
  border-color: rgba(15, 61, 122, 0.14) !important;
  color: var(--nl-gray-700, #374151) !important;
  box-shadow: 0 8px 20px rgba(8, 42, 89, 0.05);
}

/* Keep the TV mockup rich enough to still read as a streaming product */
.tv-mockup {
  filter: drop-shadow(0 24px 42px rgba(8, 42, 89, 0.18));
}

@media (max-width: 700px) {
  .tv-hero__overlay {
    background: rgba(255,255,255,0.90) !important;
  }

  .tv-hero__mosaic {
    opacity: 0.30 !important;
  }
}


/* =========================================================
   RESIDENTIAL TV — replace remaining orange bars/accent elements with NetLayers blue
   ========================================================= */
.tv-hero__title span,
.tv-mockup__playing,
.tv-mockup__show-label {
  color: var(--nl-blue-600, #1a5fb4) !important;
}

.tv-btn-primary,
.tv-mockup__badge,
.tv-package-card__header,
.tv-channel-package__header,
.tv-theme-card__header,
.tv-feature-bar,
.tv-feature-strip,
.tv-stats-section,
.tv-info-bar,
.tv-banner-bar,
.tv-tabs__item--active,
.tv-tab--active {
  background: var(--nl-blue-600, #1a5fb4) !important;
  border-color: var(--nl-blue-600, #1a5fb4) !important;
  color: #ffffff !important;
}

.tv-btn-primary:hover {
  background: var(--nl-blue-700, #0f3d7a) !important;
  border-color: var(--nl-blue-700, #0f3d7a) !important;
}

.tv-hero__dot,
.tv-hero__badge-dot,
.tv-tabs__item--active::after,
.tv-tab--active::after {
  background: var(--nl-blue-600, #1a5fb4) !important;
}

.tv-hero__chips span,
.tv-btn-ghost {
  border-color: rgba(26, 95, 180, 0.28) !important;
}

/* Common orange fallback values used in the Residential TV template */
[style*="var(--nl-blue-600, #1a5fb4)"],
[style*="var(--nl-blue-700, #0f3d7a)"],
[style*="orange"] {
  color: var(--nl-blue-600, #1a5fb4) !important;
  border-color: var(--nl-blue-600, #1a5fb4) !important;
}


/* =========================================================
   RESIDENTIAL TV — exact stats bar blue override
   Screenshot bar: 250+ / 1000s / HD / $0 / 0
   ========================================================= */
.tv-stats-bar,
.tv-stats-section {
  background: linear-gradient(90deg, #082a59 0%, #0f3d7a 55%, #1a5fb4 100%) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.tv-stats-inner,
.tv-stats-grid {
  background: transparent !important;
}

.tv-stat-item strong,
.tv-stat strong {
  color: #ffffff !important;
}

.tv-stat-item span,
.tv-stat span {
  color: rgba(255, 255, 255, 0.78) !important;
}

.tv-stat-sep,
.tv-stat-divider {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* =========================================================
   RURAL INTERNET HERO — cleaned photo placement
   Keeps the image inside the right panel so it does not collide
   with the text area. Added as final override for this page only.
   ========================================================= */
.rural-ts-hero {
  background: #f4f6fb !important;
  padding: 0 0 2.25rem !important;
}

.rural-ts-hero .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.rural-ts-hero__wrap {
  max-width: 1200px !important;
  min-height: 430px !important;
  max-height: none !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(390px, 0.94fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 55%, #1a5fad 100%) !important;
  box-shadow: 0 14px 38px rgba(11, 31, 58, 0.14) !important;
}

.rural-ts-hero__content {
  min-width: 0 !important;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.65rem, 4vw, 2.75rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 3 !important;
}

.rural-ts-hero__title {
  margin: 0 0 1rem !important;
  color: #ffffff !important;
  font-size: clamp(2.45rem, 4.35vw, 4.15rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
}

.rural-ts-hero__title span {
  color: #54c5d0 !important;
}

.rural-ts-hero__text {
  max-width: 38rem !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.rural-ts-hero__chips span {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(6px);
}

.rural-ts-hero__visual {
  position: relative !important;
  display: block !important;
  align-self: stretch !important;
  min-height: 430px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 52% 24%, rgba(84, 197, 208, 0.26) 0%, rgba(84, 197, 208, 0.10) 26%, transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.rural-ts-hero__visual::before {
  content: "";
  position: absolute;
  inset: 2rem 1.4rem 1.2rem 1rem;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.14);
  z-index: 0;
}

.rural-ts-hero__visual::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -22%;
  width: 72%;
  height: 55%;
  border-radius: 999px;
  background: rgba(84, 197, 208, 0.16);
  filter: blur(2px);
  z-index: 0;
}

.rural-ts-hero__person {
  position: absolute !important;
  right: clamp(-1rem, -1.4vw, -0.35rem) !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  width: min(94%, 545px) !important;
  height: auto !important;
  max-height: 104% !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  display: block !important;
  z-index: 2 !important;
  filter: drop-shadow(0 18px 32px rgba(3, 14, 30, 0.20)) !important;
}

@media (max-width: 1100px) {
  .rural-ts-hero__wrap {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
  }

  .rural-ts-hero__content {
    padding: 2.1rem 1.55rem 1.55rem !important;
  }

  .rural-ts-hero__visual {
    min-height: 360px !important;
  }

  .rural-ts-hero__visual::before {
    inset: 1rem !important;
  }

  .rural-ts-hero__person {
    right: 50% !important;
    transform: translateX(50%) !important;
    width: min(78%, 420px) !important;
    max-height: 360px !important;
  }
}

@media (max-width: 760px) {
  .rural-ts-hero {
    padding-bottom: 1.4rem !important;
  }

  .rural-ts-hero__title {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  .rural-ts-hero__visual {
    min-height: 285px !important;
  }

  .rural-ts-hero__person {
    width: min(88%, 315px) !important;
    max-height: 285px !important;
  }
}

/* =========================================================
   RURAL INTERNET HERO — no-photo version
   Keeps this page clean without the cutout image colliding with the blue panel.
   ========================================================= */
.rural-ts-hero.rural-ts-hero--no-photo {
  background: #f4f6fb !important;
  padding: 0 !important;
}

.rural-ts-hero.rural-ts-hero--no-photo .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.rural-ts-hero.rural-ts-hero--no-photo .rural-ts-hero__wrap {
  display: block !important;
  grid-template-columns: 1fr !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  min-height: auto !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  padding: clamp(2.5rem, 5vw, 4.2rem) clamp(1.5rem, 5vw, 4.5rem) !important;
  background:
    radial-gradient(circle at 84% 24%, rgba(84, 197, 208, 0.26) 0 0, rgba(84, 197, 208, 0.22) 0 14%, transparent 30%),
    radial-gradient(circle at 94% 88%, rgba(48, 123, 219, 0.34) 0 0, rgba(48, 123, 219, 0.22) 0 16%, transparent 34%),
    linear-gradient(135deg, #0b1f3a 0%, #0f3d7a 56%, #1a5fad 100%) !important;
  box-shadow: 0 8px 30px rgba(11, 31, 58, 0.15) !important;
}

.rural-ts-hero.rural-ts-hero--no-photo .rural-ts-hero__content {
  width: 100% !important;
  max-width: 760px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
}

.rural-ts-hero.rural-ts-hero--no-photo .rural-ts-hero__visual,
.rural-ts-hero.rural-ts-hero--no-photo .rural-ts-hero__person {
  display: none !important;
}

.rural-ts-hero.rural-ts-hero--no-photo .rural-ts-hero__title {
  max-width: 720px !important;
}

.rural-ts-hero.rural-ts-hero--no-photo .rural-ts-hero__text {
  max-width: 670px !important;
}

.rural-ts-hero.rural-ts-hero--no-photo .rural-ts-hero__chips {
  max-width: 760px !important;
}

@media (max-width: 760px) {
  .rural-ts-hero.rural-ts-hero--no-photo .rural-ts-hero__wrap {
    padding: 2.25rem 1.2rem !important;
  }

  .rural-ts-hero.rural-ts-hero--no-photo .rural-ts-hero__actions {
    align-items: stretch !important;
  }

  .rural-ts-hero.rural-ts-hero--no-photo .rural-ts-hero__actions .btn {
    width: 100% !important;
  }
}


/* =========================================================
   RESIDENTIAL TV HERO — readability cleanup
   Final override for the Residential TV hero only.
   ========================================================= */
.tv-hero {
  min-height: 540px !important;
  background:
    radial-gradient(circle at 78% 34%, rgba(84, 197, 208, 0.18), transparent 25rem),
    linear-gradient(135deg, #041326 0%, #061b36 48%, #f7fbff 100%) !important;
  overflow: hidden !important;
}

.tv-hero__mosaic {
  opacity: 0.52 !important;
  filter: saturate(0.85) contrast(0.9) brightness(0.8) !important;
}

.tv-poster {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.tv-poster__label {
  color: rgba(255, 255, 255, 0.48) !important;
}

.tv-hero__overlay {
  background:
    linear-gradient(
      90deg,
      rgba(4, 13, 28, 0.98) 0%,
      rgba(4, 13, 28, 0.97) 38%,
      rgba(4, 13, 28, 0.82) 56%,
      rgba(4, 13, 28, 0.28) 76%,
      rgba(247, 251, 255, 0.70) 100%
    ) !important;
}

.tv-hero__inner {
  min-height: 540px !important;
  padding: 3.7rem 0 3.6rem !important;
  gap: 2.75rem !important;
}

.tv-hero__content {
  max-width: 560px !important;
  position: relative !important;
  z-index: 3 !important;
}

.tv-hero__eyebrow,
.tv-hero__badge {
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: none !important;
}

.tv-hero__dot,
.tv-hero__badge-dot {
  background: #54c5d0 !important;
}

.tv-hero__title {
  max-width: 620px !important;
  color: #ffffff !important;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.32) !important;
  margin-bottom: 1rem !important;
}

.tv-hero__title span {
  color: #5ecfe0 !important;
}

.tv-hero__desc,
.tv-hero__text {
  max-width: 500px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.65 !important;
  margin-bottom: 1.55rem !important;
}

.tv-hero__actions {
  margin-bottom: 1.25rem !important;
}

.tv-btn-primary {
  background: #1a5fb4 !important;
  border-color: #1a5fb4 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(26, 95, 180, 0.26) !important;
}

.tv-btn-primary:hover {
  background: #0f3d7a !important;
  border-color: #0f3d7a !important;
}

.tv-btn-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.48) !important;
  box-shadow: none !important;
}

.tv-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  color: #ffffff !important;
}

.tv-hero__chips span {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: none !important;
}

.tv-hero__visual {
  position: relative !important;
  z-index: 2 !important;
}

.tv-mockup {
  max-width: 430px !important;
  transform: translateY(0.4rem) !important;
  filter: drop-shadow(0 24px 42px rgba(5, 15, 35, 0.28)) !important;
}

.tv-mockup__screen {
  border-color: rgba(255, 255, 255, 0.20) !important;
  background: #080d18 !important;
}

.tv-mockup__playing,
.tv-mockup__show-label {
  color: #54c5d0 !important;
}

@media (max-width: 1024px) {
  .tv-hero,
  .tv-hero__inner {
    min-height: auto !important;
  }

  .tv-hero__inner {
    padding: 3.2rem 0 !important;
  }

  .tv-hero__overlay {
    background: rgba(4, 13, 28, 0.92) !important;
  }
}

@media (max-width: 700px) {
  .tv-hero__mosaic {
    opacity: 0.28 !important;
  }

  .tv-hero__title {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
  }

  .tv-hero__chips {
    display: none !important;
  }
}


/* =========================================================
   PARTNER LOGO MARQUEE (v3.2)
   ========================================================= */
.partner-marquee {
  padding: 3rem 0 3.5rem;
  background: #fff;
  border-top: 1px solid var(--nl-gray-200);
  overflow: hidden;
}
.partner-marquee__title {
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--nl-blue-600);
  margin-bottom: 1.75rem;
}
.partner-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partner-marquee__track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  padding: 0 1.75rem;
  margin: 0;
  list-style: none;
  animation: partnerMarquee var(--marquee-duration, 45s) linear infinite;
}
.partner-marquee__viewport:hover .partner-marquee__track,
.partner-marquee__viewport:focus-within .partner-marquee__track {
  animation-play-state: paused;
}
.partner-marquee__item { flex: 0 0 auto; }
.partner-marquee__item img {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.65);
  transition: filter 0.2s ease;
}
.partner-marquee__item:hover img { filter: none; }
@keyframes partnerMarquee { to { transform: translateX(-50%); } }
@keyframes partnerMarqueeRtl { to { transform: translateX(50%); } }
html[dir="rtl"] .partner-marquee__track { animation-name: partnerMarqueeRtl; }
@media (prefers-reduced-motion: reduce) {
  .partner-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 2rem 3rem; }
  .partner-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
  .partner-marquee__item[aria-hidden="true"] { display: none; }
}

/* === NETLAYERS MOBILE LAYER — BEGIN (v1.1.0) === */
/* ==========================================================================
   NetLayers v3 — Mobile & Tablet Layer                       v1.1.0 · 2026-10-06
   --------------------------------------------------------------------------
   Scope     Viewports ≤ 1100px only (the theme's hamburger range). Desktop
             (≥ 1101px) is untouched: every rule lives in a max-width query.
   Tiers     tablet ≤ 1100px · stacked hero ≤ 900px · phone ≤ 767px ·
             compact phone ≤ 389px
   Override  Selectors carry an 'html body' prefix (+0,0,2 specificity) so they
             win over equal-class rules in style.css AND in the page templates'
             inline <style> blocks, which are parsed after style.css.
             '!important' is used only against inline style="" attributes, one
             theme rule that is itself !important, and one ID-scoped plugin
             rule (iOS input zoom).
   Content   Layout and styling only. No text, image or logo is changed.
   Guidelines  Vercel Web Interface Guidelines (touch, focus, safe areas,
             text-wrap, tabular numbers, reduced motion) + WCAG 2.2 target size.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root {
    --nlm-gutter: 20px;
    --nlm-tap: 44px;              /* minimum comfortable touch target          */
    --nlm-topbar-h: 48px;
    --nlm-header-h: 72px;
    --nlm-ring: #82b8ed;          /* --nl-blue-300: focus ring on light + dark */
    --nlm-line-dark: rgba(255, 255, 255, 0.18);
    --nlm-safe-b: env(safe-area-inset-bottom, 0px);
    --nlm-safe-r: env(safe-area-inset-right, 0px);
    --nlm-float-edge: max(14px, calc(var(--nlm-safe-r) + 10px));
    --nlm-float-base: max(14px, calc(var(--nlm-safe-b) + 10px));
  }
}
@media (max-width: 767px) {
  :root {
    --nlm-topbar-h: 44px;
    --nlm-header-h: 60px;
  }
}
@media (max-width: 389px) {
  :root { --nlm-gutter: 16px; }
}


/* --------------------------------------------------------------------------
   1. Global mobile hygiene
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  html {
    /* Anchor jumps land below the sticky header instead of under it. */
    scroll-padding-top: calc(var(--nlm-header-h) + 12px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* No double-tap zoom delay; a deliberate, on-brand tap flash. */
  html body :is(a, button, [role="button"], input, select, textarea, label, summary) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(26, 95, 180, 0.18);
  }

  /* Visible keyboard focus everywhere (several theme rules remove outlines). */
  html body :is(a, button, [role="button"], input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--nlm-ring);
    outline-offset: 2px;
  }

  /* Balanced headings: no orphaned last word on narrow screens. */
  html body :is(h1, h2, h3) { text-wrap: balance; }
  html body p { text-wrap: pretty; }

  /* iOS Safari zooms the whole page when a focused field is under 16px.
     !important: the chat widget sizes its field with an ID selector. */
  html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea) {
    font-size: max(16px, 1em) !important;
  }

  /* Drawer: keep its scroll from chaining into the page; clear the home bar. */
  html body .mobile-nav-drawer {
    overscroll-behavior: contain;
    padding-bottom: var(--nlm-safe-b);
  }
}

@media (max-width: 389px) {
  html body .container {
    padding-left: var(--nlm-gutter);
    padding-right: var(--nlm-gutter);
  }
}


/* --------------------------------------------------------------------------
   2. Top bar — one slim row instead of five stacked rows
      tablet : switcher · email · phone · EN · ON
      phone  : switcher · ✉ · ☎   (EN / ON live in the ☰ drawer as
               "Language" and "Location", which already exist there)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  html body .site-topbar { padding: 0; }

  html body .site-topbar__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--nlm-topbar-h);
  }

  html body .site-topbar__left {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    flex-direction: row;
    align-items: center;
  }

  html body .section-switcher {
    width: auto;
    flex: 0 1 auto;
    justify-content: flex-start;
  }

  html body .section-switcher__link {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 32px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  html body .site-topbar .topbar-links {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    width: auto;
  }

  html body .topbar-contact {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }

  html body .topbar-contact a {
    min-height: 40px;
    padding: 0 8px;
    align-items: center;
  }

  html body .site-topbar .toolbar-dropdown { width: auto; flex: 0 0 auto; }

  html body .site-topbar .toolbar-dropdown__toggle {
    width: auto;
    min-height: 36px;
    padding: 0 10px;
    gap: 6px;
  }
}

@media (max-width: 767px) {
  html body .site-topbar .toolbar-dropdown { display: none; }

  html body .section-switcher { padding: 3px; }

  html body .section-switcher__link {
    padding: 0 12px;
    font-size: 13px;
  }

  /* Email + phone become 40px icon buttons. The address and number stay in
     the DOM (clipped, not removed), so both links keep their accessible
     names and tel:/mailto: behaviour. */
  html body .topbar-contact a,
  html body .topbar-contact--inline a,
  html body .topbar-contact--inline a + a {
    position: relative;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    padding-inline-start: 10px;   /* centres the 18px icon in LTR and RTL (Persian) */
    gap: 40px;
    justify-content: flex-start;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid var(--nlm-line-dark);
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  html body .topbar-contact a:hover,
  html body .topbar-contact a:active {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
  }

  html body .topbar-contact--inline a + a::before { display: none; }

  html body .topbar-contact svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: 0.95;
  }
}

@media (max-width: 389px) {
  html body .section-switcher__link { padding: 0 10px; }
  html body .site-topbar__inner { gap: 8px; }
}


/* --------------------------------------------------------------------------
   3. Header — compact sticky bar, logo at its true proportions
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  html body .site-header__inner {
    height: var(--nlm-header-h);
    min-height: var(--nlm-header-h);
    gap: 12px;
  }

  /* The theme fixed the height but let max-width squeeze the width, which
     stretched the logo sideways (389×100 source shown at 129×66). */
  html body :is(.custom-logo, .site-logo__img) {
    height: 52px;
    max-height: 52px;
    width: auto;
    max-width: none;
    object-fit: contain;
  }

  html body .custom-logo-link {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
  }

  html body .mobile-nav-toggle {
    width: var(--nlm-tap);
    height: var(--nlm-tap);
    padding: 10px;
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  html body :is(.custom-logo, .site-logo__img) {
    height: clamp(30px, 9.6vw, 40px);
    max-height: none;
  }

  html body .site-header__inner { gap: 8px; }

  html body .nav-cta { margin-left: auto; }

  html body .nav-cta .btn {
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 10px;
    white-space: nowrap;
  }
}


/* --------------------------------------------------------------------------
   4. Home hero
      ≤ 900px (theme's stacked hero): stable height, photo band, controls
      on the photo. ≤ 767px: phone typography and full-width CTAs.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* All slides share one grid cell, so the hero keeps the height of its
     tallest slide and auto-rotation never shifts the page underneath (CLS). */
  html body .fp-hero {
    display: grid;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  /* Outgoing slide hides at once and the incoming one fades in, so two
     headlines never overlap mid-transition. */
  html body .fp-hero__slide,
  html body .fp-hero__slide:not(.is-active),
  html body .fp-hero__slide.is-leaving {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    position: relative;
    inset: auto;
    min-height: 0;
    transform: none;
    visibility: hidden;
    opacity: 0;
    transition: none;
  }

  html body .fp-hero__slide.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.35s ease;
  }

  /* Copy keeps its natural height; the photo band absorbs any extra space.
     The image is taken out of flow so its intrinsic height can't inflate
     the band (a 3:2 photo was making the tablet hero 937px tall). */
  html body .fp-hero__slide-content { flex: 0 0 auto; }

  html body .fp-hero__slide-photo {
    position: relative;
    overflow: hidden;
    flex: 1 0 auto;
    height: auto;
    min-height: 240px;
    max-height: none;
  }

  html body .fp-hero__slide-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Prev · dots · next sit together on the photo band, never on the copy. */
  html body .fp-hero__arrow {
    top: auto;
    bottom: 12px;
    width: 40px;
    height: 40px;
    transform: none;
  }

  html body .fp-hero__arrow:active { transform: scale(0.94); }
  html body .fp-hero__arrow--prev { left: calc(50% - 112px); right: auto; }
  html body .fp-hero__arrow--next { right: calc(50% - 112px); left: auto; }

  html body .fp-hero__dots {
    top: auto;
    bottom: 22px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    gap: 0;
  }

  /* Dots keep their 10px look but get a 24 × 28px hit box (WCAG 2.5.8). */
  html body .fp-hero__dot {
    box-sizing: content-box;
    padding: 9px 7px;
    background-clip: content-box;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html body .fp-hero__slide,
  html body .fp-hero__slide.is-active { transition: none; }
}

/* Tablet landscape keeps the side-by-side hero; four stats in its narrow
   copy column wrapped word-by-word ("Whole- / Home"), so use 2 × 2. */
@media (min-width: 901px) and (max-width: 1100px) {
  html body .fp-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }

  html body .fp-hero__dots { gap: 0; }

  html body .fp-hero__dot {
    box-sizing: content-box;
    padding: 9px 7px;
    background-clip: content-box;
  }
}

@media (max-width: 767px) {
  html body .fp-hero__slide-content {
    justify-content: flex-start;
    padding: 24px var(--nlm-gutter);
  }

  html body .fp-hero__slide-photo { min-height: 50vw; }   /* ≥ 2:1 band */

  /* Badge reads as a quiet line, not another pill. */
  html body .fp-hero__badge {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 12px;
    gap: 8px;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
  }

  /* Sized so the longest first line ("Residential Internet") always fits:
     measured 9.46em wide in Inter 900 — no mid-word or mid-hyphen breaks. */
  html body .fp-hero__title {
    font-size: clamp(26px, calc((100vw - 40px) / 10.2), 36px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
  }

  /* Own block so text-wrap: balance can work on the second line
     (Chrome does not balance across the <br> that precedes it). */
  html body .fp-hero__title > span { display: block; }

  html body .fp-hero__lead {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 16px;
  }

  html body .fp-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    padding-top: 16px;
    margin-bottom: 22px;
  }

  html body .fp-hero__stat-value {
    font-size: 22px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  html body .fp-hero__stat-label {
    font-size: 12.5px;
    line-height: 1.35;
    margin-top: 4px;
  }

  html body .fp-hero__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 0;
  }

  html body .fp-hero__btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    border-radius: 12px;
  }
}


/* --------------------------------------------------------------------------
   5. Home sections
   -------------------------------------------------------------------------- */

/* 5a. Client portal — compact tiles: 3 across on tablets, 2 on phones. */
@media (max-width: 1100px) {
  /* Greedy wrapping keeps "SELF-SERVE" together; balance split it at the hyphen. */
  html body .res-feature-hub__title {
    text-wrap: wrap;
    max-width: 340px;
  }

  html body :is(.res-feature-hub__cards, .portal-cta__cards) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  html body :is(.res-feature-card, .portal-cta__card) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "icon arrow"
      "title title";
    align-content: space-between;
    align-items: start;
    row-gap: 12px;
    min-width: 0;
    min-height: 104px;
    height: auto;
    padding: 14px;
    border-radius: 14px;
    text-align: left;
  }

  html body :is(.res-feature-card__icon, .portal-cta__card-icon) {
    grid-area: icon;
    width: 36px;
    height: 36px;
    margin: 0;
  }

  html body :is(.res-feature-card__icon, .portal-cta__card-icon) svg {
    width: 18px;
    height: 18px;
  }

  html body :is(.res-feature-card__title, .portal-cta__card-label) {
    grid-area: title;
    width: auto;
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  html body :is(.res-feature-card__arrow, .portal-cta__card-arrow) {
    grid-area: arrow;
    position: static;
    width: 28px;
    height: 28px;
    margin: 0;
  }

  /* Business tiles link only the arrow: stretch its hit area to the tile. */
  html body .portal-cta__card-arrow::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
}

@media (max-width: 767px) {
  html body .res-feature-hub__title {
    max-width: none;
    font-size: clamp(26px, 7.4vw, 32px);
    line-height: 1.05;
  }

  html body :is(.res-feature-hub__cards, .portal-cta__cards) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 767px) {

  /* 5b. "Services for Every Connection" — one card per row, icon beside copy.
         (The cards are styled inline, hence !important.) */
  html body .section--path-choice .section-header + div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html body .section--path-choice .path-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 22px 20px !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  html body .section--path-choice .path-card > div:nth-child(2) {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  html body .section--path-choice .path-card > div:nth-child(2) svg {
    width: 24px;
    height: 24px;
  }

  html body .section--path-choice .path-card > :is(h3, p, span) { grid-column: 2; }

  html body .section--path-choice .path-card > h3 {
    font-size: 20px !important;
    margin: 2px 0 6px !important;
  }

  html body .section--path-choice .path-card > p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 0 10px !important;
  }

  html body .section--path-choice .path-card > span {
    justify-self: start;
    min-height: 32px;
  }

  /* 5c. Commitment — icon beside copy, stats as a 2 × 2 grid. */
  html body .feature-grid--commitment { gap: 12px; }

  html body .feature-item--commitment {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    text-align: left;
  }

  html body .feature-item--commitment .feature-item__icon {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    margin: 0;
  }

  html body .feature-item--commitment .feature-item__title {
    margin: 2px 0 4px;
    font-size: 16px;
  }

  html body .feature-item--commitment .feature-item__text {
    margin: 0;
    max-width: none;
    font-size: 14px;
    line-height: 1.5;
  }

  html body .commitment-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  html body .commitment-stat { padding-left: 0; padding-right: 0; }
  html body .commitment-stat__value { font-variant-numeric: tabular-nums; }

  /* 5d. Hardware tiles — shorter photo tiles (photo is absolutely placed). */
  html body .bundle-highlight-card { min-height: 200px; }

  /* 5e. Call-to-action band — full-width, equal buttons. */
  html body .cta-band__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }

  html body .cta-band__actions .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
}


/* --------------------------------------------------------------------------
   6. Footer — two link columns, real touch targets, no stray separators
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html body .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 28px;
  }

  html body .site-footer .footer-grid > :is(.footer-brand, .footer-social-col) { grid-column: 1 / -1; }

  html body .site-footer :is(.footer-links, .footer-contact-list) { gap: 4px; }

  html body .site-footer .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    min-width: 44px;
  }

  html body .site-footer .footer-social-icons { gap: 10px; }

  html body .site-footer .footer-social-icons a {
    width: var(--nlm-tap);
    height: var(--nlm-tap);
  }

  html body .site-footer .footer-social-icons a svg {
    width: 18px;
    height: 18px;
  }

  html body .site-footer .footer-contact-list a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  html body .site-footer .footer-bottom__links {
    column-gap: 20px;
    row-gap: 4px;
  }

  html body .site-footer .footer-bottom__links a {
    min-height: 32px;
    padding-left: 0;
    border-left: 0;
  }

  html body .site-footer .footer-bottom__links a + a::before {
    content: none;
    display: none;
  }

  /* Leave room so the floating chat button never covers the legal links. */
  html body .site-footer .footer-bottom { padding-bottom: calc(76px + var(--nlm-safe-b)); }
}


/* --------------------------------------------------------------------------
   7. Inner pages — components that overflowed or crushed text on phones
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Stat strips (text-messaging, bundles, domains, home phone, …) used
     '1fr 1fr' with 32px side padding, so long labels pushed the page sideways. */
  html body [class*="-strip__grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body [class*="-strip__item"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 18px 14px;
    border-right: 0;
  }

  html body [class*="-strip__item"] > * { min-width: 0; }

  html body [class*="-strip__icon"] {
    width: 36px;
    height: 36px;
  }

  html body [class*="-strip__label"] { font-size: 12px; }

  /* Support: search bar fits its column; guide tabs as a 2-column grid. */
  html body .support-hero__inner > * { min-width: 0; }
  html body .support-hero__search { max-width: 100%; }
  html body .support-hero__search input { min-width: 0; flex: 1 1 auto; }

  html body .guide-tab-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  html body .guide-tab {
    min-height: 40px;
    white-space: normal;
  }

  /* Contact: one card per row, icon beside the details. */
  html body .contact-info-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  html body .contact-info-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    text-align: left;
    padding: 18px;
  }

  html body .contact-info-card__icon {
    grid-row: 1 / span 4;
    width: 48px;
    height: 48px;
    margin: 0;
  }

  html body .contact-info-card > :not(.contact-info-card__icon) {
    grid-column: 2;
    margin-left: 0;
    margin-right: 0;
  }

  html body :is(.contact-info-card__value, .contact-info-card__note) { overflow-wrap: anywhere; }

  html body #cf-consent {
    width: 24px;
    height: 24px;
  }

  html body :is(a.contact-info-card__value, a.contact-info-card__note, a.nl-detail-value) {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  html body #dom-inp { min-height: 40px; }

  /* Fax: the five-step flow is a sequence — one step per row. */
  html body .fax-flow.fax-flow { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 389px) {
  /* Single-column grids whose 1fr track could not shrink below its content. */
  html body :is(.ws-ssl-hero__grid, .about-overview-split) { grid-template-columns: minmax(0, 1fr); }
  html body :is(.ws-ssl-hero__grid, .about-overview-split) > * { min-width: 0; }
  html body .ws-ssl-trust { flex-wrap: wrap; }

  html body .mc-stats__row { grid-template-columns: minmax(0, 1fr); }

  html body .dc-plan { flex-wrap: wrap; }
  html body .dc-plan > :not(.dc-plan__icon) { flex: 1 1 150px; min-width: 0; }
}

@media (max-width: 359px) {
  html body [class*="-strip__grid"] { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   7b. Readability floor — phones and tablets (≤ 1100px)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Labels and tags that rendered at 9.4–11.8px. */
  html body :is(
    .bundle-highlight-card__badge, .audience-badge, .guide-time, .troubleshoot-card__label,
    .download-item__cat, .voice-console__label, .voice-brand__eyebrow, .sms2-vis__tag,
    .biz-did-diagram__arrow-down, .biz-np-card-vis__label, .biz-np-card-vis__status,
    .fax-visual__status, .fax-brand__eyebrow, .fax-plan__badge, .dom-split__over,
    .dc-plan__badge, .dc-band__tag, .dc-light-tag, .ws-browser__url, .ws-band__tag,
    .ws-ssl-trust__https, .ws-serp__label, .ws-lband__tag, .about-hero-stat__label,
    .biz-bun-visual__label, .biz-bun-card__badge, .biz-bun-promo__tag,
    .cancellation-info-card__header, .contact-info-card__label,
    .support-chip
  ) {
    font-size: 12px;
  }

  /* The theme sets this label to 0.7rem with !important. */
  html body .contact-info-card .contact-info-card__label { font-size: 12px !important; }

  html body .guide-btn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  html body nav[class*="breadcrumb"] a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}

/* --------------------------------------------------------------------------
   8. Floating widgets — chat, back-to-top, consent banner
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html body #nl-chat-root {
    right: var(--nlm-float-edge);
    bottom: var(--nlm-float-base);
  }

  html body #nl-chat-bubble {
    width: 52px;
    height: 52px;
  }

  /* The chat bubble (z 99999) sat on top of the open ☰ drawer (z 800). */
  html body:has(.mobile-nav-drawer.is-open) #nl-chat-root {
    visibility: hidden;
    pointer-events: none;
  }

  /* Back-to-top stacks above the chat bubble instead of overlapping it. */
  html body #back-to-top {
    right: calc(var(--nlm-float-edge) + 4px);
    bottom: calc(var(--nlm-float-base) + 64px);
  }

  html body #nl-cookie-banner { padding-bottom: var(--nlm-safe-b); }
}


/* --------------------------------------------------------------------------
   9. Tablet refinements (768–1100px) — readable sizes, real touch targets
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {
  html body .site-topbar .topbar-contact a { font-size: 13px; }
  html body .site-header .nav-cta .btn { font-size: 14px; }
  html body .site-footer .footer-col__title { font-size: 12px; }
  html body .site-footer .footer-social-col__desc { font-size: 13px; }

  html body .site-footer :is(.footer-links, .footer-contact-list, .footer-bottom__links) a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    min-width: 44px;
  }

  html body :is(.fp-hero__stat-label, .trust-item__sub, .portal-eyebrow) {
    font-size: 12px;
  }
}

@media (max-width: 1100px) {
  /* Footer logo is never stretched: same box, image fitted inside it. */
  html body .footer-brand__logo-img { object-fit: contain; }
}
/* === NETLAYERS MOBILE LAYER — END === */

/* === NETLAYERS PARTNER LOGOS IN COLOUR — BEGIN (v1.0.0) === */
/* Partner logos in their original brand colours on every screen size
   (the theme drew them grayscale at 65% opacity). Requested 2026-10-07. */
html body .partner-marquee__item img,
html body .partner-marquee__item:hover img {
  filter: none;
  opacity: 1;
}
/* === NETLAYERS PARTNER LOGOS IN COLOUR — END === */

/* === NETLAYERS PARTNER STRIP — NO TITLE — BEGIN (v1.0.0) === */
/* Hide the "Technology partners we work with" line above the partner logos
   (requested 2026-10-07). The section keeps that text as its aria-label,
   so screen readers still announce what the strip is. */
html body .partner-marquee__title { display: none; }
html body .partner-marquee { padding-top: 36px; padding-bottom: 36px; }
/* === NETLAYERS PARTNER STRIP — NO TITLE — END === */

/* === NETLAYERS NAV LABELS — BEGIN (2026-10-08) ===
   Top-level header menu: one size, weight and colour for all four labels.
   The dropdown buttons (Services, About Us, Support) reset to weight 400
   through `font: inherit`, so only Contact Us looked bold, and every label
   was 12.6px grey. Requested 2026-10-08: a little larger and clearer.
   Hover, open and current states keep the theme blue.
   Rollback: delete this block. */
html body .primary-nav .nav-menu > .nav-item > .nav-link {
	color: var(--nl-gray-900, #111827);
	font-size: 1rem;
	font-weight: 600;
}

html body .primary-nav .nav-menu > .nav-item > .nav-link .caret {
	font-size: 0.65rem;
	opacity: 0.7;
}

html body .primary-nav .nav-menu > .nav-item > .nav-link:hover,
html body .primary-nav .nav-menu > .nav-item--has-mega:hover > .nav-link,
html body .primary-nav .nav-menu > .nav-item > .nav-link[aria-expanded="true"],
html body .primary-nav .nav-menu > .nav-item > .nav-link.is-current,
html body .primary-nav .nav-menu > .nav-item.current-menu-item > .nav-link,
html body .primary-nav .nav-menu > .nav-item.current_page_item > .nav-link {
	color: var(--nl-blue-600, #1a5fb4);
}
/* === NETLAYERS NAV LABELS — END === */

/* === NETLAYERS FOOTER LOGO — BEGIN (2026-10-08) ===
   Footer cloud logo ~20% larger (116px -> 140px tall) while the footer keeps
   its exact height at every breakpoint. The PNG carries transparent padding
   (about 7% top, 16% bottom), so the extra 24px is absorbed by negative
   margins on the wrapper: 10px rises into the column top edge and 14px comes
   out of the gap above the text. Rollback: delete this block. */
html body .site-footer .footer-brand__logo {
	margin: -10px 0 calc(0.7rem - 14px);
}

html body .site-footer .footer-brand__logo img,
html body .site-footer .footer-brand__logo-img {
	height: 140px;
}
/* === NETLAYERS FOOTER LOGO — END === */

/* ~~~ NETLAYERS HEADER ACCOUNT BUTTON — BEGIN (2026-10-08) ~~~
   "My Account" in the header is a little bigger on tablet and desktop
   (768px and wider): 14px text in a 42px box with 20px side padding. On
   desktop it was 0.79rem (about 12px) in a 36px box, smaller than the 15px
   menu labels; on tablet it was 36-40px tall. Colour, corners and hover
   are unchanged, and the header keeps its height. Phones (767px and
   narrower) keep their 40px button.
   Rollback: delete this block. */
@media (min-width: 768px) {
	html body .site-header .nav-cta .btn {
		min-height: 42px;
		padding-inline: 20px;
		font-size: 14px;
	}
}
/* ~~~ NETLAYERS HEADER ACCOUNT BUTTON — END ~~~ */

/* ~~~ NETLAYERS PHOTO BAND — BEGIN (2026-10-09) ~~~
   One relevant real photo under the hero of the Data Centre, Web Solutions
   and Bundles pages, printed by $nl_band_photo() in each template. It spans
   the content column as a wide rounded frame (4:3 on phones). Where CSS
   scroll-driven animations exist it rises into place and the photo eases
   out of a slight zoom as you scroll; under reduced motion it stays still.
   Rollback: delete this block; the markup then shows a plain image. */
.nl-photo-band {
	/* Room above and below so the frame never touches a neighbouring band. */
	padding-block: clamp(24px, 4vw, 48px) clamp(32px, 5vw, 64px);
}
.nl-photo-band__frame {
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: #e6edf6;
	box-shadow: 0 28px 56px -30px rgba(11, 31, 58, 0.5);
}
.nl-photo-band__frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 8;
	object-fit: cover;
}
@media (max-width: 767px) {
	.nl-photo-band__frame {
		border-radius: 16px;
	}
	.nl-photo-band__frame img {
		aspect-ratio: 4 / 3;
	}
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.nl-photo-band__frame {
			animation: nl-band-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
		}
		.nl-photo-band__frame img {
			animation: nl-band-settle linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}
@keyframes nl-band-rise {
	from { opacity: 0.4; transform: translateY(28px) scale(0.98); }
	to { opacity: 1; transform: none; }
}
@keyframes nl-band-settle {
	from { transform: scale(1.1); }
	to { transform: scale(1); }
}
/* ~~~ NETLAYERS PHOTO BAND — END ~~~ */

/* ~~~ NETLAYERS BUSINESS HOME FIXES — BEGIN (2026-10-09) ~~~
   1. Light section titles: a later duplicate ".section-title" rule (navy)
      overrode ".section-title--light" (white), so every heading on a dark
      band was navy on navy and invisible: "Built for Reliable Business
      Connectivity" on the Business homepage and the Residential dark band.
      Two classes beat one, whatever the order.
   2. Portal title: Inter like every other heading, in sentence case,
      instead of Oswald capitals.
   3. Hero labels: coloured line icons in place of emoji (markup in
      template-home-business.php).
   Rollback: delete this block. */
.section-title.section-title--light {
	color: var(--nl-white, #fff);
}

html body .section--portal-cta .res-feature-hub__title {
	font-family: var(--nl-font);
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: none;
	text-wrap: balance;
}

.fp-hero__badge-icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
}

.fp-hero__badge-icon--blue { background: rgba(96, 165, 250, 0.22); color: #93c5fd; }
.fp-hero__badge-icon--green { background: rgba(74, 222, 128, 0.2); color: #86efac; }
.fp-hero__badge-icon--violet { background: rgba(167, 139, 250, 0.24); color: #c4b5fd; }
.fp-hero__badge-icon--amber { background: rgba(251, 191, 36, 0.2); color: #fcd34d; }

/* On tablets and up the label is a pill and the icon sits at its left edge,
   so that side needs less padding. Phones show the label without a pill. */
@media (min-width: 768px) {
	.fp-hero__badge:has(.fp-hero__badge-icon) {
		padding-left: 0.4rem;
	}
}
/* ~~~ NETLAYERS BUSINESS HOME FIXES — END ~~~ */

/* =========================================================
   NETLAYERS SERVICES BENTO — BEGIN (2026-10-09, v3)
   Photo tiles for the services on the Business and Residential
   homepages (ul.nl-bento > li.nl-bento__item > a.nl-bento__tile).
   Each tile is one link: photo, title, one line, arrow chip.
   Sizes: --xl (2x2), --wide (2x1), default (1x1); --fill spans
   the full row once the grid drops to two columns. A tile can set
   its photo's focal point with style="--nl-bento-pos: X Y". Motion uses
   transform/opacity/scale/translate only and switches off under
   reduced motion. Rollback: delete this block.
   ========================================================= */
ul.nl-bento {
	--nl-bento-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 210px;
	gap: 16px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
@supports (transition-timing-function: linear(0, 1)) {
	ul.nl-bento {
		/* Damped spring, about 8% overshoot. */
		--nl-bento-spring: linear(0, 0.069, 0.228, 0.422, 0.613, 0.778, 0.906, 0.995, 1.05, 1.077, 1.083, 1.077, 1.063, 1.047, 1.031, 1.018, 1.007, 1, 0.996, 0.993, 0.993, 0.994, 0.995, 0.996, 0.998, 0.999, 1);
	}
}
.nl-bento > .nl-bento__item {
	min-width: 0;
	margin: 0;
	padding: 0;
}
.nl-bento > .nl-bento__item::before,
.nl-bento > .nl-bento__item::marker {
	content: none;
}
.nl-bento__item--xl {
	grid-row: span 2;
	grid-column: span 2;
}
.nl-bento__item--wide {
	grid-column: span 2;
}

.nl-bento .nl-bento__tile,
.nl-bento .nl-bento__tile:hover,
.nl-bento .nl-bento__tile:focus {
	color: #fff;
	text-decoration: none;
}
.nl-bento .nl-bento__tile {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
	border-radius: 20px;
	background: var(--nl-dark, #0b1f3a);
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.08), 0 18px 36px -24px rgba(11, 31, 58, 0.45);
	transition: translate 0.5s var(--nl-bento-spring), box-shadow 0.4s ease;
	-webkit-tap-highlight-color: transparent;
}
.nl-bento .nl-bento__tile img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--nl-bento-pos, 50% 50%);
	transition: scale 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Navy scrim: keeps the white title and line readable on any photo. */
.nl-bento .nl-bento__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(11, 31, 58, 0) 26%, rgba(11, 31, 58, 0.6) 58%, rgba(11, 31, 58, 0.94) 100%);
}
.nl-bento .nl-bento__body {
	position: absolute;
	right: 68px;
	bottom: 18px;
	left: 20px;
}
.nl-bento .nl-bento__title {
	margin: 0;
	padding: 0;
	color: #fff;
	font: 700 20px/1.15 var(--nl-font, Inter, system-ui, sans-serif);
	letter-spacing: -0.01em;
	text-transform: none;
	text-wrap: balance;
	text-shadow: 0 1px 3px rgba(11, 31, 58, 0.55);
}
.nl-bento .nl-bento__line {
	margin: 4px 0 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.94);
	font: 500 14px/1.35 var(--nl-font, Inter, system-ui, sans-serif);
}
.nl-bento .nl-bento__go {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.3s ease, color 0.3s ease, translate 0.5s var(--nl-bento-spring);
}
/* The big tile is tall and its text sits low: start its scrim lower so the photo stays bright. */
.nl-bento .nl-bento__item--xl .nl-bento__tile::after {
	background: linear-gradient(180deg, rgba(11, 31, 58, 0) 45%, rgba(11, 31, 58, 0.6) 72%, rgba(11, 31, 58, 0.94) 100%);
}
.nl-bento__item--xl .nl-bento__title {
	font-size: clamp(26px, 2.3vw, 34px);
}
.nl-bento__item--xl .nl-bento__line {
	font-size: 16px;
}
.nl-bento__item--xl .nl-bento__body {
	bottom: 24px;
	left: 26px;
}

/* Hover (pointer devices only): lift, slow photo zoom, arrow fills in. */
@media (hover: hover) {
	.nl-bento .nl-bento__tile:hover {
		translate: 0 -4px;
		box-shadow: 0 2px 4px rgba(11, 31, 58, 0.1), 0 28px 48px -26px rgba(11, 31, 58, 0.6);
	}
	.nl-bento .nl-bento__tile:hover img {
		scale: 1.06;
	}
	.nl-bento .nl-bento__tile:hover .nl-bento__go {
		background: #fff;
		color: var(--nl-dark, #0b1f3a);
		translate: 3px 0;
	}
}
.nl-bento .nl-bento__tile:active {
	translate: 0 -1px;
}
.nl-bento .nl-bento__tile:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}

/* Tiles rise in as they scroll into view (where CSS scroll timelines exist). */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.nl-bento > .nl-bento__item {
			animation: nl-bento-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}
@keyframes nl-bento-rise {
	from {
		opacity: 0;
		transform: translateY(28px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.nl-bento .nl-bento__tile,
	.nl-bento .nl-bento__tile img,
	.nl-bento .nl-bento__go {
		transition: none;
	}
}

/* Tablet: two columns; the big tile and any --fill tile take a full row. */
@media (max-width: 1100px) {
	ul.nl-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 200px;
	}
	.nl-bento__item--xl,
	.nl-bento__item--wide {
		grid-row: auto;
		grid-column: auto;
	}
	.nl-bento__item--xl,
	.nl-bento__item--fill {
		grid-column: span 2;
	}
}

/* Phones: compact two-column grid, titles only (the big tile keeps its line). */
@media (max-width: 767px) {
	ul.nl-bento {
		grid-auto-rows: 168px;
		gap: 10px;
	}
	.nl-bento .nl-bento__tile {
		border-radius: 16px;
	}
	.nl-bento .nl-bento__body {
		right: 14px;
		bottom: 14px;
		left: 14px;
	}
	.nl-bento .nl-bento__title {
		font-size: 16px;
	}
	.nl-bento .nl-bento__line,
	.nl-bento .nl-bento__go {
		display: none;
	}
	.nl-bento .nl-bento__item--xl .nl-bento__title {
		font-size: 24px;
	}
	.nl-bento .nl-bento__item--xl .nl-bento__line {
		display: block;
		font-size: 14px;
	}
	.nl-bento .nl-bento__item--xl .nl-bento__go {
		display: grid;
	}
	.nl-bento .nl-bento__item--xl .nl-bento__body {
		right: 64px;
	}
}
/* NETLAYERS SERVICES BENTO — END */

/* =========================================================
   NETLAYERS HEADER NAV OFFSET — BEGIN (2026-10-09)
   The primary menu (Services, About Us, Support, Contact Us) sits 40px
   further right of the logo on desktop, as the owner asked. The earlier
   rules pull it left with negative margins (-52px from 1024px, -18px between
   1024px and 1180px); these override them at the same breakpoints. The
   menu box is 44% wide with its items centred, so the account button does
   not move. Rollback: delete this block.
   ========================================================= */
@media (min-width: 1181px) {
	.site-header .primary-nav {
		margin-left: -12px;
	}
}
@media (min-width: 1024px) and (max-width: 1180px) {
	.site-header .primary-nav {
		margin-left: 22px;
	}
}
/* NETLAYERS HEADER NAV OFFSET — END */

/* =========================================================
   NETLAYERS PROOF CARD — BEGIN (2026-10-09)
   Business homepage: four facts in one white card that floats over the
   bottom edge of the hero (div.nl-proof > .container > ul.nl-proof__card).
   It replaces the five-item trust bar. The hero gets .fp-hero--has-proof,
   which lifts its dots and arrows clear of the card and drops the "Scroll"
   hint (the card itself leads the eye down).
   Numbers are printed in full; a small inline script in the template counts
   three of them up once, on a decorative copy (.nl-proof__tick), so the
   layout never shifts and screen readers only hear the final values.
   Rollback: delete this block (the template keeps working, unstyled).
   ========================================================= */
.fp-hero--has-proof,
.nl-proof {
	--nl-proof-overlap: 52px;
}

/* Hero: keep the slide controls above the card's overlap. */
.fp-hero--has-proof .fp-hero__scroll-hint {
	display: none;
}
.fp-hero--has-proof .fp-hero__dots {
	bottom: calc(var(--nl-proof-overlap) + 16px);
}

.nl-proof {
	--nl-proof-ink: #0b1f3a;
	position: relative;
	z-index: 12;
	margin-top: calc(-1 * var(--nl-proof-overlap));
}
ul.nl-proof__card {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1120px;
	margin: 0 auto;
	padding: 22px 6px;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(11, 31, 58, 0.06);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 28px 56px -28px rgba(11, 31, 58, 0.4);
}
.nl-proof__card > .nl-proof__item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	margin: 0;
	padding: 4px 24px;
}
.nl-proof__card > .nl-proof__item::before,
.nl-proof__card > .nl-proof__item::marker {
	content: none;
}
.nl-proof__card > .nl-proof__item + .nl-proof__item {
	border-left: 1px solid #e6ecf5;
}

/* Tone chips: the same palette as the portal cards. */
.nl-proof .nl-tone--blue { --nl-tone: #0566db; --nl-tone-bg: #e6f0ff; }
.nl-proof .nl-tone--green { --nl-tone: #15803d; --nl-tone-bg: #dcfce7; }
.nl-proof .nl-tone--amber { --nl-tone: #b45309; --nl-tone-bg: #fef3c7; }
.nl-proof .nl-tone--purple { --nl-tone: #7c3aed; --nl-tone-bg: #f3e8ff; }
.nl-proof__icon {
	display: grid;
	flex: none;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 14px;
	color: var(--nl-tone, #0566db);
	background: var(--nl-tone-bg, #e6f0ff);
}
.nl-proof__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.nl-proof__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.nl-proof__value {
	color: var(--nl-proof-ink);
	font: 800 30px/1.05 var(--nl-font, Inter, system-ui, sans-serif);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.nl-proof__unit {
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: 0;
}
.nl-proof__unit--gap {
	margin-left: 0.2em;
}
.nl-proof__label {
	margin-top: 4px;
	color: #475569;
	font: 500 14px/1.3 var(--nl-font, Inter, system-ui, sans-serif);
}
.nl-proof__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Count-up: the printed number keeps its width (transparent) while the copy
   on top counts, right-aligned so the unit after it never moves. */
.nl-proof__num {
	position: relative;
	display: inline-block;
}
.nl-proof__num.is-counting {
	color: transparent;
}
.nl-proof__tick {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--nl-proof-ink);
}

/* The card settles into place once, as the page opens. */
@media (prefers-reduced-motion: no-preference) {
	ul.nl-proof__card {
		animation: nl-proof-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
	}
}
@keyframes nl-proof-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Small laptops and tablets: same row of four, a little tighter. */
@media (max-width: 1100px) {
	.fp-hero--has-proof,
	.nl-proof {
		--nl-proof-overlap: 44px;
	}
	.nl-proof__card > .nl-proof__item {
		gap: 12px;
		padding: 4px 16px;
	}
	.nl-proof__icon {
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}
	.nl-proof__icon svg {
		width: 21px;
		height: 21px;
	}
	.nl-proof__value {
		font-size: 26px;
	}
	.nl-proof__label {
		font-size: 13px;
	}
}

/* Stacked hero (900px and below): the card becomes 2 x 2, and the slide
   arrows and dots, which sit on the photo band here, move up with it. */
@media (max-width: 900px) {
	.fp-hero--has-proof,
	.nl-proof {
		--nl-proof-overlap: 32px;
	}
	html body .fp-hero--has-proof .fp-hero__dots {
		bottom: calc(var(--nl-proof-overlap) + 22px);
	}
	html body .fp-hero--has-proof .fp-hero__arrow {
		bottom: calc(var(--nl-proof-overlap) + 12px);
	}
	ul.nl-proof__card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 4px;
		border-radius: 18px;
	}
	.nl-proof__card > .nl-proof__item {
		padding: 16px 18px;
	}
	.nl-proof__card > .nl-proof__item:nth-child(odd) {
		border-left: 0;
	}
	.nl-proof__card > .nl-proof__item:nth-child(n + 3) {
		border-top: 1px solid #e6ecf5;
	}
}

/* Phones: icon above the number, so each label fits on one line. */
@media (max-width: 600px) {
	.nl-proof__card > .nl-proof__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 16px;
	}
	.nl-proof__icon {
		width: 40px;
		height: 40px;
	}
	.nl-proof__icon svg {
		width: 20px;
		height: 20px;
	}
	.nl-proof__value {
		font-size: 24px;
	}
}
/* NETLAYERS PROOF CARD — END */

/* =========================================================
   NETLAYERS NETWORK MAP — BEGIN (2026-10-09)
   Business homepage, dark band (section.section--network): copy and four
   feature rows on the left, a Southern Ontario dot map on the right with
   the Markham hub and light pulses to the cities served. The map is an
   inline SVG in the template; its pulses are SMIL (animateMotion) and are
   hidden under reduced motion, where the hub ring also stops.
   Rollback: delete this block.
   ========================================================= */
.section--network {
	position: relative;
	overflow: hidden;
	padding: 3.25rem 0;
	background: radial-gradient(900px 520px at 78% 50%, rgba(37, 99, 235, 0.22), transparent 70%), var(--nl-blue-900, #0b1f3a);
}
.nl-net {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}
.nl-net__copy {
	min-width: 0;
}
.section--network .nl-net__title {
	margin: 0 0 10px;
	color: #fff;
	font: 800 clamp(26px, 2.9vw, 36px)/1.1 var(--nl-font, Inter, system-ui, sans-serif);
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.section--network .nl-net__lead {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.72);
	font: 400 16px/1.5 var(--nl-font, Inter, system-ui, sans-serif);
	text-wrap: pretty;
}
ul.nl-net__list {
	display: grid;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}
.nl-net__list > .nl-net__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 14px 8px 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	font: 600 16px/1.3 var(--nl-font, Inter, system-ui, sans-serif);
	transition: background-color 0.3s ease, border-color 0.3s ease, translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nl-net__list > .nl-net__item::before,
.nl-net__list > .nl-net__item::marker {
	content: none;
}
@media (hover: hover) {
	.nl-net__list > .nl-net__item:hover {
		translate: 4px 0;
		border-color: rgba(255, 255, 255, 0.16);
		background: rgba(255, 255, 255, 0.07);
	}
}
/* Tone chips, same hues as the proof card, dimmed for the dark band. */
.nl-net .nl-tone--blue { --nl-tone: #7fb0ff; --nl-tone-bg: rgba(37, 99, 235, 0.28); }
.nl-net .nl-tone--green { --nl-tone: #6ee7a0; --nl-tone-bg: rgba(21, 128, 61, 0.3); }
.nl-net .nl-tone--amber { --nl-tone: #fcd34d; --nl-tone-bg: rgba(180, 83, 9, 0.3); }
.nl-net .nl-tone--purple { --nl-tone: #c4b5fd; --nl-tone-bg: rgba(124, 58, 237, 0.3); }
.nl-net__chip {
	display: grid;
	flex: none;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 10px;
	color: var(--nl-tone);
	background: var(--nl-tone-bg);
}
.nl-net__chip svg {
	display: block;
	width: 20px;
	height: 20px;
}
.section--network .nl-net__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 999px;
	background: #fff;
	color: var(--nl-blue-900, #0b1f3a);
	font: 700 15px/1 var(--nl-font, Inter, system-ui, sans-serif);
	text-decoration: none;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
	transition: translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}
.section--network .nl-net__cta:hover {
	translate: 0 -2px;
	color: var(--nl-blue-900, #0b1f3a);
	box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.7);
}
.section--network .nl-net__cta:focus-visible,
.nl-net__list > .nl-net__item:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}

/* ---- Map */
.nl-net__map {
	position: relative;
	min-width: 0;
}
.nl-net__svg {
	display: block;
	width: 108%;
	max-width: none;
	height: auto;
	margin-left: -4%;
	overflow: visible;
}
.nl-net__svg text {
	font: 500 13px/1 var(--nl-font, Inter, system-ui, sans-serif);
	fill: rgba(255, 255, 255, 0.84);
	paint-order: stroke;
	stroke: var(--nl-blue-900, #0b1f3a);
	stroke-width: 3px;
	stroke-linejoin: round;
}
.nl-net__svg .nl-net__hub-label {
	font-size: 15px;
	font-weight: 700;
	fill: #fff;
}
.nl-net__svg .nl-net__hub-sub {
	font-size: 11.5px;
	fill: rgba(255, 255, 255, 0.62);
}
.nl-net__ring {
	transform-origin: 0 0;
	animation: nl-net-ring 2.6s ease-out infinite;
}
@keyframes nl-net-ring {
	0% {
		transform: scale(0.7);
		opacity: 0.9;
	}
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}
.nl-net__caption {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.55);
	font: 500 13px/1.4 var(--nl-font, Inter, system-ui, sans-serif);
	text-align: center;
}
@media (prefers-reduced-motion: reduce) {
	.nl-net__pulses {
		display: none;
	}
	.nl-net__ring {
		animation: none;
		opacity: 0.6;
	}
	.nl-net__list > .nl-net__item,
	.section--network .nl-net__cta {
		transition: none;
	}
}

/* Feature rows rise in as they scroll into view (where CSS scroll timelines exist). */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.nl-net__list > .nl-net__item {
			animation: nl-net-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}
}
@keyframes nl-net-rise {
	from {
		opacity: 0;
		transform: translateX(-14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Tablet and phone: map first, then the copy. */
@media (max-width: 900px) {
	.section--network {
		padding: 3rem 0;
		background: radial-gradient(640px 420px at 50% 22%, rgba(37, 99, 235, 0.22), transparent 70%), var(--nl-blue-900, #0b1f3a);
	}
	.nl-net {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.nl-net__map {
		order: -1;
		max-width: 560px;
		margin: 0 auto;
	}
	.nl-net__svg {
		width: 100%;
		margin-left: 0;
	}
	.nl-net__copy {
		text-align: center;
	}
	.nl-net__list > .nl-net__item {
		text-align: left;
	}
}
/* Phones: the map is about half size, so labels scale up and the ones packed
   around the GTA go, leaving Markham and the far cities. */
@media (max-width: 600px) {
	.section--network .nl-net__lead {
		font-size: 16px;
	}
	.nl-net__list > .nl-net__item {
		font-size: 15px;
	}
	.nl-net__svg text {
		font-size: 19px;
		stroke-width: 5px;
	}
	.nl-net__svg .nl-net__lbl--minor {
		display: none;
	}
	.nl-net__svg .nl-net__hub-label {
		font-size: 22px;
	}
	.nl-net__svg .nl-net__hub-sub {
		font-size: 16px;
	}
}
/* NETLAYERS NETWORK MAP — END */

/* =========================================================
   NETLAYERS PATH CARDS — BEGIN (2026-10-09)
   "Services for Every Connection" on both homepages: the two audience
   cards (div.nl-path > a.nl-path__card) now sit on photos (a home scene
   for Residential, an office for Business) under a navy gradient that
   keeps the copy readable. Same titles, copy and links as before; the old
   inline-styled .path-card markup is gone, so the phone rules that targeted
   it no longer apply. Rollback: delete this block.
   ========================================================= */
.nl-path {
	--nl-path-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}
@supports (transition-timing-function: linear(0, 1)) {
	.nl-path {
		--nl-path-spring: linear(0, 0.069, 0.228, 0.422, 0.613, 0.778, 0.906, 0.995, 1.05, 1.077, 1.083, 1.077, 1.063, 1.047, 1.031, 1.018, 1.007, 1, 0.996, 0.993, 0.993, 0.994, 0.995, 0.996, 0.998, 0.999, 1);
	}
}
.section--path-choice .nl-path__card,
.section--path-choice .nl-path__card:hover,
.section--path-choice .nl-path__card:focus {
	color: #fff;
	text-decoration: none;
}
.section--path-choice .nl-path__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	overflow: hidden;
	isolation: isolate;
	border-radius: 20px;
	background: var(--nl-blue-900, #0b1f3a);
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.08), 0 18px 36px -24px rgba(11, 31, 58, 0.45);
	transition: translate 0.5s var(--nl-path-spring), box-shadow 0.4s ease;
	-webkit-tap-highlight-color: transparent;
}
.nl-path__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.nl-path__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--nl-path-pos, 60% 50%);
	transition: scale 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The home photo's faces sit mid-frame; drawing it wider from the left edge
   moves them to the right of the card, out from under the copy. */
.nl-path__card--home .nl-path__photo img {
	width: 126%;
}
/* Navy from the left (copy side) fading to the photo, plus a light bottom scrim. */
.section--path-choice .nl-path__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(11, 31, 58, 0.97) 0%, rgba(11, 31, 58, 0.9) 36%, rgba(11, 31, 58, 0.55) 62%, rgba(11, 31, 58, 0.18) 100%),
		linear-gradient(0deg, rgba(11, 31, 58, 0.5) 0%, rgba(11, 31, 58, 0) 45%);
}
.nl-path__body {
	position: relative;
	max-width: 62%;
	padding: 2.5rem;
}
.nl-path__icon {
	display: grid;
	width: 56px;
	height: 56px;
	margin-bottom: 1.25rem;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: scale 0.45s var(--nl-path-spring);
}
.nl-path__icon svg {
	display: block;
	width: 26px;
	height: 26px;
}
.section--path-choice .nl-path__title {
	margin: 0 0 0.5rem;
	padding: 0;
	color: #fff;
	font: 900 1.5rem/1.15 var(--nl-font, Inter, system-ui, sans-serif);
	letter-spacing: -0.01em;
	text-shadow: 0 1px 3px rgba(11, 31, 58, 0.5);
}
.section--path-choice .nl-path__text {
	margin: 0 0 1.25rem;
	padding: 0;
	color: rgba(255, 255, 255, 0.84);
	font: 400 0.9375rem/1.6 var(--nl-font, Inter, system-ui, sans-serif);
	text-wrap: pretty;
}
.nl-path__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #fff;
	font: 700 0.9rem/1 var(--nl-font, Inter, system-ui, sans-serif);
}
.nl-path__link svg {
	transition: translate 0.5s var(--nl-path-spring);
}
@media (hover: hover) {
	.section--path-choice .nl-path__card:hover {
		translate: 0 -4px;
		box-shadow: 0 2px 4px rgba(11, 31, 58, 0.1), 0 28px 48px -26px rgba(11, 31, 58, 0.6);
	}
	.section--path-choice .nl-path__card:hover .nl-path__photo img {
		scale: 1.05;
	}
	.section--path-choice .nl-path__card:hover .nl-path__icon {
		scale: 1.06;
	}
	.section--path-choice .nl-path__card:hover .nl-path__link svg {
		translate: 3px 0;
	}
}
.section--path-choice .nl-path__card:active {
	translate: 0 -1px;
}
.section--path-choice .nl-path__card:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.section--path-choice .nl-path__card,
	.nl-path__photo img,
	.nl-path__icon,
	.nl-path__link svg {
		transition: none;
	}
}

/* Tablets: still two across, a little shorter; the copy takes more of the card. */
@media (max-width: 1100px) {
	.section--path-choice .nl-path__card {
		min-height: 280px;
	}
	.nl-path__body {
		max-width: 72%;
		padding: 2rem;
	}
}

/* Phones: one card per row, photo on top and the copy under a vertical scrim. */
@media (max-width: 767px) {
	.nl-path {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.section--path-choice .nl-path__card {
		min-height: 300px;
		border-radius: 16px;
	}
	.nl-path__photo img,
	.nl-path__card--home .nl-path__photo img {
		width: 100%;
		object-position: var(--nl-path-pos-phone, 50% 30%);
	}
	.section--path-choice .nl-path__card::after {
		background: linear-gradient(180deg, rgba(11, 31, 58, 0.12) 0%, rgba(11, 31, 58, 0.7) 42%, rgba(11, 31, 58, 0.97) 100%);
	}
	.nl-path__body {
		max-width: none;
		padding: 1.5rem 1.25rem 1.375rem;
	}
	.nl-path__icon {
		width: 44px;
		height: 44px;
		margin-bottom: 0.875rem;
	}
	.nl-path__icon svg {
		width: 22px;
		height: 22px;
	}
	.section--path-choice .nl-path__title {
		font-size: 1.3rem;
	}
	.section--path-choice .nl-path__text {
		margin-bottom: 1rem;
		font-size: 0.9rem;
	}
}
/* NETLAYERS PATH CARDS — END */

/* =========================================================
   NETLAYERS HERO BLEED — BEGIN (2026-10-09)
   Business homepage hero (section.fp-hero--bleed): on desktop the slide
   photo fills the whole hero behind the copy, with navy coming in from the
   left; the slide dots are named tabs with a progress line that matches the
   6s autoplay (main.js); the arrows sit bottom-right. Each slide change
   zooms the photo slowly and raises the copy in with a short stagger.
   Below 901px the theme's stacked layout and plain dots stay as they are.
   Reduced motion: no zoom, no rise, no progress line. Rollback: delete
   this block and the fp-hero--bleed class.
   ========================================================= */
@media (min-width: 901px) {
	.fp-hero--bleed .fp-hero__slide {
		display: block;
	}
	.fp-hero--bleed .fp-hero__slide-photo {
		position: absolute;
		inset: 0;
		flex: none;
		width: 100%;
		height: 100%;
	}
	.fp-hero--bleed .fp-hero__slide-photo img {
		object-position: 72% 30%;
		will-change: transform;
	}
	/* Navy from the copy side into the photo, plus a light foot so the tabs read. */
	.fp-hero--bleed .fp-hero__photo-blend {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
		background:
			linear-gradient(90deg, #0b1f3a 0%, rgba(11, 31, 58, 0.93) 24%, rgba(11, 31, 58, 0.6) 48%, rgba(11, 31, 58, 0.18) 72%, rgba(11, 31, 58, 0.05) 100%),
			linear-gradient(0deg, rgba(11, 31, 58, 0.5) 0%, rgba(11, 31, 58, 0) 40%);
	}
	.fp-hero--bleed .fp-hero__slide-content {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		width: 56%;
		max-width: 760px;
		justify-content: center;
		padding-bottom: 96px;
		background: none;
	}
	.fp-hero--bleed .fp-hero__title {
		max-width: 20ch;
		font-size: clamp(2.2rem, 3.4vw, 3.3rem);
	}
	.fp-hero--bleed .fp-hero__lead {
		max-width: 52ch;
	}

	/* ---- Tabs (the theme's dot buttons, with their labels shown) */
	.fp-hero--bleed .fp-hero__tabs {
		right: auto;
		bottom: calc(var(--nl-proof-overlap, 52px) + 26px);
		left: clamp(3rem, 5vw, 4.5rem);
		gap: 6px;
		transform: none;
	}
	.fp-hero--bleed .fp-hero__tab {
		position: relative;
		width: auto;
		height: auto;
		padding: 10px 14px 12px;
		overflow: hidden;
		border: 0;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.08);
		color: rgba(255, 255, 255, 0.72);
		font: 600 13px/1 var(--nl-font, Inter, system-ui, sans-serif);
		opacity: 1;
		cursor: pointer;
		transition: background-color 0.3s ease, color 0.3s ease;
	}
	.fp-hero--bleed .fp-hero__tab:hover {
		background: rgba(255, 255, 255, 0.14);
		color: #fff;
	}
	.fp-hero--bleed .fp-hero__tab.is-active {
		width: auto;
		background: rgba(255, 255, 255, 0.16);
		color: #fff;
	}
	.fp-hero--bleed .fp-hero__tab:focus-visible {
		outline: 2px solid #7fb0ff;
		outline-offset: 2px;
	}
	.fp-hero--bleed .fp-hero__tab::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background: #7fb0ff;
		transform: scaleX(0);
		transform-origin: left;
	}
	.fp-hero--bleed .fp-hero__tab.is-active::after {
		animation: nl-hero-progress 6s linear both;
	}
	/* main.js pauses autoplay on hover and focus; the line pauses with it. */
	.fp-hero--bleed:hover .fp-hero__tab.is-active::after,
	.fp-hero--bleed:focus-within .fp-hero__tab.is-active::after {
		animation-play-state: paused;
	}

	/* ---- Arrows: bottom-right, on the photo */
	.fp-hero--bleed .fp-hero__arrow {
		top: auto;
		bottom: calc(var(--nl-proof-overlap, 52px) + 30px);
		width: 44px;
		height: 44px;
		transform: none;
	}
	.fp-hero--bleed .fp-hero__arrow--prev {
		right: 84px;
		left: auto;
	}
	.fp-hero--bleed .fp-hero__arrow--next {
		right: 28px;
	}

	/* ---- Motion on each slide change */
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__slide-photo img {
		animation: nl-hero-zoom 9s ease-out both;
	}
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__badge {
		animation: nl-hero-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s both;
	}
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__title {
		animation: nl-hero-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
	}
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__lead {
		animation: nl-hero-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.26s both;
	}
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__actions {
		animation: nl-hero-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.36s both;
	}
}
@keyframes nl-hero-zoom {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.06);
	}
}
@keyframes nl-hero-progress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
@keyframes nl-hero-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__slide-photo img,
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__badge,
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__title,
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__lead,
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__actions,
	.fp-hero--bleed .fp-hero__tab.is-active::after {
		animation: none;
	}
	.fp-hero--bleed .fp-hero__tab.is-active::after {
		transform: scaleX(1);
	}
}
/* Stacked hero: the tabs go back to being dots. */
@media (max-width: 900px) {
	.fp-hero--bleed .fp-hero__tab-label {
		display: none;
	}
}
/* NETLAYERS HERO BLEED — END */

/* =========================================================
   NETLAYERS HARDWARE LINKS — BEGIN (2026-10-09)
   "Need Extra Hardware?" on the Business homepage: the three tiles are
   links now (a.bundle-highlight-card.nl-hw) with an arrow chip, so they
   read as clickable; each goes to the hardware on its product page.
   Rollback: delete this block.
   ========================================================= */
a.bundle-highlight-card.nl-hw,
a.bundle-highlight-card.nl-hw:hover,
a.bundle-highlight-card.nl-hw:focus {
	display: block;
	color: inherit;
	text-decoration: none;
}
a.bundle-highlight-card.nl-hw:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}
.nl-hw .nl-hw__go {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.3s ease, color 0.3s ease, translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) {
	.nl-hw:hover .nl-hw__go {
		background: #fff;
		color: var(--nl-blue-900, #0b1f3a);
		translate: 3px 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.nl-hw .nl-hw__go {
		transition: none;
	}
}
/* NETLAYERS HARDWARE LINKS — END */

/* =========================================================
   NETLAYERS REVIEW PASS — BEGIN (2026-10-09)
   Fixes from running the Impeccable craft floor and Emil Kowalski's
   animation standards over the Business homepage:
   - one authored opening moment (hero rise, proof card settle and count),
     so the bento tiles and the network rows no longer animate in on scroll;
   - hero copy stagger tightened to 70ms steps;
   - hover lifts settle in 400ms instead of 500ms;
   - press feedback on the Talk to Sales pill and the hero tabs;
   - text selection themed from the palette instead of the browser default.
   Rollback: delete this block.
   ========================================================= */
@supports (animation-timeline: view()) {
	.nl-bento > .nl-bento__item,
	.nl-net__list > .nl-net__item {
		animation: none;
	}
}
@media (min-width: 901px) {
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__title {
		animation-delay: 0.08s;
	}
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__lead {
		animation-delay: 0.15s;
	}
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__actions {
		animation-delay: 0.22s;
	}
	.fp-hero--bleed .fp-hero__tab {
		transition: background-color 0.3s ease, color 0.3s ease, scale 0.16s ease-out;
	}
	.fp-hero--bleed .fp-hero__tab:active {
		scale: 0.96;
	}
}
.nl-bento .nl-bento__tile,
.section--path-choice .nl-path__card {
	transition-duration: 0.4s;
}
.section--network .nl-net__cta {
	transition: translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, scale 0.16s ease-out;
}
.section--network .nl-net__cta:active {
	translate: 0;
	scale: 0.97;
}
::selection {
	background: var(--nl-blue-600, #1d4ed8);
	color: #fff;
}
@media (prefers-reduced-motion: reduce) {
	.fp-hero--bleed .fp-hero__tab,
	.section--network .nl-net__cta {
		transition: none;
	}
}
/* NETLAYERS REVIEW PASS — END */

/* =========================================================
   NETLAYERS CRITIQUE PASS — BEGIN (2026-10-10)
   Fixes from the Impeccable critique and the animation review of the
   Business homepage:
   - hero: slides crossfade in place (no 60px slide), the outgoing copy
     drops out in 150ms before the new copy rises, the photo drift runs for
     the length of a slide, and the tab progress line runs only while the
     show is actually advancing (main.js adds .is-autoplaying);
   - a pause/play control in the tab row; a live region for slide changes;
   - one contact action: filled pill, 15px, real focus rings on the hero
     buttons and arrows, press feedback;
   - portal cards are whole-card links; hardware cards drop transition: all
     and get a stronger scrim under the title; hover lifts settle in 250ms;
     the network pill's hover is gated to pointers; back-to-top hides on
     phones so the thumb zone holds one control.
   Rollback: delete this block (and main.js keeps working without it).
   ========================================================= */

/* ---- Hero: one transformation per slide change (desktop bleed layout) */
@media (min-width: 901px) {
	.fp-hero--bleed .fp-hero__slide,
	.fp-hero--bleed .fp-hero__slide.is-leaving,
	.fp-hero--bleed .fp-hero__slide.is-active {
		transform: none;
		transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.5s;
	}
	.fp-hero--bleed .fp-hero__slide-content {
		transition: opacity 0.15s ease-out;
	}
	.fp-hero--bleed .fp-hero__slide:not(.is-active) .fp-hero__slide-content {
		opacity: 0;
	}
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__title {
		animation: nl-hero-rise 0.55s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
	}
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__lead {
		animation: nl-hero-rise 0.55s cubic-bezier(0.23, 1, 0.32, 1) 0.27s both;
	}
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__actions {
		animation: nl-hero-rise 0.55s cubic-bezier(0.23, 1, 0.32, 1) 0.34s both;
	}
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__note {
		animation: nl-hero-rise 0.55s cubic-bezier(0.23, 1, 0.32, 1) 0.41s both;
	}
	/* Constant drift for the length of one slide. */
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__slide-photo img {
		animation: nl-hero-zoom 6s linear both;
	}
	/* The progress line only runs while the show is advancing. */
	.fp-hero--bleed .fp-hero__tab.is-active::after {
		transform: scaleX(0);
		animation: none;
	}
	.fp-hero--bleed.is-autoplaying .fp-hero__tab.is-active::after {
		animation: nl-hero-progress 6s linear both;
	}
	.fp-hero--bleed.is-autoplaying:hover .fp-hero__tab.is-active::after,
	.fp-hero--bleed.is-autoplaying:focus-within .fp-hero__tab.is-active::after {
		animation-play-state: paused;
	}
}

/* ---- Pause / play: sits at the end of the tab row (dots on phones) */
.fp-hero .fp-hero__pause {
	position: relative;
	display: inline-grid;
	width: 36px;
	height: 36px;
	flex: none;
	margin-left: 4px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.3s ease, scale 0.16s ease-out;
}
/* 44px hit area around the 36px control. */
.fp-hero .fp-hero__pause::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
}
.fp-hero .fp-hero__pause:hover {
	background: rgba(255, 255, 255, 0.18);
}
.fp-hero .fp-hero__pause:active {
	scale: 0.94;
}
.fp-hero .fp-hero__pause:focus-visible {
	outline: 2px solid #7fb0ff;
	outline-offset: 2px;
}
.fp-hero .fp-hero__pause[hidden] {
	display: none;
}
.fp-hero .fp-hero__pause-icon {
	display: block;
	width: 14px;
	height: 14px;
}
.fp-hero .fp-hero__pause-icon--pause,
.fp-hero.is-autoplaying .fp-hero__pause-icon--play {
	display: none;
}
.fp-hero.is-autoplaying .fp-hero__pause-icon--pause {
	display: block;
}
@media (max-width: 900px) {
	.fp-hero .fp-hero__pause {
		width: 32px;
		height: 32px;
	}
	.fp-hero .fp-hero__pause::before {
		inset: -6px;
	}
}
/* Screen readers hear the new slide's title; nobody sees this box. */
.fp-hero .fp-hero__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- One contact action: filled pill, readable size, real focus, press */
.fp-hero--bleed .fp-hero__btn {
	padding: 0.8rem 1.6rem;
	border-radius: 999px;
	font-size: 15px;
	letter-spacing: 0;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease-out, box-shadow 0.2s ease, scale 0.16s ease-out;
}
.fp-hero--bleed .fp-hero__btn:active {
	scale: 0.97;
}
.fp-hero--bleed .fp-hero__btn:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}
.fp-hero .fp-hero__arrow:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}
.fp-hero .fp-hero__note {
	margin: 12px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font: 500 13px/1.4 var(--nl-font, Inter, system-ui, sans-serif);
}
@media (max-width: 767px) {
	.fp-hero .fp-hero__note {
		text-align: center;
	}
}
.cta-band .cta-band__actions .btn {
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, scale 0.16s ease-out;
}
.cta-band .cta-band__actions .btn:active {
	scale: 0.97;
}

/* ---- Proof card: static numbers, lined up like a table */
.nl-proof__num {
	font-variant-numeric: tabular-nums;
}

/* ---- Portal cards: the whole card is the link */
a.portal-cta__card,
a.portal-cta__card:hover,
a.portal-cta__card:focus {
	color: inherit;
	text-decoration: none;
}
a.portal-cta__card {
	cursor: pointer;
	transform: none;
	transition: box-shadow 0.3s ease, border-color 0.2s ease, translate 0.25s cubic-bezier(0.23, 1, 0.32, 1), scale 0.16s ease-out;
}
a.portal-cta__card:hover {
	transform: none;
}
a.portal-cta__card .portal-cta__card-arrow {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, translate 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
a.portal-cta__card .portal-cta__card-arrow:hover {
	transform: none;
}
@media (hover: hover) {
	a.portal-cta__card:hover {
		translate: 0 -3px;
		border-color: rgba(106, 137, 175, 0.58);
		box-shadow: 0 12px 26px -10px rgba(11, 31, 58, 0.22);
	}
	a.portal-cta__card:hover .portal-cta__card-arrow {
		translate: 3px 0;
		border-color: rgba(106, 137, 175, 0.85);
		background: rgba(13, 42, 80, 0.1);
		color: var(--nl-dark, #0b1f3a);
	}
}
a.portal-cta__card:active {
	scale: 0.98;
}
a.portal-cta__card:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}

/* ---- Hardware cards: named properties, gated hover, stronger scrim */
a.bundle-highlight-card.nl-hw {
	transform: none;
	transition: box-shadow 0.3s ease, border-color 0.2s ease, translate 0.25s cubic-bezier(0.23, 1, 0.32, 1), scale 0.16s ease-out;
}
a.bundle-highlight-card.nl-hw:hover {
	transform: none;
}
@media (hover: hover) {
	a.bundle-highlight-card.nl-hw:hover {
		translate: 0 -4px;
		box-shadow: var(--nl-shadow-lg, 0 18px 36px -20px rgba(11, 31, 58, 0.45));
	}
}
a.bundle-highlight-card.nl-hw:active {
	scale: 0.98;
}
.nl-hw .bundle-highlight-card__photo::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.66) 100%);
}

/* ---- Hover lifts settle in 250ms; the photo drift stays the slow layer */
.nl-bento .nl-bento__tile,
.section--path-choice .nl-path__card {
	transition: translate 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}
.nl-bento .nl-bento__tile img,
.nl-path__photo img {
	transition: scale 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.nl-bento .nl-bento__go {
	transition: background-color 0.2s ease, color 0.2s ease, translate 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.nl-path__icon {
	transition: scale 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.nl-path__link svg,
.nl-hw .nl-hw__go {
	transition-duration: 0.25s;
	transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.nl-net__list > .nl-net__item {
	transition: background-color 0.3s ease, border-color 0.3s ease, translate 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.section--network .nl-net__cta {
	transition: translate 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease, scale 0.16s ease-out;
}
@media (hover: none) {
	.section--network .nl-net__cta:hover {
		translate: 0;
		box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
	}
}

/* ---- Phones: one floating control in the thumb zone */
@media (max-width: 600px) {
	#back-to-top {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fp-hero .fp-hero__pause {
		display: none;
	}
	/* A short fade still bridges the slides; nothing moves. */
	.fp-hero--bleed .fp-hero__slide,
	.fp-hero--bleed .fp-hero__slide.is-leaving,
	.fp-hero--bleed .fp-hero__slide.is-active {
		transition: opacity 0.3s ease, visibility 0.3s;
	}
	.fp-hero--bleed .fp-hero__slide-content,
	.fp-hero--bleed .fp-hero__btn,
	.cta-band .cta-band__actions .btn,
	a.portal-cta__card,
	a.portal-cta__card .portal-cta__card-arrow,
	a.bundle-highlight-card.nl-hw {
		transition: none;
	}
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__slide-photo img,
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__title,
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__lead,
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__actions,
	.fp-hero--bleed .fp-hero__slide.is-active .fp-hero__note,
	.fp-hero--bleed.is-autoplaying .fp-hero__tab.is-active::after {
		animation: none;
	}
}
/* ---- Stacked hero: the inactive dots and the pause control must read on a photo */
@media (max-width: 900px) {
	.fp-hero--bleed .fp-hero__tab:not(.is-active) {
		background: rgba(255, 255, 255, 0.55);
	}
	.fp-hero .fp-hero__pause {
		border-color: rgba(255, 255, 255, 0.5);
		background: rgba(255, 255, 255, 0.28);
	}
}
/* ---- Proof card, slimmer (owner request, 2026-10-10): 12px instead of 22px above and below the row */
@media (min-width: 901px) {
	ul.nl-proof__card {
		padding: 12px 6px;
	}
}
/* NETLAYERS CRITIQUE PASS — END */


/* =========================================================
   NETLAYERS TOPBAR CRISP — BEGIN (2026-10-10)
   Owner: "the top bar looks a little blurry". Cause: its type is set in
   rem on a 15px root (0.78rem = 11.7px, 0.82rem = 12.3px) and every box
   lands on a fractional pixel (bar padding 1.5px, switcher 23.89px tall,
   link 18.3px). Desktop only: every size below is a whole pixel and the
   type is 13px. The phone/tablet layer (max-width: 1100px) is untouched.
   Rollback: delete this block.
   ========================================================= */
@media (min-width: 1101px) {
	html body .site-topbar {
		padding: 4px 0;
		font-size: 13px;
		line-height: 20px;
	}
	html body .site-topbar__inner {
		min-height: 32px;
	}
	html body .site-topbar .section-switcher {
		padding: 2px;
	}
	html body .site-topbar .section-switcher__link,
	html body .site-topbar .mobile-section-switcher__link {
		min-width: 112px;
		min-height: 24px;
		padding: 0 16px;
		font-size: 13px;
		line-height: 24px;
	}
	html body .site-topbar .topbar-contact a,
	html body .site-topbar .topbar-links a,
	html body .site-topbar .toolbar-dropdown__toggle {
		font-size: 13px;
		line-height: 20px;
	}
}
/* NETLAYERS TOPBAR CRISP — END */


/* =========================================================
   NETLAYERS PROOF CARD COMPACT — BEGIN (2026-10-10)
   Owner: the proof card under the Business hero is "too big". The card
   keeps its four facts and its overlap with the hero, but every size steps
   down: 36px icon tiles (were 48), 22px numbers (were 30), 13px labels
   (were 14), 10px/2px vertical padding (were 12px/4px), 960px wide (was
   1120). Desktop card: about 66px tall instead of 86. The overlap shrinks
   with it so the same share of the card sits over the photo.
   Rollback: delete this block.
   ========================================================= */
html body .fp-hero--has-proof,
html body .nl-proof {
	--nl-proof-overlap: 36px;
}
html body ul.nl-proof__card {
	max-width: 960px;
	padding: 10px 6px;
	border-radius: 18px;
}
html body .nl-proof__card > .nl-proof__item {
	gap: 12px;
	padding: 2px 20px;
}
html body .nl-proof__icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
}
html body .nl-proof__icon svg {
	width: 18px;
	height: 18px;
}
html body .nl-proof__value {
	font-size: 22px;
}
html body .nl-proof__label {
	margin-top: 2px;
	font-size: 13px;
}
@media (max-width: 1100px) {
	html body .fp-hero--has-proof,
	html body .nl-proof {
		--nl-proof-overlap: 32px;
	}
	html body .nl-proof__card > .nl-proof__item {
		padding: 2px 14px;
	}
	html body .nl-proof__icon {
		width: 34px;
		height: 34px;
	}
	html body .nl-proof__icon svg {
		width: 17px;
		height: 17px;
	}
	html body .nl-proof__value {
		font-size: 20px;
	}
	html body .nl-proof__label {
		font-size: 12.5px;
	}
}
@media (max-width: 900px) {
	html body .fp-hero--has-proof,
	html body .nl-proof {
		--nl-proof-overlap: 28px;
	}
	html body ul.nl-proof__card {
		padding: 2px;
	}
	html body .nl-proof__card > .nl-proof__item {
		padding: 12px 16px;
	}
}
@media (max-width: 600px) {
	html body .nl-proof__card > .nl-proof__item {
		gap: 8px;
		padding: 12px 14px;
	}
	html body .nl-proof__icon {
		width: 32px;
		height: 32px;
	}
	html body .nl-proof__icon svg {
		width: 16px;
		height: 16px;
	}
	html body .nl-proof__value {
		font-size: 20px;
	}
}
/* NETLAYERS PROOF CARD COMPACT — END */


/* =========================================================
   NETLAYERS PATH HOME PHOTO — BEGIN (2026-10-10)
   The Residential card in the "Home or Business?" section now uses the
   family-on-the-sofa photo (media slug nl-path-home, 1755). That photo
   already has its people right of centre, so the 126% stretch that pushed
   the old photo's faces out from under the copy is switched off; the card
   positions it with --nl-path-pos instead (72% 45%, phones 78% 40%).
   Rollback: delete this block (and point the templates back at
   nl-res-internet-card).
   ========================================================= */
.nl-path__card--home .nl-path__photo img {
	width: 100%;
}
/* NETLAYERS PATH HOME PHOTO — END */


/* =========================================================
   NETLAYERS RESIDENTIAL HOME — BEGIN (2026-10-13)
   The Residential homepage hero uses the same full-bleed slideshow as the
   Business homepage (fp-hero--bleed, proof card, named tabs). These are the
   theme rules the Business hero gets from its .fp-hero--business modifier,
   repeated for .fp-hero--residential: the stacked (phone) layout starts the
   copy at the top, and the photos sit so the people on the right of each
   frame stay in view. Rollback: delete this block.
   ========================================================= */
.fp-hero--residential .fp-hero__slide-content {
	justify-content: flex-start;
	padding-top: clamp(2rem, 4vw, 3.5rem);
}
.fp-hero--residential .fp-hero__slide-photo img {
	object-position: 68% 40%;
}
@media (min-width: 901px) {
	.fp-hero--bleed.fp-hero--residential .fp-hero__slide-photo img {
		object-position: 70% 40%;
	}
}
/* NETLAYERS RESIDENTIAL HOME — END */


/* =========================================================
   NETLAYERS PORTAL LIVE — BEGIN (2026-10-13)
   The MyNetLayers portal visual (notification feed beside the cutout) was
   styled inline by the Business homepage template since 2026-10-09. The
   Residential homepage now shares the section, so the rules live here;
   the Business template still prints its own identical copy, which can be
   removed from it at any time. Rollback: delete this block (the Business
   page keeps working from its inline copy).
   ========================================================= */
/*
 * MyNetLayers portal visual (2026-10-09); the template comment explains the
 * idea. Everything animates transform/opacity only, runs only while on
 * screen, and collapses to a still composition under reduced motion.
 */
.section--portal-cta {
	--nl-pl-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
	.section--portal-cta {
		/* Damped spring (zeta 0.62): about 8% overshoot, settles cleanly. */
		--nl-pl-spring: linear(0, 0.069, 0.228, 0.422, 0.613, 0.778, 0.906, 0.995, 1.05, 1.077, 1.083, 1.077, 1.063, 1.047, 1.031, 1.018, 1.007, 1, 0.996, 0.993, 0.993, 0.994, 0.995, 0.996, 0.998, 0.999, 1);
	}
}

/* One colour per portal job, shared by a card's icon and its notification. */
.section--portal-cta .nl-tone--blue { --nl-tone: #0566db; --nl-tone-bg: #e6f0ff; }
.section--portal-cta .nl-tone--purple { --nl-tone: #7c3aed; --nl-tone-bg: #f3e8ff; }
.section--portal-cta .nl-tone--green { --nl-tone: #15803d; --nl-tone-bg: #dcfce7; }
.section--portal-cta .nl-tone--amber { --nl-tone: #b45309; --nl-tone-bg: #fef3c7; }
.section--portal-cta .nl-tone--teal { --nl-tone: #0f766e; --nl-tone-bg: #ccfbf1; }
.section--portal-cta .nl-tone--rose { --nl-tone: #e11d48; --nl-tone-bg: #ffe4e6; }

.section--portal-cta .portal-cta__card-icon[class*="nl-tone--"] {
	color: var(--nl-tone);
	background: var(--nl-tone-bg);
	transition: scale 0.45s var(--nl-pl-spring);
}
@media (hover: hover) {
	.section--portal-cta .portal-cta__card:hover .portal-cta__card-icon {
		scale: 1.08;
	}
}

/* ---- Stage: column 3 on desktop; it never sizes the row (the cards do). */
.nl-plive {
	--nl-pl-slot: 3.2s;
	--nl-pl-dur: calc(var(--nl-pl-slot) * 6);
	position: relative;
	align-self: stretch;
	min-width: 0;
	min-height: 360px;
	/* Decorative: it must never take a hover or click away from the cards. */
	pointer-events: none;
}
.nl-plive__halo {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(100%, 320px);
	aspect-ratio: 1;
	border-radius: 50%;
	translate: -50% 0;
	background: radial-gradient(closest-side, rgba(5, 102, 219, 0.18), rgba(5, 102, 219, 0.07) 64%, rgba(5, 102, 219, 0));
}
.nl-plive__person {
	position: absolute;
	right: 0;
	bottom: -6px;
	left: 0;
	display: flex;
	justify-content: center;
	/* Taller than the row so her head clears the cards' top edge, like the
	   cutout it replaced; the section padding absorbs the overhang. */
	height: calc(100% + 48px);
}
.nl-plive__person img {
	display: block;
	width: auto;
	max-width: none;
	height: 100%;
	filter: drop-shadow(0 18px 24px rgba(11, 31, 58, 0.14));
}
.nl-plive__ui {
	position: absolute;
	inset: 0;
}

/* ---- Notifications: a two-deep feed, plus one "peek" per portal card. */
.nl-plive__feed,
.nl-plive__peek {
	position: absolute;
	bottom: 28px;
	left: -4px;
	display: grid;
	width: 236px;
}
.nl-plive__feed {
	transition: opacity 0.3s ease;
}
.nl-plive__toast {
	display: flex;
	grid-area: 1 / 1;
	align-self: end;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 9px 12px 9px 9px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 0 0 1px rgba(11, 31, 58, 0.06), 0 16px 32px -16px rgba(11, 31, 58, 0.5);
	font-family: var(--nl-font, Inter, system-ui, sans-serif);
	transform-origin: 50% 100%;
}
.nl-plive__chip {
	display: grid;
	flex: none;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 10px;
	background: var(--nl-tone-bg);
	color: var(--nl-tone);
}
.nl-plive__text {
	display: grid;
	min-width: 0;
}
.nl-plive__title,
.nl-plive__meta {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nl-plive__title {
	color: var(--nl-dark, #0b1f3a);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.005em;
}
.nl-plive__meta {
	color: #5b6b80;
	font-size: 12px;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

/*
 * Six notifications share one 19.2s clock: each lands at the bottom (spring),
 * rises to second place when the next one arrives, then leaves. Negative
 * delays start the loop mid-flow, so there is never an empty first frame.
 */
.nl-plive__feed > .nl-plive__toast {
	animation: nl-plive-feed var(--nl-pl-dur) cubic-bezier(0.34, 1.4, 0.64, 1) infinite both;
	animation-delay: calc(var(--i, 0) * var(--nl-pl-slot) - var(--nl-pl-dur));
}
.nl-plive__peek > .nl-plive__toast {
	opacity: 0;
	translate: 0 14px;
	scale: 0.96;
	transition: opacity 0.25s ease, translate 0.5s var(--nl-pl-spring), scale 0.5s var(--nl-pl-spring);
}

/* Off screen (or before it is reached) the clock stops: no hidden CPU work. */
.nl-plive[data-armed]:not([data-live]) .nl-plive__feed > .nl-plive__toast {
	animation-play-state: paused;
}

/* Hover or keyboard focus on a card: the feed pauses and that card's
   notification takes its place, in the card's colour. */
.portal-cta:has(.portal-cta__card:is(:hover, :focus-within)) .nl-plive__feed {
	opacity: 0;
}
.portal-cta:has(.portal-cta__card:is(:hover, :focus-within)) .nl-plive__feed > .nl-plive__toast {
	animation-play-state: paused;
}
.portal-cta:has(.portal-cta__card:nth-child(1):is(:hover, :focus-within)) .nl-plive__peek > :nth-child(1),
.portal-cta:has(.portal-cta__card:nth-child(2):is(:hover, :focus-within)) .nl-plive__peek > :nth-child(2),
.portal-cta:has(.portal-cta__card:nth-child(3):is(:hover, :focus-within)) .nl-plive__peek > :nth-child(3),
.portal-cta:has(.portal-cta__card:nth-child(4):is(:hover, :focus-within)) .nl-plive__peek > :nth-child(4),
.portal-cta:has(.portal-cta__card:nth-child(5):is(:hover, :focus-within)) .nl-plive__peek > :nth-child(5),
.portal-cta:has(.portal-cta__card:nth-child(6):is(:hover, :focus-within)) .nl-plive__peek > :nth-child(6) {
	opacity: 1;
	translate: none;
	scale: none;
}

@keyframes nl-plive-feed {
	0% {
		opacity: 0;
		transform: translateY(18px) scale(0.96);
		animation-timing-function: linear(0, 0.069, 0.228, 0.422, 0.613, 0.778, 0.906, 0.995, 1.05, 1.077, 1.083, 1.077, 1.063, 1.047, 1.031, 1.018, 1.007, 1, 0.996, 0.993, 0.993, 0.994, 0.995, 0.996, 0.998, 0.999, 1);
	}
	2.4%,
	16.667% {
		opacity: 1;
		transform: none;
		animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	19.6%,
	33.333% {
		opacity: 0.55;
		transform: translateY(calc(-100% - 10px)) scale(0.94);
		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}
	36.2%,
	100% {
		opacity: 0;
		transform: translateY(calc(-200% - 20px)) scale(0.9);
	}
}

/* Entrance, once, when the section is reached (JS arms it; no JS = shown). */
@media (prefers-reduced-motion: no-preference) {
	.nl-plive[data-armed] :is(.nl-plive__halo, .nl-plive__person, .nl-plive__ui) {
		transition: opacity 0.6s ease, translate 0.9s var(--nl-pl-spring), scale 0.9s var(--nl-pl-spring);
	}
	.nl-plive[data-armed] .nl-plive__person { transition-delay: 0.06s; }
	.nl-plive[data-armed] .nl-plive__ui { transition-delay: 0.4s; }
	.nl-plive[data-armed]:not([data-in]) .nl-plive__halo { opacity: 0; scale: 0.82; }
	.nl-plive[data-armed]:not([data-in]) .nl-plive__person { opacity: 0; translate: 0 32px; }
	.nl-plive[data-armed]:not([data-in]) .nl-plive__ui { opacity: 0; translate: 0 14px; }
}

/* Still composition: the second notification has just landed under the first. */
@media (prefers-reduced-motion: reduce) {
	.nl-plive__feed > .nl-plive__toast {
		animation: none;
	}
	.nl-plive__feed > .nl-plive__toast { opacity: 0; }
	.nl-plive__feed > .nl-plive__toast:nth-child(2) { opacity: 1; }
	.nl-plive__feed > .nl-plive__toast:nth-child(1) {
		opacity: 0.55;
		transform: translateY(calc(-100% - 10px)) scale(0.94);
	}
	.nl-plive__feed,
	.nl-plive__peek > .nl-plive__toast,
	.section--portal-cta .portal-cta__card-icon[class*="nl-tone--"] {
		transition: none;
	}
}

/* Tablet: text and picture side by side, the six cards full width below. */
@media (min-width: 768px) and (max-width: 1180px) {
	.section--portal-cta .portal-cta {
		grid-template-columns: minmax(0, 1fr) minmax(250px, 0.85fr);
		grid-template-areas: "content visual" "cards cards";
		row-gap: 2rem;
	}
	.section--portal-cta .portal-cta__content { grid-area: content; }
	.section--portal-cta .portal-cta__cards { grid-area: cards; }
	.nl-plive {
		grid-area: visual;
		min-height: 330px;
	}
}

/* Phones keep the section short: text, then straight to the cards. */
@media (max-width: 767px) {
	.nl-plive { display: none; }
}
/* NETLAYERS PORTAL LIVE — END */


/* =========================================================
   NETLAYERS FOOTER LEAF — BEGIN (2026-10-13, revised the same day)
   Footer brand: the cloud logo is drawn bigger (240x160 instead of a
   191px-wide fit) without moving anything: its transparent padding hangs
   10px above and below the 140px box and 30px either side, so the brand
   column, the other columns and the footer height are unchanged. The red
   maple leaf (footer.php prints it for the Canadian site; a US build
   filters netlayers_country) is placed inside that box, right after the
   "NetLayers Inc." wordmark, so it never reaches the next column.
   Rollback: delete this block and the span in footer.php.
   ========================================================= */
html body .site-footer .footer-brand__logo {
	display: flex;
	align-items: flex-start;
	position: relative;
	gap: 0;
}
html body .site-footer .footer-brand__logo img,
html body .site-footer .footer-brand__logo-img {
	flex: none;
	width: 240px;
	max-width: none;
	height: 160px;
	margin: -10px -30px;
	object-fit: contain;
}
.footer-brand__leaf {
	position: absolute;
	left: 175px; /* just after "Inc." at this logo size */
	top: 88px; /* centred on the wordmark (image rows 168-200 of 266, drawn at 0.6) */
	display: block;
	margin: 0;
}
.footer-brand__leaf svg {
	display: block;
	/* 2026-10-14, the owner: "a little smaller" (was 26x28 at top 85px; the
	   centre stays on the wordmark and the gap after "Inc." is unchanged). */
	width: 20px;
	height: 22px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
/* NETLAYERS FOOTER LEAF — END */

/* =========================================================
   NETLAYERS PRODUCT PAGE — BEGIN (2026-10-13)
   The shared system behind the rebuilt product pages (Business Internet
   first, Business Phone next): the np- classes their templates use. Each
   template adds a few rules of its own in a small <style> block. Rollback:
   delete this block and restore the templates' inline styles from the
   private backup pages.
   ========================================================= */
/* The product page system (np-): photo hero with ambient layer and pause
   control → essentials card over its edge → setup finder (the page's one
   interaction: pill radios, CSS-only result with photo, answers, figure,
   checklist) → photo tiles → short CTA band. Built for Business Internet
   on 2026-10-13, shared by every product page since. Tokens follow the
   homepage. Page templates set --np-hero-pos / --np-hero-pos-phone and
   add their own small rules. */
.np-page {
	--np-navy: #0b1f3a;
	--np-blue: #0566db;
	--np-blue-deep: #082a59;
	--np-blue-soft: #e6f0ff;
	--np-sky: #7eb8f7;
	--np-ink: #0b1f3a;
	--np-muted: #5d6f86;
	--np-border: #dfe8f3;
	--np-bg: #f6f8fb;
	--np-ease: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out: entrances, hover lifts */
	--np-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement: the heading wipes */
	--np-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* easeOutBack: the pill's release after a press */
	color: var(--np-ink);
}
.np-page .container {
	max-width: 1180px;
}
/* Controls: no double-tap zoom delay, no grey tap flash (each has its own
   press feedback), and headings land clear of the sticky header. */
.np-btn,
.np-finder__opt,
.np-result__cta,
.np-tile,
.np-page .cta-band .btn {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.np-page ::selection {
	background: var(--np-blue);
	color: #fff;
}
.np-page h1,
.np-page h2,
.np-page h3 {
	scroll-margin-top: 110px;
	text-wrap: balance;
}
.np-hero__lead,
.np-finder__lead,
.np-more__lead,
.np-result__line,
.np-tile__line {
	text-wrap: pretty;
}
.np-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Hero ── */
.np-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 600px;
	background: var(--np-navy);
	color: #fff;
}
.np-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.np-hero__photo {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--np-hero-pos, 50% 50%);
}
/* Ambient layer. The routes sit in the navy left of the hero, behind the
   copy, and fade out before the people. Only visible with JS (is-armed). */
.np-hero__net {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1; /* after the media in the DOM, so above the photo and below the copy */
	width: 64%;
	height: 100%;
	display: none;
	color: var(--np-sky);
	opacity: 0.6;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}
.np-page.is-armed .np-hero__net {
	display: block;
}
.np-net__line {
	stroke-dasharray: 3 15;
	animation: np-flow 10s linear infinite;
}
.np-net__line--2 { animation-duration: 13s; }
.np-net__line--3 { animation-duration: 16s; }
.np-net__dot {
	transform-box: fill-box;
	transform-origin: center;
	animation: np-pulse 2.8s var(--np-ease-in-out) infinite alternate;
}
.np-net__dot--2 { animation-delay: -1s; }
.np-net__dot--3 { animation-delay: -2s; }
@keyframes np-flow {
	to { stroke-dashoffset: -180; }
}
@keyframes np-pulse {
	from { opacity: 0.45; transform: scale(1); }
	to { opacity: 1; transform: scale(1.7); }
}
/* The pause control for everything that keeps moving (WCAG 2.2.2). */
.np-hero__pause {
	position: absolute;
	right: 24px;
	bottom: 84px;
	z-index: 2;
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(11, 31, 58, 0.45);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 0.2s ease, border-color 0.2s ease, scale 0.16s var(--np-ease);
}
.np-page.is-armed .np-hero__pause {
	display: grid;
	place-items: center;
}
.np-hero__pause-icon {
	grid-area: 1 / 1;
	width: 18px;
	height: 18px;
}
.np-hero__pause-icon--play,
.np-page.is-still .np-hero__pause-icon--pause {
	display: none;
}
.np-page.is-still .np-hero__pause-icon--play {
	display: block;
}
@media (hover: hover) and (pointer: fine) {
	.np-hero__pause:hover {
		background: rgba(11, 31, 58, 0.7);
		border-color: rgba(255, 255, 255, 0.6);
	}
}
.np-hero__pause:active {
	scale: 0.94;
}
.np-hero__pause:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}
.np-hero__blend {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--np-navy) 0%, rgba(11, 31, 58, 0.94) 26%, rgba(11, 31, 58, 0.62) 50%, rgba(11, 31, 58, 0.18) 74%, rgba(11, 31, 58, 0.05) 100%),
		linear-gradient(0deg, rgba(11, 31, 58, 0.55) 0%, rgba(11, 31, 58, 0) 40%);
}
.np-hero__inner {
	width: 100%;
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: calc(clamp(3rem, 6vw, 5rem) + 60px);
}
.np-hero__copy {
	max-width: 580px;
}
.np-hero__title {
	margin: 0 0 1.1rem;
	font-size: clamp(2.3rem, 4vw, 3.6rem);
	font-weight: 850;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: #fff;
}
.np-hero__title-accent {
	color: var(--np-sky);
}
/* Each line of the headline is a mask its words rise out of; the small
   padding keeps glyphs clear of the clip without changing the leading. */
.np-line {
	display: block;
	padding: 0.06em 0;
	margin: -0.06em 0;
	overflow: hidden;
}
.np-w {
	display: inline-block;
}
.np-hero__lead {
	margin: 0 0 1.6rem;
	max-width: 46ch;
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.84);
}
.np-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.np-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 50px;
	padding: 0.8rem 1.6rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background: #fff;
	color: var(--np-navy);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--np-ease), box-shadow 0.2s ease, scale 0.16s var(--np-ease);
}
.np-btn:hover {
	background: #e8f1fb;
	border-color: #e8f1fb;
	color: var(--np-navy);
}
@media (hover: hover) and (pointer: fine) {
	.np-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	}
}
.np-btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}
.np-btn--outline:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.9);
	color: #fff;
}
.np-btn:active {
	scale: 0.97;
}
.np-btn:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}
.np-hero__note {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.72);
}

/* ── Essentials card: four facts over the hero's bottom edge ── */
.np-facts {
	position: relative;
	z-index: 2;
	margin-top: -60px;
}
.np-facts__card {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1040px;
	margin: 0 auto;
	padding: 10px 6px;
	list-style: none;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 28px 56px -28px rgba(11, 31, 58, 0.4);
}
.np-facts__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin: 0;
	padding: 4px 20px;
}
.np-facts__item + .np-facts__item {
	border-left: 1px solid #e6ecf5;
}
.np-page .nl-tone--blue { --nl-tone: #0566db; --nl-tone-bg: #e6f0ff; }
.np-page .nl-tone--green { --nl-tone: #15803d; --nl-tone-bg: #dcfce7; }
.np-page .nl-tone--amber { --nl-tone: #b45309; --nl-tone-bg: #fef3c7; }
.np-page .nl-tone--purple { --nl-tone: #7c3aed; --nl-tone-bg: #f3e8ff; }
.np-facts__icon {
	display: grid;
	flex: none;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 10px;
	color: var(--nl-tone, #0566db);
	background: var(--nl-tone-bg, #e6f0ff);
}
.np-facts__icon svg {
	width: 19px;
	height: 19px;
}
.np-facts__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.np-facts__value {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--np-ink);
	white-space: nowrap;
}
.np-facts__unit {
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: 0;
}
.np-facts__unit--gap {
	margin-left: 0.2em;
}
.np-facts__label {
	margin-top: 2px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: #475569;
}

/* ── Setup finder: questions on a soft panel, the suggestion as a photo card ── */
.np-finder {
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
	background: #fff;
}
.np-finder__head {
	max-width: 640px;
	margin: 0 0 1.75rem;
}
.np-finder__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	font-weight: 850;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--np-ink);
}
.np-finder__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--np-muted);
}
.np-finder__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
	grid-template-areas: "form result" "next result";
	gap: 0 clamp(1.25rem, 2.5vw, 2rem);
	align-items: start;
	padding: clamp(1.25rem, 2.6vw, 2.25rem);
	border-radius: 20px;
	background: linear-gradient(135deg, #edf3fb 0%, #f7f9fc 55%, #eef4fb 100%);
}
.np-finder__q {
	margin: 0 0 1.4rem;
	padding: 0;
	border: 0;
	min-width: 0;
}
.np-finder__q:last-child {
	margin-bottom: 0;
}
.np-finder__legend {
	display: block;
	margin: 0 0 0.65rem;
	padding: 0;
	font-size: 0.95rem;
	font-weight: 750;
	color: var(--np-ink);
}
.np-finder__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.np-finder__form {
	grid-area: form;
}
.np-finder__result {
	grid-area: result;
}
/* What happens next: three plain steps under the questions, so the column
   reads to the foot of the card instead of stopping short. */
.np-finder__next {
	grid-area: next;
	align-self: start;
	margin-top: 1.5rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(11, 31, 58, 0.09);
}
.np-finder__next-title {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	font-weight: 750;
	color: var(--np-ink);
}
.np-finder__steps {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.np-finder__steps li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--np-muted);
}
.np-finder__step-icon {
	display: grid;
	flex: none;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 10px;
	background: #fff;
	color: var(--np-blue);
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06);
}
.np-finder__step-icon svg {
	width: 18px;
	height: 18px;
}
.np-finder__opt {
	position: relative;
}
.np-finder__opt input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.np-finder__opt span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px; /* a thumb-sized target on phones */
	padding: 0.55rem 1rem 0.55rem 0.8rem;
	border: 1.5px solid var(--np-border);
	border-radius: 999px;
	background: #fff;
	color: var(--np-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.05);
	/* The release after a press overshoots a touch (easeOutBack), so a chosen pill pops. */
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, scale 0.3s var(--np-ease-back);
}
.np-finder__opt svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--np-blue);
	transition: color 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
	.np-finder__opt:hover span {
		border-color: #b9cbe6;
		box-shadow: 0 4px 12px -4px rgba(11, 31, 58, 0.18);
	}
}
.np-finder__opt input:checked + span {
	border-color: var(--np-blue);
	background: var(--np-blue);
	color: #fff;
	box-shadow: 0 8px 18px -8px rgba(5, 102, 219, 0.6);
}
.np-finder__opt input:checked + span svg {
	color: #fff;
}
.np-finder__opt input:active + span {
	scale: 0.95;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, scale 0.12s var(--np-ease);
}
.np-finder__opt input:focus-visible + span {
	outline: 3px solid #60a5fa;
	outline-offset: 2px;
}

/* The suggestion card: a photo of that kind of workplace, the answers it was
   built from, the plan, a speed meter, the checklist and the one action. */
.np-result {
	position: sticky;
	top: 110px;
	display: none;
	overflow: hidden;
	border-radius: 20px;
	background: linear-gradient(180deg, #0b2550 0%, var(--np-blue-deep) 55%, #0f3d7a 100%);
	color: #fff;
	box-shadow: 0 24px 56px -28px rgba(8, 42, 89, 0.7);
	/* Each suggestion enters as it is shown (display none to block), via
	   @starting-style, so the entrance is a transition rather than a keyframe
	   that restarts; browsers without it simply show the panel. */
	opacity: 1;
	transform: none;
	transition: opacity 0.26s var(--np-ease), transform 0.26s var(--np-ease);
}
@starting-style {
	.np-result {
		opacity: 0;
		transform: translateY(14px) scale(0.985);
	}
}
.np-result__media {
	position: relative;
	height: 160px;
	background: #0b2550;
}
.np-result__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 37, 80, 0) 60%, rgba(11, 37, 80, 0.55) 100%);
}
.np-result__photo {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 40%;
	transform: scale(1);
	transition: transform 1.2s var(--np-ease);
}
@starting-style {
	.np-result__photo {
		transform: scale(1.06);
	}
}
.np-result__body {
	position: relative;
	padding: 1rem clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.1rem, 2vw, 1.5rem);
}
.np-result__answers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 0.8rem;
	padding: 0;
	list-style: none;
}
.np-result__answer {
	display: none;
	align-items: center;
	gap: 5px;
	padding: 4px 10px 4px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
}
.np-result__answer svg {
	width: 14px;
	height: 14px;
	color: var(--np-sky);
}
/* The chips mirror the ticked answers (CSS only, like the suggestion itself):
   inputs carry data-q (question index) and a value (level), chips the same pair. */
.np-finder:has(input[data-q="1"][value="a"]:checked) .np-result__answer--1-a,
.np-finder:has(input[data-q="1"][value="b"]:checked) .np-result__answer--1-b,
.np-finder:has(input[data-q="1"][value="c"]:checked) .np-result__answer--1-c,
.np-finder:has(input[data-q="1"][value="d"]:checked) .np-result__answer--1-d,
.np-finder:has(input[data-q="2"][value="a"]:checked) .np-result__answer--2-a,
.np-finder:has(input[data-q="2"][value="b"]:checked) .np-result__answer--2-b,
.np-finder:has(input[data-q="2"][value="c"]:checked) .np-result__answer--2-c,
.np-finder:has(input[data-q="2"][value="d"]:checked) .np-result__answer--2-d,
.np-finder:has(input[data-q="3"][value="a"]:checked) .np-result__answer--3-a,
.np-finder:has(input[data-q="3"][value="b"]:checked) .np-result__answer--3-b,
.np-finder:has(input[data-q="3"][value="c"]:checked) .np-result__answer--3-c,
.np-finder:has(input[data-q="3"][value="d"]:checked) .np-result__answer--3-d {
	display: inline-flex;
}
.np-page.is-armed .np-result__list li {
	animation: np-rise 0.32s var(--np-ease) both;
}
.np-page.is-armed .np-result__list li:nth-child(2) { animation-delay: 50ms; }
.np-page.is-armed .np-result__list li:nth-child(3) { animation-delay: 100ms; }
.np-page.is-armed .np-result__list li:nth-child(4) { animation-delay: 150ms; }
.np-result__title {
	margin: 0 0 0.45rem;
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #fff;
}
.np-result__line {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}
/* Speed: the figure with a thin signal line under it (no track), sized to
   the share of the 1.5 Gbps ceiling and drawn on each change. */
.np-result__speed {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	margin: 0 0 1rem;
	padding: 0 0 10px;
}
.np-result__speed-icon {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 12px;
	background: rgba(126, 184, 247, 0.16);
	color: var(--np-sky);
}
.np-result__speed-icon svg {
	width: 20px;
	height: 20px;
}
.np-result__speed-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.np-result__speed-qual {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.7);
}
.np-result__speed-num {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
}
.np-result__speed-num span {
	margin-left: 0.25em;
	font-size: 0.6em;
	font-weight: 700;
	letter-spacing: 0;
}
.np-result__speed-line {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--np-sky) 0%, #4aa3ff 70%, rgba(74, 163, 255, 0.2) 100%);
	transform: scaleX(var(--np-meter, 1));
	transform-origin: left center;
	transition: transform 0.7s var(--np-ease) 0.12s;
}
@starting-style {
	.np-result__speed-line {
		transform: scaleX(0.04);
	}
}
.np-result__list {
	margin: 0 0 1.3rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}
.np-result__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
	font-weight: 600;
}
.np-result__list svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: #7ee2a8;
}
.np-result__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 46px;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background: #fff;
	color: var(--np-navy);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s var(--np-ease), box-shadow 0.2s ease, scale 0.16s var(--np-ease);
}
.np-result__cta svg {
	width: 18px;
	height: 18px;
}
@media (hover: hover) and (pointer: fine) {
	.np-result__cta:hover {
		background: #e8f1fb;
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	}
}
.np-result__cta:active {
	scale: 0.97;
}
.np-result__cta:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}
.np-result__note {
	margin: 0.85rem 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);
}
/* The recommendation is the highest level ticked. Later rules win. */
.np-result--a { display: block; }
.np-finder:has(input[data-lvl="b"]:checked) .np-result--a { display: none; }
.np-finder:has(input[data-lvl="b"]:checked) .np-result--b { display: block; }
.np-finder:has(input[data-lvl="c"]:checked) :is(.np-result--a, .np-result--b) { display: none; }
.np-finder:has(input[data-lvl="c"]:checked) .np-result--c { display: block; }
.np-finder:has(input[data-lvl="d"]:checked) :is(.np-result--a, .np-result--b, .np-result--c) { display: none; }
.np-finder:has(input[data-lvl="d"]:checked) .np-result--d { display: block; }
@keyframes np-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ── Tiles: Wi-Fi coverage, hardware, high availability ── */
.np-more {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
	background: var(--np-bg);
}
.np-more__head {
	max-width: 640px;
	margin: 0 0 1.5rem;
}
.np-more__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	font-weight: 850;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--np-ink);
}
.np-more__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--np-muted);
}
/* Tile grids are never a row of identical cards. --pair (three tiles): the
   first stands tall on the left, two stack beside it. --five: the first
   stands tall on the left, four fill a 2x2 beside it. */
.np-tiles {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.np-tiles--pair {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
}
.np-tiles--five {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
}
.np-tiles > li:first-child {
	grid-row: 1 / span 2;
}
.np-tiles > li:first-child .np-tile {
	height: 100%;
}
.np-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 236px;
	padding: 1.4rem 4.5rem 1.4rem 1.5rem; /* the arrow sits in the right 4.5rem */
	overflow: hidden;
	overflow: clip; /* 2026-10-16: hidden makes the tile a scroll container, which binds the photo's view() drift to it and freezes it; clip crops the same without that (older browsers keep hidden) */
	isolation: isolate;
	border-radius: 20px;
	background: var(--np-navy);
	color: #fff;
	text-decoration: none;
	scroll-margin-top: 110px; /* the Services menu links to these anchors */
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 20px 44px -28px rgba(11, 31, 58, 0.5);
	transition: transform 0.25s var(--np-ease), box-shadow 0.25s ease;
}
.np-tile__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.np-tile__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	transition: scale 0.8s var(--np-ease);
}
.np-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(11, 31, 58, 0.08) 0%, rgba(11, 31, 58, 0.62) 55%, rgba(11, 31, 58, 0.96) 100%);
}
.np-tile__title {
	margin: 0 0 0.3rem;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}
.np-tile__line {
	margin: 0;
	max-width: 30ch;
	font-size: 0.925rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}
.np-tile__go {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	transition: background-color 0.2s ease, translate 0.25s var(--np-ease);
}
.np-tile__go svg {
	width: 18px;
	height: 18px;
}
@media (hover: hover) and (pointer: fine) {
	.np-tile:hover {
		transform: translateY(-4px);
		box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 28px 56px -28px rgba(11, 31, 58, 0.6);
	}
	.np-tile:hover .np-tile__photo img {
		scale: 1.05;
	}
	.np-tile:hover .np-tile__go {
		background: var(--np-blue);
		translate: 3px 0;
	}
}
.np-tile:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}

/* The closing band, kept short: about 125px tall on desktop (the theme's
   is 174), with 44px buttons and a designed focus ring. */
.np-page .cta-band {
	padding: clamp(1.5rem, 2.2vw, 1.85rem) 0;
}
.np-page .cta-band__inner {
	gap: 1rem 1.875rem;
}
.np-page .cta-band__title {
	margin-bottom: 0.2rem;
	font-size: clamp(1.45rem, 2.1vw, 1.9rem);
	line-height: 1.1;
}
.np-page .cta-band__subtitle {
	font-size: 1rem;
}
.np-page .cta-band .btn {
	min-height: 44px;
}
.np-page .cta-band .btn:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}

/* ── Motion (the script adds .is-armed before paint; nothing is hidden
   without JS or under reduced motion). Entrances run once; the headline's
   words rise out of their lines, the copy follows in a 60–100ms cascade,
   the photo settles then keeps a slow drift, and the facts pop in one
   after another. ── */
.np-page.is-armed .np-w {
	animation: np-word 0.8s var(--np-ease) both;
}
.np-page.is-armed .np-hero__title > .np-line:first-child .np-w:nth-child(2) { animation-delay: 70ms; }
.np-page.is-armed .np-hero__title-accent .np-w:nth-child(1) { animation-delay: 140ms; }
.np-page.is-armed .np-hero__title-accent .np-w:nth-child(2) { animation-delay: 210ms; }
.np-page.is-armed .np-hero__copy > * {
	animation: np-rise-lg 0.8s var(--np-ease) both;
}
.np-page.is-armed .np-hero__copy > .np-hero__title { animation: none; }
.np-page.is-armed .np-hero__copy > :nth-child(2) { animation-delay: 260ms; }
.np-page.is-armed .np-hero__copy > :nth-child(3) { animation-delay: 360ms; }
.np-page.is-armed .np-hero__copy > :nth-child(4) { animation-delay: 440ms; }
.np-page.is-armed .np-hero__photo {
	/* The settle (most of the movement in the first second), then a slow
	   drift that never stops: the owner wants the page to keep moving, and
	   the hero's pause button is the WCAG 2.2.2 control for it. */
	animation: np-settle 5s var(--np-ease) both, np-drift 28s linear 5s infinite alternate;
}
/* Every few seconds a light crosses the essentials card: data on the line. */
.np-facts__card {
	position: relative;
	overflow: hidden;
}
.np-page.is-armed .np-facts__card::after {
	content: "";
	position: absolute;
	top: 0;
	left: -160px;
	width: 160px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(5, 102, 219, 0) 0%, var(--np-blue) 50%, rgba(5, 102, 219, 0) 100%);
	animation: np-sweep 7s linear 1.4s infinite;
	pointer-events: none;
}
@keyframes np-sweep {
	0% { transform: translateX(0); }
	36% { transform: translateX(1240px); }
	100% { transform: translateX(1240px); }
}
/* Paused: the hero button (is-still) or the hero scrolled out of view. */
.np-page.is-still .np-hero__photo {
	animation-play-state: running, paused;
}
.np-page.is-still .np-net__line,
.np-page.is-still .np-net__dot,
.np-page.is-still .np-facts__card::after,
.np-hero.is-offscreen .np-net__line,
.np-hero.is-offscreen .np-net__dot,
.np-hero.is-offscreen .np-hero__photo {
	animation-play-state: paused;
}
.np-page.is-armed .np-facts__card {
	animation: np-rise 0.7s var(--np-ease) 0.15s both;
}
.np-page.is-armed .np-facts__item {
	animation: np-rise 0.55s var(--np-ease) 0.32s both;
}
.np-page.is-armed .np-facts__item:nth-child(2) { animation-delay: 0.4s; }
.np-page.is-armed .np-facts__item:nth-child(3) { animation-delay: 0.48s; }
.np-page.is-armed .np-facts__item:nth-child(4) { animation-delay: 0.56s; }
.np-page.is-armed .np-facts__icon {
	animation: np-pop 0.6s var(--np-ease-back) both;
	animation-delay: inherit;
}

/* Scroll reveals, once, as each block enters the viewport (IntersectionObserver
   adds .is-in). The two section headings rise out of a clipped line, the
   same material as the hero's headline; the three tiles arrive as a list,
   each photo settling from a slight zoom. Nothing else re-enters. */
.np-page.is-armed .np-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--np-ease), transform 0.7s var(--np-ease);
}
.np-page.is-armed .np-reveal--wipe {
	opacity: 1;
	transform: translateY(0.45em);
	clip-path: inset(0 0 100% 0);
	transition: transform 0.7s var(--np-ease), clip-path 0.7s var(--np-ease-in-out);
}
.np-page.is-armed .np-reveal.is-in {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 0 0);
}
.np-page.is-armed .np-tiles .np-reveal:nth-child(2) { transition-delay: 90ms; }
.np-page.is-armed .np-tiles .np-reveal:nth-child(3) { transition-delay: 180ms; }
.np-page.is-armed .np-tiles .np-reveal:nth-child(4) { transition-delay: 270ms; }
.np-page.is-armed .np-tiles .np-reveal:nth-child(5) { transition-delay: 360ms; }
.np-page.is-armed .np-reveal .np-tile__photo {
	scale: 1.1;
	transition: scale 1.4s var(--np-ease);
}
.np-page.is-armed .np-reveal.is-in .np-tile__photo {
	scale: 1;
}

/* Scroll-linked motion (the StringTune feel, done by the browser's own
   scroll timelines, off the main thread): the hero photo lags the page and
   the tile photos drift inside their cards. Browsers without scroll
   timelines keep the photos still. Desktop only: the phone hero is a
   fixed-height band. */
@supports (animation-timeline: view()) {
	@media (min-width: 901px) {
		.np-page.is-armed .np-hero__media {
			bottom: -18%; /* the spare height sits below the fold so the opening crop is unchanged */
			animation: np-parallax linear both;
			animation-timeline: scroll(root);
			animation-range: 0 100vh;
		}
	}
	.np-page.is-armed .np-tile__photo {
		inset: -8% 0;
		animation: np-tile-drift linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}
}
@keyframes np-settle {
	from { transform: scale(1.08); }
	to { transform: none; }
}
@keyframes np-drift {
	from { transform: none; }
	to { transform: scale(1.06) translateX(-1.2%); }
}
@keyframes np-parallax {
	from { transform: translateY(0); }
	to { transform: translateY(-15%); }
}
@keyframes np-tile-drift {
	from { translate: 0 -6%; }
	to { translate: 0 6%; }
}
@keyframes np-word {
	from { opacity: 0; transform: translateY(110%); }
	to { opacity: 1; transform: none; }
}
@keyframes np-rise-lg {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}
@keyframes np-pop {
	from { opacity: 0; scale: 0.6; }
	to { opacity: 1; scale: 1; }
}

@media (max-width: 1024px) {
	.np-facts__card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 2px;
	}
	.np-facts__item {
		padding: 12px 16px;
	}
	.np-facts__item:nth-child(odd) {
		border-left: 0;
	}
	.np-facts__item:nth-child(n + 3) {
		border-top: 1px solid #e6ecf5;
	}
	.np-finder__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "form" "result" "next";
		row-gap: clamp(1.25rem, 2.5vw, 2rem);
	}
	.np-finder__next {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
	.np-result {
		position: static;
	}
	.np-tiles--pair,
	.np-tiles--five {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
	.np-tiles--five {
		grid-template-rows: none;
	}
	.np-tiles--five > li:first-child {
		grid-row: 1 / span 2;
	}
	.np-tile {
		min-height: 220px;
	}
}
@media (max-width: 900px) {
	.np-hero {
		--np-hero-photo-h: clamp(320px, 45vh, 380px);
		min-height: 0;
		align-items: flex-end;
	}
	.np-hero__blend {
		background:
			linear-gradient(0deg, var(--np-navy) 0%, var(--np-navy) 30%, rgba(11, 31, 58, 0.86) 44%, rgba(11, 31, 58, 0.46) 56%, rgba(11, 31, 58, 0.12) 72%, rgba(11, 31, 58, 0.04) 100%);
	}
	.np-hero__photo {
		/* A photo band across the top that fades into navy: the technician and the
		   owner sit in the right 40% of the frame, which only fits a phone screen
		   when the photo is scaled to this band rather than to the whole hero. */
		height: var(--np-hero-photo-h);
		object-position: var(--np-hero-pos-phone, 50% 50%);
		-webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
	}
	.np-hero__inner {
		padding-top: calc(var(--np-hero-photo-h) - 72px); /* the headline starts over the faded foot of the band */
		padding-bottom: calc(2.25rem + 60px);
	}
	.np-hero__net {
		top: auto;
		bottom: 0;
		width: 100%;
		height: 62%;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%);
		mask-image: linear-gradient(180deg, transparent 0, #000 35%);
	}
	.np-hero__pause {
		right: 16px;
		bottom: 76px;
	}
}
@media (max-width: 600px) {
	.np-hero__title {
		font-size: 2.2rem;
	}
	.np-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.np-hero__note {
		text-align: center;
	}
	.np-facts__card {
		grid-template-columns: minmax(0, 1fr);
	}
	.np-facts__item:nth-child(n + 2) {
		border-top: 1px solid #e6ecf5;
	}
	.np-result__media {
		height: 150px;
	}
	.np-tiles--pair,
	.np-tiles--five {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}
	.np-tiles > li:first-child,
	.np-tiles--five > li:first-child {
		grid-row: auto;
	}
	.np-tile {
		min-height: 240px;
	}
}
/* Reduced motion: fewer and gentler, not none. Colour feedback stays, the
   press scale stays (3%, no travel), movement goes: no lifts, zooms, drifts,
   parallax or reveals. The arming script never adds .is-armed here, so the
   entrance rules above do not apply; these cover the rest. */
@media (prefers-reduced-motion: reduce) {
	.np-btn,
	.np-result__cta {
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, scale 0.16s var(--np-ease);
	}
	.np-btn:hover,
	.np-result__cta:hover,
	.np-tile:hover {
		transform: none;
		box-shadow: none;
	}
	.np-finder__opt span {
		transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, scale 0.16s var(--np-ease);
	}
	.np-tile,
	.np-tile__photo img {
		transition: none;
	}
	.np-tile:hover .np-tile__photo img {
		scale: none;
	}
	.np-tile__go {
		transition: background-color 0.2s ease;
	}
	.np-tile:hover .np-tile__go {
		translate: none;
	}
	.np-result {
		transition: opacity 0.2s ease;
	}
	.np-result__photo,
	.np-result__speed-line {
		transition: none;
	}
	@starting-style {
		.np-result {
			opacity: 0;
			transform: none;
		}
		.np-result__photo {
			transform: none;
		}
		.np-result__speed-line {
			transform: scaleX(var(--np-meter, 1));
		}
	}
	.np-hero__net,
	.np-hero__pause,
	.np-page.is-armed .np-hero__net,
	.np-page.is-armed .np-hero__pause {
		display: none;
	}
	.np-page.is-armed .np-facts__card::after {
		content: none;
	}
	.np-page.is-armed .np-w,
	.np-page.is-armed .np-hero__copy > *,
	.np-page.is-armed .np-hero__photo,
	.np-page.is-armed .np-hero__media,
	.np-page.is-armed .np-facts__card,
	.np-page.is-armed .np-facts__item,
	.np-page.is-armed .np-facts__icon,
	.np-page.is-armed .np-result__list li,
	.np-page.is-armed .np-tile__photo {
		animation: none;
	}
	.np-page.is-armed .np-reveal,
	.np-page.is-armed .np-reveal--wipe {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}
	.np-page.is-armed .np-reveal .np-tile__photo {
		scale: none;
		transition: none;
	}
}
/* NETLAYERS PRODUCT PAGE — END */

/* =========================================================
   NETLAYERS FOOTER CONTACT NOTES — BEGIN (2026-10-13)
   The footer lists both numbers: (888) 208-8282 marked Toll-free and
   (289) 800-8787 marked Local; the note sits after the number in small
   type. Rollback: delete this block and the two spans in footer.php.
   ========================================================= */
.footer-contact-list .footer-contact-note {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
	vertical-align: 1px;
	white-space: nowrap;
}
.footer-contact-list .footer-contact-text {
	min-width: 0;
}
.footer-contact-list .footer-contact-number {
	white-space: nowrap; /* the number never breaks across lines; the note wraps below it instead */
}
.footer-contact-list .footer-contact-text {
	white-space: nowrap; /* number and tag always share a line */
}
/* Between 1000 and 1199px the last footer column is 166 to 181px wide: a
   smaller icon, number and tag keep the pair on one line there. */
@media (min-width: 1000px) and (max-width: 1199px) {
	.footer-contact-list li a {
		gap: 6px;
	}
	.footer-contact-list li a > svg {
		flex: none;
		width: 14px;
		height: 14px;
	}
	.footer-contact-list .footer-contact-number {
		font-size: 12.5px;
	}
	.footer-contact-list .footer-contact-note {
		margin-left: 5px;
		padding: 1px 5px;
		font-size: 10px;
	}
}
/* NETLAYERS FOOTER CONTACT NOTES — END */

/* =========================================================
   NETLAYERS COOKIE BANNER — BEGIN (2026-10-13)
   Restyles the NetLayers Cookie Consent plugin's banner
   (#nl-cookie-banner, markup and script unchanged): a compact
   card at the bottom left on tablet and desktop, clear of the
   chat bubble on the right, and a bottom sheet on phones that
   hides the chat and back-to-top buttons while it is open.
   A Lucide "cookie" line icon (ISC) replaces the emoji, a short
   title is added in CSS, Decline and Accept are the same size,
   and the × goes (its "dismissed" state only re-asked in a
   week). Motion: the card rises 16px and fades in over 0.5s on
   the house ease-out; it leaves in 0.2s. Reduced motion: fade
   only. Rollback: delete this block.
   ========================================================= */
html body #nl-cookie-banner {
	--nl-ck-ease: cubic-bezier(0.23, 1, 0.32, 1);
	right: auto;
	bottom: 24px;
	left: 24px;
	width: min(400px, calc(100vw - 48px));
	padding: 0;
	transform: none;
	opacity: 0;
	translate: 0 16px;
	visibility: hidden;
	transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s linear 0.2s;
}
html body #nl-cookie-banner.visible {
	opacity: 1;
	translate: 0 0;
	visibility: visible;
	transition: opacity 0.45s var(--nl-ck-ease), translate 0.55s var(--nl-ck-ease), visibility 0s;
}
html body #nl-cookie-inner {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	grid-template-areas:
		"icon text"
		"actions actions";
	gap: 14px 14px;
	max-width: none;
	margin: 0;
	padding: 18px;
	border: 0;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 22px 48px -16px rgba(11, 31, 58, 0.32);
}

/* Icon: hide the emoji (text or WordPress's <img>), draw the cookie. */
html body #nl-cookie-icon {
	grid-area: icon;
	align-self: start;
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 50%;
	background: #e8f1fc;
	color: #1a5fb4;
	font-size: 0;
	line-height: 0;
}
html body #nl-cookie-icon > * {
	display: none;
}
html body #nl-cookie-icon::before {
	content: "";
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The icon settles in just after the card, once. */
html body #nl-cookie-banner.visible #nl-cookie-icon::before {
	animation: nl-ck-icon 0.6s var(--nl-ck-ease) 0.15s both;
}
@keyframes nl-ck-icon {
	from {
		opacity: 0;
		scale: 0.6;
		rotate: -40deg;
	}
	to {
		opacity: 1;
		scale: 1;
		rotate: 0deg;
	}
}

/* Text: a short title, then the plugin's message and link. */
html body #nl-cookie-content {
	grid-area: text;
	min-width: 0;
	align-self: center;
}
html body #nl-cookie-content::before {
	content: "Cookies on NetLayers";
	display: block;
	margin: 0 0 4px;
	color: #0b1f3a;
	font: 700 15px/1.3 Inter, system-ui, -apple-system, sans-serif;
	letter-spacing: -0.01em;
}
html body #nl-cookie-message {
	margin: 0;
	color: #3b4a5e;
	font-size: 14px;
	line-height: 1.5;
	text-wrap: pretty;
}
html body #nl-cookie-message a {
	color: #1a5fb4;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	white-space: nowrap;
}
html body #nl-cookie-message a:hover {
	color: #0b1f3a;
}

/* Buttons: two equal choices, 44px targets. */
html body #nl-cookie-actions {
	grid-area: actions;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
html body #nl-cookie-decline,
html body #nl-cookie-accept {
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 12px;
	font: 600 14px/1 Inter, system-ui, -apple-system, sans-serif;
	letter-spacing: 0;
	box-shadow: none;
	transform: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease, color 0.2s ease, scale 0.15s var(--nl-ck-ease);
}
html body #nl-cookie-decline {
	background: #eef2f7;
	color: #0b1f3a;
}
html body #nl-cookie-accept {
	background: #1a5fb4;
	color: #fff;
}
@media (hover: hover) and (pointer: fine) {
	html body #nl-cookie-decline:hover {
		background: #e1e8f1;
		border: 0;
		color: #0b1f3a;
	}
	html body #nl-cookie-accept:hover {
		background: #154f97;
		box-shadow: none;
		transform: none;
	}
}
html body #nl-cookie-decline:active,
html body #nl-cookie-accept:active {
	scale: 0.97;
}
html body #nl-cookie-decline:focus-visible,
html body #nl-cookie-accept:focus-visible,
html body #nl-cookie-message a:focus-visible {
	outline: 3px solid #82b8ed;
	outline-offset: 2px;
}
html body #nl-cookie-close {
	display: none;
}

/* Phones: a bottom sheet; the chat and back-to-top buttons step aside. */
@media (max-width: 767px) {
	html body #nl-cookie-banner {
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		left: 12px;
		width: auto;
		padding: 0;
	}
	html body #nl-cookie-inner {
		padding: 16px;
		gap: 12px;
	}
	html body:has(#nl-cookie-banner.visible) #nl-chat-root,
	html body:has(#nl-cookie-banner.visible) #back-to-top {
		visibility: hidden;
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body #nl-cookie-banner,
	html body #nl-cookie-banner.visible {
		translate: none;
	}
	html body #nl-cookie-banner.visible #nl-cookie-icon::before {
		animation: none;
	}
	html body #nl-cookie-decline:active,
	html body #nl-cookie-accept:active {
		scale: 1;
	}
}
/* NETLAYERS COOKIE BANNER — END */

/* =========================================================
   NETLAYERS CHAT WIDGET — BEGIN (2026-10-14)
   Restyles the NetLayers Live Chat plugin (#nl-chat-root).
   Tablet and desktop: a 380px panel that grows out of the
   launcher, a navy header with the brand avatar and a presence
   pulse, calm message bubbles (the bot's carry the avatar),
   suggested questions on the visitor's side with line icons,
   and a 44px composer whose send button wakes up once there is
   text. Phones (to 767px, and touch screens under 500px tall):
   a full-screen sheet with safe-area padding; the page behind
   stops scrolling and the launcher steps aside.
   Specificity: 'html body' + the plugin's IDs, so these rules
   win over the plugin's chat.css wherever it loads. The plugin
   swaps the launcher icons with inline display, which is left
   alone. The assistant's avatar is drawn here (an inline SVG
   cloud), so nothing depends on the plugin's image paths.
   Motion: the panel scales up from the launcher on the house
   ease-out (0.4s in, 0.2s out); messages and suggestions rise
   in; the launcher icon turns as it swaps; the unread dot rings
   three times; the presence badge pulses while the panel is
   open. Reduced motion: fades only, no pulses.
   Rollback: delete this block.
   ========================================================= */
html body #nl-chat-root {
	--nlc-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--nlc-blue: #1a5fb4;
	--nlc-blue-dark: #154f97;
	--nlc-navy: #0b1f3a;
	--nlc-text: #1f2d3d;
	--nlc-muted: #5b6b7f;
	--nlc-line: #e3e9f2;
	--nlc-ring: #82b8ed;
	--nlc-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	/* The assistant's avatar: a solid white cloud on the brand blue. The
	   mosaic logo turns to noise at 28-40px; this stays crisp at any size. */
	--nlc-avatar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='6.75' cy='14.4' r='3.25'/%3E%3Ccircle cx='12.25' cy='11.4' r='5.25'/%3E%3Ccircle cx='16.75' cy='14.1' r='3.75'/%3E%3Crect x='3.5' y='14.4' width='17' height='3.5' rx='1.75'/%3E%3C/svg%3E") center / 86% no-repeat, linear-gradient(145deg, #2f7fdc 0%, #1a5fb4 55%, #154f97 100%);
	font-family: var(--nlc-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------- Launcher ---------- */
html body #nl-chat-bubble {
	box-sizing: border-box;
	padding: 0;
	border: 0;
	background: var(--nlc-blue);
	color: #fff;
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.14), 0 12px 28px -8px rgba(26, 95, 180, 0.6);
	transform: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: translate 0.3s var(--nlc-ease), scale 0.16s var(--nlc-ease), background-color 0.2s ease, box-shadow 0.3s var(--nlc-ease);
}
/* Phones keep the mobile layer's 52px. */
@media (min-width: 768px) {
	html body #nl-chat-bubble {
		width: 56px;
		height: 56px;
	}
}
/* Neutralise the plugin's scale-up hover (it also sticks after a tap). */
html body #nl-chat-bubble:hover {
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.14), 0 12px 28px -8px rgba(26, 95, 180, 0.6);
	transform: none;
}
@media (hover: hover) and (pointer: fine) {
	html body #nl-chat-bubble:hover {
		background: var(--nlc-blue-dark);
		box-shadow: 0 1px 2px rgba(11, 31, 58, 0.14), 0 18px 34px -8px rgba(26, 95, 180, 0.7);
		translate: 0 -2px;
	}
}
html body #nl-chat-bubble:active {
	scale: 0.94;
}
html body #nl-chat-bubble:focus-visible {
	outline: 3px solid var(--nlc-ring);
	outline-offset: 3px;
}
html body #nl-chat-bubble .nl-bubble-icon {
	display: grid;
	place-items: center;
}
html body #nl-chat-bubble .nl-bubble-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}
html body #nl-chat-bubble .nl-icon-close svg {
	width: 22px;
	height: 22px;
}
/* The script gives an icon a style attribute when it swaps them, so only
   a swap (never the page load) turns the newly shown icon in. */
html body #nl-chat-bubble .nl-bubble-icon[style] svg {
	animation: nlc-icon-in 0.35s var(--nlc-ease) both;
}

html body #nl-unread-dot {
	top: 0;
	right: 0;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 2px solid #fff;
	background: #e5484d;
}
html body #nl-unread-dot.visible {
	animation: nlc-pop 0.45s var(--nlc-ease) both;
}
html body #nl-unread-dot.visible::after {
	content: "";
	position: absolute;
	inset: -4px;
	border: 2px solid #e5484d;
	border-radius: 50%;
	opacity: 0;
	animation: nlc-ring 1.6s cubic-bezier(0, 0, 0.2, 1) 0.5s 3;
}

/* ---------- Panel ---------- */
html body #nl-chat-window {
	box-sizing: border-box;
	bottom: 72px;
	width: 380px;
	height: 600px;
	height: min(600px, calc(100vh - 120px));
	height: min(600px, calc(100dvh - 120px));
	max-height: none;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(11, 31, 58, 0.06), 0 2px 6px rgba(11, 31, 58, 0.06), 0 28px 64px -16px rgba(11, 31, 58, 0.4);
	opacity: 0;
	transform: none;
	scale: 0.96;
	translate: 0 10px;
	transform-origin: 100% 100%;
	/* Hidden, not just transparent: the closed panel leaves the tab order. */
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.16s ease, scale 0.2s ease, translate 0.2s ease, visibility 0s linear 0.2s;
}
html body #nl-chat-window.open {
	opacity: 1;
	transform: none;
	scale: 1;
	translate: 0 0;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.22s var(--nlc-ease), scale 0.4s var(--nlc-ease), translate 0.4s var(--nlc-ease), visibility 0s;
}

/* ---------- Header ---------- */
html body #nl-chat-header {
	position: relative;
	box-sizing: border-box;
	gap: 12px;
	min-height: 72px;
	padding: 14px 12px 14px 16px;
	background: radial-gradient(120% 160% at 100% 0%, rgba(26, 95, 180, 0.6) 0%, rgba(26, 95, 180, 0) 60%), #0b1f3a;
	color: #fff;
}
html body #nl-chat-header .nl-header-avatar {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nlc-avatar);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
}
/* The plugin's logo image gives way to the avatar above (the title next
   to it already names NetLayers). */
html body #nl-chat-header .nl-header-cloud-img {
	display: none;
}
/* Presence: a green badge on the avatar (::after) and a sonar ring (::before). */
html body #nl-chat-header .nl-header-avatar::before,
html body #nl-chat-header .nl-header-avatar::after {
	content: "";
	position: absolute;
	right: -1px;
	bottom: -1px;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}
html body #nl-chat-header .nl-header-avatar::before {
	border: 2px solid #22c55e;
	opacity: 0;
}
html body #nl-chat-header .nl-header-avatar::after {
	border: 2px solid #0b1f3a;
	background: #22c55e;
}
html body #nl-chat-window.open .nl-header-avatar::before {
	animation: nlc-ring 2.4s cubic-bezier(0, 0, 0.2, 1) 0.6s infinite;
}
html body #nl-chat-header .nl-header-info {
	gap: 2px;
	min-width: 0;
}
html body #nl-chat-header .nl-header-info strong {
	overflow: hidden;
	color: #fff;
	font: 700 15px/1.3 var(--nlc-font);
	letter-spacing: -0.01em;
	text-overflow: ellipsis;
	white-space: nowrap;
}
html body #nl-chat-header .nl-online-dot {
	display: none;
}
html body #nl-chat-header .nl-online-text {
	color: rgba(255, 255, 255, 0.74);
	font-size: 12.5px;
	line-height: 1.3;
	opacity: 1;
}
html body #nl-chat-close {
	display: grid;
	flex: none;
	place-items: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	opacity: 1;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
	html body #nl-chat-close:hover {
		background: rgba(255, 255, 255, 0.12);
	}
}
html body #nl-chat-close:active {
	background: rgba(255, 255, 255, 0.18);
}
html body #nl-chat-close:focus-visible {
	outline: 2px solid var(--nlc-ring);
	outline-offset: 1px;
}
html body #nl-chat-close svg {
	display: block;
	width: 18px;
	height: 18px;
}
html body #nl-chat-close svg line {
	stroke-width: 2.25;
}

/* ---------- Conversation ---------- */
/* The thread takes its own height (and scrolls once it is taller than the
   room left); the suggestions sit right under it and take the slack, and
   the composer is pinned to the bottom. */
html body #nl-chat-messages {
	box-sizing: border-box;
	flex: 0 1 auto;
	min-height: 0;
	gap: 14px;
	padding: 20px 16px 8px;
	background: #fff;
	overscroll-behavior: contain;
	scrollbar-color: #cfd8e3 transparent;
	scrollbar-width: thin;
}
html body #nl-chat-messages::-webkit-scrollbar {
	width: 6px;
}
html body #nl-chat-messages::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: #cfd8e3;
}
html body #nl-chat-messages .nl-msg {
	max-width: 80%;
	animation: nlc-msg-in 0.4s var(--nlc-ease) both;
}
html body #nl-chat-messages .nl-msg.user {
	transform-origin: 100% 100%;
}
html body #nl-chat-messages .nl-msg.bot {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: end;
	column-gap: 8px;
	max-width: 90%;
	transform-origin: 0 100%;
}
html body #nl-chat-messages .nl-msg.bot::before {
	content: "";
	grid-row: 1;
	grid-column: 1;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--nlc-avatar);
}
html body #nl-chat-messages .nl-msg.bot .nl-msg-bubble {
	grid-row: 1;
	grid-column: 2;
}
html body #nl-chat-messages .nl-msg.bot .nl-msg-time {
	grid-row: 2;
	grid-column: 2;
}
html body #nl-chat-messages .nl-msg-bubble {
	padding: 10px 14px;
	border-radius: 18px;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
	word-break: normal;
	/* Replies arrive as plain text: keep their line breaks and lists. */
	white-space: pre-line;
}
html body #nl-chat-messages .nl-msg.bot .nl-msg-bubble {
	border-radius: 18px 18px 18px 6px;
	background: #f1f4f9;
	color: var(--nlc-text);
}
html body #nl-chat-messages .nl-msg.user .nl-msg-bubble {
	border-radius: 18px 18px 6px 18px;
	background: var(--nlc-blue);
	color: #fff;
}
html body #nl-chat-messages .nl-msg-time {
	margin-top: 4px;
	padding: 0 4px;
	color: #64748b;
	font-size: 11px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
html body #nl-chat-messages .nl-typing .nl-msg-bubble {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 15px 16px;
}
html body #nl-chat-messages .nl-typing-dot {
	width: 6px;
	height: 6px;
	background: #6b7a8d;
	animation: nlc-typing 1.2s ease-in-out infinite;
}
html body #nl-chat-messages .nl-typing-dot:nth-child(2) {
	animation-delay: 0.15s;
}
html body #nl-chat-messages .nl-typing-dot:nth-child(3) {
	animation-delay: 0.3s;
}

/* ---------- Suggested questions ---------- */
/* On the visitor's side, as things they might say. They wait for the
   greeting (the plugin hides them itself after the first message). */
html body #nl-quick-replies {
	box-sizing: border-box;
	flex: 1 0 auto;
	align-content: flex-start;
	justify-content: flex-end;
	gap: 8px;
	padding: 4px 16px 16px;
}
html body #nl-chat-window:not(:has(.nl-msg:not(.nl-typing))) #nl-quick-replies {
	display: none;
}
html body #nl-quick-replies .nl-quick-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 36px;
	margin: 0;
	padding: 0 14px 0 12px;
	border: 1px solid #b9cfeb;
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	color: var(--nlc-blue);
	font: 600 13px/1.2 var(--nlc-font);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	animation: nlc-chip-in 0.45s var(--nlc-ease) 0.12s both;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, scale 0.15s var(--nlc-ease);
}
html body #nl-quick-replies .nl-quick-btn:nth-child(2) {
	animation-delay: 0.18s;
}
html body #nl-quick-replies .nl-quick-btn:nth-child(3) {
	animation-delay: 0.24s;
}
html body #nl-quick-replies .nl-quick-btn:nth-child(4) {
	animation-delay: 0.3s;
}
html body #nl-quick-replies .nl-quick-icon {
	flex: none;
	width: 16px;
	height: 16px;
}
/* Older markup: drop the emoji (or WordPress's emoji image). */
html body #nl-quick-replies .nl-quick-btn img.emoji {
	display: none !important;
}
@media (hover: hover) and (pointer: fine) {
	html body #nl-quick-replies .nl-quick-btn:hover {
		border-color: var(--nlc-blue);
		background: #eef4fc;
		color: var(--nlc-blue-dark);
	}
}
html body #nl-quick-replies .nl-quick-btn:active {
	scale: 0.96;
}
html body #nl-quick-replies .nl-quick-btn:focus-visible {
	outline: 3px solid var(--nlc-ring);
	outline-offset: 2px;
}

/* ---------- Composer ---------- */
html body #nl-chat-input-area {
	box-sizing: border-box;
	gap: 8px;
	margin-top: auto;
	padding: 12px;
	border-top: 1px solid #e9eef5;
	background: #fff;
}
html body #nl-chat-input {
	box-sizing: border-box;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #d8e1ec;
	border-radius: 22px;
	background: #f6f8fb;
	box-shadow: none;
	color: var(--nlc-navy);
	font: 400 14px/1.4 var(--nlc-font);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
html body #nl-chat-input::placeholder {
	color: var(--nlc-muted);
	opacity: 1;
}
html body #nl-chat-input:focus,
html body #nl-chat-input:focus-visible {
	border-color: var(--nlc-blue);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.18);
	outline: none;
}
html body #nl-chat-send {
	display: grid;
	flex: none;
	place-items: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--nlc-blue);
	color: #fff;
	transform: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease, color 0.2s ease, scale 0.15s var(--nlc-ease);
}
html body #nl-chat-send svg {
	display: block;
	width: 18px;
	height: 18px;
	translate: -1px 1px; /* the plane's optical centre */
}
html body #nl-chat-send:hover {
	background: var(--nlc-blue);
	transform: none;
}
@media (hover: hover) and (pointer: fine) {
	html body #nl-chat-send:hover {
		background: var(--nlc-blue-dark);
	}
}
/* Nothing typed yet: the send button rests in grey. */
html body #nl-chat-input:placeholder-shown + #nl-chat-send {
	background: #e8edf4;
	color: var(--nlc-muted);
}
html body #nl-chat-send:active {
	scale: 0.92;
}
html body #nl-chat-send:focus-visible {
	outline: 3px solid var(--nlc-ring);
	outline-offset: 2px;
}

/* Back-to-top would sit under the open panel. */
html body:has(#nl-chat-window.open) #back-to-top {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ---------- Phones: a full-screen sheet ---------- */
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
	html body #nl-chat-window {
		position: fixed;
		inset: 0;
		width: auto;
		height: auto;
		border-radius: 0;
		box-shadow: none;
		scale: 1;
		translate: 0 32px;
		transform-origin: 50% 100%;
	}
	html body #nl-chat-window.open {
		translate: 0 0;
	}
	html body #nl-chat-header {
		min-height: 64px;
		padding: max(12px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
	}
	html body #nl-chat-close {
		width: 44px;
		height: 44px;
	}
	html body #nl-chat-messages,
	html body #nl-quick-replies {
		padding-right: max(16px, env(safe-area-inset-right));
		padding-left: max(16px, env(safe-area-inset-left));
	}
	html body #nl-quick-replies .nl-quick-btn {
		min-height: 40px;
		font-size: 14px;
	}
	html body #nl-chat-input-area {
		padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	}
	html body:has(#nl-chat-window.open) #nl-chat-bubble {
		visibility: hidden;
	}
	html:has(#nl-chat-window.open),
	html:has(#nl-chat-window.open) body {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body #nl-chat-window,
	html body #nl-chat-window.open {
		scale: 1;
		translate: none;
	}
	html body #nl-chat-bubble:hover {
		translate: none;
	}
	html body #nl-chat-messages {
		scroll-behavior: auto;
	}
	html body #nl-chat-messages .nl-msg,
	html body #nl-quick-replies .nl-quick-btn,
	html body #nl-chat-bubble .nl-bubble-icon[style] svg,
	html body #nl-unread-dot.visible {
		animation: nlc-fade 0.2s ease both;
	}
	html body #nl-unread-dot.visible::after,
	html body #nl-chat-window.open .nl-header-avatar::before {
		animation: none;
	}
	html body #nl-chat-messages .nl-typing-dot {
		animation-name: nlc-typing-fade;
	}
}

@media (forced-colors: active) {
	html body #nl-chat-window,
	html body #nl-chat-messages .nl-msg-bubble {
		border: 1px solid CanvasText;
	}
	html body #nl-chat-bubble,
	html body #nl-chat-send {
		border: 1px solid ButtonText;
	}
}

@media print {
	html body #nl-chat-root {
		display: none;
	}
}

@keyframes nlc-icon-in {
	from {
		opacity: 0;
		rotate: -90deg;
		scale: 0.6;
	}
	to {
		opacity: 1;
		rotate: 0deg;
		scale: 1;
	}
}
@keyframes nlc-pop {
	from {
		opacity: 0;
		scale: 0.4;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}
@keyframes nlc-ring {
	0% {
		opacity: 0.75;
		scale: 1;
	}
	80%,
	100% {
		opacity: 0;
		scale: 2;
	}
}
@keyframes nlc-msg-in {
	from {
		opacity: 0;
		translate: 0 8px;
		scale: 0.98;
	}
	to {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}
}
@keyframes nlc-chip-in {
	from {
		opacity: 0;
		translate: 0 6px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}
@keyframes nlc-typing {
	0%,
	60%,
	100% {
		opacity: 0.4;
		translate: 0 0;
	}
	30% {
		opacity: 1;
		translate: 0 -3px;
	}
}
@keyframes nlc-typing-fade {
	0%,
	60%,
	100% {
		opacity: 0.4;
	}
	30% {
		opacity: 1;
	}
}
@keyframes nlc-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* NETLAYERS CHAT WIDGET — END */

/* =========================================================
   NETLAYERS SERVICES MENU — BEGIN (2026-10-14)
   The Services mega menu (header.php markup, main.js switching).
   Each category's panel opens with a photo banner that links to
   the category page ("View all"); its options are rows with a
   line icon in the category's colour, a title and one line,
   and an arrow that slides in on hover; the quote box has a
   headset with a live dot and a solid button. The menu narrows
   to 750px between 1101 and 1180px so it no longer runs off the
   right edge there.
   Motion: the menu fades and drops 6px into place (0.24s, house
   ease-out); switching category raises the new panel's banner
   and rows 4px with a 20ms stagger; the banner photo zooms
   slowly (16s) and the live dot pings while the menu is open.
   Reduced motion: no movement.
   '!important' only where an older services-menu layer in this
   file is itself !important. Rollback: delete this block (the
   header.php markup still reads well without it).
   ========================================================= */
html body .nav-mega--services {
	--nlx-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--nlx-navy: #0b1f3a;
	--nlx-text: #1f2d3d;
	--nlx-muted: #5b6b7f;
	--nlx-line: #e4ebf4;
	--nlx-ring: #82b8ed;
	--nlx-accent: #1a5fb4;
	--nlx-accent-soft: #e8f1fc;
	width: 820px !important;
	border-top: 3px solid var(--nl-blue-600, #1a5fb4);
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 28px 60px -16px rgba(11, 31, 58, 0.3) !important;
	transform: none;
	translate: 0 6px;
	transition: opacity 0.16s ease, translate 0.2s ease, visibility 0s linear 0.2s;
}
html body .nav-item--services:hover > .nav-mega--services,
html body .nav-item--services.is-open > .nav-mega--services {
	transform: none;
	translate: 0 0;
	transition: opacity 0.2s var(--nlx-ease), translate 0.24s var(--nlx-ease), visibility 0s;
}
html body .nav-mega--services .services-mega {
	grid-template-columns: 250px minmax(0, 1fr) !important;
}

/* ---------- Categories ---------- */
html body .nav-mega--services .services-mega__sidebar {
	gap: 2px !important;
	padding: 16px 12px !important;
	border-right: 1px solid var(--nlx-line);
	background: #f6f9fe !important;
}
html body .nav-mega--services .services-mega__sidebar-label {
	margin: 0;
	padding: 0 10px 8px;
	color: var(--nlx-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
html body .nav-mega--services .services-category {
	--nlx-cat: #1a5fb4;
	position: relative;
	align-items: center !important;
	gap: 12px !important;
	padding: 10px 34px 10px 10px !important;
	border-radius: 12px !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
html body .nav-mega--services .services-category[data-service-group="voice"],
html body .nav-mega--services .services-category[data-service-group="phone"] {
	--nlx-cat: #0b8a6e;
}
html body .nav-mega--services .services-category[data-service-group="tv"] {
	--nlx-cat: #6d28d9;
}
html body .nav-mega--services .services-category[data-service-group="web-solutions"] {
	--nlx-cat: #0e7490;
}
html body .nav-mega--services .services-category[data-service-group="bundles"] {
	--nlx-cat: #c25e0c;
}
html body .nav-mega--services .services-category:hover {
	background: rgba(255, 255, 255, 0.72) !important;
	box-shadow: none !important;
}
html body .nav-mega--services .services-category.is-active {
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 8px 18px -10px rgba(11, 31, 58, 0.22), inset 0 0 0 1px rgba(178, 194, 214, 0.5) !important;
}
html body .nav-mega--services .services-category:focus-visible {
	outline: 3px solid var(--nlx-ring);
	outline-offset: 1px;
}
/* A chevron marks the category the panel is showing. */
html body .nav-mega--services .services-category::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: currentColor;
	color: #9aa8b8;
	opacity: 0;
	translate: -4px 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: opacity 0.2s ease, translate 0.25s var(--nlx-ease), color 0.2s ease;
}
html body .nav-mega--services .services-category:hover::after {
	opacity: 0.7;
	translate: 0 0;
}
html body .nav-mega--services .services-category.is-active::after {
	color: var(--nlx-cat);
	opacity: 1;
	translate: 0 0;
}
html body .nav-mega--services .services-category__text {
	min-width: 0;
}
html body .nav-mega--services .services-category__text strong {
	color: var(--nlx-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}
html body .nav-mega--services .services-category__text small {
	margin-top: 2px;
	color: var(--nlx-muted);
	font-size: 12px;
	line-height: 1.35;
	text-wrap: pretty;
}

/* ---------- Panel ---------- */
html body .nav-mega--services .services-mega__panels {
	padding: 14px !important;
}
html body .nav-mega--services .services-panel.is-active {
	flex: 1 1 auto;
}
html body .nav-mega--services [data-service-panel="voice"],
html body .nav-mega--services [data-service-panel="phone"] {
	--nlx-accent: #0b8a6e;
	--nlx-accent-soft: #e3f5f0;
}
html body .nav-mega--services [data-service-panel="tv"] {
	--nlx-accent: #6d28d9;
	--nlx-accent-soft: #f1ebfd;
}
html body .nav-mega--services [data-service-panel="web-solutions"] {
	--nlx-accent: #0e7490;
	--nlx-accent-soft: #e3f4f8;
}
html body .nav-mega--services [data-service-panel="bundles"] {
	--nlx-accent: #c25e0c;
	--nlx-accent-soft: #fdf1e5;
}

/* Photo banner: the category, its line, and a way to its page. Every
   category's banner is the same height ("One photo size" below). */
html body .nav-mega--services .services-panel__hero {
	position: relative;
	isolation: isolate;
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 12px;
	min-height: 124px;
	margin: 0 0 10px;
	padding: 16px 16px 16px 18px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--nlx-navy);
	color: #fff;
	text-decoration: none;
}
html body .nav-mega--services .services-panel__hero-img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 70% 50%;
	transform-origin: 70% 50%;
}
html body .nav-mega--services [data-service-panel="voice"] .services-panel__hero-img {
	object-position: 100% 50%;
	transform-origin: 85% 50%;
}
html body .nav-mega--services [data-service-panel="tv"] .services-panel__hero-img {
	object-position: 70% 30%; /* keep the wall-mounted TV in the strip */
}
html body .nav-mega--services [data-service-panel="data-centre"] .services-panel__hero-img {
	object-position: 60% 40%;
}
html body .nav-mega--services [data-service-panel="web-solutions"] .services-panel__hero-img {
	object-position: 60% 55%;
}
html body .nav-mega--services .services-panel__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Dark where the words sit (bottom left), clear over the rest of the photo. */
	background:
		linear-gradient(0deg, rgba(11, 31, 58, 0.94) 0%, rgba(11, 31, 58, 0.62) 42%, rgba(11, 31, 58, 0.08) 82%),
		linear-gradient(90deg, rgba(11, 31, 58, 0.6) 0%, rgba(11, 31, 58, 0) 62%);
}
html body .nav-mega--services .services-panel__hero-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 330px;
}
html body .nav-mega--services .services-panel__hero-title {
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
html body .nav-mega--services .services-panel__hero-copy {
	color: rgba(255, 255, 255, 0.84);
	font-size: 13px;
	line-height: 1.45;
	text-wrap: pretty;
}
html body .nav-mega--services .services-panel__hero-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.2s ease, color 0.2s ease;
}
html body .nav-mega--services .services-panel__hero-more svg {
	width: 14px;
	height: 14px;
	transition: translate 0.25s var(--nlx-ease);
}
html body .nav-mega--services .services-panel__hero:hover .services-panel__hero-more {
	background: #fff;
	color: var(--nlx-navy);
}
html body .nav-mega--services .services-panel__hero:hover .services-panel__hero-more svg {
	translate: 2px 0;
}
html body .nav-mega--services .services-panel__hero:focus-visible {
	outline: 3px solid var(--nlx-ring);
	outline-offset: 2px;
}
/* Ongoing motion while the menu is open: a slow push into the photo. */
html body .nav-item--services:is(:hover, .is-open) .services-panel.is-active .services-panel__hero-img {
	animation: nlx-push 16s ease-in-out infinite alternate;
}

/* Options */
html body .nav-mega--services .services-panel__submenu {
	gap: 2px 6px !important;
	margin: 0 0 10px;
}
html body .nav-mega--services .services-panel__submenu a {
	display: grid !important;
	grid-template-columns: 34px minmax(0, 1fr) 14px;
	align-items: center;
	column-gap: 10px;
	min-height: 0 !important;
	max-height: none !important;
	padding: 9px 10px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit;
	transform: none !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease !important;
}
html body .nav-mega--services .services-panel__submenu a:hover {
	padding-left: 10px !important;
	background: #f3f6fb !important;
	box-shadow: none !important;
	transform: none !important;
}
html body .nav-mega--services .services-panel__submenu a:focus-visible {
	outline: 3px solid var(--nlx-ring);
	outline-offset: 1px;
	background: #f3f6fb !important;
}
html body .nav-mega--services .services-panel__submenu-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--nlx-accent-soft);
	color: var(--nlx-accent);
	transition: background-color 0.2s ease, color 0.2s ease;
}
html body .nav-mega--services .services-panel__submenu-icon svg {
	width: 18px;
	height: 18px;
}
html body .nav-mega--services .services-panel__submenu a:hover .services-panel__submenu-icon,
html body .nav-mega--services .services-panel__submenu a:focus-visible .services-panel__submenu-icon {
	background: var(--nlx-accent);
	color: #fff;
}
html body .nav-mega--services .services-panel__submenu-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
html body .nav-mega--services .services-panel__submenu-title {
	color: var(--nlx-navy) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3;
}
html body .nav-mega--services .services-panel__submenu-title::before {
	display: none !important;
}
html body .nav-mega--services .services-panel__submenu small {
	margin-top: 1px !important;
	color: var(--nlx-muted);
	font-size: 12.5px !important;
	line-height: 1.4 !important;
	text-wrap: pretty;
}
html body .nav-mega--services .services-panel__submenu-arrow {
	display: grid;
	color: var(--nlx-accent);
	opacity: 0;
	translate: -4px 0;
	transition: opacity 0.2s ease, translate 0.25s var(--nlx-ease);
}
html body .nav-mega--services .services-panel__submenu-arrow svg {
	width: 14px;
	height: 14px;
}
html body .nav-mega--services .services-panel__submenu a:hover .services-panel__submenu-arrow,
html body .nav-mega--services .services-panel__submenu a:focus-visible .services-panel__submenu-arrow {
	opacity: 1;
	translate: 0 0;
}

/* Quote box */
html body .nav-mega--services .services-panel__promo {
	display: grid !important;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin-top: auto !important;
	padding: 10px 10px 10px 12px !important;
	border: 0 !important;
	border-radius: 14px !important;
	background: #f3f6fb !important;
}
html body .nav-mega--services .services-panel__promo-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.08);
	color: var(--nlx-accent);
}
html body .nav-mega--services .services-panel__promo-icon svg {
	width: 20px;
	height: 20px;
}
html body .nav-mega--services .services-panel__promo-icon::before,
html body .nav-mega--services .services-panel__promo-icon::after {
	content: "";
	position: absolute;
	right: -1px;
	bottom: 0;
	box-sizing: border-box;
	width: 11px;
	height: 11px;
	border-radius: 50%;
}
html body .nav-mega--services .services-panel__promo-icon::before {
	border: 2px solid #22c55e;
	opacity: 0;
}
html body .nav-mega--services .services-panel__promo-icon::after {
	border: 2px solid #f3f6fb;
	background: #22c55e;
}
html body .nav-item--services:is(:hover, .is-open) .services-panel.is-active .services-panel__promo-icon::before {
	animation: nlx-ring 2.4s cubic-bezier(0, 0, 0.2, 1) 0.4s infinite;
}
html body .nav-mega--services .services-panel__promo-text {
	min-width: 0;
	color: var(--nlx-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}
html body .nav-mega--services .services-panel__promo-text span {
	margin-top: 1px;
	color: var(--nlx-muted);
	font-size: 12.5px;
	font-weight: 400;
	text-wrap: pretty;
}
html body .nav-mega--services .services-panel__promo-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: var(--nl-blue-600, #1a5fb4);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	transition: background-color 0.2s ease;
}
html body .nav-mega--services .services-panel__promo-link svg {
	width: 14px;
	height: 14px;
	transition: translate 0.25s var(--nlx-ease);
}
html body .nav-mega--services .services-panel__promo-link:hover {
	border: 0;
	background: #154f97;
	color: #fff;
}
html body .nav-mega--services .services-panel__promo-link:hover svg {
	translate: 2px 0;
}
html body .nav-mega--services .services-panel__promo-link:focus-visible {
	outline: 3px solid var(--nlx-ring);
	outline-offset: 2px;
}

/* Long categories (more than 8 options: Voice with the products) get three
   compact columns and a slimmer banner, so the menu stays short. */
html body .nav-mega--services .services-panel--dense .services-panel__hero {
	min-height: 96px;
}
html body .nav-mega--services .services-panel--dense .services-panel__submenu {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 2px 4px !important;
}
html body .nav-mega--services .services-panel--dense .services-panel__submenu a {
	grid-template-columns: 30px minmax(0, 1fr);
	column-gap: 9px;
	padding: 7px 8px !important;
}
html body .nav-mega--services .services-panel--dense .services-panel__submenu a:hover {
	padding-left: 8px !important;
}
html body .nav-mega--services .services-panel--dense .services-panel__submenu-icon {
	width: 30px;
	height: 30px;
	border-radius: 9px;
}
html body .nav-mega--services .services-panel--dense .services-panel__submenu-icon svg {
	width: 16px;
	height: 16px;
}
html body .nav-mega--services .services-panel--dense .services-panel__submenu-title {
	font-size: 13.5px !important;
}
html body .nav-mega--services .services-panel--dense .services-panel__submenu small {
	font-size: 12px !important;
	line-height: 1.35 !important;
}
html body .nav-mega--services .services-panel--dense .services-panel__submenu-arrow {
	display: none;
}

/* Switching category: the new panel's banner and rows rise in. */
html body .nav-mega--services .services-panel.is-active .services-panel__hero,
html body .nav-mega--services .services-panel.is-active .services-panel__submenu > a {
	animation: nlx-rise 0.26s var(--nlx-ease) both;
}
html body .nav-mega--services .services-panel.is-active .services-panel__submenu > a:nth-child(1) { animation-delay: 0.03s; }
html body .nav-mega--services .services-panel.is-active .services-panel__submenu > a:nth-child(2) { animation-delay: 0.05s; }
html body .nav-mega--services .services-panel.is-active .services-panel__submenu > a:nth-child(3) { animation-delay: 0.07s; }
html body .nav-mega--services .services-panel.is-active .services-panel__submenu > a:nth-child(4) { animation-delay: 0.09s; }
html body .nav-mega--services .services-panel.is-active .services-panel__submenu > a:nth-child(5) { animation-delay: 0.11s; }
html body .nav-mega--services .services-panel.is-active .services-panel__submenu > a:nth-child(6) { animation-delay: 0.13s; }
html body .nav-mega--services .services-panel.is-active .services-panel__submenu > a:nth-child(n+7) { animation-delay: 0.15s; }

/* 1101-1180px: narrower, so the menu stays on screen. */
@media (max-width: 1180px) {
	html body .nav-mega--services {
		width: 750px !important;
	}
	html body .nav-mega--services .services-mega {
		grid-template-columns: 232px minmax(0, 1fr) !important;
	}
	/* Three columns are too narrow for the lines here: names only. */
	html body .nav-mega--services .services-panel--dense .services-panel__submenu small {
		display: none;
	}
	html body .nav-mega--services .services-panel--dense .services-panel__submenu a {
		padding: 8px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body .nav-mega--services,
	html body .nav-item--services:hover > .nav-mega--services,
	html body .nav-item--services.is-open > .nav-mega--services {
		translate: none;
	}
	html body .nav-mega--services .services-panel.is-active .services-panel__hero,
	html body .nav-mega--services .services-panel.is-active .services-panel__submenu > a,
	html body .nav-item--services:is(:hover, .is-open) .services-panel.is-active .services-panel__hero-img,
	html body .nav-item--services:is(:hover, .is-open) .services-panel.is-active .services-panel__promo-icon::before {
		animation: none;
	}
	html body .nav-mega--services .services-category::after,
	html body .nav-mega--services .services-panel__submenu-arrow,
	html body .nav-mega--services .services-panel__hero-more svg,
	html body .nav-mega--services .services-panel__promo-link svg {
		translate: none !important;
	}
}

@media (forced-colors: active) {
	html body .nav-mega--services .services-category.is-active,
	html body .nav-mega--services .services-panel__submenu a:hover {
		outline: 1px solid CanvasText;
	}
}

@keyframes nlx-rise {
	from {
		opacity: 0;
		translate: 0 4px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}
@keyframes nlx-push {
	from {
		scale: 1;
	}
	to {
		scale: 1.08;
	}
}
@keyframes nlx-ring {
	0% {
		opacity: 0.75;
		scale: 1;
	}
	80%,
	100% {
		opacity: 0;
		scale: 2.2;
	}
}
/* One photo size for every category (owner, 2026-10-14): the banner is 150px
   tall everywhere (116px between 1101 and 1180px) instead of filling the
   height the options leave. Short categories keep their spare room above the
   quote box; Voice, the longest, makes the menu a little taller. */
html body .nav-mega--services .services-panel__hero,
html body .nav-mega--services .services-panel--dense .services-panel__hero {
	flex: 0 0 auto;
	height: 150px;
	min-height: 0;
}
@media (max-width: 1180px) {
	html body .nav-mega--services .services-panel__hero,
	html body .nav-mega--services .services-panel--dense .services-panel__hero {
		height: 116px;
	}
}

/* Products that aren't launched yet (owner, 2026-10-14): grey, so the live
   products stand out. They still open Contact Us, and screen readers hear
   "(coming soon)" after the name. The text greys keep 4.5:1 on white. */
html body .nav-mega--services .services-panel__submenu a.is-soon .services-panel__submenu-icon,
html body .nav-mega--services .services-panel__submenu a.is-soon:hover .services-panel__submenu-icon,
html body .nav-mega--services .services-panel__submenu a.is-soon:focus-visible .services-panel__submenu-icon {
	background: #eef0f3;
	color: #8b93a1;
}
html body .nav-mega--services .services-panel__submenu a.is-soon .services-panel__submenu-title,
html body .nav-mega--services .services-panel__submenu a.is-soon small {
	color: #6b7280 !important;
}
html body .nav-mega--services .services-panel__submenu a.is-soon .services-panel__submenu-arrow {
	color: #8b93a1;
}
html body .mobile-nav-drawer .mobile-nav-submenu-group a.is-soon {
	color: #6b7280 !important;
}
html body .nlx-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
/* NETLAYERS SERVICES MENU — END */

/* =========================================================================
   NETLAYERS FOOTER v2 - BEGIN (2026-10-15)
   Design read: site-wide footer for a Canadian business telecom and data
   centre, trust-first, NetLayers navy with the logo's cyan as the one accent.
   Dials: variance 4, motion 3, density 4.
   Kept short on purpose (owner: a longer footer "would be unnecessary", no
   map): one row (brand + social, Services and Company, Contact) and the
   legal row. About the height of the old footer on desktop, about half of
   it on phones.
   Motion: hover and keyboard focus only (underline grows from the left,
   social icons lift 1px); the lift is off under reduced motion.
   ========================================================================= */
.nl-foot {
	--f-bg: #0b1f3a;                      /* --nl-blue-900 */
	--f-ink: #f2f6fb;                     /* headings, numbers: off-white */
	--f-text: rgba(214, 226, 243, 0.8);   /* links: 8.5:1 on the navy */
	--f-muted: rgba(196, 211, 232, 0.68); /* small print: 5.7:1 */
	--f-line: rgba(255, 255, 255, 0.1);
	--f-accent: #55bec8;                  /* the logo's "Inc." cyan, the one accent */
	--f-sky: #8cc4f2;
	--f-ease: cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	overflow-x: clip;                     /* nothing in here can make the page scroll sideways */
	background:
		radial-gradient(45% 90% at 92% 0%, rgba(85, 190, 200, 0.07), transparent 70%),
		var(--f-bg);
	color: var(--f-text);
	font-family: var(--nl-font, 'Inter', system-ui, -apple-system, sans-serif);
	-webkit-font-smoothing: antialiased;
}
.nl-foot *,
.nl-foot *::before,
.nl-foot *::after { box-sizing: border-box; }

/* :where() keeps this at zero specificity so each link class can set its own colour */
:where(.nl-foot) a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.nl-foot a:focus-visible { outline: 2px solid var(--f-sky); outline-offset: 3px; border-radius: 4px; }

.nl-foot__inner { padding-top: clamp(2.5rem, 4vw, 3.25rem); }

/* ---- One row: brand | Services + Company | Contact --------------------------- */
.nl-foot__main {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr) minmax(0, 1.25fr);
	grid-template-areas: "id nav contact";
	align-items: start;
	column-gap: clamp(2rem, 5vw, 4.5rem);
	row-gap: 2rem;
}
.nl-foot__id { grid-area: id; }
.nl-foot__nav { grid-area: nav; }
.nl-foot__contact { grid-area: contact; }

.nl-foot__brand { position: relative; display: inline-block; line-height: 0; }
/* logo.png is 400x266 with transparent padding round the mark; the negative
   margins trim it so the visible logo (117x88) is what lines up. */
.nl-foot__logo { display: block; width: 172px; height: auto; max-width: none; margin: -8px -27px -18px -27px; }
.nl-foot__leaf { position: absolute; left: 120px; top: 62px; line-height: 0; }
.nl-foot__leaf svg { display: block; width: 15px; height: 17px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35)); }

.nl-foot__line { margin: 0.85rem 0 0; max-width: 32ch; color: var(--f-text); font-size: 0.9rem; line-height: 1.55; text-wrap: pretty; }

.nl-foot__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.15rem 0 0; padding: 0; list-style: none; line-height: 0; }
.nl-foot__social a {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--f-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	color: var(--f-text);
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s var(--f-ease);
}
.nl-foot__social a:hover,
.nl-foot__social a:focus-visible { color: var(--f-ink); background-color: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.26); transform: translateY(-1px); }
.nl-foot__social a:focus-visible { border-radius: 50%; }
.nl-foot__social svg { width: 1rem; height: 1rem; }

/* ---- Lists ---------------------------------------------------------------- */
.nl-foot__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
.nl-foot__h {
	margin: 0.35rem 0 0.9rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--f-ink);
}
/* size and leading on the lists themselves, so the items don't inherit the page's taller line-height */
.nl-foot__list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; line-height: 1.4; }
.nl-foot__list svg { width: 0.8em; height: 0.8em; margin-left: 0.25em; vertical-align: -0.05em; color: var(--f-muted); }

/* ---- Contact (the office the location switcher is on) ------------------- */
.nl-foot__addr { display: grid; justify-items: start; gap: 0.65rem; font-style: normal; }
.nl-foot__call {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 0.55rem;
	color: var(--f-ink);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.nl-foot__num { transition: color 0.18s ease; }
.nl-foot__call:hover .nl-foot__num { color: var(--f-accent); }
.nl-foot__tag { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--f-muted); }
.nl-foot__reach { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; line-height: 1.35; }
.nl-foot__reach a { display: inline-flex; align-items: center; gap: 0.55rem; }
.nl-foot__reach svg { flex: none; width: 0.95rem; height: 0.95rem; color: var(--f-accent); }

/* underline that grows from the left on hover and keyboard focus */
.nl-foot__list a,
.nl-foot__reach a > span,
.nl-foot__legal a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: color 0.18s ease, background-size 0.28s var(--f-ease);
}
.nl-foot__list a:hover,
.nl-foot__list a:focus-visible,
.nl-foot__reach a:hover > span,
.nl-foot__reach a:focus-visible > span,
.nl-foot__legal a:hover,
.nl-foot__legal a:focus-visible { color: var(--f-ink); background-size: 100% 1px; }

/* ---- Legal row ---------------------------------------------------------------- */
.nl-foot__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.75rem;
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
	padding-block: 1.1rem 1.25rem;
	border-top: 1px solid var(--f-line);
	font-size: 0.8125rem;
	color: var(--f-muted);
}
.nl-foot__copy { margin: 0; color: var(--f-muted); }
.nl-foot__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0; padding: 0; list-style: none; line-height: 1.4; }

@media (min-width: 768px) {
	/* keep the last legal link clear of the floating chat button (95px from
	   the right edge): pad only what the page gutter doesn't already give */
	.nl-foot__base { padding-right: max(0px, calc(108px - (100vw - 100%) / 2)); }
}

/* tablets: Contact moves under the brand, the two lists keep the right side */
@media (max-width: 1023px) {
	.nl-foot__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "id nav" "contact nav"; }
}
@media (max-width: 767px) {
	.nl-foot__main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "contact" "nav"; }
	.nl-foot__nav { column-gap: 1rem; }
	.nl-foot__h { margin: 0 0 0.35rem; }
	/* thumb-sized rows; the underline still sits under the text */
	.nl-foot__list { gap: 0; }
	.nl-foot__list a,
	.nl-foot__reach a,
	.nl-foot__legal a { display: inline-flex; align-items: center; min-height: 2.5rem; }
	.nl-foot__reach { gap: 0; }
	.nl-foot__addr { gap: 0.35rem; }
	.nl-foot__social a { width: 2.75rem; height: 2.75rem; }
	.nl-foot__base { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); row-gap: 0.25rem; }
	.nl-foot__copy { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.nl-foot__social a:hover,
	.nl-foot__social a:focus-visible { transform: none; }
}
/* NETLAYERS FOOTER v2 - END */


/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT US AND SUPPORT DROPDOWNS v2 (2026-10-16)
   The two rich dropdowns (header.php) in the Services menu's language: a
   photo banner that links to the section's page, rows with a line icon in a
   soft tinted tile (one tint per link, the owner's choice) and a chevron that
   slides in, and a quote box with the one action.
   These rules sit on top of the earlier rich-dropdown rules above, so they
   are written with the same html body prefix the Services menu uses.
   ═══════════════════════════════════════════════════════════════════════════ */
html body .nav-mega--rich {
	--nlx-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--nlx-navy: #0b1f3a;
	--nlx-muted: #5b6b7f;
	--nlx-ring: #82b8ed;
	--nlx-accent: #1a5fb4;
	--nlx-accent-soft: #e8f1fc;
	width: 440px;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	border-top: 3px solid var(--nl-blue-600, #1a5fb4);
	border-radius: 0 0 20px 20px;
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 28px 60px -16px rgba(11, 31, 58, 0.3);
	transform: none;
	translate: 0 6px;
	transition: opacity 0.16s ease, translate 0.2s ease, visibility 0s linear 0.2s;
}
html body .nav-item--has-mega:hover > .nav-mega--rich,
html body .nav-item--has-mega.is-open > .nav-mega--rich {
	transform: none;
	translate: 0 0;
	transition: opacity 0.2s var(--nlx-ease), translate 0.24s var(--nlx-ease), visibility 0s;
}
html body .rich-dropdown--photo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
}
/* The banner: the section's photo, dark where the words sit, a pill to its page. */
html body .rich-dropdown__hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 12px;
	height: 136px;
	padding: 14px 14px 14px 16px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--nlx-navy);
	color: #fff;
	text-decoration: none;
}
html body .rich-dropdown__hero-img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 60% 45%;
	transform: scale(1);
	transition: transform 0.7s var(--nlx-ease);
}
html body .rich-dropdown__hero:hover .rich-dropdown__hero-img {
	transform: scale(1.04);
}
html body .rich-dropdown__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(11, 31, 58, 0.94) 0%, rgba(11, 31, 58, 0.62) 42%, rgba(11, 31, 58, 0.08) 82%), linear-gradient(90deg, rgba(11, 31, 58, 0.55) 0%, rgba(11, 31, 58, 0) 62%);
}
html body .rich-dropdown__hero-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
html body .rich-dropdown__hero-title {
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
html body .rich-dropdown__hero-copy {
	color: rgba(255, 255, 255, 0.84);
	font-size: 12.5px;
	line-height: 1.4;
	text-wrap: pretty;
}
html body .rich-dropdown__hero-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.2s ease, color 0.2s ease;
}
html body .rich-dropdown__hero-more svg {
	width: 14px;
	height: 14px;
	transition: translate 0.25s var(--nlx-ease);
}
html body .rich-dropdown__hero:hover .rich-dropdown__hero-more {
	background: #fff;
	color: var(--nlx-navy);
}
html body .rich-dropdown__hero:hover .rich-dropdown__hero-more svg {
	translate: 2px 0;
}
html body .rich-dropdown__hero:focus-visible {
	outline: 3px solid var(--nlx-ring);
	outline-offset: 2px;
}
/* The rows. */
html body .rich-dropdown--photo .rich-dropdown__items {
	gap: 2px;
	padding: 0;
	background: transparent;
}
html body .rich-dropdown--photo .rich-dropdown__item {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) 14px;
	align-items: center;
	column-gap: 10px;
	padding: 9px 10px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	transition: background-color 0.2s ease;
}
html body .rich-dropdown--photo .rich-dropdown__item:hover,
html body .rich-dropdown--photo .rich-dropdown__item:focus-visible {
	background: #f3f6fb;
	border-color: transparent;
	box-shadow: none;
}
html body .rich-dropdown--photo .rich-dropdown__item:focus-visible {
	outline: 3px solid var(--nlx-ring);
	outline-offset: 1px;
}
/* Each link keeps its colour from functions.php as a soft tint (the product
   pages' card colours), filling solid on hover. */
html body .rich-dropdown--photo .rich-dropdown__item {
	--nlx-tone: #0566db;
	--nlx-tone-soft: #e6f0ff;
}
html body .rich-dropdown--photo .rich-dropdown__item--teal {
	--nlx-tone: #15803d;
	--nlx-tone-soft: #dcfce7;
}
html body .rich-dropdown--photo .rich-dropdown__item--purple {
	--nlx-tone: #7c3aed;
	--nlx-tone-soft: #f3e8ff;
}
html body .rich-dropdown--photo .rich-dropdown__item--orange {
	--nlx-tone: #b45309;
	--nlx-tone-soft: #fef3c7;
}
html body .rich-dropdown--photo .rich-dropdown__item--red {
	--nlx-tone: #be123c;
	--nlx-tone-soft: #ffe4e6;
}
html body .rich-dropdown--photo .rich-dropdown__item .rich-dropdown__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--nlx-tone-soft);
	color: var(--nlx-tone);
	box-shadow: none;
	transform: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
html body .rich-dropdown--photo .rich-dropdown__item:hover .rich-dropdown__icon,
html body .rich-dropdown--photo .rich-dropdown__item:focus-visible .rich-dropdown__icon {
	background: var(--nlx-tone);
	color: #fff;
	transform: none;
}
html body .rich-dropdown--photo .rich-dropdown__icon svg {
	width: 18px;
	height: 18px;
}
html body .rich-dropdown--photo .rich-dropdown__text {
	gap: 1px;
	min-width: 0;
}
html body .rich-dropdown--photo .rich-dropdown__text strong {
	color: var(--nlx-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}
html body .rich-dropdown--photo .rich-dropdown__text small {
	color: var(--nlx-muted);
	font-size: 12.5px;
	line-height: 1.4;
	text-wrap: pretty;
}
html body .rich-dropdown__arrow {
	display: grid;
	color: var(--nlx-tone, var(--nlx-accent));
	opacity: 0;
	translate: -4px 0;
	transition: opacity 0.2s ease, translate 0.25s var(--nlx-ease);
}
html body .rich-dropdown__arrow svg {
	width: 14px;
	height: 14px;
}
html body .rich-dropdown--photo .rich-dropdown__item:hover .rich-dropdown__arrow,
html body .rich-dropdown--photo .rich-dropdown__item:focus-visible .rich-dropdown__arrow {
	opacity: 1;
	translate: 0 0;
}
/* The quote box: the one action, on a quiet grey field. */
html body .rich-dropdown__promo {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin-top: 2px;
	padding: 10px 10px 10px 12px;
	border-radius: 14px;
	background: #f3f6fb;
}
html body .rich-dropdown__promo-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.08);
	color: var(--nlx-accent);
}
html body .rich-dropdown__promo-icon svg {
	width: 20px;
	height: 20px;
}
html body .rich-dropdown__promo-icon::after {
	content: "";
	position: absolute;
	right: -1px;
	bottom: 0;
	box-sizing: border-box;
	width: 11px;
	height: 11px;
	border: 2px solid #f3f6fb;
	border-radius: 50%;
	background: #22c55e;
}
html body .rich-dropdown__promo-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--nlx-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}
html body .rich-dropdown__promo-text span {
	margin-top: 1px;
	color: var(--nlx-muted);
	font-size: 12.5px;
	font-weight: 400;
	text-wrap: pretty;
}
html body .rich-dropdown__promo-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: var(--nl-blue-600, #1a5fb4);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
html body .rich-dropdown__promo-link svg {
	width: 14px;
	height: 14px;
	transition: translate 0.25s var(--nlx-ease);
}
html body .rich-dropdown__promo-link:hover {
	border: 0;
	background: #154f97;
	color: #fff;
}
html body .rich-dropdown__promo-link:hover svg {
	translate: 2px 0;
}
html body .rich-dropdown__promo-link:focus-visible {
	outline: 3px solid var(--nlx-ring);
	outline-offset: 2px;
}
/* Opening: the banner and the rows rise in, one after another. */
html body .nav-item--has-mega:hover > .nav-mega--rich .rich-dropdown__hero,
html body .nav-item--has-mega.is-open > .nav-mega--rich .rich-dropdown__hero,
html body .nav-item--has-mega:hover > .nav-mega--rich .rich-dropdown__item,
html body .nav-item--has-mega.is-open > .nav-mega--rich .rich-dropdown__item,
html body .nav-item--has-mega:hover > .nav-mega--rich .rich-dropdown__promo,
html body .nav-item--has-mega.is-open > .nav-mega--rich .rich-dropdown__promo {
	animation: nlx-rise 0.26s var(--nlx-ease) both;
}
html body .nav-mega--rich .rich-dropdown__item:nth-child(1) { animation-delay: 0.04s; }
html body .nav-mega--rich .rich-dropdown__item:nth-child(2) { animation-delay: 0.07s; }
html body .nav-mega--rich .rich-dropdown__item:nth-child(3) { animation-delay: 0.1s; }
html body .nav-mega--rich .rich-dropdown__item:nth-child(4) { animation-delay: 0.13s; }
html body .nav-mega--rich .rich-dropdown__item:nth-child(n+5) { animation-delay: 0.16s; }
html body .nav-mega--rich .rich-dropdown__promo { animation-delay: 0.18s; }
@media (max-width: 1180px) {
	html body .nav-mega--rich {
		width: 400px;
	}
	html body .rich-dropdown__hero {
		height: 120px;
	}
}
@media (prefers-reduced-motion: reduce) {
	html body .nav-mega--rich,
	html body .nav-item--has-mega:hover > .nav-mega--rich,
	html body .nav-item--has-mega.is-open > .nav-mega--rich {
		translate: none;
	}
	html body .nav-mega--rich .rich-dropdown__hero,
	html body .nav-mega--rich .rich-dropdown__item,
	html body .nav-mega--rich .rich-dropdown__promo {
		animation: none;
	}
	html body .rich-dropdown__hero-img,
	html body .rich-dropdown__hero:hover .rich-dropdown__hero-img {
		transform: none;
		transition: none;
	}
	html body .rich-dropdown__arrow,
	html body .rich-dropdown__hero-more svg,
	html body .rich-dropdown__promo-link svg {
		translate: none !important;
	}
}
@media (forced-colors: active) {
	html body .rich-dropdown--photo .rich-dropdown__item:hover {
		outline: 1px solid CanvasText;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES MENU, TINTED OPTIONS (2026-10-16)
   After the About Us and Support dropdowns took pastel tiles, the owner asked
   for "the same for the services options": each option's icon tile now has
   its own soft tint, cycling through the product pages' card colours by
   position in its panel (blue, green, purple, amber, teal), and fills solid in
   that tint on hover. The categories in the sidebar keep their own colours;
   products marked coming soon keep their grey (that rule outranks these).
   ═══════════════════════════════════════════════════════════════════════════ */
html body .nav-mega--services .services-panel__submenu > a:nth-child(5n+1) { --nlx-tone: #0566db; --nlx-tone-soft: #e6f0ff; }
html body .nav-mega--services .services-panel__submenu > a:nth-child(5n+2) { --nlx-tone: #15803d; --nlx-tone-soft: #dcfce7; }
html body .nav-mega--services .services-panel__submenu > a:nth-child(5n+3) { --nlx-tone: #7c3aed; --nlx-tone-soft: #f3e8ff; }
html body .nav-mega--services .services-panel__submenu > a:nth-child(5n+4) { --nlx-tone: #b45309; --nlx-tone-soft: #fef3c7; }
html body .nav-mega--services .services-panel__submenu > a:nth-child(5n+5) { --nlx-tone: #0f766e; --nlx-tone-soft: #ccfbf1; }
html body .nav-mega--services .services-panel__submenu a .services-panel__submenu-icon {
	background: var(--nlx-tone-soft, var(--nlx-accent-soft));
	color: var(--nlx-tone, var(--nlx-accent));
}
html body .nav-mega--services .services-panel__submenu a:hover .services-panel__submenu-icon,
html body .nav-mega--services .services-panel__submenu a:focus-visible .services-panel__submenu-icon {
	background: var(--nlx-tone, var(--nlx-accent));
	color: #fff;
}
html body .nav-mega--services .services-panel__submenu a .services-panel__submenu-arrow {
	color: var(--nlx-tone, var(--nlx-accent));
}
/* The categories in the sidebar follow: a soft tint of the category's colour,
   solid only for the category the panel is showing (and on hover), instead
   of the gradient tiles with drop shadows. */
html body .nav-mega--services .services-category {
	--nlx-cat-soft: #e8f1fc;
}
html body .nav-mega--services .services-category[data-service-group="voice"],
html body .nav-mega--services .services-category[data-service-group="phone"] {
	--nlx-cat-soft: #e3f5f0;
}
html body .nav-mega--services .services-category[data-service-group="tv"] {
	--nlx-cat-soft: #f1ebfd;
}
html body .nav-mega--services .services-category[data-service-group="web-solutions"] {
	--nlx-cat-soft: #e3f4f8;
}
html body .nav-mega--services .services-category[data-service-group="bundles"] {
	--nlx-cat-soft: #fdf1e5;
}
html body .nav-mega--services .services-category .services-category__icon {
	background: var(--nlx-cat-soft);
	color: var(--nlx-cat);
	box-shadow: none;
	transform: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
html body .nav-mega--services .services-category:hover .services-category__icon {
	transform: scale(1.04);
}
html body .nav-mega--services .services-category.is-active .services-category__icon,
html body .nav-mega--services .services-category:hover .services-category__icon {
	background: var(--nlx-cat);
	color: #fff;
}
@media (prefers-reduced-motion: reduce) {
	html body .nav-mega--services .services-category:hover .services-category__icon {
		transform: none;
	}
}