/* ===========================================================================
   Jugoexsim DOO — Main Stylesheet
   Design: dark navy + accent blue, red reserved for action and danger
   Fonts: Space Grotesk (headings), Inter (body)
   =========================================================================== */

/* ===========================================================================
   DESIGN TOKENS
   Single source of truth for colour, type, spacing, radius, elevation and
   motion. Values are the ones already in use across the site, named and
   deduplicated — nothing was invented, so adopting a token cannot shift the
   design on its own.

   THE ONE COLOUR RULE
     --color-action (red) marks the single most important action on a screen.
     --color-danger (same hue, different job) marks errors and destruction.
     Everything else — navigation, links, section labels, dividers, borders,
     focus — uses --color-brand.
     Red was previously also used for decoration (accent lines, the section
     eyebrow), which drained it of urgency. Those now use the brand blue.
   =========================================================================== */

:root {
  /* -- Brand ------------------------------------------------------------ */
  --color-brand:            #02A9E0;
  --color-brand-dark:       #0284B0;   /* hover / pressed */
  --color-brand-deep:       #003F72;   /* gradient partner */
  --color-brand-a08:        rgba(2,169,224,.08);
  --color-brand-a25:        rgba(2,169,224,.25);
  --color-brand-a30:        rgba(2,169,224,.30);
  --color-brand-a40:        rgba(2,169,224,.40);

  /* -- Action & status -------------------------------------------------- */
  --color-action:           #DC3545;   /* primary CTA only — one per screen */
  --color-action-dark:      #C82333;
  --color-action-light:     #E85D6B;
  --color-danger:           #DC3545;   /* errors, destructive, warnings */
  --color-success:          #22C55E;
  --color-eco:              #22C55E;   /* EURO 6 identity */

  /* -- Surfaces --------------------------------------------------------- */
  --surface-deepest:        #001A33;
  --surface-dark:           #0A1929;   /* page background */
  --surface-light:          #F0F6FA;
  --surface-white:          #FFFFFF;

  /* -- Text ------------------------------------------------------------- */
  --text-on-dark:           #FFFFFF;
  --text-on-dark-muted:     #E8F0F7;
  --text-on-dark-subtle:    #8DA4B8;
  --text-on-dark-dim:       #7A96AD;
  --text-on-light:          #0A1929;
  --text-on-light-muted:    #4A6580;

  /* -- Borders ---------------------------------------------------------- */
  --border-light:           #D0DEE9;
  --border-on-dark:         rgba(255,255,255,.08);
  --border-on-dark-soft:    rgba(255,255,255,.06);
  --border-on-dark-faint:   rgba(255,255,255,.04);

  /* -- Type ------------------------------------------------------------- */
  --font-display:           'Space Grotesk', sans-serif;  /* headings */
  --font-body:              'Inter', sans-serif;

  /* Scale. The site had 17 distinct sizes; these nine are the canonical
     steps. 10px and 11px are deliberately absent — below the readable
     minimum. Use --text-xs as the floor. */
  --text-xs:                12px;
  --text-sm:                13px;
  --text-base:              14px;
  --text-md:                16px;
  --text-lg:                18px;
  --text-xl:                24px;
  --text-2xl:               32px;
  --text-3xl:               40px;
  --text-4xl:               52px;

  --weight-regular:         400;
  --weight-medium:          500;
  --weight-semibold:        600;
  --weight-bold:            700;

  /* -- Spacing (4px base) ------------------------------------------------ */
  --space-1:                4px;
  --space-2:                8px;
  --space-3:                12px;
  --space-4:                16px;
  --space-5:                24px;
  --space-6:                32px;
  --space-7:                48px;
  --space-8:                64px;
  --space-9:                96px;

  /* -- Radius ----------------------------------------------------------- */
  --radius-sm:              4px;
  --radius-md:              8px;    /* default for cards and inputs */
  --radius-lg:              12px;
  --radius-xl:              16px;
  --radius-2xl:             20px;
  --radius-full:            100px;

  /* -- Elevation -------------------------------------------------------- */
  --shadow-sm:              0 2px 8px rgba(0,0,0,.15);
  --shadow-md:              0 8px 24px rgba(0,0,0,.25);
  --shadow-lg:              0 20px 60px rgba(0,0,0,.40);
  --shadow-focus:           0 0 0 3px rgba(2,169,224,.12);
  --glow-brand:             0 0 16px rgba(2,169,224,.35);

  /* -- Motion ----------------------------------------------------------- */
  --ease-out:               cubic-bezier(.4,0,.2,1);
  --duration-fast:          .2s;
  --duration-base:          .3s;
  --duration-slow:          .8s;

  /* -- Touch ------------------------------------------------------------ */
  --tap-min:                24px;   /* WCAG 2.2 AA floor (SC 2.5.8) */
  --tap-comfortable:        44px;   /* anything a thumb aims for */
}

/* ---------------------------------------------------------------------------
   0. Reset — BEFORE Bootstrap to override its defaults
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box !important; }

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
  color: #4A6580;
  background: #fff;
  overflow-x: hidden;
}

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

a { color: #02A9E0; text-decoration: none; transition: color .2s; }
a:hover, a:focus { color: #0284B0; text-decoration: none; }

::selection { background: #02A9E0; color: #fff; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #02A9E0; border-radius: 4px; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif !important;
  color: #0A1929;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .4em;
}

p { margin: 0 0 .8em; }
ul { list-style: none; padding: 0; margin: 0; }

/* ---------------------------------------------------------------------------
   1. Loader
   --------------------------------------------------------------------------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #001A33;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s;
}
.loader.hidden { opacity: 0; pointer-events: none; }
.loader-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(2,169,224,.2);
  border-top-color: #02A9E0;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   2. Header
   --------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(0,20,45,.95) 0%, rgba(0,40,80,.9) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(2,169,224,.4) 30%, rgba(220,53,69,.3) 70%, transparent);
  opacity: 0;
  transition: opacity .4s;
}
.site-header.scrolled {
  background: rgba(0,15,35,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0,0,0,.35);
  height: 64px;
}
.site-header.scrolled::after {
  opacity: 1;
}

/* Logo */
.site-header .logo,
.site-header .logo:hover {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  transition: transform .2s;
}
.site-header .logo:hover {
  transform: scale(1.02);
}
.logo-icon-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.1);
  transition: box-shadow .3s, border-color .3s;
}
.site-header .logo:hover .logo-icon-img {
  box-shadow: 0 4px 16px rgba(2,169,224,.25);
  border-color: rgba(2,169,224,.3);
}
.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-header .logo-primary {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.3px;
}
.site-header .logo-secondary {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #02A9E0;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Desktop Nav */
.site-header .nav-desktop {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header .nav-desktop li { margin: 0; }
.site-header .nav-desktop li a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(232,240,247,.7);
  padding: 8px 16px;
  border-radius: 8px;
  transition: color .25s, background .25s;
  position: relative;
}
.site-header .nav-desktop li a:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.site-header .nav-desktop li a.active {
  color: #02A9E0;
  background: rgba(2,169,224,.08);
}
.site-header .nav-desktop li a.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: #02A9E0;
}

