/* ============================================================
   Bright Neighbour — Permanent Outdoor Lighting, Ottawa
   Design system: black / electric blue glow (#3FD8FF) / metallic silver,
   condensed display type
   ============================================================ */

:root {
  /* Electric blue — the neon channel, brightest at the core */
  --blue-core: #B9FBFF;
  --blue: #3FD8FF;
  --blue-bright: #00B7F0;
  --blue-deep: #0A5C87;
  --blue-rgb: 63, 216, 255;
  /* The glow itself. Only ever used over black — a bloom on white is mud. */
  --glow: 0 0 26px rgba(63, 216, 255, 0.45);
  --glow-soft: 0 0 18px rgba(63, 216, 255, 0.28);
  --text-glow: 0 0 24px rgba(63, 216, 255, 0.42);

  --black: #05070A;
  --ink: #0B1014;
  --ink-2: #121A21;

  /* Metallic silver — the extrusion the light sits in */
  --silver: #C4CDD6;
  --silver-lite: #E8EDF2;
  --silver-dark: #8C97A3;
  --metal: linear-gradient(135deg, #F4F7FA 0%, #C4CDD6 38%, #8C97A3 58%, #DFE5EB 100%);

  --line-dark: rgba(63, 216, 255, 0.16);
  --line-metal: rgba(196, 205, 214, 0.22);
  --paper: #EDF1F5;
  --white: #FFFFFF;
  --text-dark: #12171C;
  --text-mut-dark: #4A545F;
  --text-light: #E8EDF2;
  --text-mut-light: #99A4B0;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 18px 50px -18px rgba(5, 7, 10, 0.35);
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Clip (not hidden) so the sticky header keeps working while nothing can
   ever create a horizontal scrollbar */
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dark);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: inherit;
}

h1 { font-size: clamp(2.9rem, 7vw, 5.2rem); }
h2 { font-size: clamp(2.1rem, 4.5vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: 0.02em; }

.lead { font-size: 1.18rem; line-height: 1.6; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--blue-deep);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--blue-bright);
}
.on-dark .eyebrow, .section-dark .eyebrow, .section-black .eyebrow, .hero .eyebrow { color: var(--blue); }
.on-dark .eyebrow::before, .section-dark .eyebrow::before,
.section-black .eyebrow::before, .hero .eyebrow::before {
  background: var(--blue);
  box-shadow: var(--glow-soft);
}

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head p { margin-top: 14px; color: var(--text-mut-dark); }
.section-dark .section-head p, .section-black .section-head p { color: var(--text-mut-light); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-blue { background: var(--blue); color: var(--black); }
.btn-blue:hover { background: var(--blue-core); }

/* The lit-channel button: only over black, where the bloom can actually read */
.on-dark .btn-blue, .hero .btn-blue, .section-dark .btn-blue, .section-black .btn-blue,
.site-header .btn-blue, .site-footer .btn-blue {
  box-shadow: var(--glow);
}
.on-dark .btn-blue:hover, .hero .btn-blue:hover, .section-dark .btn-blue:hover,
.section-black .btn-blue:hover, .site-header .btn-blue:hover, .site-footer .btn-blue:hover {
  box-shadow: 0 0 34px rgba(63, 216, 255, 0.6);
}
/* …but a card sitting on a dark section is still a white surface */
.hero-form-card .btn-blue, .form-card .btn-blue, .card .btn-blue,
.hero-form-card .btn-blue:hover, .form-card .btn-blue:hover, .card .btn-blue:hover { box-shadow: none; }

.btn-dark { background: var(--black); color: var(--blue); }
.btn-dark:hover { background: var(--ink-2); color: var(--blue-core); }

.btn-ghost { border-color: rgba(63, 216, 255, 0.4); color: var(--blue); }
.btn-ghost:hover { border-color: var(--blue); background: rgba(63, 216, 255, 0.08); box-shadow: var(--glow-soft); }

.btn-ghost-dark { border-color: rgba(5, 7, 10, 0.25); color: var(--black); }
.btn-ghost-dark:hover { border-color: var(--black); }

/* ---------- Header ---------- */

.topbar {
  background: var(--blue);
  color: var(--black);
  font-size: 0.88rem;
  font-weight: 600;
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .tb-note { display: flex; align-items: center; gap: 8px; }
.topbar svg { width: 14px; height: 14px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(5, 7, 10, 0.96);
  border-bottom: 1px solid var(--line-dark);
}
/* Blur only where the nav is inline: backdrop-filter turns the header into
   the containing block for fixed descendants, which would clip the mobile
   drawer to the header's height */
@media (min-width: 1021px) {
  .site-header { backdrop-filter: blur(8px); }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}
.logo img { height: 52px; width: auto; }

/* Seven top-level items have to fit inside a 1180px wrap alongside the logo
   and the CTA, so the top level runs tighter than the flyouts do. */
.nav { display: flex; align-items: center; gap: 2px; }
/* every level is a positioning context so nested flyouts anchor to their parent */
.nav li { list-style: none; position: relative; }
.nav a {
  display: block;
  padding: 10px 9px;
  white-space: nowrap;
  color: var(--text-light);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}
.nav a:hover, .nav a.active { color: var(--blue); }

.has-sub > a::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
}
.sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 8px;
  min-width: 230px;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  padding: 8px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  box-shadow: var(--shadow);
}
/* child combinator: hovering a nested item must not also open its siblings'
   panels, and must leave the parent panel open */
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.open > .sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Flyouts have room, so they keep the roomier spacing the top level gave up */
.sub a { padding: 10px 14px; font-size: 0.95rem; letter-spacing: 0.06em; }
.sub a:hover { background: rgba(63, 216, 255, 0.07); }

