@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Longwood Handyman — classic American workshop.
   Palette: barn red #8C3A2B, saddle tan #C9A66B, charcoal #2B2622.
   Slab serif headings, humanist sans body. Warm, worn, competent —
   a shop apron, not a startup.
   ========================================================================== */

:root{
  --barn:     #8C3A2B;
  --barn-dk:  #6F2D21;
  --tan:      #C9A66B;
  --tan-dk:   #A9814A;
  --char:     #2B2622;
  --char-2:   #3C352F;
  --paper:    #F6EFE2;
  --paper-2:  #EFE4CE;
  --ink:      #241F1B;
  --ink-2:    #57493A;
  --line:     #DCCBA6;
  --white:    #FFFDF8;
  --ok:       #4C6B3C;
  --slab: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Roboto Slab', Georgia, serif;
  --radius: 3px;
  --shadow: 0 2px 0 rgba(43,38,34,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--barn)}
a:hover{color:var(--barn-dk)}
h1,h2,h3,h4{
  font-family:var(--slab); color:var(--char); line-height:1.15; margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,4.4vw,3.1rem); font-weight:800}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:700}
h3{font-size:1.25rem; font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.narrow{max-width:820px}
section{padding:56px 0}
.section-alt{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-dark{background:var(--char); color:var(--paper-2)}
.section-dark h2, .section-dark h3{color:var(--white)}
.eyebrow{
  font-family:var(--mono); font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; font-size:.72rem; color:var(--barn);
  display:block; margin-bottom:.6em;
}
.section-dark .eyebrow{color:var(--tan)}
.lede{font-size:1.15rem; color:var(--ink-2); max-width:66ch}

/* ---- Header ---- */
header.site{
  background:var(--white); border-bottom:3px solid var(--barn);
  position:sticky; top:0; z-index:50;
}
.header-row{
  max-width:1120px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-logo{height:46px; width:auto}
nav.main{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
nav.main a{
  font-family:var(--mono); font-weight:700; font-size:.83rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--char); text-decoration:none; padding:6px 0;
  border-bottom:2px solid transparent;
}
nav.main a:hover, nav.main a.active{color:var(--barn); border-bottom-color:var(--barn)}
.header-cta{display:flex; align-items:center; gap:14px}
.navtoggle{display:none}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.85rem;
  padding:13px 24px; border-radius:var(--radius); text-decoration:none;
  border:2px solid var(--barn); background:var(--barn); color:var(--white);
  box-shadow:var(--shadow); transition:transform .08s ease;
}
.btn:hover{background:var(--barn-dk); border-color:var(--barn-dk); color:var(--white)}
.btn.ghost{background:transparent; color:var(--barn)}
.btn.ghost:hover{background:var(--barn); color:var(--white)}
.btn.tan{background:var(--tan); border-color:var(--tan-dk); color:var(--char)}
.btn.tan:hover{background:var(--tan-dk); border-color:var(--tan-dk); color:var(--white)}
.btn svg{width:16px; height:16px; stroke:currentColor}

/* ---- Hero ---- */
.hero{
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  border-bottom:1px solid var(--line); padding:64px 0 56px;
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center}
.hero h1{margin-bottom:.4em}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}
.hero-panel{
  background:var(--char); color:var(--paper-2); border-radius:var(--radius);
  padding:26px; box-shadow:0 10px 0 rgba(43,38,34,.12);
  border:1px solid var(--char-2);
}
.hero-panel h3{color:var(--tan); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; font-family:var(--mono)}
.hero-stat{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed rgba(201,166,107,.35)}
.hero-stat:last-child{border-bottom:none}
.hero-stat .k{color:#CBB9A0; font-size:.85rem}
.hero-stat .v{font-family:var(--slab); font-weight:700; color:var(--white)}

/* ---- Trust strip ---- */
.trust{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px}
.trust span{font-size:.85rem; color:var(--ink-2); display:flex; align-items:center; gap:7px}
.trust svg{width:16px; height:16px; stroke:var(--barn); flex:none}

/* ---- Cards / grid ---- */
.grid{display:grid; gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}
.card .num{
  font-family:var(--slab); font-weight:800; color:var(--tan-dk); font-size:1.6rem; margin-bottom:.2em;
}
.icon-badge{
  width:44px; height:44px; border-radius:50%; background:var(--paper-2);
  border:2px solid var(--barn); display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.icon-badge svg{width:22px; height:22px; stroke:var(--barn)}

/* ---- Age-band reality table ---- */
.bands{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:28px 0}
.band{background:var(--white); border:1px solid var(--line); border-left:6px solid var(--barn); border-radius:var(--radius); padding:18px}
.band .pct{font-family:var(--slab); font-weight:800; font-size:1.9rem; color:var(--char)}
.band .lbl{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2)}

table.reality{width:100%; border-collapse:collapse; margin:24px 0; font-size:.94rem}
table.reality th, table.reality td{border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top}
table.reality thead th{background:var(--char); color:var(--paper-2); font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em; font-size:.72rem}
table.reality tbody tr:nth-child(even){background:var(--white)}

table.price{width:100%; border-collapse:collapse; margin:20px 0; font-size:.95rem}
table.price th, table.price td{border:1px solid var(--line); padding:11px 14px; text-align:left}
table.price thead th{background:var(--barn); color:var(--white); font-family:var(--mono); text-transform:uppercase; font-size:.72rem; letter-spacing:.05em}
table.price tbody tr:nth-child(even){background:var(--white)}
table.price td:first-child{font-weight:600; color:var(--char)}

/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--line); padding:20px 0}
.faq-item h3{font-size:1.08rem; margin-bottom:.4em}
.faq-item p{color:var(--ink-2); margin:0}

