/* ===== Base micro-polish ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { width: 100%; overflow-x: hidden; }

body {
  font: 16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #222;
  background: #fff;
}

h1 { font-size: 2rem; margin: 1.25rem 0 .75rem; }
p  { margin: .5rem 0 1rem; }

a { color: #0b5ed7; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.site-header .site-title a { font-weight: 700; }
.site-footer p { margin: .25rem 0; }

/* ===== Buttons (used on home & hero) ===== */
.btn {
  display: inline-block;
  padding: .75rem 1rem;
  border-radius: 10px;
  background: #111;
  color: #fff;
  text-decoration: none;
  border: 1px solid #111;
}
.btn:hover { opacity: .9; }
.btn.outline { background: #fff; color: #111; border-color: #111; }

/* ===== Optional container card for main content ===== */
main.container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 1.25rem;
  background: rgba(255,255,255,.9);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

/* ===== Back-to-top button ===== */
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid #111;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}
.back-to-top.show {
  opacity: .96;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { transform: translateY(-2px); }
.back-to-top:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
@media (max-width: 480px){
  .back-to-top { width: 40px; height: 40px; right: .75rem; bottom: .75rem; }
}

/* ===== HERO (image version) ===== */
.hero.has-img{
  position: relative;
  display: block;
  min-height: 38vh;                     /* desktop/tablet default height */
  width: 100%;
  border-radius: 0;
}

/* Make the image cover the area WITHOUT causing horizontal scroll */
.hero.has-img img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;          /* adjust if you want to shift focal point */
  z-index: 0;
}

/* Subtle dark overlay for better text contrast */
.hero.has-img::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 0;
}

/* Hero text block */
.hero.has-img .hero-text{
  position: relative;
  z-index: 1;
  color: #fff;
  padding: clamp(1.25rem, 3.5vw, 2.25rem) 1rem;
  max-width: min(1050px, 92%);
  margin: 0 auto;
}

/* Hero typography */
.hero.has-img .hero-text h1{
  margin: 0 0 .5rem;
  line-height: 1.25;
  font-size: clamp(1.25rem, 2.4vw + .8rem, 2rem);
}
.hero.has-img .hero-text p{
  margin: 0;
  font-size: clamp(.95rem, 1.4vw + .4rem, 1.1rem);
}

/* Hero height trims for smaller screens */
@media (max-width: 1024px){
  .hero.has-img{ min-height: 34vh; }
}
@media (max-width: 640px){
  .hero.has-img{ min-height: 28vh; }    /* phones: shorter hero */
}