/* Columbus Stamp Concrete — brand stylesheet. "Wet concrete": charcoal canvas, slate surfaces, warm bronze accent. */
:root{
  --canvas:#0b1a2e; --surface:#12263f; --surface-2:#1a3050; --hair:#2a415f;
  --text:#eaf0f8; --muted:#a3b4cb; --accent:#faaa3c; --accent-2:#e8942a; --white:#fff;
  --max:1180px; --gap:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--text);font-family:'Inter',system-ui,sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
picture{display:contents}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.02em;line-height:1.12}
em{font-style:normal;color:var(--accent)}
.btn{display:inline-block;padding:14px 26px;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn-accent{background:var(--accent);color:#0a2846}
.btn-accent:hover{background:var(--accent-2)}
.btn-line{border-color:var(--hair);color:var(--text)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}

/* topbar + header */
.topbar{background:#08131f;border-bottom:1px solid var(--hair);font-size:12.5px;color:var(--muted)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.tb-l b{color:var(--text);font-weight:600}
.tb-r a{margin-left:20px;color:var(--muted)}
.tb-r a b{color:var(--accent)}
header{position:sticky;top:0;z-index:50;background:rgba(9,20,36,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:19px;letter-spacing:-.01em}
.brand .mark{width:34px;height:34px;background:var(--accent);color:#0a2846;display:grid;place-items:center;font-weight:800;font-size:16px}
.brand span{color:var(--muted);font-weight:400;font-size:12px;display:block;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.menu{display:flex;gap:26px;font-size:14.5px;color:var(--muted)}
.menu a:hover{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:14px}
.phone-lg{font-weight:700;font-size:18px;color:var(--text);line-height:1}
.phone-lg span{display:block;font-size:11px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.burger{display:none;background:none;border:0;color:var(--text);font-size:24px;cursor:pointer}

/* hero */
.hero{position:relative;border-bottom:1px solid var(--hair);background:
  linear-gradient(180deg,rgba(9,20,36,.72),rgba(9,20,36,.92)),
  linear-gradient(120deg,#16294a,#0b1a2e)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;padding:74px 24px 84px;align-items:center}
.kick{display:inline-block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:20px}
.hero h1{font-size:54px;margin-bottom:20px}
.hero .lede{font-size:18px;color:var(--muted);max-width:540px;margin-bottom:30px}
.pa{display:flex;gap:14px;flex-wrap:wrap}
.hero-form{background:var(--surface);border:1px solid var(--hair);padding:30px}
.hero-form h3{font-size:20px;margin-bottom:6px}
.hero-form .rev{font-size:13px;color:var(--muted);margin-bottom:18px}
.hero-form .rev b{color:var(--accent)}
.hero-form label{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
.hero-form input,.hero-form select,.hero-form textarea{width:100%;background:var(--canvas);border:1px solid var(--hair);color:var(--text);padding:12px;font-family:inherit;font-size:15px}
.hero-form .btn{width:100%;margin-top:18px;border:0}
.hero-form small{display:block;color:var(--muted);font-size:11.5px;margin-top:12px;text-align:center}

/* badges */
.badges{display:flex;gap:40px;justify-content:center;align-items:center;flex-wrap:wrap;padding:26px 0;border-bottom:1px solid var(--hair);color:var(--muted);font-size:13.5px;letter-spacing:.02em}
.badges b{color:var(--text)}

/* sections */
.section{padding:var(--gap) 0}
.eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.section h2{font-size:36px;margin:14px 0 0}
.section .sub{color:var(--muted);font-size:17px;max-width:640px;margin-top:14px}
.grid{display:grid;gap:18px;margin-top:46px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--hair);padding:26px;transition:.15s}
.card:hover{border-color:var(--accent);background:var(--surface-2)}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.card a{color:var(--accent);font-size:13.5px;font-weight:600;letter-spacing:.03em}
.card img{width:calc(100% + 52px);height:160px;object-fit:cover;display:block;margin:-26px -26px 18px -26px}
/* two-column text + photo band */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split .eyebrow{margin-bottom:0}
.split-img{margin:0}
.split-img img{width:100%;height:100%;min-height:360px;max-height:480px;object-fit:cover;border:1px solid var(--hair)}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}.split-img img{min-height:240px;max-height:300px}}
.show-all{display:none;margin:22px auto 0;background:transparent;border:1px solid var(--hair);color:var(--text);padding:14px 26px;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;width:100%}
.show-all:hover{border-color:var(--accent);color:var(--accent)}
.why{background:var(--surface)}
.why .grid{grid-template-columns:repeat(2,1fr);gap:40px}
.why .item h3{font-size:20px;margin-bottom:8px}
.why .item p{color:var(--muted)}
.why .item h3:before{content:"";display:inline-block;width:10px;height:10px;background:var(--accent);margin-right:12px;vertical-align:middle}

/* service-area pills */
.areas{background:var(--surface)}
.area-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.area-pill{background:var(--canvas);border:1px solid var(--hair);padding:9px 15px;font-size:13.5px;color:var(--muted)}
.area-pill:hover{border-color:var(--accent);color:var(--text)}

/* faq */
.faq-item{border-top:1px solid var(--hair)}
.faq-item:last-child{border-bottom:1px solid var(--hair)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 0;font-size:18px;font-weight:500;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--accent);font-size:26px;font-weight:400;line-height:1;flex:none}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{color:var(--muted);padding:0 0 20px;margin:0}
.faq-item h3{font-size:18px;margin-bottom:8px}

/* final + footer */
.final{background:linear-gradient(120deg,#16294a,#0b1a2e);text-align:center;border-top:1px solid var(--hair)}
.final h2{font-size:34px}
.final p{color:var(--muted);margin:14px 0 22px}
.phone-huge{font-size:40px;font-weight:700;color:var(--accent);letter-spacing:-.02em}
.reviews{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rev-head{text-align:center;margin-bottom:38px}
.rev-rating{display:inline-flex;align-items:center;gap:12px;margin-top:16px}
.rev-rating .num{font-size:40px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.rev-stars{color:#f6b01e;letter-spacing:2px;font-size:22px;line-height:1}
.rev-count{margin-top:10px;font-size:14.5px}
.rev-count a{color:var(--muted)}.rev-count a:hover{color:var(--accent)}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;max-width:1080px;margin:0 auto}
.rev-card{background:var(--surface-2);border:1px solid var(--hair);border-radius:14px;padding:26px 26px 22px}
.rev-card .rev-stars{font-size:15px}
.rev-card p{margin:12px 0 16px;color:var(--text);line-height:1.62;font-size:15.5px}
.rev-by{color:var(--text);font-size:14.5px;font-weight:600}
.rev-src{color:var(--muted);font-size:12.5px;font-weight:400}
.rev-cta{text-align:center;margin-top:32px}
@media(max-width:760px){.rev-grid{grid-template-columns:1fr}}
footer{background:#08131f;border-top:1px solid var(--hair);padding:64px 0 30px;color:var(--muted);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:34px}
.foot-grid h4{color:var(--text);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.foot-grid a{display:block;color:var(--muted);padding:5px 0}
.foot-grid a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--hair);margin-top:40px;padding-top:22px;font-size:13px}
.mcall{display:none}

/* content/prose (inner pages) */
.crumb{padding:16px 0;font-size:13px;color:var(--muted)}
.crumb a:hover{color:var(--accent)}
.page-hero{padding:40px 0 50px;border-bottom:1px solid var(--hair)}
.page-hero h1{font-size:42px}
.page-hero .lede{color:var(--muted);font-size:17px;max-width:620px;margin-top:14px}
.layout{display:grid;grid-template-columns:1fr 330px;gap:50px;padding:54px 0}
.prose h2{font-size:26px;margin:34px 0 14px}
.prose p,.prose li{color:#d3d7df}
.prose ul{margin:0 0 10px 20px}
.prose li{margin-bottom:7px}
.callout{background:var(--surface);border-left:3px solid var(--accent);padding:18px 22px;margin:22px 0;color:var(--muted)}
.callout a,.prose a{color:var(--accent)}
.side-card,.side-links{background:var(--surface);border:1px solid var(--hair);padding:24px;margin-bottom:18px}
.side-card h3{font-size:18px;margin-bottom:12px}
.side-card .phone{font-size:26px;font-weight:700;color:var(--accent);display:block;margin-bottom:10px}
.side-card p{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.side-card .btn{width:100%;text-align:center;border:0}
.side-links h4{font-size:13px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.side-links a{display:block;color:var(--muted);padding:6px 0;font-size:14px}
.side-links a:hover{color:var(--accent)}

@media(max-width:900px){
  .hero .wrap,.layout,.foot-grid,.why .grid{grid-template-columns:1fr;gap:34px}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .topbar,.menu,.phone-lg,.nav-cta .btn{display:none}
  .burger{display:block}
  .hero .quote-card{display:none}
  .hero .wrap{min-height:56vh;align-content:center}
  .mobile-quote{display:block}
  .hide-mobile{display:none}
  .show-mobile{display:inline-block}
  #svcgrid .card:nth-child(n+4){display:none}
  #svcgrid.expanded .card:nth-child(n+4){display:block}
  .show-all{display:block}
  .menu.show{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--surface);padding:16px 24px;border-bottom:1px solid var(--hair)}
  .hero h1{font-size:38px}
  .foot-bottom{flex-direction:column;gap:8px}
  .mcall{display:block;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--accent);color:#0a2846;text-align:center;padding:15px;font-weight:700;letter-spacing:.03em}
  body{padding-bottom:52px}
}
@media(max-width:560px){.g3,.g4{grid-template-columns:1fr}}

/* REQUEST A QUOTE form — dark panel (brand) */
.quote-card{background:var(--surface);border:1px solid var(--hair);color:var(--text);padding:32px 28px;box-shadow:0 14px 50px rgba(0,0,0,.45)}
.quote-card h3{font-size:24px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-align:center;color:var(--text);margin-bottom:6px}
.quote-card .qsub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:18px}
.quote-card label{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:14px 0 5px}
.quote-card input,.quote-card textarea,.quote-card select{width:100%;background:var(--canvas);border:1px solid var(--hair);padding:11px;font-family:inherit;font-size:15px;color:var(--text);outline:none}
.quote-card input:focus,.quote-card textarea:focus,.quote-card select:focus{border-color:var(--accent)}
.quote-card textarea{resize:vertical;min-height:64px}
.quote-card .consent{display:flex;gap:10px;align-items:flex-start;margin:20px 0 6px;font-size:13px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.quote-card .consent input{width:auto;margin-top:3px}
.quote-card .btn-quote{display:block;width:100%;background:var(--accent);color:#fff;border:0;padding:15px;font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;margin-top:14px}
.quote-card .btn-quote:hover{background:var(--accent-2)}
.quote-wrap{max-width:560px;margin:0 auto}

/* logo + photos */
.logo-img{height:38px;width:auto;display:block}
.logo-foot{height:34px;width:auto;margin-bottom:14px}
.hero{background:linear-gradient(180deg,rgba(9,20,36,.78),rgba(9,20,36,.9)),url("photos/stamped-decorative.jpg") center/cover no-repeat}
.mobile-quote{display:none}
.show-mobile{display:none}
/* Tablet/iPad (up to 1024px): move the quote form out of the hero so the photo shows */
@media(max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;min-height:54vh;align-content:center;gap:20px}
  .hero .quote-card{display:none}
  .mobile-quote{display:block}
  .hide-mobile{display:none}
  .show-mobile{display:inline-block}
}
.lead-img{margin:0 0 22px}
.lead-img img{width:100%;height:340px;object-fit:cover;border:1px solid var(--hair)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.gallery-grid figure{position:relative;margin:0;overflow:hidden;border:1px solid var(--hair)}
.gallery-grid img{width:100%;height:230px;object-fit:cover;display:block;transition:.3s}
.gallery-grid figure:hover img{transform:scale(1.05)}
.gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(15,17,21,.9));color:#fff;padding:26px 14px 12px;font-size:13.5px;font-weight:500}
@media(max-width:760px){.gallery-grid{grid-template-columns:1fr 1fr}.lead-img img{height:240px}}
@media(max-width:480px){.gallery-grid{grid-template-columns:1fr}}
.video-embed{position:relative;padding-bottom:56.25%;height:0;margin:0 0 26px;border:1px solid var(--hair)}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
