/* Yard & Board — bright, practical, source-forward. Type: Inter + light mono numerals. */
:root{
  --bg:#ffffff;
  --band:#f3f8fb;
  --ink:#1c2b36;
  --muted:#5b6d7c;
  --primary:#0b7dc2;
  --primary-dark:#085e93;
  --amber:#f6a41d;
  --green:#35975a;
  --border:#dde6ec;
  --line:#edf3f7;
  --footer:#14212c;
  --card:#ffffff;
  --shadow:0 10px 28px rgba(28,43,54,.08);
  --shadow-soft:0 4px 14px rgba(28,43,54,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font:16px/1.65 "Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:70rem;margin:0 auto;padding:0 1.25rem}
a{color:var(--primary-dark);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#064a73}
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(11,125,194,.28);
  outline-offset:3px;
}
h1,h2,h3{letter-spacing:0;color:var(--ink);line-height:1.15}
h1{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:800;margin:.3rem 0 1rem}
h2{font-size:1.8rem;font-weight:800;margin:2.8rem 0 1rem}
h3{font-size:1.08rem;font-weight:750;margin:1rem 0 .45rem}
p{margin:.7rem 0}
svg{display:block}

/* header */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(28,43,54,.02);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  gap:.8rem 1.25rem;
  min-height:4.25rem;
  padding-top:.7rem;
  padding-bottom:.7rem;
}
.wordmark{
  color:var(--ink);
  font-size:1.28rem;
  font-weight:800;
  letter-spacing:-.02em;
  text-decoration:none;
  white-space:nowrap;
}
.wordmark span{color:var(--primary)}
.site-header nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:.18rem;
  margin-left:auto;
}
.site-header nav a{
  color:var(--ink);
  border-radius:.5rem;
  padding:.48rem .62rem;
  font-size:.9rem;
  font-weight:650;
  line-height:1.15;
  text-decoration:none;
}
.site-header nav a:hover{background:var(--band);color:var(--primary-dark)}
.site-header nav a.nav-button{
  background:var(--primary-dark);
  color:#fff;
  padding:.56rem .82rem;
  margin-left:.15rem;
}
.site-header nav a.nav-button:hover{background:#064a73;color:#fff}

/* shared prose + layout */
main.wrap{padding-top:2.4rem;padding-bottom:4rem}
.prose{max-width:44rem}
.prose h1{font-size:clamp(2rem,4vw,3rem)}
.prose h2{
  margin-top:2.5rem;
  padding-top:.35rem;
  border-top:1px solid var(--border);
}
.prose h3{margin-top:1.8rem}
.lede{font-size:1.12rem;color:var(--muted);max-width:46rem}
.disclaimer{
  margin:2rem 0 0;
  padding:.85rem 1rem;
  color:var(--muted);
  background:var(--band);
  border-left:4px solid var(--primary);
  border-radius:.45rem;
  font-size:.9rem;
}
.bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
}

