/* ==========================================================================
   Western Recyclers — WRI brand (see claude/wri-brand-guide.md)
   Tokens only; derived shades are mixes of tokens, noted inline.
   ========================================================================== */

:root{
  /* Tier 1 — brand tokens */
  --green:#59C65B;          /* THE brand green — CTAs, icons, accents */
  --green-deep:#3B8F3D;     /* hover states; large green text on light */
  --green-tint:#EAF7EB;     /* card/section tint */
  --charcoal:#2B2B2B;
  --grey:#6D6D6D;
  --offwhite:#F7F7F7;
  --white:#FFFFFF;

  /* Tier 2 — derived (token mixes, contrast-validated) */
  --green-ink:#387B39;      /* green-deep + 20% charcoal — small green text on light, >=4.5:1 */
  --green-hover:#53B355;    /* green + 12% charcoal — button hover, keeps charcoal text >=4.5:1 */
  --line:#E4E4E4;           /* decorative borders (grey tint) */
  --ink-soft:#CFCFCF;       /* light text on charcoal, 9:1 */

  /* Semantic */
  --font-display:"Teko","Arial Narrow",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:8px;
  --shadow:0 1px 2px rgba(43,43,43,.06),0 4px 12px rgba(43,43,43,.07);
  --shadow-lift:0 2px 4px rgba(43,43,43,.08),0 10px 24px rgba(43,43,43,.10);

  accent-color:var(--green-deep);
}

*{box-sizing:border-box}
html{margin:0;padding:0}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--white);
  line-height:1.6;
  font-size:1.0625rem; /* 17px */
}
h1,h2,h3,h4,p,ul,table,figure{margin:0;padding:0}
img{max-width:100%;display:block;height:auto}
picture{display:block}
a{color:var(--green-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px;border-radius:2px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--green);color:var(--charcoal);font-weight:700;
  padding:12px 20px;border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:24px}

/* Display type — Teko echoes the logo wordmark */
.hero h1,.page-hero h1,h2.title,.band h2{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.02;
}

/* Top utility bar */
.topbar{background:var(--charcoal);color:var(--ink-soft);font-size:.875rem;padding-block:7px}
.topbar .wrap{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.topbar a{color:var(--white);font-weight:600;padding-block:2px}
.topbar a:hover{color:var(--green);text-decoration:none}

/* Header */
header.site{
  background:var(--white);
  border-bottom:3px solid var(--green);
  position:sticky;top:0;z-index:50;
  box-shadow:var(--shadow);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center}
.brand img{width:auto;height:60px}
nav.main{display:flex;gap:4px;align-items:center}
nav.main a{
  color:var(--charcoal);font-weight:600;font-size:.9375rem;
  padding:10px 13px;border-radius:6px;
  transition:background-color .18s ease,color .18s ease;
}
nav.main a:hover{background:var(--green-tint);text-decoration:none}
nav.main a.active{color:var(--green-ink)}
nav.main a.cta{background:var(--green);color:var(--charcoal)}
nav.main a.cta:hover{background:var(--green-hover)}
#navtoggle{
  display:none;background:none;border:1px solid var(--grey);border-radius:6px;
  padding:8px 12px;font-size:1.25rem;line-height:1;cursor:pointer;color:var(--charcoal);
  min-inline-size:44px;min-block-size:44px;
}

