/* =========================================================
   Mold Remediation Stone Mountain — Design System
   Palette: paper / ink / slate / damp teal / rust ochre
   Type: Archivo (headline) + Source Sans 3 (body)
   ========================================================= */

:root{
  --paper:   #F2F1EC;
  --paper-2: #EAE8E0;
  --ink:     #21231F;
  --slate:   #465356;
  --teal:    #2B5D5A;
  --teal-d:  #1D4341;
  --ochre:   #B5651D;
  --ochre-d: #914F16;
  --line:    #D8D4C8;
  --white:   #FFFFFF;

  --font-head: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;

  --max: 1120px;
  --radius: 3px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:var(--teal-d);}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:3px solid var(--ochre); outline-offset:2px;
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:800;
  color:var(--ink);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,4.6vw,3.4rem); font-weight:900;}
h2{font-size:clamp(1.5rem,3vw,2.15rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em; max-width:70ch;}
.container{max-width:var(--max); margin:0 auto; padding:0 24px;}
.section{padding:64px 0;}
.section--tight{padding:40px 0;}
.section--alt{background:var(--paper-2);}
.section--dark{background:var(--ink); color:var(--paper);}
.section--dark h2, .section--dark h3{color:var(--white);}
.section--dark p{color:#CFD3CC;}

.eyebrow{
  font-family:var(--font-head);
  font-weight:700;
  font-size:.8rem;
  color:var(--ochre-d);
  margin:0 0 .6em;
}

.lede{font-size:1.15rem; color:var(--slate); max-width:60ch;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1rem;
  padding:.85em 1.4em;
  border-radius:var(--radius);
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
}
.btn--primary{background:var(--ochre); color:var(--white);}
.btn--primary:hover{background:var(--ochre-d);}
.btn--secondary{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn--secondary:hover{background:var(--ink); color:var(--paper);}
.btn--onDark{background:var(--paper); color:var(--ink);}
.btn--onDark:hover{background:var(--white);}
.btn--ghost{background:transparent; color:var(--teal-d); border-color:var(--teal-d); padding:.6em 1.1em; font-size:.92rem;}

.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:1.6em;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:var(--max); margin:0 auto;
  gap:16px;
}
.brand{
  font-family:var(--font-head); font-weight:900; font-size:1.05rem;
  text-decoration:none; color:var(--ink);
  display:flex; align-items:center; gap:10px;
}
.brand-mark{
  width:34px; height:34px; flex:none;
}
.main-nav{display:flex; gap:22px; align-items:center;}
.main-nav a{
  color:var(--ink); text-decoration:none; font-size:.96rem; font-weight:600;
}
.main-nav a:hover{color:var(--teal-d);}
.header-call{
  font-family:var(--font-head); font-weight:800; color:var(--white);
  background:var(--teal); padding:.6em 1.1em; border-radius:var(--radius);
  text-decoration:none; white-space:nowrap; font-size:.95rem;
}
.header-call:hover{background:var(--teal-d);}
.nav-toggle{display:none;}

@media (max-width:900px){
  .main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; padding:24px;
    transform:translateX(100%); transition:transform .25s ease;
    overflow-y:auto;
  }
  .main-nav a{font-size:1.15rem; padding:12px 0; border-bottom:1px solid var(--line); width:100%;}
  .nav-toggle{
    display:inline-flex; background:none; border:2px solid var(--ink); border-radius:var(--radius);
    width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer;
  }
  #nav-check:checked ~ .main-nav{transform:translateX(0);}
  .header-bar{flex-wrap:wrap;}
}

/* ---------- Hero ---------- */
.hero{padding:56px 0 48px; background:var(--paper);}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:.6em;
  border:1px solid var(--line); background:var(--white);
  padding:.4em .9em; border-radius:2em; font-size:.85rem; color:var(--slate);
  margin-bottom:1.1em;
}
.hero-tag .dot{width:8px; height:8px; border-radius:50%; background:var(--ochre);}
.tagcard{
  background:var(--ink); color:var(--paper);
  border-radius:var(--radius);
  padding:26px 26px 22px;
  font-family:var(--font-head);
  border-left:6px solid var(--ochre);
}
.tagcard dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:14px 0 0; font-family:var(--font-body); font-weight:400;}
.tagcard dt{color:#9CA6A2; font-size:.85rem;}
.tagcard dd{margin:0; font-weight:600;}
.tagcard h3{color:var(--white); margin-bottom:2px; font-size:1.1rem;}
.tagcard .tagcard-sub{color:#B9C2BE; font-size:.85rem; margin:0;}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
}

/* ---------- Cards / grids ---------- */
.grid{display:grid; gap:24px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){ .grid--3,.grid--2{grid-template-columns:1fr;} }

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
}
.card h3{margin-bottom:.4em;}
.card p{margin-bottom:.6em; color:var(--slate);}
.card .card-link{font-weight:700; font-size:.92rem; text-decoration:none;}

