/* ========================================
VL24 SERVICES — FIXED CLEAN LAYOUT
======================================== */

.vl24-services{
  padding:120px 0;
  background:#f6f7f8;
}

/* GRID */

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
}

@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(3,1fr);}
}

@media(max-width:640px){
  .services-grid{grid-template-columns:1fr;}
}


/* CARD */

.service-card{
  border-radius:28px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 15px 40px rgba(0,0,0,.06);
}


/* IMAGE WRAP — määrab kõrguse */

.service-image{
  position:relative;
  width:100%;
  height:420px; /* ⭐ SIIN määrad kõrguse */
  overflow:hidden;
}


/* IMAGE — täidab alati */

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


/* BUTTON */

.service-cta{
  position:absolute;
  top:16px;
  right:16px;
  z-index:5;
}


/* INFO */

.service-info{
  position:absolute;
  left:30px;
  right:30px;
  bottom:25px;

  padding:22px 28px;
  border-radius:20px;

  background:rgba(255,255,255,.75);
  backdrop-filter:blur(18px);
  text-align:center;
}


/* HOVER */

.service-image img{
  transition:.5s ease;
}

.service-card:hover .service-image img{
  transform:scale(1.05);
}

/* ===============================
FORCE FULL IMAGE — NO WHITE EDGES
=============================== */

/* card ei tohi pilti sisse lükata */
.vl24-services .service-card{
  padding:0 !important;
  overflow:hidden;
}

/* image wrapper peab täitma */
.vl24-services .service-image{
  position:relative;
  width:100%;
  height:420px;
  margin:0 !important;
  padding:0 !important;
}

/* pilt alati servani */
.vl24-services .service-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
}

/* grid itemidel pole sisemist paddingut */
.vl24-services article{
  padding:0 !important;
}

/* =================================
SERVICES TITLE — LUXURY GRADIENT
================================= */

