/* =========================
   HERO BASE
========================= */

.hero.contact-hero{
  position:relative;
  padding: calc(var(--header-h, 0px) + 26px) 0 70px;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  overflow:hidden;

  /* ⭐ SIIN MUUDAD NURKI */
  border-radius:60px 60px 0px 0px;
}


/* subtle grain */
.hero.contact-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index:1;
}

/* content wrapper (sul juba .hero-content olemas) */
.hero.contact-hero .hero-content{
  position:relative; /* overwrite cinematic absolute if needed */
  left:auto; right:auto; bottom:auto;
  z-index:2;
  padding: 0;
}

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

.contact-hero-layout{
  display:grid;
  grid-template-columns: minmax(420px, 520px) minmax(420px, 1fr);
  gap:34px;
  align-items:start;
}

/* =========================
   LEFT: INFO
========================= */

.contact-hero-info{
  position:relative;
  padding: 0;
}

.contact-info-head{
  max-width:520px;
  margin-bottom:18px;
  position:relative;
}

/* gold underline like apt list header */
.contact-info-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-18px;
  width:120px;
  height:2px;
  background:linear-gradient(90deg, var(--c-gold), var(--c-gold-2), transparent);
  opacity:.7;
}


/* title uses your .hero-title DNA, only nudge for contact */
.contact-hero .hero-title{
  font-size: clamp(42px, 5.4vw, 84px);
  line-height: .82;
  margin: 0 0 6px;
}

/* cards grid */
.contact-info-cards{
  margin-top:36px;
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

/* card */
.contact-info-card{
  position:relative;
  display:flex;
  gap:16px;
  align-items:flex-start;

  padding:16px 18px;

  border-radius:20px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));

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

  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);

  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);

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

.contact-info-card:hover{
  transform: translateY(-3px);
  border-color: rgba(201,161,90,.45);
  box-shadow:
    0 26px 75px rgba(0,0,0,.48),
    0 0 40px rgba(201,161,90,.18),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* icon bubble */
.contact-info-icon{
  flex:0 0 46px;
  width:46px;
  height:46px;
  border-radius:999px;

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

  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));

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

  box-shadow:
    0 12px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.contact-info-icon svg{
  width:22px;
  height:22px;
  color: rgba(255,255,255,.92);
}

/* body */
.contact-info-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.contact-info-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(255,255,255,.70);
}

.contact-info-value{
  font-size:16px;
  font-weight:700;
  color: rgba(255,255,255,.94);
  line-height:1.25;

  word-break:break-word;
}

a.contact-info-value{
  text-decoration:none;
  color: rgba(255,255,255,.95);
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:2px;
  width: fit-content;
  transition:.22s;
}

a.contact-info-value:hover{
  color: var(--c-gold-2);
  border-color: rgba(201,161,90,.55);
}

.contact-info-sub{
  font-size:13px;
  font-weight:600;
  color: rgba(255,255,255,.72);
  opacity:.95;
}

/* =========================
   RIGHT: FORM
========================= */

.contact-hero-form{
  position:relative;
}

/* lead text */
.contact-hero-form .hero-text{
  margin: 0 0 14px;
  max-width: 560px;

  font-size:16px;
  line-height:1.6;
  font-weight:600;

  color: rgba(255,255,255,.82);

  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* form card */
.contact-form-card{
  position:relative;

  border-radius:26px;
  padding:22px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));

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

  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);

  box-shadow: var(--c-shadow);

  overflow:hidden;
}

/* soft gold halo */
.contact-form-card::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    radial-gradient(circle at 40% 0%, rgba(201,161,90,.22), transparent 58%);
  z-index:0;
}

.contact-form{
  position:relative;
  z-index:2;
}

/* grid */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}

/* inputs */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
  width:100%;

  padding:14px 14px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);

  background: rgba(2,6,23,.35);
  color: rgba(255,255,255,.94);

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

  outline:none;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

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

.contact-form textarea{
  min-height:150px;
  resize: vertical;
  padding:14px 14px;
}

