/* ==========================================================================
   Flexi Networks — Premium Homepage Stylesheet
   Strict brand palette (brand manual):
     Flexi Green  #bfd857  (+ tints 80/60/40/20)
     Primary Blue #043c6f  (header blue — the single blue used site-wide)
     Accent       #ff9900  (used sparingly)
     Soft black   #0d0d0d  (95% black — never 100% black)
   No gradients. No glassmorphism. Flat, clean, premium.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Primary palette */
  --green:    #bfd857;
  --green-80: #cce079;
  --green-60: #d9e89a;
  --green-40: #e5efbc;
  --green-20: #f2f7dd;

  /* Single primary blue across the site — taken from the header/topbar.
     Light steps below are tints used ONLY for neutral backgrounds/borders. */
  --blue:     #043c6f;
  --blue-80:  #6ea6ce;
  --blue-60:  #92bdda;
  --blue-40:  #b7d3e7;
  --blue-20:  #dbe9f3;
  --blue-10:  #edf4f9;

  /* Secondary palette */
  --dark:     #043c6f;
  --dark-80:  #36638c;
  --dark-60:  #688aa9;
  --dark-40:  #9bb1c5;
  --dark-20:  #cdd8e2;

  --orange:    #ff9900;
  --orange-20: #ffebcc;

  /* Soft black + grey tints */
  --ink:     #0d0d0d;
  --gray-76: #3d3d3d;
  --gray-57: #6d6d6d;
  --gray-38: #9e9e9e;
  --gray-19: #cecece;
  --white:   #ffffff;

  /* Type */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Poppins", "Segoe UI", system-ui, sans-serif;

  /* Rhythm */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --section-y: clamp(4.5rem, 9vw, 7.5rem);
  --container: 1200px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .45s;

  /* Elevation — brand-dark tinted, kept subtle */
  --shadow-sm: 0 1px 2px rgba(4, 60, 111, .06), 0 2px 8px rgba(4, 60, 111, .05);
  --shadow-md: 0 6px 24px rgba(4, 60, 111, .10);
  --shadow-lg: 0 18px 48px rgba(4, 60, 111, .16);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gray-76);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 .6em;
  color: var(--dark);
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -.015em; }
h3 { font-size: 1.25rem; font-weight: 600; }
p  { margin: 0 0 1em; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--green); color: var(--ink);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600; z-index: 200;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.container { width: min(var(--container), 100% - 2.5rem); margin-inline: auto; }

section { padding-block: var(--section-y); position: relative; }

/* ---------- Section headers ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 1rem;
}
.kicker::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--green); }
.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }
.section-head p.lede { font-size: 1.125rem; color: var(--gray-57); }

.on-dark, .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark p, .on-dark .lede { color: var(--dark-20); }
.on-dark .kicker { color: var(--green); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.9rem; border-radius: 999px;
  font-weight: 600; font-size: .975rem; line-height: 1;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-lime { background: var(--green); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-lime:hover { background: var(--green-80); box-shadow: var(--shadow-md); }

.btn-blue { background: var(--blue); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-blue:hover { background: var(--dark-80); }

/* White outline — for use on dark bands */
.btn-ghost { background: transparent; color: var(--white); border: 1.5px solid var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--dark); }

/* Blue outline — for use on light backgrounds */
.btn-outline { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn-outline:hover { background: var(--blue); color: var(--white); }

.btn-lg { padding: 1.1rem 2.3rem; font-size: 1.05rem; }

.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--blue); }
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { color: var(--dark-80); }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--blue-20);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.topbar { background: var(--dark); color: var(--dark-20); font-size: .8rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .45rem; }
.topbar a { color: var(--dark-20); display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--green); }
.topbar svg { width: 14px; height: 14px; }
.topbar .status-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--dark-80); color: var(--green);
  border-radius: 999px; padding: .12rem .7rem; font-weight: 600;
}
.topbar .status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse-dot 2.2s infinite; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(191, 216, 87, .5); }
  50% { box-shadow: 0 0 0 5px rgba(191, 216, 87, 0); }
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 96px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand img { height: 49px; width: auto; display: block; }
@media (max-width: 900px) { .brand img { height: 41px; } }
@media (max-width: 640px) { .brand img { height: 36px; } }

.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links a {
  padding: .55rem .95rem; border-radius: 999px; white-space: nowrap;
  font-weight: 500; font-size: .95rem; color: var(--gray-76);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-links a:hover { background: var(--blue-10); color: var(--dark); }
.nav-links a.active { color: var(--dark); font-weight: 600; }

.nav-cta { display: flex; align-items: center; gap: .75rem; }
.nav-cta .btn { padding: .7rem 1.4rem; font-size: .9rem; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: .6rem; border-radius: var(--radius-sm); }
.nav-toggle span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero slider ---------- */
.hero {
  position: relative;
  margin-top: 131px; /* topbar + nav height */
  padding-block: 0;  /* cancel global section padding — slider is full-bleed */
  background: var(--dark);
}
.hero-slider { position: relative; overflow: hidden; min-height: clamp(560px, 78vh, 780px); }

.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease), visibility 0s .9s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s var(--ease), visibility 0s; z-index: 1; }

/* Full-background image with dark semi-transparent brand overlay */
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(4, 60, 111, .68); }

.hero-copy {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: 980px;
  padding: clamp(2rem, 4vw, 3.5rem);
  padding-left: max(6rem, calc((100vw - var(--container)) / 2)); /* keeps clear of the side arrows */
  padding-bottom: 6.5rem;
}
/* Brand Wi-Fi arc motif (from brand manual) */
.hero-copy::before {
  content: ""; position: absolute; left: -140px; bottom: -140px;
  width: 340px; height: 340px; border-radius: 50%;
  border: 26px solid var(--dark-80); opacity: .35; pointer-events: none;
}
.hero-copy::after {
  content: ""; position: absolute; left: -60px; bottom: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  border: 22px solid var(--dark-80); opacity: .25; pointer-events: none;
}
.hero-copy > * { position: relative; }

.hero-kicker {
  display: inline-flex; align-items: center; gap: .55rem; align-self: flex-start;
  color: var(--green); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.25rem;
}
.hero-kicker::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--green); }

.hero-copy h1, .hero-copy h2 { color: var(--white); font-size: clamp(1.9rem, 3vw, 2.85rem); font-weight: 700; margin-bottom: .5em; max-width: 21ch; }
.hero-copy h1 em, .hero-copy h2 em { font-style: normal; color: var(--green); }
.hero-copy p { color: var(--blue-20); font-size: clamp(.98rem, 1.3vw, 1.1rem); max-width: 36rem; margin-bottom: 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Staggered entrance each time a slide becomes active */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-slide.is-active .hero-kicker { animation: rise .6s var(--ease) .1s both; }
.hero-slide.is-active .hero-copy h1,
.hero-slide.is-active .hero-copy h2 { animation: rise .6s var(--ease) .22s both; }
.hero-slide.is-active .hero-copy p { animation: rise .6s var(--ease) .34s both; }
.hero-slide.is-active .hero-actions { animation: rise .6s var(--ease) .46s both; }

/* Slider controls */
.hero-controls {
  position: absolute; z-index: 5;
  left: max(clamp(2.5rem, 5vw, 4.5rem), calc((100vw - var(--container)) / 2));
  bottom: 4.75rem;
  display: flex; align-items: center; gap: 1.25rem;
}
/* Arrows vertically centred on the slider sides */
.hero-arrow {
  position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(4, 60, 111, .55); color: var(--white);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero-arrow:hover { background: var(--green); color: var(--ink); transform: translateY(-50%) scale(1.08); }
.hero-arrow svg { width: 20px; height: 20px; }
.hero-arrow.prev { left: clamp(1rem, 2.5vw, 2.25rem); }
.hero-arrow.next { right: clamp(1rem, 2.5vw, 2.25rem); }

.hero-dots { display: flex; gap: .5rem; }
.hero-dots button { width: 30px; height: 5px; border-radius: 999px; background: var(--dark-60); transition: background var(--dur) var(--ease); padding: 0; }
.hero-dots button.is-active { background: var(--green); }

/* Coverage quick-check bar — lives at the top of the Why section and
   overlaps the hero image, so no white strip shows between sections */
.hero-check {
  position: relative; z-index: 6;
  margin-top: calc(-1 * (var(--section-y) + 3.25rem));
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.hero-check-card {
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 1.6rem 2.25rem;
  max-width: 980px; margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center;
}
.hero-check-card small { display: block; line-height: 1.5; max-width: 52ch; }
.hero-check-card .ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; background: var(--green-40); color: var(--dark);
}
.hero-check-card .ico svg { width: 26px; height: 26px; }
.hero-check-card strong { display: block; font-family: var(--font-display); color: var(--dark); font-size: 1.05rem; }
.hero-check-card small { color: var(--gray-57); }
.hero-check-card form { display: flex; gap: .75rem; }
.hero-check-card input {
  flex: 1; min-width: 0; padding: .9rem 1.1rem;
  border: 1.5px solid var(--blue-20); border-radius: 999px; background: var(--blue-10);
}
.hero-check-card input:focus { outline: none; border-color: var(--blue); background: var(--white); }

/* ---------- Why choose us (image carousel) ---------- */
.why { background: var(--blue-10); }
.why-card {
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.why-card .card-img { aspect-ratio: 16 / 9; overflow: hidden; flex: none; }
.why-card .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.why-card:hover .card-img img { transform: scale(1.06); }
.why-body { padding: 1.5rem 1.7rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.why-card h3 { color: var(--dark); font-size: 1rem; margin-bottom: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.why-card p { color: var(--gray-57); font-size: .88rem; margin: 0; flex: 1; }
.why .section-head h2 { font-size: clamp(1.55rem, 2.7vw, 2.15rem); }
.why .section-head p.lede { font-size: 1.05rem; }

/* Generic responsive carousel (scroll-snap) */
.carousel { position: relative; }
.car-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3rem) / 3);
  align-items: stretch;
  gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: .5rem .35rem 1rem;
  scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { scroll-snap-align: start; }
.car-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .25rem; }
.car-nav button {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dark); color: var(--white);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.car-nav button:hover { background: var(--green); color: var(--ink); transform: translateY(-2px); }
.car-nav svg { width: 18px; height: 18px; }

/* ---------- Services overview ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.service-card {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius); padding: 1.8rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.service-card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.service-card:hover::after { transform: scaleX(1); }
.service-card .ico {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 1.1rem;
  display: grid; place-items: center; background: var(--blue-20); color: var(--dark);
}
.service-card .ico svg { width: 23px; height: 23px; }
.service-card h3 { font-size: 1.05rem; color: var(--dark); }
.service-card p { font-size: .88rem; color: var(--gray-57); margin-bottom: 1rem; }
.service-card .link-arrow { font-size: .88rem; }

/* ---------- Packages (blue band) ---------- */
.packages { background: var(--blue); }
.packages .section-head h2 { color: var(--white); }
.packages .section-head p.lede { color: var(--blue-20); }
.packages .kicker { color: var(--white); }
.packages .pkg-note { color: var(--blue-20); }
.packages .pkg-note a { color: var(--white); font-weight: 600; }

/* Light packages band — used where the dark band would otherwise sit against
   the dark page hero and read as one continuous block. Soft brand-green tint
   so the white package cards lift clearly off the background. */
/* The packages band is deliberately its own room: a deeper brand tint than any
   neighbouring section uses, closed off top and bottom by a hairline so the
   edges read as intentional whether the section above is the dark page hero,
   a pale tint or plain white. */
.packages.packages-light {
  background: var(--green-40);
  border-top: 1px solid var(--green);
  border-bottom: 1px solid var(--green);
}
.packages.packages-light .section-head h2 { color: var(--dark); }
.packages.packages-light .section-head p.lede { color: var(--gray-57); }
.packages.packages-light .kicker { color: var(--blue); }
.packages.packages-light .pkg-note { color: var(--gray-57); }
.packages.packages-light .pkg-note a { color: var(--blue); }
.packages.packages-light .pkg-tabs { background: var(--white); border-color: var(--white); box-shadow: var(--shadow-sm); }
.packages.packages-light .pkg-card { box-shadow: var(--shadow-sm); }
.packages.packages-light .pkg-card.featured { box-shadow: var(--shadow-md); }

.pkg-tabs {
  display: inline-flex; gap: .35rem; padding: .35rem;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: 999px; margin-bottom: 3rem;
}
.pkg-tabs button {
  padding: .7rem 1.6rem; border-radius: 999px;
  color: var(--gray-57); font-weight: 600; font-size: .92rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pkg-tabs button[aria-selected="true"] { background: var(--dark); color: var(--white); }
.pkg-tabs button:not([aria-selected="true"]):hover { color: var(--dark); }

.pkg-panel[hidden] { display: none; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pkg-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }

.pkg-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius-lg); padding: 2rem 1.7rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Premium hover: gentle lift + soft glow */
.pkg-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 48px rgba(4, 60, 111, .32), 0 0 22px rgba(191, 216, 87, .28);
  border-color: var(--green);
}
.pkg-card.featured { border: 2px solid var(--blue); box-shadow: var(--shadow-md); }
.pkg-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: var(--ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .9rem; border-radius: 999px; white-space: nowrap;
}
.pkg-card h3 { color: var(--dark); font-size: 1.08rem; margin-bottom: .2rem; }
.pkg-card .pkg-tag { font-size: .8rem; color: var(--gray-57); margin-bottom: 1.2rem; }
.pkg-speed {
  display: flex; align-items: baseline; gap: .4rem;
  font-family: var(--font-display);
  padding-bottom: 1.2rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--blue-20);
}
.pkg-speed strong { font-size: 2.3rem; font-weight: 800; color: var(--blue); }
.pkg-speed span { font-size: .85rem; color: var(--gray-57); }
.pkg-card ul { display: grid; gap: .55rem; margin-bottom: 1.6rem; flex: 1; }
.pkg-card li { display: flex; gap: .55rem; font-size: .87rem; color: var(--gray-76); }
.pkg-card li svg { width: 16px; height: 16px; flex: none; margin-top: .22rem; color: var(--blue); }
.pkg-price { margin-bottom: 1.3rem; color: var(--dark); }
.pkg-price strong { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; }
.pkg-price span { font-size: .85rem; color: var(--gray-57); }
.pkg-card .btn { width: 100%; }
.pkg-note { text-align: center; color: var(--gray-57); font-size: .85rem; margin-top: 2.5rem; }
.pkg-note a { font-weight: 600; }