/* Header Right */
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(232,240,247,.8);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: all .25s;
}
.header-phone:hover {
  border-color: rgba(2,169,224,.3);
  color: #fff;
}
.header-phone .fa {
  color: #02A9E0;
  font-size: 12px;
}

.btn-cta,
a.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #DC3545 0%, #c82333 100%);
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(220,53,69,.3), inset 0 1px 0 rgba(255,255,255,.1);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  text-decoration: none;
}
.btn-cta:hover,
a.btn-cta:hover {
  background: linear-gradient(135deg, #e04555 0%, #DC3545 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(220,53,69,.35), inset 0 1px 0 rgba(255,255,255,.15);
  color: #fff !important;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  cursor: pointer;
  padding: 8px 7px;
  transition: border-color .2s, background .2s;
}
.nav-toggle:hover {
  border-color: rgba(2,169,224,.4);
  background: rgba(255,255,255,.04);
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: #E8F0F7;
  border-radius: 2px;
  transition: transform .3s, opacity .3s, width .3s;
}
.nav-toggle span:nth-child(2) { width: 14px; }

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: 72px; left: 0; right: 0;
  background: rgba(0,15,35,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 8px 24px 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index: 999;
}
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; padding: 0; margin: 0; }
.mobile-nav ul li { border-bottom: 1px solid rgba(255,255,255,.05); }
.mobile-nav ul li:last-child { border-bottom: none; }
.mobile-nav ul li a {
  display: flex;
  align-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(232,240,247,.8);
  padding: 14px 12px;
  border-radius: 8px;
  transition: all .2s;
}
.mobile-nav ul li a:hover {
  color: #fff;
  background: rgba(255,255,255,.04);
}
.mobile-nav ul li a.active {
  color: #02A9E0;
  background: rgba(2,169,224,.06);
}
.mobile-nav ul li a.btn-cta {
  margin-top: 8px;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   3. Hero Section
   --------------------------------------------------------------------------- */

.hero {
  padding: 128px 48px 48px;
  background:
    linear-gradient(160deg, rgba(0,63,114,.35) 0%, rgba(0,26,51,.92) 100%),
    #001022;
  color: #E8F0F7;
  min-height: 80vh;
}

.hero-top {
  display: flex;
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
  max-width: 1344px;
  margin-left: auto;
  margin-right: auto;
}

.hero-left {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 2;
}

.hero-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 100px;
  background: #003F72;
  font-size: 12px;
  font-weight: 500;
  color: #02A9E0;
  align-self: flex-start;
}

.hero-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 52px;
  font-weight: 600;
  color: #E8F0F7 !important;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0;
}

/* Decorative rule — brand, not action. Red here competed with the CTA
   sitting a few hundred pixels below it. */
.accent-line {
  width: 60px; height: 3px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, transparent 0%, var(--color-brand) 15%, var(--color-brand-dark) 85%, transparent 100%);
}
.accent-line--wide { width: 80px; }
.accent-line--center { margin-left: auto; margin-right: auto; }

.hero-desc {
  font-size: 18px;
  color: #7A96AD;
  line-height: 1.5;
  margin: 0;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-primary,
a.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: #DC3545;
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(220,53,69,.25);
  transition: all .25s;
}
.btn-primary:hover,
a.btn-primary:hover {
  background: #c82333;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(220,53,69,.35);
}

.btn-outline,
a.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: rgba(255,255,255,.06);
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  border: 1.5px solid #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: all .25s;
}
.btn-outline:hover,
a.btn-outline:hover {
  background: rgba(255,255,255,.15);
  color: #fff !important;
}

/* Hero image */
/* Hero Carousel */
.hero-carousel {
  flex: 0 1 50%;
  min-width: 320px;
  max-width: 640px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #111;
  box-shadow:
    0 20px 60px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.carousel-track {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
  transform: scale(1.03);
}
.carousel-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* <picture> is inline by default, which would collapse the 100% height of the
   <img> inside it. */
.carousel-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Subtle overlay for depth */
.hero-carousel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,20,40,.15) 0%, transparent 30%, transparent 70%, rgba(0,10,25,.4) 100%),
    linear-gradient(90deg, rgba(0,20,40,.1) 0%, transparent 20%, transparent 80%, rgba(0,20,40,.1) 100%);
  border-radius: 20px;
}

/* Carousel navigation arrows */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: rgba(0,20,40,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.8);
  font-size: 14px;
  cursor: pointer;
  z-index: 5;
  transition: all .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.hero-carousel:hover .carousel-btn {
  opacity: 1;
}
.carousel-btn:hover {
  background: rgba(2,169,224,.7);
  border-color: rgba(2,169,224,.5);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 20px rgba(2,169,224,.3);
}
.carousel-btn--prev { left: 14px; }
.carousel-btn--next { right: 14px; }

/* Carousel dots */
.carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
  background: rgba(0,15,30,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.08);
}
/* The button is the touch target (24x24 — WCAG 2.2 target size minimum); the
   visible dot is drawn by ::before, so appearance is unchanged while the
   tappable area grows from 8x8. Dots sit 14px apart, so a 44px target would
   overlap its neighbours and route taps to the wrong slide. */
.carousel-dot {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
}
.carousel-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: all .3s ease;
}
.carousel-dot.active {
  width: 40px;
}
.carousel-dot.active::before {
  background: #02A9E0;
  width: 24px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(2,169,224,.5);
}
.carousel-dot:hover:not(.active)::before {
  background: rgba(255,255,255,.6);
}

/* Hero Cards */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1344px;
  margin: 0 auto;
}

.hero-card {
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  padding: 24px;
  border-left: 3px solid #02A9E0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(4px);
}
.hero-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #E8F0F7 !important;
  margin: 0;
}
.hero-card p {
  font-size: 13px;
  color: #7A96AD;
  line-height: 1.5;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   4. Section Header (shared)
   --------------------------------------------------------------------------- */

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
  text-align: center;
}
.section-header h2 {
  font-size: 40px;
  letter-spacing: -1px;
  margin: 0;
}
.section-header > p {
  font-size: 16px;
  color: #4A6580;
  max-width: 800px;
  line-height: 1.5;
  margin: 0;
}

