:root{
  --green:#135029; --white:#fff; --bg:#fff; --muted:#5b5b5b; --text:#111;
  --container:1100px; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.12);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%
  /* Setting height: 100% on body ensures full-screen background video works */
}
html{touch-action:manipulation} /* reduces accidental double-tap zoom */
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg); -webkit-text-size-adjust:100%;
}
img, video{max-width:100%; height:auto; display:block}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.container{max-width:var(--container); margin-inline:auto; padding:clamp(14px,2vw,24px)}
.grid{display:grid; gap:clamp(14px,1.8vw,22px)}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid rgba(0,0,0,.08);
}
.nav{ display:flex; justify-content:space-between; align-items:center; min-height:60px;}
.menu a{color:var(--text); padding:8px 10px; border-radius:6px; font-weight:600;}
.menu a:hover{background:rgba(0,0,0,.04); text-decoration:none}
.brand{font-size:20px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green);}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  min-height:500px;
}
.hero__media{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* FIX 1: Set a positive z-index so the video appears above the body background. */
  z-index:1;
  /* The video itself is styled in main.js to ensure object-fit:cover */
}
.hero__content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
}
.hero h1{
  font-size:clamp(40px, 8vw, 68px); line-height:1.1;
  color:var(--white);
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.hero p{
  max-width:700px; color:var(--white);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}

/* Footer */
footer{
    /* FIX 2: Set background to light and text to black to ensure visibility */
    background:#e8f2ec; /* soft white background from main.js --ink */
    color:#111111; /* black text from main.js --text-dark */
    border-top:1px solid rgba(0,0,0,.08);
    padding:40px 0;
}
footer a{color:var(--green);}
footer a:hover{text-decoration:underline;}

/* Media Queries (Responsive Adjustments) */
@media (min-width: 981px){
  .hero{ min-height:80svh; }
}

/* (2) Ultra-wide screens: keep a 16:9 window centered */
@media (min-aspect-ratio: 16/9){
  .hero__media{
    display:flex; align-items:stretch; justify-content:center;
  }
  .hero__media video{
    height:100%;
    width: calc(100svh * (16 / 9));  /* maintain 16:9 based on viewport height */
    max-width:100%;
    object-fit:cover;
  }
}

/* Bento grid + tiles */
.bento{grid-template-columns:repeat(12, minmax(0, 1fr))}
.tile{
  background:#fbfbfb; border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius); padding:clamp(16px,1.8vw,24px); box-shadow:var(--shadow)
}
.tile h3{margin:.2rem 0 .5rem; font-size:clamp(18px,1.6vw,22px); color:var(--green)}
.pill{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem;
  border-radius:999px; font-weight:700; background:rgba(0,0,0,.05); color:var(--text);
  margin-right:8px; margin-bottom:8px;
}
.pill:hover{background:rgba(0,0,0,.1);}

/* General buttons and CTAs */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:999px;
  background:var(--green); color:var(--white); font-weight:700; text-decoration:none;
  box-shadow:0 10px 20px rgba(19, 80, 41, .25); transition:background .2s ease;
}
.btn:hover{background:var(--green-700); text-decoration:none;}
.btn-outline{
  background:transparent; color:var(--green); border:2px solid var(--green);
  box-shadow:none;
}
.btn-outline:hover{background:rgba(19, 80, 41, .05);}