/* ---------- Split feature sections ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.split.reverse > .split-media { order: 2; }

.split-media { position: relative; }
.split-media .photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.split-media .photo img { width: 100%; height: 100%; object-fit: cover; }
.split-media .stat-chip {
  position: absolute; bottom: -22px; left: -22px;
  background: var(--white); border: 1px solid var(--blue-20); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1.1rem 1.4rem;
  display: flex; align-items: center; gap: .9rem;
}
.split-media .stat-chip .ico {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--green-40); color: var(--dark);
}
.split-media .stat-chip .ico svg { width: 22px; height: 22px; }
.split-media .stat-chip strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--dark); }
.split-media .stat-chip small { color: var(--gray-57); font-size: .8rem; }

.feature-list { display: grid; gap: 1.1rem; margin: 1.75rem 0 2.25rem; }
.feature-list li { display: flex; gap: 1rem; }
.feature-list .ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center; background: var(--blue-20); color: var(--dark);
}
.feature-list .ico svg { width: 21px; height: 21px; }
.feature-list strong { display: block; font-family: var(--font-display); font-size: .98rem; margin-bottom: .15rem; color: var(--dark); }
.feature-list p { margin: 0; font-size: .9rem; color: var(--gray-57); }

/* ---------- Speed test CTA ---------- */
.speedtest { background: var(--dark); }
.speedtest .split-media { display: grid; place-items: center; }

.gauge { position: relative; width: min(320px, 80%); }
.gauge svg { width: 100%; height: auto; display: block; }
.gauge .track { stroke: var(--dark-80); }
.gauge .fill {
  stroke: var(--green); stroke-linecap: round;
  stroke-dasharray: 314; stroke-dashoffset: 314;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.gauge.is-live .fill { stroke-dashoffset: 63; }
.gauge-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; transform: translateY(8%); }
.gauge-label strong { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.4rem); color: var(--white); line-height: 1; }
.gauge-label span { color: var(--dark-40); font-size: .9rem; }

/* ---------- Form fields ---------- */
.field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .35rem; color: var(--dark); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1.05rem;
  border: 1.5px solid var(--blue-20); border-radius: var(--radius-sm);
  background: var(--blue-10);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: var(--white); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-status { display: none; margin-top: .5rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 500; }
.form-status.ok { display: block; background: var(--green-20); color: var(--ink); border: 1px solid var(--green); }

/* ---------- Stats counters ---------- */
.stats { background: var(--dark); overflow: hidden; }
.stats .stats-bg { position: absolute; inset: 0; }
.stats .stats-bg img { width: 100%; height: 100%; object-fit: cover; }
.stats .stats-bg::after { content: ""; position: absolute; inset: 0; background: rgba(4, 60, 111, .88); }
.stats .container { position: relative; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat-box strong {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 800;
  color: var(--green); line-height: 1.1;
}
.stat-box strong span { font-size: inherit; color: inherit; }
.stat-box > span { color: var(--dark-20); font-size: .95rem; }

/* ---------- Steps / how it works ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.step-card {
  position: relative; background: var(--white);
  border: 1px solid var(--blue-20); border-radius: var(--radius);
  padding: 2.4rem 1.7rem 1.9rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step-card .num {
  position: absolute; top: -20px; left: 1.6rem;
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  background: var(--blue); color: var(--white); box-shadow: var(--shadow-sm);
}
.step-card:nth-child(even) .num { background: var(--green); color: var(--ink); }
.step-card h3 { font-size: 1.05rem; color: var(--dark); }
.step-card p { font-size: .9rem; color: var(--gray-57); margin: 0; }
.steps-wrap { position: relative; padding-top: 20px; }

/* ---------- Awards / about ---------- */
.awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.award-card {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius); padding: 1.8rem;
}
.award-card .ico {
  width: 48px; height: 48px; flex: none; border-radius: 14px;
  display: grid; place-items: center; background: var(--green-40); color: var(--dark);
}
.award-card .ico svg { width: 24px; height: 24px; }
.award-card h3 { font-size: 1rem; margin-bottom: .3rem; color: var(--dark); }
.award-card p { font-size: .87rem; color: var(--gray-57); margin: 0; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 820px; margin-inline: auto; display: grid; gap: .9rem; }
.faq-item {
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq-item.open { box-shadow: var(--shadow-md); border-color: var(--blue); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--dark);
}
.faq-q .chev {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-20); color: var(--dark);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq-q .chev svg { width: 15px; height: 15px; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); background: var(--green); color: var(--ink); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 1.5rem 1.35rem; margin: 0; color: var(--gray-57); font-size: .93rem; }

/* ---------- Network status ---------- */
.status-band { background: var(--white); border-top: 1px solid var(--blue-20); border-bottom: 1px solid var(--blue-20); padding-block: 1.5rem; }
.status-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.status-left { display: flex; align-items: center; gap: 1rem; }
.status-light {
  width: 14px; height: 14px; border-radius: 50%; background: var(--green); flex: none;
  animation: pulse-green 2.4s infinite;
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 4px rgba(191, 216, 87, .3); }
  50% { box-shadow: 0 0 0 9px rgba(191, 216, 87, .08); }
}
.status-left strong { font-family: var(--font-display); color: var(--dark); }
.status-left small { display: block; color: var(--gray-57); }

/* ---------- Partners ---------- */
.partners { padding-block: 3.5rem; background: var(--blue-10); }
.partners p.eyebrow {
  text-align: center; font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gray-38);
  margin-bottom: 1.75rem;
}
.partners-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2.75rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--dark-60);
}
.partners-row span { transition: color var(--dur) var(--ease); display: inline-flex; align-items: center; gap: .5rem; }
.partners-row span:hover { color: var(--dark); }
.partners-row svg { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: var(--dark-20); font-size: .92rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-block: 4.5rem 3rem; }
.footer-wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 1.9rem;
  color: var(--green); line-height: 1; margin-bottom: 1.2rem;
}
.footer-wordmark span {
  display: block; font-size: .82rem; font-weight: 700;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--white); margin-top: .3rem;
}
.footer-brand p { max-width: 30ch; }
.footer-social { display: flex; gap: .7rem; margin-top: 1.4rem; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--dark-80); color: var(--white);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--green); color: var(--ink); transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h4 { color: var(--white); font-size: .95rem; margin-bottom: 1.2rem; text-transform: uppercase; letter-spacing: .08em; }
.footer-col ul { display: grid; gap: .65rem; }
.footer-col a { color: var(--dark-20); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--green); }
.footer-col li { display: flex; gap: .6rem; align-items: flex-start; }
.footer-col li svg { width: 16px; height: 16px; flex: none; margin-top: .3rem; color: var(--blue-60); }
.footer-bottom {
  border-top: 1px solid var(--dark-80);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: .82rem; color: var(--dark-40);
}
.footer-bottom a { color: var(--dark-20); }
.footer-bottom a:hover { color: var(--green); }

/* ---------- Scroll reveal ---------- */
/* Scoped to .js so that if scripts are blocked or fail, every element stays
   visible rather than animating in from nothing and never arriving. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in-view { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--dark); color: var(--green);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 20px; height: 20px; }

/* ---------- Floating coverage shortcut (appears on scroll) ---------- */
.float-check {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 95;
  display: flex; align-items: center; gap: 1rem;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: 999px; box-shadow: var(--shadow-lg);
  padding: .55rem .6rem .55rem 1.4rem;
  max-width: calc(100vw - 2rem);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 130%);
  transition: transform .65s var(--ease), opacity .65s var(--ease), visibility .65s;
}
.float-check.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.float-check .ico {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--green-40); color: var(--dark);
}
.float-check .ico svg { width: 18px; height: 18px; }
.float-check strong { font-family: var(--font-display); color: var(--dark); font-size: .95rem; white-space: nowrap; }
.float-check .btn { padding: .7rem 1.3rem; font-size: .88rem; white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .awards-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .hero-check-card { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse > .split-media { order: 0; }

  .topbar { display: none; }
  .hero { margin-top: 96px; }
  .hero-slider { min-height: 600px; }
  .hero-copy { padding: 2.25rem 1.5rem 7rem; padding-left: 1.5rem; }
  .hero-controls { left: 1.5rem; bottom: 4.25rem; }
  .hero-arrow { display: none; }
  .hero-check { margin-top: calc(-1 * (var(--section-y) + 2.5rem)); }
  .car-track { grid-auto-columns: calc((100% - 1.5rem) / 2); }

  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw);
    flex-direction: column; align-items: stretch; gap: .3rem;
    background: var(--white); box-shadow: var(--shadow-lg);
    padding: 6.5rem 1.5rem 2rem; z-index: -1;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
  }
  .nav-links.open { transform: none; }
  .nav-links a { padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-size: 1.02rem; }
  .nav-cta .btn { display: none; }
  .nav-cta .btn.btn-lime { display: inline-flex; }
}

@media (max-width: 640px) {
  .pkg-grid, .pkg-grid.cols-2, .services-grid, .awards-grid,
  .steps-grid, .stats-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .hero-actions .btn { width: 100%; }
  .hero-check-card { padding: 1.4rem; }
  .car-track { grid-auto-columns: 100%; }
  .pkg-tabs { width: 100%; overflow-x: auto; }
  .float-check strong { display: none; }
  .float-check { padding-left: .6rem; }
}

