/* All in 1 Mold Contractors, design system
   "The Mold Man's Field Guide": editorial, trade-craftsman, family, health-first.
   Cream paper, navy ink, mustard-gold accent. Serif body + condensed display.
   Deliberately NOT the centered-hero / 3-icon-card / Inter / blue-gradient AI look. */

:root{
  --navy:#14578c; --navy-deep:#0f3f66; --navy-ink:#10324f;
  --gold:#bfa016; --gold-deep:#a58b13; --gold-soft:#d9c519;
  --cream:#faf6e8; --paper:#fefcf3; --paper-2:#f4eeda;
  --ink:#23211c; --muted:#6b6555; --rule:#e0d9b8; --rule-strong:#cdc193;
  --maxw:1180px;
  --display:"Oswald", "Arial Narrow", sans-serif;
  --serif:"Lora", Georgia, "Times New Roman", serif;
  --shadow:0 18px 50px -28px rgba(16,50,79,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--navy); text-decoration:none}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.02; margin:0; color:var(--navy-ink); letter-spacing:.005em}
p{margin:0 0 1.1em}
.wrap{width:min(var(--maxw),92%); margin:0 auto}
.eyebrow{font-family:var(--display); text-transform:uppercase; letter-spacing:.26em; font-size:.74rem; font-weight:600; color:var(--gold-deep)}
.serif-em{font-style:italic; color:var(--navy)}

/* ---------- top callbar ---------- */
.callbar{background:var(--navy-ink); color:#f3ecd2; font-family:var(--display); letter-spacing:.04em}
.callbar .wrap{display:flex; gap:18px; align-items:center; justify-content:space-between; padding:7px 0; font-size:.82rem; text-transform:uppercase}
.callbar a{color:#fff}
.callbar .cb-r{display:flex; gap:20px; align-items:center}
@media(max-width:640px){ .callbar .cb-hide{display:none} }

/* ---------- header / nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(250,246,232,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0}
.brand{display:flex; align-items:center; gap:13px}
.brand img{width:58px; height:58px; border-radius:50%; border:2px solid var(--gold); background:var(--navy); object-fit:cover}
.brand .bt{font-family:var(--display); line-height:1}
.brand .bt b{display:block; font-weight:700; font-size:1.06rem; color:var(--navy-ink); letter-spacing:.01em}
.brand .bt span{font-size:.66rem; text-transform:uppercase; letter-spacing:.24em; color:var(--gold-deep)}
.nav-links{display:flex; gap:20px; align-items:center; font-family:var(--display); text-transform:uppercase; font-size:.8rem; letter-spacing:.07em}
.nav-links>a,.nd-top{color:var(--navy-ink); padding:6px 0; border-bottom:2px solid transparent; text-decoration:none; display:inline-block}
.nav-links>a:hover,.nd-top:hover,.nav-links>a.cur,.nd-top.cur{border-bottom-color:var(--gold)}
/* dropdown nav */
.nd{position:relative}
.nd-top{cursor:pointer}
.nd-top::after{content:" \25BE"; font-size:.62em; color:var(--gold-deep); vertical-align:middle; margin-left:3px}
.nd-menu{position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px); min-width:230px; background:var(--paper); border:1px solid var(--rule-strong); box-shadow:var(--shadow); padding:7px 0; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; z-index:70}
.nd:hover .nd-menu,.nd:focus-within .nd-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nd-menu::before{content:""; position:absolute; top:-8px; left:0; right:0; height:8px}
.nd-menu a{display:block; padding:9px 18px; border:0; font-size:.78rem; letter-spacing:.04em; white-space:nowrap; color:var(--navy-ink)}
.nd-menu a:hover{background:var(--cream); color:var(--gold-deep)}
.nd-menu a:first-child{font-weight:600; color:var(--navy); border-bottom:1px solid var(--rule); margin-bottom:4px; padding-bottom:11px}
.nav-cta{font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-size:.84rem; font-weight:600;
  background:var(--gold); color:var(--navy-ink); padding:11px 18px; border-radius:2px; border:1px solid var(--gold-deep)}
.nav-cta:hover{background:var(--gold-deep); color:#fff}
.nav-toggle{display:none; font-family:var(--display); text-transform:uppercase; font-size:.8rem; letter-spacing:.1em; background:none; border:1px solid var(--rule-strong); padding:8px 12px; border-radius:2px; color:var(--navy-ink); cursor:pointer}
@media(max-width:980px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:inline-block}
  .nav.open .nav-links{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--rule); padding:8px 4%; max-height:78vh; overflow-y:auto}
  .nav.open .nav-links>a{padding:13px 0; border-bottom:1px solid var(--rule)}
  /* dropdowns become accordions on mobile */
  .nav.open .nd{border-bottom:1px solid var(--rule)}
  .nav.open .nd-top{padding:13px 0; width:100%}
  .nav.open .nd-menu{position:static; opacity:1; visibility:visible; transform:none; min-width:0; box-shadow:none; border:0; background:var(--cream); padding:0; max-height:0; overflow:hidden; transition:max-height .25s ease}
  .nav.open .nd.open .nd-menu{max-height:600px; padding:4px 0 8px}
  .nav.open .nd-menu a{padding:11px 14px; font-size:.82rem}
  .nav.open .nd-menu a:first-child{border-bottom:1px solid var(--rule-strong)}
  .nav.open .nav-cta{display:block; margin:10px 4% 16px; text-align:center}
}