/* Section eyebrow — a label, not a call to action. It was red while the
   "OUR LOCATIONS" eyebrow was blue; same role, two colours. Now brand. */
.section-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-brand-a08);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 2px;
  color: var(--color-brand);
}

/* ---------------------------------------------------------------------------
   5. About Section
   --------------------------------------------------------------------------- */

.about {
  padding: 80px 48px;
  background: #fff;
}

.about-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1344px;
  margin: 0 auto;
}

.about-card {
  background: #F0F6FA;
  border-radius: 12px;
  padding: 24px;
  border-left: 3px solid #02A9E0;
  box-shadow: 0 6px 24px rgba(15,23,42,.09);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-card > i.fa {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #003F72, #02A9E0);
  color: #fff !important;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0,63,114,.19);
  line-height: 44px !important;
  text-align: center;
  flex-shrink: 0;
  -webkit-text-fill-color: #fff;
}
.about-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.about-card p {
  font-size: 14px;
  color: #4A6580;
  line-height: 1.5;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   6. Services Section
   --------------------------------------------------------------------------- */

.services {
  padding: 80px 48px;
  background: #F0F6FA;
  position: relative;
}
.services::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,63,114,.03), transparent);
  pointer-events: none;
}
.services > * { position: relative; }

.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1344px;
  margin: 0 auto;
}

.svc-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 6px 24px rgba(15,23,42,.09);
  border: 1px solid #D0DEE9;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.svc-card .svc-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #003F72, #02A9E0);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,63,114,.19);
}
.svc-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}
.svc-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #4A6580;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   7. Locations / Map Section
   --------------------------------------------------------------------------- */

.locations {
  padding: 80px 48px;
  background: #0A1929;
  position: relative;
  overflow: hidden;
}
.locations .section-header h2 { color: #E8F0F7 !important; }
.locations .section-header > p { color: #7A96AD; }
.locations .section-badge {
  background: rgba(2,169,224,.1);
  color: #02A9E0;
}

/* Map container */
.map-container {
  max-width: 1344px;
  margin: 0 auto 40px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.06);
}

#locations-map {
  width: 100%;
  height: 460px;
  background: #0d1b2a;
}

/* Map legend */
.map-legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 1000;
  display: flex;
  gap: 16px;
  background: rgba(10,25,41,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #B0C4D8;
  font-family: 'Inter', sans-serif;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.legend-dot--24h { background: #02A9E0; box-shadow: 0 0 6px rgba(2,169,224,.5); }
.legend-dot--office { background: #DC3545; box-shadow: 0 0 6px rgba(220,53,69,.5); }

/* Custom map markers */
.custom-marker { background: none !important; border: none !important; }
.marker-pin {
  width: 30px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.marker-pin .fa {
  font-size: 32px;
  color: #02A9E0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  transition: transform .2s;
}
.marker-pin--hq .fa {
  font-size: 28px;
  color: #DC3545;
}
.custom-marker:hover .marker-pin .fa {
  transform: scale(1.2);
}

/* Map popup styling */
.map-popup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
  min-width: 180px;
}
.map-popup strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  color: #0A1929;
}
.map-popup .popup-addr {
  font-size: 13px;
  color: #4A6580;
}
.map-popup .popup-phone,
.map-popup .popup-hours {
  font-size: 13px;
  color: #0A1929;
}
.map-popup .popup-phone .fa,
.map-popup .popup-hours .fa {
  color: #02A9E0;
  width: 14px;
  text-align: center;
  margin-right: 4px;
}

/* Leaflet popup overrides */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.25) !important;
  padding: 0 !important;
}
.leaflet-popup-content {
  margin: 14px 16px !important;
  font-family: 'Inter', sans-serif !important;
}
.leaflet-popup-tip {
  box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
}

/* Location cards under map */
.locations-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1344px;
  margin: 0 auto;
}
.locations-cta {
  text-align: center;
  margin-top: 32px;
}
.loc-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s, background .2s;
}
.loc-card:hover {
  border-color: rgba(2,169,224,.3);
  background: rgba(255,255,255,.06);
}
.loc-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.loc-card-header .fa {
  color: #02A9E0;
  font-size: 16px;
}
.loc-card-header h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #E8F0F7;
  margin: 0;
  flex: 1;
}
.loc-card p {
  font-size: 13px;
  color: #7A96AD;
  margin: 0;
  line-height: 1.4;
}
/* Calling is the primary action for a carrier, but the link was only 21px
   tall. min-height lifts it to the 44px comfortable-touch size without
   changing the text; the negative margin keeps the surrounding rhythm. */
.loc-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -11px 0;
  font-size: 13px;
  color: #B0C4D8;
  text-decoration: none;
  transition: color .2s;
}
.loc-phone:hover { color: #02A9E0; }
.loc-phone .fa { color: #02A9E0; font-size: 12px; }

/* ---------------------------------------------------------------------------
   8. Partners Section
   --------------------------------------------------------------------------- */

.partners {
  padding: 64px 48px;
  background: #fff;
}

.partner-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1344px;
  margin: 0 auto;
}

a.partner-card,
.partner-card {
  display: block;
  padding: 24px 40px;
  border-radius: 8px;
  background: #F0F6FA;
  border: 1px solid #D0DEE9;
  box-shadow: 0 3px 12px rgba(15,23,42,.06);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.partner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15,23,42,.1);
}
.partner-card span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #0A1929;
}

/* ---------------------------------------------------------------------------
   8. Contact Section
   --------------------------------------------------------------------------- */

.contact {
  padding: 80px 48px;
  background: #F0F6FA;
  position: relative;
}
.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,63,114,.04), transparent);
  pointer-events: none;
}
.contact > * { position: relative; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1344px;
  margin: 0 auto;
}

