/* CP Repair LLC — the only rules unique to this client. Everything else is kit.css. */

/* Archivo, heavy and tight for display (truck-door lettering), Inter for reading. Sizes are kit floors. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:800;letter-spacing:-.018em}
.h-display,.hero h1{font-weight:900;line-height:.96;letter-spacing:-.03em;text-transform:uppercase}
.hero h1{font-size:var(--display);max-width:12ch}
.hero h1 .y{color:var(--lume);text-shadow:0 0 38px rgba(245,184,46,.35)}
@media(max-width:640px){.hero h1{font-size:clamp(2.3rem,11vw,3.4rem)}}
.pbanner h1{font-weight:900;line-height:1;letter-spacing:-.025em;text-transform:uppercase}
@media(max-width:640px){.pbanner h1{font-size:clamp(1.9rem,9.4vw,2.7rem)}}
.dhead{font-weight:800}
.brand .w1{font-family:var(--serif);font-weight:900;letter-spacing:-.01em;text-transform:uppercase}
.brand .w2{font-weight:600;letter-spacing:.2em;color:var(--lume)}
.eyebrow{font-weight:600;color:var(--lume)}
.btn{font-weight:700;letter-spacing:.06em}
.btn-accent{background:linear-gradient(150deg,var(--lume-hot),var(--lume));color:#0B1411;box-shadow:0 12px 30px -14px rgba(245,184,46,.75)}
.btn-accent:hover{box-shadow:0 0 0 1px rgba(255,204,85,.6),0 14px 40px -10px rgba(245,184,46,.85)}
.brand .mk,.chathead .mk{color:var(--mark)}

/* hero: the crane truck, keep the cab and the crane in frame */
.hero-img img{object-position:42% 55%}
@media(max-width:700px){.hero-img img{object-position:38% 50%}}

/* the strip under the hero: what we fix, with a hazard-light dot */
.vstrip{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:24px;
  border-top:1px solid rgba(243,241,234,.18);font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:rgba(243,241,234,.86)}
.vstrip span::before{content:'';display:inline-block;width:8px;height:8px;background:var(--lume-2);margin-right:10px;vertical-align:1px;
  box-shadow:0 0 12px rgba(255,138,42,.85)}

/* service cards with a line icon */
.icard .ic{width:58px;height:58px;display:grid;place-items:center;margin-bottom:18px;color:var(--lume);
  border:1px solid var(--edge-hot);background:rgba(245,184,46,.06);box-shadow:0 0 24px -6px rgba(245,184,46,.35)}
.icard .ic svg{width:34px;height:34px}
.icard h3{font-size:1.45rem;margin-bottom:10px}
.icard p{font-size:17px;color:var(--txt)}
.icard .more{display:inline-block;margin-top:16px;font-size:14.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--lume-hot);
  padding:12px 0}
a.scard{text-decoration:none}

/* detailed service rows */
.srow{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);padding:clamp(30px,4vw,44px) 0;border-top:1px solid var(--edge)}
.srow:last-child{border-bottom:1px solid var(--edge)}
.srow .ic{width:72px;height:72px;display:grid;place-items:center;color:var(--lume);border:1px solid var(--edge-hot);background:rgba(245,184,46,.06)}
.srow .ic svg{width:42px;height:42px}
.srow h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:10px}
.srow p{font-size:17px;line-height:1.66;color:var(--txt);max-width:64ch}
.srow ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.srow li{font-size:15px;letter-spacing:.04em;padding:10px 14px;border:1px solid var(--edge);color:var(--txt);min-height:44px;display:flex;align-items:center}
@media(max-width:560px){.srow{grid-template-columns:1fr}.srow .ic{width:60px;height:60px}}

/* numbers band */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.nums>div{padding:26px 0 0;border-top:2px solid var(--lume)}
.nums b{display:block;font-family:var(--serif);font-weight:900;font-size:clamp(2.2rem,4.6vw,3.6rem);color:#FBF8F1;line-height:1;margin-bottom:12px;letter-spacing:-.02em}
.nums span{font-size:15.5px;color:var(--txt-2);letter-spacing:.05em;text-transform:uppercase;line-height:1.5;display:block}
@media(max-width:800px){.nums{grid-template-columns:1fr}}

/* the photos of Collin on the job: small originals, framed small on purpose */
.onjob{display:grid;grid-template-columns:repeat(2,minmax(0,315px));gap:18px}
.onjob figure{margin:0}
.onjob img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid var(--edge-hot);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.onjob figcaption{font-size:15px;color:var(--txt-2);margin-top:10px}
@media(max-width:480px){.onjob{grid-template-columns:1fr 1fr;gap:12px}}

/* chips */
.towns{display:flex;flex-wrap:wrap;gap:10px}
.towns .pill{font-size:15px;letter-spacing:.04em;text-transform:none;min-height:44px;padding-block:11px;border-radius:0}
.county+.county{margin-top:30px}
.county h3{font-size:1.25rem;margin-bottom:12px;color:#FBF8F1}

/* the down-now band */
.down{border:1px solid var(--edge-hot);padding:clamp(26px,4vw,44px);background:linear-gradient(160deg,rgba(245,184,46,.10),rgba(255,138,42,.03));
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.down h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.down p{font-size:17px;color:var(--txt);margin-top:8px;max-width:52ch}
.down .big{font-family:var(--serif);font-weight:900;font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--lume-hot);text-decoration:none;white-space:nowrap;
  display:inline-block;padding:10px 0;text-shadow:0 0 30px rgba(245,184,46,.35)}
@media(max-width:760px){.down{grid-template-columns:1fr}.down .big{white-space:normal}}

/* report page (noindex) */
.rep{max-width:820px}
.rep .finding{border:1px solid var(--edge);padding:26px 28px;margin-bottom:18px;
  background:linear-gradient(168deg,rgba(255,255,255,.075),rgba(255,255,255,.022))}
.rep .finding h3{font-size:1.35rem;margin-bottom:8px;max-width:32ch}
.rep .finding .k{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lume);font-weight:600;display:block;margin-bottom:8px}
.rep table{width:100%;border-collapse:collapse;font-size:15.5px;margin:12px 0 4px}
.rep td,.rep th{padding:11px 10px;border-bottom:1px solid var(--edge);text-align:left;vertical-align:top}
.rep th{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lume);font-weight:600}
.rep .bad{color:#F0A28E}.rep .good{color:#9ED7A2}
.rep .finding p,.rep .fnote,.rep .steps p{max-width:62ch}

/* ── audit fixes carried over from Sunny Side, Lewis Ink and Micro Fresh (kit candidates) ── */
@media(max-width:640px){.brand .w1{letter-spacing:0}.ncta .btn{padding:12px 14px}}
@media(max-width:560px){.ncta .btn{display:none}}
main p a:not(.btn),.faq .ans a,.note a,.fnote a,.lede a,.steps p a,.hero .sub a{
  padding:15px 0;color:var(--lume-hot);text-decoration:underline;text-decoration-color:rgba(245,184,46,.5);
  text-underline-offset:3px;text-decoration-thickness:1px}
main p a:not(.btn):hover,.faq .ans a:hover,.note a:hover{text-decoration-color:var(--lume-hot)}
body.menu-open .bookbar,body.menu-open .chatfab,body.menu-open .chattag,body.menu-open .chatpanel{display:none}
.s-media img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}
.foot .btn{width:100%}