/* ---------- buttons ---------- */
.btn{display:inline-block; font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-weight:600; font-size:.92rem; padding:14px 26px; border-radius:2px; cursor:pointer; transition:.15s}
.btn-gold{background:var(--gold); color:var(--navy-ink); border:1px solid var(--gold-deep)}
.btn-gold:hover{background:var(--gold-deep); color:#fff}
.btn-navy{background:var(--navy); color:#fff; border:1px solid var(--navy-deep)}
.btn-navy:hover{background:var(--navy-deep)}
.btn-ghost{background:transparent; color:var(--navy-ink); border:1px solid var(--navy-ink)}
.btn-ghost:hover{background:var(--navy-ink); color:var(--cream)}

/* ---------- hero (editorial, asymmetric, not centered) ---------- */
.hero{background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%); border-bottom:1px solid var(--rule); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; padding:64px 0 56px}
.hero-kicker{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.hero-kicker .ln{height:1px; width:46px; background:var(--gold-deep)}
.hero h1{font-size:clamp(2.7rem,6vw,4.7rem); font-weight:700; text-transform:uppercase; color:var(--navy-ink)}
.hero h1 em{font-family:var(--serif); font-style:italic; font-weight:500; text-transform:none; color:var(--gold-deep); display:block; font-size:.62em; letter-spacing:0; margin-top:.12em}
.hero-lede{font-size:1.18rem; color:var(--ink); margin:22px 0 28px; max-width:33ch}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero-fig{position:relative}
.hero-fig .frame{border:1px solid var(--rule-strong); padding:10px; background:var(--paper); box-shadow:var(--shadow); transform:rotate(-1.2deg)}
.hero-fig .frame img{width:100%; height:430px; object-fit:cover; filter:saturate(.92) contrast(1.03)}
.hero-fig .cap{position:absolute; left:-14px; bottom:26px; background:var(--navy-ink); color:#f3ecd2; font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; padding:8px 14px; transform:rotate(-1.2deg)}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:30px; padding:40px 0} .hero-fig .frame img{height:320px} }

/* ---------- the seal (signature device, CSS-drawn) ---------- */
.seal{width:150px; height:150px; border-radius:50%; border:2px solid var(--navy); position:relative; display:grid; place-items:center; text-align:center; background:var(--paper); flex:0 0 auto}
.seal::before{content:""; position:absolute; inset:7px; border:1px dashed var(--gold-deep); border-radius:50%}
.seal .s-mid{font-family:var(--display); text-transform:uppercase; line-height:1.05}
.seal .s-mid b{display:block; color:var(--navy-ink); font-size:1.5rem; font-weight:700}
.seal .s-mid span{display:block; font-size:.56rem; letter-spacing:.18em; color:var(--gold-deep); margin-top:3px}
.seal-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.seal-row .sr-text{font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; color:var(--muted); line-height:1.9}
.seal-row .sr-text b{color:var(--navy-ink)}

/* ---------- trust strip ---------- */
.trust{background:var(--navy-ink); color:#eadfb9}
.trust .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:30px 0}
.trust .t{display:flex; flex-direction:column; gap:3px}
.trust .t b{font-family:var(--display); font-size:2rem; font-weight:700; color:#fff; line-height:1}
.trust .t span{font-size:.78rem; letter-spacing:.04em; color:#d9c98e; font-family:var(--display); text-transform:uppercase}
@media(max-width:740px){ .trust .wrap{grid-template-columns:1fr 1fr} }

/* ---------- section scaffolding ---------- */
section{padding:74px 0}
.sec-head{max-width:62ch}
.sec-head h2{font-size:clamp(2rem,4vw,3rem); text-transform:uppercase; margin:10px 0 14px}
.sec-head p{color:var(--muted); font-size:1.08rem}
.center{text-align:center; margin:0 auto}

/* ---------- before/after (the persuasive element) ---------- */
.ba-wrap{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule-strong); background:var(--paper); box-shadow:var(--shadow)}
.ba-half{position:relative}
.ba-half img{width:100%; height:340px; object-fit:cover}
.ba-half .tag{position:absolute; top:14px; left:14px; font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:600; padding:6px 12px; color:#fff}
.ba-half.before .tag{background:#9a3b2e}
.ba-half.after .tag{background:var(--navy)}
.ba-half.before::after{content:""; position:absolute; top:0; right:0; bottom:0; width:2px; background:var(--gold)}
@media(max-width:640px){ .ba-half img{height:240px} }

/* ---------- services (editorial, alternating, NOT identical cards) ---------- */
.svc{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; padding:34px 0; border-top:1px solid var(--rule)}
.svc:nth-child(even){direction:rtl}
.svc:nth-child(even) > *{direction:ltr}
.svc-num{font-family:var(--display); font-size:.8rem; letter-spacing:.2em; color:var(--gold-deep); text-transform:uppercase}
.svc h3{font-size:1.9rem; text-transform:uppercase; margin:8px 0 12px}
.svc p{color:var(--ink)}
.svc .svc-link{font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; font-weight:600; color:var(--navy); border-bottom:2px solid var(--gold); padding-bottom:2px}
.svc-fig{border:1px solid var(--rule-strong); padding:8px; background:var(--paper)}
.svc-fig img{width:100%; height:300px; object-fit:cover; filter:saturate(.92)}
.svc.flagship{background:var(--paper); border:1px solid var(--rule-strong); padding:32px; box-shadow:var(--shadow)}
.svc.flagship h3{font-size:2.3rem; color:var(--navy-ink)}
.badge-hero{display:inline-block; font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; background:var(--gold); color:var(--navy-ink); padding:4px 10px; margin-bottom:6px}
@media(max-width:820px){ .svc,.svc:nth-child(even){grid-template-columns:1fr; direction:ltr} .svc-fig img{height:240px} }

/* ---------- field note (signature margin device) ---------- */
.fieldnote{background:var(--paper-2); border-left:4px solid var(--gold); padding:22px 26px; font-family:var(--serif); font-style:italic; color:var(--navy-ink); position:relative}
.fieldnote .fn-lab{font-family:var(--display); font-style:normal; text-transform:uppercase; letter-spacing:.2em; font-size:.66rem; color:var(--gold-deep); display:block; margin-bottom:6px}
.fieldnote .fn-sig{font-family:var(--display); font-style:normal; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; color:var(--muted); display:block; margin-top:10px}

/* ---------- split feature ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.split-fig img{width:100%; height:440px; object-fit:cover; border:1px solid var(--rule-strong); padding:0}
.split-fig .frame{border:1px solid var(--rule-strong); padding:10px; background:var(--paper); box-shadow:var(--shadow)}
@media(max-width:820px){ .split{grid-template-columns:1fr; gap:28px} .split-fig img{height:300px} }

/* ---------- areas ---------- */
.areas-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.areas-grid span,.areas-grid a{font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; color:var(--navy-ink); background:var(--paper); border:1px solid var(--rule-strong); padding:9px 14px; text-decoration:none; transition:background .2s ease,color .2s ease,border-color .2s ease}
.areas-grid a:hover{background:var(--navy); color:#fff; border-color:var(--navy)}

/* ---------- CTA band ---------- */
.cta{background:var(--navy-ink); color:#f3ecd2; text-align:center}
.cta h2{color:#fff; font-size:clamp(2rem,4vw,3rem); text-transform:uppercase; margin-bottom:10px}
.cta p{color:#d9c98e; max-width:54ch; margin:0 auto 24px}
.cta .actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.cta .phone{font-family:var(--display); font-size:1.6rem; color:#fff; letter-spacing:.02em; display:block; margin-top:18px}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--rule); padding:6px 0}
.faq-item summary{font-family:var(--display); text-transform:uppercase; letter-spacing:.03em; font-size:1.02rem; color:var(--navy-ink); cursor:pointer; padding:16px 0; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; color:var(--gold-deep); font-weight:700}
.faq-item[open] summary::after{content:"-"}
.faq-item .fa{padding:0 0 18px; color:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--paper); border-top:3px solid var(--gold)}
.foot .wrap{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; padding:52px 0 30px}
@media(max-width:860px){.foot .wrap{grid-template-columns:1fr 1fr; gap:28px}}
@media(max-width:520px){.foot .wrap{grid-template-columns:1fr}}
.foot .fb img{width:62px; height:62px; border-radius:50%; border:2px solid var(--gold); background:var(--navy)}
.foot h4{font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; color:var(--gold-deep); margin-bottom:14px}
.foot a,.foot p{display:block; color:var(--ink); font-size:.96rem; margin:0 0 9px}
.foot a:hover{color:var(--navy)}
.foot .fine{border-top:1px solid var(--rule); padding:18px 0; font-size:.82rem; color:var(--muted); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
@media(max-width:740px){ .foot .wrap{grid-template-columns:1fr} }

/* ---------- sticky mobile call ---------- */
.mcall{display:none}
@media(max-width:640px){
  .mcall{display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; background:var(--gold); border-top:1px solid var(--gold-deep)}
  .mcall a{flex:1; text-align:center; padding:15px; font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; color:var(--navy-ink); font-weight:600}
  .mcall a:first-child{border-right:1px solid var(--gold-deep)}
  body{padding-bottom:54px}
}

/* ---------- reveal ---------- */
.reveal{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ---- expanded site components ---- */
.crumbs{background:var(--paper);border-bottom:1px solid var(--rule)}
.crumbs .wrap{max-width:var(--maxw);margin:0 auto;padding:11px 24px;font-family:var(--display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--navy);text-decoration:none}
.crumbs a:hover{color:var(--gold-deep)}
.crumbs i{font-style:normal;margin:0 8px;color:var(--rule-strong)}
.crumbs span{color:var(--muted)}

.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.lcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:22px 22px 18px;text-decoration:none;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.lcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--rule-strong)}
.lcard h3{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:1.12rem;color:var(--navy-ink);margin:0 0 8px;letter-spacing:.01em}
.lcard p{font-family:var(--serif);font-size:.95rem;color:var(--muted);margin:0 0 14px;line-height:1.55}
.lc-go{margin-top:auto;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.lc-go::after{content:" \2192"}

.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:28px}
.scard{display:flex;gap:18px;background:var(--paper);border:1px solid var(--rule);border-radius:3px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--rule-strong)}
.sc-fig{flex:0 0 38%;overflow:hidden;background:var(--navy-ink)}
.sc-fig img{width:100%;height:100%;object-fit:cover;display:block;min-height:150px}
.sc-b{padding:20px 20px 18px;display:flex;flex-direction:column}
.sc-b h3{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:1.16rem;color:var(--navy-ink);margin:0 0 8px}
.sc-b p{font-family:var(--serif);font-size:.94rem;color:var(--muted);margin:0 0 14px;line-height:1.55}

.article{max-width:760px}
.article h2{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(1.4rem,3vw,1.9rem);color:var(--navy-ink);margin:34px 0 12px;line-height:1.1}
.article h2:first-child{margin-top:0}
.article p{font-family:var(--serif);font-size:1.06rem;line-height:1.75;color:var(--ink);margin:0 0 16px}
.article .fieldnote{font-family:var(--serif)}

@media(max-width:860px){
  .lgrid{grid-template-columns:1fr}
  .sgrid{grid-template-columns:1fr}
  .scard{flex-direction:column}
  .sc-fig{flex-basis:auto}
  .sc-fig img{min-height:180px}
}

/* ---- lead form + contact card ---- */
.leadform{display:flex;flex-direction:column;gap:14px}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lf-field{display:flex;flex-direction:column}
.lf-field label{font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;color:var(--navy-ink);margin-bottom:6px}
.leadform input,.leadform select,.leadform textarea{font-family:var(--serif);font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);border-radius:3px;padding:11px 13px;width:100%;box-sizing:border-box;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.leadform input:focus,.leadform select:focus,.leadform textarea:focus{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(191,160,22,.16)}
.leadform textarea{resize:vertical;min-height:96px}
.leadform button{margin-top:4px;cursor:pointer}
.lf-fine{font-family:var(--serif);font-size:.85rem;color:var(--muted);margin:4px 0 0}
.lf-fine a{color:var(--navy);font-weight:600}
.lead-ok{background:var(--paper);border:1px solid var(--rule-strong);border-left:4px solid var(--gold);border-radius:3px;padding:24px}
.lead-ok h3{font-family:var(--display);text-transform:uppercase;color:var(--navy-ink);font-size:1.3rem;margin:0 0 8px}
.lead-ok p{font-family:var(--serif);color:var(--ink);margin:0}
.lead-ok a{color:var(--navy);font-weight:600}
.contact-card{background:var(--navy-ink);color:#f3ecd2;border-radius:4px;padding:30px 30px 0;overflow:hidden;box-shadow:var(--shadow)}
.contact-card h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;color:#fff;font-size:1.3rem;margin:0 0 14px}
.contact-card p{font-family:var(--serif);color:#e8dfc4;margin:0;