:root{
  --red:#A5231A; --red-dark:#7E1A13; --cream:#E8E6DF; --ink:#0A0A0A;
  --ink-soft:#3A3A38; --line:rgba(10,10,10,.16);
  --display:'Chakra Petch',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
.wrap{width:min(1120px,92vw);margin-inline:auto}
h1,h2,h3,.disp{font-family:var(--display);font-weight:700;font-style:italic;letter-spacing:.01em;line-height:1.02;text-transform:uppercase;margin:0}
a{color:inherit}

/* ---------- utility bar ---------- */
.util{background:var(--ink);color:var(--cream);font-size:14px}
.util .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center;padding:9px 0;flex-wrap:wrap}
.util a{text-decoration:none;font-weight:600}
.util .sep{opacity:.5}
.util a{white-space:nowrap}
@media(max-width:620px){.util{font-size:12.5px}.util .wrap{gap:2px 14px;padding:7px 0}}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:2px solid var(--ink)}
header .wrap{display:flex;align-items:center;gap:24px;padding:14px 0}
.logo{width:min(300px,52vw);display:block;flex:0 0 auto}
nav{margin-left:auto;display:flex;gap:26px;align-items:center}
nav a{font-family:var(--display);font-weight:600;font-style:italic;text-transform:uppercase;text-decoration:none;font-size:15px;letter-spacing:.03em}
nav a.hide-sm{white-space:nowrap}
nav a:hover{color:var(--red)}
@media(max-width:1080px){nav{gap:18px}}
@media(max-width:860px){nav .hide-sm{display:none}}
section[id]{scroll-margin-top:110px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:16px;letter-spacing:.02em;
 padding:14px 26px;border-radius:999px;text-decoration:none;border:2px solid var(--ink);transition:transform .12s ease, background .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}

/* ---------- badge (the brand capsule: round one end, square the other) ---------- */
.badge{display:inline-block;background:var(--red);color:#fff;font-family:var(--display);font-weight:700;font-style:italic;
 text-transform:uppercase;font-size:13px;letter-spacing:.08em;padding:7px 18px 7px 22px;border-radius:999px 4px 4px 999px}

/* ---------- hero ---------- */
.hero{padding:76px 0 68px;border-bottom:2px solid var(--ink)}
.hero h1{font-size:clamp(40px,7.4vw,86px)}
.hero .lede{font-size:clamp(17px,2.1vw,21px);max-width:60ch;margin:22px 0 0;color:var(--ink-soft)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero .rule{height:8px;background:var(--red);width:120px;margin:26px 0 0;border-radius:999px 2px 2px 999px}

/* ---------- section frame ---------- */
section{padding:74px 0}
.eyebrow{font-family:var(--display);font-weight:600;font-style:italic;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--red);margin:0 0 12px}
.sec-h{font-size:clamp(28px,4.4vw,46px)}
.sec-sub{max-width:62ch;color:var(--ink-soft);margin:16px 0 0}

/* ---------- service cards: the framed panel from the logo ---------- */
.grid{display:grid;gap:20px;margin-top:40px}
.g4{grid-template-columns:repeat(3,1fr)}
.card.feature{grid-column:1/-1}
.card.feature .card-in{display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g4{grid-template-columns:1fr}}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--red);padding:10px;border-radius:6px}
.card-in{background:var(--cream);border-radius:2px;padding:26px 22px;height:100%}
.card h3{font-size:22px;margin-bottom:10px}
.card p{margin:0;color:var(--ink-soft);font-size:16px}

/* ---------- why ---------- */
.why{background:var(--ink);color:var(--cream);border-block:2px solid var(--ink)}
.why .eyebrow{color:#E8695F}
.why .sec-sub{color:rgba(232,230,223,.72)}
.why .item{border-top:3px solid var(--red);padding-top:16px}
.why .item h3{font-size:19px;margin-bottom:8px}
.why .item p{margin:0;color:rgba(232,230,223,.72);font-size:15.5px}

/* ---------- photo slots ---------- */
.shots{display:grid;gap:16px;grid-template-columns:repeat(5,1fr);margin-top:36px}
.shot{background:var(--red);padding:8px;border-radius:6px;line-height:0}
.shot img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:2px;display:block}
@media(max-width:1040px){.shots{grid-template-columns:repeat(3,1fr)}}
.shots.two{grid-template-columns:repeat(2,1fr);max-width:640px}
@media(max-width:660px){.shots{grid-template-columns:repeat(2,1fr)}.shot img{aspect-ratio:1/1}}

