/* ==========================================================================
   Green Wood Tractor LLC — base system
   World: NCR carbon-copy work order. Cut and printed, never soft.
   ========================================================================== */

:root{
  --canary:#F2D64B;
  --canary-dk:#D9BC30;
  --field:#1E2B14;
  --green:#49742F;
  --green-dk:#375822;
  --green-text:#375822;   /* green for TEXT on light grounds - AA on limestone, canary and paper */
  --ink:#16233F;
  --ink-60:#5A6478;
  --limestone:#E9E7DE;
  --limestone-dk:#D8D5C9;
  --stamp:#B4342A;
  --carbon:#E9A8B4;
  --paper:#FBFBF8;

  --f-display:"Archivo Black",Impact,sans-serif;
  --f-body:"Barlow",system-ui,sans-serif;
  --f-cond:"Barlow Condensed",system-ui,sans-serif;
  --f-hand:"Caveat",cursive;

  --wrap:1220px;
  --s:8px;
  --rule:2px solid var(--ink);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--limestone);
  color:var(--ink);
  font:400 17px/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Radius is zero site-wide. This world is cut, not rounded. */
button,input,textarea,select,img,figure,a{border-radius:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--canary);color:var(--ink);padding:12px 20px;
  font:700 15px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.08em;
}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--stamp);outline-offset:3px}

/* ---------- type ---------- */

.h2{
  font:400 clamp(30px,4.4vw,50px)/1.06 var(--f-display);
  letter-spacing:-.015em;
  margin:0 0 14px;
  text-wrap:balance;
}
.h2--light{color:var(--paper)}

.eyebrow{
  font:600 14px/1 var(--f-cond);
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--green-text);
  margin:0 0 14px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";flex:1;height:2px;background:var(--ink);opacity:.16;max-width:120px}

.kicker{
  font:600 13px/1 var(--f-cond);
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink-60);margin:0 0 18px;
}

/* 62ch is the comfortable reading measure — it earns its place on a real
   multi-line paragraph. `balance` stops a two-line lede breaking 9 words / 1. */
.lede{font-size:19px;max-width:62ch;margin:0 0 34px;color:var(--ink-60);text-wrap:balance}

/* --green (#49742F) is only 4.43:1 on limestone and 3.79:1 on canary — both
   under AA. Text-on-light green is a darker token; the brand green stays for
   fills, where it sits under white and passes easily. */
.lnk{
  display:inline-block;
  font:700 15px/1 var(--f-cond);
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--green-text);
  text-decoration:none;
  border-bottom:2px solid var(--green-text);
  padding-bottom:4px;
}
.lnk:hover{color:var(--ink);border-color:var(--ink)}

.stars,.rev__stars{color:var(--stamp);letter-spacing:.12em}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:15px 26px;
  font:700 16px/1 var(--f-cond);
  text-transform:uppercase;letter-spacing:.1em;
  text-decoration:none;
  border:var(--rule);
  background:var(--paper);color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}

.btn--phone{background:var(--green);color:#fff;border-color:var(--ink)}
.btn--phone:hover{background:var(--green-dk)}
.btn--canary{background:var(--canary);color:var(--ink)}
.btn--canary:hover{background:var(--canary-dk)}
.btn--stamp{background:var(--canary);color:var(--ink)}
.btn--ghost{background:transparent;box-shadow:4px 4px 0 rgba(22,35,63,.28)}
.btn--ghost:hover{background:var(--paper)}
.btn--big{padding:19px 34px;font-size:18px}
.btn--full{width:100%}

@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active{transition:none;transform:none}
}

/* ---------- header ---------- */

.hdr{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  border-bottom:var(--rule);
}
.hdr__bar{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:10px 24px;
  display:flex;align-items:center;gap:28px;
}
.hdr__brand{flex:0 0 auto;display:block}
.hdr__brand img{width:132px;height:auto}

.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav__list > li > a,.nav__toggle{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px;
  font:600 15px/1 var(--f-cond);
  text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink);text-decoration:none;
  background:none;border:0;cursor:pointer;font-family:var(--f-cond);
}
.nav__list > li > a:hover,.nav__toggle:hover{background:var(--limestone)}
.nav__caret{width:0;height:0;border:5px solid transparent;border-top-color:var(--green);margin-top:3px}

