/* ============================================================
   BOOM I.T. — PARC DESIGN SYSTEM
   P: Proximity   A: Alignment   R: Repetition   C: Contrast
   ============================================================ */

:root {
  /* Brand Core */
  --navy:        #0f0a24;
  --navy-mid:    #1a0a2e;
  --navy-light:  #271644;
  --cyan:        #00c8f0;
  --cyan-dark:   #0099bb;
  --orange:      #f5a623;
  --orange-dark: #d98d14;
  --white:       #ffffff;

  /* The 5 Brand Dot Colors — extracted from logo */
  --dot-1: #e8312a; /* red    */
  --dot-2: #f5a623; /* orange */
  --dot-3: #f5e040; /* yellow */
  --dot-4: #44c96a; /* green  */
  --dot-5: #00c8f0; /* cyan   */

  /* Neutrals */
  --n900: #111827;
  --n800: #1f2937;
  --n700: #374151;
  --n600: #4b5563;
  --n400: #9ca3af;
  --n300: #d1d5db;
  --n200: #e5e7eb;
  --n100: #f3f4f6;
  --n50:  #f9fafb;

  /* Typography */
  --font-d: 'Barlow Condensed', sans-serif;
  --font-b: 'Barlow', sans-serif;

  /* Layout */
  --max-w: 1160px;
  --gutter: 32px;

  /* Spacing rhythm (8px base) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;

  /* Surfaces */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
  --shadow-elevated: 0 20px 60px rgba(0,0,0,0.25);
}

/* === RESET ================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.65;
  color: var(--n800);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--cyan); text-decoration: none; }
address { font-style: normal; }

/* === LAYOUT PRIMITIVES ===================================== */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section-pad { padding: var(--sp-12) 0; }
.section-pad--sm { padding: var(--sp-8) 0; }

/* PARC — ALIGNMENT: Every heading block uses same structure */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cyan-dark);
  margin-bottom: var(--sp-2);
}
.section-label--light { color: var(--cyan); }
.section-title {
  font-family: var(--font-d);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: var(--n900);
  margin-bottom: var(--sp-2);
}
.section-title--light { color: var(--white); }
.section-sub {
  font-size: 17px;
  color: var(--n600);
  line-height: 1.65;
  max-width: 560px;
}
.section-sub--light { color: rgba(255,255,255,0.62); }
.section-header { margin-bottom: var(--sp-6); }
.section-header--center { text-align: center; }
.section-header--center .section-sub { margin-left: auto; margin-right: auto; }

/* PARC — REPETITION: The 5-dot bar appears at start of every section heading */
.dot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: var(--sp-2);
}
.dot-bar .d {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-bar .d:nth-child(1) { background: var(--dot-1); }
.dot-bar .d:nth-child(2) { background: var(--dot-2); }
.dot-bar .d:nth-child(3) { background: var(--dot-3); }
.dot-bar .d:nth-child(4) { background: var(--dot-4); }
.dot-bar .d:nth-child(5) { background: var(--dot-5); }

/* PARC — REPETITION: Consistent button system */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-d);
  font-size: 17px;
  font-weight: 800;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all .18s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
  line-height: 1;
}
.btn-primary {
  background: var(--orange);
  color: var(--navy);
  border-color: var(--orange);
}
.btn-primary:hover {
  background: var(--orange-dark);
  color: var(--navy);
  border-color: var(--orange-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245,166,35,0.4);
}
.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.3);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.65);
  color: var(--white);
}
.btn-cyan {
  background: var(--cyan);
  color: var(--navy);
  border-color: var(--cyan);
}
.btn-cyan:hover {
  background: var(--cyan-dark);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,200,240,0.35);
}
.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--n200);
}
.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn-sm { font-size: 14px; padding: 10px 20px; }
.btn-lg { font-size: 19px; padding: 15px 34px; }

/* ============================================================
   NAVIGATION
   PARC — ALIGNMENT: Logo left, links centre, CTA right
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  gap: var(--sp-4);
}
.nav-logo img {
  height: 46px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0;
  flex: 1;
  justify-content: center;
}
.nav-item { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  height: 70px;
  color: rgba(255,255,255,0.72);
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  cursor: pointer;
}
.nav-link:hover, .nav-link.active {
  color: var(--white);
  border-bottom-color: var(--cyan);
}
.nav-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--navy-light);
  min-width: 240px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  overflow: hidden;
  border-top: 3px solid var(--cyan);
}
.nav-item:hover .nav-drop { display: block; }
.nav-drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  font-family: var(--font-b);
  text-decoration: none;
  transition: all .12s;
  border-left: 3px solid transparent;
}
.nav-drop a:hover {
  background: rgba(255,255,255,0.05);
  color: var(--white);
  border-left-color: var(--cyan);
  padding-left: 24px;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.nav-protect {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(0,200,240,0.1);
  border: 1px solid rgba(0,200,240,0.3);
  border-radius: 50px;
  color: var(--cyan);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-b);
  text-decoration: none;
  transition: all .18s;
  white-space: nowrap;
}
.nav-protect:hover {
  background: rgba(0,200,240,0.2);
  color: var(--cyan);
}
.nav-cta {
  background: var(--orange);
  color: var(--navy);
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: all .18s;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--orange-dark);
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245,166,35,0.4);
}

/* ============================================================
   HERO — Two-column: headline + CTA (quiz) side-by-side
   PARC — PROXIMITY: Hero copy and CTA in same section
   PARC — CONTRAST: Dark bg vs white card
   ============================================================ */
.hero {
  background: var(--navy);
  padding: var(--sp-10) 0;
  position: relative;
  overflow: hidden;
}
/* Subtle dot-grid texture */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,200,240,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
/* Subtle bottom glow */
.hero::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(0,200,240,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: var(--sp-8);
  align-items: start;
  position: relative;
  z-index: 2;
}

/* Hero left */
.hero-left { padding-top: var(--sp-2); }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,200,240,0.1);
  border: 1px solid rgba(0,200,240,0.28);
  color: var(--cyan);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: var(--sp-4);
  font-family: var(--font-b);
  letter-spacing: 0.5px;
}
.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulse 2.2s infinite;
  flex-shrink: 0;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.65)} }

.hero-title {
  font-family: var(--font-d);
  font-size: clamp(46px, 6vw, 80px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -1px;
  color: var(--white);
  margin-bottom: var(--sp-1);
}
.hero-title em {
  font-style: normal;
  color: var(--cyan);
}
.hero-usp-line {
  font-family: var(--font-d);
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 700;
  color: rgba(255,255,255,0.52);
  margin-bottom: var(--sp-4);
  line-height: 1.2;
}
.hero-usp-line strong {
  color: var(--orange);
  font-weight: 800;
}
.hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  max-width: 500px;
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}

/* Trust chips under hero text */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.hero-trust-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-b);
}
.hero-trust-chip .tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,200,240,0.2);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}

.hero-btns {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ============================================================
   HERO RIGHT — CTA Card (Quiz)
   PARC — CONTRAST: White card floats against dark hero
   PARC — PROXIMITY: All quiz elements grouped in one card
   ============================================================ */
.hero-cta-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  position: relative;
}
/* Coloured top accent bar — the 5 dots as a stripe */
.hero-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dot-1) 0%, var(--dot-2) 25%, var(--dot-3) 50%, var(--dot-4) 75%, var(--dot-5) 100%);
}
.hero-cta-card-header {
  padding: var(--sp-4) var(--sp-4) 0;
  border-bottom: 1px solid var(--n100);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.hero-cta-card-header .dot-bar { margin-bottom: var(--sp-1); }
.hero-cta-card-header h2 {
  font-family: var(--font-d);
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 4px;
}
.hero-cta-card-header p {
  font-size: 13px;
  color: var(--n500, #6b7280);
}

/* Quiz inside hero card */
.quiz-card-inner { padding: 0 var(--sp-4) var(--sp-4); }
.quiz-progress { margin-bottom: var(--sp-3); }
.quiz-progress-bar {
  height: 4px;
  background: var(--n200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dot-5), var(--dot-4));
  border-radius: 4px;
  transition: width .4s ease;
}
.quiz-progress-text {
  font-size: 12px;
  color: var(--n400);
  text-align: right;
  font-weight: 600;
  font-family: var(--font-b);
}
.quiz-q { display: none; }
.quiz-q.active { display: block; }
.quiz-q__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--cyan-dark);
  margin-bottom: 8px;
  font-family: var(--font-b);
}
.quiz-q__text {
  font-family: var(--font-d);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: var(--sp-3);
  line-height: 1.3;
}
.quiz-options { display: flex; flex-direction: column; gap: 7px; }
.quiz-opt {
  background: var(--n50);
  border: 2px solid var(--n200);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--n800);
  cursor: pointer;
  transition: all .13s;
  text-align: left;
  font-family: var(--font-b);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