/* placeholders */
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color: rgba(255,255,255,.55);
  font-weight:600;
}

/* focus */
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(201,161,90,.75);
  box-shadow:
    0 0 0 3px rgba(201,161,90,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
  background: rgba(2,6,23,.42);
}

/* =========================
   CTA BUTTON (match hero DNA)
========================= */

.contact-form .btn.btn-primary.btn-cta{
  width:100%;
  min-height:54px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  border-radius:999px;

  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;

  color:#0f172a;

  background:
    linear-gradient(135deg, var(--c-gold), var(--c-gold-2), var(--c-gold));

  border:0;

  cursor:pointer;

  box-shadow:
    0 10px 28px rgba(201,161,90,.38),
    inset 0 1px 0 rgba(255,255,255,.55);

  position:relative;
  overflow:hidden;
  isolation:isolate;

  transition: transform .22s ease, filter .22s ease;
}

/* text layers */
.contact-form .btn-cta .btn-text,
.contact-form .btn-cta .btn-arrow{
  position:relative;
  z-index:2;
}

.contact-form .btn-cta .btn-arrow{
  font-size:18px;
  transform: translateY(-1px);
}

/* hover glow layer */
.contact-form .btn-cta::before{
  content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.28),
    rgba(255,255,255,.10)
  );

  transform: scale(0);
  transform-origin: var(--mx,50%) var(--my,50%);

  transition: transform 1.9s cubic-bezier(.2,.7,.1,1);
  border-radius:inherit;
  z-index:1;
}

.contact-form .btn-cta:hover::before{
  transform: scale(2.4);
}

.contact-form .btn-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* =========================
   MAP SECTION
========================= */

.contact-map{
  position:relative;
  padding: 60px 0 90px;

  background:
    radial-gradient(circle at 50% 0%, rgba(201,161,90,.10), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #020617 100%);

  border-radius:0 0 60px 60px;
  overflow:hidden;
}

/* container-like width (sul layout.css container olemas, aga map on fullwidth) */
.contact-map-split{
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--site-pad);

  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

.contact-map-col{
  position:relative;
  border-radius:26px;
  overflow:hidden;

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

  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 26px 80px rgba(0,0,0,.55);
}

/* golden halo */
.contact-map-col::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(201,161,90,.20), transparent 62%);
  pointer-events:none;
}

.contact-map iframe{
  width:100%;
  height:420px;
  border:0;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}

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

@media (max-width: 980px){

  .contact-hero-layout{
    grid-template-columns: 1fr;
    gap:22px;
  }

  .contact-info-head::after{
    bottom:-16px;
  }

  .contact-info-cards{
    grid-template-columns: 1fr;
  }

  .contact-grid{
    grid-template-columns: 1fr;
  }

  .contact-map-split{
    grid-template-columns: 1fr;
  }

  .contact-map iframe{
    height:360px;
  }
}

@media (max-width: 560px){

  .contact-form-card{
    padding:18px;
    border-radius:22px;
  }

  .contact-info-card{
    padding:14px 14px;
    border-radius:18px;
  }

  .contact-info-icon{
    width:42px;
    height:42px;
    flex-basis:42px;
  }

  .contact-hero .hero-title{
    line-height: .86;
  }
}

/* =========================
   OPTIONAL: cursor-glow origin for buttons
   (if you already do this globally, skip)
========================= */

.contact-form .btn-cta{
  --mx: 50%;
  --my: 50%;
}

/* =====================================
CONTACT HERO TITLE → HERO STYLE
===================================== */

.contact-title,
.contact-hero h1,
.contact-hero .title{

  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
  text-transform:uppercase;

  color: rgba(255,255,255,.96);

  text-shadow:
    0 2px 4px rgba(0,0,0,0.55),
    0 6px 14px rgba(0,0,0,0.45),
    0 12px 28px rgba(0,0,0,0.35),
    0 0 1px rgba(0,0,0,0.9);
}