/* Buttons */
.btn{
  display:inline-block;padding:13px 26px;border-radius:var(--radius);
  font-weight:700;font-size:1rem;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{text-decoration:none}
.btn.primary{background:var(--green);color:var(--charcoal)}
.btn.primary:hover{background:var(--green-hover)}
.btn.dark{background:var(--charcoal);color:var(--white)}
.btn.dark:hover{background:#000}
.btn.ghost{border:2px solid var(--ink-soft);color:var(--white);margin-inline-start:10px}
.btn.ghost:hover{border-color:var(--white)}

/* Hero — charcoal, where the green pops hardest */
.hero{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'%3E%3Cg stroke-linecap='round' stroke-width='38'%3E%3Ccircle cx='200' cy='200' r='150' stroke='%2359C65B' opacity='.16' stroke-dasharray='320 623' transform='rotate(-38 200 200)'/%3E%3Ccircle cx='200' cy='200' r='150' stroke='%23F7F7F7' opacity='.06' stroke-dasharray='320 623' transform='rotate(142 200 200)'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -8rem center / 42rem auto,
    radial-gradient(52rem 30rem at 88% -20%,rgba(89,198,91,.22),transparent 65%),
    var(--charcoal);
  color:var(--white);
  padding-block:80px 88px;
}
.hero h1{
  font-size:clamp(2.75rem,2rem + 3vw,4.5rem);
  max-width:24ch;
}
.hero h1 em{color:var(--green);font-style:normal}
.hero p.lead{margin-block:16px 32px;font-size:1.1875rem;color:var(--ink-soft);max-width:56ch}

/* Trust bar */
.trust{background:var(--green-tint);border-bottom:1px solid var(--line)}
.trust .wrap{
  display:flex;gap:8px 36px;flex-wrap:wrap;justify-content:center;
  padding-block:14px;font-weight:600;font-size:.9375rem;color:var(--green-ink);
}
.trust span::before{content:"✓ "}

/* Sections */
section.block{padding-block:72px}
section.alt{background:var(--offwhite);border-block:1px solid var(--line)}
.kicker{
  color:var(--green-ink);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:.8125rem;
}
h2.title{
  font-size:clamp(2.25rem,1.8rem + 2vw,3.25rem);
  margin-block:4px 14px;color:var(--charcoal);
}
p.sub{color:var(--grey);max-width:66ch;margin-block-end:40px}

/* Cards */
.grid{display:grid;gap:28px}
.grid.services{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:box-shadow .2s ease,transform .2s ease;
}
.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.card img,.card picture{aspect-ratio:16/10;width:100%;object-fit:cover}
.card .pad{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-size:1.1875rem;line-height:1.3;color:var(--charcoal)}
.card p{font-size:.9375rem;color:var(--grey);flex:1}
.card .more{font-weight:700;font-size:.9375rem;padding-block:4px}
.badge{
  display:inline-block;background:var(--green-tint);color:var(--green-ink);
  font-size:.78125rem;font-weight:700;padding:3px 10px;border-radius:20px;width:max-content;
}

/* Split section */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.split > img,.split > picture{border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.checklist{list-style:none;margin-block:16px 26px}
.checklist li{padding:6px 0 6px 30px;position:relative}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--green-ink);font-weight:800}

/* Info cards / hours */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.info-card{
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);
}
.info-card h3{
  font-family:var(--font-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.25rem;color:var(--charcoal);margin-block-end:8px;
}
.info-card p,.info-card td{font-size:1rem}
.info-card a{font-weight:600}
table.hours{width:100%;border-collapse:collapse}
table.hours td{padding-block:4px;color:var(--charcoal)}
table.hours td:last-child{text-align:right;font-weight:600}
table.hours tr.closed td:last-child{color:var(--grey);font-weight:500}

/* Pricing table */
table.pricing{
  width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
table.pricing th{background:var(--charcoal);color:var(--white);text-align:left;padding:12px 18px;font-size:.9375rem}
table.pricing td{padding:12px 18px;border-top:1px solid var(--line);font-size:1rem}
table.pricing td:last-child{font-weight:700;color:var(--green-ink);white-space:nowrap}

/* Materials */
.mat{
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow);margin-block-end:22px;
}
.mat h3{color:var(--charcoal);font-size:1.3125rem;margin-block-end:6px;display:flex;align-items:center;gap:10px}
.mat h3 .tick{color:var(--green-ink);font-size:1.375rem}
.mat p{color:var(--grey);font-size:1rem}

/* FAQ — plain visible Q&A; kept out of <details> so search engines and
   assistants read the answers without needing to expand anything */
.faq{max-width:74ch}
.faq h3{
  font-size:1.125rem;color:var(--charcoal);margin-block-start:28px;
  padding-block-start:22px;border-block-start:1px solid var(--line);
}
.faq h3:first-child{margin-block-start:0;padding-block-start:0;border-block-start:0}
.faq p{color:var(--grey);margin-block-start:8px}
.faq strong{color:var(--charcoal)}

/* CTA band — the one full-green statement on the page */
.band{background:var(--green);color:var(--charcoal);text-align:center;padding:60px 20px}
.band h2{font-size:clamp(2rem,1.6rem + 1.8vw,2.875rem)}
.band p{color:var(--charcoal);margin-block:8px 26px;font-size:1.0625rem}
.band .btn.primary{background:var(--charcoal);color:var(--white)}
.band .btn.primary:hover{background:#000}

/* Forms */
form.contact{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.contact .full{grid-column:1/-1}
label{font-weight:600;font-size:.90625rem;display:block;margin-block-end:5px;color:var(--charcoal)}
label .req{color:#B00020}
label .form-opt{font-weight:400;color:var(--grey)}
input,textarea,select{
  width:100%;padding:12px 14px;border:1px solid var(--grey);border-radius:var(--radius);
  font-size:1rem;font-family:inherit;background:var(--white);color:var(--charcoal);
}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--green-deep);outline-offset:0;border-color:var(--green-deep)}
input:user-invalid,textarea:user-invalid{border-color:#B00020}
textarea{min-height:140px;resize:vertical}
select{
  appearance:none;cursor:pointer;padding-inline-end:42px;
  /* chevron in --grey; inlined so the control needs no extra request */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236D6D6D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
form.contact button[type=submit][aria-disabled=true]{opacity:.65;cursor:progress}
::placeholder{color:var(--grey);opacity:1}
form.contact button[type=submit]{border:0;cursor:pointer;width:100%;font-family:inherit}
.form-note{font-size:.875rem;color:var(--grey)}
.form-msg{display:none;padding:14px 16px;border-radius:var(--radius);font-weight:600;margin-block-start:4px}
.form-msg.ok{display:block;background:var(--green-tint);color:var(--green-ink);border:1px solid var(--green-deep)}
.form-msg.err{display:block;background:#FDECEC;color:#8C1C13;border:1px solid #B00020}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Map */
.map{border:0;width:100%;height:340px;border-radius:var(--radius);box-shadow:var(--shadow)}

/* Footer */
footer.site{background:var(--charcoal);color:var(--ink-soft);padding-block:56px 24px;font-size:.9375rem}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-block-end:36px}
footer.site h3{
  font-family:var(--font-display);font-weight:500;color:var(--white);
  font-size:1.375rem;text-transform:uppercase;letter-spacing:.06em;margin-block-end:12px;
}
footer.site a{color:var(--white)}
footer.site a:hover{color:var(--green)}
footer.site ul{list-style:none}
footer.site li{margin-block:7px}
.footbrand b{color:var(--white);font-size:1.0625rem}
.footbrand .tag{color:var(--green);font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.footbrand p{margin-block-start:12px}
.copyright{border-top:1px solid rgba(247,247,247,.16);padding-block-start:18px;text-align:center;color:var(--ink-soft);font-size:.84375rem}

/* Interior page hero */
.page-hero{
  background:
    radial-gradient(40rem 22rem at 92% -30%,rgba(89,198,91,.22),transparent 65%),
    var(--charcoal);
  color:var(--white);padding-block:56px;
}
.page-hero h1{font-size:clamp(2.5rem,2rem + 2.4vw,3.75rem)}
.page-hero p{color:var(--ink-soft);margin-block-start:8px;max-width:60ch}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}

@media (pointer:coarse){
  nav.main a{padding:14px 16px}
  .topbar a{padding-block:8px;display:inline-block}
  .card .more,.info-card a,footer.site a{padding-block:10px;display:inline-block}
  .checklist li{padding-block:8px}
}

@media (max-width:880px){
  .split{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);
    flex-direction:column;align-items:stretch;padding:10px 16px 16px;
    border-bottom:3px solid var(--green);box-shadow:var(--shadow-lift);
  }
  nav.main.open{display:flex}
  #navtoggle{display:block}
  form.contact{grid-template-columns:1fr}
  .hero{padding-block:56px 64px}
  .btn.ghost{margin-inline-start:0;margin-block-start:12px}
  .brand img{height:44px}
}