.quiz-opt:hover {
  border-color: var(--cyan-dark);
  background: #e4f8fd;
  color: var(--navy);
}
.quiz-opt.selected {
  border-color: var(--cyan-dark);
  background: #e4f8fd;
  color: var(--navy);
  font-weight: 600;
}
.quiz-scale { display: flex; gap: 6px; }
.quiz-scale-btn {
  flex: 1;
  padding: 12px 6px;
  border: 2px solid var(--n200);
  border-radius: var(--radius-sm);
  background: var(--n50);
  cursor: pointer;
  font-family: var(--font-d);
  font-size: 18px;
  font-weight: 800;
  color: var(--n600);
  transition: all .13s;
  text-align: center;
}
.quiz-scale-btn:hover, .quiz-scale-btn.selected {
  border-color: var(--cyan-dark);
  background: #e4f8fd;
  color: var(--navy);
}
.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-3);
  gap: var(--sp-2);
}
.quiz-back {
  background: none;
  border: 2px solid var(--n200);
  color: var(--n400);
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font-b);
  font-weight: 600;
  transition: all .13s;
}
.quiz-back:hover { border-color: var(--n400); color: var(--n700); }
.quiz-next {
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--font-d);
  transition: all .18s;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .3px;
}
.quiz-next:hover { background: var(--navy-light); transform: translateY(-1px); }
.quiz-next:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }
.quiz-result { display: none; text-align: center; padding: var(--sp-2) 0; }
.quiz-result.active { display: block; }
.quiz-result__icon { font-size: 48px; margin-bottom: var(--sp-2); }
.quiz-result__title {
  font-family: var(--font-d);
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 10px;
}
.quiz-result__sub {
  font-size: 14px;
  color: var(--n600);
  margin-bottom: var(--sp-3);
  line-height: 1.6;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.quiz-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   TRUST BAR
   PARC — REPETITION: Same tick style as cards below
   ============================================================ */
.trust-bar {
  background: var(--navy-light);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-right: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--font-b);
}
.trust-item:last-child { border-right: none; }
.trust-tick {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}

/* ============================================================
   USP SECTION — "Tired of logging tickets?"
   PARC — CONTRAST: Dark section with clear two-column layout
   ============================================================ */
.usp {
  background: var(--navy);
  padding: var(--sp-12) 0;
  position: relative;
  overflow: hidden;
}
.usp::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,200,240,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.usp-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
  position: relative;
  z-index: 2;
}
.usp-left .section-title { color: var(--white); }
.usp-left .section-label { color: rgba(255,255,255,0.45); letter-spacing: 1.5px; }
.usp-lead {
  font-family: var(--font-d);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: var(--sp-3);
  letter-spacing: -0.5px;
}
.usp-lead span { color: var(--orange); }
.usp-body {
  font-size: 16px;
  color: rgba(255,255,255,0.58);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
  max-width: 460px;
}

/* Compare table */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: var(--sp-5);
}
.compare-col { padding: var(--sp-3); }
.compare-col--bad {
  background: rgba(255,255,255,0.03);
  border-right: 1px solid rgba(255,255,255,0.07);
}
.compare-col--good { background: rgba(0,200,240,0.07); }
.compare-col-title {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.compare-col--bad .compare-col-title { color: rgba(255,255,255,0.38); }
.compare-col--good .compare-col-title { color: var(--cyan); }
.compare-items { display: flex; flex-direction: column; gap: 9px; }
.compare-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
}
.compare-col--bad .compare-item { color: rgba(255,255,255,0.58); }
.compare-col--good .compare-item { color: rgba(255,255,255,0.88); font-weight: 600; }
.icon-x, .icon-ok {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}
.icon-x { background: rgba(232,49,42,0.2); color: #e8312a; }
.icon-ok { background: rgba(0,200,240,0.2); color: var(--cyan); }

/* Right panel — phone CTA */
.usp-right {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* 5-dot accent bar at top of card */
.usp-right::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dot-1) 0%, var(--dot-2) 25%, var(--dot-3) 50%, var(--dot-4) 75%, var(--dot-5) 100%);
}
.usp-right-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: var(--sp-3);
  font-family: var(--font-b);
}
.usp-right-headline {
  font-family: var(--font-d);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.0;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.usp-right-headline em {
  font-style: normal;
  color: var(--cyan);
  display: block;
}
.usp-right-tagline {
  font-family: var(--font-d);
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 700;
  color: var(--orange);
  margin-bottom: var(--sp-4);
  line-height: 1.35;
}
.phone-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--orange);
  color: var(--navy);
  padding: 16px 24px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  margin-bottom: var(--sp-2);
  transition: all .18s;
}
.phone-cta:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,166,35,0.4);
  color: var(--navy);
}
.phone-cta__num {
  font-family: var(--font-d);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}
.phone-cta__label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.72;
  font-family: var(--font-b);
  line-height: 1.3;
  text-align: left;
}
.usp-right-note {
  font-size: 13px;
  color: rgba(255,255,255,0.38);
  font-style: italic;
}

/* ============================================================
   HOW IT WORKS — 5 Steps
   PARC — REPETITION: Each step uses same structure + dot color
   PARC — ALIGNMENT: All step items align to same column grid
   ============================================================ */
.how-it-works {
  background: var(--n50);
  padding: var(--sp-12) 0;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
  position: relative;
}
/* Connecting line between steps */
.steps-grid::before {
  content: '';
  position: absolute;
  top: 48px;
  left: calc(10% + 24px);
  right: calc(10% + 24px);
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--n300) 0px,
    var(--n300) 10px,
    transparent 10px,
    transparent 20px
  );
  z-index: 0;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
/* PARC — REPETITION: Each step bubble uses one of the 5 dot colors */
.step-num {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
  border: 4px solid var(--white);
  box-shadow: 0 4px 18px rgba(0,0,0,0.1);
  flex-shrink: 0;
  transition: transform .2s;
}
.step:hover .step-num { transform: translateY(-3px); }
.step:nth-child(1) .step-num { background: var(--dot-1); }
.step:nth-child(2) .step-num { background: var(--dot-5); border-color: rgba(0,200,240,0.25); }
.step:nth-child(3) .step-num { background: var(--dot-4); }
.step:nth-child(4) .step-num { background: var(--dot-2); }
.step:nth-child(5) .step-num { background: var(--dot-3); }
.step-icon { font-size: 26px; line-height: 1; margin-bottom: 2px; }
.step-label {
  font-family: var(--font-d);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.5px;
}
.step:nth-child(5) .step-label { color: rgba(0,0,0,0.5); }
.step-title {
  font-family: var(--font-d);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 800;
  color: var(--n900);
  margin-bottom: 6px;
  line-height: 1.2;
}
.step-desc { font-size: 13px; color: var(--n600); line-height: 1.55; }

.how-callout {
  margin-top: var(--sp-6);
  text-align: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--navy);
  border-radius: var(--radius-lg);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.how-callout p {
  font-family: var(--font-d);
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4px;
}
.how-callout p span { color: var(--cyan); }
.how-callout small { font-size: 13px; color: rgba(255,255,255,0.42); }

/* ============================================================
   SERVICES — 8 cards
   PARC — REPETITION: All cards share same structure & size
   PARC — ALIGNMENT: Cards align on consistent grid
   ============================================================ */
.services {
  background: var(--white);
  padding: var(--sp-12) 0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.svc {
  background: var(--white);
  border: 1px solid var(--n200);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
  transition: all .2s ease;
  /* PARC — REPETITION: Colored left border cycles through 5 dots */
  border-left: 4px solid transparent;
}
.svc:nth-child(5n+1) { border-left-color: var(--dot-1); }
.svc:nth-child(5n+2) { border-left-color: var(--dot-2); }
.svc:nth-child(5n+3) { border-left-color: var(--dot-3); }
.svc:nth-child(5n+4) { border-left-color: var(--dot-4); }
.svc:nth-child(5n+5) { border-left-color: var(--dot-5); }
.svc:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: var(--n200);
  /* maintain left border on hover */
}
.svc:nth-child(5n+1):hover { border-left-color: var(--dot-1); }
.svc:nth-child(5n+2):hover { border-left-color: var(--dot-2); }
.svc:nth-child(5n+3):hover { border-left-color: var(--dot-3); }
.svc:nth-child(5n+4):hover { border-left-color: var(--dot-4); }
.svc:nth-child(5n+5):hover { border-left-color: var(--dot-5); }
.svc-icon {
  font-size: 28px;
  margin-bottom: var(--sp-2);
  line-height: 1;
}
.svc-title {
  font-family: var(--font-d);
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.2;
}
.svc-desc {
  font-size: 13.5px;
  color: var(--n600);
  line-height: 1.6;
}
.svc-arrow {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-3);
  color: var(--n300);
  font-size: 16px;
  opacity: 0;
  transform: translateX(-5px);
  transition: all .18s;
}
.svc:hover .svc-arrow { opacity: 1; transform: translateX(0); }

/* ============================================================
   TESTIMONIALS
   PARC — REPETITION: Matches service card shape/style
   ============================================================ */