/* ==========================================================================
   Additions — Partner badge, sub-page hero, breadcrumbs, careers, job detail,
   forms (validation + status), mobile refinements. Brand-aligned via tokens.
   ========================================================================== */

/* ---------- Partner badge (service cards / hero) ---------- */
.partner-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--green); color: var(--ink);
  font-weight: 700; font-size: .72rem; letter-spacing: .08em;
  padding: .35rem .8rem; border-radius: 999px;
  margin: 0 0 .9rem; text-transform: uppercase;
}
.partner-badge svg { width: 13px; height: 13px; }

/* ---------- Sub-page hero (Careers, Job detail) ---------- */
.subpage-hero {
  position: relative;
  margin-top: 131px; /* topbar + nav */
  background: var(--dark); color: var(--white);
  padding: clamp(3rem, 6vw, 4.75rem) 0 clamp(2.75rem, 5vw, 4rem);
  overflow: hidden;
}
.subpage-hero::before {
  content: ""; position: absolute; right: -160px; top: -160px;
  width: 380px; height: 380px; border-radius: 50%;
  border: 28px solid var(--dark-80); opacity: .35; pointer-events: none;
}
.subpage-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  border: 22px solid var(--dark-80); opacity: .25; pointer-events: none;
}
.subpage-hero .container { position: relative; z-index: 2; }
.subpage-hero .kicker { color: var(--green); }
.subpage-hero h1 { color: var(--white); font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: .5rem; }
.subpage-hero p.lede { color: var(--blue-20); max-width: 62ch; font-size: 1.05rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: 0; margin: 0 0 1.25rem;
  font-size: .82rem; color: var(--blue-20);
}
.breadcrumb a { color: var(--blue-20); font-weight: 500; padding: .2rem .1rem; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb .sep { color: var(--dark-60); font-size: .9rem; line-height: 1; }
.breadcrumb .current { color: var(--white); font-weight: 600; }
.breadcrumb.on-light { color: var(--gray-57); }
.breadcrumb.on-light a { color: var(--gray-57); }
.breadcrumb.on-light a:hover { color: var(--blue); }
.breadcrumb.on-light .sep { color: var(--gray-38); }
.breadcrumb.on-light .current { color: var(--dark); }

/* ---------- Careers layout ---------- */
.careers-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
@media (max-width: 960px) { .careers-layout { grid-template-columns: 1fr; } }

/* Inquiry / application form card (LEFT column) */
.form-card {
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 3vw, 2.15rem);
  position: sticky; top: 150px;
}
@media (max-width: 960px) { .form-card { position: static; } }
.form-card h2 { color: var(--dark); font-size: 1.35rem; margin-bottom: .35rem; }
.form-card .form-sub { color: var(--gray-57); font-size: .92rem; margin-bottom: 1.5rem; }
.form-card form { display: grid; gap: 1rem; }
.form-card .field label { font-size: .82rem; }
.form-card .field textarea { min-height: 130px; resize: vertical; font-family: inherit; }
.form-card .btn { width: 100%; margin-top: .35rem; }
.hp, .form-card .hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; }
.form-card .form-note { font-size: .78rem; color: var(--gray-38); margin: .75rem 0 0; text-align: center; }

/* Vacancy list (RIGHT column) — clickable cards */
.vacancy-list { display: grid; gap: 1.25rem; }
.vacancy-card {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 1.5rem; align-items: center;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius-lg); padding: 1.65rem 1.85rem;
  color: inherit; text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  position: relative; overflow: hidden;
  will-change: transform;
}
/* Left accent bar reveals on hover */
.vacancy-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--green); transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--ease);
}
/* Diagonal subtle sheen sweep on hover */
.vacancy-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(191, 216, 87, .08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s var(--ease);
  pointer-events: none;
}
.vacancy-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(4, 60, 111, .14), 0 0 0 1px var(--green-40);
  border-color: var(--green);
}
.vacancy-card:hover::before { transform: scaleY(1); }
.vacancy-card:hover::after { transform: translateX(100%); }
.vacancy-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.vacancy-card .v-ico {
  width: 76px; height: 76px; border-radius: var(--radius);
  display: grid; place-items: center; flex: none;
  background: var(--blue-10); color: var(--dark);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.vacancy-card:hover .v-ico { background: var(--green-40); transform: scale(1.05); }
.vacancy-card .v-ico svg { width: 34px; height: 34px; }

.vacancy-card .v-body { min-width: 0; }

.vacancy-card .v-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--blue-20); color: var(--dark);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .65rem; border-radius: 999px;
  margin-bottom: .5rem;
}
.vacancy-card h3 { color: var(--dark); font-size: 1.2rem; margin: 0 0 .3rem; transition: color var(--dur) var(--ease); }
.vacancy-card:hover h3 { color: var(--blue); }
.vacancy-card .v-desc { color: var(--gray-57); font-size: .9rem; margin: 0; line-height: 1.55; }
.vacancy-card .v-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; font-size: .82rem; color: var(--gray-57); }
.vacancy-card .v-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.vacancy-card .v-meta svg { width: 14px; height: 14px; color: var(--blue); }

/* Read More / View Details button */
.vacancy-card .v-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem; border-radius: 999px;
  background: var(--blue); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: .88rem;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  flex: none;
}
.vacancy-card .v-cta svg {
  width: 15px; height: 15px;
  transition: transform var(--dur) var(--ease);
}
.vacancy-card:hover .v-cta {
  background: var(--green); color: var(--ink);
  box-shadow: 0 6px 16px rgba(191, 216, 87, .35);
}
.vacancy-card:hover .v-cta svg { transform: translateX(3px); }

@media (max-width: 640px) {
  .vacancy-card {
    grid-template-columns: 60px 1fr;
    padding: 1.25rem;
    gap: 1rem;
  }
  .vacancy-card .v-ico { width: 60px; height: 60px; }
  .vacancy-card .v-ico svg { width: 28px; height: 28px; }
  .vacancy-card .v-cta {
    grid-column: 1 / -1;
    width: 100%;
    padding: .85rem 1.25rem;
  }
}

/* ---------- Job detail page ---------- */
.job-layout {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: start;
}
@media (max-width: 960px) { .job-layout { grid-template-columns: 1fr; } }

.job-main article + article { margin-top: 2.5rem; }
.job-main h2 { color: var(--dark); font-size: 1.4rem; margin-bottom: 1rem; }
.job-main ul.checked { display: grid; gap: .7rem; }
.job-main ul.checked li {
  display: grid; grid-template-columns: 22px 1fr; gap: .7rem;
  color: var(--gray-76); font-size: .95rem; line-height: 1.6;
}
.job-main ul.checked li svg { width: 20px; height: 20px; color: var(--blue); margin-top: .2rem; }
.job-main .job-purpose {
  background: var(--blue-10); border-left: 4px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem; color: var(--dark); font-size: 1rem;
}

/* Right column: sticky apply card + summary */
.job-side { position: sticky; top: 150px; display: grid; gap: 1.25rem; }
@media (max-width: 960px) { .job-side { position: static; } }

.apply-card {
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 1.75rem;
}
.apply-card h3 { color: var(--dark); font-size: 1.15rem; margin-bottom: .35rem; }
.apply-card p { color: var(--gray-57); font-size: .9rem; margin-bottom: 1.25rem; }
.apply-card .btn { width: 100%; margin-top: .25rem; }
.apply-card .btn + .btn { margin-top: .6rem; }

.job-summary { background: var(--white); border: 1px solid var(--blue-20); border-radius: var(--radius-lg); padding: 1.75rem; }
.job-summary h3 { color: var(--dark); font-size: 1rem; margin-bottom: 1rem; }
.job-summary dl { display: grid; gap: .9rem; margin: 0; }
.job-summary dl > div { display: grid; grid-template-columns: 22px 1fr; gap: .75rem; align-items: start; }
.job-summary dl svg { width: 18px; height: 18px; color: var(--blue); margin-top: .18rem; }
.job-summary dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-38); margin-bottom: .1rem; }
.job-summary dd { margin: 0; color: var(--dark); font-size: .92rem; font-weight: 500; }

/* Job-detail hero variant */
.subpage-hero .job-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-bottom: .75rem; }
.subpage-hero .role-tag {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--green); color: var(--ink);
  border: 0;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .5rem .95rem .5rem .55rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(191, 216, 87, .3);
}
.subpage-hero .role-tag svg {
  width: 13px; height: 13px;
  background: var(--dark); color: var(--green);
  padding: 5px; border-radius: 50%; box-sizing: content-box;
}
.subpage-hero .role-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.25rem; font-size: .85rem; color: var(--dark-20); }
.subpage-hero .role-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.subpage-hero .role-meta svg { width: 15px; height: 15px; color: var(--green); }