.contact-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-left h2 {
  font-size: 32px;
  font-weight: 600;
  margin: 0;
}
.contact-left > p {
  font-size: 16px;
  line-height: 1.5;
  color: #4A6580;
  margin: 0;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #0A1929;
}
.contact-info-item .fa {
  width: 20px;
  text-align: center;
  font-size: 16px;
  color: #02A9E0;
}
.contact-info-item a { color: #0A1929; }
.contact-info-item a:hover { color: #02A9E0; }

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #D0DEE9;
  color: #4A6580;
  font-size: 14px;
  transition: all .2s;
}
.social-links a:hover {
  background: #02A9E0;
  border-color: #02A9E0;
  color: #fff;
}

/* Contact Form */
div.contact-form { display: flex; flex-direction: column; }

form.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
form.contact-form input[type="text"],
form.contact-form input[type="email"],
form.contact-form input[type="tel"],
form.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #D0DEE9;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #0A1929;
  box-shadow: 0 2px 8px rgba(15,23,42,.03);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
form.contact-form input::placeholder,
form.contact-form textarea::placeholder {
  color: #7A96AD;
}
form.contact-form input:focus,
form.contact-form textarea:focus {
  border-color: #02A9E0;
  box-shadow: 0 0 0 3px rgba(2,169,224,.12);
}
form.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: #DC3545;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(220,53,69,.25);
  transition: all .25s;
  width: 100%;
}
.btn-submit:hover {
  background: #c82333;
  transform: translateY(-1px);
}

.form-message {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  display: none;
}
.form-message.success-message {
  background: rgba(40,167,69,.1);
  color: #28A745;
  border: 1px solid rgba(40,167,69,.2);
}
.form-message.error-message {
  background: rgba(220,53,69,.08);
  color: #DC3545;
  border: 1px solid rgba(220,53,69,.2);
}
.success-message, .error-message { display: none; }

/* ---------------------------------------------------------------------------
   Auth Tabs & Forms
   --------------------------------------------------------------------------- */

.auth-hint {
  font-size: 14px;
  color: #4A6580;
  background: #EAF6FC;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.auth-hint i {
  color: #02A9E0;
  margin-right: 6px;
}

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 2px solid #D0DEE9;
}

.auth-tab {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #8DA4B8;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.auth-tab:hover { color: #0A1929; }
.auth-tab.active { color: #02A9E0; border-bottom-color: #02A9E0; }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  padding: 14px 16px;
  border: 1px solid #D0DEE9;
  border-radius: 8px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  color: #0A1929;
  outline: none;
  transition: border-color .2s;
  width: 100%;
  background: #fff;
}

.auth-form input:focus { border-color: #02A9E0; }

.auth-form .btn-submit {
  background: #02A9E0;
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  width: 100%;
  font-family: 'Space Grotesk', sans-serif;
}

.auth-form .btn-submit:hover { background: #0284B0; }
.auth-form .btn-submit:disabled { opacity: .6; cursor: default; }

/* Was an inline <a>, so its height came from line-height alone — 17px. As a
   centred block it fills the form width and reaches the 44px touch size
   without shifting the layout. Applies to "Back to Sign In" too. */
.auth-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 14px;
  color: #02A9E0;
  text-align: center;
  cursor: pointer;
}

.auth-link:hover { color: #0284B0; }

.auth-form-desc {
  font-size: 14px;
  color: #4A6580;
  margin: 0;
}

.auth-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #EAF6FC;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 15px;
  color: #0A1929;
}

.btn-signout {
  background: none;
  border: 1px solid #D0DEE9;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  color: #4A6580;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  font-family: 'Inter', sans-serif;
}

.btn-signout:hover { border-color: #DC3545; color: #DC3545; }

.password-field { position: relative; }

.password-strength {
  height: 3px;
  border-radius: 2px;
  margin-top: 4px;
  transition: width .3s, background .3s;
  width: 0;
}

.password-strength.weak { width: 33%; background: #DC3545; }
.password-strength.medium { width: 66%; background: #FFC107; }
.password-strength.strong { width: 100%; background: #28A745; }

.auth-notification {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  animation: notifSlide .3s ease-out;
}

.auth-notification--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.auth-notification--info {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

@keyframes notifSlide {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------------------------------------------------------------------------
   News Section & Cards
   --------------------------------------------------------------------------- */

.news-section {
  padding: 80px 48px;
  max-width: 1344px;
  margin: 0 auto;
}

.news-cards,
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.news-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1344px;
  margin: 0 auto 40px;
  padding: 0 48px;
}

.news-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10, 25, 41, .08);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid rgba(10,25,41,.06);
  position: relative;
}

.news-card:hover {
  box-shadow: 0 12px 32px rgba(10, 25, 41, .15), 0 0 0 1px rgba(2,169,224,.12);
}

/* Glow line at top on hover */
.news-card--interactive::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #02A9E0, #22C55E, #02A9E0);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .3s;
  z-index: 2;
}

.news-card--interactive:hover::before {
  opacity: 1;
  animation: card-glow-sweep 2s linear infinite;
}

@keyframes card-glow-sweep {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Image zoom on hover */
.news-card--interactive .news-card-img img {
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}

.news-card--interactive:hover .news-card-img img {
  transform: scale(1.06);
}

/* Arrow */
.news-card-arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #02A9E0;
  margin-top: 12px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s, transform .3s;
}

.news-card-arrow .fa {
  transition: transform .3s;
}

.news-card--interactive:hover .news-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

.news-card--interactive:hover .news-card-arrow .fa {
  transform: translateX(4px);
}

/* Card tags */
.news-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.news-card-tag {
  font-size: 10px;
  font-weight: 600;
  color: #0284B0;
  background: rgba(2,169,224,.08);
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: .3px;
}

/* Skeleton loading */
.news-card--skeleton {
  pointer-events: none;
}

.skeleton-shimmer {
  background: linear-gradient(90deg, #E8EFF5 25%, #F0F6FA 50%, #E8EFF5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

.skeleton-line {
  height: 14px;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.news-card-img {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #E8EEF3;
  overflow: hidden;
  position: relative;
}

.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-placeholder {
  background: linear-gradient(135deg, #0A1929 0%, #1a4a6e 50%, #02A9E0 100%);
  position: relative;
}

.news-placeholder::after {
  content: '\f1ea';
  font-family: FontAwesome;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: rgba(255, 255, 255, .2);
}

.news-card-body {
  padding: 16px 20px 20px;
}

.news-card-date {
  font-size: 12px;
  color: #8DA4B8;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.news-card-body h2,
.news-card-body h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.35;
  text-transform: none;
  color: #0A1929;
}

.news-card-body p {
  font-size: 13px;
  color: #4A6580;
  line-height: 1.5;
  margin: 0;
}

.news-cta {
  text-align: center;
  margin-top: 16px;
}

.news-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 48px 80px;
}

.news-detail {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 40px 48px 48px;
  box-shadow: 0 2px 16px rgba(10, 25, 41, .06);
}

.news-detail-img {
  width: calc(100% + 96px);
  margin: -40px -48px 32px;
  border-radius: 16px 16px 0 0;
  display: block;
  max-height: 400px;
  object-fit: cover;
}

.news-detail h1 {
  font-size: 32px;
  margin-bottom: 12px;
  line-height: 1.25;
  text-transform: none;
}

.news-detail-meta {
  font-size: 14px;
  color: #8DA4B8;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E8EEF3;
  display: flex;
  gap: 16px;
  align-items: center;
}

.news-detail-author {
  display: inline;
}

.news-detail-body {
  font-size: 16px;
  line-height: 1.8;
  color: #4A6580;
  margin-bottom: 40px;
}

.news-detail-body a {
  color: #02A9E0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s;
}

.news-detail-body a:hover {
  color: #0284B0;
}

.news-detail-body strong {
  color: #0A1929;
  font-weight: 700;
}

/* Tags on public article page */
.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -16px;
  margin-bottom: 32px;
  padding-top: 16px;
  border-top: 1px solid #E8EFF5;
}

.news-tag {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(2,169,224,.08), rgba(2,169,224,.04));
  border: 1px solid rgba(2,169,224,.18);
  border-radius: 20px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #0284B0;
  letter-spacing: .3px;
  transition: background .2s, transform .15s;
}

.news-tag:hover {
  background: rgba(2,169,224,.15);
  transform: translateY(-1px);
}

.news-empty {
  text-align: center;
  color: #8DA4B8;
  padding: 60px 0;
  font-size: 16px;
}

.news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 0 48px 40px;
}

.news-page-info {
  font-size: 14px;
  color: #8DA4B8;
}

.btn-admin {
  background: #02A9E0;
  color: #fff !important;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  margin-left: 8px;
  transition: background .2s;
}

.btn-admin:hover {
  background: #0284B0;
}

/* Admin button in header */
.btn-header-admin {
  position: relative;
  background: rgba(2, 169, 224, .12);
  color: #02A9E0 !important;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-left: 10px;
  transition: background .3s ease, color .3s ease, border-color .3s ease,
              box-shadow .3s ease, transform .2s ease;
  border: 1px solid rgba(2, 169, 224, .25);
  overflow: hidden;
}

/* Shimmer sweep on hover */
.btn-header-admin::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s ease;
}

.btn-header-admin:hover::before {
  left: 100%;
}

/* Gear icon — smooth spin on hover */
.btn-header-admin .fa-cog {
  display: inline-block;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}

.btn-header-admin:hover .fa-cog {
  transform: rotate(180deg);
}

/* Hover state */
.btn-header-admin:hover {
  background: #02A9E0;
  color: #fff !important;
  border-color: #02A9E0;
  box-shadow: 0 0 16px rgba(2,169,224,.35), 0 4px 12px rgba(2,169,224,.2);
  transform: translateY(-1px);
}

/* Active press */
.btn-header-admin:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 0 8px rgba(2,169,224,.25);
}

/* Idle pulse glow */
@keyframes admin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(2,169,224,.3); }
  50% { box-shadow: 0 0 0 6px rgba(2,169,224,0); }
}