.testimonials { background: var(--n50); padding: var(--sp-12) 0; }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.testi-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  border: 1px solid var(--n200);
  position: relative;
  transition: box-shadow .2s;
  /* PARC — REPETITION: Top border cycles through dot colors */
  border-top: 4px solid transparent;
}
.testi-card:nth-child(1) { border-top-color: var(--dot-1); }
.testi-card:nth-child(2) { border-top-color: var(--dot-4); }
.testi-card:nth-child(3) { border-top-color: var(--dot-5); }
.testi-card:hover { box-shadow: var(--shadow-card-hover); }
.testi-quote {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  font-size: 60px;
  color: var(--n200);
  font-family: Georgia, serif;
  line-height: 1;
}
.testi-stars { color: #fbbf24; font-size: 14px; margin-bottom: var(--sp-2); letter-spacing: 1px; }
.testi-text {
  font-size: 15px;
  color: var(--n700);
  line-height: 1.7;
  margin-bottom: var(--sp-3);
  font-style: italic;
}
.testi-author { display: flex; align-items: center; gap: var(--sp-2); }
.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.testi-name { font-weight: 700; font-size: 14px; color: var(--n900); }
.testi-role { font-size: 12px; color: var(--n400); }
/* ── Testimonial read-more clamp ── */
.testi-text-wrap { transition: max-height .35s ease; }
.testi-text-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3em;
  background: linear-gradient(transparent, var(--white));
  pointer-events: none;
}
.testi-more {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 6px 0 14px;
  color: var(--cyan-dark);
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  display: inline;
}
.testi-more:hover { text-decoration: underline; }

/* ============================================================
   PROTECTION CHECK CTA
   ============================================================ */
.protect-cta {
  background: linear-gradient(135deg, #0f5c48 0%, #0d7a5f 100%);
  padding: var(--sp-10) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.protect-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 36px 36px;
}
.protect-cta-inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.protect-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: var(--sp-3);
  font-family: var(--font-b);
}
.protect-cta h2 {
  font-family: var(--font-d);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: var(--white);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.5px;
}
.protect-cta h2 span { color: #7dffd3; }
.protect-cta p {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--sp-4);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}
.protect-checks {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.protect-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.protect-check-tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
}

/* ============================================================
   CONTACT FORM
   PARC — ALIGNMENT: Two-column, left info / right form
   PARC — PROXIMITY: Form fields grouped logically
   ============================================================ */
.contact { background: var(--white); padding: var(--sp-12) 0; }
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-8);
  align-items: start;
}
.contact-left h2 {
  font-family: var(--font-d);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.3px;
}
.contact-left > p { font-size: 15px; color: var(--n600); margin-bottom: var(--sp-4); line-height: 1.65; }
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.contact-detail-icon {
  width: 42px;
  height: 42px;
  background: var(--n100);
  border-radius: var(--radius-sm);
  border: 1px solid var(--n200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.contact-detail-label {
  font-size: 11px;
  color: var(--n400);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.contact-detail-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.contact-detail-val a { color: var(--navy); }
.contact-detail-val a:hover { color: var(--cyan-dark); }

/* Form styles */
.form-wrap {
  background: var(--n50);
  border: 1px solid var(--n200);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  border-top: 4px solid var(--cyan);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-3);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-field--full { grid-column: 1 / -1; }
.form-label {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 700;
  color: var(--n600);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.form-wrap input[type=text],
.form-wrap input[type=email],
.form-wrap input[type=tel],
.form-wrap select,
.form-wrap textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--n200);
  border-radius: var(--radius-sm);
  font-family: var(--font-b);
  font-size: 14px;
  color: var(--n900);
  background: var(--white);
  transition: border-color .15s;
  outline: none;
  appearance: none;
}
.form-wrap input:focus,
.form-wrap select:focus,
.form-wrap textarea:focus {
  border-color: var(--cyan-dark);
  box-shadow: 0 0 0 3px rgba(0,200,240,0.1);
}
.form-wrap textarea { min-height: 100px; resize: vertical; }
.form-submit {
  width: 100%;
  padding: 14px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-d);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: all .18s;
  letter-spacing: 0.3px;
  margin-top: var(--sp-2);
}
.form-submit:hover {
  background: var(--navy-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--navy);
  padding: var(--sp-8) 0 var(--sp-4);
  position: relative;
  overflow: hidden;
}
/* PARC — REPETITION: 5-dot bar at footer top */
.footer-dot-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dot-1) 0%, var(--dot-2) 25%, var(--dot-3) 50%, var(--dot-4) 75%, var(--dot-5) 100%);
}
.footer-inner { position: relative; z-index: 2; }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-6);
}
.footer-logo { margin-bottom: var(--sp-3); }
.footer-logo img { height: 42px; width: auto; }
.footer-tagline {
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: var(--sp-1);
}
.footer-desc { font-size: 13.5px; color: rgba(255,255,255,0.4); line-height: 1.7; max-width: 270px; }
.footer-col h4 {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: var(--sp-2);
}
.footer-col a {
  display: block;
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color .15s;
}
.footer-col a:hover { color: var(--white); }
.footer-social {
  display: flex;
  gap: 8px;
  margin-top: var(--sp-2);
}
.footer-social a {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: all .15s;
  margin-bottom: 0;
}
.footer-social a:hover { background: rgba(255,255,255,0.16); color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.28); }
.footer-legal { display: flex; gap: var(--sp-3); }
.footer-legal a { font-size: 12.5px; color: rgba(255,255,255,0.28); text-decoration: none; }
.footer-legal a:hover { color: rgba(255,255,255,0.6); }

/* ============================================================
   SECTION DIVIDER — The 5 dot visual separator
   PARC — REPETITION: Same dots from logo appear everywhere
   ============================================================ */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: var(--n200);
  max-width: 200px;
}
.divider-dots {
  display: flex;
  gap: 6px;
}
.divider-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.divider-dots span:nth-child(1) { background: var(--dot-1); }
.divider-dots span:nth-child(2) { background: var(--dot-2); }
.divider-dots span:nth-child(3) { background: var(--dot-3); }
.divider-dots span:nth-child(4) { background: var(--dot-4); }
.divider-dots span:nth-child(5) { background: var(--dot-5); }

/* Dark divider for dark sections */
.divider--dark .divider-line { background: rgba(255,255,255,0.1); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-right { max-width: 560px; }
  .usp-inner { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .steps-grid::before { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .section-pad { padding: var(--sp-8) 0; }
  .hero { padding: var(--sp-8) 0; }
  .hero-inner { gap: var(--sp-5); }
  .testi-grid { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .compare-col--bad { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .contact-inner { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field--full { grid-column: 1; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .hero-btns { flex-direction: column; max-width: 300px; }
  .hero-btns .btn { justify-content: center; }
}
@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .trust-item { width: 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
}

/* ============================================================
   SHARED SERVICE PAGE COMPONENTS
   (page-header, features-grid, cta-band, etc.
    used across all service/inner pages)
   ============================================================ */

.page-header{background:var(--navy);padding:var(--sp-10) 0 var(--sp-8);position:relative;overflow:hidden}

.page-header::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,200,240,.05) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}

.page-header::after{content:'';position:absolute;bottom:-80px;left:50%;transform:translateX(-50%);width:700px;height:200px;background:radial-gradient(ellipse,rgba(0,200,240,.07) 0%,transparent 70%);pointer-events:none}

.page-header-inner{position:relative;z-index:2}

.page-header-inner h1{font-family:var(--font-d);font-size:clamp(38px,5vw,68px);font-weight:900;color:var(--white);line-height:1.0;letter-spacing:-1px;margin-bottom:var(--sp-3)}

.page-header-inner h1 em{font-style:normal;color:var(--cyan)}

.page-header-inner p{font-size:18px;color:rgba(255,255,255,.62);max-width:560px;line-height:1.65}

.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.4);margin-bottom:var(--sp-4)}

.breadcrumb a{color:rgba(255,255,255,.4);text-decoration:none}

.breadcrumb a:hover{color:rgba(255,255,255,.7)}

.breadcrumb-sep{color:rgba(255,255,255,.2)}

.cta-band{background:var(--navy);padding:var(--sp-10) 0;text-align:center;position:relative;overflow:hidden}

.cta-band::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,200,240,.04) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}

.cta-band::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dot-1) 0%,var(--dot-2) 25%,var(--dot-3) 50%,var(--dot-4) 75%,var(--dot-5) 100%)}

.cta-band-inner{position:relative;z-index:2;max-width:640px;margin:0 auto}

.cta-band h2{font-family:var(--font-d);font-size:clamp(28px,4vw,48px);font-weight:900;color:var(--white);margin-bottom:var(--sp-2);letter-spacing:-.5px}

.cta-band h2 span{color:var(--cyan)}

.cta-band p{font-size:17px;color:rgba(255,255,255,.6);margin-bottom:var(--sp-5);line-height:1.65}

.cta-band-btns{display:flex;justify-content:center;gap:var(--sp-2);flex-wrap:wrap}

.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}

.feature-card{background:var(--white);border-radius:var(--radius-md);padding:var(--sp-4);border:1px solid var(--n200);transition:box-shadow .2s,transform .2s}

.feature-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}

