/* Säädettävät muuttujat (voit muokata) */
:root{
  --hero-img-darken:0.25;
  --h1-size:48px;
  --h2-size:28px;
  --gold: #b79257;
  --footer-text: #aaaaaa;
  --services-bg: #111111;
  --services-card-bg: #161616;
  --hero-grad-top: #4c4a48;
  --hero-grad-bottom: #000000;
  --hero-card-bg: #151515;
  --hero-card-padding-y: 50px;
  --hero-card-padding-x: 36px;
  --container-max: 1100px;
  --container-percent: 92%;
  --header-padding: 24px;
  --divider-height: 50px;
  --divider-slope: 75%;
  --btn-radius: 9px;
  --base-font-size:16px;
  --base-line-height:1.65;
}

/* Koukut muuttujille – nämä ohjaavat ulkoasua */
body{ font-size:var(--base-font-size); line-height:var(--base-line-height) }
.btn{ border-radius:var(--btn-radius) }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:#111 }
.services{ background:var(--services-bg) }
.services .card{ background:var(--services-card-bg) }
.site-footer p{ color:var(--footer-text) }
.hero-left{ background:linear-gradient(180deg, var(--hero-grad-top), var(--hero-grad-bottom)) }
.hero-card{ background:var(--hero-card-bg); padding:var(--hero-card-padding-y) var(--hero-card-padding-x) }
.container{ width:min(var(--container-max), var(--container-percent)) }
.site-header .container{ padding-left:var(--header-padding); padding-right:var(--header-padding) }
.hero::after{ height:var(--divider-height); clip-path: polygon(0 var(--divider-slope), 100% 0, 100% 100%, 0 100%) }


/* heading size overrides */
h1{ font-size: var(--h1-size) !important; }
h2{ font-size: var(--h2-size) !important; }

/* hero image darken overlay */
.hero-right{ position:relative }
.hero-right::before{
  content:''; position:absolute; inset:0; background:#000; opacity:var(--hero-img-darken); pointer-events:none;
}