/* ===== Brand tokens ===== */
:root{
  --obsidian:#111111;
  --cactus:#0f3f23;   /* primary green */
  --nopal:#1f6a3e;
  --chile:#b01d2b;    /* accent red */
  --adobe:#cda989;    /* clay */
  --maiz:#efe4cf;     /* paper bg */
  --slate:#3a3f44;
}

/* Paper background */
.papel{
  background: var(--maiz);
  background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 2px, transparent 2px 6px);
  color: var(--slate);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
h1,h2,h3,strong,.btn{font-family:Montserrat,system-ui,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:var(--cactus);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:auto;padding:0 20px}

/* Motif + header */
.motif{height:12px;background:
  radial-gradient(circle at 8px 12px, var(--adobe) 8px, transparent 8px) repeat-x,
  linear-gradient(var(--adobe), var(--adobe));
  background-size:16px 12px, 100% 4px; background-position:0 0, 0 8px;}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid rgba(0,0,0,.07);z-index:10;transition:all .2s}
.site-header.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;object-fit:contain;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{font-size:18px;color:#111;letter-spacing:.5px}
.brand-text span{font-size:12px;color:#555;letter-spacing:.2px}
.serape{height:6px;background:linear-gradient(90deg,var(--cactus) 0 24%, #1a884e 24% 28%, var(--adobe) 28% 44%, var(--chile) 44% 48%, #e3c28c 48% 64%, var(--cactus) 64% 100%)}

/* Announcement bar */
.announce{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 14px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06);font-weight:700}
.announce-close{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px;padding:2px 8px;cursor:pointer}

/* Nav */
.primary-nav{display:flex;align-items:center;gap:16px}
.primary-nav .links{display:flex;gap:14px;align-items:center}
.primary-nav .links a{padding:8px 10px;border-radius:10px;color:#111;font-weight:600}
.primary-nav .links a:hover{background:rgba(0,0,0,.06);text-decoration:none}
.primary-nav .links a.btn{background:var(--cactus);padding:10px 14px;color:#fff}
.hamburger{display:none;background:#fff;border:1px solid #eee;border-radius:10px;padding:6px 10px}

/* Buttons */
.btn{background:var(--cactus);border:2px solid var(--cactus);padding:12px 18px;border-radius:16px;display:inline-block;font-weight:800;color:#fff;letter-spacing:.3px}
.btn:hover{background:var(--nopal);border-color:var(--nopal);text-decoration:none}
.btn.outline{background:#fff;color:var(--cactus)}
.btn.outline:hover{background:rgba(15,63,35,.06)}
.btn.small{padding:8px 12px;font-size:14px}
.btn.block{display:block;width:100%;text-align:center}

/* ===== EPIC HERO ===== */
.hero--epic{position:relative;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(1000px 400px at 20% -10%, rgba(176,29,43,.12), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(15,63,35,.18), transparent 60%),
    linear-gradient(180deg,#fff 0%, #fff0 30%, #fff0 70%, #fff 100%);
}
.hero-inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  row-gap:24px; align-items:center;
  padding:48px 20px 24px;
}
/* focal brand */
.hero-brand{
  grid-column:1 / -1;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.hero-logo{
  width: clamp(260px, 30vw, 460px);
  height:auto; background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:20px; padding:12px;
  box-shadow:0 18px 60px rgba(0,0,0,.18);
  animation: pop-in .7s ease-out both;
}
.hero-wordmark{margin-top:8px;line-height:1.05;text-transform:uppercase;letter-spacing:.6px}
.hero-mark-strong{display:block;font-weight:800;font-size:clamp(22px,3vw,30px);color:#111}
.hero-mark-sub{display:block;font-weight:700;font-size:clamp(12px,2vw,16px);color:#3a3f44}
@keyframes pop-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* hero text + card */
.hero h1{font-size:44px;line-height:1.05;margin:0 0 10px;color:#111}
.hero .accent{color:var(--chile)}
.hero p{margin:0 0 14px;font-size:18px}
.cta{display:flex;gap:12px;margin:10px 0 16px}
.badges{display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:8px 0;list-style:none}
.badges li{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:8px 12px;font-size:14px}
.sub{color:#5b5b5b;font-size:14px}
.hero-card{border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:18px;background:#fff;box-shadow:0 10px 36px rgba(0,0,0,.12)}

/* angled dividers */
.angle{height:36px;background:linear-gradient(180deg,transparent 0,#fff 100%)}
.angle--down{clip-path:polygon(0 0,100% 0,100% 100%,0 30%)}
.angle--up{clip-path:polygon(0 0,100% 70%,100% 100%,0 100%);background:linear-gradient(180deg,#fff 0,transparent 100%)}

/* Sections */
.section-pad{padding:36px 0}
section h2{font-size:28px;margin:26px 0 16px;color:#111}

/* Services */
.services .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:16px;background:#fff}
.card h3{margin:0 0 8px;color:var(--cactus);font-weight:800}
.card .price{color:#666;font-size:14px}

/* Pricing */
.pricing{background:#fff}
.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#fff}
.table thead th{background:#111;color:#fff;text-align:left;padding:10px;font-size:14px}
.table tbody td{padding:10px;border-top:1px solid #eee;vertical-align:top}
.fine{color:#666;font-size:12px;margin-top:6px}

/* Masonry gallery */
.masonry-section .masonry{column-count: 2; column-gap:14px}
.masonry figure{break-inside:avoid; margin:0 0 14px 0; position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(0,0,0,.08); background:#fff}
.masonry img{width:100%; height:auto; display:block}
.gallery .tag{position:absolute;top:10px;left:10px;background:linear-gradient(90deg,var(--cactus),var(--nopal));color:#fff;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.3px}

/* Testimonials slider */
.testi-head{display:flex;align-items:end;justify-content:space-between;gap:10px}
.slider{position:relative}
.slides{display:flex;gap:14px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.tcard{
  flex:0 0 80%;
  scroll-snap-align:start;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:18px;
  box-shadow:0 8px 30px rgba(0,0,0,.06)
}
.tcard .stars{color:#f39c12;font-size:18px;letter-spacing:2px;margin-bottom:8px}
.tcard .who{margin-top:10px;color:#666;font-weight:700}
.slider-nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.slider-nav button{
  pointer-events:auto;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;border-radius:999px;padding:6px 10px;font-size:22px;font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.08);cursor:pointer
}

/* Promise */
.promise .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.promise .card{background:#fff}
.promise .stars{letter-spacing:2px;color:#f39c12;font-size:18px}
.pills{display:flex;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:10px 0}
.pill{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:8px 12px;font-size:12px}

/* Ops & safety */
.ops .checklist, .safety .checklist{line-height:1.5}
.ops .checklist li, .safety .checklist li{margin-bottom:6px}

/* Schedule */
.schedule{background:#fff;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.schedule .calendly-inline-widget{width:100%;border:1px solid rgba(0,0,0,.08);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.schedule .note{margin-top:10px}

/* Contact */
.contact .lead-form{display:grid;gap:12px}
.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:grid;gap:6px;font-weight:700}
input,select,textarea{padding:12px;border:1px solid #ddd;border-radius:12px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--adobe);border-color:var(--adobe)}
.hidden{display:none}

/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,.08);margin-top:36px;background:#fff}
.site-footer .container{padding:24px 20px}
.small{font-size:12px;color:#777}

/* Floating CTA */
.floating-cta a{box-shadow:0 8px 20px rgba(15,63,35,.25)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr}
  .services .grid{grid-template-columns:1fr 1fr}
  .promise .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .services .grid{grid-template-columns:1fr}
  .primary-nav .links{
    display:none;position:absolute;right:10px;top:74px;background:#fff;
    border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:10px;
    flex-direction:column;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.12)
  }
  .hamburger{display:inline-block}
  .masonry-section .masonry{column-count:1}
  .tcard{flex-basis:92%}
}