.feature-card:nth-child(6n+1){border-left:4px solid var(--dot-1)}

.feature-card:nth-child(6n+2){border-left:4px solid var(--dot-2)}

.feature-card:nth-child(6n+3){border-left:4px solid var(--dot-3)}

.feature-card:nth-child(6n+4){border-left:4px solid var(--dot-4)}

.feature-card:nth-child(6n+5){border-left:4px solid var(--dot-5)}

.feature-card:nth-child(6n+6){border-left:4px solid var(--cyan)}

.feature-icon{font-size:28px;margin-bottom:var(--sp-2);line-height:1}

.feature-title{font-family:var(--font-d);font-size:18px;font-weight:800;color:var(--navy);margin-bottom:6px}

.feature-body{font-size:14px;color:var(--n600);line-height:1.65}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10);align-items:center}

.dark-panel{background:var(--navy);border-radius:var(--radius-lg);padding:var(--sp-6);position:relative;overflow:hidden}

.dark-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dot-1) 0%,var(--dot-2) 25%,var(--dot-3) 50%,var(--dot-4) 75%,var(--dot-5) 100%)}

.dark-panel-title{font-family:var(--font-d);font-size:clamp(20px,2.8vw,32px);font-weight:900;color:var(--white);margin-bottom:var(--sp-3);letter-spacing:-.3px;line-height:1.15}

.dark-panel-title em{font-style:normal;color:var(--cyan)}

.dark-panel-body{font-size:15px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:var(--sp-4)}

.check-list{list-style:none;display:flex;flex-direction:column;gap:10px}

.check-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:rgba(255,255,255,.82);line-height:1.5}

.check-tick{width:20px;height:20px;border-radius:50%;background:rgba(0,200,240,.2);color:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex-shrink:0;margin-top:1px}


/* ============================================================
   IT Support & Management — Page Specific
   ============================================================ */

.packages{background:var(--n50);padding:var(--sp-12) 0}


.packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);align-items:start}


.pkg{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--n200);overflow:hidden;transition:box-shadow .2s,transform .2s;position:relative}


.pkg:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}


.pkg--featured{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan),var(--shadow-elevated)}


.pkg-top-bar{height:4px}


.pkg--1 .pkg-top-bar{background:var(--dot-5)}


.pkg--2 .pkg-top-bar{background:linear-gradient(90deg,var(--dot-1),var(--dot-2),var(--dot-3),var(--dot-4),var(--dot-5))}


.pkg--3 .pkg-top-bar{background:var(--orange)}


.pkg-badge{position:absolute;top:var(--sp-3);right:var(--sp-3);background:var(--cyan);color:var(--navy);font-family:var(--font-d);font-size:11px;font-weight:800;padding:4px 12px;border-radius:50px;letter-spacing:.3px}


.pkg-body{padding:var(--sp-5) var(--sp-4) var(--sp-4)}


.pkg-tier{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp-1);font-family:var(--font-b)}


.pkg-name{font-family:var(--font-d);font-size:32px;font-weight:900;color:var(--navy);margin-bottom:8px;letter-spacing:-.3px}


.pkg-tagline{font-size:14px;color:var(--n600);margin-bottom:var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--n200);line-height:1.55}


.pkg-price{background:var(--n50);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-3);margin-bottom:var(--sp-4);border:1px solid var(--n200)}


.pkg-price-main{font-family:var(--font-d);font-size:24px;font-weight:900;color:var(--navy);margin-bottom:4px}


.pkg-price-note{font-size:12px;color:var(--n400);line-height:1.5}


.pkg-feats{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:var(--sp-5)}


.pkg-feat{font-size:13.5px;color:var(--n800);display:flex;align-items:flex-start;gap:9px;line-height:1.4}


.feat-check{width:19px;height:19px;border-radius:50%;background:rgba(0,200,240,.12);color:var(--cyan-dark);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex-shrink:0;margin-top:1px}


.feat-cross{width:19px;height:19px;border-radius:50%;background:var(--n100);color:var(--n400);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex-shrink:0;margin-top:1px}


.pkg-feat.not-included{color:var(--n400)}


.feat-section-label{font-family:var(--font-b);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--n400);padding-top:var(--sp-1);border-top:1px solid var(--n100);margin-top:var(--sp-1);grid-column:1/-1}


.pkg-cta{display:block;width:100%;padding:13px;text-align:center;border-radius:var(--radius-sm);font-family:var(--font-d);font-size:17px;font-weight:800;text-decoration:none;transition:all .18s;letter-spacing:.3px}


.pkg--1 .pkg-cta{background:transparent;color:var(--navy);border:2px solid var(--n200)}

.pkg--1 .pkg-cta:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}


.pkg--2 .pkg-cta{background:var(--cyan);color:var(--navy);border:2px solid var(--cyan)}

.pkg--2 .pkg-cta:hover{background:var(--cyan-dark);color:var(--white);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,200,240,.35)}


.pkg--3 .pkg-cta{background:var(--orange);color:var(--navy);border:2px solid var(--orange)}

.pkg--3 .pkg-cta:hover{background:var(--orange-dark);color:var(--navy);transform:translateY(-1px);box-shadow:0 6px 20px rgba(245,166,35,.4)}


.compare-section{background:var(--white);padding:var(--sp-12) 0}


.compare-table{width:100%;border-collapse:collapse;font-size:14px}


.compare-table th{background:var(--navy);color:var(--white);padding:14px 16px;text-align:left;font-family:var(--font-d);font-size:13px;font-weight:800;letter-spacing:.3px}


.compare-table th:not(:first-child){text-align:center}


.compare-table th.featured-col{background:var(--cyan-dark);color:var(--white)}


.compare-table td{padding:12px 16px;border-bottom:1px solid var(--n200);color:var(--n700);vertical-align:middle}


.compare-table td:not(:first-child){text-align:center}


.compare-table td.featured-col{background:rgba(0,200,240,.05)}


.compare-table tr:last-child td{border-bottom:none}


.compare-table tr:hover td{background:var(--n50)}

.compare-table tr:hover td.featured-col{background:rgba(0,200,240,.08)}


.compare-yes{color:var(--cyan-dark);font-size:18px;font-weight:900}


.compare-no{color:var(--n300);font-size:18px}


.compare-cat td{background:var(--n50)!important;font-family:var(--font-b);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--n400);padding:10px 16px}


.included-section{background:var(--n50);padding:var(--sp-12) 0}


.included-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}


.included-card{background:var(--white);border-radius:var(--radius-md);padding:var(--sp-4);border:1px solid var(--n200);transition:box-shadow .2s}


.included-card:hover{box-shadow:var(--shadow-card-hover)}


.included-icon{font-size:28px;margin-bottom:var(--sp-2);line-height:1}


.included-title{font-family:var(--font-d);font-size:18px;font-weight:800;color:var(--navy);margin-bottom:6px}


.included-body{font-size:13.5px;color:var(--n600);line-height:1.65}


.testi-section{background:var(--white);padding:var(--sp-12) 0}


/* ============================================================
   About — Page Specific
   ============================================================ */


.about-intro{background:var(--white);padding:var(--sp-12) 0}


.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10);align-items:center}


.about-body{font-size:16px;color:var(--n600);line-height:1.75;margin-bottom:var(--sp-3)}


.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}


.stat-box{text-align:center;padding:var(--sp-4) var(--sp-3);background:var(--n50);border-radius:var(--radius-md);border:1px solid var(--n200);border-top:4px solid var(--cyan)}


.stat-box__val{font-family:var(--font-d);font-size:42px;font-weight:900;color:var(--navy);line-height:1;display:block;margin-bottom:4px}


.stat-box__label{font-size:13px;color:var(--n600);font-weight:600}


.story-panel{background:var(--navy);padding:var(--sp-8) var(--sp-6);border-radius:var(--radius-lg);position:relative;overflow:hidden}


.story-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dot-1) 0%,var(--dot-2) 25%,var(--dot-3) 50%,var(--dot-4) 75%,var(--dot-5) 100%)}


.story-panel blockquote{font-family:var(--font-d);font-size:clamp(20px,2.5vw,30px);font-weight:700;color:var(--white);line-height:1.3;margin-bottom:var(--sp-4);padding-left:var(--sp-5);position:relative}


.story-panel blockquote::before{content:'“';position:absolute;left:0;top:-8px;font-size:60px;color:var(--cyan);opacity:.4;font-family:Georgia,serif;line-height:1}


.values-section{background:var(--n50);padding:var(--sp-12) 0}


.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}


.value-card{background:var(--white);border-radius:var(--radius-md);padding:var(--sp-5) var(--sp-4);border:1px solid var(--n200);transition:box-shadow .2s,transform .2s}


.value-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}


.value-card:nth-child(1){border-top:4px solid var(--dot-1)}

.value-card:nth-child(2){border-top:4px solid var(--dot-2)}


.value-card:nth-child(3){border-top:4px solid var(--dot-4)}

.value-card:nth-child(4){border-top:4px solid var(--dot-5)}