.btn-header-admin {
  animation: admin-pulse 3s ease-in-out infinite;
}

.btn-header-admin:hover {
  animation: none;
}

.site-header.scrolled .btn-header-admin {
  background: rgba(2, 169, 224, .08);
}

.site-header.scrolled .btn-header-admin:hover {
  background: #02A9E0;
  color: #fff !important;
}

@media (max-width: 900px) {
  .news-cards { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; padding: 0 24px; }
  .news-section { padding: 60px 24px; }
  .news-page { padding: 90px 24px 60px; }
  .news-detail { padding: 24px 24px 32px; }
  .news-detail-img { width: calc(100% + 48px); margin: -24px -24px 24px; }
  .news-detail h1 { font-size: 24px; }
  .news-detail-meta { flex-direction: column; gap: 4px; }
}

@media (max-width: 600px) {
  .news-cards { grid-template-columns: 1fr; }
  .news-card-img { height: 140px; }
  .news-pagination { flex-direction: column; }
  .news-detail h1 { font-size: 22px; }
  .news-detail-body { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   9. Footer (Home)
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Clickable Cards & Modals
   --------------------------------------------------------------------------- */

.hero-card--clickable,
.about-card--clickable,
.svc-card--clickable {
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.hero-card--clickable:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.07);
}
.about-card--clickable:hover,
.svc-card--clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15,23,42,.14);
  border-color: #02A9E0;
}

.card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #02A9E0;
  margin-top: auto;
  transition: gap .2s;
}
.hero-card--clickable:hover .card-more,
.about-card--clickable:hover .card-more,
.svc-card--clickable:hover .card-more {
  gap: 10px;
}

/* Partner logos */
.partner-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.partner-card img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .7;
  transition: filter .3s, opacity .3s;
}
.partner-card:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,15,30,.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal content */
.modal-content {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,15,30,.25);
  transform: translateY(20px) scale(.97);
  transition: transform .3s;
}
.modal-overlay.active .modal-content {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: #F0F6FA;
  border-radius: 8px;
  font-size: 22px;
  color: #4A6580;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
  line-height: 1;
}
.modal-close:hover {
  background: #DC3545;
  color: #fff;
}

.modal-content h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #0A1929;
  margin: 0 0 20px;
  padding-right: 40px;
}

.modal-content p {
  font-size: 15px;
  line-height: 1.7;
  color: #4A6580;
  margin: 0 0 16px;
}
.modal-content p:last-child { margin-bottom: 0; }

