/* ============================================================
   MARYLAND HARDWOOD FLOORS — design tokens & system
   Palette: Maryland flag, calibrated for contrast.
     --gold  #EAAB00  (Calvert gold — graphic use & on-ink text only)
     --gold-deep #8A6400 (gold recalibrated for text on light, AA 4.5:1)
     --red   #C8102E  (Crossland red — RESERVED for the live-availability
                       marker only; semantic, one use per page)
     --ink   #17130D  (warm off-black), --paper #FCFBF7
   Shape lock: radius 0 everywhere (parquet geometry).
   Signature: .band — the flag's counterchange abstracted to herringbone.
   ============================================================ */
@font-face{font-family:"Archivo";src:url("/fonts/archivo.woff2") format("woff2");
  font-weight:100 900;font-stretch:62.5% 125%;font-display:swap;}

:root{
  --ink:#17130D; --ink-soft:#3D362B; --paper:#FCFBF7; --panel:#F4F1E8;
  --line:#DED8C8; --gold:#EAAB00; --gold-deep:#8A6400; --red:#C8102E;
  --disp:"Archivo",system-ui,sans-serif; --body:"Archivo",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --wide:'wdth' 122; --max:1240px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);color:var(--ink);background:var(--paper);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--disp);font-variation-settings:var(--wide);
  line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.5rem,2.8vw,2.15rem);font-weight:750;margin-bottom:.6em}
h3{font-size:1.15rem;font-weight:700;line-height:1.3}
p{max-width:68ch}
.lede{font-size:1.15rem;color:var(--ink-soft)}

/* Signature: herringbone counterchange band */
.band{height:12px;
  background:
    repeating-linear-gradient(45deg,var(--ink) 0 7px,var(--gold) 7px 14px) top/100% 6px no-repeat,
    repeating-linear-gradient(-45deg,var(--gold) 0 7px,var(--ink) 7px 14px) bottom/100% 6px no-repeat;}

/* Buttons — sharp, heraldic */
.btn{display:inline-block;padding:.85rem 1.5rem;font-weight:700;font-family:var(--disp);
  text-decoration:none;border:2px solid var(--ink);transition:transform .12s ease}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);color:var(--gold)}