/* ---------- File input (CV upload) ---------- */
.field-file label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.field-file .field-hint { color: var(--gray-57); font-weight: 400; font-size: .78rem; letter-spacing: 0; text-transform: none; }
.field-file input[type="file"] {
  display: block; width: 100%;
  padding: .55rem .6rem;
  border: 1.5px dashed var(--blue-20); border-radius: var(--radius-sm);
  background: var(--blue-10); color: var(--gray-76);
  font-size: .88rem; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field-file input[type="file"]:hover { border-color: var(--blue); background: var(--white); }
.field-file input[type="file"]:focus { outline: none; border-color: var(--blue); background: var(--white); }
.field-file input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: .82rem;
  padding: .45rem 1rem; margin-right: .8rem;
  border: 0; border-radius: 999px;
  background: var(--blue); color: var(--white); cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.field-file input[type="file"]:hover::file-selector-button { background: var(--dark-80); }
.field-file .file-picked {
  display: none; margin-top: .5rem; font-size: .82rem; color: var(--dark); font-weight: 500;
}
.field-file .file-picked.show { display: inline-flex; align-items: center; gap: .35rem; }
.field-file .file-picked::before {
  content: "\2713"; display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green); color: var(--ink); font-weight: 700; font-size: .7rem;
}
.field-file .file-picked.err { color: #b53229; font-weight: 500; }
.field-file .file-picked.err::before { background: #d65b52; color: #fff; content: "!"; }

/* ---------- Form status + validation ---------- */
.form-status {
  display: none; margin-top: .5rem; padding: .95rem 1.15rem;
  border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500;
  line-height: 1.45; border-width: 1px; border-style: solid;
}
.form-status.show { display: block; }
.form-status.ok { background: var(--green-20); color: var(--dark); border-color: var(--green); }
.form-status.err { background: #fdecea; color: #7a1c14; border-color: #e5877f; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #d65b52; background: #fdf5f4; }
.field .field-error { display: none; color: #b53229; font-size: .8rem; margin-top: .25rem; font-weight: 500; }
.field.has-error .field-error { display: block; }

/* Loading state on submit buttons */
.btn.is-loading { position: relative; pointer-events: none; opacity: .8; }
.btn.is-loading::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  display: inline-block; animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Defensive: guarantee no horizontal overflow (without breaking position:sticky) ---------- */
/* overflow-x: clip does not establish a scroll container, so sticky descendants still work.
   Fallback to hidden for browsers that don't yet support clip. */
html, body { max-width: 100vw; overflow-x: hidden; overflow-x: clip; }
img, video, iframe { max-width: 100%; height: auto; }
h1, h2, h3, h4, p, li, dt, dd, span, a { overflow-wrap: break-word; word-wrap: break-word; }
pre, code, table { max-width: 100%; overflow-x: auto; }

/* ---------- Mobile / tap-target refinements (site-wide) ---------- */
@media (max-width: 900px) {
  .link-arrow { padding: .35rem 0; }
  .footer-social a { width: 44px; height: 44px; }
  .hero-copy { padding-right: 1.5rem; }
  .hero-copy h1, .hero-copy h2 { max-width: 100%; }
  .nav-cta { gap: .5rem; }
  .nav-cta .btn.btn-lime { padding: .6rem 1rem; font-size: .82rem; }
}
@media (max-width: 640px) {
  .hero-copy h1, .hero-copy h2 { font-size: 1.75rem; line-height: 1.2; }
  .hero-copy p { font-size: .95rem; }
  .hero-actions { gap: .65rem; }
  .btn-lg { padding: .95rem 1.6rem; font-size: .95rem; }
  .partners-row { gap: 1.5rem; font-size: 1rem; row-gap: 1.25rem; }
  .stat-box strong { font-size: clamp(2.1rem, 8vw, 2.6rem); }
  .nav-cta .btn.btn-lime { display: none; }
  .nav-cta { gap: 0; }
  .subpage-hero { padding: 2.5rem 0 2.5rem; }
  .subpage-hero h1 { font-size: 1.65rem; }
  .form-card { padding: 1.35rem; }
  .job-summary, .apply-card { padding: 1.35rem; }
  .status-inner { text-align: left; }
  .status-inner .link-arrow { align-self: flex-start; }
}
@media (max-width: 480px) {
  .hero-check-card { padding: 1.25rem; gap: 1rem; text-align: center; }
  .hero-check-card .ico { margin: 0 auto; }
  .hero-check-card .btn { width: 100%; }
  .footer-social { justify-content: flex-start; }
  .vacancy-card .v-meta { gap: .6rem; font-size: .78rem; }
  .pkg-tabs button { padding: .55rem 1.05rem; font-size: .85rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   PHASE 2 ADDITIONS — dedicated pages
   Coverage checker, speed test, network status, knowledge base, legal docs,
   support hubs, contact, coming-soon, mega navigation.

   Every rule below reuses the design tokens declared at the top of this file.
   No new colours, fonts, radii or shadows are introduced.
   ========================================================================== */

/* ---------- Navigation dropdowns ---------- */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .95rem; border-radius: 999px;
  font-weight: 500; font-size: .95rem; color: var(--gray-76);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-drop-btn svg { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }
.nav-drop-btn:hover { background: var(--blue-10); color: var(--dark); }
.nav-drop.is-active > .nav-drop-btn { color: var(--dark); font-weight: 600; }
.nav-drop.open > .nav-drop-btn svg { transform: rotate(180deg); }

.nav-drop-panel {
  position: absolute; top: calc(100% + .55rem); left: 50%;
  transform: translate(-50%, 8px);
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--blue-20);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .75rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: 60;
}
.nav-drop.wide .nav-drop-panel { min-width: 480px; }
.nav-drop:hover > .nav-drop-panel,
.nav-drop.open > .nav-drop-panel,
.nav-drop:focus-within > .nav-drop-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
/* Hover bridge so the pointer can travel from the button to the panel */
.nav-drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .6rem; }

.nav-drop-panel ul { display: grid; gap: .1rem; }
.nav-drop-panel a {
  display: block; padding: .6rem .85rem; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 500; color: var(--gray-76);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-drop-panel a:hover { background: var(--blue-10); color: var(--dark); }
.nav-drop-panel a.is-current { background: var(--green-20); color: var(--dark); font-weight: 600; }
.nav-drop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
.nav-drop-head {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-38); margin: .35rem 0 .5rem .85rem;
}

@media (max-width: 1200px) { .nav-cover-btn { display: none; } }
@media (max-width: 1080px) {
  .nav-links a, .nav-drop-btn { padding-inline: .7rem; font-size: .9rem; }
}

/* Mobile: dropdowns become inline accordions inside the slide-in panel */
@media (max-width: 900px) {
  .nav-drop { width: 100%; }
  .nav-drop::after { display: none; }
  .nav-drop-btn {
    width: 100%; justify-content: space-between;
    padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-size: 1.02rem;
  }
  .nav-drop-panel {
    position: static; transform: none; min-width: 0;
    border: 0; box-shadow: none; padding: 0 0 .35rem .6rem;
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent;
  }
  .nav-drop.wide .nav-drop-panel { min-width: 0; }
  /* The desktop open/hover rules also set a translate(-50%) — undo it here,
     otherwise the panel is dragged left out of the slide-in menu. */
  .nav-drop:hover > .nav-drop-panel,
  .nav-drop:focus-within > .nav-drop-panel { display: none; transform: none; }
  .nav-drop.open > .nav-drop-panel { display: block; transform: none; }
  .nav-drop-cols { grid-template-columns: 1fr; gap: 0; }
  .nav-drop-head { margin-top: .75rem; }
  .nav-drop-panel a { padding: .7rem .95rem; font-size: .95rem; }
  .nav-links { overflow-y: auto; }
}

/* ---------- Reusable CTA band ---------- */
.cta-band { background: var(--dark); }
.cta-band-inner {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.cta-band h2 { color: var(--white); margin-bottom: .5rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-band p.lede { color: var(--blue-20); margin: 0; max-width: 60ch; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 900px) {
  .cta-band-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .cta-band-actions .btn { width: 100%; } }

/* ---------- Generic content utilities ---------- */
.narrow { max-width: 820px; margin-inline: auto; }
.section-tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.band-light { background: var(--blue-10); }
.center-text { text-align: center; }

.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tile-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tile-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .tile-grid, .tile-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tile-grid, .tile-grid.cols-2, .tile-grid.cols-4 { grid-template-columns: 1fr; } }

/* Info tile — same visual family as .service-card */
.tile {
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius); padding: 1.8rem;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tile::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tile:hover::after { transform: scaleX(1); }
.tile .ico {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 1.1rem;
  display: grid; place-items: center; background: var(--blue-20); color: var(--dark); flex: none;
}
.tile .ico.green { background: var(--green-40); }
.tile .ico svg { width: 23px; height: 23px; }
.tile h3 { font-size: 1.05rem; color: var(--dark); margin-bottom: .45rem; }
.tile p { font-size: .9rem; color: var(--gray-57); margin-bottom: 1rem; }
.tile p:last-child { margin-bottom: 0; }
.tile .link-arrow { font-size: .88rem; margin-top: auto; }
a.tile { text-decoration: none; }
a.tile:hover h3 { color: var(--blue); }

/* Notice / callout boxes */
.notice {
  display: flex; gap: 1rem; align-items: flex-start;
  border-radius: var(--radius); padding: 1.25rem 1.5rem;
  background: var(--blue-10); border: 1px solid var(--blue-20);
  margin: 1.75rem 0;
}
.notice .ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-20); color: var(--dark); }
.notice .ico svg { width: 18px; height: 18px; }
.notice strong { display: block; font-family: var(--font-display); color: var(--dark); margin-bottom: .2rem; font-size: .98rem; }
.notice p { margin: 0; font-size: .9rem; color: var(--gray-57); }
.notice.tip { background: var(--green-20); border-color: var(--green); }
.notice.tip .ico { background: var(--green); color: var(--ink); }
.notice.warn { background: var(--orange-20); border-color: var(--orange); }
.notice.warn .ico { background: var(--orange); color: var(--white); }

/* Chips / badges */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--blue-20); color: var(--dark);
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: 999px;
}
.chip.green { background: var(--green); color: var(--ink); }
.chip.outline { background: transparent; border: 1px solid var(--blue-20); color: var(--gray-57); }
.chip svg { width: 12px; height: 12px; }

/* Data tables */
.data-table-wrap { overflow-x: auto; border: 1px solid var(--blue-20); border-radius: var(--radius); background: var(--white); }
table.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
table.data-table th, table.data-table td { padding: .95rem 1.15rem; text-align: left; border-bottom: 1px solid var(--blue-20); }
table.data-table thead th {
  background: var(--blue-10); color: var(--dark);
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase;
}
table.data-table tbody tr:last-child td { border-bottom: 0; }
table.data-table tbody tr:hover { background: var(--blue-10); }
table.data-table td strong { color: var(--dark); font-weight: 600; }

/* ---------- Long-form prose (KB articles, legal pages) ---------- */
.prose { color: var(--gray-76); font-size: 1rem; line-height: 1.75; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: 1.45rem; margin: 2.5rem 0 .9rem; color: var(--dark); scroll-margin-top: 150px; }
.prose h3 { font-size: 1.12rem; margin: 2rem 0 .7rem; color: var(--dark); scroll-margin-top: 150px; }
.prose h4 { font-size: 1rem; margin: 1.5rem 0 .5rem; color: var(--dark); }
.prose p { margin: 0 0 1.15em; }
.prose a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: var(--blue-40); }
.prose a:hover { text-decoration-color: var(--blue); }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.35rem; display: block; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .55em; padding-left: .25rem; }
.prose li::marker { color: var(--blue); font-weight: 600; }
.prose strong { color: var(--dark); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--blue-20); margin: 2.5rem 0; }
.prose blockquote {
  margin: 1.75rem 0; padding: 1.1rem 1.5rem;
  background: var(--blue-10); border-left: 4px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--dark);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: var(--blue-10); border: 1px solid var(--blue-20);
  padding: .1rem .4rem; border-radius: 6px; color: var(--dark);
}
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1.75rem 0; }
.prose th, .prose td { padding: .8rem 1rem; border: 1px solid var(--blue-20); text-align: left; }
.prose th { background: var(--blue-10); color: var(--dark); font-weight: 600; }

/* Numbered step list used in support articles */
ol.step-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: 1rem; counter-reset: stepc; }
ol.step-list > li {
  position: relative; counter-increment: stepc;
  background: var(--white); border: 1px solid var(--blue-20); border-radius: var(--radius);
  padding: 1.2rem 1.4rem 1.2rem 3.9rem; margin: 0;
  font-size: .95rem; line-height: 1.65;
}
ol.step-list > li::before {
  content: counter(stepc);
  position: absolute; left: 1.1rem; top: 1.15rem;
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--blue); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
}
ol.step-list > li:nth-child(even)::before { background: var(--green); color: var(--ink); }
ol.step-list > li strong { color: var(--dark); }
ol.step-list ul { margin: .6rem 0 0; padding-left: 1.2rem; list-style: disc; }
ol.step-list ul li { margin-bottom: .35rem; font-size: .92rem; }

/* Checked feature list (light background) */
ul.checklist { display: grid; gap: .7rem; margin: 1.25rem 0 1.75rem; padding: 0; list-style: none; }
ul.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; font-size: .95rem; color: var(--gray-76); line-height: 1.6; margin: 0; }
ul.checklist li svg { width: 20px; height: 20px; color: var(--blue); margin-top: .22rem; }
.on-dark ul.checklist li { color: var(--blue-20); }
.on-dark ul.checklist li svg { color: var(--green); }

/* ---------- Two-column doc layout (KB article, legal) ---------- */
.doc-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: clamp(1.75rem, 4vw, 3.25rem); align-items: start;
}
.doc-layout.side-left { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
@media (max-width: 960px) {
  .doc-layout, .doc-layout.side-left { grid-template-columns: 1fr; }
  .doc-layout.side-left > .doc-side { order: 2; }
}
.doc-side { position: sticky; top: 150px; display: grid; gap: 1.25rem; }
@media (max-width: 960px) { .doc-side { position: static; } }
.doc-card {
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius-lg); padding: 1.6rem;
}
.doc-card h3 { font-size: .95rem; color: var(--dark); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .07em; }
.doc-card p { font-size: .88rem; color: var(--gray-57); }
.doc-card .btn { width: 100%; }
.doc-card .btn + .btn { margin-top: .6rem; }

