/* ============================================================
   ARCHON COATINGS COMPANY
   Brand: Navy · Silver/Chrome · Orange
   Vibe: Tesla-style full-viewport sections + scroll experience
   ============================================================ */

:root {
  /* Palette — pulled from the Archon logo */
  --navy-900: #0a1c44;
  --navy-800: #0f2557;
  --navy-700: #14397a;
  --navy-600: #1d4f9e;
  --navy-500: #2c66c2;
  --navy-50:  #eef3fa;

  --orange-600: #d96a16;
  --orange-500: #ec7a1e;
  --orange-400: #f59038;

  --silver-50:  #f4f6fa;
  --silver-100: #e5e9f0;
  --silver-200: #cdd2dc;
  --silver-300: #aab1bd;
  --silver-400: #7c8390;

  --ink-900: #0b1322;
  --ink-700: #2a334a;
  --ink-500: #4a5366;
  --ink-300: #8a93a3;

  --bg: #ffffff;
  --bg-soft: #f7f9fc;
  --bg-deep: #0a1c44;

  --line: rgba(15, 37, 87, 0.12);
  --line-strong: rgba(15, 37, 87, 0.24);
  --shadow: 0 30px 60px -20px rgba(10, 28, 68, 0.30);

  --maxw: 1280px;
  --radius: 4px;
  --radius-lg: 14px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Header height */
  --nav-h: 72px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--navy-700); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--orange-500); }

/* -------- Type scale (Tesla-feel: bold & tight) -------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
  color: var(--ink-900);
  line-height: 1.1;
}
h1 { font-size: clamp(2.5rem, 6vw, 5.25rem); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 600; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 600; }
h4 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-500);
  margin-bottom: 0.6em;
}

p {
  margin: 0 0 1em;
  color: var(--ink-500);
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.65;
}
small { color: var(--ink-300); }

/* -------- Layout -------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}
section { position: relative; }
.section-pad { padding: clamp(80px, 10vw, 140px) 0; }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-500);
  margin-bottom: 1.2rem;
}
.lede {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 60ch;
  font-weight: 400;
}

.grid { display: grid; gap: 32px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* -------- Buttons (Tesla-style pills) -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 14px 32px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 220px;
  white-space: nowrap;
}
.btn-primary {
  background: var(--navy-700);
  color: #fff;
  border-color: var(--navy-700);
}
.btn-primary:hover {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
  transform: translateY(-1px);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.85);
  color: var(--navy-900);
  border-color: transparent;
  backdrop-filter: blur(4px);
}
.btn-ghost:hover {
  background: #fff;
  color: var(--navy-900);
}
.btn-orange {
  background: var(--orange-500);
  color: #fff;
  border-color: var(--orange-500);
}
.btn-orange:hover {
  background: var(--orange-600);
  border-color: var(--orange-600);
  color: #fff;
}
.btn-outline {
  background: transparent;
  color: var(--navy-700);
  border-color: var(--navy-700);
}
.btn-outline:hover {
  background: var(--navy-700);
  color: #fff;
}
.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.8);
}
.btn-outline-white:hover {
  background: #fff;
  color: var(--navy-900);
}

@media (max-width: 540px) {
  .btn { min-width: 0; width: 100%; padding: 14px 22px; }
}

/* -------- Header / Nav (transparent → solid on scroll) -------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-dark {
  /* When hero is dark, keep header text white */
}
.site-header .nav {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px 0 12px;   /* push logo closer to the left edge */
  gap: 24px;
  max-width: none;          /* override container max-width so logo sits flush-left */
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-900);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-header.is-dark:not(.is-solid) .brand,
.site-header.is-dark:not(.is-solid) .nav-links a,
.site-header.is-dark:not(.is-solid) .nav-cta .phone { color: #fff; }
.site-header.is-dark:not(.is-solid) .nav-toggle { color: #fff; border-color: rgba(255,255,255,0.45); }
.brand .logo-svg { width: 36px; height: 36px; flex: 0 0 36px; }
.brand .name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.brand .name .accent { color: var(--orange-500); }

.nav-links {
  display: flex; gap: 28px; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-700);
  padding: 8px 4px;
  position: relative;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--navy-700);
}
.site-header.is-dark:not(.is-solid) .nav-links a:hover,
.site-header.is-dark:not(.is-solid) .nav-links a.active { color: #fff; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--orange-500); border-radius: 2px;
}

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .phone {
  font-weight: 600; font-size: 0.95rem; color: var(--ink-900);
}
.nav-cta .phone:hover { color: var(--orange-500); }
.nav-cta .btn { min-width: 0; padding: 10px 22px; font-size: 0.78rem; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-900);
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1380px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 0.78rem; }
}
@media (max-width: 1320px) {
  /* Below this width, 9 links + logo + CTA can't fit safely.
     Switch to mobile menu so nothing overlaps. */
  .nav-links, .nav-cta .phone, .nav-cta .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile.open .nav-links {
    display: flex; flex-direction: column;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: #fff; padding: 24px 32px; gap: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-mobile.open .nav-links li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-mobile.open .nav-links li:last-child { border-bottom: 0; }
  .nav-mobile.open .nav-links a { color: var(--ink-900); display: block; }
}

/* -------- Social icons in nav -------- */
.nav-social-li { display: none; }

/* Desktop (>= 1321px): show inline at right end of nav-links */
@media (min-width: 1321px) {
  .nav-links .nav-social-li {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 4px;
    order: 99;
    margin-left: 12px;
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }
  .nav-links .nav-social-li a {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ink-700);
    padding: 0;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .nav-links .nav-social-li a::after { display: none !important; }
  .nav-links .nav-social-li a:hover {
    background: var(--orange-500);
    color: #fff;
    transform: translateY(-1px);
  }
  .nav-links .nav-social-li svg { width: 15px; height: 15px; display: block; }
  .site-header.is-dark:not(.is-solid) .nav-links .nav-social-li {
    border-left-color: rgba(255,255,255,0.22);
  }
  .site-header.is-dark:not(.is-solid) .nav-links .nav-social-li a {
    color: rgba(255,255,255,0.88);
  }
  .site-header.is-dark:not(.is-solid) .nav-links .nav-social-li a:hover {
    color: #fff;
    background: var(--orange-500);
  }
}

/* Mobile (<= 1320px): show inside drawer at top */
@media (max-width: 1320px) {
  .nav-mobile.open .nav-links .nav-social-li {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    padding: 4px 0 18px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
    justify-content: flex-start;
  }
  .nav-mobile.open .nav-links .nav-social-li a {
    width: 42px; height: 42px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--silver-50);
    border: 1px solid var(--line);
    color: var(--ink-900);
    padding: 0;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  }
  .nav-mobile.open .nav-links .nav-social-li a:hover {
    background: var(--orange-500);
    color: #fff;
    border-color: var(--orange-500);
    transform: translateY(-2px);
  }
  .nav-mobile.open .nav-links .nav-social-li svg { display: block; }
}