/* Second level flies out to the right, top-aligned with its parent row */
.sub .sub { top: -9px; left: calc(100% + 5px); }
.sub .has-sub > a::after { float: right; margin-top: 6px; transform: rotate(-45deg); }

.header-cta { display: flex; align-items: center; gap: 18px; }
.header-phone {
  display: flex;
  flex-direction: column;
  text-align: right;
  text-decoration: none;
  color: var(--text-light);
  line-height: 1.2;
}
.header-phone strong, .header-phone small { white-space: nowrap; }
.header-phone small {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-mut-light);
}
.header-phone strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--blue);
}
.header-cta .btn { padding: 12px 22px; font-size: 0.95rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--blue);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { left: 0; top: -7px; }
.nav-toggle span::after { left: 0; top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--black);
  color: var(--text-light);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(5, 7, 10, 0.93) 22%, rgba(5, 7, 10, 0.5) 65%, rgba(5, 7, 10, 0.78));
}
.hero .wrap { position: relative; z-index: 2; }
.hero-inner { padding: 110px 0 120px; max-width: 800px; }
.hero h1 em { font-style: normal; color: var(--blue); text-shadow: var(--text-glow); }
.hero .lead { margin: 22px 0 34px; max-width: 620px; color: var(--silver); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 38px;
  padding: 0;
  list-style: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-light);
}
.hero-points li { display: flex; align-items: center; gap: 9px; }
.hero-points svg { width: 17px; height: 17px; color: var(--blue); flex: none; filter: drop-shadow(0 0 8px rgba(63, 216, 255, 0.5)); }

/* Interior page hero */
.page-hero .hero-inner { padding: 84px 0 90px; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mut-light);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }

/* Hero with an above-the-fold quote form alongside the copy.
   The grid owns the vertical padding so both columns share one hero height. */
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero.has-form .hero-inner { padding: 0; max-width: none; }
.hero.has-form .hero-grid { padding: 58px 0 66px; }
.hero.has-form.page-hero .hero-grid { padding: 46px 0 54px; }
.hero.has-form .hero-points { margin-top: 30px; }

.hero-form-card {
  background: var(--white);
  color: var(--text-dark);
  border-radius: var(--radius);
  box-shadow: 0 28px 64px -20px rgba(5, 7, 10, 0.7);
  padding: 26px 26px 28px;
}
.hero-form-card h2 {
  font-size: clamp(1.6rem, 2.4vw, 1.95rem);
  line-height: 1.05;
}
.hero-form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 18px;
}
.hero-form-head p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue-deep);
}
/* scoped so it outranks .form-grid's gap, which is declared further down */
.hero-form-card .hero-form { gap: 13px; }
.hero-form .field label { font-size: 0.78rem; letter-spacing: 0.09em; margin-bottom: 5px; }
.hero-form .field input, .hero-form .field select { padding: 11px 14px; font-size: 0.97rem; }
.hero-form .btn { width: 100%; justify-content: center; }
.hero-form .form-note { margin-top: 10px; font-size: 0.8rem; text-align: center; }
.hero-form .form-note a { color: var(--blue-deep); font-weight: 600; }

