:root{
  --ink:#1C1C1C;
  --mint:#D5EDDF;
  --forest:#2F6F4E;
  --cream:#F6F3EC;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Space Grotesk",Arial,Helvetica,sans-serif;
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:min(1180px,92vw);margin:0 auto}

/* ---------- TOP BAND ---------- */
.topband{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--ink);
  color:var(--cream);
  border-bottom:6px solid var(--forest);
}
.topband__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:72px;
  padding:10px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:1.85rem;
  letter-spacing:.07em;
  line-height:1;
  color:var(--mint);
}
.brand em{font-style:normal;color:var(--cream);opacity:.72}
.brand__zig{
  display:block;
  width:34px;
  height:18px;
  background-image:
    linear-gradient(45deg,var(--mint) 25%,transparent 25%),
    linear-gradient(-45deg,var(--mint) 25%,transparent 25%);
  background-size:12px 18px;
  background-repeat:repeat-x;
}

.nav{display:flex;align-items:center;gap:22px}
.nav a{
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.74rem;
  font-weight:700;
  padding:6px 0;
  border-bottom:3px solid transparent;
}
.nav a:hover{border-bottom-color:var(--mint)}
.nav a.is-current{border-bottom-color:var(--mint);color:var(--mint)}
.nav a.btn{border-bottom:3px solid var(--ink)}

.navtoggle{
  display:none;
  background:transparent;
  border:3px solid var(--mint);
  width:46px;height:40px;
  padding:8px;
  cursor:pointer;
}
.navtoggle span{display:block;height:3px;background:var(--mint);margin:3px 0}

/* ---------- BANDS ---------- */
.band{border-bottom:10px solid var(--ink);position:relative}
.band--ink{background:var(--ink);color:var(--cream);border-bottom-color:var(--forest)}
.band--mint{background:var(--mint);color:var(--ink)}
.band--forest{background:var(--forest);color:var(--cream);border-bottom-color:var(--ink)}
.band--cream{background:var(--cream);color:var(--ink)}
.band:last-of-type{border-bottom:none}

.band__inner{padding:clamp(48px,7.5vw,104px) 0}
.band--tall .band__inner{
  min-height:74vh;
  display:flex;
  align-items:center;
}
.band--tall .band__inner > *{width:100%}

.zag{max-width:62ch}
.band--right .zag{margin-left:auto;text-align:right}
.band--right .zag .pricelist li,
.band--right .zag .flatlist li{flex-direction:row-reverse}
.band--right .zag .cta-row{justify-content:flex-end}

/* ---------- TYPE ---------- */
h1,h2,h3{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;letter-spacing:.02em;line-height:.93;margin:0 0 .35em}
.h-hero{font-size:clamp(3rem,10.5vw,8rem);margin-bottom:.22em}
.h-hero--sub{font-size:clamp(2.8rem,8.5vw,6.2rem)}
.h-band{font-size:clamp(2.2rem,5.6vw,4.4rem)}
.h-band--mid{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:1.45rem;letter-spacing:.03em}

.kicker{
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.72rem;
  font-weight:700;
  margin:0 0 1.1em;
}
.lead{font-size:clamp(1.05rem,2vw,1.3rem);max-width:60ch;margin:0 0 1.6em}
.band--right .lead{margin-left:auto}
p{margin:0 0 1.1em}

/* ---------- ZIGZAG RULE ---------- */
.zigline{
  height:20px;
  margin:0 0 1.8em;
  background-image:
    linear-gradient(45deg,currentColor 25%,transparent 25%),
    linear-gradient(-45deg,currentColor 25%,transparent 25%);
  background-size:26px 20px;
  background-repeat:repeat-x;
}

/* ---------- BUTTONS ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:1.5em 0 0}
.btn{
  display:inline-block;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:1.4rem;
  letter-spacing:.09em;
  line-height:1;
  padding:.62em 1.4em;
  border:3px solid currentColor;
  text-decoration:none;
  background:transparent;
  cursor:pointer;
  transition:background .15s linear,color .15s linear;
}
.btn:hover{background:currentColor}
.btn:hover{color:var(--cream)}
.band--cream .btn:hover,.band--mint .btn:hover{color:var(--cream)}
.btn--solid{
  background:var(--forest);
  color:var(--cream);
  border-color:var(--ink);
}
.btn--solid:hover{background:var(--mint);color:var(--ink)}
.btn--sm{font-size:1.05rem;padding:.5em .9em;border-width:3px}

/* ---------- LISTS ---------- */
.flatlist{list-style:none;margin:0 0 1.4em;padding:0}
.flatlist li{
  display:flex;
  gap:10px;
  border-top:2px solid currentColor;
  padding:.7em 0;
}
.flatlist li:last-child{border-bottom:2px solid currentColor}