/* Table of contents */
.toc { max-height: min(60vh, 520px); overflow-y: auto; }
.toc ul { display: grid; gap: .15rem; list-style: none; padding: 0; margin: 0; }
.toc a {
  display: block; padding: .45rem .7rem; border-radius: var(--radius-sm);
  font-size: .87rem; color: var(--gray-57); line-height: 1.45;
  border-left: 2px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.toc a:hover { background: var(--blue-10); color: var(--dark); }
.toc a.is-current { background: var(--blue-10); color: var(--dark); font-weight: 600; border-left-color: var(--green); }
.toc li.lvl-3 a { padding-left: 1.5rem; font-size: .83rem; }

/* ---------- Coverage checker ---------- */
.cov-tool {
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.6rem, 4vw, 2.75rem);
}
.cov-search { display: grid; grid-template-columns: 1fr auto; gap: .85rem; align-items: end; }
@media (max-width: 640px) { .cov-search { grid-template-columns: 1fr; } .cov-search .btn { width: 100%; } }
.cov-search .field { margin: 0; }
.cov-input-wrap { position: relative; }
.cov-input-wrap > svg {
  position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--gray-38); pointer-events: none;
}
.cov-input-wrap input { padding-left: 2.9rem !important; }

.cov-suggest {
  position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0; right: 0;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .4rem; max-height: 280px; overflow-y: auto; display: none;
}
.cov-suggest.show { display: block; }
.cov-suggest button {
  display: flex; width: 100%; gap: .6rem; align-items: center;
  padding: .65rem .8rem; border-radius: var(--radius-sm); text-align: left;
  font-size: .92rem; color: var(--gray-76);
  transition: background var(--dur) var(--ease);
}
.cov-suggest button:hover, .cov-suggest button.is-active { background: var(--blue-10); color: var(--dark); }
.cov-suggest button svg { width: 15px; height: 15px; color: var(--blue); flex: none; }
.cov-suggest button small { color: var(--gray-38); margin-left: auto; font-size: .78rem; white-space: nowrap; }
@media (max-width: 640px) {
  /* Stacked on a phone the submit button sits directly under the input, so the
     suggestion list joins the flow and pushes it down instead of covering it. */
  .cov-suggest {
    position: static; margin-top: .4rem; max-height: 230px;
    box-shadow: none; background: var(--blue-10);
  }
  .cov-suggest button { background: var(--white); margin-bottom: .3rem; }
}

.cov-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; align-items: center; }
.cov-chips .label { font-size: .82rem; color: var(--gray-57); margin-right: .2rem; }
.cov-chips button {
  padding: .38rem .9rem; border-radius: 999px;
  background: var(--blue-10); border: 1px solid var(--blue-20);
  font-size: .84rem; font-weight: 500; color: var(--gray-76);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cov-chips button:hover { background: var(--green-20); border-color: var(--green); color: var(--dark); }

/* Result panel */
.cov-result { display: none; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--blue-20); }
.cov-result.show { display: block; animation: rise .55s var(--ease) both; }
.cov-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1.15rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
}
.cov-badge svg { width: 17px; height: 17px; }
.cov-badge.available { background: var(--green); color: var(--ink); }
.cov-badge.planned { background: var(--orange-20); color: #8a5200; border: 1px solid var(--orange); }
.cov-badge.survey { background: var(--blue-20); color: var(--dark); }

.cov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.75rem; }
@media (max-width: 900px) { .cov-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cov-grid { grid-template-columns: 1fr; } }
.cov-stat {
  background: var(--blue-10); border: 1px solid var(--blue-20);
  border-radius: var(--radius); padding: 1.15rem 1.25rem;
}
.cov-stat .k { display: flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-38); margin-bottom: .45rem; }
.cov-stat .k svg { width: 14px; height: 14px; color: var(--blue); }
.cov-stat .v { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--dark); line-height: 1.3; }
.cov-stat .v small { display: block; font-size: .8rem; font-weight: 400; color: var(--gray-57); margin-top: .2rem; }

.cov-tech { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.cov-tech span {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--white); border: 1.5px solid var(--blue-20);
  font-size: .85rem; font-weight: 600; color: var(--gray-57);
}
.cov-tech span.on { border-color: var(--green); background: var(--green-20); color: var(--dark); }
.cov-tech span.off { opacity: .55; }
.cov-tech svg { width: 16px; height: 16px; }
.cov-tech span.on svg { color: var(--dark); }

.cov-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
@media (max-width: 480px) { .cov-actions .btn { width: 100%; } }

/* ---------- Coverage: three-step flow ---------- */
.cov-stepper {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  list-style: none; margin: 0 0 2rem; padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--blue-20);
}
.cov-stepper li {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .84rem; font-weight: 600; color: var(--gray-38);
  transition: color var(--dur) var(--ease);
}
.cov-stepper li + li::before {
  content: ""; width: clamp(14px, 4vw, 42px); height: 2px; border-radius: 2px;
  background: var(--blue-20); margin-right: .6rem;
}
.cov-stepper .n {
  display: grid; place-items: center; width: 27px; height: 27px; flex: none;
  border-radius: 50%; background: var(--blue-10); border: 1.5px solid var(--blue-20);
  font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--gray-38);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cov-stepper li.is-current { color: var(--dark); }
.cov-stepper li.is-current .n { background: var(--blue); border-color: var(--blue); color: var(--white); }
.cov-stepper li.is-done { color: var(--gray-76); }
.cov-stepper li.is-done .n { background: var(--green); border-color: var(--green); color: var(--ink); }
@media (max-width: 560px) { .cov-stepper .t { display: none; } }

.cov-step { display: none; }
.cov-step.is-current { display: block; animation: rise .5s var(--ease) both; }
.cov-step form { display: grid; gap: 1rem; }
.cov-step .cov-search { gap: .85rem; }

.cov-hint { font-size: .84rem; color: var(--gray-57); margin: 1rem 0 0; max-width: 68ch; }
.cov-fineprint { font-size: .78rem; color: var(--gray-38); margin: .75rem 0 0; text-align: center; }

.cov-step-head { margin-bottom: 1.75rem; }
.cov-step-head h3 { color: var(--dark); font-size: 1.25rem; margin: .35rem 0 .4rem; }
.cov-step-head p { color: var(--gray-57); font-size: .93rem; margin: 0; max-width: 62ch; }

/* Success panel shown once an address is covered */
.cov-success { text-align: center; padding: .5rem 0 0; }
.cov-success .ico {
  display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 1.25rem;
  border-radius: 50%; background: var(--green-20); border: 2px solid var(--green);
}
.cov-success .ico svg { width: 30px; height: 30px; color: var(--dark); }
.cov-success h3 { color: var(--dark); font-size: clamp(1.3rem, 2.6vw, 1.65rem); margin-bottom: .5rem; }
.cov-success > p { color: var(--gray-57); font-size: .95rem; margin: 0 auto 1.5rem; max-width: 58ch; }
.cov-success .cov-tech, .cov-success .cov-actions { justify-content: center; }
.cov-success .cov-grid { text-align: left; }
.cov-success .cov-addr {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem;
  padding: .5rem 1.1rem; border-radius: 999px;
  background: var(--blue-10); border: 1px solid var(--blue-20);
  font-size: .87rem; font-weight: 600; color: var(--dark);
}
.cov-success .cov-addr svg { width: 15px; height: 15px; color: var(--blue); }
/* Timed return notice under a confirmation panel — quiet, and always escapable. */
.cs-redirect {
  margin: 1.4rem 0 0; font-size: .82rem; color: var(--gray-57);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; justify-content: center;
}
.cs-redirect[hidden] { display: none; }
.cs-redirect strong {
  display: inline-block; min-width: 1.4em; text-align: center;
  font-family: var(--font-display); font-weight: 700; color: var(--dark);
}
.cs-redirect [data-stay] {
  font-size: .82rem; font-weight: 600; color: var(--blue);
  text-decoration: underline; text-underline-offset: 3px;
}
.cs-redirect [data-stay]:hover { color: var(--ink); }

.cov-restart {
  display: block; margin: 1.5rem auto 0; font-size: .85rem; font-weight: 600;
  color: var(--gray-57); text-decoration: underline; text-underline-offset: 3px;
}
.cov-restart:hover { color: var(--blue); }

/* ---------- Speed test ---------- */
.st-stage {
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}
.st-dial { position: relative; width: min(400px, 92%); margin: 0 auto 1.25rem; }
.st-dial svg { width: 100%; height: auto; display: block; overflow: visible; }
.st-dial .st-track { stroke: var(--blue-20); }
.st-dial .st-fill {
  stroke: var(--green); stroke-linecap: round;
  stroke-dasharray: 1000 1200; stroke-dashoffset: 1000;
  transition: stroke-dashoffset .35s linear, stroke .4s var(--ease);
}
.st-dial.phase-up .st-fill { stroke: var(--blue); }
.st-dial .st-tick { stroke: var(--blue-40); stroke-width: 2; }
.st-dial .st-tick-label { fill: var(--gray-38); font-size: 10px; font-family: var(--font-display); font-weight: 600; text-anchor: middle; }
.st-needle {
  transform-origin: 150px 150px; transform-box: view-box;
  transform: rotate(-135deg);
  transition: transform .35s linear;
}
.st-needle line { stroke: var(--dark); stroke-width: 4; stroke-linecap: round; }

.st-readout { position: absolute; left: 0; right: 0; top: 41%; text-align: center; pointer-events: none; }
.st-readout .big {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 3.6rem); color: var(--dark); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.st-readout .unit { display: block; font-size: .85rem; color: var(--gray-57); margin-top: .3rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.st-phase { display: block; font-size: .8rem; color: var(--blue); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: .55rem; min-height: 1.2em; }

.st-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 700px) { .st-metrics { grid-template-columns: repeat(2, 1fr); } }
.st-metric {
  background: var(--blue-10); border: 1px solid var(--blue-20);
  border-radius: var(--radius); padding: 1.2rem 1rem; text-align: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.st-metric.is-live { border-color: var(--green); background: var(--green-20); }
.st-metric .ico { width: 34px; height: 34px; border-radius: 10px; margin: 0 auto .6rem; display: grid; place-items: center; background: var(--blue-20); color: var(--dark); }
.st-metric.is-live .ico { background: var(--green); color: var(--ink); }
.st-metric .ico svg { width: 17px; height: 17px; }
.st-metric .val { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; color: var(--dark); line-height: 1.15; font-variant-numeric: tabular-nums; }
.st-metric .val span { font-size: .8rem; font-weight: 600; color: var(--gray-57); margin-left: .15rem; }
.st-metric .lbl { font-size: .78rem; color: var(--gray-57); margin-top: .2rem; }

.st-quality { margin-top: 2rem; display: none; }
.st-quality.show { display: block; animation: rise .5s var(--ease) both; }
.st-bar { height: 10px; border-radius: 999px; background: var(--blue-20); overflow: hidden; margin: .9rem 0 .6rem; }
.st-bar i { display: block; height: 100%; width: 0; background: var(--green); border-radius: 999px; transition: width 1s var(--ease); }
.st-quality-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: baseline; }
.st-quality-head strong { font-family: var(--font-display); color: var(--dark); font-size: 1.05rem; }
.st-quality-head span { font-size: .88rem; color: var(--gray-57); }
.st-verdict { font-size: .92rem; color: var(--gray-57); margin: .75rem 0 0; }

.st-suitability { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 1.75rem; }
@media (max-width: 700px) { .st-suitability { grid-template-columns: repeat(2, 1fr); } }
.st-suit {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  padding: .8rem .95rem; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid var(--blue-20); font-size: .85rem; color: var(--gray-57);
}
.st-suit .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-19); flex: none; }
.st-suit.ok .dot { background: var(--green); }
.st-suit.mid .dot { background: var(--orange); }
.st-suit.no .dot { background: var(--gray-38); }
.st-suit.ok { border-color: var(--green); }

/* ---------- Network status ---------- */
.status-hero-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 1.75rem 2rem;
}
.status-hero-card .beacon {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--green-40); color: var(--dark);
}
.status-hero-card .beacon svg { width: 26px; height: 26px; }
.status-hero-card h2 { margin: 0 0 .2rem; font-size: 1.3rem; color: var(--dark); }
.status-hero-card p { margin: 0; font-size: .9rem; color: var(--gray-57); }
.status-hero-card .meta { margin-left: auto; text-align: right; font-size: .82rem; color: var(--gray-38); }
@media (max-width: 700px) { .status-hero-card .meta { margin-left: 0; text-align: left; width: 100%; } }

