/* =========================================
VL24 QUOTE HERO — SAME AS CONTACT
========================================= */

/* =========================
SECTION BASE
========================= */

.hero.quote-hero{
  background:#f6f7f8;
  padding:0px 0;
  margin-top:0px;
  position:relative;
  z-index:5;
}

.quote-hero .hero-overlay{
  display:none;
}

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

.quote-hero .contact-hero-layout{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:start;
}

@media(max-width:900px){
  .quote-hero .contact-hero-layout{
    grid-template-columns:1fr;
    gap:50px;
  }
}

/* =========================
TITLE
========================= */

.quote-hero .hero-title{
  color:#111;
  margin-bottom:20px;
  line-height:.95;
  letter-spacing:-0.05em;
}

/* =========================
INFO CARDS
========================= */

.quote-hero .contact-info-cards{
  margin-top:40px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

@media(max-width:900px){
.quote-hero .contact-info-cards{grid-template-columns:1fr;}
}

.quote-hero .contact-info-card{
  display:flex;
  gap:16px;
  padding:22px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 15px 40px rgba(0,0,0,.06);
  transition:.3s ease;
}

.quote-hero .contact-info-card:hover{
  transform:translateY(-3px);
  box-shadow:0 25px 60px rgba(0,0,0,.08);
}



.quote-hero .contact-info-icon{
  width:46px;
  height:46px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
 
}

.quote-hero .contact-info-icon{

  background:var(--vl24-gold-metal);

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

  box-shadow: none;

}

.quote-hero .contact-info-label{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#777;
}

.quote-hero .contact-info-value{
  font-size:18px;
  font-weight:600;
  color:#111;
}

.quote-hero .contact-info-sub{
  font-size:14px;
  color:#666;
}

/* =========================
FORM CARD
========================= */

.quote-hero .contact-form-card{
  background:#fff;
  border-radius:32px;
  padding:36px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 30px 90px rgba(0,0,0,.08);
}

.quote-hero .contact-form-header{
  color:#555;
  font-size:18px;
  margin-bottom:28px;
}

/* =========================
FORM INPUTS
========================= */

.quote-hero .contact-form input,
.quote-hero .contact-form textarea,
.quote-hero .contact-form select{

  width:100%;
  padding:16px;
  border-radius:14px;
  border:1px solid transparent;
  background:#f3f4f6;
  color:#111;
  font-weight:600;
}

.quote-hero .contact-form input::placeholder,
.quote-hero .contact-form textarea::placeholder{
  color:#999;
}

.quote-hero .contact-form input:focus,
.quote-hero .contact-form textarea:focus,
.quote-hero .contact-form select:focus{
  background:#fff;
border:1px solid var(--gold-3);
box-shadow:
  0 0 0 3px rgba(184,146,62,.25);
  outline:none;
}

.quote-hero .contact-form-card:hover{

  border-color:rgba(184,146,62,.45);

  box-shadow:
    0 30px 90px rgba(0,0,0,.08),
    0 0 0 1px rgba(184,146,62,.45);

}
/* =========================
FORM GRID
========================= */

.quote-hero .contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

@media(max-width:900px){
.quote-hero .contact-grid{grid-template-columns:1fr;}
}

/* =========================
TEXTAREA
========================= */

.quote-hero .contact-form textarea{
  min-height:160px;
  margin:0px 0 18px 0;
}

/* =========================
UPLOAD
========================= */

.quote-hero .file-upload{
  margin-bottom:20px;
}

.quote-hero .file-label{
  display:flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  font-weight:600;
}

/* =========================
BUTTON
========================= */

.quote-hero .btn-cta{
  width:100%;
  min-height:56px;
}

/* =====================================
QUOTE HERO — BOTTOM RADIUS + FOOTER OVERLAP
===================================== */

.hero.quote-hero{

  border-radius:0; /* alumised nurgad */

  margin-bottom:0px; /* liigub footerile peale */
  position:relative;
  z-index:5;

  overflow:hidden; /* lõikab bg õigesti */
}

/* footer jääb peale */
.site-footer{
  position:relative;
  z-index:10;
}

/* =====================================
QUOTE HERO — FORCE CONTENT INSIDE SECTION
(overrides hero base/cinematic absolute rules)
===================================== */

/* 1) hero ei ole fixed-height/overflow bug */
.hero.quote-hero{
  min-height:auto !important;
  height:auto !important;
}

/* 2) hero-content tagasi normaalsesse flow'sse */
.hero.quote-hero .hero-content{
  position:relative !important;
  inset:auto !important;   /* nullib top/right/bottom/left */
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  transform:none !important;
  padding:0 !important;    /* võtame core padding maha */
  margin:0 !important;
  z-index:2;
}


/* =================================
QUOTE HERO — SAME H2 AS GALLERY
================================= */

.quote-hero h2,
.quote-hero .hero-title{

  font-family:"Outfit",sans-serif;
  font-weight:600;

  font-size:clamp(36px,4vw,56px) !important;
  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;

  animation:none !important;
}

/* =================================
VL24 FILE UPLOAD — GLOBAL STYLE
================================= */

.vl24-file input{
  display:none;
}

.vl24-file-btn{

  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:30px;
  padding:18px 20px;

  border-radius:16px;

  background:#f3f4f6;
  border:1px dashed rgba(0,0,0,.12);

  cursor:pointer;
  transition:.25s;

  font-weight:600;
}

.vl24-file-btn:hover{
  background:#fff;
  border-color:var(--gold-3);

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

.vl24-file-icon{
  font-size:18px;
}

/* =========================================
QUOTE — FIX BOTTOM GAP (TABLET + MOBILE)
transform creates fake empty space -> use margin instead
========================================= */

@media (max-width:1024px){

  /* 1) ära kasuta transformi (tekitab tühja ala alla) */
  .hero.quote-hero .contact-hero-layout{
    transform:none !important;

    /* 2) päris nihutus üles (mõjub layoutile) */
    margin-top:-10px !important;  /* muuda -10px kuni -40px */

    /* 3) vähem tühja ruumi alla */
    padding-bottom:20px !important; /* 0–20px */
  }

  /* kui tahad veel vähem “tausta õhku” sektsiooni all */
  .hero.quote-hero{
    padding-bottom:40px !important; /* enne 120px */
  }
}

/* MOVE QUOTE CONTENT HIGHER — REAL FIX */
.hero.quote-hero{
  padding-top:40px !important; /* enne 120px */
}

/* MOVE QUOTE CONTENT HIGHER — MOBILE + TABLET ONLY */
@media (max-width:1024px){

  .hero.quote-hero{
    padding-top:50px !important; /* muuda väärtust */
  }

}

/* =========================================
QUOTE HERO — TOP ALIGN FIX (desktop + tablet)
vasak ja parem algavad samalt realt
========================================= */

.quote-hero .contact-hero-layout{
  align-items:flex-start !important;
}

.quote-hero .contact-info-cards{
  margin-top:0 !important;     /* ← see oli süüdlane */
}

.quote-hero .contact-hero-form,
.quote-hero .contact-form-card{
  margin-top:0 !important;
}

.quote-hero .contact-hero-form .hero-text{
  margin-top:0 !important;
}

.quote-hero .container{
  padding-left:20px; 
  padding-right:20px;  /* ← muuda väärtust */
}

/* MOBILE */
@media (max-width:768px){

  .hero.quote-hero .container{
    padding-left:30px;   /* muuda */
    padding-right:20px;  /* soovitatav */
  }

}

/* PROJECT / SERVICE FULL WIDTH */

.quote-hero .contact-grid select[name="service"]{
  grid-column:1 / -1;
}

/* FORM ELEMENT SPACING */

.quote-hero .contact-form select,
.quote-hero .contact-form textarea{
  margin-bottom:18px;
}

/* =========================================
QUOTE HERO OFFSET — SAME AS CONTACT
========================================= */

.hero.quote-hero .contact-hero-layout{
  margin-left:0 !important;
  transition: margin-left .45s cubic-bezier(.22,.61,.36,1) !important;
}

.hero.quote-hero.is-offset .contact-hero-layout{
  margin-left:100px !important;
}

/* tablet */
@media (max-width:1024px){
  .hero.quote-hero.is-offset .contact-hero-layout{
    margin-left:80px !important;
  }
}

/* mobile */
@media (max-width:640px){
  .hero.quote-hero.is-offset .contact-hero-layout{
    margin-left:60px !important;
  }
}

/* =========================================
QUOTE FORM — FULL WIDTH ONLY TABLET
========================================= */

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

  .quote-hero .contact-hero-form,
  .quote-hero .contact-form-card{
    width:100% !important;
    max-width:none !important;
  }

}

/* =========================
VL24 FORM STATUS
========================= */

.k24-form-status{
  margin-bottom:22px;
}

/* BASE */

.k24-form-success,
.k24-form-error{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;

  padding:16px 18px;

  border-radius:14px;

  font-size:15px;
  line-height:1.5;

  backdrop-filter:blur(6px);
}

/* ICON */

.k24-form-success::before,
.k24-form-error::before{
  content:"";
  flex:0 0 28px;

  width:28px;
  height:28px;

  border-radius:50%;

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

  font-size:16px;
  font-weight:700;
}

/* SUCCESS */

.k24-form-success{

  background:
  linear-gradient(
    180deg,
    rgba(30,30,30,.85),
    rgba(15,15,15,.9)
  );

  border:1px solid rgba(212,175,55,.35);

  color:#fff;

  box-shadow:
  0 10px 30px rgba(0,0,0,.5),
  inset 0 0 0 1px rgba(255,255,255,.04);
}

.k24-form-success::before{

  content:"✓";

  background:linear-gradient(135deg,#d4af37,#f5d06a);

  color:#000;

}

/* ERROR */

.k24-form-error{

  background:
  linear-gradient(
    180deg,
    rgba(30,30,30,.85),
    rgba(15,15,15,.9)
  );

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

  color:#fff;
}

.k24-form-error::before{

  content:"!";

  background:#ff5c5c;
  color:#fff;

}

/* TEXT */

.k24-form-success,
.k24-form-error{
  font-weight:500;
}

/* SMALL ANIMATION */

.k24-form-success,
.k24-form-error{

  animation:vl24FormMsg .35s ease;

}

@keyframes vl24FormMsg{

  from{
    opacity:0;
    transform:translateY(-6px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}