.container{
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

.section{
  padding:var(--space-xl) 0;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-lg);
}

.site-header--overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: transparent;
}

.site-header{
  background: transparent;
}

.site-header a,
.site-header .site-logo{
  color: #fff;
}

/* =========================
   HEADER – OVERLAY
========================= */

.site-header--overlay{
  position: absolute;
  top: 0;
  left: 0;
}

.header-inner{
  height: 88px;                
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo{
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

.site-nav{
  display: flex;
  gap: 32px;
}

.site-nav a{
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.site-nav a:hover{
  opacity: .8;
}

.site-logo{
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .5px;
}

.site-logo .logo-main{
  color: #fff;
}

.site-logo .logo-accent{
  color: var(--color-accent);
  margin-left: 2px;
}

/* ============================================================
   HEADER NAV – MODERN INTERACTION
============================================================ */

.site-nav a{
  position: relative;
  padding: 6px 2px;
  font-size: 15px;
  font-weight: 500;

  color: #fff;
  text-decoration: none;

  transition:
    color .85s ease,
    transform .85s ease;
}

/* subtle scale + color */
.site-nav a:hover{
  color: var(--color-accent);
  transform: scale(1.04);
}

/* underline */
.site-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;

  width:100%;
  height:2px;
  background: linear-gradient(
    90deg,
    var(--color-accent),
    #fff
  );

  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

/* underline hover */
.site-nav a:hover::after{
  transform: scaleX(1);
}

/* ACTIVE PAGE */
.site-nav a.current-menu-item,
.site-nav a.current-page-ancestor{
  color: var(--color-accent);
}

.site-nav a.current-menu-item::after,
.site-nav a.current-page-ancestor::after{
  transform: scaleX(1);
}

.site-nav .nav-cta{
  margin-left: 8px;
  font-weight: 600;
}

.site-nav .nav-cta::after{
  height: 3px;
}

/* ============================================================
   NAV MENU – NUCLEAR RESET (KILLS BULLETS FOR REAL)
============================================================ */

.site-nav ul,
.site-nav li{
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* tapab ::marker KÕIKIDES brauserites */
.site-nav li::marker{
  content: "" !important;
}

/* tapab KÕIK pseudo-elemendid, mis võivad täppi teha */
.site-nav li::before{
  content: none !important;
}

/* oluline – eemaldab list-item käitumise */
.site-nav li{
  display: block !important;
}

/* horisontaalne rida */
.site-nav ul{
  display: flex !important;
  gap: 32px;
}



.site-header.is-scrolled{
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(12px);
}

.nav-toggle{
  display: none;
  width: 42px;
  height: 42px;
  background: none;
  border: 0;
  cursor: pointer;

  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.nav-toggle span{
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  transition: transform .35s ease, opacity .35s ease;
}

@media (max-width: 900px){
  .site-nav{ display: none; }
  .nav-toggle{ display: flex; }
}

.mobile-menu{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.75);
  backdrop-filter: blur(18px);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 999;
}

.mobile-menu.is-open{
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-links{
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.mobile-menu-links li{
  margin: 18px 0;
}

.mobile-menu-links a{
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: color .3s ease;
}

.mobile-menu-links a:hover{
  color: var(--color-accent);
}

.site-header.site-header--overlay.is-scrolled{
  background: rgba(15,23,42,.65);
  backdrop-filter: blur(12px);
}

/* =========================================
   FIX: HEADER BACKGROUND (ALATI) + SCROLL
   + FIX: OVERLAP EI TOHI LÕIGATUD SAADA
========================================= */

/* 1) HEADER alati õrn taust (ka enne scrolli) */
.site-header.site-header--overlay{
  position: fixed !important;        /* ära lase absolute overlay'l mängida */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5000 !important;

  background: rgba(15,23,42,.28) !important;  /* ALATI taust */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(2px);

  transition: background .25s ease, backdrop-filter .25s ease;
}

/* 2) scrollides tugevam */
.site-header.site-header--overlay.is-scrolled{
  background: rgba(73, 74, 75, 0.68) !important;
}

/* 3) MOBILE MENU peab jääma headerist allapoole (et mitte segada) */
.mobile-menu{
  z-index: 4000 !important;
}

/* 4) Overlap plokk PEAB jääma hero peale nähtavaks */
.services-overlap{
  position: relative;
  z-index: 50; /* suurem kui hero */
}

section.services,
.services-overlap{
  position: relative;
  z-index: 10;
}

/* =========================
   HERO – SERVICES (FIX)
========================= */

.hero-services{
  height: auto;
  min-height: 100vh;
  padding-bottom: 180px; /* 👈 RUUM OVERLAPILE */
}