/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;line-height:1.6;color:#0b0f14;background:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:12px 20px;border-radius:8px;border:1px solid #0b0f14;background:#0b0f14;color:#fff;font-weight:600;transition:.2s}
.btn:hover{transform:translateY(-1px);opacity:.95}
.btn-outline{background:transparent;color:#0b0f14}
header{position:sticky;top:0;background:#ffffffcc;backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid #e6e7e8;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:32px;width:auto}
nav ul{display:flex;gap:22px;list-style:none}
nav a{font-weight:600}
.hamburger{display:none;border:1px solid #d0d3d6;border-radius:8px;padding:8px;background:#fff}
@media (max-width:860px){
  nav ul{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid #e6e7e8;flex-direction:column;padding:12px}
  nav ul.open{display:flex}
  .hamburger{display:block}
}
/* Hero */
.hero{position: relative;background:linear-gradient(180deg,#e8efe8,transparent);padding:72px 0 32px}
.hero-logo {
  position: absolute;
  top: 20px;          /* moves it down a bit from the top edge */
  left: 100px;         /* shifts it right from the edge */
  width: 220px;       /* adjust as needed */
  height: auto;
  z-index: 1;       /* ensures it sits above the background */
  opacity: 0.80;      /* slight fade for elegance, optional */
}

@media (max-width: 860px) {
  .hero-logo {
    width: 90px;
    top: 30px;
    left: 20px;
  }
}

.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.15;letter-spacing:-.02em}
.hero p{margin-top:12px;color:#33424a}
.hero .cta{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.badges{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.badges span{font-size:12px;padding:6px 10px;border-radius:999px;background:#f0f3f1;border:1px solid #dfe6df}
/* Sections */
section{padding:52px 0;border-top:1px solid #f1f2f3}
.section-title{font-size:24px;margin-bottom:16px}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{border:1px solid #e6e7e8;border-radius:12px;padding:18px;background:#fff}
.card h3{margin-bottom:6px;font-size:18px}
ul.check{list-style:none}
ul.check li{padding-left:26px;position:relative;margin:6px 0}
ul.check li::before{content:"✓";position:absolute;left:0;top:0;color:#2a6b3f;font-weight:700}
/* Gallery */
.gallery {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e6e7e8;
  background: #f7f7f7;
  display: block;
  cursor: zoom-in; /* <-- enables the zoom cursor */
}

@media (max-width: 860px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
.gallery img:hover {
  filter: brightness(0.85);
  transform: scale(1.02);
  transition: all 0.2s ease;
}

/* Contact */
.contact .card{display:grid;gap:14px}
.input {
  width: 100%;
  padding: 12px;
  border: 1px solid #d0d3d6;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
  margin-bottom: 10px; /* adds space so blue glow shows fully */
}

.input:focus {
  border-color: #1a73e8;     /* blue border color */
  box-shadow: 0 0 0 3px rgba(26,115,232,0.2); /* subtle blue glow */
}

textarea.input {
  min-height: 120px;
  resize: vertical;
}

textarea.input{min-height:120px;resize:vertical}
/* Contact text sizing */
.contact {
  font-size: 17px;      /* Increase base font size (default is ~16px) */
  line-height: 1.6;     /* Add a little breathing room */
}

.contact h3 {
  font-size: 22px;      /* Slightly larger subheadings */
}

.contact .input,
.contact button {
  font-size: 16px;      /* Match input text and button text */
}

footer{padding:36px 0;background:#0b0f14;color:#dbe1e1}
footer a{color:#e9f0ea;text-decoration:underline}
.small{font-size:13px;color:#59656b}
.highlight{color:#2a6b3f}
/* --- Mobile polish --- */
@media (max-width: 480px){
  .container { padding: 0 14px; }

  header .nav { height: 56px; }
  .brand img { height: 28px; }

  .hero { padding: 72px 0 24px; }   /* a touch more top padding */
  .hero h1 { font-size: clamp(24px, 7vw, 32px); line-height: 1.2; }
  .hero p  { font-size: 15px; }

  /* hero logo on phones */
  .hero-logo { top: -60px; left: 16px; width: 100px; opacity: .85; }

  .btn { padding: 12px 16px; font-size: 16px; }

  .section-title { font-size: 20px; margin-bottom: 12px; }
  .card { padding: 14px; }

  /* One image per row on small phones */
  .gallery { grid-template-columns: 1fr; gap: 8px; }

  /* Contact inputs: comfy tap sizes */
  .input { font-size: 16px; padding: 12px; }
}