.vl24-services .section-title{
  font-family:"Outfit",sans-serif;
  font-weight:600;

  font-size:clamp(36px,4vw,56px);
  line-height:1.1;

  letter-spacing:-0.02em;
  margin:0 0 16px;

   background:linear-gradient(
    90deg,
    #111 0%,
    #111 3%,
    #2a3a12 5%,
    var(--brand-primary) 50%,
    #2a3a12 70%,
    #111 90%
  );

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =================================
SERVICES TEXT — HERO READABILITY
================================= */

.vl24-services .section-text{
  max-width:680px;

  font-family:"Inter",sans-serif;

  font-size:18px;
  line-height:1.65;

  color:#555;

  margin:0;
}

/* mobile */

@media(max-width:768px){
  .vl24-services .section-text{
    font-size:16px;
    line-height:1.55;
  }
}

/* =================================
SERVICES EYEBROW PILL — TRANSPARENT + BLACK TEXT
(override hero defaults)
================================= */

.vl24-services .vl24-eyebrow-pill{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  border:1px solid var(--brand-primary) !important;

  padding:6px 14px !important;
  border-radius:999px !important;

  max-width:160px !important;
  overflow:hidden !important;
  margin-bottom:16px !important;
}

.vl24-services .hero-eyebrow{
  color:#111 !important;
}

.vl24-services .vl24-eyebrow-track{
  display:flex !important;
  width:max-content !important;
  white-space:nowrap !important;
}

.vl24-services--sticky{
padding:120px 0;
}

.vl24-services-sticky{
display:grid;
grid-template-columns:420px 1fr;
gap:60px;
}

.vl24-services-nav{
position:sticky;
top:140px;
align-self:start; /* ⭐ oluline */
height:max-content;
}

.vl24-services-nav ul{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:10px;
}

.vl24-services-nav__btn{
width:100%;
text-align:left;
padding:16px;
border-radius:16px;
border:0;
cursor:pointer;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.vl24-services-nav__btn.is-active{
outline:2px solid var(--brand-primary);
}

.vl24-service-panel{display:none;}
.vl24-service-panel.is-active{display:block;}

/* =====================================================
VL24 SERVICES — STICKY 2026 READING LAYOUT
Long-form service content (Notion / Linear style)
===================================================== */


/* ========= LAYOUT GRID ========= */

.vl24-services-sticky{
display:grid;
grid-template-columns:420px minmax(0,1fr);
gap:80px;
align-items:start; /* ⭐ oluline sticky jaoks */
}


/* ========= LEFT NAV ========= */

.vl24-services-nav{
  position:sticky;
  top:140px;
}

.vl24-services-nav__btn{
  width:100%;
  text-align:left;
  padding:18px 22px;
  border-radius:18px;

  background:#fff;
  border:0;
  cursor:pointer;

  font-size:15px;
  font-weight:600;

  transition:.25s ease;

  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.vl24-services-nav__btn:hover{
  transform:translateX(4px);
}

.vl24-services-nav__btn.is-active{
  outline:2px solid var(--brand-primary);
}


/* =====================================================
RIGHT SIDE — READING RAIL
===================================================== */

.vl24-services-rail{

  /* ⭐ long-form reading width */
  max-width:760px;

  /* ⭐ centered reading column */
  margin:0 auto;

  display:flex;
  flex-direction:column;

  /* ⭐ spacing between services */
  gap:140px;
}


/* ========= SINGLE SERVICE BLOCK ========= */

.vl24-service-section{
  scroll-margin-top:160px; /* hiljem JS scroll jaoks */
}


/* TITLE */

.vl24-service-title{
  font-family:"Outfit",sans-serif;
  font-size:clamp(36px,4vw,52px);
  line-height:1.1;
  margin-bottom:24px;
  letter-spacing:-0.02em;
}


/* INTRO TEXT */

.vl24-service-intro{
  font-size:20px;
  line-height:1.7;
  color:#444;

  margin-bottom:50px;
}


/* =====================================================
CHAPTERS (blocks builderist)
===================================================== */

.vl24-service-chapters{
  position:relative;
  padding-left:40px;
}

/* vertical line */
.vl24-service-chapters::before{
  content:"";
  position:absolute;
  left:10px;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(0,0,0,.08);
}

/* dot */
.vl24-service-chapter::before{
  content:"";
  position:absolute;
  left:-30px;
  top:30px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--brand-primary);
}

.vl24-service-chapter{
  padding-left:28px;
  border-left:2px solid rgba(0,0,0,.08);
}


/* chapter title */

.vl24-service-chapter h4{
  font-size:22px;
  margin-bottom:10px;
}


/* chapter text */

.vl24-chapter-text{
  font-size:18px;
  line-height:1.7;
  color:#555;
}


/* =====================================================
RESPONSIVE
===================================================== */


/* tablet */
@media(max-width:1024px){

  .vl24-services--sticky .vl24-services-sticky{
    grid-template-columns:1fr;
    gap:60px;
  }

  .vl24-services-nav{
    position:relative;
    top:auto;
  }

  .vl24-services-rail{
    max-width:100%;
  }
}


/* mobile */
@media(max-width:640px){

  .vl24-service-title{
    font-size:32px;
  }

  .vl24-service-intro{
    font-size:18px;
  }

}

/* ======================================================
ETAPP 4 — STICKY SERVICES 2026 POLISH
Nav pill + glow + progress rail + mobile pills
====================================================== */

.vl24-services--sticky{
  background:#f6f7f8;
}

.vl24-services-sticky{
  align-items:start;
}

/* ---------- LEFT NAV SURFACE ---------- */

.vl24-services-nav{
  position:sticky;
  top:120px;
  padding:18px;
  border-radius:22px;

  background:rgba(255,255,255,.65);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:0 18px 55px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);

  overflow:hidden;
}

/* progress rail inside nav (background line) */
.vl24-services-nav::before{
  content:"";
  position:absolute;
  left:22px;
  top:18px;
  bottom:18px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.10),
    rgba(0,0,0,.04)
  );
  opacity:.7;
}