/* ---------- Sections ---------- */

section { padding: 92px 0; }
.section-dark { background: var(--ink); color: var(--text-light); }
.section-black { background: var(--black); color: var(--text-light); }
.section-tight { padding: 64px 0; }

/* Stats band */
.stats-band { background: var(--black); color: var(--text-light); padding: 0; border-top: 1px solid var(--line-dark); }
.stats-band .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 38px;
  padding-bottom: 38px;
}
.stat { text-align: center; }
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  color: var(--blue);
  text-shadow: var(--text-glow);
  line-height: 1;
}
.stat span {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mut-light);
}

/* ---------- Cards ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Subheading that splits a card grid into groups (e.g. Canada / United States) */
.area-group {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: var(--blue-deep);
  margin-bottom: 22px;
}
.area-group::after { content: ""; flex: 1; height: 1px; background: rgba(5, 7, 10, 0.12); }
.section-dark .area-group, .section-black .area-group { color: var(--blue); }
.section-dark .area-group::after, .section-black .area-group::after { background: var(--line-dark); }
.area-group ~ .area-group { margin-top: 52px; }

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text-dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -18px rgba(5, 7, 10, 0.45); }
.card-img { aspect-ratio: 16 / 10; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card-img img { transform: scale(1.05); }
.card-body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-body p { color: var(--text-mut-dark); font-size: 0.98rem; flex: 1; }
.card-link {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  color: var(--blue-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card-link svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.card:hover .card-link svg { transform: translateX(4px); }

.section-dark .card, .section-black .card { background: var(--ink-2); color: var(--text-light); border: 1px solid var(--line-metal); }
.section-dark .card:hover, .section-black .card:hover { border-color: rgba(63, 216, 255, 0.45); box-shadow: 0 26px 60px -24px rgba(63, 216, 255, 0.35); }
.section-dark .card-body p, .section-black .card-body p { color: var(--text-mut-light); }
.section-dark .card-link, .section-black .card-link { color: var(--blue); }

.card .tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--blue);
  box-shadow: var(--glow-soft);
  color: var(--black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 999px;
  z-index: 2;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
.step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow);
  position: relative;
}
.section-dark .step, .section-black .step { background: var(--ink-2); border: 1px solid var(--line-dark); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--blue-bright);
  display: block;
  margin-bottom: 14px;
}
.section-dark .step::before, .section-black .step::before { color: var(--blue); text-shadow: var(--glow-soft); }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--text-mut-dark); font-size: 0.98rem; }
.section-dark .step p, .section-black .step p { color: var(--text-mut-light); }

/* Split (image + text) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split-img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.split-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.2; }
.split h2 { margin-bottom: 18px; }
.split .lead { color: var(--text-mut-dark); margin-bottom: 20px; }
.section-dark .split .lead, .section-black .split .lead { color: var(--text-mut-light); }
.split .btn { margin-top: 26px; }

/* Check list */
.checks { list-style: none; display: grid; gap: 13px; margin-top: 8px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  color: var(--blue-deep);
}
.section-dark .checks svg, .section-black .checks svg { color: var(--blue); filter: drop-shadow(0 0 7px rgba(63, 216, 255, 0.45)); }
.checks strong { display: block; }
.checks span { color: var(--text-mut-dark); font-size: 0.96rem; }
.section-dark .checks span, .section-black .checks span { color: var(--text-mut-light); }

/* Feature tiles (icon cards) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tile {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
}
.section-dark .tile, .section-black .tile { background: var(--ink-2); border: 1px solid var(--line-dark); }
.tile-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--black);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  /* silver bezel, lit from inside */
  box-shadow: inset 0 0 0 1px var(--line-metal), inset 0 0 18px rgba(63, 216, 255, 0.22);
}
.section-dark .tile-icon, .section-black .tile-icon { background: var(--blue); color: var(--black); box-shadow: var(--glow-soft); }
.tile-icon svg { width: 26px; height: 26px; }
.tile h3 { margin-bottom: 8px; }
.tile p { color: var(--text-mut-dark); font-size: 0.97rem; }
.section-dark .tile p, .section-black .tile p { color: var(--text-mut-light); }

