/* ===========================================================
   Northampton Roof Leaks — theme v3 (mobile-first redesign)
   Palette: ironstone gold on slate-ink, warm stone paper.
   Type: IBM Plex Sans (headings) / Public Sans (body).
=========================================================== */

:root{
  --ink:        #1B222B;
  --ink-2:      #262F3A;
  --ink-3:      #0F1419;
  --gold:       #C9933A;
  --gold-dark:  #9F7421;
  --slate:      #4A5D6B;
  --paper:      #F3EFE4;
  --paper-2:    #FBF8F0;
  --line:       #D8D0BE;
  --line-dark:  #3A4552;
  --text:       #1F252B;
  --text-soft:  #525B65;
  --text-on-ink: #ECE7D8;
  --text-on-ink-soft: #B2B9C1;
  --radius: 4px;
  --wrap: 1200px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 6px 24px -8px rgba(27,34,43,.18);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #13171C;
    --paper-2: #1C2127;
    --text: #ECE7D8;
    --text-soft: #B2B9C1;
    --line: #333B44;
  }
}
:root[data-theme="dark"]{
  --paper: #13171C;
  --paper-2: #1C2127;
  --text: #ECE7D8;
  --text-soft: #B2B9C1;
  --line: #333B44;
}

*{box-sizing:border-box; min-width:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:"Public Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  color:var(--text);
  line-height:1.2;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-0.015em;
  overflow-wrap:break-word;
}
h1{font-size:clamp(1.75rem, 4.5vw + 0.5rem, 3rem); font-weight:650}
h2{font-size:clamp(1.4rem, 2.5vw + 0.6rem, 2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1.1em; max-width:68ch; color:var(--text-soft)}
a{color:var(--slate); text-decoration-thickness:1px; overflow-wrap:break-word}
a:hover{color:var(--gold-dark)}
img,svg,video{max-width:100%; display:block; height:auto}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* ---------- Ridge-line divider motif ---------- */
.ridge{
  height:12px; width:100%;
  background-image: linear-gradient(135deg, var(--line) 25%, transparent 25%),
                     linear-gradient(225deg, var(--line) 25%, transparent 25%);
  background-size: 20px 12px;
  opacity:.55;
}
.ridge.on-ink{
  background-image: linear-gradient(135deg, var(--line-dark) 25%, transparent 25%),
                     linear-gradient(225deg, var(--line-dark) 25%, transparent 25%);
}

/* ---------- Header ---------- */
.site-header{
  background:var(--ink); color:var(--text-on-ink);
  position:sticky; top:0; z-index:40;
  box-shadow:0 1px 0 rgba(0,0,0,.3);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px; position:relative;
}
.logo{
  font-family:"IBM Plex Sans",sans-serif; font-weight:650;
  font-size:1.1rem; color:#fff; text-decoration:none;
  letter-spacing:-.01em; white-space:nowrap; flex-shrink:0;
}
.logo span{color:var(--gold)}

/* Mobile nav (default): hidden off-canvas; shown as dropdown when toggle open */
.main-nav{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  background:var(--ink); border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  padding:12px 20px 20px;
  flex-direction:column; align-items:stretch;
}
.main-nav.is-open{display:flex}
.main-nav a{
  color:var(--text-on-ink); text-decoration:none;
  padding:12px 0; border-bottom:1px solid var(--line-dark);
  font-size:1rem;
}
.main-nav a:last-child{border-bottom:none}
.main-nav a:hover{color:var(--gold)}

.header-cta{display:flex; align-items:center; gap:10px; flex-shrink:0}
.phone-link{
  color:#fff; font-weight:600; text-decoration:none;
  font-size:.95rem; white-space:nowrap; display:none;
}

.btn{
  display:inline-block; padding:10px 18px; border-radius:var(--radius);
  background:var(--gold); color:var(--ink); font-weight:650;
  text-decoration:none; border:1px solid var(--gold);
  font-size:.9rem; white-space:nowrap; line-height:1.2;
  transition:background .15s, border-color .15s, color .15s;
}
.btn:hover{background:var(--gold-dark); border-color:var(--gold-dark); color:#fff}
.btn-outline{background:transparent; color:var(--text-on-ink); border:1px solid var(--line-dark)}
.btn-outline:hover{border-color:var(--gold); color:#fff; background:transparent}
.btn-outline-light{background:transparent; color:var(--text); border:1px solid var(--slate)}
.btn-outline-light:hover{border-color:var(--gold-dark); color:var(--gold-dark); background:transparent}
.header-cta .btn{padding:9px 14px; font-size:.85rem}

#nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; background:transparent;
  border:1px solid var(--line-dark); border-radius:var(--radius);
  cursor:pointer; padding:0;
}
#nav-toggle svg{stroke:#fff}

/* Desktop nav: visible inline, mobile dropdown rules reset. Breakpoint
   chosen so all 6 items + logo + CTA always fit without overlapping. */
@media (min-width: 900px){
  .site-header .bar{padding:16px 0; gap:24px}
  .logo{font-size:1.2rem}
  .main-nav{
    display:flex; position:static;
    flex-direction:row; align-items:center;
    padding:0; border:none; background:transparent;
    gap:22px; flex:1; justify-content:center;
    min-width:0;
  }
  .main-nav a{
    color:var(--text-on-ink-soft); padding:4px 0; border:none;
    font-size:.92rem; white-space:nowrap;
  }
  .main-nav a:hover{color:#fff}
  .nav-cta-mobile{display:none !important}
  #nav-toggle{display:none}
  .header-cta{gap:14px}
  .header-cta .btn{padding:10px 18px; font-size:.9rem}
}
@media (min-width: 1100px){
  .phone-link{display:inline}
}

/* ---------- Hero ---------- */
.hero{background:var(--ink); color:var(--text-on-ink); position:relative; overflow:hidden}
.hero .wrap{
  display:grid; grid-template-columns:1fr;
  gap:28px; align-items:center;
  padding:40px 20px 48px;
}
.hero-eyebrow-free{color:var(--gold); font-weight:650; margin-bottom:12px; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em}
.hero h1{color:#fff; margin-bottom:.4em}
.hero p.lede{color:var(--text-on-ink-soft); font-size:1.05rem; max-width:56ch}
.hero-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.hero-art{display:none}
.hero-art svg{max-width:100%; height:auto; width:100%}

@media (min-width: 760px){
  .hero .wrap{grid-template-columns:1.1fr .9fr; gap:40px; padding:60px 20px 72px}
  .hero p.lede{font-size:1.12rem}
  .hero-art{display:block; justify-self:end; max-width:100%}
}

.trust-strip{background:var(--ink-2); border-top:1px solid var(--line-dark)}
.trust-strip .wrap{
  display:flex; gap:14px 28px; flex-wrap:wrap;
  padding:16px 20px; color:var(--text-on-ink-soft);
  font-size:.88rem;
}
.trust-strip strong{color:#fff}

/* ---------- Sections ---------- */
section{padding:40px 0}
@media (min-width: 760px){ section{padding:56px 0} }
.section-tight{padding:28px 0}
@media (min-width: 760px){ .section-tight{padding:36px 0} }
.section-head{max-width:72ch; margin-bottom:26px}
.section-head h2{margin-bottom:.4em}

/* ---------- Image placeholder & media ---------- */
.img-placeholder{
  background:repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 10px, var(--line) 10px, var(--line) 11px);
  border:1px dashed var(--slate);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-soft); font-size:.88rem; text-align:center;
  padding:20px; min-height:180px;
}
.img-placeholder.tall{min-height:260px}
.img-placeholder span{max-width:22ch}
@media (min-width: 760px){
  .img-placeholder{min-height:220px}
  .img-placeholder.tall{min-height:340px}
}

/* ---------- Services grid ---------- */
.svc-grid{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.svc-card{background:var(--paper-2); padding:22px 20px}
.svc-card h3{font-size:1.05rem; margin-bottom:.4em}
.svc-card p{font-size:.93rem; margin:0}
@media (min-width: 560px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width: 900px){ .svc-grid{grid-template-columns:repeat(3,1fr)} }

/* ---------- Two-column content ---------- */
.content-grid{display:grid; grid-template-columns:1fr; gap:28px; align-items:start}
@media (min-width: 900px){ .content-grid{grid-template-columns:2fr 1fr; gap:48px} }
.sidebar-box{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.sidebar-box h3{font-size:1rem; margin-bottom:.8em}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--line); padding:18px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{font-size:1.02rem; margin-bottom:.4em}
.faq-item p{margin:0}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid; grid-template-columns:1fr; gap:20px}
@media (min-width: 640px){ .testi-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width: 900px){ .testi-grid{grid-template-columns:repeat(3,1fr)} }
.testi-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.stars{color:var(--gold); letter-spacing:2px; margin-bottom:.6em}
.testi-card p{font-size:.95rem; margin-bottom:.8em}
.testi-name{font-weight:650; font-size:.92rem; color:var(--text)}
.testi-loc{color:var(--text-soft); font-size:.85rem}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink); color:var(--text-on-ink)}
.cta-band .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:36px 20px; flex-wrap:wrap;
}
.cta-band h2{color:#fff; margin-bottom:.25em}
.cta-band p{color:var(--text-on-ink-soft); margin:0}

/* ---------- Map placeholder & embed ---------- */
.map-box{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  min-height:220px; display:flex; align-items:center; justify-content:center;
  color:var(--text-soft); text-align:center; padding:20px;
}
.map-embed{
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--paper-2);
}
.map-embed iframe{
  width:100%; height:380px; border:0; display:block;
}
@media (max-width:640px){ .map-embed iframe{height:280px} }
.map-link{
  padding:10px 14px; background:var(--paper-2);
  border-top:1px solid var(--line); font-size:.82rem;
}
.map-link a{color:var(--slate); text-decoration:none}
.map-link a:hover{color:var(--gold-dark)}

