:root{
  --bg:#ffffff;
  --ink:#122022;
  --muted:#5b6b6f;
  --brand:#1b4332;     /* Evergreen */
  --brand-2:#2d6a4f;   /* Lighter evergreen */
  --surface:#f4f7f7;   /* Soft gray-green */
  --maxw:1080px;
  --radius:12px;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg); color: var(--ink);
  line-height: 1.55;
}

/* Links */
a{ color: var(--brand-2); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 2px; }

/* Images & wrapper */
img{ max-width:100%; height:auto; display:block; }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Headings */
h1,h2,h3{ line-height:1.15; margin: 0 0 10px; }
h1{ font-weight:800; font-size: clamp(2rem,4vw,3rem); }
h2{ font-weight:700; font-size: clamp(1.4rem,2.5vw,1.8rem); margin-top: 28px; }
h3{ font-weight:600; font-size: 1.1rem; }

/* Hero */
.hero{
  padding: 72px 0;
  background: radial-gradient(1200px 400px at 50% -10%, #ecf6f1 0%, transparent 60%);
  border-bottom: 1px solid #e9efef;
}
.lead{ font-size: 1.125rem; color: var(--muted); max-width: 60ch; }
.kicker{ text-transform: uppercase; letter-spacing:.08em; color: var(--brand-2); font-weight:700; font-size:.85rem; }

/* Grid & cards */
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 20px; }
.card{
  border:1px solid #e7ecec; border-radius: var(--radius);
  padding:20px; background:#fff; box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}
.muted{ color: var(--muted); }

/* Buttons (work on <a class="btn"> or <button class="btn">) */
a.btn, .btn{
  display:inline-block; background: var(--brand); color:#fff !important;
  padding:12px 16px; border-radius:10px; font-weight:600; border:0; cursor:pointer;
  transition: transform .04s ease, box-shadow .08s ease, background-color .12s ease;
  text-decoration:none !important;
}
a.btn:hover, .btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
a.btn.secondary, .btn.secondary{ background: var(--brand-2); }

/* Header / Nav */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid #e9efef;
}
.site-header .nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.site-header .brand{ display:flex; align-items:center; gap:10px; font-weight:800; color: var(--ink); text-decoration:none; }
.site-header .brand img{ width:28px; height:28px; }
.site-header nav a{ color: var(--ink); opacity:.85; font-weight:600; text-decoration:none; }
.site-header nav a:hover{ color: var(--brand-2); opacity:1; }
.site-header .links{ display:flex; gap:16px; align-items:center; }

/* Active underline for current page */
.site-header .links a { border-bottom: 2px solid transparent; }
.site-header .links a.active { border-bottom-color: var(--brand); }

/* Small spacing tweak for the Contact button */
.nav-cta { margin-left: 8px; }