.contact-inner{
  display:flex;
  align-items:flex-start; /* oluline */
}


/* =====================================
CONTACT — PRO SPACING SYSTEM
===================================== */

/* kogu vasak blokk */
.contact-hero-info{
  display:flex;
  flex-direction:column;
}

/* pealkiri wrapper */
.contact-info-head{
  margin-bottom:28px !important; /* enne 18px → liiga väike */
}

/* kuldjoone ja kaartide vahe */
.contact-info-head::after{
  bottom:-24px;
}

/* cards kaugemale */
.contact-info-cards{
  margin-top:26px;
}





/* sujuv üleminek pildilt “edasi” taustale */
.hero.contact-hero .contact-hero-fade{
  position:absolute;
  left:0; right:0;
  top: calc(100vh - 180px);
  height: 180px;

  background: linear-gradient(
    to bottom,
    rgba(11,18,32,0),
    rgba(11,18,32,1) 70%,
    rgba(2,6,23,1)
  );

  pointer-events:none;
  z-index:2;
}

/* content alati peal */
.hero.contact-hero .hero-content{ position:relative; z-index:3; }

/* =====================================
CONTACT LEAD TEXT (formi kohal)
===================================== */

.contact-hero-form .hero-text{

  font-size: clamp(18px, 1.6vw, 22px); /* suurem */
  line-height: 1.45;

  font-weight: 500;

  color: rgba(255,255,255,.92);

  margin-bottom: 28px; /* rohkem õhku */

  max-width: 520px;

  text-shadow:
    0 2px 12px rgba(0,0,0,.35);
}


/* =========================================
   LEFT SIDE — INFO
========================================= */

.contact-hero-info{
  max-width:720px;
}

/* pealkiri spacing */
.contact-info-head{
  margin-bottom:40px;
}


/* =========================================
   CONTACT CARDS — 2tk kõrvuti
========================================= */

.contact-info-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

/* card full width */
.contact-info-card{
  width:100%;
}


/* =========================================
   RIGHT SIDE — FORM
========================================= */

.contact-hero-form{
  max-width:560px;
  width:100%;
}


/* intro text paremaks */
.contact-hero-form .hero-text{
  font-size:18px;
  line-height:1.6;
  margin-bottom:24px;
  opacity:.9;
}


/* =========================================
   FORM GRID (inputs 2tk kõrvuti)
========================================= */

.contact-form .contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}


/* textarea full width */
.contact-form textarea{
  width:100%;
  margin-top:16px;
}


/* =========================================
   MOBILE FIX
========================================= */

@media(max-width:900px){

  .contact-hero-layout{
    grid-template-columns:1fr;
    gap:50px;
  }

  .contact-info-cards{
    grid-template-columns:1fr;
  }

  .contact-form .contact-grid{
    grid-template-columns:1fr;
  }

}

/* =================================
   CONTACT FORM — SPACE TEXTAREA → BUTTON
================================= */

.contact-form textarea{
  margin-bottom:24px; /* ⭐ suurenda/vähenda siit */
}

/* =================================
   CONTACT FORM HEADER — FINAL
================================= */

.contact-form-header{
  position:relative;

  font-size:18px;
  line-height:1.6;
  font-weight:500;

  margin-bottom:32px;
  padding-bottom:20px;

  /* ⭐ sama hele toon nagu lehel */
  color:rgba(255,255,255,.92);
}

/* ⭐ sama gold line nagu su teisel pildil */
/* =================================
   CONTACT FORM HEADER — GOLD LINE FIX
   vasak solid → parem fade
================================= */

.contact-form-header::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;

  width:80px;
  height:2px;

  background:linear-gradient(
    90deg,
    var(--c-gold) 0%,        /* ⭐ solid algus */
    var(--c-gold-2) 55%,     /* kuld */
    rgba(201,161,90,0) 100%  /* fade paremale */
  );
}

/* kõik glass kastid lõikavad sisu */
.contact-form-card{
  overflow:hidden;
  border-radius:24px;
}