.list-check{list-style:none; padding:0; margin:0;}
.list-check li{
  position:relative; padding-left:1.6em; margin-bottom:.6em; color:var(--slate);
}
.list-check li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:9px; height:9px; background:var(--teal); border-radius:2px;
}

/* ---------- Process steps (genuine sequence) ---------- */
.steps{counter-reset:step; display:grid; gap:0;}
.step{
  display:grid; grid-template-columns:64px 1fr; gap:20px;
  padding:22px 0; border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line);}
.step-num{
  counter-increment:step; font-family:var(--font-head); font-weight:900;
  font-size:1.6rem; color:var(--ochre);
}
.step-num::before{content: counter(step, decimal-leading-zero);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line); padding:18px 0;}
.faq summary{
  cursor:pointer; font-family:var(--font-head); font-weight:700; font-size:1.05rem;
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-size:1.4rem; color:var(--ochre); flex:none;}
.faq details[open] summary::after{content:"–";}
.faq p{margin-top:.7em; color:var(--slate);}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{padding:16px 0 0; font-size:.85rem; color:var(--slate);}
.breadcrumbs a{color:var(--slate); text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline;}

/* ---------- Note / caution boxes ---------- */
.note{
  border:1px solid var(--line); border-left:4px solid var(--teal);
  background:var(--white); padding:18px 20px; border-radius:var(--radius);
  margin:1.4em 0; color:var(--slate); font-size:.96rem;
}
.note strong{color:var(--ink);}
.note--caution{border-left-color:var(--ochre);}

/* ---------- Emergency banner ---------- */
.banner{
  background:var(--teal); color:var(--white);
  padding:16px 0;
}
.banner .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.banner p{margin:0; color:var(--white); font-weight:600;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:#C9CFC9; padding:56px 0 28px; margin-top:0;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px;}
.site-footer h4{color:var(--white); font-size:.95rem; margin-bottom:.9em;}
.site-footer a{color:#C9CFC9; text-decoration:none; font-size:.92rem;}
.site-footer a:hover{color:var(--white);}
.footer-links{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55em;}
.footer-bottom{
  border-top:1px solid #3A3F3B; margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.82rem; color:#8B928D;
}
.footer-bottom a{color:#8B928D;}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;} }

/* ---------- Sticky mobile call bar ---------- */
.mobile-call{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--ochre); padding:12px 18px;
  text-align:center; text-decoration:none; color:var(--white);
  font-family:var(--font-head); font-weight:800; font-size:1rem;
  box-shadow:0 -4px 14px rgba(0,0,0,.18);
}
@media (max-width:760px){
  .mobile-call{display:block;}
  body{padding-bottom:56px;}
}

/* ---------- Forms ---------- */
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-weight:700; margin-bottom:.4em; font-size:.92rem;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:.75em .9em; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:1rem; background:var(--white); color:var(--ink);
}
.form-field textarea{min-height:120px; resize:vertical;}
.form-note{font-size:.85rem; color:var(--slate);}

/* ---------- Utilities ---------- */
.center{text-align:center;}
.small{font-size:.9rem; color:var(--slate);}
.mt-0{margin-top:0;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
@media (max-width:860px){ .two-col{grid-template-columns:1fr;} }
.divider{height:1px; background:var(--line); border:0; margin:48px 0;}