.value-icon{font-size:32px;margin-bottom:var(--sp-3);line-height:1}


.value-title{font-family:var(--font-d);font-size:22px;font-weight:900;color:var(--navy);margin-bottom:var(--sp-1)}


.value-body{font-size:14px;color:var(--n600);line-height:1.65}


.why-section{background:var(--white);padding:var(--sp-12) 0}


.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}


.why-item{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4);background:var(--n50);border-radius:var(--radius-md);border:1px solid var(--n200);transition:box-shadow .2s}


.why-item:hover{box-shadow:var(--shadow-card-hover)}


.why-icon{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--navy);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}


.why-title{font-family:var(--font-d);font-size:18px;font-weight:800;color:var(--navy);margin-bottom:6px}


.why-body{font-size:14px;color:var(--n600);line-height:1.6}


/* ============================================================
   Contact — Page Specific
   ============================================================ */

.contact-page{background:var(--white);padding:var(--sp-12) 0}


.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--sp-10);align-items:start}


.hours-panel{background:var(--navy);border-radius:var(--radius-md);padding:var(--sp-4);margin-top:var(--sp-5);border-top:4px solid var(--orange)}


.hours-panel h3{font-family:var(--font-d);font-size:18px;font-weight:800;color:var(--white);margin-bottom:var(--sp-2)}


.hours-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px}


.hours-row:last-child{border-bottom:none}


.hours-row .day{color:rgba(255,255,255,.55)}

.hours-row .time{color:var(--white);font-weight:600}


.hours-row .closed{color:rgba(255,255,255,.3)}


.emergency-band{background:var(--n50);border:1px solid var(--n200);border-radius:var(--radius-md);padding:var(--sp-4);margin-top:var(--sp-3);display:flex;align-items:flex-start;gap:var(--sp-3)}


.emergency-icon{font-size:28px;flex-shrink:0}


.emergency-title{font-family:var(--font-d);font-size:16px;font-weight:800;color:var(--navy);margin-bottom:4px}


.emergency-body{font-size:13.5px;color:var(--n600);line-height:1.6}


/* ============================================================
   Cyber Essentials — Page Specific
   ============================================================ */

.ce-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3);position:relative}

.ce-steps::before{content:'';position:absolute;top:40px;left:10%;right:10%;height:2px;background:repeating-linear-gradient(90deg,var(--n300) 0,var(--n300) 10px,transparent 10px,transparent 20px);z-index:0}

.ce-step{text-align:center;position:relative;z-index:1}

.ce-step-num{width:80px;height:80px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto var(--sp-3);border:3px solid var(--white);box-shadow:0 4px 18px rgba(0,0,0,.1)}

.ce-step:nth-child(1) .ce-step-num{background:var(--dot-1)}

.ce-step:nth-child(2) .ce-step-num{background:var(--dot-5)}

.ce-step:nth-child(3) .ce-step-num{background:var(--dot-4)}

.ce-step:nth-child(4) .ce-step-num{background:var(--dot-2)}

.ce-step:nth-child(5) .ce-step-num{background:var(--dot-3)}

.ce-step-icon{font-size:22px;line-height:1}

.ce-step-label{font-family:var(--font-d);font-size:9px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.5px}

.ce-step:nth-child(5) .ce-step-label{color:rgba(0,0,0,.4)}

.ce-step-title{font-family:var(--font-d);font-size:15px;font-weight:800;color:var(--n900);margin-bottom:6px}

.ce-step-desc{font-size:13px;color:var(--n600);line-height:1.55}

.controls-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3)}


/* ============================================================
   Microsoft 365 — Page Specific
   ============================================================ */

.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}

.plan-card{background:var(--white);border-radius:var(--radius-md);padding:var(--sp-5) var(--sp-4);border:1px solid var(--n200);transition:box-shadow .2s,transform .2s}

.plan-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}

.plan-name{font-family:var(--font-d);font-size:24px;font-weight:900;color:var(--navy);margin-bottom:4px}

.plan-sub{font-size:12px;color:var(--n400);font-weight:600;text-transform:uppercase;letter-spacing:.8px;margin-bottom:var(--sp-3)}

.plan-icon{font-size:32px;margin-bottom:var(--sp-2)}

.plan-body{font-size:14px;color:var(--n600);line-height:1.65;margin-bottom:var(--sp-4)}

.plan-feats{list-style:none;display:flex;flex-direction:column;gap:8px}

.plan-feat{font-size:13.5px;color:var(--n700);display:flex;align-items:flex-start;gap:8px}

.plan-feat-tick{width:18px;height:18px;border-radius:50%;background:rgba(0,200,240,.12);color:var(--cyan-dark);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;flex-shrink:0;margin-top:2px}


/* ============================================================
   Protection Check — Page Specific
   ============================================================ */


.header-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}


.header-chip{display:flex;align-items:center;gap:7px;background:rgba(0,200,240,.1);border:1px solid rgba(0,200,240,.25);border-radius:50px;padding:6px 16px;font-size:13px;font-weight:600;color:var(--cyan);font-family:var(--font-b)}



/* PROGRESS */
.check-progress-wrap{background:var(--navy-mid);border-bottom:1px solid rgba(255,255,255,.07)}


.check-progress-inner{max-width:var(--max-w);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;gap:var(--sp-4)}


.check-progress-bar-bg{flex:1;height:6px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden}


.check-progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--dot-5),var(--dot-4));border-radius:6px;transition:width .5s ease;width:0%}


.check-progress-label{font-size:13px;color:rgba(255,255,255,.5);font-weight:600;white-space:nowrap;font-family:var(--font-b);flex-shrink:0}


.check-tally{display:flex;gap:var(--sp-3);flex-shrink:0}


.tally-pill{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;font-family:var(--font-b)}


.tally-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}


.tally-dot-yes{background:var(--dot-4)}

.tally-dot-no{background:var(--dot-1)}

.tally-dot-unsure{background:var(--dot-2)}


.tally-yes{color:var(--dot-4)}

.tally-no{color:var(--dot-1)}

.tally-unsure{color:var(--dot-2)}



/* QUESTION AREA */
.check-body{background:var(--n50);padding:var(--sp-8) 0 var(--sp-12)}


.check-section{margin-bottom:var(--sp-4);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}


.check-section-header{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);background:var(--navy);border-bottom:3px solid transparent;cursor:pointer;user-select:none;position:relative}


.check-section-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px}


.check-section:nth-child(1) .check-section-header::after{background:var(--dot-1)}


.check-section:nth-child(2) .check-section-header::after{background:var(--dot-2)}


.check-section:nth-child(3) .check-section-header::after{background:var(--dot-5)}


.check-section:nth-child(4) .check-section-header::after{background:var(--dot-4)}


.check-section-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}


.check-section-title{font-family:var(--font-d);font-size:20px;font-weight:800;color:var(--white);flex:1;letter-spacing:.3px}


.check-section-score{font-size:13px;color:rgba(255,255,255,.45);font-weight:600;font-family:var(--font-b);flex-shrink:0}


.check-section-body{background:var(--white)}


.q-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--n100);transition:background .15s}


.q-row:last-child{border-bottom:none}


.q-row:hover{background:var(--n50)}


.q-left{display:flex;align-items:flex-start;gap:var(--sp-2)}


.q-icon{font-size:22px;flex-shrink:0;margin-top:2px;width:32px;text-align:center}


.q-title{font-size:15px;font-weight:600;color:var(--n900);margin-bottom:4px;line-height:1.4;font-family:var(--font-b)}


.q-blurb{font-size:13px;color:var(--n600);line-height:1.55}


.answer-group{display:flex;gap:6px;flex-shrink:0}


.btn-ans{padding:8px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--n200);background:var(--white);color:var(--n600);font-family:var(--font-b);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}


.btn-ans:hover{border-color:var(--n400);color:var(--n800)}


.btn-ans.yes.active{background:rgba(68,201,106,.1);border-color:var(--dot-4);color:var(--dot-4)}


.btn-ans.no.active{background:rgba(232,49,42,.1);border-color:var(--dot-1);color:var(--dot-1)}


.btn-ans.unsure.active{background:rgba(245,166,35,.1);border-color:var(--dot-2);color:var(--dot-2)}



/* RESULT */
#result{display:none;opacity:0;transform:translateY(24px);transition:all .5s ease;padding:var(--sp-12) 0;background:var(--n50)}


#result.visible{display:block;opacity:1;transform:translateY(0)}


.result-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.12);border:1px solid var(--n200)}


.result-header{background:var(--navy);padding:var(--sp-8) var(--sp-6);text-align:center;position:relative;overflow:hidden}


.result-header::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,200,240,.05) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}


.result-header::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--dot-1) 0%,var(--dot-2) 25%,var(--dot-3) 50%,var(--dot-4) 75%,var(--dot-5) 100%)}


.result-header-inner{position:relative;z-index:2}


.result-eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin-bottom:var(--sp-2);font-family:var(--font-b)}


.result-score-num{font-family:var(--font-d);font-size:clamp(80px,12vw,120px);font-weight:900;line-height:1;margin-bottom:4px;letter-spacing:-2px}


