/* ========================================
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:8px;
  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;

  /* ⭐ tugev, loetav, premium */
  color:#1a1f16;

  /* subtle depth */
  text-shadow:
    0 1px 0 rgba(255,255,255,.6),
    0 20px 40px rgba(0,0,0,.08);
}

/* =================================
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;
  }
}

/* =====================================================
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{
  background:linear-gradient(
    180deg,
    #f5e6b2,
    #e2c46c 35%,
    #b8923e 70%,
    #8f6a1f
  ) !important;

  box-shadow:
    0 0 18px rgba(184,146,62,.35);
}

/* 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;
}



.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);
}


/* 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:8px;

  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:8px;
  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;
}

/* ====================================
MOBILE – REMOVE DOTS + LINE COMPLETELY
==================================== */

@media (max-width:640px){

  .vl24-service-chapters{
    padding-left:0 !important;
  }

  .vl24-service-chapters::before{
    display:none !important;
  }

  .vl24-service-chapter::before{
    display:none !important;
  }

  .vl24-process .vl24-step::before{
    display:none !important;
  }

}

.vl24-service-chapters::before{
  content:"";
  position:absolute;
  left:6px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(
    180deg,
    rgba(245,230,178,.9),
    rgba(226,196,108,.9) 30%,
    rgba(184,146,62,.95) 65%,
    rgba(143,106,31,.9)
  );

  box-shadow:
    0 0 12px rgba(184,146,62,.35),
    inset 0 0 4px rgba(0,0,0,.15);
}

.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:8px;
  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:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.vl24-services--sticky .vl24-services-nav ul{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;

  list-style:none;
  padding:0;
  margin:0;
}

/* 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
======================================== */

.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;
  }

}

/* 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 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; }

}

/* =====================================================
VL24 SERVICES — LIGHT GOLD WAVES BACKGROUND (VISIBLE)
PASTE AS LAST BLOCK
===================================================== */

.vl24-services{
  position:relative;
  isolation:isolate;
  background:#f6f7f8; /* base */
  overflow:visible;
}

/* GOLD WAVES + LIGHT GLASS WASH */
.vl24-services::before{
  content:"";
  position:absolute;
  inset:0px;              /* annab “ruumi” lainetele */
  z-index:0;
  pointer-events:none;

  background:
    /* wave 1 */
    radial-gradient(1200px 520px at 15% 10%,
      rgba(255, 214, 140, .55),
      rgba(255, 214, 140, 0) 60%),

    /* wave 2 */
    radial-gradient(900px 480px at 85% 25%,
      rgba(255, 230, 170, .35),
      rgba(255, 230, 170, 0) 62%),

    /* wave 3 */
    radial-gradient(1000px 520px at 40% 85%,
      rgba(255, 205, 120, .30),
      rgba(255, 205, 120, 0) 65%),

    /* thin gold ribbons */
    conic-gradient(from 210deg at 30% 40%,
      rgba(255, 220, 150, .18),
      rgba(255, 220, 150, 0) 35%,
      rgba(255, 210, 130, .16) 55%,
      rgba(255, 210, 130, 0) 78%,
      rgba(255, 220, 150, .14)
    ),

    /* base wash (keeps it light) */
    linear-gradient(180deg,
      rgba(255,255,255,.90),
      rgba(246,247,248,.82) 45%,
      rgba(244,246,248,.92) 100%);
  filter: blur(10px) saturate(1.05);
  opacity:1;
}

/* SUBTLE GRAIN + MICRO LINES (so it’s “visible”) */
.vl24-services::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.03) 0px,
      rgba(0,0,0,.03) 1px,
      transparent 2px,
      transparent 5px
    );
  opacity:.12;
  mix-blend-mode:multiply;
}

/* keep actual content above */
.vl24-services > *{
  position:relative;
  z-index:2;
}

/* ===== SERVICES EYEBROW — REAL GLASS PILL ===== */

.vl24-services .hero-eyebrow{
  display:inline-flex;              /* ⭐ mitte inline */
  align-items:center;
  justify-content:center;

  padding:6px 12px;
  border-radius:8px;

  background:rgba(255,255,255,.35);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,.5);

  position:relative;
  z-index:50;                       /* üle kõige */
}

.vl24-services .hero-eyebrow{
  display:inline-block;

  padding:6px 12px;
  border-radius:6px;

  background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  border:1px solid rgba(255,255,255,.7);

  box-shadow:none; /* ⭐ varju pole */
}

/* ========================================
MOBILE ONLY — REAL GOLD BORDER (WORKS 100%)
======================================== */