.modal-content ul {
  margin: 0 0 20px;
  padding: 0 0 0 20px;
}
.modal-content ul li {
  font-size: 15px;
  line-height: 1.7;
  color: #4A6580;
  margin-bottom: 8px;
}
.modal-content ul li::marker { color: #02A9E0; }

.modal-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #F0F6FA;
  border-radius: 8px;
  margin: 16px 0;
}
.modal-contact .fa { color: #02A9E0; font-size: 18px; }
.modal-contact a { color: #0A1929; text-decoration: none; font-size: 18px; display: inline-flex; align-items: center; min-height: 44px; }
.modal-contact a:hover { color: #02A9E0; }

/* ---------------------------------------------------------------------------
   9. Footer (Home)
   --------------------------------------------------------------------------- */

.site-footer {
  background: linear-gradient(180deg, #001022, #001A33);
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.footer-accent {
  width: 100px; height: 3px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--color-brand) 15%, var(--color-brand-dark) 85%, transparent);
}
.site-footer p {
  font-size: 14px;
  color: #7A96AD;
  margin: 0;
}

/* ===========================================================================
   EURO 6 PAGE
   =========================================================================== */

.euro6-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(0,20,45,.95) 0%, rgba(0,40,80,.9) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0 48px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: all .4s cubic-bezier(.4,0,.2,1);
}
.euro6-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(2,169,224,.4) 30%, rgba(220,53,69,.3) 70%, transparent);
  opacity: 0;
  transition: opacity .4s;
}
.euro6-header.scrolled {
  background: rgba(0,15,35,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.euro6-header.scrolled::after { opacity: 1; }
.euro6-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  transition: height .4s cubic-bezier(.4,0,.2,1);
}
.euro6-header.scrolled .header-inner { height: 64px; }

.logo-area,
a.logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  transition: transform .2s;
}
a.logo-area:hover { transform: scale(1.02); }
a.logo-area:hover .logo-icon-img {
  box-shadow: 0 4px 16px rgba(2,169,224,.25);
  border-color: rgba(2,169,224,.3);
}
.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #003F72, #02A9E0);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.1);
}
.euro6-header .logo__name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.3px;
}
.euro6-header .logo__sub {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #02A9E0;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.euro6-header .logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.euro6-header .nav-desktop {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}
.euro6-header .nav-desktop a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(232,240,247,.7);
  padding: 8px 16px;
  border-radius: 8px;
  transition: color .25s, background .25s;
  position: relative;
}
.euro6-header .nav-desktop a:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.euro6-header .nav-desktop a.active {
  color: #02A9E0;
  background: rgba(2,169,224,.08);
}
.euro6-header .nav-desktop a.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: #02A9E0;
}

.euro6-header .header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.euro6-header .header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(232,240,247,.8);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: all .25s;
}
.euro6-header .header-phone:hover {
  border-color: rgba(2,169,224,.3);
  color: #fff;
}
.euro6-header .header-phone .fa {
  color: #02A9E0;
  font-size: 12px;
}

.euro6-header .nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  cursor: pointer;
  padding: 8px 7px;
  transition: border-color .2s, background .2s;
}
.euro6-header .nav-toggle:hover {
  border-color: rgba(2,169,224,.4);
  background: rgba(255,255,255,.04);
}
.euro6-header .nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: #E8F0F7;
  border-radius: 2px;
  transition: transform .3s, opacity .3s, width .3s;
}
.euro6-header .nav-toggle span:nth-child(2) { width: 14px; }

.euro6-header .mobile-nav {
  display: none;
  position: fixed;
  top: 72px; left: 0; right: 0;
  background: rgba(0,15,35,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 8px 24px 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index: 999;
}
.euro6-header .mobile-nav.open { display: block; }
.euro6-header .mobile-nav a {
  display: flex;
  align-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(232,240,247,.8);
  padding: 14px 12px;
  border-radius: 8px;
  border-bottom: none;
  transition: all .2s;
}
.euro6-header .mobile-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.04);
}
.euro6-header .mobile-nav a.active {
  color: #02A9E0;
  background: rgba(2,169,224,.06);
}

/* Euro6 Hero */
.euro6-hero {
  padding: 144px 120px 80px;
  background: linear-gradient(160deg, #001022 0%, #001A33 35%, #002B52 65%, #003F72 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.euro6-hero .hero-badge { align-self: center; }
.euro6-hero .hero-title {
  font-size: 48px;
  max-width: 900px;
}
.euro6-hero .hero-desc {
  max-width: 800px;
}

/* Discount highlight */
.discount-highlight {
  display: flex;
  align-items: center;
  gap: 24px;
}
.discount-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,63,114,.19);
}
.discount-num__val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #003F72;
  letter-spacing: -1px;
  line-height: 1;
}
.discount-num__label {
  font-size: 14px;
  font-weight: 500;
  color: #4A6580;
}

.discount-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  list-style: none;
  padding: 0; margin: 0;
}
.discount-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #E8F0F7;
}
.discount-checks li .fa {
  color: #02A9E0;
}

.euro6-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(2,169,224,.25);
  max-width: 740px;
  text-align: left;
}
.euro6-note > .fa {
  color: #02A9E0;
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}
.euro6-note p {
  font-size: 14px;
  color: #B0E0F6;
  line-height: 1.5;
  margin: 0;
}

/* Gold dividers */
.gold-divider {
  display: flex;
  justify-content: center;
  padding: 0;
  background: #fff;
}
.gold-divider .accent-line {
  background: linear-gradient(90deg, transparent, var(--color-brand) 50%, transparent);
}
.gold-divider--surface { background: #F0F6FA; }

/* Steps section */
.steps-section {
  padding: 80px 120px;
  background: #fff;
}
.steps-section .section-header {
  max-width: 1200px;
  margin: 0 auto 48px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.step-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  border-left: 3px solid #02A9E0;
  box-shadow: 0 6px 24px rgba(15,23,42,.09);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, #003F72, #02A9E0);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,63,114,.19);
}
.step-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}
.step-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #4A6580;
  margin: 0;
}
.step-card a { color: #02A9E0; text-decoration: underline; }

/* Clickable step cards */
.step-card--clickable {
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.step-card--clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15,23,42,.14);
  border-color: #02A9E0;
}
.step-card--clickable:hover .card-more { gap: 10px; }

/* Clickable req cards */
.req-card--clickable {
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.req-card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,23,42,.12);
  border-color: #02A9E0;
}
.card-arrow {
  margin-left: auto;
  color: #02A9E0 !important;
  font-size: 13px !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  line-height: normal !important;
  -webkit-text-fill-color: #02A9E0 !important;
  transition: transform .2s;
}
.req-card--clickable:hover .card-arrow { transform: translateX(4px); }

/* Locations intro text */
.locations-intro {
  max-width: 1200px;
  margin: 0 auto 28px;
  font-size: 15px;
  color: #4A6580;
  line-height: 1.6;
}