.result-score-num.high{color:var(--dot-4)}

.result-score-num.mid{color:var(--dot-2)}

.result-score-num.low{color:var(--dot-1)}


.result-out-of{font-size:14px;color:rgba(255,255,255,.45);margin-bottom:var(--sp-3)}


.result-verdict{font-family:var(--font-d);font-size:clamp(24px,3vw,36px);font-weight:900;margin-bottom:var(--sp-2);letter-spacing:-.3px}


.result-verdict.high{color:var(--dot-4)}

.result-verdict.mid{color:var(--dot-2)}

.result-verdict.low{color:var(--dot-1)}


.result-msg{font-size:16px;color:rgba(255,255,255,.6);max-width:520px;margin:0 auto;line-height:1.65}


.result-breakdown{padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--n100)}


.breakdown-title{font-family:var(--font-d);font-size:16px;font-weight:800;color:var(--n700);letter-spacing:.5px;text-transform:uppercase;margin-bottom:var(--sp-3)}


.breakdown-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}


.breakdown-label{font-size:13px;color:var(--n600);width:190px;flex-shrink:0;font-weight:600}


.breakdown-track{flex:1;height:8px;background:var(--n100);border-radius:8px;overflow:hidden}


.breakdown-fill{height:100%;border-radius:8px;transition:width 1s cubic-bezier(.4,0,.2,1)}


.breakdown-pct{font-size:13px;font-weight:700;width:38px;text-align:right}


.result-cta{background:var(--n50);padding:var(--sp-5) var(--sp-6);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;border-top:4px solid var(--cyan)}


.result-cta-text h3{font-family:var(--font-d);font-size:22px;font-weight:900;color:var(--navy);margin-bottom:4px}


.result-cta-text p{font-size:14px;color:var(--n600);line-height:1.55}


.result-cta-btns{display:flex;gap:var(--sp-2);flex-wrap:wrap;flex-shrink:0}



/* STICKY BAR */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;background:var(--navy);border-top:1px solid rgba(255,255,255,.1);padding:12px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);z-index:999;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}


.sticky-bar.show{transform:translateY(0)}


.sticky-tally{display:flex;gap:var(--sp-3);align-items:center}


.sticky-pill{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;font-family:var(--font-b)}


.sticky-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}


.sticky-score-btn{background:var(--orange);color:var(--navy);border:none;padding:10px 24px;border-radius:var(--radius-sm);font-family:var(--font-d);font-size:16px;font-weight:800;cursor:pointer;letter-spacing:.3px;transition:all .18s;flex-shrink:0}


.sticky-score-btn:hover{background:var(--orange-dark);transform:translateY(-1px);box-shadow:0 4px 14px rgba(245,166,35,.4)}


/* ============================================================
   NEWS & BLOG — News listing page, article pages
   ============================================================ */

/* CATEGORY FILTER BAR */
.news-filter { background: var(--navy-mid); border-bottom: 1px solid rgba(255,255,255,.07); }
.news-filter-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.filter-btn { padding: 14px 20px; background: transparent; border: none; border-bottom: 3px solid transparent; color: rgba(255,255,255,.55); font-family: var(--font-b); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .15s; }
.filter-btn:hover { color: var(--white); }
.filter-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }

/* NEWS GRID */
.news-section { background: var(--n50); padding: var(--sp-12) 0; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.news-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--n200); transition: all .22s; text-decoration: none; display: flex; flex-direction: column; }
.news-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.news-card-image { height: 200px; background: var(--navy); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.news-card-image-emoji { font-size: 60px; opacity: .4; }
.news-card-cat { position: absolute; top: var(--sp-2); left: var(--sp-2); background: var(--orange); color: var(--navy); font-family: var(--font-d); font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-sm); letter-spacing: .5px; text-transform: uppercase; }
.news-card-body { padding: var(--sp-4) var(--sp-4) var(--sp-3); display: flex; flex-direction: column; flex: 1; }
.news-card-meta { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.news-card-date { font-size: 12px; color: var(--n400); font-weight: 600; }
.news-card-read { font-size: 12px; color: var(--n400); }
.news-card-title { font-family: var(--font-d); font-size: clamp(18px, 2vw, 22px); font-weight: 900; color: var(--navy); line-height: 1.2; margin-bottom: var(--sp-2); letter-spacing: -.3px; }
.news-card-excerpt { font-size: 14px; color: var(--n600); line-height: 1.6; flex: 1; margin-bottom: var(--sp-3); }
.news-card-link { font-family: var(--font-d); font-size: 15px; font-weight: 800; color: var(--cyan-dark); display: flex; align-items: center; gap: 6px; transition: gap .15s; }
.news-card:hover .news-card-link { gap: 10px; }

/* FEATURED card — spans full width, horizontal layout */
.news-card--featured { grid-column: 1 / -1; flex-direction: row; }
.news-card--featured .news-card-image { height: auto; min-height: 260px; width: 420px; flex-shrink: 0; }
.news-card--featured .news-card-body { padding: var(--sp-6); }
.news-card--featured .news-card-title { font-size: clamp(22px, 2.5vw, 32px); margin-bottom: var(--sp-2); }
.news-card--featured .news-card-excerpt { font-size: 15px; margin-bottom: var(--sp-4); }

/* PAGINATION */
.pagination { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-8); }
.page-btn { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1.5px solid var(--n200); background: var(--white); color: var(--n700); font-family: var(--font-d); font-size: 16px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; text-decoration: none; }
.page-btn:hover, .page-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* NEWSLETTER SIGNUP */
.newsletter { background: var(--navy); padding: var(--sp-10) 0; text-align: center; position: relative; overflow: hidden; }
.newsletter::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--dot-1) 0%, var(--dot-2) 25%, var(--dot-3) 50%, var(--dot-4) 75%, var(--dot-5) 100%); }
.newsletter::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0,200,240,.04) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; }
.newsletter-inner { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; }
.newsletter h2 { font-family: var(--font-d); font-size: clamp(24px, 3vw, 40px); font-weight: 900; color: var(--white); margin-bottom: var(--sp-2); letter-spacing: -.3px; }
.newsletter h2 span { color: var(--cyan); }
.newsletter p { font-size: 16px; color: rgba(255,255,255,.6); margin-bottom: var(--sp-4); line-height: 1.65; }
.newsletter-form { display: flex; gap: var(--sp-2); max-width: 480px; margin: 0 auto; }
.newsletter-input { flex: 1; padding: 13px 16px; border: 1.5px solid rgba(255,255,255,.15); border-radius: var(--radius-sm); background: rgba(255,255,255,.07); color: var(--white); font-family: var(--font-b); font-size: 15px; outline: none; transition: border-color .15s; }
.newsletter-input::placeholder { color: rgba(255,255,255,.35); }
.newsletter-input:focus { border-color: var(--cyan); }
.newsletter-note { font-size: 12px; color: rgba(255,255,255,.3); margin-top: var(--sp-2); }

/* ── ARTICLE PAGE ───────────────────────────────────────── */

/* Article-specific page-header override (narrower inner) */
.page-header--article .page-header-inner { max-width: 780px; }

.article-cat { display: inline-flex; align-items: center; gap: 6px; background: var(--orange); color: var(--navy); font-family: var(--font-d); font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: var(--radius-sm); letter-spacing: .5px; text-transform: uppercase; margin-bottom: var(--sp-3); }
.article-title { font-family: var(--font-d); font-size: clamp(32px, 5vw, 60px); font-weight: 900; color: var(--white); line-height: 1.05; letter-spacing: -1px; margin-bottom: var(--sp-3); }
.article-title em { font-style: normal; color: var(--cyan); }
.article-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.article-meta-item { display: flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(255,255,255,.5); font-family: var(--font-b); }
.article-meta-sep { color: rgba(255,255,255,.2); }
.article-author { display: flex; align-items: center; gap: 10px; }
.article-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cyan-dark); color: var(--navy); font-family: var(--font-d); font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Article layout: two-col (body + sidebar) */
.article-layout { padding: var(--sp-10) 0; background: var(--white); }
.article-inner { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-8); align-items: start; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.article-body { max-width: 680px; }
.article-body h2 { font-family: var(--font-d); font-size: clamp(22px, 2.5vw, 30px); font-weight: 900; color: var(--navy); margin: var(--sp-6) 0 var(--sp-2); letter-spacing: -.3px; line-height: 1.1; }
.article-body h3 { font-family: var(--font-d); font-size: clamp(18px, 2vw, 24px); font-weight: 800; color: var(--navy); margin: var(--sp-4) 0 var(--sp-2); line-height: 1.2; }
.article-body p { font-size: 16px; color: var(--n700); line-height: 1.8; margin-bottom: var(--sp-3); }
.article-body ul, .article-body ol { margin: var(--sp-2) 0 var(--sp-3) var(--sp-4); }
.article-body li { font-size: 16px; color: var(--n700); line-height: 1.75; margin-bottom: 6px; }
.article-body strong { color: var(--n900); font-weight: 700; }
.article-body a { color: var(--cyan-dark); text-decoration: underline; }
.article-body a:hover { color: var(--navy); }

