/* Saksa Tamm – styles.css
   Fonts: place these files in /fonts (optional but recommended):
   - PlayfairDisplay-Regular.ttf
   - Roboto-Regular.ttf
*/

@font-face{
  font-family: "SaksaPlayfair";
  src: url("../fonts/PlayfairDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "SaksaRoboto";
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --st-ink: #0e1111;
  --st-ink-2: #1a1f1f;
  --st-paper: #ffffff;
  --st-mist: #f4f6f7;
  --st-border: rgba(14,17,17,.10);
  --st-accent: #2b6f5a;         /* subtle nordic green */
  --st-accent-2: #1f4f41;
  --st-gold: #b08d57;           /* quiet premium accent */
  --st-shadow: 0 18px 40px rgba(0,0,0,.12);
}

html, body{ height:100%; }
body{
  color: var(--st-ink);
  background: var(--st-paper);
  font-family: "SaksaRoboto", "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height: 1.55;
}

h1,h2,h3,h4,h5,h6{
  font-family: "SaksaPlayfair", "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: .2px;
}

a{ color: inherit; }
a:hover{ color: var(--st-accent); }

/* Navbar */
.navbar{
  backdrop-filter: blur(10px);
}
.navbar-dark.bg-dark{
  background: rgba(14,17,17,.92) !important;
}
.navbar .navbar-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family: "SaksaPlayfair", "Playfair Display", Georgia, serif;
  letter-spacing: .3px;
}
.brand-logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
}
.navbar-nav .nav-link{
  font-family: "SaksaRoboto", "Roboto", system-ui, sans-serif;
  opacity: .92;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover{
  opacity: 1;
}

/* Hero */
.hero{
  position: relative;
  min-height: 72vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background: #0f1414;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(14,17,17,.90) 0%, rgba(14,17,17,.62) 45%, rgba(14,17,17,.45) 100%),
    url("../images/hero.jpg") center 35% /cover no-repeat;
  transform: scale(1.02);
}

@media (min-width: 992px){
  .hero::before{
    background:
      linear-gradient(90deg, rgba(14,17,17,.90) 0%, rgba(14,17,17,.62) 45%, rgba(14,17,17,.45) 100%),
      url("../images/hero.jpg") center 20% / cover no-repeat;
  }
}

.hero .container{
  position: relative;
  z-index: 2;
  padding-top: 5.5rem;
  padding-bottom: 4.5rem;
}
.hero-badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  margin-bottom: 1.25rem;
  font-size: .95rem;
}
.hero-badge .dot{
  width: .55rem; height: .55rem;
  border-radius: 999px;
  background: var(--st-gold);
  box-shadow: 0 0 0 3px rgba(176,141,87,.18);
}
.hero h1{
  color: #fff;
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: .75rem;
}
.hero p.lead{
  color: rgba(255,255,255,.88);
  max-width: 42rem;
  font-size: 1.15rem;
  margin-bottom: 1.6rem;
}
.hero-cta{
  display:flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items:center;
}


.btn-st{
  border-radius: 999px;
  padding: .75rem 1.15rem;
  font-weight: 600;
  letter-spacing: .2px;
}
.btn-st-primary{
  background: var(--st-accent);
  border-color: var(--st-accent);
  color:#fff !important;
}
.btn-st-primary:hover{
  background: var(--st-accent-2);
  border-color: var(--st-accent-2);
}
.btn-st-outline{
  border: 1px solid rgba(255,255,255,.35);
  color:#fff !important;
}
.btn-st-outline:hover{
  border-color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.08);
}

/* Sections */
.section{
  padding: 4.25rem 0;
}
.section-muted{
  background: var(--st-mist);
}
.section-title{
  font-size: clamp(1.6rem, 2.2vw, 2.25rem);
  margin-bottom: .35rem;
}
.section-kicker{
  color: rgba(14,17,17,.70);
  max-width: 50rem;
}
.card-st{
  border: 1px solid var(--st-border);
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,.05);
  background:#fff;
  height:100%;
}
.card-st .card-body{
  padding: 1.35rem 1.35rem 1.25rem 1.35rem;
}
.icon-pill{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(43,111,90,.10);
  border: 1px solid rgba(43,111,90,.18);
  margin-bottom: .85rem;
}
.icon-pill svg{ width: 20px; height: 20px; color: var(--st-accent); }

.quote{
  border-left: 4px solid rgba(176,141,87,.55);
  padding-left: 1rem;
  color: rgba(14,17,17,.80);
}

.small-muted{ color: rgba(14,17,17,.70); }

/* Footer */
.footer{
  background: rgba(14,17,17,.96);
  color: rgba(255,255,255,.82);
  padding: 1.4rem 0;
}
.footer a{ color: rgba(255,255,255,.88); text-decoration: none; }
.footer a:hover{ color: #fff; text-decoration: underline; }

/* Simple fade-in */
.fade-in{
  animation: fadeInUp .7s ease both;
}
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Utility */
.maxw-60{ max-width: 60ch; }