/* GPS links in table */
.gps-link {
  color: #02A9E0;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.gps-link:hover { text-decoration: underline; }

/* Modal extras */
.modal-content h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0A1929;
  margin: 20px 0 12px;
}
.modal-content ol {
  margin: 0 0 16px;
  padding: 0 0 0 20px;
}
.modal-content ol li {
  font-size: 15px;
  line-height: 1.7;
  color: #4A6580;
  margin-bottom: 6px;
}
.modal-content ol li::marker { color: #02A9E0; }

.modal-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(220,53,69,.06);
  border-radius: 8px;
  border-left: 3px solid #DC3545;
  margin: 16px 0;
}
.modal-warning .fa {
  color: #DC3545;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}
.modal-warning p {
  margin: 0 !important;
  font-size: 14px !important;
  color: #4A6580;
}

/* Locations table */
.locations-section {
  padding: 80px 120px;
  background: #F0F6FA;
}
.locations-section .section-header {
  max-width: 1200px;
  margin: 0 auto 48px;
}

.loc-table {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,63,114,.08);
  border: 1px solid #D0DEE9;
  background: #fff;
  border-collapse: separate;
  border-spacing: 0;
}
.loc-table thead th {
  background: linear-gradient(90deg, #001A33, #003F72);
  color: #E8F0F7;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 16px 24px;
  text-align: left;
  border: none;
}
.loc-table tbody td {
  padding: 16px 24px;
  font-size: 14px;
  color: #4A6580;
  border-bottom: 1px solid #D0DEE9;
  vertical-align: middle;
}
.loc-table tbody tr:last-child td { border-bottom: none; }
.loc-table tbody tr:nth-child(even) { background: #F0F6FA; }

.loc-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #0A1929;
}
.loc-name .fa { color: #02A9E0; }

.hours-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.hours-badge--24h {
  background: linear-gradient(90deg, #003F72, #02A9E0);
}
.hours-badge--limited {
  background: linear-gradient(90deg, #DC3545, #E85D6B);
}

/* Requirements section */
.requirements-section {
  padding: 64px 120px;
  background: #fff;
}
.req-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}
.req-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.req-left h2 { font-size: 32px; letter-spacing: -.5px; margin: 0; }
.req-left p { font-size: 16px; line-height: 1.6; color: #4A6580; margin: 0; }

.req-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.req-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #D0DEE9;
  box-shadow: 0 4px 16px rgba(15,23,42,.08);
  background: #fff;
}
.req-card > i.fa {
  display: block;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #E6F7FD;
  color: #02A9E0 !important;
  font-size: 16px;
  flex-shrink: 0;
  line-height: 40px !important;
  text-align: center;
  -webkit-text-fill-color: #02A9E0;
}
.req-card span {
  font-size: 15px;
  font-weight: 500;
  color: #0A1929;
}

/* CTA Section */
.cta-section {
  padding: 80px 120px;
  background: linear-gradient(160deg, #001022 0%, #001A33 35%, #002B52 65%, #003F72 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.cta-section h2 {
  font-size: 36px;
  color: #E8F0F7 !important;
  letter-spacing: -.5px;
  margin: 0;
}
.cta-section > p {
  font-size: 16px;
  color: #7A96AD;
  max-width: 600px;
  line-height: 1.5;
  margin: 0;
}
.cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.cta-contact-cards {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.cta-contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  width: 280px;
}
.cta-contact-card .fa { font-size: 20px; color: #02A9E0; }
.cta-contact-card .label { font-size: 12px; font-weight: 600; letter-spacing: 1px; color: #02A9E0; text-transform: uppercase; }
.cta-contact-card .value { font-size: 15px; font-weight: 500; color: #E8F0F7; }
.cta-contact-card .value a { color: #E8F0F7; }
.cta-contact-card .value a:hover { color: #02A9E0; }

.guide-link {
  font-size: 14px;
  color: #7A96AD;
}
.guide-link a { color: #02A9E0; text-decoration: underline; }

/* Euro6 Footer */
.euro6-footer {
  padding: 24px 120px;
  background: #fff;
  border-top: 1px solid #D0DEE9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #003F72, #02A9E0);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
}
.footer-brand-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0A1929;
}
.euro6-footer .footer-copy {
  font-size: 13px;
  color: #4A6580;
  margin: 0;
}
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 13px; font-weight: 500; color: #4A6580; }
.footer-links a:hover { color: #02A9E0; }

/* ===========================================================================
   Responsive
   =========================================================================== */

@media (max-width: 1024px) {
  .euro6-hero,
  .steps-section,
  .locations-section,
  .requirements-section,
  .cta-section { padding-left: 48px; padding-right: 48px; }
  .euro6-header { padding: 0 48px; }
  .euro6-header .header-inner { height: 72px; }
  .euro6-header .mobile-nav { padding-left: 48px; padding-right: 48px; }
  .euro6-footer { padding-left: 48px; padding-right: 48px; }

  .about-cards { grid-template-columns: 1fr 1fr; }
  .hero-top { flex-direction: column; }
  /* Once the row becomes a column, `flex: 0 1 50%` governs height instead of
     width, and nothing sizes the cross axis: every .carousel-slide is
     absolutely positioned, so the box has no in-flow content and collapsed to
     0x0 — the image vanished and left the dots stranded in empty space.
     Width has to be stated explicitly here. */
  .hero-carousel { min-width: 0; max-width: 100%; width: 100%; flex: 0 0 auto; border-radius: 14px; }
  .hero-carousel::before { border-radius: 14px; }
  .carousel-btn { width: 34px; height: 34px; font-size: 12px; opacity: 1; }
  .carousel-dots { padding: 5px 10px; }
  .contact-grid { grid-template-columns: 1fr; }
  .req-grid { grid-template-columns: 1fr; }
  .discount-highlight { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
  .site-header { padding: 0 24px; }
  .site-header .nav-desktop { display: none !important; }
  .nav-toggle { display: flex !important; }
  .header-phone { display: none; }
  .site-header .btn-cta { display: none; }
  .mobile-nav { padding: 16px 24px 24px; }

  .euro6-header { padding: 0 20px; }
  .euro6-header .header-inner { height: 64px; }
  .euro6-header.scrolled .header-inner { height: 56px; }
  .euro6-header .nav-desktop { display: none !important; }
  .euro6-header .nav-toggle { display: flex !important; }
  .euro6-header .header-phone { display: none; }
  .euro6-header .mobile-nav { top: 64px; padding: 8px 20px 20px; }
  .euro6-header .logo-icon-img { width: 34px; height: 34px; }
  .euro6-header .logo__name { font-size: 16px; }

  .hero { padding: 112px 24px 32px; min-height: auto; }
  .site-header { height: 64px; padding: 0 20px; }
  .site-header.scrolled { height: 56px; }
  .mobile-nav { top: 64px; }
  .logo-icon-img { width: 34px; height: 34px; }
  .site-header .logo-primary { font-size: 16px; }
  .hero-title { font-size: 32px !important; }
  .hero-desc { font-size: 16px; }
  .hero-cards { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline { width: 100%; justify-content: center; text-align: center; }

  .about, .services, .partners, .contact, .locations { padding: 48px 24px; }
  #locations-map { height: 320px; }
  .locations-cards { grid-template-columns: 1fr 1fr; }
  .map-legend { flex-direction: column; gap: 8px; }
  .section-header h2 { font-size: 28px; }
  .about-cards { grid-template-columns: 1fr; }
  .svc-cards { grid-template-columns: 1fr; }
  .partner-row { flex-direction: column; align-items: stretch; }
  .partner-card { text-align: center; }
  .site-footer { padding: 24px; }

  .euro6-hero { padding: 112px 24px 48px; }
  .euro6-hero .hero-title { font-size: 28px !important; }
  .steps-section, .locations-section, .requirements-section, .cta-section { padding: 48px 24px; }
  .euro6-footer { padding: 16px 24px; flex-direction: column; gap: 12px; text-align: center; }

  .grid-2 { grid-template-columns: 1fr; }
  .discount-highlight { flex-direction: column; align-items: center; }
  .discount-checks { align-items: center; text-align: center; }

  .cta-buttons { flex-direction: column; width: 100%; }
  .cta-buttons .btn-primary,
  .cta-buttons .btn-outline { width: 100%; justify-content: center; text-align: center; }
  .cta-contact-cards { flex-direction: column; align-items: center; }
  .cta-contact-card { width: 100%; }

  .steps-section .section-header h2,
  .locations-section .section-header h2 { font-size: 28px; }
  .req-left h2 { font-size: 24px; }
  .cta-section h2 { font-size: 28px; }

  .modal-content { padding: 24px; }
  .modal-content h3 { font-size: 20px; padding-right: 36px; }
}

@media (max-width: 480px) {
  .loc-table th:nth-child(3),
  .loc-table td:nth-child(3),
  .loc-table th:nth-child(5),
  .loc-table td:nth-child(5) { display: none; }
  .locations-cards { grid-template-columns: 1fr; }
  #locations-map { height: 280px; }
}

/* ---------------------------------------------------------------------------
   Interactive Nav — Sliding cursor + eco-green EURO 6
   --------------------------------------------------------------------------- */

/* -- Sliding cursor pill -------------------------------------------------- */
.nav-interactive {
  position: relative;
}

.nav-cursor {
  position: absolute;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  pointer-events: none;
  opacity: 0;
  transition: left .3s cubic-bezier(.4,0,.2,1),
              width .3s cubic-bezier(.4,0,.2,1),
              opacity .2s ease;
  z-index: 0;
  top: 50%;
  transform: translateY(-50%);
}

.nav-interactive:hover .nav-cursor {
  opacity: 1;
}

/* Override default hover bg — cursor handles it */
.nav-interactive a:hover,
.nav-interactive li a:hover {
  background: transparent !important;
}

/* Nav links above cursor */
.nav-interactive a,
.nav-interactive li a {
  position: relative;
  z-index: 1;
  transition: color .25s ease, transform .2s ease;
}

.nav-interactive a:hover,
.nav-interactive li a:hover {
  color: #fff;
  transform: translateY(-1px);
}

/* -- Eco-green accent for EURO 6 ----------------------------------------- */
:root {
  --eco-green: #22C55E;
  --eco-green-dim: rgba(34,197,94,.7);
  --eco-green-glow: rgba(34,197,94,.15);
  --eco-green-glow-strong: rgba(34,197,94,.25);
}

/* Leaf icon */
.nav-eco .fa-leaf {
  font-size: 11px;
  margin-right: 3px;
  color: var(--eco-green);
  transition: transform .4s cubic-bezier(.4,0,.2,1), color .25s;
  display: inline-block;
}

.nav-eco:hover .fa-leaf {
  transform: rotate(-15deg) scale(1.2);
  color: #4ADE80;
}

/* Desktop nav — eco link: always green pill */
.nav-desktop a.nav-eco,
.euro6-header .nav-desktop a.nav-eco,
.site-header .nav-desktop li a.nav-eco {
  color: var(--eco-green) !important;
  background: var(--eco-green-glow) !important;
  border: 1px solid rgba(34,197,94,.2);
}

.nav-desktop a.nav-eco:hover,
.euro6-header .nav-desktop a.nav-eco:hover,
.site-header .nav-desktop li a.nav-eco:hover {
  color: #fff !important;
  background: var(--eco-green-glow-strong) !important;
  border-color: rgba(34,197,94,.4);
  box-shadow: 0 0 16px rgba(34,197,94,.2);
}

/* Active eco — brighter */
.nav-desktop a.nav-eco.active,
.euro6-header .nav-desktop a.nav-eco.active,
.site-header .nav-desktop li a.nav-eco.active {
  color: #fff !important;
  background: rgba(34,197,94,.22) !important;
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 0 12px rgba(34,197,94,.15);
}

.nav-desktop a.nav-eco.active::after,
.euro6-header .nav-desktop a.nav-eco.active::after,
.site-header .nav-desktop li a.nav-eco.active::after {
  background: var(--eco-green) !important;
}

/* Eco cursor override — green pill when hovering EURO 6 */
.nav-cursor.nav-cursor--eco {
  background: var(--eco-green-glow);
  box-shadow: 0 0 20px var(--eco-green-glow), 0 0 40px rgba(34,197,94,.08);
}

/* -- Mobile nav eco styles ------------------------------------------------ */
.mobile-nav a.nav-eco {
  color: var(--eco-green);
  background: var(--eco-green-glow);
  border: 1px solid rgba(34,197,94,.15);
  border-radius: 8px;
}

.mobile-nav a.nav-eco:hover {
  color: #fff;
  background: var(--eco-green-glow-strong);
  border-color: rgba(34,197,94,.35);
}

.mobile-nav a.nav-eco.active {
  color: #fff;
  background: rgba(34,197,94,.22);
  border-color: rgba(34,197,94,.35);
}

.mobile-nav a.nav-eco .fa-leaf {
  animation: leaf-sway 3s ease-in-out infinite;
}

@keyframes leaf-sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(5deg); }
}

/* -- Eco button (Apply Now on euro6) -------------------------------------- */
.btn-eco,
a.btn-eco {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%) !important;
  box-shadow: 0 4px 14px rgba(34,197,94,.3);
}

.btn-eco:hover,
a.btn-eco:hover {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%) !important;
  box-shadow: 0 6px 24px rgba(34,197,94,.4) !important;
  transform: translateY(-2px);
}

.btn-eco .fa-leaf {
  transition: transform .3s ease;
}

.btn-eco:hover .fa-leaf {
  transform: rotate(-15deg) scale(1.15);
}