/* Denver Stamped Concrete LLC — design system
   Standalone contractor brand. Slate + burnt-orange, warm concrete neutrals.
   No external fonts/scripts: fast on CDN. */

:root {
  --ink: #16181d;
  --slate: #23272f;
  --slate-2: #2f343d;
  --concrete: #5f6672;
  --concrete-lt: #8b929c;
  --sand: #f5f2ec;
  --sand-2: #efeae1;
  --line: #e3ddd2;
  --white: #ffffff;
  --accent: #de6a1c;
  --accent-dk: #bd560f;
  --accent-soft: #fbe4d2;
  --ok: #2f7d4f;
  --shadow-sm: 0 1px 2px rgba(22,24,29,.06), 0 2px 8px rgba(22,24,29,.05);
  --shadow-md: 0 6px 24px rgba(22,24,29,.10);
  --shadow-lg: 0 18px 50px rgba(22,24,29,.16);
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1160px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-dk); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
p { margin: 0 0 1rem; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.eyebrow {
  display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-dk); margin-bottom: .7rem;
}
.section { padding: 72px 0; }
.section--sand { background: var(--sand); }
.section--slate { background: var(--slate); color: var(--sand); }
.section--slate h2, .section--slate h3 { color: #fff; }
.lead { font-size: 1.18rem; color: var(--concrete); max-width: 60ch; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font-weight: 700; font-size: 1.02rem; padding: 15px 26px; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
  text-decoration: none; line-height: 1;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(222,106,28,.28); }
.btn--primary:hover { background: var(--accent-dk); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--concrete); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--sand); color: var(--ink); }
.btn--lg { padding: 17px 32px; font-size: 1.08rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Header */
.topbar {
  background: var(--slate); color: var(--sand-2); font-size: .9rem;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; }
.topbar a { color: var(--sand-2); }
.topbar__badges { display: flex; gap: 18px; flex-wrap: wrap; }
.topbar__badges span { display: inline-flex; align-items: center; gap: 6px; }
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.18rem; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--accent), var(--accent-dk));
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1.15rem;
  box-shadow: var(--shadow-sm);
}
.brand__mark svg { width: 22px; height: 22px; }
.brand small { display: block; font-size: .72rem; font-weight: 600; color: var(--concrete); letter-spacing: .02em; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--slate); font-weight: 600; font-size: .96rem; padding: 10px 12px; border-radius: 8px; }
.nav a:hover { background: var(--sand); text-decoration: none; color: var(--ink); }
.has-menu { position: relative; }
.has-menu > button {
  font: inherit; font-weight: 600; font-size: .96rem; color: var(--slate); background: none; border: 0;
  cursor: pointer; padding: 10px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px;
  /* the caret used to be part of the label text and wrapped onto its own line,
     which pushed the word up. Its own flex item, and the label never breaks. */
  white-space: nowrap; flex-wrap: nowrap;
}
.has-menu > button .caret { font-size: .7em; line-height: 1; flex: 0 0 auto; }
.has-menu > button:hover { background: var(--sand); }
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: 8px;
  display: none; grid-template-columns: 1fr; gap: 2px;
}
.menu--wide { min-width: 460px; grid-template-columns: 1fr 1fr; }
.has-menu:hover .menu, .has-menu:focus-within .menu { display: grid; }
.menu a { padding: 9px 12px; font-size: .92rem; font-weight: 600; color: var(--slate); border-radius: 8px; }
.menu a:hover { background: var(--sand); color: var(--accent-dk); text-decoration: none; }
.header__cta { display: flex; align-items: center; gap: 10px; }
.header__phone { font-weight: 800; color: var(--ink); font-size: 1.05rem; white-space: nowrap; }
.header__phone:hover { color: var(--accent-dk); text-decoration: none; }
.navtoggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; }
.navtoggle svg { width: 24px; height: 24px; }

/* Hero */
.hero { position: relative; background: var(--slate); color: var(--sand); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1100px 500px at 78% -10%, rgba(222,106,28,.30), transparent 60%),
    linear-gradient(180deg, #262b33 0%, #1c2027 100%);
}
/* align-items: start, not center: the embedded quote form is ~835px tall, and
   centering against it pushed the h1 below the fold on a laptop. */
