/* =========================================
VL24 PAGE HEADER — FINAL (SIDEBAR AWARE)
========================================= */

.vl24-page-header{
  position:relative;
  height:360px; /* desktop */
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:flex-end;
}

/* BG */
.vl24-page-header__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:1;
}

/* overlay */
.vl24-page-header .hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
}

/* INNER */
.vl24-page-header__inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:1280px;

  /* ⭐ SEE ON OLULINE */
  margin-left:calc(var(--sb-width) + 20px);

  padding:0 24px 30px;
}

/* GRID */
.vl24-page-header__grid{
  display:grid;
  grid-template-columns:1fr 480px;
  gap:80px;
  align-items:end;
}

.vl24-ph-left{
  max-width:none;
  width:100%;
}

/* RIGHT */
.vl24-ph-right{
  font-size:20px;
  line-height:1.7;
  opacity:.9;
  align-self:end;
}

/* =========================
TABLET
========================= */

@media (max-width:1024px){

  .vl24-page-header{
    height:300px;
  }

  .vl24-page-header__grid{
    grid-template-columns:1fr;
  }

  .vl24-ph-right{
    display:none;
  }

  .vl24-page-header__inner{
    margin-left:calc(var(--sb-width) - 20px);
  }

}

/* =========================
PAGE HEADER TITLE SIZE
========================= */

.vl24-page-header .hero-title{ 
  font-size:clamp(28px, 4vw, 56px) !important;
}

/* PAGE HEADER TITLE — SINGLE LINE */
.vl24-page-header .hero-title{
  white-space:nowrap;
}

/* BREADCRUMB LINK CLEAN */
.vl24-breadcrumb a{
  color:#fff !important;
  text-decoration:none !important;
  border:none !important;
}

.vl24-breadcrumb a:hover{
  color:#fff !important;
  text-decoration:none !important;
}

/* =================================
VL24 BREADCRUMB — LUXURY PILL STYLE
================================= */

.vl24-breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:8px 18px;
  border-radius:999px;

  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  border:1px solid rgba(201,161,90,.25);

  font-size:13px;
  letter-spacing:.08em;

  color:rgba(255,255,255,.85);
}

/* link */
.vl24-breadcrumb a{
  color:#c9a15a !important;
  text-decoration:none !important;
  border:none !important;
  transition:.2s ease;
}

.vl24-breadcrumb a:hover{
  color:#e7c27a !important;
}

.vl24-breadcrumb .vl24-breadcrumb__sep{
  color:rgba(201,161,90,.6);
  margin:0 6px;
}

.vl24-breadcrumb .vl24-breadcrumb__current{
  color:rgba(255,255,255,.95);
  margin:0;
}