/* -------- Hero (full-viewport, Tesla-style) -------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + 24px) 0 80px;
  overflow: hidden;
  background: linear-gradient(180deg, #0a1c44 0%, #122c66 60%, #1a3f8a 100%);
  color: #fff;
}
.hero::after {
  /* Subtle skyline silhouette on hero */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 65%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700' preserveAspectRatio='xMidYMax slice'><defs><linearGradient id='sky' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23000' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.55'/></linearGradient></defs><g fill='%23000' fill-opacity='.32'><polygon points='0,700 0,510 60,510 60,470 110,470 110,490 180,490 180,440 240,440 240,500 320,500 320,520 380,520 380,460 440,460 440,510 510,510 510,440 580,440 580,490 660,490 660,420 700,420 700,300 740,300 740,260 770,260 770,140 800,90 830,140 830,260 860,260 860,300 900,300 900,420 940,420 940,490 1010,490 1010,440 1080,440 1080,510 1150,510 1150,460 1210,460 1210,520 1270,520 1270,500 1340,500 1340,440 1400,440 1400,490 1460,490 1460,470 1530,470 1530,510 1600,510 1600,700' /></g><rect width='1600' height='700' fill='url(%23sky)'/></svg>");
  background-size: cover;
  background-position: bottom center;
  opacity: 0.6;
  pointer-events: none;
}
.hero::before {
  /* Vignette */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 50% 90%, rgba(236, 122, 30, 0.18), transparent 60%),
    radial-gradient(1000px 600px at 80% 10%, rgba(44, 102, 194, 0.35), transparent 60%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 14ch; }
