/* =========================================
   CONTACT PAGE — UUSARENDUS PREMIUM 2026
   targets: .contact-hero + .contact-map
========================================= */

:root{
  --c-glass: rgba(255,255,255,.12);
  --c-glass-2: rgba(255,255,255,.18);
  --c-border: rgba(255,255,255,.22);
  --c-text: rgba(255,255,255,.92);
  --c-soft: rgba(255,255,255,.70);

  --c-gold: #c9a15a;
  --c-gold-2:#fff3c9;

  --c-shadow:
    0 28px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.14);
}

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

/* overlay: sobita taustapildi tooniga (tumedam + soe) */
.hero.contact-hero .hero-overlay{
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at 35% 15%, rgba(255,190,110,.16), transparent 55%),
    radial-gradient(circle at 70% 35%, rgba(201,161,90,.14), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.68), rgba(2,6,23,.78) 45%, rgba(2,6,23,.88));

  z-index:0;
}

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

/* eyebrow */
.contact-hero .hero-eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.28em;
  text-transform:uppercase;

  background: linear-gradient(120deg, var(--c-gold), var(--c-gold-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  margin-bottom:12px;
}

/* 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%);

  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 HERO OVERLAY — CINEMATIC MATCH
========================= */

.hero.contact-hero .hero-overlay{
  position:absolute;
  inset:0;

  /* sama loogika mis hero cinematicul */
  background:
    radial-gradient(circle at 30% 20%, rgba(255,185,90,.12), transparent 60%),
    radial-gradient(circle at 70% 40%, rgba(255,185,90,.08), transparent 60%),

    /* ainult kerge kontrast */
    linear-gradient(
      180deg,
      rgba(0,0,0,.18),
      rgba(0,0,0,.32)
    );

  z-index:0;
}

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

/* =====================================
   CONTACT HERO — FORCE HEIGHT
   (pane contact.css lõppu)
===================================== */

/* Desktop */
.hero.contact-hero{
  min-height: 100vh !important;
  height: 100vh !important;
}

/* Mobile true fullscreen (nagu cinematic) */
@media (max-width:768px){
  .hero.contact-hero{
    min-height: 100svh !important;
    height: 100svh !important;

    /* fallback */
    min-height: 100vh !important;
    height: 100vh !important;
  }
}

/* =====================================
   CONTACT HERO — 1screen BG + extra content below
   (pane contact.css kõige lõppu)
===================================== */

.hero.contact-hero{
  /* sektsioon võib kasvada */
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;

}


/* overlay ainult 1 ekraan (mitte terve pikkus) */
.hero.contact-hero .hero-overlay{
  height:100vh;
}



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

/* =====================================
VL24 GOLD BUTTON — SAME AS APARTMENT PAGE
===================================== */

.btn-gold{
  width:100%;
  min-height:52px;

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

  border-radius:999px;
  border:0;

  font-size:14px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:#0f172a;

  background: linear-gradient(
    180deg,
    #e7c98a,
    #cfa968
  );

  cursor:pointer;

  /* oluline glow */
  box-shadow:
    0 30px 70px rgba(0,0,0,.45),
    0 0 60px rgba(230,185,110,.35),
    inset 0 1px 0 rgba(255,255,255,.65);

  transition:.25s ease;
}

/* hover */
.btn-gold:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);

  box-shadow:
    0 40px 90px rgba(0,0,0,.55),
    0 0 80px rgba(230,185,110,.45),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* =========================================
   CONTACT HERO LAYOUT — VL24 PRO
   vasak laiem + parem form
========================================= */

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


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

/* nupp ei joonista nurkades üle */
.btn-gold{
  display:block;
}

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

/* button ei tohi joonistada overflow */
.btn-gold{
  border-radius:999px;
  background-clip:padding-box;
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}

.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 — EYEBROW = SAME AS CTA BUTTON
======================================== */

.contact-hero .hero-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 18px;

  border-radius:999px;

  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;

  /* ⭐ sama tekstivärv nagu nupul */
  color:#0f172a;

  /* ⭐ sama gradient nagu CTA */
  background:linear-gradient(
    135deg,
    var(--c-gold),
    var(--c-gold-2),
    var(--c-gold)
  );

  border:0;

  box-shadow:
    0 8px 22px rgba(201,161,90,.35),
    inset 0 1px 0 rgba(255,255,255,.6);

  margin-bottom:18px;
}

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

@media (max-width:768px){

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

}

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

}