/* ===========================
   Design Tokens
=========================== */
:root{
  --ink: #0c0f10;          /* main text */
  --muted: #4D4D4D;        /* body copy */
  --bg: #ffffff;
  --soft: #f6faf7;
  --border: #e7ece9;

  --accent: #2E7D32;       /* healing green */
  --accent-ink: #164c37;   /* deep green for links */
  --accent-2: #3A99D9;     /* calm blue accent */

  --max: 1120px;
  --radius: 14px;
  --shadow: 0 12px 30px rgba(46,125,50,.18);

  --hero-focus-y: 22%;     /* slide banner vertical crop */
}

/* ===========================
   Base
=========================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}
img{max-width:100%;display:block}
a{color:var(--accent-ink);text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
section{padding:68px 0}
p{color:var(--muted)}

/* ===========================
   Header / Nav + Logo
=========================== */
/* ==== Slim, balanced header ==== */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 20px;   /* keep header slim */
  overflow: visible;    /* allow logo to “stick out” */
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand .logo {
  height: 120px;        /* make logo large */
  width: auto;
  object-fit: contain;

  margin-top: -20px;    /* pull it upward so header looks thinner */
  margin-bottom: -20px; /* optional: balance spacing */
}

.brand span {
  font-weight: 800;
  font-size: clamp(26px, 2.5vw, 34px);
  color: var(--ink);
}

.links a {
  margin-left: 24px;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  opacity: .9;
}
.links a:hover { opacity: 1; }

/* Make sure anchor links scroll correctly */
section[id] { scroll-margin-top: 100px; }

/* ===========================
   Hero (image via <img>)
=========================== */
.hero{
  position:relative;
  min-height:68vh;
  display:grid;
  place-items:end center;
  isolation:isolate;            /* allow overlay without affecting image */
}
.hero-bg{
  width:100%;
  height:72vh;
  object-fit:cover;
  object-position:center var(--hero-focus-y);
  filter:saturate(105%);
}
/* Readability overlay */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg,
              rgba(0,0,0,.28) 0%,
              rgba(0,0,0,.38) 45%,
              rgba(0,0,0,.28) 100%);
  pointer-events:none;
}
.hero-content-wrapper {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: start;      /* ⬅ push block to LEFT */
  padding: clamp(22px, 4vw, 40px);
}

.hero-content {
  max-width: 900px;
  margin: 0 auto;
  color: #fff;
  text-align: left;          /* ⬅ align text left */
  width: 100%;
  padding-bottom: clamp(18px, 4vw, 48px);
  margin-left: min(6vw, 56px); /* ⬅ safe margin from left edge */
}

/* Align text left with safe side margin on large banners */
.hero-content > *{margin-left:min(6vw,56px)}
.hero .sub{
  margin-top:0;
  font-size: clamp(14px, 2.2vw, 18px);
  opacity:.95;
}
.hero h1{
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.12;
  margin: 8px 0 10px;
}
.hero .tagline{
  font-size: clamp(13px, 2vw, 16px);
  color: #E9F6FF;
  max-width: 68ch;
}

/* CTA */
.btn{
  display:inline-block; margin-top:18px;
  padding:12px 18px; background:var(--accent); color:#fff;
  border-radius:12px; font-weight:700;
  box-shadow:0 10px 22px rgba(46,125,50,.25);
  transition:transform .18s ease, filter .18s ease;
}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* ===========================
   Section headings & copy
=========================== */
.section-head{
  margin:0 0 14px;
  font-family:"Playfair Display", serif;
  font-size: clamp(24px, 3.2vw, 34px);
  color: var(--accent-ink);
}
.lead{color:var(--muted);margin:0 0 28px}

/* ===========================
   Services (cards)
=========================== */
.alt{background:var(--soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cards{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
.card{
  grid-column:span 12;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(46,125,50,.22)}
.icon{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--soft);color:var(--accent-ink);font-weight:700;margin-bottom:8px;
}
.card h3{margin:6px 0;font-size:1.1rem;color:#333}
.card p{margin:0;color:var(--muted)}
@media (min-width:720px){.card{grid-column:span 4}}

/* ===========================
   Contact
=========================== */
.contact{display:grid;gap:18px}
.contact .box{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
}

/* ===========================
   Footer strip (final CTA)
=========================== */
.strip{
  background:linear-gradient(90deg, var(--accent) 0%, #2a6b4b 100%);
  color:#fff;text-align:center;padding:36px 20px;
}
.strip a{color:#fff;text-decoration:none;font-weight:700}

/* ===========================
   Footer credit
=========================== */
.credit{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:18px 20px; border-top:1px solid var(--border); background:#fff;
  color: var(--muted);
}
.credit img{ height:100px; width:auto; border-radius:6px; background:#fff; padding:2px; box-shadow:var(--shadow); }

/* ===========================
   Responsive Tweaks
=========================== */
@media (min-width:1200px){
  :root{ --hero-focus-y: 18%; } /* reveal a bit more top area on wide screens */
}
@media (max-width:900px){
  .hero{min-height:60vh}
  .hero-content > *{margin-left:min(4vw,28px)}
}
@media (max-width:768px){
  .links a{margin-left:16px}
  .brand .logo{height:38px}
  .hero-content{padding-bottom:28px}
  .hero-content > *{margin-left:0}
  .hero-content{text-align:center}
}
/* ===========================
   Anchor link scroll fix
=========================== */
section[id] { 
  scroll-margin-top: 90px;  /* adjust if header is taller/shorter */
}

#about, #services, #contact {
  min-height: 60vh;  /* ensures enough space to scroll to */
}