/* Big Ron Handyman Services — shared site styles */

:root{
  --ink:#1a1613;
  --plank-dark:#2f221a;
  --plank-mid:#5c4232;
  --cream:#f3e9d8;
  --cream-2:#eadfc9;
  --amber:#e2a33b;
  --amber-dark:#c17f1f;
  --rust:#a33c29;
  --line: rgba(26,22,19,0.12);
  --shadow: 0 14px 30px rgba(20,14,8,0.28);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.55;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{
  font-family:'Anton', sans-serif;
  font-weight:400;
  letter-spacing:0.5px;
  margin:0 0 0.4em 0;
  text-transform:uppercase;
}
.script{ font-family:'Caveat', cursive; font-weight:700; }
.mono{ font-family:'IBM Plex Mono', monospace; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--rust); font-weight:600; display:inline-block; margin-bottom:10px;
}

/* Wood texture helpers */
.wood-bg{
  background: linear-gradient(160deg, var(--plank-dark) 0%, var(--ink) 100%);
  color:var(--cream);
}
.grain-rule{
  height:14px;
  background-image:url("wood-grain.jpg");
  background-size:420px auto;
  background-repeat:repeat;
  border-top:1px solid rgba(0,0,0,0.35);
  border-bottom:1px solid rgba(0,0,0,0.35);
}

/* Nav */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:3px solid var(--amber);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 24px; max-width:1180px; margin:0 auto;
}
.nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-brand img{ height:44px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{
  color:var(--cream-2); text-decoration:none;
  font-family:'IBM Plex Mono', monospace; font-size:0.82rem;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 2px; border-bottom:2px solid transparent;
  transition: border-color .2s, color .2s;
}
.nav-links a:hover, .nav-links a.active{ color:var(--amber); border-color:var(--amber); }
.nav-call{
  background:var(--amber); color:var(--ink) !important;
  padding:9px 16px !important; border-radius:3px; font-weight:600;
  border-bottom:none !important;
}
.nav-call:hover{ background:var(--amber-dark); color:var(--ink) !important; border-color:transparent !important;}
.nav-toggle{ display:none; background:none; border:none; color:var(--cream); font-size:1.6rem; cursor:pointer; }

@media (max-width:820px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start;
    background:var(--ink); padding:16px 24px 22px; gap:16px;
    border-bottom:3px solid var(--amber); display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* Page hero (interior pages) */
.page-hero{ padding:56px 0 46px; }
.page-hero .wrap{ max-width:900px; }
.page-hero p.lede{ font-size:1.08rem; color:var(--cream-2); max-width:60ch; margin-top:10px; }

/* Home hero */
.hero{ position:relative; padding:86px 0 76px; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:48px; align-items:center; }
.hero-logo{ max-width:460px; }
.hero-tagline{ font-size:1.5rem; margin:18px 0 22px; color:var(--amber); text-transform:none; font-weight:400; }
.hero-copy p{ max-width:46ch; color:var(--cream-2); font-size:1.02rem; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.92rem;
  letter-spacing:0.03em; text-transform:uppercase; text-decoration:none;
  padding:14px 22px; border-radius:3px; border:2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--amber); color:var(--ink); box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--amber-dark); }
.btn-outline{ border-color:var(--cream-2); color:var(--cream-2); }
.btn-outline:hover{ border-color:var(--amber); color:var(--amber); }
.btn-outline.dark{ border-color:var(--ink); color:var(--ink); }
.btn-outline.dark:hover{ border-color:var(--rust); color:var(--rust); }

.hero-card{
  background:var(--cream); color:var(--ink); border-radius:6px; padding:26px;
  box-shadow:var(--shadow); transform:rotate(1.4deg); border:1px solid rgba(0,0,0,0.06);
}
.hero-card img{ border-radius:4px; }
.hero-card p.cap{ font-family:'Caveat', cursive; font-size:1.35rem; margin:12px 0 0; color:var(--rust); font-weight:700; }