/* filled progress line (height updated by JS) */
.vl24-services-nav::after{
  content:"";
  position:absolute;
  left:22px;
  top:18px;
  width:2px;
  height:var(--svc-progress, 0%);
  border-radius:999px;

  background:linear-gradient(
    180deg,
    rgba(212,225,87,.15),
    var(--brand-primary)
  );

  box-shadow:0 0 0 6px rgba(212,225,87,.10);
}

/* list layout */
.vl24-services-nav ul{
  position:relative;
  gap:10px;
}

/* ---------- NAV BUTTON 2026 ---------- */

.vl24-services-nav__btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;

  width:100%;
  padding:14px 14px 14px 30px; /* room for dot/rail */
  border-radius:16px;

  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.06);

  font-family:Inter,sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:#111;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}

/* little dot left (aligned to rail) */
.vl24-services-nav__btn::before{
  content:"";
  position:absolute;
  left:16px;
  width:8px;
  height:8px;
  border-radius:99px;
  background:rgba(0,0,0,.18);
  box-shadow:0 0 0 5px rgba(0,0,0,.04);
  transition:.25s ease;
}

.vl24-services-nav__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 45px rgba(0,0,0,.10);
  background:rgba(255,255,255,.92);
}

/* active pill */
.vl24-services-nav__btn.is-active{
  background:rgba(17,17,17,.96);
  color:#fff;
  border-color:rgba(255,255,255,.10);
  box-shadow:
    0 18px 60px rgba(0,0,0,.18),
    0 0 0 1px rgba(212,225,87,.30) inset;
  transform:translateY(-1px);
}

/* active dot glow */
.vl24-services-nav__btn.is-active::before{
  background:var(--brand-primary);
  box-shadow:
    0 0 0 6px rgba(212,225,87,.16),
    0 0 28px rgba(212,225,87,.45);
}

/* keyboard focus (accessibility) */
.vl24-services-nav__btn:focus-visible{
  outline:3px solid rgba(212,225,87,.55);
  outline-offset:3px;
}

/* ---------- RIGHT READING RAIL POLISH ---------- */

.vl24-services-detail{
  min-width:0;
}

.vl24-services-rail{
  display:flex;
  flex-direction:column;
  gap:42px;
}

.vl24-service-section{
  padding:34px 34px;
  border-radius:26px;

  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 18px 55px rgba(0,0,0,.08);

  scroll-margin-top:140px; /* important for smooth scroll + sticky header */
}

.vl24-service-title{
  margin:0 0 10px;
  font-family:Outfit,sans-serif;
  font-weight:600;
  font-size:clamp(22px, 2.2vw, 30px);
  letter-spacing:-0.02em;
  color:#111;
}

.vl24-service-intro{
  font-family:Inter,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:#3b3b3b;
  max-width:76ch;
}

.vl24-service-chapters{
  margin-top:18px;
  display:grid;
  gap:14px;
}

.vl24-service-chapter{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.05);
}

.vl24-service-chapter h4{
  margin:0 0 6px;
  font-family:Inter,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:#111;
}

.vl24-chapter-text{
  font-family:Inter,sans-serif;
  font-size:15px;
  line-height:1.75;
  color:#444;
}

/* ---------- TABLET / MOBILE LAYOUT ---------- */

