/* Cost Cutters Land Services: its own look, taken from the logo and roadside sign.
   Charcoal and forest green with safety yellow, chunky Russo One lettering, hazard-stripe
   dividers, hard-edged cards with offset yellow shadows. Nothing here should resemble the
   other client sites. */
:root{
  --ink:#151812;--ink-2:#262b22;--muted:#5a6052;--line:#d9d4c3;--bg:#f4f1e8;--bg-alt:#e9e4d4;
  --forest:#2e3d2b;--forest-2:#1f2a1d;--yellow:#f5c52c;
  --hazard:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,var(--ink) 14px 28px);
  --radius:0;--pill:0;--shadow:none;--shadow-lg:none;
}
body{background:var(--bg);font-weight:500}
h1,h2,h3,.brand,.btn{font-weight:400;letter-spacing:0}
h1{font-size:clamp(2.3rem,5.4vw,3.7rem);line-height:1.04}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.15rem}

/* top bar becomes a hazard stripe, header goes charcoal */
.topbar{background:var(--yellow);color:var(--ink);font-weight:700;letter-spacing:.02em;border-bottom:6px solid transparent;border-image:var(--hazard) 6}
.site-header{background:var(--ink);border-bottom:4px solid var(--yellow);backdrop-filter:none}
.nav{min-height:84px}
.brand{color:#fff;font-size:1.25rem}
.brand-logo{height:64px;margin:6px 0}
.site-header nav a{color:#e8e4d6;font-family:var(--font-display);font-weight:400;font-size:1rem}
.site-header nav a:hover{color:var(--yellow)}

/* buttons: square, black outline, offset shadow */
.btn{border-radius:0;border:2px solid var(--ink);font-family:var(--font-display);font-weight:400;letter-spacing:.02em;box-shadow:4px 4px 0 var(--ink)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-primary,.btn-call{background:var(--yellow);color:var(--ink)}
.btn-primary:hover,.btn-call:hover{background:var(--yellow);color:var(--ink)}
.site-header .btn-call{box-shadow:none;border-color:var(--yellow)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--ink)}

/* hero: split. Copy on forest green, their photo framed in yellow on the right */
.hero{padding:0;background:var(--forest);color:#fff}
.hero::before,.hero::after{display:none}
.hero .wrap.hero-grid{padding-top:56px;padding-bottom:64px;align-items:center}
@media(min-width:900px){.hero .wrap.hero-grid{grid-template-columns:1fr 1fr;gap:56px}}
.hero h1{color:#fff}
.hero .eyebrow{display:inline-block;background:var(--yellow);color:var(--ink);padding:6px 10px;letter-spacing:.08em}
.hero .lead{color:#dfe5d8}
.hero ul.checks li{color:#fff}
.hero ul.checks li::before{background:var(--yellow);color:var(--ink);border-radius:0}
.hero .btn{box-shadow:4px 4px 0 #000}
.hero .btn-ghost{background:transparent;color:#fff;border-color:#fff}
.hero-photo{margin:0;position:relative}
.hero-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:6px solid var(--yellow);box-shadow:14px 14px 0 #000}
.hero-photo::after{content:"";position:absolute;left:-14px;top:-14px;width:90px;height:90px;background:var(--hazard);z-index:-1}

/* trust: a single yellow strip, not floating cards */
.trust{margin:0;padding:0;background:var(--yellow);border-bottom:4px solid var(--ink)}
.trust .cards{gap:0}
.trust .trust-card{background:transparent;border:0;border-left:2px solid rgba(0,0,0,.18);padding:26px 22px}
.trust-card:first-child{border-left:0}
@media(max-width:699px){.trust .trust-card{border-left:0;border-top:2px solid rgba(0,0,0,.18)}.trust .trust-card:first-child{border-top:0}}
.trust-card h3{margin-bottom:.3em}
.trust-card p{color:#2b2a1d}
.trust .icon{background:var(--ink);color:var(--yellow);border-radius:0;width:40px;height:40px}

/* section headings: hazard underline */
.section h2{padding-bottom:16px}
.section h2::after{width:96px;height:8px;border-radius:0;background:var(--hazard)}
.section.alt{background:var(--bg-alt)}

/* gallery: right after the strip, edge to edge, captions as yellow tags */
.gallery{background:var(--ink);color:#fff}
.gallery h2{color:#fff}
.photo-grid{gap:6px}
.photo-grid figure{border-radius:0}
.photo-grid figcaption{left:12px;right:auto;bottom:12px;padding:5px 9px;background:var(--yellow);color:var(--ink);font-family:var(--font-display);font-weight:400;font-size:.85rem}

/* services: hard-edged cards with an offset yellow block shadow */
.cards-3{gap:28px}
.card{border:2px solid var(--ink);border-radius:0;background:#fff}
.card p{color:var(--muted)}
.service-card{border-top:2px solid var(--ink);box-shadow:8px 8px 0 var(--yellow)}
.card-link:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--yellow);border-color:var(--ink)}
.card-img{height:190px;border-bottom:2px solid var(--ink);margin-bottom:18px}
.card .more{color:var(--ink);font-family:var(--font-display);font-weight:400;border-bottom:3px solid var(--yellow)}

/* process: big stencil numbers */
.process{background:var(--bg)}
.steps li{background:transparent;border:0;border-top:4px solid var(--ink);padding:18px 0 0}
.steps li::before{width:auto;height:auto;border-radius:0;background:none;color:var(--yellow);-webkit-text-stroke:2px var(--ink);font-family:var(--font-display);font-weight:400;font-size:3.4rem;line-height:1;margin-bottom:8px}

/* reviews: dark band */
.reviews{background:var(--forest-2);padding:40px 0}
.rating-badge{background:transparent;border:2px solid var(--yellow);color:#fff;border-radius:0}
.rating-badge a{color:var(--yellow)}
.rating-badge .stars{color:var(--yellow)}
.reviews .rating-badge{margin-bottom:0}

/* quote section: forest green with the form card */
.quote-section{background:var(--forest);color:#fff}
.quote-section h2,.quote-section .prose{color:#fff}
.quote-section .prose p{color:#dfe5d8;font-size:1.1rem}
.quote-form{border:2px solid var(--ink);border-radius:0;box-shadow:10px 10px 0 var(--yellow)}
.quote-form input,.quote-form select,.quote-form textarea{border-radius:0;border:2px solid #c9c4b2}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:3px solid var(--yellow);border-color:var(--ink)}
.booking{border-radius:0;border:2px dashed #c9c4b2;background:#faf8f1}
.chip span{border-radius:0;border:2px solid var(--ink)}
.chip input:checked+span{background:var(--yellow);border-color:var(--ink);color:var(--ink)}

/* areas: black tags */
.area-list a{border-radius:0;background:var(--ink);color:var(--yellow);border:2px solid var(--ink);font-family:var(--font-display);font-weight:400}
.area-list a:hover{background:var(--yellow);color:var(--ink);border-color:var(--ink)}

/* faq */
.faq details{border-bottom:2px solid var(--ink)}
.faq summary::after{color:var(--ink);background:var(--yellow);width:28px;height:28px;display:grid;place-items:center}

/* inner pages */
.page-hero{background:var(--forest);color:#fff;border-bottom:6px solid transparent;border-image:var(--hazard) 6}
.page-hero h1,.page-hero .prose,.page-hero .prose h3{color:#fff}
.page-hero .prose .lead,.page-hero .prose .muted,.page-hero .prose p{color:#dfe5d8}
.page-hero .prose a:not(.btn){color:var(--yellow)}
.page-hero .btn-primary{color:var(--ink)}
.page-hero .steps li{border-top-color:var(--yellow)}
.page-hero .steps li::before{-webkit-text-stroke:0;color:var(--yellow)}
.page-hero .lead{color:#dfe5d8}
.page-photo{border-radius:0;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--yellow)}
.crumbs a{color:var(--ink)}
.price-note{border-radius:0;border-left-color:var(--yellow)}

/* cta + footer */
body .cta-band{background:var(--yellow);color:var(--ink);border-top:10px solid transparent;border-image:var(--hazard) 10}
.cta-band h2{color:var(--ink)}
.cta-band .btn-light{background:var(--ink);color:var(--yellow);border-color:var(--ink);box-shadow:4px 4px 0 #fff}
.cta-band .btn-outline-light{border-color:var(--ink);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.site-footer{background:#0c0e0a}
.site-footer .footer-h{color:var(--yellow);font-family:var(--font-display);font-weight:400}
.mobile-call{background:var(--yellow);color:var(--ink);font-family:var(--font-display);font-weight:400;border-top:3px solid var(--ink)}

/* playbook additions: contact bar, equipment, folded form fields, phone hero */
.mobile-bar{background:var(--yellow);border-top:3px solid var(--ink);box-shadow:none}
.mobile-bar a{color:var(--ink);font-family:var(--font-display);font-weight:400;border-left:2px solid var(--ink)}
.hero .btn-text{background:transparent;color:#fff;border-color:#fff}
.hero-promise{color:var(--yellow)}
.equipment{background:var(--bg-alt)}
.equip-card h3{color:var(--forest)}
.ba-tag{border-radius:0;background:var(--ink);color:var(--yellow)}
@media(max-width:699px){
  .hero .wrap.hero-grid{padding-top:16px;padding-bottom:24px}
  .hero-photo img{border-width:4px;box-shadow:8px 8px 0 #000}
  .hero .hero-photo::after{display:none}
  .hero .btn-ghost,.hero .btn-text{background:transparent}
}