:root{
  --primary:#2b9348;       /* green-ish accent */
  --accent:#ffb703;        /* warm accent for CTAs */
  --bg:#f7faf6;
  --muted:#6b7280;
  --text:#0b1220;
  --card-bg:#ffffff;
  --max-width:1200px;
  --gap:20px;

  /* logo sizing: tweak these to adjust logo size quickly */
  --logo-height-desktop: 96px;
  --logo-height-mobile: 64px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased}
a{color:inherit}
.container{max-width:var(--max-width);margin:0 auto;padding:28px}

/* Header */
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
.site-header{background:rgba(255,255,255,0.95);backdrop-filter:saturate(1.1) blur(4px);position:sticky;top:0;z-index:80;border-bottom:1px solid rgba(8,12,20,0.04)}
/* Logo image style */
.logo { display:inline-block; text-decoration:none; }
.site-logo {
  height:var(--logo-height-desktop);   /* larger desktop logo */
  width:auto;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.06));
}
.logo .text { font-weight:700;color:var(--primary); }

/* Navigation */
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.nav a{text-decoration:none;color:var(--text);padding:10px;border-radius:8px}
.nav a:hover{background:rgba(0,0,0,0.03)}
#menu-toggle{display:none;background:none;border:1px solid rgba(0,0,0,0.06);padding:6px;border-radius:6px;font-size:18px}

/* HERO */
.hero{min-height:380px;display:flex;align-items:center;position:relative;background-image:linear-gradient(180deg, rgba(19,62,39,0.08), rgba(19,62,39,0.02)), url('assets/hero.jpg');background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,22,11,0.36), rgba(255,255,255,0.02))}
.hero-inner{position:relative;z-index:2;padding:72px 28px}
.hero-copy{max-width:780px;color:var(--text)}
.hero h1{font-size:34px;margin:0 0 12px;color:var(--text);line-height:1.06}
.lead{color:var(--muted);font-size:18px;margin-bottom:18px}
.hero-cta{display:flex;gap:12px;margin-top:8px}
.btn{display:inline-block;border:0;padding:10px 16px;border-radius:8px;cursor:pointer;text-decoration:none;font-weight:600}
.btn.primary{background:var(--primary);color:#fff}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--text)}

.section{padding:56px 0}
.split{display:flex;gap:32px;align-items:flex-start}
.split-left{flex:1}
.split-right{flex:1;display:grid;gap:16px}
.card{background:var(--card-bg);padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(12,20,30,0.06);border:1px solid rgba(10,12,14,0.02)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.section-title{margin-bottom:12px}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.testimonial{background:linear-gradient(180deg,#ffffff,#fbfff9);padding:18px;border-radius:12px;border:1px solid rgba(0,0,0,0.04)}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row.full{grid-column:1/-1}
label{display:block;margin-bottom:8px;font-weight:600}
input,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(10,12,14,0.08);background:#fff}
.error{color:#b00020;font-size:13px;margin-top:6px}
.form-actions{margin-top:12px;display:flex;align-items:center;gap:12px}
.form-message{font-weight:600}

/* Footer */
.site-footer{background:#fff;margin-top:32px;padding:28px 0;border-top:1px solid rgba(10,12,14,0.04)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.footer-nav ul{list-style:none;display:flex;gap:12px;padding:0;margin:0}
.footer-nav a{text-decoration:none;color:var(--muted)}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.2,.9,.2,1),transform .5s cubic-bezier(.2,.9,.2,1)}
.reveal.revealed{opacity:1;transform:none}

/* Focus and accessibility */
:focus-visible{outline:3px solid rgba(43,147,72,0.18);outline-offset:4px;border-radius:8px}

/* Small tweaks for the cards on smaller screens */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:1fr}
}
@media (max-width:800px){
  .split{flex-direction:column}
  .form-grid{grid-template-columns:1fr}
  #menu-toggle{display:block}
  .nav{position:absolute;right:18px;top:64px;background:#fff;padding:12px;border-radius:10px;box-shadow:0 8px 30px rgba(12,20,30,0.08);display:none}
  .nav.show{display:block}
  .nav ul{flex-direction:column}
  .hero{min-height:360px;padding:40px 0}
  .hero h1{font-size:28px}

  /* mobile logo size controlled by variable */
  .site-logo { height:var(--logo-height-mobile); }
}

/* Legacy base rules and helpers (ensures layout elements match earlier expectations) */
:root{
  --page-padding:24px;
  --muted-2:#6b7280;
  --accent-blue:#0a74ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
.container{padding-left:var(--page-padding);padding-right:var(--page-padding)}
.header-inner{padding-top:8px;padding-bottom:8px}

/* Utility for smaller cards in "work" section if needed */
.card.small { padding:14px; }

/* Ensure top skip link visible on keyboard focus */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:10px;top:10px;width:auto;height:auto;background:#fff;padding:8px;border-radius:6px;z-index:9999}