/* Callout blocks */
.article-callout { background: var(--navy); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; border-left: 4px solid var(--cyan); }
.article-callout p { color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.7; margin: 0; }
.article-callout strong { color: var(--cyan); }
.article-tip { background: rgba(0,200,240,.06); border: 1px solid rgba(0,200,240,.2); border-radius: var(--radius-md); padding: var(--sp-4); margin: var(--sp-4) 0; }
.article-tip-label { font-family: var(--font-d); font-size: 12px; font-weight: 800; color: var(--cyan-dark); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.article-tip p { font-size: 15px; color: var(--n700); line-height: 1.65; margin: 0; }
.article-warning { background: rgba(245,166,35,.07); border: 1px solid rgba(245,166,35,.25); border-radius: var(--radius-md); padding: var(--sp-4); margin: var(--sp-4) 0; }
.article-warning-label { font-family: var(--font-d); font-size: 12px; font-weight: 800; color: var(--orange-dark); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.article-warning p { font-size: 15px; color: var(--n700); line-height: 1.65; margin: 0; }
.article-divider { height: 1px; background: var(--n200); margin: var(--sp-6) 0; }

/* Sidebar */
.article-sidebar { position: sticky; top: calc(70px + var(--sp-4)); }
.sidebar-card { background: var(--n50); border: 1px solid var(--n200); border-radius: var(--radius-md); padding: var(--sp-4); margin-bottom: var(--sp-3); border-top: 3px solid transparent; }
.sidebar-card:nth-child(1) { border-top-color: var(--dot-5); }
.sidebar-card:nth-child(2) { border-top-color: var(--dot-2); }
.sidebar-card:nth-child(3) { border-top-color: var(--dot-4); }
.sidebar-card-title { font-family: var(--font-d); font-size: 16px; font-weight: 900; color: var(--navy); margin-bottom: var(--sp-2); }
.sidebar-card-body { font-size: 13.5px; color: var(--n600); line-height: 1.6; margin-bottom: var(--sp-3); }
.sidebar-card-link { font-family: var(--font-d); font-size: 14px; font-weight: 800; color: var(--cyan-dark); display: flex; align-items: center; gap: 6px; }

/* Related posts */
.related-posts { background: var(--n50); padding: var(--sp-10) 0; border-top: 1px solid var(--n200); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.related-post { background: var(--white); border-radius: var(--radius-md); padding: var(--sp-4); border: 1px solid var(--n200); text-decoration: none; display: block; transition: box-shadow .2s; border-top: 3px solid transparent; }
.related-post:nth-child(1) { border-top-color: var(--dot-1); }
.related-post:nth-child(2) { border-top-color: var(--dot-4); }
.related-post:nth-child(3) { border-top-color: var(--dot-5); }
.related-post:hover { box-shadow: var(--shadow-card-hover); }
.related-post-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--orange-dark); margin-bottom: 6px; font-family: var(--font-b); }
.related-post-title { font-family: var(--font-d); font-size: 17px; font-weight: 900; color: var(--navy); line-height: 1.2; margin-bottom: 6px; }
.related-post-date { font-size: 12px; color: var(--n400); }

/* Article CTA band */
.article-cta { background: linear-gradient(135deg, #0f5c48 0%, #0d7a5f 100%); padding: var(--sp-10) 0; text-align: center; position: relative; overflow: hidden; }
.article-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 36px 36px; }
.article-cta-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.article-cta h2 { font-family: var(--font-d); font-size: clamp(26px, 3.5vw, 40px); font-weight: 900; color: var(--white); margin-bottom: var(--sp-2); letter-spacing: -.3px; }
.article-cta h2 span { color: #7dffd3; }
.article-cta p { font-size: 16px; color: rgba(255,255,255,.7); margin-bottom: var(--sp-4); line-height: 1.65; }
.article-cta-btns { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Breadcrumb */
.article-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: var(--sp-3); }
.article-breadcrumb a { color: rgba(255,255,255,.4); }
.article-breadcrumb a:hover { color: rgba(255,255,255,.7); }
.article-breadcrumb-sep { color: rgba(255,255,255,.2); }

/* ── RESPONSIVE — news & articles ──────────────────────── */
@media (max-width: 1024px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-card--featured { flex-direction: column; }
  .news-card--featured .news-card-image { width: 100%; min-height: 200px; }
  .article-inner { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .related-grid { grid-template-columns: 1fr; }
  .article-inner { padding: 0 var(--gutter); }
}


/* ============================================================
   PROTECTION CHECK — Mobile responsive
   These rules are scoped entirely to protection-check page
   classes and IDs. They do not affect any other page.
   ============================================================ */

@media (max-width: 768px) {

  /* ── Progress bar strip ──────────────────────────────────
     Restructure from a single cramped row into:
       [full-width bar]
       [label]   [tally pills]                              */
  .check-progress-inner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 20px;
  }
  .check-progress-bar-bg {
    flex: 1 1 100%;
    order: 1;
  }
  .check-progress-label {
    order: 2;
    flex: 1;
    font-size: 12px;
  }
  .check-tally {
    order: 3;
    gap: 10px;
  }
  .tally-pill {
    font-size: 11px;
  }

  /* ── Question rows ───────────────────────────────────────
     Stack: question text on top, Yes/No/Unsure below,
     each button sharing equal width                        */
  .q-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: var(--sp-3);
  }
  .answer-group {
    width: 100%;
  }
  .btn-ans {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    font-size: 13px;
  }

  /* ── Contact form — 3-col grid → single column ──────────  */
  .pc-form-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Result card ─────────────────────────────────────────  */
  .result-header {
    padding: var(--sp-6) var(--sp-3);
  }
  .result-breakdown {
    padding: var(--sp-4) var(--sp-3);
  }
  /* Shrink the fixed-width area label so the bar has room   */
  .breakdown-label {
    width: 120px;
    font-size: 12px;
  }
  .breakdown-pct {
    font-size: 12px;
    width: 30px;
  }

  /* ── Sticky bar ──────────────────────────────────────────
     Keep tally on left, button on right, without wrapping  */
  .sticky-bar {
    padding: 10px 16px;
    gap: 8px;
  }
  .sticky-tally {
    gap: 10px;
    flex-shrink: 1;
    min-width: 0;
  }
  .sticky-pill {
    font-size: 11px;
    gap: 4px;
  }
  .sticky-score-btn {
    font-size: 14px;
    padding: 9px 16px;
    flex-shrink: 0;
  }

}

@media (max-width: 480px) {

  /* ── Section headers — tighten for very small phones ─────  */
  .check-section-header {
    padding: 14px 16px;
    gap: 10px;
  }
  .check-section-icon {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
  .check-section-title {
    font-size: 17px;
  }
  .check-section-score {
    font-size: 12px;
  }

  /* ── Question rows — extra tighten ──────────────────────  */
  .q-row {
    padding: 14px 16px;
    gap: 10px;
  }
  .q-icon {
    font-size: 18px;
    width: 26px;
  }
  .q-title {
    font-size: 14px;
  }
  .q-blurb {
    font-size: 12px;
  }
  .btn-ans {
    font-size: 12px;
    padding: 9px 4px;
  }

  /* ── Tally pills — hide text label, show dot only if needed */
  .check-tally {
    gap: 8px;
  }

  /* ── Sticky bar — if still tight, allow tally to wrap ────  */
  .sticky-tally {
    flex-wrap: wrap;
    gap: 6px;
  }
  .sticky-pill {
    font-size: 10px;
  }

  /* ── Result score — clamp already handles this but belt &
     braces for very narrow screens                          */
  .result-verdict {
    font-size: 22px;
  }
  .result-msg {
    font-size: 14px;
  }

}


/* ============================================================
   ALL PAGES — Mobile responsive
   Covers: service pages, about, contact, home, news, articles.
   Organised by breakpoint then by component.
   Does not override the protection-check rules above.
   ============================================================ */

/* ── 1024px: Tablet / landscape phones ─────────────────────
   Primary breakpoint: collapse multi-col grids to fewer cols  */
@media (max-width: 1024px) {

  /* Shared: two-column intro sections (text + dark panel) */
  .two-col {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* Feature cards: 3-col → 2-col */
  .features-grid { grid-template-columns: 1fr 1fr; }

  /* IT Support packages: 3-col → stack (cards are tall) */
  .packages-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  /* "Included in every package" grid: 3-col → 2-col */
  .included-grid { grid-template-columns: 1fr 1fr; }

  /* Microsoft 365 plans: 3-col → 2-col then 1-col */
  .plans-grid { grid-template-columns: 1fr 1fr; }

  /* About: about-grid & values */
  .about-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .values-grid { grid-template-columns: 1fr 1fr; }

  /* Cyber Essentials: 5-col controls & 5-step process → 3-col */
  .controls-grid { grid-template-columns: repeat(3, 1fr); }
  .ce-steps      { grid-template-columns: repeat(3, 1fr); }
  .ce-steps::before { display: none; } /* hide the dashed connector line */

  /* Inline 4-col "how it works" grids (broadband, hardware) */
  .steps-4-col { grid-template-columns: 1fr 1fr !important; }

  /* Inline dark 2-col panels (cyber-essentials CE vs CE+) */
  .dark-2col { grid-template-columns: 1fr !important; gap: var(--sp-4) !important; }

  /* Contact page: left info + right form */
  .contact-grid { grid-template-columns: 1fr; }

  /* IT Support compare table — allow horizontal scroll on tablet too */
  .compare-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table   { min-width: 580px; }
}

/* ── 768px: Mobile phones ───────────────────────────────────
   Second breakpoint: collapse remaining 2-col grids to 1-col  */
@media (max-width: 768px) {

  /* Feature cards: 2-col → 1-col */
  .features-grid { grid-template-columns: 1fr; }

  /* IT Support packages: remove max-width so cards go full-width */
  .packages-grid { max-width: 100%; }

  /* Included items: 2-col → 1-col */
  .included-grid { grid-template-columns: 1fr; }

  /* Microsoft 365 plans: 2-col → 1-col */
  .plans-grid { grid-template-columns: 1fr; }

  /* About: why-grid (2-col) → 1-col */
  .why-grid { grid-template-columns: 1fr; }

  /* Cyber Essentials: 3-col → 2-col */
  .controls-grid { grid-template-columns: 1fr 1fr; }
  .ce-steps      { grid-template-columns: 1fr 1fr; }

  /* Inline 4-col grids → 1-col */
  .steps-4-col { grid-template-columns: 1fr !important; }

  /* Page header: tighten text for phones */
  .page-header-inner p { font-size: 16px; }

  /* CTA band buttons: stack vertically and fill width */
  .cta-band-btns {
    flex-direction: column;
    align-items: center;
  }
  .cta-band-btns .btn {
    width: 100%;
    max-width: 340px;
    justify-content: center;
    text-align: center;
  }

  /* Protect-CTA buttons on service pages */
  .protect-cta-inner .btn { width: 100%; max-width: 340px; justify-content: center; }

  /* Nav right: hide "Remote Support" button on phones (phone number is primary CTA) */
  .nav-right .nav-cta:last-child { display: none; }

  /* Newsletter: already flex-direction:column from news CSS — confirm */
  .newsletter-form { flex-direction: column; }

  /* Hero trust chips: wrap naturally (already flex-wrap) */
  .hero-trust { gap: var(--sp-1); }
  .hero-trust-chip { font-size: 12px; padding: 6px 10px; }

  /* Hero quiz card: reduce header padding */
  .hero-cta-card-header { padding: var(--sp-3); }
  .hero-cta-card-header h2 { font-size: clamp(16px, 4vw, 22px); }
}

/* ── 480px: Small phones ────────────────────────────────────
   Final pass: tighten anything still too wide                 */
@media (max-width: 480px) {

  /* Values grid: 2-col → 1-col */
  .values-grid { grid-template-columns: 1fr; }

  /* Cyber Essentials: 2-col → 1-col */
  .controls-grid { grid-template-columns: 1fr; }
  .ce-steps      { grid-template-columns: 1fr; }

  /* About stats: keep 3-col but tighten spacing and text */
  .about-stats { gap: var(--sp-2); }
  .stat-box { padding: var(--sp-3) var(--sp-2); }
  .stat-box__val { font-size: 30px; }

  /* Why-items: tighten the icon */
  .why-icon { width: 40px; height: 40px; font-size: 18px; flex-shrink: 0; }
  .why-item { padding: var(--sp-3); gap: var(--sp-2); }

  /* Package cards: tighten padding */
  .pkg-body { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
  .pkg-name { font-size: 28px; }

  /* Dark panel: reduce padding */
  .dark-panel { padding: var(--sp-4) var(--sp-4); }

  /* Feature cards: tighten */
  .feature-card { padding: var(--sp-3); }

  /* Nav: hide Protection Check pill on very small screens */
  .nav-protect { display: none; }

  /* Protect-CTA checks: wrap to 2 per row */
  .protect-checks { gap: 8px; }
  .protect-check { flex-basis: calc(50% - 8px); justify-content: flex-start; }

  /* Footer address block */
  .footer-col address { font-size: 13px; }
}



/* ============================================================
   MOBILE NAVIGATION — Hamburger + slide-down panel
   
   KEY DESIGN DECISIONS vs previous version:
   - nav-mobile uses normal document flow (no position:absolute)
     to avoid sticky/absolute containing-block browser quirks.
   - All .nav.open rules live INSIDE the @media block so they
     are completely inert on desktop — zero risk of desktop bleed.
   - nav-burger and nav-mobile are display:none globally so
     on desktop they are entirely removed from layout and paint.
   ============================================================ */

/* ── Hamburger button — globally hidden ─────────────────────
   display:flex is applied only inside the mobile @media block */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.nav-burger:hover { background: rgba(255,255,255,.16); }

.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              opacity   .2s ease;
}

/* ── Mobile panel — globally hidden ─────────────────────────
   No position:absolute — panel sits in normal document flow.
   max-height:0 + overflow:hidden collapses it when closed.   */
.nav-mobile {
  display: none;
  max-height: 0;
  overflow: hidden;
  background: var(--navy-light);
  border-top: 2px solid var(--cyan);
  transition: max-height .38s cubic-bezier(.4,0,.2,1);
}

/* ── Static styles for mobile panel contents ────────────────
   These are safe to define globally — they only render when
   .nav-mobile itself becomes display:block on mobile.        */
.nav-mobile-links {
  list-style: none;
  padding: 8px 0 0;
  margin: 0;
}

.nav-mobile-link {
  display: block;
  padding: 14px 20px;
  color: rgba(255,255,255,.78);
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .12s, background .12s, padding-left .12s;
}
.nav-mobile-link:hover {
  color: var(--white);
  background: rgba(255,255,255,.04);
  padding-left: 26px;
}
.nav-mobile-link.active {
  color: var(--cyan);
  border-left: 3px solid var(--cyan);
  padding-left: 17px;
}

.nav-mobile-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: color .12s, background .12s;
}
.nav-mobile-toggle:hover {
  color: var(--white);
  background: rgba(255,255,255,.04);
}

.nav-mobile-arrow {
  font-size: 10px;
  opacity: .5;
  transition: transform .25s ease;
  flex-shrink: 0;
}
.nav-mobile-has-sub.open .nav-mobile-arrow {
  transform: rotate(180deg);
  opacity: .85;
}

.nav-mobile-sub {
  max-height: 0;
  overflow: hidden;
  background: rgba(0,0,0,.2);
  transition: max-height .28s cubic-bezier(.4,0,.2,1);
}
.nav-mobile-has-sub.open .nav-mobile-sub {
  max-height: 420px;
}

.nav-mobile-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 30px;
  color: rgba(255,255,255,.62);
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: color .12s, background .12s, padding-left .12s;
}
.nav-mobile-sub a:last-child { border-bottom: none; }
.nav-mobile-sub a:hover {
  color: var(--white);
  background: rgba(255,255,255,.04);
  padding-left: 36px;
}

.nav-mobile-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.12);
}