.btn-ink:hover{background:var(--ink-soft)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#F5BC1E}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px}

/* Header */
.hd{background:var(--paper);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{font-family:var(--disp);font-variation-settings:var(--wide);font-weight:800;
  font-size:1.05rem;text-decoration:none;display:flex;align-items:center;gap:10px}
.logo-mark{width:22px;height:22px;background:
  repeating-linear-gradient(45deg,var(--ink) 0 5px,var(--gold) 5px 10px)}
.hd-nav{display:flex;align-items:center;gap:20px}
.hd-phone{font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.dd{position:relative}
.dd-btn{font:inherit;font-weight:600;background:none;border:0;cursor:pointer;padding:.5rem 0}
.dd-btn::after{content:" ▾";font-size:.75em}
.dd-menu{display:none;position:absolute;left:0;top:100%;background:var(--paper);
  border:1px solid var(--line);min-width:220px;padding:8px 0;box-shadow:0 12px 30px rgba(23,19,13,.12);
  max-height:70vh;overflow:auto}
.dd-btn[aria-expanded="true"]+.dd-menu,.dd:hover .dd-menu{display:block}
.dd-menu a{display:block;padding:.45rem 1rem;text-decoration:none}
.dd-menu a:hover{background:var(--panel)}

/* Hero — split, left-aligned */
.hero{background:var(--ink);color:var(--paper)}
.hero-in{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center;padding:72px 24px 64px}
.hero h1{color:#fff}
.hero .lede{color:#CFC7B4;margin:1rem 0 1.6rem}
.hero-eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.hero-media{border:6px solid var(--gold);aspect-ratio:4/3;overflow:hidden;background:var(--ink-soft);
  box-shadow:16px 16px 0 rgba(234,171,0,.22)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.avail{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.3rem;
  font-weight:700;font-size:.95rem;color:#fff;border:1px solid rgba(252,251,247,.25);
  padding:.45rem .9rem}
.avail::before{content:"";width:9px;height:9px;background:var(--red);border-radius:50%}

/* Experience row: proof near the top of every page */
.hero-meta{list-style:none;display:flex;flex-wrap:wrap;padding:1.1rem 0 0;margin-top:1.6rem;
  border-top:1px solid rgba(252,251,247,.22);gap:0}
.hero-meta li{font-size:.9rem;font-weight:600;color:#E4DDCB;padding:0 1.1rem;
  border-left:1px solid rgba(252,251,247,.22)}
.hero-meta li:first-child{padding-left:0;border-left:0;color:var(--gold)}

/* Stats strip */
.stats{background:var(--gold)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 24px}
.stat{padding:20px 24px;border-left:1px solid rgba(23,19,13,.25)}
.stat:first-child{border-left:0}
.stat-v{display:block;font-family:var(--disp);font-variation-settings:var(--wide);
  font-weight:800;font-size:1.8rem;line-height:1.1}
.stat-l{font-size:.85rem;color:#4A3A05;font-weight:600;letter-spacing:.01em}

/* Sections */
.sec{padding:72px 0}
.sec-alt{background:var(--panel)}
.sec-ink{background:var(--ink);color:var(--paper)}
.sec-ink h2{color:#fff}
.sec-ink p{color:#CFC7B4}
.kicker{color:var(--gold-deep);font-weight:700;font-size:.95rem;margin-bottom:.4rem}

/* Service cards — asymmetric 4-cell bento (1 featured + 3) */
.svc-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:minmax(190px,auto);gap:18px;margin-top:2rem}
.svc-card{border:1px solid var(--line);background:var(--paper);padding:26px;
  text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  transition:transform .12s ease}
.svc-card:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:8px 8px 0 rgba(234,171,0,.28)}
.svc-card .svc-go::after{content:""}
.svc-card:hover .svc-go{text-decoration:underline}
.svc-card--feat{grid-row:span 2;background:var(--ink);color:var(--paper);border-color:var(--ink);
  background-image:radial-gradient(140% 90% at 100% 100%,rgba(234,171,0,.22),transparent 55%)}
.svc-card--feat h3{color:#fff;font-size:1.5rem}
.svc-card p{font-size:.95rem;color:var(--ink-soft)}
.svc-card--feat p{color:#CFC7B4}
.svc-go{font-weight:700;color:var(--gold-deep)}
.svc-card--feat .svc-go{color:var(--gold)}

/* Price table */
.price{border:1px solid var(--line);margin-top:1.5rem}
.price-row{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:16px;padding:16px 20px;align-items:baseline}
.price-row+.price-row{border-top:1px solid var(--line)}
.price-row:nth-child(odd){background:var(--panel)}
.price-item{font-weight:700}
.price-num{font-family:var(--mono);font-weight:700;white-space:nowrap;color:var(--gold-deep)}
.price-row:hover{background:#EFEADB}
.price-note{font-size:.9rem;color:var(--ink-soft)}
.price-cap{font-size:.85rem;color:var(--ink-soft);margin-top:.75rem}

/* FAQ */
.faq{margin-top:1.5rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary:hover{color:var(--gold-deep)}
.faq summary{cursor:pointer;padding:1.1rem 0;font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--disp);font-weight:400;font-size:1.3rem;color:var(--gold-deep)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 1.2rem;color:var(--ink-soft)}

/* Two-col insight blocks */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.duo-media{border:1px solid var(--line);aspect-ratio:4/3;overflow:hidden}
.duo-media img{width:100%;height:100%;object-fit:cover}

/* Problem list (repair page) */
.probs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:1.6rem}
.prob{border:1px solid var(--line);padding:22px;background:var(--paper)}
.prob h3{margin-bottom:.4rem}
.prob .fix{font-size:.95rem;color:var(--ink-soft);margin:.3rem 0}
.prob .cost{font-family:var(--mono);font-size:.9rem;color:var(--gold-deep);font-weight:600}

/* Steps (water page) */
.steps{counter-reset:s;margin-top:1.6rem;display:grid;gap:0}
.step{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--disp);font-variation-settings:var(--wide);font-weight:800;font-size:1.9rem;color:var(--gold)}
.step h3{margin-bottom:.25rem}
.step p{color:var(--ink-soft);font-size:.98rem}

/* Wood species chooser (install page) */
.woods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:1.6rem}
.wood{border:1px solid var(--line);padding:22px;background:var(--paper)}
.wood .best{font-size:.85rem;color:var(--gold-deep);font-weight:700}
.wood p{font-size:.95rem;color:var(--ink-soft);margin-top:.4rem}

/* Sheen/stain chips (refinish page) */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:1rem}
.chip{border:1px solid var(--line);padding:.5rem .9rem;font-size:.92rem;background:var(--paper)}
.chip b{color:var(--gold-deep)}

/* Area links */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:1.6rem}
.area{border:1px solid var(--line);padding:18px 20px;text-decoration:none;font-weight:700;background:var(--paper)}
.area:hover{border-color:var(--ink)}
.area span{display:block;font-weight:400;font-size:.85rem;color:var(--ink-soft)}

/* Quote CTA */
.quote{background:var(--ink);color:var(--paper)}
.quote-in{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;padding:64px 24px;align-items:center}
.quote h2{color:#fff}
.quote p{color:#CFC7B4;margin:.6rem 0 1.4rem}
.quote-hours{font-size:.9rem}
.quote-list{list-style:none;padding:0;display:grid;gap:12px}
.quote-list li{border-left:3px solid var(--gold);padding:.5rem 0 .5rem 1rem;font-weight:600;color:#EDE8DC}

/* Breadcrumbs */
.crumbs{font-size:.85rem;padding:14px 0;color:var(--ink-soft)}
.crumbs a{color:var(--ink-soft)}
.crumbs span[aria-current]{color:var(--ink);font-weight:600}

/* Footer */
.ft{background:var(--paper)}
.ft-in{display:grid;grid-template-columns:1.1fr 2fr;gap:48px;padding:56px 24px}
.ft-logo{font-family:var(--disp);font-variation-settings:var(--wide);font-weight:800;font-size:1.1rem;margin-bottom:.6rem}
.ft-brand p{font-size:.9rem;color:var(--ink-soft);margin-bottom:.5rem}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px}
.ft-col{display:grid;gap:.35rem;align-content:start}
.ft-col a{font-size:.85rem;text-decoration:none;color:var(--ink-soft)}
.ft-col a:hover{text-decoration:underline}
.ft-city{font-weight:700;color:var(--ink)!important;font-size:.92rem!important}
.ft-legal{border-top:1px solid var(--line);padding-top:18px;padding-bottom:26px}
.ft-legal p{font-size:.8rem;color:var(--ink-soft)}

/* Mobile sticky call bar */
.callbar{display:none}
@media(max-width:900px){
  .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--ink);color:var(--gold);text-align:center;font-family:var(--disp);
    font-weight:800;font-size:1.05rem;text-decoration:none;padding:1rem;
    border-top:3px solid var(--gold)}
  body{padding-bottom:60px}
}

/* Mobile collapse — explicit */
@media(max-width:900px){
  .hero-in,.duo,.quote-in,.ft-in{grid-template-columns:1fr;gap:32px}
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc-card--feat{grid-row:auto;grid-column:span 2}
  .stats-in{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:0;border-top:1px solid rgba(23,19,13,.25)}
  .woods{grid-template-columns:1fr}
  .probs{grid-template-columns:1fr}
  .areas{grid-template-columns:repeat(2,1fr)}
  .ft-cols{grid-template-columns:repeat(2,1fr)}
  .price-row{grid-template-columns:1fr;gap:4px}
  .hd-phone{display:none}
}
@media(max-width:560px){
  .svc-grid,.areas,.stats-in,.ft-cols{grid-template-columns:1fr}
  .svc-card--feat{grid-column:auto}
  .hero-in{padding:48px 24px}
  .hero-meta li{padding:.25rem 0;border-left:0;flex-basis:100%}
  .hero-media{box-shadow:8px 8px 0 rgba(234,171,0,.22)}
}