@media (max-width: 1024px){
  .vl24-services-sticky{
    grid-template-columns:1fr;
    gap:22px;
  }

  /* make nav a sticky top pillbar */
  .vl24-services-nav{
    position:sticky;
    top:calc(var(--header-h, 0px) + 14px);
    z-index:10;

    padding:12px 12px;
    border-radius:18px;
  }

  /* turn list into horizontal scroll pills */
  .vl24-services-nav ul{
    display:flex;
    flex-direction:row;
    gap:10px;
    overflow:auto;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .vl24-services-nav ul::-webkit-scrollbar{ display:none; }

  .vl24-services-nav li{
    flex:0 0 auto;
  }

  .vl24-services-nav__btn{
    width:auto;
    padding:12px 14px;
    border-radius:999px;
    white-space:nowrap;
  }

  /* hide vertical rail on mobile */
  .vl24-services-nav::before,
  .vl24-services-nav::after{
    display:none;
  }
  .vl24-services-nav__btn::before{
    display:none;
  }

  .vl24-service-section{
    scroll-margin-top:160px;
    padding:26px 22px;
    border-radius:22px;
  }
}

@media (max-width: 640px){
  .vl24-services--sticky{
    padding:90px 0;
  }
  .vl24-service-intro,
  .vl24-chapter-text{
    font-size:14.5px;
  }
}


/* =====================================
REAL STICKY FIX — GRID HEIGHT
===================================== */

/* container peab venima */
.vl24-services-sticky{
align-items:start;
}

/* right side peab defineerima kõrguse */
.vl24-services-detail{
min-height:120vh; /* testiks */
}

/* grid item ei tohi venitada */
.vl24-services-nav{
align-self:start;
position:sticky;
top:140px;
}


/* =================================
STICKY FIX — scroll tagasi HTML peale
================================= */

html{
  overflow-y:auto !important;   /* html scroll */
  overflow-x:hidden !important;
  height:auto !important;
}

body{
  overflow:visible !important;  /* ⭐ body EI OLE scroll-container */
  height:auto !important;
  min-height:100% !important;
}

/* ======================================
SERVICE CARD — STRUCTURED SURFACE 2026
====================================== */

.vl24-service-section{
  background:#fff; /* vähem blur */
  backdrop-filter:none;

  border:1px solid rgba(0,0,0,.06);

  box-shadow:
    0 40px 120px rgba(0,0,0,.08);

  position:relative;
  overflow:hidden;
}

/* subtle energy edge */
.vl24-service-section::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;

  background:linear-gradient(
    180deg,
    transparent,
    var(--brand-primary),
    transparent
  );

  opacity:.7;
}

/* ======================================
SERVICE PROCESS MODULE
====================================== */

.vl24-service-process{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;

  margin:30px 0 20px;
}

/* item */
.vl24-service-step{
  padding:18px;
  border-radius:16px;

  background:#f8fafc;
  border:1px solid rgba(0,0,0,.06);

  transition:.25s;
}

/* hover lift */
.vl24-service-step:hover{
  transform:translateY(-4px);
  border-color:var(--brand-primary);
}

/* icon */
.vl24-service-step svg{
  width:28px;
  height:28px;
  margin-bottom:10px;
  color:var(--brand-primary);
}

/* title */
.vl24-service-step strong{
  display:block;
  margin-bottom:6px;
  font-size:14px;
}

/* text */
.vl24-service-step p{
  font-size:14px;
  color:#555;
}

/* ======================================
SERVICE CHAPTER FLOW
====================================== */

.vl24-service-chapters{
  position:relative;
  padding-left:28px;
}

.vl24-service-chapters::before{
  content:"";
  position:absolute;
  left:6px;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(0,0,0,.08);
}

.vl24-service-chapter{
  position:relative;
  padding:14px 18px;
}

/* dot */
.vl24-service-chapter::before{
  content:"";
  position:absolute;
  left:-22px;
  top:22px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--brand-primary);
}

.vl24-services-nav__btn.is-active{
  background:#111;
  color:#fff;

  box-shadow:
    0 20px 60px rgba(0,0,0,.25),
    0 0 0 1px var(--brand-primary) inset;
}

/* ======================================
SERVICE HERO IMAGE — CONTROLLED SIZE
====================================== */

.vl24-service-media{
  border-radius:18px;
  overflow:hidden;
  margin-bottom:26px;

  max-height:340px; /* ⭐ kontroll */
}

.vl24-service-media img{
  width:100%;
  height:340px;
  object-fit:cover;
  display:block;
}



/* ======================================
ALTERNATING SURFACE
====================================== */

