/* Self-hosted so Google Fonts CSS never blocks first paint. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/barlow-condensed-800.woff2') format('woff2'); }

/* Fallbacks sized to Barlow so the web font swap doesn't re-wrap headings (CLS). */
@font-face { font-family: 'Barlow Condensed Fallback'; src: local('Arial'), local('Roboto'), local('Liberation Sans'); size-adjust: 74%; }
@font-face { font-family: 'Barlow Fallback'; src: local('Arial'), local('Roboto'), local('Liberation Sans'); size-adjust: 97%; }

/* Option A: Midnight.
   A dark site that matches the logo's black background: near-black surfaces,
   electric brand blue, condensed uppercase headings, hairlines instead of shadows.
   Visual layer only. Every heading, link and section comes from the shared templates. */

html[data-theme="midnight"] {
  --primary: 31 111 184;          /* #1f6fb8 deep brand blue (white text passes AA) */
  --primary-light: 95 180 245;    /* #5fb4f5 */
  --primary-dark: 22 84 142;
  --secondary: 59 155 234;        /* #3b9bea electric blue (dark text on it) */
  --secondary-light: 95 180 245;
  --secondary-dark: 31 111 184;
  --accent: 95 180 245;

  --bg-white: 14 18 24;           /* #0e1218 raised panels */
  --bg-black: 0 0 0;
  --bg-50: 7 9 12;                /* #07090c page */
  --bg-100: 21 27 35;             /* #151b23 */
  --bg-800: 21 27 35;
  --bg-900: 5 6 8;                /* #050608 header/footer */

  --tx-white: 255 255 255;
  --tx-black: 4 18 31;            /* #04121f ink on blue buttons */
  --tx-300: 196 207 220;
  --tx-400: 150 164 182;
  --tx-500: 150 164 182;
  --tx-600: 168 181 197;
  --tx-700: 208 217 228;
  --tx-800: 226 232 240;
  --tx-900: 244 247 250;

  --line: 36 44 56;
  --line-strong: 54 65 80;

  --font-body: 'Barlow';
  --font-heading: 'Barlow Condensed';

  --radius-lg: 3px;
  --radius-xl: 4px;
  --shadow-sm: 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-md: 0 0 0 1px rgb(255 255 255 / 0.08);
  --shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.08);
  --shadow-xl: 0 0 0 1px rgb(95 180 245 / 0.45), 0 0 28px -6px rgb(59 155 234 / 0.45);

  --mn-grad: linear-gradient(135deg, #5fb4f5 0%, #3b9bea 45%, #1f6fb8 100%);
  --mn-glow: 0 0 0 1px rgb(95 180 245 / 0.55), 0 8px 30px -8px rgb(59 155 234 / 0.7);
  --mn-hair: rgb(255 255 255 / 0.09);
  --mn-blue-hair: rgb(95 180 245 / 0.35);

  background: #07090c;
  color-scheme: dark;
}

html[data-theme="midnight"] body {
  background: #07090c;
  font-size: 1.0625rem;
}

/* Default border colour for bare `border` utilities (keeps utility colours winning). */
:where(html[data-theme="midnight"]) *,
:where(html[data-theme="midnight"]) ::before,
:where(html[data-theme="midnight"]) ::after {
  border-color: var(--mn-hair);
}

html[data-theme="midnight"] ::selection { background: #3b9bea; color: #04121f; }

/* ---------- Type ---------- */
html[data-theme="midnight"] h1,
html[data-theme="midnight"] h2,
html[data-theme="midnight"] h3,
html[data-theme="midnight"] h4 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  font-weight: 700;
}
html[data-theme="midnight"] h1 { font-weight: 800; letter-spacing: 0; }
html[data-theme="midnight"] .text-3xl { font-size: 2.25rem; line-height: 1; }
@media (min-width: 768px) {
  html[data-theme="midnight"] .md\:text-4xl { font-size: 3rem; line-height: 1; }
  html[data-theme="midnight"] .md\:text-5xl { font-size: 3.75rem; line-height: 0.98; }
}
@media (min-width: 1024px) {
  html[data-theme="midnight"] .lg\:text-6xl { font-size: 5rem; line-height: 0.94; }
  html[data-theme="midnight"] .lg\:text-5xl { font-size: 4rem; line-height: 0.96; }
}
html[data-theme="midnight"] .tracking-wide { letter-spacing: 0.16em; }