@media (max-width:640px){

  .vl24-services .hero-eyebrow{
border:1px solid rgba(201,162,39,0.2) !important;  }

}

/* =========================================
STICKY HEADER = SAME WIDTH AS CONTAINER
NO PHP CHANGE
========================================= */

/* imiteerime .container */
.vl24-services--sticky > .section-head{
  max-width:1200px;      /* ⭐ pane siia sama mis sinu .container max-width */
  margin:0 auto 80px;
  padding:0 20px;        /* ⭐ sama mis container horizontal padding */
}

/* title sama mis cards */
.vl24-services--sticky .section-title{
  font-family:"Outfit",sans-serif;
  font-weight:600;
  font-size:clamp(36px,4vw,56px);
  line-height:1.1;
  letter-spacing:-0.02em;
  color:#1a1f16;
  margin:0 0 16px;
}

/* text sama mis cards */
.vl24-services--sticky .section-text{
  max-width:680px;
  font-family:"Inter",sans-serif;
  font-size:18px;
  line-height:1.65;
  color:#555;
  margin:0;
}

/* eyebrow sama mis cards */
.vl24-services--sticky .hero-eyebrow{
  display:inline-block;
  padding:6px 12px;
  border-radius:6px;

  background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  border:1px solid rgba(255,255,255,.7);

  font-family:"Inter",sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#555;

  margin-bottom:18px;
}

/* =========================================
STICKY OFFSET ON TOP ONLY
========================================= */

.vl24-services--sticky{
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

.vl24-services--sticky.is-offset{
  transform:translateX(60px);
}

/* =========================================
KILL ALL NEON GREEN (FINAL HARD RESET)
========================================= */

/* remove brand primary usage */
.vl24-services-nav__btn,
.vl24-services-nav__btn.is-active,
.vl24-services-nav__btn:hover{
  outline:none !important;
  box-shadow:none !important;
}

/* remove progress neon line */
.vl24-services-nav::after{
  background:none !important;
  box-shadow:none !important;
}

/* remove neon dot glow */
.vl24-services-nav__btn::before,
.vl24-services-nav__btn.is-active::before{
  box-shadow:none !important;
  background:rgba(0,0,0,.25) !important;
}

/* remove any brand-primary borders */
.vl24-services-nav__btn{
  border-color:rgba(0,0,0,.08) !important;
}

/* override active completely */
.vl24-services-nav__btn.is-active{
  background:linear-gradient(
    135deg,
    #f5e6b2 0%,
    #e2c46c 35%,
    #b8923e 65%,
    #8f6a1f 100%
  ) !important;

  border:1px solid #8f6a1f !important;

  box-shadow:
    0 10px 25px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 4px rgba(0,0,0,.2) !important;

  color:#111 !important;
}

/* remove any outline focus neon */
.vl24-services-nav__btn:focus,
.vl24-services-nav__btn:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

/* =========================================
STICKY SERVICES — FORCE GOLD (ONLY THIS SECTION)
========================================= */

.vl24-services--sticky .vl24-service-chapter::before,
.vl24-services--sticky .vl24-process .vl24-step::before{

  background:linear-gradient(
    135deg,
    #f5e6b2 0%,
    #e2c46c 40%,
    #b8923e 70%,
    #8f6a1f 100%
  ) !important;

  color:#111 !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 4px rgba(0,0,0,.25) !important;
}

/* =========================================
GOLD METAL SHIMMER
========================================= */

.vl24-services-nav__btn.is-active{
  position:relative;
  overflow:hidden;
}

.vl24-services-nav__btn.is-active::after{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.4) 30%,
    transparent 60%
  );

  transform:translateX(-120%);
  animation:goldSweep 3.5s ease-in-out infinite;
}

@keyframes goldSweep{
  0%{ transform:translateX(-120%); }
  60%{ transform:translateX(120%); }
  100%{ transform:translateX(120%); }
}

.vl24-service-section::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(
      600px 200px at 20% 0%,
      rgba(255,214,140,.18),
      transparent 70%
    );

  opacity:.6;
}


.vl24-services--sticky .vl24-services-nav ul{
  list-style:none !important;
  padding-left:0 !important;
  margin:0 !important;
}

.vl24-services--sticky .vl24-services-nav li{
  list-style:none !important;
}



/* ========================================
MOBILE TABS — HORIZONTAL SCROLL (FINAL)
======================================== */