.vl24-service-chapter:nth-child(even){
  background:#f8fafc;
}

.vl24-service-chapter:nth-child(odd){
  background:#fff;
}

.vl24-service-chapter{
  padding:22px 26px;
  border-radius:18px;

  border:1px solid rgba(0,0,0,.05);

  box-shadow:0 10px 30px rgba(0,0,0,.05);

  transition:.25s;
}

.vl24-service-chapter:hover{
  transform:translateY(-4px);
  box-shadow:0 25px 70px rgba(0,0,0,.12);
}

/* ======================================
SERVICE HEADER BLOCK
====================================== */

.vl24-service-title{
  font-size:clamp(28px,3vw,40px);
  margin-bottom:12px;
}

.vl24-service-intro{
  font-size:18px;
  color:#555;
  max-width:60ch;
  margin-bottom:40px;
}

.vl24-services-nav__btn.is-active{
  background:#111;
  color:#fff;

  box-shadow:
    0 20px 60px rgba(0,0,0,.25),
    0 0 0 1px var(--brand-primary) inset,
    0 0 40px rgba(212,225,87,.25);
}

.vl24-service-chapter{
  position:relative;

  padding:26px 30px; /* ⭐ breathing space */

  border-radius:18px;
  background:#fff;

  border:1px solid rgba(0,0,0,.05);

  box-shadow:0 10px 30px rgba(0,0,0,.05);

  margin-bottom:16px; /* ⭐ spacing between cards */
}

.vl24-service-chapter h4{
  margin-bottom:12px;
}

.vl24-chapter-text{
  margin-top:6px;
}

.vl24-service-title,
.vl24-service-intro{
  padding-left:24px;
}

/* INNER CONTENT CARD RIGHT SPACE */
.vl24-service-chapter{
  margin-right:24px;
}

/* =========================================
PROCESS STYLE — AUTO DETECT (WORKS ALL CARDS)
========================================= */

/* ainult chapterid kus on mitu paragraphi */
.vl24-service-chapter:has(.vl24-chapter-text p + p){

  background:linear-gradient(180deg,#fff,#f7f9fb);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 30px 90px rgba(0,0,0,.08);
}


/* reset counter per chapter */
.vl24-service-chapter:has(.vl24-chapter-text p + p) .vl24-chapter-text{
  counter-reset:step;
}


/* iga rida = step */
.vl24-service-chapter:has(.vl24-chapter-text p + p) .vl24-chapter-text p{
  counter-increment:step;

  position:relative;
  padding:18px 20px 18px 90px;
  margin:14px 0;

  background:#fff;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.05);
}


/* number */
.vl24-service-chapter:has(.vl24-chapter-text p + p) .vl24-chapter-text p::before{
  content:counter(step, decimal-leading-zero);

  position:absolute;
  left:22px;
  top:50%;
  transform:translateY(-50%);

  width:44px;
  height:44px;

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

  border-radius:12px;
  font-weight:700;
  font-size:14px;

  background:var(--brand-primary);
  color:#111;
}


/* ühendusjoon */
.vl24-service-chapter:has(.vl24-chapter-text p + p) .vl24-chapter-text p:not(:last-child)::after{
  content:"";
  position:absolute;
  left:44px;
  top:66px;
  width:2px;
  height:calc(100% + 10px);
  background:rgba(0,0,0,.08);
}

.vl24-process{
  counter-reset:step;
}

.vl24-process .vl24-step{
  position:relative;
  padding:20px 24px 20px 80px;
  margin:12px 0;

  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 10px 30px rgba(0,0,0,.04);

  counter-increment:step;
}

.vl24-process .vl24-step::before{
  content:counter(step, decimal-leading-zero);

  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);

  width:44px;
  height:44px;

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

  border-radius:12px;
  font-weight:700;
  color:#fff;

  background:var(--brand-primary);
color:#111;

box-shadow:
  0 8px 25px rgba(212,225,87,.45),
  0 0 0 6px rgba(212,225,87,.12);
}





