:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#000000;
  --muted:#222222;
  --line:rgba(0,0,0,.14);

  /* Button accent */
  --accent:#2BEDF3;
  --accent-hover:#a45ca5;
  --accent-soft:rgba(4,178,226,.14);

  /* Card styling */
  --radius:16px;
  --shadow:0 18px 44px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55;
}

a{color:inherit;text-decoration:none}

/* Layout */
.container{width:min(1120px, calc(100% - 32px));margin:0 auto}
.section{padding:42px 0}

.grid-2{display:grid;grid-template-columns:repeat(2, 1fr);gap:14px}
@media (max-width: 900px){.grid-2{grid-template-columns:1fr}}

/* Components */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

.notice{font-size:.9rem;color:var(--muted)}

/* Buttons */
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
}
.cta:hover{background:var(--accent-hover)}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  background:#fff;
  color:#000;
  border:1px solid var(--line);
}
.btn-ghost:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}

/* Forms */
.form{display:grid;gap:10px;margin-top:12px}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--text);
}
textarea.input{min-height:120px;resize:vertical}

/* =========================================================
   HERO (full viewport) + stacking layers
   ========================================================= */

.hero{
  position:relative;
  width:100%;
  height:100dvh;          /* modern */
  min-height:100vh;       /* fallback */
  overflow:hidden;
  display:flex;
  align-items:flex-end;   /* footer alareunaan */
}

/* Background image layer */
.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;       /* vaihda contain/cover jos haluat täyttää */
  background-position:center;
  background-repeat:no-repeat;
  opacity:1;
  transition:opacity 700ms ease;
  transform:scale(1.02);
}

/* Overlay layer */
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.06) 55%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
}

/* Hero footer overlay area */
.hero__footer{
  position:relative;
  z-index:2;
  width:100%;
  padding:18px 0 22px;
}

/* Footer card on top of hero */
.heroFooterCard{
  position:relative;
  z-index:3;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.001),
    rgba(255,255,255,.30)
  );
  border:0px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

.heroFooterCard .contactForm{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:6px;
}

/* Inputs keep sensible size */
.heroFooterCard .contactForm .input{
  min-width:160px;
  max-height:44px;
  padding:10px 12px;
}

/* Field widths */
.heroFooterCard .contactForm input[name="name"]{  flex:0 0 180px; max-height:44px;}
.heroFooterCard .contactForm input[name="email"]{ flex:0 0 240px; max-height:44px;}
.heroFooterCard .contactForm input[name="phone"]{ flex:0 0 170px; max-height:44px;}

/* Message always full width (prevents jumping) */
.heroFooterCard .contactForm textarea{
  flex:0 0 460px;
  max-width:100%;
  max-height:44px;
  min-height:44px;
  resize:none;
}

/* Button on its own row (not full width on desktop) */
.heroFooterCard .contactForm .cta{
  flex:0 0 auto;
  min-width:180px;
}

/* Force button + status to next row */
.heroFooterCard .contactForm .cta,
.heroFooterCard .contactForm #formStatus{
  flex-basis:100%;
}

/* Mobile: stack everything */
@media (max-width: 900px){
  .hero__footer .contactForm{
    flex-direction:column !important;
    align-items:center !important;
  }
  .hero__footer .contactForm .input,
  .hero__footer .contactForm textarea{
    max-width:520px !important;
  }
  .hero__footer .contactForm .cta{
    max-width:260px !important;
  }
}