/* subtle glow effect */
.vl24-breadcrumb{
  box-shadow:
    0 0 20px rgba(201,161,90,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* =================================
PAGE HEADER TABLET SPACING FIX
================================= */

@media (max-width:1024px){

  .vl24-page-header__inner{
    padding-left:40px !important;
    padding-right:60px !important; /* ⭐ rohkem ruumi paremal */
  }

  .vl24-breadcrumb{
    max-width:85%;
  }

}

/* =================================
PAGE HEADER — TITLE + BREAD TIGHTER
================================= */

.vl24-page-header .hero-title{
  margin-bottom:8px !important;   /* enne oli ~8px või rohkem */
}

.vl24-page-header .vl24-breadcrumb{
  margin-top:0 !important;
}

/* =================================
RESPONSIVE BREADCRUMB PILL
================================= */

.vl24-breadcrumb{
  display:inline-flex;
  align-items:center;

  padding:clamp(6px, 1vw, 12px) clamp(14px, 2vw, 26px);
  border-radius:999px;

  font-size:clamp(12px, 1.2vw, 15px);

  max-width:100%;
  width:auto;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================================
TOP OFFSET (scrollY=0) — PAGE HEADER + STICKY
========================================= */

/* smooth */
.vl24-page-header__inner,
.vl24-services--sticky{
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* =========================================
TOP OFFSET (scrollY=0) — PAGE HEADER + STICKY
========================================= */

@media (min-width:1025px){

  body.vl24-top-offset .vl24-page-header__inner,
  body.vl24-top-offset .vl24-services--sticky{
    transform: translateX(80px);
  }

}


/* accessibility */
@media (prefers-reduced-motion: reduce){
  .vl24-page-header__inner,
  .vl24-services--sticky{
    transition: none;
  }
}

/* =========================================
VL24 STICKY — TRUE METAL GOLD SYSTEM
Full redesign. No neon. No green.
========================================= */

/* GOLD SYSTEM */
:root{
  --gold-1:#d4af37;
  --gold-2:#f0d27a;
  --gold-3:#a67c00;
  --gold-dark:#8c6a00;
  --gold-edge:rgba(212,175,55,.45);
  --gold-soft:rgba(212,175,55,.18);
}

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

.vl24-services-nav{
  background:linear-gradient(160deg,#f7f5ee,#ede7d7);
  border:1px solid rgba(0,0,0,.05);
  border-radius:18px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
}

/* remove ALL old glow */
.vl24-services-nav::before,
.vl24-services-nav::after{
  display:none !important;
}

/* =========================================
NAV BUTTON BASE
========================================= */

.vl24-services-nav__btn{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.05);
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  font-weight:600;
  transition:all .35s ease;
}

/* remove neon dot */
.vl24-services-nav__btn::before{
  display:none !important;
}

/* =========================================
HOVER (SUBTLE)
========================================= */

.vl24-services-nav__btn:hover{
  border-color:var(--gold-1);
  box-shadow:
    0 10px 30px var(--gold-soft);
}

/* =========================================
ACTIVE — REAL METAL LOOK
========================================= */

.vl24-services-nav__btn.is-active{

  background:
    linear-gradient(145deg,
      var(--gold-2) 0%,
      var(--gold-1) 40%,
      var(--gold-3) 100%
    );

  border:1px solid var(--gold-dark);

  color:#111;

  box-shadow:
    0 12px 30px rgba(0,0,0,.15),
    inset 0 2px 4px rgba(255,255,255,.6),
    inset 0 -3px 6px rgba(0,0,0,.15);

  position:relative;
}

/* METAL EDGE LINE */
.vl24-services-nav__btn.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  border:1px solid var(--gold-edge);
  pointer-events:none;
}

/* =========================================
RIGHT SERVICE CARD
========================================= */

.vl24-service-section{
  border-radius:18px;
  background:linear-gradient(160deg,#ffffff,#f6f3ea);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:
    0 30px 80px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* remove old neon accent */
.vl24-service-section::before{
  display:none !important;
}

/* =========================================
CHAPTER CARDS
========================================= */

.vl24-service-chapter{
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 10px 25px rgba(0,0,0,.05);
  transition:.3s ease;
}

.vl24-service-chapter:hover{
  border-color:var(--gold-1);
  box-shadow:0 18px 45px var(--gold-soft);
}

/* =========================================
PROCESS NUMBERS — GOLD METAL
========================================= */

.vl24-process .vl24-step::before{
  background:
    linear-gradient(145deg,
      var(--gold-2),
      var(--gold-1) 50%,
      var(--gold-3)
    );

  color:#111;

  box-shadow:
    0 6px 20px var(--gold-soft),
    inset 0 2px 4px rgba(255,255,255,.7),
    inset 0 -2px 5px rgba(0,0,0,.2);
}

/* =================================
PAGE HEADER TITLE WRAP — MOBILE
================================= */

@media (max-width:640px){

  .vl24-page-header .hero-title{
    white-space:normal;
    line-height:1.1;
  }

}



/* =================================
PAGE HEADER H1 FIX
================================= */

.vl24-page-header h1.hero-title{
  font-size:clamp(28px, 4vw, 56px) !important;
  font-weight:700;
  line-height:1.1;
  margin:0;

  white-space:normal;        
  word-break:break-word;     
  max-width:100%;
}

/* =================================
MOBILE HEADER SCALE FIX
================================= */

@media (max-width:1024px){

  .vl24-page-header__inner{
    padding-left:40px !important;
    padding-right:60px !important; /* ⭐ rohkem ruumi paremal */
  }

  .vl24-breadcrumb{
    max-width:85%;
  }

}

/* =================================
MOBILE PAGE HEADER — REAL FIX
================================= */

@media (max-width:640px){

  .vl24-page-header{
    height:300px;
  }

  .vl24-page-header__inner{
    margin-left:60px !important;
    padding:0 16px 18px !important;
    max-width:100% !important;
    width:100% !important;
  }

  .vl24-page-header__grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .vl24-ph-left{
    max-width:100% !important;
    width:100% !important;
    min-width:0 !important;
  }

  .vl24-page-header h1.hero-title,
  .vl24-page-header .hero-title{
    font-size:24px !important;
    line-height:1.05 !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    max-width:100% !important;
    margin:0 0 8px 0 !important;
  }

  .vl24-breadcrumb{
    display:inline-flex !important;
    max-width:100% !important;
    width:auto !important;
    font-size:11px !important;
    line-height:1.2 !important;
    padding:6px 12px !important;
    gap:6px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

}