/* Concrete Coring Company — concretecoringaz.com
   Plain CSS, no framework. Red/black CCC brand built around the block-guy mascot. */
:root{
  /* brand red darkened 2026-09-08 (owner) to match the stats strip.
     was #c62828 / #a31f1f. The lighter reds used ON dark backgrounds
     (#ff5a5a, #ff6b6b) are deliberately left bright — they need the
     contrast against the near-black sections to stay readable. */
  --red:#9e1d1d; --red-dark:#7d1313; --ink:#1b1918; --mut:#5f5854;
  --ground:#e7e4df; --line:#d9d4cf; --card:#fff; --dark:#1f1c1b; --dark-ink:#efeae6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font-family:'Barlow',-apple-system,'Segoe UI',Arial,sans-serif;font-size:17px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--red)}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
h1,h2,h3,.cond{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:.01em}
h1{font-size:clamp(2.4rem,6.5vw,4.4rem);text-wrap:balance}
h2{font-size:clamp(1.7rem,3.4vw,2.35rem);margin-bottom:20px;text-wrap:balance}
h3{font-size:1.35rem;margin-bottom:8px}
p{margin-bottom:1em}
.kicker{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
/* short red rule over every section header — one small repeated device is
   most of what separates a designed page from an assembled one */
.kicker::before{content:"";display:block;width:44px;height:3px;background:var(--red);margin-bottom:14px}
/* on the near-black sections the brand red is too dark to read, so kickers
   there use the same light red the other dark-section accents use */
.hero .kicker,.dark .kicker{color:#ff6b6b}
.hero .kicker::before,.dark .kicker::before{background:#ff6b6b}
.lede{font-size:1.1rem;line-height:1.65;color:var(--mut);max-width:42rem}
section p{line-height:1.72}
.btn{display:inline-block;font-weight:600;font-size:1rem;padding:13px 24px;border-radius:6px;text-decoration:none;letter-spacing:.02em;border:2px solid transparent;cursor:pointer;font-family:inherit}
.btn.red{background:var(--red);color:#fff;border-color:var(--red)}
.btn.red:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn.ghost{color:var(--ink);border-color:var(--ink);background:transparent}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.light{color:#fff;border-color:#fff;background:transparent}
.btn.light:hover{background:#fff;color:var(--ink)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- top bar ---------- */
.topline{background:var(--dark);color:var(--dark-ink);font-size:.85rem}
.topline .wrap{display:flex;justify-content:space-between;align-items:center;min-height:34px;gap:12px}
.topline a{color:#fff;text-decoration:none;font-weight:600}
.topline .roc{color:#bdb3ad;letter-spacing:.06em}
.bar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:3px solid var(--red);box-shadow:0 4px 18px rgba(27,25,24,.12)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:104px;gap:16px;position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{height:92px;width:auto;flex:none}
.brand .word{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;font-size:clamp(1.3rem,3.4vw,2.2rem);line-height:1;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.brand .word b{color:var(--red)}
/* capped at 1000px so it does not overlap the >=1001px rule below; the two
   ranges fighting is what left the wordmark oversized at exactly 1001px */
@media (min-width:761px) and (max-width:1000px){.brand .word{font-size:clamp(1.2rem,2.5vw,1.9rem)}.brand img{height:80px}}
/* The wordmark is nowrap, so it cannot shrink below its own width and was
   running underneath the first nav link (adding "About" to the nav in Sept
   2026 pushed it over the edge). Fix is two parts: a column gap the row
   cannot collapse, and a wordmark that scales with the viewport instead of
   sitting at a fixed large size. The hamburger breakpoint also moved from
   900px to 1000px — with six nav items plus the phone button there is
   genuinely not room for a horizontal nav below that. */
.bar .wrap{column-gap:28px}
.brand{min-width:0;flex-shrink:1}
@media (min-width:1001px){
  .brand .word{font-size:clamp(1.05rem,1.85vw,1.7rem);letter-spacing:.02em}
  .brand img{height:74px}
  nav.main a{padding:10px 9px;font-size:.9rem}
  nav.main{gap:0}
}
@media (min-width:1001px) and (max-width:1200px){
  .call{font-size:1.15rem;padding:8px 12px}
  .brand img{height:64px}
}
nav.main{display:flex;gap:4px;align-items:center}
nav.main a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:10px 12px;border-radius:6px}
nav.main a:hover,nav.main a[aria-current]{background:var(--ground);color:var(--red)}
nav.main .svc{position:relative}
nav.main .svc>a::after{content:" \25BE";font-size:.75em}
nav.main .menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);min-width:230px;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.14);border-radius:0 0 8px 8px}
nav.main .menu a{display:block;padding:9px 12px;font-weight:500}
nav.main .svc:hover .menu,nav.main .svc:focus-within .menu{display:block}
.call{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;text-decoration:none;font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:.02em;padding:9px 16px;border-radius:6px;white-space:nowrap}
.call:hover{background:var(--red-dark)}
.call small{display:block;font-family:'Barlow',sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.14em;line-height:1;opacity:.9}
.burger{display:none;background:none;border:2px solid var(--ink);border-radius:6px;padding:8px 10px;font:inherit;font-weight:600;cursor:pointer}
@media (max-width:1000px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;padding:10px 14px 18px;border-bottom:3px solid var(--red);box-shadow:0 14px 30px rgba(0,0,0,.18)}
  nav.main.open{display:flex}
  nav.main a{padding:12px 10px;font-size:1.05rem}
  nav.main .svc>a::after{content:""}
  nav.main .menu{display:block;position:static;border:0;box-shadow:none;padding:0 0 0 14px;border-left:3px solid var(--line);margin:0 0 6px 10px;border-radius:0}
  .burger{display:inline-block;order:2}
  .bar .wrap{flex-wrap:wrap;height:auto;padding:10px 22px 12px;row-gap:10px}
  /* Owner 2026-09-09: on a phone put Cory on the LEFT and run the company
     name across the top beside him, instead of a big centred logo with the
     name squeezed into a narrow 3-line stack. Desktop is untouched. */
  .brand{order:1;width:100%;justify-content:flex-start;align-items:center;gap:12px}
  .brand img{height:76px}
  .brand .word{flex:1;min-width:0;font-size:clamp(1.4rem,7.4vw,2.1rem);letter-spacing:.03em;
    white-space:normal;line-height:1.02;max-width:none}
  .call{order:3;font-size:1.15rem;padding:9px 14px;margin-left:auto}
  .topline .hide-m{display:none}
}
@media (max-width:480px){.brand img{height:66px}.brand .word{font-size:clamp(1.25rem,6.8vw,1.8rem)}.call{font-size:1.05rem;padding:8px 12px}.call small{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;background:var(--dark);overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:0;z-index:-1}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.05)}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,16,.92) 0%,rgba(20,17,16,.72) 55%,rgba(20,17,16,.35) 100%)}
.hero .wrap{padding:88px 22px 96px;max-width:1080px}
.hero h1{max-width:14ch}
.hero h1 .cut{color:#ff5a5a}
.hero .lede{color:#e7e1dc;margin:22px 0 30px}
.hero .ctas .btn.red{font-size:1.1rem;padding:15px 28px}
.hero.sub .wrap{padding:60px 22px 64px}
.hero.sub h1{font-size:clamp(2.2rem,5.5vw,3.6rem)}
@media (max-width:640px){.hero .wrap{padding:56px 22px 64px}.hero .bg::after{background:linear-gradient(180deg,rgba(20,17,16,.55),rgba(20,17,16,.82))}}

/* ---------- proof strip ----------
   Owner 2026-09-08: "the red block needs more definition." So: a hard dark
   edge top and bottom instead of the band bleeding into its neighbours, a
   carved (dark + light) divider between cells rather than one faint line,
   a little depth in the red itself, and the number pushed well ahead of its
   label so the hierarchy reads at a glance. */
.proof{
  background:linear-gradient(180deg,#b32424 0%,#9e1d1d 48%,#7d1313 100%);
  color:#fff;
  border-top:4px solid #000;
  border-bottom:4px solid #000;
}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof div{
  padding:20px 16px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  min-height:104px;
  border-left:2px solid #000;
}
.proof div:first-child{border-left:0}
/* white numerals ringed in black, the same heavy line the mascot is drawn
   with. Built from stacked shadows rather than -webkit-text-stroke so the
   letterforms keep their weight instead of being eaten into. */
.proof b{
  display:block;font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;
  font-size:2.15rem;line-height:1;letter-spacing:.01em;
  text-shadow:
    -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000,
    -2px  0   0 #000,               2px  0   0 #000,
    -2px  2px 0 #000, 0  2px 0 #000, 2px  2px 0 #000,
     0    4px 0 rgba(0,0,0,.35);
}
.proof span{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.82);line-height:1.35;
}
@media (max-width:720px){
  .proof .wrap{grid-template-columns:repeat(2,1fr)}
  /* the licence number is the longest string here — keep it off the edges */
  .proof b{font-size:1.85rem}
  .proof div:nth-child(4) b{font-size:1.55rem}
  .proof div:nth-child(3){border-left:0}
  .proof div{border-top:2px solid #000}
  .proof div:nth-child(-n+2){border-top:0}
}

/* ---------- sections ----------
   Owner picked mockup A on 2026-09-08: more air, calmer type, a repeating
   red rule over section headers, and an alternating light/dark rhythm so
   the page stops running flat through the middle. */
section{padding:104px 0}
section.tight{padding:76px 0}
@media (max-width:640px){section{padding:68px 0}section.tight{padding:52px 0}}
.dark{background:var(--dark);color:var(--dark-ink)}
/* two dark sections back to back would read as one long slab, so give the
   seam a hairline */
.dark + .dark{border-top:1px solid rgba(255,255,255,.10)}
.dark h2,.dark h3{color:#fff}
.dark .lede{color:#cfc7c1}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.split.flip>*:first-child{order:2}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:28px}.split.flip>*:first-child{order:0}}
.frame{border:6px solid #fff;box-shadow:0 18px 40px rgba(27,25,24,.22);background:#fff}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.frame.tall img{aspect-ratio:3/4}
.frame figcaption{font-size:.85rem;color:var(--mut);padding:8px 6px 2px}

/* services grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(27,25,24,.16)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card .body{padding:16px 18px 20px}
.card h3{color:var(--ink)}
.card p{color:var(--mut);font-size:.95rem;margin:0}
.card .more{color:var(--red);font-weight:600;font-size:.9rem;margin-top:10px;display:block}
.card.text{padding:22px 20px;border-top:4px solid var(--red)}

/* checklist / bullets */
.checks{list-style:none;display:grid;gap:12px;margin:18px 0}
.checks li{padding-left:34px;position:relative}
.checks li::before{content:"\2713";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
@media (max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 18px 18px}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;font-size:2rem;color:var(--red);line-height:1;margin-bottom:8px}
.steps h3{font-size:1.2rem}
.steps p{margin:0;color:var(--mut);font-size:.95rem}

/* big statement */
.statement{text-align:center}
.statement h2{font-size:clamp(2.2rem,6vw,4rem)}
.statement h2 em{font-style:normal;color:#ff6b6b}
.statement .phone{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;font-size:clamp(2rem,6vw,3.6rem);text-decoration:none;color:#fff;display:inline-block;margin-top:10px}
.statement .phone:hover{color:#ff6b6b}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:640px){.gal{grid-template-columns:repeat(2,1fr)}}
/* the home page strip wants six across on a wide screen. This used to be an
   INLINE style on the div, which beat the mobile rule above and squeezed the
   photos to 45px postage stamps on a phone (owner spotted it 2026-09-09).
   Written mobile-first so small screens keep two across. */
.gal.six{grid-template-columns:repeat(2,1fr)}
@media (min-width:641px){.gal.six{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.gal.six{grid-template-columns:repeat(6,1fr)}}
.gal a{display:block;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.gal img{aspect-ratio:1;object-fit:cover;width:100%;transition:transform .2s}
.gal a:hover img{transform:scale(1.04)}
/* the home page photo strip runs on a dark section — job photos gain a lot
   against near-black, and it breaks up the run of light blocks */
.dark .gal a{background:#262220;border-color:#3a3330}
.dark .btn.ghost{color:#fff;border-color:#fff}
.dark .btn.ghost:hover{background:#fff;color:var(--ink)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.ba figure{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ba img{aspect-ratio:254/300;object-fit:cover;width:100%}
.ba figcaption{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:10px;text-align:center;color:var(--red)}
dialog.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1200px);max-height:96vh}
dialog.lb::backdrop{background:rgba(0,0,0,.88)}
dialog.lb img{max-width:min(96vw,1200px);max-height:90vh;width:auto;height:auto;margin:0 auto;border:4px solid #fff}
dialog.lb button{position:fixed;top:14px;right:16px;background:#fff;color:var(--ink);border:0;border-radius:50%;width:42px;height:42px;font-size:1.4rem;cursor:pointer}

/* service page layout */
.svc-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
@media (max-width:860px){.svc-layout{grid-template-columns:1fr}}
.svc-copy p{font-size:1.05rem}
.svc-copy h2{margin-top:36px}
.aside{position:sticky;top:100px;display:grid;gap:18px}
.callbox{background:var(--dark);color:var(--dark-ink);border-radius:12px;padding:24px 22px;border-top:5px solid var(--red)}
.callbox h3{color:#fff;font-size:1.3rem}
.callbox .big{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;font-size:2.3rem;color:#fff;text-decoration:none;display:block;line-height:1;margin:6px 0 10px}
.callbox .big:hover{color:#ff6b6b}
.callbox p{color:#cfc7c1;font-size:.95rem;margin:0 0 14px}
.callbox .btn{width:100%;text-align:center}
.linklist{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.linklist h3{font-size:1.1rem;margin-bottom:8px}
.linklist a{display:block;padding:7px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:500}
.linklist a:first-of-type{border-top:0}
.linklist a:hover,.linklist a[aria-current]{color:var(--red)}
.callout{background:#fff;border-left:6px solid var(--red);padding:20px 24px;border-radius:0 10px 10px 0;margin:28px 0;box-shadow:0 8px 24px rgba(27,25,24,.08)}
.callout h3{font-size:1.6rem;color:var(--red)}
.callout p{margin:0;font-size:1.05rem}

/* ---------- radar (GPR page) ----------
   Owner 2026-09-09: a dot dead centre, blips radiating out of it, and a
   search wave sweeping round — sitting straight on the gray page, no black
   panel behind it. Deliberately bare: no static range rings or crosshairs,
   because the motion is the whole point. CCC red, not the competitor's
   orange, and drawn from scratch rather than lifted. */
/* white card behind it: the red reads harder on white than on the gray
   ground, and it matches the card language used everywhere else */
.radar{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:1;color:var(--red);
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;
  box-shadow:0 8px 26px rgba(27,25,24,.07)}
.radar svg{width:100%;height:100%;display:block;overflow:visible}
/* view-box (not fill-box) so transform-origin resolves in the SVG's own
   coordinates — 200,200 is the centre. With fill-box a <g> pivots around
   its own bounding box, which threw the sweep off-centre. */
/* faint dish outline so the radar has a boundary — on a dark page the black
   field does that job, on white nothing does and it floats */
.radar .dish{fill:none;stroke:currentColor;stroke-opacity:.16;stroke-width:1}
.radar .pulse{fill:none;stroke:currentColor;stroke-width:1.6;
  transform-box:view-box;transform-origin:200px 200px;opacity:0}
.radar .p1{animation:radarPing 4s linear infinite}
.radar .p2{animation:radarPing 4s linear infinite 1.33s}
.radar .p3{animation:radarPing 4s linear infinite 2.66s}
@keyframes radarPing{0%{transform:scale(.18);opacity:.9}100%{transform:scale(1.45);opacity:0}}
.radar .dot{fill:currentColor}
/* Watermark (owner 2026-09-09, after trying Cory alone as A and B): the WHOLE
   logo, faint grey, behind the dish; the sweep passes over it and the red dot
   stays. multiply so a white logo background can never hide the rings. Same
   rule serves the scanning page and the home services card. */
.radar svg{position:relative;z-index:2}
.radar .wm{position:absolute;left:50%;top:50%;width:72%;transform:translate(-50%,-50%);z-index:1;opacity:.12;filter:grayscale(1);mix-blend-mode:multiply;pointer-events:none;user-select:none}
/* Option K (owner 2026-09-09, "let se k live"), on top of H. The watermark is the
   logo in its own red now, not grey. The dish gets a dark bezel like a scope
   housing, a crosshair, a third ring and 4in / 8in depth marks, and four
   contacts that light as the sweep passes their angle (sweep = 5s clockwise
   from 12; delay = angle/360 * 5s) and fade until the next turn. On the small
   home card the depth labels would be 4px mush, so they are hidden there and
   the contacts are drawn a little larger. */
/* The logo file is square but the artwork is not: Cory is thin line-art on
   the far left, the wordmark is the heavy block right of middle. Centred as a
   file it reads pushed right (owner: "i like our logo perfectly centered").
   Measured: the wordmark centre sits at x=212 of 350, so shift the image
   left 10.6% of its own width and the TEXT lands on the crosshair. */
.radar .wm{filter:none;opacity:.10;transform:translate(-60.6%,-50%)}
.radar .bezel{fill:none;stroke:#2a2523;stroke-width:12}
.radar .bezel2{fill:none;stroke:#fff;stroke-opacity:.35;stroke-width:1.5}
.radar .axis{stroke:currentColor;stroke-opacity:.14;stroke-width:1}
.radar .tick{stroke:currentColor;stroke-opacity:.35;stroke-width:1}
.radar .rng{font:600 11px/1 "Barlow",system-ui,sans-serif;fill:currentColor;fill-opacity:.55;letter-spacing:.04em}
.radar .blip{fill:currentColor;opacity:0;transform-box:fill-box;transform-origin:center;animation:radarBlip 5s linear infinite}
.radar .echo{fill:none;stroke:currentColor;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;animation:radarEcho 5s linear infinite}
.radar .b1,.radar .e1{animation-delay:.68s}
.radar .b2,.radar .e2{animation-delay:2.05s}
.radar .b3,.radar .e3{animation-delay:3.4s}
.radar .b4,.radar .e4{animation-delay:4.3s}
@keyframes radarBlip{0%{opacity:1;transform:scale(1.35)}12%{opacity:1;transform:scale(1)}70%{opacity:.35}100%{opacity:0}}
@keyframes radarEcho{0%{opacity:.7;transform:scale(.4)}60%{opacity:0;transform:scale(2.2)}100%{opacity:0;transform:scale(2.2)}}
.radar-mini .rng,.radar-mini .tick{display:none}
/* On the 4/3 home card the wordmark-centred shift reads as the logo shoved
   left (owner 2026-09-09: "on front card logo not centered" - measured at
   phone width: 22px gap left, 75px right, and the logo wider than the dish).
   So the card centres the logo as an object and keeps it inside the dish.
   The scanning page, square with a bezel, keeps the wordmark on the cross. */
.radar-mini .wm{width:56%;transform:translate(-50%,-50%)}
.radar-mini .blip{r:8}
.radar-mini .echo{r:14}
/* a solid-edged wedge that fades ALONG its arc. A radial blur reads as light
   on black but as a smudge on white, which is why the first pass looked off. */
.radar .sweep{transform-box:view-box;transform-origin:200px 200px;opacity:.85;
  animation:radarSpin 5s linear infinite}
@keyframes radarSpin{to{transform:rotate(360deg)}}
.radar figcaption{position:absolute;inset:auto 0 -34px;text-align:center;font-size:.8rem;color:var(--mut)}
/* the same dish, shrunk to sit where a photo would on the services card —
   scanning leads the grid and has no photo of its own yet */
/* inside the services card it is already on white, so drop the card chrome.
   The box must match the photo boxes on the sibling cards exactly or the row
   looks ragged: same full-bleed width and the same 4/3 aspect (.card img),
   NOT the square the standalone radar uses. The SVG keeps its own square
   ratio and centres itself inside, because a viewBox letterboxes rather than
   stretching. Padding is safe — box-sizing is border-box site-wide, so the
   outer box stays exactly 4/3. */
.radar-mini{max-width:none;margin:0;background:var(--card);
  aspect-ratio:4/3;padding:0;
  border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
/* absolute, so the SVG's own square intrinsic size cannot push the box
   taller than 4/3 — aspect-ratio gives way to content, and a 244px-wide
   square SVG was forcing a 244px-tall box next to 183px photos */
.radar-mini svg{position:absolute;inset:0;width:100%;height:100%;padding:10px}
@media (prefers-reduced-motion:reduce){
  .radar .pulse,.radar .sweep{animation:none}
  .radar .pulse{opacity:.25}
  .radar .blip{animation:none;opacity:.6}
  .radar .echo{display:none}
}

/* four-step "how it works" row */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s4}
@media (max-width:820px){.steps4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.steps4{grid-template-columns:1fr}}
.steps4 li{counter-increment:s4;list-style:none}
.steps4 li::before{content:counter(s4,decimal-leading-zero);display:block;
  font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;font-size:1.7rem;
  color:var(--red);line-height:1;margin-bottom:6px}
.steps4 h3{font-size:1.05rem;margin-bottom:4px;color:var(--ink)}
.steps4 p{color:var(--mut);font-size:.94rem;margin:0}
/* if this row ever runs on a dark section again, flip it back */
.dark .steps4 li::before{color:#ff6b6b}
.dark .steps4 h3{color:#fff}
.dark .steps4 p{color:#c9c1bc}

/* GPR vs X-ray comparison */
.vs{width:100%;border-collapse:collapse;margin-top:8px;font-size:.95rem}
.vs th,.vs td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.vs thead th{font-family:'Barlow Condensed',Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;font-size:.85rem;border-bottom:2px solid var(--ink)}
.vs thead th:nth-child(2){color:var(--red)}
.vs td:first-child{font-weight:600;width:30%}
.vs td:nth-child(2){background:rgba(158,29,29,.05)}
@media (max-width:640px){
  .vs,.vs tbody,.vs tr,.vs td{display:block;width:100%}
  .vs thead{display:none}
  .vs tr{border-bottom:2px solid var(--line);padding:10px 0}
  .vs td{border:0;padding:4px 0}
  .vs td:first-child{width:auto;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;color:var(--mut)}
  .vs td:nth-child(2)::before{content:"GPR: ";font-weight:700;color:var(--red)}
  .vs td:nth-child(3)::before{content:"X-ray: ";font-weight:700;color:var(--mut)}
  .vs td:nth-child(2){background:none}
}

/* faq accordion — visible content, not schema-only, so it earns rich
   results honestly. Reusable on any page. */
.faq{max-width:46rem}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:4px 20px}
.faq summary{cursor:pointer;list-style:none;font-weight:700;padding:16px 26px 16px 0;position:relative;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:1.4rem;color:var(--red);font-weight:800;transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--mut);padding-bottom:16px;margin:0}

/* cities */
.cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cities a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem}
.cities a:hover{border-color:var(--red);color:var(--red)}
.dark .cities a{background:transparent;border-color:#4a4340;color:#fff}
.dark .cities a:hover{border-color:#ff6b6b;color:#ff6b6b}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media (max-width:820px){.contact{grid-template-columns:1fr}}
form.f{display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
form.f label{font-weight:600;font-size:.9rem;display:grid;gap:6px}
form.f input,form.f textarea,form.f select{font:inherit;padding:11px 12px;border:1.5px solid var(--line);border-radius:6px;background:#fff;width:100%}
form.f input:focus,form.f textarea:focus,form.f select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(158,29,29,.15)}
form.f .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){form.f .two{grid-template-columns:1fr}}
form.f .hp{position:absolute;left:-9999px}
.dir{display:grid;gap:14px}
.dir div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.dir b{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
.dir a{text-decoration:none;font-weight:600;color:var(--ink);word-break:break-all}
.dir a:hover{color:var(--red)}
.dir .big{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;font-size:2rem;color:var(--red)}

/* legal */
.legal{max-width:760px}
.legal h2{font-size:1.5rem;margin-top:34px}
.legal ul{margin:0 0 1em 22px}
.legal li{margin-bottom:4px}
.legal .date{color:var(--mut);font-size:.95rem}

/* CTA band */
.band{background:var(--red);color:#fff;text-align:center}
.band h2{color:#fff;font-size:clamp(1.9rem,5vw,3rem)}
.band p{max-width:40rem;margin:0 auto 22px;opacity:.95;font-size:1.1rem}
.band .btn.light{font-size:1.1rem;padding:14px 28px}

/* footer */
footer{background:#121010;color:#c9c0ba;padding:56px 0 100px;font-size:.95rem}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
@media (max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}
footer h3{color:#fff;font-size:1rem;letter-spacing:.1em;margin-bottom:12px}
footer a{color:#e7e1dc;text-decoration:none}
footer a:hover{color:#ff6b6b}
footer ul{list-style:none}
footer li{padding:4px 0}
footer .brand .word{color:#fff;white-space:normal;font-size:1.45rem;line-height:1;max-width:9ch;letter-spacing:.05em}
/* the three C's sit on the near-black footer, so they take the light red */
footer .brand .word b{color:#ff6b6b}
footer .brand img{background:#fff;border-radius:8px;padding:3px 5px;height:76px}
footer .bigphone{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;font-size:2rem;color:#fff;display:block;margin:12px 0 4px;line-height:1}
footer .fine{border-top:1px solid #2c2725;margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:#8f857f}
footer .fine a{color:#b8aea8}

/* sticky mobile call bar */
.stickycall{display:none}
@media (max-width:720px){
  .stickycall{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--red);color:#fff;text-decoration:none;justify-content:center;align-items:center;gap:10px;padding:14px;font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:.02em;box-shadow:0 -8px 24px rgba(0,0,0,.25);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .stickycall small{font-family:'Barlow',sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.12em;opacity:.9}
}

/* floating pulsing call button — every screen size (owner 2026-09-08:
   "put it on the phone as well"). On mobile it sits ABOVE the sticky
   call bar (raised bottom offset) instead of on top of it.
   Owner (2026-09-08): copied the ring-pulse effect off a competitor's
   site, red circle + black phone glyph to match CCC's own brand. */
.floating-call{display:flex;position:fixed;right:20px;bottom:20px;z-index:41;width:58px;height:58px;border-radius:50%;background:var(--red);color:#000;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 14px 40px rgba(158,29,29,.35),0 4px 14px rgba(0,0,0,.5);transition:transform .22s ease-out,background .22s ease-out}
.floating-call:hover{background:var(--red-dark)}
.floating-call:active{transform:scale(.94)}
.floating-call svg{width:24px;height:24px;position:relative;z-index:1}
.floating-call::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--red);opacity:0;animation:floatCallPing 2.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes floatCallPing{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.floating-call::before{animation:none}}
@media (max-width:720px){.floating-call{right:16px;bottom:calc(78px + env(safe-area-inset-bottom));width:52px;height:52px}.floating-call svg{width:22px;height:22px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* red first letter on every service name, like the truck bed lettering */
.rl{color:var(--red)}
footer .rl,.dark .rl{color:#ff6b6b}
.card h3 .rl{font-size:1.08em}

/* TikTok video embed (from the field) */
.tt{width:min(100%,340px);aspect-ratio:9/21.5;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(27,25,24,.28);margin:0 auto}
.tt iframe{width:100%;height:100%;border:0;display:block}
.tt.vid{aspect-ratio:9/16}.tt video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.tt-cap{font-size:.9rem;color:var(--mut);text-align:center;margin-top:10px}