/* Trust bar */
.trust-bar{ background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-bar .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; padding:22px 24px; gap:18px; }
.trust-item{ display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono', monospace; font-size:0.86rem; font-weight:600; letter-spacing:0.03em; }
.trust-item svg{ flex:none; width:22px; height:22px; color:var(--rust); }

/* Section shell */
section{ padding:78px 0; }
section.tight{ padding:52px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head h2{ font-size:2.1rem; }
.section-head p{ color:#4a3f36; font-size:1.02rem; margin-top:10px;}
.section-head.on-dark p{ color: var(--cream-2); }

/* Pegboard services */
.pegboard{
  background: radial-gradient(circle, rgba(26,22,19,0.16) 1.6px, transparent 1.6px);
  background-size: 26px 26px; background-color:#e4d5b8; border-radius:10px;
  padding:44px 30px 30px; border:10px solid var(--plank-dark);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.18);
}
.peg-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:26px; }
.peg-card{
  background:var(--cream); border-radius:5px; padding:22px 18px 18px; text-align:center;
  box-shadow:0 8px 16px rgba(0,0,0,0.14); position:relative; transition: transform .18s ease;
}
.peg-card:hover{ transform:translateY(-4px) rotate(-0.6deg); }
.peg-hook{ width:14px; height:14px; border-radius:50%; background:var(--ink); margin:0 auto 10px; box-shadow:0 3px 0 rgba(0,0,0,0.15); }
.peg-card svg{ width:38px; height:38px; color:var(--rust); margin-bottom:10px; }
.peg-card h3{ font-size:1.02rem; margin-bottom:6px; }
.peg-card p{ font-size:0.88rem; color:#5a4c40; margin:0 0 12px; }
.peg-card .peg-price{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--rust); font-weight:600; }

/* About */
.about{ background:var(--plank-dark); color:var(--cream); }
.about .wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:52px; align-items:center; }
.about img{ border-radius:6px; box-shadow:var(--shadow); }
.about .section-head p{ color:var(--cream-2); }
.about-list{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; }
.about-list li{ display:flex; gap:10px; align-items:flex-start; font-size:0.96rem; color:var(--cream-2); }
.about-list svg{ flex:none; width:20px; height:20px; color:var(--amber); margin-top:2px; }

/* Service area */
.service-area{ background:var(--cream-2); }
.area-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; margin-top:8px; }
.area-chip{ font-family:'IBM Plex Mono', monospace; font-size:0.86rem; background:var(--cream); border:1px solid var(--line); border-radius:3px; padding:10px 14px; text-align:center; }
.area-chip.secondary{ opacity:0.75; border-style:dashed; }