/* reviews */
.rating{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:24px}
.rating .score{font-family:var(--display);font-weight:700;font-size:clamp(38px,5vw,52px);line-height:1}
.rating .stars{color:var(--red);font-size:22px;letter-spacing:3px;line-height:1}
.rating .count{color:var(--ink-soft);font-size:16px}
.revs{display:grid;gap:20px;margin-top:36px;grid-template-columns:repeat(2,1fr)}
.revs .wide{grid-column:1/-1}
.rev p{margin:0;font-size:16.5px;line-height:1.62;color:var(--ink)}
.rev .who{margin:18px 0 0;padding-top:14px;border-top:3px solid var(--red);
 font-family:var(--display);font-weight:600;font-style:italic;text-transform:uppercase;
 letter-spacing:.1em;font-size:13px;color:var(--red)}
.rev-more{margin-top:26px;font-size:15.5px;color:var(--ink-soft)}
@media(max-width:760px){.revs{grid-template-columns:1fr}}

/* ---------- form ---------- */
.form-wrap{background:var(--red);padding:12px;border-radius:8px;margin-top:36px}
.form-in{background:var(--cream);border-radius:3px;padding:clamp(24px,4vw,40px)}
.field{margin-bottom:18px}
label{display:block;font-family:var(--display);font-weight:600;font-style:italic;text-transform:uppercase;font-size:13.5px;letter-spacing:.06em;margin-bottom:7px}
input,select,textarea{width:100%;font-family:var(--body);font-size:16px;padding:13px 14px;border:2px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(165,35,26,.35);outline-offset:1px;border-color:var(--red)}
textarea{min-height:104px;resize:vertical}
.two{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.hp{position:absolute;left:-9999px}
.form-note{font-size:14px;color:var(--ink-soft);margin:14px 0 0}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--cream);padding:56px 0 34px}
footer .cols{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
.flogo{width:230px;display:block}
footer h4{font-family:var(--display);font-style:italic;text-transform:uppercase;font-size:14px;letter-spacing:.1em;margin:0 0 12px;color:#E8695F}
footer p,footer li{color:rgba(232,230,223,.74);font-size:15px;margin:0 0 6px}
footer ul{list-style:none;padding:0;margin:0}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
.legal{border-top:1px solid rgba(232,230,223,.18);margin-top:38px;padding-top:20px;font-size:13.5px;color:rgba(232,230,223,.5)}

/* service card headings that link to their own page */
.card h3 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:1px}
.card h3 a:hover{color:var(--red)}
footer ul a{color:inherit;text-decoration:none}
footer ul a:hover{text-decoration:underline}

/* ---------- trust badges (under the hero) ---------- */
.trust{padding:22px 0;border-bottom:2px solid var(--ink)}
.badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.badges li{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:999px 4px 4px 999px;padding:8px 18px 8px 14px;
 font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:14px;letter-spacing:.06em;line-height:1.2}
.badges li::before{content:"";width:10px;height:10px;background:var(--red);border-radius:999px 1px 1px 999px;flex:0 0 auto}
@media(max-width:620px){.badges{display:grid;grid-template-columns:1fr 1fr;gap:10px}.badges li{font-size:12.5px;padding:8px 10px 8px 12px}}

/* ---------- how it works ---------- */
.steps{list-style:none;padding:0;display:grid;gap:20px;margin:40px 0 0;grid-template-columns:repeat(4,1fr)}
.steps .num{display:inline-block;background:var(--red);color:#fff;font-family:var(--display);font-weight:700;font-style:italic;font-size:18px;
 line-height:1;padding:8px 16px 8px 18px;border-radius:999px 3px 3px 999px;margin-bottom:16px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.steps{grid-template-columns:1fr}}

/* ---------- what goes on your house (capsule cards) ---------- */
.specs{display:grid;gap:20px;margin-top:40px;grid-template-columns:repeat(2,1fr)}
.spec{background:var(--cream);border:3px solid var(--red);border-radius:60px 6px 6px 60px;padding:24px 26px 24px 40px}
.spec h3{font-size:21px;margin-bottom:8px}
.spec p{margin:0;color:var(--ink-soft);font-size:16px}
@media(max-width:760px){.specs{grid-template-columns:1fr}.spec{border-radius:36px 6px 6px 36px;padding:22px 20px 22px 28px}}

/* ---------- FAQ accordion ---------- */
.faq{margin-top:36px;border-top:2px solid var(--ink)}
.faq details{border-bottom:2px solid var(--ink)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;
 font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(16px,2vw,19px);line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;width:38px;text-align:center;background:var(--red);color:#fff;font-size:20px;line-height:30px;
 border-radius:999px 3px 3px 999px;font-style:normal}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--red)}
