/* Fonts – Eurostile family (only weights actually used: 400, 600, 700) */
@font-face {
  font-family: 'Eurostile';
  src: url('fonts/eurostile-1.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Eurostile';
  src: url('fonts/eurostile-3.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Eurostile';
  src: url('fonts/eurostile-5.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Ticker */
.ticker { overflow:hidden; white-space:nowrap; background:#00B4A0; padding:.65rem 0; }
.ticker-track { display:inline-flex; animation:ticker-scroll 28s linear infinite; }
.t-item { display:inline-flex; align-items:center; gap:1.2rem; padding:0 1.2rem; font-family:'Eurostile',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.tdot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.5); flex-shrink:0; }
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .hero-carousel-img { transition: none; }
}

/* Circuit bg overlay */
.circuit-bg { position:relative; overflow:visible; }
.circuit-bg::before { content:''; position:absolute; inset:0; background-image:url('images/circuit-bg.svg'); background-size:cover; opacity:.22; pointer-events:none; z-index:0; }
.circuit-bg > * { position:relative; z-index:1; }

/* Hero: prevent logo from being cut off */
.hero-section { overflow-x: visible; }
.hero-section .overflow-visible svg { overflow: visible; min-width: 0; }
.circuit-light::before { opacity:.15; }
.circuit-dark::before { opacity:.28; }

/* Brand gradient utilities — replaces repeated inline gradients */
.bg-brand-dark { background:linear-gradient(315deg,#001F35 0%,#002F4A 95%,#00403D 100%); }
.bg-brand      { background:linear-gradient(315deg,#00385D 0%,#004068 95%,#004D48 100%); }

/* ── Reusable component classes ─────────────────────────── */

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Eurostile',sans-serif; font-weight:700;
  border-radius:9999px; text-decoration:none; transition:all .15s ease;
  text-align:center;
}
.btn-primary {
  padding:0.75rem 1.5rem; font-size:inherit;
  background:#00B4A0; color:#fff;
}
.btn-primary:hover { background:#33C9B8; }
.btn-lg { padding:0.875rem 1.75rem; }
.btn-navy {
  padding:0.75rem 1.5rem; font-size:inherit;
  background:#0A1E3D; color:#fff;
}
.btn-navy:hover { background:#1A3D6E; }
.btn-ghost {
  padding:0.75rem 1.5rem; font-size:inherit; font-weight:600;
  background:transparent; border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.8);
}
.btn-ghost:hover { border-color:rgba(255,255,255,.4); color:#fff; }
.btn-ghost-dark {
  padding:0.75rem 1.5rem; font-size:inherit; font-weight:600;
  background:transparent; border:1px solid #D5E2EF;
  color:#0A1E3D;
}
.btn-ghost-dark:hover { border-color:#00B4A0; color:#00B4A0; }

/* Section label — uppercase teal text with leading line */
.section-label {
  font-family:'Eurostile',sans-serif; font-size:0.75rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:#00B4A0;
  display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem;
}
.section-label::before {
  content:''; display:inline-block; width:2rem; height:1px; background:#00B4A0;
}
/* Variant without the line (centered labels) */
.section-label-plain {
  font-family:'Eurostile',sans-serif; font-size:0.75rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:#00B4A0;
  margin-bottom:0.5rem;
}
/* Light variant for dark backgrounds */
.section-label-light { color:#33C9B8; }
.section-label-light::before { background:#33C9B8; }

/* Feature card — white card with teal hover */
.card {
  background:#fff; border-radius:1rem; border:1px solid #D5E2EF;
  transition:all .15s ease;
}
.card:hover { border-color:#00B4A0; box-shadow:0 4px 6px -1px rgba(0,0,0,.1); }

/* Icon box — teal-tinted icon container */
.icon-box {
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:0.75rem; background:rgba(0,180,160,.1);
}
.icon-box-sm { width:2.5rem; height:2.5rem; }
.icon-box-md { width:3rem; height:3rem; }

/* Glassmorphism */
.glass { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); }
.glass:hover { background:rgba(255,255,255,.12); border-color:#00B4A0; }

/* Font utilities */
.font-display { font-family:'Eurostile',sans-serif; }
.font-body { font-family:'Eurostile',sans-serif; }

/* Scrollbar and full-page scroll – html bg matches footer so no white sliver at bottom */
html { scroll-behavior:smooth; background:#0A1E3D; }
body { min-height:100vh; }

/* Active nav item: current page link in teal-lt */
.nav-active { color:#33C9B8 !important; }

/* Global focus-visible for interactive elements */
a:focus-visible,
button:focus-visible { outline:2px solid #00B4A0; outline-offset:2px; border-radius:4px; }

/* Optical centering for CTA buttons – font side bearings can make text look left of center */
a[class*="inline-flex"][class*="justify-center"][class*="rounded-full"],
a[class*="inline-flex"][class*="justify-center"][class*="rounded-xl"] {
  text-align: center;
  transform: translateX(0.12em);
}

/* Single root in partial so both navs parse; wrapper has no layout. */
.nav-wrapper {
  display: contents;
}

/* Skip link — visible only on focus */
.skip-link {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; text-decoration:none;
}
.skip-link:focus {
  position:fixed; top:0.5rem; left:0.5rem; z-index:99999;
  width:auto; height:auto; padding:0.5rem 1rem; margin:0;
  overflow:visible; clip:auto;
  background:#00B4A0; color:#fff; border-radius:0.5rem;
  font-size:0.875rem; font-weight:700;
}

/* Navbar — shared base for desktop & mobile */
.nav-bar {
  position:fixed; top:0; left:0; right:0; width:100%; z-index:9999;
  height:4rem; align-items:center; justify-content:space-between;
  padding:0 1.5rem;
  background:linear-gradient(315deg,rgba(0,56,93,.97) 0%,rgba(0,50,80,.97) 95%,rgba(0,64,61,.92) 100%);
  backdrop-filter:blur(12px);
}
.nav-logo { flex-shrink:0; min-width:0; }
.nav-logo img {
  height:2.25rem; width:auto; max-width:min(52vw,220px);
  object-fit:contain; object-position:left;
}
.nav-links { display:flex; align-items:center; gap:1.75rem; list-style:none; margin:0; padding:0; }
.nav-link {
  font-family:inherit; font-size:0.875rem; letter-spacing:0.025em;
  color:rgba(255,255,255,.75); text-decoration:none; transition:color .15s ease;
}
.nav-link:hover { color:#33C9B8; }
.nav-phone { font-size:0.875rem; color:rgba(255,255,255,.6); text-decoration:none; }
.nav-cta {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.875rem; font-weight:700; padding:0.5rem 1.25rem;
  border-radius:9999px; background:#00B4A0; color:#fff;
  text-decoration:none; transition:background .15s ease;
}
.nav-cta:hover { background:#33C9B8; }

/* Hamburger button */
.nav-hamburger {
  min-width:2.5rem; min-height:2.5rem; cursor:pointer; flex-shrink:0;
  border:0; background:transparent; padding:0;
  display:flex; align-items:center; justify-content:center; color:white;
}
.nav-hamburger svg { width:1.25rem; height:1.25rem; }

/* Mobile dropdown */
.nav-mobile-dropdown {
  display:none; position:absolute; top:4rem; left:0; right:0; z-index:10000;
  min-height:200px; padding:1rem 1rem 1.5rem;
  background:linear-gradient(180deg,rgba(0,31,53,.98) 0%,rgba(0,56,93,.98) 100%);
  backdrop-filter:blur(16px); border-top:1px solid rgba(255,255,255,.08);
  opacity:0; transform:translateY(-8px); transition:opacity .2s ease,transform .2s ease;
}
.nav-mobile-link {
  display:block; font-size:1rem; color:rgba(255,255,255,.8); text-decoration:none;
  padding:0.75rem 1rem; border-bottom:1px solid rgba(255,255,255,.05);
  transition:color .15s ease;
}
.nav-mobile-link:hover { color:#33C9B8; }
.nav-mobile-cta {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.875rem; font-weight:700; padding:0.75rem 1rem;
  border-radius:0.75rem; background:#00B4A0; color:#fff;
  text-decoration:none; margin:0 1rem; transition:background .15s ease;
}
.nav-mobile-cta:hover { background:#33C9B8; }

/* Service area map */
.state-default { fill: #1A3D6E; transition: fill 0.15s ease; }
.state-served  { fill: #00B4A0; transition: fill 0.15s ease; }
.state-served:hover { fill: #33C9B8; }

/* Desktop vs mobile nav: one visible per breakpoint (1024px = lg) */
.nav-desktop,
.nav-mobile {
  display: none;
}
@media (min-width: 1024px) {
  .nav-desktop {
    display: flex !important;
  }
}
@media (max-width: 1023px) {
  .nav-mobile {
    display: flex !important;
  }
}