/* Reviews */
.reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px; }
.review-card{
  background:var(--cream); border:1px solid var(--line); border-left:5px solid var(--amber);
  border-radius:4px; padding:22px; box-shadow:0 6px 14px rgba(0,0,0,0.06);
}
.review-card p.quote{ font-size:1rem; margin:0 0 14px; }
.review-card .stars{ color:var(--amber); letter-spacing:2px; margin-bottom:8px; }
.review-card .who{ font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:#6a5b4c; }

/* Placeholder / integration blocks */
.integration-slot{
  border:2px dashed #b8a689; border-radius:8px; background:#efe4cc;
  padding:26px; text-align:center; color:#5a4c40;
}
.integration-slot h4{ font-family:'IBM Plex Mono', monospace; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; margin:0 0 8px; color:var(--rust); }
.integration-slot p{ font-size:0.88rem; margin:0 auto; max-width:52ch; }
.integration-slot code{ background:#e2d3ae; padding:2px 6px; border-radius:3px; font-size:0.8rem; }

/* Service strip (homepage condensed services) */
.service-strip{
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  overflow-x:auto;
  padding:6px 2px 18px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.service-strip::-webkit-scrollbar{ height:6px; }
.service-strip::-webkit-scrollbar-thumb{ background:var(--plank-mid); border-radius:3px; }
.service-chip{
  scroll-snap-align:start;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  background:var(--cream);
  border:2px solid var(--plank-dark);
  border-radius:999px;
  padding:12px 20px;
  box-shadow:0 4px 10px rgba(0,0,0,0.10);
  transition: transform .15s ease, background .15s ease;
}
.service-chip:hover{ transform:translateY(-2px); background:#efe4cc; }
.service-chip svg{ width:22px; height:22px; color:var(--rust); flex:none; }
.service-chip span{ font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.86rem; letter-spacing:0.02em; }

@media (min-width:900px){
  .service-strip{
    flex-wrap:wrap;
    justify-content:center;
    overflow-x:visible;
    padding-bottom:0;
  }
}

/* Maintenance plan cards */
.plans-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:26px;
  align-items:stretch;
}
.plan-card{
  background:var(--cream);
  border:2px solid var(--plank-dark);
  border-radius:8px;
  padding:30px 26px;
  display:flex;
  flex-direction:column;
  box-shadow:0 8px 18px rgba(0,0,0,0.10);
  position:relative;
}
.plan-card.featured{
  border-color:var(--amber);
  box-shadow:0 12px 26px rgba(0,0,0,0.18);
  transform:translateY(-6px);
}
.plan-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--amber);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:5px 14px;
  border-radius:999px;
  white-space:nowrap;
}
.plan-card h3{ font-size:1.3rem; margin-bottom:4px; }
.plan-price{
  font-family:'IBM Plex Mono', monospace;
  font-size:1.6rem;
  font-weight:600;
  color:var(--rust);
  margin:6px 0 4px;
}
.plan-price span{ font-size:0.85rem; color:#6a5b4c; font-weight:500; }
.plan-tagline{ font-size:0.92rem; color:#5a4c40; margin-bottom:18px; min-height:2.6em; }
.plan-features{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; flex:1; }
.plan-features li{ display:flex; gap:9px; align-items:flex-start; font-size:0.92rem; }
.plan-features svg{ flex:none; width:18px; height:18px; color:var(--rust); margin-top:2px; }
.plan-card .btn{ align-self:stretch; justify-content:center; }

.checklist-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:20px;
  margin-top:10px;
}
.checklist-col h4{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--rust); margin-bottom:10px;
}
.checklist-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.checklist-col li{ display:flex; gap:8px; align-items:flex-start; font-size:0.92rem; }
.checklist-col svg{ flex:none; width:16px; height:16px; color:var(--amber-dark); margin-top:3px; }


.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Partner cards */
.partners-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:22px;
}
.partner-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-top:4px solid var(--amber);
  border-radius:6px;
  padding:22px;
  box-shadow:0 6px 14px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.partner-avatar{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--plank-dark);
  color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton', sans-serif;
  font-size:1.1rem;
  flex:none;
}
.partner-top{ display:flex; align-items:center; gap:14px; }
.partner-name{ font-family:'Anton', sans-serif; font-size:1.05rem; letter-spacing:0.3px; text-transform:uppercase; }
.partner-role{ font-family:'IBM Plex Mono', monospace; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--rust); }
.partner-business a{ font-weight:600; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--amber); }
.partner-business a:hover{ color:var(--rust); }
.partner-tagline{ font-size:0.9rem; color:#5a4c40; flex:1; }
.partner-contact{ font-family:'IBM Plex Mono', monospace; font-size:0.84rem; }
.partner-contact a{ text-decoration:none; color:var(--rust); }
.partner-contact a:hover{ text-decoration:underline; }


/* Housecall Pro embeds */
.hcp-embed{
  border:2px solid var(--plank-dark);
  border-radius:8px;
  background:#efe4cc;
  padding:28px;
  text-align:center;
}
.hcp-embed h4{
  font-family:'IBM Plex Mono', monospace; font-size:0.85rem; text-transform:uppercase;
  letter-spacing:0.06em; margin:0 0 16px; color:var(--rust);
}
.hcp-button{
  display:inline-block;
  background:var(--amber);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  padding:14px 28px;
  border:2px solid transparent;
  border-radius:3px;
  cursor:pointer;
  transition: background .2s, transform .15s;
}
.hcp-button:hover{ background:var(--amber-dark); transform:translateY(-2px); }
#hcp-lead-iframe{ width:100%; min-height:640px; border:none; }
.hcp-reviews-wrap{ width:100%; overflow-x:auto; }
.hcp-reviews-wrap iframe{ width:100%; max-width:1000px; height:1000px; border:none; display:block; margin:0 auto; }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.gallery-grid figure{ margin:0; border-radius:6px; overflow:hidden; box-shadow:0 6px 14px rgba(0,0,0,0.12); background:var(--cream-2); }
.gallery-grid img{ width:100%; height:200px; object-fit:cover; }
.gallery-grid figcaption{ font-family:'IBM Plex Mono', monospace; font-size:0.76rem; padding:8px 10px; color:#5a4c40; }

/* Contact */
.contact{ background:var(--ink); color:var(--cream); }
.contact .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:52px; }
.contact .section-head p{ color:var(--cream-2); }
.contact-item{ display:flex; gap:12px; align-items:center; margin-bottom:18px; font-size:1.05rem; }
.contact-item svg{ width:24px; height:24px; color:var(--amber); flex:none; }
.contact-item a{ text-decoration:none; color:var(--cream); font-weight:600; }
.contact-item a:hover{ color:var(--amber); }

form.quote-form{ background:var(--cream); color:var(--ink); border-radius:6px; padding:26px; box-shadow:var(--shadow); }
form.quote-form label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; margin:14px 0 6px; }
form.quote-form label:first-child{ margin-top:0; }
form.quote-form input, form.quote-form textarea{
  width:100%; padding:11px 12px; border:1px solid #cbb994; border-radius:3px;
  font-family:'Work Sans', sans-serif; font-size:0.95rem; background:#fffdf8;
}
form.quote-form textarea{ min-height:90px; resize:vertical; }
form.quote-form button{
  margin-top:20px; width:100%; background:var(--rust); color:#fff; border:none;
  padding:14px; border-radius:3px; font-family:'IBM Plex Mono', monospace;
  text-transform:uppercase; letter-spacing:0.04em; font-weight:600; font-size:0.92rem;
  cursor:pointer; transition:background .2s;
}
form.quote-form button:hover{ background:#8a2f20; }
.form-note{ font-size:0.8rem; color:#6a5b4c; margin-top:10px; }

/* Footer */
footer{ background:var(--plank-dark); color:var(--cream-2); padding:34px 0 26px; }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand img{ height:34px; }
footer .fine{ font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:#b3a58e; }
footer a{ text-decoration:none; }
.social-row{ display:flex; gap:14px; }
.social-row a svg{ width:22px; height:22px; color:var(--cream-2); transition:color .2s;}
.social-row a:hover svg{ color:var(--amber); }

@media (max-width:900px){
  .hero .wrap, .about .wrap, .contact .wrap{ grid-template-columns:1fr; }
  .hero{ padding:56px 0 50px; text-align:left; }
  .hero-card{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}