/* =================================
   GLASS CORNER FIX — REAL SOLUTION
================================= */

/* lõikab blur + tausta täpselt nurga järgi */
.contact-form-card{
  overflow:hidden;
  border-radius:24px;

  /* oluline */
  background-clip:padding-box;
}

/* vormi inner element ei tohi joonistada nurkadest välja */
.contact-form{
  background:transparent !important;
}


.contact-form-card{
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}

/* =================================
   BUTTON CORNER BACKGROUND FIX
================================= */

/* nuppu ümbritsev form lõikab kõik */
.contact-form{
  overflow:hidden;
}

/* nupp ise ei tohi leakida */
.contact-form .btn,
.contact-form .btn-cta,
.contact-form .btn-primary{

  border-radius:999px;
  overflow:hidden;

  /* väga oluline */
  transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}


/* =====================================
   CONTACT HERO — MOBILE TOP SPACING FIX
===================================== */



/* ========================================
   HERO TITLE — SPACING CONTROL
======================================== */

.contact-hero .hero-title{

  /* ⭐ RIDADE VAHE (SUURIM MÕJU) */
  line-height:0.95; /* 1.0–1.4 */

  /* ⭐ TÄHTEDE VAHE */
  letter-spacing:-0.05em; /* -0.02 kuni 0.05 */

  /* ⭐ kui tahad kontrollida murdumist */
  max-width:12ch;

  /* optional */
  margin-bottom:24px;

}

/* ========================================
VL24 CONTACT — LIGHT PREMIUM 2026
matches services design system
======================================== */


/* =========================
SECTION BASE (light like services)
========================= */

.contact-hero{
  background:#f6f7f8;
  padding:120px 0;
}


/* eemaldame hero tumeda overlay */
.contact-hero .hero-overlay{
  display:none;
}


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

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

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


/* =========================
TITLE — same hero font
========================= */

.contact-hero .hero-title{
  color:#111;
  margin-bottom:20px;
}


/* =========================
INFO CARDS — SERVICES STYLE
========================= */

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

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

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

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


/* icon bubble */

.contact-info-icon{
  width:46px;
  height:46px;
  border-radius:999px;

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

  background:#f1f3f5;
  color:#111;
}


/* text */

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

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

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


/* =========================
FORM CARD — SERVICES STYLE
========================= */

.contact-form-card{
  background:#fff;
  border-radius:28px;
  padding:36px;

  box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.contact-form-header{
  font-size:18px;
  line-height:1.6;
  margin-bottom:28px;
  color:#444;
}


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

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:16px;

  border-radius:14px;
  border:1px solid #e5e7eb;

  background:#fafafa;
  font-size:15px;

  transition:.2s ease;
}

.contact-form textarea{
  min-height:160px;
  margin-top:16px;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--brand-primary);
  background:#fff;
  outline:none;
}


/* grid */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

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


/* =========================
BUTTON — VL24 SYSTEM
========================= */

.contact-form .btn{
  margin-top:20px;
}


/* =========================
MAP — LIGHT VERSION
========================= */

.contact-map{
  padding:80px 0;
  background:#fff;
}

.contact-map iframe{
  width:100%;
  height:420px;
  border:0;
  border-radius:24px;
}

/* =====================================
VL24 CONTACT — LIGHT SURFACE FIX
===================================== */

.contact-hero{
  background:#f6f7f8 !important;
  color:#111 !important;
}

/* overlay välja */
.contact-hero .hero-overlay{
  display:none !important;
}

/* =================================
CONTACT EYEBROW — MUST TEKST
================================= */

.contact-hero .vl24-eyebrow-pill .hero-eyebrow{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  background:none !important;
}

/* =====================================================
CONTACT — VL24 LIGHT PREMIUM SYSTEM (FINAL)
matches hero + services + brand green
===================================================== */


/* =========================
SECTION BACKGROUND
========================= */