/* ---------- Chips ---------- */
.chip-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-block; padding:7px 14px; border:1px solid var(--line);
  border-radius:999px; color:var(--slate); text-decoration:none;
  font-size:.85rem; background:var(--paper-2);
}
.chip:hover{border-color:var(--gold); color:var(--gold-dark)}

/* ---------- Blog cards ---------- */
.blog-grid{display:grid; grid-template-columns:1fr; gap:24px}
@media (min-width: 640px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width: 900px){ .blog-grid{grid-template-columns:repeat(3,1fr)} }
.blog-card{display:block; text-decoration:none; color:inherit}
.blog-card .img-placeholder{margin-bottom:14px; min-height:160px}
.blog-card h3{color:var(--text); margin-bottom:.3em; font-size:1.05rem}
.blog-card p{font-size:.9rem; margin:0}
.blog-meta{font-size:.8rem; color:var(--slate); margin-bottom:.5em}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:.82rem; color:var(--text-on-ink-soft); margin-bottom:14px}
.hero .crumb a{color:var(--text-on-ink-soft)}
.hero .crumb a:hover{color:#fff}
.crumb a{color:var(--slate); text-decoration:none}
.crumb a:hover{color:var(--gold-dark)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:var(--text-on-ink-soft); padding-top:40px}
.footer-grid{
  display:grid; grid-template-columns:1fr; gap:28px;
  padding-bottom:28px;
}
@media (min-width: 560px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (min-width: 900px){ .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px} }
.footer-grid h4{color:#fff; font-size:.9rem; margin-bottom:1em; font-weight:650; text-transform:uppercase; letter-spacing:.05em}
.footer-grid ul{list-style:none; margin:0; padding:0}
.footer-grid li{margin-bottom:.55em; font-size:.9rem}
.footer-grid a{color:var(--text-on-ink-soft); text-decoration:none}
.footer-grid a:hover{color:var(--gold)}
.footer-bottom{
  border-top:1px solid var(--line-dark); padding:20px 0;
  display:flex; justify-content:space-between; gap:14px;
  flex-wrap:wrap; font-size:.8rem;
}
.footer-bottom nav{display:flex; gap:14px 18px; flex-wrap:wrap}
.footer-bottom a{color:var(--text-on-ink-soft); text-decoration:none}
.footer-bottom a:hover{color:var(--gold)}

/* ---------- Location hero image ---------- */
.location-hero-img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); display:block;
  border:1px solid var(--line);
}