.nav-mobile-protect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  background: rgba(0,200,240,.1);
  border: 1px solid rgba(0,200,240,.3);
  border-radius: 50px;
  color: var(--cyan);
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background .15s;
}
.nav-mobile-protect:hover,
.nav-mobile-protect.active { background: rgba(0,200,240,.18); }

.nav-mobile-call {
  display: block;
  padding: 14px;
  background: var(--orange);
  color: var(--navy);
  border-radius: var(--radius-sm);
  font-family: var(--font-d);
  font-size: 19px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  letter-spacing: .3px;
  transition: background .15s, transform .15s;
}
.nav-mobile-call:hover {
  background: var(--orange-dark);
  transform: translateY(-1px);
}

.nav-mobile-remote {
  display: block;
  text-align: center;
  padding: 6px;
  color: rgba(255,255,255,.4);
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color .12s;
}
.nav-mobile-remote:hover { color: rgba(255,255,255,.7); }

/* ── Mobile breakpoint — everything that shows on phones ────
   The burger, the panel, the open-state animation, the X     */
@media (max-width: 768px) {

  /* Show the hamburger */
  .nav-burger { display: flex; }

  /* Make panel visible — still collapsed (max-height:0) */
  .nav-mobile { display: block; }

  /* Hamburger → X animation when menu is open */
  .nav.open .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav.open .nav-burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .nav.open .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Slide the panel open — ONLY fires inside this media query */
  .nav.open .nav-mobile {
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 16px 48px rgba(0,0,0,.55);
  }

  /* Hide nav-protect pill from nav-right — it lives in the menu */
  .nav-protect { display: none; }

  /* Tighten nav-inner gap so logo + phone CTA + burger fit */
  .nav-inner { gap: var(--sp-2); }

}

@media (max-width: 380px) {
  .nav-cta { font-size: 13px; padding: 8px 12px; }
}