/* ---- CTA band ---- */
.cta-band{
  background:var(--barn); color:var(--white); border-radius:var(--radius);
  padding:36px; text-align:center; margin:36px 0;
}
.cta-band h2{color:var(--white)}
.cta-band p{color:#F1DFCB}
.cta-band .btn{background:var(--white); border-color:var(--white); color:var(--barn)}
.cta-band .btn:hover{background:var(--paper-2); border-color:var(--paper-2)}

/* ---- Breadcrumbs ---- */
.crumbs{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); padding:16px 0}
.crumbs a{color:var(--ink-2); text-decoration:none}
.crumbs a:hover{color:var(--barn)}
.crumbs span{margin:0 6px}

/* ---- Need markers ---- */
.need{
  display:inline-block; background:#FCE9C9; border:1px dashed #B98A2E; color:#7A4E12;
  font-family:var(--mono); font-size:.78rem; padding:2px 8px; border-radius:2px;
}

/* ---- Sources ---- */
.sources{font-size:.86rem; color:var(--ink-2)}
.sources ul{padding-left:20px}
.sources li{margin-bottom:6px}

/* ---- Keep reading ---- */
.linkrow{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin:28px 0}
.linkrow h4{font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; color:var(--barn); margin:0 0 10px}
.linkrow ul{margin:0; padding-left:18px; columns:2; -webkit-columns:2}
.linkrow li{margin-bottom:6px; break-inside:avoid}

/* ---- Neighborhood table ---- */
table.subs{width:100%; border-collapse:collapse; margin:20px 0; font-size:.92rem}
table.subs th, table.subs td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
table.subs thead th{background:var(--char); color:var(--paper-2); font-family:var(--mono); text-transform:uppercase; font-size:.7rem}
table.subs tbody tr:nth-child(even){background:var(--white)}

/* ---- Footer ---- */
footer.site{background:var(--char); color:var(--paper-2); padding:48px 0 24px; margin-top:40px}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px}
.footer-logo{height:52px; width:auto; margin-bottom:14px; filter:brightness(1.1)}
footer.site h4{font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; color:var(--tan); margin:0 0 12px}
footer.site a{color:var(--paper-2); text-decoration:none; font-size:.92rem}
footer.site a:hover{color:var(--tan)}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site li{margin-bottom:8px}
.foot-bottom{
  border-top:1px solid var(--char-2); margin-top:30px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.82rem; color:#B7A88E;
}

/* ---- Misc ---- */
.tag{
  display:inline-block; background:var(--paper-2); border:1px solid var(--tan-dk);
  color:var(--barn-dk); font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.05em; padding:4px 10px; border-radius:20px; margin:0 6px 6px 0;
}
.hr{height:1px; background:var(--line); border:none; margin:32px 0}
.check-list{list-style:none; padding:0; margin:0}
.check-list li{padding-left:28px; position:relative; margin-bottom:10px}
.check-list li::before{
  content:''; position:absolute; left:0; top:.35em; width:16px; height:16px;
  border:2px solid var(--barn); border-radius:3px;
}
.warn-box{
  background:#FBF1DE; border:1px solid var(--tan-dk); border-left:5px solid var(--barn);
  padding:18px 20px; border-radius:var(--radius); margin:22px 0; font-size:.95rem;
}
.warn-box strong{color:var(--barn-dk)}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .bands{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  nav.main{display:none}
  .grid-3, .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .bands{grid-template-columns:1fr}
  .linkrow ul{columns:1}
  section{padding:40px 0}
  table.reality, table.price, table.subs{display:block; overflow-x:auto}
}