@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root { --green:#70b176; --mint:#e6f7ee; --text:#222; --muted:#6e6e6e; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--text); font-family:'Poppins',Arial,sans-serif; line-height:1.65; }
img { display:block; max-width:100%; }
a { color:inherit; }
.wrap { width:min(1020px,calc(100% - 40px)); margin:0 auto; }
.narrow { width:min(1040px,calc(100% - 40px)); }

.site-header { background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.07); position:relative; z-index:3; }
.header-inner { min-height:180px; display:flex; align-items:center; }
.logo { width:112px; min-height:140px; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.logo img { width:100px; height:125px; object-fit:contain; }

.hero {
  height:510px;
  position:relative;
  overflow:hidden;
  color:#fff;
  display:grid;
  place-items:center;
  background:#5a5a5a;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:url('https://images.unsplash.com/photo-1580298321240-43ae28e4dfa0?auto=format&fit=crop&w=2200&q=86') center 52%/cover no-repeat;
  filter:grayscale(.8) saturate(.35) contrast(.95) brightness(.75);
  transform:scale(1.015);
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(20,20,20,.28),rgba(20,20,20,.42));
}
.hero-content { position:relative; z-index:2; text-align:center; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; padding-top:86px; }
.hero-content h1 { margin:0; font-size:42px; line-height:1.16; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.hero-content p { margin:auto 0 17px; font-size:27px; font-weight:600; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.hero-button { margin-bottom:28px; text-decoration:none; color:#148744; background:#27e673; border-radius:999px; padding:8px 15px; font-size:13px; }

.section { padding:74px 0; }
.about h1,.folio h2,.center-heading h2,.contact-copy h2 { margin:0 0 30px; font-size:2rem; line-height:1.2; font-weight:700; }
.about p { color:var(--muted); margin:0 0 22px; font-size:14px; }
.about strong { color:#454545; }
.wide-photo { width:100%; margin-top:46px; aspect-ratio:2.88/1; object-fit:cover; border-radius:18px; }

.center-heading { text-align:center; margin-bottom:58px; }
.center-heading h2 { margin-bottom:12px; }
.center-heading p,.folio-intro { color:var(--muted); font-size:14px; }
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.service-card { background:var(--mint); overflow:hidden; }
.service-copy { padding:36px 44px 28px; min-height:135px; }
.service-card h3 { margin:0 0 10px; font-size:16px; }
.service-card p { margin:0; color:var(--muted); font-size:14px; }
.service-media { width:100%; aspect-ratio:1.64/1; object-fit:cover; }

.folio { padding-top:52px; }
.folio h2 { margin-bottom:8px; }
.folio-intro { margin:0 0 30px; }
.folio-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:34px 44px; }
.folio-grid iframe { width:100%; aspect-ratio:16/9; border:0; background:#111; }

.contact-wrap { padding:10px 0 40px; }
.contact-panel { position:relative; width:min(1040px,calc(100% - 40px)); min-height:290px; margin:0 auto; overflow:hidden; color:#fff; background:radial-gradient(circle at 57% 40%,rgba(26,177,73,.85) 0,rgba(26,177,73,.45) 24%,transparent 47%),linear-gradient(110deg,#052331 0%,#031a23 68%); }
.contact-copy { position:relative; z-index:2; padding:28px 40px 62px; max-width:54%; }
.contact-copy h2 { margin-bottom:14px; color:#fff; }
.contact-copy h3 { margin:0 0 10px; font-size:17px; }
.contact-copy p { margin:0 0 10px; font-size:13px; }
.contact-copy a { font-size:13px; text-decoration:underline; }
.contact-cartoon { position:absolute; right:-1%; bottom:-1%; width:38%; max-height:94%; object-fit:contain; object-position:right bottom; }
.copyright { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:10px; opacity:.85; white-space:nowrap; }

@media(max-width:760px){
  .header-inner{min-height:130px;justify-content:center}.logo{min-height:110px}.logo img{width:82px;height:103px}
  .hero{height:420px}.hero::before{background-position:center}.hero-content h1{font-size:34px}.section{padding:52px 0}
  .about h1,.folio h2,.center-heading h2,.contact-copy h2{font-size:1.7rem}
  .service-grid,.folio-grid{grid-template-columns:1fr}.service-copy{min-height:auto}
  .contact-panel{min-height:300px}.contact-copy{max-width:67%;padding-left:26px}.contact-cartoon{width:48%;right:-7%}
}
@media(max-width:520px){
  .wrap,.narrow{width:min(100% - 28px,1040px)}.header-inner{min-height:108px}.logo{min-height:92px}.logo img{width:70px;height:88px}
  .hero{height:330px}.hero::before{background-position:52% center}.hero-content{padding-top:54px}.hero-content h1{font-size:30px}.hero-content p{font-size:21px}
  .about p,.center-heading p,.service-card p,.folio-intro{font-size:13px}.service-copy{padding:26px}
  .wide-photo{aspect-ratio:2/1}.contact-panel{width:calc(100% - 28px)}.contact-copy{max-width:78%;padding:24px 24px 72px}.contact-cartoon{width:58%;right:-18%}
}