/* ═════════════ MOTION. Every start state readable (opacity .55 floor), nothing waits on JS. ═════════════ */
@media (prefers-reduced-motion:no-preference){
  .hero-img,.pbanner .bimg{overflow:hidden}
  .hero-img img,.pbanner .bimg img{animation:cp-drift 26s ease-in-out infinite alternate;transform-origin:45% 60%}
  @keyframes cp-drift{from{transform:scale(1.02)}to{transform:scale(1.10) translate3d(-1.4%,-.6%,0)}}

  .rise .w{display:inline-block;animation:cp-word .8s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--i,0) * 80ms + 120ms)}
  @keyframes cp-word{from{opacity:.55;transform:translateY(.28em);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

  .hero .provenance,.hero .sub,.hero .btns,.hero .vstrip,.hero-meta,
  .pbanner .crumbs,.pbanner .lede,.pbanner .btns{animation:cp-up .9s cubic-bezier(.2,.75,.25,1) both}
  .hero .sub,.pbanner .lede{animation-delay:.5s}
  .hero .btns,.pbanner .btns{animation-delay:.68s}
  .hero .vstrip{animation-delay:.84s}
  .hero-meta{animation-delay:1s}
  @keyframes cp-up{from{opacity:.55;transform:translateY(16px)}to{opacity:1;transform:none}}

  .btn-accent,.bookbar .b1{position:relative;overflow:hidden}
  .btn-accent::after,.bookbar .b1::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
    transform:translateX(-130%);animation:cp-sheen 6s ease-in-out 1.8s infinite}
  @keyframes cp-sheen{0%,60%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}

  /* the amber marker lights blink in sequence, like a service truck on the shoulder */
  .vstrip span::before{animation:cp-blink 2.4s steps(1,end) infinite}
  .vstrip span:nth-child(2)::before{animation-delay:.3s}.vstrip span:nth-child(3)::before{animation-delay:.6s}
  .vstrip span:nth-child(4)::before{animation-delay:.9s}.vstrip span:nth-child(5)::before{animation-delay:1.2s}
  @keyframes cp-blink{0%{opacity:1;box-shadow:0 0 16px rgba(255,138,42,.95)}50%{opacity:.45;box-shadow:0 0 4px rgba(255,138,42,.3)}}

  .icard:hover .ic,.srow:hover .ic{box-shadow:0 0 34px -4px rgba(245,184,46,.7);border-color:var(--lume)}
  .brand .mk{animation:cp-turn 1.2s cubic-bezier(.2,.8,.25,1) .2s both}
  @keyframes cp-turn{from{transform:rotate(-70deg);opacity:.55}to{transform:none;opacity:1}}
  .brand:hover .mk{filter:drop-shadow(0 0 10px rgba(245,184,46,.85))}

  .foot a.fphone,.down .big{animation:cp-glow 3.6s ease-in-out infinite}
  @keyframes cp-glow{0%,100%{text-shadow:0 0 0 rgba(245,184,46,0)}50%{text-shadow:0 0 30px rgba(245,184,46,.6)}}

  .chatfab::before{content:'';position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
    border:1px solid rgba(245,184,46,.65);opacity:0;animation:cp-ring 2.4s ease-out 2.2s 3}
  @keyframes cp-ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.75);opacity:0}}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .shead,.bleed.split .txt,.split>div,.cta-in,.rep .finding,.faq details,.note,.srow,.nums>div,.down,.onjob figure{
      animation:mo-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .towns .pill{animation:mo-rise linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
    .bleed>img{animation:cp-settle linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes cp-settle{from{transform:scale(1.14) translateY(-3%)}to{transform:scale(1.02) translateY(3%)}}
  }
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    body::before{content:'';position:fixed;left:0;top:0;width:100%;height:3px;z-index:90;pointer-events:none;
      transform-origin:0 50%;background:linear-gradient(90deg,var(--lume-2),var(--lume));
      box-shadow:0 0 12px rgba(245,184,46,.7);animation:cp-progress linear both;animation-timeline:scroll(root)}
    @keyframes cp-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}