.pricelist{list-style:none;margin:0 0 1.2em;padding:0}
.pricelist li{
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-top:2px solid currentColor;
  padding:.75em 0;
  text-align:left;
}
.pricelist li:last-child{border-bottom:2px solid currentColor}
.pricelist b{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.35rem;letter-spacing:.04em;white-space:nowrap}

.steps{list-style:none;counter-reset:s;margin:0;padding:0}
.steps li{
  counter-increment:s;
  border-top:3px solid var(--ink);
  padding:.9em 0;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:1.5rem;
  letter-spacing:.06em;
  margin-right:.6em;
  color:var(--forest);
}
.steps li:last-child{border-bottom:3px solid var(--ink)}

.factstrip{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:2.6em 0 0;
  padding:0;
  border-top:4px solid var(--ink);
  border-bottom:4px solid var(--ink);
}
.factstrip li{
  flex:1 1 200px;
  padding:1em 1.2em 1em 0;
  font-size:.95rem;
}
.factstrip li + li{border-left:2px solid var(--ink);padding-left:1.2em}
.factstrip strong{
  display:block;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:2.4rem;
  letter-spacing:.03em;
  line-height:1;
  color:var(--forest);
}

/* ---------- COLUMNS / PROOF ---------- */
.cols{display:grid;gap:clamp(22px,3.5vw,48px)}
.cols--3{grid-template-columns:repeat(3,1fr)}
.cols--4{grid-template-columns:repeat(4,1fr)}
.quote{margin:0;padding-top:1.1em;border-top:4px solid currentColor}
.quote p{font-size:1.05rem}
.quote cite{font-style:normal;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.qa{border-top:4px solid currentColor;padding-top:1.1em}
.qa p{margin:0}

/* ---------- FORM ---------- */
.form{max-width:900px}
.form__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.form label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700}
.form__full{margin-top:18px;display:block}
input,select,textarea{
  display:block;
  width:100%;
  margin-top:8px;
  font-family:"Space Grotesk",Arial,sans-serif;
  font-size:1rem;
  letter-spacing:normal;
  text-transform:none;
  padding:.75em .8em;
  border:3px solid var(--ink);
  border-radius:0;
  background:#fff;
  color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:4px solid var(--forest);outline-offset:0}
textarea{resize:vertical}
.check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:20px 0;
  text-transform:none;
  letter-spacing:normal;
  font-weight:400;
  font-size:.92rem;
}
.check input{width:22px;height:22px;margin:2px 0 0;flex:0 0 auto}
.formmsg{margin-top:16px;font-weight:700}
.formmsg.ok{color:var(--forest)}
.formmsg.err{color:#1C1C1C;background:var(--mint);display:inline-block;padding:.4em .7em;border:3px solid var(--ink)}

/* ---------- FOOTER ---------- */
.footer .kicker{margin-bottom:.8em}
.footer p{font-size:.95rem}
.footer a{text-decoration:none;border-bottom:1px solid currentColor}
.footer a:hover{border-bottom-width:3px}
.social{list-style:none;margin:0;padding:0}
.social li{margin:0 0 .5em}
.social a{display:inline-flex;align-items:center;gap:10px;border-bottom:none;font-size:.95rem}
.social a:hover{text-decoration:underline}
.social svg{width:22px;height:22px;flex:0 0 auto}
.footer__bottom{
  margin-top:clamp(28px,4vw,56px);
  padding-top:18px;
  border-top:4px solid currentColor;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  font-size:.85rem;
}
.footer__bottom p{margin:0}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .cols--4{grid-template-columns:repeat(2,1fr)}
  .cols--3{grid-template-columns:1fr}
}
@media (max-width:820px){
  .navtoggle{display:block}
  .nav{
    display:none;
    position:absolute;
    left:0;right:0;
    top:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--ink);
    border-bottom:6px solid var(--forest);
    padding:10px 4vw 20px;
  }
  .nav.open{display:flex}
  .nav a{width:100%;padding:14px 0;border-bottom:2px solid rgba(246,243,236,.25);font-size:.9rem}
  .nav a.btn{margin-top:14px;width:auto;border:3px solid var(--mint)}
  .band--right .zag{margin-left:0;text-align:left}
  .band--right .zag .pricelist li,
  .band--right .zag .flatlist li{flex-direction:row}
  .band--right .zag .cta-row{justify-content:flex-start}
  .band--right .lead{margin-left:0}
  .band--tall .band__inner{min-height:0}
  .form__grid{grid-template-columns:1fr}
  .factstrip li + li{border-left:none;border-top:2px solid var(--ink);padding-left:0}
}
@media (max-width:520px){
  .cols--4{grid-template-columns:1fr}
  .pricelist li{flex-direction:column;gap:4px}
  .brand{font-size:1.5rem}
}