:root{
  --green:#0B4A1E; --green-2:#14612A; --green-3:#1C7A36;
  --gold:#EBA20C; --gold-deep:#8A4B05; --brown:#7E4002;
  --paper:#F6F7F2; --white:#fff; --ink:#14201D; --mute:#56655F; --line:#DCE3DB;
  --font-head:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --wrap:1160px; --r:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);line-height:1.12;margin:0 0 .5em;letter-spacing:-.015em;color:var(--green)}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em;max-width:68ch}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--green);padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}

/* buttons */
.btn{display:inline-block;font:700 1rem/1 var(--font-body);padding:1rem 1.6rem;border-radius:var(--r);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-gold{background:var(--gold);color:var(--green)}
.btn-gold:hover{background:#ffbe2e}
.btn-line{border-color:rgba(255,255,255,.55);color:#fff}
.btn-line:hover{background:#fff;color:var(--green)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-3)}
.btn-sm{padding:.7rem 1.1rem;font-size:.95rem}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{height:60px;width:auto}
.brand b{display:none;display:block;font:800 1.15rem/1.1 var(--font-head);color:var(--green);letter-spacing:.01em}

.nav{display:flex;align-items:center;gap:1.8rem}
.nav a{text-decoration:none;font-weight:600;color:var(--ink);padding:.4rem 0;border-bottom:3px solid transparent}
.nav a:hover{border-color:var(--line)}
.nav a[aria-current="page"]{border-color:var(--gold)}
.nav .btn{border-bottom:2px solid transparent;color:var(--green);padding:.7rem 1.1rem}
.nav .btn:hover{border-color:transparent}
.menu-btn{display:none;background:none;border:2px solid var(--green);border-radius:var(--r);width:46px;height:46px;cursor:pointer;padding:0}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:22px;height:2px;background:var(--green);margin:auto;position:relative;content:""}
.menu-btn span::before{top:-7px}.menu-btn span::after{top:5px}

/* hero */
.hero{position:relative;background:var(--green);color:#fff;overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;z-index:-1;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 2px,transparent 2px 22px),linear-gradient(180deg,transparent,rgba(0,0,0,.18))}
.hero-sun{position:absolute;right:-6%;bottom:-34%;width:min(760px,78vw);z-index:-2;animation:rise 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:translateY(45%);opacity:0}to{transform:none;opacity:1}}
.hero .wrap{padding:clamp(4rem,10vw,8rem) 0 clamp(5rem,11vw,9rem)}
.hero h1{color:#fff;max-width:13ch}
.hero .lead{font-size:1.25rem;max-width:46ch;color:#DCEBDD;margin:1.2rem 0 2.2rem}
.hero .hero-name{font:700 1rem/1.3 var(--font-body);color:var(--gold);margin:0 0 1.4rem;letter-spacing:.02em}
.actions{display:flex;flex-wrap:wrap;gap:.9rem}

/* page hero */
.page-hero{background:var(--green);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.page-hero .wrap{padding:clamp(3rem,7vw,5.5rem) 0}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:20ch}
.page-hero p{color:#DCEBDD;font-size:1.15rem;margin:0}
.page-hero::before{content:"";position:absolute;right:-60px;top:50%;width:380px;aspect-ratio:1;transform:translateY(-50%);background:url(../img/hero-sun.svg) center/contain no-repeat;opacity:.18;z-index:-1}

/* sections */
.section{padding:clamp(3.5rem,8vw,6rem) 0}
.section.alt{background:var(--white);border-block:1px solid var(--line)}
.section-head{margin-bottom:2.6rem;max-width:62ch}
.section-head p{color:var(--mute);font-size:1.1rem}

/* commitment strip */
.strip{background:var(--gold);color:var(--green)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.strip div{padding:1.5rem 1.2rem;font:700 1.15rem/1.25 var(--font-head);border-left:2px solid rgba(11,74,30,.25)}
.strip div:first-child{border-left:0;padding-left:0}
.strip span{display:block;font:500 .9rem/1.4 var(--font-body);margin-top:.25rem;color:#3d3a1a}

/* split */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.vm{display:grid;gap:1.2rem}
.vm div{background:var(--white);border:1px solid var(--line);border-left:5px solid var(--gold);padding:1.4rem 1.5rem;border-radius:var(--r)}
.vm h3{margin-bottom:.4rem}
.vm p{margin:0;color:var(--mute)}
.values{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.values li{background:var(--green);color:#fff;padding:.5rem .95rem;border-radius:99px;font-weight:600;font-size:.95rem}

/* products */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.6rem}
.product{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.product img{width:100%;aspect-ratio:320/220;object-fit:cover}
.product .body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.product h3{margin:0}
.product p{margin:0 0 .8rem;color:var(--mute);font-size:.98rem;line-height:1.55;flex:1}
.product .btn{align-self:flex-start}

/* why */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 3rem}
.why div{border-top:3px solid var(--gold);padding-top:1rem}
.why h3{margin-bottom:.35rem}
.why p{color:var(--mute);margin:0;font-size:1rem}

/* steps - real sequence */
.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.steps li{counter-increment:s;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.2rem;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--green);color:var(--gold);font:800 1rem var(--font-head);margin-bottom:.8rem}

/* cta */
.cta{background:var(--green);color:#fff;text-align:left}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;padding:3.2rem 0}
.cta h2{color:#fff;margin:0;max-width:20ch}
.cta p{color:#DCEBDD;margin:.6rem 0 0}

/* quality */
.prose{max-width:70ch}
.prose p{font-size:1.1rem}
.note{border-left:5px solid var(--gold);background:var(--white);padding:1.1rem 1.4rem;border-radius:var(--r);color:var(--mute)}

/* contact */
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
.info{display:grid;gap:1.1rem;margin:0;padding:0;list-style:none}
.info li{display:grid;gap:.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.info b{font-family:var(--font-head);color:var(--green)}
.info span{color:var(--mute)}
form{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.f{display:grid;gap:.35rem}
.f.full{grid-column:1/-1}
label{font-weight:700;font-size:.95rem}
input,select,textarea{font:inherit;padding:.8rem .9rem;border:1.5px solid #C5CFC8;border-radius:var(--r);background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(242,169,0,.55);border-color:var(--gold-deep)}
textarea{min-height:140px;resize:vertical}
.err{color:#A12A1B;font-size:.88rem;min-height:1.1em}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#A12A1B}
.status{grid-column:1/-1;margin:0;padding:.9rem 1.1rem;border-radius:var(--r);background:#E4F1E3;color:#0B4A1E;font-weight:600;display:none}
.status.show{display:block}

/* footer */
.site-footer{background:#06310F;color:#C7D8D3;padding:3.5rem 0 1.6rem}
.foot{display:grid;grid-template-columns:1.4fr .6fr .8fr;gap:2.5rem}
.site-footer h3{color:#fff;font-size:1.05rem}
.site-footer p{max-width:46ch;font-size:.98rem}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.tag{font:700 1.1rem var(--font-head);color:var(--gold)}
.copy{border-top:1px solid rgba(255,255,255,.14);margin-top:2.4rem;padding-top:1.2rem;font-size:.9rem}

/* responsive */
@media (max-width:960px){
  .split,.contact{grid-template-columns:1fr}
  .why{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .strip .wrap{grid-template-columns:1fr 1fr}
  .strip div:nth-child(3){border-left:0;padding-left:0}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  .menu-btn{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.25rem 1.2rem;display:none}
  .nav.open{display:flex}
  .nav a{padding:.9rem 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:.8rem;text-align:center}
  .hero-sun{opacity:.9;right:-30%;bottom:-18%;width:110vw}
  .why,.steps{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .strip .wrap{grid-template-columns:1fr}
  .strip div{border-left:0;padding-left:0;border-top:2px solid rgba(11,74,30,.2)}
  .strip div:first-child{border-top:0}
  .foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-sun{animation:none}
}

.brand img{height:62px}
@media (max-width:760px){.brand img{height:50px}}
.foot-logo{background:#fff;border-radius:var(--r);padding:.6rem .9rem;display:inline-block;margin-bottom:1.2rem}
.foot-logo img{height:64px;width:auto}