@media (max-width:640px){

  .vl24-services--sticky .vl24-services-nav ul{
    display:flex !important;
    flex-direction:row !important;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap !important;

    padding:4px 6px;
    scrollbar-width:none;
  }

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

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

  .vl24-services--sticky .vl24-services-nav__btn{
    width:auto !important;
    white-space:nowrap;
    border-radius:999px;
  }

}

/* ========================================
TABS BORDER RADIUS 18px
======================================== */

.vl24-services--sticky .vl24-services-nav{
  border-radius:18px !important;
}

.vl24-services--sticky .vl24-services-nav__btn{
  border-radius:18px !important;
}

/* ========================================
RESTORE NUMBERS IN STICKY MOBILE
======================================== */

@media (max-width:640px){

  .vl24-services--sticky .vl24-process .vl24-step::before{
    display:flex !important;
  }

}

/* ========================================
CENTER ALL INNER SERVICE BLOCKS (MOBILE)
======================================== */

@media (max-width:640px){

  /* detail wrapper center */
  .vl24-services-detail{
    display:flex;
    justify-content:center;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* rail center */
  .vl24-services-rail{
    width:100%;
    max-width:520px; /* ⭐ kontrolli laiust */
  }

  /* each section center */
  .vl24-service-section{
    width:100%;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* chapter blocks */
  .vl24-service-chapter{
    margin-left:auto !important;
    margin-right:auto !important;
  }

}

@media (max-width:640px){

  .vl24-services--sticky .section-title{
    font-size:24px !important;
    line-height:1.2 !important;
  }

}

/* =========================================
STICKY HEADER — MOBILE WIDTH FIX
========================================= */

@media (max-width:640px){

  .vl24-services--sticky > .section-head{
    max-width:520px !important;   /* muuda 480–600 */
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:30px !important;
    padding-right:30px !important;
  }

}

/* =========================================
TABLET PORTRAIT — MOVE HEADER RIGHT
========================================= */

@media (min-width:768px) and (max-width:1024px){

  .vl24-services--sticky > .section-head{
    padding-left:80px !important;   /* reguleeri */
    padding-right:60px !important;  /* reguleeri */
  }

}

/* ========================================
TABLET + MOBILE — HORIZONTAL TABS
======================================== */

@media (min-width:768px) and (max-width:1024px){

  .vl24-services--sticky .vl24-services-nav ul{
    display:flex !important;
    flex-direction:row !important;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap !important;

    padding:4px 6px;
    scrollbar-width:none;
  }

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

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

  .vl24-services--sticky .vl24-services-nav__btn{
    width:auto !important;
    white-space:nowrap;
    border-radius:999px;
  }

}

/* =========================================
FIX: NO PAGE HORIZONTAL SCROLL
BUT KEEP TABS (NAV UL) HORIZONTAL SCROLL
ONLY TABLET + MOBILE (<=1024)
PASTE LAST
========================================= */

@media (max-width:1024px){

  /* A) tapa ainult lehe külje overflow (safe) */
  html, body{
    max-width:100% !important;
    overflow-x:clip !important;
  }
  @supports not (overflow: clip){
    html, body{ overflow-x:hidden !important; }
  }

  /* B) ÄRA klipi kogu sektsiooni (see tappis sul tab-scrolli) */
  .vl24-services--sticky{
    overflow-x:visible !important;
    max-width:100% !important;
  }

  /* C) need elemendid peavad saama “kokku tõmbuda”, et grid ei suruks välja */
  .vl24-services--sticky .vl24-services-sticky,
  .vl24-services--sticky .vl24-services-nav,
  .vl24-services--sticky .vl24-services-detail,
  .vl24-services--sticky .vl24-services-rail{
    min-width:0 !important;
    max-width:100% !important;
  }

  /* D) TABID / KAARDIPAKI scroll peab jääma */
  .vl24-services--sticky .vl24-services-nav ul{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    max-width:100% !important;
  }

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

/* =========================================
BREADCRUMB — MOBILE WRAP
========================================= */

@media (max-width:640px){

  .vl24-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    line-height:1.4;
    font-size:14px;
  }

  .vl24-breadcrumb a,
  .vl24-breadcrumb span{
    white-space:normal;
    word-break:break-word;
  }

}

/* =========================================
SERVICES CONTENT LINKS — SAME AS BLOG
========================================= */

.vl24-services .section-text a{
  color:#caa24a;
  text-decoration:none;

  font-weight:500;

  border-bottom:1px solid rgba(202,162,74,.35);
  padding-bottom:2px;

  transition:all .25s ease;
}

.vl24-services .section-text a:hover{
  color:#e6c875;
  border-bottom:1px solid #e6c875;
}