/* ---------- Testimonials ---------- */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.quote {
  background: var(--ink-2);
  border: 1px solid var(--line-metal);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quote-stars { color: var(--blue); text-shadow: var(--glow-soft); letter-spacing: 3px; font-size: 1.05rem; }
.quote p { color: var(--text-light); font-size: 1.02rem; }
.quote footer {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-mut-light);
}
.quote footer strong { color: var(--blue); display: block; font-size: 1rem; }
.quote-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-author img { width: 44px; height: 44px; border-radius: 50%; flex: none; border: 2px solid var(--line-dark); }

/* ---------- FAQ ---------- */

.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq details {
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.section-dark .faq details, .section-black .faq details { background: var(--ink-2); border: 1px solid var(--line-dark); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--blue-deep);
  transition: transform 0.2s ease;
}
.section-dark .faq summary::after, .section-black .faq summary::after { color: var(--blue); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--text-mut-dark); }
.section-dark .faq details p, .section-black .faq details p { color: var(--text-mut-light); }

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--blue);
  color: var(--black);
  padding: 84px 0;
  /* lit edges, as if the band itself is the LED channel */
  box-shadow: inset 0 2px 0 var(--blue-core), inset 0 -2px 0 var(--blue-core);
}
.cta-band .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cta-band h2 { max-width: 640px; }
.cta-band p { margin-top: 10px; max-width: 560px; font-weight: 500; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Location extras ---------- */

.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin-top: 10px;
}
.area-list li {
  background: var(--white);
  border: 1px solid rgba(5, 7, 10, 0.1);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 0.93rem;
}
.section-dark .area-list li, .section-black .area-list li {
  background: var(--ink-2);
  border-color: var(--line-dark);
  color: var(--text-light);
}

/* ---------- Forms ---------- */

.form-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  margin-bottom: 7px;
  color: var(--text-mut-dark);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(5, 7, 10, 0.16);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--paper);
  color: var(--text-dark);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue-deep);
  box-shadow: 0 0 0 3px rgba(0, 183, 240, 0.35);
}
.form-note { font-size: 0.88rem; color: var(--text-mut-dark); margin-top: 14px; }

/* Google address suggestions — our own list, so it inherits the form's styling */
.field-autocomplete { position: relative; }
.ac-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  list-style: none;
  background: var(--white);
  border: 1.5px solid rgba(5, 7, 10, 0.16);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px -14px rgba(5, 7, 10, 0.45);
}
.ac-item {
  padding: 9px 14px;
  cursor: pointer;
  line-height: 1.35;
  border-bottom: 1px solid rgba(5, 7, 10, 0.07);
}
.ac-item:last-child { border-bottom: 0; }
.ac-item strong {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
}
.ac-item span {
  display: block;
  font-size: 0.82rem;
  color: var(--text-mut-dark);
}
.ac-item:hover, .ac-item.is-active { background: rgba(0, 183, 240, 0.12); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--black);
  color: var(--text-mut-light);
  padding: 76px 0 0;
  border-top: 1px solid var(--line-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 56px;
}
.footer-grid h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: 18px;
}
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { color: var(--text-mut-light); text-decoration: none; font-size: 0.96rem; }
.footer-grid a:hover { color: var(--blue); }
.footer-about img { height: 46px; width: auto; margin-bottom: 18px; }
.footer-about p { font-size: 0.95rem; max-width: 320px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.96rem; }
.footer-contact svg { width: 16px; height: 16px; color: var(--blue); filter: drop-shadow(0 0 7px rgba(63, 216, 255, 0.45)); flex: none; margin-top: 4px; }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding: 22px 0;
  font-size: 0.85rem;
}
.footer-bottom .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

/* ---------- Spec cards ---------- */