.hero h1 .accent {
  background: linear-gradient(180deg, #fff 0%, #cdd2dc 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lede { color: rgba(255, 255, 255, 0.85); margin-top: 1.2rem; max-width: 56ch; }
.hero-actions {
  margin-top: 2.4rem;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.hero-stats {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 28px;
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 2rem;
  max-width: 920px;
}
.hero-stats .stat .num {
  display: block;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.hero-stats .stat .label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 6px;
}
@media (max-width: 720px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}

.hero-scroll {
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 3;
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0.85;
  animation: bob 2.4s ease-in-out infinite;
}
.hero-scroll::after {
  content: "";
  width: 1px; height: 36px;
  background: linear-gradient(180deg, #fff, transparent);
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* -------- Tesla-style full-viewport service section -------- */
.spotlight {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  color: var(--ink-900);
  background: var(--bg-soft);
}
.spotlight.is-dark {
  background: var(--navy-900);
  color: #fff;
}
.spotlight.is-dark h1, .spotlight.is-dark h2, .spotlight.is-dark h3 { color: #fff; }
.spotlight.is-dark p { color: rgba(255,255,255,0.78); }
.spotlight.is-dark .eyebrow { color: var(--orange-400); }

.spotlight .container { position: relative; z-index: 2; }
.spotlight .content {
  max-width: 720px;
  text-align: left;
}
.spotlight h2 { margin-top: 0.4rem; }
.spotlight .lede { margin-top: 1.2rem; }
.spotlight-actions {
  margin-top: 2rem;
  display: flex; gap: 14px; flex-wrap: wrap;
}

.spotlight.center .container { text-align: center; }
.spotlight.center .content { margin: 0 auto; text-align: center; }
.spotlight.center .lede { margin-left: auto; margin-right: auto; }
.spotlight.center .spotlight-actions { justify-content: center; }

/* Background visual layers */
.spotlight .bg-art {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.spotlight .bg-art::before {
  content: ""; position: absolute; inset: 0;
}
.spotlight.bg-paint { background: #ffffff; }
.spotlight.bg-paint .bg-art { display: none; }
.spotlight.bg-epoxy .bg-art::before {
  background:
    radial-gradient(900px 600px at 20% 30%, rgba(20, 57, 122, 0.18), transparent 60%),
    radial-gradient(900px 600px at 90% 80%, rgba(236, 122, 30, 0.16), transparent 60%);
}
.spotlight.bg-epoxy .bg-art::after {
  /* dots / flake pattern */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(20,57,122,0.10) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: .6;
}
.spotlight.bg-esd .bg-art::before {
  background:
    radial-gradient(1200px 700px at 80% 10%, rgba(44, 102, 194, 0.18), transparent 60%),
    radial-gradient(900px 700px at 20% 90%, rgba(236, 122, 30, 0.14), transparent 60%),
    linear-gradient(180deg, #0a1c44 0%, #0c2358 100%);
}
.spotlight.bg-esd .bg-art::after {
  /* circuit lines */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at 70% 50%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 70% 50%, #000 0%, transparent 70%);
}
.spotlight.bg-coverage .bg-art::before {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}

/* -------- Service tile grid (interior pages) -------- */
.tile {
  background: #fff;
  border: 1px solid var(--line);
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.tile .num {
  display: inline-block;
  font-weight: 700; color: var(--orange-500);
  letter-spacing: 0.18em; font-size: 0.78rem;
  margin-bottom: 14px;
}
.tile h3 { margin-bottom: 8px; color: var(--ink-900); }
.tile p { margin-bottom: 0; }

a.tile { display: block; color: inherit; }
a.tile:hover h3 { color: var(--navy-700); }
a.tile .arrow {
  display: inline-block; margin-top: 14px;
  color: var(--orange-500); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
}

/* -------- Two-column split -------- */
.split {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start;
}
@media (max-width: 980px) { .split { grid-template-columns: 1fr; gap: 48px; } }

/* -------- Feature list (icon + text) -------- */
.feature {
  display: flex; gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.feature:last-child { border-bottom: 0; }
.feature .ico {
  flex: 0 0 44px; height: 44px;
  background: var(--navy-700); color: #fff;
  display: grid; place-items: center;
  border-radius: 8px; font-weight: 700;
  font-size: 1rem;
}
.spotlight.is-dark .feature { border-color: rgba(255,255,255,0.12); }
.spotlight.is-dark .feature .ico { background: var(--orange-500); }
.feature h4 { color: var(--ink-900); margin: 0 0 4px; }
.spotlight.is-dark .feature h4 { color: #fff; }
.feature p { margin: 0; }

/* -------- Compliance / specs table -------- */
.specs {
  width: 100%; border-collapse: collapse;
  font-size: 0.95rem;
}
.specs th, .specs td {
  text-align: left; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-500);
}
.specs th {
  font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-900);
  font-weight: 700;
}
.specs td:first-child { color: var(--ink-900); font-weight: 500; }
.specs tr:last-child td { border-bottom: 0; }
.spotlight.is-dark .specs th, .spotlight.is-dark .specs td { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.14); }
.spotlight.is-dark .specs th { color: #fff; }

/* -------- Chips -------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid var(--line-strong);
  padding: 8px 16px;
  font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--ink-700);
  border-radius: 999px;
  background: #fff;
}
.spotlight.is-dark .chip { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.2); }

/* -------- CTA band -------- */
.cta-band {
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 50%, var(--navy-600) 100%);
  color: #fff;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 90% 20%, rgba(236, 122, 30, 0.20), transparent 60%);
  pointer-events: none;
}
.cta-band .container {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin: 0; }
.cta-band p { color: rgba(255,255,255,0.85); margin: 8px 0 0; }
.cta-band-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* -------- Footer -------- */
.site-footer {
  background: var(--navy-900);
  color: rgba(255,255,255,0.78);
  padding: 80px 0 28px;
}
.site-footer .columns {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px;
}
@media (max-width: 880px) { .site-footer .columns { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer .columns { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: rgba(255,255,255,0.55);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 14px;
}
.site-footer .brand { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 5px 0; }
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: var(--orange-400); }
.site-footer p { color: rgba(255,255,255,0.65); }
.site-footer .legal {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
}

/* -------- Footer social icons -------- */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social a:hover {
  background: var(--orange-500);
  color: #fff;
  border-color: var(--orange-500);
  transform: translateY(-2px);
}
.footer-social svg { display: block; }

/* -------- Reveal-on-scroll -------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* -------- Mobile sticky CTA -------- */
.mobile-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  gap: 10px;
}
.mobile-cta a {
  flex: 1; text-align: center;
  padding: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}
.mobile-cta .call { background: var(--navy-700); color: #fff; }
.mobile-cta .mail { border: 1.5px solid var(--navy-700); color: var(--navy-700); }
@media (max-width: 720px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 76px; }
}

/* -------- Page header (interior) -------- */
.page-head {
  position: relative;
  padding: calc(var(--nav-h) + 60px) 0 64px;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff;
  overflow: hidden;
}
.page-head::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1000px 500px at 90% 0%, rgba(236, 122, 30, 0.18), transparent 60%);
  pointer-events: none;
}
.page-head .container { position: relative; z-index: 2; }
.page-head h1 { color: #fff; max-width: 18ch; }
.page-head .lede { color: rgba(255,255,255,0.85); }
.page-head .eyebrow { color: var(--orange-400); }
.crumbs {
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1.2rem;
}
.crumbs a { color: rgba(255,255,255,0.55); }
.crumbs a:hover { color: var(--orange-400); }
.crumbs .sep { margin: 0 10px; opacity: .6; }

/* -------- Card-link "tile-link" used on homepage tile grid -------- */
a.tile-link {
  display: block; color: inherit; text-decoration: none;
}

/* -------- Utility -------- */
.center { text-align: center; }
.muted { color: var(--ink-500); }
.hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 48px 0;
}
.flex { display: flex; }
.gap-14 { gap: 14px; }
.wrap { flex-wrap: wrap; }
.mt-2 { margin-top: 1.4rem; }
.mt-3 { margin-top: 2rem; }

/* -------- Section divider angle (Tesla-feel transitions) -------- */
.section-divider {
  height: 1px;
  background: var(--line);
}

/* -------- Backward-compatibility aliases for interior pages -------- */
:root {
  --gold: var(--orange-500);
  --gold-2: var(--orange-600);
  --gold-soft: rgba(236, 122, 30, 0.12);
}

/* Old `.panel` → behaves like `.tile` */
.panel {
  background: #fff;
  border: 1px solid var(--line);
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.panel .num {
  display: inline-block;
  color: var(--orange-500);
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.panel h3 { margin-bottom: 8px; color: var(--ink-900); }
.panel p { margin-bottom: 0; }
a.panel { display: block; color: inherit; text-decoration: none; }

/* Old generic `section` border-top/padding (interior pages used plain <section>) */
section.section-pad,
section:not(.hero):not(.spotlight):not(.cta-band):not(.site-footer):not(.page-head) {
  padding: clamp(72px, 9vw, 130px) 0;
}

/* Sections marked dark via inline style still work; provide a class alternative */
.section-dark {
  background: var(--navy-900) !important;
  color: #fff;
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.78); }
.section-dark .eyebrow { color: var(--orange-400); }
.section-dark .specs th, .section-dark .specs td { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.14); }
.section-dark .specs th { color: #fff; }
.section-dark .specs td:first-child { color: #fff; }
.section-dark .panel {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.section-dark .panel:hover {
  border-color: rgba(255,255,255,0.28);
}
.section-dark .panel h3 { color: #fff; }
.section-dark .panel p { color: rgba(255,255,255,0.78); }
.section-dark .feature { border-color: rgba(255,255,255,0.12); }
.section-dark .feature h4 { color: #fff; }
.section-dark .chip {
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.2);
}

/* Old hero-meta — keep working but adjust to light pages */
.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  margin-top: 3rem;
}
.hero-meta .stat .num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-meta .stat .label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-top: 6px;
}
.section-dark .hero-meta { border-color: rgba(255,255,255,0.14); }
.section-dark .hero-meta .stat .num { color: #fff; }
.section-dark .hero-meta .stat .label { color: rgba(255,255,255,0.65); }
@media (max-width: 720px) { .hero-meta { grid-template-columns: repeat(2, 1fr); } }

/* Page-head + body padding so content isn't hidden under fixed header */
body { padding-top: 0; }
.page-head { padding-top: calc(var(--nav-h) + 56px); }
.hero { padding-top: calc(var(--nav-h) + 24px); }
section.section-pad:first-of-type:not(.hero):not(.page-head) { padding-top: calc(var(--nav-h) + 80px); }

/* Inline style migration: spotlight bgcolor swatch (used by old interior pages) */
[style*="linear-gradient(180deg,#0c0c0e,#0a0a0b)"] { background: var(--bg-soft) !important; }

/* Headline gold accent on old pages — show in orange italic now */
[style*="color:var(--gold); font-style: italic;"],
[style*="color:var(--gold);font-style: italic;"],
[style*="color: var(--gold); font-style: italic;"],
[style*="color: var(--gold);font-style: italic;"] {
  color: var(--orange-500) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

/* Headline accent (.accent inside h1) on dark hero */
.hero h1 .accent { font-weight: 700; }

/* ===== Real PNG logo + bold wordmark ===== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;                  /* space between icon and wordmark */
  text-decoration: none;
}
.brand .logo-svg {
  height: 72px;
  width: auto;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}
.site-footer .brand .logo-svg {
  height: 96px;
  width: auto;
  flex: 0 0 auto;
}

/* Show the wordmark big and bold next to the icon */
.brand .name {
  display: inline-flex !important;
  flex-direction: column;
  line-height: 0.92;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.005em;
  color: inherit;
  white-space: nowrap;
}
.brand .name .accent {
  color: var(--orange-500);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.005em;
  margin-top: 4px;
  display: inline;
}
/* On dark hero (transparent header before scroll), keep accent visible */
.site-header.is-dark:not(.is-solid) .brand .name { color: #fff; }
.site-header.is-dark:not(.is-solid) .brand .name .accent { color: var(--orange-400); }
/* Footer wordmark stays white but accent stays orange */
.site-footer .brand .name { color: #fff; font-size: 1.85rem; }
.site-footer .brand .name .accent { color: var(--orange-400); font-size: 1.85rem; }

/* Bump nav height so the larger logo + wordmark fit cleanly */
.site-header .nav { height: 104px; }
:root { --nav-h: 104px; }
.hero { padding-top: calc(var(--nav-h) + 24px); }
.page-head { padding-top: calc(var(--nav-h) + 56px); }

/* Mobile sizing — shrink wordmark + icon on small screens */
@media (max-width: 720px) {
  .brand { gap: 10px; }
  .brand .logo-svg { height: 44px; }
  .brand .name, .brand .name .accent { font-size: 1.15rem; }
  .site-header .nav { height: 72px; }
  :root { --nav-h: 72px; }
}
.brand .name {
  display: inline-flex; flex-direction: column;
  line-height: 1; letter-spacing: 0.04em;
  font-size: 1rem; font-weight: 800;
  color: inherit;
}
.brand .name .accent {
  color: var(--orange-500);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  font-weight: 700;
  margin-top: 4px;
}
.site-header.is-dark:not(.is-solid) .brand .name .accent { color: var(--orange-400); }