.hero.contact-hero{
  background:#f6f7f8 !important;

  /* ⭐ NIHUTAB ÜLEMISE SEKTSIOONI PEALE */
  margin-top:-60px; /* muuda väärtust */
  position:relative;
  z-index:5;
}
/* =========================
CONTACT INFO CARDS
========================= */

.contact-info-card{
  background:#fff !important;
  border-radius:26px;

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

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

  transition:.25s ease;
}

/* hover = premium lift */
.contact-info-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 25px 70px rgba(0,0,0,.08),
    0 0 0 1px var(--brand-primary);
}


/* icon bubble */

.contact-info-icon{
  background:#f3f4f6 !important;
  border:0;
  box-shadow:none;
}

.contact-info-icon svg{
  color:#111 !important;
}


/* text colors */

.contact-info-label{
  color:#777 !important;
}

.contact-info-value{
  color:#111 !important;
}

.contact-info-sub{
  color:#666 !important;
}


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

.contact-form-card{
  background:#fff !important;

  border-radius:32px;
  padding:36px;

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

  box-shadow:
    0 30px 90px rgba(0,0,0,.08);
}


/* remove old gold glow + overlays */

.contact-form-card::before{
  display:none !important;
}


/* =========================
FORM TEXT
========================= */

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


/* =========================
INPUTS — VL24 STYLE
========================= */

.contact-form input,
.contact-form textarea{

  background:#f3f4f6 !important;
  border:1px solid transparent !important;

  color:#111 !important;

  border-radius:14px;

  font-weight:600;

  transition:.2s ease;
}


/* placeholder */

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


/* focus = brand green */

.contact-form input:focus,
.contact-form textarea:focus{

  background:#fff !important;

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

  box-shadow:
    0 0 0 4px rgba(212,225,87,.18);

}


/* textarea */

.contact-form textarea{
  min-height:160px;
}


/* =========================
GRID SPACING
========================= */

.contact-grid{
  gap:18px !important;
}


/* =========================
MAP SECTION LIGHT
========================= */

.contact-map{
  background:#f6f7f8 !important;
}