/* Product pages: a photo, a model number and a spec list. The list is a <dl>
   so the label/value pairing survives with CSS off and reads correctly to a
   screen reader. */
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.spec-grid.one-up { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
.spec-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.section-dark .spec-card, .section-black .spec-card {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  box-shadow: none;
}
.spec-img {
  aspect-ratio: 16 / 10;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.spec-img img { width: 100%; height: 100%; object-fit: cover; }
/* Hardware shots are cut out on white or black; letterbox rather than crop
   so the fixture stays whole. */
.spec-img.contain { background: var(--paper); }
.section-dark .spec-img.contain, .section-black .spec-img.contain { background: var(--black); }
.spec-img.contain img { object-fit: contain; padding: 18px; }
.spec-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.spec-model {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blue-deep);
}
.section-dark .spec-model, .section-black .spec-model { color: var(--blue); }
.spec-body > p { color: var(--text-mut-dark); font-size: 0.97rem; }
.section-dark .spec-body > p, .section-black .spec-body > p { color: var(--text-mut-light); }
.spec-list { display: grid; grid-template-columns: auto 1fr; gap: 0; margin-top: 4px; font-size: 0.93rem; }
.spec-list dt {
  padding: 8px 16px 8px 0;
  color: var(--text-mut-dark);
  border-top: 1px solid rgba(5, 7, 10, 0.1);
  white-space: nowrap;
}
.spec-list dd {
  padding: 8px 0;
  font-weight: 600;
  border-top: 1px solid rgba(5, 7, 10, 0.1);
  text-align: right;
}
.section-dark .spec-list dt, .section-black .spec-list dt { color: var(--text-mut-light); border-top-color: var(--line-dark); }
.section-dark .spec-list dd, .section-black .spec-list dd { border-top-color: var(--line-dark); color: var(--text-light); }
.spec-list dt:first-of-type, .spec-list dd:first-of-type { border-top: 0; }

/* ---------- Video grid ---------- */

.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.video-grid.three { grid-template-columns: repeat(3, 1fr); }
.video-item { display: flex; flex-direction: column; gap: 14px; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--black);
  border: 1px solid var(--line-dark);
}
/* The site-work videos were shot vertically. Given the full column width a
   9:16 frame becomes absurdly tall, so it is capped and centred instead. */
.video-frame.portrait { aspect-ratio: 9 / 16; max-width: 300px; margin: 0 auto; width: 100%; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-item h3 { font-size: 1.25rem; }
.video-len {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-deep);
  vertical-align: middle;
  margin-left: 8px;
}
.section-dark .video-len, .section-black .video-len { color: var(--blue); }
.video-item p { color: var(--text-mut-dark); font-size: 0.96rem; }
.section-dark .video-item p, .section-black .video-item p { color: var(--text-mut-light); }

/* ---------- Gallery ---------- */

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gal-item {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--black);
  border: 1px solid var(--line-metal);
}
.gal-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gal-item:hover img:not(.gal-badge) { transform: scale(1.04); }
/* Attribution is a licence condition on this photography, so it is baked into
   the figure rather than left to a caption someone might drop. The selector
   has to outrank `.gal-item img` above, which otherwise sizes it like a photo. */
.gal-item img.gal-badge {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: auto;
  height: 22px;
  aspect-ratio: auto;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.9));
  pointer-events: none;
  transition: none;
  z-index: 2;
}
.gal-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(5, 7, 10, 0.85), transparent);
  color: var(--text-light);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Dealer credit strip ---------- */

.dealer-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 34px;
  padding: 18px 24px;
  border: 1px solid var(--line-metal);
  border-radius: var(--radius);
  background: rgba(5, 7, 10, 0.04);
  font-size: 0.88rem;
  color: var(--text-mut-dark);
  text-align: center;
}
.section-dark .dealer-strip, .section-black .dealer-strip {
  background: rgba(63, 216, 255, 0.04);
  border-color: var(--line-dark);
  color: var(--text-mut-light);
}
/* The IllumiDEL mark is drawn for dark backgrounds, so it always sits on a
   dark plate — that way one rule covers light and dark sections alike. */
.dealer-strip img {
  height: 42px;
  width: auto;
  flex: none;
  background: var(--black);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

/* ---------- The sign ---------- */

/* The logo is a lit sign, so it behaves like one: it strikes when the page
   loads, then breathes. Both keyframes drive the same pair of shadows — a
   tight core and a wide bloom — so the change reads as light level rather
   than as a shadow moving around. The logo artwork is flat, so all of the
   glow lives here.

   Nothing here pulses faster than ~1.5Hz, and the whole thing is dropped
   under prefers-reduced-motion. */
@keyframes led-strike {
  0%   { opacity: 0.16; filter: none; }
  9%   { opacity: 1; filter: drop-shadow(0 0 6px rgba(185, 251, 255, 0.9)) drop-shadow(0 0 22px rgba(63, 216, 255, 0.55)); }
  15%  { opacity: 0.3; filter: none; }
  25%  { opacity: 1; filter: drop-shadow(0 0 7px rgba(185, 251, 255, 0.95)) drop-shadow(0 0 26px rgba(63, 216, 255, 0.6)); }
  31%  { opacity: 0.5; filter: none; }
  44%, 100% { opacity: 1; filter: drop-shadow(0 0 5px rgba(63, 216, 255, 0.6)) drop-shadow(0 0 18px rgba(63, 216, 255, 0.35)); }
}
@keyframes led-breathe {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(63, 216, 255, 0.6)) drop-shadow(0 0 18px rgba(63, 216, 255, 0.35)); }
  50%      { filter: drop-shadow(0 0 9px rgba(185, 251, 255, 0.85)) drop-shadow(0 0 34px rgba(63, 216, 255, 0.62)); }
}
.logo img, .footer-about img {
  filter: drop-shadow(0 0 5px rgba(63, 216, 255, 0.6)) drop-shadow(0 0 18px rgba(63, 216, 255, 0.35));
  animation: led-strike 1.5s ease-out both, led-breathe 3.6s ease-in-out 1.5s infinite;
}
/* Footer sign is further from the eye and lags a beat behind the header's */
.footer-about img { animation-delay: 0.25s, 1.75s; }