.svc-list { display: grid; gap: .75rem; }
.svc-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 1.1rem; align-items: center;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius); padding: 1.1rem 1.4rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc-row:hover { border-color: var(--blue-40); box-shadow: var(--shadow-sm); }
.svc-row .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-10); color: var(--dark); }
.svc-row .ico svg { width: 21px; height: 21px; }
.svc-row h3 { margin: 0 0 .12rem; font-size: 1rem; color: var(--dark); }
.svc-row p { margin: 0; font-size: .85rem; color: var(--gray-57); }

.svc-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .9rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap;
}
.svc-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.svc-pill.op { background: var(--green-20); color: #4a5c14; }
.svc-pill.op .dot { background: var(--green); animation: pulse-dot 2.2s infinite; }
.svc-pill.maint { background: var(--blue-20); color: var(--dark); }
.svc-pill.maint .dot { background: var(--blue-80); }
.svc-pill.degraded { background: var(--orange-20); color: #8a5200; }
.svc-pill.degraded .dot { background: var(--orange); }
.svc-pill.out { background: #fdecea; color: #7a1c14; }
.svc-pill.out .dot { background: #d65b52; }
@media (max-width: 640px) {
  .svc-row { grid-template-columns: 40px 1fr; row-gap: .75rem; padding: 1rem 1.1rem; }
  .svc-row .ico { width: 40px; height: 40px; }
  .svc-row .svc-pill { grid-column: 1 / -1; justify-self: start; }
}

/* 90-day uptime strip */
.uptime-strip { display: flex; gap: 2px; margin: .9rem 0 .5rem; height: 34px; }
.uptime-strip i {
  flex: 1; border-radius: 2px; background: var(--green); min-width: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.uptime-strip i.maint { background: var(--blue-60); }
.uptime-strip i.degraded { background: var(--orange); }
.uptime-strip i.out { background: #d65b52; }
.uptime-strip i:hover { transform: scaleY(1.12); }
.uptime-legend { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: .78rem; color: var(--gray-38); gap: .5rem; }

/* Incident timeline */
.timeline { display: grid; gap: 1.25rem; position: relative; }
.incident {
  background: var(--white); border: 1px solid var(--blue-20);
  border-left: 4px solid var(--gray-19);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.4rem 1.6rem;
}
.incident.resolved { border-left-color: var(--green); }
.incident.maintenance { border-left-color: var(--blue-80); }
.incident.investigating { border-left-color: var(--orange); }
.incident-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: .6rem; }
.incident-head h3 { margin: 0; font-size: 1.02rem; color: var(--dark); }
.incident-date { font-size: .8rem; color: var(--gray-38); margin-left: auto; white-space: nowrap; }
.incident p { font-size: .9rem; color: var(--gray-57); margin: 0 0 .5rem; }
.incident-updates { display: grid; gap: .6rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--blue-20); }
.incident-updates li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; font-size: .86rem; color: var(--gray-57); }
.incident-updates time { font-weight: 600; color: var(--dark); font-size: .8rem; white-space: nowrap; }
@media (max-width: 640px) {
  .incident-updates li { grid-template-columns: 1fr; gap: .15rem; }
  .incident-date { margin-left: 0; width: 100%; }
}

/* Maintenance card */
.maint-card {
  display: grid; grid-template-columns: 76px 1fr; gap: 1.25rem; align-items: start;
  background: var(--white); border: 1px solid var(--blue-20); border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
}
.maint-date {
  background: var(--blue); color: var(--white); border-radius: var(--radius-sm);
  text-align: center; padding: .6rem .3rem; font-family: var(--font-display);
}
.maint-date .d { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.maint-date .m { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .2rem; }
.maint-card h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--dark); }
.maint-card p { margin: 0 0 .5rem; font-size: .88rem; color: var(--gray-57); }
.maint-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .82rem; color: var(--gray-57); }
.maint-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.maint-meta svg { width: 14px; height: 14px; color: var(--blue); }

/* ---------- Knowledge base ---------- */
.kb-search-wrap { max-width: 660px; margin: 0 auto; position: relative; }
.kb-search-wrap input {
  width: 100%; padding: 1.1rem 1.3rem 1.1rem 3.35rem;
  border: 1.5px solid var(--blue-20); border-radius: 999px;
  background: var(--white); font-size: 1rem; box-shadow: var(--shadow-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kb-search-wrap input:focus { outline: none; border-color: var(--green); box-shadow: var(--shadow-lg); }
.kb-search-wrap > svg { position: absolute; left: 1.3rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--gray-38); pointer-events: none; }

.kb-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 2rem 0 2.75rem; }
.kb-filters button {
  padding: .55rem 1.15rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--blue-20);
  font-size: .87rem; font-weight: 600; color: var(--gray-57);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kb-filters button:hover { border-color: var(--blue-40); color: var(--dark); }
.kb-filters button[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--white); }

.kb-cat { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.kb-cat[hidden] { display: none; }
.kb-cat-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.35rem; }
.kb-cat-head .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--green-40); color: var(--dark); flex: none; }
.kb-cat-head .ico svg { width: 22px; height: 22px; }
.kb-cat-head h2 { margin: 0; font-size: 1.25rem; color: var(--dark); }
.kb-cat-head p { margin: .1rem 0 0; font-size: .86rem; color: var(--gray-57); }
.kb-cat-head .count { margin-left: auto; font-size: .78rem; color: var(--gray-38); white-space: nowrap; }

.kb-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 840px) { .kb-list { grid-template-columns: 1fr; } }
.kb-item {
  display: grid; grid-template-columns: 38px 1fr 18px; gap: 1rem; align-items: center;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kb-item[hidden] { display: none; }
.kb-item:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow-md); }
.kb-item .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--blue-10); color: var(--blue); flex: none; transition: background var(--dur) var(--ease); }
.kb-item:hover .ico { background: var(--green-40); color: var(--dark); }
.kb-item .ico svg { width: 18px; height: 18px; }
.kb-item h3 { margin: 0 0 .15rem; font-size: .97rem; color: var(--dark); font-weight: 600; line-height: 1.35; }
.kb-item p { margin: 0; font-size: .84rem; color: var(--gray-57); line-height: 1.5; }
.kb-item > svg:last-child { width: 18px; height: 18px; color: var(--blue-40); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.kb-item:hover > svg:last-child { transform: translateX(3px); color: var(--green); }

.kb-empty { display: none; text-align: center; padding: 3rem 1rem; color: var(--gray-57); }
.kb-empty.show { display: block; }
.kb-empty .ico { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 1.1rem; display: grid; place-items: center; background: var(--blue-10); color: var(--blue-60); }
.kb-empty .ico svg { width: 28px; height: 28px; }
.kb-empty h3 { color: var(--dark); margin-bottom: .35rem; }

/* Article helpfulness widget */
.kb-helpful {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  background: var(--blue-10); border: 1px solid var(--blue-20);
  border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-top: 3rem;
}
.kb-helpful strong { font-family: var(--font-display); color: var(--dark); font-size: .98rem; }
.kb-helpful .acts { display: flex; gap: .6rem; margin-left: auto; }
@media (max-width: 560px) { .kb-helpful .acts { margin-left: 0; width: 100%; } .kb-helpful .acts button { flex: 1; } }
.kb-helpful button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.2rem; border-radius: 999px;
  background: var(--white); border: 1.5px solid var(--blue-20);
  font-size: .87rem; font-weight: 600; color: var(--gray-57);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.kb-helpful button:hover { border-color: var(--green); color: var(--dark); transform: translateY(-2px); }
.kb-helpful button svg { width: 16px; height: 16px; }
.kb-helpful .thanks { display: none; font-size: .9rem; color: var(--dark); font-weight: 500; }
.kb-helpful.done .acts, .kb-helpful.done strong { display: none; }
.kb-helpful.done .thanks { display: block; }

/* Related articles */
.related-list { display: grid; gap: .6rem; }
.related-list a {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .7rem .85rem; border-radius: var(--radius-sm);
  font-size: .89rem; color: var(--gray-76); line-height: 1.45;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.related-list a:hover { background: var(--blue-10); color: var(--dark); }
.related-list svg { width: 15px; height: 15px; color: var(--blue); flex: none; margin-top: .18rem; }

/* Article meta row */
.article-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin-top: 1.25rem; font-size: .84rem; color: var(--dark-20); }
.article-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.article-meta svg { width: 15px; height: 15px; color: var(--green); }

/* Prev / next article navigation */
.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
@media (max-width: 640px) { .doc-pager { grid-template-columns: 1fr; } }
.doc-pager a {
  display: block; padding: 1.1rem 1.3rem;
  background: var(--white); border: 1px solid var(--blue-20); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.doc-pager a:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.doc-pager .dir { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-38); margin-bottom: .3rem; }
.doc-pager .ttl { display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--dark); line-height: 1.4; }
.doc-pager a.next { text-align: right; }
.doc-pager a.spacer { visibility: hidden; }

/* ---------- Contact page ---------- */
.contact-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(1.75rem, 4vw, 3rem); align-items: start;
}
@media (max-width: 960px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-methods { display: grid; gap: 1rem; }
.contact-method {
  display: grid; grid-template-columns: 48px 1fr; gap: 1.1rem; align-items: start;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius); padding: 1.4rem 1.5rem; color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact-method:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: var(--shadow-md); }
.contact-method .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--green-40); color: var(--dark); }
.contact-method .ico svg { width: 23px; height: 23px; }
.contact-method h3 { margin: 0 0 .25rem; font-size: 1rem; color: var(--dark); }
.contact-method p { margin: 0 0 .35rem; font-size: .87rem; color: var(--gray-57); }
.contact-method .val { font-family: var(--font-display); font-weight: 600; color: var(--blue); font-size: .95rem; word-break: break-word; }

.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--blue-20); box-shadow: var(--shadow-md); }
.map-embed iframe { display: block; width: 100%; height: 380px; border: 0; }

.hours-list { display: grid; gap: .6rem; }
.hours-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--blue-20); }
.hours-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.hours-list span:first-child { color: var(--gray-57); }
.hours-list span:last-child { color: var(--dark); font-weight: 600; }

/* ---------- Coming soon ---------- */
.coming-soon { text-align: center; max-width: 640px; margin-inline: auto; padding-block: clamp(2rem, 5vw, 3.5rem); }
.coming-soon .cs-ico {
  width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 1.75rem;
  display: grid; place-items: center; background: var(--green-40); color: var(--dark);
  position: relative;
}
.coming-soon .cs-ico::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 2px solid var(--green-60); animation: pulse-ring 2.8s var(--ease) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.coming-soon .cs-ico svg { width: 40px; height: 40px; }
.coming-soon h1, .coming-soon h2 { color: var(--dark); margin-bottom: .75rem; }
.coming-soon p { color: var(--gray-57); font-size: 1.05rem; }
.coming-soon .cs-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
@media (max-width: 480px) { .coming-soon .cs-actions .btn { width: 100%; } }
.cs-progress { max-width: 420px; margin: 2.25rem auto 0; }
.cs-progress .bar { height: 8px; border-radius: 999px; background: var(--blue-20); overflow: hidden; }
.cs-progress .bar i { display: block; height: 100%; width: 62%; background: var(--green); border-radius: 999px; }
.cs-progress .lbl { display: flex; justify-content: space-between; font-size: .78rem; color: var(--gray-38); margin-top: .5rem; }

