/* C&G Contracting brand palette (sampled from logo.jpg)
   --black #080d13 (badge background), --ring #212a33 (badge ring),
   --red #c22d20 (logo red; white text on it = 5.7:1), --red-hi #ef4438 (brighter red for red text/icons on black = 5.2:1),
   --white #f2f2f1 (logo white). */
:root{--black:#080d13;--char:#111821;--char2:#161e28;--ring:#212a33;--red:#c22d20;--red-dk:#a3251a;--red-hi:#ef4438;--white:#f2f2f1;--ink:#141a21;--muted:#55606c;--light:#f4f5f7;--line:#e3e6ea;--r:12px;
 --head:"Russo One",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55;font-size:17px;padding-bottom:72px}
a{color:var(--red)}img{max-width:100%;height:auto}
h1,h2,h3,.btn,.logo,.callbar a,.callbox .big{font-family:var(--head);font-weight:400;letter-spacing:.2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.confirm{font-size:.72em;font-weight:600;color:#8a6d1f;background:#fff4d6;border:1px dashed #e0b84d;border-radius:6px;padding:1px 6px;vertical-align:middle;white-space:nowrap}

/* header */
header.top{background:var(--black);color:var(--white);position:sticky;top:0;z-index:20;border-bottom:3px solid var(--red)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:1.1rem;text-transform:uppercase}
.logo img{width:48px;height:48px;flex:none}
.logo small{display:block;font-family:system-ui,sans-serif;font-weight:700;font-size:.66rem;color:#b9c0c9;letter-spacing:2px}
.nav{display:none;gap:24px}.nav a{color:#d5dae0;text-decoration:none;font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px}.nav a:hover{color:var(--red-hi)}
.hdr-call{display:none;background:var(--red);color:#fff;font-family:var(--head);text-decoration:none;padding:10px 16px;border-radius:8px}.hdr-call:hover{background:var(--red-dk)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border-radius:10px;padding:16px 22px;font-size:1.1rem;border:0;cursor:pointer;width:100%;text-transform:uppercase}
.btn-call{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(194,45,32,.4)}.btn-call:hover{background:var(--red-dk)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(242,242,241,.75)}.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-navy{background:var(--red);color:#fff}.btn-navy:hover{background:var(--red-dk)}

/* hero */
.hero{background:radial-gradient(ellipse at 75% 40%,#1a222d 0%,var(--black) 60%);color:var(--white);position:relative;overflow:hidden}
.hero .wrap{padding:28px 20px 52px;display:grid;gap:18px}
.hero-art{text-align:center;order:-1}
.hero-art img{width:150px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(194,45,32,.16);border:1px solid var(--red-hi);padding:6px 12px;border-radius:999px;font-weight:800;font-size:.88rem;text-transform:uppercase;letter-spacing:.5px}
.badge svg{color:var(--red-hi)}
.hero h1{font-size:2rem;line-height:1.15;margin:14px 0 12px;text-transform:uppercase;font-style:italic}
.hero h1 span{color:var(--red-hi)}
.hero p.lead{font-size:1.1rem;color:#c9cfd6;margin:0 0 22px;max-width:36em}
.cta{display:grid;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;padding:0;list-style:none;color:#dfe3e8;font-weight:700;font-size:.95rem}
.chips li{display:flex;align-items:center;gap:6px}.chips svg{color:var(--red-hi);flex:none}

/* chevron divider echoing the logo */
.chev{height:22px;background:var(--black);position:relative}
.chev::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:var(--red);clip-path:polygon(0 0,100% 0,100% 30%,50% 100%,0 30%)}

section{padding:56px 0;scroll-margin-top:64px}
h2{font-size:1.7rem;line-height:1.2;margin:0 0 10px;color:var(--ink);text-transform:uppercase}
h2::after{content:"";display:block;width:84px;height:12px;margin-top:10px;background:var(--red);clip-path:polygon(0 0,100% 0,100% 35%,50% 100%,0 35%)}
.sub{color:var(--muted);margin:0 0 28px}
.grid{display:grid;gap:16px}
.card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:var(--r);padding:22px;box-shadow:0 2px 6px rgba(8,13,19,.05)}
.card h3{margin:12px 0 6px;font-size:1.12rem;color:var(--ink);text-transform:uppercase}.card p{margin:0;color:var(--muted);font-size:.98rem}
.ico{width:48px;height:48px;border-radius:10px;background:var(--black);color:var(--red-hi);display:flex;align-items:center;justify-content:center}
.ico svg{width:28px;height:28px}
#services{background:var(--light)}
.why{background:#fff}
.why .card{background:var(--light);border:0;border-left:4px solid var(--red)}
.photos{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-top:16px}
.photos img:first-child{grid-column:1/-1}
.work-h{margin:36px 0 0;font-size:1.3rem}
.photos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#e6e9ee;box-shadow:0 2px 8px rgba(8,13,19,.12)}
footer .fb{display:inline-block;margin-top:8px}

/* service area */
#area{background:var(--light)}
.area-box{display:grid;gap:20px}
.map{background:var(--black);border-radius:var(--r);color:#fff;padding:18px;display:flex;align-items:center;justify-content:center}
.towns{columns:2;column-gap:20px;padding:0;margin:0;list-style:none}
.towns li{break-inside:avoid;padding:7px 0 7px 12px;border-bottom:1px solid var(--line);font-weight:700;font-size:.98rem;position:relative}
.towns li::before{content:"";position:absolute;left:0;top:15px;width:5px;height:5px;background:var(--red);transform:rotate(45deg)}
.towns li small{display:block;color:var(--muted);font-weight:500;font-size:.8rem}
.note{color:var(--muted);font-size:.95rem;margin-top:14px}

/* quote */
.quote{background:var(--black);color:var(--white)}
.quote h2{color:#fff}.quote .sub{color:#c9cfd6}
.qgrid{display:grid;gap:24px}
form{background:#fff;color:var(--ink);border-radius:var(--r);padding:22px;display:grid;gap:14px;border-top:5px solid var(--red);box-shadow:0 10px 30px rgba(0,0,0,.4)}
label{font-weight:700;font-size:.92rem;display:grid;gap:6px}
input,select,textarea{font:inherit;font-size:16px;padding:13px 14px;border:1.5px solid #c5ccd4;border-radius:8px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(239,68,56,.35);border-color:var(--red)}
textarea{min-height:110px;resize:vertical}
.fine{font-size:.82rem;color:var(--muted);margin:0}
.callbox{display:grid;gap:14px;align-content:start}
.callbox .big{font-size:2rem;color:#fff;text-decoration:none}
.callbox p{margin:0;color:#c9cfd6}

/* footer */
footer{background:var(--black);color:#b9c0c9;padding:36px 0 28px;font-size:.95rem;border-top:3px solid var(--red)}
footer .wrap{display:grid;gap:18px}footer a{color:#fff;text-decoration:none;font-weight:700}footer a:hover{color:var(--red-hi)}
footer .logo{font-size:1.05rem}footer .logo img{width:72px;height:72px}
.copy{border-top:1px solid var(--ring);padding-top:16px;font-size:.82rem;color:#8b949e}

/* sticky mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1.4fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(8,13,19,.97);border-top:2px solid var(--red);box-shadow:0 -4px 16px rgba(0,0,0,.3)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 8px;border-radius:8px;text-decoration:none;font-size:1rem;text-transform:uppercase}
.callbar .c{background:var(--red);color:#fff}.callbar .q{background:var(--white);color:var(--ink)}

@media (min-width:560px){.grid.s{grid-template-columns:1fr 1fr}.cta{grid-template-columns:auto auto;justify-content:start}.btn{width:auto}.towns{columns:3}}
@media (min-width:900px){
 body{padding-bottom:0}.callbar{display:none}.nav,.hdr-call{display:flex}
 .towns{columns:2}
 .hero .wrap{grid-template-columns:1.2fr .8fr;align-items:center;padding:64px 20px 72px;gap:40px}
 .hero-art{order:0}.hero-art img{width:100%;max-width:420px}
 .hero h1{font-size:2.9rem}
 .grid.s{grid-template-columns:repeat(3,1fr)}.grid.w{grid-template-columns:repeat(4,1fr)}
 .photos{grid-template-columns:repeat(6,1fr);gap:16px}
 .photos img{grid-column:span 2}
 .photos img:nth-child(-n+2){grid-column:span 3}
 .area-box{grid-template-columns:1fr 1.3fr;align-items:center}
 .qgrid{grid-template-columns:.9fr 1.1fr;align-items:start}
 footer .wrap{grid-template-columns:2fr 1fr 1fr}
 section{padding:80px 0}h2{font-size:2.05rem}
}