@media (prefers-reduced-motion: reduce) {
  .logo img, .footer-about img { animation: none; }
}

/* ---------- Reveal animation ---------- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

/* The full header (logo + nav + phone + button) needs ~1180px; drop the
   phone first, then switch to the drawer below 1021px */
/* The header phone duplicates the one in the topbar, so it is the first thing
   to go when seven nav items and the CTA start competing for the row. */
@media (max-width: 1340px) {
  .header-phone { display: none; }
}

/* A long flyout (Durham & GTA) splits into two columns on desktop, filling
   down the first column before the second. It is too wide to fly out to the
   right of Service Areas, so it opens to the left. The drawer keeps one column. */
@media (min-width: 1021px) {
  .sub .sub.sub-2col { columns: 2; column-gap: 4px; min-width: 420px; left: auto; right: calc(100% + 5px); }
  .sub .sub.sub-2col > li { break-inside: avoid; }
}

/* Side-by-side hero + form only where there's room for both */
@media (min-width: 1021px) {
  .hero.has-form .hero-grid {
    grid-template-columns: minmax(0, 1fr) 396px;
    gap: 56px;
  }
  .hero.has-form .lead { max-width: 560px; }
}

@media (max-width: 1020px) {
  .grid-3, .grid-4, .steps, .tiles, .quotes { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero.has-form .hero-grid { padding: 54px 0 62px; }
  .hero.has-form.page-hero .hero-grid { padding: 44px 0 52px; }
  .hero-form-card { max-width: 520px; }

  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--ink);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 96px 20px 30px;
    transform: translateX(100%);
    /* visibility keeps the closed drawer out of the tab order and off iOS's
       horizontal overscroll */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
    z-index: 80;
    overflow-y: auto;
    border-left: 1px solid var(--line-dark);
  }
  .nav-open .nav { transform: translateX(0); visibility: visible; }
  .nav a { padding: 13px 14px; font-size: 1.15rem; }
  .sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 6px 16px;
    display: none;
  }
  .has-sub.open > .sub { display: block; }
  .has-sub > a::after { float: right; margin-top: 9px; }
  /* nested panels stack in the drawer rather than flying out */
  .sub .sub { top: auto; left: auto; }
  .sub .has-sub > a::after { margin-top: 7px; transform: rotate(45deg); }
  .sub .has-sub > a { font-size: 1.02rem; color: var(--blue); }
  .nav-toggle { z-index: 85; }

  /* Scrim behind the open drawer; lock background scroll while open */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(5, 7, 10, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    z-index: 75;
  }
  body.nav-open::after { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 860px) {
  section { padding: 68px 0; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split-img { order: -1; }
  .stats-band .wrap { grid-template-columns: repeat(2, 1fr); gap: 30px 12px; }
  .hero-inner { padding: 80px 0 88px; }
  .page-hero .hero-inner { padding: 64px 0 70px; }
}

/* Small phones: header keeps just logo + hamburger */
@media (max-width: 700px) {
  .header-cta .btn { display: none; }
}

@media (max-width: 1020px) {
  /* Five footer columns stop fitting well before the nav does. */
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .video-grid, .video-grid.three { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .grid-3, .grid-4, .grid-2, .steps, .tiles, .quotes { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .hero-form { grid-template-columns: 1fr; }
  .hero-form-card { padding: 22px 20px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  .topbar .tb-hours { display: none; }
  .cta-band { padding: 64px 0; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}