.nav__has-sub{position:relative}
.nav__sub{
  position:absolute;top:100%;left:0;min-width:264px;
  list-style:none;margin:0;padding:6px;
  background:var(--paper);
  border:var(--rule);
  box-shadow:6px 6px 0 rgba(22,35,63,.2);
  display:none;
}
.nav__has-sub.is-open .nav__sub{display:block}
.nav__sub a{
  display:block;padding:11px 14px;
  font:500 16px/1.2 var(--f-body);
  color:var(--ink);text-decoration:none;
}
.nav__sub a:hover{background:var(--canary)}
.nav__sub-all{border-top:2px solid var(--limestone-dk);margin-top:6px}
.nav__sub-all a{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--green-text)}

.hdr__cta{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.hdr__tel{text-decoration:none;display:block;line-height:1.1}
.hdr__tel-label{
  display:block;font:600 11px/1 var(--f-cond);
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink-60);
}
.hdr__tel-num{display:block;font:400 21px/1.2 var(--f-display);color:var(--ink)}
.hdr__tel:hover .hdr__tel-num{color:var(--green-text)}

.hdr__burger{
  display:none;width:48px;height:44px;
  background:var(--canary);border:var(--rule);
  cursor:pointer;padding:11px 10px;
  flex-direction:column;justify-content:space-between;
}
.hdr__burger span{display:block;height:3px;background:var(--ink)}

/* ---------- footer ---------- */

.ftr{background:var(--field);color:#CFD6C6;margin-top:0}
.ftr__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:44px;
  padding-block:64px 52px;
}
.ftr__brand img{width:180px;margin-bottom:20px}
.ftr__nap{margin:0;line-height:1.8;font-size:16px}
.ftr__nap a{color:var(--canary);font-weight:600;text-decoration:none}
.ftr__nap a:hover{text-decoration:underline}

.ftr__col h3{
  font:600 14px/1 var(--f-cond);
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--canary);margin:0 0 18px;
}
.ftr__col ul{list-style:none;margin:0 0 20px;padding:0}
.ftr__col li{margin-bottom:9px;font-size:15.5px}
/* :not(.btn) matters — `.ftr__col a` is 0,1,1 and silently outranks the 0,1,0
   `.btn--canary`, which repainted the footer button's text pale grey on yellow */
.ftr__col a:not(.btn){color:#CFD6C6;text-decoration:none}
.ftr__col a:not(.btn):hover{color:#fff;text-decoration:underline}
.ftr__hours li{display:flex;gap:10px}
.ftr__hours span{color:#8FA080;min-width:62px;font-weight:600}

.ftr__base{border-top:2px solid rgba(255,255,255,.14)}
.ftr__base-in{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:20px;
  font:500 13.5px/1.5 var(--f-body);color:#8FA080;
}
.ftr__base p{margin:0}
.ftr__mock{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.14em}

/* ---------- mobile call bar ---------- */

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:99;
  display:none;align-items:center;justify-content:center;gap:10px;
  padding:15px 16px;
  background:var(--green);color:#fff;text-decoration:none;
  border-top:3px solid var(--ink);
}
.callbar span{font:600 13px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.14em;opacity:.9}
.callbar strong{font:400 19px/1 var(--f-display)}

/* ---------- responsive ---------- */

@media (max-width:1080px){
  .hdr__cta .btn{display:none}
  .nav__list > li > a,.nav__toggle{padding:10px;font-size:14px}
}

@media (max-width:920px){
  .hdr__bar{gap:14px;padding:10px 18px}
  .hdr__burger{display:flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:var(--rule);
    margin:0;padding:8px 18px 22px;
    display:none;
    max-height:calc(100vh - 76px);overflow-y:auto;
  }
  .nav.is-open{display:block}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list > li{border-bottom:2px solid var(--limestone-dk)}
  .nav__list > li > a,.nav__toggle{
    width:100%;padding:16px 4px;font-size:17px;justify-content:space-between;
  }
  .nav__sub{
    position:static;display:none;min-width:0;
    border:0;box-shadow:none;background:var(--limestone);
    margin:0 0 10px;
  }
  .nav__has-sub.is-open .nav__sub{display:block}
  .hdr__tel-num{font-size:18px}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:34px;padding-block:48px 40px}
}

@media (max-width:620px){
  body{font-size:16.5px}
  .wrap{padding-inline:18px}
  .hdr__tel{display:none}
  .ftr__grid{grid-template-columns:1fr;gap:32px}
  .callbar{display:flex}
  body{padding-bottom:64px}
  .btn{width:100%}
}