/* =========================
VL24 REAL STACK SYSTEM
========================= */

.vl24-services-detail,
.vl24-services-rail{
  overflow:visible !important;
}

.vl24-services-rail{
  position:relative;
}

/* kaart */
.vl24-service-section{
  position:sticky;
  top:calc(100vh - var(--card-h, 600px) - 40px);
  margin-bottom:140px;

  background:#fff;
  border-radius:26px;
  box-shadow:0 25px 80px rgba(0,0,0,.1);
}

/* stacking order */
.vl24-service-section:nth-child(1){ z-index:1; }
.vl24-service-section:nth-child(2){ z-index:2; }
.vl24-service-section:nth-child(3){ z-index:3; }
.vl24-service-section:nth-child(4){ z-index:4; }
.vl24-service-section:nth-child(5){ z-index:5; }
.vl24-service-section:nth-child(6){ z-index:6; }
.vl24-service-section:nth-child(7){ z-index:7; }
.vl24-service-section:nth-child(8){ z-index:8; }

/* ========================================
VL24 SERVICES TABS — PREMIUM STYLE
======================================== */

.vl24-services-nav{
  background:#fff;
  padding:12px;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}

/* list layout */
.vl24-services-nav ul{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* button base */
.vl24-services-nav__btn{
  border:none;
  background:#f1f3f5;
  padding:14px 26px;
  border-radius:999px;

  font-weight:600;
  font-size:14px;

  transition:all .25s ease;
  cursor:pointer;
}

/* hover */
.vl24-services-nav__btn:hover{
  background:#e9ecef;
}

/* ACTIVE */
.vl24-services-nav__btn.is-active{
  background:#111;
  color:#fff;
  box-shadow:
    0 0 0 2px var(--brand-primary),
    0 10px 30px rgba(0,0,0,.2);
}

/* ========================================
MOBILE TABS — CLEAN SLIDER STYLE
======================================== */

@media(max-width:640px){

  .vl24-services-nav{
    padding:10px;
    overflow:hidden;
  }

  .vl24-services-nav ul{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:6px;

    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .vl24-services-nav ul::-webkit-scrollbar{
    display:none;
  }

  .vl24-services-nav__btn{
    flex:0 0 auto;
    padding:12px 18px;
    font-size:13px;
  }

}

.vl24-services-nav{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(16px);
}

/* =========================================
VL24 SERVICES — MOBILE + TABLET SPACING FIX
AINULT <=1024px
========================================= */

@media (max-width:1024px){

  /* ⭐ section ülemine tühjus väiksemaks */
  .vl24-services--sticky{
    padding-top:20px !important;
    padding-bottom:60px !important;
  }

  /* ⭐ hero ja nav vahe väiksem */
  .vl24-page-header + .vl24-services,
  .vl24-page-header + section{
    margin-top:-0px !important;
  }

  /* ⭐ nav all vähem tühjust */
  .vl24-services-nav{
    margin-bottom:-20px !important;
  }

}

/* =========================================
VL24 SERVICES — REAL TOP STICKY NAV
AINULT TABLET + MOBILE
========================================= */

@media (max-width:1024px){

  /* ⭐ SIIN REGULEERID KÕRGUST */
  :root{
    --vl24-tabs-top: calc(var(--header-h, 80px) + 8px);
    /* muuda 8px -> 0 / 20 / 40 jne */
  }

  .vl24-services-nav{
    position:sticky !important;
    top:var(--vl24-tabs-top) !important;
    z-index:999 !important;

    align-self:start !important;

    /* oluline et sticky töötaks */
    transform:none !important;
  }

  /* vanad override'd maha */
  .vl24-services-sticky .vl24-services-nav{
    position:sticky !important;
    top:var(--vl24-tabs-top) !important;
  }

}

/* ========================================
VL24 TABS — SAME SHAPE AS HEADER
mobile + tablet
======================================== */

@media (max-width:1024px){

  .vl24-services-nav{
    border-radius:999px !important; /* ⭐ full capsule nagu header */
    padding:8px 12px !important;

    /* optional — sama feel nagu header */
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  /* et sisu ei lõikuks */
  .vl24-services-nav ul{
    align-items:center;
  }

}

/* ========================================
MOBILE TAB HEIGHT CONTROL
muuda height väärtust
======================================== */

@media (max-width:640px){

  .vl24-services-nav{
    height:70px;   
    padding:8px 12px;
    display:flex;
    align-items:center;
  }

  .vl24-services-nav ul{
    height:100%;
    align-items:center;
  }

}

/* ========================================
FIX — REMOVE INNER GREY LAYER
MAKE WHOLE TAB BAR SAME GLASS SURFACE
ONLY MOBILE + TABLET
======================================== */

@media (max-width:1024px){

  /* OUTER pill = glass */
  .vl24-services-nav{
    background:rgba(255,255,255,.55) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;

    border:1px solid rgba(255,255,255,.4) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.12) !important;
  }

  /* REMOVE INNER GREY BUTTON SURFACE */
  .vl24-services-nav__btn{
    background:transparent !important;
    box-shadow:none !important;
    border:1px solid rgba(0,0,0,.06) !important;
  }

  /* hover without grey */
  .vl24-services-nav__btn:hover{
    background:rgba(255,255,255,.35) !important;
  }

  /* active stays black */
  .vl24-services-nav__btn.is-active{
    background:#111 !important;
    color:#fff !important;

    box-shadow:
      0 0 0 2px var(--brand-primary),
      0 10px 30px rgba(0,0,0,.25) !important;
  }

}

/* sticky section rounded bg (does NOT break sticky) */
.vl24-services--sticky{
  border-radius:60px 60px 0 0 !important;
  background:#f6f7f8 !important;
  background-clip:padding-box;
}

/* The grey section UNDER it: bottom corners 60px */
.vl24-services--sticky + section{
  border-radius:0 0 60px 60px !important;
  overflow:hidden;
}

/* push the GREY section under sticky over the footer */
.vl24-services--sticky + section{
  margin-bottom:-120px !important; /* ⭐ muuda: -60 / -100 / -160 jne */
  position:relative;
  z-index:5;
}

/* footer sits above */
.site-footer{
  position:relative;
  z-index:10;
}

/* move TOP sticky services box UP */
.vl24-services--sticky{
  margin-top:-60px !important; 
  position:relative;
  z-index:6;
}

/* ========================================
MOVE SERVICES SECTION CONTENT (NOT STICKY)
======================================== */

/* DESKTOP */
.vl24-services{
  padding-top:100px !important; /* väiksem = rohkem üles */
  padding-bottom:100px !important;
}

/* TABLET + MOBILE */
@media (max-width:1024px){
  .vl24-services{
    padding-top:60px !important; /* rohkem üles */
    padding-bottom:60px !important;
  }
}

/* ========================================
SERVICES CARDS STACK SCROLL — MOBILE ONLY
ei puutu sticky services layouti
works ainult kui grid = 1 veerg
======================================== */

@media (max-width:640px){

  /* grid spacing */
  .services-grid{
    gap:0 !important;
  }

  /* iga kaart stackib */
  .services-grid .service-card{
    position:sticky;
    top:calc(var(--header-h, 80px) + 20px); /* ⭐ header offset */

    margin-bottom:60px; /* järgmine kaart scrollimiseks */

    border-radius:26px;
    box-shadow:0 30px 80px rgba(0,0,0,.12);
  }

  /* stacking order */
  .services-grid .service-card:nth-child(1){ z-index:1; }
  .services-grid .service-card:nth-child(2){ z-index:2; }
  .services-grid .service-card:nth-child(3){ z-index:3; }
  .services-grid .service-card:nth-child(4){ z-index:4; }
  .services-grid .service-card:nth-child(5){ z-index:5; }
  .services-grid .service-card:nth-child(6){ z-index:6; }

}