/* ============================================================
   Safe Haven Roofing and Construction
   Design tokens
   ============================================================ */
:root{
  --slate-950:#161c24;
  --slate-800:#232c38;
  --slate-600:#4a5768;
  --stone-50:#f7f6f2;
  --stone-100:#eceae2;
  --stone-200:#e0ddd2;
  --rust-600:#b5482f;
  --rust-700:#93381f;
  --ink:#1d2127;
  --ink-soft:#4b535d;

  --font-display:'Roboto Slab', serif;
  --font-body:'Work Sans', sans-serif;

  --max-w:1120px;
  --radius:6px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--stone-50);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3{
  font-family:var(--font-display);
  color:var(--slate-950);
  line-height:1.15;
  margin:0 0 .5em;
}

p{ margin:0 0 1.2em; color:var(--ink-soft); }

a{ color:var(--rust-600); text-decoration-thickness: 1.5px; }
a:hover{ color:var(--rust-700); }
a:focus-visible, button:focus-visible{
  outline:3px solid var(--rust-600);
  outline-offset:3px;
}

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--rust-600);
  color:#fff;
  padding:10px 16px;
  z-index:100;
}
.skip-link:focus{ left:12px; top:12px; }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  background:var(--slate-950);
  padding:18px 0;
  position:sticky;
  top:0;
  z-index:20;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:#fff;
  letter-spacing:.2px;
}
.logo span{
  display:block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rust-600);
  margin-top:2px;
}
.site-nav{
  display:flex;
  align-items:center;
  gap:28px;
}
.site-nav a{
  color:var(--stone-200);
  font-size:.92rem;
  text-decoration:none;
}
.site-nav a:hover{ color:#fff; }
.nav-call{
  background:var(--rust-600);
  color:#fff !important;
  padding:8px 16px;
  border-radius:var(--radius);
  font-weight:600;
}
.nav-call:hover{ background:var(--rust-700); }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  background:var(--slate-950);
  color:#fff;
  padding:64px 0 0;
}
.hero-row{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
  padding-bottom:56px;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:600;
  color:var(--rust-600);
  margin-bottom:14px;
}
.eyebrow-light{ color:var(--rust-600); }
.hero h1{
  color:#fff;
  font-size:clamp(2.1rem, 4.2vw, 3.1rem);
  max-width:14ch;
}
.hero-sub{
  color:var(--stone-200);
  font-size:1.08rem;
  max-width:46ch;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:8px;
}
.btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:var(--radius);
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--rust-600);
  color:#fff;
}
.btn-primary:hover{ background:var(--rust-700); color:#fff; }
.btn-ghost{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.4);
}
.btn-ghost:hover{ border-color:#fff; color:#fff; }

.hero-graphic{ display:flex; justify-content:center; }
.roofline-art{ width:100%; max-width:420px; height:auto; }
.roofline-art polyline{
  fill:none;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rl-a{ stroke:var(--rust-600); opacity:.95; }
.rl-b{ stroke:var(--stone-200); opacity:.55; }
.rl-c{ stroke:var(--rust-600); opacity:.4; }
.rl-d{ stroke:var(--stone-200); stroke-width:3; opacity:.35; }

/* signature truss divider: a repeating roof-pitch zigzag */
.truss-divider{
  height:26px;
  width:100%;
  background:
    linear-gradient(135deg, transparent 49%, var(--stone-50) 50%) 0 0/26px 26px,
    linear-gradient(-135deg, transparent 49%, var(--stone-50) 50%) 0 0/26px 26px;
  background-color:var(--slate-950);
  background-repeat:repeat-x;
}

/* ============================================================
   Article
   ============================================================ */
.blog{
  padding:64px 24px 32px;
  max-width:760px;
}
.blog h2{
  font-size:1.5rem;
  margin-top:2.2em;
  padding-left:18px;
  border-left:4px solid var(--rust-600);
}
.blog h2:first-of-type{ margin-top:0; }
.blog p{ font-size:1.02rem; }
.blog p a{ font-weight:600; }
.question-list{
  margin:0 0 1.4em;
  padding:0;
  list-style:none;
}
.question-list li{
  position:relative;
  padding:10px 0 10px 26px;
  font-size:1.02rem;
  color:var(--ink-soft);
  border-bottom:1px solid var(--stone-200);
}
.question-list li:last-child{ border-bottom:none; }
.question-list li::before{
  content:"?";
  position:absolute;
  left:0;
  top:9px;
  color:var(--rust-600);
  font-family:var(--font-display);
  font-weight:700;
}

/* ============================================================
   Contact
   ============================================================ */
.contact{
  background:var(--slate-950);
  color:#fff;
  padding:64px 0 72px;
}
.contact-row{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:start;
}
.contact h2{ color:#fff; font-size:1.9rem; }
.contact-copy p{ color:var(--stone-200); max-width:44ch; }
.contact-details ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.contact-details li{
  border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:18px;
}
.detail-label{
  display:block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  color:var(--rust-600);
  font-weight:600;
  margin-bottom:6px;
}
.contact-details a{
  color:#fff;
  font-size:1.15rem;
  font-weight:600;
  text-decoration:none;
}
.contact-details a:hover{ color:var(--rust-600); }
.contact-details span:not(.detail-label){
  color:var(--stone-200);
  font-size:1.05rem;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--stone-100);
  padding:22px 0;
}
.footer-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  font-size:.85rem;
  color:var(--ink-soft);
}
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a{ color:var(--slate-600); text-decoration:none; }
.footer-links a:hover{ color:var(--rust-600); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px){
  .hero-row, .contact-row{
    grid-template-columns:1fr;
  }
  .hero-graphic{ order:-1; max-width:280px; margin:0 auto; }
  .site-nav{ gap:16px; }
  .site-nav a:not(.nav-call){ display:none; }
}

@media (max-width: 480px){
  .hero{ padding-top:44px; }
  .blog{ padding-top:48px; }
  .contact{ padding:48px 0 56px; }
}

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