/* cards + grids */
.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  gap:1rem;
  margin:1.4rem 0 2rem;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:.5rem;
  padding:1.25rem;
  box-shadow:0 1px 0 rgba(28,43,54,.03);
}
.tool-grid .card{
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.tool-grid .card:hover{
  border-color:#b8d6e7;
  box-shadow:var(--shadow-soft);
  transform:translateY(-1px);
}
.tool-grid .card h2,
.tool-grid .card h3{
  margin-top:0;
  font-size:1.08rem;
}
.tool-grid .card p{
  color:var(--muted);
  font-size:.95rem;
}
.cta,
.card a.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-height:44px;
  padding:.7rem 1rem;
  border:0;
  border-radius:.6rem;
  background:var(--primary-dark);
  color:#fff;
  font:700 .92rem/1 "Inter",system-ui,sans-serif;
  text-decoration:none;
  cursor:pointer;
}
.cta:hover,
.card a.cta:hover{background:#064a73;color:#fff}
.cta-inline{
  color:var(--primary-dark);
  font-weight:700;
  text-decoration-thickness:1.5px;
}

/* homepage */
.home-hero{
  max-width:58rem;
  margin:0 auto;
  padding:4.6rem 0 3.2rem;
  text-align:center;
}
.home-hero h1{
  max-width:52rem;
  margin:0 auto 1rem;
  font-size:clamp(2.6rem,6vw,3.8rem);
  font-weight:800;
  letter-spacing:-.02em;
}
.home-hero .lede{
  margin:0 auto;
  max-width:48rem;
  font-size:1.14rem;
}
.project-picker{
  display:flex;
  align-items:center;
  gap:.7rem;
  max-width:44rem;
  margin:2rem auto .85rem;
  padding:.45rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:0 14px 35px rgba(28,43,54,.14);
}
.project-picker select{
  flex:1;
  width:100%;
  min-width:0;
  min-height:3.35rem;
  border:0;
  border-radius:.75rem;
  padding:0 1rem;
  background:#fff;
  color:var(--ink);
  font:650 1rem/1.2 "Inter",system-ui,sans-serif;
}
.project-picker select:focus-visible{outline-offset:0}
.hero-picker__button{
  min-height:3.35rem;
  padding:.9rem 1.45rem;
  border-radius:999px;
  background:var(--amber);
  color:var(--ink);
  white-space:nowrap;
}
.hero-picker__button:hover{background:#df9111;color:var(--ink)}
.trust-line{
  margin:.75rem auto 1.7rem;
  color:var(--muted);
  font-size:.94rem;
}
.category-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem;
  margin-top:1.9rem;
}
.category-strip a{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:3rem;
  padding:.4rem .8rem .4rem .42rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-weight:700;
  font-size:.92rem;
  text-decoration:none;
  box-shadow:0 1px 0 rgba(28,43,54,.03);
}
.category-strip a:hover{
  border-color:#b8d6e7;
  box-shadow:var(--shadow-soft);
}
.category-strip .chip-icon{
  display:grid;
  place-items:center;
  width:2.18rem;
  height:2.18rem;
  border-radius:50%;
  background:var(--band);
  color:var(--primary-dark);
}
.category-strip svg{width:1.25rem;height:1.25rem;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.home-section{
  padding:2.3rem 0 .7rem;
  scroll-margin-top:5.25rem;
}
.home-section h2{
  margin-top:0;
  margin-bottom:1rem;
  font-size:1.8rem;
}
.home-tool-grid{
  grid-template-columns:repeat(auto-fit,minmax(14.8rem,1fr));
  gap:1.15rem;
}
.home-tool-card.card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
  min-height:19rem;
}
.home-card-art{
  display:grid;
  place-items:center;
  min-height:6.9rem;
  color:#fff;
}
.home-card-art svg{
  width:3.25rem;
  height:3.25rem;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.home-card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:1.05rem 1.08rem 1.12rem;
}
.home-card-body h3{
  margin:0 0 .45rem;
  font-size:1.06rem;
}
.home-card-body h3 a{
  color:var(--ink);
  text-decoration:none;
}
.home-card-body h3 a:hover{color:var(--primary-dark)}
.home-card-body p{
  margin:0 0 1rem;
  color:var(--muted);
  font-size:.93rem;
  line-height:1.5;
}
.text-arrow{
  margin-top:auto;
  color:var(--primary-dark);
  font-weight:750;
  text-decoration:none;
}
.text-arrow:hover{text-decoration:underline}
.tint-garden .home-card-art{background:var(--green)}
.tint-deck .home-card-art{background:#a36a22}
.tint-hardscape .home-card-art{background:#5d778a}
.tint-water .home-card-art{background:#0b7dc2}
.tint-energy .home-card-art{background:#6d4bc1}

.why-band{
  margin-top:3rem;
  padding:3.6rem 0;
  background:var(--band);
}
.why-band h2,
.roi-band h2,
.guides-teaser h2{
  margin-top:0;
}
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}
.why-item{
  display:grid;
  grid-template-columns:2.6rem 1fr;
  gap:.9rem;
  align-items:start;
}
.why-icon{
  display:grid;
  place-items:center;
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  background:#fff;
  color:var(--primary-dark);
  border:1px solid var(--border);
}
.why-icon svg{width:1.35rem;height:1.35rem;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.why-item h3{margin:.1rem 0 .35rem;font-size:1.05rem}
.why-item p{margin:0;color:var(--muted);font-size:.95rem}
.roi-band{
  padding:3.7rem 0;
  background:var(--footer);
  color:#dce8ef;
}
.roi-band h2{color:#fff}
.roi-band p{max-width:44rem;color:#dce8ef}
.roi-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.25rem;
  margin-top:1.35rem;
}
.roi-actions .cta{
  background:var(--amber);
  color:var(--ink);
  border-radius:999px;
}
.roi-actions .cta:hover{background:#df9111;color:var(--ink)}
.roi-actions a:not(.cta){
  color:#b9e4ff;
  font-weight:700;
}
.guides-teaser{
  padding:3.2rem 0 .5rem;
}
.guide-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem 1.5rem;
  max-width:48rem;
}
.guide-links a{
  color:var(--primary-dark);
  font-weight:700;
}
.all-guides{
  display:inline-flex;
  margin-top:1.1rem;
  font-weight:800;
  text-decoration:none;
}
.all-guides:hover{text-decoration:underline}

/* calculator form */
.calc{max-width:44rem}
.calc h1{font-size:clamp(2rem,4vw,3rem)}
.calc form{
  display:grid;
  gap:1rem;
  margin:1.4rem 0;
  padding:1.35rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:.6rem;
  box-shadow:var(--shadow-soft);
}
.calc label{
  display:block;
  margin-bottom:.35rem;
  color:var(--ink);
  font-size:.9rem;
  font-weight:750;
}
.calc input,
.calc select,
.calc textarea{
  width:100%;
  min-height:48px;
  border:1px solid #cbd9e2;
  border-radius:.5rem;
  padding:.72rem .8rem;
  background:#fff;
  color:var(--ink);
  font:1rem/1.25 "Inter",system-ui,sans-serif;
}
.calc input:focus,
.calc select:focus,
.calc textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(11,125,194,.14);
  outline:none;
}
.calc .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.calc button{
  min-height:48px;
  border:0;
  border-radius:.6rem;
  padding:.85rem 1.25rem;
  background:var(--primary-dark);
  color:#fff;
  font:800 .95rem/1 "Inter",system-ui,sans-serif;
  cursor:pointer;
}
.calc button:hover{background:#064a73}
.result{
  margin-top:1.35rem;
  padding:1.15rem 1.25rem;
  background:#fff;
  border:1px solid var(--border);
  border-left:4px solid var(--primary);
  border-radius:.55rem;
  box-shadow:0 1px 0 rgba(28,43,54,.03);
}
.result strong{
  color:var(--ink);
  font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:0;
}
.result .range,
.result .num{
  font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}
.result .range{color:var(--primary-dark)}
.hint{font-size:.86rem;color:var(--muted);margin:.35rem 0 0}

/* tables */
table{
  width:100%;
  margin:1.2rem 0;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  border-radius:.6rem;
}
th,
td{
  padding:.72rem .8rem;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
  font-size:.92rem;
}
tr:last-child th,
tr:last-child td{border-bottom:0}
thead th{
  background:var(--band);
  color:var(--ink);
  font-weight:800;
  font-size:.82rem;
}
td:nth-child(n+2){
  font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  font-size:.88rem;
  font-feature-settings:"tnum";
}
th[scope="row"],
tbody th{
  font-weight:750;
  font-family:"Inter",system-ui,sans-serif;
}

/* footer */
.site-footer{
  margin-top:2.5rem;
  background:var(--footer);
  color:#dce8ef;
}
.site-footer .wrap{
  padding-top:2.4rem;
  padding-bottom:2.6rem;
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(14rem,1.2fr) repeat(3,minmax(9rem,1fr));
  gap:2rem;
}
.foot-brand{
  margin:0;
  color:#fff;
  font-weight:800;
  font-size:1.05rem;
}
.foot-note{
  margin:.55rem 0 0;
  max-width:22rem;
  color:#a9bfce;
  font-size:.9rem;
}
.footer-column h2{
  margin:0 0 .6rem;
  color:#fff;
  font-size:.88rem;
  letter-spacing:0;
}
.footer-column nav{
  display:grid;
  gap:.35rem;
}
.site-footer a{
  color:#cbeeff;
  text-decoration:none;
}
.site-footer a:hover{text-decoration:underline}
.footer-column a{
  color:#a9bfce;
  font-size:.9rem;
}
.foot-legal{
  margin:2rem 0 0;
  padding-top:1rem;
  border-top:1px solid rgba(221,230,236,.18);
  color:#a9bfce;
  font-size:.88rem;
}

@media (max-width:56rem){
  .site-header .wrap{align-items:flex-start;flex-direction:column}
  .site-header nav{justify-content:flex-start;margin-left:0}
  .why-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}

@media (max-width:42rem){
  main.wrap{padding-top:1.4rem}
  .home-hero{padding:3.4rem 0 2.3rem}
  .project-picker{display:grid;gap:.45rem;padding:.55rem;border-radius:.85rem}
  .project-picker select{min-height:3rem}
  .hero-picker__button{width:100%;border-radius:.7rem}
  .category-strip{justify-content:flex-start}
  .category-strip a{width:100%}
  .home-tool-grid{grid-template-columns:1fr}
  .calc .row{grid-template-columns:1fr}
  .guide-links{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  table{display:block;overflow-x:auto}
}