.faq details p{margin:0 0 20px;max-width:70ch;color:var(--ink-soft)}

/* ---------- areas we serve ---------- */
.areas{background:var(--ink);color:var(--cream)}
.areas .eyebrow{color:#E8695F}
.areas .sec-h{font-size:clamp(24px,3.4vw,36px);max-width:26ch}
.areas .sec-sub{color:rgba(232,230,223,.72)}
.area-groups{display:grid;gap:28px;margin-top:36px;grid-template-columns:repeat(4,1fr)}
.area{border-top:3px solid var(--red);padding-top:16px}
.area h3{font-size:18px;margin-bottom:8px}
.area p{margin:0;color:rgba(232,230,223,.72);font-size:15.5px}
@media(max-width:900px){.area-groups{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.area-groups{grid-template-columns:1fr}}

/* ---------- final CTA band ---------- */
.cta-band{background:var(--red);color:var(--cream);border-top:2px solid var(--ink);padding:60px 0}
.cta-band p{margin:12px 0 0;font-size:19px}
.cta-band .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.cta-band .btn-primary{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.cta-band .btn-primary:hover{background:#000;border-color:#000}
.cta-band .btn-ghost{color:var(--cream);border-color:var(--cream)}
.cta-band .btn-ghost:hover{background:var(--cream);color:var(--red)}
footer p a{text-decoration:underline}
@media(max-width:400px){nav .btn{padding:10px 16px;font-size:14px}}
#cta .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* ===== Load-in intro (intro.js) ===== */
html.gm-intro-pending::before{content:"";position:fixed;inset:0;background:#E8E6DF;z-index:99998;animation:gmFailsafe 0s 2.5s forwards}
@keyframes gmFailsafe{to{visibility:hidden}}
#gm-intro{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:#E8E6DF;overflow:hidden;cursor:pointer;animation:gmExit .62s cubic-bezier(.76,0,.24,1) 1.95s forwards}
#gm-intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:#A5231A}
#gm-intro .stage{width:min(80vw,620px);display:grid;gap:clamp(14px,2.4vw,22px);justify-items:start;animation:gmLift .62s cubic-bezier(.76,0,.24,1) 1.95s forwards}
#gm-intro svg{width:100%;height:auto;overflow:visible}
#gm-intro .run{height:3px;width:100%;background:#A5231A;transform-origin:left;transform:scaleX(0);animation:gmRoll .5s cubic-bezier(.65,0,.35,1) .05s forwards}
#gm-intro .cap{clip-path:inset(0 100% 0 0);animation:gmWipe .55s cubic-bezier(.65,0,.35,1) .28s forwards}
#gm-intro .cross{transform-box:fill-box;transform-origin:center;transform:scale(0) rotate(-90deg);animation:gmCross .5s cubic-bezier(.34,1.56,.64,1) .62s forwards}
#gm-intro .panel{transform-box:fill-box;transform-origin:left;transform:scaleX(0);animation:gmPanel .4s cubic-bezier(.65,0,.35,1) .5s forwards}
#gm-intro .ltr{transform-box:fill-box;opacity:0;transform:translateX(60px) skewX(-10deg);animation:gmLetter .42s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.7s + var(--i) * 14ms)}
#gm-intro .gleam{transform:translateX(-400px) skewX(-18deg);animation:gmGleam .7s ease-in-out 1.2s forwards}
#gm-intro .gm-spec{font-family:ui-monospace,Menlo,monospace;font-size:clamp(10px,1.5vw,13px);letter-spacing:.16em;color:#9A9890;display:flex;gap:.9em;flex-wrap:wrap;opacity:0;transform:translateY(6px);animation:gmFade .45s ease-out 1.3s forwards}
#gm-intro .gm-spec b{color:#A5231A;font-weight:500}
@keyframes gmRoll{to{transform:scaleX(1)}}
@keyframes gmWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes gmCross{to{transform:scale(1) rotate(0)}}
@keyframes gmPanel{to{transform:scaleX(1)}}
@keyframes gmLetter{to{opacity:1;transform:none}}
@keyframes gmGleam{to{transform:translateX(1300px) skewX(-18deg)}}
@keyframes gmFade{to{opacity:1;transform:none}}
@keyframes gmExit{to{transform:translateY(-100%)}}
@keyframes gmLift{to{transform:translateY(-14vh);opacity:0}}
@media (prefers-reduced-motion:reduce){#gm-intro,html.gm-intro-pending::before{display:none}}