/* Accent text: brighter blue so it reads on near-black. */
html[data-theme="midnight"] .text-primary,
html[data-theme="midnight"] .hover\:text-primary:hover,
html[data-theme="midnight"] .text-secondary,
html[data-theme="midnight"] .text-yellow-500,
html[data-theme="midnight"] .text-yellow-600 { color: #5fb4f5; }
html[data-theme="midnight"] .hover\:text-primary-dark:hover,
html[data-theme="midnight"] .hover\:text-yellow-700:hover,
html[data-theme="midnight"] .hover\:text-secondary-light:hover { color: #9fd3fb; }
html[data-theme="midnight"] .text-green-500 { color: #5fb4f5; }
html[data-theme="midnight"] .bg-green-100 { background: rgb(59 155 234 / 0.14); }
html[data-theme="midnight"] .text-red-500 { color: #ff8a8a; }

/* ---------- Buttons ---------- */
html[data-theme="midnight"] .bg-secondary,
html[data-theme="midnight"] .btn-cta,
html[data-theme="midnight"] .bg-yellow-500 {
  background-image: var(--mn-grad);
  color: #04121f;
}
html[data-theme="midnight"] a.bg-secondary,
html[data-theme="midnight"] button.bg-secondary,
html[data-theme="midnight"] .btn-cta {
  box-shadow: var(--mn-glow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', system-ui, sans-serif;
  font-weight: 700;
  border-radius: 2px;
  transition: filter .2s, box-shadow .2s, transform .2s;
}
html[data-theme="midnight"] a.bg-secondary:hover,
html[data-theme="midnight"] button.bg-secondary:hover,
html[data-theme="midnight"] .btn-cta:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 0 1px rgb(159 211 251 / 0.8), 0 10px 36px -6px rgb(59 155 234 / 0.9);
}
html[data-theme="midnight"] .btn-cta { color: #04121f; font-size: 1.05rem; }
html[data-theme="midnight"] a.bg-primary {
  background: transparent;
  color: #fff;
  border: 1px solid var(--mn-blue-hair);
  border-radius: 2px;
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', system-ui, sans-serif;
}
html[data-theme="midnight"] a.bg-primary:hover { background: rgb(59 155 234 / 0.14); border-color: #5fb4f5; }
html[data-theme="midnight"] .rounded-full { border-radius: 9999px; }

/* ---------- Header ---------- */
html[data-theme="midnight"] .site-header {
  background: rgb(5 6 8 / 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
  border-bottom: 1px solid var(--mn-hair);
}
html[data-theme="midnight"] .site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(59 155 234 / 0.7), transparent);
  pointer-events: none;
}
html[data-theme="midnight"] .topbar {
  background: #000;
  border-bottom: 1px solid var(--mn-hair);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
html[data-theme="midnight"] .nav-link {
  color: #c4cfdc;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', system-ui, sans-serif;
}
html[data-theme="midnight"] .nav-link:hover { color: #5fb4f5; }
html[data-theme="midnight"] .site-header .relative.group .bg-white {
  background: #0e1218;
  border-color: var(--mn-hair);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.8);
}
html[data-theme="midnight"] .site-header .hover\:bg-primary\/5:hover { background: rgb(59 155 234 / 0.12); }
html[data-theme="midnight"] .site-header .text-gray-700 { color: #d0d9e4; }
html[data-theme="midnight"] .header-logo { height: 3.25rem; }
@media (min-width: 768px) { html[data-theme="midnight"] .header-logo { height: 4rem; } }
html[data-theme="midnight"] #mobile-menu { border-color: var(--mn-hair); }

/* ---------- Heroes ---------- */
html[data-theme="midnight"] .hero,
html[data-theme="midnight"] .hero.has-photo {
  background:
    linear-gradient(100deg, rgb(5 6 8 / 0.95) 0%, rgb(5 6 8 / 0.78) 40%, rgb(5 6 8 / 0.35) 100%),
    var(--hero-image) center / cover no-repeat,
    #050608;
  border-bottom: 1px solid var(--mn-hair);
  overflow: hidden;
}
html[data-theme="midnight"] .hero > .absolute.inset-0 { background: transparent; }
html[data-theme="midnight"] .hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--mn-grad);
}
html[data-theme="midnight"] .hero h1 { text-shadow: 0 2px 30px rgb(0 0 0 / 0.6); }
html[data-theme="midnight"] .hero h1 .text-secondary {
  background: var(--mn-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="midnight"] .hero .text-gray-300,
html[data-theme="midnight"] .hero .text-gray-400 { color: #c4cfdc; }
html[data-theme="midnight"] .hero-home { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 768px) { html[data-theme="midnight"] .hero-home { padding-top: 8.5rem; padding-bottom: 8.5rem; } }
html[data-theme="midnight"] .hero .bg-white\/10 {
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', system-ui, sans-serif;
}
html[data-theme="midnight"] .hero .bg-white\/10:hover { border-color: #5fb4f5; background: rgb(59 155 234 / 0.12); }

/* ---------- Bands ---------- */
html[data-theme="midnight"] .band { position: relative; border-top: 1px solid var(--mn-hair); }
html[data-theme="midnight"] .band-light { background: #0b0e13; }
html[data-theme="midnight"] .band-alt,
html[data-theme="midnight"] .band-plain { background: #07090c; }
html[data-theme="midnight"] .band-alt {
  background-image: radial-gradient(ellipse 60% 50% at 100% 0%, rgb(31 111 184 / 0.12), transparent 70%);
}
html[data-theme="midnight"] .band .text-center > h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 18px auto 0;
  background: var(--mn-grad);
}
html[data-theme="midnight"] .band h2.text-sm {
  color: #5fb4f5;
  font-family: 'Barlow', 'Barlow Fallback', system-ui, sans-serif;
  letter-spacing: 0.2em;
}

/* ---------- Cards ---------- */
html[data-theme="midnight"] .svc-card,
html[data-theme="midnight"] .review-card,
html[data-theme="midnight"] .faq-item,
html[data-theme="midnight"] .card,
html[data-theme="midnight"] .service-card {
  background: #0e1218;
  border: 1px solid var(--mn-hair);
  box-shadow: none;
  border-radius: 3px;
}
html[data-theme="midnight"] .svc-card { transition: border-color .25s, transform .25s, box-shadow .25s; }
html[data-theme="midnight"] .svc-card:hover {
  border-color: #3b9bea;
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgb(59 155 234 / 0.4), 0 20px 40px -20px rgb(59 155 234 / 0.5);
}
html[data-theme="midnight"] .svc-card img { filter: saturate(0.9) contrast(1.05); }
html[data-theme="midnight"] .svc-card h3 { font-size: 1.6rem; }
html[data-theme="midnight"] .svc-card .text-primary,
html[data-theme="midnight"] .svc-card span.text-primary {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
}
html[data-theme="midnight"] .review-card { border-left: 2px solid #3b9bea; }
html[data-theme="midnight"] .review-card .bg-secondary,
html[data-theme="midnight"] .bg-yellow-500.rounded-full {
  box-shadow: none;
  color: #04121f;
}
html[data-theme="midnight"] .faq-item .faq-question:hover { background: #151b23; }
html[data-theme="midnight"] .faq-item .faq-question {
  font-family: 'Barlow', 'Barlow Fallback', system-ui, sans-serif;
  letter-spacing: 0.01em;
}

/* Rating / guarantee panel and other bg-gray-900 panels inside content. */
html[data-theme="midnight"] main .bg-gray-900 {
  background: linear-gradient(160deg, #0f1a27 0%, #050608 100%);
  border: 1px solid var(--mn-blue-hair);
  box-shadow: 0 0 40px -14px rgb(59 155 234 / 0.5);
}
html[data-theme="midnight"] .bg-gray-100 { background: #0e1218; border: 1px solid var(--mn-hair); }
html[data-theme="midnight"] .bg-secondary\/10 {
  background: rgb(59 155 234 / 0.12);
  border: 1px solid var(--mn-blue-hair);
}

/* Stats */
html[data-theme="midnight"] p.text-4xl.text-secondary,
html[data-theme="midnight"] p.font-bold.text-secondary {
  font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', system-ui, sans-serif;
  font-weight: 800;
}

/* ---------- Area chips ---------- */
html[data-theme="midnight"] .area-chip {
  background: transparent;
  border: 1px solid var(--mn-blue-hair);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  transition: background .2s, border-color .2s;
}
html[data-theme="midnight"] .area-chip span {
  color: #d0d9e4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
}
html[data-theme="midnight"] .area-chip:hover { background: rgb(59 155 234 / 0.12); border-color: #5fb4f5; }
html[data-theme="midnight"] .area-chip:hover span { color: #fff; }

/* ---------- Quote form ---------- */
html[data-theme="midnight"] .quote-card {
  position: relative;
  background: rgb(10 13 18 / 0.94);
  border: 1px solid var(--mn-blue-hair);
  border-radius: 3px;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.9), 0 0 50px -20px rgb(59 155 234 / 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html[data-theme="midnight"] .quote-card::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 3px;
  background: var(--mn-grad);
}
html[data-theme="midnight"] input,
html[data-theme="midnight"] select,
html[data-theme="midnight"] textarea {
  background: #07090c;
  color: #eef3f8;
  border-color: #364150;
  border-radius: 2px;
}
html[data-theme="midnight"] input::placeholder,
html[data-theme="midnight"] textarea::placeholder { color: #7d8b9c; }
html[data-theme="midnight"] input:focus,
html[data-theme="midnight"] select:focus,
html[data-theme="midnight"] textarea:focus {
  border-color: #5fb4f5;
  --tw-ring-color: rgb(59 155 234 / 0.5);
  outline: none;
}
html[data-theme="midnight"] select option { background: #0e1218; color: #eef3f8; }
html[data-theme="midnight"] label { letter-spacing: 0.04em; }

/* ---------- Long-form content ---------- */
html[data-theme="midnight"] .prose {
  --tw-prose-body: #c4cfdc;
  --tw-prose-headings: #f4f7fa;
  --tw-prose-lead: #c4cfdc;
  --tw-prose-links: #5fb4f5;
  --tw-prose-bold: #ffffff;
  --tw-prose-counters: #5fb4f5;
  --tw-prose-bullets: #3b9bea;
  --tw-prose-hr: #242c38;
  --tw-prose-quotes: #e2e8f0;
  --tw-prose-quote-borders: #3b9bea;
  --tw-prose-captions: #96a4b6;
  --tw-prose-code: #e2e8f0;
  --tw-prose-th-borders: #364150;
  --tw-prose-td-borders: #242c38;
}

/* ---------- CTA band ---------- */
html[data-theme="midnight"] .cta-band {
  position: relative;
  background:
    radial-gradient(ellipse 70% 120% at 50% 120%, rgb(59 155 234 / 0.35), transparent 70%),
    linear-gradient(180deg, #050608 0%, #0a1420 100%);
  border-top: 1px solid var(--mn-blue-hair);
  padding-top: 5rem;
  padding-bottom: 5rem;
}
html[data-theme="midnight"] .cta-band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--mn-grad);
}
html[data-theme="midnight"] .cta-band h2.text-black { color: #fff; }
html[data-theme="midnight"] .cta-band .text-gray-800 { color: #c4cfdc; }
html[data-theme="midnight"] .cta-band a.bg-black {
  background-image: var(--mn-grad);
  color: #04121f;
  box-shadow: var(--mn-glow);
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', system-ui, sans-serif;
}
html[data-theme="midnight"] .cta-band a.bg-white {
  background: transparent;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 2px;
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', system-ui, sans-serif;
}
html[data-theme="midnight"] .cta-band a.bg-white:hover { border-color: #5fb4f5; background: rgb(59 155 234 / 0.12); }

/* ---------- Footer ---------- */
html[data-theme="midnight"] .site-footer {
  position: relative;
  background: #030405;
  border-top: 1px solid var(--mn-hair);
}
html[data-theme="midnight"] .site-footer h3 {
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  color: #fff;
}
html[data-theme="midnight"] .site-footer h3::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 10px;
  background: var(--mn-grad);
}
html[data-theme="midnight"] .site-footer .text-gray-400 { color: #a8b5c5; }
html[data-theme="midnight"] .site-footer a.text-gray-400:hover { color: #5fb4f5; }
html[data-theme="midnight"] .footer-logo { height: 4.5rem; }
html[data-theme="midnight"] .site-footer .border-gray-800,
html[data-theme="midnight"] .site-footer .border-t { border-color: var(--mn-hair); }

/* ---------- Mobile bottom bar ---------- */
html[data-theme="midnight"] .mobile-cta {
  background: rgb(3 4 5 / 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--mn-blue-hair);
  box-shadow: 0 -10px 30px -10px rgb(0 0 0 / 0.8);
}
html[data-theme="midnight"] .mobile-cta a {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Barlow Condensed', 'Barlow Condensed Fallback', system-ui, sans-serif;
  font-size: 1.05rem;
}
html[data-theme="midnight"] .mobile-cta .bg-green-600 {
  background-image: var(--mn-grad);
  color: #04121f;
  box-shadow: var(--mn-glow);
}
html[data-theme="midnight"] .mobile-cta a.bg-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.3);
  box-shadow: none;
}

/* Info panels that use the accent colour as a fill (e.g. contact page "Service Areas"). */
html[data-theme="midnight"] div.bg-secondary:not(.rounded-full) {
  background: linear-gradient(160deg, rgb(31 111 184 / 0.22), rgb(14 18 24 / 0.9));
  border: 1px solid var(--mn-blue-hair);
  color: #fff;
  box-shadow: none;
}
html[data-theme="midnight"] div.bg-secondary:not(.rounded-full) a { color: #9fd3fb; }

/* Bigger header logo: the mark is nearly square, so the wordmark was unreadable at 4rem. */
@media (min-width: 768px) { html[data-theme="midnight"] .header-logo { height: 5.25rem; } }