/* ── CSS Variables ────────────────────────────── */
:root {
  --cream:    #f5f0ea;
  --warm-bg:  #ede8e0;
  --stone:    #9b8970;
  --taupe:    #98775e;
  --charcoal: #3a3530;
  --dark:     #1e1b18;
  --accent:   #7a9e8e;
  --accent2:  #b5956a;
  --white:    #ffffff;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', sans-serif;

  --nav-h: 72px;
  --section-pad: clamp(60px, 8vw, 110px);
}

/* ── Reset ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.75;
  font-size: 16px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── Language Switcher (visibility rules) ─────── */
[data-lang] { display: none; }
body[data-active-lang="fi"] [data-lang="fi"] { display: revert; }
body[data-active-lang="en"] [data-lang="en"] { display: revert; }
body[data-active-lang="sv"] [data-lang="sv"] { display: revert; }

span[data-lang] { display: none; }
body[data-active-lang="fi"] span[data-lang="fi"] { display: inline; }
body[data-active-lang="en"] span[data-lang="en"] { display: inline; }
body[data-active-lang="sv"] span[data-lang="sv"] { display: inline; }

/* ── Shared Button Styles ─────────────────────── */
.btn-primary {
  background: var(--accent); color: var(--white);
  padding: 14px 32px; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 2px; transition: background .2s, transform .15s;
  font-family: var(--font-body); font-weight: 400;
}
.btn-primary:hover { background: #5f8272; transform: translateY(-1px); }

.btn-ghost {
  border: 1px solid rgba(255,255,255,.5); color: var(--white);
  padding: 14px 32px; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 2px; transition: border-color .2s, background .2s;
  font-family: var(--font-body); font-weight: 400;
}
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

.btn-dark {
  display: inline-block;
  background: var(--charcoal); color: var(--white);
  padding: 13px 28px; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 2px; transition: background .2s;
}
.btn-dark:hover { background: var(--dark); }

.btn-white {
  background: var(--white); color: var(--accent);
  padding: 14px 36px; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 2px; transition: background .2s, color .2s;
  font-family: var(--font-body); font-weight: 400;
}
.btn-white:hover { background: var(--dark); color: var(--white); }

/* ── Shared Section Header ────────────────────── */
.section-header {
  text-align: center; margin-bottom: 60px;
}
.section-eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent2); margin-bottom: 14px;
}
.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 300; color: var(--dark);
}
.section-header p {
  color: var(--taupe); max-width: 560px; margin: 16px auto 0;
  font-size: 15px;
}

/* ── Fade-in Animations ───────────────────────── */
.fade-in {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }