/* ============================================================
   Valley Compliance Testing — shared stylesheet
   Palette: deep Welsh-slate navy, aged-brass accent, lime-wash cream
   Type: Fraunces (display) + Hanken Grotesk (body/UI)
   Signature motif: the "breathing wall" section — a line-drawn
   cross-section of a solid wall that recurs as a divider, standing
   in for VCT's whole diagnostic thesis (moisture moves through
   old walls; the fix has to let it keep moving).
   ============================================================ */

:root{
  --navy: #0D1B2E;
  --navy-panel: #132840;
  --navy-deep: #091320;
  --navy-line: #1F3A57;
  --brass: #C6A15B;
  --brass-light: #DCC38C;
  --cream: #F4F0E6;
  --cream-dim: #D8CFBE;
  --muted: #9FB0C2;
  --green: #4C7A5B;
  --red-flag: #B96A56;
  --radius: 3px;
  --max: 1120px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", Arial, Helvetica, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--navy);
  color:var(--cream);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; margin:0 0 .5em; line-height:1.15; letter-spacing:-0.01em;}
p{margin:0 0 1em;}
.container{max-width:var(--max); margin:0 auto; padding:0 28px;}

:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--navy-deep);
  border-bottom:1px solid var(--navy-line);
  font-size:13.5px;
  color:var(--cream-dim);
}
.topbar .container{display:flex; justify-content:space-between; align-items:center; padding-top:9px; padding-bottom:9px; gap:16px; flex-wrap:wrap;}
.topbar strong{color:var(--brass); font-weight:600;}
.topbar a.phone{color:var(--cream); font-weight:600; text-decoration:none;}
.topbar a.phone:hover{color:var(--brass);}

/* ---------- Header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:rgba(13,27,46,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--navy-line);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:20px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand-mark{
  width:42px; height:42px; border:1.5px solid var(--brass); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; font-size:16px; color:var(--brass);
  flex-shrink:0;
}
.brand-text{line-height:1.15;}
.brand-text .name{font-family:var(--serif); font-weight:600; font-size:19px; color:var(--cream); display:block;}
.brand-text .sub{font-size:11px; letter-spacing:.14em; color:var(--brass); text-transform:uppercase;}

nav.primary{display:flex; align-items:center; gap:28px;}
nav.primary a{
  font-size:14.5px; text-decoration:none; color:var(--cream-dim);
  position:relative; padding:4px 0;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{color:var(--cream);}
nav.primary a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--brass);
}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brass); color:var(--navy-deep); font-weight:700; font-size:14px;
  padding:10px 18px; border-radius:var(--radius); text-decoration:none; white-space:nowrap;
  border:1px solid var(--brass);
}
.nav-cta:hover{background:var(--brass-light); border-color:var(--brass-light);}

.nav-toggle{display:none; background:none; border:1px solid var(--navy-line); color:var(--cream); width:42px; height:42px; border-radius:var(--radius); font-size:20px; cursor:pointer;}

@media (max-width:900px){
  nav.primary{
    position:absolute; top:100%; left:0; right:0; background:var(--navy);
    flex-direction:column; align-items:flex-start; padding:8px 28px 20px;
    border-bottom:1px solid var(--navy-line);
    display:none; gap:14px;
  }
  nav.primary.open{display:flex;}
  .nav-toggle{display:block;}
  .nav-cta{order:2; margin-top:8px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:700; font-size:15.5px;
  padding:14px 26px; border-radius:var(--radius); text-decoration:none;
  border:1px solid transparent; cursor:pointer;
}
.btn-brass{background:var(--brass); color:var(--navy-deep); border-color:var(--brass);}
.btn-brass:hover{background:var(--brass-light); border-color:var(--brass-light);}
.btn-ghost{background:transparent; color:var(--cream); border-color:var(--navy-line);}
.btn-ghost:hover{border-color:var(--brass); color:var(--brass);}
.btn-arrow::after{content:"→"; transition:transform .15s;}
.btn:hover .btn-arrow::after, .btn-arrow:hover::after{transform:translateX(3px);}

/* ---------- Hero ---------- */
.hero{padding:74px 0 60px; position:relative; overflow:hidden;}
.hero .eyebrow{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.hero .eyebrow::before{content:""; width:26px; height:1px; background:var(--brass);}
.hero h1{font-size:clamp(34px,5vw,54px); max-width:16ch; color:var(--cream);}
.hero .lede{font-size:19px; color:var(--cream-dim); max-width:56ch; margin-bottom:30px;}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px;}

.trust-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--navy-line);
}
.stars{color:var(--brass); letter-spacing:2px; font-size:15px;}
.trust-row .rating{font-family:var(--serif); font-size:22px; color:var(--cream); font-weight:600;}
.trust-row .count{font-size:14px; color:var(--muted);}
.trust-quote{font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--cream-dim); border-left:2px solid var(--brass); padding-left:14px;}

/* Breathing-wall signature motif */
.wall-motif{width:100%; height:auto; display:block;}
.wall-motif .brick{fill:var(--navy-panel); stroke:var(--navy-line); stroke-width:1;}
.wall-motif .moisture{stroke:var(--brass); stroke-width:1.4; fill:none; stroke-dasharray:6 5; opacity:.85;}
.wall-motif .arrow{fill:var(--brass);}
@keyframes drift{ to{ stroke-dashoffset:-22; } }
.wall-motif .moisture{animation:drift 5s linear infinite;}

.divider-wall{margin:0; padding:0; line-height:0; background:var(--navy-panel);}
.divider-wall svg{width:100%; height:64px; display:block;}

/* ---------- Section basics ---------- */
section{padding:76px 0;}
.section-head{max-width:64ch; margin-bottom:42px;}
.section-head .eyebrow{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:10px; display:block;}
.section-head h2{font-size:clamp(26px,3.4vw,36px);}
.section-head p{color:var(--cream-dim); font-size:17px;}
.bg-panel{background:var(--navy-panel);}
.bg-deep{background:var(--navy-deep);}

/* ---------- Cards ---------- */
.grid{display:grid; gap:22px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .g2,.g3,.g4{grid-template-columns:1fr;} }

.card{
  background:var(--navy-panel); border:1px solid var(--navy-line); border-radius:var(--radius);
  padding:28px 26px;
}
.card .tag{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-bottom:10px; display:block;}
.card h3{font-size:21px; margin-bottom:10px;}
.card p{color:var(--cream-dim); font-size:15.5px; margin-bottom:14px;}
.card a.more{font-size:14.5px; font-weight:700; color:var(--brass); text-decoration:none;}
.card a.more:hover{text-decoration:underline;}

.audience-card{text-align:left; padding:22px;}
.audience-card .icon{width:38px; height:38px; margin-bottom:12px;}
.audience-card h4{font-family:var(--serif); font-size:17px; margin-bottom:6px;}
.audience-card p{font-size:14.5px; color:var(--cream-dim); margin:0;}

.checklist{list-style:none; margin:0; padding:0;}
.checklist li{display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; font-size:15.5px; color:var(--cream-dim);}
.checklist li svg{flex-shrink:0; margin-top:3px;}

/* ---------- Not-sell banner ---------- */
.banner{
  border:1px solid var(--brass); border-radius:var(--radius);
  padding:26px 28px; display:flex; gap:20px; align-items:center;
  background:linear-gradient(180deg, rgba(198,161,91,0.06), transparent);
}
.banner strong{color:var(--brass); font-family:var(--serif); font-size:18px; display:block; margin-bottom:4px;}
.banner p{margin:0; color:var(--cream-dim); font-size:15px;}

/* ---------- Pricing table ---------- */
.price-table{width:100%; border-collapse:collapse; margin-top:10px;}
.price-table th{text-align:left; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); padding:12px 14px; border-bottom:1px solid var(--brass);}
.price-table td{padding:18px 14px; border-bottom:1px solid var(--navy-line); vertical-align:top;}
.price-table td.svc{font-family:var(--serif); font-size:17px; color:var(--cream);}
.price-table td.desc{color:var(--cream-dim); font-size:14.5px;}
.price-table td.fee{font-family:var(--serif); font-size:19px; color:var(--brass); text-align:right; white-space:nowrap; font-weight:600;}
.price-table tr:last-child td{border-bottom:none;}
.price-note{font-size:13.5px; color:var(--muted); margin-top:16px;}

/* ---------- Quote panel ---------- */
.quote-panel{background:var(--navy-panel); border:1px solid var(--navy-line); border-radius:var(--radius); padding:30px; }
.quote-panel .stars{margin-bottom:10px; display:block;}
.quote-panel blockquote{font-family:var(--serif); font-style:italic; font-size:19px; margin:0 0 12px; color:var(--cream);}
.quote-panel cite{font-style:normal; color:var(--brass); font-size:14px;}

/* ---------- Steps ---------- */
.steps{counter-reset:step;}
.step{display:flex; gap:20px; padding:22px 0; border-top:1px solid var(--navy-line);}
.step:first-child{border-top:none;}
.step .num{
  counter-increment:step; font-family:var(--serif); font-size:15px; color:var(--brass);
  width:34px; height:34px; border:1px solid var(--brass); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step .num::before{content:counter(step);}
.step h4{margin:0 0 6px; font-size:17px;}
.step p{margin:0; color:var(--cream-dim); font-size:15px;}

/* ---------- Qualifications ---------- */
.qual-group{margin-bottom:26px;}
.qual-group h4{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-bottom:14px;}
.qual-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 24px;}
@media (max-width:700px){.qual-list{grid-template-columns:1fr;}}
.qual-list li{display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--navy-line); font-size:15px;}
.qual-list .status{font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:20px; border:1px solid var(--muted); color:var(--muted); white-space:nowrap; height:fit-content;}
.qual-list .status.held{color:var(--green); border-color:var(--green);}
.qual-list .status.progress{color:var(--brass); border-color:var(--brass);}

/* ---------- Coverage ---------- */
.coverage-tags{display:flex; flex-wrap:wrap; gap:10px;}
.coverage-tags span{
  border:1px solid var(--navy-line); color:var(--cream-dim); font-size:14px;
  padding:8px 14px; border-radius:20px;
}

/* ---------- Guides list ---------- */
.guide-card{display:block; text-decoration:none; padding:26px 0; border-top:1px solid var(--navy-line);}
.guide-card:first-child{border-top:none;}
.guide-card .g-eyebrow{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass);}
.guide-card h3{color:var(--cream); font-size:22px; margin:8px 0;}
.guide-card p{color:var(--cream-dim); margin:0; font-size:15.5px;}
.guide-card .read{color:var(--brass); font-size:14px; font-weight:700; margin-top:8px; display:inline-block;}

article.guide-body{max-width:70ch;}
article.guide-body h2{margin-top:1.6em; font-size:26px;}
article.guide-body p{color:var(--cream-dim); font-size:17px;}
article.guide-body ul{color:var(--cream-dim); font-size:17px; padding-left:1.2em;}
article.guide-body li{margin-bottom:.5em;}

/* ---------- FAQ ---------- */
details.faq{border-bottom:1px solid var(--navy-line); padding:18px 0;}
details.faq summary{cursor:pointer; font-family:var(--serif); font-size:18px; color:var(--cream); list-style:none; display:flex; justify-content:space-between; gap:20px;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+"; color:var(--brass); font-size:22px; flex-shrink:0;}
details.faq[open] summary::after{content:"–";}
details.faq p{margin:14px 0 0; color:var(--cream-dim);}

/* ---------- Form ---------- */
form.contact{display:grid; gap:16px;}
form.contact label{font-size:13.5px; color:var(--brass); letter-spacing:.04em; margin-bottom:6px; display:block;}
form.contact input, form.contact select, form.contact textarea{
  width:100%; background:var(--navy-deep); border:1px solid var(--navy-line); color:var(--cream);
  padding:13px 14px; border-radius:var(--radius); font-family:var(--sans); font-size:15.5px;
}
form.contact input:focus, form.contact select:focus, form.contact textarea:focus{border-color:var(--brass); outline:none;}
form.contact textarea{min-height:130px; resize:vertical;}
.form-row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:600px){.form-row2{grid-template-columns:1fr;}}

/* ---------- Footer ---------- */
footer.site{background:var(--navy-deep); border-top:1px solid var(--navy-line); padding:56px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; margin-bottom:40px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h5{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-bottom:14px;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:9px;}
.footer-grid a{color:var(--cream-dim); text-decoration:none; font-size:14.5px;}
.footer-grid a:hover{color:var(--brass);}
.footer-bottom{border-top:1px solid var(--navy-line); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--muted);}
.footer-bottom a{color:var(--muted); text-decoration:none;}
.footer-bottom a:hover{color:var(--brass);}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--navy-panel); border-top:1px solid var(--navy-line); border-bottom:1px solid var(--navy-line);
  padding:56px 0; text-align:center;
}
.cta-band h2{font-size:clamp(24px,3vw,32px); margin-bottom:10px;}
.cta-band p{color:var(--cream-dim); margin-bottom:26px;}
.cta-band .cta-row{justify-content:center;}

/* ---------- Misc ---------- */
.pill{display:inline-block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); border:1px solid var(--brass); padding:4px 10px; border-radius:20px;}
.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}
.small-caps{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass);}
hr.rule{border:none; border-top:1px solid var(--navy-line); margin:40px 0;}