.contact-map-col{
  border-radius:26px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.contact-map-col::after{
  display:none;
}

/* =====================================
CONTACT MAP → FOOTER OVERLAP
===================================== */

.contact-map{
  margin-bottom:-120px; /* reguleeri */
  position:relative;
  z-index:5;
}

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

/* =====================================
CONTACT → MAP VAHE FIX
===================================== */

/* vähenda hero alumist ruumi */
.hero.contact-hero{
  padding-bottom:0px !important; /* enne 70px+ */
}

/* vähenda map ülemist ruumi */
.contact-map{
  padding-top:0px !important; /* enne 60px */
}

/* =====================================
CONTACT MAP — FULL WIDTH EDGE TO EDGE
===================================== */

/* section ilma paddinguta */
.contact-map{
  padding:0 !important;
}

/* eemaldab container piirangud */
.contact-map-split{
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  width:100vw;
}

/* map kolonnid servani */
.contact-map-col{
  border-radius:0 !important;
}

/* iframe täidab täielikult */
.contact-map iframe{
  width:100%;
  height:520px; /* muuda kõrgust kui vaja */
}

/* =====================================
CONTACT MAP — ONE BLOCK / NO RADIUS
===================================== */

/* eemaldab vahe mapide vahel */
.contact-map-split{
  gap:0 !important;
}

/* eemaldab mõlema map containeri nurgad */
.contact-map-col{
  border-radius:0 !important;
  border:none !important;
  box-shadow:none !important;
}

/* eemaldab iframe nurgad ka */
.contact-map iframe{
  border-radius:0 !important;
}

/* =====================================
CONTACT → MAP GAP HARD FIX
===================================== */

/* hero alumine ruum */
.hero.contact-hero{
  padding-bottom:0 !important;
}

/* map liigub üles hero alla */
.contact-map{
  margin-top:-80px; /* ← muuda: -40px kuni -140px */
}

/* =====================================
CONTACT MOBILE LAYOUT FIX — HERO HEIGHT
===================================== */

@media (max-width:1024px){

  .hero.contact-hero{
    height:auto !important;
    min-height:auto !important;
  }

}

/* =====================================
CONTACT MOBILE — REMOVE OVERLAPS
===================================== */


@media (max-width:1024px){

  .hero.contact-hero{
    padding-top:120px !important;
    padding-bottom:60px !important;
  }

}

/* =====================================
CONTACT MOBILE/TABLET — HARD FIX
ei puutu desktopi
===================================== */

@media (max-width:1024px){

  /* section käitub normaalselt */
  .hero.contact-hero{
    height:auto !important;
    min-height:auto !important;

    margin-top:0 !important;
    transform:none !important;

    padding-top:120px !important;
    padding-bottom:60px !important;

    position:relative !important;
  }

  /* cinematic hero absolute fix */
  .hero.contact-hero .hero-content{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    bottom:auto !important;
  }

  /* layout stacking */
  .contact-hero-layout{
    grid-template-columns:1fr !important;
    gap:40px !important;
  }

  /* kaardid 1 veerg */
  .contact-info-cards{
    grid-template-columns:1fr !important;
  }

  /* input grid 1 veerg */
  .contact-grid{
    grid-template-columns:1fr !important;
  }

  /* map ei overlay */
  .contact-map{
    margin-top:0 
  }

}

/* mobile + tablet sama behaviour */
@media (max-width:1024px){
  .hero.contact-hero{
    margin-top:-60px !important;
    padding-top: calc(var(--header-h, 80px) + 40px) !important;
  }

  .contact-map{
    margin-top:-60px !important;
  }
}

/* =====================================
CONTACT MOBILE/TABLET — REAL POSITION FIX
content starts inside section
===================================== */

@media (max-width:1024px){


  /* kui header variable ei tööta */
  .site-header + .hero.contact-hero{
    padding-top:120px !important;
  }

  /* cinematic absolute fix */
  .hero.contact-hero .hero-content{
    position:relative !important;
    top:auto !important;
    transform:none !important;
  }

}

@media (max-width:1024px){
  .hero.contact-hero{
    padding-top: calc(var(--header-h, 60px) + 0px) !important;
  }
}

/* =====================================
CONTACT LAYOUT FIX
desktop + tablet = 2 veergu
mobile = 1 veerg
===================================== */

/* DESKTOP + TABLET */
.contact-hero-layout{
  grid-template-columns: 1.1fr 1fr !important;
}

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

  .contact-hero-layout{
    grid-template-columns:1fr !important;
  }

}

/* =====================================
CONTACT — TIGHT SPACING FIX (MOBILE/TABLET)
eyebrow üles + vähem õhku
===================================== */

@media (max-width:1024px){

  /* HERO üldine kõrgus väiksem */
  .hero.contact-hero{
    padding-top: calc(var(--header-h, 60px) + 0px) !important;
    padding-bottom:100px !important;
  }

  /* kogu layout lähemale */
  .contact-hero-layout{
    gap:18px !important;
  }

  /* eyebrow + title blokk */
  .contact-info-head{
    margin-bottom:10px !important;
  }

  /* kuld joon lähemale */
  .contact-info-head::after{
    bottom:-8px !important;
  }

  /* kaardid kohe järgi */
  .contact-info-cards{
    margin-top:12px !important;
    gap:12px !important;
  }

}

/* =====================================
CONTACT ICONS → SAME COLOR AS BUTTON
===================================== */

/* icon circle bg */
.contact-info-icon{
  background: var(--brand-primary) !important;
}

/* svg icon ise */
.contact-info-icon svg{
  color:#111 !important; /* sama nagu nupu noolel */
}

/* =====================================
CONTACT — MOVE EYEBROW HIGHER (REAL FIX)
===================================== */

@media(max-width:1024px){

 
  .hero.contact-hero{
    padding-top: calc(var(--header-h, 0px) - 40px) !important;
  }

}