/* ---------- Gallery grid (Our Work page) ---------- */
.gallery-grid{
  display:grid; grid-template-columns:1fr; gap:14px;
  margin-top:30px;
}
@media (min-width: 560px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width: 900px){ .gallery-grid{grid-template-columns:repeat(3,1fr)} }
.gallery-tile{
  display:block; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius); background:var(--paper-2);
  border:1px solid var(--line);
}
.gallery-tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .3s ease;
}
.gallery-tile:hover img{transform:scale(1.04)}
.gallery-grid .img-placeholder{min-height:220px}

/* ---------- Links page grid ---------- */
.links-page-grid{
  display:grid; grid-template-columns:1fr; gap:10px 20px;
  list-style:none; padding:0; margin:0;
}
@media (min-width: 500px){ .links-page-grid{grid-template-columns:1fr 1fr} }
@media (min-width: 760px){ .links-page-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width: 1024px){ .links-page-grid{grid-template-columns:repeat(4,1fr)} }
.links-page-grid li{
  padding:12px 14px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius);
  font-size:.9rem;
}
.links-page-grid li a{color:var(--slate); text-decoration:none; display:block; word-break:break-word}
.links-page-grid li a:hover{color:var(--gold-dark)}

/* ---------- Form basics ---------- */
input[type=text],input[type=email],input[type=tel],input[type=password],textarea,select{
  font-family:inherit; font-size:1rem;
}

/* ---------- Utilities ---------- */
.hide-on-mobile{display:none}
@media (min-width: 900px){ .hide-on-mobile{display:inline-block} }