/* =========================================================
   SMITH PLUMBING & HEATING — Editorial dark theme
   Mobile-first. Min target viewport 360px.
   ========================================================= */

:root{
  --navy:       #0E1A2B;
  --navy-deep:  #0A1320;
  --navy-soft:  #18243A;
  --ink:        #0B131F;
  --paper:      #F6F2EA;
  --paper-warm: #EFE7D6;
  --paper-line: #E4DCC8;
  --brass:      #B8895C;
  --brass-soft: #C9A07A;
  --brass-deep: #946B43;
  --muted:      #6B7484;
  --rule:       rgba(255,255,255,.10);
  --rule-d:     rgba(11,19,31,.12);

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--paper);
  background:var(--navy);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- LAYOUT ---------- */
.wrap{ max-width:1240px; margin:0 auto; padding:0 20px }
@media (min-width:768px){ .wrap{ padding:0 40px } }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:24px;height:1px;background:var(--brass);
}
.eyebrow.no-rule::before{display:none}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:balance;
}
h2{ font-size:clamp(34px, 5.8vw, 64px) }
h3{ font-size:clamp(22px, 3vw, 32px); line-height:1.1 }
em{ font-style:italic; color:var(--brass-soft) }
.serif{ font-family:var(--serif) }

p{margin:0;text-wrap:pretty}
.lead{ font-size:18px; line-height:1.55; color:rgba(246,242,234,.85); max-width:55ch }

/* ---------- STICKY HEADER ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(14,26,43,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  gap:12px;
  max-width:1240px; margin:0 auto;
}
@media (min-width:768px){ .nav-inner{ padding:18px 40px } }
.brand{
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:.005em;
  display:flex; align-items:baseline; gap:8px;
}
.brand .amp{ color:var(--brass) }
.brand small{
  display:none;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-left:8px;
}
@media (min-width:1024px){ .brand small{display:inline-block} }
.nav-links{ display:none; gap:28px; font-size:14px; }
@media (min-width:880px){ .nav-links{display:flex} }
.nav-links a{ color:rgba(246,242,234,.78) }
.nav-links a:hover{ color:var(--brass-soft) }

.call-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border:1px solid var(--brass);
  color:var(--brass-soft);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.call-cta:hover{ background:var(--brass); color:var(--navy) }
.call-cta .num{ font-family:var(--sans); font-size:14px; letter-spacing:.02em }
.call-cta .dot{ width:6px; height:6px; border-radius:50%; background:#7BC97A; box-shadow:0 0 0 0 rgba(123,201,122,.6); animation:pulse 1.8s infinite }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(123,201,122,.6) }
  70%{ box-shadow:0 0 0 8px rgba(123,201,122,0) }
  100%{ box-shadow:0 0 0 0 rgba(123,201,122,0) }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 26px;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-family:var(--mono);
  border:1px solid currentColor;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.btn .arrow{ width:22px; height:1px; background:currentColor; position:relative }
.btn .arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.btn:hover .arrow{ width:34px }
.btn.primary{
  background:var(--brass); color:var(--navy); border-color:var(--brass);
}
.btn.primary:hover{ background:var(--brass-deep); border-color:var(--brass-deep); color:#fff }
.btn.ghost{
  color:var(--paper);
}
.btn.ghost:hover{ background:var(--paper); color:var(--navy) }

/* ---------- SECTION SCAFFOLD ---------- */
section{ position:relative; padding:72px 0 }
@media (min-width:768px){ section{ padding:112px 0 } }
.section-num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex; justify-content:space-between;
  border-top:1px solid var(--rule);
  padding-top:18px;
  margin-bottom:48px;
}
.on-paper .section-num{ border-top-color:var(--rule-d); color:#6B6452 }

.on-paper{ background:var(--paper); color:var(--ink) }
.on-paper h1,.on-paper h2,.on-paper h3,.on-paper h4{ color:var(--ink) }
.on-paper em{ color:var(--brass-deep) }
.on-paper .lead{ color:#3D404A }
.on-paper .eyebrow{ color:var(--brass-deep) }
.on-paper .eyebrow::before{ background:var(--brass-deep) }

/* ---------- IMAGE PLACEHOLDERS ---------- */
.img-slot{
  position:relative;
  background:#1B2741;
  border:1px solid var(--rule);
  overflow:hidden;
}
.img-slot::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    135deg,
    rgba(184,137,92,.06) 0 14px,
    transparent 14px 28px);
}
.img-slot .label{
  position:absolute; left:14px; bottom:14px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  background:rgba(11,19,31,.5);
  padding:6px 8px;
  border:1px solid var(--rule);
}
.on-paper .img-slot{
  background:var(--paper-warm);
  border-color:var(--paper-line);
}
.on-paper .img-slot::before{
  background-image:repeating-linear-gradient(
    135deg,
    rgba(148,107,67,.08) 0 14px,
    transparent 14px 28px);
}
.on-paper .img-slot .label{
  color:#6B6452;
  background:rgba(246,242,234,.7);
  border-color:var(--paper-line);
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--navy-deep);
  border-top:1px solid var(--rule);
  padding:64px 0 32px;
  color:rgba(246,242,234,.7);
  font-size:14px;
}
footer h4{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:500;
  margin-bottom:18px;
}
.foot-grid{
  display:grid; gap:40px;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .foot-grid{ grid-template-columns:2fr 1fr 1fr 1fr } }
.foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.foot-col a:hover{ color:var(--brass-soft) }
.foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  border-top:1px solid var(--rule);
  padding-top:24px; margin-top:48px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------- FORMS ---------- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px }
.field label{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-deep);
}
.field input, .field textarea, .field select{
  font:inherit; color:inherit;
  background:transparent;
  border:0; border-bottom:1px solid #C7BFA9;
  padding:10px 0;
  outline:none;
  transition:border-color .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-bottom-color:var(--brass-deep);
}
.field textarea{ min-height:120px; resize:vertical }
.field .hint{ font-size:12px; color:#7C7666 }

/* ---------- UTILITY ---------- */
.rule{ height:1px; background:var(--rule); border:0 }
.on-paper .rule{ background:var(--rule-d) }
.center{ text-align:center }
hr{ border:0; border-top:1px solid var(--rule); margin:0 }

/* skip-link for a11y */
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:12px; top:12px; background:var(--brass); color:var(--navy); padding:8px 12px; z-index:100 }