/* ---------- Sitemap page ---------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
@media (max-width: 900px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sitemap-grid { grid-template-columns: 1fr; } }
.sitemap-grid h2 { font-size: 1.05rem; color: var(--dark); margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--green); }
.sitemap-grid ul { display: grid; gap: .55rem; }
.sitemap-grid a { font-size: .92rem; color: var(--gray-76); display: inline-flex; align-items: center; gap: .45rem; }
.sitemap-grid a:hover { color: var(--blue); }
.sitemap-grid a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-40); flex: none; }

/* ---------- Package comparison / spec rows ---------- */
.spec-list { display: grid; gap: 0; border: 1px solid var(--blue-20); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.spec-list > div { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 1rem; padding: .95rem 1.35rem; border-bottom: 1px solid var(--blue-20); font-size: .92rem; }
.spec-list > div:last-child { border-bottom: 0; }
.spec-list > div:nth-child(odd) { background: var(--blue-10); }
.spec-list dt, .spec-list .k { font-weight: 600; color: var(--dark); margin: 0; }
.spec-list dd, .spec-list .v { margin: 0; color: var(--gray-57); }
@media (max-width: 560px) { .spec-list > div { grid-template-columns: 1fr; gap: .2rem; } }

/* Package card variant that carries a price slot (populate when pricing is public) */
.pkg-card .pkg-price-slot {
  display: block; margin: -.4rem 0 1.2rem;
  font-size: .82rem; color: var(--gray-57);
}
.pkg-card .pkg-price-slot strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--dark); font-weight: 700; }

/* ---------- Support hub ---------- */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-card {
  display: flex; flex-direction: column; gap: .5rem; height: 100%;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius); padding: 1.5rem; color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hub-card:hover { transform: translateY(-5px); border-color: var(--green); box-shadow: var(--shadow-md); }
.hub-card .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-20); color: var(--dark); margin-bottom: .4rem; }
.hub-card .ico svg { width: 21px; height: 21px; }
.hub-card h3 { margin: 0; font-size: 1rem; color: var(--dark); }
.hub-card p { margin: 0; font-size: .86rem; color: var(--gray-57); flex: 1; }
.hub-card .go { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--blue); margin-top: .6rem; }
.hub-card .go svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.hub-card:hover .go svg { transform: translateX(4px); }

/* ---------- Troubleshooter (guided fix) ---------- */
.tshoot { background: var(--white); border: 1px solid var(--blue-20); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.tshoot-step { display: none; }
.tshoot-step.is-active { display: block; animation: rise .45s var(--ease) both; }
.tshoot-step h3 { font-size: 1.15rem; color: var(--dark); margin-bottom: .5rem; }
.tshoot-step p { font-size: .93rem; color: var(--gray-57); }
.tshoot-opts { display: grid; gap: .7rem; margin-top: 1.5rem; }
.tshoot-opts button {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; padding: 1rem 1.25rem;
  background: var(--blue-10); border: 1.5px solid var(--blue-20); border-radius: var(--radius-sm);
  font-size: .95rem; font-weight: 500; color: var(--gray-76);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tshoot-opts button:hover { background: var(--white); border-color: var(--green); color: var(--dark); transform: translateX(3px); }
.tshoot-opts button svg { width: 17px; height: 17px; color: var(--blue); flex: none; }
.tshoot-progress { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--gray-38); margin-bottom: 1.25rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.tshoot-progress .bar { flex: 1; height: 4px; border-radius: 999px; background: var(--blue-20); overflow: hidden; }
.tshoot-progress .bar i { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width var(--dur) var(--ease); }
.tshoot-reset { margin-top: 1.5rem; font-size: .85rem; }

/* ---------- Report-a-fault form ---------- */
.report-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (max-width: 960px) { .report-layout { grid-template-columns: 1fr; } }
.report-form { background: var(--white); border: 1px solid var(--blue-20); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(1.5rem, 3.5vw, 2.35rem); }
.report-form form { display: grid; gap: 1.15rem; }
.report-form .field textarea { min-height: 150px; resize: vertical; font-family: inherit; }
.field-hint { display: block; font-size: .78rem; color: var(--gray-38); margin-top: .3rem; font-weight: 400; }
.severity-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 560px) { .severity-opts { grid-template-columns: 1fr; } }
.severity-opts label {
  display: block; cursor: pointer; padding: .85rem 1rem;
  background: var(--blue-10); border: 1.5px solid var(--blue-20); border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 600; color: var(--gray-57); text-align: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  margin: 0;
}
.severity-opts input { position: absolute; opacity: 0; width: 0; height: 0; }
.severity-opts input:checked + label { background: var(--green-20); border-color: var(--green); color: var(--dark); }
.severity-opts input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
.severity-opts label small { display: block; font-weight: 400; font-size: .75rem; color: var(--gray-38); margin-top: .15rem; }
.severity-opts input:checked + label small { color: var(--gray-57); }

/* Success confirmation panel */
.submit-done { display: none; text-align: center; padding: 1rem 0; }
.submit-done.show { display: block; animation: rise .5s var(--ease) both; }
.submit-done .ico { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1.35rem; display: grid; place-items: center; background: var(--green-40); color: var(--dark); }
.submit-done .ico svg { width: 34px; height: 34px; }
.submit-done h2 { color: var(--dark); font-size: 1.4rem; margin-bottom: .5rem; }
.submit-done p { color: var(--gray-57); }
.submit-done .ref {
  display: inline-block; margin: 1rem 0 1.5rem; padding: .7rem 1.4rem;
  background: var(--blue-10); border: 1px dashed var(--blue-40); border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem; font-weight: 700; color: var(--dark); letter-spacing: .06em;
}
.submit-done .cs-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
/* Once submitted, only the confirmation remains — the heading and intro copy
   that introduced the form would otherwise read oddly above it. */
.is-submitted > *:not(.submit-done) { display: none; }

/* ---------- Legal document header ---------- */
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  background: var(--blue-10); border: 1px solid var(--blue-20); border-radius: var(--radius);
  padding: 1.15rem 1.5rem; margin-bottom: 2.25rem; font-size: .86rem;
}
.legal-meta div { display: grid; gap: .1rem; }
.legal-meta dt, .legal-meta .k { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-38); }
.legal-meta dd, .legal-meta .v { margin: 0; color: var(--dark); font-weight: 600; }

/* ---------- Stat row (about / business pages) ---------- */
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .mini-stats { grid-template-columns: repeat(2, 1fr); } }
.mini-stat { text-align: center; padding: 1.5rem 1rem; background: var(--white); border: 1px solid var(--blue-20); border-radius: var(--radius); }
.mini-stat strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: var(--blue); line-height: 1.1; }
.mini-stat span { display: block; font-size: .85rem; color: var(--gray-57); margin-top: .35rem; }

/* Timeline / milestones */
.milestones { display: grid; gap: 0; position: relative; padding-left: 2.25rem; }
.milestones::before { content: ""; position: absolute; left: 11px; top: .6rem; bottom: .6rem; width: 2px; background: var(--blue-20); }
.milestone { position: relative; padding: 0 0 2rem; }
.milestone:last-child { padding-bottom: 0; }
.milestone::before {
  content: ""; position: absolute; left: -2.25rem; top: .35rem;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--green);
}
.milestone .yr { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--blue); margin-bottom: .25rem; }
.milestone h3 { margin: 0 0 .3rem; font-size: 1.02rem; color: var(--dark); }
.milestone p { margin: 0; font-size: .9rem; color: var(--gray-57); }

/* ---------- Value / mission cards on dark ---------- */
.on-dark .tile, .on-dark .hub-card { background: rgba(255,255,255,.05); border-color: var(--dark-80); }
.on-dark .tile h3, .on-dark .hub-card h3 { color: var(--white); }
.on-dark .tile p, .on-dark .hub-card p { color: var(--dark-20); }
.on-dark .tile .ico, .on-dark .hub-card .ico { background: var(--dark-80); color: var(--green); }

/* ---------- Print (legal pages) ---------- */
@media print {
  .site-header, .site-footer, .to-top, .float-check, .doc-side, .cta-band, .skip-link { display: none !important; }
  .subpage-hero { margin-top: 0; background: none; color: var(--ink); padding: 0 0 1.5rem; }
  .subpage-hero h1, .subpage-hero p.lede { color: var(--ink); }
  .subpage-hero::before, .subpage-hero::after { display: none; }
  .doc-layout { grid-template-columns: 1fr; }
  body { font-size: 11pt; }
  a { text-decoration: underline; }
}

/* ---------- Nav sizing corrections ---------- */
.nav-drop-btn { white-space: nowrap; }
.nav-cta .btn { white-space: nowrap; }
.nav-links { flex: 0 1 auto; min-width: 0; }
.brand { flex: none; }
.nav-cta { flex: none; }
@media (max-width: 900px) {
  .nav-links a, .nav-drop-btn { white-space: normal; }
}

/* Check Coverage CTA button reflects the active page */
.nav-cover-btn.is-here { background: var(--blue); color: var(--white); }
.nav-cover-btn.is-here:hover { background: var(--dark-80); border-color: var(--dark-80); }

/* Deep-link anchors for the package tabs — offset for the sticky header */
.tab-anchors { position: relative; height: 0; }
.tab-anchors span { position: absolute; top: -150px; display: block; }

/* ==========================================================================
   PHASE 3 — desktop top-bar navigation
   The top bar is already hidden below 900px, so everything here is desktop
   only and the mobile slide-in menu is untouched.
   ========================================================================== */
.topbar-inner { justify-content: space-between; padding-block: 0; }

.topnav { display: flex; align-items: stretch; gap: .15rem; }
.topnav > a,
.topnav-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .85rem;
  font-size: .8rem; font-weight: 500; color: var(--dark-20);
  white-space: nowrap; border-radius: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.topnav > a svg, .topnav-btn svg { width: 13px; height: 13px; flex: none; }
.topnav-btn .cv { width: 11px; height: 11px; transition: transform var(--dur) var(--ease); opacity: .8; }
.topnav > a:hover, .topnav-btn:hover { background: rgba(255,255,255,.09); color: var(--green); }
.topnav > a.is-current { color: var(--green); font-weight: 600; }
.topnav-drop.is-active > .topnav-btn { color: var(--green); font-weight: 600; }
.topnav-drop.open > .topnav-btn .cv,
.topnav-drop:hover > .topnav-btn .cv { transform: rotate(180deg); }