.hero__grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; padding: 74px 0 84px; }
.hero h1 { color: #fff; }
.hero .lead { color: #d7d2c8; font-size: 1.22rem; }
.hero__rating { display: flex; align-items: center; gap: 12px; margin: 6px 0 22px; font-weight: 600; color: #efe9df; }
.stars { color: #f7b53d; letter-spacing: 2px; font-size: 1.05rem; }
.hero__card {
  background: #fff; color: var(--ink); border-radius: 18px; padding: 26px; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.5);
}
.hero__card h3 { font-size: 1.3rem; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: .82rem; font-weight: 700; color: var(--slate); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: .96rem; background: var(--sand);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: #fff; }
.form-note { font-size: .8rem; color: var(--concrete); margin: 8px 0 0; }

/* Trust strip */
.trust { background: var(--ink); color: #cfd3da; }
.trust .wrap { display: flex; flex-wrap: wrap; gap: 12px 40px; justify-content: center; padding: 18px 22px; font-weight: 600; font-size: .95rem; }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }

/* Cards / grids */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm); transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d6cfc2; }
.card h3 { margin-bottom: .35em; }
.card p { color: var(--concrete); margin-bottom: .6rem; font-size: .98rem; }
.card__ic { width: 46px; height: 46px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-dk); display: grid; place-items: center; margin-bottom: 14px; }
.card__ic svg { width: 24px; height: 24px; }
.card a.more { font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 4px; }
a.service-card { color: inherit; display: block; }
a.service-card:hover { text-decoration: none; }

/* Feature list */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks svg { width: 22px; height: 22px; color: var(--ok); flex: 0 0 auto; margin-top: 2px; }
.checks b { display: block; }
.checks span { color: var(--concrete); font-size: .96rem; }
.section--slate .checks span { color: #c3c8d0; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.step { position: relative; padding-top: 8px; }
.step__n { width: 44px; height: 44px; border-radius: 12px; background: var(--slate); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 14px; font-size: 1.15rem; }
.step h3 { font-size: 1.12rem; }
.step p { color: var(--concrete); font-size: .96rem; margin: 0; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; }
.stat b { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--accent); letter-spacing: -.03em; line-height: 1; }
.stat span { color: var(--concrete-lt); font-weight: 600; font-size: .92rem; }
.section--slate .stat span { color: #aab0ba; }

/* Reviews */
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.review .stars { font-size: 1rem; }
.review p { font-size: 1rem; color: var(--slate); font-style: italic; margin: 12px 0 16px; }
.review cite { font-style: normal; font-weight: 700; color: var(--ink); }
.review cite span { display: block; font-weight: 500; font-size: .85rem; color: var(--concrete); }

/* Areas */
.pill-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: .95rem; color: var(--slate); }
.pill:hover { border-color: var(--accent); color: var(--accent-dk); text-decoration: none; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.faq summary {
  cursor: pointer; padding: 18px 20px; font-weight: 700; font-size: 1.04rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--accent); transition: transform .2s; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 20px 18px; color: var(--concrete); }
.faq details > div p:last-child { margin-bottom: 0; }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--accent), var(--accent-dk)); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #ffe9d6; font-size: 1.15rem; max-width: 56ch; margin-left: auto; margin-right: auto; }
.cta-band .btn--light { color: var(--accent-dk); }
.cta-phone { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; color: #fff; letter-spacing: -.02em; }
.cta-phone:hover { color: #fff; }

/* Breadcrumbs */
.crumbs { font-size: .85rem; color: var(--concrete); padding: 16px 0 0; }
.crumbs a { color: var(--concrete); }
.crumbs a:hover { color: var(--accent-dk); }
.pagehead { background: var(--sand); border-bottom: 1px solid var(--line); padding-bottom: 40px; }
.pagehead h1 { margin-top: 14px; max-width: 20ch; }
.pagehead .lead { margin-top: 6px; }

/* Prose (content pages) */
.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .96rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose th { background: var(--sand); font-weight: 700; }
.aside-cta { background: var(--sand); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 22px; margin: 26px 0; }
.aside-cta h3 { margin-bottom: .3em; }

.split { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }
.sidebar { position: sticky; top: 96px; display: grid; gap: 18px; }
.sidebar .card { padding: 22px; }

/* Footer */
.footer { background: var(--ink); color: #aab0ba; font-size: .95rem; padding: 60px 0 28px; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; letter-spacing: 0; }
.footer a { color: #c3c8d0; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 34px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer__brand p { color: #949aa4; max-width: 34ch; }
.footer__bottom { border-top: 1px solid #2a2e36; margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: #7d838d; }
.footer__bottom a { color: #7d838d; }
.footer .disclaimer { font-size: .82rem; color: #6f757e; margin-top: 8px; max-width: 60ch; }

/* Utilities */
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.hide-desktop { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Responsive */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: 30px; padding: 48px 0 56px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 52px 0; }
  .nav, .has-menu, .header__phone span.lbl { display: none; }
  .navtoggle { display: inline-flex; }
  .topbar { display: none; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .mobile-nav { display: block; }
}
@media (max-width: 460px) {
  .grid-4 { grid-template-columns: 1fr; }
  .steps, .stats { grid-template-columns: 1fr; }
}

/* Mobile nav panel */
.mobile-nav { display: none; }
#mnav { display: none; background: #fff; border-bottom: 1px solid var(--line); padding: 10px 0 18px; }
#mnav.open { display: block; }
#mnav .wrap { display: grid; gap: 2px; }
#mnav a { padding: 11px 8px; font-weight: 600; color: var(--slate); border-bottom: 1px solid var(--sand-2); }
#mnav a:hover { color: var(--accent-dk); text-decoration: none; }
#mnav .m-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--concrete-lt); padding: 14px 8px 4px; font-weight: 700; }

/* ---------- Job photos ---------- */
/* width/height are on the <img> so the box is reserved before load; these rules
   let the image scale without reintroducing layout shift. */
.figure { margin: 22px 0; }
.figure img {
  display: block; width: 100%; height: auto;
  border-radius: 12px; box-shadow: var(--shadow-md);
}
.figure figcaption {
  margin-top: 8px; font-size: .88rem; color: var(--concrete); line-height: 1.45;
}
.figure--tile { margin: 0; }
.figure--tile img { border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; }

.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0;
}

/* Before and after pairs */
.ba {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 26px 0; padding: 16px; background: var(--sand-2); border-radius: 14px;
}
.ba__item { position: relative; margin: 0; }
.ba__tag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; color: #fff;
}
.ba__tag--before { background: #6b7280; }
.ba__tag--after { background: var(--accent); }
.ba__item .figure { margin: 0; }
.ba__item .figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.ba__cap {
  grid-column: 1 / -1; margin: 2px 0 0; font-size: .88rem; color: var(--concrete);
}

@media (max-width: 780px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ba { grid-template-columns: 1fr; }
}

/* Reviews widget: third-party iframe, sizes itself via review-widget.js.
   min-height only stops the section collapsing before the script runs. */
.reviews-widget { margin-top: 30px; }
.reviews-widget iframe { display: block; width: 100%; min-height: 420px; border: 0; }
/* Widget stands alone in the Reviews section now that the testimonial cards are gone. */
.reviews-widget--only { margin-top: 0; }

/* Brand logo in the header. Replaces the old placeholder mark. The name stays as
   text beside it: the logo reads "Stamped Concrete Denver" while the GBP name is
   "Denver Stamped Concrete LLC", and the header should carry the exact NAP name. */
.brand__logo {
  /* max-width:none overrides the global img rule, which otherwise caps the logo
     to the width of a shrunken flex parent and squashes it. */
  height: 42px; width: auto; max-width: none; flex: 0 0 auto; display: block;
}
@media (max-width: 720px) {
  .brand__logo { height: 34px; }
}
@media (max-width: 720px) {
  /* The brand block was already wrapping the name into a narrow column here and the
     logo tightens it further. Drop the tagline and shrink the name so the header
     stays one sensible row. */
  .brand { font-size: 1rem; gap: 9px; flex: 1 1 auto; }
  .brand small { display: none; }
  .header .wrap { gap: 10px; }
  .header__cta { flex: 0 0 auto; gap: 8px; }
  .header__cta .btn { padding: 11px 16px; font-size: .92rem; }
  .header__phone { font-size: .98rem; }
}
@media (max-width: 560px) {
  /* No room for the full legal name beside a phone number and a CTA. Show the mark
     alone: the name still carries in the footer, the page titles and the schema. */
  .brand > span { display: none; }
  .brand { flex: 0 0 auto; }
  .brand__logo { height: 38px; }
  /* the row was overflowing the 22px gutter and sitting flush to the screen edge */
  .header .wrap { padding: 0 14px; }
  .header__cta { gap: 6px; }
  .header__cta .btn { padding: 10px 13px; font-size: .86rem; }
  .navtoggle { width: 40px; height: 40px; }
  .cta-word { display: none; }  /* header CTA reads "Quote" on small screens */
}
/* Header CTA was wrapping to "Free / Quote" on two lines. */
.header__cta .btn { white-space: nowrap; }

/* Hero quote form sits bare on the hero: the embedded form supplies its own white
   panel, so the old .hero__card wrapper double-framed it. */
.hero__form { min-width: 0; }
.form-note--onDark { color: #b9bec7; }

/* Brand name kept on one line now that the tagline is gone. */
.brand > span { white-space: nowrap; }

/* Measured: with Reviews in the nav the header row needs 1244px of content plus
   44px of gutter, so it only fits from about 1288px up. Below that it overflows
   and puts horizontal scroll on every page, hence the hamburger appears far
   earlier than the original 720px breakpoint. Re-measure if a nav item is added. */
@media (max-width: 1287px) {
  .nav, .has-menu { display: none; }
  .navtoggle { display: inline-flex; }
}

/* The header row needs ~1210px (brand 360 + nav 493 + cta 327 + gaps) but .wrap
   caps content at 1116px, so it overflowed the viewport at every desktop width.
   Give the header its own wider container and tighten the nav spacing. */
.header .wrap { max-width: 1340px; }
.nav a, .has-menu > button { padding: 10px 9px; font-size: .93rem; }
.header__cta { gap: 8px; }
.brand { gap: 10px; }