/* Hamburger button (right end) */
.menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--surface);
  background:#fff; border-radius:10px; cursor:pointer;
}
.menu-btn[aria-expanded="true"]{ background:#f5f7f7; }
.hamburger{ width:22px; height:22px; }

/* Dropdown (closed by default) */
.site-header .menu{
  position:absolute; right:16px; top:calc(64px + 8px);
  background:#fff; border:1px solid var(--surface); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:10px; display:none; gap:8px; min-width:220px;
}
.site-header .menu.open{ display:grid; }
.site-header .menu[hidden]{ display:none !important; }
.site-header .menu a{ padding:8px 10px; border-radius:8px; }
.site-header .menu a:hover{ background:#f7f9f9; }
.site-header .menu a.active{ background:#eef6f3; border-bottom-color:transparent; }

/* Hide mobile-only links on desktop; show inside dropdown on phones */
.site-header .menu .only-mobile { display: none; }

@media (max-width: 720px){
  .site-header .menu .only-mobile { display: block; }
  /* We already hide header links on phones with:
     .site-header .links a:not(.nav-cta){ display:none; } */
}


/* Compact CTA for header */
.nav-cta{
  display:inline-block; background: var(--brand-2); color:#fff !important;
  padding:8px 12px; border-radius:10px; font-weight:600; text-decoration:none !important;
}

/* Footer */
footer.site-footer{
  background: var(--surface);
  margin-top: 48px;
  padding: 28px 0;
  font-size: .95rem;
  color: var(--muted);
}
footer.site-footer a{ color: inherit; text-decoration: underline; }
/* Small inline icons */
.icon{ width:20px; height:20px; vertical-align:-3px; margin-right:8px; }
.icon *{
  stroke: var(--brand-2);
  stroke-width:2;
  fill:none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* --- Header polish (spacing + hover underline) --- */
.site-header .nav{ height:60px; } /* a bit tighter */

.site-header .links a{
  position: relative;
  padding: 6px 2px;
  text-decoration: none;
}

.site-header .links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px; background: var(--brand-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s ease;
}

.site-header .links a:hover::after{
  transform: scaleX(1);
}
.section{ padding: 24px 0; }
.notice{ padding:14px 16px; background:#ecf8f2; border-left:4px solid var(--brand-2); border-radius:8px; }

/* Forms */
form{ display:grid; gap:12px; max-width:640px; }
label{ font-weight:600; }
input, select, textarea{
  width:100%; padding:12px; border:1px solid #e1e7e7; border-radius:10px; font: inherit;
}
fieldset{ border:1px solid #e9efef; border-radius:12px; padding:12px; }
legend{ padding:0 6px; color: var(--muted); font-size:.95rem; }
.help{ color: var(--muted); font-size:.9rem; margin-top:-6px; }

/* Calculator helpers */
.card textarea{ width:100%; }
.card input[type="number"]{ width:140px; }


/* Full-page photo background (page-specific) */
body.page-photo{
  /* defaults = lightening overlay */
  --overlay-color: 255,255,255;          /* white by default */
  --overlay-alpha-top: .70;
  --overlay-alpha-bottom: .85;

  background-image:
    linear-gradient(
      to bottom,
      rgba(var(--overlay-color), var(--overlay-alpha-top)),
      rgba(var(--overlay-color), var(--overlay-alpha-bottom))
    ),
    var(--page-bg);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}
body.page-photo .hero{ background: transparent; border-bottom: 0; }

/* --- Header menu + active link --- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); }
.site-header .nav { display:flex; align-items:center; justify-content:space-between; height:64px; }
.site-header .links { display:flex; align-items:center; gap:16px; }
.site-header .links a { border-bottom: 2px solid transparent; }
.site-header .links a.active { border-bottom-color: var(--brand); }

.menu-btn {
  display:inline-block; border:1px solid var(--surface); background:#fff;
  padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:600;
}
.menu-btn[aria-expanded="true"] { background:#f5f7f7; }

/* Dropdown panel (closed by default) */
.site-header .menu {
  position: absolute; right: 16px; top: calc(100% + 8px);
  background:#fff; border:1px solid var(--surface); border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding:10px; display:none;               /* <— was grid; now NONE by default */
  gap:8px; min-width: 220px;
}

/* Open state */
.site-header .menu.open { display:grid; }

/* Safety: if the element has the [hidden] attr, always hide */
.site-header .menu[hidden] { display:none !important; }
.site-header .menu a { padding:8px 10px; border-radius:8px; }
.site-header .menu a:hover { background:#f7f9f9; }
.site-header .menu a.active { background:#eef6f3; border-bottom-color: transparent; }

/* ========== Mobile polish ========== */
:root{
  /* scale headings a bit on small screens */
  --h1: clamp(28px, 5.5vw, 44px);
  --h2: clamp(22px, 4.2vw, 32px);
}

/* Headings use the responsive sizes */
h1{ font-size: var(--h1); line-height: 1.15; }
h2{ font-size: var(--h2); line-height: 1.2; }

/* Images always shrink to fit */
img{ max-width:100%; height:auto; }

/* Cards breathe a touch more on mobile */
@media (max-width: 720px){
  .wrap{ padding-left:16px; padding-right:16px; }
  .grid{ gap:14px; }
  .card{ padding:16px; }

  /* Header: show Contact + hamburger; hide the rest */
  .site-header .links a:not(.nav-cta){ display:none; }
  .menu-btn{ display:inline-flex; margin-left:6px; }

  /* Dropdown becomes a comfy panel spanning the top width */
  .site-header .menu{
    left:12px; right:12px; top:calc(64px + 6px);
    min-width:auto;
  }

  /* Buttons stack nicely when used side-by-side */
  .btn + .btn{ margin-left:0; margin-top:10px; display:inline-block; }
}

/* If a page uses a photo background, ensure text contrast */
body.page-photo main.wrap{ color: #0f1b1b; }           /* dark ink */
body.page-photo .muted{ color: #4a5a5a; }

/* Extra space under the sticky header (all pages) */
.site-header + main.wrap { padding-top: 32px; }          /* desktop ~1.5× */

/* Slightly tighter on phones */
@media (max-width: 720px){
  .site-header + main.wrap { padding-top: 28px; }
}