.topnav-drop { position: relative; display: flex; }
.topnav-panel {
  position: absolute; top: 100%; left: 0; min-width: 232px;
  background: var(--white);
  border: 1px solid var(--blue-20);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .5rem; z-index: 120;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.topnav-drop:hover > .topnav-panel,
.topnav-drop.open > .topnav-panel,
.topnav-drop:focus-within > .topnav-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.topnav-panel ul { display: grid; gap: .1rem; }
.topnav-panel a {
  display: block; padding: .55rem .8rem; border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 500; color: var(--gray-76);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.topnav-panel a:hover { background: var(--blue-10); color: var(--dark); }
.topnav-panel a.is-current { background: var(--green-20); color: var(--dark); font-weight: 600; }

/* The main bar no longer needs its own Support menu on desktop — those
   destinations now live in the top bar. It stays in the markup because the
   mobile menu still uses it. */
@media (min-width: 901px) {
  .nav-links .nav-drop.support-only { display: none; }
  /* Knowledge Base and Moving Home live in the top bar on desktop, so their
     duplicate entries in the main list are mobile-only. */
  .nav-links a.mobile-only { display: none; }
}
@media (max-width: 1240px) {
  .topnav > a span, .topnav-btn { font-size: .76rem; }
  .topnav > a, .topnav-btn { padding-inline: .6rem; }
}
@media (max-width: 1040px) {
  .topnav > a svg:not(.cv), .topnav-btn > svg:first-child { display: none; }
}

/* Contact cards: the inline icon inside a value line had no size constraint,
   so it rendered at the browser default. */
.contact-method .val svg { width: 15px; height: 15px; vertical-align: -2px; margin-left: .15rem; }
.contact-method .val { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

/* ---------- Network status: live metric strip ---------- */
.live-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.25rem; }
@media (max-width: 900px) { .live-metrics { grid-template-columns: repeat(2, 1fr); } }
.live-metric {
  background: var(--white); border: 1px solid var(--blue-20); border-radius: var(--radius);
  padding: .95rem 1.15rem; display: grid; gap: .3rem;
}
.live-metric .k {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-38);
}
.live-metric .k svg { width: 13px; height: 13px; color: var(--blue); }
.live-metric .v { font-family: var(--font-display); font-size: 1.05rem; color: var(--gray-57); font-weight: 500; }
.live-metric .v b {
  font-size: 1.35rem; font-weight: 800; color: var(--dark); font-variant-numeric: tabular-nums;
  transition: color .25s var(--ease);
}
.live-metric .v b.tick { color: var(--blue); }

/* Uptime bars animate in on load */
.uptime-strip i { transform-origin: bottom; }
.uptime-strip.animate i { animation: bar-in .5s var(--ease) both; }
@keyframes bar-in { from { transform: scaleY(.15); opacity: .35; } to { transform: scaleY(1); opacity: 1; } }

/* The beacon breathes so the page reads as live */
.status-hero-card .beacon { position: relative; }
.status-hero-card .beacon::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--green); opacity: 0;
  animation: beacon-pulse 3s var(--ease) infinite;
}
@keyframes beacon-pulse {
  0% { transform: scale(.92); opacity: .75; }
  70%, 100% { transform: scale(1.22); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .uptime-strip.animate i { animation: none; }
  .status-hero-card .beacon::after { animation: none; }
}

/* Two-column checklist on wide screens (Moving Home summary) */
ul.checklist[style*="columns"] li { break-inside: avoid; }
@media (max-width: 640px) { ul.checklist[style*="columns"] { columns: 1 !important; } }


/* ==========================================================================
   PHASE 4 — footer rebalanced after the contact column was removed
   ========================================================================== */
/* Brand block plus three link columns, evenly weighted. */
.footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 1080px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .footer-top { grid-template-columns: 1fr; } }

/* Copyright reads as one line; it only wraps on genuinely narrow screens. */
.footer-bottom { align-items: center; }
.footer-copy { line-height: 1.6; }
@media (max-width: 900px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* ==========================================================================
   Flex Chat — on-site assistant (bottom-left)
   Same palette, radii and motion tokens as the rest of the site.
   ========================================================================== */
.flexchat {
  position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 120;
  display: flex; flex-direction: column; align-items: flex-start; gap: .75rem;
  font-family: var(--font-body);
  /* The container itself is transparent to the mouse, so the gaps around the
     launcher never block a button underneath. Only the parts you can see and
     click take pointer events back. */
  pointer-events: none;
}
.fc-launcher, .fc-panel { pointer-events: auto; }
.flexchat .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Launcher ---- */
.fc-launcher {
  position: relative; order: 2;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue); color: var(--green);
  box-shadow: 0 10px 30px rgba(4, 60, 111, .34);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fc-launcher:hover { transform: translateY(-3px) scale(1.04); background: #05477f; }
.fc-launcher svg { width: 27px; height: 27px; }
.fc-launcher .fc-ico-close { display: none; }
.flexchat.is-open .fc-launcher .fc-ico-chat { display: none; }
.flexchat.is-open .fc-launcher .fc-ico-close { display: block; }
.flexchat.is-open .fc-launcher { background: var(--dark); color: var(--white); }

.fc-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  background: #e5484d; color: var(--white);
  font-family: var(--font-display); font-size: .72rem; font-weight: 700; line-height: 1;
  border: 2px solid var(--white);
  animation: fc-pop .45s var(--ease) both;
}
.fc-badge[hidden] { display: none; }
@keyframes fc-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---- Greeting bubble ---- */
.fc-bubble {
  order: 1; position: relative; max-width: 306px;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius) var(--radius) var(--radius) 6px;
  box-shadow: 0 14px 38px rgba(4, 60, 111, .18);
  padding: .95rem 1rem;
  opacity: 0; transform: translateY(10px) scale(.96); transform-origin: 0 100%;
  transition: opacity .32s var(--ease), transform .32s var(--ease);
  pointer-events: none;
}
.fc-bubble[hidden] { display: none; }
.flexchat.has-bubble .fc-bubble { opacity: 1; transform: none; pointer-events: auto; }
.fc-bubble-row { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.fc-bubble p { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--gray-76); padding-right: .9rem; }
.fc-bubble-close {
  position: absolute; top: .4rem; right: .4rem;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gray-38);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fc-bubble-close:hover { background: var(--blue-10); color: var(--dark); }
.fc-bubble-close svg { width: 12px; height: 12px; }

.fc-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: var(--blue);
}
.fc-avatar svg { width: 17px; height: 17px; }
.fc-avatar.lg { width: 38px; height: 38px; }
.fc-avatar.lg svg { width: 21px; height: 21px; }
.fc-avatar.sm { width: 26px; height: 26px; align-self: flex-end; }
.fc-avatar.sm svg { width: 14px; height: 14px; }

/* ---- Panel ---- */
.fc-panel {
  order: 1; width: min(374px, calc(100vw - 2.8rem));
  /* This is a <section>, so the global section rhythm has to be cancelled. */
  padding: 0; position: relative;
  height: min(548px, calc(100vh - 7.5rem)); max-height: calc(100vh - 7.5rem);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--blue-20);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(4, 60, 111, .26);
  animation: fc-in .34s var(--ease) both;
}
@keyframes fc-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.fc-panel[hidden] { display: none; }

.fc-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .95rem 1.1rem; background: var(--blue); color: var(--white); flex: none;
}
.fc-head-txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.fc-head-txt strong { font-family: var(--font-display); font-size: .98rem; }
.fc-head-txt span { font-size: .76rem; color: var(--blue-20); display: flex; align-items: center; gap: .4rem; }
.fc-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none;
  animation: fc-pulse 2.4s var(--ease) infinite;
}
@keyframes fc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.fc-min {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: var(--white); transition: background var(--dur) var(--ease);
}
.fc-min:hover { background: rgba(255, 255, 255, .16); }
.fc-min svg { width: 17px; height: 17px; }

/* ---- Pre-chat details ---- */
.fc-gate { padding: 1.35rem 1.25rem 1.5rem; overflow-y: auto; }
.fc-gate[hidden] { display: none; }
.fc-gate h4 { font-family: var(--font-display); font-size: 1.02rem; color: var(--dark); margin-bottom: .3rem; }
.fc-gate > p { font-size: .84rem; color: var(--gray-57); margin: 0 0 1.1rem; line-height: 1.55; }
.fc-gate label {
  display: block; font-size: .76rem; font-weight: 600; color: var(--gray-76);
  margin-bottom: .3rem; letter-spacing: .01em;
}
.fc-gate input {
  width: 100%; padding: .7rem .85rem; margin-bottom: .85rem;
  border: 1px solid var(--blue-20); border-radius: var(--radius-sm);
  background: var(--blue-10); font-family: var(--font-body); font-size: .88rem; color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fc-gate input:focus { outline: none; border-color: var(--blue); background: var(--white); }
.fc-start {
  width: 100%; padding: .8rem 1rem; border-radius: 999px;
  background: var(--green); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  box-shadow: var(--shadow-sm); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fc-start:hover { background: var(--green-80); transform: translateY(-2px); }
.fc-err { font-size: .8rem; color: #c02a2f; margin: 0 0 .7rem; }
.fc-err[hidden] { display: none; }
.fc-fine { font-size: .72rem; color: var(--gray-38); margin: .8rem 0 0; text-align: center; line-height: 1.5; }

/* ---- Conversation ---- */
.fc-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.fc-body[hidden] { display: none; }
.fc-log {
  flex: 1; overflow-y: auto; padding: 1.1rem 1rem .5rem;
  background: var(--blue-10); display: flex; flex-direction: column; gap: .7rem;
  scroll-behavior: smooth;
}
.fc-msg { display: flex; gap: .5rem; align-items: flex-end; animation: fc-msg-in .3s var(--ease) both; }
@keyframes fc-msg-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.fc-msg.fc-me { justify-content: flex-end; }
.fc-bub {
  max-width: 84%; padding: .7rem .9rem; border-radius: 14px;
  font-size: .855rem; line-height: 1.6; color: var(--gray-76);
  background: var(--white); border: 1px solid var(--blue-20);
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(4, 60, 111, .05);
}
.fc-me .fc-bub {
  background: var(--blue); color: var(--white); border-color: var(--blue);
  border-bottom-left-radius: 14px; border-bottom-right-radius: 5px;
}
.fc-bub p { margin: 0 0 .6rem; }
.fc-bub p:last-child { margin-bottom: 0; }
.fc-bub ul { margin: 0 0 .6rem; padding-left: 1.05rem; display: grid; gap: .35rem; list-style: disc; }
.fc-bub ul:last-child { margin-bottom: 0; }
.fc-bub li { font-size: .845rem; }
.fc-bub a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.fc-bub a:hover { color: var(--ink); }
.fc-bub strong { color: var(--dark); font-weight: 700; }

.fc-typing .fc-bub { display: flex; gap: .28rem; padding: .85rem .9rem; }
.fc-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dark-40);
  animation: fc-blink 1.25s var(--ease) infinite;
}
.fc-typing i:nth-child(2) { animation-delay: .18s; }
.fc-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes fc-blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.fc-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding-left: 2.1rem; }
.fc-chip {
  padding: .42rem .8rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--blue-40);
  font-size: .78rem; font-weight: 600; color: var(--blue); text-align: left;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fc-chip:hover { background: var(--green); border-color: var(--green); color: var(--ink); }

.fc-compose {
  display: flex; gap: .5rem; align-items: center; flex: none;
  padding: .7rem .8rem; background: var(--white); border-top: 1px solid var(--blue-20);
}
.fc-compose input {
  flex: 1; min-width: 0; padding: .68rem .9rem; border-radius: 999px;
  border: 1px solid var(--blue-20); background: var(--blue-10);
  font-family: var(--font-body); font-size: .86rem; color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fc-compose input:focus { outline: none; border-color: var(--blue); background: var(--white); }
.fc-compose button {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--green); color: var(--blue);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fc-compose button:hover { background: var(--green-80); transform: scale(1.06); }
.fc-compose button svg { width: 18px; height: 18px; }
.fc-foot {
  margin: 0; padding: 0 1rem .7rem; background: var(--white);
  font-size: .69rem; color: var(--gray-38); text-align: center;
}

@media (max-width: 560px) {
  .flexchat { left: 1rem; bottom: 1rem; }
  .fc-panel { width: calc(100vw - 2rem); height: min(520px, calc(100vh - 5.5rem)); max-height: calc(100vh - 5.5rem); }
  .fc-bubble { max-width: calc(100vw - 6.5rem); }
  .fc-launcher { width: 54px; height: 54px; }
}
@media (max-width: 480px) {
  /* The floating coverage pill sits centre-bottom on the homepage — lift the
     launcher clear of it so neither control covers the other. */
  .float-check.show ~ .flexchat .fc-launcher { transform: translateY(-58px); }
  .float-check.show ~ .flexchat .fc-bubble { display: none; }
}
@media print { .flexchat { display: none !important; } }

/* ==========================================================================
   WordPress admin bar
   The site header is position:fixed at top:0. WordPress pins its own admin bar
   in the same place for signed-in users, so without this the top bar sits
   underneath it and all but a sliver disappears. Visitors never saw this —
   only whoever was logged in, which is the person most likely to think the
   menu had broken.
   ========================================================================== */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .float-check { bottom: 1.25rem; }

@media screen and (max-width: 782px) {
  /* WordPress makes its bar taller on small screens, and it stops being fixed. */
  body.admin-bar .site-header { top: 46px; }
}