/* ---------- Base ---------- */
:root{
  --bg: #f5f1e8;
  --paper: #fffef9;
  --ink: #1f3327;
  --muted: #516355;
  --accent: #d1a254;
  --ring: #c7bda3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

/* ---------- Layout ---------- */
.container{width:min(1120px, 92vw); margin-inline:auto}
.section{padding: 72px 0}
.section.small{padding: 42px 0}

/* ---------- Header / Nav ---------- */
header{
  position: sticky; top:0; z-index: 50;
  background: rgba(245,241,232,0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #ebe6d9;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand img { height: 90px; width: auto; } /* bigger logo */
.brand .title { font-weight: 800; letter-spacing: 0.5px; font-size: 1.4rem; } /* bigger title */
nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0}
nav a{color:var(--ink); text-decoration:none; font-weight:600}
nav a:hover{opacity:.8}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* left for text, right for image */
  gap: 32px;
  align-items: center;
  padding: 48px 0 28px;
}

.hero-visual {
  background: url('images/redwinch.jpg') center center / cover no-repeat;
  border-radius: 18px;
  min-height: 500px; /* makes it more dramatic */
  box-shadow: 0 10px 24px rgba(31,51,39,0.06);
  border: 1px solid #ece7da;
}

.kicker {
  font-weight:700; 
  letter-spacing:.08em; 
  text-transform:uppercase; 
  color:var(--muted); 
  font-size:.85rem;
}

h1 {
  font-size: clamp(2rem, 4vw, 3rem); 
  line-height:1.1; 
  margin:.35em 0 .5em;
}

.lede {
  font-size: clamp(1rem, 1.6vw, 1.15rem); 
  color:#39493d;
}

.cta {
  display:flex; 
  gap:14px; 
  margin-top:18px; 
  flex-wrap:wrap;
}

.button {
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:10px;
  padding: 12px 18px; 
  border-radius: 999px; 
  font-weight:700; 
  text-decoration:none;
  border:1.5px solid var(--ink); 
  color:var(--paper); 
  background: var(--ink);
}

.button.secondary {
  background:transparent; 
  color:var(--ink);
}

.button:hover {
  transform: translateY(-1px);
}

.hero-visual {
  background: url("/images/redwinch.jpg") center/cover no-repeat;
  min-height: 400px; /* Make it taller so it’s obvious */
  width: 100%;
  display: block;
}

/* ---------- Grids ---------- */
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
.grid.cols-4{grid-template-columns: repeat(4, 1fr)}
.card{
  background:var(--paper); padding:18px; border-radius:16px; border:1px solid #ece7da;
  box-shadow: 0 6px 16px rgba(31,51,39,0.05);
}
.card img {
  width: 100%;
  height: 300px;      /* fixed, consistent height */
  object-fit: cover;  /* fills the box, crops edges */
  display: block;
}

}

.card img {
  width: 100%;
  height: 300px;      /* fixed, consistent height */
  object-fit: cover;  /* fills the box, crops edges */
  display: block;
}

}

}

/* Mobile adjustment */
@media (max-width: 980px) {
  .card img {
    height: 220px; /* mobile height */
  }
}

.card h3{margin:12px 0 6px}
.meta{color:var(--muted); font-size:.95rem}

.section-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem); /* matches your other h2 */
  font-weight: 700;
  margin-bottom: 28px;
  color: var(--ink);
  text-align: left;

}


/* ---------- About ---------- */
.about{display:grid; grid-template-columns: 1fr 1fr; gap: 28px}
.about .panel{background:var(--paper); border:1px solid #ece7da; border-radius:16px; padding:22px}

/* ---------- Services ---------- */
.features{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.feature{background:var(--paper); border-radius:16px; border:1px solid #ece7da; padding:20px}
.feature h4{margin:.2em 0}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; background:#efe9d7; color:#5b4a22; font-weight:700; font-size:.8rem}

/* ---------- Contact ---------- */
.contact{display:grid; grid-template-columns: 1.2fr 1fr; gap: 28px}
form{9
  background:var(--paper); border:1px solid #ece7da; border-radius:16px; padding:20px;
}
label{display:block; font-weight:700; margin-top:12px}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #dad3bf; background:#fffeff;
  outline:none; transition:border .2s, box-shadow .2s;
}
input:focus, textarea:focus{border-color: var(--ring); box-shadow: 0 0 0 4px rgba(199,189,163,.35)}
textarea{min-height:140px; resize:vertical}
form .row{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
form .actions{margin-top:14px}

/* ---------- Footer ---------- */
footer{
  margin-top: 42px; padding: 28px 0 56px; border-top:1px solid #ebe6d9; color:#5a6a5c
}
.footer-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
small, .muted{color:#697a6b}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero{grid-template-columns: 1fr}
  .about{grid-template-columns: 1fr}
  .contact{grid-template-columns: 1fr}
  .features{grid-template-columns: 1fr 1fr}
  .grid.cols-3{grid-template-columns: 1fr 1fr}
  .grid.cols-4{grid-template-columns: 1fr 1fr}
  .hero-visual{min-height: 280px}
}
@media (max-width: 620px){
  nav ul{display:none}
  .features{grid-template-columns: 1fr}
  .grid.cols-3, .grid.cols-4{grid-template-columns: 1fr}
}