.hero.contact-hero,
.contact-hero{
  padding-top: calc(var(--header-h, 0px) + 80px) !important; /* ⭐ muuda 80px */
  padding-bottom: 70px !important;
}

/* MOVE CONTACT HERO CONTENT HIGHER — SAME AS QUOTE */
.hero.contact-hero{
  padding-top:40px !important; /* muuda väärtust */
}

/* CONTACT HERO — FORCE CONTENT INTO NORMAL FLOW (so padding works) */
.hero.contact-hero .hero-content{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  transform:none !important;
}

/* MOVE GOOGLE MAP DOWN — FINAL FIX */
.contact-map{
  margin-top:0px !important; /* ⭐ muuda väärtust */
}

/* ==================================================
CONTACT HERO — CONTENT NUDGE (SAFE)
Liigutab AINULT sisu (eyebrow, title, cards, form)
================================================== */

.hero.contact-hero{
  /* ära lase mingitel vanadel transformidel sektsiooni ennast liigutada */
  transform:none !important;
}

/* 1) SIIN reguleerid üles/alla (negatiivne = üles) */
.hero.contact-hero .hero-content{
  --contact-shift: 60px; /* ⭐ MUUDA: -60px üles / +20px alla */
  transform: translateY(var(--contact-shift)) !important;
}

/* kui sul kuskil on seatud hero-content transformi animatsiooniga, siis kasuta layouti */
.hero.contact-hero .contact-hero-layout{
  transform: none !important;
}

/* MOBILE/TABLET eraldi väärtus */
@media (max-width:1024px){
  .hero.contact-hero .hero-content{
    --contact-shift: 0px; /* ⭐ MUUDA */
  }
}

/* =========================================
CONTACT EMPLOYEES — VL24 PREMIUM CARD
========================================= */

.contact-employees{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:28px; /* 1 kaart real */
}

/* kaart */
.contact-employee-card{

  display:flex;
  align-items:stretch;

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

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

  box-shadow:0 18px 50px rgba(0,0,0,.07);

  overflow:hidden;

  transition:.3s ease;
}

.contact-employee-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.09),
    0 0 0 1px var(--brand-primary);
}


/* =========================
IMAGE (vasakul, servast servani)
========================= */

.contact-employee-card .employee-image{
  flex:0 0 260px;
  aspect-ratio:1/1; /* teeb ruudu */
}

.contact-employee-card .employee-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* =========================
RIGHT SIDE CONTENT
========================= */

.contact-employee-card .employee-body{
  padding:34px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  flex:1;
}


/* nimi */

.employee-name{
  font-size:22px;
  font-weight:700;
  color:#111;
}


/* amet */

.employee-role{
  font-size:14px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--brand-primary);
  font-weight:700;
}


/* kirjeldus */

.employee-text{
  font-size:15px;
  line-height:1.6;
  color:#555;
  max-width:520px;
}


/* kontaktid */

.employee-contacts{
  margin-top:10px;
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}

.employee-contacts a{
  font-weight:600;
  text-decoration:none;
  color:#111;
  border-bottom:1px solid rgba(0,0,0,.15);
  padding-bottom:2px;
  transition:.2s ease;
}

.employee-contacts a:hover{
  color:var(--brand-primary);
  border-color:var(--brand-primary);
}


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

@media(max-width:900px){

  .contact-employee-card{
    flex-direction:column;
  }

  .contact-employee-card .employee-image{
    width:100%;
    height:320px;
  }

  .contact-employee-card .employee-body{
    padding:28px;
  }

}

.contact-employee-card{
  align-items:flex-start; /* ära venita */
}

.contact-employee-card .employee-image{
  height:240px; /* sama mis min-height */
}

/* HERO → MAP vahe */
.hero.contact-hero{
  padding-bottom:120px !important; /* muuda 40–140px */
}

.contact-employee-card .employee-image img{
  object-fit: cover;
  object-position: center 30%; /* või center 30% */
}